@charset "utf-8"; /* ========================================================================= 和洋菓子の店ふくや｜共通スタイル common.css - 3ページ（ケーキ＆和菓子／惣菜／沖縄そば）で共有する土台 - 色はページごとにで切替 - ヘッダー／フッター／ボタン／文字サイズ／カードの形は全ページ共通 ========================================================================= */ /* ----------------------------------------------------------------- 1. デザイントークン（色・余白などの基本設定） ----------------------------------------------------------------- */ :root{ /* 基本色（全ページ共通） */ --paper: #ffffff; /* 白 */ --cream: #fbf6ec; /* 生成り（ページ背景） */ --cream-2: #f4ecdc; /* 薄いクリーム（少し濃い） */ --ink: #3b2a1e; /* 濃い茶色の文字 */ --ink-soft: #6c5848; /* 補足テキスト */ --line: #e7dcc9; /* 罫線・枠 */ --shadow: rgba(59,42,30,.10); --shadow-2: rgba(59,42,30,.16); /* アクセント色（テーマで上書きされる初期値＝ケーキ系） */ --accent: #c24a57; --accent-strong: #9e3340; --accent-soft: #f6e1e5; --tint: #fbeff1; /* セクション背景の淡い色 */ --on-accent: #ffffff; /* レイアウト */ --container: 1180px; --radius: 14px; --radius-sm: 10px; --gap: 22px; --header-h: 74px; /* フォント（Webフォント不要・端末標準の高品質書体を使用） */ --font-serif: "Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","HGS明朝E","MS PMincho",serif; --font-sans: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP","Meiryo",sans-serif; } /* ページごとのアクセントカラー -------------------------------------- */ .theme-cake{ /* ケーキ＆和菓子：淡いピンク／赤／えんじ */ --accent:#c24a57; --accent-strong:#9e3340; --accent-soft:#f6e1e5; --tint:#fbeff1; } .theme-souzai{ /* 惣菜：薄いベージュ／茶／落ち着いたオレンジ */ --accent:#b26a2c; --accent-strong:#8c4e1c; --accent-soft:#f0e3cd; --tint:#f8f0e0; } .theme-soba{ /* 沖縄そば：薄い生成り／深緑／落ち着いた茶 */ --accent:#3f6b43; --accent-strong:#2e5132; --accent-soft:#e2ead9; --tint:#f2f1e5; } /* ----------------------------------------------------------------- 2. リセット & ベース ----------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--font-sans); font-size:17px; /* 高齢のお客様にも読みやすい基本サイズ（16px以上） */ line-height:1.85; color:var(--ink); background:var(--cream); letter-spacing:.01em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; } button{ font:inherit; cursor:pointer; } h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:700; line-height:1.4; margin:0; } /* リンク・ボタンのキーボードフォーカス表示 */ :focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; } /* スクリーンリーダー用に隠す */ .visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* 本文へスキップ */ .skip-link{ position:fixed; left:12px; top:-60px; z-index:200; background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:8px; text-decoration:none; font-weight:700; transition:top .2s; } .skip-link:focus{ top:12px; } /* レイアウト共通 */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; } .section{ padding-block:64px; } .section--tint{ background:var(--tint); } .section--paper{ background:var(--paper); } [id]{ scroll-margin-top:calc(var(--header-h) + 14px); } /* ----------------------------------------------------------------- 3. ボタン（全ページ共通の形・押しやすいサイズ） ----------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:13px 26px; font-size:16px; font-weight:700; text-decoration:none; line-height:1.3; border-radius:var(--radius-sm); border:2px solid transparent; transition:background-color .18s, color .18s, border-color .18s, transform .12s; } .btn:active{ transform:translateY(1px); } .btn--primary{ background:var(--accent); color:var(--on-accent); } .btn--primary:hover{ background:var(--accent-strong); } .btn--ghost{ background:var(--paper); color:var(--accent-strong); border-color:var(--accent); } .btn--ghost:hover{ background:var(--accent-soft); } .btn--block{ width:100%; } .btn .ico{ width:1.1em; height:1.1em; flex:0 0 auto; } /* ----------------------------------------------------------------- 4. ヘッダー（3ページ共通） ----------------------------------------------------------------- */ .site-header{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--cream) 94%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(8px); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:var(--header-h); padding-block:8px; } .brand{ display:grid; line-height:1.15; text-decoration:none; color:var(--ink); } .brand__lead{ font-size:11px; letter-spacing:.18em; color:var(--ink-soft); } .brand__name{ font-family:var(--font-serif); font-weight:700; font-size:26px; color:var(--accent-strong); letter-spacing:.04em; } .brand__since{ font-size:10.5px; letter-spacing:.12em; color:var(--ink-soft); } .main-nav ul{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; } .main-nav a{ display:inline-block; padding:10px 13px; text-decoration:none; color:var(--ink); font-size:15.5px; font-weight:600; border-radius:8px; transition:color .15s, background-color .15s; } .main-nav a:hover{ color:var(--accent-strong); background:var(--accent-soft); } .main-nav a[aria-current="page"]{ color:var(--accent-strong); } .main-nav a[aria-current="page"]::after{ content:""; display:block; height:3px; margin-top:3px; border-radius:3px; background:var(--accent); } .header-tel{ display:flex; align-items:center; } /* ハンバーガー（スマホのみ表示） */ .nav-toggle{ display:none; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:8px 14px; background:var(--paper); border:2px solid var(--line); border-radius:10px; font-weight:700; color:var(--ink); } .nav-toggle .bars{ width:20px; height:14px; position:relative; } .nav-toggle .bars span{ position:absolute; left:0; width:100%; height:2px; background:var(--ink); border-radius:2px; transition:.2s; } .nav-toggle .bars span:nth-child(1){ top:0; } .nav-toggle .bars span:nth-child(2){ top:6px; } .nav-toggle .bars span:nth-child(3){ top:12px; } .nav-toggle[aria-expanded="true"] .bars span:nth-child(1){ top:6px; transform:rotate(45deg); } .nav-toggle[aria-expanded="true"] .bars span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] .bars span:nth-child(3){ top:6px; transform:rotate(-45deg); } /* ----------------------------------------------------------------- 5. メインビジュアル（再利用構造／画像はで差し替え） ----------------------------------------------------------------- */ .hero{ position:relative; isolation:isolate; background:var(--accent-soft); } .hero__media{ position:absolute; inset:0; z-index:0; } .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; } .hero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(251,246,236,.92) 0%, rgba(251,246,236,.78) 38%, rgba(251,246,236,.15) 72%, rgba(251,246,236,0) 100%); } .hero__inner{ position:relative; z-index:2; display:flex; align-items:center; min-height:clamp(420px, 52vw, 560px); padding-block:48px; } .hero__panel{ max-width:560px; } .hero__eyebrow{ margin:0 0 10px; font-weight:700; color:var(--accent); font-size:clamp(15px,2.2vw,18px); } .hero__title{ font-size:clamp(38px,7vw,68px); color:var(--ink); margin:0 0 18px; letter-spacing:.02em; } .hero__lead{ margin:0 0 26px; font-size:clamp(16px,2vw,18px); color:var(--ink); line-height:1.9; max-width:46ch; } .hero__actions{ display:flex; flex-wrap:wrap; gap:12px; } /* サブ画像（任意）：ヒーロー下に小さな差し替え枠を3つ並べる */ .hero-sub{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; max-width:520px; } .hero-sub .media{ border-radius:12px; box-shadow:0 4px 14px var(--shadow); } /* ----------------------------------------------------------------- 6. 見出し（セクション見出し） ----------------------------------------------------------------- */ .section-head{ text-align:center; margin-bottom:34px; } .section-head h2{ display:inline-flex; align-items:center; gap:14px; font-size:clamp(24px,4vw,32px); color:var(--ink); } .section-head h2::before, .section-head h2::after{ content:"✿"; color:var(--accent); font-size:.62em; opacity:.85; } .section-head p{ margin:10px auto 0; color:var(--ink-soft); max-width:52ch; } /* ----------------------------------------------------------------- 7. 画像枠（縦横比固定・object-fit cover） ----------------------------------------------------------------- */ .media{ position:relative; overflow:hidden; background:var(--cream-2); } .media img{ width:100%; height:100%; object-fit:cover; object-position:center; } .media.r-16x9{ aspect-ratio:16/9; } .media.r-3x2{ aspect-ratio:3/2; } .media.r-4x3{ aspect-ratio:4/3; } .media.r-1x1{ aspect-ratio:1/1; } .media.r-4x5{ aspect-ratio:4/5; } /* ----------------------------------------------------------------- 8. 商品カード（3ページ共通の形＝再利用部品） ----------------------------------------------------------------- */ .product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); } .card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:0 4px 14px var(--shadow); transition:transform .15s, box-shadow .15s; } .card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px var(--shadow-2); } .card .media{ aspect-ratio:4/3; } .card__body{ display:flex; flex-direction:column; gap:8px; padding:18px 18px 22px; flex:1; } .card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .card__title{ font-size:20px; color:var(--ink); } .card__desc{ margin:0; font-size:15.5px; color:var(--ink-soft); line-height:1.75; } .card__meta{ margin:0; font-size:14px; color:var(--ink-soft); } .card__price{ margin:auto 0 0; font-size:19px; font-weight:700; color:var(--accent-strong); padding-top:6px; } .card__price[hidden]{ display:none; } /* 価格未入力なら非表示 */ .card__actions{ margin-top:10px; } .card__actions .btn{ min-height:46px; font-size:15px; } /* 在庫・販売状態バッジ */ .badge{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:13px; font-weight:700; white-space:nowrap; } .badge--onsale{ background:#e4efe1; color:#2f6b3a; } .badge--low{ background:#fbeede; color:#9a5a16; } .badge--soldout{background:#ece6df; color:#75665a; } .badge--reserve{background:#e2ecf6; color:#2a5a86; } .badge--end{ background:#efe9e3; color:#8a7a6c; } /* ----------------------------------------------------------------- 9. 導線（プロモ）カード 3枚 ----------------------------------------------------------------- */ .cta-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); } .promo{ display:flex; flex-direction:column; gap:10px; background:var(--accent-soft); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px 26px; } .promo h3{ font-size:20px; color:var(--accent-strong); } .promo p{ margin:0; font-size:15px; color:var(--ink-soft); flex:1; } .promo .btn{ margin-top:6px; } /* ----------------------------------------------------------------- 10. お知らせ・注意書き ----------------------------------------------------------------- */ .notice{ background:var(--accent-soft); border-left:5px solid var(--accent); border-radius:8px; padding:14px 18px; font-size:15px; color:var(--ink); } .callout{ background:var(--paper); border:1px dashed var(--accent); border-radius:10px; padding:14px 18px; color:var(--ink-soft); font-size:15px; } /* ----------------------------------------------------------------- 11. 営業時間・店舗情報 ----------------------------------------------------------------- */ .info-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:start; } .hours{ width:100%; border-collapse:collapse; } .hours caption{ text-align:left; font-family:var(--font-serif); font-weight:700; font-size:20px; margin-bottom:10px; color:var(--ink); } .hours th,.hours td{ padding:11px 8px; border-bottom:1px solid var(--line); text-align:left; font-size:16px; } .hours th{ width:7.5em; font-weight:600; color:var(--ink-soft); } .shop-meta dt{ font-weight:700; color:var(--ink-soft); font-size:14px; margin-top:12px; } .shop-meta dd{ margin:2px 0 0; font-size:17px; } /* ----------------------------------------------------------------- 12. フォーム ----------------------------------------------------------------- */ .form{ display:grid; gap:18px; max-width:680px; } .form-row{ display:grid; gap:6px; } .form-row > label{ font-weight:700; font-size:15.5px; } .form-row .req{ color:var(--accent-strong); font-size:13px; margin-left:6px; } .form-row .opt{ color:var(--ink-soft); font-size:13px; margin-left:6px; } .input,.select,.textarea,.file{ width:100%; padding:13px 14px; font-size:16px; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:8px; transition:border-color .15s, box-shadow .15s; } .input:focus,.select:focus,.textarea:focus,.file:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:none; } .textarea{ min-height:120px; resize:vertical; } .form-2col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } /* ----------------------------------------------------------------- 13. パンくずリスト ----------------------------------------------------------------- */ .breadcrumb{ background:var(--paper); border-bottom:1px solid var(--line); } .breadcrumb ol{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:12px 20px; max-width:var(--container); margin-inline:auto; font-size:13.5px; color:var(--ink-soft); } .breadcrumb a{ text-decoration:none; color:var(--ink-soft); } .breadcrumb a:hover{ color:var(--accent-strong); text-decoration:underline; } .breadcrumb li+li::before{ content:"›"; margin-right:6px; color:var(--line); } .breadcrumb [aria-current="page"]{ color:var(--ink); } /* ----------------------------------------------------------------- 14. フッター（3ページ共通） ----------------------------------------------------------------- */ .footer-cta{ background:var(--accent); } .footer-cta ul{ display:grid; grid-template-columns:repeat(3,1fr); list-style:none; margin:0; padding:0; max-width:var(--container); margin-inline:auto; } .footer-cta a{ display:flex; align-items:center; justify-content:center; gap:10px; padding:18px 12px; color:var(--on-accent); text-decoration:none; font-weight:700; font-size:15.5px; border-right:1px solid rgba(255,255,255,.22); } .footer-cta li:last-child a{ border-right:0; } .footer-cta a:hover{ background:rgba(0,0,0,.08); } .footer-cta .ico{ width:1.2em; height:1.2em; } .footer-main{ background:#2c1f16; color:#e9ddcd; } .footer-main .container{ padding-block:40px; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; } .footer-main h3{ font-family:var(--font-serif); font-size:21px; color:#fff; margin-bottom:10px; } .footer-main p{ margin:4px 0; font-size:14.5px; line-height:1.8; color:#d8c9b6; } .footer-nav h4{ font-size:13px; letter-spacing:.08em; color:#bba98f; margin:0 0 10px; font-family:var(--font-sans); font-weight:700; } .footer-nav ul{ list-style:none; margin:0; padding:0; } .footer-nav li{ margin-bottom:8px; } .footer-nav a{ color:#e3d6c4; text-decoration:none; font-size:14.5px; } .footer-nav a:hover{ color:#fff; text-decoration:underline; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); } .footer-bottom .container{ padding-block:14px; } .footer-bottom p{ margin:0; font-size:12.5px; color:#bdae9b; text-align:center; } /* ----------------------------------------------------------------- 15. スマホ固定ナビ（画面下部） ----------------------------------------------------------------- */ .mobile-bar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; grid-template-columns:repeat(4,1fr); background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -4px 16px var(--shadow); padding-bottom:env(safe-area-inset-bottom); } .mobile-bar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; min-height:60px; text-decoration:none; color:var(--ink); font-size:11px; font-weight:700; border-right:1px solid var(--line); } .mobile-bar a:last-child{ border-right:0; } .mobile-bar a:hover{ color:var(--accent-strong); } .mobile-bar .ico{ width:22px; height:22px; } /* ----------------------------------------------------------------- 16. レスポンシブ ----------------------------------------------------------------- */ @media (max-width:980px){ .product-grid{ grid-template-columns:repeat(2,1fr); } .cta-grid{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr 1fr; } .info-grid{ grid-template-columns:1fr; } } @media (max-width:760px){ :root{ --header-h:60px; } body{ padding-bottom:64px; } /* 下部固定バーの分の余白 */ .mobile-bar{ display:grid; } /* ナビをハンバーガー化 */ .nav-toggle{ display:inline-flex; } .header-tel{ display:none; } /* 電話は下部バー＆メニュー内に集約 */ .main-nav{ position:absolute; left:0; right:0; top:100%; background:var(--cream); border-bottom:1px solid var(--line); box-shadow:0 12px 24px var(--shadow); display:none; padding:8px 0 14px; } .main-nav.is-open{ display:block; } .main-nav ul{ flex-direction:column; align-items:stretch; gap:0; padding:0 14px; } .main-nav a{ padding:14px 10px; border-bottom:1px solid var(--line); font-size:17px; border-radius:0; } .main-nav a[aria-current="page"]::after{ display:none; } .main-nav .nav-tel{ display:block; margin-top:10px; } /* メインビジュアル：画像と文字を上下に */ .hero{ background:var(--paper); } .hero__media{ position:relative; inset:auto; aspect-ratio:3/2; } .hero__scrim{ display:none; } .hero__inner{ display:block; min-height:0; padding:28px 0 4px; } .hero__panel{ max-width:none; } .hero-sub{ max-width:none; } .section{ padding-block:46px; } .footer-grid{ grid-template-columns:1fr; gap:22px; } .footer-cta a{ font-size:13.5px; padding:14px 6px; flex-direction:column; gap:4px; } } @media (max-width:520px){ .product-grid{ grid-template-columns:1fr; } .form-2col{ grid-template-columns:1fr; } .hero-sub{ grid-template-columns:repeat(3,1fr); } } /* ----------------------------------------------------------------- 17. 動きの抑制（アクセシビリティ） ----------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ transition:none!important; animation:none!important; } } /* ----------------------------------------------------------------- 18. アンケート／補助ユーティリティ（feedback ページ等で使用） ----------------------------------------------------------------- */ .container--narrow{ max-width:780px; } .choice-grid{ display:flex; flex-wrap:wrap; gap:10px 14px; } .choice{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); font-size:16px; cursor:pointer; min-height:48px; } .choice:hover{ border-color:var(--accent); } .choice input{ width:20px; height:20px; accent-color:var(--accent); flex:none; } .form-sep{ border:0; border-top:1px solid var(--line); margin:10px 0 2px; } .form-note{ font-size:14px; color:var(--ink-soft); margin:2px 0; } .btn--lg{ min-height:58px; font-size:17px; padding:15px 34px; } .footer-name{ font-family:var(--font-serif); font-size:21px; color:#fff; margin-bottom:8px; } .footer-copy{ margin-top:14px !important; font-size:13px; color:#b6a692; } .footer-main a{ color:#ecd9c2; } .footer-main a:hover{ text-decoration:underline; } /* 迷惑送信よけ（画面には出しません） */ .honey{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; } /* ----------------------------------------------------------------- 19. よくある質問（FAQ） ----------------------------------------------------------------- */ .faq{ max-width:780px; margin-inline:auto; } .faq__item{ border:1px solid var(--line); border-radius:12px; background:var(--paper); margin-bottom:12px; overflow:hidden; } .faq__q{ cursor:pointer; list-style:none; padding:16px 48px 16px 18px; position:relative; font-family:var(--font-serif); font-weight:700; font-size:17px; color:var(--ink); } .faq__q::-webkit-details-marker{ display:none; } .faq__q::after{ content:"＋"; position:absolute; right:18px; top:50%; transform:translateY(-50%); color:var(--accent-strong); font-weight:700; transition:transform .2s; } .faq__item[open] .faq__q::after{ content:"−"; } .faq__a{ padding:0 18px 18px; color:var(--ink-soft); font-size:15.5px; } /* ----------------------------------------------------------------- 20. お知らせ（ニュース） ----------------------------------------------------------------- */ .news-list{ list-style:none; margin:0 auto; padding:0; max-width:780px; } .news-item{ display:flex; gap:16px; padding:16px 4px; border-bottom:1px solid var(--line); } .news-date{ flex:none; color:var(--accent-strong); font-weight:700; font-size:14px; min-width:6.5em; padding-top:2px; } .news-title{ margin:0; font-weight:700; color:var(--ink); } .news-text{ margin:6px 0 0; color:var(--ink-soft); font-size:15px; } @media (max-width:520px){ .news-item{ flex-direction:column; gap:4px; } } /* ===== 言語切替（多言語） ===== */ /* 上部バー（電話＋言語切替） */ .topbar{ background:var(--accent-soft); border-bottom:1px solid var(--line); } .topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; padding-block:3px; } .topbar-tel{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--ink-soft); text-decoration:none; white-space:nowrap; letter-spacing:.02em; } .topbar-tel:hover{ color:var(--accent-strong); } .topbar-tel .ico{ width:14px; height:14px; flex:none; } /* 言語切替（横一列・折り返さない・右寄せ） */ .lang-switch{display:flex;align-items:center;gap:6px} .lang-switch__ico{font-size:14px;line-height:1;opacity:.7} .lang-switch ul{display:flex;flex-wrap:nowrap;gap:2px;list-style:none;margin:0;padding:0} .lang-switch li{margin:0} .lang-switch a,.lang-switch span{display:inline-block;padding:2px 8px;font-size:12.5px;border-radius:6px;text-decoration:none;line-height:1.5;white-space:nowrap} .lang-switch a{color:var(--ink-soft,#5b5048);border:1px solid transparent} .lang-switch a:hover{background:rgba(0,0,0,.05)} .lang-switch .is-current{background:var(--accent,#c9a24a);color:#fff;font-weight:600} /* ナビは折り返さない／PCでは重複する電話ボタンをナビに出さない */ .main-nav a{ white-space:nowrap; } .nav-tel{ display:none; } @media (max-width:900px){ .topbar-inner{ min-height:0; padding-block:5px; gap:8px; } .topbar-tel{ font-size:12px; } .topbar-right{ gap:8px; } .sns-list--top{ display:none; } .lang-switch{ gap:4px; } .lang-switch ul{ flex-wrap:wrap; justify-content:flex-end; } .lang-switch a,.lang-switch span{ padding:2px 6px; font-size:11.5px; } } /* ===== ヒーロー：画像を上に大きく表示し、文字を下に置くレイアウト ===== */ .hero--stacked{ background:var(--paper); } /* 画像は切り抜かず全体を表示。中央寄せ・角丸でカード風に大きく */ .hero--stacked .hero__media{ position:relative; inset:auto; aspect-ratio:auto; max-width:1180px; margin:0 auto; padding:22px 20px 0; overflow:visible; background:transparent; } .hero--stacked .hero__media img{ display:block; width:100%; height:auto; max-height:80vh; object-fit:contain; border-radius:14px; box-shadow:0 10px 30px var(--shadow); } .hero--stacked .hero__scrim{ display:none; } .hero--stacked .hero__inner{ display:block; min-height:0; padding:26px 0 8px; } .hero--stacked .hero__panel{ max-width:none; } .hero--stacked .hero__lead{ max-width:66ch; } .hero--stacked .hero-sub{ max-width:none; } /* ===== SNSアイコン（ブランドカラーの丸ボタン・ヘッダー/フッター共通） ===== */ .sns-list{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; list-style:none; margin:0; padding:0; } .sns-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:transform .15s, filter .15s; } .sns-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); } .sns-btn svg{ width:21px; height:21px; } .sns--instagram{ background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .sns--facebook{ background:#1877F2; } .sns--line{ background:#06C755; } .sns--x{ background:#000; } .sns--youtube{ background:#FF0000; } .sns--tiktok{ background:#000; } .sns--shop{ background:#e8703a; } .sns--web{ background:#fff; border:1px solid var(--line,#e3d9c8); color:var(--accent,#c9a24a); } .sns-btn .sns-img{ width:100%; height:100%; border-radius:50%; object-fit:cover; background:#fff; display:block; } /* フッター内の見出し */ .footer-sns{ margin-top:20px; } .footer-sns h4{ font-size:14px; color:#fff; margin:0 0 10px; letter-spacing:.04em; } /* ヘッダー上部バー右側（SNS＋言語切替）。SNSは小さめの丸 */ .topbar-right{ display:flex; align-items:center; gap:14px; } .sns-list--top{ gap:7px; } .sns-list--top .sns-btn{ width:28px; height:28px; box-shadow:none; } .sns-list--top .sns-btn svg{ width:16px; height:16px; } /* ===== 初回表示時の言語選択モーダル ===== */ .lang-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(40,28,18,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .22s; } .lang-modal.is-open{ opacity:1; } .lang-modal__card{ position:relative; background:var(--cream,#fbf6ec); border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.35); padding:36px 30px 30px; max-width:420px; width:100%; text-align:center; transform:translateY(10px); transition:transform .22s; } .lang-modal.is-open .lang-modal__card{ transform:translateY(0); } .lang-modal__title{ font-family:var(--font-serif,serif); font-size:22px; color:var(--ink,#2c1f16); margin:0 0 22px; line-height:1.4; } .lang-modal__title span{ display:block; font-family:var(--font-sans,sans-serif); font-size:12.5px; color:var(--ink-soft,#5b5048); font-weight:400; margin-top:8px; letter-spacing:.02em; } .lang-modal__btns{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .lang-modal__btn{ -webkit-appearance:none; appearance:none; border:1.5px solid var(--line,#e3d9c8); background:#fff; color:var(--ink,#2c1f16); font-size:16px; font-weight:600; padding:15px 10px; border-radius:12px; cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .12s; } .lang-modal__btn:hover{ background:var(--accent-soft,#f3ead7); border-color:var(--accent,#c9a24a); transform:translateY(-1px); } .lang-modal__btn.is-current{ background:var(--accent,#c9a24a); border-color:var(--accent,#c9a24a); color:#fff; } .lang-modal__close{ position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; background:transparent; font-size:24px; line-height:1; color:var(--ink-soft,#5b5048); cursor:pointer; border-radius:8px; } .lang-modal__close:hover{ background:rgba(0,0,0,.06); color:var(--ink,#2c1f16); } @media (max-width:420px){ .lang-modal__btns{ grid-template-columns:1fr; } }