/* Form_v2 体験カタログ CSS 採寸: docs/design-teardown.md の実測トークンに準拠（推測値は入れない） */ :root { --content-width: 1000px; --color-text: #404040; --color-placeholder: #B0A89C; /* 予約UI共通の淡色。入力済み文字(--color-text)とは別token */ --color-heading: #000; --color-card-bg: #F2EEE7; /* 採寸: カード背景 */ --color-tab-active: #E9D78A;/* 採寸: 選択タブ金 */ --color-reserve: #F4C5BF; /* 採寸: 予約ボタン ピンク */ --color-line: #d8d2c6; --font-serif: "Yu Mincho", "YuMincho", "游明朝", serif; --font-sans: "Yu Gothic", "游ゴシック体", "YuGothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--color-text); } [x-cloak] { display: none !important; } /* ---- 素タグの既定（★Form_v2 の領域だけに限定する・ADR-023） ---- `:where()` で囲った部分は**詳細度に加算されない**ので、この2行の詳細度は素の `img{}` `a{}` と まったく同じ（0,0,1）＝下の `.ex_listImg img` などのクラス指定は従来どおり強いままになる。 目的は詳細度ではなく**適用範囲**の限定で、囲わないとヘッダー/フッターまで巻き込む。 本ファイルは `assets/css/vendor-scope.css` の**どのレイヤーよりも強い**（レイヤー無しのCSSは 全レイヤーに優先する）ため、素の `img{}` のままだと詳細度で上のはずの本家ルール （`.headerLogo img { height: 30px }`・`.navSns li a img { width: 20px }` 等）まで負かしてしまう。 実測: `height: auto` が本家のロゴ指定を上書きし、ヘッダーのロゴが 86x30 → 96x33 になっていた。 ヘッダー/フッターは本家CSSだけで描く（＝本家と1pxも変えない）のが ADR-023 の方針なので、 ここは Form_v2 が組み立てた領域だけに閉じる。 */ :where(main.site-main, #cart-widget) img { max-width: 100%; height: auto; display: block; } :where(main.site-main, #cart-widget) a { color: inherit; text-decoration: none; } /* ---- フォーム共通 ---- ブラウザ既定の半透明化には依存せず、入力済み文字の色や focus/error/disabled 状態を 上書きしない。現Vue予約UIのselectには未選択状態がないためinput/textareaだけが対象。 */ input::placeholder, textarea::placeholder { color: var(--color-placeholder); opacity: 1; } /* ---- ヘッダー / フッター ---- ここには**何も書かない**。ヘッダー(.header)とフッター(.footer)は本家サイトの マークアップそのもの＋本家CSS（assets/css/vendor/original_style.css）で描画する（ADR-023）。 旧 `.site-header` / `.site-logo` / `.site-nav` / `.site-footer` は自作の簡易版で、 本物への置き換えに伴い**マークアップごと削除済み**（ADR-023）。 ここへ .header / .footer 向けの上書きを足すと、本家との差分が 「本家CSS」と「Form_v2 CSS」の2か所に散って追随できなくなるので足さないこと。 */ /* ---- 本体 ---- */ /* --content-width(1000px) は採寸(docs/design-teardown.md §1)の「コンテンツ幅」＝**内寸**。 採寸は一覧グリッド親 .ex_listContainer が max-width:1000px、詳細 .ex_pageContainer が width:1000px と、一覧・詳細とも同じ1000pxで実測されている。 本レイアウトは box-sizing:border-box のうえで .site-main に左右20pxのパディングを置くため、 max-width をそのまま1000pxにすると内寸が960pxしか残らず、一覧グリッドも詳細コンテナも 採寸より40px狭くなっていた。これが「一覧が常に2カラムに落ちる」原因でもある （3カラムに必要な 320×3+gap20×2=1000px が960pxに入らない）。 したがってパディングぶんを max-width に足し、**内寸を採寸どおり1000px**にする。 左右20pxの余白はそのまま残るので、カード背景が画面端に接することはない。 */ .site-main { max-width: calc(var(--content-width) + 40px); margin: 0 auto; padding: 0 20px 64px; } /* パンくず（ADR-027）。区切りは `views/layout.php` が地の文の「 > 」で出す。 旧 `.breadcrumb__sep { margin: 0 .5em }` は**削除した**（本家より区切りが広がる原因だった）。 上下の余白は本家のデスクトップ実測に合わせる（`original_style.css:9237` `@media (min-width:1200px) { .breadcrumb { margin: 2em auto } }` ＝ 実測 25.6px。 旧値 20px より広い＝本家のほうが余白がある、というCEO指摘と同じ向き）。 `margin` ではなく `padding` で置くのは、`.site-main` の上パディングが 0 のため `margin-top` が親へ**マージン相殺で抜けて**しまい、余白が `
` の外側に出るのを避けるため。 ★文字色は `#000`（旧 `#777`）。本家の実測に合わせる（ADR-027 追記・CEO判断「色も合わせます」）。 本家 `original_style.css`（**ライブ版を再取得して確認**）は `.breadcrumb` にも `.breadcrumb a` にも色を1つも書いておらず、素タグの規則だけで色が決まっている: p, …, a, span, … { color: #000000 } ← 区切り「>」と最後の要素（現在地） a / a:link / a:visited / a:hover / a:active { color: #000000 } a:hover { text-decoration: none } ＝**リンクと非リンクで色は変わらず、hover でも変わらない**（実測: 本家の `

` も `` も `rgb(0,0,0)`・`text-decoration-line: none`）。したがって Form_v2 側も **`.breadcrumb` に色を1つ置くだけ**でよく、`.breadcrumb a` の個別指定は足さない （足すとリンクだけ別扱いになり、本家と構造がずれる）。 リンクがこの色を継ぐ実体は39行目の :where(main.site-main, #cart-widget) a { color: inherit; text-decoration: none } で、`:where()`（詳細度0）かつレイヤー無しのため `neutralize` の `all: revert`（＝UA既定の 青リンク＋下線）に勝つ。**この1行が消えるとパンくずのリンクだけ青くなって下線が出る**ので、 `tests/php/ViewRenderTest.php` J節が `.breadcrumb` の色と一緒にこの行も固定している。 サイズと上下余白は**本家の実測値**（Issue#260・2026-09-20 採寸。推測で入れない）: font-size 12.8px / line-height 23.04px（1.8）/ 上下 19.2px 当方は 13px・行高 20.8px・上下 26px で、タイトルの開始位置が 7px ぶんずれていた。 */ .breadcrumb { font-size: 12.8px; line-height: 1.8; padding: 19.2px 0; color: #000; } /* ---- ヒーロー ---- */ /* 上の余白は**本家の実測値 96px**（Issue#260・CEO指示 2026-09-20「微妙に文字のタイトルの位置、 余白がことなる。ほとんどいいけどもう少し揃えたい」）。当方は 24px で、パンくずから タイトルまでが本家より 72px 詰まっていた。下の 48px は元から本家と一致している。 */ .ex_hero { display: flex; gap: 40px; align-items: flex-end; margin: 96px 0 48px; } .ex_hero__text { flex: 1; } /* Issue#182 A-1/A-2。サイズは**現行HPの実測値**に合わせる（2026-09-16 採寸。推測で入れない）: `.page_headerTitle`（H2「体験する」） 19.2px / weight 400 / #000 その中の ``（"Experience"） 12.8px / weight 400 A-1「見出しの『体験する』が太い」は weight ではなくサイズ差だった（HP も当方も 400 で、 当方が 24px と大きかった）。 */ /* 行高と下余白も本家の実測に合わせる（Issue#260・2026-09-20 採寸）: 本家 line-height 34.56px（1.8）/ タイトル下 48px 当方 line-height 30.72px（1.6）/ タイトル下 4px 下余白が 4px だったのは、下に続く `.ex_hero__lead` の margin-top 24px と相殺されて 実効 24px になる書き方だったため。本家は 48px なので、**片側に寄せて 48px** にする （相殺に頼ると、あいだに要素が増えたときに黙って間隔が変わる）。 */ .ex_hero__title { font-family: var(--font-serif); font-size: 19.2px; font-weight: 400; line-height: 1.8; color: var(--color-heading); margin: 0 0 48px; } /* ---- 文字の濃さ（Issue#260・CEO指示 2026-09-20 逐語「位置はわりとどうでも／文字の濃さだよ」）---- 本家を実測したところ、**読ませる文字はほぼすべて #000（真っ黒）／当方はグレー**だった。 これが「薄い」の正体で、位置や余白の差ではない（2026-09-20 採寸・推測値は入れていない）: 要素 本家 当方（修正前） Experience #000 #888 リード #000 / 16px #404040 / 18px 本文 #000 / 12.8px / lh 23.04px #404040 / 14px / lh 1.9 カードのカテゴリ #000 / weight 700 / 12.8px #666 / weight 400 / 12px カードの名前 #000 / weight 700 / 16px #000 / weight 600 / 15px カードの説明 #000 / 12.8px #555 / 13px カードの所要時間 #000 / 12.8px #404040 / 13px `body` の既定色は本家も #404040 で同じ。本家は**この7か所だけ #000 に上げている**ので、 同じ場所だけを上げる（全部を黒にすると本家より濃くなる）。 価格（`.ex_listPrice`）だけは当方のほうが濃く大きい（本家 12.8px/400 ↔ 当方 16px/700）。 「薄い」の指摘には当たらず、意図的に目立たせている箇所なので**そのままにしてある**。 */ .ex_hero__en { display: block; font-family: var(--font-serif); font-size: 12.8px; line-height: 1.8; letter-spacing: .1em; color: #000; } /* リード文は本家 16px（当方は 18px で 2px 大きかった）。下の余白も本家の 24px に合わせる。 上の余白は 0（タイトル側の 48px が間隔を決める。上で書いた相殺回避）。 */ .ex_hero__lead { font-family: var(--font-serif); font-size: 16px; line-height: 1.8; color: #000; margin: 0 0 24px; } .ex_hero__desc { font-size: 12.8px; line-height: 1.8; color: #000; } /* Issue#182 A-3「右側の画像に下揃えする」。`.ex_hero` は align-items:flex-end なので箱の下端は 既に画像と揃っているが、**最後の段落の margin-bottom が残って文字だけ 14px 浮いていた** （2026-09-16 実測: 画像の下端 539 に対し本文の下端 525）。末尾の余白だけ落とす。 */ .ex_hero__text > :last-child { margin-bottom: 0; } /* ヒーロー画像は本家スナップショット 480×372（ADR-027）。デスクトップでは列幅が (1000-40)/2 = 480px でちょうど原寸だが、`@media` で1カラムに落ちたとき（184行目）に 480px のまま左寄せで残らないよう幅を伸ばす。`assets/css/school.css:41` と同じ指定。 */ .ex_hero__img { flex: 1; } .ex_hero__img img { width: 100%; height: auto; } .ex_notice { text-align: center; font-size: 14px; margin: 32px 0; } /* ---- 体験メニュー / タブ ---- */ .ex_menu { margin-top: 48px; } /* Issue#182 A-5。現行HPの見出しは 19.2px（`docs/design-teardown.md` の採寸と一致） */ .ex_menu__title { font-family: var(--font-serif); font-size: 19.2px; font-weight: 400; text-align: center; letter-spacing: .2em; color: var(--color-heading); margin-bottom: 4px; } .ex_menu__note { text-align: center; font-size: 12px; color: #888; margin-bottom: 24px; } .ex_tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-bottom: 32px; } /* ★min-width は採寸値 121px（Issue#132・CEO指摘「サイズに最低サイズを指定。長いものは長くなっていい」）。 根拠は同梱の本家CSS `assets/css/vendor/original_style.css:7204`（デスクトップ分岐）: @media (min-width: 769px) { .ex_listNavmain li { width: 121px } } @media (min-width: 769px) { .ex_listNavmain li a { width: 100%; ... } } 本家のタブは `li` が 121px 固定で、中の `a` が `width:100%`。**本家も Form_v2 も `box-sizing: border-box`**（本家 `original_style.css:606` ほか / 本文 16行目 `* { box-sizing: border-box }`） なので、この 121px は枠線・パディング込みの**外寸**であり、`.ex_tab`（＝Form_v2 では `a` 自身が タブの箱）の `min-width` にそのまま移せる。Chrome実測で本家の各タブが**ちょうど 121.0px**、 `a` の computed `box-sizing: border-box` であることを確認済み（2026-09-01）。 **`width` ではなく `min-width` にする理由**: 本家は 121px 固定なので、長いラベル （`7・８・9月開催の体験` ＝ 11文字）は 121px の箱の中で**2行に折り返る**（実測: 高さ 30.8px → 43.6px）。 CEO指示は「長いものは長くなっていい」なので、下限だけを 121px に置き、上限は付けない。 したがって **`max-width` も `width` も足さないこと**。足すと長いラベルが折り返す／切れる。 （`docs/design-teardown.md` §カテゴリタブの実測値・`tests/php/ViewRenderTest.php` L節が固定している） */ .ex_tab { border: 1px solid #000; padding: 10px 16px; font-size: 13px; background: #fff; min-width: 121px; text-align: center; transition: background .15s; } .ex_tab:hover { background: #f5f2ec; } .ex_tab.is-active { background: var(--color-tab-active); } /* ---- カードグリッド（採寸: flex-wrap, card 320px） ---- */ /* ★余裕ゼロの設計（意図的・採寸準拠）: 3カラムの必要幅は 320×3 + gap20×2 = **ちょうど1000px** で、 コンテナ内寸（= .site-main の内寸 1000px）と完全に一致する。**余白は1pxも無い**。 カード幅320px・gap20px・カードpadding20px・コンテンツ幅1000px はいずれも docs/design-teardown.md の実測値なので、この一致は偶然ではなく採寸どおりの結果。 ただしこの4値のどれかが1pxでも増える／このコンテナに border・padding が付く／ .site-main の内寸が1000pxを割ると、**即座に2カラムへ落ちる**（PR#74で実際に起きた回帰）。 これら4値と .site-main の内寸は必ずセットで見直すこと。 なお .ex_listContainer は一覧だけでなく詳細ページの「おすすめの体験」 (views/experience-detail.php) でも使われる共有クラスなので、一覧専用の調整をここに書かない。 */ .ex_listContainer { display: flex; flex-wrap: wrap; gap: 20px; max-width: var(--content-width); } .ex_listCol { width: 320px; padding: 20px; background: var(--color-card-bg); } /* 体験画像は一覧/詳細とも 1:1（CEO決定 2026-07-29・ADR-011）。 object-fit は cover で統一。商品マスタ(takOpe)の体験画像は1:1入稿が前提 */ .ex_listImg { margin-bottom: 12px; aspect-ratio: 1/1; overflow: hidden; background: #f7f5f0; } .ex_listImg img { width: 100%; height: 100%; object-fit: cover; } /* 画像が無い商品用（一覧カード・詳細主画像で共用）。旧仕様の /img/img-loading.gif フォールバックは 80px のローディングスピナーが枠いっぱいに拡大され「読み込み中」に誤読される＆背景が黒く不気味 なため廃止（ADR-012 PR#32レビュー N-1で組み合わせ画像は既に廃止済み。本件は商品主画像にも適用。 詳細は ADR-018）。 親要素(.ex_listImg/.ex_gallery__main)が既に淡色背景とaspect-ratioを持つため、テキストのみ重ねる。 表示テキストは「準備中」ではなく「写真準備中」にする（PR#77レビュー NB-2）。有効な価格・稼働中の 予約ボタンの隣に置かれるため、主語を省いた「準備中」だと「体験自体が受付前」と誤読され得る。 ADR-012の同種プレースホルダー文言（「この組み合わせの完成イメージ写真は…」）にならい、 準備中なのは「写真」であって体験・予約ではないことを明示する。 色は背景#f7f5f0に対しコントラスト比 4.686:1（実測。#756d60 vs #f7f5f0）。 WCAG AA(4.5:1)の余裕は0.19しかないため、この色を変更するときは必ず再計算すること。 （本文色#404040の約9.5:1より意図的に控えめ）。 */ .ex_img-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: .1em; color: #756d60; } /* カテゴリのタグ表示（Issue#260 / CEO指示 2026-09-20「メニューのカテゴリがタグのような表示に 合わせたい。色も設定から」）。**本家の採寸に合わせる**（2026-09-20 実測・推測値を入れない）: p.ex_listCategory margin-bottom 6.4px タグ本体 inline-block / 12.8px / weight 700 / #000 / 背景 #fff padding 2.56px 6.4px / 角丸なし / 枠線なし カード背景（#F2EEE7）の上に白い箱が乗ることでタグに見える。複数カテゴリは全部並べる（#228）。 背景色は上流の設定（`GET /api/categories` の `color`）が `style` で個別に上書きする。 設定が無ければこの既定色（＝本家と同じ白）。 */ .ex_listCategory { margin: 0 0 6.4px; display: flex; flex-wrap: wrap; gap: 4px; } .ex_listCategory__tag { display: inline-block; padding: 2.56px 6.4px; background: #fff; color: #000; font-size: 12.8px; font-weight: 700; line-height: 1.8; } .ex_listName { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: #000; margin: 0 0 8px; line-height: 1.5; } .ex_listCopy { font-size: 12.8px; color: #000; margin: 0 0 8px; } /* Issue#237: 予約に必要な日数。所要時間・難易度と同じ地味さで並べる */ .ex_listTime, .ex_listDifficulty_level, .ex_listLead { font-size: 12.8px; color: #000; margin: 2px 0; } .ex_listPrice { text-align: right; font-size: 16px; font-weight: 700; color: #000; margin: 8px 0 0; } /* 無限スクロール / ページ送り */ .ex_more { text-align: center; margin: 40px 0; } .ex_moreBtn { border: 1px solid #000; background: #fff; padding: 12px 32px; font-size: 14px; cursor: pointer; } .ex_moreBtn:hover { background: #f5f2ec; } /* 番号ページャ（クローラ用のSSRたどり導線・ADR-008）。 Issue#133: JS が動く環境では上の無限スクロールと役目が重複し、最後のページまで読み込んだあと 「もっと見る」が消えた下にこれだけが残るため、CEO から「どこかで止まってページングが出てくる」と 指摘された。そこで **既定は非表示** にする。 ★マークアップは消していない。`display:none` にしているだけで、`` は DOM に 残るのでクローラは従来どおり全ページをたどれる（ADR-008 の前提を壊さない）。 表示に戻すのは次の2通りだけ: (a) JS 無効 … `views/experience-list.php` の `