/* JIN:R風の飾り（2026-09-20 比嘉さん「JIN:R がカッコいい」。デモ5の水色）。全ページで最後に読む。
   このファイルの <link> を外せば、前の見た目に戻る。
   色の帯の見出しは使わない（SUKIYAKI塾のアコーディオン見出しと重なって見えるため）。 */
:root {
  --accent: #1b93cf;
  --accent-soft: #e4f4fc;
  --accent-dark: #11709f;
  --bg: #f1f7fb;
}
body { background: var(--bg); }

/* 1. 上の帯：ロゴの段は白地（元の黒＋青の「Yunta Works」）、その下に水色のメニュー帯を端から端まで */
header { background: #fff; border-bottom: none; box-shadow: 0 2px 10px rgba(20, 80, 120, 0.06); }
header .wrap { padding-top: 16px; padding-bottom: 0; }
header .logo { letter-spacing: 0.06em; }
header nav {
  flex-basis: 100%;
  order: 3;
  margin-top: 12px;
  background: var(--accent);
  box-shadow: 0 0 0 100vmax var(--accent);
  clip-path: inset(0 -100vmax);
  gap: 0;
  justify-content: center; /* メニューは真ん中に（左寄りが気になる・比嘉さん） */
}
header nav a {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 10px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
header nav a:first-child { border-left: none; }
header nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 520px) { header nav { gap: 0 18px; } header nav a, header nav a:first-child { padding: 7px 0; font-size: 14.5px; border-left: none; } }

/* パンくず・見出しの帯（ページの頭）は、淡い水色で明るく */
.crumbs a { color: var(--accent-dark); }
.hero, .page-hero { background: linear-gradient(180deg, #d4eefb 0%, #eaf6fd 60%, var(--bg) 100%); }
.page-hero .kicker { color: var(--accent-dark); border-color: #b6e0f5; letter-spacing: 0.08em; }
.page-hero h1 { letter-spacing: 0.06em; }

/* 2. 白い箱：影をやわらかく、余白を広く */
section { border-radius: 14px; box-shadow: 0 6px 24px rgba(20, 80, 120, 0.07); padding: 36px 32px; }
section + section { margin-top: 28px; }
@media (max-width: 520px) { section { padding: 28px 18px; } }

/* 3. 見出し2：帯にしない。上に短い水色の線、字間を広く（JIN:R の「News」「Popular Post」の見出し） */
section > h2 {
  display: block;
  border-bottom: none;
  padding: 0;
  margin: 0 0 22px;
  font-size: 23px;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
section > h2::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: none;
  margin: 0 0 12px;
}

/* 4. 見出し3：左に細い水色の線だけ */
section h3:not(.card h3):not(.route h3) { border-left: 3px solid var(--accent); padding-left: 12px; letter-spacing: 0.04em; }

/* 5. カード：白地に影、乗せると少し浮く。上に水色の細い線（写真の代わり） */
.card { background: #fff; border: 1px solid #e3edf3; border-top: 4px solid var(--accent); border-radius: 12px; box-shadow: 0 3px 12px rgba(20, 80, 120, 0.06); }
a.card:hover { border-color: #e3edf3; border-top-color: var(--accent); box-shadow: 0 10px 24px rgba(20, 80, 120, 0.12); }
.card h3 { letter-spacing: 0.04em; }

/* 6. チェック・Q の丸、ボタン、表の見出しも水色に（変数で自動） */
.cta { box-shadow: 0 4px 0 var(--accent-dark); }
thead th { background: var(--accent-soft); color: var(--accent-dark); }

/* サイドバーの見出しの点線も水色に */
.side-title, h2 { border-bottom-color: #b6e0f5; }

/* 7. 足もと：白地に細い線（JIN:R の足もと） */
footer { background: #fff; border-top: 1px solid #e3edf3; margin-top: 10px; }
footer .wrap { padding-top: 22px; padding-bottom: 28px; }