@charset "UTF-8";
:root {
  --bg: #eef0f4;
  --surface: #ffffff;
  --text: #1d2230;
  --muted: #5a6172;
  --soft: #8c93a3;
  --char: #2b3140;
  --accent: #3b68b5;
  --accent_hi: #6a8fd4;
  --border: rgba(29, 34, 48, 0.12);
  --hard: #2b3140;
  --face_side: #dde1e9;
}

html[data-design=dark] {
  color-scheme: dark;
  --bg: #050b18;
  --surface: rgba(12, 24, 46, 0.86);
  --text: #e8eef9;
  --muted: #9db0cb;
  --soft: #6f819c;
  --char: #9fd4ff;
  --accent: #5aa9ff;
  --accent_hi: #9fd4ff;
  --border: rgba(130, 175, 255, 0.18);
  --hard: rgba(90, 169, 255, 0.55);
  --face_side: #0c1a33;
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--bg);
}

body {
  margin: 0;
  background-color: transparent;
  color: var(--text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.lc_inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px) {
  .lc_inner {
    padding: 0 20px;
  }
}

/* ---------- 背景：ライト＝流れる斜線、ダーク＝等高線（canvas は JS） ---------- */
.sc_bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.sc_bg::before {
  position: absolute;
  inset: 0 -40px;
  content: "";
  background-image: repeating-linear-gradient(-45deg, rgba(29, 34, 48, 0.06) 0 1px, transparent 1px 12px);
  animation: lc_hatch 6s linear infinite;
}
html[data-design=dark] .sc_bg {
  background: radial-gradient(ellipse at 70% 0%, #0b1a35 0%, #050b18 55%, #02060f 100%);
}
html[data-design=dark] .sc_bg::before {
  display: none;
}

@keyframes lc_hatch {
  from {
    transform: translateX(-16.97px);
  }
  to {
    transform: translateX(0);
  }
}
/* ---------- ボタン（硬い影） ---------- */
.lc_btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 6px;
  background-color: #2b3140;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 0 #1c2029;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lc_btn::after {
  content: "→";
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lc_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #1c2029;
}
.lc_btn:hover::after {
  transform: translateX(4px);
}
html[data-design=dark] .lc_btn {
  background: #5aa9ff;
  color: #04101f;
  box-shadow: 0 0 22px rgba(90, 169, 255, 0.45);
}
html[data-design=dark] .lc_btn:hover {
  box-shadow: 0 0 30px rgba(90, 169, 255, 0.7);
}

.lc_btn_small {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
}

.lc_btn_ghost {
  background-color: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--char);
}
.lc_btn_ghost:hover {
  box-shadow: inset 0 0 0 1.5px var(--char), 0 4px 0 var(--border);
}
html[data-design=dark] .lc_btn_ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(130, 175, 255, 0.45);
}

/* ---------- header（実績ページと同じ作り） ---------- */
.lc_header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background-color: rgba(238, 240, 244, 0.92);
}
html[data-design=dark] .lc_header {
  background-color: rgba(5, 11, 24, 0.92);
}

.lc_header_inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 68px;
}

.lc_logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.lc_logo span {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .lc_logo {
    font-size: 13px;
  }
}

.lc_logo_mark {
  flex-shrink: 0;
}
.lc_logo_mark .mark_top {
  fill: #ffffff;
  stroke: #2b3140;
  stroke-width: 1;
  stroke-linejoin: round;
}
.lc_logo_mark .mark_left {
  fill: #2b3140;
}
.lc_logo_mark .mark_right {
  fill: #596277;
}
html[data-design=dark] .lc_logo_mark .mark_top {
  fill: #9fd4ff;
  stroke: #5aa9ff;
}
html[data-design=dark] .lc_logo_mark .mark_left {
  fill: #1d3a66;
}
html[data-design=dark] .lc_logo_mark .mark_right {
  fill: #2a5490;
}

.lc_nav {
  margin-left: auto;
}
.lc_nav ul {
  display: flex;
  gap: 4px;
}
.lc_nav a {
  display: block;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s;
}
.lc_nav a:hover {
  background-color: var(--border);
}
@media (max-width: 900px) {
  .lc_nav {
    display: none;
  }
}

@media (max-width: 900px) {
  .lc_header .lc_btn_small {
    margin-left: auto;
  }
}

.lc_eyebrow {
  color: var(--accent);
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
}

.lc_title {
  margin: 10px 0 16px;
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 900;
  line-height: 1.25;
}

.lc_lead {
  color: var(--muted);
}

/* ========== ここから security ページ固有（security.scss から @import） ========== */
html[data-design=dark] .sc_bg::before {
  display: block;
  inset: -48px;
  background-image: linear-gradient(rgba(90, 169, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(90, 169, 255, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: sc_grid 14s linear infinite;
}
html[data-design=dark] .sc_bg::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 30% 30%, rgba(90, 169, 255, 0.12), transparent 40%);
  animation: sc_glow 9s ease-in-out infinite alternate;
}

@keyframes sc_grid {
  to {
    transform: translate(48px, 48px);
  }
}
@keyframes sc_glow {
  to {
    transform: translate(40%, 30%);
  }
}
.sc_progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 3px;
  background-color: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}
html[data-design=dark] .sc_progress {
  box-shadow: 0 0 12px var(--accent);
}

/* ---------- hero ---------- */
.sc_hero {
  overflow: clip;
  padding: 80px 0 72px;
}
@media (max-width: 640px) {
  .sc_hero {
    padding: 48px 0;
  }
}

.sc_hero_inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 56px;
  align-items: center;
}
@media (max-width: 1024px) {
  .sc_hero_inner {
    gap: 36px;
  }
}
@media (max-width: 900px) {
  .sc_hero_inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lc_title {
  word-break: auto-phrase;
  text-wrap: balance;
}

.sc_asof {
  margin-top: 18px;
  color: var(--soft);
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 13px;
}

.sc_gate {
  position: relative;
  padding: 30px 28px 24px;
  border-radius: 6px;
  background-color: var(--surface);
  box-shadow: 0 0 0 1.5px var(--char), 6px 6px 0 var(--char);
}
html[data-design=dark] .sc_gate {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 40px rgba(90, 169, 255, 0.12);
}
@media (max-width: 640px) {
  .sc_gate {
    padding: 24px 18px 20px;
  }
}
.sc_gate.is_shake {
  animation: sc_shake 0.4s;
}

@keyframes sc_shake {
  20%, 60% {
    transform: translateX(-6px);
  }
  40%, 80% {
    transform: translateX(6px);
  }
}
.sc_gate_steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.sc_gate_steps::before {
  position: absolute;
  top: 28px;
  left: 16%;
  right: 16%;
  height: 2px;
  content: "";
  background-image: repeating-linear-gradient(90deg, var(--char) 0 6px, transparent 6px 12px);
  opacity: 0.4;
}

.sc_step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.sc_step_icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background-color: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--char);
  color: var(--char);
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s, transform 0.4s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.sc_step.is_pass .sc_step_icon {
  background-color: var(--accent);
  color: #ffffff;
  transform: translateY(-4px) rotate(-4deg);
  box-shadow: none;
}
.sc_step.is_block .sc_step_icon {
  background-color: #d4543f;
  color: #ffffff;
  box-shadow: none;
}
html[data-design=dark] .sc_step_icon {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(130, 175, 255, 0.45);
}
.sc_step.is_pass html[data-design=dark] .sc_step_icon {
  color: #04101f;
  box-shadow: 0 0 22px rgba(90, 169, 255, 0.7);
}

.sc_step_name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.sc_step_name small {
  display: block;
  color: var(--soft);
  font-size: 11px;
  font-weight: 400;
}

.sc_token {
  position: absolute;
  top: 51px;
  left: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(59, 104, 181, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--tx, 0));
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}
.sc_token.is_on {
  opacity: 1;
}
.sc_token.is_bounce {
  animation: sc_bounce 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html[data-design=dark] .sc_token {
  box-shadow: 0 0 16px var(--accent);
}

@keyframes sc_bounce {
  50% {
    margin-left: -28px;
    background-color: #d4543f;
  }
}
.sc_fail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  align-items: center;
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 4px;
  background-color: var(--bg);
}
html[data-design=dark] .sc_fail {
  border-radius: 10px;
  background-color: rgba(5, 11, 24, 0.6);
}

.sc_fail_label {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.sc_fail_meter {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sc_fail_meter li {
  flex: 1 1 0;
  height: 10px;
  border-radius: 2px;
  background-color: var(--border);
  transition: background-color 0.25s, transform 0.3s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.sc_fail_meter li.is_on {
  background-color: #e0a03a;
  transform: scaleY(1.4);
}
.sc_fail_meter.is_full li {
  background-color: #d4543f;
}

.sc_fail_state {
  grid-column: 1/-1;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 14px;
  font-weight: 500;
}
.sc_fail_state.is_lock {
  color: #d4543f;
}
html[data-design=dark] .sc_fail_state.is_lock {
  color: #ff8a73;
}

.sc_gate_btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sc_gate_btns .lc_btn::after {
  content: none;
}
.sc_gate_btns .lc_btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.sc_gate_note {
  margin-top: 12px;
  color: var(--soft);
  font-size: 12px;
}

/* ---------- 各章 ---------- */
.sc_sec {
  overflow-x: clip;
  padding: 88px 0;
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
  .sc_sec {
    padding: 64px 0;
  }
}

.sc_sec_inner {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .sc_sec_inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

.sc_sec_head {
  position: sticky;
  top: 100px;
}
@media (max-width: 900px) {
  .sc_sec_head {
    position: static;
  }
}

.sc_no {
  color: var(--accent);
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 0.2em;
}

.sc_title {
  position: relative;
  display: inline-block;
  margin: 8px 0 16px;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 900;
  line-height: 1.4;
  word-break: auto-phrase;
  text-wrap: balance;
}
.sc_title::after {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 8px;
  content: "";
  background-color: var(--accent);
  opacity: 0.22;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}
.is_in .sc_title::after {
  transform: scaleX(1);
}

.sc_text {
  color: var(--muted);
}

._scReveal .sc_sec_inner > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

._scReveal.is_in .sc_sec_inner > * {
  opacity: 1;
  transform: none;
}

._scReveal.is_in .sc_sec_inner > *:nth-child(2) {
  transition-delay: 0.15s;
}

/* 01 入口：カードは角がめくれる（ライト）／光る枠（ダーク） */
.sc_cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 640px) {
  .sc_cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sc_card {
  position: relative;
  padding: 26px 24px;
  border-radius: 4px;
  background-color: var(--surface);
  box-shadow: 1px 1px 0 #e4e7ed, 2px 2px 0 #e0e3ea, 3px 3px 0 #dbdfe6, 4px 4px 0 #d7dbe3, 12px 16px 24px rgba(29, 34, 48, 0.06);
  transition: transform 0.35s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.sc_card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  content: "";
  background: linear-gradient(to top left, var(--bg) 0 50%, var(--accent) 50% 100%);
  transition: width 0.35s cubic-bezier(0.3, 1.45, 0.5, 1), height 0.35s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.sc_card:hover {
  transform: translateY(-3px);
}
.sc_card:hover::after {
  width: 46px;
  height: 46px;
}
html[data-design=dark] .sc_card {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
html[data-design=dark] .sc_card::after {
  display: none;
}
html[data-design=dark] .sc_card:hover {
  border-color: rgba(159, 212, 255, 0.6);
  box-shadow: 0 0 28px rgba(90, 169, 255, 0.25);
}

.sc_card_title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
}

.sc_card_text {
  color: var(--muted);
  font-size: 15px;
}

/* 02 気付ける：通知メールが滑り込む */
.sc_notice {
  display: grid;
  gap: 28px;
}

.sc_mail {
  position: relative;
  padding: 20px 22px 20px 26px;
  border-radius: 6px;
  background-color: var(--surface);
  box-shadow: 0 0 0 1.5px var(--char), 5px 5px 0 var(--char);
  opacity: 0;
  transform: translateX(60px) rotate(2deg);
  transition: transform 0.8s cubic-bezier(0.3, 1.45, 0.5, 1) 0.3s, opacity 0.4s 0.3s;
}
.sc_mail::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  content: "";
  border-radius: 6px 0 0 6px;
  background-color: #e0a03a;
}
.is_in .sc_mail {
  opacity: 1;
  transform: none;
}
html[data-design=dark] .sc_mail {
  border: 1px solid rgba(255, 164, 92, 0.45);
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(255, 164, 92, 0.15);
}
html[data-design=dark] .sc_mail::before {
  border-radius: 14px 0 0 14px;
  background-color: #ffa45c;
}

.sc_mail_from {
  color: var(--soft);
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 12px;
}

.sc_mail_subject {
  margin: 4px 0 6px;
  font-size: 17px;
  font-weight: 900;
}

.sc_mail_body {
  color: var(--muted);
  font-size: 14px;
}

.sc_list {
  display: grid;
  gap: 14px;
}
.sc_list li {
  position: relative;
  padding-left: 22px;
}
.sc_list li::before {
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 10px;
  height: 10px;
  content: "";
  background-color: var(--accent);
  transform: rotate(45deg);
}

/* 03 バックアップ：時計の針が2時へ回り、10日分の棚が順に埋まる */
.sc_backup {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 28px;
  border-radius: 6px;
  background-color: var(--surface);
  box-shadow: 0 0 0 1.5px var(--char), 6px 6px 0 var(--char);
}
html[data-design=dark] .sc_backup {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
@media (max-width: 640px) {
  .sc_backup {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 22px 18px;
  }
}

.sc_clock {
  text-align: center;
}
.sc_clock svg {
  display: block;
  margin: 0 auto;
}

.sc_clock_face {
  fill: var(--bg);
  stroke: var(--char);
  stroke-width: 2;
}

.sc_clock_hour,
.sc_clock_min {
  stroke: var(--char);
  stroke-linecap: round;
  transform-origin: 60px 60px;
  transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sc_clock_hour {
  stroke-width: 5;
  transform: rotate(-120deg);
}

.sc_clock_min {
  stroke-width: 3;
  transform: rotate(-1440deg);
}

.sc_clock_pin {
  fill: var(--accent);
}

.is_in .sc_clock_hour {
  transform: rotate(60deg);
}

.is_in .sc_clock_min {
  transform: rotate(0deg);
}

.sc_clock_time {
  margin-top: 8px;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 15px;
  font-weight: 500;
}

.sc_days_wrap {
  width: 100%;
}

.sc_days_label {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 15px;
}

.sc_days {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 640px) {
  .sc_days {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.sc_days li {
  display: grid;
  gap: 3px;
}
.sc_days b {
  display: block;
  padding: 4px 0;
  border-radius: 3px;
  background-color: var(--border);
  color: transparent;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  transform: scale(0.6);
  transition: background-color 0.3s, color 0.3s, transform 0.4s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.sc_days li.is_saved b {
  background-color: var(--accent);
  color: #ffffff;
  transform: none;
}
html[data-design=dark] .sc_days li.is_saved b {
  color: #04101f;
}
.sc_days li.is_saved b + b {
  background-color: var(--char);
}
html[data-design=dark] .sc_days li.is_saved b + b {
  background-color: var(--accent_hi);
}

/* 04 ルール：チェックの線が順に描かれる */
.sc_checks {
  display: grid;
  gap: 14px;
}

.sc_check {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 18px 20px;
  border-radius: 4px;
  background-color: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
html[data-design=dark] .sc_check {
  border-radius: 12px;
}

.sc_tick {
  margin-top: 2px;
  padding: 3px;
  overflow: visible;
  border-radius: 50%;
  background-color: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--char);
}
.sc_tick path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.is_in .sc_check .sc_tick path {
  stroke-dashoffset: 0;
}

.is_in .sc_check:nth-child(1) .sc_tick path {
  transition-delay: 0.47s;
}

.is_in .sc_check:nth-child(2) .sc_tick path {
  transition-delay: 0.69s;
}

.is_in .sc_check:nth-child(3) .sc_tick path {
  transition-delay: 0.91s;
}

.is_in .sc_check:nth-child(4) .sc_tick path {
  transition-delay: 1.13s;
}

.is_in .sc_check:nth-child(5) .sc_tick path {
  transition-delay: 1.35s;
}

/* 05 いま取り組んでいること：点線の枠＋点滅するタグ */
.sc_wip {
  display: grid;
  gap: 12px;
}

.sc_wip_item {
  padding: 16px 18px;
  border: 1.5px dashed var(--soft);
  border-radius: 4px;
}
html[data-design=dark] .sc_wip_item {
  border-radius: 12px;
}

.sc_wip_tag {
  display: inline-block;
  margin-right: 10px;
  padding: 0 10px;
  border-radius: 3px;
  background-color: #e0a03a;
  color: #1d2230;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  animation: sc_blink 1.6s ease-in-out infinite;
}

@keyframes sc_blink {
  50% {
    opacity: 0.45;
  }
}
.sc_wip_done {
  border-style: solid;
  border-color: var(--border);
  color: var(--muted);
}
.sc_wip_done .sc_wip_tag {
  background-color: var(--accent);
  color: #ffffff;
  animation: none;
}
html[data-design=dark] .sc_wip_done .sc_wip_tag {
  color: #04101f;
}

.sc_wip_note {
  margin-top: 14px;
  color: var(--soft);
  font-size: 14px;
}

/* ---------- 最後 ---------- */
.sc_end {
  padding: 72px 0 120px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.sc_ai {
  color: var(--muted);
  font-size: 14px;
}

.sc_end_btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

/* ---------- ファーストビューの盾：四方から飛んでくる点を、盾のまわりの壁ではじく（canvas は JS） ---------- */
.sc_shield_stage {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 460px;
  padding-top: 40px;
}
@media (max-width: 900px) {
  .sc_shield_stage {
    min-height: 400px;
    padding-top: 20px;
  }
}
@media (max-width: 640px) {
  .sc_shield_stage {
    min-height: 360px;
  }
}

.sc_shield_canvas {
  position: absolute;
  inset: -60px -40px -20px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  pointer-events: none;
}

.sc_shield_btn {
  position: relative;
  z-index: 1;
  margin-top: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 700px;
  -webkit-tap-highlight-color: transparent;
}
.sc_shield_btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 8px;
  border-radius: 12px;
}

.sc_shield_tilt {
  display: block;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: sc_float 5s ease-in-out infinite;
}
.sc_shield_btn:active .sc_shield_tilt {
  scale: 0.94;
}
.sc_shield_tilt.is_hit {
  animation: sc_hit 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sc_shield_tilt.is_blast {
  animation: sc_blast 0.6s cubic-bezier(0.3, 1.45, 0.5, 1);
}

@keyframes sc_float {
  50% {
    translate: 0 -10px;
  }
}
@keyframes sc_hit {
  40% {
    scale: 0.97;
  }
}
@keyframes sc_blast {
  30% {
    scale: 1.12;
  }
}
.sc_shield_svg {
  display: block;
  width: clamp(170px, 18vw, 230px);
  height: auto;
  overflow: visible;
}

.sc_shield_shadow {
  fill: var(--char);
  transform: translate(10px, 6px);
}

.sc_shield_rim {
  fill: var(--surface);
  stroke: var(--char);
  stroke-width: 3;
  stroke-linejoin: round;
}

.sc_shield_face {
  fill: var(--accent);
}

.sc_shield_half {
  fill: rgba(0, 0, 0, 0.16);
}

.sc_shield_shackle {
  fill: none;
  stroke: #ffffff;
  stroke-width: 7;
  stroke-linecap: round;
}

.sc_shield_body {
  fill: #ffffff;
}

.sc_shield_hole,
.sc_shield_hole_line {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
}

.sc_shield_shine {
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: sc_shine 4s ease-in-out infinite 1s;
}

@keyframes sc_shine {
  20%, 100% {
    stroke-dashoffset: -60;
  }
}
html[data-design=dark] .sc_shield_shadow {
  fill: rgba(90, 169, 255, 0.18);
  filter: blur(6px);
}
html[data-design=dark] .sc_shield_rim {
  fill: #0a1830;
  stroke: #9fd4ff;
  stroke-width: 2;
  filter: drop-shadow(0 0 14px rgba(90, 169, 255, 0.7));
}
html[data-design=dark] .sc_shield_face {
  fill: #12305a;
}
html[data-design=dark] .sc_shield_half {
  fill: rgba(90, 169, 255, 0.12);
}
html[data-design=dark] .sc_shield_shackle {
  stroke: #9fd4ff;
}
html[data-design=dark] .sc_shield_body {
  fill: #9fd4ff;
}
html[data-design=dark] .sc_shield_hole,
html[data-design=dark] .sc_shield_hole_line {
  fill: #12305a;
  stroke: #12305a;
}

.sc_shield_count {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 26px;
  padding: 6px 16px;
  border-radius: 4px;
  background-color: var(--char);
  color: #ffffff;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
}
html[data-design=dark] .sc_shield_count {
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: rgba(5, 11, 24, 0.75);
  color: var(--text);
}

.sc_shield_num {
  flex-shrink: 0;
  min-width: 3ch;
  font-size: 26px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.sc_shield_unit {
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.sc_shield_note {
  position: relative;
  z-index: 1;
  max-width: 360px;
  margin-top: 12px;
  color: var(--soft);
  font-size: 12px;
  text-align: center;
}

/* ---------- 関門の体験（盾の下の独立したブロック） ---------- */
.sc_try_area {
  padding: 80px 0;
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
  .sc_try_area {
    padding: 56px 0;
  }
}

.sc_try_inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .sc_try_inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}
.sc_try_inner .sc_title::after {
  transform: scaleX(1);
}

/* ========== ファーストビューを見せ場にする（2026-10-08 改：画面幅いっぱいの攻撃・回るリング・床・着地の演出） ========== */
.sc_hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: max(660px, 100vh - 68px);
  background: radial-gradient(circle at 74% 46%, rgba(59, 104, 181, 0.2), transparent 38%), radial-gradient(ellipse 60% 50% at 10% 0%, rgba(255, 255, 255, 0.9), transparent 70%);
}
html[data-design=dark] .sc_hero {
  background: radial-gradient(circle at 74% 46%, rgba(90, 169, 255, 0.24), transparent 40%), radial-gradient(circle at 74% 46%, rgba(255, 107, 90, 0.06), transparent 60%);
}
.sc_hero.is_quake {
  animation: sc_quake 0.5s;
}
@media (max-width: 900px) {
  .sc_hero {
    min-height: 0;
  }
}

@keyframes sc_quake {
  15% {
    transform: translate(-6px, 4px);
  }
  30% {
    transform: translate(5px, -5px);
  }
  45% {
    transform: translate(-4px, -2px);
  }
  60% {
    transform: translate(3px, 3px);
  }
  80% {
    transform: translate(-1px, 1px);
  }
}
.sc_hero_canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sc_hero_inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.sc_floor {
  position: absolute;
  right: -10%;
  bottom: 0;
  z-index: 0;
  width: 70%;
  height: 46%;
  overflow: hidden;
  perspective: 420px;
  pointer-events: none;
  mask-image: linear-gradient(to top, #000 0%, transparent 95%), linear-gradient(to right, transparent, #000 30%, #000 80%, transparent);
  mask-composite: intersect;
}
@media (max-width: 900px) {
  .sc_floor {
    right: -20%;
    width: 140%;
    height: 34%;
  }
}

.sc_floor_plane {
  position: absolute;
  inset: -100% -50% 0;
  background-image: linear-gradient(rgba(43, 49, 64, 0.22) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(43, 49, 64, 0.22) 1.5px, transparent 1.5px);
  background-size: 56px 56px;
  transform: rotateX(72deg);
  transform-origin: 50% 100%;
  animation: sc_floor 2.4s linear infinite;
}
html[data-design=dark] .sc_floor_plane {
  background-image: linear-gradient(rgba(90, 169, 255, 0.45) 1px, transparent 1px), linear-gradient(90deg, rgba(90, 169, 255, 0.45) 1px, transparent 1px);
  filter: drop-shadow(0 0 4px rgba(90, 169, 255, 0.8));
}

@keyframes sc_floor {
  to {
    background-position: 0 56px;
  }
}
.sc_title_line {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: sc_write 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.sc_title_line + br + .sc_title_line {
  animation-delay: 0.35s;
}

@keyframes sc_write {
  to {
    clip-path: inset(0 -4% 0 0);
  }
}
.sc_hero_copy .lc_lead,
.sc_hero_copy .sc_asof {
  opacity: 0;
  transform: translateY(16px);
  animation: sc_up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
}

.sc_hero_copy .sc_asof {
  animation-delay: 1s;
}

@keyframes sc_up {
  to {
    opacity: 1;
    transform: none;
  }
}
.sc_live {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #d4543f;
  vertical-align: 0.05em;
  animation: sc_live 1.2s ease-in-out infinite;
}

@keyframes sc_live {
  50% {
    box-shadow: 0 0 0 6px rgba(212, 84, 63, 0);
    opacity: 0.35;
  }
  0% {
    box-shadow: 0 0 0 0 rgba(212, 84, 63, 0.6);
  }
}
.sc_shield_stage {
  --sw: clamp(210px, 23vw, 300px);
  min-height: calc(var(--sw) * 1.18 + 220px);
  padding-top: 40px;
}
@media (max-width: 900px) {
  .sc_shield_stage {
    --sw: clamp(190px, 52vw, 260px);
    padding-top: 30px;
  }
}

.sc_shield_btn {
  margin-top: 30px;
  animation: sc_drop 0.75s cubic-bezier(0.55, 0, 0.8, 0.4) 0.25s both;
}

@keyframes sc_drop {
  0% {
    opacity: 0;
    transform: translateY(-460px) scale(1.25);
  }
  70% {
    opacity: 1;
    transform: translateY(0) scale(1, 1);
  }
  82% {
    transform: translateY(0) scale(1.08, 0.9);
  }
  100% {
    transform: none;
  }
}
.sc_shield_svg {
  width: var(--sw);
}

.sc_rings {
  position: absolute;
  top: calc(70px + var(--sw) * 0.59);
  left: 50%;
  width: calc(var(--sw) * 1.62);
  height: calc(var(--sw) * 1.62);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: sc_ring_in 0.6s cubic-bezier(0.3, 1.45, 0.5, 1) 1s forwards;
}
@media (max-width: 900px) {
  .sc_rings {
    top: calc(60px + var(--sw) * 0.59);
  }
}

@keyframes sc_ring_in {
  from {
    opacity: 0;
    scale: 0.4;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
.sc_ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.sc_ring_outer {
  border: 2px dashed rgba(43, 49, 64, 0.35);
  animation: sc_spin 22s linear infinite;
}
html[data-design=dark] .sc_ring_outer {
  border-color: rgba(90, 169, 255, 0.5);
  box-shadow: 0 0 24px rgba(90, 169, 255, 0.18) inset;
}

.sc_ring_inner {
  inset: 12%;
  border: 6px dotted rgba(59, 104, 181, 0.4);
  animation: sc_spin 12s linear infinite reverse;
}
html[data-design=dark] .sc_ring_inner {
  border-color: rgba(159, 212, 255, 0.55);
}

.sc_radar {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(59, 104, 181, 0.28), transparent 18%, transparent);
  mask-image: radial-gradient(circle, transparent 38%, #000 39%);
  animation: sc_spin 3.6s linear infinite;
}
html[data-design=dark] .sc_radar {
  background: conic-gradient(from 0deg, rgba(90, 169, 255, 0.45), transparent 20%, transparent);
}

@keyframes sc_spin {
  to {
    rotate: 360deg;
  }
}
.sc_shield_count {
  margin-top: 30px;
}

.sc_shield_num {
  font-size: 34px;
}

.sc_wave_alert {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 3px;
  background-color: #d4543f;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.16em;
  opacity: 0;
}
.sc_wave_alert.is_on {
  animation: sc_wave_flash 1.6s steps(1, end);
}

@keyframes sc_wave_flash {
  0%, 20%, 40%, 60%, 80% {
    opacity: 1;
  }
  10%, 30%, 50%, 70%, 100% {
    opacity: 0;
  }
}
@media (max-width: 900px) {
  .sc_shield_stage {
    --sw: clamp(160px, 44vw, 230px);
    order: -1;
    min-height: calc(var(--sw) * 1.18 + 150px);
    padding-top: 10px;
  }
}

@media (max-width: 900px) {
  .sc_hero_inner {
    gap: 8px;
  }
}

@media (max-width: 900px) {
  .sc_rings {
    top: calc(40px + var(--sw) * 0.59);
  }
}

@media (max-width: 900px) {
  .sc_shield_note {
    display: none;
  }
}