@charset "utf-8";
/* =====================================================================
   さきほこる
   style-index.css  ―  トップページ（index.html）専用スタイル
   ※ 共通スタイルは style-common.css を先に読み込んでください。
   ===================================================================== */

/* ---------- 1. ファーストビュー ------------------------------------ */
.hero{padding:26px 0 8px;position:relative;overflow:hidden}
.hero-label{
  display:inline-block;font-family:var(--hand);font-size:13px;
  color:var(--green-deep);background-color:var(--paper-2);
  border:1.5px solid var(--green);border-radius:999px;
  padding:3px 14px;margin-bottom:16px;transform:rotate(-1.2deg);
}
.hero h1{
  font-family:var(--round);font-weight:700;
  font-size:clamp(30px,8.4vw,58px);line-height:1.32;
  margin:0 0 18px;letter-spacing:.01em;text-wrap:balance;
}
.hero h1 .mk{
  color:var(--coral);
  background-image:linear-gradient(transparent 62%,var(--amber) 62%,var(--amber) 88%,transparent 88%);
}
.hero-lead{
  font-size:15px;line-height:1.95;color:var(--ink-2);
  max-width:34em;margin:0 0 22px;
}
.hero-photo{
  position:relative;margin:0 0 26px;transform:rotate(-1.6deg);
}
.hero-photo .frame{
  background-color:var(--paper-2);
  border:1px solid var(--rule);
  padding:12px 12px 14px;
  box-shadow:0 6px 18px rgba(34,48,42,.10);
}
.hero-photo .caption{
  font-family:var(--hand);font-size:13px;color:var(--ink-2);
  margin:8px 2px 0;text-align:center;
}
.tape{
  position:absolute;width:96px;height:26px;
  background-color:var(--tape);
  border-left:1px dashed rgba(255,255,255,.6);
  border-right:1px dashed rgba(255,255,255,.6);
}
.tape.t1{top:-12px;left:16px;transform:rotate(-7deg)}
.tape.t2{bottom:-10px;right:20px;transform:rotate(5deg)}

/* 付箋（3つの入口） */
.entry-note{margin:0 0 8px;font-family:var(--hand);font-size:14px;color:var(--ink-2)}
.entries{
  list-style:none;display:grid;gap:12px;margin:0 0 34px;padding:0;
}
@media (min-width:760px){.entries{grid-template-columns:repeat(3,1fr);gap:16px}}
.entries a{
  display:block;text-decoration:none;color:var(--ink);
  padding:16px 18px 18px;position:relative;
  border:1px solid rgba(34,48,42,.10);
  box-shadow:2px 3px 0 rgba(34,48,42,.12);
  transition:transform .16s ease,box-shadow .16s ease;
}
.entries a:hover,.entries a:focus-visible{
  transform:translate(-1px,-2px);box-shadow:4px 6px 0 rgba(34,48,42,.16);
}
.entries .e-kid a{background-color:var(--amber-pale)}
.entries .e-parent a{background-color:var(--leaf-pale)}
.entries .e-biz a{background-color:var(--coral-pale)}
.entries .e-kid{transform:rotate(-1deg)}
.entries .e-parent{transform:rotate(.6deg)}
.entries .e-biz{transform:rotate(-.5deg)}
.entries .e-title{
  font-family:var(--round);font-weight:700;font-size:17px;
  display:block;margin-bottom:4px;
}
.entries .e-desc{font-size:13px;line-height:1.75;color:var(--ink-2)}
.entries .e-arrow{
  font-family:var(--round);font-weight:700;font-size:13px;
  color:var(--green-deep);margin-top:8px;display:inline-block;
}

/* ---------- 2. さきほこるって？ ------------------------------------ */
.about{border-top:1px solid var(--rule)}
.about-text{font-size:15.5px;max-width:36em}
.about-text strong{
  font-weight:700;color:var(--green-deep);
  background-image:linear-gradient(transparent 66%,var(--leaf-pale) 66%);
}
.points{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
@media (min-width:760px){.points{grid-template-columns:repeat(3,1fr);gap:18px}}
.points li{
  background-color:var(--paper-2);
  border:1px solid var(--rule);
  border-top:3px solid var(--leaf);
  padding:20px 18px;
}
.points .ico{margin-bottom:10px}
.points .ico svg{width:38px;height:38px;display:block}
.points h3{margin-bottom:6px}
.points p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.8}

/* ---------- 3. 想い（濃緑ページ） ---------------------------------- */
.why{
  background-color:var(--green-deep);
  color:var(--paper);
  border-top:6px solid var(--leaf);
  border-bottom:6px solid var(--leaf);
}
.why .sec-label{color:var(--amber)}
.why .sec-label::before{background-color:var(--amber)}
.why h2{font-family:var(--mincho);font-weight:800;line-height:1.6}
.why h2 em{font-style:normal;color:var(--amber)}
.why p{color:rgba(250,246,236,.88);font-size:15px;max-width:34em}
.why blockquote{
  margin:0 0 22px;padding:0 0 0 16px;
  border-left:3px solid var(--coral);
  font-family:var(--mincho);font-size:clamp(17px,4.4vw,22px);line-height:1.85;
  color:var(--paper);
}
.why .sign{
  font-family:var(--hand);font-size:13px;color:var(--amber);
  margin:0 0 26px;
}

/* ---------- 4. 4つのステップ（手順書） ----------------------------- */
.steps-list{list-style:none;margin:0;padding:0;counter-reset:step}
.steps-list li{
  counter-increment:step;
  display:grid;grid-template-columns:44px 1fr;gap:14px;
  padding:20px 0;border-bottom:1px dashed var(--rule);
  align-items:start;
}
.steps-list li:first-child{border-top:1px dashed var(--rule)}
.step-box{
  width:34px;height:34px;border:2px solid var(--green);
  background-color:var(--paper-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--round);font-weight:700;font-size:15px;color:var(--green-deep);
  transform:rotate(-2deg);
}
.steps-list li:nth-child(even) .step-box{transform:rotate(2deg)}
.steps-list h3{margin-bottom:4px}
.steps-list p{font-size:14px;color:var(--ink-2);margin:0}
.steps-note{
  font-family:var(--hand);font-size:14px;color:var(--green-deep);
  background-color:var(--amber-pale);
  border:1.5px dashed var(--amber);
  padding:14px 16px;margin-top:26px;
}

/* ---------- 5. みんなの記録（活動報告） ---------------------------- */
.records{background-color:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.record-grid{list-style:none;margin:0;padding:0;display:grid;gap:20px}
@media (min-width:760px){.record-grid{grid-template-columns:repeat(3,1fr)}}
.record-grid li{
  background-color:var(--paper);
  border:1px solid var(--rule);
  padding:12px 12px 16px;
  position:relative;
}
.record-grid li:nth-child(odd){transform:rotate(-.7deg)}
.record-grid li:nth-child(even){transform:rotate(.7deg)}
.record-grid .photo-slot{aspect-ratio:3/2;margin-bottom:12px}
.record-date{
  font-family:var(--round);font-size:12px;color:var(--coral);
  font-weight:700;letter-spacing:.04em;display:block;margin-bottom:4px;
}
.record-grid h3{font-size:15.5px;line-height:1.55;margin-bottom:6px}
.record-grid p{font-size:13px;color:var(--ink-2);margin:0}
.more-link{
  display:inline-block;margin-top:26px;
  font-family:var(--round);font-weight:700;font-size:15px;
  color:var(--green-deep);text-decoration:none;
  border-bottom:2px solid var(--coral);padding-bottom:2px;
}

/* ---------- 6. はじめかた（開催概要） ----------------------------- */
.outline-table{
  width:100%;border-collapse:collapse;
  background-color:var(--paper-2);border:1px solid var(--rule);
  font-size:14.5px;
}
.outline-table th,.outline-table td{
  text-align:left;padding:13px 14px;border-bottom:1px solid var(--rule);vertical-align:top;
}
.outline-table tr:last-child th,.outline-table tr:last-child td{border-bottom:none}
.outline-table th{
  width:34%;font-family:var(--round);font-weight:700;font-size:13.5px;
  color:var(--green-deep);background-color:var(--leaf-pale);
  border-right:1px solid var(--rule);white-space:nowrap;
}
@media (max-width:520px){
  .outline-table th{width:38%;font-size:12.5px;padding:12px 10px;white-space:normal}
  .outline-table td{padding:12px 10px}
}

/* ---------- 7. 企業・団体の方へ（C案トーン：整然・角なし） -------- */
.biz{
  background-color:#FFFFFF;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background-image:none;
}
.biz .sec-label{font-family:var(--sans);letter-spacing:.14em;font-size:12px;color:var(--ink-2)}
.biz .sec-label::before{background-color:var(--ink-2)}
.biz h2{font-family:var(--mincho);font-weight:800}
.biz p{font-size:15px;color:var(--ink-2);max-width:36em}
.biz-facts{
  list-style:none;margin:26px 0 0;padding:0;
  border-top:1px solid var(--ink);
}
.biz-facts li{
  display:grid;
  grid-template-columns:minmax(0, 160px) minmax(0, 1fr);
  gap:6px 20px;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
  align-items:start;
}
.biz-facts .k{
  font-size:14.5px;
  color:var(--ink);
}
.biz-facts .v{
  min-width:0;
  font-family:var(--round);
  font-weight:700;
  font-size:14px;
  line-height:1.75;
  color:var(--green-deep);
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}
@media (max-width:620px){
  .biz-facts li{
    grid-template-columns:1fr;
    gap:4px;
  }
  .biz-facts .v{
    font-size:13.5px;
  }
}
.biz-link{
  display:inline-block;margin-top:24px;font-size:15px;font-weight:700;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px;
}

/* ---------- 8. 伴走する大人たち（メンバープレビュー） -------------- */
.team-strip{
  list-style:none;margin:24px 0 0;padding:0 0 8px;
  display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.team-strip li{flex:0 0 128px;scroll-snap-align:start;text-align:center}
.team-strip .avatar{
  width:110px;height:110px;margin:0 auto 8px;
  border-radius:50%;background-color:var(--leaf-pale);
  border:2px dashed var(--leaf);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--ink-3);line-height:1.5;padding:8px;text-align:center;
}
.team-strip .role{
  font-family:var(--round);font-weight:700;font-size:13px;color:var(--green-deep);display:block;
}
.team-strip .note{font-size:11.5px;color:var(--ink-3)}