@charset "utf-8";

/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.header{ height:75px; background:#323e4b; border-bottom:solid 2px #4fc6d5; }
.header .logo{ float:left; padding:10px 0 10px 10px; }
.header .txt{ float:left; color:#fff; margin:0 0 0 30px; height:73px; line-height:19px; display:-webkit-flex; display:flex; align-items:center; }
.header .txt p{ margin-bottom:0; }
.header .header-btn{ position:absolute; top:23px; right:10px; }
.header .header-btn a img{ vertical-align:middle; margin-left:5px; }

/* sp gnav */
.sp-gnav{ top:91px; height:calc(100% - 91px); -webkit-height:calc(100% - 91px); }


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

.main .link{ display:table; }
.main .link-left , .main .link-right{ display:table-cell; vertical-align:bottom; }

.main .link-left{ width:805px; padding-left:84px; padding-bottom:23px; }
.main .link-left li{ float:left; }
.main .link-left li:first-child{ margin-right:30px; }

.main .link-right{ width:395px; padding-right:84px; padding-bottom:158px; text-align:right; }
.main .link-right li:last-child{ margin-top:10px; }

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


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


/* slider **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.slider .icon-new{ position:absolute; top:-15px; left:calc(50% - 120px); }
.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; }
.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:#333; text-decoration:none; }
.slider li p{ word-break:break-all; border-bottom:solid 1px #e5e5e5; padding:5px 10px; margin:0 0 5px; }
.slider li .mark{ position:absolute; top:10px; right:10px; width:56px; height:35px; }
.slider li .plan{ width:calc(100% - 66px); width:-webkit-calc(100% - 66px); font-size:12px; text-align:center; color:#fff; background:#6b7682; padding:2px; margin:8px 0 5px; }

.slider li .pic{ /*display:table;*/ width:100%; margin:10px 0 0; /*table-layout:fixed;*/ background:#f7f7f7; }
.slider li .pic div{ /*display:table-cell;*/ width:188px; height:141px; /*text-align:center; vertical-align:middle;*/ display:-webkit-flex; display:flex; align-items:center; justify-content:center; }
.slider li .pic div img{ width:auto; height:auto; max-width:188px; max-height:141px; }

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

/*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 **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.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:#333; 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:170px; line-height:1.2; padding-top:10px; }
.flow li.step4 .catch{ padding-top:30px; }

.flow .step1{ border:solid 2px #59d5e4; }
.flow .step2{ border:solid 2px #40c8d8; }
.flow .step3{ border:solid 2px #39b6c5; }
.flow .step4{ border:solid 2px #33a4b1; }

/*.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-green{ position:absolute; top:205px; left:35px; color:#39b6c5; background:url(../images/top_step_lightgreen.png) left top / 512px 85px no-repeat; padding-top:20px; z-index:2; }
.flow .arrow-bar.green{ position:absolute; top:205px; left:527px; color:#fff; background:url(../images/top_step_green.png) left top / 512px 85px no-repeat; padding-top:30px; z-index:1; }

.flow .icon{ position:absolute; top:170px; right:25px; }


/* point **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.point{ padding:30px 0; background:#fff; }
.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 .txt{ margin-left:0; }
.header .txt p{ display:none; }
.header .txt p.name{ display:block; position:absolute; top:17px; right:58px; margin:0; width:400px; text-align:right; }
.header .header-btn{ position:static; }
.header .header-btn{ display:-webkit-box; display:-webkit-flex; display:flex; } /* flex */
.header .header-btn{ -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; } /* flex:both end */
.header .header-btn a:first-child{ display:inline-block; width:calc(100% - 42px); width:-webkit-calc(100% - 42px); background:#ffdd56; text-align:center; }
.header .header-btn a img{ vertical-align:middle; }


/* main **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.main{ height:210px; background-size:800px 245px; }

.main .link{ height:210px; position:absolute; }

.main .link-left{ width:200px; padding-left:0; padding-bottom:10px; }
.main .link-left li{ float:none; }
.main .link-left li:first-child{ margin-right:0; }
.main .link-left li:last-child{ margin-top:10px; }
.main .link-left li img{ width:200px; height:auto; }

.main .link-right{ width:150px; padding-right:0; padding-bottom:10px; }
.main .link-right li:last-child{ margin-top:10px; }
.main .link-right li img{ width:150px; height:auto; }


/* login **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.login{ position:static; width:100%; box-shadow:none; border:solid 2px #6b7682; margin-top:10px !important; }
.login .btn{ bottom:10px; right:20px; }


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

.slider li .pic div{ width:100%; height:141px; }
.slider li .pic div img{ width:auto; height:auto; max-width:100%; max-height:100%; }

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


/* flow **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.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-green{ position:static; background:#cdf3f8; padding:10px; }
.flow .arrow-bar.green{ position:static; color:#fff; background:#4fc6d5; padding:10px; }

.flow .icon{ display:none; }


/* point **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.point{ padding:20px 0; }
.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{ height:165px; }

.main .link-left{ width:140px; }
.main .link-left li:last-child{ margin-top:5px; }
.main .link-left li img{ width:140px; height:auto; }

.main .link-right{ width:130px; }
.main .link-right li:last-child{ margin-top:5px; }
.main .link-right li img{ width:130px; height:auto; }

}