@charset "UTF-8";
/* きょうのレシピ帖 — 架空のレシピサイト(映像制作用)
   トンマナ: 見出し=明朝 / 本文=ゴシック / 低彩度のテラコッタ
   背景は2層構造(最背面=薄オレンジ、その上に白のコンテンツ面) */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* 低彩度のテラコッタ系。旧トンマナ(高彩度オレンジ/ピンク)からの置き換え */
  --accent: #a4644a;
  --accent-dark: #7e4a35;
  --accent-pale: #f3e6de;
  --paper: #fdf3ea;          /* 最背面の薄オレンジ */
  --surface: #ffffff;        /* コンテンツ面 */
  --surface-warm: #fbf7f3;   /* コツ欄などの淡い面 */
  --border: #e7ddd3;
  --rule: #d9cabd;
  --text: #33302c;
  --text-sub: #7d746b;
  --link: #7e4a35;

  --serif: "Zen Old Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  /* コンテンツ面の幅。左右に薄オレンジの余白が見える量をここで調整する */
  --surface-w: 1000px;
}

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

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.9;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ---------- 画像プレースホルダー ----------
   実ファイルが無い間だけ枠を表示する。images/ に実ファイルを置けば自動で差し替わる */
.ph {
  position: relative;
  aspect-ratio: var(--ph-ar, 16 / 9);
  background: repeating-linear-gradient(-45deg, #f6ede5 0 10px, #f2e6dc 10px 20px);
  border: 1px dashed var(--rule);
  overflow: hidden;
}
.ph::after {
  content: "画像支給待ち " attr(data-ph);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 13px; letter-spacing: .04em; color: #a8917f;
}
.ph img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}

/* 実ファイルが入ったら枠(点線・網掛け・「支給待ち」表記)は消す。
   比率が完全に一致しない画像でも枠が透けないようにするため */
.ph:has(img) { border: none; background: none; }
.ph:has(img)::after { display: none; }

/* ---------- ヘッダー ---------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header-top {
  max-width: var(--surface-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
}

.logo { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo .logo-main {
  font-family: var(--serif);
  font-size: 25px; font-weight: 600; color: var(--accent-dark);
  letter-spacing: .08em;
}
.logo .logo-tag { font-size: 10.5px; color: var(--text-sub); letter-spacing: .12em; }

.search-form {
  flex: 1;
  display: flex;
  min-width: 180px;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  background: #fcf9f6;
}
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 16px;
  font-size: 14px;
  min-width: 0;
  outline: none;
  font-family: inherit;
  color: var(--text);
}
.search-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0 22px;
  font-size: 13px;
  letter-spacing: .08em;
}
.search-btn:hover { background: var(--accent-dark); }

.header-links { display: flex; gap: 18px; white-space: nowrap; }
.header-link { color: var(--text-sub); font-size: 12.5px; }

.header-nav { border-top: 1px solid var(--border); }
.header-nav-inner {
  max-width: var(--surface-w);
  margin: 0 auto;
  display: flex;
  gap: 4px;
  padding: 0 12px;
  overflow-x: auto;
}
.header-nav a {
  color: var(--text);
  font-size: 13.5px;
  letter-spacing: .06em;
  padding: 11px 14px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.header-nav a:hover, .header-nav a.is-current {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

/* ---------- パンくず(薄オレンジの地の上) ---------- */

.breadcrumb {
  max-width: var(--surface-w);
  margin: 0 auto;
  padding: 14px 20px 0;
  font-size: 12px;
  color: var(--text-sub);
}
.breadcrumb a { color: var(--text-sub); }
.breadcrumb .sep { margin: 0 6px; color: #bfb0a2; }

/* ---------- 本文レイアウト(1カラム) ---------- */

.page {
  max-width: var(--surface-w);
  margin: 14px auto 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 44px 56px 52px;
}

/* ---------- レシピ記事 ---------- */

.recipe h1 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
  margin-bottom: 12px;
}

.recipe-lead { color: var(--text-sub); font-size: 14px; margin-bottom: 18px; }

.meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.meta-chip {
  background: var(--accent-pale);
  color: var(--accent-dark);
  border-radius: 2px;
  font-size: 12.5px;
  letter-spacing: .04em;
  padding: 5px 14px;
}
.meta-chip span { color: #9b8474; margin-right: 6px; }

/* ヒーローはサイドバー廃止分だけ拡張し、左端は本文と揃える */
.hero { margin-bottom: 12px; }
.hero-caption { font-size: 12px; color: var(--text-sub); margin-bottom: 26px; }

.recipe-intro { margin-bottom: 34px; max-width: 42em; }

.recipe h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .1em;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 20px;
}
.recipe section { margin-bottom: 44px; }
.recipe section:last-child { margin-bottom: 0; }

/* 材料 */
.servings {
  font-family: var(--sans);
  font-size: 12.5px; color: var(--text-sub); letter-spacing: .06em;
  margin-left: auto;
}
.ingredients { max-width: 700px; }
.ingredients li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.ingredients .amount { color: var(--text-sub); white-space: nowrap; }
.ingredients .group {
  border-bottom: none;
  padding-top: 18px;
  color: var(--accent-dark);
  font-size: 13px;
  letter-spacing: .1em;
}

/* 作り方 */
.steps { counter-reset: step; }
.steps li {
  list-style: none;
  position: relative;
  padding: 0 0 26px 56px;
  max-width: 46em;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent-dark);
  font-family: var(--serif);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}
.steps li::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 42px;
  bottom: 6px;
  width: 1px;
  background: var(--border);
}
.steps li:last-child::after { display: none; }
.steps .step-title {
  font-family: var(--serif);
  font-size: 17px; letter-spacing: .06em;
  display: block; margin-bottom: 3px;
}
/* max-width だけだと img{max-width:100%} を上書きしてしまい、狭幅で横にはみ出す。
   width:100% を併記して、狭いときは親幅まで縮むようにする */
.step-photo { margin-top: 12px; width: 100%; max-width: 500px; }
.tips-photo { margin-top: 14px; width: 100%; max-width: 460px; }

/* コツ・ポイント */
.tips {
  background: var(--surface-warm);
  border: 1px solid var(--border);
  padding: 22px 26px;
}
.tips h3 {
  font-family: var(--serif);
  font-size: 17px; font-weight: 600; letter-spacing: .08em;
  color: var(--accent-dark); margin-bottom: 10px;
}
.tips ul { padding-left: 20px; max-width: 44em; }
.tips li { margin-bottom: 5px; font-size: 14px; }

/* 栄養情報 */
.nutrition-table {
  width: 100%;
  max-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}
.nutrition-table th, .nutrition-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.nutrition-table th { color: var(--text-sub); font-weight: 400; width: 50%; }
.nutrition-note { font-size: 12px; color: var(--text-sub); margin-top: 8px; }

/* 関連レシピ */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related-card {
  border: 1px solid var(--border);
  overflow: hidden;
  color: var(--text);
  font-size: 13.5px;
  background: var(--surface);
}
.related-card:hover { text-decoration: none; border-color: var(--rule); }
.related-card .r-body { padding: 12px 14px 14px; display: block; }
.related-card .r-title {
  font-family: var(--serif);
  font-size: 15px; letter-spacing: .04em; line-height: 1.6;
  display: block; margin-bottom: 4px;
}
.related-card .r-meta { color: var(--text-sub); font-size: 12px; }

/* ---------- フッター ---------- */

.footer { border-top: 1px solid var(--border); background: var(--surface); }
.footer-inner {
  max-width: var(--surface-w);
  margin: 0 auto;
  padding: 32px 20px 38px;
  text-align: center;
  font-size: 12px;
  color: var(--text-sub);
}
.footer-logo {
  font-family: var(--serif);
  font-size: 19px; font-weight: 600; letter-spacing: .1em;
  color: var(--accent-dark); margin-bottom: 12px;
}
.footer-links { margin-bottom: 12px; }
.footer-links a { color: var(--text-sub); margin: 0 10px; }
.fiction-note { color: #b0a396; margin-top: 8px; }