/* =========================================================
   有限会社 栄宝汽船 ｜ 採用・コーポレートサイト
   ========================================================= */
:root{
  --ocean-900:#0a1530;
  --ocean-800:#122247;
  --ocean-700:#1b2e57;
  --ocean-600:#27407a;
  --paper:#f1ede4;
  --paper-2:#e7e1d4;
  --ink:#16252d;
  --slate:#5b6a71;
  --foam:#f6f3ec;
  --mist:rgba(246,243,236,.66);
  --mist-2:rgba(246,243,236,.40);
  --brass:#b39160;
  --line-dark:rgba(246,243,236,.18);
  --line-light:rgba(22,37,45,.16);
  --mincho:"Shippori Mincho",serif;
  --gothic:"Zen Kaku Gothic New",sans-serif;
  --serif-en:"Cormorant Garamond",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--gothic);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.85;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.en{font-family:var(--serif-en);letter-spacing:.14em}
.label{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:clamp(15px,1.4vw,20px);
  letter-spacing:.08em;
  color:var(--brass);
}
.wrap{max-width:1340px;margin:0 auto;padding:0 clamp(24px,5vw,76px)}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(24px,4vw,52px);
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.nav.scrolled{background:rgba(10,21,48,.9);backdrop-filter:blur(10px);padding:14px clamp(24px,4vw,52px);box-shadow:0 1px 0 rgba(246,243,236,.08)}
.brand{position:relative;display:flex;align-items:center}
.brand img{height:42px;width:auto;display:block;transition:opacity .4s}
.brand .logo-n{position:absolute;left:0;top:0;opacity:0}
.nav.scrolled .brand .logo-w{opacity:1}
.nav.scrolled .brand .logo-n{opacity:0}
.nav-menu{display:flex;align-items:center;gap:clamp(18px,2.2vw,40px)}
.nav-menu a{color:rgba(246,243,236,.92);font-size:14px;letter-spacing:.12em;font-weight:400;transition:color .3s}
.nav.scrolled .nav-menu a{color:rgba(246,243,236,.92)}
.nav-menu a:hover{color:var(--brass)}
.nav-menu a.em{color:#ffffff;font-weight:600}
.nav.scrolled .nav-menu a.em{color:#ffffff}
.nav-cta{display:flex;gap:10px;align-items:center}
.pill{
  border:1px solid var(--mist-2);color:var(--foam);
  padding:9px 20px;border-radius:40px;font-size:13px;letter-spacing:.12em;
  transition:.3s;white-space:nowrap;
}
.nav.scrolled .pill{border-color:var(--mist-2);color:var(--foam)}
.pill.filled{background:var(--brass);border-color:var(--brass);color:#fff;font-weight:600;padding:10px 28px;box-shadow:0 6px 20px -6px rgba(179,145,96,.7)}
.pill:hover{background:var(--brass);border-color:var(--brass);color:#fff}
.pill.filled:hover{background:#c9a574;border-color:#c9a574;color:#fff}
.nav-toggle{display:none}

/* ============ HERO ============ */
.hero{
  position:relative;min-height:100vh;
  background:
    radial-gradient(120% 80% at 50% 6%, rgba(72,116,196,.40) 0%, rgba(11,23,48,0) 55%),
    linear-gradient(180deg,var(--ocean-900) 0%, var(--ocean-800) 46%, var(--ocean-700) 100%);
  display:flex;flex-direction:column;justify-content:center;
  padding:124px clamp(24px,5vw,76px) 64px;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(246,243,236,.05) 0 1px,transparent 1px 7px);
  opacity:.5;pointer-events:none;
}
.hero-frame{
  position:relative;width:min(840px,76%);aspect-ratio:16/8;margin:0 auto;
  max-height:42vh;z-index:1;
}
.hero-frame video{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.hero-head{
  position:relative;z-index:3;margin-top:clamp(-40px,-7vw,-104px);
}
.hero-head h1{
  font-family:var(--mincho);font-weight:700;color:var(--foam);
  font-size:clamp(40px,7.4vw,108px);line-height:1.04;letter-spacing:.05em;
  text-shadow:0 6px 40px rgba(0,0,0,.5);
}
.hero-head h1 span{display:block;white-space:nowrap}
.hero-head h1 .soft{font-weight:400}
.hero-sub{display:flex;align-items:center;gap:18px;margin-top:26px}
.hero-sub .ln{width:clamp(40px,7vw,96px);height:1px;background:var(--mist-2)}
.hero-sub .en{color:var(--mist);font-size:clamp(15px,1.5vw,22px);font-style:italic}
.scroll-ind{
  position:absolute;right:clamp(20px,4vw,48px);bottom:30px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--mist);
}
.scroll-ind .en{font-size:10px;letter-spacing:.3em;writing-mode:vertical-rl}
.scroll-ind .bar{width:1px;height:54px;background:linear-gradient(var(--mist),transparent);animation:drop 2.2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ INTRO BAND ============ */
.intro{background:var(--ocean-700);color:var(--foam);padding:clamp(80px,11vw,160px) 0}
.intro .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,110px);align-items:start}
.intro h2{font-family:var(--mincho);font-weight:500;font-size:clamp(26px,3.4vw,46px);line-height:1.5;letter-spacing:.05em}
.intro h2 .accent{color:var(--brass)}
.intro p{color:var(--mist);font-size:clamp(15px,1.15vw,17px);line-height:2.2;font-weight:300;letter-spacing:.04em}
.intro p + p{margin-top:1.6em}

/* ============ SECTION SHELL ============ */
.sec{padding:clamp(84px,11vw,168px) 0;position:relative}
.sec-dark{background:var(--ocean-800);color:var(--foam)}
.sec-paper{background:var(--paper);color:var(--ink)}
.sec-paper-2{background:var(--paper-2);color:var(--ink)}
.sec-head{text-align:center;margin-bottom:clamp(50px,7vw,96px)}
.sec-head .label{display:block;margin-bottom:18px}
.sec-head h2{font-family:var(--mincho);font-weight:600;font-size:clamp(30px,4.4vw,58px);letter-spacing:.16em}
.sec-head .ja-sub{margin-top:24px;font-family:var(--mincho);font-size:clamp(18px,1.9vw,27px);font-weight:600;letter-spacing:.08em;color:var(--ink)}
#philosophy .sec-head .ja-sub{color:var(--foam)}
.sec-dark .sec-head .ja-sub{color:var(--foam)}

/* ============ MESSAGE ============ */
.message{max-width:860px;margin:0 auto}
.message-body .label{display:block;margin-bottom:22px}
.message-body h3{font-family:var(--mincho);font-weight:600;font-size:clamp(28px,3.6vw,44px);line-height:1.4;letter-spacing:.04em;margin-bottom:40px;color:var(--foam);white-space:nowrap}
.message-body p{color:var(--mist);font-weight:300;font-size:clamp(14.5px,1.08vw,16.5px);line-height:2.2;letter-spacing:.04em}
.message-body p + p{margin-top:1.5em}
.sign{margin-top:48px;display:flex;align-items:baseline;gap:18px}
.sign .role{font-size:13px;letter-spacing:.18em;color:var(--mist)}
.sign .nm{font-family:var(--mincho);font-size:clamp(22px,2.4vw,30px);letter-spacing:.22em;color:var(--foam)}

/* ============ PHILOSOPHY ============ */
.phil-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,4vw,72px);margin-bottom:clamp(56px,7vw,100px)}
.phil-card{border-top:1px solid var(--line-dark);padding-top:30px}
.phil-card .tag{font-family:var(--serif-en);font-style:italic;color:var(--brass);font-size:16px;letter-spacing:.08em;display:block;margin-bottom:18px}
.phil-card h3{font-family:var(--mincho);font-weight:600;font-size:clamp(26px,3vw,40px);line-height:1.35;letter-spacing:.06em;margin-bottom:22px;color:var(--foam)}
.phil-card p{color:var(--mist);font-weight:300;line-height:2.1;letter-spacing:.04em;font-size:15px}
.creed-label{font-family:var(--serif-en);font-style:italic;color:var(--brass);font-size:16px;text-align:center;display:block;margin-bottom:44px}
.creed{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-dark)}
.creed-item{padding:38px 28px 8px;position:relative}
.creed-item:not(:last-child){border-right:1px solid var(--line-dark)}
.creed-item .no{font-family:var(--serif-en);font-size:46px;color:var(--brass);line-height:1;display:block;margin-bottom:22px;font-weight:500}
.creed-item h4{font-family:var(--mincho);font-weight:600;font-size:19px;letter-spacing:.06em;margin-bottom:16px;color:var(--foam);line-height:1.5}
.creed-item p{color:var(--mist);font-weight:300;font-size:13.5px;line-height:1.95;letter-spacing:.03em}

/* ============ RECRUIT ============ */
.recruit-lead{max-width:880px;margin:0 auto clamp(56px,7vw,92px);text-align:center}
.recruit-lead h3{font-family:var(--mincho);font-weight:600;font-size:clamp(26px,3.6vw,46px);line-height:1.5;letter-spacing:.06em;margin-bottom:30px}
.recruit-lead p{color:var(--slate);line-height:2.15;letter-spacing:.04em;font-size:clamp(14.5px,1.05vw,16px)}
.recruit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,40px);margin-bottom:clamp(54px,6vw,88px)}
.rc{background:#fff;border:1px solid var(--line-light);padding:clamp(28px,2.6vw,44px) clamp(24px,2.2vw,36px);display:flex;flex-direction:column}
.rc .no{font-family:var(--serif-en);font-style:italic;color:var(--brass);font-size:17px;letter-spacing:.1em;margin-bottom:24px}
.rc h4{font-family:var(--mincho);font-weight:600;font-size:21px;letter-spacing:.05em;margin-bottom:18px;line-height:1.5}
.rc p{color:var(--slate);font-size:14px;line-height:2;letter-spacing:.03em}
.recruit-cta{text-align:center}
.recruit-cta .close{font-family:var(--mincho);font-size:clamp(17px,1.6vw,22px);letter-spacing:.08em;line-height:2;color:var(--ink);margin-bottom:40px}
.btn-round{display:inline-flex;align-items:center;gap:16px;cursor:pointer;background:none;border:none;font-family:var(--gothic);font-size:15px;letter-spacing:.18em;color:var(--ink)}
.btn-round .circ{width:62px;height:62px;border-radius:50%;border:1px solid var(--brass);display:flex;align-items:center;justify-content:center;color:var(--brass);transition:.35s}
.btn-round:hover .circ{background:var(--brass);color:#fff}
.btn-round .circ svg{width:18px;height:18px}

/* ============ FLEET ============ */
.fleet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,3.4vw,60px)}
.ship img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:6px;display:block}
.fleet-hint{text-align:center;color:var(--mist);font-size:13px;letter-spacing:.05em;margin:-24px 0 clamp(40px,5vw,60px)}
/* 船舶写真クリック → 航行情報（MarineTraffic） */
.ship-link{position:relative;display:block;overflow:hidden;border-radius:6px;cursor:pointer}
.ship-link img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.ship-link:hover img{transform:scale(1.05)}
.ship-link::after{
  content:"現在の航行情報 \2197";
  position:absolute;left:14px;bottom:14px;
  background:rgba(10,21,48,.82);color:var(--foam);
  font-family:var(--gothic);font-size:12px;letter-spacing:.08em;
  padding:8px 15px;border-radius:30px;border:1px solid var(--brass);
  opacity:0;transform:translateY(8px);transition:.35s ease;
  pointer-events:none;backdrop-filter:blur(4px);
}
.ship-link:hover::after{opacity:1;transform:none}
.ship-link:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.ship-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:24px;padding-bottom:18px;border-bottom:1px solid var(--line-dark)}
.ship-meta .nm{font-family:var(--mincho);font-weight:600;font-size:clamp(22px,2.3vw,30px);letter-spacing:.08em;color:var(--foam)}
.ship-meta .ship-type{font-family:var(--serif-en);color:var(--brass);font-size:19px;letter-spacing:.06em;white-space:nowrap}
.ship-spec{display:flex;gap:18px 26px;margin-top:18px;flex-wrap:wrap}
.ship-spec span{font-size:13px;letter-spacing:.06em;color:var(--mist);white-space:nowrap}
.ship-spec span b{font-weight:400;color:var(--foam);font-family:var(--serif-en);font-size:15px;margin-left:8px}
.fleet-note{margin-top:clamp(48px,5vw,76px);text-align:center;color:var(--mist);font-weight:300;font-size:14px;letter-spacing:.05em;line-height:2}
.fleet-note b{color:var(--brass);font-weight:400}

/* ============ OPERATOR ============ */
.operator{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(40px,5vw,90px);align-items:center}
.op-since{font-family:var(--serif-en);font-style:italic;color:var(--brass);font-size:17px;letter-spacing:.06em;display:block;margin-bottom:20px}
.op-main h3{font-family:var(--mincho);font-weight:700;font-size:clamp(30px,4.2vw,58px);letter-spacing:.04em;line-height:1.18}
.op-main h3 .op-sub{font-size:.4em;font-weight:500;color:var(--slate);letter-spacing:.1em;display:block;margin-top:12px}
.op-main > p{color:var(--slate);line-height:2.2;letter-spacing:.04em;font-size:clamp(14.5px,1.05vw,16px);margin:30px 0 36px}
.op-video{display:inline-flex;align-items:center;gap:18px;padding:14px 30px 14px 16px;border:1px solid var(--line-light);border-radius:48px;transition:.3s;color:var(--ink)}
.op-video:hover{background:var(--ocean-700);border-color:var(--ocean-700);color:var(--foam)}
.op-play{width:48px;height:48px;border-radius:50%;background:var(--brass);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.op-play svg{width:17px;height:17px;margin-left:2px}
.op-vtext b{font-family:var(--mincho);font-weight:600;font-size:16px;letter-spacing:.06em;display:block}
.op-vtext small{font-size:12px;color:var(--slate);letter-spacing:.04em}
.op-video:hover .op-vtext small{color:var(--mist)}
.op-facts{display:grid;border-top:1px solid var(--line-light)}
.op-fact{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:22px 4px;border-bottom:1px solid var(--line-light)}
.op-fact .k{font-size:13px;letter-spacing:.14em;color:var(--slate)}
.op-fact .v{font-family:var(--mincho);font-weight:600;font-size:clamp(18px,1.8vw,24px);letter-spacing:.04em;text-align:right}
.op-fact .v small{font-size:.58em;margin-left:4px;color:var(--brass);font-weight:400}

/* ============ STAKEHOLDER ============ */
.stake{max-width:920px;margin:0 auto;text-align:center}
.stake .big{font-family:var(--mincho);font-weight:600;font-size:clamp(28px,3.8vw,50px);letter-spacing:.08em;line-height:1.5;margin-bottom:44px}
.stake .big .mk{color:var(--brass)}
.stake .big-lead{white-space:nowrap}
.stake p{color:var(--slate);line-height:2.3;letter-spacing:.04em;font-size:clamp(14.5px,1.08vw,16.5px)}
.stake p + p{margin-top:1.7em}

/* ============ COMPANY ============ */
.company{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(40px,6vw,100px);align-items:start}
.company .label{display:block;margin-bottom:18px}
.company h2{font-family:var(--mincho);font-weight:600;font-size:clamp(28px,3.6vw,46px);letter-spacing:.14em;color:var(--foam)}
.info{width:100%;border-collapse:collapse}
.info tr{border-bottom:1px solid var(--line-dark)}
.info th{text-align:left;vertical-align:top;width:170px;padding:22px 10px 22px 0;font-weight:400;font-size:14px;letter-spacing:.12em;color:var(--mist);white-space:nowrap}
.info td{padding:22px 0;font-size:15px;line-height:1.9;letter-spacing:.04em;color:var(--foam);font-weight:300}
.info td .en{font-family:var(--serif-en);font-size:16px;letter-spacing:.06em}

/* ============ FOOTER ============ */
.foot{background:var(--ocean-900);color:var(--mist);padding:clamp(60px,7vw,96px) 0 38px}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:48px;border-bottom:1px solid var(--line-dark)}
.foot-brand .brand{color:var(--foam)}
.foot-brand .addr{margin-top:26px;font-size:13px;line-height:2;font-weight:300;letter-spacing:.04em}
.foot-brand .addr .en{font-family:var(--serif-en);letter-spacing:.08em}
.foot-nav{display:flex;gap:clamp(40px,6vw,90px)}
.foot-nav .col h5{font-family:var(--serif-en);font-style:italic;color:var(--brass);font-size:14px;margin-bottom:20px;letter-spacing:.08em}
.foot-nav .col a{display:block;font-size:13.5px;letter-spacing:.08em;padding:7px 0;color:var(--mist);transition:.3s}
.foot-nav .col a:hover{color:var(--foam);padding-left:6px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:30px;font-size:11px;letter-spacing:.1em}
.foot-bottom .en{font-family:var(--serif-en);font-style:italic;letter-spacing:.1em}

/* ============ ABOUT ============ */
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,5vw,84px);align-items:center}
.about-grid > img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block}
.about-txt h3{font-family:var(--mincho);font-weight:600;font-size:clamp(24px,2.9vw,40px);line-height:1.45;letter-spacing:.05em;margin-bottom:30px}
.about-txt p{color:var(--slate);line-height:2.15;letter-spacing:.04em;font-size:clamp(14.5px,1.05vw,16px)}
.about-txt p+p{margin-top:1.3em}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line-light);padding-top:clamp(36px,4vw,56px)}
.fact .n{font-family:var(--serif-en);font-size:clamp(34px,4vw,54px);color:var(--ink);line-height:1;letter-spacing:.02em}
.fact .n small{font-size:.42em;margin-left:6px;color:var(--brass);font-style:italic}
.fact .l{margin-top:14px;font-size:12.5px;letter-spacing:.14em;color:var(--slate)}

/* ============ SUBHEAD / SHARED ============ */
.sub-h{display:flex;align-items:baseline;gap:28px;margin:clamp(54px,6vw,84px) 0 34px}
.sub-h .en{font-family:var(--serif-en);font-style:italic;color:var(--brass);font-size:17px;white-space:nowrap;flex:0 0 auto}
.sub-h h3{font-family:var(--mincho);font-weight:600;font-size:clamp(21px,2.3vw,30px);letter-spacing:.08em;white-space:nowrap}
.sub-h .rule{flex:1;height:1px;background:var(--line-light)}
.sec-dark .sub-h .rule,.sec-paper-2 .sub-h .rule{background:var(--line-light)}
.lead-c{max-width:860px;margin:0 auto;text-align:center;color:var(--slate);line-height:2.2;letter-spacing:.04em;font-size:clamp(14.5px,1.05vw,16px)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,40px)}

/* ============ WORK ============ */
.cycle{margin-top:clamp(44px,5vw,72px);background:var(--ocean-700);color:var(--foam);padding:clamp(34px,4vw,54px) clamp(30px,4vw,58px);display:grid;grid-template-columns:.72fr 1.28fr;gap:30px;align-items:center;border-radius:4px}
.cycle h4{font-family:var(--mincho);font-weight:600;font-size:clamp(20px,2.2vw,28px);letter-spacing:.06em;line-height:1.5}
.cycle p{color:var(--mist);font-weight:300;line-height:2.1;font-size:15px;letter-spacing:.04em}
.cycle p + p{margin-top:1em}

/* ============ RECRUIT (MAIN) ============ */
#recruit .sec-head h2{font-size:clamp(34px,5vw,68px)}
.want{max-width:920px;margin:0 auto;border-top:1px solid var(--line-light)}
.want li{list-style:none;display:flex;gap:26px;align-items:baseline;padding:26px 6px;border-bottom:1px solid var(--line-light)}
.want .no{font-family:var(--serif-en);font-style:italic;color:var(--brass);font-size:19px;min-width:34px}
.want .t{font-family:var(--mincho);font-weight:600;font-size:clamp(17px,1.7vw,23px);letter-spacing:.04em;flex:0 0 auto}
.want .d{color:var(--slate);font-size:14px;margin-left:auto;max-width:48%;line-height:1.95;text-align:left}
.req-note{margin-top:18px;font-size:12.5px;letter-spacing:.04em;color:var(--slate)}
.info.light tr{border-color:var(--line-light)}
.info.light th{color:var(--slate)}
.info.light td{color:var(--ink)}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.flow .step{background:#fff;border:1px solid var(--line-light);padding:30px 24px;position:relative}
.flow .step .no{font-family:var(--serif-en);font-style:italic;color:var(--brass);font-size:15px;letter-spacing:.1em;display:block;margin-bottom:14px}
.flow .step h5{font-family:var(--mincho);font-weight:600;font-size:18px;letter-spacing:.05em;margin-bottom:10px}
.flow .step p{color:var(--slate);font-size:13px;line-height:1.85}
.flow .step:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:11px;height:11px;border-top:1.5px solid var(--brass);border-right:1.5px solid var(--brass);transform:translateY(-50%) rotate(45deg);z-index:2;background:var(--paper)}
.entry-band{margin-top:clamp(64px,7vw,108px);background:linear-gradient(135deg,var(--ocean-800),var(--ocean-700));color:var(--foam);border-radius:4px;padding:clamp(50px,6vw,88px) clamp(30px,5vw,72px);text-align:center;position:relative;overflow:hidden}
.entry-band::before{content:"ENTRY";position:absolute;right:24px;bottom:-18px;font-family:var(--serif-en);font-style:italic;font-size:clamp(70px,12vw,170px);color:rgba(246,243,236,.05);letter-spacing:.04em;pointer-events:none}
.entry-band .label{display:block;margin-bottom:20px;position:relative}
.entry-band h3{font-family:var(--mincho);font-weight:600;font-size:clamp(26px,3.4vw,46px);letter-spacing:.06em;line-height:1.5;margin-bottom:20px;position:relative}
.entry-band > p{color:var(--mist);font-weight:300;line-height:2;letter-spacing:.04em;margin-bottom:42px;position:relative}
.entry-actions{display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap;position:relative}
.btn-entry{background:var(--brass);color:#fff;font-family:var(--gothic);font-size:15px;letter-spacing:.16em;padding:19px 46px;border-radius:40px;border:none;cursor:pointer;transition:.3s;display:inline-flex;align-items:center;gap:14px}
.btn-entry:hover{background:#c9a574;transform:translateY(-2px)}
.btn-entry svg{width:18px;height:18px}
.entry-tel{text-align:left;font-family:var(--serif-en);font-size:clamp(21px,2vw,28px);letter-spacing:.06em;color:var(--foam);white-space:nowrap}
.entry-tel small{display:block;font-family:var(--gothic);font-size:11px;letter-spacing:.2em;color:var(--mist);margin-bottom:3px}

/* ============ FLOAT ENTRY ============ */
.float-entry{position:fixed;right:22px;bottom:22px;z-index:45;background:var(--ocean-700);color:var(--foam);border:1px solid var(--brass);border-radius:40px;padding:14px 26px;font-size:14px;letter-spacing:.14em;display:flex;align-items:center;gap:11px;box-shadow:0 14px 40px -12px rgba(0,0,0,.5);transition:.35s;opacity:0;transform:translateY(20px);pointer-events:none}
.float-entry.show{opacity:1;transform:none;pointer-events:auto}
.float-entry:hover{background:var(--brass);border-color:var(--brass);color:#fff}
.float-entry .dot{width:7px;height:7px;border-radius:50%;background:var(--brass)}
.float-entry:hover .dot{background:#fff}

/* ============ FEATURE IMAGE ============ */
.feature{margin:clamp(36px,4vw,56px) 0}
.feature img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block}

/* ============ SAFETY ============ */
.safety{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,90px);align-items:center}
.safety-badge{display:flex;flex-direction:column;align-items:center;gap:22px}
.safety-badge img{width:min(260px,72%);height:auto;border-radius:10px;box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
.safety-cap{font-family:var(--serif-en);font-style:italic;color:var(--brass);font-size:15px;letter-spacing:.08em}
.safety-body h3{font-family:var(--mincho);font-weight:600;font-size:clamp(26px,3.4vw,46px);letter-spacing:.05em;line-height:1.35;color:var(--foam);margin-bottom:28px}
.safety-body h3 .safety-sub{font-size:.42em;font-weight:500;color:var(--mist);letter-spacing:.06em;display:block;margin-top:14px;font-family:var(--gothic)}
.safety-body p{color:var(--mist);font-weight:300;line-height:2.2;letter-spacing:.04em;font-size:clamp(14.5px,1.08vw,16.5px)}

/* ============ ENTRY FORM ============ */
.entry-form{max-width:880px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px 30px}
.field{display:flex;flex-direction:column;gap:10px}
.field.full{grid-column:1 / -1}
.field label{font-size:13px;letter-spacing:.1em;color:var(--slate);font-weight:500}
.field label .req{color:#fff;background:var(--brass);margin-left:10px;font-size:10px;letter-spacing:.08em;padding:2px 8px;border-radius:3px;vertical-align:middle}
.field input,.field select,.field textarea{font-family:var(--gothic);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line-light);border-radius:5px;padding:14px 16px;width:100%;transition:.2s}
.field textarea{min-height:150px;resize:vertical;line-height:1.8}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(179,145,96,.15)}
.field input::placeholder,.field textarea::placeholder{color:#b3ada0}
.consent{grid-column:1 / -1;display:flex;align-items:flex-start;gap:13px;font-size:14px;color:var(--slate);line-height:1.8;cursor:pointer}
.consent input{width:19px;height:19px;margin-top:2px;accent-color:var(--brass);flex:0 0 auto}
.consent a{color:var(--brass);text-decoration:underline;text-underline-offset:2px}
.form-note{grid-column:1 / -1;text-align:center;font-size:12.5px;color:var(--slate);margin-top:2px;letter-spacing:.04em}
.form-submit{grid-column:1 / -1;display:flex;justify-content:center;margin-top:14px}
.form-submit button{background:var(--brass);color:#fff;border:none;border-radius:44px;padding:19px 64px;font-family:var(--gothic);font-size:15px;letter-spacing:.18em;cursor:pointer;transition:.3s;font-weight:600;box-shadow:0 10px 26px -10px rgba(179,145,96,.7)}
.form-submit button:hover{background:#c9a574;transform:translateY(-2px)}
.form-success{max-width:760px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line-light);border-radius:10px;padding:clamp(48px,6vw,76px) 40px;display:none}
.form-success.show{display:block}
.form-success .chk{width:62px;height:62px;border-radius:50%;border:1.5px solid var(--brass);color:var(--brass);display:flex;align-items:center;justify-content:center;margin:0 auto 26px}
.form-success .chk svg{width:26px;height:26px}
.form-success h3{font-family:var(--mincho);font-size:clamp(24px,2.6vw,32px);color:var(--ink);margin-bottom:18px;letter-spacing:.06em}
.form-success p{color:var(--slate);line-height:2.1;letter-spacing:.04em}

/* ============ SEA ACCENT — shared ============ */
.sea-bg{position:absolute;inset:0;z-index:0;will-change:transform}
.sea-bg img{width:100%;height:100%;object-fit:cover;display:block}
.sea-waves{position:absolute;left:0;right:0;bottom:-1px;height:clamp(80px,11vw,150px);z-index:3;overflow:hidden;pointer-events:none}
.sea-waves svg{position:absolute;bottom:0;left:0;width:200%;height:100%;display:block}
.sea-waves .w1{animation:waveMove 22s linear infinite}
.sea-waves .w2{animation:waveMove 32s linear infinite reverse}
@keyframes waveMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.sea-waves .w1,.sea-waves .w2{animation:none}}

/* ============ SEA POEM ============ */
.sea-poem{position:relative;min-height:120vh;display:flex;align-items:center;overflow:hidden;background:var(--ocean-900)}
.sea-poem__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,21,48,.66) 0%,rgba(10,21,48,.40) 38%,rgba(8,17,40,.82) 100%)}
.sea-poem__inner{position:relative;z-index:4;width:100%;display:flex;flex-direction:column;gap:clamp(46px,8vw,116px);padding-top:clamp(96px,13vw,176px);padding-bottom:clamp(150px,17vw,240px)}
.sea-poem__head{display:flex;align-items:center;gap:22px;margin-bottom:clamp(8px,2vw,28px)}
.sea-poem__head .en{font-family:var(--serif-en);font-style:italic;color:var(--brass);font-size:clamp(16px,1.6vw,22px);letter-spacing:.1em;white-space:nowrap}
.sea-poem__head .ln{flex:1;max-width:160px;height:1px;background:var(--line-dark)}
.stanza{max-width:min(620px,82%)}
.stanza p{font-family:var(--mincho);font-weight:500;color:var(--foam);font-size:clamp(19px,2.05vw,31px);line-height:2.0;letter-spacing:.09em;text-shadow:0 2px 34px rgba(0,0,0,.55)}
.stanza:nth-of-type(odd){margin-right:auto}
.stanza:nth-of-type(even){margin-left:auto;text-align:right}
.stanza--close{max-width:none;text-align:center;margin:clamp(8px,2vw,30px) auto 0}
.stanza--close .lead{font-family:var(--serif-en);font-style:italic;color:var(--brass);font-size:clamp(17px,1.7vw,23px);letter-spacing:.08em;margin-bottom:22px}
.stanza--close .big{font-family:var(--mincho);font-weight:600;color:var(--foam);font-size:clamp(28px,4vw,58px);line-height:1.45;letter-spacing:.08em;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.stanza--close .big .mk{color:var(--brass)}
/* モバイル専用の追い改行（スマホ以外では無効） */
br.sp-br{display:none}

/* ============ SEA SPECIAL ============ */
.sea-special{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;background:var(--ocean-800)}
.sea-special__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(106deg,rgba(8,17,40,.90) 0%,rgba(10,21,48,.60) 48%,rgba(10,21,48,.18) 100%)}
.sea-special__inner{position:relative;z-index:4;max-width:min(660px,90%);padding:clamp(96px,13vw,180px) 0}
.sea-special .label{display:block;margin-bottom:24px}
.sea-special h2{font-family:var(--mincho);font-weight:600;color:var(--foam);font-size:clamp(32px,5vw,68px);line-height:1.3;letter-spacing:.07em;text-shadow:0 2px 36px rgba(0,0,0,.55);margin-bottom:36px}
.sea-special p{color:var(--mist);font-weight:300;font-size:clamp(15px,1.2vw,18px);line-height:2.25;letter-spacing:.05em;max-width:560px}
.sea-special p .em{color:var(--foam);font-weight:400}
.sea-special .more{margin-top:46px}
.sea-vcap{position:absolute;right:clamp(20px,4vw,54px);top:50%;transform:translateY(-50%);z-index:4;writing-mode:vertical-rl;font-family:var(--serif-en);font-style:italic;color:var(--mist-2);font-size:13px;letter-spacing:.34em}

@media(max-width:1080px){
  .sea-poem{min-height:0}
  .stanza{max-width:88%}
  .stanza:nth-of-type(even){margin-left:0;text-align:left}
  .sea-vcap{display:none}
}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .nav-menu{display:none}
  .nav-toggle{display:flex}
  .nav-cta .pill{display:none}
  .intro .wrap,.message,.company{grid-template-columns:1fr;gap:48px}
  .phil-top{grid-template-columns:1fr}
  .creed{grid-template-columns:1fr 1fr}
  .creed-item:nth-child(2){border-right:none}
  .creed-item{border-bottom:1px solid var(--line-dark)}
  .recruit-grid{grid-template-columns:1fr}
  .fleet-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .operator{grid-template-columns:1fr;gap:44px}
  .safety{grid-template-columns:1fr;gap:40px}
  .entry-form{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr;gap:30px}
  .two-col{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr}
  .flow .step:not(:last-child)::after{display:none}
  .cycle{grid-template-columns:1fr;gap:18px}
  .want li{flex-wrap:wrap;gap:8px 22px}
  .want .d{max-width:none;margin-left:0;width:100%}
  .entry-tel{text-align:center}
}
/* ── タブレット・スマホ：ヒーローを大きく ── */
@media(max-width:768px){
  .hero{padding:118px clamp(16px,4vw,76px) 56px}
  .hero-frame{width:96%;max-height:50vh;aspect-ratio:16/10}
  .hero-head{margin-top:-28px}
  .hero-head h1{font-size:clamp(46px,12vw,80px)}
  .hero-sub{gap:12px;margin-top:18px}
  .hero-sub .en{font-size:13.5px}
}
@media(max-width:560px){
  .creed{grid-template-columns:1fr}
  .creed-item{border-right:none}

  /* ヒーロー：動画とキャッチコピーをさらに大きく */
  .hero-frame{width:100%;max-height:48vh;aspect-ratio:16/11}
  .hero-head{margin-top:-22px}
  .hero-head h1{font-size:clamp(46px,13vw,72px)}

  /* イントロ見出し：「絶対的な安全」こそが、で1行目を収める */
  .intro h2{font-size:23px;line-height:1.6}

  /* 代表メッセージ見出し：「安全はすべてに優先する。」を必ず1行に収める */
  .message-body h3{font-size:clamp(22px,6.4vw,42px)}

  /* ステークホルダー：「「安全はすべてに優先する」。」も1行に収める */
  .stake .big{font-size:clamp(17px,5vw,28px)}

  /* Ode to the Sea：詩の行が中途半端に折り返さないよう調整 */
  .stanza{max-width:100%}
  .stanza p{font-size:18px;letter-spacing:.03em;line-height:2.0}
  .stanza--close .big{font-size:26px;letter-spacing:.04em;line-height:1.55}
  br.sp-br{display:inline}

  /* サブ見出し（私たちが約束する、3つのこと 等）：画面内に収める */
  .sub-h{flex-wrap:wrap;gap:6px 16px}
  .sub-h .en{font-size:15px}
  .sub-h h3{white-space:normal;font-size:clamp(19px,5.4vw,24px)}
  .sub-h .rule{flex-basis:100%;order:3}

  .brand img{height:36px}
  .info th{width:120px;font-size:12.5px}
  .foot-top{flex-direction:column}

  /* タッチ端末はホバー不可のため航行情報バッジを常時表示 */
  .ship-link::after{opacity:.95;transform:none}
}
.nav-toggle{flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav-toggle span{width:26px;height:1.5px;background:var(--foam);transition:.3s}
.nav.scrolled .nav-toggle span{background:var(--foam)}

/* ============ MOBILE NAV DRAWER ============ */
.nav-drawer{
  position:fixed;inset:0;z-index:55;background:rgba(10,21,48,.97);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.nav-drawer.open{opacity:1;pointer-events:auto}
.nav-drawer a{color:var(--foam);font-family:var(--mincho);font-size:20px;letter-spacing:.12em;padding:14px 0}
.nav-drawer a.em{color:var(--brass)}
.nav-drawer .close{position:absolute;top:24px;right:26px;background:none;border:none;color:var(--foam);font-size:30px;line-height:1;cursor:pointer}