/* 業種別入口 /for/。トップと同じ標識の黄と黒で、場面・見本・順番を形で見せる(経営/デザイン原則.md)。色はすべて既定値付き */
.stripe { height: 14px; background: repeating-linear-gradient(135deg, #111 0 14px, #ffd400 14px 28px); }
.top-head { background: #111; color: #fff; }
.top-head .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 1.0625rem; letter-spacing: .04em; text-decoration: none; font-feature-settings: "palt"; }
.brand svg { width: 26px; height: 26px; flex: none; }
.top-head nav a { display: inline-block; color: #fff; font-size: .9375rem; font-weight: 700; text-decoration: none; padding: 12px 0; min-width: 44px; text-align: right; }

.for-page main { max-width: none; padding: 0 0 96px; }
.for-page .section, .for-page footer { max-width: 1120px; margin: 56px auto 0; padding-left: 20px; padding-right: 20px; }
.for-page .section > p, .for-page .section > ul, .for-page footer p { max-width: 40em; }
.for-page .section > h2 { font-size: clamp(1.375rem, 5.6vw, 2rem); line-height: 1.4; font-weight: 900; margin-bottom: 14px; padding-top: 14px; border-top: 6px solid var(--rule, #111); }

/* 冒頭: 黄色の面 */
.for-hero { background: #ffd400; color: #111; }
.for-hero-in { max-width: 1120px; margin: 0 auto; padding: 24px 20px 32px; display: grid; gap: 8px; }
.for-hero a { color: #111; }
.for-hero p, .for-hero .muted { color: #111; }
.for-hero .lead { color: #111; font-size: 1.0625rem; line-height: 1.85; font-weight: 500; }
.for-hero h1 { font-size: clamp(1.75rem, 7.6vw, 2.75rem); line-height: 1.3; font-weight: 900; letter-spacing: .01em; margin: 6px 0 16px; }
.for-hero .cta { background: #111; color: #fff; font-size: 1.125rem; font-weight: 800; min-height: 64px; max-width: 460px; border-radius: 6px; box-shadow: 0 5px 0 rgba(0,0,0,.28); margin-top: 8px; }
.for-hero .cta:hover { background: #2a2a2a; }
.for-hero .cta:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.for-art svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 8px auto 0; }
@media (max-width: 899px) { .for-art { order: -1; } .for-art svg { max-width: 260px; margin: 0 auto; } } /* スマホは絵を先に出し、最初の画面を文章だけにしない */

/* 場面: 黒の面に吹き出し */
.for-page .sec-scenes { max-width: none; margin-top: 0; background: #111; color: #fff; padding: 44px max(20px, calc(50% - 540px)) 48px; display: grid; gap: 20px; }
.sec-scenes > h2 { color: #ffd400; border-top-color: #ffd400 !important; }
.sec-scenes > h2, .sec-scenes > p { grid-column: 1 / -1; margin-bottom: 0; }
.sec-scenes > h2 + p, .sec-kit > h2 + p { margin-top: -8px; }
.sec-scenes > p { color: #e8e8e4; }
.sec-scenes a { color: #ffd400; }
.sec-scenes .card { background: transparent; border: 0; padding: 0; margin: 0; color: #e8e8e4; }
.sec-scenes .card h3 { position: relative; background: #fff; color: #111; border-radius: 14px; padding: 16px 18px; margin: 0 0 26px; font-size: 1.1875rem; line-height: 1.55; font-weight: 800; }
.sec-scenes .card h3::after { content: ""; position: absolute; left: 26px; bottom: -14px; border: 14px solid transparent; border-top-color: #fff; border-bottom: 0; }
.sec-scenes .card p { color: #e8e8e4; }
.sec-scenes .card .muted { color: #b9b9b4; }

/* 見本: 掲示物の形 */
.sec-kit { display: grid; gap: 20px; }
.sec-kit > h2, .sec-kit > p { grid-column: 1 / -1; margin-bottom: 0; }
.sec-kit .card { position: relative; margin: 0; padding: 30px 18px 18px; background: var(--card, #fff); border: 3px solid var(--rule, #111); border-radius: 2px; box-shadow: 6px 6px 0 #ffd400; }
.sec-kit .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(135deg, #111 0 10px, #ffd400 10px 20px); }
.sec-kit .card h3 { font-size: 1.125rem; font-weight: 900; margin-bottom: 10px; }

/* 揃える順番: 今日・今週・今月の時間軸 */
.sec-order { position: relative; }
.sec-order > h3 { display: inline-block; background: #111; color: #ffd400; font-size: 1.125rem; font-weight: 900; padding: 4px 14px; margin: 18px 0 8px; border-radius: 2px; }
.sec-order > h3 + p { border-left: 6px solid #ffd400; padding-left: 16px; margin-left: 4px; }

/* 最後の案内: 黄色の面 */
.for-page .sec-final { background: #ffd400; color: #111; max-width: 1120px; padding-top: 4px; padding-bottom: 28px; border-radius: 2px; }
.sec-final > h2 { border-top: 0 !important; }
.sec-final p, .sec-final .muted, .sec-final a { color: #111; }
.sec-final .cta { background: #111; color: #fff; font-size: 1.125rem; font-weight: 800; min-height: 64px; max-width: 460px; border-radius: 6px; box-shadow: 0 5px 0 rgba(0,0,0,.28); }
.sec-final .cta:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }

@media (min-width: 900px) {
  .for-hero-in { grid-template-columns: 1.25fr 1fr; align-items: center; gap: 40px; padding-top: 32px; padding-bottom: 44px; }
  .sec-scenes { grid-template-columns: repeat(3, 1fr); column-gap: 28px; }
  .sec-kit { grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; }
  .for-page .sec-final { padding-left: 40px; padding-right: 40px; }
}
@media (prefers-color-scheme: dark) {
  .sec-kit .card { box-shadow: 6px 6px 0 #8a7300; }
  .sec-order > h3 { outline: 2px solid #ffd400; }
}
@media print {
  .top-head, .stripe, .for-art { display: none; }
  .for-hero, .sec-scenes, .sec-final { background: #fff !important; color: #111 !important; }
  .sec-scenes *, .sec-final * { color: #111 !important; }
  .sec-scenes .card h3 { border: 2px solid #111; }
  .sec-scenes .card h3::after { border-top-color: #111; }
  .sec-scenes > h2 { border-top-color: #111 !important; }
  .sec-kit .card { box-shadow: none; }
}