/**************************************************

BASE

****************************************************/

header{

}

header.fixed {
    background: rgba(0,0,0,0.4);
}

header .wrap2 a {
    color: #FFF;
}

header .wrap2 .btn1{
    color: #FFF;
    background: none;
    border: 2px solid #fff;
}

#gNavi ul li a {
    color: #FFF;
}

.hero-image{
    background: #092e8c;
    /*background: url(../../images/page/bg_home2.jpg) 50% 50% no-repeat;*/
    width: 100%;
    height: 800px;
    overflow: hidden;
    position: relative;
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

.hero-image .container{
    height: 100%;
    position: relative;
}

.hero-image .container .wrap1 {
    /*padding-top: 185px;*/
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
    color: #FFF;
    font-size: 1.8rem;
    padding-left: 10px;
    z-index: 10;
}
.hero-image .container .wrap1 img {
    margin-bottom: 20px;
}

.hero-image #movie {
    width: 670px;
    height: 2000px;
    position: absolute;
    z-index: 10;
    top: 50%;
    right: 0;
    overflow: hidden;
    transform: translateY(-50%) rotate(23.5deg);
}

.hero-image #movie video {
    position: absolute;
    height: 800px;
    width: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(-23.5deg);
}



 /*************************************************

CONTENTS

****************************************************/

#home #main .section3 ,
#home #main .section1 {
    background: #F7F7F7;
    padding: 45px 0;
    position: relative;
}

#home #main .section1::before{
    content: "";
    display: block;
    background: url(../../images/page/img_home2.jpg) 50% 50% no-repeat;
    background-size: cover;
    width: 56.25vw;
    height: 500px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

#home #main .section3 .container,
#home #main .section1 .container{
    padding-top: 100px;
    padding-bottom: 100px;
}
#home #main .section3 .wrap1 ,
#home #main .section1 .wrap1 {
    background: #FFF;
    background: #fff url(../../images/common/ico_arrow1.png) 95% 95% no-repeat;
    width: 600px;
    max-width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

#home #main .section3 .wrap1 a ,
#home #main .section1 .wrap1 a {
    display: block;
    text-decoration: none;
    padding: 50px 70px;
}

#home #main .section3 dl dt ,
#home #main .section1 dl dt {
    color: #0B308C;
    font-size: 3.2rem;
    margin-bottom: 15px;
}
#home #main .section3 dl dd ,
#home #main .section1 dl dd {
    font-size: 1.6rem;
}

#home #main .section2 {
    padding: 80px 0;
}

#home #main .section2 .page-title1 {
    text-align: center;
    margin-bottom: 30px;
}
#home #main .section2 .page-title1 span {
    display: block;
}

#home #main .section2 .pure-g {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -35px;
}
#home #main .section2 .pure-g [class*=pure-u]{
    padding-left: 20px;
    padding-right: 20px;
    font-size: 1.6rem;
    margin-bottom: 35px;
}

#home #main .section2 .pure-g a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

#home #main .section2 .pure-g img {
    margin-bottom: 10px;
}

#home #main .section2 .page-btn1 {
    margin-top: 65px;
}

#home #main .section3::before{
    content: "";
    display: block;
    background: url(../../images/page/img_home9.jpg) 50% 50% no-repeat;
    background-size: cover;
    width: 56.25vw;
    height: 500px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#home #main .section4 {
    background: url(../../images/page/img_home10.jpg) 50% 50% no-repeat;
    background-size: cover;
    padding-top: 260px;
}

#home #main .section4 .page-title1 span {
    display: block;
}
#home #main .section4 h3 {
    color: #0B308C;
    font-size: 3.2rem;
    margin: 30px 0 0px;
    text-align: center;
}

#home #main .section4 .container2 {
    background: #f7f7f7;
    max-width: 1400px;
    margin: auto;
    padding: 60px 0 40px;
}
#home #main .section4 .container3 {
    background: #f7f7f7;
    width: 100%;
    padding-bottom: 70px;
}

#home #main .section4 ul {
    display: flex;
    justify-content: space-between;
    margin-bottom: -30px;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

#home #main .section4 ul li {
    margin-bottom: 30px;
    flex-basis: 31%;
}

#home #main .section4 ul li a {
    display: block;
    background: #FFF;
    text-align: center;
    font-size: 1.8rem;
    color: #0B308C;
    text-align: center;
    text-decoration: none;
    border: solid 2px #0B308C;
    padding: 40px 0;
}

#home #main .aside1 {
    padding: 70px 0;
}

#home #main .aside1 h3 {
    font-size: 2.4rem;
    padding-bottom: 5px;
    border-bottom: 2px solid #0b308c;
}

#home #main .aside1 ul {
    margin-bottom: 10px;
}

#home #main .aside1 ul li {
    padding: 15px 0;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    display: flex;
    font-size: 1.6rem;
}

#home #main .aside1 ul li time{
    flex-basis: 10%;
    color: #0B308C;
}

#home #main .aside1 ul li a {
    text-decoration: none;
}
#home #main .aside1 .link1 {
    font-size: 1.6rem;
    text-decoration: none;
}

@media (max-width: 768px){

    .hero-image #movie{
        width: 250px;
    }
    .hero-image .container{
        position: relative;
        z-index: 10;
    }
    .hero-image .container .wrap1 img{
        max-width: 100%;
        height: auto;
    }

    .hero-image{
        height: 100vh;
        min-height: 500px;
    }

    .hero-image .text1 {
        text-shadow: 0 0 5px rgba(0,0,0,0.75);
    }
    .hero-image #movie video{
        /*left: 0;
        top: 50%;
        transform:translate(-50%,0%) rotate(-23.5deg);*/
    }

    #home #main .section3, #home #main .section1{
        padding: 15px 0;
    }
    #home #main .section3 .container, #home #main .section1 .container{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    #home #main .section1::before{
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
            -ms-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
    }
    #home #main .section3 .wrap1, #home #main .section1 .wrap1{
        width: 100%;
        margin: auto;
    }

    #home #main .section3 .wrap1 a, #home #main .section1 .wrap1 a{
        padding: 25px 25px 50px;
    }
    .page-title1 span{
        display: block;
    }
    #home #main .section3 dl dt, #home #main .section1 dl dt{
        font-size: 2.6rem;
    }
    #home #main .section3::before{
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
            -ms-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
    }
    #home #main .section4{
        padding: 50px 20px;
    }
    #home #main .section4 ul li{
        -webkit-flex-basis: 100%;
                flex-basis: 100%;
    }
    #home #main .aside1 ul li time,
    #home #main .aside1 ul li a{
        display: block;
        width: 100%;
    }
    #home #main .aside1 ul li {
      display: block;
    }
}

.top__banner{
    margin-top: 45px;
}			

.top__banner a{
    display: block;
}

.top__banner a img{
    max-width: 100%;
    height: auto;
}

.top__banner.mt0{
    margin-top: 0;
}