@charset "UTF-8";
/* ナガイレーべン・白衣の日 */
.l-contents.nagai_hakuino_hi {
	.block__description {
		.title {
			font-size: 14px;
			font-weight: 700;
		}
	}
	p.img {
		&+p {
			margin-top: 0;
		}

	}
}

/* 応募フォーム 白衣カラー選択フォーム */
.hakui-color-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;

	.mwform-radio-field {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		min-height: 120px;

		input[type="radio"] {
			position: absolute;
			opacity: 0;
			width: 1px;
			height: 1px;
			margin: 0;
			padding: 0;
			border: 0;
			clip: rect(0 0 0 0);
			overflow: hidden;
		}

		label {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			cursor: pointer;
			position: relative;
			min-height: 120px;
			border: 2px solid transparent;
			border-radius: 8px;
			transition: all 0.2s ease;
			padding: 10px 0;

			&::before {
				content: "";
				display: block;
				width: 80px;
				height: 80px;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
			}

			.mwform-radio-field-text {
				font-size: 12px;
				font-weight: 700;
				text-align: center;
				margin-top: 10px;
			}
		}

		/* 各色の画像設定 */
		&:has(input[value="purple"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_purple.png);
		}
		&:has(input[value="cpink"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_cpink.png);
		}
		&:has(input[value="skyblue"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_skyblue.png);
		}
		&:has(input[value="olive"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_olive.png);
		}
		&:has(input[value="beige"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_beige.png);
		}
		&:has(input[value="blue"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_blue.png);
		}
		&:has(input[value="lavender"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_lavender.png);
		}
		&:has(input[value="pgreen"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_pgreen.png);
		}
		&:has(input[value="rblue"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_rblue.png);
		}
		&:has(input[value="dpink"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_dpink.png);
		}
		&:has(input[value="navy"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_navy.png);
		}
		&:has(input[value="tq"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_tq.png);
		}
		&:has(input[value="bgd"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_bgd.png);
		}
		&:has(input[value="pink"]) label::before {
			background-image: url(../img/nagai_hakuino_hi/img_rt5402_pink.png);
		}

		/* ホバー効果 - 画像がある要素のみ */
		&:has(input[value="purple"]):hover label,
		&:has(input[value="cpink"]):hover label,
		&:has(input[value="skyblue"]):hover label,
		&:has(input[value="olive"]):hover label,
		&:has(input[value="beige"]):hover label,
		&:has(input[value="blue"]):hover label,
		&:has(input[value="lavender"]):hover label,
		&:has(input[value="pgreen"]):hover label,
		&:has(input[value="rblue"]):hover label,
		&:has(input[value="dpink"]):hover label,
		&:has(input[value="navy"]):hover label,
		&:has(input[value="tq"]):hover label,
		&:has(input[value="bgd"]):hover label,
		&:has(input[value="pink"]):hover label {
			border: 2px solid #ddd;
			border-radius: 8px;
			transform: scale(1.02);
		}

		/* 選択状態の全体に枠線を追加 */
		&:has(input[type="radio"]:checked) label {
			border: 3px solid #3C62AD;
			border-radius: 8px;
			box-shadow: 0 0 10px rgba(0, 124, 186, 0.3);
		}

		/* 選択状態のホバー効果を上書き */
		&:has(input[type="radio"]:checked):hover label {
			border: 3px solid #3C62AD;
			transform: scale(1.01);
		}
	}

	@media (max-width: 768px) {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 応募フォーム完了メッセージ */
.nagai_hakuino_hi_present {
	.block__inner {
		p {
			margin-top: 5px;
		}
		.listDisc {
			margin-top: 10px;
		}
	}
}

/* トップページ トピックス記事タイトルの画像 */
.topNotice__item {
	&:has(.hakuinohi_mark),
	&:has(.bluehart_mark) {
		a {
			margin-bottom:20px;
		}
	}


	.hakuinohi_mark {
		display: block;
		margin-bottom: 10px;
		width: 154px;
		height: auto;
	}
	.bluehart_mark {
		display: block;
		margin-bottom: 10px;
		margin-left: 14px;
		width: 18px;
		height: auto;
	}
}