/* =========================================================
   ミエルバ — Design System
   白ベース × 明るいグリーン(主役) + 赤(強いCTAの差し色)
   清潔感・見やすさ・相談しやすさ重視 / design-system.md 準拠
   見出し=Zen Kaku Gothic New / 本文=Noto Sans JP / 英字数字=Outfit
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Outfit:wght@500;600;700;800&display=swap');

:root{
  /* surfaces — 白を最も広く使う */
  --bg:        #ffffff;
  --bg-soft:   #f5f7f6;   /* 薄グレー */
  --bg-section:#f1f4f2;   /* 薄グレー(セクション区切り) */
  --bg-mint:   #e9f3fc;   /* primary-light = 薄ブルー */
  --bg-sand:   #f5f7f6;   /* alt neutral(旧warmを中和) */

  /* ink — 黒ではなくやわらかい濃いグレー */
  --ink:    #333333;
  --ink-2:  #4d4d4d;
  --muted:  #666666;
  --faint:  #999999;
  --line:   #eeeeee;      /* border-soft */
  --line-2: #dddddd;      /* border */

  /* brand blue (main) */
  --primary:    #2b8ce0;
  --primary-d:  #1668b5;
  --primary-l:  #88c2ef;
  --primary-xl: #e9f3fc;
  --border-primary: #bcdbf5;

  /* red accent — 強いCTA限定 */
  --accent:     #e72f52;
  --accent-d:   #c91f40;
  --accent-xl:  #fde8ed;

  /* CTA blue band / footer */
  --band-1:  #1668b5;
  --band-2:  #2b8ce0;
  --band-3:  #4ea2ea;
  --footer:  #11335a;
  --footer-2:#0d2742;

  /* radii — 角丸16〜24px */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* shadow — 薄く */
  --sh-sm: 0 1px 2px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.04);
  --sh:    0 10px 30px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
  --sh-lg: 0 22px 50px rgba(0,0,0,.09), 0 4px 12px rgba(0,0,0,.05);

  /* layout */
  --maxw: 1140px;
  --pad: clamp(20px, 5vw, 64px);

  --font-head: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
  --font-num:  "Outfit", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  font-size:16px;
  font-weight:400;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap-wide{ max-width:1320px; }
.section{ padding-block:clamp(64px, 8vw, 116px); }
.section--soft{ background:var(--bg-soft); }
.section--mint{ background:var(--bg-mint); }
.section--sand{ background:var(--bg-section); }
.section--dark{ position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--band-1) 0%, var(--band-2) 58%, var(--band-3) 100%);
  color:#ffffff; }
.center{ text-align:center; }

/* ---------- eyebrow + headings ---------- */
.eyebrow{
  font-family:var(--font-num);
  font-size:.74rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--primary-d);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before, .eyebrow.eyebrow--both::after{
  content:""; width:26px; height:2px; border-radius:2px; background:var(--primary);
}
.eyebrow--center{ justify-content:center; }
.section--dark .eyebrow{ color:rgba(255,255,255,.92); }
.section--dark .eyebrow::before, .section--dark .eyebrow.eyebrow--both::after{ background:rgba(255,255,255,.7); }

/* kicker — small label above sec-en */
.kicker{ display:flex; align-items:center; gap:.6em; font-family:var(--font-body); font-weight:700; font-size:1.15rem; letter-spacing:.08em; color:var(--primary-d); width:fit-content; margin-inline:auto; }
.kicker::before,.kicker::after{ content:""; display:block; flex:1; height:1.5px; background:var(--primary); min-width:24px; max-width:48px; }
.section--dark .kicker{ color:#fff; }
.section--dark .kicker::before,.section--dark .kicker::after{ background:rgba(255,255,255,.7); }
/* english block — no vertical bar */
.eng-block{ display:inline-block; text-align:left; }
.sec-head.center .eng-block{ display:block; text-align:center; }

/* large decorative english heading (大きな英字見出し) */
.sec-en{
  display:block;
  font-family:var(--font-num);
  font-weight:800;
  font-size:clamp(40px, 10.5vw, 104px);
  line-height:.92;
  letter-spacing:.02em;
  color:rgba(43,140,224,.22);
  margin:.04em 0 0;
  text-transform:uppercase;
}
.section--dark .sec-en{ color:rgba(255,255,255,.16); }

h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.45; letter-spacing:.01em; color:var(--ink); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:#ffffff; }

.h-display{ font-size:clamp(1.85rem, 1.1rem + 3.4vw, 3.25rem); line-height:1.34; }
.h-sec{ font-size:clamp(1.5rem, 1rem + 2vw, 2.3rem); }
@media(min-width:901px){ .section--dark .wrap.center > .h-sec{ white-space:nowrap; width:max-content; max-width:94vw; position:relative; left:50%; transform:translateX(-50%); } }
.h-sub{ font-size:clamp(1.15rem, .95rem + .9vw, 1.5rem); }
.lead{ color:var(--muted); font-size:clamp(.95rem,.9rem + .25vw,1.06rem); line-height:2; }
.section--dark .lead{ color:rgba(255,255,255,.92); }
.muted{ color:var(--muted); }
.sec-head{ margin-bottom:clamp(34px,5vw,56px); }
.sec-head .kicker + .sec-en{ margin-top:.06em; }
.sec-head .h-sec{ margin-top:12px; }
.sec-head .sec-en + .h-sec{ margin-top:.1em; }
.sec-head .lead{ margin-top:16px; max-width:660px; }
.sec-head.center .lead{ margin-inline:auto; }
@media(max-width:680px){ .sec-head{ margin-bottom:52px; } }

.mark{ background:linear-gradient(transparent 60%, var(--primary-xl) 60%); padding:0 .12em; font-weight:700; color:var(--primary-d); }
.tnum{ font-family:var(--font-num); font-weight:600; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-weight:700; font-size:.98rem; letter-spacing:.04em;
  padding:.92em 1.7em; border-radius:var(--r-pill);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap; line-height:1.2;
}
.btn .ico{ width:1.15em; height:1.15em; flex:none; }
.btn--primary{ background:var(--primary); color:#fff; box-shadow:0 8px 20px rgba(43,140,224,.30); }
.btn--primary:hover{ background:var(--primary-d); transform:translateY(-2px); box-shadow:0 12px 26px rgba(22,104,181,.34); }
.btn--accent{ background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(231,47,82,.28); }
.btn--accent:hover{ background:var(--accent-d); transform:translateY(-2px); box-shadow:0 12px 26px rgba(201,31,64,.34); }
.btn--ghost{ background:#fff; color:var(--primary-d); box-shadow:inset 0 0 0 1.6px var(--primary); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1.6px var(--primary-d); transform:translateY(-2px); color:var(--primary-d); background:var(--primary-xl); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; transform:translateY(-2px); }
.btn--ondark{ background:#fff; color:var(--primary-d); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.btn--ondark:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.18); }
.btn--lg{ padding:1.08em 2.1em; font-size:1.05rem; }
.btn--block{ width:100%; }

/* on the green CTA band, the primary action becomes the strong red CTA */
.section--dark .btn--primary{ background:var(--accent); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.section--dark .btn--primary:hover{ background:var(--accent-d); }

.txtlink{ display:inline-flex; align-items:center; gap:.5em; color:var(--primary-d); font-weight:700; font-size:.92rem; }
.txtlink .ico{ width:1em; height:1em; transition:transform .2s ease; }
.txtlink:hover .ico{ transform:translateX(4px); }

/* ---------- chips / tags ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--primary-xl); color:var(--primary-d);
  font-size:.82rem; font-weight:700; padding:.5em 1em; border-radius:var(--r-pill);
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--primary); }
.chip--ol{ background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink-2); }

/* ---------- cards ---------- */
.card{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh); border:1px solid var(--line); }
.card--pad{ padding:clamp(22px,3vw,34px); }

/* ---------- grid utils ---------- */
.grid{ display:grid; gap:clamp(16px,2.4vw,26px); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .g3,.g4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }

/* ---------- placeholder media (画像フレーム) ---------- */
.ph{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:
    repeating-linear-gradient(135deg, rgba(43,140,224,.05) 0 10px, rgba(43,140,224,.10) 10px 20px),
    var(--bg-soft);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); min-height:160px;
}
.ph::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:1px dashed var(--border-primary); pointer-events:none; }
.ph .ph-label{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.04em; font-weight:600; line-height:1.7; color:var(--muted); background:rgba(255,255,255,.82); padding:.55em 1em; border-radius:var(--r-sm); max-width:84%; }
.ph--warm{ background:repeating-linear-gradient(135deg, rgba(0,0,0,.025) 0 10px, rgba(0,0,0,.05) 10px 20px), var(--bg-section); }
.ph--warm::after{ border-color:var(--line-2); }
.ph--warm .ph-label{ color:var(--muted); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:80;
  background:linear-gradient(135deg, var(--band-1) 0%, var(--band-2) 58%, var(--band-3) 100%);
  border-bottom:none;
}
.header-inner{ display:flex; align-items:center; gap:24px; height:92px; }
.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand .logo-mark{ display:none; /* replaced by img logo */gba(43,140,224,.35); }
.brand .logo-mark svg{ width:19px; height:19px; }
.brand .b-name{ font-family:var(--font-head); font-weight:700; font-size:1.22rem; letter-spacing:.04em; line-height:1.1; color:var(--ink); }
.site-logo-img{ height:88px; width:auto; display:block; }
.brand .b-name{ display:none; }
.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a{ padding:.55em .82em; border-radius:8px; font-size:.9rem; font-weight:600; color:rgba(255,255,255,.9); transition:.15s; white-space:nowrap; }
.nav a:hover{ color:#fff; background:rgba(255,255,255,.15); }
.nav a.active{ color:#fff; background:rgba(255,255,255,.18); }
.header-cta{ display:flex; align-items:center; gap:10px; flex:none; }
.header-cta .btn{ padding:.85em 1.7em; font-size:.98rem; font-weight:800; }
.hamburger{ display:none; width:44px; height:44px; border-radius:10px; flex:none; margin-left:auto; align-items:center; justify-content:center; }
.hamburger span{ display:block; width:22px; height:2px; background:var(--ink); position:relative; transition:.25s; }
.hamburger span::before,.hamburger span::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink); transition:.25s; }
.hamburger span::before{ top:-7px; } .hamburger span::after{ top:7px; }
body.menu-open .hamburger span{ background:transparent; }
body.menu-open .hamburger span::before{ top:0; transform:rotate(45deg); }
body.menu-open .hamburger span::after{ top:0; transform:rotate(-45deg); }

/* mobile drawer */
.m-drawer{ position:fixed; inset:72px 0 0 0; z-index:70; background:#fff; transform:translateX(100%); transition:transform .3s ease; padding:26px var(--pad) 40px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
body.menu-open .m-drawer{ transform:translateX(0); }
.m-drawer a.m-link{ padding:1em .4em; border-bottom:1px solid var(--line); font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.m-drawer a.m-link .ico{ width:1em; height:1em; color:var(--primary); }
.m-drawer .m-cta{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }

@media(max-width:1000px){
  .nav, .header-cta{ display:none; }
  .hamburger{ display:flex; }
}
@media(min-width:1001px){ .m-drawer{ display:none; } }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--footer-2); color:#c2d6c9; padding-block:clamp(56px,7vw,88px) 30px; }
.site-footer .wrap{ max-width:1160px; }
.footer-top{ display:grid; grid-template-columns:2.4fr 1fr 1fr 1fr; gap:clamp(20px,2.2vw,36px); }
.footer-top .b-name{ color:#fff; }
.footer-top .b-sub{ color:#9bb6a7; }
.footer-top .f-about{ font-size:.86rem; line-height:1.85; margin-top:14px; color:#a6c0b3; max-width:300px; }
.f-col h4{ color:#fff; font-family:var(--font-body); font-size:.82rem; letter-spacing:.1em; font-weight:700; margin-bottom:16px; }
.f-col a{ display:block; font-size:.9rem; color:#a6c0b3; padding:.5em 0; transition:.15s; }
.f-col a:hover{ color:#fff; }
.f-contact{ margin-top:14px; }
.f-contact .f-tel{ font-family:var(--font-num); font-size:1.3rem; font-weight:600; color:#fff; }
.f-contact .f-hours{ font-size:.74rem; color:#a6c0b3; margin-top:4px; }
.footer-bottom{ margin-top:56px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.76rem; color:#85a394; }
.footer-bottom a:hover{ color:#fff; }
@media(max-width:780px){ .footer-top{ grid-template-columns:1fr 1fr; } .footer-top .f-brandcol{ grid-column:1/-1; } }
@media(max-width:480px){ .footer-top{ grid-template-columns:1fr; } }

/* =========================================================
   floating back-to-overview pill (prototype only)
   ========================================================= */
.overview-pill{
  position:fixed; left:18px; bottom:66px; z-index:90;
  display:inline-flex; align-items:center; gap:.55em;
  background:var(--ink); color:#fff; font-size:.78rem; font-weight:600;
  padding:.7em 1.1em; border-radius:var(--r-pill); box-shadow:var(--sh-lg);
  opacity:.92; transition:.2s;
}
.overview-pill:hover{ opacity:1; transform:translateY(-2px); }
.overview-pill .ico{ width:1em; height:1em; }
@media print{ .overview-pill{ display:none; } }

.preview-pill{
  position:fixed; left:18px; bottom:18px; z-index:90;
  display:inline-flex; align-items:center; gap:.55em;
  background:var(--primary); color:#fff; font-size:.78rem; font-weight:700;
  padding:.7em 1.1em; border-radius:var(--r-pill);
  box-shadow:0 10px 24px rgba(43,140,224,.4); opacity:.95; transition:.2s;
}
.preview-pill:hover{ opacity:1; transform:translateY(-2px); background:var(--primary-d); }
.preview-pill .ico{ width:1.05em; height:1.05em; }
@media print{ .preview-pill{ display:none; } }

/* =========================================================
   reusable section bits
   ========================================================= */
/* icon badge */
.ibadge{ width:52px; height:52px; border-radius:14px; background:var(--primary-xl); display:grid; place-items:center; flex:none; color:var(--primary-d); }
.ibadge svg{ width:24px; height:24px; }
.ibadge--dark{ background:rgba(255,255,255,.16); color:#fff; }

/* numbered list rows */
.numrow{ display:flex; gap:20px; align-items:flex-start; }
.numrow .n{ font-family:var(--font-num); font-size:1.5rem; font-weight:700; color:var(--primary); line-height:1; flex:none; width:46px; }

/* check list */
.checks li{ display:flex; gap:.7em; align-items:flex-start; padding:.34em 0; font-size:.92rem; color:var(--ink-2); }
.checks li svg{ width:18px; height:18px; color:var(--primary); flex:none; margin-top:.32em; }

/* divider note */
.note{ font-size:.78rem; color:var(--faint); line-height:1.8; }

/* dashed / soft dividers (point/thin) */
.dashed-line{ border:none; border-top:1px dashed #cccccc; }
.soft-line{ border:none; border-top:1px solid var(--line); }

/* CTA band */
.ctaband{ position:relative; overflow:hidden; }
.ctaband .ctaband-inner{ position:relative; z-index:2; }

/* breadcrumb / page hero */
.page-hero{ position:relative; overflow:hidden; background:linear-gradient(180deg,var(--primary-xl),var(--bg-soft)); padding-block:clamp(48px,7vw,86px) clamp(40px,5vw,64px); border-bottom:1px solid var(--line); }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .page-en{ position:absolute; right:clamp(-10px,1vw,20px); bottom:-.18em; z-index:1; font-family:var(--font-num); font-weight:800; font-size:clamp(70px,16vw,180px); line-height:.8; letter-spacing:.02em; color:rgba(43,140,224,.09); text-transform:uppercase; pointer-events:none; }
.crumb{ font-size:.78rem; color:var(--faint); margin-top:18px; display:flex; gap:.5em; flex-wrap:wrap; }
.crumb a:hover{ color:var(--primary-d); }
@media(max-width:560px){ .page-hero .page-en{ display:none; } }

/* page hero — display heading (big EN + slash + JP label) */
.ph-display{ display:flex; align-items:stretch; gap:clamp(16px,2vw,30px); }
.ph-slash{ flex:none; align-self:stretch; margin-block:-6px; width:clamp(8px,.9vw,12px); background:linear-gradient(180deg,var(--accent),var(--primary)); transform:skewX(-12deg); }
.ph-stack{ display:flex; flex-direction:column; justify-content:center; gap:10px; }
.ph-title{ font-family:var(--font-head); font-weight:800; font-size:clamp(32px,5.4vw,62px); line-height:1; letter-spacing:.01em; color:var(--ink); }
.ph-sub{ display:flex; align-items:center; gap:.7em; font-family:var(--font-num); font-weight:700; font-size:clamp(1.05rem,.9rem + .6vw,1.45rem); letter-spacing:.08em; color:var(--primary-d); }
.ph-sub .ph-dash{ flex:none; width:34px; height:2px; background:var(--primary); }

/* fade-in on scroll */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }