/* =============================
 * FEATURE セクション (固定枠)
 * 関連: template-parts/feature/feature-section.php
 *       front-page.php
 * ============================= */

/* セクションラッパ */
.feature {
  background-color: var(--color-main-light);
  padding: 24px 0;
}

.feature__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* セクションヘッダ */
.feature__header {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 20px;
  min-height: 44px;
  overflow: visible;
}

/* ============================================================
   フロントページ セクション見出しの共通つくり
   (FEATURE / TREND / HOT WORDS で共有)
   - 大見出し本体: Outfit
   - 補助テキスト: > span (Zen Kaku Gothic New)
   位置・余白・色のバリエーションはインスタンス側 (下記) で上書き。
   注意: 既存の .section-title (common.css の 22px 下線付き記事本文 H2) と
   名前が衝突するため、ここでは .front-section-title を使用する。
   ============================================================ */
.front-section-title {
  font-size: 36px;
  font-weight: 500;
  margin: 0;
  padding: 0;
  color: var(--color-main);
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  line-height: 1.2;
  letter-spacing: 0.14em;
  font-family: "Outfit", sans-serif;
}
.front-section-title > span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin: 4px 0 0 14px;
  letter-spacing: 0.1em;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
}

@media (max-width: 1023px) {
  .front-section-title {
    font-size: 32px;
  }
  .front-section-title > span {
    font-size: 12px;
  }
}

/* 暗色パネル上での色オーバーライド (例: .hotwords-section の白文字) */
.front-section-title--inverse,
.front-section-title--inverse > span {
  color: var(--color-text-sub);
}

/* FEATURE: SP のアーチ装飾 (.feature__header h2::before) と重ねるため z-index 上げ */
.feature__header .front-section-title {
  position: relative;
  z-index: 1;
}

/* TREND: .article-listblock の上に独立配置するブロック用余白。
   SP は .article-listblock (width: 94%) と左端揃え。 */
.trend-title {
  margin: 0 0 14px;
}
@media (max-width: 1023px) {
  .trend-title {
    width: 94%;
    margin: 0 auto 14px;
  }
}

@media (max-width: 1023px) {
  .feature__header h2::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 6px;
    transform: translateX(70%);
    margin-bottom: -19px;
    width: 120px;
    height: 46px;
    background-image: url('../images/feature-thank-you-sp.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 0;
    scale: 0.8;
  }
}

@media (max-width: 389px) {
  .feature__header h2::before {
    width: 96px;
    height: 37px;
    transform: translateX(15%);
    margin-bottom: -14px;
  }
}

/* グリッド */
.feature__grid {
  display: grid;
  gap: 16px;
}

/* gap は 0。カード間の区切りは .feature-card--sub の border-top で作る */
.feature__sub-cards {
  display: grid;
  gap: 0;
}

.feature-card {
  width: 100%;
  margin: 0;
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
}

.feature-card__link {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.feature-card__link:hover {
  opacity: 0.85;
}
.feature-card__link:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: -2px;
}

.feature-card__thumb {
  position: relative;
  overflow: hidden;
  background-color: var(--color-light);
  border-radius: var(--radius-thumbnail);
}
.feature-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-thumbnail);
}

.feature-card__title {
  font-family: var(--font-base);
  font-weight: var(--font-bold-weight);
  color: var(--color-text);
  margin: 0;
}

.feature-card__title-text {
  display: inline;
}

.feature-card__subcat-tag {
  display: inline-block;
  background-color: var(--bg-color);
  color: var(--color-main);
  font-family: var(--font-base);
  font-size: 1.4rem;
  font-weight: var(--font-sub-weight);
  line-height: 1;
  padding: 2px 4px;
  border-radius: 0;
  margin-top: 8px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero カード */
.feature-card--hero .feature-card__thumb {
  aspect-ratio: 16 / 10;
}
.feature-card--hero .feature-card__body {
  padding: 14px 4px 4px;
}
.feature-card--hero .feature-card__title {
  font-size: 2rem;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.feature-card--hero .feature-card__title-text {
  display: inline;
  background-image: linear-gradient(transparent 70%, rgba(255, 255, 255, 1) 70%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.feature-card--hero .feature-card__thumb .feature-card__subcat-tag {
  position: absolute;
  right: 12px;
  bottom: 12px;
  margin-top: 0;
  background-color: var(--bg-color);
}

/* 小カード */
.feature-card--sub {
  background-color: transparent;
  border-radius: 0;
  border-top: 2px dashed #fff;
  padding: 16px 0;
}
.feature-card--sub:last-child {
  padding-bottom: 4px;
}
.feature-card--sub .feature-card__link {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  gap: 15px;
  align-items: flex-start;
}
.feature-card--sub .feature-card__thumb {
  position: relative;
  display: block;
  flex: 0 0 135px;
  width: 135px;
  overflow: hidden;
  background: transparent;
  aspect-ratio: auto;
}
.feature-card--sub .feature-card__thumb img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center center;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--color-light);
  border-radius: var(--radius-thumbnail);
}
.feature-card--sub .feature-card__body {
  display: flex;
  flex-flow: column;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
.feature-card--sub .feature-card__title {
  font-size: 1.4rem;
  font-weight: var(--font-strong-weight);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-space-tight);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.feature-card--sub .feature-card__subcat-tag {
  padding: 2px 4px;
  margin-top: 2px;
  align-self: flex-start;
}

/* =============================
 * PC (1024px-)
 * メイン+サイドバー構造でメイン実効幅 664px のため、
 * カンプの「Hero 左 + 小カード 2×2 右」は破綻する。
 * Hero 全幅 (上) + 小カード 2×2 (下) の縦並びに組み替え。
 * Tablet (768-1023px) は SP レイアウトを使う。
 * ============================= */
@media (min-width: 1024px) {
  .feature {
    padding: 36px 0 20px;
    border-radius: var(--radius-6) var(--radius-6) 0 0;
  }
  .feature__inner {
    padding: 0 24px;
  }
  .feature__header {
    margin-bottom: 28px;
  }
  .feature__header::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 400px;
    width: 100%;
    height: 100%;
    background-image: url('../images/feature-thank-you.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
    scale: 2.3;
  }

  .feature__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
  }

  .feature-card--hero .feature-card__link {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: 20px;
  }
  .feature-card--hero .feature-card__thumb {
    flex: 0 0 40%;
    width: 40%;
    aspect-ratio: 3 / 2;
    align-self: stretch;
  }
  .feature-card--hero .feature-card__body {
    flex: 1 1 54%;
    padding: 8px 0;
    display: flex;
    align-items: center;
  }
  .feature-card--hero .feature-card__title {
    font-size: 2rem;
  }

  .feature__sub-cards {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 0;
    align-content: start;
  }
  .feature-card--sub .feature-card__thumb {
    flex: 0 0 130px;
    width: 130px;
  }
  .feature-card--sub .feature-card__title {
    font-size: 1.5rem;
  }
  .feature-card--sub .feature-card__subcat-tag {
    font-size: 1.1rem;
  }
}