/* ========== リセット・ベース設定 ========== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
	line-height: 1.6;
	color: #333;
	background-color: #fff;
}

/* ========== ヘッダー ========== */
.header {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	border-bottom: 1px solid #e0e0e0;
}

.header-container {
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px;
}

.logo {
	display: flex;
	align-items: center;
	height: 50px;
}

.logo img {
	height: 50px;
	display: block;
}

.nav {
	display: flex;
	align-items: center;
	gap: 40px;
}

.nav a {
	text-decoration: none;
	color: #333;
	font-weight: 500;
	transition: color 0.3s ease;
	position: relative;
	display: inline-flex;
	align-items: center;
}

.nav a:hover {
	color: #2563eb;
}

.nav a::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -5px;
	left: 0;
	background-color: #2563eb;
	transition: width 0.3s ease;
}

.nav a:hover::after {
	width: 100%;
}

.nav a.contact-btn {
	color: #2563eb;
	padding: 10px 24px;
	border: 1px solid #2563eb;
	border-radius: 2px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
}

.nav a.contact-btn:hover {
	background: #2563eb;
	color: #fff;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.nav a.contact-btn::after {
	display: none;
}


:root{ --header-h: 64px; } /* 初期値。JSで実寸に置き換える */

#site-header{
	position: fixed; top: 0; left: 0; right: 0;
	z-index: 1000;
	background: #fff;								 /* 既存色に合わせてOK */
	transition: transform .34s cubic-bezier(.2,.6,.2,1), box-shadow .2s;
	will-change: transform;
	transform: translateY(0);
}
body{ padding-top: var(--header-h); } /* 固定ヘッダーぶんの余白を付与 */

#site-header.is-hide{ transform: translateY(calc(-1 * var(--header-h))); }
#site-header.is-show{ transform: translateY(0); }
#site-header.has-shadow{ box-shadow: 0 6px 18px rgba(20,40,60,.08); }

/* 動きを減らす設定の人にはアニメ無効 */
@media (prefers-reduced-motion: reduce){
	#site-header{ transition: none; }
}

/* グローバルの余白をやめる */
body{ padding-top: 0 !important; }

/* ヘッダー直後の要素だけにスペースを確保（=ヒーローやmainなど） */
#site-header + *{
	padding-top: var(--header-h);	/* ←重なり防止のためpadding推奨 */
	margin-top: 0;	/* 先頭の余白があれば打ち消す */
}



/* トグルボタン（SPのみ表示） */
.nav-toggle{
	--size: 32px;
	position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
	width: var(--size); height: var(--size);
	display: none; place-items: center;
	border: 0; background: transparent; cursor: pointer;
	border-radius: 8px;
}
.nav-toggle .bar{
	display: block; width: 30px; height: 2px; background:#1b2b3c; border-radius: 2px;
	transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle .bar + .bar{ margin-top: 5px; }
/* 開いたときの×アニメ */
body[data-nav-open="1"] .nav-toggle .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body[data-nav-open="1"] .nav-toggle .bar:nth-child(2){ opacity: 0; }
body[data-nav-open="1"] .nav-toggle .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* レスポンシブ切り替え */
@media (max-width: 1200px){
	.nav {
		font-size: 14px;
		gap: 30px;
	}
}
@media (max-width: 1000px){
	.nav {
		font-size: 12px;
		gap: 20px;
	}
}
@media (max-width: 870px){
	.logo,
	.logo img {
		height: 40px;
	}
	.nav {
		gap: 10px;
	}
}
@media (max-width: 769px){
	.logo,
	.logo img {
		height: 50px;
	}
}
@media (max-width: 900px){
	.nav-toggle{ display: grid; }
	/* 既存のPCナビを隠す（あなたのクラス名に合わせて） */
	nav.main-nav, .global-nav{ display: none; }
}



/* ========== メインコンテンツ ========== */
.main-content {
	margin-top: 80px;
}

/* ========== ヒーローセクション ========== */
.hero {
	width: 100%;
	height: calc(100vh - 80px);
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: white;
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 1;
}

.hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	z-index: 0;
	will-change: transform, opacity;
	pointer-events: none;
}

.hero-img.kenburns {
	animation: kenburns 5s ease-out forwards;
}

@keyframes kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.08); }
}

.hero-content {
	z-index: 2;
	padding: 0 20px;
	position: absolute;
}

.hero h1 {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 24px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero p {
	font-size: 1.2rem;
	margin-bottom: 32px;
	opacity: 0.9;
}

.slider-indicators {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 40px;
}

.indicator {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: background 0.3s ease;
}

.indicator.active {
	background: white;
}

.flash {
	animation: flash 320ms ease-out;
}

@keyframes flash {
	0% { text-shadow: 0 0 0 rgba(255,255,255,0); }
	45% { text-shadow: 0 0 16px rgba(255,255,255,0.9); }
	100% { text-shadow: 0 0 0 rgba(255,255,255,0); }
}

.indicator.pulse {
	animation: pulse 800ms ease-out;
}

@keyframes pulse {
	0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
	70% { transform: scale(1.3); box-shadow: 0 0 0 10px rgba(255,255,255,0); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ========== 共通セクション設定 ========== */
.section {
	padding: 80px 0;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.section-title {
	text-align: center;
	margin-bottom: 60px;
}

.section-title h2 {
	font-size: 2.5rem;
	font-weight: 700;
	color: #1f2937;
	margin-bottom: 16px;
	position: relative;
	display: inline-block;
}

.section-title h2::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 4px;
	background: #2563eb;
}

.section-title p {
	font-size: 1.1rem;
	color: #6b7280;
}

/* ========== 会社紹介セクション ========== */
.company-intro {
	background: #fff;
}

.company-intro--short {
	--measure: 32ch;
	--fz-lead: clamp(20px, 2.2vw, 28px);
	--fz-body: clamp(15px, 1.7vw, 18px);
	--text: #151515;
	--muted: #4a4a4a;
	padding-block: clamp(56px, 8vw, 128px);
	text-align: center;
}

.company-intro--short .about-lines {
	max-width: 1000px;
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 24px);
}

.company-intro--short .line {
	display: block;
	margin: .35em auto;
	font-size: var(--fz-body);
	line-height: 1.95;
	letter-spacing: .04em;
	color: var(--muted);
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
	opacity: 0;
	transform: translateY(8px);
}

.company-intro--short .line.lead {
	font-size: var(--fz-lead);
	font-weight: 600;
	color: var(--text);
}

.company-intro--short .divider {
	width: 64px;
	height: 2px;
	margin: clamp(20px, 4vw, 36px) auto;
	border-radius: 999px;
	background: linear-gradient(90deg, #1d6fd8, #38b36b);
	opacity: .5;
}

@media (max-width: 480px) {
	.company-intro--short {
		--measure: 28ch;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.company-intro--short .cluster.inview .line {
		animation: about-fade .7s ease-out forwards;
	}
	.company-intro--short .cluster.inview .line:nth-child(1) { animation-delay: .05s; }
	.company-intro--short .cluster.inview .line:nth-child(2) { animation-delay: .14s; }
	.company-intro--short .cluster.inview .line:nth-child(3) { animation-delay: .23s; }
	.company-intro--short .cluster.inview .line:nth-child(4) { animation-delay: .32s; }
	.company-intro--short .cluster.inview .line:nth-child(5) { animation-delay: .41s; }
	.company-intro--short .cluster.inview .line:nth-child(6) { animation-delay: .50s; }
}

@keyframes about-fade {
	to {
		opacity: 1;
		transform: none;
	}
}

/* ========== サービスレール ========== */
.services-rail {
	--rail-h: clamp(220px, 38vw, 420px);
	--card-w: min(560px, 92vw);
	--gap-y: clamp(56px, 10vw, 120px);
	--acc: cubic-bezier(.2,.6,.15,1);
	--overlap-x: 10%;
	--side-gap: clamp(16px,3vw,32px);
	--card-shift: 130%;
	padding: clamp(32px, 5vw, 64px) 0 var(--gap-y);
	background: #f7f9fb;
}

.services-rail .rail-head {
	text-align: center;
	margin-bottom: clamp(24px, 4vw, 32px);
}

.services-rail .rail-head h2 {
	font-weight: 700;
	letter-spacing: .06em;
	font-size: clamp(22px, 2.2vw, 28px);
}

.services-rail .rail-head h2 span {
	display: block;
	font-size: .8em;
	color: #5876a8;
	margin-top: .25em;
}

.service-block {
	position: relative;
	overflow: visible;
	margin: 0 auto 30px;
	padding: 0;
}

.service-img {
	position: relative;
	max-width: 1200px;
	height: var(--rail-h);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,.06);
	transform: translateX(-8%);
	opacity: 0;
	transition: transform .9s var(--acc), opacity .9s var(--acc);
	background: linear-gradient(90deg, #ddecf7, #eaf6ef);
	z-index: 1;
}

.service-block.is-reverse .service-img {
	transform: translateX(8%);
	margin-left: auto;
}

.service-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.service-label {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	text-align: left;
	font-size: 1.7rem;
	letter-spacing: .08em;
	padding: 10px 40px 20px;
}

.service-label p {
	font-size: 1.2rem;
	color: #6b7280;
}

.service-block.is-reverse .service-label {
	text-align: right;
}

.service-card {
	position: absolute;
	bottom: 0;
	left: var(--side-gap);
	right: auto;
	z-index: 2;
	background: #f9fafb;
	width: var(--card-w);
	padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.6vw, 28px);
	opacity: 0;
	transform: translateY(10px) translateX(var(--card-shift));
	transition: transform .7s var(--acc) .25s, opacity .7s var(--acc) .25s;
}

.service-card h3 {
	margin: 0 0 .4em;
	font-size: clamp(18px, 2vw, 22px);
}

.service-card p {
	margin: 0 0 .6em;
	color: #3b3b3b;
}

.service-card ul {
	margin: .4em 0 0 1.1em;
	color: #4a4a4a;
	list-style: none;
}

.service-card li {
	margin-bottom: 8px;
	position: relative;
	padding-left: 20px;
}

.service-card li::before {
	content: '•';
	color: #2563eb;
	position: absolute;
	left: 0;
}

.service-block.is-reverse .service-card {
	left: auto;
	right: var(--side-gap);
	transform: translateY(10px) translateX(calc(-1 * var(--card-shift)));
}

.service-block.inview .service-img {
	transform: translateX(0);
	opacity: 1;
}

.service-block.inview .service-card {
	transform: translateY(-10px) translateX(var(--card-shift));
	opacity: 1;
}

.service-block.is-reverse.inview .service-card {
	transform: translateY(-10px) translateX(calc(-1 * var(--card-shift)));
}

@media (max-width: 800px) {
	.service-label,
	.service-block.is-reverse .service-label {
		text-align: center;
	}
}

@media (max-width: 1320px){
	/* 念のため、X方向の可変は0に */
	.services-rail{ --card-shift: 105%;; }
}
@media (max-width: 1192px){
	/* 念のため、X方向の可変は0に */
	.services-rail{ --card-shift: 100%; --nudge-x: 10%; --base-shift: 0; }
}
@media (max-width: 1165px){
	/* 念のため、X方向の可変は0に */
	.services-rail{ --card-shift: 75%; --nudge-x: 10%; --base-shift: 0; }
}
@media (max-width: 987px){
	/* 念のため、X方向の可変は0に */
	.services-rail{ --card-shift: 60%; --nudge-x: 10%; --base-shift: 0; }
}
@media (max-width: 927px){
	/* 念のため、X方向の可変は0に */
	.services-rail{ --card-shift: 50%; --nudge-x: 10%; --base-shift: 0; }
}
@media (max-width: 859px){
	/* 念のため、X方向の可変は0に */
	.services-rail{ --card-shift: 0%; --nudge-x: 10%; --base-shift: 0; }
}
/* ===== SP：カードは「下からだけ」入ってくる ===== */
@media (max-width: 700px){
	/* 念のため、X方向の可変は0に */
	.services-rail{ --card-shift: 0; --nudge-x: 0; --base-shift: 0; }

	/* 初期状態：Yだけ沈める（左右どちらの行も共通） */
	.services-rail .service-block .service-card,
	.services-rail .service-block.is-reverse .service-card{
		transform: translateY(14px);	 /* ← Xは入れない */
	}

	/* 発火後：Y=0で上に浮かせるだけ（Xは0のまま） */
	.services-rail .service-block.inview .service-card,
	.services-rail .service-block.is-reverse.inview .service-card{
		transform: translateY(-10px);
	}
}


@media (max-width: 560px) {
	.services-rail {
		--card-shift: 0%;
		--overlap-x: 0%;
	}
	.service-card {
		left: auto;
		transform: translate(-50%, 0);
		width: 92vw;
	}
	.service-block.inview .service-card {
		opacity: 0.9;
		transform: translateY(-10px) translateX(0);
		right: 0;
	}
	.service-block.is-reverse .service-card {
		right: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.service-img, 
	.service-card {
		transition: none;
		transform: none;
		opacity: 1;
	}
}

/* ===== SP 横スクロール対策：service-img のX移動を殺す ===== */
@media (max-width: 700px){
	/* 画像帯はフェードのみ。X方向のtranslateは無効化 */
	.services-rail .service-img{
		transform: none !important;		 /* ← これが本丸 */
		opacity: 1;		 /* 演出を残したいなら 0 → 1 に切替も可 */
	}
	.services-rail .service-block.inview .service-img{
		transform: none !important;		 /* 発火後もX移動しない */
		opacity: 1;
	}

	/* 念のため：子のはみ出しをクリップ（iOSの1pxズレ保険） */
	.services-rail,
	.services-rail .service-block{
		overflow-x: hidden;
	}

	/* 画像サイズの安全策（念のため） */
	.services-rail .service-img img{
		max-width: 100%;
		height: auto;
		display: block;
	}
}

/* iPad最適化：重なり弱め＆カード幅絞り */
@media (min-width:701px) and (max-width:1024px){
	.services-rail{
		--card-w: min(560px, 78vw);
	}
	.service-img{ height: clamp(240px, 34vw, 360px); }
	.services-rail, .service-block{ overflow: hidden; } /* 横スクロール保険 */
}


/* ========== フッターコンタクト ========== */
.footer-contact {
	background-color: #444;
	color: #fff;
	padding: clamp(32px, 6vw, 36px) 0;
	border-top: 1px solid rgba(0,0,0,.04);
}

.footer-contact .fc-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(20px, 4vw, 40px);
	align-items: center;
}

.footer-contact .fc-copy h2 {
	margin: 0 0 .25em;
	font-size: clamp(20px, 2.4vw, 24px);
	letter-spacing: .06em;
}

.footer-contact .fc-copy p {
	margin: 0;
	color: #fff;
}

.fc-actions {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px 12px;
}

.fc-actions .fc-note {
	margin-top: .75em;
	font-size: .92rem;
	color: #54606f;
}

.fc-actions .fc-note a {
	color: #1d6fd8;
}

.fc-btn {
	display: block;
	align-items: center;
	gap: .55em;
	padding: .85em 1.2em;
	border-radius: 2px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
	border: 1px solid #fff;
	background: transparent;
	color: #fff;
	width: 90%;
	text-align: center;
}

.fc-btn:hover {
	transform: translateY(-1px);
	background-color: #fff;
	color: #333;
}

.fc-btn:active {
	transform: translateY(0);
}

@media (max-width: 700px) {
	.footer-contact .fc-container {
		grid-template-columns: 1fr;
		text-align: left;
	}
	.footer-contact .fc-copy p {
		font-size: 14px;
	}
	.fc-actions,
	.fc-btn {
		width: 100%;
	}
}

/* ========== フッター ========== */
.site-footer {
	background: #000;
	color: #fff;
	padding-top: clamp(28px,4vw,46px);
}

.sf-top {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px 24px;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 24px;
	align-items: start;
}

.sf-brand {
	display: grid;
	gap: 10px;
}

.sf-logo {
	max-width: 400px;
	width: 100%;
}

.sf-name {
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0;
}

.sf-addr {
	font-style: normal;
	color: #fff;
}

.sf-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
}

.sf-nav ul li {
	width: 48%;
}

.sf-nav a {
	color: #fff;
	text-decoration: none;
}

.sf-nav a:hover {
	text-decoration: underline;
}

.sf-bottom {
	border-top: 1px solid rgba(255,255,255,.08);
	margin: 12px auto 0;
	max-width: 1100px;
	font-size: 14px;
	padding: 10px;
	text-align: center;
	color: #fff;
}

@media (max-width: 780px) {
	.sf-top {
		grid-template-columns: 1fr;
	}
}

/* ========== フェード効果 ========== */
.io-fade {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .6s ease, transform .6s ease;
}

.io-fade.inview {
	opacity: 1;
	transform: none;
}

/* ========== モバイル対応 ========== */
@media (max-width: 768px) {
	.nav {
		display: none;
	}

	.hero h1 {
		font-size: 2rem;
	}

	.hero p {
		font-size: 1rem;
	}

	.section-title h2 {
		font-size: 2rem;
	}
}


/* ===== Breadcrumb ===== */
.breadcrumb{
	margin: clamp(10px,2.2vw,16px) 0;
	color:#5f6b7a;
	font-size: 0.8rem;
}
.bc-list{
	list-style:none;
	padding:0 20px;
	margin:0 auto;
	display:flex; flex-wrap:wrap; gap:.4em .6em;
	max-width: 1100px;
}
.bc-list li{ display:flex; align-items:center; }
.bc-list li + li::before{
	content:"›"; margin: 0 .4em; color:#94a3b8;
}
.bc-list a{
	color:#4b89d9; text-decoration:none;
}
.bc-list a:hover{ text-decoration:underline; }
.bc-list [aria-current="page"]{ color:#334155; }



/* ====================
 ページ : 理念・ビジョン
==================== */

/* ===== Vision page (vision.html) ===== */

/* レイアウト */
.page{
	max-width: 980px;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 28px) 20px 64px;
}


/* ===== フル幅ビジュアル（既存のものに上書き・追記） ===== */
.page-hero-visual{
	position: relative;
	left: 50%; right: 50%;
	margin-left: -50vw; margin-right: -50vw;
	width: 100vw; overflow: hidden;
	background: #e9eef6;
}
.page-hero-visual .hero-media{
	display: block; width: 100%;
	height: clamp(240px, 42vw, 520px);
	object-fit: cover; object-position: 50% 45%;
}

/* ===== テキストのオーバーレイ ===== */
.hero-overlay{
	position: absolute; inset: 0;
	display: flex; align-items: flex-end; /* 下寄せ。中央にしたければ center に */
}
/* 読みやすさ用の“下だけ”スクリーン（黒フェード） */
.hero-overlay::before{
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 100%);
	pointer-events: none;
}
/* 中央寄せ＋ページ幅と揃える */
.hero-overlay__inner{
	position: relative; z-index: 1; /* フェードの上 */
	max-width: 980px; margin: 0 auto;
	padding: 0 20px clamp(16px, 4vw, 28px);
	color: #fff;
}
.hero-overlay__inner h1{
	margin: 0 0 .3em;
	font-size: clamp(22px, 4.4vw, 40px);
	line-height: 1.2; letter-spacing: .02em;
}
.hero-overlay__inner .lead{
	max-width: 46ch;
	margin: 0 auto;
	color: rgba(255,255,255,.92);
	line-height: 1.9;
	font-size: clamp(15px, 2.1vw, 18px);
}

/* パンくずはビジュアル直下で少しだけ余白 */
.breadcrumb{ margin-top: 8px; }

/* iPad帯の見え方調整（任意） */
@media (min-width:701px) and (max-width:1024px){
	.page-hero-visual .hero-media{ height: clamp(260px, 38vw, 440px); object-position: 50% 50%; }
}

/* SPは高さ控えめ ＆ テキスト中央寄せもアリ（好みで） */
@media (max-width:700px){
	.page-hero-visual .hero-media{ height: clamp(200px, 48vw, 360px); }
	.hero-overlay{ align-items: flex-end; }
	.hero-overlay__inner{ text-align: left; padding-bottom: 20px; }
}

/* このページだけ旧 .page-hero を非表示にしたい場合（IDやクラスでスコープして） */
body.page-vision .page-hero{ display: none; }


/* 縦方向の中央配置（全サイズに適用） */
.page-hero-visual .hero-overlay{
	align-items: center !important;	 /* 下寄せ→中央へ */
	text-align: center;
}

/* 好みで少し上下にずらしたいとき用（%で調整） */
.page-hero-visual{ --overlay-nudge: 0%; }			/* 例：-6% で少し上に、+4% で少し下に */
.page-hero-visual .hero-overlay__inner{
	transform: translateY(var(--overlay-nudge));
}

/* SPでは読みやすいように、気持ち下げたいなら */
@media (max-width:700px){
	.page-hero-visual{ --overlay-nudge: 4%; }
}


/* ===== 共通：ヒーローの仕上げを変数で統一 ===== */
.page-hero-visual{
	/* デフォルト値（ページで上書き） */
	--hero-h: clamp(240px, 42vw, 520px);
	--hero-x: 50%;								 /* object-position X */
	--hero-y: 50%;								 /* object-position Y */
	--ov-top: .10;								 /* 黒フェード上部の濃さ（0〜.6） */
	--ov-bottom: .38;							/* 黒フェード下部の濃さ（0〜.6） */
	--hero-filter: none;					 /* 色味調整が必要なら saturate()/hue-rotate() など */

	position: relative;
	left: 50%; right: 50%;
	margin-left: -50vw; margin-right: -50vw;
	width: 100vw; overflow: hidden;
}

.page-hero-visual .hero-media{
	display: block; width: 100%;
	height: var(--hero-h);
	object-fit: cover;
	object-position: var(--hero-x) var(--hero-y);
	filter: var(--hero-filter);
}

.page-hero-visual .hero-overlay{ position:absolute; inset:0; display:flex; align-items:center; }
.page-hero-visual .hero-overlay::before{
	content:""; position:absolute; inset:0;
	background: linear-gradient(180deg, rgba(0,0,0,var(--ov-top)) 0%, rgba(0,0,0,var(--ov-bottom)) 100%);
	pointer-events:none;
}
.hero-overlay__inner{ position:relative; z-index:1; max-width:980px; margin:0 auto; padding:0 20px; color:#fff; }

/* SPは少し低く＆上下のなじませ微調整 */
@media (max-width:700px){
	.page-hero-visual{ --hero-h: clamp(200px, 48vw, 360px); }
}

/* ===== ページ別の推奨バランス ===== */
/* 理念・ビジョン：中央寄り、やや濃いめで読みやすく */
body.page-vision .page-hero-visual{
	--hero-x: 50%; --hero-y: 45%;
	--ov-top: .12; --ov-bottom: .42;
}

/* 事業紹介：被写体を右寄せ（左にコピー） */
body.page-services .page-hero-visual{
	--hero-x: 70%; --hero-y: 50%;
	--ov-top: .14; --ov-bottom: .40;
}

/* 会社概要：フラットで明るめ（濃さ控えめ） */
body.page-company .page-hero-visual{
	--hero-x: 50%; --hero-y: 50%;
	--ov-top: .08; --ov-bottom: .28;
}

/* サステナビリティ用チューニング */
body.page-sustainability .page-hero-visual{
	--hero-x: 22%;
	--hero-y: 50%;
	--ov-top: .12;
	--ov-bottom: .46;
	--hero-h: clamp(240px, 42vw, 520px);
	--hero-filter: brightness(1.06) contrast(104%) hue-rotate(-6deg);
}

/* お問い合わせ：被写体を左寄せ（右にコピー） */
body.page-contact .page-hero-visual{
	--hero-x: 30%; --hero-y: 50%;
	--ov-top: .10; --ov-bottom: .36;
}

/* プライバシーポリシー：控えめでOK */
body.page-privacy .page-hero-visual{
	--hero-x: 50%; --hero-y: 50%;
	--ov-top: .06; --ov-bottom: .30;
}




/* セクション */
.page section{ margin-top: clamp(24px, 5vw, 56px); }
.page h2{
	margin: 0 0 .5em;
	font-size: clamp(18px, 2.4vw, 30px);
	position: relative;
	text-align: center;
}
.page h2 {
	display: block;
}
.page h2 span.title-ja::after{
	content:"";
	display:block;
	width: 64px;
	height: 2px;
	margin: 0 auto;
	border-radius: 999px;
	background: linear-gradient(90deg, #1d6fd8, #38b36b);
	opacity: .5;
}
.page h2 .en{
	display:block;
	margin-top:.25em;
	font-size:.55em;
	letter-spacing:.06em;
	color:#5f6b7a;
}
.page p{ line-height:1.95; color:#2d3340; }

.page h3.content-title {
	max-width: 800px;
	margin: 20px auto 0;
}

.service-image {
	overflow: hidden;
	max-width: 800px;
	margin: 20px auto 30px;
}
.service-image img {
	width: 100%;
}

.content-description,
.page p.content-description {
	max-width: 800px;
	margin: 20px auto 60px;
	line-height: 1.95;
}
.content-description-top {
	max-width: 800px;
	margin: 20px auto 30px;
	line-height: 1.95;
}

.page p.content-description-intro {
	max-width: 800px;
	margin: 20px auto 30px;
	line-height: 1.95;
}



/* 値・原則リスト */
.page ul{ padding-left:1.2em; }
.page .values{
	list-style:none; padding-left:0;
	display:grid; gap:.45em;
}
.page .values li{
	position:relative; padding-left:1.2em;
}
.page .values li::before{
	content:"";
	position:absolute; left:0; top:.65em;
	width:6px; height:6px; border-radius:50%;
	background:#1d6fd8;
}

/* 流用：フェード（未定義なら有効化） */
.io-fade{ opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease; }
.io-fade.inview{ opacity:1; transform:none; }

/* レスポンシブ微調整 */
@media (max-width:700px){
	.page{ padding: 16px 16px 56px; }
	.page-hero .lead{ max-width: 52ch; }
}

/* ====================
 ページ : 会社概要
==================== */

/* ===== Company page (company.html) ===== */

/* company */
.page-title{ margin: .2em 0 .6em; }
.company-block{ margin: clamp(24px, 6vw, 48px) 0; }
.company-block h2{ font-size: clamp(18px, 2.2vw, 22px); margin-bottom: .8em; }

/* 2カラムの定義リスト */
.profile{
	display: grid; gap: 10px 18px;
	grid-template-columns: minmax(140px, 220px) 1fr;
	background: #fff;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	padding: clamp(14px, 3vw, 24px);
}
.profile > div{ display: contents; }
.profile dt{
	font-weight: 700; color: #2d3340; padding: 10px 0;
	border-right: 1px dashed #e0e0e0;
}
.profile dd{ padding: 10px 0 10px 12px; }

@media (max-width: 720px){
	.profile{ grid-template-columns: 1fr; }
	.profile dt{ border-right: none; border-bottom: 1px dashed #e5ebf5; }
	.profile dd{ padding-left: 0; }
}

/* 許可カード */
.license-cards{ display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
@media (max-width: 980px){ .license-cards{ grid-template-columns: 1fr; } }

.license-card{
	background:#fff; border:1px solid #e0e0e0; border-radius:16px;
	padding: clamp(14px, 3.2vw, 22px); box-shadow: 0 8px 20px rgba(17,45,110,.06);
}
.license-card h3{ font-size: 1.05rem; margin: 0 0 .6em; }

.license-list{ list-style: none; margin:0; padding:0; display:grid; gap:.4em; }
.license-list li{
	display:grid;
	grid-template-columns:
	9em 1fr;
	gap:10px;
	border-bottom: 1px solid #e0e0e0;
	padding: 10px 0;
}
.license-list li:last-of-type {
	border-bottom-style: none;
}
.license-list li span{ color:#333; }

.page .board-member {
	padding-left: 0;
}
.page .board-member li {
	border-bottom-style: none;
	padding: 0;
	display: block;
}

@media (max-width: 720px){ .license-list li{ grid-template-columns: 1fr; } }

.license-proof{ margin-top: .8em; display:flex; flex-wrap: wrap; gap:10px; }
.license-proof figcaption{ width:100%; font-size:.85rem; color:#e0e0e0; margin-top:4px; }

/* 年表 */
.timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.6em; }
.timeline li{ position:relative; padding-left: 8em; padding-bottom: 0.5em; border-bottom: 1px solid #e0e0e0; }
.timeline time{ position:absolute; left:0; color:#333; }
@media (max-width: 720px){
	.timeline li{ padding-left: 0; }
	.timeline time{ position:static; display:block; margin-bottom:.2em; }
}

/* Googleマップ埋め込み（レスポンシブ） */
.map-embed{
	width: 100%;
	max-width: 980px;             /* ページの本文幅に合わせる */
	margin: 12px auto 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(17,45,110,.06);
	aspect-ratio: 16 / 9;         /* 比率固定して高さ自動 */
	min-height: 220px;            /* 縦が潰れない保険 */
}
.map-embed iframe{
	width: 100%;
	height: 100%;
	border: 0;
}


/* ====================
 ページ : プライバシーポリシー
==================== */
.page#privacy h2 {
	text-align: left;
	font-size: 20px;
	max-width: 800px;
	margin: 20px auto 0;
}
.page#privacy .content-description {
	margin: 10px auto 20px;
}



/* ====================
 ページ : お問い合わせ
==================== */

/* Contact 基本 */
.contact-form{ padding: clamp(24px, 6vw, 56px) 0; background:#f5f5f5; }
.cf-form{ max-width: 900px; margin: 0 auto; padding: 0 20px; }
.cf-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.cf-full{ grid-column: 1 / -1; }
.req{ color:#d64545; font-size:.86em; margin-left:.4em; }

.cf-grid label{ gap: 8px; font-weight: 600; color:#2d3340; }
/* 入力の汎用指定からチェックボックス/ラジオを除外 */
.cf-grid input:not([type="checkbox"]):not([type="radio"]),
.cf-grid textarea,
.cf-grid select{
	appearance: none;
	width: 100%;
	padding: .8em .9em;
	border-radius: 4px;
	border:1px solid #d7dfeb;
	background:#fff;
	font: inherit;
	transition: border-color .15s ease, box-shadow .15s ease, background .2s ease;
}

/* チェックボックスの見た目をリセット＆適正サイズに */
.cf-consent input[type="checkbox"]{
	appearance: auto;
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
	margin-top: 2px;
	accent-color: #1d6fd8;
	padding: 0;
	border: none;
	box-shadow: none;
}

/* エラー表示をチェックボックスにも効くように（枠が無いのでアウトライン） */
.cf-consent input[type="checkbox"].is-invalid{
	outline: 2px solid #d64545;
	outline-offset: 2px;
}

.cf-grid input:focus, .cf-grid textarea:focus, .cf-grid select:focus{
	outline: none; border-color:#1d6fd8; box-shadow: 0 0 0 3px rgba(29,111,216,.15);
}
.is-invalid{ border-color:#d64545 !important; box-shadow: 0 0 0 3px rgba(214,69,69,.12) !important; }
.cf-optional summary{ cursor: pointer; font-weight: 700; }
.cf-more{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 10px; }

.cf-consent{ display:flex; align-items:center; gap:.55em; font-weight:600; }
.cf-submit{ display:flex; align-items:center; gap:32px; justify-content:center; margin-top: 6px; }
.cf-privacy{ font-size:.9rem; color:#5b636f; }
.cf-done{ text-align:center; color:#0f172a; font-weight:600; }

.cf-submit.cf-full .fc-btn {
	border: 1px solid #696969;
	color: #333;
	width: 60%;
}


/* Contact 送信後 */
#contact-send h1 {
	margin: 50px 0;
}
.notice-card{max-width:780px;margin:24px auto;padding:24px;background:#fff;border:1px solid #e5ebf5;border-radius:16px;box-shadow:0 8px 20px rgba(17,45,110,.06);text-align:center}
.notice-card h1{margin:.2em 0 .4em}
.notice-card .icon{width:56px;height:56px;margin:4px auto 10px;display:block}
.actions{
	margin:30px 0;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content:center
}
.btn{display:inline-block;padding:.8em 1.2em;border-radius:12px;border:1px solid #d7dfeb;background:#fff;color:#1b2a41;text-decoration:none}
.btn-primary{background:#1d6fd8;border-color:#1d6fd8;color:#fff}
.meta{
	margin:30px 0;
	color:#5b636f;
	font-size:.92rem
}


/* Contact エラー */
.notice-card{max-width:780px;margin:24px auto;padding:24px;background:#fff;border:1px solid #f1d6d6;border-radius:16px;box-shadow:0 8px 20px rgba(110,17,17,.06);text-align:center}
.notice-card h1{margin:.2em 0 .4em}
.notice-card .icon{width:56px;height:56px;margin:4px auto 10px;display:block}
.actions{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn{display:inline-block;padding:.8em 1.2em;border-radius:12px;border:1px solid #d7dfeb;background:#fff;color:#1b2a41;text-decoration:none}
.btn-primary{background:#1d6fd8;border-color:#1d6fd8;color:#fff}
.tips{
	margin:30px 0;
	color:#5b636f;
	font-size:.95rem;
	text-align:left;
	max-width:680px;
	margin-left:auto;
	margin-right:auto
}
.tips li{margin:.2em 0}


/* SP */
@media (max-width: 700px){
	.cf-grid{ grid-template-columns: 1fr; }
	.cf-more{ grid-template-columns: 1fr; }
}