/* トップのヘッダー：オホーツクの流氷と知床の山なみ（2026-10-15）
   写真：Da-shika / Unsplash（Unsplash License）を朝焼け色に加工 */
.ok-hero{position:relative;margin:0;background:#f5eee4;overflow:hidden}
.ok-hero-photo{position:relative;aspect-ratio:2400/1264;max-height:calc(100vh - 76px);min-height:480px;width:100%;overflow:hidden}
.ok-hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(247,240,232,.82) 0%,rgba(247,240,232,.55) 30%,rgba(247,240,232,0) 58%),linear-gradient(0deg,#f5eee4 0%,rgba(245,238,228,0) 14%)}
.ok-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.ok-hero-copy{position:absolute;z-index:1;left:clamp(24px,7vw,120px);top:clamp(48px,9vh,110px);max-width:560px;color:#2b221d}
.ok-eyebrow{margin:0 0 18px;color:#8a4a2c;font:italic 500 14px/1.4 "Cormorant Garamond",Georgia,serif;letter-spacing:.26em}
.ok-title{margin:0;font:500 clamp(36px,4.6vw,66px)/1.38 var(--emo-serif,"Shippori Mincho",serif);letter-spacing:.1em;text-shadow:0 1px 24px rgba(255,240,228,.65)}
.ok-title span{display:block;white-space:nowrap}
.ok-sub{margin:20px 0 0;color:#4a3e36;font:500 clamp(15px,1.5vw,19px)/1.6 var(--emo-serif,"Shippori Mincho",serif);letter-spacing:.22em}
.ok-sub::before{content:"";display:inline-block;width:36px;height:1px;margin-right:14px;vertical-align:middle;background:#8a4a2c}
.ok-lead{position:relative;max-width:1100px;margin:0 auto;padding:18px 24px 10px;text-align:center;color:#4a3e36;font-size:15px;line-height:2.1;letter-spacing:.08em}
.ok-lead span{display:inline-block}
.ok-lead b{color:#b4623b;font-weight:600}
.ok-credit{position:absolute;z-index:1;right:14px;bottom:10px;margin:0;color:rgba(43,34,29,.5);font:10px/1 system-ui,sans-serif;letter-spacing:.04em}
.ok-credit a{color:inherit;text-decoration:none}

@media (max-width:760px){
  .ok-hero-photo{aspect-ratio:4/5;max-height:none;min-height:0}
  .ok-hero-photo::after{background:linear-gradient(180deg,rgba(247,240,232,.72) 0%,rgba(247,240,232,.28) 30%,rgba(247,240,232,0) 46%),linear-gradient(0deg,#f5eee4 0%,rgba(245,238,228,0) 12%)}
  .ok-hero-photo img{object-position:50% 50%}
  .ok-hero-copy{left:22px;right:22px;top:34px}
  .ok-eyebrow{font-size:12px;margin-bottom:12px}
  .ok-title{font-size:clamp(30px,8.4vw,40px)}
  .ok-sub{font-size:14px;margin-top:12px}
  .ok-sub::before{width:24px;margin-right:10px}
  .ok-lead{padding-top:14px;font-size:13.5px;letter-spacing:.03em}
  .ok-credit{bottom:8px;right:10px}
}

/* 開いたとき：写真がゆっくり寄り、言葉が順に浮かぶ（動きを減らす設定では止める） */
@media (prefers-reduced-motion:no-preference){
  .ok-hero-photo img{animation:okZoom 14s cubic-bezier(.2,.6,.2,1) both}
  .ok-hero-copy>*{animation:okUp 1.1s cubic-bezier(.2,.7,.2,1) both}
  .ok-hero-copy>:nth-child(2){animation-delay:.15s}.ok-hero-copy>:nth-child(3){animation-delay:.4s}
  .ok-lead{animation:okUp 1.1s cubic-bezier(.2,.7,.2,1) .55s both}
}
@keyframes okZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes okUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}