/* ============================================================
   彩 IRODORI ガイド(読みもの)共通スタイル
   既存の静的ページ(/about/ /data-sources/ 等)の意匠を踏襲
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
  background: #f8f6f2;
  color: #2d2520;
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

/* --- ヘッダー --- */
header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e6dfd5;
}
.logo {
  font-size: 20px;
  font-weight: 700;
  color: #c97551;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.logo span { color: #6b5d50; font-size: 13px; margin-left: 8px; font-weight: 500; }
.home-link {
  font-size: 14px;
  color: #6b5d50;
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid #d6cdbf;
  border-radius: 20px;
  transition: all 0.15s;
  background: #fff;
  white-space: nowrap;
}
.home-link:hover { border-color: #c97551; color: #c97551; }

/* --- パンくず --- */
.crumbs { font-size: 13px; color: #8c7d6e; margin-bottom: 14px; }
.crumbs a { color: #8c7d6e; text-decoration: none; }
.crumbs a:hover { color: #c97551; text-decoration: underline; }
.crumbs span { margin: 0 6px; }

/* --- 見出し・本文 --- */
h1 {
  font-size: 27px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #2d2520;
  line-height: 1.4;
}
.lead {
  font-size: 15px;
  color: #6b5d50;
  margin-bottom: 24px;
  line-height: 1.8;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #8c7d6e;
  margin-bottom: 24px;
}
.badge {
  display: inline-block;
  background: #c97551;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.badge.soft { background: #efe7dc; color: #8a6a52; }

h2 {
  font-size: 19px;
  font-weight: 700;
  margin-top: 36px;
  margin-bottom: 14px;
  color: #2d2520;
  padding-left: 12px;
  border-left: 4px solid #c97551;
  line-height: 1.45;
}
h3 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 22px;
  margin-bottom: 8px;
  color: #4a3f35;
}
p { margin-bottom: 15px; color: #4a3f35; }
ul, ol { margin: 0 0 17px 24px; color: #4a3f35; }
li { margin-bottom: 7px; }
strong { color: #2d2520; font-weight: 700; }
a { color: #c97551; text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #a05c3d; }

/* --- 目次 --- */
.toc {
  background: #fff;
  border: 1px solid #e6dfd5;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 8px 0 28px;
}
.toc-title { font-size: 13px; font-weight: 700; color: #8c7d6e; margin-bottom: 10px; }
.toc ol { margin: 0 0 0 20px; }
.toc li { margin-bottom: 5px; font-size: 14px; }
.toc a { color: #4a3f35; text-decoration: none; }
.toc a:hover { color: #c97551; text-decoration: underline; }

/* --- ボックス・補足 --- */
.box {
  background: #fff;
  border: 1px solid #e6dfd5;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 18px 0;
}
.box p:last-child { margin-bottom: 0; }
.box-title { font-weight: 700; color: #2d2520; margin-bottom: 6px; }
.callout {
  background: #fbf3ec;
  border: 1px solid #ecd9c8;
  border-left: 4px solid #c97551;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 18px 0;
}
.callout p:last-child { margin-bottom: 0; }
.muted { color: #8c7d6e; font-size: 14px; }

/* --- FAQ(記事末尾の一問一答) --- */
.faq { display: grid; gap: 10px; margin: 10px 0 8px; }
.faq-item {
  background: #fff;
  border: 1px solid #e6dfd5;
  border-radius: 12px;
  padding: 14px 18px;
}
.faq-q { font-weight: 700; color: #2d2520; margin-bottom: 6px; line-height: 1.6; }
.faq-q::before { content: "Q. "; color: #c97551; font-weight: 800; }
.faq-a { color: #4a3f35; font-size: 14.5px; }
.faq-a::before { content: "A. "; color: #8c7d6e; font-weight: 700; }

/* --- 用語集 --- */
.term { background: #fff; border: 1px solid #e6dfd5; border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.term dt { font-weight: 700; color: #2d2520; font-size: 15px; margin-bottom: 4px; }
.term dd { color: #4a3f35; font-size: 14.5px; margin: 0; }
.term dd a { font-weight: 600; }

/* --- Contact(連絡先) --- */
.contact-cta {
  display: block;
  background: linear-gradient(135deg, #c97551, #b5623f);
  color: #fff;
  text-decoration: none;
  border-radius: 14px;
  padding: 16px 20px;
  margin: 18px 0;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  transition: opacity 0.15s;
}
.contact-cta:hover { opacity: 0.92; color: #fff; }
.contact-pending {
  display: block;
  background: #f1e9dd;
  color: #8a6a52;
  border: 1px dashed #d6cdbf;
  border-radius: 14px;
  padding: 16px 20px;
  margin: 18px 0;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
}

/* --- テーブル(価格・カレンダー) --- */
.table-wrap { overflow-x: auto; margin: 18px 0; -webkit-overflow-scrolling: touch; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
th, td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #ece4d8;
}
th { background: #f1e9dd; color: #4a3f35; font-weight: 700; white-space: nowrap; }
td { color: #4a3f35; }
tr:last-child td { border-bottom: none; }
.cheap { color: #4a8c5f; font-weight: 700; }
.pricey { color: #c0603f; font-weight: 700; }

/* --- アプリ機能への導線 --- */
.cta {
  display: block;
  background: linear-gradient(135deg, #c97551, #b5623f);
  color: #fff;
  text-decoration: none;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 28px 0;
  text-align: center;
  transition: opacity 0.15s;
}
.cta:hover { opacity: 0.92; color: #fff; }
.cta .cta-label { font-size: 13px; opacity: 0.9; }
.cta .cta-title { font-size: 17px; font-weight: 700; margin-top: 2px; }

/* --- 関連記事 --- */
.related { margin-top: 44px; padding-top: 24px; border-top: 1px solid #e6dfd5; }
.related-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; color: #2d2520; }
.related-grid { display: grid; gap: 10px; }
.related-card {
  display: block;
  background: #fff;
  border: 1px solid #e6dfd5;
  border-radius: 12px;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color 0.15s;
}
.related-card:hover { border-color: #c97551; }
.related-card .rc-cat { font-size: 12px; color: #c97551; font-weight: 700; }
.related-card .rc-title { font-size: 15px; color: #2d2520; font-weight: 700; margin-top: 2px; }
.related-card .rc-desc { font-size: 13px; color: #8c7d6e; margin-top: 4px; }

/* --- 記事一覧(ハブ) --- */
.hub-grid { display: grid; gap: 14px; margin-top: 8px; }
.hub-card {
  display: block;
  background: #fff;
  border: 1px solid #e6dfd5;
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.hub-card:hover { border-color: #c97551; transform: translateY(-1px); }
.hub-card .hc-cat { font-size: 12px; color: #c97551; font-weight: 700; }
.hub-card .hc-title { font-size: 18px; color: #2d2520; font-weight: 700; margin-top: 4px; line-height: 1.45; }
.hub-card .hc-desc { font-size: 14px; color: #6b5d50; margin-top: 6px; line-height: 1.7; }
.section-head { margin: 36px 0 4px; }
.section-head h2 { margin-top: 0; }

/* --- フッターnav --- */
nav.bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #e6dfd5;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
nav.bottom a {
  display: inline-block;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #d6cdbf;
  border-radius: 20px;
  text-decoration: none;
  font-size: 13px;
  color: #4a3f35;
}
nav.bottom a:hover { border-color: #c97551; color: #c97551; }
footer.site {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #e6dfd5;
  font-size: 12px;
  color: #8c7d6e;
  text-align: center;
}

@media (max-width: 480px) {
  .container { padding: 16px 16px 60px; }
  h1 { font-size: 22px; }
  body { font-size: 15px; }
  .logo { font-size: 17px; }
  .logo span { display: none; }
}