@charset "UTF-8";

/* ==========================================

  月刊誌「Home Club」最新情報 - SP Styles

========================================== */
.l-contents { padding: 0; }

/* ==========================================
  Page Header
========================================== */
.page-header {
  height: auto;
  aspect-ratio: 750 / 448;
  margin: 0 0 calc(80 / 750 * 100%);
}
.page-header h2 { width: calc(395 / 750 * 100vw); }

/* ==========================================
  Contents
========================================== */
.intro {
  font-size: 4.8vw; /* 36px */
  line-height: 1.6;
  margin: 0 0 21.333333vw; /* 160px */
}

/* 特集
------------------------------------------ */
.lead { text-indent: 4.1666666%; }

.feature-unit {
  margin: 0;
  padding: 0 0 calc(145 / 750 * 100%);
  display: block;
}
.feature-unit .inner {
  width: 86.6666666%;
  margin: auto;
}
.feature-heading {
  flex-direction: column-reverse;
  margin: 0 0 60px;
}
.feature-heading > div {
  width: 100%;
  padding: 0 calc(60 / 750 * 100%);
}
.feature-heading h3 span {
  font-size: calc(30 / 750 * 100vw);
  margin: calc(50 / 750 * 100%) 0 calc(45 / 750 * 100%);
}
.feature-heading p {
  font-size: calc(60 / 750 * 100vw);
  line-height: 1.0;
}
.feature-heading p small { font-size: calc(24 / 60 * 1em); }
.feature-heading figure {
  width: 100%;
  margin: 0 0 calc(65 / 750 * 100%);
  padding: 0 calc(125 / 750 * 100%);
}
.feature-index h4 {
  font-size: calc(28 / 750 * 100vw);
  line-height: calc(40 / 28);
  margin: calc(85 / 750 * 100%) 0 calc(55 / 750 * 100%);
}
.feature-index p {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(48 / 24);
  text-align: left;
}

/* Swiper Slider */
.swiper-container {
  width: 100%;
  margin: calc(110 / 750 * 100%) auto 0;
}
.swiper-pagination { font-size: calc(24 / 750 * 100vw); }

/* Scrollbar */
.swiper-scrollbar { max-width: calc(400 / 750 * 100%); }
.swiper-scrollbar.swiper-scrollbar-horizontal { width: calc(400 / 750 * 100%); }

/* 関連カタログプレセント
------------------------------------------ */
.present-unit { padding: calc(120 / 750 * 100%) 0; }
.present-unit h3 {
  font-size: calc(30 / 750 * 100vw);
  line-height: calc(48 / 30);
}
.present-items {
  display: block;
  margin: 0;
}
.present { margin: 0 0 calc(90 / 750 * 100%); }
.present-summary { padding: 0 calc(80 / 750 * 100%); }

/* CheckBox */
.present-summary label { margin: 0 0 calc(20 / 750 * 100%); }
.present-summary label span {
  font-size: calc(28 / 750 * 100vw);
  line-height: calc(42 / 28);
}
.present-summary label span small { font-size: calc(22 / 28 * 1em); }
.present-summary p {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(33 / 24);
}

@media screen and (max-width:414px) {
  .present-summary label { padding: 0 0 0 25px; }
  .present-summary label span::before,
  .present-summary label input[type="checkbox"]:checked + span::after {
    transform: scale(0.9);
    transform-origin: 0 0;
  }
}
@media screen and (max-width:375px) {
  .present-summary label span::before,
  .present-summary label input[type="checkbox"]:checked + span::after {
    transform: scale(0.85);
  }
}

/* Tag */
.tag { margin: calc(25 / 750 * 100%) 0 0; }
.tag i {
  font-size: calc(20 / 750 * 100vw);
  padding: 4px 6px;
}

/* 応募ボタン */
.present-app-btn { margin: 0; }

/* バックナンバー
------------------------------------------ */
.backnumber-unit { padding: calc(130 / 750 * 100%) 0 calc(125 / 750 * 100%); }
.backnumber-unit .inner { width: 100%; }
.backnumber-unit h3 {
  font-size: calc(30 / 750 * 100vw);
  margin: 0 auto calc(105 / 750 * 100%);
}

/* ▼ Modified 202505 ▼ */
.backnumber-items > .inner {
  grid-template-columns: repeat(6, calc(590 / 750 * 100%));
  gap: 0;
  overflow-x: scroll;
  padding: 0 0 15px;
}
/* ▲ Modified 202505 ▲ */

.backnumber figure { transform: scale(1.0); }
.backnumber p {
  font-size: calc(28 / 750 * 100vw);
  line-height: calc(36 / 28);
  padding: 0 0 0 calc(50 / 750 * 100%);
  margin: calc(40 / 750 * 100%) 0 0;
}
.backnumber p small {
  font-size: calc(22 / 28 * 1em);
  margin: 0 0 calc(20 / 750 * 100%);
}

/* ▼ Add 202505 ▼ */
.backnumber-bg.bbg01 { height: 60%; }
.backnumber-bg.bbg02 { display: none; }
/* ▲ Add 202505 ▲ */