/* 案1：1ページ。1場面1メッセージ。スクロールで文が一行ずつふわっと現れる */
.progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; height: 2px; width: 100%; background: var(--rose-soft); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }
.lp .site-header { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; transition: background .5s, box-shadow .5s; }
.lp .site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }

/* 1回のスクロール・スワイプで1場面ずつ送る（送りは main.js の「場面送り」。CSS の吸い付きは端末差で行き過ぎるので使わない） */
html.snap { scroll-behavior: auto; overscroll-behavior: none; }
.scene { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: 96px 56px; overflow: hidden; }
.scene-bg.soft::after { background: color-mix(in srgb, var(--bg) 86%, transparent); }
.big.rose { color: var(--rose); }
.biz-one { max-width: 34em; margin-inline: auto; display: grid; justify-items: center; gap: 6px; }
.biz-one .ic { width: 64px; height: 64px; border-radius: 50%; background: var(--blush); display: grid; place-items: center; margin-bottom: 10px; }
.biz-one .ic svg { width: 30px; height: 30px; stroke: var(--ink); fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.biz-one h2 { margin: 0 0 .6em; font-size: clamp(22px, 2.6vw, 32px); font-weight: 400; letter-spacing: .18em; color: var(--rose); }
.scene .wrap { width: 100%; position: relative; z-index: 2; }
.scene.center { text-align: center; }
.scene-bg { position: absolute; inset: 0; z-index: 0; }
.scene-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 3.5s cubic-bezier(.2,.7,.2,1); }
.scene.is-on .scene-bg img { transform: scale(1); }
.scene-bg::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 78%, transparent); }

/* 1行ずつ */
.lines { display: block; }
.ln { display: block; }
.eyebrow { font-family: var(--f-en); font-size: 13px; letter-spacing: .3em; color: var(--rose); margin: 0 0 22px; }
.big { font-size: clamp(26px, 3.6vw, 44px); letter-spacing: .24em; line-height: 1.9; margin: 0 0 .9em; font-weight: 400; text-wrap: balance; }
.mid { font-size: clamp(17px, 1.7vw, 21px); letter-spacing: .16em; line-height: 2.3; margin: 0; }
.body-l { font-size: clamp(14px, 1.2vw, 16px); line-height: 2.4; letter-spacing: .12em; margin: 0; }

/* 1. ヒーロー */
.lp-hero { background: var(--paper); }
.lp-hero .hero-photo { width: 60%; }
.lp-hero .hero-photo img { transform: scale(1.06); transition: transform 6s cubic-bezier(.2,.7,.2,1); }
.lp-hero.is-on .hero-photo img { transform: scale(1); }
.lp-hero .hero-copy .emblem { width: 170px; height: 170px; }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 4; font-family: var(--f-en); font-size: 11px; letter-spacing: .3em; text-decoration: none; display: grid; justify-items: center; gap: 8px; color: var(--ink-soft); }
.scroll-cue::after { content: ""; width: 1px; height: 44px; background: linear-gradient(var(--rose-soft), transparent); animation: cue 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* 2. ブランドストーリー */
.scene-story .script { font-size: clamp(30px, 4vw, 54px); display: block; margin-bottom: 8px; }

/* 3. About */
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.lp-split .ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; max-width: min(400px, 52vh); width: 100%; justify-self: center; }
.lp-split .ph img { width: 100%; height: 100%; object-fit: cover; }
.lp-split .ph.wide { aspect-ratio: 16 / 9; max-width: 560px; }

/* 4. Business */
.biz2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 48px; text-align: left; }
.biz2 article { background: color-mix(in srgb, var(--paper) 90%, transparent); padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); }
.biz2 .ic { width: 56px; height: 56px; border-radius: 50%; background: var(--blush); display: grid; place-items: center; margin-bottom: 18px; }
.biz2 .ic svg { width: 28px; height: 28px; stroke: var(--ink); fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.biz2 h3 { margin: 0 0 .2em; font-size: 19px; font-weight: 500; color: var(--rose); letter-spacing: .12em; }
.biz2 .en { font-size: 13px; color: var(--ink-soft); display: block; margin-bottom: 1em; }
.biz2 p { margin: 0 0 .6em; font-size: 14px; line-height: 2.2; }

/* 5. Vision */
.scene-vision .circles { grid-template-columns: minmax(0, 190px) auto minmax(0, 190px); gap: 14px; margin-top: 44px; }
.scene-vision .circle b { font-size: 15px; }
.scene-vision .circle span { font-size: 11.5px; }
.scene-vision .script { font-size: clamp(24px, 2.6vw, 34px); display: block; margin-top: 36px; }

/* 6. Company */
.co-card { background: color-mix(in srgb, var(--paper) 92%, transparent); padding: clamp(24px, 4vw, 48px); max-width: 720px; margin-inline: auto; text-align: left; border: 1px solid var(--line); }
.co-card .otable { font-size: 14px; }
.co-card .otable th, .co-card .otable td { padding-block: 13px; }

/* 7. Contact */
.scene-contact .mailbox { margin: 32px auto 0; justify-content: center; }

/* 章の目次（パソコン幅） */
.dots { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 55; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dots a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; font-family: var(--f-en); font-size: 11px; letter-spacing: .14em; color: var(--ink-soft); }
.dots a span { opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; }
.dots a:hover span, .dots a.on span { opacity: 1; transform: none; }
.dots a::after { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--rose-soft); transition: background .3s, transform .3s; }
.dots a.on::after { background: var(--rose); border-color: var(--rose); transform: scale(1.25); }
.dots a.on { color: var(--rose); }

@media (max-width: 1100px) { .dots { display: none; } }
@media (max-width: 760px) {
  .lp-hero .hero-photo { width: 100%; }
  .lp-split { grid-template-columns: minmax(0, 1fr); }
  .lp-split { gap: 24px; }
  .lp-split .ph { max-width: min(200px, 28svh); order: -1; }
  .biz2 { grid-template-columns: minmax(0, 1fr); }
  .big { letter-spacing: .14em; }
  .mid { font-size: 15px; letter-spacing: .04em; line-height: 2.2; }
  .body-l { letter-spacing: .06em; }
  .scene-vision .circle b { font-size: 13px; }
  .scene-vision .circle span { font-size: 10px; }
  .scene { padding-block: 84px 40px; }
  .eyebrow { margin-bottom: 14px; }
  .co-card { padding: 16px 18px; }
  .co-card .otable { font-size: 12.5px; }
  .co-card .otable th { width: 6.2em; padding-right: .6em; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-bg img, .lp-hero .hero-photo img { transform: none !important; transition: none; }
  .scroll-cue::after { animation: none; }
  .progress { display: none; }
}

/* 背の低い画面では詰める（1場面を1画面に収める） */
@media (max-height: 760px) {
  .scene { padding-block: 80px 32px; }
  .co-card { padding: 18px 24px; }
  .co-card .otable th, .co-card .otable td { padding-block: 7px; }
  .scene-vision .circles { grid-template-columns: minmax(0, 160px) auto minmax(0, 160px); margin-top: 20px; }
  .scene-vision .script { margin-top: 20px; }
  .big { margin-bottom: .5em; }
}