@charset "UTF-8";

/* =========================================================
   案C：高級路線版（独立スタイル）
   表参道・完全予約制・肌管理特化型ブティッククリニック
   設計：余白が主役／非対称／片ブリード写真／大きな明朝／細い罫線
   ========================================================= */

:root{
  --ww:      #F7F4EF;   /* ウォームホワイト */
  --iv:      #EFE9E0;   /* アイボリー */
  --gr:      #DCD3C7;   /* グレージュ（罫） */
  --gr2:     #C9BFB1;
  --ch:      #23211E;   /* チャコール */
  --ch2:     #2F2C27;
  --gold:    #C0A575;   /* シャンパンゴールド：線・ラベル・数字のみ */
  --ink:     #2A2724;
  --ink2:    #6C6459;
  --ink3:    #9A9186;

  --serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  --sans:  "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;

  --pad: 22px;
  --max: 1240px;

  /* --- 写真投入後の調整ポイント（ここだけ触れば足りるようにしている） --- */
  /* FVスクリムの濃度：上→下。実写真のコントラストに合わせて調整する
     現在値は fv.jpg（明るいベージュ基調）でコントラスト比を実測して決めた値 */
  --scrim-top: 0.16;   /*   0% 顔まわりは明るく残す */
  --scrim-mid: 0.14;   /*  35% */
  --scrim-m2:  0.46;   /*  50% ここから文字領域へ向けて落とす */
  --scrim-low: 0.80;   /*  64% 英字ラベルの位置（コントラスト比4.5確保のため実測で決定） */
  --scrim-bot: 0.92;   /* 100% */
  --scrim-left: 0.56;  /* PCのみ：左端→中央へ抜ける横方向のスクリム（実測で決定） */
  --scrim-copy: 0.42;  /* コピー塊の背後だけに足すスクリム（見出しの行数が変わっても追従する） */
  /* FV英字ラベルの文字サイズ（可読性の比較検討用） */
  --fv-label-size: 11px;   /* PCは900px以上で12px */
  /* 各画像のトリミング基準点（object-position） */
  --obj-fv-sp:     52% 30%;   /* 横顔を上寄せ、下部を文字領域にあてる */
  --obj-fv-pc:     50% 50%;   /* PCは専用の16:9カットのため全面表示 */
  --obj-approach:  50% 32%;   /* 顔を切らない */
  --obj-stance-01: 50% 40%;   /* 首元〜輪郭 */
  --obj-stance-02: 50% 42%;   /* 手元 */
  --obj-stance-03: 40% 55%;   /* 手と什器のディテール */
  --obj-doctor:    50% 22%;   /* 顔を上寄りに */
  --obj-clinic:    50% 50%;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ww);
  color:var(--ink);
  font-family:var(--sans);
  font-size:13.5px;
  line-height:2.05;
  letter-spacing:.04em;
  font-feature-settings:"palt";
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
p,h1,h2,h3{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* 片ブリード（画面端まで抜く） */
.bleed-l{ margin-left:calc(var(--pad) * -1); }
.bleed-r{ margin-right:calc(var(--pad) * -1); }

/* ---------- タイポグラフィ ---------- */
.display{
  font-family:var(--serif);
  font-weight:400;
  font-size:34px;
  line-height:1.65;
  letter-spacing:.04em;
}
.h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:26px;
  line-height:1.7;
  letter-spacing:.06em;
}
.h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:20px;
  line-height:1.7;
  letter-spacing:.06em;
}
.label{
  font-size:10px;
  line-height:1.6;
  letter-spacing:.30em;
  color:var(--ink3);
}
.label--gold{ color:var(--gold); }
.num{
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.14em;
  color:var(--gold);
  line-height:1;
}
.body{
  font-size:13.5px;
  line-height:2.05;
  color:var(--ink2);
}
.tbd-text{ color:var(--ink3); }

/* ---------- 画像 ---------- */
/* 現在は制作側が生成した仮ビジュアル。実写真は同比率で差し替える */
.ph{
  position:relative;
  overflow:hidden;
  background:#E4DCD0;
}
.ph > img,
.hero__media > img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--obj, 50% 50%);
  display:block;
}
.hero__media{ --obj:var(--obj-fv-sp); }
.ph--approach{ --obj:var(--obj-approach); }
.ph--doctor{   --obj:var(--obj-doctor); }
.ph--clinic{   --obj:var(--obj-clinic); }
.stance__item:nth-of-type(1) .ph--stance{ --obj:var(--obj-stance-01); }
.stance__item:nth-of-type(2) .ph--stance{ --obj:var(--obj-stance-02); }
.stance__item:nth-of-type(3) .ph--stance{ --obj:var(--obj-stance-03); }

/* DEMOであることの注記（未確定情報を「準備中」と並べない） */
.demo-note{
  margin-top:26px;
  padding-top:16px;
  border-top:1px solid var(--gr);
  font-size:10.5px;
  line-height:1.95;
  letter-spacing:.06em;
  color:var(--ink3);
}
.clinic .demo-note{ border-top-color:var(--gr2); margin-top:22px; }

/* ---------- ボタン ---------- */
/* 細枠のCTA（塗らない） */
.line-cta{
  display:inline-flex;
  align-items:center;
  min-height:52px;
  padding:0 26px;
  border:1px solid var(--ink);
  color:var(--ink);
  font-size:13px;
  letter-spacing:.14em;
  transition:background-color .3s ease, color .3s ease;
}
.line-cta::after{ content:"→"; margin-left:14px; }
.line-cta:hover{ background:var(--ink); color:var(--ww); }
.line-cta--light{
  border-color:rgba(247,244,239,.55);
  color:var(--ww);
}
.line-cta--light:hover{ background:var(--ww); color:var(--ch); }

/* 塗りのCTA（最終予約のみ） */
.btn-solid{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  padding:0 28px;
  background:var(--ch);
  color:var(--ww);
  font-size:14px;
  letter-spacing:.12em;
  transition:opacity .3s ease;
}
.btn-solid:hover{ opacity:.86; }

/* テキストリンク型 */
.link-btn{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:12px;
  letter-spacing:.18em;
  color:var(--ink);
  border-bottom:1px solid var(--gr2);
}
.link-btn:hover{ border-bottom-color:var(--ink); }

/* =========================================================
   DEMOバー ／ ヘッダー
   ========================================================= */
.demobar{
  background:var(--ch);
  color:#CFC7BB;
  padding:8px var(--pad);
}
.demobar__text{
  font-size:10px;
  line-height:1.8;
  letter-spacing:.06em;
  text-align:center;
}
.demobar__tag{
  display:inline-block;
  margin-right:8px;
  padding:0 6px;
  border:1px solid rgba(192,165,117,.7);
  color:var(--gold);
  font-size:9px;
  letter-spacing:.20em;
}

.header{ border-bottom:1px solid var(--gr); }
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px var(--pad);
}
.logo__name{
  display:block;
  font-family:var(--serif);
  font-size:19px;
  letter-spacing:.24em;
  line-height:1.2;
}
.logo__sub{
  display:block;
  margin-top:5px;
  font-size:8.5px;
  letter-spacing:.30em;
  color:var(--ink3);
}
.header .header__cta{ display:none; }

/* =========================================================
   01 FV
   ========================================================= */
.hero{
  position:relative;
  min-height:82vh;
  min-height:82svh;
  display:flex;
  align-items:flex-end;
  isolation:isolate;
  overflow:hidden;
}
.hero__media{
  display:block;
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
  background:#C7BCAE;
}
.hero__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,
    rgba(28,25,22,var(--scrim-top)) 0%,
    rgba(28,25,22,var(--scrim-mid)) 35%,
    rgba(28,25,22,var(--scrim-m2))  50%,
    rgba(28,25,22,var(--scrim-low)) 64%,
    rgba(28,25,22,var(--scrim-bot)) 100%);
}
.hero__body{
  position:relative;
  z-index:0;
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding:76px var(--pad) 46px;
  color:var(--ww);
}
/* 見出しが1行でも2行でも、コピー塊の背後だけを確実に落とす。
   .hero__scrim（位置固定の縦グラデーション）に重ねる。
   コンテナ幅で切れて矩形に見えないよう、画面幅いっぱいに広げる */
.hero__body::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:-1;
  background:linear-gradient(180deg,
    rgba(28,25,22,0) 0%,
    rgba(28,25,22,var(--scrim-copy)) 22%,
    rgba(28,25,22,var(--scrim-copy)) 100%);
}
/* 写真の上ではゴールドを明度側へ（コントラスト確保） */
.hero .label--gold{ color:#EFDDBC; font-size:var(--fv-label-size); }
.hero__title{
  margin-top:20px;
  color:#FCFAF6;
}
.hero__lead{
  margin-top:20px;
  font-size:12.5px;
  line-height:2.1;
  color:rgba(250,246,240,.86);
}
.hero__cta{
  margin-top:30px;
  border-color:rgba(250,246,240,.6);
  color:#FCFAF6;
}
.hero__cta:hover{ background:#FCFAF6; color:var(--ch); }

/* =========================================================
   02 STATEMENT
   ========================================================= */
.statement{ padding-block:96px 92px; }
.statement__title{ font-size:30px; }
.statement__body{
  margin-top:38px;
  padding-top:30px;
  border-top:1px solid var(--gr);
  max-width:520px;
  margin-left:auto;   /* 非対称：本文だけ右へ寄せる */
  color:var(--ink2);
}
.statement__body p + p{ margin-top:20px; }

/* =========================================================
   03 APPROACH（右ブリード）
   ========================================================= */
.approach{
  padding-inline:var(--pad);
  padding-bottom:96px;
}
.ph--approach{ aspect-ratio:4/5; }
.approach__text{
  margin-top:34px;
  padding-left:26px;      /* 非対称：写真より内側へ寄せる */
  border-left:1px solid var(--gold);
}
.approach__text .h2{ margin-top:16px; }
.approach__text .body{ margin-top:20px; }

/* =========================================================
   04 三つの姿勢
   ========================================================= */
.stance{ padding-bottom:24px; }
.stance__head{ padding-bottom:26px; }
.stance__item{
  padding-inline:var(--pad);
  padding-bottom:72px;
}
.ph--stance{ aspect-ratio:1/1; }
.stance__item--rev .ph--stance{ aspect-ratio:5/4; }
.stance__text{ margin-top:26px; }
.stance__item--rev .stance__text{
  padding-left:0;
  padding-right:34px;     /* 交互にテキストの寄せ方を変える */
}
.stance__item:not(.stance__item--rev) .stance__text{ padding-left:34px; }
.stance__text .h3{ margin-top:14px; }
.stance__text .body{ margin-top:14px; }

/* =========================================================
   05 FIRST SESSION（ダーク）
   ========================================================= */
.session{
  background:var(--ch);
  color:var(--ww);
  padding-block:88px 84px;
}
.session__title{
  margin-top:20px;
  font-size:28px;
  color:#FBF8F3;
}
.session__lead{
  margin-top:26px;
  font-size:13px;
  line-height:2.1;
  color:rgba(247,244,239,.76);
}
.steps{
  margin-top:44px;
  border-top:1px solid rgba(192,165,117,.4);
}
.steps__item{
  padding:20px 0;
  border-bottom:1px solid rgba(247,244,239,.14);
}
.steps__en{
  font-size:9.5px;
  letter-spacing:.30em;
  color:var(--gold);
}
.steps__ja{
  margin-top:6px;
  font-family:var(--serif);
  font-size:17px;
  letter-spacing:.08em;
  color:#FBF8F3;
}
.price{
  margin-top:44px;
  display:flex;
  align-items:baseline;
  gap:16px;
}
.price__label{
  font-size:10px;
  letter-spacing:.28em;
  color:rgba(247,244,239,.62);
}
.price__value{
  font-family:var(--serif);
  color:#FBF8F3;
  letter-spacing:.02em;
}
.price__num{ font-size:30px; }
.price__yen{ font-size:15px; margin-left:2px; }
.price__tax{ font-size:11px; margin-left:6px; color:rgba(247,244,239,.62); }
.session__note{
  margin-top:18px;
  font-size:10.5px;
  line-height:1.95;
  color:rgba(247,244,239,.5);
}
.session__cta{ margin-top:38px; }

/* =========================================================
   06 DOCTOR（左ブリード）
   ========================================================= */
.doctor{
  padding-inline:var(--pad);
  padding-block:92px;
}
.ph--doctor{ aspect-ratio:3/4; }
.doctor__text{ margin-top:34px; }
.doctor__text .h2{ margin-top:16px; }
.doctor__text .body{ margin-top:20px; }
.doctor__meta{
  margin-top:34px;
  border-top:1px solid var(--gr);
}
.doctor__row{
  display:flex;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid var(--gr);
}
.doctor__row dt{
  flex:0 0 88px;
  font-size:10px;
  letter-spacing:.16em;
  color:var(--ink3);
  line-height:2.2;
}
.doctor__row dd{ font-size:13px; }

/* =========================================================
   07 CLINIC
   ========================================================= */
.clinic{ padding-bottom:92px; background:var(--iv); padding-top:92px; }
.clinic__head .h2{ margin-top:16px; }
.ph--clinic{
  margin-top:38px;
  aspect-ratio:16/10;
}
.info{ margin-top:40px; }
.info__row{
  display:flex;
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid var(--gr2);
}
.info__row:first-child{ border-top:1px solid var(--gr2); }
.info__label{
  flex:0 0 96px;
  font-size:9.5px;
  letter-spacing:.22em;
  color:var(--ink3);
  line-height:2.4;
}
.info__data{ font-size:13.5px; }
.info__sub{
  display:block;
  font-size:11px;
  color:var(--ink3);
}

/* =========================================================
   08 RESERVATION
   ========================================================= */
.reserve{ padding-block:92px 96px; }
.reserve__title{
  margin-top:18px;
  font-size:28px;
}
.reserve__main{
  margin-top:44px;
  padding-top:32px;
  border-top:1px solid var(--gr);
}
.reserve__sub{
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid var(--gr);
}
.reserve__note{
  margin-top:14px;
  font-size:11px;
  color:var(--ink3);
}

/* =========================================================
   フッター
   ========================================================= */
.footer{
  background:var(--ch);
  color:rgba(247,244,239,.78);
  padding-block:64px 44px;
}
.footer .logo__name{ color:#FBF8F3; }
.footer .logo__sub{ color:rgba(247,244,239,.5); }
.footer__area{
  margin-top:18px;
  font-size:11.5px;
  color:rgba(247,244,239,.6);
}
.footer__notes{
  margin-top:40px;
  padding-top:26px;
  border-top:1px solid rgba(247,244,239,.16);
}
.footer__notestitle{
  font-size:9.5px;
  letter-spacing:.26em;
  color:var(--gold);
}
.footer__notestitle + .footer__notestext{ margin-top:10px; }
.footer__notestext{
  font-size:10.5px;
  line-height:1.95;
  color:rgba(247,244,239,.55);
}
.footer__notestext + .footer__notestitle{ margin-top:26px; }
.footer__copy{
  margin-top:40px;
  font-size:9.5px;
  letter-spacing:.14em;
  color:rgba(247,244,239,.38);
}

/* =========================================================
   SP固定CTA（細いバー）
   ========================================================= */
.spcta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:40;
  background:rgba(35,33,30,.96);
  border-top:1px solid rgba(192,165,117,.45);
  padding:0 var(--pad);
  padding-bottom:env(safe-area-inset-bottom);
}
.spcta[hidden]{ display:none; }
.spcta__inner{ display:flex; align-items:stretch; }
.spcta__main{
  flex:1 1 auto;
  min-height:52px;
  color:var(--ww);
  font-size:13px;
  letter-spacing:.10em;
  text-align:left;
}
.spcta__main::after{ content:"→"; margin-left:12px; }
.spcta__sub{
  flex:0 0 72px;
  min-height:52px;
  border-left:1px solid rgba(247,244,239,.2);
  color:rgba(247,244,239,.8);
  font-size:11px;
  letter-spacing:.14em;
}
body.has-spcta .footer{ padding-bottom:calc(44px + 60px + env(safe-area-inset-bottom)); }

/* =========================================================
   DEMOモーダル
   ========================================================= */
.modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal[hidden]{ display:none; }
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(28,25,22,.62);
}
.modal__panel{
  position:relative;
  width:100%;
  max-width:360px;
  padding:36px 26px 30px;
  background:var(--ww);
  text-align:center;
}
.modal__title{
  font-family:var(--serif);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.05em;
}
.modal__text{
  margin-top:14px;
  font-size:11.5px;
  line-height:2;
  color:var(--ink2);
}
.modal__close{ margin-top:26px; }

/* =========================================================
   タブレット以上
   ========================================================= */
@media (min-width:900px){
  :root{ --pad:60px; }
  body{ font-size:15px; }

  .display{ font-size:64px; line-height:1.6; }
  .h2{ font-size:40px; }
  .h3{ font-size:26px; }
  .body{ font-size:15px; }
  .num{ font-size:26px; }

  .header{ position:sticky; top:0; z-index:30; background:var(--ww); }
  .header .header__cta{ display:inline-flex; }

  /* FV */
  .hero{ min-height:88vh; }
  .hero__media{ --obj:var(--obj-fv-pc); }
  :root{ --fv-label-size:12px; }
  /* PC用カット（明るいベージュの壁）に合わせて実測で決定 */
  .hero{ --scrim-left:0.46; }
  /* PCはコピーが左に乗るため、左側だけ落とす横方向のスクリムを重ねる
     （縦のスクリムを全体に強めると被写体まで暗くなるため） */
  .hero__scrim::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
      rgba(28,25,22,var(--scrim-left)) 0%,
      rgba(28,25,22,calc(var(--scrim-left) * 0.50)) 34%,
      rgba(28,25,22,0) 66%);
  }
  .hero__body{ padding-bottom:76px; }
  .hero__title{ margin-top:26px; }
  .hero__lead{ font-size:14px; margin-top:26px; }

  /* STATEMENT：左に見出し、右に本文の2カラム非対称 */
  .statement{ padding-block:168px 156px; }
  .statement .wrap{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:0 80px;
    align-items:start;
  }
  .statement__title{ font-size:56px; }
  .statement__body{
    margin-top:12px;
    padding-top:26px;
    max-width:none;
  }

  /* APPROACH：写真を右へ大きく抜き、テキストを左下へ */
  .approach{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:0 72px;
    align-items:end;
    padding-bottom:160px;
  }
  .approach .ph--approach{
    order:2;
    aspect-ratio:4/5;
  }
  .approach__text{
    order:1;
    margin-top:0;
    margin-bottom:40px;
    padding-left:32px;
  }

  /* 三つの姿勢：写真とテキストを左右交互に */
  .stance{ padding-bottom:80px; }
  .stance__head{ padding-bottom:56px; }
  .stance__item{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:0 72px;
    align-items:center;
    padding-bottom:130px;
  }
  .stance__item--rev{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .stance__item--rev .ph--stance{ order:2; }
  .stance__item--rev .stance__text{ order:1; padding-right:0; }
  .stance__item:not(.stance__item--rev) .stance__text{ padding-left:0; }
  .ph--stance{ aspect-ratio:4/5; }
  .stance__item--rev .ph--stance{ aspect-ratio:4/5; }
  .stance__text{ margin-top:0; }

  /* FIRST SESSION */
  .session{ padding-block:150px 140px; }
  .session .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0 80px;
  }
  .session .label,
  .session__title,
  .session__lead{ grid-column:1; }
  .session__title{ font-size:46px; }
  .steps{
    grid-column:2;
    grid-row:1 / span 4;
    margin-top:8px;
    align-self:start;
  }
  .price{ grid-column:1; margin-top:52px; }
  .price__num{ font-size:38px; }
  .session__note{ grid-column:1; max-width:520px; }
  .session__cta{ grid-column:1; justify-self:start; }

  /* DOCTOR */
  .doctor{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0 80px;
    align-items:center;
    padding-block:160px;
  }
  .doctor__text{ margin-top:0; }
  .ph--doctor{ aspect-ratio:3/4; }

  /* CLINIC */
  .clinic{ padding-block:150px 150px; }
  .ph--clinic{ aspect-ratio:21/9; margin-top:56px; }
  .info{ max-width:840px; }
  .info__label{ flex-basis:140px; }

  /* RESERVATION */
  .reserve{ padding-block:150px 160px; }
  .reserve__title{ font-size:46px; }
  .reserve .wrap{ max-width:860px; }
  .btn-solid{ width:auto; min-width:340px; }

  .spcta{ display:none; }
  body.has-spcta .footer{ padding-bottom:44px; }

  .footer{ padding-block:96px 56px; }
  .footer__notes{ max-width:720px; }
}

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

@media print{
  .spcta,.modal{ display:none !important; }
}