/* ============================================================
   File: assets/styles.css
   あおぞら歯科 ワンページLP  —  全ページ共通CSS
   Design width 1920 / content 1440
   ============================================================ */

/* ---------- color system ---------- */
:root{
  /* @color メインカラー */
  --c-primary:#3a9bd6;
  --c-primary-rgb:58,155,214;

  /* @color アクセントカラー（差し色） */
  --c-accent:#f3917a;
  --c-accent-rgb:243,145,122;

  /* @color 見出し・本文色 */
  --c-ink:#33505f;
  --c-ink-rgb:51,80,95;

  /* @color 背景色 */
  --c-bg:#f3f9fd;
  --c-bg-rgb:243,249,253;

  /* --- 派生色（@colorなし＝ユーザーに露出しない。元変数から導出） --- */
  --blue-50: rgba(var(--c-primary-rgb),.06);
  --blue-50: color-mix(in srgb, var(--c-primary) 7%, #fff);
  --blue-100: rgba(var(--c-primary-rgb),.10);
  --blue-100: color-mix(in srgb, var(--c-primary) 11%, #fff);
  --blue-150: rgba(var(--c-primary-rgb),.16);
  --blue-150: color-mix(in srgb, var(--c-primary) 16%, #fff);
  --blue-200: rgba(var(--c-primary-rgb),.26);
  --blue-200: color-mix(in srgb, var(--c-primary) 26%, #fff);
  --sky: rgba(var(--c-primary-rgb),.55);
  --sky: color-mix(in srgb, var(--c-primary) 52%, #fff);
  --blue-400: rgba(var(--c-primary-rgb),.82);
  --blue-400: color-mix(in srgb, var(--c-primary) 82%, #fff);
  --blue-500: var(--c-primary);
  --blue-600: var(--c-primary);
  --blue-600: color-mix(in srgb, var(--c-primary) 80%, var(--c-ink));
  --blue-700: var(--c-primary);
  --blue-700: color-mix(in srgb, var(--c-primary) 58%, var(--c-ink));

  --accent-soft: rgba(var(--c-accent-rgb),.18);
  --accent-soft: color-mix(in srgb, var(--c-accent) 20%, #fff);

  --ink-soft: rgba(var(--c-ink-rgb),.62);
  --ink-faint: rgba(var(--c-ink-rgb),.40);
  --line: rgba(var(--c-primary-rgb),.16);
  --line-soft: rgba(var(--c-primary-rgb),.08);

  --line-green:#06c755;          /* LINE公式ブランドカラー（固定・テーマ非対象） */
  --line-green-rgb:6,199,85;

  /* フッター（見出し・本文色から導出した濃色） */
  --footer-bg: var(--c-ink);
  --footer-bg: color-mix(in srgb, var(--c-ink) 80%, #000);

  --wrap:1440px;
  --shadow-sm:0 4px 18px rgba(var(--c-primary-rgb),.07);
  --shadow-md:0 14px 40px rgba(var(--c-primary-rgb),.10);
  --shadow-lg:0 26px 70px rgba(var(--c-primary-rgb),.14);
  --r-lg:30px;
  --r-md:22px;
  --r-sm:14px;

  --font-disp:"Zen Maru Gothic",-apple-system,system-ui,sans-serif;
  --font-body:"Zen Kaku Gothic New",-apple-system,system-ui,sans-serif;
  --font-en:"Jost",sans-serif;

  --header-h:96px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:110px;}
body{
  font-family:var(--font-body);
  color:var(--c-ink);
  background:#fff;
  line-height:1.9;
  font-size:17px;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px;}
.wrap-narrow{max-width:1080px;margin:0 auto;padding:0 40px;}

/* ---------- placeholder image (spec) ---------- */
/* .ph-sample = design-preview placeholder for 2nd+ children of data-repeatable
   (those samples must NOT carry data-editable-bg, so they use a non-.ph class) */
.ph,.ph-sample{
  width:100%;
  aspect-ratio:4 / 3;
  position:relative;overflow:hidden;border-radius:var(--r-md);
  background:
    repeating-linear-gradient(135deg, rgba(var(--c-primary-rgb),.05) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(var(--c-primary-rgb),.12), rgba(var(--c-primary-rgb),.06));
  /* CMS が data-editable-bg で背景画像を差し込んだ際、枠は固定のまま画像を
     リサイズして中央でフィット（縦長画像が見切れず収まる）させる */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:grid;place-items:center;
  color:var(--blue-700);
  font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  font-size:12.5px;letter-spacing:.03em;text-align:center;line-height:1.6;
  padding:10px;
}
.ph[data-ratio="16/9"],.ph-sample[data-ratio="16/9"]{aspect-ratio:16 / 9;}
.ph[data-ratio="3/4"],.ph-sample[data-ratio="3/4"]{aspect-ratio:3 / 4;}
.ph[data-ratio="1/1"],.ph-sample[data-ratio="1/1"]{aspect-ratio:1 / 1;}

/* image set by CMS */
.editable-img{width:100%;display:block;object-fit:cover;border-radius:var(--r-md);}
.editable-img[data-ratio="16/9"]{aspect-ratio:16 / 9;}
.editable-img[data-ratio="3/4"]{aspect-ratio:3 / 4;}
.editable-img[data-ratio="1/1"]{aspect-ratio:1 / 1;}
.editable-img[data-ratio="4/3"]{aspect-ratio:4 / 3;}

/* ---------- shared heading ---------- */
.head{text-align:center;margin-bottom:64px;}
.head .en{
  font-family:var(--font-en);font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--blue-400);font-size:15px;display:inline-flex;align-items:center;gap:14px;
}
.head .en::before,.head .en::after{content:"";width:30px;height:2px;border-radius:2px;background:var(--blue-200);}
.head h2{font-family:var(--font-disp);font-weight:700;font-size:42px;line-height:1.5;color:var(--c-ink);margin-top:18px;letter-spacing:.04em;}
.head h2 b{color:var(--c-primary);}
.head p{margin-top:22px;color:var(--ink-soft);font-size:16.5px;text-wrap:pretty;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--font-disp);font-weight:700;letter-spacing:.04em;
  padding:18px 40px;border-radius:999px;font-size:17px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn .ic{width:20px;height:20px;flex:none;}
.btn-primary{background:var(--c-primary);color:#fff;box-shadow:0 12px 26px rgba(var(--c-primary-rgb),.34);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(var(--c-primary-rgb),.42);background:var(--blue-600);}
.btn-line{background:var(--line-green);color:#fff;box-shadow:0 12px 26px rgba(var(--line-green-rgb),.28);}
.btn-line:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(var(--line-green-rgb),.36);}
.btn-ghost{background:#fff;color:var(--blue-600);border:2px solid var(--blue-200);}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--sky);box-shadow:var(--shadow-sm);}
.btn-lg{padding:22px 52px;font-size:18.5px;}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease;}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  box-shadow:0 2px 0 var(--line-soft);transition:box-shadow .3s ease;
}
.site-header.scrolled{box-shadow:var(--shadow-sm);}
.header-inner{max-width:1840px;margin:0 auto;padding:0 32px;height:var(--header-h);display:flex;align-items:center;gap:24px;}
.site-logo{display:flex;align-items:center;gap:14px;flex:none;}
.site-logo .mark{
  width:52px;height:52px;border-radius:16px;flex:none;
  background:linear-gradient(135deg, var(--sky), var(--c-primary));
  display:grid;place-items:center;color:#fff;font-family:var(--font-disp);font-weight:700;font-size:22px;
  box-shadow:0 8px 18px rgba(var(--c-primary-rgb),.32);
}
.site-logo .mark svg{width:30px;height:30px;}
.site-logo .txt b{font-family:var(--font-disp);font-weight:700;font-size:20px;color:var(--c-ink);letter-spacing:.04em;display:block;line-height:1.3;}
.site-logo .txt .logo-en{font-size:11.5px;color:var(--ink-soft);letter-spacing:.16em;font-family:var(--font-en);display:block;}

.main-nav{display:flex;align-items:center;gap:24px;margin-left:auto;}
.main-nav a{font-family:var(--font-disp);font-weight:500;font-size:15px;color:var(--c-ink);position:relative;padding:6px 0;letter-spacing:.03em;transition:color .2s;}
.main-nav a::after{content:"";position:absolute;left:50%;bottom:-2px;width:0;height:2px;background:var(--sky);border-radius:2px;transform:translateX(-50%);transition:width .25s;}
.main-nav a:hover{color:var(--c-primary);}
.main-nav a:hover::after{width:100%;}

.header-cta{display:flex;align-items:center;gap:10px;flex:none;margin-left:28px;}
.tel-box{text-align:right;line-height:1.2;margin-right:4px;}
.tel-box .lbl{font-size:11px;color:var(--ink-soft);letter-spacing:.1em;}
.tel-box .num{font-family:var(--font-en);font-weight:600;font-size:22px;color:var(--blue-600);display:flex;align-items:center;gap:7px;white-space:nowrap;}
.tel-box .num svg{width:18px;height:18px;}
.hd-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:78px;height:64px;border-radius:16px;color:#fff;gap:4px;font-family:var(--font-disp);font-weight:700;font-size:12px;letter-spacing:.02em;transition:transform .2s, filter .2s;}
.hd-btn span{white-space:nowrap;}
.hd-btn svg{width:22px;height:22px;}
.hd-btn:hover{transform:translateY(-2px);filter:brightness(1.05);}
.hd-btn.web{background:var(--c-primary);}
.hd-btn.line{background:var(--line-green);}

.nav-toggle{display:none;width:48px;height:48px;border-radius:12px;background:var(--blue-50);margin-left:auto;position:relative;flex:none;}
.nav-toggle span{position:absolute;left:13px;right:13px;height:2.5px;border-radius:2px;background:var(--c-primary);transition:transform .3s, opacity .2s;}
.nav-toggle span:nth-child(1){top:16px;}
.nav-toggle span:nth-child(2){top:23px;}
.nav-toggle span:nth-child(3){top:30px;}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============================================================
   SIDE CTA
   ============================================================ */
.side-cta{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:8px;}
.side-cta a{writing-mode:vertical-rl;padding:22px 12px;border-radius:16px 0 0 16px;color:#fff;font-family:var(--font-disp);font-weight:700;letter-spacing:.18em;font-size:15px;display:flex;align-items:center;gap:12px;box-shadow:-6px 8px 22px rgba(var(--c-primary-rgb),.2);transition:padding-right .25s;}
.side-cta a svg{width:22px;height:22px;}
.side-cta a:hover{padding-right:18px;}
.side-cta .s-web{background:var(--c-primary);}
.side-cta .s-line{background:var(--line-green);}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding-top:var(--header-h);background:var(--c-bg);overflow:hidden;}
.hero-stage{position:relative;height:760px;}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease, transform 8s ease;transform:scale(1.06);}
.hero-slide.active{opacity:1;transform:scale(1);}
.hero-slide .ph,.hero-slide .ph-sample,.hero-slide .editable-img{height:100%;aspect-ratio:auto;border-radius:0;}
.hero-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg, rgba(var(--c-bg-rgb),.96) 0%, rgba(var(--c-bg-rgb),.72) 34%, rgba(var(--c-bg-rgb),.05) 62%, transparent 100%);}
.hero-copy{position:absolute;z-index:3;top:50%;left:max(40px,calc((100% - var(--wrap))/2 + 40px));transform:translateY(-50%);max-width:640px;}
.hero-copy .eyebrow{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--blue-600);font-family:var(--font-disp);font-weight:700;padding:10px 22px;border-radius:999px;font-size:15px;box-shadow:var(--shadow-sm);margin-bottom:26px;letter-spacing:.04em;}
.hero-copy .eyebrow svg{width:18px;height:18px;}
.hero-copy h1{font-family:var(--font-disp);font-weight:700;font-size:60px;line-height:1.42;letter-spacing:.03em;color:var(--c-ink);text-shadow:0 2px 14px rgba(255,255,255,.7);}
.hero-copy h1 .hl{color:var(--c-primary);position:relative;white-space:nowrap;}
.hero-copy h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:14px;z-index:-1;background:var(--accent-soft);border-radius:8px;}
.hero-copy p{margin-top:26px;font-size:18px;color:var(--ink-soft);line-height:1.95;text-wrap:pretty;}
.hero-btns{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}
.hero-info{position:absolute;z-index:3;right:max(40px,calc((100% - var(--wrap))/2 + 40px));bottom:42px;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:24px 30px;display:flex;gap:30px;align-items:center;}
.hero-info .blk{text-align:center;line-height:1.5;min-width:108px;max-width:200px;}
.hero-info .blk .k{font-size:12px;color:var(--ink-soft);letter-spacing:.1em;font-family:var(--font-disp);font-weight:700;}
.hero-info .blk .v{font-family:var(--font-disp);font-weight:700;color:var(--blue-600);font-size:17px;margin-top:4px;}
.hero-info .sep{width:1px;align-self:stretch;background:var(--line);}
.hero-dots{position:absolute;z-index:4;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:10px;}
.hero-dots button{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:0 1px 4px rgba(0,0,0,.12);transition:.2s;}
.hero-dots button.active{background:var(--c-primary);width:30px;border-radius:6px;}

.wave{display:block;width:100%;line-height:0;background:var(--c-bg);}
.wave svg{display:block;width:100%;height:90px;}

/* ============================================================
   sections
   ============================================================ */
.section{position:relative;}

/* ---------- section background alternation (方式A) ----------
   CMS は並び替え時、section クラスを持つ要素に alt を再割り当てして
   交互背景色を保つ。hero / contact 等の特殊セクションには付けない。 */
.section{background:#fff;}
.section.alt{background:var(--c-bg);}

/* INTRO */
.intro{padding:130px 0 120px;}
.intro-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center;}
.intro-imgs{position:relative;}
.intro-imgs .big{aspect-ratio:auto;height:480px;border-radius:var(--r-lg);box-shadow:var(--shadow-md);}
.intro-imgs .small{position:absolute;right:-30px;bottom:-44px;width:240px;height:240px;aspect-ratio:auto;border-radius:var(--r-md);border:8px solid #fff;box-shadow:var(--shadow-md);}
.intro-imgs .badge{position:absolute;left:-34px;top:-34px;width:140px;height:140px;border-radius:50%;background:var(--c-accent);color:#fff;display:grid;place-content:center;text-align:center;font-family:var(--font-disp);font-weight:700;line-height:1.45;font-size:15px;box-shadow:0 14px 30px rgba(var(--c-accent-rgb),.4);transform:rotate(-8deg);}
.intro-imgs .badge b{font-size:30px;display:block;}
.intro-body .en{font-family:var(--font-en);letter-spacing:.26em;color:var(--blue-400);font-weight:500;font-size:14px;text-transform:uppercase;}
.intro-body h2{font-family:var(--font-disp);font-weight:700;font-size:38px;line-height:1.6;margin:18px 0 28px;letter-spacing:.03em;}
.intro-body h2 .blue{color:var(--c-primary);}
.intro-body p{color:var(--ink-soft);margin-bottom:20px;text-wrap:pretty;}
.intro-body .sign{margin-top:30px;display:flex;align-items:center;gap:16px;}
.intro-body .sign .ph{width:64px;height:64px;aspect-ratio:auto;border-radius:50%;flex:none;}
.intro-body .sign .role{font-size:13px;color:var(--ink-soft);}
.intro-body .sign .nm{font-family:var(--font-disp);font-weight:700;font-size:21px;color:var(--c-ink);}

/* FEATURES */
.features{padding:120px 0;}
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:10px;counter-reset:feat;}
.feat-card{background:#fff;border-radius:var(--r-md);padding:44px 36px;box-shadow:var(--shadow-sm);position:relative;transition:transform .3s, box-shadow .3s;overflow:hidden;counter-increment:feat;}
.feat-card::before{content:counter(feat,decimal-leading-zero);position:absolute;right:22px;top:8px;font-family:var(--font-en);font-weight:600;font-size:74px;color:var(--blue-50);z-index:0;}
.feat-card .ic-wrap{width:84px;height:84px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg, var(--blue-100), var(--blue-150));color:var(--c-primary);position:relative;z-index:1;margin-bottom:24px;}
.feat-card .ic-wrap svg{width:46px;height:46px;display:block;}
.feat-card h3{font-family:var(--font-disp);font-weight:700;font-size:22px;line-height:1.5;margin-bottom:14px;position:relative;z-index:1;}
.feat-card p{color:var(--ink-soft);font-size:15.5px;position:relative;z-index:1;text-wrap:pretty;}
.feat-card:nth-child(2) .ic-wrap{background:linear-gradient(135deg, var(--accent-soft), rgba(var(--c-accent-rgb),.32));color:var(--c-accent);}

/* SERVICES */
.services{padding:120px 0;}
.serv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.serv-card{display:flex;gap:22px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:26px 28px;transition:.28s;position:relative;overflow:hidden;}
.serv-card:hover{border-color:var(--sky);box-shadow:var(--shadow-md);}
.serv-card .ic-wrap{width:74px;height:74px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--blue-50);color:var(--c-primary);transition:.28s;}
.serv-card:hover .ic-wrap{background:var(--sky);color:#fff;}
.serv-card .ic-wrap svg{width:40px;height:40px;display:block;}
.serv-card .en{font-family:var(--font-en);font-size:12px;letter-spacing:.14em;color:var(--blue-400);text-transform:uppercase;}
.serv-card h3{font-family:var(--font-disp);font-weight:700;font-size:20px;margin:2px 0 6px;}
.serv-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.7;}

/* TOPICS */
.topics{padding:130px 0;overflow:hidden;}
.topic-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:90px;}
.topic-row:last-child{margin-bottom:0;}
.topic-list{display:flex;flex-direction:column;gap:90px;}
.topic-list .topic-row:nth-child(even) .topic-media{order:2;}
.topic-media{position:relative;}
.topic-media .ph,.topic-media .ph-sample,.topic-media .editable-img{aspect-ratio:auto;height:420px;border-radius:var(--r-lg);box-shadow:var(--shadow-md);}
.topic-media .tag{position:absolute;left:-18px;top:28px;background:var(--c-accent);color:#fff;font-family:var(--font-disp);font-weight:700;padding:10px 24px;border-radius:999px;font-size:15px;box-shadow:0 10px 22px rgba(var(--c-accent-rgb),.4);}
.topic-body .en{font-family:var(--font-en);letter-spacing:.2em;color:var(--blue-400);font-weight:500;text-transform:uppercase;font-size:14px;}
.topic-body h3{font-family:var(--font-disp);font-weight:700;font-size:34px;line-height:1.5;margin:12px 0 22px;letter-spacing:.03em;}
.topic-body .chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.topic-body .chips span{background:#fff;border:1.5px solid var(--blue-150);color:var(--blue-600);border-radius:999px;padding:8px 18px;font-size:14px;font-family:var(--font-disp);font-weight:500;display:inline-flex;align-items:center;gap:8px;}
.topic-body .chips span svg{width:16px;height:16px;color:var(--c-accent);}
.topic-body p{color:var(--ink-soft);margin-bottom:26px;text-wrap:pretty;}

/* FLOW */
.flow{padding:120px 0;}
.flow-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;position:relative;margin-top:20px;counter-reset:flow;}
.flow-step{position:relative;text-align:center;counter-increment:flow;}
.flow-step .ph,.flow-step .ph-sample,.flow-step .editable-img{aspect-ratio:auto;height:150px;border-radius:var(--r-sm);margin-bottom:20px;}
.flow-step .no{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:2;background:var(--c-primary);color:#fff;font-family:var(--font-en);font-weight:600;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:16px;border:4px solid #fff;box-shadow:0 6px 14px rgba(var(--c-primary-rgb),.3);}
.flow-step .no::before{content:counter(flow);}
.flow-step h4{font-family:var(--font-disp);font-weight:700;font-size:18px;margin-bottom:10px;}
.flow-step p{font-size:13.5px;color:var(--ink-soft);line-height:1.7;}
.flow-step .ic{width:30px;height:30px;color:var(--sky);margin:0 auto 8px;}

/* STAFF */
.staff{padding:120px 0;}
.director{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;background:#fff;border-radius:var(--r-lg);padding:56px;box-shadow:var(--shadow-sm);margin-bottom:56px;}
.director .ph,.director .editable-img{aspect-ratio:auto;height:440px;border-radius:var(--r-md);}
.director .en{font-family:var(--font-en);letter-spacing:.2em;color:var(--blue-400);text-transform:uppercase;font-size:13px;}
.director h3{font-family:var(--font-disp);font-weight:700;font-size:20px;color:var(--ink-soft);margin:14px 0 4px;}
.director h3 b{font-size:32px;color:var(--c-ink);margin-left:12px;}
.director .lead{font-family:var(--font-disp);font-weight:700;font-size:24px;line-height:1.6;color:var(--blue-600);margin:24px 0;letter-spacing:.03em;}
.director p{color:var(--ink-soft);margin-bottom:16px;text-wrap:pretty;}
.director .career{margin-top:24px;border-top:1px dashed var(--line);padding-top:22px;}
.director .career li{display:flex;gap:14px;font-size:14.5px;color:var(--ink-soft);margin-bottom:8px;}
.director .career li b{color:var(--blue-600);font-family:var(--font-disp);font-weight:700;flex:none;}
.staff-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;}
.staff-card{background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);text-align:center;padding-bottom:26px;}
.staff-card .ph,.staff-card .ph-sample,.staff-card .editable-img{aspect-ratio:auto;height:230px;border-radius:0;}
.staff-card .role{font-size:12.5px;color:var(--blue-400);letter-spacing:.08em;margin-top:20px;font-family:var(--font-disp);font-weight:700;}
.staff-card .nm{font-family:var(--font-disp);font-weight:700;font-size:20px;margin-top:4px;}

/* PRICING */
.pricing{padding:120px 0;}
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
.price-block{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.price-block .ph-head{background:linear-gradient(135deg, var(--sky), var(--c-primary));color:#fff;padding:22px 30px;font-family:var(--font-disp);font-weight:700;font-size:20px;display:flex;align-items:center;gap:12px;}
.price-block.warm .ph-head{background:linear-gradient(135deg, rgba(var(--c-accent-rgb),.7), var(--c-accent));}
.price-block .ph-head svg{width:26px;height:26px;}
.price-rows{display:block;}
.price-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 30px;border-bottom:1px dashed var(--line);}
.price-row:last-child{border-bottom:none;}
.price-row .nm{font-family:var(--font-disp);font-weight:500;}
.price-row .nm small{display:block;font-size:12.5px;color:var(--ink-faint);font-family:var(--font-body);font-weight:400;}
.price-row .amt{font-family:var(--font-en);font-weight:600;font-size:22px;color:var(--blue-600);white-space:nowrap;}
.price-row .amt span{font-size:13px;color:var(--ink-soft);font-family:var(--font-body);margin-left:2px;}
.price-note{color:var(--ink-soft);font-size:14px;margin-top:30px;line-height:1.9;background:var(--blue-50);border-radius:var(--r-sm);padding:24px 28px;}
.price-note b{color:var(--blue-700);font-family:var(--font-disp);}

/* FAQ */
.faq{padding:120px 0;}
.faq-list{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
.faq-item{background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow:hidden;border:1.5px solid transparent;transition:border-color .25s;}
.faq-item.open{border-color:var(--blue-150);}
.faq-q{display:flex;align-items:center;gap:18px;padding:26px 30px;cursor:pointer;font-family:var(--font-disp);font-weight:700;font-size:18px;color:var(--c-ink);width:100%;text-align:left;}
.faq-q .q{width:38px;height:38px;flex:none;border-radius:50%;background:var(--c-primary);color:#fff;display:grid;place-items:center;font-family:var(--font-en);font-weight:600;font-size:18px;}
.faq-q .tog{margin-left:auto;width:24px;height:24px;flex:none;color:var(--blue-400);transition:transform .3s;}
.faq-q .tog svg{display:block;width:100%;height:100%;}
.faq-item.open .tog{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a-inner{padding:0 30px 28px 86px;color:var(--ink-soft);text-wrap:pretty;}

/* CONTACT */
.contact{position:relative;padding:110px 0;color:#fff;text-align:center;overflow:hidden;background:linear-gradient(135deg, var(--c-primary), var(--blue-700));}
.contact .bubbles{position:absolute;inset:0;overflow:hidden;opacity:.5;pointer-events:none;}
.contact .bubbles i{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);}
.contact .en{font-family:var(--font-en);letter-spacing:.3em;text-transform:uppercase;font-weight:500;opacity:.9;position:relative;z-index:2;}
.contact h2{font-family:var(--font-disp);font-weight:700;font-size:40px;line-height:1.5;margin:18px 0 14px;letter-spacing:.04em;position:relative;z-index:2;}
.contact .lead{opacity:.92;font-size:17px;margin-bottom:40px;position:relative;z-index:2;}
.contact-cards{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2;}
.cc{background:#fff;border-radius:var(--r-md);padding:34px 44px;color:var(--c-ink);min-width:300px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;justify-content:center;}
.cc .lbl{font-family:var(--font-disp);font-weight:700;color:var(--ink-soft);font-size:14px;display:flex;align-items:center;gap:10px;justify-content:center;}
.cc .lbl svg{width:20px;height:20px;color:var(--c-primary);display:block;}
.cc .tel{font-family:var(--font-en);font-weight:600;font-size:42px;color:var(--blue-600);line-height:1.1;margin:10px 0 4px;white-space:nowrap;}
.cc small{display:block;text-align:center;color:var(--ink-soft);font-size:18px;line-height:1.7;text-wrap:pretty;}
.cc .web-btns{display:flex;flex-direction:column;gap:12px;margin-top:6px;}

/* ACCESS */
.access{padding:120px 0 0;}
.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.access-info dl{display:grid;grid-template-columns:130px minmax(0,1fr);border-top:1px solid var(--line);}
.access-info dt,.access-info dd{padding:20px 8px;border-bottom:1px solid var(--line);}
.access-info dt{font-family:var(--font-disp);font-weight:700;color:var(--blue-600);font-size:15px;}
.access-info dd{color:var(--ink-soft);}
.hours-table{width:100%;border-collapse:collapse;margin-top:28px;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-sm);}
.hours-table th,.hours-table td{text-align:center;padding:15px 6px;font-size:15px;border:1px solid var(--line);white-space:nowrap;}
.hours-table thead th{background:var(--c-primary);color:#fff;font-family:var(--font-disp);font-weight:700;border-color:var(--c-primary);}
.hours-table tbody th{background:var(--blue-50);font-family:var(--font-disp);font-weight:700;color:var(--c-ink);font-size:13.5px;}
.hours-table tbody td{color:var(--c-primary);font-size:18px;font-family:var(--font-disp);font-weight:700;}
.hours-table .off{color:var(--ink-faint);}
.hours-note{font-size:13px;color:var(--ink-soft);margin-top:14px;line-height:1.8;}
.map-embed{width:100%;aspect-ratio:auto;height:480px;border:0;border-radius:var(--r-md);box-shadow:var(--shadow-sm);}
.map-embed.ph{display:grid;}

/* FOOTER */
.site-footer{margin-top:120px;background:var(--footer-bg);color:rgba(255,255,255,.74);padding:72px 0 0;}
.site-footer a{color:rgba(255,255,255,.74);}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1);}
.site-footer .site-logo .txt b{color:#fff;}
.site-footer .site-logo .txt .logo-en{color:rgba(255,255,255,.55);}
.footer-col h4{font-family:var(--font-disp);font-weight:700;color:#fff;font-size:16px;margin-bottom:20px;letter-spacing:.06em;}
.footer-col li{margin-bottom:12px;}
.footer-col a{font-size:14.5px;color:rgba(255,255,255,.66);transition:color .2s;}
.footer-col a:hover{color:var(--sky);}
.footer-about p{font-size:14px;color:rgba(255,255,255,.6);margin-top:20px;line-height:1.9;}
.footer-bottom{text-align:center;padding:26px 0;font-size:12.5px;color:rgba(255,255,255,.48);font-family:var(--font-en);letter-spacing:.05em;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1480px){
  .hero-copy{left:40px;}
  .hero-info{right:40px;}
}
@media (max-width:1100px){
  .side-cta{display:none;}
  .main-nav{position:fixed;top:var(--header-h);left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:12px 24px 24px;box-shadow:var(--shadow-md);transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .3s, opacity .3s;max-height:calc(100vh - var(--header-h));overflow:auto;}
  body.nav-open .main-nav{transform:none;opacity:1;pointer-events:auto;}
  .main-nav a{padding:16px 8px;border-bottom:1px solid var(--line-soft);font-size:16px;}
  .main-nav a::after{display:none;}
  .nav-toggle{display:block;}
  .header-cta{display:none;}
  .header-inner{gap:16px;}
}
@media (max-width:1024px){
  .head h2{font-size:34px;}
  .intro-grid{gap:56px;}
  .feat-grid,.serv-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .staff-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero-copy h1{font-size:48px;}
  .flow-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px;}
}
@media (max-width:767px){
  body{font-size:16px;}
  .wrap,.wrap-narrow{padding:0 22px;}
  html{scroll-padding-top:84px;}
  :root{--header-h:72px;}
  .site-logo .mark{width:44px;height:44px;border-radius:13px;}
  .site-logo .txt b{font-size:16px;}
  .site-logo .txt .logo-en{font-size:10px;}

  .hero-stage{height:auto;}
  .hero-slide{position:relative;display:none;}
  .hero-slide.active{display:block;}
  .hero-slide .ph,.hero-slide .ph-sample,.hero-slide .editable-img{height:420px;}
  .hero-stage::after{background:linear-gradient(180deg, rgba(var(--c-bg-rgb),.0) 30%, rgba(var(--c-bg-rgb),.92) 88%);}
  .hero-copy{position:relative;top:auto;left:auto;transform:none;max-width:none;padding:36px 22px 12px;}
  .hero-copy h1{font-size:34px;}
  .hero-copy p{font-size:16px;}
  .hero-btns{flex-direction:column;}
  .hero-btns .btn{width:100%;}
  .hero-info{position:relative;right:auto;bottom:auto;margin:24px 22px 0;justify-content:center;flex-wrap:wrap;gap:16px 22px;padding:20px;}
  .hero-info .sep{display:none;}
  .hero-dots{display:none;}

  .head{margin-bottom:44px;}
  .head h2{font-size:27px;}
  .head .en::before,.head .en::after{width:18px;}

  .intro{padding:80px 0;}
  .intro-grid{grid-template-columns:1fr;gap:64px;}
  .intro-imgs .big{height:340px;}
  .intro-imgs .small{width:140px;height:140px;right:-6px;bottom:-30px;}
  .intro-imgs .badge{width:104px;height:104px;font-size:12px;left:-12px;top:-18px;}
  .intro-imgs .badge b{font-size:22px;}
  .intro-body h2{font-size:27px;}

  .features,.services,.topics,.flow,.staff,.pricing,.faq,.access{padding:80px 0;}
  .access{padding-bottom:0;}
  .feat-grid,.serv-grid,.staff-grid{grid-template-columns:1fr;}
  .serv-card{padding:22px 22px 40px;}

  .topic-list{gap:64px;}
  .topic-row{grid-template-columns:1fr;gap:30px;}
  .topic-list .topic-row:nth-child(even) .topic-media{order:0;}
  .topic-media .ph,.topic-media .ph-sample,.topic-media .editable-img{height:280px;}
  .topic-body h3{font-size:26px;}
  .topic-body .btn{width:100%;}

  .flow-track{grid-template-columns:1fr;gap:34px;}
  .flow-step .ph,.flow-step .ph-sample,.flow-step .editable-img{height:200px;}

  .director{grid-template-columns:1fr;gap:32px;padding:32px 24px;}
  .director .ph,.director .editable-img{height:360px;}
  .director h3 b{font-size:26px;}
  .director .lead{font-size:20px;}

  .price-grid{grid-template-columns:1fr;}
  .price-block .ph-head{font-size:18px;padding:18px 22px;}
  .price-row{padding:16px 22px;flex-wrap:wrap;gap:6px;}
  .price-row .amt{font-size:19px;}

  .faq-q{font-size:15.5px;padding:20px 22px;gap:14px;}
  .faq-q .q{width:32px;height:32px;font-size:15px;}
  .faq-a-inner{padding:0 22px 24px 68px;}

  .contact{padding:72px 0;}
  .contact h2{font-size:28px;}
  .cc{min-width:0;width:100%;padding:28px 24px;}
  .cc .tel{font-size:34px;}

  .access-grid{grid-template-columns:1fr;gap:36px;}
  .access-info dl{grid-template-columns:96px minmax(0,1fr);}
  .access-info dt,.access-info dd{padding:14px 6px;font-size:14px;}
  .hours-table th,.hours-table td{padding:10px 4px;font-size:12px;}
  .hours-table tbody td{font-size:14px;}
  .hours-table tbody th{font-size:11px;}
  .map-embed{height:320px;}

  .site-footer{margin-top:80px;padding:52px 0 0;}
  .footer-grid{gap:32px;}
}

/* header-fit:aozora-dental-onepage (TEC-1208-3) */
/* .site-logo の flex:none による押し出し（375px でトグル right 447px）。 */
@media(max-width:600px){
  .site-logo{flex:1 1 auto;min-width:0}
  .nav-toggle{flex:none}
}
/* /header-fit:aozora-dental-onepage */
/* TEC-1414: intro-sign-name-width */
.intro-body .sign .nm{min-width:7em;}