@charset "UTF-8";
/* feature.css — auto-split from style.css (feature) */


/* ===== 特集/施術ページ（シミ・ニキビ等） ===== */
/* PC: 高さはFigma(Top-image 840)で固定＝これ以上大きくしない。画像はcoverで枠内クロップ */
/* KV: 枠の高さ（--kv-h）と幅（--kv-w）を固定して右端に寄せ、中の画像は cover で覆う。
   目次が長くても画像は伸びない（サイズ調整はこの2変数だけ）。 */
.feat-hero{--kv-h:600px;--kv-w:780px;display:grid;grid-template-columns:550px 1fr;align-items:start;min-height:0;}
/* 下パディングは0。これがあるとヒーロー下端が目次より下にずれ、
   sticky解除時に「画像の下端」と「目次の下端」が揃わなくなる（下の余白は .feat-content の padding で確保）。 */
.feat-hero__text{padding:144px 0 0 50px;display:flex;flex-direction:column;}
.feat-label{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--c-beige);padding:2px 12px;font-family:var(--f-min);font-size:16px;color:var(--c-ink);}
.feat-label::before,.feat-label::after{content:"";width:11px;height:1px;background:var(--c-ink);}
.feat-hero__h{font-family:var(--f-min);font-weight:400;font-size:60px;line-height:1.2;color:var(--c-green);margin-top:8px;}
.feat-hero__sub{font-family:var(--f-min);font-size:18px;line-height:1.67;color:var(--c-ink);margin-top:27px;}
.feat-index{margin-top:44px;display:flex;flex-direction:column;gap:20px;padding-right:44px;}
.feat-index a{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;background:var(--c-green);color:#fff;
  font-family:var(--f-min);font-weight:500;font-size:18px;line-height:1.2;transition:opacity .25s;
}
.feat-index a:hover{opacity:.85;}
.feat-index a::after{content:"";width:17px;height:6px;flex:none;background:url(../images/price-index-arrow.svg) no-repeat center/contain;transform:rotate(-90deg);}
.feat-hero__img{
  overflow:hidden;height:var(--kv-h);width:min(100%,var(--kv-w));margin-left:auto;  /* 右端寄せ・幅狭め */
  /* 目次のほうが高いページでは、スクロール中も画像を上部に固定（sticky）。
     ヘッダーはfixedなのでその分だけ下げる。ヒーローを抜けると一緒に流れる。 */
  position:sticky;align-self:start;top:calc(var(--header-h) + 24px);
}
.feat-hero__img img{width:100%;height:100%;object-fit:cover;}   /* 枠を完全に覆う（トリミング） */

.feat-content{width:min(100% - 100px,1400px);margin:0 auto;padding:100px 0;display:flex;flex-direction:column;gap:81px;}
/* .feat-h / .reservation は common.css（共有コンポーネント）に移動 */
/* ブロック本文（.feat-sec / .feat-h3 / .feat-list / .feat-table）の構造は css/blocks/base.css へ移動。
   ページ群ごとの見た目差は css/skins/*.css で変数を上書きする（docs/ARCHITECTURE.md 参照）。 */

@media (max-width:1023px){
  /* 縦積み時は画像を最上部へ（Figma SP: 画像 → テキスト → 目次）。高さ固定は解除 */
  .feat-hero{grid-template-columns:1fr;height:auto;min-height:0;}
  .feat-hero__text{padding:40px 24px;}
  /* 縦積みなので sticky・高さ/幅固定は解除 */
  .feat-hero__img{position:static;aspect-ratio:16/9;order:-1;height:auto;width:100%;margin-left:0;}
  .feat-content{width:min(100% - 48px,900px);padding:64px 0;gap:56px;}
}

@media (max-width:767px){
  /* Figma SP(dump-feat-sp) 実測: 白背景ブロック / 画像390×346 / 左右10px /
     画像→ラベル26 / ラベル→タイトル4 / タイトル→サブ16 / サブ→目次16 / 目次間16 */
  .feat-hero{background:#fff;}
  .feat-hero__img{aspect-ratio:390/346;order:-1;}
  .feat-hero__text{padding:26px 10px 24px;}
  .feat-label{font-size:14px;padding:2px 8px;}
  .feat-hero__h{font-size:32px;line-height:1.19;margin-top:4px;}
  .feat-hero__sub{font-size:12px;line-height:1.42;margin-top:16px;}
  .feat-index{margin-top:16px;padding-right:0;gap:16px;}
  .feat-index a{font-size:16px;padding:12px 16px;}
  .feat-index a::after{width:15px;height:5px;}
  .feat-content{padding:48px 0;gap:48px;}
}

/* ===== 監修クレジット（ページ固有。ブロックではない） ===== */
.feat-supervisor{
  display:flex;align-items:flex-start;gap:12px;margin:0 0 48px;padding:14px 18px;
  background:var(--c-beige);border-left:4px solid var(--c-green);
}
.feat-supervisor__l{
  flex:none;font-family:var(--f-min);font-weight:600;font-size:13px;letter-spacing:.08em;
  color:#fff;background:var(--c-green);padding:3px 10px;border-radius:2px;
}
.feat-supervisor__t{font-family:var(--f-min);font-size:14px;line-height:1.8;color:var(--c-ink);}

@media (max-width:767px){
  .feat-supervisor{margin-bottom:32px;padding:12px 14px;gap:10px;flex-direction:column;}
}