@charset "UTF-8";

/*------------------------------------------------------------
	共通配色定義
------------------------------------------------------------*/
#fwCms_wrapper,
.jBox-wrapper {
	/*基本色（ bdr：枠線、bck背景、txt文字 ）*/
	--form_bdr_color: #bbbbbb;
	--form_bck_color: #ffffff;
	--form_txt_color: #000000;
	/*フォーカス*/
	--form_bdr_color_focus: #8fd6e5;
	--form_bck_color_focus: #f0ffff;
	/*必須*/
	--form_bdr_color_required: #bbbbbb;
	--form_bck_color_required: #ffebfb;
	/*エラー*/
	--form_bdr_color_error: #bbbbbb;
	--form_bck_color_error: #ffc3cb;
	/*非活性*/
	--form_bdr_color_disabled: #bbbbbb;
	--form_bck_color_disabled: #e7e7e7;
	--form_txt_color_disabled: #707f89;
	/*checked*/
	--form_bck_color_checked: #0089ff;
}

/*------------------------------------------------------------
	共通デフォルト設定 ＆ placeholder
------------------------------------------------------------*/
/* safaliでは非表示化 */
_::-webkit-full-page-media,
_:future,
:root input[type="radio"]:not(:checked) {
	&:disabled::after {
		display: none;
	}
}

_::-webkit-full-page-media,
_:future,
:root input[type="checkbox"]:not(:checked) {
	&:disabled::after {
		display: none;
	}
}

#fwCms_wrapper,
.jBox-wrapper {

	button,
	input,
	optgroup,
	select,
	textarea {
		-webkit-appearance: auto;
		appearance: auto;
		vertical-align: middle;
		color: inherit;
		font: var(--form_txt_color);
		background: var(--form_bck_color);
		border: 1px solid var(--form_bdr_color);
		padding: 2px 4px;
		margin: 0;
		border-radius: 4px;
		text-align: inherit;
		text-transform: inherit;

		/*フォーカス時*/
		&:focus {
			background: var(--form_bck_color_focus);
			border: 1px solid var(--form_bdr_color_focus);
		}

		/*必須*/
		&.efo-required {
			background: var(--form_bck_color_required);
			border: 1px solid var(--form_bdr_color_required);
		}

		/*エラー*/
		&.validation-error {
			background: var(--form_bck_color_error);
			border: 1px solid var(--form_bdr_color_error);
		}

		/*入力チェックOK*/
		&.efo-validation-ok {
			background: var(--form_bck_color);
			border: 1px solid var(--form_bdr_color);
		}

		/*非活性*/
		&[disabled] {
			background: var(--form_bck_color_disabled);
			border: 1px solid var(--form_bdr_color_disabled);
			color: var(--form_txt_color_disabled);
		}

		/*readonly*/
		&[readonly] {
			background: var(--form_bck_color_disabled);
			border: 1px solid var(--form_bdr_color_disabled);
			color: #444;
		}
	}

	input[type="radio"]:not(:checked) {
		&:disabled::after {
			position: absolute;
			content: "";
			width: 24px;
			height: 24px;
			border: 1px solid #cdcdcd;
			border-radius: 50%;
			background-color: #eaeaea;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	input[type="checkbox"]:not(:checked) {
		&:disabled::after {
			position: absolute;
			content: "";
			width: 20px;
			height: 20px;
			border: 1px solid #cdcdcd;
			background-color: #eaeaea;
		}
	}

	/* check ios */
	@supports (-webkit-touch-callout: none) {
		@media (hover: none) and (pointer: coarse) {
			input[type="checkbox"]:not(:checked):disabled::after {
				position: absolute;
				content: "";
				width: 20px;
				height: 20px;
				border-radius: 7px;
				/*border: 1px solid #C6C6C8;*/
				/* #cdcdcd */
				background-color: #eaeaea;
				/* #C6C6C8;*/
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	input[type="file"],
	input[type="file"]:focus {
		border: none;
	}

	hr {
		height: 0px;
		color: darkgray;
		border-top: 1px solid var(--form_bdr_color_disabled);
		border-bottom: 1px solid var(--form_bck_color_disabled);

	}

	/*----------------------------------------
		placeholder
	-----------------------------------------*/
	/* WebKit, Blink, Edge */
	::-webkit-input-placeholder {
		color: var(--form_txt_color_disabled);
	}

	/* IE, Edge */
	:-ms-input-placeholder {
		color: var(--form_txt_color_disabled);
	}

	::placeholder {
		color: var(--form_txt_color_disabled);
	}

}

/*------------------------------------------------------------
	Formエレメントタイプ別
------------------------------------------------------------*/
#fwCms_wrapper,
.jBox-wrapper {

	/* フォーカス時の設定 */
	input,
	a,
	button,
	select {
		&:not([type="radio"]):not([type="checkbox"]):focus-visible {
			outline: 2px solid rgb(2, 167, 212);
		}
	}

	/*----------------------------------------
		text
	-----------------------------------------*/
	input {
		height: 40px;
		border-radius: 4px;
		box-sizing: border-box;
		margin: 1px;
		overflow: hidden;
		outline: none;

		/*2026/05/27 ブロック要素にしないと端末によってposition:relative が効かない */
		display: inline-block;

		/*SP*/
		@media (max-width: 500px) {
			&:not([type="radio"]):not([type="checkbox"]):not([type="submit"]) {
				width: 87%;
			}

			&[type="radio"],
			&[type="checkbox"] {
				width: 7vw;
				margin: 0 10px 0 0;
			}

			height: 10vw;
			border-radius: 1.0vw;
		}
	}

	/*----------------------------------------
		textarea
	-----------------------------------------*/
	textarea {
		height: 150px;
		border-radius: 4px;
		box-sizing: border-box;
		margin: 1px;
		width: calc(100% - 36px);
		outline: none;
		resize: vertical;

		/*SP*/
		@media (max-width: 768px) {
			max-width: 87%;
			height: 30vw;
			border-radius: 1.0vw;
		}
	}

	/*----------------------------------------
		select
	-----------------------------------------*/
	select {
		height: 40px;
		border-radius: 4px;
		box-sizing: border-box;
		margin: 1px;
		overflow: hidden;

		/*SP*/
		@media (max-width: 500px) {
			width: 100%;
			/* height: 10vw; */
			border-radius: 1.0vw;
		}
	}

	select,
	::picker(select) {
		appearance: base-select;
		height: auto;
		padding: 10px;
		max-width: 88%;
		min-width: 100px;

		@media (max-width: 768px) {
			padding: 5px;
			min-width: 52px;
		}
	}

	/*----------------------------------------
		radio【label（.label-radio）囲み型・子要素[ input＆span ] 】
	-----------------------------------------*/
	/*iOS対策*/
	_::-webkit-full-page-media, _:future, .label-radio  {
		position: relative;
		display: block;
	}

	/* label.label-radio { */
	.label-radio {
		position: relative;
		display: block;
		margin-top: 4px;

		> input {
			position: relative;
			margin: 2px 2px 0 0;
			accent-color: var(--form_bck_color_checked);
			/*20260810*/
			width: 24px;
			height: 24px;
			vertical-align: top;
            position: absolute;
            left: 0;
            top: 1px;
		}

		/*テキスト文字*/
		> span {
			padding-left: 5px;
            padding-right: 15px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.001);
            display: inline-block;
            margin-top: 4px;
            margin-right: 15px;
            margin-bottom: 3px;
            margin-left: 30px;
			min-height: 24px;

			/*SP*/
			@media (max-width: 820px) {
				margin-right: 0;
			}

			/*SP*/
			@media (max-width: 500px) {
				display: inline-flex;
				flex-direction: column;
				/*
				padding-left: 1vw;
				*/
				/* padding-right: 6vw; */
				/* 
				min-height: 4vh;
				line-height: 4vh;
				*/
			}
		}

		input[type="radio"][disabled]~span, 
		input[type="radio"][disabled]+span  
		 {
			color: #AAAAAA !important;

			h2 {
				color: #AAAAAA !important;
			}
		}

		/* フォーカス時の設定 */
		input[type="radio"]:focus+span {
			background-color: var(--form_bck_color_focus);
			/* outline: 2px solid blue;
			padding-top: 2px;
			padding-bottom: 2px; */
			border-bottom: 2px solid rgb(2, 167, 212);
			/* padding-bottom: 2px; */
		}

		/*○枠*/
		input[type="radio"]+span::before {
			/* content: ""; */
			width: 18px;
			height: 18px;
			border-radius: 18px;
			border: 1px solid var(--form_bdr_color);
			background-color: var(--form_bck_color);
			position: absolute;
			top: 50%;
			left: 0;
			transform: translate(0, -55%);
		}

		/*SP*/
		@media (max-width: 500px) {
			input[type="radio"]+span::before {
				width: 4.8vw;
				height: 4.8vw;
				border-radius: 4.8vw;
			}
		}

		/*○枠の必須・checkOK・disabled・focus*/
		input[type="radio"].required+span::before {
			background-color: var(--form_bck_color_required);
		}

		input[type="radio"].required.checkok+span::before {
			background-color: var(--form_bck_color);
		}

		input[type="radio"][disabled]+span::before {
			background-color: var(--form_bck_color_disabled);
		}

		input[type="radio"]:focus+span::before {
			border: 1px solid var(--form_bdr_color_focus);
			background-color: var(--form_bck_color_focus);
		}

		/*●選択印*/
		input[type="radio"]:checked+span::after {
			/* content: ""; */
			position: absolute;
			width: 10px;
			height: 10px;
			border-radius: 10px;
			background-color: var(--form_bck_color_checked);
			top: 50%;
			left: 4px;
			transform: translate(0, -55%);

			/*SP*/
			@media (max-width: 500px) {
				width: 2.6vw;
				height: 2.6vw;
				border-radius: 2.6vw;
				left: 1.2vw;
			}
		}

		/*●選択印のdisabled*/
		input[type="radio"][disabled]:checked+span::after {
			background-color: var(--form_bdr_color_disabled);
		}

		/*確認画面のdisabled*/
		input[type="radio"][disabled]:checked+span.customer-form-confirm::after {
			background-color: var(--form_bck_color_checked);
		}
	}

	/*----------------------------------------
		checkbox（label（.label-check）囲み型・子要素[ input＆span ] ）
	-----------------------------------------*/
	.label-check {
		position: relative;
		margin-top: 4px;

		/*端に隠す*/
		/* input[type="checkbox"] {
			filter: opacity(0%);
			-moz-opacity: 0;
			opacity: 0;
			-webkit-appearance: none;
			appearance: none;
			position: absolute;
		} */
		> input {
			position: relative;
			margin: 2px 2px 0 0;
			accent-color: var(--form_bck_color_checked);
			/*20260810*/
			width: 20px;
			height: 20px;
			vertical-align: top;
            position: absolute;
            left: 2px;
            top: 0px;
		}

		/*テキスト文字*/
		> span {
			padding-left: 5px;
            padding-right: 10px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.001);
            display: inline-block;
            margin-top: 2px;
            margin-right: 20px;
            margin-bottom: 3px;
            margin-left: 25px;
            min-height: 24px;

			/*SP*/
			@media (max-width: 500px) {
				padding-left: 1vw;
				padding-right: 5vw;
				/* min-height: 4vh; */
				/* line-height: 4vh; */
			}
		}

		/* フォーカス時の設定 */
		input[type="checkbox"]:focus+span {
			background-color: var(--form_bck_color_focus);
			/* outline: 4px solid blue; */
			border-bottom: 2px solid rgb(2, 167, 212);
			/* padding-bottom: 2px; */
		}

		/*□枠*/
		input[type="checkbox"]+span::before {
			/* content: ""; */
			width: 18px;
			height: 18px;
			border-radius: 4px;
			border: 1px solid var(--form_bdr_color);
			background-color: var(--form_bck_color);
			position: absolute;
			top: 50%;
			left: 0;
			transform: translate(0, -55%);
		}

		/*SP*/
		@media (max-width: 500px) {
			input[type="checkbox"]+span::before {
				width: 4.8vw;
				height: 4.8vw;
				border-radius: 1.06vw;
			}
		}

		/*□枠の必須・checkOK・disabled・focus*/
		input[type="checkbox"].required+span::before {
			background-color: var(--form_bck_color_required);
		}

		input[type="checkbox"].required.checkok+span::before {
			background-color: var(--form_bck_color);
		}

		input[type="checkbox"][disabled]+span::before {
			background-color: var(--form_bck_color_disabled);
		}

		input[type="checkbox"]:focus+span::before {
			border: 1px solid var(--form_bdr_color_focus);
			background-color: var(--form_bck_color_focus);
		}

		input[type="checkbox"]:checked+span::before {
			background-color: #fff;
		}

		/*┛選択印*/
		input[type="checkbox"]:checked+span::after {
			/* content: ""; */
			position: absolute;
			width: 8px;
			height: 14px;
			border-right: 4px solid var(--form_bck_color_checked);
			border-bottom: 4px solid var(--form_bck_color_checked);
			top: 50%;
			left: 5px;
			transform: translate(0, -75%) rotate(45deg);

			/*SP*/
			@media (max-width: 500px) {
				left: 1.4vw;
				width: 2vw;
				height: 3vw;
			}
		}

		/*┛選択印のdisabled*/
		input[type="checkbox"][disabled]:checked+span::after {
			border-right-color: var(--form_bdr_color_disabled);
			border-bottom-color: var(--form_bdr_color_disabled);
		}

		/*確認画面のdisabled*/
		input[type="checkbox"][disabled]:checked+span.customer-form-confirm::after {
			border-right-color: var(--form_bck_color_checked);
			border-bottom-color: var(--form_bck_color_checked);
		}
	}

	/*----------------------------------------
		button
	-----------------------------------------*/
	button {
		position: relative;
		border-radius: 5px;
		cursor: pointer;
		/* padding: 5px 15px; */
		/* background: linear-gradient(to bottom, #f7f7f7 0%, #e6e6e5 100%); */
		/* text-shadow: 1px 1px 0 #fff; */
		/* border: 1px solid #c1c1c1; */
		color: #000;
		font-weight: bold;
		margin: 1px;

		&:hover {
			opacity: 0.8;
		}

		/*非活性*/
		&[disabled]:hover {
			cursor: default;
			opacity: 1;
		}

		@media (max-width: 768px) {
			width: 100%;
			height: 10vw;
			border-radius: 1.0vw;
		}
	}
}





.efo-input-area {
	padding-inline-start: 1rem;

	@media (max-width: 768px) {
		padding-inline-start: inherit;
	}

	input,
	select {

		border-radius: 3px;
		border: 1px solid #ddd;
		/*ボックスを大きくする*/
		padding: 5px 1px;
		/*横幅の解釈をpadding, borderまでとする*/
		box-sizing: border-box;

		&.length-large {
			width: 310px;
		}

		&.length-passport {
			width: 210px;
		}

		&.efo-tel1,
		&.efo-extra-tel1 {
			/* width: 80px !important; */
			max-width: 80px;
			min-width: 4.2em;

			/* @media (max-width: 768px) { */
			width: calc((100% - 80px) / 3) !important;
			/* } */
		}

		&.efo-tel2,
		&.efo-extra-tel2 {
			/* width: 80px !important; */
			max-width: 80px;
			min-width: 4.2em;

			/* @media (max-width: 768px) { */
			width: calc((100% - 80px) / 3) !important;
			/* } */
		}

		&.efo-tel3,
		&.efo-extra-tel3 {
			/* width: 80px !important; */
			max-width: 80px;
			min-width: 4.2em;

			/* @media (max-width: 768px) { */
			width: calc((100% - 80px) / 3) !important;
			/* } */
		}

		&:focus {
			&.efo-required {
				background-color: var(--form_bck_color_required);
				border: 1px solid #ff9900;
				z-index: 10;
				outline: 0;
			}

			&.efo-optional {
				background-color: var(--background-color-optional);
				border: 1px solid #28254d;
				z-index: 10;
				outline: 0;
			}
		}

		/* &:disabled {
      background-color: whitesmoke !important;
    }

    &.validation-error {
      background-color: var(--form_bck_color_error) !important;
    }

    &.efo-validation-ok {
      background-color: var(--background-color-default) !important;
    } */

		&.efo-tooltip-validation::placeholder {
			/* font-weight: bold; */
			opacity: 0.5;
			/* color: red; */
		}

		&.efo-required {
			background-color: var(--form_bck_color_required);
		}

		&.efo-optional {
			background-color: var(--background-color-optional);
		}

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

			/* 768px以下に適用されるCSS（スマホ用） */
			&.efo-tel1,
			&.efo-extra-tel1 {
				/* width: 53px !important; */
			}

			/* &.efo-tel2,
			&.efo-extra-tel2 {
				width: 90px !important;
			}

			&.efo-tel3,
			&.efo-extra-tel3 {
				width: 90px !important; */
		}

		&.efo-birth:first-child {
			width: 110px !important;

			@media (max-width: 768px) {
				width: 72px !important;
			}
		}

		&.efo-birth {
			width: 51px !important;

			&#month,
			&#day {
				@media (max-width: 975px) {
					min-width: 62px;
				}

				@media (max-width: 500px) {
					min-width: 55px;
				}
			}
		}
	}


	/* バリデーションの結果表示 */
	&:not(.no-after) {

		/* &.efo-normally, */
		.efo-normally {
			&:after {
				content: '';
				background-image: url('/excludes/KEC/common/img/icon/icon_ok.svg');
				background-repeat: no-repeat;
				display: inline-block;
				height: 2.2rem;
				width: 2.2rem;
				border-radius: 50%;
				vertical-align: text-top;
				margin-top: -2px;
				margin-left: 7px;
			}
		}

		/* &.efo-error, */
		.efo-error {
			&:after {
				content: '';
				background-image: url('/excludes/KEC/common/img/icon/icon_ng.svg');
				background-repeat: no-repeat;
				display: inline-block;
				height: 2.2rem;
				width: 2.2rem;
				border-radius: 50%;
				vertical-align: text-top;
				margin-top: -2px;
				margin-left: 7px;
			}

			input,
			textarea,
			select {
				border: 2px solid red !important;
			}
		}
	}

	ul {
		padding-inline-start: 10px;

		/* マークを非表示 */
		li.list-style-none {
			list-style: none;
		}
	}

	.efo-zip {
		width: 120px;
	}
}

.validation-error-message {
	color: var(--color-validation-error-message);
	font-weight: bold;
	margin-top: 10px;

	&:not(.none-error):before {
		/* &:before { */
		/* content: url('../img/icon_exclamation.svg'); */
		/* background: orange; */
		content: '';
		background-image: url('/excludes/KEC/common/img/icon/icon_note.svg');
		background-repeat: no-repeat;
		display: inline-block;
		height: 2rem;
		width: 2rem;
		vertical-align: text-top;
		margin-right: 3px;
		position: relative;
		top: -2px;
	}

	&.none-error {
		display: none;
	}
}

/* ツールチップ */
.efo-tooltip-validation {

	/* モーダルやツールチップはこれが全体にある */
	.jBox-container {
		border-radius: 4px;
		background-color: whitesmoke;
		/* opacity: 0.2; */
		color: black;
	}

	/* ツールチップのポインター */
	.jBox-pointer {
		&:after {
			background: whitesmoke;
			width: 20px;
			height: 20px;
		}
	}
}

.tooltip-password {

	/* モーダルやツールチップはこれが全体にある */
	.jBox-container {
		border-radius: 4px;
		background-color: whitesmoke;
		/* opacity: 0.2; */
		color: black;
		border: 2px solid #d00;

		.jBox-content {
			padding: 2px 5px;
		}
	}

	/* ツールチップのポインター */
	.jBox-pointer {
		&:after {
			/* content: '●'; */
			background: #d00;
			/* width: 20px;
      height: 20px; */
		}
	}

}