/* よりみちの庭の色（にゃん鉄の style.css の上に重ねる）。アプリの庭の色（やさしい緑・クリーム・桃）にそろえる。 */
:root {
  --ink: #344b3c;
  --blue: #5f9a62;
  --sky: #eef5e6;
  --yellow: #f6d9c9;
  --cream: #fdf6ea;
  --line: #d9d6c4;
  --muted: #64755e;
}
.hl { background: linear-gradient(transparent 60%, #f3c9b8 60%); }
.button-primary { color: #fffaf0; background: #5f9a62; box-shadow: 0 3px 0 #3f6e44; }
.button-primary:hover { background: #568d59; }
.screens-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; }
.screens-3 .screen-card img { width: 100%; height: auto; border-radius: 18px; }
.hero-art img { border-radius: 24px; }
@media (max-width: 760px) {
  .screens-3 { grid-template-columns: 1fr; }
  #screen-land img { max-width: 320px; margin-inline: auto; display: block; }
}
/* スマホの最初の画面に、広告と同じペットの絵を（見出しの右に小さく）。パソコンでは大きな絵が横にあるので出さない。 */
.hero-pet { display: none; }
@media (max-width: 760px) { .hero-copy { position: relative; } .hero-pet { display: block; position: absolute; right: 0; top: 2px; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 18px #49644a33; border: 4px solid #fffdf8; } }
/* 11/10 4枚目（夜のランプ）を足したので、パソコンでは2×2、スマホでは1列 */
.screens-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
.screens-4 .screen-card img { width: 100%; height: auto; border-radius: 18px; }
@media (max-width: 760px) { .screens-4 { grid-template-columns: 1fr; } }
/* 11/10 育つ流れの3枚（社長「もっと長く続ければここまで大きく広がる…が分かった方がいい」） */
.grow-steps { list-style: none; padding: 0; margin: 24px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1100px; counter-reset: g; }
.grow-step { display: flex; flex-direction: column; gap: 6px; position: relative; }
.grow-step img { width: 100%; height: auto; border-radius: 18px; background: #e3efe9; }
.grow-step strong { font-size: 1.08rem; color: var(--ink); }
.grow-step span { color: var(--muted); font-size: .95rem; }
.grow-step + .grow-step::before { content: "›"; position: absolute; left: -15px; top: 34%; font-size: 1.6rem; color: #5f9a62; font-weight: 700; }
.grow-note { text-align: center; margin-top: 14px; }
@media (max-width: 760px) {
  .grow-steps { grid-template-columns: 1fr; gap: 22px; }
  .grow-step + .grow-step::before { content: "↓"; left: 50%; top: -24px; transform: translateX(-50%); font-size: 1.2rem; }
}