/* =========================================================
   Luff Corporate Site / Design A  ―  "ロジックで、確度を上げる。"
   PC 1440 base / SP 375 base / BP 768
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --navy:        #12224A;
  --navy-dark:   #0A1530;
  --navy-light:  #2A4276;
  --gold:        #C9A227;
  --white:       #FFFFFF;
  --base:        #F4F6FA;
  --text:        #1A1A1A;
  --text-sub:    #5A6272;
  --line:        #D8DEE9;
  --line-dark:   rgba(255,255,255,.18);
  --text-on-navy:#FFFFFF;
  --sub-on-navy: #C8CEDC;

  --font: "Inter","Helvetica Neue",Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium",sans-serif;

  --wrap: 1200px;
  --pad: 80px;
  --rail: max(28px, calc(50% - 600px)); /* 左レール（設計線）のX位置＝wrapの外側 */
  --sec-pad: 150px;          /* セクション上下 */
  --ease: cubic-bezier(.16,.68,.32,1);
  --ease-hover: cubic-bezier(.22,.61,.36,1);   /* ホバー用：等速に近く滑らか */
  --dur-hover: .28s;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--text);
  font-family:var(--font);
  font-size:16px; font-weight:400; line-height:1.9;
  letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p,figure,dl,dd{margin:0;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
svg{display:block;}

/* ---------- 3. Layout primitives ---------- */
/* z-index の階層：セクション背景（auto） < 帆船レイヤー（1） < コンテンツ（2） */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2; }
.sec{ position:relative; padding-block:var(--sec-pad); }
.sec--tight{ padding-block:120px; }

/* 左レール：wfの縦罫を「設計線」として全ページに通す */
.sec::after{
  content:""; position:absolute; left:var(--rail); top:0; bottom:0;
  width:1px; background:var(--line); pointer-events:none;
}
.sec::before{
  content:""; position:absolute; left:calc(var(--rail) - 3px); top:var(--sec-pad);
  width:7px; height:7px; background:var(--gold); z-index:1;
}
.sec--dark::after{ background:var(--line-dark); }

/* 背景トーン：紺ベタ／白／薄グレーをセクション単位で交互に */
.sec--gray{ background:var(--base); }
/* 紺ベタは完全な平面にせず、Primary Light を極薄で流して面に深さを持たせる */
.sec--navy{
  background:
    radial-gradient(125% 95% at 84% 6%, rgba(42,66,118,.72) 0%, rgba(42,66,118,0) 56%),
    radial-gradient(90% 70% at 6% 100%, rgba(10,21,48,.85) 0%, rgba(10,21,48,0) 62%),
    var(--navy);
  color:var(--text-on-navy);
}

/* 微細なグレイン：紺の面に素材感を与え、のっぺりした平面を避ける */
.grain{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
.sec--navy > .wrap{ position:relative; z-index:2; }

/* ---------- 帆船レイヤー：スクロールに合わせてタッキングしながら下っていく ---------- */
.ship{
  position:fixed; left:0; top:0; z-index:1;
  width:250px; pointer-events:none; opacity:0;
  transform:translate3d(6vw,52vh,0);
  will-change:transform,opacity;
}
.ship svg{ width:100%; height:auto; overflow:visible; }
.ship path{
  fill:none; stroke:#7C8AAB; stroke-width:1;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.34;                      /* 白・薄グレー・紺のいずれの面でも成立する中間色 */
}
.ship .wake{ opacity:.20; stroke-dasharray:2 7; }
.no-scroll-ctx .ship{ display:none; }
.sec--navy .sec__ja,
.sec--navy .lead-sub{ color:var(--sub-on-navy); }

/* ---------- 4. Section heading（大きな英字＋小さな和文） ---------- */
.eyebrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px 14px;
  font-size:14px; font-weight:500; letter-spacing:.18em; line-height:1.5;
  color:var(--text-sub);
}
.sec--navy .eyebrow{ color:var(--sub-on-navy); }
.eyebrow i{ width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none; }
.eyebrow span{ width:48px;height:1px;background:currentColor;opacity:.5; }

.sec__en{
  display:block; margin-top:26px;
  font-size:88px; font-weight:700; line-height:.96;
  letter-spacing:.01em;              /* 詰め気味に組む */
  color:var(--navy);
}
.sec--navy .sec__en{ color:var(--white); }
.sec__ja{
  display:block; margin-top:14px;
  font-size:15px; font-weight:500; letter-spacing:.1em; line-height:1;
  color:var(--text-sub);
}
.sec__lead{
  margin-top:40px; max-width:30em;
  font-size:36px; font-weight:700; line-height:1.6; letter-spacing:.02em;
}
.sec--navy .sec__lead{ color:var(--white); }

/* 見出し英字：到達時に下からスライドイン（1回のみ） */
.slidein{ display:block; overflow:hidden; }
.slidein > b{
  display:block; font-weight:inherit;
  transform:translateY(105%);
  transition:transform .7s var(--ease);
}
.slidein.is-in > b,
.is-in .slidein > b{ transform:translateY(0); }

/* ---------- 5. Buttons / links ---------- */
.btn{
  display:inline-flex; align-items:center; gap:18px;
  padding:18px 40px; border-radius:2px;
  background:var(--navy); color:var(--white);
  font-size:16px; font-weight:700; letter-spacing:.06em; line-height:1;
  border:1px solid var(--navy);
  transition:background-color var(--dur-hover) var(--ease-hover),color var(--dur-hover) var(--ease-hover),border-color var(--dur-hover) var(--ease-hover);
}
.btn:hover,.btn:focus-visible{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn--ghost:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
.sec--navy .btn--ghost{ color:var(--white); border-color:rgba(255,255,255,.42); }
.btn .ar{ flex:none; }

.tlink{
  display:inline-flex; align-items:center; gap:12px;
  font-size:16px; font-weight:700; line-height:1;
  padding-bottom:8px; border-bottom:1px solid var(--line);
  transition:color var(--dur-hover) var(--ease-hover),border-color var(--dur-hover) var(--ease-hover);
}
.tlink:hover{ color:var(--gold); border-color:var(--gold); }
.sec--navy .tlink{ border-color:rgba(255,255,255,.3); color:var(--white); }
.sec--navy .tlink:hover{ color:var(--gold); border-color:var(--gold); }
.tlink .ar{ transition:transform var(--dur-hover) var(--ease-hover); will-change:transform; }
.tlink:hover .ar{ transform:translateX(6px); }
.btn .ar,.hd__cta .ar{ transition:transform var(--dur-hover) var(--ease-hover); }
.btn:hover .ar,.hd__cta:hover .ar{ transform:translateX(6px); }

/* ---------- 6. Header ---------- */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:110;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.hd__in{
  max-width:1440px; margin-inline:auto; height:88px;
  padding-inline:40px;
  display:flex; align-items:center; gap:40px;
  transition:height .32s var(--ease-hover);
}
.hd.is-stuck .hd__in{ height:68px; }
.hd__logo{ flex:none; }
/* width ではなく transform でスケール（レイアウトを起こさない） */
.hd__logo img{ width:132px; transform-origin:left center; transition:transform .32s var(--ease-hover),filter .25s ease; }
.hd.is-stuck .hd__logo img{ transform:scale(.86); }
.hd__logo--on-dark img{ filter:brightness(0) invert(1); }
.hd.is-stuck .hd__logo--on-dark img{ filter:none; }

.gnav{ margin-left:auto; display:flex; align-items:center; gap:34px; }
.gnav a{ display:block; text-align:center; color:var(--white); transition:color var(--dur-hover) var(--ease-hover); }
.hd.is-stuck .gnav a{ color:var(--navy); }
.gnav .en{ display:block; font-size:15px; font-weight:700; letter-spacing:.06em; line-height:1; }
.gnav .ja{ display:block; margin-top:7px; font-size:14px; font-weight:400; letter-spacing:.06em; line-height:1; opacity:.72; }
.gnav a:hover{ color:var(--gold); }

.hd__cta{
  flex:none; display:inline-flex; align-items:center; gap:14px;
  padding:17px 28px; border-radius:2px;
  background:var(--navy); color:var(--white);
  border:1px solid rgba(255,255,255,.45);
  font-size:15px; font-weight:700; letter-spacing:.06em; line-height:1;
  transition:background-color var(--dur-hover) var(--ease-hover),color var(--dur-hover) var(--ease-hover),border-color var(--dur-hover) var(--ease-hover);
}
.hd.is-stuck .hd__cta{ border-color:var(--navy); }
.hd__cta:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy); }

.hd.is-stuck{ background:var(--white); box-shadow:0 1px 16px rgba(18,34,74,.10); border-bottom-color:var(--line); }

.burger,.spnav{ display:none; }

/* 769〜1080px：ナビ6項目＋CTAが収まりきらないため、ヘッダー内を一段詰める */
@media (min-width:769px) and (max-width:1080px){
  .hd__in{ gap:20px; padding-inline:24px; }
  .hd__logo img{ width:108px; }
  .gnav{ gap:20px; }
  .gnav .en{ font-size:13px; }
  .gnav .ja{ font-size:11px; margin-top:5px; }
  .hd__cta{ padding:14px 18px; font-size:13px; gap:10px; }
}

/* ---------- 7. KV ―― デザイン案Bのファーストビューを移植 ----------
   案Bの見た目をそのまま持ち込むため、色・書体はこのセクション内で完結させる
   （design-A 本体のトークンには一切干渉しない）。
   合わせたのは版面の基準だけ：本文と同じ wrap 1200 / pad 80 に揃えている。 */
.bkv{
  --b-navy:#13294B;
  --b-paper:#F2EFE9;
  --b-accent:#A62A21;
  --b-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif CJK JP","MS PMincho",serif;
  --b-en:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --b-ease:cubic-bezier(.65,0,.35,1);

  position:relative; overflow:hidden;
  min-height:100vh; min-height:100svh;
  background:var(--b-navy); color:var(--b-paper);
  display:flex; align-items:flex-end;
}
.bkv__defs{ position:absolute; width:0; height:0; overflow:hidden; }
.bkv > .grain{ z-index:1; }

/* 帆（セイル）のシルエットで写真を抜く */
.bkv__shape{
  position:absolute; top:15%; right:8%; width:56%; height:85%; z-index:2;
  -webkit-clip-path:url(#sailClip); clip-path:url(#sailClip);
  overflow:hidden; background:var(--b-navy);
  animation:bkvIn 950ms var(--b-ease) 120ms both;
}
@keyframes bkvIn{
  from{ opacity:0; transform:translateY(26px) scale(1.015); }
  to  { opacity:1; transform:none; }
}
.bkv__slides{ position:absolute; inset:0; will-change:transform; }
.bkv__slide{
  position:absolute; inset:0; margin:0;
  opacity:0; transition:opacity 1100ms ease;
}
.bkv__slide.is-on{ opacity:1; }
.bkv__slide img{
  width:100%; height:100%; max-width:none; object-fit:cover;
  filter:grayscale(100%) contrast(1.12) brightness(.60);
}
/* 全体を紺に沈ませたうえで、見出し側（左下）をさらに落とす */
.bkv__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(66deg,rgba(19,41,75,.97) 0%,rgba(19,41,75,.78) 20%,rgba(19,41,75,.26) 44%,rgba(19,41,75,0) 62%),
    linear-gradient(0deg,rgba(19,41,75,.55) 0%,rgba(19,41,75,0) 34%),
    rgba(19,41,75,.22);
}
/* 帆の輪郭を1pxのヘアラインで縁取る */
.bkv__outline{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.bkv__outline svg{ width:100%; height:100%; }

/* コピー */
.bkv__body{
  position:relative; z-index:4; width:100%;
  max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--pad) 96px;
}
.bkv__eyebrow{
  font-family:var(--b-en); font-size:12px; font-weight:500;
  letter-spacing:.18em; line-height:1.6; text-transform:uppercase;
  color:rgba(242,239,233,.60);
}
.bkv__h1{
  margin:14px 0 44px;
  font-family:var(--b-serif); font-weight:600;
  font-size:54px; line-height:1.46; letter-spacing:.04em;
  color:var(--b-paper);
}
.bkv__foot{ border-left:1px solid var(--b-accent); padding-left:22px; }
.bkv__lead{ font-size:15px; line-height:2.1; letter-spacing:.02em; color:rgba(242,239,233,.82); }
.bkv__en{
  display:inline-block; margin-top:10px;
  font-family:var(--b-en); font-size:13px; letter-spacing:.12em;
  color:rgba(242,239,233,.55);
}
/* スライドカウンター */
.bkv__count{
  margin-top:40px; font-family:var(--b-en); font-size:13px;
  letter-spacing:.16em; line-height:1; color:rgba(242,239,233,.5);
}
.bkv__count b{ font-weight:500; color:var(--b-paper); }
.bkv__count span{ margin:0 8px; color:rgba(242,239,233,.35); }

/* 縦組み */
/* SP専用の英字ラベルはPCでは出さない */
.bkv__eyebrow--sp{ display:none; }

.bkv__vertical{
  position:absolute; z-index:4; right:72px; top:150px;
  writing-mode:vertical-rl; white-space:nowrap;
  font-family:var(--b-serif); font-weight:600;
  font-size:32px; line-height:1.5; letter-spacing:.22em;
  color:var(--b-paper);
  padding-left:20px; border-left:1px solid rgba(242,239,233,.42);
}
/* 写真キャプション（頭に朱の記号） */
.bkv__cap{
  position:absolute; z-index:4; right:72px; bottom:40px;
  font-size:13px; line-height:1.8; letter-spacing:.02em;
  color:rgba(242,239,233,.62); text-align:right;
  transition:opacity .4s ease;
}
.bkv__cap i{ color:var(--b-accent); font-style:normal; margin-right:8px; }

/* design-A の左レール（設計線）はFVでも通す */
.bkv__scroll{
  position:absolute; left:var(--rail); bottom:0; z-index:4;
  width:1px; height:110px; background:rgba(255,255,255,.2); overflow:hidden;
}
.bkv__scroll i{ position:absolute; inset:0; background:var(--gold); animation:scrolline 2.6s ease-in-out infinite; }
@keyframes scrolline{ 0%{transform:translateY(-100%);} 60%,100%{transform:translateY(100%);} }

/* 見出しの文字送り（明朝を1文字ずつ立ち上げる） */
.bkv__h1.split .ch{
  display:inline-block; opacity:0; transform:translateY(.42em);
  transition:opacity 520ms var(--b-ease),transform 520ms var(--b-ease);
}
.is-ready .bkv__h1.split .ch{ opacity:1; transform:none; }

/* ---------- 8. ISSUE ---------- */
.issues{ margin-top:80px; display:grid; grid-template-columns:repeat(3,1fr); gap:0 48px; }
.issue{ padding-top:28px; }
.issue__no{ font-size:15px; font-weight:700; letter-spacing:.14em; color:var(--gold); line-height:1; }
.issue__t{ margin-top:20px; font-size:20px; font-weight:700; line-height:1.7; letter-spacing:.02em; }
.issue__d{ margin-top:16px; font-size:15px; color:var(--text-sub); line-height:1.9; }

.issue-conc{
  position:relative; overflow:hidden;
  margin-top:80px; padding:44px 48px;
  background:var(--navy); color:var(--white); border-radius:2px;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
/* 帯の右側にだけ市場のイメージを薄く敷き、平面的な紺ベタを避ける */
.issue-conc::before{
  content:""; position:absolute; inset:0;
  background:url("../image/pixta_130331384.jpg") center 40%/cover no-repeat;
  filter:grayscale(.7) contrast(1.05) brightness(.82) blur(2px);
  transform:scale(1.06);
  opacity:.30;
  -webkit-mask-image:linear-gradient(90deg,transparent 26%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 26%,#000 100%);
}
.issue-conc > *{ position:relative; z-index:1; }
.issue-conc p{ font-size:26px; font-weight:700; letter-spacing:.02em; line-height:1.6; }
.issue-conc em{ font-style:normal; color:var(--gold); }
.issue-conc .tlink{ border-color:rgba(255,255,255,.3); color:var(--white); }

/* ---------- 9. SERVICE ---------- */
.svc{ margin-top:80px; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.svc__l{ padding:56px 64px 56px 0; border-right:1px solid var(--line); }
.svc__r{ padding:56px 0 56px 64px; }
.svc__label{ font-size:14px; font-weight:500; letter-spacing:.18em; color:var(--text-sub); line-height:1; }
.svc__name{ margin-top:22px; font-size:32px; font-weight:700; line-height:1.5; letter-spacing:.02em; }
.svc__d{ margin-top:26px; font-size:16px; color:var(--text-sub); line-height:1.9; }
.svc__d + .svc__d{ margin-top:18px; color:var(--text); font-weight:500; }
.svc__l .tlink{ margin-top:36px; }
.svc__fig{ margin:48px 0 0; }
.svc__fig img{
  width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 52%;
  border-radius:2px; background:#E4E8F0;
  filter:saturate(.98) contrast(1.02);
}
.svc__fig figcaption{ margin-top:14px; font-size:14px; color:var(--text-sub); letter-spacing:.06em; }
.svc__rt{ font-size:14px; font-weight:500; letter-spacing:.18em; color:var(--text-sub); line-height:1; padding-bottom:20px; border-bottom:1px solid var(--navy); }
/* ホバーは背景色（合成のみ）と transform だけを動かし、レイアウトを起こさない */
.svc__list li{
  position:relative; display:flex; align-items:center; gap:22px;
  padding:22px 4px; border-bottom:1px solid var(--line);
  transition:background-color var(--dur-hover) var(--ease-hover);
}
.svc__list li > *{
  transition:transform var(--dur-hover) var(--ease-hover),color var(--dur-hover) var(--ease-hover);
  will-change:transform;
}
.svc__list li:hover{ background-color:var(--base); }
.svc__list li:hover > *{ transform:translateX(12px); }
.svc__list b{ flex:none; font-size:15px; font-weight:700; letter-spacing:.1em; color:var(--gold); }
.svc__list span{ font-size:17px; font-weight:500; letter-spacing:.02em; }

/* ---------- 10. WHY LUFF ---------- */
#why{ overflow:hidden; }
#why > .wrap{ position:relative; z-index:1; }
/* 紺ベタが冷たく見えないよう、右側にだけ人の気配を薄く残す */
.why__bg{
  position:absolute; inset:0;
  background:url("../image/pixta_136421783.jpg") 64% 46%/cover no-repeat;
  /* 被写界深度：奥のレイヤーとして少しぼかし、面を後退させる */
  filter:grayscale(.4) contrast(1.04) brightness(.9) blur(3px);
  transform:scale(1.06);
  opacity:.22;
  -webkit-mask-image:linear-gradient(90deg,transparent 34%,rgba(0,0,0,.85) 78%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 34%,rgba(0,0,0,.85) 78%,#000 100%);
}
.why{ margin-top:76px; }
.why__row{
  display:grid; grid-template-columns:150px 1fr; gap:40px;
  padding:44px 0;
}
.why__no{
  font-size:64px; font-weight:700; line-height:1; letter-spacing:.01em; color:var(--gold);
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease) .25s,transform .6s var(--ease) .25s;
}
.why__row.is-in .why__no{ opacity:1; transform:none; }
.why__t{ font-size:26px; font-weight:700; line-height:1.6; letter-spacing:.02em; }
.why__d{ margin-top:20px; max-width:46em; font-size:16px; line-height:1.9; color:var(--sub-on-navy); }

/* ---------- 11. CASE ---------- */
.cases{ margin-top:76px; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.case{
  background:var(--white); border:1px solid var(--line); border-radius:2px;
  padding:28px 28px 30px; display:flex; flex-direction:column;
  transition:border-color var(--dur-hover) var(--ease-hover);
}
.case:hover{ border-color:var(--navy); }
.case__badge{
  align-self:flex-start; padding:7px 14px; border-radius:2px;
  background:var(--navy); color:var(--white);
  font-size:14px; font-weight:700; letter-spacing:.14em; line-height:1;
}
.case__img{ margin-top:20px; }
.case__img img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px;
  background:#E4E8F0; filter:saturate(.98) contrast(1.02);
  backface-visibility:hidden;
}
/* ホバーは filter ではなく transform（GPU合成）で */
.case__img img{ transition:transform .45s var(--ease-hover); }
.case:hover .case__img img{ transform:scale(1.05); }
.case__dl{ margin-top:26px; }
.case__dl dt{ font-size:14px; letter-spacing:.1em; color:var(--text-sub); }
.case__dl dd{ margin:2px 0 18px; font-size:18px; font-weight:700; letter-spacing:.02em; line-height:1.6; }
.case__dl dd:last-of-type{ margin-bottom:0; }
.case__sep{ margin:4px 0 22px; height:1px; background:var(--line); }
.case__dl.is-body dd{ font-size:15px; font-weight:400; color:var(--text-sub); line-height:1.85; }
.case .tlink{ margin-top:auto; padding-top:26px; align-self:flex-start; border-bottom:0; }
.cases-more{ margin-top:56px; }

/* ---------- 12. OUR NAME ---------- */
.name{ display:grid; grid-template-columns:1fr 380px; gap:80px; align-items:center; }
.name__t{ margin-top:26px; font-size:38px; font-weight:700; line-height:1.6; letter-spacing:.02em; }
.name__d{ margin-top:32px; max-width:40em; color:var(--sub-on-navy); font-size:16px; line-height:1.9; }
.name__links{ margin-top:44px; display:flex; gap:36px; flex-wrap:wrap; }
.sail{ width:100%; }
.sail path,.sail line,.sail circle,.sail polyline{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.sail .s{ stroke:rgba(255,255,255,.85); stroke-width:1.25; }
.sail .s-thin{ stroke:rgba(255,255,255,.4); stroke-width:1; }
.sail .g{ stroke:var(--gold); stroke-width:1.25; }
.sail .dot{ stroke:rgba(201,162,39,.75); stroke-width:1; stroke-dasharray:2 6; }

/* ---------- 13. RECRUIT ---------- */
.rec{ display:grid; grid-template-columns:1fr 440px; gap:64px; align-items:center; }
.rec__t{ margin-top:26px; font-size:38px; font-weight:700; line-height:1.6; letter-spacing:.02em; }
.rec__d{ margin-top:30px; color:var(--text-sub); font-size:16px; line-height:1.9; }
.rec__data{ margin-top:44px; display:flex; gap:56px; flex-wrap:wrap; }
.rec__data dt{ font-size:14px; letter-spacing:.1em; color:var(--text-sub); line-height:1; }
.rec__data dd{ margin:14px 0 0; font-size:34px; font-weight:700; letter-spacing:.02em; line-height:1; }
.rec__data dd small{ font-size:20px; }
.rec .btn{ margin-top:48px; }
/* 写真の奥に1px枠を半分ずらして敷き、レイヤーの前後関係をつくる */
.rec__fig{ position:relative; }
.rec__fig::before{
  content:""; position:absolute; left:-24px; top:-24px; right:56px; bottom:56px;
  border:1px solid var(--line); border-radius:2px; pointer-events:none;
}
.rec__fig::after{
  content:""; position:absolute; left:-24px; top:-24px;
  width:92px; height:92px; pointer-events:none;
  border-left:1px solid var(--gold); border-top:1px solid var(--gold);
}
.rec__fig .zoom,.rec__fig figcaption{ position:relative; z-index:1; }
.rec__fig figcaption{ margin-top:14px; font-size:14px; color:var(--text-sub); letter-spacing:.06em; }
.rec__fig img{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:20% 46%;
  border-radius:2px; background:#E4E8F0; filter:saturate(1) contrast(1.02);
}

/* ---------- 14. CONTACT ---------- */
.ct{ text-align:center; }
.ct .eyebrow{ justify-content:center; }
.ct .sec__en{ text-align:center; }
.ct .sec__ja{ text-align:center; }
.ct__t{ margin-top:44px; font-size:40px; font-weight:700; line-height:1.6; letter-spacing:.02em; }
.ct__d{ margin-top:28px; color:var(--text-sub); font-size:16px; line-height:1.9; }
.ct__btns{ margin-top:48px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.ct__note{
  margin-top:34px; display:inline-flex; align-items:center; gap:12px;
  font-size:14px; letter-spacing:.1em; color:var(--text-sub);
}
.ct__note i{ width:6px;height:6px;background:var(--gold);transform:rotate(45deg); }

/* ---------- 15. Footer ---------- */
.ft{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 88% 0%, rgba(42,66,118,.42) 0%, rgba(42,66,118,0) 62%),
    var(--navy-dark);
  color:var(--white); padding:110px 0 44px;
}
.ft > .wrap{ position:relative; z-index:1; }
.ft__grid{ display:grid; grid-template-columns:1fr 240px 340px; gap:60px; }
.ft__logo img{ width:150px; filter:brightness(0) invert(1); }
.ft__en{ margin-top:34px; font-size:18px; font-weight:700; letter-spacing:.08em; color:var(--white); }
.ft__ja{ margin-top:14px; font-size:15px; color:var(--sub-on-navy); }
.ft h3{ font-size:14px; font-weight:500; letter-spacing:.18em; color:var(--sub-on-navy); line-height:1; }
.ft__nav{ margin-top:28px; }
.ft__nav li + li{ margin-top:14px; }
.ft__nav a{ font-size:15px; color:var(--white); transition:color var(--dur-hover) var(--ease-hover); }
.ft__nav a:hover{ color:var(--gold); }
.ft__co{ margin-top:28px; }
.ft__co p{ font-size:15px; color:var(--sub-on-navy); line-height:1.9; }
.ft__co p:first-child{ color:var(--white); font-weight:700; margin-bottom:12px; }
.ft__btm{
  margin-top:80px; padding-top:28px; border-top:1px solid rgba(255,255,255,.16);
  display:flex; gap:32px; align-items:center; flex-wrap:wrap;
}
.ft__btm p,.ft__btm a{ font-size:14px; color:var(--sub-on-navy); letter-spacing:.06em; }
.ft__btm a:hover{ color:var(--gold); }

/* ---------- 16. 要確認タグ ---------- */
.chk{
  display:inline-block; margin-left:8px; padding:3px 8px; border-radius:2px;
  border:1px dashed rgba(201,162,39,.8); color:var(--gold);
  font-size:14px; font-weight:500; letter-spacing:.06em; line-height:1.4;
  vertical-align:middle; white-space:nowrap;
}

/* ---------- 17. Scroll reveal ---------- */
.rv{ opacity:0; transform:translateY(24px); transition:opacity .4s ease-out,transform .4s ease-out; }
.rv.is-in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.08s; }
.rv[data-d="2"]{ transition-delay:.16s; }
.rv[data-d="3"]{ transition-delay:.24s; }

/* ---------- 17b. スクロール進捗レール（設計線＝航路の進み具合） ---------- */
.prog{
  position:fixed; left:var(--rail); top:88px; bottom:0; width:1px;
  z-index:90; pointer-events:none;
  transition:top .3s var(--ease);
}
.is-scrolled .prog{ top:68px; }
.no-scroll-ctx .prog{ display:none; }
.prog i{
  display:block; position:relative; width:1px; height:0; background:var(--gold);
}
/* 進捗の先端：航路上の「現在地」を示す小さな菱形 */
.prog i::after{
  content:""; position:absolute; left:-3px; bottom:-3.5px;
  width:7px; height:7px; background:var(--gold); transform:rotate(45deg);
  opacity:0; transition:opacity .4s ease;
}
.is-scrolled .prog i::after{ opacity:1; }

/* ---------- 17c. 罫線が左から伸びる ---------- */
.bar{ position:relative; }
.bar::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--navy);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--ease) .05s;
}
.bar.is-in::before,.is-in .bar::before{ transform:scaleX(1); }
.bar--thin::before{ height:1px; background:var(--line); }
.sec--navy .bar--thin::before{ background:var(--line-dark); }
.bar--btm::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line-dark);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--ease) .2s;
}
.bar--btm.is-in::after{ transform:scaleX(1); }
.eyebrow span{ transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease) .15s; }
.is-in .eyebrow span,.eyebrow.is-in span{ transform:scaleX(1); }

/* ---------- 17d. 写真のスローズームイン ---------- */
.zoom{ overflow:hidden; border-radius:2px; }
/* 出現時のスローズームは外側（.zoom__i）／ホバーの微ズームは内側（img）に分離し、
   互いの transition 時間が干渉しないようにする */
.zoom__i{ display:block; }
.zoom__i,.zoom > img{
  transform:scale(1.08); transition:transform 1.4s var(--ease);
  backface-visibility:hidden;
}
.zoom.is-in .zoom__i,.zoom.is-in > img{ transform:scale(1); }

/* ---------- 17e. 線画の描画（帆） ---------- */
.sail .draw{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); }
.name__fig.is-in .sail .draw{ transition:stroke-dashoffset 1.5s var(--ease); stroke-dashoffset:0; }
.sail .dot,.sail .s-thin{ opacity:0; transition:opacity .8s ease 1.1s; }
.name__fig.is-in .sail .dot,.name__fig.is-in .sail .s-thin{ opacity:1; }

/* ---------- 17f. KVステージイン（ロード時） ---------- */
/* FVのコピーはロード直後に段階的に立ち上げる（案Bの文字送りと重ねる） */
.bkv__eyebrow,.bkv__foot,.bkv__count{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.is-ready .bkv__eyebrow,.is-ready .bkv__foot,.is-ready .bkv__count{ opacity:1; transform:none; }
.is-ready .bkv__eyebrow{ transition-delay:.20s; }
.is-ready .bkv__foot{ transition-delay:.72s; }
.is-ready .bkv__count{ transition-delay:.86s; }
.bkv__vertical{ opacity:0; transition:opacity 1s var(--ease) .5s; }
.is-ready .bkv__vertical{ opacity:1; }
.bkv__cap{ opacity:0; transition:opacity 1s var(--ease) 1s; }
.is-ready .bkv__cap{ opacity:1; }

/* ---------- 18. SP ---------- */
@media (max-width:768px){
  :root{ --pad:20px; --sec-pad:80px; --rail:20px; }
  body{ font-size:15px; }
  .sec::after,.sec::before{ display:none; }
  .prog{ left:0; top:64px; }
  .is-scrolled .prog{ top:64px; }

  .hd__in{ height:64px; padding-inline:20px; gap:12px; }
  .hd__logo img{ width:104px; }
  .gnav{ display:none; }
  .hd__cta{ margin-left:auto; padding:13px 16px; font-size:14px; gap:8px; }
  .hd__cta .ar{ display:none; }
  .burger{
    display:flex; flex:none; width:40px; height:40px;
    flex-direction:column; justify-content:center; align-items:center; gap:6px;
  }
  .burger i{ width:22px; height:1px; background:var(--white); transition:transform .25s ease,opacity .2s ease,background .25s ease; }
  .hd.is-stuck .burger i{ background:var(--navy); }
  .burger.is-open i{ background:var(--white); }
  .burger.is-open i:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
  .burger.is-open i:nth-child(2){ opacity:0; }
  .burger.is-open i:nth-child(3){ transform:translateY(-3.5px) rotate(-45deg); }

  .spnav{
    position:fixed; inset:64px 0 0 0; z-index:99;
    background:var(--navy); padding:40px 20px 60px;
    display:none; overflow-y:auto;
  }
  .spnav.is-open{ display:block; }
  .spnav li{ border-bottom:1px solid rgba(255,255,255,.16); }
  .spnav a{ display:block; padding:22px 4px; color:var(--white); }
  .spnav .en{ display:block; font-size:17px; font-weight:700; letter-spacing:.08em; line-height:1; }
  .spnav .ja{ display:block; font-size:14px; color:var(--sub-on-navy); margin-top:8px; line-height:1; }

  .sec::before{ top:80px; }

  .sec__en{ font-size:46px; margin-top:22px; }
  .sec__lead{ font-size:24px; margin-top:28px; }

  .btn{ padding:18px 28px; font-size:15px; width:100%; justify-content:center; }

  /* SPは写真が全幅に来るため、横方向のグラデーションでは逃がせない。
     縦方向を主にして本文域だけ確実に沈める（コントラスト4.5:1を維持） */

  /* FV（案B移植）：帆のシルエットを上、コピーを下に積む */
  /* SPは写真の上にコピーを重ねて、FVを1画面に収める */
  .bkv{
    height:100svh; min-height:100svh;
    padding-top:calc(64px + 78px);
    flex-direction:column; justify-content:flex-start; align-items:stretch;
  }
  /* 帆は右下に寄せて大きく。下半分はコピーが重なる */
  .bkv__shape{
    position:absolute; top:auto; bottom:0; right:-4%;
    width:96%; height:84%; margin:0; z-index:2;
  }
  .bkv__veil{
    background:
      linear-gradient(24deg,rgba(19,41,75,.80) 0%,rgba(19,41,75,.40) 32%,rgba(19,41,75,.04) 66%,rgba(19,41,75,0) 86%),
      rgba(19,41,75,.08);
  }
  .bkv__slide img{ filter:grayscale(100%) contrast(1.26) brightness(.74); }
  /* 帆の上・コピーの下に暗幕を1枚敷いて、写真の上でも文字が読めるようにする */
  .bkv::after{
    content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
    background:linear-gradient(180deg,
      rgba(19,41,75,.95) 0%, rgba(19,41,75,.88) 30%,
      rgba(19,41,75,.56) 50%, rgba(19,41,75,.26) 66%,
      rgba(19,41,75,.22) 74%, rgba(19,41,75,.52) 88%,
      rgba(19,41,75,.78) 100%);
  }
  .bkv__body{ position:relative; z-index:4; padding:0 var(--pad) 18px; }
  .bkv__eyebrow{ font-size:11px; }
  .bkv__h1{ font-size:28px; line-height:1.5; margin:10px 0 22px; }
  .bkv__foot{ padding-left:16px; }
  .bkv__lead{ font-size:13.5px; line-height:1.9; }
  .bkv__en{ margin-top:6px; font-size:11px; }
  .bkv__count{ margin-top:18px; font-size:12px; }
  /* SPでは英字ラベルを画面上部へ、縦組みコピーは見出しの直上へ入れ替える */
  .bkv__eyebrow--pc{ display:none; }
  .bkv__eyebrow--sp{
    display:block; position:absolute; z-index:4;
    top:calc(64px + 24px); left:var(--pad); right:var(--pad);
    font-size:11px; letter-spacing:.2em;
  }
  .bkv__vertical{
    position:absolute; z-index:4;
    left:var(--pad); right:var(--pad); bottom:54px; top:auto;
    writing-mode:horizontal-tb; white-space:normal; text-align:left;
    margin:0;
    font-size:17px; letter-spacing:.12em; line-height:1.6;
    padding-left:14px; border-left:1px solid rgba(242,239,233,.42);
  }
  /* スライドカウンターはSPでは出さない */
  .bkv__count{ display:none; }
  .bkv__cap{
    position:absolute; z-index:4; text-align:left;
    left:var(--pad); right:var(--pad); bottom:16px; top:auto;
    margin:0; font-size:11px; line-height:1.7;
  }
  .bkv__scroll{ display:none; }

  /* 画面の高さが足りない端末では、さらに一段詰める */
  @media (max-height:700px){
    .bkv__vertical{ font-size:15px; margin-bottom:12px; }
    .bkv__eyebrow--sp{ top:calc(64px + 14px); }
    .bkv{ padding-top:calc(64px + 58px); }
    .bkv__cap{ bottom:12px; }
    .bkv__h1{ font-size:25px; margin:8px 0 18px; }
    .bkv__lead{ font-size:13px; line-height:1.8; }
    .bkv__vertical{ bottom:46px; }
    .bkv__shape{ height:72%; }
  }

  .issues{ grid-template-columns:1fr; gap:0; margin-top:48px; }
  .issue + .issue{ margin-top:36px; }
  .issue__t{ font-size:18px; }
  .issue-conc{ margin-top:48px; padding:32px 24px; display:block; }
  .issue-conc p{ font-size:20px; }
  .issue-conc .tlink{ margin-top:26px; }

  .svc{ grid-template-columns:1fr; margin-top:48px; }
  .svc__l{ padding:36px 0 40px; border-right:0; border-bottom:1px solid var(--line); }
  .svc__r{ padding:40px 0 0; }
  .svc__name{ font-size:24px; }
  .svc__list span{ font-size:16px; }

  .why{ margin-top:48px; }
  .why__row{ grid-template-columns:1fr; gap:16px; padding:34px 0; }
  .why__no{ font-size:44px; }
  .why__t{ font-size:21px; }

  .cases{ grid-template-columns:1fr; gap:20px; margin-top:48px; }
  .cases-more{ margin-top:36px; }

  .name{ grid-template-columns:1fr; gap:48px; }
  .name__t{ font-size:25px; }
  .name__fig{ order:-1; max-width:240px; }
  .name__links{ margin-top:34px; gap:24px; flex-direction:column; align-items:flex-start; }

  .rec{ grid-template-columns:1fr; gap:40px; }
  .ship{ width:132px; }
  .rec__fig::before{ display:none; }
  .rec__fig::after{ left:-12px; top:-12px; width:56px; height:56px; }
  .grain{ opacity:.045; }
  .rec__t{ font-size:25px; }
  .rec__data{ gap:0 40px; row-gap:28px; }
  .rec__data dd{ font-size:26px; }

  .ct__t{ font-size:25px; margin-top:32px; }
  .ct__btns{ margin-top:36px; flex-direction:column; }

  .ft{ padding:72px 0 36px; }
  .ft__grid{ grid-template-columns:1fr; gap:48px; }
  .ft__btm{ margin-top:48px; gap:14px; }
}

/* ---------- 19. Reduced motion ---------- */
/* OS側で「視差効果を減らす／Reduce Motion」がONのとき。
   位置が動く演出・線の描画・拡大は止め、色とフェードだけを残す。 */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .bkv__scroll i{ animation:none !important; }
  .bkv__shape{ animation:none !important; }
  .bkv__slide{ transition:none !important; }
  .bkv__slides,.bkv__body,.bkv__vertical{ transform:none !important; opacity:1 !important; }

  .rv{ transform:none !important; transition:opacity .35s ease !important; }
  .slidein > b{ transform:none !important; transition:none !important; }
  .bkv__eyebrow,.bkv__foot,.bkv__count{ transform:none !important; transition:opacity .45s ease !important; }
  .why__no{ transform:none !important; transition:opacity .45s ease .1s !important; }
  .zoom__i,.zoom > img{ transform:none !important; transition:none !important; }
  .case:hover .case__img img{ transform:none !important; }
  .bar::before,.bar--btm::after,.eyebrow span{ transform:scaleX(1) !important; transition:none !important; }
  .sail .draw{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; transition:none !important; }
  .sail .dot,.sail .s-thin{ transition:opacity .45s ease .1s !important; }
  .ship{ display:none !important; }
  .hd__in{ transition:none !important; }
  .hd__logo img{ transform:none !important; transition:none !important; }
  .svc__list li:hover > *{ transform:none !important; }
  .tlink:hover .ar,.btn:hover .ar,.hd__cta:hover .ar{ transform:none !important; }
}