/* トップページ（top_pc.html）と共通のCSS */

/* 色は現行サイト（tailwind.config.js の brand）と同じ */
:root{
  --ink:#111111; --accent:#005bac; --gray:#f3f4f6; --white:#fff;
  --rule:#e5e7eb; --rule2:#d1d5db; --mute:#6b7280; --body:#374151;
  --serif:'Noto Serif JP',serif; --en:'Cormorant Garamond',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.9}
a{color:inherit;text-decoration:none}
.wrap{width:min(1240px,100% - 80px);margin:0 auto}
.nw{white-space:nowrap}

.util{background:var(--ink);color:#c9cdd3;font-size:12px}
.util .wrap{display:flex;justify-content:flex-end;gap:28px;height:34px;align-items:center}
.hd{background:#fff;border-bottom:1px solid var(--rule);position:relative;z-index:3}
.hd .wrap{display:flex;align-items:center;height:80px}
.logo{display:flex;align-items:center;gap:14px}
.logo img{height:28px;width:auto;display:block}
.logo b{font-family:var(--en);font-size:28px;font-weight:600;letter-spacing:.06em}
.logo b i{font-style:normal;color:var(--accent)}
.logo small{font-size:11px;color:var(--mute);letter-spacing:.1em}
.nav{display:flex;gap:30px;margin-left:auto;margin-right:24px;font-size:14px;font-weight:500;white-space:nowrap}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after{transform:scaleX(1)}
.btn-hd{background:var(--ink);color:#fff;height:80px;margin-right:-40px;padding:0 34px;display:flex;flex-direction:column;justify-content:center;font-size:14px;font-weight:700;line-height:1.4}
.btn-hd span{font-family:var(--en);font-size:12px;letter-spacing:.12em;color:#9ca3af;font-weight:500}

.hero{position:relative;height:760px;background:linear-gradient(115deg,#0b0b0b 0%,#0a2540 55%,#005bac 120%);color:#fff;overflow:hidden}
/* 背景の線の動き（canvas）。文字側は暗くして読みやすく */
.hero canvas.flow{position:absolute;inset:0;width:100%;height:100%}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,14,.82) 0%,rgba(8,10,14,.5) 38%,rgba(8,10,14,0) 62%)}
/* 文字のフェードイン */
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.htx>*{animation:up 1.1s cubic-bezier(.2,.7,.2,1) both}
.htx .kicker{animation-delay:.2s}.htx h1{animation-delay:.4s}.htx p{animation-delay:.7s}
.pick{animation:up 1s .9s cubic-bezier(.2,.7,.2,1) both}
.scroll::after{content:"";display:block;width:1px;height:56px;margin:12px auto 0;background:linear-gradient(#9fc3ea,transparent);animation:drop 2.2s ease-in-out infinite;transform-origin:top}
@keyframes drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
/* スクロールで見出しと中身をふわっと出す（JSが動くときだけ隠す） */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.js .rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.htx>*,.pick{animation:none}.js .rv{opacity:1;transform:none;transition:none}.scroll::after{animation:none}}
.hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px}
.hero .wrap{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;padding-bottom:60px}
.hero .kicker{font-size:14px;letter-spacing:.16em;color:#9fc3ea;margin-bottom:30px}
.hero h1{font-family:var(--serif);font-weight:600;font-size:64px;line-height:1.45;letter-spacing:.04em}
.hero p{margin-top:30px;font-size:16px;color:#d5dbe3;max-width:540px}
.pick{position:absolute;left:0;bottom:0;background:#fff;color:var(--ink);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:22px 40px 22px calc((100vw - min(1240px,100vw - 80px))/2);width:62%}
.pick em{font-style:normal;font-family:var(--en);font-size:20px;font-weight:600;color:var(--accent)}
.pick span{font-size:14px;border-left:1px solid var(--rule2);padding-left:24px}
.pick b{font-size:13px;color:var(--accent)}
.scroll{position:absolute;right:40px;bottom:36px;font-family:var(--en);font-size:13px;letter-spacing:.2em;writing-mode:vertical-rl;color:#9fc3ea}

.newsbar{border-bottom:1px solid var(--rule)}
.newsbar .wrap{display:grid;grid-template-columns:160px 1fr auto;align-items:center;min-height:84px;gap:24px}
.newsbar h2{font-family:var(--en);font-size:26px;font-weight:600}
.newsbar ul{list-style:none;display:flex;gap:40px;font-size:14px}
.newsbar time{font-family:var(--en);font-size:16px;color:var(--mute);margin-right:14px}
.more{font-size:13px;font-weight:700;display:inline-flex;gap:10px;align-items:center;white-space:nowrap}
.more::after{content:"";width:28px;height:1px;background:currentColor}

section{padding:140px 0}
.st{margin-bottom:64px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.st h2{font-family:var(--en);font-weight:500;font-size:72px;line-height:1;letter-spacing:.01em}
.st h2 small{display:inline-block;font-family:'Noto Sans JP';font-size:15px;font-weight:700;margin-left:22px;vertical-align:14px;letter-spacing:.06em}
.st h2 small::before{content:"／";color:var(--accent);margin-right:10px}
.dark .st h2 small::before{color:#6fa8e0}

.about .in{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.about h3{font-family:var(--serif);font-weight:600;font-size:38px;line-height:1.7;letter-spacing:.04em}
.about h3 em{font-style:normal;color:var(--accent)}
.about .tx p{color:var(--body);font-size:16px}
.about ol{list-style:none;margin-top:40px;border-top:1px solid var(--ink)}
.about li{display:grid;grid-template-columns:70px 1fr;padding:22px 0;border-bottom:1px solid var(--rule2)}
.about li i{font-style:normal;font-family:var(--en);font-size:28px;color:var(--accent);line-height:1.2}
.about li b{font-size:17px;display:block}
.about li span{font-size:14px;color:var(--mute)}

.ph{position:relative;background:linear-gradient(135deg,#1d2a38,#0a2540 60%,#123d6b);overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px)}
.ph figcaption{position:absolute;left:16px;bottom:12px;font-size:11px;color:rgba(255,255,255,.7);letter-spacing:.06em}
.ph.light{background:linear-gradient(135deg,#dfe3e8,#c9d0d8)}
.ph.light::before{background:repeating-linear-gradient(115deg,rgba(0,0,0,.03) 0 2px,transparent 2px 14px)}
.ph.light figcaption{color:#6b7280}

.service{background:var(--gray)}
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--rule2);border:2px solid var(--rule2)}
.svc a{background:#fff;padding:44px 48px 40px;display:grid;grid-template-columns:auto 1fr;gap:6px 28px;min-height:250px;position:relative;align-content:start}
.svc i{font-style:normal;font-family:var(--en);font-size:56px;line-height:1;color:var(--accent);grid-row:span 3}
.svc h3{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.5}
.svc p{font-size:14.5px;color:var(--body)}
.svc .tags{font-size:12px;color:var(--mute);margin-top:6px}
.svc a::after{content:"→";position:absolute;right:32px;bottom:26px;color:var(--accent);font-size:18px}

.cases{display:grid;grid-template-columns:1.3fr 1fr;gap:40px}
.case .ph{aspect-ratio:16/10}
.cases .sub{display:grid;gap:28px;align-content:start}
.cases .sub .case{display:grid;grid-template-columns:180px 1fr;gap:22px}
.cases .sub .ph{aspect-ratio:4/3}
.case .meta{font-size:12px;color:var(--accent);font-weight:700;margin-top:18px}
.cases .sub .meta{margin-top:0}
.case h3{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.6;margin-top:6px}
.cases .sub h3{font-size:17px}
.case p{font-size:14px;color:var(--body);margin-top:8px}
.note{font-size:12px;color:var(--mute);margin-top:28px}

.dark{background:var(--ink);color:#fff}
.experts .lead{color:#c9cdd3;max-width:620px;margin-top:-30px;margin-bottom:56px}
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.person .ph{aspect-ratio:3/4}
.person .role{font-size:12px;color:#8fb8e3;margin-top:16px}
.person b{font-family:var(--serif);font-size:20px;font-weight:600;display:block}
.person span{font-size:13px;color:#9ca3af}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:40px;border-top:1px solid #2e2e2e;padding-top:22px;font-family:var(--en);font-size:16px;color:#9ca3af}
.pager b{color:#fff}

.ins{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ins .ph{aspect-ratio:16/10}
.ins .meta{display:flex;gap:14px;font-size:12px;color:var(--mute);margin-top:16px}
.ins .meta em{font-style:normal;color:var(--accent);font-weight:700}
.ins h3{font-size:17px;font-weight:700;line-height:1.7;margin-top:6px}

.proof{background:var(--gray);padding:100px 0}
.proof .in{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center}
.proof h3{font-family:var(--serif);font-size:32px;font-weight:600;line-height:1.6}
.proof p{color:var(--body);margin-top:18px;font-size:15px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.stats div{padding:24px 0 0}
.stats b{display:block;font-family:var(--en);font-size:54px;font-weight:500;line-height:1.1;color:var(--accent)}
.stats b small{font-family:'Noto Sans JP';font-size:18px;font-weight:700;margin-left:2px}
.stats span{font-size:13px;color:var(--body)}

.msg{padding:0;display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.msg .photo{min-height:560px}
.msg .tx{padding:110px 80px;display:flex;flex-direction:column;justify-content:center}
.msg .tx .k{font-family:var(--en);font-size:22px;color:var(--accent);font-weight:600}
.msg h3{font-family:var(--serif);font-size:34px;font-weight:600;line-height:1.7;margin-top:14px}
.msg p{color:var(--body);margin-top:20px;font-size:15px}
.msg .sig{margin-top:28px;font-size:13px;color:var(--mute)}
.msg .sig b{font-family:var(--serif);font-size:20px;color:var(--ink);margin-left:12px}

.split{padding:0;display:grid;grid-template-columns:1fr 1fr}
.split a{padding:80px;min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;color:#fff;overflow:hidden}
.split a .ph{position:absolute;inset:0;margin:0}
.split a .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.split a:hover .ph img{transform:scale(1.05)}
.split a .ph::before{display:none}
.split a .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,20,35,.9) 0%,rgba(10,20,35,.65) 45%,rgba(10,20,35,.25) 100%)}
.split a .ph figcaption{top:16px;bottom:auto;z-index:1}
.split a>*:not(.ph){position:relative}

.split .en{font-family:var(--en);font-size:48px;font-weight:500;line-height:1}
.split h3{font-size:16px;font-weight:700;margin-top:10px}
.split p{font-size:14px;color:#d5dbe3;margin-top:12px;max-width:460px}
.split .go{margin-top:22px;font-size:13px;font-weight:700}
.smb{border-bottom:1px solid var(--rule)}
.smb .wrap{display:flex;justify-content:space-between;align-items:center;min-height:76px;font-size:14px}
.smb span{color:var(--mute);margin-left:18px}
.smb a{color:var(--accent);font-weight:700}

.contact{background:linear-gradient(rgba(0,72,140,.9),rgba(0,72,140,.9)),url(../img/top_bg.jpg) center/cover;color:#fff;padding:110px 0}
.contact .in{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.contact .en{font-family:var(--en);font-size:80px;font-weight:500;line-height:1}
.contact h3{font-family:var(--serif);font-size:24px;font-weight:600;margin-top:18px}
.contact p{margin-top:12px;opacity:.9;font-size:15px}
.contact .btns a{display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(255,255,255,.6);padding:26px 30px;font-weight:700;font-size:17px}
.contact .btns a+a{margin-top:14px}
.contact .btns a small{display:block;font-size:12px;font-weight:400;opacity:.8}

footer{background:var(--ink);color:#9ca3af;padding:80px 0 40px;font-size:13px}
footer h4{color:#fff;font-size:13px;margin-bottom:12px}
footer li{list-style:none;padding:3px 0}
footer .ftop{display:flex;justify-content:space-between;align-items:center;gap:40px}
footer .fnav{display:flex;flex-wrap:wrap;gap:12px 32px;font-size:13.5px;color:#d1d5db}
footer .fnav a:hover{color:#fff}
footer .dxl{display:inline-block;margin-top:36px;font-size:12px;color:#9ca3af;border-bottom:1px solid #3a3a3a;padding-bottom:4px}
footer .dxl:hover{color:#fff}
footer .logo b{color:#fff}
footer .copy{border-top:1px solid #2e2e2e;margin-top:56px;padding-top:24px;display:flex;justify-content:space-between}

/* SP版は top_sp.html で別デザイン */


/* インサイトのアイキャッチ（写真の代わりに文字で組む） */
.eye{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#0a2540,#005bac);color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:18px 20px}
.eye::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px}
.eye em{position:relative;font-style:normal;font-family:var(--en);font-size:34px;line-height:1;opacity:.9}
.eye span{position:relative;font-size:12px;letter-spacing:.1em;margin-top:6px;color:#bcd6f0}
.photo{position:relative;overflow:hidden;margin:0}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 代表メッセージ（写真なし：濃紺＋静止した線の模様） */
.msg2{position:relative;overflow:hidden;background:linear-gradient(120deg,#0b0b0b 0%,#0a2540 60%,#0b3a6e 100%);color:#fff;padding:130px 0}
.msg2 svg.lines{position:absolute;right:-60px;top:0;width:68%;height:100%;opacity:.55}
.msg2 .wrap{position:relative;display:grid;grid-template-columns:280px 1fr;gap:48px}
.msg2 .k{font-family:var(--en);font-size:72px;font-weight:500;line-height:1;color:#fff}
.msg2 .k::after{content:"代表メッセージ";display:block;font-family:'Noto Sans JP';font-size:14px;font-weight:700;letter-spacing:.08em;margin-top:18px;color:#9fc3ea}
.msg2 h3{font-family:var(--serif);font-size:42px;font-weight:600;line-height:1.7;letter-spacing:.04em}
.msg2 p{color:#c9cdd3;margin-top:28px;max-width:640px;font-size:15.5px}
.msg2 .sig{margin-top:40px;display:flex;align-items:center;gap:18px;font-size:13px;color:#9fc3ea}
.msg2 .sig::before{content:"";width:48px;height:1px;background:#9fc3ea}
.msg2 .sig b{font-family:var(--serif);font-size:22px;color:#fff;font-weight:600}
.lft .aboutimg{aspect-ratio:4/3;margin-top:44px}
.lft .aboutimg img{object-position:40% 40%}

/* About の図（3つの立場の線が、推進でひとつにまとまる）。画面に入ると線が描かれる */
.dia{display:block;width:100%;height:auto;overflow:visible}
.dia .ln path{stroke:var(--accent)}
.dia .r{font-family:var(--serif);font-weight:600;font-size:22px;fill:var(--ink)}
.dia .s{font-size:12.5px;fill:var(--mute)}
.dia .r2{font-family:var(--serif);font-weight:600;font-size:17px;fill:var(--accent)}
.dia .dot,.dia .hub{fill:var(--accent)}
.dia .hubt{font-size:14px;font-weight:700;fill:#fff}
.dia .arw{fill:none;stroke:var(--accent);stroke-width:1.6}
.js .dia .ln path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.4,.1,.2,1)}
.js .rv.on .dia .ln path{stroke-dashoffset:0}
.js .dia .hub,.js .dia .hubt,.js .dia .r2,.js .dia .arw{opacity:0;transition:opacity .8s 1.3s}
.js .rv.on .dia .hub,.js .rv.on .dia .hubt,.js .rv.on .dia .r2,.js .rv.on .dia .arw{opacity:1}
@media (prefers-reduced-motion:reduce){.js .dia .ln path{stroke-dashoffset:0;transition:none}.js .dia *{opacity:1!important}}
.lft .aboutdia{margin:56px 0 0}



/* サービス：横スライド（右へはみ出し・矢印/ドラッグ/横スクロールで送る） */
.srail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;padding:0 calc((100vw - min(1240px,100vw - 80px))/2) 4px;scroll-padding-left:calc((100vw - min(1240px,100vw - 80px))/2)}
.srail::-webkit-scrollbar{display:none}
.srail.drag{cursor:grabbing;scroll-snap-type:none}
.srail.drag a{pointer-events:none}
.sc{flex:0 0 380px;scroll-snap-align:start;background:#fff;border-top:3px solid var(--accent);padding:40px 34px 34px;min-height:400px;display:flex;flex-direction:column;user-select:none;-webkit-user-drag:none;transition:box-shadow .3s}
.sc:hover{box-shadow:0 14px 34px rgba(17,17,17,.08)}
.sc i{font-style:normal;font-family:var(--en);font-size:52px;line-height:1;color:var(--accent)}
.sc h3{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.55;margin-top:24px;min-height:3.1em}
.sc p{font-size:14.5px;color:var(--body);margin-top:12px;line-height:1.9}
.sc .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:22px}
.sc .tags span{font-size:12px;border:1px solid var(--rule2);padding:2px 10px;color:var(--body)}
.sctl{display:flex;align-items:center;gap:22px;margin-top:34px}
.sctl .no{font-family:var(--en);font-size:18px;color:var(--mute);min-width:64px}
.sctl .no b{color:var(--ink);font-weight:500}
.sctl .track{flex:1;height:2px;background:var(--rule2);position:relative}
.sctl .track i{position:absolute;top:0;bottom:0;left:0;width:20%;background:var(--accent);transition:left .35s}
.nav-b{width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);background:#fff;font-size:16px;cursor:pointer;transition:background .2s,color .2s}
.nav-b:hover{background:var(--ink);color:#fff}
.nav-b:disabled{opacity:.3;cursor:default;background:#fff;color:var(--ink)}

/* 日本語を文節の切れ目で改行する（単語の途中で折り返さない） */
h1,h2,h3,h4,p,li,dd,figcaption,.tags,.meta,span,b{word-break:auto-phrase}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* About（PC）：上段＝見出しと説明文、下段＝図と3つの強みを横幅いっぱいの面に */
.ab-top{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.ab-top h3{font-family:var(--serif);font-weight:600;font-size:38px;line-height:1.7;letter-spacing:.04em}
.ab-top h3 em{font-style:normal;color:var(--accent)}
.ab-lead p{color:var(--body);font-size:16px}
.ab-panel{margin-top:72px;background:var(--gray);padding:64px 64px;display:grid;grid-template-columns:1.25fr 1fr;gap:72px;align-items:center}
.ab-panel .aboutdia{margin:0}
.ab-panel ol{list-style:none;border-top:1px solid var(--ink);margin:0}
.ab-panel li{display:grid;grid-template-columns:64px 1fr;padding:24px 0;border-bottom:1px solid var(--rule2)}
.ab-panel li i{font-style:normal;font-family:var(--en);font-size:30px;color:var(--accent);line-height:1.2}
.ab-panel li b{font-size:17px;display:block}
.ab-panel li span{font-size:14px;color:var(--mute)}

/* hero下端の Pick up（半透明の帯・横幅いっぱい） */
.hero .wrap.htx{padding-bottom:90px}
.pick{left:0;right:0;width:auto;bottom:0;padding:0;display:block;background:rgba(8,14,24,.42);border-top:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff}
.pick .pin{width:min(1240px,100% - 80px);margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;height:84px}
.pick em{color:#9fc3ea;font-size:19px}
.pick span{border-left:1px solid rgba(255,255,255,.25);font-size:14.5px;color:#fff}
.pick b{display:flex;align-items:center;gap:14px;font-size:13px;color:#fff;font-weight:700}
.pick b i{font-style:normal;width:40px;height:40px;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
.pick:hover b i{background:#fff;color:var(--ink)}
/* News（独立した段） */
.newsbar .wrap{grid-template-columns:240px 1fr auto;min-height:0;padding:44px 0;gap:40px;align-items:center}
.newsbar h2{font-size:34px;font-weight:500;line-height:1}
.newsbar h2 small{display:block;font-family:'Noto Sans JP';font-size:12px;font-weight:700;letter-spacing:.08em;margin-top:8px}
.newsbar ul{display:grid;grid-template-columns:1fr 1fr;gap:0}
.newsbar li a{display:block;padding:4px 32px;border-left:1px solid var(--rule)}
.newsbar time{display:block;margin:0 0 4px}
.newsbar li span{font-size:14.5px}
.newsbar li a:hover span{color:var(--accent)}

/* 数字：高さのそろった数字にする。小さい数字（日付・スライド番号）は本文の書体で読みやすく */
*{font-variant-numeric:lining-nums}
time,.meta span,.no,.railbar .no,.sctl .no,.pager{font-family:'Noto Sans JP',sans-serif!important;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em}
.no b{font-weight:700}


/* インサイトのアイキャッチ（テーマごとの抽象画＋ラベル） */
.eye{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a2540;display:block;padding:0;margin:0}
.eye::before{display:none}
.eye svg{position:absolute;inset:0;width:100%;height:100%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
a:hover .eye svg{transform:scale(1.04)}
.eye figcaption{position:absolute;left:0;right:0;bottom:0;padding:46px 22px 18px;background:linear-gradient(0deg,rgba(4,12,24,.75),rgba(4,12,24,0));color:#fff;display:block}
.eye figcaption em{display:block;font-style:normal;font-family:var(--en);font-size:25px;font-weight:500;line-height:1.1;letter-spacing:.01em}
.eye figcaption span{display:block;font-size:11px;letter-spacing:.12em;margin-top:6px;color:#bcd6f0}
/* 言語の切り替え（JP / EN） */
.lang{display:flex;align-items:center;margin-right:28px;font-family:var(--en);font-size:15px;letter-spacing:.08em}
.lang a{padding:2px 9px;color:var(--mute)}
.lang a+a{border-left:1px solid var(--rule2)}
.lang a[aria-current]{color:var(--ink);font-weight:600}
.lang a:hover{color:var(--accent)}