@charset "utf-8";

.wrap .contact {border: 1px solid #cfcfcf; font-size: 18px; display: flex;}
.wrap .contact a {color: #16aab2; display: block; line-height: 94px; text-decoration: none; font-weight: bold; padding: 0 0 0 95px; background-image: url(/img/design/flow/icon-mail.png); background-position: 36px 34px; background-repeat: no-repeat;}
.wrap .contact span{display: block; width: 50%;}
.wrap .contact span + span a {border-left: 1px solid #cfcfcf; background-image: url(/img/design/flow/icon-camera.png); background-position: 36px 28px;}
.wrap .contact a:hover {text-decoration: underline;}
.wrap h2 {margin-bottom: 0;}
.wrap dl {padding-bottom: 37px; min-height: 110px; margin-top: 31px;}
.wrap dl dt{font-family: 'Montserrat'; font-size: 18px; font-weight: bold; letter-spacing: -0.005em; float: left;}
.wrap dl dt b {font-size: 36px; font-weight: bold; display: inline-block;}
.wrap dl dd {zoom:1; overflow: hidden; min-height: 30px; padding-left: 20px;}
.wrap dl dd p {font-size: 16px; line-height: 2; padding: 2px 0 0 0;}
.wrap dl dd ul {margin-top: 15px;}
.wrap dl dd ul li {font-size: 16px; line-height: 28px; padding-left: 26px; background: url(/img/design/flow/icon-blank.png) left 5px no-repeat;}
.wrap dl dd ul li a{text-decoration: none;}
.wrap dl dd ul li a:hover {text-decoration: underline;}
.wrap dl dd ul li + li {margin-top: 0;}
.wrap h2 {line-height: 94px; border: 1px solid #cfcfcf; padding: 0 0 0 95px; position: relative; clear: both;}
.wrap h2::after {content: ''; width: 50px; height: 50px; background-image: url(/img/design/flow/icon-flow.png); background-position: 0 0; background-repeat: no-repeat; position: absolute; left: 28px; top: 50%; margin: -25px 0 0;}
.wrap h2.step3::after {background-position: left -250px;}
.wrap h2.step4::after {background-position: left -50px;}
.wrap h2.step5::after {background-position: left -100px;}
.wrap h2.step6::after {background-position: left -100px;}
.wrap h2.step7::after {background-position: left -150px;}
.wrap h2.step8::after {background-position: left -200px;}
.wrap p.after {background: #efefef; text-align: center; color: #333; font-size: 18px; font-weight: bold; line-height: 94px; border: 1px solid #cfcfcf;}
.wrap p.after strong {font-family: 'Montserrat';}

@media screen and (min-width:641px){
/*
main {border-bottom: none;}
main section.flow {padding-bottom: 0;}
main section::after{display: none;}
*/
}

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

.wrap .contact {font-size:3.75vw; display: block;}
.wrap .contact a {width: auto; line-height: 14.6875vw; padding: 0 14.6875vw 0 14.6875vw; background-position: 5.46875vw center; background-size: 5.625vw auto; display: block;}
.wrap .contact span + span a {border-left:none; background-position: 5.46875vw center;}
.wrap .contact span {display: block; width: 100%;}
.wrap .contact span + span {border-top: 1px solid #cfcfcf;}
.wrap dl {padding-bottom: 10vw; min-height: 17.1875vw; margin-top: 4.6875vw;}
.wrap dl dt{font-size: 3.75vw;}
.wrap dl dt b {font-size: 7.8125vw;}
.wrap dl dd {min-height: 7.8125vw; padding-left: 3.125vw;}
.wrap dl dd p {font-size:  3.75vw; padding: 0.1vw 0 0 0;}
.wrap dl dd ul {margin-top: 2.34375vw;}
.wrap dl dd ul li {font-size:  3.75vw; line-height: 1.7; padding-left: 4.6875vw; background: url(/img/design/flow/icon-blank.png) left 1.5vw no-repeat; background-size: 3.125vw auto;}
.wrap h2 {line-height: 14.6875vw; padding: 0 0 0 14.6875vw;}
.wrap h2::after {width: 7.8125vw; height: 7.8125vw; left: 4.6875vw; top: 50%; margin: -3.90625vw 0 0; background-size: 7.8125vw auto;}
.wrap h2.step3::after {background-position: left -39.0625vw;}
.wrap h2.step4::after {background-position: left -7.8125vw;}
.wrap h2.step5::after {background-position: left -15.625vw;}
.wrap h2.step6::after {background-position: left -15.625vw;}
.wrap h2.step7::after {background-position: left -23.4375vw;}
.wrap h2.step8::after {background-position: left -31.25vw;}

.wrap p.after {font-size: 3.75vw; line-height: 1.5; padding: 5vw 0;}
.wrap p.after strong {display: block;}

}