@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
------------------------------------------ */
.issue240 {
  /* 可変設定
  ------------------------------------------ */
  /*デザインの値*/
  --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-new-hero: "new-hero", sans-serif;
  --font-helvetica: "helvetica-neue-lt-pro", sans-serif;
  --font-noto: "Noto Sans JP", sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

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

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

.issue240 a{
  display: inline-block;
}

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

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

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

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

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

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

  .issue240 .mv_ttl {
    width: calc(513.1807 * var(--formula_pc));
    bottom: calc(120 * var(--formula_pc));
    left: 50%;
    transform: translateX(-50%);
  }
}

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

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

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

  .issue240 .mv_ttl {
    width: calc(513.1807 * var(--formula));
    bottom: calc(184 * var(--formula));
    left: 50%;
    transform: translateX(-50%);
  }
}

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

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

.issue240 .product{
  margin-top: calc(160 * var(--formula));
}

.issue240 .product-credit__wrapper{
  position: relative;
}

.issue240 .credit__list{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  top: calc(40 * var(--formula));
  right: calc(40 * var(--formula));
  gap: calc(11 * var(--formula)) calc(0 * var(--formula));
}

.issue240 .credit__list .credit_item{
  font-family: var(--font-helvetica);
  font-size: calc(20 * var(--formula));
  font-weight: var(--fw-light);
  letter-spacing: 0.02em;
  color: var(--color-white);
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.issue240 .lead_txt{
  font-family: var(--font-noto);
  font-size: calc(22 * var(--formula));
  font-weight: var(--fw-regular);
  color: var(--color-black);
  line-height: 2;
  letter-spacing: 0.16em;
  text-align: center;
}

.issue240 .lead_txt.--02{
  padding-top: calc(40 * var(--formula));
}

.issue240 .lead_txt.--02 .font-en{
  font-family: var(--font-helvetica);
  word-spacing: calc(-3 * var(--formula));
}

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

/* ===================================
    product01
=================================== */
.issue240 .product.product01{
  margin-top: calc(145 * var(--formula));
}

/* ===================================
    product02
=================================== */

/* ===================================
    product03
=================================== */
.issue240 .product.product03 .credit__list{
  align-items: flex-start;
  top: auto;
  right: auto;
  bottom: calc(34 * var(--formula));
  left: calc(40 * var(--formula));
}

/* ===================================
    product04
=================================== */
.issue240 .product.product04 .credit__list{
  top: auto;
  right:  calc(40 * var(--formula));
  bottom: calc(35 * var(--formula));
}

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

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

.issue240 .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-black);
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: 2s;
  transition: 2s;
}
.issue240 .all-link.is-active::after {
  width: calc(160 * var(--formula));
  -webkit-transform: scale(1);
          transform: scale(1);
}


/* ===================================
    animation
=================================== */
.anim-delay01{
  transition-delay: 0.5s;
}

.js-show .anim-delay02{
  transition-delay: 0.6s!important;
}

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

/* .fadeIn */
.js-show.product-img,
.js-show .product-img,
.js-show .anim-delay02,
.js-first{
  opacity: 0;
}

.js-show.is-active.product-img,
.js-show.is-active .product-img,
.js-show.is-active .anim-delay02,
.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;
}

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

.js-show.anim-delay01.is-active{
  opacity: 1;
  -webkit-transition: opacity 600ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  -moz-transition: opacity 600ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  -o-transition: opacity 600ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  -ms-transition: opacity 600ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  transition: opacity 600ms cubic-bezier(0.335, 0.2, 0.18, 0.915);
  -ms-filter: none;
  filter: none;
  transition-delay: 0.6s;
}

.js-first.mv_ttl.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;
}