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

  --color-black: #000;
  --color-white: #fff;
  --color-red: #e71f19;
  --color-blue: #191c40;

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

.issue246 a{
  display: inline-block;
}

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

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

/* ===================================
    loading_view
=================================== */
.issue246 .loading_view .logo_img {
  width: calc(300 * var(--formula));
}


/* ===================================
    mv
=================================== */
.issue246 .mv a {
  display: block;
  position: relative;
  z-index: 0;
}
.issue246 .mv_txt {
  position: absolute;
  z-index: 1;
}

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

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

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

  .issue246 .mv_txt {
    width: calc(357.2715 * var(--formula_pc));
    bottom: calc(calc(45 * var(--formula_pc)) + 5rem);
    left: calc(70 * var(--formula_pc));
  }

}

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

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

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

  .issue246 .mv_txt {
    width: calc(357.2715 * var(--formula));
    bottom: calc(70 * var(--formula));
    left: calc(50 * var(--formula));
  }
}

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

.issue246 .lp-cont {
  position: relative;
  z-index: 1;
  width: calc(750 * var(--variable) * var(--ratio));
  margin: 0 auto;
}

.issue246 .fv_txt{
  display: flex;
  flex-direction: column;
  row-gap: calc(40 * var(--formula));
  width: calc(660 * var(--formula));
  margin: calc(130 * var(--formula)) auto 0;
}

.issue246 .fv_txt span{
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  font-size: calc(22 * var(--formula));
  font-family: var(--font-noto);
  font-weight: var(--fw-regular);
  letter-spacing: 0.16em;
  text-align: center;
  line-height: 2;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .issue246 .lp-cont {
    width: calc(680 * var(--variable) * var(--ratio));
  }

  .issue246 .bg-blue{
    width: 100%;
  }
}

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

/* ===================================
    item内 共通
=================================== */
.issue246 .item{
  position: relative;
  z-index: 1;
  padding: calc(160 * var(--formula)) 0 0;
}

.issue246 .bg-blue{
  position: relative;
  z-index: 1;
}

.issue246 .bg-white .item::before,
.issue246 .bg-blue::before,
.issue246 .bg-blue .item11::before{
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  z-index: -1;
  bottom: -2px;
  left: 0;
}

.issue246 .bg-blue::before{
  z-index: 1;
}

.issue246 .bg-white .item,
.issue246 .bg-white .item::before{
  background-color: #fff;
}

.issue246 .bg-blue,
.issue246 .bg-blue .lp-cont,
/* .issue246 .bg-blue .item, */
.issue246 .bg-blue::before,
.issue246 .bg-blue .item11::before{
  background-color: var(--color-blue);
}

.issue246 .img_box{
  position: relative;
  z-index: 100;
  cursor: pointer;
  touch-action: manipulation;
}

.issue246 .open-modal-btn{
  position: absolute;
  width: calc(40 * var(--formula));
  height: calc(40 * var(--formula));
  fill: var(--color-white);
  bottom: calc(20 * var(--formula));
  right: calc(20 * var(--formula));
  z-index: 10000;
  background: transparent;
  border: none;
  padding: 0;
  pointer-events: all;
}

.issue246 .sticky_cont{
  position: sticky;
  top: 0;
}

/* -------------.pattern01 */
.issue246 .pattern01{
  width: calc(680 * var(--formula));
  margin: 0 auto;
}

.issue246 .pattern01 .img_box.--01{
  margin-bottom: calc(20 * var(--formula));
}

.issue246 .pattern01 .img_flex{
  display: flex;
  justify-content: space-between;
}

.issue246 .pattern01 .img_flex .img_box{
  width: calc(330 * var(--formula));
}

/* -------------.pattern02 */
.issue246 .pattern02{
  width: 100%;
}

/* -------------.pattern03 */
.issue246 .pattern03{
  width: calc(460 * var(--formula));
  margin: 0 auto;
}

.issue246 .pattern03 .img_box.--01{
  margin-bottom: calc(20 * var(--formula));
}

/* -------------.pattern04 */
.issue246 .pattern04 .img_box.--01{
  width: calc(600 * var(--formula));
  margin: 0 auto calc(80 * var(--formula));
}

.issue246 .pattern04 .slideroll_img_wrapper{
  width: 100%;
  margin-bottom: calc(80 * var(--formula));
}

.issue246 .pattern04 .slide_img{
  width: calc(500 * var(--formula));
  margin-right: calc(20 * var(--formula));
}

/* .issue246 .pattern04 .slide_img img{
  width: calc(500 * var(--formula))!important; 
} */
/* .issue246 .pattern04 .slick-list{
  padding-right: calc(205 * (67.5rem / 750)) !important;
} */

.issue246 .pattern04 .img_box.--02{
  width: calc(600 * var(--formula));
  margin: 0 auto;
}

/* -------------.pattern04 */
.issue246 .pattern05{
  width: calc(680 * var(--formula));
  margin: 0 auto;
}

.issue246 .pattern05 .img_grid{
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: space-between;
  gap: calc(20 * var(--formula));
  margin-bottom: calc(80 * var(--formula));
}

.issue246 .pattern05 .img_grid .img_box{
  width: calc(330 * var(--formula));
}

/* ===================================
    item01
=================================== */
.issue246 .item01{
  padding: calc(150 * var(--formula)) 0 0;
}

/* ===================================
    item08-2
=================================== */
.issue246 .item08-2{
  padding: calc(80 * var(--formula)) 0 calc(160 * var(--formula));
}

.issue246 .item08-2::before{
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  z-index: -1;
  bottom: -2px;
  left: 0;
  background-color: var(--color-white);
}

@media (min-width: 768px) {
  .issue246 .item08-2{
    width: calc(750 * var(--formula));
    margin: 0 auto;
  }
}

/* ===================================
    item09
=================================== */
.issue246 .item09{
  width: calc(500 * var(--formula));
  margin: 0 auto;
}

/* ===================================
    item11
=================================== */
.issue246 .item11{
  position: relative;
  z-index: 10;
}

.issue246 .item11 .slideroll_img_wrapper{
  border-bottom: 2px solid var(--color-blue);
}

.issue246 .item11 .slide_img{
  width: calc(430 * var(--formula));
}


/* ===================================
    item12
=================================== */
.issue246 .item12{
  width: calc(460 * var(--formula));
  margin: 0 auto;
}

/* ===================================
    footer
=================================== */

.issue246 .logo_white{
  width: calc(224.8095 * var(--formula));
  margin: calc(160 * var(--formula)) auto 0;
}

/* -------------..novelty_area */
.issue246 .novelty_area{
  width: calc(640 * var(--formula));
  background-color: var(--color-white);
  padding: calc(98 * var(--formula)) 0;
  margin: calc(200 * var(--formula)) auto 0;
}

.issue246 .novelty_ttl{
  font-family: var(--font-times);
  font-weight: var(--fw-regular);
  color: var(--color-red);
  font-size: calc(52 * var(--formula));
  line-height: 1;
  text-align: center;
}

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

.issue246 .novelty_txt.--2{
  font-size: calc(20 * var(--formula));
}

.issue246 .novely_img{
  width: calc(540* var(--formula));
  margin: calc(77 * var(--formula)) auto;
}

.issue246 .novely_link{
  display: inline-block;
  font-family: var(--font-noto);
  font-weight: var(--fw-regular);
  color: var(--color-black);
  font-size: calc(22 * var(--formula));
  letter-spacing: 0.16em;
  line-height: 1;
  text-align: center;
  border-bottom: 1px solid var(--color-black);
  padding-bottom: calc(20 * var(--formula));
}

/* -------------.all btn */
.issue246 .all {
  padding: calc(200 * var(--formula)) 0 calc(180 * var(--formula));
  text-align: center;
}

.issue246 .all-link {
  position: relative;
  display: inline-block;
  font-family:var(--font-times);
  font-weight: var(--fw-regular);
  font-optical-sizing: auto;
  font-size: calc(31 * var(--formula));
  letter-spacing: 0em;
  line-height: 1;
  word-spacing: calc(-1 * var(--formula));
  color:  var(--color-white);
  padding-bottom: calc(26 * var(--formula));
}

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

/* ===================================
    modal内 共通
=================================== */
#jsmodal {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(25, 28, 64, 0.9);
  /* transition: opacity 0.3s ease, visibility 0.1s ease; */
  opacity: 0;
  visibility: hidden;
}

@media (min-width: 768px) {
  #jsmodal {
    width: 50%;
    top: 5rem;
    margin: 0 0 0 auto;
    z-index: 1;
  }
}

#jsmodal a{
  pointer-events: none;
}

#jsmodal.active a{
  pointer-events: all;
}

#jsmodal.active {
  opacity: 1;
  visibility: visible;
}

.modal-scroll-container {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: auto;
  padding: calc(140 * var(--formula)) 0;
}

.modal_inner {
  width: calc(600 * var(--formula));
  margin: 0 auto;
}

.item-modal:not(.item01-modal){
  padding-top: calc(160 * var(--formula));
}

.issue246 .close-modal-btn {
  position: absolute;
  top: calc(40 * var(--formula));
  right: calc(40 * var(--formula));
  width: calc(61.4141 * var(--formula));
  height: calc(61.4141 * var(--formula));
  z-index: 110;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.close-modal-btn svg {
  fill: white;
}

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

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

/* ------------------ slickのカスタマイズ */
.issue246 .slick-slider-container{
  position: relative;
  width: calc(600 * var(--formula));
  height: calc(840 * var(--formula));
}

.issue246 .slick-dots{
  position: absolute;
  z-index: 10;
  bottom: calc(20 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

.issue246 .slick-dots li button {
  color: var(--color-white);
  width: calc(10 * var(--formula));
  height: calc(10 * var(--formula));
  font-size: 0;
  background-color: transparent;
  border: var(--color-white);
}

.issue246 .slick-dots li{
  border: var(--color-white) 1px solid;
  border-radius: 50%;
  width: calc(10 * var(--formula));
  height: calc(10 * var(--formula));
  margin: 0 calc(10 * var(--formula));
}

.issue246 .slick-dots li.slick-active button {
  color: var(--color-white);
  background-color: var(--color-white);
}

.issue246 .slider-item img {
  margin: 0 auto;
}

/* ===================================
    item11-modal
=================================== */
.issue246 .item11-modal .credit__list{
  width: calc(350* var(--formula));
}

/* ===================================
    animation
=================================== */
/* .loading fromBottom */
.js-loading{
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.js-loading.hide-fv {
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}

/* .fadeIn fromBottom */
.modal__wrapper .modal_inner,
.js-fade.fromBottom{
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: 1.6s;
  transition: 1.6s;
}

.modal__wrapper.active .modal_inner,
.js-fade.fromBottom.is-active{
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

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

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

/* .fadeIn fromLeft */
.js-fade.fromLeft{
  opacity: 0;
  transform: translateX(-80px);
  transition: all 1s ease;
}

.js-fade.fromLeft.is-active{
  opacity: 1;
  transform: translateX(0);
}

/* .fadeIn fromRight */
.js-fade.fromRight{
  opacity: 0;
  transform: translateX(80px);
  transition: all 1s ease;
}

.js-fade.fromRight.is-active{
  opacity: 1;
  transform: translateX(0);
}


/* .delay */
.issue246 .animation_delay01{
  transition-delay: 0.3s;
}

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

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

/*================================
  slick
=================================*/

/* end slick */