/* ==========================================================================
   DOUBLE O GlassesGEAR 「黒い壁と光る棚」の共通部品（案C・2026-10-06 確定／10-07 切り出し）
   --------------------------------------------------------------------------
   トップ案C（front-c.css）から、下層ページでも同じ形で使う部品を移したもの。
   使い方：黒い壁にしたい入れ物に class="wall" を付ける（トップは <div class="front-c wall">、
   下層ページは <main> の中の入れ物）。その中で次の部品が使える。
     .c-wrap      … 本文の幅（1200px）に収める入れ物
     .c-section   … 壁の区画（上に白い細い線）
     .c-title     … 区画の見出し（壁の文字）。--shelf＝棚の見出し（一段大きい）。--latin＝英字
     .c-lead      … 見出しの下の補足
     .c-lit       … 光る棚（上ほど明るい面＋上端の照明の線＋下の棚板）。中の文字は黒
     .c-next      … 次の TRUNK SHOW（細い枠に日付と会場・押すと移動）
     .c-status    … 今日の営業の状態（頭の四角：営業日＝塗り／お休み＝枠だけ）
     .c-board / .c-dates / .c-date … TRUNK SHOW の開催予定（棚の上に 1〜3 会場）
     .c-lenses / .c-words … 矢印つきの一覧（白い細い線の格子。レンズ・スポーツ別・子ページの一覧）
     .c-notice / .c-timeline / .c-posts … 案内板（お知らせの時間の線・ブログの新着）
     .c-products  … 棚の上に並べる商品（白い額に入れた写真＋名前）
     .bcal        … 営業カレンダーの色（形は content.css）
   決まり：赤は「予約する」だけ／角は直角／書体は端末のもの／動きは押した・触れた反応だけ
   読み込む順：base.css → content.css → shelf.css → （トップだけ front-c.css／下層だけ pages.css）
   ========================================================================== */

.wall {
    /* 案Cの色。黒・白・グレーは共通の変数（base.css）から取り、役目の名前を付け直す */
    --c-bg: var(--color-dark);              /* 黒い壁 */
    --c-text: var(--color-on-dark);         /* 白い文字 */
    --c-muted: var(--color-on-dark-muted);  /* 補足の文字。黒い地で約9:1のコントラスト */
    --c-line: rgba(244, 244, 245, 0.14);    /* 壁の線画のような、白い細い線（弱） */
    --c-line-strong: rgba(244, 244, 245, 0.5); /* 同じ線の強いほう（枠・時間の線） */
    --c-on-light-line: rgba(24, 24, 27, 0.14); /* 棚の上の細い線 */
    /* 光る棚の面：照明に近い上ほど明るい。ページでいちばん明るいのは棚（白い文字より明るい #fff から始める）。
       下端 #e4e5e9 の上でも、補足の文字 #5b5b63 は約5.3:1 */
    --c-light: linear-gradient(180deg, #fff 0, #f3f4f6 22%, #e4e5e9 100%);
    /* 棚板の前面：光を受けた上の角が明るく、下へ暗くなる（単色の帯では板の厚みに見えなかった） */
    --c-board-face: linear-gradient(180deg, #55555d 0, #2c2c32 35%, #19191c 100%);
    --c-board-depth: 0.875rem;              /* 棚板の厚み */
    --c-space: clamp(3.5rem, 7vw, 5.5rem);  /* 壁の区画の上下の余白（1440px で88px） */
    --c-shelf-pad: clamp(3rem, 7vw, 5.5rem); /* 棚の中の上下の余白 */
    --c-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* 触れたときの反応の動き方（すっと動いて静かに止まる） */
    overflow-x: clip; /* 照明の光のにじみが横へ出ても、横スクロールを出さない（clip はスクロールの箱を作らない） */
    background: var(--c-bg);
    color: var(--c-text);
}

.wall img {
    display: block;
}

/* 文字の選択色も赤を使わない（赤は「予約する」専用） */
.wall ::selection {
    background: var(--c-text);
    color: var(--c-bg);
}

.wall .c-wrap {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* 壁の区画：上に白い細い線を引いて区切る（棚のすぐ下の区画は、棚板と線が二重になるので引かない） */
.wall .c-section {
    padding-block: var(--c-space);
    border-top: 1px solid var(--c-line);
}

/* 区画の見出し（壁の文字）：大きく太く。約物（、。・！など）の余白を詰めて、日本語の見出しを締める */
.wall .c-title {
    font-size: clamp(1.875rem, 5.2vw, 3.25rem);
    font-weight: 800;
    font-feature-settings: "palt";
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-wrap: balance;
}

/* 棚の見出し（主役）：壁の見出しより一段大きく */
.wall .c-title--shelf {
    font-size: clamp(2.25rem, 6.4vw, 4.5rem);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.wall .c-title--latin {
    font-family: var(--font-latin);
    letter-spacing: -0.01em;
}

.wall .c-lead {
    max-width: 34em;
    margin-top: 1.25rem;
    color: var(--c-muted);
    font-size: 0.9375rem;
    line-height: 1.9;
}

.wall .c-more {
    margin-top: 2.5rem;
}

/* 黒い地の上の「枠だけのボタン」。共通の .button--ghost は明るい地用なので、色を反対にする */
.wall .button--ghost {
    border-color: var(--c-text);
    color: var(--c-text);
}

.wall .button--ghost:hover {
    background: var(--c-text);
    color: var(--c-bg);
}

/* ---------- 光る棚（メイン・TRUNK SHOW・ラインアップ・スマートグラスで共通の形） ----------
   ・面は上ほど明るい（照明は棚の上端にある）
   ・上端に照明の線（::before）。光のにじみは棚の内側（下）へ向け、上の黒い壁へは約12pxまで
     （上へ大きくにじませると、壁が灰色のもやに見え、メインの1行目の下端も灰色になった）
   ・下に棚板。透明な下枠の場所に、板の前面のグラデーションを背景として敷く（枠の色は単色しか塗れないため）。
     板の下端に純黒の1pxを引いて、黒い壁から切り離す */
.wall .c-lit {
    position: relative;
    border-bottom: var(--c-board-depth) solid transparent;
    background:
        var(--c-board-face) bottom / 100% var(--c-board-depth) no-repeat border-box,
        var(--c-light) top / 100% calc(100% - var(--c-board-depth)) no-repeat border-box;
    box-shadow: 0 1px 0 #000;
    color: var(--color-text);
}

.wall .c-lit::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2; /* 照明が点く演出の黒い幕（::after・z-index 1）より上。線が先に点いて見える */
    height: 3px;
    background: #fff;
    box-shadow:
        0 0 4px 1px #fff,
        0 8px 22px 2px rgba(255, 255, 255, 0.55),
        0 -4px 10px -2px rgba(255, 255, 255, 0.35);
    content: "";
    pointer-events: none;
}

/* 次の TRUNK SHOW：細い枠の中に日付と会場。押すと下の開催予定へ */
.wall .c-next {
    position: relative;
    display: grid;
    gap: 0.125rem;
    padding: 1rem 3.25rem 1rem 1.25rem;
    border: 1px solid var(--c-line-strong);
    text-decoration: none;
    transition: border-color 0.2s var(--c-ease), background-color 0.2s var(--c-ease);
}

/* 下向きの矢印（線2本で描く）。触れると少し下へ動く */
.wall .c-next::after {
    position: absolute;
    top: 50%;
    right: 1.375rem;
    width: 0.625rem;
    height: 0.625rem;
    margin-top: -0.5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg);
    transition: transform 0.25s var(--c-ease);
}

.wall .c-next:hover {
    border-color: var(--c-text);
    background: rgba(244, 244, 245, 0.04);
}

.wall .c-next:hover::after {
    transform: translateY(4px) rotate(45deg);
}

.wall .c-next__label {
    color: var(--c-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}

.wall .c-next__date {
    font-family: var(--font-latin);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.wall .c-next__venue {
    font-size: 0.9375rem;
}

/* 今日の営業の状態（次の開催の下に1行）。押すと店舗案内の営業カレンダーへ。
   頭に小さな四角の印：営業日は塗り（明かり）、お休みは枠だけ（消灯）＝営業カレンダーと同じ意味。赤は使わない */
.wall .c-status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    text-decoration: none;
}

.wall .c-status__now {
    font-weight: 700;
}

.wall .c-status__now::before {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    background: currentColor;
    content: "";
    vertical-align: 0.1em;
}

/* お休みの日は枠だけ（消灯）。営業カレンダーの「白＝営業日」と同じ意味にそろえる */
.wall .c-status__now.is-closed::before {
    box-shadow: inset 0 0 0 1.5px currentColor;
    background: none;
}

.wall .c-status__next {
    color: var(--c-muted);
    text-decoration: underline;
    text-decoration-color: var(--c-line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

.wall .c-status:hover .c-status__next {
    text-decoration-color: currentColor;
}

.wall .c-board {
    padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
}

.wall .c-board__head {
    display: grid;
    gap: 0.5rem;
}

.wall .c-board .c-title--latin {
    font-size: clamp(2.25rem, 9vw, 4.5rem);
    line-height: 1.05;
}

.wall .c-board__sub {
    color: var(--color-muted);
    font-size: 0.9375rem;
}

.wall .c-dates {
    margin-top: 1.75rem;
    border-top: 2px solid var(--color-text);
}

.wall .c-date {
    display: grid;
    gap: 0.25rem;
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--c-on-light-line);
}

/* 日付をいちばん大きく（来られる日かどうかを最初に判断するため） */
.wall .c-date__day {
    font-family: var(--font-latin);
    font-size: clamp(1.375rem, 6vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.wall .c-date__venue {
    font-size: 1.0625rem;
}

.wall .c-date__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
}

/* 会場の写真（スマホ）：日付は横幅いっぱいのまま（折り返させない）、写真は会場名の右に小さく添える。
   写真が無い会場は、この並べ方にしない（:has で写真があるときだけ） */
.wall .c-date:has(.c-date__photo) {
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    grid-template-areas:
        "day day"
        "venue photo"
        "actions actions";
    column-gap: 1rem;
}

.wall .c-date:has(.c-date__photo) .c-date__day {
    grid-area: day;
}

.wall .c-date:has(.c-date__photo) .c-date__venue {
    grid-area: venue;
}

.wall .c-date:has(.c-date__photo) .c-date__actions {
    grid-area: actions;
}

/* 会場の写真（日付と会場名の下。写真も会場ページへのリンク）。色の扱いは下の img の指定を参照 */
.wall .c-date__photo {
    display: block;
    grid-area: photo;
}

.wall .c-date__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: rgba(24, 24, 27, 0.06); /* 読み込むまでの間の地の色 */
    /* カラーのまま（看板の色でどの店か見分けるため＝アツシさんの判断）、彩度だけ少し落とす。
       看板の赤（DUCATI・前橋）が、すぐ下の赤い「予約する」と同じ強さで並ばないように（審査3回目）。触れると本来の色 */
    filter: saturate(0.75);
    transition: filter 0.3s var(--c-ease);
}

.wall .c-date__photo:hover img {
    filter: none;
}

/* 最後の段の空きに入れた注意書き（template-parts/trunkshow-board.php の notes）。縦線は引かない */
.wall .c-dates__notes {
    display: grid;
    align-content: end;
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--c-on-light-line);
}

.wall .c-dates__notes .c-board__notes {
    margin: 0;
}

.wall .c-dates__empty {
    margin-top: 1.5rem;
    padding-block: 1.5rem;
    border-block: 1px solid var(--c-on-light-line);
    color: var(--color-muted);
}

.wall .c-board__foot {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.wall .c-board__notes {
    color: var(--color-muted);
    font-size: 0.875rem;
    line-height: 1.7;
}

/* 注意書きの印。2行目以降の文字の頭をそろえる */
.wall .c-board__notes li {
    padding-left: 1.25em;
    text-indent: -1.25em;
}

.wall .c-board__notes li::before {
    content: "※ ";
}

/* スマホでも2列（6商品が3段に収まる＝スクロールが短い）。名前は写真の下に文字で */
.wall .c-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 0.75rem;
    margin-top: 2rem;
}

.wall .c-products__link {
    display: block;
    text-decoration: none;
}

/* 仮バナー（地の色がまちまち）を白い額に入れ、足もとに影を落とす＝棚に立てかけたパネルに見せる。
   撮り直しの写真（白背景）が来たら、padding・background・box-shadow を外して mix-blend-mode: multiply にする */
.wall .c-products__image {
    width: 100%;
    height: auto;
    padding: 0.375rem;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(24, 24, 27, 0.08),
        0 10px 14px -10px rgba(24, 24, 27, 0.45);
    transition: transform 0.35s var(--c-ease), box-shadow 0.35s var(--c-ease);
}

.wall .c-products__link:hover .c-products__image {
    box-shadow:
        0 0 0 1px rgba(24, 24, 27, 0.08),
        0 18px 22px -12px rgba(24, 24, 27, 0.5);
    transform: translateY(-4px);
}

.wall .c-products__name {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--font-latin);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
}

.wall .c-products__link:hover .c-products__name {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

/* ---------- 5. レンズ（壁の文字。白い細い線の格子で、箱や影は付けない） ----------
   スマホは名前だけの1列（説明まで出すと画面2枚近くになる。説明は押した先のレンズのページで読める）。
   2列にすると「+ゼロ・／コントラスト」のように名前の途中で折れ、下のスポーツ別（2列）と見分けも付かなかったので、
   1列にして名前を一段大きくする（審査3回目） */
.wall .c-lenses {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1rem;
    margin-top: 2rem;
    border-top: 1px solid var(--c-line-strong);
}

.wall .c-lenses__item {
    border-bottom: 1px solid var(--c-line);
}

.wall .c-lenses__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: 100%;
    min-height: 3.5rem;
    padding: 0.5rem 0;
    text-decoration: none;
}

/* 右向きの矢印（スポーツ別と同じ形）。触れると少し右へ動く */
.wall .c-lenses__link::after {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg);
    transition: transform 0.2s var(--c-ease);
}

.wall .c-lenses__link:hover::after {
    transform: translateX(4px) rotate(45deg);
}

.wall .c-lenses__link:hover .c-lenses__name {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.wall .c-lenses__name {
    font-size: 1.125rem;
    font-weight: 700;
    font-feature-settings: "palt";
}

.wall .c-lenses__lead {
    display: none;
    color: var(--c-muted);
    font-size: 0.875rem;
    line-height: 1.8;
}

/* ---------- 6. スポーツ別に選ぶ（壁の文字。2列＝スマホ／3列＝パソコンの格子に矢印） ---------- */
.wall .c-words {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    margin-top: 2rem;
    border-top: 1px solid var(--c-line-strong);
}

.wall .c-words li {
    border-bottom: 1px solid var(--c-line);
}


@media (max-width: 63.99rem) {
    /* 2列のあいだ（スマホ・タブレット）：間を広げて細い縦線を引く。
       1rem の間では、左の列の矢印が右の列の頭に付いて「> マラソン」と読めた（審査4回目） */
    .wall .c-words {
        column-gap: 2rem;
    }

    .wall .c-words li:nth-child(even) {
        position: relative;
    }

    .wall .c-words li:nth-child(even)::before {
        position: absolute;
        top: 0.75rem;
        bottom: 0.75rem;
        left: -1rem;
        width: 1px;
        background: var(--c-line);
        content: "";
    }

}
.wall .c-words__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.5rem;
    font-size: clamp(1rem, 4.2vw, 1.625rem);
    font-weight: 700;
    font-feature-settings: "palt";
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.2s var(--c-ease);
}

/* 右向きの矢印（線2本で描く）。触れると少し右へ動く */
.wall .c-words__link::after {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg);
    transition: transform 0.2s var(--c-ease);
}

.wall .c-words__link:hover::after {
    transform: translateX(4px) rotate(45deg);
}

/* 触れている競技だけを白く残し、ほかを一段暗くする（どれを選ぼうとしているかが分かる） */
.wall .c-words:has(.c-words__link:hover) .c-words__link:not(:hover) {
    color: #6c6c74;
}

/* ---------- 8. 案内板（お知らせとブログの細い帯） ---------- */
.wall .c-notice {
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.wall .c-notice__row {
    display: grid;
    gap: 1rem;
    padding-block: 1.5rem;
}

.wall .c-notice__row + .c-notice__row {
    border-top: 1px solid var(--c-line);
}

.wall .c-notice__title {
    font-size: 1.25rem;
    font-weight: 800;
    font-feature-settings: "palt";
}

.wall .c-timeline {
    border-left: 1px solid var(--c-line-strong);
}

.wall .c-timeline__item {
    position: relative;
    padding: 0 0 1.25rem 1.5rem;
}

.wall .c-timeline__item:last-child {
    padding-bottom: 0.125rem;
}

/* 時間の線の目盛り（項目の位置を線の上に刻む） */
.wall .c-timeline__item::before {
    position: absolute;
    top: 0.85em;
    left: 0;
    width: 0.875rem;
    height: 1px;
    background: var(--c-line-strong);
    content: "";
}

.wall .c-timeline__date {
    display: block;
    color: var(--c-muted);
    font-family: var(--font-latin);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.wall .c-timeline__body {
    margin-top: 0.125rem;
    font-size: 0.9375rem;
    line-height: 1.75;
}

.wall .c-posts__link {
    display: grid;
    gap: 0.125rem;
    padding-block: 0.375rem;
    text-decoration: none;
}

.wall .c-posts__date {
    color: var(--c-muted);
    font-family: var(--font-latin);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.wall .c-posts__title {
    font-weight: 700;
}

.wall .c-posts__link:hover .c-posts__title {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

/* ---------- 営業カレンダー（店舗案内の中。template-parts/business-calendar.php） ----------
   形（表・今日の枠・スマホで横に送る）は content.css の共通の指定。ここでは黒い壁に合わせて色だけを変える。
   営業日のマスは棚と同じ光（上ほど明るい白）、お休みは消灯（黒い壁のまま・数字を薄く）、
   TRUNK SHOW（出張・搬入）は白い斜線。「光る＝主役」の言葉をカレンダーにもそろえる（2026-10-06 アツシさん決定） */
.wall .bcal {
    --bcal-ink: var(--c-text);
    --bcal-paper: var(--c-bg);
    --bcal-muted: var(--c-muted);
    --bcal-open: var(--c-light);
    --bcal-open-ink: var(--color-text);
    --bcal-open-edge: transparent;
    --bcal-off: transparent;
    --bcal-off-ink: rgba(244, 244, 245, 0.55); /* 黒い壁の上で約5.7:1 */
    --bcal-line: var(--c-line-strong);
    --bcal-hatch: rgba(244, 244, 245, 0.3);
    margin-top: 2.25rem;
}


@media (min-width: 48rem) {
    .wall .c-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5rem 1.5rem;
    }

    .wall .c-products__name {
        font-size: 1rem;
    }

    /* レンズ：2列にして説明も出す（矢印の代わりに、触れると名前に下線） */
    .wall .c-lenses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
    }

    .wall .c-lenses__link {
        display: grid;
        align-content: start;
        gap: 0.625rem;
        min-height: 0;
        padding: 1.75rem 0 2rem;
    }

    .wall .c-lenses__link::after {
        display: none;
    }

    .wall .c-lenses__name {
        font-size: 1.25rem;
    }

    .wall .c-lenses__lead {
        display: block;
    }

    .wall .c-board__foot {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 2rem;
    }

}

@media (min-width: 64rem) {
    /* TRUNK SHOW：見出しと補足を横に。会場の数（1〜3）だけ列に分ける */
    .wall .c-board__head {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
        gap: 2rem;
    }

    /* 列の幅は3つとも同じにする（列ごとに余白を変えると、写真の大きさと日付の高さが列ごとにずれた）。
           区切りの縦線は、列と列の間（すき間の真ん中）に引く */
    .wall .c-dates {
        display: grid;
        grid-template-columns: repeat(var(--c-count, 3), minmax(0, 1fr));
        column-gap: 2.5rem;
        border-bottom: 1px solid var(--c-on-light-line);
    }

    .wall .c-date {
        position: relative;
        align-content: start;
        padding: 1.75rem 0 1.5rem;
        border-bottom: 0;
    }

    .wall .c-dates__notes {
        grid-column: span var(--c-span, 1);
        padding: 1.75rem 0 1.5rem;
        border-bottom: 0;
    }

    /* 段の先頭（4つ目・7つ目…）には区切りの縦線を引かない（会場が4つ以上のとき、1列目の左にも線が出ていた＝審査6回目） */
    .wall .c-date:nth-child(3n + 1)::before {
        display: none;
    }

    .wall .c-date + .c-date::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: -1.25rem;
        width: 1px;
        background: var(--c-on-light-line);
        content: "";
    }

    /* 会場の写真（パソコン）：日付と会場名の下に横長で（日付をいちばん先に読ませるため。写真が上だと目線を取られた） */
    .wall .c-date:has(.c-date__photo) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "day"
            "venue"
            "photo"
            "actions";
    }

    .wall .c-date__photo {
        margin-top: 1rem;
    }

    .wall .c-date__photo img {
        aspect-ratio: 2 / 1;
    }

    /* 3列のときに「10/10（土）〜10/12（月）」（約12文字ぶん）が1行に収まる大きさ。
           1024px では列の幅が約290pxしかないので18px、1440px 以上で24px（2026-10-06 実測で決めた） */
    .wall .c-date__day {
        font-size: clamp(1.125rem, 1.75vw, 1.5rem);
    }

    /* 写真と「予約する」のあいだを少し空ける（看板の色と予約の赤を離す） */
    .wall .c-date__actions {
        justify-content: flex-start;
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .wall .c-lenses {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 2.5rem;
    }

    .wall .c-lenses__name {
        font-size: clamp(1.375rem, 2vw, 1.75rem);
    }

    .wall .c-words {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 2.5rem;
    }

    .wall .c-words__link {
        min-height: 4.75rem;
    }

    /* 案内板：見出し・中身・「すべて見る」を横1列に */
    .wall .c-notice__row {
        grid-template-columns: 18rem minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 3rem;
    }

    .wall .c-timeline__item {
        display: grid;
        grid-template-columns: 4.5rem minmax(0, 1fr);
        gap: 1.5rem;
        padding-left: 2rem;
    }

    .wall .c-timeline__date {
        font-size: 0.9375rem;
        line-height: 1.75;
    }

    .wall .c-timeline__body {
        margin-top: 0;
    }

    /* ブログの日付と題名の位置を、上のお知らせ（時間の線の右）の日付と本文にそろえる */
    .wall .c-posts {
        padding-left: 2rem;
    }

    .wall .c-posts__link {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        gap: 1.5rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .wall .c-words__link:hover::after {
        transform: rotate(45deg);
    }

    .wall .c-products__link:hover .c-products__image {
        transform: none;
    }

}