/* ============================================================= すこやか ひだまり家族 — Design Tokens & Base Components (v2) Brand concept : 陽だまりの温かさ × 医療の安心 = 地域の健康の“居場所” v2改修 : PC横幅拡大 / シニア可読の文字大型化 / WCAG AAコントラスト是正 Policy : Senior-first / WCAG AA（本文19px基準・高コントラスト・大きなタップ領域56px） 単一トークン源 : LP・チラシ両方が読み込む。色/書体はここを正とする。 フォント読込 : HTML側 に Google Fonts を配置（本CSSは font-family 指定のみ） ============================================================= */ :root { /* ===== Color — ひだまり（暖色）===== */ --c-primary: #F18A32; /* ひだまりオレンジ（メイン・面/アイコン） */ --c-primary-strong: #E2701A; /* 濃・ホバー・塗りボタン */ --c-primary-ink: #B4530E; /* テキスト用の濃オレンジ（白背景で AA 4.6:1・白文字を乗せる面で 5:1） */ --c-primary-050: #FFF4E8; /* 極薄オレンジ背景 */ --c-primary-100: #FCE3C7; /* 薄オレンジ（帯・区切り） */ --c-sun: #F9C449; /* ひだまりイエロー（ハイライト・バッジ） */ --c-sun-soft: #FDECBB; /* 薄イエロー背景 */ /* ===== Color — 安心（医療の淡いグリーン）===== */ --c-green: #5FAE8A; /* 安心グリーン（線・面） */ --c-green-ink: #2C7A5B; /* 濃緑（白背景AA・白文字を乗せる面 5.2:1） */ --c-green-050: #EAF5EF; /* 薄グリーン背景 */ /* ===== Color — 文字・背景 ===== */ --c-ink: #3B2E27; /* 本文（温かいこげ茶。純黒を避ける） */ --c-ink-soft: #6E5D53; /* 副次テキスト・キャプション */ --c-bg: #FFFBF4; /* ページ背景（陽だまりの生成り） */ --c-surface: #FFFFFF; /* カード・白 */ --c-border: #EFE2D2; /* 温かいライトボーダー */ /* ===== Color — 機能色 ===== */ --c-line: #06C755; /* LINE公式ブランドグリーン（アイコン・小面アクセント用） */ --c-line-btn: #0A7A38; /* LINE CTAボタン塗り（白文字で AA 5.4:1／可読性優先の濃緑） */ --c-line-btn-hover: #08652E; /* LINEボタン ホバー */ --c-alert: #C43D14; /* 「初回無料」「限定15名」等の強調（白文字で AA 5.2:1） */ /* ===== Typography ===== */ --font-heading: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "YuGothic", "Yu Gothic", sans-serif; --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "YuGothic", "Yu Gothic", "Meiryo", sans-serif; --font-serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; /* シニア可読：本文19px基準・行間ゆったり（v2で拡大） */ --fs-sm: 1rem; /* 16px 注記・但し書き */ --fs-base: 1.1875rem; /* 19px 本文（最小） */ --fs-md: 1.3125rem; /* 21px リード・ボタン */ --fs-lg: 1.625rem; /* 26px 小見出し */ --fs-xl: 2rem; /* 32px */ --fs-2xl: 2.5rem; /* 40px セクション見出し */ --fs-hero: clamp(1.75rem, 5vw, 3.5rem); /* H1（レスポンシブ・拡大／狭幅でも溢れない） */ --lh-body: 1.9; --lh-heading: 1.4; /* ===== Spacing scale ===== */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 6.5rem; /* ===== Radius / Shadow ===== */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px; --shadow-soft: 0 6px 20px rgba(178, 120, 60, 0.14); --shadow-card: 0 12px 34px rgba(120, 80, 40, 0.12); /* ===== Layout（v2でPC横幅を拡大）===== */ --container: 1280px; /* 標準コンテンツ幅（旧1080から拡大） */ --container-wide: 1440px; /* ヒーロー等のワイド帯 */ --container-narrow: 820px; /* 長文（読み幅）用 */ --tap-min: 56px; /* タップ領域（シニア配慮・拡大） */ } /* ============================================================= Base ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--c-ink); background: var(--c-bg); font-feature-settings: "palt" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; /* 横スクロール防止（stickyを壊さないclip） */ } img { max-width: 100%; height: auto; display: block; } a { color: var(--c-primary-ink); } h1, h2, h3, h4 { font-family: var(--font-heading); line-height: var(--lh-heading); font-weight: 700; margin: 0 0 .6em; } p { margin: 0 0 1em; } /* ============================================================= Layout helpers ============================================================= */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); } .container--wide { max-width: var(--container-wide); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--sp-8); } .section--tint { background: var(--c-primary-050); } .section--green { background: var(--c-green-050); } /* Section heading pattern */ .eyebrow { display:inline-block; color: var(--c-primary-ink); font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-base); letter-spacing: .04em; margin-bottom: .3em; } .section-title { font-size: var(--fs-2xl); color: var(--c-ink); margin: 0 0 .8em; } /* ============================================================= Buttons（CTA）— LINE=塗り緑（可読性優先の濃緑）を最優先 ============================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: var(--tap-min); padding: 1rem 1.8rem; font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 700; border-radius: var(--r-pill); text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease; line-height: 1.3; text-align: center; } .btn:active { transform: translateY(1px); } .btn--block { width: 100%; } .btn--lg { font-size: var(--fs-lg); padding: 1.15rem 2.2rem; } .btn-line { background: var(--c-line-btn); color: #fff; box-shadow: var(--shadow-soft); } .btn-line:hover { background: var(--c-line-btn-hover); color:#fff; } .btn-tel { background: var(--c-surface); color: var(--c-green-ink); border-color: var(--c-green); } .btn-tel:hover { background: var(--c-green-050); } .btn-form { background: var(--c-surface); color: var(--c-primary-ink); border-color: var(--c-primary); } .btn-form:hover { background: var(--c-primary-050); } .btn-primary { background: var(--c-primary-strong); color:#fff; box-shadow: var(--shadow-soft); } .btn-primary:hover { background: var(--c-primary-ink); color:#fff; } /* ============================================================= Badges / Notes / Cards ============================================================= */ .badge { display:inline-block; padding:.4em 1em; border-radius: var(--r-pill); font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); line-height:1.5; } .badge--alert { background: var(--c-alert); color:#fff; } .badge--sun { background: var(--c-sun); color: var(--c-ink); } .badge--green { background: var(--c-green-050); color: var(--c-green-ink); border:1px solid var(--c-green); } .card { background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--sp-6); } .card--flat { box-shadow:none; } .note { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.75; } /* ============================================================= Accessibility ============================================================= */ a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 3px solid var(--c-green-ink); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* ============================================================= Floating CTA（スマホ下部固定・PC右下） opacity:1 を明示（JS無効/未対応でも表示され続けるフォールバック） ============================================================= */ .floating-cta { position: fixed; left:0; right:0; bottom:0; z-index: 60; opacity: 1; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,251,244,.95); backdrop-filter: blur(6px); border-top:1px solid var(--c-border); box-shadow: 0 -6px 20px rgba(120,80,40,.10); } .floating-cta .container { display:flex; gap:.6rem; align-items:center; } @media (min-width: 960px){ .floating-cta { left:auto; right: 28px; bottom: 28px; width: auto; border-radius: var(--r-pill); border:none; padding: 0; background:transparent; box-shadow:none; backdrop-filter:none; } } /* Utilities */ .u-center { text-align:center; } .u-mt-6 { margin-top: var(--sp-6); } .u-hide { display:none !important; }