@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
------------------------------------------ */
.issue231 {
  /* 可変設定
  ------------------------------------------ */
  /*デザインの値*/
  --pc-width: 2100; /*PCデザイン幅*/
  --sp-width: 750; /*SPデザイン幅*/
  --pc-artboard-width: 673.4482; /*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-warbler: "warbler-banner", sans-serif;
  --font-hiragino: "hiragino-mincho-pron", sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --color-gray: #282828;

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

.issue231 a{
  display: inline-block;
}

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

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

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

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

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

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

  .issue231 .mv_ttl01 {
    width: calc(504 * var(--formula_pc));
    top: calc(110 * var(--formula_pc));
    left: 49.6%;
  }

  .issue231 .mv_ttl02 {
    width: calc(615.9443 * var(--formula_pc));
    bottom: calc(100 * var(--formula_pc));
  }
}

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

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

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

  .issue231 .mv_ttl01 {
    width: calc(505.0464 * var(--formula));
    top: calc(110 * var(--formula))
  }

  .issue231 .mv_ttl02 {
    width: calc(615.9443 * var(--formula));
    bottom: calc(100 * var(--formula))
  }
}

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

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

.issue231 .fv-txt{
  text-align: center;
  white-space: nowrap;
  color: var(--color-gray);
  width: calc(538.8496 * var(--formula));
  font-family: var(--font-hiragino);
  font-size: calc(22 * var(--formula));
  font-weight: var(--fw-light);
  letter-spacing: 0.12em;
  line-height: 2;
  margin: calc(128 * var(--formula)) auto calc(190 * var(--formula));
}

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

.issue231 .credit__list .credit_item{
  font-family: var(--font-warbler);
  font-size: calc(20 * var(--formula));
  font-weight: var(--fw-regular);
  letter-spacing: 0.06em;
  color: var(--color-gray);
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.issue231 .product{
  margin-bottom: calc(205 * var(--formula));
}

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

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

/* ===================================
    product01
=================================== */
.issue231 .product01 .product-img01{
  position: relative;
  z-index: 2;
  width: calc(620 * var(--formula));
  margin-right: auto;
  margin-left: auto;
  padding-top: calc(71 * var(--formula));
}

.issue231 .product01 .product-img01 div{
  background-color: #fff;
}

.issue231 .product01 .product-img01::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  background-image: url(../img/SVG/product01_ttl.svg);
  width: calc(682.6037 * var(--formula));
  height: calc(86.1829 * var(--formula));
}

.issue231 .product01 .product-slide{
  margin-right: calc(30 * var(--formula)) !important;

}

.issue231 .product01 .product-img02{
  width: calc(700 * var(--formula));
  margin: 0 auto calc(30 * var(--formula));
}

.issue231 .product01 .product-img03{
  width: calc(700 * var(--formula));
  margin-right: auto;
  margin-left: auto;
}

.issue231 .product01 .credit__list{
  width: calc(350 * var(--formula));
}

/* ===================================
    coordinate-pack --01
=================================== */

.issue231 .coordinate-pack.--01{
  position: relative;
  z-index: 1;
  width: calc(500 * var(--formula));
  margin-right: auto;
  margin-left: auto;
  margin-bottom: calc(209 * var(--formula));
}

.issue231 .coordinate-pack.--01 .horizontal_ttl01,
.issue231 .coordinate-pack.--01 .horizontal_ttl02{
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
}

.issue231 .coordinate-pack.--01 .horizontal_ttl01{
  width: calc(336.7014 * var(--formula));
  top: calc(30 * var(--formula));
}

.issue231 .coordinate-pack.--01 .horizontal_ttl02{
  width: calc(442.7153 * var(--formula));
  bottom: calc(-10 * var(--formula));
}


/* ===================================
    product02
=================================== */
.issue231 .product02 .product-img01{
  position: relative;
  width: 100%;
  z-index: 1;
  margin-right: auto;
  margin-left: auto;
  padding-top: calc(66 * var(--formula));
}

.issue231 .product02 .product-img01::after{
  content: "";
  position: absolute;
  z-index: 2;
  background-image: url(../img/SVG/product02_ttl.svg);
  width: calc(495.6084 * var(--formula));
  height: calc(86.1826 * var(--formula));
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

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

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

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

/* ===================================
    coordinate-pack --02
=================================== */

.issue231 .coordinate-pack.--02{
  position: relative;
  width: calc(575 * var(--formula));
  margin-right: auto;
  margin-left: auto;
}

.issue231 .coordinate-pack.--02 .coordinate-pack-img{
  width: calc(460 * var(--formula));
  margin: 0 auto;
}

.issue231 .coordinate-pack.--02 .vertical_ttl01,
.issue231 .coordinate-pack.--02 .vertical_ttl02{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.issue231 .coordinate-pack.--02 .vertical_ttl01{
  width: calc(34.7803 * var(--formula));
  right: calc(-20* var(--formula));
}

.issue231 .coordinate-pack.--02 .vertical_ttl02{
  width: calc(18.1455 * var(--formula));
  left: 0;
}


/* ===================================
    product03
=================================== */
.issue231 .product03{
  margin-bottom: calc(200 * var(--formula));
}

.issue231 .product03 .product-img_flex{
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(30 * var(--formula));
  width: 100%;
  padding-top: calc(68 * var(--formula));
}

.issue231 .product03 .product-img_flex::before{
  content: "";
  position: absolute;
  top: calc(-5 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../img/SVG/product03_ttl.svg);
  width: calc(383.1777 * var(--formula));
  height: calc(86.0684 * var(--formula));
}

.issue231 .product03 .flex-img{
  width: calc(360 * var(--formula));
  background: #fff;
}

.issue231 .product03 .product-img05{
  width: calc(600 * var(--formula));
  margin-right: auto;
  margin-left: auto;
}

.issue231 .product03 .credit__list{
  width: calc(500 * var(--formula));
}


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

.issue231 .all-link {
  position: relative;
  font-family:var(--font-warbler);
  font-weight: var(--fw-regular);
  font-optical-sizing: auto;
  font-size: calc(34 * var(--formula));
  letter-spacing: 0.06em;
  display: inline-block;
}

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


/* ===================================
    animation
=================================== */
/* .fadeIn */
.js-show{
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: 1.6s;
  transition: 1.6s;
}

.js-show.is-active{
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.js-first{
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: 1.6s;
  transition: 1.6s;
}

.js-first.is-active{
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.js-first.mv_ttl01,
.js-first.mv_ttl02{
  opacity: 0;
  -webkit-transform: translate(-50%, 30px);
  transform: translate(-50%, 30px);
  -webkit-transition: 1.6s;
  transition: 1.6s;
}

.js-first.mv_ttl01.is-active,
.js-first.mv_ttl02.is-active{
  opacity: 1;
   -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.issue231 .animation_delay01{
  transition-delay: 0.3s;
}

.issue231 .animation_delay02{
  transition-delay: 0.6s;
}

.issue231 .animation_delay03{
  transition-delay: 0.9s;
}

/*================================
  slick
=================================*/
.issue231 .slider{
  width:100%;
  margin:0 auto;
}
.issue231 .slick-list{
  overflow: visible;
}
.issue231 .slider img{
  width:100%;
}
.issue231 .slick-list {
  padding-right: calc(200 * (100vw / 750))!important;
}
.issue231 [data-img="block04-slider"] .slick-list{
  padding-right: calc(140 * (100vw / 750))!important;
}
.issue231 .slider .slick-slide{
  height:auto!important;
}
@media only screen and (min-width: 768px) {
  .issue231 .slick-list {
    padding-right: calc(205 * (67.5rem / 750))!important;
    overflow: hidden;
  }
  .issue231 [data-img="block04-slider"] .slick-list{
    padding-right: calc(145 * (67.5rem / 750))!important;
  }
}
/* end slick */