input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="tel"],
	textarea {
		width: 100%;
	}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
textarea,
select{
	background-color: #eee;
	border: none;
	border-radius: 8px;
	color: #333;
	transition: background, 0.5s;
	font-size: 2rem;
	padding: 1.6rem;
	@media screen and (max-width: 540px) {
		font-size: 1.6rem;
	}
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus{
		outline: none;
		background: rgba(var(--violet-rgb), 0.25);
}
select{
	cursor: pointer;
	position: relative;
	-webkit-appearance: none;
	appearance: none;
	display: block;
}


//ボタンのスタイルをリセット

input[type="submit"],
input[type="button"] {
	-webkit-box-sizing: content-box;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 2.4rem !important;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
		display: none;
}
input[type="submit"],
input[type="button"] {
	border-radius: calc(2.4rem + 1.5rem);
	padding: 1rem 2rem 1.4rem;
	line-height: 1;
	background: var(--violet);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(var(--violet-rgb),0.15);
	border: 1px solid var(--violet);
	font-size: 2.4rem;
	transition: all .8s .3s;
}
input[type="submit"]:disabled,
input[type="button"]:disabled {
	background: #999;
	border: 1px solid #999;
	pointer-events: none;
}

input[type="submit"]:focus,
input[type="button"]:focus {
	 	outline-offset: -2px;
}
input[type="submit"]:hover,
input[type="button"]:hover{
	background: var(--link-color);
	border: 1px solid var(--link-color);
}
input.wpcf7-previous{
	color: var(--violet);
	background: #fff;
	border: 1px solid var(--violet);
}
input.wpcf7-previous:hover{
	color: #fff;
	background: var(--link-color);
	border: 1px solid var(--link-color);
}

input::placeholder,
textarea::placeholder{
	font-size: 1.6rem;
	color: #999 !important;
}



/*

ラジオボタンのUI

*/

/* ラジオボタンを非表示（ただしアクセシビリティのため完全削除しない） */
.wpcf7-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* wpcf7-list-item をインライン並びに */
.wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	& label{
		margin-bottom: 0;
	}
}
@media screen and (max-width: 540px) {
	.wpcf7-radio {
		display: block;
	}
	.wpcf7-list-item{
		display: block;
	}
}

.wpcf7-list-item {
	margin: 0; /* CF7のデフォルトmarginをリセット */
	width: fit-content;
}

/* label全体をクリック領域にする */
.wpcf7-radio label {
	display: block;
	cursor: pointer;
	width: fit-content;
}

/* ボタン本体のスタイル（非選択時） */
.wpcf7-radio .wpcf7-list-item-label {
	display: inline-block;
	padding: 0.4em 1.2em 0.5em;
	border: 1px solid var(--violet);
	border-radius: 2em; /* pill型。角丸にしたくなければ小さく */
	background: #fff;
	color: var(--violet);
	font-size: 2.0rem;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	user-select: none;
	font-weight: normal;
	@media screen and (max-width: 540px) {
		font-size: 1.6rem;
	}
}
.wpcf7-radio.wpcf7-not-valid{
	background-color: transparent !important;
	& .wpcf7-list-item-label{
		background: rgba( var(--magenta-neon), 0.125) !important;
	}
}


/* 選択時 */
.wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label {
	background: var(--violet);	 /* ブランドカラーに合わせて変更 */
	color: #fff;
	border-color: var(--violet);
}

/* ホバー（未選択時のみ） */
.wpcf7-radio input[type="radio"]:not(:checked) + .wpcf7-list-item-label:hover {
	background: #f0f0f0;
}

/* フォーカス（キーボード操作用） */
.wpcf7-radio input[type="radio"]:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var(--violet);
	outline-offset: 2px;
}


/*

ラジオボタンのUIここまで
ここから同意チェック

*/

.entry--formAgree{
	display: block;
	background: #fff;
	padding: 2rem;
	margin: 3.2rem 0;
	border: 1px solid #ccc;
	border-radius: 8px;
}
.entry--formAgree > p{
	margin-top: 2rem;
	a{
		color: var(--brand-color);
		text-decoration: underline;
	}
}
.entry--formAgree > .btn--submit{
	margin-top: 3.6rem;
}

.entry--formAgree .entry--formCheckbox label span.asterisk{
	padding: 0;
}

.entry--formAgree .entry--formCheckbox label span.asterisk:before{
	content: "";
	border: none;
	position: relative;
}


/* チェックボックス全体 */
.entry--formAgree .entry--formCheckbox label {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr; /* auto はアイコン、1fr はラベル文字列を想定 */
	gap: 2rem;
	font-size: 2rem;
	font-weight: normal;
	line-height: 1.5;
	color: #404040;
	/* チェックボックス全体：非活性の見た目 */
	&:has(.checkbox_icon:disabled) {
		opacity: 0.4;
	}
}

/* アイコン */
.entry--formAgree .entry--formCheckbox label input[type="checkbox"] {
	position: relative;
	width: 30px !important;
	height: 30px;
	appearance: none;
	background: #FFFFFF;
	border: solid 3px #aaa;
	border-radius: 4px;
	box-shadow: 0 0 0 0 transparent;
	transition-duration: 0.2s;
	transition-property: background-color, border, box-shadow, color;

	/* 強制カラーモードが有効のときは、既定のシステムカラー値を設定して、トランジションを無効にする */
	@media (forced-colors: active) {
		transition: none;
		border-color: CanvasText;
	}

	/* アイコン：選択済みの見た目 */
	&:checked {
		background: var(--violet); /* 紫色 */
		border-color: var(--violet); /* 紫色 */

		/* 強制カラーモードが有効のときは、システムカラーを設定 */
		@media (forced-colors: active) {
			background-color: Canvas;
			border-color: CanvasText;
		}
	}

	/* アイコン：活性時のホバー演出 */
	&:hover:enabled {
		/* 強制カラーモードが無効かつ、ホバーが有効のときは、ホバー演出を追加 */
		@media (forced-colors: none) and (any-hover: hover) {
			border-color: var(--violet); /* 紫色 */
			box-shadow: 0 0 0 4px #D2CEFF; /* 薄い紫色 */
		}
	}

	/* チェックマーク */
	&::before {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		content: "";
		opacity: 0;
		mask-image: url("../img/entryform/check.svg");
		mask-repeat: no-repeat;
		mask-size: contain;
		background-color: #FFFFFF;
		transition: opacity 0.2s;
		cursor: pointer;
	}
	/* 強制カラーモードが有効のときは、既定のシステムカラー値を設定して、トランジションを無効にする */
	@media (forced-colors: active) {
		&::before {
			transition: none;
			background-color: CanvasText;
		}
	}

	/* チェックマーク：選択済みの見た目 */
	&:checked::before {
		opacity: 1;
	}
}


/*

ここまで同意チェック

*/









.error {
	font-size: 1.4rem;
	color: #fff;
	background: var(--magenta);
	margin-top: 0.5rem;
	display: inline-block;
	padding: 0.2ch;
}
.screen-reader-response{
 	display:none!important
}
.wpcf7-not-valid{
	background-color: rgba( var(--magenta-neon), 0.125) !important;
	width: fit-content;
}
.wpcf7-not-valid-tip{
	padding: 2px;
	color: #fff;
	background: rgb(var(--magenta-neon));
	font-size: 1.4rem;
	width: fit-content;
	margin-top: 8px;
}

.wpcf7-mail-sent-ok,.wpcf7-response-output{
	font-size: 1.4rem;
	color: rgb( var(--magenta-neon));
	border: none;
	margin: 2rem 0;
	padding: 0;
}
.wpcf7-response-output{
	margin-bottom: 0;
}



	form{
		background: #fff;
		margin: 0 auto;
//		width: 75%;
	}

	@media screen and (max-width: 820px) {//スマートフォンヨコ
		form{
			width: 100%;
		}
	}
	@media screen and (max-width: 540px) {
		form{
			padding: 1rem;
		}
		form input,select{
			width: 100% !important;
		}
		form .cluster{
			display: block;
		}
		form .cluster > div +div{
				margin-top: 1rem;
		}
	}

		form br{
			display: none;
		}
		form .optional{
			font-size: 0.8em;
			color: #999;
		}
		form fieldset{
			padding-top: 4.8rem;
			border-top: 1px #ddd solid;
		}
		form fieldset +fieldset{
			margin-top: 4.8rem;
			padding-top: 4.8rem;
		}
		form fieldset:nth-child(2){
			border-top: none !important;
			margin-top: 0;
		}
		form .questionnaire-sheet{
			margin-bottom: 4.8rem;
		}
		form br +label{
			margin-top: 2.4rem;
		}
		form label{
			display: block;
			margin: 0 0 0.8rem;
			font-size: 1.6rem;
			font-weight: bold;
			color: #666;
		}
		form span +label,
		form input +label,
		form input +div,
		form .error +label,
		form select +label,
		form .cluster +.cluster,
		form .cluster +label,
		form .cluster +div,
		form .wpcf7-form-control-wrap +div{
			margin-top: 3.6rem;
		}
		form .wpcf7-form-control-wrap +.wpcf7-form-control-wrap input{
				margin-top: 8px;
		}

		#street,#bldg,#message,#details,#keyword{
			width: 100%;
		}
		#customer-name,#mailaddress,#mailaddress_confirm,#phone{
			width: 50%;
		}
		#content-type,#age{
			width: 50%;
		}


		form .cluster.email{
			width: 100%;
			--gap: 2.0rem;
		}
		form > div{
				width: calc( (100% - var(--gap)) /2);
		}
		@media screen and (max-width: 540px) {
			form > div{
				width: 100%;
			}
			form > div:nth-child(2) {
				margin-top: 6px;
			}
			form > div:nth-child(2) label{
					display: none;
			}
		}


.contact_txt{
	text-align: left;
	font-size: 2rem;
	@media screen and (max-width: 540px) {
		font-size: 1.4rem;
		br{
			display: none;
		}
	}
}


.asterisk{
	color: var(--magenta);
	padding-left: 0.5ch;
}
.note{
	margin-top: 2.4rem;
}
.confirm-table{
	width: 100%;
		margin-bottom: 4.8rem;
		border-top: var(--border-lightgray);
		th, td{
			padding: 1.2rem 0;
			border-bottom: var(--border-lightgray);
			font-size: 2.4rem;
		}
		th{
			width: 25%;
			font-size: 1.6rem;
			padding-right: var(--s0);
			font-weight: bold;
			color: #777;
		}
		td{
			font-weight: normal;
		}
		@media screen and (max-width: 540px) {
			th, td{
				display: block;
				width: 100%;
			}
			th{
				border-bottom: none;
				padding-bottom: 0;
			}
		}
}