.c-cardGrid--3col .c-cardGrid__listWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 3.125%;
}
.c-cardGrid--3col .c-cardGrid__listItem {
  width: 31.25%;
}

@media (max-width: 1024px) {
  .c-cardGrid--3col .c-cardGrid__listWrap {
    flex-direction: column;
    gap: 44px;
  }
  .c-cardGrid--3col .c-cardGrid__listItem {
    width: 100%;
  }
}
.region--content,
.region > :where(:not([data-big-pipe-placeholder-id])) {
  margin-block-end: 0;
}

/* 2026-05-16: .p-feature__mv の上下 padding を半分に縮小 (80px → 40px)。
   PC でも SP でも余白が広すぎたため。 */
.p-feature__mv {
  padding: 40px 0 20px;
}
/* 2026-05-16 修正: 旧 `.p-feature__pickup:first-of-type` は親 section 内の
   最初の section (= .p-feature__mv) を見てしまい誤判定。`.p-feature__pickup` は
   常に :first-of-type にならず `:not(:first-of-type)` の 56px が誤適用されていた。
   1 件目は元 56px の半分 (28px)、それ以降 (隣接) は 56px のまま。 */
.p-feature__pickup {
  margin-top: 28px;
}
.p-feature__pickup + .p-feature__pickup,
.p-featurePickup:not(:first-of-type) {
  margin-top: 56px;
}
.p-feature__mv .c-mainTitle {
  text-align: center;
}
.p-featurePickup {
  display: flex;
  padding-bottom: 40px;
}
.p-featurePickup__thumb {
  width: 50%;
  position: relative;
}
.p-featurePickup__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* CMS 側で feature.image (media) の field_image_caption / field_credit
   に入力された場合、画像の左下に半透明黒の帯でキャプション表示する。 */
.p-featurePickup__thumbCaption {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #17171966;
  color: var(--Gray-50, #F6F6F6);
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.5;
}
.p-featurePickup__body {
  width: 50%;
  background: var(--accent-color-black);
  padding: 48px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}
.p-featurePickup__category {
  /* ID:467 カテゴリ名のテキストウェイトを R → M に。 */
  color: var(--accent-color-yellow);
  margin-bottom: 8px;
  font-family: "MFW-PIshiiGothicStdN-M", sans-serif;
  font-weight: 500;
}
.p-featurePickup__title {
  /* ID:471 タイトルのフォントサイズを上げ、Vol.（episodeVol）と Q数 を相対的に下げる。
     28px → 32px に拡大。 */
  font-size: 32px;
  line-height: 1.4;
  font-weight: 500;
  margin-bottom: 40px;
  color: #fff;
}
.p-featurePickup__actions {
  /* ID:465 「特集を読む」と Vol.1 の余白を減らす（24px → 16px）。 */
  display: flex;
  align-items: center;
  gap: 16px;
}
.p-featurePickup__cta {
  background: var(--accent-color-yellow);
  color: var(--accent-color-black);
  font-weight: 500;
}
.p-featurePickup__count {
  color: var(--text2-color);
}
.p-featurePickup__episode {
  display: block;
  padding-right: 124px;
  position: relative;
}
.p-featurePickup__episodeItem:not(:last-child) {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--feature-episode-rule-color, var(--text3-color));
}
.p-featurePickup__episodeItem:not(:first-child) {
  padding-top: 8px;
}
.p-featurePickup__episodeMeta {
  display: flex;
  color: var(--text4-color);
  font-size: 13px;
}
.p-featurePickup__episodeDate::before {
  content: "|";
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.p-featurePickup__episodeTitle {
  color: var(--text5-color);
  font-size: 13px;
  font-family: "MFW-PIshiiGothicStdN-M", sans-serif;
  font-weight: 500;
}
.p-featurePickup__episodeRight {
  position: absolute;
  top: 50%;
  right: 44px;
  transform: translateY(-50%);
}
.p-featurePickup__episode::after {
  content: "";
  display: block;
  width: 6px;
  height: 12px;
  background: url(../images/arrow.svg) no-repeat center/contain;
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
}
.p-featurePickup__episode:hover .p-featurePickup__episodeTitle {
  -webkit-text-decoration: underline 1px;
          text-decoration: underline 1px;
}
.p-feature__content {
  background: none;
  padding-bottom: 160px;
}
.p-feature-other__grid {
  /* ID:476 「他の特集」を4列で表示 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media screen and (max-width: 1024px) {
  .p-feature-other__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
@media screen and (max-width: 768px) {
  .p-feature-other__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media screen and (max-width: 480px) {
  .p-feature-other__grid {
    grid-template-columns: 1fr;
  }
}
/* ID:463 特集カードに枠線とホバーエフェクトを追加 */
/* ID:591 (5/11 長谷川) 他ページのカード hover と統一するため、translateY による
   上下動きを撤廃。視認性のため box-shadow のみで hover 表現を維持。 */
.p-featureCard {
  border: 1px solid var(--border-color);
  background: var(--white-color);
  transition: box-shadow 0.2s ease-in-out;
}
.p-featureCard:hover {
  box-shadow: var(--box-shadow);
}
.p-featureCard__inner {
  padding: 24px;
}
.p-featureCard__category {
  margin-bottom: 12px;
}
.p-featureCard__title {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 500;
  margin-bottom: 16px;
  height: 4.2em; /* 3em * 1.4 */
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-family: "MFW-PKawaraMinchoProN-M", serif;
}
.p-featureCard__count {
  color: var(--text3-color);
}
.p-featureCard__link:hover .p-featureCard__title {
  -webkit-text-decoration: underline 1px;
          text-decoration: underline 1px;
}

.p-featureCategory .p-featurePickup__thumb img {
  aspect-ratio: 1/1;
}
.p-featureCategory .p-featurePickup__body {
  gap: 16px;
}
.p-featureCategory .p-featurePickup__category {
  font-size: 17px;
}
.p-featureCategory .p-featurePickup__title {
  font-size: 40px;
  margin-bottom: 0;
}
.p-featureCategory .p-featurePickup__lead {
  color: var(--text2-color);
  font-size: 17px;
  line-height: 1.5;
}

.p-originalEpisode__badges {
  color: var(--accent-color-black);
}
.p-originalEpisode__title {
  font-size: 13px;
}

@media (max-width: 1024px) {
  /* 2026-05-16: SP も上下 padding を半分に縮小 (32px/48px → 16px/24px)。 */
  .p-feature__mv {
    padding: 16px 0 12px;
  }
  .p-feature__pickup .c-wh1280 {
    width: 100%;
  }
  .p-featurePickup {
    /* 2026-05-16: SP で padding-bottom: 0 にしていたが、結果ピックアップと
       次の特集カードグリッドが密着してしまうため、PC と同じ 40px を継承させる。 */
    flex-direction: column;
  }
  .p-featurePickup__thumb {
    width: 100%;
  }
  .p-featurePickup__body {
    width: 100%;
    padding: 32px 24px;
    gap: 32px;
  }
  .p-featurePickup__category {
    margin-bottom: 20px;
  }
  .p-featurePickup__title {
    font-size: 22px;
    margin-bottom: 32px;
  }
  .p-featurePickup__actions {
    flex-direction: column;
    gap: 12px;
  }
  .p-feature__content {
    padding-bottom: 96px;
  }
  .p-featureCategory .p-feature__content {
    padding-bottom: 80px;
  }
  .p-featureCategory .p-featurePickup__body {
    gap: 20px;
    padding: 48px 24px;
  }
  .p-featureCategory .p-featurePickup__category {
    font-size: 15px;
  }
  .p-featureCategory .p-featurePickup__title {
    font-size: 22px;
  }
  .p-featureCategory .p-featurePickup__lead {
    font-size: 15px;
  }
}

/* ID:465 「特集を読む」CTAとVol.1の間の余白を縮める */
.p-featurePickup__actions + .p-featurePickup__episode,
.p-featurePickup__actions + .p-featurePickup__count + .p-featurePickup__episode {
  margin-top: 16px;
}

/* ID:467 特集ページのカテゴリ名フォントウェイト R→M */
.p-feature .c-metaCategory,
.p-featurePickup__category,
.p-featureCategory .p-featurePickup__category {
  font-weight: 500;
}

/* ID:471 Vol を小さく、記事タイトルを大きく */
.p-featurePickup__episodeMeta .p-featurePickup__episodeVol,
.p-featurePickup__episodeVol {
  font-size: 12px;
  color: var(--text4-color);
}
.p-featurePickup__episodeTitle {
  font-size: 15px;
}

/* ID:472 / ID:473 特集記事一覧のヒーロー写真を 3:2 + 最大幅で固定 (画面幅に合わせて無限拡大しない) */
.p-feature .p-featurePickup__thumb,
.p-feature .p-featureHero__thumb,
.p-feature .p-featureMv__thumb {
  max-width: 1280px;
  margin-inline: auto;
}
.p-feature .p-featurePickup__thumb img,
.p-feature .p-featureHero__thumb img,
.p-feature .p-featureMv__thumb img {
  aspect-ratio: 3 / 2;
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 100%;
}

/* ID:475 筆者アイコンと筆者名を中央揃え */
.p-feature .c-authorWrap,
.p-feature .c-author,
.p-featureCard .c-authorWrap,
.p-featurePickup .c-authorWrap {
  align-items: center;
}

/* ID:477 NoImage 時のサムネイルサイズを揃える */
.p-feature .c-articleCard__thumb img[src*="default"],
.p-featureCard__thumb img[src*="default"] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ID:468 / ID:469 SP 特集 余白調整 */
@media screen and (max-width: 768px) {
  .p-feature__pickup .p-featurePickup__episode,
  .p-featurePickup__episode {
    margin-top: 24px;
  }
  .p-feature__pickup .p-featurePickup__count,
  .p-feature__pickup .p-featurePickup__episode + .p-featurePickup__effect {
    margin-bottom: 24px;
  }
}

/* ID:475 特集記事一覧 筆者アイコンと筆者名を縦中央揃え（一部レイアウトで
   align-items が継承されず崩れていたため明示）。 */
.p-feature .c-author,
.p-feature .c-authorWrap,
.p-feature .p-featurePickup__author,
.p-feature .p-featureCard__author {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ID:477 特集記事一覧 画像なし時のフォールバックサムネを通常画像と同サイズに合わせる。
   default-* 画像が intrinsic サイズで縮小表示される問題を解消。 */
.p-feature .p-featureCard__thumb,
.p-feature .c-articleCard__thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-color);
}
.p-feature .p-featureCard__thumb img,
.p-feature .c-articleCard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/*# sourceMappingURL=feature.css.map */