/* 共通ヘッダー 2026-10-05 T-20261005-05。トップ（top.css／v3.css）のヘッダー関連ルールを #ot-hd 起点で写したもの。ページ側CSSに負けないよう <head> の最後で読む */
#ot-hd{--blue:#26A7E1;--grad:linear-gradient(135deg,#2FB7FF 0%,#2470C9 100%);--navy:#04497D;--text:#555;--line:#DDD;--ink:#021F36;--header-h:84px;--en:"din-2014","Barlow","Noto Sans JP",sans-serif;--ja:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic Medium",YuGothic,sans-serif;
  font-family:var(--ja);font-weight:400;font-size:16px;line-height:1.8;color:var(--text);letter-spacing:.32px;font-feature-settings:"palt" 1;text-align:left;-webkit-font-smoothing:antialiased}
#ot-hd *,#ot-hd *::before,#ot-hd *::after{box-sizing:border-box}
#ot-hd ul{margin:0;padding:0;list-style:none}
#ot-hd a{color:inherit;text-decoration:none;background:none}
#ot-hd img{max-width:100%;height:auto;display:block}
#ot-hd .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#ot-hd{display:block}
/* ヘッダーの高さ（border込み）。固定バーなど他の部品がヘッダーの下に付くための共通変数 */
:root{--hd-h:85px}
@media (max-width:860px){:root{--hd-h:65px}}
#ot-hd:not([data-hd-pos="sticky"]){position:fixed;top:0;left:0;right:0;width:100%;margin:0;padding:0}
#ot-hd[data-hd-pos="sticky"]{left:auto;right:auto}
@media (max-width:860px){#ot-hd{--header-h:64px}}
/* ナビ・ボタンの文字は継承に頼らず明示する（ページ側CSSの上書き・フォント読み込み前後のチラつき対策） */
#ot-hd .ot-nav ul a{font-family:var(--ja);line-height:1.8;letter-spacing:.32px;font-style:normal;text-transform:none}
#ot-hd .ot-nav__cta a{font-family:var(--ja);line-height:1.8;font-style:normal;text-transform:none}
#ot-hd .ot-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 32px; border-radius: 50px; font-weight: 700; font-size: 15px; letter-spacing: .04em; transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
#ot-hd .ot-btn:hover { transform: translateY(-2px); }
#ot-hd .ot-btn--sm { min-height: 42px; padding: 0 24px; font-size: 14px; }
#ot-hd .ot-btn--grad { background: var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(36, 112, 201, .3); }
#ot-hd .ot-btn--outline { border: 1.5px solid var(--blue); color: var(--blue); background: #fff; }
#ot-hd .ot-btn--outline:hover { background: var(--blue); color: #fff; }
#ot-hd { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
#ot-hd .ot-hd__in { height: var(--header-h); width: min(1320px, 100% - 48px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
#ot-hd .ot-hd__logo img { width: 146px; }
#ot-hd .ot-nav { display: flex; align-items: center; gap: 36px; }
#ot-hd .ot-nav ul { display: flex; gap: 32px; }
#ot-hd .ot-nav ul a { font-weight: 500; font-size: 15px; color: var(--navy); position: relative; padding: 6px 0; }
#ot-hd .ot-nav ul a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
#ot-hd .ot-nav ul a:hover::after { transform: scaleX(1); }
#ot-hd .ot-hd__tg { display: none; }
@media (max-width: 1080px) { #ot-hd .ot-nav ul { gap: 20px; } }
@media (max-width: 1080px) { #ot-hd .ot-nav { gap: 20px; } }
@media (max-width: 860px) { #ot-hd .ot-hd__logo img { width: 116px; } }
@media (max-width: 860px) { #ot-hd .ot-hd__tg { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 10px; border: 0; background: none; cursor: pointer; } }
@media (max-width: 860px) { #ot-hd .ot-hd__tg span:not(.sr-only) { display: block; height: 2px; background: var(--navy); transition: transform .25s, opacity .25s; } }
@media (max-width: 860px) { #ot-hd .ot-hd__tg[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } }
@media (max-width: 860px) { #ot-hd .ot-hd__tg[aria-expanded="true"] span:nth-child(2) { opacity: 0; } }
@media (max-width: 860px) { #ot-hd .ot-hd__tg[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } }
@media (max-width: 860px) { #ot-hd .ot-nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 20px; padding: 16px 24px 28px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(0, 0, 0, .08); transform: translateY(-120%); visibility: hidden; transition: transform .3s, visibility .3s; } }
@media (max-width: 860px) { #ot-hd .ot-nav.is-open { transform: none; visibility: visible; } }
@media (max-width: 860px) { #ot-hd .ot-nav ul { flex-direction: column; gap: 0; } }
@media (max-width: 860px) { #ot-hd .ot-nav ul a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); } }
@media (max-width: 860px) { #ot-hd .ot-nav ul a::after { display: none; } }
#ot-hd .ot-nav__cta { display: flex; gap: 10px; }
@media (max-width: 1080px) { #ot-hd .ot-nav__cta .ot-btn--outline { display: none; } }
@media (max-width: 860px) { #ot-hd .ot-nav__cta { flex-direction: column; } }
@media (max-width: 860px) { #ot-hd .ot-nav__cta .ot-btn--outline { display: inline-flex; } }
#ot-hd .ot-nav .ot-has-sub { position: relative; }
#ot-hd .ot-nav .ot-has-sub > a::before { content: ""; position: absolute; right: -14px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); }
#ot-hd .ot-nav .ot-sub { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); min-width: 160px; display: flex; flex-direction: column; gap: 0; padding: 8px 0; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 24px rgba(0,0,0,.08); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; z-index: 50; }
#ot-hd .ot-nav .ot-has-sub:hover .ot-sub, #ot-hd .ot-nav .ot-has-sub:focus-within .ot-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
#ot-hd .ot-nav .ot-sub a { display: block; padding: 10px 20px; font-size: 14px; white-space: nowrap; }
#ot-hd .ot-nav .ot-sub a::after { display: none; }
#ot-hd .ot-nav .ot-sub a:hover { background: #F4FAFD; }
@media (max-width: 860px) { #ot-hd .ot-nav .ot-has-sub > a::before { display: none; } }
@media (max-width: 860px) { #ot-hd .ot-nav .ot-sub { position: static; transform: none; opacity: 1; visibility: visible; border: 0; box-shadow: none; padding: 0 0 4px 16px; min-width: 0; } }
@media (max-width: 860px) { #ot-hd .ot-nav .ot-sub a { padding: 8px 0; font-size: 14px; } }
#ot-hd .ot-btn { border-radius: 0; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding: 0 40px; letter-spacing: .08em; position: relative; overflow: hidden; isolation: isolate; box-shadow: none !important; }
#ot-hd .ot-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: translateX(-101%); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
#ot-hd .ot-btn:hover { transform: none; }
#ot-hd .ot-btn:hover::before { transform: none; }
#ot-hd .ot-btn--grad:hover, #ot-hd .ot-btn--outline:hover { color: #fff; }
#ot-hd .ot-btn--outline { border: 0; box-shadow: inset 0 0 0 1.5px currentColor !important; }
#ot-hd { transition: background .4s, border-color .4s, box-shadow .4s; }
#ot-hd.is-top { background: transparent; border-color: transparent; backdrop-filter: none; }
#ot-hd.is-top .ot-nav ul a, #ot-hd.is-top .ot-sub a { color: #fff; }
#ot-hd.is-top .ot-sub { background: var(--ink); border-color: rgba(255,255,255,.12); }
#ot-hd.is-top .ot-sub a:hover { background: rgba(255,255,255,.08); }
#ot-hd.is-top .ot-hd__logo img { filter: brightness(0) invert(1); }
#ot-hd.is-top .ot-btn--outline { color: #fff; }
#ot-hd.is-top .ot-hd__tg span { background: #fff; }
@media (max-width: 860px) { #ot-hd.is-top .ot-nav ul a, #ot-hd.is-top .ot-sub a { color: var(--navy); } }
@media (max-width: 860px) { #ot-hd.is-top .ot-sub { background: transparent; } }
@media (max-width: 860px) { #ot-hd.is-top .ot-btn--outline { color: var(--blue); } }
#ot-hd .ot-btn--outline { clip-path: none; }
#ot-hd.is-top .ot-btn--outline { background: transparent; }
@media (max-width: 860px) { #ot-hd .ot-nav { position: fixed; inset: 0 0 0 auto; width: min(64vw, 340px); height: 100dvh; padding: calc(var(--header-h) + 8px) 22px 32px; gap: 18px; overflow-y: auto; background: #fff; border: 0; box-shadow: -16px 0 40px rgba(2,31,54,.18); transform: translateX(100%); visibility: hidden; transition: transform .4s cubic-bezier(.16, 1, .3, 1), visibility .4s; z-index: 55; } }
@media (max-width: 860px) { #ot-hd .ot-nav.is-open { transform: none; visibility: visible; } }
@media (max-width: 860px) { #ot-hd .ot-nav ul a { padding: 13px 2px; font-size: 15px; } }
@media (max-width: 860px) { #ot-hd .ot-nav .ot-nav__cta { flex-direction: column; gap: 10px; } }
@media (max-width: 860px) { #ot-hd .ot-nav .ot-nav__cta .ot-btn { width: 100%; } }
@media (max-width: 860px) { #ot-hd .ot-hd__tg { position: relative; z-index: 60; } }
@media (max-width: 860px) { #ot-hd .ot-hd__tg[aria-expanded="true"] span:not(.sr-only) { background: var(--navy) !important; } }
@media (max-width: 860px) { .ot-overlay { position: fixed; inset: 0; z-index: 54; background: rgba(2,31,54,.5); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; } }
@media (max-width: 860px) { .ot-overlay.is-open { opacity: 1; visibility: visible; } }
@media (max-width: 860px) { body.ot-lock { overflow: hidden; } }
@media (max-width: 860px) { .ot-overlay { z-index: 45; } }
@media (max-width: 860px) { #ot-hd { z-index: 50; } }
@media print { #ot-hd { display: none !important; } }
/* 旧ヘッダーの黒背景・clip-path がホバーで当たる事故を防ぐ明示（T-20261005-11） */
#ot-hd .gn a:hover, #ot-hd .gn a:focus, #ot-hd .ot-nav ul a:hover, #ot-hd .ot-nav ul a:focus { background: transparent; }