/* =================================================

 東高生の1日
 page-day.css

================================================= */


/* =========================

Common

========================= */


.page-day{
  overflow:hidden;
}


.page-day .inner{

  width:min(1100px,90%);
  margin:0 auto;

}





/* =========================

Lead

========================= */


.page-day .day-lead{

  padding-top:80px;
  padding-bottom:70px;

}



.page-day .page-badge{

  display:inline-block;

  padding:7px 18px;

  border-radius:999px;

  background:#fff3b0;

  color:#8b6a00;

  font-size:.85rem;

  font-weight:700;

  letter-spacing:.12em;

  margin-bottom:20px;

}




.page-day .day-lead h2{

  font-size:clamp(28px,4vw,42px);

  color:#163a63;

  margin-top:15px;

  margin-bottom:25px;

}





.day-lead .lead{

  max-width:850px;

  font-size:1.1rem;

  line-height:2;

  color:#555;

}





/* =========================

Section title

========================= */


.day-flow .section-title,
.day-lunch .section-title,
.day-after .section-title,
.day-schedule .section-title{


  text-align:center;

  margin-bottom:25px;

}




.section-title span{

  display:block;

  color:#4c7dbd;

  font-size:.8rem;

  font-weight:700;

  letter-spacing:.18em;

  margin-bottom:10px;

}



.section-title h2{

  color:#163a63;

  font-size:clamp(25px,3vw,34px);

}




.section-copy{

  max-width:750px;

  margin:0 auto 70px;

  text-align:center;

  line-height:2;

  color:#555;

}





/* =========================

Timeline

========================= */


.day-flow{

  padding:70px 0;

  background:#f7fbff;

}





.timeline{

  position:relative;

  max-width:900px;

  margin:0 auto;

}





.timeline::before{

  content:"";

  position:absolute;

  left:75px;

  top:0;

  bottom:0;

  width:3px;

  background:#d8e8f8;

}





.timeline-item{

  display:flex;

  gap:45px;

  position:relative;

  margin-bottom:90px;

}





.timeline-time{

  width:120px;

  flex-shrink:0;

  text-align:center;

}





.timeline-time span{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  width:90px;

  height:90px;

  border-radius:50%;

  background:#fff;

  color:#1d5795;

  font-size:1.15rem;

  font-weight:700;

  box-shadow:0 8px 20px rgba(0,0,0,.08);

}





.timeline-card{

  background:#fff;

  border-radius:24px;

  overflow:hidden;

  flex:1;

  box-shadow:0 10px 30px rgba(0,0,0,.06);

}





.timeline-photo{

  width:100%;

  aspect-ratio:16/7;

  overflow:hidden;

}




.timeline-photo img{

  width:100%;

  height:100%;

  object-fit:cover;

}




.timeline-text{

  padding:35px 40px 40px;

}





.timeline-text h3{

  color:#163a63;

  font-size:1.5rem;

  margin-bottom:18px;

}





.timeline-text p{

  line-height:2;

  color:#555;

}





/* =========================

One Point

========================= */


.day-point{

  padding:20px 0 80px;

  background:#f7fbff;

}





.point-card{

  max-width:900px;

  margin:0 auto;

  display:flex;

  align-items:center;

  gap:25px;

  background:#fff8dd;

  border-left:6px solid #ffd34f;

  border-radius:18px;

  padding:28px 35px;

}





.point-icon{

  font-size:2.5rem;

  flex-shrink:0;

}





.point-card h3{

  color:#705700;

  margin-bottom:10px;

}





.point-card p{

  margin:0;

  line-height:1.9;

  color:#555;

}

/* =========================

Lunch

========================= */


.day-lunch{

  padding:100px 0;

  background:#fffdf4;

}



.lunch-main{

  display:grid;

  grid-template-columns:1.3fr 1fr;

  gap:50px;

  align-items:center;

  margin-bottom:60px;

}





.lunch-photo{

  border-radius:24px;

  overflow:hidden;

  aspect-ratio:16/9;

}





.lunch-photo img{

  width:100%;

  height:100%;

  object-fit:cover;

}





.lunch-text h3{

  font-size:1.8rem;

  color:#163a63;

  margin-bottom:20px;

}



.lunch-text p{

  line-height:2;

  color:#555;

}





.lunch-grid{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:30px;

}





.lunch-card{

  background:#fff;

  border-radius:20px;

  overflow:hidden;

  box-shadow:0 8px 25px rgba(0,0,0,.06);

}





.card-photo{

  aspect-ratio:16/9;

  overflow:hidden;

}





.card-photo img{

  width:100%;

  height:100%;

  object-fit:cover;

}




.lunch-card h3{

  padding:25px 25px 10px;

  color:#163a63;

}





.lunch-card p{

  padding:0 25px 30px;

  line-height:1.8;

  color:#555;

}






/* =========================

After School

========================= */


.day-after{

  padding:100px 0;

  background:#fff;

}




.after-main{

  display:grid;

  grid-template-columns:1.2fr 1fr;

  gap:50px;

  align-items:center;

}




.after-photo{

  border-radius:24px;

  overflow:hidden;

  aspect-ratio:16/9;

}




.after-photo img{

  width:100%;

  height:100%;

  object-fit:cover;

}





.after-content{

  display:flex;

  flex-direction:column;

  gap:30px;

}





.after-item{

  background:#f7fbff;

  border-radius:18px;

  padding:28px;

}




.after-item h3{

  color:#163a63;

  margin-bottom:12px;

}




.after-item p{

  color:#555;

  line-height:1.9;

  margin:0;

}







/* =========================

Schedule

========================= */


.day-schedule{

  padding:90px 0;

  background:#f4f9ff;

}





.schedule-card{

  max-width:950px;

  margin:0 auto;

  background:#fff;

  border-radius:25px;

  padding:45px;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:40px;

  box-shadow:0 10px 30px rgba(0,0,0,.06);

}




.schedule-table table{

  width:100%;

  border-collapse:collapse;

}





.schedule-table th,
.schedule-table td{

  padding:13px 15px;

  border-bottom:1px solid #e5edf7;

}




.schedule-table th{

  width:35%;

  text-align:center;

  color:#1d5795;

}




.schedule-table td{

  color:#444;

}






.schedule-note{

  display:flex;

  flex-direction:column;

  gap:20px;

  justify-content:center;

}





.schedule-note-item{

  display:flex;

  gap:15px;

  align-items:center;

  background:#f7fbff;

  border-radius:14px;

  padding:18px;

}





.schedule-note-item span{

  font-size:1.5rem;

}





.schedule-note-item p{

  margin:0;

  line-height:1.7;

  color:#555;

}








/* =========================

Message

========================= */


.day-message{

  padding:100px 0;

  background:#fff;

}





.message-card{

  max-width:900px;

  margin:0 auto;

  text-align:center;

  padding:60px 40px;

  border-radius:30px;

  background:linear-gradient(135deg,#1c5798,#163a63);

  color:#fff;

}





.message-card h2{

  font-size:clamp(24px,3vw,34px);

  line-height:1.5;

  margin-bottom:25px;

}




.message-card p{

  line-height:2;

  margin-bottom:35px;

}




.message-button{

  display:inline-block;

  padding:15px 35px;

  background:#fff;

  color:#163a63;

  border-radius:999px;

  font-weight:700;

  text-decoration:none;

}





/* =========================

Mobile

========================= */


@media(max-width:768px){



.day-lead{

  padding:55px 0;

}




.day-flow,
.day-lunch,
.day-after,
.day-schedule,
.day-message{

  padding:60px 0;

}





.timeline::before{

  left:35px;

}




.timeline-item{

  display:block;

  margin-bottom:55px;

}




.timeline-time{

  width:auto;

  text-align:left;

  margin-bottom:20px;

  padding-left:0;

}




.timeline-time span{

  width:70px;

  height:70px;

  font-size:1rem;

}




.timeline-card{

  margin-left:20px;

}




.timeline-photo{

  aspect-ratio:16/9;

}





.timeline-text{

  padding:25px;

}




.point-card{

  display:block;

  padding:25px;

}




.point-icon{

  margin-bottom:10px;

}




.lunch-main,
.after-main{

  grid-template-columns:1fr;

  gap:30px;

}





.lunch-grid{

  grid-template-columns:1fr;

}




.schedule-card{

  grid-template-columns:1fr;

  padding:25px;

}




.message-card{

  padding:40px 25px;

}


}

/* =========================================================
   HERO
   ========================================================= */

.annual-hero{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #edf3f8 0%,
      #f7f9fb 55%,
      #ffffff 100%
    );

  border-bottom:1px solid #e2e8ee;
}


.annual-hero::after{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  right:-180px;
  top:-180px;

  border-radius:50%;

  background:#dfe9f1;

  opacity:.55;
}


.annual-hero-inner{
  position:relative;
  z-index:1;

  max-width:1000px;

  margin:0 auto;

  padding:76px 30px 70px;
}


.annual-label{
  margin:0 0 18px;

  font-size:.78rem;
  font-weight:700;

  letter-spacing:.18em;

  color:#62788a;
}


.annual-hero h1{
  margin:0;

  font-size:clamp(
    2.2rem,
    5vw,
    3.5rem
  );

  line-height:1.25;

  letter-spacing:.04em;

  color:#243746;
}


.annual-lead{
  margin:24px 0 0;

  max-width:760px;

  font-size:1rem;

  line-height:2;

  color:#536573;
}