/* FrameVision のサイト（framevision.airtune.jp・2026-10-19）
   色と書体は M:\Vault\判断基準\brand-assets\airtune\BRAND.md（濃紺が主役・金は一点）。
   「FrameVision」の文字だけは、ソフトの表紙と同じ Inter（太さ600・字間 -0.025em） */
:root {
  --navy: #071426;
  --navy2: #10243c;
  --gold: #d3ad62;
  --gold-hover: #b8882a;
  --ink: #172033;
  --muted: #627084;
  --paper: #f6f3ed;
  --white: #ffffff;
  --line: #d9d3c7;
  --radius: 4px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.8;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.serif { font-family: 'Noto Serif JP', 'Yu Mincho', serif; }

/* ─── 上の帯 ─── */
.site-header { background: var(--navy); color: var(--white); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; }
.brand .word { font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.025em; font-size: 22px; line-height: 1; }
.brand img { width: 26px; height: 26px; }
/* 文字のリンクを「お申し込み」のボタンの上下の真ん中にそろえる（2026-10-20 ひーさん「上に上がりすぎ」） */
.site-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.site-nav a { color: #dfe4ea; text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--gold); }
@media (max-width: 720px) { .site-nav .optional { display: none; } .site-nav { gap: 14px; } }

/* ─── 最初の大きな絵（料金表 PDF と同じ作り・2026-10-19） ─── */
.hero { position: relative; background: var(--navy); color: var(--white); overflow: hidden; min-height: 560px; padding: 0; }
.hero .photo { position: absolute; top: 0; right: 0; width: 63%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero .fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 37%, rgba(7,20,38,0.85) 51%, rgba(7,20,38,0) 78%); }
.hero .wrap { position: relative; padding-top: 64px; padding-bottom: 72px; }
.hero .kicker { color: var(--gold); letter-spacing: 0.18em; font-size: 15px; margin: 0; }
.hero-word { display: flex; align-items: center; gap: 0.22em; margin: 12px 0 0; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.025em; font-size: clamp(48px, 7vw, 76px); line-height: 1; }
.hero-word img { width: 0.82em; height: 0.82em; }
.hero-lead { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.5; margin: 22px 0 0; font-weight: 700; }
.hero .sub { color: #dfe4ea; margin: 16px 0 0; font-size: 17px; line-height: 1.85; max-width: 32em; }
.hero .caption { position: absolute; right: 12px; bottom: 10px; font-size: 13px; color: #e6e9ee; background: rgba(7,20,38,0.6); padding: 2px 8px; }
br.pc { display: inline; }
@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero .photo { position: relative; width: 100%; height: 240px; }
  .hero .fade { display: none; }
  .hero .wrap { padding-top: 32px; padding-bottom: 48px; }
  .hero .caption { top: 208px; bottom: auto; }
  br.pc { display: none; }
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { display: inline-block; padding: 13px 26px; border-radius: var(--radius); text-decoration: none; font-weight: 700; font-size: 15px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--gold-hover); color: var(--white); }
.btn-ghost { border: 1px solid #8b97a8; color: var(--white); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--gold); color: var(--gold); }
@media (max-width: 720px) {
  .hero .photo { position: relative; inset: auto; width: 100%; height: 240px; }
  .hero .fade { display: none; }
  .hero .wrap { padding-top: 36px; padding-bottom: 48px; }
  .hero .caption { top: 210px; bottom: auto; }
}

/* ─── 各区切り ─── */
section { padding: 72px 0; }
section.alt { background: var(--white); }
.section-title { font-size: clamp(24px, 3vw, 30px); margin: 0 0 8px; color: var(--navy); }
.section-lead { margin: 0 0 32px; color: var(--muted); }

/* できること：4つの流れ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
section.alt .step { background: var(--paper); }
.step img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.step .body { padding: 16px 18px 20px; }
.step .label { font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.25em; color: var(--gold-hover); font-size: 12px; }
.step h3 { margin: 4px 0 6px; font-size: 18px; color: var(--navy); }
.step p { margin: 0; font-size: 14.5px; }
.features { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; }
.features li { padding-left: 18px; position: relative; font-size: 15px; }
.features li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 8px; height: 8px; background: var(--gold); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .features { grid-template-columns: 1fr; } }

/* 料金 */
.plans { display: grid; grid-template-columns: 1fr 1.06fr 1fr; gap: 18px; align-items: stretch; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; position: relative; }
.plan.recommend { border: 2px solid var(--navy); box-shadow: 0 10px 28px rgba(7,20,38,0.12); }
.plan .badge { position: absolute; top: -13px; left: 22px; background: var(--gold); color: var(--navy); font-size: 12px; font-weight: 700; padding: 2px 10px; }
.plan .name { font-size: 20px; font-weight: 700; color: var(--navy); }
.plan .for { font-size: 13px; color: var(--muted); }
.plan .price { font-size: 40px; font-weight: 700; color: var(--navy); line-height: 1.1; margin-top: 14px; }
.plan .price small { font-size: 18px; }
.plan .tax { font-size: 13px; color: var(--muted); }
.plan .images { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.plan .images b { font-size: 26px; color: var(--navy); }
.plan .year { font-size: 13px; color: var(--muted); margin-top: 6px; }
.note { font-size: 13.5px; color: var(--muted); }
.addon { margin-top: 26px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; align-items: center; }
.addon .big { font-size: 26px; font-weight: 700; color: var(--navy); }
.addon ul { margin: 0; padding-left: 20px; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } .addon { grid-template-columns: 1fr; } }

/* 先行モニター */
.monitor { background: var(--navy2); color: var(--white); border-radius: var(--radius); padding: 30px 32px; display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; }
.monitor h2 { margin: 0; font-size: 24px; }
.monitor h2 span { display: block; font-size: 13px; font-weight: 400; color: #c9d1db; margin-top: 4px; }
.monitor ul { margin: 0; padding-left: 20px; }
@media (max-width: 720px) { .monitor { grid-template-columns: 1fr; } }

/* 使い始めるまで */
.flow { counter-reset: flow; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.flow li { counter-increment: flow; background: var(--paper); border-radius: var(--radius); padding: 22px 20px; position: relative; }
.flow li::before { content: counter(flow); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 28px; color: var(--gold-hover); display: block; line-height: 1; margin-bottom: 8px; }
.flow h3 { margin: 0 0 6px; font-size: 17px; color: var(--navy); }
.flow p { margin: 0; font-size: 14.5px; }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; } }

/* よくある質問 */
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.faq details p { margin: 10px 0 0; }

/* お問い合わせ */
.contact { text-align: center; }
.contact .mail { font-size: 22px; font-weight: 700; }

/* 下の帯 */
.site-footer { background: var(--navy); color: #c9d1db; font-size: 13.5px; padding: 34px 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.site-footer a { color: #dfe4ea; text-decoration: none; margin-right: 18px; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--gold); }

/* 法律の文書のページ */
.doc { background: var(--white); max-width: 860px; margin: 40px auto; padding: 40px 44px 56px; border-radius: var(--radius); border: 1px solid var(--line); }
.doc h1 { font-size: 28px; color: var(--navy); margin: 0 0 6px; }
.doc h2 { font-size: 19px; color: var(--navy); border-left: 4px solid var(--gold); padding-left: 10px; margin: 32px 0 10px; }
.doc h3 { font-size: 16px; color: var(--navy); margin: 22px 0 6px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0 14px; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.doc th { background: var(--paper); white-space: nowrap; }
.doc .version { color: var(--muted); font-size: 14px; }
.doc .intro { color: var(--muted); font-size: 14px; }
@media (max-width: 720px) { .doc { margin: 0; border: none; border-radius: 0; padding: 28px 20px 40px; } }

a:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ─── トップの組み立て（2026-10-19：誰向け → 料金 → 悩み → 理想 → 解決策 → 変化 → 制作例 → 質問 → 料金） ─── */
.eyebrow { font-size: 13px; letter-spacing: 0.16em; color: var(--gold-hover); font-weight: 700; margin: 0 0 6px; }
.nav-cta { background: var(--gold); color: var(--navy) !important; padding: 6px 14px; border-radius: var(--radius); font-weight: 700; }
.nav-cta:hover, .nav-cta:focus-visible { background: var(--gold-hover); color: var(--white) !important; }

.buy { background: var(--paper); }
.cta-box { margin-top: 28px; background: var(--navy2); color: var(--white); border-radius: var(--radius); padding: 26px 30px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: center; }
.cta-box .cta-title { font-size: 21px; font-weight: 700; }
.cta-box p { margin: 6px 0 0; color: #dfe4ea; font-size: 15px; }
/* 先行モニターの条件の一文は金色の太字（2026-10-19） */
.monitor-shine { font-weight: 700; color: var(--gold); }
/* 紺の囲み全体に、斜めの光の筋を6秒に1回、左から右へ走らせる（2026-10-19） */
.cta-box { position: relative; overflow: hidden; isolation: isolate; }
.cta-box::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.05) 44%, rgba(255, 240, 200, 0.26) 50%, rgba(255, 255, 255, 0.05) 56%, transparent 62%);
  transform: translateX(-100%);
  animation: cta-shine 6s ease-in-out infinite;
}
@keyframes cta-shine { 0% { transform: translateX(-100%); } 20% { transform: translateX(100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .cta-box::after { animation: none; display: none; } }
.cta-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cta-actions .note { color: #c9d1db; }
.btn-large { font-size: 17px; padding: 16px 30px; }
@media (max-width: 860px) { .cta-box { grid-template-columns: 1fr; } }
/* 先行モニターの囲みを見出しのすぐ下に置き、価格は通常価格を打ち消して半額をゴールドで（2026-10-19） */
.cta-box.cta-top { margin: 16px 0 26px; }
.plan .regular { font-size: 22px; font-weight: 700; color: var(--muted); margin-top: 14px; line-height: 1.3; }
.plan .regular s { font-size: 24px; }
.plan .regular s { text-decoration-thickness: 2px; }
.plan .price.monitor-price { color: var(--gold-hover); margin-top: 2px; }
.plan .monitor-label { font-size: 13px; font-weight: 700; color: var(--gold-hover); }
.addon-note { margin-bottom: 4px; }
.monitor-inline { color: var(--gold-hover); font-size: 17px; }
.addon-note s { font-size: 17px; font-weight: 700; }

.pains { list-style: none; margin: 18px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pains li { background: var(--paper); border-left: 4px solid var(--navy); padding: 16px 18px; border-radius: var(--radius); }
.pains b { display: block; color: var(--navy); font-size: 17px; }
.pains span { display: block; font-size: 14.5px; margin-top: 4px; }
@media (max-width: 860px) { .pains { grid-template-columns: 1fr; } }
/* 悩みから答えへつなぐ一文（このすぐ下が紺色の帯） */
.bridge { margin: 44px auto 0; max-width: 46em; text-align: center; }
.bridge-answer { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--navy); }
/* 「―FrameVision―」は金色で大きく。動きのあとも埋もれないよう、周りの文字の2倍ほど（2026-10-19）。スマホでも1行に収まる大きさ */
.bridge-here { display: inline-block; margin: 10px 0; color: var(--gold-hover); font-size: clamp(34px, 10.5vw, 64px); line-height: 1.2; white-space: nowrap; }
/* 「上記のようにお悩みの方への／最適解が、ここ／―FrameVision―／にあります。」の4行。2行目は途中で折り返さない */
.nowrap { white-space: nowrap; }
.bridge-answer::after { content: ""; display: block; width: 64px; height: 3px; background: var(--gold); margin: 16px auto 0; }

.ideal { background: var(--navy); color: var(--white); text-align: center; }
.ideal .section-title { color: var(--white); }
.ideal .eyebrow { color: var(--gold); }
.ideal-text { max-width: 40em; margin: 10px auto 0; color: #dfe4ea; font-size: 17px; }
/* 「その場で描いて…」から「間取り図から…」までを、1つの紺色の帯にする（2026-10-19） */
.ideal { padding-bottom: 36px; }
section.dark { background: var(--navy); color: var(--white); padding-top: 36px; }
section.dark .section-title { color: var(--white); margin-bottom: 24px; }
section.dark .eyebrow { color: var(--gold); }
section.dark .step { border-color: transparent; color: var(--ink); }

.afters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }
.after { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; }
.after .num { font-family: 'Inter', sans-serif; font-weight: 600; color: var(--gold-hover); font-size: 22px; line-height: 1; }
.after h3 { margin: 8px 0 6px; font-size: 18px; color: var(--navy); }
.after p { margin: 0; font-size: 15px; }
@media (max-width: 860px) { .afters { grid-template-columns: 1fr; } }

.works { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 18px 0 10px; }
.works figure { margin: 0; background: var(--paper); border-radius: var(--radius); overflow: hidden; }
.works img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.works figcaption { font-size: 13px; color: var(--muted); padding: 8px 12px; }
@media (max-width: 720px) { .works { grid-template-columns: 1fr; } }

.doc .back { margin-top: 36px; font-size: 14px; }

/* お申し込み・お問い合わせフォーム（2026-10-19） */
/* フォームは中央揃え（見出し・説明・枠を中央に。枠の中の入力欄は左揃えのまま。2026-10-19） */
.contact-form-section .wrap { text-align: center; }
.contact-form-section .section-lead { max-width: 46em; margin-left: auto; margin-right: auto; }
.form-not-ready { max-width: 760px; margin-left: auto !important; margin-right: auto !important; text-align: left; background: #fff7e6; border-left: 4px solid var(--gold); padding: 14px 18px; border-radius: var(--radius); margin: 0 0 18px; }
.contact-card { margin: 0 auto; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; max-width: 760px; }
.contact-card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-card fieldset[disabled] { opacity: 0.55; }
.contact-card .field { margin: 0 0 18px; }
.contact-card .field[hidden] { display: none; }
.contact-card label, .contact-card .label { display: block; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.contact-card em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--white); background: #b4432f; padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: 1px; }
.contact-card .opt { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.contact-card input[type="text"], .contact-card input[type="email"], .contact-card input[type="tel"], .contact-card textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid #b9b2a5; border-radius: var(--radius); background: var(--white); color: var(--ink);
}
.contact-card input:focus-visible, .contact-card textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold-hover); }
.contact-card .choices { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.contact-card .choices label, .contact-card label.agree { font-weight: 400; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.contact-card input[type="radio"], .contact-card input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--navy); }
.contact-card .hint { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.contact-card .err { color: #b4432f; font-size: 13.5px; margin: 6px 0 0; min-height: 0; }
.contact-card .err:empty { display: none; }
.contact-card .is-invalid input, .contact-card .is-invalid textarea { border-color: #b4432f; }
.contact-card .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-card .summary { margin: 0 0 12px; font-weight: 700; }
.form-result { padding: 6px 0; }
.form-result .result-title { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.btn-outline { border: 1px solid var(--navy); color: var(--navy); background: transparent; cursor: pointer; font: inherit; font-weight: 700; }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--navy); color: var(--white); }
button.btn { cursor: pointer; border: 0; font-family: inherit; }
button.btn:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 720px) { .contact-card { padding: 22px 18px; } }

/* ─── 最初の大きな絵の欄の動き（2026-10-19） ───
   1. 「FrameVision」とロゴ：大きな文字から、なめらかにズームアウトして所定の大きさに収まり、最後だけ少し弾む。
      F から1文字ずつ、ロゴまで約1.9秒
   2. 「間取りの打ち合わせで、／完成後の家を…」：左から1文字ずつ、ゆっくりめに飛んできて、行き過ぎて跳ね返り、止まる
      （各行の右端の文字から先に着く。左端から先だと、後の文字が止まった文字の上を通り抜けて重なるため。1行目が先）
   3. 説明の3行：3行同時に、それぞれ下からふわっと上がる
   4. 2つのボタン：真ん中の点から今の大きさまで大きくなる
   全部で約4.2秒で出そろう。動きを減らす設定の人には、動かさずに最初から全部見せる */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hero-word .letters { display: inline-flex; }
.hero-word .letters span, .hero-word .mark { display: inline-block; }
.hero-lead .lead-line { display: block; }
.hero-lead .lead-line span { display: inline-block; }
.hero .sub .line { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-word .letters span, .hero-word .mark {
    transform-origin: 50% 85%;
    animation: hero-zoom-in 0.5s linear both;
    animation-delay: calc(0.1s + var(--i) * 0.12s);
  }
  .hero-lead .lead-line span {
    animation: hero-fly-in 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) both;
    animation-delay: calc(1.95s + var(--i) * 0.04s);
  }
  .hero .sub .line { animation: hero-line-up 0.5s ease-out 3.4s both; }
  .hero .actions .btn { animation: hero-button-grow 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 3.75s both; }
}
/* 大きな文字から、なめらかにズームアウトして収まる。最後だけ少し弾む */
@keyframes hero-zoom-in {
  0% { opacity: 0; transform: scale(3); animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  10% { opacity: 1; }
  68% { transform: scale(0.9); animation-timing-function: ease-in-out; }
  84% { transform: scale(1.04); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes hero-fly-in {
  0% { opacity: 0; transform: translateX(-70vw); }
  12% { opacity: 1; }
  62% { transform: translateX(0.18em); }
  78% { transform: translateX(-0.07em); }
  90% { transform: translateX(0.02em); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes hero-line-up {
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes hero-button-grow {
  0% { opacity: 0; transform: scale(0); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* ─── 最初の大きな絵より下の欄の動き（2026-10-19・src/anim.js が付ける） ───
   画面に入ったときに .in が付いて動く。--d は同じ並びの中のずらし時間。
   anim.js が html に anim-on を付けたときだけ隠す（動きを減らす設定・古いブラウザでは何も隠れない） */
.anim-on .anim:not(.in) { opacity: 0; }
.anim.in { animation-duration: 0.85s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); animation-fill-mode: both; animation-delay: var(--d, 0s); }

/* 小見出し：横から広がって出る */
.anim-tracking.in { animation-name: anim-tracking; }
@keyframes anim-tracking { 0% { opacity: 0; letter-spacing: 0.6em; transform: translateX(-20px); } 100% { opacity: 1; transform: none; } }

/* 見出し：金色の帯が左から走って覆い、右へ抜けると文字が現れる */
.anim-on .section-title.anim { position: relative; width: fit-content; }
.anim-on .ideal .section-title.anim, .anim-on .contact-form-section .section-title.anim { margin-left: auto; margin-right: auto; }
.anim-wipe.in { animation-name: anim-wipe-text; animation-duration: 0.9s; animation-timing-function: steps(1, end); }
.anim-wipe.in::after {
  content: ""; position: absolute; inset: -2px -6px; background: var(--gold); pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
  animation: anim-wipe-bar 0.9s cubic-bezier(0.77, 0, 0.18, 1) both;
}
@keyframes anim-wipe-text { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
@keyframes anim-wipe-bar {
  0% { transform: scaleX(0); transform-origin: left center; }
  48% { transform: scaleX(1); transform-origin: left center; }
  52% { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

/* ふわっと下から */
.anim-fade-up.in { animation-name: anim-fade-up; }
@keyframes anim-fade-up { 0% { opacity: 0; transform: translateY(28px); } 100% { opacity: 1; transform: none; } }

/* 下から大きめに上がる */
.anim-rise.in { animation-name: anim-rise; animation-duration: 1s; }
@keyframes anim-rise { 0% { opacity: 0; transform: translateY(70px) scale(0.96); } 100% { opacity: 1; transform: none; } }
.anim-on .step.anim img { transform-origin: center; }
.step.anim.in img { animation: anim-photo-pull 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) both; }
@keyframes anim-photo-pull { 0% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* 先行モニターの紺の囲み：左から斜めに滑り込んで止まる */
.anim-swing.in { animation-name: anim-swing; animation-duration: 1s; animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1); }
@keyframes anim-swing { 0% { opacity: 0; transform: translateX(-90px) skewX(-10deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* プラン：扉を開くように回って出る。おすすめの札は落ちて弾む。打ち消し線を引く */
.anim-on .plans { perspective: 1200px; }
.anim-flip.in { animation-name: anim-flip; animation-duration: 0.9s; }
@keyframes anim-flip { 0% { opacity: 0; transform: rotateY(-75deg) translateZ(-60px); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.anim-on .plan.recommend.anim-flip.in { animation-name: anim-flip-pop; animation-duration: 1.1s; }
@keyframes anim-flip-pop { 0% { opacity: 0; transform: rotateY(-75deg) translateZ(-60px); } 45% { opacity: 1; transform: none; } 70% { transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
.anim-on .plan.anim .badge { opacity: 0; }
.plan.anim.in .badge { animation: anim-badge-drop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0s) + 0.6s) both; }
@keyframes anim-badge-drop { 0% { opacity: 0; transform: translateY(-40px) rotate(-8deg); } 100% { opacity: 1; transform: none; } }
.anim-on .plan.anim .regular s, .anim-on .addon-note.anim s { text-decoration: none; position: relative; display: inline-block; }
.anim-on .plan.anim .regular s::after, .anim-on .addon-note.anim s::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
}
.plan.anim.in .regular s::after { animation: anim-strike 0.45s ease-out calc(var(--d, 0s) + 0.55s) forwards; }
.addon-note.anim.in s::after { animation: anim-strike 0.45s ease-out 0.4s forwards; }
@keyframes anim-strike { to { transform: scaleX(1); } }

/* お悩み：左右から交互に、少し傾いて滑り込む */
.anim-side.in { animation-duration: 0.9s; }
.anim-side.from-left.in { animation-name: anim-side-left; }
.anim-side.from-right.in { animation-name: anim-side-right; }
@keyframes anim-side-left { 0% { opacity: 0; transform: translateX(-80px) rotate(-3deg); } 100% { opacity: 1; transform: none; } }
@keyframes anim-side-right { 0% { opacity: 0; transform: translateX(80px) rotate(3deg); } 100% { opacity: 1; transform: none; } }

/* 「ここ―FrameVision―」の一文（2026-10-19）
   1. 「上記のようにお悩みの方への／最適解が、ここ」（2行）が上からゆっくりふわっと降りる（0〜0.9秒）
   2. 「にあります。」が同じ速さで下からふわっと上がる（0.9〜1.8秒）
   3. 真ん中が空いたまま、「間に何が入るんだろう」と思わせる間（〜2.5秒）
   4. 「―FrameVision―」が画面の幅からはみ出すほど大きな文字で現れ、ガッと収まって何度か弾む（2.5〜4.0秒）
   5. 止まったら金色が一瞬光り、下の金色の線が伸びる
   大きな文字が横にはみ出しても横スクロールが出ないよう、この欄は横だけ切る（overflow-x: clip） */
.anim-bridge.in { animation-name: none; }
.anim-on .bridge-answer.anim .bridge-before, .anim-on .bridge-answer.anim .bridge-after { display: inline-block; }
.anim-on .bridge-answer.anim:not(.in) .bridge-before, .anim-on .bridge-answer.anim:not(.in) .bridge-after { opacity: 0; }
.bridge-answer.anim.in .bridge-before { animation: anim-fade-down-slow 0.9s ease-out 0s both; }
.bridge-answer.anim.in .bridge-after { animation: anim-fade-up-slow 0.9s ease-out 0.9s both; }
@keyframes anim-fade-down-slow { 0% { opacity: 0; transform: translateY(-34px); } 100% { opacity: 1; transform: none; } }
@keyframes anim-fade-up-slow { 0% { opacity: 0; transform: translateY(34px); } 100% { opacity: 1; transform: none; } }
.anim-on .bridge-answer.anim::after { transform: scaleX(0); }
.bridge-answer.anim.in::after { animation: anim-strike 0.5s ease-out 4.05s forwards; }
.anim-on section:has(.bridge) { overflow-x: clip; }
.anim-on .bridge-answer.anim .bridge-here { position: relative; z-index: 2; transform-origin: center center; }
.anim-on .bridge-answer.anim:not(.in) .bridge-here { opacity: 0; }
.bridge-answer.anim.in .bridge-here {
  animation: anim-slam 1.5s linear 2.5s both, anim-glow 1.4s ease-out 3.9s;
}
@keyframes anim-slam {
  0% { opacity: 0; transform: scale(4); }
  4% { opacity: 1; transform: scale(4); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  24% { transform: scale(1); animation-timing-function: ease-out; }
  34% { transform: scale(1.22); animation-timing-function: ease-in; }
  44% { transform: scale(0.88); animation-timing-function: ease-out; }
  54% { transform: scale(1.1); animation-timing-function: ease-in; }
  63% { transform: scale(0.95); animation-timing-function: ease-out; }
  72% { transform: scale(1.04); animation-timing-function: ease-in; }
  81% { transform: scale(0.99); animation-timing-function: ease-out; }
  90%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes anim-glow {
  0% { text-shadow: 0 0 0 rgba(211, 173, 98, 0); }
  35% { text-shadow: 0 0 18px rgba(211, 173, 98, 0.95), 0 0 36px rgba(211, 173, 98, 0.5); }
  100% { text-shadow: 0 0 0 rgba(211, 173, 98, 0); }
}

/* 使い始めてから：ポンと弾んで出て、番号がくるっと回る */
.anim-pop.in { animation-name: anim-pop; animation-duration: 0.8s; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes anim-pop { 0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: none; } }
.after.anim.in .num { display: inline-block; animation: anim-spin 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d, 0s) + 0.2s) both; }
@keyframes anim-spin { 0% { transform: rotate(-360deg) scale(0.4); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* 制作例：カーテンを開けるように現れ、写真が少し引いていく */
.anim-on .works figure.anim { overflow: hidden; }
.anim-curtain.in { animation-duration: 1.1s; animation-timing-function: cubic-bezier(0.77, 0, 0.18, 1); }
.anim-curtain.from-left.in { animation-name: anim-curtain-left; }
.anim-curtain.from-right.in { animation-name: anim-curtain-right; }
@keyframes anim-curtain-left { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes anim-curtain-right { 0% { opacity: 1; clip-path: inset(0 0 0 100%); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
.works figure.anim.in img { animation: anim-photo-pull 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) both; }

/* 最初の大きな絵の欄：FrameVision が出てくる間、欄全体を紺で覆い、文字が増えるにつれて右から透けていく
   （ロゴが出そろう約1.9秒で、今の見た目になる）。文字は紺の上に出す */
.hero .veil { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero .veil {
    display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 50%, rgba(7, 20, 38, 0) 58%, rgba(7, 20, 38, 0) 100%);
    background-size: 300% 100%; background-position: 31% 0;
    animation: hero-veil 1.85s linear 0.1s both;
  }
  .hero .wrap { z-index: 2; }
}
/* 透ける境目が、文字の打ち込みに合わせて右端→左端へ進む。F と同時（0.1秒）に右端から見え始める */
@keyframes hero-veil { 0% { background-position: 31% 0; } 15% { background-position: 39% 0; } 50% { background-position: 51% 0; } 85% { background-position: 62% 0; } 100% { background-position: 89% 0; } }

/* ソフトの表紙と同じオレンジの線（2026-10-20）。最初の動きが出そろってから（約4.2秒）、
   縦線が文字の少し左に上から下へぱっと出て、次に下の横線が左から右へ描かれる。
   横線は、紺が絵の上で薄くなって見えなくなる所（絵の左の端 37% から、約 53% まで）で、同じように透けて消える。
   .fade の数値そのまま（78% まで）では、線だけが右まで見えすぎた（2026-10-20 ひーさん）。
   文字より後ろに描く */
.hero .wrap { z-index: 2; }
.accent-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; --accent: #c98a3f; --accent-w: 6px; }
.accent-v {
  position: absolute; top: 0; bottom: 0; width: var(--accent-w); background: var(--accent);
  /* .wrap の文字の左の端（真ん中寄せの箱の左＋20px）より 16px 左の位置を基準に、
     そこから画面の左の端までの長さの 10% だけ左へ寄せる（2026-10-20 ひーさん）。狭い画面でも画面の端にはくっつけない */
  left: max(6px, calc(((100% - 1080px) / 2 + 4px - var(--accent-w) / 2) * 0.9));
}
.accent-h {
  position: absolute; left: 0; right: 0; bottom: 34px; height: var(--accent-w); background: var(--accent);
  -webkit-mask-image: linear-gradient(90deg, #000 37%, rgba(0,0,0,0.45) 45%, transparent 53%);
  mask-image: linear-gradient(90deg, #000 37%, rgba(0,0,0,0.45) 45%, transparent 53%);
}
@media (max-width: 860px) {
  /* 狭い画面では絵が上に乗り、紺の重ねも無いので、縦線は絵の下から・横線は透かさない */
  .accent-v { top: 240px; }
  .accent-h { bottom: 22px; -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .accent-v { animation: accent-drop 0.35s cubic-bezier(0.5, 0, 0.2, 1) 4.3s both; }
  .accent-h { animation: accent-draw 0.6s cubic-bezier(0.65, 0, 0.35, 1) 4.7s both; }
}
@keyframes accent-drop { 0% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes accent-draw { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }

/* 制作の流れ（実際の画面・2026-10-19）：紺の背景に、2D → 基礎・床組み → 柱と梁 → 完成した室内 を 2列×2段で */
.process { background: var(--navy); color: var(--white); }
.process .section-title { color: var(--white); }
.process .eyebrow { color: var(--gold); }
.process .section-lead { color: #c9d1db; }
.process-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; margin-top: 8px; }
.process-grid figure { margin: 0; }
.process-grid img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.process-grid figcaption { margin-top: 12px; font-size: 16px; font-weight: 700; color: var(--white); display: flex; align-items: baseline; gap: 10px; }
.process-grid .num { font-family: 'Inter', sans-serif; font-weight: 600; color: var(--gold); font-size: 20px; letter-spacing: 0.04em; }
@media (max-width: 760px) { .process-grid { grid-template-columns: 1fr; } }

/* 制作の流れの4枚：Zの書き順（左上→右上→左下→右下）に1枚ずつ、真ん中から大きくなって収まり、少し弾む（2026-10-19） */
.anim-grow.in { animation-name: anim-grow-bounce; animation-duration: 0.85s; animation-timing-function: ease-out; }
@keyframes anim-grow-bounce {
  0% { opacity: 0; transform: scale(0); }
  12% { opacity: 1; }
  62% { transform: scale(1.06); }
  80% { transform: scale(0.97); }
  92% { transform: scale(1.01); }
  100% { opacity: 1; transform: scale(1); }
}