@charset "utf-8";

/* flow **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
section.flow ul{ position:relative; display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; margin-left:10px; /*justify-content:center;*/ }
section.flow li{ position:relative; width:231px; color:#062661; text-align:center; padding:57px 10px 10px; margin-left:10px; line-height:1.4; }
section.flow li.step3{ margin-left:20px; }
section.flow li .head{ position:absolute; top:-2px; left:-2px; }
section.flow li .catch{ height:90px; line-height:1.2; padding-top:22px; }
section.flow li.step2 .catch{ padding-top:10px; }
section.flow .step1{ border:solid 2px #95caff; }
section.flow .step2{ border:solid 2px #429efb; }
section.flow .step3{ border:solid 2px #1451c4; }
section.flow .step4{ border:solid 2px #062661; }
section.flow li p{ margin:110px 0 10px; }
section.flow .arrow-bar{ width:512px; height:85px; font-weight:bold; text-align:center; line-height:1.4; }
section.flow .arrow-bar.light-blue{ position:absolute; top:220px; left:35px; color:#062661; background:url(../images/top_step_lightblue.png) left top / 512px 85px no-repeat; padding-top:20px; z-index:2; }
section.flow .arrow-bar.blue{ position:absolute; top:220px; left:527px; color:#fff; background:url(../images/top_step_blue.png) left top / 512px 85px no-repeat; padding-top:30px; z-index:1; }
section.flow .icon{ position:absolute; top:225px; right:25px; }

@media only screen and (max-width: 768px){
section.flow ul{ display:static; margin-left:0; }
section.flow li{ width:100%; padding:10px; margin:10px 0 0 !important; }
section.flow li .head{ position:static; }
section.flow li .head img{ max-width:180px; width:100%; height:auto; }
section.flow li .catch{ height:auto; padding-top:15px !important; }
section.flow li p{ margin:10px 0; }
section.flow .arrow-bar{ width:100%; height:auto; border-radius:5px; margin-top:10px; }
section.flow .arrow-bar.light-blue{ position:static; background:#c2e1ff; padding:10px; }
section.flow .arrow-bar.blue{ position:static; color:#fff; background:#1451c4; padding:10px; }
section.flow .icon{ display:none; }
}

/* point **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/*section.point{ margin-top:40px; }*/
section.point{ padding-top:40px; background:#fff; }
section.point p{ line-height:1.4; }
section.point .pic{ float:right; margin-right:60px; }
section.point .list{ float:left; width:650px; background:#fff; padding:20px 30px; margin-left:60px; line-height:1.4; }
section.point .list dl:not(:first-child){ margin-top:15px; }
section.point .list dt{ background:url(../images/top_point_list.png) left 3px / 33px 30px no-repeat; padding:9px 0 5px 45px; margin-bottom:5px; }

@media only screen and (max-width: 768px){
section.point{ margin-top:20px; }
section.point .title img{ max-width:300px; width:100%; height:auto; }
section.point .pic{ float:none; margin-right:0; text-align:center; }
section.point .pic img{ max-width:395px; width:100%; height:auto; }
section.point .list{ float:none; width:100%; padding:10px 20px; margin:20px 0 0 0; }
}