@charset "utf-8"; /* ========================================================================= なかうずらクリニック共通"骨格"スタイル(ヘッダー/トップバー/グローバルナビ/ フッター/モバイル固定フッター/CTA帯/ボタン)。 2026-08-30指示書§2により style.css から抽出した。目的は、Tailwindで組んだトップページ(src/pages/index.astro)がこのファイル1本だけを読み込めば下層ページ(site/*.html)と同一のヘッダー/フッター/ナビ/CTA帯を再現できるようにすること。【重要な制約(壊さないこと)】ここに書くセレクタは必ずクラス/属性スコープ(.topbar / .site-header / .gnav / .site-footer / .mobile-quicknav / .btn / .cta-band 等)に限定し、裸の要素セレクタ(a, img, body, h1-h4 等)を絶対に含めないこと。トップページは Tailwind の class ユーティリティだけで本文を組んでおり、裸の要素セレクタを混入させると意図せず本文の配色・書体を上書きしてしまう (style.cssの `a{color:var(--accent)}` 等がその失敗例)。下層ページ(build/template.js の renderPage())・ブログ(BaseLayout.astro)はこのファイルに続けて style.css も読み込む。style.css 側にはもう :root トークン定義は無いため、必ずこのファイルを先に読み込むこと。 ========================================================================= */ :root { /* 共通(トップページ・医院案内など"科に入る前")のカラートークン(design.mdc)。内科/歯科の下層ページは (build/template.js・ build/manifest.jsのGROUP_DEPT)で下の --accent 系3色 + --label / --heading-accent を上書きする(2026-08-29後藤先生指示: 内科=緑・歯科=赤で塗り分け、間違え厳禁)。 --yellow(CTA専用の黄)・見出し文字色(--heading-dark)・本文色(--ink)・--accent-warmは科によらず絶対固定(下のdata-dept блокでも一切上書きしない)。 */ --accent: #1169ac; /* design.mdc --color-primary */ --accent-dark: #134e7e; /* design.mdc --color-primary-dark */ --accent-soft: #eaf3fa; /* design.mdc --color-blue-tint */ --accent-warm: #e89391; /* design.mdc --color-coral(差し色・科によらず固定) */ --label: #134e7e; /* 科ラベル文字色。共通ページはprimary-darkを流用 */ --heading-accent: #134e7e; /* 見出し横のアクセント線。共通ページはprimary-darkを流用 */ --ink: #5c554e; /* design.mdc --color-body */ --ink-soft: #6e665e; /* design.mdc --color-muted */ --bg: #ffffff; --bg-soft: #f7f5f1; /* design.mdc --color-bg */ --border: #e4dfd8; /* design.mdc --color-line */ --green: #4e9e7a; /* design.mdc --color-green(差し色。診療時間表の○など) */ --green-dark: #3b7d5f; /* design.mdc --color-green-dark */ --green-tint: #e9f3ee; /* design.mdc --color-green-tint */ --coral: #e89391; /* design.mdc --color-coral(--accent-warmと同値。歯科予約ボタン等で使用) */ --coral-dark: #c96864; /* design.mdc --color-coral-dark */ --coral-tint: #fbeeed; /* design.mdc --color-coral-tint */ --yellow: #eeb033; /* design.mdc --color-accent(CTA専用の黄) */ --yellow-ink: #3a2a00; /* design.mdc --color-accent-ink(黄背景の上の文字は必ずこれ) */ --yellow-tint: #fcf1d9; /* design.mdc --color-yellow-tint */ --heading-dark: #2a2622; /* design.mdc --color-heading。情報フッターなど濃色面に使う */ --font-heading: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; --font-body: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; --maxw: 1040px; --radius: 16px; --shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); /* Tailwind shadow-smと同一 */ } /* 内科ページ(内科・循環器内科・呼吸器内科・小児科・予防接種・感染対策・自費診療/健診) */ [data-dept="naika"] { --accent: #1E8F5A; --accent-dark: #166B44; --accent-soft: #E9F3EE; --label: #3B7D5F; --heading-accent: #166B44; } /* 歯科ページ */ [data-dept="shika"] { --accent: #D9524B; --accent-dark: #A8433D; --accent-soft: #FBEDEC; --label: #B8433C; --heading-accent: #A8433D; } * { box-sizing: border-box; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 8px 16px; z-index: 1000; } .skip-link:focus { left: 0; } /* ---------- Utility top bar ---------- */ /* ページ最上部の帯。科の基調色(--accent)を濃色でそのまま出す一番目立つ場所 (2026-08-29後藤先生指示: 一目で内科/歯科がわかる配色。薄色化は不可)。 */ .topbar { background: var(--accent); color: #fff; font-size: .82rem; font-weight: 700; } .topbar__inner { max-width: var(--maxw); margin: 0 auto; padding: 6px 16px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; text-align: center; } .topbar a { color: #fff; text-decoration: none; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); backdrop-filter: saturate(180%) blur(6px); } .header__inner { max-width: var(--maxw); margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* 幅の狭いスマホ(実測〜499px)ではロゴ+ボタン3個+ハンバーガーが1行に収まらず、ボタン群のうち1個だけが次の行へ孤立して見える不具合があったため、その場合はボタン群(header__actions)をまとめて丸ごと2行目へ送る (個別ボタンの内部折り返しはさせない。2026-08-30第2回検査で実測・追加対応)。 */ @media (max-width: 899px){ .header__inner { flex-wrap: wrap; } .header__actions { flex-wrap: nowrap; margin-left: auto; } } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .brand__logo { height: 40px; width: auto; display: block; } @media (min-width: 900px){ .brand__logo { height: 46px; } } .brand__name { font-family: var(--font-heading); font-weight: 700; font-size: 1.12rem; letter-spacing: .02em; line-height: 1.3; } .brand__tag { display: block; font-size: .68rem; color: var(--ink-soft); font-weight: 400; } .header__actions { display: flex; align-items: center; gap: 8px; row-gap: 8px; flex-wrap: wrap; justify-content: flex-end; } /* 事前問診ボタンは「白地+黄アウトライン+こげ茶文字」の特別扱い(黄一色ではない) */ .header__actions .btn--primary { background: #fff; color: var(--yellow-ink); border-color: var(--yellow); } .header__actions .btn--primary:hover { background: var(--yellow-tint); } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 16px; font-weight: 700; font-size: .9rem; font-family: var(--font-heading); text-decoration: none; border: 1.5px solid transparent; white-space: nowrap; cursor: pointer; } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-dark); color:#fff; } .btn--tel { background: #fff; color: var(--accent); border-color: var(--accent); } /* ヘッダーの内科/歯科の電話ボタンは、表示中ページの科(--accent)に関係なく常に固定色。両ボタンが同じヘッダーに並ぶため、data-deptで揃えると片方が誤った色になる。 */ .btn--tel-naika { color: #1E8F5A; border-color: #1E8F5A; } .btn--tel-shika { color: #D9524B; border-color: #D9524B; } .btn--ghost { background:#fff; color: var(--accent); border-color: var(--border); } .btn--lg { padding: 13px 26px; font-size: 1rem; } /* 医科WEB予約(clius)。ヘッダーでは黄地+こげ茶文字で最も目立たせる(2026-08-30指示書§3.2)。 CTA帯は既に「事前問診」が黄のため、CTA帯の中だけは白地アウトラインに落とす(黄はCTA専用の原則を維持)。 */ .btn--booking { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); } .btn--booking:hover { opacity: .9; } .cta-band .btn--booking { background: transparent; color: #fff; border-color: #fff; } .cta-band .btn--booking:hover { background: rgba(255,255,255,.15); opacity: 1; } /* 歯科予約。歯科ブランドの珊瑚色で固定(科によらず変わらない導線)。 */ .btn--dental { background: var(--coral); color: #fff; border-color: var(--coral); } .btn--dental:hover { background: var(--coral-dark); border-color: var(--coral-dark); } /* ヘッダーの電話ボタンは中間幅でも折り返しの原因になるため、700〜1149pxでも隠す (電話番号は topbar/mobile-quicknav/フッターに導線あり。2026-08-30第2回検査)。 1150px以上でのみ再表示する(現状維持)。 */ @media (max-width: 1149px){ .header__actions .btn--tel { display: none; } } /* ドロワー帯(〜899px)ではハンバーガー+事前問診+医科WEB予約だけをヘッダーに残し、歯科予約はドロワー内(歯科グループ)とmobile-quicknavに委ねる(2026-08-30第2回検査§修正1-5)。ハンバーガーと全ボタンの同時表示による3行折り返しを防ぐ。 */ @media (max-width: 899px){ .header__actions .btn--dental { display: none; } } /* 狭幅ではヘッダーの電話ボタンを隠す(ヒーロー/クイックアクセス/フッターに導線あり) */ @media (max-width: 700px){ .header__actions .btn { padding: 8px 12px; font-size: .82rem; } .brand__logo { height: 34px; } } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; padding: 0 10px; } .nav-toggle span { display: block; height: 2px; background: var(--accent); border-radius: 2px; transition: .25s; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* ---------- Navigation ---------- */ .gnav__list { list-style: none; margin: 0; padding: 0; } .gnav__group > .gnav__label { font-weight: 700; color: var(--label); } .gnav a { text-decoration: none; color: var(--ink); } /* Mobile: drawer */ @media (max-width: 899px) { .gnav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,.14); transform: translateX(100%); transition: transform .28s ease; overflow-y: auto; padding: 72px 0 40px; z-index: 950; } .gnav.is-open { transform: translateX(0); } .gnav__list { display: block; } .gnav__group { border-bottom: 1px solid var(--border); } .gnav__label { display: block; padding: 12px 20px; background: var(--bg-soft); font-size: .92rem; } .gnav__sub { list-style: none; margin: 0; padding: 0; } .gnav__sub a, .gnav__group > a.gnav__label { display: block; padding: 11px 28px; font-size: .92rem; border-top: 1px solid #f0f3f5; background: #fff; font-weight: 400; color: var(--ink); } .nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; visibility: hidden; transition: .28s; z-index: 940; } .nav-overlay.is-open { opacity: 1; visibility: visible; } } /* Desktop: horizontal with hover dropdowns */ @media (min-width: 900px) { .nav-toggle, .nav-overlay { display: none; } .gnav { display: block; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } .gnav__list { display: flex; gap: 2px; align-items: stretch; flex-wrap: wrap; justify-content: flex-end; } .gnav__group { position: relative; } .gnav__label { display: flex; align-items: center; padding: 10px 12px; font-size: .9rem; white-space: nowrap; } a.gnav__label { cursor: pointer; } .gnav__group:hover > .gnav__label { color: var(--accent); } .gnav__sub { list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; z-index: 30; } .gnav__group:hover .gnav__sub { opacity: 1; visibility: visible; transform: translateY(0); } .gnav__sub a { display: block; padding: 8px 18px; font-size: .86rem; } .gnav__sub a:hover { background: var(--accent-soft); color: var(--accent-dark); } } /* 中間幅(900〜1149px): 10グループを1行に収めるためラベルを詰める。それでも折り返す場合に備え2行目を中央寄せにし、右端1個だけが孤立して見える崩れを防ぐ(2026-08-30第2回検査§修正1-3)。1150px以上は現状(flex-end)を維持。 */ @media (min-width: 900px) and (max-width: 1149px){ .gnav__label { padding: 8px 8px; font-size: .82rem; } .gnav__list { justify-content: center; } /* 右端のドロップダウン(お知らせ/医院案内)が viewport 右端をはみ出し、 visibility:hidden のまま scrollWidth を押し広げて水平スクロールを起こすため、右端寄りの2グループは right:0 で右揃え表示にする(左に伸びる)。 1150px以上では現状どおり left:0 のまま変えない。 */ .gnav__group:nth-last-child(-n+3) > .gnav__sub { left: auto; right: 0; } } /* ---------- CTA band(フッター直上・全ページ共通) ---------- */ .cta-band { background: var(--accent); color: #fff; margin-top: 32px; } .cta-band__inner { max-width: var(--maxw); margin: 0 auto; padding: 26px 16px; text-align: center; } .cta-band h2 { margin: 0 0 6px; font-size: 1.2rem; font-family: var(--font-heading); } .cta-band p { margin: 0 0 16px; opacity: .95; font-size: .92rem; } .cta-band .btn--primary { background: var(--yellow); color: var(--yellow-ink); } .cta-band .btn--primary:hover { background: var(--yellow); opacity: .9; } .cta-band .btn--tel { background: transparent; color: #fff; border-color: #fff; } .cta-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ---------- Footer(design.mdcの見出し色系で統一) ---------- */ .site-footer { background: var(--heading-dark); color: #cfc6b8; font-size: .86rem; margin-top: 0; } .footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 32px 16px 20px; display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 760px){ .footer__inner { grid-template-columns: 1.4fr 1fr; } } .site-footer h3 { color: #fff; font-size: 1rem; margin: 0 0 8px; font-family: var(--font-heading); } .site-footer a { color: #cfc6b8; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .footer__links { list-style: none; margin: 0; padding: 0; columns: 2; font-size: .82rem; } .footer__links li { margin: 4px 0; break-inside: avoid; } .footer__copy { text-align: center; padding: 12px; background: #211e19; color: #9a9082; font-size: .76rem; } /* ---------- モバイル固定フッター(全ページ共通。--accent系トークンに追従し科ごとに色が変わる) ---------- */ /* 2026-09-04: position:sticky だと DOM上の最後の要素であるこのバーは滑る余地が無く、最下部までスクロールして初めて現れる = 実質「固定バー」になっていなかった。検索からの着地は下層ページが大半で、電話・アクセスへの導線は常時見えている必要があるため fixed にする。 */ :root { --quicknav-h: 64px; } .mobile-quicknav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--accent); z-index: 40; padding-bottom: env(safe-area-inset-bottom, 0px); } /* 固定した分だけページ末尾に余白を作り、フッターやCTA帯がバーの下に隠れないようにする。 */ @media (max-width: 700px) { body { padding-bottom: calc(var(--quicknav-h) + env(safe-area-inset-bottom, 0px)); } } /* 携帯端末以外(電話をかけない環境)では非表示。ヘッダーの電話ボタン表示切替(700px)と揃える。 */ @media (min-width: 701px) { .mobile-quicknav { display: none; } body { padding-bottom: 0; } } .mobile-quicknav__nav { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 960px; margin: 0 auto; } .mobile-quicknav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 4px 12px; color: #fff; text-decoration: none; border-right: 1px solid rgba(255,255,255,.18); transition: background-color .15s ease; } .mobile-quicknav__item:last-child { border-right: none; } .mobile-quicknav__item:hover, .mobile-quicknav__item:focus-visible { background: var(--accent-dark); } .mobile-quicknav__item:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; } .mobile-quicknav__icon { width: 22px; height: 22px; } .mobile-quicknav__icon svg { width: 100%; height: 100%; } /* 2026-08-31監査: スマホでAIチャットの丸ボタンが本文末尾の文言・CTAボタンに重なって読めなくなる不具合の対策。#main側にも下部の余白を確保しておく(chatWidget()側のボタン縮小・safe-area対応と合わせて二重に効かせる)。 */ @media (max-width: 700px) { #main { padding-bottom: 64px; } } .mobile-quicknav__label { font-family: "BIZ UDPGothic", sans-serif; font-size: 12px; line-height: 1.2; text-align: center; white-space: nowrap; } @media (min-width: 768px) { .mobile-quicknav__label { font-size: 13px; } }