:root{
	--navy:#0B2B5A;
	--blue:#0D5AA7;
	--bg:#F5F8FC;
	--text:#152033;
	--muted:#5C6B82;
	--border:#E6EAF0;
	--card:#FFFFFF;
	--shadow:0 10px 25px rgba(11,43,90,.08);
	--radius:12px;
	--radius-sm:8px;
	--max:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
	font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
	color:var(--text);
	line-height:1.7;
	background:#fff;
}

a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.section{padding:88px 0}
.section.section-alt{background:var(--bg)}
.section-tight{padding:56px 0}

h1,h2,h3{line-height:1.35; margin:0 0 14px}
h1{font-size:40px; letter-spacing:.02em}
h2{font-size:28px}
h3{font-size:18px}
p{margin:0 0 14px; color:var(--text)}
.small{font-size:13px; color:var(--muted)}
.lead{font-size:16px; color:var(--muted)}
.badge{display:inline-block; padding:6px 10px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted); background:#fff}

.header{
	position:sticky; top:0; z-index:50;
	background:rgba(255,255,255,.9);
	backdrop-filter:saturate(160%) blur(10px);
	border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:40px; width:auto; display:block}
.nav{display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.nav a{font-size:14px; opacity:.9}
.nav a.active{color:var(--blue); font-weight:700}
.btn{
	display:inline-flex; align-items:center; justify-content:center;
	padding:11px 16px; border-radius:var(--radius-sm);
	border:1px solid var(--border);
	font-weight:700; font-size:14px;
	cursor:pointer; user-select:none;
	transition:transform .05s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy); color:#fff; border-color:transparent; box-shadow:0 10px 20px rgba(11,43,90,.16)}
.btn-primary:hover{background:#082246; text-decoration:none}
.btn-outline{background:#fff; color:var(--navy)}
.btn-outline:hover{background:rgba(11,43,90,.04); text-decoration:none}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

.hero{
	position:relative;
	padding:72px 0 56px;
	overflow:hidden;
	background:
		radial-gradient(900px 400px at 80% 30%, rgba(13,90,167,.16), transparent 70%),
		radial-gradient(700px 320px at 10% 10%, rgba(11,43,90,.10), transparent 60%),
		linear-gradient(180deg, #FFFFFF, #F6FAFF);
	border-bottom:1px solid var(--border);
	background-image: url("../img/hero-bg.jpg"); /* 仮画像 */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:40px; align-items:center}
.hero-card{
	background:rgba(255,255,255,.85);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:22px;
}
.hero-art{
	width: 420px;
	height: 280px;
	border-radius:var(--radius);
	border:1px solid var(--border);
	background:
		radial-gradient(250px 250px at 30% 40%, rgba(13,90,167,.25), transparent 70%),
		radial-gradient(300px 300px at 70% 60%, rgba(11,43,90,.14), transparent 70%),
		linear-gradient(135deg, rgba(11,43,90,.06), rgba(13,90,167,.04));
	position:relative;
	overflow:hidden;
	box-shadow:var(--shadow);
}
.hero-art::after{
	content:"";
	position:absolute; inset:-50px;
	background:
		radial-gradient(120px 120px at 20% 30%, rgba(255,255,255,.55), transparent 70%),
		radial-gradient(160px 160px at 60% 40%, rgba(255,255,255,.35), transparent 75%),
		radial-gradient(140px 140px at 80% 70%, rgba(255,255,255,.30), transparent 70%);
	transform:rotate(12deg);
}
.hero-art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	border-radius: 12px;
}

.hero-art img.active {
	opacity: 1;
}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{
	background:var(--card);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:18px;
}
.card .icon{
	width:42px; height:42px; border-radius:12px;
	display:grid; place-items:center;
	background:rgba(13,90,167,.08);
	border:1px solid rgba(13,90,167,.14);
	margin-bottom:12px;
}
.icon svg{width:22px; height:22px; fill:none; stroke:var(--navy); stroke-width:2}
.card p{color:var(--muted)}

.kicker{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.hr{height:1px; background:var(--border); margin:20px 0}

.product-slab{
	background:linear-gradient(180deg, rgba(13,90,167,.08), rgba(245,248,252,.85));
	border:1px solid rgba(13,90,167,.18);
	border-radius:calc(var(--radius) + 6px);
	box-shadow:var(--shadow);
	padding:26px;
}
.two-col{display:grid; grid-template-columns: 1fr 1fr; gap:26px; align-items:center}
.product-img{
	width:100%; height:auto; border-radius:var(--radius);
	border:1px solid var(--border);
	box-shadow:0 12px 24px rgba(0,0,0,.08);
	background:#fff;
}
.spec{
	border:1px solid var(--border);
	border-radius:var(--radius);
	background:#fff;
	padding:16px;
}
.spec-row{display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px dashed var(--border)}
.spec-row:last-child{border-bottom:none}
.spec-row b{color:var(--text)}
.spec-row span{color:var(--muted)}

.accordion{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff}
.acc-btn{
	width:100%; text-align:left; padding:14px 16px;
	background:#fff; border:none; cursor:pointer;
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	font-weight:800; color:var(--navy);
}
.acc-btn:hover{background:rgba(11,43,90,.03)}
.acc-panel{display:none; padding:0 16px 16px; color:var(--muted)}
.acc-panel.open{display:block}
.chev{transition:transform .15s ease}
.chev.open{transform:rotate(180deg)}

.pagehead{padding:44px 0 18px}
.pagehead h1{font-size:34px}
.breadcrumb{font-size:13px; color:var(--muted); margin-bottom:10px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--blue)}

.footer{
	border-top:1px solid var(--border);
	padding:34px 0;
	background:#fff;
}
.footer small{color:var(--muted)}
.footer-grid{display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--blue)}

.cta-band{
	background:var(--navy);
	color:#fff;
	padding:44px 0;
}
.cta-band p{color:rgba(255,255,255,.85)}
.cta-band .btn{border-color:rgba(255,255,255,.25)}
.cta-band .btn-outline{background:transparent; color:#fff}
.cta-band .btn-outline:hover{background:rgba(255,255,255,.08)}
.cta-band .btn-primary{background:#fff; color:var(--navy)}
.cta-band .btn-primary:hover{background:#EAF2FF}

.form-card{max-width:820px}
label{display:block; font-weight:700; margin:14px 0 6px}
input, select, textarea{
	width:100%;
	padding:12px 12px;
	border:1px solid var(--border);
	border-radius:10px;
	background:#fff;
	font-size:15px;
}
textarea{min-height:160px; resize:vertical}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.notice{padding:12px 14px; background:rgba(13,90,167,.06); border:1px solid rgba(13,90,167,.16); border-radius:12px; color:var(--muted)}
.checkbox{display:flex; gap:10px; align-items:flex-start; margin-top:14px}
.checkbox input{width:18px; height:18px; margin-top:3px}

@media (max-width: 980px){
	.hero-grid{grid-template-columns:1fr}
	.hero-art{height:260px}
	.grid-4{grid-template-columns:repeat(2,1fr)}
	.two-col{grid-template-columns:1fr}
	.footer-grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
	h1{font-size:32px}
	.grid-4{grid-template-columns:1fr}
	.grid-3{grid-template-columns:1fr}
	.form-row{grid-template-columns:1fr}
}