@charset "utf-8";
/* CSS Document */


/*　475ml解禁で消す　*/
@media screen and (max-width:767px) {
.product__list_wrap li:nth-child(3){display:none;}
}




.loading {background:#f8f8f8;display: flex;height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 20000;transition: none;}
.spinner {margin: auto;max-width: 300px;text-align: center;}
.spinner > div {height: 12px;background-color: #a3bdb2;border-radius: 100%;display: inline-block;-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;animation: sk-bouncedelay 1.4s infinite ease-in-out both;margin: 3px;width: 12px;}
.spinner .bounce1 {
  -webkit-animation-delay: -0.64s;
  animation-delay: -0.64s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.48s;
  animation-delay: -0.48s;
}
.spinner .bounce3 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner .bounce4 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/**/
.brand__wrap{margin-bottom: 3.1rem;}
.brand__wrap_bg{background:url(../img/brand__bgshadow.jpg) repeat-x;background-position: 0 38%;z-index: -1;position: relative;}
.brand__flow_logo{position: absolute;z-index: -2;top: -20px;right: 20px;width: calc((100vw / 100) * 40);max-width: 600px;}
.brand__inner{max-width: 1900px;margin: 0 auto;padding:9rem 9rem 7.5rem;position: relative}
.brand__topl_img{position: absolute;right:8.2%;bottom:8.5rem;z-index: -1;max-width: 1200px;width: calc((100vw / 100) * 63);}
.brand__text_wrap{max-width: 480px;}
.brand__title{font-size: 1.9rem;letter-spacing: 2px;font-weight: 500;margin-bottom: 2.1rem;line-height: 1.7em;}
.brand__txt{font-size: .85em;line-height: 2em;letter-spacing: 1px;margin-bottom: 3rem;}
.brand__txt p {margin-bottom: 1.5rem;color: #444;}
.brand__flag{margin-bottom: 1.3rem;}
.brand__txt_eng{color: #aaa;font-size: .9em;letter-spacing: 1px;line-height: 1.6em;font-weight: 100;font-family: 'sofia-pro-variable', sans-serif;font-style: normal;max-width: 460px;}
@media screen and (max-width:1199px) {
.brand__wrap{margin-bottom: 1rem;}
.brand__wrap_bg{background-position: 0 52%;}
.brand__inner{padding: 9rem 7rem 7.5rem;}
.brand__topl_img{position: relative;top: 0;right: 0;left: -7%;margin-bottom: 5rem;width: 100%;}
.brand__text_wrap{width: 100%;max-width: none;padding-left: 4.5rem;}
}
@media screen and (max-width:767px) {
.brand__flow_logo{width: 55%;max-width:280px;}
.brand__inner{padding:calc(var(--scroll_height) + 3rem) 0 5rem;}
.brand__text_wrap {padding: 0 4rem;}
.brand__wrap_bg {background-position: 0 5%;z-index: -2;}
.brand__topl_img{margin-bottom: 3rem;}
.brand__title {font-size: 1.7em;}
}
@media screen and (max-width:570px) {
.brand__text_wrap{padding:0 2rem;}
.brand__title {font-size: 1.39em;letter-spacing: 0;}
.brand__txt_eng{font-size: .8em;}
}
@media screen and (max-width:394px) {
.sp_hidden{display:none;}
}

/**/
.about__wrap{position: relative;padding:var(--about_padd) 0 7rem;overflow: hidden;top: calc(-1 * var(--about_padd));}
.about__flex_wrap{display: flex;}
.about__movie_wrap{padding-left: 9rem;display: flex;flex-wrap: wrap;width:57%;container-type: inline-size;container-name: card;gap: 3.5rem 0;align-content: flex-start;}
.about__title{font-size: 3.7rem;font-weight: 600;letter-spacing: 3px;position: relative;left: -.5em;color: #444;margin-bottom: 2.6rem;line-height: 1em;}
.about__title_flap{display: inline-block;}
.about__eng{font-family:"sofia-pro-variable", sans-serif;font-variation-settings: 'wght' 700, 'slnt' 0;}
.about__title_midd {font-size: .85em;}
.about__title_small{font-size: 0.6em;letter-spacing: 1px;position: relative;left: -.5rem;}
.about__txt{font-size: .85em;letter-spacing: 1px;line-height: 2em;margin-bottom: 2rem;padding-right:3rem;}
.about__icon_wrap{display: flex;align-items: flex-start;gap:1.6rem;}
.about__icon_box{width: 50px;display: flex;flex-wrap: wrap;justify-content: center;gap: .4em;}
.about__icon_txt{font-size: 10px;text-align: center;font-family: sans-serif;}
.about__icon_txt span {display: block;font-size: .9em;}
.about__movie_mp{position: relative;right: calc(-1 * ((100% / 100) * 8));}
.about__movie{max-width: 970px;border-radius: 30px;width: 110%;}
.about__point_wrap{width: 43%;padding:12rem 0 7rem 13rem;position: relative;}
.about__point_wrap::after{content:"";display: block;width:100%;height:100%;background:#f5f4f2;border-radius: 50px 0 0 50px;position: absolute;top: 3rem;left: 0;z-index: -1;}
.about__point_list{display: flex;align-items: center;gap: 1rem;margin-bottom: 1.5rem;}
.about__point_img{background: #fff;border-radius: 10px;width: 62px;aspect-ratio: 1 / 1;display: flex;justify-content: center;align-items: center;}
.about__point_txt{font-weight: 600;}
.about__rota_txt1{position: absolute;top: 0;right: -8rem;z-index: -2;-webkit-animation: rotating 35s linear infinite;animation: rotating 35s linear infinite;}
.about__rota_txt2{position: absolute;bottom: 0;left: -2rem;z-index: -2;-webkit-animation: rotating 35s linear infinite;animation: rotating 35s linear infinite;}
@media screen and (min-width:1301px) {
  @container card (max-width: 900px) {
    .about__title_flap {
      width:100%;
      min-width: 600px;
    }
    .about__title_flap.about__title_small {
      padding-right: 5%;
      text-align: right;
    }
  }
}
@container card (max-width: 640px) {
  .about__movie_mp{
    right:0;
  }
}
@media screen and (max-width:1390px) {
  .about__point_wrap{padding:11rem 0 3rem 8rem;}
  .about__point_txt{font-size: .95em;}
}
@media screen and (max-width:1300px) {
  :root{
    --about_padd: 8.5rem;
  }
  .about__flex_wrap{flex-wrap: wrap;justify-content: flex-end;}
  .about__movie_wrap {flex-direction: column-reverse;justify-content: flex-end;width: 100%;padding: 0 5rem;gap: 4rem 0;}
  .about__point_wrap{width: 85%;padding: 3rem 0 0 0;}
  .about__point_wrap::after{height: calc(100% - 3rem);}
  .about__title {font-size: 3.2rem;width: calc(100% + 1em);}
  .about__movie{width:100%;max-width:920px;}
  .about__movie_mp {right: unset;width: 100%;display: flex;justify-content: center;align-items: center;}
  .about__movie_txt{padding:0;width:100%;max-width:920px;margin: 0 auto;}
  .about__txt{padding:0;}
  .about__point_wrap > ul {padding:6rem 0 5rem 5rem;display: flex;flex-wrap: wrap;gap: 1rem;}
  .about__point_list{width:360px;margin:0;}
  .about__rota_txt1{right: -5rem;width: 300px;}
  @container card (max-width: 735px) {
    .about__title_flap{
      width:100%;
    }
    .about__title_flap.about__title_small {
      text-align: right;
      padding-right:5%;
    }
  }
}
@media screen and (max-width:1000px) {
  .about__rota_txt2 {bottom: 1.5rem;width: 230px;}
  .about__flex_wrap{gap: 1rem;}
}
@media screen and (max-width:767px) {
:root {
  --about_padd: 5.5rem;
}
.about__movie_wrap{padding:0 4rem;gap: 3rem 0;}
.about__movie{max-width:none;}
.about__title {font-size: 2.5rem;max-width: 550px;line-height: 1.2em;margin-bottom: 1.7rem;}
.about__title_small{font-size: 0.7em;}
.about__title_flap.about__title_small{padding-right:0;}
.about__txt{line-height: 2.3em;font-size:.8em;}
.about__rota_txt1 {right: -3rem;width: 230px;}
.about__icon_txt span {font-size: .8em;}
}
@media screen and (max-width:570px) {
.about__icon_txt {font-size:8px;}
.about__movie{border-radius: 20px;}
.about__movie_wrap{padding:0 2rem;}
.about__title {font-size: 2rem;letter-spacing: 1.5px;max-width: 440px;}
.about__point_wrap > ul{padding: 2.5rem 0 2.5rem 2.5rem;}
.about__point_txt {font-size: .8em;}
.about__point_img{width: 50px;padding: .4em;}
.about__point_list{gap: .5em;}
.about__point_wrap::after{border-radius: 30px 0 0 30px;}
.about__point_wrap{width: 87%;}
}
@media screen and (max-width:394px) {
.about__title {font-size: 1.8rem;}
}

/**/
.product__wrap{max-width: var(--max_width);margin: 0 auto;position: relative;top: -5.5rem;margin-bottom: 10rem;}
.product__wrap.naire {margin-bottom: 8rem;}
.product__title{font-family: 'sofia-pro-variable', sans-serif;font-variation-settings: 'wght' 700, 'slnt' 0;font-size: 2.1rem;text-align: center;letter-spacing: 1px;margin-bottom: .7rem;}
.product__subttl{text-align: center;font-family: 'sofia-pro-variable', sans-serif;font-variation-settings: 'wght' 400, 'slnt' 0;color: #999;letter-spacing: .5px;font-size: 1em;margin-bottom: 5rem;}
.product__subttl.naire {font-size: .9em;margin-bottom: 3rem;}
.product__list_wrap{display: flex;align-items: flex-start;gap: 2.5rem;}
.product__img{aspect-ratio: 3 / 4;width: 100%;margin-bottom: 1.5rem;}
.coming .product__img {position: relative;}
.coming .product__img::before {content: "Coming Soon...";background: rgba(0, 0, 0, .3);width: 100%;height: 100%;position: absolute;color: #fff;display: flex;justify-content: center;align-items: center;font-size: 1.2em;letter-spacing: 6px;font-weight: 600;}

.product__img > img{object-fit: cover;width: 100%;height: 100%;display:block;}
.product__name_wrap{display: flex;align-items: center;justify-content: space-between;margin-bottom: 1.5rem;flex-wrap: wrap;width:100%;container-type: inline-size;container-name: product;}
.product__name{font-weight: 700;font-size: 1.2em;padding-left: var(--product_txt_padd);}
.product__color_wrap{display: flex;align-items: center;gap: .7rem;padding-right: var(--product_txt_padd);padding-left: 1rem;}
.product__color_wrap > li{display: block;width: 22px;height: 22px;border-radius: 50px;background: #eee;}
.product__color_wrap > li:nth-of-type(1) {background: #3d4749;}
.product__color_wrap > li:nth-of-type(2) {background: #deddd9;}
.product__color_wrap > li:nth-of-type(3) {background: #d4baa9;}
.product__color_wrap > li:nth-of-type(4) {background: #c6d7cf;}
.product__txt{text-align: right;margin-bottom: .2em;}
.product__txt:nth-of-type(1) {padding-right: var(--product_txt_padd);}
.product__link:hover {opacity: .4;}

.mall_list {display: flex;align-items: center;gap: 1em;margin-top:1.8rem;justify-content:flex-end;}
.mall_list a{display:block;}
.mall_list a:hover{opacity:.4;}
.mall_icon {height: 35px;width: auto;border-radius: 5px;}
.mall_link {border: 1px #c61b1c solid;border-radius: 50px;padding: .3rem .8rem;font-size: .75em;color: #c61b1c;}
@media screen and (max-width:1300px) {
  .product__wrap{padding: 0 4rem;}
  .product__color_wrap{gap: .5rem;}
  .product__color_wrap > li{width: 15px;height: 15px;}
  .product__name {font-size: 1rem;}
  .product__txt {font-size: .95em;}
  @container product (max-width: 235px) {
    .product__name_wrap{
      gap:1rem;
    }
    .product__color_wrap{
      width:100%;
      justify-content: flex-end;
      margin-top: .3em;
    }
  }
}
@media screen and (max-width:767px) {
.product__scroll_wrap{width:100%;overflow-x: auto;padding-left: 4rem;padding-bottom: 2rem;}

/*　475ml解禁で戻す　*/
/*.product__list_wrap{width:910px;gap: 1.5rem;padding-right:4rem;}*/
.product__list_wrap{min-width: 500px;gap: 1.5rem;padding-right:4rem;}

.product__wrap{padding: 2.5rem 0;margin-bottom: 2.1rem;border-bottom: 1px #eee solid;}
.product__title {font-size: 1.7em;}
.product__subttl{font-size: .9em;margin-bottom: 3rem;}
.product__subttl span{display:inline-block;}
.product__subttl.naire{font-size: .8em;margin-bottom: 2.2rem;}
.product__wrap.naire {border: none;margin: 0;}
}
@media screen and (max-width:570px) {
.product__wrap.naire{padding-bottom:0;}
.product__txt{font-size:.85em;}
}
@media screen and (max-width:394px) {
.product__title {font-size: 1.4em;}
.product__subttl {font-size: .8em;}
.product__scroll_wrap {padding-left: 2rem;}

/*　475ml解禁で戻す　*/
.product__list_wrap{padding-right: 2rem;}
/*.product__list_wrap{padding-right: 2rem;width: 830px;}*/

}

/**/
.naire__txt{text-align: center;font-size: .9em;margin-bottom: 1.5rem;}
.naire__list_wrap{display: flex;align-items: flex-start;gap: 2.5rem;}
.naire__list_wrap li{width: calc(100% / 4);}
.naire__list_wrap li:nth-child(3){width: calc((100% / 4) * 2);}
.naire__list_wrap li:nth-child(3) .product__img{aspect-ratio: 4 / 2.67;}
.naire__name{text-align: center;}
@media screen and (max-width:767px) {
.naire__txt {padding: 0 1rem;font-size: .8em;margin-bottom: 2rem;}
.naire__txt span {display: inline-block;}
.naire__list_wrap{flex-wrap: wrap;justify-content: center;gap: 1.5rem 1rem;max-width: 580px;margin: 0 auto;padding: 0 2rem;}
.naire__list_wrap li{width: calc((100% / 2) - 1rem);}
.naire__list_wrap li:nth-child(3) {width: calc((100% / 2) * 2 - 1em);}
.naire__list_wrap .product__img {margin-bottom:.2rem;}
.naire__name {font-size: .9em;}
}
@media screen and (max-width:570px) {
.naire__name {font-size: .8em;}
}
@media screen and (max-width:394px) {
.naire__txt{font-size: .75em;}
.naire__txt span {display: inline;}
}

/**/
footer{background:#eff3f2;}
.footer__logo_wrap{padding: 5rem 2rem 3.6rem;text-align: center;border-bottom: 2px #fff solid;}
.footer__logo{max-width:150px;}
.footer__body{padding: 4rem 2rem 2rem;text-align: center;}
.footer__body_name{margin-bottom: 2rem;}
.footer__body_txt{font-size: .8em;display: flex;justify-content: center;gap: 1rem;margin-bottom: .4rem;}
.footer__body_txt span{display: inline-block;}
.footer__body_copy{margin-top: 2rem;font-size: .75rem;}
@media screen and (max-width:1300px) {
.footer__logo {max-width: 130px;}
}
@media screen and (max-width:767px) {
.footer__logo_wrap {padding: 4rem 2rem 2.6rem;}
.footer__body_txt{flex-wrap: wrap;gap: .4rem;}
.footer__logo {max-width: 110px;}
.footer__body{padding-top:3rem;}
}



@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes rotating {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes scroll-down-line {
  0% {
    transform-origin: 0% 50%;
    transform: scale(1, 1);}
  20% {
    transform-origin: 0% 50%;
    transform: scale(0.001, 1);}
  20.01% {
    transform-origin: 100% 50%;}
  38% {
    transform-origin: 100% 50%;
    transform: scale(1, 1);}
}
@keyframes bounce {
  0%, 15%, 38%, 60%, 75% {
    transform: translateX(0);}
  30% {
    transform: translateX(10px);}
  45% {
    transform: translateX(5px);}
}