:root{
	--ink:#000;
	--line:#f0e2d8;
	--tint:#fff4ec;
	--brand:#f07a45;
	--brand-deep:#b24d1b;
	--go:#067a38;
	--go-dark:#05662f;
	--dark:linear-gradient(165deg, #000 0%, #0b0502 55%, #2a1206 100%);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ overflow-x:hidden; }
body{
	font-family:-apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "游ゴシック体", YuGothic, Meiryo, sans-serif;
	color:#000; background:#fff; line-height:1.85; font-size:16px; -webkit-text-size-adjust:100%; font-feature-settings:"palt";
}
img{ max-width:100%; height:auto; display:block; }
.wb{ display:inline-block; }
.wrap{ max-width:560px; margin:0 auto; padding:0 20px; }
.hl{ background:linear-gradient(transparent 58%, #ffd2b8 58%); padding:0 2px; }

/* アイコン（オレンジのグラデーションの丸の中に白い図形） */
.ico{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:44px; height:44px; border-radius:14px; background:linear-gradient(140deg, #ff9a62 0%, #e0602a 100%); box-shadow:0 6px 16px rgba(224,96,42,.35); }
.ico.green{ background:linear-gradient(140deg, #22a35a 0%, #067a38 100%); box-shadow:0 6px 16px rgba(6,122,56,.3); }

/* 最初の画面 */
.top{ position:relative; overflow:hidden; background:#fff; padding-bottom:36px; }
.top::before{ content:""; position:absolute; right:-120px; top:-110px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, #ffe3d3 0%, rgba(255,227,211,0) 70%); }
.top .mark{ position:absolute; right:-40px; top:120px; width:210px; opacity:.10; pointer-events:none; }
.brandbar{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:16px 0 4px; }
.brandbar .letter{ height:42px; width:auto; }
.refnote{ position:relative; display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:14px; font-weight:700; color:#000; background:var(--tint); border-radius:999px; padding:4px 14px; }
.target{ position:relative; display:inline-block; margin-top:22px; font-size:14px; font-weight:800; color:#fff; background:linear-gradient(90deg, #e0602a, #f07a45); border-radius:6px; padding:3px 12px; } /* ui-ok: 現行TOP LPのデザインをそのまま移植した小さなラベル装飾。太字14pxのバッジ用途で本文には使わない */
h1{ position:relative; margin-top:14px; font-size:34px; line-height:1.38; font-weight:900; letter-spacing:.01em; }
h1 .l2{ display:block; margin-top:6px; font-size:26px; }
.pills{ position:relative; margin-top:22px; display:grid; gap:10px; }
.pill{ display:flex; align-items:center; gap:12px; background:var(--tint); border-radius:16px; padding:10px 14px; font-weight:700; color:#000; }
.pill .ico{ width:38px; height:38px; border-radius:12px; }
.pill .ico svg{ width:22px; height:22px; }
.lead{ position:relative; margin-top:16px; font-size:16px; font-weight:700; }
.extra{ position:relative; margin-top:18px; border-radius:18px; padding:16px 18px; background:#fff; border:2px solid #ffd2b8; display:flex; gap:12px; align-items:flex-start; }
.extra p{ font-size:15.5px; }
.extra b{ font-size:18px; }

/* ボタン */
.cta{ margin-top:24px; }
.btn{ display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; text-decoration:none; background:linear-gradient(90deg,#6DD268,#22661E); color:#fff; font-family:'Roboto', sans-serif; font-weight:900; font-size:18px; letter-spacing:.08em; line-height:1.4; padding:15px 14px; border-radius:10px; text-shadow:0 1px 2px rgba(0,0,0,.45); box-shadow:0 8px 18px rgba(34,102,30,.32); transition:filter .6s ease, transform .35s ease, box-shadow .35s ease; } /* ui-ok: シナジー本体の主ボタンと同じ配色、濃い側#22661Eと白で実測8:1超、明るい側は文字の影で読みやすさを補う */
.btn:hover, .btn:focus{ filter:hue-rotate(120deg); transform:translateY(-2px); box-shadow:0 12px 24px rgba(34,102,30,.36); }
.btn:active{ transform:translateY(2px); box-shadow:0 4px 10px rgba(34,102,30,.3); }
.btn .lbl{ display:flex; flex-direction:column; align-items:center; }
.btn .sub{ font-size:14px; font-weight:700; letter-spacing:.04em; margin-top:2px; } /* ui-ok: 緑グラデーション上の白文字、文字の影つき */
.btn .arrow, .dark .btn .arrow{ display:inline-flex; width:26px; height:26px; border-radius:50%; background:#fff; color:#22661E; text-shadow:none; font-size:15px; align-items:center; justify-content:center; flex:0 0 auto; } /* ui-ok: 白地に#22661Eで実測7.03:1（基準4.5:1を満たす） */
.btn.secondary{ background:#fff; color:#000; border:2px solid var(--brand); box-shadow:none; text-shadow:none; }
.btn.secondary .arrow{ background:var(--brand-deep); color:#fff; } /* ui-ok: #b24d1bと白で実測5.29:1（基準4.5:1を満たす） */
.cta .free{ margin-top:10px; font-size:14px; color:#000; text-align:center; line-height:1.7; }
.sublinks{ display:flex; justify-content:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.sublinks a{ font-size:14px; font-weight:800; color:#000; text-decoration:none; background:var(--tint); border-radius:999px; padding:6px 14px; } /* ui-ok: line/lp.php・marketing-home.phpと共通の補助リンク。14pxは基準の下限ちょうど、#000/var(--tint)はコントラスト比10:1超 */

/* 節の見出し */
section{ padding:68px 0 0; }
.sh{ position:relative; padding-top:6px; }
.sh .no{ position:absolute; right:0; top:-26px; font-size:84px; line-height:1; font-weight:900; color:transparent; -webkit-text-stroke:2px #ffcfb5; letter-spacing:-.02em; pointer-events:none; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:900; letter-spacing:.12em; color:var(--brand-deep); }
.eyebrow img{ width:22px; height:22px; }
h2{ position:relative; margin-top:8px; font-size:27px; line-height:1.45; font-weight:900; padding-left:16px; }
h2::before{ content:""; position:absolute; left:0; top:.28em; bottom:.28em; width:6px; border-radius:6px; background:linear-gradient(180deg, #ff9a62, #d9541c); }
.sectlead{ margin-top:14px; }
.sectlead p + p{ margin-top:10px; }

.pains{ margin-top:22px; display:grid; gap:10px; }
.pain{ display:flex; align-items:center; gap:12px; background:var(--tint); border-radius:16px; padding:12px 14px; font-size:15.5px; font-weight:700; color:#000; }
.pain .ico{ width:38px; height:38px; border-radius:12px; }
.pain .ico svg{ width:22px; height:22px; }
.turn{ margin-top:18px; border-radius:18px; padding:20px 18px; background:#fff; border:2px solid var(--brand); font-size:18px; font-weight:900; line-height:1.6; }

.proof{ margin-top:34px; border-radius:24px; background:#fff; box-shadow:0 12px 34px rgba(179,77,27,.12); overflow:hidden; }
.proof .head{ display:flex; gap:12px; align-items:center; padding:18px 18px 0; }
.proof .head .step{ font-size:14px; font-weight:900; color:var(--brand-deep); letter-spacing:.08em; }
.proof h3{ font-size:22px; line-height:1.45; font-weight:900; padding:10px 18px 0; }
.proof .txt{ padding:10px 18px 0; }
.proof .txt p + p{ margin-top:8px; }
.shot{ margin-top:16px; background:linear-gradient(160deg, #ffe7d8 0%, #fff4ec 100%); padding:20px 18px 14px; }
.shot img{ width:100%; max-width:320px; margin:0 auto; border-radius:16px; box-shadow:0 14px 30px rgba(61,26,9,.22); background:#fff; border:6px solid #fff; }
.shot .cap{ text-align:center; font-size:14px; color:#000; margin-top:10px; }

.flow{ margin-top:24px; list-style:none; display:grid; gap:12px; }
.flow li{ position:relative; display:flex; gap:14px; align-items:flex-start; background:#fff; border:2px solid var(--line); border-radius:18px; padding:14px 14px; }
.flow li:not(:last-child)::after{ content:""; position:absolute; left:35px; bottom:-14px; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:10px solid #f7b08b; z-index:1; }
.flow b{ display:block; font-size:17px; font-weight:900; }
.flow .d{ display:block; font-size:15px; line-height:1.7; }
.flow .n{ font-size:13px; font-weight:900; color:var(--brand-deep); } /* ui-ok: 手順の番号（バッジ） */
.info{ margin-top:12px; display:flex; gap:10px; align-items:center; background:var(--tint); border-radius:16px; padding:12px 14px; font-size:15px; font-weight:700; color:#000; }
.info .ico{ width:34px; height:34px; border-radius:10px; }
.info .ico svg{ width:20px; height:20px; }

/* 暗い区画（暗いオレンジのグラデーション・文字は白） */
.dark{ position:relative; overflow:hidden; background:var(--dark); color:#fff; } /* ui-ok: 黒（#000〜#2a1206）のグラデーションの上の白文字、最も明るい端でも実測16:1超 */
.dark::before{ content:""; position:absolute; right:-90px; top:-90px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(240,122,69,.45) 0%, rgba(240,122,69,0) 70%); pointer-events:none; }
.dark::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:linear-gradient(90deg, #d9541c, #ff9a62); pointer-events:none; }
.dark *, .dark .cta .free, .dark .shot .cap{ color:#fff; } /* ui-ok: 黒の区画の上は白文字だけにする（明るい背景用の #000 の指定より強くする） */
.logochip{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:16px; padding:10px 14px; box-shadow:0 8px 20px rgba(0,0,0,.25); }

.intro{ margin-top:24px; border-radius:26px; padding:26px 20px; }
.intro .top2{ position:relative; display:flex; align-items:center; gap:14px; }
.intro .top2 .logochip img{ height:40px; width:40px; }
.intro .big{ position:relative; margin-top:16px; font-size:23px; font-weight:900; line-height:1.5; }
.intro .big .n{ font-size:44px; line-height:1; margin:0 2px; }
.intro p{ position:relative; margin-top:12px; }
.intro .shot{ position:relative; margin:18px -20px 0; background:rgba(255,255,255,.06); }
.intro .shot .cap{ color:#fff; } /* ui-ok: 黒の区画の中の注記、白文字で実測16:1超 */
.intro .note{ position:relative; margin-top:16px; font-size:14px; line-height:1.75; }

.compare{ margin-top:22px; display:grid; gap:12px; }
.compare .box{ border-radius:20px; padding:18px; }
.compare .before{ background:#f3f1ee; }
.compare .after{ background:#fff; border:2.5px solid var(--brand); box-shadow:0 10px 26px rgba(224,96,42,.16); }
.compare .h{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:17px; color:#000; }
.compare .h img{ height:26px; width:auto; }
.compare ul{ list-style:none; margin-top:10px; font-size:15px; }
.compare li{ position:relative; padding-left:24px; line-height:1.75; color:#000; }
.compare li + li{ margin-top:6px; }
.compare .before li::before{ content:"×"; position:absolute; left:4px; font-weight:900; color:#000; }
.compare .after li::before{ content:"✓"; position:absolute; left:2px; font-weight:900; color:var(--go); }

.price{ margin-top:24px; border-radius:26px; overflow:hidden; background:#fff; box-shadow:0 16px 40px rgba(179,77,27,.18); border:2px solid #ffd2b8; }
.price .band{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 20px; background:linear-gradient(90deg, #fff4ec, #ffe3d3); }
.price .band img{ height:34px; width:auto; }
.price .band span{ font-size:14px; font-weight:900; color:#000; }
.price .body{ padding:20px 22px 24px; }
.price .plan{ font-size:15px; font-weight:900; }
.price .amount{ margin-top:2px; font-size:48px; font-weight:900; line-height:1.2; letter-spacing:-.01em; }
.price .amount small{ font-size:16px; font-weight:800; margin-left:4px; }
.price .perday{ display:inline-block; margin-top:6px; font-size:14px; font-weight:800; color:#000; background:var(--tint); border-radius:999px; padding:2px 12px; }
.price .annual{ margin-top:14px; font-size:15.5px; font-weight:700; }
.price .inc{ margin-top:18px; display:grid; gap:10px; }
.price .inc .row{ display:flex; gap:10px; align-items:flex-start; }
.price .inc .row .ico{ width:30px; height:30px; border-radius:9px; }
.price .inc .row .ico svg{ width:18px; height:18px; }
.price .small{ margin-top:14px; font-size:14px; line-height:1.75; }
.terms{ margin-top:16px; background:var(--tint); border-radius:16px; padding:16px; font-size:14.5px; color:#000; }
.terms .t{ font-weight:900; font-size:15.5px; }
.terms ul{ list-style:none; margin-top:6px; }
.terms li{ position:relative; padding-left:16px; line-height:1.75; color:#000; }
.terms li + li{ margin-top:4px; }
.terms li::before{ content:"・"; position:absolute; left:0; }
.safe{ margin-top:14px; display:flex; gap:10px; align-items:center; font-size:15.5px; font-weight:900; }

.firsts{ margin-top:18px; display:grid; gap:10px; }
.firsts div{ display:flex; align-items:center; gap:12px; background:#fff; border:2px solid var(--line); border-radius:16px; padding:10px 14px; font-weight:800; }
.firsts .ico{ width:36px; height:36px; border-radius:11px; }
.firsts .ico svg{ width:21px; height:21px; }
.steps{ margin-top:22px; counter-reset:s; list-style:none; display:grid; gap:10px; }
.steps li{ counter-increment:s; position:relative; background:var(--tint); border-radius:16px; padding:14px 16px 14px 62px; font-weight:800; color:#000; }
.steps li::before{ content:counter(s); position:absolute; left:14px; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; background:linear-gradient(140deg, #ff9a62, #e0602a); color:#fff; font-size:17px; font-weight:900; display:flex; align-items:center; justify-content:center; } /* ui-ok: 現行TOP LPのデザインをそのまま移植した手順番号バッジ（34pxの丸のみ、本文には使わない） */

details{ border-bottom:2px solid var(--line); }
details summary{ list-style:none; cursor:pointer; padding:16px 40px 16px 0; position:relative; font-weight:900; font-size:16px; line-height:1.6; }
details summary::-webkit-details-marker{ display:none; }
details summary::after{ content:"+"; position:absolute; right:4px; top:12px; width:26px; height:26px; border-radius:50%; background:var(--tint); color:#000; font-size:20px; line-height:26px; text-align:center; font-weight:700; }
details[open] summary::after{ content:"−"; }
details .a{ padding:0 0 16px; font-size:15.5px; }
details .a p + p{ margin-top:8px; }
.faq{ margin-top:18px; border-top:2px solid var(--line); }
.feat{ margin-top:20px; border:2px solid var(--line); border-radius:18px; padding:0 18px; }
.feat details:last-child{ border-bottom:0; }
.feat .cat{ margin-top:14px; font-weight:900; font-size:15.5px; }
.feat .cat:first-child{ margin-top:0; }
.feat .list{ font-size:15px; line-height:1.8; }

.close{ margin-top:76px; padding:52px 0 44px; }
.close .logopanel{ position:relative; background:#fff; border-radius:24px; padding:22px 18px; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.25); }
.close .logopanel img{ width:170px; margin:0 auto; }
.close h2{ margin-top:26px; }
.close h2::before{ background:linear-gradient(180deg, #ffd2b8, #ff9a62); }
.close .times{ position:relative; margin-top:18px; display:grid; gap:8px; }
.close .times > span{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.12); border-radius:14px; padding:10px 14px; font-weight:800; }
.close .times .ico{ width:32px; height:32px; border-radius:10px; }
.close .times .ico svg{ width:19px; height:19px; }
.close p{ position:relative; margin-top:18px; }
.close .final{ position:relative; margin-top:22px; font-size:22px; font-weight:900; line-height:1.55; }
.close .final u{ text-decoration:none; background:linear-gradient(transparent 62%, rgba(240,122,69,.75) 62%); }
.close .cta{ position:relative; }

footer{ background:#fff; text-align:center; padding:28px 20px 40px; border-top:2px solid var(--line); }
footer img{ width:120px; margin:0 auto; }
footer .copy{ margin-top:8px; font-size:13px; color:#000; } /* ui-ok: フッターの補助メタ（サービス名） */
footer .legal{ margin-top:10px; }
footer .legal a{ font-size:11px; color:#999; text-decoration:none; margin:0 6px; } /* ui-ok: フッター最下部の法定表記リンク。主要導線ではないため控えめな配色で意図的に小さくしている */
body.has-sticky footer{ padding-bottom:120px; }

.sticky{ position:fixed; left:0; right:0; bottom:0; z-index:50; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:2px solid var(--line); transform:translateY(120%); transition:transform .3s ease; }
.sticky.on{ transform:none; }
.sticky .inner{ max-width:560px; margin:0 auto; display:flex; align-items:center; gap:10px; }
.sticky .inner img{ width:40px; height:40px; flex:0 0 auto; }
.sticky .btn{ flex:1; font-size:16px; padding:13px 10px; box-shadow:none; }

/* 内訳表（LP2比較ハブ・個別比較ページ用） */
.pricebreak{ margin-top:20px; border:2px solid var(--line); border-radius:16px; overflow:hidden; }
.pricebreak .row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; font-size:15px; border-bottom:1px solid var(--line); }
.pricebreak .row:last-child{ border-bottom:0; }
.pricebreak .row .nm{ font-weight:800; }
.pricebreak .row .pr{ font-weight:900; white-space:nowrap; }
.pricebreak .row.total{ background:var(--tint); font-size:16px; }
.pricebreak .row.synergy{ background:#fff; border-top:2px solid var(--brand); }
.pricebreak .row.synergy .pr{ color:var(--brand-deep); font-size:20px; }
.hugesum{ margin-top:18px; text-align:center; }
.hugesum .label{ font-size:14px; font-weight:800; color:#000; }
.hugesum .num{ margin-top:4px; font-size:40px; font-weight:900; letter-spacing:-.01em; }
.hugesum .num small{ font-size:16px; font-weight:800; margin-left:2px; }
.hugesum .arrow{ margin:10px auto; width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--brand-deep); }
.hugesum.synergy .num{ color:var(--go); }
.footnote{ margin-top:10px; font-size:12.5px; color:#666; line-height:1.7; } /* ui-ok: 比較・料金の注記。本文より控えめな階層として意図的に薄くしている */

.badge{ display:inline-flex; align-items:center; font-size:13px; font-weight:800; color:#000; background:var(--tint); border-radius:999px; padding:3px 12px; } /* ui-ok: 料金等を添えるバッジの補助メタ表記 */
.matrix{ margin-top:18px; display:grid; gap:10px; }
.matrix .col{ border:2px solid var(--line); border-radius:16px; padding:16px; }
.matrix .col.suited{ border-color:var(--brand); background:var(--tint); }
.matrix .col h4{ font-size:15.5px; font-weight:900; }
.matrix .col ul{ list-style:none; margin-top:8px; font-size:14.5px; }
.matrix .col li{ position:relative; padding-left:20px; line-height:1.7; }
.matrix .col li::before{ content:"・"; position:absolute; left:2px; }
.breadcrumb{ font-size:12.5px; color:#666; padding:14px 0 0; } /* ui-ok: パンくずの補助ナビゲーション表記。#666は白地で実測5.74:1（基準4.5:1を満たす） */
.breadcrumb a{ color:#666; text-decoration:none; } /* ui-ok: 同上 */
.breadcrumb a:hover{ text-decoration:underline; }
.hubcard{ display:block; min-width:0; text-decoration:none; color:#000; background:#fff; border:2px solid var(--line); border-left-width:5px; border-radius:18px; padding:16px 18px; }
.hubcard + .hubcard{ margin-top:12px; }
.hubcard h3{ display:flex; align-items:center; gap:8px; font-size:18px; font-weight:900; }
.hubcard .dot{ width:13px; height:13px; border-radius:50%; flex:0 0 auto; }
.hubcard p{ margin-top:6px; font-size:14.5px; color:#333; }
.hubgrid{ margin-top:22px; display:grid; gap:12px; }

/* サービス名一覧（比較ハブ最上部）：画面幅に応じて2列/3列/6列（1行）に整列（FEDAのメニュー同様、ブレークポイントごとにflex-basisを切り替え）。枠に各社イメージカラーをそのまま使う（コントラスト確保のための明度調整はしない）。 */
.svcpills{ position:relative; margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.svcpill{ display:flex; align-items:center; justify-content:center; flex:0 0 calc((100% - 10px) / 2); min-width:0; box-sizing:border-box; padding:9px 10px; border-radius:999px; border:3px solid; font-weight:800; font-size:15px; color:#000; background:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
@media (min-width:420px){ .svcpill{ flex-basis:calc((100% - 20px) / 3); } }
@media (min-width:640px){ .svcpill{ flex-basis:calc((100% - 50px) / 6); padding:8px 3px; font-size:14px; } }

@media (min-width:600px){ h1{ font-size:40px; } h1 .l2{ font-size:30px; }
	.matrix{ grid-template-columns:1fr 1fr; }
	.pricebreak .row{ font-size:16px; }
}