@charset "UTF-8";

		/* =========================================
		   お問い合わせフォーム専用スタイル
		========================================= */
		.contact-section {
			padding: 10rem 2rem 6rem; /* 固定ヘッダーの分だけ上部余白を確保 */
			position: relative;
			z-index: 10;
		}

		.contact-container {
			max-width: 750px;
			margin: 0 auto;
			background: var(--bg-glass, rgba(20, 20, 22, 0.4));
			backdrop-filter: blur(15px);
			-webkit-backdrop-filter: blur(15px);
			border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
			padding: 4rem 3rem;
			border-radius: 16px;
			box-shadow: 0 10px 30px rgba(0,0,0,0.3);
			position: relative;
			overflow: hidden;
		}

		/* カード上部のハイライト */
		.contact-container::before {
			content: '';
			position: absolute;
			top: 0; left: 0; width: 100%; height: 1px;
			background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
		}

		.form-group {
			margin-bottom: 2rem;
		}

		.form-label {
			display: flex;
			align-items: center;
			font-size: 0.95rem;
			color: #fff;
			margin-bottom: 0.8rem;
			font-weight: 500;
			letter-spacing: 0.05em;
		}

		.badge-req {
			background: var(--gold, #c5a059);
			color: #0a0a0c;
			font-size: 0.7rem;
			padding: 0.2rem 0.6rem;
			border-radius: 4px;
			margin-left: 0.8rem;
			font-weight: 700;
		}

		.badge-opt {
			background: rgba(255, 255, 255, 0.1);
			color: #aaa;
			font-size: 0.7rem;
			padding: 0.2rem 0.6rem;
			border-radius: 4px;
			margin-left: 0.8rem;
		}

		.form-control {
			width: 100%;
			background: rgba(0, 0, 0, 0.4);
			border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
			color: #fff;
			font-family: var(--font-sans, 'Noto Sans JP', sans-serif);
			font-size: 1rem;
			padding: 1rem 1.2rem;
			border-radius: 8px;
			transition: all 0.3s ease;
		}

		.form-control::placeholder {
			color: #666;
		}

		.form-control:focus {
			outline: none;
			border-color: var(--gold, #c5a059);
			box-shadow: 0 0 15px rgba(197, 160, 89, 0.2);
			background: rgba(0, 0, 0, 0.6);
		}

		textarea.form-control {
			min-height: 200px;
			resize: vertical;
			line-height: 1.6;
		}

		select.form-control {
			appearance: none;
			-webkit-appearance: none;
			background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c5a059' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 1rem center;
			background-size: 1em;
			cursor: pointer;
		}

		select.form-control option {
			background: #1a1a1c;
			color: #fff;
		}

		.form-submit {
			text-align: center;
			margin-top: 3rem;
			padding-top: 2rem;
			border-top: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
		}

		.btn-submit {
			background: linear-gradient(135deg, var(--gold-light, #dfbc77), var(--gold, #c5a059));
			color: #0a0a0c;
			border: none;
			padding: 1rem 4rem;
			font-size: 1.1rem;
			font-weight: 700;
			border-radius: 30px;
			cursor: pointer;
			letter-spacing: 0.1em;
			transition: all 0.3s ease;
			box-shadow: 0 5px 15px rgba(197, 160, 89, 0.3);
		}

		.btn-submit:hover {
			transform: translateY(-3px);
			box-shadow: 0 10px 25px rgba(197, 160, 89, 0.5);
			filter: brightness(1.1);
		}

		.privacy-note {
			text-align: center;
			font-size: 0.85rem;
			color: var(--text-muted, #a0a0a0);
			margin-bottom: 2rem;
		}

		.privacy-note a {
			color: var(--gold, #c5a059);
			text-decoration: none;
			border-bottom: 1px solid var(--gold, #c5a059);
			transition: color 0.3s ease;
		}

		.privacy-note a:hover {
			color: #fff;
			border-bottom-color: #fff;
		}

		@media screen and (max-width: 768px) {
			.contact-section { padding-top: 8rem; }
			.contact-container { padding: 3rem 1.5rem; }
			.btn-submit { width: 100%; padding: 1rem 2rem; }
		}




/* ========================================
   追加：上部スライドアラートモーダル
======================================== */

/* モーダル本体：画面上部に固定し、初期状態は上に隠す */
.top-alert-modal {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate(-50%, -120%); /* 画面の上に完全に隠しておく */
	width: 100%;
	max-width: 450px; /* ログインパネル（.main-panel）と横幅をジャストに合わせる */
	background: #000000; /* ご希望通りの不透過の黒 */
	z-index: 10000; /* ログイン画面の全要素より最前面に配置 */

	/* ⭕️ 左右下の3辺だけにゴールドの枠線を付与 */
	border-left: 1.5px solid var(--gold);
	border-right: 1.5px solid var(--gold);
	border-bottom: 1.5px solid var(--gold);

	/* ⭕️ 下辺の左右だけを角丸にする */
	border-radius: 0 0 0.75rem 0.75rem;

	padding: 1.5rem 2rem;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);

	/* スライドして出てくる滑らかなアニメーション設定 */
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ⭕️ JSでこのクラスが付与されると、画面上部からスッとスライドインしてくる */
.top-alert-modal.is-show {
	transform: translate(-50%, 0);
}

/* メッセージ表示エリア */
.top-alert-message {
	font-family: var(--font-sans);
	font-size: 0.95rem;
	font-weight: 500;
	color: #ffffff; /* 文字は純白 */
	line-height: 1.6;
	text-align: center;
	margin-bottom: 1.25rem;
	white-space: pre-wrap; /* \n などの改行コードをそのまま反映させる */
}

/* ========================================
   アラート・コンファーム用ボタンエリア
======================================== */
.top-alert-buttons {
	display: flex;
	gap: 15px;
	justify-content: center;
	align-items: center; /* 縦のラインを中央で揃える */
}

/* ボタンの基本設定（高さを完全に一致させる） */
.btn-alert-cancel,
.btn-alert-ok {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 120px;
	height: 40px; /* 両方のボタンの高さを固定 */
	margin: 0; /* 余計なマージンをリセット */
	padding: 0;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 0.25rem;
	cursor: pointer;
	letter-spacing: 0.1em;
	transition: all 0.3s;
	box-sizing: border-box;
}

/* キャンセルボタン */
.btn-alert-cancel {
	background: transparent;
	color: var(--text-sub, #a0a0a0);
	border: 1px solid var(--border-color, #38383b);
}
.btn-alert-cancel:hover {
	background: #333;
	border-color: var(--text-main, #e0e0e0);
	color: var(--text-main, #e0e0e0);
}

/* OKボタン */
.btn-alert-ok {
	background: var(--gold, #c5a059);
	color: var(--dark-bg, #1a1a1c);
	border: 1px solid var(--gold, #c5a059); /* キャンセルと枠線の太さを合わせる */
}
.btn-alert-ok:hover {
	background: var(--gold-dark, #a8884c);
	border-color: var(--gold-dark, #a8884c);
}