/*
Theme Name: まんまるピピ
Theme URI: https://pipi.manmaru-llc.jp
Author: manmaru-llc
Author URI: https://www.manmaru-llc.jp
Description: ピピっとひらめくビジュアル教科書「まんまるピピ」
Version: 1.0
*/

/* =========================================================
   まんまるピピ基本  ―  スタイルシート
   色はすべて :root の変数にまとめています。
   ここを書き換えれば全体の配色を一括で調整できます。
   ========================================================= */

:root {
  /* ベースカラー（生成り紙・インク） */
  --bg:         #efe9da;  /* ページ背景 */
  --paper:      #f7f2e7;  /* カード・パネル背景 */
  --ink:        #231f19;  /* 見出しの文字色 */
  --text:       #5a564c;  /* 本文の文字色 */
  --text-soft:  #6b6253;  /* 補足テキスト */
  --muted:      #8a8170;  /* キャプション */
  --border:     #e0d4ba;  /* 枠線 */

  /* アクセント（朱・茶） */
  --accent:     #b04631;  /* 朱色（強調） */
  --accent-2:   #a8704a;  /* 茶色（サブ） */

  /* 区分カラー（介護度：緑 → 黄 → 赤） */
  --lv-support: #5b9279;  /* 要支援 */
  --lv-1:       #7fb069;  /* 要介護1 */
  --lv-2:       #e8c547;  /* 要介護2 */
  --lv-3:       #e5a742;  /* 要介護3 */
  --lv-4:       #d2693c;  /* 要介護4 */
  --lv-5:       #c0492f;  /* 要介護5 */

  --radius:     20px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  font-family: 'Yomogi', 'Klee One', cursive;
  color: var(--text-soft);
  font-weight: bold;
  line-height: 1.8;
}

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 24px;
}

/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--border);
  border-radius: 24px;
  padding: 54px 56px 50px;
  margin-bottom: 20px;
}
.hero::after {
  content: "";
  position: absolute;
  right: -50px; top: -50px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 70, 49, 0.10), transparent 70%);
}
.hero-inner { position: relative; }
.hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--accent-2);
  border: 1.5px dashed #c9a878;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 24px;
}
.hero-title {
  font-size: 52px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
  color: var(--ink);
}
.hero-title .accent { color: var(--accent); }
.hero-lead {
  font-size: 17px;
  line-height: 2;
  color: var(--text-soft);
  margin: 0;
  max-width: 640px;
}

/* ---------- セクション見出し ---------- */
.section { margin-bottom: 20px; }
.section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 6px 22px;
}
.section-num {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-title {
  font-size: 25px;
  margin: 0;
  color: var(--ink);
}
.section-lead {
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-soft);
  margin: 0 0 28px;
  max-width: 740px;
}
.section-lead strong { color: var(--accent); }

/* ---------- 共通カード ---------- */
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

.card {
  background: var(--paper);
  border: 2px solid var(--border);
  border-radius: 18px;
  padding: 28px;
}
.card--center { text-align: center; padding: 22px 14px; border-radius: 16px; }
.card-icon  { font-size: 30px; margin-bottom: 14px; }
.card--center .card-icon { font-size: 26px; margin-bottom: 12px; }
.card-title { font-size: 18px; color: var(--accent); margin-bottom: 10px; }
.card--center .card-title { font-size: 15px; margin-bottom: 8px; }
.card-text  { font-size: 15px; line-height: 1.95; color: var(--text); margin: 0; }
.card--center .card-text { font-size: 12px; line-height: 1.7; color: #7a7263; }

/* ---------- パネル（囲みボックス） ---------- */
.panel {
  background: var(--paper);
  border: 2px solid var(--border);
  border-radius: 24px;
  padding: 44px 48px;
  margin-bottom: 20px;
}
.panel--flow { padding: 44px 48px; }

/* ---------- 流れ（フロー） ---------- */
.flow {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.flow-step {
  flex: 1;
  text-align: center;
  border-radius: 16px;
  padding: 22px 14px;
  background: #ece2cc;
  border: 2px solid #d8cbac;
}
.flow-step--wide   { flex: 1.3; }
.flow-step--amber  { background: #f3e6c4; border-color: #e3cf9a; }
.flow-step--final  { background: var(--accent); border: none; color: #fff; }
.flow-arrow {
  display: flex;
  align-items: center;
  color: #b89a6a;
  font-size: 20px;
}
.step-label { font-size: 13px; color: var(--accent-2); margin-bottom: 10px; }
.flow-step--amber .step-label { color: #b07f20; }
.flow-step--final .step-label { color: #f3cabf; }
.step-name  { font-size: 16px; margin-bottom: 6px; }
.step-sub   { font-size: 12px; color: #7a7263; line-height: 1.6; }
.flow-step--amber .step-sub { color: #8a7430; }
.flow-step--final .step-sub { color: #f0c4b8; }

/* ---------- 区分スケール ---------- */
.scale-title { font-size: 18px; color: var(--ink); margin: 0 0 6px; }
.scale-sub   { font-size: 13px; color: var(--muted); margin: 0 0 28px; }
.scale       { display: flex; flex-direction: column; gap: 12px; }
.scale-row   { display: flex; align-items: center; gap: 16px; }
.scale-name  { flex: none; width: 90px; font-size: 15px; }
.scale-bar {
  height: 42px;
  min-width: 160px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 14px;
  color: #fff;
}
/* バーの色と長さ（％でグラフ化） */
.bar-support { width: 24%; background: var(--lv-support); }
.bar-l1 { width: 38%;  background: var(--lv-1); color: #234014; }
.bar-l2 { width: 54%;  background: var(--lv-2); color: #5a4710; }
.bar-l3 { width: 70%;  background: var(--lv-3); }
.bar-l4 { width: 86%;  background: var(--lv-4); }
.bar-l5 { width: 100%; background: var(--lv-5); }

.scale-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--muted);
}
.scale-legend .gradient {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lv-support), var(--lv-2), var(--lv-5));
}

/* ---------- 参考：状態像 ---------- */
.ref-badge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #fff;
  background: var(--accent-2);
  padding: 5px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
}
.ref-lead {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-soft);
  margin: 0 0 28px;
  max-width: 740px;
}

.state-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.state-card {
  border-radius: 16px;
  padding: 24px;
  border: 2px solid;
  border-top-width: 5px;
}
.state-card-title { font-size: 16px; margin-bottom: 10px; }
.state-card-text  { font-size: 13px; line-height: 1.85; }

.state-card--self    { background: #e3eee5; border-color: #c5ddc9; border-top-color: var(--lv-support); }
.state-card--self    .state-card-title { color: #3f6e54; }
.state-card--self    .state-card-text  { color: #4a5a50; }
.state-card--support { background: #ecf2dd; border-color: #d4e1bb; border-top-color: var(--lv-1); }
.state-card--support .state-card-title { color: #557e36; }
.state-card--support .state-card-text  { color: #525a44; }
.state-card--care    { background: #f6e4de; border-color: #e8c7bd; border-top-color: var(--lv-5); }
.state-card--care    .state-card-title { color: #a8452a; }
.state-card--care    .state-card-text  { color: #6a4d45; }

/* ---------- 要介護1〜5 の一覧 ---------- */
.level-list { display: flex; flex-direction: column; gap: 8px; }
.level-row {
  display: flex;
  gap: 14px;
  padding: 15px 20px;
  border-radius: 12px;
  border: 1.5px solid;
  border-left-width: 5px;
}
.level-label { flex: none; width: 72px; font-size: 14px; }
.level-text  { font-size: 13px; line-height: 1.8; }

.level-row--1 { background: #ecf2dd; border-color: #bcd49a; border-left-color: var(--lv-1); }
.level-row--1 .level-label { color: #456a2c; }  .level-row--1 .level-text { color: #414636; }
.level-row--2 { background: #f6efd3; border-color: #ddca87; border-left-color: var(--lv-2); }
.level-row--2 .level-label { color: #876911; }  .level-row--2 .level-text { color: #4d4836; }
.level-row--3 { background: #f6ead0; border-color: #e2c88c; border-left-color: var(--lv-3); }
.level-row--3 .level-label { color: #94631a; }  .level-row--3 .level-text { color: #504434; }
.level-row--4 { background: #f5e3d6; border-color: #e2bea4; border-left-color: var(--lv-4); }
.level-row--4 .level-label { color: #9f4a25; }  .level-row--4 .level-text { color: #544036; }
.level-row--5 { background: #f4ddd6; border-color: #e2b6a8; border-left-color: var(--lv-5); }
.level-row--5 .level-label { color: #9c3e24; }  .level-row--5 .level-text { color: #574039; }

/* ---------- フッター ---------- */
.footer {
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  line-height: 1.95;
  color: var(--text-soft);
  padding: 8px 0 12px;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 860px) {
  .card-grid-3, .card-grid-5, .state-grid { grid-template-columns: 1fr; }
  .flow { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); justify-content: center; }
  .hero { padding: 40px 28px; }
  .hero-title { font-size: 40px; }
  .panel { padding: 32px 24px; }
}