/* ========================================================== おやつの実 Lafra（ラフラ） — 共有デザインシステム 固定ページが link rel="stylesheet" でこのファイルを読む。 index.html の FV 専用スタイルはこのファイルに含まない。 ========================================================== */ /* ── Google Fonts（固定ページ共通） ── */ /* @import は各ページの で直接読み込む（パフォーマンスのため） */ /* ── デザイントークン ── */ :root { --bk: #30261f; --ivory: #fbf8f0; --gold: #70843c; --gold-l: #dbe7a9; --cream: #f4efe5; --paper: #fffdfa; --deep: #477b89; --deep-l: #3f7180; --ink: #352c26; --ink-soft:#4c4037; --muted: #746b63; --line: #ded6ca; --radius: 20px; --shadow: 0 28px 64px -32px rgba(48,38,31,.2); } /* ── リセット ── */ * { box-sizing: border-box; margin: 0; padding: 0 } html { scroll-behavior: smooth } body { color: var(--ink); background: var(--cream); font-family: "Zen Kaku Gothic New", sans-serif; line-height: 1.85; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none } img { max-width: 100%; display: block } h1, h2, h3, .lead { word-break: auto-phrase; text-wrap: balance } /* ── タイポグラフィユーティリティ ── */ .mincho { font-family: "Shippori Mincho", serif } .mono { font-family: "Space Grotesk", sans-serif; letter-spacing: .08em } /* ── アクセシビリティ ── */ .skip-link { position: absolute; left: 16px; top: -56px; padding: 12px 20px; border-radius: 12px; background: #fff; z-index: 200; transition: top .2s; } .skip-link:focus { top: 16px } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px } /* ── ヘッダー ── */ .site-header { position: sticky; top: 0; z-index: 80; backdrop-filter: blur(14px); background: rgba(244,239,229,.88); border-bottom: 1px solid rgba(79,135,150,.1); } .site-header::after { content: ""; display: block; height: 2px; background: linear-gradient(90deg, var(--deep), var(--gold)); } .site-header .inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; width: min(1240px, calc(100% - 40px)); margin: 0 auto; } .brand { display: flex; align-items: center; gap: 14px } .brand-mark { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; background: var(--deep); display: grid; place-items: center; } .brand-mark img { width: 100%; height: 100%; object-fit: cover } .brand-copy strong { display: block; font-size: 15px; font-family: "Shippori Mincho", serif; line-height: 1.3; color: var(--ink); } .brand-copy span { display: block; font: 500 9px/1 "Space Grotesk", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .site-nav { display: flex; align-items: center; gap: clamp(12px,2vw,28px) } .site-nav a { font: 500 12px/1 "Space Grotesk", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); transition: color .2s; } .site-nav a:hover, .site-nav a[aria-current] { color: var(--deep) } .site-nav a[aria-current] { border-bottom: 2px solid var(--gold); padding-bottom: 2px } .header-cta { display: inline-flex; align-items: center; padding: 10px 22px; background: var(--deep); color: #fff; font: 700 12px/1 "Space Grotesk", sans-serif; letter-spacing: .18em; text-transform: uppercase; border-radius: 4px; transition: background .25s; white-space: nowrap; } .header-cta:hover { background: var(--deep-l) } /* ── ページヒーロー（固定ページ共通タイトルバンド） ── */ .page-hero { background: var(--deep); padding: clamp(56px,8vw,96px) 0 clamp(40px,6vw,72px); position: relative; overflow: hidden; } .page-hero .inner { width: min(1200px, calc(100% - 40px)); margin: 0 auto; position: relative; z-index: 1; } .breadcrumb { display: flex; align-items: center; gap: 8px; font: 500 11px/1 "Space Grotesk", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(251,248,240,.45); margin-bottom: 20px; } .breadcrumb a { color: rgba(251,248,240,.45); transition: color .2s } .breadcrumb a:hover { color: var(--gold-l) } .breadcrumb span { color: rgba(251,248,240,.7) } .page-hero h1 { font: 800 clamp(36px,5.5vw,72px)/1.15 "Shippori Mincho", serif; color: var(--ivory); letter-spacing: .02em; margin-bottom: 16px; } .page-hero p { font: 400 14px/1.8 "Zen Kaku Gothic New", sans-serif; color: rgba(251,248,240,.65); max-width: 480px; } /* ── レイアウト共通 ── */ .container { width: min(1200px, calc(100% - 40px)); margin: 0 auto } .section { padding: clamp(64px,9vw,112px) 0 } /* ── タイポグラフィ ── */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 11px/1 "Space Grotesk", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--deep); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor } .section-title { font: 800 clamp(28px,4vw,52px)/1.2 "Shippori Mincho", serif; color: var(--ink); } /* ── ボタン ── */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 14px 32px; border-radius: 4px; font: 700 12px/1 "Space Grotesk", sans-serif; letter-spacing: .2em; text-transform: uppercase; transition: transform .25s, background .25s, color .25s; white-space: nowrap; } .btn:hover { transform: translateY(-2px) } .btn-primary, .btn-ivory-inv { background: var(--deep); color: #fff } .btn-primary:hover { background: var(--deep-l) } .btn-ivory { background: var(--ivory); color: var(--deep) } .btn-ivory:hover { background: #fff } .btn-outline-ivory { border: 1.5px solid rgba(251,248,240,.4); color: var(--ivory) } .btn-outline-ivory:hover { background: rgba(251,248,240,.1) } /* ── CTAバナー ── */ .cta-banner { background: var(--deep); padding: clamp(48px,7vw,80px) 0; text-align: center } .cta-banner h2 { font: 800 clamp(24px,3.5vw,40px)/1.3 "Shippori Mincho", serif; color: var(--ivory); margin-bottom: 12px; } .cta-banner p { color: rgba(251,248,240,.65); font-size: 14px; margin-bottom: 32px } .cta-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center } /* ── フッター ── */ .site-footer { background: var(--bk); color: rgba(251,248,240,.55); padding: 64px 0 32px } .furusato-banner { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 18px; position: relative; overflow: hidden; isolation: isolate; margin: 0 0 40px; padding: 22px 26px; border: 1px solid rgba(219,231,169,.34); border-radius: 4px; background: linear-gradient(115deg, #477b89 0%, #2f626e 62%, #30261f 100%); color: var(--ivory); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .furusato-banner::before { content: ""; position: absolute; z-index: -1; width: 280px; height: 280px; right: 16%; top: 50%; border-radius: 50%; transform: translateY(-50%); background: radial-gradient(circle, rgba(219,231,169,.16), transparent 68%); pointer-events: none; } .furusato-banner:hover { transform: translateY(-3px); border-color: rgba(219,231,169,.7); box-shadow: 0 18px 40px -24px rgba(0,0,0,.7) } .furusato-banner-mark { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border: 1px solid rgba(251,248,240,.5); border-radius: 50%; color: var(--gold-l); font: 800 22px/1 "Shippori Mincho",serif; } .furusato-banner-content { display: grid; gap: 2px; min-width: 0 } .furusato-banner-kicker { color: var(--gold-l); font: 700 10px/1.3 "Space Grotesk",sans-serif; letter-spacing: .18em; text-transform: uppercase } .furusato-banner-title { color: var(--ivory); font: 800 clamp(19px,2.5vw,27px)/1.35 "Shippori Mincho",serif } .furusato-banner-copy { color: rgba(251,248,240,.72); font-size: 12px; line-height: 1.7 } .furusato-banner-action { display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px; border: 1px solid rgba(251,248,240,.44); border-radius: 3px; color: var(--ivory); font: 700 11px/1.4 "Zen Kaku Gothic New",sans-serif; white-space: nowrap } .furusato-banner-action span { color: var(--gold-l); font-size: 16px; line-height: 1 } .footer-brand { min-width: 0 } .footer-brand .furusato-banner { width: min(100%, 520px); margin: 24px 0 0; } @media(max-width:640px) { .furusato-banner { grid-template-columns: auto minmax(0,1fr); gap: 12px 14px; padding: 19px } .furusato-banner-mark { width: 44px; height: 44px; font-size: 19px } .furusato-banner-action { grid-column: 1 / -1; justify-content: center; width: 100% } } .footer-top { display: grid; grid-template-columns: auto 1fr; gap: clamp(40px,6vw,80px); padding-bottom: 40px; border-bottom: 1px solid rgba(251,248,240,.08); margin-bottom: 32px; } .footer-brand-name { font: 700 18px/1.3 "Shippori Mincho", serif; color: var(--ivory); margin: 0 0 8px; } .footer-brand-sub { font: 500 10px/1 "Space Grotesk", sans-serif; letter-spacing: .25em; text-transform: uppercase; color: rgba(251,248,240,.4); } .footer-brand p { font-size: 13px; margin: 16px 0 0; line-height: 1.8; max-width: 280px } .footer-links { display: flex; flex-wrap: wrap; gap: clamp(16px,3vw,40px); align-items: start; justify-content: flex-end; } .footer-col h4 { font: 700 11px/1 "Space Grotesk", sans-serif; letter-spacing: .25em; text-transform: uppercase; color: rgba(251,248,240,.4); margin: 0 0 14px; } .footer-col a { display: block; color: rgba(251,248,240,.65); font-size: 13px; margin-bottom: 10px; transition: color .2s } .footer-col a:hover { color: var(--ivory) } .footer-copy { text-align: center; font: 400 11px/1 "Space Grotesk", sans-serif; letter-spacing: .15em; color: rgba(251,248,240,.28); } /* ── ハンバーガーボタン ── */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 8px; border-radius: 8px; flex-shrink: 0; transition: background .2s; } .hamburger:hover { background: rgba(79,135,150,.08) } .hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s; } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0 } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) } /* ── モバイルナビ ── */ .mobile-nav { position: fixed; inset: 0; background: var(--cream); z-index: 79; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; pointer-events: none; transform: translateY(-12px); transition: opacity .28s, transform .28s cubic-bezier(.4,0,.2,1); } .mobile-nav.open { opacity: 1; pointer-events: auto; transform: translateY(0); } .mobile-nav a { font: 700 24px/1.2 "Shippori Mincho", serif; color: var(--ink); padding: 14px 32px; border-radius: 8px; transition: color .2s, background .2s; letter-spacing: .04em; } .mobile-nav a:hover { color: var(--deep); background: rgba(79,135,150,.06) } .mobile-nav-cta { margin-top: 16px; background: var(--deep) !important; color: #fff !important; font: 700 14px/1 "Space Grotesk", sans-serif !important; letter-spacing: .18em !important; text-transform: uppercase; padding: 14px 36px !important; border-radius: 4px !important; } .mobile-nav-cta:hover { background: var(--deep-l) !important } /* ── レスポンシブ ── */ @media (max-width: 900px) { .site-nav { display: none } .hamburger { display: flex } .footer-top { grid-template-columns: 1fr } .footer-links { justify-content: flex-start } } @media (min-width: 901px) { .hamburger { display: none } .mobile-nav { display: none !important } }