@charset "utf-8";
/* CSS Document */
:root{
  --gap: clamp(24px, 4vw, 64px);
}

.ngh__page-kv{
  width: 100%;
  height: 100vh;
  min-height: 600px;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.ngh__page-kv-ttl{
  color: #fff;
  font-family: "游明朝", "YuMincho", serif;
  font-size: 50px;
  font-weight: 300;
  text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.24);
}
.ngh__page-kv-ttl-caption{
  font-size: 18px;
  color: #fff;
  text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.24);
}
.wedding .ngh__page-kv{
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/wedding_kv.jpg");
  background-position: center;
}

.ngh__3day{
  padding: 100px 30px;
}
.ngh__3day-inner{
  max-width: 1300px;
  margin: 0 auto;
}
.ngh__3day-headline{
  text-align: center;
  margin-bottom: 80px;
  font-size: 30px;
  font-weight: 400;
}
.ngh__3day-headline-txt{
  text-align: center;
  line-height: 2;
  margin-bottom: 100px;
}
.ngh__3day-bottom-txt{
   text-align: center;
  line-height: 2;
  margin-top: 100px;
}

.ngh__3day-box + .ngh__3day-box{
  margin-top: 120px;
}
.ngh__3day-box-ttl{
  font-size: 36px;
  font-weight: 400;
  text-align: center;
}
.ngh__3day-box-caption{
  font-size: 15px;
  font-weight: 300;
  position: relative;
  margin: 20px auto 0;
  padding-top: 20px;
  text-align: center;
  width: fit-content;
}
.ngh__3day-box-caption::before{
  content:"";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 1px;
  background-color: #45413D;
}
.ngh__3day-box-txt{
  text-align: center;
  margin-top: 40px;
  line-height: 2;
}
.ngh__3day-box-photo{
  margin-top: 100px;
  display: flex;
  justify-content: center;
}

.ngh__3day-movie{
  position: relative;
  aspect-ratio:16 / 9;
  margin: 60px auto;
}
.ngh__3day-movie iframe{
  position: absolute;
  width: 100%;
  height: 100%;
}

.day{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:var(--gap);
    margin-top: 60px;
}

figure{ margin:0; overflow:hidden; }
  figure img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* 右フルブリード：グリッド右端から画面右端まで伸ばす */
  .bleed-right{ margin-right: calc(50% - 50vw); }

  /* ===== Day1 ===== */
  .day1 .p1{ grid-column:1/5;  aspect-ratio:1/1; }
  .day1 .p2{ grid-column:5/13; grid-row:1; aspect-ratio:1.27; align-self:end;  margin-top:60px}
  .day1 .p3{ grid-column:1/7;  aspect-ratio:1.38; }
  .day1 .p4{ grid-column:7/12; grid-row:2; aspect-ratio:1.21; align-self:end; margin-top:90px; }
  .day1 .p5{ grid-column:3/7;  aspect-ratio:1.2; }

  /* ===== Day2 ===== */
  .day2 .p1{ grid-column:2/7;  grid-row:1/3; aspect-ratio:1.25; align-self:start;  margin-top:60px}
  .day2 .p2{ grid-column:7/13; grid-row:1; aspect-ratio:2.69; }
  .day2 .p3{ grid-column:7/11; grid-row:2; aspect-ratio:1.32; margin-left: -20px;}
  .day2 .p4{ grid-column:3/13; aspect-ratio:2.46; margin-top:40px; }

  /* ===== Day3 ===== */
  .day3 .p1{ grid-column:1/7;  aspect-ratio:1.32; }
  .day3 .p2{ grid-column:7/13; grid-row:1; aspect-ratio:1.02; align-self:end; }
  .day3 .p3{ grid-column:1/9;  aspect-ratio:1.56; }
  .day3 .p4{ grid-column:9/13; aspect-ratio:1.2; }

  /* ===== タブレット ===== */

  /* ===== スマホ：1カラム積み・ブリード解除 ===== */
  @media (max-width:768px){
    .day{ grid-template-columns:1fr; gap:14px; margin-bottom:64px; }
    .day figure{ grid-column:1/-1 !important; grid-row:auto !important; margin:0 !important; }
  }