/* =====================================================================
   contact-page（お問い合わせページ）
   デザイントークンは既存の :root 変数を流用
   ※ 入力欄の枠が背景と同化して見えにくかったため、コントラストを強化
   ※ このページでは courses.css（--panel-hi 等の色変数の定義元）が
     読み込まれないため、このファイル単体で完結するよう
     .contact-page の中に必要な色変数を自前で用意しておく。
===================================================================== */

.contact-page{
	--panel-hi:#f2efe9;
	--panel-lo:#dbd7cf;
	--panel-edge:#c7c2b8;
	--screen-bg:#f7f3e7;
	--screen-edge:#c9c4b7;
	--ink:#33312c;
	--ink-soft:#8b8578;
	--accent:#df7a41;
	--accent-deep:#b85c2b;
	--shadow-out: 6px 6px 12px rgba(60,55,45,0.18), -6px -6px 12px rgba(255,255,255,0.9);
	--shadow-in: inset 3px 3px 6px rgba(60,55,45,0.22), inset -3px -3px 6px rgba(255,255,255,0.85);

	max-width:560px;
	margin:0 auto;
	padding:24px 16px 60px;
	font-family:'Zen Kaku Gothic New', sans-serif;
	color:var(--ink);
}

.contact-page__title{
	font-size:20px;
	font-weight:900;
	color:var(--ink);
	text-align:center;
	margin:0 0 24px;
}

/* --- 成功・エラーメッセージ --- */
.contact-success{
	background:#eef8f1;
	color:#2f7a52;
	border:1px solid #bfe3cd;
	border-radius:12px;
	box-shadow:var(--shadow-in);
	padding:14px 16px;
	font-size:13.5px;
	font-weight:700;
	margin-bottom:20px;
	text-align:center;
}

.contact-errors{
	background:#fbeceb;
	color:#a3372c;
	border:1px solid #f0c6c1;
	border-radius:12px;
	box-shadow:var(--shadow-in);
	padding:14px 18px;
	margin-bottom:20px;
}
.contact-errors ul{
	margin:0;
	padding-left:1.2em;
}
.contact-errors li{
	font-size:13px;
	font-weight:600;
	line-height:1.7;
}

/* --- フォーム全体：パネル調カード --- */
.contact-form{
	background:linear-gradient(160deg, var(--panel-hi), var(--panel-lo));
	border:1px solid var(--panel-edge);
	border-radius:20px;
	box-shadow:var(--shadow-out);
	padding:28px 24px 30px;
}

.contact-form p{
	margin:0 0 20px;
}

.contact-form label{
	display:block;
	font-size:12.5px;
	font-weight:800;
	color:var(--ink);
	margin-top:8px;
	letter-spacing:.02em;
}

/* --- 入力欄・テキストエリア・プルダウン：枠のコントラストを強化 ---
   var(--screen-edge) はページ背景に近い色のため、代わりに濃いめの
   専用カラーを枠線に使う。背景は白寄りにして、枠が確実に見えるように。 */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select{
	width:100%;
	padding:12px 14px;
	margin:0 0 15px 0!important;
	border:1.5px solid #a89f8e;
	border-radius:12px;
	background:#fffdf8;
	box-shadow:inset 2px 2px 5px rgba(60,55,45,0.12);
	font-size:14px;
	font-family:inherit;
	color:var(--ink);
	box-sizing:border-box;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus,
.contact-form select:focus{
	outline:none;
	border-color:var(--accent);
	box-shadow:inset 2px 2px 5px rgba(60,55,45,0.12), 0 0 0 3px rgba(223,122,65,0.18);
}
.contact-form textarea{
	min-height:140px;
	resize:vertical;
}

/* --- プルダウン矢印 --- */
.contact-form select{
	appearance:none;
	-webkit-appearance:none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
		linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(50% - 3px),
		calc(100% - 14px) calc(50% - 3px);
	background-size:6px 6px, 6px 6px;
	background-repeat:no-repeat;
	background-color:#fffdf8;
	padding-right:36px;
}

/* --- 送信ボタン：押しボタン調 ---
   テーマ側の共通ボタンスタイル（button, input[type=submit] 等をまとめて
   指定しているルール）と競合し、背景色が効かないケースがあったため、
   !important で確実に上書きする。 */
.contact-form button[type="submit"]{
	display:block !important;
	width:100% !important;
	padding:14px 28px !important;
	margin-top:6px !important;
	border:none !important;
	border-radius:24px !important;
	cursor:pointer !important;
	font-size:15px !important;
	font-weight:800 !important;
	font-family:inherit !important;
	color:#fff !important;
	background:radial-gradient(circle at 35% 25%, #f2915c, var(--accent) 55%, var(--accent-deep) 100%) !important;
	background-color:var(--accent-deep) !important; /* グラデーション未対応時の保険 */
	box-shadow:
		var(--shadow-out),
		inset 0 3px 4px rgba(255,255,255,0.4),
		inset 0 -6px 10px rgba(0,0,0,0.18) !important;
	text-shadow:none !important;
	transition:transform .12s ease, box-shadow .12s ease;
}
.contact-form button[type="submit"]:hover{
	color:#fff !important;
}
.contact-form button[type="submit"]:active{
	transform:translateY(1px);
	box-shadow:
		3px 3px 6px rgba(60,55,45,0.2), -3px -3px 6px rgba(255,255,255,0.7),
		inset 0 4px 8px rgba(0,0,0,0.25) !important;
}