@charset "utf-8";

/* =========================================================
   pop.css — 全体ポップ版（index_02.html 専用）
   水中グラデをやめ、チラシのカラーブロック＋波区切りに一新。
   style.css / hero_chirashi.css の後に読み込む。
   ========================================================= */

/* 固定の水中背景は使わない（カラーブロックへ） */
.ocean-bg, .seabed { display: none !important; }
body { background: #d4eefb; }

/* ---- セクションをカラーバンドに ---- */
.section { overflow: hidden; padding: clamp(3rem, 7vw, 5rem) 0; }
.section > .inner { position: relative; z-index: 2; }
.intro    { background: #d4eefb; }
.quiz     { background: #eef8dd; }
.themes   { background: #d4eefb; }
.schedule { background: #fff; }
.entry    { background: #d4eefb; }

/* ---- 波の区切り（HTMLに挿入した .wsep） ---- */
.wsep { display: block; width: 100%; height: clamp(42px, 5.5vw, 74px); margin: -1px 0; }

/* ---- コンセプトの比較カード解説文は左寄せ（見出し・バッジ・まとめ文は中央） ---- */
.intro .compare__card p { text-align: left; }

/* ---- 見出し：黄色ピルの英字ラベル＋大きめ＋黄色ハイライト ---- */
.sec-head .en {
  display: inline-block;
  background: #fff;
  color: #f39a00;
  padding: 0.34rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(11, 84, 166, 0.12);
  letter-spacing: 0.14em;
}
.sec-head h2 { font-size: clamp(1.85rem, 5vw, 3rem); }
.mark { background: linear-gradient(transparent 54%, #ffe14d 54%); }

/* ---- パネル/カードはソリッド白で明快に（ブラー無効） ---- */
.quiz__card, .entry__wrap, .timeline__step, .compare__card.good, .intro__note {
  backdrop-filter: none !important;
}
.quiz__card, .entry__wrap, .intro__note, .compare__card.good, .timeline__step {
  background: #fff;
}

/* ---- カードをポップに（白フチ＋軽い傾き） ---- */
.theme-card { border: 4px solid #fff; box-shadow: 0 14px 30px rgba(11, 84, 166, 0.18); }
.theme-card:nth-child(1) { transform: rotate(-1deg); }
.theme-card:nth-child(3) { transform: rotate(1deg); }
.theme-card:hover { transform: translateY(-8px) rotate(0); }

/* 比較カードの「これまで」もくっきり */
.compare__card.bad { background: #f4f7fa; }

/* ---- ポップイラスト（大きく・くっきり配置） ---- */
.section::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: clamp(66px, 9vw, 124px);
  height: clamp(66px, 9vw, 124px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.92;
  pointer-events: none;
  animation: floaty 7s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(11, 84, 166, 0.2));
}
.intro::after    { background-image: url("../images/shell.png");  left: 2%;  bottom: 9%;  animation-delay: .2s; }
.quiz::after     { background-image: url("../images/turtle.png"); right: 2%; top: 12%;    animation-delay: 1s; }
.themes::after   { background-image: url("../images/eel.png");    left: 2%;  top: 14%;    animation-delay: .6s; }
.schedule::after { background-image: url("../images/anchor.png"); right: 3%; bottom: 11%; animation-delay: 1.4s; }
.entry::after    { background-image: url("../images/shell.png");  right: 3%; top: 12%;    animation-delay: .9s; }

@media (max-width: 700px) {
  .section::after { width: 54px; height: 54px; opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  .section::after { animation: none; }
}