@charset "utf-8";
/* =========================================================================
article.css — PRP記事LP（外部メディア型）
医療痩身記事LP(medicaldiet-navi.com/article/)の article.css を踏襲。
ランキング用の .tbl-cmp は「治療法比較」用に転用。
Webフォントは使わずOS標準ゴシックで組む。
========================================================================= */
:root{
--key:#e60033; /* 赤（強調・CTA） */
--key-dark:#b3002a;
--key-shadow:#b94d4d;
--orange:#f39800;
--gray-bg:#f5f8fa;
--gray-bg2:#eef1f4;
--green-bg:#eaf5ea;
--border:#ccc;
--border-thin:#e5e5e5;
--text:#333;
--sub:#777;
--marker:#ff9;
--marker-red:#ffd0d1;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"MS PGothic",sans-serif;
color:var(--text);background:#eaedf0;
font-size:17px;line-height:1.9;
-webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;}
ul,ol,li{list-style:none;}
a{color:#1967d2;}
b,strong{font-weight:700;}
#wrap{max-width:800px;margin:0 auto;background:#fff;}
.inner{padding:0 16px;}
@media(min-width:768px){.inner{padding:0 28px;}}
/* ---------- 記事ヘッダー ---------- */
.pr-note{font-size:12px;color:#999;text-align:right;padding:6px 14px 0;line-height:1.5;}
.breadcrumb{font-size:12px;color:var(--sub);padding:8px 16px 0;line-height:1.6;}
.breadcrumb a{color:var(--sub);text-decoration:none;}
.breadcrumb span{margin:0 4px;}
.art-head{padding:12px 16px 0;}
.art-cat{display:inline-block;background:var(--key);color:#fff;font-size:12px;font-weight:700;
border-radius:2px;padding:3px 10px;margin-bottom:10px;}
.art-head h1{font-size:25px;font-weight:700;line-height:1.55;color:var(--text);}
@media(min-width:768px){.art-head h1{font-size:29px;}}
.art-meta{display:flex;align-items:center;gap:10px;margin:14px 0 6px;padding-bottom:12px;border-bottom:1px solid var(--border-thin);}
.art-meta .avatar{width:44px;min-width:44px;}
.art-meta .avatar img{display:block;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);object-fit:cover;}
.art-meta .avatar .ph{min-height:44px;border-radius:50%;padding:2px;margin:0;border-width:1px;}
.art-meta .avatar .ph b{font-size:9px;margin:0;}
.art-meta .avatar .ph span{display:none;}
.art-byline{font-size:13px;color:var(--sub);line-height:1.7;}
.art-byline b{color:var(--text);font-size:14px;}
/* ---------- 本文 ---------- */
.art-body{padding-bottom:36px;}
.art-body p{margin:1.3em 0;}
.art-body h2{
font-size:22px;font-weight:700;line-height:1.55;color:var(--text);
background:var(--gray-bg);border-left:6px solid var(--key);border-radius:3px;
padding:18px 20px;margin:2.4em 0 1.2em;
}
@media(min-width:768px){.art-body h2{font-size:24px;padding:22px 24px;}}
.art-body h2 .lead{display:block;font-size:14px;font-weight:700;color:var(--key);margin-bottom:4px;letter-spacing:.04em;}
.art-body h3{
font-size:19px;font-weight:700;line-height:1.6;
border-left:7px solid var(--key);border-top:1px solid var(--border-thin);
border-right:1px solid var(--border-thin);border-bottom:1px solid var(--border-thin);
background:var(--gray-bg);padding:11px 16px;margin:2em 0 1em;
}
@media(min-width:768px){.art-body h3{font-size:21px;}}
.art-body h4{font-size:18px;font-weight:700;line-height:1.6;border-bottom:2px dotted #ccc;padding-bottom:6px;margin:1.6em 0 .8em;}
.fz-20{font-size:20px;}
.fz-15{font-size:15px;}
.fz-13{font-size:13px;}
.center{text-align:center;}
.marker-under{background:linear-gradient(transparent 60%,var(--marker) 60%);font-weight:700;}
.marker-red{background:linear-gradient(transparent 60%,var(--marker-red) 60%);font-weight:700;}
.bold-red{font-weight:700;color:var(--key);}
.catch{font-size:20px;font-weight:700;line-height:1.7;text-align:center;margin:1.6em 0;}
.note{font-size:12px;color:#999;line-height:1.75;margin:.8em 0;}
.lead-txt{font-size:19px;font-weight:700;line-height:2.0;margin:1.4em 0;}
@media(min-width:768px){.lead-txt{font-size:21px;}}
/* ---------- 画像 ---------- */
figure.img{margin:1.6em 0;}
figure.img img{display:block;width:100%;border-radius:2px;}
figcaption{font-size:13px;color:var(--sub);line-height:1.7;margin-top:6px;text-align:center;}
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
background:repeating-linear-gradient(45deg,#f7f7f7,#f7f7f7 10px,#efefef 10px,#efefef 20px);
border:2px dashed #bbb;border-radius:3px;color:#888;margin:1.6em 0;padding:18px 14px;min-height:150px;}
.ph b{display:block;font-size:14px;font-weight:700;line-height:1.6;margin-bottom:4px;color:#666;}
.ph span{font-size:12px;line-height:1.7;}
.ph.tall{min-height:250px;}
/* ---------- 冒頭：読者アンケートのリード ---------- */
.lead-stat{border:1px solid var(--border-thin);border-radius:4px;background:var(--gray-bg);
padding:18px 16px 14px;margin:18px 0 6px;text-align:center;}
.lead-copy{font-size:20px;font-weight:700;line-height:1.65;margin:0 0 14px;}
@media(min-width:768px){.lead-copy{font-size:23px;}}
.lead-sub{font-size:16px;margin:0;line-height:1.7;}
.lead-big{margin:2px 0 0;line-height:1;}
.lead-big .n{font-size:64px;font-weight:700;color:var(--key);letter-spacing:-.03em;}
.lead-big .u{font-size:30px;font-weight:700;color:var(--key);margin-left:2px;}
@media(min-width:768px){.lead-big .n{font-size:76px;}.lead-big .u{font-size:34px;}}
.lead-say{font-size:18px;font-weight:700;line-height:1.7;margin:4px 0 0;}
.lead-say b{color:var(--key);}
.lead-sub-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0 0;}
.lead-sub-stats li{background:#fff;border:1px solid var(--border-thin);border-radius:4px;padding:10px 6px;}
.lead-sub-stats .n{display:block;font-size:26px;font-weight:700;color:var(--key);line-height:1.1;}
.lead-sub-stats .n small{font-size:15px;}
.lead-sub-stats .l{display:block;font-size:12.5px;font-weight:700;color:#555;line-height:1.5;margin-top:4px;}
.lead-stat .note{margin:10px 0 0;text-align:left;}
/* ---------- 吹き出し ---------- */
.speech{display:flex;align-items:flex-start;margin:1.8em 0;}
.speech .person{width:74px;min-width:74px;}
.speech .person .icon{display:block;width:64px;height:64px;border-radius:50%;border:2px solid var(--border);
margin:0 auto;object-fit:cover;background:#fff;}
.speech .person .ph{min-height:64px;width:64px;margin:0 auto;border-radius:50%;padding:2px;border-width:2px;}
.speech .person .ph b{font-size:10px;margin:0;}
.speech .person .ph span{display:none;}
.speech .name{text-align:center;font-size:13px;color:var(--sub);margin-top:4px;line-height:1.4;}
.speech .balloon{position:relative;margin-left:14px;padding:14px 16px;background:#fff;
border:2px solid var(--border);border-radius:6px;max-width:86%;}
.speech .balloon p{margin:0;font-size:16px;line-height:1.85;}
.speech .balloon p+p{margin-top:.8em;}
.speech .balloon::before,.speech .balloon::after{content:"";position:absolute;top:20px;
border-top:8px solid transparent;border-bottom:8px solid transparent;}
.speech .balloon::before{left:-9px;border-right:9px solid var(--border);}
.speech .balloon::after{left:-6px;border-right:9px solid #fff;}
.speech.right{flex-direction:row-reverse;}
.speech.right .balloon{margin-left:0;margin-right:14px;background:#fffdf2;}
.speech.right .balloon::before{left:auto;right:-9px;border-right:none;border-left:9px solid var(--border);}
.speech.right .balloon::after{left:auto;right:-6px;border-right:none;border-left:9px solid #fffdf2;}
/* ---------- ボックス ---------- */
.blank-box{border:2px solid var(--orange);border-radius:3px;padding:16px 18px;margin:1.8em 0;background:#fff;}
.blank-box.blue{border-color:#5b9bd5;}
.blank-box.green{border-color:#3eb370;}
.box-label{font-size:17px;font-weight:700;margin-bottom:.5em;line-height:1.6;}
.blank-box .box-label{color:#c67b00;}
.blank-box.blue .box-label{color:#2e6da4;}
.blank-box.green .box-label{color:#2b8a54;}
.sticky-red{border:2px solid #CD3740;background:#F5DADC;border-radius:3px;padding:16px 18px;margin:1.8em 0;}
.sticky-red .box-label{color:#b3002a;}
.blank-box p,.sticky-red p{margin:.7em 0;font-size:16px;}
.list li{font-size:16px;line-height:1.85;padding-left:20px;position:relative;margin:.5em 0;}
.list li::before{content:"\30FB";position:absolute;left:0;color:#888;}
.list-check li{font-size:16px;line-height:1.85;padding-left:26px;position:relative;margin:.6em 0;}
.list-check li::before{content:"\2714";position:absolute;left:2px;top:0;color:var(--key);font-size:15px;}
/* ---------- POINT ---------- */
.point{border:1px solid var(--border);border-radius:3px;margin:1.4em 0;background:#fff;}
.point .point-ttl{background:var(--gray-bg2);border-bottom:1px solid var(--border);
padding:12px 16px;font-size:18px;font-weight:700;line-height:1.6;}
.point .point-ttl .num{display:inline-block;background:var(--key);color:#fff;font-size:12px;font-weight:700;
border-radius:2px;padding:2px 8px;margin-right:8px;vertical-align:2px;}
.point .point-body{padding:14px 16px;}
.point .point-body p{margin:.5em 0;font-size:16px;}
/* ---------- 表 ---------- */
.tbl-wrap{overflow-x:auto;margin:1.6em 0;-webkit-overflow-scrolling:touch;}
.tbl{width:100%;min-width:540px;border-collapse:collapse;font-size:14px;line-height:1.7;background:#fff;}
.tbl th,.tbl td{border:1px solid var(--border);padding:9px 7px;text-align:center;vertical-align:middle;}
.tbl thead th{background:var(--gray-bg2);font-weight:700;font-size:13px;}
.tbl tbody th{background:var(--green-bg);font-weight:700;font-size:13px;}
.tbl td.no1{background:#fff8f9;}
.tbl thead th.no1{background:#fce4e8;}
.tbl .mark{display:block;font-size:22px;font-weight:700;color:var(--key);line-height:1.2;}
.tbl .mark.b{color:#3e7fbf;}
.tbl .mark.c{color:#999;}
.tbl small{display:block;font-size:11px;color:var(--sub);line-height:1.6;}
@media(min-width:768px){.tbl{font-size:15px;}.tbl thead th,.tbl tbody th{font-size:14px;}}
.scroll-hint{font-size:12px;color:var(--sub);text-align:center;margin:0 0 4px;}
/* ---------- 比較表（治療法比較へ転用） ---------- */
.tbl-cmp{min-width:680px;}
.tbl-cmp thead th{vertical-align:top;padding:8px 6px;}
.tbl-cmp thead th.no1{background:#fbe6ea;}
.tbl-cmp .crown{display:block;font-size:11px;font-weight:700;color:var(--key);letter-spacing:.06em;margin-bottom:3px;}
.tbl-cmp .cname{display:block;font-size:12.5px;font-weight:700;line-height:1.4;}
.tbl-cmp tbody th{width:80px;min-width:80px;}
.tbl-cmp td{vertical-align:middle;}
.tbl-cmp td.no1{background:#fffafb;}
.tbl-cmp .mark{display:block;font-size:26px;color:var(--key);line-height:1;margin:0 auto 3px;}
.tbl-cmp .mark.b{color:#3e7fbf;}
.tbl-cmp .mark.c{color:#b0b0b0;}
.tbl-cmp .ic{display:block;margin:0 auto;width:1em;height:1em;}
.tbl-cmp .cnt{display:block;font-size:13px;font-weight:700;color:#555;margin-bottom:2px;}
.tbl-cmp .hi{color:var(--key);background:linear-gradient(transparent 62%,var(--marker) 62%);font-weight:700;}
.tbl-cmp small{display:block;font-size:11px;color:var(--sub);line-height:1.55;margin-top:3px;}
@media(min-width:768px){.tbl-cmp .cname{font-size:13.5px;}.tbl-cmp .mark{font-size:30px;}}
/* ---------- 調査結果バー ---------- */
.survey{border:1px solid var(--border-thin);border-radius:4px;background:#fff;padding:16px 18px;margin:1.6em 0;}
.survey .s-ttl{font-size:16px;font-weight:700;line-height:1.6;margin-bottom:12px;}
.survey li{margin:10px 0;font-size:14.5px;line-height:1.6;}
.survey .lbl{display:flex;justify-content:space-between;gap:8px;font-weight:700;margin-bottom:3px;}
.survey .lbl .v{color:var(--key);white-space:nowrap;}
.survey .bar{display:block;height:12px;border-radius:6px;background:#eee;overflow:hidden;}
.survey .bar i{display:block;height:100%;background:linear-gradient(90deg,#f2607f,#e60033);border-radius:6px;}
.survey li.dim .bar i{background:#c9ccd0;}
.survey li.dim .lbl .v{color:#999;}
/* ---------- 症例 ---------- */
.case{border:1px solid var(--border);border-radius:3px;overflow:hidden;margin:1.4em 0;background:#fff;}
.case img,.case video{width:100%;display:block;}
.case .meta{padding:11px 14px;font-size:14px;line-height:1.8;background:#fafafa;border-top:1px solid var(--border-thin);}
.case .meta b{display:block;font-size:15px;margin-bottom:2px;}
.case .meta .req{display:block;font-size:11.5px;color:#888;line-height:1.7;margin-top:5px;}
/* ---------- 数値カード ---------- */
.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:1.6em 0;}
.fact-grid li{background:#fff;border:1px solid var(--border-thin);border-radius:4px;padding:12px 6px;text-align:center;}
.fact-grid .n{display:block;font-size:24px;font-weight:700;color:var(--key);line-height:1.15;white-space:nowrap;}
.fact-grid .n small{font-size:13px;white-space:nowrap;}
@media(max-width:430px){.fact-grid li{padding:12px 3px;}.fact-grid .n{font-size:21px;}.fact-grid .n small{font-size:11px;}}
.fact-grid .l{display:block;font-size:12px;font-weight:700;color:#555;line-height:1.5;margin-top:5px;}
/* ---------- 横スクロールカード ---------- */
.tx-hint{font-size:12px;color:var(--sub);text-align:center;margin:1.2em 0 4px;}
.tx-scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
padding:2px 2px 12px;margin:0 0 .6em;-webkit-overflow-scrolling:touch;}
.tx-scroll::-webkit-scrollbar{height:6px;}
.tx-scroll::-webkit-scrollbar-thumb{background:#d8d8d8;border-radius:3px;}
.tx-scroll::-webkit-scrollbar-track{background:#f2f2f2;border-radius:3px;}
.tx-card{flex:0 0 240px;scroll-snap-align:center;border:1px solid var(--border);
border-radius:4px;background:#fff;overflow:hidden;}
.tx-card img{width:100%;height:138px;object-fit:cover;display:block;}
.tx-card .t{font-size:15px;font-weight:700;color:var(--key);line-height:1.5;padding:9px 11px 0;margin:0;}
.tx-card p{font-size:13.5px;line-height:1.75;padding:3px 11px 12px;margin:0;}
@media(min-width:768px){.tx-card{flex-basis:264px;}.tx-card img{height:150px;}.tx-card .t{font-size:16px;}.tx-card p{font-size:14.5px;}}
/* ---------- クリニックのスペック表 ---------- */
.spec{width:100%;border-collapse:collapse;font-size:13px;margin:1.4em 0 .4em;background:#fff;}
.spec thead th{background:#b3002a;color:#fff;font-weight:700;padding:10px 5px;text-align:center;
font-size:12.5px;border:1px solid #b3002a;line-height:1.5;}
.spec td{border:1px solid #e3c6cc;padding:14px 6px;text-align:center;line-height:1.85;vertical-align:middle;}
.spec td b{font-size:16px;color:var(--key);}
.spec .price{font-weight:700;font-size:14px;}
.spec small{font-size:11px;color:#888;}
.spec-note{font-size:11px;color:#aaa;line-height:1.8;margin:0 0 1.6em;}
@media(min-width:768px){.spec{font-size:14px;}.spec thead th{font-size:13.5px;}.spec .price{font-size:15px;}}
/* ---------- おすすめポイント ---------- */
.recommend{background:#fdf6f7;border-radius:4px;padding:20px 16px 16px;margin:1.6em 0 .4em;}
.recommend .ttl{text-align:center;font-size:20px;font-weight:700;color:var(--key);margin-bottom:14px;}
.recommend li{position:relative;padding-left:28px;margin:13px 0;font-size:16px;line-height:1.85;font-weight:700;}
.recommend li::before{content:"\2714";position:absolute;left:3px;top:0;color:var(--key);font-size:15px;}
.recommend .hl{background:linear-gradient(transparent 55%,#fff59a 55%);}
.recommend .red{color:var(--key);}
.recommend small{font-size:11px;font-weight:400;color:#999;}
@media(min-width:768px){.recommend li{font-size:17px;}.recommend .ttl{font-size:22px;}}
/* ---------- 費用の内訳 ---------- */
.cp-list{margin:1.4em 0;}
.cp-item{border:1px solid var(--border-thin);border-left:4px solid var(--key);border-radius:3px;
padding:14px 16px;margin:12px 0;background:#fff;}
.cp-ttl{font-size:18px;font-weight:700;line-height:1.6;margin:0 0 6px;}
.cp-ttl .no{display:inline-block;background:var(--key);color:#fff;font-size:12px;font-weight:700;
border-radius:2px;padding:2px 8px;margin-right:8px;vertical-align:2px;}
.cp-item p{font-size:16px;line-height:1.9;margin:6px 0 0;}
@media(min-width:768px){.cp-ttl{font-size:19px;}.cp-item p{font-size:17px;}}
/* ---------- 店舗 ---------- */
.shop-ui{margin:1.4em 0;}
.shop-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.shop-pills .pill{font-family:inherit;font-size:15px;font-weight:700;line-height:1;cursor:pointer;
min-height:44px;padding:0 22px;border-radius:999px;border:1px solid var(--key);
background:#fff;color:var(--key);transition:background .15s,color .15s;}
.shop-pills .pill.is-active{background:var(--key);color:#fff;}
.shop{border:1px solid var(--border);border-radius:3px;overflow:hidden;margin:0;background:#fff;}
.shop .name{background:var(--gray-bg2);border-bottom:1px solid var(--border);padding:11px 16px;font-size:17px;font-weight:700;}
.shop .body{padding:12px 16px 16px;}
.shop table{width:100%;border-collapse:collapse;font-size:15px;}
.shop th,.shop td{border-bottom:1px dotted var(--border);padding:9px 4px;text-align:left;vertical-align:top;line-height:1.8;}
.shop th{width:84px;white-space:nowrap;color:var(--sub);font-weight:700;}
.shop .shop-photo{display:block;width:100%;max-width:340px;height:auto;border-radius:4px;margin:0 auto 14px;}
@media(min-width:768px){.shop-pills .pill{font-size:16px;padding:0 26px;}.shop .shop-photo{max-width:400px;}}
/* ---------- 二項選別 ---------- */
.fit{border-radius:4px;padding:16px 18px;margin:1.4em 0;}
.fit.ng{background:#f5f5f5;border:1px solid #ddd;}
.fit.ok{background:#fdf6f7;border:1px solid #f0d3d9;}
.fit .ttl{font-size:18px;font-weight:700;margin-bottom:8px;line-height:1.6;}
.fit.ng .ttl{color:#777;}
.fit.ok .ttl{color:var(--key);}
.fit li{font-size:16px;line-height:1.85;padding-left:26px;position:relative;margin:.55em 0;}
.fit.ng li::before{content:"\2715";position:absolute;left:3px;color:#aaa;}
.fit.ok li::before{content:"\25CB";position:absolute;left:2px;color:var(--key);font-weight:700;}
/* ---------- FAQ ---------- */
.faq{border:1px solid var(--border-thin);border-radius:3px;margin:10px 0;background:#fff;}
.faq summary{cursor:pointer;list-style:none;padding:14px 40px 14px 16px;font-size:16px;font-weight:700;line-height:1.7;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:16px;top:12px;font-size:22px;color:var(--key);font-weight:700;}
.faq[open] summary::after{content:"\2212";}
.faq .a{padding:0 16px 14px;font-size:15.5px;line-height:1.9;color:#555;}
/* ---------- CTA ---------- */
.cta{margin:2em 0;text-align:center;}
.cta .cta-lead{font-size:17px;font-weight:700;line-height:1.7;margin-bottom:10px;}
.btn-red{display:block;background:var(--key);border-bottom:4px solid var(--key-dark);border-radius:5px;
color:#fff;font-size:20px;font-weight:700;line-height:1.5;text-decoration:none;
padding:16px 18px;box-shadow:0 2px 6px rgba(0,0,0,.12);}
.btn-red small{display:block;font-size:13px;font-weight:700;}
.btn-red:active{transform:translateY(2px);border-bottom-width:2px;}
.btn-gray{display:block;background:#fff;border:2px solid var(--border);border-bottom-width:3px;border-radius:5px;
color:#555;font-size:16px;font-weight:700;text-decoration:none;padding:13px 16px;margin-top:10px;}
.cta-badge{display:inline-block;border:1px solid var(--key);color:var(--key);background:#fff5f7;
font-size:13px;font-weight:700;border-radius:2px;padding:2px 12px;margin-bottom:8px;}
.cta-note{font-size:12px;color:var(--sub);margin-top:7px;line-height:1.7;}
.txtlink{display:block;background:#fffdf2;border:1px solid #e8d98a;border-left:5px solid var(--orange);
border-radius:3px;padding:13px 15px;margin:1.6em 0;font-size:16px;font-weight:700;
color:#1967d2;text-decoration:underline;line-height:1.7;}
@media(min-width:768px){.txtlink{font-size:17px;}}
/* ---------- フローティングCTA ---------- */
#float{position:fixed;left:0;right:0;bottom:0;z-index:9990;background:rgba(255,255,255,.96);
border-top:1px solid #e3d3d8;box-shadow:0 -2px 10px rgba(0,0,0,.10);padding:8px 12px 10px;
transform:translateY(110%);transition:transform .25s ease;}
#float.on{transform:translateY(0);}
#float .float-in{display:flex;align-items:stretch;gap:8px;max-width:560px;margin:0 auto;}
#float a{display:flex;flex-direction:column;align-items:center;justify-content:center;
border-radius:5px;text-align:center;text-decoration:none;font-weight:700;line-height:1.35;}
/* 主＝予約フォーム（緑ベタ・可変幅で面積を取る） */
#float .fl-main{flex:1 1 auto;min-width:0;background:var(--green);
border-bottom:3px solid var(--green-dark);color:#fff;font-size:16.5px;padding:11px 10px;}
#float .fl-main small{display:block;font-size:11px;font-weight:700;opacity:.92;margin-top:1px;}
#float .fl-main:active{transform:translateY(2px);border-bottom-width:2px;}
/* 副＝公式サイト（白抜き・固定幅。戻って自然検索されるのを受け止める逃げ道） */
#float .fl-sub{flex:0 0 92px;background:#fff;border:2px solid var(--green);border-bottom-width:3px;
color:var(--green-dark);font-size:13px;padding:9px 4px;}
#float .fl-sub small{display:block;font-size:11px;font-weight:700;margin-top:1px;}
#float .fl-sub:active{transform:translateY(2px);border-bottom-width:2px;}
@media(min-width:768px){#float .fl-main{font-size:18px;}
#float .fl-sub{flex:0 0 132px;font-size:14.5px;}}
@media(max-width:390px){#float .fl-main{font-size:15px;}
#float .fl-main small{display:none;}
#float .fl-sub{flex:0 0 78px;font-size:12px;}}
body{padding-bottom:0;}
/* ---------- 関連記事 ---------- */
.related{border-top:1px solid var(--border-thin);margin-top:2.4em;padding-top:16px;}
.related-ttl{font-size:16px;font-weight:700;margin-bottom:10px;}
.related a{display:block;border:1px solid var(--border-thin);
border-radius:3px;padding:10px;text-decoration:none;color:var(--text);background:#fff;}
.related .t{font-size:15px;font-weight:700;line-height:1.6;}
/* ---------- フッター ---------- */
.art-foot{background:#f7f7f7;border-top:1px solid var(--border-thin);padding:20px 16px 90px;margin-top:24px;}
.art-foot .criteria{font-size:13px;line-height:1.85;color:#666;}
.art-foot .criteria b{color:var(--text);}
.art-foot .criteria p{margin:.7em 0;}
.art-foot .flinks{text-align:center;margin:14px 0 6px;}
.art-foot .flinks a{display:inline-block;font-size:13px;padding:6px 9px;color:#666;}
.art-foot .fnote{font-size:12px;color:#888;text-align:center;line-height:1.8;}
/* =========================================================================
v3 追加分（2026-09-09）— アンケート反映・PART表記廃止に伴うパーツ
========================================================================= */
/* ---------- 導入リード（共感パート） ---------- */
.hook{font-size:19px;font-weight:700;line-height:2.0;margin:1.5em 0;}
.hook .sm{display:block;font-size:16px;font-weight:400;color:#555;line-height:1.9;margin-top:.6em;}
@media(min-width:768px){.hook{font-size:21px;}.hook .sm{font-size:17px;}}
/* ---------- 調査の自由回答（悩みのきっかけ）引用 ---------- */
.voices{margin:1.6em 0;}
.voice{position:relative;background:#fafafa;border:1px solid var(--border-thin);border-left:4px solid #c9ccd0;
border-radius:3px;padding:13px 15px 12px;margin:10px 0;}
.voice p{margin:0;font-size:15.5px;line-height:1.9;color:#444;}
.voice .who{display:block;font-size:12px;color:var(--sub);font-weight:700;margin-top:7px;}
/* ---------- 「埋める」vs「育てる」対比カード ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:1.6em 0;align-items:stretch;}
.vs .col{border:1px solid var(--border);border-radius:5px;background:#fff;overflow:hidden;display:flex;flex-direction:column;}
.vs .col .cap{font-size:13.5px;font-weight:700;text-align:center;padding:9px 6px;line-height:1.5;color:#fff;background:#8d9298;}
.vs .col.key .cap{background:var(--key);}
.vs .col .fig{background:repeating-linear-gradient(45deg,#f7f7f7,#f7f7f7 10px,#efefef 10px,#efefef 20px);
border-bottom:1px solid var(--border-thin);min-height:130px;display:flex;align-items:center;justify-content:center;
text-align:center;color:#999;font-size:11.5px;line-height:1.6;padding:10px;}
.vs .col .fig img{display:block;width:100%;height:auto;}
.vs .col .bd{padding:11px 12px 13px;font-size:14px;line-height:1.8;flex:1;}
.vs .col .bd b{color:var(--text);}
.vs .col.key .bd b{color:var(--key);}
.vs .col .bd .t{display:block;font-size:15.5px;font-weight:700;line-height:1.5;margin-bottom:5px;}
.vs .col.key{border-color:#eab8c3;}
@media(min-width:768px){
.vs .col .cap{font-size:15px;}
.vs .col .fig{min-height:170px;font-size:12.5px;}
.vs .col .bd{font-size:15px;}
.vs .col .bd .t{font-size:17px;}
}
/* ---------- 不安 → 回答 のマッピング ---------- */
.ansmap{margin:1.6em 0;}
.ansmap .row{border:1px solid var(--border-thin);border-radius:6px;background:#fff;margin:14px 0;overflow:hidden;
box-shadow:0 1px 3px rgba(0,0,0,.05);}
.ansmap .q{background:#eef1f4;border-bottom:1px solid var(--border-thin);
padding:13px 14px 13px 56px;font-size:15.5px;font-weight:700;line-height:1.7;color:#3d4550;position:relative;}
.ansmap .q .n{position:absolute;left:12px;top:13px;display:inline-block;min-width:32px;height:25px;line-height:25px;
text-align:center;padding:0 6px;border-radius:4px;background:#6b7684;color:#fff;
font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:700;letter-spacing:.03em;}
.ansmap .a{padding:14px 14px 16px 56px;font-size:16px;line-height:1.9;position:relative;}
.ansmap .a::before{content:"A";position:absolute;left:12px;top:14px;display:inline-block;min-width:32px;height:25px;
line-height:25px;text-align:center;padding:0 6px;border-radius:4px;background:var(--key);color:#fff;
font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:700;letter-spacing:.03em;}
.ansmap .a b{color:var(--key);}
@media(min-width:768px){.ansmap .q{font-size:16.5px;}.ansmap .a{font-size:17px;}}
/* ---------- 「この記事でわかること」 ---------- */
.toc-lite{border:1px solid var(--border-thin);border-radius:4px;background:var(--gray-bg);padding:16px 18px;margin:1.8em 0;}
.toc-lite .ttl{font-size:16px;font-weight:700;margin-bottom:8px;}
.toc-lite li{font-size:15.5px;line-height:1.85;padding-left:24px;position:relative;margin:.45em 0;}
.toc-lite li::before{content:counter(li);counter-increment:li;position:absolute;left:0;top:0;
color:var(--key);font-weight:700;font-size:14px;}
.toc-lite ol{counter-reset:li;}
.toc-lite .time{display:block;font-size:12.5px;color:var(--sub);margin-top:10px;}
/* ---------- 調査結果バーの見出し補助 ---------- */
.survey .s-src{font-size:11.5px;color:#aaa;line-height:1.7;margin-top:10px;}
/* ---------- 価格比較（相場 → 掲載院） ---------- */
.pricecmp{display:grid;grid-template-columns:1fr 26px 1fr;gap:6px;align-items:stretch;margin:1.6em 0;}
.pricecmp .col{border:1px solid var(--border);border-radius:5px;background:#fff;padding:13px 8px 12px;text-align:center;}
.pricecmp .col.key{border:2px solid var(--key);background:#fff8f9;}
.pricecmp .cap{font-size:12.5px;font-weight:700;color:#666;line-height:1.5;margin:0 0 6px;}
.pricecmp .col.key .cap{color:var(--key);}
.pricecmp .v{font-size:26px;font-weight:700;color:#8d9298;line-height:1.15;margin:0;letter-spacing:-.02em;}
.pricecmp .v span{font-size:15px;margin-left:1px;}
.pricecmp .col.key .v{font-size:32px;color:var(--key);}
.pricecmp .s{font-size:11px;color:var(--sub);line-height:1.6;margin:5px 0 0;}
.pricecmp .col.key .s{color:#a5606f;}
.pricecmp .arw{display:flex;align-items:center;justify-content:center;color:var(--key);font-size:20px;font-weight:700;}
@media(min-width:768px){.pricecmp .cap{font-size:14px;}.pricecmp .v{font-size:32px;}.pricecmp .col.key .v{font-size:40px;}}
/* ---------- 削るもの／削らないもの ---------- */
.keepcut{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:1.6em 0;}
.keepcut .bx{border-radius:5px;padding:13px 12px 14px;}
.keepcut .bx.cut{background:#f4f5f6;border:1px solid #ddd;}
.keepcut .bx.keep{background:#fdf6f7;border:1px solid #f0d3d9;}
.keepcut .h{font-size:14.5px;font-weight:700;line-height:1.5;margin:0 0 8px;text-align:center;}
.keepcut .bx.cut .h{color:#7c8288;}
.keepcut .bx.keep .h{color:var(--key);}
.keepcut li{font-size:13.5px;line-height:1.75;padding-left:18px;position:relative;margin:.5em 0;}
.keepcut .bx.cut li::before{content:"\2715";position:absolute;left:0;color:#aaa;font-size:12px;}
.keepcut .bx.keep li::before{content:"\25CF";position:absolute;left:1px;color:var(--key);font-size:10px;}
@media(min-width:768px){.keepcut .h{font-size:16px;}.keepcut li{font-size:15px;}}
/* ---------- PR表記（控えめに） ---------- */
.pr-note{font-size:11px;color:#999;text-align:right;padding:6px 12px 0;line-height:1.4;letter-spacing:.04em;}
/* ---------- 注釈のプルダウン（高さを取らない） ---------- */
.notedd{border:1px solid var(--border-thin);border-radius:3px;background:#fafafa;margin:.9em 0;}
.notedd summary{cursor:pointer;list-style:none;padding:8px 30px 8px 12px;font-size:12px;color:#888;
font-weight:700;position:relative;line-height:1.6;}
.notedd summary::-webkit-details-marker{display:none;}
.notedd summary::after{content:"+";position:absolute;right:12px;top:4px;font-size:17px;color:#b5b5b5;font-weight:700;}
.notedd[open] summary::after{content:"\2212";}
.notedd .nd{padding:0 12px 11px;font-size:11.5px;color:#999;line-height:1.8;}
.notedd .nd p{margin:.5em 0;font-size:11.5px;}
/* 症例直下などの可視1行注記（限定解除4要件を満たすため常時表示） */
.req-line{font-size:11.5px;color:#8a8a8a;line-height:1.75;margin:.6em 0 0;}
/* =========================================================================
v7 調整（2026-09-09）
========================================================================= */
/* ---------- 注釈プルダウンをさらに控えめに ---------- */
.notedd{border:none;background:none;margin:.5em 0 1.2em;}
.notedd summary{padding:4px 0 4px 15px;font-size:11px;color:#b2b2b2;font-weight:400;
text-decoration:underline;text-underline-offset:2px;line-height:1.6;position:relative;}
.notedd summary::after{content:none;}
.notedd summary::before{content:"\25B8";position:absolute;left:1px;top:4px;font-size:9px;color:#c4c4c4;}
.notedd[open] summary::before{content:"\25BE";}
.notedd .nd{padding:5px 0 4px;font-size:11px;color:#a8a8a8;line-height:1.85;}
.notedd .nd p{font-size:11px;margin:.55em 0;}
/* ---------- ボックス内の見出しに .art-body p の上マージンが乗るのを打ち消す ---------- */
.art-body .point .point-ttl,
.art-body .blank-box .box-label,
.art-body .sticky-red .box-label,
.art-body .cp-item .cp-ttl,
.art-body .survey .s-ttl,
.art-body .fit .ttl,
.art-body .recommend .ttl,
.art-body .keepcut .h,
.art-body .vs .col .cap,
.art-body .pricecmp .cap,
.art-body .shop .name,
.art-body .case .meta,
.art-body .tx-card .t,
.art-body .tx-card p,
.art-body .speech .balloon p{margin-top:0;}
.art-body .point .point-ttl,
.art-body .cp-item .cp-ttl,
.art-body .vs .col .cap,
.art-body .shop .name,
.art-body .case .meta,
.art-body .tx-card .t,
.art-body .tx-card p{margin-bottom:0;}
.art-body .blank-box .box-label,
.art-body .survey .s-ttl,
.art-body .fit .ttl,
.art-body .keepcut .h{margin-bottom:8px;}
.art-body .recommend .ttl{margin-bottom:14px;}
.art-body .pricecmp .cap{margin-bottom:6px;}
.art-body .pricecmp .v{margin:0;}
.art-body .pricecmp .s{margin:5px 0 0;}
.art-body .spec-note,
.art-body .s-src,
.art-body .cta-note,
.art-body .tx-hint,
.art-body .scroll-hint,
.art-body .req-line{margin-top:0;}
.art-body .point .point-body p:first-child{margin-top:0;}
.art-body .point .point-body p:last-child{margin-bottom:0;}
.art-body .blank-box p:first-of-type{margin-top:0;}
.art-body .cp-item p:last-child{margin-bottom:0;}
/* ---------- スペック表：折り返しを抑える ---------- */
.spec td{padding:13px 4px;}
.spec td b{font-size:14.5px;white-space:nowrap;}
.spec td.price{font-weight:700;font-size:14.5px;white-space:nowrap;}
.spec td.price small{white-space:normal;font-weight:400;}
.spec td small{display:block;font-size:10.5px;line-height:1.6;margin-top:2px;}
@media(min-width:768px){.spec td b,.spec td.price{font-size:17px;}.spec td small{font-size:11.5px;}}
/* =========================================================================
v8: CTAを医療痩身記事LP（medicaldiet-navi.com/article/ 2026-09-03版）と同一に
========================================================================= */
:root{
--green:#3eb370; /* CTA（行動色） */
--green-dark:#2c8a55;
--green-tint:#eefaf2;
--teal:#18c3ce; /* アンカーCTA */
--teal-dark:#0e9aa4;
}
.cta{margin:2.2em 0;text-align:center;}
.cta-solo{margin:1.9em 0;text-align:center;}
.cta-micro{font-size:18.5px;font-weight:700;line-height:1.7;margin:0 0 10px;}
.art-body p.cta-micro{font-size:18.5px;line-height:1.7;margin:0 0 10px;}
@media(min-width:768px){.art-body p.cta-micro{font-size:19.5px;}}
.cta-badge{display:inline-block;border:1px solid var(--green);color:var(--green-dark);
background:var(--green-tint);font-size:15px;font-weight:700;border-radius:2px;padding:2px 12px;margin-bottom:8px;}
.art-body p.cta-note,.cta-note{display:block;font-size:14px;font-weight:700;line-height:1.7;
color:var(--key);background:none;border:0;border-radius:0;padding:0;margin:7px 0 0;}
/* メインCTA（緑のピル＋右向きシェブロン＋シャイン） */
.btn-cv{position:relative;display:flex;flex-direction:column;align-items:center;
justify-content:center;overflow:hidden;background:var(--green);
border-bottom:5px solid var(--green-dark);border-radius:999px;color:#fff;
font-size:23px;font-weight:700;line-height:1.45;text-decoration:none;
padding:21px 36px 18px;min-height:74px;box-shadow:0 4px 12px rgba(0,0,0,.16);}
.btn-cv small{display:block;font-size:15px;font-weight:700;}
.btn-cv.is-s{font-size:19px;padding:15px 32px 13px;min-height:58px;border-bottom-width:4px;}
.btn-cv.is-s small{font-size:13.5px;}
.btn-cv::after{content:"";position:absolute;top:50%;right:18px;width:9px;height:9px;
border-top:2.5px solid #fff;border-right:2.5px solid #fff;
transform:translateY(-50%) rotate(45deg);}
.btn-cv::before{content:"";position:absolute;top:-180px;left:0;width:30px;height:100%;
background:#fff;opacity:0;transform:rotate(45deg);animation:btnShine 3s ease-in-out infinite;}
.btn-cv:active{animation:none;transform:scale(.98);border-bottom-width:2px;}
@media(min-width:768px){.btn-cv{font-size:26px;padding:24px 40px 21px;min-height:84px;}
.btn-cv.is-s{font-size:20px;}}
@media(max-width:380px){.btn-cv{font-size:20px;padding-left:26px;padding-right:26px;}}
/* サブCTA（白抜きの緑ピル） */
.btn-sub{position:relative;display:flex;align-items:center;justify-content:center;
background:#fff;border:2px solid var(--green);border-bottom-width:3px;border-radius:999px;
color:var(--green-dark);font-size:16.5px;font-weight:700;line-height:1.5;text-decoration:none;
padding:14px 30px;min-height:52px;margin-top:12px;}
.btn-sub::after{content:"";position:absolute;top:50%;right:18px;width:8px;height:8px;
border-top:2.5px solid var(--green);border-right:2.5px solid var(--green);
transform:translateY(-50%) rotate(45deg);}
.btn-sub:active{transform:translateY(2px);border-bottom-width:2px;}
@media(max-width:380px){.btn-sub{font-size:15.5px;padding-left:24px;padding-right:24px;}}
/* 記事内アンカーCTA（ティール／下向きシェブロン） */
.btn-anchor{position:relative;display:flex;flex-direction:column;align-items:center;
justify-content:center;background:var(--teal);border:2px solid var(--teal);
border-bottom:5px solid var(--teal-dark);border-radius:999px;color:#fff;
font-size:21px;font-weight:700;line-height:1.45;text-decoration:none;
padding:17px 42px 15px;min-height:70px;box-shadow:0 4px 12px rgba(0,0,0,.16);}
.btn-anchor small{display:block;font-size:14px;font-weight:700;}
.btn-anchor::after{content:"";position:absolute;top:50%;right:22px;width:10px;height:10px;
border-right:3px solid #fff;border-bottom:3px solid #fff;
transform:translateY(-70%) rotate(45deg);}
.btn-anchor:active{animation:none;transform:scale(.98);border-bottom-width:2px;}
@media(min-width:768px){.btn-anchor{font-size:23px;min-height:78px;}.btn-anchor small{font-size:15px;}}
@media(max-width:430px){.btn-anchor{font-size:18px;padding-left:26px;padding-right:34px;}
.btn-anchor small{font-size:13px;}}
@media(max-width:360px){.btn-anchor{font-size:15.5px;padding-left:20px;padding-right:28px;}}
@media(max-width:340px){.btn-anchor small{font-size:11.5px;}}
/* 長いラベルはSPで狙った位置に改行させる（自動折返しだと「空き枠を|見る」で割れる） */
@media(min-width:768px){.btn-cv br.br-sp{display:none;}}
.btn-cv,.btn-anchor{transform-origin:center;animation:ctaPulse 2s ease-in-out infinite;}
.btn-sub{animation:none;}
.btn-cv,.btn-anchor,.btn-sub,.box-label,.spec td,.tbl td{word-break:auto-phrase;}
@keyframes btnShine{0%{transform:scale(0) rotate(45deg);opacity:0;}
80%{transform:scale(0) rotate(45deg);opacity:0;}
81%{transform:scale(4) rotate(45deg);opacity:.5;}
100%{transform:scale(50) rotate(45deg);opacity:0;}}
@keyframes ctaPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.035);}}
@media(prefers-reduced-motion:reduce){
.btn-cv,.btn-anchor{animation:none;}
.btn-cv::before{animation:none;display:none;}}
/* テキストリンクも緑系へ */
.txtlink{background:var(--green-tint);border-color:#c7e7d4;border-left-color:var(--green);
color:var(--green-dark);}
/* フローティングCTAの配色は上の #float .fl-main / .fl-sub で直接指定済み */
/* 不安→回答ブロック：ボックス内
に .art-body p のマージンが乗るのを打ち消す */
.art-body .ansmap .q,
.art-body .ansmap .a{margin:0;}
/* vs対比カードに画像を入れる場合（プレースホルダ用の枠・余白を解除） */
.vs .col .fig{padding:0;min-height:0;background:none;}
.vs .col .fig img{display:block;width:100%;height:auto;}
/* ---------- 症例写真をもっと見る（FV直下のプルダウン） ---------- */
.case-toggle-wrap{text-align:center;margin:18px 0 2px;}
.case-toggle{display:block;max-width:420px;margin:0 auto;cursor:pointer;
background:linear-gradient(180deg,#fff 0%,#fff1f3 100%);
border:2px solid var(--key);color:var(--key)!important;
font-size:18px;font-weight:700;line-height:1.4;padding:16px 40px 14px;border-radius:34px;
text-decoration:none;box-shadow:0 3px 0 rgba(230,0,51,.18),0 4px 12px rgba(0,0,0,.10);
position:relative;transition:opacity .2s ease,transform .1s ease;}
.case-toggle:hover{opacity:.85;}
.case-toggle:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(230,0,51,.18),0 2px 8px rgba(0,0,0,.10);}
.case-toggle small{display:block;font-size:12px;font-weight:400;color:#8a6a70;margin-top:5px;line-height:1.5;}
.case-toggle::after{content:"";position:absolute;right:20px;top:50%;width:11px;height:11px;
border-right:3px solid var(--key);border-bottom:3px solid var(--key);
transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;}
.case-toggle.is-open::after{transform:translateY(-30%) rotate(225deg);}
.case-more{margin-top:18px;}
.case-more .img{margin:0 0 2px;}
.case-more .req-line{margin-bottom:18px;}
.case-more-appeal{font-size:17px;font-weight:700;text-align:center;line-height:1.7;margin:18px auto 6px;}
.case-more-appeal strong{color:var(--key);font-size:19px;
background:linear-gradient(transparent 62%, var(--marker) 62%);padding:0 2px;}