@charset "UTF-8";

/* -----------------------------------------------------------
 * Contact
----------------------------------------------------------- */

.contact .l-main {
	padding-top: clamp(11.5rem, 29.4871794872vw, 29.4871794872rem);
}
@media screen and (min-width: 1000px) {
	.contact .l-main {
		padding-top: clamp(25.5rem, 25.5vw, 40.8rem);
	}
}
.contact .l-main__header {
	margin-bottom: clamp(4rem, 10.2564102564vw, 10.2564102564rem);
}
@media screen and (min-width: 1000px) {
	.contact .l-main__header {
		margin-bottom: clamp(5rem, 5vw, 8rem);
	}
}
.contact .l-main__header__title {
	font-size: clamp(3rem, 7.6923076923vw, 7.6923076923rem);
}
@media screen and (min-width: 1000px) {
	.contact .l-main__header__title {
		font-size: clamp(5rem, 5vw, 8rem);
	}
}
.contact .l-main__header__title span {
	font-size: 0.5em;
	display: block;
	position: relative;
	margin-bottom: 0.2em;
}

.p-contactMenu {
	max-width: 115.0rem;
	margin: 0 auto clamp(8rem, 20.5128205128vw, 20.5128205128rem);
}
@media screen and (min-width: 1000px) {
	.p-contactMenu {
		margin-bottom: clamp(10rem, 10vw, 16rem);
		padding: 0 clamp(7.5rem, 7.5vw, 12rem);
	}
}
.p-contactMenu ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2.5641025641vw, 2.5641025641rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media screen and (min-width: 1000px) {
	.p-contactMenu ul {
		grid-template-columns: 1fr 1fr 1fr;
		gap: clamp(1.25rem, 1.25vw, 2rem);
	}
}
.p-contactMenu li {
	margin: 0;
	text-align: center;
	font-size: clamp(1.2rem, 3.0769230769vw, 3.0769230769rem);
	border: solid 0.1rem #000000;
}
@media screen and (min-width: 1000px) {
	.p-contactMenu li {
		font-size: clamp(1rem, 1vw, 1.6rem);
	}
}
.p-contactMenu li.current a {
	background-color: #000000;
	color: #ffffff;
}
.p-contactMenu a {
	display: block;
	position: relative;
	padding: clamp(1.5rem, 3.8461538462vw, 3.8461538462rem) 0;
	transition: background-color 0.5s ease, color 0.5s ease;
}
@media screen and (min-width: 1000px) {
	.p-contactMenu a {
		padding: clamp(1.5625rem, 1.5625vw, 2.5rem) 0;
	}
	.p-contactMenu a:hover {
		background-color: #000000;
		color: #ffffff;
	}
}

#index .p-contactMenu {
	margin-top: 5rem;
}

#index .p-contactMenu ul {
	display: block;
}

#index .p-contactMenu li + li {
	margin-top: 1em;
}

@media screen and (min-width: 1000px) {
	#index .p-contactMenu {
		padding: 0;
	}

	#index .p-contactMenu ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	#index .p-contactMenu li {
		width: calc(50% - 20px);
		margin: 10px 5px;
	}

	#index .p-contactMenu li + li {
		margin-top: 10px;
	}

	#index .p-contactMenu a {
        padding: clamp(3.125rem, 3.125vw, 5.0rem) 0;
		font-size: clamp(1.875rem, 1.875vw, 3rem);
    }
}

.c-contact {
	margin: 0 auto clamp(11.5rem, 29.4871794872vw, 29.4871794872rem);
}
@media screen and (min-width: 1000px) {
	.c-contact {
		margin-bottom: clamp(13.75rem, 13.75vw, 22rem);
	}
}
.c-contact .l-section__title {
	margin-bottom: clamp(4.5rem, 11.5384615385vw, 11.5384615385rem);
	font-size: clamp(1.6rem, 4.1025641026vw, 4.1025641026rem);
}
@media screen and (min-width: 1000px) {
	.c-contact .l-section__title {
		margin-bottom: clamp(9.0625rem, 9.0625vw, 14.5rem);
		font-size: clamp(2.0625rem, 2.0625vw, 3.3rem);
	}
}

.c-contact__form {
	margin-top: 4em;
	margin-bottom: clamp(6.8rem, 17.4358974359vw, 17.4358974359rem);
}
@media screen and (min-width: 1000px) {
	.c-contact__form {
		margin-bottom: clamp(9.5rem, 9.5vw, 15.2rem);
	}
}
.c-contact__form dl {
	margin-bottom: clamp(2.5rem, 6.4102564103vw, 6.4102564103rem);
	padding-bottom: clamp(3.125rem, 3.125vw, 5rem);
	border-bottom: solid 1px #efefef;
}

@media screen and (min-width: 1000px) {
	.c-contact__form dl {
		display: flex;
		margin-bottom: clamp(3.125rem, 3.125vw, 5rem);
	}
}
@media screen and (min-width: 1000px) {
	.c-contact__form dl.nameFLD dt {
		margin-top: clamp(2.625rem, 2.625vw, 4.2rem);
	}
}
@media screen and (min-width: 1000px) {
	.c-contact__form dl.nameFLD dd {
		display: flex;
		gap: clamp(1.875rem, 1.875vw, 3rem);
	}
}
.c-contact__form dl.birthdayFLD dd input[type="text"] {
	max-width: 20%;
}
@media screen and (min-width: 1000px) {
	.c-contact__form dl.addressFLD dt {
		margin-top: clamp(2.625rem, 2.625vw, 4.2rem);
	}
}
.c-contact__form dl.addressFLD dd span {
	margin-bottom: clamp(0.5rem, 1.2820512821vw, 1.2820512821rem);
}
@media screen and (min-width: 1000px) {
	.c-contact__form dl.addressFLD dd span {
		display: flex;
		align-items: center;
	}

	.c-contact__form dl.addressFLD dd span i {
		margin-bottom: clamp(0.625rem, 0.625vw, 1rem);
		width: 16rem;
		margin-bottom: 0;
	}
	.c-contact__form dl.addressFLD dd input, .c-contact__form dl.addressFLD dd select  {
		width: calc(100% - 16rem);
	}
	.c-contact__form dl.addressFLD dd input#zip {
		width: 14em;
	}
}
.c-contact__form dt {
	margin-bottom: clamp(0.5rem, 1.2820512821vw, 1.2820512821rem);
	font-size: clamp(1.4rem, 3.5897435897vw, 3.5897435897rem);
	line-height: 1.85;
	font-weight: 600;
}
@media screen and (min-width: 1000px) {
	.c-contact__form dt {
		margin-top: clamp(0.8125rem, 0.8125vw, 1.3rem);
		margin-bottom: 0;
		width: 22rem;
		font-size: clamp(1.125rem, 1.125vw, 1.8rem);
		line-height: 1.75;
	}
	.c-contact__form dt.doubleLines {
		margin-top: 0;
	}
}
.c-contact__form dd {
	margin: 0;
	font-size: clamp(1.4rem, 3.5897435897vw, 3.5897435897rem);
	line-height: 1.85;
}
@media screen and (min-width: 1000px) {
	.c-contact__form dd {
		width: calc(100% - 22rem);
		font-size: clamp(1.125rem, 1.125vw, 1.8rem);
		line-height: 1.75;
	}
}
.c-contact__form dd span {
	display: block;
}
.c-contact__form dd i {
	font-style: normal;
	font-weight: 600;
	line-height: 1.2;
}
.c-contact__form dd input[type="text"], .c-contact__form dd input[type="email"], .c-contact__form dd input[type="tel"], .c-contact__form dd select, .c-contact__form dd textarea {
	width: 100%;
	padding: 1.0rem;
	font-size: clamp(1.4rem, 3.5897435897vw, 3.5897435897rem);
	border: solid 1px #000;
}
@media screen and (min-width: 1000px) {
	.c-contact__form dd input[type="text"], .c-contact__form dd input[type="email"], .c-contact__form dd input[type="tel"], .c-contact__form dd select, .c-contact__form dd textarea {
		padding: 1.3rem;
		font-size: clamp(1.125rem, 1.125vw, 1.8rem);
	}
}
.c-contact__form dd input[type="text"]:focus, .c-contact__form dd input[type="email"]:focus, .c-contact__form dd input[type="tel"]:focus, .c-contact__form dd select:focus, .c-contact__form dd textarea:focus {
	outline: none;
}
.c-contact__form dd select {
	width: 100%;
	padding: 1.0rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-indent: clamp(0.2rem, 0.5128205128vw, 0.5128205128rem);
	background-color: transparent;
	background-image: url("../images/angle-down.svg");
	background-repeat: no-repeat;
	background-position: right 1.5rem center;
	background-size: 1.5rem;
}
@media screen and (min-width: 1000px) {
	.c-contact__form dd select {
		padding: 1.3rem;
	}
}
.c-contact__form .open {
	display: none; 
	margin-top: 3rem;
}

@media screen and (min-width: 1000px) {
	.c-contact__form .open {
	}
	.c-contact__form .open dt {
	}
	.c-contact__form .open dd {
	}
}
.c-contact__submit input {
	display: block;
	width: clamp(20rem, 51.2820512821vw, 51.2820512821rem);
	margin: 0 auto;
	padding: clamp(1.5rem, 3.8461538462vw, 3.8461538462rem);
	text-align: center;
	background-color: transparent;
	font-size: clamp(1.4rem, 3.5897435897vw, 3.5897435897rem);
	font-weight: 500;
	color: #000000;
	border: solid 0.1rem #000000;
	cursor: pointer;
	transition: .2s ease;
}
@media screen and (min-width: 1000px) {
	.c-contact__submit input {
		width: clamp(25rem, 25vw, 40rem);
		padding: clamp(1.875rem, 1.875vw, 3rem);
		font-size: clamp(1.125rem, 1.125vw, 1.8rem);
		letter-spacing: 0.2em;
	}
}
.c-contact__submit input:hover {
	background-color: #000000;
	color: #fff;
}
.c-contact__check {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(0.2rem, 0.5128205128vw, 0.5128205128rem);
}
@media screen and (min-width: 1000px) {
	.c-contact__check {
		grid-template-columns: 1fr 1fr 1fr;
		gap: clamp(0.625rem, 0.625vw, 1rem);
	}
}
.c-contact__check input {
	display: none;
}
.c-contact__check input[type="checkbox"]:checked + .switch-on {
	background-color: #000000;
	color: #fff;
}
.c-contact__check label {
	display: block;
	padding: clamp(1rem, 2.5641025641vw, 2.5641025641rem) 0;
	text-align: center;
	font-size: clamp(1.2rem, 3.0769230769vw, 3.0769230769rem);
	border: solid 0.1rem #000000;
	cursor: pointer;
	transition: .2s ease;
}
@media screen and (min-width: 1000px) {
	.c-contact__check label {
		padding: clamp(0.9375rem, 0.9375vw, 1.5rem) 0;
		font-size: clamp(1rem, 1vw, 1.6rem);
	}
}
.c-contact__redio {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(0.2rem, 0.5128205128vw, 0.5128205128rem);
}
@media screen and (min-width: 1000px) {
	.c-contact__redio {
		grid-template-columns: 1fr 1fr 1fr;
		gap: clamp(0.625rem, 0.625vw, 1rem);
	}
}
.c-contact__redio input {
	display: none;
}
.c-contact__redio input[type="radio"]:checked + .switch-on {
	background-color: #000000;
	color: #fff;
}
.c-contact__redio label {
	display: block;
	padding: clamp(1rem, 2.5641025641vw, 2.5641025641rem) 0;
	text-align: center;
	font-size: clamp(1.2rem, 3.0769230769vw, 3.0769230769rem);
	border: solid 0.1rem #000000;
	cursor: pointer;
	transition: .2s ease;
}
@media screen and (min-width: 1000px) {
	.c-contact__redio label {
		padding: clamp(0.9375rem, 0.9375vw, 1.5rem) 0;
		font-size: clamp(1rem, 1vw, 1.6rem);
	}
}


.c-contact__form dd.double {
	display: flex;
}

.c-contact__form dd.double span {
	width: calc(100% - 0.5em);
}

.c-contact__form dd.double span + span {
	margin-left: 1em;
}

.c-contact__form dt .required {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0 0.5em;
    background-color: #c60f28;
    color: #ffffff;
    font-size: 1.0rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 0.4rem;
    vertical-align: middle;
}

.c-contact__form .zip-button {
	display: inline-block;
	margin-top: 1.0rem;
}

@media (min-width: 768px) {
	.c-contact__form .zip-button {
		height: 5.6rem;
		margin: 0 0 0 1.0rem;
	}
}

.c-contact__form .zip-button button {
	width: auto;
	height: 4.4rem;
	padding: 0 1.0rem;
	font-size: 1.4rem;
	border: 1px solid #cccccc;
	/*border-radius: 0.8rem;*/
}

@media (min-width: 768px) {
	.c-contact__form .zip-button button {
		height: 5.6rem;
	}
}

/** エラー **/
.l-section__container .error_list {
	background-color: #fee8eb;
	max-width: 700px;
	padding: 5vw;
	margin: 10px auto;
	line-height: 1.6;
}

.l-section__container .error_list ul {
	margin-top: 1em;
}

.l-section__container .error_list li {
	margin-bottom: 0;
}

.l-section__container .error_list li + li {
	margin-top: 0.25em;
}

@media (min-width: 768px) {
	.l-section__container .error_list {
		padding: 30px;
		margin: 20px auto 0;
		font-size: 1.4rem;
	}
}

.c-contact__form dt.error {
	color: #c60f28;
}

/** 確認画面 **/
.c-contact__form.check dt {
	margin-top: 0 !important;
}

.c-contact__submit.back input {
	border:none;
	margin-top: 1em;
}

.c-contact__submit.back input:hover {
	background-color: #eee;
	color: #000;
}

.email-error {
	color: #c60f28;
}