@charset "UTF-8";
/* =========================================================
   3D増毛エクステ（3D増毛研究会） — メインスタイル
   BEM記法／jQuery不使用／モバイルファースト
   ブレークポイント: 768px / 1024px（ヘッダーのナビ切替のみ 1300px）
   ========================================================= */

/* ---------------------------------------------------------
   0. ベース
   --------------------------------------------------------- */
html{scroll-behavior:smooth}
body{
  font-family:var(--ff);
  color:var(--text);
  background:var(--bg);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;vertical-align:bottom}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-round);color:var(--ink);line-height:1.45;letter-spacing:.01em}
b,strong{font-weight:700}

.container{width:min(100% - 36px,var(--container));margin-inline:auto}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:9999;background:#fff;padding:10px 16px;border-radius:8px}

/* 黄色マーカー（参考LP踏襲）。2行に折り返しても文字を横切らないよう clone 必須 */
.mk{background:linear-gradient(transparent 62%,rgba(255,210,63,.85) 62%);font-weight:700;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.or{color:var(--orange);font-weight:700}
.pk{color:var(--pink);font-weight:700}
.nv{color:var(--navy);font-weight:700}

/* スクロール表示アニメ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

.micon{font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;line-height:1;
  display:inline-block;font-size:24px;
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}

/* ---------------------------------------------------------
   1. 共通パーツ（セクション見出し・ボタン・バッジ）
   --------------------------------------------------------- */
.section{padding:64px 0;position:relative}
.section--cream{background:var(--cream)}

/* 写真を薄く敷くセクション。--sec-bg に画像URLを渡す（front-page.php 側で指定）。
   文字の読みやすさを守るため、上に白〜クリームの幕を重ねている。 */
.section--photo{position:relative;overflow:hidden;isolation:isolate}
/* ★見え方の調整はこの2つの数値で行う。
   ::before の opacity ＝ 写真そのものの濃さ
   ::after の幕の alpha ＝ 写真をどれだけ隠すか（下げると写真が見えてくる）
   2026-08-12：薄すぎたので .16／.80 → .34／.70 に引き上げ（体感で約3倍）。 */
.section--photo::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:var(--sec-bg);background-size:cover;background-position:center;
  opacity:.34;
}
.section--photo::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,250,243,.78) 0%,rgba(255,255,255,.70) 45%,rgba(255,250,243,.82) 100%);
}
.section--fade{background:var(--grad-cream)}
/* 濃紺セクション。ベタ塗りだと寂しいので、やわらかい光・細いドット・斜めのラインを
   3枚重ねて奥行きを出している（画像は使わないので軽い）。 */
.section--navy{background:var(--navy);color:#dbe5f5;position:relative;overflow:hidden;isolation:isolate}
.section--navy::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(640px 340px at 6% 6%, rgba(255,107,24,.26), transparent 68%),
    radial-gradient(560px 320px at 96% 94%, rgba(65,179,242,.20), transparent 68%),
    radial-gradient(420px 260px at 78% 4%, rgba(255,95,143,.14), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 16px),
    radial-gradient(rgba(255,255,255,.15) 1.3px, transparent 1.3px);
  background-size:auto,auto,auto,auto,22px 22px;
}
/* 上下の縁をふわっと締める */
.section--navy::after{
  content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,21,51,.55),transparent);
}
/* ★見出しの白文字は「セクション見出し」だけに限定する。
   .section--navy h3 のように要素で指定すると、中に置いた白いカードの
   見出しまで白文字になって消える（実際に発生した）。 */
.section--navy .sec-head__title{color:#fff}
.section--navy .sec-head__lead{color:#cfdcf3}
@media (min-width:768px){.section{padding:92px 0}}

/* 見出しの背後に敷く大きな英字（装飾。読み上げ対象外） */
.sec-head{text-align:center;margin-bottom:36px;position:relative}
.sec-head > *{position:relative;z-index:1}
.sec-head__en{
  position:absolute;left:50%;top:-14px;transform:translateX(-50%);z-index:0;
  font-family:var(--ff-round);font-weight:700;line-height:1;white-space:nowrap;
  /* ★下限を上げすぎると「VEHICLE TYPE」「SCENE & MENU」が320pxで画面外へはみ出す */
  font-size:clamp(30px,10vw,116px);letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(14,33,73,.09);
  pointer-events:none;user-select:none;
}
.section--navy .sec-head__en{-webkit-text-stroke-color:rgba(255,255,255,.13)}
@media (min-width:768px){.sec-head__en{top:-30px}}
.sec-head__eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ff-round);font-weight:700;font-size:13px;letter-spacing:.12em;
  color:var(--orange);background:#fff;border:2px solid var(--orange);
  border-radius:999px;padding:5px 16px;margin-bottom:14px;
}
.section--navy .sec-head__eyebrow{background:transparent;color:var(--yellow);border-color:var(--yellow)}
.sec-head__title{font-size:24px;font-weight:700;margin-bottom:12px}
.sec-head__lead{font-size:15px;max-width:760px;margin-inline:auto}
@media (min-width:768px){
  .sec-head{margin-bottom:52px}
  .sec-head__title{font-size:34px}
  .sec-head__lead{font-size:16px}
}

/* ボタン */
.btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--ff-round);font-weight:700;text-align:center;
  padding:16px 26px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;line-height:1.4;
}
.btn small{display:block;font-size:11px;font-weight:700;opacity:.9;margin-bottom:2px}
.btn:hover{transform:translateY(-3px)}
/* ボタンの上を光が流れる（ホバー時のみ。常時光らせるとうるさい） */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .55s ease;
}
.btn:hover::after{left:120%}
@media (prefers-reduced-motion:reduce){.btn::after{display:none}}
.btn--cta{background:var(--grad-cta);color:#fff;box-shadow:var(--shadow-cta);font-size:17px}
.btn--cta:hover{box-shadow:0 18px 34px rgba(255,107,24,.46)}
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 12px 26px rgba(14,33,73,.3);font-size:17px}
.btn--white{background:#fff;color:var(--navy);box-shadow:var(--shadow);font-size:17px;border:2px solid var(--line-cool)}
.btn--ghost{background:#fff;color:var(--orange);border:2px solid var(--orange);font-size:15px}
.btn--lg{padding:19px 34px;font-size:18px;width:100%;max-width:340px}
@media (min-width:768px){.btn--lg{width:auto;min-width:290px}}

.btn-row{display:flex;flex-direction:column;align-items:center;gap:14px}
@media (min-width:768px){.btn-row{flex-direction:row;justify-content:center;gap:20px}}

/* 丸バッジ（人気No.1など） */
.ribbon{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--grad-pop);color:#fff;font-family:var(--ff-round);font-weight:700;
  font-size:13px;padding:6px 20px;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 18px rgba(255,95,143,.35);z-index:2;
}

/* ---------------------------------------------------------
   2. ヘッダー
   --------------------------------------------------------- */
.topbar{
  background:var(--grad-cta);color:#fff;text-align:center;
  font-size:11.5px;font-weight:700;padding:7px 12px;line-height:1.5;letter-spacing:.02em;
}
@media (min-width:768px){.topbar{font-size:13px;padding:9px 12px}}

.site-header{
  position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:2px solid var(--cream-deep);
  transition:box-shadow .25s ease;
}
.site-header.is-stuck{box-shadow:0 8px 24px rgba(14,33,73,.10)}
body.admin-bar .site-header{top:32px}
@media (max-width:782px){body.admin-bar .site-header{top:46px}}

/* ★ヘッダーだけ本文より広いコンテナを使う。
   ロゴ（社名が長い）＋ナビ7項目＋CTAは 1120px には収まらず、CTAが画面外へはみ出す。 */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;
  width:min(100% - 28px,1400px);margin-inline:auto}
@media (min-width:1300px){.hdr{min-height:76px}}

.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo__mark{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--grad-cta);color:#fff;font-family:var(--ff-round);font-weight:700;font-size:19px;
  transform:rotate(-5deg);box-shadow:0 6px 14px rgba(255,107,24,.35);
}
/* ロゴ画像はほぼ正方形。小さく出すと中の文字が読めないので、
   隣のテキスト社名は残して併記する。 */
.logo__img{width:auto;height:44px;object-fit:contain;flex-shrink:0}
@media (min-width:1300px){.logo__img{height:54px}}
.logo__txt{display:flex;flex-direction:column;line-height:1.15}
.logo__name{font-family:var(--ff-round);font-weight:700;font-size:16px;color:var(--navy)}
.logo__sub{font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:.06em}
/* 1300〜1499px は横幅がギリギリなので英字サブとロゴの拡大を止める */
@media (min-width:1300px) and (max-width:1499px){.logo__sub{display:none}}
@media (min-width:1500px){.logo__name{font-size:19px}.logo__sub{font-size:10.5px}}
/* ★iPhone SE(1st)等の極小幅。ロゴ画像＋社名＋バーガーで横にはみ出すため詰める。
   ★この指定は .logo__name / .logo__sub の定義より「後ろ」に置くこと。
     前に置くと詳細度が同じで後勝ちされ、効かない（実際にやらかした）。 */
@media (max-width:359px){
  .logo__img{height:34px}
  .logo__name{font-size:13.5px}
  .logo__sub{font-size:8.5px}
}

.nav{display:none}
@media (min-width:1300px){
  .nav{display:flex;align-items:center}
  .nav a{
    position:relative;font-family:var(--ff-round);font-weight:700;font-size:13px;
    color:var(--ink);padding:10px 9px;white-space:nowrap;
  }
  .nav a::after{
    content:"";position:absolute;left:9px;right:9px;bottom:4px;height:3px;border-radius:3px;
    background:var(--grad-cta);transform:scaleX(0);transition:transform .22s ease;
  }
  .nav a:hover::after,.nav a.is-current::after{transform:scaleX(1)}
}
@media (min-width:1500px){.nav a{font-size:13.5px}}
/* スマホ：ドロワー */
@media (max-width:1299px){
  .nav.is-open{
    display:flex;flex-direction:column;position:fixed;inset:0 0 0 auto;width:min(84vw,320px);
    background:#fff;padding:80px 22px 30px;box-shadow:-10px 0 40px rgba(14,33,73,.2);
    overflow-y:auto;z-index:950;
  }
  .nav.is-open a{
    font-family:var(--ff-round);font-weight:700;font-size:15px;color:var(--ink);
    padding:15px 6px;border-bottom:1px dashed var(--line);
  }
}

.hdr__cta{display:flex;align-items:center;gap:8px}
.hdr__btn{
  display:none;font-family:var(--ff-round);font-weight:700;font-size:13.5px;color:#fff;
  background:var(--grad-cta);border-radius:999px;padding:11px 20px;box-shadow:var(--shadow-cta);
  transition:transform .18s ease;white-space:nowrap;
}
.hdr__btn:hover{transform:translateY(-2px)}
.hdr__btn--sub{background:var(--navy);box-shadow:0 8px 18px rgba(14,33,73,.28)}
@media (min-width:1300px){.hdr__btn{display:inline-block}}
/* ★2つ目のCTAは十分な幅があるときだけ出す。
   セレクタは .hdr__cta を付けて詳細度を上げること。.hdr__btn--sub だけだと
   上の @media .hdr__btn{display:inline-block} と同点になり、後勝ちで出てしまう。 */
.hdr__cta .hdr__btn--sub{display:none}
@media (min-width:1400px){.hdr__cta .hdr__btn--sub{display:inline-block}}

.burger{
  width:44px;height:44px;border:0;background:var(--navy);border-radius:12px;
  display:grid;place-content:center;gap:5px;cursor:pointer;padding:0;
}
.burger span{display:block;width:20px;height:2.5px;background:#fff;border-radius:2px;transition:.25s}
.burger[aria-expanded="true"]{position:fixed;right:18px;top:14px;z-index:960}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media (min-width:1300px){.burger{display:none}}

/* ---------------------------------------------------------
   3. ヒーロー
   --------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--grad-hero);color:#fff;isolation:isolate}
.hero__deco{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero__blob{position:absolute;border-radius:50%;filter:blur(6px);opacity:.5;animation:float 9s ease-in-out infinite}
.hero__blob--1{width:180px;height:180px;background:var(--pink);top:-40px;right:-50px}
.hero__blob--2{width:220px;height:220px;background:var(--sky);bottom:-70px;left:-70px;animation-delay:-3s}
.hero__blob--3{width:120px;height:120px;background:var(--yellow);top:38%;right:12%;animation-delay:-5s;opacity:.35}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.06)}}
.hero__dots{
  position:absolute;inset:0;opacity:.16;
  background-image:radial-gradient(#fff 1.6px,transparent 1.6px);background-size:22px 22px;
}

.hero__inner{position:relative;padding:38px 0 46px;text-align:center}
@media (min-width:768px){.hero__inner{padding:64px 0 74px}}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 18px;
  font-family:var(--ff-round);font-weight:700;font-size:12px;letter-spacing:.08em;margin-bottom:18px;
}
.hero__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(255,210,63,.28)}

.hero__title{
  font-size:29px;font-weight:700;color:#fff;line-height:1.4;margin-bottom:16px;
  text-shadow:0 4px 18px rgba(0,0,0,.18);
}
.hero__title .big{
  display:inline-block;background:var(--grad-pop);-webkit-background-clip:text;background-clip:text;
  color:transparent;font-size:1.16em;
}
@media (min-width:768px){.hero__title{font-size:48px}}
@media (min-width:1024px){.hero__title{font-size:56px}}

.hero__lead{font-size:14.5px;line-height:2;color:#e6eeff;max-width:740px;margin:0 auto 22px}
@media (min-width:768px){.hero__lead{font-size:17px}}

.hero__cta{display:flex;flex-direction:column;align-items:center;gap:13px;margin-bottom:24px}
@media (min-width:768px){.hero__cta{flex-direction:row;justify-content:center;gap:18px}}

.hero__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hero__badges span{
  display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 14px;
  font-size:11.5px;font-weight:700;
}
.hero__badges span::before{content:"✓";color:var(--yellow);font-weight:900}
@media (min-width:768px){.hero__badges span{font-size:13px;padding:7px 17px}}

/* 支給画像ヒーロー（画像のみ・トリミングなし） */
.hero--media{background:var(--navy)}
.hero--media .hero__img{width:100%;display:block}

/* --- メインビジュアル下のH1ブロック（.hcopy） ---
   支給画像にキャッチコピーを焼き込む前提。画像と文言が重複しないよう
   ここには「製作・販売／開業サポート」を軸にした別コピーを置く。 */
.hcopy{position:relative;overflow:hidden;background:#fff;padding:38px 0 44px;text-align:center}
@media (min-width:768px){.hcopy{padding:58px 0 66px}}
.hcopy__glow{
  position:absolute;left:50%;top:-140px;width:900px;height:340px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,210,63,.30),rgba(255,138,61,.10),transparent);
  pointer-events:none;
}
.hcopy .container{position:relative}

.hcopy__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-round);font-weight:700;font-size:12px;letter-spacing:.1em;
  color:var(--orange);background:#fff;border:2px solid var(--orange);
  border-radius:999px;padding:5px 18px;margin-bottom:16px;
}
.hcopy__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,107,24,.18)}

/* ★小さい画面では「製作・販売か／ら、」のように語の途中で折り返してしまうため、
   479px以下は文字を小さくして1行に収める。.hcopy__line で意味のかたまりを
   inline-block にし、折れる場合もフレーズ単位で改行させる。 */
.hcopy__title{font-size:21px;font-weight:700;line-height:1.45;margin-bottom:4px}
.hcopy__line{display:inline-block}
.hcopy__accent{
  display:inline-block;background:var(--grad-pop);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
@media (max-width:359px){.hcopy__title{font-size:18px}} /* iPhone SE(1st)等の極小幅 */
@media (min-width:480px){.hcopy__title{font-size:26px}}
@media (min-width:768px){.hcopy__title{font-size:40px}}
@media (min-width:1024px){.hcopy__title{font-size:46px}}

/* 見出しと本文のあいだの飾り罫（細線＋トラックのアイコン） */
.hcopy__rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 16px;color:var(--orange)}
.hcopy__rule i{display:block;width:46px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--orange))}
.hcopy__rule i:last-child{background:linear-gradient(90deg,var(--orange),transparent)}
.hcopy__rule .micon{font-size:24px}
@media (min-width:768px){.hcopy__rule i{width:78px}.hcopy__rule .micon{font-size:28px}}

.hcopy__lead{font-size:14.5px;line-height:2.05;max-width:780px;margin:0 auto}
@media (min-width:768px){.hcopy__lead{font-size:16.5px}}

.hcopy__cta{margin-top:26px}
@media (min-width:768px){.hcopy__cta{margin-top:32px}}

.hcopy__badges{
  list-style:none;padding:0;margin:22px 0 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
}
.hcopy__badges li{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--cream);border:1.5px solid var(--line);border-radius:999px;
  padding:6px 15px;font-size:11.5px;font-weight:700;color:var(--ink);
}
.hcopy__badges li::before{content:"✓";color:var(--orange);font-weight:900}
@media (min-width:768px){.hcopy__badges li{font-size:13px;padding:7px 18px}}

/* ヒーロー下の白いカーブ */
.hero__curve{display:block;width:100%;height:34px;margin-bottom:-1px}
@media (min-width:768px){.hero__curve{height:56px}}

/* ---------------------------------------------------------
   4. 流れる帯（ティッカー）
   --------------------------------------------------------- */
.ticker{background:var(--yellow);overflow:hidden;padding:10px 0;border-block:3px solid var(--navy)}
.ticker__track{display:flex;width:max-content;animation:slide 26s linear infinite}
.ticker__track span{
  font-family:var(--ff-round);font-weight:700;font-size:14px;color:var(--navy);
  padding:0 22px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;
}
.ticker__track span::after{content:"●";color:var(--orange);font-size:9px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ---------------------------------------------------------
   4b. 数字バンド／中間CTA／波形の区切り
   --------------------------------------------------------- */
.stats{background:var(--navy);position:relative;overflow:hidden;isolation:isolate;padding:26px 0}
.stats::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(500px 260px at 6% 0%, rgba(255,107,24,.30), transparent 66%),
    radial-gradient(460px 240px at 96% 100%, rgba(65,179,242,.22), transparent 66%),
    radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.2px);
  background-size:auto,auto,20px 20px;
}
.stats__head{text-align:center;margin-bottom:22px}
.stats__eyebrow{
  display:inline-block;font-family:var(--ff-round);font-weight:700;font-size:11px;letter-spacing:.16em;
  color:var(--yellow);border:1.5px solid rgba(255,210,63,.55);border-radius:999px;padding:4px 15px;margin-bottom:11px;
}
.stats__title{font-family:var(--ff-round);font-weight:700;font-size:19px;color:#fff;line-height:1.5}
.stats__lead{margin-top:7px;font-size:12.5px;line-height:1.8;color:#b9c9e6}
@media (min-width:768px){
  .stats__head{margin-bottom:30px}
  .stats__title{font-size:26px}
  .stats__lead{font-size:14px}
}

.stats__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 8px}
@media (min-width:768px){.stats{padding:38px 0 34px}.stats__grid{grid-template-columns:repeat(4,1fr);gap:10px}}
.stats__item{text-align:center;position:relative}
@media (min-width:768px){
  .stats__item + .stats__item::before{
    content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.18);
  }
}
.stats__num{
  font-family:var(--ff-round);font-weight:700;line-height:1;
  font-size:38px;background:var(--grad-pop);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stats__num small{font-size:.38em;margin-left:3px;-webkit-text-fill-color:#fff;color:#fff}
.stats__label{margin-top:7px;font-size:12px;font-weight:700;color:#cfdcf3;letter-spacing:.02em}
@media (min-width:768px){.stats__num{font-size:52px}.stats__label{font-size:13.5px}}

/* 中間CTA（オレンジの帯） */
.midcta{position:relative;overflow:hidden;isolation:isolate;background:var(--grad-cta);color:#fff;padding:34px 0}
@media (min-width:768px){.midcta{padding:44px 0}}
.midcta__deco{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.5) 1.4px,transparent 1.4px);background-size:18px 18px;
}
/* ★スマホでは文字とボタンの真後ろに透かしが重なって「汚れ」に見えるので出さない。
   横並びになる900px以上でだけ、右端の余白に置く。 */
.midcta__mark{display:none}
.midcta__inner{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
@media (min-width:900px){
  .midcta__inner{flex-direction:row;justify-content:space-between;text-align:left;gap:30px}
  .midcta__mark{
    display:block;position:absolute;right:-10px;bottom:-18px;width:230px;height:auto;z-index:-1;
    opacity:.20;pointer-events:none;filter:brightness(0) invert(1);
  }
}
.midcta__lead{font-family:var(--ff-round);font-weight:700;font-size:13px;letter-spacing:.06em;opacity:.95;margin-bottom:6px}
.midcta__title{font-family:var(--ff-round);font-weight:700;font-size:22px;line-height:1.5;color:#fff}
@media (min-width:768px){.midcta__title{font-size:30px}}
.midcta__act{flex-shrink:0;text-align:center}
.midcta__note{margin-top:9px;font-size:11.5px;font-weight:700;opacity:.92}

/* セクション上端の波（濃色セクションの入り口をやわらげる） */
.wave-top{position:absolute;top:-1px;left:0;width:100%;height:38px;display:block;z-index:0}
@media (min-width:768px){.wave-top{height:62px}}
.section--navy > .container,.final > .container{position:relative;z-index:1}

/* 読み進みバー */
.progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;pointer-events:none;
  background:var(--grad-pop);box-shadow:0 0 12px rgba(255,107,24,.55);
  transition:width .12s linear;
}
body.admin-bar .progress{top:32px}
@media (max-width:782px){body.admin-bar .progress{top:46px}}

/* ---------------------------------------------------------
   5. お悩み（trouble）
   --------------------------------------------------------- */
.trouble__grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:768px){.trouble__grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.trouble__item{
  background:#fff;border:2px solid var(--line);border-radius:var(--radius-lg);
  text-align:center;position:relative;box-shadow:var(--shadow);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease;
}
.trouble__item:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
/* 写真＋その下端にアイコンのコインを重ねる
   ★コンテナに overflow:hidden を付けるとコインの下半分が切れる。
     角丸は img 側に付けて、コンテナは切り取らないこと。 */
.trouble__photo{position:relative;background:var(--cream-deep);border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0}
.trouble__photo img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
}
.trouble__icon{
  position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--orange);border:4px solid #fff;
  box-shadow:0 8px 18px rgba(14,33,73,.18);
}
.trouble__icon .micon{font-size:28px}
.trouble__body{padding:38px 18px 22px}
.trouble__text{font-family:var(--ff-round);font-weight:700;font-size:16px;color:var(--ink);line-height:1.6}
.trouble__note{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.8}

.trouble__arrow{text-align:center;margin:26px 0 10px;font-size:32px;color:var(--orange);line-height:1}

/* 答えブロック（濃色・ドット地） */
.answer{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--grad-hero);color:#cfdcf3;border-radius:var(--radius-lg);
  padding:32px 22px 28px;text-align:center;box-shadow:var(--shadow-lg);
}
.answer__deco{
  position:absolute;inset:0;z-index:-1;opacity:.16;pointer-events:none;
  background-image:radial-gradient(#fff 1.4px,transparent 1.4px);background-size:18px 18px;
}
.answer__mark{
  position:absolute;right:-14px;bottom:-10px;width:130px;height:auto;z-index:-1;
  opacity:.16;pointer-events:none;
}
.answer__badge{
  display:inline-block;background:var(--yellow);color:var(--navy);
  font-family:var(--ff-round);font-weight:700;font-size:11.5px;letter-spacing:.14em;
  border-radius:999px;padding:5px 18px;margin-bottom:14px;
}
.answer__title{font-size:20px;color:#fff;margin-bottom:12px;line-height:1.55}
.answer__text{font-size:14px;line-height:2}
.answer__chips{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.answer__chips li{
  display:inline-flex;align-items:center;gap:5px;color:#fff;font-size:11.5px;font-weight:700;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:6px 15px;
}
.answer__chips li::before{content:"✓";color:var(--yellow);font-weight:900}
.yl{color:var(--yellow)}
.sp-br{display:inline}
@media (min-width:768px){
  .answer{padding:44px 36px 40px}
  .answer__mark{width:210px;right:-20px;bottom:-16px}
  .answer__title{font-size:28px}
  .answer__text{font-size:16px}
  .answer__chips li{font-size:13px;padding:7px 18px}
  .sp-br{display:none}
}

/* ---------------------------------------------------------
   6. 読み物ブロック（SEO本文）
   --------------------------------------------------------- */
.prose{max-width:840px;margin-inline:auto}
.prose h3{
  font-size:19px;font-weight:700;margin:32px 0 12px;padding-left:14px;position:relative;
}
.prose h3::before{
  content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:6px;border-radius:4px;background:var(--grad-cta);
}
.prose p{font-size:14.5px;line-height:2.05;margin-bottom:16px}
.prose ul{margin:0 0 18px;padding:0;list-style:none}
.prose ul li{position:relative;padding-left:26px;margin-bottom:9px;font-size:14.5px;line-height:1.9}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:14px;height:14px;border-radius:50%;
  background:var(--yellow);box-shadow:inset 0 0 0 4px var(--orange);
}
@media (min-width:768px){
  .prose h3{font-size:23px;margin-top:44px}
  .prose p,.prose ul li{font-size:16px}
}
.prose__note{
  background:var(--cream);border:2px dashed var(--orange);border-radius:var(--radius);
  padding:18px 20px;font-size:13.5px;line-height:1.95;margin-top:22px;
}
.prose__note b{color:var(--orange)}

/* 補足ブロック（旧 .prose__note の点線囲み）。
   左のアクセントバー＋見出しラベルを付けて、ただの囲みに見えないようにしている。 */
.memo{
  position:relative;max-width:840px;margin:30px auto 0;
  background:linear-gradient(180deg,#fff7ee 0%,#ffffff 62%);
  border:2px solid var(--cream-deep);border-radius:var(--radius-lg);
  padding:26px 20px 22px 24px;box-shadow:var(--shadow);overflow:hidden;
}
.memo::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--grad-cta);
}
.memo::after{
  content:"";position:absolute;right:14px;bottom:12px;width:92px;height:56px;opacity:.45;
  pointer-events:none;background-image:radial-gradient(rgba(255,107,24,.30) 1.4px,transparent 1.4px);
  background-size:12px 12px;
}
.memo__tag{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--grad-cta);color:#fff;font-family:var(--ff-round);font-weight:700;
  font-size:11px;letter-spacing:.12em;border-radius:999px;padding:5px 14px;
  box-shadow:0 6px 14px rgba(255,107,24,.30);margin-bottom:12px;
}
.memo__tag .micon{font-size:15px}
.memo__ttl{
  font-family:var(--ff-round);font-weight:700;font-size:16px;color:var(--ink);
  line-height:1.55;margin-bottom:8px;
}
.memo__txt{font-size:13.5px;line-height:2;position:relative}
.memo__txt b{color:var(--orange)}
@media (min-width:768px){
  .memo{padding:30px 30px 26px 34px}
  .memo__ttl{font-size:19px}
  .memo__txt{font-size:15px}
}

/* ---------------------------------------------------------
   6b. ABOUT（実店舗との比較・向いている方・注意点）
   --------------------------------------------------------- */
.about__intro{max-width:840px;margin:0 auto 28px;font-size:14.5px;line-height:2.05;text-align:center}
.about__note{
  max-width:840px;margin:22px auto 0;font-size:13.5px;line-height:1.95;
  background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:18px 20px;
}
.about__note b{color:var(--orange)}
@media (min-width:768px){.about__intro{font-size:16px}.about__note{font-size:14.5px;padding:22px 26px}}

/* 比較表 */
.cmp{
  max-width:900px;margin-inline:auto;background:#fff;border:2px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);
}
.cmp__head{display:none}
.cmp__row{border-bottom:1px dashed var(--line);padding:18px 18px}
.cmp__row:last-child{border-bottom:0}
.cmp__key{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--ff-round);font-weight:700;font-size:13px;color:#fff;
  background:var(--navy);border-radius:999px;padding:5px 16px;margin:0 auto 12px;width:fit-content;
}
.cmp__key .micon{font-size:18px}
.cmp__a,.cmp__b{font-size:13.5px;line-height:1.8;padding:11px 14px;border-radius:14px;margin-bottom:8px}
.cmp__a{background:#f4f6f9;color:#63718a}
.cmp__b{background:var(--cream-deep);color:var(--ink);font-weight:700;margin-bottom:0}
.cmp__tag{
  display:block;font-family:var(--ff-round);font-weight:700;font-size:10.5px;
  letter-spacing:.06em;margin-bottom:3px;opacity:.85;
}
.cmp__b .cmp__tag{color:var(--orange);opacity:1}

@media (min-width:768px){
  /* ★中央の見出しバッジは幅を揃えて中央に固定する。
     幅がバラバラ＋左寄せだと表全体がガタついて見える（実際に指摘を受けた）。 */
  .cmp__head{display:grid;grid-template-columns:1fr 190px 1fr;align-items:center;background:var(--navy);padding:14px 22px}
  .cmp__label{font-family:var(--ff-round);font-weight:700;font-size:15px;text-align:center;color:#a9b8d4}
  .cmp__label--b{color:var(--yellow)}
  .cmp__vs{
    font-family:var(--ff-round);font-weight:700;font-size:13px;color:var(--navy);
    background:#fff;border-radius:999px;padding:4px 0;text-align:center;
    width:78px;justify-self:center;
  }
  .cmp__row{display:grid;grid-template-columns:1fr 190px 1fr;align-items:stretch;gap:12px;padding:14px 22px}
  .cmp__key{
    margin:0;justify-self:center;align-self:center;
    width:158px;justify-content:center;padding:6px 0;
  }
  .cmp__a,.cmp__b{
    margin-bottom:0;font-size:14.5px;display:flex;align-items:center;min-height:62px;
  }
  .cmp__a{text-align:right;justify-content:flex-end}
  .cmp__tag{display:none}
}

/* 見出し（01/02 の番号つき） */
.about__h3{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:20px;font-weight:700;margin:44px 0 22px;text-align:center;
}
.about__h3-num{
  font-family:var(--ff-round);font-weight:700;font-size:13px;color:#fff;
  background:var(--grad-cta);border-radius:999px;padding:4px 13px;flex-shrink:0;
}
@media (min-width:768px){.about__h3{font-size:26px;margin:60px 0 28px}}

/* 向いている方
   ★5枚あるのでgridだと最終行の2枚が左に寄る。flexの折り返し＋中央寄せで、
     余った行が中央に来るようにしている。 */
.fit{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.fit__item{flex:0 1 100%}
@media (min-width:768px){
  .fit{gap:18px}
  .fit__item{flex:0 1 calc((100% - 36px) / 3)}
}
.fit__item{
  background:#fff;border:2px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 20px;box-shadow:var(--shadow);text-align:center;
}
.fit__icon{
  width:54px;height:54px;border-radius:18px;display:grid;place-items:center;margin:0 auto 12px;
  background:var(--yellow-soft);color:var(--orange);transform:rotate(-5deg);
}
.fit__icon .micon{font-size:28px;transform:rotate(5deg)}
.fit__title{font-family:var(--ff-round);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:7px}
.fit__text{font-size:13px;line-height:1.85;color:var(--muted)}

/* 正直な線引き */
.caution{display:grid;gap:14px;grid-template-columns:1fr;max-width:900px;margin-inline:auto}
@media (min-width:768px){.caution{gap:16px}}
.caution__item{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:2px solid var(--yellow);border-radius:var(--radius-lg);
  padding:20px 18px;box-shadow:var(--shadow);
}
.caution__no{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--yellow);
  color:var(--navy);display:grid;place-items:center;
  font-family:var(--ff-round);font-weight:700;font-size:16px;
}
.caution__title{font-family:var(--ff-round);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:6px;line-height:1.5}
.caution__text{font-size:13.5px;line-height:1.9}
@media (min-width:768px){
  .caution__item{padding:24px 26px;gap:18px}
  .caution__title{font-size:18px}
  .caution__text{font-size:14.5px}
}

/* 締めのブロック（3ステップの図解つき） */
.conc{
  position:relative;overflow:hidden;isolation:isolate;
  max-width:900px;margin:34px auto 0;text-align:center;
  background:var(--grad-hero);color:#cfdcf3;border-radius:var(--radius-lg);
  padding:32px 20px 30px;box-shadow:var(--shadow-lg);
}
.conc__badge{
  display:inline-block;background:var(--yellow);color:var(--navy);
  font-family:var(--ff-round);font-weight:700;font-size:11.5px;letter-spacing:.14em;
  border-radius:999px;padding:5px 18px;margin-bottom:14px;
}
.conc__ttl{font-family:var(--ff-round);font-weight:700;font-size:19px;color:#fff;margin-bottom:22px;line-height:1.55}

.conc__steps{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-bottom:22px}
.conc__step{
  background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.24);
  border-radius:16px;padding:14px 14px 12px;position:relative;
}
.conc__step--goal{background:var(--grad-cta);border-color:transparent;box-shadow:var(--shadow-cta)}
.conc__step-no{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--yellow);color:var(--navy);font-family:var(--ff-round);font-weight:700;font-size:14px;
  margin-bottom:7px;
}
.conc__step--goal .conc__step-no{background:#fff;color:var(--orange)}
.conc__step-ttl{font-family:var(--ff-round);font-weight:700;font-size:15px;color:#fff;line-height:1.5}
.conc__step-sub{font-size:11.5px;line-height:1.6;color:#cfdcf3;margin-top:3px}
.conc__step--goal .conc__step-sub{color:#fff5ec}
.conc__arrow{color:var(--yellow);font-size:13px;line-height:1;transform:rotate(90deg);margin:2px auto}

.conc__txt{font-size:13.5px;line-height:2;margin-bottom:22px}
@media (min-width:768px){
  .conc{padding:44px 38px 40px}
  .conc__ttl{font-size:26px;margin-bottom:28px}
  .conc__steps{flex-direction:row;align-items:stretch;justify-content:center;gap:10px;margin-bottom:28px}
  .conc__step{flex:1 1 0;max-width:230px;padding:18px 16px 16px}
  .conc__arrow{transform:none;margin:0;align-self:center;font-size:15px}
  .conc__step-ttl{font-size:16.5px}
  .conc__step-sub{font-size:12.5px}
  .conc__txt{font-size:15px}
}

/* ---------------------------------------------------------
   7. 車両タイプ
   --------------------------------------------------------- */
.types__grid{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:768px){.types__grid{grid-template-columns:repeat(2,1fr);gap:26px}}
@media (min-width:1024px){.types__grid{grid-template-columns:repeat(4,1fr);gap:18px}}

.type{
  background:#fff;border:3px solid var(--line-cool);border-radius:var(--radius-lg);
  padding:30px 18px 22px;position:relative;text-align:center;box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease;display:flex;flex-direction:column;
}
.type:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
/* いちばん選ばれているカードは一段持ち上げて主役にする */
.type--pick{border-color:var(--orange);background:#fffdf8;box-shadow:0 22px 46px rgba(255,107,24,.26)}
@media (min-width:1024px){
  .type--pick{transform:scale(1.045);z-index:2}
  .type--pick:hover{transform:scale(1.045) translateY(-6px)}
}
/* カード内の写真はホバーでゆっくり寄る */
.type__img img,.scene__thumb img,.flow__photo img,.area__banner img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.type:hover .type__img img,.scene__item:hover .scene__thumb img,
.flow__item:hover .flow__photo img,.area__banner:hover img{transform:scale(1.07)}
.type__no{
  font-family:var(--ff-round);font-weight:700;font-size:12px;color:#fff;
  background:var(--navy);border-radius:999px;padding:3px 14px;align-self:center;margin-bottom:12px;
}
.type--pick .type__no{background:var(--grad-cta)}
.type__img{
  width:100%;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;margin-bottom:14px;
  background:var(--cream-deep);display:grid;place-items:center;color:var(--orange);
}
.type__img img{width:100%;height:100%;object-fit:cover;display:block}
.type__img .micon{font-size:52px;opacity:.55}
.type__name{font-size:19px;font-weight:700;margin-bottom:8px}
.type__copy{font-size:13.5px;line-height:1.85;margin-bottom:14px;flex-grow:1}
.type__list{list-style:none;padding:0;margin:0;text-align:left}
.type__list li{
  position:relative;padding-left:24px;font-size:13px;line-height:1.75;margin-bottom:7px;font-weight:700;color:var(--ink);
}
.type__list li::before{
  content:"check";font-family:"Material Symbols Rounded";font-size:17px;font-weight:400;
  position:absolute;left:0;top:1px;color:var(--mint);
  font-variation-settings:'FILL' 1,'wght' 700;
}
.type__for{
  margin-top:14px;background:var(--sky-soft);border-radius:12px;padding:10px 12px;
  font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.7;
}
.type--pick .type__for{background:var(--yellow-soft)}

/* ---------------------------------------------------------
   8. 比較（一般的な車両 vs 当社）
   --------------------------------------------------------- */
.vs{display:grid;gap:16px;grid-template-columns:1fr;align-items:stretch}
@media (min-width:768px){.vs{grid-template-columns:1fr auto 1fr;gap:20px}}
.vs__card{border-radius:var(--radius-lg);padding:26px 20px;box-shadow:var(--shadow)}
.vs__card--bad{background:#f4f6f9;border:2px solid #dfe5ee}
.vs__card--good{background:#fff;border:3px solid var(--orange);position:relative}
.vs__head{
  font-family:var(--ff-round);font-weight:700;font-size:16px;text-align:center;
  border-radius:999px;padding:8px 14px;margin-bottom:16px;
}
.vs__card--bad .vs__head{background:#dfe5ee;color:#63718a}
.vs__card--good .vs__head{background:var(--grad-cta);color:#fff}
.vs__list{list-style:none;padding:0;margin:0}
.vs__list li{
  position:relative;padding-left:30px;font-size:14.5px;line-height:1.8;margin-bottom:12px;font-weight:700;
}
.vs__card--bad .vs__list li{color:#63718a}
.vs__card--bad .vs__list li::before{content:"×";position:absolute;left:4px;top:0;color:#9aa8bd;font-size:19px;font-weight:900}
.vs__card--good .vs__list li{color:var(--ink)}
.vs__card--good .vs__list li::before{content:"◎";position:absolute;left:0;top:0;color:var(--orange);font-size:18px;font-weight:900}
.vs__arrow{display:grid;place-items:center;font-size:30px;color:var(--orange);transform:rotate(90deg)}
@media (min-width:768px){.vs__arrow{transform:none}}

/* 多毛作営業の図解（同じ1台 → 場所ごとに売る物を切り替える） */
.tamou{
  max-width:900px;margin:0 auto;background:#fff;border:2px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:22px 18px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.tamou__car{text-align:center}
.tamou__car img{width:104px;height:auto}
.tamou__car-txt{font-family:var(--ff-round);font-weight:700;font-size:14px;color:var(--ink);margin-top:2px}
.tamou__car-txt b{color:var(--orange);font-size:1.25em}
.tamou__arrow{color:var(--orange);font-size:15px;line-height:1;transform:rotate(90deg)}
.tamou__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.tamou__item{
  background:var(--cream);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:12px 8px 11px;text-align:center;
}
.tamou__photo{
  display:block;width:64px;height:64px;margin:0 auto 8px;border-radius:50%;overflow:hidden;
  border:3px solid #fff;box-shadow:0 6px 14px rgba(14,33,73,.16);
}
.tamou__photo img{width:100%;height:100%;object-fit:cover;display:block}
.tamou__when{display:block;font-size:10.5px;font-weight:700;color:var(--muted);line-height:1.4}
.tamou__name{display:block;font-family:var(--ff-round);font-weight:700;font-size:14px;color:var(--orange);margin-top:2px}
@media (min-width:768px){
  .tamou{flex-direction:row;justify-content:center;gap:22px;padding:28px 30px}
  .tamou__car img{width:132px}
  .tamou__car-txt{font-size:15px}
  .tamou__arrow{transform:none;font-size:20px}
  .tamou__list{width:auto;flex:1;max-width:560px;gap:14px}
  .tamou__item{padding:16px 10px 14px}
  .tamou__photo{width:78px;height:78px}
  .tamou__when{font-size:11.5px}
  .tamou__name{font-size:16px}
}

/* ---------------------------------------------------------
   9. 販売場所 × メニュー
   --------------------------------------------------------- */
.scene__grid{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:1024px){.scene__grid{grid-template-columns:repeat(3,1fr)}}
.scene{border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow);border:2px solid var(--line)}
.scene__head{padding:16px 18px;color:#fff;text-align:center}
.scene--a .scene__head{background:linear-gradient(135deg,#ff5f8f,#ff8ab0)}
.scene--b .scene__head{background:linear-gradient(135deg,#ff6b18,#ffa14d)}
.scene--c .scene__head{background:linear-gradient(135deg,#2ec7a4,#41b3f2)}
.scene__when{font-size:11.5px;font-weight:700;opacity:.92;letter-spacing:.08em}
.scene__where{font-family:var(--ff-round);font-weight:700;font-size:19px;color:#fff;line-height:1.4}
.scene__body{padding:18px}
.scene__item{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed var(--line)}
.scene__item:last-child{border-bottom:0}
.scene__emoji{
  width:44px;height:44px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;font-size:22px;
  background:var(--cream-deep);
}
/* メニュー写真のサムネ */
.scene__thumb{
  width:62px;height:62px;border-radius:16px;flex-shrink:0;overflow:hidden;
  background:var(--cream-deep);box-shadow:0 4px 12px rgba(14,33,73,.12);
}
.scene__thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* ★display:block を付けないと商品名と説明が1行につながって読みにくい */
.scene__name{display:block;font-family:var(--ff-round);font-weight:700;font-size:15px;color:var(--ink);line-height:1.5}
.scene__desc{display:block;font-size:12.5px;line-height:1.7;color:var(--muted);margin-top:2px}
.scene__tag{
  display:block;text-align:center;font-family:var(--ff-round);font-weight:700;font-size:13px;
  padding:10px;background:var(--cream);color:var(--orange);border-top:2px dashed var(--line);
}

/* ---------------------------------------------------------
   10. フルオーダー / サポート（共通カード）
   --------------------------------------------------------- */
.card3{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:768px){.card3{grid-template-columns:repeat(3,1fr);gap:22px}}
.card{
  background:#fff;border-radius:var(--radius-lg);padding:28px 22px;text-align:center;
  box-shadow:var(--shadow);border:2px solid var(--line);position:relative;
  color:var(--text); /* 濃色セクションの中に置いても本文色を保つ */
}
.card__icon{
  width:66px;height:66px;border-radius:22px;display:grid;place-items:center;margin:0 auto 14px;
  color:#fff;transform:rotate(-6deg);box-shadow:0 10px 22px rgba(14,33,73,.16);
}
.card__icon .micon{font-size:34px;transform:rotate(6deg)}
.card:nth-child(1) .card__icon{background:var(--grad-cta)}
.card:nth-child(2) .card__icon{background:linear-gradient(135deg,#ff5f8f,#ff8ab0)}
.card:nth-child(3) .card__icon{background:var(--grad-mint)}
.card__title{font-size:19px;font-weight:700;margin-bottom:10px}
.card__text{font-size:14px;line-height:1.95;text-align:left}
.card__list{list-style:none;padding:0;margin:14px 0 0;text-align:left}
.card__list li{
  position:relative;padding-left:24px;font-size:13.5px;line-height:1.8;margin-bottom:8px;font-weight:700;color:var(--ink);
}
.card__list li::before{
  content:"";position:absolute;left:3px;top:.6em;width:11px;height:11px;border-radius:50%;background:var(--yellow);
  box-shadow:inset 0 0 0 3px var(--orange);
}
.card__pop{
  position:absolute;top:-13px;right:-8px;background:var(--yellow);color:var(--navy);
  font-family:var(--ff-round);font-weight:700;font-size:12px;border-radius:999px;padding:6px 14px;
  transform:rotate(7deg);box-shadow:0 6px 14px rgba(14,33,73,.18);line-height:1.35;z-index:3;
}

/* 写真つきのカード（開業サポート）。お悩みカードと同じく写真の下端にアイコンを重ねる */
.card--photo{padding:0;overflow:visible}
.card__photo{
  position:relative;background:var(--cream-deep);
  border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
}
.card__photo img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
}
.card--photo .card__icon{
  position:absolute;left:50%;bottom:-26px;transform:translateX(-50%) rotate(-6deg);
  width:60px;height:60px;margin:0;border:4px solid #fff;box-shadow:0 10px 20px rgba(14,33,73,.22);
}
.card--photo .card__icon .micon{font-size:30px}
.card__body{padding:44px 22px 26px}

/* ---------------------------------------------------------
   11. 流れ（フロー）
   --------------------------------------------------------- */
.flow{list-style:none;padding:0;margin:0;max-width:860px;margin-inline:auto}
.flow__item{
  position:relative;background:#fff;border:2px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 20px 22px 74px;margin-bottom:16px;box-shadow:var(--shadow);
}
.flow__item::after{
  content:"";position:absolute;left:36px;bottom:-17px;width:0;height:0;
  border-left:11px solid transparent;border-right:11px solid transparent;border-top:12px solid var(--orange);z-index:2;
}
.flow__item:last-child{margin-bottom:0}
.flow__item:last-child::after{display:none}
.flow__no{
  position:absolute;left:16px;top:20px;width:44px;height:44px;border-radius:50%;
  background:var(--grad-cta);color:#fff;display:grid;place-items:center;
  font-family:var(--ff-round);font-weight:700;font-size:17px;box-shadow:0 8px 16px rgba(255,107,24,.32);
}
.flow__title{font-size:17px;font-weight:700;margin-bottom:6px}
.flow__text{font-size:13.5px;line-height:1.9}
/* 各ステップの写真。スマホは本文の下に全幅、PCは右側に置く */
.flow__photo{display:block;margin-top:14px;border-radius:14px;overflow:hidden;background:var(--cream-deep)}
.flow__photo img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
@media (min-width:768px){
  .flow__item{padding:26px 26px 26px 92px}
  .flow__no{left:22px;top:24px;width:54px;height:54px;font-size:20px}
  .flow__title{font-size:20px}
  .flow__text{font-size:15px}
  .flow__item--photo{display:grid;grid-template-columns:1fr 232px;gap:22px;align-items:center}
  .flow__photo{margin-top:0;border-radius:16px}
  .flow__photo img{aspect-ratio:4/3}
}

/* ---------------------------------------------------------
   12. 新着（納車実績・記事・お客様の声）
   --------------------------------------------------------- */
.posts{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:768px){.posts{grid-template-columns:repeat(3,1fr);gap:22px}}
.post{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;border:2px solid var(--line);
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .22s ease;
}
.post:hover{transform:translateY(-5px)}
.post__thumb{aspect-ratio:16/10;background:var(--cream-deep);display:grid;place-items:center;overflow:hidden}
.post__thumb img{width:100%;height:100%;object-fit:cover}
.post__thumb .micon{font-size:44px;color:var(--orange);opacity:.45}
.post__body{padding:16px 18px 20px;display:flex;flex-direction:column;flex-grow:1}
.post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.post__date{font-size:11.5px;font-weight:700;color:var(--muted)}
.post__cat{
  font-size:11px;font-weight:700;color:#fff;background:var(--orange);
  border-radius:999px;padding:3px 11px;
}
.post__title{font-size:15.5px;font-weight:700;line-height:1.6;margin-bottom:8px}
.post__excerpt{font-size:13px;line-height:1.85;color:var(--muted);flex-grow:1}
.post__more{margin-top:12px;font-family:var(--ff-round);font-weight:700;font-size:13px;color:var(--orange)}

/* 0件のときの「準備中」ブロック */
.prep{
  text-align:center;background:#fff;border:3px dashed var(--orange);border-radius:var(--radius-lg);
  padding:34px 22px;box-shadow:var(--shadow);
}
.prep__icon{
  width:64px;height:64px;border-radius:50%;background:var(--cream-deep);color:var(--orange);
  display:grid;place-items:center;margin:0 auto 14px;
}
.prep__icon .micon{font-size:34px}
.prep__title{font-size:19px;font-weight:700;margin-bottom:8px}
.prep__text{font-size:14px;line-height:1.95}
.prep__badge{
  display:inline-block;margin-top:14px;background:var(--yellow);color:var(--navy);
  font-family:var(--ff-round);font-weight:700;font-size:13px;border-radius:999px;padding:7px 20px;
}

.more-link{text-align:center;margin-top:28px}

/* ---------------------------------------------------------
   13. FAQ
   --------------------------------------------------------- */
.faq{max-width:860px;margin-inline:auto}
.faq__item{
  background:#fff;border:2px solid var(--line);border-radius:var(--radius);
  margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow);
}
.faq__q{
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;
  padding:18px 46px 18px 18px;cursor:pointer;position:relative;font-family:var(--ff-round);
  font-weight:700;font-size:15px;color:var(--ink);line-height:1.6;
}
.faq__q::before{
  content:"Q";flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--grad-cta);
  color:#fff;display:grid;place-items:center;font-size:14px;
}
.faq__q::after{
  content:"";position:absolute;right:20px;top:24px;width:11px;height:11px;
  border-right:3px solid var(--orange);border-bottom:3px solid var(--orange);
  transform:rotate(45deg);transition:transform .25s ease;
}
.faq__item.is-open .faq__q::after{transform:rotate(-135deg);top:28px}
.faq__a{display:none;padding:0 18px 20px 58px;font-size:14px;line-height:2}
.faq__item.is-open .faq__a{display:block}
@media (min-width:768px){.faq__q{font-size:17px}.faq__a{font-size:15px}}

/* ---------------------------------------------------------
   14. エリア
   --------------------------------------------------------- */
/* 「日本全国対応」のバナー */
.area__banner{
  display:block;max-width:1000px;margin:0 auto 30px;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-lg);border:3px solid #fff;
}
.area__banner img{width:100%;height:auto;display:block}
@media (min-width:768px){.area__banner{margin-bottom:40px}}

/* 地方別カード */
.area__grid{display:grid;gap:14px;grid-template-columns:1fr;max-width:1000px;margin-inline:auto}
@media (min-width:768px){.area__grid{grid-template-columns:repeat(2,1fr);gap:16px}}
.area__card{
  background:#fff;border:2px solid var(--line);border-radius:var(--radius-lg);
  padding:18px 20px;box-shadow:var(--shadow);
}
.area__label{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-round);font-weight:700;font-size:13.5px;color:#fff;
  background:var(--navy);border-radius:999px;padding:5px 16px;margin-bottom:10px;
}
.area__label .micon{font-size:17px;color:var(--yellow)}
.area__pref{font-size:13.5px;line-height:1.95}
@media (min-width:768px){.area__card{padding:22px 24px}.area__pref{font-size:14.5px}}

.area__note{
  display:flex;align-items:flex-start;gap:9px;max-width:1000px;margin:22px auto 0;
  background:var(--cream);border:2px dashed var(--line);border-radius:var(--radius);
  padding:15px 18px;font-size:13px;line-height:1.9;
}
.area__note .micon{font-size:20px;color:var(--orange);flex-shrink:0;margin-top:1px}
@media (min-width:768px){.area__note{font-size:14px;padding:18px 22px}}

/* 旧スタイル（single.php の情報カードで流用中） */
.area__box{
  background:#fff;border-radius:var(--radius-lg);padding:26px 22px;box-shadow:var(--shadow);
  border:2px solid var(--line);
}
.area__row{margin-bottom:16px}
.area__row:last-child{margin-bottom:0}

/* ---------------------------------------------------------
   15. 最終CTA
   --------------------------------------------------------- */
/* 最終CTA。写真の上に濃紺の幕を重ねて、その上にドットと光を乗せている */
.final{
  position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;
  padding:56px 0;text-align:center;isolation:isolate;
}
@media (min-width:768px){.final{padding:86px 0}}
.final__photo{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  background-image:var(--final-bg);background-size:cover;background-position:center;
}
.final__veil{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  /* 幕を少し薄くして写真を見せる。文字が白なので下げすぎないこと */
  background:linear-gradient(180deg,rgba(8,21,51,.84) 0%,rgba(14,33,73,.78) 45%,rgba(8,21,51,.86) 100%);
}
.final__deco{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(560px 300px at 8% 10%, rgba(255,107,24,.30), transparent 68%),
    radial-gradient(520px 300px at 94% 90%, rgba(65,179,242,.22), transparent 68%),
    radial-gradient(rgba(255,255,255,.20) 1.5px,transparent 1.5px);
  background-size:auto,auto,20px 20px}
.final__title{font-size:24px;font-weight:700;color:#fff;margin-bottom:14px;line-height:1.5}
@media (min-width:768px){.final__title{font-size:36px}}
.final__lead{font-size:14.5px;line-height:2;color:#dbe5f8;max-width:720px;margin:0 auto 26px}
@media (min-width:768px){.final__lead{font-size:16px}}
.final__note{margin-top:18px;font-size:12.5px;color:#b9c9e6}

/* ---------------------------------------------------------
   16. フッター
   --------------------------------------------------------- */
.site-footer{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--navy-deep);color:#a9b8d4;padding:44px 0 96px;font-size:13px;
}
.site-footer::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(620px 320px at 4% 0%, rgba(255,107,24,.20), transparent 66%),
    radial-gradient(520px 300px at 98% 100%, rgba(65,179,242,.16), transparent 66%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 16px),
    radial-gradient(rgba(255,255,255,.10) 1.2px, transparent 1.2px);
  background-size:auto,auto,auto,22px 22px;
}
@media (min-width:768px){.site-footer{padding:60px 0 44px}}
.foot__grid{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:768px){.foot__grid{grid-template-columns:1.6fr 1fr 1fr}}

/* ★ヘッダーと同じ「マーク＋サイト名」に揃える */
.foot__logo{display:inline-flex;align-items:center;gap:11px;margin-bottom:16px}
.foot__logo .logo__mark{width:46px;height:46px;font-size:21px}
.foot__logo-img{width:auto;height:52px;object-fit:contain;flex-shrink:0}
.foot__logo-txt{display:flex;flex-direction:column;line-height:1.2}
.foot__name{font-family:var(--ff-round);font-weight:700;font-size:18px;color:#fff}
.foot__sub{font-size:10px;font-weight:700;color:#8194b5;letter-spacing:.08em}
@media (min-width:768px){
  .foot__logo-img{height:60px}
  .foot__name{font-size:20px}
  .foot__sub{font-size:10.5px}
}
.foot__desc{line-height:1.95;margin-bottom:14px}
.foot__badges{display:flex;flex-wrap:wrap;gap:7px}
.foot__badges span{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:4px 12px;font-size:11.5px;font-weight:700;
}
.foot__col h4{font-family:var(--ff-round);font-weight:700;font-size:14px;color:#fff;margin-bottom:12px}
.foot__col a{display:block;padding:6px 0;color:#a9b8d4;transition:color .2s}
.foot__col a:hover{color:var(--yellow)}
/* 公開予定を含むサイトマップ。実在しないページは薄いグレーの文字で出す */
.foot__plan{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.foot__plan-ttl{font-family:var(--ff-round);font-weight:700;font-size:14px;color:#fff;margin-bottom:16px}
.foot__plan-note{font-family:var(--ff);font-weight:400;font-size:11px;color:#8194b5;margin-left:6px}
.foot__plan-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:768px){.foot__plan-grid{grid-template-columns:repeat(3,1fr);gap:26px}}
.foot__plan-col h4{
  font-family:var(--ff-round);font-weight:700;font-size:12.5px;color:var(--yellow);
  margin-bottom:9px;letter-spacing:.02em;
}
.foot__plan-col ul{list-style:none;padding:0;margin:0}
.foot__plan-col li{position:relative;padding-left:13px;font-size:12.5px;line-height:1.5;margin-bottom:7px}
.foot__plan-col li::before{
  content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;border-radius:50%;background:var(--orange);
}
.foot__plan-col li a{color:#a9b8d4;transition:color .2s}
.foot__plan-col li a:hover{color:var(--yellow)}
.foot__plan-col li.is-soon{color:#66789a}
.foot__plan-col li.is-soon::before{background:rgba(255,255,255,.22)}

.foot__area{
  margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  font-size:11.5px;line-height:1.9;color:#8194b5;
}
.foot__bottom{margin-top:14px;font-size:11.5px;line-height:1.9;color:#8194b5}

/* モバイル固定バー */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:880;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:100vw;box-sizing:border-box;
  gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);box-shadow:0 -6px 20px rgba(14,33,73,.14);
}
@media (min-width:768px){.mobile-bar{display:none}}
.mobile-bar a{
  display:flex;align-items:center;justify-content:center;gap:7px;border-radius:14px;padding:11px 6px;
  font-family:var(--ff-round);font-weight:700;font-size:13.5px;line-height:1.25;text-align:left;
}
.mobile-bar a small{display:block;font-size:10px;font-weight:700;opacity:.9}
.mobile-bar .mb--doc{background:var(--grad-cta);color:#fff}
.mobile-bar .mb--talk{background:var(--navy);color:#fff}
.mobile-bar .micon{font-size:21px}

/* ---------------------------------------------------------
   17. パンくず・下層ページ最小限
   --------------------------------------------------------- */
.breadcrumb{background:var(--cream);font-size:11.5px;padding:9px 0;color:var(--muted)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;padding:0;margin:0}
.breadcrumb__sep{margin:0 4px;color:var(--line)}
.breadcrumb a{color:var(--orange)}

.page-head{background:var(--grad-hero);color:#fff;padding:38px 0;text-align:center}
.page-head h1{color:#fff;font-size:24px;font-weight:700}
@media (min-width:768px){.page-head{padding:56px 0}.page-head h1{font-size:34px}}

.entry{max-width:820px;margin:44px auto;padding-inline:18px}
.entry h2{font-size:21px;margin:36px 0 14px;padding:10px 16px;background:var(--cream);border-left:6px solid var(--orange);border-radius:0 12px 12px 0}
.entry h3{font-size:18px;margin:28px 0 12px}
.entry p{margin-bottom:16px;line-height:2}

/* ---------------------------------------------------------------
   旧サイトから引き継いだ記事（378本）が崩れないようにする
   ★旧記事の画像は width="800" のように幅が直書きされている（316本）。
     max-width を当てないとスマホで確実に横にはみ出す。
     height:auto をセットで当てないと縦横比がつぶれる。
   --------------------------------------------------------------- */
.entry img{border-radius:var(--radius);max-width:100%;height:auto}
.entry iframe,.entry video,.entry embed,.entry object{max-width:100%;border:0}
.entry iframe:not(.wp-embedded-content){aspect-ratio:16/9;height:auto;width:100%}
/* ★WordPressが自動で作る「記事カード」の埋め込み iframe。
   既定では position:absolute のまま幅が親を無視するため、375px幅で
   ページ全体が18px横スクロールしていた。流し込みに戻して幅を親に合わせる。 */
.entry .wp-embedded-content{position:static!important;width:100%!important;max-width:100%!important;height:auto;aspect-ratio:4/3;clip:auto!important}
/* 表・コード・長いURLは、ページ全体を横スクロールさせず自分の中で収める */
.entry table{display:block;width:100%;overflow-x:auto;border-collapse:collapse}
.entry pre{overflow-x:auto}
.entry a{overflow-wrap:anywhere}
/* 旧記事は本文に生のURLがそのまま貼られている。折り返せないと横スクロールする */
.entry p,.entry li,.entry td{overflow-wrap:anywhere}
.entry ul,.entry ol{margin:0 0 16px;padding-left:1.4em;line-height:2}
.entry li{margin-bottom:6px}
.entry blockquote{margin:0 0 16px;padding:14px 18px;background:var(--cream);border-left:4px solid var(--teal);border-radius:0 10px 10px 0}
/* 旧サイトから引き継いだ「サロン様の声」の店舗情報 */
.entry .z-dl{margin:0 0 22px;padding:16px 18px;background:var(--cream);border-radius:14px}
.entry .z-dl dt{font-weight:700;font-size:13px;color:var(--teal-dark,#0f3c47);margin-top:10px}
.entry .z-dl dt:first-child{margin-top:0}
.entry .z-dl dd{margin:2px 0 0;line-height:1.9;overflow-wrap:anywhere}
.entry .z-qa{margin:0 0 6px;font-size:17px;line-height:1.6;padding:12px 16px;background:var(--cream);border-left:5px solid var(--pink,#ff2d7a);border-radius:0 12px 12px 0}
.entry .z-qa+p{margin-bottom:24px}
.entry figure{margin:0 0 18px;max-width:100%}
.entry figcaption{font-size:13px;color:var(--muted);margin-top:6px}
/* 旧WordPressの回り込みクラス。スマホでは回り込ませない */
.entry .alignleft,.entry .alignright,.entry .aligncenter{display:block;margin:0 auto 16px;float:none}
.entry .wp-caption{width:auto!important;max-width:100%}
.entry .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.entry .gallery br{display:none}
.entry .gallery-item{margin:0!important;width:auto!important}
/* 旧サイトのJetpackフォームを置き換えた案内 */
.entry__legacy-cta{margin:24px 0;padding:14px 18px;background:var(--cream);border-radius:12px;text-align:center;font-weight:700}
@media (min-width:768px){
	.entry .alignleft{float:left;margin:0 20px 12px 0}
	.entry .alignright{float:right;margin:0 0 12px 20px}
}

/* =========================================================
   18. 3D増毛サイト用の追加・上書き
   （流用元テンプレの配色・パーツをこの下でまとめて調整している。
     2026-08-20 改訂：清潔感重視／紫・ゴールドは使わない）
   ========================================================= */

/* --- 見出しのウェイト。Zen Kaku Gothic New は 800 を持たないので 700/900 に寄せる --- */
h1,h2,h3,h4,.sec-head__title,.type__name,.card__title,.flow__title,.prep__title{font-weight:700}
.hero__title,.hcopy__title,.final__title,.answer__title,.conc__ttl,.midcta__title,.stats__num{font-weight:900}

/* ---------------------------------------------------------
   ロゴ（インラインSVG。画像ファイルを使わないので常に鮮明）
   --------------------------------------------------------- */
.logo{gap:10px}
.logo__svg{display:block;height:40px;width:auto;flex-shrink:0}
@media (min-width:1300px){.logo__svg{height:48px}}
@media (max-width:359px){.logo__svg{height:34px}}
.logo__name{font-family:var(--ff-round);font-weight:900;font-size:17px;color:var(--ink);letter-spacing:.01em}
.logo__sub{font-size:9.5px;font-weight:700;color:var(--orange);letter-spacing:.08em}
@media (min-width:1500px){.logo__name{font-size:19px}.logo__sub{font-size:10.5px}}
.foot__logo-svg{display:block;height:52px;width:auto;flex-shrink:0}
.foot__name{font-family:var(--ff-round);font-weight:900;font-size:19px;color:#fff}
.foot__sub{font-size:10px;font-weight:700;color:var(--yellow);letter-spacing:.08em}

/* ---------------------------------------------------------
   ヒーロー（明るい写真の上に文字を置く「清潔感」型）
   --------------------------------------------------------- */
.hero--photo{background:#fff;color:var(--text);isolation:isolate}
.hero--photo .hero__photo{
  position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-bg);background-size:cover;background-position:52% 45%;
}
/* 写真の上に白の幕。左〜中央を強めに白くして、文字がどの幅でも読めるようにする */
.hero--photo .hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.72) 42%,rgba(255,255,255,.90) 100%),
    linear-gradient(90deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 55%);
}
@media (min-width:768px){
  .hero--photo .hero__photo{background-position:46% 46%}
  .hero--photo .hero__scrim{
    background:
      linear-gradient(180deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.36) 45%,rgba(255,255,255,.78) 100%),
      linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.60) 44%,rgba(255,255,255,.08) 100%);
  }
}
.hero--photo .hero__inner{padding:34px 0 40px}
@media (min-width:768px){
  .hero--photo .hero__inner{padding:78px 0 88px;text-align:left}
  .hero--photo .hero__copy{max-width:670px}
  .hero--photo .hero__cta,.hero--photo .hero__badges{justify-content:flex-start}
  .hero--photo .hero__lead{margin-left:0}
}
.hero--photo .hero__eyebrow{
  background:#fff;border:2px solid var(--orange);color:var(--orange);
  box-shadow:0 6px 16px rgba(255,45,122,.16);
}
.hero--photo .hero__eyebrow .dot{background:var(--orange);box-shadow:0 0 0 4px rgba(255,45,122,.18)}
.hero--photo .hero__title{color:var(--ink);text-shadow:0 2px 18px rgba(255,255,255,.85)}
.hero--photo .hero__title .big{
  background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.08em;
}
.hero--photo .hero__lead{color:var(--text);text-shadow:0 1px 12px rgba(255,255,255,.9)}
.hero--photo .hero__badges span{
  background:#fff;border:1.5px solid var(--line);color:var(--ink);
  box-shadow:0 4px 12px rgba(15,60,71,.07);
}
.hero--photo .hero__badges span::before{color:var(--orange)}
.hero--photo .hero__curve path{fill:#ffffff}
/* 白ヒーローでは blob と dots は出さない（清潔感が濁る） */
.hero--photo .hero__blob,.hero--photo .hero__dots{display:none}

/* ---------------------------------------------------------
   濃色まわり（ディープティール＋ピンク／アクアの光）
   --------------------------------------------------------- */
.stats::before{
  background-image:
    radial-gradient(500px 260px at 6% 0%, rgba(255,45,122,.32), transparent 66%),
    radial-gradient(460px 240px at 96% 100%, rgba(18,199,182,.26), transparent 66%),
    radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.2px);
  background-size:auto,auto,20px 20px;
}
.section--navy::before{
  background-image:
    radial-gradient(640px 340px at 6% 6%, rgba(255,45,122,.26), transparent 68%),
    radial-gradient(560px 320px at 96% 94%, rgba(18,199,182,.24), transparent 68%),
    radial-gradient(420px 260px at 78% 4%, rgba(63,201,224,.16), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 16px),
    radial-gradient(rgba(255,255,255,.15) 1.3px, transparent 1.3px);
  background-size:auto,auto,auto,auto,22px 22px;
}
.section--navy::after{background:linear-gradient(180deg,rgba(8,38,46,.55),transparent)}
.final__veil{
  background:linear-gradient(180deg,rgba(8,38,46,.86) 0%,rgba(15,60,71,.78) 45%,rgba(8,38,46,.88) 100%);
}
.final__deco{
  background-image:
    radial-gradient(560px 300px at 8% 10%, rgba(255,45,122,.32), transparent 68%),
    radial-gradient(520px 300px at 94% 90%, rgba(18,199,182,.24), transparent 68%),
    radial-gradient(rgba(255,255,255,.20) 1.5px,transparent 1.5px);
  background-size:auto,auto,20px 20px;
}
.final__lead{color:#dcecef}
.final__note{color:#b8ced3}
.site-footer{color:#b8ced3}
.site-footer::before{
  background-image:
    radial-gradient(620px 320px at 4% 0%, rgba(255,45,122,.20), transparent 66%),
    radial-gradient(520px 300px at 98% 100%, rgba(18,199,182,.16), transparent 66%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 16px),
    radial-gradient(rgba(255,255,255,.10) 1.2px, transparent 1.2px);
  background-size:auto,auto,auto,22px 22px;
}
.foot__col a,.foot__plan-col li a{color:#b8ced3}
.foot__plan-col li.is-soon{color:#7c959b}
.foot__plan-note,.foot__area,.foot__bottom{color:#93aeb4}
.answer__text,.conc__txt,.conc__step-sub{color:#dcecef}

/* 写真を敷くセクションの幕。白を強めにして清潔感を出す */
.section--photo::after{
  background:linear-gradient(180deg,rgba(255,255,255,.84) 0%,rgba(255,255,255,.74) 45%,rgba(253,247,249,.88) 100%);
}

/* ---------------------------------------------------------
   お悩みカード（写真なし・アイコンのみ版）
   --------------------------------------------------------- */
.trouble__grid--icon{grid-template-columns:1fr}
@media (min-width:640px){.trouble__grid--icon{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.trouble__grid--icon{grid-template-columns:repeat(3,1fr)}}
.trouble__item--icon{
  padding:26px 20px 22px;background:#fff;border:2px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
}
.trouble__icon--solo{
  position:static;transform:none;width:60px;height:60px;margin:0 auto 4px;
  background:var(--pink-soft);color:var(--orange);border:0;box-shadow:none;
}
.trouble__icon--solo .micon{font-size:31px}
.trouble__item--icon .trouble__body{padding:10px 0 0}

/* ---------------------------------------------------------
   導入メニュー（3枚）
   --------------------------------------------------------- */
@media (min-width:1024px){.types__grid--3{grid-template-columns:repeat(3,1fr);gap:24px}}
.type__link{
  display:inline-block;margin-top:14px;font-family:var(--ff-round);font-weight:700;
  font-size:13.5px;color:var(--orange);
}
.type__img{aspect-ratio:4/3}
.type--pick{border-color:var(--orange);background:#fff8fb;box-shadow:0 22px 46px rgba(255,45,122,.20)}
.type__for{background:var(--mint-soft);color:var(--navy)}
.type--pick .type__for{background:var(--pink-soft)}
.type__list li::before{color:var(--yellow)}

/* ---------------------------------------------------------
   比較表・VSカード（グレーは青みの効いた「清潔なグレー」に）
   --------------------------------------------------------- */
.vs__card--bad{background:#f4f7f8;border-color:#dfe8ea}
.vs__card--bad .vs__head{background:#dfe8ea;color:#7d8f95}
.vs__card--bad .vs__list li{color:#7d8f95}
.vs__card--bad .vs__list li::before{color:#a9bcc1}
.cmp__a{background:#f4f7f8;color:#7d8f95}
@media (min-width:768px){.cmp__label{color:#9dc0c7}}

/* サポートカードのアイコン（2枚目のピンク直値をトークンへ） */
.card:nth-child(2) .card__icon{background:linear-gradient(135deg,#ff7aa8,#ffa8c6)}

/* お悩み別メニューのヘッダー色（ピンク／アクア／ティール） */
.scene--a .scene__head{background:linear-gradient(135deg,#ff2d7a,#ff6f9f)}
.scene--b .scene__head{background:linear-gradient(135deg,#12c7b6,#3fc9e0)}
.scene--c .scene__head{background:linear-gradient(135deg,#0f3c47,#1d6a7c)}

/* ---------------------------------------------------------
   ギャラリー（ビフォーアフター）
   --------------------------------------------------------- */
.gallery{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.gallery{grid-template-columns:repeat(3,1fr);gap:14px}}
@media (min-width:1024px){.gallery{grid-template-columns:repeat(4,1fr);gap:16px}}
.gallery__item{
  margin:0;border-radius:var(--radius);overflow:hidden;background:var(--cream-deep);
  box-shadow:var(--shadow);border:2px solid #fff;
}
.gallery__item img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.gallery__item:hover img{transform:scale(1.06)}
.gallery__note{
  display:flex;align-items:flex-start;gap:9px;max-width:900px;margin:22px auto 0;
  background:var(--cream);border:2px dashed var(--line);border-radius:var(--radius);
  padding:15px 18px;font-size:13px;line-height:1.9;
}
.gallery__note .micon{font-size:20px;color:var(--orange);flex-shrink:0;margin-top:1px}

/* ---------------------------------------------------------
   加盟店サポート（濃色セクションの9項目）
   --------------------------------------------------------- */
.support{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.support{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (min-width:1024px){.support{grid-template-columns:repeat(3,1fr);gap:18px}}
.support__item{
  position:relative;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);padding:22px 20px 20px;
}
.support__no{
  position:absolute;right:14px;top:10px;font-family:var(--ff-round);font-weight:900;
  font-size:30px;line-height:1;color:rgba(255,255,255,.14);
}
.support__icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:12px;
  background:var(--grad-cta);color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.support__icon .micon{font-size:27px}
.support__title{font-family:var(--ff-round);font-weight:700;font-size:16.5px;color:#fff;margin-bottom:7px;line-height:1.5}
.support__text{font-size:13.5px;line-height:1.9;color:#d6e6e9}

/* ---------------------------------------------------------
   技術の覚え方（セミナーセクション）
   --------------------------------------------------------- */
.seminar__ways{display:grid;gap:14px;grid-template-columns:1fr;margin-top:34px}
@media (min-width:1024px){.seminar__ways{grid-template-columns:repeat(3,1fr);gap:18px}}
.seminar__way{
  display:flex;gap:14px;align-items:flex-start;background:var(--cream);
  border:2px solid var(--line);border-radius:var(--radius-lg);padding:20px 18px;box-shadow:var(--shadow);
}
.seminar__icon{
  flex-shrink:0;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:#fff;color:var(--orange);box-shadow:var(--shadow);
}
.seminar__icon .micon{font-size:26px}
.seminar__ttl{font-family:var(--ff-round);font-weight:700;font-size:15.5px;color:var(--ink);margin-bottom:5px;line-height:1.5}
.seminar__txt{font-size:13px;line-height:1.9}
.seminar__photo{
  display:block;max-width:880px;margin:0 auto 30px;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-lg);border:3px solid #fff;
}
.seminar__photo img{width:100%;height:auto;display:block}

/* ---------------------------------------------------------
   導入費用の3ステップ
   --------------------------------------------------------- */
.price3{list-style:none;padding:0;margin:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:768px){.price3{grid-template-columns:repeat(3,1fr);gap:20px}}
.price3__item{
  position:relative;background:#fff;border:2px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 20px 22px;text-align:center;box-shadow:var(--shadow);
}
.price3__item--pick{border-color:var(--orange);background:#fff8fb;box-shadow:0 20px 42px rgba(255,45,122,.18)}
.price3__step{
  display:inline-block;font-family:var(--ff-round);font-weight:700;font-size:11.5px;letter-spacing:.12em;
  color:#fff;background:var(--navy);border-radius:999px;padding:4px 15px;margin-bottom:12px;
}
.price3__item--pick .price3__step{background:var(--grad-cta)}
.price3__name{font-family:var(--ff-round);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:6px}
.price3__num{
  font-family:var(--ff-round);font-weight:900;line-height:1.25;font-size:28px;margin-bottom:12px;
  background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.price3__num span{font-size:.5em;-webkit-text-fill-color:var(--ink);color:var(--ink);margin-left:3px}
.price3__txt{font-size:13.5px;line-height:1.95;text-align:left}
.price3__txt b{color:var(--orange)}
@media (min-width:768px){.price3__num{font-size:32px}}

/* ---------------------------------------------------------
   代表講師の紹介
   --------------------------------------------------------- */
.ceo{
  display:grid;gap:22px;grid-template-columns:1fr;align-items:center;
  max-width:1000px;margin-inline:auto;background:#fff;
  border:2px solid var(--line);border-radius:var(--radius-xl);
  padding:26px 22px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.ceo::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--grad-cta);
}
@media (min-width:768px){
  .ceo{grid-template-columns:300px 1fr;gap:36px;padding:34px 38px 34px 42px}
}
.ceo__photo{
  border-radius:var(--radius-lg);overflow:hidden;background:var(--cream);
  box-shadow:0 14px 32px rgba(15,60,71,.14);max-width:280px;margin-inline:auto;
}
.ceo__photo img{width:100%;height:auto;display:block}
.ceo__role{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-round);font-weight:700;
  font-size:12px;letter-spacing:.08em;color:#fff;background:var(--grad-cta);
  border-radius:999px;padding:5px 16px;margin-bottom:12px;box-shadow:var(--shadow-cta);
}
.ceo__name{font-family:var(--ff-round);font-weight:900;font-size:26px;color:var(--ink);line-height:1.35;margin-bottom:4px}
.ceo__name small{display:block;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.14em;margin-top:5px}
.ceo__title{font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:14px}
.ceo__text{font-size:14px;line-height:2;margin-bottom:16px}
.ceo__text b{color:var(--orange)}
.ceo__list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.ceo__list li{
  display:inline-flex;align-items:center;gap:5px;background:var(--mint-soft);
  border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;color:var(--navy);
}
.ceo__list li::before{content:"✓";color:var(--yellow);font-weight:900}
@media (min-width:768px){
  .ceo__name{font-size:30px}
  .ceo__text{font-size:15px}
}

/* ---------------------------------------------------------
   動画
   --------------------------------------------------------- */
.movies{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:768px){.movies{grid-template-columns:repeat(2,1fr);gap:22px}}
.movie{
  background:#fff;border:2px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.movie video{width:100%;height:auto;display:block;background:#08262e;aspect-ratio:16/9;object-fit:cover}
.movie__body{padding:16px 18px 20px}
.movie__ttl{font-family:var(--ff-round);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:6px;line-height:1.5}
.movie__txt{font-size:13px;line-height:1.9;color:var(--muted)}
.movie__note{
  display:flex;align-items:flex-start;gap:9px;max-width:900px;margin:22px auto 0;
  background:var(--cream);border:2px dashed var(--line);border-radius:var(--radius);
  padding:15px 18px;font-size:13px;line-height:1.9;
}
.movie__note .micon{font-size:20px;color:var(--orange);flex-shrink:0;margin-top:1px}

/* ---------------------------------------------------------
   細かい調整
   --------------------------------------------------------- */
.section--navy .card__title{color:var(--ink)}
.stats__num small{opacity:.9}
.sec-head__lead{line-height:2}
/* マーカーはピンクの下線に（黄色マーカーは配色から浮くため） */
.mk{background:linear-gradient(transparent 62%,rgba(255,45,122,.22) 62%)}

/* ロゴのワードマークは「3D増毛」を強く、「エクステ」を少し軽く見せる */
.logo__name em,.foot__name em{font-style:normal;font-weight:700;opacity:.72;margin-left:1px}
.logo__svg{height:44px}
@media (min-width:1300px){.logo__svg{height:52px}}
@media (max-width:359px){.logo__svg{height:36px}}

/* =========================================================
   19. 2026-08-20 の修正（吉田さんフィードバック）
   ・電話番号の導線をトップバー／ヒーロー／中間CTA／フッター／モバイルバーに追加
   ・「向いているサロン」「加盟店サポート」に写真を追加
   ・導入の流れにアイコン、中間CTAのバランス調整、フッターの作り込み
   ========================================================= */

/* --- トップバー：メッセージ＋電話 --- */
.topbar{
  display:flex;align-items:center;justify-content:center;gap:10px 18px;flex-wrap:wrap;
  padding:7px 14px;
}
.topbar__msg{display:block}
.topbar__tel{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);
  border-radius:999px;padding:3px 14px;white-space:nowrap;
}
.topbar__tel .micon{font-size:16px}
.topbar__tel b{font-size:13px;letter-spacing:.02em}
.topbar__tel em{font-style:normal;font-size:10.5px;opacity:.9;font-weight:500}
@media (min-width:768px){
  .topbar__tel b{font-size:14.5px}
  .topbar__tel em{font-size:11.5px}
}
@media (max-width:479px){.topbar__tel em{display:none}}

/* --- ヒーローの電話行 --- */
.hero__tel{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;
  margin:16px auto 0;background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:8px 18px;box-shadow:var(--shadow);
  font-size:12.5px;font-weight:700;color:var(--ink);
}
.hero__tel .micon{font-size:19px;color:var(--orange)}
.hero__tel a{
  font-family:var(--ff-round);font-weight:900;font-size:19px;color:var(--orange);
  letter-spacing:.01em;
}
.hero__tel small{font-size:11px;font-weight:500;color:var(--muted)}
@media (min-width:768px){
  .hero--photo .hero__tel{margin-left:0}
  .hero__tel{font-size:13.5px}
  .hero__tel a{font-size:22px}
}

/* --- 向いているサロン：写真つきカード --- */
.fit--photo .fit__item{padding:0;overflow:hidden;text-align:left}
.fit__photo{
  position:relative;display:block;background:var(--cream-deep);
  border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
}
.fit__photo img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.fit__item:hover .fit__photo img{transform:scale(1.06)}
.fit--photo .fit__icon{
  position:absolute;left:16px;bottom:-22px;margin:0;width:48px;height:48px;
  border-radius:15px;background:#fff;color:var(--orange);
  box-shadow:0 8px 18px rgba(15,60,71,.18);transform:none;
}
.fit--photo .fit__icon .micon{font-size:26px;transform:none}
.fit--photo .fit__title{margin:32px 20px 7px;font-size:16px}
.fit--photo .fit__text{margin:0 20px 22px;font-size:13px}

/* --- 加盟店サポート：販促物の実物写真つき --- */
.support__item{padding:0;overflow:hidden;display:flex;flex-direction:column}
.support__photo{
  display:block;background:#fff;border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
  overflow:hidden;
}
.support__photo img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center top;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.support__item:hover .support__photo img{transform:scale(1.05)}
.support__no{top:auto;right:16px;bottom:auto;margin-top:0}
.support__item .support__no{position:absolute;right:16px;top:auto;bottom:0;transform:translateY(-100%)}
.support__icon{margin:-26px 0 12px 20px;border:4px solid rgba(255,255,255,.14)}
.support__title{margin:0 20px 7px}
.support__text{margin:0 20px 22px}
/* 写真が無い項目でも崩れないように */
.support__item:not(:has(.support__photo)) .support__icon{margin:22px 0 12px 20px}

/* --- 導入の流れ：見出しにアイコン --- */
.flow__item--icon .flow__title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flow__icon{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;flex-shrink:0;
  background:var(--mint-soft);color:var(--navy);
}
.flow__icon .micon{font-size:20px}
@media (min-width:768px){
  .flow__icon{width:38px;height:38px;border-radius:12px}
  .flow__icon .micon{font-size:22px}
}

/* --- 中間CTA：バランス調整＋電話 --- */
.midcta{padding:38px 0}
@media (min-width:768px){.midcta{padding:52px 0}}
.midcta__inner{max-width:1000px;margin-inline:auto;gap:24px}
@media (min-width:900px){.midcta__inner{align-items:center;gap:40px}}
.midcta__lead{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;margin-bottom:8px}
.midcta__lead .micon{font-size:19px}
.midcta__title{font-size:23px}
@media (min-width:768px){.midcta__title{font-size:29px}}
.midcta__sub{margin-top:10px;font-size:13px;line-height:1.9;opacity:.95}
.midcta__act{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0;width:100%}
@media (min-width:900px){.midcta__act{width:auto;min-width:300px}}
.midcta__tel{
  display:inline-flex;align-items:center;gap:11px;width:100%;max-width:340px;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.5);
  border-radius:999px;padding:10px 20px;color:#fff;transition:background .2s ease;
}
.midcta__tel:hover{background:rgba(255,255,255,.24)}
.midcta__tel .micon{font-size:25px;flex-shrink:0}
.midcta__tel-txt{display:flex;flex-direction:column;line-height:1.3}
.midcta__tel-txt small{font-size:10.5px;font-weight:700;opacity:.92}
.midcta__tel-txt strong{font-family:var(--ff-round);font-weight:900;font-size:20px;letter-spacing:.01em}
.midcta__tel-txt em{font-style:normal;font-size:10px;opacity:.88}

/* --- フッター：連絡先カード --- */
.foot__contact{
  display:grid;gap:12px;grid-template-columns:1fr;
  margin-bottom:34px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.14);
}
@media (min-width:768px){.foot__contact{grid-template-columns:repeat(3,1fr);gap:16px}}
.foot__card{
  display:flex;align-items:center;gap:13px;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);padding:16px 18px;transition:background .2s ease,transform .2s ease;
}
.foot__card:hover{background:rgba(255,255,255,.13);transform:translateY(-3px)}
.foot__card-ic{
  width:46px;height:46px;border-radius:15px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:var(--yellow);
}
.foot__card--tel .foot__card-ic{background:var(--grad-mint);color:#08262e}
.foot__card--cta{background:var(--grad-cta);border-color:transparent;box-shadow:var(--shadow-cta)}
.foot__card--cta .foot__card-ic{background:rgba(255,255,255,.22);color:#fff}
.foot__card--cta:hover{background:var(--grad-cta);filter:brightness(1.06)}
.foot__card-ic .micon{font-size:25px}
.foot__card-txt{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.foot__card-txt small{font-size:11px;font-weight:700;color:#a9c3c8}
.foot__card--cta .foot__card-txt small{color:rgba(255,255,255,.9)}
.foot__card-txt strong{font-family:var(--ff-round);font-weight:900;font-size:21px;color:#fff;letter-spacing:.01em}
.foot__card-txt em{font-style:normal;font-size:10.5px;color:#8fa9af;margin-top:2px}
.foot__card--cta .foot__card-txt em{color:rgba(255,255,255,.85)}

/* --- フッター：会社情報の定義リスト --- */
.foot__info{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.foot__info-list{margin:0;display:grid;gap:8px 26px;grid-template-columns:1fr}
@media (min-width:768px){.foot__info-list{grid-template-columns:1fr 1fr}}
.foot__info-list > div{display:flex;gap:12px;font-size:12.5px;line-height:1.8}
.foot__info-list dt{
  flex-shrink:0;width:74px;color:var(--yellow);font-weight:700;
}
.foot__info-list dd{margin:0;color:#b8ced3}
.foot__bottom{margin-top:20px;font-size:11.5px;line-height:1.9;color:#93aeb4;text-align:center}
@media (min-width:768px){.foot__bottom{text-align:left}}

/* --- モバイル固定バー：3ボタン版 --- */
.mobile-bar--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mobile-bar--3 a{min-width:0;overflow:hidden}
.mobile-bar--3 a{font-size:12.5px;padding:10px 4px;gap:5px}
.mobile-bar--3 a small{font-size:9px}
.mobile-bar--3 .micon{font-size:19px}
.mobile-bar .mb--tel{background:var(--grad-mint);color:#08262e}

/* --- 対応エリアのバナー（支給画像） --- */
.area__banner{max-width:1120px}
.area__banner img{aspect-ratio:16/7;object-fit:cover}

/* 中間CTA：相談ボタンと電話ボックスの幅を揃える */
.midcta__act .btn--lg{width:100%;max-width:340px;min-width:0}
@media (min-width:900px){.midcta__act .btn--lg{max-width:340px}}

/* =========================================================
   20. 表示速度まわり（2026-08-20）
   ・全写真を <picture>（WebP優先）に変更
   ・ヒーローの写真を CSS背景から <img> にしてLCPを最適化
   ========================================================= */

/* <picture> は箱を作らず、中の <img> を親の直下として扱わせる。
   （既存の「.○○ img」のCSSをそのまま活かすため） */
picture{display:contents}

/* ヒーローの背景写真（LCP要素） */
.hero--photo .hero__img-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 45%;z-index:-2;
}
@media (min-width:768px){.hero--photo .hero__img-bg{object-position:46% 46%}}

/* =========================================================
   21. 仕上げ（2026-08-20）
   ・目次 / 売上シミュレーター / ギャラリーのライトボックス
   ========================================================= */

/* --- フッターの見出し（h4→p にしたので同じ見た目を維持） --- */
.foot__col-h{
  font-family:var(--ff-round);font-weight:700;font-size:14px;color:#fff;margin-bottom:12px;
}
.foot__plan-col .foot__col-h{
  font-size:12.5px;color:var(--yellow);margin-bottom:9px;letter-spacing:.02em;
}

/* ---------------------------------------------------------
   目次
   --------------------------------------------------------- */
.ptoc{background:#fff;padding:28px 0 6px}
@media (min-width:768px){.ptoc{padding:40px 0 8px}}
.ptoc__ttl{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-round);font-weight:700;font-size:14px;color:var(--ink);
  background:var(--cream);border:1.5px solid var(--line);border-radius:999px;
  padding:7px 18px;margin-bottom:16px;
}
.ptoc__ttl .micon{font-size:19px;color:var(--orange)}
.ptoc__list{
  list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;
  counter-reset:ptoc;
}
.ptoc__list li{counter-increment:ptoc}
.ptoc__list a{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:13px;font-weight:700;color:var(--ink);
  transition:border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.ptoc__list a::before{
  content:counter(ptoc,decimal-leading-zero);
  font-family:var(--ff-round);font-weight:900;font-size:11px;color:var(--orange);
}
.ptoc__list a:hover{
  border-color:var(--orange);color:var(--orange);transform:translateY(-2px);box-shadow:var(--shadow);
}
@media (min-width:768px){.ptoc__list a{font-size:13.5px;padding:9px 18px}}

/* ---------------------------------------------------------
   売上シミュレーター
   --------------------------------------------------------- */
.sim{
  display:grid;gap:22px;grid-template-columns:1fr;
  max-width:1000px;margin-inline:auto;
}
@media (min-width:900px){.sim{grid-template-columns:1.15fr 1fr;gap:30px;align-items:start}}

.sim__inputs{
  background:#fff;border:2px solid var(--line);border-radius:var(--radius-lg);
  padding:24px 22px;box-shadow:var(--shadow);
}
@media (min-width:768px){.sim__inputs{padding:30px 28px}}
.sim__row + .sim__row{margin-top:26px;padding-top:24px;border-top:1px dashed var(--line)}
.sim__label{
  display:block;font-family:var(--ff-round);font-weight:700;font-size:14.5px;
  color:var(--ink);margin-bottom:12px;
}
.sim__ctrl{display:flex;align-items:center;gap:14px}
.sim__out{
  flex-shrink:0;min-width:98px;text-align:right;
  font-family:var(--ff-round);font-weight:900;font-size:20px;
  background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.sim__hint{margin-top:9px;font-size:12px;line-height:1.8;color:var(--muted)}

/* スライダー（見た目をブランドに合わせる） */
.sim__range{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--orange) var(--p,40%),var(--line) var(--p,40%));
  outline:none;cursor:pointer;
}
.sim__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fff;border:3px solid var(--orange);box-shadow:0 4px 12px rgba(255,45,122,.35);cursor:grab;
}
.sim__range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--orange);
  box-shadow:0 4px 12px rgba(255,45,122,.35);cursor:grab;
}
.sim__range:focus-visible{box-shadow:0 0 0 4px rgba(255,45,122,.22)}

.sim__result{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--grad-hero);color:#dcecef;border-radius:var(--radius-lg);
  padding:28px 24px;box-shadow:var(--shadow-lg);text-align:center;
}
.sim__result::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(420px 240px at 8% 4%, rgba(255,45,122,.30), transparent 68%),
    radial-gradient(380px 220px at 96% 96%, rgba(18,199,182,.24), transparent 68%),
    radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.2px);
  background-size:auto,auto,20px 20px;
}
@media (min-width:768px){.sim__result{padding:34px 30px}}
.sim__result-lead{
  display:inline-block;font-family:var(--ff-round);font-weight:700;font-size:11.5px;letter-spacing:.14em;
  color:var(--navy);background:var(--yellow);border-radius:999px;padding:5px 16px;margin-bottom:14px;
}
.sim__big{
  font-family:var(--ff-round);font-weight:900;line-height:1.05;color:#fff;
  font-size:44px;letter-spacing:-.01em;margin-bottom:18px;
}
.sim__big small{font-size:.36em;margin-left:5px;font-weight:700;color:var(--yellow)}
@media (min-width:768px){.sim__big{font-size:56px}}
.sim__sub{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.sim__sub li{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:9px 15px;font-size:12.5px;
}
.sim__sub li span{color:#b8ced3}
.sim__sub li b{font-family:var(--ff-round);font-weight:900;font-size:17px;color:#fff}
.sim__note{font-size:11px;line-height:1.85;color:#a9c3c8;text-align:left;margin-bottom:16px}

/* ---------------------------------------------------------
   ギャラリーのライトボックス
   --------------------------------------------------------- */
.gallery__btn{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;
}
.gallery__zoom{
  position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--orange);
  box-shadow:0 4px 12px rgba(15,60,71,.22);opacity:0;transform:scale(.8);
  transition:opacity .2s ease,transform .2s ease;
}
.gallery__zoom .micon{font-size:20px}
.gallery__item:hover .gallery__zoom,.gallery__btn:focus-visible .gallery__zoom{opacity:1;transform:scale(1)}

.lb{
  position:fixed;inset:0;z-index:1200;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(8,38,46,.90);backdrop-filter:blur(4px);
}
.lb.is-open{display:flex}
.lb__img{
  max-width:min(92vw,900px);max-height:86vh;width:auto;height:auto;
  border-radius:var(--radius-lg);box-shadow:0 30px 80px rgba(0,0,0,.5);background:#fff;
}
.lb__close{
  position:absolute;top:16px;right:16px;width:46px;height:46px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.lb__close .micon{font-size:26px}
.lb__cap{
  position:absolute;left:0;right:0;bottom:18px;text-align:center;
  color:#dcecef;font-size:12px;padding:0 20px;
}

/* =========================================================
   22. スマホの不具合修正（2026-08-20 実機で発覚）
   ========================================================= */

/* ---------------------------------------------------------
   ★最重要：ハンバーガーメニューが開かない問題
   .site-header に backdrop-filter が付いていると、その要素が
   position:fixed の「基準」になってしまい、ドロワー（.nav.is-open）と
   閉じるボタンがヘッダーの箱の中に閉じ込められる。
   → backdrop-filter をやめる。背景は元々ほぼ不透明（.96）なので見た目は変わらない。
   --------------------------------------------------------- */
.site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.98)}
.mobile-bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}

/* ドロワーは画面いっぱいに。iOSのアドレスバー分は dvh で吸収する */
@media (max-width:1299px){
  .nav.is-open{
    height:100dvh;max-height:100dvh;
    padding:78px 20px calc(96px + env(safe-area-inset-bottom));
  }
  .nav.is-open a{font-size:16px;padding:16px 6px}
  /* ★幕を .nav の ::before で作ると、負のz-indexでも親の背景の「上」に描画され、
     ドロワー自体が半透明のグレーに見えてしまう（実機で発生）。
     幕は使わず、ドロワーを不透明にして影で浮かせる。 */
  .nav.is-open{background:#fff;box-shadow:-14px 0 50px rgba(8,38,46,.34)}
}

/* ---------------------------------------------------------
   トップバー：スマホで縦に場所を取りすぎていたので圧縮
   --------------------------------------------------------- */
.topbar{padding:6px 12px;gap:6px 14px}
.topbar__msg{font-size:11px;line-height:1.5}
@media (max-width:767px){
  .topbar{flex-wrap:nowrap;justify-content:space-between;gap:8px}
  .topbar__msg{
    font-size:10.5px;text-align:left;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  /* スマホでは長すぎる後半を隠す */
  .topbar__msg .topbar__sub{display:none}
  .topbar__tel{padding:3px 11px;gap:4px}
  .topbar__tel b{font-size:12.5px}
  .topbar__tel .micon{font-size:14px}
}
@media (min-width:768px){.topbar__msg{font-size:13px}}

/* ---------------------------------------------------------
   ヒーロー：スマホでの読みやすさ
   --------------------------------------------------------- */
@media (max-width:767px){
  /* 写真の上の白幕を強めて本文を読ませる */
  .hero--photo .hero__scrim{
    background:
      linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.86) 42%,rgba(255,255,255,.95) 100%),
      linear-gradient(90deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.2) 60%);
  }
  .hero--photo .hero__lead{color:var(--ink-soft)}
  /* 見出し上のバッジが2行になって大きすぎたので詰める */
  .hero__eyebrow{font-size:10.5px;padding:5px 14px;line-height:1.45;margin-bottom:14px}
  .hero__eyebrow .dot{width:6px;height:6px;box-shadow:0 0 0 3px rgba(255,45,122,.18)}
  .hero--photo .hero__inner{padding:26px 0 34px}
  .hero__title{font-size:26px;margin-bottom:14px}
  .hero__lead{font-size:14px;line-height:1.95;margin-bottom:20px}
  .hero__cta{gap:11px;margin-bottom:18px}
  .btn--lg{padding:16px 24px;font-size:16.5px}
}
@media (max-width:359px){
  .hero__title{font-size:23px}
  .hero__eyebrow{font-size:10px;padding:4px 12px}
}

/* ---------------------------------------------------------
   ヒーローの電話行：PCで詰まって見えていたので組み直す
   --------------------------------------------------------- */
.hero__tel{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
  margin:18px auto 0;padding:11px 20px;border-radius:16px;
  background:rgba(255,255,255,.96);border:1.5px solid var(--line);
  box-shadow:var(--shadow);text-align:left;line-height:1.5;
}
.hero__tel .micon{font-size:21px;color:var(--orange);flex-shrink:0}
.hero__tel .hero__tel-lb{font-size:12.5px;font-weight:700;color:var(--ink)}
.hero__tel a{
  font-family:var(--ff-round);font-weight:900;font-size:22px;color:var(--orange);
  letter-spacing:.02em;white-space:nowrap;
}
.hero__tel small{
  font-size:11px;font-weight:500;color:var(--muted);
  padding-left:12px;border-left:1px solid var(--line);
}
@media (max-width:767px){
  .hero__tel{
    display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;
    padding:12px 16px;margin-top:16px;
  }
  .hero__tel .micon{grid-row:1 / span 2}
  .hero__tel .hero__tel-lb{font-size:11.5px}
  .hero__tel a{font-size:24px;grid-column:2}
  .hero__tel small{
    grid-column:2;padding-left:0;border-left:0;font-size:10.5px;
  }
}
@media (min-width:768px){
  .hero--photo .hero__tel{margin-left:0;width:fit-content;padding:12px 24px}
  .hero__tel a{font-size:24px}
}

/* バッジは2行までなら詰めて見せる */
@media (max-width:767px){
  .hero__badges{gap:6px}
  .hero__badges span{font-size:10.5px;padding:5px 11px}
}

/* --- スマホのトップバーは1行に収める（2行になって窮屈だった） --- */
@media (max-width:767px){
  .topbar{padding:5px 12px}
  .topbar__msg{
    -webkit-line-clamp:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:10px;flex:1 1 auto;min-width:0;
  }
  .topbar__tel{flex-shrink:0}
}
/* --- スマホのヒーローをもう少し詰めて、CTAを画面内に入れる --- */
@media (max-width:767px){
  .hero--photo .hero__inner{padding:22px 0 30px}
  .hero__title{margin-bottom:12px}
  .hero__lead{margin-bottom:16px;line-height:1.9}
  .hero--photo .hero__lead{color:var(--text)}
  .hero--photo .hero__scrim{
    background:
      linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 42%,rgba(255,255,255,.96) 100%),
      linear-gradient(90deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.24) 60%);
  }
}

/* トップバーの文言はPCとスマホで出し分ける（スマホは省略記号が出ない長さに） */
.topbar__sp{display:none}
@media (max-width:767px){
  .topbar__pc{display:none}
  .topbar__sp{display:inline}
  .topbar__msg{font-size:11px;white-space:nowrap;overflow:visible;text-overflow:clip;flex:0 1 auto}
  .topbar{justify-content:center;gap:6px 10px}
}

/* 電話行とバッジがくっついて見えていたので間を空ける */
.hero__tel + .hero__badges{margin-top:16px}
@media (min-width:768px){.hero__tel + .hero__badges{margin-top:20px}}

/* =========================================================
   23. スマホのメインビジュアルをちゃんと見せる（2026-08-20 吉田さん指摘）
   白幕が強すぎて「文字だけ」に見えていた。
   ・文字が乗る上半分だけ白を残し、下half は写真をしっかり見せる
   ・下半分に来るのはCTAボタン・電話カード・バッジ＝どれも不透明なカードなので
     写真が透けても読みにくくならない
   ========================================================= */
@media (max-width:767px){
  .hero--photo .hero__img-bg{object-position:52% 38%}
  .hero--photo .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.90) 0%,
        rgba(255,255,255,.84) 30%,
        rgba(255,255,255,.58) 52%,
        rgba(255,255,255,.30) 74%,
        rgba(255,255,255,.60) 100%);
  }
  /* 幕を薄くしたぶん、見出しと本文は白のにじみで浮かせて可読性を保つ */
  .hero--photo .hero__title{
    text-shadow:0 2px 14px rgba(255,255,255,.95),0 0 30px rgba(255,255,255,.85);
  }
  .hero--photo .hero__lead{
    color:var(--ink);
    text-shadow:0 1px 8px rgba(255,255,255,.98),0 0 18px rgba(255,255,255,.9);
  }
  /* バッジは写真の上に来るので不透明に */
  .hero--photo .hero__badges span{background:rgba(255,255,255,.96)}
  .hero--photo .hero__eyebrow{background:rgba(255,255,255,.97)}
}

/* 写真が透けるぶん、受付時間の薄いグレーが読みにくくなるので少し濃く */
@media (max-width:767px){
  .hero--photo .hero__tel small{color:var(--ink-soft)}
  .hero--photo .hero__tel{background:rgba(255,255,255,.97)}
}

/* =========================================================
   24. 目次をスマホで整列させる（2026-08-20 吉田さん指摘）
   ピルを flex-wrap で並べていたため、1個→2個→1個…と不揃いに折り返して
   バラバラに見えていた。スマホは2列グリッドにして高さも幅も揃える。
   ========================================================= */
@media (max-width:767px){
  .ptoc{padding:24px 0 6px}
  .ptoc__ttl{display:flex;width:fit-content;margin:0 auto 14px;font-size:13px;padding:6px 16px}
  .ptoc__list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .ptoc__list li{display:flex}
  .ptoc__list a{
    width:100%;border-radius:12px;padding:11px 12px;font-size:12px;
    gap:7px;align-items:center;line-height:1.45;
  }
  .ptoc__list a::before{font-size:10.5px;flex-shrink:0}
}
/* 極小幅は1列（2列だと「3D増毛エクステとは」が3行になる） */
@media (max-width:359px){
  .ptoc__list{grid-template-columns:1fr}
  .ptoc__list a{font-size:12.5px}
}

/* =========================================================
   25. SNS（2026-08-21 追加）
        ★トップの「動画で見る」直後の枠と、フッターのアイコン列。
          埋め込みは使わずリンクのみ。表示速度を落とさないため。
        ★各社のブランドロゴは使っていない（ガイドラインが公式アセットの
          使用を条件にしているため）。ブランドカラー＋正式名称で表す。
   ========================================================= */
.sns{display:grid;gap:14px}
.sns__card{
	display:flex;align-items:center;gap:16px;
	background:#fff;border:2px solid var(--line);border-radius:var(--radius-lg);
	padding:18px 20px;text-decoration:none;transition:.22s;box-shadow:var(--shadow)}
.sns__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.sns__icon{
	flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:16px;
	color:#fff;transition:.22s}
.sns__svg{display:block;font-size:24px;line-height:1}
.sns__body{flex:1;min-width:0}
.sns__name{display:block;font-family:var(--ff-round);font-weight:700;font-size:16px;color:var(--ink);letter-spacing:.01em}
.sns__txt{display:block;margin-top:3px;font-size:12.5px;line-height:1.7;color:var(--text)}
.sns__go{flex:none;font-size:24px;font-weight:700;color:var(--muted);transition:.22s}
.sns__card:hover .sns__go{color:var(--orange);transform:translateX(3px)}

/* ブランドカラー（ロゴは使わず、色と名前で見分けてもらう） */
.sns__card--instagram .sns__icon{background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888)}
.sns__card--tiktok    .sns__icon{background:#010101}
.sns__card--youtube   .sns__icon{background:#ff0000}
.sns__card--facebook  .sns__icon{background:#1877f2}
.sns__card--instagram:hover{border-color:#dc2743}
.sns__card--tiktok:hover{border-color:#010101}
.sns__card--youtube:hover{border-color:#ff0000}
.sns__card--facebook:hover{border-color:#1877f2}

@media (min-width:768px){
	.sns{grid-template-columns:repeat(2,1fr);gap:18px}
	.sns__card{padding:20px 24px}
	.sns__name{font-size:17px}
}
@media (min-width:1100px){
	.sns{grid-template-columns:repeat(4,1fr)}
	.sns__card{flex-direction:column;text-align:center;gap:12px;padding:26px 18px}
	.sns__go{display:none}
	.sns__icon{width:60px;height:60px}
	.sns__svg{font-size:28px}
	.sns__name{font-size:18px}
}

/* ---- フッターのアイコン列（全ページ共通） ---- */
.foot__sns-h{margin-top:20px;font-size:12px;font-weight:700;color:#cfe6ea;letter-spacing:.02em}
.foot__sns{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0}
.foot__sns a{
	display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:12px;
	background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
	color:#fff;font-family:var(--ff-round);font-weight:700;font-size:12px;
	text-decoration:none;transition:.2s}
.foot__sns a:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-2px)}
.foot__sns .sns__svg{font-size:16px}

/* ---- LINE（問い合わせ窓口として扱う。SNS枠とは別） ---- */
/* ★1fr は「中身の最小幅」より縮まない。ボタン内の「10:00〜16:00」等が効いて
   375px幅で 509px まで広がり、ページ全体が横スクロールしていた（2026-08-25 実測）。
   minmax(0,1fr) にして必ず画面内に収める。 */
.mobile-bar--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.mobile-bar--4 a{min-width:0;overflow:hidden}
.mobile-bar--4 a>span{min-width:0;max-width:100%}
.mobile-bar--4 a small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mobile-bar--4 a{font-size:11.5px;padding:9px 2px;gap:3px;flex-direction:column;text-align:center}
.mobile-bar--4 a small{font-size:9px}
.mobile-bar--4 .micon{font-size:19px}
.mobile-bar .mb--line{background:#06c755;color:#fff}
.mobile-bar .mb--tel{background:var(--cream-deep);color:var(--ink)}

.foot__card--line .foot__card-ic{background:#06c755}
.foot__card--line:hover{border-color:#06c755}