@charset "UTF-8";
/* ▼ -----------可変設定---------- ▼ */
.issue251 {
  /*デザインの値*/
  --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デザインの可変割合の計算式*/


    /* 共通
  ------------------------------------------ */
  --font-helvetica: "helvetica-neue-lt-pro", sans-serif;
  --font-benton: "benton-modern-display", serif;

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

  --color-lightgreen: #eff9d7;
  --color-gray: #353535;
  --color-white: #fff;

  font-style: normal;
  color: var(--color-gray);
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}

/* Helvetica Neue LT Pro 45 Light
font-family: "helvetica-neue-lt-pro", sans-serif;

Benton Modern D Light
font-family: "benton-modern-display", serif;

font-weight: 300; */

/* PC画面幅 2100px以上 固定 */
@media (min-width: 2101px) {
  .issue251 {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width));
  }
}
/* PC画面幅 768～2100px 可変 */
@media (min-width: 768px) and (max-width: 2100px) {
  .issue251 {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}
/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .issue251 {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}
/* ▲ -----------可変設定---------- ▲ */
@media screen and (min-width: 768px) {
  .header-logo {
    display: none !important;
  }
}

.footer {
  padding-top: 0;
}

.footer .footer-nav {
  margin-left: -1.6vw;
  width: 100%;
  padding-top: 6.6666666667vw;
}

.main-area {
  padding-top: 0;
}

.issue251 img {
  width: 100%;
  height: auto;
}

.issue251 a{
  display: inline-block;
}

.issue251 a,
.issue251 p{
  color: var(--color-gray);
}

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


@media screen and (max-width: 767px) {
  #breadcrumb {
    width: auto !important;
  }
}

@media screen and (min-width: 768px) {
  #Contents {
    padding-top: 5rem;
  }
}

#Wrap {
  padding: 0;
  margin: 0;
}


/* ===================================
    PC
=================================== */
@media screen and (min-width: 768px) {
  .hidden-mobile{
    display: block;
  }

  .hidden-desktop{
    display: none;
  }

  .issue251 {
    display: flex;
  }

  .issue251 .pc-left,
  .issue251 .center-content {
    display: block;
    position: sticky;
    top: 0;
    width: 50vw;
    height: 100%;
    z-index: 2;
  }

  .issue251 .pc-left a{
    width: 100%;
  }

  .issue251 .content__mv,
  .issue251 .content__content:not(.content__content.js-bg-green),
  .issue251 .content__content .content__content__inner{
    width: calc(675 * var(--formula_pc));
    overflow-x: clip;
    margin: 0 auto;
  }

  .issue251 .pc-left__mv .mv-img img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center top;
  }

  .issue251 .pc-left .content__mv--top-text {
    width: calc(489.1646 * var(--formula_pc));
  }

  .issue251 .content__content.--01{
    padding-top: calc(120 * var(--formula));
  }

  .issue251 .content__content.--07{
    width: calc(675 * var(--formula_pc));
    margin: 0 auto;
  }
}

/* ===================================
    SP
=================================== */
@media screen and (max-width: 767px) {
  .hidden-desktop{
    display: block;
  }

  .hidden-mobile{
    display: none;
  }
}

/* ===================================
    center-content内 共通
=================================== */
.issue251 .content__content{
  padding: calc(160 * var(--formula)) 0 0;
}

.issue251 .center-content img {
  width: 100%;
  height: auto;
}

.issue251 .credit-list{
  display: flex;
  flex-wrap: wrap;
  row-gap: calc(10 * var(--formula));
  margin-top: calc(40 * var(--formula));
  padding-bottom: calc(160 * var(--formula));
}

.issue251 .credit-list a,
.issue251 .credit-list span,
.issue251 .credit-list li{
  font-family: var(--font-helvetica);
  font-weight: var(--fw-light);
  font-size: calc(20 * var(--formula));
  line-height: 1;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
  color: var(--color-gray);
  text-align: center;
}

.issue251 .content--img_box{
  margin-bottom: calc(80 * var(--formula));
}

/* __________ mv */
.issue251 .content__mv--main-img {
  position: relative;
}

.issue251 .content__mv--top-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 767px) {
  .issue251 .content__mv{
    width: calc(730 * var(--formula));
    margin: calc(15 * var(--formula)) auto 0;
  }

  .issue251 .content__mv--top-text {
    width: calc(407.6329 * var(--formula));
  }
}


/* __________ content__content --01 */
@media screen and (max-width: 767px) {
  .issue251 .content__content.--01{
    padding-top: calc(120 * var(--formula));
  }
}

.issue251 .content__content.--01 .content--img_box{
  display: grid;
  grid-template-columns: calc(150 * var(--formula)) calc(410 * var(--formula)) auto;
  grid-template-rows: calc(650 * var(--formula)) calc(50 * var(--formula)) auto;
}

.issue251 .content__content.--01 .item-img01{
  position: relative;
  z-index: 2;
  width: calc(560 * var(--formula));
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.issue251 .content__content.--01 .item-img02{
  width: calc(600 * var(--formula));
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

.issue251 .content__content.--01 .content--img-slider{
  width: calc(660 * var(--formula));
  margin: 0 auto;
}

.issue251 .content__content.--01 .credit-list{
  width: calc(580 * var(--formula));
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
}

.issue251 .content__content.--01 .content--item_box{
  width: calc(440 * var(--formula));
  margin: 0 auto 0 calc(100 * var(--formula));
}

.issue251 .content__content.--01 .content--item_box .credit-list{
  justify-content: left;
}

/* __________ content__content --02 */
.issue251 .content__content.--02 .content--img-slider{
  margin-bottom: calc(80 * var(--formula));
}

.issue251 .content__content.--02 .content--img-slider .item-img{
  width: calc(560 * var(--formula))!important;
  margin-right: calc(30 * var(--formula))!important;
}

.issue251 .content__content.--02 .content--img_box{
  width: calc(500 * var(--formula));
  margin-right: 0;
  margin-left: calc(50 * var(--formula));
}

.issue251 .content__content.--02 .content--item_box{
  width: calc(600 * var(--formula));
  margin: 0 0 0 auto;
}

.issue251 .content__content.--03 .content--item_box .credit-list{
  width: calc(550 * var(--formula));
}

/* __________ content__content --03 */
.issue251 .content__content.--03 .content--img_box.--02{
  width: calc(540 * var(--formula));
  margin-top: calc(-50 * var(--formula));
  margin-left: calc(50 * var(--formula));
  margin-right: auto;
}

.issue251 .content__content.--03 .item-img02{
  margin-bottom: calc(30 * var(--formula));
}

.issue251 .content__content.--03 .content--item_box.--01{
  width: calc(460 * var(--formula));
  margin-left: auto;
  margin-right: calc(50 * var(--formula));
}

.issue251 .content__content.--03 .content--item_box.--02{
  width: calc(500 * var(--formula));
  margin-left: calc(100 * var(--formula));
  margin-right: auto;
}

.issue251 .content__content.--03 .content--item_box.--01 .credit-list{
  width: calc(350 * var(--formula));
}

/* __________ content__content --04 */
.issue251 .content__content.--04 .content--img-slider{
  width: calc(660 * var(--formula));
  margin: 0 auto calc(80 * var(--formula));
}

.issue251 .content__content.--04 .item-img01{
  width: calc(460 * var(--formula));
  margin-right: 0;
  margin-left: auto;
}

.issue251 .content__content.--04 .content--item_box{
  width: calc(600 * var(--formula));
  margin-right: auto;
  margin-left: 0;
}

.issue251 .content__content.--04 .content--item_box .credit-list{
  width: calc(550 * var(--formula));
  margin-right: 0;
  margin-left: auto;
}

/* __________ content__content --05 */
.issue251 .content__content.--05 .content--img-slider{
  margin-bottom: calc(80 * var(--formula));
}

.issue251 .content__content.--05 .content--img-slider .item-img{
  width: calc(500 * var(--formula))!important;
  margin-right: calc(30 * var(--formula))!important;
}

.issue251 .content__content.--05 .credit-list{
  justify-content: center;
}

.issue251 .content__content.--05 .content--item_box{
  width: calc(520 * var(--formula));
  margin: 0 auto;
}

/* __________ content__content --06 */
.issue251 .content__content.--06 .content--img-slider{
  width: calc(600 * var(--formula));
  margin: 0 0 calc(80* var(--formula)) auto;
}

.issue251 .content__content.--06 .content--item_box.--02{
  margin: 0 auto 0 calc(50 * var(--formula));
}

.issue251 .content__content.--06 .content--item_box.--02 .item-img{
  width: calc(520 * var(--formula));
}

/* __________ content__content --07 */
.issue251 .content__content.--07{
  padding-top: 0;
}

.issue251 .content__content.--07 .content--img_box.--01{
  width: calc(640 * var(--formula));
  margin: 0 auto 0 0;
}

.issue251 .content__content.--07 .content--img_box{
  width: calc(440 * var(--formula));
  margin: calc(-40 * var(--formula)) calc(50 * var(--formula)) 0 auto;
}

.issue251 .content__content.--07 .item-img02{
  margin-bottom: calc(30 * var(--formula));
}

/* __________ content__content --08 */
.issue251 .content__content.--08 .item-img02{
  width: calc(560 * var(--formula));
}

.issue251 .content__content.--08 .item-img03{
  width: calc(480 * var(--formula));
  margin-right: 0;
  margin-left: auto;
}

.issue251 .content__content.--08 .content--item_box{
  width: calc(640 * var(--formula));
  margin: 0 auto;
}

.issue251 .content__content.--08 .credit-list{
  width: calc(500 * var(--formula));
  justify-content: center;
  padding-bottom: 0;
  margin-right: auto;
  margin-left: auto;
}

/* __________ check all items */
.issue251 .content__footer--all-btn {
  display: flex;
  justify-content: center;
  margin: calc(195 * var(--formula)) auto calc(200 * var(--formula));
}

.issue251 .content__footer--all-btn a {
  text-align: center;
  font-family: var(--font-benton);
  font-size: calc(31 * var(--formula));
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--color-gray);
}

.issue251 .content__footer--all-btn.js-display-anime {
  opacity: 1!important;
}

.issue251 .content__footer--all-btn.js-display-anime a::after {
  content: "";
  display: block;
  height: 1px;
  width: 0;
  margin: calc(23 * var(--formula)) auto 0;
  background-color: var(--color-gray);
}

.issue251 .content__footer--all-btn.js-display-anime.is-active a::after {
  width: calc(160 * var(--formula));
  transition: 1.5s;
}

/* ===================================
    スライダー ページネーション調整
=================================== */
.issue251 .splide__pagination {
  justify-content: left;
  position: absolute;
  bottom: calc(20 * var(--formula));
  right: 0;
}

.issue251 .splide__pagination li {
  margin-right: calc(20 * var(--formula));
}

.issue251 .splide__pagination li button {
  width: calc(10 * var(--formula));
  height: calc(10 * var(--formula));
  border: 1px solid var(--color-white);
  border-radius: 50%;
  padding: 0;
  background: none;
}

.issue251 .splide__pagination li button.is-active {
  background: var(--color-white);
}

/* ===================================
    animation
=================================== */
/* __________ bg change */
.js-bg-cl {
  transition: 0.5s;
}

.js-bg-cl.change-cl-green {
  background-color: var(--color-lightgreen);
}

/* bg change */
.js-mv-stagger-child,
.js-display-anime,
.js-display-anime02 {
  opacity: 0;
}

/* bg change */
.js-all-item-btn a::after {
  content: "";
  display: block;
  height: 1px;
  width: 0;
  margin: calc(23 * var(--formula)) auto 0;
  background-color: var(--color-gray);
}
.js-all-item-btn.is-active a::after {
  width: calc(160 * var(--formula));
  transition: 1.5s;
}

.js-display-anime {
  opacity: 0;
  transition: opacity 1.0s ease; /* duration: 1 に相当 */
  will-change: opacity;          /* パフォーマンス最適化 */
}

/* クラスがついた時の状態 */
.js-display-anime.is-active {
  opacity: 1;
}

.anim-delay{
  transition-delay: 0.3s;
}