/* =========================
   春人さんの台所ページ
========================= */

.haruto-kitchen-body {
  margin: 0;
  font-family:
    "Hiragino Maru Gothic ProN",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;

  color: #3f3328;

  background:
    linear-gradient(
      rgba(255, 248, 232, 0.62),
      rgba(255, 248, 232, 0.62)
    ),
    url("daidokoro.png");

  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 右上固定タイトル */
.fixed-site-title {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 20;

  padding: 8px 14px;
  border-radius: 999px;

  background: rgba(255, 248, 232, 0.82);
  color: #5b432f;

  font-size: 14px;
  text-decoration: none;
  letter-spacing: 0.08em;

  box-shadow: 0 4px 12px rgba(80, 55, 30, 0.18);
  backdrop-filter: blur(6px);
}

.fixed-site-title:hover {
  background: rgba(255, 255, 245, 0.95);
}

/* ページ全体 */
.kitchen-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px 20px 70px;
}

/* 上下ナビ */
.kitchen-top-nav,
.kitchen-bottom-nav {
  display: flex;
  justify-content: flex-start;
  margin: 10px 0 28px;
}

.kitchen-top-nav a,
.kitchen-bottom-nav a {
  display: inline-block;

  padding: 10px 18px;
  border-radius: 999px;

  background: rgba(255, 250, 238, 0.78);
  color: #5d4634;

  text-decoration: none;
  font-size: 14px;

  box-shadow: 0 4px 12px rgba(80, 55, 30, 0.14);
  backdrop-filter: blur(5px);
}

.kitchen-top-nav a:hover,
.kitchen-bottom-nav a:hover {
  background: rgba(255, 255, 247, 0.96);
}

/* タイトル部分 */
.kitchen-header {
  margin: 24px auto 48px;
  padding: 44px 32px;

  text-align: center;

  background: rgba(255, 250, 238, 0.78);
  border-radius: 28px;

  box-shadow: 0 8px 28px rgba(80, 55, 30, 0.18);
  backdrop-filter: blur(7px);
}

.kitchen-label {
  margin: 0 0 12px;

  color: #8a6a48;
  font-size: 14px;
  letter-spacing: 0.18em;
}

.kitchen-header h1 {
  margin: 0 0 24px;

  color: #4d3728;
  font-size: 38px;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.kitchen-lead {
  margin: 0;

  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.06em;
}

/* 料理一覧 */
.dish-list {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

/* 料理カード */
.dish-card {
  display: flex;
  align-items: center;
  gap: 34px;

  padding: 28px;

  background: rgba(255, 250, 238, 0.76);
  border-radius: 30px;

  box-shadow: 0 8px 26px rgba(80, 55, 30, 0.16);
  backdrop-filter: blur(7px);
}

/* 左右反転 */
.dish-card.reverse {
  flex-direction: row-reverse;
}

/* 料理画像 */
.dish-image-wrap {
  flex: 0 0 42%;
}

.dish-image {
  display: block;
  width: 100%;
  height: auto;

  border-radius: 24px;
  object-fit: cover;

  box-shadow: 0 6px 18px rgba(80, 55, 30, 0.18);
}

/* 料理文章 */
.dish-text {
  flex: 1;
}

.dish-category {
  display: inline-block;

  margin: 0 0 10px;
  padding: 5px 12px;

  border-radius: 999px;
  background: rgba(202, 165, 101, 0.22);

  color: #7b5c36;
  font-size: 13px;
  letter-spacing: 0.12em;
}

.dish-text h2 {
  margin: 0 0 18px;

  color: #4b3526;
  font-size: 27px;
  letter-spacing: 0.08em;
}

.dish-text p {
  margin: 0 0 1.1em;

  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* 春人さんの一言 */
.haruto-comment {
  margin-top: 18px !important;
  padding: 14px 18px;

  border-left: 5px solid rgba(128, 156, 92, 0.65);
  border-radius: 14px;

  background: rgba(246, 255, 235, 0.65);

  color: #4f5f38;
  font-weight: 600;
}

/* 下部メッセージ */
.kitchen-ending {
  margin: 54px auto 34px;
  padding: 30px 28px;

  text-align: center;

  background: rgba(255, 250, 238, 0.74);
  border-radius: 26px;

  box-shadow: 0 8px 24px rgba(80, 55, 30, 0.14);
  backdrop-filter: blur(7px);
}

.kitchen-ending p {
  margin: 0;

  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.06em;
}

/* =========================
   スマホ対応
========================= */

@media (max-width: 760px) {

  .haruto-kitchen-body {
    background-attachment: scroll;
  }

  .fixed-site-title {
    top: 12px;
    right: 12px;
    font-size: 12px;
    padding: 7px 12px;
  }

  .kitchen-page {
    padding: 26px 14px 50px;
  }

  .kitchen-header {
    padding: 34px 22px;
    margin-top: 36px;
  }

  .kitchen-header h1 {
    font-size: 30px;
  }

  .kitchen-lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .dish-card,
  .dish-card.reverse {
    flex-direction: column;
    gap: 22px;

    padding: 20px;
  }

  .dish-image-wrap {
    flex: none;
    width: 100%;
  }

  .dish-text h2 {
    font-size: 23px;
  }

  .dish-text p {
    font-size: 15px;
  }

  .kitchen-ending {
    padding: 24px 20px;
  }
}

/* PC・タブレット */
@media (min-width: 769px) {
  .dish-list .dish-card:nth-child(even) {
    flex-direction: row-reverse;
  }
}

/* スマホ */
@media (max-width: 768px) {
  .dish-list .dish-card,
  .dish-list .dish-card:nth-child(even) {
    flex-direction: column;
  }
}