@charset "UTF-8";
/* ============================================================
   大阪中央病院 股関節LP
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --c-text:#1f1f1f;
  --c-text-sub:#454545;
  --c-primary:#267393;
  --c-deep:#016191;
  --c-light:#3594bd;
  --c-accent:#78a7bb;
  --c-pale:#d4dada;
  --c-bg:#eef4f4;
  --c-line:#cfcfcf;
  --c-white:#fff;

  --f-jp:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --f-min:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-en:"Marcellus","Times New Roman",serif;

  --w-container:1300px;
  --pad-x:24px;
  --faq-dur:.5s;--faq-ease:cubic-bezier(.4,0,.2,1);/* FAQ開閉のなめらかさ */
  /* 見出しの一文字ずつ表示（ゆっくり） */
  --h2-dur:1.12s;--h2-step:.063s;--h2-delay:.12s;--h2-ease:cubic-bezier(.22,.7,.24,1);
  /* ボタンのホバー（B：グラデーションが流れる ＋ E：ふわりと浮く） */
  --hv-ease:cubic-bezier(.22,.7,.24,1);--hv-flow:.8s;--hv-lift:.45s;
  /* FVの導入：タイトルの文字送り → そのあと残りが続く */
  --fv-dur:.95s;--fv-step:.07s;--fv-delay:.14s;--fv-rest:2.35s;
  --header-h:100px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:not(.lenis){scroll-behavior:smooth}/* 慣性スクロール時はLenisに任せる */

/* ---------- 改行の出し分け ---------- */
/* .u-br-sp … SPだけで改行する　/　.u-br-pc … PCだけで改行する */
.u-br-sp{display:none}
.u-br-pc{display:inline}
.u-hide-sp{display:inline}/* SPでは出さない文字（改行に置き換わる読点など） */
@media (max-width:767px){
  .u-br-sp{display:inline}
  .u-br-pc{display:none}
  .u-hide-sp{display:none}
}

/* ---------- 画像のパララックス ---------- */
/* --pl：スクロールに合わせて上下に振れる量。画像ごとに変えて動きをずらす */
.c-para{--pl:0px}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes c-para-shift{
      from{transform:translateY(var(--pl))}
      to{transform:translateY(calc(var(--pl) * -1))}
    }
    .c-para{
      animation:c-para-shift linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
      will-change:transform;
    }
  }
}

/* ---------- 慣性スクロール（Lenis） ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
body{
  margin:0;
  font-family:var(--f-jp);
  font-size:16px;
  line-height:1.6;
  color:var(--c-text);
  background:var(--c-white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,picture,svg{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0;font-weight:inherit}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-style:normal}

/* ---------- Layout ---------- */
.l-container{
  width:100%;
  max-width:calc(var(--w-container) + var(--pad-x) * 2);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

/* ---------- Common components ---------- */
.c-label{
  font-family:var(--f-en);
  font-size:22px;
  letter-spacing:.2em;
  line-height:1.6;
  text-transform:uppercase;
  background:linear-gradient(90deg,var(--c-accent),var(--c-pale));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.c-label--center{text-align:center}

.c-heading{
  margin-top:26px;
  font-family:var(--f-min);
  font-weight:400;
  font-size:42px;
  line-height:1.6;
  letter-spacing:.05em;
  color:var(--c-primary);
}
.c-heading--center{text-align:center}
/* 一文字ずつ下から現れる（JSが .js-chars を付与したときだけ動く） */
.c-heading__ch{display:inline-block;white-space:pre}
.js-chars .c-heading__ch{opacity:0}
.js-chars.is-shown .c-heading__ch{
  animation:c-heading-ch var(--h2-dur) var(--h2-ease) forwards;
  animation-delay:calc(var(--h2-delay) + var(--i) * var(--h2-step));
}
@keyframes c-heading-ch{
  from{opacity:0;transform:translateY(.44em)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .js-chars .c-heading__ch{opacity:1}/* 念のための保険 */
}

.c-lead{
  margin-top:26px;
  font-size:18px;
  line-height:1.6;
  letter-spacing:.05em;
}

.c-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:352px;
  max-width:100%;
  height:67px;
  padding:0 16px;
  border-radius:3px;
  font-weight:500;
  font-size:18px;
  letter-spacing:.05em;
  color:var(--c-white);
  transition:transform var(--hv-lift) var(--hv-ease),box-shadow var(--hv-lift) var(--hv-ease),
             background-position var(--hv-flow) var(--hv-ease),filter var(--hv-lift);
}
.c-btn::before{
  content:"";
  width:16px;height:16px;
  flex:none;
  background:currentColor;
  -webkit-mask:url("../img/icon-arrow.svg") center/contain no-repeat;
  mask:url("../img/icon-arrow.svg") center/contain no-repeat;
}
.c-hours{
  margin-top:24px;
  text-align:center;
  font-size:14px;
  line-height:1.75;
  letter-spacing:.05em;
}
.c-hours--left{text-align:left}
.c-btn--primary{
  background:linear-gradient(90deg,var(--c-deep),var(--c-light),var(--c-deep));
  background-size:200% 100%;background-position:0 0;
}
@media (hover:hover) and (pointer:fine){
  .c-btn:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 14px 30px rgba(1,97,145,.3);filter:saturate(1.08)}
  .c-btn--primary:hover{background-position:-100% 0}
}
.c-btn:active{transform:translateY(-1px) scale(.995)}

/* ============================================================
   SCROLL PROGRESS（最上部のゲージ）
   ============================================================ */
.l-progress{
  position:fixed;left:0;top:0;z-index:110;
  width:100%;height:3px;
  background:linear-gradient(90deg,var(--c-deep),var(--c-light));
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    @keyframes l-progress-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .l-progress{
      animation:l-progress-grow auto linear;
      animation-timeline:scroll(root block);
    }
  }
}

/* ============================================================
   HEADER
   ============================================================ */
.l-header{
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  background:rgba(255,255,255,0);
  transition:background .3s, box-shadow .3s, transform .45s var(--hv-ease);
  will-change:transform;
}
/* 下へスクロール中は上に逃がす。上へスクロールすると戻ってくる */
.l-header.is-hidden{transform:translateY(-100%)}
.l-header.is-scrolled{
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 32px rgba(0,0,0,.03);
  backdrop-filter:blur(6px);
}
.l-header__inner{
  position:relative;
  display:flex;
  align-items:center;
  gap:24px;
  height:var(--header-h);
  padding-inline:16px;
}
.l-header__logo img{width:197px;height:auto}
.l-header__inner{padding-inline:16px}
.l-header__lead{
  font-size:14px;
  letter-spacing:.05em;
}
.l-header__cta{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:217px;
  height:79px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--c-deep),var(--c-light),var(--c-deep));
  background-size:200% 100%;background-position:0 0;
  color:var(--c-white);
  transition:transform var(--hv-lift) var(--hv-ease),box-shadow var(--hv-lift) var(--hv-ease),
             background-position var(--hv-flow) var(--hv-ease),filter var(--hv-lift);
}
@media (hover:hover) and (pointer:fine){
  .l-header__cta:hover{
    background-position:-100% 0;transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(1,97,145,.26);filter:saturate(1.08);
  }
}
.l-header__cta-num{
  display:flex;align-items:center;gap:4px;
  font-size:22px;font-weight:700;letter-spacing:.05em;line-height:1.2;
}
.c-ico{
  width:16px;height:16px;flex:none;
  background:currentColor;
  -webkit-mask:url("../img/icon-arrow-header.svg") center/contain no-repeat;
  mask:url("../img/icon-arrow-header.svg") center/contain no-repeat;
}
.l-header__cta-hours{font-size:10px;line-height:1.5;letter-spacing:.03em;text-align:center}
.l-header__burger{display:none}

/* ============================================================
   HERO
   ============================================================ */
.p-hero{
  position:relative;
  height:980px;
  min-height:980px;
  border-radius:0 0 15px 15px;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
}
.p-hero__media{position:absolute;inset:0;z-index:0}
.p-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.p-hero::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:min(840px,70%);
  z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.8) 73%,rgba(255,255,255,0) 100%);
}
.p-hero__body{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1536px;
  margin-inline:auto;
  padding-left:150px;
  padding-right:24px;
  padding-top:203.2px;
}
.p-hero__title{
  margin-top:28px;
  font-family:var(--f-min);
  font-weight:400;
  font-size:53px;
  line-height:1.55;
  letter-spacing:.1em;
}
.p-hero__title > span{display:block}/* 直下の行だけ。分解後の1文字spanは対象外 */
.p-hero__title em{color:var(--c-primary);font-weight:500}
.p-hero__text{
  margin-top:5px;
  font-size:18px;
  line-height:2;
  letter-spacing:.05em;
}
.p-hero__btn{margin-top:51px}

/* ============================================================
   FROM DOCTOR
   ============================================================ */
.p-doctor{padding:110px 0 90px}
.p-doctor__grid{position:relative;display:flow-root}
.p-doctor__lead{
  margin-top:34px;
  font-size:30px;
  line-height:1.7;
  letter-spacing:.05em;
}
.p-doctor__text{
  margin-top:26px;
  font-size:18px;
  line-height:1.9;
  letter-spacing:.05em;
}
.p-doctor__sign{
  margin-top:44px;
  display:flex;
  align-items:flex-end;
  gap:18px;
  flex-wrap:wrap;
}
.p-doctor__role{font-size:14px;line-height:1.55;color:var(--c-text-sub);letter-spacing:.05em}
.p-doctor__name{font-size:18px;font-weight:500;letter-spacing:.05em}
/* 画像はFigmaの実座標で配置（.p-doctor__grid の左上が Figma x118 / ラベル基準） */
.p-doctor__body{max-width:600px}
.p-doctor__media{
  position:absolute;left:0;top:0;width:100%;height:0;
}
.p-doctor__media img{position:absolute;object-fit:cover;border-radius:5px}
.p-doctor__img-main{left:620px;top:168px;width:331px;height:413px;--pl:14px}
.p-doctor__img-sub{left:1015px;top:72px;width:285px;height:355px;--pl:24px}

/* ============================================================
   CHECK
   ============================================================ */
.p-check{padding:40px 0 90px}
.p-check__box{
  position:relative;
  background:var(--c-bg);
  border-radius:15px;
  padding:120px 138px 90px;
  overflow:hidden;
}
.p-check__photo{position:absolute;left:0;top:0;width:441px;max-width:34%}
.p-check__photo img{width:100%;height:318px;object-fit:cover;border-radius:15px 0 0 0}
.p-check__head{position:relative;z-index:1}
.p-check__lead{
  margin-top:26px;
  text-align:center;
  font-size:18px;
  line-height:1.9;
  letter-spacing:.05em;
}
.p-check__list{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px 24px;
}
.p-check__list li{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:62px;
  padding:8px 24px;
  background:var(--c-white);
  border-radius:5px;
  font-size:16px;
  letter-spacing:.05em;
  line-height:1.5;
}
.p-check__list li::before{
  content:"";
  flex:none;
  width:24px;height:24px;
  background:url("../img/icon-check.svg") center/contain no-repeat;
}
.p-check__foot{margin-top:64px;text-align:center}
.p-check__foot-title{font-size:22px;font-weight:700;color:var(--c-deep);letter-spacing:.05em;line-height:1.6}
.p-check__foot-text{margin-top:14px;font-size:18px;line-height:1.6;letter-spacing:.05em}
.p-check__foot .c-btn{margin-top:34px}

/* ============================================================
   CONDITIONS
   ============================================================ */
.p-cond{padding:90px 0}
.p-cond__list{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}
.p-cond__card{
  border-radius:5px;
  overflow:hidden;
  background:var(--c-bg);
}
.p-cond__img img{width:100%;aspect-ratio:630/348;object-fit:cover}
.p-cond__body{
  min-height:139px;
  padding:16px 24px;
  display:flex;flex-direction:column;justify-content:center;
}
.p-cond__name{
  font-weight:500;
  font-size:20px;
  line-height:1.6;
  letter-spacing:.05em;
  color:var(--c-primary);
}
.p-cond__desc{
  margin-top:8px;
  font-size:16px;
  line-height:1.6;
  letter-spacing:.05em;
  text-align:justify;
}
.p-cond__note{margin-top:32px;font-size:12px;color:var(--c-text-sub);letter-spacing:.05em}

/* ============================================================
   PHILOSOPHY
   ============================================================ */
.p-philo{padding:90px 0 100px}
.p-philo__inner{
  position:relative;
  display:block;
  max-width:713px;
}
.p-philo__lead{
  margin-top:34px;
  font-size:30px;
  line-height:1.7;
  letter-spacing:.05em;
}
.p-philo__text{
  margin-top:38px;
  font-size:16px;
  line-height:2;
  letter-spacing:.05em;
  text-align:justify;
}
.p-philo__line{
  width:132px;height:1px;
  margin:56px 0 0;
  border:0;background:#d9d9d9;
}
.p-philo__note{margin-top:34px;font-size:16px;letter-spacing:.05em}
.p-philo__note + .c-btn{margin-top:22px}
.p-philo__tel-note{margin-top:20px;font-size:14px;color:var(--c-text-sub);letter-spacing:.05em;line-height:1.8}
.p-philo__inner{position:relative}
.p-philo__media{position:absolute;inset:0;pointer-events:none}
.p-philo__media img{position:absolute;border-radius:5px;object-fit:cover}
.p-philo__img1{width:232px;height:290px;left:842px;top:-212px;--pl:22px}
.p-philo__img2{width:186px;height:231px;left:1114px;top:-28px;--pl:30px}
.p-philo__img3{width:285px;height:354px;left:863px;top:243px;--pl:12px}

/* ============================================================
   TECHNOLOGY
   ============================================================ */
.p-tech{
  padding:120px 0 160px;
  background:linear-gradient(180deg,rgba(238,244,244,0) 0%,var(--c-bg) 10%,var(--c-bg) 90%,rgba(238,244,244,0) 100%);
}
.p-tech__layout{
  margin-top:80px;
  display:grid;
  grid-template-columns:515px 1fr;
  gap:70px;
  align-items:start;
}
.p-tech__sticky{position:sticky;top:140px}
.p-tech__sticky img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px}
.p-tech__items{display:flex;flex-direction:column;gap:106.5px;margin-top:-12.9px}/* gap107+num上アキ12.9=Figmaの120px / -12.9はnumのline-box上アキ相殺 */
.p-tech__num{
  font-family:var(--f-en);
  font-size:29px;
  letter-spacing:.07em;
  color:var(--c-deep);
  line-height:1.6;
}
.p-tech__title{
  margin-top:2px;/* Figma実測32px（line-box上下アキ込み） */
  font-family:var(--f-min);
  font-weight:400;
  font-size:33px;
  line-height:1.6;
  letter-spacing:.05em;
}
.p-tech__text{
  margin-top:18.9px;/* Figma実測40px */
  font-size:18px;
  line-height:1.6;
  letter-spacing:.05em;
  text-align:justify;
}
.p-tech__tags{margin-top:33.4px;display:flex;flex-direction:column;gap:20px}/* Figma実測40px / アイコン間20px */
.p-tech__tags li{
  display:flex;align-items:center;gap:13px;
  font-size:16px;letter-spacing:.05em;line-height:15px;/* 行ボックス=アイコン15pxに合わせる */
}
.p-tech__tag-icon{
  flex:none;width:15px;height:15px;
  background-color:var(--c-bg);
  background-position:center;background-size:contain;background-repeat:no-repeat;
}
.p-tech__photos{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:51px;
}
.p-tech__photos img{width:100%;aspect-ratio:332/200;object-fit:cover;border-radius:3px}

/* ============================================================
   MESSAGE
   ============================================================ */
.p-msg{padding:120px 0 100px}
.p-msg__profile{
  margin-top:70px;
  display:grid;
  grid-template-columns:315px 1fr;
  gap:32px;
  align-items:start;
  background:var(--c-bg);
  border-radius:5px;
  padding:48px 48px 42.8px 64px;
  min-height:542px;/* Figma */
}
.p-msg__photo img{width:315px;height:419px;object-fit:cover;border-radius:3px}
.p-msg__info{margin-top:-11.1px}/* 1行目の行ボックス上アキを相殺してFigmaの天端に合わせる */
.p-msg__role{font-size:16px;letter-spacing:.05em;display:flex;align-items:baseline;flex-wrap:wrap;gap:24px}
.p-msg__name{font-size:24px;font-weight:500;letter-spacing:.05em}
.p-msg__desc{margin-top:17.6px;max-width:790px;font-size:18px;line-height:1.6;letter-spacing:.05em}
.p-msg__bar{
  margin-top:31.5px;
  display:flex;align-items:center;gap:15px;
  height:36px;padding-inline:17px;
  background:var(--c-primary);color:#fff;
  font-size:16px;letter-spacing:.05em;
}
.p-msg__bar-icon{
  width:10px;height:17px;flex:none;
  background:url("../img/icon-badge.svg") center/contain no-repeat;
}
.p-msg__cred{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 17px}
.p-msg__cred h4{
  font-size:16px;font-weight:400;line-height:1.6;letter-spacing:.05em;
  color:var(--c-primary);margin-bottom:1.4px;
}
.p-msg__cred ul{display:flex;flex-direction:column;gap:2.8px}
.p-msg__cred-col > ul:first-of-type{min-height:107.2px}/* 左右の2つ目の見出しをFigma通り同じ高さに揃える */
.p-msg__cred h4 + ul + h4{margin-top:18.8px}
.p-msg__cred li{
  position:relative;padding-left:12px;
  font-size:12px;line-height:1.6;letter-spacing:normal;
}
.p-msg__cred li::before{
  content:"";position:absolute;left:0;top:.67em;
  width:4px;height:4px;border-radius:50%;background:var(--c-primary);
}
.p-msg__achv{
  margin-top:40px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:40px;
}
.p-msg__achv li{
  display:flex;gap:24px;align-items:center;
  min-height:173px;
  background:var(--c-bg);border-radius:5px;padding:24.96px 24px;
}
.p-msg__achv li > div{align-self:flex-start;flex:1;min-width:0}
.p-msg__achv-icon{flex:none;width:69px;height:69px;background-position:center;background-size:contain;background-repeat:no-repeat}
.p-msg__achv-label{font-size:14px;line-height:1.6;letter-spacing:.05em}
.p-msg__achv-title{margin-top:8.6px;font-size:20px;font-weight:400;line-height:1.6;color:var(--c-primary);letter-spacing:.05em}
.p-msg__achv-text{margin-top:8px;font-size:16px;line-height:1.6;letter-spacing:.05em;text-align:justify}
.p-msg__columns{margin-top:100px;display:flex;flex-direction:column;gap:120px}
.p-msg__col{display:grid;grid-template-columns:minmax(0,870px) 380px;gap:50px;align-items:start}
.p-msg__col--rev{grid-template-columns:380px minmax(0,870px)}
.p-msg__col--rev .p-msg__col-body{grid-column:2;grid-row:1}
.p-msg__col--rev .p-msg__col-img{grid-column:1;grid-row:1}
.p-msg__col-title{
  font-family:var(--f-min);font-weight:400;font-size:28px;
  color:var(--c-deep);letter-spacing:.05em;line-height:1.6;
  padding-bottom:13.5px;border-bottom:1px solid #d9d9d9;
}
.p-msg__col-text{margin-top:0;font-size:16px;line-height:2;letter-spacing:.05em;text-align:justify}
.p-msg__col-title + .p-msg__col-text{margin-top:12.7px}
.p-msg__col-img{margin-top:14.3px}/* 見出しの行ボックス上アキぶん下げてFigmaの画像天端に合わせる */
.p-msg__col-img img{width:380px;height:250px;object-fit:cover;border-radius:5px}

/* ============================================================
   CASES
   ============================================================ */
.p-case{padding:100px 0;border-top:1px solid #cfcfcf;overflow:hidden}/* 区切りライン＋カードの見切れをウィンドウ端でクリップ */
.p-case__carousel{margin-top:60px}
.p-case__viewport{overflow:visible}/* コンテナ外へはみ出させる（クリップは .p-case 側） */
.p-case__track{
  display:flex;gap:59px;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.p-case__slide{flex:0 0 calc((100% - 118px)/3)}
.p-case__card{background:var(--c-bg);border-radius:5px;overflow:hidden;height:100%;min-height:384px}
.p-case__img img{width:100%;aspect-ratio:394/170;object-fit:cover}
.p-case__body{padding:16px 32px 26px}
.p-case__tags{display:flex;gap:8px;flex-wrap:wrap}
.p-case__tags li{
  display:flex;align-items:center;height:23px;padding:0 6px;background:#fff;
  font-size:16px;letter-spacing:.05em;
}
.p-case__title{margin-top:7.9px;font-size:18px;font-weight:500;line-height:1.6;letter-spacing:.05em;text-align:justify}
.p-case__text{margin-top:5.2px;font-size:16px;line-height:1.6;letter-spacing:.05em;text-align:justify}
.p-case__nav{margin-top:36px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.p-case__arrows{display:flex;gap:40px}
.p-case__arrow{
  width:90px;height:65px;border:1px solid var(--c-primary);border-radius:33px;
  position:relative;transition:background .3s,opacity .3s;
}
.p-case__arrow::before{
  content:"";position:absolute;inset:0;margin:auto;
  width:18px;height:16.0625px;
  background:url("../img/icon-arrow-carousel.svg") center/contain no-repeat;
}
.p-case__arrow--next::before{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){
  .p-case__arrow:hover{background:var(--c-bg)}
}
.p-case__arrow[disabled]{opacity:.3;cursor:default}
.p-case__count{
  display:flex;align-items:center;gap:23px;
  font-family:var(--f-en);font-size:21px;letter-spacing:.07em;color:var(--c-deep);line-height:1.2;
}
.p-case__bar{position:relative;display:block;width:97px;height:1px;background:#d9d9d9}
.p-case__bar-fill{
  position:absolute;left:0;top:0;height:1px;width:41.2%;
  background:var(--c-deep);transition:width .5s cubic-bezier(.4,0,.2,1);
}
.p-case__total{color:#afafaf}

/* ============================================================
   AFTER TREATMENT
   ============================================================ */
.p-after{position:relative;padding:140px 0 120px;color:var(--c-text)}
.p-after > .l-container{position:relative;z-index:1}
.p-after{isolation:isolate}
.p-after__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.p-after__bg img{width:100%;height:100%;object-fit:cover}
.p-after__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.1) 22%,rgba(255,255,255,0) 60%,rgba(255,255,255,.6) 100%);
}
.p-after__lead{text-align:center}
.p-after__cards{
  margin-top:64px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:32px 40px;
}
.p-after__card{
  display:flex;justify-content:space-between;
  background:#fff;border-radius:5px;overflow:hidden;min-height:172px;
}
/* テキスト左端 = カード左+36px（見出しは+24px）／Figma準拠 */
.p-after__body{flex:1;min-width:0;padding:23px 0 16px 20px}
.p-after__title{font-size:20px;font-weight:400;line-height:1.6;color:var(--c-primary);letter-spacing:.05em}
.p-after__list{margin-top:9px;display:flex;flex-direction:column;gap:7.6px}
.p-after__list li{
  position:relative;padding-left:12px;
  font-size:14px;line-height:1.6;letter-spacing:.05em;
}
.p-after__list li::before{
  content:"";position:absolute;left:0;top:.7em;
  width:4px;height:4px;background:var(--c-primary);
}
.p-after__img{flex:none;width:199px}
.p-after__img picture,.p-after__img img{display:block;width:100%;height:100%;object-fit:cover}
.p-after__closing{
  margin-top:56px;text-align:center;
  font-size:20px;line-height:1.9;color:var(--c-primary);letter-spacing:.05em;
}

/* ============================================================
   COST SIMULATION
   ============================================================ */
.p-cost{padding:110px 0}
.p-cost__lead{text-align:center}
.p-cost__cards{
  margin-top:64px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:40px;
  max-width:1000px;margin-inline:auto;
}
.p-cost__card{background:#fff;border:1px solid var(--c-primary);border-radius:5px;overflow:hidden;min-height:161px}
.p-cost__head{
  display:flex;align-items:center;gap:16px;
  height:55px;padding-inline:32px;
  background:var(--c-primary);color:#fff;
}
.p-cost__case{font-family:var(--f-en);font-size:14px;letter-spacing:.1em;position:relative;padding-right:16px}
.p-cost__case::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:15px;background:var(--c-bg)}
.p-cost__cond{font-size:16px;letter-spacing:.05em}
.p-cost__body{display:flex;align-items:flex-start;padding:17.55px 32px 19.05px}
.p-cost__spec{margin:0;flex:1;display:flex;flex-direction:column;gap:8.2px}
.p-cost__spec > div{display:flex;align-items:baseline;gap:8px}
.p-cost__spec dt{
  position:relative;padding-left:14px;
  font-size:16px;letter-spacing:.05em;
}
.p-cost__spec dt::before{content:"";position:absolute;left:0;top:.63em;width:6px;height:6px;border-radius:50%;background:var(--c-primary)}
.p-cost__spec dd{margin:0;font-size:18px;font-weight:500;line-height:1.6;color:var(--c-primary);letter-spacing:.05em}
.p-cost__pay{flex:none;width:138px;margin-top:5px;text-align:center}/* Figmaには本文側の縦罫線なし */
.p-cost__pay-label{font-size:16px;line-height:1.6;letter-spacing:.05em}
.p-cost__pay-value{margin-top:-1.6px;color:var(--c-primary);display:flex;align-items:baseline;justify-content:center;gap:4px}
.p-cost__pay-value small{font-size:16px;color:var(--c-text)}
.p-cost__pay-value strong{font-size:24px;font-weight:500;line-height:1.6;letter-spacing:.05em}
.p-cost__period{
  margin-top:56px;max-width:1000px;margin-inline:auto;min-height:223px;
  background:var(--c-bg);border-radius:5px;padding:27.9px 40px 26.6px;text-align:center;
}
.p-cost__period-title{font-size:24px;font-weight:500;line-height:1.6;letter-spacing:.05em}
.p-cost__period-text{margin-top:11.6px;max-width:867px;margin-inline:auto;font-size:16px;line-height:1.6;letter-spacing:.05em}
.p-cost__inner-note{margin-top:19.2px;font-size:14px;line-height:1.6;letter-spacing:.05em}
.p-cost__note{margin-top:17px;text-align:center;font-size:14px;letter-spacing:.05em;line-height:1.6}

/* ============================================================
   CONTINUOUS SUPPORT (MyMobility)
   ============================================================ */
.p-mm{padding:0}
.p-mm__lead{text-align:center;max-width:780px;margin-inline:auto}
.l-container--wide{max-width:calc(1472px + var(--pad-x) * 2)}
.p-mm__box{
  background:var(--c-bg);border-radius:15px;
  padding:150.2px 88px 160px;min-height:1150px;/* Figma実測 1472×1150 */
}
.p-mm__cols{
  display:grid;grid-template-columns:290px 1fr;gap:90px;align-items:start;
}
.p-mm__app img{width:290px;border-radius:8px}
.p-mm__title{font-weight:400;font-size:30px;line-height:1.6;color:var(--c-primary);letter-spacing:.05em}/* Figmaは明朝ではなくNoto Sans JP */
.p-mm__text{margin-top:13px;max-width:916px;font-size:16px;line-height:1.6;letter-spacing:.05em;text-align:justify}/* 見出しとの見た目アキ32px */
.p-mm__sub{margin-top:40.6px;font-size:20px;font-weight:400;line-height:1.6;color:var(--c-primary);letter-spacing:.05em}
.p-mm__list{margin-top:16.1px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}/* 見出しとの見た目アキ24px */
.p-mm__lead{max-width:none}
.p-mm__item{background:#fff;border-radius:5px;padding:14.95px 24px 18.25px;min-height:112px}/* Figma実測 450×112 */
.p-mm__item-title{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:400;line-height:1.6;color:var(--c-primary);letter-spacing:.05em}
.p-mm__icon{flex:none;width:13px;height:13px;background-position:center;background-size:contain;background-repeat:no-repeat}
.p-mm__item-text{margin-top:5.2px;font-size:14px;line-height:1.6;letter-spacing:.05em;text-align:justify}

/* ============================================================
   FLOW
   ============================================================ */
.p-flow{padding:110px 0}
.p-flow__lead{text-align:center}
.p-flow__list{
  position:relative;
  margin:64px auto 0;width:842px;max-width:100%;
  display:flex;flex-direction:column;gap:32.85px;/* Figmaの項目ピッチ104.8px */
}
.p-flow__line{
  position:absolute;left:77px;top:24.4px;bottom:44.5px;
  width:1px;background:var(--c-pale);
}
.p-flow__item{position:relative;display:flex;gap:0}
.p-flow__dot{
  position:absolute;left:74px;top:20.4px;/* 数字・見出しの文字高センターに揃える */
  width:7px;height:7px;border-radius:50%;
  background:var(--c-primary);/* Figmaは #267393 */
}
.p-flow__num{
  flex:none;width:113px;
  font-family:var(--f-en);font-size:30px;line-height:1.6;letter-spacing:normal;
  background:linear-gradient(90deg,var(--c-accent),var(--c-pale));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.p-flow__body{flex:1;padding-top:6.34px}
.p-flow__title{font-size:20px;font-weight:500;color:var(--c-primary);letter-spacing:.05em;line-height:1.6}
.p-flow__text{margin-top:8px;font-size:16px;line-height:1.6;letter-spacing:.05em;text-align:justify}
.p-flow__closing{
  margin:48px auto 0;max-width:692px;
  background:var(--c-bg);border-radius:5px;padding:24px;
  text-align:center;font-size:18px;line-height:1.8;letter-spacing:.05em;
}

/* ============================================================
   COLUMN
   ============================================================ */
.p-column{padding:60px 0 110px}
.p-column__box{
  display:grid;grid-template-columns:1fr 362px;align-items:start;
  background:linear-gradient(90deg,var(--c-deep),var(--c-accent));
  border-radius:5px;color:#fff;overflow:hidden;
  min-height:364px;/* Figma実測 1300×364 */
}
.p-column__body{padding:56.6px 0 0 48px}
.p-column__en{
  font-family:var(--f-en);font-size:30px;line-height:1.6;letter-spacing:6px;text-transform:uppercase;
  background:linear-gradient(90deg,var(--c-accent),var(--c-pale));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.p-column__label{
  margin-top:10.4px;display:flex;align-items:center;gap:22px;
  font-size:16px;line-height:1.6;letter-spacing:.05em;
}
.p-column__label::after{
  content:"";flex:none;width:197px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,0));
}
.p-column__title{margin-top:9.1px;font-family:var(--f-min);font-weight:400;font-size:36px;line-height:1.6;letter-spacing:.05em}
.p-column__foot{margin-top:17.8px;display:flex;align-items:center;gap:22px}
.p-column__text{flex:none;width:601px;font-size:14px;line-height:1.6;letter-spacing:.05em;text-align:justify}
.p-column__link{
  flex:none;width:228px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:3px;color:var(--c-deep);
  background:#fff;
  font-size:16px;font-weight:400;letter-spacing:.05em;
  transition:opacity .3s;
}
.p-column__link::after{
  content:"";width:9px;height:9px;
  background:currentColor;
  -webkit-mask:url("../img/icon-link-note.svg") center/contain no-repeat;
  mask:url("../img/icon-link-note.svg") center/contain no-repeat;
}
@media (hover:hover) and (pointer:fine){
  .p-column__link:hover{opacity:.8}
}
.p-column__img{position:relative;align-self:stretch}
.p-column__img img{display:block;width:362px;height:364px;object-fit:cover;opacity:.2}/* Figmaは写真を不透明度20%で重ねている */
.p-column__img::after{/* Figmaの左端フェード（#5693af → 透明 68px） */
  content:"";position:absolute;left:0;top:0;bottom:0;width:68px;
  background:linear-gradient(90deg,#5693af,rgba(86,147,175,0));
}

/* ============================================================
   FAQ
   ============================================================ */
.p-faq{padding:60px 0 110px}
.p-faq__list{
  margin-top:60px;
  display:grid;grid-template-columns:repeat(2,1fr);grid-auto-flow:column;
  grid-template-rows:repeat(5,auto);
  gap:24px 40px;align-content:start;
}
.p-faq__item{border-radius:3px;background:var(--c-bg);height:fit-content;min-height:57px}
/* 開閉のイージング。.js-fade より詳細度を上げて transition を上書き */
.p-faq__list > .p-faq__item{
  transition:opacity .8s ease,transform .8s ease,min-height var(--faq-dur) var(--faq-ease);
}
/* 開いたときの高さをFigma実測に固定（左右のペアが必ず揃う） */
.p-faq__item.is-open{min-height:169px}
.p-faq__item:nth-child(1).is-open,
.p-faq__item:nth-child(6).is-open{min-height:195px}
.p-faq__q{
  position:relative;
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14.95px 24px 16.45px;text-align:left;
  font-size:16px;line-height:1.6;letter-spacing:.05em;
}
.p-faq__q::before{/* Figmaの区切り線（#cfcfcf・左右24px内側） */
  content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;
  background:#cfcfcf;opacity:0;
  transition:opacity var(--faq-dur) var(--faq-ease);
}
.p-faq__q[aria-expanded="true"]::before{opacity:1}
.p-faq__q::after{/* FigmaのSVGアイコン（10×10・#016191） */
  content:"";flex:none;width:10px;height:10px;margin-top:9.05px;
  background:url("../img/icon-faq-arrow.svg") center/contain no-repeat;
  transform:rotate(180deg);
  transition:transform var(--faq-dur) var(--faq-ease);
}
.p-faq__q[aria-expanded="true"]::after{transform:rotate(0deg)}
.p-faq__a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--faq-dur) var(--faq-ease);
}
.p-faq__a-inner{overflow:hidden}
.p-faq__a p{
  margin:0;padding:15.95px 24px 19.25px;
  font-size:16px;line-height:1.6;letter-spacing:.05em;text-align:justify;
  opacity:0;transition:opacity calc(var(--faq-dur) * .7) ease;
}
.p-faq__item.is-open .p-faq__a{grid-template-rows:1fr}
.p-faq__item.is-open .p-faq__a p{opacity:1;transition-delay:calc(var(--faq-dur) * .25)}

/* ============================================================
   BANNER / CTA / FOOTER
   ============================================================ */
.p-banner{background:#eaedf8;padding:0}
.p-banner__inner{max-width:1217px;margin-inline:auto}
.p-banner__inner img{width:100%;height:390px;object-fit:cover}

.p-cta{padding:100px 0;text-align:center}
.p-cta__title{font-family:var(--f-min);font-weight:400;font-size:36px;line-height:1.6;color:var(--c-primary);letter-spacing:.05em}
.p-cta__text{margin-top:17.7px;font-size:16px;line-height:1.6;letter-spacing:.05em}
.p-cta__text + .c-btn{margin-top:42.3px}/* Figma実測 */
.p-cta__hours{margin-top:13px;font-size:14px;line-height:1.6;letter-spacing:.05em}

.l-footer{padding:70px 0 40px}/* Figmaに区切り線はなし */
@media(min-width:768px){.l-footer{padding-bottom:138.8px}}
.l-footer__grid{display:grid;grid-template-columns:1fr 528px;gap:64px;align-items:start}
.l-footer__logo{display:block;line-height:0}
.l-footer__logo img{display:block;width:285px;height:auto}
.l-footer__catch{margin-top:16.2px;font-size:16px;line-height:1.6;letter-spacing:.05em}
.l-footer__dl{margin:37.4px 0 0}
.l-footer__dl > div{display:flex;gap:23px;padding:4.7px 0;font-size:16px;line-height:1.6;letter-spacing:.05em}/* 行ピッチ35px */
.l-footer__dl dt{flex:none;width:120px}
.l-footer__dl dd{min-width:0}
.l-footer__dl dd{margin:0}
.l-footer__dl a{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
/* 外部リンクアイコン（Figma：本文の直後・約9px） */
.l-footer__dl a[target="_blank"]::after,
.l-footer__map-link::after{
  content:"";display:inline-block;flex:none;
  width:9px;height:9px;margin-left:6px;
  background:currentColor;
  -webkit-mask:url("../img/icon-link-official.svg") center/contain no-repeat;
  mask:url("../img/icon-link-official.svg") center/contain no-repeat;
}
.l-footer__map-link::after{margin-left:0}
.l-footer__tel::after{content:none!important}
.l-footer__map-embed{
  position:relative;width:100%;height:225px;border-radius:5px;overflow:hidden;
  background:var(--c-bg);
}
.l-footer__map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.l-footer__map-link{
  margin-top:14px;display:inline-flex;align-items:center;gap:6px;
  color:var(--c-primary);font-size:16px;letter-spacing:.05em;
  text-decoration:underline;text-underline-offset:3px;
}
.l-footer__map-note{margin-top:5.4px;font-size:12px;line-height:1.6;letter-spacing:.05em;text-align:justify}
.l-footer__copy{margin-top:50.7px;text-align:center;font-size:12px;line-height:1.6;letter-spacing:.05em}

/* ============================================================
   DRAWER NAV / FIXED CTA
   ============================================================ */
.l-nav{
  position:fixed;inset:0;z-index:200;
  background:#fff;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;/* 背面のページが一緒に動かないようにする */
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.l-nav.is-open{opacity:1;visibility:visible}
/* 閉じる×：スクロール位置に関係なく常に右上に出す（ヘッダーのハンバーガーと同じ位置） */
.l-nav__x{
  position:fixed;top:17px;right:16px;z-index:1;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;
}
.l-nav__x span{
  position:absolute;width:26px;height:1.5px;background:var(--c-text);
}
.l-nav__x span:nth-child(1){transform:rotate(45deg)}
.l-nav__x span:nth-child(2){transform:rotate(-45deg)}
.l-nav__inner{padding:88px 32px 60px;min-height:100%;display:flex;flex-direction:column}
.l-nav__list{display:flex;flex-direction:column}
.l-nav__list a{
  display:block;padding:14px 0;
  font-size:14px;letter-spacing:.05em;
  border-bottom:1px solid var(--c-bg);
}
.l-nav__cta{margin:40px auto 0;min-width:0;width:100%;max-width:343px;min-height:60px;font-size:16px}
.l-nav__close{
  margin:40px auto 0;
  font-family:var(--f-en);font-size:14px;letter-spacing:.2em;color:var(--c-primary);
}

.l-fixcta{display:none}

/* ============================================================
   TABLET  ( 768px 〜 1535px )
   PCデザインはFigmaの1536pxを実寸で組んでいるため、幅が足りないと
   画像や本文がはみ出す。ここでは崩さずに全体を比率のまま縮小する。
   倍率 --pc-zoom は script.js がウィンドウ幅から算出してセットする。
   （病院様の婦人科LPも同じ考え方で768〜1279pxを%・vwに置き換えている）
   ============================================================ */
@media (min-width:768px) and (max-width:1535px){
  body{zoom:var(--pc-zoom,1)}
}

/* ============================================================
   RESPONSIVE  ( ~767px )
   ============================================================ */
@media (max-width:767px){
  :root{--pad-x:16px;--header-h:68px}

  .c-label{font-size:16px;letter-spacing:.2em}
  .c-heading{margin-top:18px;font-size:28px;line-height:1.55}
  .c-lead{margin-top:20px;font-size:14px;line-height:1.85}
  .c-btn{min-width:0;width:100%;max-width:480px;min-height:60px;font-size:16px;padding-inline:16px}

  /* header */
  .l-header{background:rgba(255,255,255,.94)}
  .l-header__inner{gap:8px;padding-inline:16px}
  .l-header__logo img{width:150px}
  .l-header__lead{font-size:11px}
  .l-header__cta{display:none}
  .l-header__burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:34px;height:34px;
  }
  .l-header__burger span{display:block;width:26px;height:1.5px;background:var(--c-text);transition:transform .3s,opacity .3s}
  .l-header__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .l-header__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .l-header__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  /* hero */
  .p-hero{display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:0;padding-top:var(--header-h);border-radius:0}
  .p-hero__body{max-width:none;padding-left:var(--pad-x);padding-right:var(--pad-x)}
  .p-hero::before{display:none}
  .p-hero__media{position:relative;inset:auto;order:2}
  .p-hero__media img{height:312px;object-position:bottom;border-radius:0 0 10px 10px}
  .p-hero__body{order:1;padding-top:44px;padding-bottom:44px}
  .p-hero .c-label{margin-top:0}
  .p-hero__title{margin-top:16px;font-size:33px;letter-spacing:.08em;line-height:1.55}
  .p-hero__text{margin-top:20px;font-size:14px;line-height:1.95;max-width:none;text-align:justify}
  .p-hero__btn{display:none}/* SPではFVのCTAは出さない（下部固定CTAがあるため） */
  .p-hero__body{position:relative;z-index:3}

  /* doctor */
  .p-doctor{padding:90px 0 100px}
  .p-doctor__grid{grid-template-columns:1fr;gap:32px}
  .p-doctor__lead{margin-top:20px;font-size:22px}
  .p-doctor__text{margin-top:18px;font-size:14px}
  .p-doctor__sign{margin-top:28px;gap:8px;flex-direction:column;align-items:flex-start}
  .p-doctor__role{font-size:12px}
  .p-doctor__name{font-size:16px}
  .p-doctor__body{max-width:none}
  .c-para{--pl:0px}
  .p-doctor__media{position:static;left:auto;top:auto;width:auto;height:auto;margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .p-doctor__media img{position:static;left:auto;top:auto;width:100%;height:auto;aspect-ratio:1/1.25}

  /* check */
  .p-check{padding:40px 0 60px}
  .p-check__box{padding:64px 16px 48px;border-radius:10px}
  .p-check__photo{width:60%}
  .p-check__photo img{height:140px;border-radius:10px 0 0 0}
  .p-check__lead{margin-top:18px;font-size:14px;text-align:justify}
  .p-check__list{margin-top:36px;grid-template-columns:1fr;gap:10px}
  .p-check__list li{font-size:14px;padding:12px 14px;min-height:0;align-items:flex-start}
  .c-hours{font-size:12px;margin-top:18px}
  .p-check__list li::before{width:20px;height:20px;margin-top:1px}
  .p-check__foot{margin-top:40px}
  .p-check__foot-title{font-size:15px}
  .p-check__foot-text{font-size:14px;line-height:1.8}

  /* conditions */
  .p-cond{padding:60px 0}
  .p-cond__list{margin-top:36px;grid-template-columns:1fr;gap:20px}
  .p-cond__body{min-height:0;padding:20px 16px}
  .p-cond__name{font-size:17px}
  .p-cond__desc{margin-top:10px;font-size:14px;line-height:1.8}

  /* philosophy */
  .p-philo{padding:60px 0}
  .p-philo__inner{grid-template-columns:1fr;gap:32px}
  .p-philo__lead{margin-top:20px;font-size:22px}
  .p-philo__text{margin-top:22px;font-size:14px}
  .p-philo__line{margin-top:36px}
  .p-philo__note{margin-top:24px;font-size:14px}
  .p-philo__tel-note{font-size:12px}
  .p-philo__inner{max-width:none}
  .p-philo__media{position:static;inset:auto;min-height:0;margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .p-philo__media img{position:static;width:100%;height:auto;aspect-ratio:4/5;inset:auto;left:auto;top:auto}

  /* technology */
  .p-tech{padding:60px 0 70px}
  .p-tech__layout{margin-top:40px;grid-template-columns:1fr;gap:24px}
  .p-tech__sticky{position:static}
  .p-tech__items{gap:64px}
  .p-tech__num{font-size:24px}
  .p-tech__title{margin-top:12px;font-size:24px}
  .p-tech__text{margin-top:16px;font-size:14px}
  .p-tech__tags{margin-top:24px;gap:12px}
  .p-tech__items{margin-top:0}
  .p-tech__tags li{font-size:14px;line-height:1.6}
  .p-tech__photos{margin-top:24px;gap:12px}

  /* message */
  .p-msg{padding:60px 0}
  .p-msg__profile{margin-top:36px;grid-template-columns:1fr;gap:24px;padding:28px 16px;min-height:0}
  .p-msg__info{margin-top:0}
  .p-msg__photo img{width:100%;height:auto;aspect-ratio:315/419}
  .p-msg__role{font-size:13px;gap:8px;flex-direction:column}
  .p-msg__bar{gap:12px}
  .p-msg__name{font-size:20px}
  .p-msg__desc{margin-top:16px;font-size:14px;max-width:none}
  .p-msg__cred{grid-template-columns:1fr;gap:20px}
  .p-msg__cred-col > ul:first-of-type{min-height:0}
  .p-msg__cred h4 + ul + h4{margin-top:20px}
  .p-cost__inner-note{margin-top:14px;font-size:12px}
  .p-msg__achv{margin-top:24px;grid-template-columns:1fr;gap:16px}
  .p-msg__achv li{gap:16px;padding:20px 16px;min-height:0;align-items:flex-start}
  .p-msg__achv-icon{width:52px;height:52px}
  .p-msg__achv-title{font-size:17px}
  .p-msg__achv-text{margin-top:8px;font-size:13px}
  .p-msg__columns{margin-top:56px;gap:56px}
  .p-msg__col,.p-msg__col--rev{grid-template-columns:1fr;gap:20px}
  .p-msg__col--rev .p-msg__col-body{grid-column:1;grid-row:1}
  .p-msg__col--rev .p-msg__col-img{grid-column:1;grid-row:2}
  .p-msg__col-title{font-size:22px;padding-bottom:16px}
  .p-msg__col-text{margin-top:16px;font-size:14px}
  .p-msg__col-title + .p-msg__col-text{margin-top:16px}
  .p-msg__col-img{margin-top:0}
  .p-msg__col-img img{width:100%;height:auto;aspect-ratio:380/250}

  /* cases */
  .p-case{padding:60px 0}
  .p-case__carousel{margin-top:32px}
  .p-case__track{gap:16px}
  .p-case__slide{flex:0 0 100%}
  .p-case__card{min-height:0}
  .p-case__body{padding:20px 16px 24px}
  .p-case__tags li{font-size:13px;padding:0 8px}
  .p-case__title{font-size:16px}
  .p-case__text{font-size:14px;line-height:1.8}
  .p-case__nav{margin-top:24px}
  .p-case__arrow{width:64px;height:48px;border-radius:24px}
  .p-case__arrows{gap:12px}
  .p-case__bar{width:60px}
  .p-case__count{gap:14px}

  /* after */
  .p-after{padding:64px 0}
  /* Figma SP準拠：背景は下端を基準に置き、白のかぶせは上端132pxだけにする */
  .p-after__bg img{object-position:bottom}
  .p-after__bg::after{
    inset:0 0 auto;height:132px;
    background:linear-gradient(180deg,#fff,rgba(255,255,255,0));
  }
  .p-after__cards{margin-top:32px;grid-template-columns:1fr;gap:26px}
  .p-after__card{flex-direction:column-reverse}
  .p-after__img{width:100%;height:124px}
  .p-after__body{padding:20px 16px}
  .p-after__list{gap:8px}
  .p-after__list li{line-height:1.7}
  .p-after__title{font-size:17px}
  .p-after__closing{margin-top:32px;font-size:16px}

  /* cost */
  .p-cost{padding:60px 0}
  .p-cost__cards{margin-top:32px;grid-template-columns:1fr;gap:16px}
  .p-cost__head{height:auto;padding:12px 16px;flex-wrap:wrap;gap:8px}
  .p-cost__case{font-size:12px}
  .p-cost__cond{font-size:13px}
  .p-cost__card{min-height:0}
  .p-cost__body{flex-direction:column;align-items:stretch;gap:16px;padding:20px 16px}
  .p-cost__pay{width:auto;margin-top:0;border-top:1px solid var(--c-pale);padding:16px 0 0}
  .p-cost__period{margin-top:32px;padding:24px 16px;min-height:0}
  .p-cost__period-title{font-size:18px}
  .p-cost__period-text{margin-top:14px;font-size:14px;line-height:1.8;max-width:none;text-align:left}
  .p-cost__note{font-size:12px;text-align:justify}

  /* mymobility */
  .p-mm{padding:60px 0}
  .p-mm{padding:60px 0}
  .p-mm__box{padding:28px 16px 32px;border-radius:10px;min-height:0}
  .p-mm__cols{grid-template-columns:1fr;gap:28px;margin-top:28px}
  .p-mm__text{max-width:none}
  .p-mm__lead{max-width:none}
  .l-container--wide{max-width:calc(var(--w-container) + var(--pad-x) * 2)}
  .p-check__foot-title{font-size:17px}
  .p-mm__app{text-align:center}
  .p-mm__app img{width:220px;margin-inline:auto}
  .p-mm__title{font-size:22px}
  .p-mm__text{margin-top:16px;font-size:14px;line-height:1.8}
  .p-mm__sub{margin-top:28px;font-size:17px}
  .p-mm__list{margin-top:20px;grid-template-columns:1fr;gap:20px}
  .p-mm__item{padding:20px 16px;min-height:0}
  .p-mm__item-title{font-size:16px}
  .p-mm__item-text{margin-top:10px;font-size:13px;line-height:1.8}

  /* flow */
  .p-flow{padding:60px 0}
  .p-flow__lead{text-align:left}
  .p-flow__list{margin-top:32px;width:100%;gap:26px}
  .p-flow__item{gap:0}
  .p-flow__num{width:60px;font-size:22px}
  .p-flow__line{left:44px;top:17.5px;bottom:26px}
  .p-flow__dot{left:41px;top:14.5px;width:6px;height:6px}
  .p-flow__body{padding-top:2.75px}
  .p-flow__title{font-size:17px}
  .p-flow__text{margin-top:6px;font-size:14px;line-height:1.8}
  .p-flow__closing{margin-top:32px;font-size:14px;padding:20px 16px;text-align:left}

  /* column */
  .p-column{padding:40px 0 60px}
  .p-column__box{grid-template-columns:1fr;gap:0;min-height:0}
  .p-column__body{padding:28px 16px 0}
  .p-column__en{font-size:20px;letter-spacing:4px}
  .p-column__label{margin-top:8px;font-size:14px;gap:12px}
  .p-column__label::after{width:auto;flex:1}
  .p-column__foot{margin-top:16px;display:block}
  .p-column__label{font-size:14px}
  .p-column__title{margin-top:8px;font-size:28px}
  .p-column__text{width:auto;font-size:13px;line-height:1.8}
  .p-column__link{margin-top:22px;width:auto;height:auto;font-size:14px;padding:12px 24px}
  .p-column__img{margin:28px -16px 0}
  .p-column__box{background:linear-gradient(180deg,var(--c-deep),var(--c-accent))}
  .p-column__img img{width:100%;height:155px}
  .p-column__img::after{
    left:0;right:0;top:0;bottom:auto;width:auto;height:67px;
    background:linear-gradient(180deg,#5a96b1,rgba(90,150,177,0));
  }

  /* faq */
  .p-faq{padding:40px 0 120px}
  .p-faq__list{margin-top:32px;grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;gap:12px}
  .p-faq__q{padding:16px 16px 14px;font-size:14px}
  .p-faq__q::before{left:16px;right:16px}
  .p-faq__item,
  .p-faq__item.is-open,
  .p-faq__item:nth-child(1).is-open,
  .p-faq__item:nth-child(6).is-open{min-height:0}
  .p-faq__a p{padding:12px 16px 16px;font-size:14px;line-height:1.8}

  /* banner / cta / footer */
  .p-banner__inner img{height:200px}
  .p-cta{padding:60px 0 40px}
  .p-cta__title{font-size:28px}
  .p-cta__text{margin-top:18px;font-size:14px;text-align:justify}
  .p-cta__hours{font-size:12px}
  .l-footer{padding:48px 0 120px}
  .l-footer__grid{grid-template-columns:1fr;gap:32px}
  .l-footer__logo img{width:220px}
  .l-footer__catch{margin-top:16px;font-size:14px}
  .l-footer__dl > div{flex-direction:column;gap:2px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--c-bg)}
  .l-footer__dl dt{width:auto;color:var(--c-text-sub);font-size:12px}
  .l-footer__dl dd{word-break:break-all}
  .l-footer__map-link{font-size:14px}
  .l-footer__copy{margin-top:36px;font-size:10px}

  /* fixed CTA：グラデーションのバー1本。全体がリンク */
  .l-fixcta{
    display:block;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    /* 「TOPへ戻る」と同じタイミングで下から出す */
    transform:translateY(100%);
    transition:transform .45s var(--hv-ease);
  }
  .l-fixcta.is-shown{transform:none}
  .l-fixcta__btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:11px 10px calc(11px + env(safe-area-inset-bottom));
    background:linear-gradient(90deg,var(--c-deep),var(--c-light));
    color:#fff;text-align:center;
  }
  .l-fixcta__label{
    display:flex;align-items:center;gap:7px;
    font-size:16px;font-weight:500;letter-spacing:.03em;line-height:1.4;
  }
  .l-fixcta__label::before{
    content:"";flex:none;width:15px;height:15px;
    background:currentColor;
    -webkit-mask:url("../img/icon-arrow.svg") center/contain no-repeat;
    mask:url("../img/icon-arrow.svg") center/contain no-repeat;
  }
  .l-fixcta__hours{
    font-size:10.5px;font-weight:400;letter-spacing:.01em;line-height:1.4;
  }
}

/* ============================================================
   PAGE TOP（右下・スムーススクロール）
   ============================================================ */
.c-pagetop{
  position:fixed;right:32px;bottom:32px;z-index:80;
  display:inline-flex;align-items:center;gap:9px;
  height:50px;padding:0 24px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,var(--c-deep),var(--c-light),var(--c-deep));
  background-size:200% 100%;background-position:0 0;
  color:#fff;font-family:inherit;font-size:14px;font-weight:500;letter-spacing:.06em;line-height:1;
  box-shadow:0 6px 20px rgba(1,97,145,.26);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .45s var(--faq-ease),transform var(--hv-lift) var(--hv-ease),visibility .45s,
             box-shadow var(--hv-lift) var(--hv-ease),background-position var(--hv-flow) var(--hv-ease),filter var(--hv-lift);
}
.c-pagetop::before{
  content:"";flex:none;width:11px;height:11px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:translateY(2px) rotate(-45deg);
  transition:transform var(--hv-lift) var(--hv-ease);
}
.c-pagetop.is-shown{opacity:1;visibility:visible;transform:none}
@media (hover:hover) and (pointer:fine){
  .c-pagetop.is-shown:hover{
    background-position:-100% 0;
    transform:translateY(-5px) scale(1.015);
    box-shadow:0 14px 30px rgba(1,97,145,.34);filter:saturate(1.08);
  }
  .c-pagetop.is-shown:hover::before{transform:translateY(-1px) rotate(-45deg)}
}
.c-pagetop.is-shown:active{transform:translateY(-1px) scale(.995)}
.c-pagetop:focus-visible{outline:2px solid var(--c-deep);outline-offset:3px}
@media (max-width:767px){
  .c-pagetop{
    right:14px;bottom:calc(var(--fixcta-h, 62px) + 10px);
    height:42px;padding:0 16px;font-size:12px;gap:7px;
  }
  .c-pagetop::before{width:9px;height:9px}
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.js-fade{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.js-fade.is-shown{opacity:1;transform:none}

/* ============================================================
   LOADING（案A：ロゴ＋ラインプログレス）
   ============================================================ */
.js-loading{overflow:hidden}
.js-loading body{overflow:hidden}

.l-loader{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:var(--c-white);
  /* フェイルセーフ：JSが動かなくても2.6秒で必ず消える */
  animation:ldrFailsafe .01s 2.6s linear forwards;
}
.l-loader__inner{display:flex;flex-direction:column;align-items:center;gap:26px}
.l-loader__logo{
  width:230px;height:auto;opacity:0;
  animation:ldrLogo .7s .1s ease-out forwards;
}
.l-loader__bar{
  position:relative;width:200px;height:1px;
  background:var(--c-pale);overflow:hidden;
}
.l-loader__bar::after{
  content:"";position:absolute;inset:0;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--c-deep),var(--c-light));
  animation:ldrBar 1.15s .35s cubic-bezier(.4,0,.2,1) forwards;
}
.l-loader__cap{
  font-family:var(--f-en);font-size:12px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--c-accent);opacity:0;
  animation:ldrLogo .7s .35s ease-out forwards;
}
/* 読み込み完了時（JS）：フェイルセーフより後に定義して上書き */
.l-loader.is-leaving{
  animation:ldrOut .7s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes ldrLogo{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ldrBar{to{transform:scaleX(1)}}
@keyframes ldrOut{to{opacity:0;visibility:hidden}}
@keyframes ldrFailsafe{to{opacity:0;visibility:hidden}}

/* ヒーローの導入（JSが .js-fv / .js-fv-soft を付けたときだけ動く） */
/* ① ローディングが明けたら、タイトルだけが一文字ずつ現れる */
.p-hero__title{--h2-dur:var(--fv-dur);--h2-step:var(--fv-step);--h2-delay:var(--fv-delay)}
body.is-revealed .p-hero__title.js-chars .c-heading__ch{
  animation:c-heading-ch var(--h2-dur) var(--h2-ease) forwards;
  animation-delay:calc(var(--h2-delay) + var(--i) * var(--h2-step));
}
/* ② タイトルが出そろってから、残りの情報が続く */
.js-fv{opacity:0;transform:translateY(22px)}
.js-fv-soft{opacity:0}
body.is-revealed .js-fv{
  animation:heroRv .9s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(var(--fv-rest) + var(--fv-i,0) * .09s);
}
body.is-revealed .js-fv-soft{
  animation:heroRvSoft .9s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(var(--fv-rest) + var(--fv-i,0) * .09s);
}
@keyframes heroRv{to{opacity:1;transform:none}}
@keyframes heroRvSoft{to{opacity:1}}/* 写真とヘッダーは位置を動かさない */

@media (prefers-reduced-motion:reduce){
  /* 動きは無くし、ロゴとラインは最初から表示。短時間で静かに切り替える */
  .l-loader__logo,.l-loader__cap{opacity:1;animation:none}
  .l-loader__bar::after{transform:scaleX(1);animation:none}
  .l-loader{animation:ldrFailsafe .01s 1.4s linear forwards}
  .l-loader.is-leaving{animation:ldrOut .25s linear forwards}
  .js-fv,.js-fv-soft{opacity:1;transform:none}
}

@media (max-width:767px){
  .l-loader__logo{width:180px}
  .l-loader__bar{width:160px}
  .l-loader__cap{font-size:10px}
}