@charset "UTF-8";
/*
Theme Name: Recette
Theme URI: https://lomdesign.jp/themes/recette/
Author: LOM Design
Author URI: https://lomdesign.jp/
Description: 料理・レシピブログに特化したWordPressテーマ。レシピと通常投稿を別々に管理でき、ナチュラルで柔らかいデザインが特徴です。SEO SIMPLE PACK・Wordfence Security との併用を想定しています。
Version: 1.5.2
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: recette
Tags: food-and-drink, recipe, blog, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. CSS Variables（カスタマイザーで上書き可能）
   ========================================================================== */
:root {
  /* カラー */
  --recette-color-bg: #FBF7F1;
  --recette-color-bg-soft: #F4EBDE;
  --recette-color-surface: #FEFBF6;
  --recette-color-text: #3D2A1E;
  --recette-color-text-soft: #7A5F4C;
  --recette-color-text-muted: #B89B82;
  --recette-color-accent: #B8826A;
  --recette-color-accent-light: #C99B8A;
  --recette-color-border: #E5D5C0;

  /* タイポグラフィ
     注：--recette-font-serif は歴史的経緯による名前で、現在はサンセリフ
     （Noto Sans JP）を指す。後方互換のため変数名は維持している。 */
  --recette-font-serif: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Helvetica Neue", sans-serif;
  --recette-font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Yu Gothic", sans-serif;
  --recette-font-italic: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  /* レイアウト */
  --recette-container: 1200px;
  --recette-container-narrow: 800px;
  --recette-gutter: 2rem;
}

/* ==========================================================================
   2. リセット＆ベース
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--recette-color-bg);
  color: var(--recette-color-text);
  font-family: var(--recette-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; vertical-align: middle; }

a {
  color: var(--recette-color-accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a:hover { opacity: 0.7; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--recette-font-serif);
  font-weight: 600;
  color: var(--recette-color-text);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

p { margin: 0 0 1.5em; }

/* ==========================================================================
   3. レイアウトコンテナ
   ========================================================================== */
.recette-container {
  max-width: var(--recette-container);
  margin: 0 auto;
  padding: 0 var(--recette-gutter);
}

.recette-container--narrow {
  max-width: var(--recette-container-narrow);
}

/* ==========================================================================
   4. ヘッダー
   ========================================================================== */
.recette-site-header {
  background: var(--recette-color-surface);
  padding: 1.25rem 0;
  position: relative;
  z-index: 100;
}

.recette-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.recette-site-header__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .recette-site-header__right {
    display: none;
  }
}

.recette-site-title {
  font-family: var(--recette-font-sans);
  font-size: 26px;
  letter-spacing: 0.08em;
  color: var(--recette-color-text);
  margin: 0;
}

.recette-site-title a { color: inherit; }

.recette-site-tagline {
  font-size: 9px;
  color: var(--recette-color-text-muted);
  letter-spacing: 0.3em;
  margin-left: 0.5rem;
}

.recette-global-nav {
  display: flex;
  gap: 2rem;
  font-size: 13px;
  color: var(--recette-color-text-soft);
  letter-spacing: 0.1em;
  font-weight: 500;
}

.recette-global-nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.recette-global-nav li {
  position: relative;
}

.recette-global-nav a {
  color: inherit;
  text-transform: uppercase;
  display: inline-block;
  padding: 6px 0;
  position: relative;
  transition: color 0.2s ease;
}

/* ホバー時・現在ページ時の太い下線（直下に） */
.recette-global-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--recette-color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
  border-radius: 2px;
}

.recette-global-nav a:hover,
.recette-global-nav .current-menu-item > a,
.recette-global-nav .current_page_item > a,
.recette-global-nav .current-menu-parent > a,
.recette-global-nav .current-menu-ancestor > a {
  color: var(--recette-color-text);
  opacity: 1;
}

.recette-global-nav a:hover::after,
.recette-global-nav .current-menu-item > a::after,
.recette-global-nav .current_page_item > a::after,
.recette-global-nav .current-menu-parent > a::after,
.recette-global-nav .current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* お知らせバー */
.recette-announce-bar {
  background: var(--recette-color-bg-soft);
  padding: 8px var(--recette-gutter);
  font-size: 11px;
  color: var(--recette-color-text-soft);
  letter-spacing: 0.05em;
  text-align: center;
}

.recette-announce-bar__dot {
  color: var(--recette-color-accent-light);
  margin-right: 0.5em;
}

/* ==========================================================================
   5. フッター
   ========================================================================== */
.recette-site-footer {
  background: var(--recette-color-bg-soft);
  padding: 3rem 0 2rem;
  margin-top: 4rem;
  text-align: center;
}

.recette-site-footer__title {
  font-family: var(--recette-font-sans);
  font-size: 22px;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
}

.recette-site-footer__nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--recette-color-text-soft);
  margin: 1.5rem 0;
}

.recette-site-footer__nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* スマホでは横一列が収まりきらないため、中央寄せで折り返し、
   各リンクをタグ風ピルにして「押しやすく・整って」見せる。 */
@media (max-width: 768px) {
  .recette-site-footer__nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .recette-site-footer__nav a {
    display: inline-block;
    padding: 5px 14px;
    border: 0.5px solid var(--recette-color-border);
    border-radius: 999px;
    background: var(--recette-color-bg);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    transition: border-color 0.2s ease, color 0.2s ease;
  }

  .recette-site-footer__nav a:hover,
  .recette-site-footer__nav a:active {
    border-color: var(--recette-color-accent);
    color: var(--recette-color-accent);
  }
}

.recette-copyright {
  font-size: 10px;
  color: var(--recette-color-text-muted);
  letter-spacing: 0.2em;
  margin-top: 2rem;
}

/* ==========================================================================
   6. 404ページ
   ========================================================================== */
.recette-404 {
  text-align: center;
  padding: 6rem 0;
}

.recette-404__code {
  font-family: var(--recette-font-sans);
  font-size: 72px;
  color: var(--recette-color-accent-light);
  letter-spacing: 0.05em;
  margin: 0 0 1rem;
}

.recette-404__title {
  font-size: 20px;
  margin: 0 0 1.5rem;
}

.recette-404__text {
  color: var(--recette-color-text-soft);
  margin-bottom: 2rem;
}

.recette-button {
  display: inline-block;
  padding: 12px 32px;
  border: 0.5px solid var(--recette-color-accent);
  color: var(--recette-color-accent);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.recette-button:hover {
  background: var(--recette-color-accent);
  color: #fff;
  opacity: 1;
}

/* ==========================================================================
   7. レスポンシブ
   ========================================================================== */
@media (max-width: 768px) {
  :root { --recette-gutter: 1.25rem; }

  /* モバイルでもヘッダーは横並びを維持：左ロゴ、右ハンバーガー */
  /* （PC用ナビ＋検索アイコンは .recette-site-header__right ごと非表示済み） */

  .recette-global-nav ul {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ==========================================================================
   8. メインビジュアル要素（フェーズ3で追加）
   ========================================================================== */

/* セクション共通の余白 */
.recette-section {
  padding: 4rem 0 3rem;
}

.recette-section--soft {
  background: var(--recette-color-bg-soft);
}

.recette-section__head {
  text-align: center;
  margin-bottom: 2.5rem;
}

.recette-section__sub {
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--recette-color-accent-light);
  font-family: var(--recette-font-sans);
  margin-bottom: 0.5rem;
}

.recette-section__title {
  font-size: 22px;
  margin: 0;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   9. ヒーローセクション（トップページ）
   ========================================================================== */
.recette-hero {
  padding: 2.5rem var(--recette-gutter);
  background: var(--recette-color-bg);
}

.recette-hero__inner {
  max-width: var(--recette-container);
  margin: 0 auto;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.1);
  /* paddingはカード全体ではなくテキスト側(.recette-hero__body)だけに持たせる。
     こうすることで画像をカードの端いっぱいまで広げられる（フルブリード）。 */
  padding: 0;
  overflow: hidden; /* 角丸からはみ出す画像をカード形状でクリップ */
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  align-items: stretch; /* 画像セルをカード高さいっぱいに伸ばす */
}

.recette-hero__body {
  padding: 2.5rem;
}

.recette-hero__label {
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--recette-color-accent);
  font-weight: 600;
  font-family: var(--recette-font-sans);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.recette-hero__title {
  font-size: 28px;
  line-height: 1.5;
  margin: 0 0 1.25rem;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.recette-hero__title a { color: inherit; }

.recette-hero__lead {
  color: var(--recette-color-text-soft);
  line-height: 1.9;
  margin: 0 0 1.5rem;
  font-size: 13px;
}

.recette-hero__meta {
  display: flex;
  gap: 1.5rem;
  font-size: 11px;
  color: var(--recette-color-text-muted);
  letter-spacing: 0.1em;
  padding-top: 1rem;
  border-top: 0.5px solid var(--recette-color-border);
  width: fit-content;
  padding-right: 2rem;
}

.recette-hero__image {
  aspect-ratio: 16/9;
  background: var(--recette-color-bg-soft);
  border-radius: 0; /* カード側の overflow:hidden + border-radius でクリップする */
  overflow: hidden;
  position: relative;
}

.recette-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .recette-hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  .recette-hero__body { padding: 1.5rem; }
  .recette-hero__title { font-size: 24px; }
}

/* ==========================================================================
   10. カテゴリーアイコン行
   ========================================================================== */
.recette-cats {
  padding: 2rem var(--recette-gutter);
  max-width: var(--recette-container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.recette-cats__item {
  flex: 1;
  text-align: center;
  text-decoration: none;
}

.recette-cats__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--recette-color-accent);
  font-size: 22px;
}

.recette-cats__icon svg {
  width: 28px;
  height: 28px;
}

.recette-cats__name {
  font-family: var(--recette-font-serif);
  font-size: 13px;
  color: var(--recette-color-text);
}

.recette-cats__en {
  font-size: 9px;
  color: var(--recette-color-text-muted);
  letter-spacing: 0.2em;
  margin-top: 2px;
  text-transform: uppercase;
}

.recette-cats__divider {
  width: 1px;
  height: 30px;
  background: var(--recette-color-border);
  align-self: center;
}

@media (max-width: 768px) {
  /* スマホでは space-between だと両端に張り付くため中央寄せにし、
     さらに各項目を固定幅にして3列グリッドとして整列させる。
     「ホットサンドメーカー」のような長い名前は枠内で折り返り、アイコン位置は揃う。 */
  .recette-cats {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.75rem 1rem;
  }
  .recette-cats__item {
    flex: 0 0 28%;
    margin-bottom: 0;
  }
  .recette-cats__name {
    line-height: 1.35;
  }
  .recette-cats__divider { display: none; }
}

/* ==========================================================================
   11. レシピグリッド
   ========================================================================== */
.recette-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 1.5rem;
}

.recette-grid__item:nth-child(3n+2) { padding-top: 2.5rem; }
.recette-grid__item:nth-child(3n+3) { padding-top: 1rem; }

@media (max-width: 768px) {
  .recette-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }
  .recette-grid__item:nth-child(n) { padding-top: 0; }
}

/* ==========================================================================
   12. レシピカード
   ========================================================================== */
.recette-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding-bottom: 0.5rem;
}

.recette-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.recette-card__image-wrap {
  aspect-ratio: 4/3;
  background: var(--recette-color-bg-soft);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  margin-bottom: 0;
}

.recette-card__image-wrap--square { aspect-ratio: 1/1; }
.recette-card__image-wrap--portrait { aspect-ratio: 4/5; }

.recette-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.recette-card:hover .recette-card__image {
  transform: scale(1.04);
}

.recette-card__cat {
  font-size: 9px;
  color: var(--recette-color-accent-light);
  letter-spacing: 0.25em;
  margin-bottom: 6px;
  font-family: var(--recette-font-sans);
  text-transform: uppercase;
  padding: 1rem 1rem 0;
}

.recette-card__cat + .recette-card__title {
  padding-top: 0;
}

.recette-card__title {
  font-family: var(--recette-font-serif);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  font-weight: 600;
  padding: 1rem 1rem 0;
  color: var(--recette-color-text);
}

.recette-card__meta {
  font-size: 10px;
  color: var(--recette-color-text-muted);
  margin-top: 8px;
  letter-spacing: 0.1em;
  padding: 0 1rem 1rem;
}

/* ==========================================================================
   13. ジャーナルセクション（通常投稿）
   ========================================================================== */
.recette-journal {
  padding: 2rem;
  background: var(--recette-color-bg-soft);
  border-radius: 2px;
  max-width: var(--recette-container);
  margin: 1rem auto 2.5rem;
}

.recette-journal__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.recette-journal__item {
  text-decoration: none;
  color: inherit;
}

.recette-journal__date {
  font-size: 9px;
  color: var(--recette-color-text-muted);
  letter-spacing: 0.15em;
  margin-bottom: 6px;
  display: block;
}

.recette-journal__title {
  font-family: var(--recette-font-serif);
  font-size: 13px;
  line-height: 1.7;
}

.recette-journal__head {
  text-align: center;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .recette-journal__list { grid-template-columns: 1fr; gap: 1rem; }
}

/* ==========================================================================
   14. ページネーション
   ========================================================================== */
.recette-pagination {
  text-align: center;
  padding: 2rem 0;
}

.recette-pagination .page-numbers {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 2px;
  font-size: 12px;
  color: var(--recette-color-text-soft);
  letter-spacing: 0.1em;
}

.recette-pagination .page-numbers.current {
  color: var(--recette-color-accent);
  border-bottom: 1px solid var(--recette-color-accent);
}

/* ==========================================================================
   15. アーカイブ・ページタイトル
   ========================================================================== */
.recette-page-header {
  text-align: center;
  padding: 3rem var(--recette-gutter) 2rem;
}

.recette-page-header__sub {
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--recette-color-accent-light);
  font-family: var(--recette-font-sans);
  margin-bottom: 0.5rem;
}

.recette-page-header__title {
  font-size: 26px;
  margin: 0;
  letter-spacing: 0.05em;
}

.recette-page-header__desc {
  color: var(--recette-color-text-soft);
  font-size: 13px;
  margin-top: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   16. パンくず
   ========================================================================== */
.recette-breadcrumb {
  font-size: 11px;
  color: var(--recette-color-text-muted);
  letter-spacing: 0.1em;
  padding: 1rem 0;
  text-align: center;
}

.recette-breadcrumb a { color: inherit; }

.recette-breadcrumb__sep { margin: 0 0.5em; opacity: 0.5; }

/* ==========================================================================
   17. ブログ記事（single.php / archive.php）の見た目
   ========================================================================== */
.recette-entry {
  max-width: var(--recette-container-narrow);
  margin: 0 auto;
  padding: 2rem 0;
}

.recette-entry__head {
  text-align: center;
  margin-bottom: 2rem;
}

.recette-entry__meta {
  font-size: 10px;
  color: var(--recette-color-text-muted);
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

.recette-entry__title {
  font-size: 26px;
  line-height: 1.5;
  margin: 0;
  letter-spacing: 0.05em;
}

.recette-entry__thumb {
  margin: 2rem 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 2px;
}

.recette-entry__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recette-entry__content {
  line-height: 2;
  font-size: 16px;
}

.recette-entry__content h2,
.recette-entry__content h3 {
  margin: 2.5em 0 1em;
  letter-spacing: 0.05em;
}

.recette-entry__content h2 {
  font-size: 20px;
  padding-bottom: 0.5em;
  border-bottom: 0.5px solid var(--recette-color-border);
}

.recette-entry__content h3 {
  font-size: 17px;
}

.recette-entry__content p { margin: 0 0 1.5em; }

/* 本文内の通常画像のみ対象。テーマブロック内部の画像
   （吹き出しアイコン等、recette- クラスを持つimg）は除外する。
   除外しないと詳細度の差でブロック側の border-radius / margin が
   上書きされてしまう（v1.5.1で修正） */
.recette-entry__content img:not([class*="recette-"]) {
  border-radius: 2px;
  margin: 1em 0;
}

.recette-entry__content iframe,
.recette-entry__content .instagram-media,
.recette-entry__content .twitter-tweet {
  max-width: 100% !important;
  margin: 1.5em auto !important;
  display: block;
}

.recette-entry__content blockquote {
  border-left: 3px solid var(--recette-color-accent);
  padding: 0.5em 1.5em;
  margin: 2em 0;
  color: var(--recette-color-text-soft);
}

/* アーカイブの記事一覧（通常投稿） */
.recette-archive-list {
  margin: 0 auto;
  padding: 2rem 0;
}

.recette-archive-list__item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 0.5px solid var(--recette-color-border);
  text-decoration: none;
  color: inherit;
}

@media (max-width: 900px) {
  .recette-archive-list__item {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  .recette-archive-list {
    padding: 1.5rem 0;
  }
  .recette-archive-list__item {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 0.75rem;
    padding: 1rem 0;
  }
  .recette-archive-list__excerpt {
    display: none;
  }
}

/* サイドバーなし時：本文と同じ800pxに収める（中央寄せ） */
.recette-article-main:not(.recette-layout--with-sidebar .recette-article-main) .recette-archive-list {
  max-width: 800px;
}

.recette-archive-list__item:last-child {
  border-bottom: none;
}

.recette-archive-list__thumb {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--recette-color-border);
}

.recette-archive-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recette-archive-list__date {
  font-size: 10px;
  color: var(--recette-color-text-muted);
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
}

.recette-archive-list__title {
  font-size: 17px;
  margin: 0 0 0.5rem;
  line-height: 1.6;
}

.recette-archive-list__excerpt {
  font-size: 13px;
  color: var(--recette-color-text-soft);
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 600px) {
  .recette-archive-list__item {
    grid-template-columns: 100px 1fr;
    gap: 1rem;
  }
  .recette-archive-list__title { font-size: 16px; }
  .recette-archive-list__excerpt { display: none; }
}

/* ==========================================================================
   18. サイドバー（選択時に表示）
   ========================================================================== */
.recette-layout--with-sidebar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  max-width: var(--recette-container);
  margin: 0 auto;
  padding: 0 var(--recette-gutter);
  align-items: start;
}

.recette-sidebar {
  padding-top: 2rem;
  overflow: visible;
}

.recette-widget {
  margin-bottom: 2.5rem;
}

.recette-widget__title {
  position: relative;
  font-size: 13px;
  margin: 0 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 0.5px solid var(--recette-color-border);
  letter-spacing: 0.12em;
}

/* 見出し下線の左端にアクセントカラーを重ねる。
   材料・作り方セクションの「下線」基調と揃えつつ、サイドバーに装飾性を与える。 */
.recette-widget__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.4rem;
  height: 2px;
  background: var(--recette-color-accent);
}

.recette-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recette-widget li {
  padding: 0.5em 0;
  border-bottom: 0.5px solid var(--recette-color-border);
  font-size: 13px;
}

.recette-widget li:last-child { border-bottom: none; }

.recette-widget a {
  color: var(--recette-color-text);
  text-decoration: none;
}

@media (max-width: 900px) {
  .recette-layout--with-sidebar {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .recette-layout--with-sidebar > main,
  .recette-layout--with-sidebar > article {
    min-width: 0;
  }
}

/* ==========================================================================
   トップページ：サイドバー付き表示時の調整
   （ヒーロー・カテゴリーは全幅のまま、その下の「あたらしいレシピ」「お知らせ」を
     本文カラム＋サイドバーに収める）
   ========================================================================== */
.recette-front-with-sidebar > .recette-article-main { min-width: 0; }

/* 全幅前提のセクション内コンテナの二重余白・最大幅を解除してカラム幅に合わせる */
.recette-front-with-sidebar .recette-section { padding: 1rem 0 2.5rem; }
.recette-front-with-sidebar .recette-section .recette-container {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* レシピグリッドはカラム内では3列にして、カードを小ぶりに */
.recette-front-with-sidebar .recette-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 1rem;
}

/* ショーケース用の段差（masonry）と縦長/正方形画像を解除し、
   統一の横長カードにして高さを抑える（サイドバーと釣り合う見た目に） */
.recette-front-with-sidebar .recette-grid__item { padding-top: 0; }
.recette-front-with-sidebar .recette-card__image-wrap,
.recette-front-with-sidebar .recette-card__image-wrap--square,
.recette-front-with-sidebar .recette-card__image-wrap--portrait {
  aspect-ratio: 4 / 3;
}
.recette-front-with-sidebar .recette-card__title {
  font-size: 14px;
  line-height: 1.5;
  padding: 0.6rem 0.7rem 0;
}
.recette-front-with-sidebar .recette-card__cat { padding: 0.7rem 0.7rem 0; }
.recette-front-with-sidebar .recette-card__meta { padding: 0 0.7rem 0.7rem; }

/* お知らせ（ジャーナル）もカラム内では3列・画像も横長で小ぶりに */
.recette-front-with-sidebar .recette-journal--front.recette-journal--grid .recette-journal__item,
.recette-front-with-sidebar .recette-journal--front.recette-journal--carousel .recette-journal__item {
  flex: 0 0 33.333%;
  max-width: 33.333%;
}
.recette-front-with-sidebar .recette-journal__image { aspect-ratio: 4 / 3; }

@media (max-width: 900px) {
  /* スマホ等ではサイドバーが下に回るので、グリッドは通常のレスポンシブ（2列）に */
  .recette-front-with-sidebar .recette-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .recette-front-with-sidebar .recette-journal--front.recette-journal--grid .recette-journal__item,
  .recette-front-with-sidebar .recette-journal--front.recette-journal--carousel .recette-journal__item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
/* ==========================================================================
   ジャーナル：トップページ下部セクション
   ========================================================================== */

.recette-journal--front {
	margin-top: 4rem;
}

/* ビューポート：はみ出しを隠す */
.recette-journal--front .recette-journal__viewport {
	overflow: hidden;
	position: relative;
	margin-top: 1.5rem;
}

/* 共通：リストは flex で並べる */
.recette-journal--front .recette-journal__list {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ----- グリッド時（件数 ≦ 表示枠）：中央寄せ -----
   PC：1〜4件は中央 / SP：1〜2件は中央 */
.recette-journal--front.recette-journal--grid .recette-journal__list {
	justify-content: center;
	flex-wrap: wrap;
}

/* PC：1アイテム＝25%幅（最大4列）*/
.recette-journal--front.recette-journal--grid .recette-journal__item {
	flex: 0 0 25%;
	max-width: 25%;
	padding: 0 0.75rem;
	box-sizing: border-box;
}

/* SP：1アイテム＝50%幅（最大2列）*/
@media (max-width: 600px) {
	.recette-journal--front.recette-journal--grid .recette-journal__item {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* ----- カルーセル時（件数 > 表示枠）：横スクロール（無限ループ） ----- */
.recette-journal--front.recette-journal--carousel .recette-journal__list {
	flex-wrap: nowrap;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
	justify-content: flex-start;
}

/* JS で transition の有無を切替できるようにする（無限ループの瞬間移動用） */
.recette-journal--front.recette-journal--carousel .recette-journal__list.is-no-transition {
	transition: none !important;
}

.recette-journal--front.recette-journal--carousel .recette-journal__item {
	flex: 0 0 25%;
	max-width: 25%;
	padding: 0 0.75rem;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.recette-journal--front.recette-journal--carousel .recette-journal__item {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* ----- 共通アイテムスタイル ----- */
.recette-journal--front .recette-journal__item {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.3s ease;
}

.recette-journal--front .recette-journal__item:hover {
	opacity: 0.75;
}

/* 画像エリア：比率固定で高さ統一 */
.recette-journal--front .recette-journal__image {
	width: 100%;
	overflow: hidden;
	border-radius: 2px;
	background: var(--recette-color-bg-soft);
	margin-bottom: 12px;
}

.recette-journal--front.recette-journal--ratio-16-9 .recette-journal__image {
	aspect-ratio: 16 / 9;
}

.recette-journal--front.recette-journal--ratio-1-1 .recette-journal__image {
	aspect-ratio: 1 / 1;
}

.recette-journal--front .recette-journal__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.recette-journal--front .recette-journal__item:hover .recette-journal__image img {
	transform: scale(1.04);
}

.recette-journal__image-placeholder {
	width: 100%;
	height: 100%;
	background: var(--recette-color-bg-soft);
}

/* テキスト */
.recette-journal--front .recette-journal__body {
	min-height: 4em;
}

.recette-journal--front .recette-journal__date {
	display: block;
	font-size: 10px;
	color: var(--recette-color-text-muted);
	letter-spacing: 0.1em;
	margin-bottom: 4px;
}

.recette-journal--front .recette-journal__title {
	font-size: 13px;
	line-height: 1.55;
	color: var(--recette-color-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* カルーセル操作ボタン */
.recette-journal__controls {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.recette-journal__prev,
.recette-journal__next {
	width: 36px;
	height: 36px;
	border: 0.5px solid var(--recette-color-border);
	background: var(--recette-color-surface);
	color: var(--recette-color-accent);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.3s ease, color 0.3s ease;
}

.recette-journal__prev:hover,
.recette-journal__next:hover {
	background: var(--recette-color-accent);
	color: #fff;
}

/* ==========================================================================
   ジャーナル：フッター上（サイドバー風 - 左画像・右テキスト）
   ========================================================================== */

.recette-journal--footer {
	max-width: 640px;
	margin: 0 auto 2rem;
	padding: 1.5rem 1.75rem;
	background: var(--recette-color-surface);
	border-radius: 4px;
	border: 0.5px solid var(--recette-color-border);
}

.recette-journal--footer .recette-journal__head {
	margin-bottom: 1rem;
	text-align: center;
}

.recette-journal--footer .recette-journal__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;       /* 念のため明示：縦1列 */
}

.recette-journal--footer .recette-journal__item-wrap {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 0.5px solid var(--recette-color-border);
	display: block;
}

/* 最後の項目も下線を残す（全項目に下線をつけたい仕様） */
.recette-journal--footer .recette-journal__item-wrap:last-child {
	margin-bottom: 0;
	padding-bottom: 12px;
	border-bottom: 0.5px solid var(--recette-color-border);
}

.recette-journal--footer .recette-journal__item {
	display: flex;
	gap: 14px;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.3s ease;
}

.recette-journal--footer .recette-journal__item:hover {
	opacity: 0.75;
}

/* アイキャッチ：固定サイズ */
.recette-journal--footer.recette-journal--with-image .recette-journal__image {
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 2px;
	background: var(--recette-color-bg-soft);
}

.recette-journal--footer.recette-journal--with-image.recette-journal--ratio-1-1 .recette-journal__image {
	width: 64px;
	height: 64px;
}

.recette-journal--footer.recette-journal--with-image.recette-journal--ratio-16-9 .recette-journal__image {
	width: 90px;
	aspect-ratio: 16 / 9;
}

.recette-journal--footer.recette-journal--with-image .recette-journal__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* テキスト */
.recette-journal--footer .recette-journal__body {
	flex: 1;
	min-width: 0;
}

.recette-journal--footer .recette-journal__date {
	display: block;
	font-size: 10px;
	color: var(--recette-color-text-muted);
	letter-spacing: 0.1em;
	margin-bottom: 2px;
}

.recette-journal--footer .recette-journal__title {
	font-size: 13px;
	line-height: 1.55;
	color: var(--recette-color-text);
}

/* ==========================================================================
   サイドバーのジャーナルリスト（横並び、変更なし）
   ========================================================================== */

.recette-journal-sidebar__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.recette-journal-sidebar__item {
	margin-bottom: 14px;
}

.recette-journal-sidebar__item:last-child {
	margin-bottom: 0;
}

.recette-journal-sidebar__item a {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.3s ease;
}

.recette-journal-sidebar__item a:hover {
	opacity: 0.7;
}

.recette-journal-sidebar--no-image .recette-journal-sidebar__item a {
	display: block;
}

.recette-journal-sidebar--no-image .recette-journal-sidebar__date {
	font-size: 10px;
	color: var(--recette-color-text-muted);
	letter-spacing: 0.1em;
	display: block;
	margin-bottom: 2px;
}

.recette-journal-sidebar--no-image .recette-journal-sidebar__title {
	display: block;
	font-size: 13px;
	line-height: 1.6;
	color: var(--recette-color-text);
}

.recette-journal-sidebar--with-image .recette-journal-sidebar__image {
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 2px;
	background: var(--recette-color-bg-soft);
}

.recette-journal-sidebar--with-image.recette-journal-sidebar--ratio-1-1 .recette-journal-sidebar__image {
	width: 60px;
	height: 60px;
}

.recette-journal-sidebar--with-image.recette-journal-sidebar--ratio-16-9 .recette-journal-sidebar__image {
	width: 80px;
	aspect-ratio: 16 / 9;
}

.recette-journal-sidebar--with-image .recette-journal-sidebar__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.recette-journal-sidebar__image-placeholder {
	width: 100%;
	height: 100%;
	background: var(--recette-color-bg-soft);
}

.recette-journal-sidebar--with-image .recette-journal-sidebar__body {
	flex: 1;
	min-width: 0;
}

.recette-journal-sidebar--with-image .recette-journal-sidebar__date {
	font-size: 10px;
	color: var(--recette-color-text-muted);
	letter-spacing: 0.1em;
	display: block;
	margin-bottom: 2px;
}

.recette-journal-sidebar--with-image .recette-journal-sidebar__title {
	display: block;
	font-size: 12px;
	line-height: 1.5;
	color: var(--recette-color-text);
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 600px) {
	.recette-journal-sidebar--with-image.recette-journal-sidebar--ratio-1-1 .recette-journal-sidebar__image {
		width: 50px;
		height: 50px;
	}
	.recette-journal-sidebar--with-image.recette-journal-sidebar--ratio-16-9 .recette-journal-sidebar__image {
		width: 70px;
	}
	.recette-journal--footer.recette-journal--with-image.recette-journal--ratio-1-1 .recette-journal__image {
		width: 56px;
		height: 56px;
	}
	.recette-journal--footer.recette-journal--with-image.recette-journal--ratio-16-9 .recette-journal__image {
		width: 80px;
	}
}

/* ==========================================================================
   検索ウィジェット（フラットデザイン）
   ========================================================================== */

.recette-search-widget .recette-widget__title,
.widget.recette-search-widget h3 {
	font-size: 14px;
	letter-spacing: 0.15em;
	margin-bottom: 12px;
}

.recette-search-form {
	margin: 0;
}

.recette-search-form__inner {
	display: flex;
	align-items: stretch;
	background: var(--recette-color-bg-soft);
	border-radius: 24px;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.recette-search-form__inner:focus-within {
	box-shadow: 0 0 0 2px rgba(255, 138, 61, 0.2);
}

.recette-search-form__input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 10px 18px;
	font-size: 14px;
	font-family: var(--recette-font-sans);
	color: var(--recette-color-text);
	outline: none;
	min-width: 0;
}

.recette-search-form__input::placeholder {
	color: var(--recette-color-text-muted);
}

.recette-search-form__btn {
	border: none;
	background: var(--recette-color-accent);
	color: #ffffff;
	padding: 0 16px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	transition: background 0.2s ease;
	min-width: 48px;
}

.recette-search-form__btn:hover {
	background: #FF6F1F;
}


/* ==========================================================================
   SNSシェアボタン
   ========================================================================== */

.recette-share {
	margin: 1.5rem 0 0;
	padding: 1rem 0;
	border-top: 0.5px solid var(--recette-color-border);
	border-bottom: 0.5px solid var(--recette-color-border);
	text-align: center;
}

.recette-share__label {
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--recette-color-text-muted);
	margin-bottom: 12px;
	font-weight: 600;
}

.recette-share__buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.recette-share__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--recette-color-bg-soft);
	color: var(--recette-color-text);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.recette-share__btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

.recette-share__btn:hover {
	transform: translateY(-2px);
	color: #ffffff;
}

.recette-share__btn--x:hover         { background: #000000; }
.recette-share__btn--facebook:hover  { background: #1877F2; }
.recette-share__btn--line:hover      { background: #06C755; }
.recette-share__btn--pinterest:hover { background: #E60023; }
.recette-share__btn--copy:hover      { background: var(--recette-color-accent); }

.recette-share__btn--copied {
	background: var(--recette-color-accent) !important;
	color: #ffffff !important;
}


/* ==========================================================================
   コメント（つくれぽ風）
   ========================================================================== */

.recette-comments {
	max-width: 800px;
	margin: 4rem auto 2rem;
	padding: 0 var(--recette-gutter);
}

.recette-comments__header {
	text-align: center;
	margin-bottom: 2rem;
}

.recette-comments__sub {
	font-size: 11px;
	letter-spacing: 0.3em;
	color: var(--recette-color-accent);
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.recette-comments__title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0;
}

.recette-comments__count {
	color: var(--recette-color-text-muted);
	font-weight: 400;
	font-size: 16px;
}

.recette-comments__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* つくれぽモード時はグリッド配置 */
.recette-comments--tsukurepo .recette-comments__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25rem;
}

.recette-comment {
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	margin-bottom: 1rem;
}

.recette-comments--tsukurepo .recette-comment {
	margin-bottom: 0;
}

.recette-comment:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.recette-comment__body {
	padding: 1rem;
}

.recette-comment__header {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 12px;
}

.recette-comment__avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: block;
}

.recette-comment__author {
	font-weight: 600;
	font-size: 14px;
	color: var(--recette-color-text);
}

.recette-comment__author a {
	color: inherit;
	text-decoration: none;
}

.recette-comment__date {
	font-size: 11px;
	color: var(--recette-color-text-muted);
	letter-spacing: 0.05em;
}

.recette-comment__date a {
	color: inherit;
	text-decoration: none;
}

.recette-comment__image {
	margin: 12px -1rem 12px;
	aspect-ratio: 4/3;
	overflow: hidden;
	background: var(--recette-color-bg-soft);
}

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

.recette-comment__content {
	font-size: 14px;
	line-height: 1.7;
	color: var(--recette-color-text);
}

.recette-comment__content p {
	margin: 0 0 0.75em;
}

.recette-comment__content p:last-child {
	margin-bottom: 0;
}

.recette-comment__moderation {
	background: #fff7e8;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 12px;
	color: #8a6d3b;
	margin-bottom: 10px !important;
}

.recette-comment__reply {
	margin-top: 12px;
	font-size: 12px;
}

.recette-comment__reply a {
	color: var(--recette-color-accent);
	text-decoration: none;
	font-weight: 500;
}

.recette-comment__reply a:hover {
	text-decoration: underline;
}

/* コメントフォーム */
.comment-form {
	margin-top: 2rem;
	background: #ffffff;
	padding: 1.75rem;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.comment-form .comment-reply-title {
	font-size: 18px;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 1.25rem;
}

.comment-form p {
	margin-bottom: 1rem;
}

.comment-form label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 4px;
	color: var(--recette-color-text);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--recette-color-border);
	border-radius: 6px;
	background: var(--recette-color-bg-soft);
	font-family: var(--recette-font-sans);
	font-size: 14px;
	color: var(--recette-color-text);
	box-sizing: border-box;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--recette-color-accent);
	background: #ffffff;
}

.comment-form textarea {
	resize: vertical;
	min-height: 100px;
}

.comment-form-image input[type="file"] {
	display: block;
	font-size: 13px;
	padding: 8px 0;
}

.comment-form-image__hint {
	display: block;
	font-size: 11px;
	color: var(--recette-color-text-muted);
	margin-top: 4px;
}

.comment-form .submit,
.comment-form input[type="submit"] {
	background: var(--recette-color-accent);
	color: #ffffff;
	border: none;
	padding: 12px 28px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background 0.2s ease;
}

.comment-form .submit:hover,
.comment-form input[type="submit"]:hover {
	background: #FF6F1F;
}

@media (max-width: 600px) {
	.recette-comments--tsukurepo .recette-comments__list {
		grid-template-columns: 1fr;
	}
	.comment-form {
		padding: 1.25rem;
	}
}

/* ==========================================================================
   グローバルメニュー：サブメニュー（ドロップダウン）
   ========================================================================== */

.recette-global-nav .sub-menu,
.recette-global-nav .children {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 180px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	padding: 8px 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-6px);
	transition: opacity 0.2s ease, transform 0.25s ease, visibility 0.2s ease;
	z-index: 50;
}

.recette-global-nav .menu-item-has-children {
	position: relative;
}

.recette-global-nav .menu-item-has-children:hover > .sub-menu,
.recette-global-nav .menu-item-has-children:focus-within > .sub-menu,
.recette-global-nav .page_item_has_children:hover > .children,
.recette-global-nav .page_item_has_children:focus-within > .children {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.recette-global-nav .sub-menu li,
.recette-global-nav .children li {
	display: block;
	padding: 0;
}

.recette-global-nav .sub-menu a,
.recette-global-nav .children a {
	display: block;
	padding: 8px 16px;
	font-size: 12px;
	color: var(--recette-color-text);
	text-transform: none;
	letter-spacing: 0.05em;
	white-space: nowrap;
	text-align: center;
}

.recette-global-nav .sub-menu a::after,
.recette-global-nav .children a::after {
	display: none;
}

.recette-global-nav .sub-menu a:hover,
.recette-global-nav .children a:hover {
	background: var(--recette-color-bg-soft);
	color: var(--recette-color-accent);
}

/* サブメニュー親に「▾」マーク → ユーザー要望で削除（マウスホバーで気づける構造） */

/* スマホ時はホバーじゃなく常時展開 */
@media (max-width: 768px) {
	.recette-global-nav .sub-menu,
	.recette-global-nav .children {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		background: transparent;
		padding: 4px 0 0;
		font-size: 11px;
	}
	.recette-global-nav .menu-item-has-children:hover > .sub-menu,
	.recette-global-nav .page_item_has_children:hover > .children {
		transform: none;
	}
}

/* ==========================================================================
   記事末尾の関連お知らせ枠（記事幅に揃える）
   ========================================================================== */

.recette-journal--article-footer {
	max-width: 720px;
	margin: 0.5rem auto 1.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--recette-color-bg-soft);
	border-radius: 8px;
}

.recette-journal--article-footer .recette-journal__head {
	margin-bottom: 1rem;
	text-align: center;
}

.recette-journal--article-footer .recette-journal__head .recette-section__title {
	font-size: 16px;
	font-weight: 600;
}

.recette-journal--article-footer .recette-journal__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

.recette-journal--article-footer .recette-journal__item-wrap {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 0.5px solid var(--recette-color-border);
	display: block;
}

.recette-journal--article-footer .recette-journal__item-wrap:last-child {
	margin-bottom: 0;
	padding-bottom: 12px;
	border-bottom: 0.5px solid var(--recette-color-border);
}

.recette-journal--article-footer .recette-journal__item {
	display: flex;
	gap: 14px;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.3s ease;
}

.recette-journal--article-footer .recette-journal__item:hover {
	opacity: 0.75;
}

.recette-journal--article-footer.recette-journal--with-image .recette-journal__image {
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 4px;
	background: #ffffff;
}

.recette-journal--article-footer.recette-journal--with-image.recette-journal--ratio-1-1 .recette-journal__image {
	width: 64px;
	height: 64px;
}

.recette-journal--article-footer.recette-journal--with-image.recette-journal--ratio-16-9 .recette-journal__image {
	width: 90px;
	aspect-ratio: 16 / 9;
}

.recette-journal--article-footer.recette-journal--with-image .recette-journal__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.recette-journal--article-footer .recette-journal__body {
	flex: 1;
	min-width: 0;
}

.recette-journal--article-footer .recette-journal__date {
	display: block;
	font-size: 11px;
	color: var(--recette-color-text-muted);
	letter-spacing: 0.1em;
	margin-bottom: 2px;
}

.recette-journal--article-footer .recette-journal__title {
	font-size: 14px;
	line-height: 1.55;
	color: var(--recette-color-text);
}


/* ==========================================================================
   プロフィールカード
   ========================================================================== */

.recette-profile {
	margin: 2rem auto;
}

.recette-profile--article {
	max-width: 720px;
	margin: 3rem auto;
}

.recette-profile__inner {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
	padding: 1.75rem;
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
}

.recette-profile--sidebar .recette-profile__inner {
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.25rem;
}

.recette-profile__avatar {
	flex-shrink: 0;
}

.recette-profile__avatar img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.recette-profile--sidebar .recette-profile__avatar img {
	width: 72px;
	height: 72px;
}

.recette-profile__body {
	flex: 1;
	min-width: 0;
}

.recette-profile__name {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 8px;
	color: var(--recette-color-text);
}

.recette-profile--sidebar .recette-profile__name {
	font-size: 15px;
}

.recette-profile__bio {
	font-size: 13px;
	line-height: 1.75;
	color: var(--recette-color-text-soft);
	margin-bottom: 12px;
}

.recette-profile__bio p {
	margin: 0 0 0.5em;
}

.recette-profile__bio p:last-child {
	margin-bottom: 0;
}

.recette-profile__sns {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.recette-profile--sidebar .recette-profile__sns {
	justify-content: center;
}

.recette-profile__sns-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--recette-color-bg-soft);
	color: var(--recette-color-text);
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.recette-profile__sns-btn svg {
	width: 16px;
	height: 16px;
	display: block;
}

.recette-profile__sns-btn:hover {
	transform: translateY(-2px);
	color: #ffffff;
}

.recette-profile__sns-btn--twitter:hover   { background: #000000; }
.recette-profile__sns-btn--instagram:hover { background: #E4405F; }
.recette-profile__sns-btn--youtube:hover   { background: #FF0000; }
.recette-profile__sns-btn--pinterest:hover { background: #E60023; }
.recette-profile__sns-btn--tiktok:hover    { background: #000000; }
.recette-profile__sns-btn--note:hover      { background: #41C9B4; }
.recette-profile__sns-btn--website:hover   { background: var(--recette-color-accent); }


/* ==========================================================================
   追尾HTMLボックス
   ========================================================================== */

.recette-sticky-html.is-sticky .recette-sticky-html__content {
	position: sticky;
}

/* sticky の top は inline style で各ウィジェットごとに設定される */


/* ==========================================================================
   ヘッダー検索アイコン＆展開パネル（PCのみ）
   ========================================================================== */

.recette-header-search {
	position: relative;
}

.recette-header-search-toggle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--recette-color-accent);
	color: #ffffff;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
	flex-shrink: 0;
}

.recette-header-search-toggle svg {
	width: 16px;
	height: 16px;
	display: block;
}

.recette-header-search-toggle:hover {
	background: #FF6F1F;
	transform: scale(1.05);
}

.recette-header-search-toggle[aria-expanded="true"] {
	background: #FF6F1F;
}

/* ドロップダウンパネル（サブメニュー風） */
.recette-header-search-panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 320px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
	padding: 12px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.25s ease, visibility 0.2s ease;
	z-index: 50;
}

.recette-header-search-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.recette-header-search-form {
	display: flex;
	gap: 6px;
	align-items: stretch;
}

.recette-header-search-form__input {
	flex: 1;
	min-width: 0;
	padding: 9px 14px;
	font-size: 14px;
	border: 1px solid var(--recette-color-border);
	border-radius: 20px;
	font-family: var(--recette-font-sans);
	background: var(--recette-color-bg-soft);
	outline: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.recette-header-search-form__input:focus {
	border-color: var(--recette-color-accent);
	background: #ffffff;
}

.recette-header-search-form__btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--recette-color-accent);
	color: #ffffff;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	flex-shrink: 0;
}

.recette-header-search-form__btn svg {
	width: 16px;
	height: 16px;
}

.recette-header-search-form__btn:hover {
	background: #FF6F1F;
}

/* ==========================================================================
   記事メインエリア（記事と末尾要素を同じ列に揃える）
   ========================================================================== */

.recette-article-main {
	min-width: 0;
}

/* サイドバーなし時：記事は中央寄せの読みやすい幅 */
.recette-article-main {
	max-width: var(--recette-container);
	margin: 0 auto;
	padding: 0 var(--recette-gutter);
	box-sizing: border-box;
}

/* サイドバーあり時：mainはgridの左カラムなので max-width を解除して列幅を活かす */
.recette-layout--with-sidebar > .recette-article-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* 末尾要素：mainの幅に従う（中央寄せのmax-widthを解除） */
.recette-article-main > .recette-comments,
.recette-article-main > .recette-profile--article,
.recette-article-main > .recette-journal--article-footer {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* コメントとプロフィールはpaddingもリセット（mainの幅を活かす） */
.recette-article-main > .recette-comments,
.recette-article-main > .recette-profile--article {
	padding-left: 0;
	padding-right: 0;
}

/* お知らせ枠は背景内のpaddingを維持（画像とテキストに余白を確保） */
/* padding: 1.5rem 1.75rem は元の指定を維持、background-radiusも生きる */

/* サイドバーなし時は記事と同じ最大幅で揃える */
.recette-article-main:not(.recette-layout--with-sidebar .recette-article-main) > .recette-comments {
	margin-top: 4rem;
}

/* ==========================================================================
   モバイル：ハンバーガーメニュー＋ドロワー
   ========================================================================== */

.recette-hamburger {
	display: none;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	position: relative;
	z-index: 110;
}

.recette-hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--recette-color-text);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.2s ease;
	transform-origin: center;
}

@media (max-width: 900px) {
	.recette-hamburger {
		display: flex !important;
	}
}

/* ハンバーガー → ✕ アニメーション */
.recette-hamburger.is-open span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.recette-hamburger.is-open span:nth-child(2) {
	opacity: 0;
}
.recette-hamburger.is-open span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* オーバーレイ */
.recette-mobile-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 150;
}

.recette-mobile-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* ドロワー */
.recette-mobile-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(85vw, 360px);
	background: #ffffff;
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
	z-index: 160;
	overflow-y: auto;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
}

.recette-mobile-drawer.is-open {
	transform: translateX(0);
}

.recette-mobile-drawer__inner {
	padding: 1.5rem 1.5rem 3rem;
	font-family: var(--recette-font-sans);
}

.recette-mobile-drawer__close {
	width: 40px;
	height: 40px;
	border: none;
	background: var(--recette-color-bg-soft);
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--recette-color-text);
	margin-bottom: 1.5rem;
	transition: background 0.2s ease;
}

.recette-mobile-drawer__close:hover {
	background: var(--recette-color-border);
}

.recette-mobile-drawer__close svg {
	width: 18px;
	height: 18px;
}

/* モバイル検索フォーム */
.recette-mobile-search-form {
	display: flex;
	gap: 8px;
	margin-bottom: 1.5rem;
}

.recette-mobile-search-form__input {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	font-size: 14px;
	border: 1px solid var(--recette-color-border);
	border-radius: 24px;
	font-family: var(--recette-font-sans);
	background: var(--recette-color-bg-soft);
	outline: none;
}

.recette-mobile-search-form__input:focus {
	border-color: var(--recette-color-accent);
	background: #ffffff;
}

.recette-mobile-search-form__btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--recette-color-accent);
	color: #ffffff;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.2s ease;
}

.recette-mobile-search-form__btn:hover {
	background: #FF6F1F;
}

.recette-mobile-search-form__btn svg {
	width: 16px;
	height: 16px;
}

/* モバイルナビ */
.recette-mobile-nav__list,
.recette-mobile-nav .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.recette-mobile-nav li {
	border-bottom: 0.5px solid var(--recette-color-border);
}

.recette-mobile-nav a {
	display: block;
	padding: 14px 0;
	color: var(--recette-color-text);
	font-size: 15px;
	font-family: var(--recette-font-sans);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-decoration: none;
}

.recette-mobile-nav a:hover {
	color: var(--recette-color-accent);
}

.recette-mobile-nav .sub-menu,
.recette-mobile-nav .children {
	list-style: none;
	padding: 0 0 0 1rem;
	margin: 0 0 8px;
	border-top: 0.5px solid var(--recette-color-border);
}

.recette-mobile-nav .sub-menu li,
.recette-mobile-nav .children li {
	border-bottom: 0;
}

.recette-mobile-nav .sub-menu a,
.recette-mobile-nav .children a {
	font-size: 13px;
	padding: 10px 0;
	color: var(--recette-color-text-soft);
}

/* スクロール禁止（ドロワー開いてる時） */
body.recette-mobile-menu-open {
	overflow: hidden;
}

/* ==========================================================================
   追尾HTMLボックス（JavaScript で position:fixed 制御）
   ========================================================================== */

/* 追尾要素にトランジションを入れて滑らかに */
.recette-sticky-html.is-sticky {
	transition: top 0.15s ease;
}

/* fixed化された時の見た目を整える（JSが動作した状態で適用） */
[data-recette-sticky="1"][style*="position: fixed"],
[data-recette-sticky="1"][style*="position:fixed"] {
	z-index: 10;
}

/* ==========================================================================
   モバイル時：記事末尾要素の間隔調整
   ========================================================================== */
@media (max-width: 768px) {
	.recette-share {
		margin: 1rem 0 0;
		padding: 0.75rem 0;
	}
	.recette-journal--article-footer {
		margin: 0.5rem auto 1rem;
		padding: 1rem 1.25rem;
	}
	.recette-profile--article {
		margin: 1.25rem auto;
	}
	.recette-comments {
		margin: 2rem auto 1.25rem;
	}
}

/* ==========================================================================
   埋め込みコード（Instagram/X/TikTok）のレスポンシブ対応
   ========================================================================== */

.recette-entry__content iframe,
.recette-entry__content .instagram-media,
.recette-entry__content .twitter-tweet,
.recette-entry__content .fb-post,
.recette-entry__content blockquote.tiktok-embed {
	max-width: 100% !important;
	min-width: 0 !important;
	width: 100% !important;
	margin: 1.5em auto !important;
	display: block;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.recette-entry__content iframe,
	.recette-entry__content .instagram-media,
	.recette-entry__content .twitter-tweet,
	.recette-entry__content .fb-post,
	.recette-entry__content blockquote.tiktok-embed,
	.recette-entry__content blockquote {
		max-width: 100% !important;
		min-width: 0 !important;
		width: 100% !important;
	}
	.recette-entry__content .instagram-media[style] {
		min-width: 0 !important;
		width: calc(100% - 4px) !important;
		max-width: 540px !important;
	}
}

/* ==========================================================================
   関連記事（ブログ末尾）- SWELL風 横長カード × 4列グリッド
   ========================================================================== */

.recette-post-related {
	margin: 3rem 0 2rem;
}

.recette-post-related__head {
	text-align: center;
	margin-bottom: 1.5rem;
}

.recette-post-related__sub {
	font-size: 11px;
	letter-spacing: 0.3em;
	color: var(--recette-color-accent);
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.recette-post-related__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0;
}

/* PC：4列、件数が4の倍数でなくても左寄せで自然 */
.recette-post-related__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem 1rem;
	justify-content: start;
}

.recette-post-related__card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: #ffffff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.recette-post-related__card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.recette-post-related__image-wrap {
	aspect-ratio: 16 / 10;
	background: var(--recette-color-bg-soft);
	overflow: hidden;
}

.recette-post-related__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.recette-post-related__card:hover .recette-post-related__image {
	transform: scale(1.04);
}

.recette-post-related__image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--recette-color-bg-soft) 0%, var(--recette-color-border) 100%);
}

.recette-post-related__body {
	padding: 0.6rem 0.75rem 0.9rem;
}

.recette-post-related__cat {
	font-size: 10px;
	color: var(--recette-color-accent);
	letter-spacing: 0.15em;
	font-weight: 600;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.recette-post-related__heading {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 6px;
	color: var(--recette-color-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.recette-post-related__date {
	font-size: 10px;
	color: var(--recette-color-text-muted);
	letter-spacing: 0.1em;
}

/* タブレット：3列 */
@media (max-width: 900px) {
	.recette-post-related__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* スマホ：2列 */
@media (max-width: 600px) {
	.recette-post-related__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem 0.75rem;
	}
	.recette-post-related__title {
		font-size: 16px;
	}
	.recette-post-related__heading {
		font-size: 12px;
	}
	.recette-post-related__body {
		padding: 0.5rem 0.6rem 0.75rem;
	}
}

/* ==========================================================================
   前後ページナビゲーション
   ========================================================================== */

.recette-post-nav {
	margin: 3rem 0 2rem;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.recette-post-nav__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.recette-post-nav__item {
	display: block;
	background: #ffffff;
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	min-height: 80px;
}

.recette-post-nav__item:hover:not(.recette-post-nav__item--empty) {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.recette-post-nav__item--next {
	text-align: right;
}

.recette-post-nav__item--empty {
	background: transparent;
	box-shadow: none;
	pointer-events: none;
}

.recette-post-nav__label {
	font-size: 11px;
	color: var(--recette-color-accent);
	letter-spacing: 0.15em;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.recette-post-nav__item--next .recette-post-nav__label {
	justify-content: flex-end;
}

.recette-post-nav__arrow {
	font-size: 14px;
}

.recette-post-nav__title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--recette-color-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 600px) {
	.recette-post-nav__grid {
		gap: 0.75rem;
	}
	.recette-post-nav__item {
		padding: 1rem 1.25rem;
		min-height: 70px;
	}
	.recette-post-nav__title {
		font-size: 12px;
	}
}

/* ==========================================================================
   人気ランキングウィジェット
   ========================================================================== */

.recette-ranking {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: ranking;
}

.recette-ranking__item {
	margin: 0 0 12px;
	padding: 0 0 12px;
	border-bottom: 0.5px solid var(--recette-color-border);
}

.recette-ranking__item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.recette-ranking__link {
	display: grid;
	grid-template-columns: 28px 56px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.recette-ranking__num {
	font-size: 18px;
	font-weight: 700;
	color: var(--recette-color-accent);
	text-align: center;
	line-height: 1;
	font-family: var(--recette-font-sans);
}

.recette-ranking__thumb {
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--recette-color-bg-soft);
}

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

.recette-ranking__thumb-placeholder {
	width: 100%;
	height: 100%;
	background: var(--recette-color-bg-soft);
}

.recette-ranking__title {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--recette-color-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.recette-ranking__link:hover .recette-ranking__title {
	color: var(--recette-color-accent);
}

/* ==========================================================================
   PC/モバイル別サイドバー
   ========================================================================== */

/* モバイル専用ウィジェットエリアがある場合：PCではPC用のみ、モバイルではモバイル用のみ */
.recette-sidebar--has-mobile .recette-sidebar__mobile {
	display: none;
}

@media (max-width: 900px) {
	.recette-sidebar--has-mobile .recette-sidebar__pc {
		display: none;
	}
	.recette-sidebar--has-mobile .recette-sidebar__mobile {
		display: block;
	}
}

/* モバイル専用ウィジェットがなければ、PC用がそのままモバイルでも表示される（従来動作） */
.recette-sidebar--shared .recette-sidebar__mobile {
	display: none;
}

/* ==========================================================================
   セクションアクション（すべてのレシピを見る等のボタン）
   ========================================================================== */

.recette-section__action {
	text-align: center;
	margin-top: 3rem;
}

.recette-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background: var(--recette-color-accent);
	color: #ffffff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	border-radius: 999px;
	font-family: var(--recette-font-sans);
	transition: background 0.2s ease, transform 0.2s ease;
}

.recette-btn:hover {
	background: #FF6F1F;
	transform: translateY(-1px);
}

.recette-btn--primary {
	background: var(--recette-color-accent);
}

.recette-btn__arrow {
	font-size: 16px;
	transition: transform 0.2s ease;
}

.recette-btn:hover .recette-btn__arrow {
	transform: translateX(3px);
}

/* ==========================================================================
   目次（Table of Contents）
   ========================================================================== */

.recette-toc {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--recette-color-bg-soft);
	border-radius: 8px;
	font-size: 14px;
}

.recette-toc--simple {
	background: transparent;
	border: 1px solid var(--recette-color-border);
}

.recette-toc--box {
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	border: 1px solid var(--recette-color-border);
}

.recette-toc__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0.75rem;
}

.recette-toc__icon {
	width: 18px;
	height: 18px;
	color: var(--recette-color-accent);
	flex-shrink: 0;
}

.recette-toc__label {
	font-size: 14px;
	font-weight: 700;
	color: var(--recette-color-text);
	letter-spacing: 0.05em;
}

.recette-toc__toggle {
	margin-left: auto;
	background: transparent;
	border: 1px solid var(--recette-color-border);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 11px;
	color: var(--recette-color-text-soft);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 0.2s ease;
}

.recette-toc__toggle:hover {
	background: var(--recette-color-border);
}

.recette-toc__toggle-icon {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.3s ease;
}

.recette-toc.is-open .recette-toc__toggle-icon {
	transform: rotate(-135deg) translateX(-2px);
}

.recette-toc__body {
	display: none;
	overflow: hidden;
}

.recette-toc.is-open .recette-toc__body {
	display: block;
}

.recette-toc:not(.recette-toc--collapsible) .recette-toc__body {
	display: block;
}

.recette-toc__list {
	margin: 0;
	padding: 0 0 0 1.25rem;
	font-size: 13px;
	line-height: 1.9;
}

.recette-toc__list .recette-toc__list {
	padding-left: 1.25rem;
	margin: 4px 0;
	font-size: 12px;
}

.recette-toc__item {
	margin: 0;
}

.recette-toc__item a {
	color: var(--recette-color-text-soft);
	text-decoration: none;
	transition: color 0.2s ease;
}

.recette-toc__item a:hover {
	color: var(--recette-color-accent);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.recette-toc {
		padding: 1rem 1.25rem;
		font-size: 13px;
	}
	.recette-toc__list {
		font-size: 12px;
	}
}

/* ==========================================================================
   PR・広告表示
   ========================================================================== */

/* 「PR」バッジ（タイトル上などに小さく表示） */
.recette-pr-badge {
	display: inline-block;
	padding: 2px 8px;
	background: var(--recette-color-bg-soft);
	border: 1px solid var(--recette-color-border);
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.15em;
	color: var(--recette-color-text-muted);
	font-family: var(--recette-font-sans);
	vertical-align: middle;
	margin-right: 6px;
}

/* 「広告含む」お知らせボックス（タイトル下） */
.recette-pr-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 1.25rem 0;
	padding: 10px 16px;
	border: 1px solid var(--recette-color-border);
	border-radius: 8px;
	background: var(--recette-color-bg-soft);
	font-size: 12px;
	color: var(--recette-color-text-muted);
}

.recette-pr-notice__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--recette-color-accent);
}

.recette-pr-notice__text {
	line-height: 1.5;
}

@media (max-width: 600px) {
	.recette-pr-notice {
		font-size: 11px;
		padding: 8px 12px;
	}
}

/* ==========================================================================
   スマホ：一覧ページ（アーカイブ／カテゴリー）を画面いっぱいに
   --------------------------------------------------------------------------
   一覧ページの幅は「.recette-article-main の左右 gutter だけ」に統一する。
   親（main）に max-width:1200px + margin:auto + 左右 gutter が入っているので、
   その内側の grid / list / card は幅指定を持たず 100% で素直に伸びればよい。
   過去に二重指定が累積して狭くなっていたため、ここで一度きれいに上書きする。
   ========================================================================== */

@media (max-width: 768px) {

	/* 親ラッパー：画面幅いっぱい（左右の gutter だけ確保） */
	.recette-article-main {
		max-width: 100%;
		margin: 0;
		padding: 0 var(--recette-gutter);
		box-sizing: border-box;
	}

	/* レシピグリッド：2カラム等幅で main の内側いっぱいに */
	.recette-grid {
		width: auto;
		max-width: none;
		margin: 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1rem;
	}

	.recette-grid__item {
		min-width: 0;     /* グリッド内で縮めるために必須 */
		max-width: none;
		padding-top: 0;
	}

	/* ブログ系のリスト一覧も同じく幅いっぱいに */
	.recette-archive-list {
		max-width: none;
		width: auto;
		padding-left: 0;
		padding-right: 0;
	}
}

/* ==========================================================================
   18. つくれぽ星評価
   ========================================================================== */
/* コメント表示側の星 */
.recette-comment__rating {
  margin: 2px 0;
}

.recette-comment__rating-stars {
  color: #E8A33D;
  font-size: 13px;
  letter-spacing: 0.1em;
}

/* 投稿フォーム側の星入力（radio + label、右から左のhoverトリック） */
.comment-form-rating__label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--recette-color-text-soft);
}

.recette-rating-input {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 2px;
}

.recette-rating-input input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.recette-rating-input label {
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: var(--recette-color-border);
  transition: color 0.15s ease;
}

/* hover中・選択済みの星より左側（DOM上では後ろ）を点灯 */
.recette-rating-input label:hover,
.recette-rating-input label:hover ~ label,
.recette-rating-input input[type="radio"]:checked ~ label {
  color: #E8A33D;
}

/* キーボード操作時のフォーカス表示 */
.recette-rating-input input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--recette-color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}