/* ベース */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: #f3f6fb;
	margin: 0;
	color: #1f2933;
}

a {
	text-decoration: none;
	color: inherit;
}

/* ヘッダー */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: #ffffff;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

.header-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header-logo-wrap {
	display: flex;
	align-items: center;
	gap: 15px; /* ← ここを小さくすれば画像と文字の間が縮まる */
}

.header-logo-img {
	height: 65px;
	width: auto;
}

/*.logo {
	font-weight: 700;
	font-size: 30px;
	color: #1D4ED8;
}*/
.logo {
	font-weight: 700;
	font-size: 30px;
	display: flex;
	gap: 7px; /* ← 文字の間隔を調整 */
}

.logo-kobe {
	/*color: #1D4ED8;*/ /* 濃い青（KOBE） */
	color: #0f172a; /* 濃い青（KOBE） */
}

.logo-clean {
	/*color: #1D4ED8;*/ /* 明るい水色（CLEAN WORKS） */
	color: #0f172a; /* 明るい水色（CLEAN WORKS） */
}

.nav {
	display: flex;
	gap: 18px;
	font-size: 14px;
}

	.nav a {
		color: #475569;
		padding-bottom: 2px;
		border-bottom: 2px solid transparent;
	}

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

/* ヒーロー */
.hero {
	background: linear-gradient(135deg, #e0f2fe, #eff6ff);
	padding: 40px 0 48px;
	height: 500px;
	position: relative;
	background-image: url("logo.JPG"); /* ← 背景にしたい画像 */
	background-size: 75%; /* 全体に広げる */
	background-position: -43% 50%; /* 中央寄せ */
	background-repeat: no-repeat; /* 繰り返しなし */
	opacity: 1; /* セクション自体の透明度はそのまま */
}

	.hero::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(255, 255, 255, 0.84); /* ← 画像を薄くする白フィルター */
		backdrop-filter: blur(2px); /* ← ほんのりぼかす（任意） */
		z-index: 1;
	}

.hero-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 32px;
	align-items: center;
	position: relative;
	z-index: 2; /* ← テキストが背景より前に来る */
}

.hero-text h1 {
	font-size: 28px;
	line-height: 1.4;
	margin-bottom: 12px;
}

.hero-text p {
	font-size: 14px;
	color: #475569;
	margin-bottom: 18px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: 999px;
	background: #2563eb;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 10px 20px rgba(37, 99, 235, 0.35);
	border: none;
	cursor: pointer;
}

	.btn-primary:hover {
		background: #1d4ed8;
	}

.btn-link {
	border: none;
	background: transparent;
	color: #2563eb;
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
}

.hero-image {
	display: flex;
	justify-content: center;
}
.hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 画像を枠いっぱいに美しく表示 */
	display: block;
}

.hero-visual {
	/*width: 260px;
	height: 180px;*/
	width: 1000px;
	height: 400px;
	border-radius: 18px;
	background: linear-gradient(135deg, #38bdf8, #2563eb);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
	overflow: hidden;
}

/* セクション共通 */
.section {
	padding: 40px 0;
}

.section-alt {
	background: #f8fafc;
}

.section-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}

.section-title {
	font-size: 30px;
	margin-bottom: 18px;
	border-left: 4px solid #2563eb;
	padding-left: 8px;
}

/* 特長 */
.features-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.feature-card {
	background: #ffffff;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.feature-icon {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #dbeafe;
	color: #1d4ed8;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	margin-bottom: 8px;
}

.feature-card h3 {
	font-size: 15px;
	margin-bottom: 6px;
}

.feature-card p {
	font-size: 13px;
	color: #64748b;
}

/* サービス一覧 */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top:3%;
}

.service-card {
	background: #ffffff;
	border-radius: 12px;
	padding: 14px;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
}

.service-tag {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 15px;
	padding: 2px 6px;
	border-radius: 999px;
	background: #fee2e2;
	color: #b91c1c;
	font-weight: 600;
}

.service-card h3 {
	font-size: 25px;
	margin-top: 4px;
}

.service-card p {
	font-size: 16px;
	color: #64748b;
}

.service-price {
	font-size: 20px;
	font-weight: 600;
	color: #1d4ed8;
	margin-top: 4px;
}

.service-btn {
	margin-top: auto;
	align-self: flex-start;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid #2563eb;
	background: #ffffff;
	color: #2563eb;
	font-size: 15px;
	cursor: pointer;
	margin-top:1%;
}

	.service-btn:hover {
		background: #eff6ff;
		/*background: red;*/
	}

/*よくある質問欄(開始)*/
.faq-section {
	max-width: 1080px;
	margin: 40px auto;
	padding: 0 16px;
	scroll-margin-top: 100px;
}

.faq-title {
	font-size: 30px;
	margin-bottom: 18px;
	border-left: 4px solid #2563eb;
	padding-left: 8px;
	/*font-size: 1.8rem;
	text-align: center;
	margin-bottom: 24px;*/
}

.faq-item {
	border-bottom: 1px solid #ddd;
	padding: 8px 0;
}

.faq-question {
	width: 100%;
	height:70px;
	text-align: left;
	background: #f7f7f7;
	border: none;
	padding: 12px 16px;
	font-size: 1rem;
	cursor: pointer;
	outline: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

	.faq-question::after {
		content: "\002B";
		font-size: 1.1rem;
		color: #777;
	}

	.faq-question.active::after {
		content: "\2212";
	}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

	.faq-answer p {
		padding: 8px 16px 12px;
		font-size: 0.95rem;
		color: #555;
		line-height: 1.6;
	}

/*よくある質問欄(終了)*/



/* 流れ */
#flow {
	background-color: #f8fafc; /*好きな色に変更 */
	height: 480px;
}
.flow-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
}

	.flow-steps li {
		background: #ffffff;
		border-radius: 12px;
		padding: 14px;
		/*box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);*/
		height: 90%;
		background-color: #f8fafc;
	}

	.flow-steps h3 {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.flow-steps p {
		font-size: 15px;
		color: #64748b;
	}

/*ここからはイラストを入れてみた*/
.customer-item {
	list-style: none;
	text-align: center;
	
	/*padding: 20px 10px;
	height: 500px;*/
	/*background: transparent;*/
}

/*.customer-illustration img {
	width: 40%;*/ /* 好みに応じて調整 */
	/*height: 40%;
	object-fit: cover;
	border-radius: 50%;*/ /* 丸型アイコンに */
	/*margin-bottom: 0px;
}

.customer-name {
	font-size: 5px;
	margin-bottom: 8px;
}

.customer-comment {
	font-size: 30px;
	color: #555;
	line-height: 1.6;
}
.customer-comment2 {
	font-size: 15px;
	color: #555;
	line-height: 1.6;
	text-align: right;
}*/



.voice {
	background: #e2e8f0;
	/*padding: 16px 20px;*/
	padding: 40px 40px;
	border-radius: 12px;
	margin-bottom: 20px;
	position: relative;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

	.voice::after {
		content: "";
		position: absolute;
		bottom: -10px;
		left: 20px;
		border-width: 30px 30px 0 30px;
		border-style: solid;
		border-color: #e2e8f0 transparent transparent transparent;
	}

.voice-text {
	margin: 0 0 8px;
	font-size: 18px !important;
	color: black !important;
}

.voice-name {
	font-size: 12px;
	color: black;
}


/*対応エリア・会社所在地(開始)*/
.area-section {
	padding: 40px 0;
	/*background: #f8fafc;*/
	background: #f3f6fb;
	scroll-margin-top: 70px;
}

.area-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}

.area-title {
	font-size: 28px;
	margin-bottom: 20px;
	border-left: 4px solid #2563eb;
	padding-left: 8px;
}

.area-list {
	list-style: none;
	padding: 0;
	margin-bottom: 40px;
}

	.area-list li {
		font-size: 18px;
		padding: 6px 0;
		border-bottom: 1px solid #e5e7eb;
	}

	.area-list .todoufuken {
		font-weight: bold;
		font-size: 22px;
		padding: 6px 0;
		border-bottom: 1px solid #e5e7eb;
	}

.access-title {
	font-size: 24px;
	margin: 40px 0 16px;
	/*border-left: 4px solid #2563eb;*/
	padding-left: 8px;
	text-align:center;
	margin-bottom:30px;
}

.map-wrap {
	width: 100%;
	height: 350px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

	.map-wrap iframe {
		width: 100%;
		height: 100%;
		border: 0;
	}

/*対応エリア・会社所在地(終了)*/
/* お問い合わせ風 */
.section-contact {
	background: #e0f2fe;
}

.contact-inner {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
}

.contact-text {
	font-size: 13px;
	color: #475569;
}

.contact-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-end;
}

.contact-tel {
	font-size: 20px;
	color: #0f172a;
}

	.contact-tel span {
		font-size: 25px;
		font-weight: 700;
		color: #1d4ed8;
	}

/* フッター */
.site-footer {
	background: #0f172a;
	/*background: #16A34A;*/
	color: #cbd5f5;
	padding: 20px 0;
	margin-top: 20px;
}

.footer-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
	font-size: 12px;
	text-align:center;
}

.footer-logo {
	font-weight: 600;
	margin-bottom: 6px;
}

.footer-links {
	display: flex;
	gap: 12px;
	margin-bottom: 6px;
}

	.footer-links a {
		color: #e5e7eb;
		font-size: 11px;
	}

.footer-copy {
	font-size: 11px;
	color: #9ca3af;
}

/* レスポンシブ */
/*@media (max-width: 700px) {*/

	/* ナビゲーションを非表示 */
	/*.nav {
		display: none;
	}*/

	/* ヘッダーの高さを広くする */
	/*.site-header {
		padding: 20px 0;*/ /* ← 高さを増やす */
	/*}*/

	/* ロゴ画像を大きく */
	/*.header-logo-img {
		height: 80px;*/ /* ← 好みで調整（例：80px） */
	/*}*/

	/* ロゴ文字を大きく */
	/*.logo {
		font-size: 28px;*/ /* ← 大きめに */
		/*display: flex;
		flex-direction: column;*/ /* ← スマホで縦積みにもできる */
		/*line-height: 1.2;
	}*/

		/* KOBE / CLEAN WORKS の間隔調整 */
		/*.logo span {
			margin: 0;
		}*/

	/* ロゴ全体の配置を中央寄せにしたい場合（任意） */
	/*.header-logo-wrap {
		justify-content: center;
		width: 100%;
	}*/

	/* header-inner の左右余白を調整 */
	/*.header-inner {
		padding: 0 16px;
	}
}*/

@media (max-width: 900px) {
/*	.hero-inner {
		grid-template-columns: 2fr;
	}*/

	.site-header {
		/*position: sticky;*/
		position: static;
		top: 0;
		z-index: 20;
		background: #ffffff;
		box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
	}

	.header-inner {
		max-width: 1080px;
		margin: 0 auto;
		padding: 10px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		/*background: red;*/
		height: 60px;
	}

	.services-grid {
		display: grid;
		/*grid-template-columns: repeat(2, minmax(0, 2fr));*/
		
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.features-grid,
	.flow-steps {
		grid-template-columns: 1fr;
	}
/*画面トップのKOBECLEANWORKSの設定(開始)*/

	.header-logo-wrap {
		display: flex;
		align-items: center;
		gap: 3px; /* ← ここを小さくすれば画像と文字の間が縮まる */
	}

	.header-logo-img {
		height: 55px;
		width: auto;
	}
	.logo {
		font-weight: 700;
		font-size: 17px;
		display: flex;
		gap: 4px; /* ← 文字の間隔を調整 */
	}
/*画面トップのKOBECLEANWORKSの設定(終了)*/

/*ヒーロー(開始)*/
	/* ヒーロー */
	.hero {
		background: linear-gradient(135deg, #e0f2fe, #eff6ff);
		padding: 40px 0 48px;
		height: 380px;
		position: relative;
		background-image: url("logo.JPG"); /* ← 背景にしたい画像 */
		background-size: 165%; /* 全体に広げる */
		background-position: 60% 35%; /* 中央寄せ */
		background-repeat: no-repeat; /* 繰り返しなし */
		opacity: 1; /* セクション自体の透明度はそのまま */
	}

		.hero::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(255, 255, 255, 0.84); /* ← 画像を薄くする白フィルター */
			backdrop-filter: blur(2px); /* ← ほんのりぼかす（任意） */
			z-index: 1;
		}

	.hero-inner {
		max-width: 1080px;
		margin: 0 auto;
		padding: 0 20px;
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 32px;
		align-items: center;
		position: relative;
		z-index: 2; /* ← テキストが背景より前に来る */
	}

	.hero-text h1 {
		font-size: 28px;
		line-height: 1.4;
		margin-bottom: 12px;
	}

	.hero-text p {
		font-size: 14px;
		color: #475569;
		margin-bottom: 18px;
	}

	.hero-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.hero-visual {
		/*width: 260px;
	height: 180px;*/
		width: 100%;
		height: auto;
		border-radius: 18px;
		background: linear-gradient(135deg, #38bdf8, #2563eb);
		box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
		overflow: hidden;
	}

	.btn-primary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 10px 20px;
		border-radius: 999px;
		background: #2563eb;
		color: #ffffff;
		font-size: 14px;
		font-weight: 600;
		box-shadow: 0 10px 20px rgba(37, 99, 235, 0.35);
		border: none;
		cursor: pointer;
	}

		.btn-primary:hover {
			background: #1d4ed8;
		}

	.btn-link {
		border: none;
		background: transparent;
		color: #2563eb;
		font-size: 13px;
		cursor: pointer;
		text-decoration: underline;
	}

	.hero-image {
		/*display: flex;*/
		display: none;
		justify-content: center;
	}

	.hero-img {
		/*width: 100%;
		height: 100%;
		object-fit: cover;*/ /* 画像を枠いっぱいに美しく表示 */
		/*display: block;*/
		display: none;
	}

	/*.hero-visual {*/
		/*width: 260px;
	height: 180px;*/
		/*border-radius: 18px;
		background: linear-gradient(135deg, #38bdf8, #2563eb);
		box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
		overflow: hidden;
	}*/
/*ヒーロー(終了)*/
	.nav {
		display: none; /* シンプルに非表示（必要ならハンバーガーにできる） */
	}

	/* サービス一覧 */

	.service-card {
		background: #ffffff;
		border-radius: 12px;
		padding: 14px;
		box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
		display: flex;
		flex-direction: column;
		gap: 6px;
		position: relative;
	}

	.service-tag {
		/*position: absolute;
		top: 10px;
		right: 10px;
		font-size: 15px;
		padding: 2px 6px;
		border-radius: 999px;
		background: #fee2e2;
		color: #b91c1c;
		font-weight: 600;*/
		display: none;
	}

	.service-card h3 {
		font-size: 15px;
		margin-top: 4px;
	}

	.service-card p {
		font-size: 12px;
		color: #64748b;
	}

	.service-price {
		font-size: 13px;
		font-weight: 600;
		color: #1d4ed8;
		margin-top: 4px;
	}

	.service-btn {
		margin-top: auto;
		align-self: flex-start;
		padding: 6px 14px;
		border-radius: 999px;
		border: 1px solid #2563eb;
		background: #ffffff;
		color: #2563eb;
		font-size: 13px;
		cursor: pointer;
		margin-top: 1%;
	}

		.service-btn:hover {
			background: #eff6ff;
			/*background: red;*/
		}

	/* //////セクション共通(開始)////// */
	.section {
		padding: 40px 0;
	}

	.section-alt {
		background: #f8fafc;
	}

	.section-inner {
		max-width: 1080px;
		margin: 0 auto;
		padding: 0 20px;
	}

	.section-title {
		font-size: 23px;
		margin-bottom: 18px;
		margin-top: 0px;
		border-left: 4px solid #2563eb;
		padding-left: 8px;
	}
	/* //////セクション共通(終了)////// */

/*よくある質問欄(開始)*/
	.faq-title {
		margin-top:-20px;
		font-size: 17px;
		margin-bottom: 18px;
		border-left: 4px solid #2563eb;
		padding-left: 8px;
		/*font-size: 1.8rem;
	text-align: center;
	margin-bottom: 24px;*/
	}
/*よくある質問欄(終了)*/

/*ここからはお客様の声*/

	/* 流れ */
	#flow {
		background-color: #f8fafc; /*好きな色に変更 */
		height: 520px;
	}

	.flow-steps {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		/*grid-template-columns: repeat(2, minmax(0, 1fr));*/
		gap: 0px;
	}

		.flow-steps li {
			background: #ffffff;
			border-radius: 12px;
			padding: 14px;
			/*box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);*/
			height: 50%;
			background-color: #f8fafc;
		}

		.flow-steps h3 {
			font-size: 15px;
			margin-bottom: 10px;
		}

		.flow-steps p {
			font-size: 15px;
			color: #64748b;
		}

	/*ここからはイラストを入れてみた*/
	.customer-item {
		list-style: none;
		text-align: center;
		/*padding: 20px 10px;
	height: 500px;*/
		/*background: transparent;*/
	}

	/*.customer-illustration img {
	width: 40%;*/ /* 好みに応じて調整 */
	/*height: 40%;
	object-fit: cover;
	border-radius: 50%;*/ /* 丸型アイコンに */
	/*margin-bottom: 0px;
}

.customer-name {
	font-size: 5px;
	margin-bottom: 8px;
}

.customer-comment {
	font-size: 30px;
	color: #555;
	line-height: 1.6;
}
.customer-comment2 {
	font-size: 15px;
	color: #555;
	line-height: 1.6;
	text-align: right;
}*/



	.voice {
		background: #e2e8f0;
		/*padding: 16px 20px;*/
		padding: 20px 20px;
		border-radius: 12px;
		margin-bottom: 5px;
		position: relative;
		box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
	}

		.voice::after {
			content: "";
			position: absolute;
			bottom: -10px;
			left: 20px;
			border-width: 30px 30px 0 30px;
			border-style: solid;
			border-color: #e2e8f0 transparent transparent transparent;
		}

	.voice-text {
		margin: 0 0 8px;
		font-size: 18px !important;
		color: black !important;
	}

	.voice-name {
		font-size: 12px;
		color: black;
	}




	/*対応エリア・会社所在地(開始)*/
	.area-section {
		padding: 25px 0;
		/*background: #f8fafc;*/
		background: #f3f6fb;
		scroll-margin-top: 50px;
		margin-top: 1%;
	}

	.area-inner {
		max-width: 1080px;
		margin: 0 auto;
		padding: 0 20px;
	}

	.area-title {
		font-size: 17px;
		margin-bottom: 20px;
		border-left: 4px solid #2563eb;
		padding-left: 8px;
	}

	.area-list {
		list-style: none;
		padding: 0;
		margin-bottom: 40px;
	}

		.area-list li {
			font-size: 15px;
			padding: 6px 0;
			border-bottom: 1px solid #e5e7eb;
		}

	.access-title {
		font-size: 15px;
		margin: 40px 0 16px;
		/*border-left: 4px solid #2563eb;*/
		padding-left: 8px;
		text-align: center;
		margin-bottom: 30px;
	}

	.map-wrap {
		width: 70%;
		height: 60%;
		/*border-radius: 12px;*/
		overflow: hidden;
		box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
		margin: 0 auto; /* ← これで中央揃え */
	}

		.map-wrap iframe {
			width: 100%;
			height: 100%;
			border: 0;
		}

	/*対応エリア・会社所在地(終了)*/

	.customer-illustration img {
		width: 30%; /* 好みに応じて調整 */
		height: auto;
		object-fit: cover;
		border-radius: 50%; /* 丸型アイコンに */
		margin-bottom: 0px;
	}

		
	/* お問い合わせ風 (開始)*/
	.section-contact {
		background: #e0f2fe;
	}
		
	.contact-inner {
		display: flex;
		justify-content: space-between;
		gap: 24px;
		align-items: center;
		flex-wrap: wrap;
	}

	.section-title {
		font-size: 17px;
	}
		.contact-text {
			font-size: 12px;
			color: #475569;
		}

	.contact-actions {
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: flex-end;
	}

	.contact-tel {
		font-size: 13px;
		color: #0f172a;
	}

		.contact-tel span {
			font-size: 23px;
			font-weight: 700;
			color: #1d4ed8;
		}
	/* お問い合わせ風 (終了)*/

}