@charset "UTF-8";
/* =========================
  for PC
========================= */

/* common */
.onlySp {
  display: none !important;
}
.str-main {
  overflow-x: hidden;
}
.main-inner {
  position: relative;
  z-index: 4000;
}
.main-inner img {
  line-height: 0.1;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}
.cnt__inner {
  position: relative;
}
.ani-fadeInDown,
.ani-fadeInUp,
.ani-fadeIn {
  opacity: 0;
}
.scroll {
  text-align: center;
  position: relative;
  z-index: 4000;
}
.scroll::after {
    content : '';
    display : inline-block;
    background-color: #000;
    transform : translateX(-50%);
    width : 1px;
    height : 10vh;
    animation: scroll 3s infinite;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}


  /* common */
@media screen and (max-width: 1200px) {
  body {
    width: 1200px;
    margin: 0 auto;
  }
}
main + div {
  background: #fff;
  position: relative;
  z-index: 4000;
  padding-top: 60px;
}
.ani-pc-rotateIn,
.ani-pc-fadeInDown,
.ani-pc-fadeInUp,
.ani-pc-fadeInLeft,
.ani-pc-fadeInRight,
.ani-pc-fadeIn {
  opacity: 0;
}

/* a.btnOver */
a.btnOver {
  display: inline-block;
}
a.btnOver img {
  transition: all .3s ease;
}
a.btnOver:hover img {
  opacity: .0;
}

/*.main-inner*/
.main-inner {
  max-width: 1920px;
  margin: 0 auto;
  background: url("../images/bg-thought-01.jpg") center center / cover no-repeat fixed;
}
@media screen and (min-width: 1536px) {

  /* common */
  body {
    overflow-x: hidden;
  }
  .main-inner {
    position: relative;
    left: 50%;
    margin-left: -960px;
    width: 1920px;
  }
}

/* .mv */
.mv {
  position: relative;
  z-index: 3000;
  transition: all 1s;
  opacity: 0;
}
.main-inner.active .mv {
  opacity: 1;
}
.mv .mv__info {
  background: #fff;
  text-align: center;
  padding: 20px 0 21px;
  color: #1d1d1d;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.12em;
  border-top: #d0d0d0 solid 1px;
  border-bottom: #d0d0d0 solid 1px;
}
.mv .slide {
}
.mv .swiper {
		position: relative;
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		/*overflow: visible;*/
}
.mv .swiper .swiper-slide {
		position: relative;
		box-sizing: border-box;
}
.mv .swiper-pagination {
		width: 100%;
		top: auto;
		bottom: calc( 30 / 720 * 100% );
		line-height: 0;
		text-align: center;
}
.mv .swiper-pagination .swiper-pagination-bullet {
  width: calc( 10 / 1920 * 100% );
  height: auto;
  aspect-ratio: 1 / 1;
  background: #fff;
  opacity: 1;
  margin: 0 calc( 11 / 1920 * 100% );
  border-radius: 100px;
}
.mv .swiper-pagination .swiper-pagination-bullet-active {
  background: #171717;
}
@media screen and (min-width: 1201px) {
  .mv img {
    display: block;
    width: 100vw;
    margin: 0 auto;
  }
}


/* .menu */
.menu {
  background: #3e3123;
  position: relative;
  z-index: 4100;
  opacity: 0;
}
.main-inner.active .menu {
  opacity: 1;
}
.menu ul {
  display: flex;
  justify-content: center;
}
.menu ul li {
  width: 280px;
}
.menu ul li:nth-child(2) a {
  background: url("../images/btn-menu-01_on.png?251021") left top / 100% auto no-repeat;
}
.menu ul li:nth-child(3) a {
  background: url("../images/btn-menu-02_on.png?251021") left top / 100% auto no-repeat;
}
.menu ul li:nth-child(4) a {
  background: url("../images/btn-menu-03_on.png?251021") left top / 100% auto no-repeat;
}
@media screen and (max-width: 960px) {
  .menu ul li {
    width: calc( 280 / 960 * 100% );
  }
}

/* .thought */
.thought {
  box-sizing: border-box;
}
.thought .cnt__inner {
  z-index: 2900;
  padding: calc( 152 / 1920 * 100% ) 0 0;
}
.thought h2 {
  /*width: calc( 316 / 1920 * 100% );
  margin: 0 auto calc( 43 / 1920 * 100% );*/
  width: 316px;
  margin: 0 auto 43px;
}
.thought h3 {
  /*width: calc( 81 / 1920 * 100% );
  margin: 0 auto calc( 54 / 1920 * 100% );*/
  width: 81px;
  margin: 0 auto 54px;
  line-height: 0.1;
}
.thought p {
  /*width: calc( 696 / 1920 * 100% );
  margin: 0 auto calc( 67 / 1920 * 100% );*/
  width: 696px;
  margin: 0 auto 67px;
}
.thought p + p {
  /*width: calc( 744 / 1920 * 100% );
  margin: 0 auto calc( 62 / 1920 * 100% );*/
  width: 744px;
  margin: 0 auto 62px;
}
.thought .scroll::after {
  position: absolute;
  left: 50%;
  bottom: -100px;
}


/* .popMovie */
.popMovie {
  height: 50px;
}
.popMovie.end .cnt__inner {
  display: none;
}
.popMovie .cnt__inner {
  height: 100vh;
  width: 100%;
  position: absolute;
  transition: all .8s;
  z-index: 5200;
  opacity: 0;
}
.popMovie.active .cnt__inner {
  position: fixed;
  left: 0;
  top: 0;
  opacity: 1;
}
.popMovie .popup__cover {
  background-color: rgba(0, 0, 0, 0.85);
  height: 100vh;
  width: 100%;
  z-index: 3310;
  cursor: pointer;
}
.popMovie.active .popup__cover {
  position: fixed;
  left: 0;
  top: 0;
}
.popMovie .popup__wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
.popMovie .popup__inner {
  width: calc( 720 / 960 * 100% );
  max-width: 1280px;
  box-sizing: border-box;
  margin: auto;
  max-height: 90vh;
  z-index: 3320;
  position: relative;
}
.popMovie iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.popMovie .popup__close {
  position: absolute;
  right: -40px;
  top: 0;
  cursor: pointer;
  width: 30px;
  height: 30px;
}

/* .movie */
.movie {
  position: relative;
  min-height: 100vh;
  background: url("../images/bg-movie-01.jpg") center center / cover no-repeat;
  display: flex;
  align-items: center;
  transition: all .8s;
  opacity: 0;
}
.movie .cnt__inner {
  width: 100%;
  padding: calc( 150 / 1920 * 100% ) 0;
  font-size: 0;
  text-align: center;
}
.movie h2 {
  /*width: calc( 224 / 1920 * 100% );
  margin: 0 auto calc( 31 / 1920 * 100% );*/
  width: 224px;
  margin: 0 auto 31px;
}
.movie h3 {
  /*width: calc( 203 / 1920 * 100% );
  margin: 0 auto calc( 55 / 1920 * 100% );*/
  width: 203px;
  margin: 0 auto 55px;
  line-height: 0.1;
}
.movie iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.movie dl {
  display: inline-block;
  width: calc( 50% - 10px );
  max-width: 607px;
  position: relative;
}
.movie dl + dl {
  margin-left: 17px;
}
.movie dl.movie__mv01 dd {
  margin-left: calc( 90 / 607 * 100% );
  width: calc( 398 / 607 * 100% );
}
.movie dl.movie__mv02 dd {
  margin-left: calc( 92 / 607 * 100% );
  width: calc( 403 / 607 * 100% );
}
.movie .movie__mv01 a {
  background: url("../images/btn-movie-s30_on.png?251021") center center / 100% 100% no-repeat;
}
.movie .movie__mv02 a {
  display: block;
  background: url("../images/btn-movie-s15_on.png?251021") center center / 100% 100% no-repeat;
}
.movie .scroll {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.movie .scroll::after {
  position: absolute;
  left: 50%;
  bottom: -50px;
}


/* .method */
.method {
  position: relative;
  z-index: 3500;
  overflow-x: hidden;
}
.method .scroll {
  position: absolute;
  bottom: calc( -50 / 1280 * 100% );
  left: 50%;
}
.method .scroll::after {
    background-color: #fff;
}
.method .method__00 .scroll::after {
    background-color: #000;
}
.method .cnt {
  height: 100vh;
}
.method .cnt#method__04 {
  height: 300vh;
}
.method .cnt .cnt__inner {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  transition: all 1s ease;
  opacity: 0;
}
.method .cnt#method__00 .cnt__inner {
  opacity: 1;
}
.method .cnt.active .cnt__inner {
  opacity: 1;
}
.method.active .cnt .cnt__inner.active {
  position: fixed;
  top: 0;
  left: 0;
}
.method .cnt .swiper-img {
  display: block;
  width: 100vw;
  height: 100vh;
}
.method .cnt.method__01 .swiper-img {
  background: url("../images/img-method-01.jpg") center center / cover no-repeat;
}
.method .cnt.method__02 .swiper-img {
  background: url("../images/img-method-02.jpg") center center / cover no-repeat;
}
.method .cnt.method__03 .swiper-img {
  background: url("../images/img-method-03.jpg") center center / cover no-repeat;
}
.method .cnt.method__04 .swiper-img {
  background: url("../images/img-method-04.jpg") center center / cover no-repeat;
}
.method .cnt .swiper-img {
  transform: scale(1.15);
  transition: all 1s ease-in-out;
  filter: blur( 0 );
}
.method .cnt.active .cnt__inner.active .swiper-img {
  animation: zoomUp 15s linear 0s normal both;
  filter: blur(0);
}
.method .cnt div.cpt {
  width: calc( 104 / 1920 * 100% );
  position: absolute;
  left: calc( 40 / 1920 * 100% );
  top: calc( 40 / 1920 * 100% );
}
.method .cnt.method__04 div.cpt {
  width: calc( 133 / 1920 * 100% );
}
.method .cnt ul.pagination {
  width: 13px;
  position: absolute;
  right: 40px;
  top: 50%;
  margin-top: -95px;
}
.method .cnt ul li {
  display: block;
  background-color: rgba(255, 255, 255, .5);
  width: 13px;
  height: 13px;
  border-radius: 7px;
  margin-bottom: 16px;
}
.method .cnt ul li.active {
  background-color: rgba(255, 255, 255, 1);
}
.method .cnt ul li.text {
  width: 10px;
  height: auto;
  background: inherit;
  border-radius: 0;
}
.method .cnt h2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: blur( 0 );
}
.method .cnt.method__01.active .cnt__inner.active h2,
.method .cnt.method__02.active .cnt__inner.active h2,
.method .cnt.method__03.active .cnt__inner.active h2 {
  animation: fadeInUp 1.4s ease 0s normal both;
}
.method .cnt.method__04.active .cnt__inner.active h2 {
  animation: fadeInUp 1.4s ease 0s normal both;
}
/*
.method .cnt.method__01 .cnt__inner h2 {
  width: calc( 240 / 1920 * 100% );
  margin-left: calc( -240 / 2 / 1920 * 100% );
}
.method .cnt.method__02 .cnt__inner h2 {
  width: calc( 454 / 1920 * 100% );
  margin-left: calc( -454 / 2 / 1920 * 100% );
}
.method .cnt.method__03 .cnt__inner h2 {
  width: calc( 234 / 1920 * 100% );
  margin-left: calc( -234 / 2 / 1920 * 100% );
}
.method .cnt.method__04 .cnt__inner h2 {
  width: calc( 426 / 1920 * 100% );
  margin-left: calc( -426 / 2 / 1920 * 100% );
}
*/
/* method__00 */
.method .method__00 .cnt__inner {
  background: url("../images/bg-method-01.jpg") center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.method .method__00 .cnt__inner .cnt__wrap {
  width: 100%;
  text-align: center;
}
.method .method__00 .logo {
  /*width: calc( 250 / 1920 * 100% );*/
  margin: 0 auto 32px;
  /*padding-top: calc( 100 / 1920 * 100% );*/
}
.method .method__00 h2 {
  position: relative;
  left: auto;
  top: auto;
  display: block;
  /*width: calc( 149 / 1920 * 100% );*/
  height: auto;
  margin: 0 auto 25px;
  filter: blur( 0 );
}
.method .method__00 h3 {
  /*width: calc( 75 / 1920 * 100% );*/
  margin: 0 auto 32px;
  line-height: 0.1;
}
.method .method__00 p {
  /*width: calc( 588 / 1920 * 100% );*/
  margin: 0 auto 30px;
}
.method .method__00 p + p {
  /*width: calc( 584 / 1920 * 100% );*/
  margin: 0 auto;
  /*padding-bottom: calc( 100 / 1920 * 100% );*/
}
@keyframes zoomUp {
  0% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}


/* .product */
.product {
  position: relative;
  z-index: 3500;
}
.product .cnt__inner {
  background: url("../images/bg-product-01.jpg?251021") center top / cover no-repeat;
  padding: calc( 170 / 1920 * 100% ) 0;
  box-sizing: border-box;
  position: relative;
  z-index: 3520;
}
.product h2 {
  width: 319px;
  margin: 0 auto calc( 52 / 1100 * 100% );
}
.product .product__list .slide {
  width: 100%;
  box-sizing: border-box;
}
.product .slide .swiper {
  overflow: visible;
}
.product .slide .swiper-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: calc( 1200 / 1200 * 100% );
  margin: 0 auto;
  box-sizing: border-box;
}
@media screen and (min-width: 1280px) {
  .product .slide .swiper-wrapper {
    width: 1260px;
  }
}
.product .slide .swiper-wrapper::before {
  content: "";
  width: 100%;
  order: 1;
}
.product .product__list .swiper-slide {
  width: calc( 210 / 1260 * 100% );
  aspect-ratio: 210 / 273;
  margin: 0;
  position: relative;
}
.product .product__list .swiper-slide:nth-child( n+6 ) {
  order: 1;
}
.product .product__list .swiper-slide picture,
.product .product__list .swiper-slide img {
  display: block;
}
.product .product__list .swiper-slide img.product__list-img {
  aspect-ratio: 210 / 200;
}
.product .product__list .swiper-slide a {
  background: url("../images/btn-product-01_on.png?251021") left top / 100% auto no-repeat;
  margin: 0 0 0 calc( 15 / 210 * 100% );
  width: calc( 180 /  210 * 100% );
}
.product .slide .product__navi {
  display: none;
}
.product .slide .swiper-wrapper::after {
  content: "※ モンドセレクション2021年度スピリッツ＆リキュール部門 金賞受賞（リニューアル前の商品での受賞。2024年にリニューアル）";
  color: #1d1d1d;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  width: 100%;
  position: absolute;
  right: 0;
  bottom: calc( -15 / ( 274 * 2 ) * 100% );
}

/* .popup */
.popup {
  height: 100vh;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20000;
  display: none;
}
.popup .popup__cover {
  background-color: rgba(0, 0, 0, 0.8);
  height: 100vh;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 21000;
  cursor: pointer;
}
.popup .popup__wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
.popup .popup__inner {
  width: calc( 880 / 960 * 100% );
  max-width: 880px;
  box-sizing: border-box;
  margin: auto;
  max-height: 90vh;
  z-index: 22000;
  position: relative;
}
.popup.cm .popup__inner {
  width: calc( 720 / 960 * 100% );
  max-width: 1280px;
}
.popup iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.popup .popup__close {
  position: absolute;
  right: -40px;
  top: 0;
  cursor: pointer;
  width: 30px;
  height: 30px;
}

.ani-blurIn {
  opacity: 1;
  filter: blur(40px);
}
.blurIn {
  animation-name: blurIn;
}
.blurIn.animated {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
}
@keyframes blurIn {
  from {
    filter: blur( 40px );
  }
  to {
    filter: blur( 0px );
  }
}