/*====================================================*/
/* common */
/*====================================================*/
.clearfix{clear:both; overflow:hidden;}
.clear{clear:both;}
.finline{line-height:0;}
.left{float:left;}
.right{float:right;}

*, *:before, *:after {box-sizing: border-box;}
html {
    font-size: 62.5%;
    -webkit-text-size-adjust: none;
}
body {
    font: 14px/40px Trebuchet MS, 游ゴシック体, 'Yu Gothic', YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
    color:#fff;
    background-color:#eef7f5;
    position:relative;
}
#wrapper {}
.bodyw{width:600px; margin:0 auto;}

.title-en{
    font:bold 17px/21px "HelveticaNeue", "Helvetica";
    text-transform: uppercase;
    letter-spacing: 6px;
}
/*====================================================*/
/* style */
/*====================================================*/
.video-bg{width:100%;height:100%;position:fixed;top:0;left:0;z-index:-1;}
.bg-bg{width:100%;height:100%;position:fixed;top:0;left:0;z-index:0;background:rgba(219, 242, 242, 0.5);}
.bg-bg-fix{width:100%;height:100%;position:fixed;top:0;left:0;z-index:7;background:rgba(219, 242, 242, 0.5);opacity:1;}

.main-bg{
    width:100%;height:788px;
    position:fixed;top:0;left:0;z-index:1;
}
.main-trainer-bg{
    background:url(../images/topbg_trainer.png) center 85px no-repeat;
    width:100%; height:788px;
    position:fixed;top:0;left:0;z-index:2;
}
.main-map-bg{
    background:url(../images/topbg_map.png) center 85px no-repeat;
    width:100%; height:100%;
    position:fixed;top:0;left:0;z-index:3;
}
.main-txt-group{    
    position:fixed;top:0;left:0;z-index:4;
    width:100%; 
    /*    height:100%;
        max-height:316px;*/
    height:316px;
}
.main-txt-group .finline{
    /*    height:100%;
        max-height:788px;*/
    position: relative;
    height:788px;
}
#logo{
    font-size:0; line-height:0;
    position: fixed; top:39px; z-index:7
}
.main-txt-bg{
    position:absolute;
    left:-20px; top:85px;
}
.main-head-txt{
    position: absolute;
    left:0px;
    /*bottom:0;*/
    bottom:209px;
}
.main-txt1{padding:0 0 25px 9px;}
.main-txt2{}
.main-txt3{padding:22px 0 22px;}
.main-txt4{padding-bottom:30px;}
.main-txt5{}

.contents{
    width:100%;
    top:677px;left:0;
    position:absolute;z-index:10;
    padding-bottom:788px;
    font-size:22px; line-height: 44px;
}
.contents > .bodyw{position: relative}
.contents section{
    margin-bottom:40px;
    position: relative
}
.blue{background-color:#0086ca;}
.naviblue{background-color:#001d2c}

.boxtxt{
    width:560px;
    top:0;
    text-align:center;
}
.boxtxt h3{
    padding-bottom:37px;
    font-size:23px;
}
.boximg{
    border:10px solid #fff;
    display: inline-block;
    bottom:0;
}
.boxtxt, .boximg{position: absolute;}

#sec1{
    height:780px; 
    z-index:11;
    line-height:42px;
}
#sec1 .boxtxt{z-index:13; padding:55px 0 35px;}
#sec1 .boximg{right:0;z-index:12;}

#sec2{
    height:781px; 
    z-index:14;
}
#sec2 .boxtxt{padding:105px 0 119px;right:0px;z-index:15;}
#sec2 .boximg{left:0px;z-index:16}

#sec3{
    height:940px; 
    z-index:17; 
    margin-bottom: 0;
}
#sec3 .boxtxt{
    z-index:19;
    padding:63px 0 54px;
}
#sec3 .boxtxt p:first-child{padding-bottom:42px;}
#sec3 .boximg{right:0;z-index:18}


.bline{
    background-color:#ccc;
    position:absolute;
}
.line_t{top:0;left:0}
.line_r{right:0;top:0}
.line_b{bottom:0;right:0}
.line_l{left:0;top:0}
.line_l, .line_r{width:1px; height:100%}
.line_b, .line_t{height:1px;width:100%}

#boxline1{
    position:absolute; z-index:20;
    top:380px; left:20px;
    width:40px; height:461px;
}
#boxline1 .line_b{left:0}

#boxline2{
    position:absolute; z-index:21;
    top:1200px; right:19px;
    width:40px; height:461px;
}