@charset "utf-8";

/*-------------------------------
	Contact
-------------------------------*/

.Contact {
	width:100%;
	position:relative;
	padding:7rem 0 13.5rem;
}

.Contact__inner {
	max-width:calc(67rem + (var(--padding-leftright) * 2));
	margin:0 auto;
	padding:0 var(--padding-leftright);
}

.Contact__head {
	margin-bottom:8rem;
}

.Contact__head .kome::before {
	color:var(--subcolor);
}

/*-------------------------------
	form head
-------------------------------*/

.form__head {
	margin-bottom: 4.5rem;
	display: flex;
	flex-wrap:wrap;
	align-items: flex-start;
}

.form__head .Contact__radio .wpcf7-list-item{
	width: fit-content;
}
/* .form__head-btn {
	display: flex;
	flex-wrap:nowrap;
	align-items: center;
	width:auto;
	font-size:1.6rem;
	letter-spacing: 5%;
	font-weight:500;
	line-height:1.5;
	cursor: pointer;
	margin:0 4.5rem 2rem 0;
	transition:var(--transition);
}

.form__head-btn:not(.-check):hover {
	opacity: 0.5;
}

.form__head-btn span {
	display: block;
	width:1.5rem;
	height:1.5rem;
	border:1px solid var(--blackcolor);
	border-radius:.5rem;
	margin-right:1.2rem;
	margin-top:0.2rem;
	position:relative;
}

.form__head-btn span::before {
	content:"";
	display: none;
	width:1rem;
	height:.8rem;
	background:url(../images/common/icon_check-white.svg) no-repeat center / contain;
	position:absolute;
	left:.1rem;
	top:.1rem;
	bottom:0;
	right:0;
	margin:auto;
}

.form__head-btn.-check span {
	border-color:var(--subcolor);
	background:var(--subcolor);
}

.form__head-btn.-check span::before {
	display: block;
} */

/*-------------------------------
	Contact on
-------------------------------*/

.Contact__head p,
.form__head {
	display:none;
}

.Enter,
.Confirmation,
.Privacypolicy,
.Contact__acceptance,
.Contact__send {
	display: none;
}

.Contact__head p.-on {
	display: block;
}

.form__head.-on {
	display: flex;
}

.Enter.-on,
.Confirmation.-on,
.Privacypolicy.-on,
.Contact__acceptance.-on,
.Contact__send.-on {
	display: block;
}

/*-------------------------------
	Contact dl	
-------------------------------*/

.Contact__dl > div{
	margin-bottom: 4.5rem;
}
.Contact__dl dt {
	margin-bottom:0.8rem;
}

.Contact__dl dt span {
	font-size:1.6rem;
	font-weight:500;
	letter-spacing: 5%;
	position:relative;
}

.Contact__dl dt span.req::after {
	content:"※";
	display:inline-block;
	color:var(--subcolor);
	padding-left:0.15em;
}

.Contact__dl dd:not(:last-child) {
	margin-bottom:4.5rem;
}

.Contact__txt .wpcf7-text,
.Contact__txt .wpcf7-textarea {
	border:1px solid #BCBCBC;
	border-radius:.5rem;
	padding:1rem 1.5rem;
	width:100%;
}

.Contact__txt.-tel .wpcf7-text {
	max-width:32rem;
}

.Contact__radio .wpcf7-radio {
	display: flex;
	flex-wrap:wrap;
	align-items: flex-start;
	row-gap: 1rem;
}

.Contact__radio .wpcf7-list-item {
	width:25%;
	padding-right:1em;
	line-height: 1;
}
.Contact__radio .wpcf7-list-item label{
	line-height: 1;
}

input::placeholder,
textarea::placeholder {
	color: #BBBBBB;
	font-size:1.6rem;
	letter-spacing: 5%;
	line-height:1.75;
	font-weight:400;
}

.Contact__radio input[type="radio"],
.Contact__checkbox input[type="checkbox"] {
    display: none;
}

.Contact__radio input[type="radio"] + span,
.Contact__checkbox input[type="checkbox"] + span {
	font-size:1.6rem;
	letter-spacing: 5%;
	font-weight:500;
	/* line-height:1.5; */
	line-height: 1;
	display: block;
	position:relative;
	padding-left:2.7rem;
}

.Contact__radio input[type="radio"] + span::before,
.Contact__checkbox input[type="checkbox"] + span::before {
	content: "";
    display: block;
	width:1.5rem;
	height:1.5rem;
	border:1px solid var(--blackcolor);
	border-radius:.5rem;
	position:relative;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border-radius: .5rem;
	box-sizing: border-box;
}
.Contact__radio input[type="radio"] + span::after,
.Contact__checkbox input[type="checkbox"] + span::after{
	display: none;
} 

.Contact__radio input[type="radio"]:checked + span::before,
.Contact__checkbox input[type="checkbox"]:checked + span::before {
	content: "";
	border-color:var(--subcolor);
	background:var(--subcolor);
}

.Contact__radio input[type="radio"]:checked + span::after,
.Contact__checkbox input[type="checkbox"]:checked + span::after {
	content:"";
	display: block;
	width:1rem;
	height:.8rem;
	background:url(../images/common/icon_check-white.svg) no-repeat center / contain;
	position:absolute;
	left:.3rem;
	top:.4rem;
}

.Contact__file .wpcf7-file::file-selector-button {
	font-size:1.4rem;
	letter-spacing: 5%;
	border-radius:.5rem;
	border:1px solid #BCBCBC;
	margin-right:1em;
	cursor: pointer;
}

/*-------------------------------
	Privacy policy
-------------------------------*/

.Privacypolicy {
	margin:8rem auto 3rem;
}

.Privacypolicy__inner {
	width:100%;
	height:20rem;
	overflow-y:auto;
	/*padding:1.6rem;*/
	border:1px solid #BCBCBC;
	border-radius:.5rem;
}
.Privacypolicy__content {
	width: 100%;
	padding:1.6rem;
}

.Privacypolicy__inner::-webkit-scrollbar {
	width:1.2rem;
}

.Privacypolicy__inner::-webkit-scrollbar-track {
	border-radius: .6rem;
	background:var(--graycolor);
}

.Privacypolicy__inner::-webkit-scrollbar-thumb {
	background: var(--maincolor); 
	border-radius: .6rem;
	border:.2rem solid transparent;
	background-clip: padding-box;
}

.Privacypolicy__title-jp {
	font-size:1.6rem;
	font-weight:500;
	letter-spacing: 5%;
	line-height:1.375;
	margin-bottom:0.5em;
}

.Contact__acceptance.Contact__checkbox input[type="checkbox"] + span::before {
	border-color:#BCBCBC;
}

.Contact__acceptance.Contact__checkbox input[type="checkbox"]:checked + span::before {
	border-color:var(--subcolor);
}

.Privacypolicy__block:not(:last-of-type) {
	margin-bottom:3rem;
}

.Privacypolicy__block h4 {
	font-weight:500;
	letter-spacing: 5%;
}

.Privacypolicy__block p {
	margin-bottom:0.5em;
}

.Privacypolicy__block .list-dot {
	margin-bottom:0.5em;
}

.Privacypolicy__block .list-dot li {
	margin-bottom:0;
}

/*-------------------------------
	Contact__send
-------------------------------*/

.Contact__send {
	margin:8rem auto 0;
	width:30rem;
	height:6.1rem;
	border-radius:3.2rem;
	background:var(--blackcolor);
	position:relative;
	overflow:hidden;
}

.Contact__send::before {
	content:"";
	display: block;
	width:100%;
	height:100%;
	background:var(--subcolor);
	transition:.3s transform var(--transition-easing);
	transform:scale(1,0);
	transform-origin:top;
	position:absolute;
	left:0;
	top:0;
}

.Contact__send:hover::before {
	transform:scale(1,1);
	transform-origin:bottom;
}

.Contact__send .Contact__send-text,
.Contact__send input[type="submit"],
.Contact__send input[type="button"],
.Contact__send .back_btn {
	display:flex;
	justify-content: center;
	align-items: center;
	width:100%;
	height:100%;
	color:#fff;
	text-align: center;
	position:relative;
	cursor: pointer;
}

.Contact__send-arrow {
	width: 1.5rem;
	height: 1.1rem;
	display: block;
	position: relative;
	overflow:hidden;
	position:absolute;
	right:2.5rem;
	top:0;
	bottom:0;
	margin:auto 0;
}

.Contact__send-arrow::before,
.Contact__send-arrow::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-image: url(../images/common/icon_arrow-white.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	transition: .6s all var(--transition-easing);
}

.Contact__send-arrow::after {
	transform: translateY(100%);
	opacity:0;
}

.Contact__send:hover .Contact__send-arrow::before {
	transform: translateY(-100%);
	opacity:0;
}

.Contact__send:hover .Contact__send-arrow::after {
	transform: translateY(0%);
	opacity:1;
}
.Contact__send.-confirmation{
	pointer-events: none;
}
.Contact__send.-confirmation.-ok{
	pointer-events: auto;
}

/*-------------------------------
	Confirmation
-------------------------------*/

.Contact__dl.-confirmation dd {
	padding:0 1.5rem 2.5rem;
	border-bottom:1px solid #BCBCBC;
}

.Confirmation__txt {
	font-size:1.6rem;
	font-weight:400;
	letter-spacing: 5%;
	line-height:1.75;
}

/*-------------------------------
	Contact back btn
-------------------------------*/

.Contact__send.-back {
	margin:3.5rem auto 0;
	width:20rem;
	height:5rem;
	border-radius:2.5rem;
	background:#808080;
	position:relative;
	overflow:hidden;
}

.Contact__send.-back::before {
	background:var(--maincolor);
}


.Contact__send.-back .Contact__send-arrow {
	right:auto;
	left:2.5rem;
	transform:scale(-1,1);
}

/*-------------------------------
	responsive
-------------------------------*/

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


} /* end 1100px */

/*-------------------------------
	ver SP
-------------------------------*/

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

/*-------------------------------
	Contact
-------------------------------*/

.Contact {
	padding:5.5rem 0 9rem;
}

.Contact__inner {
	max-width:100%;
	padding:0 var(--padding-leftright);
}

.Contact__head {
	margin-bottom:6rem;
}

/*-------------------------------
	form head
-------------------------------*/

.form__head {
	display: flex;
	flex-wrap:wrap;
	flex-direction: column;
	margin-bottom:4rem;
}

.form__head-btn {
	margin:0 0 0.8rem 0;
}

/*-------------------------------
	Contact on
-------------------------------*/

/*-------------------------------
	Contact dl	
-------------------------------*/

.Contact__dl dt {
	margin-bottom:0.6rem;
}

.Contact__dl dd:not(:last-child) {
	margin-bottom:4.5rem;
}

.Contact__txt.-tel .wpcf7-text {
	max-width:32rem;
}

.Contact__radio .wpcf7-radio {
	flex-direction: column;
	row-gap: unset;
}

.Contact__radio .wpcf7-list-item {
	width:100%;
	padding-right:0;
}

.Contact__radio .wpcf7-list-item:not(:last-of-type) {
	margin-bottom:0.6rem;
}


/*-------------------------------
	Privacy policy
-------------------------------*/

.Privacypolicy {
	margin:6rem auto 3rem;
}

.Privacypolicy__block:not(:last-of-type) {
	margin-bottom:3rem;
}

.Privacypolicy__block h4 {
	font-weight:500;
	letter-spacing: 5%;
}

.Privacypolicy__block p {
	margin-bottom:0.5em;
}

.Privacypolicy__block .list-dot {
	margin-bottom:0.5em;
}

.Privacypolicy__block .list-dot li {
	margin-bottom:0;
}

/*-------------------------------
	Contact__send
-------------------------------*/

.Contact__send {
	margin:6rem auto 0;
	width:30rem;
	height:6.1rem;
	border-radius:3.2rem;
}

/*-------------------------------
	Confirmation
-------------------------------*/

.Contact__dl.-confirmation dd {
	padding:1rem 1.5rem 2.5rem;
}

.Confirmation__txt {
	font-size:1.6rem;
}

/*-------------------------------
	Contact back btn
-------------------------------*/

.Contact__send.-back {
	margin:3.5rem auto 0;
	width:20rem;
	height:5rem;
	border-radius:2.5rem;
}

} /* end 768px */