@charset "UTF-8";

html {font-size: 62.5%;}

* {-webkit-box-sizing: border-box;box-sizing: border-box;}

body{
    overflow:unset
}
#Contents .slick-prev.slick-arrow {display: none !important;} 
#Contents .slick-next.slick-arrow {display: none !important;}
#Contents .slick-dots li.slick-active button:before {background-color: #9D7566;content: "";border-radius: 5px;}
#Contents .slick-dots li button:before {background-color: #CEBAB2;content: "";border-radius: 5px;opacity: 1 !important;}
/* #Contents .slick-dots {display: block !important;} */
#Contents video,svg ,img{width: 100%;height: auto;}
#Header,#Foot {display: block;}
#Wrap {width: 100%;overflow-x: unset;}

/* ====================================================================
                                  ⬇︎ animation ⬇︎
==================================================================== */
#Contents .scrollFade.done {opacity: 1;transform: translate(0, 0);}
#Contents .scrollFade {opacity: 0;transition: all 2s;}
#Contents .scrollFadeUp.done {opacity: 1;transform: translate(0, 0);}
#Contents .scrollFadeUp {opacity: 0;transform: translateY(100px);transition: all .8s;}
#Contents .scrollFade2.done {opacity: 1;transform: translate(0, 0);}
#Contents .scrollFade2 {opacity: 0;transform: translateX(-100px);transition: all .8s;}
#Contents .fade {transition: all 2s;opacity: 0;visibility: hidden;transform: translate(0px, 0px);}
#Contents .fadein {opacity: 1;visibility: visible;transform: translate(0px, 0px);transition-delay: 1s;} 
#Contents .loadFade{animation:fadeIn ease 2s;}
@keyframes fadeIn{
    from{opacity: 0;}
    to{opacity: 1; }
}
#Contents .loadFadeUp{opacity: 0;transform: translateY(100px);transition: all .8s;}
#Contents .loadFadeUp.done{opacity: 1;transform: translate(0, 0);}
#Contents .scrollFadeBg{position: relative;}
#Contents .loadFadeBg::before {
    content: '';
    display: block;
    position: absolute;
    left: -0.4rem;
    bottom: -0.1rem;
    width: 0;
    height: 1rem;
    background-color: #DCCA80;
    z-index: -20;
}
.loadFadeBg.done::before{width: 9rem !important;}
.loadFadeBg::before{transition: all 1s;}

/* #Contents .loadFade.done::after{width: 100% !important;} */
#contents .loadFade::after {width: 0;transition: all .6s;}

/* ====================================================================
                                  ⬆︎ animation ⬆︎
==================================================================== */


/* ====================================================================
                                  ⬇︎ for all ⬇︎
==================================================================== */
.main-area{
    overflow: unset;
}
.main-container {
    width: 100%;
    max-width: 128rem;
    margin: 0 auto;
    margin-top: 8.5rem;
    font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic', 'メイリオ', sans-serif;
    font-feature-settings: "palt";
    color: #000000;
}
.footer .footer-inner{margin: 0;}
.fbArea{width: 15px;}
.LINE{width: 30px;}
.hamburger{display: block;}

#Contents .lp-text{font-family: futura-pt, sans-serif;font-weight: 400;font-style: normal;}
#Contents h2{font-family: futura-pt, sans-serif;font-weight: 400;font-style: normal;color: #8BA4B2;}
#Contents h3{font-family: adobe-garamond-pro, serif;font-weight: 600;color: #603813;}
#Contents h4{font-family: futura-pt, sans-serif;font-weight: 400;font-style: normal;color: #8BA4B2;} 
#Contents .contentsCredit{font-family: futura-pt, sans-serif;font-weight: 400;font-style: normal;}
#Contents .arial{font-family: Arial, Helvetica, sans-serif;}

#Contents .relative{position: relative;}   

#Contents .more_btw{
    align-items: center;
    justify-content: end !important;
}

a:hover{
    opacity: 1;
    cursor: hand;
}


/* ====================================================================
                                  ⬆︎ for all ⬆︎
==================================================================== */



/* for pc */
@media only screen and (min-width: 600px) {

    #Contents .slick-dots li.slick-active button:before {width: 1rem;height: 1rem;}
    #Contents .slick-dots li button:before {width: 1rem;height: 1rem;}
    #Contents .slick-dots li {width: 1rem !important;height: 1rem !important;margin: 0 .5rem !important;}
    #Contents .slick-dots {left: 0.5rem;bottom: -3rem !important;text-align: right;}
    #Contents .slick-dotted.slick-slider{margin-bottom: 5rem;}
  
    .main-area::after {margin: 0 auto !important;}
    .spOnly{display: none;}
    .pcOnly{display: block;}

    #Contents {
        width: 100%;
        /* background-image: url(../img/page_pc.jpg); */
        /* background-image: url(../img/page_pc2.jpg); */
        background-size: 1366px;
        background-repeat: no-repeat;
        background-position-x: center;
         background-position-y: -155px; 
        /* background-position-y: 14617px; */
    } 
    .main-container {
        width: 100%;
        max-width: 136rem;
        margin: 0 auto;
        margin-top: 5.2rem;
        font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic', 'メイリオ', sans-serif;
        font-feature-settings: "palt";
        line-height: 1;
        /* opacity: 0.6; */
    }

    .innerArea{
        width: 136rem;
        margin: auto;
    }

  
    #Contents h2{
        font-size: 3.8rem;
        line-height: 2;
        letter-spacing: 0em;
    }
    
    #Contents h3{
        font-size: 2rem;
        letter-spacing: 0.05em;
    }
    
    #Contents h4{
        font-size: 2.4rem;
        line-height: 1;
        letter-spacing: 0.05em;
    }

    #Contents .lp-text{
        font-size: 2rem;
        letter-spacing: 0.09em;
        line-height: 1;
    }

    #Contents .contentsCredit{
        font-size: 1rem;
        line-height: 1.4;
        letter-spacing: 0.06em;
        margin-top: 1rem;
    }

    #Contents .arial{font-size: 5.6rem;font-weight:400;letter-spacing: 0.07em;color: #FFAA28;}

    #Contents .flexItem{display: flex;width: 100%;margin: auto;justify-content:center;flex-wrap: wrap;}
    #Contents .flexItem02{display: flex;justify-content: flex-start;}
    #Contents .flexItem02.__02{height: 164rem;}
    #Contents .flexItem02.__03{height: 212.4rem;}
    #Contents .flexItem02.__04{height: 219.5rem;}
    #Contents .flexItem02.__05{height: 171.6rem;}
    #Contents .row-reverse{flex-flow: row-reverse;} 
 

    #Contents .slick-slide .spOnly{
        display: none;
    }

    #Contents .inlineBlock{
        display: inline-block;
    }

    #Contents .VideoArea{
        position: -webkit-sticky;
        position: sticky;
        top: 3vh;
        z-index: 1;
    }

/* ====================================================================
                                 wipeWrappe
==================================================================== */


    #Contents .wipeWrappe {
        display: flex;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transform-style: preserve-3d;
      }
      
      #Contents .wipe {
        flex: 1 1 20%;
        width: 20%;
        overflow: hidden;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
      }
      
      #Contents .swiper-slide {
        width: 944px;
        height: 656px;
      }
      
      #Contents .swiper-slide-active .wipeImage {
        opacity: 1;
        animation: slidewipe 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0.5s 1 normal both;
      }
      
      #Contents .wipeImage {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      
      #Contents .wipeImage:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #aba69a;
        opacity: 0.00001;
      }
      
      #Contents .wipeImage:after {
        content: "";
        display: block;
        width: 300%;
        height: 100%;
        background-size: cover;
        background-position: 50%;
        background-repeat: no-repeat;
      }
      
      #Contents .wipe:nth-child(1) .wipeImage:after {
        background-image: url(../img/MV2.jpg);
        margin-left: 0;
      }
      
      #Contents .wipe:nth-child(2) .wipeImage:after {
        background-image: url(../img/MV2.jpg);
        margin-left: -100%;
      }
      
      #Contents .wipe:nth-child(3) .wipeImage:after {
        background-image: url(../img/MV2.jpg);
        margin-left: -200%;
      }
      
      @keyframes slidewipe {
        0% {
          transform: translate3d(101%, 0, 0);
        }
        to {
          transform: translateZ(0);
        }
      }
      

 

/* ====================================================================
                                  モーダルウィンドウ
==================================================================== */

.no_scroll {
    overflow: hidden;
  }

/* 開くボタン */
.button-open {
    display: block;
    margin-left: auto;
    cursor: pointer;
  }
  .textOpen.lp-text{
    position: relative;
    text-align: end;
    width: 30rem;
    margin-left: auto;
    padding-right: 4.1rem;
    margin-top: 1.5rem;
  }
  .textOpen::after{
        content: "";
        display: block;
        position: absolute;
        width: 2rem;
        height: 2rem;
        top: 0rem;
        right: 0;
        background: url(../img/puicon.svg);
  }
  /* モーダルウィンドウ */
  .modal-window {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    /* z-index: 11; */
  }
  /* 閉じるボタン */
  .button-close {
    position: absolute;
    top: 0;
    right: -3rem;
    cursor: pointer;
  }
  .button-close::after {
    position: absolute;
    content: "";
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    top: 0.3rem;
    right: -3rem;
    background: url(../img/baicon.svg) no-repeat;
  }
  /* オーバーレイ */
  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 10;
  }


  #Contents .modal-window p{
      text-align: center;
  }
  #Contents .modal-window .contentsCredit{
      text-align: left;
  }
  #Contents .modal-window ul{
      margin-top: 6rem;
  }
  #Contents .modal-window li{
      width: 30rem;
  }
  #Contents .modal-window.__01 .mid{
      margin: 0 8rem;
  }
  #Contents .modal-window .modalArea{
      display: block;
      width: 106rem;
      margin: auto;
      position: relative;
  }
  #Contents .modal-window .modalBlock{
      margin-top: 7rem;
  }

  #Contents .modal-window.__02 .mid{
      margin-left: 8rem;
   }
  #Contents .modal-window.__03 .mid{
      margin-left: 1rem;
   }



/* ====================================================================
                                  firstView
==================================================================== */

#Contents .firstview{
    width: 94.4rem;
    height: 65.6rem;
    margin: auto;
}
#Contents .firstview .MV2{
    width: 100%;
    height: auto;
}

/* fade2 */
.mvImg {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 45px auto;
}
.slideArea .mvFade-js .mvImg::before,
.slideArea .mvFade-js .mvImg::after,
.slideArea .mvFade-js .fadeBg::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: calc(100% / 3);
    height: 100%;
    transition : all 1.2s;
    background-color: #fff;
    transition-delay: .2s;
    z-index: 100;
}
.slideArea .mvFade-js .mvImg::before {
    left: 0;
}
.slideArea .mvFade-js .mvImg::after {
    left: calc(100% / 3);
}
.slideArea .mvFade-js .fadeBg::before {
    left: calc(100% / 3 * 2);
}
.slideArea .mvFade-js.slick-active .mvImg::before,
.slideArea .mvFade-js.slick-active .mvImg::after,
.slideArea .mvFade-js.slick-active .fadeBg::before {
    width: 0 !important;
}

/* ====================================================================
                                  section1
==================================================================== */

#Contents .sec_1{
    margin-top: 10rem;
}
#Contents .puicon{
    width: 1.5rem;
}
#Contents .more_btw .p_1{
    padding-right: 1rem;
}
#Contents .sec_1 .flexblock1{
    width: 38.5rem;
    margin-left: 20.6rem;
    /* z-index: 1; */
}
#Contents .sec_1 .flexblock2{
    width: 50rem;
    margin-top: 29.5rem;
    margin-left: 16.6rem;
}

#Contents .sec1_modal{
    position: relative;
    z-index: 20;
}

/* ====================================================================
                                  section2
==================================================================== */

#Contents .sec_2{
    margin-top: -14rem;
}
#Contents .sec_2 .flexblock1{
    width: 38.5rem;
    margin-right: 20.6rem;
    /* z-index: 1; */
}
#Contents .sec_2 .flexblock2{
    width: 43.8rem;
    margin-top: 46.6rem;
    margin-right: 23rem;
}
#Contents .sec_2 .flexblock2 .block2{
    width: 30rem;
    margin: 7.8rem auto 0;
}

/* ====================================================================
                                  section3
==================================================================== */

#Contents .sec_3{
    margin-top: -23rem;
}
#Contents .sec_3 .flexblock1{
    width: 43.8rem;
    margin-left: 18rem;
}
#Contents .sec_3 .flexblock2{
    width: 43.8rem;
    margin-top: 45.6rem;
    margin-left: 12.6rem;
}

/* ====================================================================
                                  section4
==================================================================== */

#Contents .sec_4{
    margin-top: -22.4rem;
}
#Contents .sec_4 .flexblock1{
    width: 36.8rem;
    margin-left: 20.6rem;
    z-index: 1;
}
#Contents .sec_4 .flexblock2{
    width: 37.6rem;
    margin-top: 45.4rem;
    margin-left: 20rem;
}
#Contents .sec_4 .block{
    position: relative;
    width: 50rem;
    margin-top: -11.5rem;
    margin-left: 11.7rem;
}
#Contents .sec_4 .block::before{
    position: absolute;
    display: block;
    content: "";
    top: -5rem;
    right: 18rem;
    width: 1.6rem;
    height: 92rem;
    background-color: #F0F55F;
    z-index: -10;
}
#Contents .sec_4 .textOpen.lp-text{
    margin-top: 2rem;
    padding-right: 3.8rem;
}

/* ====================================================================
                                  section5
==================================================================== */

#Contents .sec_5{
    margin-top: -22.3rem;
}
#Contents .sec_5 .flexblock1{
    width: 30rem;
    margin-top: 40.3rem;
    margin-left: 24rem;
}
#Contents .sec_5 .flexblock2{
    width: 38.5rem;
    margin-left: 24.3rem;
}
#Contents .sec_5 .flexblock1 .block2{
    width: 50rem;
    margin-top: 17.6rem;
    margin-left: -12.3rem;
}

/* ====================================================================
                                  section6
==================================================================== */

#Contents .sec_6{
    margin-top: -13.4rem;
}
#Contents .sec_6 .flexblock1{
    width: 43.8rem;
    margin-left: 21rem;
}
#Contents .sec_6 .flexblock2{
    width: 50rem;
    margin-top: 45.4rem;
    margin-left: 9.5rem;
}

/* ====================================================================
                                  section7
==================================================================== */

#Contents .sec_7{
    margin-top: -32.2rem;
}
#Contents .sec_7 .flexblock1{
    width: 38.5rem;
    margin-left: 20.6rem;
}
#Contents .sec_7 .flexblock2{
    position: relative;
    width: 43.8rem;
    margin-top: 57rem;
    margin-left: 16.7rem;
}
#Contents .sec_7 .block{
    position: relative;
}
#Contents .sec_7 .block::before{
    position: absolute;
    display: block;
    content: "";
    bottom: -14.4rem;
    left: 10.2rem;
    width: 1.8rem;
    height: 33.3rem;
    background-color: #FF6BB0;
    z-index: -10;
}

/* ====================================================================
                                  section8
==================================================================== */

#Contents .sec_8{
    margin-top: -13rem;
}
#Contents .sec_8 .flexblock1{
    width: 51rem;
    margin-right: 8.2rem;
    position: relative;
}
#Contents .sec_8 .flexblock1 .block{
    padding: 0 3.56rem;
}
#Contents .sec_8 .flexblock2{
    width: 50rem;
    margin-top: 35.5rem;
    margin-right: 15rem;
}
#Contents .sec_8 .an_text{
    position: absolute;
    top: 29rem;
    left: 0;
    z-index: 10;
}

#Contents .line-6.scrollShowBg.done{/*対象のテキスト*/
    position: relative;
    white-space: nowrap;
    overflow: hidden;  
}
#Contents .line-6.anim-typewriter.scrollShowBg.done{/*アニメーションセッティング*/
    animation: typewriter 1.5s 1 normal both,
   blinkTextCursor 500ms infinite normal;
   opacity: 1;
}
#Contents .line-6 {
    opacity: 0;
}
@keyframes typewriter{/*タイプライターライクなアニメーション*/
    from{width: 0;}
    to{width: 100%;}
  }

/* ====================================================================
                                  section9
==================================================================== */

#Contents .sec_9{
    margin: 17.5rem auto 15rem;
    width: 22.4rem;
}
#Contents .sec_9 ul{
    display: flex;
}
#Contents .sec_9 li{
    width: 4.8rem;
}
#Contents .sec_9 li:nth-of-type(2){
    margin: auto 4rem;
}

/* ====================================================================
                                  section10
==================================================================== */

#Contents .sec_10{
    margin: 0 auto 20rem;
    width: 89rem;
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    font-style: normal;
    line-height: 1.28;
}
#Contents .sec_10 .flexItem{
    justify-content: space-between;
    align-items: flex-end;
}

#Contents .sec_10 li:nth-child(n+2){
    margin-top: 1.24rem;
}

#Contents .sec_10 .flexblock1 span{
    font-size: 1.1rem;
    padding-left: 0.8rem;
}

#Contents .sec_10 .flexblock2{
    width: 37rem;
}
#Contents .sec_10 .flexblock2 p{
    margin-top: 1rem;
}



/* ====================================================================
                                  staffText
==================================================================== */

 #Contents .staffText {
    margin-top: 8.8rem;
    padding-bottom: 9rem;
    color: #8BA4B2;
}
#Contents .staffText p {
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0.025em;
    line-height: 1.83;
} 


/* ====================================================================
                                  button
==================================================================== */

 #Contents .btw{
    width: 22rem;
    margin-top: 8.6rem;
    margin-right: auto;
    margin-bottom: 0rem;
    margin-left: auto;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #8C8C8C;
}
#Contents .btw a{
    display: inline-block;
    width: 100%;
    font-size: 1.5rem;
    line-height: 2.3;
    letter-spacing: .02rem;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #333333;
} 


}


/* ====================================================================
                                  IE
==================================================================== */

@media all and (-ms-high-contrast: none) {
    /* ここに書く */


  }

/* ====================================================================
                                  IE
==================================================================== */



/* for tablet */

@media screen and (max-width: 1360px) and (min-width: 561px) {
  html {font-size: calc(10* (100vw / 1360)) !important;}  

#Contents .slick-dots li {
    height: 0.6rem;
}
#Contents .slick-dots {
    bottom: -3.2rem !important;
}


}

/* for tablet */
/* @media only screen and (min-width: 768px) and (max-width: 1279px) {
  
  
}




/* =============================================================================================================
================================================================================================================
                                  ⬇︎ SP ⬇︎
================================================================================================================
================================================================================================================*/

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

#Contents {
    /* background-image: url(../img/page_sp_1.jpg); */
    /* background-image: url(../img/page_sp_2.jpg); */
    /* background-image: url(../img/page_sp_3.jpg); */
    background-size: 375px;
    background-repeat: no-repeat;
    background-position: center 0;
    /* background-position-y: 188px; */ 
    /* background-position-y: 4999px; */
     background-position-y: 9622px; 
  }

  
.main-container {
    width: 100%;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: calc(1 *(100vw/750));
    font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic', 'メイリオ', sans-serif;
    font-feature-settings: "palt";
    line-height: 2;
    /* opacity: 0.6; */
     overflow: hidden; 
    }
   
    .spOnly{display: block;}
    .pcOnly{display: none;}
  
    #Contents .slick-dots li.slick-active button:before {width: calc(12*(100vw/750));height: calc(12*(100vw/750));}
    #Contents .slick-dots li button:before {width: calc(12*(100vw/750));height: calc(12*(100vw/750));}
    #Contents .slick-dots li {width: calc(12*(100vw/750)) !important;height: calc(12*(100vw/750)) !important;margin: 0 calc(9*(100vw/750)) !important;}
    #Contents .slick-dots {left: calc(0*(100vw/750)) !important;bottom: calc(-42*(100vw/750)) !important;;text-align: center;}
    #Contents .slick-dotted.slick-slider{margin-bottom: 0;}
    #Contents .slick-dots li button {width: 0 !important;height: 0 !important;padding: 0 !important;}
  
    .main-area::after {
        margin: 0 auto !important;
    }
  
    #Contents h2{
        font-size: calc(66*(100vw/750));
        letter-spacing: 0.05em;
        line-height: 1.068;
    }
    
    #Contents h3{
        font-size: calc(36*(100vw/750));
        line-height: 1.8;
        letter-spacing: 0.05em;
    }
    
    #Contents h4{
        font-size: calc(40*(100vw/750));
        line-height: 1;
        letter-spacing: 0.05em;
    }

    #Contents .lp-text{
        font-size: calc(30*(100vw/750));
        letter-spacing: 0.09em;
        line-height: 0.7;
    }

    #Contents .contentsCredit{
        font-size: calc(20*(100vw/750));
        line-height: 1.25;
        letter-spacing: 0.06em;
        margin-top: calc(16*(100vw/750));
    }

    #Contents .flexItem{
        display: block;
        width: 100%;
        margin: auto;
        justify-content: flex-start;
        flex-wrap: wrap;
    } 

    .header.hide{
        transform: translateY(-100%);
    }
    .header{
        position: fixed;
        top: 0;
        width: 100%;
        background: #fff;
        transition: .5s;
        z-index: 999;
    }

    .modal-window.hide{
        display: none;
    }

/* ====================================================================
                                  モーダルウィンドウ
==================================================================== */

.no_scroll {
    overflow: hidden;
  }

/* 開くボタン */
.button-open {
    display: block;
    margin-left: auto;
    cursor: pointer;
    padding: unset;
    width: 100%;
  }
  .textOpen.lp-text{
    position: relative;
    text-align: end;
    width: calc(200*(100vw/750));
    margin-left: auto;
    padding-right: calc(104*(100vw/750));
    margin-top: calc(53*(100vw/750));
  }
  .textOpen::after{
        content: "";
        display: block;
        position: absolute;
        width: calc(35*(100vw/750));
        height: calc(35*(100vw/750));
        top: -5px;
        right: 25px;
        background: url(../img/puicon_sp.svg);
  }
  /* モーダルウィンドウ */

  .modal-header{
    width: 100%;
    height: calc(160*(100vw/750));
    background-color: #ffff;
    position: fixed;
    z-index: 99;
  }
  .modal_headerArea{
    position: relative;
    padding-top: calc(83*(100vw/750));
  }
  .modal_headerArea p{
      font-size: calc(40*(100vw/750)) !important;
  }
  .modal-window {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    z-index: 11;
  }
  /* 閉じるボタン */
 
  .button-close::after {
    position: absolute;
    content: "";
    display: block;
    width: calc(44*(100vw/750));
    height: calc(44*(100vw/750));
    top: calc(40*(100vw/750));
    right: calc(40*(100vw/750));
    background: url(../img/baicon_sp.svg) no-repeat;
  }
  /* オーバーレイ */
  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 10;
  }


  #Contents .modal-window p{
      text-align: center;
  }
  #Contents .modal-window .contentsCredit{
      text-align: left;
  }
  #Contents .modal-window ul{
      margin-top: 6rem;
  }
  #Contents .modal-window li{
    width: calc(650*(100vw/750));
    margin: auto;
  }
  #Contents .modal-window .modalArea{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-top: calc(0*(100vw/750));
  }
  #Contents .modal-window .modalBlock{
    margin-top: calc(160*(100vw/750));
    margin-bottom: calc(200*(100vw/750));
  }

  #Contents .modal-window li:nth-child(n+2){
    margin-top: calc(200*(100vw/750));
  }

  #Contents .sec_4 .modal-window .mid{
    margin-top: calc(40*(100vw/750));
  }



/* ====================================================================
                                  firstView
==================================================================== */

#Contents .firstview{
    width: 100%;
    margin: auto;
}

/* ====================================================================
                                  section1
==================================================================== */

#Contents .sec_1{
    margin-top: calc(193*(100vw/750));
}
#Contents .puicon{
    width: 1.5rem;
}
#Contents .more_btw .p_1{
    padding-right: 1rem;
}
#Contents .sec_1 .flexblock1{
    width: 100%;
    z-index: 1;
}
#Contents .sec_1 .flexblock2{
    width: calc(562*(100vw/750));
    margin: calc(214*(100vw/750)) auto 0;
}

/* ====================================================================
                                  section2
==================================================================== */

#Contents .sec_2{
    margin-top: calc(210*(100vw/750));
}
#Contents .sec_2 .flexblock1{
    width: 100%;
}
#Contents .sec_2 .flexblock2{
    width: 100%;
}
#Contents .sec_2 .flexblock2 .block1{
    margin-top: calc(266*(100vw/750));
}
#Contents .sec_2 .flexblock2 .block1 p{
    padding-left: calc(95*(100vw/750));
}
#Contents .sec_2 .flexblock2 .block2{
    width: calc(562*(100vw/750));
    margin: calc(212*(100vw/750)) auto 0;
}

/* ====================================================================
                                  section3
==================================================================== */

#Contents .sec_3{
    margin-top: calc(236*(100vw/750));
}
#Contents .sec_3 .flexblock1{
    width: calc(562*(100vw/750));
    margin: auto;
}
#Contents .sec_3 .flexblock2{
    width: calc(562*(100vw/750));
    margin: calc(210*(100vw/750)) auto 0;
}

/* ====================================================================
                                  section4
==================================================================== */

#Contents .sec_4{
    margin-top: calc(240*(100vw/750));
}
#Contents .sec_4 .flexblock1{
    width: 100%;
}
#Contents .sec_4 .flexblock2{
    width: calc(562*(100vw/750));
    margin: calc(205*(100vw/750)) auto 0;
}
#Contents .sec_4 .block{
    position: relative;
    width: calc(750*(100vw/750));
    margin-top: calc(268*(100vw/750));
}
#Contents .sec_4 .block::before{
    position: absolute;
    display: block;
    content: "";
    top: calc(-90*(100vw/750));
    right: calc(280*(100vw/750));
    width: calc(20*(100vw/750));
    height: calc(1387*(100vw/750));
    background-color: #F0F55F;
    z-index: -10;
}
#Contents .sec_4 .block p{
    padding-left: calc(95*(100vw/750));
}

/* ====================================================================
                                  section5
==================================================================== */

#Contents .sec_5{
    margin-top: calc(238*(100vw/750));
}
#Contents .sec_5 .flexblock1{
    width: calc(562*(100vw/750));
    margin: auto;
}
#Contents .sec_5 .flexblock2{
    width: 100%;
    margin: calc(240*(100vw/750)) auto 0;
}
#Contents .sec_5 .block2{
    width: calc(562*(100vw/750));
    margin: calc(210*(100vw/750)) auto 0;
}

/* ====================================================================
                                  section6
==================================================================== */

#Contents .sec_6{
    margin-top: calc(240*(100vw/750));
}
#Contents .sec_6 .flexblock1{
    width: 100%;
}
#Contents .sec_6 .flexblock2{
    width: calc(562*(100vw/750));
    margin: calc(260*(100vw/750)) auto 0;
}
#Contents .sec_6 .flexblock1 p{
    padding-left: calc(95*(100vw/750));
}

/* ====================================================================
                                  section7
==================================================================== */

#Contents .sec_7{
    margin-top: calc(240*(100vw/750));
}
#Contents .sec_7 .flexblock1{
    width: 100%;
}
#Contents .sec_7 .flexblock2{
    position: relative;
    width: calc(562*(100vw/750));
    margin: calc(210*(100vw/750)) auto 0;
}
#Contents .sec_7 .block{
    position: relative;
}
#Contents .sec_7 .block::before{
    position: absolute;
    display: block;
    content: "";
    bottom: calc(-126*(100vw/750));
    left: calc(121*(100vw/750));
    width: calc(20*(100vw/750));
    height: calc(333*(100vw/750));
    background-color: #FF6BB0;
    z-index: -10;
}

/* ====================================================================
                                  section8
==================================================================== */

#Contents .sec_8{
    margin-top: calc(238*(100vw/750));
}
#Contents .sec_8 .flexblock1{
    width: calc(656*(100vw/750));
    margin: auto;
    position: relative;
}
#Contents .sec_8 .flexblock1 .block{
    padding: 0 calc(48*(100vw/750));
}
#Contents .sec_8 .flexblock2{
    width: 100%;
    margin-top: calc(240*(100vw/750));
}
#Contents .sec_8 .an_text{
    position: absolute;
    top: calc(336*(100vw/750));
    left: 0;
    z-index: 10;
}
#Contents .sec_8 .flexblock2 p{
    padding-left: calc(50*(100vw/750));
}

#Contents .line-6.scrollShowBg.done{/*対象のテキスト*/
    position: relative;
    white-space: nowrap;
    overflow: hidden;  
}
#Contents .line-6.anim-typewriter.scrollShowBg.done{/*アニメーションセッティング*/
    animation: typewriter 1.5s normal both,
   blinkTextCursor 500ms infinite normal;
   opacity: 1;
}
#Contents .line-6 {
    opacity: 0;
}
@keyframes typewriter{/*タイプライターライクなアニメーション*/
    from{width: 0;}
    to{width: 100%;}
  }

  #Contents .arial{font-size: calc(72*(100vw/750));font-weight:400;letter-spacing: 0.07em;color: #FFAA28;}

/* ====================================================================
                                  section9
==================================================================== */

#Contents .sec_9{
    margin: calc(236*(100vw/750)) auto calc(114*(100vw/750));
    width: calc(234*(100vw/750));
}
#Contents .sec_9 ul{
    display: flex;
}
#Contents .sec_9 li{
    width: calc(48*(100vw/750));
}
#Contents .sec_9 li:nth-of-type(2){
    margin: auto calc(40*(100vw/750));
}

/* ====================================================================
                                  section10
==================================================================== */

#Contents .sec_10{
    margin: auto;
    width: calc(560*(100vw/750));
    font-weight: 400;
    font-size: calc(20*(100vw/750));
    letter-spacing: 0.08em;
    font-style: normal;
    line-height: 1.2;
}
#Contents .sec_10 .flexItem{
    justify-content: space-between;
    align-items: end;
}

#Contents .sec_10 li:nth-child(n+2){
    margin-top: calc(13.5*(100vw/750));
}

#Contents .sec_10 .flexblock1 span{
    font-size: calc(16*(100vw/750));
    padding-left: calc(8*(100vw/750));
}

#Contents .sec_10 .flexblock2{
    width: calc(560*(100vw/750));
    margin: calc(114*(100vw/750)) auto calc(70*(100vw/750));
}
#Contents .sec_10 .flexblock2 p{
    margin-top: calc(40*(100vw/750));
}

/* ====================================================================
                                  safari
==================================================================== */

/* ::-webkit-full-page-media, :future, :root 
#Contents .navList {
    width: calc(560*(100vw/750));
} */

  /* ====================================================================
                                  safari
==================================================================== */

/* #Contents .navList.Android{
    width: calc(520*(100vw/750));
} */

.iPhone .letter_spacing_1{
    letter-spacing: 0.01em !important;
}

}