/* 広告用 LP（/lp・/lp/thanks）。公式サイトの tokens.css / site.css は読まない（LP 単体の見た目）。
 *
 * 見本: STUDIO の LP（https://wakachoku.com/lp・2026-10-02）。色・大きさ・位置は見本の CSS の値をそのまま写した。
 *   PC（541px〜）: 画面に固定のオレンジの背景（点の模様）・左上の見出しとロゴ・左の青い枠。真ん中に幅 800 の白いカードが流れる。
 *   スマホ（〜540px）: 固定の部品は出さず、白いカードを全幅で。841px 未満（タブレット）は縦書きの帯の位置が変わる（見本と同じ）。
 * 書体: 見本の「ゴシックMB101 B」（モリサワ・STUDIO の契約）の代わりに Noto Sans JP 800。
 * 点の模様・写真の上下の曲線・About の横の点は、見本のテンプレートの素材を使わず、同じ形をここで描いた。
 * 動き（写真のゆっくりした拡大・曲線の寄り・帯の色）は「動きを減らす」設定でない端末だけ。
 * 白い文字をオレンジの上に置く所（左上の見出し・帯・フッターなど）は見本のまま（公式サイトの読みやすさの決まりとは別）。
 */
:root {
  --lp-orange: #f69c00;
  --lp-orange-bar: #fba100;
  --lp-orange-foot: #fa9b00;
  --lp-orange-badge: #f69c01;
  --lp-side: #0661cf;
  --lp-blue: #1f5cf1;
  --lp-blue-text: #1f5cf0;
  --lp-blue-border: #1f5cf2;
  --lp-yellow: #f0ff20;
  --lp-feature: #0c96d3;
  --lp-navy: #002739;
  --lp-sky: #30a2d8;
  --lp-gray: #eee;
  --lp-ink: #333;
  --lp-warm-white: #fffcfc;
  --lp-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --lp-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='2' height='2' fill='%23fff'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.lp { margin: 0; background: var(--lp-orange); color: var(--lp-ink); font-family: var(--lp-font); line-height: 1.4; }
/* 初期化は :where() で弱くする（部品の class の指定が必ず勝つように） */
:where(.lp) :where(p, h1, h2, h3, ul, figure) { margin: 0; padding: 0; }
:where(.lp) :where(h1, h2, h3) { font-size: inherit; font-weight: inherit; }
:where(.lp) ul { list-style: none; }
:where(.lp) img { display: block; max-width: 100%; }
:where(.lp) a { color: inherit; text-decoration: none; }

/* 点の模様（2px の白い点を 8px ごと・2px ぼかす）。オレンジの背景・青い面・フッターに重ねる */
.lp-fixbg::before, .lp-feature::before, .lp-foot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--lp-dots); background-size: 8px 8px; filter: blur(2px);
}

/* ---------- PC: 左上の見出しとロゴ（画面に固定） */
.lp-fixhead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5; height: 171px; padding: 40px 54px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  pointer-events: none; /* 下のカードを押せなくしない（見た目は見本と同じ） */
}
.lp-fixhead__title { font-size: 20px; font-weight: 800; line-height: 1.4; color: var(--lp-warm-white); }
.lp-fixhead__logo { width: 150px; height: 47px; object-fit: cover; flex: none; }

/* ---------- 真ん中の列 */
.lp-main { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; }

/* ---------- PC: 画面に固定の背景（点の模様）と左の青い枠 */
.lp-fixbg {
  position: fixed; top: 0; left: 0; z-index: 0; width: 100%; height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.lp-fixbg__inner {
  width: 100%; height: 100%; padding: 40px 39px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 40px;
}
.lp-side {
  width: 219px; max-width: 100%; height: 482px; padding: 10px 10px 34px; background: var(--lp-side);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px;
}
.lp-side li { width: 100%; font-size: 20px; font-weight: 600; line-height: 1.4; color: #fff; text-align: center; }

/* ---------- 白いカード */
.lp-card {
  position: relative; z-index: 5; width: 800px; max-width: 100%; margin-top: 192px;
  background: #fff; border: 1px solid #fff; border-radius: 16px 16px 0 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
}

/* ---------- 最初の画面（上の文・写真・縦書きの帯・ボタン） */
.lp-hero { position: relative; z-index: 0; width: 100%; margin-bottom: -20px; display: flex; flex-direction: column; align-items: center; }
.lp-top { position: relative; z-index: 1; width: 100%; padding: 16px; display: flex; justify-content: space-between; align-items: center; }
.lp-top__link { display: flex; align-items: center; justify-content: center; }
.lp-top__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.lp-top__catch { font-size: 14px; font-weight: 700; }
.lp-top__note { font-size: 11px; font-weight: 700; }
.lp-top__lead { font-size: 20px; font-weight: 900; }
.lp-top__logo { width: 200px; height: auto; flex: none; }

.lp-visual { position: relative; z-index: 0; width: 100%; height: 500px; }
.lp-visual__photo { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
.lp-visual__img { width: 100%; max-width: none; height: auto; padding: 0 80px; }
.lp-visual__img--b { position: absolute; opacity: 0; } /* 動きを減らす設定では a だけ（縮めない） */
.lp-curve { position: absolute; left: 0; right: 0; width: 100%; height: auto; scale: 1.1 1; }
.lp-curve--top { top: -32px; rotate: 180deg; }
.lp-curve--bottom { bottom: -2px; }

/* 縦書きの帯（位置は見本のまま。オレンジは英数字も縦に立てる） */
.lp-vl {
  position: absolute; z-index: 2; padding: 8px 4px; writing-mode: vertical-rl;
  font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: .15em;
}
.lp-vl--blue { background: var(--lp-blue); color: #fff; }
.lp-vl--orange { background: var(--lp-orange-bar); color: #000; text-orientation: upright; }
.lp-vl--b1 { top: 10px; right: 30px; }
.lp-vl--b2 { bottom: 156px; right: 71px; }
.lp-vl--market { top: 13px; left: 136px; }
.lp-vl--exit { top: 15px; left: 38px; height: 410px; }
.lp-vl--profit { top: 16px; left: 85px; height: 484px; }

/* 「簡単 30秒 ／ 5年分の詳細シミュレーション資料を受け取る」（写真の右下・フォームの送信ボタン） */
.lp-cta {
  display: flex; justify-content: space-between; align-items: center; height: 65px; padding: 4px;
  background: linear-gradient(106deg, var(--lp-blue) 24%, var(--lp-yellow) 19%);
  border: 3px solid var(--lp-blue-border); border-radius: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  font-family: inherit; color: var(--lp-ink); cursor: pointer;
}
.lp-cta:hover { opacity: .5; }
.lp-cta--hero { position: absolute; z-index: 4; right: 31px; bottom: 73px; width: 375px; max-width: 100%; }
.lp-cta__left { width: 70px; flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.lp-cta__l1, .lp-cta__l2 { padding: 0 4px; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: .15em; color: #fff; }
.lp-cta__l2 { font-weight: 900; }
.lp-cta__right { display: flex; justify-content: center; align-items: flex-end; }
.lp-cta__text { margin-right: 16px; padding: 0 4px; font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: .15em; color: #444; text-align: center; }
.lp-cta__icon { width: 21px; height: 21px; flex: none; fill: #222; }

/* 無料相談会のバナー */
.lp-banner { position: relative; z-index: 0; display: block; background: var(--lp-gray); }
.lp-banner img { width: 450px; height: auto; }

/* ---------- About */
.lp-about { width: 100%; padding: 36px 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; }
.lp-about__head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lp-about__en { font-family: "Open Sans", var(--lp-font); font-size: 14px; font-weight: 400; color: #adc1f0; text-align: center; }
.lp-about__row { display: flex; justify-content: center; align-items: center; gap: 16px; }
.lp-about__dots { width: 31px; height: 10px; flex: none; }
.lp-about__title { font-size: 24px; font-weight: 600; color: var(--lp-blue-text); text-align: center; }
.lp-about__chart { width: 100%; height: auto; }
.lp-about__news { width: 60%; height: auto; }

/* 斜めの帯の見出し */
.lp-bar { width: 100%; padding: 8px 16px; transform: skewX(-10deg); font-size: 35px; font-weight: 900; line-height: 1.6; color: #fff; text-align: center; }
.lp-bar--sub { background: var(--lp-orange-bar); color: var(--lp-ink); font-size: 16px; font-weight: 600; }
.lp-bar--big { background: var(--lp-orange-bar); }
.lp-bar--navy { background: var(--lp-navy); }
.lp-bar--sky { background: var(--lp-sky); }
.lp-bar--note { font-size: 12px; font-weight: 600; line-height: 1; }
.lp-bar--mt { margin-top: 20px; }
.lp-bar--r2note { font-size: 25px; }

/* ---------- 3つの理由（青い面） */
.lp-feature { position: relative; z-index: 0; width: 100%; padding: 36px 24px; background: var(--lp-feature); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.lp-blur { position: relative; z-index: 0; max-width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.lp-blur::before { content: ""; position: absolute; inset: 0; z-index: -1; background-position: 50%; background-size: cover; background-repeat: no-repeat; pointer-events: none; }
/* ぼかした画像は、ぼかしを焼き込んだ小さい版（元の画像はサーバーに置かない） */
.lp-blur--table { width: 701px; height: 174px; }
.lp-blur--table::before { background-image: url("../img/lp/table-blur.webp"); filter: blur(4px) brightness(92%) saturate(200%); }
.lp-blur--doc { width: 749px; height: 255px; }
.lp-blur--doc::before { background-image: url("../img/lp/doc-blur.webp"); filter: blur(4px); }
.lp-badge { padding: 3px 20px; background: var(--lp-orange-badge); color: #fff; font-size: 20px; font-weight: 900; }
.lp-feature__rows { width: 725px; height: auto; }
.lp-feature__chat { width: 100%; height: 343px; }
.lp-doc-label { display: block; width: 95px; height: 24px; flex: none; background: url("../img/lp/doc-label.webp") 50% / cover no-repeat; }
.lp-feature__loi { width: 360px; height: auto; }
.lp-feature__support { width: 735px; height: auto; }

/* ---------- 一度話を聞いてみる（日程の予約・資料請求のフォーム） */
.lp-contact { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; }
.lp-contact__title { padding-top: 50px; font-size: 32px; font-weight: 700; color: var(--lp-ink); }
.lp-monitor { width: 100%; min-height: 1347px; background: var(--lp-gray); overflow: hidden; }
.lp-monitor--pending { min-height: 0; padding: 20px 24px; font-size: 15px; font-weight: 700; text-align: center; }
/* TimeRex は端末の種類（UA）でスマホかを決め、スマホでないと幅 550px 以上で描く（中のページも同じ）。狭い画面の PC 表示では、切れずに横へ動かせるようにする */
.lp-monitor { overflow-x: auto; overflow-y: hidden; }

.lp-form { width: 100%; padding: 0 24px 56px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lp-form__title { width: 100%; max-width: 640px; padding: 8px 16px; transform: skewX(-10deg); background: var(--lp-blue); color: #fff; font-size: 24px; font-weight: 900; line-height: 1.6; text-align: center; }
.lp-form__lead { font-size: 15px; font-weight: 700; text-align: center; }
.lp-form__errors { width: 100%; max-width: 640px; padding: 12px 16px; border: 2px solid #c8102e; border-radius: 8px; background: #fff4f4; color: #a30d25; font-size: 14px; font-weight: 700; }
.lp-form__errors ul { margin-top: 4px; padding-left: 1.2em; list-style: disc; font-weight: 400; }
.lp-form__box { width: 100%; max-width: 640px; padding: 24px; border: 3px solid var(--lp-blue-border); border-radius: 12px; background: #fff; display: flex; flex-direction: column; gap: 16px; }
.lp-field label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 15px; font-weight: 700; }
.lp-tag { padding: 1px 7px; border-radius: 4px; background: var(--lp-blue); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.6; }
.lp-tag--opt { background: #e6e6e6; color: #555; }
.lp-input { width: 100%; padding: 11px 13px; border: 1px solid #b5b5b5; border-radius: 8px; background: #fff; color: var(--lp-ink); font: inherit; font-size: 16px; line-height: 1.5; }
textarea.lp-input { resize: vertical; min-height: 6.5em; }
.lp-input:focus { outline: 3px solid rgba(31, 92, 241, .35); outline-offset: 0; border-color: var(--lp-blue); }
.lp-input[aria-invalid="true"] { border-color: #c8102e; background: #fff4f4; }
.lp-agree { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; cursor: pointer; }
.lp-agree input { width: 20px; height: 20px; flex: none; accent-color: var(--lp-blue); }
.lp-agree a { color: var(--lp-blue-text); text-decoration: underline; }
.lp-agree input[aria-invalid="true"] { outline: 2px solid #c8102e; outline-offset: 2px; }
.lp-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lp-nb { white-space: nowrap; }
/* 送信ボタンは幅が変わるので、青い部分の幅を写真の右下のボタンと同じ px にそろえる */
.lp-cta--submit { width: 375px; max-width: 100%; margin: 8px auto 0; background: linear-gradient(106deg, var(--lp-blue) 91px, var(--lp-yellow) 91px); }
.lp-cta--submit[disabled] { opacity: .5; cursor: progress; }

/* ---------- 送ったあと */
.lp-thanks { width: 100%; padding: 40px 24px 64px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.lp-thanks__icon { width: 64px; height: 64px; fill: var(--lp-blue); }
.lp-thanks__title { max-width: 640px; }
.lp-thanks__body { font-size: 18px; font-weight: 700; line-height: 1.8; }
.lp-thanks__back { display: inline-block; padding: 10px 24px; border: 2px solid var(--lp-blue); border-radius: 999px; color: var(--lp-blue-text); font-weight: 700; }

/* ---------- フッター */
.lp-foot { position: relative; z-index: 0; width: 100%; padding: 36px 24px; background: var(--lp-orange-foot); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.lp-foot__sub { font-size: 12px; font-weight: 800; color: var(--lp-warm-white); }
.lp-foot__main { padding-bottom: 1.4em; font-size: 16px; font-weight: 800; color: var(--lp-warm-white); }
.lp-foot__copy { font-size: 10px; color: #fff; text-align: center; }
.lp-foot__link { color: #fff; text-decoration: underline; }  /* Meta ピクセルを置くページの通知（ビジネスツール利用規約 3c・2026-10-03 checker） */

/* ---------- タブレット（〜840px）: 見本と同じく帯の位置と大きさが変わる */
@media screen and (max-width: 840px) {
  .lp-fixhead { padding: 40px 18px; }
  .lp-fixbg__inner { padding: 40px 10px; }
  .lp-vl--orange { font-size: 16px; }
  .lp-vl--market { top: 0; left: 192px; }
  .lp-vl--exit { top: 0; left: 149px; height: 292px; }
  .lp-vl--profit { top: 0; left: 105px; height: 357px; }
}

/* ---------- スマホ（〜540px） */
@media screen and (max-width: 540px) {
  .lp-monitor { min-height: 0; }  /* 見本の高さ 1347px の箱のままだと、カレンダーの下に灰色の空きが出る（司令「SP 版のサイズがおかしい」） */
  .lp-fixhead, .lp-fixbg { display: none; }
  .lp-card { width: 100%; min-height: 100vh; margin-top: 0; border-radius: 0; }
  .lp-foot { margin-top: auto; } /* 短いページ（完了画面）でもフッターを下に */
  .lp-top { position: sticky; top: 0; gap: 16px; }
  .lp-top__link { width: calc(80% - 3.2px); max-width: calc(80% - 3.2px); justify-content: flex-start; }
  .lp-top__text { width: 100%; align-items: center; justify-content: flex-start; }
  .lp-top__lead { font-size: 14px; }
  .lp-top__logo { width: calc(20% - 12.8px); max-width: calc(20% - 12.8px); }
  .lp-vl--b1 { right: 20px; }
  .lp-vl--b2 { right: 58px; }
  .lp-vl--market { top: 11px; left: 126px; }
  .lp-vl--exit { top: 12px; left: 41px; }
  .lp-vl--profit { top: 12px; left: 84px; }
  .lp-cta--hero { right: 8px; bottom: 51px; width: 351.09px; z-index: 1; }
  .lp-cta__right { width: 254px; }
  .lp-cta__text { font-size: 12px; letter-spacing: .01em; }
  .lp-bar--sub { color: #fff; font-size: 14px; }
  .lp-bar--big { font-size: 20px; }
  .lp-bar--navy, .lp-bar--sky, .lp-bar--r2note { font-size: 18px; }
  .lp-bar--note { font-size: 18px; }
  .lp-bar--r3 { padding: 8px 0; }
  .lp-feature__chat { height: auto; }
  .lp-blur--doc { height: 150px; }
  .lp-feature__loi { width: 230px; }
  .lp-form { padding: 0 16px 48px; }
  .lp-form__title { font-size: 18px; }
  .lp-form__box { padding: 18px 16px; }
  .lp-cta--submit { background: linear-gradient(106deg, var(--lp-blue) 85px, var(--lp-yellow) 85px); }
  .lp-cta--submit .lp-cta__right { width: auto; flex: 1; }
}

/* ---------- 登場の動き（見本と同じもの。動きを減らす設定の端末では動かさない＝最初から最後の形） */
@media (prefers-reduced-motion: no-preference) {
  /* 写真: 12 秒で1回り。b が上で 4〜6 秒に消え（a に切り替わる）、10〜12 秒に出る（b に切り替わる）。どちらも 1.07 から 8 秒で 1 まで縮む */
  .lp-visual__photo { animation: lp-fade 2s ease both; }
  .lp-visual__img--a { animation: lp-kb-a 12s linear -10s infinite; }
  .lp-visual__img--b { animation: lp-kb-b 12s linear -10s infinite; }
  .lp-curve--top { animation: lp-curve-top 2s ease both; }
  .lp-curve--bottom { animation: lp-curve-bottom 2s ease both; }
  .lp-vl { animation: lp-vl-color 2s ease both; }
}
@keyframes lp-kb-a { 0%, 33.333% { scale: 1.07; } 100% { scale: 1; } }
@keyframes lp-kb-b {
  0% { scale: 1.0525; opacity: 1; }
  33.333% { opacity: 1; }
  50% { scale: 1; opacity: 0; }
  50.001%, 83.333% { scale: 1.07; opacity: 0; }
  100% { scale: 1.0525; opacity: 1; }
}
@keyframes lp-fade { from { opacity: 0; } }
@keyframes lp-curve-top { from { scale: 10 10; translate: 0 -100px; } }
@keyframes lp-curve-bottom { from { scale: 10 10; translate: 0 100px; } }
@keyframes lp-vl-color { from { color: #7dcbec; } }