:root {
  /* --- 和風・くすみ系カラー --- */

  --main-bg: #ebece3;   /* 全体の背景 */
  --card-bg: #a78877;   /* 胡粉色（ごふんいろ）: 和紙のような生成り */
  --desc-bg: #e4dacd;   /* 白練（しろねり）: さらに淡い背景 */
  --accent: #264653;    /* 藍鉄（あいてつ）: 落ち着いた青 */

  --radius-lg: 16px;
  --radius-md: 12px;
}

body {
  background: var(--main-bg);
}

/* ページ全体の最大幅（PCでも1000pxまで） */
.wrap {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* カード群 → 縦に積む */
.stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ---- カード本体 ---- */
.info-card {
  display: flex;
  flex-direction: column;            /* モバイルは縦並び */
  gap: 1rem;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 1rem;
  border: solid 1px rgba(0, 0, 0, 0.06); /* 和紙っぽく微妙な縁を */
}

/* 画像 */
.info-card .media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}


/* 説明文パネル */
.info-card .desc {
  color: #333;
  font-weight: 400%;
  background: var(--desc-bg);
  border-radius: var(--radius-md);
  padding: 1rem;
}

/* 見出し */
.info-card h4{
  font-weight: 700;
}

/* ---- PC レイアウト ---- */
@media (min-width: 900px) {
  .info-card {
    flex-direction: row;             /* PC 基本 → 画像 → 説明 */
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.25rem;
  }

  /* 偶数カード（2枚に1枚）は左右反転 */
  .info-card:nth-child(even) {
    flex-direction: row-reverse;
  }

  /* 画像幅に最大値 */
  .info-card .media {
    flex: 0 0 380px;
  }

  .info-card .desc {
    flex: 1 1 auto;
  }
}

/* --- Optional：見出しにアクセントカラーを使う --- */
.info-card .desc h5 {
  color: var(--accent);
  margin-top: 0;
}