/* ==========================================================================
   トップ別案C（Claude・2026-10-06）
   --------------------------------------------------------------------------
   軸：お店の内装（黒い壁と天井・メガネの白い線画・白く光る棚と黒い棚板）を、画面の地と並べ方にする
   ・ページ全体を黒い地（壁）にそろえる（ヘッダー・フッターの黒と一続き）
   ・「光る棚」＝上ほど明るい面＋上端の照明の線＋下の棚板と影。メイン・TRUNK SHOW・ラインアップ・
     スマートグラスの4段で同じ形を繰り返し、ページ全体を店の壁のように見せる
   ・区画の重みは3段階：棚（主役）／壁の文字（白い文字・細い線）／案内板（お知らせとブログの細い帯）
   ・赤は「予約する」だけ。角は直角、書体は端末のもの
   ・動きは「押したとき・触れたときの反応」と、メインの棚の照明が最初に一度だけ点く演出だけ。
     スクロールに合わせた演出・自動で動き続けるものは入れない（2026-10-06 アツシさんと相談して決めた）
   ・黒い壁の色・光る棚・見出し・矢印つきの一覧など、下層ページでも使う部品は shelf.css（.wall）へ移した
     （2026-10-07・案Cで確定したため）。ここに残すのはトップだけの区画（メイン・バイク用メガネとは・
     ラインアップの棚の位置・スマートグラス・店舗案内）と、メインの棚の上での色の調整
   ・スマホを先に書き、広い画面は @media (min-width: …) で足していく
       48rem（768px〜）＝タブレット、64rem（1024px〜）＝パソコン
   ========================================================================== */
.front-c {
    border-bottom: 1px solid var(--c-line); /* フッターも黒いので、店舗案内との境目に線を引く */
}

/* 日本語の折り返しを文節で行い（対応するブラウザで）、行末の1文字だけの行を避ける */
.front-c :is(h2, h3, p, li, dd) {
    word-break: auto-phrase;
    text-wrap: pretty;
}

.front-c .c-about,
.front-c .c-lens {
    border-top: 0;
}

/* スポーツ別はレンズのすぐ下に続ける（線も余白も二重にしない＝「選ぶ」の壁をひと続きに） */
.front-c .c-sports {
    padding-top: 0;
    border-top: 0;
}

/* ---------- 1. メイン（1段目の光る棚） ---------- */
.front-c .c-hero {
    /* コピーの大きさ。2行目「ハンデじゃない!!」が1行に収まる値（スマホは画面幅の11%） */
    --c-hero-size: clamp(2.25rem, 11vw, 8rem);
    position: relative;
    isolation: isolate; /* 文字の反転の合成を、メインの中だけで行う */
    overflow: hidden;   /* 写真を画面の外まで伸ばしても、横スクロールを出さない */
    padding-block: clamp(1.75rem, 5svh, 4.5rem) clamp(2rem, 5svh, 3rem);
}

/* 1行目「メガネは」は黒い壁、2行目「ハンデじゃない!!」は丸ごと光る棚の上に載せる。
   行の高さを文字の1.25倍にして行と行の間に隙間を作り、2行目の行の上端＝棚の上端になるよう、
   コピーの大きさの1.25倍だけ棚を上へ引き上げる（1.06倍の詰めた行では、棚の上端が1行目の文字を横切った）。
   文字は白を「差の絶対値」で重ねる（mix-blend-mode: difference）ので、黒い壁の上では白、
   光の上では黒に自動で切り替わる（書体によって高さが少しずれても、文字が消えずに読める） */
.front-c .c-hero__top {
    margin-bottom: calc(var(--c-hero-size) * -1.25);
}

.front-c .c-hero__title {
    position: relative;
    z-index: 3; /* 照明の線（2）と黒い幕（1）より上 */
    color: #fff;
    font-size: var(--c-hero-size);
    font-weight: 800;
    font-feature-settings: "palt";
    letter-spacing: -0.02em;
    line-height: 1.25;
    mix-blend-mode: difference;
}

/* 1行ずつ折り返さない（大きさは画面の幅に合わせ、2行目が必ず収まる値にしてある） */
.front-c .c-hero__line {
    display: block;
    white-space: nowrap;
}

/* 「!!」は半角の約物で字詰め（palt）が効かず、「い」と「!」、「!」どうしの間が開いて見えるので詰める */
.front-c .c-hero__bang {
    margin-left: -0.04em;
    letter-spacing: -0.1em;
}


@media (forced-colors: active) {
    /* 画面の色を強制する設定（Windows のハイコントラスト）では、反転の合成をやめて普通の文字にする */
    .front-c .c-hero__title {
        mix-blend-mode: normal;
    }

}
/* スマホ：光る棚の中は「2行目のコピー → 写真」。棚板は写真の下に付け、
   紹介文と次の開催は棚板の下の黒い壁に置く（棚の中に入れると、最初の画面に収まらないため） */
.front-c .c-hero__shelf {
    padding-top: calc(var(--c-hero-size) * 1.25 + 0.75rem);
    border-bottom: 0;
    box-shadow: none;
}

/* 写真：背景の明るいグレーを少し明るくして（1.07倍でほぼ白）、棚の光と掛け合わせる（乗算）。
   写真の四角い縁が消え、棚の明るさの変化がそのまま写真の後ろに続く。
   スマホは横長（2:1）に切る。元の 3:2 のままだと、今日の状態と次の開催を入れたところで紹介文（何の店か）が
   画面下の固定ボタンの裏に入った（審査3回目）。ヘルメットと顔が残る位置で切る */
.front-c .c-hero__photo {
    width: 100%;
    height: calc(50vw + var(--c-board-depth)); /* 写真の高さ（画面の幅の半分）＋棚板 */
    object-fit: cover;
    object-position: 55% 18%;
    border-bottom: var(--c-board-depth) solid transparent;
    background: var(--c-board-face) bottom / 100% var(--c-board-depth) no-repeat border-box;
    filter: brightness(1.07);
    mix-blend-mode: multiply;
}

/* 比較写真2枚（2026-10-09〜。チラシ・ポスターと同じ赤いヘルメットの写真）。
   スマホは画面の幅いっぱいに2枚を横に並べ（1枚＝幅の半分・3:2）、下に棚板を付ける。
   写真は背景が白なので、上の1枚写真と同じく少し明るくして棚の光と掛け合わせ（乗算）、四角い縁を消す。
   札（一般的なメガネ／RIDING EYE WEAR Ride）はポスターと同じ言葉を、写真の左上に文字で重ねる */
.front-c .c-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    border-bottom: var(--c-board-depth) solid transparent;
    background: var(--c-board-face) bottom / 100% var(--c-board-depth) no-repeat border-box;
}

.front-c .c-compare__item {
    position: relative;
    margin: 0;
}

.front-c .c-compare__item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    filter: brightness(1.07);
    mix-blend-mode: multiply;
}

.front-c .c-compare__label {
    position: absolute;
    top: 0.375rem;
    left: 0.375rem;
    padding: 0.125rem 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.front-c .c-hero__stage {
    display: grid;
    justify-items: start;
    gap: 1rem;
    padding-top: 1.25rem;
    background: var(--c-bg); /* 棚の光はここで終わり、下は黒い壁 */
    color: var(--c-text);
}

.front-c .c-hero__stage > * {
    width: 100%;
}

/* スマホの並び：今日の営業の状態 → 次の TRUNK SHOW → 紹介文。
   最初の画面（画面下の固定ボタンの上まで）に、来店前にいちばん知りたい2つを入れる。紹介文はその下へ
   （パソコンは棚の中に余裕があるので、紹介文 → 次の開催 → 今日の状態の順のまま） */
.front-c .c-status {
    order: 1;
}

.front-c .c-next {
    order: 2;
}

.front-c .c-hero__lead {
    order: 3;
}

.front-c .c-hero__lead {
    max-width: 28em;
    color: var(--c-muted);
    font-size: 0.9375rem;
    line-height: 1.85;
}

/* 照明が点く：ページを開いたとき、メインの棚の照明が一度だけ点く。
   照明の線（::before）が先に瞬いて点き、少し遅れて棚の面が明るくなる（面に黒い幕 ::after をかけて外す）。
   棚全体の明るさを動かすと、スマホでは棚の下の紹介文と次の開催まで瞬いたので、幕の方式にした。
   2行目の文字は反転の合成なので、幕がかかっているあいだは白、点くと黒に切り替わる。
   ・同じタブで2回目以降にトップを開いたときは出さない（html に c-lit-seen が付く＝front-page-c.php）
   ・点滅は1回だけで、光の点滅の基準（1秒に3回以下）に収める
   ・動きを減らす設定にしている人には出さない（最初から点いた状態）
   ・TRUNK SHOW の棚まで順に点ける形も試したが、最初の画面に TRUNK SHOW の棚が入るのは大画面だけで、
     そのあいだ「予約する」まで暗くなったのでやめた（2026-10-06 審査3回目）
   ・メインの幕の高さ（スマホ）＝2行目の場所（コピーの1.25倍＋0.75rem）＋写真（画面の幅の半分＝下の 1.） */
.front-c .c-hero__shelf::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    background: var(--c-bg);
    content: "";
    opacity: 0;
    pointer-events: none;
}

.front-c .c-hero__shelf::after {
    /* 比較写真2枚＝高さは画面の幅の3分の1（幅の半分×2/3） */
    height: calc(var(--c-hero-size) * 1.25 + 0.75rem + 33.333vw);
}


@media (prefers-reduced-motion: no-preference) {
    .front-c .c-hero__shelf::before {
        animation: c-line-on 1s 0.2s both;
    }

    .front-c .c-hero__shelf::after {
        animation: c-light-on 1s 0.3s both;
    }

    .c-lit-seen .front-c .c-hero__shelf::before,
    .c-lit-seen .front-c .c-hero__shelf::after {
        animation: none;
    }

}

@keyframes c-line-on {
    0% {
        opacity: 0.08;
    }
    10% {
        opacity: 1;
    }
    16% {
        opacity: 0.35;
    }
    24%,
    100% {
        opacity: 1;
    }
}

@keyframes c-light-on {
    0% {
        opacity: 0.88;
    }
    14% {
        opacity: 0;
    }
    20% {
        opacity: 0.4;
    }
    32%,
    100% {
        opacity: 0;
    }
}
/* メインの棚とのあいだに黒い壁を見せる（1440px で約84px。詰めると、最初の画面の約7割が明るくなり、
   「黒い店」の印象が薄れた＝2026-10-06 の2回目の審査） */
.front-c .c-trunk {
    padding-top: clamp(2.5rem, 6vw, 5.5rem);
}

/* ---------- 3. バイク用メガネとは（壁の文字） ---------- */
.front-c .c-about__inner {
    display: grid;
    grid-template-areas:
        "head"
        "list"
        "more";
    gap: 2.5rem;
}

.front-c .c-about__head {
    grid-area: head;
}

/* 8項目は線で区切らず、大きな文字と行間で並べる（壁に書かれた文字のように）。番号は細い数字 */
.front-c .c-worries {
    display: grid;
    grid-area: list;
    gap: 0;
    border-top: 1px solid var(--c-line-strong);
    counter-reset: worry;
}

.front-c .c-worries__item {
    position: relative;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    align-items: center;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--c-line);
    counter-increment: worry;
    font-size: clamp(1.0625rem, 4.6vw, 1.5rem);
    font-weight: 700;
    font-feature-settings: "palt";
    letter-spacing: 0.02em;
    line-height: 1.45;
}

/* 番号（01〜08）は読み上げでは飛ばす（ol がすでに番号つきの一覧として伝える）。対応しないブラウザは1行目を使う。
   大きな細い数字が、壁の線画の役をする（スマホも同じ） */
.front-c .c-worries__item::before {
    color: var(--c-text);
    content: counter(worry, decimal-leading-zero);
    content: counter(worry, decimal-leading-zero) / "";
    font-family: var(--font-latin);
    font-size: 1.75rem;
    font-weight: 200;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1;
}

.front-c .c-about__more {
    grid-area: more;
}

.front-c .c-about__more .c-lead {
    margin-top: 0;
}

.front-c .c-about__more .c-more {
    margin-top: 1.75rem;
}

/* ---------- 4. ラインアップ（3段目の光る棚。棚の上に6商品） ---------- */
.front-c .c-lineup__shelf {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- 7. スマートグラス（4段目の光る棚。注意書きとボタンを写真より前に） ---------- */
.front-c .c-smart {
    padding-bottom: 0; /* 写真の棚板で区画を閉じる */
}

.front-c .c-smart__model {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--font-latin);
    font-size: 0.5em;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.front-c .c-smart__side {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

/* 注意書きは、押せるボタンと見分けられる形にする（同じ細い枠の四角だと、ボタンに見えた） */
.front-c .c-smart__note {
    padding: 0.125rem 0 0.125rem 1rem;
    border-left: 3px solid var(--c-text);
    font-size: 0.9375rem;
    font-weight: 700;
}

.front-c .c-smart__photo {
    margin-top: 2.5rem; /* 本文の幅の外に置き、画面の端から端まで */
}

.front-c .c-smart__photo img {
    width: 100%;
    height: clamp(13rem, 46vw, 34rem);
    object-fit: cover;
    object-position: center 52%;
}

/* ---------- 9. 店舗案内（壁の文字） ---------- */
.front-c .c-shop__inner {
    display: grid;
    gap: 2.5rem;
}

.front-c .c-shop__name {
    margin-top: 1.25rem;
    font-family: var(--font-latin);
    font-size: clamp(1.25rem, 4.4vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.35;
}

.front-c .c-shop__name span {
    display: block;
    margin-top: 0.25rem;
    color: var(--c-muted);
    font-size: 0.6em;
    letter-spacing: 0.12em;
}

.front-c .c-shop__info {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.875rem 1rem;
    margin-top: 1.75rem;
    font-size: 0.9375rem;
}

.front-c .c-shop__info dt {
    color: var(--c-muted);
    font-size: 0.875rem;
}

/* スマホでは横長に切る（縦長のままだと、情報の下で画面2枚ぶん近く続き、フッターが遠くなる） */
.front-c .c-shop__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center 45%;
}


@media (min-width: 48rem) {
    /* タブレット：写真はスマホと同じ横長（2:1）を上限にし、さらに画面の高さの44%までに抑える
           （3:2 のままだと 768×1024 で紹介文が最初の画面から10px外れた。照明の幕の高さも、同じ値で合わせる） */
    .front-c .c-hero__photo {
        height: min(calc(50vw + var(--c-board-depth)), 44svh);
        object-position: 62% 15%;
    }

    .front-c .c-hero__shelf::after {
        height: calc(var(--c-hero-size) * 1.25 + 0.75rem + 33.333vw);
    }

}

@media (min-width: 64rem) {
    /* メイン：コピーの大きさは画面の幅の7%（2行目の右端とライダーの間を空けるため、スマホより控えめ）。
           メインの棚のすぐ下に TRUNK SHOW の棚を続ける（下の余白は TRUNK SHOW 側で取る） */
    .front-c .c-hero {
        --c-hero-size: clamp(4rem, 7vw, 8rem);
        padding-bottom: 0;
    }

    /* 光る棚：画面の高さに合わせた高さ（ノートPCの 768px でも、次の開催まで最初の画面に入る） */
    .front-c .c-hero__shelf {
        min-height: clamp(18rem, 46svh, 30rem);
        padding-top: calc(var(--c-hero-size) * 1.25 + 1.5rem);
        padding-bottom: 2.5rem;
        border-bottom: var(--c-board-depth) solid transparent;
        box-shadow: 0 1px 0 #000;
    }

    /* 照明が点く演出の幕は、パソコンでは棚全体にかける（紹介文と次の開催も棚の上にあるため） */
    .front-c .c-hero__shelf::after {
        bottom: 0;
        height: auto;
    }

    /* 写真は棚の右端に寄せ、さらに画面の外へ少し出す（体の右側を切り、コピーと人物の間を空ける）。
           左の縁は棚の光に溶かす（乗算で背景が消えるので、ぼかしは狭くてよい＝人物を多く見せる） */
    .front-c .c-hero__photo {
        position: absolute;
        top: clamp(1rem, 2.5vw, 2rem);
        right: -5vw;
        width: auto;
        height: calc(100% - clamp(1rem, 2.5vw, 2rem));
        border-bottom: 0;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%);
        mask-image: linear-gradient(to right, transparent 0, #000 14%);
    }

    /* 棚の上の紹介文と次の開催（パソコンでは棚の中に置く。明るい地なので、文字と線は暗い色にする）。
           1行目に紹介文、2行目に「次の開催」と「今日の状態」を下端でそろえて横に並べる
           （4段を同じ間隔で縦に積むと、主役がどれか分からず、棚の下端まで余裕がなかった＝審査3回目） */
    .front-c .c-hero__stage {
        position: relative;
        z-index: 1;
        grid-template-columns: auto auto;
        justify-content: start;
        align-items: end;
        gap: 1.5rem 2rem;
        padding-top: 0;
        background: none;
        color: var(--color-text);
    }

    .front-c .c-hero__lead {
        grid-column: 1 / -1;
    }

    .front-c .c-status {
        flex-direction: column;
        gap: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .front-c .c-hero__stage > * {
        width: auto;
    }

    .front-c .c-hero__lead {
        max-width: 30em;
        color: #4a4a52;
        font-size: 1rem;
    }

    .front-c .c-next {
        min-width: 22rem;
        border-color: rgba(24, 24, 27, 0.4);
    }

    .front-c .c-next:hover {
        border-color: var(--color-text);
        background: rgba(24, 24, 27, 0.04);
    }

    .front-c .c-next__label {
        color: var(--color-muted);
    }

    /* パソコンの並び：紹介文 → 次の開催 → 今日の営業の状態（スマホの並び替えを戻す） */
    .front-c .c-hero__lead {
        order: 1;
    }

    .front-c .c-next {
        order: 2;
    }

    .front-c .c-status {
        order: 3;
    }

    /* 今日の営業の状態（パソコンでは棚の上なので、補足の文字と下線は暗い色） */
    .front-c .c-status__next {
        color: var(--color-muted);
        text-decoration-color: rgba(24, 24, 27, 0.35);
    }

}

@media (min-width: 64rem) and (max-width: 79.99rem) {
    /* 1024〜1279px：「次の営業日」の右端からヘルメットのバイザーまで約17pxしかなかったので、写真を約40px右へ逃がす
       （体の右側が少し多く切れるだけ。審査4回目） */
    .front-c .c-hero__photo {
        right: -9vw;
    }

    /* 比較写真2枚：紹介文を「次の開催」の枠と同じ幅（22rem）にして、残りを写真に回す
       （30rem のままだと 1024px で1枚 213px と小さかった＝2026-10-09 実測） */
    .front-c.wall .c-hero { /* 後ろの 64rem 以上の既定（30rem）より強くするため .wall を足す */
        --c-lead-w: 22rem;
    }

}

@media (min-width: 64rem) {
    /* 比較写真2枚（パソコン）：コピーの下の段で、棚の右側を大きく使って並べる。
           左は紹介文・次の開催・今日の営業を縦に積み（横に並べると今日の営業の欄が写真の下に入る）、
           写真の幅＝画面の右端（3vw 空ける）から、本文の左端＋紹介文の幅（30rem）＋3rem までの残り（20〜56rem）。
           写真は absolute なので、棚の高さは写真の高さ（幅の3分の1＝3:2を2枚）が入るように下限を足す。
           （10/9 午前の「コピーの右に並べる」形は、1枚が250px前後と小さかった＝アツシさん指摘） */
    .front-c .c-hero {
        --c-lead-w: 30rem; /* 左の列の幅＝紹介文の幅（1024〜1279px は下で 22rem に狭める） */
        --c-compare-w: clamp(20rem, calc(97vw - max(var(--gutter), (100vw - var(--content-width)) / 2 + var(--gutter)) - var(--c-lead-w) - 3rem), 56rem);
    }

    .front-c .c-hero__stage .c-hero__lead {
        max-width: var(--c-lead-w);
    }

    .front-c .c-hero__shelf {
        min-height: max(clamp(18rem, 46svh, 30rem), calc(var(--c-hero-size) * 1.25 + 1.5rem + var(--c-compare-w) / 3 + 2.5rem));
    }

    .front-c .c-compare {
        position: absolute;
        top: calc(var(--c-hero-size) * 1.25 + 1.5rem);
        right: 3vw;
        width: var(--c-compare-w);
        gap: 0.5rem;
        border-bottom: 0;
        background: none;
    }

    .front-c .c-hero__stage {
        grid-template-columns: auto;
    }

    .front-c .c-hero__stage .c-status {
        align-self: auto;
        padding-left: 0;
        border-left: 0;
    }

    .front-c .c-compare__label {
        top: 0.5rem;
        left: 0.5rem;
        font-size: 0.75rem;
    }

}

@media (min-width: 80rem) {
    /* 1280px〜：今日の営業の状態を、次の開催と同じ高さの区画にし、左に細い縦線で区切って文字を一段大きくする
       （来店前にいちばん知りたい1行が、棚の中でいちばん小さい文字になっていた＝審査4回目。
       ヘルメットとの間に余裕がある幅だけで行う） */
    .front-c .c-status {
        align-self: stretch;
        justify-content: center;
        padding-left: 1.5rem;
        border-left: 1px solid rgba(24, 24, 27, 0.2);
    }

    .front-c .c-status__now {
        font-size: 1rem;
    }

}

@media (min-width: 64rem) {
    /* バイク用メガネとは：見出しと説明を横に並べ、その下に8項目を4列×2段の棚割りで。
           大きな細い番号（01〜08）が、壁の線画の役をする */
    .front-c .c-about__inner {
        gap: 3rem;
    }

    .front-c .c-about__head {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: end;
        column-gap: 5rem;
    }

    .front-c .c-about__head .c-lead {
        margin-top: 0;
    }

    .front-c .c-worries {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 3rem;
        row-gap: 0;
        border-top: 1px solid var(--c-line-strong);
    }

    .front-c .c-worries__item {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        padding: 1.75rem 0 2.25rem;
        border-bottom: 1px solid var(--c-line);
        font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    }

    /* 列と列の間の縦線（すき間の真ん中） */
    .front-c .c-worries__item:not(:nth-child(4n + 1))::after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: -1.5rem;
        width: 1px;
        background: var(--c-line);
        content: "";
    }

    .front-c .c-worries__item::before {
        margin-bottom: 1.25rem;
        color: var(--c-text);
        font-size: 3rem;
        font-weight: 200;
        line-height: 1;
        transform: none;
    }

    .front-c .c-about__more {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }

    .front-c .c-about__more .c-more {
        margin-top: 0;
    }

    /* スマートグラス：見出しを左、注意書きとボタンを右下に */
    .front-c .c-smart__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: 3rem;
    }

    .front-c .c-smart__side {
        justify-items: end;
        margin-top: 0;
    }

    .front-c .c-smart__photo img {
        height: clamp(22rem, 36vw, 36rem);
    }

    /* 店舗：左に店の情報、右に縦長の写真（メインとは左右を逆にする） */
    .front-c .c-shop__inner {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: center;
        gap: 4rem;
    }

    /* パソコンでは元の縦長のまま（情報の横に並ぶので、縦に長くても間延びしない） */
    .front-c .c-shop__photo img {
        aspect-ratio: auto;
    }

}

@media (prefers-reduced-motion: reduce) {
    /* 動きを減らす設定にしている人には、触れたときの動きも出さない（色の切り替えは即時） */
    .front-c .c-next,
    .front-c .c-next::after,
    .front-c .c-products__image,
    .front-c .c-lenses__link,
    .front-c .c-words__link,
    .front-c .c-words__link::after {
        transition: none;
    }

    .front-c .c-next:hover::after {
        transform: rotate(45deg);
    }

}