@charset "UTF-8";
:root{
	--bg:#0f0f0f;
	--bg-soft:#141416;
	--sidebar-bg:#1f1f1f;
	--card-bg:rgba(255,255,255,0.035);
	--card-border:rgba(255,255,255,0.09);
	--border:rgba(255,255,255,0.09);
	--border-white:#fff;
	--text-primary:#e3e3e3;
	--text-secondary:#e6e6e6;
	--text-muted:rgba(255,255,255,0.55);
	--accent-blue:#1c4c96;
	--accent-blue-bright:#2f6fd6;
	--accent-yellow:#eac34e;
	--accent-green:#3f9463;
	--grad-start:#5ab8d9;
	--grad-end:#e8c350;
	--sidebar-w:220px;
	--content-max:960px;
	--radius-lg:5px;
	--radius-full:999px;
	--link-blue:#3ab2e1;
	--text-basic:#e3e3e3;
	--accent-lightblue:#3ab2e1;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	background:var(--bg);
	color:var(--text-primary);
	font-family:"Inter",sans-serif;
	font-weight:400;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}

.display{font-family:"Inter",sans-serif;}

/* ===== Layout shell ===== */
.shell{display:flex;min-height:100vh;}

/* ===== Sidebar ===== */
.sidebar{
	width:var(--sidebar-w);
	flex-shrink:0;
	background:var(--sidebar-bg);
	/*border-right:1px solid var(--border);*/
	padding:28px 22px;
	position:sticky;
	top:0;
	height:100vh;
	overflow-y:auto;
	display:flex;
	flex-direction:column;
	gap:36px;
	width:300px;
}
.brand{
	display:flex;
	align-items:center;
	gap:9px;
	font-size:15px;
	font-weight:300;
	letter-spacing:.01em;
}
.nav-primary li{margin-bottom:2px;}
.nav-primary a{
	display:flex;align-items:center;gap:11px;
	padding:9px 8px;
	border-radius:8px;
	font-size:14px;font-size:1.4rem;
	color:var(--text-secondary);
	transition:background .15s ease,color .15s ease;
}
.nav-primary a:hover{background:rgba(255,255,255,0.05);color:var(--text-primary);}
.nav-primary svg{flex-shrink:0;opacity:.85;}

.side-block-title{
	font-size:11px;
	letter-spacing:.08em;
	color:var(--text-muted);
	margin-bottom:10px;
	font-weight:600;
}
.side-list li{margin-bottom:12px;}
.side-list a{
	font-size:14px;font-size:1.4rem;
	color:var(--text-secondary);
	display:block;
	line-height:1.5;
}
.side-list a:hover{color:var(--text-primary);}
.sidebar .none{
	font-size:14px;font-size:1.4rem;
	color:var(--text-secondary);
	line-height:1.5;
}

/* ===== Main content ===== */
.main{
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	width:calc(100% - 300px);
}

.topbar{
	display:flex;
	justify-content:flex-end;
	align-items:center;
	gap:16px;
	padding:26px 60px 0;
}
.pill-btn{
	display:inline-flex;align-items:center;gap:8px;
	background:#214b73;
	padding:12px 20px;
	border-radius:var(--radius-full);
	color:var(--text-primary);
	transition:background .15s ease;
}
.pill-btn:hover{background:rgba(255,255,255,0.11);}
.icon-circle{
	width:34px;height:34px;
	border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	color:var(--text-secondary);
}

section{padding:0 70px;}

/* ===== Hero ===== */
.hero{
	padding:150px 60px 140px;
	text-align:center;
	display:flex;flex-direction:column;align-items:center;
	min-height:calc(100vh - 65px);
	justify-content:center;
}
.hero h1{
	font-family:"Inter",sans-serif;
	font-weight:300;
	font-size:clamp(40px,5.4vw,64px);
	letter-spacing:.01em;
	margin:0 0 14px;
}
.hero p.tagline{
	font-size:15px;
	font-weight:300;
	color:var(--text-secondary);
	margin:0 0 44px;
	letter-spacing:.02em;
}
.search-pill{
	width:100%;
	max-width:520px;
	display:flex;align-items:center;gap:12px;
	background:rgba(255,255,255,0.05);
	border:1px solid var(--border);
	border-radius:var(--radius-full);
	padding:8px 10px 8px 22px;
}
.search-pill input{
	flex:1;
	background:transparent;
	border:none;outline:none;
	color:var(--text-primary);
	font-size:14px;
	font-family:inherit;
}
.search-pill input::placeholder{color:var(--text-muted);}
.round-send{
	width:38px;height:38px;flex-shrink:0;
	border-radius:50%;
	background:var(--accent-blue);
	border:none;
	display:flex;align-items:center;justify-content:center;
	color:#fff;
	transition:background .15s ease;
}
.round-send:hover{background:var(--accent-blue-bright);}
.plus-icon{
	width:20px;height:20px;flex-shrink:0;
	border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	color:var(--text-muted);
}

/* ===== Section header (eyebrow + heading pill + sub) ===== */
.section-head{
	text-align:center;
	margin:0 auto 80px;
}
.eyebrow{
	display:flex;align-items:center;justify-content:center;gap:8px;
	font-size:16px;font-size:1.6rem;
	color:var(--text-basic);
	margin-bottom:22px;
}
.eyebrow .dot{
	width:7px;height:7px;border-radius:50%;
	background:var(--accent-yellow);
	flex-shrink:0;
}
.heading-pill{
	display:flex;align-items:center;gap:14px;
	background:rgba(255,255,255,0.05);
	border:1px solid var(--border);
	border-radius:var(--radius-full);
	padding:14px 14px 14px 26px;
	max-width:760px;
	margin:0 auto 22px;
}
.heading-pill .plus-icon{
	width:26px;height:26px;
	background:rgba(255,255,255,0.06);
	color:var(--text-secondary);
}
.heading-pill h2{
	flex:1;
	margin:0;
	/*font-size:clamp(18px,2.4vw,23px);*/
	font-size:clamp(18px,2.22vw,32px);
	font-weight:500;
	text-align:left;
	letter-spacing:.01em;
}
.section-head .sub{
	font-size:16px;font-size:1.6rem;
	color:var(--text-basic);
	margin:0;
}

.section-block{margin-bottom:170px;}
.section-block:last-of-type{margin-bottom:0;}

/* ===== Feature grid ===== */
.feature-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:95px 90px;
	max-width:var(--content-max);
	margin:0 auto;
}
.feature-card h3{
	font-size:24px;font-size:2.4rem;
	font-weight:600;
	margin:0 0 20px;
}
.feature-card p.desc{
	font-size:16px;font-size:1.6rem;
	color:var(--text-basic);
	line-height:1.68em;
	margin:0 0 16px;
}
.feature-card .bullets{margin:0 0 20px;}
.feature-card .bullets li{
	font-size:16px;font-size:1.6rem;
	color:var(--text-basic);
	padding-left:14px;
	position:relative;
	line-height:1.68em;
	margin-bottom:6px;
}
.feature-card .bullets li::before{
	content:"・";
	position:absolute;left:-2px;top:0;
	color:var(--text-muted);
}
.detail-link{
	font-size:16px;font-size:1.6rem;font-weight:500;
	text-align:right;
}
.detail-link a,
.detail-link span{
	display:inline-flex;align-items:center;gap:24px;
	color:var(--link-blue);
}
.detail-link svg{transition:transform .15s ease;}
.detail-link:hover svg{transform:translateX(3px);}

/* ===== Works cards ===== */
.works-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:22px;
	max-width:914px;
	margin:0 auto 34px;
}
.work-card{
	background:var(--card-bg);
	border-radius:var(--radius-lg);
	overflow:hidden;
}
.work-photo{
	position:relative;
	background-size:cover;
	background-position:center;
}
.work-photo .tag{
	position:absolute;
	left:15px;bottom:-6px;
}
.work-photo .tag span{
	background:var(--accent-lightblue);
	color:#fff;
	font-size:10px;font-size:1.0rem;
	font-weight:600;
	padding:4px 10px;
	border-radius:var(--radius-full);
}
.work-photo .tag span + span{
	margin:0 0 0 0.5em;
}
.work-body{padding:20px 22px 24px;}
.work-body .ttl{
	font-size:20px;font-size:2.0rem;font-weight:600;
	margin:0 0 10px;
	line-height:1.5;
}
.work-body .company{
	font-size:14px;font-size:1.4rem;font-weight:600;
	color:var(--text-basic);
	margin:0 0 10px;
}
.work-body p.desc{
	font-size:14px;font-size:1.4rem;
	color:var(--text-basic);
	line-height:1.5;
	margin:0;
}
.works-more{
	text-align:right;
	max-width:914px;
	margin:0 auto;
}
.works-more a{
	display:inline-flex;align-items:center;gap:24px;
	color:var(--link-blue);
}

/* ===== Support numbered list ===== */
.support-list{
	max-width:720px;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	gap:60px;
}
.support-item{
	display:flex;
	gap:18px;
	align-items:baseline;
}
.support-item .num{
	font-family:"Inter",sans-serif;
	font-size:32px;font-size:3.2rem;font-weight:700;
	color:var(--text-basic);
	flex-shrink:0;
	padding-top:2px;
}
.support-item h3{
	font-size:32px;font-size:3.2rem;font-weight:700;
	margin:0 0 12px;
	line-height:1.5;
}
.support-item p{
	font-size:16px;font-size:1.6rem;
	color:var(--text-basic);
	line-height:1.68;
	margin:0;
}

/* ===== Bottom CTA ===== */
.cta-band{
	margin:150px 70px 40px;
	border-radius:22px;
	background:linear-gradient(100deg,var(--grad-start) 0%, #a9c3b3 55%, var(--grad-end) 100%);
	padding:44px 48px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
	flex-wrap:wrap;
	color:#0c0c0d;
}
.cta-band h2{
	color:var(--text-basic);
	font-size:40px;font-size:4.0rem;
	font-weight:400;
	margin:0 0 15px;
}
.cta-band p{
	color:var(--text-basic);
	margin:0;
	max-width:630px;
	line-height:1.8;
	opacity:.85;
}
.cta-btn{
	display:inline-flex;align-items:center;gap:8px;
	background:#fff;
	color:#0c0c0d;
	padding:21px 44px;
	border-radius:var(--radius-full);
	font-size:20px;font-size:2.0rem;font-weight:500;
	flex-shrink:0;
	display:inline-flex;align-items:center;gap:24px;
	color:var(--link-blue);
}

footer{
	text-align:center;
	padding:26px 40px 40px;
	font-size:11px;
	color:var(--text-muted);
}

/* ===== Mobile nav toggle (hidden on desktop) ===== */
.mobile-topbar{display:none;}
.nav-overlay-bg{display:none;}

/* ===== Pagination ===== */
.wp-pagenavi{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	margin:0 0 40px;
}
.wp-pagenavi span,
.wp-pagenavi a{
	width:40px;height:40px;
	display:flex;align-items:center;justify-content:center;
	font-size:15px;font-size:1.5rem;
	font-weight:600;
	color:var(--text-secondary);
	border-radius:8px;
}
.wp-pagenavi span:hover,.wp-pagenavi a:hover{color:var(--text-basic);}
.wp-pagenavi span.current{
	background:var(--accent-lightblue);
	color:#fff;
}
/*.page-dots{
	color:var(--text-muted);
	font-size:15px;font-size:1.5rem;
	padding:0 2px;
}*/
.previouspostslink,
.nextpostslink{
	width:36px;height:36px;
	display:flex;align-items:center;justify-content:center;
	color:var(--text-secondary);
	border-radius:50%;
}
.previouspostslink:hover,.nextpostslink:hover{color:var(--text-basic);background:rgba(255,255,255,0.05);}


/* ===================================================
	 Responsive: <=1024px -> stacked, sidebar becomes
	 a top bar with a slide-out drawer
=================================================== */
@media (max-width:1024px){
	.shell{flex-direction:column;}

	.sidebar{
		position:fixed;
		inset:0 auto 0 0;
		transform:translateX(-100%);
		transition:transform .25s ease;
		z-index:60;
		width:78%;
		max-width:300px;
		box-shadow:20px 0 40px rgba(0,0,0,.4);
	}
	.sidebar.open{transform:translateX(0);}

	.mobile-topbar{
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding:18px 22px;
		border-bottom:1px solid var(--border);
		position:sticky;top:0;
		background:var(--bg);
		z-index:50;
	}
	.menu-btn{
		width:38px;height:38px;
		border-radius:9px;
		border:1px solid var(--border);
		background:rgba(255,255,255,0.05);
		display:flex;align-items:center;justify-content:center;
		color:var(--text-primary);
	}
	.nav-overlay-bg{
		display:none;
		position:fixed;inset:0;
		background:rgba(0,0,0,.55);
		z-index:55;
	}
	.nav-overlay-bg.show{display:block;}

	/* ===== Main content ===== */
	.main{
		width:100%;
	}

	.topbar{display:none;}

	section{padding:0 26px;}
	.hero{padding:70px 26px 90px;min-height:calc(100vh - 75px);}
	.hero h1{font-size:clamp(32px,9vw,46px);}

	.section-block{margin-bottom:100px;}

	.heading-pill{padding:12px 12px 12px 18px;flex-wrap:wrap;}
	.heading-pill h2{font-size:17px;}

	.feature-grid{grid-template-columns:1fr;gap:44px;}
	.works-grid{grid-template-columns:1fr;}

	.cta-band{margin:90px 20px 30px;padding:36px 26px;flex-direction:column;align-items:flex-start;}
	.cta-btn{width:100%;justify-content:center;}
}

@media (max-width:520px){
	.hero{padding:56px 20px 70px;}
	.hero p.tagline{font-size:13px;}
	.search-pill{padding:6px 8px 6px 16px;}
	section{padding:0 20px;}
	.support-item{flex-direction:column;gap:6px;}
	.support-item .num{font-size:14px;}

	/* ===== Pagination ===== */
	.pagination{gap:6px;}
}