/* ==========================================================
   TDC トップ/下層 ページ固有CSS（共通部分は common.css）
   ========================================================== */
section{padding:var(--sp-120) 0}

/* ---------- FV : 画像(または動画)の上に文字 ---------- */
.fv{position:relative;height:100vh;min-height:620px;padding:0;color:var(--w);display:flex;align-items:flex-end;overflow:hidden;background:var(--b)}
.fv-media{position:absolute;inset:0}
.fv-media img,.fv-media video{width:100%;height:100%;object-fit:cover;animation:kb 18s ease-out both}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
.fv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--b-42) 0%,var(--b-32) 40%,var(--b-80) 100%)}
/* トップ専用: FV 画像を Artmake メニューの終わりまで固定（Feature に入ったら終わる）（.fv-stack ＞ .fv-media が sticky、他ページには影響しない）。
   --fv-veil-a = 画像の上に重ねる白の不透明度（デザイナーが最終指定する 1 値。0 で画像そのまま、1 で従来の不透明） */
.fv-stack{--fv-veil-a:.7;--fv-h:max(100vh,620px);position:relative}
.fv-stack>.fv-media{position:sticky;inset:0 0 auto 0;z-index:0;height:var(--fv-h);overflow:hidden;background:var(--b)}
.fv-stack>.fv{background:transparent;margin-top:calc(-1*var(--fv-h))}
.fv-stack>.notice-bar,.fv-stack>section{position:relative;z-index:var(--z-1)}
.fv-stack>section{background:rgba(255,255,255,var(--fv-veil-a))}
.fv-stack>section.fv{z-index:auto}
.fv-copy{position:relative;z-index:var(--z-2);padding:0 clamp(var(--sp-24),var(--sp-7vw),var(--sp-110)) clamp(var(--sp-70),var(--sp-11vh),var(--sp-120));width:100%}
.fv-en{font-weight:700;font-size:var(--fs-fluid-13);line-height:var(--lh-100);letter-spacing:var(--ls-6)}
.fv-catch{margin-top:var(--sp-26);font-weight:300;font-size:var(--fs-fluid-4);line-height:var(--lh-180);letter-spacing:var(--ls-20)}
.fv h1{margin-top:var(--sp-14);font-weight:400;font-size:var(--fs-12);letter-spacing:var(--ls-24);opacity:.85}
.fv-btns{margin-top:var(--sp-34);display:flex;gap:var(--sp-14);flex-wrap:wrap}
.fv .scroll{position:absolute;z-index:var(--z-2);right:36px;bottom:0;writing-mode:vertical-rl;font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-40);padding-bottom:var(--sp-86);color:var(--w)}
.fv .scroll::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:70px;background:var(--w);animation:sc 2s infinite}
@keyframes sc{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.notice-bar{background:var(--w);border-bottom:1px solid var(--b);text-align:center;padding:var(--sp-16) var(--sp-20);font-size:var(--fs-13);font-weight:600;letter-spacing:var(--ls-14)}

/* ---------- 下層ヒーロー ---------- */
.page-hero{padding:var(--sp-150) 0 var(--sp-70);background:var(--b);color:var(--w);text-align:center}
.page-hero h1{font-weight:400;font-size:inherit}
.page-hero .en,.page-hero .jp{display:block}
.page-hero .en{font-weight:700;font-size:var(--fs-fluid-9);letter-spacing:var(--ls-24);line-height:var(--lh-120)}
.page-hero .jp{margin-top:var(--sp-10);font-size:var(--fs-12);letter-spacing:var(--ls-30)}
/* C-11 Breadcrumb（nav.crumb）。旧 :266 の .crumb a 二重定義は 4-2 で削除（tokens-9） */
.crumb{font-size:var(--fs-11);letter-spacing:var(--ls-10);padding:var(--sp-18) 0;color:var(--b-60)}
.crumb a{text-decoration:underline}
.lead{font-weight:300;font-size:var(--fs-fluid-3);line-height:var(--lh-210);letter-spacing:var(--ls-14);text-align:center}
.center-txt{text-align:center;max-width:760px;margin:0 auto}

/* ---------- campaign ---------- */
.camp{padding:var(--sp-90) 0 0}
.camp-btns{margin-top:var(--sp-32);display:flex;gap:var(--sp-14);justify-content:center;flex-wrap:wrap}

/* ---------- ARTMAKE（メニュー＋部位別説明を1つに統合） ---------- */
.parts{border-top:1px solid var(--b)}
.part{display:grid;grid-template-columns:300px 1fr 150px;gap:var(--sp-40);align-items:center;padding:var(--sp-28) var(--sp-4);border-bottom:1px solid var(--b-15)}
.part .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--b-05)}
.part .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.part:hover .thumb img{transform:scale(1.05)}
.ph-box{width:100%;height:100%;border:1px solid var(--b);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--fs-11);letter-spacing:var(--ls-30);color:var(--b-60)}
.ph-box b{font-size:var(--fs-13);letter-spacing:var(--ls-24);color:var(--b);margin-bottom:var(--sp-4)}
.bg-b .ph-box{border-color:var(--w);color:var(--w-60)}
.bg-b .ph-box b{color:var(--w)}
.part .pn{font-weight:700;font-size:var(--fs-11);letter-spacing:var(--ls-30);margin-bottom:var(--sp-2)}
.part h3{font-weight:700;font-size:var(--fs-20);letter-spacing:var(--ls-12);margin-bottom:var(--sp-8)}
.part p{font-size:var(--fs-13)}

/* ---------- two column ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-80);align-items:center}
.two img{width:100%}
.two h2,.two h3{font-weight:500;font-size:var(--fs-fluid-5);line-height:var(--lh-200);letter-spacing:var(--ls-12);margin-bottom:var(--sp-24)}
.two p{margin-bottom:var(--sp-18)}
.two .btn{margin-top:var(--sp-14)}

/* ---------- staff ---------- */
.staff-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-28) var(--sp-20)}
.staff img{width:100%;aspect-ratio:3/4;object-fit:cover;margin-bottom:var(--sp-14)}
.staff h3{font-weight:700;font-size:var(--fs-15);letter-spacing:var(--ls-20)}
.staff .jp{font-size:var(--fs-12);color:var(--b-60);margin-bottom:var(--sp-8)}
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.tags li{font-size:var(--fs-10);border:1px solid var(--b);padding:var(--sp-1) var(--sp-8);letter-spacing:var(--ls-10);line-height:var(--lh-170)}
.bg-b .tags li{border-color:var(--w)}

/* ==========================================================
   CASE : 部位ボタンで切替（全パネルはHTMLに存在＝SEO上クロール可）
   ========================================================== */
.case-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-10);justify-content:center;margin:calc(-1 * var(--sp-24)) 0 var(--sp-56)}
.case-tabs a{flex:0 0 calc((100% - 60px)/7);min-width:0;border:1px solid var(--b);background:var(--w);color:var(--b);padding:var(--sp-11) var(--sp-4);font-size:var(--fs-12);font-weight:600;letter-spacing:var(--ls-6);text-align:center;line-height:var(--lh-150);transition:background .25s,color .25s}
.case-tabs a:hover{opacity:1;background:var(--b-05)}
.case-tabs a.is-active,.case-tabs a[aria-selected="true"]{background:var(--b);color:var(--w)}
.case-panel{padding:0 var(--sp-22)}
.case-panel h3{font-weight:700;font-size:var(--fs-18);letter-spacing:var(--ls-14);margin-bottom:var(--sp-22);display:flex;align-items:baseline;gap:var(--sp-16);border-bottom:1px solid var(--b);padding-bottom:var(--sp-12)}
.case img{width:100%;height:auto}
.case .case-ph{aspect-ratio:4/5;height:auto}
.case-info{display:grid;grid-template-columns:1fr 1.6fr 1.2fr;gap:0 var(--sp-32);margin-top:var(--sp-28);padding-top:var(--sp-18);border-top:1px solid var(--b-15);font-size:var(--fs-12);line-height:var(--lh-180)}
.case-info dt{font-weight:700;letter-spacing:var(--ls-10)}
.case-info dd{color:var(--b-60)}
.case-links{display:flex;gap:var(--sp-12);flex-wrap:wrap;justify-content:center;margin-top:var(--sp-36)}
.checks{max-width:640px;margin:var(--sp-72) auto 0;border-top:1px solid var(--b)}
.checks h3{padding:var(--sp-20) 0 var(--sp-8);font-weight:700;letter-spacing:var(--ls-20);text-align:center}
.checks li{padding:var(--sp-12) 0 var(--sp-12) var(--sp-34);border-bottom:1px solid var(--b-15);position:relative}
.checks li::before{content:"";position:absolute;left:6px;top:20px;width:12px;height:6px;border-left:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg)}

/* ---------- carousel（端なしループ。JSで前後に複製） ---------- */
.carousel{position:relative}
.car-track{display:flex;gap:var(--sp-20);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 calc((100% - 60px)/4);scroll-snap-align:start;min-width:0}
.carousel.photos .car-slide{flex-basis:calc((100% - 40px)/3)}
.carousel.photos img{width:100%;aspect-ratio:4/3;object-fit:cover}
.car-btn{position:absolute;top:calc(50% - 22px);width:44px;height:44px;border:1px solid var(--b);background:var(--w);color:var(--b);font-size:var(--fs-16);cursor:pointer;z-index:var(--z-2);transition:.3s;font-family:inherit}
.car-btn:hover{background:var(--b);color:var(--w)}
.car-btn.prev{left:-22px}.car-btn.next{right:-22px}
.bg-b .car-btn{border-color:var(--w);background:var(--b);color:var(--w)}
.bg-b .car-btn:hover{background:var(--w);color:var(--b)}


/* ---------- message / doctor ---------- */
.msg{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--sp-72);align-items:center}
.msg img{width:100%}
.msg h3{font-weight:700;font-size:var(--fs-18);letter-spacing:var(--ls-14);margin-bottom:var(--sp-22);line-height:var(--lh-180)}
.msg p{margin-bottom:var(--sp-14)}
.doctors{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-56)}
.doctor img{width:100%;aspect-ratio:3/4;object-fit:cover;margin-bottom:var(--sp-22)}
.doctor .ph-box{aspect-ratio:3/4;height:auto;margin-bottom:var(--sp-22)}
.doctor .en{font-weight:700;font-size:var(--fs-13);letter-spacing:var(--ls-30)}
.doctor h3{font-weight:500;font-size:var(--fs-24);letter-spacing:var(--ls-20);margin:var(--sp-2) 0 var(--sp-14)}
.career{font-size:var(--fs-12);line-height:var(--lh-190)}
.career dt{font-weight:700;margin-top:var(--sp-8)}
.career dd{color:var(--b-60)}
.bg-b .career dd{color:var(--w-60)}

/* ---------- price ---------- */
.price-wrap{max-width:860px;margin:0 auto}
.price-row{display:flex;align-items:baseline;gap:var(--sp-16);padding:var(--sp-18) var(--sp-4);border-bottom:1px solid var(--b-15)}
.price-row.head{border-bottom:1px solid var(--b);font-size:var(--fs-11);font-weight:700;letter-spacing:var(--ls-20);padding-bottom:var(--sp-10)}
.price-row .name{flex:1}
.price-row .name small{display:block;font-size:var(--fs-11);color:var(--b-60)}
.price-row .times{width:70px;text-align:right;font-size:var(--fs-12)}
.price-row .yen{width:130px;text-align:right;font-weight:700;font-size:var(--fs-22);letter-spacing:var(--ls-4)}
.price-row .yen small{font-size:var(--fs-12);font-weight:400}
.note{font-size:var(--fs-11);margin-top:var(--sp-16);color:var(--b-60)}
.old{text-decoration:line-through;font-size:var(--fs-12);font-weight:400;margin-right:var(--sp-8);opacity:.55}

/* ---------- flow : 縦のタイムライン（線のみで順序を表現） ---------- */
.flow{max-width:820px;margin:0 auto}
.flow li{display:grid;grid-template-columns:84px 1fr;gap:var(--sp-32);position:relative;padding-bottom:var(--sp-44)}
.flow li:last-child{padding-bottom:0}
.flow li::before{content:"";position:absolute;left:41px;top:84px;bottom:0;width:1px;background:var(--w)}
.flow li:last-child::before{display:none}
.flow .dot{width:84px;height:84px;border:1px solid var(--w);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-28);line-height:var(--lh-100);background:var(--b);position:relative;z-index:var(--z-1)}
.flow .dot small{font-size:var(--fs-9);letter-spacing:var(--ls-30);margin-bottom:var(--sp-4);font-weight:600}
.flow .body{padding-top:var(--sp-8)}
.flow h3{font-weight:700;font-size:var(--fs-18);letter-spacing:var(--ls-14);margin-bottom:var(--sp-8)}
.flow p{font-size:var(--fs-13);line-height:var(--lh-190);opacity:.8}

/* ---------- faq ---------- */
.faq{max-width:860px;margin:0 auto;border-top:1px solid var(--b)}
.faq details{border-bottom:1px solid var(--b);padding:var(--sp-22) var(--sp-4)}
.faq summary{cursor:pointer;list-style:none;display:flex;gap:var(--sp-18);font-weight:600;font-size:var(--fs-15);letter-spacing:var(--ls-8)}
.faq summary::-webkit-details-marker{display:none}
.faq summary>.faq-q{flex:1;min-width:0}
.faq summary::before{content:"Q";font-weight:700;font-size:var(--fs-20);line-height:var(--lh-140)}
.faq summary::after{content:"+";margin-left:auto;font-size:var(--fs-22);line-height:var(--lh-120)}
.faq details[open] summary::after{content:"−"}
.faq .a{margin:var(--sp-14) 0 0 var(--sp-34);font-size:var(--fs-13);white-space:pre-line}

/* ---------- promises : BIANCA REASONS 風 ---------- */
.reasons{border-top:1px solid var(--b)}
.reason{display:grid;grid-template-columns:150px 1fr 320px;gap:var(--sp-48);align-items:center;padding:var(--sp-56) 0;border-bottom:1px solid var(--b)}
.reason .rno{font-weight:300;font-size:var(--fs-fluid-14);line-height:var(--lh-100);letter-spacing:var(--ls-2)}
.reason .ren{font-weight:600;font-size:var(--fs-12);letter-spacing:var(--ls-30);text-transform:uppercase;margin-bottom:var(--sp-10)}
.reason h3{font-weight:700;font-size:var(--fs-fluid-5);letter-spacing:var(--ls-12);margin-bottom:var(--sp-18);line-height:var(--lh-160)}
.reason .rimg img{width:100%;height:auto}


/* ---------- profile / news ---------- */
.profile-wrap{max-width:860px;margin:0 auto}
.profile-wrap dl.info dt,.profile-wrap dl.info dd{border-bottom-color:var(--b-15)}
.news{max-width:900px;margin:0 auto;border-top:1px solid var(--b)}
.news li{display:grid;grid-template-columns:120px 1fr;gap:var(--sp-24);padding:var(--sp-20) var(--sp-4);border-bottom:1px solid var(--b-15)}
.news time{font-weight:700;font-size:var(--fs-12);letter-spacing:var(--ls-10)}
.news b{font-weight:600}
.news p{font-size:var(--fs-12);color:var(--b-60);margin-top:var(--sp-4)}
.news a{text-decoration:underline}

@media (max-width:1100px){
  .staff-grid{grid-template-columns:repeat(3,1fr)}
  .derma-grid{grid-template-columns:repeat(2,1fr)}
  .car-slide{flex-basis:calc((100% - 40px)/3)}
  .reason{grid-template-columns:110px 1fr 240px;gap:var(--sp-32)}
  .part{grid-template-columns:240px 1fr 140px;gap:var(--sp-28)}
}
@media (max-width:768px){
  section{padding:var(--sp-76) 0}
  .fv{min-height:560px;height:92svh}
  .fv-copy{padding:0 var(--sp-20) var(--sp-56)}
  .fv-en{font-size:var(--fs-fluid-10);letter-spacing:var(--ls-4)}
  .fv-catch{font-size:var(--fs-17);margin-top:var(--sp-18);letter-spacing:var(--ls-14)}
  .fv h1{font-size:var(--fs-10);letter-spacing:var(--ls-10);line-height:var(--lh-180)}
  .fv-btns{margin-top:var(--sp-24)}
  .fv-btns .btn{padding:var(--sp-14) var(--sp-12);flex:1;min-width:0;font-size:var(--fs-10);letter-spacing:var(--ls-6)}
  .fv .scroll{display:none}
  .notice-bar{font-size:var(--fs-12);letter-spacing:var(--ls-6);padding:var(--sp-14) var(--sp-16);line-height:var(--lh-160)}
  .camp{padding-top:var(--sp-48)}
  .camp-btns .btn{width:100%}
  .page-hero{padding:var(--sp-110) 0 var(--sp-50)}
  .part{grid-template-columns:1fr;gap:var(--sp-14);padding:var(--sp-26) 0}
  .part .btn{justify-self:start}
  .two,.msg,.doctors{grid-template-columns:1fr;gap:var(--sp-36)}
  .staff-grid,.derma-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-24) var(--sp-12)}
  .staff .tags li{font-size:var(--fs-9);padding:0 var(--sp-6)}
  .case-tabs{margin:calc(-1 * var(--sp-12)) 0 var(--sp-36);gap:var(--sp-8)}
  .case-tabs a{flex-basis:calc((100% - 8px)/2);padding:var(--sp-11) var(--sp-4);font-size:var(--fs-11)}
  .case-panel{padding:0}
  .car-slide{flex:0 0 72%}
  .carousel.photos .car-slide{flex-basis:84%}
  .car-track{gap:var(--sp-14)}
  .car-btn{display:none}
  .reason{grid-template-columns:1fr;gap:var(--sp-18);padding:var(--sp-40) 0}
  .reason .rno{font-size:var(--fs-56)}
  .flow li{grid-template-columns:60px 1fr;gap:var(--sp-18);padding-bottom:var(--sp-36)}
  .flow .dot{width:60px;height:60px;font-size:var(--fs-20)}
  .flow .dot small{font-size:var(--fs-7);margin-bottom:var(--sp-2)}
  .flow li::before{left:29px;top:60px}
  .flow h4{font-size:var(--fs-16)}
  .doctors{gap:var(--sp-44)}
  .news li{grid-template-columns:1fr;gap:var(--sp-4)}
  .price-row{flex-wrap:wrap}
  .price-row .name{flex-basis:100%}
  .price-row .times{width:auto}
  .price-row .yen{margin-left:auto;width:auto;font-size:var(--fs-19)}
}

/* ---------- v4 追加 ---------- */
.camp-btns .btn{min-width:260px}
.staff{display:block}
.staff .more-link{display:block;margin-top:var(--sp-10);font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-8);text-decoration:underline;text-underline-offset:3px}
.staff:hover .more-link{opacity:.6}
.more-wrap{text-align:center;margin-top:var(--sp-64)}
.derma-cat{margin:var(--sp-72) 0 var(--sp-28);padding-bottom:var(--sp-12);border-bottom:1px solid var(--b)}
.derma-cat:first-of-type{margin-top:0}
.derma-cat h3{font-weight:700;font-size:var(--fs-20);letter-spacing:var(--ls-14)}
.derma-cat p{font-size:var(--fs-12);color:var(--b-60);margin-top:var(--sp-4)}
.derma-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-40) var(--sp-28)}
.derma{display:flex;flex-direction:column}
.derma img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:var(--sp-16)}
.derma .en{font-weight:700;font-size:var(--fs-11);letter-spacing:var(--ls-30)}
.derma h4{font-weight:600;font-size:var(--fs-16);letter-spacing:var(--ls-10);margin:var(--sp-2) 0 var(--sp-6)}
.derma .cat{font-size:var(--fs-12);color:var(--b-60);line-height:var(--lh-180);margin-bottom:var(--sp-10)}
.derma .pr{margin-top:auto;font-weight:700;font-size:var(--fs-24);letter-spacing:var(--ls-4)}
.derma .pr small{font-size:var(--fs-11);font-weight:400}
.derma .pnote{font-size:var(--fs-11);color:var(--b-60)}
.derma .btn{margin-top:var(--sp-14);align-self:flex-start}
@media (max-width:1100px){
  .case-tabs a{flex-basis:calc((100% - 30px)/4)}
  .derma-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .camp-btns .btn{min-width:0}
  .derma-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-28) var(--sp-12)}
  .derma .pr{font-size:var(--fs-20)}
  .derma-cat{margin-top:var(--sp-56)}
}
@media (max-width:768px){
  .case-tabs a{flex-basis:calc((100% - 8px)/2)}
}

@media (max-width:768px){
  .case-info{grid-template-columns:1fr;gap:var(--sp-12)}
}

/* v5 : 画像差し替え対応 */
.fv-media picture{display:block;width:100%;height:100%}
.car-track{align-items:flex-start}

/* ===== 部位別LP ===== */
.fv-lp{height:92vh;min-height:640px}
.fv-lp .fv-en{font-size:var(--fs-fluid-12)}
.fv-chips{display:flex;flex-wrap:wrap;gap:var(--sp-12);margin-top:var(--sp-26)}
.fv-chips li{border:1px solid var(--w);padding:var(--sp-8) var(--sp-18);line-height:var(--lh-150);backdrop-filter:blur(2px);background:var(--b-25)}
.fv-chips small{display:block;font-size:var(--fs-10);letter-spacing:var(--ls-20);opacity:.85}
.fv-chips b{font-size:var(--fs-fluid-1);font-weight:700;letter-spacing:var(--ls-6)}
.solve{text-align:center;font-weight:700;font-size:var(--fs-fluid-2);letter-spacing:var(--ls-10);margin-top:var(--sp-48)}
.lp-info{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-18) var(--sp-32)}
.lp-info dd{white-space:pre-line}
.reason .ren{margin-bottom:var(--sp-6)}
.reason .rbody p{font-size:var(--fs-14)}
.tech{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-24);margin-top:var(--sp-28)}
.tech-item img{width:100%;aspect-ratio:3/1;object-fit:contain;background:var(--w);border:1px solid var(--b-15);margin-bottom:var(--sp-10);padding:var(--sp-8)}
.tech-item h3{font-weight:700;font-size:var(--fs-15);letter-spacing:var(--ls-20)}
.tech-item p{font-size:var(--fs-12);color:var(--b-60);line-height:var(--lh-180)}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-20);margin-bottom:var(--sp-64)}
.points li{border:1px solid var(--w);padding:var(--sp-28) var(--sp-18);text-align:center;font-weight:600;letter-spacing:var(--ls-8);line-height:var(--lh-180)}
.mens-sub{font-weight:700;font-size:var(--fs-18);letter-spacing:var(--ls-20);text-align:center;margin-bottom:var(--sp-28)}
.mens-cases{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-16)}
.mens-cases img{width:100%;height:auto}
.other-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-20)}
.other-card{display:block}
.other-card img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:var(--sp-10);transition:opacity .3s}
.other-card span{font-weight:700;font-size:var(--fs-13);letter-spacing:var(--ls-12)}
.other-card:hover{opacity:1}.other-card:hover img{opacity:.7}
@media (max-width:1100px){.mens-cases,.other-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){
  .fv-lp{height:92svh;min-height:600px}
  .fv-chips{gap:var(--sp-8);margin-top:var(--sp-18)}
  .fv-chips li{padding:var(--sp-6) var(--sp-12)}
  .points{grid-template-columns:1fr;gap:var(--sp-12)}
  .mens-cases{grid-template-columns:repeat(2,1fr);gap:var(--sp-10)}
  .other-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-16) var(--sp-12)}
  .tech{grid-template-columns:1fr}
}
.price-row.head .yen{font-size:var(--fs-11);letter-spacing:var(--ls-20)}

/* 院長のみ：写真＋経歴の2カラム */
.doctor-one{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--sp-72);align-items:center;max-width:960px;margin:0 auto}
.doctor-one img{width:100%;aspect-ratio:3/4;object-fit:cover}
.doctor-one h3{font-weight:500;font-size:var(--fs-28);letter-spacing:var(--ls-20);margin:var(--sp-4) 0 var(--sp-22)}
.doctor-one .career{font-size:var(--fs-13)}
@media (max-width:768px){.doctor-one{grid-template-columns:1fr;gap:var(--sp-28)}}

/* ===== 料金一覧ページ ===== */
.price-sec{padding:var(--sp-70) 0}
.ptitle{font-weight:700;font-size:var(--fs-20);letter-spacing:var(--ls-14);margin-bottom:var(--sp-18);padding-bottom:var(--sp-12);border-bottom:1px solid var(--b)}
.ptitle span{display:block;font-size:var(--fs-11);letter-spacing:var(--ls-30);color:var(--b-60);margin-bottom:var(--sp-2)}
.ptable-wrap{overflow-x:auto}
.ptable{width:100%;border-collapse:collapse;font-size:var(--fs-14)}
.ptable th{font-size:var(--fs-11);font-weight:700;letter-spacing:var(--ls-20);text-align:left;padding:var(--sp-10) var(--sp-12);border-bottom:1px solid var(--b)}
.ptable td{padding:var(--sp-16) var(--sp-12);border-bottom:1px solid var(--b-15);vertical-align:top;line-height:var(--lh-170)}
.ptable td:last-child,.ptable th:last-child{text-align:right;white-space:nowrap}
.ptable td:last-child{font-weight:700;font-size:var(--fs-18)}
.ptable.simple td:last-child{font-size:var(--fs-18)}
.price-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-10);margin:var(--sp-24) 0 0}
.price-nav a{flex:none;width:100%;padding:var(--sp-10) var(--sp-6);font-size:var(--fs-12);display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;line-height:var(--lh-140)}
.ptable th{white-space:nowrap}.ptable td:nth-child(3){white-space:nowrap}

/* 料金表：列幅を揃えて縦書き化を防ぐ（モバイルもPCと同じ表） */
.ptable td:first-child,.ptable th:first-child{width:42%}
.ptable td:nth-child(2),.ptable th:nth-child(2){min-width:5.5em;word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:1100px){.price-nav{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){
  .price-sec{padding:var(--sp-48) 0}
  .price-nav{grid-template-columns:repeat(2,1fr);gap:var(--sp-8)}
  .price-nav a{font-size:var(--fs-11);padding:var(--sp-8) var(--sp-4);min-height:44px}
  .ptable{font-size:var(--fs-12)}
  .ptable th{font-size:var(--fs-10);letter-spacing:var(--ls-5);padding:var(--sp-8) var(--sp-6)}
  .ptable td{padding:var(--sp-12) var(--sp-6)}
  .ptable td:last-child{font-size:var(--fs-14)}
  .ptable td:first-child,.ptable th:first-child{width:38%}
  .ptable td:nth-child(2),.ptable th:nth-child(2){min-width:4.5em}
  .ptable.simple td:last-child{font-size:var(--fs-15)}
}

/* FVボタン：2行表示 */
.btn-2line{display:inline-flex;flex-direction:column;gap:0;padding:var(--sp-11) var(--sp-36);line-height:var(--lh-150)}
.btn-2line span:first-child{font-size:var(--fs-11);letter-spacing:var(--ls-14)}
@media (max-width:768px){.fv-btns .btn-2line{padding:var(--sp-10) var(--sp-8)}}

/* FVボタン：PCはMAIL、モバイルは電話（2行）。当日予約OKバーはPCのみ表示 */
.fv-sp{display:none!important}
@media (max-width:768px){
  .fv-pc{display:none!important}
  .fv-sp{display:inline-flex!important}
  .notice-bar{display:none}
}

/* ARTMAKEメニュー：ボタン文言が長くなったため幅を広げる */
.part{grid-template-columns:300px 1fr minmax(210px,auto)}
.part .btn{white-space:nowrap}
@media (max-width:1100px){.part{grid-template-columns:240px 1fr}.part .btn{grid-column:2;justify-self:start}}
@media (max-width:768px){.part{grid-template-columns:1fr}.part .btn{grid-column:auto;white-space:normal}}

/* ===== SEO対応で追加: 料金table / 施術後の注意事項 / 地域テキスト ===== */
.price-simple{margin:0 auto}
.price-simple th{white-space:nowrap}
.price-simple td:nth-child(2){text-align:right;font-size:var(--fs-12);width:90px;white-space:nowrap}
.price-simple td:first-child{width:auto}
.price-simple td:last-child{font-size:var(--fs-20)}
.price-simple td small{font-size:var(--fs-12);font-weight:400}
.area-text{margin-top:var(--sp-8);padding-top:var(--sp-18);border-top:1px solid var(--b-15);font-size:var(--fs-13);line-height:var(--lh-200)}
.aftercare{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-64)}
.aftercare h3{font-weight:700;font-size:var(--fs-16);letter-spacing:var(--ls-14);margin-bottom:var(--sp-18);padding-bottom:var(--sp-10);border-bottom:1px solid var(--b)}
.timeline>div{padding:var(--sp-14) 0;border-bottom:1px solid var(--b-15)}
.timeline dt{font-weight:700;letter-spacing:var(--ls-8);margin-bottom:var(--sp-2)}
.timeline dd{font-size:var(--fs-13);color:var(--b-60);line-height:var(--lh-190)}
.caution{border:1px solid var(--b);padding:var(--sp-24) var(--sp-26);background:var(--w)}
.caution-title{font-weight:700;letter-spacing:var(--ls-10);margin-bottom:var(--sp-12)}
.caution li{padding:var(--sp-7) 0 var(--sp-7) var(--sp-22);position:relative;font-size:var(--fs-13);border-bottom:1px solid var(--b-15)}
.caution li:last-child{border-bottom:0}
.caution li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:1px;background:var(--b)}
@media (max-width:768px){.aftercare{grid-template-columns:1fr;gap:var(--sp-40)}.price-simple td:last-child{font-size:var(--fs-16)}.price-simple td:nth-child(2){width:auto}}

/* 医療アートメイクとは：01・02 */
.about-points{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-28);margin-top:var(--sp-56);border-top:1px solid var(--b);padding-top:var(--sp-36)}
.about-points .no{font-weight:300;font-size:var(--fs-44);line-height:var(--lh-100);display:block;margin-bottom:var(--sp-8)}
.about-points h3{font-weight:700;font-size:var(--fs-17);letter-spacing:var(--ls-10);margin-bottom:var(--sp-8)}
.about-points p{font-size:var(--fs-13)}
.camp-sp{display:none}
.camp-sp-only{display:none}
@media (max-width:768px){
  .about-points{grid-template-columns:1fr;gap:var(--sp-24);margin-top:var(--sp-40)}
  .camp-sp{display:inline-block}
  .camp-sp-only{display:block}
  .camp-btns{flex-direction:column;align-items:stretch}
}
.about-points{list-style:none;padding-left:0}

/* 実績（口コミ件数・評価） */
.track-record{display:flex;align-items:center;gap:var(--sp-48);margin-top:var(--sp-64);padding-top:var(--sp-40);border-top:1px solid var(--w-20)}
.tr-num small{display:block;font-size:var(--fs-11);letter-spacing:var(--ls-30);opacity:.7}
.tr-num b{font-weight:300;font-size:var(--fs-fluid-11);line-height:var(--lh-110);letter-spacing:var(--ls-2)}
.tr-num b span{font-size:var(--fs-16);margin-left:var(--sp-6)}
.track-record p{font-size:var(--fs-13);max-width:420px;opacity:.85}
@media (max-width:768px){.track-record{flex-wrap:wrap;gap:var(--sp-20) var(--sp-32);margin-top:var(--sp-40)}.track-record p{flex-basis:100%;max-width:none}}

.tr-note{flex-basis:100%;font-size:var(--fs-11);opacity:.6;margin:calc(-1 * var(--sp-24)) 0 0}
.choose-list{max-width:860px;margin:0 auto;border-top:1px solid var(--b);counter-reset:c;list-style:none}
.choose-list li{counter-increment:c;padding:var(--sp-20) var(--sp-4) var(--sp-20) var(--sp-56);border-bottom:1px solid var(--b-15);position:relative}
.choose-list li::before{content:counter(c,decimal-leading-zero);position:absolute;left:0;top:18px;font-weight:300;font-size:var(--fs-30);line-height:var(--lh-100)}
.choose-list b{display:block;font-size:var(--fs-15);letter-spacing:var(--ls-6)}
.choose-list span{display:block;font-size:var(--fs-13);color:var(--b-60);line-height:var(--lh-190);margin-top:var(--sp-2)}

/* 眉LP：お悩みのチェックの視認性を高める（丸いチェックマーク・太字） */
.checks-bold li{padding:var(--sp-16) 0 var(--sp-16) var(--sp-50);font-weight:600;font-size:var(--fs-15)}
.checks-bold li::before{left:4px;top:16px;width:26px;height:26px;border:1px solid var(--b);border-radius:50%;background:var(--b);transform:none}
.checks-bold li::after{content:"";position:absolute;left:12px;top:23px;width:11px;height:6px;border-left:2px solid var(--w);border-bottom:2px solid var(--w);transform:rotate(-45deg)}
.mens-ph{aspect-ratio:3/4;height:auto}

.mparts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-24)}
.mpart{border:1px solid var(--b);padding:var(--sp-28) var(--sp-24);background:var(--w);display:flex;flex-direction:column;gap:var(--sp-10)}
.mpart h3{font-weight:700;font-size:var(--fs-18);letter-spacing:var(--ls-10)}
.mpart p{font-size:var(--fs-13);line-height:var(--lh-190)}
.mp-price{font-size:var(--fs-12);font-weight:700;margin-top:auto;padding-top:var(--sp-8);border-top:1px solid var(--b-15)}
.mpart .btn{align-self:flex-start}
@media (max-width:768px){.mparts{grid-template-columns:1fr}}

/* 実績の数字：「3,000」と「件超」を横並びに（PC。モバイルは従来どおり） */
.tr-num b{display:inline-flex;align-items:baseline;white-space:nowrap}
.tr-num b span{white-space:nowrap}

/* FOR MEN の症例カルーセル：旧グリッド用の指定を打ち消し、症例と同じ見た目に */
.mens-carousel{display:block}
.mens-carousel .case img{width:100%;height:auto;margin:0}
.mens-carousel .car-slide{flex:0 0 calc((100% - 60px)/4)}
@media (max-width:1100px){.mens-carousel .car-slide{flex-basis:calc((100% - 40px)/3)}}
@media (max-width:768px){.mens-carousel .car-slide{flex:0 0 72%}}

/* ===== /beauty/ 美容皮膚科 ===== */
.bw-list{max-width:860px;margin:0 auto;border-top:1px solid var(--b)}
.bw-item{border-bottom:1px solid var(--b-15)}
.bw-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;padding:var(--sp-18) var(--sp-4);font-weight:600;letter-spacing:var(--ls-8)}
.bw-item summary::-webkit-details-marker{display:none}
.bw-item summary::after{content:"+";font-size:var(--fs-20);line-height:var(--lh-100)}
.bw-item[open] summary::after{content:"−"}
.bw-links{display:flex;flex-wrap:wrap;gap:var(--sp-8);padding:0 var(--sp-4) var(--sp-20)}
.bw-links a{border:1px solid var(--b);padding:var(--sp-6) var(--sp-14);font-size:var(--fs-12);background:var(--w)}
.bw-links a:hover{background:var(--b);color:var(--w);opacity:1}
.bt-cat{padding:var(--sp-100) 0 var(--sp-40)}
.bt-card{display:grid;grid-template-columns:340px 1fr;gap:var(--sp-48);padding:var(--sp-56) 0;border-top:1px solid var(--b)}
.bt-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;position:sticky;top:96px}
.bt-name h3{font-weight:700;font-size:var(--fs-26);letter-spacing:var(--ls-10);display:inline}
.bt-name span{font-weight:700;font-size:var(--fs-11);letter-spacing:var(--ls-30);margin-left:var(--sp-14)}
.bt-catch{font-weight:600;font-size:var(--fs-15);margin:var(--sp-10) 0 var(--sp-8)}
.bt-desc{font-size:var(--fs-13);color:var(--b-60)}
.bt-sub{margin-top:var(--sp-28)}
.bt-sub h4{font-weight:700;font-size:var(--fs-13);letter-spacing:var(--ls-20);margin-bottom:var(--sp-10);padding-bottom:var(--sp-6);border-bottom:1px solid var(--b-15)}
.bt-effects{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.bt-effects li{border:1px solid var(--b);padding:var(--sp-3) var(--sp-12);font-size:var(--fs-12)}
.bt-effects li::before{content:"✓ ";font-weight:700}
.bt-menu>div{display:grid;grid-template-columns:200px 1fr;gap:var(--sp-16);padding:var(--sp-10) 0;border-bottom:1px solid var(--b-15)}
.bt-menu dt{font-weight:700;font-size:var(--fs-13)}
.bt-menu dd{font-size:var(--fs-12);color:var(--b-60)}
.bt-price td:last-child,.bt-price th:last-child{text-align:right}
.bt-price td{font-size:var(--fs-13)}
.bt-price td:last-child{font-size:var(--fs-16)}
.bt-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--sp-28);border:1px solid var(--b)}
.bt-quick>div{padding:var(--sp-12) var(--sp-14);border-right:1px solid var(--b-15)}
.bt-quick>div:last-child{border-right:0}
.bt-quick small{display:block;font-size:var(--fs-10);letter-spacing:var(--ls-20);color:var(--b-60)}
.bt-quick b{font-size:var(--fs-13);font-weight:600}
.bt-details{margin-top:var(--sp-18);border:1px solid var(--b-15)}
.bt-details summary{cursor:pointer;padding:var(--sp-12) var(--sp-16);font-weight:600;font-size:var(--fs-13);list-style:none;display:flex;justify-content:space-between}
.bt-details summary::-webkit-details-marker{display:none}
.bt-details summary::after{content:"+"}
.bt-details[open] summary::after{content:"−"}
.bt-details dl{padding:0 var(--sp-16) var(--sp-16);display:grid;grid-template-columns:130px 1fr;gap:var(--sp-8) var(--sp-16);font-size:var(--fs-12)}
.bt-details dt{font-weight:700}
.bt-details ul li::before{content:"・"}
.bt-cta{display:flex;gap:var(--sp-10);flex-wrap:wrap;margin-top:var(--sp-28)}
.bt-compare{margin-bottom:var(--sp-64)}
.bt-compare h3{font-weight:700;font-size:var(--fs-20);letter-spacing:var(--ls-14);margin-bottom:var(--sp-16)}
.cmp th,.cmp td{text-align:center!important;font-size:var(--fs-13)!important;font-weight:400;white-space:normal!important;padding:var(--sp-10) var(--sp-8)}
.cmp th[scope="row"]{text-align:left!important;font-weight:600}
.cmp tr.grp th{background:var(--b-05);text-align:left!important;font-size:var(--fs-11)!important;letter-spacing:var(--ls-20);font-weight:700}
.cmp td:last-child{font-size:var(--fs-13)!important;font-weight:400!important}
@media (max-width:1100px){.bt-card{grid-template-columns:1fr;gap:var(--sp-24)}.bt-photo img{position:static;max-width:460px}}
@media (max-width:768px){
  .bt-cat{padding:var(--sp-70) 0 var(--sp-20)}.bt-card{padding:var(--sp-40) 0}
  .bt-name h3{font-size:var(--fs-22)}.bt-menu>div{grid-template-columns:1fr;gap:var(--sp-2)}
  .bt-quick{grid-template-columns:repeat(2,1fr)}.bt-quick>div:nth-child(2){border-right:0}.bt-quick>div:nth-child(-n+2){border-bottom:1px solid var(--b-15)}
  .bt-details dl{grid-template-columns:1fr;gap:var(--sp-2) 0}.bt-details dt{margin-top:var(--sp-8)}
  .cmp th,.cmp td{font-size:var(--fs-11)!important;padding:var(--sp-8) var(--sp-4)}
}

.cmp thead th{border-bottom:1px solid var(--b)}
.cmp tbody th[scope="row"],.cmp tbody td{border-bottom:1px solid var(--b-15)}
.cmp tr.grp th{border-bottom:0;border-top:1px solid var(--b)}

.camp-inline{justify-content:center;margin:0}
.camp-inline .btn{min-width:260px}
@media (max-width:768px){.camp-inline .btn{width:100%;min-width:0}}

.bt-tax{margin-top:var(--sp-32);font-size:var(--fs-12)}

/* ===== スタッフ一覧 ===== */
.st-fee{margin-top:var(--sp-24);padding-top:var(--sp-18);border-top:1px solid var(--b-15)}
.st-fee small{display:block;font-size:var(--fs-11);letter-spacing:var(--ls-20);color:var(--b-60)}
.st-fee b{font-size:var(--fs-32);font-weight:700;letter-spacing:var(--ls-4)}
.st-fee b span{font-size:var(--fs-12);font-weight:400;margin-left:var(--sp-4)}
.st-nav{grid-template-columns:repeat(6,1fr);margin:0 0 var(--sp-56)}
.st-card{background:var(--w);padding:var(--sp-44) var(--sp-40);margin-bottom:var(--sp-32)}
.st-head{display:grid;grid-template-columns:260px 1fr;gap:var(--sp-40);align-items:start;margin-bottom:var(--sp-32)}
.st-photo{width:100%;aspect-ratio:3/4;object-fit:cover}
.st-prof h3{font-weight:700;font-size:var(--fs-26);letter-spacing:var(--ls-20)}
.st-prof h3 span{font-size:var(--fs-14);font-weight:500;letter-spacing:var(--ls-10);margin-left:var(--sp-14)}
.st-qual{font-size:var(--fs-12);color:var(--b-60);margin:var(--sp-6) 0 var(--sp-16)}
.st-tags small{display:block;font-size:var(--fs-11);font-weight:700;letter-spacing:var(--ls-20);margin-bottom:var(--sp-6)}
.st-comment{margin:var(--sp-18) 0 var(--sp-20);font-size:var(--fs-14);line-height:var(--lh-200)}
.st-cases-title{font-weight:700;font-size:var(--fs-13);letter-spacing:var(--ls-30);margin-bottom:var(--sp-14);padding-bottom:var(--sp-8);border-bottom:1px solid var(--b)}
.st-cases-title span{font-size:var(--fs-11);font-weight:400;letter-spacing:var(--ls-10);margin-left:var(--sp-12);color:var(--b-60)}
.st-card .car-slide{flex-basis:calc((100% - 100px)/6)}
/* ===== 求人 ===== */
.recruit-about{max-width:860px;margin:0 auto}
.recruit-about p{margin-bottom:var(--sp-16)}
.rq-table th{width:28%;text-align:left!important;font-size:var(--fs-13)!important;letter-spacing:var(--ls-8);font-weight:700;padding:var(--sp-18) var(--sp-12);border-bottom:1px solid var(--b-15);vertical-align:top}
.rq-table td{text-align:left!important;font-size:var(--fs-14)!important;font-weight:400!important;white-space:normal!important;padding:var(--sp-18) var(--sp-12);line-height:var(--lh-190)}
/* ===== フォームページ（中身は本番フォームのCSS=form-prod.css） ===== */
.form-page{padding:var(--sp-60) 0 var(--sp-100)}
.form-page .form-data{max-width:960px;margin:0 auto}
@media (max-width:1100px){.st-nav{grid-template-columns:repeat(4,1fr)}.st-card .car-slide{flex-basis:calc((100% - 60px)/4)}}
@media (max-width:768px){
  .st-nav{grid-template-columns:repeat(3,1fr)}
  .st-card{padding:var(--sp-28) var(--sp-18)}
  .st-head{grid-template-columns:1fr;gap:var(--sp-20)}
  .st-photo{max-width:260px}
  .st-card .car-slide{flex:0 0 46%}
  .rq-table th,.rq-table td{display:block;width:100%;padding:var(--sp-10) var(--sp-4)}
  .rq-table th{border-bottom:0;padding-top:var(--sp-16)}
}
/* スタッフ写真：医師紹介（.doctor-one）の写真と同じ表示幅にそろえる（PC 約355px／SP 画面幅） */
.st-head{grid-template-columns:min(355px,38%) 1fr}
/* 症例：PCはカルーセル、SPは3×2のグリッド（タップで拡大） */
.st-grid{display:none}
.st-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.st-zoom img{width:100%;aspect-ratio:3/4;object-fit:cover}
.lb{position:fixed;inset:0;z-index:var(--z-100);background:var(--b-92);display:flex;align-items:center;justify-content:center;padding:var(--sp-56) var(--sp-16)}
.lb[hidden]{display:none!important}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb button{position:absolute;background:none;border:0;color:var(--w);font-size:var(--fs-26);line-height:var(--lh-100);width:48px;height:48px;cursor:pointer;font-family:inherit}
.lb .lb-close{top:8px;right:8px;font-size:var(--fs-32)}
.lb .lb-prev{left:4px;top:50%;transform:translateY(-50%)}
.lb .lb-next{right:4px;top:50%;transform:translateY(-50%)}
.lb .lb-count{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:var(--w);font-size:var(--fs-12);letter-spacing:var(--ls-20)}
@media (max-width:768px){
  .st-head{grid-template-columns:1fr}
  .st-head .st-photo{width:calc(100% + 36px);max-width:none;margin:calc(-1 * var(--sp-28)) calc(-1 * var(--sp-18)) 0}
  .st-carousel{display:none}
  .st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
}
/* 予約・求人フォーム：案内文とフォームの間隔、見出し（ENTRY FORM）の線を消す */
.form-page .u-text-small + .Form{margin-top:var(--sp-40)}
.form-page .Form > p + table{margin-top:var(--sp-36)}
.form-page .l-basic-title::before{display:none!important}
.lb .lb-prev,.lb .lb-next{width:44px;height:44px;border-radius:50%;background:var(--b-55);font-size:var(--fs-20);z-index:var(--z-1)}
.form-page .hidden-fields-container{border:0;margin:0;padding:0}
/* ===== コラム（/column・カテゴリ） ===== */
.col-top{padding:var(--sp-40) 0 0}
.col-lead{font-size:var(--fs-14)}
.col-nav{margin:var(--sp-32) 0 0}
.col-nav a[aria-current="page"]{background:var(--b);color:var(--w)}
.col-content{padding:var(--sp-72) 0 var(--sp-110)}
.col-body{max-width:900px}
.col-h2{font-weight:700;font-size:var(--fs-22);letter-spacing:var(--ls-12);line-height:var(--lh-160);padding-bottom:var(--sp-14);border-bottom:1px solid var(--b);margin:var(--sp-72) 0 var(--sp-24)}
.col-body > .col-h2:first-child{margin-top:0}
.col-h3{font-weight:700;font-size:var(--fs-16);letter-spacing:var(--ls-8);margin:var(--sp-32) 0 var(--sp-14)}
.col-p{margin-bottom:var(--sp-20);line-height:var(--lh-210)}
.col-fig{margin:0 0 var(--sp-20)}
.col-toc{border:1px solid var(--b);padding:var(--sp-26) var(--sp-30);margin:var(--sp-32) 0 0}
.col-toc-title{font-weight:700;font-size:var(--fs-13);letter-spacing:var(--ls-24);margin-bottom:var(--sp-12)}
.col-toc ol{list-style:none;counter-reset:toc;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-32)}
.col-toc li{counter-increment:toc;font-size:var(--fs-14)}
.col-toc li a{display:flex;gap:var(--sp-12);padding:var(--sp-6) 0;border-bottom:1px solid var(--b-15)}
.col-toc li a::before{content:counter(toc,decimal-leading-zero);font-weight:700;font-size:var(--fs-12);line-height:var(--lh-200)}
.col-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-20);margin:var(--sp-28) 0 var(--sp-8)}
.col-cards a{display:block;height:100%;border:1px solid var(--b-15);background:var(--w)}
.col-cards .th{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--b-05)}
.col-cards .th img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.col-cards a:hover{opacity:1}.col-cards a:hover img{transform:scale(1.04)}
.col-cards .tt{display:block;padding:var(--sp-14) var(--sp-16) var(--sp-18);font-size:var(--fs-13);font-weight:600;line-height:var(--lh-175);letter-spacing:var(--ls-4)}
.col-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-20);margin:var(--sp-28) 0 var(--sp-8)}
.col-cats a{display:flex;flex-direction:column;height:100%;border:1px solid var(--b);padding:var(--sp-26) var(--sp-28);transition:background .3s,color .3s}
.col-cats a:hover{opacity:1;background:var(--b);color:var(--w)}
.col-cats .th{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--b-05);margin:calc(-1*var(--sp-26)) calc(-1*var(--sp-28)) var(--sp-18)}
.col-cats .th img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.col-cats a:hover .th img{transform:scale(1.04)}
.col-cat-note{margin-top:var(--sp-20)}
.col-cats h3{font-weight:700;font-size:var(--fs-17);letter-spacing:var(--ls-10);margin-bottom:var(--sp-10)}
.col-cats p{font-size:var(--fs-13);line-height:var(--lh-190);margin-bottom:var(--sp-16)}
.col-cats .col-cat-n{margin:0 0 var(--sp-8);font-size:var(--fs-12);font-weight:600;letter-spacing:var(--ls-8)}
.col-cats .more-link{margin-top:auto;font-size:var(--fs-12);font-weight:600;letter-spacing:var(--ls-8);text-decoration:underline;text-underline-offset:3px}
.col-gallery{display:flex;gap:var(--sp-10);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--sp-10);margin:var(--sp-8) 0 var(--sp-20)}
.col-gallery img{flex:0 0 180px;width:180px;aspect-ratio:3/4;object-fit:cover;scroll-snap-align:start}
.col-btn{text-align:center;margin:var(--sp-36) 0 var(--sp-8)}
.col-btn .btn{min-width:min(420px,100%)}
.col-faq{margin-top:var(--sp-8)}
.col-doctor{display:grid;grid-template-columns:240px 1fr;gap:var(--sp-36);align-items:start;margin-top:var(--sp-28)}
.col-doctor img{width:100%;aspect-ratio:3/4;object-fit:cover}
.col-doctor-name{font-weight:700;font-size:var(--fs-16);letter-spacing:var(--ls-10);line-height:var(--lh-190);margin-bottom:var(--sp-14)}
.col-archive{padding:var(--sp-110) 0}
.col-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-28)}
.col-list a{display:flex;flex-direction:column;height:100%;background:var(--w)}
.col-list a:hover{opacity:1}.col-list a:hover img{transform:scale(1.04)}
.col-list .th{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--b-05)}
.col-list .th img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.col-list .dt{display:flex;gap:var(--sp-14);padding:var(--sp-18) var(--sp-20) 0;font-size:var(--fs-11);letter-spacing:var(--ls-10);color:var(--b-60)}
.col-list h3{padding:var(--sp-8) var(--sp-20) 0;font-size:var(--fs-15);font-weight:700;line-height:var(--lh-170);letter-spacing:var(--ls-4)}
.col-list p{padding:var(--sp-10) var(--sp-20) var(--sp-22);font-size:var(--fs-12);line-height:var(--lh-190);color:var(--b-60)}
@media (max-width:1100px){.col-cards,.col-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){
  .col-top{padding-top:var(--sp-24)}
  .col-content{padding:var(--sp-48) 0 var(--sp-76)}
  .col-h2{font-size:var(--fs-18);margin-top:var(--sp-56)}
  .col-p{font-size:var(--fs-14)}
  .col-toc{padding:var(--sp-20) var(--sp-18)}
  .col-toc ol{grid-template-columns:1fr}
  .col-cards{grid-template-columns:1fr;gap:var(--sp-10)}
  .col-cards a{display:grid;grid-template-columns:112px 1fr;align-items:center}
  .col-cards .th{height:100%;aspect-ratio:auto;min-height:72px}
  .col-cards .tt{padding:var(--sp-10) var(--sp-14);font-size:var(--fs-12)}
  .col-cats{grid-template-columns:1fr;gap:var(--sp-12)}
  .col-cats a{padding:var(--sp-20)}
  .col-cats .th{margin:calc(-1*var(--sp-20)) calc(-1*var(--sp-20)) var(--sp-16)}
  .col-gallery img{flex-basis:140px;width:140px}
  .col-doctor{grid-template-columns:1fr;gap:var(--sp-20)}
  .col-archive{padding:var(--sp-76) 0}
  .col-list{grid-template-columns:1fr;gap:var(--sp-18)}
}
/* HOW TO CHOOSE：左に画像、右にチェックリスト（SPは画像が上） */
.choose-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sp-56);align-items:center;max-width:1080px;margin:0 auto}
.choose-img img{width:100%;height:auto}
.choose-img .ph-box{width:100%;aspect-ratio:4/5}
.choose-wrap .choose-list{max-width:none;margin:0}
@media (max-width:768px){.choose-wrap{grid-template-columns:1fr;gap:var(--sp-28)}}
/* ===== 症例一覧（/archives/case） ===== */
.cs-top{padding:var(--sp-40) 0 0}
.cs-lead{font-size:var(--fs-14);margin-bottom:var(--sp-36)}
.cs-filter{border:1px solid var(--b);padding:var(--sp-28) var(--sp-32);display:grid;gap:var(--sp-18)}
.cs-group{border:0;padding:0;margin:0;display:grid;grid-template-columns:120px 1fr;gap:var(--sp-12);align-items:start}
.cs-group legend{float:left;font-weight:700;font-size:var(--fs-12);letter-spacing:var(--ls-24);padding-top:var(--sp-8)}
.cs-group ul{display:flex;flex-wrap:wrap;gap:var(--sp-8);grid-column:2}
.cs-group label{display:block;cursor:pointer}
.cs-group input{position:absolute;opacity:0;pointer-events:none}
.cs-group span{display:block;border:1px solid var(--b-15);padding:var(--sp-7) var(--sp-14);font-size:var(--fs-12);letter-spacing:var(--ls-6);transition:background .2s,color .2s,border-color .2s}
.cs-group label:hover span{border-color:var(--b)}
.cs-group input:checked + span{background:var(--b);color:var(--w);border-color:var(--b)}
.cs-group input:focus-visible + span{outline:2px solid var(--b);outline-offset:2px}
.cs-filter-foot{display:flex;gap:var(--sp-10);justify-content:center;padding-top:var(--sp-6)}
.cs-filter.is-js .cs-apply{display:none}
.cs-count{margin-top:var(--sp-28);text-align:center;font-size:var(--fs-13);letter-spacing:var(--ls-10)}
.cs-count b{font-size:var(--fs-26);margin-right:var(--sp-4)}
.cs-list-sec{padding:var(--sp-36) 0 var(--sp-110)}
.cs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-28) var(--sp-20)}
.cs-item .st-zoom img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}  /* 症例画像は元ファイルの縦横比のまま */
.cs-meta{padding-top:var(--sp-12)}
.cs-menu{font-weight:700;font-size:var(--fs-13);letter-spacing:var(--ls-6);line-height:var(--lh-160)}
.cs-price{font-size:var(--fs-12);color:var(--b-60)}
.cs-artist{margin-top:var(--sp-6);font-size:var(--fs-11);color:var(--b-60);letter-spacing:var(--ls-6)}
.cs-artist span{margin-right:var(--sp-10)}
.cs-artist a{margin-left:var(--sp-8);text-decoration:underline;text-underline-offset:3px;color:var(--b)}
.cs-empty{text-align:center;padding:var(--sp-40) 0}
.cs-more-wrap{text-align:center;margin-top:var(--sp-48)}
.cs-more{min-width:min(360px,100%)}
.cs-info{margin-top:var(--sp-80);padding-top:var(--sp-40);border-top:1px solid var(--b)}
.cs-info-title{font-weight:700;font-size:var(--fs-18);letter-spacing:var(--ls-12);margin-bottom:var(--sp-20)}
.cs-info-table{width:100%;border-collapse:collapse;font-size:var(--fs-12);line-height:var(--lh-180)}
.cs-info-table th,.cs-info-table td{border-bottom:1px solid var(--b-15);padding:var(--sp-14) var(--sp-12);text-align:left;vertical-align:top}
.cs-info-table thead th{font-size:var(--fs-11);letter-spacing:var(--ls-14);border-bottom:1px solid var(--b);white-space:nowrap}
.cs-info-table tbody th{white-space:nowrap;font-weight:700}
.lb .lb-cap{position:absolute;bottom:44px;left:16px;right:16px;text-align:center;color:var(--w);font-size:var(--fs-11);line-height:var(--lh-170);opacity:.85}
@media (max-width:1100px){.cs-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){
  .cs-filter{padding:var(--sp-20) var(--sp-16)}
  .cs-group{grid-template-columns:1fr;gap:var(--sp-8)}
  .cs-group legend{float:none;padding:0}
  .cs-group ul{grid-column:1;gap:var(--sp-6)}
  .cs-group span{padding:var(--sp-6) var(--sp-10);font-size:var(--fs-11)}
  .cs-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-20) var(--sp-10)}
  .cs-menu{font-size:var(--fs-12)}
  .cs-list-sec{padding:var(--sp-28) 0 var(--sp-76)}
  .cs-info-table thead{display:none}
  .cs-info-table tr{display:block;border-bottom:1px solid var(--b-15);padding:var(--sp-12) 0}
  .cs-info-table th,.cs-info-table td{display:block;border:0;padding:var(--sp-2) 0}
  .cs-info-table td:nth-child(2)::before{content:"施術内容：";font-weight:700}
  .cs-info-table td:nth-child(3)::before{content:"料金：";font-weight:700}
  .cs-info-table td:nth-child(4)::before{content:"主な副作用・リスク：";font-weight:700}
}
.lb{padding-bottom:var(--sp-120)}

/* 01〜の画像（トップのPROMISES・各LPのABOUT）は、上の2カラム（.two）の画像と同じ横幅にする。縦横比はファイルのまま */
.reason{grid-template-columns:110px 1fr calc((100% - 80px)/2);gap:var(--sp-40)}
/* LPのFEATURE見出し：他のセクション見出しと同じ文字サイズ（2カラムの右側なので左寄せ） */
.feat-title{text-align:left;margin-bottom:var(--sp-28)}
@media (max-width:1100px){.reason{grid-template-columns:80px 1fr calc((100% - 80px)/2);gap:var(--sp-32)}}
@media (max-width:768px){.reason{grid-template-columns:1fr;gap:var(--sp-18)}}
/* 薬剤除去LPの症例：同じ方の1〜4回目の施術前/施術後（PCは2回分ずつ横並び、SPは1回分ずつ縦並び）。最後に経過まとめ画像 */
.pg{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-48) var(--sp-40)}
.pg-no{font-size:var(--fs-13);font-weight:700;letter-spacing:var(--ls-24);border-bottom:1px solid var(--b);padding-bottom:var(--sp-10);margin-bottom:var(--sp-16)}
.pg-no span{font-size:var(--fs-28);letter-spacing:var(--ls-6);margin-right:var(--sp-4)}
.pg-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
.pg figure,.pg-summary{margin:0}
.pg img,.pg-summary img{display:block;width:100%;height:auto}
.pg .ph-box{aspect-ratio:1/1;height:auto}
.pg figcaption,.pg-summary figcaption{margin-top:var(--sp-10);font-size:var(--fs-12);letter-spacing:var(--ls-14);text-align:center}
.pg-summary{max-width:720px;margin:var(--sp-72) auto 0}
.pg-summary .ph-box{aspect-ratio:3/2;height:auto}
.pg ~ .lp-info,.pg-summary + .lp-info{margin-top:var(--sp-56)}
@media (max-width:768px){
  .pg{grid-template-columns:1fr;gap:var(--sp-36)}
  .pg-summary{margin-top:var(--sp-48)}
  .pg-no span{font-size:var(--fs-24)}
}
.pg-pair figure,.pg-step{min-width:0}

/* ==========================================================
   ステップ 4 束 4-1: build.py の style= 直書きを置き換えた modifier（docs/components.md C-02・C-14）。
   値は直書き時と同じ。ファイル末尾に置き、同じ詳細度の部品 CSS（.center-txt・.note・.checks など）より後で効かせる
   ========================================================== */
/* C-02 Section の余白（section(space=…)） */
.sec--pt-50{padding-top:var(--sp-50)}
.sec--p-50-30{padding:var(--sp-50) 0 var(--sp-30)}
/* C-14 Text: 見出し直下のリード文を見出しへ 24px 寄せ、下に N px 空ける（旧 margin:-24px auto N / -24px 0 N。幅指定の無い .lead は auto と 0 が同じ） */
.txt--pull-24{margin:calc(-1 * var(--sp-24)) auto var(--sp-24)}
.txt--pull-40{margin:calc(-1 * var(--sp-24)) auto var(--sp-40)}
.txt--pull-48{margin:calc(-1 * var(--sp-24)) auto var(--sp-48)}
.txt--pull-56{margin:calc(-1 * var(--sp-24)) auto var(--sp-56)}
.txt--pull-64{margin:calc(-1 * var(--sp-24)) auto var(--sp-64)}
.txt--w-820{max-width:820px}
.note--fs-12{font-size:var(--fs-12)}
/* 単発の余白・文字指定 */
.u-mt-0{margin-top:0}
.u-mt-8{margin-top:var(--sp-8)}
.u-mt-18{margin-top:var(--sp-18)}
.u-mt-28{margin-top:var(--sp-28)}
.u-mt-36{margin-top:var(--sp-36)}
.u-mt-40{margin-top:var(--sp-40)}
.u-mt-48{margin-top:var(--sp-48)}
.u-mt-56{margin-top:var(--sp-56)}
.u-mt-80{margin-top:var(--sp-80)}
.u-mt-96{margin-top:var(--sp-96)}
.u-mb-48{margin-bottom:var(--sp-48)}
.u-fw-700{font-weight:700}
.u-underline{text-decoration:underline}
.relax-label{letter-spacing:var(--ls-30);font-weight:700}
