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

/* common */
.main-inner {
  position: relative;
  z-index: 4000;
}
.main-inner img {
  line-height: 0.1;
}
.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 : calc( 200 / 750 * 100vw );
  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 */
main + div {
  background: #fff;
  position: relative;
  z-index: 4000;
  padding-top: calc( 60 / 750 * 100vw );
}
.main-inner::before {
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background: url("../images/bg-thought-01_sp.jpg") 50% 100% / cover no-repeat;
}
.main-inner {
  overflow: hidden;
}
.onlyPc {
  display: none;
}
.ani-sp-rotateIn,
.ani-sp-fadeInDown,
.ani-sp-fadeInUp,
.ani-sp-fadeInLeft,
.ani-sp-fadeInRight,
.ani-sp-fadeIn {
  opacity: 0;
}

/* .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: calc( 27 / 750 * 100vw ) 0 calc( 28 / 750 * 100vw );
  color: #1d1d1d;
  font-size: calc( 20 / 750 * 100vw );
  line-height: calc( 32 / 750 * 100vw );
  letter-spacing: 0.05em;
  border-top: #d0d0d0 solid 1px;
  border-bottom: #d0d0d0 solid 1px;
}
.mv .slide {
  position: relative;
}
.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: auto;
  height: 100%;
  top: 0;
  left: calc( 38 / 750 * 100vw );
  line-height: 0.1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mv .swiper-pagination .swiper-pagination-bullet {
  width: calc( 15 / 750 * 100vw );
  height: auto;
  aspect-ratio: 1 / 1;
  background: #fff;
  opacity: 1;
  margin: calc( 16 / 750 * 100vw ) 0;
  border-radius: 100px;
}
.mv .swiper-pagination .swiper-pagination-bullet-active {
  background: #c0a336;
}

/* .menu */
.menu {
  position: relative;
  z-index: 4100;
  opacity: 0;
}
.main-inner.active .menu {
  opacity: 1;
}
.menu ul {
  display: flex;
}
.menu ul li:nth-child(1) {
  display: none;
}

/* .thought */
.thought {
  box-sizing: border-box;
}
.thought .cnt__inner {
  z-index: 2900;
  padding: calc( 152 / 750 * 100vw ) 0 0;
}
.thought h2 {
  width: calc( 434 / 750 * 100vw );
  margin: 0 auto calc( 50 / 750 * 100vw );
}
.thought h3 {
  width: calc( 121 / 750 * 100vw );
  margin: 0 auto calc( 54 / 750 * 100vw );
  line-height: 0.1;
}
.thought p {
  width: calc( 619 / 750 * 100vw );
  margin: 0 auto calc( 92 / 750 * 100vw );
}
.thought p + p {
  width: calc( 623 / 750 * 100vw );
  margin: 0 auto calc( 95 / 750 * 100vw );
}
.thought .scroll::after {
  position: absolute;
  left: 50%;
  bottom: calc( -200 / 750 * 100vw );
}


/* .popMovie */
.popMovie {
  height: calc( 100 / 750 * 100vw );
}
.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( 670 / 750 * 100vw );
  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: 0;
  top: calc( -61 / 750 * 100vw );
  cursor: pointer;
  width: calc( 53 / 750 * 100vw );
  height: calc( 53 / 750 * 100vw );
}

/* .movie */
.movie {
  position: relative;
  min-height: 100vh;
  background: url("../images/bg-movie-01_sp.jpg") center bottom / cover no-repeat;
  display: flex;
  align-items: center;
  transition: all .8s;
  opacity: 0;
}
.movie .cnt__inner {
  padding: calc( 150 / 750 * 100vw ) 0;
}
.movie h2 {
  width: calc( 446 / 750 * 100vw );
  margin: 0 auto calc( 54 / 750 * 100vw );
}
.movie h3 {
  width: calc( 304 / 750 * 100vw );
  margin: 0 auto calc( 51 / 750 * 100vw );
  line-height: 0.1;
}
.movie iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.movie dl {
  width: calc( 697 / 750 * 100vw );
  margin: 0 0 calc( 75 / 750 * 100vw ) calc( 36 / 750 * 100vw );
}
.movie dl dd {
  width: calc( 627 / 750 * 100vw );
  margin: 0 0 0;
}
.movie .scroll {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.movie .scroll::after {
  position: absolute;
  left: 50%;
  bottom: calc( -100 / 750 * 100vw );
}


/* .method */
.method {
  position: relative;
  z-index: 3500;
}
.method .scroll {
  position: absolute;
  bottom: calc( -100 / 750 * 100vw );
  left: 50%;
}
.method .scroll::after {
  background-color: #fff;
}
.method .method__00 .scroll::after {
  background-color: #000;
}
.method .cnt {
  height: 120vh;
}
.method .cnt#method__04 {
  height: 250vh;
}
.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;
}
.method .cnt .swiper-img,
.method .cnt .swiper-img img {
  display: block;
  width: 100vw;
  height: 100vh;
}
.method .cnt .swiper-img {
  transform: scale(1.3);
  transition: all 1.5s 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( 157 / 750 * 100vw );
  position: absolute;
  left: calc( 40 / 750 * 100vw );
  top: calc( 100 / 1140 * 100% );
}
.method .cnt.method__04 div.cpt {
  width: calc( 200 / 750 * 100vw );
}
.method .cnt h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: calc( -270 / 750 * 100vw );
  /*transition: all 1.5s ease-in-out;*/
}
.method .cnt ul.pagination {
  width: calc( 18 / 750 * 100vw );
  position: absolute;
  right: calc( 40 / 750 * 100vw );
  bottom: calc( 30 / 1140 * 100% );
}
.method .cnt ul li {
  display: block;
  background-color: rgba(255, 255, 255, .5);
  width: calc( 18 / 750 * 100vw );
  height: calc( 18 / 750 * 100vw );
  border-radius: calc( 19 / 750 * 100vw );
  margin-bottom: calc( 25 / 750 * 100vw );
}
.method .cnt ul li.active {
  background-color: rgba(255, 255, 255, 1);
}
.method .cnt ul li.text {
  width: calc( 17 / 750 * 100vw );
  height: auto;
  background: inherit;
  border-radius: 0;
}
.method .cnt.method__01 .cnt__inner h2 {
  width: calc( 368 / 750 * 100vw );
  margin-left: calc( -368 / 2 / 750 * 100vw );
}
.method .cnt.method__02 .cnt__inner h2 {
  width: calc( 365 / 750 * 100vw );
  margin-left: calc( -365 / 2 / 750 * 100vw );
}
.method .cnt.method__03 .cnt__inner h2 {
  width: calc( 348 / 750 * 100vw );
  margin-left: calc( -348 / 2 / 750 * 100vw );
}
.method .cnt.method__04 .cnt__inner h2 {
  width: calc( 552 / 750 * 100vw );
  margin-left: calc( -552 / 2 / 750 * 100vw );
}
.method .cnt h2 {
  opacity: 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__00 */
.method .cnt.method__00 {
  height: 100vh;
}
.method .method__00 .cnt__inner {
  background: url("../images/bg-method-01_sp.jpg") center top / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.method .method__00 .logo {
  width: calc( 303 / 750 * 100vw );
  margin: 0 auto calc( 48 / 750 * 100vw );
}
.method .method__00 h2 {
  position: relative;
  left: auto;
  top: auto;
  width: calc( 277 / 750 * 100vw );
  margin: 0 auto calc( 42 / 750 * 100vw );
  filter: blur( 0 );
}
.method .method__00 h3 {
  width: calc( 111 / 750 * 100vw );
  margin: 0 auto calc( 54 / 750 * 100vw );
  line-height: 0.1;
}
.method .method__00 p {
  width: calc( 415 / 750 * 100vw );
  margin: 0 auto calc( 29 / 750 * 100vw );
}
.method .method__00 p + p {
  width: calc( 584 / 750 * 100vw );
  margin: 0 auto;
  padding-bottom: calc( 200 / 750 * 100vw );
}
.method .swiper-img + picture img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-height: 100%;
  max-width: 100%;
  height: auto;
}
.method img {
  /*
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
  */
}
@keyframes zoomUp {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* .product */
.product {
  position: relative;
  z-index: 3500;
}
.product .cnt__inner {
  background: url("../images/bg-product-01_sp.jpg?251021") center top / cover no-repeat;
  padding: calc( 142 / 750 * 100vw ) 0 calc( 110 / 750 * 100vw );
  box-sizing: border-box;
  min-height: 100vh;
  position: relative;
  z-index: 3520;
}
.product h2 {
  width: calc( 513 / 750 * 100vw );
  margin: 0 auto calc( 33 / 750 * 100vw );
}
.product .slide {
  width: 100%;
}
.product .swiper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible;
}
.product .swiper .swiper-slide {
  position: relative;
  width: calc( 590 / 750 * 100vw );
  padding: 0;
  box-sizing: border-box;
}
.product .product__list .swiper-slide a {
  display: block;
  margin: 0 0 0 calc( 27 / 750 * 100vw );
  width: calc( 548 / 750 * 100vw );
}
.product .product__navi {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc( 40 / 750 * 100vw );
}
.product .swiper-prev,
.product .swiper-next {
  display: flex;
  align-items: center;
  width: calc( 40 / 750 * 100vw );
  height: calc( 40 / 750 * 100vw );
  box-sizing: border-box;
  padding: 0 calc( ( 40 - 16 ) / 2 / 750 * 100vw );
}
.product .swiper-prev {
  transform: rotate(180deg);
}
.product .swiper-pagination {
  position: relative;
  width: auto;
  top: auto;
  bottom: auto;
  line-height: 0.1;
  padding: 0 calc( 18 / 750 * 100vw );
}
.product .swiper-pagination .swiper-pagination-bullet {
  width: calc( 18 / 750 * 100vw );
  height: calc( 18 / 750 * 100vw );
  border: #6a5b4c solid 1px;
  border-radius: 50%;
  background-color: inherit;
  opacity: 1;
  margin: 0 calc( 12 / 750 * 100vw );
}
.product .swiper-pagination .swiper-pagination-bullet-active {
  background: #6a5b4c;
}

/* .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.85);
  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( 710 / 750 * 100vw );
  box-sizing: border-box;
  margin: auto;
  max-height: 90vh;
  z-index: 22000;
  position: relative;
}
.popup.cm .popup__inner {
  width: calc( 670 / 750 * 100vw );
}
.popup iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.popup .popup__close {
  position: absolute;
  right: 0;
  top: calc( -61 / 750 * 100vw );
  cursor: pointer;
  width: calc( 53 / 750 * 100vw );
  height: calc( 53 / 750 * 100vw );
}


.ani-blurIn {
  opacity: 1;
  filter: blur(20px);
}
.blurIn {
  animation-name: blurIn;
}
@keyframes blurIn {
  from {
    filter: blur( 20px );
  }
  to {
    filter: blur( 0px );
  }
}