/* ============================================================
 * CROSSUP WELLNESS — 共通スタイル
 *
 * 色・タイポ・角丸・エレベーションの実値は assets/css/tokens.css にある。
 * このファイルは値を持たず、必ずトークンを参照する。
 *
 * デジタル庁デザインシステム（DADS）準拠。根拠は各セクションに記載。
 * 参照元: dads-markdown-20260909/
 * ============================================================ */


/* ------------------------------------------------------------
 * 1. ベース
 *
 * DADS foundations/typography:
 *   本文の行間は文字サイズの1.5倍以上が最低限度。
 *   一般的なウェブサイトの本文は160〜175%。ここでは170%を使う。
 *   CSSでは単位なし数値で実装する（Figma上の％表記をそのまま書かない）。
 * ------------------------------------------------------------ */
body {
    color: var(--color-brand-text);
    background-color: var(--color-brand-bg);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-16);
    -webkit-font-smoothing: antialiased;
    line-height: var(--line-height-170);
    letter-spacing: 0.02em;
}

/* DADS components/heading:
 * 見出しレベルの大小とフォントサイズの大小は別々に定義する。
 * サイズは各画面のユーティリティで指定し、ここでは書体と行間だけを揃える。 */
h1, h2, h3, .font-serif-jp {
    font-family: 'Noto Serif JP', serif;
}
h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-140);
}

.font-en {
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 0.05em;
}

/* ヘッダー継承対策。body と同値を明示して字送りのブレを防ぐ。 */
#uo-navbar {
    font-family: var(--font-family-sans);
    color: var(--color-brand-text);
}

/* ------------------------------------------------------------
 * 2. リンク
 *
 * DADS foundations/link-text:
 *   リンクは色だけでなく色以外の手がかりでも区別できなければならない
 *   （下線が最も一般的）。ホバーでは背景色ではなく下線の太さを変える。
 *   ＊ホバーで背景色を変える旧スタイルはコントラスト要件を満たせず廃止された。
 *
 * ★ブランド配色維持のための明示的な逸脱:
 *   DADS は機能カラーとして青(Default)/マゼンタ(Visited)の慣例を推奨するが、
 *   本サイトはブランド配色を優先する。必須要件（4.5:1 と非色手がかり）は満たす。
 *   青に戻す場合は --color-key-* を --color-primitive-blue-* に差し替える。
 *   詳細は docs/01_DADS_COMPLIANCE.md
 * ------------------------------------------------------------ */
.cw-prose :any-link:not(.cw-btn),
.cw-link {
    color: var(--color-key-1000);
    text-decoration: underline;
    text-decoration-thickness: calc(1 / 16 * 1rem);
    text-underline-offset: calc(3 / 16 * 1rem);
}
.cw-prose :any-link:not(.cw-btn):visited,
.cw-link:visited {
    color: var(--color-primitive-magenta-900);
}
@media (hover: hover) {
    .cw-prose :any-link:not(.cw-btn):hover,
    .cw-link:hover {
        color: var(--color-key-900);
        text-decoration-thickness: calc(3 / 16 * 1rem);
    }
}
.cw-prose :any-link:not(.cw-btn):active,
.cw-link:active {
    color: var(--color-semantic-warning-orange-2);
    text-decoration-thickness: calc(1 / 16 * 1rem);
}


/* リンク・小さなボタンのターゲット領域
 * DADS foundations/link-text:
 *   「隣接するターゲット領域と重複がない状態で少なくとも24×24 CSS px以上」
 *
 * 透明な擬似要素で当たり判定だけを広げる。DADS 自身が Small / X-Small の
 * ボタンで使っているのと同じ手法で、レイアウトには一切影響しない。
 *
 * 除外するもの:
 *   - after: ユーティリティを持つ要素（ナビの下線アニメ等）… 擬似要素が衝突する
 *   - absolute / fixed / sticky を指定した要素 … ここで position を上書きすると
 *     カード全面リンク（.product-item の inset-0 オーバーレイ）が潰れる */
main :is(a[href], button):not(.cw-btn):not([class*="after:"]):not([class*="absolute"]):not([class*="fixed"]):not([class*="sticky"]),
nav[aria-label="パンくずリスト"] a,
footer a:not(.cw-btn):not([class*="after:"]) {
    position: relative;
}
main :is(a[href], button):not(.cw-btn):not([class*="after:"]):not([class*="absolute"]):not([class*="fixed"]):not([class*="sticky"])::after,
nav[aria-label="パンくずリスト"] a::after,
footer a:not(.cw-btn):not([class*="after:"])::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    height: calc(24 / 16 * 1rem);
    pointer-events: auto;
}


/* チェックボックス・ラジオボタン
 * DADS components/checkbox / radio はS・M・Lの3サイズを定義する（実値は非公開）。
 * ブラウザ既定の13pxではターゲット領域24pxに満たないため底上げする。
 * チェックボックスはテキストの左側に置く（DADS components/checkbox）。 */
input[type="checkbox"],
input[type="radio"] {
    width: calc(24 / 16 * 1rem);
    height: calc(24 / 16 * 1rem);
    flex-shrink: 0;
    accent-color: var(--color-key-900);
    cursor: pointer;
}


/* ------------------------------------------------------------
 * 3. フォーカス表示
 *
 * DADS foundations/color:
 *   「Yellow-300とBlackの2重構造をもち視認性を確実にします。
 *     いかなる場合も変更してはいけません。」
 *
 * 実装値は公式 design-system-example-components-html の src/global.css より。
 * ここを上書きするCSSを他所に書かないこと。
 * ------------------------------------------------------------ */
:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
    border-radius: var(--focus-border-radius);
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* テキストボタンやリンクなど、塗りのない要素は黄色を面でも敷く */
.dads-u-focus-outline:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
    border-radius: var(--focus-border-radius);
    background-color: var(--focus-ring-color);
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* スクリーンリーダー専用テキスト（DADS 公式ユーティリティ） */
.dads-u-visually-hidden {
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}


/* ------------------------------------------------------------
 * 4. ボタン
 *
 * DADS components/button の実装値。
 *   Large 136x56 / Medium 96x48 / Small 80x36 / X-Small 72x28（いずれも最小値）
 *   ターゲット領域は44 CSS px以上。Small・X-Small は擬似要素で44pxを確保する。
 *
 * 重要度は塗り／アウトライン／テキストで表し、色だけで区別しない（1.4.1）。
 *   solid-fill  プライマリー … 1画面につき原則1つまで
 *   outline     セカンダリー … 原則として最大で同時に3つまで
 *   text        ターシャリー … 1画面につき原則1つまで（キャンセル等）
 *
 * --cw-btn-color 群を差し替えるだけで柱ごとの色に対応できる。
 * ------------------------------------------------------------ */
.cw-btn {
    --cw-btn-color: var(--color-key-900);
    --cw-btn-hover-color: var(--color-key-1000);
    --cw-btn-active-color: var(--color-key-1200);
    --cw-btn-outline-hover-bg: var(--color-key-200);
    --cw-btn-outline-active-bg: var(--color-key-300);
    --cw-btn-text-hover-bg: var(--color-key-50);
    --cw-btn-text-active-bg: var(--color-key-100);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: calc(4 / 16 * 1rem);
    box-sizing: border-box;
    max-width: 100%;
    font-family: var(--font-family-sans);
    font-weight: 700;
    font-size: var(--font-size-16);
    line-height: var(--line-height-100);
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    text-underline-offset: calc(3 / 16 * 1rem);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* MOVE ピラー用。ボタン本体のクラスに併記する */
.cw-btn--move {
    --cw-btn-color: var(--color-move-900);
    --cw-btn-hover-color: var(--color-move-1000);
    --cw-btn-active-color: var(--color-move-1200);
    --cw-btn-outline-hover-bg: var(--color-move-200);
    --cw-btn-outline-active-bg: var(--color-move-300);
    --cw-btn-text-hover-bg: var(--color-move-50);
    --cw-btn-text-active-bg: var(--color-move-100);
}

/* --- サイズ --- */
.cw-btn--lg {
    min-width: calc(136 / 16 * 1rem);
    min-height: calc(56 / 16 * 1rem);
    border-radius: var(--border-radius-8);
    padding: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem);
}
.cw-btn--md {
    min-width: calc(96 / 16 * 1rem);
    min-height: calc(48 / 16 * 1rem);
    border-radius: var(--border-radius-8);
    padding: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem);
}
.cw-btn--sm {
    position: relative;
    min-width: calc(80 / 16 * 1rem);
    min-height: calc(36 / 16 * 1rem);
    border-radius: var(--border-radius-6);
    padding: calc(2 / 16 * 1rem) calc(12 / 16 * 1rem);
}
.cw-btn--xs {
    position: relative;
    min-width: calc(72 / 16 * 1rem);
    min-height: calc(28 / 16 * 1rem);
    border-radius: var(--border-radius-4);
    padding: calc(2 / 16 * 1rem) calc(8 / 16 * 1rem);
    font-size: var(--font-size-14);
}
/* 44px に満たないサイズのターゲット領域を擬似要素で確保する */
.cw-btn--sm::after,
.cw-btn--xs::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    height: calc(44 / 16 * 1rem);
}

/* 全幅で使いたい場合（モバイルの主要導線など） */
.cw-btn--block {
    display: flex;
    width: 100%;
}

/* --- 塗り（プライマリー） --- */
.cw-btn--primary {
    border: 4px double transparent;
    background-color: var(--cw-btn-color);
    color: var(--color-neutral-white);
}
@media (hover: hover) {
    .cw-btn--primary:hover {
        background-color: var(--cw-btn-hover-color);
        text-decoration: underline;
        text-decoration-thickness: calc(1 / 16 * 1rem);
    }
}
.cw-btn--primary:active {
    background-color: var(--cw-btn-active-color);
    text-decoration: underline;
}

/* --- アウトライン（セカンダリー） --- */
.cw-btn--secondary {
    border: 1px solid currentcolor;
    background-color: var(--color-neutral-white);
    color: var(--cw-btn-color);
}
@media (hover: hover) {
    .cw-btn--secondary:hover {
        background-color: var(--cw-btn-outline-hover-bg);
        color: var(--cw-btn-hover-color);
        text-decoration: underline;
        text-decoration-thickness: calc(1 / 16 * 1rem);
    }
}
.cw-btn--secondary:active {
    background-color: var(--cw-btn-outline-active-bg);
    color: var(--cw-btn-active-color);
    text-decoration: underline;
}

/* --- テキスト（ターシャリー） --- */
.cw-btn--tertiary {
    border: 0;
    background-color: transparent;
    color: var(--cw-btn-color);
    text-decoration: underline;
    text-decoration-thickness: calc(1 / 16 * 1rem);
}
@media (hover: hover) {
    .cw-btn--tertiary:hover {
        background-color: var(--cw-btn-text-hover-bg);
        color: var(--cw-btn-hover-color);
        text-decoration-thickness: calc(3 / 16 * 1rem);
    }
}
.cw-btn--tertiary:active {
    background-color: var(--cw-btn-text-active-bg);
    color: var(--cw-btn-active-color);
}
.cw-btn--tertiary:focus-visible {
    background-color: var(--focus-ring-color);
}

/* --- 無効状態 ---
 * DADS は disabled の使用そのものを避けるよう求めている。
 * やむを得ず使う場合のためにスタイルだけ定義しておく。 */
.cw-btn:disabled,
.cw-btn[aria-disabled="true"] {
    cursor: default;
    text-decoration: none;
}
.cw-btn--primary:disabled,
.cw-btn--primary[aria-disabled="true"] {
    background-color: var(--color-neutral-solid-gray-300);
    color: var(--color-neutral-solid-gray-50);
}
.cw-btn--secondary:disabled,
.cw-btn--secondary[aria-disabled="true"],
.cw-btn--tertiary:disabled,
.cw-btn--tertiary[aria-disabled="true"] {
    background-color: transparent;
    color: var(--color-neutral-solid-gray-300);
}
/* 強制カラーモードでは色が失われるため境界を別途示す */
@media (forced-colors: active) {
    .cw-btn:disabled,
    .cw-btn[aria-disabled="true"] {
        border-color: GrayText;
        color: GrayText;
    }
}

/* --- ボタン群 ---
 * DADS components/button:
 *   前進する操作は右、キャンセル・戻るは左に配置する。
 *   モバイルの縦並びは プライマリー → セカンダリー → ターシャリー の順。
 * DOM順（＝読み上げ順・タブ順）は変えず、視覚順だけを入れ替える。 */
.cw-button-group {
    display: flex;
    flex-direction: column;
    gap: calc(8 / 16 * 1rem);
}
@media (768px <= width) {
    .cw-button-group {
        flex-direction: row-reverse;
        justify-content: flex-start;
    }
    .cw-button-group .cw-btn--primary {
        order: -1;
    }
    .cw-button-group .cw-btn--tertiary {
        margin-right: auto;
    }
}


/* ------------------------------------------------------------
 * 5. フォームコントロール
 *
 * DADS components/input-text の実装値。
 *   枠線 1px / Solid Gray-600、角丸8px、padding 12px 16px、文字16px
 *   高さ Small 40px / Medium 48px / Large 56px
 *   ホバーで枠線を黒に、readonly は破線、エラーは Error-1
 *
 * フォーカスは §3 の :focus-visible が担う。ここで outline を消さないこと。
 * ------------------------------------------------------------ */
.cw-input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--color-neutral-solid-gray-600);
    border-radius: var(--border-radius-8);
    background-color: var(--color-neutral-white);
    padding: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem);
    color: var(--color-neutral-solid-gray-900);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-16);
    line-height: var(--line-height-100);
    letter-spacing: 0.02em;
}
.cw-input--sm { height: calc(40 / 16 * 1rem); }
.cw-input--md { height: calc(48 / 16 * 1rem); }
.cw-input--lg { height: calc(56 / 16 * 1rem); }

/* テキストエリアは高さを固定しない */
textarea.cw-input {
    height: auto;
    line-height: var(--line-height-170);
}

@media (hover: hover) {
    .cw-input:not(:read-only):hover {
        border-color: var(--color-neutral-black);
    }
}
/* DADS components/input-text: readonly は破線で示す。
 * ★<select> は readonly 属性を持たないため CSS 上つねに :read-only に一致する。
 *   要素を絞らないとセレクトボックスまで破線になる。 */
:is(input, textarea).cw-input:read-only:not(:disabled) {
    border-style: dashed;
}
.cw-input:is(:user-invalid, [aria-invalid="true"]) {
    border-color: var(--color-semantic-error-1);
}
.cw-input:is(:disabled, [aria-disabled="true"]),
.cw-input:is(:disabled, [aria-disabled="true"]):hover {
    border-color: var(--color-neutral-solid-gray-300);
    background-color: var(--color-neutral-solid-gray-50);
    color: var(--color-neutral-solid-gray-420);
}

/* 項目ラベル・要否ラベル・サポートテキスト・エラーテキスト
 * DADS: 要否ラベルは「※」、エラーテキストは「＊」から書き始める。 */
.cw-label {
    display: block;
    font-weight: 700;
    color: var(--color-brand-text);
}
.cw-label__req {
    color: var(--color-semantic-error-1);
    font-weight: 700;
}
.cw-label__opt {
    color: var(--color-neutral-solid-gray-600);
    font-weight: 400;
}
.cw-support-text {
    display: block;
    color: var(--color-neutral-solid-gray-800);
    font-size: var(--font-size-14);
    line-height: var(--line-height-150);
}
/* DADS components/input-text:
 * エラーテキストに role="alert" / aria-live を付けてはいけない。
 * 静的テキストとして置き、必要なら aria-describedby で関連付ける。 */
.cw-error-text {
    display: block;
    margin-top: calc(8 / 16 * 1rem);
    color: var(--color-semantic-error-1);
    font-size: var(--font-size-14);
    line-height: var(--line-height-150);
}

/* 2列の入力行（氏名/フリガナ・郵便番号/都道府県・有効期限/セキュリティコード など）
 * 左右の欄で「ラベル → 補足 → 入力 → エラー」の高さが違っても、入力欄が同じ高さに並ぶように
 * subgrid で行トラックを共有する。
 *   構造：.cw-field-pair > .cw-field × 2。各 .cw-field は必ず
 *         label / .cw-support-text / 入力 / .cw-error-text の4要素を持つ（補足文が無い欄も空でなく文言を置く）。
 * 640px 未満は1列（通常のブロック）。subgrid 非対応ブラウザは行がそろわないだけで崩れない。 */
.cw-field-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .cw-field-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
        row-gap: 0;
    }
    .cw-field-pair > .cw-field {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
    }
}

/* お支払い方法の選択（views/checkout_payment.php）
 * 選択中の方法の詳細パネルだけを開く。:has() 非対応ブラウザではパネルを常に開いたままにする（隠さない）。 */
.cw-pay-option {
    border: 1px solid var(--color-brand-border);
    border-radius: 0.75rem;
    background-color: var(--color-neutral-white);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
@supports selector(:has(*)) {
    .cw-pay-panel { display: none; }
    .cw-pay-option:has(input[type="radio"]:checked) {
        border-color: var(--color-key-900);
        background-color: var(--color-brand-bg);
        box-shadow: 0 0 0 1px var(--color-key-900);
    }
    .cw-pay-option:has(input[type="radio"]:checked) .cw-pay-panel { display: block; }
}

/* 数値入力のスピナー非表示 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}


/* ------------------------------------------------------------
 * 6. 注釈・通知
 *
 * DADS components/notification-banner:
 *   バナー外枠および警告アイコンは非テキスト要素のため、隣接する背景色との間で
 *   コントラスト比3:1以上が必要。Warning-YL-1 (#B78F00) で3:1を確保する。
 *   アクションボタンのラベル(白)は4.5:1が必要なため Warning-YL-2 (#927200) を使う。
 *
 * カラーチップスタイル（左辺だけ太い）を既定とする。
 * ------------------------------------------------------------ */
.cw-notice {
    border: 1px solid var(--color-neutral-solid-gray-536);
    border-left-width: calc(8 / 16 * 1rem);
    border-radius: var(--border-radius-8);
    background-color: var(--color-neutral-white);
    padding: calc(16 / 16 * 1rem);
    color: var(--color-brand-text);
}
.cw-notice--error {
    border-color: var(--color-semantic-error-1);
}
.cw-notice--warning {
    border-color: var(--color-semantic-warning-yellow-1);
}
.cw-notice--success {
    border-color: var(--color-semantic-success-1);
}
.cw-notice--info {
    border-color: var(--color-key-900);
}
.cw-notice__title {
    font-weight: 700;
}


/* ------------------------------------------------------------
 * 7. カードのホバー効果
 *
 * 旧HTML由来の3変種（実質同じだが微妙に違う）を1つに統合した。
 *
 * DADS foundations/elevation:
 *   既定の高さレベルは0。ホバーで浮く部品は静止位置より1レベル以上上げる。
 *   ★影でコントラスト比は確保できない。浮いた要素にも3:1以上の枠線が必要。
 *     カードの枠線は --color-brand-border（背景に対し3.48:1）が担う。
 * ------------------------------------------------------------ */
.card-hover-effect {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
    .card-hover-effect:hover {
        transform: translateY(-2px);
        box-shadow: var(--elevation-2);
    }
}
@media (prefers-reduced-motion: reduce) {
    .card-hover-effect,
    .card-hover-effect:hover {
        transform: none;
        transition: box-shadow 0.25s ease;
    }
}


/* ------------------------------------------------------------
 * 8. 購入ステッパー（/cart/ /checkout/ /checkout/confirm/ /checkout/complete/）
 *
 * DADS components/step-navigation:
 *   完了＝チェック付きの丸 / 現在＝塗りの二重丸 / 未了＝白丸
 * ------------------------------------------------------------ */
.step-active {
    color: var(--color-key-900);
    font-weight: 700;
    border-bottom: 2px solid var(--color-key-900);
}
.step-completed {
    color: var(--color-brand-text);
}
.step-inactive {
    color: var(--color-neutral-solid-gray-600);
}
/* 現在のステップの丸を二重構造にする */
.step-active .cw-step-dot {
    box-shadow: 0 0 0 2px var(--color-neutral-white),
                0 0 0 4px var(--color-key-900);
}


/* ------------------------------------------------------------
 * 9. マイページ サイドナビのアクティブ状態
 * ------------------------------------------------------------ */
.nav-link-active {
    background-color: var(--color-key-900);
    color: var(--color-neutral-white) !important;
    font-weight: 700;
}


/* ------------------------------------------------------------
 * 10. アコーディオン／ディスクロージャー
 *     開閉JSは assets/js/page/faq.js
 * ------------------------------------------------------------ */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
}
.accordion-content.open {
    max-height: 1000px;
    transition: max-height 0.5s ease-in-out;
}


/* ------------------------------------------------------------
 * 11. お気に入りボタン
 * ------------------------------------------------------------ */
.favorite-btn.is-fav {
    color: var(--color-semantic-error-1);
}
.favorite-btn.is-fav svg {
    fill: currentColor;
}


/* ------------------------------------------------------------
 * 12. 背景テクスチャ・スクロールバー
 * ------------------------------------------------------------ */
.bg-grain {
    background-image: radial-gradient(var(--color-brand-text) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.03;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-brand-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--color-neutral-solid-gray-420);
    border-radius: var(--border-radius-4);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-key-900);
}


/* ------------------------------------------------------------
 * 13. モーション・その他のUI部品
 * ------------------------------------------------------------ */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
    .fade-up { opacity: 1; transform: none; transition: none; }
}

/* TOPヒーローの背景スライド（views/home_main.php / assets/js/page/home-hero.js）
 *   --hero-photo-opacity : 写真の濃さ。上げると写真が主役に、下げると文字が読みやすくなる
 *   --hero-fade          : 切り替えのふわっと具合（切り替え間隔は data-interval で JS 側） */
.hero-slides {
    --hero-photo-opacity: .46;
    --hero-fade: 1.4s;
}
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--hero-fade) ease-in-out;
    will-change: opacity;
}
.hero-slide.is-active { opacity: var(--hero-photo-opacity); }
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.hover-underline-anim { position: relative; }
.hover-underline-anim::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}
.hover-underline-anim:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}