/* ========================================================================== DANDAN 宿泊体験PWA — ブランドデザイン（Phase 2.5 R1） ★ このファイルの立ち位置（Phase 2.5 設計書§2）全25ページが app.css / phase2.css を共有しているため、トークンを無条件に書き換えると管理画面まで反転してしまう。そこで **宿泊者向けの画面だけ** を付け、このファイルが `[data-theme='brand']` の中だけでトークンとコンポーネントを上書きする。 - app.css / phase2.css は **1行も触っていない** - 元に戻すときは Base.astro の brand prop を false にするだけセレクタは必ず `[data-theme='brand']` で始める（例外なし）。 app.css の `:root` と同じ詳細度で当たり負けしないよう、トークンだけは `:root[data-theme='brand']` にしている。 ★ 値の正設計/ブランドデザイン_スタイル抽出_v0.1.md（v0.2ダーク節＋v0.3＋v0.4）＋ Figma `4LfxiGjlXN7Y7mWvkoob2u` の v0.4 フレーム。このファイルに「新しい色」「新しい寸法」は作っていない。 ★ ピンク（#FF1493）の規律線・点のみ／1画面2〜3箇所。括弧ラベルの「(」「)」だけはサイト由来の定型のためカウント外（スタイル抽出v0.3 #4）。目次 01 トークン 08 AIカード 02 土台・粒子・タイポ 09 このページの目次 03 ヘッダー 10 追従ナビ（80px） 04 括弧ラベル 11 フッター 05 ボタン 12 ご予約内容モーダル 06 カード・タイル 13 ページ個別（周辺／緊急／チェックアウト） 07 本文の各要素 14 横向き（1080×810） ========================================================================== */ /* ========================================================================== 01 トークン（スタイル抽出 v0.2ダークテーマ節・Figma スタイルガイド） ========================================================================== */ :root[data-theme='brand'] { /* --- 面 --- */ --bg: #404040; /* 地（＋粒子） */ --bg-deep: #2e2e2e; /* 深い区画（ナビ・CHECK-OUT等） */ --layer-darkest: #1f1f1f; /* 山並みモチーフの最濃色 */ /* --- 文字 --- ⚠️ Phase 2.5 R2（申し送り§E-3・新規範）「muted系のグレー文字が読みにくい」→ **本文・説明・注記はすべて白（--ink）**に引き上げた。区別は**サイズ差だけ**でつける（`--ink-note` は `--ink` と同一値、という全社ルール＝ `_system/knowledge` / CLAUDE.md 準拠）。 `--ink-sub` / `--muted` は参照箇所が多いので**トークンの値を白にした** （セレクタを1つずつ書き換えるより漏れが出ない）。本当にグレーでよい装飾・状態表示だけを `--meta` に付け替えている＝このファイル末尾「15 グレー残置」に**全部**列挙してある。 */ --ink: #f1f1f1; --ink-sub: #f1f1f1; --muted: #f1f1f1; /** 装飾・状態表示のみに使うグレー。#404040 上で 5.3:1（本文には使わない） */ --meta: #b9b9b9; /* --- 罫線・カード面 --- */ --line: rgba(255, 255, 255, 0.25); /* ヘアライン（サイト実値） */ --line-2: rgba(255, 255, 255, 0.16); --fill: rgba(255, 255, 255, 0.07); /* カード面の持ち上げ */ --fill-2: rgba(255, 255, 255, 0.12); /* :active の沈み */ /* --- 差し色 --- */ --ai: #243627; /* AIの面だけに使う濃緑黒 */ --accent: #ff1493; /* 線・点のみ */ --accent-bright: #ff8fcb; /* エラー「文字」専用の明るいピンク（#404040上で4.9:1） */ /* --- 書体 --- */ --font-ja: 'Zen Kaku Gothic Antique', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif; --font-en: 'Poppins', 'Zen Kaku Gothic Antique', -apple-system, BlinkMacSystemFont, sans-serif; /* --- 余白スケール（810px幅のiPad向け・サイト実測の約1/2） --- */ --sp-section: 64px; --sp-card: 32px; --sp-head: 24px; /* 見出し → 本文 */ --sp-gap: 20px; /* グリッド gap */ --sp-label: 12px; /* ラベル → 見出し */ --nav-h: 80px; } /* ========================================================================== 02 土台・粒子テクスチャ・タイポグラフィ ========================================================================== */ /* 粒子は「CSS/SVGフィルタでも可」（スタイル抽出v0.4 §LAYER）。 512px相当のフラクタルノイズを彩度0で敷き、背景に固定する（本文の後ろ）。 */ [data-theme='brand'] body { background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23g)' opacity='0.22'/%3E%3C/svg%3E"); background-repeat: repeat; background-attachment: fixed; color: var(--ink); font-family: var(--font-ja); font-size: 16px; line-height: 2; /* 本文行間200% */ letter-spacing: 0.01em; } [data-theme='brand'] a { color: var(--ink); } [data-theme='brand'] .shell { padding: 0 24px calc(var(--nav-h) + 40px); } /* ヘッダーを出さない画面（Phase 2.5 R7 §2・チェックイン）。ヘッダーが持っていた下マージン（--sp-section）のぶんを上の余白として持たせる＝括弧ラベルと挨拶が画面の上端に貼り付かないようにする。 ⚠️ safe-area（ノッチ・ホームバー）も見る（この画面は全画面表示で使う）。 */ [data-theme='brand'] .shell--nohead { padding-top: max(var(--sp-section), env(safe-area-inset-top)); } /* --- 見出し（Zen Kaku Medium） --- */ [data-theme='brand'] h1 { font-size: 36px; font-weight: 500; line-height: 1.5; letter-spacing: 0.01em; margin: 0 0 var(--sp-head); } [data-theme='brand'] h2 { font-size: 24px; font-weight: 500; line-height: 1.6; letter-spacing: 0.01em; margin: var(--sp-section) 0 var(--sp-head); padding-bottom: 0; border-bottom: 0; /* ワイヤーの下罫線は使わない（Figmaは罫線なし） */ } [data-theme='brand'] h3 { font-size: 18px; font-weight: 500; line-height: 1.7; margin: 32px 0 12px; } [data-theme='brand'] p { margin: 0 0 16px; } [data-theme='brand'] .lead { font-size: 18px; line-height: 1.9; color: var(--ink); } /* 注釈は本文と同じ濃さにはしないが、薄くしすぎない（サイズ差で区別する） */ [data-theme='brand'] .small { font-size: 14px; line-height: 1.9; } [data-theme='brand'] .muted { color: var(--muted); } [data-theme='brand'] [id] { scroll-margin-top: 96px; } /* ============ ページ内リンクのスムーススクロール（Phase 2.5 R6 §3）============ 目次・#faq・#taxi・#contact 等のアンカーを滑らかに送る。 ⚠️ `prefers-reduced-motion` では有効にしない（下の no-preference で囲っている）。 ⚠️ 追従ヘッダー分の scroll-margin-top（上の96px）はそのまま効く。 ⚠️ ページ遷移（ClientRouter）中は Base.astro が html に `data-dw-nav` を付ける。遷移直後のスクロール復元（先頭へ／戻ったときの位置）まで滑らせると画面が長く流れてしまうため、その間だけ標準の即時スクロールに戻す。 */ @media (prefers-reduced-motion: no-preference) { html[data-theme='brand'] { scroll-behavior: smooth; } html[data-theme='brand'][data-dw-nav] { scroll-behavior: auto; } } /* 欧文・数字は Poppins（和文の中に混ざる数字もこちらに寄せる） */ [data-theme='brand'] .homeclock, [data-theme='brand'] .appfoot__nums b, [data-theme='brand'] .emgnum, [data-theme='brand'] .steps > li::before { font-family: var(--font-en); } /* ========================================================================== 03 ヘッダー（Figma: ロゴ＋パンくず＋日付時刻＋IG＋ホーム） ========================================================================== */ [data-theme='brand'] .apphead { align-items: center; gap: 8px 20px; background: var(--bg-deep); border-bottom: 1px solid var(--line); padding: 14px 24px; margin: 0 -24px var(--sp-section); min-height: 72px; } [data-theme='brand'] .apphead__brand { display: inline-flex; align-items: center; min-height: 44px; letter-spacing: normal; } [data-theme='brand'] .apphead__logo { display: block; color: var(--ink); } /* headTitle（GUIDE 03 — Sauna 等）はヘッダーには出さない。 Figmaでは括弧ラベルの行（.pagelabel）が同じ役目を担う */ [data-theme='brand'] .apphead__title { display: none; } [data-theme='brand'] .apphead__meta { margin-left: auto; display: inline-flex; align-items: baseline; gap: 12px; color: var(--ink); font-size: 22px; font-weight: 300; letter-spacing: 0.04em; } [data-theme='brand'] .homeclock__date { font-family: var(--font-ja); font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0.02em; } [data-theme='brand'] .apphead__actions { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; } [data-theme='brand'] .apphead__meta ~ .apphead__actions { margin-left: 0; } /* ⚠️ Phase 2.5 R6 §1 の「ヘッダーのチェックアウト時刻ピル」（.apphead__checkout / .checkoutchip / .checkoutpop）は **Phase 2.5 R8 §2 で廃止**した。チェックアウトの操作ボタンと誤解されうる（AZAMI指摘）ため、表示は追従ナビのチェックアウトボタンの下（「10 追従ナビ」の .bottomnav__time）へ移した。＝ HTML・JS・CSSのすべてから消してある（残骸を置かない）。 */ [data-theme='brand'] .apphead__ig { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); border-radius: 100vmax; } [data-theme='brand'] .apphead__ig:active { background: var(--fill-2); } /* ホームは白枠ピル。 ⚠️ Phase 2.5 R8 §1: **家アイコンのみ**にした（「ホーム」の文字は撤去。読み上げ用の名前は aria-label にある）。44×44の丸い枠にしてタップ領域は保つ（メニューのボタンと同じ大きさ・同じトーン）。 */ [data-theme='brand'] .apphead__home { margin-left: 0; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 100vmax; background: transparent; color: var(--ink); font-size: 14px; } [data-theme='brand'] .apphead__home--icon { justify-content: center; width: 44px; height: 44px; padding: 0; flex: none; } [data-theme='brand'] .apphead__home:active, [data-theme='brand'] .apphead__home[aria-current='page'] { background: var(--fill); font-weight: 400; } [data-theme='brand'] .apphead__homeicon { width: 20px; height: 20px; } /* パンくず（ヘッダーの中） */ [data-theme='brand'] .crumbs--head { margin: 0; padding: 0; border-bottom: 0; font-size: 14px; color: var(--muted); gap: 4px 10px; } [data-theme='brand'] .crumbs--head a { color: var(--muted); text-decoration: none; } [data-theme='brand'] .crumbs--head a:active { color: var(--ink); } [data-theme='brand'] .crumbs--head .crumbs__sep { color: var(--muted); font-size: 11px; } [data-theme='brand'] .crumbs--head .crumbs__cur { color: var(--ink-sub); font-weight: 400; } /* ========================================================================== 04 括弧ラベル（( STAY ) 形式）ラベル全体（括弧＋英字）を #FF1493 にする。 v0.3実施時のdndn.space実地確認で「サイト実CSSは全体ピンク」と確定（スタイル抽出v0.3 #4 の確定注記・Figma v0.3/v0.4準拠。規律カウント外）。 ========================================================================== */ [data-theme='brand'] .pagelabel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 var(--sp-label); } [data-theme='brand'] .pagelabel__txt, [data-theme='brand'] .sectionlabel__txt { font-family: var(--font-en); font-size: 14px; font-weight: 500; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; } [data-theme='brand'] .pagelabel__txt::before, [data-theme='brand'] .sectionlabel__txt::before { content: '{ '; color: var(--accent); } [data-theme='brand'] .pagelabel__txt::after, [data-theme='brand'] .sectionlabel__txt::after { content: ' }'; color: var(--accent); } [data-theme='brand'] .pagelabel__note, [data-theme='brand'] .sectionlabel__note { font-size: 14px; color: var(--muted); letter-spacing: 0.06em; } /* セクション見出し（HOME・ガイド一覧の ( STAY ) 等） */ [data-theme='brand'] .sectionlabel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 14px; letter-spacing: normal; color: var(--ink); margin: var(--sp-section) 0 var(--sp-label); } /* ========================================================================== 05 ボタン（完全ピル。主＝白地に反転／従＝25%白枠） ========================================================================== */ [data-theme='brand'] .btn { min-height: 56px; padding: 12px 36px; border: 1px solid var(--line); border-radius: 100vmax; background: transparent; color: var(--ink); font-size: 16px; font-weight: 400; letter-spacing: 0.02em; } [data-theme='brand'] .btn:active { background: var(--fill-2); } [data-theme='brand'] .btn--primary { background: #f1f1f1; border-color: #f1f1f1; color: #2e2e2e; font-weight: 500; } [data-theme='brand'] .btn--primary:active { background: #ffffff; } [data-theme='brand'] .btn--lg { min-height: 60px; font-size: 17px; } [data-theme='brand'] .btn--xl { min-height: 96px; font-size: 26px; font-weight: 500; letter-spacing: 0.02em; } [data-theme='brand'] .btn--ghost { border-style: dashed; color: var(--muted); } [data-theme='brand'] .btn[disabled], [data-theme='brand'] .btn--off { color: var(--muted); border-color: var(--line-2); background: transparent; } [data-theme='brand'] .btn--line::before { content: none; /* ［LINE］の代用表記はブランド面では出さない */ } [data-theme='brand'] .btnrow { gap: 16px; margin: var(--sp-head) 0; } /* 検証用の小さな切替（開発ツール・質問例ボタン・カテゴリチップ） */ [data-theme='brand'] .toggle { min-height: 44px; padding: 8px 20px; border: 1px solid var(--line); border-radius: 100vmax; background: transparent; color: var(--ink); font-size: 14px; } [data-theme='brand'] .toggle[aria-pressed='true'] { border-color: #f1f1f1; background: #f1f1f1; color: #2e2e2e; font-weight: 500; } /* ========================================================================== 06 カード・タイル・グリッドカードは「薄い白の持ち上げ＋ヘアライン」。角丸は小さめ（ボタンだけがピル）。 ========================================================================== */ [data-theme='brand'] .grid { gap: var(--sp-gap); } [data-theme='brand'] .card { border: 1px solid var(--line); border-radius: 4px; background: var(--fill); padding: var(--sp-card); } [data-theme='brand'] .card--pad { padding: var(--sp-card); } /* ワイヤーの「border-width:2px」インライン指定は、ダークでは太罫が目立ちすぎる。面の明るさで強さを出す（インラインstyleを消さずに上書きする） */ [data-theme='brand'] .card[style*='border-width'] { border-width: 1px !important; background: rgba(255, 255, 255, 0.1); } [data-theme='brand'] .tile { min-height: 96px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 4px; background: var(--fill); color: var(--ink); font-size: 17px; font-weight: 500; gap: 4px; } [data-theme='brand'] .tile:active { background: var(--fill-2); } [data-theme='brand'] .tile__sub { font-size: 14px; font-weight: 400; line-height: 1.7; color: var(--muted); } [data-theme='brand'] .tile--off { border-style: dashed; border-color: var(--line-2); background: transparent; color: var(--muted); } [data-theme='brand'] .tile:target { border-color: var(--accent); box-shadow: none; } /* ワイヤーの黒ベタ（tile--hero）は、ダークでは「深い区画」で表す */ [data-theme='brand'] .tile--hero { min-height: 96px; background: var(--fill); color: var(--ink); font-size: 17px; font-weight: 500; } [data-theme='brand'] .tile--hero .tile__sub { color: var(--muted); } /* HOMEの挨拶ブロックはカードにしない（Figma F1: 地の上に直接置く） */ [data-theme='brand'] .homehero { border: 0; background: transparent; padding: 0; margin-bottom: var(--sp-section); } [data-theme='brand'] .homehero[style*='border-width'] { background: transparent; } /* あいさつは「Good Evening, 田中様」＝欧文Poppins＋和文Zen Kaku の混植（Figma F1）。 Poppins に和文グリフは無いので、この順に並べるだけで自動的に混ざる。 */ [data-theme='brand'] .homehero h1 { font-family: var(--font-en); font-weight: 500; } [data-theme='brand'] .homehero .lead { font-weight: 500; margin-bottom: 4px; } [data-theme='brand'] .homelead .tile--hero { margin-bottom: 0; } /* 写真サムネ付きタイル（Figma HOME・ガイド一覧のカード） */ [data-theme='brand'] .tile--thumb { flex-direction: row; align-items: center; gap: 20px; padding: 16px 20px 16px 16px; } [data-theme='brand'] .tile__thumb { flex: none; width: 76px; height: 68px; border-radius: 3px; object-fit: cover; background: rgba(255, 255, 255, 0.06); display: block; } /* .tile 自体は flex-column だが、サムネ付きは横並びになるので文字側をもう一段 flex-column で包む（でないとタイトルと補足が1行に流れる） */ [data-theme='brand'] .tile__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } /* ========================================================================== 07 本文の各要素 ========================================================================== */ [data-theme='brand'] .note { border: 0; border-left: 2px solid var(--line); border-radius: 0 4px 4px 0; background: var(--fill); color: var(--ink-sub); font-size: 15px; line-height: 1.9; padding: 20px 24px; margin: var(--sp-head) 0; } [data-theme='brand'] .note b { color: var(--ink); } [data-theme='brand'] .callout { border: 1px solid var(--line); border-radius: 4px; background: var(--fill); padding: 24px 28px; margin: var(--sp-head) 0; } [data-theme='brand'] .srcnote { color: var(--muted); border-top: 1px solid var(--line-2); margin-top: 40px; padding-top: 12px; } [data-theme='brand'] .badge { border: 1px solid var(--accent); /* ピンクは線のみ */ border-radius: 100vmax; padding: 1px 12px; font-size: 12px; color: var(--ink); } [data-theme='brand'] .badge--off { border-color: var(--line-2); color: var(--muted); } /* STEP（ガイドの手順）。番号は Poppins Light 40・左の罫線は使わない */ [data-theme='brand'] .steps > li { border-left: 0; padding: 0 0 40px 76px; position: relative; } [data-theme='brand'] .steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -6px; font-size: 40px; font-weight: 300; letter-spacing: 0.02em; color: var(--ink-sub); margin: 0; } /* 最初のSTEPの番号にだけピンクの線を1本（規律：線・点のみ） */ [data-theme='brand'] .steps > li:first-child::after { content: ''; position: absolute; left: 2px; top: 52px; width: 34px; height: 1px; background: var(--accent); } [data-theme='brand'] .steps h3 { margin: 0 0 12px; font-size: 18px; } [data-theme='brand'] table.wt { font-size: 15px; } [data-theme='brand'] table.wt th, [data-theme='brand'] table.wt td { border: 1px solid var(--line-2); padding: 12px 14px; } [data-theme='brand'] table.wt th { background: var(--fill); font-weight: 500; color: var(--ink); } [data-theme='brand'] .deflist div { border-bottom: 1px solid var(--line-2); padding: 14px 0; } [data-theme='brand'] .deflist dt { color: var(--muted); } [data-theme='brand'] .deflist dd { color: var(--ink); } /* アコーディオン（FAQ・周辺一覧）。カード枠ではなく罫線1本で区切る */ [data-theme='brand'] .acc { border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; margin-bottom: 0; } [data-theme='brand'] .acc[open] { border-color: var(--line); } [data-theme='brand'] .acc__sum { min-height: 64px; padding: 18px 40px 18px 0; align-items: center; } [data-theme='brand'] .acc__sum::before { content: '＋'; left: auto; right: 4px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px; } [data-theme='brand'] .acc[open] > .acc__sum::before { content: '−'; } [data-theme='brand'] .acc[open] > .acc__sum { border-bottom: 0; } [data-theme='brand'] .acc__sum:active { background: var(--fill); } [data-theme='brand'] .acc__name { font-size: 17px; font-weight: 500; } [data-theme='brand'] .acc__meta { font-size: 14px; color: var(--muted); } [data-theme='brand'] .acc__body { padding: 0 0 28px; } [data-theme='brand'] .acc__catch { color: var(--muted); font-weight: 400; font-size: 14px; margin-bottom: 4px; } /* タクシーだけはカードとして立てる（一覧の上部で目立たせる） */ [data-theme='brand'] .acc--taxi { border: 1px solid var(--line); border-radius: 4px; background: var(--fill); margin-bottom: var(--sp-section); } [data-theme='brand'] .acc--taxi > .acc__sum { padding: 20px 44px 20px var(--sp-card); } [data-theme='brand'] .acc--taxi .acc__body { padding: 0 var(--sp-card) var(--sp-card); } /* ---------- スポットのQRコード（Phase 2.5 R3追補 §L） ---------- 「Googleマップで見る」ボタンとQRを横に並べる。QRは宿泊者ご自身のスマホで読み取るものなので、iPadがオフラインでも隠さない（ボタンだけが online-only）。 SVGは幅・高さ属性を持っているので、CSSが当たらなくても大きさは崩れない。 */ [data-theme='brand'] .maplink--qr { align-items: center; /* ボタンがQRの高さに引き伸ばされないように */ gap: 24px; margin-top: 20px; } [data-theme='brand'] .maplink__link { flex: 0 0 auto; /* QRのすぐ隣に置く（間を空けて離さない） */ } [data-theme='brand'] .maplink--qr .btn { white-space: nowrap; } [data-theme='brand'] .spotqr { display: flex; flex-direction: column; align-items: center; gap: 6px; /* 添え書き（お手持ちのスマートフォンで…）が変な位置で折り返さない幅 */ max-width: 240px; } [data-theme='brand'] .spotqr__code { display: block; padding: 6px; background: #ffffff; /* QRは白地・黒モジュールのまま（読み取り優先で反転させない） */ border: 1px solid var(--line); border-radius: 4px; line-height: 0; } [data-theme='brand'] .spotqr__svg { display: block; width: 140px; height: 140px; } [data-theme='brand'] .spotqr__note { margin: 0; text-align: center; line-height: 1.5; /* 2行になるときの折り返し位置を揃える（未対応ブラウザでは従来どおり） */ text-wrap: balance; } /* ========================================================================== フォーム（チェックアウトのアンケート・事前入力のkiosk埋め込み） ========================================================================== */ [data-theme='brand'] .input, [data-theme='brand'] select, [data-theme='brand'] textarea { min-height: 52px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 4px; background: rgba(0, 0, 0, 0.14); color: var(--ink); } [data-theme='brand'] .input::placeholder, [data-theme='brand'] textarea::placeholder { color: var(--muted); } [data-theme='brand'] .radios label { min-height: 44px; border: 1px solid var(--line-2); border-radius: 100vmax; padding: 0 18px; } [data-theme='brand'] .chips label { border: 1px solid var(--line); border-radius: 100vmax; background: transparent; padding: 8px 18px; color: var(--ink); } [data-theme='brand'] .check input, [data-theme='brand'] .radios input, [data-theme='brand'] .chips input { accent-color: #f1f1f1; } [data-theme='brand'] .field__label { color: var(--ink-sub); } [data-theme='brand'] .guestblock { border: 1px solid var(--line); border-radius: 4px; background: var(--fill); padding: var(--sp-card); } [data-theme='brand'] .guestblock__head { border-bottom: 1px solid var(--line-2); font-weight: 500; } /* ========================================================================== 08 AIカード（#243627 ＋ピンクの斜線1本）ワイヤーの `.tile--hero`（HOMEのAI導線）と、AIページの音声パネルに当てる。 ========================================================================== */ [data-theme='brand'] .aicard, [data-theme='brand'] a.tile--hero[href='/concierge/'], [data-theme='brand'] .voicepanel { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; background: var(--ai); } /* ピンクの斜線1本（線のみ・1箇所） */ [data-theme='brand'] .aicard::after, [data-theme='brand'] a.tile--hero[href='/concierge/']::after, [data-theme='brand'] .voicepanel::after { content: ''; position: absolute; right: 7%; top: -26px; width: 1px; /* 長さは px 固定。横長のHOMEカードでは角を横切る1本に、縦長の音声パネルでは右上のアクセントになる（面の縦横比が変わっても線1本の印象を保つ） */ height: 200px; background: var(--accent); transform: rotate(38deg); transform-origin: top center; pointer-events: none; } /* 右レール用のAIカード（ガイド横向き） */ [data-theme='brand'] a.aicard { display: block; padding: 20px 24px; color: var(--ink); text-decoration: none; } [data-theme='brand'] a.tile--hero[href='/concierge/'] { min-height: 140px; padding: 28px var(--sp-card); font-size: 22px; font-weight: 500; justify-content: center; } [data-theme='brand'] a.tile--hero[href='/concierge/'] .tile__sub { margin-top: 10px; color: var(--ink-sub); font-size: 15px; } [data-theme='brand'] .voicepanel { padding: var(--sp-card); } [data-theme='brand'] .voicebtn { width: 148px; height: 148px; border: 1px solid var(--line); background: transparent; color: var(--ink-sub); font-size: 15px; font-weight: 400; } [data-theme='brand'] .voicebtn[data-state='listening'] { background: var(--fill-2); border-style: dashed; } [data-theme='brand'] .voicestatus { color: var(--muted); font-size: 14px; } [data-theme='brand'] .voicetranscript { color: var(--muted); } /* チャット（「チャットで聞く」タブ。R3bで旧称「文字で聞く」から改名） ⚠️ Phase 3 R3 §2: 高さを 320px 固定 → **画面の高さに連れる値**に変えた（AZAMI「文字で聞くの高さを大きくしてタイムライン感を出したい」）。値の根拠と実測は「25 AIコンシェルジュ（Phase 3 R3）」の節に書いてある。 ⚠️ `.chatlog` はAIコンシェルジュのページでしか使っていない（他ページ波及なし）。 */ [data-theme='brand'] .chatlog { border: 1px solid var(--line); border-radius: 4px; background: var(--fill); padding: var(--sp-card); height: var(--chat-h); } [data-theme='brand'] .bubble { border: 1px solid var(--line-2); border-radius: 4px; padding: 14px 18px; line-height: 1.8; } [data-theme='brand'] .bubble--ai { background: rgba(255, 255, 255, 0.06); } [data-theme='brand'] .bubble--guest { background: transparent; } [data-theme='brand'] .bubble__who { color: var(--muted); letter-spacing: 0.06em; } [data-theme='brand'] .actioncard { border: 1px solid var(--line); border-radius: 4px; background: var(--fill); padding: 14px 18px; color: var(--ink); } [data-theme='brand'] .actioncard .btn { min-height: 44px; padding: 8px 24px; } [data-theme='brand'] .faqanswer { border-left: 2px solid var(--line); padding: 12px 0 12px 18px; } /* ========================================================================== 09 このページの目次（スタイル抽出v0.4 #18・#22）ガイド／FAQ の H1 直下に置く。AI導線を同じ枠の中に併記する。 ========================================================================== */ [data-theme='brand'] .toc { border: 1px solid var(--line); border-radius: 4px; background: var(--fill); padding: 24px var(--sp-card); margin: 0 0 var(--sp-section); } [data-theme='brand'] .toc__head { display: block; font-size: 13px; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 12px; } [data-theme='brand'] .toc__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 32px; } [data-theme='brand'] .toc__list a { display: flex; gap: 10px; align-items: baseline; min-height: 40px; padding: 6px 0; font-size: 16px; text-decoration: none; color: var(--ink); } [data-theme='brand'] .toc__list a::before { content: '›'; color: var(--muted); flex: none; } [data-theme='brand'] .toc__list a:active { color: var(--muted); } [data-theme='brand'] .toc__ai { margin: 16px 0 0; padding-top: 20px; border-top: 1px solid var(--line-2); } [data-theme='brand'] .toc__ai .btn { min-height: 52px; } /* ========================================================================== 10 追従ナビ（高さ80px・左=文字4項目／右=ボタン2個） ========================================================================== */ [data-theme='brand'] .bottomnav { height: var(--nav-h); align-items: center; gap: 8px; padding: 0 12px; border-top: 1px solid var(--line); background: var(--bg-deep); } [data-theme='brand'] .bottomnav__group { display: flex; align-items: center; min-width: 0; } [data-theme='brand'] .bottomnav__group--text { gap: 2px; min-width: 0; } [data-theme='brand'] .bottomnav__group--pill { margin-left: auto; gap: 10px; flex: none; } /* app.css の `.bottomnav button[data-reservation] { font-weight: 700 }` を解除し左群4項目のウェイトを揃える（R8レビュー指摘・Fable直修正）。 */ [data-theme='brand'] .bottomnav button[data-reservation] { font-weight: 400; } [data-theme='brand'] .bottomnav__item { display: flex; /* app.css の `.bottomnav a { flex: 1 }`（6枠均等）を解除する。均等割りだと長い項目（周辺の情報を調べる）が枠からあふれる。 */ flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; min-width: 44px; /* 810px幅（iPad縦）に 4項目＋ピル2個が収まるところまで詰める。測定: 文字群 379px ＋ピル群 349px ＋余白 36px = 764px < 810px */ padding: 0 6px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.3; letter-spacing: 0; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; } [data-theme='brand'] .bottomnav__icon { display: block; flex: none; color: var(--ink); } [data-theme='brand'] .bottomnav__item:active { color: var(--muted); } /* 現在地の項目。 ⚠️ Phase 2.5 R9 §5 では、目印（文言の下のピンク下線）を「20-b 現在地マーク」で当て、ここでは太さ（font-weight: 500）だけ持たせていた。 ★ R5f §4（2026-08-15・AZAMI指示）: **下部ナビでは現在地を視覚的に示さない** （「フッターはユーティリティであり、全体の位置関係を表現する場ではない」）。ピンク下線を 20-b から外したのに合わせ、**太さの差も戻す** ＝下部ナビは「どこにいても同じ見た目」になる。 ⚠️ `aria-current="page"` は残したまま（読み上げ・支援技術には現在地が伝わる）。 ⚠️ app.css の `.bottomnav a[aria-current="page"]`（塗り・影・太字）は、従来どおりここで打ち消す。 */ [data-theme='brand'] .bottomnav__item[aria-current='page'] { background: transparent; box-shadow: none; /* app.css の `font-weight: 700` を戻す。**他の項目と同じ値**にしたいので、数値を書かずに他の項目と同じ経路（`.bottomnav__item` の `font: inherit`）へ戻す — つまりここでは太さの上書きを持たない。 */ font-weight: inherit; } /* 右の2個はピル（AI=緑／チェックアウト=白枠）。アイコンは横並び */ [data-theme='brand'] .bottomnav__pill { flex-direction: row; gap: 8px; min-height: 52px; padding: 0 15px; border-radius: 100vmax; font-size: 14px; } [data-theme='brand'] .bottomnav__pill .bottomnav__icon { width: 20px; height: 20px; } [data-theme='brand'] .bottomnav__pill--ai { background: var(--ai); border: 1px solid rgba(255, 255, 255, 0.14); } [data-theme='brand'] .bottomnav__pill--outline { border: 1px solid var(--line); } [data-theme='brand'] .bottomnav__pill:active { background: var(--fill-2); color: var(--ink); } [data-theme='brand'] .bottomnav__pill--ai:active { background: #2c422f; } /* ---- チェックアウトの「〜11:00」（Phase 2.5 R8 §2）---- ヘッダーの白枠ピル（R6 §1）を廃止し、この位置＝チェックアウトボタンのラベルの**下**に小さく出す（時計アイコン付き）。 ⚠️ 既定は hidden（チェックイン済みの滞在があるときだけJSが外す）ので、 display は必ず `:not([hidden])` 側に書く。 ⚠️ タップは親のボタン（チェックアウトページへ遷移）が受ける＝この表示はイベントを取らない（pointer-events: none）。 */ [data-theme='brand'] .bottomnav__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } [data-theme='brand'] .bottomnav__time:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: 12px; line-height: 1.2; pointer-events: none; } [data-theme='brand'] .bottomnav__timeicon { width: 14px; height: 14px; flex: none; display: block; } [data-theme='brand'] .bottomnav__timetxt { font-family: var(--font-en); letter-spacing: 0.04em; } /* ========================================================================== 11 フッター（Phase 2.5 R3 §J で3ブロックに整理） ① ページメニュー（.appfoot__links・ナビと同じ6項目） ② 「DANDANへのご連絡（公式LINE）」ボタン1個（.appfoot__line） ③ ロゴ・施設名・住所（.appfoot__sign）撤去したもの: 緊急時のご案内ブロック（.appfoot__emg）・IGアイコン（.appfoot__ig）・「公式LINE」の添えラベル（.appfoot__linesub）＝**HTML側から消したのでブランド側のCSSも消してある**（phase2.css の土台側は不触＝未使用のまま残る）。 ========================================================================== */ [data-theme='brand'] .appfoot { margin: var(--sp-section) -24px 0; padding: 32px 24px 40px; border-top: 1px solid var(--line); background: var(--bg-deep); font-size: 14px; } [data-theme='brand'] .appfoot__links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-bottom: 28px; } [data-theme='brand'] .appfoot__links a, [data-theme='brand'] .appfoot__links button { display: inline-flex; align-items: center; min-height: 44px; border: 0; padding: 0; background: transparent; color: var(--ink-sub); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; } [data-theme='brand'] .appfoot__links a:active, [data-theme='brand'] .appfoot__links button:active { color: var(--muted); } [data-theme='brand'] .appfoot__row { align-items: center; gap: 16px 24px; } /* ② DANDANへのご連絡（公式LINE）。QRではなくボタン1個で、押すと公式LINEへ飛ぶ */ [data-theme='brand'] .appfoot__line { min-height: 52px; padding: 10px 28px; background: #f1f1f1; border-color: #f1f1f1; color: #2e2e2e; font-weight: 500; text-decoration: none; } [data-theme='brand'] .appfoot__sign { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 32px; } [data-theme='brand'] .appfoot__logo { display: block; color: var(--ink); opacity: 0.9; } /* ========================================================================== 12 ご予約内容モーダル（スタイル抽出v0.4 #19 / Figma F7）ワイヤーの「下から出るシート」を、背景暗転＋中央シートに変える。 ========================================================================== */ [data-theme='brand'] .sheetov { align-items: center; background: rgba(0, 0, 0, 0.62); padding: 24px 24px calc(var(--nav-h) + 24px); } [data-theme='brand'] .sheet { max-width: 762px; max-height: 74vh; border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 4px; background: #3a3a3a; color: var(--ink); } [data-theme='brand'] .sheet__head { border-bottom: 1px solid var(--line); padding: 20px var(--sp-card); background: #3a3a3a; font-size: 20px; font-weight: 500; } [data-theme='brand'] .sheet__close { min-height: 44px; padding: 8px 24px; border: 1px solid var(--line); border-radius: 100vmax; background: transparent; color: var(--ink); font-size: 14px; } [data-theme='brand'] .sheet__body { padding: 8px var(--sp-card) var(--sp-card); } [data-theme='brand'] .sheet__body h3 { margin: var(--sp-head) 0 12px; } /* オプションの行は枠付きの1行（Figma F7） */ [data-theme='brand'] .sheet .optlist li { border: 1px solid var(--line-2); border-radius: 3px; padding: 12px 18px; margin-bottom: 8px; } [data-theme='brand'] .sheet .optlist li + li { border-top: 1px solid var(--line-2); } [data-theme='brand'] .optlist .qty { font-weight: 500; font-family: var(--font-en); } [data-theme='brand'] .optcard { border: 1px solid var(--line); border-radius: 4px; background: var(--fill); padding: var(--sp-card); } [data-theme='brand'] .optcard__head { border-bottom: 1px solid var(--line-2); font-weight: 500; } /* ========================================================================== 写真・動画（MediaSlot） ⚠️ DOM属性（data-media-*）は不変。見た目だけを変える。 ========================================================================== */ [data-theme='brand'] .mslot__media { border: 0; border-radius: 3px; background: rgba(255, 255, 255, 0.06); } [data-theme='brand'] .mslot__cap { color: var(--muted); font-size: 12px; } [data-theme='brand'] .ph { border: 1px dashed var(--line-2); border-radius: 3px; background: rgba(255, 255, 255, 0.04); color: var(--muted); } [data-theme='brand'] .mslot__id { color: var(--muted); opacity: 0.8; } [data-theme='brand'] .qrph { border: 1px dashed var(--line-2); background: rgba(255, 255, 255, 0.04); color: var(--muted); } /* 公式LINEのQRは読み取れることが最優先＝白地のまま置く */ [data-theme='brand'] .lineqr__box { border: 1px solid var(--line); border-radius: 4px; background: var(--fill); padding: var(--sp-card); gap: var(--sp-card); } [data-theme='brand'] .lineqr__img { border: 0; border-radius: 3px; background: #fff; } [data-theme='brand'] .lineqr__hint { font-weight: 400; font-size: 16px; color: var(--ink-sub); } /* オフラインの帯 */ [data-theme='brand'] .offlinebar { border-bottom: 1px solid var(--line); background: var(--layer-darkest); color: var(--ink); padding: 10px 24px; } /* 開発ツール（PUBLIC_DEV_TOOLS=1 のときだけ存在する） */ [data-theme='brand'] .devtools { border: 1px dashed var(--line-2); border-radius: 4px; background: rgba(0, 0, 0, 0.16); color: var(--ink-sub); padding: 14px 16px; } /* ========================================================================== 13 ページ個別 ========================================================================== */ /* --- HOME: セクション末尾の「すべて見る」導線（Phase 2.5 R6 §5） --- 従ボタン（白枠ピル）のトーンで、右端に小さく置く。 */ [data-theme='brand'] .groupmore { display: flex; justify-content: flex-end; margin: 20px 0 0; } [data-theme='brand'] .groupmore .btn { min-height: 44px; padding: 10px 24px; font-size: 14px; } /* --- 周辺の情報を調べる: カテゴリチップを追従（スタイル抽出v0.4 #16） --- */ [data-theme='brand'] .filterbar { position: sticky; top: 72px; /* ヘッダーの高さ */ z-index: 14; margin: calc(var(--sp-section) * -1) -24px var(--sp-section); padding: 16px 24px 12px; background: var(--bg-deep); border-bottom: 1px solid var(--line); } [data-theme='brand'] .filterbar .toggles { margin: 0; gap: 10px; } [data-theme='brand'] .filterbar__note { margin: 8px 0 0; color: var(--muted); font-size: 12px; } [data-theme='brand'] .spotcount { color: var(--muted); } [data-theme='brand'] .acc__thumb { width: 64px; height: 64px; } /* --- 緊急時: 119/110 は Poppins で大きく。電話番号は小さく（v0.4 #20） --- */ [data-theme='brand'] .emgnum { font-size: 44px; font-weight: 300; line-height: 1.2; letter-spacing: 0.02em; margin: 4px 0 12px; } [data-theme='brand'] .emgtel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: var(--sp-head); padding-top: 20px; border-top: 1px solid var(--line-2); } [data-theme='brand'] .emgtel__label { flex-basis: 100%; font-size: 14px; color: var(--ink-sub); } [data-theme='brand'] .emgtel__num { font-family: var(--font-en); font-size: 20px; font-weight: 400; letter-spacing: 0.02em; text-decoration: none; } [data-theme='brand'] .emgtel__note { flex-basis: 100%; margin: 0; } /* ガイド内の連絡ブロックに添える1行も同じ扱い */ [data-theme='brand'] .ownertel { border-top: 1px solid var(--line-2); margin-top: 20px; padding-top: 16px; } [data-theme='brand'] .ownertel__num { font-family: var(--font-en); font-size: 20px; font-weight: 400; text-decoration: none; } /* --- CHECK-OUT ブロック（HOME）: 深い区画＋山並み1層 --- */ [data-theme='brand'] .checkoutblock { position: relative; overflow: hidden; margin-top: var(--sp-section); padding: var(--sp-card); border-radius: 4px; background-color: var(--bg-deep); background-image: url('/assets/brand-layer.svg'); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 62%; } [data-theme='brand'] .checkoutblock > * { position: relative; } [data-theme='brand'] .checkoutblock .sectionlabel { margin-top: 0; } [data-theme='brand'] .checkoutblock .btn { justify-content: space-between; } /* --- ガイド一覧: 別階層の導線帯（v0.4 #12） --- */ [data-theme='brand'] .guideexit { margin-top: var(--sp-section); padding-top: var(--sp-section); border-top: 1px solid var(--line-2); color: var(--ink-sub); } [data-theme='brand'] .guideexit__note { margin: 0 0 var(--sp-head); color: var(--muted); font-size: 13px; } [data-theme='brand'] .guideexit .sectionlabel { margin-top: var(--sp-head); } [data-theme='brand'] .guideexit__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; } [data-theme='brand'] .guideexit__list a { display: block; padding: 6px 0; text-decoration: none; font-size: 16px; } [data-theme='brand'] .guideexit__list .tile__sub { display: block; font-size: 13px; color: var(--muted); line-height: 1.6; } /* anatae は導線帯の直前に小型1行タイル（v0.4 #10） */ [data-theme='brand'] .tile--slim { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-height: 56px; padding: 14px 20px; margin-top: var(--sp-head); font-size: 16px; border-style: dashed; border-color: var(--line-2); background: transparent; } [data-theme='brand'] .tile--slim .tile__sub { font-size: 14px; } [data-theme='brand'] .tile--slim .tile__note { margin-left: auto; font-size: 13px; color: var(--muted); } /* --- ガイド本文: ヒーロー写真は本文の直前で全幅 --- */ [data-theme='brand'] .guidehero .mslot, [data-theme='brand'] .guidehero .mslot--filled { margin: 0 0 var(--sp-head); } /* --- ガイド一覧・アイキャッチ写真（Phase 2.5 R5 §3） --- ⚠️ MediaSlot（写真枠）ではなく素の。既存の素材ID（welcome-hero）を流用するだけなので **写真発注書の枠は増えない**（data-media-* を持たない）。 ⚠️ 実素材が無いときは HTML 自体を出さない＝空枠の点線は出ない。 */ [data-theme='brand'] .guideeyecatch { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 3px; margin: 0 0 var(--sp-head); background: rgba(255, 255, 255, 0.06); } /* --- FAQ: ジャンル見出し（v0.4 #17）＋ AI部の締めボタン（#21） --- */ [data-theme='brand'] .faqjump { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: var(--sp-section); } [data-theme='brand'] .faqjump h2 { margin: 0; } [data-theme='brand'] .faqsection { margin-top: var(--sp-head); } [data-theme='brand'] .faqgenre { margin-top: var(--sp-section); } [data-theme='brand'] .toc__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ========================================================================== 14 横向き（1080×810）— Figma F11（HOME 3カラム）・F12（ガイド＋右レール）ファーストビュー1画面分の成立が基準。縦向きの最適化を崩さない。 ========================================================================== */ @media (min-width: 1000px) and (max-height: 900px) { [data-theme='brand'] { --sp-section: 40px; --sp-card: 24px; --sp-gap: 16px; } [data-theme='brand'] .shell { max-width: 1080px; padding: 0 32px calc(var(--nav-h) + 24px); } [data-theme='brand'] .apphead { margin: 0 -32px 32px; padding: 10px 32px; min-height: 64px; } [data-theme='brand'] .appfoot { margin: 40px -32px 0; } [data-theme='brand'] h1 { font-size: 32px; margin-bottom: 12px; } [data-theme='brand'] h2 { font-size: 22px; margin-top: 32px; } /* --- HOME: 挨拶＋AIカードを上段2カラム、その下を3カラムに流す --- */ [data-theme='brand'] .homelead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } /* ファーストビュー（高さ810）にタイルまで入るよう、あいさつ側を詰める */ [data-theme='brand'] .homehero { margin-bottom: 0; } [data-theme='brand'] .homehero h1 { font-size: 30px; } [data-theme='brand'] .homehero .btnrow { margin: 16px 0 0; } [data-theme='brand'] .homegroups { columns: 3; column-gap: 24px; margin-top: 20px; } [data-theme='brand'] .homegroup { break-inside: avoid; -webkit-column-break-inside: avoid; } [data-theme='brand'] .homegroups .grid--2, [data-theme='brand'] .homegroups .grid--3 { grid-template-columns: 1fr; } [data-theme='brand'] .homegroups .tile { min-height: 84px; padding: 14px 18px; } [data-theme='brand'] .homegroups .tile--thumb .tile__thumb { display: none; /* 横向きの1画面に収めるため、サムネは畳む */ } [data-theme='brand'] .homegroups .sectionlabel { margin-top: 0; } [data-theme='brand'] .homegroup + .homegroup .sectionlabel { margin-top: 24px; } [data-theme='brand'] .checkoutblock { margin-top: 0; padding: 18px; } /* --- ガイド縦テンプレ: 本文＋右レール（目次・AI導線をレールへ・Figma F12） --- DOMは「リード → 目次 → 本文」の1通り。grid-template-areas で目次だけを右列へ移す（markupは触らない）。 */ [data-theme='brand'] .guidelayout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: 'lead rail' 'main rail'; gap: 0 32px; align-items: start; } [data-theme='brand'] .guidelayout__lead { grid-area: lead; } [data-theme='brand'] .guidelayout__main { grid-area: main; } [data-theme='brand'] .guidelayout__rail { grid-area: rail; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; } [data-theme='brand'] .guidelayout__rail .toc { margin: 0; padding: 20px 24px; } [data-theme='brand'] .guidelayout__rail .toc__list { grid-template-columns: 1fr; } [data-theme='brand'] .guidelayout__rail .toc__list a::before { content: '—'; } [data-theme='brand'] .guidelayout__rail .aicard { padding: 20px 24px; } [data-theme='brand'] .guidelayout__rail .aicard b { display: block; font-size: 17px; font-weight: 500; margin-bottom: 8px; } [data-theme='brand'] .guidelayout__rail .aicard .small { color: var(--ink-sub); } /* ガイド一覧の導線帯は横幅を活かす */ [data-theme='brand'] .guideexit { padding-top: 32px; margin-top: 32px; } } /* 縦向き（既定）では右レールは使わない＝1カラムのまま */ [data-theme='brand'] .guidelayout__rail .aicard { display: none; } @media (min-width: 1000px) and (max-height: 900px) { [data-theme='brand'] .guidelayout__rail .aicard { display: block; } } /* ========================================================================== 狭い画面（宿泊者向け画面をスマホで開いたときの保険） ========================================================================== */ @media (max-width: 760px) { [data-theme='brand'] .shell { padding: 0 16px calc(var(--nav-h) + 32px); } [data-theme='brand'] .apphead { margin: 0 -16px 40px; padding: 12px 16px; } [data-theme='brand'] .appfoot { margin: 40px -16px 0; padding: 24px 16px 32px; } [data-theme='brand'] h1 { font-size: 28px; } [data-theme='brand'] h2 { font-size: 21px; } [data-theme='brand'] .toc__list, [data-theme='brand'] .guideexit__list { grid-template-columns: 1fr; } [data-theme='brand'] .bottomnav { gap: 8px; padding: 0 10px; } [data-theme='brand'] .bottomnav__item { padding: 0 6px; font-size: 12px; } [data-theme='brand'] .bottomnav__pill { padding: 0 14px; font-size: 13px; } [data-theme='brand'] .appfoot__contact { margin-left: 0; } [data-theme='brand'] .appfoot__linesub { text-align: left; } } /* ========================================================================== 15 グレー残置（Phase 2.5 R2 §E-3）本文・説明・注記は白（--ink）へ引き上げた。ここに挙げた **装飾と状態表示だけ** は意図してグレー（--meta）のまま残している。増やすときはここに足すこと（＝レポートに出すグレー箇所の一覧がこのブロックで完結する）。 ========================================================================== */ /* ① ヘッダーの日付（時刻の添え物） */ [data-theme='brand'] .homeclock__date { color: var(--meta); } /* ② パンくず（現在地以外・区切り記号） */ [data-theme='brand'] .crumbs--head, [data-theme='brand'] .crumbs--head a, [data-theme='brand'] .crumbs--head .crumbs__sep { color: var(--meta); } /* ③ 入力欄のプレースホルダー（入力値と区別が必要） */ [data-theme='brand'] .input::placeholder, [data-theme='brand'] textarea::placeholder { color: var(--meta); } /* ④ 使えない状態（未設定のタイル・無効ボタン・OFFバッジ・写真の空枠） */ [data-theme='brand'] .btn[disabled], [data-theme='brand'] .btn--off, [data-theme='brand'] .tile--off, [data-theme='brand'] .badge--off, [data-theme='brand'] .ph { color: var(--meta); } /* ⑤ 記号だけの装飾（アコーディオンの▼・目次の—） */ [data-theme='brand'] .acc__sum::before, [data-theme='brand'] .toc__list a::before { color: var(--meta); } /* ⑥ 押したときの一瞬の反応（:active） */ [data-theme='brand'] .bottomnav__item:active, [data-theme='brand'] .appfoot__links a:active, [data-theme='brand'] .appfoot__links button:active, [data-theme='brand'] .appfoot__emg:active, [data-theme='brand'] .toc__list a:active, [data-theme='brand'] .crumbs--head a:active, /* R7 §1 → R8 §4: メニューの中のリンクを押したときの反応も同じ扱い（階層化に伴い .menusec__list → .menutree__link / .menusub a に変わった） */ [data-theme='brand'] .menutree__link:active, [data-theme='brand'] .menusub a:active { color: var(--meta); } /* ⑦ メニューの＋（開く）の記号（Phase 2.5 R8 §4）。 ⚠️ R7の区分見出し（.menusec__head）は階層化で無くなった＝グレー箇所が1つ減った。 ⚠️ 実測メモ（R9で気づいた点）: この指定は**効いていない**。下の「20 メニュー」の `.menutree__more { color: var(--ink) }` が後に来るため、実際の＋の色は**白（--ink）**（R8の時点からそうだった）。アコーディオンの＋（--meta＝グレー）に揃えたい場合は、20 側の color を --meta に変えるのが正しい直し方（ここを消しても見た目は変わらない）。 */ [data-theme='brand'] .menutree__more { color: var(--meta); } /* ========================================================================== 16 フォームのエラー表示（Phase 2.5 R2 §D-5） **ピンク文字**（ブランド面の機能色・ピンク規律のカウント外。申し送り§0・設計書§11の新規範）。線もピンクにして、色だけに頼らない（文言＋枠線＋aria-invalid の3点で伝える）。文字色は明るいピンク --accent-bright（#404040 上で 4.9:1）、枠線・下地はブランドピンク --accent のまま＝「注釈・文字を薄く（読みにくく）しない」原則によるFable裁定（R2レビュー）。 ========================================================================== */ [data-theme='brand'] .fielderr { color: var(--accent-bright); font-size: 14px; font-weight: 500; line-height: 1.7; } [data-theme='brand'] .input--err, [data-theme='brand'] .input[aria-invalid='true'] { border-color: var(--accent); background: rgba(255, 20, 147, 0.06); } [data-theme='brand'] .field__hint { color: var(--ink-sub); font-size: 13px; } [data-theme='brand'] .field__note { color: var(--ink); font-size: 13px; } /* 「必須」の印は**ピンクにしない**。宿泊者3名ぶん並ぶと十数個になり、ピンク規律（1画面2〜3箇所・線と点のみ）を壊す。ピンクはエラーだけに使う。 */ [data-theme='brand'] .field__label .req { color: var(--ink); font-size: 12px; } [data-theme='brand'] .inputunit__suffix { color: var(--ink); font-size: 15px; } /* ---- 選択状態がはっきり分かるラジオ・チェック（§D-4） ---- 選択中＝白地に反転（主ボタンと同じ扱い）。非選択＝25%白枠のまま。 */ [data-theme='brand'] .radios label { gap: 10px; color: var(--ink); transition: none; } [data-theme='brand'] .radios label.is-on { border-color: #f1f1f1; background: #f1f1f1; color: #2e2e2e; font-weight: 500; } [data-theme='brand'] .radios label.is-on input { accent-color: #2e2e2e; } [data-theme='brand'] .check.is-on { color: var(--ink); font-weight: 500; } /* ========================================================================== 17 チェックイン画面（Phase 2.5 R2 §A・§B・§E ／ R3 §A・§B・§C）ようこそ画面と統合した1画面。 R3 で足したもの: ・「まずはチェックインからお願いします」を**見出し級**に（.checkinlead）・ファーストビューの「チェックインをする」ボタン（.checkincta）・プログレスバー（.progress。1 名簿のご記入 → 2 入力内容の確認 → 3 チェックイン完了）・完了画面のチェックアウト予告（.checkoutnotice） ========================================================================== */ /* ---- ファーストビュー（§A-1・§A-2） ---- */ [data-theme='brand'] .checkinhello { margin-bottom: 8px; } /* 「まずはチェックインからお願いします」＝この画面でいちばん強い指示。 H1（お名前の挨拶）に次ぐ大きさで、リード文には見えない太さにする。 */ [data-theme='brand'] .checkinlead { margin: 0 0 var(--sp-head); font-size: 30px; font-weight: 500; line-height: 1.45; color: var(--ink); } [data-theme='brand'] .checkincta { margin: 0 0 var(--sp-section); } /* ---- プログレスバー（§B）---- 確認表示に切り替わると上の要素が消えるため、「いまどこか」を必ず見せる。現在地＝白地に反転（主ボタンと同じ扱い）／通過済み＝白の枠線＋チェック／これから＝薄い枠線。ピンクは使わない（規律の枠を使い切らないため）。 */ [data-theme='brand'] .progress { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp-card); padding: 0; } [data-theme='brand'] .progress__step { flex: 1 1 180px; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 100vmax; color: var(--ink); font-size: 15px; line-height: 1.4; } [data-theme='brand'] .progress__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--font-en); font-size: 14px; } [data-theme='brand'] .progress__step.is-done { border-color: var(--line); } [data-theme='brand'] .progress__step.is-now { border-color: #f1f1f1; background: #f1f1f1; color: #2e2e2e; font-weight: 500; } [data-theme='brand'] .progress__step.is-now .progress__num { border-color: #2e2e2e; background: #2e2e2e; color: #f1f1f1; } /* 確認モードでは名簿ブロックが画面の先頭に来る＝仕切り線と余白を落とす（§B） */ [data-theme='brand'] .checkinroster.is-confirm { border-top: 0; padding-top: 0; } /* 完了画面のチェックアウト予告（§C-2）。.done は中央寄せなので文字だけ左に戻す */ [data-theme='brand'] .checkoutnotice { margin: var(--sp-card) auto; max-width: 620px; text-align: left; } [data-theme='brand'] .checkoutnotice b { font-size: 19px; font-weight: 500; line-height: 1.6; } [data-theme='brand'] .checkoutnotice p { margin: 12px 0 0; } /* チェックイン後に館内案内が開くことのご案内（§B） */ [data-theme='brand'] .gatenote { margin: 0 0 var(--sp-card); padding: 14px 20px; border: 1px solid var(--line); border-left: 2px solid var(--accent); /* ピンクは線のみ（規律どおり） */ border-radius: 4px; background: var(--fill); color: var(--ink); font-size: 15px; } /* ご予約内容（人数・期間。オプションは出さない＝§A-2） */ [data-theme='brand'] .resblock { margin-bottom: var(--sp-card); } [data-theme='brand'] .resblock__head { margin: 0 0 20px; font-size: 20px; font-weight: 500; } [data-theme='brand'] .resblock__list { margin: 0; } [data-theme='brand'] .resblock__party b { font-size: 24px; font-weight: 500; } /* 公式LINEのQR（§A-3・「お困りのとき」枠はこの1か所に集約） */ [data-theme='brand'] .checkincontact { margin: 0 0 var(--sp-section); } [data-theme='brand'] .checkincontact h2 { margin-top: var(--sp-card); } [data-theme='brand'] .checkinroster { display: block; padding-top: var(--sp-card); border-top: 1px solid var(--line); } /* 最小フッター（§E-1）。施設名の1行だけ */ [data-theme='brand'] .appfoot--min { padding: 24px; } [data-theme='brand'] .appfoot--min .appfoot__sign { margin-top: 0; } /* ゲートが閉じているあいだは中身を見せない（リダイレクトが走るまでの一瞬）。 ⚠️ `data-gate` は lib/gate.ts と Base.astro のインラインスクリプトだけが付ける。 JSが動かない環境では属性が付かない＝**常に表示側に倒れる**（閉め出さない）。 */ html[data-gate='closed'] .shell, html[data-gate='closed'] .bottomnav { visibility: hidden; } /* ========================================================================== 18 iPad実寸での見切れ対策（Phase 2.5 R2 §C）症状（AZAMI・iPad実機）: ヘッダーのロゴが左端で、ホームピルが右端で切れる。原因になりうるもの: ① `.apphead` / `.appfoot` / `.bottomnav` を **負のマージンで全幅化**しているため、ビューポート幅 = shell の最大幅（810px）に一致すると左右の余白が「shell の padding ぶんだけ」に痩せ、少しでも中身が広がると横スクロール（＝端の切れ）に化ける。 ② 自己ホストのブランドフォントが**まだ来ていない一瞬**はシステムフォント（Hiragino 等）で描かれ、文字幅が数％広くなる。 810px 幅は元々ぎりぎりだったため、この差で溢れる。 ③ 表示を「拡大」にしたiPad・Split View では論理幅が 810px を下回る。対策（3つとも入れる）: ・横方向のはみ出しを **絶対に許さない**（overflow-x: clip）・左右の内側余白を `max(…, env(safe-area-inset-*))` で必ず確保・900px 以下ではヘッダー／ナビの寸法を1段詰め、それでも足りないときは**ロゴを縮め、文字は縮めない**（可読性優先） ========================================================================== */ html[data-theme='brand'], [data-theme='brand'] body { max-width: 100%; /* clip は「スクロール可能にしない」＝ position:sticky を壊さない（hidden と違う） */ overflow-x: clip; } [data-theme='brand'] .apphead, [data-theme='brand'] .appfoot { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } [data-theme='brand'] .bottomnav { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); /* 中身が広がっても端で切らない（最終防衛線） */ overflow: hidden; } /* ヘッダーの中身は「縮んでよいもの／縮ませないもの」を明示する */ [data-theme='brand'] .apphead__brand, [data-theme='brand'] .apphead__actions, [data-theme='brand'] .apphead__meta { flex: 0 0 auto; } [data-theme='brand'] .crumbs--head { flex: 0 1 auto; min-width: 0; } @media (max-width: 900px) { /* iPad縦（810px）とその前後。文字サイズは落とさず、余白と図形で吸収する */ [data-theme='brand'] .apphead { gap: 6px 14px; padding-top: 12px; padding-bottom: 12px; } [data-theme='brand'] .apphead__logo { width: 104px; height: 19px; /* 792:146 の比率を保つ（SVGのwidth/height属性を上書きする） */ } /* ⚠️ R8 §1: アイコンのみのホームピル（44×44）は詰めない＝そのまま */ [data-theme='brand'] .apphead__home:not(.apphead__home--icon) { padding: 0 14px; } [data-theme='brand'] .apphead__meta { gap: 8px; font-size: 20px; } [data-theme='brand'] .bottomnav { gap: 6px; } [data-theme='brand'] .bottomnav__item { padding: 0 4px; } [data-theme='brand'] .bottomnav__group--pill { gap: 8px; } [data-theme='brand'] .bottomnav__pill { padding: 0 13px; } } /* ========================================================================== 19 ページ遷移のフェード（Phase 2.5 R6 §2） ★ なぜCSSを自分で書くのか Astro の ClientRouter を入れただけでは、 ①`prefers-reduced-motion` でのアニメ停止 ②View Transitions 非対応ブラウザ用のフェード（fallback="animate"）が **付いてこない**（Astro が同梱している `viewtransitions.css` は `transition:animate` を書いたときだけバンドルされる。本実装では要素ごとの transition 名を使っていないため入らない＝ビルド成果物を grep して確認済み）。そこで同じ役目のCSSをここに置く。 ★ 2系統 ① View Transitions 対応（iPadOS 18.2+ / Chrome）… ルートのクロスフェードの速さだけ整える（既定のクロスフェードをそのまま使う＝スライド等はしない） ② 非対応 … ルータがに `data-astro-transition-fallback="old" / "new"` を付けるので、その間だけ body をフェードさせる ⚠️ body をフェードさせるので、下から白が出ないように html にも地の色を敷く。 ========================================================================== */ html[data-theme='brand'] { background-color: var(--bg); } @media (prefers-reduced-motion: no-preference) { /* ① 対応ブラウザ: 既定のクロスフェードの長さだけ指定する */ html[data-theme='brand']::view-transition-old(root) { animation-duration: 180ms; animation-timing-function: ease-out; } html[data-theme='brand']::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: ease-out; } /* ② 非対応ブラウザ: ルータのフォールバック属性に合わせて body をフェード */ html[data-theme='brand'][data-astro-transition-fallback='old'] body { animation: dwFadeOut 180ms ease-out both; } html[data-theme='brand'][data-astro-transition-fallback='new'] body { animation: dwFadeIn 220ms ease-out both; } } @keyframes dwFadeOut { to { opacity: 0; } } @keyframes dwFadeIn { from { opacity: 0; } } /* ★ 動きを控えたい設定のときは、フェードを**一切**かけない（Astro 同梱CSSと同じ止め方。遷移そのものは従来どおり動く＝瞬時に切り替わる） */ @media (prefers-reduced-motion: reduce) { html[data-theme='brand']::view-transition-group(*), html[data-theme='brand']::view-transition-old(*), html[data-theme='brand']::view-transition-new(*) { animation: none !important; } html[data-theme='brand'][data-astro-transition-fallback] body, html[data-theme='brand'] [data-astro-transition-scope] { animation: none !important; } } /* ========================================================================== 20 メニュー（Phase 2.5 R7 §1）ヘッダーのホームピルの右にあるボタンから開く、全ページの一覧。 ★ ブランド規範の中で作る（ダーク面 --bg-deep ／ヘアライン --line ／完全ピル 100vmax ／タップ領域44px以上）。 ★ 開閉は `hidden` 属性の付け外しで行う。 ⚠️ Phase 2.5 R9 §2: これに**フェード**が乗った（ご予約内容モーダルと同じトーン）。アニメーションの定義は下の「23 開閉のフェード」に置いてある（③）。 `prefers-reduced-motion: reduce` では従来どおり即座に開閉する。 ⚠️ 既定は hidden なので、display は必ず `:not([hidden])` 側に書く。 ========================================================================== */ /* ---- ヘッダーのボタン（ホームピルの右・白枠の丸）---- ⚠️ Phase 2.5 R8 §1: **常にアイコンのみ**（R7では700px以下だけアイコンにしていた）。 44×44 の丸枠＝ホームピル（.apphead__home--icon）と同じ大きさ・同じトーン。文字は HTML の aria-label に残してある（読み上げでは「メニュー」と読まれる）。 */ [data-theme='brand'] .apphead__menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; flex: none; border: 1px solid var(--line); border-radius: 100vmax; background: transparent; color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer; } [data-theme='brand'] .apphead__menu:active, [data-theme='brand'] .apphead__menu[aria-expanded='true'] { background: var(--fill); } [data-theme='brand'] .apphead__menuicon { width: 20px; height: 20px; flex: none; display: block; } /* ---- オーバーレイ（背景タップで閉じる面）---- */ [data-theme='brand'] .menuov:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 60; /* 追従ナビ（10）・チェックアウト表示（20）より上 */ justify-content: flex-end; background: rgb(0 0 0 / 55%); } /* ---- パネル（右側から出る。iPad縦でも本文が隠れない幅）---- */ [data-theme='brand'] .menupanel { display: flex; flex-direction: column; width: min(420px, 92vw); max-height: 100%; background: var(--bg-deep); border-left: 1px solid var(--line); padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); } [data-theme='brand'] .menupanel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 14px 20px; border-bottom: 1px solid var(--line); } [data-theme='brand'] .menupanel__title { font-family: var(--font-en); font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } [data-theme='brand'] .menupanel__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 100vmax; background: transparent; color: var(--ink); cursor: pointer; } [data-theme='brand'] .menupanel__close:active { background: var(--fill-2); } [data-theme='brand'] .menupanel__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); } /* ---- 重要動線（AIコンシェルジュ・チェックアウト）---- */ [data-theme='brand'] .menupanel__primary { display: grid; gap: 12px; margin-bottom: 28px; } [data-theme='brand'] .menupill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 20px; border-radius: 100vmax; color: var(--ink); font-size: 16px; text-decoration: none; } [data-theme='brand'] .menupill__icon { width: 22px; height: 22px; flex: none; display: block; } [data-theme='brand'] .menupill--ai { background: var(--ai); border: 1px solid rgba(255, 255, 255, 0.14); } [data-theme='brand'] .menupill--outline { border: 1px solid var(--line); } [data-theme='brand'] .menupill--ai:active { background: #2c422f; } [data-theme='brand'] .menupill--outline:active { background: var(--fill-2); } /* ---- 階層アコーディオン（Phase 2.5 R8 §4・こうのす共生病院スタイル）---- 1行＝1ページへのリンク。配下があるものだけ行の右端に **＋** が付き、押すと下に配下の一覧が開く（＋は −に変わる）。 ★ リンクと＋は別の要素で、**タップ領域が重ならない**（＋は48×48）。 ★ 開閉は `hidden` 属性だけ（アニメーションを持たない）。 ⚠️ R7の「区分見出し（.menusec__head）＋フラットな19リンク」は廃止した。 */ [data-theme='brand'] .menutree { list-style: none; margin: 0; padding: 0; } [data-theme='brand'] .menutree__item + .menutree__item { border-top: 1px solid var(--line-2); } [data-theme='brand'] .menutree__row { display: flex; align-items: stretch; gap: 4px; } [data-theme='brand'] .menutree__link { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 12px 4px; border: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 500; line-height: 1.5; text-align: left; text-decoration: none; cursor: pointer; } [data-theme='brand'] .menutree__link:active { color: var(--meta); } [data-theme='brand'] .menutree__link[aria-current='page'] { font-weight: 500; } /* ＋（開く）／−（閉じる）。文字は content で出す＝アイコン素材を増やさない。 ⚠️ Phase 2.5 R9 §3（AZAMI指示）: **丸枠をやめて記号だけ**にした（枠があるとボタンが主張して、行のリンクより目立ってしまう）。 48×48 のタップ領域は**透明のまま維持**する（44px以上）。 */ [data-theme='brand'] .menutree__more { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; min-height: 48px; align-self: center; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: 18px; line-height: 1; cursor: pointer; } [data-theme='brand'] .menutree__more::before { content: '＋'; } [data-theme='brand'] .menutree__more[aria-expanded='true']::before { content: '−'; } /* 押したとき・開いているときは記号を白く（下地は敷かない＝枠が復活して見えるため） */ [data-theme='brand'] .menutree__more:active, [data-theme='brand'] .menutree__more[aria-expanded='true'] { background: transparent; color: var(--ink); } /* ---- 配下の区分見出し（Phase 2.5 R9 §4）---- ガイド一覧と同じ区分（( GREETING ) ／ ( STAY ) ／ ( ENJOY )）でまとめる。 **リンクではない小さな区分ラベル**なのでタップ領域を持たない。 ⚠️ ピンクは使わない（メニュー内では区分が3つ並ぶうえ、現在地の下線＝ピンクと役目がぶつかる）。括弧ラベルのトーン（英字＋字間広め）だけ借りて、色は白（--ink）＋添え字グレー（--meta）にしている。 */ [data-theme='brand'] .menusub__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 14px 4px 6px; } [data-theme='brand'] .menusub__head:first-child { padding-top: 4px; } [data-theme='brand'] .menusub__lbl { font-family: var(--font-en); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); } [data-theme='brand'] .menusub__lbl::before { content: '{ '; } [data-theme='brand'] .menusub__lbl::after { content: ' }'; } [data-theme='brand'] .menusub__note { font-size: 12px; color: var(--meta); } /* ---- 配下の一覧（＋で開く） ---- */ [data-theme='brand'] .menusub:not([hidden]) { display: block; list-style: none; margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 1px solid var(--line-2); } [data-theme='brand'] .menusub > li { margin: 0; } [data-theme='brand'] .menusub a { display: flex; align-items: center; min-height: 44px; padding: 8px 4px; color: var(--ink); font-size: 15px; line-height: 1.6; text-decoration: none; } [data-theme='brand'] .menusub a:active { color: var(--meta); } /* ========================================================================== 20-b 現在地マーク（Phase 2.5 R9 §5・AZAMI指示） ★ 変えた理由 R8までは項目の**左に短いピンクの線**を置いていたが、行が1段下がって見える（＝配下の項目のように読める）ため廃止した。 ★ 新しい方式 … **文言の下にピンクの下線**（text-decoration の下線なので文字の幅ぴったりに付く＝行全体を塗らない）。ピンクは「線・点のみ」の規律の中（面で塗らない）。 ★ ナビ・メニュー（トップ行・配下の行）で**同じ見た目**に統一する。 `aria-current="page"` は従来どおり付いたまま（読み上げは変わらない）。 ⚠️ ヘッダーのホーム（.apphead__home）は**文字を持たないアイコンボタン**なので下線を引けない。従来どおり丸枠の中を薄く塗って現在地を示す（R8のまま）。 ★ R5f §4（2026-08-15・AZAMI指示）: **下部ナビ（.bottomnav）からは外した**。理由（AZAMI）「フッターはユーティリティであり、全体の位置関係を表現する場ではない」。 ⚠️ 消したのは**見た目だけ**。`aria-current="page"` は従来どおり付いたまま（読み上げでは「現在のページ」と伝わる）＝HTML側は1文字も変えていない。 ⚠️ メニュー（.menutree / .menusub）とヘッダーは**そのまま**（申し送り§4「不触」）。 ========================================================================== */ [data-theme='brand'] .menutree__link[aria-current='page'], [data-theme='brand'] .menusub a[aria-current='page'] { text-decoration: underline; /* Safari 16 以前は接頭辞つきの書き方しか解さないので両方書く */ -webkit-text-decoration-color: var(--accent); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; } /* ========================================================================== 21 狭い幅でヘッダーを1段に保つ（Phase 2.5 R7 §8.5-3） R6の実測で「700px（iPadの拡大表示・Split View 想定）では `/concierge/` だけヘッダーが2段になる」ことが分かっていた（パンくず＋時計＋チェックアウト表示＋ホームピルで最も混み合う面）。R7ではメニューのボタンが1つ増えるため、 **手当てをしないと 810px（iPad実寸）でも2段になる**（実測で確認）。 ★ 折り返しの本当の原因（実測して分かったこと） flex の行分割は、各要素の **max-content**（＝縮む前の幅）で決まる。パンくずは `flex: 0 1 auto` で「縮める」設定だが、行分割の判定では max-content（実測約225px）で数えられるため、**縮む前に行が割れる**。 ★ 3段構えの手当て（幅が狭くなる順に効かせる。**必要になった幅からだけ**効かせる） ① 900px以下 … パンくずを `flex: 1 1 0` にして、**行分割の判定に幅を持ち込ませない** （余った幅ぶんだけ伸びる／足りなければその場で切る）。ページ名はすぐ下の括弧ラベル（( AI CONCIERGE ) AIコンシェルジュ）にも出るので情報は残る。 → これだけで **810px（iPad実寸）・750px は1段に戻る**（実測）。 ② 800px以下 … 時計の**日付**を隠す（申し送り§8.5-3 の選択肢①）。 810px（iPad実寸）では従来どおり日付を出す＝R6の見た目を守る。 ③ 700px以下 … メニューボタンを**アイコンだけ**にする（文字は読み上げに残す）。 R6で「700pxだけ2段」と報告していた幅。ここまで来ると文字の置き場所が無い。 ⚠️ 実測（/ /guide/ /concierge/ /local/ /about/ /checkout/ /guide/sauna/ × 1080 / 900 / 810 / 750 / 700 / 680px）: **すべて1段（72px以下）・横溢れ0**。＝ R6で残っていた「700pxの2段」もこの回で解消した。 ========================================================================== */ @media (max-width: 900px) { /* ① パンくずは「行を折らずに縮む」側にする */ [data-theme='brand'] .crumbs--head { flex: 1 1 0; min-width: 0; overflow: hidden; flex-wrap: nowrap; } } @media (max-width: 800px) { /* ② 時計の日付を隠す（時刻は残る。日付はチェックアウト表示にも出る） */ [data-theme='brand'] .homeclock__date { display: none; } } /* ③（R7）700px以下でメニューをアイコンだけにする手当ては、 **Phase 2.5 R8 §1 で全幅に格上げ**した（「20 メニュー」の .apphead__menu が常に44×44のアイコンボタン）。ホームピルも家アイコンのみになったので、ヘッダーの実測幅はR7よりさらに小さい＝この幅専用の手当ては要らなくなった。 */ /* ========================================================================== 22 お出かけ 3つのポイント（Phase 2.5 R7 §4）ページ下部の3カラムカードを、**タクシーと同じカード型アコーディオン**にしてタクシーの直下へ移した（AZAMI指示）。見た目はタクシーに揃える。 ⚠️ 2枚が続くので、あいだの余白だけ詰める（`:has` 非対応の端末では従来どおりの広い余白になるだけ＝崩れない）。 ========================================================================== */ [data-theme='brand'] .acc--odekake { border: 1px solid var(--line); border-radius: 4px; background: var(--fill); margin-bottom: var(--sp-section); } [data-theme='brand'] .acc--odekake > .acc__sum { padding: 20px 44px 20px var(--sp-card); } [data-theme='brand'] .acc--odekake .acc__body { padding: 0 var(--sp-card) var(--sp-card); } [data-theme='brand'] .acc--odekake .acc__body .grid { margin-top: 0; } /* ⚠️ Phase 2.5 R8 §5（AZAMI指示）: 3カラムをやめて**縦積み**にした。 `.grid--odekake` は列指定を持たない＝`.grid` の1カラムのまま（gap は --sp-gap）。横向き（1080×810）でも縦積みのままにする＝POINTは順に読むものなので、横に並べると1枚1枚が細くなって本文が読みにくい。 */ [data-theme='brand'] .grid--odekake { grid-template-columns: minmax(0, 1fr); } [data-theme='brand'] .acc--taxi:has(+ .acc--odekake) { margin-bottom: 12px; } /* ========================================================================== 23 開閉のフェード（Phase 2.5 R8 §6） ★ 対象 ① ご予約内容モーダル（.sheetov）… 開く/閉じるとも ② アコーディオン（.acc）… FAQ が指示の対象。**ガイドのタクシー・お出かけ・周辺一覧のスポット行も同じ `.acc` なので挙動を揃えた**（申し送り§6の許可） ③ ハンバーガーメニュー（.menuov）… **Phase 2.5 R9 §2 で追加**。「予約内容モーダルと同じトーン」の指示なので、**同じキーフレーム（dwSheetIn / dwSheetOut）・同じ長さ（200ms / 180ms）**を当てている ★ 仕組み・開くとき … CSSのフェードイン（`[open]` / `.is-open` になった瞬間に走る）・閉じるとき … `

` と `display:none` は即座に消えるので、 Base.astro のJSが**フェードアウトのあいだだけ**印（`data-dw-closing` / `.is-closing`）を付け、終わってから閉じる ⚠️ `prefers-reduced-motion: reduce` では**アニメーションを一切かけない** （JS側も待たずに即座に閉じる＝従来の動きに戻る）。 ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* ① ご予約内容モーダル */ [data-theme='brand'] .sheetov.is-open:not(.is-closing) { animation: dwSheetIn 200ms ease-out both; } [data-theme='brand'] .sheetov.is-closing { animation: dwSheetOut 180ms ease-out both; } /* ② アコーディオン（中身だけをフェードさせる＝枠は動かさない） */ [data-theme='brand'] .acc[open] > .acc__body { animation: dwAccIn 200ms ease-out both; } [data-theme='brand'] .acc[data-dw-closing='1'] > .acc__body { animation: dwAccOut 180ms ease-out both; } /* ③ ハンバーガーメニュー（R9 §2）。オーバーレイ全体（暗転＋パネル）をモーダルと同じキーフレームでフェードさせる＝同じトーンになる。 ⚠️ 閉じるときは Base.astro のJSが `.is-closing` を付け、180ms 後に `hidden` にする（`hidden` を先に付けるとアニメーションが見えない）。 */ [data-theme='brand'] .menuov:not([hidden]):not(.is-closing) { animation: dwSheetIn 200ms ease-out both; } [data-theme='brand'] .menuov.is-closing { animation: dwSheetOut 180ms ease-out both; } } @keyframes dwSheetIn { from { opacity: 0; } } @keyframes dwSheetOut { to { opacity: 0; } } @keyframes dwAccIn { from { opacity: 0; } } @keyframes dwAccOut { to { opacity: 0; } } /* ========================================================================== 24 余白の総点検（Phase 2.5 R8 §7） ★ 直った症状（AZAMI指摘・スクショ2枚） ① HOMEの ( CHECK-OUT )「チェックアウトする」ボタンと下の注記がくっついていた ② 周辺一覧のスポット行（写真枠・店名＋おすすめバッジ・説明文）が詰まっていた ★ 原因（実測して分かった共通の理由） `[data-theme='brand'] p { margin: 0 0 16px }` は**下だけ**に余白を持つ。 `.applaunch__back { margin-top: 10px }` のような**クラス側の margin-top は詳細度で負ける**ため、ボタン・表・カードの直後に来る注記は 0px で貼り付く。＝個別に直すのではなく「**直前が何か**」で余白を決める規則をここに置く。 ★ 値は既存トークンのみ（--sp-gap 20px / --sp-label 12px）。新しい寸法は作らない。 ⚠️ 12px（--sp-label 相当）で意図的に詰めている箇所＝括弧ラベル→H1・区分ラベル→タイル群・見出し→本文・目次の見出し→項目は**触っていない** （デザインの詰まりではなく、設計どおりの近さ）。 ========================================================================== */ /* ---- ① ボタン（行）の直後に来る注記 ---- */ [data-theme='brand'] .btn + p, [data-theme='brand'] .btnrow + p, [data-theme='brand'] .applaunch__row + p, [data-theme='brand'] .applaunch__row + .applaunch__back { margin-top: var(--sp-gap); } /* ボタンと同じ行に折り返して入る注記（プロジェクターの「※ …開けません」） */ [data-theme='brand'] .applaunch__row .btn + .applaunch__note { margin-top: var(--sp-label); } /* ---- ② 表・定義リスト・カード群・QRブロックの直後に来る段落 ---- */ [data-theme='brand'] table.wt + p, [data-theme='brand'] .deflist + p, [data-theme='brand'] .grid + p, [data-theme='brand'] .card + p, [data-theme='brand'] .lineqr + p { margin-top: var(--sp-gap); } /* ---- ③ カードが2枚続くとき（枠線が接して1枚に見えていた） ---- ⚠️ `.grid` の中のカードは **gap** で間が空いているので対象外にする（margin を足すと多列グリッドで2行目以降がずれる）。 */ [data-theme='brand'] :not(.grid) > .card + .card { margin-top: var(--sp-gap); } /* ---- ④ アコーディオンを開いたとき、見出し行と中身が接していた ---- */ [data-theme='brand'] .acc__body { padding-top: var(--sp-label); } [data-theme='brand'] .acc--taxi .acc__body, [data-theme='brand'] .acc--odekake .acc__body { padding-top: var(--sp-label); } /* 畳んだ見出し行が2行になるとき（名前↓添え字）の行間 */ [data-theme='brand'] .acc__sum { row-gap: 8px; } /* ---- ⑤ 周辺一覧のスポット行（AZAMI指摘②） ---- 写真枠 ↔ 文字を離し、キャッチ ↔ 店名の行間を空け、「おすすめ」バッジが店名にくっつかないようにする。 */ [data-theme='brand'] .acc--spot > .acc__sum { gap: 20px; padding-top: 20px; padding-bottom: 20px; } [data-theme='brand'] .acc--spot .acc__catch { margin-bottom: 8px; } [data-theme='brand'] .acc--spot .acc__line { gap: 8px 16px; } [data-theme='brand'] .acc__name .badge { margin-left: 10px; } /* ---- ⑥ 数値・値の直後に来る注記（電話番号・Wi-Fiパスワード） ---- */ [data-theme='brand'] .emgtel__note, [data-theme='brand'] .ownertel__note, [data-theme='brand'] .wifipw__hint { margin-top: 8px; } /* ---- ⑦ AIパネルの2行（準備中の説明 ↔ 例文） ---- */ [data-theme='brand'] .voicestatus { margin-bottom: 8px; } /* ========================================================================== 25 AIコンシェルジュ（Phase 3 R3・AZAMI実機フィードバック） ★ この節で足したもの（**AIコンシェルジュのページ以外には1つも当たらない**） ① `.chattabs` / `.chattab` … 「チャットで聞く／会話で聞く」のタブ（＋R3b: `.chattab__icon` / `.chattab__label`） ② `.chatpanel` … タブの中身（表示を切り替えるだけ・DOMは残す） ③ `--chat-h` … チャット窓の高さ（08節の `.chatlog` が使う） ④ `.typing` … 回答を待つあいだの3点の合図 ⑤ 吹き出し・カードの出現アニメーション（下からふわっと） ⚠️ 使っているセレクタは `.chatlog` `.chattabs` `.chattab`（`__icon` / `__label`） `.chatpanel` `.typing` と、 **`.chatlog` の直下に限った** `.bubble` / `.actioncard` / `.btnrow` だけ。いずれも `pages/concierge/index.astro` にしか出てこない（他ページ波及なし）。 ⚠️ 色・寸法は既存トークン（--accent / --ink / --ink-sub / --muted / --line）のみ。新しい色は1つも作っていない。外部ライブラリも使っていない。 ⚠️ `prefers-reduced-motion: reduce` では**動きを一切かけない** （出現はそのまま表示・待ちの合図は「考えています…」の文字に戻る）。 ========================================================================== */ /* ---- ③ チャット窓の高さ ---- ★ 決め方（申し送り §2「iPad縦でチャット窓が画面の6割程度・入力欄と質問例が同一画面内」）館内iPadの縦は 810×1080。ヘッダー・見出し・説明文・タブ・入力欄・質問例・追従ナビを引いた残りが、チャット窓に使える高さになる。 `60vh`（＝648px）だと質問例が画面の外へ出てしまうため、**両方を満たす最大**として `52vh` を採った（1080px の画面で 562px ＝画面の52%）。実測値は IMPLEMENTATION_NOTES の R3 の節に記録している。 ★ 上限・下限を付けている理由横向き（1080×810）では 52vh＝421px と小さくなりすぎず、大きな画面では間延びしないように 320〜620px の間に収める。 */ [data-theme='brand'] { --chat-h: clamp(320px, 52vh, 620px); } /* ---- ① タブ ---- 現在のタブの目印は、ナビ・メニューと同じ**文字の下のピンク下線** （「20-b 現在地マーク」と同じ書き方＝画面の中で表現がぶれない）。 ★ R3b: ラベルの左に線画アイコン（吹き出し／マイク）を足した。 - アイコンは `BrandMark`（ナビと同じ部品）＝24グリッド・stroke 1.5・currentColor。 **色は指定しない**＝タブの文字色（未選択 --ink-sub ／選択 --ink）にそのまま追従する。 ⚠️ ナビの `.bottomnav__icon` は `color: var(--ink)` を持つが、ここでは**持たせない** （選択状態でアイコンだけ色が残ってしまうため）。 - 大きさ 22px は、同じ「アイコン＋ラベルを横に並べる」メニューのピル（`.menupill__icon` 22px／文字16px）に合わせた。文字は18pxなので、ナビのピル（20px／文字14px）より一段大きいこちらが釣り合う。 - 隙間 10px も `.menupill`（gap 10px）と同じ。 ★ ピンクの下線は **`.chattab__label` に付ける**（アイコンまで線が伸びない）。「20-b 現在地マーク」の『文字の幅ぴったりに付く＝行全体を塗らない』と同じ考え方で、ナビ（`.bottomnav__label` に付ける）とも揃う。 */ [data-theme='brand'] .chattabs { display: flex; gap: 32px; margin: 20px 0 0; border-bottom: 1px solid var(--line); } [data-theme='brand'] .chattab { appearance: none; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 2px 14px; border: 0; background: transparent; color: var(--ink-sub); font: inherit; font-size: 18px; font-weight: 400; letter-spacing: 0.02em; cursor: pointer; } [data-theme='brand'] .chattab__icon { width: 22px; height: 22px; flex: none; display: block; } [data-theme='brand'] .chattab[aria-selected='true'] { color: var(--ink); font-weight: 500; } [data-theme='brand'] .chattab[aria-selected='true'] .chattab__label { text-decoration: underline; /* Safari 16 以前は接頭辞つきの書き方しか解さないので両方書く */ -webkit-text-decoration-color: var(--accent); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; } [data-theme='brand'] .chattab:active { color: var(--ink); } /* ---- ② タブの中身 ---- */ [data-theme='brand'] .chatpanel { margin-top: 20px; } /* ---- ④ 回答を待つあいだの合図（3点のパルス） ---- */ [data-theme='brand'] .typing { display: inline-flex; align-items: center; gap: 7px; min-height: 1.8em; } [data-theme='brand'] .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-sub); opacity: 0.3; } [data-theme='brand'] .typing__text { color: var(--muted); } /* ---- ⑤ 動きのある表現（reduced-motion では一切かけない） ---- */ @media (prefers-reduced-motion: no-preference) { /* 吹き出し・ご案内カードが**下からふわっと**現れる（10px・200ms）。長さとイージングはモーダル／メニューのフェード（dwSheetIn 200ms ease-out）に揃えた。 */ [data-theme='brand'] .chatlog > .bubble, [data-theme='brand'] .chatlog > .actioncard, [data-theme='brand'] .chatlog > .btnrow { animation: dwBubbleIn 200ms ease-out both; } /* 待っているあいだは点が順に灯る。文字のほうは出さない */ [data-theme='brand'] .typing__text { display: none; } [data-theme='brand'] .typing i { animation: dwTypingPulse 1200ms ease-in-out infinite; } [data-theme='brand'] .typing i:nth-child(2) { animation-delay: 160ms; } [data-theme='brand'] .typing i:nth-child(3) { animation-delay: 320ms; } } /* 動きを控える設定のときは、点を出さず「考えています…」の文字だけにする（＝R2までと同じ見え方。何も起きていないように見えないようにする） */ @media (prefers-reduced-motion: reduce) { [data-theme='brand'] .typing i { display: none; } } @keyframes dwBubbleIn { from { opacity: 0; transform: translateY(10px); } } @keyframes dwTypingPulse { 0%, 70%, 100% { opacity: 0.3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } } /* ========================================================================== 26 会話で聞く（Phase 4 R1・音声会話の本稼働） ★ この節で足したもの（**AIコンシェルジュのページ以外には1つも当たらない**） ① `.voiceactions` … 「停止 / 終了する」の2つ（`.btnrow` を音声パネルの中で中央に） ② `.voicetimer` … 経過と「あと◯分」 ③ `.voicelog` … 文字起こしのタイムライン（器は `.chatlog` をそのまま使う） ④ `.voicebtn` の状態表示（準備中・お話しください・お答えしています） ⚠️ 25節と同じ流儀: **既存のルールは1行も書き換えていない**（足しただけ）。色・寸法は既存トークン（--ink / --ink-sub / --muted / --line / --fill-2 / --accent）だけ。新しい色は1つも作っていない。 ⚠️ 出現アニメ（下からふわっと）と3点の合図は 25節のものがそのまま効く（`.voicelog` に `.chatlog` を併記してあるため）。 ⚠️ `prefers-reduced-motion: reduce` では**動きを一切かけない**（25節と同じ約束）。 ========================================================================== */ /* ---- ① ボタン2つ（音声パネルは中央ぞろえなので、ここも中央に） ---- */ [data-theme='brand'] .voiceactions { justify-content: center; margin: 16px 0 0; } /* ---- ② 経過と「あと◯分」 ---- */ [data-theme='brand'] .voicetimer { margin: 10px 0 0; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } /* ---- ③ 文字起こしのタイムライン ---- 器は `.chatlog`（08節）と同じ。会話の下に置くので、少し低めにして「話す面」が主役のままにする（チャットタブは --chat-h のまま変えていない）。 */ [data-theme='brand'] .voicelog { margin-top: 20px; height: clamp(220px, 34vh, 420px); } /* ---- ④ 「話しかける」ボタンの状態 ---- 面の中でいちばん大きな要素なので、いま何が起きているかはここで分かるようにする。 idle … これまでどおり（08節の指定のまま） connecting … 押した直後。触れないことが分かるように薄くする listening … 08節の `[data-state='listening']`（点線＋--fill-2）に、息づかいのような明滅を足す（動きを控える設定では止まる） speaking … AIが声を出している最中。ピンクの線で「いま喋っている」を示す */ [data-theme='brand'] .voicebtn[data-state='connecting'] { opacity: 0.55; } [data-theme='brand'] .voicebtn[data-state='speaking'] { border-color: var(--accent); color: var(--ink); } @media (prefers-reduced-motion: no-preference) { [data-theme='brand'] .voicebtn[data-state='listening'] { animation: dwVoiceListening 2000ms ease-in-out infinite; } } @keyframes dwVoiceListening { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } } /* ========================================================================== 27 音声の「画面に表示」オーバーレイ（Phase 4 R2・申し送り§2） ★ なぜオーバーレイか音声でご案内のページを開くとき、**ページを移動してはいけない**。このサイトはMPAなので、移動するとWebRTCの接続が切れて会話が終わってしまう（設計書Phase4 §4／R0スパイクで成立を確認した方式）。そこで同一オリジンのiframeを画面に重ね、閉じればそのまま会話に戻る。 ★ この節で足したもの（**AIコンシェルジュのページ以外には1つも当たらない**） ① `.voiceoverlay` … 画面全体を覆う暗い面 ② `.voiceoverlay__panel` … 中央の白いパネル（角丸・影は既存トークン） ③ `.voiceoverlay__bar` … 上端の帯（何を出しているか＋閉じるボタン） ④ `.voiceoverlay__frame` … 中身（館内のページそのもの） ⑤ `body.is-voiceoverlay` … 開いているあいだ、後ろの画面をスクロールさせない ⚠️ 25・26節と同じ流儀: **既存のルールは1行も書き換えていない**（足しただけ）。色は既存トークン（--bg / --bg-deep / --ink / --line）だけで、新しい色は作っていない。角は他の面と同じ 4px、影は**付けない**（このデザインは影を使わない）。 ⚠️ `prefers-reduced-motion: reduce` では動きを一切かけない（25節と同じ約束）。 ========================================================================== */ [data-theme='brand'] .voiceoverlay { position: fixed; inset: 0; z-index: 90; /* 0.55 → 0.8（R5d・AZAMI「背景がもう少し暗くなって、画面を立ち上げた感が出るといい」） */ background: rgba(24, 22, 20, 0.8); display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 40px); } [data-theme='brand'] .voiceoverlay[hidden] { display: none; } [data-theme='brand'] .voiceoverlay__panel { width: min(100%, 900px); height: min(100%, 88vh); display: flex; flex-direction: column; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; } [data-theme='brand'] .voiceoverlay__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--bg-deep); border-bottom: 1px solid var(--line); } [data-theme='brand'] .voiceoverlay__title { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; } /* ボタンは既存の `.btn` のまま（帯の中で縮まないようにだけ指定する） */ [data-theme='brand'] .voiceoverlay__bar .btn { flex: none; white-space: nowrap; } [data-theme='brand'] .voiceoverlay__frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--bg); } /* 開いているあいだは後ろの画面を動かさない（iPadで指が滑ったときのため） */ body.is-voiceoverlay { overflow: hidden; } /* オーバーレイのiframeに読み込まれた側のページ（html[data-embed='overlay']・印はBase.astroの先頭スクリプトが付ける）: ページ本文だけを見せ、共通ヘッダー・下部ナビ・フッターは出さない。オーバーレイからサイト内を回遊させない（R5d・AZAMI指示「閉じるボタンだけでいい」）。 */ html[data-embed='overlay'] .apphead, html[data-embed='overlay'] .bottomnav, html[data-embed='overlay'] .appfoot { display: none !important; } @media (prefers-reduced-motion: no-preference) { [data-theme='brand'] .voiceoverlay__panel { animation: dwVoiceOverlayIn 200ms ease-out both; } } @keyframes dwVoiceOverlayIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ========================================================================== 28 R5f — UI微調整バッチ#1（2026-08-15・AZAMI実機フィードバック7件） ★ この節で足したもの ① `.voicepanel--center` … 「会話で聞く」の緑ゾーン（R5fの横1段バー→R5gでセンター寄せ縦組みへ） ② `.voicelog` の高さ … ①で浮いた高さを会話タイムラインに回す（§2） ③ `.acc__thumb--img` … スポット一覧のサムネを**横100px・4:3**で揃える（§6-1/2） ④ `.qrov` 一式 … GoogleマップQRの**モーダル**（§6-3） ⑤ `.menudev` … メニュー最下部の「開発用」（§7） ⚠️ 流儀は25〜27節と同じ: **既存のルールは書き換えず、足すだけ**（§4の下部ナビだけは「消す」指示なので10節・20-b節を直接直している）。色は既存トークンのみ・新しい色は作らない・角は4px・影は付けない。 ⚠️ `prefers-reduced-motion: reduce` では動きを一切かけない（25節と同じ約束）。 ========================================================================== */ /* ---- ① 音声パネル＝センター寄せのコンパクト縦組み（R5g・2026-08-15）---- ★ 経緯: R5fの横1段バーは「分かりにくい」（AZAMI実機）→ 中央寄せへ戻す。ただし高さは抑える（R5e以前の縦積み453pxには戻さない。目標~220px）。 ★ 構成（上から）: 何かお困りですか？ → マイク円ボタン72px → 状態のことば → 例文の吹き出し（会話中は停止/終了＋経過に入れ替わる＝JSのhidden切替は従来のまま）。 ★ マイクと波形: 待機・準備中はマイクの線画。聞き取り中（listening）と応答中（speaking）は5本の波形が動く（reduced-motionでは止まった波形）。文字はボタンの下（.voicecenter__label）＝JSのsetBtnがここに書く。 */ [data-theme='brand'] .voicepanel--center { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px var(--sp-card) 16px; text-align: center; } [data-theme='brand'] .voicecenter__lead { margin: 0; font-size: 15px; line-height: 1.5; } /* 円ボタン（08節の148pxをこの面でだけ72pxに）。アイコンと波形を中央に置く */ [data-theme='brand'] .voicepanel--center .voicebtn { flex: none; width: 72px; height: 72px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } [data-theme='brand'] .voicebtn--mic .voicebtn__icon { display: block; } /* 波形（5本・currentColor＝ボタンの文字色。色は作らない） */ [data-theme='brand'] .voicebtn__wave { display: none; align-items: center; justify-content: center; gap: 3px; height: 28px; } [data-theme='brand'] .voicebtn__wave i { width: 3px; height: 10px; border-radius: 2px; background: currentColor; } /* 聞き取り中・応答中: マイク → 波形へ切り替え */ [data-theme='brand'] .voicebtn--mic[data-state='listening'] .voicebtn__icon, [data-theme='brand'] .voicebtn--mic[data-state='speaking'] .voicebtn__icon { display: none; } [data-theme='brand'] .voicebtn--mic[data-state='listening'] .voicebtn__wave, [data-theme='brand'] .voicebtn--mic[data-state='speaking'] .voicebtn__wave { display: flex; } @media (prefers-reduced-motion: no-preference) { [data-theme='brand'] .voicebtn--mic[data-state='listening'] .voicebtn__wave i, [data-theme='brand'] .voicebtn--mic[data-state='speaking'] .voicebtn__wave i { animation: dwVoiceWave 1s ease-in-out infinite; } [data-theme='brand'] .voicebtn__wave i:nth-child(2) { animation-delay: 0.15s; } [data-theme='brand'] .voicebtn__wave i:nth-child(3) { animation-delay: 0.3s; } [data-theme='brand'] .voicebtn__wave i:nth-child(4) { animation-delay: 0.45s; } [data-theme='brand'] .voicebtn__wave i:nth-child(5) { animation-delay: 0.6s; } } /* reduced-motion では動かない波形（高さ違いの5本＝「音声中」の絵は保つ） */ [data-theme='brand'] .voicebtn__wave i:nth-child(1) { height: 8px; } [data-theme='brand'] .voicebtn__wave i:nth-child(2) { height: 16px; } [data-theme='brand'] .voicebtn__wave i:nth-child(3) { height: 22px; } [data-theme='brand'] .voicebtn__wave i:nth-child(4) { height: 14px; } [data-theme='brand'] .voicebtn__wave i:nth-child(5) { height: 9px; } @keyframes dwVoiceWave { 0%, 100% { transform: scaleY(0.6); } 50% { transform: scaleY(1.5); } } /* ボタンの下のことば（話すにはタップ／聞いていますなど。JSのsetBtnが書く） */ [data-theme='brand'] .voicecenter__label { font-size: 13px; line-height: 1.4; color: var(--ink); } /* 状態のことば（role=status）。空のときは高さを取らない */ [data-theme='brand'] .voicepanel--center .voicestatus { margin: 0; min-height: 0; font-size: 14px; line-height: 1.5; } [data-theme='brand'] .voicepanel--center .voicestatus:empty { display: none; } /* 例文の吹き出し（マイクに向かって話しかけることば＝上向きのしっぽ） */ [data-theme='brand'] .voicepanel--center .voicehint { position: relative; min-height: 0; margin-top: 4px; padding: 7px 16px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; line-height: 1.5; } [data-theme='brand'] .voicepanel--center .voicehint::before { content: ''; position: absolute; top: -5px; left: 50%; width: 8px; height: 8px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); background: var(--ai); transform: translateX(-50%) rotate(45deg); } /* 停止・終了・経過（会話中だけ出る） */ [data-theme='brand'] .voicepanel--center .voiceactions { margin: 0; gap: 12px; justify-content: center; } [data-theme='brand'] .voicepanel--center .voiceactions .btn { white-space: nowrap; } [data-theme='brand'] .voicepanel--center .voicetimer { margin: 0; white-space: nowrap; } /* ---- ② 会話タイムライン（§2）---- ①で浮いた高さをここに回す。26節の `clamp(220px, 34vh, 420px)` を上書きする（この行は「足すだけ」の例外＝申し送り§2「高さは§1で浮いた分＋可変で」）。 ⚠️ 器は `.chatlog`（08節）のまま＝`overflow-y: auto`（app.css）で**中でスクロール**する。追従（新しい発話で下端へ送る／手でスクロール中は送らない）はJS側。 */ [data-theme='brand'] .voicelog { /* ★ 高さの決め方（申し送り§2「直近のやりとりが常に見えている状態をゴールに」）ただ大きくすると、器の**下端が画面の外**（＝下部ナビの裏）へ出てしまい、中で自動追従しても「いちばん新しい発話」が見えない＝元の不満が残る。そこで **画面の高さから、この器より上にあるもの＋下部ナビを引いた残り** を採る。実測（iPad縦 810×1080・会話タブ）: ヘッダー72 ＋括弧ラベル・H1・ご案内・タブ＋音声バー161 → 器の上端 662px 下部ナビ80 ＋余白8 → 1080 − 662 − 88 = 330px → `calc(100vh - 750px)`（750 = 662 + 88）。下限240pxで潰れないようにし、大きな画面では620pxで止める（間延びさせない）。 */ height: clamp(240px, calc(100vh - 790px), 620px); /* R5g: 音声ゾーン161→約200pxに伴い750→790 */ } /* ゲスト／DANDANの区別を今より明確に（トークン内・凝らない）。・肩書き（ゲスト／DANDAN）を少し強く・DANDANの吹き出しだけ薄く塗る（ゲストは枠だけ＝右寄せと合わせて読み分く） */ [data-theme='brand'] .voicelog .bubble__who { font-weight: 600; color: var(--ink-sub); } [data-theme='brand'] .voicelog .bubble--ai { background: rgba(255, 255, 255, 0.09); } [data-theme='brand'] .voicelog .bubble--guest { background: transparent; border-color: var(--line); } /* ---- ③ スポット一覧のサムネイル（§6-1・§6-2）---- ★ 実写真を出す（詳細に登録済みの写真＝`mediaId` の実素材と**同じ画像**）。写真が無いスポットは従来どおり `.ph` のプレースホルダーのまま。 ★ 横100px固定・4:3（100×75）・`object-fit: cover` で**全行の横幅を揃える** （1240行あたりの `.acc__thumb { width: 64px; height: 64px }` を上書き）。 */ [data-theme='brand'] .acc__thumb { width: 100px; height: 75px; } [data-theme='brand'] .acc__thumb--img { flex: none; display: block; object-fit: cover; border-radius: 3px; background: rgba(255, 255, 255, 0.06); } /* ---- ④ GoogleマップQRのモーダル（§6-3）---- ★ R5eまでは、行を開くと必ずQR（140px）が地図ボタンの隣に出ていた。 R5f では「**GoogleマップのQRコードを出力する**」ボタンを地図ボタンの横に置き、押したときだけモーダルで出す（一覧が縦に伸びるのを止める）。 ⚠️ QRの生成物は**従来のまま**（ビルド時に `qrcode`（devDependency）で焼いたSVG）。新しいライブラリは足していない／ブラウザにもWorkerにも載らない。 ⚠️ 背景・角・閉じ方は 27節（音声のオーバーレイ）と**同じ作法**に揃えた＝ rgba(24,22,20,0.8)・角4px・影なし。 */ /* app.css の `.maplink .btn::before { content: "［MAP］" }` は**地図ボタンの飾り**。 QRのボタンに付くと「［MAP］GoogleマップのQRコードを出力する」になってしまうので外す（押して出るのは地図ではなくQRコードのため）。 */ [data-theme='brand'] .maplink [data-qr-open]::before { content: none; } [data-theme='brand'] .qrov { position: fixed; inset: 0; z-index: 95; background: rgba(24, 22, 20, 0.8); display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 40px); } [data-theme='brand'] .qrov[hidden] { display: none; } [data-theme='brand'] .qrpanel { width: min(100%, 420px); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: var(--sp-card); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; text-align: center; } [data-theme='brand'] .qrpanel__title { margin: 0; font-size: 18px; font-weight: 500; color: var(--ink); } /* QRそのものの見た目（白地・黒モジュール）は従来の `.spotqr` をそのまま使う。モーダルの中では少し大きく見せる（読み取りやすさ優先）。 */ [data-theme='brand'] .qrpanel .spotqr { max-width: 100%; } [data-theme='brand'] .qrpanel .spotqr__svg { width: 200px; height: 200px; } [data-theme='brand'] .qrpanel__close { min-width: 140px; } /* 開いているあいだは後ろの一覧を動かさない（27節のオーバーレイと同じ約束） */ body.is-qrov { overflow: hidden; } @media (prefers-reduced-motion: no-preference) { [data-theme='brand'] .qrpanel { animation: dwVoiceOverlayIn 200ms ease-out both; } } /* ---- ⑤ メニュー最下部の「開発用」（§7）---- HOMEのメイン画面から移してきた「状況の選択」。メニューの一覧と混ざらないよう、間を空けて最後に置く。開発ビルドにしか存在しない。 ⚠️ 枠は `.devtools`（12節・点線＋暗い塗り）がそのまま効くので、ここで線は足さない（線が二重に見えるため）。 */ [data-theme='brand'] .menudev { margin-top: 28px; font-size: 13px; } /* 幅420pxのパネルに収めるため、切替チップだけ一段小さくする（タップ面44pxは維持） */ [data-theme='brand'] .menudev .toggle { padding: 8px 12px; font-size: 13px; } [data-theme='brand'] .menudev .toggles { gap: 8px; } /* ========================================================================== アンケート（アンケート改修R1・2026-08-15）・必須バッジ `.req--must` … ピンク（--accent-bright）。**必須はここだけ**なので「必須」の語を目立たせる。既存の `.req`（黒文字）は名簿フォームのまま不変。・11段階スケール `.scale` … 0〜10 の横並び。左右に「不満」「大満足」。 iPad横でも縦でも収まるよう、数字は等幅で折り返さず、狭い画面では文字サイズだけを詰める（横スクロールは出さない）。 ========================================================================== */ [data-theme='brand'] .field__label .req--must { color: var(--accent-bright); font-weight: 700; margin-left: 6px; } [data-theme='brand'] .scale { display: flex; align-items: center; gap: 10px; } [data-theme='brand'] .scale__end { flex: 0 0 auto; font-size: 13px; color: var(--ink); white-space: nowrap; } [data-theme='brand'] .scale__nums { display: flex; flex: 1 1 auto; gap: 4px; min-width: 0; } [data-theme='brand'] .scale__num { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; max-height: 44px; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; background: transparent; color: var(--ink); } /* 選択中は白地に反転（`.radios label.is-on` と**同じ実値**にそろえてある） */ [data-theme='brand'] .scale__num.is-on { border-color: #f1f1f1; background: #f1f1f1; color: #2e2e2e; font-weight: 700; } [data-theme='brand'] .scale__num input { position: absolute; opacity: 0; width: 0; height: 0; } @media (max-width: 640px) { [data-theme='brand'] .scale { flex-wrap: wrap; gap: 6px; } [data-theme='brand'] .scale__nums { order: 3; width: 100%; flex: 1 0 100%; } [data-theme='brand'] .scale__end { font-size: 12px; } [data-theme='brand'] .scale__num { font-size: 13px; } }