/* ====== Layout ====== */
.cp-layout{
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap:clamp(16px,2vw,24px);
  max-width:1100px;
  margin-inline:auto;
  padding:clamp(20px,4vw,40px);
}
@media (min-width: 1024px){
  .cp-layout{
    grid-template-columns: 240px 1fr;
    align-items:start;
  }
}

/* ====== Hero ====== */
.cp-hero{
  position:relative;
  min-height:52svh;
  color:#fff;
  overflow:hidden;
}
.cp-hero__photo{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
/* テキスト可読性のための暗幕＋下部グラデ */
.cp-hero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.55) 100%);
}
.cp-hero__inner{
  position:relative; z-index:2;
  max-width:1100px; margin-inline:auto;
  padding:clamp(28px,6vw,64px);
}
.cp-hero .eyebrow{
  font-size:.9rem; letter-spacing:.08em; opacity:.9; margin:0 0 .25rem;
}
.cp-hero h1{ font-size:clamp(28px,4.2vw,44px); margin:.25rem 0 .5rem; color: #fff !important;}

.cp-hero .lead{ font-size:clamp(14px,2vw,18px); opacity:.95; max-width:80ch; }
.cp-stats{ display:flex; gap:18px; margin-top:18px; flex-wrap:wrap; }
.cp-stat{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  border-radius:12px; padding:10px 14px; display:flex; flex-direction:column; align-items:center }
.cp-stat span{ font-size:1.4rem; font-weight:700; line-height:1; }
.cp-stat small{ font-size:.8rem; opacity:.9 }

.highlight-global {
      color: #44ff7b;
    font-size: 1.8rem;

}

.highlight-step {
  color: #0066ff; /* 例：ブルー */
  font-size: 1.8rem;
}


/* ── Sticky TOC（PCのみ表示） ───────────────────────────── */
.cp-toc { display:none; }                    /* モバイルでは非表示 */
@media (min-width: 1024px){
  .cp-toc { 
    display:block;
    position: sticky;
    top: 88px;              /* 追従時の上余白。ヘッダーの高さに合わせて調整 */
    height: max-content;    /* コンテンツ分だけの高さにする */
    align-self: start; 
 }
  .cp-toc nav{
    position: sticky;
    top: 88px;                               /* 固定ヘッダー分に合わせて調整 */
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}

/* TOCリンクの見た目 */
.cp-toc a{
  display:block;
  padding:10px 14px;
  border-radius:10px;
  background:#f6f7fb;
  color:#2a2e38;
  text-decoration:none;
  border:1px solid #e6e8f1;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

/* ホバー時 */
.cp-toc a:hover{
  background:#eef5ff;
  color:#0c7ae5;
  border-color:#cfe3ff;
}

/* 表示中のセクションに対応するリンク（スクロールスパイで付与） */
.cp-toc a.is-active{
  color:#0c7ae5;
  background:#eef5ff;
  border-color:#cfe3ff;
  font-weight:700;
  box-shadow: inset 3px 0 0 #0c7ae5;        /* 左にアクセントバー */
}

/* セクションにスクロールしたときのヘッダーかぶり対策 */
.cp-section{ 
  margin-bottom: 50px;
}      /* 固定ヘッダー高さに合わせて調整 */


/* ====== Sections ====== */
.cp-content{ min-width:0 }
.cp-h2{ font-size:clamp(22px,3vw,28px); margin:0 0 12px; }
.card{
  background:#fff; border:1px solid #e9ecf3; border-radius:16px;
  padding:clamp(16px,2.4vw,24px); box-shadow:0 4px 16px rgba(20,30,60,.04);
}
.cp-message .kicker{ color:#0c7ae5; font-weight:700; margin:0 0 .5rem }
.cp-message .closing{ margin-top:1rem }
.cp-message .sign{ text-align:right; margin-top:1rem; color:#485166 }

/* ====== 定義リスト（基本情報） ====== */
.cp-table{ display:grid; gap:10px }
.cp-table > div{
  display:grid; grid-template-columns: 120px 1fr; gap:12px;
  padding:10px 12px; border-radius:10px; background:#f9fafc
}
.cp-table dt{ color:#4c5366; font-weight:700 }
.cp-table dd{ margin:0 }

/* ====== ギャラリー ====== */
.cp-gallery{
  display:grid; gap:16px; grid-template-columns: repeat(3, 1fr);
}
.cp-gallery .photo{
  aspect-ratio: 4 / 3; overflow:hidden; border-radius:16px;
  border:1px solid #e9ecf3; background:#fff;
}
.cp-gallery .photo img{
  width:100%; height:100%; object-fit:cover; display:block;
}
@media (max-width: 900px){
  .cp-gallery{ grid-template-columns: 1fr }
}

/* ====== タイムライン ====== */
.timeline{ position:relative; padding-left:24px }
.timeline::before{
  content:""; position:absolute; left:10px; top:12px; bottom:12px; width:2px; background:#e1e6f3
}
.tl-item{ position:relative; padding:10px 0 10px 12px; display:grid; grid-template-columns: 90px 1fr; gap:10px }
.tl-dot{
  position:absolute; left:-1px; top:18px; width:12px; height:12px;
  background:#0c7ae5; border-radius:50%;
}
.timeline time{ color:#6b7387; font-weight:700 }

/* ====== アクセス ====== */
.cp-access{ display:grid; gap:16px; grid-template-columns: 1fr 1fr }
.cp-access .map{ border-radius:12px; overflow:hidden; border:1px solid #e6e8f1 }
.cp-access iframe{ width:100%; height:320px; border:0 }
.cp-access .howto{ margin:0; padding-left:18px }
@media (max-width: 900px){
  .cp-access{ grid-template-columns:1fr }
}