@charset "utf-8";

/* --- 1. 共通スタイル (既存) --- */
* {
	margin: 0;
	padding: 0;
	font-family: "Times New Roman", Times, serif;
	text-decoration: none;
}
html {
	scroll-behavior: smooth;
}
body {
	color: #000000;
}
a,
a:hover,
a:visited {
	color: inherit;
}
h1 {
	/* (これはページ全体のグローバルなh1スタイル) 
    */
	text-align: center;
	padding: 80px;
	background-color: #f6fdff;
	background-image: radial-gradient(#d5f2fe 20%, transparent 20%),
		radial-gradient(#d5f2fe 20%, transparent 20%);
	background-size: 15px 15px;
	background-position: 0 0, 7px 7px;
	font-weight: normal;
}
.pagetop {
	height: 50px;
	width: 50px;
	position: fixed;
	right: 30px;
	bottom: 30px;
	background: #fff;
	border: solid 2px #000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.pagetop__arrow {
	height: 10px;
	width: 10px;
	border-top: 3px solid #000;
	border-right: 3px solid #000;
	transform: translateY(20%) rotate(-45deg);
}

/* --- 2. お申込みページ用スタイル (PC) --- */

/* (フォントと背景色を上書き)
*/
body,
html {
	margin: 0;
	padding: 0;

	background-color: #ffffff; /* ページの背景色 */
}

/* --- ページ全体のコンテナ --- */
.page-container {
	width: 100%;
	max-width: 900px; /* PCでの最大幅 */
	margin: 2rem auto; /* PC表示で中央寄せ */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	overflow: hidden; /* 角丸を維持するため */
}

/* --- ヘッダー & メイン (グラデーション部分) --- */
.gradient-section {
	background: linear-gradient(110deg, #e6f9ff 0%, #d1f7e8 100%);
	padding: 2.5rem;
}

.page-header {
	text-align: center;
	padding-bottom: 1rem;
}

/* (グローバルなh1スタイルを、このヘッダー内でのみ上書き)
*/
.page-header h1 {
	margin: 0;
	font-weight: 600;
	font-size: 1.8rem;
	color: #2c3e50;
	/* (グローバルh1のスタイルをリセット) */
	padding: 0;
	background: none;
}

/* --- 選択肢グリッド --- */
.options-grid {
	display: grid;
	/* PC (デフォルト): 2列グリッド */
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem; /* カード間の隙間 */
}

/* --- 選択肢カード --- */
.option-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 2rem;
	text-decoration: none;
	color: #333;
	font-weight: 500;
	font-size: 1.1rem;

	display: flex;
	align-items: center;
	justify-content: space-between;

	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.option-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.option-card .card-content {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.option-card .card-icons {
	display: flex;
	gap: 0.5rem;
}

/* --- アイコンのスタイル --- */
.option-card i {
	font-size: 1.8rem;
	flex-shrink: 0;
}

.icon-doc {
	color: #007bff;
}
.icon-power {
	color: #f5b700;
}
.icon-gas {
	color: #e63946;
}

/* --- フッター (お問い合わせ) --- */
.contact-section {
	background: #ffffff;
	padding: 2.5rem;
	text-align: center;
	border-top: 1px solid #eee;
}

.contact-title {
	margin: 0 0 0.5rem 0;
	font-size: 1rem;
	color: #555;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.phone-number {
	margin: 0;
	font-size: 1.9rem;
	font-weight: 700;
	color: #111;
	letter-spacing: 1px;
}

/* --- 3. ▼ レスポンシブ対応 (スマホ) ▼ --- */
/* 画面幅が768px以下の場合に適用
  (sumaho-pc.css によって .for-sp が表示されていることを想定)
*/
@media (max-width: 768px) {
	.page-container {
		margin: 0; /* スマホでは余白なし */
		border-radius: 0;
		box-shadow: none; /* スマホでは影を消す */
	}

	.gradient-section {
		padding: 1.5rem; /* スマホでは余白を小さく */
	}

	.page-header h1 {
		font-size: 1.5rem;
	}

	.options-grid {
		/* スマホ: 縦1列に変更 */
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.option-card {
		padding: 1.5rem;
		font-size: 1rem;
	}

	.option-card i {
		font-size: 1.5rem;
	}

	.contact-section {
		padding: 2rem 1.5rem;
	}

	.phone-number {
		font-size: 1.6rem;
	}
}