:root{
  --brand: #0072ff;   /* メイン青 */
  --brand-2: #409eff; /* サブ青 */
  --accent-1: #ff6a00; /* 暖色グラデーション開始 */
  --accent-2: #ff8c42; /* 暖色グラデーション終了 */
  --bg:#ffffff;
  --text:#0e1525;
  --muted:#5b6a83;
  --line:#e8eef6;
  --soft:#f6f9ff;
  --card-w: clamp(340px, 52vw, 560px); /* ★中央1枚＋左右半分 */
  --gap:16px;
}

/* ヘッダー（青ベース、本文は白背景想定） */
/* ヒーローセクション（青系グラデーション） */
.cf-hero {
  background: linear-gradient(135deg, #0072ff 0%, #409eff 50%, #00c6ff 100%);
  color: #fff;
  padding: clamp(30px, 6vw, 80px) 20px;
  text-align: center;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.cf-hero .cf-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.cf-hero .cf-title {
  margin: 0 0 16px;
  line-height: 1.3;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cf-hero .cf-desc {
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.8;
  margin: 0 auto 10px;
  max-width: 900px;
  color: #e8f2ff;
}

.cf-hero .cf-desc strong {
  color: #fff;
}

.cf-hero .cf-note {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.cf-project-note{
  max-width: 1100px;
  margin: 14px auto 0;
  padding: 12px 14px;
  background: #f7fbff;
  border: 1px solid #e6edf7;
  border-left: 6px solid var(--brand);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cf-project-note__badge{
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); /* オレンジ差し色 */
  line-height: 1.6;
}

.cf-project-note__text{
  font-size: 14px;
  color: #0e1525;
  line-height: 1.7;
}

.cf-project-note__text strong{
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* 文字をオレンジグラデに */
}

/* 全体ラップ（白ベース） */
.cf-wrap{
  background: var(--bg);
  color: var(--text);
  padding: clamp(20px, 4vw, 52px);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

/* 横スクロール：中央1枚＋左右半分見せ */
.cf-rail-wrap{ position:relative; max-width: 1400px; margin: 8px auto 0; }

/* ← クリックを正しく受けるようにレイヤー定義 */
.cf-rail{
  position: relative;       /* 追加 */
  z-index: 1;               /* 追加：コンテンツ面 */
  display:flex; gap:var(--gap);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-inline: calc((100% - var(--card-w))/2);
  scroll-padding-inline: calc((100% - var(--card-w))/2);
}
.cf-rail::-webkit-scrollbar{ height:10px; }
.cf-rail::-webkit-scrollbar-thumb{ background: color-mix(in oklab, var(--brand) 25%, #cfd6e6); border-radius:999px; }

/* カード（幅固定＝--card-w） */
.cf-card{
  flex: 0 0 var(--card-w);
  scroll-snap-align: center;
  border-radius:16px; padding:16px; border:1px solid var(--line);
  background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cf-card:hover{ transform:translateY(-2px); border-color: color-mix(in oklab, var(--brand) 25%, var(--line)); box-shadow: 0 12px 28px rgba(31,107,255,.12); }

/* ロゴ中央寄せ */
.cf-logo{
  border-radius:12px; border:1px solid var(--line);
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px; width:100%; overflow:hidden; background:var(--soft);
}
.cf-logo img{ display:block; margin:auto; max-height:88%; max-width:92%; object-fit:contain; object-position:center; }

/* テキスト＆メタ */
.cf-name{ font-weight:800; font-size: clamp(17px,1.3vw,20px); text-align:center; margin:6px 2px 8px; }
.cf-meta{ display:grid; gap:6px; margin:8px 0 12px; }
.cf-row{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--text); }
.cf-row svg{ flex:0 0 18px; margin-top:2px; opacity:.95 }

/* ピル */
.cf-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.cf-pill{
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px dashed color-mix(in oklab, var(--brand) 40%, var(--line));
  color: color-mix(in oklab, var(--brand) 65%, var(--text));
  background: color-mix(in oklab, var(--brand) 8%, #fff);
}

/* ボタン */
.cf-actions{ display:flex; gap:10px; margin-top:auto; }
.cf-btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none; text-align:center;
  padding:12px 14px; border-radius:10px; font-weight:800; font-size:14px; line-height:1;
  transition: transform .15s ease, box-shadow .15s ease, background .2s; flex:1;
}
.cf-btn:hover{ transform:translateY(-1px); }
.cf-btn-primary {
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color:#fff;
  box-shadow: 0 4px 18px rgba(0,0,0,0.2);
}
.cf-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.25);
}
/* Ghostは青背景＋白文字に変更 */
.cf-btn-ghost{
  background: var(--brand);
  color:#fff;
  border:1px solid color-mix(in oklab, var(--brand) 35%, var(--line));
}

/* 左右ナビボタン（PC） */
.cf-nav{
  position:absolute;
  inset: 0;
  pointer-events: none;   /* ★変更：ナビ面は透過（ブロックしない） */
  z-index: 5;             /* 追加：コンテンツより上だが透過 */
}
.cf-arrow{
  pointer-events: auto;   /* ★変更：矢印だけクリック可 */
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center; cursor:pointer;
  background: color-mix(in oklab, #fff 75%, transparent); box-shadow:0 6px 16px rgba(0,0,0,.08);
  z-index: 6;             /* 追加：矢印は最前面 */
}
.cf-arrow svg{ width:20px; height:20px; }
.cf-arrow.left{ left:6px; } .cf-arrow.right{ right:6px; }
.cf-arrow:hover{ transform:translateY(-50%) scale(1.06); }
@media (max-width:680px){ .cf-arrow{ display:none; } } /* スマホはスワイプ */
	
	/* エントリー手順 */
.cf-steps {
  background: var(--soft);
  padding: clamp(30px, 5vw, 60px);
  border-radius: 16px;
  margin: 40px auto;
  max-width: 900px;
  text-align: left;
}

.cf-steps-title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  margin-bottom: 20px;
  text-align: center;
  color: var(--brand);
}

.cf-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.cf-step-list li {
  position: relative;
  margin: 16px 0;
  padding-left: 44px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

.cf-step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
	}
	
	/* 手順内のミニ導線：サイズ固定 */
.cf-app-links{
  margin-top:12px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.cf-app-logo{
  width:40px; height:40px; flex:0 0 40px; object-fit:contain; border-radius:8px;
}
.cf-store-badge{
  height:40px;      /* ★ここで固定（App/Playを同じ高さに） */
  width:auto;
  display:block;
	}
	/* エントリー手順の補足画像 */
.cf-step-img {
  margin-top: 12px;
  text-align: center;
}
.cf-step-img img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
	}
	
	.cf-entry-note {
  margin-top: 20px;
  padding: 12px 16px;
  background: #f0f7ff;
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  font-size: 14px;
  color: #0e1525;
  line-height: 1.6;
}
.cf-entry-note strong {
  color: var(--brand);
	}
	
	/* キッズボルダープログラム紹介 */
/* キッズボルダープログラム紹介 */
.cf-about {
  background: linear-gradient(135deg, #e6f2ff 0%, #f7fbff 40%, #ffffff 100%);
  padding: clamp(30px, 5vw, 60px);
  border-radius: 16px;
  margin: 40px auto;
  max-width: 1000px;
  text-align: center;
}

.cf-about-title,
.cf-steps-title {
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cf-about-desc {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 32px;
  color: #0e1525;
}

.cf-about-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  text-align: left;
}

.cf-about-card {
  background: #fff;
  border: 1px solid #dbe7f5;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cf-about-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.cf-about-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--brand);
}

.cf-about-card p,
.cf-about-card ul {
  font-size: 15px;
  margin: 0;
  line-height: 1.6;
}

.cf-about-card ul {
  padding-left: 18px;
}

.cf-about-card .cf-note {
  font-size: 13px;
  color: #666;
  margin-top: 6px;
	}
	
	.cf-pathway {
  padding: 50px 20px;
  background: linear-gradient(135deg, #e6f2ff 0%, #ffffff 100%);
  border-radius: 16px;
  max-width: 1100px;
  margin: 40px auto;
  text-align: center;
}

.cf-section-title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #ff6a00, #ff8c42);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cf-section-desc {
  font-size: 16px;
  margin-bottom: 30px;
  color: #333;
}

.cf-pathway-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.cf-step {
  background: #fff;
  border: 1px solid #dce7f5;
  border-radius: 12px;
  padding: 20px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.cf-step h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0072ff;
  margin-bottom: 10px;
}

.cf-step ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
	}
	
	/* ◆ 趣旨（目的）セクション */
:root{
  --brand:#0072ff;
  --accent-1:#ff6a00; /* 暖色グラデ開始 */
  --accent-2:#ff8c42; /* 暖色グラデ終了 */
}

.cf-purpose{
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

.cf-purpose__title{
  margin: 0 0 16px;
  font-weight: 800;
  font-size: clamp(20px,2.6vw,28px);
  line-height: 1.3;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); /* タイトルを暖色グラデで強調 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cf-purpose__card{
  background: #fff;
  border: 1px solid #e6edf7;
  border-radius: 14px;
  padding: clamp(18px,3.5vw,28px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.cf-purpose__card p{
  margin: 0;
  font-size: clamp(15px,1.3vw,17px);
  line-height: 1.9;
  color: #0e1525;
	}
	
	/* ピンからジャンプ時のハイライト */
.cf-card.is-glow{
  box-shadow:0 0 0 4px rgba(0,114,255,.18), 0 12px 28px rgba(0,0,0,.12);
  outline:2px solid #409eff;
	}
	
	/* ◆ 日本地図マップ */
.cf-map{ max-width:1100px; margin:40px auto; padding:0 20px; text-align:center; }
.cf-map .cf-section-title{
  background: linear-gradient(90deg, var(--accent-1,#ff6a00), var(--accent-2,#ff8c42));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  font-weight:800; font-size:clamp(20px,2.6vw,28px); margin:0 0 14px;
}
.cf-map-wrap{
  position:relative;
  background:#fff; border:1px solid #e6edf7; border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  overflow:hidden; padding:10px;
}
.cf-map-bg{ width:100%; height:auto; display:block; border-radius:12px; }

/* ピン */
.cf-pin{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-100%);
  appearance:none; background:transparent; border:none; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.cf-pin-dot{
  width:14px; height:14px; border-radius:50%;
  background: linear-gradient(180deg, #ff8c42, #ff6a00);  /* オレンジ系 */
  box-shadow:0 0 0 4px rgba(255,106,0,.18), 0 6px 12px rgba(0,0,0,.18);
  display:block;
}
.cf-pin-label{
  background:#0e1525; color:#fff; font-size:12px; padding:4px 8px; border-radius:999px;
  transform:translateY(-4px); white-space:nowrap;
}
.cf-pin:focus .cf-pin-label, .cf-pin:hover .cf-pin-label{
  background:#0e1525; opacity:1;
	}
	
/* ===== ANYTEAM パートナー ===== */
.cf-partner {
  max-width: 920px;
  margin: 24px auto 8px;
  padding: 0 16px;
}

.cf-partner__inner {
  position: relative;
  border: 1px solid var(--line);
  background: color-mix(in oklab, #fff 92%, var(--soft));
  border-radius: 16px;
  padding: 28px 20px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
  text-align: center;
  overflow: hidden;
}

/* 上部のグラデーションライン */
.cf-partner__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  opacity: 0.9;
}

/* バッジ */
.cf-partner__badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: color-mix(in oklab, var(--brand) 65%, #222);
  background: color-mix(in oklab, var(--brand) 10%, #fff);
  border: 1px solid color-mix(in oklab, var(--brand) 35%, var(--line));
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 14px;
}

/* ロゴ */
.cf-partner__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cf-partner__logo {
  display: block;
  max-width: 280px;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  filter: brightness(1) saturate(1);
  opacity: 1;
}

/* キャプション */
.cf-partner__caption {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: color-mix(in oklab, var(--text) 85%, #000);
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  .cf-partner__inner {
    background: color-mix(in oklab, #0b1220 90%, var(--soft));
    border-color: color-mix(in oklab, var(--line) 70%, #000);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  }
  .cf-partner__caption {
    color: color-mix(in oklab, #eaf0ff 80%, #fff);
  }
  .cf-partner__logo {
    filter: brightness(0.95);
  }
}

/* 注釈 */
	.cf-map-note{ font-size:12px; color:#4b5563; margin-top:8px; }
	
	.cf-about-support {
  margin-top: 2.5rem;
  padding: 1.75rem 2rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.cf-about-support-header {
  text-align: left;
  margin-bottom: 1.5rem;
}

.cf-about-support-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0.4rem 0 0.6rem;
}

.cf-tag {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
}

.cf-about-support-body {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .cf-about-support-body {
    grid-template-columns: 1fr 1fr;
  }
}

.cf-support-col h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.cf-about-note {
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 1.2rem;
	}
	
	/* 下段カードをグリッド一列ぶち抜きにする */
.cf-about-card-wide {
  grid-column: 1 / -1;
}

/* 余白を少しだけ広めに（お好みで調整） */
.cf-about-card-wide h4 {
  margin-top: 1rem;
  margin-bottom: 0.4rem;
	}
	
	.cf-about-lead {
  margin-bottom: 1.2rem;
}

.cf-levels {
  display: grid;
  gap: 1rem;
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .cf-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cf-level-card {
  background: #f9fbff;
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
}

.cf-level-challenge {
  border-top: 3px solid #4dabf7; /* ENTRY側のアクセント */
}

.cf-level-plus {
  border-top: 3px solid #ff922b; /* ADVANCED側のアクセント */
}

.cf-level-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.cf-level-header h4 {
  font-size: 1.05rem;
  margin: 0;
}

.cf-level-target {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.cf-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.cf-badge-blue {
  background: rgba(77, 171, 247, 0.12);
  color: #1c7ed6;
}

.cf-badge-orange {
  background: rgba(255, 146, 43, 0.14);
  color: #f08c00;
}