@charset "UTF-8";
/* media query
------------------------------------------ */
/* display
------------------------------------------ */
.is-show-pc {
  display: block;
}

.is-show-sp {
  display: none;
}

#breadcrumb{
  display: none;
}

@media (max-width: 767px) {
  .footer{
    padding-top: 0;
  }

  .is-show-pc {
    display: none;
  }

  .is-show-sp {
    display: block;
  }

  .main-area{
    padding-top: calc(7 * (100vw / 375));
  }
}

@media (min-width: 768px) {
  #Contents{
    padding-top: 0;
  }
}

/* function
------------------------------------------ */
.issue230 {
  /* 可変設定
  ------------------------------------------ */
  /*デザインの値*/
  --pc-width: 2100; /*PCデザイン幅*/
  --sp-width: 750; /*SPデザイン幅*/
  --pc-artboard-width: 675; /*SP共通デザイン幅*/
  --sp-artboard-width: 750; /*PC共通デザイン幅*/
  /*可変率の計算式*/
  --formula: calc(
    var(--variable) * var(--ratio)
  ); /*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1); /*PCデザインの可変割合の計算式*/
  /* PC画面幅 1400px以上 固定 */
  /* PC画面幅 768～1400px 可変 */
  /* SP画面幅 767px以下 可変 */
  /* mixin
  ------------------------------------------ */
  /* reset
  ------------------------------------------ */
  /* 共通
  ------------------------------------------ */
  --font-seasons: "the-seasons", sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --color-gray: #353535;
  --color-yellow: #eaead8;

  font-style: normal;
  color: var(--color-gray);
  background-color: var(--color-yellow);
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  /* animation
  ------------------------------------------ */
  /* LP style
  ------------------------------------------ */
  /* product
  ------------------------------------------ */
  /* all
  ------------------------------------------ */
}
@media (min-width: 1401px) {
  .issue230 {
    --ratio: calc(
      var(--pc-artboard-width) / var(--sp-artboard-width)
    ); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}
@media (min-width: 768px) and (max-width: 1400px) {
  .issue230 {
    --ratio: calc(
      var(--pc-artboard-width) / var(--sp-artboard-width)
    ); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}
@media (max-width: 767px) {
  .issue230 {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}
.issue230 img {
  width: 100%;
  height: auto;
}

.issue230 a{
  display: inline-block;
}

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

.issue230-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #353535;
}
@media (max-width: 767px) {
  .issue230-container {
    display: block;
  }
}

/* ===================================
    mv
=================================== */
.issue230 .mv a {
  display: block;
  position: relative;
  z-index: 0;
}
.issue230 .mv_ttl {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
}

@media (min-width: 767px) {
  .issue230 .mv {
    position: sticky;
    top: calc(50 * var(--formula_pc));
    width: 50%;
    height: 100vh;
  }

  .issue230 .mv-img img {
    width: 100%;
    height: 100vh;
    -o-object-fit: cover;
      object-fit: cover;
    -o-object-position: center top;
      object-position: center top;
  }

  .issue230 .mv-img {
    width: 100%;
    height: 100%;
  }

  .issue230 .mv_ttl {
    width: calc(729.84 * var(--formula_pc));
    bottom: calc(100 * var(--formula_pc));
  }
}

@media (max-width: 767px) {
  .issue230 .mv {
    position: static;
    width: 100%;
    height: auto;
  }

  .issue230 .mv_ttl {
    width: calc(610.2 * var(--formula));
    bottom: calc(20 * var(--formula))
  }

  .issue230 .mv-img {
    height: auto;
  }

  .issue230 .mv-img img {
    -o-object-fit: fill;
       object-fit: fill;
    height: auto;
  }
}

/* ===================================
    lp-container
=================================== */
.issue230 .lp-container {
  width: 50%;
}

.issue230 .lp-cont {
  width: calc(750 * var(--variable) * var(--ratio));
  margin: 0 auto;
}

.issue230 .credit__list{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: calc(30 * var(--formula)) auto 0;
}

.issue230 .credit__list .credit_item{
  font-family: var(--font-seasons);
  font-size: calc(22 * var(--formula));
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  line-height: 2;
}

.issue230 .animate-txt{
  position: absolute;
  z-index: 2;
  font-family: var(--font-seasons);
  font-size: calc(26 * var(--formula));
  font-weight: var(--fw-regular);
  letter-spacing: 0.075em;
  line-height: 1.75;
}

.issue230 .hero {
  margin-top: calc(128 * var(--formula));
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-size: calc(20 * var(--formula));
  line-height: 2;
  text-align: left;
  text-align: center;
}

.issue230 .product{
  padding-bottom: calc(190 * var(--formula));
}

.issue230 .product-img{
  padding-bottom: calc(100 * var(--formula));
}

@media (max-width: 767px) {
  .issue230 .lp-container {
    width: 100%;
  }
}

/* ===================================
    product01
=================================== */
.issue230 .product01{
  padding-top: calc(130 * var(--formula));
}

.issue230 .product01 .product-img01{
  position: relative;
  z-index: 1;
  width: calc(600 * var(--formula));
  margin: 0 0 0 auto;
  padding-top: calc(68 * var(--formula));
}

.issue230 .product01 .product-img01 .animate-txt{
  top: 0;
  left: calc(-100 * var(--formula));
}

.issue230 .product01 .product-img02{
  width: calc(540 * var(--formula));
  margin: 0 auto 0 calc(50 * var(--formula));
}

.issue230 .product01 .credit__list{
  width: calc(460 * var(--formula));
}

/* ===================================
    product02
=================================== */
.issue230 .product02 .product-img01{
  width: calc(700 * var(--formula));
  margin-right: auto;
  margin-left: auto;
}

.issue230 .product02 .product-img02{
  width: calc(640 * var(--formula));
  margin: 0 0 0 auto;
}

.issue230 .product02 .product-img03{
  width: calc(560 * var(--formula));
  margin: 0 auto 0 0;
}

.issue230 .product02 .credit__list{
  justify-content: flex-start;
  margin-left: calc(50 * var(--formula));
}

/* ===================================
    product03
=================================== */
.issue230 .product03 .product-img01{
  position: relative;
  z-index: 1;
  width: 100%;
}

.issue230 .product03 .animate-txt{
  line-height: 1.5;
  bottom: calc(70 * var(--formula));
  left: calc(50 * var(--formula));
  color: #fff;
}

/* ===================================
    product04
=================================== */
.issue230 .product04 .product-img01{
  width: calc(660 * var(--formula));
  margin: 0 auto 0 0;
}

.issue230 .product04 .product-img02{
  width: calc(500 * var(--formula));
  margin: 0 0 0 auto;
}

.issue230 .product04 .product-img03{
  width: calc(680 * var(--formula));
  margin: 0 auto;
}

/* ===================================
    product05
=================================== */
.issue230 .product05{
  padding-bottom: 200;
}

.issue230 .product05 .product-slider{
  width: calc(600 * var(--formula));
  margin: 0 auto calc(40 * var(--formula));
}

.issue230 .product05 .product-img01{
  width: calc(600 * var(--formula));
  margin-right: auto;
  margin-left: auto;
  padding-bottom: calc(90 * var(--formula));
}

.issue230 .product05 .product-img02{
  position: relative;
  z-index: 1;
  padding-top: calc(70 * var(--formula));
}

.issue230 .product05 .product-img02 .animate-txt{
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
}

/* ===================================
    at the end
=================================== */
.issue230 .all {
  padding: 0 0 calc(220 * var(--formula)) 0;
  text-align: center;
}
.issue230 .all-link {
  position: relative;
  font-family:var(--font-seasons);
  font-weight: var(--fw-regular);
  font-optical-sizing: auto;
  font-size: calc(34 * var(--formula));
  letter-spacing: 0.08em;
  display: inline-block;
}

.issue230 .all-link::after {
  content: "";
  position: absolute;
  bottom: calc(-26 * var(--formula));
  left: calc(0 * var(--formula));
  right: calc(0 * var(--formula));
  margin: auto;
  width: calc(0 * var(--formula));
  height: 1px;
  background-color: #353535;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: 2s;
  transition: 2s;
}
.issue230 .all-link.is-active::after {
  width: calc(160 * var(--formula));
  -webkit-transform: scale(1);
          transform: scale(1);
}


/* ===================================
    animation
=================================== */
.issue230 span{
  display: inline-block;
}

.issue230 .js-textAnime{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.issue230 .js-textAnime.is-inview{
  opacity: 1;
  visibility: visible;
}

.issue230 .js-textAnime.is-inview span{
  display: inline-block;
  opacity: 0;
  animation: fadeInLeft 0.8s ease-out forwards;
}

@keyframes fadeInLeft {
  100%{
    opacity: 1;
  }
}

/* .scrollIn */
.js-show.scrollIn{
  opacity: 0;
  transition: 2s;
}

.js-show.scrollIn.is-active{
  visibility: visible;
  opacity: 1;
  clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0% 100%);
}

.issue230 [data-rollIn="left"],
.issue230 [data-rollIn="right"]{
  transform: translate(0px, 0px);
  visibility: hidden;
  opacity: 0;
  transition: clip-path 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: clip-path, opacity, visibility;
}

.issue230 [data-rollIn="left"]{
  clip-path: polygon(0px 0px, 0 0px, 0 100%, 0 100%);
}

.issue230 [data-rollIn="right"]{
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}


/* .fadeIn */
.js-show.fadeIn{
  opacity: 0;
  transition: 2s;
}

.js-show.fadeIn.is-active{
  opacity: 1;
  transform: translate(0, 0);
}

@media (min-width: 767px) {
  .js-first.firstView{
    opacity: 0;
    transition: 2s;
  }

  .js-first.firstView.is-active{
    opacity: 1;
    transform: translate(0, 0);
  }

}
/* .zoomOut */
.issue230 .js-first .zoomOut,
.js-show.zoomOut{
  opacity: 0;
  transition: 2s;
  overflow: hidden;
}

.issue230 .js-first .zoomOut img,
.js-show.zoomOut img{
  transform: scale(1.1);
  transition: transform 4s ease;
}

.issue230 .js-first.is-active .zoomOut,
.js-show.zoomOut.is-active{
  opacity: 1;
  transform: translate(0, 0);
}

.issue230 .js-first.is-active .zoomOut img,
.js-show.zoomOut.is-active img{
  transform: scale(1);
}

/* .mv_ttl */
.issue230 .js-first .loadIn{
  opacity: 0;
  transition: opacity 800ms, transform 500ms;
  transition-delay: 2.8s;
}

.issue230 .js-first.is-active .loadIn{
  opacity: 1;
}

/* .swiper */
/* .issue230 .swiper-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: calc(20 * var(--formula));
  position: absolute;
  padding-right: calc(20 * var(--formula));
  bottom: calc(20 * var(--formula));
}
.issue230 .swiper-pagination-bullet {
  width: calc(10 * var(--formula));
  height: calc(10 * var(--formula));
  background-color: transparent;
  border-radius: 50%;
  opacity: 1;
  margin: 0 !important;
  border: 1px solid #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.issue230 .swiper-pagination-bullet-active {
  background-color: #fff;
} */