/* ========================================================================== 青物商 豊助 - デザイントークン ========================================================================== */ :root { /* ブランドカラー */ --color-indigo: #243B5A; /* Brand/Indigo: ブランド・歴史・ヘッダー・フッター */ --color-green: #245C3A; /* Brand/Green: 新鮮さ・野菜・補助見出し */ --color-cream: #FFF9ED; /* Surface/Cream: ページ背景 */ --color-text: #222222; /* Text/Primary: 本文 */ --color-persimmon: #A84324; /* Action/Persimmon: 主要CTA */ --color-persimmon-dark: #762F19; /* Action/Persimmon（明度を下げた版）: ヒーローの電話注文ボタン */ --color-ochre: #F2E2B8; /* Surface/Ochre: 案内・創業者背景 */ --color-white: #FFFFFF; --color-border: #D8CBA8; --color-focus: #0B63C4; /* フォーカスリング用（十分なコントラスト） */ /* 余白 */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* レイアウト */ --content-max-width: 1200px; --radius-sm: 4px; --radius-md: 8px; --header-height: 4.5rem; /* タップ領域 */ --tap-min: 44px; /* フォント */ --font-body: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; --font-heading: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; /* 文字サイズ（標準=18px を基準） */ --fs-base: 18px; } /* 本文フォント(BIZ UDPGothic)・見出しフォント(Noto Serif JP)は、どちらも セルフホスト。実際の@font-face定義（文字種を絞り込まず幅広くカバー）は assets/fonts/biz-udpgothic.css と assets/fonts/noto-serif-jp.css に 分離している（でcss/styles.cssより先に読み込む）。詳細はその 2ファイル先頭のコメントを参照。 */ /* 文字サイズ切替: html[data-fontsize]で基準サイズを変更し、以後 rem で比例拡大 */ html[data-fontsize="standard"] { --fs-base: 18px; } html[data-fontsize="large"] { --fs-base: 20px; } html[data-fontsize="xlarge"] { --fs-base: 22px; } /* ========================================================================== リセット / ベース ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--fs-base); scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.8; color: var(--color-text); background-color: var(--color-cream); overflow-wrap: break-word; } img { max-width: 100%; height: auto; display: block; } svg { max-width: 100%; } a { color: var(--color-indigo); } h1, h2, h3, h4 { line-height: 1.4; margin: 0 0 var(--space-md) 0; color: var(--color-indigo); } /* 各セクションの主見出し（h1・各セクション先頭のh2）のみ明朝体・太字にする */ #hero-heading, #delivery-summary-heading, #delivery-heading, #strengths-heading, #seasonal-heading, #about-heading, #faq-heading, #store-info-heading { font-family: var(--font-heading); font-weight: 700; } /* 各セクション見出し（h1は対象外）は、既定のh2サイズ(1.5rem)の1.2倍 */ #delivery-summary-heading, #delivery-heading, #strengths-heading, #seasonal-heading, #about-heading, #faq-heading, #store-info-heading { font-size: 1.8rem; } p { margin: 0 0 var(--space-md) 0; } ul, ol { padding-left: 1.25em; } table { border-collapse: collapse; width: 100%; } button { font-family: inherit; font-size: 1rem; } /* ========================================================================== アクセシビリティ基盤 ========================================================================== */ /* 見えるフォーカス表示（全体） 二重リング（白＋藍系ブルー）にすることで、明るい背景・暗い背景・ 白背景のボタンなど、どの背景色の上でも必ずどちらか一方のリングが 十分なコントラストで視認できるようにしている。内側描画（inset） のため、角丸カードのoverflow:hiddenで途切れることもない。 */ :focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-white), inset 0 0 0 4px var(--color-focus); } /* 視覚的には非表示にしつつ、支援技術には伝える */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* スキップリンク */ .skip-link { position: absolute; top: -1000px; left: var(--space-md); background: var(--color-white); color: var(--color-indigo); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); border: 2px solid var(--color-indigo); font-weight: 700; z-index: 1000; transition: top 0.15s ease; } .skip-link:focus { top: var(--space-md); } /* 固定ヘッダーで見出し・フォーカス対象が隠れないための着地余白 */ main section[id], #main { scroll-margin-top: calc(var(--header-height) + var(--space-md)); } /* 横スクロール防止 */ html, body { max-width: 100%; overflow-x: hidden; } /* ========================================================================== レイアウト共通 ========================================================================== */ .container { max-width: var(--content-max-width); margin-inline: auto; padding-inline: var(--space-md); } @media (min-width: 768px) { .container { padding-inline: var(--space-xl); } } /* ========================================================================== ヘッダー ========================================================================== */ .site-header { background-color: var(--color-indigo); color: var(--color-white); position: static; /* JS未実行時は通常フロー。JS実行時にfixed化する（下記 html.js） */ width: 100%; z-index: 200; } /* ロゴ（と、モバイル幅ではメニューボタン）だけが入る行。 ヘッダー全体ではないため、header-barという紛らわしい名前は避けている。 */ .logo-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); /* 画面幅に関わらず常に0。タップ領域は.menu-toggle自体のpadding/min-heightで確保する */ padding-block: 0; } .logo { display: inline-flex; align-items: center; } .logo:hover { opacity: 0.85; } .logo-image { display: block; height: 2.75rem; width: 2.75rem; padding: 0.15rem; background-color: var(--color-white); border-radius: 50%; } /* デスクトップ幅: ロゴを、電話番号・文字サイズ・ナビを含む段（.header-panel） と横並びにする。ロゴの実際のサイズ（高さ=幅）は、.header-panelの 実測高さに合わせてJS（main.jsのsyncHeaderHeight）がインラインstyleで 設定する。CSSのstretch/aspect-ratioの多段連鎖はブラウザによって 正しく解決されない（幅が潰れる）ことが実測で確認できたため、 JSによる明示的なpx指定に統一している。 */ @media (min-width: 900px) { .header-inner { display: flex; align-items: center; gap: var(--space-lg); } .logo-row { flex-shrink: 0; } .logo-image { padding: 0.25rem; } } /* モバイルメニューボタン: JS未実行時は非表示（ナビは常時表示のフォールバック） */ .menu-toggle { display: none; align-items: center; gap: var(--space-xs); min-width: var(--tap-min); min-height: var(--tap-min); padding: var(--space-xs) var(--space-md); background: transparent; color: var(--color-white); border: 2px solid var(--color-white); border-radius: var(--radius-sm); cursor: pointer; } html.js .menu-toggle { display: inline-flex; } @media (min-width: 900px) { html.js .menu-toggle { display: none; } } .header-panel { display: block; } .primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); } .primary-nav a { display: flex; align-items: center; color: var(--color-white); text-decoration: none; padding: var(--space-sm) var(--space-md); border: 2px solid var(--color-white); border-radius: var(--radius-sm); min-height: var(--tap-min); white-space: nowrap; } .primary-nav a:hover { background-color: rgba(255, 255, 255, 0.12); text-decoration: underline; } .header-actions { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid rgba(255, 255, 255, 0.25); } .tel-cta { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--tap-min); padding: var(--space-xs) var(--space-md); color: var(--color-white); text-decoration: none; border: 2px solid var(--color-white); border-radius: var(--radius-md); width: fit-content; } .tel-cta:hover { background-color: rgba(255, 255, 255, 0.12); } .tel-cta-text { display: flex; flex-direction: column; line-height: 1.3; } .tel-number { font-weight: 700; /* 周辺テキストの1.5倍を、文字サイズ切替（標準/大/特大）のどの状態でも 維持するため、固定pxではなく親要素基準のemで指定する */ font-size: 1.5em; } .fontsize-switch { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); } .fontsize-switch-label { font-size: 0.85rem; } .fontsize-btn { min-width: var(--tap-min); min-height: var(--tap-min); padding: var(--space-xs) var(--space-sm); background-color: transparent; color: var(--color-white); border: 2px solid var(--color-white); border-radius: var(--radius-sm); cursor: pointer; } .fontsize-btn:hover { background-color: rgba(255, 255, 255, 0.12); } .fontsize-btn[aria-pressed="true"] { background-color: var(--color-white); color: var(--color-indigo); font-weight: 700; } /* header-panel の折りたたみは JS実行時のみ、狭い画面幅で有効化する */ @media (max-width: 899.98px) { html.js .header-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: var(--color-indigo); padding: var(--space-md); max-height: calc(100vh - var(--header-height)); overflow-y: auto; } html.js .header-panel.is-open { display: block; } } @media (min-width: 900px) { /* 2段構成: 1段目=電話+文字サイズ切替、2段目=ナビ。どちらも右寄せで、 幅が足りない場合は各段の内部でさらに折り返す（画面外にはみ出さない）。 */ .header-panel { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-sm); /* 上側は.header-innerの各要素と上端をそろえるため0。 下側だけナビの下に余白を確保する。 */ padding-top: 0; padding-bottom: var(--space-sm); /* .header-innerの残り幅いっぱいまで広げる。これが無いと自身の内容 （ナビ）の幅だけに縮み、align-items:flex-endがページ本来の右端 ではなく、その縮んだ箱の右端までしか効かなくなる。 */ flex: 1; min-width: 0; } .header-actions { order: 1; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; /* center ではなく flex-start にし、電話番号ボックスの上端を 文字サイズボタンの上端と揃える（電話番号ボックスは背が高いため、 centerのままだと上端が段の最上部に張り付いてしまう）。 */ align-items: flex-start; row-gap: var(--space-sm); margin-top: 0; padding-top: 0.5rem; border-top: none; } .primary-nav { order: 2; } .primary-nav ul { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; row-gap: var(--space-2xs); gap: var(--space-2xs); } .primary-nav li { flex-shrink: 0; } .tel-cta, .fontsize-switch { flex-shrink: 0; } } /* JS実行時のみヘッダーを固定表示にする（JS失敗時は通常フローで全情報が読める） */ html.js .site-header { position: fixed; top: 0; left: 0; right: 0; } html.js body { padding-top: var(--header-height); } /* ========================================================================== ボタン共通 ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md); font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.3; text-align: center; } .btn-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15em; } .btn-text .tel-cta-text { line-height: 1.3; } .btn-primary { background-color: var(--color-persimmon); color: var(--color-white); border-color: var(--color-persimmon); } .btn-primary:hover { background-color: #8f3a1e; border-color: #8f3a1e; } /* ========================================================================== ヒーロー ========================================================================== */ .hero { background-color: var(--color-cream); padding-block: var(--space-2xl); } .hero-inner { display: grid; gap: var(--space-xl); align-items: center; } .hero-content h1 { font-size: 2rem; margin-bottom: var(--space-md); } .hero-sub { font-size: 1.1rem; max-width: 40em; } /* ヒーローと最終CTAの両方で使うCTAボタンの行。「hero-actions」という ヒーロー限定を思わせる名前は使わない。 */ .cta-row { display: flex; margin-top: var(--space-lg); } /* ヒーロー専用の電話注文ボタン。柿色より明度を下げ、白文字とのコントラストを 高めた上で、横長かつ可能な限り大きく表示する。 */ .btn-order { flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; padding-block: var(--space-lg); padding-inline: var(--space-2xl); background-color: var(--color-persimmon-dark); color: var(--color-white); border-color: var(--color-persimmon-dark); } .btn-order:hover { background-color: #5c2412; border-color: #5c2412; } .btn-order-line1 { display: flex; align-items: center; gap: var(--space-sm); /* 最終CTA（デスクトップ幅）の「電話で注文する」と同じ大きさにそろえる */ font-size: 1.3em; font-weight: 700; } .btn-order-number { font-weight: 900; font-size: 1.9em; line-height: 1.15; letter-spacing: 0.02em; } /* 最終CTA用: アイコン・ラベル・番号を1行にまとめる（見た目のボタンの 大きさ自体は2行版のときとほぼ同じ高さを保つ） */ .btn-order-oneline { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--space-2xs); row-gap: var(--space-2xs); min-height: 7.6rem; padding-inline: var(--space-xs); } .btn-order-oneline .btn-order-icon { width: 1.3em; height: 1.3em; flex-shrink: 0; } .btn-order-oneline .btn-order-line1 { font-size: 0.75em; } .btn-order-oneline .btn-order-number { font-size: 0.85em; letter-spacing: 0; } /* 画面に余裕がある幅では、1行のまま文字をより大きくする */ @media (min-width: 900px) { .btn-order-oneline { column-gap: var(--space-md); padding-inline: var(--space-xl); } .btn-order-oneline .btn-order-icon { /* ヒーローの電話アイコンと同じ固定サイズにそろえる */ width: 36.4px; height: 36.4px; } .btn-order-oneline .btn-order-line1 { font-size: 1.3em; } .btn-order-oneline .btn-order-number { /* ヒーローの電話番号と同じ大きさにそろえる */ font-size: 1.9em; } } /* 営業時間・定休日。dt列の幅をラベルの最大幅に揃えることで、 値（時刻・曜日）の開始位置を縦にそろえる。 */ .hero-hours { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-sm); row-gap: var(--space-xs); margin: var(--space-lg) 0 0 0; font-size: 1.05em; } .hero-hours dt { display: flex; align-items: center; gap: var(--space-xs); margin: 0; font-weight: 700; color: var(--color-indigo); white-space: nowrap; } .hero-hours dd { display: flex; align-items: center; margin: 0; } .hero-hours-icon { flex-shrink: 0; color: var(--color-green); } .hero-visual { width: 100%; } .hero-visual svg, .hero-visual img { width: 100%; height: auto; border-radius: var(--radius-md); } @media (min-width: 900px) { .hero-inner { grid-template-columns: 3fr 2fr; } .hero-content h1 { font-size: 2.5rem; } } /* ========================================================================== 宅配早見表 ========================================================================== */ .delivery-summary { padding-block: var(--space-2xl); background-color: var(--color-white); } .table-scroll { overflow-x: auto; margin-top: var(--space-md); } .summary-table { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .summary-table caption { text-align: left; font-size: 0.9rem; color: var(--color-indigo); margin-bottom: var(--space-sm); font-weight: 700; } .summary-table th, .summary-table td { text-align: left; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); vertical-align: top; } .summary-table tr:last-child th, .summary-table tr:last-child td { border-bottom: none; } .summary-table th { background-color: var(--color-ochre); color: var(--color-indigo); width: 40%; white-space: nowrap; } @media (max-width: 480px) { .summary-table th { white-space: normal; width: 45%; } } /* ========================================================================== 宅配サービス詳細 ========================================================================== */ .delivery { padding-block: var(--space-2xl); background-color: var(--color-cream); } .delivery h3 { margin-top: var(--space-xl); color: var(--color-green); } .detail-list { display: grid; gap: var(--space-md); margin: var(--space-md) 0 0 0; } .detail-item { background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); } .detail-item dt { font-weight: 700; color: var(--color-indigo); margin-bottom: var(--space-2xs); } .detail-item dd { margin: 0; } @media (min-width: 700px) { .detail-list { grid-template-columns: repeat(2, 1fr); } } .omakase-card { background-color: var(--color-ochre); border-radius: var(--radius-md); padding: var(--space-lg); margin-top: var(--space-xl); } .omakase-card h3 { margin-top: 0; } .omakase-price { font-size: 1.4rem; font-weight: 700; color: var(--color-persimmon); } .omakase-note { font-size: 0.65em; color: var(--color-text); margin-left: var(--space-xs); } .rain-note { margin-top: var(--space-xl); padding: var(--space-md); border: 2px solid var(--color-indigo); border-radius: var(--radius-md); background-color: var(--color-white); font-size: 1rem; } /* ========================================================================== 豊助の三つの良さ ========================================================================== */ .strengths { padding-block: var(--space-2xl); background-color: var(--color-white); } .strengths-grid { list-style: none; margin: var(--space-lg) 0 0 0; padding: 0; display: grid; gap: var(--space-lg); } .strength-card { background-color: var(--color-cream); border-radius: var(--radius-md); padding: var(--space-lg); text-align: left; } .strength-icon { margin-bottom: var(--space-sm); } .strength-card h3 { margin-bottom: var(--space-xs); } .strength-card p { margin-bottom: 0; } @media (min-width: 700px) { .strengths-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== 旬のおすすめ ========================================================================== */ .seasonal { padding-block: var(--space-2xl); background-color: var(--color-cream); } .seasonal-grid { list-style: none; margin: var(--space-lg) 0 0 0; padding: 0; display: grid; gap: var(--space-lg); } .seasonal-card { background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .seasonal-visual { aspect-ratio: 16 / 9; background-color: var(--color-ochre); } .seasonal-visual svg, .seasonal-visual img { width: 100%; height: 100%; object-fit: cover; } .seasonal-card h3, .seasonal-card p { padding-inline: var(--space-md); } .seasonal-card h3 { margin-top: var(--space-md); margin-bottom: var(--space-xs); } .seasonal-card p { margin-bottom: var(--space-md); } @media (min-width: 700px) { .seasonal-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== 豊助について ========================================================================== */ .about { padding-block: var(--space-2xl); background-color: var(--color-white); } .about h3 { margin-top: var(--space-xl); color: var(--color-green); } .about blockquote { margin: var(--space-lg) 0; padding: var(--space-lg); background-color: var(--color-ochre); border-radius: var(--radius-md); border-left: 6px solid var(--color-indigo); } .about blockquote p { margin: 0; } .quote-attribution { margin-top: var(--space-sm); margin-bottom: 0; font-size: 0.9rem; color: var(--color-indigo); } .founder-words p { line-height: 2; } /* ========================================================================== よくあるご質問 ========================================================================== */ .faq { padding-block: var(--space-2xl); background-color: var(--color-cream); } .faq-list { margin-top: var(--space-lg); display: grid; gap: var(--space-md); } .faq-item { background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .faq-item h3 { margin: 0; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--tap-min); padding: var(--space-md) var(--space-lg); /* 周囲のcream(#FFF9ED)より少し濃いベージュにして、質問の行と 回答（白背景）を見分けやすくする */ background-color: var(--color-ochre); border: none; color: var(--color-indigo); font-weight: 700; font-size: 1.05rem; text-align: left; cursor: pointer; } .faq-question:hover { background-color: rgba(36, 59, 90, 0.06); } .faq-icon { flex-shrink: 0; transition: transform 0.2s ease; } .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); } .faq-answer { padding: 0 var(--space-lg) var(--space-lg); } .faq-answer p { margin: 0; } .faq-answer[hidden] { display: none; } /* ========================================================================== 店舗案内 ========================================================================== */ .store-info { padding-block: var(--space-2xl); background-color: var(--color-white); } .store-info-grid { display: grid; gap: var(--space-xl); margin-top: var(--space-lg); align-items: start; } .store-note { margin-top: var(--space-md); color: var(--color-green); } .store-address { margin-top: var(--space-lg); padding: var(--space-md); background-color: var(--color-ochre); border-radius: var(--radius-md); } .store-map svg { width: 100%; height: auto; border-radius: var(--radius-md); } .store-map-caption { font-size: 0.85rem; color: var(--color-text); text-align: center; margin-top: var(--space-xs); } @media (min-width: 900px) { .store-info-grid { grid-template-columns: 3fr 2fr; } } /* ========================================================================== 最終CTA ========================================================================== */ .final-cta { padding-top: var(--space-xl); padding-bottom: var(--space-sm); background-color: var(--color-indigo); color: var(--color-white); text-align: center; } .final-cta h2 { color: var(--color-white); margin-bottom: var(--space-xs); } .final-cta p { max-width: 40em; margin-inline: auto; margin-bottom: 0; line-height: 1.5; } /* モバイル・タブレットでは文の区切りで手動改行（.mobile-break）し、 デスクトップでは改行を無効にして1行に収める。 */ @media (min-width: 900px) { .mobile-break { display: none; } .final-cta p.final-cta-lead { max-width: none; } p.disclaimer { max-width: none; } } .final-cta .cta-row { justify-content: center; margin-top: var(--space-md); } /* ========================================================================== フッター ========================================================================== */ .site-footer { background-color: var(--color-indigo); color: var(--color-white); padding-top: var(--space-sm); padding-bottom: var(--space-xl); } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); text-align: center; } .footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-md); } .footer-nav a { color: var(--color-white); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: var(--space-xs) var(--space-sm); } .footer-nav a:hover { text-decoration: underline; } .back-to-top { color: var(--color-white); display: inline-flex; align-items: center; min-height: var(--tap-min); padding: var(--space-xs) var(--space-md); border: 2px solid var(--color-white); border-radius: var(--radius-md); text-decoration: none; } .back-to-top:hover { background-color: rgba(255, 255, 255, 0.12); } .footer-shopname { margin: 0; font-weight: 700; } .disclaimer { margin: 0; font-size: 0.85rem; max-width: 40em; opacity: 0.9; }