@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&family=Outfit:wght@500;600;700&display=swap');

:root { --navy:#092d4b; --navy-2:#123f62; --blue:#207ca8; --sky:#eaf5fa; --orange:#ed6f3b; --ink:#102638; --muted:#5f7180; --line:#d8e3e9; --paper:#fbfcfd; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:82px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans JP",sans-serif; line-height:1.75; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font:inherit; }
.container { width:min(1160px,calc(100% - 40px)); margin:0 auto; }
.skip { position:absolute; left:-9999px; }
.skip:focus { top:10px; left:10px; z-index:100; padding:10px 16px; background:white; }
.eyebrow { margin:0 0 .55rem; color:var(--orange); font:700 .75rem/1 "Outfit",sans-serif; letter-spacing:.16em; }
.section { padding:105px 0; }
.section--gray { background:#f0f5f7; }
.section--statement { position:relative; overflow:hidden; background:white; }
.section--statement::after { display:none; }
.section--statement .container { display:grid; grid-template-columns:.94fr 1.06fr; gap:72px; align-items:center; }
.section--statement .section-head { position:relative; z-index:1; max-width:820px; margin:0; padding:22px 0 22px 34px; border-left:4px solid var(--orange); }
.section--statement .eyebrow { color:var(--orange); font-size:.82rem; }
.section--statement .section-head h2 { color:var(--navy); font-size:clamp(2.4rem,4.5vw,4.25rem); line-height:1.18; white-space:nowrap; }
.section--statement .section-head p:not(.eyebrow) { max-width:42ch; color:var(--muted); font-size:1.65rem; font-weight:700; line-height:1.7; }
.statement-photo { position:relative; min-height:390px; margin:0; overflow:hidden; border-radius:22px; box-shadow:0 16px 34px rgba(17,54,76,.14); }
.statement-photo img { width:100%; height:100%; min-height:390px; object-fit:cover; object-position:center; }
.statement-photo figcaption { position:absolute; top:20px; left:20px; padding:9px 12px; border-radius:9px; color:white; background:rgba(9,45,75,.91); font-size:.75rem; font-weight:700; }
.section-head { max-width:700px; margin-bottom:42px; }
.section-head h2 { margin:0; color:var(--navy); font-size:clamp(1.8rem,3.6vw,3rem); letter-spacing:-.055em; line-height:1.35; }
.section-head p:not(.eyebrow) { margin:1rem 0 0; color:var(--muted); }
.site-header { position:sticky; top:0; z-index:50; height:136px; border-bottom:1px solid rgba(214,227,234,.9); background:rgba(255,255,255,.94); backdrop-filter:blur(14px); }
.header-inner { display:flex; height:100%; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:20px; color:var(--navy); font-size:2.2rem; font-weight:800; letter-spacing:-.04em; line-height:1.15; white-space:nowrap; }
.brand-mark { display:grid; width:92px; height:92px; place-items:center; border-radius:50% 50% 47% 47%; color:white; background:linear-gradient(145deg,#3ab7dd,#10629e); font:700 1.75rem/1 "Outfit",sans-serif; }
.brand small { display:block; color:#708290; font-size:.78rem; font-weight:600; letter-spacing:.03em; }
.nav-links { display:flex; align-items:center; gap:24px; color:#425a6b; font-size:.82rem; font-weight:700; }
.nav-cta { padding:.54rem 1rem; border-radius:999px; color:white; background:var(--navy); }
.menu-button { display:none; border:0; background:transparent; color:var(--navy); font-size:1.3rem; }

.hero { position:relative; overflow:hidden; min-height:680px; color:white; background:linear-gradient(116deg,#082a47 0%,#0d4265 56%,#1a6790 100%); }
.hero::before { position:absolute; inset:0; content:""; opacity:.72; background:radial-gradient(circle at 87% 23%,rgba(110,211,237,.45),transparent 21%),linear-gradient(135deg,transparent 0 62%,rgba(255,255,255,.05) 62% 63%,transparent 63%); }
.hero-grid { position:relative; display:grid; grid-template-columns:1fr .98fr; min-height:680px; align-items:center; gap:26px; }
.hero-copy { padding:70px 0 65px; }
.hero .eyebrow { color:#aee8f8; }
.hero h1 { max-width:9.5ch; margin:0; font-size:clamp(3rem,5.4vw,5.1rem); letter-spacing:-.075em; line-height:1.17; }
.hero h1 b { color:#ffb28b; font-weight:inherit; }
.hero-lead { max-width:44ch; margin:1.25rem 0 0; color:rgba(255,255,255,.83); font-size:1.03rem; }
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; }
.hero-tags span { padding:.3rem .75rem; border:1px solid rgba(255,255,255,.3); border-radius:99px; color:#e6f6fb; font-size:.76rem; }
.hero-tags span:last-child { padding:.27rem .55rem; font-size:.67rem; }
.button-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-flex; min-height:52px; align-items:center; justify-content:center; padding:0 21px; border-radius:999px; color:white; background:var(--orange); font-weight:800; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-2px); background:#d95c2c; }
.button--glass { border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.1); }
.hero-partner { display:flex; width:252px; align-items:center; justify-content:center; margin-top:18px; color:#fff; font-size:1.8rem; font-weight:800; letter-spacing:.06em; }
.button--glass:hover { background:rgba(255,255,255,.18); }
.hero-product { position:relative; align-self:end; height:100%; min-height:580px; }
.hero-product::before { position:absolute; right:-7%; bottom:8%; width:68%; height:36%; border-radius:50%; content:""; background:rgba(113,203,226,.3); filter:blur(36px); }
.hero-product img { position:absolute; z-index:1; right:-17%; bottom:0; width:min(790px,142%); max-width:none; filter:drop-shadow(0 28px 32px rgba(0,14,28,.35)); }
.product-nameplate { position:absolute; z-index:3; top:64%; left:-3%; display:flex; width:80%; align-items:center; justify-content:center; gap:.65rem; padding:.58rem 1.15rem; color:white; background:rgba(9,45,75,.94); border:1px solid rgba(255,255,255,.32); box-shadow:0 7px 15px rgba(0,14,28,.2); font-size:clamp(1.25rem,2.4vw,2rem); font-weight:800; letter-spacing:.1em; text-align:center; }
.product-nameplate img { width:clamp(2rem,3.4vw,2.8rem); height:clamp(2rem,3.4vw,2.8rem); border-radius:50%; object-fit:cover; }
.hero-callout { position:absolute; z-index:2; right:2%; bottom:11%; width:184px; padding:15px 16px; border-radius:12px; color:var(--navy); background:white; box-shadow:0 18px 34px rgba(0,21,35,.22); font-size:.78rem; font-weight:700; line-height:1.55; }
.hero-callout strong { display:block; color:var(--orange); font:700 1.15rem/1.2 "Outfit",sans-serif; }

.mission { padding:33px 0; border-bottom:1px solid var(--line); background:white; }
.mission-inner { display:grid; grid-template-columns:180px 1fr; gap:35px; align-items:center; }
.mission-label { color:var(--orange); font:700 1.02rem/1.35 "Outfit",sans-serif; letter-spacing:.08em; }
.mission p { margin:0; color:var(--navy); font-size:clamp(2rem,3.5vw,2.7rem); line-height:1.35; font-weight:800; }

.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.value { min-height:250px; padding:28px; border:1px solid var(--line); border-radius:18px; background:white; }
.value-num { color:var(--orange); font:700 1rem/1 "Outfit",sans-serif; letter-spacing:.09em; }
.value h3 { margin:3.3rem 0 .55rem; color:var(--navy); font-size:1.18rem; line-height:1.45; }
.value p { margin:0; color:var(--muted); font-size:.88rem; }

.overview { display:grid; grid-template-columns:.95fr 1.05fr; gap:70px; align-items:center; }
.overview-figure { position:relative; min-height:525px; overflow:hidden; border-radius:24px; background:linear-gradient(145deg,#e9f3f6,#d8e8ee); }
.overview-figure::after { position:absolute; left:8%; bottom:9%; width:78%; height:18%; border-radius:50%; content:""; background:rgba(64,121,151,.25); filter:blur(16px); }
.overview-figure img { position:absolute; z-index:1; right:-18%; bottom:6%; width:130%; max-width:none; }
.figure-note { position:absolute; z-index:2; top:24px; left:24px; padding:11px 14px; border-radius:10px; color:white; background:var(--navy); font-size:.77rem; font-weight:700; line-height:1.5; }
.overview h2 { margin:0; color:var(--navy); font-size:clamp(1.7rem,3vw,2.6rem); letter-spacing:-.05em; line-height:1.35; }
.overview > div > p:not(.eyebrow) { margin:1rem 0 0; color:var(--muted); }
.contents { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; margin-top:25px; }
.contents div { display:flex; gap:10px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); font-size:.86rem; font-weight:700; }
.contents b { display:grid; flex:0 0 auto; width:23px; height:23px; place-items:center; border-radius:50%; color:white; background:var(--orange); font:.68rem/1 "Outfit",sans-serif; }

.detail-list { display:grid; gap:70px; }
.detail { display:grid; grid-template-columns:1fr 1fr; min-height:420px; overflow:hidden; border-radius:22px; background:white; box-shadow:0 12px 35px rgba(19,49,67,.08); }
.detail:nth-child(even) .detail-copy { order:-1; }
.detail-photo { min-height:100%; overflow:hidden; background:#dce9ef; }
.detail-photo img { width:100%; height:100%; object-fit:cover; }
.detail-photo--contain { display:grid; place-items:center; background:linear-gradient(145deg,#eaf4f7,#d6e7ed); }
.detail-photo--contain img { width:116%; height:auto; object-fit:contain; }
.detail-copy { display:flex; flex-direction:column; justify-content:center; padding:48px; }
.detail-index { color:var(--orange); font:700 .76rem/1 "Outfit",sans-serif; letter-spacing:.14em; }
.detail h3 { margin:1rem 0 .75rem; color:var(--navy); font-size:clamp(1.45rem,2.5vw,2.15rem); letter-spacing:-.04em; line-height:1.4; }
.detail h3.detail-title--utility { font-size:clamp(1.22rem,2vw,1.8rem); white-space:nowrap; }
.detail p { margin:0; color:var(--muted); font-size:.9rem; }
.detail ul { display:grid; gap:8px; margin:1.2rem 0 0; padding:0; list-style:none; color:#304c60; font-size:.84rem; }
.detail li { position:relative; padding-left:17px; }
.detail li::before { position:absolute; top:.65em; left:0; width:6px; height:6px; border-radius:50%; content:""; background:var(--orange); }

.infra { color:white; background:var(--navy); }
.infra .section-head h2 { color:white; }
.infra .section-head p:not(.eyebrow) { color:rgba(255,255,255,.72); }
.infra .eyebrow { color:#9bddee; }
.infra-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }
.infra-diagram { padding:34px; border:1px solid rgba(255,255,255,.13); border-radius:20px; background:rgba(255,255,255,.06); }
.infra-flow { display:grid; grid-template-columns:repeat(3,1fr); align-items:center; gap:9px; margin-top:8px; }
.infra-step { position:relative; min-height:140px; padding:19px 14px; border-radius:13px; background:rgba(255,255,255,.1); }
.infra-step:not(:last-child)::after { position:absolute; z-index:2; top:50%; right:-15px; width:19px; height:2px; content:""; background:#8fd9eb; }
.infra-step span { display:block; color:#9bddee; font:700 .68rem/1 "Outfit",sans-serif; letter-spacing:.1em; }
.infra-step b { display:block; margin-top:12px; font-size:.95rem; line-height:1.4; }
.infra-step small { display:block; margin-top:5px; color:rgba(255,255,255,.64); font-size:.7rem; line-height:1.45; }
.infra-notes { display:grid; gap:14px; }
.infra-note { padding:22px; border-radius:17px; background:#164e72; }
.infra-note b { display:block; font-size:1rem; }
.infra-note p { margin:.45rem 0 0; color:rgba(255,255,255,.7); font-size:.82rem; }
.infra-pdf { overflow:hidden; max-width:1180px; margin:0 auto; border:1px solid rgba(255,255,255,.2); border-radius:18px; background:white; box-shadow:0 18px 40px rgba(0,0,0,.18); }
.infra-pdf img { display:block; width:100%; height:auto; }

.case-studies { background:white; }
.case-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.case-card { overflow:hidden; margin:0; border-radius:18px; background:#eaf3f6; box-shadow:0 10px 26px rgba(19,49,67,.08); }
.case-card img { display:block; width:100%; aspect-ratio:1 / .82; object-fit:cover; object-position:center; }
.case-card figcaption { display:grid; gap:5px; padding:16px; color:var(--navy); }
.case-card b { font-size:1rem; }
.case-card span { color:var(--muted); font-size:.77rem; line-height:1.5; }

.origin-story { padding:96px 0; color:var(--navy); background:#fff8ed; }
.origin-story__inner { max-width:850px; margin:0 auto; padding:48px 56px; border-left:5px solid var(--orange); border-radius:0 20px 20px 0; background:white; box-shadow:0 12px 30px rgba(19,49,67,.07); }
.origin-story .eyebrow { color:var(--orange); }
.origin-story h2 { margin:.55rem 0 1.25rem; font-size:clamp(2rem,4vw,3.3rem); letter-spacing:-.06em; line-height:1.22; }
.origin-story__lead { margin:0 0 1.6rem; color:#244c62; font-size:clamp(1.1rem,2vw,1.45rem); font-weight:800; line-height:1.55; }
.origin-story__body { display:grid; gap:16px; color:#506a7d; font-size:1rem; line-height:2; }
.origin-story__body p { margin:0; }
.origin-story__body strong { color:var(--navy); font-size:1.1em; }

.spec-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; }
.spec-image { position:relative; overflow:hidden; min-height:475px; border-radius:21px; background:#eaf3f6; }
.spec-image img { width:100%; height:100%; object-fit:cover; }
.transport-badge { position:absolute; top:18px; left:18px; padding:11px 14px; border-radius:10px; color:white; background:rgba(7,40,63,.9); font-size:.84rem; font-weight:800; line-height:1.45; box-shadow:0 8px 20px rgba(0,0,0,.2); }
.spec-caption { position:absolute; right:18px; bottom:18px; left:18px; padding:14px; border-radius:10px; color:white; background:rgba(7,40,63,.86); font-size:.78rem; font-weight:700; }
.spec-table { width:100%; border-collapse:collapse; }
.spec-table th,.spec-table td { padding:15px 0; border-bottom:1px solid var(--line); text-align:left; font-size:.9rem; }
.spec-table th { width:38%; color:var(--muted); font-weight:600; }
.spec-table td { color:var(--navy); font-weight:700; }

.price-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.price { display:flex; flex-direction:column; min-height:300px; padding:34px; border:2px solid #0b2c4b; border-radius:20px; background:white; }
.price--featured { color:white; border-color:var(--navy); background:var(--navy); }
.price-label { color:var(--orange); font:700 .76rem/1 "Outfit",sans-serif; letter-spacing:.14em; }
.price--featured .price-label { color:#9bddee; }
.price h3 { margin:1rem 0 .3rem; font-size:1.1rem; }
.price-amount { margin:.2rem 0 1rem; font:700 clamp(2.2rem,4vw,3.4rem)/1 "Outfit","Noto Sans JP",sans-serif; letter-spacing:-.06em; }
.price-amount small { font:600 .85rem "Noto Sans JP",sans-serif; letter-spacing:0; }
.price p { margin:0; color:var(--muted); font-size:.84rem; }
.price--featured p { color:rgba(255,255,255,.7); }
.price .button { align-self:flex-start; margin-top:auto; }
.price:not(.price--featured) .button { color:var(--navy); border:1px solid var(--navy); background:white; }

.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:21px 0; color:var(--navy); cursor:pointer; list-style:none; font-weight:700; }
.faq summary::after { content:"+"; color:var(--orange); font:500 1.7rem/1 "Outfit",sans-serif; }
.faq details[open] summary::after { content:"−"; }
.faq p { max-width:760px; margin:-1px 0 21px; color:var(--muted); font-size:.88rem; }

.contact { color:white; background:var(--navy); }
.contact-grid { display:grid; grid-template-columns:1fr .9fr; gap:70px; align-items:center; }
.contact .eyebrow { color:#9bddee; }
.contact h2 { margin:0; font-size:clamp(1.7rem,4vw,2.4rem); letter-spacing:-.04em; line-height:1.32; }
.contact h2 span { display:block; white-space:nowrap; }
.contact p { color:rgba(255,255,255,.72); }
.contact-links { display:grid; gap:13px; }
.contact-link { display:flex; gap:13px; align-items:center; padding:17px 20px; border:1px solid rgba(255,255,255,.22); border-radius:14px; background:rgba(255,255,255,.06); }
.contact-link > span { font-size:1.1rem; }
.contact-link span span { display:block; color:rgba(255,255,255,.62); font-size:.72rem; }
.contact-link strong { display:block; font:700 1.25rem/1.25 "Outfit","Noto Sans JP",sans-serif; }
.group-links { display:grid; gap:12px; padding:12px 0 0; }
.group-links b { color:#9bddee; font-size:1rem; letter-spacing:.08em; }
.group-links a { padding:12px 16px; border:1px solid rgba(155,221,238,.58); border-radius:10px; color:white; background:rgba(255,255,255,.09); font-size:clamp(1.35rem,2.7vw,2rem); font-weight:800; line-height:1.2; text-decoration:none; }
.group-links a:hover { color:var(--navy); background:#9bddee; }
.company { padding:34px 0 98px; color:rgba(255,255,255,.67); border-top:1px solid rgba(255,255,255,.13); background:var(--navy); }
.company-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:34px; }
.company b { display:block; color:white; font-size:1.35rem; }
.company p { margin:.35rem 0 0; font-size:1.2rem; line-height:1.6; }
.footer { padding:18px 0 98px; color:rgba(255,255,255,.42); background:var(--navy); font-size:.72rem; text-align:center; }
.floating { position:fixed; z-index:40; right:20px; bottom:20px; display:flex; gap:7px; padding:8px; border:1px solid rgba(255,255,255,.72); border-radius:999px; background:rgba(7,42,70,.93); box-shadow:0 10px 25px rgba(0,0,0,.18); backdrop-filter:blur(8px); }
.floating a { padding:.56rem .78rem; border-radius:99px; color:white; font-size:.77rem; font-weight:700; }
.floating a:first-child { background:var(--orange); }

@media(max-width:900px){
  .site-header{height:94px}.brand{gap:12px;font-size:1.3rem}.brand-mark{width:55px;height:55px;font-size:1rem}.brand small{font-size:.62rem}.nav-links { position:fixed; top:94px; right:0; left:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px 20px 22px; background:white; border-bottom:1px solid var(--line); box-shadow:0 15px 25px rgba(14,37,53,.1); }
  .nav-links.open { display:flex; }.nav-links a{padding:11px 0}.nav-cta{text-align:center;margin-top:7px}.menu-button{display:block}
  .hero-grid{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:65px 0 18px}.hero-product{height:400px;min-height:0}.hero-product img{right:1%;width:104%}.product-nameplate{top:63%;left:6%;width:76%;}.hero-callout{right:5%;bottom:12%;}.section--statement .container{grid-template-columns:1fr;gap:34px}.statement-photo{min-height:360px}.statement-photo img{min-height:360px}
  .value-grid{grid-template-columns:1fr}.value{min-height:auto}.value h3{margin-top:1.7rem}.overview,.spec-grid,.contact-grid{grid-template-columns:1fr;gap:38px}.overview-figure{min-height:430px}.detail-list{gap:30px}.detail{grid-template-columns:1fr}.detail:nth-child(even) .detail-copy{order:0}.detail-photo{min-height:340px}.detail-copy{padding:36px}.infra-grid{grid-template-columns:1fr}.infra-flow{grid-template-columns:repeat(2,1fr);gap:12px}.infra-step:not(:last-child)::after{display:none}.case-grid{grid-template-columns:repeat(2,1fr)}.origin-story{padding:74px 0}.spec-image{min-height:390px}
}
@media(max-width:620px){
  .container{width:min(100% - 30px,1160px)}.site-header{height:82px}.nav-links{top:82px}.brand{gap:8px;font-size:1.02rem}.brand-mark{width:45px;height:45px;font-size:.78rem}.brand small{font-size:.52rem}.section{padding:70px 0}.section--statement .section-head{padding-left:20px}.statement-photo,.statement-photo img{min-height:270px}.hero h1{font-size:clamp(2.45rem,12vw,3.5rem)}.hero-copy{padding-top:50px}.hero-product{height:300px}.hero-product img{right:-8%;width:117%}.product-nameplate{top:62%;left:1%;width:88%;padding:.42rem .55rem;font-size:1.1rem}.product-nameplate img{width:1.9rem;height:1.9rem}.hero-callout{width:150px;padding:11px;font-size:.66rem}.mission-inner{grid-template-columns:1fr;gap:8px}.mission{padding:27px 0}.overview-figure{min-height:320px}.overview-figure img{right:-27%;width:145%}.contents{grid-template-columns:1fr}.detail-photo{min-height:270px}.detail-copy{padding:29px 23px}.infra-diagram{padding:21px}.infra-flow{grid-template-columns:1fr}.infra-step{min-height:118px}.case-grid{grid-template-columns:1fr}.origin-story{padding:62px 0}.origin-story__inner{padding:34px 25px}.spec-image{min-height:310px}.price-grid{grid-template-columns:1fr}.price{min-height:260px}.company-grid{grid-template-columns:1fr;gap:20px}.company b{font-size:1.2rem}.company p{font-size:1.05rem}.floating{right:10px;bottom:10px}
}