/*contact-mv*/
.contact-mv {
    position: relative;
    width: 100%;
    height: 360px;
    margin-bottom: 70px;
    background-image: url('../images/contact/img_banner_contact.webp');
    background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	content: '';
	z-index: 0;
    padding-top: 120px;
    background-color: #F7F6F6;
}
.contact-mv .inner {
    width: 100%;
}
.contact-mv .title-area {
    position: relative;
    width: 352px;
    height: 310px;
    margin-left: 80px;
    padding: 99px 20px;
    background-color: #FFFFFFB2;
    box-shadow: 16px 16px 0px 0px #0000000F;
}
.contact-mv .title-area .w-312 {
    top: 170px;
    left: 20px;
}
/*  768px  */
@media screen and (max-width: 768px) {
    .contact-mv {
        height: 102.4vw;
        margin-bottom: 17.92vw;
        background-image: url('../images/contact/img_banner_contact_sp.webp');
        padding-top: 40.96vw;
    }
    .contact-mv .title-area {
        position: relative;
        width: 90.112vw;
        height: 79.36vw;
        margin: 0 auto;
        padding: 25.34vw 5.12vw;
        background-color: #FFFFFFB2;
        box-shadow: 4vw 4vw 0 0 #0000000F;
    }
    .contact-mv .title-area .w-312 {
        top: 43.52vw;
        left: 5.12vw;
    }
}
/* class=contact
--------------*/
.contact {
	width: 100%;
	padding: 80px 240px 240px;
}
.contact .inner {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}
.contact .inner p {
	font-family: "Zen Kaku Gothic New", serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 2em;
	letter-spacing: 0.14px;
	color: #4B4B4B;
	margin-bottom: 20px;
}
.contact .inner h4 {
	font-family: "Zen Kaku Gothic New", serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.5em;
	letter-spacing: 0.2px;
	text-align: center;
	color: #4B4B4B;
	margin-bottom: 20px;
}
.contact-form dl {
	width: 100%;
	padding: 16px 0;
	border-bottom: 1px solid #EAEAEA;
}
.contact-form dl dt {
	width: 180px;
	font-family: "Zen Kaku Gothic New", serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 2em;
	letter-spacing: 0.14px;
	color: #ADADAD;
}
.contact-form dl dt span {
	font-family: "Zen Kaku Gothic New", serif;
	font-weight: 400;
	font-size: 11px;
	line-height: 1.8em;
	letter-spacing: 0.11px;
	color: #F07896;
	border-radius: 4px;
	padding: 0 4px 2px;
	border: 1px solid #F07896;
	margin-left: 8px;
}
.contact-form dl dd {
	width: 600px;
}

/*input design start*/
.contact-form dl dd input[type='text'],
.contact-form dl dd input[type='email'] {
    padding: 8px 34px 8px 12px;
    position: relative;
    width: 100%;
}
.input-container {
    position: relative;
    width: 100%;
}
.delete-icon {
    position: absolute;
    top: 50%;
    right: 12px;
	width: 18px;
	height: 18px;
    transform: translateY(-50%);
	background-image: url('../images/icon/icon_delete.svg');
    background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	content: '';
    cursor: pointer;
    display: block;
}

.contact-form dl dd input[type='text']:not(:placeholder-shown) + .delete-icon,
.contact-form dl dd input[type='email']:not(:placeholder-shown) + .delete-icon {
    display: block;
}
.contact-form dl dd input[type='text'].has-content + .delete-icon,
.contact-form dl dd input[type='email'].has-content + .delete-icon {
    display: block;
}
/*input design end*/


.contact-form .bottom {
	margin-top: 60px;
}
.contact-form .btn-circle a {
	width: 180px;
	padding: 10px 25px 10px 51px;
}
.contact-form .btn-circle a::before {
	left: 25px;
}
.contact-form .btn-submit a {
	width: 180px;
	padding: 10px 51px 10px 25px;
}
.contact-form .btn-submit a::before {
	right: 25px;
}
/*  768px  */
@media screen and (max-width: 768px) {
	.contact {
		padding: 20.48vw 3.84vw 61.44vw;
	}
	.contact .inner {
		width: 100%;
		max-width: 204.8vw;
	}
	.contact .inner p {
		font-size: 3.58vw;
		letter-spacing: 0.035vw;
		margin-bottom: 5.12vw;
	}
	.contact .inner h4 {
		font-size: 5.12vw;
		letter-spacing: 0.05vw;
		margin-bottom: 5.12vw;
	}
	.contact-form dl {
		padding: 4vw 0;
		border-bottom: 0.256vw solid #EAEAEA;
	}
	.contact-form dl dt {
		width: 46.08vw;
		font-size: 3.58vw;
		letter-spacing: 0.035vw;
	}
	.contact-form dl dt span {
		font-size: 2.8vw;
		letter-spacing: 0.028vw;
		border-radius: 4px;
		padding: 0 1.02vw 0.512vw;
		border: 0.256vw solid #F07896;
		margin-left: 2.048vw;
	}
	.contact-form dl dd {
		width: 100%;
		margin-top: 0.512vw;
	}
	/*input design start*/
	.contact-form dl dd input[type='text'],
	.contact-form dl dd input[type='email'] {
		padding: 2.048vw 8.7vw 2.048vw 3.07vw;
		width: 100%;
	}
	.input-container {
		width: 100%;
	}
	.delete-icon {
		right: 3.07vw;
		width: 4.6vw;
		height: 4.6vw;
	}
	
}
/*confirm*/
.confirm {
	padding: 160px 240px 240px;
}
.confirm dl dd {
	font-family: "Zen Kaku Gothic New", serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 2em;
	letter-spacing: 0.14px;	
	color: #4B4B4B;
}
/*complete*/
.complete {
	padding: 160px 240px 240px;
}
.complete .inner p {
	font-family: "Zen Kaku Gothic New", serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 2em;
	letter-spacing: 0.14px;
	text-align: center;
	color: #4B4B4B;
}

.complete .bottom-back {
	width: 42px;
	margin: 0 auto;
}
.complete .bottom-back a {
	width: 100%;
	font-family: "Zen Kaku Gothic New", serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 2em;
	letter-spacing: 0.14px;
	color: #F07896;
}
.complete .bottom-back a:hover {
	color: #78C0F0;
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="email"]:hover,
textarea:hover {
	box-shadow: 0 4px 0 0 #DADADA;
}

/*  768px  */
@media screen and (max-width: 768px) {
	/*confirm*/
	.confirm {
		padding: 40.96vw 3.84vw 61.44vw;
	}
	.confirm dl dd {
		font-family: "Zen Kaku Gothic New", serif;
		font-weight: 400;
		font-size: 3.58vw;
		letter-spacing: 0.035vw;	
	}
	.confirm .inner .contact-form .bottom {
		width: 100%;
	}

	.contact-form .bottom {
		margin-top: 15.36vw;
		display: block;
	}
	.contact-form .btn-submit a {
		width: 46.08vw;
		padding: 2.56vw 13.05vw 2.56vw 6.4vw;
	}
	.contact-form .btn-submit a::before {
		right: 6.4vw;
	}
	.contact-form .bottom .btn-circle,
	.contact-form .bottom .btn-submit {
		text-align: center;
	}
	/*complete*/
	.complete {
		padding: 40.96vw 15px 61.44vw;
	}
	.complete .inner p {
		font-size: 3.58vw;
		letter-spacing: 0.035vw;
	}
	.complete .bottom-back {
		width: 10.75vw;
	}
	.complete .bottom-back a {
		width: 100%;
		font-size: 3.584vw;
		letter-spacing: 0.035vw;
	}
}

/*Error*/
.error {
	color: #F07896 !important;
}
.contact .inner .contact-form dd.error input[type='text'],
.contact .inner .contact-form dd.error input[type='email'],
.contact .inner .contact-form dd.error textarea {
    border-color: #F07896; 
}
.contact .inner .contact-form dd.error input[type='text']:hover,
.contact .inner .contact-form dd.error input[type='email']:hover,
.contact .inner .contact-form dd.error textarea:hover {
    box-shadow: none;
}

.contact .inner .contact-form dd.error input[type='text']::placeholder,
.contact .inner .contact-form dd.error input[type='email']::placeholder,
.contact .inner .contact-form dd.error textarea::placeholder {
    color: #F07896;
}