/* ============================================================
   デザイントークン
============================================================ */
:root{
  --navy:  #0B2E63;   /* テキスト・濃紺 */
  --royal: #003997;   /* 青セクション背景 */
  --vivid: #1E8FD5;   /* ヴィヴィッドブルー（アクセント） */
  --ice:   #DDE5EC;   /* アイスグレー背景 */
  --card:  #7C8BBE;   /* ショートストーリーのロックカード */
  --white: #ffffff;
  --content: 1080px;  /* コンテンツ最大幅 */
}

/* ===== リセット ===== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic','YuGothic','Meiryo',sans-serif;
  color:var(--navy);
  background:var(--white);
  overflow-x:hidden;
  line-height:1.7;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

/* 筆記体ラベル（英字エルボー） */
.eyebrow{
  font-family:'Courgette',cursive;
  font-weight:400;
  letter-spacing:.06em;
  display:block;
  text-align:center;
  margin-bottom:.4em;
}

/* 共通：セクション見出しブロック */
.sec-head{ text-align:center; position:relative; z-index:2; }
.sec-head h2{
  font-size:clamp(1.35rem,4.6vw,2rem);
  font-weight:800;
  line-height:1.5;
  letter-spacing:.02em;
}
.sec-inner{ max-width:var(--content); margin:0 auto; padding:0 20px; }

/* 装飾（雲・線画）共通 */
.deco{ position:absolute; pointer-events:none; z-index:0; height:auto; }

/* ============================================================
   ヘッダー（FVに重ねる固定バー）
============================================================ */
.site-header{
  position:relative; z-index:50; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px clamp(14px,3vw,32px);
  background:#fff;                       /* ロゴが収まる全幅の白帯（FV直上に隙間なく配置） */
  box-shadow:0 2px 10px rgba(11,46,99,.06);
}
.site-header .logo img{ height:clamp(30px,5vw,46px); width:auto; }
.header-contact{
  display:inline-flex; align-items:center; gap:8px;
  align-self:stretch;                                   /* 白帯の上下いっぱいに */
  margin:-12px calc(-1 * clamp(14px,3vw,32px)) -12px 0; /* ヘッダーpaddingを相殺し右端・上下へ */
  padding:0 clamp(20px,3.5vw,40px) 0 26px;
  background:#808080; color:#fff;                        /* グレーの座布団＋白抜き文字 */
  font-size:clamp(.68rem,1.6vw,.82rem); font-weight:700;
  border:0; border-radius:0;
  transition:background .2s;
}
.header-contact:hover{ background:#6e6e6e; }
.header-contact svg{ width:16px; height:16px; }

/* ============================================================
   FV（パターン3：OPアニメーション＋自動着彩）
   ※ fv-mockup/pattern3.html のロジックを移植
============================================================ */
.fv-bleed{ background:var(--ice); }   /* 1500px超の左右余白をFV背景色で埋める */
.scene--p3{
  position:relative; overflow:hidden;
  background:var(--ice);
  /* 固定比率 1500:900（=60cqw）。幅が変わっても縦横比一定＝オブジェクトの相対位置が崩れない。
     FV全体の縦横比を変えたい時はこの 60cqw の1値だけ調整すればよい。 */
  /* 1700px超はFV要素を拡大せず固定（左右余白は .fv-bleed のアイス色で埋める） */
  height:60cqw; max-width:1700px;
  margin:0 auto;
  container-type:inline-size;   /* 子要素の cqw 基準（全オブジェクトを幅1500pxに固定） */
}
/* 雲装飾 */
.kumo{ position:absolute; height:auto; pointer-events:none; z-index:0; }
.kumo-01{ width:48cqw; top:calc(20% + 3.333cqw); left:calc(16% - 5.333cqw); animation:kumo-drift-a 18s ease-in-out infinite; }
.kumo-02{ width:28cqw; top:calc(20% - 3.333cqw); left:calc(16% + 16.667cqw); animation:kumo-drift-b 22s ease-in-out 4s infinite; }
.kumo-03{ width:23.2cqw; top:calc(-12% + 16.667cqw); right:calc(5% - 3.333cqw); animation:kumo-drift-a 26s ease-in-out 9s infinite; }
.kumo-04{ width:19.867cqw; top:calc(-8% + 10cqw); right:18%; animation:kumo-drift-b 20s ease-in-out 2s infinite; }
@keyframes kumo-drift-a{ 0%{transform:translate(0,0)}30%{transform:translate(18px,-6px)}65%{transform:translate(10px,4px)}100%{transform:translate(0,0)} }
@keyframes kumo-drift-b{ 0%{transform:translate(0,0)}35%{transform:translate(-14px,5px)}70%{transform:translate(-6px,-4px)}100%{transform:translate(0,0)} }

/* コピー画像 */
.copy-img{ width:100%; height:auto; }
.fv-left{
  position:absolute; left:2%; top:calc(2% + 3.333cqw);
  width:68cqw; z-index:3;
  display:flex; flex-direction:column; gap:0.9cqw;
}
.bodycopy-img{ position:absolute; width:34cqw; height:auto; top:calc(2% + 24.667cqw); left:calc(2% + 6.667cqw); }

/* 波しぶき */
.wave-fx{ position:absolute; height:auto; pointer-events:none; }
@keyframes wave-fade-in{ from{opacity:0}to{opacity:1} }
.scene--p3 .wave-fx{ opacity:0; }
.scene--p3 .wave-white{ animation:wave-fade-in .5s ease 1.4s forwards, wave-center-bob 3.2s ease-in-out 1.4s infinite; }
.scene--p3 .wave-big{ animation:wave-fade-in .5s ease 1.5s forwards, wave-center-bob 2.8s ease-in-out 1.5s infinite; }
.scene--p3 .wave-white-sp{ animation:wave-fade-in .5s ease 1.6s forwards, wave-center-bob 3.6s ease-in-out 1.6s infinite; }
.scene--p3 .wave-sp01{ animation:wave-fade-in .5s ease 1.5s forwards, wave-sp-bob 3.0s ease-in-out 1.5s infinite; }
.scene--p3 .wave-sp02{ animation:wave-fade-in .5s ease 1.6s forwards, wave-sp-bob 3.4s ease-in-out 1.6s infinite; }
@keyframes wave-center-bob{ 0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)} }
@keyframes wave-sp-bob{ 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
.wave-white{ width:53.333cqw; bottom:12%; left:62%; z-index:6; }
.wave-big{ width:26.667cqw; bottom:calc(13% - 2cqw); left:calc(62% - 13.333cqw); z-index:6; }
.wave-white-sp{ width:33.333cqw; bottom:calc(14% - 8.667cqw); left:calc(62% + 10cqw); z-index:6; }
.wave-sp01{ width:17.333cqw; bottom:calc(16% - 2cqw); left:calc(40% + 20cqw); z-index:6; }
.wave-sp02{ width:10.667cqw; bottom:14%; right:calc(8% - 4cqw); z-index:6; }

/* コピー：最後にフェードイン */
.scene--p3 .fv-left{ opacity:0; animation:fv-left-rise .85s cubic-bezier(.22,.61,.36,1) 2.8s both; }
.scene--p3 .bodycopy-img{ opacity:0; animation:fv-left-rise .85s ease 4.0s both; }
@keyframes fv-left-rise{ from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} }

/* 船（tougou_koi）：グレーでスライドイン → 自動着彩 */
.ship--p3{
  position:absolute; width:53.333cqw; height:auto;
  bottom:2%; left:62%; transform:translateX(-50%);
  filter:grayscale(1) brightness(.72);
  animation: ship-slide-in 1.1s cubic-bezier(.22,.61,.36,1) .2s both,
             ship-float 5.0s ease-in-out 1.3s infinite,
             ship-p3-colorize 1.0s ease 1.5s forwards;   /* 船を最初に着彩 */
  z-index:1;
}
@keyframes ship-slide-in{ from{transform:translateX(-50%) translateY(38%) scale(.9);opacity:0}to{transform:translateX(-50%) translateY(0) scale(1);opacity:1} }
@keyframes ship-float{ 0%{transform:translateX(-50%) translateY(0) rotate(0)}25%{transform:translateX(-50%) translateY(-5px) rotate(1.2deg)}50%{transform:translateX(-50%) translateY(-7px) rotate(0)}75%{transform:translateX(-50%) translateY(-3px) rotate(-1deg)}100%{transform:translateX(-50%) translateY(0) rotate(0)} }
@keyframes ship-p3-colorize{ from{filter:grayscale(1) brightness(.72)}to{filter:grayscale(0) brightness(1.05) drop-shadow(0 8px 40px rgba(30,143,213,.45))} }

/* 積み荷パーツ：グレーで湧き上がり → 一斉に自動着彩（ふわふわは無し） */
.cargo--p3{
  position:absolute; width:10.5cqw; height:auto;
  opacity:0; z-index:4; filter:grayscale(1) brightness(.42) contrast(.8);
  animation: cargo-rise .6s cubic-bezier(.22,.61,.36,1) var(--rise-delay,0s) both,
             cargo-colorize .7s ease-out var(--color-delay,3.3s) forwards;
}
@keyframes cargo-rise{ from{opacity:0;transform:translateY(40px) scale(.84)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes float{ 0%,100%{translate:0 0}50%{translate:0 -10px} }
@keyframes cargo-colorize{
  0%{filter:grayscale(1) brightness(.42) contrast(.8);transform:scale(1)}
  20%{filter:grayscale(.2) saturate(1.8) brightness(1.2);transform:scale(1.11)}
  58%{filter:grayscale(0) saturate(1.7) brightness(1.15) drop-shadow(0 6px 28px rgba(30,143,213,.9));transform:scale(.96)}
  100%{filter:grayscale(0) saturate(1.6) brightness(1.12) drop-shadow(0 6px 28px rgba(30,143,213,.72));transform:scale(1)}
}
.p3-jeans{ width:8.4cqw; }
/* --color-delay は全オブジェクト共通(3.3s)＝船の後に一斉着彩。float関連の変数は不要になり削除 */
.p3-drink{ top:calc(62% - 1.333cqw); left:calc(13% + 7cqw); width:7.1cqw; --rise-delay:1.3s; --color-delay:3.3s; }
.p3-jeans{ top:calc(2% + 16.333cqw); right:calc(22% + 2.667cqw); --rise-delay:1.45s; --color-delay:3.3s; }
.p3-chair{ top:calc(2% + 22.333cqw); right:calc(8% - 2.667cqw); --rise-delay:1.6s; --color-delay:3.3s; }
.p3-bike{ top:calc(3% + 31.333cqw); right:3%; --rise-delay:1.75s; --color-delay:3.3s; }
.p3-shoes{ top:calc(2% + 22.667cqw); right:calc(22% - 8cqw); width:8.4cqw; --rise-delay:1.9s; --color-delay:3.3s; }
.p3-cloth{ top:calc(2% + 15cqw); right:calc(22% - 8cqw); --rise-delay:2.05s; --color-delay:3.3s; }
.p3-spice{ top:calc(36% + 10cqw); left:calc(20% + 8.667cqw); width:8.9cqw; --rise-delay:2.2s; --color-delay:3.3s; }
.p3-komugi{ top:calc(40% + 9cqw); left:calc(16% + 9.667cqw); width:4cqw; --rise-delay:2.35s; --color-delay:3.3s; }
.p3-pizza{ top:calc(62% + 4.667cqw); left:calc(13% + 9cqw); width:7.6cqw; --rise-delay:2.5s; --color-delay:3.3s; }

/* かもめ */
.kamome{ position:absolute; top:0; left:0; width:14cqw; height:auto; opacity:0; z-index:4; }
@keyframes kamome-fade-in{ from{opacity:0}to{opacity:1} }
.kamome--1{ animation:kamome-fade-in 1.2s ease 3.5s forwards, kamome1-soar 9s ease-in-out 3.5s infinite; }
@keyframes kamome1-soar{ 0%{transform:translate(57cqw,6cqw) scaleX(-1)}50%{transform:translate(58cqw,7.2cqw) scaleX(-1)}100%{transform:translate(57cqw,6cqw) scaleX(-1)} }
.kamome--2{ width:10.667cqw; animation:kamome-fade-in 1.2s ease 5.5s forwards, kamome2-soar 10.5s ease-in-out 5.5s infinite; }
@keyframes kamome2-soar{ 0%{transform:translate(68.667cqw,4.2cqw) scaleX(-1)}50%{transform:translate(67.667cqw,5.1cqw) scaleX(-1)}100%{transform:translate(68.667cqw,4.2cqw) scaleX(-1)} }
.kamome-static--p3{
  position:absolute; width:28cqw; height:auto;
  left:1%; bottom:calc(2% + 5cqw); z-index:5; pointer-events:none;
  transform:scaleX(-1); opacity:0;
  animation:kamome-approach 1.6s cubic-bezier(.22,.61,.36,1) 1.5s both, kamome-p3-bob 4.2s ease-in-out 3.1s infinite;
}
@keyframes kamome-p3-bob{ 0%{transform:translate(0,0) scaleX(-1)}40%{transform:translate(0,-0.533cqw) scaleX(-1)}70%{transform:translate(0,-0.333cqw) scaleX(-1)}100%{transform:translate(0,0) scaleX(-1)} }
@keyframes kamome-approach{ 0%{opacity:0;transform:translate(-1.2cqw,-13.333cqw) scaleX(-1) scale(.05);filter:blur(5px)}14%{opacity:1}60%{filter:blur(0)}100%{opacity:1;transform:translate(0,0) scaleX(-1) scale(1);filter:blur(0)} }

/* ===== PC（768px以上）：FVのオブジェクトを下へ60px移動（コピー2種と左下カモメは除外） =====
   transform系アニメと干渉しないよう margin で移動：top基準は margin-top、bottom基準は margin-bottom のマイナス */
@media (min-width:768px){
  .scene--p3 .kumo,          /* 雲 */
  .scene--p3 .cargo--p3,     /* 積み荷 */
  .scene--p3 .kamome{        /* 飛ぶカモメ（左下の kamome-static--p3 は対象外） */
    margin-top:60px;
  }
  .scene--p3 .wave-fx,       /* 波しぶき（bottom基準） */
  .scene--p3 .ship--p3{      /* 船（bottom基準） */
    margin-bottom:-60px;
  }

  /* ジーンズ・靴：もう一回り小さく＋右に10度傾ける。ジーンズは右30px（right基準→margin-right マイナス）、
     靴は上20px（cargoの下60 − 上20 = margin-top:40）。rotateはtransformアニメと別プロパティで非干渉 */
  .scene--p3 .p3-jeans{ width:6cqw; rotate:-10deg; margin-right:-60px; }   /* 左10度（-5→-10）／右へ合計60px */
  .scene--p3 .p3-shoes{ width:6cqw; rotate:-5deg; margin-top:40px; }       /* 左5度 */

  /* 雲：一回り大きく（scaleはdriftのtransformと別プロパティで合成） */
  .scene--p3 .kumo{ scale:1.12; }

  /* 右上のカモメ2匹：右へ150px（left基準→margin-left） */
  .scene--p3 .kamome{ margin-left:150px; }
  /* 左側のカモメ(kamome--1)は幅が狭いほどメインコピーに重なるため、幅に比例(cqw)して右へ逃がす
     （右側のkamome--2は元々十分右にあり重ならないので150pxのまま） */
  .scene--p3 .kamome--1{ margin-left:max(150px, 20cqw); }

  /* 赤ジャケ（衣類）：上へ20px（cargoの下60 − 上20 = 40）＋右へ30px（right基準→margin-right マイナス） */
  .scene--p3 .p3-cloth{ margin-top:40px; margin-right:-30px; }

  /* ピザ・ドリンク・小麦・スパイス：一回り大きく＋右へ20px（left基準→margin-left）。ドリンクは右25度 */
  .scene--p3 .p3-pizza{ width:8.7cqw; margin-left:20px; }
  .scene--p3 .p3-drink{ width:8.2cqw; margin-left:40px; margin-top:80px; rotate:25deg; }   /* 右へ40px（20＋20）／下へ80px（cargoの60＋20） */
  .scene--p3 .p3-komugi{ width:4.6cqw; margin-left:20px; }
  .scene--p3 .p3-spice{ width:10.2cqw; margin-left:20px; }

  /* 自転車・椅子：右へ15度 */
  .scene--p3 .p3-bike{ rotate:15deg; }
  .scene--p3 .p3-chair{ rotate:15deg; }

  /* コピー2種・船・波飛沫：少し大きく（前回より少しサイズダウン） */
  .scene--p3 .fv-left{ width:72cqw; }
  .scene--p3 .bodycopy-img{ width:36cqw; }
  .scene--p3 .ship--p3{ width:56cqw; margin-bottom:-90px; }   /* 下へ60px＋さらに30px＝合計90px */
  .scene--p3 .wave-white{ width:57cqw; }
  .scene--p3 .wave-big{ width:28.5cqw; }
  .scene--p3 .wave-white-sp{ width:35.5cqw; }
  .scene--p3 .wave-sp01{ width:18.5cqw; }
  .scene--p3 .wave-sp02{ width:11.4cqw; }

  /* FV下辺を30pxカット：中身(.scene--p3)は60cqwのままなので各オブジェクトの位置は不変。
     外枠(.fv-bleed)を30px短くして下端だけクリップし、次セクションを30px上へ詰める */
  .fv-bleed{ overflow:hidden; }
  .scene--p3{ margin-bottom:-30px; }
}

/* ===== 1200px以上：右上カモメ2匹の間隔を調整（左のカモメを左へ20px／右のカモメを右へ50px）＋2匹とも30px上げ ===== */
@media (min-width:1200px){
  .scene--p3 .kamome{ margin-top:30px; }                     /* 2匹とも上へ30px（下60 − 上30 = 30） */
  .scene--p3 .kamome--1{ margin-left:calc(20cqw - 20px); }   /* 左のカモメ：現在(20cqw)から左へ20px */
  .scene--p3 .kamome--2{ margin-left:200px; }                /* 右のカモメ：150px＋50px */
}

/* ============================================================
   波の区切り（セクション間トランジション）
============================================================ */
.wave-divider{ display:block; width:100%; height:auto; }
.wave-divider svg{ display:block; width:100%; height:clamp(48px,7vw,96px); }

/* ============================================================
   Movie セクション
============================================================ */
.sec-movie{ background:var(--white); padding:clamp(48px,8vw,90px) 0 clamp(56px,9vw,100px); }
.sec-movie .eyebrow{ color:var(--navy); font-size:clamp(1.6rem,4.5vw,2.4rem); font-style:italic; }
.movie-frame{
  display:block; max-width:640px; margin:clamp(24px,4vw,40px) auto 0;
  border-radius:18px; overflow:hidden;
  box-shadow:0 18px 44px rgba(11,46,99,.22);
  transition:transform .25s ease, box-shadow .25s ease;
}
.movie-frame:hover{ transform:translateY(-4px); box-shadow:0 24px 56px rgba(11,46,99,.3); }
.movie-frame img{ width:100%; }
video.movie-frame{ width:100%; display:block; background:#000; }
/* PC：サムネイル（クリックでモーダル）／SP：インライン埋め込み の出し分け */
video.movie-embed{ display:none; }   /* video.movie-frame より詳細度を上げてPCで確実に隠す */
.movie-thumb{
  display:block; position:relative; width:100%; max-width:640px;
  margin:clamp(24px,4vw,40px) auto 0; padding:0; border:0; background:#000;
  border-radius:18px; overflow:hidden; cursor:pointer;
  box-shadow:0 18px 44px rgba(11,46,99,.22);
  transition:transform .25s ease, box-shadow .25s ease;
}
.movie-thumb:hover{ transform:translateY(-4px); box-shadow:0 24px 56px rgba(11,46,99,.3); }
.movie-thumb img{ width:100%; display:block; }
.movie-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%;
  background:rgba(11,46,99,.72); backdrop-filter:blur(2px); transition:background .2s;
}
.movie-play::before{
  content:""; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%);
  border-style:solid; border-width:14px 0 14px 24px;
  border-color:transparent transparent transparent #fff;
}
.movie-thumb:hover .movie-play{ background:rgba(11,46,99,.92); }
/* ムービーモーダル */
.movie-modal{
  position:fixed; inset:0; z-index:1000; display:none;
  align-items:center; justify-content:center;
  background:rgba(2,18,50,.86); padding:clamp(16px,5vw,64px);
}
.movie-modal.is-active{ display:flex; }
.movie-modal-inner{ width:min(92vw,1100px); }
.movie-modal-video{
  width:100%; height:auto; max-height:86vh; display:block;
  border-radius:10px; background:#000; box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.movie-modal-close{
  position:absolute; top:clamp(14px,2.5vw,26px); right:clamp(14px,2.5vw,26px);
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.16); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; line-height:1; font-size:28px;
  transition:background .2s;
}
.movie-modal-close:hover{ background:rgba(255,255,255,.34); }

/* ============================================================
   青セクション共通（Life / Marine）
============================================================ */
.sec-blue{ background:#003a98; color:var(--white); position:relative; overflow:hidden;
  /* 上下パディング＝波の高さ(12.25vw)＋余白。コンテンツを波の外の濃紺エリアに収める */
  padding:calc(12.25vw + clamp(28px,4vw,48px)) 0 calc(12.25vw + clamp(32px,5vw,56px)); }
/* 上下の波（SVG）。中央は #003a98 ベタで繋ぐ（波高＝viewBox比 176.31/1439.39≈12.25vw） */
.sec-blue::before,.sec-blue::after{ content:""; position:absolute; left:0; right:0; height:12.25vw; z-index:1; pointer-events:none; background-repeat:no-repeat; background-position:center; background-size:100% 100%; }
/* 背景は SVG＋白→濃紺グラデ。透明部の上端は白／下端は濃紺で裏打ちし継ぎ目の白線を防ぐ */
.sec-blue::before{ top:0; background-image:url("../images/wave_upper.svg"),linear-gradient(180deg,#fff 71.4%,#003a98 72.6%); }
.sec-blue::after{ bottom:0; background-image:url("../images/wave_under.svg"),linear-gradient(180deg,#003a98 54.4%,#fff 55.6%); }
.sec-blue .sec-head{ position:relative; z-index:2; }
.sec-blue .eyebrow{ color:#9DC0E8; font-size:clamp(1.3rem,3.6vw,1.9rem); font-style:italic; }
.sec-blue .sec-head h2{ color:#fff; }
.sec-blue .cloud-deco{ position:absolute; top:clamp(20px,4vw,60px); left:-4%; width:min(56vw,520px); opacity:.9; z-index:0; }
/* Life：雲a＝見出しに重ねる／雲b＝女性イラスト(operator)に重ねる */
.sec-life .cloud-a{ top:calc(12.25vw + 6px); left:50%; right:auto; transform:translateX(-50%); width:min(74vw,660px); opacity:.85; }
.sec-life .cloud-b{ top:auto; left:auto; bottom:calc(12.25vw + 16px); right:3%; width:min(42vw,380px); opacity:.85; transform:translateX(-300px); }
/* Marine：見出しに重ねるネイビー雲（Life同様） */
.sec-jobs .jobs-cloud-head{ top:calc(12.25vw + 6px); left:50%; right:auto; transform:translateX(-50%); width:min(74vw,660px); opacity:.85; }
.jobs-cloud-mid,.jobs-cloud-bottom,.jobs-break{ display:none; }   /* スマホ専用（PCは非表示） */

/* 白セクション共通（Large ship / Wonders） */
.sec-white{ background:var(--white); position:relative; overflow:hidden;
  padding:clamp(48px,8vw,90px) 0 clamp(48px,8vw,90px); }
/* 青→白セクションの境界を1px重ね、小数DPRで出る継ぎ目のヘアラインを防ぐ */
.sec-blue + .sec-white,.sec-white + .sec-blue{ margin-top:-1px; }
.sec-white .eyebrow{ color:#9FB4CE; font-size:clamp(1.4rem,3.8vw,2rem); font-style:italic; }
.sec-white .sec-head h2{ color:var(--navy); }
.sec-white .cloud-deco{ position:absolute; top:clamp(30px,5vw,70px); left:-3%; width:min(52vw,480px); opacity:.7; z-index:0; }
/* Large ship：左の白雲を見出しに重ねる（右へ移動） */
.sec-ships .cloud-deco{ left:50%; right:auto; transform:translateX(-50%); top:clamp(6px,2.5vw,34px); }
/* Large ship：右下の雲（車＋人物の背後） */
.sec-ships .cloud-wb{ top:auto; left:auto; bottom:2%; right:-3%; width:min(42vw,460px); opacity:.8; transform:translateX(-400px); }

/* ============================================================
   Life and the world（商品グリッド）
============================================================ */
.grid-life{
  --gw:min(96vw,1122px);
  --life-L:min(24vw,217px);        /* 車イラスト用の左ライン（自動車・焼肉の左辺）＝建築側へ寄せる */
  zoom:.802;                       /* 全体を約0.8倍に縮小し、横幅を Large ship(900px) に合わせる */
  display:flex; flex-wrap:wrap; gap:clamp(6px,1.2vw,12px);
  justify-content:flex-start; align-items:flex-start;
  width:var(--gw); max-width:100%; margin:clamp(28px,4vw,44px) auto 0;
  position:relative; z-index:2;
}
/* トリミング無し：各画像を書き出しサイズの 1/2 で表示（cover しない） */
.grid-life .tile{ border-radius:4px; }
.grid-life .tile img{ width:auto; height:auto; max-width:100%; display:block; zoom:.5; }
/* 上段：ファッション（左）＋スイーツ・インテリア（右に縦積み） */
.life-top{ display:flex; gap:clamp(6px,1.2vw,12px); align-items:flex-start; }
.life-stack{ display:flex; flex-direction:column; gap:clamp(6px,1.2vw,12px); align-items:flex-start; }
/* 中段：自動車段＋焼肉段をまとめ、車イラストを左に絶対配置（両段にまたがる） */
.life-mid-section{ position:relative; width:100%; display:flex; flex-direction:column; gap:clamp(6px,1.2vw,12px); }
.life-mid-section>.deco-car-line{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:min(17vw,160px); opacity:.9; z-index:1; }
/* 自動車段：自動車・ゲーム（左＝--life-L から）＋ヘッドホン（右端） */
.life-band{ display:flex; width:100%; align-items:flex-start; gap:clamp(6px,1.2vw,12px); padding-left:var(--life-L); }
.life-band .deco-headphones{ position:static; width:min(16vw,150px); opacity:.9; margin-left:auto; transform:translate(-30px,10px); }
.life-mid{ display:flex; gap:clamp(6px,1.2vw,12px); align-items:center; }
/* 焼肉段：食肉（左＝--life-L から・自動車と左辺揃え）＋建築（右端） */
.life-row3{ display:flex; width:100%; gap:clamp(6px,1.2vw,12px); align-items:flex-start; padding-left:var(--life-L); }
.life-row3 .gi-arch{ margin-left:auto; }
/* 最下段：自転車（左辺＝車イラスト／グリッド左に揃え）＋紙製品＋女性イラスト */
.life-row4{ display:flex; width:100%; gap:clamp(6px,1.2vw,12px); align-items:flex-start; justify-content:flex-start; }
/* 紙製品＋キャプション（キャプションは画像の直下・右辺合わせ） */
.life-paper-wrap{ display:flex; flex-direction:column; align-items:flex-end; }
.life-note{ margin:6px 0 0; font-size:.62rem; color:rgba(255,255,255,.7); text-align:right; }
.life-row4 .deco-operator{ position:static; align-self:center; width:min(20vw,180px); opacity:.9; transform:translate(80px,0); }

/* ============================================================
   Large ship（船グリッド）
============================================================ */
.grid-ships{
  --gw:min(96vw,1123px);
  zoom:.802;                       /* 全体を縮小し横幅を約900pxに */
  display:flex; flex-direction:column; gap:clamp(8px,1.4vw,14px);
  width:var(--gw); max-width:100%; margin:clamp(28px,4vw,44px) auto 0;
  position:relative; z-index:2;
}
/* トリミング無し：書き出し比率のまま表示（角丸なし・ドロップシャドウ） */
.grid-ships .tile{ overflow:hidden; box-shadow:0 8px 22px rgba(11,46,99,.16); }
.grid-ships .tile img{ width:auto; height:auto; max-width:100%; display:block; zoom:.5; }
.ships-top{ display:flex; gap:clamp(8px,1.4vw,14px); align-items:flex-start; }
.ships-stack{ display:flex; flex-direction:column; gap:clamp(8px,1.4vw,14px); }
.ships-row{ display:flex; gap:clamp(8px,1.4vw,14px); justify-content:space-between; align-items:center; }
.ships-pair{ display:flex; gap:clamp(8px,1.4vw,14px); }
/* PC：上段＝コンテナ船を右／ばら積み・RORO を左に入れ替え（DOMは維持＝SP・ポップアップ順は不変） */
.ships-top .ships-stack{ order:1; }
.ships-top .gs-container{ order:2; }
/* PC：石灰石運搬船 ⇄ LNG船 の左右を入れ替え */
.ships-pair .gs-lng{ order:-1; }
/* 麦・魚＝ペアを右に寄せてできた左スペースに配置（フロー） */
.ships-row .deco-wheat{ position:static; align-self:center; width:min(16vw,180px); opacity:.9; }
.ships-row .deco-fish{ position:static; align-self:center; width:min(17vw,190px); opacity:.9; }
/* 車＋人物＝原油タンカーの行の右側（フロー配置） */
.ships-row-last .deco-drive{ position:static; align-self:center; width:min(26vw,300px); opacity:.9; transform:translateX(-37px); }

/* ============================================================
   Marine transportation（仕事グリッド）
============================================================ */
.grid-jobs{
  --gw:min(96vw,1329px);
  zoom:.677;                       /* 全体を縮小し横幅を約900pxに */
  display:flex; flex-direction:column; gap:clamp(8px,1.4vw,14px);
  width:var(--gw); max-width:100%; margin:clamp(28px,4vw,44px) auto 0;
  position:relative; z-index:2;
}
/* トリミング無し：書き出し比率のまま表示（角丸なし・ドロップシャドウ） */
.grid-jobs .tile{ overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.28); }
.grid-jobs .tile img{ width:auto; height:auto; max-width:100%; display:block; zoom:.5; }
.grid-jobs .gj-bridge img{ zoom:.5208; }   /* ブリッジを30%縮小（詳細度で .tile img を上書き） */
.jobs-top{ display:flex; gap:clamp(8px,1.4vw,14px); align-items:flex-start; }
.jobs-grid{ display:flex; flex-direction:column; gap:clamp(8px,1.4vw,14px); }
.jobs-grid .tile img{ zoom:.64; }          /* ブリッジ縮小で空いた分だけ右2×2を拡大 */
.jobs-r{ display:flex; gap:clamp(8px,1.4vw,14px); }
/* 中段・下段：画像ペアを72%幅にして片寄せ、空いたスペースにイラストを配置（トリミング無し・角丸なし） */
.jobs-row{ display:flex; gap:clamp(8px,1.4vw,14px); align-items:center; justify-content:space-between; }
.jobs-pair{ display:flex; gap:clamp(8px,1.4vw,14px); align-items:flex-start; width:72%; }
.jobs-pair .tile{ flex:1 1 0; }
.jobs-pair .tile img{ width:100%; height:auto; zoom:1; }
.jobs-pair .gj-shore{ flex-grow:664; } .jobs-pair .gj-cap{ flex-grow:1159; }
.jobs-pair .gj-sope{ flex-grow:665; } .jobs-pair .gj-smar{ flex-grow:828; }
/* 空いたスペースのイラスト（フロー配置）：中段=pointing（左）／下段=binoculars（右） */
.jobs-row .deco{ position:static; opacity:.9; }
/* イラスト＋背面の雲（相対配置ラッパー） */
.illust{ position:relative; flex:0 0 auto; align-self:center; }
.illust .deco{ position:relative; z-index:1; }
.illust-cloud{ position:absolute; z-index:-1; pointer-events:none; opacity:.9; max-width:none; }   /* max-width解除＋タイル背面(z-index:-1)へ */
.jobs-r2 .deco-pointing{ width:min(15.4vw,189px); }
.jobs-r3 .deco-binoculars{ width:min(15.4vw,189px); }
.jobs-r3{ align-items:flex-start; }                      /* 背の高い船長イラストで生じる写真上の余白を詰める */
/* transform→top/left に変更（スタッキングコンテキストを作らず、雲だけを背面へ送れるように） */
.illust-pointing{ top:-207px; }             /* 画面上でさらに上へ100px（zoom .677補正: 100/.677≒148px） */
.illust-binoculars{ left:-44px; top:88px; } /* 画面上 左30px・下60px（zoom .677補正） */
/* 雲をタイル背面に重ねる（大きさ・位置／px値は zoom .677 補正済み） */
.illust-pointing .illust-cloud{ width:300%; left:50%; top:50%; transform:translate(calc(-45% + 74px), calc(-42% + 148px)); }   /* 3倍・右50px/下100px移動 */
.illust-binoculars .illust-cloud{ width:300%; left:50%; top:50%; transform:translate(calc(-50% - 103px), -34%); }   /* 3倍・左70px移動 */

/* ============================================================
   Wonders of the sea（COMING SOON）
============================================================ */
.sec-wonders{ text-align:center; }
.coming-soon{
  display:inline-block; margin-top:clamp(28px,5vw,54px);
  font-family:'Courgette',cursive; color:var(--navy);
  font-size:clamp(1.1rem,3vw,1.5rem); letter-spacing:.08em;
  border:1.5px solid var(--navy); border-radius:2px;
  padding:.5em 1.6em;
}

/* ============================================================
   フッターヒーロー（"届く"を止めないために。）
============================================================ */
.footer-hero{ background:var(--white); }
.footer-hero img{ width:100%; }

/* ============================================================
   Short story（ショートストーリー）
============================================================ */
.sec-story{ background:var(--ice); padding:clamp(44px,7vw,86px) 0 clamp(30px,5vw,60px); position:relative; }
.sec-story .story-eyebrow{ display:block; text-align:center; margin:0 auto 10px; width:clamp(150px,30vw,260px); }
.sec-story h2{ text-align:center; color:var(--navy); font-size:clamp(1.3rem,4.4vw,2rem); font-weight:800; letter-spacing:.02em; }
.sp-br{ display:none; }   /* スマホのみ有効な改行 */
.story-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;                    /* 全行を等高に（第1話の高さに揃える） */
  gap:clamp(12px,2vw,22px);
  max-width:960px; margin:clamp(30px,5vw,50px) auto 0; padding:0 20px;
}
/* 第1話（公開中） */
.story-card.is-open{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 10px 26px rgba(11,46,99,.14);
  display:flex; flex-direction:column; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.story-card.is-open:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(11,46,99,.22); }
.story-card.is-open .badge{ color:var(--navy); font-weight:800; font-size:clamp(.78rem,1.7vw,.92rem); padding:12px 8px 8px; }
.story-card.is-open .thumb{ width:80%; margin:0 auto; aspect-ratio:16/11; object-fit:cover; }   /* ふたまわり縮小 */
.story-card.is-open .ttl{ color:var(--vivid); font-weight:800; font-size:clamp(.95rem,2.2vw,1.15rem); line-height:1.4; margin:12px 10px 6px; }
.story-card.is-open .desc{ color:var(--navy); font-size:clamp(.66rem,1.5vw,.76rem); line-height:1.6; margin:0 10px 16px; }
/* 第2〜8話（ロック） */
.story-card.is-locked{
  background:var(--card); border-radius:14px; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.4vw,26px) 10px; text-align:center;
}
.story-card.is-locked .ep{ font-size:clamp(.9rem,2.2vw,1.1rem); font-weight:700; }
.story-card.is-locked .lock{ width:clamp(30px,5vw,42px); height:auto; opacity:.95; }
.story-card.is-locked .soon{ font-size:clamp(.72rem,1.7vw,.88rem); }
/* タップ時の回転（回転ドア風の一回転）演出 */
.story-grid{ perspective:1200px; }
.story-card{ cursor:pointer; }
.story-card.spin{ animation:cardSpin .9s cubic-bezier(.35,.08,.85,.35); position:relative; z-index:2; }   /* 始めもやや速く→後半でさらに加速 */
@keyframes cardSpin{ from{ transform:rotateY(0deg); } to{ transform:rotateY(360deg); } }
/* 第1話：タイル回転→全画面ホワイトアウト→ストーリーモーダルへ切替（main.jsで制御） */
/* モーダル(z-index:2000)より前面に白幕を敷き、白くなった裏でモーダルを開いてから白幕をフェードアウト */
.story-whiteout{ position:fixed; inset:0; z-index:3000; background:#fff; opacity:0; pointer-events:none; transition:opacity .38s ease; }
.story-whiteout.is-on{ opacity:1; }
/* ロック時：回りかけて引っかかり、戻る（＋カギがガタッと震える） */
.story-card.locked-shake{ animation:cardLockedShake .55s ease; position:relative; z-index:2; }
@keyframes cardLockedShake{
  0%{ transform:rotateY(0deg); }
  22%{ transform:rotateY(32deg); }   /* 回りかけ */
  38%{ transform:rotateY(22deg); }   /* ガチッと引っかかる */
  52%{ transform:rotateY(30deg); }
  66%{ transform:rotateY(24deg); }
  100%{ transform:rotateY(0deg); }   /* あきらめて戻る */
}
.story-card.locked-shake .lock{ animation:lockJiggle .55s ease; transform-origin:center; }
@keyframes lockJiggle{
  0%,100%{ transform:rotate(0); }
  20%{ transform:rotate(-13deg) scale(1.12); }
  40%{ transform:rotate(12deg) scale(1.12); }
  58%{ transform:rotate(-8deg) scale(1.08); }
  78%{ transform:rotate(6deg); }
}

/* CTA */
.cta-wrap{ text-align:center; padding:clamp(40px,7vw,80px) 20px clamp(50px,8vw,90px); background:var(--white); }
.cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:clamp(20px,5vw,60px);
  background:var(--navy); color:#fff; font-weight:800;
  font-size:clamp(1rem,3vw,1.4rem); letter-spacing:.04em;
  padding:clamp(18px,3vw,26px) clamp(30px,6vw,70px);
  border-radius:100px; min-height:56px;
  box-shadow:0 12px 30px rgba(11,46,99,.28);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cta-btn:hover{ transform:translateY(-3px); background:#0d3576; box-shadow:0 18px 40px rgba(11,46,99,.36); }
.cta-btn .arrow{ font-weight:400; }

/* サイトフッター */
.site-footer{ background:var(--navy); color:#fff; text-align:center; padding:clamp(30px,5vw,48px) 20px; }
.site-footer .f-logo{ font-weight:800; letter-spacing:.04em; font-size:clamp(.9rem,2.4vw,1.05rem); }
.site-footer .f-links{ margin:14px 0 10px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.site-footer .f-links a{ font-size:.8rem; opacity:.85; text-decoration:underline; }
.site-footer .f-links a:hover{ opacity:1; }
.site-footer small{ display:block; opacity:.7; font-size:.7rem; margin-top:8px; }

/* ============================================================
   モバイル対応（〜767px）
============================================================ */
/* ============================================================
   FV：767px以下はスマホ（コンパクト／ポートレート）レイアウト。
   768px以上はPCのcqw固定比率レイアウトをそのまま比例縮小して使う
   （タブレット専用のscaleハックは廃止＝768〜1200pxもPCと同一構成）。
   ※動画・各グリッド等のSP化も従来どおり767px（下の @media 767）。
============================================================ */
@keyframes kamome1-soar-c{ 0%{transform:translate(57cqw,10vh) scaleX(-1)}50%{transform:translate(58cqw,12vh) scaleX(-1)}100%{transform:translate(57cqw,10vh) scaleX(-1)} }
@keyframes kamome2-soar-c{ 0%{transform:translate(calc(72cqw - 50px),7vh) scaleX(-1)}50%{transform:translate(calc(71cqw - 50px),8.5vh) scaleX(-1)}100%{transform:translate(calc(72cqw - 50px),7vh) scaleX(-1)} }
@media (max-width:767px){
  /* スマホFV：全オブジェクトを幅比例(cqw)で配置＝画面幅が変わっても相対配置が崩れない。
     基準は390px幅(iPhone12/13)。1cqw≒3.9px として従来の固定pxをcqwへ換算（390pxでは従来と同一の見た目、
     他の幅では丸ごと比例スケール）。高さは幅比例＋タブレット暴走防止に760pxで上限。 */
  /* FV下部の余白をカット：中身は不動のまま外枠(.fv-bleed)で下辺をクリップし、Movieを上へ覗かせる（PC同様の手法）。
     カット量は margin-bottom（負のcqw）で調整。数値を増やすほど下を多くカット＝Movieがより覗く */
  .fv-bleed{ overflow:hidden; }
  .scene--p3{ height:min(166.667cqw,760px); min-height:0; margin-bottom:-20cqw; }
  .sec-movie{ padding-top:24px; }   /* FV下端とMovie見出しの白ギャップを詰める（SPのみ・48px→24px） */
  .fv-left{ width:82cqw; top:auto; bottom:98.205cqw; left:calc(50% - 5.128cqw); transform:translateX(-50%); }   /* さらに上へ20px（計） */
  .bodycopy-img{ position:absolute; width:66.667cqw; top:auto; bottom:78.461cqw; left:6.410cqw; transform:none!important; margin:0; }   /* さらに上へ20px */
  .ship--p3{ width:90.2cqw; left:calc(50% + 5.128cqw); bottom:calc(8% - 5.129cqw); }   /* 10%拡大＋下へ15px */
  .kumo-01{ width:110cqw; left:-5.128cqw; margin-top:-5.128cqw; }   /* 中央の大きい雲：上へ20px */
  .kumo-02{ width:44cqw; left:15.385cqw; }
  .kumo-03{ width:36cqw; right:-2.564cqw; } .kumo-04{ display:none; }
  .wave-white{ left:50%; width:96.8cqw; bottom:calc(10% + 3.846cqw); }        /* 10%拡大＋下へ15px */
  .wave-big{ left:calc(50% - 25.641cqw); width:29.333cqw; bottom:calc(8% + 3.846cqw); }      /* 10%拡大＋下へ15px */
  .wave-white-sp{ left:calc(50% + 12.821cqw); width:36.667cqw; bottom:calc(14% - 16.667cqw); }   /* 10%拡大＋下へ15px */
  .wave-sp01{ left:calc(40% + 12.821cqw); width:19.067cqw; bottom:calc(16% - 3.846cqw); }    /* 10%拡大＋下へ15px */
  .wave-sp02{ right:0; width:11.733cqw; bottom:calc(14% + 3.846cqw); }                       /* 10%拡大＋下へ15px */
  .cargo--p3{ width:11.5cqw; }
  .p3-cloth{ top:78.205cqw; right:calc(1% + 12.821cqw); left:auto; width:19cqw; }
  .p3-jeans{ top:40.256cqw; right:calc(20% - 19.744cqw); left:auto; width:12cqw; rotate:-10deg; }   /* 左へ25px＋左10度 */
  .p3-shoes{ top:70.000cqw; right:1%; left:auto; width:18cqw; }   /* 上へ25px */
  .p3-chair{ top:0; right:calc(8% - 8.974cqw); left:auto; width:19cqw; }
  .p3-bike{ top:88.462cqw; right:1%; left:auto; width:17cqw; }   /* 上へ25px */
  .p3-spice{ top:2.564cqw; left:calc(2% + 20.513cqw); right:auto; width:17cqw; }
  .p3-komugi{ top:5.128cqw; left:6%; right:auto; width:9cqw; }
  .p3-drink{ top:101.282cqw; left:3%; right:auto; width:15cqw; rotate:15deg; }   /* 上へ20px＋右15度 */
  .p3-pizza{ top:115.385cqw; left:2%; right:auto; }   /* 上へ20px */
  .kamome-static--p3{ width:26cqw; bottom:99.743cqw; left:3%; }   /* 中央左のカモメ：さらに上へ20px */
  .kamome--1{ left:25.641cqw; animation:kamome-fade-in 1.2s ease 3.5s forwards, kamome1-soar-c 9s ease-in-out 3.5s infinite; }
  .kamome--2{ left:29.487cqw; animation:kamome-fade-in 1.2s ease 5.5s forwards, kamome2-soar-c 10.5s ease-in-out 5.5s infinite; }
  @keyframes fv-left-rise{ from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)} }
}
@media (max-width:767px){
  /* ムービー：SPはインライン埋め込み表示（PCのサムネ→モーダルは非表示） */
  video.movie-embed{ display:block; }
  .movie-thumb{ display:none; }

  /* グリッドをモバイル用に再構成 */
  .grid-life,.grid-ships,.grid-jobs{ --gw:90vw; zoom:1; }
  .sec-head h2{ font-size:clamp(1.05rem,4.4vw,1.35rem); line-height:1.55; }

  /* ===== Life（スマホ）：全リーフをフラット化しコラージュ配置（余白×3＝24px） ===== */
  .grid-life{ flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:24px; width:90vw; max-width:90vw; margin:24px auto 0; box-sizing:border-box; position:relative; }
  .grid-life .tile img{ zoom:1; width:100%; height:auto; }
  .life-top,.life-stack,.life-mid-section,.life-band,.life-mid,.life-row3,.life-row4{ display:contents; }
  .life-mid-section>.deco-car-line{ position:static; transform:none; }
  /* 1 ファッション：右寄せ・右余白なし（画面右端フルブリード）＋一回り拡大（左へ広がる） */
  .grid-life .gi-fashion{ order:1; flex:0 0 auto; width:calc(93% + 5vw); margin-left:auto; margin-right:-5vw; }
  /* 2 スイーツ|インテリア：自転車サイズ、スイーツ左辺をファッション左辺(=枠の7%位置)に合わせ、インテリア付随 */
  .grid-life .gi-sweets{ order:2; flex:0 0 40%; margin-left:7%; }
  .grid-life .gi-interior{ order:3; flex:0 0 40%; }
  /* 3 自動車：左寄せ・左余白なし（画面左端までフルブリード／右辺は維持） */
  .grid-life .gi-car{ order:4; flex:0 0 auto; width:calc(84% + 5vw); margin-right:auto; margin-left:-5vw; }
  /* 4 ヘッドホン(20%縮小)|ゲーム(sp画像・余白多め) */
  .life-band .deco-headphones{ display:block; order:5; flex:0 0 20%; width:20%; margin:0 0 0 calc(7% + 15px); transform:none; align-self:center; }
  .grid-life .gi-game{ order:6; flex:0 0 57%; margin:16px auto; align-self:center; }   /* スイーツ画像の高さに合わせて拡大 */
  /* 5 食肉：右寄せ・右余白なし（画面右端フルブリード）＋ファッションと同サイズ幅 */
  .grid-life .gi-meat{ order:7; flex:0 0 auto; width:calc(93% + 5vw); margin-left:auto; margin-right:-5vw; }
  /* 6 建築(自転車サイズ・左辺を食肉=7%に合わせ)|車イラスト(左へ20px) */
  .grid-life .gi-arch{ order:8; flex:0 0 40%; margin-left:7%; margin-right:auto; }
  .life-mid-section>.deco-car-line{ order:9; flex:0 0 32%; width:32%; align-self:center; margin-right:35px; }
  /* 7 自転車(左辺を食肉=7%に合わせ、建築の下)|紙製品（紙製品は50px下） */
  .grid-life .gi-bike{ order:10; flex:0 0 40%; margin-left:7%; margin-top:-17vw; }   /* 車イラストとの高さ差ぶん詰めて建築の直下へ（vwで実機にも追従） */
  .life-paper-wrap{ order:11; flex:0 0 40%; margin-top:-12px; position:relative; z-index:1; }   /* 車イラストの直下へ寄せる */
  /* 8 女性イラスト：40%縮小・自転車の下 */
  .life-row4 .deco-operator{ display:block; order:12; flex:0 0 auto; width:min(34%,137px); transform:none; align-self:flex-start; margin-top:-20vw; margin-left:calc(7% + 30px); }   /* 20%拡大・自転車の直下(紙製品の下がりぶんを詰める)＋右30px */
  /* 雲：見出し裏(a)／女性イラスト横(b)＝20%拡大・上部1/7が紙製品下に潜り込む */
  .sec-life .cloud-deco{ display:block; }
  .sec-life .cloud-a{ transform:translateX(-50%); }
  .sec-life .cloud-b{ transform:none; width:min(58vw,264px); left:auto; right:4%; bottom:88px; z-index:0; }
  /* ===== Large ship（スマホ）：全リーフをフラット化しorderで再配置 ===== */
  .grid-ships{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:24px; width:90vw; max-width:90vw; margin:24px auto 0; box-sizing:border-box; }
  .grid-ships .tile img{ zoom:1; width:100%; height:auto; }
  .ships-top,.ships-stack,.ships-row,.ships-pair{ display:contents; }
  .grid-ships .deco{ position:static; transform:none; opacity:.9; }
  .grid-ships .gs-container{ order:1; flex:0 0 auto; width:calc(100% + 5vw); margin-left:-5vw; }               /* 左フルブリード */
  .grid-ships .gs-bulk{ order:2; flex:0 0 46%; margin-left:auto; }                                            /* ROROに付随して右へ */
  .grid-ships .gs-roro{ order:3; flex:0 0 auto; width:calc(46% + 5vw); margin-right:-5vw; }                   /* 右フルブリード */
  .grid-ships .gs-lime{ order:4; flex:0 0 auto; width:calc(56% + 5vw); margin-left:-5vw; }                    /* 左フルブリード */
  .grid-ships .deco-wheat{ display:block; order:5; flex:0 0 31%; width:31%; align-self:center; }              /* 10%縮小 */
  .grid-ships .deco-fish{ display:block; order:6; flex:0 0 34%; width:34%; align-self:center; }
  .grid-ships .gs-lng{ order:7; flex:0 0 auto; width:calc(56% + 5vw); margin-left:auto; margin-right:-5vw; }  /* 右フルブリード */
  .grid-ships .gs-carc{ order:8; flex:0 0 auto; width:calc(56% + 5vw); margin-left:-5vw; }                    /* 左フルブリード */
  .grid-ships .deco-drive{ display:block; order:9; flex:0 0 34%; width:34%; align-self:center; margin-left:auto; }
  .grid-ships .gs-chem{ order:10; flex:0 0 auto; width:calc(56% + 5vw); margin-left:auto; margin-right:-5vw; }  /* LNGと同サイズ・右フルブリード */
  .grid-ships .gs-crude{ order:11; flex:0 0 auto; width:calc(100% + 5vw); margin-left:-5vw; }                 /* 左フルブリード */
  /* 見出し裏の雲のみ表示（下部の白雲bはモバイル非表示） */
  .sec-ships .cloud-deco{ display:block; width:min(65vw,600px); }   /* ふたまわり拡大 */
  .sec-ships .cloud-wb{ display:none; }
  /* ===== Marine（スマホ）：%ステージ＋絶対配置（幅非依存・イラスト重なり対策） =====
     正しい配置＝旧flexが「幅430px」で出す構図（双眼鏡イラスト=陸上職の右／指差し
     イラスト=運航管理の左、2つは分離）。狭い幅ではflex-wrapが折り返し、この2イラストが
     左で重なって潰れていた（iPhone 12/13/14=390-393pxで発生）。対策として、430px時の
     実測レイアウトを % で絶対配置し、親の aspect-ratio で全端末に相似固定する。 */
  .grid-jobs{ position:relative; width:90vw; max-width:90vw; aspect-ratio:387 / 1657.75; margin:24px auto 0; box-sizing:border-box; }
  .jobs-top,.jobs-grid,.jobs-r,.jobs-row,.jobs-pair{ display:contents; }
  .grid-jobs .jobs-break{ display:none; }
  .grid-jobs .tile img,.grid-jobs .gj-bridge img{ zoom:1; width:100%; height:auto; }
  .sec-jobs .grid-jobs .tile,.grid-jobs .illust{ position:absolute; margin:0; }   /* .sec-jobs で詳細度を上げ、MQ外の .grid-jobs .tile{position:relative} を上書き */
  .grid-jobs .tile{ z-index:1; }
  .grid-jobs .illust{ z-index:0; transform:none; }
  .grid-jobs .illust .deco{ position:relative; width:100%; height:auto; z-index:1; }
  .grid-jobs .illust-cloud{ display:none; }
  /* 各要素：430px実測レイアウトを left/top/width の % で固定（height は画像比で自動） */
  .grid-jobs .gj-bridge        { left:-5.56%; top:0;      width:101.55%; }   /* 上段：ブリッジ(左フルブリード) */
  .grid-jobs .gj-cargo         { left:8.27%;  top:15.79%; width:44%; }       /* 荷役 */
  .grid-jobs .gj-chief         { left:11.80%; top:30.68%; width:47.55%; }    /* 機関長 */
  .grid-jobs .gj-meng          { left:54.45%; top:20.84%; width:45.55%; }    /* 機関士(右) */
  .grid-jobs .gj-cook          { left:47.73%; top:41.11%; width:44%; }       /* 司厨(右) */
  .grid-jobs .gj-cap           { left:4%;     top:51.23%; width:101.55%; }   /* 中段：船長(右フルブリード) */
  .grid-jobs .gj-shore         { left:4%;     top:65.53%; width:48%; }       /* 陸上職 */
  .grid-jobs .illust-binoculars{ left:67.5%;  top:66.62%; width:21%; }       /* 双眼鏡イラスト＝陸上職の右隣 */
  .grid-jobs .illust-pointing  { left:11.75%; top:77.02%; width:20%; }       /* 指差しイラスト＝運航管理の左隣 */
  .grid-jobs .gj-sope          { left:43.73%; top:77.44%; width:48%; }       /* 運航管理 */
  .grid-jobs .gj-smar          { left:-5.56%; top:88.36%; width:73.55%; }    /* 海務担当(左フルブリード) */
  /* 雲：見出しa／背面のb（すべて % で幅非依存に） */
  .sec-jobs .jobs-cloud-head{ display:block; width:min(85vw,760px); }
  .grid-jobs .jobs-cloud-mid{ display:block; position:absolute; z-index:0; pointer-events:none; left:-8%; top:33%; width:min(88vw,475px); transform:scaleX(-1); opacity:.9; }   /* 機関士・厨房の背面 */
  .grid-jobs .jobs-cloud-bottom{ display:block; position:absolute; z-index:0; pointer-events:none; left:auto; right:-8%; bottom:-1.2%; width:min(88vw,475px); opacity:.9; }     /* 海務担当の背面から右下へ */
  .sp-br{ display:inline; }   /* スマホでは「湊つぐみ、」の後で改行 */
  /* ===== Short story（スマホ）：第1話=左カラムの縦カード／第2話をその右隣・第3〜8話は2列 ===== */
  .story-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; }   /* 全タイルを第1話と同一サイズに */
  .story-card.is-open{ grid-column:auto; flex-direction:column; text-align:center; align-items:stretch; }
  .story-card.is-open .thumb{ width:80%; margin:0 auto; aspect-ratio:16/11; object-fit:cover; }   /* ふたまわり縮小 */
  .story-card.is-locked .ep{ transform:translateY(20px); }     /* 話数テキストを20px下へ */
  .story-card.is-locked .soon{ transform:translateY(-20px); }  /* 近日公開テキストを20px上へ */
  .story-card.is-locked .lock{ width:clamp(42px,11vw,54px); }  /* カギマークを少し大きく（SP） */

  /* （旧レイアウト用の装飾間引きルールは撤去。各セクションの新ルールで配置） */
  .cloud-deco{ display:none; }
}

/* モバイルの story-open 内テキストラッパー */
.open-body{ display:flex; flex-direction:column; }

/* ============================================================
   prefers-reduced-motion：動きを抑制し静的な最終状態を表示
============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .scene--p3 .fv-left,.scene--p3 .bodycopy-img{ opacity:1!important; transform:none!important; }
  .scene--p3 .wave-fx{ opacity:1!important; }
  .ship--p3{ filter:grayscale(0) brightness(1.05) drop-shadow(0 8px 40px rgba(30,143,213,.45))!important; opacity:1!important; transform:translateX(-50%)!important; }
  .cargo--p3{ opacity:1!important; transform:none!important; filter:grayscale(0) saturate(1.6) brightness(1.12)!important; }
  .kamome-static--p3{ opacity:1!important; transform:scaleX(-1)!important; }
  .kamome--1{ opacity:1!important; transform:translate(57cqw,6cqw) scaleX(-1)!important; }
  .kamome--2{ opacity:1!important; transform:translate(68.667cqw,4.2cqw) scaleX(-1)!important; }
}

/* ============================================================
   画像ポップアップ（ライトボックス）
============================================================ */
/* ============================================================
   クリック可能タイルの「押せる」演出（PC/SP共通）
   ※各セクションのタイルは順次ポップアップ化予定のため先行して付与
   - PCホバー：浮き＋影＋画像ズーム
   - 共通：タップ/クリックで押し込み（scale .97）
============================================================ */
.js-popup,
.grid-ships .tile,
.grid-jobs .tile{ cursor:pointer; position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent;
  transition:transform .22s ease, box-shadow .22s ease; }
.js-popup img,
.grid-ships .tile img,
.grid-jobs .tile img{ transition:transform .35s ease; }
@media (hover:hover){
  .js-popup:hover,
  .grid-ships .tile:hover,
  .grid-jobs .tile:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(11,46,99,.28); }
  .js-popup:hover img,
  .grid-ships .tile:hover img,
  .grid-jobs .tile:hover img{ transform:scale(1.06); }
}
.js-popup:active,
.grid-ships .tile:active,
.grid-jobs .tile:active{ transform:scale(.97); }
.popup{
  position:fixed; inset:0; z-index:1000; display:none;
  align-items:center; justify-content:center;
  background:rgba(2,18,50,.82); padding:clamp(16px,5vw,64px);
}
.popup.is-active{ display:flex; animation:popupFade .34s ease both; }
/* 背景（オーバーレイ）のフェードイン */
@keyframes popupFade{ from{ opacity:0; } to{ opacity:1; } }
/* 画像は「ふわっと」＝フェード＋軽い迫り出し。開いた時も左右送り時も同じ演出を
   JS（render）で opacity / transform をトグルして毎回発火させる */
.popup-img{ transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.22,.61,.36,1); }
/* 冒頭の薄いホワイトアウト：画像の上に白ベールを重ね、演出開始時に白→透明でフェード（JSで発火） */
.popup-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:#fff; border-radius:8px; opacity:0;
  transition:opacity 1.2s ease;
}
@media (prefers-reduced-motion:reduce){
  .popup.is-active{ animation-duration:.001s; }
  .popup-img{ transition:none; }
  .popup-veil{ transition:none; }
}
.popup-img{
  max-width:min(92vw,1100px); max-height:88vh; width:auto; height:auto;
  object-fit:contain; border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.55);
  background:#fff;
  pointer-events:none;   /* 画像はクリックを受けない＝重なっても左右矢印のクリックを奪わない（挙動は不変） */
}
/* 画像を包むステージ：サイズは画像と一致。✕はこの右上に密着させる */
.popup-stage{ position:relative; display:flex; align-items:center; justify-content:center; max-width:100%; max-height:100%; }
.popup-close,.popup-nav{
  position:absolute; border:0; cursor:pointer; color:#fff; z-index:2;   /* 画像(.popup-stage)より前面へ。無指定だとDOM順で画像が戻るボタンに被る */
  /* 濃色チップ＋白い内側リング＋影：明るい画像に重なっても視認できる */
  background:rgba(6,20,48,.58); backdrop-filter:blur(4px);
  box-shadow:0 2px 12px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  line-height:1; transition:background .2s;
}
.popup-close:hover,.popup-nav:hover{ background:rgba(6,20,48,.86); }
/* ✕：画面隅ではなく画像（ポップアップ）の右上角に密着 */
.popup-close{ top:8px; right:8px; width:44px; height:44px; border-radius:50%; font-size:26px; z-index:2; }
.popup-nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; font-size:34px; padding-bottom:4px; z-index:3; pointer-events:auto; }   /* 常に最前面＆クリック有効 */
.popup-prev{ left:clamp(10px,2vw,28px); }
.popup-next{ right:clamp(10px,2vw,28px); }
@media (max-width:767px){
  .popup-nav{ width:38px; height:38px; font-size:24px; }
  .popup-close{ width:40px; height:40px; font-size:24px; }
}

/* ============================================================
   ショートストーリー 第1話：パララックス・フルスクリーン
   - #storyModal を .story-card.is-open クリックで開く（main.js）
   - .story-bg（bg.png）は背景として固定し、スクロールに対して
     0.5倍速で背景位置を動かす＝奥行きパララックス
   - 前景 .pll 画像はスクロールに応じて微小に translateY（速度差）
============================================================ */
.story-modal{ position:fixed; inset:0; z-index:2000; display:none; background:#fff; }
.story-modal.is-active{ display:block; }
/* 閉じる演出：カード位置へ縮小＋回転＋フェード＝吸い込まれる（transform-origin はJSでカード中心に設定）
   加速イージング（ease-in）で最後にスッと吸い込まれる。低減設定時はJS側で即クローズ */
.story-modal.is-closing{
  transition:transform .55s cubic-bezier(.6,.04,.98,.34), opacity .55s ease;
  will-change:transform, opacity; pointer-events:none;
}
.story-scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
/* 背景：ベースは白。その上に波パターン（bg.png）を縦タイルで敷き、JSで background-position を動かす */
.story-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:#fff url(../images/story/bg.png) 50% 0 / 100% auto repeat-y;
  will-change:background-position;
}
.story-inner{
  position:relative; z-index:1;
  max-width:1040px; margin:0 auto;
  padding:clamp(72px,11vw,150px) clamp(20px,5vw,60px) clamp(90px,13vw,170px);
}
/* 閉じる（常時右上に固定） */
.story-close{
  position:fixed; top:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px); z-index:3;
  width:clamp(44px,4vw,54px); aspect-ratio:1; border:0; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
  font-size:clamp(26px,3vw,32px); color:#fff; background:rgba(6,20,48,.6); backdrop-filter:blur(4px);
  box-shadow:0 2px 12px rgba(0,0,0,.4), inset 0 0 0 1.5px rgba(255,255,255,.5); transition:background .2s;
}
.story-close:hover{ background:rgba(6,20,48,.85); }

/* タイトル */
.story-head{ text-align:center; margin-bottom:clamp(44px,8vw,110px); }
.story-head .st-label{ width:clamp(58px,8vw,96px); height:auto; margin:0 auto; }   /* imgはdisplay:blockのため margin:auto で中央寄せ */
.story-head .st-title{ display:block; width:min(90%,720px); height:auto; margin:clamp(14px,2.4vw,28px) auto 0; }

/* 本文（中央1カラム：テキスト・画像とも中央配置） */
/* 本文行：テキスト＋写真を左右交互に配置（PDF準拠） */
.st-row{ display:flex; gap:clamp(24px,4vw,56px); align-items:center; max-width:1060px; margin:clamp(64px,11vw,150px) auto; }
.st-row.rev{ flex-direction:row-reverse; }   /* 写真を左・テキストを右に */
.st-row .st-photo{ flex:1 1 50%; }
.st-row .st-photo--wide{ flex:1 1 56%; }      /* 夕日の船は大きめ（PDF準拠） */
.st-photo img{ width:100%; height:auto; display:block; border-radius:0; box-shadow:0 22px 54px rgba(11,46,99,.20); }
.st-text{
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  color:rgba(0,0,0,.9); font-size:clamp(.98rem,1.45vw,1.18rem); line-height:2.25; letter-spacing:.03em;
  text-align:left;   /* 本文は左揃え／改行はPCのみ pcbr（PDFの各行が1行に収まる幅・級数に調整） */
}
.st-row .st-text{ flex:1 1 50%; margin:0; }
.pcbr{ display:inline; }   /* PCはPDF準拠の改行を表示（スマホでは非表示＝自然折り返し） */

/* 小装飾（地球儀・高速道路） */
.st-floats{ display:flex; gap:clamp(18px,3.5vw,48px); justify-content:center; align-items:center; margin:clamp(50px,8vw,120px) auto; }
.st-float{ flex:0 1 auto; margin:0; }
.st-float img{ width:100%; max-width:min(44vw,360px); height:auto; display:block; border-radius:0; box-shadow:0 16px 40px rgba(11,46,99,.18); }

/* フィーチャー（コンテナ船） */
.st-feature{ text-align:center; margin:clamp(70px,13vw,180px) 0; }
.st-feature img{ width:min(100%,1000px); height:auto; display:block; margin:0 auto; border-radius:6px; box-shadow:0 30px 70px rgba(11,46,99,.24); }

/* 結び */
.st-closing{ text-align:center; margin-top:clamp(48px,9vw,120px); }
.st-closing p{
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  color:rgba(0,0,0,.9); font-size:clamp(1rem,1.6vw,1.25rem); line-height:2.2; letter-spacing:.06em;
}
.st-closing .next{ margin-top:1.6em; font-size:clamp(.85rem,1.3vw,1rem); opacity:.68; letter-spacing:.1em; }

/* パララックス／リード時のフェードイン */
.pll{ will-change:transform; }
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s ease, transform .95s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }

/* ===== PC（768px以上）：船を左フルブリードで大きく／地球儀・高速道路を段違い配置 ===== */
@media (min-width:768px){
  /* 船（s2）：2回り大きく、左端までフルブリード。テキストは右側に（横スクロールは .story-scroll の overflow-x:hidden で抑止） */
  .st-row--ship{
    width:100vw; max-width:none; box-sizing:border-box;
    margin-left:calc(50% - 50vw); margin-right:0;   /* 左端をビューポート左端へ */
    padding-right:clamp(24px,5vw,64px);             /* 右側テキストの余白 */
    gap:clamp(28px,4vw,60px); align-items:center;
  }
  .st-row--ship .st-photo--wide{ flex:0 0 auto; width:54vw; }   /* 大きめの船 */
  .st-row--ship .st-text{ flex:1 1 auto; margin-left:70px; }    /* テキストブロックを右へ70px */

  /* 地球儀（s3）＋高速道路（s4）：中央寄り＋右下へ段違い（スクショ準拠） */
  .st-floats{ justify-content:center; align-items:flex-start; gap:clamp(24px,4vw,64px); margin-top:clamp(-40px,-3vw,-12px); }
  .st-floats .st-float:nth-child(1){ width:24vw; transform:translate(140px,-140px); }   /* 地球儀：右140px・上140px */
  .st-floats .st-float:nth-child(2){ width:22vw; margin-top:120px; transform:translateX(140px); }  /* 高速道路：右下へ＋右140px */
  .st-floats .st-float img{ max-width:100%; }                          /* 幅はラッパー側で制御 */

  /* 橋（s5）：一回り大きく＋右120px */
  .st-row--bridge .st-photo{ flex:1 1 auto; transform:translateX(120px); }

  /* テキストの意図しない折り返し防止：橋（s5）・手渡し（s6）の行を広げてテキスト表示幅を確保
     （行をビューポート中央に置いたまま最大1240px/96vwへ拡大。あふれは .story-scroll の overflow-x:hidden で抑止） */
  .st-row--bridge, .st-row--handover{
    width:min(1240px,96vw); max-width:none;
    margin-left:calc(50% - min(620px,48vw));
  }
  .st-row--bridge .st-text, .st-row--handover .st-text{ flex:1 1 auto; min-width:500px; }   /* テキスト最小幅を確保 */
  .st-row--handover .st-photo{ flex:1 1 auto; }
}

/* スマホ：縦積み */
@media (max-width:767px){
  /* スマホは縦積み（テキスト→写真） */
  .st-row, .st-row.rev{ flex-direction:column; gap:22px; max-width:100%; margin:clamp(48px,13vw,80px) auto; }
  .st-row .st-text, .st-row .st-photo, .st-row .st-photo--wide{ flex:1 1 auto; width:100%; }
  .st-text{ line-height:2.15; }
  .st-floats{ gap:16px; margin:clamp(44px,11vw,72px) auto; }
  .st-float img{ max-width:46vw; }
  .pcbr{ display:none; }   /* スマホはPC用の強制改行を無効化＝自然に折り返す */
}

/* 動きを抑制する設定：パララックス・フェードを無効化して静止表示 */
@media (prefers-reduced-motion:reduce){
  .story-bg{ background-position:50% 0 !important; }
  .pll{ transform:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}