@charset "utf-8";

/* ==========================================================================
   base.css ─ 希咲こどもクリニック
   全28ページが読み込む土台。変数・リセット・タイポグラフィのみ。
   レイアウトやパーツはここに書かない（layout.css / components.css へ）
   ========================================================================== */

/* ==========================================================================
   1. Design Tokens
   --------------------------------------------------------------------------
   ■ 面用（-fill）  … 背景・ボタン塗り・アイコン背景・ボーダー
   ■ 文字用（-text）… 見出し・強調テキスト
   ※ 白背景でのコントラスト比 4.5:1 以上を -text 側で担保している。
     面用の色を文字に使わないこと（読めなくなる）。
   ========================================================================== */
:root {
  /* ---------- Brand（ロゴ・CTA・サイト基調） ---------- */
  --pink: #F5A0B5;                        /* 面：2.0:1 → 文字使用禁止 */
  --pink-light: #FDE8EE;
  --pink-dark: #E8829A;                   /* グラデーション終端 */
  --pink-text: #B25570;                   /* 文字：4.75:1 */

  --mint: #7ECEC1;
  --mint-light: #E8F8F5;
  --mint-text: #2F8378;                   /* 文字：4.53:1 */

  /* ---------- Semantic（記事ページの受診トリアージ） ----------
     色が「意味」を持つ。装飾目的で使い回さないこと。            */
  --safe: #6FB36A;                        /* おうちで様子を見られる    */
  --safe-light: #F1F8EF;
  --safe-text: #3E7F3C;                   /* 4.88:1 */

  --caution: #F5A623;                     /* 診療時間内にご相談        */
  --caution-light: #FFF6E5;
  --caution-text: #A66500;                /* 4.68:1 */

  --urgent: #8F6DC0;                      /* 夜間・休日でも早めに受診  */
  --urgent-light: #F5F0FC;
  --urgent-text: #6B4A9E;                 /* 6.77:1 */

  --emergency: #E8555C;                   /* 迷わず119番              */
  --emergency-light: #FDEEEE;
  --emergency-text: #C0272E;              /* 5.88:1 */
  --emergency-accent: #FFE08A;            /* 赤地の上で数字を立たせる色 */

  --info: #4EA7DF;                        /* 補足・当院での診療        */
  --info-light: #EAF4FC;
  --info-text: #1F72AC;                   /* 5.17:1 */

  /* ---------- Neutral ---------- */
  --white: #FFFFFF;
  --cream: #FFFBF7;                       /* セクション背景 */
  --heading: #55403A;                     /* 見出しの茶 */
  --text: #4A3F3F;                        /* 本文 */
  --text-sub: #7A6E6E;                    /* 付帯情報のみ。本文には使わない 4.90:1 */
  --line: #EADFD7;
  --line-strong: #C0AEA0;                 /* 輪郭：小さい面の枠線用（クリーム地に 2.08:1） */

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 4px 24px rgba(85, 64, 58, .07);
  --shadow: 0 16px 45px rgba(85, 64, 58, .09);

  /* ---------- Radius ---------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- Typography ---------- */
  --font-main: 'Zen Maru Gothic', 'M PLUS Rounded 1c',
    'Hiragino Maru Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;

  /* Zen Maru Gothic の実装ウェイトは 300/400/500/700/900。
     800 は存在しないため使わない（ブラウザが疑似太字を作り字形が濁る）。 */
  /* 本文サイズ。PC 16px / SP 14px を基準に3段階だけで運用する。
     1rem = 16px（html の既定値）。個別の数値指定はしないこと。 */
  --fs-lead: 1.0625rem;                   /* 17px */
  --fs-body: 1rem;                        /* 16px */
  --fs-note: 0.875rem;                    /* 14px */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* ---------- Icon（CSSで描く記号） ---------- */
  /* 控えめなドット柄。画像を使わず CSS で描く。
     色は使う側で --dot-color を上書きできる */
  --dot-color: rgba(232, 130, 154, .16);
  --dot-size: 16px;

  --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.8 6.4 4.6 9.2 10.2 3.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.2 2.4 7.8 6 4.2 9.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ---------- Layout ---------- */
  --wrap: min(1120px, 100% - 48px);
  --wrap-narrow: min(860px, 100% - 48px);
  --header-h-pc: 80px;
  --header-h-sp: 120px;
  --sec-pad: clamp(56px, 8vw, 94px);
}

@media (max-width: 700px) {
  :root {
    --fs-lead: 0.9375rem;                 /* 15px */
    --fs-body: 0.875rem;                  /* 14px */
    --fs-note: 0.8125rem;                 /* 13px */
  }
}

@media (max-width: 680px) {
  :root {
    --wrap: calc(100% - 28px);
    --wrap-narrow: calc(100% - 28px);
  }
}

/* ==========================================================================
   2. Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* 固定ヘッダーぶんのアンカー位置補正 */
  scroll-padding-top: calc(var(--header-h-pc) + 16px);
}

@media (max-width: 680px) {
  html {
    scroll-padding-top: calc(var(--header-h-sp) + 16px);
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: var(--fw-normal);
  line-height: 1.9;
  letter-spacing: .035em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--heading);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

address {
  font-style: normal;
}

table {
  border-collapse: collapse;
}

/* ==========================================================================
   3. Typography scale
   ========================================================================== */
.ttl-page {
  font-size: clamp(2rem, 5.4vw, 3.5rem);
  font-weight: var(--fw-black);
  letter-spacing: .06em;
  line-height: 1.25;
}

.ttl-sec {
  font-size: clamp(1.625rem, 3.8vw, 2.625rem);
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  line-height: 1.4;
}

.ttl-sub {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

.ttl-card {
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

.txt-lead {
  font-size: var(--fs-lead);
  line-height: 2;
  color: var(--text);
}

.txt-body {
  font-size: var(--fs-body);
  line-height: 1.95;
}

.txt-note {
  font-size: var(--fs-note);
  line-height: 1.8;
  color: var(--text);
}

/* ==========================================================================
   4. Layout utilities
   ========================================================================== */
.wrap {
  width: var(--wrap);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.wrap-narrow {
  width: var(--wrap-narrow);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.u-center {
  text-align: center;
}

.u-mt-sm {
  margin-top: 16px;
}

.u-mt-md {
  margin-top: 28px;
}

.u-mt-lg {
  margin-top: 48px;
}

/* ==========================================================================
   5. Accessibility
   --------------------------------------------------------------------------
   ■ マウスオーバー（:hover）は、サイト全体で使わない。

     ・スマホには hover がない。タップすると hover が「当たったまま」残り、
       押していないボタンが押されているように見えることがある。
     ・深夜にスマホで読む想定のサイトなので、
       PCだけで起きる演出のために、その不具合を抱える理由がない。
     ・浮き上がり（transform）や影の変化は、
       ページの情報量が多いほど視線を奪う。

     新しいパーツを足すときも :hover は書かないこと。

   ■ ただし :focus-visible は残す。
     これはマウスではなくキーボード操作（Tabキー）の話で、
     消すと目が見えにくい方や、マウスを使えない方がリンクを追えなくなる。
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--info);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* スクリーンリーダー用のスキップリンク */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 999;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--pink-text);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-sm);
}

.skip-link:focus {
  top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   6. Print（保護者が受診メモを印刷する想定）
   ========================================================================== */
@media print {
  body {
    background: #fff;
  }

  .header,
  .footer,
  .back-to-top,
  .no-print {
    display: none !important;
  }

  .wrap,
  .wrap-narrow {
    width: 100%;
  }
}

/* SPだけで改行させたい箇所に使う（PCでは無効） */
.u-br-sp {
  display: none;
}

/* PCだけで改行させたい箇所に使う（SPでは無効）。
   PCとSPで改行位置を変えたいときは、2つを併用する */
.u-br-pc {
  display: inline;
}

@media (max-width: 700px) {
  .u-br-sp {
    display: inline;
  }

  .u-br-pc {
    display: none;
  }
}