/* ============================================================
   A案｜あたたかい緑   骨格の単位は --rbp 一本
   ============================================================ */
:root{
  --rbp: calc(100vw / 400);
  --pad: calc(var(--rbp) * 20);      /* 5vw */
  --navsafe: 0px;

  --bg:#f6faf2;          /* 地色（いちばん淡い緑） */
  --panel:#ffffff;       /* 白 */
  --text:#2b2e29;        /* 文字の黒 */
  --soft:#5b6157;        /* 補足の文字 */
  --line:#c2d2b4;
  --hair:#dde7d4;        /* 線 */
  --faint:#f1f7ea;
  --deco:#e7f0dc;        /* 地色との差がごくわずかな薄デコ（緑の淡い版） */
  --tint:#edf4e6;        /* 淡い緑（地・帯） */
  --tint2:#e4eeda;
  --accent:#5fa03c;      /* 主役の緑 */
  --accent-deep:#3e7226; /* 濃い緑（文字・締め） */
  --ink-deep:#1e3315;    /* 締めの深緑（フッター・写真の陰） */
  --shadow:0 0 40px rgba(43,46,41,.10);

  --ein:cubic-bezier(0,.55,.45,1);
  --eout:cubic-bezier(.55,0,1,.45);
  --eio:cubic-bezier(.85,0,.15,1);

  --jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  --en:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Hiragino Mincho ProN",Georgia,"Times New Roman",serif;
}
@media (min-width:1601px){ :root{ --rbp:4px; } }
@media (min-width:1100px){ :root{ --navsafe:172px; } }
/* 2026-08-29 修正：768〜1099px は右の縦メニューの逃げ幅が0で、中身と重なっていた */
@media (min-width:768px) and (max-width:1099px){ :root{ --navsafe:132px; } }
@media (max-width:767px){ :root{ --rbp: calc(100vw / 97.5); --pad:6vw; } }

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{overflow-x:hidden; -webkit-text-size-adjust:100%;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--jp); font-weight:500;
  font-size:16px; line-height:2; letter-spacing:.08em;
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
  padding-bottom:120px;
}
img,svg{max-width:100%;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
table{border-collapse:collapse;}

.wrap{max-width:1600px;margin:0 auto;padding:0 var(--pad);}
.wrap--nav{padding-right:calc(var(--pad) + var(--navsafe));}
.en{font-family:var(--en);letter-spacing:.06em;line-height:1;font-weight:500;}
.serif{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;line-height:1;}

/* ---------- 読み込み中の幕 ---------- */
#loader{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s linear;
}
#loader.done{opacity:0;pointer-events:none;}
#loader .lg{width:min(280px,62vw);}
#loader .lg img{width:100%;height:auto;display:block;}

/* ============================================================
   ヘッダー（fixed）
   ============================================================ */
.hd{position:fixed;inset:0 0 auto 0;z-index:90;pointer-events:none;}
.hd a,.hd button{pointer-events:auto;}

.brand{
  position:fixed;top:56px;left:var(--pad);z-index:92;
  display:flex;align-items:center;gap:8px;
  transition:color .3s linear;
  /* 2026-08-29 修正：写真が下を通ると医院名が読めなくなるため、白い板を常に敷く
     （地色 #f6faf2 の上ではほとんど見えない／写真の上でだけ効く） */
  background:var(--panel);border-radius:14px;padding-right:18px;
  box-shadow:0 0 24px rgba(43,46,41,.05);
}
/* ロゴ（透明の余白を負マージンで詰めて、字の高さで揃える） */
.logo{display:block;overflow:hidden;line-height:0;flex:none;}
.logo img{
  display:block;width:auto;height:var(--lh);
  margin-top:calc(var(--lh) * -0.2426);
  margin-bottom:calc(var(--lh) * -0.2112);
}
.brand__logo{
  --lh:77px;
  padding:8px 14px;border-radius:12px;
  background:transparent;transition:background .3s linear;
}
.brand__rule{width:56px;height:1px;background:currentColor;opacity:.5;flex:none;}
.brand__desc{font-size:14px;line-height:1;letter-spacing:.06em;white-space:nowrap;}

.menubtn{
  position:fixed;top:56px;right:calc(var(--rbp)*10);z-index:95;
  display:none;align-items:center;gap:16px;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;
}
.menubtn__label{
  position:relative;width:52px;height:14px;overflow:hidden;
  font-family:var(--en);font-size:14px;line-height:14px;letter-spacing:.1em;
  transition:color .3s linear;
}
.menubtn__label span{position:absolute;left:0;top:0;transition:transform .3s var(--ein),opacity .3s linear;}
.menubtn__label .l2{transform:translateX(-6px);opacity:0;}
.menubtn__circle{
  width:60px;height:60px;border-radius:50%;background:var(--accent);
  position:relative;flex:none;transition:background .3s var(--ein);
}
.menubtn__circle i{
  position:absolute;left:50%;top:50%;width:18px;height:1px;background:var(--panel);
  transition:transform .3s var(--eio),background .3s linear;
}
.menubtn__circle i:nth-child(1){transform:translate(calc(-50% - 3px),-7px);}
.menubtn__circle i:nth-child(2){transform:translate(-50%,0);}
.menubtn__circle i:nth-child(3){transform:translate(calc(-50% + 3px),7px);}
body.menu-open .menubtn__circle{background:var(--panel);box-shadow:inset 0 0 0 1px var(--hair);}
body.menu-open .menubtn__circle i{background:var(--accent);}
body.menu-open .menubtn__circle i:nth-child(1){transform:translate(-50%,0) rotate(45deg);}
body.menu-open .menubtn__circle i:nth-child(2){transform:translate(-50%,0) scaleX(0);}
body.menu-open .menubtn__circle i:nth-child(3){transform:translate(-50%,0) rotate(-45deg);}
body.menu-open .menubtn__label .l1{transform:translateX(6px);opacity:0;}
body.menu-open .menubtn__label .l2{transform:translateX(0);opacity:1;transition-delay:.3s;}

/* 右上 縦積みメニュー */
.vnav{
  position:fixed;top:140px;right:calc(var(--rbp)*10);z-index:92;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  transition:color .3s linear;
}
.vnav a{
  position:relative;font-size:14px;line-height:1;letter-spacing:.08em;
  padding-bottom:4px;overflow:hidden;
}
.vnav a::after{
  content:"";position:absolute;left:-100%;bottom:0;width:100%;height:1px;background:currentColor;
  transition:transform .3s var(--eio);
}
.vnav a:hover::after{transform:translateX(200%);}
.vnav a.is-current{color:var(--accent-deep);font-weight:700;}

/* 反転（写真の上） */
body.invert .brand,body.invert .vnav,body.invert .menubtn__label{color:var(--panel);}
/* 医院名は常に白い板の上＝写真の上でも読める。反転しても文字色は黒のまま */
body.invert .brand{color:var(--text);}

/* スマホの帯ヘッダー */
.spbar{display:none;}

/* ============================================================
   ファーストビュー
   ============================================================ */
.fv{padding-top:200px;}
.fv__title{
  font-size:50px;line-height:1.6;letter-spacing:.04em;font-weight:600;
}
.fv__title .line{
  display:block;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 80%,transparent 100%);
}
.fv__title .line > span{display:block;}
.fv__lead{margin-top:32px;max-width:44em;font-size:16px;line-height:2;color:var(--soft);}

/* ボタン（丸＋文字の入れ替えホバー） */
.btnrow{display:flex;flex-wrap:wrap;gap:24px;margin-top:32px;}
.btn{display:inline-flex;align-items:center;gap:16px;cursor:pointer;}
.btn__c{
  width:44px;height:44px;border-radius:50%;background:var(--text);
  display:grid;place-items:center;flex:none;overflow:hidden;position:relative;
}
.btn__c svg{width:14px;height:14px;stroke:var(--panel);fill:none;stroke-width:1.4;
  transition:transform .3s var(--eio);}
.btn:hover .btn__c svg{animation:arrowThru .5s var(--eio);}
@keyframes arrowThru{0%{transform:translateX(0)}49%{transform:translateX(140%)}50%{transform:translateX(-140%)}100%{transform:translateX(0)}}
.btn__t{
  position:relative;font-size:14px;line-height:1.2;letter-spacing:.08em;
  overflow:hidden;display:block;
}
.btn__t i{display:block;font-style:normal;transition:transform .3s var(--ein);}
.btn__t i.b{position:absolute;left:0;top:0;transform:translateY(120%);}
.btn:hover .btn__t i.a{transform:matrix(1,.15,-.15,.25,0,-20);}
.btn:hover .btn__t i.b{transform:translateY(0);}
.btn--fill .btn__c{background:var(--accent);}

/* SCROLL DOWN */
.scrolldown{display:flex;align-items:center;gap:8px;margin-top:52px;padding-left:12px;}
.sd__ring{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;flex:none;}
.sd__tri{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--text);animation:sdTri 2s cubic-bezier(.37,0,.63,1) infinite;}
@keyframes sdTri{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1;transform:translateY(0)}
  70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(3px)}}
.sd__txt{font-family:var(--en);font-size:12px;letter-spacing:.14em;line-height:1;display:flex;}
.sd__txt span{display:inline-block;white-space:pre;animation:sdChar 6s cubic-bezier(.37,0,.63,1) infinite;}
@keyframes sdChar{0%{opacity:.25}30%{opacity:1}70%{opacity:1}100%{opacity:.25}}

/* ============================================================
   大写真（ワードマークがまたぐ）
   ============================================================ */
.hero{margin-top:120px;position:relative;}
.hero__frame{max-width:1600px;margin:0 auto;position:relative;}
.hero__mask{
  position:relative;overflow:hidden;border-radius:16px;
  margin-left:var(--pad);margin-right:var(--pad);
  aspect-ratio:1600/980;max-height:980px;
}
.hero__img{position:absolute;left:0;right:0;top:-180px;bottom:-180px;}
/* 写真（枠いっぱい・色かぶりなしで自然な肌色のまま少しだけ澄ませる） */
.phimg{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:saturate(1.04) contrast(1.02) brightness(1.01);
  background:var(--tint2);
}


/* ============================================================
   セクション共通
   ============================================================ */
.sec{position:relative;margin-top:120px;}
.sec--sm{margin-top:80px;}
.sec > .wrap{padding-top:10vw;}
[id]{scroll-margin-top:96px;}
.bigback{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  font-family:var(--serif);font-weight:700;font-size:15vw;line-height:1;
  letter-spacing:-.02em;color:var(--deco);white-space:nowrap;z-index:-1;
  pointer-events:none;user-select:none;
}
.label{display:flex;align-items:center;gap:10px;font-family:var(--en);font-size:16px;line-height:1;}
.label i{width:10px;height:10px;border-radius:50%;border:2px solid var(--accent);flex:none;font-style:normal;}
.hr{height:1px;background:var(--line);margin-top:32px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 40%,rgba(0,0,0,.15) 60%);
  mask-image:linear-gradient(90deg,#000 0,#000 40%,rgba(0,0,0,.15) 60%);
  -webkit-mask-size:250% 100%;mask-size:250% 100%;
  -webkit-mask-position:0 0;mask-position:0 0;}
.h2{
  margin-top:40px;font-size:30px;line-height:1.6;letter-spacing:.04em;font-weight:600;
}
.h2--big{font-size:50px;}
.h2 .line{display:block;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 80%,transparent 100%);}
.h2 .line > span{display:block;}
.body{margin-top:40px;font-size:16px;line-height:2;color:var(--soft);}
/* 長い本文を下から「現像」させるためのマスク土台（既定は全部見えている状態） */
.develop{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 34%,rgba(0,0,0,.15) 54%,transparent 66%);
  mask-image:linear-gradient(180deg,#000 0,#000 34%,rgba(0,0,0,.15) 54%,transparent 66%);
  -webkit-mask-size:100% 300%;mask-size:100% 300%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0% 0%;mask-position:0% 0%;
}
.body + .body{margin-top:40px;}

/* ============================================================
   3つの強み（白カード＋横スライダー）
   ============================================================ */
.feat{position:relative;padding-top:13vw;}
.feat__stage{position:relative;}
/* 白い札の右からスライドが始まる（札と写真の文字が重ならない） */
.feat__view{overflow:hidden;width:auto;background:var(--tint2);
  margin-left:calc(var(--pad) + 424px + 40px);}
.feat__track{display:flex;align-items:flex-start;gap:4px;transition:transform .6s cubic-bezier(.65,0,.35,1);
  padding-left:0;}
.feat__slide{
  flex:0 0 40vw;position:relative;aspect-ratio:4/3;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.feat__slide .scrim{
  position:absolute;left:0;right:0;bottom:0;height:74%;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,51,21,0) 0%,rgba(30,51,21,.52) 30%,rgba(30,51,21,.88) 58%,rgba(30,51,21,.97) 80%,#1e3315 100%);
}
.feat__num{
  position:absolute;right:14px;bottom:-6px;z-index:2;
  font-family:var(--serif);font-weight:700;font-size:118px;line-height:1;
  color:rgba(255,255,255,.42);letter-spacing:-.02em;
}
.feat__txt{position:relative;z-index:3;padding:0 28px 26px;color:var(--panel);}
.feat__txt h3{font-size:19px;line-height:1.6;letter-spacing:.04em;font-weight:700;}
.feat__txt p{margin-top:8px;font-size:14px;line-height:1.85;color:#ffffff;}
.feat__card{
  position:absolute;left:var(--pad);top:-56px;z-index:5;width:424px;max-width:44vw;
  background:var(--panel);border-radius:16px;padding:80px 56px;box-shadow:var(--shadow);
}
.feat__ctrl{
  position:absolute;top:-72px;right:calc(var(--rbp)*10);z-index:6;
  display:flex;align-items:center;height:44px;border-radius:44px;background:var(--accent);
  color:var(--panel);padding:0 8px;
}
.feat__ctrl button{
  background:none;border:0;color:inherit;cursor:pointer;width:44px;height:44px;
  display:grid;place-items:center;padding:0;
}
.feat__ctrl button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4;}
.feat__ctrl .sep{width:1px;height:18px;background:rgba(255,255,255,.55);}

/* ============================================================
   診療時間の表
   ============================================================ */
.hours{margin-top:56px;}
.htable{width:100%;table-layout:fixed;}
.htable col.tcol{width:150px;}
.htable th,.htable td{
  border:1px solid var(--hair);padding:16px 4px;text-align:center;
  font-size:15px;line-height:1.4;letter-spacing:.02em;
}
.htable thead th{background:var(--tint2);font-weight:700;}
.htable tbody th{background:var(--faint);font-weight:500;font-size:14px;white-space:nowrap;}
.htable .o{color:var(--accent-deep);font-weight:700;}
.htable .x{color:var(--soft);}
.hnote{margin-top:24px;font-size:14px;line-height:2;color:var(--soft);}
.hnote > span{display:block;}

/* ============================================================
   お知らせ
   ============================================================ */
.news{margin-top:56px;border-top:1px solid var(--hair);}
.news li{border-bottom:1px solid var(--hair);}
.news a{display:grid;grid-template-columns:132px 1fr 44px;gap:24px;align-items:start;padding:32px 0;}
.news time{font-family:var(--en);font-size:15px;line-height:1.8;color:var(--soft);letter-spacing:.04em;}
.news h3{font-size:17px;line-height:1.8;font-weight:700;letter-spacing:.04em;}
.news p{margin-top:8px;font-size:14px;line-height:1.9;color:var(--soft);}
.news .go{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:background .3s var(--ein),border-color .3s var(--ein);}
.news .go svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.4;transition:stroke .3s;}
.news a:hover .go{background:var(--accent);border-color:var(--accent);}
.news a:hover .go svg{stroke:var(--panel);}

/* ============================================================
   症状からさがす（カード反転ホバー）
   ============================================================ */
.cards{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.card{
  background:var(--tint);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:background .3s var(--ein),color .3s var(--ein);
}
.card__ph{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--tint2);}
.card__ph img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 30%;
  filter:saturate(1.05) contrast(1.03) brightness(1.01);
  transition:transform 1s var(--ein);
}
.card__body{display:flex;flex-direction:column;gap:18px;flex:1 1 auto;padding:24px 26px 26px;}
.card__t{font-size:18px;line-height:1.6;font-weight:700;letter-spacing:.04em;}
.card__go{margin-top:auto;display:flex;align-items:center;gap:8px;font-family:var(--en);font-size:12px;letter-spacing:.1em;}
.card:hover{background:var(--accent-deep);color:var(--panel);}
.card:hover .card__ph img{transform:scale(1.06);}

/* ============================================================
   院長のごあいさつ（2カラム・縦長写真）
   ============================================================ */
.msg{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--rbp)*20);align-items:start;}
.msg__ph{aspect-ratio:3/4;border-radius:16px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#edf4e6 0%,#dbead0 46%,#f6faf2 100%);}

/* ============================================================
   アクセス
   ============================================================ */
.access{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--rbp)*20);align-items:start;}
.access dl{margin:0;}
.access dt{font-family:var(--en);font-size:12px;letter-spacing:.12em;color:var(--accent-deep);line-height:1;margin-top:32px;}
.access dt:first-of-type{margin-top:0;}
.access dd{margin:10px 0 0;font-size:16px;line-height:2;}
.access__map{aspect-ratio:4/3;min-height:0;border-radius:16px;overflow:hidden;position:relative;
  background:var(--tint);box-shadow:0 0 0 1px var(--hair) inset;}
.access__map iframe{position:absolute;inset:0;border:0;width:100%;height:100%;display:block;}

/* ============================================================
   口コミ・電話の帯
   ============================================================ */
.band{margin-top:120px;}
.band__in{
  background:var(--tint2);border-radius:16px;padding:64px 56px;
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
}
.band__tel{font-family:var(--en);font-size:34px;line-height:1;letter-spacing:.02em;font-weight:500;
  display:flex;align-items:center;gap:14px;}
.band__tel svg{width:22px;height:22px;stroke:var(--accent-deep);fill:none;stroke-width:1.4;}
.band__sum{margin-top:16px;font-size:14px;line-height:1.9;color:var(--soft);}

/* ============================================================
   横流れ帯 ＋ フッター
   ============================================================ */
.marquee{
  margin-top:120px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.marquee__t{display:flex;white-space:nowrap;width:max-content;}
.marquee__t span{
  font-family:var(--serif);font-weight:700;font-size:240px;line-height:1;letter-spacing:-.02em;
  color:var(--deco);padding-right:.25em;
}
.footphoto{margin-top:-40px;}
.footphoto__mask{
  margin:0 auto;overflow:hidden;border-radius:20px 20px 0 0;position:relative;
  aspect-ratio:1600/360;
}
.footphoto__img{position:absolute;left:0;right:0;top:-40px;bottom:-220px;}

.ft{background:var(--ink-deep);color:var(--panel);padding:80px 0 56px;}
.ft__grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start;}
.ft__name{font-size:22px;font-weight:700;letter-spacing:.06em;line-height:1.6;}
/* フッターは濃い緑なので、ロゴの下に白い板を敷く */
.ft__logo{
  --lh:80px;
  display:inline-block;vertical-align:top;background:var(--panel);
  border-radius:12px;padding:12px 20px;
}
.ft__meta{margin-top:20px;font-size:15px;line-height:2;color:rgba(255,255,255,.90);}
.ft__note{margin-top:28px;font-size:12px;line-height:1.8;letter-spacing:.04em;color:rgba(255,255,255,.70);}
.ft__nav{display:flex;flex-direction:column;gap:10px;align-items:flex-end;font-size:14px;line-height:1;}
.ft__cr{margin-top:56px;font-family:var(--en);font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.78);}

/* ============================================================
   右下の固定カプセル
   ============================================================ */
.capsule{
  position:fixed;z-index:96;bottom:40px;right:calc(var(--rbp)*10);
  height:60px;border-radius:60px;background:var(--panel);box-shadow:var(--shadow);
  display:flex;align-items:center;padding:0 32px;
}
.capsule a{display:flex;align-items:center;gap:10px;font-family:var(--en);font-size:15px;line-height:1;letter-spacing:.04em;}
.capsule a .jpz{font-family:var(--jp);font-size:14px;letter-spacing:.06em;}
.capsule .sep{width:1px;height:22px;background:var(--line);margin:0 24px;}
.capsule svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.5;transform:rotate(45deg);}

/* ============================================================
   スマホメニュー（覆い）
   ============================================================ */
.ovl{
  position:fixed;inset:0;z-index:93;background:var(--bg);
  padding:110px var(--pad) 40px;
  opacity:0;visibility:hidden;transition:opacity .3s linear,visibility .3s;
}
body.menu-open .ovl{opacity:1;visibility:visible;}
.ovl ul{display:flex;flex-direction:column;gap:20px;}
.ovl a{font-size:20px;line-height:1;letter-spacing:.06em;}
.ovl .ovl__tel{margin-top:40px;font-family:var(--en);font-size:26px;}

/* ============================================================
   スマホ
   ============================================================ */
@media (max-width:1023px){
  body{padding-bottom:100px;font-size:16px;}
  .vnav{display:none;}
  .brand{display:none;}
  .spbar{
    display:flex;align-items:center;justify-content:space-between;
    position:fixed;top:0;left:0;right:0;z-index:94;height:64px;
    padding:0 var(--pad);background:var(--bg);border-bottom:1px solid var(--hair);
  }
  .spbar__logo{--lh:55px;}
  .spbar__sub{display:block;margin-top:3px;font-size:10px;font-weight:500;letter-spacing:.04em;color:var(--soft);}
  .menubtn{display:flex;top:12px;right:var(--pad);gap:8px;}
  .menubtn__circle{width:40px;height:40px;}
  .menubtn__circle i{width:14px;}
  .menubtn__label{display:none;}
  body.invert .brand{color:inherit;}

  .fv{padding-top:120px;}
  .fv__title{font-size:32px;}
  .fv__lead{margin-top:24px;font-size:16px;}
  .btnrow{gap:16px;flex-direction:column;align-items:flex-start;}
  .btn__c{width:38px;height:38px;}
  .scrolldown{margin-top:36px;}

  .hero{margin-top:52px;}
  .hero__mask{aspect-ratio:3/4;border-radius:12px;}

  .sec{margin-top:96px;}
  .sec--sm{margin-top:64px;}
  .sec > .wrap{padding-top:16vw;}
  .bigback{font-size:20vw;}
  .h2{font-size:24px;margin-top:32px;}
  .h2--big{font-size:28px;}
  .label{font-size:14px;}
  .hr{margin-top:24px;}
  .body{margin-top:28px;}

  .feat{padding-top:0;}
  .feat__card{position:static;width:auto;max-width:none;padding:40px 8vw;margin:0 var(--pad) 24px;top:0;left:0;}
  .feat__view{margin-left:0;width:100%;}
  .feat__track{padding-left:var(--pad);}
  .feat__slide{flex:0 0 82vw;aspect-ratio:3/4;}
  .feat__txt{padding:0 20px 20px;}
  .feat__num{font-size:76px;right:12px;}
  .feat__ctrl{position:static;margin:20px var(--pad) 0;width:max-content;}

  .htable th,.htable td{padding:12px 2px;font-size:14px;}
  .htable tbody th{font-size:13px;letter-spacing:0;padding:12px 2px;}
  .htable thead th{font-size:14px;}
  .htable col.tcol{width:104px;}

  .news a{grid-template-columns:1fr;gap:8px;padding:24px 0;}
  .news .go{display:none;}

  .cards{grid-template-columns:1fr 1fr;gap:10px;}
  .card{border-radius:12px;}
  .card__body{padding:16px 14px 18px;gap:12px;}
  .card__t{font-size:15px;line-height:1.55;}
  .card__go{font-size:11px;}

  .msg{grid-template-columns:1fr;gap:32px;padding-top:0;}
  .access{grid-template-columns:1fr;gap:32px;}
  .band__in{grid-template-columns:1fr;padding:40px 7vw;border-radius:12px;gap:24px;}
  .band__tel{font-size:26px;}

  .marquee{margin-top:80px;}
  .marquee__t span{font-size:88px;}
  .footphoto{margin-top:-14px;}
  .footphoto__mask{aspect-ratio:16/11;border-radius:14px 14px 0 0;}
  .footphoto__img{top:0;bottom:-260px;}
  .ft{padding:56px 0 40px;}
  .ft__logo{--lh:64px;padding:10px 14px;}
  .ft__grid{grid-template-columns:1fr;}
  .ft__nav{align-items:flex-start;}

  .capsule{left:4vw;right:4vw;bottom:20px;padding:0 4vw;justify-content:space-between;}
  .capsule .sep{margin:0 12px;}
  .capsule a{font-size:14px;gap:8px;}
  .capsule a .jpz{font-size:13px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}