@charset "utf-8";
/*---------- form ----------*/
:root {
	--form-background-color: #fff;
	--form-background-active: #ED707F;
	--form-background-disabled: #f8f8f8;
	--form-background-button: #f27c8e;

	--form-border-color: #ccc;
	--form-border-active: #ED707F;
	--form-border-disabled: #ccc;
	--form-border-invalid: red;

	--form-border-radius: 4px;

	--form-box-shadow: rgba(0, 0, 0, .2) 0 2px 1px -1px, rgba(0, 0, 0, .14) 0 1px 1px 0, rgba(0, 0, 0, .12) 0 1px 3px 0;

	--form-font-color: #333;
	--form-font-active: #ED707F;
	--form-font-disabled: #ccc;
	--form-font-note: #858585;
	--form-font-invalid: red;

	--form-font-size-s: .8rem;
	--form-font-size-m: 1.2rem;

	--form-icon-size: 16px;
	--form-icon-toggleSlide: calc(var(--form-icon-size) * 1.8);
	--form-opacity: .12;
}
.form {
	margin-top: 1.5rem;
}
.form__wrapper {
	margin-top: .5rem;
}
.form__headingLv2 {
	border-image: linear-gradient(var(--form-background-disabled) 0 0) 0 fill / 1 / 0 100vi;
	color: var(--form-font-color);
	font-size: 1rem;
	font-weight: normal;
	margin-top: 5rem;
	margin-bottom: 2rem;
	padding-block: .5rem;
}
@media all and (max-width: 768px) {
	.form__headingLv2 {
		margin-top: 4.57rem;
		margin-bottom: 1.85rem;
	}
}
.form__headingLv2--required::before {
	background-color: var(--form-background-active);
	border-radius: var(--form-border-radius);
	align-items: center;
	color: #fff;
	content: "必須";
	display: inline grid;
	font-size: var(--form-font-size-s);
	justify-content: center;
	line-height: 1;
	padding: .3rem;
	margin-inline: .5rem;
	transform: translateY(-2px);
	vertical-align: middle;
}
.form__icon {
	background-color: var(--form-background-active);
	border-radius: var(--form-border-radius);
	align-items: center;
	color: #fff;
	display: inline grid;
	font-size: var(--form-font-size-s);
	justify-content: center;
	line-height: 1;
	padding: .3rem;
	margin-inline: .5rem;
	transform: translateY(-2px);
	vertical-align: middle;
}
.form__err {
	/* 初期表示は入力補助で文字は灰色 */
	color: var(--form-font-note);
	font-size: var(--form-font-size-s);
	line-height: 1.4;
	margin-top: .5rem;
	margin-bottom: .5rem;
	min-height: 1.4rem;
	padding-left: 1rem;
}
/* 入力後エラーの場合は赤文字 */
.form__wrapper:has(.form__inputElement:user-invalid:not(:focus)) .form__err,
.form__wrapper:has(.form__passwordElement:user-invalid:not(:focus)) .form__err,
/* radioは未選択に戻せないので不要
.form__wrapper:has(.form__radioElement:user-invalid:not(:focus)) .form__err, */
.form__wrapper:has(.form__checkboxElement:user-invalid:not(:focus)) .form__err,
.form__wrapper:has(.form__toggleSlideElement:user-invalid:not(:focus)) .form__err,
.form__wrapper:has(.form__selectElement:user-invalid:not(:focus)) .form__err,
/* サーバー通信後に値がありエラーの場合は赤文字 */
/*
.form__wrapper:has(input:invalid) .form__err.isInvalid,
.form__wrapper:has(select:invalid) .form__err.isInvalid
*/
.form__wrapper:has(input) .form__err.isInvalid,
.form__wrapper:has(select) .form__err.isInvalid {
	color: var(--form-font-invalid);
}
/* いずれかの入力フォーム以外のエラー内容表示用 */
.form__serverErr {
	color: var(--form-font-invalid);
	font-size: var(--form-font-size-m);
}
.form__text {
	color: var(--form-font-color);
	font-size: var(--form-font-size-m);
	line-height: 1.4;
}
.form__font {
	font-size: 1rem !important;
}
.form__font--m {
	font-size: var(--form-font-size-m) !important;
}
.form__font--s {
	font-size: var(--form-font-size-s) !important;
}
/*---------- test ----------*/
/* 非活性ではない要素*/
.test:enabled + span {
	background-color: #ff0;
}
.test:disabled + span {
	background-color: #f0f !important;
}
.test:checked + span {
	background-color: #00f;
}
/* 必須 */
/*
.test:required + span {
	background-color: cornflowerblue;
}
*/
/* 必須未定義 */
/*
.test:optional + span {
	background-color: goldenrod;
}
*/
.test:hover + span {
	background-color: #000;
}
.test:focus + span {
	background-color: #0f0;
}
/* クリック時 */
.test:active + span {
	background-color: #f00;
}
/* ユーザーの操作後 検証成功 */
.test:user-valid + span {
	background-color: blueviolet;
}
/* ユーザーの操作後 検証不成功 */
.test:user-invalid + span {
	background-color: #0ff;
}
/* 検証成功 */
.test:valid + span {
	background-color: chocolate;
}
/* 検証不成功 */
.test:invalid + span {
	background-color: brown;
}
/*---------- input ----------*/
.form__inputWrapper {
	align-items: flex-end;
	display: flex;
	gap: .5rem;
}
.form__input {
	flex-grow: 1;
	position: relative;
}
.form__inputElement {
	appearance: none;
	background-color: var(--form-background-color);
	border: none;
	border-radius: var(--form-border-radius);
	display: block;
	font-size: var(--form-font-size-m);
	height: 3.2rem;
	line-height: 1;
	/* max-width: 100%; */
	padding: 1rem;
	outline: none;
	width: 100%;
}
.form__inputElement--number {
	text-align: right;
}
.form__inputElement:disabled {
	background-color: var(--form-background-disabled) !important;
	color: var(--form-font-disabled) !important;
	cursor: default;
}
.form__inputElement::placeholder {
	color: var(--form-font-disabled) !important;
}
.form__inputBorder {
	border: 1px solid var(--form-border-color);
	border-radius: var(--form-border-radius);
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
	.form__inputElement:hover ~ .form__inputBorder {
		border: 2px solid var(--form-border-color);
	}
}
.form__inputElement:focus ~ .form__inputBorder {
	border: 2px solid var(--form-border-color);
}
.form__inputElement:user-invalid ~ .form__inputBorder {
	border: 2px solid var(--form-border-invalid);
}
.form__inputElement:disabled ~ .form__inputBorder {
	/* for hover */
	border: 1px solid var(--form-border-disabled) !important;
}
.form__inputOverlay {
	background-color: var(--form-background-color);
	border-radius: var(--form-border-radius);
	inset: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.2s ease;
	z-index: 0;
}
.form__inputElement:focus ~ .form__inputOverlay,
.form__inputElement:not(:placeholder-shown) ~ .form__inputOverlay {
	opacity: 0;
}
.form__inputElement:disabled ~ .form__inputOverlay {
	background-color: var(--form-background-disabled) !important;
}
.form__inputLabel {
	color: var(--form-font-note);
	font-size: var(--form-font-size-m);
	left: calc(1rem - 3px);
	line-height: 1;
	padding-right: 3px;
	padding-left: 3px;
	pointer-events: none;
	position: absolute;
	top: 1rem;
	transition: font-size 0.2s ease, top 0.2s ease;
	z-index: 2;
}
.form__inputElement:disabled ~ .form__inputLabel {
	color: var(--form-font-disabled);
}
.form__inputElement:focus ~ .form__inputLabel,
.form__inputElement:not(:placeholder-shown) ~ .form__inputLabel {
	background: linear-gradient(to bottom, var(--form-background-color) 0%, var(--form-background-color) 100%) no-repeat center / 100% 4px;
	color: var(--form-font-color);
	font-size: var(--form-font-size-s);
	top: -.4em;
}
.form__inputElement:disabled:not(:placeholder-shown) ~ .form__inputLabel {
	background: linear-gradient(to bottom, var(--form-background-color) 50%, var(--form-background-disabled) 50%);
	color: var(--form-font-disabled);
}
.form__inputUnit {
	font-size: var(--form-font-size-s);
	line-height: 1;
	padding-bottom: 1rem;
	white-space: nowrap;
}
/*---------- input number ------------------------------*/
.form__inputElement[type="number"]::-webkit-outer-spin-button,
.form__inputElement[type="number"]::-webkit-inner-spin-button {
	-moz-appearance: textfield;
	-webkit-appearance: none;
	margin: 0;
}
/*---------- input password ------------------------------*/
.form__password {
	align-items: center;
	display: flex;
	gap: .5rem;
	justify-content: space-between;
	position: relative;
}
.form__password:has(.form__passwordElement:disabled) {
	background-color: var(--form-background-disabled);
}
.form__passwordElement {
	appearance: none;
	background-color: var(--form-background-color);
	border: none;
	border-radius: var(--form-border-radius);
	display: block;
	font-size: var(--form-font-size-m);
	height: 3.2rem;
	letter-spacing: normal;
	line-height: 1;
	/* max-width: 100%; */
	padding: 1rem;
	outline: none;
	width: 100%;
}
.form__passwordElement[type="password"] {
	letter-spacing: .4rem;
}
.form__passwordElement--number {
	text-align: right;
}
.form__passwordElement:disabled {
	background-color: var(--form-background-disabled) !important;
	color: var(--form-font-disabled) !important;
	cursor: default;
}
.form__passwordElement::placeholder {
	color: var(--form-font-disabled) !important;
	letter-spacing: normal;
}
.form__passwordBorder {
	border: 1px solid var(--form-border-color);
	border-radius: var(--form-border-radius);
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
	.form__passwordElement:hover ~ .form__passwordBorder {
		border: 2px solid var(--form-border-color);
	}
}
.form__passwordElement:focus ~ .form__passwordBorder,
.form__passwordButton:focus ~ .form__passwordBorder {
	border: 2px solid var(--form-border-color);
}
.form__passwordElement:user-invalid ~ .form__passwordBorder {
	border: 2px solid var(--form-border-invalid);
}
.form__passwordElement:disabled ~ .form__passwordBorder {
	/* for hover */
	border: 1px solid var(--form-border-disabled) !important;
}
.form__passwordOverlay {
	background-color: var(--form-background-color);
	border-radius: var(--form-border-radius);
	inset: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.2s ease;
	z-index: 0;
}
.form__passwordElement:focus ~ .form__passwordOverlay,
.form__passwordElement:not(:placeholder-shown) ~ .form__passwordOverlay,
.form__passwordButton:focus ~ .form__passwordOverlay {
	opacity: 0;
}
.form__passwordElement:disabled ~ .form__passwordOverlay {
	background-color: var(--form-background-disabled) !important;
}
.form__passwordLabel {
	color: var(--form-font-note);
	font-size: var(--form-font-size-m);
	left: calc(1rem - 3px);
	line-height: 1;
	padding-right: 3px;
	padding-left: 3px;
	pointer-events: none;
	position: absolute;
	top: 1rem;
	transition: font-size 0.2s ease, top 0.2s ease;
	z-index: 2;
}
.form__passwordElement:disabled ~ .form__passwordLabel {
	color: var(--form-font-disabled);
}
.form__passwordElement:focus ~ .form__passwordLabel,
.form__passwordElement:not(:placeholder-shown) ~ .form__passwordLabel,
.form__passwordButton:focus ~ .form__passwordLabel {
	background: linear-gradient(to bottom, var(--form-background-color) 0%, var(--form-background-color) 100%) no-repeat center / 100% 4px;
	color: var(--form-font-color);
	font-size: var(--form-font-size-s);
	top: -.4em;
}
.form__passwordElement:disabled:not(:placeholder-shown) ~ .form__passwordLabel {
	background: linear-gradient(to bottom, var(--form-background-color) 50%, var(--form-background-disabled) 50%);
	color: var(--form-font-disabled);
}
.form__passwordButton {
	appearance: none;
	background-color: transparent;
	border: none;
	cursor: pointer;
	display: block;
	line-height: 1;
	margin-right: .5rem;
	padding: 0;
	position: relative;
	z-index: 0;
}
.form__passwordInvisible,
.form__passwordVisible {
	display: none;
}
.form__passwordElement[type="password"] ~ .form__passwordButton .form__passwordInvisible {
	display: block;
}
.form__passwordElement[type="text"] ~ .form__passwordButton .form__passwordVisible {
	display: block;
}
/*---------- input search ------------------------------*/
.form__search {
	align-items: center;
	display: flex;
	gap: .5rem;
	justify-content: space-between;
	position: relative;
}
.form__search:has(.form__searchElement:disabled) {
	background-color: var(--form-background-disabled);
}
.form__searchElement {
	appearance: none;
	background-color: var(--form-background-color);
	border: none;
	border-radius: var(--form-border-radius);
	display: block;
	font-size: var(--form-font-size-m);
	height: 3.2rem;
	letter-spacing: normal;
	line-height: 1;
	/* max-width: 100%; */
	padding: 1rem;
	outline: none;
	width: 100%;
}
.form__searchElement:disabled {
	background-color: var(--form-background-disabled) !important;
	color: var(--form-font-disabled) !important;
	cursor: default;
}
.form__searchElement::placeholder {
	color: var(--form-font-disabled) !important;
	letter-spacing: normal;
}
.form__searchElement[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}
.form__searchBorder {
	border: 1px solid var(--form-border-color);
	border-radius: var(--form-border-radius);
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
	.form__searchElement:hover ~ .form__searchBorder {
		border: 2px solid var(--form-border-color);
	}
}
.form__searchElement:focus ~ .form__searchBorder,
.form__searchButton:focus ~ .form__searchBorder {
	border: 2px solid var(--form-border-color);
}
.form__searchElement:user-invalid ~ .form__searchBorder {
	border: 2px solid var(--form-border-invalid);
}
.form__searchElement:disabled ~ .form__searchBorder {
	/* for hover */
	border: 1px solid var(--form-border-disabled) !important;
}
.form__searchOverlay {
	background-color: var(--form-background-color);
	border-radius: var(--form-border-radius);
	inset: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.2s ease;
	z-index: 0;
}
.form__searchElement:focus ~ .form__searchOverlay,
.form__searchElement:not(:placeholder-shown) ~ .form__searchOverlay,
.form__searchButton:focus ~ .form__searchOverlay {
	opacity: 0;
}
.form__searchElement:disabled ~ .form__searchOverlay {
	background-color: var(--form-background-disabled) !important;
}
.form__searchLabel {
	color: var(--form-font-note);
	font-size: var(--form-font-size-m);
	left: calc(1rem - 3px);
	line-height: 1;
	padding-right: 3px;
	padding-left: 3px;
	pointer-events: none;
	position: absolute;
	top: 1rem;
	transition: font-size 0.2s ease, top 0.2s ease;
	z-index: 2;
}
.form__searchElement:disabled ~ .form__searchLabel {
	color: var(--form-font-disabled);
}
.form__searchElement:focus ~ .form__searchLabel,
.form__searchElement:not(:placeholder-shown) ~ .form__searchLabel,
.form__searchButton:focus ~ .form__searchLabel {
	background: linear-gradient(to bottom, var(--form-background-color) 0%, var(--form-background-color) 100%) no-repeat center / 100% 4px;
	color: var(--form-font-color);
	font-size: var(--form-font-size-s);
	top: -.4em;
}
.form__searchElement:disabled:not(:placeholder-shown) ~ .form__searchLabel {
	background: linear-gradient(to bottom, var(--form-background-color) 50%, var(--form-background-disabled) 50%);
	color: var(--form-font-disabled);
}
.form__searchButton {
	appearance: none;
	background-color: transparent;
	border: none;
	cursor: pointer;
	display: block;
	line-height: 1;
	margin-right: .5rem;
	padding: 0;
	position: relative;
	z-index: 0;
}
.form__searchIcon {
	display: block;
}
/*---------- radio ------------------------------*/
.form__radio {
	cursor: pointer;
	display: grid;
	gap: .5rem;
	grid-template-columns: auto 1fr;
	position: relative;
}
.form__radio:has(.form__radioElement:disabled) {
	cursor: default !important;
}
.form__radio + .form__radio {
	margin-top: .5rem;
}
.form__radio + .form__err {
	padding-left: calc(var(--form-icon-size) + .5rem);
}
.form__radioElement {
	appearance: none;
	border: 0;
	bottom: 0;
	clip-path: inset(0 0 0 0);
	height: 1px;
	left: 0;
	margin: -1px;
	outline: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.form__radioBorder {
	background-color: var(--form-background-color);
	align-items: center;
	border: 2px solid var(--form-border-color);
	border-radius: 50%;
	display: flex;
	height: var(--form-icon-size);
	justify-content: center;
	line-height: 1.4;
	margin-block: calc((2lh + 2px - var(--form-icon-size) - var(--form-font-size-m)) / 2);
	position: relative;
	width: var(--form-icon-size);
	z-index: 2;
}
.form__radioElement:checked ~ .form__radioBorder {
	border-color: var(--form-border-active);
}
.form__radioElement:disabled ~ .form__radioBorder {
	background-color: var(--form-background-disabled) !important;
	border-color: var(--form-border-disabled) !important;
}
.form__radioElement:checked ~ .form__radioBorder::before {
	background-color: var(--form-background-active);
	border-radius: 50%;
	content: "";
	display: block;
	height: calc(var(--form-icon-size) / 2);
	pointer-events: none;
	position: relative;
	width: calc(var(--form-icon-size) / 2);
	z-index: 3;
}
.form__radioElement:enabled ~ .form__radioBorder::after {
	background-color: var(--form-border-color);
	border-radius: 50%;
	content: "";
	display: block;
	height: calc(var(--form-icon-size) * 2.5);
	left: calc((var(--form-icon-size) - 2px) * -1);
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: calc((var(--form-icon-size) - 2px) * -1);
	transform: scale(0);
	transition: opacity, transform 0.2s ease;
	width: calc(var(--form-icon-size) * 2.5);
	z-index: 1;
}
.form__radioElement:focus ~ .form__radioBorder::after {
	opacity: var(--form-opacity);
	transform: scale(1);
}
.form__radioElement:checked ~ .form__radioBorder::after {
	background-color: var(--form-background-active);
	opacity: var(--form-opacity);
}
@media (hover: hover) and (pointer: fine) {
	.form__radio:has(.form__radioElement:enabled):hover .form__radioBorder::after {
		opacity: var(--form-opacity);
		transform: scale(1);
	}
	.form__radio:has(.form__radioElement:checked):hover .form__radioBorder::after {
		opacity: var(--form-opacity);
	}
}
.form__radioText {
	color: var(--form-font-color);
	font-size: var(--form-font-size-m);
	line-height: 1.4;
}
.form__radioElement:disabled ~ .form__radioText {
	color: var(--form-font-disabled) !important;
}
/*---------- checkbox ------------------------------*/
.form__checkbox {
	cursor: pointer;
	display: grid;
	gap: .5rem;
	grid-template-columns: auto 1fr;
	position: relative;
}
.form__checkbox:has(.form__checkboxElement:disabled) {
	cursor: default !important;
}
.form__checkbox + .form__checkbox {
	margin-top: .5rem;
}
.form__checkbox + .form__err {
	padding-left: calc(var(--form-icon-size) + .5rem);
}
.form__checkboxElement {
	appearance: none;
	border: 0;
	bottom: 0;
	clip-path: inset(0 0 0 0);
	height: 1px;
	left: 0;
	margin: -1px;
	outline: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.form__checkboxBorder {
	background-color: var(--form-background-color);
	align-items: center;
	border: 2px solid var(--form-border-color);
	border-radius: var(--form-border-radius);
	display: flex;
	height: var(--form-icon-size);
	justify-content: center;
	line-height: 1.4;
	margin-block: calc((2lh + 2px - var(--form-icon-size) - var(--form-font-size-m)) / 2);
	position: relative;
	width: var(--form-icon-size);
	z-index: 2;
}
.form__checkboxElement:checked ~ .form__checkboxBorder {
	background-color: var(--form-background-active);
	border-color: var(--form-border-active);
}
.form__checkboxElement:disabled ~ .form__checkboxBorder {
	background-color: var(--form-border-disabled) !important;
	border-color: var(--form-border-disabled) !important;
}
.form__checkboxElement:checked ~ .form__checkboxBorder::before {
	border-top: transparent;
	border-right: transparent;
	border-bottom: 2px solid var(--form-background-color);
	border-left: 2px solid var(--form-background-color);
	content: "";
	display: block;
	height: calc(var(--form-icon-size) / 3);
	pointer-events: none;
	position: relative;
	transform: rotate(-45deg) translate(1px, -1px);
	width: calc(var(--form-icon-size) / 1.5);
	z-index: 3;
}
.form__checkboxElement:enabled ~ .form__checkboxBorder::after {
	background-color: var(--form-border-color);
	border-radius: 50%;
	content: "";
	display: block;
	height: calc(var(--form-icon-size) * 2.5);
	left: calc((var(--form-icon-size) - 2px) * -1);
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: calc((var(--form-icon-size) - 2px) * -1);
	transform: scale(0);
	transition: opacity, transform 0.2s ease;
	width: calc(var(--form-icon-size) * 2.5);
	z-index: 1;
}
.form__checkboxElement:focus ~ .form__checkboxBorder::after {
	opacity: var(--form-opacity);
	transform: scale(1);
}
.form__checkboxElement:checked ~ .form__checkboxBorder::after {
	background-color: var(--form-background-active);
	opacity: var(--form-opacity);
}
@media (hover: hover) and (pointer: fine) {
	.form__checkbox:has(.form__checkboxElement:enabled):hover .form__checkboxBorder::after {
		opacity: var(--form-opacity);
		transform: scale(1);
	}
	.form__checkbox:has(.form__checkboxElement:checked):hover .form__checkboxBorder::after {
		opacity: var(--form-opacity);
	}
}
.form__checkboxText {
	color: var(--form-font-color);
	font-size: var(--form-font-size-m);
	line-height: 1.4;
}
.form__checkboxElement:disabled ~ .form__checkboxText {
	color: var(--form-font-disabled) !important;
}
/*---------- toggle slide ----------*/
.form__toggleSlide {
	cursor: pointer;
	display: grid;
	gap: .5rem;
	grid-template-columns: auto 1fr;
	position: relative;
}
.form__toggleSlide--right {
	grid-template-columns: repeat(2, auto);
	justify-content: end;
}
.form__toggleSlide:has(.form__toggleSlideElement:disabled) {
	cursor: default !important;
}
.form__toggleSlide + .form__err {
	padding-left: calc(var(--form-icon-toggleSlide) + .5rem);
}
.form__toggleSlide--right + .form__err {
	text-align: right;
}
.form__toggleSlideElement {
	appearance: none;
	border: 0;
	bottom: 0;
	clip-path: inset(0 0 0 0);
	height: 1px;
	left: 0;
	margin: -1px;
	outline: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.form__toggleSlideBorder {
	background-color: var(--form-border-color);
	border: 2px solid var(--form-border-color);
	border-radius: calc(var(--form-icon-toggleSlide) / 2);
	height: var(--form-icon-toggleSlide);
	line-height: 1.4;
	margin-block: calc((2lh + 2px - var(--form-icon-toggleSlide) - var(--form-font-size-m)) / 2);
	position: relative;
	width: calc(var(--form-icon-toggleSlide) * 1.8);
	z-index: 2;
}
.form__toggleSlideElement:checked ~ .form__toggleSlideBorder {
	background-color: var(--form-background-active);
	border-color: var(--form-border-active);
}
.form__toggleSlideElement:disabled ~ .form__toggleSlideBorder {
	background-color: var(--form-background-disabled) !important;
	border-color: var(--form-border-disabled) !important;
}
.form__toggleSlideBorder::before {
	background-color: var(--form-background-color);
	border-radius: 50%;
	content: "";
	display: block;
	height: calc(var(--form-icon-toggleSlide) - 4px);
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: left 0.2s ease;
	width: calc(var(--form-icon-toggleSlide) - 4px);
	z-index: 3;
}
.form__toggleSlideElement:checked ~ .form__toggleSlideBorder::before {
	left: calc(var(--form-icon-toggleSlide) * .8);
}
.form__toggleSlideElement:enabled ~ .form__toggleSlideBorder::after {
	background-color: var(--form-border-color);
	border-radius: 50%;
	content: "";
	display: block;
	height: calc(var(--form-icon-toggleSlide) * 2.5);
	left: calc((var(--form-icon-toggleSlide) + 2px) * -1);
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: calc((var(--form-icon-toggleSlide) - 6px) * -1);
	transform: scale(0);
	transition: opacity, transform 0.2s ease;
	width: calc(var(--form-icon-toggleSlide) * 2.5);
	z-index: 1;
}
.form__toggleSlideElement:focus ~ .form__toggleSlideBorder::after {
	opacity: var(--form-opacity);
	transform: scale(1);
}
.form__toggleSlideElement:checked ~ .form__toggleSlideBorder::after {
	background-color: var(--form-background-active);
	opacity: var(--form-opacity);
	left: calc(var(--form-icon-toggleSlide) * .3);
}
@media (hover: hover) and (pointer: fine) {
	.form__toggleSlide:has(.form__toggleSlideElement:enabled):hover .form__toggleSlideBorder::after {
		opacity: var(--form-opacity);
		transform: scale(1);
	}
	.form__toggleSlide:has(.form__toggleSlideElement:checked):hover .form__toggleSlideBorder::after {
		opacity: var(--form-opacity);
	}
}
.form__toggleSlideText {
	color: var(--form-font-color);
	font-size: var(--form-font-size-m);
	line-height: 1.4;
}
.form__toggleSlideElement:disabled ~ .form__toggleSlideText {
	color: var(--form-font-disabled) !important;
}
.form__toggleSlide--textLeft .form__toggleSlideText {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
/*---------- select ----------*/
.form__select {
	position: relative;
}
.form__select::after {
	aspect-ratio: 1 / cos(30deg);
	background-color: var(--form-border-color);
	clip-path: polygon(50% 100%, 100% 0, 0 0);
	content: "";
	display: block;
	position: absolute;
	right: .8rem;
	top: 50%;
	transform: translateY(-50%);
	width: var(--form-icon-size);
	z-index: 3;
}
.form__selectElement {
	appearance: none;
	background-color: var(--form-background-color);
	border: none;
	border-radius: var(--form-border-radius);
	color: var(--form-font-color);
	cursor: pointer;
	display: block;
	font-size: var(--form-font-size-m);
	height: 3.2rem;
	line-height: 1;
	padding: 1rem calc(1rem + var(--form-icon-size)) 1rem 1rem;
	outline: none;
	width: 100%;
}
.form__selectElement:disabled {
	background-color: var(--form-background-disabled) !important;
	color: var(--form-font-disabled) !important;
	cursor: default;
}
.form__selectBorder {
	border: 1px solid var(--form-border-color);
	border-radius: var(--form-border-radius);
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
	.form__selectElement:hover ~ .form__selectBorder {
		border: 2px solid var(--form-border-color);
	}
}
.form__selectElement:focus ~ .form__selectBorder {
	border: 2px solid var(--form-border-color);
}
.form__selectElement:user-invalid ~ .form__selectBorder {
	border: 2px solid var(--form-border-invalid);
}
.form__selectElement:disabled ~ .form__selectBorder {
	/* for hover */
	border: 1px solid var(--form-border-disabled) !important;
}
.form__selectOverlay {
	background-color: var(--form-background-color);
	border-radius: var(--form-border-radius);
	inset: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.2s ease;
	z-index: 0;
}
.form__selectElement:focus ~ .form__selectOverlay,
.form__selectElement:not(:has(option[hidden]:checked)) ~ .form__selectOverlay {
	opacity: 0;
}
.form__selectElement:disabled ~ .form__selectOverlay {
	background-color: var(--form-background-disabled) !important;
}
.form__selectLabel {
	color: var(--form-font-note);
	font-size: var(--form-font-size-m);
	left: calc(1rem - 3px);
	line-height: 1;
	padding-right: 3px;
	padding-left: 3px;
	pointer-events: none;
	position: absolute;
	top: 1rem;
	transition: font-size 0.2s ease, top 0.2s ease;
	z-index: 2;
}
.form__selectElement:disabled ~ .form__selectLabel {
	color: var(--form-font-disabled);
}
.form__selectElement:focus ~ .form__selectLabel,
.form__selectElement:not(:has(option[hidden]:checked)) ~ .form__selectLabel {
	background: linear-gradient(to bottom, var(--form-background-color) 0%, var(--form-background-color) 100%) no-repeat center / 100% 4px;
	color: var(--form-font-color);
	font-size: var(--form-font-size-s);
	top: -.4em;
}
.form__selectElement:disabled:not(:has(option[hidden]:checked)) ~ .form__selectLabel {
	background: linear-gradient(to bottom, var(--form-background-color) 50%, var(--form-background-disabled) 50%);
	color: var(--form-font-disabled);
}
/*---------- button ----------*/
.form__button {
	align-items: center;
	background-color: var(--form-background-button);
	box-shadow: 0px 6px 8px 0px rgba(100, 100, 100, 0.25);
	border: none;
	border-radius: 4.5rem;
	color: #fff;
	cursor: pointer;
	display: grid;
	font-size: 1.25rem;
	font-weight: bold;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	justify-content: center;
	line-height: 1.4;
	margin: 1rem auto;
	min-height: 4rem;
	/* min-width: 82%; */
	padding: .5rem .8rem;
	text-align: center;
	width: 82%;
}
@media (hover: hover) and (pointer: fine) {
	.form__button:not(:disabled):hover {
		text-decoration: underline;
	}
}
.form__button--2nd {
	background-color: var(--form-background-color);
	border: 2px solid var(--form-border-active);
	color: var(--form-font-active);
}
.form__button--3rd {
	background-color: var(--form-background-color);
	border: 1px solid var(--form-font-color);
	border-radius: .375rem;
	color: var(--form-font-color);
	font-size: var(--form-font-size-m);
	font-weight: normal;
	inline-size: fit-content;
	min-height: auto;
	padding: .5rem 2.6rem .5rem .8rem;
}
.form__button--3rd::after {
	background: url(/src/img/com/icon__button1.svg) left top no-repeat;
	background-size: 1rem 1rem;
	content: "";
	display: block;
	height: 1rem;
	position: absolute;
	right: .8rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1rem;
	z-index: 1;
}
.form__button--cancel {
	background-color: var(--form-background-disabled);
	color: var(--form-font-color);
}
.form__button:disabled {
	background-color: var(--form-background-disabled);
	color: var(--form-font-disabled);
	cursor: default;
}
.form__confirm {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	margin-top: 2rem;
}
/*---------- modal ----------*/
.modal {
	align-items: center;
	display: flex;
	display: none;
	height: 100vh;
	justify-content: center;
	padding: 1rem .5rem;
	pointer-events: none;
	position: fixed;
	width: 100%;
	z-index: 7;
}
.modal__window {
	background-color: #fff;
	border: 1px solid #000;
	border-radius: 1rem;
	max-width: 580px;
	overflow: auto;
	padding: 1.5rem .5rem;
	pointer-events: all;
	width: 100%;
}
.modal__background {
	background: rgba(0, 0, 0, .7);
	display: none;
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 6;
}
.modal__window .cmp__headingLv3 {
	margin-top: 0;
}
/*---------- agree ----------*/
.form__agree {
	border: 1px solid var(--form-border-color);
	margin-top: 2rem;
	margin-bottom: 1rem;
}
.form__agree iframe {
	border: none;
	display: block;
	height: 14rem;
	width: 100%;
}
.form__agree:not(:has(iframe)) {
	height: 14rem;
	overflow-y: auto;
	padding: .5rem;
}
.form__agree > * {
	margin-top: 0 !important;
}
/*---------- tab ----------*/
.tab {
	column-gap: .3rem;
	display: grid;
}
.tab__radioElement {
	appearance: none;
	border: 0;
	bottom: 0;
	clip-path: inset(0 0 0 0);
	height: 1px;
	left: 0;
	margin: -1px;
	outline: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.tab__label {
	align-items: center;
	background-color: var(--form-background-color);
	border: 1px solid var(--form-border-color);
	border-top-width: 2px;
	border-bottom: none;
	cursor: pointer;
	display: flex;
	grid-row: 1;
	justify-content: center;
	line-height: 1.2;
	margin-bottom: -1px;
	order: -1;
	padding: .5rem 1rem;
	text-align: center;
	z-index: 0;
}
.tab__label:has(.tab__radioElement:checked) {
	border-top-color: var(--form-border-active);
	z-index: 2;
}
.tab__content {
	background-color: var(--form-background-color);
	border: 1px solid var(--form-border-color);
	display: none;
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row: 2;
	grid-template-columns: minmax(0, 1fr);
	padding: 1rem;
	position: relative;
	width: 100%;
	z-index: 1;
}
.tab__content > *:first-child {
	margin-top: 0 !important;
}
.tab__label:has(.tab__radioElement:checked) + .tab__content {
	display: grid;
}
.tab:has( > .tab__content:nth-of-type(3):last-child) .tab__content {
	grid-column-end: 4;
}
.tab:has( > .tab__content:nth-of-type(4):last-child) .tab__content {
	grid-column-end: 5;
}
.tab:has( > .tab__content:nth-of-type(5):last-child) .tab__content {
	grid-column-end: 6;
}
/*----------  ----------*/