@charset "utf-8";
/*-------------------
#under-mvリセット
---------------------*/
#page-flow #under-mv{ min-height: 300px; margin-bottom: 40vh;}
#page-flow #under-mv .inner-wrap { padding: 20vh 3% 50px;}
#page-flow #under-mv .inner-wrap .txt{ max-width: 90%;}
#page-flow #under-mv .inner-wrap .txt span { margin-top: 20px;}
#page-flow #under-mv #page-main{ padding-top: 30px;}

/*===========================
 個別.flow-wrap .flow-point
制作の流れ
===========================*/
#flow {}
#flow .contTtl{ padding-bottom: 10px !important;}
#page-flow #page-main{ padding-top: 100px;}

/**/
.flow-wrap{ display: flex; flex-direction: row; align-items: flex-start; padding: 40px 0 0;}
.flow-wrap h3{ width: 130px; font-size: 12px; font-weight: 300; display: flex; flex-direction: column-reverse; align-items: flex-start; padding:30px 0 ; position: sticky; top: 60px; left: 0; letter-spacing: 2px;}
.flow-wrap h3 span{ font-size: 16px; font-weight: 400;}


/**/
.flow-wrap .flow-point{ flex: 1; display: flex; flex-direction: column; border-bottom: solid 1px #ddd; margin-top: 15px;}
.flow-wrap .flow-point dl{ display: flex; align-items: center; padding: 15px 3%; border-top: solid 1px #ddd;}
.flow-wrap .flow-point dl dt{ width: 30%; min-width: 240px; position: relative; font-size: 14px; font-weight: bold; padding-left: 60px;}
.flow-wrap .flow-point dl dt span{ width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 50%; margin-top: -17px; border-radius: 100%;  font-size: 14px; letter-spacing: 0; color: #fff; background: #444; }
.flow-wrap .flow-point dl dt span.free{ color: #000; background: #ddd; }
.flow-wrap .flow-point dl dd{ display: block; flex: 1;}
.flow-wrap .flow-point dl dd span{ display: block; font-size: 14px; font-weight: 400; color: #555;}

@media screen and (max-width: 800px){
#page-flow #page-main{ padding-top: 0px;}
#flow { padding: 50px 0; border-bottom: solid 1px #aaa;}
#flow .titArea{ padding: 0 4% 30px;}
#flow .titArea h2{ font-size: 20px !important;}
/**/
.flow-wrap{ flex-direction: column; padding: 5px 0 0;background: linear-gradient(to bottom, rgba(210,210,210,1) 1%,rgba(245,245,245,1) 30px);}
.flow-wrap h3{ width: auto; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; padding:8px 20px 3px; position: relative; top: auto; left: auto; margin: 10px 5px 0; border: solid 1px #aaa; border-bottom: none; border-radius: 6px 6px 0 0; background: #fff;}
.flow-wrap h3 span{ font-size: 14px; font-weight: 400; margin-right: 10px;}

/**/
.flow-wrap .flow-point{ margin: 0; border-bottom: none;}
.flow-wrap .flow-point dl{ border-top: solid 1px #aaa; background: #fff;}
}
@media screen and (max-width: 600px){
.flow-wrap .flow-point dl{ padding: 20px 20px 35px; flex-direction: column; position: relative; overflow: hidden;}
.flow-wrap .flow-point dl dt{ width: 100%; min-width: 100%; font-size: 18px; padding-left: 50px; margin-bottom: 15px;}
.flow-wrap .flow-point dl dt span{ width: 60px; height: 60px; left: -30px; top:-30px; margin-top: 0px;}
}