/* visual.css — ビジュアル強化の共通部品（VISUAL-SPEC §2・2026-10-21）
   使い方は tmp/review/COMPONENTS.md。紫青・ガラス・光沢は使わない。 */
:root {
  --vi-navy: #1A1A2E;
  --vi-apricot: #FFF5E8;
  --vi-orange: #FF9900;
  --vi-gold: #FFB700;
  --vi-coral: #FF6B6B;
  --vi-board: #FFE08A;
  --vi-road: #FFE7C2;
}

/* 1. A層アイコン ------------------------------------------------ */
.vi {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vi-apricot);
  color: var(--vi-navy);
  vertical-align: middle;
}
.vi svg { width: 22px; height: 22px; stroke-width: 2; display: block; }
.vi::after { /* 右上のオレンジの点 */
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vi-orange);
}
.vi--white { background: #fff; }
.vi--lg { width: 48px; height: 48px; }
.vi--lg svg { width: 24px; height: 24px; }
.vi--lg::after { top: 2px; right: 2px; }
.vi--sm {
  width: 20px;
  height: 20px;
  background: none;
  margin-right: 8px;
  vertical-align: -4px;
}
.vi--sm svg { width: 20px; height: 20px; }
.vi--sm::after { content: none; }

/* 2. 白い道 ------------------------------------------------------ */
/* overflow は親に付けない（.arc-top の円弧が切れるため）。はみ出しは .road 自身が切る */
.has-road { position: relative; isolation: isolate; }
.road {
  --road-color: var(--vi-road);
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.road svg { display: block; width: 100%; height: 100%; overflow: visible; }
.road path {
  fill: none;
  stroke: var(--road-color);
  stroke-width: 32px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.road--white { --road-color: #fff; }
.road--soft { opacity: .7; }
.road--down { left: 0; right: auto; width: 120px; }
.road--cta { top: auto; height: 60%; }

/* 3. 番号の石 ---------------------------------------------------- */
.stone {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vi-gold);
  color: var(--vi-navy);
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  font-feature-settings: "tnum";
}
.stone--sm { width: 40px; height: 40px; font-size: 18px; }

/* 4. 実物の枠 ---------------------------------------------------- */
.real-frame {
  --rf-shift: 12px;
  position: relative;
  isolation: isolate;
  display: block;
  margin: 0 var(--rf-shift) var(--rf-shift) 0;
  border-radius: 24px;
}
.real-frame::before { /* 右下にずらした板 */
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(var(--rf-shift), var(--rf-shift));
  border-radius: inherit;
  background: var(--vi-board);
  z-index: -1;
}
.real-frame > img,
.real-frame > video,
.real-frame > picture > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  object-fit: cover;
}
.real-frame--round {
  --rf-size: 160px;
  width: var(--rf-size);
  height: var(--rf-size);
  margin: 4px;
  padding: 4px; /* 輪の太さ */
  border-radius: 50%;
  background: linear-gradient(135deg, #FFB700, #FF9900 52%, #FF6B6B);
}
.real-frame--round::before { content: none; }
.real-frame--round > img,
.real-frame--round > picture > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

/* 5. 点の網 ------------------------------------------------------ */
.dots {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 160px;
  height: 160px;
  background-image: radial-gradient(circle, rgba(255, 183, 0, .3) 2.5px, transparent 3px);
  background-size: 16px 16px;
  pointer-events: none;
  z-index: 0;
}
.dots--bl { top: auto; right: auto; bottom: 24px; left: 24px; }

/* 6. チェックの印 ------------------------------------------------ */
.check-list { list-style: none; padding-left: 0; margin-left: 0; }
.check-list > li {
  position: relative;
  padding-left: 34px;
  list-style: none;
}
.check-list > li + li { margin-top: 10px; }
.check-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(.85em - 11px); /* 1行目の文字の中央 */
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vi-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  border: 0;
  transform: none;
}
.check-list > li::after { content: none; }

/* 7. 区画の上端の円弧 -------------------------------------------- */
.arc-top { --arc-color: #fff; --arc-depth: 40px; position: relative; }
.arc-top--apricot { --arc-color: var(--vi-apricot); }
.arc-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--arc-depth) * -1 + 1px);
  height: var(--arc-depth);
  background: var(--arc-color);
  clip-path: ellipse(75% 100% at 50% 100%);
  pointer-events: none;
  z-index: 1;
}

/* 8. 場面の絵 ---------------------------------------------------- */
.iso { display: block; max-width: 100%; height: auto; filter: none; }
.iso--96 { width: 96px; }
.iso--160 { width: 160px; }
.iso--320 { width: 320px; }

/* SP ------------------------------------------------------------- */
@media (max-width: 767px) {
  .vi--lg { width: 44px; height: 44px; }
  .road path { stroke-width: 20px; }
  .road--down { width: 80px; }
  .real-frame { --rf-shift: 8px; border-radius: 20px; }
  .real-frame--round { border-radius: 50%; }
  .dots { width: 112px; height: 112px; top: 16px; right: 16px; }
  .dots--bl { top: auto; right: auto; bottom: 16px; left: 16px; }
  .arc-top { --arc-depth: 24px; }
  .iso--320 { width: 200px; }
}

/* 動きは付けていないが、将来足すときのために止めておく */
@media (prefers-reduced-motion: reduce) {
  .vi, .road, .stone, .real-frame, .dots, .iso { transition: none !important; animation: none !important; }
}

/* 個人情報の同意文（shared/privacy 正本・枠内スクロール） */
.form-consent .mv-privacy { max-height: 240px; overflow-y: auto; border: 1px solid #cfd6de; border-radius: 6px; padding: 12px 14px; margin: 8px 0 4px; font-size: 12px; line-height: 1.8; background: #fff; text-align: left; -webkit-overflow-scrolling: touch; }
.form-consent .mv-privacy p { margin: 0 0 6px; }
.form-consent .mv-privacy__title { font-weight: 700; font-size: 13px; }
.form-consent .mv-privacy__h { font-weight: 700; margin-top: 8px; }
.form-consent .mv-privacy a { text-decoration: underline; }
@media (max-width: 640px) { .form-consent .mv-privacy { font-size: 12px; } }