@charset "utf-8";



#boxes .box1{
    background-image: url(../img/sec1_back.jpg);
}
#boxes .box2{
    background-image: url(../img/sec2_back.jpg);
}
#boxes .box3{
    background-image: url(../img/sec3_back.jpg);
}
#boxes .box4{
    background-image: url(../img/sec4_back.jpg);
}



@media print,screen and (min-width: 769px) {

    #mv{
        background-image: url(../img/kv_back.png);
        background-size: calc(1100px + ((100% - 1100px) / 2 ) ) 100%;
        background-position: right center;
        background-repeat: no-repeat;
        width: 100%;
        height: 598px;
        padding-top: 80px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #mv .inner{
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    #mv .titlearea{
        background-image: url(../img/kv.jpg);
        width: 1200px;
        height: 309px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }

    #mv .titlearea .texts{
        position: absolute;
        left: 100px;
        top: 170px;
        color: #fff;
    }
    #mv .titlearea .texts .en{
        font-size: 18px;
        font-style: italic;
        letter-spacing: 0.1em;
    }

    #mv .titlearea .texts h1{
        margin-top: 20px;
        font-weight: bold;
        font-size: 34px;
        font-style: italic;
        letter-spacing: 0.1em;
    }

    #mv .read{
        font-size: 90%;
        width: 50%;
        margin-top: 50px;
        color: #fff;
        margin-left: 100px;
        margin-right: 100px;
        line-height: 2em;
    }


    #boxes{
        margin-top: 100px;
    }


    #boxes .box{
        position: relative;
        margin-top: 200px;
        -webkit-background-size: cover;
        background-size:cover ;
        background-position: center center;
    }

    #boxes .box .titlearea{
        position: absolute;
        left: 0;
        top: -85px;
        height: 170px;
        width: 100%;
    }

    #boxes .box .titlearea .copy{
        position: relative;
        opacity:0.2;
        text-align: center;
        height: 170px;
    }
    #boxes .box .titlearea .copy img{
        height: 100%;
        width: auto;
    }

    #boxes .box .titlearea .inn{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        -ms-align-items: center;
        align-items:center ;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-bottom: 20px;
    }

    #boxes .box .titlearea .year{
        font-size: 20px;
        font-style: italic;
        font-weight: 700;
        letter-spacing: 0.1em;
    }

    #boxes .box .titlearea h2{
        margin-top: 10px;
    }



    #boxes .box .inner{
        padding-top: 80px;
        padding-bottom: 100px;
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        color: #fff;
    }

    #boxes .box h3{
        font-size: 22px;
        letter-spacing: 0.2em;
        text-align: center;
        line-height: 1.75em;
    }


    #boxes .box .discription{
        width: 800px;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.75em;
    }



    #boxes .box .history{
        margin-top: 50px;
    }

    #boxes .box .history h4{
        font-size: 16px;
        text-align: center;
    }

    #boxes .box .history .items{
        margin-top: 20px;
        background-image: url(../img/line.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        padding-top: 80px;
    }



    #boxes .box .history .items .item{
        position: relative;
        width: calc(50% - 130px);
        margin-top: -30px;
    }

    #boxes .box .history .items .item .year{
    background-image: url(../img/dot.png);
    background-repeat: no-repeat;
    background-position: right center;
    position: absolute;
    right: -135px;
    top: 0;
    padding-right: 20px;
    font-size: 16px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    }
    #boxes .box .history .items .item .year .line{
        height: 1px;
        flex:1;
        background-color: #fff;
        width: 50px;
        margin-right: 15px;
    }


    #boxes .box .history .items .item .body{
    font-size: 16px;
    text-align: right;
    }
    #boxes .box .history .items .item .images{
        margin-top: 20px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content:flex-end;
        height: 70px;
    }
    #boxes .box .history .items .item .images .image {
        margin-left: 5px;
        margin-right: 5px;
    }
    #boxes .box .history .items .item .images .image img{
        width: auto;
    }
    #boxes .box .history .items .item .arrow{
        display: none;
    }




    #boxes .box .history .items .item:nth-child(even){
        margin-left: auto;
    }
    #boxes .box .history .items .item:nth-child(even) .year{
        flex-direction: row-reverse;
        right: auto;
        left: -135px;
        background-position: left center;
        padding-left: 20px;
        padding-right:0;
    }

    #boxes .box .history .items .item:nth-child(even) .year .line{
        margin-left: 15px;
        margin-right: 0;
    }

    #boxes .box .history .items .item:nth-child(even) .body{
        text-align: left;
    }
    #boxes .box .history .items .item:nth-child(even) .images{

        justify-content:flex-start;
    }






    #future{
        padding-top: 140px;
        padding-bottom: 140px;
        background-image: url(../img/mesage_back.jpg);
        background-repeat: no-repeat;
        background-position: right bottom;
        text-align: center;
    }

    #future .en{
        font-style: italic;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.1em;
    }

    #future .title{
        margin-top: 10px;
        width: 258px;
        margin-left: auto;
        margin-right: auto;
    }

    #future h2{
        margin-top: 50px;
        font-size: 22px;
        letter-spacing: 0.2em;
        line-height: 1.75em;
    }

    #future .body{
        margin-top: 40px;
        width: 800px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        line-height: 1.75em;
    }




}


@media print,screen and (min-width: 769px) and (max-width: 1320px) {


    #mv{
        background-size: calc(900px + ((100% - 900px) / 2 ) ) 100%;
    }

    #mv .inner{
        width: 1000px;
    }

    #mv .titlearea{
        width: 1000px;
        height: calc( 309px / 1200 * 1000 );
    }




    #boxes .box .inner{
        width: 1000px;
    }







}






@media only screen and (max-width: 768px) {




    #mv{
        background-image: url(../img/kv_back_sp.png);
        background-size: calc(100vw - 6vw) 100%;
        background-position: right bottom;
        background-repeat: no-repeat;
        width: 100vw;
        height: calc( 100vw / 700 * 533 + 28vw );
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #mv .titlearea{
        background-image: url(../img/kv_sp.jpg);
        -webkit-background-size: cover;
        background-size:cover ;
        width: 100vw;
        height: calc( 100vw / 750 * 414 );
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }

    #mv .titlearea .texts{
        position: absolute;
        left: 12vw;
        top: 30vw;
        color: #fff;
    }
    #mv .titlearea .texts .en{
        font-size: 5vw;
        font-style: italic;
        letter-spacing: 0.1em;
    }

    #mv .titlearea .texts h1{
        margin-top: 20px;
        font-weight: bold;
        font-size: 8.5vw;
        font-style: italic;
        letter-spacing: 0.1em;
    }

    #mv .read{
        font-size: 3.4vw;
        margin-top: 6vw;
        color: #fff;
        margin-left: 12vw;
        margin-right: 12vw;
        line-height: 1.75em;
    }





    #boxes{
        margin-top: 50px;
    }


    #boxes .box{
        position: relative;
        margin-top: 50px;
        -webkit-background-size: cover;
        background-size:cover ;
        background-position: center center;
    }

    #boxes .box .titlearea{
        position: absolute;
        left: 0;
        top: -25px;
        height: 50px;
        width: 100%;
    }

    #boxes .box .titlearea .copy{
        position: relative;
        opacity:0.5;
        text-align: center;
        height: 50px;
    }
    #boxes .box .titlearea .copy img{
        height: 100%;
        width: auto;
    }

    #boxes .box .titlearea .inn{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        -ms-align-items: center;
        align-items:center ;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #boxes .box .titlearea .year{
        font-size: 90%;
        font-style: italic;
        font-weight: 700;
        letter-spacing: 0.1em;
    }

    #boxes .box .titlearea h2{
        height: 30px;
        display: block;
        text-align: center;
    }
    #boxes .box .titlearea h2 img{
        height: 100%;
        width: auto;
    }


    #boxes .box .inner{
        padding-top: 40px;
        padding-bottom: 50px;
        margin-left: 6vw;
        margin-right: 6vw;
        color: #fff;
    }

    #boxes .box h3{
        text-align: center;
        line-height: 1.75em;
    }


    #boxes .box .discription{
        font-size: 90%;
        margin-top: 20px;
        line-height: 1.75em;
    }


    #boxes .box .history{
        margin-top: 30px;
    }

    #boxes .box .history h4{
        text-align: center;
    }

    #boxes .box .history .items{
        margin-top: 20px;
    }


    #boxes .box .history .items .item{
        position: relative;
        margin-bottom: 40px;
    }

    #boxes .box .history .items .item .year{
        text-align: center;
    }
    #boxes .box .history .items .item .year .line{
        display: none;
    }


    #boxes .box .history .items .item .body{
        font-size: 90%;
        text-align: center;
        margin-top: 10px;
    }
    #boxes .box .history .items .item .images{
        margin-top: 20px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content:center;
    }
    #boxes .box .history .items .item .images .image {
        margin-left: 5px;
        margin-right: 5px;
    }
    #boxes .box .history .items .item .images .image img{
        width: auto;
        height: 50px;
    }

    #boxes .box .history .items .item .arrow{
        margin-left: auto;
        margin-right: auto;
        background-image: url(../img/arrow.png);
        width: 12px;
        height: 21px;
        -webkit-background-size: cover;
        background-size:cover ;
        margin-bottom: 20px;
    }





    #future{
        padding-top: 50px;
        padding-bottom: 20px;
        background-image: url(../img/mesage_back.jpg);
        -webkit-background-size: cover;
        background-size:cover ;
        background-repeat: no-repeat;
        background-position: 75% center;
        text-align: center;
    }

    #future .en{
        font-style: italic;
        font-size: 120%;
        font-weight: 700;
        letter-spacing: 0.1em;
    }

    #future .title{
        margin-top: 10px;
        width: 70vw;
        margin-left: auto;
        margin-right: auto;
    }

    #future h2{
        margin-top: 20px;
        font-size: 110%;
        letter-spacing: 0.1em;
        line-height: 1.75em;
    }

    #future .body{
        margin-top: 20px;
        margin-left: 6vw;
        margin-right: 6vw;
        text-align: left;
        font-size: 90%;
        line-height: 1.75em;
    }



}