/* ==========================================================================
   下層ページの型（案C「黒い壁と光る棚」・2026-10-07）
   --------------------------------------------------------------------------
   トップ以外の全ページで読む。共通の部品（黒い壁の色・光る棚・見出し・矢印つきの一覧）は shelf.css。
   ・ページの頭（区分・題名・紹介文・仲間のページの目次）は黒い壁の上に白い文字で
   ・長い本文は、本文の幅（1200px）の中に置いた「光る棚」（明るい面）の上で読ませる。棚の両側に黒い壁が残る
       なぜ棚の上か：本文は 1,000〜22,000 字あり、黒い地に白い長文は目が疲れる。現行の写真・図は白い地で作られて
       いるので、黒い地に置くと白い四角が散らばる。棚の上なら白い地が光に溶ける（トップのメインと同じ理屈）
       なぜ全幅にしないか：画面の端から端まで白いと「棚」でなく「白い区画」に見え、トップの「黒い壁に棚が並ぶ」
       構図が下層で途切れる（審査1回目の指摘）。合体したページは章ごとに棚1枚＝棚が段になって並ぶ
   ・ページ内の目次は棚の右（スマホでは本文の前）。仲間のページの目次は頭
   ・会場ページ：注意事項は棚の上、予約表（既存の部品＝黒い地に金色の文字）は黒い壁の上に白い枠で
   ・末尾に「次の TRUNK SHOW」と「ほかのページ」を黒い壁の上に
   ・赤は「予約する」だけ。本文の中で現行が赤字だった強調（.is-red）は、太字＋下線にする
   ・指定はすべて .page-c の中に閉じる。スマホを先に書き、広い画面は @media (min-width: …) で足す
   ========================================================================== */

.page-c {
    --p-measure: 42em;                               /* 本文の幅の上限（17px の文字で1行約40字） */
    --p-ink-line: rgba(24, 24, 27, 0.3);             /* 棚の上の線（見出しの上・表・囲み） */
    --p-ink-line-strong: rgba(24, 24, 27, 0.6);
    --p-frame: 0 0 0 1px rgba(24, 24, 27, 0.08), 0 10px 14px -10px rgba(24, 24, 27, 0.45); /* 白い額の影（トップのラインアップと同じ） */
    --p-frame-up: 0 0 0 1px rgba(24, 24, 27, 0.08), 0 18px 22px -12px rgba(24, 24, 27, 0.5);
}

.page-c :is(h1, h2, h3, p, li, dd, dt) {
    word-break: auto-phrase;
    text-wrap: pretty;
}

/* 本文の長い段落は文節で折り返さない（auto-phrase だと行末が1〜5字ずつ凸凹になり、スマホで読みにくかった＝10/7 実測）。
   行頭の禁則（、。」など）は line-break: strict で守る。見出し・短い項目は上の文節折り返しのまま */
.page-c .p-body :is(p, li, dd):not(.p-h4) {
    word-break: normal;
    line-break: strict;
    text-wrap: pretty; /* 段落の最終行が1〜3字だけになるのを防ぐ（審査5回目：wrap に戻したら「す。」「ん。」だけの行が出た） */
}

/* ---------- ページの頭（黒い壁） ---------- */
.page-c .p-head {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 3.5rem);
}

.page-c .p-head__inner {
    display: grid;
    gap: 2rem;
}

/* 区分（親のページの名前）。小さく字間を広く */
.page-c .p-head__kicker {
    color: var(--c-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
}

.page-c .p-head__kicker a {
    text-decoration: none;
}

.page-c .p-head__kicker a:hover {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.page-c .p-head__title {
    margin-top: 0.5rem;
}

.page-c .p-head__lead {
    font-size: 1rem;
}

/* 目次：矢印つきの一覧（shelf.css の .c-words）。ページ内へ飛ぶものは矢印を下向きに */
.page-c .p-toc {
    margin-top: 0;
}

.page-c .p-toc .c-words__link {
    min-height: 3.25rem;
    font-size: clamp(0.9375rem, 3.8vw, 1.125rem);
}

.page-c .p-toc .c-words__link[href^="#"]::after {
    transform: rotate(135deg);
}

.page-c .p-toc .c-words__link[href^="#"]:hover::after {
    transform: translateY(4px) rotate(135deg);
}

/* いま開いているページ（レンズ5種の仲間の目次に自分が入る）は薄くして押せない形に */
.page-c .p-toc .is-current .c-words__link {
    color: var(--c-muted);
    pointer-events: none;
}

.page-c .p-toc .is-current .c-words__link::after {
    display: none;
}

/* 先頭のバナー画像：黒い壁の上に画像だけを置く（白い額・影・小さな棚は、2026-10-07 アツシさんの指摘「フォトフレーム付きは野暮ったい」で外した）。
   元の画像は幅950pxなので、それ以上には広げず中央に */
.page-c .p-head__figure {
    margin: 2.5rem 0 0;
}

.page-c .p-head__figure img {
    display: block;
    width: 100%;
    max-width: 60rem;
    margin-inline: auto;
    height: auto;
}

/* ---------- 本文の棚（本文の幅の中に置く。両側に黒い壁） ---------- */
.page-c .p-shelf {
    padding-block: 0 var(--c-space);
}

.page-c .p-board {
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 4.5rem);
}

.page-c .p-board + .p-board,
.page-c .p-board + .p-chapter,
.page-c .p-chapter + .p-chapter {
    margin-top: var(--c-space);
}

/* 合体したページの章：見出しと紹介文は黒い壁の上、本文は棚の上 */
.page-c .p-chapter__head {
    margin-bottom: 1.75rem;
}

.page-c .p-chapter__title {
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

.page-c .p-chapter .c-lead {
    margin-top: 0.75rem;
}

/* 棚の右（スマホでは本文の前）のページ内の目次。棚の上なので文字と線は黒 */
.page-c .p-board.has-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* 列幅を決めないと、中の写真の元の幅（227px×3）に引っぱられて棚の外へはみ出した（スマホ・10/7 実測） */
    gap: 2rem;
}

.page-c .p-aside {
    order: -1;
}

.page-c .p-aside__title {
    color: var(--color-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
}

.page-c .p-aside .c-words {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0.5rem;
    border-top-color: var(--p-ink-line-strong);
}

.page-c .p-aside .c-words li {
    border-bottom-color: var(--p-ink-line);
}

.page-c .p-aside .c-words li::before {
    display: none;
}

.page-c .p-aside .c-words__link {
    min-height: 2.75rem;
    color: var(--color-text);
    font-size: 0.9375rem;
    text-wrap: balance; /* 2行に折れる項目は、行の長さをそろえる */
}

.page-c .p-aside .c-words__link::after {
    transform: rotate(135deg);
}

.page-c .p-aside .c-words__link:hover::after {
    transform: translateY(4px) rotate(135deg);
}

/* 別のページ・外部へ行くもの（会場の棚の「会場のサイトを見る」「ほかの開催予定」）は右向き＝ページの頭の目次と同じ約束 */
.page-c .p-aside .c-words__link:not([href^="#"])::after {
    transform: rotate(45deg);
}

.page-c .p-aside .c-words__link:not([href^="#"]):hover::after {
    transform: translateX(4px) rotate(45deg);
}

.page-c .p-aside .c-words:has(.c-words__link:hover) .c-words__link:not(:hover) {
    color: var(--color-muted);
}

/* 棚の上の目次に入れた2行の項目（会場ページの「ほかの開催予定」）の1行目は、黒い壁用の薄い白でなく、棚の上の薄い黒 */
.page-c .p-aside .p-foot__sub {
    color: var(--color-muted);
}

.page-c .p-body {
    color: var(--color-text);
    font-size: 1.0625rem;
}

/* 文章の幅は 42em（1行約40字）。図は本文の列いっぱい（元の幅まで）に広げられるよう、幅の上限は文章の要素にだけ付ける */
.page-c .p-body > :is(p, h2, h3, h4, h5, h6, ul, ol, dl, table, blockquote, .note-box, .page-toc) {
    max-width: var(--p-measure);
}

/* 大きな図（a.p-zoom）や1列の図の並びを含む段落は、幅の上限を外す（中の文章は図の説明なので広がってよい） */
.page-c .p-body > p:has(> .p-zoom, > .p-gallery--stack, > .p-gallery--strip) {
    max-width: none;
}

.page-c .p-body > * + * {
    margin-top: 1.25rem;
}

.page-c .p-body p,
.page-c .p-body li,
.page-c .p-body td {
    line-height: 1.9;
}

/* 見出しは3段階。h2 は上に細い線を引いて章を分ける */
.page-c .p-body h2 {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--p-ink-line-strong);
    font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    font-weight: 800;
    font-feature-settings: "palt";
    line-height: 1.3;
}

.page-c .p-body > h2:first-child,
.page-c .p-body > .anchor:first-child + h2 {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.page-c .p-body h3 {
    margin-top: 2.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    font-feature-settings: "palt";
    line-height: 1.4;
}

/* h2 の無いページ（RIDING EYE WEAR・Hyd Ride など）では h3 が最上位の見出しなので、一段強く */
.page-c .p-body:not(:has(h2)) h3 {
    font-size: 1.375rem;
    font-weight: 800;
}

.page-c .p-body h4 {
    margin-top: 1.75rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.page-c .p-body h5,
.page-c .p-body h6 {
    margin-top: 1.5rem;
    font-size: 1rem;
    font-weight: 700;
}

/* 見出しのすぐ後ろの要素は詰める */
.page-c .p-body :is(h2, h3, h4) + * {
    margin-top: 0.875rem;
}

/* 章の中の紹介文（元のページの頭の文）は、章の見出しの下の補足 */
.page-c .p-body .lead {
    color: var(--color-muted);
    font-size: 1rem;
}

/* 写真：単独の写真は block（inline にすると写真の右に文章が回り込み、図と説明の対応が崩れた＝審査2回目）。
   横に並べるのは p-gallery と layout-table が受け持つ。白い地は棚の光に溶かす（乗算）。
   リンクのある写真（押すと拡大）は横に並べられるよう inline-block。白い額と影は付けない（アツシさんの指摘で外した） */
.page-c .p-body img {
    display: block;
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
    vertical-align: middle;
}

/* block の写真の直後の改行は、二重の空きになるので出さない */
.page-c .p-body img + br {
    display: none;
}

.page-c .p-body a > img {
    display: inline-block; /* 横に並べられるように。白い額と影は付けない（アツシさんの指摘で外した） */
}

/* 押すと拡大する写真（画像ファイルへのリンク）：触れたら虫眼鏡の印と、写真をわずかに暗く。
   以前の「上にずれる」動きはやめた（拡大の印が2種類あった＝10/7 アツシさんの指摘。ライトボックスで統一） */
.page-c .p-body a:is([href$=".jpg" i], [href$=".jpeg" i], [href$=".png" i], [href$=".gif" i], [href$=".webp" i]) {
    cursor: zoom-in;
}

.page-c .p-body a:is([href$=".jpg" i], [href$=".jpeg" i], [href$=".png" i], [href$=".gif" i], [href$=".webp" i]):hover > img {
    filter: brightness(0.92);
}

/* 改行だけを挟んで続く写真（inc/content.php の doubleo_tidy_page_body が包む）は格子に */
.page-c .p-body .p-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); /* auto-fit＝空のマスを作らない（auto-fill だと2枚組が163pxに縮んだ） */
    justify-items: start;
    gap: 0.75rem;
    margin-block: 0.75rem;
}

/* 写真は元の大きさを上限に（小さい写真を引き伸ばすとぼける） */
.page-c .p-body .p-gallery img {
    display: block;
    width: auto;
    max-width: 100%;
}

/* 額つき（リンクあり）の写真は、マスの幅に引き伸ばさない */
.page-c .p-body .p-gallery a > img {
    width: auto;
    max-width: 100%;
}

/* 写真＋説明のカードの格子（レディース・キッズ：サムネの代わりに拡大画像と、alt に入っていた説明・価格）。
   横長（600×336）が多いので枠は横長にそろえ、縦長の写真は枠の中に収める（切らない。余った地は白で、棚の光に溶ける） */
.page-c .p-body .p-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1.25rem 1rem;
    margin-block: 1rem 2rem;
}

.page-c .p-body .p-photo {
    margin: 0;
}

.page-c .p-body .p-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #fff;
}

.page-c .p-body .p-photo__cap {
    margin-top: 0.5rem;
    color: var(--color-muted);
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* 価格は判断の材料なので、説明より濃く太く */
.page-c .p-body .p-photo__price {
    display: block;
    margin-top: 0.125rem;
    color: var(--color-text);
    font-weight: 700;
}

/* 縦長の写真のカードは2段ぶんの高さを使う（16:9 の枠では幅69pxに縮み、白い余白が目立った） */
.page-c .p-body .p-photo--tall {
    grid-row: span 2;
}

.page-c .p-body .p-photo--tall img {
    aspect-ratio: 16 / 19;
}

/* サムネの代わりに出した拡大画像（レディースの46枚など）：高さをそろえた行に並べる。横長も縦長も同じ高さで、幅は比率なり */
.page-c .p-body .p-gallery--photos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
}

.page-c .p-body .p-gallery--photos img {
    flex: none;
    width: auto;
    height: 8rem;
}

/* 元の幅が600px以上の画像（説明の図・着用例）：押すと原寸で開く。本文の列の中で、元の幅まで大きく出す（縮めると文字が読めない） */
.page-c .p-body .p-zoom {
    display: block;
    width: fit-content;
    max-width: 100%;
    cursor: zoom-in;
}

.page-c .p-body .p-zoom > img,
.page-c .p-body .p-zoom:hover > img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    transform: none;
}

/* 幅600px以上の画像が続くときは、横に並べず1列で（2列にすると半分以下に縮んで文字が読めなかった） */
.page-c .p-body .p-gallery--stack {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.page-c .p-body .p-gallery--stack .p-zoom {
    width: fit-content;
}

/* 幅600px以上のカメラの写真（着用例など・文字は入っていない）：2〜3列の格子。マスの幅いっぱいに出す（元が大きいのでぼけない） */
.page-c .p-body .p-gallery--large {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
}

.page-c .p-body .p-gallery--large .p-zoom,
.page-c .p-body .p-gallery--large img,
.page-c .p-body .p-gallery--large a > img {
    width: 100%;
}

/* 12枚以上続く写真（Hyd Ride の着用例43枚など）は、横に送る帯にする（指や車輪で動かす＝触れた反応。自動では動かない）。
   格子にすると160pxの壁になり、顔の中のメガネが判別できなかった（審査2回目） */
.page-c .p-body .p-gallery--strip {
    display: flex;
    justify-items: normal;
    gap: 0.75rem;
    overflow-x: scroll; /* 常にバーを出して「横に続く」と分かるように */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-gutter: stable;
    padding-bottom: 0.5rem;
}

/* 1枚を本文の幅の85%までにして、次の写真の左端が常に覗く（min-width:0 が無いと、flex の既定で元の幅950pxが下限になり1枚が幅いっぱいになった） */
.page-c .p-body .p-gallery--strip img {
    flex: 0 0 min(85%, 24rem);
    width: auto;
    min-width: 0;
    scroll-snap-align: start;
}

/* 写真を並べるための表（流し込みのとき layout-table の目印を付けたもの）は、表をやめて格子に並べる。
   空のマスは表示のときに外してある（残すと格子の左が空いて始まった＝審査1回目） */
.page-c .p-body .layout-table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* スマホは2列（1列だと色見本が縦に長すぎた・10/7 実測） */
    gap: 1rem 1rem;
    width: 100%;
    overflow: visible;
    border: 0;
}

.page-c .p-body .layout-table tbody,
.page-c .p-body .layout-table tr {
    display: contents;
}

.page-c .p-body .layout-table th,
.page-c .p-body .layout-table td {
    display: block;
    padding: 0;
    border: 0;
    line-height: 1.7;
}

.page-c .p-body .layout-table td:empty {
    display: none;
}

.page-c .p-body .layout-table img {
    display: block;
    width: 100%;
}

/* 写真を並べる表：広い画面では1マス13rem以上で並べる（本文の列で3列） */
@media (min-width: 40rem) {
    .page-c .p-body .layout-table {
        grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    }
}

/* レンズの見出し画像＋メガネ3点の表（UUR の Frame Color ごと。inc/content.php の doubleo_fmt_lens_rows が組む）は、
   見出し画像ごとに1段（2026-10-08 アツシさんの指摘＝格子に流すと見出しの途中で段が変わり、形の名前も写真からずれた）。
   広い画面は「見出し画像｜写真3点」の4列。スマホは見出し画像を1行に置き、その下に写真3点を横に並べる */
.page-c .p-body .p-lensrows {
    display: grid;
    gap: 2rem;
}

.page-c .p-body .p-lensrow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 0.75rem;
    align-items: start;
}

.page-c .p-body .p-lensrow__label {
    grid-column: 1 / -1;
}

.page-c .p-body .p-lensrow__label img {
    width: min(100%, 15rem);
}

.page-c .p-body .p-lensrow__item {
    margin: 0;
}

.page-c .p-body .p-lensrow__item a,
.page-c .p-body .p-lensrow__item img {
    display: block;
    width: 100%;
}

.page-c .p-body .p-lensrow__item figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.page-c .p-body .p-lensrow__note {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.8125rem;
    line-height: 1.6;
}

@media (min-width: 40rem) {
    .page-c .p-body .p-lensrow {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0 1rem;
    }

    .page-c .p-body .p-lensrow__label,
    .page-c .p-body .p-lensrow__note {
        grid-column: auto;
    }

    .page-c .p-body .p-lensrow__label img {
        width: 100%;
    }
}

/* 現行で赤字だった強調：赤は「予約する」だけなので、太字＋下線に */
.page-c .p-body .is-red {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.page-c .p-body a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.page-c .p-body a:hover {
    text-decoration-thickness: 2px;
}

/* 囲みの箱・本文の中に残った目次・表：棚の上なので線は黒 */
/* 囲みの箱：線で囲まず、一段暗い棚にする（灰色の1pxの囲みは古いウェブの箱に見えた＝審査5回目） */
.page-c .p-body .note-box {
    padding: 1.5rem;
    border: 0;
    background: rgba(24, 24, 27, 0.045);
}

.page-c .p-body .note-box > :first-child {
    margin-top: 0;
}

.page-c .p-body .page-toc,
.page-c .p-body .page-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page-c .p-body .page-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--p-ink-line-strong);
    font-size: 0.9375rem;
    text-decoration: none;
}

.page-c .p-body .page-toc a:hover {
    background: var(--color-text);
    color: #fff;
}

.page-c .p-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.page-c .p-body th,
.page-c .p-body td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--p-ink-line);
    text-align: left;
    vertical-align: top;
}

.page-c .p-body th {
    font-weight: 700;
}

/* ---------- 本文の共通部品（inc/content.php の doubleo_format_body・2026-10-07 アツシさん指示「ゼロベースで共通構成に」） ----------
   余白の体系：4px 刻み。縦のリズムは「段落の間 1.25rem（20px）／小見出しの上 2rem（32px）・下 0.5rem（8px）／部品の間 1rem（16px）」。
   行の種類ごとの部品：
     h4.p-h4      小見出し（■…／【…】…／strong だけの行）。左に 2px の黒い線を立てる＝見出しだと一目で分かる
     ul/ol.p-list 箇条書き・番号つき（・●○／(1) 1. で始まる行の連なり）
     p.p-note     注記（※ ＊ で始まる行）。薄く小さく、左に ※ を立てる
     p.p-price    価格（¥ を含む短い行）。金額だけ太く大きく
     p.p-more     案内（「…はこちら」「→」のリンクだけの行）。右向きの矢印つきのリンク
     figure.p-figure 写真だけの行（続けば1つの figure に。中の格子・帯・拡大リンクは既存の部品） */
.page-c .p-body .p-h4 {
    position: relative;
    margin-top: 2rem;
    padding-left: 0.875rem;
    font-size: 1.0625rem;
    font-weight: 700;
    font-feature-settings: "palt";
    line-height: 1.5;
}

.page-c .p-body .p-h4::before {
    content: "";
    position: absolute;
    top: 0.2em;
    bottom: 0.2em;
    left: 0;
    width: 2px;
    background: var(--color-text);
}

.page-c .p-body .p-h4 + * {
    margin-top: 0.5rem;
}

/* 棚の最初の要素が小見出しなら、上の余白は棚の内側の余白に任せる */
.page-c .p-body > .p-h4:first-child {
    margin-top: 0;
}

.page-c .p-body .p-list {
    padding-left: 1.25rem;
}

.page-c .p-body ul.p-list {
    list-style: none;
    padding-left: 1rem;
}

.page-c .p-body ul.p-list > li {
    position: relative;
}

/* 箇条書きの印：直角の決まりに合わせて小さな四角 */
.page-c .p-body ul.p-list > li::before {
    content: "";
    position: absolute;
    top: 0.85em;
    left: -1rem;
    width: 0.375rem;
    height: 0.375rem;
    background: var(--color-text);
}

.page-c .p-body ol.p-list {
    list-style: decimal;
}

.page-c .p-body ol.p-list > li::marker {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.page-c .p-body .p-list > li + li {
    margin-top: 0.375rem;
}

/* 注記：行頭の ※（元の文字のまま）を1字ぶんぶら下げる。文字は少し小さく薄く */
.page-c .p-body .p-note {
    padding-left: 1em;
    text-indent: -1em;
    color: var(--color-muted);
    font-size: 0.875rem;
    line-height: 1.8;
}

.page-c .p-body .p-note + .p-note {
    margin-top: 0.25rem;
}

.page-c .p-body .p-price {
    margin-top: 1.5rem;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--p-ink-line-strong); /* 縦棒は小見出しだけの記号にする（価格にも同じ棒で、意味が2つあるのに形が1つだった＝審査5回目）。棚の値札＝横の線の上に金額 */
    font-size: 1rem;
    line-height: 1.8;
}

.page-c .p-body .p-price__amount {
    font-size: 1.25em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.page-c .p-body .p-more {
    margin-top: 1.5rem;
}

.page-c .p-body .p-more a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1rem 0 0;
    text-decoration: none;
    font-weight: 700;
}

.page-c .p-body .p-more a::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.35s var(--c-ease);
}

.page-c .p-body .p-more a:hover::after {
    transform: translateX(4px) rotate(45deg);
}

.page-c .p-body .p-figure {
    margin: 1.5rem 0;
    max-width: none;
}

.page-c .p-body .p-figure > img,
.page-c .p-body .p-figure > a > img {
    display: block;
}

/* 図のあとの本文は少し空ける */
.page-c .p-body .p-figure + * {
    margin-top: 1.5rem;
}

/* ページ内の目印（span.anchor）：高さ0。前後の余白に数えない（数えると見出しの上が2倍空いた） */
.page-c .p-body .anchor {
    display: block;
    height: 0;
}

.page-c .p-body > * + .anchor {
    margin-top: 0;
}

/* 強調（strong）は太字のまま。文の中の強調は色を変えない（赤は「予約する」だけ） */
.page-c .p-body p strong {
    font-weight: 700;
}

/* ---------- 文字を焼き込んだ画像の置き換え（inc/content.php の doubleo_tidy_page_body・2026-10-07） ---------- */
/* 類似品・模倣品の注意：黒い枠。左に「!」の印（黒い丸に白）。元の画像の赤い三角と金色の地は使わない */
.page-c .p-body .p-caution {
    position: relative;
    margin-top: 2.5rem;
    padding: 1.25rem 1.25rem 1.25rem 4.25rem;
    border: 2px solid var(--color-text);
}

.page-c .p-body .p-caution::before {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    background: var(--color-text); /* 直角の四角（「角は直角」の決まり。元の画像が丸だった POINT・PROCESS・made in Japan だけ丸にしている） */
    color: #fff;
    font-family: var(--font-latin);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    content: "!";
}

.page-c .p-body .p-caution__title {
    font-size: 1.125rem;
    font-weight: 800;
    font-feature-settings: "palt";
    line-height: 1.4;
}

.page-c .p-body .p-caution__body {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.8;
}

/* 「POINT.1」の丸：黒い丸に白い文字。元は黄色の丸（82px）。見出しの左に並ぶので、見出しの行の中央にそろえる */
.page-c .p-body .p-point {
    display: inline-flex; /* grid だと「POINT.」と番号が別のマスに入って2行に折れた */
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 0.5rem 0.25rem 0;
    border-radius: 50%;
    background: var(--color-text);
    color: #fff;
    font-family: var(--font-latin);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap; /* 「POINT.2」を丸の中で折り返さない */
    vertical-align: middle;
}

.page-c .p-body .p-point em {
    font-style: normal;
}

/* 「POINT.1」〜「6」の見出し（バイク用メガネ）：黒い丸の POINT ＋黒い文字の小見出し。元は黒い帯の画像で、棚の明るい面の上で浮いていた（10/7 アツシさん指示） */
.page-c .p-body h4.p-pointhead {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-top: 3rem;
    font-size: 1.25rem;
    font-weight: 800;
    font-feature-settings: "palt";
    line-height: 1.35;
}

.page-c .p-body h4.p-pointhead .p-point {
    flex: none;
    margin: 0;
}

.page-c .p-body h4.p-pointhead + * {
    margin-top: 1rem;
}

/* 「PROCESS 1」〜「8」の見出し（つくり方とカスタム）：黒い帯に白い文字。左に白い丸「PROCESS N」。元は黒い帯＋黄色の丸（高さ79px） */
.page-c .p-body h4.p-process {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 0.625rem 1.25rem 0.625rem 0.625rem;
    background: var(--color-text);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 800;
    font-feature-settings: "palt";
    line-height: 1.3;
}

.page-c .p-body .p-process__num {
    display: inline-flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: #fff;
    color: var(--color-text);
    font-family: var(--font-latin);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.page-c .p-body .p-process__num em {
    font-size: 0.875rem;
    font-style: normal;
}

/* 「made in Japan」の丸：黒い丸に白い文字2行。元は赤い丸（100px） */
.page-c .p-body .p-badge {
    display: inline-grid;
    width: 5rem;
    height: 5rem;
    margin: 0.25rem 0;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    background: var(--color-text);
    color: #fff;
    font-family: var(--font-latin);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

.page-c .p-body .p-badge__small {
    display: block;
    font-size: 0.6875rem;
    font-weight: 400;
}

/* 地図の埋め込み。読み込む前の地をページの色にそろえる（既定のベージュは黒白グレーの外の色） */
.page-c .p-body iframe {
    width: 100%;
    min-height: 20rem;
    border: 0;
    background: var(--color-tint);
}

.page-c .p-body .anchor,
.page-c .p-body [id] {
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

/* 店舗案内のページの営業カレンダー（棚の上）：明るい地の色（content.css の既定）に戻す。
   shelf.css の .wall .bcal は黒い壁用の色なので、棚の上では上書きする */
.page-c .p-board .bcal {
    --bcal-ink: var(--color-text);
    --bcal-paper: #f1f1f3;
    --bcal-muted: var(--color-muted);
    --bcal-open: #fff;
    --bcal-open-ink: var(--color-text);
    --bcal-open-edge: var(--color-line);
    --bcal-off: #d4d4d9;
    --bcal-off-ink: var(--color-muted);
    --bcal-line: rgba(24, 24, 27, 0.45);
    --bcal-hatch: rgba(24, 24, 27, 0.22);

    margin-top: 0.75rem;
}

.page-c .p-body .bcal__heading {
    margin-top: 2rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

/* ---------- 会場ページ ---------- */
/* 主役は日付（来られる日かどうかを最初に判断するため）。棚の見出しと同じ大きさ。会場名はその下の補足 */
.page-c .p-venue__date {
    margin-top: 0.75rem;
    font-family: var(--font-latin);
    /* 「12/5（土）・12/6（日）」（13字）が1行に収まる大きさ：375px で24px、1440px で52px（審査2回目の前に実測で調整） */
    font-size: clamp(1.5rem, 4.2vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.page-c .p-venue__title {
    margin-top: 0.5rem;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 700;
    font-feature-settings: "palt";
    line-height: 1.35;
}

.page-c .p-venue__over {
    margin-top: 0.75rem;
    color: var(--c-muted);
    font-size: 0.9375rem;
}

.page-c .p-venue__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.75rem;
}

/* 会場の外観写真（カラーのまま・彩度だけ少し落とす＝トップと同じ。触れると本来の色） */
.page-c .p-venue__photo {
    margin-top: 2rem;
}

.page-c .p-venue__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: rgba(244, 244, 245, 0.06);
    filter: saturate(0.75);
    transition: filter 0.3s var(--c-ease);
}

.page-c .p-venue__photo:hover img {
    filter: none;
}

/* 注意事項（棚の上）：本文と同じ幅で1段（2段組みは段の切れ目が文の途中に来た＝審査2回目で1段を勧められた） */

.page-c .p-venue__notes h2 {
    font-size: 1.375rem;
}

/* 予約表（黒い壁の上に白い枠）。今の部品（widget.js）の色はそのまま */
.page-c .p-venue__reserve {
    margin-top: 2.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--c-line-strong);
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.page-c .p-venue__reserve-title {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 800;
    font-feature-settings: "palt";
}

.page-c .p-venue__reserve .venue-reserve {
    margin-top: 0;
    overflow-x: auto; /* 予約表（幅740px）は、狭い画面では表だけ横に動かせるようにする */
}

.page-c .p-venue__reserve .venue-reserve--over p + p {
    margin-top: 1rem;
}

/* 予約表の後の注意（返信メールの案内など）：黒い壁の上に小さめの白い文字 */
.page-c .p-venue__after {
    max-width: var(--p-measure);
    margin-top: 1.5rem;
    color: var(--c-muted);
    font-size: 0.9375rem;
    line-height: 1.8;
}

.page-c .p-venue__after .is-red {
    color: var(--c-text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.page-c .p-venue__after a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ---------- 一覧ページ（レンズ・サングラスの子ページの一覧＝名前と紹介文の格子） ---------- */
.page-c .p-index {
    padding-block: 0 var(--c-space);
}

.page-c .p-index .c-lenses {
    margin-top: 0;
}

/* ---------- ラインアップ（棚の上に商品） ---------- */
.page-c .p-lineup {
    padding-block: 0 var(--c-space);
}

.page-c .p-lineup .c-products {
    margin-top: 0;
}

/* 商品の名前の下のひとこと（各商品ページの頭の紹介文） */
.page-c .c-products__lead {
    display: block;
    margin-top: 0.375rem;
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.7;
}

/* ---------- TRUNK SHOW 一覧の「これまでの開催会場」（黒い壁の上の格子。1行目に日付、2行目に会場名） ---------- */
.page-c .p-past {
    padding-bottom: 0;
}

.page-c .p-past__list {
    margin-top: 2rem;
}

.page-c .p-past__list li {
    display: grid;
    gap: 0.125rem;
    padding: 0.875rem 0;
}

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

.page-c .p-past__name {
    font-size: 1.0625rem;
    font-weight: 700;
    font-feature-settings: "palt";
}

/* ---------- お問い合わせ（黒い壁の上に4つの手段） ---------- */
.page-c .p-contact {
    padding-block: 0 var(--c-space);
}

.page-c .p-contact__list {
    display: grid;
    border-top: 1px solid var(--c-line-strong);
}

.page-c .p-contact__item {
    display: grid;
    gap: 0.5rem;
    padding-block: 1.75rem;
    border-bottom: 1px solid var(--c-line);
}

.page-c .p-contact__label {
    color: var(--c-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
}

.page-c .p-contact__value {
    font-size: 1.125rem;
    font-weight: 700;
}

.page-c .p-contact__value--tel {
    font-family: var(--font-latin);
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    letter-spacing: 0.01em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.page-c .p-contact__value a {
    text-decoration: none;
}

.page-c .p-contact__value a:hover {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.page-c .p-contact__note {
    color: var(--c-muted);
    font-size: 0.875rem;
    line-height: 1.7;
}

.page-c .p-contact__action {
    margin-top: 0.5rem;
}

/* お問い合わせの下の営業カレンダー（電話をかける前に営業日を確かめられるように。黒い壁の上なので色は shelf.css の .wall .bcal）。
   見出しは電話番号（主役）より小さく */
.page-c .p-contact__calendar .c-title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.page-c .p-contact__calendar .bcal {
    margin-top: 1.5rem;
}

/* ---------- ブログ（一覧は黒い壁・記事は棚の上） ---------- */
.page-c .p-posts {
    padding-block: 0 var(--c-space);
}

.page-c .p-posts__list {
    border-top: 1px solid var(--c-line-strong);
}

.page-c .p-posts__item {
    border-bottom: 1px solid var(--c-line);
}

.page-c .p-posts__link {
    display: grid;
    gap: 0.25rem;
    padding-block: 1.25rem;
    text-decoration: none;
}

.page-c .p-posts__thumb {
    display: block;
    width: 100%;
    max-width: 18rem;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: rgba(244, 244, 245, 0.06);
}

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

.page-c .p-posts__title {
    font-size: 1.125rem;
    font-weight: 700;
    font-feature-settings: "palt";
}

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

.page-c .p-posts__empty {
    padding-block: 2rem;
    border-block: 1px solid var(--c-line);
    color: var(--c-muted);
}

/* ページ送り（WordPress が出す .pagination） */
.page-c .pagination {
    margin-top: 2.5rem;
}

.page-c .pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page-c .pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--c-line-strong);
    text-decoration: none;
}

.page-c .pagination .page-numbers.current {
    background: var(--c-text);
    color: var(--c-bg);
}

.page-c .pagination a.page-numbers:hover {
    border-color: var(--c-text);
}

/* 記事の日付（頭） */
.page-c .p-head__date {
    display: block;
    color: var(--c-muted);
    font-family: var(--font-latin);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

/* 記事の本文は普通の文章（自動の段落づけあり） */
.page-c .p-body--post p {
    line-height: 2;
}

/* 前後の記事（黒い壁の上） */
.page-c .p-postnav {
    display: grid;
    gap: 0.75rem;
    padding-block: 2rem 0;
}

.page-c .p-postnav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

/* ---------- 404 ---------- */
.page-c .p-404 {
    padding-block: 0 var(--c-space);
}

.page-c .p-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

/* ---------- 末尾（次の TRUNK SHOW・ほかのページ） ---------- */
.page-c .p-foot {
    padding-block: clamp(3rem, 6vw, 4.5rem) clamp(3.5rem, 7vw, 5.5rem);
}

/* 棚のすぐ下は、棚板があるので線を引かない */
.page-c .p-shelf + .p-foot,
.page-c .p-lineup + .p-foot {
    border-top: 0;
}

.page-c .p-foot__inner {
    display: grid;
    gap: 3rem;
}

.page-c .p-foot__next {
    display: grid;
    gap: 1rem;
    justify-items: start;
}

.page-c .p-foot__next .c-next {
    width: 100%;
    max-width: 26rem;
}

.page-c .p-foot__title {
    font-size: 1.125rem;
    font-weight: 800;
    font-feature-settings: "palt";
}

.page-c .p-foot__related .c-words {
    margin-top: 1.25rem;
}

.page-c .p-foot__related .c-words__link {
    min-height: 3.25rem;
    padding-block: 0.625rem;
    font-size: clamp(0.9375rem, 3.8vw, 1.125rem);
}

/* 2行の項目（会場ページの「ほかの開催予定」＝1行目に日付、2行目に会場名） */
.page-c .p-foot__text {
    display: block;
    min-width: 0;
}

.page-c .p-foot__sub {
    display: block;
    margin-bottom: 0.125rem;
    color: var(--c-muted);
    font-family: var(--font-latin);
    font-size: 0.8125rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   タブレットより広い画面（768px〜）
   ========================================================================== */
@media (min-width: 48rem) {
    .page-c .p-contact__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3rem;
    }

    .page-c .p-contact__item:nth-child(-n + 2) {
        border-top: 0;
    }

    .page-c .p-postnav {
        grid-template-columns: 1fr 1fr;
    }

    .page-c .p-postnav__next {
        text-align: right;
    }

    .page-c .p-postnav__next a {
        justify-content: flex-end;
    }

    /* ページ内の目次（スマホでは本文の前）を2列に */
    .page-c .p-aside .c-words {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }

}

/* ==========================================================================
   パソコンの画面（1024px〜）
   ========================================================================== */
@media (min-width: 64rem) {
    .page-c .p-head__lead {
        max-width: 36em;
        font-size: 1.0625rem;
    }

    /* 会場ページの頭：左に日付・会場名・予約、右に外観写真 */
    .page-c .p-head__inner.has-photo {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); /* 日付を1行に収めるため、左を広く */
        align-items: center;
        column-gap: 4rem;
    }

    .page-c .p-head__inner.has-photo .p-venue__photo {
        margin-top: 0;
    }

    .page-c .p-body h2 {
        margin-top: 4rem;
    }

    /* 拡大画像の行：パソコンでは一段大きく */
    .page-c .p-body .p-gallery--photos img {
        height: 10rem;
    }

    /* 棚の上：左に本文、右にページ内の目次（1列） */
    .page-c .p-board.has-aside {
        grid-template-columns: minmax(0, 1fr) 15rem;
        column-gap: 4rem;
        align-items: start;
    }

    .page-c .p-aside {
        order: 0;
    }

    .page-c .p-aside .c-words {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .page-c .p-contact__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 2.5rem;
    }

    .page-c .p-contact__item:nth-child(-n + 4) {
        border-top: 0;
    }

    /* 4列のときは、電話番号が1行に収まる大きさに（1440px で列の幅は約260px） */
    .page-c .p-contact__value--tel {
        font-size: clamp(1.5rem, 1.9vw, 2.125rem);
    }

    /* 末尾：左に次の TRUNK SHOW、右にほかのページ */
    .page-c .p-foot__inner:has(.p-foot__related) {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
        column-gap: 5rem;
    }

    .page-c .p-foot__related .c-words {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 「次の TRUNK SHOW」が無いページ（会場ページ）：「ほかの開催予定」を全幅3列に（左5frに詰まって右が空いていた） */
    .page-c .p-foot__inner:has(.p-foot__related):not(:has(.p-foot__next)) {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-c .p-foot__inner:not(:has(.p-foot__next)) .p-foot__related .c-words {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* 「ほかのページ」が無いページ：札を横長にして幅いっぱいに（左に小さな札＋右に空白、を作らない） */
    .page-c .p-foot__inner:not(:has(.p-foot__related)) .p-foot__next {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 2rem;
    }

    .page-c .p-foot__inner:not(:has(.p-foot__related)) .c-next {
        max-width: none;
        grid-template-columns: max-content max-content minmax(0, 1fr);
        align-items: baseline;
        column-gap: 2rem;
        padding: 1.5rem 4rem 1.5rem 2rem;
    }

    .page-c .p-foot__inner:not(:has(.p-foot__related)) .c-next__date {
        font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    }

    .page-c .p-foot__inner:not(:has(.p-foot__related)) .c-next__venue {
        font-size: 1.0625rem;
    }

    .page-c .p-posts__link {
        grid-template-columns: 6rem minmax(0, 1fr);
        gap: 1.5rem;
        align-items: baseline;
    }

    /* アイキャッチのある記事は、日付・写真・題名の3列 */
    .page-c .p-posts__link.has-thumb {
        grid-template-columns: 6rem 10rem minmax(0, 1fr);
        align-items: center;
    }
}

/* ==========================================================================
   広いパソコンの画面（1280px〜）：頭を「左に題名と紹介文、右に目次」の2列に
   1024〜1279px では右の列が約380pxしかなく、目次が3行に折れた（2026-10-07 実測）ので、それ未満は縦に積んだまま
   ========================================================================== */
@media (min-width: 80rem) {
    /* 上端でそろえる（下端でそろえると、目次が長いページで題名が画面の下へ落ちた） */
    .page-c .p-head__inner.has-toc {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        column-gap: 5rem;
    }

    .page-c .p-head__inner.has-toc .p-head__main {
        padding-top: 0.5rem;
    }

    .page-c .p-head__inner.has-toc .p-toc:not(.p-toc--many) {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .page-c .p-head__inner.has-toc .p-toc:not(.p-toc--many) li:nth-child(even)::before {
        display: none;
    }

    /* 項目が多い目次（スポーツ別の15競技など）は2列。列の間に細い縦線。1列約250pxで13字の競技名が1行に収まる */
    .page-c .p-head__inner.has-toc .p-toc--many {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
    }

    .page-c .p-head__inner.has-toc .p-toc--many li:nth-child(even) {
        position: relative;
    }

    .page-c .p-head__inner.has-toc .p-toc--many li:nth-child(even)::before {
        position: absolute;
        top: 0.75rem;
        bottom: 0.75rem;
        left: -1.25rem;
        width: 1px;
        background: var(--c-line);
        content: "";
    }

    .page-c .p-toc .c-words__link {
        min-height: 3.5rem;
        font-size: 1.0625rem;
    }
}

/* 動きを減らす設定にしている人には、触れたときの動きも出さない */
@media (prefers-reduced-motion: reduce) {
    .page-c .p-body a > img,
    .page-c .p-venue__photo img {
        transition: none;
    }


    .page-c .p-toc .c-words__link[href^="#"]:hover::after,
    .page-c .p-aside .c-words__link:hover::after {
        transform: rotate(135deg);
    }
}

/* ---------- 本文の中に差し込んだ TRUNK SHOW の区画（template-parts/trunkshow-section.php・バイク用メガネ） ----------
   トップの区画と同じ中身。下層では本文の棚と同じ 1200px 幅の棚として、本文の棚のあいだに置く */
.page-c .p-trunk {
    margin-block: var(--c-space);
}

.page-c .p-trunk > .c-board > .c-wrap {
    padding-inline: clamp(1.25rem, 5vw, 4.5rem);
}

/* ---------- 審査5回目の直し（10/7 午後） ---------- */

/* ② 小見出しの余白：base.css のリセットに h4〜h6 が無く、ブラウザ既定の下の余白（約23px）が残って、小見出しが前後の中間に浮いていた。
   上 40px：下 8px（3対1以上）にして、小見出しを下の文章に付ける */
.page-c .p-body :is(h4, h5, h6) {
    margin-bottom: 0;
}

.page-c .p-body .p-h4 {
    margin-top: 2.75rem;
}

/* 小見出し→本文は 16px（8px では本文の1行目と小見出しがくっついて見えた＝10/7 アツシさんの指摘）。上 44px：下 16px で、小見出しは下の文章の側に付く */
.page-c .p-body .p-h4 + :is(p, ul, ol, dl, figure, table, .p-price, .p-figure, .p-more, .p-note, .p-list, .p-defs, .p-gallery, .p-sidepair) {
    margin-top: 1rem;
}

.page-c .p-body :is(h2, h3) + :is(p, ul, ol, dl, figure, table, .p-figure, .p-gallery, .p-note, .p-sidepair, .p-price, .p-more) {
    margin-top: 1rem; /* h4 のあとと同じ16px（大きい見出しのほうが本文に近いのは逆だった＝余白の実測） */
}

.page-c .p-body .p-sec + :is(p, ul, ol, dl, figure, table, .p-figure, .p-gallery, .p-note, .p-sidepair, .p-price, .p-more) {
    margin-top: 1.25rem;
}

/* 章見出しでない h3（章の中の中見出し）は、小見出し（44px）より上を広く */
.page-c .p-body h3:not(.p-sec) {
    margin-top: 3.5rem;
}

.page-c .p-body :is(h2, h3) + .p-h4 {
    margin-top: 1rem;
}

/* ③ 章の見出し（ページ内の目次の行き先）：タグ（h2／h3）ではなく役割でそろえる。上に細い線、30px・800 */
.page-c .p-body .p-sec {
    margin-top: 4.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--p-ink-line-strong);
    font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    font-weight: 800;
    font-feature-settings: "palt";
    line-height: 1.3;
}

.page-c .p-body > .p-sec:first-child,
.page-c .p-body > .anchor:first-child + .p-sec {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ④ 見出しが続いたときの前の行（節の惹句）：太字だけ・棒なし */
.page-c .p-body .p-lead {
    margin-top: 2.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.7;
}

.page-c .p-body .p-lead + .p-h4 {
    margin-top: 0.75rem;
}

/* ⑤ 定義の一覧（項目名＋説明。紫外線の UVA／UVB／UVC など）：項目名の頭に箇条書きと同じ直角の四角 */
.page-c .p-body .p-defs dt {
    position: relative;
    padding-left: 1rem;
    font-weight: 700;
    line-height: 1.7;
}

.page-c .p-body .p-defs dt::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    background: var(--color-text);
}

.page-c .p-body .p-defs dd {
    margin: 0.25rem 0 0 1rem;
    line-height: 1.9;
}

.page-c .p-body .p-defs dd + dt {
    margin-top: 1rem;
}

/* ⑦ 同じバナーで続いていた開催予定などを、格子にまとめたもの（箱にせず、上に太い線） */
.page-c .p-body .p-events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1rem 2rem;
    margin-top: 1rem;
    padding: 0;
    list-style: none;
}

.page-c .p-body .p-events > li {
    padding-top: 0.75rem;
    border-top: 2px solid var(--color-text);
}

.page-c .p-body .p-events .p-more {
    margin-top: 0.5rem;
}

/* ⑧ 小さい写真の並び（格子だと右が空き、段もずれた）：詰めて並べる */
.page-c .p-body .p-gallery:not(.p-gallery--large):not(.p-gallery--stack):not(.p-gallery--strip):not(.p-gallery--photos) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

/* ⑧ 小さい写真＋長い本文の組（div.p-sidepair）：広い画面では写真を本文の右に回す。組は本文の幅（42em）に収め、写真の右端は本文の右端にそろう。
   組そのものが1つの部品なので、見出しのあとの余白などの規則がそのまま効く（写真だけ浮かせると、段落の上の余白が消えて見出しと0pxで接していた） */
.page-c .p-body > .p-sidepair {
    display: flow-root;
    max-width: var(--p-measure);
}

.page-c .p-body .p-sidepair > p {
    margin-top: 0;
}

.page-c .p-body .p-sidepair > .p-figure {
    margin: 0 0 1.25rem;
}

@media (min-width: 48rem) {
    .page-c .p-body .p-sidepair > .p-figure--side {
        float: right;
        max-width: min(40%, 20rem);
        margin: 0.375rem 0 1rem 2rem;
    }

    /* 2枚の写真は右の列に縦に並べる */
    .page-c .p-body .p-sidepair > .p-figure--side img + img,
    .page-c .p-body .p-sidepair > .p-figure--side a + a {
        margin-top: 0.75rem;
    }
}

/* ⑧' 選手のコメント（UUR の Impression。画像に焼き込まれていたコメントを書き起こしたもの）：写真＋名前＋コメントの組。
   広い画面は写真を左に浮かせて名前とコメントを右に回り込ませ、写真の下まで来たら本文の幅いっぱいに流す。スマホは写真→名前→コメントの1段
   （2026-10-08 アツシさん指示。現行は写真を押さないとコメントが読めなかった）。組と組の間は細い線で区切る */
.page-c .p-body > .p-voices {
    max-width: var(--p-measure);
}

.page-c .p-body .p-h4 + .p-voices {
    margin-top: 1rem;
}

.page-c .p-body .p-voice {
    display: flow-root;
}

.page-c .p-body .p-voice + .p-voice {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-line, rgba(0, 0, 0, 0.12));
}

.page-c .p-body .p-voice__photo {
    width: 12.5rem;
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

.page-c .p-body .p-voice__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
}

.page-c .p-body .p-voice__role {
    margin-left: 0.375em;
    font-size: 0.8125rem;
    font-weight: 700;
}

.page-c .p-body .p-voice__text {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.9;
}

@media (min-width: 48rem) {
    .page-c .p-body .p-voice__photo {
        float: left;
        width: 11.25rem;
        margin: 0.375rem 1.75rem 0.75rem 0;
    }
}

/* ⑧'' ファイルのダウンロード（OS MASK の「ご注文用紙」。inc/content.php の doubleo_fmt_downloads が組む）：
   黄色と黒のアイコン画像（50×55px）が格子で引き伸ばされて粗かった（2026-10-08 アツシさんの指摘）。
   線の SVG アイコン＋名前＋種類・大きさの細い枠のボタンを横に並べる。角は直角・赤は使わない（赤は「予約する」だけ） */
.page-c .p-body .p-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-left: 0;
    padding: 0;
    list-style: none;
}

.page-c .p-body .p-downloads > li {
    margin: 0;
    padding: 0;
}

.page-c .p-body .p-downloads > li::before {
    content: none;
}

.page-c .p-body a.p-download {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 13rem;
    padding: 0.75rem 1.25rem 0.75rem 1rem;
    border: 1px solid var(--color-text);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.page-c .p-body a.p-download:hover,
.page-c .p-body a.p-download:focus-visible {
    background: var(--color-text);
    color: var(--color-bg, #fff);
}

.page-c .p-body .p-download__icon {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    mix-blend-mode: normal;
}

.page-c .p-body .p-download__text {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.page-c .p-body .p-download__name {
    font-size: 0.9375rem;
    font-weight: 700;
}

.page-c .p-body .p-download__kind {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ⑨ 図の説明（「◀ 耐摩耗性能評価テスト」など）：小さく薄く、図の下 8px */
.page-c .p-body .p-figure figcaption {
    margin-top: 0.5rem;
    color: var(--color-muted);
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* ⑩ スマホ：棚の内側の余白を詰め、1行の字数を 17字→約20字に（閲覧の多いスマホで一番効く） */
@media (max-width: 47.99rem) {
    .page-c .p-board {
        padding-inline: 1rem;
    }

    .page-c .p-body {
        font-size: 1rem;
    }

    .page-c .p-body p,
    .page-c .p-body li,
    .page-c .p-body dd {
        line-height: 1.85;
    }
}

/* 会場ページ：旧版の .venue（base.css の幅1200px・左右の余白・上下の余白）が新しい黒い壁を1200pxに縮め、広い画面で左右に白が出ていた（10/7 アツシさんの指摘）。
   案Cの会場ページ（.page-c.venue）では打ち消して、黒い壁を画面の端から端まで */
.page-c.venue {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ---------- 審査6回目の直し（10/7 夕方） ---------- */

/* 5. POINT の丸：「POINT.」は小さく字間を開け、数字は大きく（丸の中の10pxの文字が読めなかった） */
.page-c .p-body .p-point {
    flex-direction: column;
    gap: 0.0625rem;
}

.page-c .p-body .p-point__label {
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
}

.page-c .p-body .p-point__num {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

/* 7. 章見出しの線は本文の幅で止める（棚いっぱいに伸びるページと、本文の列で止まるページがあった） */
.page-c .p-body .p-sec {
    max-width: var(--p-measure);
}

/* 8. 案内が続くときは1つのまとまりに見せる（56px 空いて別々の話に見えた） */
.page-c .p-body .p-more + .p-more {
    margin-top: 0.25rem;
}

.page-c .p-body .p-more__lead {
    margin-right: 0.5em;
    color: var(--color-muted);
    font-weight: 400;
}

/* 8. 文書が画面より短いときに、フッターの下へ白い帯が出ないように（案Cのページは黒い壁の色を下地に） */
html:has(.wall) {
    background: var(--color-dark);
}

/* 4. 本文の中に差し込んだ TRUNK SHOW の区画：題名をページの題名（h1）と競わない大きさに。会場名は行の長さをそろえる（「…インター／店」と1字だけ落ちていた） */
.page-c .p-trunk .c-board__head .c-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.page-c .c-date__venue {
    text-wrap: balance;
}

/* 棚の右の目次は、広い画面では画面に止める（アツシさん了承「目次追従はいいと思います」）。位置を止めるだけで、スクロールに連動する演出ではない。
   止まる範囲は、その目次が入っている棚の中（合体ページは章ごと） */
@media (min-width: 64rem) {
    .page-c .p-board.has-aside > .p-aside {
        position: sticky;
        top: calc(var(--header-height, 4.5rem) + 1.5rem);
        align-self: start;
        max-height: calc(100vh - var(--header-height, 4.5rem) - 3rem);
        overflow-y: auto;
    }
}

/* 仕様表（見出しの行を持つ表＝レンズの「レンズ／用途／特徴」など）：表のまま、見出しの行は一段暗い地。写真は列の幅に収める。
   スマホでは表ごと横に送る（列を崩すと対応が読めない） */
.page-c .p-body table.p-spec {
    display: block;
    width: 100%;
    max-width: none;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.page-c .p-body table.p-spec th {
    background: rgba(24, 24, 27, 0.06);
    white-space: nowrap;
}

.page-c .p-body table.p-spec :is(th, td) {
    padding: 0.75rem 1rem;
    border: 1px solid var(--p-ink-line);
    line-height: 1.7;
    vertical-align: top;
}

.page-c .p-body table.p-spec td:first-child {
    min-width: 9rem;
    font-weight: 700;
}

.page-c .p-body table.p-spec img {
    display: block;
    max-width: 9rem;
    margin-top: 0.5rem;
}

/* 最下段の TRUNK SHOW の区画：目次から飛んだとき、固定のヘッダーに題名が隠れないように */
.page-c .p-trunk {
    scroll-margin-top: calc(var(--header-height, 4.5rem) + 1rem);
}

/* ---------- 写真の拡大表示（ライトボックス・assets/js/lightbox.js） ----------
   暗くした画面の上に写真を1枚。角は直角・赤は使わない・開く／送るときの演出なし（決まりどおり押した反応だけ） */
dialog.lb {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(12, 12, 14, 0.94);
    color: #fff;
    overscroll-behavior: contain;
}

dialog.lb::backdrop {
    background: rgba(12, 12, 14, 0.6);
}

/* 開いているあいだは後ろのページを動かさない */
html.lb-open {
    overflow: hidden;
}

.lb__stage {
    display: grid;
    place-items: center;
    width: 100%;
    height: calc(100dvh - 4.5rem);
    padding: 3.5rem 4.5rem 0;
    box-sizing: border-box;
}

.lb__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff; /* 透過のある図・白地の商品写真が暗い地に溶けないように */
}

.lb__bar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
}

.lb__count {
    flex: none;
    color: rgba(255, 255, 255, 0.7);
    font-variant-numeric: tabular-nums;
}

.lb__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0;
    background: rgba(12, 12, 14, 0.6);
    color: #fff;
    cursor: pointer;
}

.lb__btn:hover,
.lb__btn:focus-visible {
    border-color: #fff;
    background: #fff;
    color: var(--color-text);
    outline: none;
}

.lb__btn::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.lb__close {
    top: 0.75rem;
    right: 0.75rem;
}

/* 閉じる：×（2本の線） */
.lb__close::before {
    width: 1.125rem;
    height: 2px;
    border: 0;
    background: currentColor;
    box-shadow: none;
    transform: rotate(45deg);
}

.lb__close::after {
    content: "";
    position: absolute;
    width: 1.125rem;
    height: 2px;
    background: currentColor;
    transform: rotate(-45deg);
}

.lb__prev,
.lb__next {
    top: calc(50% - 2.25rem - 1.5rem);
}

.lb__prev {
    left: 0.75rem;
}

.lb__prev::before {
    transform: translateX(2px) rotate(-135deg);
}

.lb__next {
    right: 0.75rem;
}

.lb__next::before {
    transform: translateX(-2px) rotate(45deg);
}

.lb__btn[hidden] {
    display: none;
}

/* スマホ：写真を画面の幅いっぱいに。前へ・次へは下の帯の左右（写真に重ねない）。送るのは横のスワイプでも */
@media (max-width: 47.99rem) {
    .lb__stage {
        height: calc(100dvh - 8rem);
        padding: 3.75rem 0 0;
    }

    .lb__bar {
        padding: 0.75rem 4.5rem;
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
    }

    .lb__prev,
    .lb__next {
        top: auto;
        bottom: 1rem;
    }
}

/* 写真の並びの中にあるリンクの無い写真（lightbox.js が印 lb-img を付ける）も、押すと拡大する見た目に */
.page-c .p-body img.lb-img {
    cursor: zoom-in;
}

.page-c .p-body img.lb-img:hover {
    filter: brightness(0.92);
}

.page-c .p-body img.lb-img:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* ---------- バイク用メガネとは：写真の見せ方の整理（2026-10-08 アツシさん「大事なページなのに写真がしょぼい」） ---------- */

/* 検眼チャート（元は文字入りの画像 oneoff.jpg）：表に起こした。記号は中央にそろえて大きく、行の見出し（目的）は左 */
.page-c .p-body table.p-chart {
    display: table;
    width: auto;
    max-width: 100%;
}

.page-c .p-body table.p-chart :is(th, td) {
    padding: 0.625rem 0.875rem;
    text-align: center;
    vertical-align: middle;
}

.page-c .p-body table.p-chart tbody th {
    text-align: left;
    white-space: nowrap;
}

.page-c .p-body table.p-chart td,
.page-c .p-body table.p-chart td:first-child {
    min-width: 0;
    font-family: var(--font-latin);
    font-size: 1.0625rem;
    font-weight: 700;
}

/* スマホでは表ごと横に送る（列を崩すと対応が読めない） */
@media (max-width: 39.99rem) {
    .page-c .p-body table.p-chart {
        display: block;
        overflow-x: auto;
    }
}

/* チャートの記号の意味（A…ストリート など）：3列の小さな一覧 */
.page-c .p-body .p-chart-key {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    gap: 0.25rem 1.75rem;
    margin-top: 0.75rem;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.page-c .p-body .p-chart-key li {
    margin: 0;
}

.page-c .p-body .p-chart-key b {
    display: inline-block;
    min-width: 1.25em;
    margin-right: 0.375em;
    font-family: var(--font-latin);
}

/* 小さな商品写真（156px）＋説明の組（RECSPECS・ルディープロジェクト）：2つを横に並べ、写真は元の大きさのまま */
.page-c .p-body .p-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
    max-width: var(--p-measure);
}

.page-c .p-body .p-item {
    margin: 0;
}

.page-c .p-body .p-item img {
    width: auto;
    max-width: 100%;
}

.page-c .p-body .p-item figcaption {
    margin-top: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.7;
}

/* 当店オリジナルの6商品（ラインアップと同じ商品カード）：本文の中では下線を出さない・写真は block */
.page-c .p-body .c-products {
    max-width: none;
    margin-top: 1rem;
    padding: 0;
    list-style: none;
}

.page-c .p-body .c-products__item {
    margin: 0;
}

.page-c .p-body a.c-products__link {
    text-decoration: none;
}

.page-c .p-body .c-products__image {
    display: block;
}

/* 見出しの直後の横長の写真（figure.p-hero）：スポーツ別の各競技の頭・バイク用メガネのファーストビュー（2026-10-08 アツシさん指示）。
   写真は無料素材（Unsplash）の 2:1。広い画面は 3:1 に切り抜いて本文の列いっぱい、スマホは 2:1。乗算はかけない（写真の色のまま） */
.page-c .p-body .p-hero {
    margin: 0 0 1.75rem;
    max-width: none;
}

.page-c .p-body .p-hero__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    mix-blend-mode: normal;
}

@media (min-width: 48rem) {
    .page-c .p-body .p-hero__img {
        aspect-ratio: 3 / 1;
    }
}

/* 写真の表（左に写真・右に文章）から組み直した組（inc/content.php の doubleo_fmt_table_sidepairs）：写真は元のとおり左に浮かせ、
   文章を回り込ませて本文の幅いっぱいに流す（2026-10-08 アツシさんの指摘＝スポーツ別の「偏光レンズ」が1行10字の細い列になっていた） */
@media (min-width: 48rem) {
    .page-c .p-body .p-sidepair--left > .p-figure--side {
        float: left;
        margin: 0.375rem 2rem 1rem 0;
    }
}

/* 列ごとに読む表から組み替えた組（inc/content.php の doubleo_fmt_table_columns）：名前 → 写真 → 説明 を縦に1組。
   広い画面は組を横に並べる（--cols）。スマホは2列、名前が2列以上にまたがる組（NO REGRET の写真2枚など）は1列いっぱい（2026-10-08） */
.page-c .p-body .p-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem;
    max-width: none;
    align-items: start;
}

.page-c .p-body .p-col {
    min-width: 0;
}

.page-c .p-body .p-col--wide {
    grid-column: 1 / -1;
}

.page-c .p-body .p-col > * + * {
    margin-top: 0.625rem;
}

.page-c .p-body .p-col__title {
    font-weight: 700;
    line-height: 1.5;
}

.page-c .p-body .p-col__imgs {
    display: grid;
    grid-template-columns: repeat(var(--span, 2), minmax(0, 1fr));
    gap: 0.75rem;
}

.page-c .p-body .p-col__img img {
    display: block;
    width: 100%;
    height: auto;
}

.page-c .p-body .p-col p {
    font-size: 0.875rem;
    line-height: 1.75;
}

.page-c .p-body .p-col p.p-col__title {
    font-size: 0.9375rem;
}

@media (min-width: 40rem) {
    .page-c .p-body .p-cols {
        grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    }

    .page-c .p-body .p-col--wide {
        grid-column: auto;
    }
}

/* 頭に「●」を付けて並べていた見出しから組み替えた札（inc/content.php の doubleo_fmt_symbol_headings）：
   その競技で扱うサングラスの種類。細い線の札を横に並べる。角は直角・赤は使わない（2026-10-08 アツシさん「●はダサい」） */
.page-c .p-body .p-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: none;
    margin-left: 0;
    padding: 0;
    list-style: none;
}

.page-c .p-body .p-tags > li {
    margin: 0;
    padding: 0.5rem 1rem;
    border: 1px solid var(--p-ink-line, rgba(24, 24, 27, 0.2));
    font-size: 1.125rem; /* 本文（1.0625rem）より少し大きく。14px では本文より小さく見えた（10/8 アツシさんの指摘） */
    font-weight: 700;
    line-height: 1.5;
}

.page-c .p-body .p-tags > li::before {
    content: none;
}

/* 「■カーブ / 8R」「■特性 / …」の仕様の行から組み替えた一覧：項目名と値を左右に（2026-10-08） */
.page-c .p-body .p-defs--spec {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.25rem 1.25rem;
    font-size: 0.9375rem;
}

.page-c .p-body .p-defs--spec dt {
    margin: 0;
    color: var(--color-muted);
    font-weight: 400;
}

.page-c .p-body .p-defs--spec dd {
    margin: 0;
}

/* 仕様の一覧では、定義の一覧の印（四角）と字下げ・項目の間の空きを外す（表のように詰めて読ませる） */
.page-c .p-body .p-defs--spec dt {
    padding-left: 0;
}

.page-c .p-body .p-defs--spec dt::before {
    content: none;
}

.page-c .p-body .p-defs--spec dd,
.page-c .p-body .p-defs--spec dd + dt {
    margin: 0;
    line-height: 1.7;
}

/* 仕様表（見出しの行1つ・結合なし・2列以上）は、PCでもスマホでも1行＝1枚のカード（inc/content.php の doubleo_fmt_spec_labels）。
   PC＝左に1列目（レンズ名と写真）、右に見出しの文字（用途・特徴…）をラベルにして縦に並べる。スマホ＝全部を縦に1列。
   表のままだとPCでも「用途」の列が細く押しつぶされ、スマホでは1行に2〜3字だった（2026-10-08 アツシさん「サイト全ての表を読みやすく」） */
.page-c .p-body table.p-spec--stack,
.page-c .p-body table.p-spec--stack tbody {
    display: block;
    width: 100%;
    overflow: visible;
    border: 0;
}

.page-c .p-body table.p-spec--stack .p-spec__head {
    display: none;
}

.page-c .p-body table.p-spec--stack tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--p-ink-line);
}

.page-c .p-body table.p-spec--stack tr + tr {
    margin-top: 1rem;
}

.page-c .p-body table.p-spec--stack :is(th, td) {
    display: block;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 0;
    white-space: normal;
}

.page-c .p-body table.p-spec--stack :is(th, td) + :is(th, td) {
    border-top: 1px solid var(--p-ink-line);
}

/* 1列目＝カードの頭（レンズ名・写真） */
.page-c .p-body table.p-spec--stack tr > :first-child {
    background: rgba(24, 24, 27, 0.06);
    font-weight: 700;
}

.page-c .p-body table.p-spec--stack tr > :first-child img {
    max-width: 10rem;
}

.page-c .p-body table.p-spec--stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

@media (min-width: 40rem) {
    /* 左＝名前と写真（全部の行にまたがる）、右＝ラベルつきの中身を縦に */
    .page-c .p-body table.p-spec--stack tr {
        grid-template-columns: 13rem minmax(0, 1fr);
        grid-auto-flow: row;
    }

    .page-c .p-body table.p-spec--stack tr > :first-child {
        grid-column: 1;
        grid-row: 1 / span 20;
        border-right: 1px solid var(--p-ink-line);
    }

    .page-c .p-body table.p-spec--stack tr > :not(:first-child) {
        grid-column: 2;
    }

    .page-c .p-body table.p-spec--stack tr > :nth-child(2) {
        border-top: 0;
    }
}

/* ---------- 2026-10-08 サイト全体の表の読みやすさ（アツシさん「サイト全ての表を読みやすい形でレスポンシブ化」） ---------- */

/* 名前＋写真のマスの格子（偏光レンズの「カラー」「オプション」） */
.page-c .p-body .p-swatches__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1rem;
    margin-top: 0.625rem;
}

.page-c .p-body .p-swatch img {
    display: block;
    width: 100%;
    max-width: 12rem;
    height: auto;
}

.page-c .p-body .p-swatch__name {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5;
}

/* 1マスだけの表＝囲みの箱（一段暗い地） */
.page-c .p-body .p-box {
    max-width: var(--p-measure);
    padding: 1rem 1.25rem;
    background: rgba(24, 24, 27, 0.05);
}

.page-c .p-body .p-box > * + * {
    margin-top: 0.75rem;
}

/* 列ごとに別の話題の表（サングラスの規則の2国・店舗案内の地図2つ）：PCは列を並べ、スマホは縦に1列 */
.page-c .p-body .p-cols--text {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

.page-c .p-body .p-cols--text p {
    font-size: 0.9375rem;
}

.page-c .p-body .p-cols--text iframe {
    display: block;
    width: 100%;
    min-height: 16rem;
    border: 0;
}

@media (min-width: 40rem) {
    .page-c .p-body .p-cols--text {
        grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    }
}

/* 項目名＋内容の表（通販の法規表示・送料など）：PCは項目名の列を固定幅、スマホは項目名の下に内容 */
.page-c .p-body table.p-kv {
    width: 100%;
    max-width: none;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.page-c .p-body table.p-kv :is(th, td) {
    padding: 0.75rem 1rem;
    border: 1px solid var(--p-ink-line);
    line-height: 1.8;
    text-align: left;
    vertical-align: top;
}

.page-c .p-body table.p-kv th[colspan] {
    background: rgba(24, 24, 27, 0.06);
    font-weight: 700;
}

.page-c .p-body table.p-kv td:first-child:not(:only-child) {
    width: 11rem;
    background: rgba(24, 24, 27, 0.03);
    font-weight: 700;
}

@media (max-width: 39.99rem) {
    .page-c .p-body table.p-kv,
    .page-c .p-body table.p-kv tbody,
    .page-c .p-body table.p-kv tr,
    .page-c .p-body table.p-kv :is(th, td) {
        display: block;
        width: auto;
    }

    .page-c .p-body table.p-kv {
        border-top: 1px solid var(--p-ink-line);
    }

    .page-c .p-body table.p-kv :is(th, td) {
        border-top: 0;
    }

    .page-c .p-body table.p-kv td:first-child:not(:only-child) {
        width: auto;
        padding-bottom: 0.25rem;
        border-bottom: 0;
    }
}

/* 対応表（DRIVEWEAR のレンズ種類の●）：表のまま。記号は中央、スマホは表ごと横に送る */
.page-c .p-body table.p-matrix {
    display: block;
    width: 100%;
    max-width: none;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.page-c .p-body table.p-matrix :is(th, td) {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--p-ink-line);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.page-c .p-body table.p-matrix td:first-child {
    text-align: left;
    font-weight: 700;
}

.page-c .p-body table.p-matrix p {
    margin: 0;
    font-size: inherit;
    line-height: 1.5;
}

/* 沿革（店舗案内・年表の画像から書き起こした章・2026-10-08）：左に年、右に出来事の2カラム。行の間に細い線。スマホは年の下に出来事 */
.page-c .p-body .p-history {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    max-width: var(--p-measure);
    margin: 0;
    border-top: 1px solid var(--p-ink-line);
}

.page-c .p-body .p-history dt,
.page-c .p-body .p-history dd {
    margin: 0;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--p-ink-line);
}

.page-c .p-body .p-history dt {
    padding-left: 0;
    font-family: var(--font-latin);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.6;
}

.page-c .p-body .p-history dt::before {
    content: none;
}

.page-c .p-body .p-history ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-c .p-body .p-history li {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.page-c .p-body .p-history li + li {
    margin-top: 0.25rem;
}

@media (max-width: 29.99rem) {
    .page-c .p-body .p-history {
        grid-template-columns: 3.75rem minmax(0, 1fr);
    }
}