@charset "utf-8";
/* ==========================================================================
   刀剣乱舞ONLINE × んまほっぺ マスコットぬいぐるみ LP
   pilot build — SP first / PC は同じ仕組みを幅だけ変えて流用
   ※ 共通化候補（次案件へ切り出す想定）:
     - tokens.css      : :root のカラー・イージング
     - washi.css       : .washi-* 背景ユーティリティ
     - reveal.css      : [data-reveal] 一式
   ========================================================================== */

/* --------------------------------------------------
   1. tokens  → 切り出し候補
   -------------------------------------------------- */
:root {
  /* color */
  --navy-deep: #22203e;
  --navy: #1b2547;
  --pink-bg: #fbeef2;
  --cream-bg: #f5ecd8;
  --white-bg: #ffffff;
  --pink: #e94566;
  --pink-dark: #c23e63;
  --cta: #d9506a;
  --gold: #e9cd77;
  --text: #3f3b36;
  --text-sub: #6b5560;
  --text-mute: #9a8f7a;
  --text-on-dark: #f7f3ea;

  /* layout */
  --content-max: 700px;   /* テキスト主体の最大幅 */
  --wide-max: 1080px;     /* カード等の最大幅 */
  --gutter: 16px;

  /* motion  → 切り出し候補 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1); /* ぬいぐるみ用：軽く弾む */
  --dur: 0.72s;
  --dur-fast: 0.85s;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  color: var(--text);
  background: var(--cream-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, p, figure { margin: 0; }

.heading {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: var(--pink);
  text-align: center;
  font-size: 20px;
  letter-spacing: 0.04em;
}
.heading--lg {
  font-size: 32px;
  /* Figma: 白の外側ストローク 3px */
  -webkit-text-stroke: 3px #fff;
  paint-order: stroke fill;
}
.heading--fit { font-size: 15px; white-space: nowrap; }
.heading--sales { font-size: 32px; }

.inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.inner--wide { max-width: var(--wide-max); }

/* --------------------------------------------------
   3. washi テクスチャ背景  → 切り出し候補
   タイルは透明SVG（色は下の gradient が担当）
   -------------------------------------------------- */
.washi { position: relative; isolation: isolate; }
.washi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 560px 560px;
}
.washi--pink::before  { background-image: url("../img/washi-pink.svg"); }

/* 夜からの繋ぎ目：テクスチャを上端でフェードインさせる */
.sec--brand::before {
  /* 濃紺→ピンクのグラデが終わるまでテクスチャを出さない */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, #000 36%);
          mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, #000 36%);
}
.washi--cream::before { background-image: url("../img/washi-cream.svg"); }
.washi--white::before { background-image: url("../img/washi-white.svg"); }

/* --------------------------------------------------
   4. セクション色（境目をグラデでブレンド）
   Figma と同じ配色ロジック
   -------------------------------------------------- */
.sec { position: relative; }

.sec--brand {
  margin-top: -1px;
  /* 濃紺 → ピンク → クリーム（切れ目が出ないよう多段で繋ぐ） */
  background: linear-gradient(
    to bottom,
    #241f3f 0%,
    #2b2547 5%,
    #4a4368 11%,
    #8a7c96 17%,
    #cfc0cd 23%,
    #f2e6ec 29%,
    var(--pink-bg) 34%,
    var(--pink-bg) 88%,
    var(--cream-bg) 100%
  );
  padding: 104px 0 52px;
}

.sec--character { background: var(--cream-bg); padding: 16px 0 0; }
.sec--spec      { background: var(--cream-bg); padding: 0 0 48px; }
.sec--gallery   { background: var(--cream-bg); padding: 0 0 48px; }

.sec--sales .inner > * { margin: 0 auto; }
.sec--sales .inner > * + * { margin-top: 29px; }

.sec--sales {
  background: linear-gradient(
    to bottom,
    var(--cream-bg) 0%,
    var(--pink-bg) 15%,
    var(--pink-bg) 85%,
    var(--cream-bg) 100%
  );
  padding: 44px 0;
}

.sec--print {
  background: linear-gradient(
    to bottom,
    var(--cream-bg) 0%,
    var(--cream-bg) 82%,
    var(--white-bg) 100%
  );
  padding: 40px 0 100px;
}

.sec--notes { background: var(--white-bg); padding: 38px 0 32px; }

.site-footer {
  background: var(--navy-deep);
  color: var(--gold);
  text-align: center;
  padding: 22px var(--gutter);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------
   5. hero
   -------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 631px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  background: linear-gradient(to bottom, #101736 0%, #1b2547 60%, #241f3f 100%);
  margin-bottom: -1px;
}

.hero__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__sky   {
  background: url("../img/night-sky.svg") center / cover no-repeat;
  /* 下端でフェードして、次セクションの濃紺グラデへ自然に繋ぐ */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
}
.hero__stars {
  background: url("../img/stars.svg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
}

.hero__moon {
  position: absolute;
  top: -4px;
  right: 0;
  width: 150px;   /* 素材に光暈が含まれるため一回り大きく */
  z-index: 0;
}

.hero__clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* ---- 雲：右→左に流れるレーン ----
   1セットの幅を必ず画面幅より広く（min-width:130vw）確保しているので、
   繰り返しの継ぎ目が画面内に来ない＝雲は必ず画面外から入ってくる */
.lane { position: absolute; left: 0; width: 100%; }
.lane__track {
  display: flex;
  width: max-content;
  animation: cloud-flow linear infinite;
}
.lane__set {
  display: flex;
  align-items: center;
  flex: none;
  min-width: 130vw;
  justify-content: space-around;
}
.lane__track img { display: block; flex: none; height: auto; }

@keyframes cloud-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 奥：小さい・遅い・薄い・上 */
.lane--back { top: 352px; }
.lane--back .lane__track { animation-duration: 100s; }
.lane--back img { width: 84px; opacity: 0.50; }

/* 中 */
.lane--mid { top: 436px; }
.lane--mid .lane__track { animation-duration: 64s; }
.lane--mid img { width: 132px; opacity: 0.68; }

/* 手前：大きい・速い・濃い・下 */
.lane--front { top: 496px; }
.lane--front .lane__track { animation-duration: 38s; }
.lane--front img { width: 200px; opacity: 0.88; }

.hero__content {
  position: relative;
  z-index: 2;
  width: 337px;          /* Figma: hero-content 337px */
  max-width: calc(100% - 32px);
  margin: 128px auto 0;  /* Figma: y128 */
  text-align: center;
}

.hero__badge {
  display: inline-block;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 999px;
  font-size: 12px;
  padding: 5px 14px;
  margin-bottom: 14px;
}

.hero__logos {
  display: flex;
  justify-content: center;
  margin-bottom: 11px;
}
.hero__logos img {
  width: 278px;          /* Figma: 278×97 */
  max-width: 100%;
  height: auto;
}

.hero__title {
  margin: 4px auto 8px;
  line-height: 0;
}
.hero__title img {
  width: 100%;           /* Figma: 337px幅いっぱい / 32.5px相当 */
  max-width: 337px;
  height: auto;
  margin-inline: auto;
}
.hero__date  { color: var(--gold); font-size: 12px; margin-top: 11px; }
.hero__price { color: var(--text-on-dark); font-size: 16px; font-weight: 700; margin-top: 11px; }

.hero__plush {
  position: relative;
  z-index: 2;            /* 雲より前 */
  width: 448px;          /* Figma: Group1 448×239（画面幅より広い） */
  max-width: none;
  margin: 22px 0 0 calc(50% - 224px);   /* 画面中央に合わせる */
}
.hero__plush img { width: 100%; height: auto; }

/* --------------------------------------------------
   6. パーツ
   -------------------------------------------------- */
.badge-pill {
  display: inline-block;
  background: #f4c9d7;
  color: var(--pink-dark);
  border-radius: 999px;
  font-size: 12px;
  padding: 5px 16px;
}
.badge-pill--lg {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.3em;
  padding: 7px 20px 7px 26px;
}

.card {
  background: #fff;
  border-radius: 14px;
  padding: 4px 18px;
  box-shadow: 0 2px 14px rgba(160, 130, 100, 0.08);
}

.spec-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid #efe7d6;
  font-size: 13px;
  line-height: 1.7;
}
.spec-row > span:last-child { flex: 1 1 auto; min-width: 0; }
.spec-row:last-child { border-bottom: 0; }
.spec-row__label { flex: 0 0 76px; color: #a06a2e; font-size: 12px; line-height: 1.7; }
.sec--sales .spec-row__label { flex-basis: 108px; white-space: nowrap; }
.spec-row__label--wide { flex-basis: 108px; }
.sec--sales .spec-row__label { color: var(--pink-dark); }
.sec--sales .spec-row { border-bottom-color: #f3dde4; }

/* CTA：白ハイライト＋影で立体感 */
.sales-lead {
  background: var(--pink);
  color: #fff;
  padding: 18px;
}
.sales-lead__label { font-size: 14px; opacity: 0.92; }
.sales-lead__text  { font-size: 16px; line-height: 1.6; font-weight: 700; }

.sales-note {
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
  margin-top: 12px;
}

.cta {
  display: block;
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 20px auto 0;
  padding: 15px 24px;
  border-radius: 999px;
  background: var(--cta);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(140, 30, 56, 0.32);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.cta::before {
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 3px;
  height: 44%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(140, 30, 56, 0.36); }
.cta:active { transform: translateY(0); }


.notes {
  font-size: 10.5px;
  line-height: 1.8;
  color: var(--text-mute);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ※ を頭に出し、折り返した2行目以降は本文の位置で揃える */
.notes li {
  position: relative;
  padding-left: 1.15em;
}
.notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}
.notes li + li { margin-top: 0.15em; }

/* キャラカード */
.chara-list { display: flex; flex-direction: column; align-items: center; gap: 11px; }

.chara-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;                /* Figma: 画像とテキストの間 14px */
  padding: 16px;
  margin-bottom: 0;
  text-align: center;
}

.chara-card__name { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 19px; color: #2c2a28; letter-spacing: 0.08em; }



/* 画像 */
.brand-logo {
  width: 230px;   /* Figma SP: 230×95 */
  margin: 0 auto;
  height: auto;
}

.brand-copy {
  text-align: center;
  color: var(--pink);
  font-weight: 500;
  font-size: 13px;       /* Figma SP: 13px / 190% */
  line-height: 1.9;
  margin-top: 14px;
}

.chara-card__img {
  width: 250px;             /* Figma: 枠250×250 */
  max-width: 100%;
  height: 250px;            /* 3枚とも同じ枠にして、ぬいぐるみの大きさを揃える */
  object-fit: contain;
  object-position: center bottom;
  transform: scale(1.16);   /* Figma: 画像290 ÷ 枠250 */
  transform-origin: center bottom;
}

.carousel__item img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

.banner {
  width: 100%;
  max-width: 700px;   /* banner-print.jpg 1400px の半分 */
  height: auto;
  border-radius: 12px;
  display: block;
  margin-inline: auto;
}
.banner--top { max-width: 300px; }  /* banner-top.png 600px の半分 */

.banner-link {
  display: block;
  max-width: 300px;
  margin: 0 auto 28px;
}
/* プリントシールのバナーは大きく使う */
.banner-link--print {
  max-width: 700px;
  margin: 20px auto 0;
}

/* カルーセル（SP） */
.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item { flex: 0 0 100%; scroll-snap-align: center; }
.carousel__dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: #e6c9d3; border: 0; padding: 0; }
.carousel__dot[aria-selected="true"] { background: var(--pink); }

/* --------------------------------------------------
   7. reveal（スクロールで出す）  → 切り出し候補
   -------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* バリエーション */
[data-reveal="fade"]      { transform: none; }
[data-reveal="left"]      { transform: translateX(-40px); }
[data-reveal="right"]     { transform: translateX(40px); }
[data-reveal="pop"]       { transform: translateY(28px) scale(0.96); transition-timing-function: var(--ease-pop); }
[data-reveal="zoom"]      { transform: scale(0.94); }

/* --------------------------------------------------
   8. hero 初期演出（読み込み直後 / 1.2秒以内に収める）
   -------------------------------------------------- */
.hero [data-hero] {
  opacity: 0;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
.hero__sky[data-hero]   { transform: none; }
.hero__stars[data-hero] { transform: none; }
.hero__moon[data-hero]  { transform: scale(0.94); }
.hero__logos[data-hero],
.hero__badge[data-hero],
.hero__title[data-hero],
.hero__date[data-hero],
.hero__price[data-hero] { transform: translateY(14px); }
.hero__plush[data-hero] { transform: translateY(38px) scale(0.96); transition-timing-function: var(--ease-pop); transition-duration: 0.66s; }

.hero.is-ready [data-hero] { opacity: 1; }
.lane[data-hero] { transform: none; }  /* 雲は最初から流れている */
.hero .lane[data-hero] { transition-duration: 1.1s; }
.hero.is-ready .hero__moon[data-hero]  { transform: scale(1); }
.hero.is-ready .hero__logos[data-hero],
.hero.is-ready .hero__badge[data-hero],
.hero.is-ready .hero__title[data-hero],
.hero.is-ready .hero__date[data-hero],
.hero.is-ready .hero__price[data-hero] { transform: translateY(0); }
.hero.is-ready .hero__plush[data-hero] { transform: translateY(0) scale(1); }

}

.sp-only { display: inline; }

/* --------------------------------------------------
   9. PC（1280〜想定）
   背景はフルブリード、中身は中央max幅で頭打ち＝拡大しない
   -------------------------------------------------- */
@media (min-width: 900px) {
  .sp-only { display: none; }
  .heading { font-size: 32px; }
  .heading--fit { font-size: 32px; white-space: normal; }
  .heading--sales { font-size: 32px; }
  .sec--sales .spec-row__label { flex-basis: 132px; }
  .spec-row__label--wide { flex-basis: 132px; }
  .heading--lg { font-size: 48px; }
  .badge-pill--lg { font-size: 21px; }
  .sales-lead__label { font-size: 18px; }
  .sales-lead__text { font-size: 20px; }
  .brand-copy { font-size: 16px; }
  .sales-note { font-size: 14px; }

  /* ---- hero（Figma: 1280×720） ---- */
  .hero { min-height: 720px; padding-top: 0; }
  .hero__content { width: 560px; max-width: 92%; margin-top: 63px; }
  .hero__plush { width: 672px; max-width: 92%; margin: 22px auto 0; margin-left: auto; transform: none; }
  .brand-logo { width: 396px; }
  .chara-list { display: grid; }
  .hero__moon { width: 238px; top: 32px; right: 76px; }        /* Figma: 238px / x966 */
  .hero__logos img { width: 462px; max-width: 100%; }           /* Figma: 462×161 */
  .hero__title img { width: 560px; max-width: 100%; }           /* Figma: content幅560 */
  .hero__date { font-size: 15px; }
  .hero__price { font-size: 20px; }
  .hero__plush { width: 672px; max-width: 92%; margin-top: 22px; } /* Figma: 672px */
  /* 雲レーン：Figmaの高さ帯（y507〜584）に合わせる */
  .lane--back  { top: 445px; }
  .lane--mid   { top: 495px; }
  .lane--front { top: 540px; }
  .lane--back img  { width: 190px; opacity: 0.50; }
  .lane--mid img   { width: 280px; opacity: 0.68; }
  .lane--front img { width: 400px; opacity: 0.88; }
    
  /* ---- セクション余白（Figma実測） ---- */
  .sec--brand    { padding: 150px 0 56px; }
  .sec--character{ padding: 64px 0 24px; }
  .sec--gallery { padding: 40px 0 72px; }
  .sec--spec     { padding: 40px 0 64px; }
  .sec--gallery  { padding: 40px 0 72px; }
  .sec--sales    { padding: 64px 0; }
  .sec--print    { padding: 64px 0 100px; }

  .brand-logo { width: 396px; }

  /* ---- キャラ3列（Figma: cards-row 1040 / gap20 / card250） ---- */
  .chara-list {
    display: grid;
    grid-template-columns: repeat(3, 250px);
    justify-content: center;
    gap: 20px;
  }
  .chara-card { margin-bottom: 0; padding: 16px; gap: 14px; }
  .chara-card__img { width: 250px; max-width: 250px; }
  .chara-card__name { font-size: 19px; }

  /* ---- 販売情報：縦の余白に余裕（Figma gap 31px） ---- */
  .sec--sales .inner > * { margin-top: 0; margin-bottom: 0; margin-inline: auto; }
  .sec--sales .inner > * + * { margin-top: 31px; }
  .sales-lead { padding: 19px 18px; }
  .sec--sales .card { padding: 19px 18px; }
  .cta { max-width: 360px; padding: 15px 24px; margin-top: 0; line-height: 1.5; }
  .sales-note { margin-top: 0; }
  .sec--sales .notes { margin-top: 0; line-height: 1.95; }
  .sec--sales .cta + .notes { margin-top: 40px; }

  .banner-link { max-width: 300px; }
  .banner-link--print { max-width: 700px; }

  /* ---- イメージ：PCは横3列（カルーセル不採用） ---- */
  .carousel__track {
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1040px;
    margin-inline: auto;
  }
  .carousel__item { flex: initial; }
  .carousel__dots { display: none; }

  /* ---- 商品仕様 ---- */
  .sec--spec .card { padding: 4px 18px; margin-top: 22px; }
  .spec-row { padding: 17px 0; }
}

/* --------------------------------------------------
   10. 動きを減らす設定への配慮
   -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal],
  .hero [data-hero] {
    transition-duration: 0.2s !important;
    transition-delay: 0s !important;
    transform: none !important;
  }
  .hero.is-ready .cloud { animation: none !important; }
  .cta { transition: none; }
}