/**
 * ds-tokens.css ── 自動生成ファイル（直接編集しないこと）
 *
 * @cakejp/design-system v0.3.5 のカラートークンを
 * @theme → :root へ変換したもの。
 * 再生成スクリプトは無い（Figma Plugin: Export Variables で手動エクスポート）。
 */

/**
 * Cake.jp Design System カラーパレット
 *
 * Figma Plugin: Export Variables (CSS/SCSS/Tailwind) を使い、CSS HEXコードでエクスポート。
 * https://www.figma.com/community/plugin/1382804904426179542/export-variables-css-scss-tailwind
 */
:root {
  /* Orange */
  --primitive-orange-50: #FFECD9FF;
  --primitive-orange-100: #FFD4B2FF;
  --primitive-orange-200: #FFBA84FF;
  --primitive-orange-300: #FFA66BFF;
  --primitive-orange-400: #FF8E4CFF;
  --primitive-orange-500: #F97732FF;
  --primitive-orange-600: #F16311FF;
  --primitive-orange-700: #E04B00FF; /* primary */
  --primitive-orange-800: #BD3200FF;
  --primitive-orange-900: #A62700FF;

  /* Gray */
  --primitive-gray-50: #FBF9F8FF;
  --primitive-gray-100: #F4F2F1FF;
  --primitive-gray-200: #EBE9E8FF;
  --primitive-gray-300: #DBD9D8FF;
  --primitive-gray-400: #B7B5B4FF;
  --primitive-gray-500: #979594FF;
  --primitive-gray-600: #787675FF;
  --primitive-gray-700: #575352FF;
  --primitive-gray-800: #3A3736FF;
  --primitive-gray-900: #1C1A1AFF;

  /* Forest */
  --primitive-forest-50: #E6F5ECFF;
  --primitive-forest-100: #C2E5D1FF;
  --primitive-forest-200: #9BD4B5FF;
  --primitive-forest-300: #71C598FF;
  --primitive-forest-400: #51B883FF;
  --primitive-forest-500: #2CAC6EFF;
  --primitive-forest-600: #259D63FF;
  --primitive-forest-700: #1D8B56FF;
  --primitive-forest-800: #197A4BFF; /* primary */
  --primitive-forest-900: #115A36FF;

  /* Sun */
  --primitive-sun-50: #FFE7E6FF;
  --primitive-sun-100: #FFC8B8FF;
  --primitive-sun-200: #FFA28BFF;
  --primitive-sun-300: #FF7B5CFF;
  --primitive-sun-400: #FF5838FF;
  --primitive-sun-500: #FF4B36FF;
  --primitive-sun-600: #FF220DFF;
  --primitive-sun-700: #FA1606FF;
  --primitive-sun-800: #EC0000FF; /* primary */
  --primitive-sun-900: #D50000FF;

  /* Teal */
  --primitive-teal-50: #F0FCF8FF;
  --primitive-teal-100: #D0F6E9FF;
  --primitive-teal-200: #ACEED8FF;
  --primitive-teal-300: #81E6C4FF;
  --primitive-teal-400: #59D9AEFF;
  --primitive-teal-500: #51C79FFF;
  --primitive-teal-600: #49B18EFF;
  --primitive-teal-700: #3E987AFF;
  --primitive-teal-800: #317860FF; /* primary */
  --primitive-teal-900: #1D4739FF;

  /* Sea */
  --primitive-sea-50: #E8F1FEFF;
  --primitive-sea-100: #C5D7FBFF;
  --primitive-sea-200: #9DB7F9FF;
  --primitive-sea-300: #7096F8FF;
  --primitive-sea-400: #4979F5FF;
  --primitive-sea-500: #295FF3FF;
  --primitive-sea-600: #003EE5FF; /* primary */
  --primitive-sea-700: #0031D8FF;
  --primitive-sea-800: #0024CEFF;
  --primitive-sea-900: #0017B6FF;

  /* Wood */
  --primitive-wood-50: #F8F1E0FF;
  --primitive-wood-100: #EFDBB1FF;
  --primitive-wood-200: #E5C47FFF;
  --primitive-wood-300: #DCAC4DFF;
  --primitive-wood-400: #D69C2BFF;
  --primitive-wood-500: #D18D0FFF;
  --primitive-wood-600: #CD820AFF;
  --primitive-wood-700: #C87504FF;
  --primitive-wood-800: #C16800FF; /* primary */
  --primitive-wood-900: #B65200FF;

  /* Berry */
  --primitive-berry-50: #FBD4E0FF;
  --primitive-berry-100: #F7B1C8FF;
  --primitive-berry-200: #F491B2FF;
  --primitive-berry-300: #F1749EFF;
  --primitive-berry-400: #EE598BFF;
  --primitive-berry-500: #EC407AFF;
  --primitive-berry-600: #EA296AFF;
  --primitive-berry-700: #E5175CFF; /* primary */
  --primitive-berry-800: #B5175CFF;
  --primitive-berry-900: #9E103FFF;

  /* Black */
  --primitive-black-2-1000: #000000FF;
}

/*
 * Alpha 変数は :root に直接定義する。
 * semantic.css で参照されていないシェードが Tailwind CSS v4 の
 * tree-shaking で除去されるのを防ぐため。
 */
:root {
  /* Gray alpha */
  --primitive-gray-alpha-50: #0000000D;
  --primitive-gray-alpha-100: #0000001A;
  --primitive-gray-alpha-200: #00000033;
  --primitive-gray-alpha-300: #0000004D;
  --primitive-gray-alpha-400: #00000066;
  --primitive-gray-alpha-500: #00000080;
  --primitive-gray-alpha-600: #00000099;
  --primitive-gray-alpha-700: #000000B2;
  --primitive-gray-alpha-800: #000000CC;
  --primitive-gray-alpha-900: #000000E5;
  --primitive-gray-alpha-1000: #000000FF;

  /* White alpha */
  --primitive-white-alpha-50: #FFFFFF0D;
  --primitive-white-alpha-100: #FFFFFF1A;
  --primitive-white-alpha-200: #FFFFFF33;
  --primitive-white-alpha-300: #FFFFFF4D;
  --primitive-white-alpha-400: #FFFFFF66;
  --primitive-white-alpha-500: #FFFFFF80;
  --primitive-white-alpha-600: #FFFFFF99;
  --primitive-white-alpha-700: #FFFFFFB2;
  --primitive-white-alpha-800: #FFFFFFCC;
  --primitive-white-alpha-900: #FFFFFFE5;
  --primitive-white-alpha-1000: #FFFFFFFF;
}

/**
 * Cake.jp Design System セマンティックカラー
 *
 * Primitive を参照して割り当て。
 * Surface / Text / Object / Hover / Active / Border / Brand / Overlay
 *
 * Light / Dark の両モードを定義。
 * Figma Variables の Light.tokens.json / Dark.tokens.json と完全一致。
 */
:root {
  /* ============================================
   * Light Mode（デフォルト）
   * ============================================ */

  /* Surface */
  --surface-primary: var(--primitive-white-alpha-1000);
  --surface-secondary: var(--primitive-gray-50);
  --surface-tertiary: var(--primitive-gray-100);
  --surface-caution: var(--primitive-sun-800);
  --surface-caution-light: var(--primitive-sun-50);
  --surface-accent-primary: var(--primitive-orange-700);
  --surface-accent-primary-light: var(--primitive-orange-50);
  --surface-success: var(--primitive-forest-600);
  --surface-warning: var(--primitive-wood-50);
  --surface-info: var(--primitive-sea-600);
  --surface-info-light: var(--primitive-sea-50);

  /* Text */
  --text-high-emphasis: var(--primitive-gray-900);
  --text-medium-emphasis: var(--primitive-gray-700);
  --text-low-emphasis: var(--primitive-gray-600);
  --text-disable: var(--primitive-gray-400);
  --text-accent-primary: var(--brand-cake-orange);
  --text-accent-secondary: var(--primitive-orange-200);
  --text-on-inverse: var(--primitive-white-alpha-1000);
  --text-success: var(--primitive-forest-600);
  --text-caution: var(--primitive-sun-800);
  --text-warning: var(--primitive-wood-800);
  --text-info: var(--primitive-sea-600);

  /* Object */
  --object-favorite: var(--brand-cake-orange);
  --object-accent-primary: var(--brand-cake-orange);
  --object-accent-primary-light: var(--brand-cake-orange-ultra-light);
  --object-high-emphasis: var(--primitive-gray-900);
  --object-medium-emphasis: var(--primitive-gray-700);
  --object-low-emphasis: var(--primitive-gray-600);
  --object-disable: var(--primitive-gray-400);
  --object-high-emphasis-on-inverse: var(--primitive-white-alpha-1000);
  --object-caution: var(--primitive-sun-800);
  --object-warning: var(--primitive-wood-800);
  --object-success: var(--primitive-forest-600);
  --object-info: var(--primitive-sea-600);

  /* Hover / Active */
  --hover-primary-button: var(--primitive-orange-800);
  --hover-secondary-button: var(--primitive-orange-100);
  --hover-tertiary-button: var(--primitive-gray-200);
  --hover-text-button: var(--primitive-gray-200);
  --hover-caution-button: var(--primitive-sun-100);
  --active-primary-button: var(--primitive-orange-800);
  --active-secondary-button: var(--primitive-orange-100);
  --active-tertiary-button: var(--primitive-gray-200);
  --active-text-button: var(--primitive-gray-100);
  --active-caution-button: var(--primitive-sun-100);

  /* Border */
  --border-high-emphasis: var(--primitive-gray-700);
  --border-medium-emphasis: var(--primitive-gray-300);
  --border-low-emphasis: var(--primitive-gray-50);
  --border-accent-primary: var(--brand-cake-orange);
  --border-favorite: var(--brand-cake-orange);
  --border-caution: var(--surface-caution);
  --border-info: var(--primitive-sea-600);

  /* Brand */
  --brand-cake-orange: var(--primitive-orange-700);
  --brand-cake-orange-light: var(--primitive-orange-100);
  --brand-cake-orange-ultra-light: var(--primitive-orange-50);

  /* Overlay */
  --overlay-dark: var(--primitive-gray-alpha-800);
  --overlay-medium: var(--primitive-gray-alpha-600);
  --overlay-light: var(--primitive-gray-alpha-200);
  --overlay-scrim: rgba(17, 17, 17, 0.28);          /* モーダル・ドロワーのスクリム */

  /* Glass surfaces（半透明白背景） */
  --surface-glass: var(--primitive-white-alpha-800);         /* rgba(255,255,255,0.8) */
  --surface-glass-soft: rgba(255, 255, 255, 0.76);           /* ドロワーナビ背景 */
  --surface-glass-faint: var(--primitive-white-alpha-700);   /* rgba(255,255,255,0.698≈0.7) */
  --surface-brand-ghost: rgba(255, 236, 217, 0.7);           /* Orange-50 at 70%。閉じるボタン等 */

  /* Border alphas */
  --border-hairline: rgba(28, 26, 26, 0.08);       /* Gray-900 8%。微細ボーダー */
  --border-brand-subtle: rgba(224, 75, 0, 0.16);   /* Brand-Orange 16%。SNSリンクボーダー等 */

  /* Caution / Focus */
  --caution-base: var(--primitive-sun-800);
  --caution-light: var(--primitive-sun-200);
  --caution-ultra-light: var(--primitive-sun-50);
  --focus-high-emphasis: #0C9E66FF;

  /* Third-Party */
  --third-party-youtube: #FF0000FF;
  --third-party-facebook: #1877F2FF;
  --third-party-twitter: #1DA1F2FF;
  --third-party-instagram-pink: #F20076FF;
  --third-party-amazon: #FAD676FF;
  --third-party-line: #06C755FF;
  --third-party-apple: #000000FF;
  --third-party-x: #000000FF;
}

/* ============================================
 * Dark Mode
 * .dark クラスがルートに付いたとき、セマンティックトークン自体を切り替える。
 * Figma Dark.tokens.json と完全一致。
 * ============================================ */
.dark {
  /* Surface */
  --surface-primary: var(--primitive-gray-alpha-900);
  --surface-secondary: var(--primitive-white-alpha-100);
  --surface-tertiary: var(--primitive-white-alpha-200);
  --surface-caution: var(--primitive-sun-800);
  --surface-caution-light: var(--primitive-sun-50);
  --surface-accent-primary: var(--primitive-orange-700);
  --surface-accent-primary-light: #E04B0026; /* Brand-Orange at ~15% alpha — ダーク背景で濁らないよう調整 */
  --surface-success: var(--primitive-forest-600);
  --surface-warning: var(--primitive-wood-50);
  --surface-info: var(--primitive-sea-600);
  --surface-info-light: var(--primitive-sea-50);

  /* Text */
  --text-high-emphasis: var(--primitive-white-alpha-1000);
  --text-medium-emphasis: var(--primitive-white-alpha-800);
  --text-low-emphasis: var(--primitive-white-alpha-600);
  --text-disable: var(--primitive-white-alpha-300);
  --text-accent-primary: var(--primitive-orange-600);
  --text-accent-secondary: var(--primitive-orange-100);
  --text-on-inverse: var(--primitive-white-alpha-1000); /* ブランドカラー背景上で使用するため白を維持 */
  --text-success: var(--primitive-forest-600);
  --text-caution: var(--primitive-sun-400);
  --text-warning: var(--primitive-wood-800);
  --text-info: var(--primitive-sea-400);

  /* Object */
  --object-favorite: var(--primitive-orange-600);
  --object-accent-primary: var(--primitive-orange-600);
  --object-accent-primary-light: var(--brand-cake-orange-ultra-light);
  --object-high-emphasis: var(--primitive-white-alpha-1000);
  --object-medium-emphasis: var(--primitive-white-alpha-800);
  --object-low-emphasis: var(--primitive-white-alpha-600);
  --object-disable: var(--primitive-white-alpha-400);
  --object-high-emphasis-on-inverse: var(--primitive-white-alpha-1000); /* ブランドカラー背景上で使用するため白を維持 */
  --object-caution: var(--caution-light);
  --object-warning: var(--primitive-wood-800);
  --object-success: var(--primitive-forest-600);
  --object-info: var(--primitive-sea-400);

  /* Hover / Active */
  --hover-primary-button: var(--primitive-orange-800);
  --hover-secondary-button: var(--primitive-white-alpha-100);
  --hover-tertiary-button: var(--primitive-white-alpha-50);
  --hover-text-button: var(--primitive-white-alpha-200);
  --hover-caution-button: var(--primitive-sun-50);
  --active-primary-button: var(--primitive-orange-800);
  --active-secondary-button: var(--primitive-white-alpha-100);
  --active-tertiary-button: var(--primitive-white-alpha-50);
  --active-text-button: var(--primitive-white-alpha-100);
  --active-caution-button: var(--primitive-sun-50);

  /* Border */
  --border-high-emphasis: var(--primitive-white-alpha-500);
  --border-medium-emphasis: var(--primitive-white-alpha-200);
  --border-low-emphasis: var(--primitive-white-alpha-50);
  --border-accent-primary: var(--primitive-orange-600);
  --border-favorite: var(--primitive-orange-600);
  --border-caution: var(--surface-caution);
  --border-info: var(--primitive-sea-400);

  /* Brand（ダークでも同じ） */
  --brand-cake-orange: var(--primitive-orange-700);
  --brand-cake-orange-light: var(--primitive-orange-100);
  --brand-cake-orange-ultra-light: var(--primitive-orange-50);

  /* Overlay（ダークモードでは白系に切替、背景が暗いためグレー系では視認不能） */
  --overlay-dark: var(--primitive-white-alpha-300);
  --overlay-medium: var(--primitive-white-alpha-200);
  --overlay-light: var(--primitive-white-alpha-100);
  --overlay-scrim: rgba(0, 0, 0, 0.48);

  /* Glass surfaces */
  --surface-glass: var(--primitive-white-alpha-100);
  --surface-glass-soft: var(--primitive-white-alpha-100);
  --surface-glass-faint: var(--primitive-white-alpha-50);
  --surface-brand-ghost: rgba(224, 75, 0, 0.12);

  /* Border alphas */
  --border-hairline: var(--primitive-white-alpha-100);
  --border-brand-subtle: rgba(224, 75, 0, 0.24);

  /* Third-Party（ダークでも同じ） */
}


/**
 * tokens.css ── 自動生成ファイル（直接編集しないこと）
 *
 * @cakejp/design-system v0.3.5 の tokens.json から生成。
 * ds-tokens.css に無いスケール（typography / spacing / radius / shadow / touchTarget）だけを持つ。
 * 色は ds-tokens.css の --primitive-* を使うこと（このファイルは色を持たない）。
 *
 * 再生成: node scripts/gen-tokens.mjs
 * 追従  : npm update @cakejp/design-system && node scripts/gen-tokens.mjs
 */
:root {

  /* ===== Typography ===== */
  --font-size-heading-3xl: 28px;
  --line-height-heading-3xl: 1.5;
  --letter-spacing-heading-3xl: 0.04em;
  --font-weight-heading-3xl: 700;
  --font-size-heading-2xl: 24px;
  --line-height-heading-2xl: 1.5;
  --letter-spacing-heading-2xl: 0.04em;
  --font-weight-heading-2xl: 700;
  --font-size-heading-xl: 21px;
  --line-height-heading-xl: 1.5;
  --letter-spacing-heading-xl: 0.04em;
  --font-weight-heading-xl: 700;
  --font-size-heading-lg: 18px;
  --line-height-heading-lg: 1.5;
  --letter-spacing-heading-lg: 0.04em;
  --font-weight-heading-lg: 700;
  --font-size-heading-md: 16px;
  --line-height-heading-md: 1.5;
  --letter-spacing-heading-md: 0.04em;
  --font-weight-heading-md: 700;
  --font-size-heading-sm: 14px;
  --line-height-heading-sm: 1.5;
  --letter-spacing-heading-sm: 0.04em;
  --font-weight-heading-sm: 700;
  --font-size-body-lg: 16px;
  --line-height-body-lg: 1.75;
  --font-weight-body-lg: 400;
  --font-size-body-md: 14px;
  --line-height-body-md: 1.75;
  --font-weight-body-md: 400;
  --font-size-body-sm: 12px;
  --line-height-body-sm: 1.5;
  --font-weight-body-sm: 400;
  --font-size-body-xs: 10px;
  --line-height-body-xs: 1.5;
  --font-weight-body-xs: 400;
  --font-size-label-lg: 16px;
  --line-height-label-lg: 1.5;
  --letter-spacing-label-lg: 0.04em;
  --font-weight-label-lg: 700;
  --font-size-label-md: 14px;
  --line-height-label-md: 1.5;
  --letter-spacing-label-md: 0.04em;
  --font-weight-label-md: 700;
  --font-size-label-sm: 12px;
  --line-height-label-sm: 1.5;
  --font-weight-label-sm: 500;
  --font-size-label-xs: 10px;
  --line-height-label-xs: 1.5;
  --font-weight-label-xs: 500;

  /* ===== Spacing ===== */
  --spacing-base: 4px;
  --spacing-grid: 8px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;

  /* ===== Radius ===== */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* ===== Shadow ===== */
  --shadow-md: 0 2px 6px 0 rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px 0 rgba(0,0,0,0.12);
  --shadow-menu: 0 4px 16px 0 rgba(0,0,0,0.12);
  --shadow-tooltip: 0 2px 8px 0 rgba(0,0,0,0.16);
  --shadow-dialog: 0 8px 24px 0 rgba(0,0,0,0.16);
  --shadow-modal: 0 16px 48px 0 rgba(0,0,0,0.24);

  /* ===== Touch targets ===== */
  --touch-button-cta-min: 40px;
  --touch-button-cta-rec: 48px;
  --touch-icon-button-min: 40px;
  --touch-icon-button-rec: 44px;
  --touch-text-input-min: 44px;
  --touch-text-input-rec: 48px;
  --touch-chip-min: 32px;
  --touch-chip-rec: 36px;
  --touch-dropdown-item-min: 36px;
  --touch-dropdown-item-rec: 40px;
  --touch-nav-item-min: 44px;
  --touch-nav-item-rec: 48px;
}

/**
 * tokens-magazine.css ── マガジン固有トークン（手書き・薄い拡張レイヤー）
 *
 * cake-ds（@cakejp/design-system）に存在しないが、マガジンの UI で必要な値だけをここに置く。
 * ds-tokens.css（色）／ tokens.css（スケール・自動生成）の後に読み込む前提。
 * cake-ds に取り込まれた値が出てきたら、このファイルから削って tokens.json 側へ寄せること。
 */
:root {
  /* 角丸ピル（チップ・タグ）。cake-ds の radius スケールには無い。 */
  --radius-pill: 9999px;
}

@charset "UTF-8";
/* ======================================================================
 common style index
・reset
・setting
・mixin
・base
・sprite
・utility
・component
・layout
・z-index
====================================================================== */
@font-face {
  font-family: 'icomoon';
  /* START: cake.jpのソースからパス部分を変更
   *
   * magは、ローカルと本番でルートパスが異なるので、相対パスに変更
   */
  src: url("../fonts/cakejp/icomoon.woff2") format("woff2");
  /* END: cake.jpのソースからパス部分を変更 */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ouline-close:before {
  content: "\e949";
}

.icon-outline-book:before {
  content: "\e94a";
}

.icon-outline-bookmark:before {
  content: "\e94b";
}

.icon-outline-home:before {
  content: "\e94c";
}

.icon-outline-medalstar:before {
  content: "\e94d";
}

.icon-outline-minus:before {
  content: "\e94e";
}

.icon-outline-plus:before {
  content: "\e94f";
}

.icon-bold-close:before {
  content: "\e96d";
}

.icon-bold-book:before {
  content: "\e96b";
}

.icon-bold-bookmark:before {
  content: "\e96c";
}

.icon-bold-home:before {
  content: "\e96e";
}

.icon-bold-medalstar:before {
  content: "\e96f";
}

.icon-face_01:before {
  content: "\e944";
}

.icon-face_02:before {
  content: "\e945";
}

.icon-face_03:before {
  content: "\e946";
}

.icon-face_04:before {
  content: "\e947";
}

.icon-face_05:before {
  content: "\e948";
}

.icon-shop:before {
  content: "\e943";
}

.icon-outside:before {
  content: "\e942";
}

.icon-edit:before {
  content: "\e918";
}

.icon-card:before {
  content: "\e936";
}

.icon-chat:before {
  content: "\e937";
}

.icon-like:before {
  content: "\e938";
}

.icon-logout:before {
  content: "\e939";
}

.icon-medalstar:before {
  content: "\e93a";
}

.icon-setting:before {
  content: "\e93b";
}

.icon-star:before {
  content: "\e93c";
}

.icon-ticket-star:before {
  content: "\e93d";
}

.icon-ticket:before {
  content: "\e93e";
}

.icon-user3:before {
  content: "\e93f";
}

.icon-wallet:before {
  content: "\e940";
}

.icon-work:before {
  content: "\e941";
}

.icon-bag:before {
  content: "\e900";
}

.icon-user:before {
  content: "\e901";
}

.icon-search:before {
  content: "\e902";
}

.icon-sparkle:before {
  content: "\e903";
}

.icon-arrow_right:before {
  content: "\e904";
}

.icon-arrow_down:before {
  content: "\e905";
}

.icon-facebook:before {
  content: "\e906";
}

.icon-instagram:before {
  content: "\e907";
}

.icon-line:before {
  content: "\e908";
}

.icon-twitter:before {
  content: "\e909";
}

.icon-time:before {
  content: "\e90a";
}

.icon-cake:before {
  content: "\e90b";
}

.icon-sweets:before {
  content: "\e90c";
}

.icon-arrow:before {
  content: "\e90d";
}

.icon-check:before {
  content: "\e90e";
}

.icon-comment:before {
  content: "\e90f";
}

.icon-socialgift:before {
  content: "\e910";
}

.icon-crown:before {
  content: "\e911";
}

.icon-good:before {
  content: "\e912";
}

.icon-heart:before {
  content: "\e913";
}

.icon-minus:before {
  content: "\e914";
}

.icon-plus:before {
  content: "\e915";
}

.icon-search1:before {
  content: "\e916";
}

.icon-share:before {
  content: "\e917";
}

.icon-user1:before {
  content: "\e919";
}

.icon-sparkle-ghost:before {
  content: "\e91a";
}

.icon-heart-fill:before {
  content: "\e91b";
}

.icon-search-zoom:before {
  content: "\e91c";
}

.icon-filter:before {
  content: "\e91d";
}

.icon-yen:before {
  content: "\e91e";
}

.icon-clock:before {
  content: "\e91f";
}

.icon-home:before {
  content: "\e920";
}

.icon-gift:before {
  content: "\e921";
}

.icon-birthdaycake:before {
  content: "\e922";
}

.icon-collabo:before {
  content: "\e923";
}

.icon-donuts:before {
  content: "\e924";
}

.icon-giftbag:before {
  content: "\e925";
}

.icon-kids:before {
  content: "\e926";
}

.icon-sparkle_half:before {
  content: "\e927";
}

.icon-cart:before {
  content: "\e928";
}

.icon-calendar-week:before {
  content: "\e929";
}

.icon-heart-r:before {
  content: "\e92a";
}

.icon-heart-r-fill:before {
  content: "\e92b";
}

.icon-checkbox_off:before {
  content: "\e92c";
}

.icon-checkbox_on:before {
  content: "\e92d";
}

.icon-radio_off:before {
  content: "\e92e";
}

.icon-radio_on:before {
  content: "\e92f";
}

.icon-line-hamburger:before {
  content: "\e930";
}

.icon-heart-line:before {
  content: "\e931";
}

.icon-notification-line:before {
  content: "\e932";
}

.icon-profile-line:before {
  content: "\e933";
}

.icon-cart-line:before {
  content: "\e934";
}

.icon-search-line:before {
  content: "\e935";
}

@font-face {
  font-family: 'iconsax';
 /* START: cake.jpのソースからパス部分を変更
*
* magは、ローカルと本番でルートパスが異なるので、相対パスに変更
*/
  src: url("../fonts/cakejp/iconsax.woff2") format("woff2");
  /* END: cake.jpのソースからパス部分を変更 */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.isax {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconsax' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.isax-notification:before {
  content: "\eb55";
}

.isax-notification5:before {
  content: "\534";
}

.isax-arrow-left-3:before {
  content: "\e932";
}

.isax-arrow-right-3:before {
  content: "\e936";
}

/**
 * デザイントークン（レガシー補完のみ）
 *
 * カラーのセマンティック/プリミティブトークンは assets/css/ds-tokens.css
 * （@cakejp/design-system 由来・自動生成）が唯一の定義元。css.php で
 * style.css より先に読み込まれる。ここに ds-tokens.css と同名のトークンを
 * 定義しないこと（style.css が後勝ちして値を上書きしてしまう）。
 *
 * このファイルに残すのは ds-tokens.css に存在しないものだけ:
 * - 旧命名の黒/白アルファ系プリミティブ（--primitive-black-* / --primitive-white-*。
 *   ds-tokens 側の新命名は --primitive-gray-alpha-* / --primitive-white-alpha-*）
 * - Spacing / Radius と数値プリミティブ
 */
:root {
  /* Collection: Color（レガシー命名の黒/白アルファのみ） */
  --primitive-black-50: rgba(0, 0, 0, 0.05);
  --primitive-black-100: rgba(0, 0, 0, 0.1);
  --primitive-black-200: rgba(0, 0, 0, 0.2);
  --primitive-black-300: rgba(0, 0, 0, 0.3);
  --primitive-black-400: rgba(0, 0, 0, 0.4);
  --primitive-black-500: rgba(0, 0, 0, 0.5);
  --primitive-black-600: rgba(0, 0, 0, 0.6);
  --primitive-black-700: rgba(0, 0, 0, 0.7);
  --primitive-black-800: rgba(0, 0, 0, 0.8);
  --primitive-black-900: rgba(0, 0, 0, 0.9);
  --primitive-black-1000: #000;
  --primitive-white-50: rgba(255, 255, 255, 0.05);
  --primitive-white-100: rgba(255, 255, 255, 0.1);
  --primitive-white-200: rgba(255, 255, 255, 0.2);
  --primitive-white-300: rgba(255, 255, 255, 0.3);
  --primitive-white-400: rgba(255, 255, 255, 0.4);
  --primitive-white-500: rgba(255, 255, 255, 0.5);
  --primitive-white-600: rgba(255, 255, 255, 0.6);
  --primitive-white-700: rgba(255, 255, 255, 0.7);
  --primitive-white-800: rgba(255, 255, 255, 0.8);
  --primitive-white-900: rgba(255, 255, 255, 0.9);
  --primitive-white-1000: #fff;
  /* Collection: Padding,Radius */
  --spacing-none: var(--primitive-0);
  --spacing-sm-half: var(--primitive-4);
  --spacing-sm: var(--primitive-8);
  --spacing-md: var(--primitive-16);
  --spacing-lg: var(--primitive-24);
  --spacing-xl: var(--primitive-32);
  --spacing-xxl: var(--primitive-48);
  --primitive-0: 0px;
  --primitive-4: 4px;
  --primitive-8: 8px;
  --primitive-12: 12px;
  --primitive-16: 16px;
  --primitive-24: 24px;
  --primitive-32: 32px;
  --primitive-40: 40px;
  --primitive-48: 48px;
  --primitive-56: 56px;
  --primitive-64: 64px;
  --primitive-96: 96px;
  --primitive-120: 120px;
}

/* ======================================================================
 reset
====================================================================== */
html {
  overflow-y: scroll;
}

body {
  line-height: 1;
  color: #222;
}

/* html5doctor.com Reset Stylesheet v1.6.1
  Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details,
dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section,
small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:after, blockquote:before, q:after, q:before {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/* YUI 3.4.1 (build 4118) Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License. http://yuilibrary.com/license/ */
/* ======================================================================
 setting
====================================================================== */
/* ======================================================================
 base
====================================================================== */
html {
  font-size: 62.5%;
}

body {
  position: relative;
  background: #fff;
  color: #000;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "hiragino kaku gothic pro", "メイリオ", Meiryo, Verdana, sans-serif;
  -webkit-text-size-adjust: 100%;
  -moz-transition: all 0.4s linear;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
body.js_page_trans {
  opacity: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

.page {
  width: 100%;
  margin: 0 auto;
}

/* border-box */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* h1 - h6 */
h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
}

/* a */
a:link {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
a:visited {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: #000;
  text-decoration: none;
}
a:active {
  color: #000;
  text-decoration: none;
}

a[href^="tel"] {
  color: #000;
}

/* Text Highlight */
/* button */
button {
  display: block;
  outline: none;
  border: none;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
}

/* input */
input, textarea, select {
  display: block;
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  border-image: none;
  background: transparent;
  font-family: inherit;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
}
input::-ms-expand, textarea::-ms-expand, select::-ms-expand {
  display: none;
}

textarea {
  resize: vertical;
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

/* placeholder */
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

/* ======================================================================
 sprite
====================================================================== */
/* =================================
 hoge
================================= */
/* =================================
 hoge
================================= */
/* =================================
 hoge
================================= */
/* ======================================================================
 utility
====================================================================== */
/* =================================
 layout
================================= */
@media screen and (min-width: 769px) {
  .u_pc {
    display: block;
  }

  .u_sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .u_pc {
    display: none;
  }

  .u_sp {
    display: block;
  }
}
/* =================================
 margin
================================= */
.u-mt2 {
  margin-top: 2px;
}

.u-mt4 {
  margin-top: 4px;
}

.u-mt8 {
  margin-top: 8px;
}

.u-mt16 {
  margin-top: 16px;
}

.u-mt20 {
  margin-top: 20px;
}

.u-mt24 {
  margin-top: 24px;
}

.u-mt32 {
  margin-top: 32px;
}

.u-mb2 {
  margin-bottom: 2px;
}

.u-mb4 {
  margin-bottom: 4px;
}

.u-mb8 {
  margin-bottom: 8px;
}

.u-mb16 {
  margin-bottom: 16px;
}

.u-mb20 {
  margin-bottom: 20px;
}

.u-mb24 {
  margin-bottom: 24px;
}

.u-mb32 {
  margin-bottom: 32px;
}

/* =================================
 text pt
================================= */
.u_txt_1 {
  font-size: 1em;
  line-height: 1;
  letter-spacing: .1em;
}

.u_txt_2 {
  font-size: 1em;
  line-height: 1;
  letter-spacing: .1em;
}

.u_txt_3 {
  font-size: 1em;
  line-height: 1;
  letter-spacing: .1em;
}

.u_txt_4 {
  font-size: 1em;
  line-height: 1;
  letter-spacing: .1em;
}

.u_txt_5 {
  font-size: 1em;
  line-height: 1;
  letter-spacing: .1em;
}

.u_txt_6 {
  font-size: 1em;
  line-height: 1;
  letter-spacing: .1em;
}

@media screen and (max-width: 767px) {
  .sp_none {
    display: none !important;
  }
}

/* ======================================================================
 component
====================================================================== */
/* =================================
 section
================================= */
.c_section._insta {
  display: block;
  padding: 32px 0;
}
.c_section._insta .tmp {
  display: block;
  margin: 0 auto 2rem;
}
.c_section._insta .tmp img {
  display: block;
  margin: auto;
}
.c_section._insta .insta_wrap {
  max-width: 76rem;
  margin: 0 auto 1rem;
}
.c_section._insta #sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item {
  width: calc(100% / 3 - 1rem);
  margin: 0 .5rem 1rem !important;
}
@media screen and (min-width: 769px) {
  .c_section._insta #sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item {
    width: calc(100% / 4 - 2rem);
    margin: 0 1rem 2rem !important;
  }
  .c_section._insta #sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item:last-child {
    display: none;
  }
}
.c_section._cv {
  background: #EF9E91;
  padding: 3rem 1.8rem;
}
.c_section._cv.__in-post {
  padding: 2rem 0;
  margin: 0 0 2rem;
}
@media screen and (min-width: 769px) {
  .c_section._cv.__in-post {
    padding: 3rem 0;
    margin: 0 0 3rem;
  }
}
.c_section._cv > .inner {
  padding: .3rem;
  margin: auto;
  max-width: 40rem;
  background: #fff;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 769px) {
  .c_section._cv > .inner {
    max-width: 60rem;
  }
}

/* =================================
 title
================================= */
.c_ttl._first {
  position: relative;
  color: #fff;
  height: 24.5rem;
}
@media screen and (min-width: 769px) {
  .c_ttl._first {
    height: 43.5rem;
  }
}
.c_ttl._first:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(131, 131, 131, 0.3) 50%, rgba(0, 0, 0, 0.5) 100%);
}
.c_ttl._first .info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 10;
  padding: 1.5rem;
}
.c_ttl._first .title {
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.6;
}
.c_ttl._first img {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
}
.c_ttl._second {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 0 0 2rem;
  text-align: center;
  font-weight: bold;
  font-size: 2.4rem;
}
@media screen and (min-width: 769px) {
  .c_ttl._second {
    margin: 0 0 3rem;
    padding: 0 0 2rem;
  }
}
.c_ttl._second:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  display: block;
  width: 4rem;
  height: 1px;
  margin: auto;
  background: #222;
}
.c_ttl._second.__archive {
  padding: 5rem 0 2rem;
}
.c_ttl._second.__coupon {
  position: relative;
  font-size: 1.8rem;
  line-height: 1.6;
}
@media screen and (min-width: 769px) {
  .c_ttl._second.__coupon {
    margin: 0;
    padding: 0;
    font-size: 2.2rem;
    text-align: left;
    letter-spacing: .3rem;
  }
}
.c_ttl._second.__coupon:before {
  position: absolute;
  top: -.2rem;
  left: .8rem;
  content: '';
  display: block;
  width: 7rem;
  height: 2rem;
  background: url("../img/txt-coupon.svg") top left no-repeat;
  background-size: contain;
  transform: rotate(-20deg);
}
@media screen and (min-width: 769px) {
  .c_ttl._second.__coupon:before {
    top: -3rem;
    left: -4rem;
    width: 10rem;
    height: 2.8rem;
  }
}
@media screen and (min-width: 769px) {
  .c_ttl._second.__coupon:after {
    position: absolute;
    top: 0;
    bottom: auto;
    left: auto;
    right: -3rem;
    width: 1px;
    height: 100%;
  }
}
.c_ttl._second.__coupon .text {
  display: none;
}
@media screen and (min-width: 769px) {
  .c_ttl._second.__coupon .text {
    display: block;
    margin: 1rem 0 0;
    font-weight: normal;
    font-size: 1.4rem;
  }
}

.c_ttl._third {
  position: relative;
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
}

/* =================================
 boxes
================================= */
.c_box._related {
  background: #F5F5F5;
  margin: 3rem 0 0;
  padding: 0 0 3rem;
}
@media screen and (min-width: 769px) {
  .c_box._related {
    margin: 3rem 3rem 0;
    padding: 0 3rem 3rem;
  }
}
.c_box._recommend {
  margin: 3rem 0 0;
  padding: 0 1.5rem;
}
@media screen and (min-width: 769px) {
  .c_box._recommend {
    margin: 3rem 3rem 0;
    padding: 0;
  }
}
.c_box._recommend.__in-post {
  margin: 0 0 2rem;
  padding: 0;
}
@media screen and (min-width: 769px) {
  .c_box._recommend.__in-post {
    margin: 0 0 3rem;
    padding: 0;
  }
}
.c_box._recommend .title {
  margin: 0 0 2rem;
}
.c_box._recommend a {
  display: flex;
  align-items: center;
  border: 1px solid #222;
  color: #222;
  text-decoration: none;
}
.c_box._recommend a img {
  width: 9rem;
  height: 9rem;
}
@media screen and (min-width: 769px) {
  .c_box._recommend a img {
    width: 12rem;
    height: 12rem;
  }
}
.c_box._recommend a .post_title {
  padding: 1.5rem;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.4;
}
@media screen and (min-width: 769px) {
  .c_box._recommend a .post_title {
    padding: 3rem;
    font-size: 1.6rem;
  }
}
.c_box._cv {
  padding: 2rem;
  border: 1px solid #EF9E91;
}
@media screen and (min-width: 769px) {
  .c_box._cv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6rem 6.4rem 5rem;
  }
}
.c_box._cv img {
  width: 11rem;
}
@media screen and (min-width: 769px) {
  .c_box._cv.__in-post {
    padding: 5rem 6.4rem 4rem;
  }
}
@media screen and (min-width: 769px) {
  .c_box._cv.__in-post .message {
    width: 30rem;
  }
}
.c_box._recommend-top {
  border-bottom: 1px solid #777;
}
.c_box._recommend-top img {
  max-width: 100%;
  height: auto;
  display: block;
}
.c_box._recommend-top .inner {
  padding: 1.5rem;
}
.c_box._recommend-top .data {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.c_box._recommend-top .date {
  font-size: 1.2rem;
  color: #777;
}
.c_box._recommend-top .title {
  font-size: 1.8rem;
  line-height: 1.5;
}
.c_box._recommend-top.__404 {
  padding: 1.5rem;
  border: 1px solid #222;
  margin: 1.5rem;
}
@media screen and (min-width: 769px) {
  .c_box._recommend-top.__404 {
    margin: 0 3rem;
    padding: 3rem;
  }
}

/* =================================
 buttons
================================= */
.c_btn_wrap._center {
  text-align: center;
}
.c_btn_wrap._center.__cv {
  margin: 3rem 0 0;
}
.c_btn_wrap._center.__back {
  margin: 3rem 0;
}
@media screen and (min-width: 769px) {
  .c_btn_wrap._center.__back {
    margin: 0;
    padding: 3rem 0;
  }
}

.c_btn._multiple {
  margin: 1.5rem auto 0;
}
.c_btn._multiple:first-child {
  margin: 0 auto 0;
}
@media screen and (min-width: 769px) {
  .c_btn._multiple {
    margin: 0 1.5rem 0;
  }
  .c_btn._multiple:first-child {
    margin: 0 1.5rem 0;
  }
}
.c_btn._reg {
  position: relative;
  display: inline-block;
  padding: 1.5rem 0;
  width: 28rem;
  border: 1px solid #222;
  border-radius: 1rem;
  background: #fff;
  font-size: 1.4rem;
  text-decoration: none;
}
.c_btn._reg.__home:before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 1rem 0 0;
  background: url("../img/home.svg") center center no-repeat;
  background-size: cover;
  vertical-align: text-bottom;
}
.c_btn._reg.__back:before {
  position: absolute;
  top: 0;
  bottom: 0;
  content: '';
  display: block;
  margin: auto;
  width: .6rem;
  height: 1rem;
  left: 1.5rem;
  background: url(../img/icon-arrow-prev.svg) center center no-repeat;
  background-size: contain;
}
.c_btn._reg.__insta:before {
  content: '';
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  margin: 0 1rem 0 0;
  background: url("../img/icon-insta-black.svg") center center no-repeat;
  background-size: cover;
  vertical-align: middle;
}
.c_btn._filled {
  display: inline-block;
  padding: 1.5rem 0;
  width: 28rem;
  border-radius: 1rem;
  background: #222;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: bold;
}
.c_btn._filled.__internal {
  position: relative;
}
.c_btn._filled.__internal:after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.5rem;
  content: '';
  display: block;
  margin: auto;
  width: .65rem;
  height: 1.2rem;
  background: url("../img/icon-arrow-next-white.svg") center center no-repeat;
  background: contain;
  vertical-align: middle;
}
.c_btn._filled.__primary {
  background: #E36450;
}
.c_btn._filled.__line {
  padding: .8rem 0;
  width: 20rem;
  border: none;
  background: #00B900;
  font-weight: bold;
  font-size: 1.5rem;
  color: #fff;
}
.c_btn._filled.__line:before {
  content: '';
  display: inline-block;
  width: 2.9rem;
  height: 2.9rem;
  margin: 0 1rem 0 0;
  background: url("../img/icon-line.svg") center center no-repeat;
  background: contain;
  vertical-align: middle;
}
.c_btn._filled.__twitter {
  position: relative;
  padding: 1.5rem 0 1.5rem 1rem;
  margin: 0 2rem 0 0;
  width: 16rem;
  height: 4.4rem;
  background: #1DA1F2;
  font-weight: bold;
  font-size: 1.4rem;
  color: #fff;
  border-radius: .8rem;
}
@media screen and (min-width: 769px) {
  .c_btn._filled.__twitter {
    width: 18rem;
  }
}
.c_btn._filled.__twitter:before {
  position: absolute;
  top: 0;
  left: 1rem;
  bottom: 0;
  content: '';
  display: block;
  content: '';
  margin: auto;
  width: 2.9rem;
  height: 2.5rem;
  background: url("../img/icon-twitter-white.svg") center center no-repeat;
  background: contain;
}
@media screen and (min-width: 769px) {
  .c_btn._filled.__twitter:before {
    left: 1.5rem;
  }
}
.c_btn._filled.__copy {
  position: relative;
  padding: 1.5rem 0 1.5rem 1rem;
  width: 16rem;
  font-weight: bold;
  font-size: 1.4rem;
  color: #fff;
  border-radius: .8rem;
}
@media screen and (min-width: 769px) {
  .c_btn._filled.__copy {
    width: 18rem;
  }
}
.c_btn._filled.__copy:before {
  position: absolute;
  top: 0;
  left: 1.5rem;
  bottom: 0;
  content: '';
  display: block;
  margin: auto;
  width: 1.5rem;
  height: 1.9rem;
  background: url("../img/icon-copy.svg") center center no-repeat;
  background: contain;
}
@media screen and (min-width: 769px) {
  .c_btn._filled.__copy:before {
    left: 2rem;
  }
}

/* =================================
 icon
================================= */
.c_icon {
  display: inline-block;
  margin: 0 .5rem 0 0;
  vertical-align: text-bottom;
}
.c_icon._star:before {
  content: '';
  display: block;
  width: 2rem;
  height: 2rem;
  background: url("../img/icon-star.svg") top left no-repeat;
  background-size: cover;
}
.c_icon._star-half:before {
  content: '';
  display: block;
  width: 2rem;
  height: 2rem;
  background: url("../img/icon-star-half.svg") top left no-repeat;
  background-size: cover;
}
.c_icon._star-o:before {
  content: '';
  display: block;
  width: 2rem;
  height: 2rem;
  background: url("../img/icon-star-o.svg") top left no-repeat;
  background-size: cover;
}

.rating-number {
  font-size: 1.8rem;
  font-weight: bold;
}

/* =================================
 alerts
================================= */
/* =================================
 list
================================= */
.c_list._post li:after {
  content: '';
  display: block;
  width: 100%;
  height: 0.1rem;
  background: url(../img/dotted_path_l.svg) left top repeat-x;
}
.c_list._post li a {
  display: flex;
  padding: 1.5rem 1.5rem;
}
@media screen and (min-width: 769px) {
  .c_list._post li a {
    padding: 3rem 2rem;
  }
}
.c_list._post li a img {
  width: 9rem;
  height: 9rem;
}
@media screen and (min-width: 769px) {
  .c_list._post li a img {
    width: 10rem;
    height: 10rem;
  }
}
.c_list._post li a .content {
  position: relative;
  margin: 0 0 0 1.5rem;
  width: 100%;
}
.c_list._post li a .content .title {
  font-size: 1.4rem;
  font-weight: normal;
}
@media screen and (min-width: 769px) {
  .c_list._post li a .content .title {
    font-size: 1.6rem;
  }
}
.c_list._post li a .content .date {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 1.2rem;
  color: #777;
}
.c_list._post.__archive li:first-child:before {
  content: '';
  display: block;
  width: 100%;
  height: 0.1rem;
  background: url(../img/dotted_path_l.svg) left top repeat-x;
}
@media screen and (min-width: 769px) {
  .c_list._post.__related li a {
    padding: 3rem 0;
  }
}
.c_list._simple li {
  margin: 0 0 2rem;
}
.c_list._simple li:last-child {
  margin: 0;
}
.c_list._icons {
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
}
.c_list._icons.__menu {
  margin: 0 0 0 2rem;
}
.c_list._icons.__footer {
  margin: 2rem 0 0;
}
.c_list._icons li {
  margin: 0 0 0 1rem;
}
.c_list._icons li:first-child {
  margin: 0;
}
.c_list._icons li a {
  display: block;
  margin: 0;
}

/* =================================
 category / tag 
================================= */
.c_cat {
  display: inline-block;
  font-size: 1.2rem;
  margin: 0 0 1rem;
  padding: .5rem 1rem;
  line-height: 1;
  border-radius: 0 1rem 0 0;
}
.c_cat._area {
  color: #fff;
  background: #798EC6;
}
.c_cat._anniversary {
  color: #fff;
  background: #CC836E;
}
.c_cat._birthday {
  color: #fff;
  background: #FFB500;
}
.c_cat._christmas {
  color: #fff;
  background: #FF7C73;
}
.c_cat._topical-sweets {
  color: #fff;
  background: #FF7C73;
}
.c_cat._cake-review {
  color: #fff;
  background: #FFA067;
}
.c_cat._event {
  color: #fff;
  background: #405282;
}
.c_cat._recommend {
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  background: #E36450;
}
.c_cat._other {
  font-size: 1.2rem;
  color: #000;
  border: 1px solid #000;
}
.c_cat._ghost {
  font-size: 1.2rem;
  color: #fff;
  border: 1px solid #fff;
}

.c_tags {
  margin: 0;
}
.c_tags a {
  display: inline-block;
  margin: 0 1.5rem 0 0;
  font-size: 1.4rem;
}
.c_tags a:before {
  content: '#';
}

/* =================================
 link
================================= */
.c_link {
  position: relative;
}
.c_link._txt {
  text-decoration: underline;
}
.c_link._txt.__white {
  color: #fff;
}
.c_link._txt.__white.__external:after {
  content: '';
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 0 0 .5rem;
  background: url(../img/icon-external-white.svg) center center no-repeat;
  background: cover;
  vertical-align: middle;
}

/* =================================
 pagination
================================= */
.c_pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 1.5rem;
}
.c_pagination a {
  position: relative;
  padding: 1rem 0;
  width: 11rem;
  border: 1px solid #222;
  border-radius: 1rem;
  font-size: 1.4rem;
  line-height: 1;
  text-align: center;
}
.c_pagination a:before {
  position: absolute;
  top: 0;
  bottom: 0;
  content: '';
  display: block;
  margin: auto;
  width: .6rem;
  height: 1rem;
}
.c_pagination a.prev:before {
  left: 1.5rem;
  background: url(../img/icon-arrow-prev.svg) center center no-repeat;
  background-size: contain;
}
.c_pagination a.next:before {
  right: 1.5rem;
  background: url(../img/icon-arrow-next.svg) center center no-repeat;
  background-size: contain;
}
.c_pagination span {
  position: relative;
  padding: 1rem 0;
  width: 11rem;
  border: 1px solid #ddd;
  border-radius: 1rem;
  font-size: 1.4rem;
  line-height: 1;
  text-align: center;
  color: #ddd;
}
.c_pagination span:before {
  position: absolute;
  top: 0;
  bottom: 0;
  content: '';
  display: block;
  margin: auto;
  width: .6rem;
  height: 1rem;
}
.c_pagination span.prev:before {
  left: 1.5rem;
  background: url(../img/icon-arrow-prev-inactive.svg) center center no-repeat;
  background-size: contain;
}
.c_pagination span.next:before {
  right: 1.5rem;
  background: url(../img/icon-arrow-next-inactive.svg) center center no-repeat;
  background-size: contain;
}
.c_pagination .num {
  font-size: 1.2rem;
  color: #777;
}

/* =================================
 text
================================= */
.c_txt {
  padding: 0 1.5rem 1.5rem;
  font-size: 1.4rem;
  line-height: 1.7;
}
@media screen and (min-width: 769px) {
  .c_txt {
    padding: 0 3rem 3rem;
    font-size: 1.6rem;
  }
}
.c_txt._center {
  text-align: center;
}
.c_txt._bold {
  font-weight: bold;
}

/* =================================
 post ui
================================= */
.c_post_ui {
  margin: 0 auto;
  max-width: 744px;
  padding: 8px 24px;
  font-size: 1.4rem;
  line-height: 1.7;
}
@media screen and (min-width: 769px) {
  .c_post_ui {
    padding: 24px 32px;
    font-size: 1.6rem;
  }
}
.c_post_ui .date {
  margin: 0 0 2rem;
  text-align: right;
  font-size: 1.2rem;
  color: #777;
}
@media screen and (min-width: 769px) {
  .c_post_ui .date {
    font-size: 1.4rem;
    margin: 0 0 3rem;
  }
}
.c_post_ui h1:not([class]) {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  margin-top: 64px;
  margin-bottom: 24px;
  font-size: 32px;
}
@media screen and (max-width: 767px) {
  .c_post_ui h1:not([class]) {
    margin-top: 64px;
    margin-bottom: 24px;
    font-size: 28px;
  }
}
.c_post_ui h2:not([class]) {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  margin-top: 64px;
  margin-bottom: 16px;
  font-size: 26px;
}
@media screen and (max-width: 767px) {
  .c_post_ui h2:not([class]) {
    margin-top: 48px;
    margin-bottom: 16px;
    font-size: 24px;
  }
}
.c_post_ui h3:not([class]) {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 24px;
  font-size: 22px;
}
@media screen and (max-width: 767px) {
  .c_post_ui h3:not([class]) {
    margin-top: 40px;
    margin-bottom: 16px;
    font-size: 21px;
  }
}
.c_post_ui h4:not([class]) {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 16px;
  font-size: 18px;
}
@media screen and (max-width: 767px) {
  .c_post_ui h4:not([class]) {
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 18px;
  }
}
.c_post_ui h5:not([class]) {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 16px;
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .c_post_ui h5:not([class]) {
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 16px;
  }
}
.c_post_ui .wp-block-buttons {
  text-align: center;
}
.c_post_ui a:not([class]) {
  color: #E04B00;
  text-decoration: underline;
}
.c_post_ui a.wp-block-button__link {
  position: relative;
  display: inline-block;
  padding: 1.5rem;
  min-width: 28rem;
  border: 1px solid #222;
  border-radius: 1rem;
  background: #fff;
  font-size: 1.4rem;
  text-decoration: none;
  color: #222;
  line-height: 1;
}
.c_post_ui a.wp-block-button__link[href*="https://cake.jp/"]:before {
  content: '';
  display: inline-block;
  margin: 0 1rem 0 0;
  width: 1.6rem;
  height: 1.8rem;
  background: url(../img/shop.svg) left top no-repeat;
  vertical-align: bottom;
  background-size: cover;
}
.c_post_ui a[href*="https://goo.gl/maps"] {
  display: inline-block;
  margin: 1rem 0 0;
  min-width: 16rem;
  padding: 1rem 1.5rem;
  border: 1px solid #222;
  border-radius: 1rem;
  color: #222;
  text-align: center;
  text-decoration: none;
  font-size: 1.2rem;
}
.c_post_ui a[href*="https://goo.gl/maps"]:before {
  content: '';
  display: inline-block;
  margin: 0 1rem 0 0;
  width: 1rem;
  height: 1.4rem;
  background: url(../img/icon-map.svg) left top no-repeat;
  vertical-align: text-bottom;
}
.c_post_ui p:not([class]) {
  line-height: 1.75;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 18px;
  margin: 0 0 2rem;
}
@media screen and (max-width: 767px) {
  .c_post_ui p:not([class]) {
    font-size: 16px;
  }
}
@media screen and (min-width: 769px) {
  .c_post_ui p:not([class]) {
    margin: 0 0 3rem;
  }
}
.c_post_ui ul li {
  margin: 0 0 1rem 2rem;
  list-style: disc outside;
}
.c_post_ui ol li {
  margin: 0 0 1rem 2rem;
  list-style: decimal outside;
}
.c_post_ui table {
  width: 100%;
}
.c_post_ui tbody {
  display: block;
}
.c_post_ui tbody tr {
  display: block;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid #222;
  margin: 0 0 1rem;
}
.c_post_ui tbody tr th {
  display: block;
  margin: 1rem 0 .5rem;
  font-weight: bold;
  text-align: left;
}
.c_post_ui tbody tr td {
  display: block;
  text-align: left;
}
.c_post_ui tbody tr td .bold {
  font-weight: normal;
}
.c_post_ui thead {
  width: 100%;
  background: #222;
  color: #fff;
}
.c_post_ui thead th {
  position: relative;
  font-weight: bold;
  text-align: center;
  padding: 1rem 2rem;
}
.c_post_ui thead + tbody {
  display: table-row-group;
  width: 100%;
}
.c_post_ui thead + tbody tr {
  display: table-row;
}
.c_post_ui thead + tbody tr:nth-child(odd) {
  background: #F5F5F5;
}
.c_post_ui thead + tbody tr th {
  display: table-cell;
  text-align: center;
  padding: 1rem 2rem;
}
.c_post_ui thead + tbody tr td {
  display: table-cell;
  text-align: left;
  text-align: center;
  padding: 1rem 2rem;
}
.c_post_ui .scroll_table {
  margin: 0 0 3rem;
  padding: 1.5rem;
  width: 100%;
  overflow: auto;
  border: 1px solid #222;
}
.c_post_ui .scroll_table._cancel {
  padding: 0;
  border: none;
}
.c_post_ui .scroll_table._cancel:before {
  content: none;
}
.c_post_ui .scroll_table:before {
  content: '横スクロールできます';
  display: block;
  padding: 0 0 0 2.5rem;
  margin: 0 0 1rem;
  font-size: 1.2rem;
  color: #777;
  background: url("../img/icon-drag.svg") top left no-repeat;
}
.c_post_ui .scroll_table th, .c_post_ui .scroll_table td {
  white-space: nowrap;
}
.c_post_ui .box7-green {
  position: relative;
  margin: 0 0 3rem;
  padding: 2rem 2rem 2rem;
  background: #F5F5F5;
}
.c_post_ui .box7-green .box-title {
  font-weight: bold;
  margin: 0 0 1.5rem;
}
.c_post_ui .wp-block-group {
  position: relative;
  margin: 0 0 3rem;
  padding: 2rem 2rem 2rem;
  background: #F5F5F5;
}
.c_post_ui .wp-block-group p:last-child {
  margin: 0;
}
.c_post_ui blockquote {
  position: relative;
  margin: 0 0 3rem;
  padding: 3.5rem 2rem 2rem;
  background: #F5F5F5;
}
.c_post_ui blockquote:before {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 0;
  content: '';
  display: block;
  margin: 0 .5rem 0 0;
  width: 3.3rem;
  height: 2.8rem;
  background: url(../img/icon-quote.svg) left top no-repeat;
  vertical-align: text-bottom;
}
.c_post_ui blockquote p {
  position: relative;
  z-index: 1;
}
.c_post_ui blockquote cite {
  display: block;
  color: #777;
  text-align: right;
  font-size: 1.2rem;
  font-style: normal;
}
.c_post_ui blockquote cite a,
.c_post_ui blockquote cite a:not([class]) {
  color: #777;
}
.c_post_ui blockquote cite a:before,
.c_post_ui blockquote cite a:not([class]):before {
  content: "出典：";
}
.c_post_ui blockquote cite a[target="_blank"]:after,
.c_post_ui blockquote cite a:not([class])[target="_blank"]:after {
  content: '';
  display: inline-block;
  margin: 0 0 0 .5rem;
  width: 1.2rem;
  height: 1.2rem;
  background: url(../img/icon-external-small.svg) left top no-repeat;
  vertical-align: text-bottom;
}
.c_post_ui .marker-under, .c_post_ui .bold-red, .c_post_ui .bold, .c_post_ui strong, .c_post_ui b {
  font-weight: bold;
}
.c_post_ui iframe {
  width: 100%;
}
.c_post_ui img {
  width: 100%;
  height: auto;
}
.c_post_ui figcaption {
  font-size: 1.2rem;
  text-align: right;
  color: #777;
}
.c_post_ui figcaption a,
.c_post_ui figcaption a:not([class]) {
  color: #777;
}
.c_post_ui figcaption a[target="_blank"]:after,
.c_post_ui figcaption a:not([class])[target="_blank"]:after {
  content: '';
  display: inline-block;
  margin: 0 0 0 .5rem;
  width: 1.2rem;
  height: 1.2rem;
  background: url(../img/icon-external-small.svg) left top no-repeat;
  vertical-align: text-bottom;
}
.c_post_ui .ez-toc-section {
  scroll-margin-top: 80px;
}
@media screen and (max-width: 767px) {
  .c_post_ui .ez-toc-section {
    scroll-margin-top: 68px;
  }
}
.c_post_ui #ez-toc-container {
  margin: 3rem 0;
  padding: 2.5rem 2rem !important;
  width: 100%;
  border: 1px solid #222 !important;
  border-radius: 0 !important;
}
.c_post_ui #ez-toc-container .ez-toc-title-container .ez-toc-title {
  position: relative;
  display: block;
  margin: 0 0 1.5rem;
  padding: 0 0 1rem;
  font-size: 1.6rem !important;
  font-weight: bold !important;
  color: #222 !important;
}
.c_post_ui #ez-toc-container .ez-toc-title-container .ez-toc-title:before {
  content: '';
  display: inline-block;
  margin: 0 .5rem 0 0;
  width: 1.5rem;
  height: 1.5rem;
  background: url(../img/icon-quater.svg) left top repeat-x;
  vertical-align: text-bottom;
}
.c_post_ui #ez-toc-container .ez-toc-title-container .ez-toc-title:after {
  position: absolute;
  bottom: 0;
  content: '';
  display: block;
  width: 100%;
  height: 0.1rem;
  background: url(../img/dotted_path_l.svg) left top repeat-x;
}
.c_post_ui #ez-toc-container .ez-toc-list li {
  position: relative;
  margin: 1.5rem 0 0;
  padding: 0 0 0 1.5rem;
}
.c_post_ui #ez-toc-container .ez-toc-list li:before {
  top: 1rem;
  left: 0;
  position: absolute;
  content: '';
  width: .5rem;
  height: .2rem;
  background: #222;
}
.c_post_ui #ez-toc-container .ez-toc-list a {
  text-decoration: underline !important;
  font-size: 1.4rem;
  color: #222 !important;
}
.c_post_ui .p-cv-btn-wrap {
  margin: 2rem 0;
  width: 100%;
  border: 1px solid #222;
  border-radius: 0 2rem 0 0;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .c_post_ui .p-cv-btn-wrap {
    display: flex;
    align-items: center;
  }
}
.c_post_ui .p-cv-btn-wrap:before {
  display: block;
  content: '';
  width: 100%;
  height: 20rem;
  background: url("/assets/photos/berry.png") center center no-repeat;
  background-size: cover;
}
@media screen and (min-width: 769px) {
  .c_post_ui .p-cv-btn-wrap:before {
    width: 50%;
  }
}
.c_post_ui .p-cv-btn-wrap .p-cv-btn {
  text-align: center;
  margin: 2rem 0;
}
@media screen and (min-width: 769px) {
  .c_post_ui .p-cv-btn-wrap .p-cv-btn {
    width: 50%;
  }
}
.c_post_ui .p-cv-btn-wrap .p-cv-btn:before {
  display: block;
  content: '';
  margin: 0 auto 2rem;
  width: 16rem;
  height: 3rem;
  background: url(../img/logo-eng-black.svg) top left no-repeat;
  background-size: contain;
}
.c_post_ui .p-cv-btn-wrap .p-cv-btn a {
  position: relative;
  display: inline-block;
  margin: auto;
  padding: 1.5rem 0;
  width: 28rem;
  border-radius: 1rem;
  background: #E36450;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: bold;
}
.c_post_ui .p-cv-btn-wrap .p-cv-btn a:after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.5rem;
  content: '';
  display: block;
  margin: auto;
  width: 1.4rem;
  height: 1.4rem;
  background: url("../img/icon-external-white.svg") center center no-repeat;
  background: contain;
  vertical-align: middle;
}
.c_post_ui .p-cv-btn-wrap .p-cv-btn a br {
  display: none;
}
.c_post_ui .p-cv-btn-wrap ul, .c_post_ui .p-cv-btn-wrap .p-cv-em, .c_post_ui .p-cv-btn-wrap .p-cv-note, .c_post_ui .p-cv-btn-wrap .p-cv-url-wrap {
  display: none;
}
.c_post_ui .wp-embedded-content,
.c_post_ui .wp-block-embed iframe {
  height: 102px;
}

.c-ad-banner {
  text-align: center;
}
.c-ad-banner a {
  display: block;
}

/**
 * c-header-cakejp ── ヘッダー内「Cake.jpへ」導線ボタン
 *
 * マガジンから Cake.jp 本体（EC）へ送客するためのピル型ボタン。
 * header_block--right のアイコン群の手前に配置し、タブレット/PCで表示する。
 * カラーは @cakejp/design-system トークン（var(--...)）を参照（ds-tokens.css 前提）。
 * ※このブリッジは dart-sass で単体コンパイルするため、_color() 等の関数や
 *   media_sp ミックスインは使わず素の CSS / @media で記述する。
 */
.c-header-cakejp {
  /* CSS で描く右向きシェブロン（アイコンフォント非依存） */
}
.c-header-cakejp, .c-header-cakejp:link, .c-header-cakejp:visited {
  /* style.css の古いリセット `a:link { color: #000 }`（詳細度 0,1,1）に
     クラス単体（0,1,0）では負けるため、:link / :visited を併記して (0,2,0) にする。
     ※ a 以外の要素にこのクラスを流用する場合は色が負けるので注意。 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  /* ベタ塗りのブランドオレンジだと主張が強すぎるため淡い塗り＋濃いオレンジ文字にする。
     ヘッダーは補助導線という位置づけ。 */
  background: var(--brand-cake-orange-ultra-light, #ffecd9);
  border: 1px solid var(--brand-cake-orange-light, #ffd4b2);
  color: var(--primitive-orange-900, #a62700);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.c-header-cakejp:hover {
  background: var(--brand-cake-orange-light, #ffd4b2);
  color: var(--primitive-orange-900, #a62700);
}
.c-header-cakejp__label {
  display: inline;
}
.c-header-cakejp__arrow {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* 既存ヘッダーのタブレット範囲（768〜959px）でも右側の占有幅を抑える。
   ベース側が `.c-header-cakejp:link`（0,2,0）で height 等を持つため、
   ここもクラス単体（0,1,0）では負ける。:link / :visited を併記して詳細度を揃える。 */
@media (max-width: 959px) {
  .c-header-cakejp, .c-header-cakejp:link, .c-header-cakejp:visited {
    height: 32px;
    padding: 0 10px;
    font-size: 1.2rem;
    gap: 2px;
  }
}
/* 既存の media_sp（767px以下）ではロゴ・基本アイコンを優先し、
   Cake.jp導線はサイドバーとフッターに委ねる。 */
@media (max-width: 767px) {
  .c-header-cakejp, .c-header-cakejp:link, .c-header-cakejp:visited {
    display: none;
  }
}
/**
 * パンくずのスタイル
 *
 * Yoast SEOのプラグインのyoast_breadcrumbに依存しているので、
 * PDFLOCSSのルールが一部適用できていません。
 */
.c-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.25em;
  white-space: nowrap;
  overflow: auto;
  color: #575352;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.0125em;
  font-weight: normal;
}
.c-breadcrumbs {
  scrollbar-width: none;
}
.c-breadcrumbs::-webkit-scrollbar {
  display: none;
}
.c-breadcrumbs a {
  color: #E04B00;
}
.c-breadcrumbs span {
  display: contents;
}

.c-image-square {
  overflow: hidden;
  border-radius: 8px;
  display: block;
  position: relative;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.c-image-square:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(1 * 100%);
}
.c-image-square img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.c-image-rectangle {
  overflow: hidden;
  border-radius: 4px;
  display: block;
  position: relative;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.c-image-rectangle:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(0.525 * 100%);
}
.c-image-rectangle img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
  height: 56px;
  border-radius: 18px;
  box-sizing: border-box;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
}
.is-focused.c-button {
  border: 2px solid #49B18E;
}
.is-disable.c-button {
  color: #979594;
  pointer-events: none;
}
.c-button {
  width: auto;
}
.c-button--primary, .c-button--primary:link, .c-button--primary:visited, .c-button--cart, .c-button--cart:link, .c-button--cart:visited {
  border: none;
  background-color: #E04B00;
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .c-button--primary, .c-button--primary:link, .c-button--primary:visited, .c-button--cart, .c-button--cart:link, .c-button--cart:visited {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: all;
  }
  .c-button--primary:hover, .c-button--primary:link:hover, .c-button--primary:visited:hover, .c-button--cart:hover, .c-button--cart:link:hover, .c-button--cart:visited:hover {
    background-color: #BD3200;
  }
}
.c-button--s, .c-button--small {
  line-height: 1.5;
  font-weight: bold;
  box-sizing: border-box;
  white-space: nowrap;
  height: 36px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
}
.c-button--m, .c-button--medium {
  line-height: 1.5;
  font-weight: bold;
  box-sizing: border-box;
  white-space: nowrap;
  height: 48px;
  padding: 8px 24px;
  border-radius: 16px;
  font-size: 14px;
}
.c-button--l, .c-button--large {
  line-height: 1.5;
  font-weight: bold;
  box-sizing: border-box;
  white-space: nowrap;
  height: 56px;
  padding: 8px 24px;
  border-radius: 18px;
  font-size: 16px;
}

/**
 * SNSフォローの円形ロゴとラベルのリンクボタン
 *
 * cake.jpの_c-button-share-iat.scss を参考に下記を調整
 * - カラーをCSS変数に置き換え
 * - 不要な --messenger, --copy のモディファイアを削除
 * - --x モディファイアを追加
 */
.c-button-sns {
  position: relative;
  display: block;
  width: 40px;
  padding-bottom: 24px;
  text-align: center;
  cursor: pointer;
}
.c-button-sns__icon {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
}
.c-button-sns__icon--line {
  background-color: var(--third-party-line);
  color: var(--text-on-inverse);
}
.c-button-sns__icon--twitter {
  background-color: var(--third-party-twitter);
  color: var(--text-on-inverse);
}
.c-button-sns__icon--x {
  background-color: var(--third-party-x);
  color: var(--text-on-inverse);
}
.c-button-sns__icon--fb {
  background-color: var(--third-party-facebook);
  color: var(--text-on-inverse);
}
.c-button-sns__text {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.0125em;
  font-weight: normal;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.ds-button-primary {
  /* style.css の古いリセット `a:link { color: #000 }`（詳細度 0,1,1）に
     クラス単体（0,1,0）では負けるため、:link / :visited を併記して (0,2,0) にする。
     ※ button-base 内の `&.is-disable`（0,2,0）を後勝ちさせたいので、
        この宣言は @include button-base より前に置くこと。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
  height: 56px;
  border-radius: 18px;
  box-sizing: border-box;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  background-color: #E04B00;
}
.ds-button-primary, .ds-button-primary:link, .ds-button-primary:visited {
  color: #fff;
}
.ds-button-primary.is-focused {
  border: 2px solid #49B18E;
}
.ds-button-primary.is-disable {
  color: #979594;
  pointer-events: none;
}
.ds-button-primary--s {
  width: auto;
  height: 36px;
  padding: 0 16px;
  border-radius: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
}
.ds-button-primary--m {
  width: auto;
  height: 48px;
  padding: 0 24px;
  border-radius: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .ds-button-primary {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: all;
  }
  .ds-button-primary:hover {
    background-color: #BD3200;
  }
}
.ds-button-primary.is-active {
  background-color: #BD3200;
}
.ds-button-primary.is-disable {
  background-color: #DBD9D8;
}

.ds-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
  height: 56px;
  border-radius: 18px;
  box-sizing: border-box;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  background-color: #FFECD9;
  color: #E04B00;
}
.ds-button-secondary.is-focused {
  border: 2px solid #49B18E;
}
.ds-button-secondary.is-disable {
  color: #979594;
  pointer-events: none;
}
.ds-button-secondary--s {
  width: auto;
  height: 36px;
  padding: 0 16px;
  border-radius: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
}
.ds-button-secondary--m {
  width: auto;
  height: 48px;
  padding: 0 24px;
  border-radius: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .ds-button-secondary {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: all;
  }
  .ds-button-secondary:hover {
    background-color: #FFD4B2;
    color: #BD3200;
  }
}
.ds-button-secondary.is-active {
  background-color: #FFD4B2;
  color: #BD3200;
}
.ds-button-secondary.is-disable {
  background-color: #F4F2F1;
}

.ds-button-tertiary, .ds-button-bookmark {
  /* style.css の古いリセット `a:link { color: #000 }`（詳細度 0,1,1）に
     クラス単体（0,1,0）では負けるため、:link / :visited を併記して (0,2,0) にする。
     ※ button-base 内の `&.is-disable`（0,2,0）を後勝ちさせたいので、
        この宣言は @include button-base より前に置くこと。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
  height: 56px;
  border-radius: 18px;
  box-sizing: border-box;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  background-color: #F4F2F1;
}
.ds-button-tertiary, .ds-button-bookmark, .ds-button-tertiary:link, .ds-button-bookmark:link, .ds-button-tertiary:visited, .ds-button-bookmark:visited {
  color: #1C1A1A;
}
.ds-button-tertiary.is-focused, .is-focused.ds-button-bookmark {
  border: 2px solid #49B18E;
}
.ds-button-tertiary.is-disable, .is-disable.ds-button-bookmark {
  color: #979594;
  pointer-events: none;
}
.ds-button-tertiary--s {
  width: auto;
  height: 36px;
  padding: 0 16px;
  border-radius: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
}
.ds-button-tertiary--m {
  width: auto;
  height: 48px;
  padding: 0 24px;
  border-radius: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .ds-button-tertiary, .ds-button-bookmark {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: all;
  }
  .ds-button-tertiary:hover, .ds-button-bookmark:hover {
    background-color: #EBE9E8;
  }
}
.ds-button-tertiary.is-active, .is-active.ds-button-bookmark {
  background-color: #EBE9E8;
}
.ds-button-tertiary.is-disable, .is-disable.ds-button-bookmark {
  background-color: #F4F2F1;
}

.ds-button-arrow:after {
  margin-left: 8px;
  font-family: fontawesome;
  line-height: 1;
  content: "\f054";
}

.ds-button-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
  height: 56px;
  border-radius: 18px;
  box-sizing: border-box;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  color: #1C1A1A;
}
.ds-button-text.is-focused {
  border: 2px solid #49B18E;
}
.ds-button-text.is-disable {
  color: #979594;
  pointer-events: none;
}
.ds-button-text--s {
  width: auto;
  height: 36px;
  padding: 0 16px;
  border-radius: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
}
.ds-button-text--m {
  width: auto;
  height: 48px;
  padding: 0 24px;
  border-radius: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .ds-button-text {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: all;
  }
  .ds-button-text:hover {
    background-color: #FBF9F8;
  }
}
.ds-button-text.is-active {
  background-color: #FBF9F8;
}

.ds-button-bookmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
  height: 56px;
  border-radius: 18px;
  box-sizing: border-box;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
}
.ds-button-bookmark.is-focused {
  border: 2px solid #49B18E;
}
.ds-button-bookmark.is-disable {
  color: #979594;
  pointer-events: none;
}
.ds-button-bookmark--s {
  width: auto;
  height: 36px;
  padding: 0 16px;
  border-radius: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
}
.ds-button-bookmark--m {
  width: auto;
  height: 48px;
  padding: 0 24px;
  border-radius: 16px;
}
.ds-button-bookmark:before {
  margin-right: 4px;
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e92a";
}
.ds-button-bookmark.is-active:before {
  content: "\e92b";
  color: #E04B00;
}

.ds-button-down-arrow:after {
  margin-left: 8px;
  font-family: fontawesome;
  line-height: 1;
  content: "\f078";
}

.c-banner {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .c-banner {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: opacity;
  }
  .c-banner:hover {
    opacity: 0.8;
  }
}
.c-banner > img {
  width: 100%;
  height: auto;
}

.c-card-post {
  position: relative;
}
.c-card-post__inner {
  display: flex;
  gap: 16px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .c-card-post__inner {
    gap: 8px;
  }
}
.c-card-post__category-link {
  position: absolute;
  bottom: 0;
  left: calc(200px + 16px);
}
@media screen and (max-width: 767px) {
  .c-card-post__category-link {
    left: calc(80px + 8px);
  }
}
.c-card-post__thumb {
  max-width: 200px;
  max-height: 105px;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .c-card-post__thumb {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: opacity;
  }
  .c-card-post__thumb:hover {
    opacity: 0.8;
  }
}
@media screen and (max-width: 767px) {
  .c-card-post__thumb {
    max-width: 80px;
    max-height: 80px;
  }
}
.c-card-post__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 8px;
  justify-content: space-between;
}
.c-card-post__title {
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 16px;
  font-weight: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .c-card-post__title {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.0125em;
    font-weight: normal;
  }
}
.c-card-post__meta {
  display: flex;
  align-items: center;
}
.c-card-post__category {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.0125em;
  font-weight: normal;
}
@media screen and (max-width: 767px) {
  .c-card-post__category {
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.015em;
    font-weight: normal;
  }
}
.c-card-post__date {
  margin-left: auto;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 14px;
}
.c-card-post--small .c-card-post__inner {
  gap: 8px;
}
.c-card-post--small .c-card-post__category-link {
  left: calc(80px + 8px);
}
.c-card-post--small .c-card-post__thumb {
  max-width: 80px;
  max-height: 80px;
}
.c-card-post--small .c-card-post__thumb picture {
  aspect-ratio: 1/1;
}
.c-card-post--small .c-card-post__info {
  gap: 0;
}
.c-card-post--small .c-card-post__title {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.0125em;
  font-weight: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.c-card-post--small .c-card-post__category {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.015em;
  font-weight: normal;
  padding: 2px 6px;
}
.c-card-post--small .c-card-post__date {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.0125em;
  font-weight: normal;
}

.c-card-post-intro {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--border-medium-emphasis);
  background-color: var(--surface-primary);
  border-radius: 12px;
  padding: 16px;
}
.c-card-post-intro__thumb {
  max-width: 56px;
  max-height: 56px;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .c-card-post-intro__thumb {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: opacity;
  }
  .c-card-post-intro__thumb:hover {
    opacity: 0.8;
  }
}
.c-card-post-intro__thumb picture {
  aspect-ratio: 1/1;
}
.c-card-post-intro__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}
.c-card-post-intro__title {
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--text-high-emphasis);
}
.c-card-post-intro__meta {
  display: flex;
  align-items: center;
}
.c-card-post-intro__category {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.015em;
  font-weight: normal;
  color: var(--text-high-emphasis);
  text-decoration: none;
}

/**
 * 商品紹介のショートコード用のスタイル
 *
 * このコンポーネントは、WordPressの投稿body要素内(.p_post_ui)に配置される。
 * 投稿bodyのCSSがPDFLOCSS形式でないため、
 * このコンポーネントは、投稿bodyセレクタの詳細度の影響を受けてしまう。
 * そのため、本コンポーネントはスタイルを上書きするために、
 * PDFLOCSSでは、ルール外の 要素+クラス セレクタを採用している。
 */
.c-product-intro {
  border-radius: 16px;
  border: 1px solid #DBD9D8;
  padding: 24px;
}
@media screen and (max-width: 767px) {
  .c-product-intro {
    padding: 16px;
  }
}
.c-product-intro__inner {
  position: relative;
}
.c-product-intro__body {
  display: flex;
  justify-content: flex-start;
}
.c-product-intro__footer {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-top: 16px;
}
@media screen and (max-width: 767px) {
  .c-product-intro__footer {
    position: relative;
  }
}
.c-product-intro__thumb {
  flex-shrink: 0;
  margin-right: 16px;
  width: 216px;
}
@media screen and (max-width: 767px) {
  .c-product-intro__thumb {
    margin-right: 8px;
    width: 102px;
  }
}
.c-product-intro__shop,
.c-product-intro a.c-product-intro__shop {
  display: inline-block;
  margin-bottom: 16px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 14px;
  text-decoration: underline;
  color: #575352;
}
@media screen and (max-width: 767px) {
  .c-product-intro__shop,
  .c-product-intro a.c-product-intro__shop {
    margin-bottom: 8px;
  }
}
.c-product-intro__name {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 26px;
}
@media screen and (max-width: 767px) {
  .c-product-intro__name {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  .c-product-intro__name {
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-weight: bold;
    font-size: 14px;
  }
}
.c-product-intro__price,
.c-product-intro p.c-product-intro__price {
  display: flex;
  align-items: baseline;
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 22px;
  margin: 8px 0 60px;
}
@media screen and (max-width: 767px) {
  .c-product-intro__price,
  .c-product-intro p.c-product-intro__price {
    font-size: 21px;
  }
}
@media screen and (max-width: 767px) {
  .c-product-intro__price,
  .c-product-intro p.c-product-intro__price {
    line-height: 1.75;
    letter-spacing: 0.04em;
    font-weight: bold;
    font-size: 14px;
    margin: 8px 0 0;
  }
}
.c-product-intro__price > span,
.c-product-intro p.c-product-intro__price > span {
  font-family: Work Sans, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.c-product-intro__price > small,
.c-product-intro p.c-product-intro__price > small {
  margin-left: 4px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .c-product-intro__price > small,
  .c-product-intro p.c-product-intro__price > small {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.0125em;
    font-weight: normal;
  }
}
.c-product-intro__buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.c-product-intro__button,
.c-product-intro a.c-product-intro__button {
  width: auto;
  height: 48px;
  padding: 0 24px;
  border-radius: 16px;
  margin-right: 8px;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .c-product-intro__button,
  .c-product-intro a.c-product-intro__button {
    height: 36px;
    padding: 0 16px;
    border-radius: 12px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-weight: bold;
    font-size: 14px;
  }
}
.c-product-intro__button:first-child,
.c-product-intro a.c-product-intro__button:first-child {
  background-color: #F4F2F1;
  color: #1C1A1A;
}
.c-product-intro__button:first-child:hover,
.c-product-intro a.c-product-intro__button:first-child:hover {
  background-color: #EBE9E8;
}
.c-product-intro__button:last-child,
.c-product-intro a.c-product-intro__button:last-child {
  background-color: #E04B00;
  color: #fff;
  margin-right: 0;
}
.c-product-intro__button:last-child:hover,
.c-product-intro a.c-product-intro__button:last-child:hover {
  background-color: #BD3200;
}

.c-list-banners {
  padding: 16px 0;
}
@media screen and (max-width: 767px) {
  .c-list-banners {
    max-width: 400px;
    margin: 0 auto;
  }
}
.c-list-banners__item {
  margin-bottom: 16px;
}
.c-list-banners__item:last-child {
  margin-bottom: 0;
}

.c-list-post__item {
  padding: 16px 0;
}
@media screen and (max-width: 767px) {
  .c-list-post__item {
    padding: 8px 0;
  }
}
.c-list-post--small .c-list-post__item {
  padding: 8px 0;
}

/**
 * 商品リンクリスト
 * | サムネ画像 | 商品名と価格 | の横並びリストアイテム
 * 
 * -「この記事の商品」のモーダル（PC）内で商品リンクリストとして使用
 * - サイドバー(PC)の「この記事の商品」のウィジェット内のリストとして使用
 */
.c-list-product-item {
  margin: 0;
  padding: 0;
}
.c-list-product-item__link {
  box-sizing: border-box;
  display: flex;
  padding: 8px 0;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.c-list-product-item__thumb {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .c-list-product-item__thumb {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: opacity;
  }
  .c-list-product-item__thumb:hover {
    opacity: 0.8;
  }
}
.c-list-product-item__info {
  margin-left: 8px;
  flex-grow: 1;
}
.c-list-product-item__name {
  margin-bottom: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.c-list-product-item__price {
  text-align: right;
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
}

.c-logo-cakejp {
  text-align: center;
}
.c-logo-cakejp__subtitle {
  margin-bottom: 8px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .c-logo-cakejp__subtitle {
    line-height: 1.75;
    letter-spacing: 0.04em;
    font-weight: bold;
    font-size: 14px;
  }
}
.c-logo-cakejp img {
  max-width: 200px;
}
@media screen and (max-width: 767px) {
  .c-logo-cakejp img {
    max-width: 160px;
  }
}

.c-picker-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 36px;
  padding: 4px 12px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 14px;
  white-space: nowrap;
  background-color: #F4F2F1;
  color: #1C1A1A;
  border-radius: 36px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .c-picker-tag {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: all;
  }
  .c-picker-tag:hover {
    background-color: #EBE9E8;
  }
}

.c-post-hero {
  position: relative;
  aspect-ratio: 1.90476;
  width: auto;
}
.c-post-hero__image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-post-header {
  margin: 0 auto;
  max-width: 744px;
  padding: 32px 32px;
}
@media screen and (max-width: 767px) {
  .c-post-header {
    padding: 24px;
  }
}
.c-post-header__meta {
  display: flex;
  justify-items: flex-start;
  align-items: center;
}
.c-post-header__category {
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 16px;
  border-right: 1px solid #DBD9D8;
  padding: 0 12px 0 0;
}
.c-post-header__date {
  padding: 0;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 14px;
}
.c-post-header__title {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 32px;
  margin-top: 8px;
}
@media screen and (max-width: 767px) {
  .c-post-header__title {
    font-size: 28px;
  }
}
.c-post-header__taxonomy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.c-post-header__taxonomy .c-post-cat {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #E04B00;
  border-radius: 6px;
  padding: 4px 12px;
  text-decoration: none;
  line-height: 1.6;
}
.c-post-header__taxonomy .c-post-cat:hover {
  opacity: 0.85;
}
.c-post-header__taxonomy .c-post-tag {
  font-size: 13px;
  font-weight: 700;
  color: #1C1A1A;
  background: #fff;
  border: 1px solid #E5E2E0;
  border-radius: 999px;
  padding: 3px 10px;
  text-decoration: none;
  line-height: 1.6;
}
.c-post-header__taxonomy .c-post-tag::before {
  content: '#';
  color: #A8A6A4;
  margin-right: 1px;
}
.c-post-header__taxonomy .c-post-tag:hover {
  background: #FAF9F8;
}

/**
 * 記事タイトル下の SNS シェアボタン（assets/include/c_post_share.php）
 * 左に X / Facebook / LINE、右端にリンクのコピー。
 */
.c-post-share {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-medium-emphasis);
}
.c-post-share__list {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-post-share__button, .c-post-share__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
}
.c-post-share__button:hover, .c-post-share__copy:hover {
  opacity: 0.8;
}
.c-post-share__button:focus-visible, .c-post-share__copy:focus-visible {
  outline: 2px solid var(--focus-high-emphasis);
  outline-offset: 2px;
}
.c-post-share__button {
  font-size: 20px;
}
.c-post-share__button i {
  color: var(--text-on-inverse);
}
.c-post-share__button--x {
  background-color: var(--third-party-x);
}
.c-post-share__button--fb {
  background-color: var(--third-party-facebook);
}
.c-post-share__button--line {
  background-color: var(--third-party-line);
}
.c-post-share__copy {
  padding: 0;
  color: var(--text-medium-emphasis);
  background: var(--surface-primary);
  border: 1px solid var(--border-medium-emphasis);
  cursor: pointer;
}
.c-post-share__copy.is-copied {
  color: var(--object-success);
  border-color: var(--object-success);
}
.c-post-share__icon-done {
  display: none;
}
.c-post-share__copy.is-copied .c-post-share__icon-link {
  display: none;
}
.c-post-share__copy.is-copied .c-post-share__icon-done {
  display: block;
}
.c-post-share__message {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.c-post-writers {
  margin: 40px auto;
  max-width: 744px;
  padding: 24px 32px 0;
  border-top: 1px solid #E5E2E0;
}
@media screen and (max-width: 767px) {
  .c-post-writers {
    padding: 24px 24px 0;
  }
}
.c-post-writers__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: bold;
  color: #1C1A1A;
}

.c-post-writer {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.c-post-writer + .c-post-writer {
  margin-top: 20px;
}
@media screen and (max-width: 767px) {
  .c-post-writer {
    gap: 12px;
  }
}
.c-post-writer__av {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #fbf9f8;
  border: 2px solid #ffd4b2;
}
@media screen and (max-width: 767px) {
  .c-post-writer__av {
    width: 56px;
    height: 56px;
  }
}
.c-post-writer__av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-post-writer__name {
  font-size: 16px;
  font-weight: bold;
  color: #1C1A1A;
}
.c-post-writer__role {
  margin-top: 2px;
  font-size: 13px;
  color: #787675;
}
.c-post-writer__desc {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: #1C1A1A;
}

.c-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.c-section-header--block {
  display: block;
}
.c-section-header--block .c-section-header__sub {
  margin-top: 10px;
}
.c-section-header__sub {
  flex: 0 0 auto;
  margin-left: 10px;
  text-align: right;
}

.c-header-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  box-sizing: border-box;
  cursor: pointer;
}
.c-header-icon i {
  font-size: 24px;
}
.c-header-icon__badge {
  position: absolute;
  top: 0;
  right: 0;
}
.c-header-icon__badge--dot {
  margin-top: 8px;
  margin-right: 4px;
}

.c-heading--h1 {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 32px;
}
@media screen and (max-width: 767px) {
  .c-heading--h1 {
    font-size: 28px;
  }
}
.c-heading--h2 {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 26px;
}
@media screen and (max-width: 767px) {
  .c-heading--h2 {
    font-size: 24px;
  }
}
.c-heading--h3 {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 22px;
}
@media screen and (max-width: 767px) {
  .c-heading--h3 {
    font-size: 21px;
  }
}
.c-heading--h4 {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 767px) {
  .c-heading--h4 {
    font-size: 18px;
  }
}
.c-heading--sub1 {
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 16px;
}
.c-heading--sub2 {
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
}

.c-searchbar__clear, .c-searchbar__search {
  flex-shrink: 0;
  height: 40px;
  cursor: pointer;
  appearance: none;
  color: #1C1A1A;
}
.c-searchbar__clear, .c-searchbar__search {
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-searchbar__clear > i, .c-searchbar__search > i {
  font-size: 20px;
  padding: 2px;
}

.c-searchbar {
  height: 40px;
  border: 1px solid #DBD9D8;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}
.c-searchbar {
  display: flex;
  align-items: center;
  justify-content: normal;
}
@media (hover: hover) and (pointer: fine) {
  .c-searchbar {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: all;
  }
  .c-searchbar:hover {
    border-color: #1C1A1A;
    background-color: #FBF9F8;
  }
}
.c-searchbar__form {
  width: 100%;
  height: 100%;
  appearance: none;
  padding: 4px 8px;
  box-sizing: border-box;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 14px;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-property: all;
}
.c-searchbar__dummy-placeholder {
  display: flex;
  align-items: center;
  color: #787675;
  height: 100%;
}
.c-searchbar__input {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  appearance: none;
  color: #1C1A1A;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 14px;
}
.c-searchbar__input::placeholder {
  color: #787675;
  opacity: 1;
}
.c-searchbar__input:focus {
  outline: none;
}
.c-searchbar__clear-wrap {
  display: none;
}
.c-searchbar__clear {
  width: 40px;
}
.c-searchbar__search {
  width: 48px;
  background-color: #FBF9F8;
  border-left: 1px solid #DBD9D8;
}
@media (hover: hover) and (pointer: fine) {
  .c-searchbar__search {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: all;
  }
  .c-searchbar__search:hover {
    background-color: #F4F2F1;
  }
}
@media screen and (max-width: 767px) {
  .c-searchbar__search {
    width: 40px;
    background-color: #fff;
    border: none;
  }
}

.c-sns-follow__heading {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .c-sns-follow__heading {
    font-size: 16px;
  }
}
.c-sns-follow__list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-sns-follow__list > li {
  flex-shrink: 0;
  margin: 0 12px;
}

/**
 * ※cake.jp の _c-tab.scss から
 * 移植後、以下を追加
 *
 * --smallモディファイアを追加
 */
.c-tab {
  overflow-x: auto;
}
.c-tab {
  scrollbar-width: none;
}
.c-tab::-webkit-scrollbar {
  display: none;
}
.c-tab__list {
  display: inline-flex;
  gap: 24px;
}
@media screen and (max-width: 959px) {
  .c-tab__list {
    gap: 16px;
  }
}
.c-tab__list > li {
  flex: none;
  position: relative;
  align-self: center;
  color: #575352;
}
.c-tab__list > li:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  opacity: 0;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-property: all;
}
.c-tab__list > li.is-active, .c-tab__list > li[data-selected] {
  color: #1C1A1A;
}
.c-tab__list > li.is-active:after, .c-tab__list > li[data-selected]:after {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .c-tab__list > li {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: all;
  }
  .c-tab__list > li:hover {
    color: #1C1A1A;
  }
  .c-tab__list > li:hover:after {
    opacity: 1;
  }
}
.c-tab__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(64px + 4px);
  padding: 4px 0;
  box-sizing: border-box;
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 16px;
  color: currentColor;
  cursor: pointer;
}
@media screen and (max-width: 959px) {
  .c-tab__item {
    line-height: 1.75;
    letter-spacing: 0.04em;
    font-weight: bold;
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  .c-tab__item {
    height: calc(52px);
  }
}
.c-tab__title {
  display: flex;
  align-items: baseline;
}
@media screen and (max-width: 767px) {
  .c-tab--item .c-tab__list {
    width: 100%;
    gap: 0;
  }
  .c-tab--item .c-tab__list > li {
    flex: 1 0 auto;
  }
}
.c-tab--small .c-tab__list {
  width: 100%;
  gap: 0;
}
.c-tab--small .c-tab__list > li {
  flex: 1;
}
.c-tab--small .c-tab__item {
  width: 100%;
  height: 41px;
}
.c-tab--small .c-tab__title {
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
}

.c-tabui__panel {
  display: none;
}
.c-tabui__panel[data-selected], .c-tabui__panel.is-active {
  display: block;
}

/**
 * タグチップのスタイル
 * 
 * mag で新規作成
 * cake.jp の 下記SCSSを参考に
 * - _parts/_c-tag.scss 
 * - v2/components_c-category-label.scss
 */
.c-tag {
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  width: auto;
  border-radius: 4px;
  border: 1px solid;
  box-sizing: border-box;
  overflow: hidden;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .c-tag {
    padding: 1px 6px 2px 6px;
  }
}
.c-tag--gray {
  background-color: #FBF9F8;
  border-color: #FBF9F8;
  color: #1C1A1A;
}

.c-title {
  padding: 8px 0;
}
.c-title--center {
  text-align: center;
}
.c-title__inner {
  padding: 0 16px;
}
.c-title__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.c-title__more {
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
  color: #E04B00;
  white-space: nowrap;
}
.c-title__more[type="button"] {
  cursor: pointer;
  appearance: none;
}
.c-title__more[type="button"][disabled] {
  cursor: normal;
  color: #DBD9D8;
}
.c-title__caption {
  margin-top: 8px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 16px;
}

/**
 * 商品カード（カートに追加）
 *
 * cake.jpの app/src/scss/v2/components/_cj-card-item.scss を移植して調整したもの
 */
.c-card-item {
  color: #1C1A1A;
}
.c-card-item__headWrap {
  position: relative;
}
.c-card-item__bookmark {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
@media screen and (max-width: 767px) {
  .c-card-item__bookmark {
    bottom: 5px;
    right: 5px;
  }
}
.c-card-item__head {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .c-card-item__head {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: opacity;
  }
  .c-card-item__head:hover {
    opacity: 0.8;
  }
}
@media screen and (max-width: 767px) {
  .c-card-item__head {
    border-radius: 8px;
  }
}
.c-card-item__thumb {
  display: block;
  position: relative;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.c-card-item__thumb:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(1 * 100%);
}
.c-card-item__thumb img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.c-card-item__body {
  margin-top: 10px;
}
@media screen and (max-width: 767px) {
  .c-card-item__body {
    margin-top: 8px;
  }
}
.c-card-item__shop {
  margin-top: 5px;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #575352;
}
@media screen and (max-width: 767px) {
  .c-card-item__shop {
    font-size: 0.625rem;
  }
}
.c-card-item__name {
  margin-top: 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 14px;
  height: calc((14 * 1.4 * 2) * 1px);
}
.c-card-item__price {
  margin-top: 10px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 14px;
  line-height: 1;
  font-family: Work Sans, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
  .c-card-item__price {
    margin-top: 5px;
  }
}
.c-card-item__footer {
  margin-top: 10px;
}
.c-card-item__buttonWrap {
  margin-top: 15px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .c-card-item__buttonWrap {
    margin-top: 10px;
  }
}
.c-card-item__button {
  margin: auto;
}

.c-item-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.0125em;
  font-weight: normal;
  background-color: #FBF9F8;
  color: #1C1A1A;
}
.c-item-tag--s {
  padding: 1px 4px 2px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.015em;
  font-weight: normal;
}
@media screen and (max-width: 767px) {
  .c-item-tag--s {
    font-size: 10px;
  }
}
.c-item-tag--pr {
  background-color: rgba(255, 255, 255, 0.5);
  padding-left: 6px;
  padding-right: 6px;
}

.c-ad-post-header {
  margin: 0 auto;
  max-width: 744px;
  padding: 16px 32px;
}
@media screen and (max-width: 767px) {
  .c-ad-post-header {
    padding: 16px 24px;
  }
}
.c-ad-post-header__banner {
  display: block;
  padding: 8px 16px 16px;
  background-color: #fbf9f8;
  border: 1px solid #dbd9d8;
  border-radius: 8px;
  box-sizing: border-box;
}
.c-ad-post-header__contents {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.c-ad-post-header__title {
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 16px;
}
.c-ad-post-header__thumb {
  position: relative;
}
.c-ad-post-header__pr {
  position: absolute;
  bottom: 4px;
  left: 4px;
}
.c-ad-post-header__img {
  flex-shrink: 0;
  width: 80px;
}
.c-ad-post-header__textarea {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  overflow-wrap: anywhere;
}
.c-ad-post-header__name {
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.c-ad-post-header__caption {
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .c-ad-post-header__caption {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}
.c-ad-post-header__price {
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
  text-align: right;
}

/**
 * マガジン用カード
 * 社長モックの .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 .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: 1.0rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: .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: 1.0rem;
  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: 2.0rem;
  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: 1.0rem;
  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: 1.0rem;
  color: var(--text-medium-emphasis);
  margin: 8px 0 0;
}

/**
 * カテゴリナビゲーション
 * 社長モックの .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;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s;
  /* style.css の古いリセット `a:link { color: #000 }`（詳細度 0,1,1）に
     クラス単体（0,1,0）では負けるため、:link / :visited を併記して (0,2,0) にする。
     ※ :hover / .is-active を後勝ちさせたいので、それらより前に置くこと。 */
}
.c-category-navigation__link, .c-category-navigation__link:link, .c-category-navigation__link:visited {
  color: var(--primitive-gray-800);
}
.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;
  }
}
/**
 * フロントページ全体のレイアウト
 * 社長モックの .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: 3.0rem;
  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 .2s, color .2s, border-color .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: 2.0rem;
  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 .2s, border-color .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 .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: 1.0rem;
  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: .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;
}

@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);
  font-weight: 700;
  font-size: 1.3rem;
  padding: 12px 24px;
  border-radius: 4px;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  /* style.css の古いリセット `a:link { color: #000 }`（詳細度 0,1,1）に
     クラス単体（0,1,0）では負けるため、:link / :visited を併記して (0,2,0) にする。
     ※ a 以外の要素にこのクラスを流用する場合は色が負けるので注意。 */
}
.p-frontpage-scene__cta-btn, .p-frontpage-scene__cta-btn:link, .p-frontpage-scene__cta-btn:visited {
  color: var(--surface-primary);
}
.p-frontpage-scene__cta-btn:hover {
  background: var(--primitive-orange-800);
}

.c-scene-tile {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  text-decoration: none;
  /* style.css の古いリセット `a:link { color: #000 }`（詳細度 0,1,1）に
     クラス単体（0,1,0）では負けるため、:link / :visited を併記して (0,2,0) にする。
     子要素（__title 等）はここから color を継承する。
     ※ a 以外の要素にこのクラスを流用する場合は色が負けるので注意。 */
}
.c-scene-tile, .c-scene-tile:link, .c-scene-tile:visited {
  color: var(--surface-primary);
}
.c-scene-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .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;
  }
}
/**
 * アーカイブ（カテゴリ一覧）のマガジンカードグリッド
 * 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 .2s, border-color .2s, color .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;
}

/**
 * ヒーローカルーセル
 * 社長モックの .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 .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: 60%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.p-hero-carousel__meta {
  position: absolute;
  left: 32px;
  bottom: 32px;
  right: 32px;
  color: var(--surface-primary, #fff);
  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: .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;
  color: var(--surface-primary, #fff);
  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 .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 .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: 1.0rem;
  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;
  }
}
/* SP: ステージ高が約180pxしかないのに対しタイトルが 20px・行数無制限のため、
   長いタイトルの記事だと画像を覆う／枠外へ溢れる。文字を詰めて3行で打ち切る。 */
@media (max-width: 767px) {
  .p-hero-carousel__meta {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .p-hero-carousel__cat {
    margin-bottom: 8px;
    padding: 3px 9px;
    font-size: 1rem;
  }

  .p-hero-carousel__title {
    font-size: 1.5rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .p-hero-carousel__byline {
    margin-top: 8px;
    font-size: 1.1rem;
  }

  /* 矢印は出さない。ステージ高が約180pxしかなく、枠内に置くと画像かタイトルを潰し、
     枠外に出す余地も左右16pxしかないため。SPの送りはスワイプ（hero-carousel.js）とドットに委ねる。 */
  .p-hero-carousel__arrow {
    display: none;
  }

  /* ドットは見た目8pxのまま、擬似要素で44px相当の当たり判定を確保する */
  .p-hero-carousel__dots {
    bottom: 12px;
    gap: 10px;
  }

  .p-hero-carousel__dot {
    position: relative;
  }
  .p-hero-carousel__dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}
/**
 * モック（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;
}

/* サイド（CTAカード + ランキング）は l-frame-widgets の縦積み flex + gap をそのまま使う。
   ここを display:block に上書きすると gap が無効化され、枠線付きカード同士が密着するため不可。
   padding-top だけメインカラムの見出し位置に合わせて上書きする。 */
.feature-ranking-layout__side .l-frame-widgets {
  display: flex;
  flex-direction: column;
  gap: 16px;
  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: .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 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-card-mag__thumb, .c-card-guide__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 .2s ease, color .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 .2s ease;
}

.scene-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .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: 2.0rem;
}

.scene-card:hover img {
  opacity: .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 #ebe9e8;
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* min-height は撤去。高さはコンテンツ依存とし、同一行の高さ揃えは grid の stretch に任せる。
     （CTA無しカードでタグ下に大きな空白が出るのを防ぐ） */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: #1c1a1a;
  transition: border-color .2s ease, box-shadow .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: #fbf9f8;
  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: #1c1a1a;
}

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

.w-catch {
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.5;
  color: #1c1a1a;
  padding: 10px 0;
  border-top: 1px solid #ebe9e8;
  border-bottom: 1px solid #ebe9e8;
  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: 1.0rem;
  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 #1c1a1a;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1.25rem;
  color: #1c1a1a;
  background: #fff;
  transition: background-color .2s ease, color .2s ease;
}

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

.w-card:hover .w-cta {
  background: #1c1a1a;
  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: var(--surface-tertiary, #F4F2F1);
}

/* ===== トレンドニュース：上段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: var(--surface-tertiary, #F4F2F1);
}

.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: var(--surface-tertiary, #F4F2F1);
}

.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: #fbf9f8 !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: #1c1a1a;
}

.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.0;
  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 .2s ease;
}

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

.mag-footer__legal {
  max-width: 1120px;
  margin: 32px auto 0;
  padding: 20px 16px 0;
  border-top: 1px solid #ebe9e8;
  font-size: 1.1rem;
  color: #575352;
  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-widget-rank__thumb, .w-card .w-av img, .scene-card img {
  transition: filter .2s ease !important;
}

/* hover：画像だけ少し明るく（白いベールがうっすら乗る程度） */
.c-card-mag:hover .c-card-mag__thumb img,
.c-card-guide:hover .c-card-guide__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, .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, .w-card {
  border-color: var(--border-medium-emphasis, #DBD9D8);
}

.c-card-guide:hover, .w-card:hover {
  border-color: var(--border-medium-emphasis, #DBD9D8) !important;
}

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

/**
 * p-drawer-nav ── サイドナビ（ドロワー）の中身。マガジン軸（issue #138）
 *
 * 構成
 *  1. .p-drawer-nav__search  マガジン内検索
 *  2. .p-drawer-nav__block--mag   「マガジンを読む」＝主役
 *  3. .p-drawer-nav__block--shop  「お買いもの」＝出口。上罫の帯で明確に区切る
 *
 * 注意
 *  - シェル（.l-drawer-menu__inner: 幅304px / 縦スクロール）は layouts/_l-drawer-menu.scss 側。
 *    ここは「その中身」だけを担当する。
 *  - style.css の古いリセット `a:link { color: #000 }` は詳細度 (0,1,1) なので、
 *    クラス単体 (0,1,0) では負ける。文字色を効かせるリンクは必ず
 *    `&, &:link, &:visited` を併記して (0,2,0) にする。
 *  - 色は @cakejp/design-system トークン（assets/css/ds-tokens.css）を参照する。
 *    フォールバック値はライトテーマの実値。
 */
.p-drawer-nav {
  /* ---------- 1. 検索 ---------- */
  /* c-searchbar のベースを流用しつつ、ドロワー内では横幅いっぱいに伸ばす */
  /* ---------- ブロック共通 ---------- */
  /* ブロック見出しは「押せる行」ではなくセクションのラベル。
     開閉できる __group-head（同じ太字・同サイズ）と紛らわしかったため、
     小さめ・字間広め・淡い色にして操作要素と区別する。 */
  /* ラベル（__block-title）は小さく抑えたので、説明はこちらを本文相当にする */
  /* ---------- 2. マガジン ---------- */
  /* 主要ハブ（トップ / シーン / タグ）。カテゴリ一覧より前に置いて回遊の起点にする */
  /* カテゴリ3軸 + 人気タグ。<details> なので JS 不要（PushPopLayer とは無関係） */
  /* 上の `ul` リセット（.p-drawer-nav ul = 詳細度 0,1,1）は
     クラス単体 (0,1,0) に勝ってしまい padding が 0 に潰される。
     余白を効かせるため要素+クラスで詳細度を上げる。 */
  /* 項目数の多い軸（シーン / 人気タグ）はチップで折り返して詰める */
  /* 記事数バッジ。サイドバーの c-tag-chip__count と同じ見た目に揃える。 */
  /* ---------- 3. Cake.jp 本店（EC） ---------- */
  /* マガジンより優先度は下げるが、面で塗って上罫を引き「別の場所へ行く」と分かる形にする */
  /* 区切りは上の帯だけで付ける。背景は読みもの側と同じ白のまま。 */
}
.p-drawer-nav {
  box-sizing: border-box;
  min-height: 100%;
  padding-bottom: 40px;
  background-color: var(--surface-primary, #fff);
}
.p-drawer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-drawer-nav__search {
  padding: 16px 16px 8px;
}
.p-drawer-nav__searchbar {
  width: 100%;
  background-color: var(--surface-primary, #fff);
}
.p-drawer-nav__block {
  padding: 8px 16px 20px;
}
.p-drawer-nav__block-title {
  margin: 0;
  padding: 14px 2px 8px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  color: var(--text-low-emphasis, #7a7473);
  cursor: default;
}
.p-drawer-nav__block-note {
  display: block;
  margin-top: 6px;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--text-medium-emphasis, #575352);
}
.p-drawer-nav__hubs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}
.p-drawer-nav__hub, .p-drawer-nav__hub:link, .p-drawer-nav__hub:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border-hairline, rgba(28, 26, 26, 0.08));
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  color: var(--text-high-emphasis, #1c1a1a);
}
.p-drawer-nav__hub::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-top: 1.5px solid var(--text-low-emphasis, #7a7473);
  border-right: 1.5px solid var(--text-low-emphasis, #7a7473);
  transform: rotate(45deg);
}
.p-drawer-nav__hub:hover {
  color: var(--text-accent-primary, #e04b00);
}
.p-drawer-nav__group {
  border-bottom: 1px solid var(--border-hairline, rgba(28, 26, 26, 0.08));
}
.p-drawer-nav__group-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-high-emphasis, #1c1a1a);
}
.p-drawer-nav__group-head::-webkit-details-marker {
  display: none;
}
.p-drawer-nav__group-head::after {
  content: "+";
  margin-right: 2px;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
  color: var(--text-low-emphasis, #7a7473);
}
.p-drawer-nav__group[open] > .p-drawer-nav__group-head::after {
  content: "−";
  /* U+2212 minus sign */
}
.p-drawer-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.p-drawer-nav ul.p-drawer-nav__list {
  padding: 0 2px 12px;
}
.p-drawer-nav__list--chips {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.p-drawer-nav__link, .p-drawer-nav__link:link, .p-drawer-nav__link:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 2px;
  font-size: 1.3rem;
  line-height: 1.4;
  text-decoration: none;
  color: var(--text-medium-emphasis, #575352);
}
.p-drawer-nav__link:hover {
  color: var(--text-accent-primary, #e04b00);
}
.p-drawer-nav__count {
  flex-shrink: 0;
  padding: 0 6px;
  border-radius: 999px;
  background-color: var(--surface-tertiary, #f4f2f1);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--primitive-gray-500, #979594);
}
.p-drawer-nav__list--chips .p-drawer-nav__link, .p-drawer-nav__list--chips .p-drawer-nav__link:link, .p-drawer-nav__list--chips .p-drawer-nav__link:visited {
  /* チップは中身の幅ぴったりに収める（一覧行のような両端揃えにはしない） */
  justify-content: flex-start;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--border-medium-emphasis, #d9d5d4);
  border-radius: 999px;
  background-color: var(--surface-primary, #fff);
  font-size: 1.2rem;
}
.p-drawer-nav__list--chips .p-drawer-nav__link:hover {
  border-color: var(--border-brand-subtle, rgba(224, 75, 0, 0.16));
  background-color: var(--brand-cake-orange-ultra-light, #ffecd9);
  color: var(--text-accent-primary, #e04b00);
}
.p-drawer-nav__more, .p-drawer-nav__more:link, .p-drawer-nav__more:visited {
  display: inline-block;
  padding: 4px 2px 14px;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--text-accent-primary, #e04b00);
}
.p-drawer-nav__block--shop {
  margin-top: 12px;
  padding-top: 4px;
  border-top: 8px solid var(--surface-tertiary, #f4f2f1);
}
.p-drawer-nav__block-title--shop {
  padding-top: 16px;
}
.p-drawer-nav__cta, .p-drawer-nav__cta:link, .p-drawer-nav__cta:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 4px 0 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background-color: var(--surface-accent-primary, #e04b00);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  color: var(--text-on-inverse, #fff);
}
.p-drawer-nav__cta:hover {
  background-color: var(--hover-primary-button, #c24100);
  color: var(--text-on-inverse, #fff);
}
.p-drawer-nav__cta-arrow {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.p-drawer-nav__shop-list {
  display: flex;
  flex-direction: column;
}
.p-drawer-nav__shop-link, .p-drawer-nav__shop-link:link, .p-drawer-nav__shop-link:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--border-hairline, rgba(28, 26, 26, 0.08));
  font-size: 1.3rem;
  line-height: 1.4;
  text-decoration: none;
  color: var(--text-high-emphasis, #1c1a1a);
}
.p-drawer-nav__shop-link:hover {
  color: var(--text-accent-primary, #e04b00);
}
.p-drawer-nav__shop-label {
  font-weight: 700;
  white-space: nowrap;
}
.p-drawer-nav__shop-note {
  font-size: 1.1rem;
  font-weight: 400;
  text-align: right;
  color: var(--text-low-emphasis, #7a7473);
}

/* ======================================================================
 layout
====================================================================== */
/* =================================
 l_content_size
================================= */
.l_content_size_sp_1 {
  padding: 0 4.6875%;
}
@media screen and (min-width: 1025px) {
  .l_content_size_sp_1 {
    max-width: 1200px;
    margin: 0 auto;
  }
}

.l_content_size_pc_1 {
  width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .l_content_size_pc_1 {
    width: auto;
    padding: 0 4.6875%;
  }
}

/* =================================
 l_container
================================= */
.l_container {
  position: relative;
}
.l_container .l_copy_message {
  position: fixed;
  top: 5rem;
  left: 0;
  display: none;
  width: 100%;
  padding: 2rem;
  background: #777;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  z-index: 1001;
}
@media screen and (min-width: 769px) {
  .l_container .l_copy_message {
    top: 7rem;
  }
}

/* =================================
 l_menu
================================= */
.l_menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
  width: 100%;
  height: 100%;
}
.l_menu._open .l_navigation {
  left: 0;
}
.l_menu .l_menu_bg {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
  cursor: pointer;
}
.l_menu .l_navigation {
  position: relative;
  left: -100%;
  display: block;
  width: 80%;
  height: 100%;
  max-width: 59rem;
  background: #fff;
  padding: 4rem 0 0;
  z-index: 10;
  transition: all .5s;
}
@media screen and (min-width: 769px) {
  .l_menu .l_navigation {
    padding: 11rem 8rem 0;
  }
}
.l_menu .l_navigation .logo {
  margin: 0 0 4rem 2rem;
}
.l_menu .l_navigation .nav_list {
  font-size: 1.4rem;
}
.l_menu .l_navigation .nav_list > li {
  border-top: 1px solid #ddd;
}
.l_menu .l_navigation .nav_list a {
  position: relative;
  display: block;
  padding: 1.5rem 0 1.5rem 2rem;
}
.l_menu .l_navigation .nav_list a.home {
  padding: 1.5rem 0 1.5rem 4.5rem;
}
.l_menu .l_navigation .nav_list a.home:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2rem;
  content: '';
  display: block;
  margin: auto;
  width: 1.73rem;
  height: 1.73rem;
  background: url(../img/home.svg) center center no-repeat;
  background-size: cover;
}
.l_menu .l_navigation .nav_list a.shop {
  padding: 2rem 0 2rem 4.5rem;
}
.l_menu .l_navigation .nav_list a.shop:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2rem;
  content: '';
  display: block;
  margin: auto;
  width: 1.64rem;
  height: 1.86rem;
  background: url(../img/shop.svg) center center no-repeat;
  background-size: cover;
}
.l_menu .l_navigation .nav_list .title {
  display: block;
  padding: 2.5rem 0 2rem 2rem;
  font-weight: bold;
  color: #aaa;
}
.l_menu .l_navigation .nav_list .menu {
  margin: 0 0 2rem;
  border-bottom: 1px solid #ddd;
}
.l_menu .l_navigation .nav_list .menu li {
  position: relative;
  padding: 0 0 0 2rem;
}
.l_menu .l_navigation .nav_list .menu li:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 0.1rem;
  background: url(../img/dotted_path.svg) left top repeat-x;
}
.l_menu .l_navigation .nav_list .menu li a:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  content: '';
  display: block;
  margin: auto;
  width: .5rem;
  height: .2rem;
  background: #222;
}
.l_menu .l_navigation .l_navclose {
  position: absolute;
  top: 0;
  right: -3.2rem;
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  cursor: pointer;
}

/* =================================
 l_main_visual
================================= */
/* =================================
 l_content
================================= */
.l_content {
  padding: 0;
}
@media screen and (min-width: 769px) {
  .l_content {
    padding: 0 0 4rem;
  }
  .l_content._sub {
    padding: 0 0 4rem;
  }
}
.l_content > .inner {
  background: #fff;
  width: 100%;
  max-width: 904px;
  margin: auto;
}

/* =================================
 l_main
================================= */
/* =================================
 l_side
================================= */
/* =================================
 l_footer
================================= */
.l_footer {
  background: #405282;
  font-size: 1.2rem;
  padding: 2.5rem 1.5rem 1.5rem;
}
.l_footer .logo {
  display: block;
  margin: 0 auto 3rem;
  color: #fff;
  text-align: center;
}
.l_footer .logo img {
  display: block;
  margin: 1rem auto 0;
}
.l_footer a {
  display: block;
  font-size: 1.2rem;
}
.l_footer .link_box {
  max-width: 74rem;
  margin: 0 0 3.5rem;
}
@media screen and (min-width: 769px) {
  .l_footer .link_box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 2rem auto 5rem;
  }
}
.l_footer .copyright {
  text-align: center;
  font-size: 1rem;
  color: #fff;
}

/* 230530 */
.p-footer-item__bg {
  background-color: #ffffff;
  border-top: 1px solid #DBD9D8;
  border-bottom: 1px solid #DBD9D8;
}

@media screen and (max-width: 768px) {
  .p-footer-item__bg {
    border: 0;
  }
}
.p-footer-item__contents {
  max-width: 740px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 0px 40px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .p-footer-item__contents {
    padding: 0;
    display: block;
  }
}
.p-footer-item__area {
  margin: 0 -15px;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .p-footer-item__area {
    margin: 0 auto;
    display: block;
  }
}
.p-footer-item__title {
  pointer-events: none;
  color: #1A1818;
  padding-bottom: 15px;
  font-size: 14px;
  line-height: 1.3;
}

@media screen and (max-width: 768px) {
  .p-footer-item__title {
    pointer-events: auto;
    color: #1A1818;
    font-size: 15px;
    padding: 20px;
    border-top: 1px solid #DBD9D8;
  }
}
.p-footer-item__titleSP {
  color: #1A1818;
  font-size: 15px;
  padding: 20px;
  border-top: 1px solid #DBD9D8;
}

.p-footer-item__box {
  padding-top: 30px;
}

@media screen and (max-width: 768px) {
  .p-footer-item__box {
    padding-top: 0;
  }
}
.p-footer-item__item {
  padding: 0 15px;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .p-footer-item__item {
    padding: 0;
  }
}
.p-footer-item__list {
  color: #1A1818;
  font-size: 14px;
}

@media screen and (max-width: 768px) {
  .p-footer-item__list {
    display: block;
    color: #1A1818;
    font-size: 13px;
  }
}
.p-footer-item__list > li {
  line-height: 35px;
}

@media screen and (max-width: 768px) {
  .p-footer-item__list > li {
    border-bottom: 1px solid #DBD9D8;
    line-height: normal;
  }
}
@media screen and (max-width: 768px) {
  .p-footer-item__arrow {
    position: relative;
  }

  .p-footer-item__arrow:after {
    content: "";
    width: 8px;
    height: 8px;
    border: 1px solid;
    border-color: #1A1818 #1A1818 transparent transparent;
    transform: rotate(45deg);
    display: block;
    position: absolute;
    top: 50%;
    right: 27px;
    margin-top: -5px;
  }
}
.p-footer-item__sns {
  padding: 50px 0 0;
}

@media screen and (max-width: 768px) {
  .p-footer-item__sns {
    display: block;
    padding: 30px 0;
    border-bottom: 1px solid #DBD9D8;
  }
}
.p-footer-item__snsList {
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 20px;
}

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

.p-footer-item__snsLink {
  display: block;
}

/* footer-bottom */
.p-footer-bottom {
  background: #ffffff;
  padding: 0 20px;
  padding-bottom: 0;
}

@media screen and (max-width: 768px) {
  .p-footer-bottom {
    padding-bottom: 100px;
  }
}
.p-footer-bottom__inner {
  margin: 0 auto;
  max-width: 740px;
}

.p-footer-bottom__contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 35px 0;
  color: #8c8988;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-footer-bottom__contents {
    display: block;
    padding: 30px 0 35px;
  }
}
.p-footer-bottom__logo {
  color: #1A1818;
}

@media screen and (max-width: 768px) {
  .p-footer-bottom__logo {
    margin: 0 auto;
  }
}
.p-footer-bottom__logo > a {
  display: block;
  color: currentColor;
}

.p-footer-bottom__copy {
  font-size: 13px;
}

@media screen and (max-width: 768px) {
  .p-footer-bottom__copy {
    padding: 25px 0 20px;
    line-height: 20px;
  }
}
.p-footer-bottom__en {
  font-size: 14px;
}

/* ========================= */
/* header */
/* ========================= */
.head_flame {
  position: sticky;
  top: 0;
  background-color: #fff;
  width: 100%;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-property: all;
  box-sizing: border-box;
}
.head_flame.is-hide {
  transform: translateY(-100%);
}
.head_flame.is-search-window-open {
  transition-duration: 0s !important;
  transform: none !important;
}

.header_inner {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  gap: 16px;
  position: relative;
  width: auto;
  height: 64px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .header_inner {
    height: 52px;
  }
}

.header_block {
  display: flex;
  align-items: center;
  gap: 32px;
}
@media screen and (min-width: 768px) and (max-width: 959px) {
  .header_block {
    gap: 16px;
  }
}
@media screen and (max-width: 767px) {
  .header_block {
    gap: 8px;
  }
}

@media screen and (max-width: 767px) {
  .header_hamburger {
    margin-left: -8px;
  }
}
.header_hamburger i {
  margin-top: 2px;
}

.header_logo {
  width: auto;
  padding: 0;
  text-align: center;
}
.header_logo a {
  margin: 0 auto;
  display: block;
  color: currentColor;
}
@media (hover: hover) and (pointer: fine) {
  .header_logo a {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: opacity;
  }
  .header_logo a:hover {
    opacity: 0.8;
  }
}
.header_logo svg {
  fill: currentColor;
  width: 104px;
  height: 24px;
}
.header_logo > span {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0;
  line-height: 1;
  color: transparent;
}

.header_search {
  max-width: 560px;
  width: 40vw;
}
@media screen and (max-width: 767px) {
  .header_search {
    margin-left: auto;
    width: auto;
  }
}

.header_iconlist {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 4px;
}
@media screen and (max-width: 767px) {
  .header_iconlist {
    gap: 0;
  }
}

.l-breadcrumbs {
  width: 100%;
  padding: 16px 0;
}

.l-frame-widgets {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}

/* フッタータブナビゲーション */
.l-footer-navi {
  display: none;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #DBD9D8;
  background-color: #fff;
  padding-bottom: env(safe-area-inset-bottom);
}
@media screen and (max-width: 767px) {
  .l-footer-navi {
    display: block;
  }
}
.l-footer-navi__list {
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  justify-items: center;
  margin: 0 auto;
  padding: 0 8px;
  max-width: 480px;
  height: 70px;
}
.l-footer-navi__item {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  width: 20%;
  justify-items: center;
}
.l-footer-navi__item.is-active .l-footer-navi__iconset {
  background-color: #FFF1E5;
}
.l-footer-navi__item.is-active .l-footer-navi__icon.l-footer-navi__icon--normal {
  display: none;
}
.l-footer-navi__item.is-active .l-footer-navi__icon.l-footer-navi__icon--active {
  display: flex;
}
.l-footer-navi__item.is-active .l-footer-navi__label {
  color: #E04B00;
  font-weight: 700;
}
.l-footer-navi__link {
  display: flex;
  justify-items: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
}
.l-footer-navi__iconset {
  position: relative;
  display: flex;
  justify-content: center;
  justify-items: center;
  background-color: transparent;
  border-radius: 18px;
  margin: 8px auto 2px;
  padding: 4px 0;
  width: 56px;
  height: auto;
}
.l-footer-navi__iconset.is-badge {
  /* badge */
}
.l-footer-navi__iconset.is-badge .l-footer-navi__icon:before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  right: 11px;
  top: 6px;
  border-radius: 50%;
  background-color: #EC0000;
  /*#EC0000*/
  transform: translate(-50%, -50%) !important;
  z-index: 2;
  width: 8px;
  height: 8px;
}
.l-footer-navi__icon {
  display: flex;
  justify-content: center;
}
.l-footer-navi__icon--active {
  display: none;
}
.l-footer-navi__icon img, .l-footer-navi__icon svg {
  position: relative;
  width: 24px;
  height: 24px;
}
.l-footer-navi__label {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.0125em;
  font-weight: normal;
  text-align: center;
}

.l-drawer-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-property: all;
  visibility: hidden;
  opacity: 0;
}
.l-drawer-menu.is-active {
  visibility: visible;
  opacity: 1;
}
.l-drawer-menu.is-active .l-drawer-menu__inner {
  transform: none;
}
.l-drawer-menu__close {
  transform: rotate(45deg);
  color: #fff;
  position: absolute;
  top: 16px;
  left: 320px;
  font-size: 24px;
  pointer-events: none;
}
.l-drawer-menu__overlay {
  background-color: rgba(28, 26, 26, 0.7);
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
}
.l-drawer-menu__inner {
  position: relative;
  width: 304px;
  height: 100%;
  overflow: hidden auto;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-property: all;
  transform: translateX(-100%);
}

.l-logo-cakejp {
  padding: 32px 16px 16px;
  text-align: center;
  max-width: 740px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .l-logo-cakejp {
    padding: 16px 16px 8px;
  }
}

/* =================================
 l_hoge
================================= */
.m-button-text {
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 16px;
  white-space: nowrap;
  /* style.css の古いリセット `a:link { color: #000 }`（詳細度 0,1,1）に
     クラス単体（0,1,0）では負けるため、:link / :visited を併記して (0,2,0) にする。
     （旧実装は :visited だけ併記していたため「未訪問リンクだけ黒」になっていた）
     ※ :hover を後勝ちさせたいので @include hover() より前に置くこと。 */
}
.m-button-text, .m-button-text:link, .m-button-text:visited {
  color: #E04B00;
}
@media screen and (max-width: 767px) {
  .m-button-text {
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-weight: bold;
    font-size: 14px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .m-button-text {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: all;
  }
  .m-button-text:hover {
    opacity: 1;
    color: #BD3200;
  }
}

/**
 * ※cake.jp の _m-card-item.scss から
 * 移植してきたが、ところどころ調整している
 */
.m-card-item__header {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.m-card-item__overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
}
.m-card-item__label {
  position: absolute;
  bottom: 8px;
  left: 8px;
}
@media screen and (max-width: 767px) {
  .m-card-item__label {
    bottom: 4px;
    left: 4px;
  }
}
.m-card-item__bookmark {
  position: absolute;
  bottom: 8px;
  right: 8px;
}
@media screen and (max-width: 767px) {
  .m-card-item__bookmark {
    bottom: 4px;
    right: 4px;
  }
}
.m-card-item__thumb {
  display: block;
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .m-card-item__thumb {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: opacity;
  }
  .m-card-item__thumb:hover {
    opacity: 0.8;
  }
}
.m-card-item__thumb > picture {
  display: block;
  position: relative;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.m-card-item__thumb > picture:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(1 * 100%);
}
.m-card-item__thumb > picture img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.m-card-item__ranking {
  position: absolute;
  top: 0;
  left: 8px;
  width: 32px;
  height: auto;
}
@media screen and (max-width: 767px) {
  .m-card-item__ranking {
    left: 4px;
    width: 24px;
  }
}
.m-card-item__ranking--num {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
  cursor: default;
}
@media screen and (max-width: 767px) {
  .m-card-item__ranking--num {
    top: 6px;
    left: 6px;
    width: 25px;
    height: 25px;
    font-size: 10px;
  }
}
.m-card-item__body {
  margin-top: 4px;
}
.m-card-item__shop {
  margin-top: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.015em;
  font-weight: normal;
}
@media screen and (max-width: 767px) {
  .m-card-item__shop {
    font-size: 10px;
  }
}
@media screen and (max-width: 767px) {
  .m-card-item__shop {
    display: none;
  }
}
.m-card-item__title {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 14px;
}
.m-card-item__date {
  margin-top: 4px;
  color: #575352;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.0125em;
  font-weight: normal;
}
@media screen and (max-width: 767px) {
  .m-card-item__date {
    margin: 2px 0;
  }
}
.m-card-item__review {
  margin-top: 4px;
}
.m-card-item__originalPrice {
  margin-top: -0.5em;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.0125em;
  font-weight: normal;
  font-family: Work Sans, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: line-through;
  color: #979594;
}
.m-card-item__price {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 16px;
  font-family: Work Sans, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.m-card-item__blind {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.25);
}
.m-card-item__blind > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: white;
}
.m-card-item__comment {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.0125em;
  font-weight: normal;
}
@media screen and (max-width: 767px) {
  .m-card-item.is-sp-s .m-card-item__title {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.0125em;
    font-weight: normal;
  }
  .m-card-item.is-sp-s .m-card-item__originalPrice {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.0125em;
    font-weight: normal;
  }
  .m-card-item.is-sp-s .m-card-item__price {
    line-height: 1.75;
    letter-spacing: 0.04em;
    font-weight: bold;
    font-size: 14px;
  }
  .m-card-item.is-sp-s .m-card-item__date:not(.is-visible) {
    display: none;
  }
  .m-card-item.is-sp-s .m-card-item__review {
    display: none;
  }
}

/**
 * ※cake.jp の _m-card-scroll.scss から
 * 移植してきたが、ところどころ調整している
 */
.m-card-scroll {
  padding: 24px 0 24px;
}
.m-card-scroll__inner {
  margin: 0 auto;
  max-width: 744px;
  padding: 0 32px;
}
@media screen and (max-width: 959px) {
  .m-card-scroll__inner {
    padding: 0 24px;
    /* edit */
  }
}
.m-card-scroll__header {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.m-card-scroll__navi {
  display: flex;
  align-items: center;
}
.m-card-scroll__title {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 26px;
}
@media screen and (max-width: 767px) {
  .m-card-scroll__title {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  .m-card-scroll__title {
    padding: 0;
    margin: 0;
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-weight: bold;
    font-size: 18px;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .m-card-scroll__title {
    font-size: 18px;
  }
}

.m-card-scroll__titleLabel {
  margin-bottom: 4px;
}
.m-card-scroll__more {
  margin-left: 16px;
}
.m-card-scroll__pager {
  margin-left: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
@media screen and (max-width: 767px) {
  .m-card-scroll__pager {
    display: none;
  }
}
.m-card-scroll__pager .swiper-button-prev,
.m-card-scroll__pager .swiper-button-next {
  position: static;
  transform: none;
  box-sizing: border-box;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid #e8e7e7;
  border-radius: 50%;
  outline: 0;
  background-image: none;
  background-color: #fff;
  font-size: 36px;
  line-height: 1;
  color: currentColor;
  transition-duration: .2s;
  transition-property: all;
  transition-timing-function: ease-out;
}
.m-card-scroll__pager .swiper-button-prev:after,
.m-card-scroll__pager .swiper-button-next:after {
  font-family: 'icomoon';
  font-size: 20px;
  font-weight: bold;
}
.m-card-scroll__pager .swiper-button-prev:after {
  content: "\e904";
  transform: scaleX(-1);
}
.m-card-scroll__pager .swiper-button-next:after {
  content: "\e904";
}
.m-card-scroll__wrap {
  display: block;
  overflow: auto hidden;
}

/**
 * 404ページのコンテンツ部分のレイアウト
 */
.p-404-content {
  margin: 0 auto;
  width: 100%;
  max-width: 680px;
  padding: 32px 16px;
}

/**
 * カテゴリページ(archive.php)のコンテンツ部分のレイアウト
 *
 * ※ホーム(p-frontpage-content)と同じ。
 *  記事ページとはレイアウトのサイズや構造が若干違うので注意
 */
.p-archive-content {
  margin: 0 auto;
  width: 100%;
  max-width: 1120px;
}
.p-archive-content:after {
  display: block;
  clear: both;
  content: "";
}
.p-archive-content__primary, .p-archive-content__tertiary {
  float: left;
  margin-right: 16px;
  width: calc(100% - 296px - 16px);
  padding: 0 16px;
  overflow: hidden;
}
@media screen and (min-width: 768px) and (max-width: 959px) {
  .p-archive-content__primary, .p-archive-content__tertiary {
    margin-right: 0;
    width: calc(100% - 296px);
  }
}
@media screen and (max-width: 767px) {
  .p-archive-content__primary, .p-archive-content__tertiary {
    margin-right: 0;
    width: 100%;
    float: none;
  }
}
.p-archive-content__secondary {
  float: right;
  width: 296px;
  padding: 0 16px;
}
@media screen and (max-width: 767px) {
  .p-archive-content__secondary {
    width: 100%;
    float: none;
  }
}

/**
 * p-archive-title ── アーカイブ（カテゴリ / タグ / 検索結果）の見出しブロック
 *
 * archive.php / search.php で __type（種別ラベル）・__name（見出し）・__count（件数）を
 * 出しているが、__type と __count はスタイル未定義でルートの 10px を継承していたため
 * 異様に小さく見えていた。ここで明示する。
 * 色は @cakejp/design-system トークン（assets/css/ds-tokens.css）を参照。
 */
.p-archive-title {
  padding: 16px 0;
}
@media screen and (max-width: 767px) {
  .p-archive-title {
    padding: 14px 0;
  }
}
.p-archive-title__type {
  display: block;
  margin-bottom: 4px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--text-accent-primary, #e04b00);
}
.p-archive-title__count {
  margin: 6px 0 0;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--text-medium-emphasis, #575352);
}

/**
 * ホーム(front-page.php)のコンテンツ部分のレイアウト
 *
 * ※カテゴリページ(p-archive-content)と同じ。
 *  記事ページとはレイアウトのサイズや構造が若干違うので注意
 *
 * PC: 
 * primary が左サイドのメイン、secondaryが右サイトバー
 * tertiary が左サイドのメイン後の共通部分（cake.jp案内とInstagram案内）
 *
 * SP:
 * primary -> secondary -> tertiary の順で縦並びにレイアウト
 * ※このために、flexboxではなく、floatでレイアウトを組んでいます
 *
 */
.p-frontpage-content {
  margin: 0 auto;
  width: 100%;
  max-width: 1120px;
}
.p-frontpage-content:after {
  display: block;
  clear: both;
  content: "";
}
.p-frontpage-content__primary, .p-frontpage-content__tertiary {
  float: left;
  margin-right: 16px;
  width: calc(100% - 296px - 16px);
  padding: 0 16px;
  overflow: hidden;
}
@media screen and (min-width: 768px) and (max-width: 959px) {
  .p-frontpage-content__primary, .p-frontpage-content__tertiary {
    margin-right: 0;
    width: calc(100% - 296px);
  }
}
@media screen and (max-width: 767px) {
  .p-frontpage-content__primary, .p-frontpage-content__tertiary {
    margin-right: 0;
    width: 100%;
    float: none;
  }
}
.p-frontpage-content__secondary {
  float: right;
  width: 296px;
  padding: 0 16px;
}
@media screen and (max-width: 767px) {
  .p-frontpage-content__secondary {
    width: 100%;
    float: none;
  }
}

.p-frontpage-hero {
  margin: 0;
  padding: 0;
  width: 100%;
}
.p-frontpage-hero__carousel {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.p-frontpage-hero__carousel.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.p-frontpage-hero__carousel .swiper-button-prev, .p-frontpage-hero__carousel .swiper-button-next {
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-image: none;
  background-color: #fff;
  outline: none;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #dbd9d8;
  box-sizing: border-box;
  transform: translateY(-50%);
  font-size: 36px;
  line-height: 1;
  z-index: 1;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-property: all;
}
@media screen and (max-width: 767px) {
  .p-frontpage-hero__carousel .swiper-button-prev, .p-frontpage-hero__carousel .swiper-button-next {
    display: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-frontpage-hero__carousel .swiper-button-prev, .p-frontpage-hero__carousel .swiper-button-next {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: all;
  }
  .p-frontpage-hero__carousel .swiper-button-prev:hover, .p-frontpage-hero__carousel .swiper-button-next:hover {
    background-color: #fbf9f8;
  }
}
.p-frontpage-hero__carousel .swiper-button-prev:after, .p-frontpage-hero__carousel .swiper-button-next:after {
  content: "\e936";
  font-family: 'iconsax' !important;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 20px;
  color: #1c1a1a;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-property: all;
}
.p-frontpage-hero__carousel .swiper-button-prev.swiper-button-disabled, .p-frontpage-hero__carousel .swiper-button-next.swiper-button-disabled {
  pointer-events: none;
  opacity: 1;
}
.p-frontpage-hero__carousel .swiper-button-prev.swiper-button-disabled:after, .p-frontpage-hero__carousel .swiper-button-next.swiper-button-disabled:after {
  color: #dbd9d8;
}
.p-frontpage-hero__carousel .swiper-button-prev {
  right: 50%;
  left: auto;
  margin-right: 33.33333%;
  transform: translate(50%, -50%);
}
@media screen and (min-width: 1800px) {
  .p-frontpage-hero__carousel .swiper-button-prev {
    margin-right: 25%;
  }
}
.p-frontpage-hero__carousel .swiper-button-prev:after {
  transform: rotateY(-180deg);
}
.p-frontpage-hero__carousel .swiper-button-next {
  right: auto;
  left: 50%;
  margin-left: 33.33333%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 1800px) {
  .p-frontpage-hero__carousel .swiper-button-next {
    margin-left: 25%;
  }
}
.p-frontpage-hero__link {
  display: block;
  width: 100%;
  aspect-ratio: 1.89 / 1;
}
@media (hover: hover) and (pointer: fine) {
  .p-frontpage-hero__link {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: opacity;
  }
  .p-frontpage-hero__link:hover {
    opacity: 0.8;
  }
}
@media screen and (max-width: 767px) {
  .p-frontpage-hero__link {
    max-height: 100%;
  }
}
.p-frontpage-hero__image {
  position: relative;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .p-frontpage-hero__image {
    aspect-ratio: 1.89 / 1;
  }
}
.p-frontpage-hero__image::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-property: background-color;
}
@media screen and (max-width: 767px) {
  .p-frontpage-hero__image::before {
    display: none;
  }
}
.p-frontpage-hero__image img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.p-frontpage-hero .swiper-slide-active .p-frontpage-hero__image:before {
  background-color: rgba(0, 0, 0, 0.3);
}
.p-frontpage-hero__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 32px;
  z-index: 2;
}
@media screen and (min-width: 768px) and (max-width: 959px) {
  .p-frontpage-hero__info {
    padding: 16px;
  }
}
@media screen and (max-width: 767px) {
  .p-frontpage-hero__info {
    position: relative;
    top: 0;
    padding: 16px;
    background-color: #FFF1E5;
  }
}
.p-frontpage-hero__title {
  color: #fff;
  padding: 0;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 22px;
}
@media screen and (max-width: 767px) {
  .p-frontpage-hero__title {
    font-size: 21px;
  }
}
@media screen and (max-width: 767px) {
  .p-frontpage-hero__title {
    color: #1C1A1A;
    line-height: 1.75;
    letter-spacing: 0.04em;
    font-weight: bold;
    font-size: 16px;
  }
}
.p-frontpage-hero__date {
  color: #fff;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.015em;
  font-weight: normal;
}
@media screen and (max-width: 767px) {
  .p-frontpage-hero__date {
    font-size: 10px;
  }
}
@media screen and (max-width: 767px) {
  .p-frontpage-hero__date {
    color: #575352;
  }
}
.p-frontpage-hero__tags {
  display: flex;
  gap: 8px;
  overflow-x: scroll;
  margin: 0 -32px;
  padding: 0 32px;
}
@media screen and (min-width: 768px) and (max-width: 959px) {
  .p-frontpage-hero__tags {
    margin: 0 -16px;
    padding: 0 16px;
  }
}
@media screen and (max-width: 767px) {
  .p-frontpage-hero__tags {
    margin: 0 -16px;
    padding: 0 16px;
  }
}
.p-frontpage-hero__tags::-webkit-scrollbar {
  display: none;
}
.p-frontpage-hero__tags .c-picker-tag:hover {
  cursor: default;
}

.p-frontpage-posts {
  padding: 12px 0;
}
@media screen and (max-width: 767px) {
  .p-frontpage-posts {
    padding: 8px 0;
  }
}

.p-frontpage-tieup {
  border-radius: 8px;
  background-color: #fbf9f8;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (max-width: 767px) {
  .p-frontpage-tieup {
    margin: 0 -16px;
    border-radius: 0;
    padding: 16px;
  }
}
.p-frontpage-tieup__list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 959px) {
  .p-frontpage-tieup__list {
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .p-frontpage-tieup__footer {
    text-align: center;
  }
}
.p-frontpage-tieup__button {
  max-width: 312px;
  border: 1px solid #dbd9d8;
}

.p-card-tieup__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}
.p-card-tieup__title {
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.p-card-tieup__date {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.015em;
  font-weight: normal;
  color: #575352;
}
@media screen and (max-width: 767px) {
  .p-card-tieup__date {
    font-size: 10px;
  }
}

.p-header-search {
  display: block;
}
@media screen and (max-width: 767px) {
  .p-header-search {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: _zindex(modal_overlay);
  }
}
.p-header-search__body {
  display: none;
}
@media screen and (max-width: 767px) {
  .p-header-search__body {
    display: block;
  }
}
.p-header-search__menu {
  margin-top: -8px;
}

.p-header-search-keyword {
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-header-search-keyword {
    display: none;
    height: 52px;
    padding: 4px 8px;
    box-sizing: border-box;
  }
}
.p-header-search-keyword__back {
  display: none;
  flex-shrink: 0;
  margin-left: -8px;
}
@media screen and (max-width: 767px) {
  .p-header-search-keyword__back {
    display: block;
  }
}
.p-header-search-keyword__button {
  width: 40px;
  height: 40px;
}
.p-header-search-keyword__button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-header-search-keyword__button > i {
  font-size: 20px;
  padding: 2px;
}
.p-header-search-keyword__form {
  flex-grow: 1;
}
.p-header-search-keyword__window {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 480px;
  max-width: 560px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
  -moz-box-shadow: 0px 0px 5px #333;
  -webkit-box-shadow: 0px 0px 5px #333;
  box-shadow: 0px 0px 5px #333;
}
@media screen and (max-width: 767px) {
  .p-header-search-keyword__window {
    display: none;
  }
}

.p-single-breadcrumbs {
  width: 100%;
  padding: 16px;
}

/**
 * 記事ページ(single.php)のコンテンツ部分のレイアウト
 *
 * ※ホームやカテゴリページとはレイアウトのサイズや構造が若干違うので注意
 *
 * PC: 
 * primary が左サイドのメイン、secondaryが右サイトバー
 * tertiary が左サイドのメイン後の共通部分（cake.jp案内とInstagram案内）
 *
 * SP:
 * primary -> secondary -> tertiary の順で縦並びにレイアウト
 * ※このために、flexboxではなく、floatでレイアウトを組んでいます
 *
 */
.p-single-content {
  margin: 0 auto;
  width: 100%;
  max-width: 1232px;
}
.p-single-content:after {
  display: block;
  clear: both;
  content: "";
}
.p-single-content__primary, .p-single-content__tertiary {
  float: left;
  margin-right: 32px;
  width: calc(100% - 296px - 32px);
  overflow: hidden;
}
@media screen and (min-width: 768px) and (max-width: 959px) {
  .p-single-content__primary, .p-single-content__tertiary {
    margin-right: 0;
    width: calc(100% - 296px);
  }
}
@media screen and (max-width: 767px) {
  .p-single-content__primary, .p-single-content__tertiary {
    margin-right: 0;
    width: 100%;
    float: none;
  }
}
.p-single-content__secondary {
  float: right;
  width: 296px;
  padding: 0 16px;
}
@media screen and (max-width: 767px) {
  .p-single-content__secondary {
    width: 100%;
    padding: 0 24px;
    float: none;
  }
}
.p-single-content__tertiary {
  padding: 0 32px;
}
@media screen and (min-width: 768px) and (max-width: 959px) {
  .p-single-content__tertiary {
    padding: 0 32px;
  }
}
@media screen and (max-width: 767px) {
  .p-single-content__tertiary {
    padding: 0 24px;
  }
}

.p-single-fab-cv {
  position: fixed;
  bottom: calc(87px + env(safe-area-inset-bottom));
  /* 71(フッターナビの高さ) + 16 + safeareaのボトム */
  left: 0;
  right: 0;
  width: 100%;
  justify-content: center;
  align-items: center;
  z-index: 50;
  display: none;
}
@media screen and (max-width: 767px) {
  .p-single-fab-cv {
    display: flex;
    transform: translateY(calc(100px + 100%));
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: all;
  }
  .p-single-fab-cv.is-active {
    transform: none;
  }
}
.p-single-fab-cv__button {
  border-radius: 36px;
  padding: 7px 16px 8px;
  box-shadow: 0px 8px 16px -6px rgba(24, 39, 75, 0.08), 0px 6px 8px -6px rgba(24, 39, 75, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
  background: #E04B00;
  color: #fff;
}
.p-single-fab-cv__button:hover {
  filter: none;
  /* ベース打ち消し用 */
  opacity: 1.0;
  /* ベース打ち消し用 */
}
.p-single-fab-cv__button-label {
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
}

/**
 * 「この記事の商品」のモーダル（PC）
 * 
 * 記事を1/3スクロールすると右下に出てくる（PCサイズのみ）
 */
.p-single-modal-cv {
  box-sizing: border-box;
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: #fff;
  border-radius: 12px;
  padding: 8px 0;
  width: 320px;
  overflow: hidden;
  box-shadow: 0px 12px 32px -4px rgba(24, 39, 75, 0.12), 0px 8px 16px -6px rgba(24, 39, 75, 0.12), 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateX(100%);
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 16px;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-property: all;
}
@media screen and (max-width: 767px) {
  .p-single-modal-cv {
    display: none;
  }
}
.p-single-modal-cv.is-active {
  transform: none;
  opacity: 1;
}
.p-single-modal-cv.is-close {
  visibility: hidden;
  transform: translateX(100%);
}
.p-single-modal-cv__header {
  width: 100%;
  padding: 9px 16px;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 1;
}
.p-single-modal-cv__heading {
  margin-bottom: 0;
}
.p-single-modal-cv__close {
  transform: rotate(45deg);
  font-size: 18px;
  cursor: pointer;
}
.p-single-modal-cv__body {
  overflow: auto;
  max-height: calc(96px * 3 + 40px);
  padding: 0 16px;
}

/**
 * 投稿記事ページでの「この記事の商品」セミモーダル
 *
 * cake.jpの app/src/scss/v2/components/_p-detail-recommend-upcell-items.scss を移植して調整したもの
 */
.p-single-semimodal-cv {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: normal;
  font-size: 16px;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-property: all;
}
.p-single-semimodal-cv.is-active {
  opacity: 1;
  visibility: visible;
}
.p-single-semimodal-cv.is-active .p-single-semimodal-cv__contents {
  transform: none;
}
.p-single-semimodal-cv__overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
}
.p-single-semimodal-cv__contents {
  width: 480px;
  height: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1;
  transform: translateX(100%);
  background-color: #fff;
  border-radius: 10px 0 0 10px;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-property: all;
  overflow: auto;
}
@media screen and (max-width: 767px) {
  .p-single-semimodal-cv__contents {
    width: 100%;
    height: auto;
    right: 0;
    transform: translateY(100%);
    border-radius: 8px 8px 0 0;
  }
}
.p-single-semimodal-cv__close {
  transform: rotate(45deg);
  font-size: 18px;
  cursor: pointer;
}
.p-single-semimodal-cv__header {
  width: 480px;
  position: fixed;
  padding: 40px;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom: 1px solid #DBD9D8;
  border-top-left-radius: 10px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .p-single-semimodal-cv__header {
    border-top-left-radius: 8px;
    width: auto;
    position: static;
    padding: 16px;
  }
}
.p-single-semimodal-cv__heading {
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .p-single-semimodal-cv__heading {
    margin-bottom: 0;
  }
}
.p-single-semimodal-cv__body {
  margin-top: 290px;
  padding: 40px;
  overflow: auto;
}
@media screen and (max-width: 767px) {
  .p-single-semimodal-cv__body {
    margin-top: 0;
    padding: 16px;
  }
}
.p-single-semimodal-cv__footer {
  padding: 16px;
  border-top: 1px solid #DBD9D8;
}
.p-single-semimodal-cv__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
}
@media screen and (max-width: 767px) {
  .p-single-semimodal-cv__buttons {
    flex-wrap: nowrap;
  }
}
.p-single-semimodal-cv__buttons > * {
  width: 100%;
  margin-bottom: 16px;
}
.p-single-semimodal-cv__buttons > *:first-child {
  margin-bottom: 0;
}
.p-single-semimodal-cv__buttons > *:first-child:hover {
  background-color: #EBE9E8;
}
.p-single-semimodal-cv__buttons > *:last-child {
  color: #fff;
}
.p-single-semimodal-cv__buttons > *:last-child:hover {
  background-color: #BD3200;
}
@media screen and (max-width: 767px) {
  .p-single-semimodal-cv__buttons > * {
    margin-bottom: 0;
    margin-right: 8px;
  }
  .p-single-semimodal-cv__buttons > *:last-child {
    margin-right: 0;
  }
}
@media screen and (max-width: 767px) {
  .p-single-semimodal-cv__buttons--top {
    display: none;
  }
}
.p-single-semimodal-cv__buttons--bottom {
  display: none;
}
@media screen and (max-width: 767px) {
  .p-single-semimodal-cv__buttons--bottom {
    display: flex;
  }
}

/**
 * 投稿記事ページでの「この記事の商品」セミモーダル
 *
 * cake.jpの app/src/scss/v2/components/_p-detail-recommend-upcell-items.scss を移植して調整したもの
 */
@media screen and (max-width: 767px) {
  .p-single-recommend-upcell-items__contents {
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px;
  }
  .p-single-recommend-upcell-items__contents::-webkit-scrollbar {
    display: none;
  }
}
.p-single-recommend-upcell-items__list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 8px;
}
@media screen and (max-width: 767px) {
  .p-single-recommend-upcell-items__list {
    flex-wrap: nowrap;
    gap: 0 8px;
  }
}
.p-single-recommend-upcell-items__list > li {
  box-sizing: content-box;
  flex-shrink: 0;
  width: calc((100% - 16px) / 3);
}
@media screen and (max-width: 767px) {
  .p-single-recommend-upcell-items__list > li {
    width: calc((100% - 16px) / 2.5);
  }
  .p-single-recommend-upcell-items__list > li:last-child {
    padding-right: 16px;
  }
}

.p-single-related-posts {
  margin: 0 auto;
  max-width: 744px;
  padding: 32px 32px;
}
@media screen and (max-width: 767px) {
  .p-single-related-posts {
    padding: 24px;
  }
}

.p-single-post__product-intro {
  margin: 24px 0;
}

.p-single-card-title {
  font-size: 14px;
}
@media screen and (max-width: 767px) {
  .p-single-card-title {
    font-size: 12px;
  }
}

.p-single-card-price {
  font-weight: 700;
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .p-single-card-price {
    font-weight: normal;
    font-size: 12px;
  }
}

/* ======================================================================
 z-index
====================================================================== */
.l_loader {
  z-index: 1000;
}

.l_menu_sp {
  z-index: 999;
}

.head_flame {
  z-index: 15;
  /* cake.jp .head_frame と同じにしておく */
}

.c_btn_p_top {
  z-index: 997;
}

.l_side {
  z-index: 996;
}

.l-footer-navi {
  z-index: 4;
  /* cake.jp と同じにしておく */
}

.l-drawer-menu {
  z-index: 20;
  /* cake.jp と同じにしておく */
}

.p-single-fab-cv {
  z-index: 4;
}

.p-single-semimodal-cv {
  z-index: 20;
}

.p-single-modal-cv {
  z-index: 20;
}

/* =================================
 p_top
================================= */
.l_menu_sp_top {
  z-index: 999;
}

.l_header_top {
  z-index: 998;
}

.l_header_sp_top {
  z-index: 998;
}

.c_btn_p_top_top {
  z-index: 997;
}

.l_side_top {
  z-index: 996;
}



@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
 */
/**
 * c-header-cakejp ── ヘッダー内「Cake.jpへ」導線ボタン
 *
 * マガジンから Cake.jp 本体（EC）へ送客するためのピル型ボタン。
 * header_block--right のアイコン群の手前に配置し、タブレット/PCで表示する。
 * カラーは @cakejp/design-system トークン（var(--...)）を参照（ds-tokens.css 前提）。
 * ※このブリッジは dart-sass で単体コンパイルするため、_color() 等の関数や
 *   media_sp ミックスインは使わず素の CSS / @media で記述する。
 */
.c-header-cakejp {
  /* CSS で描く右向きシェブロン（アイコンフォント非依存） */
}
.c-header-cakejp, .c-header-cakejp:link, .c-header-cakejp:visited {
  /* style.css の古いリセット `a:link { color: #000 }`（詳細度 0,1,1）に
     クラス単体（0,1,0）では負けるため、:link / :visited を併記して (0,2,0) にする。
     ※ a 以外の要素にこのクラスを流用する場合は色が負けるので注意。 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  /* ベタ塗りのブランドオレンジだと主張が強すぎるため淡い塗り＋濃いオレンジ文字にする。
     ヘッダーは補助導線という位置づけ。 */
  background: var(--brand-cake-orange-ultra-light, #ffecd9);
  border: 1px solid var(--brand-cake-orange-light, #ffd4b2);
  color: var(--primitive-orange-900, #a62700);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.c-header-cakejp:hover {
  background: var(--brand-cake-orange-light, #ffd4b2);
  color: var(--primitive-orange-900, #a62700);
}
.c-header-cakejp__label {
  display: inline;
}
.c-header-cakejp__arrow {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* 既存ヘッダーのタブレット範囲（768〜959px）でも右側の占有幅を抑える。
   ベース側が `.c-header-cakejp:link`（0,2,0）で height 等を持つため、
   ここもクラス単体（0,1,0）では負ける。:link / :visited を併記して詳細度を揃える。 */
@media (max-width: 959px) {
  .c-header-cakejp, .c-header-cakejp:link, .c-header-cakejp:visited {
    height: 32px;
    padding: 0 10px;
    font-size: 1.2rem;
    gap: 2px;
  }
}
/* 既存の media_sp（767px以下）ではロゴ・基本アイコンを優先し、
   Cake.jp導線はサイドバーとフッターに委ねる。 */
@media (max-width: 767px) {
  .c-header-cakejp, .c-header-cakejp:link, .c-header-cakejp:visited {
    display: none;
  }
}
/**
 * カテゴリナビゲーション
 * 社長モックの .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;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s;
  /* style.css の古いリセット `a:link { color: #000 }`（詳細度 0,1,1）に
     クラス単体（0,1,0）では負けるため、:link / :visited を併記して (0,2,0) にする。
     ※ :hover / .is-active を後勝ちさせたいので、それらより前に置くこと。 */
}
.c-category-navigation__link, .c-category-navigation__link:link, .c-category-navigation__link:visited {
  color: var(--primitive-gray-800);
}
.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 .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: 1.0rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: .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: 1.0rem;
  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: 2.0rem;
  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: 1.0rem;
  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: 1.0rem;
  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: 3.0rem;
  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 .2s, color .2s, border-color .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: 2.0rem;
  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 .2s, border-color .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 .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: 1.0rem;
  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: .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;
}

@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);
  font-weight: 700;
  font-size: 1.3rem;
  padding: 12px 24px;
  border-radius: 4px;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  /* style.css の古いリセット `a:link { color: #000 }`（詳細度 0,1,1）に
     クラス単体（0,1,0）では負けるため、:link / :visited を併記して (0,2,0) にする。
     ※ a 以外の要素にこのクラスを流用する場合は色が負けるので注意。 */
}
.p-frontpage-scene__cta-btn, .p-frontpage-scene__cta-btn:link, .p-frontpage-scene__cta-btn:visited {
  color: var(--surface-primary);
}
.p-frontpage-scene__cta-btn:hover {
  background: var(--primitive-orange-800);
}

.c-scene-tile {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  text-decoration: none;
  /* style.css の古いリセット `a:link { color: #000 }`（詳細度 0,1,1）に
     クラス単体（0,1,0）では負けるため、:link / :visited を併記して (0,2,0) にする。
     子要素（__title 等）はここから color を継承する。
     ※ a 以外の要素にこのクラスを流用する場合は色が負けるので注意。 */
}
.c-scene-tile, .c-scene-tile:link, .c-scene-tile:visited {
  color: var(--surface-primary);
}
.c-scene-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .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 .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: 60%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.p-hero-carousel__meta {
  position: absolute;
  left: 32px;
  bottom: 32px;
  right: 32px;
  color: var(--surface-primary, #fff);
  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: .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;
  color: var(--surface-primary, #fff);
  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 .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 .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: 1.0rem;
  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;
  }
}
/* SP: ステージ高が約180pxしかないのに対しタイトルが 20px・行数無制限のため、
   長いタイトルの記事だと画像を覆う／枠外へ溢れる。文字を詰めて3行で打ち切る。 */
@media (max-width: 767px) {
  .p-hero-carousel__meta {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .p-hero-carousel__cat {
    margin-bottom: 8px;
    padding: 3px 9px;
    font-size: 1rem;
  }

  .p-hero-carousel__title {
    font-size: 1.5rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .p-hero-carousel__byline {
    margin-top: 8px;
    font-size: 1.1rem;
  }

  /* 矢印は出さない。ステージ高が約180pxしかなく、枠内に置くと画像かタイトルを潰し、
     枠外に出す余地も左右16pxしかないため。SPの送りはスワイプ（hero-carousel.js）とドットに委ねる。 */
  .p-hero-carousel__arrow {
    display: none;
  }

  /* ドットは見た目8pxのまま、擬似要素で44px相当の当たり判定を確保する */
  .p-hero-carousel__dots {
    bottom: 12px;
    gap: 10px;
  }

  .p-hero-carousel__dot {
    position: relative;
  }
  .p-hero-carousel__dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}
/**
 * アーカイブ（カテゴリ一覧）のマガジンカードグリッド
 * 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 .2s, border-color .2s, color .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;
}

/* サイド（CTAカード + ランキング）は l-frame-widgets の縦積み flex + gap をそのまま使う。
   ここを display:block に上書きすると gap が無効化され、枠線付きカード同士が密着するため不可。
   padding-top だけメインカラムの見出し位置に合わせて上書きする。 */
.feature-ranking-layout__side .l-frame-widgets {
  display: flex;
  flex-direction: column;
  gap: 16px;
  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: .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 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-card-mag__thumb, .c-card-guide__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 .2s ease, color .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 .2s ease;
}

.scene-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .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: 2.0rem;
}

.scene-card:hover img {
  opacity: .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 #ebe9e8;
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* min-height は撤去。高さはコンテンツ依存とし、同一行の高さ揃えは grid の stretch に任せる。
     （CTA無しカードでタグ下に大きな空白が出るのを防ぐ） */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: #1c1a1a;
  transition: border-color .2s ease, box-shadow .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: #fbf9f8;
  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: #1c1a1a;
}

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

.w-catch {
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.5;
  color: #1c1a1a;
  padding: 10px 0;
  border-top: 1px solid #ebe9e8;
  border-bottom: 1px solid #ebe9e8;
  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: 1.0rem;
  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 #1c1a1a;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1.25rem;
  color: #1c1a1a;
  background: #fff;
  transition: background-color .2s ease, color .2s ease;
}

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

.w-card:hover .w-cta {
  background: #1c1a1a;
  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: var(--surface-tertiary, #F4F2F1);
}

/* ===== トレンドニュース：上段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: var(--surface-tertiary, #F4F2F1);
}

.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: var(--surface-tertiary, #F4F2F1);
}

.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: #fbf9f8 !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: #1c1a1a;
}

.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.0;
  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 .2s ease;
}

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

.mag-footer__legal {
  max-width: 1120px;
  margin: 32px auto 0;
  padding: 20px 16px 0;
  border-top: 1px solid #ebe9e8;
  font-size: 1.1rem;
  color: #575352;
  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-widget-rank__thumb, .w-card .w-av img, .scene-card img {
  transition: filter .2s ease !important;
}

/* hover：画像だけ少し明るく（白いベールがうっすら乗る程度） */
.c-card-mag:hover .c-card-mag__thumb img,
.c-card-guide:hover .c-card-guide__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, .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, .w-card {
  border-color: var(--border-medium-emphasis, #DBD9D8);
}

.c-card-guide:hover, .w-card:hover {
  border-color: var(--border-medium-emphasis, #DBD9D8) !important;
}

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




.c-widget-rank { background: var(--surface-primary, #FFFFFF); border: 1px solid var(--border-medium-emphasis, #DBD9D8); border-radius: 14px; padding: 18px 16px; margin-bottom: 0; box-shadow: none; }
.c-widget-rank__title { font-size: 1.5rem; font-weight: 700; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--brand-cake-orange, #E04B00); color: var(--text-high-emphasis, #1C1A1A); }
/* セグメント型タブ（角丸） */
.c-widget-rank__tabs { display: flex; width: 100%; margin: 0 0 14px; background: var(--surface-tertiary, #F4F2F1); border: 0; border-radius: 999px; padding: 4px; gap: 4px; }
.c-widget-rank__tab { flex: 1; height: 34px; padding: 0 4px; background: transparent; border: 0; border-radius: 999px; font-size: 1.15rem; font-weight: 700; color: var(--text-low-emphasis, #787675); cursor: pointer; position: relative; transition: background-color .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.c-widget-rank__tab::after { display: none; }
.c-widget-rank__tab:hover { color: var(--text-high-emphasis, #1C1A1A); }
.c-widget-rank__tab.is-on { color: var(--text-high-emphasis, #1C1A1A); background: var(--surface-primary, #FFFFFF); box-shadow: none; }
.c-widget-rank__panel { display: none; }
.c-widget-rank__panel.is-on { display: block; }
.c-widget-rank__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.c-widget-rank__item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 0; border-top: 0; }
.c-widget-rank__item + .c-widget-rank__item { padding-top: 12px; border-top: 1px solid var(--primitive-gray-100, #F4F2F1); }
.c-widget-rank__n { flex: 0 0 24px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primitive-gray-400, #B7B5B4); color: var(--text-on-inverse, #FFFFFF); font-weight: 800; font-size: 1.15rem; margin-top: 2px; box-shadow: none; }
/* 1〜3位のメダル色は ds パレット外の意味的装飾（金/銀/銅）のため意図的に据え置く */
.c-widget-rank__item--top1 .c-widget-rank__n { background: linear-gradient(135deg, #FFC83D 0%, #F08A00 100%); }
.c-widget-rank__item--top2 .c-widget-rank__n { background: #b9bcc2; }
.c-widget-rank__item--top3 .c-widget-rank__n { background: #c08a55; }
.c-widget-rank__link { display: flex; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; align-items: flex-start; }
.c-widget-rank__thumb { width: 64px; height: 46px; object-fit: cover; border-radius: 8px; flex: 0 0 64px; }
.c-widget-rank__body { flex: 1; min-width: 0; }
.c-widget-rank__ti { font-size: 1.2rem; font-weight: 600; line-height: 1.45; color: var(--text-high-emphasis, #1C1A1A); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-widget-rank__cat { font-size: 1rem; color: var(--brand-cake-orange, #E04B00); margin-top: 3px; font-weight: 600; }
.c-widget-rank__item--top1 .c-widget-rank__thumb { width: 100%; height: 130px; }
.c-widget-rank__item--top1 .c-widget-rank__link { flex-direction: column; }
.c-widget-rank__item--top1 .c-widget-rank__ti { font-size: 1.35rem; -webkit-line-clamp: 3; }
.c-widget-rank__empty { color: var(--text-medium-emphasis, #575352); font-size: 1.1rem; }


/* ===== フッター・ナビ（アコーディオン / SP）===== */
.p-footer-nav { background: var(--surface-secondary, #f7f7f7); border-top: 1px solid var(--border-medium-emphasis, #e5e5e5); }
.p-footer-nav__inner { max-width: 1200px; margin: 0 auto; padding: 4px 16px; }
.p-footer-nav__group { border-bottom: 1px solid var(--border-low-emphasis, #ececec); }
.p-footer-nav__head { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 2px; font-size: 1.45rem; font-weight: 700; color: var(--text-high-emphasis, #1C1A1A); }
.p-footer-nav__head::-webkit-details-marker { display: none; }
.p-footer-nav__head::after { content: '+'; font-size: 2rem; font-weight: 400; line-height: 1; color: var(--text-medium-emphasis, #575352); }
.p-footer-nav__group[open] > .p-footer-nav__head::after { content: '−'; }
.p-footer-nav__list { list-style: none; margin: 0; padding: 0 2px 16px; display: flex; flex-direction: column; gap: 14px; }
.p-footer-nav__list a { font-size: 1.3rem; color: var(--text-medium-emphasis, #575352); text-decoration: none; }
.p-footer-nav__list a:hover { color: var(--brand-cake-orange, #E04B00); }
.p-footer-nav__list--tags { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; }
.p-footer-nav__more a { font-weight: 700; color: var(--text-accent-primary, #E04B00); }

/* ===== PC: 常時展開・4カラム（JSなし。中身をCSSで強制表示）===== */
@media (min-width: 768px) {
  /* カラム数が減っても破綻しないよう auto-fit（最小220px・最大1fr）で自動配置 */
  .p-footer-nav__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 32px; padding: 36px 16px; align-items: start; }
  .p-footer-nav__group { border-bottom: 0; }
  .p-footer-nav__head { cursor: default; pointer-events: none; padding: 0 0 14px; font-size: 1.3rem; }
  .p-footer-nav__head::after { display: none; }
  .p-footer-nav__group > .p-footer-nav__list { display: flex !important; padding: 0; gap: 10px; }
  /* シーンは項目数が多く縦長になるので、2トラック分を使って2列に流す */
  .p-footer-nav__group--scene { grid-column: span 2; }
  .p-footer-nav__group--scene > .p-footer-nav__list {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
  /* 人気タグはカラムに押し込めず、グリッド全幅を1行使って横に流す */
  .p-footer-nav__group--tags { grid-column: 1 / -1; margin-top: 12px; padding-top: 20px;
    border-top: 1px solid var(--border-low-emphasis, #ececec); }
  .p-footer-nav__group--tags > .p-footer-nav__list--tags { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; }
}


/* DS pagination 準拠 */
.c-pagination { display: flex; justify-content: center; width: 100%; margin: 28px 0 8px; }
.c-pagination__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.c-pagination__item { list-style: none; }
/* 各ページボタン（a.page-numbers）= ghost */
.c-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 8px;
  border-radius: 8px; border: 0; background: transparent;
  color: var(--text-high-emphasis); font-size: 1.3rem; font-weight: 600;
  text-decoration: none; transition: background .15s, color .15s; gap: 4px;
}
.c-pagination .page-numbers:hover { background: var(--surface-secondary); }
/* 現在ページ = secondary（塗り） */
.c-pagination .page-numbers.current {
  background: var(--brand-cake-orange); color: var(--surface-primary); font-weight: 700;
}
/* 省略(…) */
.c-pagination .page-numbers.dots { background: transparent; color: var(--text-low-emphasis); min-width: 28px; }
.c-pagination .page-numbers.dots:hover { background: transparent; }
/* 前へ/次へ */
.c-pagination .prev, .c-pagination .next { padding: 0 12px; color: var(--text-medium-emphasis); }
.c-pagination__chev { font-size: 1.6rem; line-height: 1; }
@media (max-width: 540px) {
  .c-pagination .page-numbers { min-width: 36px; height: 36px; font-size: 1.2rem; }
  .c-pagination__txt { display: none; } /* モバイルは前へ/次への文字を隠しシェブロンのみ */
  .c-pagination .prev, .c-pagination .next { padding: 0 8px; }
}


/* ライター個別ページ（プロフィール見出し）。記事一覧・ページャー・カードは既存クラスを流用し、
   固有の追加スタイルはプロフィール部のみ。色は既存トークン（全て小文字）を再利用する。 */
.p-writer-single { padding: 16px 0 40px; }
.p-writer-single__profile {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 20px 0 28px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border-medium-emphasis, #E5E2E0);
}
.p-writer-single__av {
  flex: 0 0 auto; width: 96px; height: 96px;
  border-radius: 999px; overflow: hidden;
  background: var(--surface-secondary, #F3F1F0);
}
.p-writer-single__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-writer-single__body { flex: 1 1 auto; min-width: 0; }
.p-writer-single__name { margin: 0; font-size: 2.2rem; font-weight: 800; line-height: 1.3; color: var(--text-high-emphasis, #1C1A1A); }
.p-writer-single__role { margin: 4px 0 0; font-size: 1.3rem; font-weight: 600; color: var(--text-medium-emphasis, #575352); }
.p-writer-single__catch { margin: 12px 0 0; font-size: 1.6rem; font-weight: 700; line-height: 1.5; color: var(--text-high-emphasis, #1C1A1A); }
.p-writer-single__catch em { font-style: normal; color: var(--brand-cake-orange, #E04B00); }
 .p-writer-single__desc { margin: 10px 0 0; font-size: 1.4rem; line-height: 1.8; color: var(--text-medium-emphasis, #575352); }
 /* style.css の古いリセット `a:link { color: #000 }`（詳細度 0,1,1）にクラス単体（0,1,0）では
    負けるため、:link / :visited を併記して (0,2,0) にする。 */
 .p-writer-single__link,
 .p-writer-single__link:link,
 .p-writer-single__link:visited { display: inline-block; margin-top: 14px; font-size: 1.3rem; font-weight: 700; color: var(--brand-cake-orange, #E04B00); text-decoration: none; }
.p-writer-single__link:hover { text-decoration: underline; }
.p-writer-single__articles { padding-top: 24px; }
.p-writer-single__articles-title { margin: 0 0 16px; font-size: 1.8rem; font-weight: 800; color: var(--text-high-emphasis, #1C1A1A); }
.p-writer-single__empty { color: var(--text-medium-emphasis, #575352); font-size: 1.4rem; padding: 12px 0 20px; }
@media (max-width: 540px) {
  .p-writer-single__profile { gap: 14px; }
  .p-writer-single__av { width: 72px; height: 72px; }
  .p-writer-single__name { font-size: 1.9rem; }
}


/* ===== シーンから探す：カテゴリ一覧（モック準拠リデザイン） ===== */
.p-scene-index { padding: 16px 0 44px; }
.p-scene-index__group { margin-bottom: 34px; }
.p-scene-index__group-title {
  display: none; /* 「国内9領域」「シーズナル」は内部用語のため非表示 */
}
.p-scene-index .p-frontpage-scene__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px !important; gap: 14px;
}

/* タイル本体：角丸・微シャドウ・ホバーで持ち上げ */
.p-scene-index .c-scene-tile {
  border-radius: 14px; padding: 16px;
  background: #2b211d;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.p-scene-index .c-scene-tile img { transition: transform .5s ease; }
/* 下からの濃いグラデで文字を常に可読に */
.p-scene-index .c-scene-tile::before {
  background: linear-gradient(0deg,
    rgba(18,10,6,.82) 0%, rgba(18,10,6,.46) 34%,
    rgba(18,10,6,.06) 64%, rgba(18,10,6,0) 100%);
}
.p-scene-index .c-scene-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.p-scene-index .c-scene-tile:hover img { transform: scale(1.06); }

/* 画像なしタイルはブランドグラデで意図的な見た目に */
.p-scene-index .c-scene-tile:not(:has(img)) {
  background: linear-gradient(135deg, #F07A1E 0%, #E04B00 55%, #A62700 100%);
}

/* タイトル */
.p-scene-index .c-scene-tile__title {
  color: #fff !important;
  font-size: 1.55rem; font-weight: 800; line-height: 1.3;
  letter-spacing: .01em; text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.p-scene-index .c-scene-tile--big .c-scene-tile__title { font-size: 2.4rem; }

/* 件数バッジ（ピル） */
.p-scene-index .c-scene-tile__pr {
  display: inline-flex; align-items: center;
  margin-top: 9px; padding: 3px 11px;
  font-size: 1.02rem; font-weight: 700; line-height: 1.7;
  color: #fff; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}

@media (max-width: 900px) {
  .p-scene-index .p-frontpage-scene__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 140px !important; }
}
@media (max-width: 540px) {
  .p-scene-index .p-frontpage-scene__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 124px !important; }
  .p-scene-index .c-scene-tile--big .c-scene-tile__title { font-size: 1.9rem; }
}


.p-tags-index { padding: 16px 0 40px; }
.p-tags-index__cloud { display: flex; flex-wrap: wrap; gap: 18px 16px; align-items: center; }
.p-tags-index .c-tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px;
  background: #fff; color: var(--text-high-emphasis, #1C1A1A);
  border: 1px solid var(--border-line, #E5E2E0);
  font-weight: 700; text-decoration: none; transition: background-color .15s, border-color .15s; white-space: nowrap; }
.p-tags-index .c-tag-chip:hover { background: var(--surface-subtle, #FAF9F8); border-color: var(--border-line-strong, #D8D5D2); }
.p-tags-index .c-tag-chip__hash { color: var(--text-low-emphasis, #787675); }
.p-tags-index .c-tag-chip__count { font-size: .82em; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: var(--text-medium-emphasis, #575352); background: var(--surface-muted, #F3F1F0); }
/* 投稿数によるサイズ差（簡易タグクラウド。最小でも読める14pxを下限に） */
.p-tags-index .c-tag-chip--s1 { font-size: 1.4rem; }
.p-tags-index .c-tag-chip--s2 { font-size: 1.6rem; }
.p-tags-index .c-tag-chip--s3 { font-size: 1.8rem; }
.p-tags-index .c-tag-chip--s4 { font-size: 2.1rem; }
/* PC（このページのみ）: サイズ差はやめて読みやすい18px均一に */
@media (min-width: 768px) {
  .p-tags-index .c-tag-chip { font-size: 1.8rem; padding: 8px 16px; }
}
.p-tags-index__total { margin-top: 20px; color: var(--text-medium-emphasis, #575352); font-size: 1.2rem; }


/* ===== カテゴリウィジェット（サイドバー用） ===== */
.c-widget-cats { background: #fff; border: 0; border-radius: 12px; padding: 16px 8px 0; margin-bottom: 12px; }
.c-widget-cats__title { font-size: 1.7rem; font-weight: 700; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--brand-cake-orange, #E04B00); color: var(--text-high-emphasis, #1C1A1A); }
.c-widget-cats__group { padding: 12px 0; border-top: 1px dashed var(--primitive-gray-200, #EBE9E8); }
.c-widget-cats__group:first-of-type { border-top: 0; padding-top: 0; }
.c-widget-cats__group:last-of-type { padding-bottom: 0; }
.c-widget-cats__group-title { font-size: 1.35rem; font-weight: 700; color: var(--text-medium-emphasis, #575352); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.c-widget-cats__icon { font-size: 1.7rem; line-height: 1; }
.c-widget-cats__chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 全グループ白ベースに統一（背景色で分類しない・雑誌サイトらしい落ち着いたUI） */
.c-widget-cats .c-cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 8.5px; border-radius: 999px;
  background: var(--surface-primary, #FFFFFF); border: 1px solid var(--border-medium-emphasis, #DBD9D8); color: var(--primitive-gray-800, #3A3736);
  font-size: 1.35rem; font-weight: 700; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; white-space: nowrap; }
.c-widget-cats .c-cat-chip:hover { background: var(--surface-secondary, #FBF9F8); }
.c-widget-cats .c-cat-chip__count { font-size: 1.1rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: var(--primitive-gray-500, #979594); background: var(--primitive-gray-alpha-50, rgba(0,0,0,.05)); }
.c-widget-cats__group--genre .c-cat-chip,
.c-widget-cats__group--scene .c-cat-chip,
.c-widget-cats__group--editorial .c-cat-chip { background: var(--surface-primary, #FFFFFF); color: var(--primitive-gray-800, #3A3736); border-color: var(--border-medium-emphasis, #DBD9D8); }

/* ===== グローバル修正：セクション見出しのタイトル/サブの間隔 ===== */
.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, #575352); letter-spacing: .03em; }

/* ===== 画像比率を OGP (1200x630 ≈ 1.91:1) に固定して縦長化を防ぐ ===== */
.c-card-mag__thumb img, .c-card-guide__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; }

/* ===== scene/guide/roundup の__containerはメインカラム内なので左右paddingを除去（二重padding解消） ===== */
.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; }

/* ===== シーン別モザイク：タイル比率も横長に（grid-auto-rowsを下げる） ===== */
.p-frontpage-scene__grid { grid-auto-rows: 100px !important; }
@media (max-width: 1100px) { .p-frontpage-scene__grid { grid-auto-rows: 90px !important; } }
@media (max-width: 900px)  { .p-frontpage-scene__grid { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 100px !important; } .c-scene-tile--big { grid-column: span 2 !important; grid-row: span 2 !important; } }
@media (max-width: 540px)  { .p-frontpage-scene__grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 90px !important; } }


.c-widget-tags { background: #fff; border: 0; border-radius: 12px; padding: 16px 4px; margin-bottom: 12px; }
.c-widget-tags__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--brand-cake-orange, #E04B00); }
.c-widget-tags__title { font-size: 1.7rem; font-weight: 700; margin: 0; color: var(--text-high-emphasis, #1C1A1A); }
.c-widget-tags__more { font-size: 1.2rem; font-weight: 700; color: var(--primitive-gray-800, #3A3736); text-decoration: none; white-space: nowrap; transition: opacity .2s ease; }
.c-widget-tags__more:hover { opacity: 0.75; text-decoration: none; }
.c-widget-tags__cloud { display: flex; flex-wrap: wrap; gap: 8px; }
/* 白ベースチップ（背景色で分類しない・雑誌サイトらしい落ち着いたUI） */
.c-tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-primary, #FFFFFF); color: var(--primitive-gray-800, #3A3736);
  border: 1px solid var(--border-medium-emphasis, #DBD9D8);
  font-size: 1.3rem; font-weight: 700; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; white-space: nowrap; }
.c-tag-chip:hover { background: var(--surface-secondary, #FBF9F8); border-color: var(--primitive-gray-400, #B7B5B4); }
.c-tag-chip__hash { color: var(--text-medium-emphasis, #575352) !important; }
.c-tag-chip__count { font-size: 1.05rem; font-weight: 700; padding: 0 6px; border-radius: 999px; color: var(--primitive-gray-500, #979594); background: var(--surface-tertiary, #F4F2F1); }
/* リンク色の基底（a:link）に勝つようスコープを上げて本文色を確実に適用 */
.c-widget-tags .c-tag-chip { color: var(--primitive-gray-800, #3A3736); }
.c-widget-tags__head .c-widget-tags__more { color: var(--primitive-gray-800, #3A3736); }