@charset "utf-8";







@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;
    }




    #works {
        margin-top: 100px;
        position: relative;
    }

    #works .work .titlebk{
        width: 100%;
        margin-right: 0px;
        position: relative;
    }

    #works .work .titlebk .posi  {
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding-bottom: 10vw;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }


    #works .work .titlearea{
        width: 920px;
        /*
        margin-left: auto;
        margin-right: auto;
        */
        color: #fff;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

    }
    #works .work .titlearea .title {
        width: 265px;
    }


    #works .work .titlearea .read ul{
        margin-top: 20px;
    }



    #works .work .titlearea .en{
        background-image: url(../img/slash.png);
        background-repeat: no-repeat;
        background-position: 0 0;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: flex-end;
        align-items: flex-end;
        font-style: italic;
        font-size: 18px;
        letter-spacing: 0.1em;
    }
    #works .work .titlearea h2{
        margin-top: 20px;
        font-size: 32px;
        line-height: 1.5em;
    }
    #works .work .titlearea .read {
        width: 650px;
        margin-top: 45px;
        font-size: 15px;
        line-height: 2em;
        letter-spacing: 0.2em;
    }
    #works .work .section{
        position: relative;
        -webkit-background-size: cover;
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: auto;
        margin-right: auto;
    }

    #works .work .section .inner{
        position: relative;
        width: 920px;
        margin-left: auto;
        margin-right: auto;
    }
    
    
    #works .work .section .clms {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    #works .work .section .clms.reverse {
        flex-direction: row-reverse;
    }


    #works .work .section .clm {
        margin-bottom: 50px;
    }


    #works .work .section .txt {
        font-size: 15px;
        line-height: 1.75em;
    }
    
    #works .work .section .tit   {
        color: #002542;
        border-bottom: 2px solid #002542;
        font-size: 18px;
        line-height: 1.5em;
        font-weight: bold;
        text-align: center;
        padding-bottom: 10px;
        margin-bottom: 25px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
    }







    




    #works .work2 .section .tit   {
        text-align: left;
        justify-content:flex-start;
    }



    #works .work2 .section .image {
        width: 790px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    
    #works .work2 .section .image {
        width: 790px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    
    

    #works .work2 .section .clms .clm{
        width: calc(50% - 20px);
    }

    
    #works .work2 .section .clms .clm.white{
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content:center;
        -ms-align-items: center;
        align-items:center ;
        border:1px #999 solid;
        padding: 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #works .work2 .section .clms .clm.white img{
        width: auto;
    }

    
    
    
    


}









@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 !important;
        background-size: cover;
        background-position: center center;
        height: calc( 309px / 1200 * 1000 );
    }








}






@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.65em;
    }








    #works {
        margin-top: 50px;
        position: relative;
    }

    #works .work .titlebk{
        width: 100vw;
        margin-right: 0px;
        position: relative;
    }

    #works .work .titlebk .posi  {
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding-bottom: 10vw;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }


    #works .work .titlearea{
        margin-left: 6vw;
        margin-right: 6vw;
        color: #fff;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 10px;
    }
    #works .work .titlearea .title {
        text-align: center;
    }



    #works .work .titlearea .en{
        font-style: italic;
        font-size: 18px;
        letter-spacing: 0.1em;
    }
    #works .work .titlearea h2{
        font-size: 6vw;
        line-height: 1.5em;
    }
    #works .work .titlearea .read {
        margin-top: 15px;
        font-size: 3vw;
        line-height: 1.5em;
        letter-spacing: 0.2em;
        text-align: left;
    }

    #works .work .titlearea .read ul{
        margin-top: 20px;
    }





    #works .work .section{
        position: relative;
        -webkit-background-size: cover;
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: auto;
        margin-right: auto;
    }

    #works .work .section .inner{
        position: relative;
        margin-left: 6vw;
        margin-right: 6vw;
    }
   
    

    


    #works .work .section .clms {

        padding-bottom: 20px;
    }
    #works .work .section .clm {
        margin-bottom: 40px;
        display: block;
    }
    
    #works .work .section .txt {
        font-size: 13px;
        line-height: 1.75em;
    }

    
    #works .work .section .tit   {
        color: #002542;
        border-bottom: 2px solid #002542;
        font-size: 5vw;
        font-weight: bold;
        padding-bottom: 10px;
        margin-bottom: 25px;
    }



    



    #works .work.work2 .section .tit   {
        text-align: left;
/*        width: 80%;*/

    }


    #works .work.work2 .section .image {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 50px;
    }

    #works .work.work2 .section .clms {
        margin-left: 0px;
        margin-right: 0px;

    }

    
    #works .work.work2 .section .clms .clm.white{
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content:center;
        -ms-align-items: center;
        align-items:center ;
        border:1px #999 solid;
        padding: 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #works .work2 .section .clms .clm.white img{
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    
    
    
    


}