/* =========================
       Root palette / component tokens
       ========================= */

:root {
  /* Palette */
  --c-sky: #008FB5;
  --c-deep-blue: #2A3476;
  --c-deep-green: #145044;
  --c-cta: #F6FF00;
  --c-ink: #243E4E;
  --c-white: #ffffff;
  --c-pailwhite: #E0EBEE;

  /* Typography */
  --ff-gothic: "Zen Kaku Gothic Antique", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mincho: "Zen Old Mincho", "Noto Serif JP", serif;

  /* Layout */
  --container: 1080px;
  --text-wide: 920px;
  --radius-lg: 24px;
  --radius-md: 16px;

  --frame: 100px;

  /* Components */
  --btn-bg: var(--c-cta);
  --btn-fg: var(--c-ink);

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 700ms;

}

/* =========================
       Base
       ========================= */
* {
  box-sizing: border-box;
}

html,
body {
  height: fit-content;
  scroll-behavior: smooth;
}


html {
  background: linear-gradient(180deg,
      var(--c-sky) 0%,
      var(--c-deep-blue) 45%,
      var(--c-deep-green) 100%);
}

body {
  margin: 0;
  color: var(--c-white);
  font-family: var(--ff-gothic);
  overflow-x: hidden;
  padding: 25px;
  box-sizing: border-box;
  position: relative;
  background: transparent;
  /* ←重要 */
}


body::before {
  content: "";
  position: fixed;
  inset: 0;
  border: 25px solid var(--c-white);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 99;
}


body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* SVGを4点配置 */
  background:
    url("../img/kazari.svg") top center no-repeat,
    url("../img/kazari_t.svg") center right no-repeat,
    url("../img/kazari.svg") bottom center no-repeat,
    url("../img/kazari_t.svg") center left no-repeat;

  /* 枠の内側にきちんと乗せる */
  background-size: 280px auto,
    auto 280px,
    280px auto,
    auto 280px;
  padding: 25px;
  box-sizing: border-box;
  z-index: 100;
}





/* 上下の白い四角（枠の外側を埋める帯） */
body::marker {
  content: "";
}

/* 何もしない：誤爆防止 */

/* 上帯 */
body::before2 {
  content: "";
}

/* 何もしない：誤爆防止 */

html::before,
html::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  background: var(--c-white);
  pointer-events: none;
  z-index: 50;
  /* 枠(99/100)より必ず上 */
}

/* 上：枠の外側まで白で埋める */
html::before {
  top: -100px;
  height: calc(env(safe-area-inset-top, 0px) + var(--frame));
}

/* 下：枠の外側まで白で埋める */
html::after {
  bottom: -100px;
  height: calc(env(safe-area-inset-bottom, 0px) + var(--frame));
}

html::before {
  height: 100px;
}

html::after {
  height: 100px;
}




a {
  color: inherit;
  text-decoration: none;
}

img {
  width: 100%;
  display: block;
}

.container {
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

.stack {
  display: grid;
}

/* Scroll fade-in（rich & slow） */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  /* ← 移動量を大きく */
  filter: blur(18px);
  /* ← ぼかし強め */
  transition:
    opacity 1200ms cubic-bezier(.22, 1, .36, 1),
    transform 1400ms cubic-bezier(.22, 1, .36, 1),
    filter 1600ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform, filter;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* =========================
   Ambient bubbles（まばら・超スロー）
   ========================= */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient .bubbles {
  position: absolute;
  top: 0;
  bottom: -50%;
  background-size: contain;
  will-change: transform;
}

/* 左右 */
.ambient .bubbles.l {
  left: 5px;
  background-image: url("../img/awa01.png");
}

.ambient .bubbles.r {
  right: 5px;
  background-image: url("../img/awa02.png");
}

/* サイズ差を広げる */
.ambient .bubbles.slow {
  width: 110px;
}

.ambient .bubbles.fast {
  width: 70px;
}

/* 速度：かなりゆっくり */
.ambient .bubbles.slow {
  animation: bubblesUp 42s linear infinite;
}

.ambient .bubbles.fast {
  animation: bubblesUp 26s linear infinite;
}

/* 位相を大きくズラす（同時に見えない） */
.ambient .bubbles.l.slow {
  animation-delay: -18s;
  opacity: .35;
}

.ambient .bubbles.l.fast {
  animation-delay: -32s;
  opacity: .5;
}

.ambient .bubbles.r.slow {
  animation-delay: -25s;
  opacity: .25;
}

.ambient .bubbles.r.fast {
  animation-delay: -9s;
  opacity: .35;
}

/* 縦方向のみ */
@keyframes bubblesUp {
  0% {
    transform: translateY(50%);
  }

  100% {
    transform: translateY(-90%);
  }
}



/* =========================
       Hero
       ========================= */
header.hero {
  position: relative;
  z-index: 1;
  padding: 20px 0;
}

.heroGrid {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: clamp(18px, 4vw, 40px);
  align-items: center;
}



.bookWrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

/* 共通 */
.bookWrap .bookImg {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--c-white);
  transition:
    transform 300ms ease,
    z-index 0s linear 150ms;
}

/* 手前 */
.bookWrap .bookImg.front {
  position: relative;
  z-index: 2;
}

/* 後ろ（斜め＋右にずらす） */
.bookWrap .bookImg.back {
  position: absolute;
  top: 68px;
  right: -130px;
  /* チラ見せ量（横） */
  z-index: 1;
  transform: scale(0.8) rotate(6deg);
  /* 斜め角度 */
  transform-origin: center;
}

.bookWrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* ← 縦も中央にする場合 */
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: var(--c-white);
  border-radius: 50%;
  z-index: -1;
  /* 背後に敷く */
}

.bookWrap:hover .bookImg.front {
  z-index: 1;
  transform: scale(1);
}

.bookWrap:hover .bookImg.back {
  z-index: 2;
  transform: scale(0.8) rotate(0deg);
}

/* 背景の透過画像（例） */
.heroBg {
  position: fixed;
  background: url(../img/back.png) center / cover no-repeat;
  top: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  max-width: 540px;
  height: 100%;
  max-height: 860px;
}

.heroRight {
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
}

.title {
  font-family: var(--ff-gothic);
  font-weight: 800;
  letter-spacing: .05em;
  font-size: clamp(24px, 3.25vw, 36px);
  margin: 0;
  width: 70%;
}


.title_r {
  text-align: right;
}

.title_l {
  text-align: left;
}

.kakko {
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  font-feature-settings: "palt";
  font-weight: 100;
}

.logoImg {
  width: min(400px, 60%);
}

.subTitle {
  margin: 0;
  font-family: var(--ff-gothic);
  font-weight: 700;
  letter-spacing: .15em;
  font-size: clamp(14px, 2.5vw, 28px);
}

.tokutenTitle {
  display: inline-block;
  background: var(--c-pailwhite);
  padding: 8px 16px;
  border-radius: 12px;
  color: var(--c-sky);
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 600;
  font-family: var(--ff-gothic);
  line-height: 1.25;
  text-align: center;
}

.limited {
  margin-top: 10px;
  font-family: var(--ff-mincho);
  font-weight: 500;
  color: var(--c-cta);
  letter-spacing: .05em;
  font-size: clamp(14px, 2.5vw, 28px);
}

.now {
  font-family: var(--ff-gothic);
  font-weight: 700;
  color: var(--c-cta);
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1;
  margin-bottom: 15px;
}

.limited2 {
  font-family: var(--ff-mincho);
  color: var(--c-cta);
  font-size: clamp(12px, 1.75vw, 18px);
  line-height: 1;
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(280px, 80vw, 480px);
  height: clamp(45px, 14vw, 65px);
  padding: 14px 26px;
  border-radius: 5px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: clamp(24px, 3.5vw, 40px);
  letter-spacing: .05em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.btn:hover {
  background: unset;
  color: var(--btn-bg);
  border-color: var(--btn-fg);
  border: 2px solid var(--c-cta);
}




/* =========================
       Author / Design
       ========================= */
section.meta {
  position: relative;
  z-index: 1;
  padding: 22px 0 8px;
  text-align: center;
}

.author {
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 36px);
  margin: 0;
  letter-spacing: .05em;
}

.credits {
  letter-spacing: .1em;
}

/* =========================
       Description
       ========================= */
section.desc {
  position: relative;
  z-index: 1;
  padding: 18px 0 44px;
}

.descBox {
  width: min(var(--text-wide), 100%);
  margin-inline: auto;
  font-family: var(--ff-mincho);
  font-size: clamp(12px, 1.5vw, 16px);
  letter-spacing: 0.05em;
  line-height: 32px;
  display: grid;
  gap: 20px;
  text-align: justify;
  padding: 10px;
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
}



/* =========================
       Wave separator (揺らめき)
       ========================= */


.waveSep,
.waveSep2 {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: clamp(150px, 40vw, 700px);
  margin: clamp(-300px, -10vw, 0px) auto clamp(-300px, -10vw, 0px);
  z-index: -1;
  display: flex;
}

.waveImg {
  width: 100%;
  max-width: 1920px;
  margin: auto;
}




/* =========================
       Features (本書の特徴)
       ========================= */
section.features {
  position: relative;
  z-index: 1;
  padding: 22px 0 34px;
}

.sectionTitle {
  font-family: var(--ff-mincho);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: clamp(22px, 2.6vw, 34px);
  margin: 0 0 14px;
  text-align: center;
}

/* featureBlock をグリッドコンテナとして活用 */
.featureBlock {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-rows: 30px auto;
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
  margin-top: 16px;
  position: relative;
}

.featureBlock.reverse {
  grid-template-columns: 30% 70%;
  margin-top: 50px;
}

.featureBlock .stack {
  grid-area: 2 / 1 / 3 / 2;
}



/* タイトルは2カラムをまたいで中央へ */
.featureBlockTitle {
  grid-area: 1 / 1 / 2 / 3;
  width: clamp(320px, 80vw, 560px);
  text-align: center;
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: clamp(14px, 2vw, 24px);
  letter-spacing: .05em;
  margin: 0 auto;
  color: var(--c-ink);
  background-color: var(--c-pailwhite);
  border-top: 2px solid var(--c-ink);
  border-bottom: 2px solid var(--c-ink);
}

.featureBlockTitle span {
  font-weight: 400;
}


.featureCover {
  width: 80%;
  grid-area: 2 / 2 / 3 / 3;
  margin: auto;
}

.featureCover img {
  width: 100%;
  height: auto;
}

.featureBlock.reverse .stack {
  grid-area: 2 / 2 / 3 / 3;

}

.reverse .featureCover {
  grid-area: 2 / 1 / 3 / 2;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--c-white);
  backdrop-filter: blur(8px);
}



.card {
  display: grid;
  grid-template-columns: 1fr 88px 45px;
  grid-template-areas:
    "kicker thumb arrow"
    "txt    thumb arrow";
  column-gap: 16px;
  row-gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-white);
  cursor: pointer;
  background: transparent;
  transition: background-color 520ms cubic-bezier(.16, 1, .3, 1);
}

.card:hover {
  background: rgba(255, 255, 255, .08);
}

/* POINT：黄色、大きめ */
.card .kicker {
  grid-area: kicker;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--c-cta);
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1;
}

/* テキスト：明朝・白・大きめ・2行想定 */
.card .txt {
  grid-area: txt;
  font-family: var(--ff-mincho);
  color: var(--c-white);
  font-size: clamp(14px, 2.5vw, 28px);
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
}

/* 画像：右の四角 */
.card .thumb {
  width: 180px;
  grid-area: thumb;
  align-self: center;
  justify-self: end;
  position: relative;
}

.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 矢印コンテナ（基準点） */
.card .arrow {
  grid-area: arrow;
  align-self: center;
  justify-self: end;

  position: relative;
  width: 16px;
  height: 16px;
  transition: transform 520ms cubic-bezier(.16, 1, .3, 1);
}

/* 斜め2本線 */
.card .arrow::before,
.card .arrow::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;

  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, .9);

  transform-origin: right center;
}

/* 上側の線 */
.card .arrow::before {
  transform: translateY(0px) rotate(45deg);
}

/* 下側の線 */
.card .arrow::after {
  transform: translateY(0px) rotate(-45deg);
}

/* ホバーで右にスッ */
.card:hover .arrow {
  transform: translateX(6px);
}





/* =========================
       Reserve CTA (repeat)
       ========================= */
.ctaRow {
  text-align: center;
  padding: 40px 0;
}

/* =========================
       装幀のひみつ（丸/横長丸 -> hoverで角丸四角 + 白レイヤーに説明）
       ========================= */

section.secret {
  position: relative;
  z-index: 1;
  padding: 26px 0 34px;
}

.secretGrid {
  width: min(var(--container), calc(100% - 25px));
  margin-inline: auto;
  justify-items: center;
}

.secretTitle {
  font-family: var(--ff-mincho);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: clamp(22px, 2.6vw, 34px);
  margin: 0 0 20px;
  text-align: center;
}

.shapeBoard {
  width: min(1020px, 100%);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}


.shape {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition:
    border-radius 620ms cubic-bezier(.16, 1, .3, 1),
    transform 620ms cubic-bezier(.16, 1, .3, 1);
  isolation: isolate;
}

.shape .cap {
  position: absolute;
  inset: 0;
  display: flex;
  place-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: var(--c-ink);
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: clamp(10px, 2vw, 16px);
  line-height: 1.5;
  opacity: 0;
  transition: opacity 520ms cubic-bezier(.16, 1, .3, 1);
  z-index: 2;
}

.shape .cap span {
  font-size: clamp(9px, 1.25vw, 14px);
}

.shape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .85);
  opacity: 0;
  transition: opacity 560ms cubic-bezier(.16, 1, .3, 1);
  z-index: 1;
}

.shape:hover {
  border-radius: 22px;
}


.shape:hover::after {
  opacity: 1;
}

.shape:hover .cap {
  opacity: 1;
}

.circle {
  aspect-ratio: 1 / 1;
  border-radius: 999px;
}

.pill {
  aspect-ratio: 25 / 12;
  border-radius: 999px;
}

.shapeBoard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.sec1 {
  grid-area: 1 / 1 / 2 / 2;
}

.sec2 {
  grid-area: 1 / 2 / 2 / 4;
}

.sec3 {
  grid-area: 1 / 4 / 2 / 5;
}

.sec4 {
  grid-area: 2 / 1 / 3 / 3;
}

.sec5 {
  grid-area: 2 / 3 / 3 / 5;
}

.sec6 {
  grid-area: 3 / 1 / 4 / 2;
}

.sec7 {
  grid-area: 3 / 2 / 4 / 3;
}

.sec8 {
  grid-area: 3 / 3 / 4 / 5;
}




/* =========================
       Yellow deadline / 9 buttons
       ========================= */
section.deadline {
  position: relative;
  z-index: 1;
  padding: 26px 0 38px;
  color: #0f2d2e;
}

.deadlineBox {
  padding: 20px 0px;
}

.deadlineBox .line1 {
  font-family: var(--ff-mincho);
  font-weight: 700;
  color: var(--c-cta);
  text-align: center;
  font-size: clamp(16px, 1.5vw, 28px);
  letter-spacing: .1em;
}

.deadlineBox .line2 {
  font-family: var(--ff-mincho);
  font-weight: 800;
  color: var(--c-cta);
  text-align: center;
  font-size: clamp(18px, 2.5vw, 32px);
  letter-spacing: .1em;
}

.deadlineBox .line3 {
  text-align: center;
  font-family: var(--ff-gothic);
  font-weight: 600;
  font-size: clamp(24px, 3.5vw, 40px);
  color: var(--c-white);
  letter-spacing: .1em;
  margin: 20px 0;
  text-shadow: 0 10px 18px rgba(20, 80, 68, .45);
}

.shopGrid {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(5px, 2vw, 20px);
  width: 100%;
  justify-content: center;
}



.shopBtn {
  width: 48%;
  max-width: 200px;
  height: 45px;
  border-radius: 100px;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  background-color: var(--c-white);
  overflow: hidden;

  opacity: 1;
  transition: opacity 200ms ease;
}

/* hover中は透明を維持 */
.shopBtn:hover {
  opacity: 0.85;
}

/* 画像は通常状態 */
.shopBtn img {
  width: 80%;
  object-fit: contain;
  filter: blur(0);
}

/* hover開始時に一度だけぼかし → 戻る */
.shopBtn:hover img {
  animation: img-blur-once 600ms ease-in-out;
}

/* ぼかし往復 */
@keyframes img-blur-once {
  0% {
    filter: blur(0);
  }

  50% {
    filter: blur(3px);
  }

  100% {
    filter: blur(0);
  }
}



/* =========================
       Book info
       ========================= */

section.info {
  width: min(var(--text-wide), 100%);
  position: relative;
  margin-inline: auto;
  z-index: 1;
  padding: 18px 0 46px;

}

.info .container {
  backdrop-filter: blur(8px);
}

.infoCard {
  padding: 18px;
  border-top: 2px solid var(--c-white);
  border-bottom: 2px solid var(--c-white);
}

.infoTitle {
  font-family: var(--ff-gothic);
  font-weight: 900;
  font-size: clamp(14px, 2vw, 24px);
  letter-spacing: .08em;
  line-height: 1.25;
  padding: 10px 0;
  text-align: center;
  border-top: 2px solid var(--c-white);

}

.infosubTitle {
  font-weight: 700;
  font-size: clamp(12px, 1.75vw, 18px);
}

.infoGrid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 40px;
  align-items: start;
}



.infoCover {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 10px;
  align-items: end;
  box-sizing: border-box;
}

.infoCover img {
  border: 1px solid var(--c-white);
}

.infoText {
  font-family: var(--ff-gothic);
  font-size: clamp(12px, 1.5vw, 16px);
  line-height: 1.5;
  letter-spacing: .02em;
  margin: 0;
  opacity: .95;
}

.infoTextbold {
  font-size: clamp(16px, 1.75vw, 20px);
  font-weight: 600;
}

/* =========================
       Footer
       ========================= */
footer {
  position: relative;
  z-index: 1;
  padding: 30px 0 10px;
  text-align: center;
  opacity: .92;
  font-size: clamp(8px, 1vw, 10px);
}

footer .container {
  display: flex;
  row-gap: 5px;
  flex-direction: column;
}

#shogakukan {
  padding: 10px;
}

#shogakukan a {
  color: var(--c-white);
  padding: 4px 6px;
  font-size: 0.825rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--c-white);
}



/* =========================
   Floating blob CTA (右下追従)
   ========================= */
.floatCta {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 50;
  width: 30%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  border: 0;
  cursor: pointer;
  background: transparent;
  padding: 14px 10px;
  color: var(--c-deep-green);
  font-family: var(--ff-gothic);
  font-weight: 600;
  letter-spacing: .05em;
  font-size: clamp(18px, 2.5vw, 32px);
  line-height: 1.25;
  filter: drop-shadow(0 0 0 rgba(20, 80, 68, .55));
  overflow: visible;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}

.floatCta.is-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* 背景の黄色い丸だけを動かす */
.floatCta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-cta);

  box-shadow:
    0 0 0 rgba(0, 0, 0, .22),
    0 0 0 3px rgba(20, 80, 68, 0) inset;

  animation: blobFloat 4.6s ease-in-out infinite;
  will-change: transform, border-radius;
  z-index: 0;
}

/* テキストは固定して前面 */
.floatCta span {
  display: block;
  position: relative;
  z-index: 1;
}

/* 既存のblobFloatをそのまま利用 */
@keyframes blobFloat {
  0% {
    border-radius: 60% 40% 55% 45% / 45% 55% 50% 50%;
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    border-radius: 48% 52% 40% 60% / 55% 45% 60% 40%;
    transform: translate(-4px, -6px) rotate(-2deg);
  }

  50% {
    border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%;
    transform: translate(3px, -10px) rotate(2deg);
  }

  75% {
    border-radius: 42% 58% 48% 52% / 60% 40% 55% 45%;
    transform: translate(-2px, -6px) rotate(-1deg);
  }

  100% {
    border-radius: 60% 40% 55% 45% / 45% 55% 50% 50%;
    transform: translate(0, 0) rotate(0deg);
  }
}

/* ふわっと反転用のトランジション */
.floatCta::before {
  transition:
    background-color 260ms ease,
    box-shadow 260ms ease;
}

.floatCta span {
  transition: color 260ms ease;
}

/* hover：色反転 */
.floatCta:hover::before {
  background: unset;
  box-shadow:
    0 0 0 rgba(0, 0, 0, .22),
    0 0 0 2px rgba(255, 255, 0, 1) inset;
  /* うっすら縁 */
}

.floatCta:hover span {
  color: var(--c-cta);
  /* テキストを背景色側へ */
}



/* =========================
       Modal
       ========================= */
.modal {
  display: grid;
  /* 常にgrid */
  place-items: center;
  position: fixed;
  inset: 0;
  padding: 18px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(0px);
  transition: opacity 500ms var(--ease), backdrop-filter 500ms var(--ease), visibility 0s linear 500ms;
}

.modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  transition: opacity 500ms var(--ease), backdrop-filter 500ms var(--ease), visibility 0s;
}



.modalPanel {
  width: min(920px, 85vw);
  height: min(740px, 80vh);

  border-radius: 22px;
  color: var(--c-ink);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  position: relative;

  /* 追加：初期状態（閉じている） */
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  filter: blur(6px);
  transition:
    opacity 260ms var(--ease),
    transform 260ms var(--ease),
    filter 260ms var(--ease);


  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  margin: auto;
}

/* open時だけ最終状態に */
.modal.open .modalPanel {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.modalInner {
  width: 100%;
  display: grid;
  height: auto;

  display: flex;
  flex-direction: column;
  min-height: 0;

}

.modalHead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 14px;
}

.iconBtn {
  position: relative;
  width: 60px;
  height: 60px;
  right: 10px;
  background: transparent;
  cursor: pointer;
}

.iconBtn span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 75px;
  height: 1px;
  /* 細さ */
  background: currentColor;
  /* 文字色を流用 */
  transform-origin: center;
}


.icon-close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(30deg);
}

.icon-close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-30deg);
}


.modalBody {
  padding: 16px 16px 18px;
  display: grid;
  grid-template-rows: auto auto;
  gap: 15px;
  align-items: start;

  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}


.modalBody>* {
  min-height: 0;
}



.modalBody .mImg {
  border: 1px solid var(--c-ink);
  aspect-ratio: 3 / 2;
  width: 80%;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.modalBody .mImg img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.modalBody .mText {
  font-family: var(--ff-mincho);
  font-weight: 800;
  letter-spacing: .05em;
  margin: auto;
  width: min(720px, 90%);
  min-height: 45px;
  max-height: 150px;
  overflow: hidden;
  text-align: justify;
  line-height: 2;
  font-size: clamp(12px, 1.75vw, 16px);
}

.modalHead .mhTitle {
  width: clamp(300px, 80vw, 560px);
  text-align: center;
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: clamp(14px, 2vw, 24px);
  letter-spacing: .05em;
  margin: 0 auto;
  color: var(--c-ink);
  background-color: var(--c-pailwhite);
  border-top: 2px solid var(--c-ink);
  border-bottom: 2px solid var(--c-ink);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}




.modalNav {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px 14px;
}

/* 矢印ボタン本体 */
.icon-arrow {
  position: relative;
  width: 60px;
  height: 60px;
  background: transparent;
  border: 0;
  color: var(--c-ink);
  cursor: pointer;
}

/* 2本線（共通） */
.icon-arrow::before,
.icon-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background: currentColor;
}

/* 右： ＞（頂点を左側に） */
.icon-arrow.right::before,
.icon-arrow.right::after {
  right: 50%;
  transform-origin: 100% 50%;
}

.icon-arrow.right::before {
  transform: translate(0, -50%) rotate(30deg);
}

.icon-arrow.right::after {
  transform: translate(0, -50%) rotate(-30deg);
}

/* 左： ＜（頂点を右側に） */
.icon-arrow.left::before,
.icon-arrow.left::after {
  left: 50%;
  transform-origin: 0 50%;

}

.icon-arrow.left::before {
  transform: translate(0, -50%) rotate(30deg);
}

.icon-arrow.left::after {
  transform: translate(0, -50%) rotate(-30deg);
}

/* hover（ボタン自体を動かす） */
.icon-arrow.right:hover {
  transform: translateX(6px);
}

.icon-arrow.left:hover {
  transform: translateX(-6px);
}

/* 共通：画像の高さ中央 */
#mPrev,
#mNext {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

/* 左矢印：画像の左横 */
#mPrev {
  left: 10px;
}

/* 右矢印：画像の右横 */
#mNext {
  right: 10px;
}



/* 全体
	--------------------------------- */

/* Make sure content sits above ambient */
main {
  position: relative;
  z-index: 1;
}


/* 全体
	--------------------------------- */
.PC {
  display: block;
}

.SP {
  display: none;
}


@media (max-height: 920px) {
  .modalBody .mImg {
    height: clamp(120px, 35svh, 440px);
    width: auto;
  }
}


@media (max-width: 760px) {

  .shapeBoard {
    grid-template-columns: repeat(3, 1fr);
  }

  .infoGrid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

}

@media (max-width: 920px) {

  body {
    padding: 15px;
  }

  html,
  body {
    overflow-x: clip;
    /* 横スクロール領域を作らない（推奨） */
  }

  body::before {
    border: 15px solid var(--c-white);

  }

  body::after {
    background-size: 180px auto, auto 180px, 180px auto, auto 180px;
    padding: 15px;
  }

  .container {
    width: min(var(--container), calc(100% - 25px));
  }



  #mPrev,
  #mNext {
    transform: none;
  }

  .modalNav {
    display: flex;
  }


  .bookWrap::before {
    width: 600px;
    height: 600px;
    top: -80px;
    overflow: hidden;
  }


  .bookWrap {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    max-width: 420px;
    width: 90%;
  }

  .bookWrap .bookImg {
    border: 1px solid var(--c-white);
  }

  /* 手前：5 */
  .bookWrap .bookImg.front {
    position: relative;
    width: 55.56%;
    z-index: 2;
  }

  /* 後ろ：4 */
  .bookWrap .bookImg.back {
    position: relative;
    width: 44.44%;
    top: auto;
    right: auto;
    z-index: 1;
    transform: none;
  }

  .bookWrap:hover .bookImg.front,
  .bookWrap:hover .bookImg.back {
    transform: none;
    z-index: auto;
  }


  .waveSep {
    margin: 100px 0 -180px;
  }

  .waveSep2 {
    margin: 0px 0px -100px;
  }

  .title {
    letter-spacing: 0em;
    width: 90%;
    max-width: 360px;
  }

  .tokutenTitle {
    padding: 4px 10px;
    border-radius: 4px;
  }



  .now {
    margin-bottom: 0px;
  }

  .limited {
    margin-top: 0px;
  }

  .descBox {
    line-height: 24px;
  }

  .heroGrid {
    grid-template-columns: 1fr;
  }

  /* =========================
       モーダル
       ========================= */


  .modalBody .mText {
    line-height: 1.75;

  }

  .modalHead {
    padding: 0px;
  }

  .modalBody .mImg {
    width: 90%;
    height: auto;
  }

  /* =========================
       モーダル（SP）
   ========================= */



  .modalBody {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: 80px;
    top: 50px;
    position: relative;
  }

  .modalBody .mImg {
    width: 90%;
    margin: 0 auto;
  }

  .modalBody .mImg img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .modalBody .mText {
    line-height: 1.75;
    margin: 0 auto;
  }

  .modalHead {
    padding: 0;
  }

  .modalHead .mhTitle {
    top: 70px;
    width: 90%;
    font-size: clamp(14px, 4vw, 20px);
  }

  .modalNav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    z-index: 10;
    height: 150px;
  }


  .iconBtn {
    right: 20px;
    top: 5px;
  }



  /* =========================
       特長
       ========================= */

  .card {
    grid-template-columns: 1fr 110px 15px;
    padding: 14px 0;
    column-gap: 12px;
  }

  .card .thumb {
    width: 110px;
  }

  .card .arrow::before,
  .card .arrow::after {
    right: 10px;
    width: 15px;
  }


  .card .txt {
    -webkit-line-clamp: 3;
  }

  .featureBlock,
  .featureBlock.reverse {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .featureBlock .stack,
  .featureBlock.reverse .stack,
  .featureBlock>*,
  .featureBlock.reverse>* {
    grid-area: auto;
  }

  .featureBlockTitle {
    order: 1;
  }

  .featureCover {
    width: 30%;
    margin: auto;
    order: 2;
  }

  .stack {
    order: 3;
  }

  /* =========================
      装幀
       ========================= */
  .shapeBoard {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto auto;
  }

  .shape:hover {
    border-radius: 16px;
  }

  .sec1 {
    grid-area: 1 / 1 / 2 / 2;
  }

  .sec2 {
    grid-area: 1 / 2 / 2 / 4;
  }

  .sec3 {
    grid-area: 2 / 3 / 3 / 4;
  }

  .sec4 {
    grid-area: 2 / 1 / 3 / 3;
  }

  .sec5 {
    grid-area: 3 / 2 / 4 / 4;
  }

  .sec6 {
    grid-area: 3 / 1 / 4 / 2;
  }

  .sec7 {
    grid-area: 4 / 1 / 5 / 1;
  }

  .sec8 {
    grid-area: 4 / 2 / 5 / 4;
  }


  .infoCard {
    padding: 10px;
  }

  .infoCover {

    width: 80%;
    margin: auto;
  }

  footer {

    padding: 70px 0 120px;
  }

  /* 全体
	--------------------------------- */
  .PC {
    display: none;
  }

  .SP {
    display: block;
  }

}





@keyframes parallax-small-anim {
  from {
    transform: translateY(-200px);
    filter: blur(2px);
    opacity: .9;
  }

  to {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

.small {
  animation: parallax-small-anim linear;
  animation-timeline: scroll();
  animation-range: entry 0% exit 100%;
  will-change: transform, filter;
}




@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}