/* =========================================================
   NOHARA DENTAL CLINIC — "Sakura-shinmachi style" renewal
   ========================================================= */

:root{
  --c-bg:        #ffffff;
  --c-bg-cream:  #f7f1e6;
  --c-bg-soft:   #f1ece1;
  --c-bg-dark:   #0c2942;
  --c-text:      #2a3340;
  --c-text-mute: #6a7484;
  --c-line:      #e1d9c8;
  --c-primary:   #0767B2;
  --c-primary-d: #054b82;
  --c-primary-l: #d9e8f5;
  --c-accent:    #b48a4a;
  --c-accent-d:  #8e6a32;
  --c-warn:      #b04a3a;

  --shadow-sm: 0 2px 8px rgba(10,20,40,.06);
  --shadow-md: 0 12px 36px rgba(10,20,40,.10);
  --shadow-lg: 0 24px 60px rgba(10,20,40,.14);

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 22px;

  --container: 1180px;
  --container-narrow: 880px;
  --header-h: 86px;
  --header-h-sp: 64px;

  --font-jp:    "Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --font-min:   "Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --font-en:    "Cormorant Garamond","Times New Roman",serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); }
body{
  margin:0;
  font-family:var(--font-jp);
  font-size:16px;
  line-height:1.95;
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-primary-d); text-decoration:none; transition:opacity .25s var(--ease), color .25s var(--ease); }
a:hover{ opacity:.78; }
button{ font:inherit; color:inherit; cursor:pointer; background:transparent; border:0; padding:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}
.container--narrow{ max-width:var(--container-narrow); }
.sp-only{ display:none; }
@media (max-width:767px){
  .sp-only{ display:inline; }
  .pc-only{ display:none; }
}

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--c-line);
  transition:transform .35s var(--ease);
}
.site-header__inner{
  height:var(--header-h);
  max-width:1320px;
  margin:0 auto;
  padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.logo{ display:flex; align-items:center; gap:14px; color:var(--c-text); }
.logo__mark{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.logo__mark img{
  width:100%; height:100%; object-fit:contain;
  display:block;
}
/* 暗背景（フッター・ドロワー）では白く反転して表示 */
.site-footer .logo__mark img,
.drawer .logo__mark img{
  filter:invert(1) brightness(1.05);
}
.logo__text{ display:flex; flex-direction:column; line-height:1.2; }
.logo__name{ font-family:var(--font-min); font-weight:600; font-size:20px; letter-spacing:.06em; }
.logo__sub{ font-family:var(--font-en); font-size:11px; letter-spacing:.22em; color:var(--c-text-mute); margin-top:3px; }

.gnav__list{ display:flex; gap:4px; align-items:center; }
.gnav__list a{
  display:flex; flex-direction:column; align-items:center;
  padding:10px 11px; line-height:1.1;
  color:var(--c-text);
  position:relative;
}
.gnav__list a::after{
  content:""; position:absolute; left:50%; bottom:2px;
  width:0; height:1px; background:var(--c-primary);
  transition:width .3s var(--ease), left .3s var(--ease);
}
.gnav__list a:hover{ opacity:1; color:var(--c-primary); }
.gnav__list a:hover::after{ width:60%; left:20%; }
.gnav__list .ja{ font-size:14px; font-weight:500; letter-spacing:.04em; }
.gnav__list .en{ font-family:var(--font-en); font-size:10px; letter-spacing:.18em; color:var(--c-text-mute); margin-top:4px; }

.hamburger{ display:none; width:42px; height:42px; position:relative; }
.hamburger span{
  position:absolute; left:8px; right:8px; height:2px; background:var(--c-text);
  transition:transform .3s var(--ease), top .3s var(--ease), opacity .3s;
}
.hamburger span:nth-child(1){ top:13px; }
.hamburger span:nth-child(2){ top:20px; }
.hamburger span:nth-child(3){ top:27px; }
.hamburger.is-open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ top:20px; transform:rotate(-45deg); }

@media (max-width:1180px){
  .gnav{ display:none; }
  .hamburger{ display:block; }
}

/* ============ SIDE FIXED CTA (PC) ============ */
.side-cta{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:60;
  display:flex; flex-direction:column; gap:8px;
}
.side-cta__item{
  display:flex; flex-direction:column; align-items:center;
  width:96px; padding:18px 8px;
  background:var(--c-primary); color:#fff;
  border-radius:8px 0 0 8px;
  font-size:12px; line-height:1.45; text-align:center;
  box-shadow:var(--shadow-md);
  transition:background .3s var(--ease), transform .25s var(--ease);
}
.side-cta__item:hover{ background:var(--c-primary-d); transform:translateX(-3px); opacity:1; }
.side-cta__item--web{ background:var(--c-accent); }
.side-cta__item--web:hover{ background:var(--c-accent-d); }
.side-cta__icon{ font-size:22px; margin-bottom:6px; }
.side-cta__label{ font-weight:500; }
.side-cta__num{ font-family:var(--font-min); font-size:13px; margin-top:6px; letter-spacing:.04em; }

@media (max-width:1100px){
  .side-cta{ display:none; }
}

/* ============ HERO ============ */
.hero{
  position:relative;
  margin-top:var(--header-h);
  height:calc(100vh - var(--header-h));
  min-height:560px; max-height:820px;
  overflow:hidden;
  background:#222;
}
.hero__slider{ position:absolute; inset:0; }
.hero__slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.6s var(--ease), transform 7s linear;
}
.hero__slide.is-active{ opacity:1; transform:scale(1); }
.hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(10,30,50,.55) 0%, rgba(10,30,50,.25) 60%, rgba(10,30,50,.15) 100%);
}
.hero__inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  max-width:var(--container); margin:0 auto; padding:0 56px;
  color:#fff;
}
.hero__eyebrow{
  font-family:var(--font-en);
  letter-spacing:.36em; font-size:13px; font-weight:500;
  margin:0 0 24px; opacity:.9;
}
.hero__catch{
  font-family:var(--font-min);
  font-weight:500;
  font-size:clamp(32px, 4.6vw, 64px);
  line-height:1.45;
  letter-spacing:.04em;
  margin:0 0 28px;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
.hero__sub{
  font-family:var(--font-min);
  font-size:clamp(15px,1.4vw,20px);
  letter-spacing:.12em;
  margin:0 0 18px;
}
.hero__lead{
  font-size:15px;
  line-height:2;
  letter-spacing:.06em;
  max-width:520px;
  opacity:.94;
}

.hero__nav{ position:absolute; inset:0; pointer-events:none; }
.hero__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.18);
  color:#fff; font-size:28px; line-height:50px;
  pointer-events:auto;
  transition:background .25s var(--ease);
}
.hero__arrow:hover{ background:rgba(255,255,255,.32); }
.hero__arrow--prev{ left:24px; }
.hero__arrow--next{ right:24px; }

.hero__dots{
  position:absolute; left:0; right:0; bottom:96px;
  display:flex; justify-content:center; gap:14px;
}
.hero__dot{
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.4);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.hero__dot.is-active{ background:#fff; transform:scale(1.4); }

.hero__info{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(10,30,50,.78);
  color:#fff; padding:14px 20px;
  backdrop-filter:blur(6px);
}
.hero__info ul{
  max-width:var(--container); margin:0 auto;
  display:flex; gap:36px; flex-wrap:wrap; justify-content:center;
  font-size:14px; letter-spacing:.04em;
}
.hero__info span{
  display:inline-block;
  margin-right:14px; padding:2px 10px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:2px;
  font-family:var(--font-min); font-size:12px; letter-spacing:.18em;
}

@media (max-width:767px){
  .hero{ height:auto; min-height:auto; }
  .hero__slider{ position:relative; height:80vh; min-height:520px; }
  .hero__inner{ padding:0 28px; }
  .hero__arrow{ display:none; }
  .hero__dots{ bottom:24px; }
  .hero__info{ position:relative; }
  .hero__info ul{ flex-direction:column; gap:8px; align-items:flex-start; }
}

/* ============ SECTION COMMON ============ */
.section{
  padding:120px 0;
  position:relative;
}
@media (max-width:767px){ .section{ padding:72px 0; } }

.section--concept{ background:var(--c-bg); }
.section--features{ background:var(--c-bg-cream); }
.section--service{ background:var(--c-bg); }
.section--message{ background:var(--c-bg-soft); }
.section--faq{ background:var(--c-bg); }
.section--access{ background:var(--c-bg-cream); }

.sec-head{ text-align:center; margin-bottom:64px; }
.sec-head__en{
  font-family:var(--font-en);
  font-size:14px; letter-spacing:.42em; color:var(--c-primary);
  margin:0 0 18px;
}
.sec-head__en::before{
  content:""; display:inline-block;
  width:32px; height:1px; background:var(--c-primary);
  vertical-align:middle; margin:0 14px 4px 0;
}
.sec-head__en::after{
  content:""; display:inline-block;
  width:32px; height:1px; background:var(--c-primary);
  vertical-align:middle; margin:0 0 4px 14px;
}
.sec-head__jp{
  font-family:var(--font-min);
  font-weight:500;
  font-size:clamp(26px,3.2vw,40px);
  line-height:1.55;
  letter-spacing:.06em;
  margin:0 0 18px;
}
.sec-head__lead{
  font-size:15px; color:var(--c-text-mute);
  letter-spacing:.04em; margin:0;
}
.sec-head--light .sec-head__jp{ color:var(--c-text); }

/* ============ CONCEPT ============ */
.concept__grid{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:72px; align-items:center;
}
.concept__media{
  position:relative;
}
.concept__media img{ border-radius:6px; box-shadow:var(--shadow-md); }
.concept__since{
  position:absolute; right:-18px; bottom:-22px;
  background:var(--c-primary); color:#fff;
  width:120px; height:120px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-en); font-size:15px; letter-spacing:.18em;
  box-shadow:var(--shadow-md);
}
.concept__catch{
  font-family:var(--font-min);
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.65; letter-spacing:.06em;
  margin:0 0 28px;
}
.concept__catch em{
  font-style:normal; color:var(--c-primary);
  border-bottom:2px solid currentColor; padding-bottom:2px;
}
.concept__text{ margin:0 0 18px; line-height:2.05; }

@media (max-width:900px){
  .concept__grid{ grid-template-columns:1fr; gap:56px; }
  .concept__since{ right:auto; left:50%; transform:translateX(-50%); bottom:-28px; width:96px; height:96px; font-size:13px; }
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px;
  font-size:14px; letter-spacing:.12em;
  border-radius:2px;
  transition:all .3s var(--ease);
  border:1px solid transparent;
  font-weight:500;
}
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn:hover{ opacity:1; }

.btn--line{
  border-color:var(--c-primary); color:var(--c-primary);
  background:transparent;
}
.btn--line:hover{ background:var(--c-primary); color:#fff; }
.btn--accent{
  background:var(--c-accent); color:#fff;
  border-color:var(--c-accent);
}
.btn--accent:hover{ background:var(--c-accent-d); border-color:var(--c-accent-d); }
.btn--ghost{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.6);
}
.btn--ghost:hover{ background:rgba(255,255,255,.1); }
.btn--lg{ padding:18px 38px; font-size:15px; }
.btn--block{ display:flex; justify-content:center; width:100%; }

/* ============ FEATURES ============ */
.features__list{ display:flex; flex-direction:column; gap:96px; }
.feature{
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:64px; align-items:center;
}
.feature--reverse{ grid-template-columns:1fr 1.1fr; direction:rtl; }
.feature--reverse > *{ direction:ltr; }
.feature__media{
  height:420px;
  background-size:cover; background-position:center;
  border-radius:4px;
  box-shadow:var(--shadow-md);
}
.feature__num{
  font-family:var(--font-en);
  font-size:54px; color:var(--c-primary);
  line-height:1;
  letter-spacing:.04em;
  margin:0 0 18px;
}
.feature__num span{
  display:block;
  font-size:12px; letter-spacing:.36em; color:var(--c-text-mute);
  margin-bottom:8px;
}
.feature__title{
  font-family:var(--font-min);
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.6; letter-spacing:.06em;
  margin:0 0 24px;
}
.feature__text{ line-height:2.05; }

@media (max-width:900px){
  .feature, .feature--reverse{ grid-template-columns:1fr; gap:32px; direction:ltr; }
  .feature__media{ height:280px; }
}

/* ============ SERVICE ============ */
.service__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.service__item{
  display:flex; flex-direction:column;
  padding:36px 28px;
  background:#fff;
  border:1px solid var(--c-line);
  color:var(--c-text);
  position:relative;
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.service__item::after{
  content:"→"; position:absolute; right:24px; bottom:20px;
  color:var(--c-primary);
  font-family:var(--font-en); font-size:18px;
  transition:transform .25s var(--ease);
}
.service__item:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:var(--c-primary);
  opacity:1;
}
.service__item:hover::after{ transform:translateX(4px); }
.service__no{
  font-family:var(--font-en);
  font-size:42px; color:var(--c-accent);
  line-height:1; margin-bottom:18px;
}
.service__title{
  font-family:var(--font-min);
  font-size:20px; letter-spacing:.06em;
  margin:0 0 4px; font-weight:600;
}
.service__en{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.28em;
  color:var(--c-text-mute);
  margin:0 0 18px;
}
.service__desc{
  font-size:13.5px; line-height:1.95;
  color:var(--c-text-mute);
  margin:0;
}
.service__more{
  margin-top:48px; padding:24px;
  background:var(--c-bg-cream);
  border:1px dashed var(--c-line);
  text-align:center;
  font-size:14px; color:var(--c-text-mute); letter-spacing:.08em;
}

@media (max-width:900px){
  .service__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:540px){
  .service__grid{ grid-template-columns:1fr; }
}

/* ============ MESSAGE ============ */
.message__body{
  background:#fff;
  padding:64px clamp(28px, 6vw, 72px);
  border-radius:4px;
  box-shadow:var(--shadow-sm);
  border-top:3px solid var(--c-primary);
}
.message__lead{
  font-family:var(--font-min);
  font-size:clamp(20px,2vw,26px);
  line-height:1.8; letter-spacing:.06em;
  margin:0 0 28px; color:var(--c-primary-d);
}
.message__body p{ margin:0 0 18px; line-height:2.1; }
.message__sign{
  margin-top:36px;
  text-align:right;
  font-family:var(--font-min); font-size:16px; letter-spacing:.08em;
}

/* ============ FAQ ============ */
.faq__list{ border-top:1px solid var(--c-line); }
.faq__item{ border-bottom:1px solid var(--c-line); }
.faq__q{
  display:block; width:100%; text-align:left;
  padding:26px 56px 26px 56px;
  font-family:var(--font-min);
  font-size:17px; letter-spacing:.04em;
  position:relative;
  transition:color .25s var(--ease);
}
.faq__q::before{
  content:"Q"; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-family:var(--font-en); font-size:22px; color:var(--c-primary);
  width:28px; text-align:center;
}
.faq__q::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:22px; color:var(--c-primary); transition:transform .3s var(--ease);
  width:24px; height:24px; line-height:22px; text-align:center;
  border:1px solid var(--c-primary); border-radius:50%;
}
.faq__q:hover{ color:var(--c-primary); }
.faq__item.is-open .faq__q::after{ content:"−"; transform:translateY(-50%) rotate(180deg); }

.faq__a{
  max-height:0; overflow:hidden;
  transition:max-height .4s var(--ease);
  background:var(--c-bg-cream);
}
.faq__a > p{
  padding:24px 56px;
  margin:0;
  position:relative;
  line-height:2;
}
.faq__a > p::before{
  content:"A"; position:absolute; left:14px; top:24px;
  font-family:var(--font-en); font-size:22px; color:var(--c-accent);
  width:28px; text-align:center;
}
.faq__item.is-open .faq__a{ max-height:500px; }

/* ============ ACCESS ============ */
.access__grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:48px;
}
.access__map{
  height:480px; border-radius:4px; overflow:hidden;
  box-shadow:var(--shadow-md);
}
.access__map iframe{ width:100%; height:100%; border:0; }

.access__dl{ margin:0 0 32px; }
.access__dl dt{
  font-family:var(--font-min);
  font-size:13px; letter-spacing:.18em; color:var(--c-primary);
  margin-bottom:6px;
}
.access__dl dd{
  margin:0 0 18px; padding-bottom:18px;
  border-bottom:1px dotted var(--c-line);
  line-height:1.85;
}
.access__tel{
  font-family:var(--font-min);
  font-size:26px; letter-spacing:.06em; color:var(--c-text);
}
.access__note{
  display:inline-block; margin-left:14px;
  padding:2px 10px;
  font-size:11px; letter-spacing:.18em;
  border:1px solid var(--c-text-mute); color:var(--c-text-mute);
  border-radius:2px;
}

.hours{
  width:100%; border-collapse:collapse;
  font-size:13px; text-align:center;
}
.hours th,.hours td{
  border:1px solid var(--c-line);
  padding:12px 4px;
  background:#fff;
}
.hours thead th{
  background:var(--c-primary); color:#fff;
  font-family:var(--font-min); font-weight:500; letter-spacing:.06em;
}
.hours tbody th{
  background:var(--c-bg-soft);
  font-family:var(--font-min); font-weight:500;
}
.hours small{ display:block; font-size:11px; color:var(--c-text-mute); margin-top:2px; }
.hours .off{ color:var(--c-warn); font-weight:600; }
.hours__note{ font-size:12px; color:var(--c-text-mute); margin-top:12px; letter-spacing:.04em; }

@media (max-width:900px){
  .access__grid{ grid-template-columns:1fr; gap:36px; }
  .access__map{ height:320px; }
}

/* ============ CTA BAND ============ */
.cta-band{ background:var(--c-bg-dark); color:#fff; }
.cta-band__inner{
  max-width:var(--container); margin:0 auto;
  padding:80px 28px;
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  grid-template-rows:auto auto auto;
  column-gap:64px;
  row-gap:24px;
}
.cta-band__inner::before{
  content:""; grid-column:2; grid-row:1 / -1; background:rgba(255,255,255,.18);
}
.cta-band__col{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:1 / span 3;
  text-align:center;
  align-items:center;
  justify-items:center;
}
.cta-band__col:not(.cta-band__col--web){ grid-column:1; }
.cta-band__col--web{ grid-column:3; }
.cta-band__title{
  font-family:var(--font-min);
  font-size:24px; letter-spacing:.1em; font-weight:500;
  margin:0;
}
.cta-band__title::after{
  content:""; display:block; width:40px; height:1px;
  background:var(--c-accent);
  margin:14px auto 0;
}
.cta-band__sub{
  font-size:13px; letter-spacing:.06em; opacity:.8;
  margin:0;
}
.cta-band__tel{
  display:inline-block;
  font-family:var(--font-min);
  font-size:36px; letter-spacing:.06em;
  color:#fff;
}
.cta-band__tel:hover{ opacity:.85; }

@media (max-width:767px){
  .cta-band__inner{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    column-gap:0; row-gap:0;
    gap:48px;
    padding:56px 28px;
  }
  .cta-band__inner::before{ display:none; }
  .cta-band__col{
    grid-column:1;
    grid-row:auto;
    grid-template-rows:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
  }
  .cta-band__col--web{ grid-column:1; }
  .cta-band__tel{ font-size:30px; }
}

/* ============ FOOTER ============ */
.site-footer{
  background:#08182b; color:rgba(255,255,255,.78);
  padding:72px 0 24px;
  font-size:13.5px;
}
.site-footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:56px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.site-footer .logo__name,
.site-footer .logo__sub{ color:#fff; }
.site-footer .logo__sub{ color:rgba(255,255,255,.6); }
.site-footer__addr{ margin-top:18px; line-height:1.95; }
.site-footer__h{
  font-family:var(--font-min);
  font-size:15px; letter-spacing:.1em; color:#fff;
  margin:0 0 16px; padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.site-footer__nav{ display:flex; flex-direction:column; gap:8px; }
.site-footer__nav a{ color:rgba(255,255,255,.78); }
.site-footer__nav a:hover{ color:#fff; opacity:1; }
.site-footer__copy{
  margin:24px 0 0; text-align:center;
  font-family:var(--font-en); letter-spacing:.24em; font-size:12px;
  color:rgba(255,255,255,.5);
}
@media (max-width:767px){
  .site-footer__grid{ grid-template-columns:1fr; gap:36px; }
}

/* ============ MOBILE FIXED CTA ============ */
.sp-fixed-cta{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  grid-template-columns:1fr 1fr;
  box-shadow:0 -4px 16px rgba(0,0,0,.12);
}
.sp-fixed-cta__item{
  height:56px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:#fff;
  font-size:14px; letter-spacing:.06em; font-weight:500;
}
.sp-fixed-cta__item--tel{ background:var(--c-primary); }
.sp-fixed-cta__item--web{ background:var(--c-accent); }
@media (max-width:1100px){
  .sp-fixed-cta{ display:grid; }
  body{ padding-bottom:56px; }
}

/* ============ DRAWER ============ */
.drawer{
  position:fixed; inset:0;
  background:rgba(5,75,130,.98);
  color:#fff;
  z-index:75;
  padding:calc(var(--header-h-sp) + 32px) 32px 32px;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s;
  overflow-y:auto;
}
.drawer.is-open{ opacity:1; visibility:visible; }
.drawer__list{ display:flex; flex-direction:column; gap:4px; }
.drawer__list a{
  display:block;
  padding:18px 12px;
  font-family:var(--font-min); font-size:18px; letter-spacing:.08em;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.drawer__cta{
  margin-top:32px;
  display:flex; flex-direction:column; gap:12px;
}

/* ============ HEADER MOBILE ============ */
@media (max-width:1100px){
  .site-header__inner{ height:var(--header-h-sp); padding:0 18px; }
  .logo__mark{ width:38px; height:38px; }
  .logo__name{ font-size:16px; }
  .logo__sub{ font-size:10px; letter-spacing:.18em; }
  .hero{ margin-top:var(--header-h-sp); }
  html{ scroll-padding-top: var(--header-h-sp); }
}

/* ============ PAGE HERO (subpages) ============ */
.page-hero{
  position:relative;
  margin-top:var(--header-h);
  height:340px;
  background-size:cover;
  background-position:center;
  background-color:#103048;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,30,50,.35) 0%, rgba(10,30,50,.65) 100%);
}
.page-hero__inner{ position:relative; padding:0 28px; }
.page-hero__en{
  font-family:var(--font-en);
  font-size:14px; letter-spacing:.42em;
  margin:0 0 14px;
  opacity:.92;
}
.page-hero__en::before,
.page-hero__en::after{
  content:""; display:inline-block; width:32px; height:1px; background:rgba(255,255,255,.7);
  vertical-align:middle; margin:0 14px 4px;
}
.page-hero__jp{
  font-family:var(--font-min);
  font-weight:500;
  font-size:clamp(28px,3.8vw,44px);
  letter-spacing:.1em;
  margin:0;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
@media (max-width:1100px){
  .page-hero{ margin-top:var(--header-h-sp); height:240px; }
}

/* ============ BREADCRUMB ============ */
.crumb{
  background:var(--c-bg-cream);
  border-bottom:1px solid var(--c-line);
  font-size:12px; letter-spacing:.06em;
  color:var(--c-text-mute);
}
.crumb__inner{
  max-width:var(--container);
  margin:0 auto; padding:14px 28px;
}
.crumb__inner a{ color:var(--c-text-mute); }
.crumb__inner a:hover{ color:var(--c-primary); opacity:1; }
.crumb__sep{ margin:0 10px; opacity:.6; }

/* ============ PROSE BLOCKS ============ */
.prose{ max-width:780px; margin:0 auto; }
.prose p{ line-height:2.05; margin:0 0 22px; }
.prose h3{
  font-family:var(--font-min);
  font-size:22px; letter-spacing:.06em; font-weight:500;
  margin:48px 0 18px;
  padding-left:16px;
  border-left:3px solid var(--c-primary);
}
.prose h4{
  font-family:var(--font-min);
  font-size:17px; letter-spacing:.06em;
  margin:32px 0 12px;
  color:var(--c-primary-d);
}
.prose ul{ margin:0 0 22px; padding:0; }
.prose ul li{
  position:relative; padding-left:22px; margin-bottom:8px; line-height:2;
}
.prose ul li::before{
  content:""; position:absolute; left:0; top:.95em;
  width:8px; height:8px; border-radius:50%;
  background:var(--c-accent);
}

/* Two-column lists for service.html */
.svc-detail{
  display:grid; grid-template-columns:1fr 1fr; gap:48px 64px;
  margin-top:32px;
}
.svc-detail__item{
  border-top:1px solid var(--c-line);
  padding-top:32px;
}
.svc-detail__head{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:14px;
}
.svc-detail__no{
  font-family:var(--font-en);
  font-size:32px; color:var(--c-accent); line-height:1;
}
.svc-detail__title{
  font-family:var(--font-min); font-size:20px; letter-spacing:.06em;
  margin:0; font-weight:600;
}
.svc-detail__en{
  font-family:var(--font-en); font-size:11px; letter-spacing:.28em;
  color:var(--c-text-mute);
  margin:2px 0 0;
}
.svc-detail__text{ margin:0; line-height:2; font-size:14.5px; }

@media (max-width:767px){
  .svc-detail{ grid-template-columns:1fr; gap:32px; }
}

/* Doctor profile card (message.html) */
.doctor{
  display:grid; grid-template-columns:280px 1fr; gap:48px;
  margin-bottom:56px;
}
.doctor__photo{
  background:var(--c-bg-soft);
  height:340px; border-radius:4px;
  display:grid; place-items:center;
  font-family:var(--font-en); color:var(--c-text-mute);
  letter-spacing:.18em;
}
.doctor__name{
  font-family:var(--font-min);
  font-size:24px; letter-spacing:.08em; margin:0 0 6px;
}
.doctor__role{
  font-size:12px; letter-spacing:.18em; color:var(--c-primary);
  margin:0 0 24px;
}
.doctor__career{
  margin:0; font-size:14px; line-height:2;
}
.doctor__career dt{
  display:inline-block; min-width:5em; color:var(--c-text-mute);
}
.doctor__career dd{ display:inline; margin:0; }
.doctor__career dd::after{ content:""; display:block; }

@media (max-width:767px){
  .doctor{ grid-template-columns:1fr; gap:24px; }
  .doctor__photo{ height:260px; }
}

/* Feature deep card (features.html) */
.feature-deep{
  background:#fff;
  padding:56px clamp(28px,5vw,64px);
  margin-bottom:32px;
  border-left:4px solid var(--c-primary);
  box-shadow:var(--shadow-sm);
}
.feature-deep__num{
  font-family:var(--font-en);
  font-size:48px; color:var(--c-primary);
  line-height:1; margin:0 0 8px;
}
.feature-deep__num span{
  display:block; font-size:11px; letter-spacing:.36em;
  color:var(--c-text-mute); margin-bottom:6px;
}
.feature-deep__title{
  font-family:var(--font-min);
  font-size:clamp(22px,2.4vw,30px); line-height:1.55; letter-spacing:.06em;
  margin:0 0 20px;
}
.feature-deep__lead{
  font-family:var(--font-min);
  font-size:17px; line-height:1.95; letter-spacing:.06em;
  color:var(--c-primary-d); margin:0 0 20px;
}

/* ============ BLOG LIST ============ */
.blog-layout{
  display:grid; grid-template-columns:1fr 280px; gap:64px;
  align-items:start;
}
@media (max-width:900px){
  .blog-layout{ grid-template-columns:1fr; gap:48px; }
}

.blog-cardlist{ display:flex; flex-direction:column; gap:32px; }

.blog-card{
  display:grid; grid-template-columns:240px 1fr; gap:28px;
  padding:24px;
  background:#fff;
  border:1px solid var(--c-line);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.blog-card:hover{
  border-color:var(--c-primary);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
  opacity:1;
}
.blog-card__media{
  height:160px;
  background-size:cover; background-position:center;
  background-color:var(--c-bg-soft);
  border-radius:2px;
}
.blog-card__body{ display:flex; flex-direction:column; }
.blog-card__meta{
  display:flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:.06em; color:var(--c-text-mute);
  margin-bottom:10px;
}
.blog-card__date{
  font-family:var(--font-en); font-size:13px; letter-spacing:.12em;
}
.blog-card__cat{
  display:inline-block; padding:2px 10px;
  background:var(--c-primary-l); color:var(--c-primary-d);
  font-size:11px; letter-spacing:.1em;
  border-radius:2px;
}
.blog-card__title{
  font-family:var(--font-min);
  font-size:19px; line-height:1.6; letter-spacing:.04em;
  margin:0 0 10px;
  color:var(--c-text);
  font-weight:600;
}
.blog-card:hover .blog-card__title{ color:var(--c-primary); }
.blog-card__excerpt{
  font-size:13.5px; line-height:1.9; color:var(--c-text-mute);
  margin:0 0 12px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-card__more{
  margin-top:auto;
  font-family:var(--font-en); font-size:12px; letter-spacing:.18em;
  color:var(--c-primary);
}
@media (max-width:600px){
  .blog-card{ grid-template-columns:1fr; gap:16px; }
  .blog-card__media{ height:180px; }
}

/* Pagination */
.pager{
  display:flex; justify-content:center; align-items:center; gap:6px;
  margin-top:48px;
  font-family:var(--font-en); letter-spacing:.08em;
}
.pager a, .pager span{
  min-width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid var(--c-line);
  color:var(--c-text);
  font-size:14px;
  transition:all .2s var(--ease);
}
.pager a:hover{ background:var(--c-primary); color:#fff; border-color:var(--c-primary); opacity:1; }
.pager .is-current{ background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.pager .pager__nav{ padding:0 14px; }

/* Sidebar */
.blog-side{
  display:flex; flex-direction:column; gap:36px;
  position:sticky; top:calc(var(--header-h) + 24px);
}
@media (max-width:900px){ .blog-side{ position:static; } }
.blog-side__block h3{
  font-family:var(--font-min);
  font-size:15px; letter-spacing:.16em;
  margin:0 0 16px; padding-bottom:10px;
  border-bottom:1px solid var(--c-line);
  position:relative;
}
.blog-side__block h3::after{
  content:""; position:absolute; left:0; bottom:-1px;
  width:40px; height:1px; background:var(--c-primary);
}
.blog-side__block h3 small{
  display:block;
  font-family:var(--font-en); font-size:10px; letter-spacing:.28em;
  color:var(--c-primary); margin-top:4px;
}
.blog-side ul{ display:flex; flex-direction:column; gap:10px; font-size:13.5px; }
.blog-side ul a{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0;
  color:var(--c-text);
  border-bottom:1px dotted var(--c-line);
}
.blog-side ul a:hover{ color:var(--c-primary); opacity:1; }
.blog-side ul a span{
  font-family:var(--font-en); font-size:11px; color:var(--c-text-mute);
}
.blog-side .popular{ display:flex; flex-direction:column; }
.blog-side .popular a{
  display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:center;
  padding:12px 0;
  border-bottom:1px dotted var(--c-line);
  color:var(--c-text);
  font-size:13px; line-height:1.55;
}
.blog-side .popular a:hover{ color:var(--c-primary); opacity:1; }
.blog-side .popular .r{
  font-family:var(--font-en);
  font-size:24px; line-height:1; letter-spacing:.04em;
  color:var(--c-accent);
  text-align:center;
}
.blog-side .popular a:nth-child(1) .r,
.blog-side .popular a:nth-child(2) .r,
.blog-side .popular a:nth-child(3) .r{
  color:var(--c-accent-d);
  font-weight:600;
}

.blog-side .recent{ display:flex; flex-direction:column; gap:14px; }
.blog-side .recent a{
  display:block; padding:10px 0;
  border-bottom:1px dotted var(--c-line);
  font-size:13px; line-height:1.7;
  color:var(--c-text);
}
.blog-side .recent .d{
  display:block;
  font-family:var(--font-en); font-size:11px; letter-spacing:.12em;
  color:var(--c-primary); margin-bottom:4px;
}

/* ============ SINGLE ARTICLE ============ */
.article{ background:#fff; }
.article__head{ margin-bottom:36px; }
.article__meta{
  display:flex; align-items:center; gap:14px;
  font-size:12px; color:var(--c-text-mute); letter-spacing:.06em;
  margin-bottom:16px;
}
.article__date{
  font-family:var(--font-en); font-size:14px; letter-spacing:.12em;
}
.article__cat{
  display:inline-block; padding:2px 10px;
  background:var(--c-primary-l); color:var(--c-primary-d);
  font-size:11px; letter-spacing:.1em;
  border-radius:2px;
}
.article__title{
  font-family:var(--font-min);
  font-size:clamp(24px,3vw,34px);
  line-height:1.55; letter-spacing:.06em;
  margin:0 0 24px;
  font-weight:500;
}
.article__hero{
  margin:0 0 40px;
  background:var(--c-bg-soft);
  height:340px;
  background-size:cover; background-position:center;
  border-radius:2px;
}
@media (max-width:600px){ .article__hero{ height:220px; } }

.article__body{ font-size:15.5px; line-height:2.05; }
.article__body p{ margin:0 0 22px; }
.article__body h2{
  font-family:var(--font-min);
  font-size:24px; line-height:1.6; letter-spacing:.06em;
  margin:56px 0 20px;
  padding:0 0 14px;
  border-bottom:1px solid var(--c-line);
  position:relative;
}
.article__body h2::after{
  content:""; position:absolute; left:0; bottom:-1px;
  width:60px; height:2px; background:var(--c-primary);
}
.article__body h3{
  font-family:var(--font-min);
  font-size:19px; line-height:1.7; letter-spacing:.06em;
  margin:40px 0 14px;
  padding-left:14px;
  border-left:3px solid var(--c-primary);
}
.article__body ul{ margin:0 0 22px; padding:0; }
.article__body ul li{
  position:relative; padding-left:22px; margin-bottom:6px; line-height:1.95;
}
.article__body ul li::before{
  content:""; position:absolute; left:0; top:.95em;
  width:8px; height:8px; border-radius:50%;
  background:var(--c-accent);
}
.article__body blockquote{
  margin:24px 0;
  padding:20px 28px;
  background:var(--c-bg-cream);
  border-left:4px solid var(--c-accent);
  font-family:var(--font-min);
  color:var(--c-primary-d);
}
.article__body blockquote p:last-child{ margin-bottom:0; }

.article__share{
  margin-top:48px; padding-top:32px;
  border-top:1px solid var(--c-line);
  display:flex; align-items:center; gap:14px;
  font-size:13px; letter-spacing:.08em; color:var(--c-text-mute);
}
.article__share span{ font-family:var(--font-en); font-size:11px; letter-spacing:.24em; }

.article__nav{
  display:grid; grid-template-columns:1fr auto 1fr; gap:14px;
  margin-top:32px; padding-top:24px;
  border-top:1px solid var(--c-line);
  align-items:center;
  font-size:13.5px;
}
.article__nav a{ color:var(--c-text); }
.article__nav a:hover{ color:var(--c-primary); opacity:1; }
.article__nav .prev{ text-align:left; }
.article__nav .next{ text-align:right; }
.article__nav .top{
  font-family:var(--font-en); font-size:11px; letter-spacing:.2em;
  color:var(--c-text-mute);
  padding:0 14px;
}

/* ============ PRICE TABLE ============ */
.price-block{ margin-bottom:64px; }
.price-block:last-child{ margin-bottom:0; }
.price-block__head{
  display:flex; align-items:baseline; gap:18px;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--c-line);
}
.price-block__no{
  font-family:var(--font-en);
  font-size:32px; color:var(--c-accent); line-height:1;
}
.price-block__title{
  font-family:var(--font-min);
  font-size:22px; letter-spacing:.06em; font-weight:600;
  margin:0;
}
.price-block__en{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.24em; color:var(--c-text-mute);
  margin-left:auto;
}
.price-block__desc{
  font-size:14px; color:var(--c-text-mute); line-height:1.9;
  margin:0 0 18px;
}

.price-table{
  width:100%; border-collapse:collapse;
  font-size:14.5px;
}
.price-table th,
.price-table td{
  padding:16px 18px;
  border-bottom:1px solid var(--c-line);
  vertical-align:top; line-height:1.7;
}
.price-table th{
  text-align:left;
  font-family:var(--font-min); font-weight:500;
  width:38%;
}
.price-table td.unit{
  text-align:right; white-space:nowrap;
  width:24%;
  font-family:var(--font-min);
  color:var(--c-primary-d); font-size:15.5px;
}
.price-table td.note{
  font-size:13px; color:var(--c-text-mute); width:38%;
}
.price-table tr:first-child th,
.price-table tr:first-child td{ border-top:2px solid var(--c-primary); }
.price-table .yen{
  display:inline-block; min-width:6em;
  border-bottom:1px dotted var(--c-line);
  padding:0 4px;
}

.price-note{
  background:var(--c-bg-cream);
  border-left:3px solid var(--c-accent);
  padding:20px 24px;
  font-size:13.5px; line-height:1.95;
  color:var(--c-text-mute);
  margin-top:24px;
}
.price-note strong{ color:var(--c-text); font-weight:600; }

@media (max-width:600px){
  .price-table th, .price-table td{ display:block; width:auto; padding:8px 0; }
  .price-table th{ border-bottom:0; padding-top:16px; }
  .price-table td.unit{ text-align:left; padding-bottom:4px; }
  .price-table td.note{ padding-bottom:16px; border-bottom:1px solid var(--c-line); }
  .price-table tr:first-child th{ border-top:2px solid var(--c-primary); }
  .price-block__en{ display:none; }
}

/* ============ 404 ERROR PAGE ============ */
.error-page{
  min-height:60vh;
  display:flex; align-items:center; justify-content:center;
  padding:80px 28px;
  text-align:center;
}
.error-page__num{
  font-family:var(--font-en);
  font-size:clamp(96px,18vw,180px);
  line-height:1;
  color:var(--c-primary);
  margin:0 0 8px;
  letter-spacing:.04em;
}
.error-page__en{
  font-family:var(--font-en);
  font-size:14px; letter-spacing:.42em;
  color:var(--c-primary);
  margin:0 0 24px;
}
.error-page__en::before,
.error-page__en::after{
  content:""; display:inline-block; width:32px; height:1px; background:var(--c-primary);
  vertical-align:middle; margin:0 14px 4px;
}
.error-page__jp{
  font-family:var(--font-min);
  font-size:clamp(22px,2.8vw,30px);
  line-height:1.6; letter-spacing:.06em;
  margin:0 0 24px;
  font-weight:500;
}
.error-page__text{
  font-size:14.5px; line-height:2;
  color:var(--c-text-mute);
  margin:0 0 36px;
}
.error-page__actions{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}

/* ============ PHOTO ASSET LABELS (temporary) ============ */
/* 実画像を入れたら、この CSS ブロックと HTML 内の data-photo 属性を削除してください */
.concept__media[data-photo],
.feature__media[data-photo],
.doctor__photo[data-photo],
.blog-card__media[data-photo],
.article__hero[data-photo]{
  position: relative;
}
[data-photo]::after{
  content: "📷 " attr(data-photo);
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,.82);
  color: #fff;
  padding: 5px 11px;
  font-family: "Courier New","Monaco",monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 3px;
  z-index: 10;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.35);
  line-height: 1.2;
  white-space: nowrap;
}

/* ============ ROUTE GUIDE (写真付き道のり案内) ============ */
.route{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:48px 44px 52px;
  margin:0 auto 56px;
  max-width:1080px;
  box-shadow:var(--shadow-sm);
  position:relative;
}
.route::before{
  content:"";
  position:absolute;
  top:0; left:36px; right:36px;
  height:4px;
  background:linear-gradient(90deg, var(--c-primary), var(--c-accent));
  border-radius:0 0 4px 4px;
}

.route__head{
  display:flex;
  align-items:center;
  gap:24px;
  padding-bottom:28px;
  margin-bottom:36px;
  border-bottom:1px dashed var(--c-line);
}
.route__badge{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  padding:10px 16px;
  background:var(--c-primary);
  color:#fff;
  font-family:var(--font-en);
  font-size:18px;
  font-weight:600;
  letter-spacing:.12em;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(7,103,178,.25);
}
.route__badge--alt{
  background:var(--c-accent);
  box-shadow:0 4px 12px rgba(180,138,74,.28);
}
.route__head-text{ flex:1; min-width:0; }
.route__title{
  margin:0 0 6px;
  font-family:var(--font-min);
  font-size:24px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--c-text);
  line-height:1.4;
}
.route__meta{
  margin:0;
  font-size:14px;
  color:var(--c-text-mute);
  letter-spacing:.04em;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.route__icon{ font-size:16px; }

.route__steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:36px 32px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:none;
}
.route__step{
  position:relative;
  display:flex;
  flex-direction:column;
}
/* ステップ間の矢印（3列レイアウト: 1→2, 2→3, 4→5, 5→6 の間に表示） */
.route__step:nth-child(2)::before,
.route__step:nth-child(3)::before,
.route__step:nth-child(5)::before,
.route__step:nth-child(6)::before{
  content:"›";
  position:absolute;
  left:-22px;
  top:90px;
  font-family:var(--font-en);
  font-size:36px;
  color:var(--c-accent);
  font-weight:600;
  line-height:1;
  pointer-events:none;
}
/* 1段目→2段目の縦矢印（3→4の間） */
.route__step:nth-child(4)::before{
  content:"›";
  position:absolute;
  left:50%;
  top:-30px;
  transform:translateX(-50%) rotate(90deg);
  font-family:var(--font-en);
  font-size:32px;
  color:var(--c-accent);
  font-weight:600;
  line-height:1;
  pointer-events:none;
}

.route__photo{
  position:relative;
  margin:0 0 16px;
  aspect-ratio:4/3;
  border-radius:var(--r-md);
  overflow:hidden;
  background:linear-gradient(135deg, #f5efe2 0%, #ece4d2 100%);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--c-line);
}
.route__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* 写真未設置時のプレースホルダー（imgが入っていない時のみ表示） */
.route__photo:not(:has(img))::after{
  content:"PHOTO";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-en);
  font-size:20px;
  letter-spacing:.3em;
  color:rgba(180,138,74,.4);
  font-weight:500;
}
.route__photo:not(:has(img))::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px dashed rgba(180,138,74,.35);
  border-radius:6px;
  pointer-events:none;
}
.route__no{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  background:#fff;
  color:var(--c-primary-d);
  font-family:var(--font-en);
  font-size:18px;
  font-weight:600;
  border-radius:50%;
  box-shadow:0 3px 10px rgba(10,20,40,.18);
  letter-spacing:0;
}

.route__body{ padding:0 4px; }
.route__step-title{
  margin:0 0 8px;
  font-family:var(--font-min);
  font-size:15.5px;
  font-weight:600;
  color:var(--c-text);
  line-height:1.55;
  letter-spacing:.02em;
}
.route__body p{
  margin:0;
  font-size:13.5px;
  line-height:1.85;
  color:var(--c-text-mute);
}

/* その他の交通手段 */
.route-others{
  max-width:1080px;
  margin:72px auto 0;
  padding:40px 44px;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.route-others__title{
  margin:0 0 28px;
  font-family:var(--font-min);
  font-size:20px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--c-text);
  text-align:center;
  position:relative;
  padding-bottom:16px;
}
.route-others__title::after{
  content:"";
  position:absolute;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:40px; height:2px;
  background:var(--c-accent);
}
.route-others__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.route-others__item h4{
  margin:0 0 10px;
  font-family:var(--font-jp);
  font-size:15px;
  font-weight:600;
  color:var(--c-primary-d);
  letter-spacing:.02em;
}
.route-others__item p{
  margin:0;
  font-size:14px;
  line-height:1.9;
  color:var(--c-text-mute);
}

/* タブレット（2列×3段） */
@media (max-width: 1024px){
  .route__steps{ grid-template-columns:repeat(2, 1fr); gap:36px 28px; }
  /* 既存の矢印をすべて非表示 */
  .route__step:nth-child(2)::before,
  .route__step:nth-child(3)::before,
  .route__step:nth-child(4)::before,
  .route__step:nth-child(5)::before,
  .route__step:nth-child(6)::before{
    display:none;
  }
  /* 2列レイアウト用の矢印を再定義（2,4,6番目=右側にだけ左向き矢印） */
  .route__step:nth-child(2n)::before{
    display:block;
    content:"›";
    position:absolute;
    left:-22px;
    top:90px;
    transform:none;
    font-family:var(--font-en);
    font-size:36px;
    color:var(--c-accent);
    font-weight:600;
    line-height:1;
    pointer-events:none;
  }
  .route-others__grid{ grid-template-columns:1fr 1fr; }
}

/* スマホ（1列 / 写真とテキストを横並びの縦積み） */
@media (max-width: 640px){
  .route{ padding:32px 22px 36px; margin-bottom:40px; }
  .route::before{ left:20px; right:20px; }
  .route__head{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding-bottom:22px;
    margin-bottom:28px;
  }
  .route__badge{ min-width:auto; padding:8px 14px; font-size:15px; }
  .route__title{ font-size:19px; }
  .route__meta{ font-size:13px; }
  .route__steps{ grid-template-columns:1fr; gap:24px; }
  .route__step{ display:grid; grid-template-columns:42% 1fr; gap:16px; align-items:start; }
  .route__step::before{ display:none !important; }
  .route__photo{ margin:0; }
  .route__no{ width:32px; height:32px; font-size:15px; top:8px; left:8px; }
  .route__step-title{ font-size:14.5px; margin-bottom:6px; }
  .route__body p{ font-size:13px; }

  .route-others{ padding:28px 22px; margin-top:48px; }
  .route-others__grid{ grid-template-columns:1fr; gap:24px; }
}

/* ============ REVEAL ANIMATION ============ */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  will-change:opacity,transform;
}
.reveal.is-visible{ opacity:1; transform:none; }