/* ═══════════════════════════════════════════════════════════
   HT-PHOTO-EDITORIAL v54 ── 写真の見せ方を「雑誌の見開き」に
   方針：背景の色・写真そのものは変えず、置き方だけを変える。
   ・文章と写真を左右交互に（左右に振る）
   ・横長と縦長を交互に（同じ形の繰り返しをやめる）
   ・写真を前の段に少し食い込ませる（段差で流れをつくる）
   ・金の細いフレームを写真から少し離して置く（高級感）
   ・章番号（I, II, III…）を大きく薄く敷く（編集的なアクセント）
   ═══════════════════════════════════════════════════════════ */

/* ── 共通：細い金のオフセット枠 ── */
.hour .night-img,
.alt img.ph{
  outline:1px solid rgba(217,178,90,.38);
  outline-offset:14px;
}
@media (max-width:720px){
  .hour .night-img,
  .alt img.ph{ outline-offset:8px; }
}

/* ══════════ Stay on the Island：宿泊者だけの時間 ══════════ */
.hours .timeline{ counter-reset:hr; }
.hours .hour{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:clamp(16px,3vw,40px);
  grid-template-rows:auto auto auto 1fr auto;
  align-items:start;
  padding:0 0 clamp(72px,9vw,128px) 0 !important;
  position:relative;
}
/* 章番号（薄く大きく） */
.hours .hour::before{
  counter-increment:hr;
  content:counter(hr, upper-roman);
  position:absolute;top:-.18em;left:0;z-index:0;pointer-events:none;
  font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
  font-size:clamp(96px,14vw,190px);line-height:1;letter-spacing:-.02em;
  color:rgba(217,178,90,.13);
}
.hours .hour:nth-child(even)::before{ left:auto;right:0; }

/* 文章ブロックの配置 */
.hours .hour .time,
.hours .hour h3,
.hours .hour > p{
  grid-column:1 / span 5;
  position:relative;z-index:1;
}
.hours .hour:nth-child(even) .time,
.hours .hour:nth-child(even) h3,
.hours .hour:nth-child(even) > p{ grid-column:8 / span 5; }
.hours .hour .time{ padding-top:clamp(28px,4vw,56px); }
.hours .hour > p{ max-width:30em !important; }

/* 写真：奇数＝右に横長、偶数＝左に縦長。前の段に食い込ませる */
.hours .hour .night-img{
  grid-column:6 / span 7;
  grid-row:1 / span 4;
  margin:0 !important;
  align-self:start;
  z-index:1;
}
.hours .hour .night-img img{
  width:100%;height:100%;
  aspect-ratio:16 / 10;
  max-height:none !important;
  object-fit:cover;
}
.hours .hour:nth-child(even) .night-img{
  grid-column:1 / span 7;
  margin-top:clamp(-40px,-5vw,-96px) !important;
}
.hours .hour:nth-child(even) .night-img img{ aspect-ratio:4 / 5; }
/* 3段目は少し小さく右寄せ（リズムを崩す） */
.hours .hour:nth-child(3) .night-img{ grid-column:7 / span 6; margin-top:clamp(24px,3vw,48px) !important; }
.hours .hour:nth-child(3) .night-img img{ aspect-ratio:1 / 1; }

/* 写真の下の説明（キャプション）は写真の下に */
.hours .hour .cap{
  grid-column:6 / span 7;grid-row:5;margin-top:18px !important;
}
.hours .hour:nth-child(even) .cap{ grid-column:1 / span 7; }

/* 端の溶かし込みは控えめに（枠と喧嘩させない） */
.hours .hour .night-img::before{
  box-shadow:
    inset 0 40px 50px -30px rgba(14,23,48,.55),
    inset 0 -50px 60px -30px rgba(14,23,48,.6);
}

/* 写真を置かない最終段（夜明け）は文章だけを中央寄せで静かに */
.hours .hour:last-child{ padding-bottom:clamp(24px,4vw,48px) !important; }
.hours .hour:last-child::before{ content:none; }
.hours .hour:last-child .time,
.hours .hour:last-child h3,
.hours .hour:last-child > p{ grid-column:3 / span 8; text-align:center; max-width:none !important; }
.hours .hour:last-child > p{ margin-left:auto;margin-right:auto;max-width:36em !important; }

@media (max-width:860px){
  .hours .hour{ grid-template-columns:1fr; grid-template-rows:none; padding-bottom:clamp(56px,10vw,80px) !important; }
  .hours .hour .time,.hours .hour h3,.hours .hour > p,
  .hours .hour:nth-child(even) .time,.hours .hour:nth-child(even) h3,.hours .hour:nth-child(even) > p,
  .hours .hour:last-child .time,.hours .hour:last-child h3,.hours .hour:last-child > p{
    grid-column:1; text-align:left;
  }
  .hours .hour .time{ padding-top:0; }
  .hours .hour .night-img,
  .hours .hour:nth-child(even) .night-img,
  .hours .hour:nth-child(3) .night-img{
    grid-column:1; grid-row:auto; margin:26px 0 0 !important;
  }
  /* スマホでも形は交互に：横長 → 縦長（少し内側） → 正方形 */
  .hours .hour:nth-child(even) .night-img{ width:86%; margin-left:auto !important; }
  .hours .hour:nth-child(even) .night-img img{ aspect-ratio:4 / 5; }
  .hours .hour:nth-child(3) .night-img{ width:92%; }
  .hours .hour .cap,.hours .hour:nth-child(even) .cap{ grid-column:1; grid-row:auto; }
  .hours .hour::before{ font-size:88px; top:-.3em; right:0; left:auto; }
}

/* ══════════ Sea to Summit：1時間の垂直の旅 ══════════ */
.ascent .climb{ counter-reset:leg; }
.ascent .alt{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:clamp(16px,3vw,40px);
  grid-template-rows:auto auto auto 1fr auto;
  align-items:start;
  padding:0 0 clamp(72px,9vw,120px) 0 !important;
  position:relative;
}
.ascent .alt::before{
  counter-increment:leg;
  content:counter(leg, upper-roman);
  position:absolute;top:-.18em;right:0;z-index:0;pointer-events:none;
  font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
  font-size:clamp(96px,14vw,190px);line-height:1;letter-spacing:-.02em;
  color:rgba(217,178,90,.13);
}
.ascent .alt:nth-child(even)::before{ right:auto;left:0; }

/* 1段目（海）：写真を全幅のシネマスコープ、文章はその上 */
.ascent .alt:nth-child(1) .elev,
.ascent .alt:nth-child(1) h3,
.ascent .alt:nth-child(1) > p{ grid-column:1 / span 7; position:relative;z-index:1; }
.ascent .alt:nth-child(1) img.ph{
  grid-column:1 / -1; margin-top:clamp(28px,4vw,48px) !important;
  aspect-ratio:21 / 9; max-height:none !important; width:100%; object-fit:cover;
}
/* 2段目（佐伯）：写真を左に縦長、文章を右に。前の段へ食い込ませる */
.ascent .alt:nth-child(2) .elev,
.ascent .alt:nth-child(2) h3,
.ascent .alt:nth-child(2) > p{ grid-column:8 / span 5; position:relative;z-index:1; }
.ascent .alt:nth-child(2) .elev{ padding-top:clamp(28px,4vw,56px); }
.ascent .alt:nth-child(2) img.ph{
  grid-column:1 / span 6; grid-row:1 / span 4;
  margin:clamp(-40px,-5vw,-96px) 0 0 !important;
  aspect-ratio:4 / 5; max-height:none !important; width:100%; object-fit:cover;
}
/* 3段目（吉和）：写真を右に横長、文章を左に */
.ascent .alt:nth-child(3) .elev,
.ascent .alt:nth-child(3) h3,
.ascent .alt:nth-child(3) > p{ grid-column:1 / span 5; position:relative;z-index:1; }
.ascent .alt:nth-child(3) .elev{ padding-top:clamp(28px,4vw,56px); }
.ascent .alt:nth-child(3) img.ph{
  grid-column:6 / span 7; grid-row:1 / span 4;
  margin:0 !important;
  aspect-ratio:16 / 10; max-height:none !important; width:100%; object-fit:cover;
}
.ascent .alt:nth-child(3) .cap{ grid-column:6 / span 7; grid-row:5; margin-top:18px; }
.ascent .alt > p{ max-width:30em !important; }

@media (max-width:860px){
  .ascent .alt{ grid-template-columns:1fr; grid-template-rows:none; padding-bottom:clamp(56px,10vw,80px) !important; }
  .ascent .alt .elev,.ascent .alt h3,.ascent .alt > p,
  .ascent .alt:nth-child(1) .elev,.ascent .alt:nth-child(1) h3,.ascent .alt:nth-child(1) > p,
  .ascent .alt:nth-child(2) .elev,.ascent .alt:nth-child(2) h3,.ascent .alt:nth-child(2) > p,
  .ascent .alt:nth-child(3) .elev,.ascent .alt:nth-child(3) h3,.ascent .alt:nth-child(3) > p{ grid-column:1; }
  .ascent .alt .elev{ padding-top:0 !important; }
  .ascent .alt img.ph,
  .ascent .alt:nth-child(1) img.ph,
  .ascent .alt:nth-child(2) img.ph,
  .ascent .alt:nth-child(3) img.ph{ grid-column:1; grid-row:auto; margin:26px 0 0 !important; }
  .ascent .alt:nth-child(1) img.ph{ aspect-ratio:16 / 10; }
  .ascent .alt:nth-child(2) img.ph{ width:86%; margin-left:auto !important; aspect-ratio:4 / 5; }
  .ascent .alt:nth-child(3) .cap{ grid-column:1; grid-row:auto; }
  .ascent .alt::before,.ascent .alt:nth-child(even)::before{ font-size:88px; top:-.3em; right:0; left:auto; }
}

/* ── 昼ギャラリー（3枚）：少しだけ段差をつけ、1枚目を上にずらす ── */
@media (min-width:721px){
  .gallery .strip{ align-items:start; }
  .gallery .strip img:nth-child(1){ transform:translateY(-28px); }
  .gallery .strip img:nth-child(3){ transform:translateY(28px); }
}

/* 動きを抑える設定の人には食い込み・ずらしをしない */
@media (prefers-reduced-motion:reduce){
  .hours .hour:nth-child(even) .night-img,
  .ascent .alt:nth-child(2) img.ph{ margin-top:0 !important; }
}