/* stylelint-disable no-descending-specificity
html {
  height: initial;
}

@media screen and (min-width:768px) and (max-width:2100px){
  html {
    font-size: calc(10* (100vw / 2100)) !important;
  }
} */

header{
  display: none;
}

#Contents,
.main-area{
  padding-top: 0;
}

footer{
  display: none;
  pointer-events: none;
}

#Wrap{
  padding-top: 0;
}


#issue244 {
  --color-white: #fff;
  --color-black: #000;
  --color-accordion-black: #1a1a1a;
  --color-gray: #e7e7e7;
  --color-blue: #ccdef4;
  --font-commons: "tt-commons-pro", sans-serif;
  --font-yu:  "yu-gothic-pr6n", sans-serif;
  --font-helvetica-neue: "helvetica-neue-lt-pro", sans-serif;
  --font-helvetica-lt: "helvetica-lt-pro", sans-serif;
  --pc-width: 1920; /*PCデザイン幅*/
  --sp-width: 750; /*SPデザイン幅*/
  --pc-artboard-width: 414; /*SP共通デザイン幅*/
  --sp-artboard-width: 750; /*PC共通デザイン幅*/
  --formula: calc(var(--variable) * var(--ratio)); /*SP→PC 可変設定*/
  --formula_pc: calc(var(--variable) * 1); /*PC 1400以上は固定*/

  font-family: var(--font-cezanne);
  font-weight: 400;
  font-style: normal;
  color: var(--color-black);
  background-color: var(--color-white);
  /* overflow-x: clip; */
}


/* font-family: "tt-commons-pro", sans-serif;
font-weight: 400;
font-style: normal;

Helvetica Neue LT Pro 55 Roman
font-family: "helvetica-neue-lt-pro", sans-serif;
font-weight: 400;
font-style: normal;

font-family: "yu-gothic-pr6n", sans-serif;
font-weight: 400;
font-style: normal;

font-family: "helvetica-lt-pro", sans-serif;
font-weight: 300;
font-style: normal;*/

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  #issue244 {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: 1px; /* 固定値（可変しない） */
  }
}

/* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  #issue244 {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}

/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  #issue244 {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}

.landingPage * {
  box-sizing: border-box;
  font-feature-settings: 'palt';
}

.landingPage img,
.landingPage picture {
  display: block;
}

.landingPage a {
  display: inline-block;
  width: 100%;
}

.landingPage img,
.landingPage svg {
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}
/* =======  background for PC ======= */

@media (min-width: 768px) {
  #issue244{
    position: relative;
    display: grid;
    grid-template-columns: 1fr calc(414 * var(--formula_pc)) 1fr;
    align-items: center;
    justify-content: center;
    background: url(../img/bg-pc.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    z-index: 1;
  }

  .pc-left__cont,
  .pc-right__cont{
    position: relative;
    display: flex!important;
    align-items: center;
    justify-content: center;
    z-index: 100;
    width: 100%;
    height: 100vh;
  }

  .pc-left__cont{
    grid-column: 1;
  }

  .pc-right__cont{
    grid-column: 3;
  }

  .pc-right__cont .link__wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: calc(10 * var(--formula));
  }

  .pc-left__cont .ttl__cont{
    position: relative;
    top: 0;
    z-index: 10;
    width: calc(280.825 * var(--formula_pc));
    height: calc(59.6458 * var(--formula_pc));
  }

  .pc-formula_pcight__cont .ttl__cont{
    position: relative;
    z-index: 10;
    width: calc(280.825 * var(--formula_pc));
  }

  .anchor-link{
    display: block;
    font-size: calc(26 * var(--formula_pc));
    color: var(--color-white);
    border-bottom: 1px solid var(--color-white);
  }

  .anchor-link.--01{
    width: calc(122 * var(--formula_pc));
    margin-bottom: calc(17 * var(--formula_pc));
  }

  .anchor-link.--02{
    width: calc(286 * var(--formula_pc));
    margin-bottom: calc(21 * var(--formula_pc));
  }

  .anchor-link.--03{
    width: calc(135 * var(--formula_pc));
  }

  /* Chrome, Safari, Edge (WebKit系ブラウザ) のスクロールバーのつまみを非表示にする */
  &::-webkit-scrollbar-thumb {
    background-color: transparent; /* つまみの色を透明にする */
    /* または display: none; */
  }

  .landingPage{
    position: relative;
    max-width: calc(414 * var(--formula_pc));
    height: calc(717 * var(--formula_pc));
    background: #fff;
    z-index: 1 !important;
    overflow: clip;
    /* max-width: 375px; */
    /* position: fixed; */
    /* height: 650px; */
  }


  .landingPage__inner{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    /* overflow: scroll; */
    /* scroll-behavior: smooth; */
    /* will-change: scroll-position; */

    &::-webkit-scrollbar {
      display: none!important;
      width: 0!important;
      height: 0!important;
      background-color: transparent;
     }

    &::-webkit-scrollbar-thumb {
      background-color: transparent; /* つまみの色を透明に */
      border-radius: 0;              /* つまみの角丸も消す (念のため) */
    }
    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-color: transparent transparent;
  }

  .landingPage__inner::-webkit-scrollbar {
    display: none;
  }

  .hidden-mobile{
    display: block;
  }
  
  .hidden-desktop{
    display: none;
  }

}


@media screen and (max-width: 767px) {
  html {
    scroll-padding-top: 60px;
  }

  #dialogue-sec,
  #product-sec {
    scroll-margin-top: 60px;
  }

  .hidden-mobile{
    display: none;
  }

  .hidden-desktop{
    display: block;
  }

}

/* ======= text ======= */

.font-mix{
  font-family: var(--font-yu), var(--font-helvetica-neue);
  font-size: calc(22 * var(--formula));
  line-height: 2.02272727273;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.12em;
  color: var(--color-black);
}

.font-commons{
  font-family: var(--font-commons);
  color: var(--color-white);
  line-height: 1.2;
  text-align: center;
  font-weight: 500;
  /* line-height: 0.06551724138; */
}

.font-helvetica{
  font-family: var(--font-helvetica-neue);
  color: var(--color-white);
  line-height: 1;
  font-weight: 400;
  /* line-height: 0.06551724138; */
}


/* ======= section ======= */
.section-top{
  position: relative;
}

.section-top_ttl{
  position: absolute;
  bottom: calc(56 * var(--formula));
  left: calc(45 * var(--formula));
  font-size: calc(32 * var(--formula));
  text-align: left;
}

/* =======================================
    mv-sec
======================================= */
.mv-sec{
  display: flex;
  position: relative;
  justify-content: center;
  z-index: 1;
  margin-bottom: calc(130 * var(--formula));
}

.ttl__cont{
  position: absolute;
  top: calc(207.8 * var(--formula));
  z-index: 10;
  width: calc(392.52 * var(--formula));
}

.arrow_img{
  position: absolute;
  bottom: calc(60.2 * var(--formula));
  width: calc(81.5 * var(--formula));
  height: calc(81.5 * var(--formula));

  -webkit-animation-name: bouncing;
  animation-name: bouncing;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-duration: .6s;
  animation-duration: .6s;
  -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  /* animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); */
}

@keyframes bouncing {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

/* =======================================
    fv-sec
======================================= */
.fv-sec{
  margin-bottom: calc(130 * var(--formula));
}

.fv-txt{
  text-align: center;
  line-height: 2.9318181818;
  letter-spacing: 0.12em;
}

/* =======================================
    accordion-item
======================================= */
.accordion {
  width: 100%;
  overflow: visible;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* @media (max-width: 767px) {
  .accordion {
    overflow: visible;
  }
} */

.accordion-item {
  position: relative;
  z-index: 1;
}

/* .accordion-item.section02:not(.active){
  position: relative;
} */

.accordion-item:not(.active) {
  position: static;
  z-index: 1;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-item.active{
  position: relative;
  z-index: 40;
  /* height: 100vh; */
}

.accordion-item.active .accordion-header{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000; /* コンテンツより上に */
}

.accordion-header {
  /* position: sticky; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  z-index: 50;
  cursor: pointer;
  height: calc(93 * var(--formula));
  /* top: 0; */
  padding: calc(32 * var(--formula)) calc(46 * var(--formula));

  /* activeに関わらず、開いている間は常にstickyを維持させるための設定 */
  position: -webkit-sticky;
}

.section01 .accordion-header{
  background-color: var(--color-gray);
}

.section02 .accordion-header{
  background-color: var(--color-blue);
}

.accordion-header_ttl{
  font-size: calc(32 * var(--formula));
  line-height: 1;
}

.accordion-header_btn {
  position: relative;
  width: calc(39.2522 * var(--formula));
  height: calc(39.2522 * var(--formula));
}

.accordion-header_btn span{
  position: absolute;
  display: block;
}

.accordion-header_btn .h-line {
  display: none;
  /* height: 1px; */
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  fill: #1a1a1a;
}

.accordion-header_btn .h-line svg{
  height: 3px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  fill: #1a1a1a;
}

.accordion-header_btn .v-line {
  display: block;
  fill: #1a1a1a;
  /* top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: calc(39.2522 * var(--formula));
  background: var(--color-accordion-black); */
}

.accordion-item.active .accordion-header_btn .v-line {
  display: none;
}

.accordion-item.active .accordion-header_btn .h-line {
  display: block;
}

.accordion-header_ttl {
  color: var(--color-accordion-black);
}

/* コンテンツ領域 */
.accordion-content {
  max-height: 0;
  overflow: clip;
  background-color: var(--color-white);
  /* transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); */
}

 .active .accordion-content {
  max-height: none; /* 固定計算のために制限解除。スクロールはinnerが担う */
  overflow: visible;
  /* height: 100% */
  /* max-height: 2000px; */
}

.accordion-item:not(.active) .accordion-content{
  display: none;
}

/* アクティブ時の高さ制限：内部スクロールを有効にする */
.accordion-item.active .accordion-content {
  position: relative;
  top: 0;
  /* top: calc(93 * var(--formula)); */
  /* max-height: calc(100vh - calc(93 * var(--formula))); */
  /* max-height: 85.5vh; */
  /* overflow-y: auto; */
}

/* @media (min-width: 768px) {
  .accordion-item.active .accordion-content {
    max-height: calc(calc(717 * var(--formula-pc)) - calc(93 * var(--formula)));
  }
} */
/* スクロールバーのカスタマイズ */
.accordion-content::-webkit-scrollbar {
  display: none;
}
.accordion-content::-webkit-scrollbar-track {
  display: none;
}
.accordion-content::-webkit-scrollbar-thumb {
  display: none;
}

.accordion-content::-webkit-scrollbar {
    display: none;
}


/* =======================================
    dialogue-sec
======================================= */
/* .section01{
  overflow-x: clip;
} */

.dialogue-sec{
  position: sticky;
  height: calc(9713 * var(--formula));
  top: calc(-9100 * var(--formula));
  z-index: 1;
}

.dialogue-txt__wrapper{
  width: calc(660 * var(--formula));
  margin: calc(140 * var(--formula)) auto;
}

.dialogue-txt{
  letter-spacing: 0.08em;
  text-align: justify;
  padding-bottom: calc(65 * var(--formula));
}

.dialogue-txt:last-of-type{
  padding-bottom: 0;
}

.dec{
  position: relative;
  display: inline-block;
  transform: scaleX(3);
  letter-spacing: calc(21 * var(--formula));
  left: calc(32 * var(--formula));
}

.dialogue-txt__wrapper.--01 .dialogue-txt.--01{
  padding-bottom: calc(57 * var(--formula));
}

.dialogue-txt__wrapper.--01 .dialogue-txt.--02{
  padding-bottom: calc(75 * var(--formula));
}

.dialogue-txt__wrapper.--01 .dialogue-txt.--03{
  padding-bottom: calc(48 * var(--formula));
}

.dialogue-txt__wrapper.--02 .dialogue-txt.--01{
  padding-bottom: calc(48 * var(--formula));
}

.dialogue-txt__wrapper.--02 .dialogue-txt.--02 {
  letter-spacing: 0.065em;
}

.dialogue-txt__wrapper.--03 .dialogue-txt.--01{
  padding-bottom: calc(44 * var(--formula));
}

.dialogue-txt__wrapper.--04 .dialogue-txt.--01{
  padding-bottom: calc(45 * var(--formula));
}

.dialogue-txt__wrapper.--04 .dialogue-txt.--02{
  padding-bottom: calc(47 * var(--formula));
}

.dialogue-txt__wrapper.--04{
  margin: calc(140 * var(--formula)) auto calc(145 * var(--formula));
}

.dialogue-txt__wrapper.--05{
  margin: 0 auto calc(130 * var(--formula));
}


.dialogue-txt__wrapper.--05{
  margin-bottom: calc(100 * var(--formula));
}

.dialogue-txt__wrapper.--05 .dialogue-ttl{
  font-size: calc(18 * var(--formula));
  line-height: 1;
  letter-spacing: 0.135em;
  border-bottom: 1px solid var(--color-accordion-black);
  transform: translateX(calc(-8 * var(--formula)));
  padding-bottom: calc(23 * var(--formula));
  margin-bottom: calc(27 * var(--formula));
}

.dialogue-txt__wrapper.--05 .dialogue-txt{
  font-size: calc(17 * var(--formula));
  letter-spacing: 0.05em;
}

/* =======================================
    product-sec
======================================= */

.section02 .accordion-content{
  /* position: relative;
  z-index: 10; */
  /* width: 100%; */
  /* height: calc(12448 * var(--formula)); */
  background-color: var(--color-blue);
}

.section02-img01__wrapper{
  width: calc(570* var(--formula));
  margin-right: auto;
  margin-left: auto;
  padding: calc(150 * var(--formula)) 0 calc(152 * var(--formula));
}

.section02-img01_txt{
  font-size: calc(22 * var(--formula));
  color: var(--color-accordion-black);
  text-align: left;
  word-spacing: calc(1 * var(--formula));
  padding-top: calc(13 * var(--formula));
}

.numbr{
  font-size: calc(30 * var(--formula));
  color: var(--color-accordion-black);
  text-align: left;
  margin: 0 0 calc(28 * var(--formula)) calc(45 * var(--formula));
}

.sticky-bg{
  position: sticky;
  position: -webkit-sticky;
  top: calc(93 * var(--formula));
  width: 100%;
  z-index: 1;
}

.sticky-img{
  position: sticky;
  position: -webkit-sticky;
  top: calc(77.5 * var(--formula));
  width: calc(585 * var(--formula));
  z-index: 10;
  padding-bottom: calc(77.5 * var(--formula));
  margin: 0 auto;
}

.credit-img__wrapper{
  position: relative;
  z-index: 1;
}

.credit-img__wrapper a{
  width: 100%;
  height: auto;
}

.credit-img__wrapper .credit-list{
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: calc(40* var(--formula));
  left: calc(46* var(--formula));
  z-index: 100;
  row-gap: calc(11 * var(--formula));
  pointer-events: none;
}

.credit-list a{
  display: inline;
  font-size: calc(21 * var(--formula));
  word-spacing: calc(1 * var(--formula));
  letter-spacing: 0.025em;
  pointer-events: all;
}

.img-flex__wrapper{
  display: flex;
  justify-content: space-between;
  padding-bottom: calc(220 * var(--formula));
}

.img-flex{
  width: calc(370 * var(--formula));
}

.item-slider{
  position: relative;
  width: calc(585 * var(--formula));
  margin: 0 auto;
  padding-bottom: calc(202 * var(--formula));
}

.item-slider .js-slide{
  width: calc(585 * var(--formula));
}

.item-slider .credit-list{
  margin-top: calc(20 * var(--formula));
}

.item-slider .credit-list a{
  color: var(--color-accordion-black);
  letter-spacing: -0.012em;
}

.item-slider .slick-dots{
  display: none !important;
}

/* .item.--01 */
.item.--01 {
  padding-bottom: calc(158 * var(--formula));
}

/* .item.--02 */
.item.--02{
  padding-bottom: calc(254 * var(--formula));
}

/* .item.--03 */
.item.--03{
  padding-bottom: calc(150 * var(--formula));
}

/* .item.--04 */
.item.--04{
  padding-bottom: calc(56 * var(--formula));
}

/* sticky-last__wrapper */
.sticky-last__wrapper{
  position: sticky;
  top: calc(149 * var(--formula));
  height: calc(435 * var(--formula));
}


.cai{
  width: calc(196.95 * var(--formula));
  margin-left: calc(44 * var(--formula));
  padding-bottom: calc(52.6 * var(--formula));
}

.staff-list{
  width: 100%;
  background: var(--color-gray);
  padding-left: calc(45.4 * var(--formula));
  padding-top: calc(55.6 * var(--formula));
  padding-bottom: calc(52.5 * var(--formula));
}

.staff-list_img{
  width: calc(461.85 * var(--formula));
}

/* profile-sec */
.profile-sec{
  position: relative;
  z-index: 100;
  width: 100%;
  background-color: var(--color-white);
  padding-top: calc(190 * var(--formula));
  padding-bottom: calc(155 * var(--formula));
}

.section02 .profile-sec{
  z-index: 1000;
}

.nuri_img{
  width: calc(585 * var(--formula));
  margin: 0 auto calc(55 * var(--formula));
}

.profile-sec__inner{
  width: calc(588.4 * var(--formula));
  margin: 0 auto;
}

.profile_name{
  font-size: calc(32 * var(--formula));
  text-align: center;
  line-height: 1;
  color: var(--color-accordion-black);
  padding-bottom: calc(31 * var(--formula));
}

.profile_txt{
  font-family: var(--font-yu);
  line-height: 1.9166666667;
  letter-spacing: 0.062em;
  font-size: calc(18 * var(--formula));
  color: var(--color-black);
  padding-bottom: calc(120 * var(--formula));
}

.line-height_adjust{
  display: inline-block;
  margin: calc(-13 * var(--formula)) 0;
}

.btt-btn{
  width: 100%;
  margin-bottom: calc(37 * var(--formula));
}

.btt-btn a{
  width: 100%;
}

.logo-bk{
  width: calc(248.07 * var(--formula));
  margin: 0 auto;
}

/* =======================================
    additional-p-sec.profile-sec
======================================= */
.section02.active + .additional-p-sec.profile-sec {
  display: none;
}

/* =======================================
    animation
======================================= */

.delay05 {
  transition-delay: 0.5s;
}

/* ------------------- .js-show */
.js-show {
  -webkit-transition: opacity 0.5s ease, transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

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

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

/* ------------------- .js-show.fadeUp */
.js-show.fadeUp {
  opacity: 0;
  transform: translate(0px, 100px);

  /* -webkit-backface-visibility: clip;
  backface-visibility: clip; */
  pointer-events: none;
}

.js-show.fadeUp.inview {
  opacity: 1;
  transform: translate(0px, 0px);
  pointer-events: auto;
}

/* =======================================
    animationに伴う調整
======================================= */
/* ------------------- slick pagination */
.js-slide{
  will-change: opacity;
}

.img__cont.js-slide{
  position: relative;
}

.slick-dots li{
  margin: 0;
}

/* Slick本来の計算を邪魔しないよう、!importantでの幅固定を外す */
.slick-track {
  display: flex;
}

.slick-slide img {
  width: 100%;       /* 親要素の幅いっぱいに広げる */
  height: auto;      /* 比率を維持 */
  display: block;    /* 下部の隙間を消す */
}

/* スライダー全体の最大幅を制限（画像がはみ出るのを防ぐ） */
.js-slide {
  max-width: calc(750 * var(--formula));  /* 画像の本来の幅に合わせる */
  margin: 0 auto;    /* 中央寄せ（必要であれば） */
  /* overflow: clip; */
}
/* .js-slide{
   width: 100%;
  max-width: none;
} */

/* .slick-list{
  overflow: clip;
} */

.slick-dots li button{
  width: calc(10 * var(--formula));
  height: calc(10 * var(--formula));
  border-radius: 50%;
  border: none;
  font-size: initial;
  color: initial;
  background: var(--color-white);
  color: var(--color-white);
  font-size: 0;
  line-height: 0;
  color: transparent;
  padding: 0;
}

.slick-dots li button:before{
  content: none;
}

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

ul.slick-dots{
  display: flex !important;
  position: absolute;
  z-index: 1000;
  column-gap: calc(7 * var(--formula));
  right: calc(46 * var(--formula));
  bottom: calc(43 * var(--formula));
  margin: 0px;
}


/* 
@media (min-width: 768px) {
  .slick-dots li button {
    width: 8px;
    height: 8px;
  }


  ul.slick-dots{
    column-gap: calc(2 * var(--formula));
    right: calc(24 * var(--formula));
    bottom: calc(22 * var(--formula));
  }

  .p-sec ul.slick-dots{
    right: calc(24 * var(--formula));
    bottom: calc(21 * var(--formula));
  }
} */

/* ------------------- js-slider02 */
.js-slider02 {
  /* display: flex!important; */
  white-space: nowrap;
}

.product-slide {
  flex-shrink: 0;
  width: calc(370 * var(--formula))!important;
  margin-right: calc(10 * var(--formula))!important;
}

.js-slider02.slick-initialized {
  display: block;
}

.horizontal-scroll-wrapper .slick-list {
  height: calc(490 * var(--formula));
  margin-right: calc(-10 * var(--formula))!important;
}