@charset "utf-8";

/*ベース*/
body{
font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
overflow-x:hidden;
font-size:100%;
color:#0e0e0e;
margin:0;
padding:0;}

.sp{
display:none;}

h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;}

img{
border:0;}

a{text-decoration:none;outline:0;}
a:hover{text-decoration:underline;}
a:link,a:active,a:visited{color:#323232;}

*:focus{
outline:none;}

.red{
color:#C33;}

.underl{
color:#000;
background-color:#F2E267;}

.fade-up{
transition:opacity 1s;
-moz-transition:opacity 1s;
-webkit-transition:opacity 1s;
-o-transition:opacity 1s;
transition:transform 1s;
-moz-transition:transform 1s;
-webkit-transition:transform 1s;
-o-transition:transform 1s;}

/*エフェクト*/
@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}}

@keyframes fadeInUp{ 
0%{opacity:0;transform:translateY(60px);}
100%{opacity:1;transform:translateY(0);}}

@keyframes fadeInRight{ 
0%{opacity:0;transform:translateX(20px);}
100%{opacity:1;transform:translateX(0);}}

.sa{
opacity:0;
transition:all 1.5s ease;}

.sa.show{
opacity:1;
transform:none;}

.sa--up{
transform:translate(0,14px);}

/*レイアウト*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
display:block;}

.clearfix:after{
content: "";
clear:both;
display:block;}

#contents a img{
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;}

#contents a:hover img{
opacity:0.6;
filter:alpha(opacity=60);}

/*モーダル*/
#modal01{
display:none;}

#modal02{
display:none;}

#modal03{
display:none;}

.inline_top{
padding-top:40px;}

/*ヘッダー*/
#head{
background-color:#000;
height:80px;
position:relative;
z-index:1;
width:100%;}

#head a{color:#fff;}
#head a:hover{color:#000;}

#head a img{
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;}

#head a:hover img{
opacity:0.6;
filter:alpha(opacity=60);}

#head #logo h2{
display:none;}

#menu_box{
width:1200px;
position:relative;
margin:0 auto;}

#logo{
position:absolute;
width:363px;
left:0;
top:21px;}

#logo h2{
display:none;}

/*成約特典バナー*/
.left_fix{
opacity:0;
transition:all 0.65s;}

.left_fix.action{
opacity:1;
transition:all 0.65s;}

.overlay{
content:"";
display:block;
width:0;
height:0;
position:absolute;
top:0;
left:0;
z-index:10;
opacity:0;
transition:opacity .5s;}

.overlay.open{
width:100%;
height:100%;
opacity:1;}

.menu-trigger{
background-image:url(../img/trigger_off.png);
background-repeat:no-repeat;
background-position:top;
background-size:40px;
display:inline-block;
width:40px;
height:200px;
vertical-align:middle;
cursor:pointer;
position:fixed;
top:10vh;
left:0;
z-index:100;
transform:translateX(0);
transition:transform .5s;}

.menu-trigger.active{
transform:translateX(200px);
background-image:url(../img/trigger_close.png);
background-repeat:no-repeat;
background-position:top;
background-size:40px;}

nav{
background-image:url(../img/trigger_on.png);
background-repeat:no-repeat;
background-position:top;
background-size:200px;
width:200px;
height:100%;
padding-top:100px;
position:fixed;
top:10vh;
left:0;
z-index:11;
transform:translate(-200px);
transition:all .5s;}

nav.open{
transform:translateZ(0);}

/*ヒーロー*/
#top_slider{
background-image:url(../img/top_slider.png);
background-repeat:no-repeat;
background-position:top center;
background-size:2180px;}

#top_slider h2{
width:614px;
margin:0 auto;
padding-top:76px;}

#top_slider_hm{
width:1060px;
margin:0 auto;}

.hm01{
width:192px;
margin:-320px 0 0 102px;
animation:fadeInUp 0.6s both 2s ease;}

.hm02{
width:228px;
margin:-570px 0 0 764px;
animation:fadeInUp 0.6s both 1.8s ease;}

.hm03{
width:158px;
margin:-560px 0 0 0;
animation:fadeInUp 0.6s both 1.6s ease;}

.hm04{
width:94px;
margin:-320px 0 0 970px;
animation:fadeInUp 0.6s both 1.4s ease;}

.hm05{
width:76px;
margin:-246px 0 0 280px;
animation:fadeInUp 0.6s both 1.2s ease;}

.hm06{
width:121px;
margin:-230px 0 0 720px;
animation:fadeInUp 0.6s both 1s ease;}

.hm07{
width:464px;
margin:70px 0 0 705px;
animation:fadeInRight 1s both 2.6s;}

.hm08{
width:300px;
margin:-344px 0 0 0;
animation:fadeInUp 0.4s both 3.2s;}

#top_slider_log h3{
width:847px;
margin:-34px auto 36px auto;
position:relative;
z-index:1;
animation:fadeIn 1s both 4s ease;}

#top_slider_log h4{
width:663px;
margin:0 auto 70px auto;
animation:fadeIn 1s both 4.5s ease;}

#top_br img{
vertical-align:bottom;}

/*徹底比較*/
#top_vs{
background:linear-gradient(90deg,#f0e63c 0%,#f0e63c 50%,#fff 50%,#fff 100%);
border-bottom:20px solid #000;}

#top_vs h3{
width:648px;
margin:0 auto;
padding:70px 0 60px 0;}

#top_vs h4{
width:875px;
margin:0 auto;}

#top_vs h5{
width:821px;
margin:16px auto 0 auto;}

.top_vs_cont01{
background-image:url(../img/top_vs_cont01.png);
background-repeat:no-repeat;
background-position:top center;
background-size:1005px;
width:1005px;
height:655px;
margin:0 auto;
padding-bottom:100px;}

.top_vs_cont01 h5{
display:none;}

.top_vs_cont01_l{
float:left;
width:426px;
margin:160px 0 0 40px;}

.top_vs_cont01_r{
float:right;
width:400px;
margin:160px 50px 0 0;}

.top_vs_cont02{
background-image:url(../img/top_vs_cont02.png);
background-repeat:no-repeat;
background-position:top center;
background-size:1005px;
width:1005px;
height:655px;
margin:0 auto;
padding-bottom:100px;}

.top_vs_cont02 h5{
display:none;}

.top_vs_cont02_l{
float:left;
width:432px;
margin:160px 0 0 36px;}

.top_vs_cont02_r{
float:right;
width:367px;
margin:160px 74px 0 0;}

.top_vs_cont03{
background-image:url(../img/top_vs_cont03.png);
background-repeat:no-repeat;
background-position:top center;
background-size:1005px;
width:1005px;
height:655px;
margin:0 auto;
padding-bottom:100px;}

.top_vs_cont03 h5{
display:none;}

.top_vs_cont03_l{
float:left;
width:368px;
margin:155px 0 0 68px;}

.top_vs_cont03_r{
float:right;
width:412px;
margin:155px 50px 0 0;}

.top_vs_cont04{
background-image:url(../img/top_vs_cont04.png);
background-repeat:no-repeat;
background-position:top center;
background-size:1005px;
width:1005px;
height:655px;
margin:0 auto;
padding-bottom:100px;}

.top_vs_cont04 h5{
display:none;}

.top_vs_cont04_l{
float:left;
width:337px;
margin:160px 0 0 84px;}

.top_vs_cont04_r{
float:right;
width:304px;
margin:160px 90px 0 0;}

.top_vs_cont05{
background-image:url(../img/top_vs_cont05.png);
background-repeat:no-repeat;
background-position:top center;
background-size:1005px;
width:1005px;
height:655px;
margin:0 auto;
padding-bottom:100px;}

.top_vs_cont05 h5{
display:none;}

.top_vs_cont05_l{
float:left;
width:412px;
margin:160px 0 0 46px;}

.top_vs_cont05_r{
float:right;
width:320px;
margin:160px 90px 0 0;}

.top_vs_cont06{
background-image:url(../img/top_vs_cont06.png);
background-repeat:no-repeat;
background-position:top center;
background-size:1005px;
width:1005px;
height:655px;
margin:0 auto;
padding-bottom:50px;}

.top_vs_cont06 h5{
display:none;}

.top_vs_cont06_l{
float:left;
width:403px;
margin:160px 0 0 54px;}

.top_vs_cont06_r{
float:right;
width:377px;
margin:160px 70px 0 0;}

.top_vs_btm{
background-image:url(../img/top_vs_btm_bg.png);
background-repeat:no-repeat;
background-position:top left;
background-size:1005px;
width:1055px;
height:500px;
margin:0 auto;
padding-bottom:50px;}

.top_vs_btm h3 img{
width:561px;
margin:0 auto;
padding-left:43px;}

.top_vs_btm h4{
text-align:center;}

.top_vs_btm h4 img{
width:500px;
margin-left:5px;}

/*お支払い方法*/
#top_payment{
border-bottom:20px solid #000;
padding-bottom:60px;}

#top_payment h3{
width:683px;
margin:0 auto;
padding-top:90px;}

#top_payment h4{
width:806px;
margin:-90px auto 0 auto;
padding-left:200px;}

#top_payment h4 img{
vertical-align:bottom;}

#top_payment h5{
width:1005px;
margin:-78px auto 0 auto;}

/*お申し込みフロー*/
#top_flow{
background-color:#f0e63c;
border-bottom:20px solid #000;
padding-bottom:80px;}

#top_flow h3{
width:513px;
margin:0 auto;
padding-top:90px;}

#top_flow h4{
width:345px;
margin:-270px auto 0 auto;
padding-left:1000px;}

#top_flow h5{
width:1005px;
margin:0 auto;}

/*VISION*/
#top_vision{
background-color:#f7f29d;
border-bottom:20px solid #000;
padding-bottom:230px;}

#top_vision h3{
width:1000px;
margin:0 auto;
padding-top:70px;}

#top_vision h4{
width:838px;
margin:-574px auto 0 auto;}

#top_vision h5{
width:678px;
margin:-310px auto 20px auto;}

#top_vision h6{
width:580px;
margin:0 auto;}

/*ラインナップ*/
#lineup{
text-align:center;
margin-top:15px;}

#lineup h3{
width:853px;
margin:100px auto 0 auto;}

#lineup h4{
background-color:#fffcd6;
padding-top:14px;}

.container{
position:relative;
margin:30px auto 80px auto;
max-width:1116px;}

.swiper-container{
text-align:center;
cursor:grab;}

.swiper-container:active{
cursor:grabbing;}

.swiper-container .swiper-slide img{
max-width:100%;
width:100%;
height:auto;}
		
#thumbs01{
height:10%;
box-sizing:border-box;
padding:10px 0;
width:850px;
margin-top:50px;}

#thumbs01 .swiper-slide{
width:82px;
height:auto;
opacity:0.3;
cursor:grab;}

#thumbs01 .swiper-slide:active{
cursor:grabbing;}

#thumbs01 .swiper-slide-active{
opacity:1;}

#thumbs02{
height:10%;
box-sizing:border-box;
padding:10px 0;
width:850px;
margin-top:50px;}

#thumbs02 .swiper-slide{
width:82px;
height:auto;
opacity:0.3;
cursor:grab;}

#thumbs02 .swiper-slide:active{
cursor:grabbing;}

#thumbs02 .swiper-slide-active{
opacity:1;}

#thumbs03{
height:10%;
box-sizing:border-box;
padding:10px 0;
width:850px;
margin-top:50px;}

#thumbs03 .swiper-slide{
width:82px;
height:auto;
opacity:0.3;
cursor:grab;}

#thumbs03 .swiper-slide:active{
cursor:grabbing;}

#thumbs03 .swiper-slide-active{
opacity:1;}
		
.swiper-blind-left,
.swiper-blind-right{
position:absolute;
width:11.55%;
height:100%;
display:block;
top:0;
background:rgba(255,255,255,1);
z-index:5;}

.swiper-blind-left{
left:0;}

.swiper-blind-right{
right:0;}

@media (max-width:600px){
.swiper-blind-left,.swiper-blind-right{
display:none;}}

.back{
width:100%;
text-align:center;
margin:60px 0;}

.back a{
color:#2B59C3;}

.back a:hover{
color:#1CCAD8;}

.swiper-button-prev{
background-image:url(../img/lineup_prev.png);
background-size:24px;
margin-left:50px;}

.swiper-button-next{
background-image:url(../img/lineup_next.png);
background-size:24px;
margin-right:50px;}

/*ラクラクイック*/
#top_corp{
text-align:center;
margin-top:15px;
background-color:#0782cf;
border-top:20px solid #000;
border-bottom:20px solid #000;}

#top_corp h3{
width:850px;
margin:0 auto;
padding-top:70px;}

#top_corp h4{
width:638px;
margin:0 auto;
padding-top:30px;}

#top_corp h5{
width:883px;
margin:0 auto;
padding-top:60px;}

#top_corp_btn{
width:900px;
margin:0 auto;}

#top_corp h6{
width:210px;
float:right;}

#rq_h3{
width:785px!important;
padding-top:40px!important;}

#slider_lineup02 .swiper-blind-left{
background-color:#0782cf;}

#slider_lineup02 .swiper-blind-right{
background-color:#0782cf;}

/*お客様の声*/
#voice{
background-image:url(../img/top_voice_bg.png);
background-repeat:no-repeat;
background-size:963px;
background-position:top right;
padding-top:130px;
margin-top:130px;
border-bottom:20px solid #000;}

#voice h3{
width:570px;
margin:0 auto;
margin-top:-170px;}

#voice .swiper-blind-left{
background-color:transparent;}

#voice .swiper-blind-right{
background-color:transparent;}

#voice .container{
position:relative;
margin:80px auto 120px auto;
max-width:1250px;}

#voice .swiper-button-prev{
background-image:url(../img/lineup_prev.png);
background-size:24px;
margin-left:120px;}

#voice .swiper-button-next{
background-image:url(../img/lineup_next.png);
background-size:24px;
margin-right:120px;}

/*faq*/
#faq{
padding:100px 0 140px 0;}

#faq h3{
width:570px;
margin:0 auto;
padding-bottom:20px;}

.ac-box{
width:auto;
margin:50px auto 5px;}

.ac-box label{
text-align:center;
position:relative;
display:block;
cursor:pointer;}

.ac-box label img{
width:876px;}

.ac-box input{
display:none;}

.ac-box label:after{
color:#fff;
font-family:"FontAwesome";
content:" \f078";}

.ac-box input:checked ~ label::after{
color:#fff;
font-family:"FontAwesome";
content:" \f077";}

.ac-box div{
height:0px;
padding:0px;
overflow:hidden;
opacity:0;
transition:0.5s;}

.ac-box input:checked ~ div{
height:auto;
padding:5px;
opacity:1;
width:860px;
margin:0 auto;}

.ac-box div p{
line-height:2;
padding:10px 40px 30px 40px;
text-align:justify;
font-size:17px;
font-weight:600;
color:#000;}

.ac-small p{
margin-bottom:0;}

.small{
font-size:16px;
font-weight:200;
color:#000;}

/*フッターロゴ*/
#foot_info{
background-color:#f0e63c;
text-align:center;
padding:40px 0 42px 0;}

#foot_info img{
width:347px;}

#foot_info p{
font-size:15px;
line-height:1.8;
padding-top:10px;}

#foot_info .spr{
font-size:13px;}

/*ページトップ*/
#backtop{
position:fixed;
bottom:10px;
right:30px;
width:35px;}

#backtop a:hover{
opacity:0.5;
transition:1s;}

#backtop img{
width:35px;}

/*フッター*/
#footer{
color:#fff;
background-color:#000;
text-align:center;
font-size:12px;
padding:25px 0;}

/*モーダル Chrome Opera*/
_::content, _:future, .modaal-wrapper:not(*:root) {
top:100px;}

_::content, _:future, .modaal-wrapper .modaal-close:not(*:root) {
top:100px;}

/*モーダル IE10*/
_:-ms-lang(x), .modaal-wrapper {
top:120px\9;}

_:-ms-lang(x), .modaal-wrapper .modaal-close {
top:120px\9;}

/*モーダル IE11*/
_:-ms-fullscreen, :root .modaal-wrapper {
top:120px;}

_:-ms-fullscreen, :root .modaal-wrapper .modaal-close {
top:120px;}