/* キッチンQKオーダー ポータル共通スタイル「親しみやすくポップ」 モチーフ: デート・家族連れの軽いおでかけ。暖色ベース+オレンジの主役色 +ミントのサブ色+サニーイエローの差し色、pill形状のボタン・チップ、 丸ゴシック（Zen Maru Gothic）+英字ラベル用フォント（Fredoka）。 2026-07-20、「ハイウェイ・キッチン」（道路標識風グリーン+ナンバー プレート黄）から全面刷新。ダークモード対応は今回の刷新に伴い一旦廃止 （常にライトトーンで統一）。将来的にダーク版が必要になった場合は、 このデザインの暖色トーンに合わせた専用パレットを別途設計すること。 トップ・/events・/guide/* の全ページから読み込む（配信は app/main.py の /portal.css ルート。ビルド工程なしの素のCSS 1ファイル運用）。 Google Fontsは各HTMLので読み込む （family=Zen+Maru+Gothic:wght@400;500;700;900&family=Fredoka:wght@500;600;700）。 */ :root { /* ---- 背景 / サーフェス ---- */ --bg: #FFF7EE; /* ページ基本背景 */ --bg-warm: #FFEFDD; /* セクション区切りの淡い暖色背景 */ --panel: #FFFFFF; /* カード・パネルの白面 */ /* ---- ブランドカラー ---- */ --primary: #FF6B3D; /* オレンジ（主役 / CTA） */ --primary-shadow: #E04E22; /* オレンジの立体下影 */ --accent: #2CB4A8; /* ミント（サブ / ログイン等） */ --accent-deep: #1F9086; /* ミント濃 / 影 */ --sunny: #FFC94D; /* サニーイエロー（差し色） */ --sunny-shadow: #E0A82F; /* イエローの立体下影 */ --error: #C0392B; /* ---- テキスト ---- */ --ink: #3A2A22; /* 本文・見出し */ --ink-soft: #8A7565; /* 補足・キャプション */ /* ---- ボーダー ---- */ --line: #FFE2C4; /* ---- 濃色パネル（発車標＝出店募集/イベント一覧） ---- */ --night: #3A2A22; --night-line: #55443A; --night-ink: #FFF7EE; --night-soft: #C9B8AC; /* ---- タイポグラフィ ---- */ --font-jp: 'Zen Maru Gothic', "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; --font-en: 'Fredoka', "Arial Narrow", sans-serif; /* ---- 角丸 ---- */ --radius-pill: 999px; /* ボタン / チップ / バッジ / タグ */ --radius-panel: 32px; /* ヒーロー / 大パネル */ --radius-card: 24px; /* カード */ --radius-card-sm: 22px; --radius-logo: 14px; /* ヘッダーロゴの角丸四角 */ /* ---- シャドウ ---- */ --shadow-card: 0 10px 30px rgba(0,0,0,0.06); --shadow-card-hover: 0 18px 40px rgba(255,107,61,0.18); --shadow-panel: 0 24px 60px rgba(255,107,61,0.18); --shadow-chip: 0 4px 12px rgba(0,0,0,0.05); /* 立体ボタンの下影は border-radius 付きの実体影として使う */ --lift-primary: 0 6px 0 var(--primary-shadow); --lift-accent: 0 4px 0 var(--accent-deep); --lift-sunny: 0 6px 0 var(--sunny-shadow); /* ---- モーション ---- */ --ease: cubic-bezier(.2,.7,.3,1); --dur: .2s; } /* 浮遊アニメーション（アイコン等の演出用） */ @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-jp); line-height: 1.8; } .en { font-family: var(--font-en); font-weight: 600; letter-spacing: 0.04em; } a:focus-visible, button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } /* ===== ヘッダー（sticky、半透明の暖色バー） ===== */ header.site { background: rgba(255,247,238,0.9); backdrop-filter: blur(10px); border-bottom: 2px solid var(--line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; padding: 14px 28px; position: sticky; top: 0; z-index: 60; /* nav.siteのposition:absolute（ハンバーガー展開時）の基準を常に header自身にする。メディアクエリ内だけでrelativeを付与すると、 ブラウザの表示スケール（ズーム/DPI）とCSSブレークポイント判定に ズレが生じた際、nav.siteが基準で配置されページ全体が 異常に広がる不具合があった（2026-07-19）。stickyもposition値のため この基準は変わらず機能する。 */ } header.site .logo { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.05rem; color: var(--ink); text-decoration: none; } /* テキストバッジ（"KITCHEN QK"）。絵文字は環境（OS/ブラウザ）によって グリフが正しく解決されず崩れて表示されるリスクがあるため使わない （2026-07-20、実機で文字化けを確認し撤回）。 */ header.site .logo .plate { display: inline-flex; align-items: center; background: var(--primary); color: #fff; border-radius: var(--radius-logo); box-shadow: 0 3px 0 var(--primary-shadow); font-family: var(--font-en); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; padding: 5px 10px; line-height: 1.3; } /* ===== ヘッダーの検索アイコン ===== nav.siteは常時ハンバーガー内に格納されるため（下記参照）、検索は メニューを開かなくても押せるよう、ロゴの隣に独立ボタンとして常時 表示する（2026-07-24）。ハンバーガーの開閉状態や画面幅を問わない。 */ .header-search-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; color: var(--ink); margin-left: auto; margin-right: 4px; } .header-search-link:hover { background: var(--bg-warm); color: var(--primary); } .header-search-link svg { width: 20px; height: 20px; } /* ===== ハンバーガーメニュー（チェックボックス制御・JS不要） ===== 画面幅にかかわらず常時ハンバーガー化する（2026-07-19。以前は780px超で 横並びナビを出していたが、780〜900px幅では余白が窮屈だったこと、また メディアクエリのブレークポイント判定がブラウザの表示スケール次第で ズレるリスクを避けるため、全幅で統一する方針に変更）。 input[type=checkbox]はブラウザのUAスタイルが強いため、display:noneだけに 頼らず「視覚的に隠すが操作は可能」なvisually-hiddenパターンで確実に隠す。 開いた状態はposition:absoluteでコンテンツの上に重ねて表示し、本文を 押し下げない（オーバーレイ）。 */ .nav-toggle-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .nav-toggle-label { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; flex-direction: column; gap: 5px; background: none; border: none; padding: 0; flex-shrink: 0; } .nav-toggle-label span { display: block; width: 24px; height: 3px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } nav.site { display: none; flex-direction: column; gap: 2px; position: absolute; top: 100%; right: 0; z-index: 50; width: min(100%, 360px); background: var(--panel); padding: 10px 20px 18px; border-radius: 0 0 var(--radius-card-sm) var(--radius-card-sm); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); font-size: 0.9rem; font-weight: 700; } nav.site a { color: var(--ink); text-decoration: none; opacity: 0.85; padding: 12px 2px; border-top: 1px solid var(--line); } nav.site a:first-child { border-top: none; } nav.site a:hover { opacity: 1; color: var(--primary); text-decoration: underline; text-underline-offset: 5px; } nav.site a[aria-current="page"] { opacity: 1; color: var(--primary); border-bottom: 3px solid var(--sunny); } .nav-toggle-input:checked ~ nav.site { display: flex; } .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; } .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } main { max-width: 1000px; margin: 0 auto; padding: 0 28px; } /* ===== ヒーロー（トップ） ===== 角丸パネルに実写（hero-collage.jpg）を背景表示し、左寄せの暗グラデ オーバーレイの上にテキストを乗せる（.page-hero.with-photoと同じ 「擬似要素+オーバーレイ」パターン。2026-07-20刷新でトップページにも 採用、tool.htmlと画像を共用する）。 */ .hero { position: relative; overflow: hidden; border-radius: var(--radius-panel); margin: 24px 0 40px; padding: 56px clamp(24px,6vw,64px); min-height: 320px; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow-panel); } .hero::before { content: ""; position: absolute; inset: 0; background: url("/img/hero-collage.jpg") center 30% / cover no-repeat; z-index: 0; } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(58,42,34,0.78) 0%, rgba(58,42,34,0.45) 45%, rgba(58,42,34,0.05) 75%); z-index: 1; } .hero > * { position: relative; z-index: 2; max-width: 640px; } .hero .route { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; } .hero .route small { font-weight: 700; color: #FFD9A6; letter-spacing: 0.14em; font-size: 0.75rem; font-family: var(--font-en); } .hero h1 { margin: 0 0 6px; font-weight: 900; letter-spacing: 0.01em; color: #fff; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.25; text-wrap: balance; } .hero h1 em { font-style: normal; color: var(--sunny); } .center-line { display: none; } /* 新デザインには対応概念なし。旧マークアップ互換のため非表示のみ残す */ .hero p { max-width: 480px; color: rgba(255,255,255,0.92); margin: 0 0 20px; font-size: 1.02rem; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .hero-actions .btn.secondary { background: #fff; color: var(--primary); box-shadow: 0 6px 0 rgba(0,0,0,0.15); } /* ===== ガイドのカテゴリタブ（JS不要、ラジオボタン+CSSで切替） ===== .guide-tabs 直下に隠しラジオ×N → ラベルをピル型タブとして表示 → :checked の兄弟セレクタで対応する .guide-panel だけを表示する。 ビルド不要の静的サイト構成を維持するため、JSを使わずCSSのみで タブUIを実現している（2026-07-25新設）。 */ .guide-tabs { margin: 0 0 28px; } .guide-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .guide-tab-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; } .guide-tab-list label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: var(--panel); border: 2px solid var(--line); color: var(--ink-soft); border-radius: var(--radius-pill); padding: 9px 18px; font-size: 0.88rem; font-weight: 700; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .guide-tab-list label:hover { border-color: var(--primary); color: var(--primary); } .guide-panel.signs { display: none; } #guide-tab-all:checked ~ .guide-tab-list label[for="guide-tab-all"], #guide-tab-before:checked ~ .guide-tab-list label[for="guide-tab-before"], #guide-tab-after:checked ~ .guide-tab-list label[for="guide-tab-after"], #guide-tab-other:checked ~ .guide-tab-list label[for="guide-tab-other"] { background: var(--primary); color: #fff; border-color: var(--primary); } #guide-tab-all:checked ~ .guide-panel--all.signs, #guide-tab-before:checked ~ .guide-panel--before.signs, #guide-tab-after:checked ~ .guide-panel--after.signs, #guide-tab-other:checked ~ .guide-panel--other.signs { display: grid; } /* ===== セクション見出しラベル ===== */ .shield { display: inline-block; background: var(--primary); color: #fff; border-radius: var(--radius-pill); padding: 6px 16px; font-size: 1.05rem; font-weight: 700; line-height: 1.4; font-family: var(--font-en); } .sec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; } .sec-head .shield { padding: 7px 18px; font-size: 1.1rem; } .sec-head h2 { margin: 0; font-size: 1.55rem; font-weight: 800; } section .lead { color: var(--ink-soft); margin: 0 0 30px; font-size: 0.95rem; max-width: 700px; } section { padding: 60px 0; } /* ===== サブページのページヘッダー ===== */ .breadcrumb { font-size: 0.8rem; color: var(--ink-soft); padding-top: 26px; } .breadcrumb a { color: var(--primary); text-decoration: none; font-weight: 700; } /* 本文中のリンクの既定色。指定がないとブラウザ既定の青になり読みにくい。 要素セレクタのみの低特異度にして、.btn / a.sign-card / .depart-note a 等の個別指定が常に勝つようにする。 */ main a { color: var(--primary); } .breadcrumb a:hover { text-decoration: underline; } .page-hero { padding: 30px 0 14px; } .page-hero .route { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; } .page-hero .route small { font-weight: 700; color: var(--primary); letter-spacing: 0.14em; font-size: 0.72rem; font-family: var(--font-en); } .page-hero h1 { margin: 0 0 10px; font-weight: 900; font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.3; text-wrap: balance; } .page-hero .lead { color: var(--ink-soft); margin: 0; font-size: 0.98rem; max-width: 700px; } /* page-heroの背景画像バリアント（/tool セールスページ用）。実写の上に 暗い縦グラデーションのオーバーレイを重ね、白文字を確実に読ませる。 擬似要素で重ねることで、背景画像の位置調整とオーバーレイの色を 独立に調整できる。ダークモード対応は2026-07-20の刷新に伴い廃止。 */ .page-hero.with-photo { padding: 56px 0 44px; margin: 0 -28px 0; position: relative; overflow: hidden; border-radius: 0 0 var(--radius-card) var(--radius-card); } .page-hero.with-photo::before { content: ""; position: absolute; inset: 0; background: url("/img/hero-collage.jpg") center 30% / cover no-repeat; z-index: 0; } .page-hero.with-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58,42,34,0.82) 0%, rgba(58,42,34,0.72) 55%, var(--bg) 100%); z-index: 1; } .page-hero.with-photo > * { position: relative; z-index: 2; padding-left: 28px; padding-right: 28px; } .page-hero.with-photo .route small { color: rgba(255,217,166,0.9); } .page-hero.with-photo h1 { color: #fff; } .page-hero.with-photo .lead { color: rgba(255, 255, 255, 0.9); max-width: 700px; } /* ===== 発車標（出店募集・イベント） ===== */ .depart-band { background: var(--night); color: var(--night-ink); padding: 54px 0 58px; } .depart-inner { max-width: 1000px; margin: 0 auto; padding: 0 28px; } .depart-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .depart-head .en { color: var(--sunny); font-size: 1.05rem; } .depart-head h2 { margin: 0 0 4px; font-size: 1.55rem; font-weight: 800; } .depart-lead { color: var(--night-soft); font-size: 0.88rem; margin: 4px 0 24px; } .board { border-top: 2px solid var(--night-line); } .board-row { display: grid; gap: 6px 18px; align-items: baseline; grid-template-columns: 92px 1fr auto; padding: 16px 4px; border-bottom: 1px solid var(--night-line); } .board-row .kind { font-size: 0.72rem; font-weight: 800; text-align: center; border-radius: var(--radius-pill); padding: 3px 0; } .kind.recruit { background: var(--sunny); color: var(--ink); } .kind.event { border: 1px solid var(--night-soft); color: var(--night-ink); } .board-row .body .t { font-weight: 800; font-size: 1.02rem; } .board-row .body .desc { color: var(--night-ink); opacity: 0.85; font-size: 0.86rem; margin-top: 2px; } .board-row .body .meta { color: var(--night-soft); font-size: 0.84rem; font-variant-numeric: tabular-nums; } .board-row .go { color: var(--sunny); font-weight: 800; font-size: 0.9rem; text-decoration: none; white-space: nowrap; } .board-row .go:hover { text-decoration: underline; text-underline-offset: 4px; } .board-empty { color: var(--night-soft); font-size: 0.9rem; padding: 22px 4px; margin: 0; border-bottom: 1px solid var(--night-line); } .board-group-title { margin: 34px 0 10px; font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 10px; color: var(--night-ink); } .board-group-title:first-of-type { margin-top: 10px; } .board-group-title::after { content: ""; flex: 1; border-bottom: 1px solid var(--night-line); } .depart-note { color: var(--night-soft); font-size: 0.78rem; margin-top: 22px; } .depart-note a { color: var(--sunny); } .depart-more { margin-top: 26px; } .depart-more a { color: var(--night-ink); border: 1.5px solid var(--night-soft); border-radius: var(--radius-pill); text-decoration: none; font-weight: 800; font-size: 0.9rem; padding: 10px 22px; display: inline-block; } .depart-more a:hover { border-color: var(--sunny); color: var(--sunny); } @media (max-width: 640px) { .board-row { grid-template-columns: 80px 1fr; } .board-row .go { grid-column: 2; justify-self: end; } } /* ===== 標識テーブル（チェックリスト等） ===== */ .sign-table-wrap { overflow-x: auto; } table.sign { width: 100%; border-collapse: collapse; background: var(--panel); font-size: 0.9rem; min-width: 560px; border-radius: var(--radius-card-sm); overflow: hidden; } table.sign th, table.sign td { border: 1px solid var(--line); padding: 11px 15px; text-align: left; vertical-align: top; } table.sign thead th { background: var(--primary); color: #fff; font-size: 0.83rem; letter-spacing: 0.06em; border-color: var(--primary-shadow); } table.sign tbody th { white-space: nowrap; font-weight: 800; } table.sign td { color: var(--ink-soft); } /* ===== タンク容量3区分カード比較（給水タンク容量の目安） ===== */ .tank-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 20px; } .tank-card { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-card-sm); padding: 22px 18px; box-shadow: var(--shadow-card); position: relative; } .tank-card.lv2 { border-color: var(--sunny-shadow); } .tank-card.lv3 { border-color: var(--primary); } .tank-size { display: flex; align-items: baseline; gap: 5px; margin-bottom: 4px; } .tank-size .num { font-family: 'Fredoka', sans-serif; font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--ink); } .tank-size .unit { font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); } .tank-label { font-size: 0.8rem; font-weight: 700; margin-bottom: 16px; } .tank-card.lv1 .tank-label { color: var(--accent-deep); } .tank-card.lv2 .tank-label { color: var(--sunny-shadow); } .tank-card.lv3 .tank-label { color: var(--primary-shadow); } .tank-fill { height: 7px; border-radius: var(--radius-pill); background: var(--bg-warm); margin-bottom: 16px; overflow: hidden; } .tank-fill span { display: block; height: 100%; border-radius: var(--radius-pill); } .tank-card.lv1 .tank-fill span { width: 20%; background: var(--accent); } .tank-card.lv2 .tank-fill span { width: 40%; background: var(--sunny); } .tank-card.lv3 .tank-fill span { width: 100%; background: var(--primary); } .tank-spec { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.82rem; line-height: 1.6; } .tank-spec:first-of-type { border-top: none; } .tank-spec .icon { flex-shrink: 0; width: 18px; text-align: center; } .tank-spec strong { color: var(--ink); } .tank-spec span:last-child { color: var(--ink-soft); } @media (max-width: 720px) { .tank-compare { grid-template-columns: 1fr; } } /* ===== カード（sign-card） ===== */ /* minmax(300px, 1fr)だけだと、コンテナ幅が300px未満（狭いスマホ+ paddingの組み合わせ等）のとき、gridアイテムが最小サイズを確保しようと してコンテナの外にはみ出す。min(300px, 100%)でコンテナ幅を上限にする （2026-07-19、320px幅で23pxの横はみ出しが発覚し修正）。 */ .signs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; } .sign-card { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-card-sm); padding: 20px 22px; box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .sign-card h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 800; display: flex; align-items: center; gap: 8px; } .sign-card h3::before { content: "▸"; color: var(--primary); } .sign-card p { margin: 0 0 8px; color: var(--ink-soft); font-size: 0.88rem; } .sign-card p:last-child { margin-bottom: 0; } a.sign-card { display: block; text-decoration: none; color: inherit; } a.sign-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); } a.sign-card .more { color: var(--primary); font-weight: 800; font-size: 0.85rem; } /* 画像付きカード（.sign-card--media）。画像はカード上端いっぱいに 敷き、paddingの外に置く（画像だけ枠いっぱい表示するため、通常の sign-cardのpaddingをテキスト部分.sign-card__bodyに限定する）。 16:9固定で、縦長・横長どちらの元画像もobject-fit: coverで クロップして統一する（2026-07-20、画像プレースホルダー復元）。 */ .sign-card--media { padding: 0; overflow: hidden; } .sign-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-warm); } .sign-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .sign-card__body { padding: 18px 22px 20px; } .sign-card--media h3 { margin-top: 0; } /* スマホアプリ画面のスクリーンショット用（縦長、UIの文字が見切れない よう object-fit: contain でクロップせず全体を収める）。 */ .sign-card__media--phone { aspect-ratio: 9 / 16; max-height: 480px; background: var(--ink); } .sign-card__media--phone img { object-fit: contain; } /* 機能カード（実装状況バッジ付き、リンクなし版）。トップページの 「今できること」で使用。sign-cardの見た目を流用し、左端の色帯だけ 実装状況（提供中=primary／開発中=sunny）で出し分ける。 */ .sign-card.status-done { border-left: 5px solid var(--primary); } .sign-card.status-wip { border-left: 5px solid var(--sunny); opacity: 0.88; } .sign-card .wip-badge { display: inline-block; background: var(--sunny); color: var(--ink); font-size: 0.68rem; font-weight: 800; padding: 2px 10px; border-radius: var(--radius-pill); letter-spacing: 0.04em; margin-left: 8px; vertical-align: middle; } /* ===== ガイド記事本文 ===== */ article.guide-article { max-width: 760px; } article.guide-article h2 { font-size: 1.3rem; font-weight: 800; margin: 48px 0 14px; padding-left: 14px; border-left: 6px solid var(--primary); line-height: 1.4; } article.guide-article h3 { font-size: 1.08rem; font-weight: 800; margin: 34px 0 10px; line-height: 1.5; } article.guide-article h4 { font-size: 0.98rem; font-weight: 800; margin: 22px 0 8px; color: var(--primary-shadow); } article.guide-article ul, article.guide-article ol { padding-left: 1.4em; margin: 0 0 16px; font-size: 0.95rem; } article.guide-article li { margin-bottom: 6px; } article.guide-article p { margin: 0 0 16px; font-size: 0.95rem; } article.guide-article strong { color: var(--primary); } .tool-tip { background: var(--panel); border: 1.5px solid var(--primary); border-radius: var(--radius-card-sm); padding: 14px 18px; font-size: 0.88rem; margin: 18px 0; } .tool-tip::before { content: "→ QKオーダーなら "; font-weight: 800; color: var(--primary); } .tool-tip a { color: var(--primary); font-weight: 700; } .disclaimer { color: var(--ink-soft); font-size: 0.8rem; margin-top: 28px; } /* ===== 提携サービス送客カード（Ogidani LLC「店舗向けホームページ運用 サービス」への案内。.tool-tipはQKオーダー機能紹介専用の接頭辞付き パターンのため、外部の別サービスへの送客には流用せず専用クラスを 起こす。2026-08-07新設）。記事のカテゴリごとに本文だけを出し分け、 枠のデザインは共通にする。 */ .hp-service-banner { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-card-sm); padding: 22px 24px; margin: 32px 0 8px; } .hp-service-banner .hp-service-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; color: var(--accent-deep); background: var(--bg-warm); padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: 12px; } .hp-service-banner h3 { margin: 0 0 10px; font-size: 1.05rem; } .hp-service-banner p { margin: 0 0 16px; font-size: 0.88rem; color: var(--ink-soft); } .hp-service-banner .hp-service-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; font-size: 0.88rem; padding: 10px 20px; border-radius: var(--radius-pill); box-shadow: var(--lift-accent); } .hp-service-banner .hp-service-cta:active { transform: translateY(3px); box-shadow: none; } .hp-service-banner .hp-service-note { display: block; margin-top: 10px; font-size: 0.72rem; color: var(--ink-soft); } /* ===== 読み物コンテンツ（物語形式のガイド） ===== */ .story-scene { margin: 40px 0 28px; } .story-time { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--primary); font-size: 0.9rem; letter-spacing: 0.06em; margin-bottom: 6px; } .story-scene h2 { margin: 0 0 16px; } .story-illust { background: var(--bg-warm); border: 1.5px dashed var(--line); border-radius: var(--radius-card-sm); padding: 14px 18px; margin: 0 0 18px; font-size: 0.82rem; color: var(--ink-soft); line-height: 1.6; } .story-illust strong { color: var(--ink); } .story-photo { margin: 0 0 18px; border-radius: var(--radius-card-sm); overflow: hidden; border: 2px solid var(--line); box-shadow: var(--shadow-card); } .story-photo img { display: block; width: 100%; height: auto; } .story-hero { margin: 24px 0 0; border-radius: var(--radius-card); overflow: hidden; border: 2px solid var(--line); box-shadow: var(--shadow-card); } .story-hero img { display: block; width: 100%; height: auto; } article.guide-article p.story-line { font-size: 0.98rem; line-height: 1.9; } article.guide-article p.story-quote { border-left: 3px solid var(--sunny); padding-left: 14px; margin: 0 0 16px; color: var(--ink-soft); font-style: italic; } /* ===== 関連リンク（ガイドページ末尾） ===== */ .related { border-top: 2px solid var(--line); margin-top: 56px; padding-top: 30px; } .related h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 16px; } /* ===== FAQ目次（/faq専用）===== manual-tocと同じ「背景パネル」の考え方だが、質問数が多く縦の番号 リストだと縦に長くなりすぎるため、カテゴリ見出しへ飛べる横並びの ピル型リンクにする（2026-07-23）。 */ .faq-toc { display: flex; flex-wrap: wrap; gap: 10px; background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-card-sm); padding: 18px 20px; margin: 28px 0 8px; box-shadow: var(--shadow-card); } .faq-toc a { color: var(--ink); text-decoration: none; font-size: 0.85rem; font-weight: 700; background: var(--bg-warm); border-radius: var(--radius-pill); padding: 6px 14px; } .faq-toc a:hover { color: var(--primary); } /* ===== サイト内検索（/search） ===== ページ数が増え、目次だけでは目的の記事に辿り着きにくくなったため 新設（2026-07-24）。ビルド不要の静的構成を維持するため、検索対象は /search-index.json（見出しタイトル・URL・descriptionのみの軽量JSON） をfetchしてクライアント側で部分一致検索する方式。 */ .search-box-wrap { margin: 8px 0 28px; } .search-input { width: 100%; font-size: 1.05rem; padding: 14px 18px; border: 2px solid var(--line); border-radius: var(--radius-pill); background: var(--panel); color: var(--ink); font-family: inherit; } .search-input:focus { outline: none; border-color: var(--primary); } .search-results { display: flex; flex-direction: column; gap: 10px; max-width: 760px; } .search-result-card { display: block; text-decoration: none; color: var(--ink); background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-card-sm); padding: 14px 18px; box-shadow: var(--shadow-card); } .search-result-card:hover { border-color: var(--primary); } .search-result-title { font-weight: 800; font-size: 1rem; margin-bottom: 4px; } .search-result-context { font-size: 0.85rem; color: var(--ink-soft); } .search-empty { color: var(--ink-soft); font-size: 0.95rem; } /* ===== マニュアル（/manual）専用コンポーネント ===== 目次・役割バッジ・注意書き・手順カードなど、ガイド記事にはない 構造を持つため、guide-articleの上に薄く追加する（2026-07-20）。 */ .manual-toc { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-card-sm); padding: 22px 26px; margin: 32px 0 8px; box-shadow: var(--shadow-card); } .manual-toc h2 { font-size: 1rem; margin: 0 0 12px; } .manual-toc ol { margin: 0; padding-left: 1.3em; font-size: 0.9rem; } .manual-toc ol ol { margin-top: 6px; margin-bottom: 6px; } .manual-toc a { color: var(--ink); text-decoration: none; } .manual-toc a:hover { color: var(--primary); text-decoration: underline; } .role-badge { display: inline-block; font-size: 0.75rem; font-weight: 800; padding: 4px 14px; border-radius: var(--radius-pill); margin-bottom: 16px; } .role-badge.owner { background: var(--primary); color: #fff; } .role-badge.staff { background: var(--accent); color: #fff; } article.guide-article p.section-lead { color: var(--ink-soft); margin: 0 0 20px; font-size: 0.95rem; } .manual-card { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-card-sm); padding: 18px 22px; margin-bottom: 16px; box-shadow: var(--shadow-card); } .manual-card h4 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 800; } .manual-card p:last-child { margin-bottom: 0; } .manual-note { background: var(--bg-warm); border: 1.5px solid var(--sunny); border-radius: var(--radius-card-sm); padding: 14px 18px; font-size: 0.9rem; margin: 0 0 16px; color: var(--ink); } /* マニュアルの2ページ分割（開店準備編／日々の業務編）間の案内、2026-08-09追加 */ .manual-next-page { background: var(--panel); border: 2px solid var(--primary); border-radius: var(--radius-card-sm); padding: 24px 26px; margin: 32px 0; text-align: center; } .manual-next-page h2 { margin: 0 0 10px; font-size: 1.15rem; } .manual-next-page p { margin: 0 0 14px; font-size: 0.92rem; } .manual-next-page p:last-child { margin-bottom: 0; } .manual-toc-next { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 0.9rem; } article.guide-article code { background: var(--bg-warm); color: var(--primary-shadow); padding: 2px 7px; border-radius: 6px; font-size: 0.9em; word-break: break-all; } /* ===== ツール看板 ===== */ .tool-sign { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; border-radius: var(--radius-panel); padding: 42px 38px; box-shadow: 0 24px 50px rgba(44,180,168,0.25); } .tool-sign .en { color: #BFF0EA; font-size: 1rem; } .tool-sign h2 { margin: 6px 0 12px; font-size: 1.55rem; font-weight: 800; } .tool-sign > p { margin: 0 0 24px; max-width: 640px; font-size: 0.94rem; opacity: 0.94; } .tool-cols { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 28px; font-size: 0.9rem; font-weight: 700; } .tool-cols span::before, .tool-cols a::before { content: "→ "; color: var(--sunny); } .tool-cols a { color: inherit; text-decoration: none; } .tool-cols a:hover { color: var(--sunny); text-decoration: underline; } /* ===== ストアバッジ（Google Play / App Store ダウンロード導線） ===== */ .store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; } .store-badges a { display: inline-flex; line-height: 0; transition: transform var(--dur) var(--ease); } .store-badges a:hover { transform: translateY(-2px); } .store-badges img { height: 50px; width: auto; } /* Google公式配布の「Get it on Google Play」PNGは、実画像646x250の上下に 透明マージン（y=29〜220の192pxだけが黒いボタン本体）を含んでいるため、 単純にheight:50pxを指定するとApple公式バッジ（余白ほぼ無し）より ボタン本体が小さく見え、高さが揃わない（2026-08-31 ユーザー指摘）。 overflow:hiddenのフレームに実寸拡大（250/192倍）した画像を object-positionで上寄せし、透明マージン分だけはみ出させて見えなくする ことで、黒いボタン本体の見た目の高さをAppleバッジと揃えている。 */ .store-badges .gplay-frame { display: inline-flex; height: 50px; width: 168px; overflow: hidden; border-radius: 6px; } .store-badges .gplay-frame img { height: 65px; width: 168px; margin-top: -7.5px; } /* ===== ボタン（pill + 立体下影） ===== */ .btn { display: inline-block; background: var(--primary); color: #fff; text-decoration: none; font-weight: 700; font-size: 0.95rem; padding: 13px 30px; border-radius: var(--radius-pill); border: 0; cursor: pointer; font-family: inherit; box-shadow: var(--lift-primary); transition: transform var(--dur) var(--ease); } .btn:hover { filter: brightness(1.04); } .btn:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--primary-shadow); } .btn.ink { background: var(--accent); box-shadow: var(--lift-accent); } .btn.ink:active { box-shadow: 0 2px 0 var(--accent-deep); } /* ===== フォーム（店舗ログイン・お問い合わせ） ===== */ form.portal { display: grid; gap: 14px; max-width: 480px; } form.portal label { font-size: 0.85rem; font-weight: 800; } form.portal input, form.portal textarea { width: 100%; margin-top: 6px; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-card-sm); font-size: 0.95rem; font-family: inherit; background: var(--panel); color: var(--ink); } form.portal input:focus, form.portal textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); } form.portal textarea { min-height: 120px; resize: vertical; } form.portal button { justify-self: start; } .form-message { font-size: 0.9rem; margin: 0; } .form-message.success { color: var(--accent-deep); font-weight: 700; } .form-message.error { color: var(--error); font-weight: 700; } /* ===== フッター（濃色反転） ===== */ footer.site { background: var(--ink); color: rgba(255,247,238,0.7); text-align: center; font-size: 0.82rem; padding: 32px 24px 44px; margin-top: 40px; } footer.site .logo-mark { font-family: var(--font-en); font-weight: 700; font-size: 1.1rem; color: var(--sunny); } footer.site a { color: var(--sunny); } /* ===== トップに戻るボタン ===== 縦に長いガイド記事・マニュアルページ向け。一定量スクロールした時だけ portal.js が.is-visibleを付与して表示する（常時表示だと本文と重なる ため、CSS側は透明+非表示、JS側は量の判定のみを担当する分離）。 */ .back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 46px; height: 46px; border-radius: 50%; background: var(--primary); color: #fff; border: 0; box-shadow: var(--lift-primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { filter: brightness(1.04); } .back-to-top:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--primary-shadow); } @media (max-width: 480px) { .back-to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; font-size: 1.15rem; } } /* ===== モバイル対応 ===== デザイン参照元（Kitchen QK Home.dc.html）はREADME上「対応済み」と 記載されていたが、実ファイルに@mediaが存在せず375px幅で実機検証した ところヘッダーナビの折り返し崩壊・ヒーローCTAの見切れを確認したため、 ここで実装側が新規に設計する（2026-07-20）。 */ @media (max-width: 820px) { /* ヒーロー画像枠を縦長寄りにし、テキストを読みやすい高さに保つ。 */ .hero { min-height: 380px; padding: 40px 24px; align-items: flex-end; } .hero::after { background: linear-gradient(0deg, rgba(58,42,34,0.85) 0%, rgba(58,42,34,0.55) 45%, rgba(58,42,34,0.05) 80%); } } @media (max-width: 400px) { /* 最小幅ではヒーローのCTAボタン群を縦積み・全幅にする。 */ .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }