@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
------------------------------------------ */
.issue236 {
  /* 可変設定
  ------------------------------------------ */
  /*デザインの値*/
  --pc-width: 1920; /*PCデザイン幅*/
  --sp-width: 750; /*SPデザイン幅*/
  --pc-artboard-width: 553; /*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-Forevs: "forevs", sans-serif;
  --font-helvetica: "helvetica-lt-pro", sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --color-black: #000000;
  --color-black2: #231815;
  --color-white: #fff;
  --color-blue: #557aab;

  font-style: normal;
  color: var(--color-black);
  background-color: #fff;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  /* animation
  ------------------------------------------ */
  --animation-speed-default: 0.3s;
  --animation-speed-fast: 0.6s;
  --animation-speed-medium: 1s;
  --animation-speed-slow: 1.5s;
  --animation-delay-none: 0s;
  --animation-delay-default: 0.2s;
  --animation-delay-short: 0.1s;
  --animation-delay-medium: 0.45s;
  --animation-delay-long: 1s;
  --fade-up-distance: 80;
  --animation-ease-modern: cubic-bezier(0.16, 1, 0.3, 1);
  /* LP style
  ------------------------------------------ */
  /* product
  ------------------------------------------ */
  /* all
  ------------------------------------------ */
  overflow-x: clip;
}

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

.issue236 a{
  display: inline-block;
}

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


/* ===================================
    PC：レイアウト
=================================== */
@media (min-width: 767px) {
  .issue236{
    display: grid;
    grid-template-columns: 1fr calc(var(--pc-artboard-width) * var(--formula_pc)) 1fr;
    background-color: var(--color-blue)
  }

  .issue236 .center-container{
    background-color: var(--color-white);
  }

  .issue236 .left-container,
  .issue236 .right-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    overflow: hidden;
    position: sticky;
    left: 0;
    top: 0;
  }

  .issue236 .left-container{
    /* top: calc(140 * var(--formula_pc)); */
    padding-top: calc(370 * var(--formula_pc));
  }

  .issue236 .right-container{
    margin-bottom: calc(15 * var(--formula_pc));
  }

  .issue236 .title_pc{
    width: calc(303.4212 * var(--formula_pc));
    margin-bottom: calc(140 * var(--formula_pc));
  }

  .issue236 .staff-list{
    width: calc(445.5693 * var(--formula_pc));
  }

  .issue236 .cai_btn_pc{
    width: calc(283.4768 * var(--formula_pc));
    margin-top: calc(35 * var(--formula_pc));
  }
}

/* ===================================
    mv
=================================== */
.issue236 .mv{
  position: relative;
  width: 100%;
  margin-bottom: calc(136.8 * var(--formula));
}

.issue236 .mv_ttl {
  position: absolute;
  bottom: calc(177 * var(--formula));
  left: 50.5%;
  transform: translateX(-50%) scale(1)!important;
  width: calc(480.4261 * var(--formula));
}

/* ===================================
    lp-container
=================================== */
.issue236 .w610{
  width: calc(610 * var(--formula));
  overflow-x: hidden;
  margin: 0 auto;
}

.issue236 .w430{
  width: calc(430 * var(--formula));
  margin: 0 auto;
}

.issue236 .number{
  font-family: var(--font-Forevs);
  font-size: calc(28 * var(--formula));
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--color-black);
  margin: 0 auto calc(11 * var(--formula)) calc(70 * var(--formula));
}

.issue236 .product_title__wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-black);
  border-bottom: 1px solid var(--color-black);
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .issue236 .product_title__wrapper{
    border-top: 0.5px solid var(--color-black);
    border-bottom: 0.5px solid var(--color-black);
  }
}

/* ===================================
    item01
=================================== */
.issue236 .item01{
  margin-bottom: calc(245.8 * var(--formula));
}

.issue236 .item01 .image__wrapper{
  margin-bottom: calc(40 * var(--formula));
}

/* ===================================
    item02
=================================== */
.issue236 .item02{
  margin-bottom: calc(190 * var(--formula));
}

.issue236 .item02 .item-credit{
  bottom: calc(10 * var(--formula));
  left: calc(19 * var(--formula));
}

/* ===================================
    product01
=================================== */
.issue236 .product01{
  margin-bottom: calc(192 * var(--formula));
}

.issue236 .product01 .product_title__wrapper{
  padding: 0 calc(71.4 * var(--formula)) 0 calc(69.3 * var(--formula));
  margin-bottom: calc(190 * var(--formula));
}

.issue236 .product01 .product_title-left{
  width: calc(197.2012 * var(--formula));
}

.issue236 .product01 .product_title-right{
  width: calc(168.083 * var(--formula));
}

.issue236 .product01 .product_txt{
  font-family: var(--font-Forevs);
  font-size: calc(21 * var(--formula));
  letter-spacing: 0.104em;
  line-height: 1.1438095238;
  color: var(--color-black);
  margin-top: calc(14 * var(--formula));
  word-spacing: calc(-1.6 * var(--formula));
}

.issue236 .product01 .product-img01,
.issue236 .product01 .product_txt{
  margin-left: calc(70 * var(--formula));
  margin-right: auto;
}

/* ===================================
    item03
=================================== */
.issue236 .item03{
  margin-bottom: calc(160 * var(--formula));
}

.issue236 .item03 .image__wrapper{
  margin-bottom: calc(20.5 * var(--formula));
}

.issue236 .item03 .item-credit{
  bottom: calc(8 * var(--formula));
  left: calc(19 * var(--formula));
}

/* ===================================
    product02
=================================== */
.issue236 .product02{
  margin-bottom: calc(231 * var(--formula));
}

.issue236 .product02 .product_title__wrapper{
  padding: 0 calc(68 * var(--formula)) 0 calc(73.5 * var(--formula));
  margin-bottom: calc(159.5 * var(--formula));
}

.issue236 .product02 .product_title-left{
  width: calc(137.8701 * var(--formula));
}

.issue236 .product02 .product_title-right{
  width: calc(179.5337 * var(--formula));
}


/* ===================================
    item04
=================================== */
.issue236 .item04{
  margin-bottom: calc(210.8 * var(--formula));
}

.issue236 .item04 .item-img01{
  margin-bottom: calc(140 * var(--formula));
}

.issue236 .item04 .item-credit{
  bottom: calc(12 * var(--formula));
  left: calc(19 * var(--formula));
}

/* ===================================
    item05
=================================== */
.issue236 .item05{
  margin-bottom: calc(98.2 * var(--formula));
}

.issue236 .item05 .image__wrapper:first-of-type{
  margin-bottom: calc(250 * var(--formula));
}

.issue236 .item05 .image__wrapper:nth-of-type(2) .item-credit{
  bottom: calc(14 * var(--formula));
  left: calc(19 * var(--formula));
}

@media (min-width: 767px) {
  .issue236 .item05{
    margin-bottom: calc(158.2 * var(--formula_pc));
  }
}

/* ===================================
    last-section only on SP
=================================== */
@media (max-width: 768px) {
  .issue236 .last_title{
    width: calc(334.9535 * var(--formula));
    margin: 0 auto calc(97.4 * var(--formula));
  }

  .issue236 .staff-list{
    width: calc(445.5693 * var(--formula));
    margin: 0 auto calc(115 * var(--formula));
  }

  .issue236 .cai_btn{
    width: calc(365.75 * var(--formula));
    margin: 0 auto calc(167.7 * var(--formula));
  }
}

/* ===================================
    animation
=================================== */
/* .blur */
.js-show.blur{
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  transition: filter 1s, opacity 1s, transform 1s;
}

.js-show.blur.is-active{
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}

/* .fadeIn */
.js-show.fadeIn,
.js-show-last.fadeIn{
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 1.2s;
}

.js-show.fadeIn.is-active,
.js-show-last.fadeIn.is-active{
  opacity: 1;
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 1.2s;
  /* transition-delay: var(--animation-delay, 0s); */
}

/* @keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
      opacity: 1;
  }
} */

/* .fadeUp */
.js-show.fadeUp{
  opacity: 0;
  transform: translateY(calc(20 * var(--formula)));
  filter: blur(calc(10 * var(--formula)));
  transition: opacity var(--animation-speed-medium) linear, transform var(--animation-speed-medium) linear, filter var(--animation-speed-medium) linear;
}

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

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

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

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

/*================================
  credit
=================================*/
.js-hover{
  position: relative;
  z-index: 1;
}

.image__overlay{
  position: absolute;
  display: grid;
  /* place-items: center; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(102, 102, 102, 0.5);
  opacity: 0;
  z-index: -1;
  /* z-index: 10; */
  transition: opacity var(--animation-ease-modern) var(--animation-delay-medium), z-index var(--animation-ease-modern) var(--animation-delay-medium);
}

.js-hover.is-active .image__overlay{
  z-index: 20; /* スライダー本体より上に持ってくる */
  pointer-events: auto;
}

.image__wrapper:has(.js-hover.is-active) .image__overlay {
  opacity: 1;
  z-index: 2;
}

.image__overlay-link{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  inset: 0;
  z-index: 3;
  /* pointer-events: none; */
}

/* .image__wrapper:has(.js-hover.is-active) .image__overlay-link{
  pointer-events: all;
} */

.item-credit{
  position: absolute;
  color: #fff;
  bottom: calc(15 * var(--formula));
  left: calc(21 * var(--formula));
  z-index: 4;
}

.item-credit__item{
  font-family: var(--font-helvetica);
  font-size: calc(21 * var(--formula));
  font-weight: var(--fw-light);
  letter-spacing: 0.08em;
  line-height: 1.5238095238;
  text-align: left;
  color: var(--color-white);
}


/*================================
  slick
=================================*/
.issue236 .slick-slider{
  z-index: 2;
}

.issue236 .js-slider,
.issue236 .slick-slider {
  position: relative;
  z-index: 1;
}

.issue236 .slick-dots{
  display: flex;
  position: absolute;
  justify-content: space-between;
  bottom: calc(18 * var(--formula));
  right: calc(22 * var(--formula));
  z-index: 99999;
  width: calc(28.5 * var(--formula));
  margin: 0;
}

.issue236 .slick-dots li{
  margin: 0;
}

.issue236 .slick-dots li button{
  width: calc(10 * var(--formula));
  height: calc(10 * var(--formula));
  border: 1px solid var(--color-white);
}

.slick-dots li.slick-active button{
  width: calc(10 * var(--formula));
  height: calc(10 * var(--formula));
  border: 1px solid var(--color-white);
  background: var(--color-white);
}

.issue236 .slick-dots li.slick-active button{
  border: 1px solid var(--color-white);
}


/* end slick */