/* ============================================================
   ひろげるくん LP  —  TOTAL BOOST
   支給デザイン画像8枚（images/lp/01〜08）を実装したもの
   色・文字・構成はデザイン画像に合わせている
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root{
  --navy:#123561;        /* 見出しの濃紺 */
  --navy2:#0b3b8f;       /* 帯・CTAの青 */
  --navy3:#062c6e;
  --blue:#1f6fe0;        /* 強調の青 */
  --blue-l:#5b9ae8;
  --sky:#eaf2fd;
  --sky2:#d8e6fa;
  --sky3:#f4f8fe;
  --yellow:#ffc629;
  --yellow-d:#f0a800;
  --cream:#fdf5df;
  --cream2:#fffaec;
  --red:#d22c30;
  /* FV（2026-08-22 の新デザインから実測） */
  --btn:#0037b5;         /* ヘッダーのボタン */
  --btn-d:#002da0;       /* 帯の中のボタン */
  --btn2:#0341d5;        /* 見出し・強調の青 */
  --mk-y:#fecd05;        /* 黄色いマーカー */
  --band:#022d93;        /* キャンペーン帯の紺 */
  --cream3:#fef2cd;      /* キャンペーン帯のクリーム */
  --pink:#f53c64;        /* 0円・先着バッジ */
  /* 背景の模様 */
  --dot:#d7e4f7;
  --blob:#edf3fd;
  --blob2:#fdf3dc;
  --ring:#dbe7fa;
  --bg:#f5f9fe;          /* ページ全体の地。セクションごとに変えない */
  --ink:#1b2a41;
  --muted:#5f6f86;
  --line:#dfe7f2;
  /* ---- 書体 ----
     ランクエスト（rank-quest.jp/lp/7/）を実測したところ、装飾書体は一切使っておらず
     Noto Sans JP 1書体を太さ400〜900で使い分けているだけだった。同じ方針にする。
     ①f-jp     … 和文ゴシック。見出しも本文もこれ。差は「太さ」でつける（400/500/700/900）
     ②f-en     … 欧文・数字。Arialが先頭なので英数字だけArial、和文は①に自動で落ちる
     ③f-mincho … 明朝。参考ページはクラス定義だけで実際には使っていないので、こちらも当てていない
                  （日本語の営業LPで明朝を混ぜると和風に寄るため。使うときはここを指定する） */
  --f-jp:"Noto Sans JP","Hiragino Sans","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
  --f-en:Arial,"Helvetica Neue",Helvetica,"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",YuGothic,Meiryo,sans-serif;
  --f-mincho:"Times New Roman","游明朝","Yu Mincho","ヒラギノ明朝 ProN","Hiragino Mincho ProN",serif;
  --f-head:var(--f-jp);
  --f-body:var(--f-jp);
  --f-title:var(--f-en);
  --wrap:1180px;
  --r:16px;
  --shadow:0 10px 30px -18px rgba(18,53,97,.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:24px;}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.85;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
p{margin:0;}
/* 日本語の改行
   ・auto-phrase … 文節の切れ目で折る（「サポー／ト。」のような切れ方を防ぐ）
   ・balance / pretty … 最後の行に1〜2文字だけ残る「取り残し」を防ぐ */
h1,h2,h3,h4,p,li,dd,dt,td,th{word-break:auto-phrase;}
h1,h2,h3,h4{text-wrap:balance;}
p,li,dd,dt,td,th{text-wrap:pretty;}
/* 見出し・本文タグ以外（span や a で作った1行もの）にも同じ折り返しを当てる。
   これが無いと「お早／めに」のように語の途中で切れる */
.hero .kicker,.fvband .t1,.fvband .t2,.fvband .tagline .tag,.fvband .bandbtn,
.vs .pan .cap,.one .tab,.one .goal,
.ribbon,.camp .card .cap,.camp .cond .tag,.camp .cond .tx,
.camp .limit .badge,.camp .limit .m .l1,.camp .limit .m .l2 .t,.camp .limit .m .l2 .b,.camp .band,
.plan .ph,.plan .zero,.plan .spec .lb,.plan .spec .v,
.vsco .yearsum .k,.vsco .yearsum .s,
.faq .midcta .badge,.faq .midcta .t .l1,.faq .midcta .t .l2,.faq .midcta .chk span,.faq .midcta .btn,
.cta .kick,.cta .campbar,.cta .panel .l1,.cta .panel .bigbtn .tx,.cta .panel .online,.cta .panel .hours,
.sticky .msg,.fm-kick,.fm-f .lb,.fm-submit{word-break:auto-phrase;}

/* ---- ①Montserrat ＋ ②M PLUS Rounded 1c を当てる範囲（見出し・数字・ボタン・ラベル） ---- */
h1,h2,h3,h4,
.hero .kicker,.hero .pricerow,.fvband .bandbtn,.sticky .msg,.cta .ctaprice .lb,.cta .ctaprice .k,.cta .ctaprice .v,.cta .ctaprice .v2,.fm-kick,.fm-head h2,.fm-f .lb,.fm-submit,.fm-done h3,.fm-close2,.fvband .t1,.fvband .t2,.fvband .txt,.fvband .zero,.fvband .tagline .tag,
.sec-h .lead .b,.solve h3,.vs .pan .cap,.vs .mid span,.vs .closing,
.one .kicker,.one .tab,.one .you .fig p,.one .goal,.one .foot p,
.ribbon,.camp .ttl,.camp .pitem .lb,.camp .pitem .v,.camp .plus,
.camp .card.now .foot,.camp .cond .tag,.camp .cond .tx,
.camp .limit .badge,.camp .limit .m .l1,.camp .limit .m .l2,.camp .band,
.plan .ph,.plan .reco-tag,.plan .price,.plan .zero,.plan .spec .v,

.vsco thead th,.vsco tbody th,.vsco td.num,.vsco .yearsum .ttl,.vsco .yearsum .k,.vsco .yearsum .v,.vsco .yearsum .diff,
.faq .q .badge,.faq .q h4,.faq .en,.faq .support h4,
.faq .midcta .badge,.faq .midcta .t .l1,.faq .midcta .t .l2,.faq .midcta .chk,.faq .midcta .btn,
.cta .kick,.cta .campbar,.cta .sub,.cta .panel .l1,.cta .panel .bigbtn,
.cta .panel .online,.cta .panel .mailrow,.cta .fine,.sticky a
{font-family:var(--f-title);}

/* 数字が主役の箇所は字面を締める */
.hero .pricerow .n,.plan .price .n,.camp .pitem .v,.camp .limit .badge b,
.plan .spec .v b,.faq .midcta .badge b{font-feature-settings:"tnum";letter-spacing:-.01em;}

/* 本文は③Noto Sans JP のまま（見出しの中でも説明文はこちら） */
.sec-h .lead,.bubble p,.solve p,.vs .pan li,.one .head p,.one .you li,
.one .steps .st p,.plan .desc,.plans .note,
.vsco tbody td,.vsco td .s,.vsco .yearsum .s,.vsco .cnote,.faq .q p,.faq .support p,.cta .merits p,.cta .ctaprice .note,.sticky .msg,.hero .lead,.fm-lead,.fm-note,.fm-alt,.fm-done p,.camp .sub,
.camp .card.old .foot{font-family:var(--f-body);}

/* グリッド／フレックスの子が「中身の最小幅」で箱を押し広げるのを防ぐ
   （これが無いと、折り返せない長い語のせいで横スクロールが出る） */
.vs .panels>*,.faq .grid>*,.plans .grid>*,.one .cols>*,.one .steps>*,
.hero .grid>*,.hero .visual>*,.worry .stage>*,.camp .cmp>*,.cta .merits>*,
.fvband>*,.fvband .bl>*,.camp .headrow>*,.camp .limit>*,.faq .midcta>*,
.faq .support>*,.solve>*,.one .head>*,.one .foot>*,.cta .top>*,.cta .panel>*{min-width:0;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.b{font-weight:700;}
.blue{color:var(--blue);}
.navy{color:var(--navy);}
.red{color:var(--red);}
/* 改行の出し分け
   br.pc … PC/タブレットだけで折る（スマホでは消えて、文字が自然に流れる）
   br.sp … スマホだけで折る
   .nw   … 数字と単位・短い言い回しを、途中で切らせない */
br.sp{display:none;}
br.pc{display:inline;}
.nw{white-space:nowrap;}
/* flexの箱（gapあり）の中で、文字列をひとつのかたまりとして扱うための包み */
.one .goal .gt,.faq .midcta .btn .bt,.cta .kick .kt,.cta .panel .l1 .kt{min-width:0;}
/* 黄色のマーカー */
.mk{background:linear-gradient(transparent 62%,rgba(255,198,41,.85) 62%);}
.mk-b{background:linear-gradient(transparent 58%,rgba(255,198,41,.85) 58%);font-weight:900;}

/* ---------- セクション見出し ---------- */
.sec{padding:86px 0;position:relative;}
.sec-h{text-align:center;margin-bottom:14px;}
.sec-h h2{
  margin:0;font-size:clamp(28px,4.2vw,46px);font-weight:900;
  color:var(--navy);line-height:1.4;letter-spacing:.01em;
}
.sec-h .lead{margin-top:14px;color:#42506a;font-size:clamp(14px,1.5vw,17px);}
.deco-line{display:inline-block;position:relative;}
.deco-line::before,.deco-line::after{
  content:"";position:absolute;top:.35em;width:3px;height:34px;background:var(--blue);border-radius:2px;
}
.deco-line::before{left:-34px;transform:rotate(-22deg);}
.deco-line::after{right:-34px;transform:rotate(22deg);}

/* ============================================================
   背景の模様
   FVのイラストと同じ語彙（ドットの格子／淡い青の円／破線のリング／
   クリームの円）を各セクションの地に置く。中身は z-index:1 で上に乗る。
   ============================================================ */
/* 飾りの部品（HTML側に <span class="deco …"> で置く） */
.deco{position:absolute;pointer-events:none;z-index:0;}
.deco.circle{border-radius:50%;background:var(--blob);}
.deco.circle.cream{background:var(--blob2);}
.deco.ring{border-radius:50%;border:2px dashed var(--ring);}
.deco.ring.solid{border-style:solid;}
.deco.star{
  background:var(--yellow);
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
}
.deco.star.blue{background:#a9c8f2;}
.deco.dot1{border-radius:50%;background:var(--sky2);}
.deco.dot1.y{background:#ffdf80;}
/* ゆるい曲線 */
.deco.curve{
  border:2px solid transparent;border-top-color:var(--ring);border-radius:50%;
  transform:rotate(-24deg);
}
.deco.curve.y{border-top-color:#f7dc9a;}
.blob{position:absolute;pointer-events:none;border-radius:50%;z-index:0;}
.wrap{position:relative;z-index:1;}
.sec{position:relative;overflow:hidden;}

/* 淡い円・破線のリング */
.worry::after,.vs::before,.one::after,.plans::before,.faq::before,.camp::before,
section.cta::before,section.cta::after{
  content:"";position:absolute;pointer-events:none;z-index:0;border-radius:50%;
}

.worry::after{right:-90px;top:40px;width:300px;height:300px;background:var(--blob);}
.vs::before{left:-130px;top:130px;width:380px;height:380px;background:var(--blob);}
.one::after{left:-110px;bottom:40px;width:320px;height:320px;background:var(--blob);}
.camp::before{left:-70px;top:190px;width:260px;height:260px;background:var(--blob2);}
.plans::before{right:-120px;top:90px;width:360px;height:360px;background:var(--blob);}
.faq::before{left:-100px;top:120px;width:300px;height:300px;background:var(--blob);}
section.cta::before{left:-120px;bottom:-90px;width:340px;height:340px;border:2px dashed var(--ring);}
section.cta::after{right:-70px;top:-60px;width:260px;height:260px;background:rgba(255,255,255,.55);}

/* ============================================================
   ヘッダー（ロゴだけ。メニューとボタンは置かない）
   ============================================================ */
/* 透明にしたので追従はさせない。追従させると、紺色の帯が裏に来たときロゴが読めなくなる。
   ボタンは画面下の追従バー（.sticky）が常に出ているので、ヘッダーを固定する必要はない。 */
.hd{
  position:relative;z-index:60;background:transparent;border-bottom:0;
}
.hd .inner{max-width:1320px;margin:0 auto;padding:10px 26px;display:flex;align-items:center;position:relative;}
.hd .logo{flex:0 0 auto;display:block;}
.hd .logo img{width:172px;}

/* メニューボタン（スマホのみ） */
.hd .burger{
  display:none;margin-left:auto;width:46px;height:40px;border:0;background:none;padding:0;cursor:pointer;
}
.hd .burger span{display:block;width:34px;height:4px;background:var(--navy);border-radius:3px;margin:6px 0 6px auto;transition:transform .22s,opacity .18s;}
.hd .burger.is-open span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.hd .burger.is-open span:nth-child(2){opacity:0;}
.hd .burger.is-open span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}
.hd .spmenu{
  position:absolute;left:14px;right:14px;top:calc(100% - 4px);z-index:5;
  background:#fff;border-radius:14px;padding:8px 18px 12px;
  box-shadow:0 22px 44px -20px rgba(18,53,97,.5);border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.hd .spmenu[hidden]{display:none;}
.hd .spmenu a{
  padding:14px 2px;font-size:15px;font-weight:700;color:var(--navy);border-bottom:1px solid #eef3fa;
}
.hd .spmenu a:last-child{border-bottom:0;}
.hd .spmenu a.mc{
  margin-top:10px;background:var(--btn-d);color:#fff;text-align:center;border-radius:999px;padding:14px;
}

/* ============================================================
   ①ファーストビュー
   ============================================================ */
.hero{
  position:relative;overflow:hidden;padding:clamp(20px,2.4vw,34px) 0 0;
  background:var(--bg);
}
.hero .wrap{position:relative;z-index:2;max-width:1320px;}
.hero .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(10px,2vw,30px);align-items:center;}

/* キャッチの上の1行 */
.hero .kicker{
  display:flex;align-items:center;gap:9px;font-size:clamp(15px,1.55vw,21px);
  font-weight:700;color:#1b2a41;
}
/* キッカーは1つの塊にする。直接の子を複数にすると flex の項目として
   バラバラに折り返され、「AI検索 の / ために、」のように割れる */
.hero .kicker .k{min-width:0;}
.hero .kicker b{color:var(--btn2);font-weight:900;}
.hero .kicker .x{color:var(--btn2);font-weight:900;}
.hero .kicker::before,.hero .kicker::after{
  content:"";width:2.5px;height:26px;background:var(--btn2);border-radius:2px;flex:0 0 auto;
}
.hero .kicker::before{transform:rotate(-20deg);margin-right:4px;}
.hero .kicker::after{transform:rotate(20deg);margin-left:4px;}

/* 見出し */
.hero h1{
  margin:14px 0 0;font-weight:900;color:#111011;
  font-size:clamp(30px,3.35vw,48px);line-height:1.3;letter-spacing:-.018em;
}
.hero h1 .ln{display:block;white-space:nowrap;}
.hero h1 .hl{
  color:var(--btn2);display:inline-block;padding-bottom:.05em;
  background-image:linear-gradient(var(--mk-y),var(--mk-y));
  background-size:100% .105em;background-position:0 100%;background-repeat:no-repeat;
}

.hero .lead{
  margin-top:clamp(14px,1.5vw,19px);font-size:clamp(13.5px,1.35vw,17px);color:#2f3d55;font-weight:500;line-height:1.95;
}
.hero .lead b{color:var(--btn2);font-weight:700;}

/* 検索で見つかる → 選ばれる → 問い合わせにつながる → 集客・売上UP
   （旧FVでは3つの丸がイラストに焼き込まれていた。イラストを差し替えたので、
     文章側に「順番のある4段」として置き直した） */
.hero .flow{
  --ic:clamp(50px,4.9vw,72px);
  display:flex;align-items:flex-start;margin-top:clamp(14px,1.9vw,25px);
}
.hero .flow .it{flex:0 1 auto;text-align:center;min-width:0;}
.hero .flow .ic{
  display:grid;place-items:center;margin:0 auto;
  width:var(--ic);height:var(--ic);border-radius:50%;
  background:#fff;border:3px solid var(--yellow);
  box-shadow:0 5px 14px -9px rgba(18,53,97,.5);
}
.hero .flow .ic svg{width:52%;height:52%;}
.hero .flow p{
  margin-top:9px;font-size:clamp(11px,1.02vw,13.5px);font-weight:700;
  color:var(--navy);line-height:1.45;letter-spacing:0;
}
/* 丸と丸のあいだの点線。丸の中心の高さに合わせる */
.hero .flow .dots{
  flex:1 1 auto;min-width:8px;max-width:46px;height:var(--ic);
  background-image:radial-gradient(circle at center,#b7cdec 0 2px,transparent 2.4px);
  background-size:9px 9px;background-position:center;background-repeat:repeat-x;
}

/* 月額5万円〜 */
.hero .pricerow{
  margin-top:clamp(16px,2vw,26px);display:flex;align-items:center;gap:14px;position:relative;
  margin-left:clamp(0px,2.2vw,34px);
}
.hero .pricerow .pill{
  background:var(--btn2);color:#fff;font-weight:700;font-size:clamp(16px,1.75vw,23px);
  padding:8px 19px;border-radius:10px;flex:0 0 auto;
}
.hero .pricerow .n{
  font-size:clamp(60px,7.2vw,99px);font-weight:900;color:var(--btn2);line-height:1;letter-spacing:-.035em;
}
.hero .pricerow .u{font-size:clamp(23px,2.6vw,36px);font-weight:900;color:var(--btn2);}

/* キャンペーン帯の中のボタン */
.fvband .bandbtn{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  background:var(--btn-d);color:#fff;font-weight:700;font-size:clamp(14px,1.25vw,17px);
  padding:13px 22px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 16px -8px rgba(0,45,160,.7);transition:transform .15s,box-shadow .15s,background .2s;
  position:relative;overflow:hidden;animation:tb-bob 2.1s ease-in-out infinite;
}
/* ボタンの上を光が横切る */
.fvband .bandbtn::before{
  content:"";position:absolute;top:0;left:0;width:38%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.42),rgba(255,255,255,0));
  transform:translateX(-160%);animation:tb-shine 3.8s ease-in-out infinite;
}
.fvband .bandbtn:hover{background:var(--btn);transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(0,45,160,.6);}
.fvband .bandbtn .ch{opacity:.9;}
/* 「0円」とボタンの間をあける */
.fvband .bandbtn{margin-left:clamp(12px,2.6vw,42px);}

/* 店主のイラスト。地の灰色（歩道）を透過に抜いてページの地に溶かしてある
   （元画像＝images/FV_shop_原画.png ／ 抜き処理＝images/FV_shop_切り抜き.py） */
.hero .visual{
  position:relative;
  /* 画面外側の余白ぶんだけ右へ広げて、イラストを大きく見せる */
  margin-right:calc(-1 * clamp(0px,(100vw - 1320px)/2,60px));
}
.hero .visual img{width:100%;}

/* FV下のキャンペーン帯 */
/* キャンペーン帯。PCではFVの直下、768px以下ではページの一番下（フッターの手前）に置く */
.fvband-wrap{position:relative;z-index:2;max-width:1320px;padding-bottom:30px;margin-top:clamp(10px,1.3vw,18px);}
.fvband{display:grid;grid-template-columns:.86fr 1fr;border-radius:12px;overflow:hidden;background:var(--cream3);}
.fvband .bl{
  background:var(--band);color:#fff;padding:20px 46px 20px 30px;
  display:flex;align-items:center;gap:20px;position:relative;
  clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);
}
.fvband .bl::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle at 12% 24%,#ffd94a 0 3px,transparent 3px),
    radial-gradient(circle at 30% 78%,#7aa5f5 0 3px,transparent 3px),
    radial-gradient(circle at 62% 18%,#ffd94a 0 3px,transparent 3px),
    radial-gradient(circle at 78% 72%,#7aa5f5 0 3px,transparent 3px),
    radial-gradient(circle at 46% 88%,#ffd94a 0 2.5px,transparent 2.5px);
}
.fvband .bl>*{position:relative;z-index:1;}
/* ---- キャンペーン帯の動き ---- */
@keyframes tb-wobble{0%,62%,100%{transform:rotate(0);}8%{transform:rotate(-10deg);}18%{transform:rotate(8deg);}28%{transform:rotate(-6deg);}38%{transform:rotate(4deg);}48%{transform:rotate(-2deg);}}
@keyframes tb-pop{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
@keyframes tb-spin{to{transform:rotate(360deg);}}
@keyframes tb-twinkle{0%,100%{opacity:.35;}50%{opacity:1;}}

.fvband .gift{flex:0 0 auto;transform-origin:50% 78%;animation:tb-wobble 3.2s ease-in-out infinite;}
/* 「先着5社限定」。もとは右のクリーム地にギザギザの印で置いていたが、
   2026-08-24に紺ブロックの中の平らなタグへ移した */
.fvband .tagline{margin-bottom:6px;line-height:1;}
.fvband .tagline .tag{
  display:inline-block;background:var(--pink);color:#fff;
  font-size:clamp(11.5px,1.05vw,14px);font-weight:900;letter-spacing:.04em;
  padding:5px 13px;border-radius:6px;white-space:nowrap;
}
.fvband .t1{font-size:clamp(16px,1.75vw,23px);font-weight:900;letter-spacing:.01em;text-wrap:balance;}
.fvband .t2{margin-top:4px;font-size:clamp(12.5px,1.3vw,16.5px);font-weight:700;text-wrap:balance;}
.fvband .t2 .y{color:var(--mk-y);font-size:1.16em;font-weight:900;display:inline-block;}
.fvband .br{
  background:var(--cream3);padding:14px 28px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  container:fvright / inline-size;
}
/* 「初期費用 10万円 → 0円」。白い台に載せる案は「ダサい」で不採用（2026-08-24）。
   台を使わず、打ち消し価格との落差で目立たせる */
.fvband .pricegrp{display:flex;align-items:center;gap:clamp(8px,1.1vw,16px);}
.fvband .was{display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
.fvband .txt{
  font-size:clamp(12px,1.25vw,18px);font-weight:800;color:var(--navy);
  letter-spacing:.09em;white-space:nowrap;line-height:1.2;
}
/* 打ち消し価格。線はピンクで、文字はくすませて「もう払わない額」に見せる */
.fvband .was .v{
  font-size:clamp(22px,2.7vw,40px);font-weight:900;color:#8492a6;white-space:nowrap;
  line-height:1.05;letter-spacing:-.02em;
  text-decoration:line-through;text-decoration-color:var(--pink);
  text-decoration-thickness:clamp(2.5px,.28vw,4px);
}
.fvband .arw{
  width:clamp(24px,2.6vw,40px);height:auto;flex:0 0 auto;color:var(--navy);
  align-self:center;margin-top:6px;
}
.fvband .zero{
  font-size:clamp(54px,7.1vw,108px);font-weight:900;color:var(--pink);line-height:.95;
  letter-spacing:-.05em;white-space:nowrap;
}
.fvband .zero .en{font-size:.42em;font-weight:800;margin-left:4px;letter-spacing:0;}

/* ============================================================
   ②お悩み
   ============================================================ */
.worry{background:var(--bg);position:relative;overflow:hidden;}
.worry .stage{
  margin-top:34px;display:grid;grid-template-columns:1fr 330px 1fr;gap:14px;align-items:center;
}
.worry .side{display:flex;flex-direction:column;gap:22px;}
.worry .side.r{align-items:flex-end;}
.bubble{
  background:#fff;border-radius:999px;padding:17px 26px;display:flex;align-items:center;gap:14px;
  box-shadow:0 8px 26px -18px rgba(18,53,97,.55);position:relative;
}
.bubble::after{
  content:"";position:absolute;bottom:-9px;width:16px;height:16px;background:#fff;border-radius:4px;transform:rotate(45deg);
}
.worry .side.l .bubble::after{right:52px;}
.worry .side.r .bubble::after{left:52px;}
.bubble .ic{width:44px;height:44px;flex:0 0 auto;}
.bubble p{font-size:13.8px;line-height:1.6;color:#2c3a51;font-weight:500;}
.worry .side.l .bubble:nth-child(2){margin-left:34px;}
.worry .side.r .bubble:nth-child(2){margin-right:34px;}
.worry .center img{width:min(330px,100%);}
.solve{
  margin-top:46px;background:var(--cream);border-radius:22px;padding:22px 34px;
  display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
}
.solve img.p{width:150px;}
.solve img.d{width:210px;}
.solve h3{margin:0;font-size:clamp(21px,2.9vw,33px);font-weight:900;color:var(--navy);line-height:1.45;}
.solve h3 .tb{color:var(--blue);font-size:1.08em;letter-spacing:.01em;}
.solve p{margin-top:10px;font-size:14.5px;color:#42506a;font-weight:500;}


/* ============================================================
   ③AI検索とSEO
   FVの主張「AI時代の見つかるはSEOから始まる」の裏づけを置く節。
   ここだけ「左に文章・右に図」の左右組みにして、前後（吹き出し／VS／6工程）と形を変えている
   ============================================================ */
.aiseo{background:var(--bg);}
/* 上：見出しと説明（中央ぞろえ・全幅） */
.aiseo .ai-tx{max-width:900px;margin:0 auto;text-align:center;}
.aiseo .kick{
  display:inline-block;font-size:clamp(13px,1.35vw,16px);font-weight:900;color:var(--btn2);
  letter-spacing:.06em;padding-bottom:10px;border-bottom:3px solid var(--btn2);
}
.aiseo h2{
  margin:22px 0 0;font-size:clamp(26px,3.15vw,44px);font-weight:900;color:#111011;
  line-height:1.34;letter-spacing:-.02em;
}
.aiseo .lead{margin-top:22px;font-size:clamp(13px,1.28vw,16px);color:#2f3d55;line-height:1.95;}
.aiseo .lead b{color:var(--btn2);font-weight:900;}
.aiseo .ai-flow{margin-top:clamp(32px,3.6vw,52px);}

/* 右：AIに選ばれるしくみ */
.aiseo .ft{
  display:flex;align-items:center;gap:14px;justify-content:center;
  font-size:clamp(14px,1.5vw,18px);font-weight:900;color:var(--navy);white-space:nowrap;
}
.aiseo .ft::before,.aiseo .ft::after{
  content:"";flex:1 1 auto;max-width:170px;height:5px;
  background-image:radial-gradient(circle at center,#b7cdec 0 2px,transparent 2.4px);
  background-size:9px 9px;background-position:center;background-repeat:repeat-x;
}
.aiseo .steps{
  margin:20px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,38px);
}
.aiseo .steps li{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:clamp(18px,2vw,26px) clamp(14px,1.6vw,22px) clamp(20px,2.2vw,28px);
  text-align:center;box-shadow:0 10px 26px -22px rgba(18,53,97,.5);
}
/* カードとカードのあいだの矢印 */
.aiseo .steps li+li::before{
  content:"";position:absolute;top:50%;left:calc(-1 * clamp(22px,2.6vw,38px) / 2 - 7px);
  width:14px;height:20px;transform:translateY(-50%);background:var(--blue-l);
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.aiseo .steps .n{
  display:block;font-family:var(--f-en);font-size:clamp(18px,1.9vw,24px);font-weight:900;
  color:var(--btn2);letter-spacing:.02em;line-height:1;
}
.aiseo .steps h3{
  margin:8px 0 0;font-size:clamp(14px,1.42vw,18px);font-weight:900;color:var(--navy);line-height:1.5;
  min-height:3em;   /* 見出しが1行のカードと2行のカードで、下の図の位置がずれるため */
}
.aiseo .steps .fig{display:block;width:100%;max-width:170px;height:auto;margin:16px auto 0;}
.aiseo .steps li p{
  position:relative;margin-top:16px;padding-top:16px;
  font-size:clamp(11.5px,1.08vw,13.5px);color:#5b6b82;line-height:1.8;
}
.aiseo .steps li p::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:54px;height:3px;border-radius:2px;background:var(--yellow);
}

/* Google公式の出典バー */
/* 出典バー。見出しと引用は縦に積み（1つの引用が1行に収まる）、出典リンクだけ右に置く（2026-08-25） */
.aiseo .ai-src{
  margin-top:clamp(28px,3.4vw,44px);background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(15px,1.6vw,22px) clamp(18px,2.4vw,32px);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"badge k cite" "badge t cite";
  align-items:center;column-gap:clamp(14px,1.8vw,26px);row-gap:clamp(7px,.8vw,10px);
}
/* 盾は見出しと本文をまとめて受ける左の列（上下は中央） */
.aiseo .ai-src .badge{
  grid-area:badge;align-self:center;flex:0 0 auto;
  width:clamp(34px,3.2vw,46px);height:clamp(34px,3.2vw,46px);
}
.aiseo .ai-src .k{
  grid-area:k;align-self:end;
  font-size:clamp(14px,1.45vw,18px);font-weight:900;color:var(--navy2);line-height:1.5;
}
.aiseo .ai-src .t{grid-area:t;align-self:start;}
.aiseo .ai-src .t p{font-size:clamp(12.5px,1.25vw,15.5px);color:#2f3d55;line-height:1.72;}
.aiseo .ai-src .t p+p{margin-top:4px;}
.aiseo .ai-src .t b{color:var(--btn2);font-weight:900;}
.aiseo .ai-src .cite{
  grid-area:cite;align-self:center;
  display:inline-flex;align-items:center;gap:10px;background:var(--sky);border-radius:10px;
  padding:10px 15px;font-size:clamp(11px,1.05vw,13px);font-weight:700;color:var(--navy2);
  line-height:1.6;white-space:nowrap;transition:background .18s;
}
.aiseo .ai-src .cite:hover{background:var(--sky2);}

/* 締めの帯 */
.aiseo .ai-end{
  margin-top:clamp(18px,2.2vw,28px);background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(22px,2.6vw,34px) clamp(20px,3vw,44px);
  display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,44px);
}
.aiseo .ai-end .tx{text-align:center;}
.aiseo .ai-end .l1{font-size:clamp(20px,2.9vw,38px);font-weight:900;color:#111011;line-height:1.4;letter-spacing:-.01em;}
.aiseo .ai-end .l2{margin-top:12px;font-size:clamp(12.5px,1.3vw,16px);color:#2f3d55;line-height:1.85;}
.aiseo .ai-end .l2 b{color:var(--btn2);font-weight:900;}
.aiseo .ai-end .fig{width:clamp(90px,10vw,140px);height:auto;flex:0 0 auto;}

@media (max-width:1023px){
  /* 幅が足りなくなるので、本文は全幅・出典リンクは下に回す */
  .aiseo .ai-src{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"badge k" "t t" "cite cite";
    row-gap:12px;
  }
  .aiseo .ai-src .k{align-self:center;}
  .aiseo .ai-src .cite{justify-self:start;white-space:normal;}
}
@media (max-width:768px){
  .aiseo h2{font-size:clamp(25px,7.2vw,34px);}
  .aiseo .lead{line-height:1.95;}
  .aiseo h2{text-wrap:balance;}
  /* スマホは1列。カード間の矢印も下向きにする */
  .aiseo .steps{grid-template-columns:1fr;gap:26px;}
  .aiseo .steps li+li::before{
    top:calc(-26px / 2 - 7px);left:50%;width:20px;height:14px;transform:translateX(-50%);
    clip-path:polygon(0 0,100% 0,50% 100%);
  }
  .aiseo .steps .fig{max-width:190px;}
  .aiseo .ai-end{flex-direction:column;gap:18px;}
  .aiseo .ai-end .fig{width:120px;order:-1;}
}

/* ============================================================
   ④作って終わりではありません
   ============================================================ */
.vs{background:var(--bg);position:relative;overflow:hidden;}
.vs .panels{margin-top:38px;display:grid;grid-template-columns:1fr auto 1fr;gap:0 26px;align-items:stretch;}
.vs .pan{background:#eaf0fa;border-radius:20px;padding:44px 30px 30px;position:relative;}
.vs .pan.good{background:#e9f1fd;}
.vs .pan .cap{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:9px 30px;border-radius:999px;font-weight:900;font-size:16px;color:#fff;
}
.vs .pan.bad .cap{background:#8e9bab;}
.vs .pan.good .cap{background:var(--navy2);}
.vs .pan img{margin:0 auto 20px;width:min(430px,100%);}
.vs .pan li{display:flex;gap:12px;align-items:flex-start;padding:11px 4px;font-size:15px;font-weight:700;}
.vs .pan li .tx{min-width:0;word-break:auto-phrase;}
.vs .pan li+li{border-top:1px solid rgba(255,255,255,.9);}
.vs .pan.bad li{color:#55647a;font-weight:500;}
.vs .pan .m{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;margin-top:2px;}
.vs .pan.bad .m{background:#98a4b4;}
.vs .pan.good .m{background:var(--blue);}
.vs .mid{display:grid;place-items:center;}
.vs .mid span{
  width:64px;height:64px;border-radius:50%;background:var(--navy2);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:22px;letter-spacing:.02em;
  box-shadow:0 8px 22px -12px rgba(11,59,143,.8);
}
.vs .closing{
  margin-top:44px;text-align:center;font-size:clamp(18px,2.6vw,30px);font-weight:900;color:var(--navy);line-height:1.6;
}
.vs .closing .sm{display:block;font-size:.72em;margin-bottom:6px;}

/* ============================================================
   ④ワンストップ
   ============================================================ */
.one{background:var(--bg);position:relative;overflow:hidden;}
.one .head{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;}
.one .head img.l{width:196px;}
.one .head img.r{width:210px;opacity:.9;}
.one .head .t{text-align:center;}
.one .head .kicker{
  font-size:clamp(15px,1.8vw,20px);font-weight:900;color:var(--navy);display:inline-block;position:relative;padding:0 26px;
}
.one .head .kicker::before,.one .head .kicker::after{
  content:"";position:absolute;top:.2em;width:3px;height:22px;background:var(--yellow);border-radius:2px;
}
.one .head .kicker::before{left:0;transform:rotate(-22deg);}
.one .head .kicker::after{right:0;transform:rotate(22deg);}
.one .head h2{margin:6px 0 0;font-size:clamp(25px,3.5vw,45px);font-weight:900;color:var(--navy);line-height:1.3;white-space:nowrap;}
.one .head p{margin-top:14px;font-size:clamp(14px,1.5vw,17px);color:#3f4d66;font-weight:500;}
.one .head p .b{white-space:nowrap;}
.one .cols{margin-top:38px;display:grid;grid-template-columns:334px 1fr;gap:20px;align-items:start;}
.one .you{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 24px;}
.one .tab{
  display:inline-block;background:var(--navy);color:#fff;font-weight:900;font-size:14.5px;
  padding:8px 22px;border-radius:999px;
}
.one .you .fig{display:flex;gap:12px;align-items:center;margin:20px 0 18px;}
/* 文章側がはみ出して右の余白を食わないようにする */
.one .you .fig img{flex:0 0 auto;}
.one .you .fig p{min-width:0;}
.one .you .fig img{width:94px;}
.one .you .fig p{font-size:15px;font-weight:900;color:var(--navy);line-height:1.65;}
.one .you li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:700;color:#2c3a51;padding:11px 0;}
.one .you li+li{border-top:1px dashed var(--line);}
.one .flow{background:var(--sky3);border:1px solid var(--sky2);border-radius:20px;padding:24px 18px;}
.one .flow .tab{background:var(--navy2);display:block;text-align:center;}
.one .steps{
  margin-top:20px;background:#fff;border-radius:14px;padding:22px 8px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
}
.one .steps .st{padding:0 10px;position:relative;text-align:center;}
.one .steps .st+.st{border-left:1px solid #eef3fa;}
.one .steps .st .ic{width:56px;height:56px;margin:0 auto 12px;}
.one .steps .st h4{margin:0;font-size:13.5px;font-weight:900;color:var(--blue);letter-spacing:0;}
.one .steps .st p{margin-top:8px;font-size:11.6px;line-height:1.72;color:#5b6b82;text-align:left;}
.one .goal{
  margin-top:18px;background:var(--cream);border-radius:999px;padding:14px 26px;
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:clamp(14px,1.7vw,20px);font-weight:900;color:var(--navy);
}
.one .foot{
  margin-top:40px;background:var(--cream2);border-radius:22px;padding:20px 34px;
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
}
.one .foot img.t{width:124px;}
.one .foot img.p{width:172px;}

.one .foot p{font-size:clamp(17px,2.2vw,27px);font-weight:900;color:var(--navy);line-height:1.5;text-align:center;}

/* ============================================================
   ⑤0円キャンペーン
   ============================================================ */
.camp{background:var(--bg);position:relative;overflow:hidden;padding-bottom:0;}
.ribbon{
  display:block;margin:0 auto;background:var(--navy2);color:#fff;font-weight:900;
  font-size:clamp(17px,2.5vw,28px);text-align:center;padding:12px 70px;max-width:760px;
  position:relative;clip-path:polygon(0 0,100% 0,calc(100% - 26px) 50%,100% 100%,0 100%,26px 50%);
}
.ribbon .n{color:var(--yellow);font-size:1.22em;}
.camp .ttl{
  margin-top:26px;text-align:center;font-size:clamp(27px,4.6vw,54px);font-weight:900;color:var(--navy);line-height:1.28;
}
.camp .ttl .zero{color:var(--yellow);font-size:1.42em;line-height:1;}
/* メガホンのバッジを段組みの1列目に置くと、見出しが「残りの幅」の中央になり、
   上のリボン（ページ中央）に対して80pxほど右へずれてしまう。
   バッジは浮かせて、見出しはページの中央にそろえる。 */
.camp .headrow{position:relative;}
.camp .headrow img{position:absolute;left:0;top:-6px;width:clamp(118px,10.4vw,150px);}
.camp .sub{margin-top:16px;text-align:center;font-size:clamp(14px,1.6vw,18px);color:#3f4d66;font-weight:500;line-height:1.9;}
.camp .cmp{margin-top:34px;display:grid;grid-template-columns:1fr auto 1fr;column-gap:26px;align-items:center;}
.camp .card{background:#fff;border-radius:18px;padding:34px 26px 22px;position:relative;border:1px solid var(--line);width:100%;}
.camp .card.now{border:3px solid var(--yellow);background:#fffdf6;}
.camp .card .cap{
  position:absolute;top:-17px;left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:8px 26px;border-radius:8px;font-weight:900;font-size:15px;
}
.camp .card.old .cap{background:#5d6b7d;color:#fff;}
.camp .card.now .cap{background:var(--yellow);color:var(--navy);}
.camp .prow{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;}
.camp .pitem{text-align:center;}
.camp .pitem .lb{font-size:13.5px;font-weight:900;color:var(--navy);}
.camp .pitem .v{font-size:clamp(30px,4vw,46px);font-weight:900;color:var(--navy);line-height:1.1;}
.camp .pitem .v .u{font-size:.48em;}
.camp .card.now .pitem .v.zero{color:var(--red);font-size:clamp(40px,5.4vw,64px);}
.camp .card.now .pitem .v.m{color:var(--navy2);}
.camp .plus{font-size:30px;font-weight:900;color:var(--navy);}
.camp .card .foot{margin-top:16px;text-align:center;font-size:13px;color:#65748c;font-weight:500;}
.camp .card.now .foot{
  background:var(--cream);border-radius:8px;padding:11px 14px;color:var(--navy);font-weight:900;font-size:14.5px;
}
.camp .arrow{display:grid;place-items:center;width:66px;padding:0;}
.camp .cond{
  margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 26px;
  display:grid;grid-template-columns:auto auto 1fr;gap:18px;align-items:center;
}
.camp .cond .tag{background:var(--navy2);color:#fff;font-weight:900;font-size:14px;padding:8px 18px;border-radius:8px;white-space:nowrap;}
.camp .cond .tx{font-size:clamp(15px,1.8vw,20px);font-weight:900;color:var(--navy);}
.camp .limit{
  margin-top:26px;background:var(--cream2);border-radius:20px;padding:24px 30px;
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  border:2px solid rgba(245,60,100,.22);
  box-shadow:0 14px 34px -22px rgba(245,60,100,.55);
  animation:tb-breathe 3.4s ease-in-out infinite;
}

/* ---- 先着5社の枠だけ、少し動きをつけて目立たせる ---- */
@keyframes tb-breathe{0%,100%{box-shadow:0 14px 34px -22px rgba(245,60,100,.55);}50%{box-shadow:0 14px 40px -18px rgba(245,60,100,.75);}}
@keyframes tb-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.055);}}
@keyframes tb-ring{0%{box-shadow:0 0 0 0 rgba(245,60,100,.42);}70%,100%{box-shadow:0 0 0 18px rgba(245,60,100,0);}}
@keyframes tb-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@keyframes tb-shine{0%{transform:translateX(-160%);}55%,100%{transform:translateX(320%);}}
@keyframes tb-blink{0%,100%{opacity:1;}50%{opacity:.25;}}
.camp .limit .badge{
  width:118px;height:118px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;
  text-align:center;font-weight:900;line-height:1.2;font-size:15px;flex:0 0 auto;
  animation:tb-pulse 2.2s ease-in-out infinite,tb-ring 2.2s ease-in-out infinite;
}
.camp .limit .badge b{display:block;font-size:38px;line-height:1;}
.camp .limit .m{text-align:center;width:100%;container:limitmsg / inline-size;}
.camp .limit .m .l1{font-size:clamp(20px,3vw,36px);font-weight:900;color:var(--navy);}
.camp .limit .m .l1 .n{color:var(--red);font-size:1.25em;}
.camp .limit .m .l1 .red{animation:tb-blink 1.6s ease-in-out infinite;}
.camp .limit .m .l2{
  margin-top:14px;display:inline-flex;flex-direction:column;align-items:center;gap:9px;
  background:var(--btn-d);color:#fff;padding:14px 30px 16px;border-radius:20px;text-decoration:none;
  box-shadow:0 8px 20px -10px rgba(0,45,160,.7);transition:transform .15s,box-shadow .15s,background .2s;
}
.camp .limit .m .l2:hover{background:var(--btn);transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(0,45,160,.6);}
.camp .limit .m .l2 .t{font-weight:900;font-size:clamp(13px,1.5vw,17px);}
.camp .limit .m .l2 .ex{color:var(--yellow);}
.camp .limit .m .l2 .b{
  display:inline-flex;align-items:center;gap:10px;background:var(--yellow);color:var(--navy);
  font-weight:900;font-size:clamp(14px,1.5vw,18px);padding:10px 22px;border-radius:999px;
  box-shadow:0 3px 0 var(--yellow-d);
  position:relative;overflow:hidden;animation:tb-bob 1.9s ease-in-out infinite;
}
/* ボタンの上を光が横切る */
.camp .limit .m .l2 .b::before{
  content:"";position:absolute;top:0;left:0;width:38%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.8),rgba(255,255,255,0));
  transform:translateX(-160%);animation:tb-shine 3.4s ease-in-out infinite;
}
.camp .limit img{animation:tb-bob 2.6s ease-in-out infinite;}

.camp .limit img{width:130px;}
.camp .band{
  position:relative;z-index:1;margin-top:34px;background:linear-gradient(90deg,#0a2f6e,#0f4aa8 50%,#0a2f6e);color:#fff;
  text-align:center;padding:16px 20px;font-weight:900;font-size:clamp(16px,2.2vw,26px);
}
.camp .band .y{color:var(--yellow);}

/* ============================================================
   ⑥料金プラン
   ============================================================ */
.plans{background:var(--bg);}
.plans .grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.plan{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;container:plan / inline-size;}
.plan.reco{border:3px solid var(--yellow);box-shadow:0 18px 40px -24px rgba(240,168,0,.55);}
.plan .ph{padding:14px;text-align:center;color:#fff;font-weight:900;font-size:clamp(17px,2vw,22px);background:var(--blue);}
.plan.reco .ph{background:var(--navy);}
.plan.pre .ph{background:var(--navy2);}
.plan .reco-tag{
  background:var(--yellow);color:var(--navy);text-align:center;font-weight:900;font-size:14px;padding:7px;
}
/* おすすめの帯と同じ高さの余白を他の2枚にも入れて、中の行の位置を揃える */
.plan:not(.reco)::before{
  content:"おすすめ";visibility:hidden;display:block;
  text-align:center;font-weight:900;font-size:14px;padding:7px;
}
.plan .body{padding:22px 20px 24px;flex:1;display:flex;flex-direction:column;}
.plan .price{display:flex;align-items:baseline;justify-content:center;gap:8px;}
.plan .price .lb{font-size:15px;font-weight:900;color:var(--navy);}
.plan .price .n{font-size:clamp(46px,6vw,64px);font-weight:900;color:var(--navy2);line-height:1;letter-spacing:-.02em;}
.plan .price .u{font-size:20px;font-weight:900;color:var(--navy2);}
.plan .price .tax{font-size:12px;color:#7b899d;font-weight:500;}
.plan .zero{
  margin:16px auto 0;border:1px solid var(--sky2);border-radius:999px;padding:8px 18px;
  display:flex;align-items:center;justify-content:center;gap:10px;font-weight:900;color:var(--navy);font-size:14.5px;
  max-width:300px;
}
.plan .zero .v{display:inline-flex;align-items:center;gap:2px;}
.plan .zero b{color:var(--red);font-size:26px;line-height:1;}
/* プランの中身（制作ページ数・記事作成数）。ここがプランの違いそのものなので、
   数字を主役にする（2026-08-25）。地を一段濃くして白いカードから浮かせ、
   数字だけ明るい青にする。ラベルは小さいまま＝声量の差でコントラストを作る */
.plan .spec{
  margin-top:16px;background:#e2edfc;border:1px solid #bfd6f4;border-radius:12px;
  display:grid;grid-template-columns:1fr 1fr;
}
.plan .spec>div{padding:16px clamp(10px,1.3vw,20px) 18px;text-align:center;}
.plan .spec>div+div{border-left:1px solid #b9d1f0;}
.plan .spec .ic{width:32px;height:32px;margin:0 auto 6px;}
.plan .spec .lb{font-size:12.5px;color:#4f6079;font-weight:700;letter-spacing:.02em;line-height:1.4;}
.plan .spec .v{margin-top:5px;font-size:18px;font-weight:900;color:var(--navy);line-height:1.1;}
/* 数字が「約」「P」「記事」に貼りついて見えるので、左右に間を空ける */
.plan .spec .v b{
  font-size:clamp(30px,3.35vw,45px);color:var(--btn2);letter-spacing:-.02em;
  margin:0 clamp(3px,.4vw,6px);
}
.plan .desc{margin-top:auto;padding-top:16px;font-size:13px;line-height:1.75;color:#5b6b82;text-align:center;}
.plans .note{margin-top:16px;text-align:center;font-size:12.5px;color:#6c7b92;}
/* ※の注記は1件を1ブロックにして、それぞれの中で行の長さをそろえる */
.plans .note>span,.vsco .cnote>span{display:block;text-wrap:balance;}

/* ============================================================
   他社との比較
   ============================================================ */
/* 表が入る枠。中身（表の最小幅760px）が収まらない幅になったら案内を出す */
.vsco .ctable-wrap{container:ctable / inline-size;}
.vsco .swipe{display:none;margin-top:28px;text-align:right;font-size:12px;font-weight:700;color:#7a889d;}
@container ctable (max-width:763px){
  .vsco .swipe{display:block;margin-top:28px;}
  .vsco .ctable{margin-top:8px;}
}
.vsco .ctable{margin-top:38px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:14px 2px 4px;}
.vsco table{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;background:#fff;
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow);}
.vsco thead th{
  background:#eef3fa;color:var(--navy);font-weight:900;font-size:clamp(14px,1.5vw,17px);
  padding:16px 12px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap;
}
.vsco thead th.lead-cell{background:#fff;width:170px;}
.vsco thead th.us{background:var(--navy);color:#fff;position:relative;}
.vsco thead th.us .crown{color:var(--yellow);margin-right:6px;}
.vsco tbody th{
  background:#f7fafd;color:var(--navy);font-weight:900;font-size:13.5px;text-align:left;
  padding:16px 16px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.vsco tbody td{
  padding:16px 14px;text-align:center;font-size:13.5px;color:#4c5b73;font-weight:500;
  border-bottom:1px solid var(--line);border-left:1px solid #eef2f8;line-height:1.6;
}
.vsco tbody tr:last-child th,.vsco tbody tr:last-child td{border-bottom:none;}
.vsco td.us.b{text-wrap:balance;}
.vsco td.us{background:#fffdf2;color:var(--navy);font-weight:700;
  box-shadow:inset 3px 0 0 var(--yellow),inset -3px 0 0 var(--yellow);}
.vsco tbody tr:last-child td.us{box-shadow:inset 3px 0 0 var(--yellow),inset -3px 0 0 var(--yellow),inset 0 -3px 0 var(--yellow);}
.vsco td.num{font-weight:900;font-size:clamp(18px,2vw,25px);color:var(--navy);letter-spacing:-.01em;}
.vsco td.num .u{font-size:.6em;margin-left:2px;}
.vsco td.num.zero{color:var(--pink);font-size:clamp(24px,2.8vw,34px);}
.vsco td .s{display:block;font-size:11.5px;color:#7a889d;font-weight:500;margin-top:2px;}
.vsco td.none{color:#93a1b5;}
.vsco .m{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-size:13px;font-weight:900;margin-right:7px;vertical-align:-4px;color:#fff;}
.vsco .m.ok{background:var(--blue);}
.vsco .m.ng{background:#9aa7b8;}
.vsco .m.tri{background:#f0b429;}

.vsco .yearsum{
  margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px 18px;
}
.vsco .yearsum .ttl{text-align:center;font-weight:900;color:var(--navy);font-size:clamp(15px,1.7vw,19px);}
.vsco .yearsum .row{
  margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;
}
.vsco .yearsum .c{background:#f7fafd;border-radius:12px;padding:18px 14px;text-align:center;min-width:0;
  display:flex;flex-direction:column;justify-content:center;}
.vsco .yearsum .c.tot{background:#eef3fa;}
.vsco .yearsum .c.win{background:#fffdf2;border:2px solid var(--yellow);}
.vsco .yearsum .k{font-size:12.5px;font-weight:900;color:var(--navy);}
.vsco .yearsum .k .crown{color:var(--yellow-d);margin-right:4px;}
.vsco .yearsum .v{margin-top:4px;font-size:clamp(22px,2.6vw,32px);font-weight:900;color:var(--navy);line-height:1.1;}
.vsco .yearsum .c.win .v{color:var(--btn2);}
.vsco .yearsum .v .u{font-size:.5em;}
.vsco .yearsum .s{margin-top:5px;font-size:11px;color:#7a889d;font-weight:500;line-height:1.5;}
.vsco .yearsum .diff{
  margin:16px auto 0;max-width:520px;background:var(--cream);border-radius:999px;padding:11px 20px;
  text-align:center;font-weight:900;color:var(--navy);font-size:clamp(14px,1.6vw,18px);
}
.vsco .yearsum .diff b{color:var(--pink);font-size:1.25em;}
.vsco .cnote{margin-top:16px;text-align:center;font-size:12.2px;color:#6c7b92;line-height:1.8;}


/* ============================================================
   ⑦FAQ
   ============================================================ */
.faq{background:var(--bg);padding-bottom:20px;}
.faq h2 .en{color:var(--sky2);font-style:italic;font-weight:900;margin-left:14px;}
.faq .grid{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.faq .q{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px;display:flex;gap:16px;
  flex-wrap:wrap;container:faqcard / inline-size;}
.faq .q .ic{width:60px;height:60px;flex:0 0 auto;}
.faq .q>div{flex:1 1 0;min-width:0;}
.faq .q .qt{display:flex;gap:10px;align-items:flex-start;}
.faq .q .badge{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-weight:900;font-size:14px;margin-top:1px;
}
.faq .q .badge.qq{background:var(--navy);color:#fff;}
.faq .q .badge.aa{background:var(--yellow);color:var(--navy);}
.faq .q h4{margin:0;font-size:15px;font-weight:900;color:var(--navy);line-height:1.55;}
.faq .q hr{border:0;border-top:1px dashed var(--sky2);margin:14px 0;}
.faq .q p{font-size:13.2px;line-height:1.8;color:#4c5b73;}
.faq .support{
  margin-top:26px;background:var(--sky3);border:1px solid var(--sky2);border-radius:16px;padding:20px 28px;
  display:grid;grid-template-columns:auto auto 1fr auto;gap:22px;align-items:center;
}
.faq .support h4{margin:0;font-size:clamp(17px,2.1vw,23px);font-weight:900;color:var(--navy);white-space:nowrap;}
.faq .support p{font-size:13.5px;line-height:1.8;color:#4c5b73;}
/* 1文を1ブロックにして、それぞれの中で行の長さをそろえる */
.faq .support p>span{display:block;}
.faq .support img{width:110px;}
.faq .midcta{
  margin-top:36px;background:var(--navy2);border-radius:18px;padding:26px 30px 30px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;color:#fff;
}
.faq .midcta .badge{
  width:96px;height:96px;border-radius:50%;border:2px dashed rgba(255,255,255,.75);
  display:grid;place-items:center;text-align:center;font-weight:900;font-size:12.5px;line-height:1.3;
  flex:0 0 auto;
}
.faq .midcta .badge b{display:block;font-size:23px;line-height:1.1;}
.faq .midcta .t .l1{font-size:clamp(13px,1.35vw,16.5px);font-weight:900;white-space:nowrap;}
.faq .midcta .t .l1 .y{color:var(--yellow);}
.faq .midcta .t .l2{margin-top:5px;font-size:clamp(17px,1.85vw,25px);font-weight:900;line-height:1.4;white-space:nowrap;}
.faq .midcta .t .l2 .y{color:var(--yellow);}
.faq .midcta .chk{margin-top:11px;display:flex;gap:18px;flex-wrap:wrap;font-size:13px;font-weight:700;}
.faq .midcta .chk span{display:flex;align-items:center;gap:7px;}
.faq .midcta .btn{
  display:inline-flex;align-items:center;gap:12px;background:var(--yellow);color:var(--navy);
  font-weight:900;font-size:clamp(13px,1.2vw,15.5px);padding:15px 20px;border-radius:999px;word-break:auto-phrase;
  box-shadow:0 5px 0 var(--yellow-d);white-space:nowrap;transition:transform .15s,box-shadow .15s;
  position:relative;overflow:hidden;animation:tb-bob 2.1s ease-in-out infinite;
}
/* ボタンの上を光が横切る */
.faq .midcta .btn::before{
  content:"";position:absolute;top:0;left:0;width:38%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.8),rgba(255,255,255,0));
  transform:translateX(-160%);animation:tb-shine 3.6s ease-in-out infinite;
}
.faq .midcta .btn:hover{animation:none;transform:translateY(3px);box-shadow:0 2px 0 var(--yellow-d);}
/* 「0円」だけ、ゆっくり大きくなる（「無料相談」は動かさない） */
.faq .midcta .t .l1 .y{display:inline-block;animation:tb-pop 2.1s ease-in-out infinite;}

/* ============================================================
   ⑧最終CTA
   ============================================================ */
.cta{
  position:relative;overflow:hidden;padding:70px 0 80px;
  background:var(--bg);
}
.cta .kick{
  text-align:center;font-size:clamp(17px,2.4vw,27px);font-weight:900;color:var(--navy);
  display:flex;align-items:center;justify-content:center;gap:16px;
}
.cta .kick::before,.cta .kick::after{content:"";width:3px;height:30px;background:var(--navy);border-radius:2px;}
.cta .kick::before{transform:rotate(-22deg);}
.cta .kick::after{transform:rotate(22deg);}
.cta .top{margin-top:22px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;}
.cta .top .seal{width:142px;}
/* 背景を切り抜いた端末の絵。影は画像に含まれているのでCSS側では付けない */
.cta .top .mock{width:clamp(290px,29vw,400px);}
.cta .campbar{
  display:inline-block;background:var(--navy2);color:#fff;font-weight:900;
  font-size:clamp(15px,2vw,23px);padding:11px 28px;border-radius:6px;
}
.cta .campbar .y{color:var(--yellow);font-size:1.2em;}
.cta h2{margin:16px 0 0;font-size:clamp(28px,4.2vw,52px);font-weight:900;color:var(--navy);line-height:1.25;white-space:nowrap;}
.cta h2 .mk-b{padding:0 .06em;}
.cta .sub{margin-top:12px;font-size:clamp(14px,1.7vw,19px);font-weight:700;color:#33425c;}
/* キャンペーンで制作費が0円になることを、最後にもう一度はっきり出す */
.cta .ctaprice{
  margin-top:24px;background:var(--cream3);border:2px solid var(--yellow);border-radius:18px;
  padding:16px 26px;display:flex;align-items:center;justify-content:center;gap:8px 18px;flex-wrap:wrap;
  container:ctaprice / inline-size;
}
.cta .ctaprice .lb{
  background:var(--navy);color:#fff;font-weight:900;font-size:clamp(12.5px,1.3vw,15px);
  padding:7px 16px;border-radius:999px;white-space:nowrap;
}
.cta .ctaprice .pg{display:inline-flex;align-items:center;gap:10px;}
.cta .ctaprice .k{font-size:clamp(14px,1.5vw,20px);font-weight:900;color:#111011;white-space:nowrap;}
.cta .ctaprice .v{
  font-size:clamp(38px,4.4vw,62px);font-weight:900;color:var(--pink);line-height:1;letter-spacing:-.03em;white-space:nowrap;
}
.cta .ctaprice .v .en{font-size:.52em;margin-left:2px;}
.cta .ctaprice .v2{
  font-size:clamp(20px,2.3vw,32px);font-weight:900;color:var(--btn2);line-height:1;white-space:nowrap;
}
.cta .ctaprice .v2 .en{font-size:.62em;}
.cta .ctaprice .plus{font-size:clamp(17px,1.9vw,24px);font-weight:900;color:var(--navy);}
.cta .ctaprice .note{font-size:12px;color:#6c7b92;font-weight:500;}
/* 幅が足りなくなったら縦に積む
   （※ 要素は自分自身のコンテナクエリでは変えられないので、中の子を全幅にして積む） */
@container ctaprice (max-width:520px){
  /* ラベルの丸い箱だけは中身の幅のまま。次の要素が100%幅になるので自然に改行される */
  .cta .ctaprice>*:not(.lb){flex:1 1 100%;justify-content:center;text-align:center;}
  .cta .ctaprice .plus{line-height:1;margin:-2px 0;}
}

.cta .merits{
  margin-top:26px;background:#fff;border-radius:999px;padding:18px 34px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;box-shadow:var(--shadow);
}
.cta .merits .m{display:flex;gap:14px;align-items:center;}
.cta .merits .m+.m{border-left:1px solid var(--line);padding-left:20px;}
.cta .merits .ic{width:42px;height:42px;flex:0 0 auto;}
.cta .merits h4{margin:0;font-size:15.5px;font-weight:900;color:var(--blue);}
.cta .merits p{font-size:12.6px;line-height:1.65;color:#5b6b82;margin-top:2px;}
.cta .panel{
  margin-top:30px;background:var(--navy3);border-radius:22px;padding:30px 34px;color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;
}
.cta .panel .main{min-width:0;text-align:center;container:ctamain / inline-size;}
.cta .panel .l1{
  font-size:clamp(15px,1.75vw,20px);font-weight:900;display:flex;align-items:center;justify-content:center;gap:14px;
}
.cta .panel .l1 .y{color:var(--yellow);font-size:1.15em;}
.cta .panel .l1::before,.cta .panel .l1::after{content:"";width:3px;height:22px;background:#fff;border-radius:2px;flex:0 0 auto;}
.cta .panel .l1::before{transform:rotate(-22deg);}
.cta .panel .l1::after{transform:rotate(22deg);}

.cta .panel .bigbtn{
  margin:18px auto 0;width:100%;max-width:760px;
  display:flex;align-items:center;justify-content:center;gap:18px;
  background:linear-gradient(180deg,#ffd75a,#f7b912);color:var(--navy);
  font-weight:900;font-size:clamp(17px,2.3vw,31px);padding:18px 26px;border-radius:999px;
  box-shadow:0 6px 0 #d9990a,0 16px 30px -18px rgba(0,0,0,.5);
  transition:transform .15s,box-shadow .15s;
  position:relative;overflow:hidden;animation:tb-bob 2.1s ease-in-out infinite;
}
/* ボタンの上を光が横切る */
.cta .panel .bigbtn::before{
  content:"";position:absolute;top:0;left:0;width:34%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));
  transform:translateX(-160%);animation:tb-shine 3.4s ease-in-out infinite;
}
.cta .panel .bigbtn:hover{animation:none;transform:translateY(3px);box-shadow:0 3px 0 #d9990a,0 12px 22px -18px rgba(0,0,0,.5);}
.cta .panel .bigbtn .env{
  width:clamp(38px,3.6vw,50px);height:clamp(38px,3.6vw,50px);border-radius:50%;background:#fff;
  display:grid;place-items:center;flex:0 0 auto;
}
.cta .panel .bigbtn .env svg{width:62%;height:62%;}
.cta .panel .bigbtn .tx{min-width:0;word-break:auto-phrase;text-wrap:balance;line-height:1.4;}
.cta .panel .bigbtn .ch{flex:0 0 auto;opacity:.85;}

.cta .panel .mailrow{
  margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;gap:10px 22px;flex-wrap:wrap;
}
.cta .panel .mailrow .ml{
  display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:center;
  font-size:clamp(14px,1.7vw,20px);font-weight:900;
}
.cta .panel .mailrow .lb2{white-space:nowrap;}
.cta .panel .mailrow a{color:#fff;border-bottom:2px solid var(--yellow);word-break:break-all;}
.cta .panel .hours{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;white-space:nowrap;}
.cta .panel .hours .lb{border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:3px 13px;font-size:12.5px;white-space:nowrap;}

/* オンライン相談のまる */
.cta .panel .online{
  width:clamp(124px,11.5vw,156px);height:clamp(124px,11.5vw,156px);border-radius:50%;
  background:#fff;color:var(--navy);flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;font-weight:900;line-height:1.45;font-size:clamp(12.5px,1.15vw,15px);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.55);
}
.cta .panel .online .tag{background:var(--sky);border-radius:999px;padding:3px 12px;font-size:.82em;white-space:nowrap;}

.cta .fine{margin-top:18px;text-align:center;font-size:12.8px;color:#4c5b73;font-weight:500;}
.cta .fine .r{color:var(--red);font-weight:900;}

/* フッターは置いていない。ページの最後は最終CTA。
   PCでは右下に浮かぶ .sticky が最後の一文に重なるので、その分の余白をここで取る */
.cta{padding-bottom:200px;}

/* ============================================================
   お問い合わせフォーム（ボタンで手前に浮き出る）
   ============================================================ */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px 16px;}
.modal[hidden]{display:none;}
.modal-bd{
  position:absolute;inset:0;background:rgba(8,26,58,.62);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .26s ease;
}
.modal-panel{
  position:relative;width:min(720px,100%);max-height:calc(100dvh - 48px);overflow:auto;
  background:#fff;border-radius:22px;padding:30px 34px 28px;
  box-shadow:0 40px 90px -30px rgba(8,26,58,.65),0 0 0 1px rgba(255,255,255,.6) inset;
  opacity:0;transform:translateY(26px) scale(.965);
  transition:opacity .3s cubic-bezier(.2,.9,.3,1),transform .3s cubic-bezier(.2,.9,.3,1);
  -webkit-overflow-scrolling:touch;
}
.modal.is-open .modal-bd{opacity:1;}
.modal.is-open .modal-panel{opacity:1;transform:translateY(0) scale(1);}
.modal-x{
  position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--navy);display:grid;place-items:center;
  cursor:pointer;transition:background .2s,transform .15s;
}
.modal-x:hover{background:#f1f5fb;transform:rotate(90deg);}

.fm-head{text-align:center;padding-right:34px;padding-left:34px;}
.fm-kick{
  display:inline-flex;align-items:center;gap:3px;background:var(--navy2);color:#fff;
  font-weight:900;font-size:13px;padding:6px 16px;border-radius:999px;
}
.fm-kick .y{color:var(--yellow);font-size:1.15em;}
.fm-head h2{margin:12px 0 0;font-size:clamp(21px,3vw,28px);font-weight:900;color:var(--navy);line-height:1.4;}
.fm-lead{margin-top:9px;font-size:13.5px;color:#4c5b73;line-height:1.85;}

.fm{margin-top:22px;}
.fm-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fm-f{display:block;margin-bottom:14px;min-width:0;}
.fm-f .lb{
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:900;color:var(--navy);margin-bottom:6px;
}
.fm-f .lb em{
  font-style:normal;background:var(--pink);color:#fff;font-size:10.5px;font-weight:900;
  padding:2px 7px;border-radius:4px;letter-spacing:.02em;
}
.fm-f input,.fm-f select,.fm-f textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:#f7fafd;
  border:1.5px solid #dde6f2;border-radius:10px;padding:13px 14px;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.fm-f textarea{resize:vertical;min-height:104px;line-height:1.8;}
.fm-f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#6f8099 50%),linear-gradient(135deg,#6f8099 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px;}
.fm-f input::placeholder,.fm-f textarea::placeholder{color:#9fadc0;}
.fm-f input:focus,.fm-f select:focus,.fm-f textarea:focus{
  outline:none;background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,111,224,.16);
}
.fm-f.is-bad input,.fm-f.is-bad select,.fm-f.is-bad textarea{border-color:var(--pink);background:#fff6f8;}
.fm-f .err{display:none;margin-top:6px;font-size:12px;font-weight:700;color:var(--pink);}
.fm-f.is-bad .err{display:block;}
.fm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.fm-note{margin-top:4px;font-size:11.8px;color:#7a889d;line-height:1.7;}
.fm-note a{color:var(--blue);border-bottom:1px solid rgba(31,111,224,.4);}
.fm-submit{
  margin:16px auto 0;width:100%;max-width:460px;display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(180deg,#0a49c8,#002da0);color:#fff;font-weight:900;font-size:clamp(15px,1.9vw,19px);
  border:0;border-radius:999px;padding:17px 22px;cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(0,45,160,.7);transition:transform .15s,box-shadow .15s,filter .2s;
}
.fm-submit:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(0,45,160,.6);}
.fm-submit:disabled{opacity:.6;cursor:progress;transform:none;}
.fm-submit .ch{opacity:.85;}
.fm-alt{margin-top:12px;text-align:center;font-size:12.2px;color:#7a889d;}
.fm-alt a{color:var(--blue);border-bottom:1px solid rgba(31,111,224,.4);}

.fm-done{text-align:center;padding:26px 10px 14px;}
.fm-done .ic{display:grid;place-items:center;margin:0 auto 14px;}
.fm-done h3{margin:0;font-size:clamp(20px,2.6vw,26px);font-weight:900;color:var(--navy);}
.fm-done p{margin-top:10px;font-size:14px;color:#4c5b73;line-height:1.9;}
.fm-close2{
  margin-top:20px;background:var(--navy2);color:#fff;border:0;border-radius:999px;
  font-weight:900;font-size:15px;padding:13px 34px;cursor:pointer;transition:background .2s;
}
.fm-close2:hover{background:var(--btn);}

body.modal-open{overflow:hidden;}

/* ---------- いつでも見えているCTA ---------- */
/* 画面の下に出しっぱなしにするCTA。キャンペーンの内容もここに入れる。
   ヘッダーからボタンを外したので、PCでも出す */
/* PC：右下に浮かぶカード。1024px以下では画面下いっぱいの帯に切り替える（下の @media 参照） */
.sticky{
  display:block;position:fixed;right:26px;bottom:26px;z-index:70;width:360px;
  background:rgba(6,44,110,.97);padding:16px 18px 18px;
  border-radius:18px;border:3px solid var(--yellow);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.55);
  transition:opacity .22s,transform .22s;
}
/* FV下のキャンペーン帯が見えているあいだは引っ込める（帯のボタンに重なるため） */
.sticky.is-off{opacity:0;transform:translateY(14px);pointer-events:none;}
@media (prefers-reduced-motion:reduce){.sticky{transition:none;}}
@keyframes tb-tagpop{0%,100%{transform:scale(1) rotate(0);}45%{transform:scale(1.1) rotate(-3deg);}}
.sticky .msg{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  color:#fff;font-size:13px;font-weight:700;margin-bottom:8px;line-height:1.4;
}
.sticky .msg .tag{
  background:var(--pink);color:#fff;font-weight:900;font-size:11px;padding:0 10px;border-radius:5px;white-space:nowrap;
  display:inline-flex;align-items:center;align-self:stretch;
}
.sticky .msg b{font-weight:900;white-space:nowrap;}
.sticky .msg .z{color:var(--yellow);font-size:1.5em;margin:0 1px;letter-spacing:-.02em;display:inline-block;}
.sticky .btn{
  display:flex;align-items:center;justify-content:center;gap:10px;background:var(--yellow);color:var(--navy);
  font-weight:900;font-size:16px;padding:14px;border-radius:999px;box-shadow:0 4px 0 var(--yellow-d);
  transition:transform .15s,box-shadow .15s;
  max-width:520px;margin-inline:auto;
  position:relative;overflow:hidden;animation:tb-bob 2.1s ease-in-out infinite;
}
/* ボタンの上を光が横切る */
.sticky .btn::before{
  content:"";position:absolute;top:0;left:0;width:36%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));
  transform:translateX(-160%);animation:tb-shine 3.2s ease-in-out infinite;
}
.sticky .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--yellow-d);}
.sticky .btn .ch{opacity:.75;}

/* ============================================================
   レスポンシブ
   ============================================================ */
/* ============================================================
   レスポンシブ
   ブレイクポイントは 1024px（タブレット）と 768px（スマホ）の2つだけ。
   部品ごとの細かい切り替えは、上のほうに書いた @container で行う。
   ============================================================ */

/* ---------- ～1024px：タブレット ---------- */
@media (max-width:1024px){
  /* ヘッダー */

  /* FV */
  .hero .grid{grid-template-columns:1fr;}
  .hero .visual{max-width:760px;margin:14px auto 0;}
  .hero h1 .ln{white-space:normal;}
  .fvband{grid-template-columns:1fr;}
  .fvband .bl{clip-path:none;padding:18px 24px;}
  .fvband .br{padding:16px 24px 20px;}

  /* お悩み */
  .worry .stage{grid-template-columns:1fr;}
  .worry .center{order:-1;display:grid;place-items:center;}
  .worry .side.r{align-items:flex-start;}
  .worry .side.l .bubble:nth-child(2),.worry .side.r .bubble:nth-child(2){margin:0;}
  .bubble{max-width:none;}
  .solve{grid-template-columns:1fr;text-align:center;justify-items:center;}

  /* 作って終わりではない */
  .vs .panels{grid-template-columns:1fr;gap:44px;}

  /* ワンストップ */
  .one .head{grid-template-columns:1fr;}
  .one .head h2{white-space:normal;}
  .one .head img.l,.one .head img.r{display:none;}
  .one .cols{grid-template-columns:1fr;}
  .one .steps{grid-template-columns:repeat(3,1fr);row-gap:24px;}
  .one .steps .st:nth-child(4){border-left:none;}
  .one .foot{grid-template-columns:1fr;justify-items:center;}

  /* キャンペーン */
  .camp .cmp{grid-template-columns:1fr;row-gap:34px;}
  .camp .arrow{transform:rotate(90deg);height:44px;width:66px;justify-self:center;}
  .camp .headrow{position:static;display:grid;grid-template-columns:1fr;justify-items:center;}
  .camp .headrow img{position:static;width:120px;margin-top:0;}
  .camp .limit{grid-template-columns:1fr;justify-items:center;}
  .camp .limit img{display:none;}

  /* 料金プラン */
  .plans .grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto;}


  /* FAQ */
  .faq .grid{grid-template-columns:repeat(2,1fr);}
  .faq .support{grid-template-columns:1fr;text-align:center;justify-items:center;}
  .faq .midcta{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .faq .midcta .chk{justify-content:center;gap:6px 16px;}
  .faq .midcta .t,.faq .midcta .btn{width:100%;}
  .faq .midcta .btn{justify-content:center;gap:9px;padding:14px 14px;font-size:14px;line-height:1.5;}
  .faq .midcta .t .l1,.faq .midcta .t .l2{white-space:normal;}

  /* キャンペーン帯：紺とクリームを別々の角丸ブロックにする */
  .fvband-wrap{margin-top:10px;padding-bottom:20px;}
  /* スマホでは紺とクリームを離さず、1枚の枠に収める（2026-08-25 社長指示） */
  .fvband{background:var(--cream3);overflow:hidden;border-radius:15px;row-gap:0;}
  .fvband .bl{border-radius:0;padding:14px 16px;gap:12px;}
  .fvband .br{border-radius:0;padding:14px 16px 16px;gap:6px 12px;}

  /* いつでも見えているCTA：画面下いっぱいの帯にする */
  .sticky{
    left:0;right:0;bottom:0;width:auto;border-radius:0;border:0;
    border-top:3px solid var(--yellow);
    padding:9px 14px calc(9px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -12px rgba(0,0,0,.6);
  }
  body{padding-bottom:112px;}
  /* 画面下いっぱいの帯。body 側で 112px 空けているので、ここは詰める */
  .cta{padding-bottom:36px;}

  /* 最終CTA */
  .cta h2{white-space:normal;}
  .cta .top{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .cta .top .mock{display:none;}
  .cta .merits{border-radius:22px;grid-template-columns:1fr;}
  .cta .merits .m+.m{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:16px;}
  .cta .panel{grid-template-columns:1fr;padding:28px 22px 26px;gap:20px;}
  .cta .panel .online{order:-1;margin:0 auto;}

}

/* ---------- ～768px：スマホ ---------- */
@media (max-width:768px){
  /* 全体 */
  .sec{padding:58px 0;}
  .wrap{padding:0 18px;}
  .deco-line::before,.deco-line::after{display:none;}

  /* PC用に入れてある改行は消して、文字を自然に流す
     （狭い画面では、PCの位置で折ると「サポート。」だけの行などができてしまう） */
  br.pc{display:none;}

  /* 行の終わりに1〜2文字だけ取り残されるのを防ぐ（見出し・キャッチ・短い説明文） */
  .sec-h .lead,.hero .lead,.bubble p,
  .solve h3,.solve p,.vs .closing,
  .one .head p,.one .flow .tab,.one .you .fig p,.one .goal,.one .foot p,
  .one .steps .st p,
  .ribbon,.camp .ttl,.camp .sub,.camp .card .foot,.camp .cond .tx,.camp .band,
  .camp .limit .m .l1,.camp .limit .m .l2 .t,
  .plan .desc,.plans .note,
  .vsco .yearsum .ttl,.vsco .yearsum .diff,.vsco .cnote,
  .faq .q h4,.faq .q p,.faq .midcta .t .l1,.faq .midcta .t .l2,
  .cta .sub,.cta .panel .l1,.cta .fine,.cta .merits p,
  .fvband .t1,.fvband .t2,.fm-lead{text-wrap:balance;}

  /* 短い強調句・数字と単位は、途中で切らせない */
  .vs .pan li .blue,.one .steps .st h4,.camp .pitem .lb,
  .vsco .yearsum .k,.plan .zero{white-space:nowrap;}
  /* 逆に、狭い箱の中では「まとめない」。まとめると箱からはみ出す */
  .one .you .fig .nw,.one .goal .nw{white-space:normal;}

  /* ヘッダー */
  .hd .burger{display:block;}
  br.sp{display:inline;}
  .hd .logo img{width:148px;}
  .hd .inner{padding:8px 16px;gap:10px;}

  /* FV：見出し → 説明 → イラスト → 月額（白いカード）の順に積む
     支給モックに合わせて、間隔と文字の大きさを詰めている */
  .hero{padding-top:14px;}
  .hero .kicker{font-size:clamp(12.5px,3.8vw,17px);gap:6px;justify-content:center;}
  .hero .kicker::before,.hero .kicker::after{height:20px;}
  .hero .grid{display:flex;flex-direction:column;align-items:stretch;gap:0;}
  .hero .tx{display:contents;}           /* 中身を .grid の直接の子として並べ替える */
  .hero h1{margin-top:8px;font-size:clamp(28px,8.4vw,40px);line-height:1.28;}
  .hero .lead{margin-top:14px;font-size:clamp(12.5px,3.5vw,16px);line-height:1.9;}
  .hero .visual{order:1;margin:6px -18px 0;max-width:none;width:calc(100% + 36px);}
  /* 4段はスマホでは2×2。点線は消す（横に4つ並べると文字が3行に割れて読めない） */
  .hero .flow{
    --ic:clamp(46px,13.5vw,58px);
    order:2;display:grid;grid-template-columns:1fr 1fr;
    gap:14px clamp(6px,3vw,18px);margin-top:16px;
  }
  .hero .flow .dots{display:none;}
  .hero .flow p{margin-top:7px;font-size:clamp(11.5px,3.3vw,14px);}
  .hero .pricerow{
    order:3;margin:14px 0 0;justify-content:center;align-self:stretch;gap:10px;
    background:none;padding:4px 0;   /* 白いカードは付けない */
  }
  .hero .pricerow .pill{font-size:clamp(14px,4.4vw,19px);padding:6px 14px;border-radius:8px;}
  .hero .pricerow .n{font-size:clamp(44px,13.5vw,64px);}
  .hero .pricerow .u{font-size:clamp(18px,5.4vw,28px);}
  .fvband .bl{gap:14px;padding:16px 18px;}
  .fvband .gift{width:44px;height:44px;}
  .fvband .t1{font-size:15.5px;}
  .fvband .t2{font-size:13px;}

  /* お悩み */
  .bubble{border-radius:22px;padding:16px 20px;}
  .solve img.d{width:150px;}

  /* ワンストップ：2列だと1行8文字ほどしか入らず、行末がガタガタになる。
     スマホでは1列にして「アイコン左・文章右」に組み替える */
  .one .flow{padding:18px 14px;}
  .one .steps{grid-template-columns:1fr;padding:8px 12px;}
  .one .steps .st{
    border-left:none !important;
    display:grid;grid-template-columns:46px 1fr;column-gap:14px;
    padding:14px 0;text-align:left;
  }
  .one .steps .st+.st{border-top:1px solid #eef3fa;}
  .one .steps .st .ic{grid-row:1 / span 2;width:46px;height:46px;margin:0;align-self:center;}
  .one .steps .st h4{font-size:15px;align-self:end;}
  .one .steps .st p{margin-top:3px;font-size:12.8px;line-height:1.75;align-self:start;}
  .one .goal{border-radius:16px;}
  .one .foot{padding:20px 18px;}

  /* キャンペーン */
  .ribbon{padding:11px 16px;font-size:16px;clip-path:none;border-radius:8px;}
  /* ★2026-08-25にバッジをスマホ非表示にしたので、リボンと見出しが2pxしか離れず
     くっついて見えていた。バッジぶんの間隔をここで取り直す */
  .camp .headrow{gap:0;}
  .camp .ttl{margin-top:20px;}
  .camp .sub{margin-top:15px;}
  /* 地のクリーム色の円が見出しの真裏に来て、黄色のバッジと重なって濁るので外へ逃がす */
  .camp::before{left:-130px;top:60px;width:190px;height:190px;}
  /* 星がスマホでは見出しの「ン」に重なるので、バッジの右の空きへ移す（インラインstyleの上書き） */
  .camp .deco.star{top:130px !important;right:16px !important;}
  .camp .prow{flex-direction:column;gap:10px;}
  .camp .cond{grid-template-columns:1fr;justify-items:center;text-align:center;}

  /* 他社との比較：2枚を縦に積む */
  .vsco .yearsum .row{grid-template-columns:1fr;gap:12px;}

  /* ---- 比較表：スマホは4列とも画面に収める ----
     横スクロールだと、いちばん見せたい「ひろげるくん」の列が最初から
     画面の外にいて気づかれない。表の形はそのままに、文字と余白を詰めて
     スクロールなしで4列とも見えるようにする。 */
  .vsco .swipe{display:none !important;}
  .vsco .ctable{margin-top:26px;overflow-x:visible;padding:12px 0 4px;}
  .vsco table{width:100%;min-width:0;table-layout:fixed;}
  .vsco th,.vsco td{overflow-wrap:anywhere;}
  .vsco thead th{padding:9px 3px;font-size:11px;white-space:normal;line-height:1.35;}
  .vsco thead th.lead-cell{width:72px;}
  .vsco thead th.us .crown{display:block;margin:0 0 1px;}
  .vsco tbody th{padding:10px 5px;font-size:11px;white-space:normal;line-height:1.4;}
  .vsco tbody td{padding:10px 4px;font-size:11px;line-height:1.5;}
  .vsco td.num{font-size:15px;letter-spacing:-.02em;}
  .vsco td.num .u{font-size:.58em;margin-left:1px;}
  .vsco td.num.zero{font-size:20px;}
  .vsco td .s{font-size:9.5px;margin-top:2px;}
  /* ✕ △ ✓ は文字の横だと幅を食うので、上に置く */
  .vsco .m{display:block;margin:0 auto 3px;width:17px;height:17px;font-size:10px;vertical-align:0;}
  .vsco td.us{box-shadow:inset 2px 0 0 var(--yellow),inset -2px 0 0 var(--yellow);}
  .vsco tbody tr:last-child td.us{box-shadow:inset 2px 0 0 var(--yellow),inset -2px 0 0 var(--yellow),inset 0 -2px 0 var(--yellow);}

  /* FAQ：アイコンを本文の横に置くと本文が200pxほどしか残らず、
     1行7〜8文字で折り返してしまう。スマホではアイコンを上の行に出す */
  .faq .grid{grid-template-columns:1fr;}
  .faq .q{padding:20px 18px;gap:8px 14px;}
  .faq .q .ic{width:46px;height:46px;}
  .faq .q>div{flex:1 1 100%;}
  .faq .midcta .btn{white-space:normal;text-align:center;text-wrap:balance;}

  /* 最終CTA */
  .cta .kick::before,.cta .kick::after{display:none;}
  .cta .panel{padding:24px 16px 22px;}
  .cta .panel .l1::before,.cta .panel .l1::after{display:none;}
  .cta .panel .l1{display:block;}
  .cta .panel .bigbtn{gap:12px;padding:16px 16px;}
  .cta .panel .bigbtn .env{width:44px;height:44px;}
  .cta .panel .mailrow .ml{font-size:15px;}

}

/* ---------- お問い合わせフォーム（開いたときのダイアログ）のレスポンシブ ----------
   ・～600px（スマホ）… 下からせり上がるシート。入力欄は縦1列
   ・601〜1024px（タブレット）… 画面中央のダイアログのまま。全幅シートにすると
     「お名前」の欄が750pxもの幅になって間延びするため、ここでは切り替えない
   ・高さが足りないとき（スマホ横向きなど）… 画面いっぱいの高さにして、頭を詰める */
@media (max-width:600px){
  /* 画面の端にぴったり付けず、左右と下に余白を取って「浮いたカード」にする。
     中の余白も広げて、入力欄が画面の縁に迫らないようにする */
  .modal{padding:0 12px 12px;place-items:end center;}
  .modal-panel{
    width:100%;max-height:92dvh;border-radius:20px;padding:24px 20px 22px;
    transform:translateY(40px);
  }
  .fm-head{padding-inline:30px;}
  .fm-row{grid-template-columns:1fr;gap:0;}
  .fm-submit{max-width:none;}
  /* iOSは16px未満の入力欄にふれると画面を勝手に拡大する。それを止める */
  .fm-f input,.fm-f select,.fm-f textarea{font-size:16px;}
}

/* 画面の高さが足りないとき（スマホ横向き・低いウィンドウ） */
@media (max-height:520px){
  .modal{padding:0;place-items:center;}
  .modal-panel{
    width:min(720px,100%);max-height:100dvh;border-radius:0;padding:16px 20px 18px;
    transform:translateY(20px);
  }
  .fm-head{padding-inline:46px;}
  .fm-kick{font-size:12px;padding:5px 13px;}
  .fm-head h2{font-size:20px;margin-top:8px;}
  .fm-lead{font-size:12.5px;margin-top:6px;line-height:1.7;}
  .fm{margin-top:14px;}
  .fm-f{margin-bottom:10px;}
  .fm-f textarea{min-height:74px;}
  .fm-submit{margin-top:10px;padding:14px 20px;}
}

/* ---------- ～400px：iPhone SE など、いちばん狭い画面 ---------- */
@media (max-width:400px){
  /* FVの帯：見出しが「実施中／！」のように切れないよう、少しだけ字を小さくする */
  .fvband .bl{padding:14px 14px;gap:10px;}
  .fvband .gift{width:38px;height:38px;}
  .fvband .t1{font-size:14px;}
  .fvband .t2{font-size:12px;}
  .ribbon{font-size:15px;}

  /* フォーム：カードを内側に寄せたぶん、見出しまわりの余白は少し戻す */
  .fm-head{padding-inline:22px;}

  /* 最終CTA：受付時間の行が1行に収まらず、はみ出していた */
  .cta .panel .mailrow .ml{font-size:14px;}
  .cta .panel .hours{white-space:normal;flex-wrap:wrap;justify-content:center;text-align:center;gap:6px 10px;}

  /* 最終CTAの大きいボタン：矢印と余白を削って、文字の入る幅を広げる */
  .cta .panel .bigbtn{gap:10px;padding:15px 12px;font-size:16px;}
  .cta .panel .bigbtn .env{width:38px;height:38px;}
  .cta .panel .bigbtn .ch{display:none;}
}

/* ---------- ～344px：iPhone SE(第1世代)級のいちばん狭い画面 ---------- */
@media (max-width:344px){
  /* 比較表：この幅だと会社名が「SEO対策会／社」と切れるので、もう一段詰める */
  .vsco thead th{font-size:10px;padding:8px 2px;}
  .vsco thead th.lead-cell{width:64px;}
  .vsco tbody th{font-size:10px;padding:9px 4px;}
  .vsco tbody td{font-size:10px;padding:9px 3px;}
  .vsco td.num{font-size:13.5px;}
  .vsco td.num.zero{font-size:18px;}
  .vsco td .s{font-size:9px;}
}

/* ---------- 部品ごとの切り替え（画面幅ではなく“その部品の幅”で決める） ---------- */

/* 料金プランのカード：カードが細くなったら仕様を縦に積む */
@container plan (max-width:300px){
  .plan .spec{grid-template-columns:1fr;}
  .plan .spec div+div{border-left:none;border-top:1px solid #e4ecf8;}
}
/* FAQのカード：細いときはアイコンを上に
   （※ 要素は「自分自身のコンテナクエリ」では変えられないので、中の子だけを動かす） */
@container faqcard (max-width:260px){
  .faq .q .ic{margin-inline:auto;}
  .faq .q>div{flex:1 1 100%;}
}
/* FVの帯（クリーム側）：入りきらなくなったらボタンを全幅に */
@container fvright (max-width:560px){
  .fvband .bandbtn{width:100%;justify-content:center;padding:13px 16px;margin-left:0;}
  .fvband .br{gap:10px 14px;justify-content:center;text-align:center;}
}
/* 先着5社の吹き出し：細いときはボタンを全幅に */
@container limitmsg (max-width:420px){
  .camp .limit .m .l2{width:100%;padding:14px 16px 16px;border-radius:16px;}
  .camp .limit .m .l2 .b{width:100%;justify-content:center;}
}
/* 最終CTAの中身：細いときはメール行を縦に */
@container ctamain (max-width:520px){
  .cta .panel .mailrow{flex-direction:column;gap:12px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}

/* ============================================================
   スマホで消す／寄せるもの（2026-08-25 社長指示）
   画面が縦に長くなりすぎるのを抑えるため、PCでは効くが
   スマホでは場所を食うだけの要素を落としている
   ============================================================ */
@media (max-width:768px){
  /* ①FVの4段（SEO対策をしっかり→…→集客・売上UP）。
     スマホでは2×2で高さを取り、見出しと月額を押し下げるので消す */
  .hero .flow{display:none;}

  /* ③「そのお悩み、ひろげるくんが解決します！」の下のデバイスのイラスト */
  .solve img.d{display:none;}

  /* ④Googleの出典リンクは右に寄せる */
  .aiseo .ai-src .cite{justify-self:end;}

  /* ⑤キャンペーン節の「SEOを始めたい事業者様を応援します！」の吹き出し */
  .camp .headrow>img{display:none;}
}

/* ============================================================
   スマホの余白の詰め直し（2026-08-25 社長指示）
   ============================================================ */
@media (max-width:768px){
  /* キャンペーン節：見出しの右にある星が「キャンペーン」の字に重なるので消す */
  .camp .deco.star{display:none;}

  /* Googleの出典バー：内側が窮屈だったので広げる */
  .aiseo .ai-src{padding:20px;row-gap:15px;}
  .aiseo .ai-src .t p{line-height:1.8;}
  .aiseo .ai-src .t p+p{margin-top:8px;}
  .aiseo .ai-src .cite{padding:13px 16px;line-height:1.7;}
}