/* ============================================================
   sections.css — ABOUT / 3 REASONS / VOICE / TIMELINE / PRIZE
   ============================================================ */

/* ---------- About / diagonal photo showcase ---------- */
.about-showcase{
  background:var(--sky-bg);
  padding:0;
  display:grid;
  grid-template-columns: 1fr minmax(360px,560px) 1fr;
  align-items:stretch;
  gap:0;
  overflow:hidden;
}

.about-photo-col{
  display:flex; flex-direction:column;
  gap:16px;
}

.about-photo-item{
  aspect-ratio:16/10;
  background:repeating-linear-gradient(45deg,#d7e6fb 0,#d7e6fb 8px,#c5d9f7 8px,#c5d9f7 16px);
  display:flex; align-items:center; justify-content:center;
  color:#7d93bd; font-size:13px; text-align:center; padding:8px;
}

.about-photo-item--filled{
  padding:0;
  background:none;
}
.about-photo-item--filled img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.about-photo-left .about-photo-item{
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  margin-right:-10%;
}

.about-photo-right .about-photo-item{
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  margin-left:-10%;
}

.about-photo-left .about-photo-item:nth-child(2){
  margin-right:56px;
}

.about-photo-right .about-photo-item:nth-child(2){
  margin-left:56px;
}

.about-content{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:56px 28px;
  position:relative; z-index:2;
}

.about-content .eyebrow{margin-bottom:22px;}
.about-content .section-title{margin-bottom:26px;}
.about-content .section-lead{margin-bottom:0;}

@media(max-width:960px){
  .about-showcase{grid-template-columns:1fr;}

  .about-photo-col{
    flex-direction:row;
    padding:0;
    gap:0;
  }

  .about-photo-left{order:1;}
  .about-content{order:2; padding:24px 24px;}
  .about-photo-right{order:3;}
  
  .about-photo-item{
    aspect-ratio:16/10;
    flex:1;
    font-size:10px;
    margin:0 !important;
  }

  .about-photo-item:nth-child(1){
    clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  }

  .about-photo-item:nth-child(2){
    clip-path: polygon(22px 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
    margin-left:-14px !important;
  }

  .about-photo-item:nth-child(3){
    clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);
    margin-left:-14px !important;
  }
}

/* ---------- 3 reasons ---------- */
.reasons-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
  max-width:1200px; margin:0 auto;
}
.reason-card{
  background:transparent;
  overflow:visible;
}
.reason-card:hover{transform:none;}

.reason-photo-wrap{
  position:relative;
  margin-bottom:40px;
}
.reason-photo{
  aspect-ratio:4/3;
  background:repeating-linear-gradient(45deg,#d7e6fb 0,#d7e6fb 8px,#c5d9f7 8px,#c5d9f7 16px);
  display:flex; align-items:center; justify-content:center;
  color:#7d93bd; font-size:11px;
  -webkit-mask:radial-gradient(ellipse 24% 32% at 100% 100%, transparent 99%, #000 100%);
          mask:radial-gradient(ellipse 24% 32% at 100% 100%, transparent 99%, #000 100%);
}
.reason-photo--filled{
  background:#fff;
  padding:0;
}
.reason-photo--filled img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.reason-number{
  position:absolute;
  right:3%;
  bottom:-0.6em;
  font-style:italic;
  font-weight:700;
  font-size:clamp(56px,7.5vw,84px);
  line-height:1.5;
  color:var(--blue);
  text-shadow:1px 1px 0 rgba(255, 255, 255, 0.95), 3.5px 3px 0 rgba(13, 27, 63, 0.22);
  pointer-events:none;
}
.reason-number span{ display:block; }

.reason-body{padding:0 6px;}
.reason-body h3{font-size:20px; font-weight:800; color:var(--blue); margin-bottom:14px;}
.reason-body p{font-size:14px; color:var(--text-sub);}

@media(max-width:960px){
  .reason-number{font-size:clamp(72px,9vw,56px);}
}

/* ---------- Voice ---------- */
.voice-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  max-width:900px; margin:0 auto;
}
.voice-card{
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 4px 20px rgba(20,35,70,0.06);
}
.voice-photo{
  aspect-ratio:16/9;
  background:repeating-linear-gradient(45deg,#d7e6fb 0,#d7e6fb 8px,#c5d9f7 8px,#c5d9f7 16px);
  display:flex; align-items:center; justify-content:center;
  color:#7d93bd; font-size:11px;
}
.voice-body{padding:28px;}
.voice-body h3{font-size:22px; font-weight:800; color:var(--blue); margin-bottom:14px;}
.voice-body p{font-size:16px; color:var(--text-sub); margin-bottom:18px;}
.voice-meta{font-size:16px; color:#9aa3b5;}

/* ---------- Timeline (当日の流れ) ---------- */
.timeline{max-width:760px; margin:60px auto 0; position:relative;}
.timeline::before{
  content:""; position:absolute; left:21px; top:10px; bottom:10px;
  width:2px; background:#cfe0fb;
}
.timeline-item{
  display:flex; gap:22px; align-items:flex-start;
  margin-bottom:18px; position:relative;
}
.timeline-num{
  flex:0 0 auto;
  width:52px; height:52px; border-radius:50%;
  background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:20px;
  z-index:2;
  box-shadow:0 4px 10px rgba(47,111,237,0.3);
}
.timeline-content{
  flex:1;
  background:var(--sky-bg);
  border-radius:var(--radius-md);
  padding:22px 28px;
}
.timeline-content h4{font-size:20px; font-weight:800; margin-bottom:6px; color:var(--blue);}
.timeline-content p{font-size:17px; color:var(--text-sub);}

/* ---------- Spotlight banner（指名・逆指名タイムとは？） ---------- */
.spotlight{
  max-width:1100px; margin:60px auto 0;
  background:linear-gradient(120deg, #3a7bf0, #4fa9f5);
  border-radius:var(--radius-lg);
  padding:44px 48px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  color:#fff;
  box-shadow:0 14px 32px rgba(47,111,237,0.25);
}
.spotlight h3{font-size:26px; font-weight:800; margin-bottom:12px;}
.spotlight p{font-size:18px; color:rgba(255,255,255,0.96); max-width:520px;}
.spotlight-tag{text-align:center; margin-right:32px;}
.spotlight-tag .big{font-size:45px; font-weight:900; letter-spacing:0.05em;}
.spotlight-tag .small{font-size:14px; color:rgba(255,255,255,0.85); margin-top:6px;}

/* ---------- Prize ---------- */
.prize-wrap{text-align:center;}
.prize-eyebrow{color:var(--blue); font-weight:700; font-size:18px; margin-bottom:36px; text-align:center;}
.prize-card{
  max-width:560px; margin:0 auto;
  background:#fff;
  border:1.5px solid var(--blue);
  border-radius:var(--radius-lg);
  padding:58px 38px;
  box-shadow:0 14px 36px rgba(47,111,237,0.12);
}
.prize-label{font-size:18px; color:var(--text-sub); margin-bottom:10px;}
.prize-amount{
  font-size:clamp(84px, 9vw, 138px);
  font-weight:900;
  color:var(--blue);
  line-height:1;
  margin-bottom:10px;
}
.prize-amount sup{font-size:0.32em; margin-right:4px; vertical-align:8%;}
.prize-amount .unit{font-size:0.38em; font-weight:800;}
.prize-title{font-size:28px; font-weight:800; margin-bottom:20px;}
.prize-desc{font-size:18px; color:var(--text-sub);}

@media(max-width:880px){
  .photo-grid, .reasons-grid, .voice-grid{grid-template-columns:1fr;}
  .spotlight{flex-direction:column; text-align:center;}
  .spotlight-tag{margin-right:0;}
}