.select-gender img {
    cursor: pointer;
    /* transition: filter 0.2s ease; */
}

.select-generation img {
    cursor: pointer;
    /* transition: filter 0.9s ease; */
}

.select-gender img:hover {
    filter: brightness(0.8) sepia(1) hue-rotate(180deg) saturate(3) opacity(0.5);
}

.select-gender img.gender-selected {
    filter: brightness(0.6) sepia(1) hue-rotate(180deg) saturate(3) opacity(0.9);
}

.select-generation img:hover {
    filter: brightness(0.8) sepia(1) hue-rotate(180deg) saturate(3) opacity(0.5);
}

.select-generation img.age-selected {
    filter: brightness(0.6) sepia(1) hue-rotate(180deg) saturate(3) opacity(0.9);
}

.select-item img:hover {
    filter: brightness(0.8) sepia(1) hue-rotate(180deg) saturate(3) opacity(0.5);
}

.select-item img.feeling-selected {
    filter: brightness(0.6) sepia(1) hue-rotate(180deg) saturate(3) opacity(0.9);
}

.select-item img.preparation-selected {
    filter: brightness(0.6) sepia(1) hue-rotate(180deg) saturate(3) opacity(0.9);
}

.select-item img.medkit-selected {
    filter: brightness(0.6) sepia(1) hue-rotate(180deg) saturate(3) opacity(0.9);
}

.button-next.not-selected {
    background-color: #eee !important;
}

.button-next {
    cursor: pointer;
}

.go-shindan {
    cursor: pointer;
}

.go-shindan:hover {
    opacity: 0.6;
}

/* cska 開閉情報 */
:root {
    --box-w: 320px; /* 展開時の幅 */
    --tab-w: 40px; /* 畳んだ時に見せるタブ幅（ご要望の約40px） */
    --radius: 12px;
}

/* 親ボックス（背景を持つ要素） */
.side-note {
    position: fixed;
    top: 200px;
    right: 0;
    z-index: 1000;
    width: min(var(--box-w), 92vw);
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
    overflow: clip; /* 余白を切る */
    transition: transform 0.28s ease;
}

/* ← 畳んだら親ごと右へスライド。タブ幅だけ残す */
.side-note.is-collapsed {
    transform: translateX(calc(100% - var(--tab-w)));
}

/* 内側（本文） */
.side-note__inner {
    padding: 50px 16px 16px 30px;
    transition: opacity 0.2s ease;
}
/* 畳み時は本文を視覚的に消す（背景は親が持っているため、親ごと動かすのが肝） */
.side-note.is-collapsed .side-note__inner {
    opacity: 0;
    pointer-events: none;
}

.side-note ul {
    margin: 0;
    padding-left: 1.2em;
    list-style: disc;
}
.side-note li {
    line-height: 1.6;
    margin: 2px 0;
}

/* タブ兼トグルボタン（常に右端から見える） */
.side-note__toggle {
    position: absolute;
    top: 0;
    left: -var(--tab-w); /* 親の外に出してタブだけ見せる */
    width: var(--tab-w);
    height: 40px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--radius) 0 0 var(--radius);
    background: rgba(0, 0, 0, 0.7); /* タブはやや濃いめで視認性UP */
    color: #fff;
    cursor: pointer;
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15);
}
.side-note__toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* 矢印（CSSだけで簡易表示） */
.side-note__toggle::after {
    content: '❮';
    font-size: 16px;
    transform: rotate(180deg); /* 展開時＝左向き（閉じる） */
    transition: transform 0.2s ease;
}
.side-note.is-collapsed .side-note__toggle::after {
    content: '❮';
    transform: rotate(0); /* 畳み時＝右向き（開く） */
}

/* モバイル幅で少し小さく */
@media (max-width: 480px) {
    :root {
        --box-w: 280px;
    }
    .side-note__toggle {
        height: 36px;
    }
}

.step-list {
    margin: 0;
    padding: 0;
    list-style: none; /* ・を消す */
}

.step-list > li {
    font-weight: bold;
    margin-bottom: 6px;
}

.step-list > li:not(:last-child) {
    margin-bottom: 12px; /* Step間の余白 */
}

.step-list ul {
    margin: 4px 0 0 14px; /* 上に少し余白＋インデント */
    padding: 0;
    list-style: none; /* ・を消す */
    font-weight: normal;
}

.step-list ul li {
    margin: 2px 0;
}

.days-selected {
    background-color: #1690ee !important;
    border: 3px solid #1690ee !important;
    color: #fff !important;
}

.button-cart.add-box {
    cursor: pointer;
}

.button-cart.add-box:hover {
    opacity: 0.7;
}

.cart-dialog {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}
.cart-dialog-content {
    background: #fff;
    max-width: 320px;
    margin: 20% auto;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}
.cart-dialog-buttons {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.cart-dialog-buttons button {
    padding: 8px 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.cart-dialog-buttons .continue {
    background: #ccc;
    color: #333;
}
.cart-dialog-buttons .goto-cart {
    background: #0073aa;
    color: #fff;
}