@charset 'utf-8';
/*
 * name:contact.css
 * author:sovanda nulo
*/

/* contact
------------------------------------------------ */

#contact { margin-bottom: 120px; }
#contact input[type=text], 
#contact input[type=email],
#contact input[type=tel], 
#contact input[type=reset], 
#contact input[type=submit],
#contact textarea, 
#contact select {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

#contact input[type=text], 
#contact input[type=email], 
#contact input[type=tel],
#contact textarea, 
#contact select {
	font-family: 'NotoSansJP';
    padding: 2px 18px;
    width: 100%;
    height: 36px;
    background: #ffff;
    border: 1px solid #e2e0e1;
    font-size: 1.5rem;
}
#contact select { max-width: 258px; padding-right: 35px; background: url(../../img/share/select-arrow.png) no-repeat right 15px center; background-size: 12px; }
#contact select::-ms-expand { display: none; }
#contact textarea { padding: 5px 18px; width: 100%; height: 145px; resize: none; vertical-align: top; }
#contact table { width: 100%; border-collapse: collapse; border-top: 1px solid #e2e0e1; }
#contact table tr {  }
#contact table tr th,
#contact table tr td { position: relative; font-size: 15px; font-size: 1.5rem; font-weight: normal; text-align: left; vertical-align: top; padding: 20px 0; border-bottom: 1px solid #e2e0e1; -webkit-box-sizing: border-box; box-sizing: border-box; }
#contact table tr th { width: 270px; padding-top: 26px; padding-right: 20px; }
#contact table tr th .t-txt { font-weight: bold; display: block; width: calc( 100% - 60px ); }
#contact table tr th .t-need { position: absolute; top: 25px; right: 20px; width: 50px; line-height: 1.2; padding: 3px 0 5px; background: #ea5550; color: #fff; display: inline-block; text-align: center; -webkit-border-radius: 2px; border-radius: 2px; }
#contact table tr td .ws { max-width: 138px; }
#contact table tr td .wm { max-width: 395px; }
#contact table tr td .wxl { max-width: 590px; }
#contact table tr td .f-error { background: rgba(233, 83, 84, .15); }
#contact table tr td .t-error { font-weight: bold; color: #ea5550; margin-top: 5px; }
#contact table tr td .t-break { display: block; }
#contact table tr td .t-break:not(:last-child) { margin-bottom: 15px; }
#contact table tr td .t-desc {  }
#contact table tr td .t-desc dt { margin-bottom: 5px; }
#contact table tr td .t-desc dd {  }
#contact table tr td .t-lists { margin-top: -15px; }
#contact table tr td .t-lists li { display: inline-block; vertical-align: top; margin-top: 15px; margin-right: 15px; }
#contact table tr td .t-lists li input[type=radio] { position: relative; width: 20px; height: 20px; background: none; border-radius: 50%; border: 1px solid #e2e0e1; -webkit-appearance: none; outline: none; appearance: none; display: inline-block; vertical-align: middle; margin-right: 10px; }
#contact table tr td .t-lists li input[type=radio]:checked:after { content: ''; display: inline-block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 60%; height: 60%; background: #ea5550; -webkit-border-radius: 50%; border-radius: 50%; }
#contact table tr td .t-lists .t-lists--full { display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin-right: 0; }
#contact table tr td .t-lists .t-lists--full label { width: 105px; }
#contact table tr td .t-lists .t-lists--full input { width: calc( 100% - 105px ); }
#contact table tr td .t-lists .t-lists--full_g { display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin-right: 0; }
#contact table tr td .t-lists .t-lists--full_g label { width: 110px; }
#contact table tr td .t-lists .t-lists--full_g input { width: calc( 100% - 110px ); }
#contact table tr td .b-zip { display: block; font-weight: bold; padding: 5px 20px; border: 1px solid #ea5550; color: #ea5550; -webkit-border-radius: 2px; border-radius: 2px; transition: linear .4s; transition: linear .25s; }
#contact table tr td .b-zip:hover { background: #ea5550; color: #fff; }
#contact .contact-confirm table tr td { padding: 26px 0; }

.contact__agree { font-size: 15px; font-size: 1.5rem; letter-spacing: 0.025em; line-height: 1.8; text-align: center; margin-top: 35px; }
.contact__agree--text {  }
.contact__agree--text a { font-weight: bold; display: inline-block; color: #ea5550; transition: linear .25s; }
.contact__agree--text a:hover { text-decoration: underline; }
.contact__agree--check { font-size: 18px; font-size: 1.8rem; font-weight: bold; color: #000; margin-top: 28px; }
.contact__agree--check input[type=checkbox] { position: relative; width: 20px; height: 20px; background: none; border-radius: 50%; border: 1px solid #e2e0e1; -webkit-appearance: none; outline: none; appearance: none; display: inline-block; vertical-align: -3.5px; margin-right: 10px; }
.contact__agree--check input[type=checkbox]:checked:after { content: ''; display: inline-block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 60%; height: 60%; background: #ea5550; -webkit-border-radius: 50%; border-radius: 50%; }
.contact__agree .t-error { font-weight: bold; color: #ea5550; margin-top: 5px; }

.contact__btns { display: flex; justify-content: center; margin-top: 38px; }
.contact__btns--item { position: relative; margin: 0 25px; width: 300px; }
.contact__btns--item button,
.contact__btns--item a { display: block; position: relative; border: solid #ea5550 1px; width: 100%; height: 50px; border-radius: 2px; text-align: center; font-size: 1.6rem; font-weight: bold; color: #fff; transition: linear .3s; -webkit-box-sizing: border-box; box-sizing: border-box; }
.contact__btns--item button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; padding: 14px 0 12px; background: none; cursor: pointer; }
.contact__btns--item a { padding: 12px 0; background: #fff; color: #ea5550; transition: linear .25s; }
.contact__btns--item button:after { content: ''; display: inline-block; margin: 5px 0 0 15px; width: 8px; height: 12px; background: url(../../img/share/btn-next.png) no-repeat center center; background-size: 100%; vertical-align: top; }
.contact__btns--item a > i { display: inline-block; position: relative; margin: 7px 15px 0 0; width: 8px; height: 12px; vertical-align: top; }
.contact__btns--item a > i:before,
.contact__btns--item a > i:after { content: ''; position: absolute; top: 0; left: 0; transition: ease 1s; /*transform: rotate(180deg);*/ width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: 100%; }
.contact__btns--item a > i:before { background-image: url(../../img/share/btn-prev.png); transition: linear 0s; }
.contact__btns--item a:hover { background: #ea5550; color: #fff; }
.contact__btns--item a:hover > i:before { background-image: url(../../img/share/btn-next.png); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.contact__btns--submit { border-radius: 2px; overflow: hidden; }
.contact__btns--submit button { z-index: 3; }
.contact__btns--submit:before,
.contact__btns--submit:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.contact__btns--submit:before { transition: ease 1s; background: #ea5550; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5550', endColorstr='#1d2088',GradientType=0 ); z-index: 2; }
.contact__btns--submit:after { background: #ea5550; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00cffd', endColorstr='#003fcf',GradientType=0 ); opacity: 1; }
.contact__btns--submit button:hover { background: #fff; color: #ea5550; }
.contact__btns--submit button:hover:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); background: url(../../img/share/btn-prev.png) no-repeat center center; background-size: 100%; }
.contact__btns--return a { background: #ea5550; color: #fff; transition: linear .25s; }
.contact__btns--return a:after { content: ''; display: inline-block; margin: 7px 0 0 15px; width: 8px; height: 12px; background: url(../../img/share/btn-next.png) no-repeat center center; background-size: 100%; vertical-align: top; }
.contact__btns--return a:hover { background: #fff; color: #ea5550; }
.contact__btns--return a:hover:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); background: url(../../img/share/btn-prev.png) no-repeat center center; background-size: 100%; }

/* section thanks */
.contact--desc { font-size: 15px; font-size: 1.5rem; line-height: 1.8; letter-spacing: .025em; margin-bottom: 35px; }
.contact--thanks { text-align: center; margin-bottom: 55px; }
.contact--thanks dt { font-family: 'NotoSansJP-Black'; font-size: 30px; font-size: 3rem; line-height: 1.2; letter-spacing: 0.1em; margin-bottom: 55px; }
.contact--thanks dd { font-size: 15px; font-size: 1.5rem; line-height: 1.8; letter-spacing: .025em; }

#ft-contact { display: none; }

/* Responsive
------------------------------------------------ */
@media screen and (max-width: 768px) {
	
	#container { padding-bottom: 0; }

	#contact { margin-bottom: 60px; }
	#contact input[type=text], 
	#contact input[type=email], 
	#contact input[type=tel],
	#contact textarea, 
	#contact select {
	    padding: 2px 15px;
	    height: 36px;
	    font-size: 1.3rem;
	}

	#contact select { max-width: 220px; padding-right: 30px; background: url(../../img/share/select-arrow.png) no-repeat right 10px center; background-size: 11px; }
	#contact textarea { padding: 5px 15px; height: 160px; }
	#contact table tr th,
	#contact table tr td { font-size: 13px; font-size: 1.3rem; padding: 7px 0 20px; display: block; width: 100%; border-bottom: 1px solid #e2e0e1; }
	#contact table tr th { width: 100%; padding-top: 20px; padding-right: 0; padding-bottom: 7px; border-bottom: none; }
	#contact table tr th .t-txt { display: inline-block; width: auto; }
	#contact table tr th .t-need { display: inline-block; position: relative; top: auto; right: auto; width: 40px; padding: 1px 0 2px; margin-left: 12px; }
	#contact table tr td .ws { max-width: 165px; }
	#contact table tr td .wm { max-width: 100%; }
	#contact table tr td .wxl { max-width: 100%; }
	#contact table tr td .t-break:not(:last-child) { margin-bottom: 12px; }
	#contact table tr td .t-lists li { margin-right: 10px; }
	#contact table tr td .t-lists li input[type=radio] { width: 14px; height: 14px; margin-right: 5px; }
	#contact table tr td .t-lists .t-lists--full label { width: 105px; }
	#contact table tr td .t-lists .t-lists--full input { width: calc( 100% - 105px ); }
	#contact table tr td .t-lists .t-lists--full label { width: 110px; }
	#contact table tr td .t-lists .t-lists--full input { width: calc( 100% - 110px ); }
	#contact table tr td .b-zip { font-size: 11px; font-size: 1.1rem; padding: 8px 10px 9px; }
	#contact .contact-confirm table tr td { padding: 7px 0 20px; }

	.contact__agree { font-size: 10px; font-size: 1rem; line-height: 1.6; margin-top: 30px; }
	.contact__agree--check { font-size: 12px; font-size: 1.2rem; margin-top: 18px; }
	.contact__agree--check input[type=checkbox] { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2.5px; }

	.contact__btns { display: block; margin-top: 25px; }
	.contact__btns--item { display: block; margin: 0 auto; width: 295px; }
	.contact__btns--item:not(:last-child) { margin-bottom: 15px; }
	.contact__btns--item button,
	.contact__btns--item a { font-size: 1.3rem; }
	.contact__btns--item button { padding: 15px 0 12px; }
	.contact__btns--item a { padding: 12px 0; }
	.contact__btns--item button:after {  margin: 3px 0 0 12px; width: 6px; height: 10px; }
	.contact__btns--item a > i { margin: 6px 12px 0 0; width: 6px; height: 10px; }
	.contact__btns--return a:after { margin: 6px 0 0 12px; width: 6px; height: 10px; }

	/* section thanks */
	.contact--desc { font-size: 14px; font-size: 1.4rem; line-height: 1.7; margin-bottom: 25px; }
	.contact--thanks { margin-bottom: 25px; }
	.contact--thanks dt { font-size: 15px; font-size: 1.5rem; margin-bottom: 18px; }
	.contact--thanks dd { font-size: 13px; font-size: 1.3rem; line-height: 1.57; text-align: left; }

	#ft-gotop { bottom: 0; }
	#ft-gotop.active { bottom: 26px; }

}