/* ============================================================
   09-stamp.css
   スタンプラリー
   読み込み順は index.html の <link> の並びが正。順番を変えると見た目が変わる。
   ============================================================ */
#stamp{
  background:var(--yellow);color:var(--navy-deep);overflow:hidden;
  border-top:6px solid var(--navy);border-bottom:6px solid var(--navy);
}
#stamp::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(22,38,92,.09) 1.6px,transparent 1.6px);
  background-size:18px 18px;pointer-events:none;
}
#stamp .section-inner{position:relative;z-index:2}
#stamp .mp-tag{color:rgba(17,26,60,.62)}
#stamp .mp-tag::before{
  background:
    linear-gradient(90deg,var(--navy) 1.5px,transparent 1.5px) 0 0/11px 8px repeat-x,
    linear-gradient(var(--navy),var(--navy)) 0 100%/100% 1.5px no-repeat;
}
#stamp .section-title{font-family:var(--font-round);color:var(--navy);font-size:clamp(1.9rem,4.6vw,2.9rem);letter-spacing:.06em}
/* タイトル脇のハートのハンコ（押した直後のような傾き） */
.heart-stamp{
  display:inline-block;vertical-align:middle;
  width:1.62em;margin-left:.24em;
  transform:rotate(-6deg) translateY(-.02em);
  transform-origin:50% 50%;
}
.heart-stamp svg{width:100%;height:auto;display:block;overflow:visible}
#stamp .section-title em{color:var(--red)}
#stamp .section-lead{color:rgba(17,26,60,.72)}

.stamp-top{margin-top:38px;display:grid;grid-template-columns:.86fr 1.14fr;gap:36px;align-items:center}
/* ポスター＋左上のスタンプ（margin-top はスタンプの上へのはみ出し分の逃げ） */
.poster{position:relative;margin:8% 0 0}
.poster img{
  border-radius:16px;border:5px solid var(--white);
  box-shadow:0 26px 50px rgba(22,38,92,.34);transition:transform .3s;
}
.poster:hover img{transform:rotate(-1.2deg) scale(1.015)}
.poster-stamp{
  position:absolute;left:-4%;top:-9.3%;width:26%;z-index:3;
  filter:drop-shadow(0 10px 20px rgba(22,38,92,.32));
  transition:transform .35s ease;
  pointer-events:none;
}
.poster:hover .poster-stamp{transform:scale(1.05)}
.poster-stamp svg{width:100%;height:auto;display:block}

/* 参加方法の見出し */
.steps{display:grid;gap:18px}
.steps-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:2px}
.steps-head h3{
  margin:0;font-family:var(--font-round);font-weight:900;
  font-size:clamp(1.5rem,3.2vw,1.9rem);color:var(--navy);letter-spacing:.1em;
  position:relative;padding-bottom:10px;
}
.steps-head h3::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:7px;
  background:
    linear-gradient(90deg,var(--navy) 1.6px,transparent 1.6px) 0 0/11px 7px repeat-x,
    linear-gradient(var(--red),var(--red)) 0 100%/100% 3px no-repeat;
}
.steps-head .en{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.24em;
  color:rgba(17,26,60,.5);
}

.step{
  background:var(--white);border-radius:18px;padding:22px 24px 22px 76px;position:relative;
  box-shadow:0 12px 26px rgba(22,38,92,.16);
}
.step .n{
  position:absolute;left:20px;top:22px;width:40px;height:40px;border-radius:50%;
  background:var(--navy);color:var(--yellow);
  font-family:var(--font-mono);font-weight:700;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
}
.step h4{margin:0 0 6px;font-family:var(--font-round);font-weight:900;font-size:1.14rem;color:var(--navy);letter-spacing:.04em}
.step p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.step p .em{color:var(--red);font-weight:700}
.step p .voice{display:inline-block;color:var(--ink-soft);margin-left:.2em}

.prize{
  margin-top:34px;background:var(--navy);color:var(--white);border-radius:var(--radius);
  padding:38px 44px;display:grid;grid-template-columns:1fr 180px;gap:34px;align-items:center;
  box-shadow:0 24px 50px rgba(22,38,92,.3);position:relative;overflow:hidden;
}
.prize::after{content:'';position:absolute;left:-8%;bottom:-60%;width:44%;aspect-ratio:1;border-radius:50%;border:2px dashed rgba(245,197,24,.3)}
.prize-copy{position:relative;z-index:2;min-width:0}
.prize-label{
  display:inline-block;position:relative;z-index:2;
  font-family:var(--font-round);font-weight:900;letter-spacing:.16em;
  font-size:clamp(1.9rem,4.4vw,2.6rem);color:var(--yellow);line-height:1.1;
  padding-bottom:11px;margin-bottom:12px;
}
.prize-label::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:7px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.75) 1.6px,transparent 1.6px) 0 0/11px 7px repeat-x,
    linear-gradient(var(--yellow),var(--yellow)) 0 100%/100% 3px no-repeat;
}
.prize h3{margin:0 0 12px;font-weight:900;font-size:1.16rem;color:var(--white);letter-spacing:.04em;position:relative;z-index:2}
.prize p{margin:0;color:#c5cdf0;font-size:.92rem;position:relative;z-index:2}
.prize .tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:2}
.prize .tags span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px 14px;font-size:.8rem}
/* メティ：まわりをふんわり白く光らせる */
.prize-meti-wrap{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.prize-meti-wrap::before{
  content:'';position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);
  width:min(400px,116%);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,255,255,.60) 0%,
    rgba(255,255,255,.52) 26%,
    rgba(255,255,255,.34) 44%,
    rgba(255,255,255,.14) 60%,
    rgba(255,255,255,.04) 72%,
    rgba(255,255,255,0) 82%);
}
.prize-meti{
  width:100%;max-height:240px;object-fit:contain;
  position:relative;z-index:2;cursor:pointer;
  transform-origin:bottom center;
  filter:drop-shadow(0 14px 26px rgba(22,38,92,.28));
}
.prize-meti.punipuni{animation:punipuni .7s ease-in-out}
@keyframes punipuni{0%{transform:scale(1,1)}30%{transform:scale(1.12,.88)}45%{transform:scale(.9,1.1)}60%{transform:scale(1.05,.96)}100%{transform:scale(1,1)}}
/* TAP! ── メティの右上に、囲いなしの文字だけで置く */
.puni-hint{
  position:absolute;right:-2px;top:-24px;z-index:3;
  color:var(--yellow);
  font-family:var(--font-mono);font-weight:700;font-size:.84rem;letter-spacing:.14em;
  text-shadow:0 2px 10px rgba(11,23,64,.6);
  animation:tapPulse 2.6s ease-in-out infinite;
  pointer-events:none;
}
/* 回転を保ったまま拡縮する（rotate を書かないと傾きが戻ってしまう） */
@keyframes tapPulse{0%,100%{transform:rotate(12deg) scale(1)}50%{transform:rotate(12deg) scale(1.08)}}