/* MieruWorks LP / 登録フォーム 共通スタイル (v2)
   正本: /Users/kitamura/ai-sanbou-brain/03_事業/MIERUWORKS_LINE日報/LP/lp_v2_template.html
   (Owner 承認 2026-09-29「めちゃくちゃいいね」)。明るい配色 (空色・白・太陽色)、
   イラスト画像 (自作、実在人物ではない AI イラスト) を使う構成に変更。
   register.html / register_success.html / register_cancel.html も同じ配色に統一する。 */

:root{
  color-scheme: light;
  --sky:#EAF6FF;
  --paper:#FFFFFF;
  --ink:#16304D;
  --ink-soft:#4A6078;
  --sun:#F5A524;
  --sun-deep:#D9860A;
  --palm:#1E9E7A;
  --coral:#E8604C;
  --line:#D6E6F2;
  --radius:18px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans JP","Noto Sans Thai","Hiragino Kaku Gothic ProN",sans-serif;font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
.wrap,.container{max-width:1040px;margin:0 auto;padding-inline:20px}
.narrow{max-width:720px;margin:0 auto}
h1,h2,h3{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:900;line-height:1.4;margin:0 0 16px;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(30px,6.4vw,52px)}
h2{font-size:clamp(24px,4.6vw,36px)}
h3{font-size:clamp(19px,3.2vw,23px)}
p{margin:0 0 16px}
.muted{color:var(--ink-soft)}
.lead{font-size:18px;color:var(--ink-soft)}
section{padding-block:72px}
.eyebrow{display:inline-block;font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--palm);background:#E3F6EF;border-radius:999px;padding:4px 14px;margin-bottom:16px}
.audience{display:inline-block;font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--palm);background:#E3F6EF;border-radius:999px;padding:4px 14px;margin-bottom:16px}

/* サイトヘッダー (Owner承認ロゴ icon_D_MW_sun_navy.png、2026-09-29) */
.brand{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:10}
.brand .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.brand a.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:18px}
.brand img{width:40px;height:40px;border-radius:10px}
.brand .mini{background:var(--sun);color:#2A1A00;font-weight:900;font-size:13px;border-radius:999px;padding:8px 14px;text-decoration:none;white-space:nowrap}
.foot-logo{width:56px;height:56px;border-radius:12px;margin:0 auto 8px}
/* 旧サイトヘッダー (register.html 等、.brand未適用ページ用に残す) */
.site-header{padding:16px 0 0}
.site-logo{height:36px;width:auto;border-radius:8px}

/* Hero: 悩みから */
.hero{background:linear-gradient(180deg,var(--sky) 0%,#FFFFFF 100%);padding-block:48px 56px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero-img{border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 50px rgba(22,48,77,.18)}
.hero .time{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;color:var(--coral);font-size:18px;margin-bottom:6px}
.hero .lead{font-size:18px;color:var(--ink-soft)}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-img{order:-1}}

.btn{display:inline-block;background:var(--sun);color:#2A1A00;font-weight:900;font-family:"Zen Kaku Gothic New",sans-serif;font-size:18px;padding:16px 36px;border-radius:999px;text-decoration:none;box-shadow:0 6px 0 var(--sun-deep);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--sun-deep)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn-sub{font-size:14px;color:var(--ink-soft);margin-top:14px}

/* 1コマ漫画 */
.comics{background:#FFF8EC}
.comic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.comic{background:var(--paper);border:3px solid var(--ink);border-radius:10px;overflow:hidden;box-shadow:6px 6px 0 var(--ink)}
.comic figcaption{padding:12px 16px;font-weight:700;font-size:15px;border-top:3px solid var(--ink)}
@media (max-width:820px){.comic-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* 導入前/導入後: 縦に並べる */
.story{display:grid;gap:28px}
.scene{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:center}
.scene img{border-radius:14px}
.scene .time{font-weight:900;font-family:"Zen Kaku Gothic New",sans-serif;font-size:15px;letter-spacing:.04em}
.before .scene .time{color:var(--coral)}
.after .scene .time{color:var(--palm)}
@media (max-width:720px){.scene{grid-template-columns:1fr}}
.label{display:inline-block;font-weight:900;font-family:"Zen Kaku Gothic New",sans-serif;border-radius:999px;padding:4px 16px;font-size:15px;margin-bottom:14px}
.before .label{background:#FDE7E3;color:var(--coral)}
.after{background:linear-gradient(180deg,#E9F8F2 0%,#FFFFFF 100%)}
.after .label{background:#D6F2E7;color:var(--palm)}

/* 常識の破壊 */
.breakdown{background:var(--ink);color:#fff;border-radius:24px;padding:48px 36px;text-align:center}
.breakdown h2{color:#fff}
.breakdown p{color:#D3E2F0;max-width:640px;margin-inline:auto}
.breakdown .big{color:var(--sun);font-weight:900;font-size:20px}

/* 3ステップ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.step{background:var(--sky);border-radius:var(--radius);padding:24px}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--sun);font-weight:900;color:#2A1A00;margin-bottom:12px;font-family:"Zen Kaku Gothic New",sans-serif}
.step h3{margin-bottom:8px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* 日報サンプル */
.mail{max-width:600px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(22,48,77,.12)}
.mail-h{background:#F3F8FC;padding:14px 20px;font-size:13px;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.mail-b{padding:20px;font-size:14px}
.lang{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:var(--palm);padding:2px 10px;border-radius:999px;margin:14px 0 8px}
.lang:first-child{margin-top:0}
.item{padding-left:12px;border-left:3px solid var(--line);margin-bottom:10px}
.item b{display:block}

/* 価格 */
.offer{background:var(--sky);border-radius:24px;padding:48px 32px;text-align:center}
.price{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(44px,9vw,68px);color:var(--sun-deep);line-height:1.1;margin:8px 0}
.price small{font-size:16px;color:var(--ink-soft);font-weight:500}
.trial-badge{display:inline-block;background:#D6F2E7;color:var(--palm);font-weight:700;border-radius:999px;padding:6px 18px;margin:0 0 16px}
.offer ul{text-align:left;max-width:540px;margin:24px auto;padding:0;list-style:none;display:grid;gap:10px}
.offer li{padding-left:28px;position:relative}
.offer li::before{content:"";position:absolute;left:4px;top:.7em;width:10px;height:10px;border-radius:50%;background:var(--palm)}

/* FAQ */
.faq{border-bottom:1px solid var(--line);padding-block:18px}
/* 解説動画 (DEC-333)。幅いっぱい・16:9 を保つ */
video.explainer{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#16304D;border-radius:16px}
.faq .q{font-weight:700;margin-bottom:6px}
.faq .a{color:var(--ink-soft)}
.tbd,.needs-confirmation{display:inline-block;background:#FFF1D6;color:var(--sun-deep);font-weight:700;font-size:12px;border-radius:999px;padding:2px 10px;margin-bottom:6px}

.final,.final-cta{text-align:center;background:linear-gradient(180deg,#FFFFFF 0%,var(--sky) 100%)}
footer{text-align:center;padding-block:32px 56px;color:var(--ink-soft);font-size:13px;background:var(--sky)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* 申込み〜翌朝までの画面見本 (LP v2、2026-09-29 正本更新に合わせて追加) */
.flow{display:grid;gap:56px;margin-top:40px}
.flow-step{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center}
.flow-step:nth-child(even) .mock{order:-1}
.flow-step .n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--sun);font-weight:900;color:#2A1A00;margin-bottom:10px;font-family:"Zen Kaku Gothic New",sans-serif}
.flow-step .who{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px;margin-left:8px;vertical-align:middle}
.who.you{background:#FFF1D6;color:var(--sun-deep)}
.who.auto{background:#E3F6EF;color:var(--palm)}
@media (max-width:820px){.flow-step{grid-template-columns:1fr}.flow-step:nth-child(even) .mock{order:0}}
.mock{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 44px rgba(22,48,77,.12);overflow:hidden}
.mock-bar{background:#F3F8FC;border-bottom:1px solid var(--line);padding:8px 14px;font-size:12px;color:var(--ink-soft);display:flex;gap:6px;align-items:center}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:#D6E6F2;display:inline-block}
.mock-body{padding:20px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.fld .in{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--ink);background:#FAFCFE}
.stepper{display:flex;align-items:center;gap:10px}
.stepper b{display:inline-flex;width:34px;height:34px;border-radius:8px;align-items:center;justify-content:center;background:var(--sky);font-size:18px}
.total{background:var(--sky);border-radius:10px;padding:12px 14px;font-size:14px;margin:6px 0 14px}
.total strong{color:var(--sun-deep);font-size:20px}
.fake-btn{display:block;text-align:center;background:var(--sun);color:#2A1A00;font-weight:900;border-radius:999px;padding:12px;font-family:"Zen Kaku Gothic New",sans-serif}
.pay-note{font-size:12px;color:var(--ink-soft);display:flex;gap:6px;align-items:center;margin-bottom:12px}
.pay-note::before{content:"";width:12px;height:14px;border:2px solid var(--palm);border-radius:3px 3px 4px 4px;display:inline-block}
.card-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qr-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.qr{width:120px;height:120px;border:1px solid var(--line);border-radius:8px}
.code{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:20px;letter-spacing:.06em;background:#FFF8EC;border:1px dashed var(--sun-deep);border-radius:8px;padding:6px 12px;display:inline-block}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px;background:#F3F8FC}
.phone{background:#fff;border:2px solid #C9D9E6;border-radius:22px;padding:12px 10px 16px;min-height:230px;display:flex;flex-direction:column;gap:8px}
.phone .top{font-size:11px;font-weight:700;text-align:center;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:6px}
.chip{font-size:11px;border-radius:12px;padding:6px 8px;line-height:1.5;max-width:92%}
.chip.me{background:#DDF3E6;align-self:flex-end}
.chip.bot{background:#F1F4F8;align-self:flex-start}
.chip.sys{background:none;color:var(--ink-soft);text-align:center;align-self:center;font-size:10px}
.addbtn{margin-top:auto;background:var(--palm);color:#fff;text-align:center;border-radius:10px;padding:8px;font-size:12px;font-weight:700}
.avatar{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--sun),var(--palm));margin:10px auto 4px}
.pc{background:#1F2F44;border-radius:14px;padding:10px 10px 0}
.pc-screen{background:#fff;border-radius:8px 8px 0 0;overflow:hidden}
.pc-stand{height:14px;background:#C9D9E6;width:40%;margin:0 auto;border-radius:0 0 8px 8px}
.inbox{display:grid;grid-template-columns:150px 1fr;min-height:320px}
.inbox-list{background:#F3F8FC;border-right:1px solid var(--line);font-size:11px}
.inbox-list div{padding:8px 10px;border-bottom:1px solid var(--line)}
.inbox-list .on{background:#FFF1D6;font-weight:700}
.inbox-body{padding:14px 16px;font-size:12.5px;line-height:1.7}
.inbox-body .subj{font-weight:900;font-size:14px;margin-bottom:2px}
.inbox-body .meta{color:var(--ink-soft);font-size:11px;margin-bottom:10px}
.grp{border-left:4px solid var(--line);padding:4px 10px;margin-bottom:10px}
.grp.sales{border-color:#4C8DE8}.grp.prod{border-color:var(--coral)}.grp.acct{border-color:var(--palm)}
.grp b{display:block;font-size:12px}
.decide{background:#FFF1D6;border-radius:8px;padding:8px 10px;margin-bottom:8px}
.th{color:var(--ink-soft);font-size:11px}
@media (max-width:560px){.inbox{grid-template-columns:1fr}.inbox-list{display:none}.phones{grid-template-columns:1fr}}

/* --- 登録フォーム (v2 配色に統一) --- */
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;max-width:480px;margin:0 auto;box-shadow:0 18px 50px rgba(22,48,77,.10)}
.form-field{margin-bottom:20px}
.form-field label{display:block;font-weight:700;margin-bottom:8px;color:var(--ink)}
.form-field input{width:100%;padding:14px 16px;border-radius:10px;border:1px solid var(--line);background:#F7FBFE;color:var(--ink);font-size:16px}
.form-field .hint{font-size:13px;color:var(--ink-soft);margin-top:6px}
.form-total{background:var(--sky);border-radius:10px;padding:16px;margin-bottom:20px;font-size:15px;color:var(--ink)}
.form-total .amount{color:var(--sun-deep);font-weight:800;font-size:20px}

/* --- 実際の画面の見本 (AIE-000492、LP の導入前→導入後に差し込む。vs- = view sample) ---
   スマホで読める大きさ (本文 15px 以上) を基準にする。 */
.vs{margin:4px auto 0;max-width:460px}
.vs-cap{font-size:13px;color:var(--ink-soft);text-align:center;margin:10px 0 0}
.vs-phone{background:#8CABD9;border:8px solid #1d2a3a;border-radius:34px;overflow:hidden;box-shadow:0 18px 44px rgba(22,48,77,.28)}
.vs-phone-head{background:#26354a;color:#fff;font-weight:700;font-size:16px;padding:12px 16px;display:flex;align-items:center;gap:10px}
.vs-badge{background:var(--coral);border-radius:999px;font-size:13px;padding:1px 10px}
.vs-msgs{padding:14px 12px 8px;display:grid;gap:12px}
.vs-msg{display:flex;gap:8px;align-items:flex-start}
.vs-av{width:34px;height:34px;border-radius:50%;flex:none;background:linear-gradient(135deg,#9fc3e6,#5b86b8)}
.vs-nm{font-size:12px;color:#eef3fa;margin-bottom:2px}
.vs-bub{background:#fff;border-radius:16px;padding:8px 12px;font-size:16px;line-height:1.5;color:#222;font-family:"Noto Sans Thai","Sukhumvit Set",sans-serif}
.vs-voice{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.vs-voice i{width:0;height:0;border-left:14px solid var(--palm);border-top:9px solid transparent;border-bottom:9px solid transparent}
.vs-voice b{height:5px;width:110px;border-radius:3px;background:linear-gradient(90deg,#9ab 0 30%,#d5dde6 30%)}
.vs-more{text-align:center;color:#fff;font-size:13px;padding:2px 0 12px;opacity:.9}
.vs-clock{background:linear-gradient(180deg,#FFE7B8,#EAF6FF);border-radius:20px;text-align:center;padding:22px 16px;border:1px solid var(--line)}
.vs-clock small{display:block;font-weight:800;color:var(--ink-soft);font-size:18px}
.vs-clock b{display:block;font-family:"Zen Kaku Gothic New",sans-serif;font-size:76px;line-height:1.05;color:var(--ink);letter-spacing:-.02em}
.vs-clock span{display:block;font-weight:700;font-size:16px;margin-top:6px}
.vs-mail{background:#fff;border:2px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(22,48,77,.16)}
.vs-mail-h{background:#F3F8FC;border-bottom:1px solid var(--line);padding:12px 16px}
.vs-from{font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.vs-from img{width:24px;height:24px;border-radius:6px}
.vs-subj{font-weight:900;font-size:16px;margin-top:4px;line-height:1.5}
.vs-mail-b{padding:14px 16px 16px;display:grid;gap:12px;font-size:15px;line-height:1.65}
.vs-decide{background:#FFF3DC;border:2px solid var(--sun);border-radius:12px;padding:10px 12px}
.vs-decide b{display:block;color:var(--sun-deep);margin-bottom:2px}
.vs-grp{border-left:5px solid var(--line);padding:2px 0 2px 12px}
.vs-grp b{display:block}
.vs-grp.p{border-color:#7FB3E6}.vs-grp.q{border-color:var(--palm)}
.vs-tag{display:inline-block;font-size:12px;font-weight:800;color:#fff;background:var(--palm);border-radius:999px;padding:1px 12px;margin-bottom:6px}
.vs-th{background:#F6FAFD;border-radius:10px;padding:10px 12px;color:var(--ink-soft);font-size:14px;font-family:"Noto Sans Thai","Sukhumvit Set",sans-serif;line-height:1.7}

/* 作った人の語り (/lp、2026-10-07)。柔らかい背景と白いカード */
.maker-card{background:#FBF8F2;border:1px solid #EFE6D6;border-radius:24px;padding:32px 28px}
.maker-card h2{font-size:clamp(22px,4.2vw,30px)}
.maker-card p{color:var(--ink)}
.maker-card .byline{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft);margin:8px 0 0}
.maker-card .byline img{border-radius:8px;display:inline-block}
.maker-card .byline b{color:var(--ink)}
.maker-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.maker-head .byline{margin:0;line-height:1.5}
.maker-face{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 14%;border:3px solid #fff;box-shadow:0 4px 14px rgba(22,48,77,.18);flex:none;background:#fff}
.maker-card .maker-head .byline{display:block;margin:0}