@charset "UTF-8";
/**
 * 受験申込みプロセス モダンUI/UX改善スタイル
 * モバイルファーストで設計 (max-width: 480px)
 * 既存のorder.cssを上書きするスタイル
 */

/* =============================================
 * CSS Variables (カスタムプロパティ)
 * ============================================= */
:root {
	--primary-color: #1574a0;
	--primary-dark: #0d5a7d;
	--accent-color: #DB5353;
	--accent-dark: #b44346;
	--success-color: #28a745;
	--text-color: #333;
	--text-light: #666;
	--bg-light: #f8f9fa;
	--bg-card: #ffffff;
	--border-color: #e0e0e0;
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
	--radius-sm: 8px;
	/* カード等の角丸 */
	--radius-md: 12px;
	--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;
}

/* =============================================
 * プログレスインジケーター (修正版: 青背景・角丸四角)
 * ============================================= */
.input_process_area.modern {
	margin: 0 auto 32px auto;
	padding: 24px 16px;
	width: 100%;
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.input_process_area.modern .input_process {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 24px;
	/* ステップ間の余白 */
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 1000px;
}

.input_process_area.modern .input_process>li {
	flex: 1;
	margin: 0;
	padding: 0;
	position: relative;
	text-align: center;
}

.input_process_area.modern .input_process>li.separator {
	display: none;
}

.input_process_area.modern .process_cont {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0;
}

.input_process_area.modern .process_cont .step_num {
	position: relative;
	z-index: 2;
	/* 横線より前面に配置 */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 75% !important;
	max-width: 75% !important;
	flex: none !important;
	/* 矢印のスペース確保のため縮小 */
	height: 36px;
	margin: 0 auto 8px;
	font-size: 1rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 0;
	/* 角丸削除 */
	transition: var(--transition);
}

/* 矢印（三角形）の追加 - step_numの右外側に配置 */
.input_process_area.modern .input_process>li:not(:last-child) .step_num::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -45px;
	/* step_numの外に出す(位置調整) */
	transform: translateY(-50%);
	border-style: solid;
	border-width: 5px 0 5px 8px;
	/* 少し大きくして視認性アップ */
	border-color: transparent transparent transparent #fff;
	/* 真っ白に変更 */
	display: block;
	z-index: 100;
}

/* 古い設定の無効化（li::afterは削除） */
.input_process_area.modern .input_process>li::after {
	display: none !important;
}

/* 強制削除していた設定を解除するため、該当箇所を削除・上書き */
.input_process_area.modern .input_process>li:last-child .step_num::after {
	display: none !important;
}

.input_process_area.modern .process_cont .ja_txt {
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 0.8rem;
	font-weight: 500;
	color: #fff;
	/* 文字色を白に変更 */
	text-align: center;
	line-height: 1.3;
}

.input_process_area.modern .process_cont.current .step_num {
	color: var(--primary-dark);
	background: #fff;
	border-color: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	transform: scale(1.1);
}

.input_process_area.modern .process_cont.current .ja_txt {
	color: #fff;
	font-weight: 700;
}

.input_process_area.modern .process_cont.completed .step_num {
	color: #fff;
	background: var(--success-color);
	border-color: var(--success-color);
}

.input_process_area.modern .process_cont.completed .step_num::after {
	content: '✓';
	font-size: 1rem;
}

.input_process_area.modern .process_cont.completed .ja_txt {
	color: rgba(255, 255, 255, 0.9);
}

/* プログレスバー連結線 - 削除 */
.input_process_area.modern .input_process>li::after {
	display: none;
	/* 横線を完全に削除 */
}

/* 線をgapを考慮して調整 */
/* gapがあるので、線の長さを調整するか、疑似要素の位置を変える必要がある。
   flex gapを使っている場合、li要素間にスペースが空くので、li::afterで線を引くのは難しい（liの範囲外にはみ出す必要がある）。
   シンプルに、liの幅を100%として、gapを使わずにpaddingで調整する方が線を引きやすいが、
   ここではgapをなくしてpaddingで調整する実装に変更する。 
*/
.input_process_area.modern .input_process {
	gap: 0;
	/* gapをリセット */
}

.input_process_area.modern .input_process>li {
	padding: 0 12px;
	/* 余白を作成 */
}

.input_process_area.modern .input_process>li::after {
	width: calc(100% - 24px);
	/* パディング分引く */
	left: calc(50% + 24px + 12px);
	/* 位置調整: 中央 + アイコン半分 + 余白 */
	/* 計算が複雑になるので、線は装飾的要素として簡易化するか、
     あるいは線なしでステップ間隔だけで表現するのもありだが、
     要望に「ステップ間の余白を設定」とあるので、線をつなげつつ余白を持たせる。
     
     修正案: li::after は liの幅基準。liの中央から次のliの中央まで線を引きたい。
     left: 50% width: 100% で、transformなしなら自要素の右端まで。
     次の要素の左端まで届かせるには width: 100% (自要素分) + padding分が必要。
     
     一番簡単なのは、liに border-top をつける方法だが、数字の後ろを通る必要がある。
     ここは display: flex; align-items: center; で疑似要素を flex item として扱う手もあるが、
     HTML構造を変えられないので、positionで頑張る。
  */
	width: 100%;
	left: 50%;
	transform: none;
}


@media screen and (max-width: 480px) {
	.input_process_area.modern {
		margin: 0 auto 24px auto;
		padding: 16px 8px;
	}

	.input_process_area.modern .process_cont .step_num {
		width: 36px;
		height: 30px;
		font-size: 0.8rem;
		border-radius: 4px;
	}

	.input_process_area.modern .input_process>li {
		padding: 0 4px;
	}

	.input_process_area.modern .input_process>li::after {
		top: 15px;
	}

	.input_process_area.modern .process_cont .ja_txt {
		font-size: 0.7rem;
		margin-top: 4px;
	}
}

/* =============================================
 * セクションタイトル (モダン版)
 * ============================================= */
.section_title.modern {
	position: relative;
	margin: 32px auto 48px auto;
	/* 下マージンを倍増 */
	padding: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text-color);
	text-align: center;
}

.section_title.modern::before {
	content: '';
	position: absolute;
	bottom: -16px;
	/* 下線を少し下に移動 */
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 3px;
	background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
	border-radius: 2px;
}

@media screen and (max-width: 480px) {
	.section_title.modern {
		margin: 24px auto 32px auto;
		/* 下マージン調整 */
		font-size: 1.25rem;
	}
}

/* =============================================
 * アコーディオン (カテゴリー開閉)
 * ============================================= */
.accordion-container {
	margin: 0 auto;
	padding: 0 16px;
	width: 100%;
	max-width: 1000px;
}

.accordion-item {
	margin-bottom: 12px;
	background: var(--bg-card);
	border-radius: 0;
	/* 角丸削除 */
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: var(--transition);
}

.accordion-item:hover {
	box-shadow: var(--shadow-md);
}

.accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	width: 100%;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-color);
	background: linear-gradient(135deg, #f8f9fa, #fff);
	border: none;
	border-left: 4px solid var(--primary-color);
	border-radius: 0;
	/* 角丸削除 */
	cursor: pointer;
	transition: var(--transition);
}

.accordion-header:hover {
	background: linear-gradient(135deg, #eef5f8, #fff);
}

.accordion-header .icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	font-size: 1.2rem;
	color: var(--primary-color);
	transition: transform 0.3s ease;
}

.accordion-header.active .icon {
	transform: rotate(180deg);
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.accordion-content.open {
	max-height: 2000px;
}

.accordion-content-inner {
	padding: 20px;
	background: #fff;
}

@media screen and (max-width: 480px) {
	.accordion-container {
		padding: 0 12px;
	}

	.accordion-header {
		padding: 14px 16px;
		font-size: 0.95rem;
	}

	.accordion-content-inner {
		padding: 12px;
	}
}

/* =============================================
 * カード型チェックボックス
 * ============================================= */
/* PCで2列レイアウト */
.card-checkbox-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.card-checkbox-item {
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
}

.card-checkbox-item input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.card-checkbox-item .card-label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	min-height: 80px;
	background: #fff;
	border: 2px solid var(--border-color);
	border-radius: 0;
	/* 角丸削除 */
	cursor: pointer;
	transition: var(--transition);
	height: 100%;
	box-sizing: border-box;
}

.card-checkbox-item .card-label:hover {
	border-color: var(--primary-color);
	background: #f8fcfe;
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.card-checkbox-item input[type="checkbox"]:checked+.card-label {
	border-color: var(--primary-color);
	background: linear-gradient(135deg, #e8f4f8, #f0f9fc);
	box-shadow: 0 4px 12px rgba(21, 116, 160, 0.15);
}

.card-checkbox-item .checkbox-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 4px;
	/* チェックボックスアイコンは少し角丸残すか、完全四角にするか。指示は「フォームエリア」なのでここは対象外かもしれないが、統一感で四角くする */
	border-radius: 2px;
	transition: var(--transition);
}

.card-checkbox-item input[type="checkbox"]:checked+.card-label .checkbox-icon {
	background: var(--primary-color);
	border-color: var(--primary-color);
}

.card-checkbox-item input[type="checkbox"]:checked+.card-label .checkbox-icon::after {
	content: '✓';
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
}

.card-checkbox-item .card-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.card-checkbox-item .card-title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-color);
	line-height: 1.4;
}

.card-checkbox-item .card-price {
	display: inline-block;
	align-self: flex-start;
	padding: 2px 8px;
	font-size: 0.8rem;
	font-weight: 500;
	color: #999;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 4px;
}

@media screen and (max-width: 480px) {

	/* モバイルは1列に戻す */
	.card-checkbox-list {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.card-checkbox-item .card-label {
		padding: 14px;
		min-height: 60px;
	}

	.card-checkbox-item .checkbox-icon {
		width: 26px;
		height: 26px;
	}

	.card-checkbox-item .card-title {
		font-size: 0.9rem;
	}
}

/* =============================================
 * フローティング送信ボタン
 * ============================================= */
.floating-submit-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.floating-submit-bar.visible {
	transform: translateY(0);
}

.floating-submit-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 600px;
	margin: 0 auto;
}

.floating-submit-bar .selected-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.floating-submit-bar .selected-count {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-light);
}

.floating-submit-bar .selected-count strong {
	color: var(--primary-color);
	font-size: 1.4rem;
	margin: 0 4px;
}

.floating-submit-bar .price-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
}

.floating-submit-bar .price-label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-light);
	border: 1px solid #ccc;
	padding: 2px 6px;
	border-radius: 4px;
	background-color: #fff;
	line-height: 1;
}

.floating-submit-bar .total-price {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--accent-color);
	line-height: 1;
}

.floating-submit-bar .submit-btn {
	flex-shrink: 0;
	padding: 14px 28px;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
	border: none;
	border-radius: 0;
	/* 角丸削除 */
	cursor: pointer;
	transition: var(--transition);
}

.floating-submit-bar .submit-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(219, 83, 83, 0.3);
}

.floating-submit-bar .submit-btn:disabled {
	background: #ccc;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

@media screen and (max-width: 480px) {
	.floating-submit-bar {
		padding: 10px 12px;
	}

	.floating-submit-bar .submit-btn {
		padding: 12px 20px;
		font-size: 0.9rem;
	}

	.floating-submit-bar .selected-count {
		font-size: 0.8rem;
	}

	.floating-submit-bar .total-price {
		font-size: 1rem;
	}
}

/* 下部余白（フローティングバー分） */
.container-fluid.has-floating-bar {
	padding-bottom: 30px;
}

@media screen and (max-width: 480px) {
	.container-fluid.has-floating-bar {
		padding-bottom: 0;
	}
}

/* =============================================
 * フォーム要素 (モダン版 - 角丸なし)
 * ============================================= */
.modern-form-container {
	margin: 24px auto;
	padding: 0 16px;
	width: 100%;
	max-width: 1000px;
}

.form-card {
	margin-bottom: 24px;
	background: var(--bg-card);
	border-radius: 0;
	/* 角丸削除 */
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.form-card-header {
	padding: 16px 20px;
	font-size: 1.1rem;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.form-card-body {
	padding: 20px;
}

.form-group {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e8e8e8;
}

.form-group:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.form-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
	padding-top: 12px;
	/* inputのpaddingに合わせて垂直中央揃え */
	min-width: 180px;
	width: 180px;
	flex-shrink: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-color);
}

.form-label .required-badge {
	padding: 2px 8px;
	font-size: 0.7rem;
	font-weight: 700;
	color: #fff;
	background: var(--accent-color);
	border-radius: 0;
	/* 角丸削除 */
}

/* 入力欄のラッパー */
.form-group>div:not(.form-label) {
	flex: 1;
	min-width: 0;
}

.form-input,
.form-select,
.form-textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: 1rem;
	color: var(--text-color);
	background: #fff;
	border: 2px solid var(--border-color);
	border-radius: 0;
	/* 角丸削除 */
	transition: var(--transition);
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	/* 念のため明示 */
}

/* 高さ固定 (textarea除く) */
.form-input,
.form-select {
	height: 48px;
	line-height: 1.5;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(21, 116, 160, 0.15);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
	border-color: var(--accent-color);
}

.form-error-message {
	margin-top: 6px;
	padding: 8px 12px;
	font-size: 0.85rem;
	color: var(--accent-color);
	background: #fff5f5;
	border-radius: 0;
	/* 角丸削除 */
}

.form-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

.form-textarea {
	min-height: 120px;
	resize: vertical;
}

.form-row {
	display: flex;
	gap: 12px;
	/* align-items: flex-end; 削除 */
}

.form-row .form-group {
	flex: 1;
}

.auto-fill-btn {
	display: flex;
	/* Flexboxで中央揃え */
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0 16px;
	/* 上下paddingはheightで制御するため0でも良いが、念のため横だけ */
	font-size: 0.9rem;
	font-weight: 600;
	line-height: normal;
	color: #fff;
	background: linear-gradient(135deg, #ff9800, #f57c00);
	border: 2px solid transparent;
	border-radius: 0;
	/* 角丸削除 */
	cursor: pointer;
	transition: var(--transition);
	height: 48px;
	/* inputと同じ高さに固定 */
	box-sizing: border-box;
}

@media screen and (max-width: 480px) {

	/* モバイルではスペーサーラベルを隠す */
	.form-label[style*="visibility: hidden"] {
		display: none !important;
	}

	/* クーポンボタングループの余白と下線を削除 */
	.coupon-button-group {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
		border-bottom: none !important;
	}

	/* 非表示ラベルを持つform-groupの余白と下線を削除 */
	.form-group:has(.form-label[style*="visibility: hidden"]) {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
		border-bottom: none !important;
	}

	/* form-row内のform-groupも同様に */
	.form-row .form-group:has(.form-label[style*="visibility: hidden"]) {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
		border-bottom: none !important;
	}
}

.auto-fill-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
}

.auto-fill-btn:disabled,
.auto-fill-btn.disabled {
	background: #dcdcdc;
	color: #999;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	border: 1px solid #ccc;
}

/* =============================================
 * クーポンコードエリアのスタイル
 * ============================================= */
.coupon-card {
	margin-bottom: 24px;
}

/* クーポングループは下線なし */
.coupon-group {
	border-bottom: none;
	padding-bottom: 0;
}

.coupon-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.coupon-apply-btn {
	width: auto;
	min-width: 120px;
}

@media screen and (max-width: 480px) {

	/* モバイルでは縦並びに */
	.coupon-row {
		flex-direction: column;
		gap: 8px;
	}

	.coupon-apply-btn {
		width: 100%;
	}
}

/* =============================================
 * 入力項目毎の横幅調整 (PC表示のみ)
 * ============================================= */
/* 郵便番号 */
#zip {
	max-width: 200px;
}

/* 郵便番号の入力欄とボタンの配置調整 */
.form-row {
	align-items: flex-start;
}

/* 郵便番号入力欄の親要素 */
#zip+div {
	margin-left: 12px;
}

/* 都道府県 */
#pref {
	max-width: 250px;
}

/* 電話番号 */
#telephone {
	max-width: 300px;
}


@media screen and (max-width: 480px) {
	.modern-form-container {
		padding: 0 12px;
	}

	.form-card-header {
		padding: 14px 16px;
		font-size: 1rem;
	}

	.form-card-body {
		padding: 16px;
	}

	.form-input,
	.form-select,
	.form-textarea {
		padding: 12px 14px;
		font-size: 16px;
		/* iOS zoom防止 */
	}

	.form-row {
		flex-direction: column;
		align-items: stretch;
		/* モバイルでは横いっぱい */
	}

	/* モバイルでは入力項目を全幅に戻す */
	#zip,
	#pref,
	#telephone {
		max-width: 100%;
	}

	/* モバイルではフォームグループを縦並びに戻す */
	.form-group {
		flex-direction: column;
		gap: 8px;
	}

	.form-label {
		width: 100%;
		min-width: 0;
		padding-top: 0;
		margin-bottom: 8px;
	}

	.form-group>div:not(.form-label) {
		width: 100%;
	}
}

/* =============================================
 * 支払い方法カード
 * ============================================= */
.payment-card-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.payment-card {
	position: relative;
}

.payment-card input[type="radio"] {
	position: absolute;
	opacity: 0;
}

.payment-card .payment-label {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	background: #fff;
	border: 2px solid var(--border-color);
	border-radius: 0;
	/* 角丸削除 */
	cursor: pointer;
	transition: var(--transition);
}

.payment-card .payment-label:hover {
	border-color: var(--primary-color);
}

.payment-card input[type="radio"]:checked+.payment-label {
	border-color: var(--primary-color);
	background: linear-gradient(135deg, #e8f4f8, #f0f9fc);
}

.payment-card .radio-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 50%;
	transition: var(--transition);
}

.payment-card input[type="radio"]:checked+.payment-label .radio-icon {
	border-color: var(--primary-color);
}

.payment-card input[type="radio"]:checked+.payment-label .radio-icon::after {
	content: '';
	width: 12px;
	height: 12px;
	background: var(--primary-color);
	border-radius: 50%;
}

.payment-card .payment-info {
	flex: 1;
}

.payment-card .payment-name {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-color);
}

.payment-card .payment-desc {
	margin-top: 4px;
	font-size: 0.85rem;
	color: var(--text-light);
	line-height: 1.4;
}

.payment-card .payment-detail {
	display: none;
	padding: 30px;
	background: #fdfbf4;
	border-top: 1px solid var(--border-color);
}

.payment-card input[type="radio"]:checked~.payment-detail {
	display: block;
}

@media screen and (max-width: 480px) {
	.payment-card .payment-detail {
		padding: 16px 20px 20px 20px;
	}

	.payment-card .payment-label {
		padding: 16px;
	}

	.payment-card .payment-name {
		font-size: 0.95rem;
	}

	.payment-card .payment-desc {
		font-size: 0.8rem;
	}
}

/* =============================================
 * 確認ページ カードレイアウト
 * ============================================= */
.confirm-section {
	margin: 24px auto;
	padding: 0 16px;
	width: 100%;
	max-width: 1000px;
}

.confirm-card {
	margin-bottom: 20px;
	background: var(--bg-card);
	border-radius: 0;
	/* 角丸削除 */
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.confirm-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 20px;
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.confirm-card-header .title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #fff;
}

.confirm-card-header .edit-btn {
	padding: 6px 12px;
	font-size: 0.8rem;
	color: var(--primary-color);
	background: #fff;
	border: none;
	border-radius: 0;
	/* 角丸削除 */
	cursor: pointer;
	transition: var(--transition);
}

.confirm-card-header .edit-btn:hover {
	background: #f0f0f0;
}

.confirm-card-body {
	padding: 0;
}

.confirm-row {
	display: flex;
	border-bottom: 1px solid #f0f0f0;
}

.confirm-row:last-child {
	border-bottom: none;
}

.confirm-row .label {
	flex-shrink: 0;
	width: 160px;
	/* 幅拡大 */
	padding: 18px 24px;
	/* 余白拡大 */
	font-size: 1rem;
	/* 文字拡大 */
	font-weight: 500;
	color: var(--text-light);
	background: #fafafa;
}

.confirm-row .value {
	flex: 1;
	padding: 18px 24px;
	/* 余白拡大 */
	font-size: 1rem;
	/* 文字拡大 */
	color: var(--text-color);
	word-break: break-word;
}

/* フッター重なり防止のための余白確保（調整済み） */
.confirm-section {
	padding-bottom: 0;
}

@media screen and (max-width: 480px) {
	.confirm-section {
		padding: 0 12px 0 12px;
	}

	.confirm-row {
		flex-direction: column;
	}

	.confirm-row .label {
		width: 100%;
		padding: 12px 16px;
		font-size: 0.9rem;
		border-bottom: 1px solid #f0f0f0;
	}

	.confirm-row .value {
		padding: 16px 16px;
		font-size: 1rem;
	}
}

/* =============================================
 * 完了ページ (モダン版)
 * ============================================= */
.complete-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 20px 60px 20px;
	text-align: center;
}

.complete-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 80px;
	margin-bottom: 24px;
	font-size: 2.5rem;
	color: #fff;
	background: linear-gradient(135deg, var(--success-color), #1e8e3e);
	border-radius: 50%;
	animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
	0% {
		transform: scale(0);
		opacity: 0;
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.complete-title {
	margin: 0 0 16px 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text-color);
}

.complete-message {
	margin: 0 auto 32px auto;
	padding: 24px;
	max-width: 600px;
	font-size: 1rem;
	color: var(--text-color);
	line-height: 1.8;
	background: var(--bg-light);
	border-radius: 0;
	/* 角丸削除 */
}

.complete-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 300px;
}

.complete-actions .btn-primary {
	padding: 16px 24px;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
	border: none;
	border-radius: 0;
	/* 角丸削除 */
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition);
}

.complete-actions .btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

@media screen and (max-width: 480px) {
	.complete-container {
		padding: 32px 16px 48px 16px;
	}

	.complete-icon {
		width: 64px;
		height: 64px;
		font-size: 2rem;
	}

	.complete-title {
		font-size: 1.25rem;
	}

	.complete-message {
		padding: 20px;
		font-size: 0.95rem;
	}
}

/* =============================================
 * 入力残り件数 (シンプル・コンパクト版)
 * ============================================= */
#form_checker.modern {
	position: fixed;
	bottom: auto;
	top: 25%;
	right: 16px;
	padding: 8px 12px;
	min-width: 60px;
	background: #fdfdfd;
	border: 1px solid var(--accent-color);
	border-left: 4px solid var(--accent-color);
	border-radius: 0;
	/* 角丸削除 */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-align: center;
}

#form_checker.modern .form_check-text {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--text-light);
	line-height: 1.2;
}

#form_checker.modern #check-number {
	display: block;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--accent-color);
	line-height: 1.1;
}

#form_checker.modern::after {
	content: '項目';
	display: block;
	font-size: 0.65rem;
	color: var(--text-light);
}

@media screen and (max-width: 480px) {
	#form_checker.modern {
		right: 8px;
		padding: 6px 8px;
		min-width: 50px;
		border-radius: 0;
	}

	#form_checker.modern #check-number {
		font-size: 1.2rem;
	}

	/* プログレスインジケーターの矢印をスマホ用に調整して表示 */
	.input_process_area.modern .input_process>li:not(:last-child) .step_num::after {
		display: block !important;
		right: -18px !important;
		/* スマホ用にさらに内側に寄せる */
		border-width: 3px 0 3px 4px !important;
	}

	/* プログレスインジケーターの幅調整 */
	.input_process_area.modern .process_cont .step_num {
		width: 70% !important;
		max-width: 70% !important;
	}
}

/* =============================================
 * 選択資格サマリー (モダン版)
 * ============================================= */
.selected-exams-summary {
	margin: 0 auto 24px auto;
	background: var(--bg-card);
	border-radius: 0;
	/* 角丸削除 */
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.selected-exams-summary .summary-header {
	padding: 16px 24px;
	/* 余白拡大 */
	font-size: 1.1rem;
	/* 文字拡大 */
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.selected-exams-summary .exam-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.selected-exams-summary .exam-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 24px;
	/* 余白拡大 */
	border-bottom: 1px solid #f0f0f0;
}

.selected-exams-summary .exam-item:last-child {
	border-bottom: none;
}

.selected-exams-summary .exam-name {
	font-size: 1.1rem;
	/* さらに拡大 */
	font-weight: 700;
	/* 太字に */
	line-height: 1.5;
	/* 行間確保 */
	color: var(--text-color);
}

.selected-exams-summary .exam-price {
	flex-shrink: 0;
	padding: 6px 14px;
	/* 余白微増 */
	font-size: 0.95rem;
	/* 文字拡大 */
	font-weight: 500;
	color: #999;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.selected-exams-summary .total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	/* 余白拡大 */
	background: linear-gradient(135deg, #fff5f5, #fff0f0);
}

.selected-exams-summary .total-label {
	font-size: 1.1rem;
	/* 文字拡大 */
	font-weight: 600;
	color: var(--text-color);
}

.selected-exams-summary .total-amount {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--accent-color);
}

@media screen and (max-width: 480px) {
	.selected-exams-summary .exam-item {
		padding: 12px 16px;
	}

	.selected-exams-summary .exam-name {
		font-size: 0.9rem;
	}

	.selected-exams-summary .exam-price {
		font-size: 0.85rem;
		padding: 3px 10px;
	}
}

/* 確認画面：資格リスト（シンプル版） */
.confirm-simple-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 24px;
	border-bottom: 1px solid #f0f0f0;
}

.confirm-simple-row:last-child {
	border-bottom: none;
}

.confirm-simple-row .name {
	display: flex;
	align-items: center;
	font-weight: 600;
	font-size: 1rem;
	color: var(--text-color);
}

.confirm-simple-row .name::before {
	content: '✓';
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	background: var(--primary-color);
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: bold;
	flex-shrink: 0;
}

.confirm-simple-row .price {
	font-weight: 700;
	color: #DB5353;
	font-size: 1rem;
}

@media screen and (max-width: 480px) {
	.confirm-simple-row {
		padding: 16px 16px;
	}

	.confirm-simple-row .name {
		font-size: 0.95rem;
	}
}

/* =============================================
 * ボタン共通スタイル
 * ============================================= */
.btn-group {
	display: flex;
	gap: 12px;
	margin-top: 32px;
	padding: 0 16px;
}

.btn-back {
	flex: 0 0 auto;
	padding: 14px 20px;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-light);
	background: #f0f0f0;
	border: none;
	border-radius: 0;
	/* 角丸削除 */
	cursor: pointer;
	transition: var(--transition);
}

.btn-back:hover {
	background: #e0e0e0;
}

.btn-submit {
	flex: 1;
	padding: 16px 24px;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
	border: none;
	border-radius: 0;
	/* 角丸削除 */
	cursor: pointer;
	transition: var(--transition);
}

.btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(219, 83, 83, 0.3);
}

.btn-submit:disabled {
	background: #ccc;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

@media screen and (max-width: 480px) {
	.btn-group {
		flex-direction: column-reverse;
		padding: 0 12px;
	}

	.btn-back {
		width: 100%;
		text-align: center;
	}
}

/* =============================================
 * フォーム完了チェッカー (最小限の修正)
 * ============================================= */
/* 疑似要素による「項目」重複を削除 */
#form_checker.modern::after {
	content: none !important;
}

/* モバイル表示時の幅調整のみ */
@media screen and (max-width: 480px) {
	#form_checker.modern {
		width: auto !important;
		max-width: 200px;
		left: auto !important;
		right: 0 !important;
	}
}

/* =============================================
 * 資格選択画面・入力画面のフッター余白調整
 * ============================================= */
/* 資格選択画面 */
.inquiry_area {
	padding-bottom: 20px;
}

/* 入力画面のフォームコンテナ */
.container-fluid {
	padding-bottom: 80px;
}

@media screen and (max-width: 480px) {
	.inquiry_area {
		padding-bottom: 0;
	}

	.container-fluid {
		padding-bottom: 60px;
	}
}

/* =============================================
 * Payment Layout Corrections & Table Styles (Restored & Updated)
 * ============================================= */

/* 支払い方法プルダウン（上書き） */
.payment-method-row {
	display: flex !important;
	gap: 20px !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	margin-bottom: 20px !important;
	padding-bottom: 20px !important;
	border-bottom: 1px solid #e8e8e8 !important;
}

.payment-method-row .form-group {
	flex: 1 !important;
	min-width: 300px !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	border-bottom: none !important;
}

#divide_group {
	display: none !important;
}

#divide_group.show {
	display: flex !important;
}

.select-wrapper {
	position: relative !important;
}

.select-wrapper .form-select {
	padding-right: 2.5rem !important;
}

.select-arrow {
	position: absolute !important;
	right: 0.75rem !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
	color: #666 !important;
	font-size: 0.8rem !important;
}

@media screen and (max-width: 768px) {
	.payment-method-row {
		flex-direction: column !important;
	}

	.payment-method-row .form-group {
		min-width: 100% !important;
	}
}

/* 支払い方法と分割回数のプルダウン横幅調整 */
.payment-method-row .form-group:first-child,
.payment-method-row #divide_group {
	flex: 1 1 0 !important;
	max-width: none !important;
	min-width: 200px !important;
}

.payment-method-row .divide_installment {
	gap: 0 !important;
}

.payment-method-row .form-group:first-child {
	max-width: 50% !important;
}

/* スマホ表示時の余白調整 */
@media screen and (max-width: 768px) {
	.credit-group {
		gap: 12px !important;
		flex-direction: column !important;
	}

	.credit-label {
		min-width: 100% !important;
		width: 100% !important;
		padding-bottom: 8px !important;
	}

	.divide_installment {
		gap: 12px !important;
		flex-direction: column !important;
	}

	.form-row .form-group {
		margin-bottom: 20px;
	}

	.form-row .form-group:last-child {
		margin-bottom: 0;
	}
}

/* =============================================
 * クレジットカード入力フォーム テーブル化スタイル
 * ============================================= */
.payment-method-table-wrapper {
	width: 100%;
	margin-bottom: 20px;
}

.payment-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid #e8e8e8;
}

.payment-table th,
.payment-table .payment-table-th,
.payment-table td,
.payment-table .payment-table-td {
	padding: 15px;
	border: 1px solid #e8e8e8;
	text-align: left;
	vertical-align: top;
}

.payment-table th,
.payment-table .payment-table-th {
	width: 25%;
	background-color: #f9f9f9;
	font-weight: 600;
	color: var(--text-color);
	vertical-align: middle;
}

.payment-table td,
.payment-table .payment-table-td {
	width: 75%;
	background-color: #fff;
}

.form-group-table {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.form-row-table {
	display: flex;
	gap: 15px;
	align-items: center;
}

.form-row-table .form-group-table {
	flex: 1;
}

.input-label-sm {
	font-size: 0.8rem;
	color: #666;
	margin-bottom: 2px;
}

/* 支払い方法と分割回数の横並びレイアウト（Flexbox） */
.payment-flex-row {
	display: flex;
	gap: 20px;
	align-items: center;
}

.payment-item {
	flex: 1;
}

.divide-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
}

.input-label-inline {
	font-weight: 600;
	font-size: 0.9rem;
	white-space: nowrap;
}

.payment-flex-row .payment-item:first-child {
	flex: 0 0 auto;
	width: calc(50% - 10px);
}

.payment-flex-row #divide_area.payment-item {
	flex: 1;
}

.divide-wrapper {
	width: 100%;
	gap: 15px;
}

.divide-wrapper .select-wrapper {
	width: 100%;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {

	/* 支払い方法・分割回数 */
	.payment-flex-row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.divide-wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}

	.payment-flex-row .payment-item:first-child {
		width: 100%;
		flex: 1;
	}

	/* テーブル要素のブロック化 */
	.payment-table,
	.payment-table tbody,
	.payment-table tr,
	.payment-table .payment-table-row,
	.payment-table th,
	.payment-table .payment-table-th,
	.payment-table td,
	.payment-table .payment-table-td {
		display: block;
		width: 100%;
	}

	/* タイトルヘッダー */
	.payment-table th,
	.payment-table .payment-table-th {
		padding: 10px 15px !important;
		background-color: #f0f0f0;
		border-bottom: none;
	}

	/* コンテンツセル */
	.payment-table td,
	.payment-table .payment-table-td {
		padding: 10px 15px !important;
		/* タイトル(th)と同じ左右余白 */
		border-top: none;
	}

	/* ネガティブマージンでテーブルのみ画面端まで広げる */
	/* 親要素のpadding: 16px (左右)をキャンセル */
	.payment-method-table-wrapper {
		width: calc(100% + 32px) !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
	}

	/* マージンで広げた分、payment-tableの幅もそれに従う */
	.payment-table {
		border-left: none !important;
		border-right: none !important;
	}

	/* 有効期限・カード名義を横並び維持 */
	.form-row-table {
		flex-direction: row !important;
		gap: 10px !important;
	}

	/* 入力フォーム幅最大化 */
	.form-group-table .form-input {
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* =============================================
 * スマホ表示時のカード名義フォーム調整（縦並び）
 * ============================================= */
@media screen and (max-width: 768px) {

	/* カード名義（.name-row）だけ縦並びにする */
	.form-row-table.name-row {
		flex-direction: column !important;
		gap: 15px !important;
	}

	/* カード番号と同じ幅にする（既にwidth: 100%設定済みだが念のため確認） */
	.form-row-table.name-row .form-group-table {
		width: 100% !important;
	}
}

/* =============================================
 * ラベルフォント調整
 * ============================================= */
.input-label-sm {
	font-weight: 700 !important;
}

/* =============================================
 * 支払い方法セクション スタイル調整（インラインCSS移行）
 * ============================================= */

/* 必須バッジ */
.required-badge {
	font-size: 0.75rem;
	background: #fff;
	color: var(--primary-color);
	padding: 2px 8px;
	border-radius: 4px;
	margin-left: 8px;
}

/* 支払い方法説明文 */
.payment-description {
	font-size: 1rem;
	color: #333;
	line-height: 1.8;
	margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {
	.payment-description {
		font-size: 0.9rem;
		line-height: 1.7;
	}
}

/* 支払い方法タイトル */
.payment-method-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text-color);
	margin-bottom: 0.5rem;
}

/* クレジットカード画像コンテナ */
.ccard_img {
	margin-bottom: 1rem;
	max-width: 300px;
}

/* クレジットカードロゴ画像 */
.credit-card-logos {
	width: 100%;
}

/* セキュリティコード入力欄幅 */
#security_code {
	max-width: 120px;
}

/* =============================================
 * レイアウト崩れ修正（スマホ表示時）
 * .payment-detailのpadding干渉を解消
 * ============================================= */
@media screen and (max-width: 768px) {

	/* 親要素のpaddingをリセットして計算を単純化 */
	.payment-card .payment-detail {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* 説明文やタイトルには適切な余白を設定 */
	.payment-detail .payment-method-title,
	.payment-detail .payment-description,
	.payment-detail .ccard_img {
		margin-left: 15px !important;
		margin-right: 15px !important;
	}

	/* テーブルラッパー: 親(form-card-body)のpadding(16px)のみをキャンセル */
	.payment-method-table-wrapper {
		margin-left: -16px !important;
		margin-right: -16px !important;
		width: calc(100% + 32px) !important;
	}

	/* セキュリティコードの幅指定（念のため再定義） */
	#security_code {
		width: 100% !important;
		max-width: 120px !important;
	}
}
/* =============================================
 * スマホ表示時のテーブルはみ出し修正
 * ============================================= */
@media screen and (max-width: 768px) {
    .payment-method-table-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ボーダーを元に戻す（画面端までいかないのであれば枠線が必要） */
    .payment-table {
        border-left: 1px solid #e8e8e8 !important;
        border-right: 1px solid #e8e8e8 !important;
    }
}