/* 未遂のキミへ 特設サイト
 * 紙面と同じ考え方：情報は白い面に載せ、その外側でグリッチが走る。 */

:root {
  --ink: #000;
  --paper: #fff;
  --muted: #6b6b6b;
  --line: #d8d8d8;
  --col: 34rem;
  --pad: clamp(1.25rem, 4vw, 2.75rem);
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); line-height: 1.75;
  overflow-x: hidden;
}
img { max-width: 100%; display: block }
a { color: inherit }

#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none }
.noscript-bg { position: fixed; inset: 0; z-index: 0; background: var(--paper) }

.wrap { position: relative; z-index: 1 }

/* ── ヒーロー ───────────────────────────────── */
.hero { position: relative; height: 100svh; min-height: 30rem; overflow: hidden }
.hero__title { position: absolute; inset: 0; pointer-events: none }
.js .hero__title span { visibility: hidden }
/* ごくたまに1文字だけ、薄く滲んで横にずれる。派手にすると背景と喧嘩する */
.hero__title span.gl {
  transform: translateX(var(--gx, 0));
  text-shadow: calc(var(--gx, 0) * -1.6) 0 rgba(255, 0, 0, .5),
               calc(var(--gx, 0) *  1.6) 0 rgba(0, 200, 255, .5);
}
.hero__title span {
  position: absolute; display: block;
  font-family: var(--serif); font-weight: 200; line-height: .82;
  color: var(--ink);
}
/* 6文字すべてを画面内に収める。裁ち落としは紙面の作法で、画面では字が欠けて別の字に見える
   （未を上へ抜くと木になる）。Webでは全体を見せる。 */
.c1 { left: 4%;  top: 6%;  font-size: 34vmin }
.c2 { left: 55%; top: 2%;  font-size: 20vmin; font-weight: 400 }
.c3 { left: 34%; top: 40%; font-size: 13vmin }
.c4 { left: 10%; top: 46%; font-size: 26vmin }
.c5 { left: 62%; top: 30%; font-size: 22vmin }
.c6 { left: 66%; top: 58%; font-size: 32vmin; font-weight: 400 }

.card {
  display: inline-block; background: var(--paper);
  margin: 0 0 0 var(--pad); padding: 1.1rem 1.6rem 1.25rem;
  font-family: var(--serif); scroll-margin-top: 22vh;
}
.card .d { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 200; line-height: 1; letter-spacing: .01em; margin: 0 }
.card .d b { font-family: var(--sans); font-weight: 400; font-size: .4em; letter-spacing: .22em; margin-left: .5em; vertical-align: .28em }
.card .v { font-size: clamp(.95rem, 2.8vw, 1.15rem); margin: .5rem 0 0; letter-spacing: .06em }
.card .t { font-family: var(--sans); font-size: .8rem; color: var(--muted); letter-spacing: .06em; margin: .2rem 0 0 }

.cue {
  position: absolute; left: var(--pad); bottom: var(--pad);
  font-family: var(--sans); font-size: .68rem; letter-spacing: .3em;
  background: var(--paper); padding: .25rem .5rem;
}
.cue::after { content: ""; display: inline-block; width: 2.4rem; height: 1px; background: var(--ink); margin-left: .6rem; vertical-align: .3em; animation: cue 2.4s ease-in-out infinite }
@keyframes cue { 0%,100% { transform: scaleX(.3); transform-origin: left } 50% { transform: scaleX(1); transform-origin: left } }

/* ── 本文カラム ─────────────────────────────── */
.col {
  background: var(--paper);
  width: min(var(--col), calc(100% - var(--pad) * 2));
  margin: 0 0 0 var(--pad);
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
}
.col + .col { margin-top: clamp(4rem, 18vh, 11rem) }
.card + .col { margin-top: clamp(3.5rem, 14vh, 8rem) }
.sec { scroll-margin-top: 2rem }

.lead { font-family: var(--serif); font-size: clamp(.95rem, 2.6vw, 1.05rem); line-height: 1.85; margin: 0; text-wrap: pretty }
.lead .nb { white-space: nowrap }
.lead b { display: block; font-weight: 400 }

h2 {
  font-family: var(--sans); font-size: .7rem; font-weight: 500;
  letter-spacing: .34em; margin: 0 0 1.4rem; color: var(--muted);
}

/* ラインナップ：紙面のタイトルと同じで、並べずに散らす。
   焦点が順に移り、そのたび背景のモザイクが1枚の素材から組み直される。 */
.scatter { position: relative; height: clamp(30rem, 80vh, 46rem); margin: clamp(3rem, 12vh, 7rem) 0 0 }
.actname { position: absolute; margin: 0; font-size: clamp(1.35rem, 3.2vw, 2.3rem) }   /* 5組とも同じ級数。差は位置だけで付ける */
.actname button {
  all: unset; display: inline-block; cursor: pointer;
  background: var(--paper); color: var(--ink);
  padding: .18em .5em .26em;
  font-family: var(--serif); font-weight: 400; line-height: 1.15;
  transition: background .3s ease, color .3s ease;
}
.actname.on button { background: var(--ink); color: var(--paper) }
.actname button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }

.a1 { left: 5%;  top: 3%  }
.a2 { left: 44%; top: 23% }
.a3 { left: 13%; top: 43% }
.a4 { left: 48%; top: 62% }
.a5 { left: 7%;  top: 80% }

/* 情報表 */
.facts { margin: 0; display: grid; grid-template-columns: 5.5rem 1fr; gap: .55rem 1rem; font-size: .92rem }
.facts dt { font-family: var(--sans); font-size: .68rem; letter-spacing: .18em; color: var(--muted); padding-top: .25rem }
.facts dd { margin: 0; font-family: var(--serif) }
.facts .price { font-family: var(--sans); font-size: .88rem; line-height: 1.9 }

/* ── フォーム ───────────────────────────────── */
.form { margin: 0 }
.field { margin: 0 0 1.35rem }
.field label { display: block; font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; margin-bottom: .4rem }
.field .req { color: var(--ink); font-size: .62rem; margin-left: .5rem; letter-spacing: .1em }
.field .note { display: block; font-size: .68rem; color: var(--muted); letter-spacing: .02em; margin-top: .3rem }
.field input, .field select {
  width: 100%; font: inherit; font-size: 1rem; /* 16px未満だとiOSがズームする */
  padding: .75rem .8rem; border: 1px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink); appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px); background-size: 5px 5px; background-repeat: no-repeat }
.field[data-field="qty"] select { width: 10rem }   /* 6択に全幅は要らない */
.field input:focus, .field select:focus { outline: 2px solid var(--ink); outline-offset: 1px }
.field.err input { border-width: 2px }
.field .msg { display: block; font-family: var(--sans); font-size: .72rem; margin-top: .35rem; min-height: 1em }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

.submit {
  all: unset; display: block; width: 100%; text-align: center; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: .82rem; letter-spacing: .24em;
  padding: 1.15rem 1rem; margin-top: .5rem;
}
.submit:hover { opacity: .82 }
.submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.submit[disabled] { opacity: .45; cursor: default }

.formnote { font-family: var(--sans); font-size: .7rem; color: var(--muted); line-height: 1.9; margin: 1.2rem 0 0 }

.result { display: none; border: 1px solid var(--ink); padding: 1.4rem }
.result.on { display: block }
.result h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; margin: 0 0 .6rem }
.result p { margin: 0; font-size: .85rem; line-height: 1.9 }
.result.ng { border-style: dashed }

/* ── フッタ / 固定CTA ───────────────────────── */
main { padding-bottom: 7rem }   /* 固定CTAのぶん空ける */

.cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--ink); color: var(--paper); text-align: center;
  font-family: var(--sans); font-size: .78rem; letter-spacing: .2em;
  padding: 1rem; text-decoration: none;
  transform: translateY(100%); transition: transform .35s ease;
}
.cta.on { transform: translateY(0) }

@media (min-width: 900px) {
  .col, .card { margin-left: clamp(3rem, 9vw, 8rem) }
  main { padding-bottom: 4rem }

  /* PCでは全幅の帯ではなく右下に置く。紙面を塞がずに常に手が届く */
  .cta {
    left: auto; right: clamp(1.5rem, 3vw, 2.5rem);
    bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding: 1.05rem 2.2rem;
    font-size: .8rem;
    transform: translateY(calc(100% + 3rem));
  }
  .cta.on { transform: translateY(0) }
  .cta:hover { opacity: .85 }

  /* PCでは行間が空きすぎて間延びするので、フォームだけ締める */
  .field { margin-bottom: 1.05rem }
  .field label { margin-bottom: .3rem }
  .field input, .field select { padding: .6rem .75rem }
  .field .note { margin-top: .25rem }
  .field .msg { margin-top: .25rem }
  .submit { padding: .95rem 1rem; margin-top: .3rem }
  .formnote { margin-top: .9rem; line-height: 1.75 }
  .result { padding: 1.15rem }
}

@media (max-width: 640px) {
  .c1 { left: 4%;  top: 5%;  font-size: 44vw }
  .c2 { left: 56%; top: 2%;  font-size: 26vw }
  .c3 { left: 32%; top: 33%; font-size: 17vw }
  .c4 { left: 6%;  top: 40%; font-size: 34vw }
  .c5 { left: 58%; top: 26%; font-size: 28vw }
  .c6 { left: 52%; top: 58%; font-size: 42vw }
  .col, .card { margin-left: var(--pad) }
  .scatter { height: 34rem }
  .actname { font-size: 1.45rem }
  .a1 { left: 4%;  top: 2%  }
  .a2 { left: 15%; top: 22% }
  .a3 { left: 6%;  top: 40% }
  .a4 { left: 19%; top: 58% }
  .a5 { left: 4%;  top: 78% }
}

@media (prefers-reduced-motion: reduce) {
  .cue::after { animation: none }
  * { transition-duration: .01ms !important }
}