/* Napmancer LP */
:root {
  --bg: #FFFCF6;
  --tint: #F7F1E7;
  --lavender: #F1EEFB;
  --text: #352D43;
  --muted: #766E7C;
  --accent: #7366E8;
  --accent-dark: #5B4FD0;
  --done: #E4694F;
  --night-top: #29204F;
  --night-bottom: #7765A9;
  --line: #E9E1D5;
  --shadow: 0 16px 48px #241B3A1A;
  --shadow-sm: 0 6px 20px #241B3A12;

  --font-head: "Kiwi Maru", "Yu Gothic", "Meiryo", sans-serif;
  --font-body: "M PLUS Rounded 1c", "Yu Gothic", "Meiryo", sans-serif;
  --font-logo: "Cinzel", "Kiwi Maru", serif;

  --gutter: 22px;
  --section-y: 72px;
  --hero-y: 56px;
  --card-pad: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.9;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, .video__caption, .footer__msg { text-wrap: balance; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: calc(1040px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }
.br-sp { display: inline; }

.label {
  display: inline-block;
  margin: 0 0 14px;
  padding: 2px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px; line-height: 1.7; font-weight: 500;
  color: var(--muted);
  letter-spacing: .06em;
}
.chip {
  display: inline-block;
  padding: 1px 12px;
  border-radius: 999px;
  background: #ECE9FD;
  color: #4C41B8;
  font-size: 13px; font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
}
.note { font-size: 13px; line-height: 1.8; color: var(--muted); }

.h2 {
  margin: 0 0 24px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 27px; line-height: 1.55;
  letter-spacing: .02em;
}

.section { padding: var(--section-y) 0; }
.tint { background: var(--tint); }
.lavender { background: var(--lavender); }

.shot {
  display: block;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
  overflow: hidden;
}
a.shot { transition: transform .25s ease, box-shadow .25s ease; }
a.shot:hover { transform: translateY(-2px); }
a.shot img { border-radius: 0; }

/* ---------- 1. Hero ---------- */
.hero { position: relative; padding: var(--hero-y) 0 calc(var(--hero-y) + 24px); overflow: hidden; }
.hero__grid { display: grid; gap: 36px; text-align: center; }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; justify-content: center; }
.brand img { width: 40px; height: 40px; }
.brand__en { font-family: var(--font-logo); font-weight: 600; font-size: 18px; letter-spacing: .08em; color: #3b3290; }
.brand__ja { font-size: 12px; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line); }
.hero__copy .label { display: table; margin: 0 auto 14px; }
.hero__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 36px; line-height: 1.45;
  letter-spacing: .02em;
}
.hero__kana { display: block; font-size: .5em; color: var(--muted); font-weight: 400; letter-spacing: .04em; }
.hero__sub { margin: 4px 0 20px; font-family: var(--font-head); font-size: 18px; color: var(--accent-dark); }
.hero__motto { margin: 0 0 18px; font-family: var(--font-head); font-size: 22px; line-height: 1.6; }
.hero__lead { max-width: 30em; margin: 0 auto 22px; }
.hero__status { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; align-items: center; }
.hero__status .note { margin: 0; }

.hero__art { position: relative; width: min(100%, 420px); margin: 0 auto; aspect-ratio: 420 / 400; }
.hero__glow {
  position: absolute; inset: 4% 2% 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #7765A955 0%, #29204F2a 45%, transparent 70%);
  filter: blur(18px);
}
.hero__master { position: absolute; left: 6%; right: 6%; bottom: 8%; width: 88%; }
.hero__sprite { position: absolute; width: 30%; }
.hero__sprite--claude { left: -2%; top: 2%; }
.hero__sprite--codex { right: -2%; top: 10%; }
.star { position: absolute; width: 10px; height: 10px; background: var(--done); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 4s ease-in-out infinite; }
.star--1 { left: 34%; top: 4%; }
.star--2 { right: 12%; top: 46%; width: 8px; height: 8px; background: var(--accent); animation-delay: -1.3s; }
.star--3 { left: 8%; top: 50%; width: 7px; height: 7px; background: #E8B84A; animation-delay: -2.6s; }
@keyframes twinkle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.js .hero__sprite { opacity: 0; transform: translateY(8px); animation: appear .5s ease-out .1s forwards; }
.js .hero__sprite--codex { animation-delay: .16s; }
@keyframes appear { to { opacity: 1; transform: translateY(0); } }

.scroll-cue {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 12px; color: var(--muted); text-decoration: none;
}
.scroll-cue__arrow { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }

/* ---------- 2. Demo ---------- */
.demo { padding-top: 56px; }
.demo__intro { max-width: 34em; margin: 0 auto 32px; }
.video { margin: 0; }
.video__frame {
  position: relative;
  border-radius: 24px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.video__frame video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--night-top), var(--night-bottom));
}
.video__play {
  position: absolute; inset: 6px 6px 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 0; border-radius: 18px 18px 0 0;
  background: radial-gradient(circle at 50% 50%, #29204F55 0%, #29204F22 40%, transparent 70%);
  color: #fff;
  font: 700 14px/1.6 var(--font-body);
  cursor: pointer;
}
.video__play[hidden] { display: none; }
.video__play-icon {
  position: relative;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 8px #7366E840, 0 12px 32px #29204F66;
  transition: transform .2s ease, box-shadow .2s ease;
}
.video__play-icon::after {
  content: ""; position: absolute; left: 31px; top: 24px;
  border-style: solid; border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #fff;
}
.video__play:hover .video__play-icon,
.video__play:focus-visible .video__play-icon { transform: scale(1.06); box-shadow: 0 0 0 12px #7366E84d, 0 12px 32px #29204F66; }
.video__play-text { padding: 2px 14px; border-radius: 999px; background: #29204Fb3; text-shadow: 0 1px 2px #0006; }
.video__caption { display: flex; justify-content: center; align-items: baseline; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--muted); text-align: center; }
.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--done); transform: translateY(-1px); }

/* ---------- 3. Rooms ---------- */
.split { display: grid; gap: 32px; align-items: center; }
.split__text p { max-width: 34em; }
.split__media .note { margin-top: 14px; }
.rooms__more { margin: 40px auto 0; width: 100%; }

/* ---------- 4. Nap ---------- */
.nap { position: relative; padding-top: 0; }
.nap::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 340px;
  background: linear-gradient(180deg, var(--night-top), var(--night-bottom));
}
.nap .wrap { position: relative; }
.nap__scene { position: relative; width: min(100%, 560px); margin: 0 auto; padding-top: 24px; }
.nap__room { width: 100%; }
/* 暖炉はおよそ (72%, 43%) にある。その手前の床にクッションを置く */
.nap__master { position: absolute; width: 24%; left: 55%; top: 41%; filter: drop-shadow(0 6px 8px #241B3A33); }
.nap__z { position: absolute; left: 77%; top: 36%; font: 700 20px/1 var(--font-body); color: var(--accent); }
.nap__z small { font-size: 14px; margin-left: 2px; vertical-align: 8px; color: #8f84f0; }
.nap__card {
  position: relative;
  margin-top: -24px;
  padding: 32px var(--card-pad);
  border-radius: 20px;
  background: #FFFCF6f2;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.steps__no {
  display: grid; place-items: center;
  width: 30px; height: 30px; margin-top: 2px;
  border-radius: 50%;
  background: #ECE9FD; color: var(--accent-dark);
  font-weight: 700; font-size: 14px; line-height: 1;
}
.steps__no--done { background: #FBE4DE; color: var(--done); }

/* ---------- 5. Safety ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.card {
  position: relative;
  padding: var(--card-pad);
  padding-left: calc(var(--card-pad) + 18px);
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.card::before {
  content: ""; position: absolute; left: var(--card-pad); top: calc(var(--card-pad) + 9px);
  width: 9px; height: 9px; background: var(--accent);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.card__title { margin: 0 0 6px; font-family: var(--font-head); font-weight: 500; font-size: 17px; line-height: 1.6; }
.card p { font-size: 14px; line-height: 1.85; }

/* ---------- 6. Kin ---------- */
.kin__list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kin__card {
  --kin: var(--accent);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 6px 14px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #E4DEF6;
  border-top: 4px solid var(--kin);
  box-shadow: var(--shadow-sm);
}
.kin__card--claude { --kin: #6E5BD8; }
.kin__card--codex { --kin: #3E9A6B; }
.kin__card--gemini { --kin: #D9668D; }
.kin__card img { width: 100%; max-width: 132px; margin: -10px auto -4px; }
.kin__name { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: 16px; }
.kin__cli { margin: 0; font-weight: 700; font-size: 12px; line-height: 1.6; }
.kin__color { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
.swatch { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--kin); }
.kin__lead { max-width: 36em; }

/* ---------- 7. Env ---------- */
.env__box {
  padding: 28px var(--card-pad);
  border-radius: 20px;
  background: var(--tint);
  border: 1px solid var(--line);
}
.env__head { display: grid; gap: 12px; margin-bottom: 24px; }
.env__head img { width: 56px; height: 56px; }
.env__head .h2 { margin-bottom: 10px; }
.env__head .chip { margin: 0 2px; white-space: normal; }
.env__list { display: grid; gap: 10px; margin: 0; }
.env__list > div { padding: 12px 16px; border-radius: 14px; background: #FFFCF6; border: 1px solid var(--line); }
.env__list dt { font-size: 12px; line-height: 1.7; color: var(--muted); font-weight: 500; }
.env__list dd { margin: 0; font-weight: 500; }

/* ---------- 8. Footer ---------- */
.footer { background: linear-gradient(180deg, var(--night-top), var(--night-bottom)); color: #fff; text-align: center; }
.footer__inner { padding-top: 56px; padding-bottom: 44px; }
.footer__art { display: flex; justify-content: center; align-items: flex-end; gap: 0; margin-bottom: 18px; }
.footer__art img:first-child { width: 96px; }
.footer__art img:last-child { width: 88px; margin-left: -18px; }
.footer__msg { font-family: var(--font-head); font-size: 17px; line-height: 1.7; }
.footer__credit { margin-top: 8px; font-size: 12px; color: #E6E0FA; }
.footer__base { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 18px var(--gutter); background: var(--bg); color: var(--muted); font-size: 12px; }
.footer__base img { width: 28px; height: 28px; }
.footer__base p { margin: 0; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease-out, transform .5s ease-out; transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
.no-io .reveal { opacity: 1 !important; transform: none !important; }

/* ---------- 360px ---------- */
@media (max-width: 374px) {
  :root { --gutter: 18px; }
  .hero__title { font-size: 33px; }
  .kin__list { grid-template-columns: 1fr; }
  .kin__card { display: grid; grid-template-columns: 84px 1fr; grid-template-areas: "img name" "img cli" "img color"; align-items: center; text-align: left; padding: 10px 16px 10px 8px; border-top-width: 1px; border-left: 4px solid var(--kin); }
  .kin__card img { grid-area: img; max-width: 84px; margin: 0; }
  .kin__name { grid-area: name; align-self: end; }
  .kin__cli { grid-area: cli; }
  .kin__color { grid-area: color; justify-content: flex-start; align-self: start; margin: 0; }
}

/* ---------- Tablet / PC ---------- */
@media (min-width: 768px) {
  :root { --gutter: 32px; --section-y: 112px; --hero-y: 88px; --card-pad: 28px; }
  body { font-size: 16px; line-height: 2.0; }
  .br-sp { display: none; }
  .h2 { font-size: 36px; line-height: 1.5; margin-bottom: 28px; }
  .hero__title { font-size: 56px; line-height: 1.35; }
  .hero__motto { font-size: 26px; }
  .demo { padding-top: 72px; }
  .kin__list { gap: 20px; }
  .kin__card { padding: 22px 12px 18px; }
  .kin__name { font-size: 19px; }
  .kin__cli { font-size: 14px; }
  .kin__color { font-size: 13px; }
  .env__list { grid-template-columns: 1fr 1fr; }
  .env__list > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .env__head { grid-template-columns: 72px 1fr; gap: 24px; align-items: start; }
  .env__head img { width: 72px; height: 72px; }
  .nap::before { height: 440px; }
  .nap__scene { width: min(100%, 680px); }
  .nap__card { padding: 44px 40px; }
  .footer__msg { font-size: 20px; }
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 48px; text-align: left; }
  .brand { justify-content: flex-start; }
  .hero__copy .label { display: inline-block; margin: 0 0 14px; }
  .hero__lead { margin-left: 0; }
  .hero__status { justify-content: flex-start; }
  .hero__art { width: 100%; max-width: 460px; }
  .split { grid-template-columns: 1fr 1.25fr; gap: 56px; }
  .split--media-first { grid-template-columns: 1.15fr 1fr; gap: 40px; }
  .rooms__more { width: 70%; }
  .safety .split { grid-template-columns: 1fr 1.1fr; align-items: start; }
  .safety .split__media { margin-top: 84px; }
}
@media (min-width: 1104px) {
  :root { --gutter: 48px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .hero__sprite, .js .reveal { opacity: 1; transform: none; }
}