@charset "UTF-8";
/**
 * mag-frontpage.scss ── マガジン用フロントページコンポーネント集約
 *
 * 目的: Compass が無い環境でも新コンポーネントのスタイルを実WordPressに反映するための
 *       ブリッジ用エントリ。dart-sass でコンパイルして mag-frontpage.css を生成し、
 *       css.php で読み込む。
 *
 * 注意:
 *   - これらの partial は _component.scss にも import 済みのため、Compass で style.css を
 *     再生成すれば同じCSSがそちらにも入る（CSSは冪等なので二重読み込みでも無害）。
 *   - カラーは @cakejp/design-system のトークン（var(--...)）を参照。ds-tokens.css が前提。
 *
 * コンパイル:
 *   npx sass --no-source-map \
 *     wp-content/themes/mag.cake.jp/assets/sass/mag-frontpage.scss:wp-content/themes/mag.cake.jp/assets/css/mag-frontpage.css
 */
/**
 * カテゴリナビゲーション
 * 社長モックの .tabs スタイル準拠
 */
.c-category-navigation {
  background: var(--Surface-Primary);
  border-bottom: 1px solid var(--Border-Medium-Emphasis);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.c-category-navigation__list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  list-style: none;
  height: 52px;
  min-width: min-content;
}
.c-category-navigation__item {
  flex-shrink: 0;
  list-style: none;
}
.c-category-navigation__link {
  display: inline-block;
  position: relative;
  padding: 14px 0;
  color: var(--Primitive-Gray-800);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s;
}
.c-category-navigation__link:hover {
  color: var(--Brand-Cake-Orange);
}
.c-category-navigation__link.is-active {
  color: var(--Text-High-Emphasis);
  font-weight: 700;
}
.c-category-navigation__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--Brand-Cake-Orange);
}

@media (max-width: 768px) {
  .c-category-navigation__list {
    gap: 18px;
  }
  .c-category-navigation__link {
    font-size: 1.3rem;
  }
}
/**
 * マガジン用カード
 * 社長モックの .card に準拠
 *
 * 構成: 画像（上にカテゴリラベル overlay）+ タイトル + meta（著者・アバター・役割）
 *
 * Modifier:
 *   .c-card-mag__label--int   インタビュー（白背景＋primary文字）
 *   .c-card-mag__label--tre   トレンド（primary背景＋白文字）
 *   .c-card-mag__label--new   ニュース（白＋ink）
 *   .c-card-mag__label--how   はじめての人へ（peach背景＋primary-dark）
 *   .c-card-mag__label--rec   編集部おすすめ（ink背景＋白）
 */
.c-card-mag {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.c-card-mag__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.c-card-mag__thumb {
  position: relative;
  aspect-ratio: 1200/630;
  overflow: hidden;
  background: var(--Surface-Secondary);
  border-radius: 8px;
}
.c-card-mag__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.c-card-mag:hover .c-card-mag__thumb img {
  transform: scale(1.04);
}
.c-card-mag__label {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 3px 10px;
  background: var(--Surface-Primary);
  color: var(--Text-High-Emphasis);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.02em;
  z-index: 1;
}
.c-card-mag__label--int {
  background: var(--Surface-Primary);
  color: var(--Primitive-Orange-900);
}
.c-card-mag__label--tre {
  background: var(--Brand-Cake-Orange);
  color: var(--Surface-Primary);
}
.c-card-mag__label--new {
  background: var(--Surface-Primary);
  color: var(--Primitive-Gray-800);
}
.c-card-mag__label--how {
  background: var(--Brand-Cake-Orange-Ultra-Light);
  color: var(--Primitive-Orange-900);
}
.c-card-mag__label--rec {
  background: var(--Text-High-Emphasis);
  color: var(--Surface-Primary);
}
.c-card-mag__title {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.65;
  color: var(--Text-High-Emphasis);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-card-mag__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  color: var(--Text-Medium-Emphasis);
  flex-wrap: wrap;
}
.c-card-mag__by {
  display: flex;
  align-items: center;
  gap: 6px;
}
.c-card-mag__av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--Surface-Secondary);
  overflow: hidden;
  flex-shrink: 0;
}
.c-card-mag__av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-card-mag__by-name {
  font-weight: 500;
  color: var(--Primitive-Gray-800);
}
.c-card-mag__role {
  font-size: 1rem;
  font-weight: 700;
  color: var(--Primitive-Orange-900);
  background: var(--Brand-Cake-Orange-Ultra-Light);
  padding: 2px 6px;
  border-radius: 4px;
}
.c-card-mag__date {
  color: var(--Text-Medium-Emphasis);
}

.c-card-mag--feature .c-card-mag__thumb {
  aspect-ratio: 1200/630;
}
.c-card-mag--feature .c-card-mag__title {
  font-size: 2rem;
  line-height: 1.6;
  -webkit-line-clamp: 4;
}

.c-card-mag--compact .c-card-mag__thumb {
  aspect-ratio: 1200/630;
}
.c-card-mag--compact .c-card-mag__title {
  font-size: 1.3rem;
}

/**
 * サイドバー：ランキング & メルマガ
 * 社長モックの .rank-card / .nl-card に準拠
 */
.c-rank-card {
  background: var(--Surface-Primary);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid var(--Border-Medium-Emphasis);
}
.c-rank-card + .c-rank-card {
  margin-top: 16px;
}
.c-rank-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.c-rank-card__title {
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--Text-High-Emphasis);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.c-rank-card__title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--Brand-Cake-Orange);
  border-radius: 2px;
}
.c-rank-card__tabs {
  display: flex;
  background: var(--Surface-Secondary);
  border-radius: 4px;
  padding: 3px;
  margin-bottom: 14px;
}
.c-rank-card__tab {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 8px 0;
  color: var(--Text-Medium-Emphasis);
  border-radius: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.c-rank-card__tab.is-on {
  background: var(--Surface-Primary);
  color: var(--Text-High-Emphasis);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.c-rank-card__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-rank-item {
  display: grid;
  grid-template-columns: 24px 72px 1fr;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  list-style: none;
}
.c-rank-item__n {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--Text-Medium-Emphasis);
  text-align: center;
}
.c-rank-item--top1 .c-rank-item__n, .c-rank-item--top2 .c-rank-item__n, .c-rank-item--top3 .c-rank-item__n {
  color: var(--Brand-Cake-Orange);
}
.c-rank-item__img {
  width: 72px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}
.c-rank-item__title {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--Text-High-Emphasis);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.c-rank-item__lab {
  font-size: 1rem;
  font-weight: 700;
  color: var(--Primitive-Orange-900);
  margin-top: 4px;
}

.c-newsletter {
  background: var(--Brand-Cake-Orange-Ultra-Light);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--Brand-Cake-Orange-Light);
}
.c-newsletter__em {
  font-size: 2.8rem;
  margin-bottom: 6px;
}
.c-newsletter__title {
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0 0 6px;
  color: var(--Text-High-Emphasis);
}
.c-newsletter__lead {
  font-size: 1.1rem;
  color: var(--Primitive-Gray-800);
  line-height: 1.7;
  margin: 0 0 14px;
}
.c-newsletter__input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid var(--Border-Medium-Emphasis);
  font-family: inherit;
  font-size: 1.2rem;
  background: var(--Surface-Primary);
  color: var(--Text-High-Emphasis);
  margin-bottom: 8px;
}
.c-newsletter__btn {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  background: var(--Brand-Cake-Orange);
  color: var(--Surface-Primary);
  font-weight: 700;
  font-size: 1.3rem;
  border: 0;
  cursor: pointer;
}
.c-newsletter__btn:hover {
  background: var(--Primitive-Orange-800);
}
.c-newsletter__small {
  font-size: 1rem;
  color: var(--Text-Medium-Emphasis);
  margin: 8px 0 0;
}

/**
 * フロントページ全体のレイアウト
 * 社長モックの .layout (本文+サイドバー) に準拠
 */
.p-frontpage-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 296px;
  gap: 32px;
  align-items: start;
}
.p-frontpage-layout__main {
  min-width: 0;
}
.p-frontpage-layout__aside {
  position: sticky;
  top: 24px;
}

@media (max-width: 1100px) {
  .p-frontpage-layout {
    grid-template-columns: 1fr 264px;
    gap: 24px;
  }
}
@media (max-width: 900px) {
  .p-frontpage-layout {
    grid-template-columns: 1fr;
  }
  .p-frontpage-layout__aside {
    position: static;
  }
}
/**
 * フロントページセクション
 * 社長モックの sec / sec-h スタイル準拠
 *
 * Modifier:
 *   .p-frontpage-section--cols-2 / --cols-3 / --cols-4  カード列数の指定
 */
.p-frontpage-section {
  padding: 20px 0;
}
.p-frontpage-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.p-frontpage-section__title {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  color: var(--Text-High-Emphasis);
}
.p-frontpage-section__title-text {
  line-height: 1.4;
}
.p-frontpage-section__more {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--Primitive-Gray-800);
  padding: 6px 14px;
  border: 1px solid var(--Border-Medium-Emphasis);
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.p-frontpage-section__more::after {
  content: " ›";
  color: var(--Brand-Cake-Orange);
  font-weight: 700;
}
.p-frontpage-section__more:hover {
  background: var(--Brand-Cake-Orange);
  color: var(--Surface-Primary);
  border-color: var(--Brand-Cake-Orange);
}
.p-frontpage-section__more:hover::after {
  color: var(--Surface-Primary);
}
.p-frontpage-section__content .c-list-post {
  display: grid;
  gap: 16px 24px;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  padding: 0;
  margin: 0;
}
.p-frontpage-section__content .c-list-post__item {
  list-style: none;
}
.p-frontpage-section--cols-2 .p-frontpage-section__content .c-list-post {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}
.p-frontpage-section--cols-3 .p-frontpage-section__content .c-list-post {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 24px;
}
.p-frontpage-section--cols-4 .p-frontpage-section__content .c-list-post {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 16px;
}

@media (max-width: 900px) {
  .p-frontpage-section {
    padding: 16px 0;
  }
  .p-frontpage-section__title {
    font-size: 2.4rem;
  }
  .p-frontpage-section__content .c-list-post, .p-frontpage-section--cols-3 .p-frontpage-section__content .c-list-post, .p-frontpage-section--cols-4 .p-frontpage-section__content .c-list-post {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .p-frontpage-section--cols-2 .p-frontpage-section__content .c-list-post {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 540px) {
  .p-frontpage-section__content .c-list-post, .p-frontpage-section--cols-3 .p-frontpage-section__content .c-list-post, .p-frontpage-section--cols-4 .p-frontpage-section__content .c-list-post {
    grid-template-columns: 1fr;
  }
}
/**
 * 注目記事レイアウト（1大 + サイド小）
 * 社長モックの .feat-layout に準拠
 */
.p-frontpage-featured {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
}
.p-frontpage-featured__feature .c-card-mag__thumb {
  aspect-ratio: 1200/630;
}
.p-frontpage-featured__feature .c-card-mag__title {
  font-size: 2rem;
  line-height: 1.6;
  -webkit-line-clamp: 4;
}
.p-frontpage-featured__super {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--Primitive-Orange-900);
  background: var(--Brand-Cake-Orange-Ultra-Light);
  padding: 4px 10px;
  border-radius: 4px;
  align-self: flex-start;
}
.p-frontpage-featured__lede {
  font-size: 1.3rem;
  line-height: 1.85;
  color: var(--Primitive-Gray-800);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.p-frontpage-featured__side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .p-frontpage-featured {
    grid-template-columns: 1fr;
  }
  .p-frontpage-featured__feature .c-card-mag__title {
    font-size: 1.8rem;
  }
  .p-frontpage-featured__side {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 540px) {
  .p-frontpage-featured__side {
    grid-template-columns: 1fr;
  }
}
/**
 * はじめての人へ（ガイドセクション）
 * 社長モックの .guide / .guide-grid / .gd-card に準拠
 */
.p-frontpage-guide {
  padding: 20px 0;
  background: var(--Surface-Secondary);
}
.p-frontpage-guide__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.p-frontpage-guide__lead {
  font-size: 1.3rem;
  color: var(--Primitive-Gray-800);
  max-width: 640px;
  margin: 0 0 24px;
  line-height: 1.85;
}
.p-frontpage-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.c-card-guide {
  background: var(--Surface-Primary);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--Border-Medium-Emphasis);
  transition: transform 0.2s, border-color 0.2s;
  text-decoration: none;
  color: inherit;
}
.c-card-guide:hover {
  border-color: var(--Brand-Cake-Orange);
  transform: translateY(-2px);
}
.c-card-guide__thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
}
.c-card-guide__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.c-card-guide:hover .c-card-guide__thumb img {
  transform: scale(1.05);
}
.c-card-guide__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  background: var(--Surface-Primary);
  color: var(--Primitive-Orange-900);
  font-size: 1rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.c-card-guide__badge::before {
  content: "●";
  color: var(--Brand-Cake-Orange);
  font-size: 0.7em;
}
.c-card-guide__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.c-card-guide__title {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.55;
  color: var(--Text-High-Emphasis);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-card-guide__excerpt {
  font-size: 1.2rem;
  color: var(--Primitive-Gray-800);
  line-height: 1.85;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-card-guide__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--Border-Medium-Emphasis);
  font-size: 1.1rem;
  color: var(--Text-Medium-Emphasis);
}
.c-card-guide__link {
  color: var(--Brand-Cake-Orange);
  font-weight: 700;
}
.c-card-guide__link::after {
  content: " ›";
}

@media (max-width: 900px) {
  .p-frontpage-guide__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .p-frontpage-guide__grid {
    grid-template-columns: 1fr;
  }
}
/**
 * 季節のまとめ記事
 * 社長モックの .roundup / .ru-card に準拠
 */
.p-frontpage-roundup {
  padding: 20px 0;
  background: var(--Surface-Secondary);
}
.p-frontpage-roundup__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.p-frontpage-roundup__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.c-card-roundup {
  background: var(--Surface-Primary);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--Border-Medium-Emphasis);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s;
}
.c-card-roundup:hover {
  border-color: var(--Brand-Cake-Orange);
}
.c-card-roundup__thumb {
  aspect-ratio: 5/3;
  overflow: hidden;
  position: relative;
}
.c-card-roundup__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-card-roundup__season {
  position: absolute;
  left: 10px;
  top: 10px;
  background: var(--Brand-Cake-Orange);
  color: var(--Surface-Primary);
  font-size: 1rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
}
.c-card-roundup__body {
  padding: 16px;
}
.c-card-roundup__kw {
  font-size: 1rem;
  font-weight: 700;
  color: var(--Primitive-Orange-900);
  margin-bottom: 6px;
}
.c-card-roundup__title {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--Text-High-Emphasis);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-card-roundup__excerpt {
  font-size: 1.15rem;
  color: var(--Primitive-Gray-800);
  line-height: 1.75;
  margin: 0;
}
.c-card-roundup__stats {
  display: flex;
  gap: 14px;
  font-size: 1rem;
  color: var(--Text-Medium-Emphasis);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--Border-Medium-Emphasis);
}
.c-card-roundup__stats b {
  color: var(--Primitive-Gray-800);
  font-weight: 700;
}

@media (max-width: 900px) {
  .p-frontpage-roundup__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .p-frontpage-roundup__grid {
    grid-template-columns: 1fr;
  }
}
/**
 * シーン別おすすめ（モザイクタイル）
 * 社長モックの .scene / .scene-grid / .scene-tile に準拠
 */
.p-frontpage-scene {
  padding: 20px 0;
}
.p-frontpage-scene__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.p-frontpage-scene__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 160px;
  gap: 12px;
}
.p-frontpage-scene__cta {
  margin-top: 32px;
  padding: 24px;
  border-radius: 8px;
  background: var(--Brand-Cake-Orange-Ultra-Light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border: 1px solid var(--Brand-Cake-Orange-Light);
}
.p-frontpage-scene__cta-l h4 {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--Text-High-Emphasis);
  margin: 0;
}
.p-frontpage-scene__cta-l p {
  font-size: 1.2rem;
  color: var(--Primitive-Gray-800);
  margin: 6px 0 0;
  line-height: 1.7;
}
.p-frontpage-scene__cta-btn {
  background: var(--Brand-Cake-Orange);
  color: var(--Surface-Primary);
  font-weight: 700;
  font-size: 1.3rem;
  padding: 12px 24px;
  border-radius: 4px;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.p-frontpage-scene__cta-btn:hover {
  background: var(--Primitive-Orange-800);
}

.c-scene-tile {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  color: var(--Surface-Primary);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  text-decoration: none;
}
.c-scene-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
  z-index: 0;
}
.c-scene-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 1;
}
.c-scene-tile:hover img {
  transform: scale(1.05);
}
.c-scene-tile__body {
  position: relative;
  z-index: 2;
}
.c-scene-tile__title {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 0;
}
.c-scene-tile__pr {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 4px 0 0;
}
.c-scene-tile--big {
  grid-column: span 2;
  grid-row: span 2;
}
.c-scene-tile--big .c-scene-tile__title {
  font-size: 2.2rem;
}

@media (max-width: 900px) {
  .p-frontpage-scene__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
  }
  .c-scene-tile--big {
    grid-column: span 2;
    grid-row: span 1;
  }
  .c-scene-tile--big .c-scene-tile__title {
    font-size: 1.8rem;
  }
  .p-frontpage-scene__cta {
    flex-direction: column;
    align-items: flex-start;
  }
}
/**
 * マガジンフッター
 * 社長モックの footer に準拠（4カラム + legal帯）
 * カラーは @cakejp/design-system トークン使用
 */
.p-frontpage-footer {
  background: var(--Surface-Primary);
  border-top: 1px solid var(--Border-Medium-Emphasis);
  padding: 48px 0 24px;
  color: var(--Text-Medium-Emphasis);
}
.p-frontpage-footer__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1.4fr repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
}
.p-frontpage-footer__col h5 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--Text-High-Emphasis);
}
.p-frontpage-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-frontpage-footer__col a {
  font-size: 1.2rem;
  color: var(--Text-Medium-Emphasis);
  text-decoration: none;
}
.p-frontpage-footer__col a:hover {
  color: var(--Brand-Cake-Orange);
}
.p-frontpage-footer__brand p {
  font-size: 1.15rem;
  color: var(--Text-Medium-Emphasis);
  line-height: 1.85;
  margin-top: 14px;
}
.p-frontpage-footer__logo {
  display: inline-flex;
  align-items: center;
}
.p-frontpage-footer__logo img {
  height: 36px;
  width: auto;
  display: block;
}
.p-frontpage-footer__social {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.p-frontpage-footer__social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--Surface-Secondary);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--Text-Medium-Emphasis);
  text-decoration: none;
}
.p-frontpage-footer__social a:hover {
  background: var(--Brand-Cake-Orange);
  color: var(--Surface-Primary);
}
.p-frontpage-footer__legal {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 20px 16px 0;
  border-top: 1px solid var(--Border-Medium-Emphasis);
  font-size: 1.1rem;
  color: var(--Text-Low-Emphasis);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 900px) {
  .p-frontpage-footer__container {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 540px) {
  .p-frontpage-footer__container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/**
 * ヒーローカルーセル
 * 社長モックの .hero / .hero-thumbs に準拠
 */
.p-hero-carousel {
  padding: 24px 0 0;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
.p-hero-carousel__stage {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16/8.4;
  background: var(--Text-High-Emphasis);
}
.p-hero-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.p-hero-carousel__slide.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.p-hero-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-hero-carousel__slide::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 100%);
  pointer-events: none;
}
.p-hero-carousel__meta {
  position: absolute;
  left: 32px;
  bottom: 32px;
  right: 32px;
  color: var(--Surface-Primary);
  z-index: 2;
}
.p-hero-carousel__cat {
  display: inline-block;
  padding: 5px 12px;
  background: var(--Brand-Cake-Orange);
  color: var(--Surface-Primary);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  margin-bottom: 14px;
}
.p-hero-carousel__title {
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 3.6rem);
  line-height: 1.5;
  max-width: 780px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  margin: 0;
  word-break: auto-phrase;
  line-break: strict;
}
.p-hero-carousel__byline {
  margin-top: 12px;
  font-size: 1.2rem;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.p-hero-carousel__byline b {
  font-weight: 700;
}
.p-hero-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--Text-High-Emphasis);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
  font-size: 1.8rem;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}
.p-hero-carousel__arrow--prev {
  left: 16px;
}
.p-hero-carousel__arrow--next {
  right: 16px;
}
.p-hero-carousel__arrow:hover {
  background: var(--Surface-Primary);
}
.p-hero-carousel__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}
.p-hero-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: all 0.3s;
  border: 0;
  padding: 0;
}
.p-hero-carousel__dot.is-on {
  background: var(--Surface-Primary);
  width: 24px;
  border-radius: 4px;
}
.p-hero-carousel__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 4;
}
.p-hero-carousel__progress span {
  display: block;
  height: 100%;
  background: var(--Brand-Cake-Orange);
  width: 0;
  transition: width 5s linear;
}
.p-hero-carousel__progress.is-run span {
  width: 100%;
}
.p-hero-carousel__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.p-hero-thumb {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--Surface-Primary);
  border: 1px solid var(--Border-Medium-Emphasis);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s;
}
.p-hero-thumb:hover {
  border-color: var(--Brand-Cake-Orange);
}
.p-hero-thumb__img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.p-hero-thumb__body {
  flex: 1;
  min-width: 0;
}
.p-hero-thumb__label {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--Primitive-Orange-900);
  background: var(--Brand-Cake-Orange-Ultra-Light);
  padding: 2px 8px;
  border-radius: 4px;
}
.p-hero-thumb__title {
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 6px 0 0;
  color: var(--Text-High-Emphasis);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .p-hero-carousel__thumbs {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
/**
 * アーカイブ（カテゴリ一覧）のマガジンカードグリッド
 * c_card_mag を 3列グリッドで並べる。社長モックの grid-3 準拠。
 */
.p-archive-posts--mag .c-list-post {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-archive-posts--mag .c-list-post__item {
  list-style: none;
}

@media (max-width: 900px) {
  .p-archive-posts--mag .c-list-post {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 16px;
  }
}
@media (max-width: 540px) {
  .p-archive-posts--mag .c-list-post {
    grid-template-columns: 1fr;
  }
}
/**
 * 単一投稿ページの微調整
 * 本文・ヘッダー・関連記事は max-width:744px / margin:0 auto / 左右padding で中央寄せされているが、
 * 戻るボタン群（.c_btn_wrap._center.__back）だけ左右paddingと最大幅が無く端まで広がるため揃える。
 * （縦方向の余白は既存ルールを尊重し、左右のみ調整）
 */
.p-single-content__primary .c_btn_wrap._center.__back {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 24px;
  max-width: 744px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/**
 * 戻るボタン群を @cakejp/design-system の Button 意匠へ。
 * DS Button 基底: inline-flex / gap-2(8px) / rounded-xl(14px) / typo-label-md(14px,700,letter-spacing .04em)
 * size=default: h-10(40px) / px-5(20px)。outline バリアント相当（セカンダリ遷移）でDSトークン使用。
 * 既存の縦並び⇄横並びレスポンシブ（親の text-align:center による）は維持。
 */
.p-single-content__primary .c_btn_wrap._center.__back .c_btn._reg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  margin: 0;
  border: 1px solid var(--Border-Medium-Emphasis);
  border-radius: 14px;
  background: var(--Surface-Primary);
  color: var(--Text-High-Emphasis);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.p-single-content__primary .c_btn_wrap._center.__back .c_btn._reg:hover {
  background: var(--Surface-Secondary);
  border-color: var(--Border-High-Emphasis);
}

/**
 * 主従をつける（DS variant 相当）:
 * 「(カテゴリ)の記事一覧へ」(.__back) = primary（塗り・主導線）
 * 「マガジントップへ戻る」(.__home) = 上の outline のまま secondary。
 * トップはヘッダーで常に到達できるため副次的に位置づける。
 */
.p-single-content__primary .c_btn_wrap._center.__back .c_btn._reg.__back {
  background: var(--Brand-Cake-Orange);
  border-color: var(--Brand-Cake-Orange);
  color: var(--Text-on-Inverse);
}
.p-single-content__primary .c_btn_wrap._center.__back .c_btn._reg.__back:hover {
  background: var(--Primitive-Orange-800);
  border-color: var(--Primitive-Orange-800);
}
.p-single-content__primary .c_btn_wrap._center.__back .c_btn._reg.__back:before {
  background: var(--Text-on-Inverse);
  -webkit-mask: url(../img/icon-arrow-prev.svg) center/contain no-repeat;
  mask: url(../img/icon-arrow-prev.svg) center/contain no-repeat;
}

/**
 * モック（flashpark/mock magazine-renewal feature/magazine-renewal-design-update）同期スタイル
 * 静的モック側で進んだデザイン調整を実テーマへ移植したもの。
 * 対象: トップの2カラム再構成 / もっと見るテキストリンク / シーン別モザイク /
 *       ライター紹介 / トレンド・ガイドのグリッド / フルブリード背景帯 /
 *       ヘッダーロゴ画像 / mag-footer / ホバー統一
 */
/* ===== 注目記事 + 人気記事ランキング のみ2カラム ===== */
.feature-ranking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
  padding: 0 16px;
}

.feature-ranking-layout__main {
  min-width: 0;
}

.feature-ranking-layout__side {
  min-width: 0;
}

.feature-ranking-layout__side .l-frame-widgets {
  display: block;
  padding-top: 16px;
}

/* インタビュー以下は1カラム（中央寄せのコンテンツ幅いっぱい） */
.main-sections {
  display: block;
  width: 100%;
  padding: 0 16px;
}

.main-sections > .p-frontpage-section {
  width: 100%;
}

@media (max-width: 768px) {
  .feature-ranking-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* ===== セクション見出しのタイトル/サブ（既定は横並び・トップは縦積み） ===== */
.p-frontpage-section__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.p-frontpage-section__title-sub {
  font-size: 0.6em;
  font-weight: 500;
  color: var(--Text-Medium-Emphasis, #787675);
  letter-spacing: 0.03em;
}

/* トップ（feature-ranking-layout / main-sections 内）は縦積み */
.feature-ranking-layout .p-frontpage-section__title,
.main-sections .p-frontpage-section__title {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* ===== 画像比率を OGP (1200x630 ≈ 1.91:1) に固定して縦長化を防ぐ ===== */
.c-card-mag__thumb img, .c-card-guide__thumb img, .c-card-roundup__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-card-mag__thumb, .c-card-guide__thumb {
  aspect-ratio: 1200/630;
  overflow: hidden;
}

.c-card-roundup__thumb {
  aspect-ratio: 1200/630;
  overflow: hidden;
}

/* ===== scene/guide/roundup の__containerはメインカラム内で全幅（フルブリード帯のコンテナは後段のID指定が優先） ===== */
.p-frontpage-scene, .p-frontpage-guide, .p-frontpage-roundup {
  padding-left: 0;
  padding-right: 0;
}

.p-frontpage-scene__container, .p-frontpage-guide__container, .p-frontpage-roundup__container {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ===== セクション見出しの「もっと見る」：枠なしテキストリンク ===== */
.p-frontpage-section__more {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: #e85d1a !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  transition: opacity 0.2s ease, color 0.2s ease !important;
}

.p-frontpage-section__more::after {
  content: "" !important;
  display: none !important;
}

.p-frontpage-section__more:hover {
  background: transparent !important;
  border: none !important;
  color: #d95f20 !important;
}

/* ===== シーン別おすすめ：画像全面モザイク（大1 + 小4×2） ===== */
.section-scene {
  width: 100%;
}

.section-scene__container {
  max-width: none;
  margin: 0;
  padding: 0;
}

.scene-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  grid-template-rows: repeat(2, 110px);
  gap: 12px;
}

.scene-main-card {
  grid-row: span 2;
}

.scene-card {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #d6d6da 0%, #b3b3b8 100%);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.scene-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease;
}

.scene-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0) 72%);
}

.scene-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scene-card__title {
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.scene-card__count {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.1rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.scene-main-card .scene-card__title {
  font-size: 2rem;
}

.scene-card:hover img {
  opacity: 0.88;
}

@media (max-width: 900px) {
  .scene-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 120px;
  }
  .scene-main-card {
    grid-column: span 2;
    grid-row: span 1;
  }
}
@media (max-width: 540px) {
  .scene-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 110px;
  }
  .scene-main-card {
    grid-column: span 2;
  }
}
/* ===== ライター紹介（magazine-top.html 準拠：3カラム） ===== */
.section-writers .p-frontpage-section__header {
  margin-bottom: 20px;
}

.writer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.w-card {
  background: #fff;
  border: 1px solid #e8e8eb;
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: #1a1a1c;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.w-card:hover {
  border-color: #e04b00;
}

.w-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.w-av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: #f8f8fb;
  border: 2px solid #ffd4b2;
  flex-shrink: 0;
}

.w-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.w-head-l {
  flex: 1;
  min-width: 0;
}

.w-name {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #1a1a1c;
}

.w-role {
  font-size: 1.05rem;
  color: #626264;
  font-weight: 500;
  margin-top: 2px;
}

.w-catch {
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.5;
  color: #1a1a1c;
  padding: 10px 0;
  border-top: 1px solid #e8e8eb;
  border-bottom: 1px solid #e8e8eb;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.w-catch em {
  font-style: normal;
  color: #e04b00;
}

.w-desc {
  font-size: 1.15rem;
  color: #292D32;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.w-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.w-tags span {
  font-size: 1rem;
  font-weight: 500;
  color: #bd3200;
  background: #fff1e5;
  padding: 3px 8px;
  border-radius: 4px;
}

.w-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 0;
  margin-top: auto;
  border: 1px solid #1a1a1c;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1.25rem;
  color: #1a1a1c;
  background: #fff;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.w-cta::after {
  content: "›";
  color: #e04b00;
  font-size: 1.5rem;
  font-weight: 700;
}

.w-card:hover .w-cta {
  background: #1a1a1c;
  color: #fff;
}

.w-card:hover .w-cta::after {
  color: #fff;
}

@media (max-width: 768px) {
  .writer-grid {
    grid-template-columns: 1fr;
  }
}
/* 画像読み込み失敗時のグレーフォールバック背景 */
.c-card-mag__thumb, .c-card-guide__thumb {
  background: #f0ece6;
}

/* ===== トレンドニュース：上段2列（大）＋下段4列（通常）の6記事グリッド ===== */
.trend-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.trend-grid .trend-card {
  margin: 0;
  list-style: none;
}

.trend-grid .trend-card:nth-child(1),
.trend-grid .trend-card:nth-child(2) {
  grid-column: span 2;
}

/* 画像比率 16:9 固定（画像が無くても高さが崩れない） */
.trend-grid .c-card-mag__thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f0ece6;
}

.trend-grid .c-card-mag__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .trend-grid {
    grid-template-columns: 1fr;
  }
  .trend-grid .trend-card:nth-child(1),
  .trend-grid .trend-card:nth-child(2) {
    grid-column: auto;
  }
}
/* ===== はじめてのケーキ通販ガイド：3列×2段の均一グリッド ===== */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.guide-grid .c-card-guide {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.guide-grid .c-card-guide__thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f0ece6;
}

.guide-grid .c-card-guide__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.guide-grid .c-card-guide__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .guide-grid {
    grid-template-columns: 1fr;
  }
}
/* ガイドカード：「記事を読む」フッターを非表示 */
#section-guide .c-card-guide__foot {
  display: none !important;
}

/* 注目の大カードを少し小さく（feature列の比率を縮小・デスクトップのみ） */
@media (min-width: 901px) {
  #section-featured .p-frontpage-featured {
    grid-template-columns: 1.2fr 1fr;
  }
}
/* カードラベル：長い名称は折り返さず…で省略（1行固定） */
.c-card-mag__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 16px);
}

/* ===== 背景色付きセクション：背景の帯を画面いっぱいに（負マージンでフルブリード）／中身は中央1120px ===== */
/* 対象：はじめてのケーキ通販ガイド・季節のまとめ記事・ライター紹介 */
#section-guide.p-frontpage-guide,
#section-roundup.p-frontpage-roundup,
#section-writers.section-writers {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: auto;
  padding: 64px 0 !important;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
  position: relative;
}

/* 各セクションに独立した淡い背景色（帯は画面端まで） */
#section-guide.p-frontpage-guide {
  background: #f8f8fb !important;
}

#section-roundup.p-frontpage-roundup {
  background: #fbf9f8 !important;
}

#section-writers.section-writers {
  background: #f8f4ee !important;
}

/* コンテンツは max-width:1120px で中央寄せ（左右の余白はここだけに付ける） */
#section-guide .p-frontpage-guide__container,
#section-roundup .p-frontpage-roundup__container,
#section-writers .section-writers__container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ===== ヘッダーロゴ（画像版） ===== */
.header_logo--magazine a img {
  display: block;
  margin: 0 auto;
  width: auto !important;
  height: auto;
  max-height: 28px;
  max-width: 100%;
  object-fit: contain;
}

/* ===== フッター（mag-footer / magazine-top.html 準拠） ===== */
.mag-footer {
  background: #ffffff;
  border-top: 1px solid #ece7df;
  padding: 48px 0 24px;
  color: #292D32;
}

.mag-footer__container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}

.mag-footer__col h5 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1a1a1c;
}

.mag-footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.mag-footer__col a {
  font-size: 1.2rem;
  color: #292D32;
  text-decoration: none;
}

.mag-footer__col a:hover {
  color: #e04b00;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
}

.footer-logo img {
  display: block;
  width: auto !important;
  height: auto;
  max-height: 36px;
  max-width: 100%;
  object-fit: contain;
}

.mag-footer__brand p, .mag-footer .footer-description {
  font-size: 1.15rem;
  color: #6f6f6f;
  line-height: 2;
  text-align: left;
  margin-top: 14px;
}

/* SNSアイコン（本番 Cake.jp マガジン準拠：SVG・ラベルなし） */
.mag-footer .p-footer-item__snsList {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.mag-footer .p-footer-item__snsList > li {
  margin: 0 16px 0 0;
}

.mag-footer .p-footer-item__snsList a {
  display: block;
}

.mag-footer .p-footer-item__snsList img {
  width: 28px;
  height: 28px;
  display: block;
  transition: opacity 0.2s ease;
}

.mag-footer .p-footer-item__snsList a:hover img {
  opacity: 0.7;
}

.mag-footer__legal {
  max-width: 1120px;
  margin: 32px auto 0;
  padding: 20px 16px 0;
  border-top: 1px solid #e8e8eb;
  font-size: 1.1rem;
  color: #626264;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 900px) {
  .mag-footer__container {
    grid-template-columns: 1fr 1fr;
  }
}
/* ===== サイト全体のホバー：画像がふわっと明るくなるだけ（CREA/GINZA系の落ち着いた反応） ===== */
/* 枠線色変更・シャドウ変化・上下移動・拡大はすべて無効化 */
.c-card-mag__thumb img, .c-card-guide__thumb img, .c-card-roundup__thumb img,
.c-widget-rank__thumb, .w-card .w-av img, .scene-card img {
  transition: filter 0.2s ease !important;
}

/* hover：画像だけ少し明るく（白いベールがうっすら乗る程度） */
.c-card-mag:hover .c-card-mag__thumb img,
.c-card-guide:hover .c-card-guide__thumb img,
.c-card-roundup:hover .c-card-roundup__thumb img,
.c-widget-rank__link:hover .c-widget-rank__thumb,
.w-card:hover .w-av img,
.scene-card:hover img {
  filter: brightness(1.05) !important;
  opacity: 1 !important;
  transform: none !important;
}

/* カード自体：枠線色変更・影・拡大・上下移動はなし（既存のモーションを打ち消す） */
.c-card-mag:hover, .c-card-guide:hover, .c-card-roundup:hover, .w-card:hover,
.scene-card:hover, .p-hero-thumb:hover, .c-card-scene:hover,
.c-widget-rank__item:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* 既定の枠線色を固定し、hoverでも変えない（枠線色変更なし） */
.c-card-guide, .c-card-roundup, .w-card {
  border-color: #e7e1d8;
}

.c-card-guide:hover, .c-card-roundup:hover, .w-card:hover {
  border-color: #e7e1d8 !important;
}

/* タグ／カテゴリチップ：従来どおり淡いフェード */
.c-tag-chip:hover, .c-cat-chip:hover {
  opacity: 0.85 !important;
  transform: none !important;
}