/* ============================================================
   合同会社散歩と記憶 / 歩く自分図鑑
   共通スタイル
   ★1ファイルに集約してある。色や書体を変えるときはここだけ。
   ============================================================ */

:root {
  /* ★色はロゴ画像から実測して合わせている（2026-07-31）
     ロゴの下地 #F3E7DD ／ 線画の藍 #405574
     → 下地を合わせることで、ロゴの四角い枠が背景に溶けて見えなくなる */
  --cream:      #F3E7DD;   /* ロゴの下地と同一 */
  --cream-deep: #EADCD0;   /* 囲み用に少し濃く */
  --ink:        #3A3630;   /* やわらかい墨色。真っ黒は使わない */
  --ink-soft:   #736A60;
  --indigo:     #405574;   /* ロゴの線画と同じ藍 */
  --green:      #5B8C5A;   /* 若葉（アプリのアクセントと同じ） */
  --green-deep: #3F6B3E;
  --line:       #DFCFC1;
  --maxw:       720px;

  /* ── ジャンルの9色（A案）──────────────────────
     日本の伝統色から彩度を落として選んだ。原色は1つも使わない。
     アプリの9ジャンルと1対1で対応させてある。
     ★増減するときは、下の .genres li:nth-child(n) も一緒に直すこと。
        片方だけ増やすと、色の付かないチップができる。 */
  --sakura:   #DFA0A6;   /* 花 */
  --sora:     #7FA8C9;   /* 鳥 */
  --yamabuki: #D9A845;   /* 虫 */
  --mizu:     #6FB0AE;   /* 魚 */
  --tsuchi:   #B98A62;   /* 動物 */
  --akane:    #C4736B;   /* きのこ */
  --wakaba:   #7A9E63;   /* 樹木 */
  --haiao:    #9AAAB8;   /* 雲 */
  --ai:       #6E7FA0;   /* 駅・空港 */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ── ヘッダー ── */
header {
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
header .wrap {
  display: flex; align-items: center; gap: 12px;
  padding-top: 20px; padding-bottom: 20px;
}
header img { width: 40px; height: 40px; border-radius: 9px; }   /* ★正方形の絵なので丸ではなく角丸 */
header .name { font-size: 15px; line-height: 1.4; }
header .name b { display: block; font-weight: 600; }
header .name span { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.06em; }
header a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; }

/* ── ヒーロー（A案「水彩のしずく」）──
   ロゴの後ろに、にじんだ絵の具（桜と若葉）をそっと置く。
   ★position:relative と z-index が要る。無いと絵の具がロゴの上に乗る。 */
.hero { padding: 72px 0 56px; text-align: center; position: relative; }
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(34px); z-index: 1; pointer-events: none;
}
.hero::before {                                  /* 桜（左） */
  width: 200px; height: 180px; left: 50%; margin-left: -158px; top: 40px;
  background: radial-gradient(circle at 40% 40%, var(--sakura), transparent 68%);
  opacity: .42;
}
.hero::after {                                   /* 若葉（右） */
  width: 220px; height: 190px; left: 50%; margin-left: -44px; top: 72px;
  background: radial-gradient(circle at 55% 45%, var(--wakaba), transparent 68%);
  opacity: .34;
}
.hero .logo {
  width: 132px; height: 132px; margin-bottom: 24px; border-radius: 22px;
  position: relative; z-index: 2;
  box-shadow: 0 6px 22px rgba(90, 70, 55, .13);
}
.hero h1, .hero .sub, .hero .star { position: relative; z-index: 2; }
.hero h1 {
  font-size: 26px; font-weight: 600; margin: 0 0 8px;
  line-height: 1.7; letter-spacing: 0.04em;
}
.hero .sub { color: var(--ink-soft); font-size: 15px; margin: 0; }
.hero .star {
  margin: 36px auto 0; max-width: 520px;
  font-size: 18px; line-height: 2.1; color: var(--indigo);
}

/* ── 本文 ── */
main { padding-bottom: 80px; }
/* 見出しの下線は、左の46pxだけ若葉。あとは通常の罫線に戻る */
h2 {
  font-size: 19px; font-weight: 600; margin: 56px 0 16px;
  padding-bottom: 10px; position: relative;
  letter-spacing: 0.04em;
}
h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg,
    var(--wakaba) 0, var(--wakaba) 46px,
    var(--line) 46px, var(--line) 100%);
}
h3 { font-size: 16px; font-weight: 600; margin: 32px 0 10px; }
p { margin: 0 0 18px; }
ul { padding-left: 1.4em; margin: 0 0 18px; }
li { margin-bottom: 8px; }
a { color: var(--indigo); }
small { color: var(--ink-soft); font-size: 13px; line-height: 1.8; display: block; }

/* 情報テーブル（会社概要・お問い合わせ） */
table.info { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
table.info th, table.info td {
  text-align: left; vertical-align: top;
  padding: 14px 8px; border-bottom: 1px solid var(--line);
}
table.info th { width: 34%; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }

/* やさしい囲み */
.note {
  background: linear-gradient(180deg, #F7EDE4, #EFE0D3);
  border-left: 3px solid var(--wakaba);
  border-radius: 12px;
  padding: 20px 22px; margin: 0 0 24px; font-size: 15px;
}
.note p:last-child { margin-bottom: 0; }

/* ジャンルのチップ */
.genres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; list-style: none; padding: 0; }
.genres li {
  background: #FDF8F3; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 14px; margin: 0;
}
/* ★HTMLの並び順に依存している（花・鳥・虫・魚・動物・きのこ・樹木・雲・駅）。
   index.html のジャンルの順番を変えるなら、ここも一緒に直すこと。 */
.genres li:nth-child(1) { border-color: var(--sakura);   color: #9C5A61; }  /* 花 */
.genres li:nth-child(2) { border-color: var(--sora);     color: #4A7396; }  /* 鳥 */
.genres li:nth-child(3) { border-color: var(--yamabuki); color: #96701E; }  /* 虫 */
.genres li:nth-child(4) { border-color: var(--mizu);     color: #3D7C7A; }  /* 魚 */
.genres li:nth-child(5) { border-color: var(--tsuchi);   color: #845B36; }  /* 動物 */
.genres li:nth-child(6) { border-color: var(--akane);    color: #8E463F; }  /* きのこ */
.genres li:nth-child(7) { border-color: var(--wakaba);   color: #4E7038; }  /* 樹木 */
.genres li:nth-child(8) { border-color: var(--haiao);    color: #657685; }  /* 雲 */
.genres li:nth-child(9) { border-color: var(--ai);       color: #455578; }  /* 駅・空港 */

/* ── フッター ── */
footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 56px; font-size: 13px; color: var(--ink-soft);
}
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 20px; }
footer nav a { color: var(--ink-soft); text-decoration: none; }
footer nav a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding: 52px 0 40px; }
  .hero h1 { font-size: 22px; }
  table.info th { width: 100%; display: block; border-bottom: none; padding-bottom: 0; }
  table.info td { display: block; padding-top: 4px; }
}