@charset "utf-8";





  header .shoulder  span{
        transform:scale(0);
        transform-origin: center bottom;
    }

    body.loaded header .shoulder  span{
        transform:scale(1);
        transition-duration: 400ms;
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */;
    }



    header .shoulder span:nth-child(1) {
        transition-delay: 0ms;
    }

    header .shoulder span:nth-child(2) {
        transition-delay: 600ms;
    }
    header .shoulder span:nth-child(3) {
        transition-delay: 200ms;
    }

    header .shoulder span:nth-child(4) {
        transition-delay: 400ms;
    }
    header .shoulder span:nth-child(5) {
        transition-delay: 800ms;
    }


    header h1  span{
        transform:scale(0);
        transform-origin: center bottom;
    }

    body.loaded header h1  span{
        transform:scale(1);
        transition-duration: 500ms;
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */;
    }

    header h1 span:nth-child(1) {
        transition-delay: 1000ms;
    }
    header h1 span:nth-child(2) {
        transition-delay: 1200ms;
    }
    header h1 span:nth-child(3) {
        transition-delay: 1400ms;
    }
    header h1 span:nth-child(4) {
        transition-delay: 1600ms;
    }



  header .en {
    opacity:0;
    transform:translateY(40px);
}

body.loaded header .en{
    opacity:1;
    transform:translateY(0);
    transition-duration: 400ms;
    transition-delay: 2000ms;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */;
}




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




    header {
        padding-top:120px;
        padding-bottom: 40px;
        
    }

    header .shoulder {
        width: 672px;
        height: calc(210px);
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
    header .shoulder  span{
        display: block;
        background-size: 100% 100%;
        text-indent: -9999px;
        overflow: hidden;
        position: absolute;
    }

    header .shoulder span:nth-child(1) {
        background-image: url(/assets/img/top_kv_0.png);
        width: calc(320px);
        height: calc(65px);
        left: 0;
        top: 5px;
    }

    header .shoulder span:nth-child(2) {
        text-indent: 0;
        overflow: inherit;
        width: calc(211px);
        height: calc(108px);
        left: 190px;
        top: -90px;
    }


    header .shoulder span:nth-child(2) span {
        display: block;
        background-image: url(/assets/img/top_kv_bln.png);
        background-size: 100% 100%;
        width: calc(211px);
        height: calc(108px);
        transform-origin: center bottom;
        animation-name:anm-bln;
        animation-duration: 2000ms;
        animation-iteration-count: infinite;
    }



    header .shoulder span:nth-child(3) {
        background-image: url(/assets/img/top_kv_1.png);
        width: calc(180px);
        height: calc(69px);
        left: 340px;
        top: 0;
    }

    header .shoulder span:nth-child(4) {
        background-image: url(/assets/img/top_kv_2.png);
        width: calc(151px);
        height: calc(69px);
        left: 540px;
        top: 0;
    }
    header .shoulder span:nth-child(5) {
        background-image: url(/assets/img/top_kv_3.png);
        width: calc(536px);
        height: calc(67px);
        left: 80px;
        top: 100px;
    }

    header h1 {
        position: relative;
        margin-top: 0px;
        width: calc(667px);
        height: calc(210px);
        margin-left: auto;
        margin-right: auto;
    }

    header h1  span{
        display: block;
        background-size: 100% 100%;
        text-indent: -9999px;
        overflow: hidden;
        position: absolute;
    }


    header h1 span:nth-child(1) {
        background-image: url(/assets/img/top_kv_4.png);
        width: calc(199px);
        height: calc(186px);
        left: 0px;
        top: 0px;
    }
    header h1 span:nth-child(2) {
        background-image: url(/assets/img/top_kv_5.png);
        width: calc(166px);
        height: calc(154px);
        left: 160px;
        top: 30px;
    }

    header h1 span:nth-child(2) {
        background-image: url(/assets/img/top_kv_5.png);
        width: calc(166px);
        height: calc(154px);
        left: 160px;
        top: 30px;
    }
    header h1 span:nth-child(3) {
        background-image: url(/assets/img/top_kv_6.png);
        width: calc(154px);
        height: calc(154px);
        left: 340px;
        top: 30px;
    }
    header h1 span:nth-child(4) {
        background-image: url(/assets/img/top_kv_7.png);
        width: calc(154px);
        height: calc(154px);
        left: 520px;
        top: 30px;
    }


    header .en {
        display: block;
        background-size: 100% 100%;
        text-indent: -9999px;
        overflow: hidden;
        background-image: url(/assets/img/top_kv_8.png);
        width: calc(458px);
        height: calc(31px);
        margin-left: auto;
        margin-right: auto;
    }

 
    

    



    h2 {
        text-align: center;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 20px;
        line-height: 1.35em;
    }






    .contents {
        margin-top: 40px;
        width: 1020px;
        margin-left: auto;
        margin-right: auto;

    }


    .contents .items {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        margin-bottom: 20px;

    }

    .contents .item {
        margin-left: 20px;
        margin-right: 20px;
        width: 300px;
        margin-bottom: 40px;
        padding: 0;
    }



    .contents .item:nth-child(odd) {
        background-color: transparent;
    }





    .pickup {
        margin-top: 40px;
        margin-bottom: 80px;
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }


    .pickup .image {
        margin-top: 30px;
        height: auto;
        width: 100%;
        margin-left: auto;
    }

    .pickup .texts {
        margin-left: 20px;
        margin: 20px;
    }

    .pickup .texts .title {
        font-size: 24px;
        line-height: 1.35em;
        text-align: center;
        font-weight: 700;
    }

    .pickup .texts .lead {
        margin-top: 10px;
        font-size: 16px;
        line-height: 1.35em;
        font-weight: 700;
    }

    .pickup .texts .body {
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.75em;
    }







    .pickup .texts .btn a {
        margin-top: 20px;

    }






}



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






    header {
        padding-top: 16vw;
        padding-bottom: 6vw;
        background-position: center top;

    }

  
    

    header .shoulder {
        width: 88vw;
        height: calc(88vw / 672 * 210 );
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
    header .shoulder  span{
        display: block;
        background-size: 100% 100%;
        text-indent: -9999px;
        overflow: hidden;
        position: absolute;
    }

    header .shoulder span:nth-child(1) {
        background-image: url(/assets/img/top_kv_0.png);
        width: calc(96vw / 750 * 320 );
        height: calc(96vw / 750 * 65);
        left: 0;
        top: calc(96vw / 750 * 5 );
    }

    header .shoulder span:nth-child(2) {
        text-indent: 0;
        overflow: inherit;
        width: calc(96vw / 750 * 211);
        height: calc(96vw / 750 * 108 );
        left: calc(96vw / 750 * 190 );
        top: calc(96vw / 750 * -90 );
    }


    header .shoulder span:nth-child(2) span {
        display: block;
        background-image: url(/assets/img/top_kv_bln.png);
        background-size: 100% 100%;
        width: calc(96vw / 750 * 211);
        height: calc(96vw / 750 * 108 );
        transform-origin: center bottom;
        animation-name:anm-bln;
        animation-duration: 2000ms;
        animation-iteration-count: infinite;
    }



    header .shoulder span:nth-child(3) {
        background-image: url(/assets/img/top_kv_1.png);
        width: calc(96vw / 750 * 180);
        height: calc(96vw / 750 * 69);
        left: calc(96vw / 750 * 340);
        top: calc(96vw / 750 * 0);
    }

    header .shoulder span:nth-child(4) {
        background-image: url(/assets/img/top_kv_2.png);
        width: calc(96vw / 750 * 151);
        height: calc(96vw / 750 * 69);
        left: calc(96vw / 750 * 540 );
        top: 0;
    }
    header .shoulder span:nth-child(5) {
        background-image: url(/assets/img/top_kv_3.png);
        width:  calc(96vw / 750 * 536);
        height:  calc(96vw / 750 * 67 );
        left:  calc(96vw / 750 * 80);
        top:  calc(96vw / 750 * 100);
    }

    header h1 {
        position: relative;
        margin-top: 0px;
        width: 88vw;
        height: calc(88vw / 667 * 210 );
        margin-left: auto;
        margin-right: auto;
    }

    header h1  span{
        display: block;
        background-size: 100% 100%;
        text-indent: -9999px;
        overflow: hidden;
        position: absolute;
    }


    header h1 span:nth-child(1) {
        background-image: url(/assets/img/top_kv_4.png);
        width:  calc(96vw / 750 * 199);
        height:  calc(96vw / 750 * 186);
        left: 0px;
        top: 0px;
    }
    header h1 span:nth-child(2) {
        background-image: url(/assets/img/top_kv_5.png);
        width:  calc(96vw / 750 * 166);
        height:  calc(96vw / 750 * 154);
        left:  calc(96vw / 750 * 160);
        top:  calc(96vw / 750 * 30);
    }

    header h1 span:nth-child(2) {
        background-image: url(/assets/img/top_kv_5.png);
        width:  calc(96vw / 750 * 166);
        height:  calc(96vw / 750 * 154);
        left:  calc(96vw / 750 * 160);
        top:  calc(96vw / 750 * 30);
    }
    header h1 span:nth-child(3) {
        background-image: url(/assets/img/top_kv_6.png);
        width:  calc(96vw / 750 * 154);
        height:  calc(96vw / 750 * 154);
        left:  calc(96vw / 750 * 340);
        top:  calc(96vw / 750 * 30);
    }
    header h1 span:nth-child(4) {
        background-image: url(/assets/img/top_kv_7.png);
        width:  calc(96vw / 750 * 154);
        height:  calc(96vw / 750 * 154);
        left:  calc(96vw / 750 * 520);
        top:  calc(96vw / 750 * 30);
    }


    header .en {
        display: block;
        background-size: 100% 100%;
        text-indent: -9999px;
        overflow: hidden;
        background-image: url(/assets/img/top_kv_8.png);
        width: calc(88vw);
        height: calc(88vw / 458 * 31);
        margin-left: auto;
        margin-right: auto;
    }


    





    h2 {
        text-align: center;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 20px;
        line-height: 1.35em;
    }





    .pickup {
        margin-top: 6vw;
    }


    .pickup .image {
        margin-top: 6vw;
        height: 100vw;
        width: calc(100vw / 630 * 1200);
        margin-left: calc((100vw / 630 * 1200 - 100vw) / -2);
    }

    .pickup .texts {
        margin-left: 20px;
        margin: 20px;
    }

    .pickup .texts .title {
        font-size: 24px;
        line-height: 1.35em;
        text-align: center;
        font-weight: 700;
    }

    .pickup .texts .lead {
        margin-top: 10px;
        font-size: 16px;
        line-height: 1.35em;
        font-weight: 700;
    }

    .pickup .texts .body {
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.75em;
    }







    .pickup .texts .btn a {
        margin-top: 20px;

    }







    .contents {
        margin-top: 12vw;
    }


    .contents .items {
        margin-top: 6vw;
        margin-bottom: 12vw;

    }

    .contents .item:nth-child(odd) {
        background-color: rgba(0, 0, 0, 0.1);
    }






}