/* ぷちサポ LP（WordPress固定ページ用）
   すべて .puchisapo の中だけに効くようにスコープ済み */
/* =========================================================
   ぷちサポ LP
   配色はチラシ v6 校正案から実測した値
   ========================================================= */
.puchisapo{
  --ivory:#FFFDF8;
  --mint:#CAEDDF;        /* FV面 */
  --mint-soft:#DBEFE4;   /* ③⑥面 */
  --mint-pale:#E9F6EF;
  --peach:#F9E8DF;       /* ⑤面・来院ボタン */
  --lemon:#F4F6CC;
  --lemon-hi:#F2F68C;
  --teal:#154F4D;        /* 本文 */
  --teal-deep:#0F2F2D;   /* 見出し・フッター */
  --mint-acc:#67CDBF;
  --line-green:#06C755;  /* LINE公式ブランドカラー。相談ボタン専用 */
  --line-green-dk:#05A948;
  --note:#5E7D79;

  --maxw:880px;
  --bodyw:640px;
  --sticky-h:86px;       /* 固定バーの高さ。body の下余白と必ず同期させる */
}

.puchisapo *,.puchisapo *::before,.puchisapo *::after{box-sizing:border-box}
html:has(.puchisapo){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html:has(.puchisapo){scroll-behavior:auto} .puchisapo *{animation:none!important;transition:none!important} }

.puchisapo{
  margin:0;
  background:var(--ivory);
  color:var(--teal);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.puchisapo h1,.puchisapo h2,.puchisapo h3,.puchisapo p,.puchisapo ul,.puchisapo ol,.puchisapo figure{margin:0}
.puchisapo ul{list-style:none;padding:0}
.puchisapo img{max-width:100%;height:auto;display:block}
.puchisapo a{color:inherit}
.puchisapo :focus-visible{outline:3px solid var(--mint-acc);outline-offset:3px;border-radius:6px}

.puchisapo .inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
.puchisapo .heading{font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;font-weight:700;color:var(--teal-deep);text-wrap:balance}

/* 人物イラスト ------------------------------------------------------
   背景を透過済み。ミント地・アイボリー地のどちらにも直接のせられる
   ★本番実装時：data URI を外部ファイル（.webp）参照に切り替え推奨
------------------------------------------------------------------- */
.puchisapo .fv-ill{margin:18px auto 0;max-width:340px}
.puchisapo .fv-ill img{width:100%;height:auto;display:block}
.puchisapo .share-ill{margin:0 auto 8px;max-width:260px}
.puchisapo .share-ill img{width:100%;height:auto;display:block}


/* =========================================================
   ボタン
   ========================================================= */
.puchisapo .btn-line{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;max-width:360px;margin-inline:auto;
  background:var(--line-green);color:#fff;text-decoration:none;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:18px;line-height:1.4;
  border-radius:999px;padding:16px 18px;
  box-shadow:0 4px 0 var(--line-green-dk);
  transition:transform .12s ease, box-shadow .12s ease;
}
.puchisapo .btn-line:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line-green-dk)}
.puchisapo .btn-note{font-size:13px;text-align:center;margin-top:10px;color:var(--teal);line-height:1.6}

.puchisapo .btn-youth{
  display:block;width:100%;max-width:420px;margin-inline:auto;text-align:center;
  background:var(--peach);color:var(--teal-deep);text-decoration:none;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:16px;line-height:1.5;
  border:2px solid var(--teal-deep);border-radius:14px;padding:14px 16px;
  transition:background .15s ease;
}
.puchisapo .btn-youth:hover{background:#F6DDD1}
.puchisapo .btn-youth .ext{display:inline-block;font-size:12px;font-weight:500;opacity:.75;margin-top:2px}

/* 共有ボタン（第3階層）
   LINE緑＝塗り・最大 ／ ユースクリニック＝ピーチ塗り＋枠・中 ／ 共有＝枠線のみ・小
   相談ボタンと競合させないため、面積・彩度ともに最も抑える */
.puchisapo .btn-share{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-top:14px;padding:12px 24px;
  background:var(--ivory);color:var(--teal-deep);
  border:1.5px solid rgba(21,79,77,.42);border-radius:999px;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:15px;line-height:1.4;
  cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
.puchisapo .btn-share:hover{background:#fff;border-color:var(--teal-deep)}
.puchisapo .btn-share svg{width:17px;height:17px;flex:0 0 17px}
.puchisapo .share{margin-top:28px;padding-top:24px;border-top:1px dashed rgba(21,79,77,.25)}
.puchisapo .share-lead{font-size:14px;line-height:1.75}

/* コピー完了の通知。固定ボタンの上に出す */
.puchisapo .toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(8px);
  bottom:calc(var(--sticky-h) + 12px);z-index:60;
  background:var(--teal-deep);color:#fff;font-size:13.5px;font-weight:500;
  padding:11px 20px;border-radius:999px;box-shadow:0 8px 24px -8px rgba(15,47,45,.55);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  max-width:calc(100% - 32px);text-align:center;
}
.puchisapo .toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* コピーもできなかった場合の手動コピー用 */
.puchisapo .share-url{display:none;margin-top:12px}
.puchisapo .share-url.is-on{display:block}
.puchisapo .share-url input{
  width:100%;max-width:420px;font-size:13px;padding:9px 12px;
  border:1px solid rgba(21,79,77,.35);border-radius:8px;background:#fff;color:var(--teal);
  font-family:inherit;
}
.puchisapo .share-url p{font-size:12px;color:var(--note);margin-top:6px}

/* =========================================================
   ① ファーストビュー
   ========================================================= */
.puchisapo .util{background:var(--mint);color:var(--teal-deep);font-size:12px;font-weight:700;letter-spacing:.02em}
.puchisapo .util .inner{padding-block:9px}

.puchisapo .fv{background:var(--mint)}
.puchisapo .fv .inner{padding-block:16px 26px}
.puchisapo .fv-eyebrow{display:inline-block;background:var(--ivory);color:var(--teal-deep);
  font-size:13px;font-weight:700;border-radius:999px;padding:4px 14px;margin-bottom:12px}
.puchisapo .fv-top{display:flex;flex-direction:column}
.puchisapo .fv-logo{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:46px;line-height:1.05;
  color:var(--teal-deep);letter-spacing:.02em}
.puchisapo .fv-owner{font-size:13.5px;font-weight:700;color:var(--teal);margin-top:8px;line-height:1.5}
.puchisapo .fv-catch{font-size:24px;line-height:1.5;margin-top:14px}
.puchisapo .fv-sub{font-size:15px;line-height:1.7;margin-top:8px}
.puchisapo .fv-cta{margin-top:18px}

.puchisapo .tel-box{display:flex;gap:10px;margin-top:14px;padding:11px 13px;
  background:rgba(255,253,248,.78);border-radius:10px;font-size:12.5px;line-height:1.65}
.puchisapo .tel-box a{font-family:"Zen Maru Gothic",sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.02em;white-space:nowrap;text-decoration:none;border-bottom:1px solid currentColor}
.puchisapo .fv-jump{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--teal);
  text-decoration:underline;text-underline-offset:3px}


/* =========================================================
   共通セクション
   ========================================================= */
.puchisapo .sec{padding-block:44px}
.puchisapo .sec--mint{background:var(--mint-pale)}
.puchisapo .sec--peach{background:var(--peach)}
.puchisapo .sec h2{font-size:24px;line-height:1.5}
.puchisapo .sec .lead{font-size:15px;line-height:1.75;margin-top:10px}
.puchisapo .narrow{max-width:var(--bodyw);margin-inline:auto}

/* ② 相談例カード（情報表示専用：影・矢印・アイコンを使わない） */
.puchisapo .talk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.puchisapo .talk{background:var(--ivory);border:1px solid rgba(21,79,77,.18);
  border-radius:16px 16px 16px 5px;padding:13px 14px;
  font-size:14px;line-height:1.6;color:var(--teal-deep)}
.puchisapo .talk:nth-child(3n+2){background:var(--lemon)}
.puchisapo .talk:nth-child(3n+3){background:var(--peach)}
.puchisapo .talk-foot{margin-top:16px;font-size:14px;line-height:1.8}

/* ③ */
.puchisapo .about-note{background:var(--ivory);border-radius:14px;padding:14px 16px;
  font-size:14px;line-height:1.8;margin-top:14px}

/* ④ 3ステップ */
.puchisapo .steps{margin-top:18px}
.puchisapo .step{display:flex;gap:13px;align-items:flex-start;padding-block:13px;
  border-bottom:1px dashed rgba(21,79,77,.22)}
.puchisapo .step:last-child{border-bottom:0}
.puchisapo .step-n{flex:0 0 28px;width:28px;height:28px;border-radius:50%;
  background:var(--teal-deep);color:var(--ivory);display:grid;place-items:center;
  font-family:"Zen Maru Gothic",sans-serif;font-size:15px;font-weight:700}
.puchisapo .step p{font-size:15px;line-height:1.6}
.puchisapo .bubbles{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.puchisapo .bubble{align-self:flex-end;background:var(--lemon-hi);border-radius:16px 5px 16px 16px;
  padding:9px 14px;font-size:14px;line-height:1.55;max-width:90%}
.puchisapo .howto{font-size:13px;line-height:1.7;color:var(--note);margin-top:12px}

/* ⑤ ユースクリニック */
.puchisapo .free-list{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.puchisapo .free-list li{background:var(--ivory);border:1px solid rgba(21,79,77,.18);border-radius:12px;
  padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px}
.puchisapo .free-list b{font-family:"Zen Maru Gothic",sans-serif;font-size:15px;white-space:nowrap;color:var(--teal-deep)}
.puchisapo .cond{margin-top:13px;font-size:13px;line-height:1.8;
  background:rgba(255,253,248,.82);border-radius:10px;padding:12px 14px}
.puchisapo .cond + .cond{margin-top:8px}

/* ⑥ フッター */
.puchisapo .foot{background:var(--teal-deep);color:#EAF4F0;padding-block:30px 34px;font-size:13px;line-height:1.85}
.puchisapo .foot .name{font-family:"Zen Maru Gothic",sans-serif;font-size:17px;font-weight:700;color:#fff;margin-bottom:8px}
.puchisapo .foot a{color:#BFE8DC;text-decoration:underline;text-underline-offset:3px}
.puchisapo .foot-links{margin-top:10px;display:flex;gap:18px;flex-wrap:wrap}
.puchisapo .foot-disc{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);
  color:#B6CFC9;font-size:12px;line-height:1.75}

/* =========================================================
   下部固定ボタン（SPのみ）
   ========================================================= */
.puchisapo .sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,253,248,.96);
  border-top:1px solid rgba(21,79,77,.14);
  backdrop-filter:blur(6px);
}
.puchisapo .sticky .btn-line{font-size:17px;padding:14px 18px}
.puchisapo .sticky .mini{text-align:center;font-size:11px;margin-top:5px;color:var(--note)}

/* =========================================================
   PC（768px〜）
   ========================================================= */
@media (min-width:768px){
  .puchisapo .sticky{display:none}

  .puchisapo .sec{padding-block:64px}
  .puchisapo .sec h2{font-size:30px}
  .puchisapo .fv .inner{padding-block:34px 48px}

  /* ① 左右2カラム。運営名はロゴ直下のまま動かさない */
  .puchisapo .fv-top{flex-direction:row;gap:36px;align-items:center}
  .puchisapo .fv-main{flex:1 1 auto;min-width:0}
  .puchisapo .fv-ill{flex:0 0 380px;width:380px;max-width:380px;margin:0;order:2}
  .puchisapo .share-ill{max-width:320px}
  .puchisapo .fv-logo{font-size:60px}
  .puchisapo .fv-owner{font-size:15px}
  .puchisapo .fv-catch{font-size:34px}
  .puchisapo .fv-sub{font-size:17px}
  .puchisapo .fv-cta{margin-top:24px;max-width:360px}
  .puchisapo .btn-line{margin-inline:0}
  .puchisapo .btn-note{text-align:left}
  .puchisapo .tel-box{max-width:520px}
  .puchisapo .fv-jump{text-align:left;margin-left:2px}

  /* ② 3列 */
  .puchisapo .talk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .puchisapo .talk{max-width:260px;font-size:15px;padding:16px}
  .puchisapo .talk-foot{font-size:15px}

  /* ④ 横並び3カラム */
  .puchisapo .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .puchisapo .step{border-bottom:0;flex-direction:column;gap:10px;align-items:flex-start;
    background:var(--ivory);border-radius:14px;padding:20px}
  .puchisapo .bubbles{flex-direction:row;justify-content:center;gap:12px;margin-top:22px}
  .puchisapo .bubble{align-self:auto;max-width:none}
  .puchisapo .howto{text-align:center}

  /* ⑤ 左に説明・右に無料3項目 */
  .puchisapo .youth-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
  .puchisapo .free-list{margin-top:0}
  .puchisapo .btn-youth{margin-inline:0}

  /* ⑥ */
  .puchisapo .foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
}

/* =========================================================
   WordPress 組み込み用の追記
   ========================================================= */
/* 共通フッターが固定ボタンに隠れないよう、ページ全体の下に余白 */
/* 固定ヘッダーの下にアンカー先が潜らないように（ヘッダーの高さに合わせて調整） */
.puchisapo [id]{scroll-margin-top:100px}
/* 旧フッターの注記だけ残したブロック */
.puchisapo .disc{background:var(--ivory);padding-block:20px}
.puchisapo .disc p{font-size:12px;line-height:1.75;color:var(--note)}

/* ⑤ ユースクリニックのロゴ */
.puchisapo .youth-logo{width:160px;margin-top:18px}
@media (min-width:768px){
  .puchisapo .youth-logo{width:200px;margin-top:24px}
}