@charset "UTF-8";


 #lounge_header {
   position: relative;
 }

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

 html {
   font-size: 62.5%;
   height: 100%;
 }

 body {
   font-size: 1.6rem;
   font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", "verdana", sans-serif;
   color: #333333;
   height: 100%;
   overflow-x: hidden;
 }

 a {
   color: #333333;
   cursor: pointer;
   text-decoration: none;
 }


 #page_top {
   width: 90px;
   position: fixed;
   bottom: 30px;
   right: 40px;
   z-index: 90;
 }

 #page_top a {
   text-align: center;
   text-decoration: none;
   padding: 20px 20px;
 }

 #page_top a:hover {
   text-decoration: none;
 }

 #page_top img {
   width: 100%;
 }


 @media screen and (max-width: 768px) {
   .pc {
     display: none;
   }

   .sp {
     display: block;
   }
 }

 @media screen and (max-width: 1280px) {
   /* #video02 {
    width: auto;
    height: 97.3vw;
    mask-image: url(../img/milk_bg.svg);
    -webkit-mask-image: url(../img/milk_bg.svg);
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  #video03 {
    width: auto;
    height: 107.0vw;
    mask-image: url(../img/mix_bg.svg);
    -webkit-mask-image: url(../img/mix_bg.svg);
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position:left;
    -webkit-mask-size: contain;
    mask-size: contain;
  } */
   /* #video02 {
    width: 100%;
    mask-image: url(../img/milk-bg-pc.svg);
    -webkit-mask-image: url(../img/milk-bg-pc.svg);
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position:center top;
    mask-position:center top;
    -webkit-mask-size: cover;
    mask-size: cover;
  }
  #video03 {
    width: 100%;
    mask-image: url(../img/mix-bg-pc.svg);
    -webkit-mask-image: url(../img/mix-bg-pc.svg);
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position:left top;
    mask-position:left top;
    -webkit-mask-size: cover;
    mask-size: cover;
  } */
 }

 @media screen and (min-width: 786px) and (max-width: 1179px) {
   #video01 {
     height: 100%;
   }
 }

 @media screen and (min-width: 1179px) {
   #video01 {
     width: 100%;
   }
 }

 @media screen and (min-width: 786px) and (max-width: 1688px) {
   #video02 {
     height: 100%;
     margin-left: calc(calc(100vw - 1688px) / 2);
   }
 }

 @media screen and (min-width: 1688px) {
   #video02 {
     width: 100%;
   }
 }

 @media screen and (min-width: 786px) and (max-width: 1576px) {
   #video03 {
     height: 100%;
     margin-left: calc(calc(100vw - 1576px) / 2);
   }
 }

 @media screen and (min-width: 1576px) {
   #video03 {
     width: 100%;
   }
 }


 @media screen and (min-width: 768px) {
   .pc {
     display: block;
   }

   .sp {
     display: none;
   }

   .slider-cafeore .ore-slide-content {
     margin: 0 auto;
     width: 630px;
     text-align: center;
     padding-top: 267px;
   }

   .slider-cafeore .ore-slide-content img {
     width: 100%;
   }

   .orettl {
     width: 390px;
     z-index: 1000;
     left: 0;
     right: 0;
     margin: 0 auto;
     top: 200px;
     padding-bottom: 60px;
   }

   * /.oreNewflavor {
     width: 500px;
     z-index: 1000;
     left: 0;
     right: 0;
     margin: 0 auto;
     top: 260px;
   }

   .easy {
     /* background-image: url(../img/easy-bg-pc.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top; */
     height: 666px;
   }

   .video._easyMovie {
     /* height: 666px; */
     width: 100%;
     height: 100%;
     mask-image: url(../img/easy-bg-pc.svg);
     -webkit-mask-image: url(../img/easy-bg-pc.svg);
     mask-mode: alpha;
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-position: center top;
     mask-position: center top;
     -webkit-mask-size: cover;
     mask-size: cover;
     /* mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center top; */
   }

   .easyText {
     position: absolute;
     top: 200px;
     left: 0;
     right: 0;
     margin: 0 auto;
     max-width: 610px;
   }

   .easyText img {
     width: 100%;
   }

   .milk {
     /* background-image: url(../img/milk-bg-pc.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top; */
     height: 950px;
   }

   .milk h2 {
     position: absolute;
     top: 200px;
     left: 0;
     right: 0;
     margin: 0 auto;
     max-width: 490px;
   }

   .video._milkMovie {
     width: 100%;
     height: 100%;
     mask-image: url(../img/milk-bg-pc.svg);
     -webkit-mask-image: url(../img/milk-bg-pc.svg);
     mask-mode: alpha;
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-position: center top;
     mask-position: center top;
     -webkit-mask-size: cover;
     mask-size: cover;
   }

   #video02 {
     /* height: 100%; */
     /* margin-left:calc(calc(100vw - 1688px) / 2); */
     /* margin-left:calc(calc(100vw - 1440px) / 2); */
   }

   .mix {
     /* background-image: url(../img/mix-bg-pc.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top; */
     height: 940px;
   }

   .video._mixMovie {
     /* width: 100%; */
     height: 100%;
     mask-image: url(../img/mix-bg-pc.svg);
     -webkit-mask-image: url(../img/mix-bg-pc.svg);
     mask-mode: alpha;
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-position: left top;
     mask-position: left top;
     -webkit-mask-size: cover;
     mask-size: cover;
   }


   .drink {
     /* background-image: url(../img/drink-bg-pc.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top; */
     height: 70vw;
   }

   .drinkBody {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
   }

   .drink .itemBox {
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: flex-end;
     /* margin-top: 50px; */
   }

   .drink .item {
     width: 320px;
     position: relative;
     margin: 0 auto;
     font-size: 1rem;
   }

   .drink .item._01 {
     display: inline-block;
     text-align: left;
     margin-right: -10px;
     max-width: 360px;
     width: 23.22vw;
   }

   .drink .item._02 {
     display: inline-block;
     text-align: right;
     margin-left: -10px;
     max-width: 320px;
     width: 20.22vw;
   }

   .drink .drinkText {
     left: 0;
     right: 0;
     margin: 0 auto;
     /* width: 460px; */
     width: 31.9%;
   }

   /* .ore {
     height: clamp(1900px, 84.375vw, 2160px);
     background: #ccefff;
     background-size: auto;
     position: relative;
     mask-image: url(../img/milk_bg.svg);
     -webkit-mask-image: url(../img/milk_bg.svg);
     mask-mode: alpha;
     -webkit-mask-size: cover;
     mask-size: cover;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
   }

   .ore::before {
     content: "";
     position: absolute;
     top: max(-50px, -3.47vw);
     left: 0;
     aspect-ratio: 900 / 1188;
     width: 31.25vw;
     max-width: 450px;
     background: url(../img/bg-milk.png)center / 100% no-repeat;
   } */

   .plusBox {
     position: absolute;
     max-width: 720px;
     margin: 0 auto;
     right: 0;
     left: 0;
     top: 10vw;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
   }

   .l .plusBox {
     position: absolute;
     margin: 0 auto;
     right: 0;
     left: 0;
     top: 10vw;
     display: flex;
     align-items: flex-end;
     justify-content: center;
   }

   .plusTtl {
     position: relative;
     width: 315px;
     padding-bottom: 20px;
   }

   .l .plusTtl {
     position: relative;
     width: 30vw;
     padding-bottom: 20px;
   }

   .plusBox-right {
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
     align-items: center;
   }

   .plusText {
     position: relative;
     width: 346px;
   }

   .l .plusText {
     position: relative;
     width: 30vw;
   }

   .checkBtn {
     width: 325px;
   }

   .l .checkBtn {
     width: 34vw;
   }

   .flavor {
     height: 1160px;
     mask-image: url(../img/flavor_bg.svg);
     -webkit-mask-image: url(../img/easy_bg.svg);
     mask-mode: alpha;
     -webkit-mask-size: cover;
     mask-size: cover;
   }

   .purchase {
     background-image: url(../img/purchase-bg-pc.png);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center top;
     height: 1160px;
     mask-image: url(../img/easy_bg.svg);
     -webkit-mask-image: url(../img/easy_bg.svg);
     mask-mode: alpha;
     -webkit-mask-size: cover;
     mask-size: cover;
   }

   .purchase-box {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     margin: auto;
   }

   .purchase .amazon {
     position: absolute;
     bottom: 400px;
     left: 0;
     right: 0;
     margin: 0 auto;
   }

   .purchase .rakuten {
     position: absolute;
     bottom: 260px;
     left: 0;
     right: 0;
     margin: 0 auto;
   }

   .purchase .lohaco img,
   .purchase .amazon img,
   .purchase .rakuten img {
     width: auto;
   }

   .purchase .lohaco {
     position: absolute;
     top: 480px;
     left: 0;
     right: 0;
     margin: 0 auto;
   }

   @media screen and (min-width: 1000px) {
     .purchase .lohaco {
       position: absolute;
       top: 39%;
       left: 0;
       right: 0;
       margin: 0 auto;
     }

     .purchase .amazon {
       position: absolute;
       top: 53%;
       left: 0;
       right: 0;
       margin: 0 auto;
     }

     .purchase .rakuten {
       position: absolute;
       top: 65%;
       left: 0;
       right: 0;
       margin: 0 auto;
     }
   }

   @media screen and (min-width: 1300px) {
     .purchase .lohaco {
       position: absolute;
       top: 42%;
       left: 0;
       right: 0;
       margin: 0 auto;
     }

     .purchase .amazon {
       position: absolute;
       top: 54%;
       left: 0;
       right: 0;
       margin: 0 auto;
     }

     .purchase .rakuten {
       position: absolute;
       top: 66%;
       left: 0;
       right: 0;
       margin: 0 auto;
     }
   }

   @media screen and (min-width: 1600px) {
     .purchase .lohaco {
       position: absolute;
       top: 46%;
       left: 0;
       right: 0;
       margin: 0 auto;
     }

     .purchase .amazon {
       position: absolute;
       top: 60%;
       left: 0;
       right: 0;
       margin: 0 auto;
     }

     .purchase .rakuten {
       position: absolute;
       top: 72%;
       left: 0;
       right: 0;
       margin: 0 auto;
     }
   }

   @media screen and (min-width: 1800px) {
     .purchase .lohaco {
       position: absolute;
       top: 52%;
       left: 0;
       right: 0;
       margin: 0 auto;
     }

     .purchase .amazon {
       position: absolute;
       top: 66%;
       left: 0;
       right: 0;
       margin: 0 auto;
     }

     .purchase .rakuten {
       position: absolute;
       top: 78%;
       left: 0;
       right: 0;
       margin: 0 auto;
     }
   }

   .movie {
     background-image: url(../img/movie-bg-pc.png);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center top;
     height: 1017px;
   }

   .movie .movieTtl {
     width: 178px;
     padding-top: 180px;
     left: 0;
     right: 0;
     margin: 0 auto;
   }

   .movie .movieBoxes {
     max-width: 750px;
     margin: 0 auto;
   }

   .movie .movieSubTtl {
     width: 310px;
     left: 0;
     right: 0;
     margin: 0 auto;
   }

   .movie .movieBox01 {
     display: block;
     text-align: center;
   }

   .movie .movieBox02,
   .movie .movieBox03 {
     display: inline-block;
     text-align: center;
     padding-top: 40px;
   }

   .movie .movieBox02 {
     padding-right: 26px;
   }

   .movie .movieBox03 {
     padding-left: 26px;
   }

   .movie ul li .movieContents {
     width: 345px;
     margin: 0 auto;
   }

   .movie ul li .movieContents iframe {
     height: 195px;
     width: 345px;
   }

   .movie .movieSubTtl._01 {
     padding-top: 80px;
     padding-bottom: 30px;
   }

   .movie .movieSubTtl._02,
   .movie .movieSubTtl._03 {
     padding-bottom: 30px;
   }

 }

 /* ローディングアニメーション */
 #loader-bg {
   display: none;
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   background: #D2E4F4;
   z-index: 100000;
 }

 #loader-bg .loader_txt {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   /* -webkit- transform: translateY(-50%) translateX(-50%); */
   width: 100%;
 }

 #loader-bg .loader_txt img {
   text-align: center;
   margin: 0 auto 20px;
   display: block;
 }

 #loader-bg .loader_txt p {
   color: #2076C7;
   font-weight: bold;
   font-size: 32px;
   width: 100%;
   text-align: center;
 }


 /* SPヘッダー */
 #sp_page {
   overflow: hidden;
   z-index: 1;
 }

 .spMenu {
   position: fixed;
   top: -65px;
   left: 0;
   width: 100%;
   z-index: 20000;
   transition: .3s;
 }

 .spMenu._active {
   top: 0;
 }

 .header-content-wrapper {
   height: 65px;
   background-color: #2076c7;
 }

 .s .head-logo {
   position: absolute;
   width: 60px;
   top: 14px;
   left: 20px;
 }

 .head-logo img {
   width: 100%;
 }

 .open-button {
   position: absolute;
   top: 7px;
   right: 13px;
   width: 50px;
   height: 45px;
   transition: all .5s;
   cursor: pointer;
   padding: 25px 25px;
   opacity: 0.8;
 }

 .bar {
   width: 32px;
   height: 2px;
   display: block;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   background-color: #fff;
 }

 .bar_top {
   top: 10px;
 }

 .bar_mid {
   top: 50%;
   transform: translate(-50%, -50%);
 }

 .bar_bottom {
   bottom: 10px;
 }

 .open-button.close .bar_top {
   transform: translate(-50%, 10px) rotate(45deg);
   transition: transform .3s;
 }

 .open-button.close .bar_mid {
   opacity: 0;
   transition: opacity .3s;
 }

 .open-button.close .bar_bottom {
   transform: translate(-50%, -8px) rotate(-45deg);
   transition: transform .3s;
 }

 .nav-wrapper {
   transform: translateX(100%);
   transition: .3s;
   width: 100vw;
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 20000;
 }

 .nav-wrapper.slide-in {
   transform: translateX(0);
   transition: .3s;
 }

 .nav-bg {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
 }

 .header-nav {
   background-color: #D3E2F1;
   background-repeat: no-repeat;
   width: 100%;
   height: 100%;
   background-position: center;
   background-size: cover;
   z-index: 200;
   padding: 7.03vw;
   box-shadow: -5px 10px 25px rgba(0, 0, 0, 0.2);
   margin-left: 29.6%;
   position: relative;
   overflow-y: hidden;
 }

 .nav-deko {
   position: absolute;
   right: 0;
   bottom: -2%;
   width: 37%;
 }

 .nav-deko img {
   width: 100%;
 }

 .header-nav.nav-list {
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
 }

 .nav-list {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   width: 100%;
   height: 100%;
 }

 .nav-list li {
   width: 25%;
 }

 .nav-list li:last-of-type {
   border-right: none;
 }

 .nav-item img {
   width: 100%;
   padding: 5.46vw 0;
   background-color: #d3e2f1;
 }

 body.noscroll {
   overflow: hidden;
 }

 .s .nav-list .menu01 {
   width: 21.3vw;
 }

 .s .nav-list .menu02 {
   width: 34.5vw;
 }

 .s .nav-list .menu03 {
   width: 27.4vw;
 }

 .s .nav-list .menu04 {
   width: 32.95vw;
 }

 .s .nav-list .menu05 {
   width: 44.05vw;
 }

 .s .nav-list .menu06 {
   width: 28.745vw;
 }

 /* pcヘッダー */

 .navi {
   display: none;
 }

 .navi._active {
   display: block;
   position: fixed;
   top: 0%;
   left: 0%;
   width: 100%;
   z-index: 99000;
 }

 .navi__base {
   width: 100%;
   z-index: 99900000;
   background: #2076C7;
   position: relative;
   height: 114px;
 }

 .navi__inner {
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
   padding: 25px 0 25px 200px;
   justify-content: space-around;
 }

 .navi__inner li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
   padding: 0 5px;
   text-align: center;
 }

 .navi__inner li a {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   width: 100%;
   padding: 0.5em 0;
   text-decoration: none;
   font-weight: bold;
   border-radius: 5px;
   font-size: 14px;
 }

 /* .navi__inner li a img{
    width: 100%;
  } */
 .navi__inner li a:link,
 .navi__inner li a:hover,
 .navi__inner li a:visited,
 .navi__inner li a:active {
   color: white;
 }

 .navi__inner li a span {
   display: inline-block;
   padding: 0 0.5em 0 1.5em;
   background-position: top 50% left 0;
   background-size: auto 1em;
   background-repeat: no-repeat;
 }

 .pc .navi__inner li {
   width: fit-content;
 }

 .pc .navi__inner .menu01 {
   width: 5.5vw;
 }

 .pc .navi__inner .menu02 {
   width: 9.3vw;
 }

 .pc .navi__inner .menu03 {
   width: 8vw;
 }

 .pc .navi__inner .menu04 {
   width: 9vw;
 }

 .pc .navi__inner .menu05 {
   width: 12vw;
 }

 .pc .navi__inner .menu06 {
   width: 17.8vw;
 }

 .navi__base.navi__move {
   position: fixed;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   /* -webkit- transform: translateX(-50%); */
 }

 .head-logo {
   position: absolute;
   top: 20px;
   left: 20px;
   z-index: 1000;
   width: 110px;
 }

 .creamyHour {
   background: url(../img/stripe_bg.png);
   background-size: auto;
   position: relative;
   height: 43vw;
   mask-image: url(../img/easy_bg.svg);
   -webkit-mask-image: url(../img/easy_bg.svg);
   mask-mode: alpha;
   -webkit-mask-size: cover;
   mask-size: cover;
   margin-top: -6vw;
   width: 100%;
 }

 .comingSoon {
   background-color: #FFF8B0;
   background-size: auto;
   position: relative;
   /* height: 43vw; */
   height: 84vw;
   /* mask-image: url(../img/easy_bg.svg);
    -webkit-mask-image: url(../img/easy_bg.svg); */
   mask-mode: alpha;
   -webkit-mask-size: cover;
   mask-size: cover;
   margin-top: -6vw;
   width: 100%;
   padding-top: 4%;
 }

 .comingSoon-title {
   width: 80%;
 }

 .s .creamyHour {
   background-size: cover;
   position: relative;
   height: 87.3vw;
   margin-top: -18vw;
 }

 .s .comingSoon {
   background-color: #FFF8B0;
   background-size: auto;
   position: relative;
   height: 192vw;
   /* mask-image: url(../img/easy_bg.svg);
    -webkit-mask-image: url(../img/easy_bg.svg); */
   mask-mode: alpha;
   -webkit-mask-size: cover;
   mask-size: cover;
   margin-top: -6vw;
   width: 100%;
   padding-top: 8%;
 }

 .comingSoon-title {
   width: 34%;
   margin: 0 auto;
 }

 .comingSoon-contents {
   width: 34%;
   margin: 0 auto;
   margin-top: 25px;
 }

 .comingSoon-btn {
   width: 327px;
   margin: 0 auto;
 }

 .comingSoon-top {
   position: absolute;
   top: 0;
   width: 100%;
   margin-top: -6vw;
 }

 .s .comingSoon-title {
   width: 85%;
 }

 .s .comingSoon-contents {
   width: 85%;
 }

 .s .comingSoon-btn {
   width: 53%;
 }

 .s .creamyHour-text {
   width: 78%;
 }

 .creamyHour-text,
 .comingSoon-text {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   margin: auto;
   width: 30.7%;
   height: fit-content;
 }

 .creamyHour-text img {
   width: 100%;
 }

 .comingSoon img {
   width: 100%;
 }







 /* コンテンツエリア */
 .s .milk,
 .s .mix,
 /* .s .ore, */
 .s .movie,
 .s .plus,
 .s .purchase {
   margin-top: -12vw;
   position: relative;
 }

 .s .easy,
 .s .mix {
   overflow: hidden;
 }

 .s .mix {
   padding: 0 0 79vw 0px;
 }

 .easy {
   margin-top: -4.861vw;
   position: relative;
 }

 .s .easy {
   margin-top: -14vw;
 }

 /* .s .drink {
    margin-top: -11vw;
} */
 .l .easy {
   margin-top: -6.861vw;
   /* margin-top: -70px; */
   position: relative;
 }

 .milk,
 .mix,
 .ore,
 .movie,
 .plus {
   margin-top: -11.72vw;
   position: relative;
 }

 .purchase {
   margin-top: -12.72vw;
 }

 .drink {
   margin-top: -24vw;
   position: relative;
   background: linear-gradient(to bottom, rgba(183, 227, 247, 0) 50%, #b7e3f7 50%);
 }

 @media screen and (min-width: 1800px) {
   .drink {
     margin-top: -22vw;
   }
 }

 .l .drink {
   margin-top: -32.1944vw;
   position: relative;
 }

 /* .l .drink .item {
  width: 20vw;
} */
 /* .l .drink .drinkText {
  width: 50vw;
} */
 .l .comingSoon {
   margin-top: -5vw;
 }

 .ore {
   /* margin-top: -13.88vw; */
 }

 .s .ore {
   margin-top: -12vw;
   position: relative;
 }

 .easy {
   z-index: 1;
 }

 .milk {
   z-index: 2;
 }

 .mix {
   z-index: 3;
 }

 .s .drink {
   z-index: 6;
 }

 .drink {
   z-index: 6;
 }

 .comingSoon {
   z-index: 7;
 }

 .ore {
   z-index: 6;
 }

 .plus {
   z-index: 17;
 }

 .purchase {
   z-index: 9;
 }

 .movie {
   z-index: 18;
 }

 .product img,
 .drink img,
 .milk img,
 .mix img,
 .movie img,
 .purchase img,
 .plus img {
   width: 100%;
 }

 .s .easyText {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   height: fit-content;
   margin: auto;
   width: 90%;
 }

 .s .easyText img {
   width: 100%;
 }


 .s .video._easyMovie {
   width: auto;
   height: 77.0vw;
   mask-image: url(../img/flavor_bg.svg);
   -webkit-mask-image: url(../img/flavor_bg.svg);
   mask-mode: alpha;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: left;
   mask-position: left;
   -webkit-mask-size: contain;
   mask-size: contain;
 }

 .s #video01 {
   height: 100%;
   margin-left: calc(calc(100vw - calc(77vw * 1.777778))/2);
   width: auto;
   /* min-width: 100%; */
   /* height: 77.0vw; */
 }

 .s .video._milkMovie {
   width: auto;
   /* min-width: 100%; */
   height: 97.3vw;
   mask-image: url(../img/milk_bg.svg);
   -webkit-mask-image: url(../img/milk_bg.svg);
   mask-mode: alpha;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: left;
   mask-position: left;
   -webkit-mask-size: contain;
   mask-size: contain;
 }

 .s #video02 {
   height: 100%;
   margin-left: calc(calc(100vw - calc(97.3vw * 1.777778))/2);
   width: auto;
 }

 .s .video._mixMovie {
   width: auto;
   /* min-width: 100%; */
   height: 107.0vw;
   mask-image: url(../img/mix_bg.svg);
   -webkit-mask-image: url(../img/mix_bg.svg);
   mask-mode: alpha;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: left;
   mask-position: left;
   -webkit-mask-size: contain;
   mask-size: contain;
 }

 .s #video03 {
   height: 100%;
   margin-left: calc(calc(100vw - calc(107vw * 1.777778))/2);
   width: auto;
   /* min-width: 100%; */
   /* height: 107.0vw; */
 }

 .s .milk h2 {
   position: absolute;
   top: 13vw;
   left: 0;
   right: 0;
   margin: 0 auto;
   width: 70vw;
 }

 .s .milk .milkText {
   position: absolute;
   bottom: 20vw;
   left: 0;
   right: 0;
   margin: 0 auto;
   width: 70vw;
 }

 .milk .milkText {
   position: absolute;
   bottom: 250px;
   left: 0;
   right: 0;
   margin: 0 auto;
   max-width: 505px;
 }

 .s .milk .milkBox {
   display: flex;
   position: absolute;
   justify-content: space-between;
   top: 35vw;
   padding: 0 5vw;
   left: 0;
   right: 0;
   margin: 0 auto;
 }

 .milk .milkBox {
   display: flex;
   position: absolute;
   justify-content: space-between;
   top: 390px;
   padding: 0;
   max-width: 750px;
   left: 0;
   right: 0;
   margin: 0 auto;
 }

 .s .milk .milkBox li p {
   width: 28vw;
 }

 .milk .milkBox li p {
   width: auto;
   padding: 0 15px;
 }

 .s .mix .mixTtl {
   width: 60vw;
   position: absolute;
   top: 20vw;
   left: 0;
   right: 0;
   margin: 0 auto;
 }

 .mix .mixTtl {
   width: 388px;
   position: absolute;
   top: 180px;
   left: 0;
   right: 0;
   margin: 0 auto;
 }

 .s .mix .image {
   width: 18vw;
   position: absolute;
   right: 5vw;
   bottom: 13vw;
 }

 .mix .image {
   right: 345px;
   bottom: 240px;
   width: 100px;
 }

 .s .mix .steps {
   margin: 0 auto;
   padding: 0 5vw;
   position: absolute;
   top: 46vw;
   right: 0;
   left: 0;
   display: flex;
   gap: 8vw;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }

 .mix .steps {
   display: flex;
   position: absolute;
   margin: 0 auto;
   right: 0;
   left: 0;
   padding: 0;
   justify-content: space-between;
   top: 318px;
   max-width: 750px;
   align-items: flex-end;
   z-index: 2;
 }

 .s .mix .steps li {
   width: 50vw;
   position: relative;
 }

 .mix .steps li {
   width: 315px;
   position: relative;
 }

 .s .mix .steps li:last-child::before {
   display: block;
   content: "";
   width: 25px;
   height: 25px;
   background-image: url(../img/mix-arrow.png);
   background-size: contain;
   background-repeat: no-repeat;
   position: absolute;
   top: -13%;
   left: 44%;
   transform: rotate(90deg);
 }

 .mix .steps li:last-child::before {
   content: "";
   background-image: url("../img/mix-arrow.png");
   background-size: contain;
   background-repeat: no-repeat;
   position: absolute;
   top: 50%;
   left: -60px;
   width: 25px;
   height: 40px;
   display: block;
 }

 .mix_deco_left {
   position: absolute;
   width: 20%;
   max-width: 96px;
   top: 23%;
   left: 0;
   margin-left: 8vw;
   z-index: 1;
 }

 .s .mix_deco_left {
   width: 15%;
   top: 19%;
   left: 0;
 }

 .mix_deco_right {
   position: absolute;
   width: 20% !important;
   max-width: 128px;
   top: 20%;
   right: 0;
   margin-right: 8vw;
   z-index: 1;
 }

 .s .mix_deco_right {
   width: 18% !important;
   top: 19%;
   right: 0;
 }

 .s .plus .plusText {
   position: absolute;
   width: 43vw;
   top: 9vw;
   left: 7.2vw;
 }

 .s .plus .checkBtn {
   position: absolute;
   width: 40vw;
   top: 25vw;
   right: 6vw;
 }

 .s .purchase {
   mask-image: url(../img/purchase-bg-sp.svg);
   -webkit-mask-image: url(../img/purchase-bg-sp.svg);
   mask-mode: alpha;
   -webkit-mask-size: cover;
   mask-size: 100%;
 }

 .s .purchase .lohaco,
 .s .purchase .amazon,
 .s .purchase .rakuten {
   width: 52vw;

 }

 .purchase .lohaco,
 .purchase .amazon,
 .purchase .rakuten {
   width: 332px;
 }

 .purchase .rakuten img,
 .purchase .amazon img,
 .purchase .lohaco img {
   width: 100%;
 }

 .s .purchase .lohaco {
   position: absolute;
   top: 44vw;
   left: -3vw;
   right: 0;
   margin: 0 auto;
   padding-left: 4vw;
 }

 .s .purchase .amazon {
   position: absolute;
   top: 66vw;
   left: -3vw;
   right: 0;
   margin: 0 auto;
   padding-left: 4vw;
 }

 .s .purchase .rakuten {
   position: absolute;
   top: 84vw;
   left: -3vw;
   right: 0;
   margin: 0 auto;
   padding-left: 4vw;
 }

 .s .drink .item {
   position: absolute;
 }

 .s .drink .item._01 {
   top: 56vw;
   left: 8vw;
 }

 .s .drink ._01 {
   width: 49vw;
 }

 .s .drink .item._02 {
   top: 52vw;
   right: 8vw;
 }

 .s .drink ._02 {
   width: 43vw;
 }

 .s .movie .movieTtl {
   position: absolute;
   width: 30vw;
   top: 24vw;
   left: 0;
   right: 0;
   margin: 0 auto;
 }

 .s .movie .movieSubTtl {
   position: absolute;
   width: 76vw;
   left: 0;
   right: 0;
   margin: 0 auto;
 }

 .flavor {
   margin-top: -10vw;
   position: relative;
   background-color: #b7e3f7;
   height: 90vh;
   z-index: 7;
   min-height: 1000px;
 }

 .s .flavor {
   margin-top: 0;
   min-height: 0;
   height: 60vh;
 }

 .flavor_box {
   width: 95%;
   height: 100%;
   display: flex;
   align-items: center;
   margin: 0 auto;
 }

 .flavor img {
   width: 100%;
   max-width: 580px;
   margin: -6vw auto 0;
   display: block;
 }

 .s .movie .movieSubTtl._01 {
   top: 40vw;
 }

 .s .movie .movieSubTtl._02 {
   top: 100vw;
 }

 .s .movie .movieSubTtl._03 {
   top: 160vw;
 }

 .s .movie ul li .movieContents {
   position: absolute;
   left: 0;
   right: 0;
   margin: 0 auto;
   width: 80vw;
   max-width: 560px;
 }

 .s .movie ul li .movieContents iframe {
   width: 100%;
   height: 45vw;
 }

 .s .movie ul li .movieContents._01 {
   top: 47.8vw;
 }

 .s .movie ul li .movieContents._02 {
   top: 108vw;
 }

 .s .movie ul li .movieContents._03 {
   top: 168vw;
 }



 /* アニメーション */

 .bounceTrigger,
 .fadeLeftTrigger,
 .fadeRightTrigger {
   opacity: 0;
 }

 .fadeLeft {
   animation-name: fadeLeftAnime;
   animation-duration: 1s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeLeftAnime {
   from {
     opacity: 0;
     transform: translateX(-100px);
   }

   to {
     opacity: 1;
     transform: translateX(0);
   }
 }

 .fadeRight {
   animation-name: fadeRightAnime;
   animation-duration: 1s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeRightAnime {
   from {
     opacity: 0;
     transform: translateX(100px);
   }

   to {
     opacity: 1;
     transform: translateX(0);
   }
 }

 /*==================================================
スライダー
===================================*/
 .slider {
   position: relative;
   z-index: 0;
   overflow: hidden;
 }


 /* mv スライダーSP */
 /* .s .slider-item01 {
    background:url(../img/mv000.png);
} */

 .s .slider-item02 {
   background: url(../img/mv00.png?r1);
 }

 .s .slider-item03 {
   background: url(../img/mv01.png?r1);
 }

 /* .s .slider-item04 {
    background:url(../img/mv02.png);
} */

 /* .s .slider-item05 {
    background:url(../img/mv03.png);
} */

 /* .s .slider-item06 {
    background:url(../img/mv04.png);
} */

 /* .s .slider-item07 {
    background:url(../img/mv06.png);
} */


 /* mv スライダー PC*/
 /* .slider-item01 {
  background-image:url(../img/pc-mv000-bg.png);
} */

 .slider-item02 {
   background-image: url(../img/pc-mv00-bg.png);
 }

 .slider-item03 {
   background-image: url(../img/pc-mv01-bg.png);
 }

 /* .slider-item04 {
  background-image:url(../img/pc-mv02-bg.png);
} */

 /* .slider-item05 {
  background-image:url(../img/pc-mv03-bg.png);
} */

 /* .slider-item06 {
  background-image:url(../img/pc-mv04-bg.png);
} */

 /* .slider-item07 {
  background:url(../img/pc-mv06-bg.png);
} */


 /* オレスライダー SP */
 .s .slider-ore01 {
   background: url(../img/ore00.png);
 }

 .s .slider-ore02 {
   background: url(../img/ore01.png);
 }

 .s .slider-ore03 {
   background: url(../img/ore02.png);
 }

 .s .slider-ore04 {
   background: url(../img/ore03.png);
 }

 .slider-cafeore .detailBtn img {
   width: 100%;
 }

 .s .slider-cafeore .detailBtn.detailBtn {
   width: 38vw;
   margin: 0 auto;
   padding-top: 99.5vw;
   /* position: absolute;
  bottom: 16vw;
  right: 0;
  left: 0;
  margin: 0 auto; */
 }

 .slider-cafeore .detailBtn.detailBtn {
   width: 315px;
   margin: 0 auto;
   margin-top: -30px;
 }

 .s .slider-cafeore .ore-slide-content {
   position: absolute;
   left: 0;
   right: 0;
   top: 26vw;
   width: 62vw;
   margin: 0 auto;
   padding-left: 7vw;
 }

 .s .slider-cafeore .ore-slide-content img,
 .orettl img,
 .oreNewflavor img {
   width: 100%;
 }

 .s .orettl {
   width: 58vw;
   z-index: 1000;
   margin: 0 auto;
   position: relative;
   padding-bottom: 4vw;
 }

 .s .oreNewflavor {
   width: 52vw;
   z-index: 1000;
   left: -14px;
   right: 0;
   margin: 0 auto;
   top: 23vw;
 }




 /* オレスライダー PC */
 /* .slider-ore01 {
  background:url(../img/1.png);

}

.slider-ore02 {
  background:url(../img/2.png);

}

.slider-ore03 {
  background:url(../img/3.png);

}

.slider-ore04 {
  background:url(../img/4.png);

} */



 .s .slider-item {
   width: 100%;
   height: 145vw;
   background-repeat: no-repeat;
   background-position: left top;
   background-size: contain;
   margin-top: 0;
 }

 .slider-item {
   width: 100%;
   height: 860px;
   /* background-repeat: no-repeat; */
   background-position: left middle;
   background-size: cover;
   /* margin-top: 114px; */
   position: relative;
   background-position: center;
 }

 @media screen and (min-width: 1800px) {
   .slider-item {
     height: 1340px;
   }
 }

 .slider-item img._mvpkg {
   position: absolute;
   bottom: 6vw;
   right: 0;
   left: 0;
   margin: auto;
   width: 665px;
 }

 .slider-item img._mvcopy {
   position: absolute;
   right: 0;
   left: 20vw;
   /* margin: auto; */
   width: 420px;
   top: 5vw;
   z-index: 10;
 }

 .slider-item07 img {
   top: 8%;
 }

 .s .slider-item img {
   display: none;
 }


 .s .slider-ore {
   width: 100%;
   height: 125vw;
   background-repeat: no-repeat;
   background-position: 0% 158%;
   background-size: cover;
 }

 .slider-ore {
   width: 100%;
   height: 1080px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   z-index: -1;
   position: relative;
 }

 @media screen and (min-width: 1800px) {
   .slider-ore {
     height: 1240px;
   }
 }

 /*戻る、次へ矢印の位置*/
 .slick-prev,
 .slick-next {
   position: absolute;
   content: "";
   top: 50%;
   cursor: pointer;
   width: 80px;
   height: 60px;
   z-index: 1000;
 }

 .slick-prev {
   background-image: url(../img/arrow-right.png);
   background-size: contain;
   background-repeat: no-repeat;
   left: 3%;
 }

 .s .slick-next {
   background-image: url(../img/arrow-left.png);
   background-size: contain;
   background-repeat: no-repeat;
   right: -3%;
 }

 .slick-next {
   background-image: url(../img/arrow-left.png);
   background-size: contain;
   background-repeat: no-repeat;
   right: 2%;
 }

 .mv {
   position: relative;
   /* margin-top: 112px; */
 }

 /* @media screen and (min-width: 1440px) {
   .mv {
     margin-top: 140px;
   }
 }

 @media screen and (max-width: 899px) {
   .mv {
     margin-top: 70px;
   }
 } */



 .mv-logo {
   /* top: 228px; */
   top: 0;
   /* top: 0; */
   left: 0;
   z-index: 1;
   transition: transform 0.1s linear;
 }

 .plus_bg {
   width: 100%;
 }

 .mesure-wrap {
   position: absolute;
   content: "";
   /* background-color:#D2E4F4;
  background-size: 100%; */
   width: 100%;
   height: 340px;
   top: 100px;
   left: 0;
   z-index: 11001;
   margin: 0 auto;
 }

 .s .mesure-wrap {
   position: absolute;
   content: "";
   /* background-color:#D2E4F4;
  background-size: 100%; */
   width: 100%;
   height: 40vw;
   top: 100px;
   left: 0;
   z-index: 11001;
   margin: 0 auto;
 }


 /* スライダードット位置調整 */
 .slider-mv .slick-dots {
   position: absolute;
   right: 92px;
   top: 57px;
   z-index: 12;
 }

 .slider-mv .slick-dots li {
   margin-bottom: 35px;
 }

 .slider-mv .slick-dots li button {
   border-radius: 50%;
   background-color: #679acd;
   color: transparent;
   border: none;
   width: 15px;
   height: 15px;
 }

 .slider-mv .slick-dots .slick-active button {
   background-color: #a8c5e3;
 }

 @media screen and (max-width: 768px) {
   .slider-mv .slick-dots {
     right: 5.7vw;
     top: 10.9vw;
   }

   .slider-mv .slick-dots li {
     margin-bottom: 14px;
   }

   .slider-mv .slick-dots li button {
     width: 13px;
     height: 13px;
   }
 }

 .campaignIcon {
   position: fixed;
   width: 110px;
   bottom: 131px;
   right: 15px;
   z-index: 90;
 }

 .campaignIcon img {
   width: 100%;
 }

 ._floating {
   animation-name: updown1;
   /* アニメーション名の指定 */
   animation-delay: 0s;
   /* アニメーションの開始時間指定 */
   animation-duration: 3s;
   /* アニメーション動作時間の指定 */
   animation-timing-function: ease-in-out;
   /* アニメーションの動き指定（徐々に早く）*/
   animation-iteration-count: infinite;
 }

 @keyframes updown1 {
   0% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(10px);
   }

   100% {
     transform: translateY(0);
   }
 }

 /* GTM　計測用 */
 .GTM_scroll05 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 10px;
 }




 /*=================================================
 #lineup 2カラムコンテンツ
 ===================================*/
 .ore {
   height: clamp(1900px, 84.375vw, 2160px);
   background: #ccefff;
   background-size: auto;
   position: relative;
   mask-image: url(../img/milk_bg.svg);
   -webkit-mask-image: url(../img/milk_bg.svg);
   mask-mode: alpha;
   -webkit-mask-size: cover;
   mask-size: cover;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
 }

 .s .ore {
   height: 190vw;
   mask-image: none;
   overflow: hidden;
 }

 .ore::before {
   content: "";
   position: absolute;
   top: max(-50px, -3.47vw);
   left: 0;
   aspect-ratio: 900 / 1188;
   width: 31.25vw;
   max-width: 450px;
   background: url(../img/bg-milk.png)center / 100% no-repeat;
 }

 .s .ore::before {
   top: max(-50px, -3.47vw);
   width: 31.25vw;
 }

 .item-cafeore-area {
   max-width: 980px;
   margin: 0 auto;
   padding: 0 min(85px, 9.65vw);
   /* 880px基準 */
   margin-top: -11.72vw;
 }

 .s .item-cafeore-area {
   padding: 0 6vw;
   margin-top: -5.72vw;
 }

 .item-cafeore {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 70px clamp(50px, -87.526px + 17.884vw, 170px);
 }

 .s .item-cafeore {
   gap: 4.26vw;
 }

 .item-cafeore li {
   flex: 0 1 min(320px, 36.36vw);
   /* 880px基準 */
   position: relative;
   z-index: 10;
 }

 .s .item-cafeore li {
   flex: 0 1 39.84vw;
 }

 .item-cafeore li .img {
   width: min(302.5px, 34.375vw);
   /* 880px基準 */
   margin-inline: auto;
   margin-bottom: 40px;
   position: relative;
   z-index: 12;
 }

 .s .item-cafeore li .img {
   width: 100%;
   margin-bottom: 2vw;
 }

 .item-cafeore li img {
   width: 100%;
 }

 .item-cafeore li .img::after {
   content: "";
   position: absolute;
   z-index: -1;
 }

 .item-ore02 .img::after {
   bottom: 10px;
   right: -20px;
   aspect-ratio: 263 / 249;
   width: min(131.5px, 14.94vw);
   /* 880px基準 */
   background: url(../img/lineup-item2-deco.png)center / 100% no-repeat;
 }

 .s .item-ore02 .img::after {
   bottom: vw;
   right: -1vw;
   width: 13.5vw;
 }

 .item-ore03 .img::after {
   bottom: 10px;
   right: -90px;
   aspect-ratio: 614 / 235;
   width: min(307px, 34.88vw);
   /* 880px基準 */
   background: url(../img/lineup-item3-deco.png)center / 100% no-repeat;
 }

 .s .item-ore03 .img::after {
   bottom: 2vw;
   right: -13.5vw;
   width: 43.12vw;
 }

 .item-ore04 .img::after {
   bottom: 10px;
   right: -25px;
   aspect-ratio: 244 / 136;
   width: min(122px, 13.86vw);
   /* 880px基準 */
   background: url(../img/lineup-item4-deco.png)center / 100% no-repeat;
 }

 .s .item-ore04 .img::after {
   bottom: 2vw;
   right: -2vw;
   width: 14.53vw;
 }

 .oremask {
   display: none;
 }

 .s .oremask {
   display: block;
   width: 100%;
   z-index: 1000;
   left: 0;
   right: 0;
   margin: 0 auto;
   top: 0;
 }

 .s .oremask img {
   width: 100%;
 }