:root{
  --navy:#1f2d4d; --navy-d:#172238; --orange:#ff6b1a; --orange-d:#e85d10;
  --cream:#fff7f0; --line:#e3ddd5; --ink:#2a2a2a; --muted:#6b6b6b;
  --ok:#3bbf6b; --field:#fff; --req:#ff6b1a; --soft:#fbf3ea;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Meiryo,sans-serif;
  color:var(--ink); background:var(--cream); line-height:1.7;
  font-size:16px; word-break:auto-phrase; text-wrap:pretty;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:680px; margin:0 auto; padding:0 18px;}

/* ===== ヘッダー ===== */
.hd{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
.hd .in{max-width:680px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px;}
.hd .brand{display:flex; align-items:center; gap:8px; font-weight:800; color:var(--navy); font-size:15px; letter-spacing:.02em;}
.hd .brand img.logo{height:30px; width:auto; display:block; flex:none;}
.hd .brand small{display:block; font-weight:600; color:var(--muted); font-size:10.5px; letter-spacing:0;}
/* 埋め込み時はヘッダーが隠れるため、フォーム上部にロゴを表示 */
.form-logo{display:none;}
.form-logo img{height:42px; width:auto;}
html.embed .form-logo{display:flex; align-items:center; justify-content:center; padding:16px 18px 2px;}
.hd .acts{display:flex; gap:8px;}
.hd .acts a{font-size:12px; font-weight:700; padding:7px 10px; border-radius:999px; text-decoration:none; white-space:nowrap;}
.hd .tel{background:#eef1f7; color:var(--navy);}
.hd .line{background:#06c755; color:#fff;}

/* ===== セクション共通 ===== */
.block{padding:30px 0 6px;}
.block > .wrap > h2.t{font-size:20px; color:var(--navy); font-weight:850; margin:0 0 4px; line-height:1.45;}
.block > .wrap > p.sub{font-size:13.5px; color:var(--muted); margin:0 0 16px;}
.eyebrow{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.08em; color:var(--orange-d); background:#fff; border:1px solid var(--orange); border-radius:999px; padding:3px 11px; margin:0 0 10px;}

/* ===== ヒーロー ===== */
.hero{background:linear-gradient(180deg,#fff 0,var(--cream) 100%); padding:26px 0 12px;}
.hero h1{font-size:25px; line-height:1.45; margin:0 0 10px; color:var(--navy); font-weight:850;}
.hero h1 b{color:var(--orange);}
.hero p.lede{font-size:14.5px; color:#444; margin:0 0 14px;}
.badges{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px;}
.badges span{font-size:12px; font-weight:700; color:var(--navy); background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 10px;}
.hero-cta{display:flex; flex-direction:column; gap:9px;}
.btn-primary{display:flex; align-items:center; justify-content:center; gap:8px; background:var(--orange); color:#fff; text-decoration:none; font-weight:850; font-size:17px; padding:16px; border-radius:13px; box-shadow:0 6px 16px rgba(255,107,26,.32); letter-spacing:.02em;}
.btn-primary:active{transform:translateY(1px);}
.hero-sub-cta{display:flex; gap:9px;}
.hero-sub-cta a{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; font-weight:750; font-size:14px; padding:12px; border-radius:12px; text-decoration:none;}
.hero-sub-cta .l{background:#06c755; color:#fff;}
.hero-sub-cta .t{background:#fff; color:var(--navy); border:1.5px solid var(--line);}
.leadnote{display:flex; align-items:center; gap:8px; background:#fff; border:1px dashed var(--orange); border-radius:12px; padding:10px 12px; margin:14px 0 0; font-size:13px; font-weight:700; color:var(--orange-d);}

/* ===== 共感（Pain） ===== */
.pain{background:var(--navy); color:#fff; margin-top:24px;}
.pain h2.t{color:#fff !important;}
.pain .lead{font-size:15px; font-weight:800; margin:0 0 14px; line-height:1.6;}
.pain .lead b{color:#ffd9a3;}
.voicebox{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:13px; padding:13px 15px; margin:0 0 10px; font-size:13.5px; line-height:1.7;}
.voicebox .who{display:block; font-size:11.5px; color:#ffd9a3; font-weight:700; margin-top:7px;}
.pain .turn{font-size:14.5px; font-weight:800; margin:16px 0 0; line-height:1.6;}
.pain .turn b{color:var(--orange); background:#fff; padding:1px 5px; border-radius:4px;}

/* ===== 3点訴求 ===== */
.reasons{display:flex; flex-direction:column; gap:12px; margin-top:4px;}
.reason{background:#fff; border:1px solid var(--line); border-radius:15px; padding:16px; display:flex; gap:13px; align-items:flex-start;}
.reason .ic{flex:none; width:46px; height:46px; border-radius:12px; background:var(--soft); display:flex; align-items:center; justify-content:center; font-size:24px;}
.reason h3{margin:0 0 4px; font-size:15.5px; color:var(--navy); font-weight:800;}
.reason p{margin:0; font-size:13px; color:#555;}

/* ===== 料金 ===== */
.price-table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:14.5px;}
.price-table th,.price-table td{padding:13px 14px; text-align:left; border-bottom:1px solid var(--line);}
.price-table th{background:var(--navy); color:#fff; font-weight:700; font-size:13.5px;}
.price-table tr:last-child td{border-bottom:none;}
.price-table td:last-child{text-align:right; font-weight:850; color:var(--orange-d); white-space:nowrap;}
.price-table tr:nth-child(even) td{background:#fffdfb;}
.price-add{background:var(--soft); border:1px solid var(--line); border-radius:13px; padding:13px 15px; margin:12px 0 0; font-size:13px; color:#555; line-height:1.85;}
.price-add b{color:var(--navy);}
.price-note{font-size:12px; color:var(--muted); margin:10px 2px 0;}

/* ===== フォーム導入見出し ===== */
.form-intro{background:linear-gradient(180deg,var(--cream) 0,#fff7ef 100%); padding-top:30px;}
.form-intro .badge-30{display:inline-flex; align-items:center; gap:6px; background:var(--orange); color:#fff; font-weight:850; font-size:13px; padding:7px 14px; border-radius:999px; margin:0 0 10px;}
.form-intro h2.t{font-size:21px;}

/* ===== フォーム ===== */
form{max-width:680px; margin:0 auto; padding:8px 18px 20px;}
.sec{background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 16px 6px; margin:16px 0;}
.sec > h2{font-size:16px; margin:2px 0 4px; color:var(--navy); display:flex; align-items:center; gap:8px;}
.sec > h2 .n{background:var(--navy); color:#fff; width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:13px; flex:none;}
.sec > .lead{font-size:13px; color:var(--muted); margin:0 0 8px;}

.f{margin:0 0 14px;}
.f > label{display:block; font-size:14.5px; font-weight:750; margin:0 0 6px; color:#222;}
.f .help{font-size:12px; color:var(--muted); font-weight:500; margin:2px 0 6px;}
.req{color:#fff; background:var(--req); font-size:10.5px; font-weight:800; border-radius:4px; padding:1px 6px; margin-left:6px; vertical-align:2px;}
.opt{color:var(--muted); background:#f0eee9; font-size:10.5px; font-weight:700; border-radius:4px; padding:1px 6px; margin-left:6px; vertical-align:2px;}

input[type=text], input[type=tel], input[type=email], select, textarea{
  width:100%; font-size:16px; /* 16px=iOSズーム防止 */ font-family:inherit; color:var(--ink);
  background:var(--field); border:1.5px solid var(--line); border-radius:11px; padding:13px 13px; appearance:none;
}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23999' stroke-width='2' fill='none' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,107,26,.13);}
textarea{min-height:84px; resize:vertical;}
.two{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.zip{display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center;}
.zip .pre{font-size:14px; color:var(--muted); white-space:nowrap;}

/* チップ選択（ラジオ/チェックを押しやすく） */
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chips label{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:650; background:#fff; border:1.5px solid var(--line); border-radius:11px; padding:10px 13px; cursor:pointer; user-select:none;}
.chips input{accent-color:var(--orange); width:17px; height:17px; margin:0;}
.chips label:has(input:checked){border-color:var(--orange); background:#fff3ec; color:var(--orange-d);}

.addr-block{border:1px solid var(--line); border-radius:13px; padding:13px; margin:0 0 12px; background:#fffdfb;}
.addr-block > .t{font-weight:800; font-size:14px; color:var(--navy); margin:0 0 10px; display:flex; align-items:center; gap:7px;}
.addr-block > .t .pin{font-size:16px;}

.reveal{display:none; border-left:3px solid var(--orange); padding-left:13px; margin:4px 0 14px;}
.reveal.on{display:block; animation:fade .25s ease;}
@keyframes fade{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}

/* 送信バー（固定） */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(255,247,240,.92); backdrop-filter:blur(8px); border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom));}
.bar .in{max-width:680px; margin:0 auto;}
.submit{width:100%; border:none; border-radius:13px; background:var(--orange); color:#fff; font-size:17px; font-weight:850; padding:16px; cursor:pointer; box-shadow:0 6px 16px rgba(255,107,26,.34); letter-spacing:.02em;}
.submit:active{transform:translateY(1px);}
.submit:disabled{background:#cdb4a4; box-shadow:none; cursor:wait;}
.bar small{display:block; text-align:center; font-size:11.5px; color:var(--muted); margin-top:6px;}
.bar small a{color:var(--muted);}

/* セクション4直下の送信ボタン（流れの中に設置） */
.inline-submit{margin:8px 0 12px;}
.inline-submit .submit{width:100%; border:none; border-radius:13px; background:var(--orange); color:#fff; font-size:17px; font-weight:850; padding:16px; cursor:pointer; box-shadow:0 5px 14px rgba(255,107,26,.30); letter-spacing:.02em;}
.inline-submit .submit:active{transform:translateY(1px);}
.inline-submit .submit:disabled{background:#cdb4a4; box-shadow:none; cursor:wait;}
.inline-submit small{display:block; text-align:center; font-size:11.5px; color:var(--muted); margin-top:8px;}
.inline-submit small a{color:var(--muted);}

.err{display:none; color:#d23; font-size:12.5px; font-weight:700; margin:4px 0 0;}
.f.invalid input,.f.invalid select{border-color:#e44; background:#fff5f5;}
.f.invalid .err{display:block;}

/* ===== 移設の流れ ===== */
.steps{display:flex; flex-direction:column; gap:10px;}
.step{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 15px; display:flex; gap:13px; align-items:flex-start;}
.step .no{flex:none; width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; font-weight:850; font-size:14px; display:flex; align-items:center; justify-content:center;}
.step h3{margin:0 0 3px; font-size:14.5px; color:var(--navy); font-weight:800;}
.step p{margin:0; font-size:12.5px; color:#666;}

/* ===== お客様の声 ===== */
.cases{display:flex; flex-direction:column; gap:12px;}
.case{background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px; position:relative;}
.case .q{font-size:13.5px; color:#444; line-height:1.75; margin:0 0 8px;}
.case .meta{font-size:12px; color:var(--orange-d); font-weight:700;}
.case::before{content:"“"; position:absolute; top:2px; right:14px; font-size:46px; color:var(--soft); font-weight:900; line-height:1;}

/* ===== 対応機種 ===== */
.models{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px;}
.models ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px;}
.models li{font-size:13px; font-weight:700; color:var(--navy); background:var(--soft); border-radius:8px; padding:7px 12px;}
.models p{margin:12px 0 0; font-size:12.5px; color:#666;}

/* ===== FAQ ===== */
.faq details{background:#fff; border:1px solid var(--line); border-radius:13px; margin:0 0 9px; overflow:hidden;}
.faq summary{list-style:none; cursor:pointer; padding:14px 44px 14px 16px; font-weight:750; font-size:14.5px; color:var(--navy); position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"＋"; position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--orange); font-weight:800;}
.faq details[open] summary::after{content:"−";}
.faq .a{padding:0 16px 15px; font-size:13.5px; color:#555; line-height:1.8;}

/* ===== 最終CTA ===== */
.finalcta{background:var(--navy); color:#fff; margin-top:26px; padding:32px 0 30px;}
.finalcta h2{color:#fff; font-size:20px; font-weight:850; margin:0 0 6px; text-align:center;}
.finalcta p{font-size:13.5px; color:#cdd6e6; margin:0 0 18px; text-align:center;}
.finalcta .acts{display:flex; flex-direction:column; gap:10px; max-width:360px; margin:0 auto;}
.finalcta .acts a{display:flex; align-items:center; justify-content:center; gap:8px; padding:15px; border-radius:13px; font-weight:850; font-size:16px; text-decoration:none;}
.finalcta .acts .form{background:var(--orange); color:#fff; box-shadow:0 6px 16px rgba(255,107,26,.34);}
.finalcta .acts .l{background:#06c755; color:#fff;}
.finalcta .acts .t{background:rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.25);}

/* サンクス */
.thanks{display:none; max-width:680px; margin:0 auto; padding:50px 22px 90px; text-align:center;}
.thanks.on{display:block;}
.thanks .ic{width:74px; height:74px; border-radius:50%; background:var(--ok); color:#fff; font-size:40px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
.thanks h2{color:var(--navy); font-size:21px; margin:0 0 10px;}
.thanks p{color:#444; font-size:14.5px; margin:0 0 22px;}
.thanks .next{display:flex; flex-direction:column; gap:10px; max-width:340px; margin:0 auto;}
.thanks .next a{display:flex; align-items:center; justify-content:center; gap:8px; padding:15px; border-radius:13px; font-weight:800; font-size:15.5px; text-decoration:none;}
.thanks .next .l{background:#06c755; color:#fff;}
.thanks .next .t{background:#eef1f7; color:var(--navy);}
.thanks .hint{font-size:12.5px; color:var(--muted); margin-top:14px;}
/* サンクス画面のLINE追加促し */
.thanks .line-cta{background:#eafaf0; border:1.5px solid #06c755; border-radius:16px; padding:18px 16px; max-width:360px; margin:6px auto 16px;}
.thanks .line-lead{font-size:16px; color:#1d7a44; font-weight:850; margin:0 0 6px;}
.thanks .line-lead b{color:#06a64a;}
.thanks .line-desc{font-size:13px; color:#3a6b4f; margin:0 0 14px; line-height:1.7;}
.thanks .line-add{display:flex; align-items:center; justify-content:center; gap:8px; background:#06c755; color:#fff; text-decoration:none; font-weight:850; font-size:17px; padding:16px; border-radius:13px; box-shadow:0 6px 16px rgba(6,199,85,.34);}
.thanks .line-add:active{transform:translateY(1px);}
.thanks .line-done-btn{display:block; width:100%; margin-top:12px; background:#fff; border:1.5px solid #06c755; color:#1d7a44; font-weight:800; font-size:14px; padding:13px; border-radius:12px; cursor:pointer;}
.thanks .line-done-btn:active{transform:translateY(1px);}
/* メール希望オプション + 電話(三次) */
.thanks .thanks-alt{max-width:360px; margin:18px auto 0;}
.thanks .email-pref-btn{width:100%; background:#fff; border:1.5px solid var(--line); color:var(--navy); font-weight:750; font-size:13.5px; padding:13px; border-radius:12px; cursor:pointer;}
.thanks .email-pref-btn:active{transform:translateY(1px);}
.thanks .email-pref-note{font-size:13px; color:#444; background:var(--soft); border:1px solid var(--line); border-radius:11px; padding:12px 13px; margin-top:10px; line-height:1.75; text-align:left;}
.thanks .email-pref-note b{color:var(--navy);}
.thanks .tel-mini{display:block; margin-top:16px; font-size:12.5px; color:var(--muted); text-decoration:none;}

.foot{max-width:680px; margin:0 auto; padding:20px 18px 130px; color:var(--muted); font-size:11.5px; line-height:1.8;}
.foot a{color:var(--muted);}

/* ===== 埋め込みモード（?embed=1）: LP装飾を隠し、フォームだけを表示。本社HPにiframeで埋め込む用 ===== */
html.embed body{background:transparent;}
html.embed .hd,
html.embed .hero,
html.embed .pain,
html.embed .block,
html.embed .finalcta,
html.embed .form-intro,
html.embed .bar{display:none !important;}
html.embed form{padding:14px 18px 24px;}
html.embed .thanks{padding-top:24px;}