@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
------------------------------------------ */
.issue238 {
  /* 可変設定
  ------------------------------------------ */
  /*デザインの値*/
  --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-benton: benton-modern-display, serif;
  --font-wordy: wordy-diva, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --color-gray: #353535;
  --color-black: #000;

  font-style: normal;
  color: var(--color-black);
  background-color: #fff;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  /* animation
  ------------------------------------------ */
  /* LP style
  ------------------------------------------ */
  /* product
  ------------------------------------------ */
  /* all
  ------------------------------------------ */
}

/* font-family: benton-modern-display, serif;
font-weight: 400;
font-style: normal;

font-family: wordy-diva, sans-serif;
font-weight: 500;
font-style: normal;*/

@media (min-width: 1401px) {
  .issue238 {
    --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) {
  .issue238 {
    --ratio: calc(
      var(--pc-artboard-width) / var(--sp-artboard-width)
    ); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}
@media (max-width: 767px) {
  .issue238 {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}
.issue238 img {
  width: 100%;
  height: auto;
}

.issue238 a{
  display: inline-block;
}

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

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

/* ===================================
    mv
=================================== */
.issue238 .mv a {
  display: block;
  position: relative;
  z-index: 0;
}
.issue238 .mv_ttl,
.issue238 .mv_subttl {
  position: absolute;
  z-index: 1;
}

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

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

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

  .issue238 .mv_ttl {
    width: calc(367.4873 * var(--formula_pc));
    top: calc(150 * var(--formula_pc));
    left: calc(60 * var(--formula_pc));
  }

  .issue238 .mv_subttl {
    width: calc(266.8589 * var(--formula_pc));
    bottom: calc(calc(27 * var(--formula_pc)) + 5rem);
    right: calc(40 * var(--formula_pc));
  }
}

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

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

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

  .issue238 .mv_ttl {
    width: calc(464 * var(--formula));
    top: calc(62 * var(--formula));
    left: calc(51 * var(--formula));
  }

  .issue238 .mv_subttl {
    width: calc(329.6563 * var(--formula));
    bottom: calc(38 * var(--formula));
    right: calc(50 * var(--formula));
  }
}

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

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

.issue238 .credit__list{
  display: flex;
  flex-wrap: wrap;
  gap: calc(11 * var(--formula)) calc(0 * var(--formula));
  margin: calc(23 * var(--formula)) 0 0 calc(35 * var(--formula));
}

.issue238 .credit__list .credit_item{
  font-family: var(--font-benton);
  font-size: calc(22 * var(--formula));
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  color: var(--color-black);
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.issue238 .product{
  margin-bottom: calc(160 * var(--formula));
}

.issue238 .product-img:not(.product01 .product-img04){
  width: calc(680 * var(--formula));
  margin: 0 auto;
}

.issue238 .product-img:not(.product-img:last-of-type){
  padding-bottom: calc(60 * var(--formula));
}

@media (max-width: 767px) {
  .issue238 .lp-container {
    width: 100%;
    overflow-x: clip;
  }
}

/* ===================================
    product01
=================================== */
.issue238 .product01 {
  margin-top: calc(80 * var(--formula));
}

.issue238 .product01 .credit__list{
  width: calc(485 * var(--formula));
}

/* ===================================
    product02
=================================== */
.issue238 .product02 .credit__list{
  width: calc(472 * var(--formula));
  margin: calc(19 * var(--formula)) 0 0 calc(35 * var(--formula));
}

/* ===================================
    product03
=================================== */
.issue238 .product03 .credit__list{
  width: calc(485 * var(--formula));
  margin: calc(18 * var(--formula)) 0 0 calc(35 * var(--formula));
}

/* ===================================
    product04
=================================== */
.issue238 .product04{
  margin-bottom: calc(195 * var(--formula));
}

.issue238 .product04 .credit__list{
  width: calc(330 * var(--formula));
}

/* ===================================
    at the end
=================================== */
.issue238 .all {
  padding: 0 0 calc(225 * var(--formula)) 0;
  text-align: center;
}

.issue238 .all-link {
  position: relative;
  display: inline-block;
  font-family:var(--font-benton);
  font-weight: var(--fw-regular);
  font-optical-sizing: auto;
  font-size: calc(31 * var(--formula));
  line-height: 1;
  color: var(--color-black);
}

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


/* ===================================
    animation
=================================== */
/* .fadeIn */
.js-show.credit__list{
  overflow: hidden;
  height: 0px;
}

.js-show.is-active.credit__list{
  height: 100% !important;
  overflow: visible !important;
}

.js-show.product-img,
.js-first{
  opacity: 0;
}

.js-show.product-img.is-active,
.js-first.is-active{
  opacity: 1;
  -webkit-transition: opacity 440ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  -moz-transition: opacity 440ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  -o-transition: opacity 440ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  -ms-transition: opacity 440ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  transition: opacity 440ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  -ms-filter: none;
  filter: none;
}

@media (min-width: 768px) {
  .js-show.product-img.is-active{
    transition-delay: 0.3s;
  }
}

.js-first.mv_ttl,
.js-first.mv_subttl{
  opacity: 0;
}

.js-first.mv_ttl.is-active,
.js-first.mv_subttl.is-active{
  opacity: 1;
  -webkit-transition: opacity 800ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  -moz-transition: opacity 800ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  -o-transition: opacity 800ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  -ms-transition: opacity 800ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  transition: opacity 800ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  -ms-filter: none;
  filter: none;
  transition-delay: 0.6s;
}