@charset "utf-8";
@import url(reset.css);
/* default */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900);
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);
/* others */
@font-face {
    font-family:'boston_traffic';
    src: 
    url('/files/user/common/font/boston_traffic-webfont.eot') format('eot'),
    url('/files/user/common/font/boston_traffic-webfont.woff') format('woff'),
    url('/files/user/common/font/boston_traffic-webfont.ttf') format('truetype');
}



/* ---------------------------------------------------------------- *
    共通設定
 * ---------------------------------------------------------------- */

a:link {color:#0066ff;text-decoration:underline;}
a:visited {color:#3300ff;text-decoration:underline;}
a:hover {color:#3399ff;text-decoration:none;}
a:active {color:#3399ff;text-decoration:none;}

/* 明朝 */
.serif {font-family:"Libre Baskerville",Garamond,"Times New Roman","Sawarabi Mincho","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;}

/* font-family設定 */
.ff1 {font-family:'boston_traffic',cursive;font-weight:normal;}
.ff2 {font-family:'Roboto',cursive;}

/* font-color font-size設定 */
.red {color:#cc0000;}
.small {font-size:10px;line-height:140%;}

.msTop2017 .flex {
display:flex;
display:-webkit-flex;
display:-moz-flex;
display:-o-flex;
display:-ms-flex;
justify-content:space-between;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
-ms-justify-content:space-between;
-o-justify-content:space-between;
flex-wrap:wrap;
}

.msTop2017 a {transition:all .2s ease-in-out;}
.msTop2017 a:hover {transition:all .2s ease-in-out;}

/* ---------------------------------------------------------------- *
    home (PC)
 * ---------------------------------------------------------------- */

/* メインアニメーション */

.msTop2017 .mainImg .op0 {opacity:0;}
.msTop2017 .mainImg {height:600px;position:relative;overflow:hidden;background:url(../img/mainImg/bg1.jpg);}

.msTop2017 .mainImg .load img {display:block;position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;}
.msTop2017 .mainImg .ojt1 img {height:50%;display:block;position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;}
.msTop2017 .mainImg .ojt2 {height:600px;position:absolute;width:100%;background:url(../img/mainImg/img1.jpg) no-repeat bottom;background-size:cover;z-index:1;}
.msTop2017 .mainImg .ojt3 {height:600px;position:absolute;width:100%;background:url(../img/mainImg/img2.jpg) no-repeat center;background-size:cover;z-index:2;}
.msTop2017 .mainImg .ojt4 {height:95%;position:absolute;width:85%;top:0;bottom:0;right:0;left:0;margin:auto;background:url(../img/mainImg/ojt2.png) no-repeat center;background-size:100%;z-index:100;transform:scale(5);}

.msTop2017 .mainImg .loopImg1 {height:600px;position:absolute;width:100%;background:url(../img/mainImg/loopImg1.jpg) no-repeat bottom;background-size:cover;z-index:10;}
.msTop2017 .mainImg .loopImg2 {height:600px;position:absolute;width:100%;background:url(../img/mainImg/loopImg2.jpg) no-repeat bottom;background-size:cover;z-index:11;}
.msTop2017 .mainImg .loopImg3 {height:600px;position:absolute;width:100%;background:url(../img/mainImg/loopImg3.jpg) no-repeat bottom;background-size:cover;z-index:12;}
.msTop2017 .mainImg .loopImg4 {height:600px;position:absolute;width:100%;background:url(../img/mainImg/loopImg4.jpg) no-repeat center;background-size:cover;z-index:13;}

/*navi margin-top:75px header表示調整*/
.msTop2017navi {width:100%;height:70px;border-bottom:#CCC solid 1px;margin-top:75px;}
.msTop2017navi li a {display:block;width:25%;float:left;height:70px;text-align:center;font-weight:600;text-decoration:none;font-size:18px;line-height:70px;text-indent:50px;}
.msTop2017navi .m1 {color:#000;background:url(../img/m1bg.gif) repeat-y #FFF;}
.msTop2017navi .m2 {color:#FFF;background:url(../img/m2bg.gif) no-repeat #e70012;}
.msTop2017navi .m3 {color:#FFF;background:url(../img/m3bg.gif) no-repeat #c0ad60;}
.msTop2017navi .m4 {color:#FFF;background:url(../img/m4bg.gif) no-repeat #000;}

/*msTop2017 margin-bottom:185px footer表示調整*/
.msTop2017 {max-width:1800px;width:100%;margin:0 auto 185px auto;font-family:"Roboto",Helvetica,"Noto Sans Japanese","游ゴシック","Yu Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;font-size:16px;line-height:100%;}

.msTop2017 .bxslider {background-color:#FFF!important;box-shadow:0 0px 7px rgba(0,0,0,0.5) inset;}

.msTop2017 #news {background:url(../img/newsBg.jpg) no-repeat #000;background-size:cover;padding:80px 0;margin-bottom:0;}
.msTop2017 #news h2 {font-size:40px;color:#FFF;text-align:center;margin-bottom:40px;}
.msTop2017 #news p a {display:block;width:890px;margin:0 auto 15px auto;border-bottom:#FFF solid 1px;overflow:hidden;color:#FFF;text-decoration:none;padding-bottom:15px;}
.msTop2017 #news p a:hover {opacity:0.7;}
.msTop2017 #news p a img {display:block;float:left;width:100px;height:auto;margin-right:30px;}
.msTop2017 #news p a .date {display:block;float:left;width:100px;font-weight:bold;font-size:18px;margin-top:25px;}
.msTop2017 #news p a .text {display:block;float:right;width:640px;font-size:14px;margin-top:25px;line-height:140%;}

.msTop2017 #pro h2 {background:url(../img/titleBg1.gif) no-repeat right #e70012;height:80px;color:#FFF;font-size:40px;line-height:90px;text-indent:20px;}
.msTop2017 #pro .gt2018 {display:block;width:100%;height:600px;margin-bottom:2px;background:#000;background-size:contain;text-decoration:none;overflow:hidden;position:relative;}
.msTop2017 #pro .gt2018:hover {opacity:0.9;}
.msTop2017 #pro .gt2018 .title {position:absolute;width:650px;height:100px;line-height:118px;border:#FFF solid 2px;text-align:center;font-size:60px;color:#FFF;background-color:rgba(0,0,0,0.3);text-shadow:0 0 5px rgba(0,0,0,0.8);top:0;bottom:0;left:0;right:0;margin:auto;z-index:1;}
.msTop2017 #pro .gt2018 .img1 {background:url(../img/proBg2.jpg) no-repeat #000 center;background-size:auto 100%;position:absolute;height:600px;top:0;bottom:0;left:0;right:0;margin:auto;z-index:0;opacity:0;}

.msTop2017 #pro .sf2018 {display:block;width:100%;height:600px;background:#000;background-size:contain;text-decoration:none;overflow:hidden;position:relative;}
.msTop2017 #pro .sf2018:hover {opacity:0.9;}
.msTop2017 #pro .sf2018 .title {position:absolute;width:650px;height:100px;line-height:118px;border:#FFF solid 2px;text-align:center;font-size:60px;color:#FFF;margin:110px auto 0 auto;background-color:rgba(0,0,0,0.3);text-shadow:0 0 5px rgba(0,0,0,0.8);top:0;bottom:0;left:0;right:0;margin:auto;z-index:1;}
.msTop2017 #pro .sf2018 .img1 {background:url(../img/proBg1.jpg) no-repeat #000 center;background-size:auto 100%;position:absolute;height:600px;top:0;bottom:0;left:0;right:0;margin:auto;z-index:0;opacity:0;}

.msTop2017 #par h2 {background:url(../img/titleBg2.gif) no-repeat right #c0ad60;height:80px;color:#FFF;font-size:40px;line-height:90px;text-indent:20px;}
.msTop2017 #par p {width:50%;height:250px;float:left; border-bottom:#FFF solid 2px; margin:0 auto;}
.msTop2017 #par a {display:block;width:99.8%;float:left;height:250px;text-decoration:none;position:relative;}
.msTop2017 #par a:hover {opacity:0.8;}
.msTop2017 #par span {position:absolute;bottom:0;display:block;width:100%;height:35px;line-height:35px;background-color:rgba(0,0,0,0.6);font-weight:600;text-align:center;font-size:20px;color:#FFF;text-shadow:0 0 3px rgba(0,0,0,0.5);}
.msTop2017 #par .btn1 a {background:url(../img/par_1.jpg) no-repeat center #FFF;}
.msTop2017 #par .btn2 a {background:url(../img/par_2.jpg) no-repeat center #FFF;background-size:cover;}
.msTop2017 #par .btn3 a {background:url(../img/par_3.jpg) no-repeat center #FFF;background-size:cover;}
.msTop2017 #par .btn4 a {background:url(../img/overlay.png),url(../img/par_4.jpg) no-repeat center #FFF;background-size:cover;}

.msTop2017 #other h2 {background:url(../img/titleBg3.gif) no-repeat right #080403;height:80px;color:#FFF;font-size:40px;line-height:90px;text-indent:20px;}
.msTop2017 #other p {width:50%;height:300px;float:left; border-bottom:#FFF solid 2px; margin:0 auto;}
.msTop2017 #other a {display:block;width:99.8%;float:left;height:300px;text-decoration:none;position:relative;}
.msTop2017 #other a:hover {opacity:0.8;}
.msTop2017 #other span {position:absolute;top:75px;left:50%;margin-left:-200px;display:block;width:400px;height:150px;line-height:35px;background-color:rgba(0,0,0,0.1);font-weight:600;text-align:center;font-size:20px;line-height:150px;color:#FFF;text-shadow:0 0 3px rgba(0,0,0,0.5);border:#FFF solid 2px;}
.msTop2017 #other .btn1 a {background:url(../img/overlay.png),url(../img/other_1.jpg) no-repeat center #FFF;background-size:cover;}
.msTop2017 #other .btn2 a {background:url(../img/other_2.jpg) no-repeat center #FFF;background-size:cover;}

.msTop2017 #banner {padding:40px 0;background:url(../img/bannerBg.jpg) #FFF repeat-x top;}
.msTop2017 #banner .wrap {max-width:1100px;margin:0 auto;}
.msTop2017 #banner img {max-width:480px;width:100%; border:#111 solid 1px;}
.msTop2017 #banner a:hover {opacity:0.8;}

/* Jenson Button追加 */
.msTop2017 #pro .button:hover {opacity:0.9;}
.msTop2017 #pro .button {display:block;width:100%;height:500px;margin-bottom:20px;background:url(../img/button_bg.jpg) no-repeat #000;background-size:contain;text-decoration:none;overflow:hidden;position:relative; color:#FFF; text-decoration:none;}
.msTop2017 #pro .button .textBox {position:absolute;width:650px;height:auto;top:590px;left:5%;z-index:2;text-align:center;text-shadow:0 0px 7px rgba(0,0,0,1)}
.msTop2017 #pro .button .title1 img {width:650px;margin-bottom:50px;}
.msTop2017 #pro .button .title2 {font-size:65px;font-weight:600; color:#C00;margin-bottom:80px;letter-spacing:-1px;font-style:italic;}
.msTop2017 #pro .button .title3 {font-size:100px;font-weight:800; color:#C00;font-style:italic;}
.msTop2017 #pro .button .img1 {position:absolute;width:700px;height:auto;bottom:-500px;right:-1%;z-index:1;}

/* ---------------------------------------------------------------- *
    画面の横幅が1100px以下の場合に適用されるCSS（PC1024）
 * ---------------------------------------------------------------- */

@media screen and (max-width:1100px){
.msTop2017navi {margin-top:135px;}
.msTop2017 #banner img {max-width:430px;width:100%; margin:0 30px;}

/* Jenson Button追加 */
.msTop2017 #pro .button .textBox {width:500px;}
.msTop2017 #pro .button .title1 img {width:500px;margin-bottom:30px;}
.msTop2017 #pro .button .title2 {font-size:50px;margin-bottom:60px;}
.msTop2017 #pro .button .title3 {font-size:70px;}
.msTop2017 #pro .button .img1 {width:600px;}

}

@media screen and (max-width:800px){
/* Jenson Button追加 */
.msTop2017 #pro .button {width:100%;height:400px;}
.msTop2017 #pro .button .textBox {width:90%; margin-top:-50px;}
.msTop2017 #pro .button .title1 img {width:90%;margin-bottom:10px;}
.msTop2017 #pro .button .title2 {font-size:30px;margin-bottom:20px;}
.msTop2017 #pro .button .title3 {font-size:30px;}
.msTop2017 #pro .button .img1 {width:60%;}

}

/* ---------------------------------------------------------------- *
    画面の横幅が600px以下の場合に適用されるCSS（SP）
 * ---------------------------------------------------------------- */

@media screen and (max-width:600px){
	
/* メインアニメーション */

.msTop2017 .mainImg .op0 {opacity:0;}
.msTop2017 .mainImg {height:250px;position:relative;overflow:hidden;background:url(../img/mainImg/bg1.jpg);}

.msTop2017 .mainImg .load img {display:block;position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;}
.msTop2017 .mainImg .ojt1 img {width:50%;height:auto;display:block;position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;}
.msTop2017 .mainImg .ojt2 {height:250px;position:absolute;width:100%;background:url(../img/mainImg/img1.jpg) no-repeat bottom;background-size:cover;z-index:1;}
.msTop2017 .mainImg .ojt3 {height:250px;position:absolute;width:100%;background:url(../img/mainImg/img2.jpg) no-repeat center;background-size:cover;z-index:2;}
.msTop2017 .mainImg .ojt4 {height:95%;position:absolute;width:85%;top:0;bottom:0;right:0;left:0;margin:auto;background:url(../img/mainImg/ojt2.png) no-repeat center;background-size:100%;z-index:100;transform:scale(5);}

.msTop2017 .mainImg .loopImg1 {height:250px;position:absolute;width:100%;background:url(../img/mainImg/loopImg1.jpg) no-repeat bottom;background-size:cover;z-index:10;}
.msTop2017 .mainImg .loopImg2 {height:250px;position:absolute;width:100%;background:url(../img/mainImg/loopImg2.jpg) no-repeat bottom;background-size:cover;z-index:11;}
.msTop2017 .mainImg .loopImg3 {height:250px;position:absolute;width:100%;background:url(../img/mainImg/loopImg3.jpg) no-repeat bottom;background-size:cover;z-index:12;}
.msTop2017 .mainImg .loopImg4 {height:250px;position:absolute;width:100%;background:url(../img/mainImg/loopImg4.jpg) no-repeat center;background-size:cover;z-index:13;}

/*navi margin-top:75px header表示調整*/
.msTop2017navi {width:100%;height:auto;border-top:#CCC solid 1px;margin-top:55px;}
.msTop2017navi li a {display:block;width:100%;float:inherit;text-indent:0px;}
.msTop2017navi .m1 {color:#000;background:#FFF;}
.msTop2017navi .m2 {color:#FFF;background:#e70012;}
.msTop2017navi .m3 {color:#FFF;background:#c0ad60;}
.msTop2017navi .m4 {color:#FFF;background:#000;}

.msTop2017 {max-width:inherit;width:100%;margin:0 auto;}

.msTop2017 #news h2 {margin-bottom:40px;}
.msTop2017 #news p a {display:block;width:90%;margin:0 auto 15px auto;border-bottom:#FFF solid 1px;overflow:hidden;color:#FFF;text-decoration:none;padding-bottom:15px;text-align:center;}
.msTop2017 #news p a img {display:block;float:inherit;width:120px;height:auto;margin:0 auto;}
.msTop2017 #news p a .date {display:block;float:inherit;width:100%;font-weight:bold;font-size:12px;margin-top:12px;}
.msTop2017 #news p a .text {display:block;float:inherit;width:100%;font-size:14px;margin-top:-10px;line-height:140%;}

.msTop2017 #pro h2 {font-size:20px;}
.msTop2017 #pro .gt2018 {width:100%;height:350px;}
.msTop2017 #pro .gt2018 .title {width:80%;height:100px;line-height:110px;font-size:35px;margin:60px auto 0 auto;z-index:5;}
.msTop2017 #pro .gt2018 .img1 {background:url(../img/proBg2.jpg) no-repeat #000 bottom;background-size:100%;position:absolute;height:350px;top:0;bottom:0;left:0;right:0;margin:auto;z-index:0;opacity:0;}

.msTop2017 #pro .sf2018 {width:100%;height:350px;}
.msTop2017 #pro .sf2018 .title {width:80%;height:100px;line-height:110px;font-size:30px;margin:60px auto 0 auto;z-index:5;}
.msTop2017 #pro .sf2018 .img1 {background:url(../img/proBg1.jpg) no-repeat #000 bottom;background-size:100%;position:absolute;height:350px;top:0;bottom:0;left:0;right:0;margin:auto;z-index:0;opacity:0;}

.msTop2017 #par h2 {font-size:20px;}
.msTop2017 #par span {height:70px;font-size:14px;line-height:160%;padding-top:20px;}

.msTop2017 #other h2 {font-size:20px;}
.msTop2017 #other p {width:100%;height:200px;float:inherit; border-bottom:#FFF solid 2px; margin:0 auto;}
.msTop2017 #other a {display:block;width:100%;float:inherit;height:200px;text-decoration:none;position:relative;}
.msTop2017 #other a:hover {opacity:0.8;}
.msTop2017 #other span {top:50px;left:50%;margin-left:-40%;display:block;width:80%;height:100px;line-height:35px;font-size:18px;line-height:100px;}

.msTop2017 #banner {padding:20px;}
.msTop2017 #banner .wrap {max-width:inherit;margin:0;}
.msTop2017 #banner img {max-width:inherit;width:80%;margin-bottom:10px;}

/* Jenson Button追加 */
.msTop2017 #pro .button .img1 {width:100%;}

}