@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@600&display=swap');

#wrap {
	width: 88vw;
	max-width: 1024px;
	margin-inline: auto;

	& h1,
	& h2,
	& h3,
	& h4,
	& h5,
	& h6,
	& p {
		margin-bottom: 0.6em;
	}

	& h1 {
		font-size: 2.4rem;
		/* border-bottom: 1px solid #ccc; */

		border-left: 7px solid #23b7fe;
		line-height: 1;
		padding: 0.4em;
		padding-left: 0.4em;
		padding-bottom: 0.4em;
		margin-bottom: 1em;

	}

	& h2 {
		font-size: 2.0rem;
	}

	& h2:not(:first-child) {
		margin-top: 2em;
	}

	& h3 {
		font-size: 1.8rem;
	}

	& h3:not(:first-child) {
		margin-top: 2em;
	}

	& h4 {
		font-size: 1.6rem;
	}

	& p {
		font-size: 1.4rem;
		line-height: 1.8;
	}

	& p.tel {
		font-size: 4.4rem;
		margin-bottom: 0;
	}

	& p.tel a {
		display: block;
		position: relative;
		display: flex;
		align-items: center;
		font-family: "Roboto", sans-serif;
		font-weight: 600;
		color: #111;
	}

	& p.tel a::before {
		content: '';
		display: block;
		background-image: url(/contact_us/assets/img/icon_navidial.svg);
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 100% auto;
		width: 1.4em;
		height: calc(1.4em * 0.5779036827195467);
		margin-right: 0.2em;
	}

	& dl {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
		overflow: hidden;
	}

	& form.inner {
		display: none;
	}

	& form.inner.show {
		display: block;
	}

	& .disabled input {
		pointer-events: none;
	}

	/* & #form_ticket {
		display: block;
	} */

	& #wrap_form dl {
		border-top: #ccc solid 1px;
	}

	& #wrap_form dl.select_cat {
		border-top: none;

		& dt {
			justify-content: flex-start;
		}
	}

	& dl.address {
		margin-top: 0;
	}

	& dt,
	& dd {
		padding: 2em 1em;
		font-size: 1.6rem;
	}

	& dt:not(:last-of-type),
	& dd:not(:last-child) {
		border-bottom: #ccc solid 1px;
	}

	& #wrap_form dl.address {
		border-top: none;
	}

	& dt {
		width: 20%;
		font-weight: 500;
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;

		& span.must {
			display: block;
			background-color: #E70F13;
			color: #fff;
			padding: 0.1em 0.4em;
			width: 3em;
			margin-top: 0.4em;
			text-align: center;
			font-size: 0.7em;
		}
	}

	& dd {
		width: 80%;
	}

	& dd dt {
		width: 25%;
	}

	& dd dd {
		width: 75%;
	}

	& ul {
		padding: 0 1em 1em;
		margin-bottom: 4em;
	}

	& li {
		font-size: 1.4rem;
		line-height: 1.8;
		padding-left: 1em;
		text-indent: -1em;
	}

	& li:not(:first-child) {
		margin-top: 1em;
	}


	& small {
		font-size: 1.2rem;
		display: block;
		margin-top: 1em;
		margin-bottom: 1em;
	}

	& textarea,
	& select,
	& input {
		padding: 0.8em;
		background-color: #f2f3f0;
	}

	& select {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border: none;
		background-color: transparent;
		padding: 0.7em 2.4em 0.5em 0.8em;
		overflow: hidden;
	}

	& textarea,
	& input {}

	& input[type="text"] {
		border: 1px solid #ccc;
		border-radius: 6px;
		margin-right: 1em;
	}

	& input[name="field_3535318_addr2"],
	& input[name="field_3535318_addr1"] {
		width: 24em;
	}

	& textarea {
		border: 1px solid #ccc;
		border-radius: 6px;
	}

	& input[type="radio"] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-color: transparent;
		position: relative;
		padding: 0.8em 0.2em;
	}

	& input[type="radio"]::after {
		content: '';
		display: block;
		position: relative;
		/* width: 1.2em;
		height: 1.2em; */
		width: 20px;
		height: 20px;
		border: 1px solid #ccc;
		border-radius: 50%;
		vertical-align: 1px;
		margin-right: 0.1em;
	}

	& input[type="radio"]:checked:after {
		/* background-color: #22b6fe; */
		border: 2px solid #22b6fe;
	}

	& input[type="radio"]:checked:before {
		position: absolute;
		top: 50%;
		left: calc(50% - 1px);
		transform: translate(-50%, -50%);
		/* width: 0.6em;
		height: 0.6em; */
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #22b6fe;
		content: '';
		z-index: 9;
	}

	& .list-item:not(:first-child) {
		margin-left: 1em;
	}

	& .gender .list-item {
		margin-left: 0;
	}

	& div.wrap {
		/* border: 1px solid #ccc;
		padding: 30px;
		margin-top: 50px;
		border-radius: 12px; */
		margin-top: 50px;
	}

	& div.form {
		margin-inline: auto;
		border: 1px solid #ccc;
		padding: 30px;
		border-radius: 12px;

		& h1 {
			text-align: center;
			margin-bottom: 1.2em;
			border: none;
			/* padding: 0 0 1.0em; */
		}
	}

	& legend {
		width: 100%;
		font-size: 1.6rem;
		font-weight: 500;
		margin-bottom: 0.4em;
		border-bottom: 1px solid #ccc;
		padding-bottom: 0.4em;
	}

	& legend:not(:first-child) {
		margin-top: 1.6em;
	}

	& fieldset label {
		margin-right: 0.8em;
		font-size: 1.6rem;
		display: inline-flex;
		align-items: center;
	}

	/*  */

	& #contact_notice {
		width: 88%;
		margin-inline: auto;
		border: 6px solid #f6e87e;
		padding: 28px;
		font-size: 1.4rem;
		line-height: 1.6;
		margin-bottom: 4em;
		padding-top: 18px;
		margin-top: 40px;

		& ul {
			margin-bottom: 0;
		}
	}

	/*  */

	& div.box_submit {
		background-color: #e9f8ff;
		border-radius: 6px;
		text-align: center;
		padding: 2em 0;
		margin-top: 3em;
	}

	& div.box_submit p.notice {
		font-size: 1.6rem;
		line-height: 1.8;
		margin-bottom: 1.3em;
	}

	& div.box_submit ul {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0 2em;
		margin: 2em auto 0;
	}

	& div.box_submit li {
		margin-top: 0;
		border-radius: 2em;
		font-size: 2.0rem;
		padding: 0.65em 1em 0.5em 1.0em;
		background-color: #aae6de;
		border: 2px solid #111;
		min-width: 12em;
		text-indent: 0;
	}

	& div.box_submit input {
		/* border-radius: 6px;
		border: #ccc solid 1px; */
		appearance: none;
		border: none;
		background-color: transparent;
		font-size: 2.0rem;
		font-weight: 600;
		display: inline-block;
		padding: 0;
	}

	& div.box_submit li span {
		display: inline-block;
		position: relative;
	}

	& div.box_submit li.btn_form_clear span:before {
		position: relative;
		left: 0;
		vertical-align: middle;
		content: " ";
		display: inline-block;
		background-repeat: no-repeat;
		margin-top: -0.2em;
		margin-left: 0;
		width: 0.8em;
		height: 0.8em;
		background-size: 100% 100%;
		background-image: url(/common_2017/svg/icon_close_bk-bold.svg);
		background-position: 0 0;
	}

	& div.box_submit .btn_form_pre_ck {
		opacity: 0.5;
		background-color: #dbd6d6;
	}

	& div.box_submit .btn_form_pre_ck.active {
		background-color: #fbf809;
		opacity: 1;
	}

	& div.box_submit li.btn_form_pre_ck span:before {
		position: relative;
		left: 0;
		vertical-align: middle;
		content: " ";
		display: inline-block;
		background-repeat: no-repeat;
		margin-top: -0.2em;
		margin-right: 0em;
		width: 0.6em;
		height: 1em;
		background-size: 270% 270%;
		background-image: url(/common_2017/svg/icon_arrow_colors.svg);
		background-position: -0.80em 0.05em;
	}


	& div.box_submit .disabled,
	& div.box_submit .disabled input {
		pointer-events: none;
	}

	& div.box_submit li[class^="btn_"]:hover input,
	& div.box_submit li[class^="btn_"]:hover,
	& div.box_submit li[class^="btn_"] a:hover {
		cursor: pointer;
		opacity: 0.7s;
		transition: 0.5s;
	}



	/*  */

	& span.wrap_select {
		display: inline-block;
		position: relative;
		background-color: #f2f3ef;
		border-radius: 4px;
		z-index: 0;
		border: 1px solid #d6d9cd;
		overflow: hidden;
	}

	& span.wrap_select select {
		position: relative;
		z-index: 100;
	}

	& span.wrap_select:after {
		content: " ";
		position: absolute;
		top: 50%;
		right: 5px;
		width: 0;
		height: 0;
		border-style: solid;
		border-right: 4px solid transparent;
		border-left: 4px solid transparent;
		border-top: 6px solid #ffffff;
		border-bottom: 0;
	}

	& span.wrap_select:before {
		position: absolute;
		content: '';
		pointer-events: none;
		top: 2px;
		display: inline-block;
		right: 1px;
		width: 17px;
		height: 34px;
		border-radius: 2px;
		background-color: #22b6fe;
		filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.2));
	}

	/*  */
}

span.sttl {
	display: block;
	font-size: 2.3rem;
	text-align: center;
	margin-top: 0.6em;
	margin-bottom: 0.6em;

	/* display: none; */
}

/*  */

@media screen and (max-width: 768px) {
	#wrap {
		& div.form {
			padding: 4vw;
			border-radius: 2vw;
		}

		& h1 {
			font-size: 5vw;
			/* 16px */
		}

		& h3,
		& h2 {
			font-size: 4.375vw;
			/* 14px */
			text-align: center;
		}

		& h2:not(:first-child) {
			margin-top: 1em;
		}

		& h1+h2 {}

		& p {
			font-size: 3.75vw;
			/* 12px */
		}

		& p.tel {
			font-size: 9.375vw;
			margin-top: -0.4em;

			/* 30px */
			& a {
				justify-content: center;
			}
		}

		& p.tel+p {
			font-size: 3.125vw;
			/* 10px */
			text-align: center;
		}

		/*  */

		& #contact_notice {
			width: 100%;
			padding: 4vw;
			margin-top: 10vw;

			& ul {
				padding: 0 0 1em;
			}

			& li {
				font-size: 3.75vw;
				/* 12px */
			}
		}

		& #wrap_form {
			& dl {
				flex-direction: column;
			}

			& dd,
			& dt {
				width: 100%;
				font-size: 4.375vw;
				/* 14px */
				padding: 0.8em 0em;
			}

			& dt {
				justify-content: center;
				align-items: center;
				flex-direction: row;
				font-weight: 600;
				border: none;

				& span.must {
					margin-top: 0;
					margin-left: 0.6em;
				}
			}

			& dd {
				padding-top: 0;
			}

			& dd.gender fieldset {
				text-align: center;
			}

			& .address dt {
				font-size: 4.0625vw;
				/* 13px */
				font-weight: 400;
			}

			& select {
				font-size: 3.75vw;
				/* 12px */
			}
		}

		& legend {
			font-size: 3.75vw;
			/* 12px */
			font-size: 4.0625vw;
			/* 13px */

		}

		& legend:not(:first-child) {
			margin-top: 1.0em;
		}

		& fieldset label {
			font-size: 3.75vw;
			/* 12px */
		}

		/*  */

		& input[type="radio"] {
			/* appearance: auto; */
			padding-left: 1.8em;
		}

		& input[type="radio"]::after,
		& input[type="radio"]:checked:before {
			font-size: 3.75vw;
			/* 12px */
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		& input[type="radio"]::after {
			width: 1.2em;
			height: 1.2em;
		}

		& input[type="radio"]:checked:before {
			/* left: calc(50% - 1px); */
			width: 0.4em;
			height: 0.4em;
		}

		/*  */

		& small {
			font-size: 3.125vw;
			/* 10px */
		}

		/*  */

		span.sttl {
			font-size: 5vw;
			/* 16px */
		}

		& input[type="text"] {
			border-radius: 2vw;
			margin-right: 0;
			width: 100%;
			font-size: 3.75vw;
			/* 12px */
		}

		& input[type="text"]+input[type="text"] {
			margin-top: 4vw;
		}

		& textarea {
			border-radius: 2vw;
			width: 100%;
			height: 14em;
			font-size: 3.75vw;
			/* 12px */
		}

		/*  */

		& div.box_submit {
			padding-inline: 1em;
		}

		& div.box_submit p.notice {
			font-size: 3.75vw;
			/* 12px */
		}

		& div.box_submit p.notice br {
			display: none;
		}

		& div.box_submit ul {
			flex-direction: column;
		}

		& div.box_submit input,
		& div.box_submit li {
			font-size: 3.75vw;
			/* 12px */
		}

		& div.box_submit .btn_form_pre_ck {
			margin-top: 6vw;
		}

	}



























	/*  */
}
































/*  */