@charset "UTF-8";

/*------------- 製品開発 -------------------*/

:root {
	--navy:#1a237e;
	--blue:#e3f2fd;
	--yellow:#fff176;
	--green:#BEFCC1;
	--green-r:#E3FCD7;
	--green-h:#006d2a;
	--orange:#ff7043;
	--orange-h:#f4511e;
	--text:#333;
	--sub:#666;
	--gray:#f8f9fa;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Hiragino Sans",
		"Hiragino Kaku Gothic ProN",
		"Yu Gothic",
		"Noto Sans JP",
		sans-serif;
	font-size: 1rem;
	line-height: 1.8;
	color: var(--text);
	background:#fff;
}

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

header {
	border-top:4px solid var(--navy);
	border-bottom:1px solid #e0e0e0;
}

header .container {
	padding:16px 20px;
	font-weight:700;
	color:var(--navy);
	letter-spacing:.08em;
}

section { padding:88px 0; }
.bg-green { background:var(--green-r); }
.bg-gray { background:var(--gray); }

h1 {
	font-size:clamp(1.5rem, 5vw, 2rem);
	color:var(--navy);
	margin-bottom:24px;
	line-height:1.4;
	font-weight:bold;
}

h2 {
	font-size:clamp(1.25rem, 4vw, 1.6rem);
	color:var(--navy);
	text-align:center;
	margin-bottom:12px;
	font-weight:bold;
}

h3 {
	font-size:1.1rem;
	color:var(--navy);
	margin-bottom:8px;
	font-weight:bold;
}

p {
	font-size:1rem;
	color:var(--sub);
}

.small {
	font-size:.875rem;
}

.highlight {
	background:linear-gradient(transparent 70%, var(--yellow) 70%);
}

/* ヒーローセクション(ファーストビュー) */
.hero {
	background:linear-gradient(135deg, var(--blue) 0%, #fff 45%, var(--green) 100%);
	padding:80px 0 72px;
}

.hero p {
	max-width:640px;
	margin-bottom:32px;
}

/* CTAボタン */
.btn {
	display:inline-block;
	padding:16px 40px;
	background:var(--orange);
	color:#fff;
	font-weight:700;
	font-size:1rem;
	border-radius:100px;
	box-shadow:0 12px 30px rgba(255,112,67,.4);
	text-decoration:none;
	-webkit-tap-highlight-color: transparent;
}

.btn:hover { background:var(--orange-h); }
.btn:active { transform:scale(0.97); }

/* 汎用グリッド */
.grid {
	display:grid;
	gap:24px;
}

.grid-3 {
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.card {
	background:#fff;
	padding:28px 24px;
	border-radius:20px;
	box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/* ビジュアルブロック(ボックスモデル) */
.visual {
	background:var(--green-h);
	color:#fff;
	border-radius:40px;
	padding:64px;
	border-radius:32px;
	padding:48px 40px;
}

.visual h2 { color:#fff; text-align:left; }

.visual ul {
	margin-top:16px;
	padding-left:20px;
}

.visual ul li {
	margin-bottom:8px;
	color:#fff;
}

/* FAQ */
.faq {
	max-width:760px;
	margin:0 auto;
}

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

footer {
	background:#f5f5f5;
	text-align:center;
	padding:24px 0;
	font-size:.75rem;
	color:#777;
}

/* ヒーロー内部レイアウト */
.hero-inner {
	display:flex;
	gap:48px;
	align-items:center;
}

.hero-text {
	flex:1 1 340px;
	min-width:0;
}

.hero-image {
	width:100%;
	border-radius:20px;
	box-shadow:0 20px 50px rgba(0,0,0,.15);
	display:block;
}

.hero-image img {
	width:100%;
	border-radius:24px;
	box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.product-logo {
	max-width: 200px;
	height: auto;
	margin-bottom: 20px;
	padding: 10px 20px;
	border-radius: 12px;
	display: inline-block;
}

/* PC専用改行タグ */
br.pc-only {
	display: inline;
}

/* =============================
   スマホ対応（768px以下）
   ============================= */
@media(max-width:768px){
	section { padding:64px 0; }

	.hero {
		padding:56px 0 52px;
	}

	/* ヒーロー：縦並び */
	.hero-inner {
		flex-direction:column;
		gap:32px;
		text-align:center;
	}

	.hero-text {
		flex:none;
		width:100%;
	}

	.hero-image {
		flex:none;
		width:100%;
	}

	.hero p {
		margin-left:auto;
		margin-right:auto;
	}

	/* ロゴ */
	.product-logo {
		max-width:160px;
	}

	/* h1・h2 */
	h1 { font-size:1.5rem; }
	h2 { font-size:1.25rem; }

	/* ボタン：タップし易くフル幅に広げる */
	.btn {
		display:block;
		width:100%;
		text-align:center;
		padding:18px 24px;
		font-size:1.05rem;
	}

	/* 汎用グリッド：1カラム */
	.grid-3 {
		grid-template-columns:1fr;
	}

	/* ビジュアルブロック */
	.visual {
		border-radius:20px;
		padding:32px 24px;
	}

	/* CTA セクション */
	#cta .container {
		padding:0 20px;
	}

	/* PC専用改行タグ */
	br.pc-only {
		display: none;
	}
}

/* =============================
   小型スマホ（375px以下）
   ============================= */
@media(max-width:375px){
	h1 { font-size:1.35rem; }
	h2 { font-size:1.15rem; }
	.card { padding:20px 18px; }

	/* PC専用改行タグ */
	br.pc-only {
		display: none;
	}
}

}