/* =========================================================
   mirainet-base : base.css
   見本サイト（hinanjo.aomori-mirainet.com）準拠のトークン＋土台
   シビックブルー基調・ライト単一・メイリオ優先。
   ========================================================= */

:root {
  /* ベース（白背景・見本準拠） */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #EFEFEF;      /* 薄グレーの帯セクション */
  --color-surface-3: #E0F2F1;      /* ごく淡いグリーンがかった面 */
  --color-ink: #1a1a1a;           /* 本文（黒を強く） */
  --color-ink-2: #3a3a3a;         /* リード・補足 */
  --color-ink-3: #5c5c5c;         /* 注記・キャプション */
  --color-line: #DDDDDD;

  /* グリーン系（主役・サイトA） */
  --color-primary: #00796B;         /* ディープエメラルド：大見出し・帯・電話・アイコン */
  --color-primary-bright: #26A69A;  /* フレッシュティール：ナビバー・アクセント・一般ボタン */
  --color-primary-dark: #004D40;    /* 暗めのティール（ホバー用） */
  --color-bright-dark: #00897B;     /* ティールホバー */

  /* 主CTA／注目（ピンク） */
  --color-cta: #EB5984;
  --color-cta-hover: #D63E6C;
  --color-cta-ink: #FFFFFF;
  --color-cta-soft: #FCE7EE;

  /* エリア別（子テーマで上書き。既定=サイトA） */
  --color-area: #26A69A;

  /* セマンティック */
  --color-ok: #2F7A54;
  --color-warn: #B9791A;
  --color-danger: #C0392B;

  /* 形状・影（フラット寄り・角丸控えめ） */
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --shadow-lg: 0 3px 10px rgba(0,0,0,.12);

  /* レイアウト */
  --maxw: 1080px;
  --gutter: clamp(16px, 4vw, 28px);

  /* タイポ：見本に合わせメイリオ優先 */
  --font-body: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", system-ui, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 18px; /* 基本フォントサイズを18pxに底上げ（ご高齢のクライアント対応） */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-underline-offset: 2px; }
a:hover { color: var(--color-primary-dark); }

h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.45; margin: 0; }

/* 共通レイアウト */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(34px, 6vw, 60px); }
.section--tint { background: var(--color-surface-2); }

/* 青帯セクション見出し（見本の「◎ 見出し ［ボタン］」を踏襲） */
.sec-head {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-primary);
  color: #fff; border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 22px;
}
.sec-head__icon { flex: none; width: 26px; height: 26px; display: grid; place-items: center; }
.sec-head__icon svg { width: 26px; height: 26px; }
.sec-head h2 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); font-weight: 700; letter-spacing: .02em; color: #fff; }
.sec-head__btn { margin-left: auto; }

/* セクション導入文 */
.section-lead { color: var(--color-ink-2); max-width: 44em; margin: 0 0 8px; }

/* アクセシビリティ */
:focus-visible { outline: 3px solid var(--color-cta); outline-offset: 2px; border-radius: 3px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-cta); color: #fff; padding: 10px 16px; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}