@charset "utf-8";

/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.header{ height:75px; background:#062661; }
.header .logo{ float:left; padding:10px 0 10px 10px; }
.header p{ float:left; color:#fff; margin:18px 0 0 30px; line-height:19px; }
.header p.name{ margin:1px 0 0 30px; width:600px; }
.header .header-btn{ position:absolute; top:23px; right:10px; }
.header .header-btn a img { vertical-align: middle; }

/* main **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.main{ position:relative; height:410px; background:url(../images/top_main_img.jpg) center top / cover no-repeat; }
div.main div.wrap { height:100%; }

/*.main .link{ position:absolute; top:272px; left:104px; }*/
div.main div.link { display:-webkit-box; display:-webkit-flex; display:flex; } /* flex */
div.main div.link { -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; } /* flex:both end */

div.main div.link ul.link-left { width:800px; height:100%; padding-left:84px; padding-bottom:23px; }
div.main div.link ul.link-left { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;}
div.main div.link ul.link-left { -ms-flex-line-pack:end; align-content:flex-end; }
div.main div.link ul.link-left { -webkit-box-align:end; -webkit-align-items:flex-end; -ms-flex-align:end; align-items:flex-end; }
div.main div.link ul.link-left li:first-child { margin-right:30px; }

div.main div.link ul.link-right { width:400px; padding-right:84px; padding-bottom:158px; } /* pb:login(23+115)+20 */
div.main div.link ul.link-right { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;} /* flex */
div.main div.link ul.link-right { -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end; } /* flex:right */
div.main div.link ul.link-right { -ms-flex-line-pack:end; align-content:flex-end; } /* flex:bottom */
div.main div.link ul.link-right li:first-child { margin-bottom:10px; }


/*.main .login{ position:absolute; top:272px; left:786px; width:311px; height:115px; background:#fff url(../images/top_main_login.png) left top / 311px 115px no-repeat; }*/
.main .login{ position:absolute; bottom:23px; right:84px; width:311px; height:115px; background:#fff url(../images/top_main_login.png) left top / 311px 115px no-repeat; }
.main .login .ipt{ padding:39px 0 0 10px; }
.main .login .ipt li{ width:calc(100% - 100px); width:-webkit-calc(100% - 100px); height:32px; border-bottom:solid 1px #4a94df; }
.main .login .ipt li.id{ background:url(../images/top_main_login_id.png) left bottom / 60px 25px no-repeat; }
.main .login .ipt li.pass{ background:url(../images/top_main_login_pass.png) left bottom / 60px 25px no-repeat; }
.main .login .ipt li input{ width:calc(100% - 60px); width:-webkit-calc(100% - 60px); border:none; margin:8px 0 0 60px; padding:2px; }
.main .login .reg{ position:absolute; top:10px; right:10px; }
.main .login .btn{ position:absolute; bottom:2px; right:10px; width:auto; height:auto; padding:0; }

.main .link li , .main .login{ box-shadow:0 2px 4px 0 rgba(22,85,117,0.25); }


/* slider **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.slider .icon-new{ position:absolute; top:-15px; left:calc(50% - 185px); }
.slider-sbt{ color:#fff; font-size:18px; font-weight:bold; text-align:center; margin-bottom:35px; }

.slider{ position:relative; padding:50px 0; }
.slider li{ position:relative; background:#fff; padding:10px; margin:4px 16px; line-height:1.4; height:331px; padding-bottom:0; }
.slider li:before{ display:block; content:""; position:absolute; top:-4px; left:-4px; width:24px; height:24px; }
.slider li:after{ display:block; content:""; position:absolute; bottom:-4px; right:-4px; width:37px; height:37px; z-index:-1; }
.slider li a{ color:#062661; text-decoration:none; }
.slider li p{ border-bottom:solid 1px #e5e5e5; padding:5px 10px; margin-bottom:5px; }
.slider li p{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.slider li p:nth-of-type(1) , .slider li p:nth-of-type(2){ width:calc(100% - 80px); width:-webkit-calc(100% - 80px); word-break:break-all; }
/*.slider li .pic{ margin-top:10px; }*/
/*.slider li .pic img{ max-width:188px; width:100%; height:auto; margin:0 auto; }*/
.slider li .pic{ margin-top:10px; }
.slider li .pic img{ max-width:188px; }
.slider li .mfr-logo{ position:relative; float:right; width:70px; height:60px; background:#eee; }
.slider li .mfr-logo img{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }

.slider li p:nth-of-type(1).noimage, .slider li p:nth-of-type(2).noimage{ width:100%; }

/*used*/
.slider.used{ background:#062661; margin-top:40px; }
.slider.used .slider-sbt{ border-bottom:solid 2px #fff; box-shadow:0 5px #062661 , 0 8px #fff; }
.slider.used li:before{ background:url(../images/deco_blue_top.png) left top / 24px no-repeat; }
.slider.used li:after{ background:url(../images/deco_blue_bottom.png) left top / 37px no-repeat; }

/*new*/
.slider.new{ background:#3163bf; }
.slider.new .slider-sbt{ border-bottom:solid 2px #fff; box-shadow:0 5px #3163bf , 0 8px #fff; }
.slider.new ul{ float:right; width:960px; }
.slider.new li:before{ background:url(../images/deco_lightblue_top.png) left top / 24px no-repeat; }
.slider.new li:after{ background:url(../images/deco_lightblue_bottom.png) left top / 37px no-repeat; }

.slider.new .cm{ position:relative; float:left; width:190px; min-height:282px; background:#fff; padding:10px; margin:4px 0; line-height:1.4; }
.slider.new .cm p{ border-bottom:solid 1px #e5e5e5; padding:5px 10px; margin-bottom:5px; }
.slider.new .cm .movie-frame{ margin-bottom:10px; }

/*arrow*/
.slider .slide-arrow{ position:absolute; width:20px; height:auto; z-index:1; cursor:pointer; }
.slider .prev-arrow{ top:calc(50% - 26px); left:-25px; }
.slider .next-arrow{ top:calc(50% - 26px); right:-25px; }


/* flow **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* adjust.css へ移動 */
/*
.flow ul{ position:relative; display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; margin-left:10px; justify-content:center; }
.flow li{ position:relative; width:231px; color:#062661; text-align:center; padding:57px 10px 10px; margin-left:10px; line-height:1.4; }
.flow li.step3{ margin-left:20px; }

.flow li .head{ position:absolute; top:-2px; left:-2px; }

.flow li .catch{ height:90px; line-height:1.2; padding-top:22px; }
.flow li.step2 .catch{ padding-top:10px; }

.flow .step1{ border:solid 2px #95caff; }
.flow .step2{ border:solid 2px #429efb; }
.flow .step3{ border:solid 2px #1451c4; }
.flow .step4{ border:solid 2px #062661; }

.flow li p{ margin:110px 0 10px; }

.flow .arrow-bar{ width:512px; height:85px; font-weight:bold; text-align:center; line-height:1.4; }
.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; }
.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; }

.flow .icon{ position:absolute; top:225px; right:25px; }
*/

/* point **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* adjust.css へ移動 */
/*
.point{ margin-top:40px; }
.point p{ line-height:1.4; }
.point .pic{ float:right; margin-right:60px; }
.point .list{ float:left; width:650px; background:#fff; padding:20px 30px; margin-left:60px; line-height:1.4; }
.point .list dl:not(:first-child){ margin-top:15px; }
.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){
/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.header{ height:93px; }
.header .logo{ float:none; padding:10px 0; }
.header .logo img{ width:auto; height:35px; }
.header p{ display:none; }
.header p.name{ display:block; position:absolute; top:17px; right:58px; margin:0; width:400px; text-align:right; }
/*
.header .btn{ position:static; height:28px; padding:0; padding-bottom:10px; background:#4a94df; border-radius:0; }
.header .btn a{ display:block; width:100%; background:#4a94df; text-align:center; }
*/
header.header div div.header-btn { position:static; }
header.header div div.header-btn { display:-webkit-box; display:-webkit-flex; display:flex; } /* flex */
header.header div div.header-btn { -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; } /* flex:both end */
header.header div div.header-btn a:first-child{ display:inline-block; width:calc(100% - 42px); width:-webkit-calc(100% - 42px); background:#4a94df; text-align:center; }
header.header div div.header-btn a img { vertical-align:middle; }


/* main **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.main{ height:210px; background-size:800px 245px; }
/*
.main .link{ position:static; display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content:center; padding-top:125px; }
.main .link li{ max-width:180px; width:calc(100% / 2 - 15px); width:-webkit-calc(100% / 2 - 15px); }
.main .link li img{ width:100%; height:auto; }
.main .link li:first-child{ margin-right:15px; }
*/
div.main div.link ul.link-left { width:200px !important; padding:0; padding-bottom:10px; }
div.main div.link ul.link-left li:first-child { margin-bottom:10px !important; }
div.main div.link ul.link-left li{ max-width:200px; margin-right:0 !important; }
div.main div.link ul.link-left li img{ width:100%; height:auto; }

div.main div.link ul.link-right { width:150px !important; padding:0; padding-bottom:10px; }
div.main div.link ul.link-right li:first-child { margin-bottom:5px !important; }
div.main div.link ul.link-right li{ max-width:150px; margin-right:0 !important; }
div.main div.link ul.link-right li img{ width:100%; height:auto; }

/*.main .login{ position:static; width:100%; box-shadow:none; border:solid 2px #062661; margin-top:25px !important; } */
.main .login{ position:static; width:100%; box-shadow:none; border:solid 2px #062661; margin-top:13px !important; }
.main .login .ipt li{ background-size:48px 20px !important; }


/* slider **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.slider li{ height:auto; padding-bottom:10px; }
.slider .icon-new{ width:45px; height:auto; top:-5px; left:20px; }
.slider-sbt{ font-size:16px; }
.slider{ padding:20px 0 30px; }

/*used*/
.slider.used{ margin-top:20px; }

/*new*/
.slider.new ul{ float:none; width:100%; }
.slider.new .cm{ float:none; width:calc(100% - 32px); width:-webkit-calc(100% - 32px); min-height:auto; margin:0 16px 20px; }


/* flow **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* adjust.css へ移動 */
/*
.flow ul{ display:static; margin-left:0; }
.flow li{ width:100%; padding:10px; margin:10px 0 0 !important; }

.flow li .head{ position:static; }
.flow li .head img{ max-width:180px; width:100%; height:auto; }

.flow li .catch{ height:auto; padding-top:15px !important; }

.flow li p{ margin:10px 0; }

.flow .arrow-bar{ width:100%; height:auto; border-radius:5px; margin-top:10px; }
.flow .arrow-bar.light-blue{ position:static; background:#c2e1ff; padding:10px; }
.flow .arrow-bar.blue{ position:static; color:#fff; background:#1451c4; padding:10px; }

.flow .icon{ display:none; }
*/

/* point **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* adjust.css へ移動 */
/*
.point{ margin-top:20px; }
.point .title img{ max-width:300px; width:100%; height:auto; }

.point .pic{ float:none; margin-right:0; text-align:center; }
.point .pic img{ max-width:395px; width:100%; height:auto; }
.point .list{ float:none; width:100%; padding:10px 20px; margin:20px 0 0 0; }
*/
}


/* ★★★ スマホ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 414px){ /* iPhone6Plus */
/* main **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.main{ height:165px; background-size:640px 196px; }

/*.main .link{ padding-top:100px; }*/
/*
.main .link   { width:145px !important; }
.main .link   { width:132px !important; }
.main .link li{ max-width:145px; }
.main .login{ margin-top:15px !important; }
*/
}