/* トップの asopiko 皮（2026-11-10）。設計稿 HomeA / HomeAM。
   首屏（.home-lobby）は一枚の大きな箱、首屏より下（.home-block）は札つきの箱。
   並びの土台は home-lobby.css / home-demo.css / home-content.css、ここは見た目の上書きだけ。色は --ap-*。 */

/* 地。旧トップの渐变と紙の粒を消す */
body[data-home-phase] { background: var(--ap-page); color: var(--ap-ink); font-family: var(--ap-font); }
body[data-home-phase]::before { display: none; }

/* ── 首屏：箱なし。高さは中身で決め、画面の高さに引き伸ばさない（余白で埋めない）。
   横幅はヘッダー・下の箱と同じ 1040 の列に揃える ── */
.home-lobby {
  max-width: 1040px;
  min-height: 0;
  margin: 0 auto;
  padding: 36px 0 0;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
[data-home-phase="menu"] .section--first { padding: 0 40px; }
.home-lobby__content { display: flex; flex-direction: column; gap: 14px; }
.home-lobby__eyebrow {
  align-self: flex-start;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--ap-soft);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--ap-accent);
}
.home-lobby__eyebrow::before { display: none; }
.home-lobby__title { margin: 0; font-family: var(--ap-font); font-weight: 900; font-size: 46px; line-height: 1.25; color: var(--ap-ink); letter-spacing: .02em; }
.home-lobby__title br { display: none; }
.home-lobby__title em { color: var(--ap-brand-red); }
.home-lobby__lead { margin: 0; font-size: 15px; color: var(--ap-sub); }
.home-setup {
  margin: 0;
  padding: 16px;
  background: var(--ap-surface);
  border: 2px solid var(--ap-ink);
  border-radius: 14px;
  box-shadow: none;
  backdrop-filter: none;
}
.home-setup__label { font-size: 12px; font-weight: 900; color: var(--ap-muted); letter-spacing: 0; margin-bottom: 6px; }
.home-setup__label i { border: 0; padding: 0; margin-left: 4px; font-size: 12px; }
.home-setup__options {
  gap: 0;
  padding: 3px;
  border: 2px solid var(--ap-ink);
  border-radius: 999px;
  background: var(--ap-soft);
}
.home-setup__options button {
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--ap-font);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ap-ink);
}
.home-setup__options [aria-checked="true"] { background: var(--ap-ink); color: var(--ap-surface); font-weight: 900; }
.home-setup__note { color: var(--ap-muted); }
.home-lobby__actions { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.home-start { border-radius: 999px; }
.home-start--ai {
  height: 58px;
  padding: 0 24px;
  justify-content: center;
  gap: 8px;
  border: 2px solid var(--ap-ink);
  background: var(--ap-cta);
  box-shadow: 0 4px 0 var(--ap-ink);
  color: var(--ap-on-fill);
  font-family: var(--ap-font);
  font-size: 17px;
  font-weight: 900;
}
.home-start--ai:hover { transform: none; box-shadow: 0 4px 0 var(--ap-ink); filter: brightness(.96); }
.home-start--ai:active { transform: translateY(2px); box-shadow: none; }
.home-start--two {
  height: 58px;
  padding: 0 20px;
  border: 2px solid var(--ap-ink);
  background: var(--ap-surface);
  box-shadow: 0 2px 0 var(--ap-ink);
  font-family: var(--ap-font);
  font-size: 14px;
  font-weight: 900;
  color: var(--ap-ink);
}
.home-start--two span { font-size: 11px; font-weight: 500; color: var(--ap-muted); }
.home-lobby__fine { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--ap-sub); }
.home-lobby__resume { position: static; padding: 0; }
.home-lobby__resume button { padding: 6px 14px; border: 2px solid var(--ap-ink); border-radius: 999px; background: var(--ap-surface); box-shadow: 0 2px 0 var(--ap-ink); font-family: var(--ap-font); font-weight: 900; font-size: 12.5px; color: var(--ap-ink); }

/* 盤は画面の高さに合わせて大きく（上限 560）*/
.home-demo { width: min(520px, 42vw); min-width: 340px; max-width: none; }
.home-demo__ring, .home-demo__stone { display: none; }
.home-demo canvas { transform: none; border-radius: 6px; box-shadow: 0 14px 30px var(--wood-raise), 0 3px 0 var(--wood-lip); }
.home-demo__seal {
  left: -26px; top: -26px; /* 角の座標「A」「1」に掛からない位置 */
  width: auto; height: auto;
  padding: 6px 8px;
  border: 2px solid var(--ap-ink);
  border-radius: 10px;
  background: var(--ap-brand-red);
  box-shadow: 0 2px 0 var(--ap-ink);
  font-family: var(--ap-font);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
}

/* ── 首屏より下：札つきの箱 ── */
.home-content { background: var(--ap-page); color: var(--ap-sub); font-family: var(--ap-font); font-size: 15px; line-height: 1.95; }
.home-content__inner { max-width: 1120px; padding: 0 40px; display: grid; gap: 30px; margin: 48px auto; box-sizing: border-box; }
.home-block {
  position: relative;
  padding: 30px 26px 22px;
  background: var(--ap-surface);
  border: 2px solid var(--ap-ink);
  border-radius: 18px;
  box-shadow: var(--ap-card-shadow);
}
.home-block--intro, .home-block--faq { padding: 30px 26px 22px; }
.home-content .home-block h2 {
  position: absolute;
  top: -14px;
  left: 18px;
  margin: 0;
  padding: 3px 16px;
  border: 2px solid var(--ap-ink);
  border-radius: 999px;
  background: var(--ap-tag-yellow);
  font-family: var(--ap-font);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--ap-ink);
}
.home-content .home-block h2 br { display: none; }
.home-steps-block h2 { background: var(--ap-tag-green) !important; }
.home-kinji h2 { background: var(--ap-tag-coral) !important; }
.home-choose h2 { background: var(--ap-tag-sky) !important; }
.home-tips-block h2 { background: var(--ap-tag-green) !important; }
.home-faq-block h2 { background: var(--ap-tag-coral) !important; }
.home-content p { max-width: 780px; color: var(--ap-sub); }
.home-content h3 { font-family: var(--ap-font); font-weight: 900; color: var(--ap-ink); }

/* 開局の節：本文＋三つの札 */
.home-block--intro { display: block; }
.home-intro__copy p { margin: 0 0 10px; }
.home-intro__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; border: 0; }
.home-intro__facts div { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 2px solid var(--ap-ink); border-radius: 999px; background: var(--ap-soft); }
.home-intro__facts div:first-child { background: var(--ap-ok-bg); }
.home-intro__facts div:last-child { background: var(--ap-ng-bg); }
.home-intro__facts dt, .home-intro__facts dd { width: auto; margin: 0; font-family: var(--ap-font); font-size: 12.5px; font-weight: 900; line-height: 1.5; color: var(--ap-ink); }
.home-intro__facts dt.home-intro__mark { color: var(--ap-ng-ink); }

/* 打ち方：三枚のカード */
.home-steps { gap: 14px; }
.home-steps li {
  padding: 12px;
  border: 2px solid var(--ap-ink);
  border-radius: 16px;
  background: var(--ap-surface);
  box-shadow: var(--ap-solid-shadow);
  gap: 10px;
}
.home-steps__no { align-self: flex-start; padding: 1px 9px; border-radius: 999px; background: var(--ap-soft); font-family: var(--ap-font); font-size: 11px; font-weight: 900; color: var(--ap-ink); }
.home-steps h3 { margin: 0; font-size: 15px; }
.home-steps p { font-size: 13px; line-height: 1.7; }

/* 禁じ手：図のセル＋✗ 徽章 */
.home-kinji__head { margin-bottom: 14px; }
.home-kinji__grid { gap: 14px; }
.home-kinji figure { position: relative; padding: 38px 12px 12px; background: var(--ap-page); border: 1px solid var(--ap-line); border-radius: 10px; align-items: center; text-align: center; }
.home-kinji figcaption { font-size: 12px; color: var(--ap-sub); }
.home-kinji figcaption strong { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ap-ng-bg); color: var(--ap-ng-ink); font-family: var(--ap-font); font-size: 11px; font-weight: 900; line-height: 1.5; }
.home-kinji figcaption strong::before { content: '✗ '; }
.home-kinji__note { font-size: 12px; color: var(--ap-muted); }

/* 表 */
.home-choose__head th { border-bottom: 2px solid var(--ap-ink); }
.home-choose__table th, .home-choose__table td { color: var(--ap-sub); }
.home-choose__group { font-size: 12px; color: var(--ap-muted); }
.home-choose__opt { color: var(--ap-ink); }
.home-choose__opt::before { content: ''; }
.home-choose__row--top > *, .home-choose__row--group > *, .home-choose__row--in > * { border-top: 2px dashed var(--ap-line); }

/* 機能：淡い面の小カード */
.home-features__grid { gap: 12px; }
.home-features__item { padding: 12px 14px; background: var(--ap-page); border: 1px solid var(--ap-line); border-radius: 10px; }
.home-features h3 { margin: 0 0 3px; font-size: 14.5px; }
.home-features p { font-size: 13px; line-height: 1.6; }

/* コツ：図つきリンクカード */
.home-tips { gap: 14px; }
.home-tips a {
  padding: 14px;
  border: 2px solid var(--ap-ink);
  border-radius: 16px;
  background: var(--ap-surface);
  box-shadow: var(--ap-solid-shadow);
  color: var(--ap-ink);
}
.home-tips a:hover { background: var(--ap-now-bg); color: var(--ap-ink); }
.home-tips__kind { align-self: flex-start; padding: 1px 9px; border-radius: 999px; background: var(--ap-soft); font-size: 11px; font-weight: 900; color: var(--ap-ink); }
.home-tips__name { font-family: var(--ap-font); font-weight: 900; font-size: 17px; color: var(--ap-ink); }
.home-tips__text { font-size: 12.5px; color: var(--ap-sub); }
.home-tips__cta { font-size: 12.5px; font-weight: 900; color: var(--ap-accent); }
.home-tips__more { font-size: 13px; }

/* FAQ：虚線で区切る */
.home-faq { border-top: 0; max-width: none; }
.home-faq details { padding: 10px 4px; border-bottom: 2px dashed var(--ap-line); }
.home-faq details:last-child { border-bottom: 0; }
.home-faq summary { font-family: var(--ap-font); font-size: 14.5px; font-weight: 700; color: var(--ap-ink); }

/* ── 手機版（HomeAM）── */
@media (max-width: 767px) {
  [data-home-phase="menu"] .section--first { padding: 0 12px; }
  .home-lobby {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    margin: 0;
    padding: 14px 0 28px;
  }
  .home-lobby__content { display: contents; }
  .home-lobby__eyebrow { order: 1; font-size: 11px; padding: 2px 10px; }
  .home-lobby__title { order: 2; font-size: 28px; }
  .home-lobby__lead { order: 2; align-self: stretch; text-align: center; font-size: 13px; line-height: 1.6; margin-top: -6px; }
  .home-demo { order: 3; width: 100%; min-width: 0; }
  .home-demo__seal { left: -4px; top: -10px; }
  .home-setup { order: 4; padding: 12px; align-self: stretch; margin: 0; }
  .home-setup__grid { grid-template-columns: 1fr 1fr; gap: 10px 8px; }
  .home-lobby__actions { order: 5; grid-template-columns: 1fr; align-self: stretch; }
  .home-start--ai, .home-start--two { height: 54px; font-size: 16px; }
  .home-start--two { font-size: 14px; }
  .home-lobby__fine { order: 6; }
  .home-lobby__resume { order: 7; position: static; padding: 0; }

  .home-content__inner { padding: 0 12px; margin: 44px auto 30px; gap: 30px; }
  .home-block, .home-block--intro, .home-block--faq { padding: 26px 16px 16px; }
  .home-content .home-block h2 { left: 14px; padding: 3px 14px; font-size: 12.5px; }
  .home-content p { font-size: 14px; line-height: 1.9; }
  .home-steps li { flex-direction: row; align-items: center; }
  .home-kinji__grid { gap: 8px; }
  .home-kinji figure { padding: 28px 6px 8px; }
  .home-kinji figcaption strong { top: 6px; right: 6px; font-size: 10.5px; }
  .home-choose__sheet { border-top: 0; }
  .home-features__grid { gap: 8px; column-gap: 8px; }
  .home-features__item { padding: 10px 12px; }
}

/* asopiko は入場の淡入なし：首屏を最初の描画で出す */
.home-lobby__content > *, .home-demo canvas { animation: none; }