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

/* ---------- 1. 成長アイコン（種・芽・つぼみ・花） ------------------- */
/* 線画の SVG を背景に敷く。色は style-common.css のトークンに合わせています */
.h-ic-seed{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%233E7C4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 30h28'/%3E%3Cellipse cx='20' cy='23' rx='6' ry='4.5' fill='%23FFF2D2' stroke='%23C9892B'/%3E%3C/svg%3E")}
.h-ic-sprout{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%233E7C4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 32h28'/%3E%3Cpath d='M20 32V20'/%3E%3Cpath d='M20 22c0-5-4-8-10-8 0 6 4 8 10 8z' fill='%23E4F0E4'/%3E%3Cpath d='M20 24c0-4 3-7 8-7 0 5-3 7-8 7z' fill='%23E4F0E4'/%3E%3C/svg%3E")}
.h-ic-bud{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%233E7C4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 34h28'/%3E%3Cpath d='M20 34V17'/%3E%3Cpath d='M20 27c-4 0-7-2-8-5 4 0 7 2 8 5z' fill='%23E4F0E4'/%3E%3Cpath d='M20 17c-3-1-4-4-3-8 2 1 3 2 3 3 0-1 1-2 3-3 1 4 0 7-3 8z' fill='%23FFE7DF' stroke='%23FF6B4A'/%3E%3C/svg%3E")}
.h-ic-flower{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 35h28M20 35V21' stroke='%233E7C4E'/%3E%3Cpath d='M20 30c-4 0-7-2-8-5 4 0 7 2 8 5z' fill='%23E4F0E4' stroke='%233E7C4E'/%3E%3Cg fill='%23FFE7DF' stroke='%23FF6B4A'%3E%3Ccircle cx='20' cy='8' r='4'/%3E%3Ccircle cx='26' cy='13' r='4'/%3E%3Ccircle cx='14' cy='13' r='4'/%3E%3Ccircle cx='23.5' cy='19' r='4'/%3E%3Ccircle cx='16.5' cy='19' r='4'/%3E%3C/g%3E%3Ccircle cx='20' cy='14' r='3' fill='%23FFC24A' stroke='%23C9892B'/%3E%3C/svg%3E")}
.h-growth-ic,.h-node{background-repeat:no-repeat;background-position:center;background-size:70%}

/* ---------- 2. ページ上部の成長ステップ ---------------------------- */
.h-growth{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  position:relative;max-width:620px;
}
.h-growth::before{ /* ステップをつなぐ線 */
  content:"";position:absolute;left:12%;right:12%;top:31px;
  border-top:2px dashed var(--leaf);
}
.h-growth a{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  text-decoration:none;color:var(--ink);
}
.h-growth-ic{
  width:62px;height:62px;border-radius:50%;
  background-color:var(--paper-2);border:2px solid var(--green);
  transition:transform .15s ease;
}
.h-growth a:hover .h-growth-ic{transform:translateY(-3px) rotate(-4deg)}
.h-growth .is-next .h-growth-ic{border-color:var(--coral);border-style:dashed;animation:h-bloom 2.4s ease-in-out infinite}
@keyframes h-bloom{50%{transform:scale(1.07)}}
.h-growth-k{font-family:var(--round);font-weight:700;font-size:15px;color:var(--green-deep);margin-top:4px}
.h-growth .is-next .h-growth-k{color:var(--coral)}
.h-growth-v{font-family:var(--hand);font-size:12px;color:var(--ink-3)}

/* ---------- 3. タイムライン --------------------------------------- */
.h-timeline-sec{padding-top:34px}
.h-timeline{list-style:none;margin:0;padding:0;position:relative}
.h-timeline::before{ /* 縦の茎 */
  content:"";position:absolute;top:10px;bottom:40px;left:17px;
  border-left:3px solid var(--leaf);
}
@media (min-width:760px){.h-timeline::before{left:27px}}
.h-item{position:relative;padding:0 0 40px 46px;scroll-margin-top:80px}
@media (min-width:760px){.h-item{padding-left:78px;padding-bottom:44px}}
.h-node{
  position:absolute;left:0;top:0;width:37px;height:37px;border-radius:50%;
  background-color:var(--paper-2);border:2px solid var(--green);
}
@media (min-width:760px){.h-node{width:57px;height:57px}}
.h-item--next .h-node{border-color:var(--coral);border-style:dashed}
.h-date{
  font-family:var(--round);font-weight:700;font-size:15px;color:var(--ink-2);
  margin:6px 0 12px;letter-spacing:.04em;
}
@media (min-width:760px){.h-date{margin-top:12px}}
.h-year{font-size:24px;color:var(--green-deep);margin-right:1px}
.h-date small{font-size:11px;color:var(--ink-3);margin-left:8px;letter-spacing:.08em}
.h-item--next .h-year{color:var(--coral)}

/* ---------- 4. カード -------------------------------------------- */
.h-card{
  position:relative;background-color:var(--paper-2);border:1px solid var(--rule);
  padding:22px 18px 24px;box-shadow:0 6px 16px rgba(34,48,42,.07);
}
@media (min-width:760px){.h-card{padding:30px 32px 32px}}
.h-card::before{ /* マスキングテープ */
  content:"";position:absolute;top:-10px;left:28px;width:84px;height:20px;
  background-color:var(--tape);transform:rotate(-4deg);
}
.h-card--collab{border-top:3px solid #1E3A8A}
.h-card--collab::before{background-color:rgba(124,156,219,.45)}
.h-card-head{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;margin-bottom:18px}
@media (max-width:759px){.h-card{padding:20px 14px 22px}}
@media (min-width:760px){.h-card-head{grid-template-columns:110px 1fr;gap:22px}}
.h-logo{width:100%;height:auto;border-radius:10px;background-color:#fff}
.h-logo--wide{object-fit:contain;aspect-ratio:1/1;padding:4px;border:1px solid var(--rule)}
.h-kicker{font-family:var(--hand);font-size:13.5px;color:var(--coral);margin:0 0 2px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.h-status{
  font-family:var(--round);font-weight:700;font-size:11px;letter-spacing:.04em;
  color:var(--ink-2);background-color:#EEEDEA;border:1px solid #CFCBC2;padding:1px 8px;
}
.h-title{font-size:clamp(20px,5.2vw,28px);line-height:1.45;margin:0 0 6px}
.h-title span{font-size:.72em;color:var(--green)}
.h-card--collab .h-title span{color:#1E3A8A}
.h-title--s{font-size:clamp(19px,4.8vw,22px)}
.h-org{font-size:13px;color:var(--ink-3);margin:0}

/* 写真：大1＋小2 */
.h-photos{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:8px;margin:0 0 18px;align-items:stretch}
.h-photos img{width:100%;height:100%;object-fit:cover;background-color:var(--rule);min-height:0}
.h-photos img:first-child,
.h-photos img:nth-child(2):last-child{grid-row:1 / 3;aspect-ratio:4/3}
.h-photos--one{display:block}
.h-photos--one img{aspect-ratio:16/9}
.h-lead{font-size:15px;line-height:1.95;margin:0 0 16px}

/* 開催データ */
.h-facts{margin:0 0 16px;display:grid;gap:0;border-top:1px dashed var(--rule)}
@media (min-width:760px){.h-facts{grid-template-columns:1fr 1fr;column-gap:24px}}
.h-facts div{display:grid;grid-template-columns:4.2em 1fr;gap:10px;padding:9px 0;border-bottom:1px dashed var(--rule)}
.h-facts dt{font-family:var(--round);font-weight:700;font-size:13px;color:var(--green)}
.h-facts dd{margin:0;font-size:14px}

.h-points{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px}
.h-points li{font-size:14px;padding-left:24px;position:relative}
.h-points li::before{
  content:"";position:absolute;left:2px;top:.55em;width:12px;height:12px;border-radius:50% 0 50% 0;
  background-color:var(--leaf);transform:rotate(-20deg);
}

.h-sub{font-family:var(--round);font-weight:700;font-size:13px;color:var(--ink-2);margin:0 0 8px}
.h-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.h-chips li{
  font-size:12.5px;line-height:1.5;padding:4px 10px;
  background-color:#fff;border:1px solid var(--rule);
}
.h-chips li.is-key{background-color:#E3EBFA;border-color:#7C9CDB;color:#1E3A8A;font-weight:700}
.h-note{font-size:12px;color:var(--ink-3);margin:12px 0 0}

/* 小さいカード */
.h-card--mini{display:grid;gap:16px}
@media (min-width:760px){.h-card--mini{grid-template-columns:220px 1fr;gap:24px;align-items:center}}
.h-mini-photo{width:100%;aspect-ratio:4/3;object-fit:cover}
.h-card--mini p{font-size:14px;color:var(--ink-2);margin:0 0 10px}
.h-link{
  display:inline-block;font-family:var(--round);font-weight:700;font-size:14px;
  color:var(--green-deep);text-decoration:none;border-bottom:2px solid var(--coral);
}
.h-link::after{content:" →"}

/* 2つ並び */
.h-card--duo{grid-template-columns:1fr 1fr !important;gap:12px}
.h-duo{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink)}
.h-duo img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:6px;transition:transform .15s ease}
.h-duo:hover img{transform:translateY(-2px)}
.h-duo-k{font-family:var(--hand);font-size:12.5px;color:var(--coral)}
.h-duo-v{font-family:var(--round);font-weight:700;font-size:14.5px;line-height:1.5}

/* つぎ */
.h-card--next{border:2px dashed var(--coral);background-color:#FFFBF5;text-align:left}
.h-card--next::before{background-color:rgba(255,107,74,.35)}
.h-card--next p{font-size:14.5px;color:var(--ink-2)}
.h-next-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}