﻿.contact-sec {text-align:left;}
.contact-sec .sec {text-align:left;}
.contact-sec form {display:block;}
.contact-sec .form {max-width:700px; margin:50px auto 0 auto;}
.contact-sec .form > dl {padding:20px 0; display:flex;}
.contact-sec .form > dl > dt {width:10em;}
.contact-sec .form > dl > dd {box-sizing:border-box; flex:1;}
.contact-sec .form .clm {margin:-5px -1.0em 0 0; display:flex; flex-wrap:wrap;}
.contact-sec .form .clm > div {padding:5px 1.0em 0 0; display:flex; align-items:center;}
.contact-sec .form .clm > div > div + div {padding-left:0.2em;}
.contact-sec .form .address-clm > div {margin:10px 0 0 0;}
.contact-sec .form .address-clm > div:first-of-type {width:8em; margin-top:0;}
.contact-sec .form input[type=text],
.contact-sec .form input[type=password],
.contact-sec .form select,
.contact-sec .form textarea {width:100%; font-size:1.6rem; padding:10px; background:#fff; border-radius:3px; border:solid 1px #666; box-sizing:border-box;}
.contact-sec .form select {width:auto;}
.contact-sec .form textarea {height:6em;}
.contact-sec .form input.error,
.contact-sec .form select.error,
.contact-sec .form textarea.error {background-color:#fee;}
.contact-sec .btns {text-align:center; margin:30px 0 0 0; display:flex; flex-wrap:wrap; justify-content:center;}
.contact-sec .btns > li {padding:5px 10px;}
.contact-sec .btns button {height:40px; white-space:nowrap; letter-spacing:0.1em; text-align:center; text-decoration:none; padding:0 30px; background-color:#ccc; border:none; border-radius:5px; display:flex; justify-content:center; align-items:center; transition:opacity 0.3s ease;}
.contact-sec .btns button:hover {opacity:0.7;}
.contact-sec .error-txt {color:#c00; margin:5px 0 0 0;}
.contact-sec input.inputCheck {display:none;}

.contact-sec .flow {margin:30px -20px 0 -20px; display:flex; flex-wrap:wrap;}
.contact-sec .flow > div {width:25%; padding:0 20px 110px 20px; box-sizing:border-box; position:relative;}
.contact-sec .flow > div::before {content:''; width:30px; height:30px; margin:-15px 0 0 -15px; background:url(../img/entry/flow_arrow.png) no-repeat center center; background-size:auto 100%; display:block; position:absolute; top:50%; left:0;}
.contact-sec .flow > div:first-of-type::before {display:none;}
.contact-sec .flow .ctx {text-align:left;}
.contact-sec .flow .ctx dt {font-size:1.8rem; font-weight:600;}
.contact-sec .flow .ctx dd {font-size:1.4rem; margin:0.5em 0 0 0;}
.contact-sec .flow .img {width:100%; text-align:center; position:absolute; bottom:0; left:0;}
.contact-sec .flow .img img {max-width:140px; width:100%;}

.contact-sec .fix-content p {text-align:left; margin:1.0em 0 0 0;}
.contact-sec .fix-content .txt1 {text-align:center; margin:1.0em 0 0 0; border:solid 1px #333; border-radius:3px;}
.contact-sec .fix-content .txt1 dt {color:#fff; background-color:#333; border-bottom:solid 1px #333;}
.contact-sec .fix-content .txt1 dd {font-size:2.4rem; font-weight:bold; letter-spacing:0.2em;}

.contact-fix-sec {text-align:left;}
.contact-fix-sec .sec {max-width:700px;}
.contact-fix-sec p {text-align:left; margin:1em 0 0 0;}


@media screen and (max-width:767px){
	.contact-sec .form > dl {display:block;}
	.contact-sec .form > dl > dt {width:auto;}

	.contact-sec .flow {margin:0;}
	.contact-sec .flow > div {width:100%; padding:20px 0 20px 100px;}
	.contact-sec .flow > div:last-of-type {padding-bottom:0;}
	.contact-sec .flow > div::before {width:30px; height:30px; margin:-10px 0 0 0; top:0; left:120px; transform:rotate(90deg);}
	.contact-sec .flow .img {width:100px; position:absolute; top:20px; bottom:auto; left:0;}
	.contact-sec .flow .img img {max-width:100px; width:100%;}
}

