@charset "UTF-8";
/* =====================================================================
 *  応募フォーム 追加スタイル
 *  （既存の styles.css の後に読み込まれます。既存の指定は上書きしません）
 * =================================================================== */

/* --- メッセージ表示 ------------------------------------------------- */
.msgBox {
	margin: 0 0 24px;
	padding: 16px 18px;
	border-radius: 6px;
	font-size: 16px;
	line-height: 1.8;
}
.msgBox p { margin: 0 0 6px; }
.msgBox p:last-child { margin-bottom: 0; }

.msgBox--error {
	background: #fdecec;
	border: 1px solid #e0a0a0;
	color: #b00020;
}
.msgBox--info {
	background: #eef4fd;
	border: 1px solid #9fbde4;
	color: #14487f;
}

.errMsg {
	margin: 6px 0 0;
	color: #b00020;
	font-size: 16px;
	font-weight: bold;
}
.formTbl tr.hasError > th,
.formTbl tr.hasError > td { background: #fff6f6; }
.hasError > label { color: #b00020; }

/* --- コース選択 ----------------------------------------------------- */
.courseLead {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 14px;
}
.courseNote {
	text-align: center;
	font-size: 16px;
	color: #666;
	margin: 10px 0 24px;
}
.campaignBtnSet .courseBtn {
	width: 100%;
	cursor: pointer;
	border: none;
	font-family: inherit;
	font-size: inherit;
}
.campaignBtnSet .courseBtn.isActive {
	outline: 3px solid #c00;
	outline-offset: 2px;
}
.courseBadge {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 14px;
	background: #c00;
	color: #fff;
	border-radius: 999px;
	font-size: 13px;
	font-weight: bold;
}
.courseBadge:empty { display: none; }

/* --- CM動画 --------------------------------------------------------- */
.movieLead {
	text-align: center;
	font-weight: bold;
	margin: 0 0 12px;
}
.movieBox {
	position: relative;
	max-width: 560px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	background: #000;
}
.movieBox iframe,
.movieBox > div:first-child {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* 再生バーの操作をさせないための覆い */
.movieCover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .55);
	z-index: 2;
}
.movieCover.isPlaying {
	display: none;          /* 再生中は覆いを外し、操作パネルを使えるようにする */
}
.movieCover.isDone,
.movieCover.isError { background: rgba(0, 0, 0, .88); }

.moviePlay {
	padding: 14px 28px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	background: #c00;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}
.moviePlay[hidden] { display: none; }

.movieDone,
.movieError {
	text-align: center;
	color: #fff;
	font-weight: bold;
	line-height: 1.8;
	padding: 0 16px;
}
.movieDone[hidden],
.movieError[hidden] { display: none; }

.movieError p { margin: 0 0 8px; }
.movieError a { color: #ffd34d; text-decoration: underline; }

/* 動作確認用（URLに ?debug=1 を付けたときだけ表示） */
.movieDebug {
	max-width: 560px;
	margin: 10px auto 0;
	padding: 10px 12px;
	background: #111;
	color: #9f9;
	font-family: monospace;
	font-size: 12px;
	line-height: 1.6;
	border-radius: 6px;
	max-height: 200px;
	overflow: auto;
}

/* --- 動画視聴前のフォーム ------------------------------------------- */
.formArea {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.formArea.isLocked {
	opacity: .45;
	pointer-events: none;
	user-select: none;
}

/* --- 入力欄 --------------------------------------------------------- */
input.isLocked,
input[readonly] {
	background: #f2f2f2;
	color: #555;
	cursor: not-allowed;
}
.note {
	margin: 6px 0 0;
	font-size: 16px;
	color: #666;
	line-height: 1.6;
}
.autoValue {
	display: inline-block;
	min-width: 6em;
	padding: 6px 12px;
	background: #f2f2f2;
	border-radius: 4px;
	font-weight: bold;
}
.sizeResult {
	margin: 10px 0 0;
	font-weight: bold;
	color: #c00;
}
.sizeResult:empty { display: none; }

.entryNote,
.thanksNote {
	margin: 18px 0 0;
	font-size: 16px;
	color: #555;
	line-height: 1.9;
}
.entryNote p,
.thanksNote p { margin: 0; }

/* --- 確認画面 ------------------------------------------------------- */
.confirmTbl td { word-break: break-all; }
.inlineForm { display: inline-block; }
.formBtn--back input { background: #888; }

/* --- 回答対象外の行 ------------------------------------------------- */
.noanswer { opacity: .45; }

/* --- スマートフォン ------------------------------------------------- */
@media screen and (max-width: 760px) {
	.campaignBtnSet .col3 > li { margin-bottom: 10px; }
	.moviePlay { padding: 12px 20px; font-size: 15px; }
	.inlineForm { display: block; }
	.formBtn--back { margin-bottom: 12px; }
}

/* 動作確認用のスキップボタン（?debug=1 のときだけ表示されます） */
.movieSkip {
	display: block;
	margin: 12px auto 0;
	padding: 8px 18px;
	font-size: 13px;
	color: #333;
	background: #ffe08a;
	border: 1px solid #d6ac3a;
	border-radius: 5px;
	cursor: pointer;
}

/* 早送り時のお知らせ */
.movieNotice {
	display: none;
	max-width: 560px;
	margin: 10px auto 0;
	padding: 10px 14px;
	background: #fdecec;
	border: 1px solid #e0a0a0;
	color: #b00020;
	border-radius: 6px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

/* テストモードの警告バー（公開時は表示されません） */
.testModeBar {
	position: sticky;
	top: 0;
	z-index: 9999;
	background: #ffdf6b;
	border-bottom: 2px solid #d6ac3a;
	color: #4a3800;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.7;
	text-align: center;
	padding: 10px 14px;
}
.testModeBar code {
	background: rgba(0, 0, 0, .12);
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 12px;
}

/* =====================================================================
 *  文字サイズの調整（2026-09-28）
 *    ・入力欄のプレースホルダー（例：横浜太郎 などの薄い文字）
 *    ・各種の注釈テキスト
 *    を 16px に統一しています。
 * =================================================================== */

/* プレースホルダー */
.formWrap input::placeholder,
.formWrap textarea::placeholder {
	font-size: 16px;
	opacity: 1;              /* ブラウザによる薄すぎる表示を防ぐ */
	color: #949494;
}
/* 古いブラウザ向け */
.formWrap input::-webkit-input-placeholder,
.formWrap textarea::-webkit-input-placeholder { font-size: 16px; color: #949494; }
.formWrap input::-moz-placeholder,
.formWrap textarea::-moz-placeholder { font-size: 16px; color: #949494; opacity: 1; }
.formWrap input:-ms-input-placeholder,
.formWrap textarea:-ms-input-placeholder { font-size: 16px; color: #949494; }

/* 「お選びください」などの未選択状態のプルダウン */
.formWrap select { font-size: 16px; }

/* 表内の注釈（※スタッドレスタイヤをお持ちでない方は… など） */
.formTbl .attention,
.formTbl th small,
.formWrap .att {
	font-size: 16px;
	line-height: 1.7;
}

/* 注釈の行間を文字サイズに合わせて調整 */
.note,
.entryNote,
.thanksNote,
.courseNote { line-height: 1.8; }

/* =====================================================================
 *  フォーム上部の調整（2026-09-28）
 * =================================================================== */

/* ヘッダー画像の下と、見出しの下の余白を同じにする
   （数値を変えるときは、下の2か所を同じ値にしてください） */
.campaignHomeContent {
	padding-top: 40px;          /* ← ヘッダー画像との間 */
}
.courseLead {
	margin: 0 0 40px;           /* ← ボタンとの間 */
	line-height: 1.5;
}
/* 既存のCSSで付いている余白を打ち消して、上記の値だけが効くようにする */
.campaignHomeContent .campaignBtnSet,
.campaignHomeContent .campaignBtnSet > ul {
	margin-top: 0;
	padding-top: 0;
}

/* コース選択下の注記を白文字に */
.courseNote {
	color: #fff;
}

/* 応募済みのコース（選択できない状態） */
.campaignBtnSet .courseBtn.isDone,
.campaignBtnSet .courseBtn[disabled] {
	opacity: .35;
	cursor: not-allowed;
	filter: grayscale(100%);
}
.courseDone {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

/* 動画の視聴が済むまでフォームを操作できない旨のお知らせ */
.formLockNote {
	margin: 0 0 20px;
	padding: 16px 18px;
	background: #fff6e0;
	border: 1px solid #e0b55a;
	border-radius: 6px;
	color: #6b4a00;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.8;
	text-align: center;
}
.formLockNote[hidden] { display: none; }
.formLockJump {
	display: inline-block;
	margin-left: 12px;
	padding: 6px 16px;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	background: #c00;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
@media screen and (max-width: 760px) {
	.formLockJump { display: block; margin: 10px auto 0; }
}

/* =====================================================================
 *  応募完了ページ：ブランドサイトへの自動遷移
 * =================================================================== */
.redirectArea {
	margin: 28px auto 0;
	padding: 20px 18px;
	max-width: 560px;
	background: #fff4f4;
	border: 2px solid #c00;
	border-radius: 8px;
	text-align: center;
}
.redirectText {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: bold;
	line-height: 1.7;
	color: #c00;
}
.redirectCount {
	display: inline-block;
	min-width: 2.2em;
	margin-right: 2px;
	font-size: 28px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}
.redirectBtn .col3 {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.redirectBtn .col3 > li {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	float: none;
	list-style: none;
}
.redirectBtn .col3 > li > .linkBtn {
	display: block;
	width: 100%;
}

@media screen and (max-width: 760px) {
	.redirectArea { margin-top: 22px; padding: 16px 14px; }
	.redirectText { font-size: 16px; }
	.redirectCount { font-size: 24px; }
}

/* プレビュー表示の案内バー（本番の応募者には表示されません） */
.previewBar {
	position: sticky;
	top: 0;
	z-index: 9998;
	background: #1f6feb;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.7;
	text-align: center;
	padding: 12px 14px;
}