/* ============================================================
   ブラッシュアップ版 追加スタイル（base.css の後に読み込む）
   オンラインAGA3院LPの勝ち要素を既存デザインに合わせて実装
   ============================================================ */

/* ------------------------------------------------------------
   FV：サブ見出し・訴求バッジ・選定根拠
   ------------------------------------------------------------ */
.header-block .fv-sub{
  display:block;
  margin-top:6px;
  font-size:var(--text-md);
  font-weight:var(--font-bold);
  opacity:.95;
}

/* ------------------------------------------------------------
   一覧表（列＝クリニック）
   ------------------------------------------------------------ */
.list-heading{
  max-width:var(--container-max);
  margin:0 auto var(--space-3);
}
.list-heading img{margin:0 auto;}
.scroll-hint{
  display:none;
  max-width:var(--container-max);
  margin:0 auto 6px;
  font-size:var(--text-xs);
  color:#999;
  text-align:right;
}
.v2-table-wrap{
  max-width:var(--container-max);
  margin:0 auto;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:6px solid var(--color-red);
  background:#fff;
}
.v2-table{
  width:100%;
  min-width:600px;
  border-collapse:collapse;
  font-size:var(--text-base);
  line-height:1.45;
}
.v2-table th,
.v2-table td{
  border:1px solid #cdcdcd;
  padding:10px 6px;
  text-align:center;
  vertical-align:middle;
}
.v2-table thead th{
  background:#fff;
  width:28%;
}
.v2-table thead th:first-child,
.v2-table tbody th{
  width:16%;
  background:var(--color-green-light);
  color:#0b4f55;
  font-weight:var(--font-bold);
  font-size:var(--text-sm);
}
.v2-table .best{background:var(--color-yellow-light);}
.v2-table thead .best{border-top:5px solid #F1CE20;}
.v2-table .clinic-img{
  width:100%;
  max-width:170px;
  margin:0 auto 6px;
}
.v2-table .clinic-name-link{
  display:block;
  margin-bottom:6px;
  font-weight:var(--font-bold);
  font-size:var(--text-md);
}
.v2-table .crown{
  display:inline-block;
  margin-bottom:6px;
  padding:2px 12px;
  border-radius:var(--radius-full);
  background:var(--color-red);
  color:#fff;
  font-size:var(--text-xs);
  font-weight:var(--font-bold);
}
/* ◎○△×（文字より控えめに） */
.mark{
  width:32px;
  height:auto;
  margin:0 auto 4px;
  opacity:.45;
}
.v2-price{
  display:block;
  color:var(--color-red);
  font-weight:var(--font-black);
  font-size:var(--text-lg);
}
.v2-table td:not(.best) .v2-price{
  color:#222;
  font-size:var(--text-md);
}
.v2-sub{
  display:block;
  font-size:var(--text-xs);
  color:#666;
}
.v2-val{
  display:block;
  font-weight:var(--font-bold);
}
.v2-drug{
  display:block;
  font-size:var(--text-xs);
  font-weight:var(--font-bold);
  line-height:1.6;
}
.v2-table .btn-raised{
  font-size:var(--text-sm) !important;
  padding:var(--space-3) var(--space-2);
  border-radius:10px;
  max-width:170px;
  margin:0 auto;
}

/* ------------------------------------------------------------
   知ってほしい3つのこと
   ------------------------------------------------------------ */
.know-section{
  background:#e6f3f4;
  padding:var(--space-8) var(--container-px);
}
.know-inner{
  max-width:860px;
  margin:0 auto;
}
.know-title{
  text-align:center;
  font-size:var(--text-2xl);
  font-weight:var(--font-black);
  line-height:1.4;
  margin-bottom:var(--space-6);
}
.know-title span{
  display:block;
  font-size:var(--text-md);
  color:var(--color-green);
}
.know-title b{
  color:var(--color-red);
  font-size:1.3em;
}
.know-card{
  background:#fff;
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-bottom:var(--space-6);
  box-shadow:var(--shadow-sm);
}
.know-card-head{
  background:var(--color-green);
  color:#fff;
  text-align:center;
  padding:10px;
}
.know-card-head .pt{
  display:block;
  font-size:var(--text-xs);
  letter-spacing:.1em;
  opacity:.85;
}
.know-card-head h3{
  font-size:var(--text-xl);
  font-weight:var(--font-black);
  line-height:1.4;
}
.know-card-body{
  padding:var(--space-5) var(--space-4);
}
.know-lead{
  text-align:center;
  font-size:var(--text-xl);
  font-weight:var(--font-black);
  line-height:1.5;
  margin-bottom:var(--space-4);
}
.know-lead em{
  font-style:normal;
  color:var(--color-red);
  background:linear-gradient(transparent 60%, var(--color-yellow-light) 60%);
}
.know-text{
  font-size:var(--text-md);
  line-height:1.8;
  text-align:center;
  margin-bottom:var(--space-3);
}
.know-text strong{color:var(--color-red);}

/* Point1：進行ステップ */
.stage-flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin-bottom:var(--space-4);
}
.stage{
  position:relative;
  padding:12px 4px;
  border-radius:var(--radius-md);
  text-align:center;
  font-size:var(--text-sm);
  font-weight:var(--font-bold);
  line-height:1.4;
  color:#fff;
}
.stage:nth-child(1){background:#7cc3c8;}
.stage:nth-child(2){background:#3fa3aa;}
.stage:nth-child(3){background:#0a7881;}
.stage:nth-child(4){background:#08535a;}
.stage small{display:block;font-weight:400;opacity:.9;}
.stage:not(:last-child)::after{
  content:"▶";
  position:absolute;
  right:-9px;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  color:#f39a1e;
  font-size:12px;
}

/* Point2：お薬比較表 */
.know-img{margin:0 auto var(--space-4);max-width:560px;}
.drug-compare-title{
  margin:var(--space-5) 0 var(--space-2);
  padding:6px 12px;
  border-left:5px solid var(--color-green);
  background:var(--color-green-light);
  font-weight:var(--font-bold);
}
.drug-compare-wrap{overflow-x:auto;}
.drug-compare{
  width:100%;
  min-width:460px;
  border-collapse:collapse;
  font-size:var(--text-sm);
}
.drug-compare th,
.drug-compare td{
  border:1px solid #cdcdcd;
  padding:8px 4px;
  text-align:center;
  line-height:1.5;
}
.drug-compare thead th{background:#f7f7f7;}
.drug-compare tbody th{background:var(--color-green-light);color:#0b4f55;}
.drug-compare tr.best td,
.drug-compare tr.best th{background:var(--color-yellow-light);}

/* ------------------------------------------------------------
   クリニックカード追加要素
   ------------------------------------------------------------ */
.clinic-catch{
  color:var(--color-red);
  font-size:var(--text-sm);
  font-weight:var(--font-bold);
  margin-bottom:2px;
}
.tbl .cell-text.is-price{color:var(--color-red);}
.tbl td.drug-cell .cell-text{
  font-size:var(--text-sm) !important;
  line-height:1.7;
}

/* 本日の予約受付（日付はJSで当日を表示） */
.today-bar{
  max-width:600px;
  margin:4% auto 2%;
  text-align:center;
}
.today-bar .today-micro{
  font-size:var(--text-sm);
  font-weight:var(--font-bold);
  color:var(--color-green);
}
.today-bar .today-box{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:4px;
  padding:10px;
  border-radius:var(--radius-md);
  background:#ffd83b;
  font-weight:var(--font-black);
  font-size:var(--text-md);
}
.today-bar .today-date{
  padding:2px 10px;
  border-radius:4px;
  background:#fff;
  color:var(--color-red);
}

/* ------------------------------------------------------------
   よくある質問
   ------------------------------------------------------------ */
.faq-section{
  background:#e6f3f4;
  padding:var(--space-8) var(--container-px);
}
.faq-inner{max-width:860px;margin:0 auto;}
.faq-title{
  text-align:center;
  font-size:var(--text-2xl);
  font-weight:var(--font-black);
  color:var(--color-green);
  margin-bottom:var(--space-5);
  line-height:1.4;
}
.faq-title span{
  display:block;
  font-size:var(--text-md);
  color:#333;
}
.faq{
  background:#fff;
  border-radius:var(--radius-md);
  margin-bottom:10px;
  box-shadow:var(--shadow-sm);
}
.faq summary{
  position:relative;
  padding:16px 44px 16px 48px;
  font-weight:var(--font-bold);
  font-size:var(--text-md);
  line-height:1.5;
  cursor:pointer;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{
  content:"Q";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--color-green);
  color:#fff;
  font-family:var(--font-display);
  text-align:center;
  line-height:26px;
}
.faq summary::after{
  content:"＋";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:var(--color-green);
  font-weight:var(--font-black);
}
.faq[open] summary::after{content:"－";}
.faq-a{
  position:relative;
  padding:0 16px 16px 48px;
  font-size:var(--text-base);
  line-height:1.8;
}
.faq-a::before{
  content:"A";
  position:absolute;
  left:14px;
  top:0;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--color-red);
  color:#fff;
  font-family:var(--font-display);
  text-align:center;
  line-height:26px;
}
.faq-a .note{color:#999;margin-top:6px;}

/* 3院へ戻る */
.btn-back{
  display:block;
  max-width:520px;
  margin:var(--space-6) auto 0;
  padding:14px;
  border:3px solid var(--color-green);
  border-radius:var(--radius-full);
  background:#fff;
  color:var(--color-green);
  font-size:var(--text-xl);
  font-weight:var(--font-black);
  text-align:center;
  text-decoration:none;
}
.btn-back::before{content:"▲ ";font-size:.7em;}

/* ------------------------------------------------------------
   注意事項
   ------------------------------------------------------------ */
.caution-section{
  max-width:var(--container-max);
  margin:var(--space-8) auto;
  padding:0 var(--container-px);
}
.caution-section details{
  border:1px solid #ddd;
  border-radius:6px;
  background:#fff;
}
.caution-section summary{
  padding:12px 14px;
  font-weight:var(--font-bold);
  cursor:pointer;
}
.caution-body{
  padding:0 14px 14px;
  font-size:var(--text-sm);
  line-height:1.8;
  color:#555;
}
.caution-body h4{margin-top:8px;font-size:var(--text-sm);}

/* ------------------------------------------------------------
   スマホ
   ------------------------------------------------------------ */
@media (max-width:768px){
  .header-block .fv-sub{font-size:var(--text-sm);}
  .scroll-hint{display:block;}
  .v2-table-wrap{border-width:3px;}
  .v2-table{min-width:540px;font-size:var(--text-sm);}
  .v2-table thead th:first-child,
  .v2-table tbody th{
    position:sticky;
    left:0;
    z-index:2;
    width:76px;
    min-width:76px;
    font-size:var(--text-xs);
  }
  .v2-price{font-size:var(--text-md);}
  .know-title{font-size:var(--text-xl);}
  .know-card-head h3{font-size:var(--text-lg);}
  .know-lead{font-size:var(--text-lg);}
  .stage{font-size:var(--text-xs);padding:10px 2px;}
  .faq summary{font-size:var(--text-base);}
  .btn-back{font-size:var(--text-lg);}
}

/* 画像が親幅を超えないように（max-width上書き対策） */
.know-img{width:100%;max-width:560px;}


/* CTAボタン：矢印と文言が重ならないよう余白を確保 */
.clinic-card .btn-cta{
  padding-left:2.2em;
  padding-right:2.2em;
}
@media (max-width:768px){
  .clinic-card .btn-cta{
    font-size:var(--text-md);
  }
}

/* ============================================================
   ロゴが流れる帯（FV直下）
   ============================================================ */
.logo-strip{
  overflow:hidden;
  margin-top:12px;
  padding:8px 0;
  background:#fff;
  border-top:1px solid #e5e5e5;
  border-bottom:1px solid #e5e5e5;
}
.logo-track{
  display:flex;
  width:max-content;
  animation:logo-scroll 24s linear infinite;
}
.logo-item{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:150px;
  height:52px;
  margin-right:10px;
  padding:6px 10px;
  border:1px solid #e5e5e5;
  border-radius:4px;
  background:#fff;
}
.logo-item img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  margin:0 !important;
}
@keyframes logo-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (max-width:768px){
  .logo-item{width:110px;height:42px;margin-right:8px;}
}

/* ============================================================
   治療事例
   ============================================================ */
.case{
  max-width:600px;
  margin:5% auto 3%;
  border:2px solid var(--color-green);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#fff;
}
.case-head{
  background:var(--color-green);
  color:#fff;
  text-align:center;
  font-size:var(--text-xl);
  font-weight:var(--font-black);
  padding:8px;
}
.case-body{padding:14px;}
.case-photos{
  display:flex;
  align-items:center;
  gap:6px;
}
.case-photos figure{flex:1;margin:0;}
.case-photos img{width:100%;border-radius:6px;margin:0 !important;}
.case-photos figcaption{
  margin-top:6px;
  padding:4px;
  border-radius:var(--radius-full);
  background:#aaa;
  color:#fff;
  text-align:center;
  font-size:var(--text-sm);
  font-weight:var(--font-bold);
}
.case-photos figcaption.is-after{background:var(--color-green);}
.case-arrow{color:var(--color-green);font-size:var(--text-lg);}
.case-title{
  margin:12px 0 6px;
  padding:6px;
  background:#333;
  color:#fff;
  text-align:center;
  font-weight:var(--font-bold);
  font-size:var(--text-sm);
}
.case-table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--text-sm);
}
.case-table th,
.case-table td{
  border:1px solid #cdcdcd;
  padding:8px;
  line-height:1.6;
}
.case-table th{
  width:28%;
  background:#f3f3f3;
  text-align:center;
}
.case-table td{text-align:left;}
.case-risk{
  margin-top:8px;
  font-size:11px;
  color:#888;
  line-height:1.6;
}

/* ============================================================
   横幅の統一：中身のブロックはすべて同じ幅にそろえる
   PC：最大1000px（FV画像と同じ）／スマホ：左右12pxずつ空ける
   ============================================================ */
:root{
  --content-w:min(1000px, calc(100% - 24px));
}
.logo-strip,
.list-heading,
.scroll-hint,
.v2-table-wrap,
.wrap,
.jump-bar,
.know-inner,
.ranking-header > div,
.clinic-card,
.madottara-inner,
.faq-inner,
.caution-section{
  width:var(--content-w);
  max-width:none;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
}
/* 外側セクションの左右余白を0にして、幅の基準を --content-w に一本化 */
.section.rank,
.know-section,
.clinic-cards,
.madottara-section,
.faq-section{
  padding-left:0;
  padding-right:0;
}
.wrap{padding:12px;}
.clinic-card{padding:2%;}
.ranking-header{width:100%;}
@media (max-width:768px){
  .ranking-header{width:100%;padding-left:0;padding-right:0;}
  .clinic-card{padding:var(--space-3);}
}

@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none;}
}



/* スマホでCTA文言が2行に割れないよう調整 */
@media (max-width:768px){
  .clinic-card .btn-cta{
    font-size:.95rem;
    padding-left:.8em;
    padding-right:1.8em;
    white-space:nowrap;
  }
  .clinic-card .btn-cta::after{right:.8em;}
}

/* ロゴ帯：レバクリは公式の白ロゴ＋ブランドカラー背景 */
.logo-item--levcli{
  background:#19347a;
  border-color:#19347a;
}
.logo-item--levcli img{
  height:70%;
}

/* ============================================================
   各クリニックの詳細へ（本日バーと同じ黄色ボックス形式）
   ============================================================ */
.jump-bar{
  margin-top:var(--space-8);
  margin-bottom:var(--space-10);
  text-align:center;
}
.jump-box{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:600px;
  margin:4px auto 0;
  padding:12px 44px 12px 12px;
  border-radius:var(--radius-md);
  background:#ffd83b;
  box-shadow:0 4px 0 #c9a10a;
  color:#222;
  font-weight:var(--font-black);
  font-size:var(--text-md);
  text-decoration:none;
}
.jump-box:active{transform:translateY(2px);box-shadow:0 2px 0 #c9a10a;}
.jump-label{
  padding:2px 10px;
  border-radius:4px;
  background:#fff;
  color:var(--color-red);
}
/* 下向き矢印（ゆっくり上下して「下に進む」ことを示す） */
.jump-arrow{
  position:absolute;
  right:18px;
  top:50%;
  width:12px;
  height:12px;
  margin-top:-9px;
  border-right:3px solid #222;
  border-bottom:3px solid #222;
  transform:rotate(45deg);
  animation:jump-down 1.6s ease-in-out infinite;
}
@keyframes jump-down{
  0%,100%{transform:translate(0,0) rotate(45deg);}
  50%{transform:translate(0,5px) rotate(45deg);}
}
@media (prefers-reduced-motion:reduce){
  .jump-arrow{animation:none;}
}

/* ============================================================
   個別CTAボックス（ひと言＋公式ロゴ＋既存CTAボタン）
   ============================================================ */
.cta-logo-box{
  max-width:600px;
  margin:4% auto 3%;
  padding:16px 16px 20px;
  border:2px solid #2b6492;
  border-radius:var(--radius-lg);
  background:#fff;
  text-align:center;
}
/* 吹き出し風のひと言（下線＋下向きの切り欠き） */
.cta-logo-micro{
  position:relative;
  display:inline-block;
  margin-bottom:14px;
  padding:0 28px 6px;
  border-bottom:1px solid #333;
  font-size:var(--text-md);
  font-weight:var(--font-bold);
  line-height:1.4;
}
.cta-logo-micro::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7px;
  width:12px;
  height:12px;
  margin-left:-6px;
  background:#fff;
  border-right:1px solid #333;
  border-bottom:1px solid #333;
  transform:rotate(45deg);
}
.cta-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  height:60px;
  margin:0 auto 14px;
}
.cta-logo img{
  max-height:100%;
  max-width:80%;
  width:auto;
  margin:0 !important;
}
.cta-logo--levcli{
  width:fit-content;
  padding:10px 24px;
  border-radius:6px;
  background:#19347a;
}
.cta-logo-box .cta-wrap{
  max-width:none;
}
@media (max-width:768px){
  .cta-logo-micro{font-size:var(--text-base);padding:0 16px 6px;}
  .cta-logo{height:48px;}
}

/* ============================================================
   Point1：進行イメージ（クリフォア公式素材）
   ============================================================ */
.progress-list{
  list-style:none;
  margin:0 0 var(--space-4);
  border:1px solid #d5e9eb;
  border-radius:var(--radius-md);
  overflow:hidden;
}
.progress-list li{
  display:flex;
  gap:10px;
  padding:10px 12px;
  font-size:var(--text-base);
  line-height:1.6;
  border-bottom:1px solid #d5e9eb;
}
.progress-list li:last-child{border-bottom:none;}
.progress-list b{
  flex-shrink:0;
  width:5.5em;
  color:var(--color-green);
}
.know-stat{
  margin-bottom:var(--space-3);
  text-align:center;
  font-size:var(--text-lg);
  font-weight:var(--font-bold);
}
.know-stat b{
  color:var(--color-red);
  font-size:1.5em;
  font-weight:var(--font-black);
}
.know-note{
  font-size:11px;
  color:#999;
  line-height:1.6;
}

/* Point2：役割表 */
.drug-role td{font-size:var(--text-sm);}
.role{
  display:block;
  width:fit-content;
  margin:0 auto 4px;
  padding:1px 10px;
  border-radius:var(--radius-full);
  color:#fff;
  font-size:var(--text-xs);
  font-weight:var(--font-bold);
}
.role--guard{background:var(--color-green);}
.role--attack{background:var(--color-red);}

/* 役割表は3列なのでスクロールさせず画面幅に収める */
.drug-compare.drug-role{min-width:0;table-layout:fixed;}
.drug-role thead th:first-child,
.drug-role tbody th{width:4.5em;}

/* ============================================================
   調整：アンカーで「ぬるっと」移動
   ============================================================ */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* lank3.png を中央に */
.ranking-header{justify-content:center;}
.ranking-header-title img{margin:0 auto;}

/* cont02.png を大きく（カード幅いっぱい） */
.know-img--wide{max-width:100%;width:100%;}

/* 始める前に知っておくべき3つのこと：角丸なし */
.know-card,
.know-card-head,
.progress-list{border-radius:0;}

/* ============================================================
   治療症例の紹介：タブ切り替え
   ============================================================ */
.case.ba{max-width:600px;}
.ba-head{
  padding:14px 10px 10px;
  background:var(--color-green);
  color:#fff;
  text-align:center;
}
.ba-title{
  font-size:var(--text-2xl);
  font-weight:var(--font-black);
  line-height:1.3;
}
.ba-title span{
  display:block;
  font-size:var(--text-md);
  font-weight:var(--font-bold);
}
.ba-lead{
  padding:14px 14px 4px;
  font-size:var(--text-sm);
  line-height:1.8;
}
.ba-lead-sub{
  padding:0 14px 10px;
  font-size:var(--text-xs);
  color:#888;
  line-height:1.6;
}
/* 大タブ：軽度／中〜重度 */
.ba-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:0 14px;
  border-bottom:3px solid var(--color-green);
}
.ba-tab{
  padding:10px 4px;
  border:none;
  background:#e8eeee;
  color:#555;
  font-family:inherit;
  font-size:var(--text-md);
  font-weight:var(--font-bold);
  cursor:pointer;
}
.ba-tab[aria-selected="true"]{
  background:var(--color-green);
  color:#fff;
}
.ba-panels{padding:12px 14px 6px;}
/* 小タブ：症例ごと */
.ba-subtabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:12px;
}
.ba-subtab{
  flex:1 1 0;
  min-width:0;
  padding:6px 4px;
  border:1px solid var(--color-green);
  border-radius:var(--radius-full);
  background:#fff;
  color:var(--color-green);
  font-family:inherit;
  font-size:var(--text-sm);
  font-weight:var(--font-bold);
  cursor:pointer;
  white-space:nowrap;
}
.ba-subtab[aria-selected="true"]{
  background:var(--color-green);
  color:#fff;
}
.ba-tab:focus-visible,
.ba-subtab:focus-visible{outline:3px solid #f39a1e;outline-offset:2px;}
.ba-meta{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:10px;
}
.ba-meta span{
  padding:3px 12px;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:var(--text-xs);
  color:#666;
}
.ba-meta b{
  margin-left:6px;
  color:#222;
  font-size:var(--text-md);
}
.case-photos img{
  aspect-ratio:1/1;
  object-fit:cover;
  background:#eef3f3;
}
.ba .case-table{margin-top:12px;}
.case-side{font-size:var(--text-xs);}
.case-side b{display:block;margin-top:2px;}
.case-comment{
  margin-top:8px;
  padding:10px;
  background:#f3f9f9;
  font-size:var(--text-sm);
  line-height:1.7;
}
.case-comment b{
  display:block;
  color:var(--color-green);
  margin-bottom:2px;
}
.ba > .case-risk{padding:0 14px 14px;}

/* ============================================================
   体験談
   ============================================================ */
.voice-section{
  background:#fff;
  padding:var(--space-10) 0;
}
.voice-inner{
  width:var(--content-w);
  margin:0 auto;
}
.voice-title{
  margin-bottom:var(--space-6);
  padding-bottom:var(--space-3);
  border-bottom:1px solid #4a4a6a;
  text-align:center;
  color:#4a4a6a;
  font-size:var(--text-xl);
  font-weight:var(--font-bold);
  line-height:1.5;
}
.voice-title span{
  display:block;
  font-size:var(--text-sm);
}
.voice-title b{
  display:block;
  color:#e0675b;
  font-size:1.5em;
  font-weight:var(--font-black);
}
.voice-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.voice-card{
  padding:16px 18px;
  border:1px solid #4a4a6a;
  border-radius:var(--radius-md);
  background:#fff;
}
.voice-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.voice-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#eef0f4;
  margin:0 !important;
}
.voice-name{
  color:#4a4a6a;
  font-weight:var(--font-bold);
  font-size:var(--text-md);
}
.voice-text{
  font-size:var(--text-sm);
  line-height:1.9;
  color:#444;
}
.voice-note{
  margin-top:10px;
  font-size:11px;
  color:#999;
  line-height:1.6;
}
/* 体験談アイコン（SVG） */
svg.voice-icon{display:block;flex-shrink:0;overflow:hidden;}

/* ============================================================
   調整：治療症例ボックスを表組と同じ縁取り・角丸なし
   ============================================================ */
.case.ba{
  border:2px solid #3AADA0;
  border-radius:0;
}
.ba *{border-radius:0 !important;}
.ba-head{
  position:relative;
  overflow:hidden;
  min-height:96px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-right:110px;
  padding-left:14px;
  text-align:left;
}
.ba-title span{display:block;}
.ba-head-img{
  position:absolute;
  right:4px;
  bottom:-6px;
  width:104px;
  height:auto;
  margin:0 !important;
}

/* ============================================================
   調整：カード内の料金を二段表示（最安値を強調）
   ============================================================ */
.price-2row{display:block;line-height:1.3;}
.price-min{
  display:block;
  color:var(--color-red);
  font-size:var(--text-xl);
  font-weight:var(--font-black);
}
.price-max{
  display:block;
  margin-top:2px;
  font-size:var(--text-xs);
  font-weight:var(--font-normal);
  color:#666;
}
@media (max-width:768px){
  .tbl td .cell-text.price-2row{font-size:inherit !important;}
  .price-min{font-size:var(--text-lg);}
}

/* ============================================================
   調整：CTAボックスのロゴを同じ幅にそろえる
   ============================================================ */
.cta-logo{
  height:auto;
  min-height:0;
  margin:0 auto 16px;
}
.cta-logo img{
  width:210px;
  max-width:70%;
  max-height:none;
  height:auto;
}
.cta-logo--levcli{
  width:210px;
  max-width:70%;
  padding:12px 0;
}
.cta-logo--levcli img{
  width:66%;
  max-width:none;
}

/* 吹き出し：参考デザインと同じにならないよう、塗りのピル型＋小さな三角に変更 */
.cta-logo-micro{
  display:inline-block;
  margin-bottom:14px;
  padding:6px 22px;
  border:none;
  border-radius:var(--radius-full);
  background:var(--color-yellow-light);
  color:var(--color-red);
  font-weight:var(--font-black);
  box-shadow:0 0 0 2px #F1CE20 inset;
}
.cta-logo-micro::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7px;
  width:0;
  height:0;
  margin-left:-7px;
  background:none;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:8px solid #F1CE20;
  border-bottom:none;
  transform:none;
}

/* ============================================================
   体験談見出し：アンバサダー画像を左に
   ============================================================ */
.voice-title-wrap{
  position:relative;
  margin-bottom:var(--space-6);
  border-bottom:1px solid #4a4a6a;
}
.voice-title-wrap .voice-title{
  margin-bottom:0;
  border-bottom:none;
  padding:10px 0 12px;
}
.voice-title-img{
  position:absolute;
  left:4%;
  bottom:0;
  width:120px;
  height:auto;
  margin:0 !important;
}
@media (max-width:768px){
  .voice-title-wrap .voice-title{padding-left:96px;text-align:left;}
  .voice-title-img{left:0;width:88px;}
}

/* レバクリのロゴプレートを他院ロゴと同じ見た目の大きさに */
.cta-logo--levcli{
  width:180px;
  padding:9px 0;
}
.cta-logo--levcli img{width:56%;}

/* 二段の料金は中央そろえ */
.tbl td .cell-text.price-2row{text-align:center;}

/* ============================================================
   Point1：AGAの進行パターン（生え際／前頭部／頭頂部）
   ============================================================ */
.pattern{
  margin-bottom:var(--space-4);
  border:1px solid #d5e9eb;
}
.pattern-axis{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px 6px calc(6.5em + 12px);
  background:var(--color-green-light);
  font-size:var(--text-xs);
  font-weight:var(--font-bold);
  color:var(--color-green);
}
.pattern-arrow{
  flex:1;
  height:2px;
  position:relative;
  background:var(--color-green);
}
.pattern-arrow::after{
  content:"";
  position:absolute;
  right:-1px;
  top:-4px;
  border-left:8px solid var(--color-green);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}
.pattern-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid #d5e9eb;
}
.pattern-label{
  flex-shrink:0;
  width:6.5em;
  padding:4px 0;
  background:var(--color-green);
  color:#fff;
  text-align:center;
  font-size:var(--text-sm);
  font-weight:var(--font-bold);
}
.pattern-row img{
  flex:1;
  min-width:0;
  width:100%;
  margin:0 !important;
}
.pattern-note{
  padding:10px 12px;
  border-top:1px solid #d5e9eb;
  font-size:var(--text-sm);
  line-height:1.7;
  text-align:center;
}
@media (max-width:768px){
  .pattern-row{flex-direction:column;align-items:stretch;gap:6px;}
  .pattern-label{width:auto;}
  .pattern-axis{padding-left:12px;}
}

/* 進行パターン・進行リストの幅を他の画像（最大560px）とそろえる */
.pattern,
.progress-list{
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}

/* 3つのことのカード内は、画像・表・リストを同じ幅（最大640px）にそろえる */
.know-card-body > *,
.know-card-body .drug-compare-wrap{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}
.know-img,
.know-img--wide,
.pattern,
.progress-list{
  max-width:640px;
}

/* ============================================================
   調整：3つのことセクション
   ============================================================ */
/* 背景色をなくし、カードは細い枠線で区切る */
.know-section{background:#fff;}
.know-card{
  border:1px solid #cfe4e6;
  box-shadow:none;
}
/* カード内の余白を広めに */
.know-card-body{padding:var(--space-8) var(--space-6);}
.know-img--points{margin-top:var(--space-2);margin-bottom:var(--space-2);}

/* Point1：読みやすい改行（語のまとまりで折り返す）とマーカー */
.nb{display:inline-block;}
.know-text--lead{font-size:var(--text-md);line-height:1.9;}
.mk{
  font-weight:var(--font-bold);
  background:linear-gradient(transparent 60%, #fff200 60%);
}

/* 各クリニックの詳細へ：縦の余白を広く */
.jump-bar{
  margin-top:var(--space-10);
  margin-bottom:var(--space-12);
}
.jump-box{
  padding-top:20px;
  padding-bottom:20px;
  font-size:var(--text-lg);
}
@media (max-width:768px){
  .know-card-body{padding:var(--space-6) var(--space-4);}
  .jump-box{font-size:var(--text-md);padding-top:18px;padding-bottom:18px;}
}

/* ビフォーアフターの横幅を、上の表（カード内いっぱい）にそろえる */
.case.ba{
  max-width:none;
  width:100%;
}
/* 枠は広げつつ、写真はPCで大きくなりすぎないよう最大640pxに */
.ba .case-photos{max-width:640px;margin-left:auto;margin-right:auto;}

/* Point3：cont03.png の見出し部分（上から約17%）を隠して表示 */
.points-crop{
  overflow:hidden;
  margin-top:var(--space-2);
  margin-bottom:var(--space-2);
}
.points-crop img{
  width:100%;
  margin:-17.2% 0 0 !important;
}

/* 治療症例：費用は小さな注記で表示 */
.case-cost{
  margin-top:6px;
  font-size:11px;
  color:#999;
  line-height:1.6;
}

/* ============================================================
   体験談：背景を入れて、クリニックカードと同じトンマナに
   ============================================================ */
.voice-section{
  background:var(--color-green);
  padding:var(--space-8) 0;
}
.voice-inner{
  padding:var(--space-6) var(--space-5);
  border:5px solid #F1CE20;
  border-radius:10px;
  background:var(--color-green-light);
  box-shadow:var(--shadow-lg);
}
.voice-title-wrap{background:transparent;}
.voice-card{background:#fff;}
.voice-section .cta-logo-box{margin-bottom:0;}
@media (max-width:768px){
  .voice-section{padding:var(--space-6) 0;}
  .voice-inner{padding:var(--space-4) var(--space-3);}
}
/* 体験談の配色を上部コンテンツ（緑×赤）にそろえる */
.voice-title,
.voice-name{color:var(--color-green);}
.voice-title b{color:var(--color-red);}
.voice-title-wrap{border-bottom-color:var(--color-green);}
.voice-card{border:2px solid #3AADA0;}

/* 体験談の見出し：他セクションの見出し（know-title）と同じ体裁に */
.voice-title-wrap{
  border-bottom:none;
  margin-bottom:var(--space-5);
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.voice-heading{margin-bottom:0;}
.voice-title-img{
  left:0;
  width:96px;
}
@media (max-width:768px){
  .voice-title-wrap{justify-content:flex-end;}
  .voice-heading{padding-left:84px;text-align:center;flex:1;}
  .voice-title-img{width:80px;}
}

/* Point1：「1年後」などをラベル化（進行パターンのラベルとそろえる） */
.progress-list li{
  align-items:center;
}
.progress-list b{
  width:6.5em;
  padding:4px 0;
  background:var(--color-green);
  color:#fff;
  text-align:center;
  font-size:var(--text-sm);
  line-height:1.4;
}
.progress-list li:nth-child(2) b{background:#08626a;}
.progress-list li:nth-child(3) b{background:#064a50;}

/* ============================================================
   スマホ実機（幅360px前後）向けの調整：サイズ感・改行位置
   ============================================================ */
.btn-ref{
  margin-left:2px;
  font-size:.6em !important;
  font-weight:400;
  color:rgba(255,255,255,.75);
  vertical-align:super;
}
.ba-title .nb:first-of-type{display:inline-block;}
.voice-h-main{display:inline-block;}
.voice-heading .voice-h-main b{display:inline;font-size:1.15em;}
.tbl td.drug-cell .cell-text{line-height:1.6;}

@media (max-width:768px){
  /* 迷ったら：見出しを1行〜2行で自然に */
  .madottara-heading{font-size:var(--text-xl);line-height:1.5;}
  .madottara-list li p,
  .madottara-section .point-item p{font-size:var(--text-base);}
  .madottara-cta .btn-cta{
    font-size:var(--text-md);
    padding-left:1em;
    padding-right:2em;
  }
  .madottara-card{padding:16px 14px 14px;}

  /* CTAボタン：1行に収める */
  .clinic-card .btn-cta,
  .voice-section .btn-cta{
    font-size:var(--text-md);
    white-space:nowrap;
  }

  /* Point1・Point2の本文 */
  .know-text,
  .know-text--lead{font-size:var(--text-base);}
  .pattern-note{font-size:var(--text-xs);}
  .drug-role td{font-size:var(--text-xs);}

  /* ビフォーアフター見出し */
  .ba-title{font-size:var(--text-xl);}
  .ba-title span:first-child{font-size:var(--text-sm);}
  .ba-head{padding-right:96px;min-height:84px;}
  .ba-head-img{width:88px;}

  /* 体験談見出し */
  .voice-heading{font-size:var(--text-lg);}
  .voice-heading > span:first-child{font-size:var(--text-sm);}
  .voice-heading .voice-h-main b{font-size:1.2em;}
  .voice-heading{padding-left:76px;}
  .voice-title-img{width:72px;}
}
/* ビフォーアフター見出しは1行で（span の display:block を打ち消し） */
.ba-title .nb{display:inline-block;}
@media (max-width:768px){
  /* 進行リスト：ラベルを細くして本文の行数を減らす */
  .progress-list li{gap:8px;padding:8px 10px;font-size:var(--text-sm);}
  .progress-list b{width:5em;font-size:var(--text-xs);}
}

/* 2026-10-05：スマホ表示の見出しサイズ・本文の折り返し調整 */
@media (max-width:768px){
  .ranking-header .ranking-header-title{
    width:80%;
    margin-left:auto;
    margin-right:auto;
  }
  .ranking-header .ranking-header-title img{
    display:block;
    width:82%;
    max-width:420px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
  }

  /* POINT本文は左揃え。固定改行を外し、画面幅に合わせて折り返す。 */
  .know-card .know-lead,
  .know-card .know-text,
  .know-card .pattern-note,
  .know-card .know-note,
  .know-card .progress-list li{
    text-align:left;
  }
  .know-card .know-lead br,
  .know-card .know-text br{display:none;}
  .know-card .know-lead .nb,
  .know-card .know-text .nb,
  .know-card .pattern-note .nb{
    display:inline;
    white-space:normal;
  }

  /* 補助見出しは上段、ビフォーアフターは一行で表示。 */
  .ba-head .ba-title{white-space:nowrap;}
  .ba-head .ba-title > span:first-child{display:block;}
  .ba-head .ba-title .nb{
    display:inline;
    font-size:clamp(16px,4.5vw,24px);
  }

  .madottara-inner .madottara-heading{
    font-size:clamp(14px,4vw,20px);
    line-height:1.5;
    white-space:nowrap;
    letter-spacing:0;
  }
  .madottara-inner .madottara-heading .nb{display:inline;}
  .madottara-card .madottara-cta .btn-cta{
    box-sizing:border-box;
    max-width:100%;
    font-size:clamp(13px,3.8vw,18px);
    white-space:nowrap;
    letter-spacing:0;
    padding-left:.75em;
    padding-right:1.8em;
  }
  .madottara-card .madottara-cta .btn-cta::after{right:.65em;}
}

.ba-side-effects {
  margin-top: 10px;
  color: #555;
  font-size: 12px;
  line-height: 1.6;
}

.ba-side-effects-title {
  margin: 0 0 6px;
  color: var(--color-green);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.ba-side-effects-drug {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.ba-side-effects-desc {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}

.voice-section .note{
  color: #999;
  margin-top: 2%;
  font-size: var(--text-xs) !important;
  line-height: 1;
}


/* 症例紹介の見出し */
.case.ba .ba-head {
  color: #fff;
  padding: 12px 10px 14px;
  text-align: center;
}

/* 見出し全体 */
.case.ba .ba-title {
  margin: 0;
  line-height: 1.35;
  font-weight: 800;
}

/* 上段：小さいテキスト */
.case.ba .ba-title-sub {
  display: block;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
}

/* 下段：メイン見出し */
.case.ba .ba-title-main {
  display: block;
  font-size: 18px;
  color: #fff;
  font-weight: 800;
}