/* ==========================================================================
   products/index.html 専用スタイル
   もとは同ページの <style> 直書き + 各要素の style="" だったものを、
   表示結果を変えずにこちらへ移設しています（2026-09-08更新）。
   ・body.pageBg でスコープしているため、他ページ(site.css既定値)には影響しません。
   ・prod-xxx-N は元の style="" の中身をそのままクラス化したものです。
   ========================================================================== */

/* ---- このページ固有のキーフレーム・クラス（元<style>ブロックより／9-8のページ遷移モーション刷新を含む） ---- */
@keyframes revealFadeup{0%{opacity:0;transform:translateY(24px)}100%{opacity:1;transform:translateY(0)}}
@keyframes heroKenburns{0%{transform:scale(1.01)}100%{transform:scale(1.06)}}
@keyframes sheenv{0%{transform:translateX(-120%)}18%{transform:translateX(70%)}52%{transform:translateX(220%)}100%{transform:translateX(220%)}}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes veilout{to{opacity:0;visibility:hidden}}
@keyframes pgin{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
.marq-track{display:flex;width:max-content;animation:marq 24s linear infinite}
#pt-veil{position:fixed;inset:0;background:radial-gradient(120% 100% at 50% 28%,#14285f 0%,#0a1738 62%);z-index:99999;opacity:1;pointer-events:none;transition:opacity .5s cubic-bezier(.4,0,.2,1);animation:veilout .6s cubic-bezier(.4,0,.2,1) .05s both}
#scroll-content{animation:pgin .75s cubic-bezier(.2,.7,.2,1) .08s backwards}
.pg-shell.pg-out{transition:opacity .4s ease;opacity:0}.pg-shell.pg-out #scroll-content{transition:translate .4s ease;translate:0 -12px}
@media (prefers-reduced-motion:reduce){.marq-track{animation:none}#pt-veil{display:none}#scroll-content{animation:none}.pg-shell.pg-out{transition:none;opacity:1}.pg-shell.pg-out #scroll-content{transition:none;translate:none}}

/* もとの <style> ブロックのページ固有上書き分
   （site.css の既定はブレークポイント1023px / gnavの余白が別値のため、
    このページだけ従来どおり1400px・別余白で動くよう明示的に上書きする） */
body.pageBg { margin: 0; background: #eeebe4; font-family: 'Noto Sans JP', system-ui, sans-serif; }
body.pageBg .pc-view { display: block; width: 100%; }
body.pageBg .sp-view { display: none; width: 100%; }
@media (max-width: 1400px) {
  body.pageBg .pc-view { display: none; }
  body.pageBg .sp-view { display: block; }
}
body.pageBg .gnav a { white-space: nowrap; }
body.pageBg .gnav > div { gap: 20px !important; }
body.pageBg .gnav > div[data-gnav-toggle] { gap: 5px !important; }
body.pageBg .gnav > div > div { gap: 18px !important; }
@media (max-width: 1400px) {
  body.pageBg .gnav { padding-left: 32px !important; padding-right: 32px !important; }
}

/* ---- 以下、各要素の style="" を1:1でクラス化したもの ---- */
.prod-top-1{display:none;visibility:hidden}
.prod-top-2{background:#faf7f1}
.prod-top-3{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 52px;box-sizing:border-box}
.prod-top-4{display:flex;align-items:center;gap:14px;text-decoration:none}
.prod-top-5{height:20px;width:auto;display:block;filter:brightness(0) invert(1)}
.prod-top-6{width:1px;height:22px;background:rgba(255,255,255,.22);flex:none}
.prod-top-7{font-size: 12px; font-weight: 400; letter-spacing: .14em; color: #8fe0f4; white-space: nowrap; font-family: Noto Sans JP}
.prod-top-8{display:flex;align-items:center;gap:34px}
.prod-top-9{display:flex;gap:28px;font-size:14px;font-weight:400;color:rgba(255,255,255,.85)}
.prod-top-10{text-decoration:none}
.prod-top-11{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.82);text-decoration:none;border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:8px 15px;line-height:1;white-space:nowrap}
.prod-top-12{flex:none}
.prod-top-13{position:relative;overflow:hidden;font-weight:700;font-size:13px;color:#2b1d05;background:linear-gradient(120deg,#f07f13 0%,#ffa62e 55%,#ffc964 100%);padding:12px 24px;border-radius:999px;text-decoration:none}
.prod-top-14{position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenv 3.6s linear infinite}
.prod-top-15{width:100%;background:#faf7f1;overflow:hidden}
.prod-hero-1{position:relative;width:100%;height:520px;overflow:hidden;background:#0a1738}
.prod-hero-2{position:absolute;inset:0;background:url('../img/hero_positions.jpg') 30% 62%/cover no-repeat;animation:heroKenburns 20s linear both}
.prod-hero-3{position:absolute;inset:0;background:linear-gradient(105deg,rgba(6,15,40,.93) 0%,rgba(6,15,40,.72) 42%,rgba(6,15,40,.44) 70%,rgba(6,15,40,.68) 100%)}
.prod-hero-4{position:absolute;left:52px;right:52px;bottom:60px;z-index:6;animation:revealFadeup .9s ease both}
.prod-hero-5{font-weight:600;font-size:13px;letter-spacing:.24em;color:#8fe0f4;margin-bottom:20px}
.prod-hero-6{margin:0;font-weight:500;font-size:64px;line-height:1.34;color:#fff;letter-spacing:.01em;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.prod-hero-7{margin:26px 0 0;max-width:720px;font-size:16px;line-height:2;font-weight:300;color:rgba(255,255,255,.85)}
.prod-crumb-1{background:#faf7f1;padding:34px 96px 0;box-sizing:border-box}
.prod-crumb-2{max-width:1170px;margin:0 auto;display:flex;gap:10px;align-items:center}
.prod-crumb-3{font-size:12.5px;color:#5f6878;text-decoration:none}
.prod-crumb-4{font-size:12.5px;color:#c2c8d2}
.prod-crumb-5{font-size:12.5px;color:#3a475f;font-weight:700}
.prod-crumb-6{background:#faf7f1;padding:56px 96px 0;box-sizing:border-box}
.prod-crumb-7{max-width:1170px;margin:0 auto}
.prod-crumb-8{font-weight:600;font-size:12px;letter-spacing:.26em;color:#17629f;margin-bottom:14px}
.prod-crumb-9{margin:0;font-weight:700;font-size:32px;line-height:1.45;color:#0f1e3d}
.prod-crumb-10{margin:16px 0 0;max-width:840px;font-size:15.5px;line-height:2.05;color:#3a475f;text-wrap:pretty}
.prod-crumb-11{background:#faf7f1;padding:64px 96px 0;box-sizing:border-box}
.prod-crumb-12{background:#fff;border:1px solid rgba(15,30,61,.09);border-radius:20px;overflow:hidden;box-shadow:0 16px 40px rgba(15,30,61,.06)}
.prod-crumb-13{display:grid;grid-template-columns:1fr 440px}
.prod-crumb-14{padding:44px 46px 42px}
.prod-crumb-15{display:flex;gap:16px;align-items:baseline}
.prod-crumb-16{font-weight: 600; font-size: 26px; color: #17629f}
.prod-crumb-17{font-weight:700;font-size:26px;color:#0f1e3d}
.prod-crumb-18{font-size:12.5px;font-weight:700;color:#555f78}
.prod-crumb-19{margin:22px 0 0;font-size:15px;line-height:2.05;color:#3a475f;text-wrap:pretty}
.prod-crumb-20{margin-top:26px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13.5px}
.prod-crumb-21{font-weight:700;color:#0f1e3d;flex:none}
.prod-crumb-22{color:#17629f;font-weight:600;text-decoration:none}
.prod-crumb-23{color:#c2c8d2}
.prod-crumb-24{background:#f7f8fa;border-left:1px solid rgba(15,30,61,.07);padding:44px 38px}
.prod-crumb-25{font-weight:600;font-size:11px;letter-spacing:.2em;color:#5f6878;margin-bottom:20px}
.prod-crumb-26{display:flex;flex-direction:column;gap:20px}
.prod-crumb-27{font-weight:700;font-size:17px;color:#0f1e3d}
.prod-crumb-28{color:#17629f;text-decoration:none}
.prod-crumb-29{margin-top:8px;font-size:13px;line-height:1.9;color:#3a475f}
.prod-crumb-30{background:#faf7f1;padding:24px 96px 0;box-sizing:border-box}
.prod-crumb-31{text-wrap-mode: initial;}
.prod-crumb-32{color:#555f78}
.prod-crumb-33{position:relative;background:#0a1738;padding:88px 96px;box-sizing:border-box;margin-top:88px;overflow:hidden}
.prod-crumb-34{position:absolute;inset:0;background:radial-gradient(1200px 400px at 15% 0%,rgba(28,116,196,.35),transparent 70%)}
.prod-crumb-35{position:relative;max-width:1170px;margin:0 auto}
.prod-crumb-36{margin-bottom:44px}
.prod-crumb-37{font-weight:600;font-size:12px;letter-spacing:.26em;color:#57c9eb;margin-bottom:14px}
.prod-crumb-38{margin:0;font-weight:700;font-size:32px;line-height:1.45;color:#fff}
.prod-crumb-39{margin:16px 0 0;font-size:14.5px;line-height:2;color:rgba(255,255,255,.7)}
.prod-crumb-40{display:grid;grid-template-columns:repeat(3,1fr);row-gap:44px;column-gap:48px}
.prod-crumb-41{padding:0}
.prod-crumb-42{font-weight:700;font-size:19px;line-height:1.55;color:#fff}
.prod-crumb-43{margin-top:16px;font-size:13.5px;line-height:1.95;color:rgba(255,255,255,.66)}
.prod-cta-1{position:relative;background:#081128;padding:92px 96px 88px;box-sizing:border-box;overflow:hidden}
.prod-cta-2{position:absolute;inset:0;background:url('../img/photo_meeting.jpg') center/cover no-repeat;opacity:.26}
.prod-cta-3{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,17,40,.86),rgba(8,17,40,.94))}
.prod-cta-4{position:relative;max-width:1170px;margin:0 auto;text-align:center}
.prod-cta-5{font-weight:600;font-size:13px;letter-spacing:.24em;color:#8fe0f4;margin-bottom:22px}
.prod-cta-6{margin:0;font-weight:500;font-size:44px;line-height:1.45;color:#fff}
.prod-cta-7{display:flex;justify-content:center;gap:14px;margin-top:40px;flex-wrap:wrap}
.prod-cta-8{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#2b1d05;background:linear-gradient(120deg,#f07f13 0%,#ffa62e 55%,#ffc964 100%);padding:16px 36px;border-radius:999px;text-decoration:none}
.prod-cta-9{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:#fff;border:1.5px solid rgba(255,255,255,.5);padding:15px 28px;border-radius:999px;text-decoration:none}
.prod-footer-1{background:#050b1c;overflow:hidden;padding:64px 0 8px}
.prod-footer-2{white-space:nowrap;font-weight:700;font-size:88px;line-height:1;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.5px rgba(143,224,244,.4)}
.prod-footer-3{background:#050b1c;padding:56px 96px 40px;box-sizing:border-box}
.prod-footer-4{max-width:1170px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap}
.prod-footer-5{height:20px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.9}
.prod-footer-6{display:flex;gap:64px;flex-wrap:wrap}
.prod-footer-7{display:flex;flex-direction:column;gap:12px}
.prod-footer-8{font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.4)}
.prod-footer-9{font-size:13.5px;color:rgba(255,255,255,.78);text-decoration:none}
.prod-footer-10{max-width:1170px;margin:40px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.prod-footer-11{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.06em}
.prod-footer-12{width:1px}
.prod-footerSp-1{position:relative;width:100%;height:470px;overflow:hidden;background:#0a1738}
.prod-footerSp-2{position:absolute;inset:0;background:url('../img/hero_positions.jpg') 36% 60%/cover no-repeat;animation:heroKenburns 20s linear both}
.prod-footerSp-3{position:absolute;inset:0;background:linear-gradient(175deg,rgba(6,15,40,.72) 0%,rgba(6,15,40,.44) 30%,rgba(6,15,40,.88) 100%)}
.prod-footerSp-4{position:absolute;inset:0;z-index:6}
.prod-footerSp-5{position:absolute;top:12px;left:22px;right:22px;height:52px;display:flex;align-items:center;justify-content:space-between}
.prod-footerSp-6{height:15px;width:auto;display:block;filter:brightness(0) invert(1)}
.prod-footerSp-7{width:1px;height:16px;background:rgba(255,255,255,.22);flex:none}
.prod-footerSp-8{font-size:10px;font-weight:600;letter-spacing:.14em;color:#8fe0f4;white-space:nowrap}
.prod-footerSp-9{display:flex;flex-direction:column;gap:5px;padding:6px 2px}
.prod-footerSp-10{display:block;width:24px;height:2px;background:#fff;border-radius:2px}
.prod-footerSp-11{position:absolute;left:24px;right:24px;bottom:40px}
.prod-footerSp-12{font-weight:600;font-size:11px;letter-spacing:.22em;color:#8fe0f4;margin-bottom:14px}
.prod-footerSp-13{margin:0;font-weight:900;font-size:32px;line-height:1.42;color:#fff}
.prod-footerSp-14{margin:16px 0 0;font-size:13.5px;line-height:1.95;font-weight:400;color:rgba(255,255,255,.85)}
.prod-footerSp-15{background:#faf7f1;padding:28px 22px 44px;box-sizing:border-box}
.prod-footerSp-16{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.prod-footerSp-17{font-size:11.5px;color:#5f6878;text-decoration:none}
.prod-footerSp-18{font-size:11.5px;color:#c2c8d2}
.prod-footerSp-19{font-size:11.5px;color:#3a475f;font-weight:700}
.prod-footerSp-20{font-weight:600;font-size:11px;letter-spacing:.22em;color:#17629f;margin-bottom:10px}
.prod-footerSp-21{margin:0 0 12px;font-weight:700;font-size:21px;line-height:1.5;color:#0f1e3d}
.prod-footerSp-22{margin:0 0 30px;font-size:13.5px;line-height:1.95;color:#3a475f}
.prod-footerSp-23{display:flex;flex-direction:column;gap:18px}
.prod-footerSp-24{background:#fff;border:1px solid rgba(15,30,61,.09);border-radius:16px;padding:24px 22px}
.prod-footerSp-25{font-size:12px;font-weight:700;color:#555f78}
.prod-footerSp-26{margin-top:6px;font-weight:700;font-size:19px;line-height:1.5;color:#0f1e3d}
.prod-footerSp-27{margin:12px 0 0;font-size:13px;line-height:1.95;color:#3a475f}
.prod-footerSp-28{margin-top:16px;padding-top:14px;border-top:1px solid rgba(15,30,61,.08);display:flex;flex-direction:column;gap:12px}
.prod-footerSp-29{font-weight:700;font-size:14px;color:#0f1e3d}
.prod-footerSp-30{margin-top:5px;font-size:12.5px;line-height:1.85;color:#3a475f}
.prod-footerSp-31{margin-top:16px;font-size:12.5px;line-height:2}
.prod-footerSp-32{font-weight:700;color:#0f1e3d}
.prod-footerSp-33{margin-top:16px;padding-top:14px;border-top:1px solid rgba(15,30,61,.08)}
.prod-footerSp-34{position:relative;background:#0a1738;padding:44px 22px 48px;box-sizing:border-box;overflow:hidden}
.prod-footerSp-35{position:absolute;inset:0;background:radial-gradient(600px 260px at 20% 0%,rgba(28,116,196,.4),transparent 70%)}
.prod-footerSp-36{position:relative}
.prod-footerSp-37{font-weight:600;font-size:11px;letter-spacing:.22em;color:#57c9eb;margin-bottom:10px}
.prod-footerSp-38{margin:0 0 12px;font-weight:700;font-size:21px;line-height:1.5;color:#fff}
.prod-footerSp-39{margin:0 0 22px;font-size:13.5px;line-height:1.95;color:rgba(255,255,255,.7)}
.prod-footerSp-40{display:flex;flex-direction:column;gap:14px}
.prod-footerSp-41{background:#0c1c44;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:22px 20px}
.prod-footerSp-42{font-weight:700;font-size:16px;color:#fff}
.prod-footerSp-43{margin-top:10px;font-size:13px;line-height:1.9;color:rgba(255,255,255,.66)}
.prod-footerSp-44{position:relative;background:#081128;padding:48px 22px;box-sizing:border-box;overflow:hidden}
.prod-footerSp-45{position:absolute;inset:0;background:url('../img/photo_meeting.jpg') center/cover no-repeat;opacity:.24}
.prod-footerSp-46{position:relative;text-align:center}
.prod-footerSp-47{margin:0;font-weight:500;font-size:22px;line-height:1.55;color:#fff}
.prod-footerSp-48{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.prod-footerSp-49{position:relative;overflow:hidden;text-align:center;font-weight:700;font-size:14px;color:#2b1d05;background:linear-gradient(120deg,#f07f13 0%,#ffa62e 55%,#ffc964 100%);padding:14px 20px;border-radius:999px;text-decoration:none}
.prod-footerSp-50{text-align:center;font-weight:600;font-size:14px;color:#fff;border:1.5px solid rgba(255,255,255,.5);padding:13px 20px;border-radius:999px;text-decoration:none}
.prod-footerSp-51{background:#050b1c;overflow:hidden;padding:34px 0 4px}
.prod-footerSp-52{white-space:nowrap;font-weight:700;font-size:42px;line-height:1;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(143,224,244,.4)}
.prod-footerSp-53{background:#050b1c;padding:36px 24px 30px;box-sizing:border-box}
.prod-footerSp-54{height:17px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.9}
.prod-footerSp-55{margin-top:24px;display:flex;gap:44px;flex-wrap:wrap}
.prod-footerSp-56{font-size:10.5px;letter-spacing:.2em;color:rgba(255,255,255,.4)}
.prod-footerSp-57{font-size:12.5px;color:rgba(255,255,255,.75);text-decoration:none}
.prod-footerSp-58{margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.prod-footerSp-59{font-size:10.5px;color:rgba(255,255,255,.4);letter-spacing:.05em}