@charset "UTF-8";
/* ==========================================================
   EXPERIENCE セクション（体験ピックアップ）
   デザイン基準: design_experience.png（1440×1352 / 2x実測）
   背景は base.css の .bg-band-exp を使用（自作グラデ禁止）
   ========================================================== */

.experience {
  height: 1352px;            /* .bg-band-exp のグラデ停止位置に一致させる固定高 */
  position: relative;
  overflow: hidden;
}

.experience__inner {
  width: min(1272px, 100% - 48px);
  margin: 0 auto;
  /* 【2026-09-02 A-1c】94→76。見出し・カードが実測で18px低かった
     （カンプ 見出しink y3833・カード上端 y4197 / 旧実装 y3849・y4215）。 */
  padding-top: 76px;
}

/* ---- 見出し ---- */
.experience__head {
  display: flex;
  align-items: center;
  gap: 20px; /* 【2026-09-02 A-1c】見出し拡大ぶんを詰めて和ラベルink左端を spec x304.3 に戻す */
  margin-bottom: 39px;
}

/* 【2026-09-01 A-1/T-17】カンプ ink 幅195px／旧実装 176px（46.8px）→ 46.8×195/176 ≈ 52px。
   ※SPは一致しているため据え置き（棚卸しの「SPで一致していて直す必要がない項目」）。 */
.experience__title {
  font-size: 53.57px;       /* 【2026-09-02 A-1c】spec実値（旧52px） */
  line-height: 1;
  letter-spacing: -0.015em; /* spec実値（旧-0.007em） */
  color: var(--color-primary);
}

.experience__label {
  font-size: 17px;          /* spec実値（旧15.3px） */
  line-height: 1;
  color: var(--color-text); /* spec #2d2d2d（旧#7d857f） */
  letter-spacing: 0.11em;   /* spec実値（旧0.02em） */
  transform: translateY(1px);
}

/* ---- カードグリッド 3×2 ---- */
.experience__grid {
  display: grid;
  grid-template-columns: repeat(3, 400px);
  column-gap: 36px;
  row-gap: 37px; /* spec: カード段ピッチ484 = 写真281 + body166 + 37 */
}

.experience__card {
  width: 400px;
}

.experience__photo img {
  width: 400px;
  height: 281px;
  object-fit: cover;
  object-position: center;
}

.experience__body {
  height: 166px; /* 【2026-09-02 A-1c】spec図形 400×166 */
  background: var(--color-primary);
  /* 【2026-09-04 D-1】カンプ実測: 右下だけ角丸。comp/top_pc.png の青ボディ(84/520/956起点・400×166)を
     右辺サブピクセル走査＋円フィット → r=27.80〜28.00px（rms 0.07〜0.13px）。
     他3隅は直角（左辺x=84が最下行まで不変・上辺は初行から全幅）。
     spec/top_pc_spec.json の該当図形も pts=5（矩形4点＋1隅だけ円弧2点）で裏取り。写真側は pts=4＝直角。 */
  border-radius: 0 0 28px 0;
  color: var(--color-white);
  padding: 19px 20px 22px 24px;
  position: relative;
}

.experience__name {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 22px;        /* 【2026-09-02 A-1c】spec実値（旧19.8px） */
  line-height: 1;
  letter-spacing: 0.07em; /* spec実値（旧0.02em） */
}

.experience__meta {
  margin-top: 17px;
  font-size: 15px;        /* spec実値（旧13.5px） */
  line-height: 21px;      /* spec実値 */
  letter-spacing: 0.07em; /* spec実値（旧0.01em） */
}

.experience__meta-term {
  display: block;
}

.experience__meta-desc {
  display: block;
}

/* 「詳しく見る」白ボタン（カード内・右下） */
/* 【2026-09-02 A-1c】spec図形 165.3×50（白）／文字 17px・0.11em・#165ce2 */
.experience__more {
  position: absolute;
  right: 18.7px;
  bottom: 22px;
  width: 165.3px;
  height: 50px;
  background: var(--color-white);
  border-radius: 6px;
  color: var(--color-primary);
  font-size: 17px;
  letter-spacing: 0.11em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px 0 26px;
}

.experience__more-icon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.experience__more-icon svg {
  width: 13px;
  height: 13px;
}

/* ---- 一覧を見る 青ボタン（中央下） ---- */
.experience__foot {
  display: flex;
  justify-content: center;
  margin-top: 73px;
}

.experience__allbtn {
  position: relative;
  width: 300px;
  height: 70px;
  /* 【2026-09-01 A-1/C-1】2026-08-02の暫定対処（#0081DF→#0D62A3）は撤去。
     カンプのアクセント #165CE2 は白文字 5.73:1 で基準を満たすため primary に一本化。 */
  background: var(--color-primary);
  border-radius: 6px;
  color: var(--color-white);
  font-size: 17px;        /* 【2026-09-02 A-1c】spec実値（旧15.3px） */
  letter-spacing: 0.05em; /* spec実値（旧0.08em） */
  display: flex;
  align-items: center;
  justify-content: center;
}

.experience__allbtn-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.experience__allbtn-icon svg {
  width: 12px;
  height: 12px;
}

/* ==========================================================
   SP（〜768px）: 1カラム積み
   基準: spec_sp_experience.json（SPカンプ実測・1css px換算済）
   カード系はPCの0.8825倍（=353/400）
   ========================================================== */
@media (max-width: 768px) {
  .experience {
    height: auto;
    padding: 41px 0 84px;   /* top: titleキャップinkがセクション上端+46 / bottom: allbtn下端→境界84 */
  }

  .experience__inner {
    /* 【2026-09-02 A-1c/top R2】100%-40px(=354) → 100%-42px(=352)。
       カンプ実測（comp/top_sp.png・青ボディ帯の行走査）: カード x22-373 ＝ 幅352。
       旧354ではカードが左に2px広く、さらに写真高が aspect-ratio 400/281 で
       354×281/400 = 248.7px になり、カンプの写真高 247.3（card2: 写真上端4104→ボディ上端4351）より
       1.4px高かった。幅を352にすると写真高が 247.3 になりカードピッチがカンプ(413.4)に揃う。 */
    width: min(600px, 100% - 42px);
    padding-top: 0;
  }

  .experience__head {
    gap: 13px;              /* title右ink→label左ink 13px */
    /* 【2026-09-02 A-1c/top R2】17→15。カンプのカード1ボディ上端 y3938 に対し実装 3940（+2）。
       EXPERIENCE見出しインク y3645 はカンプ一致なので、見出し〜グリッド間だけ2px詰める。 */
    margin-bottom: 15px;
  }

  .experience__title {
    /* spec推定30.8pxはPC比0.812のキャップ比前提。Bebas Kai実メトリクス=0.70em で
       カンプink実測(125w×24.5h)から逆算すると34.5px・ls-0.02emが一致（実測検証済） */
    font-size: 34.5px;
    letter-spacing: -0.02em;
  }

  .experience__label {
    font-size: 15px; /* 【2026-09-02 A-1c】spec実値（旧13.8px） */
  }

  .experience__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    /* 【2026-09-02 A-1c/top R2】19.7→19.2。カンプ実測のカードピッチは 413.4
       （青ボディ上端 3938/4351/4765/5178/5592/6005）＝写真247.3 + body146.9 + 19.2。
       旧 415.3 は1枚ごとに約2px積み上がり、HOW TO で+13、ACCESS見出しで+19の縦ズレになっていた。 */
    row-gap: 19.2px;
  }

  .experience__card {
    width: 100%;
  }

  .experience__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 281; /* 353幅で248px・PCと同一トリミング */
  }

  .experience__body {
    height: 146.9px;         /* 【2026-09-02 A-1c】spec図形 354×146.9 */
    /* 【2026-09-04 D-1】SPカンプ実測: comp/top_sp.png 青ボディ(x22-374・352×146)の
       右下 r=22.05〜22.35px（6枚平均22.2 / rms 0.08〜0.11px）。他3隅は直角。 */
    border-radius: 0 0 22px 0;
    padding: 17px 18px 19px 21px;
  }

  .experience__name {
    font-size: 19.47px;      /* spec実値（旧17.5px） */
  }

  .experience__meta {
    margin-top: 15px;
    font-size: 13.28px;      /* spec実値（旧12px） */
    line-height: 18.59px;    /* spec実値（旧19px） */
  }

  .experience__more {
    right: 17px;
    bottom: 19.5px;
    width: 146.3px;
    height: 44.2px;
    font-size: 13px;         /* 【2026-09-02 A-1c】spec実値（旧10.5px） */
    letter-spacing: 0.05em;  /* spec実値（PCは0.11em） */
    padding: 0 13.5px 0 27px;
  }

  .experience__more-icon {
    width: 21px;
    height: 21px;
  }

  .experience__more-icon svg {
    width: 11.5px;
    height: 11.5px;
  }

  .experience__foot {
    margin-top: 37px;        /* card6 body下端→allbtn上端 */
  }

  .experience__allbtn {
    width: 265.2px;
    height: 61.9px;
    font-size: 16px; /* 【2026-09-02 A-1c】spec実値（旧14.5px） */
  }

  .experience__allbtn-icon {
    right: 12.5px;
    width: 21.5px;
    height: 21.5px;
  }

  /* 【2026-09-02 A-1c/top】旧・グラデ近似は撤去。ウォッシュは main::before の画像タイル。 */
  .experience.bg-band-exp { background: transparent; }
}

/* 【2026-09-17 修正】体験ピックアップはカンプの6枠のうち5・6枚目が仮の繰り返しだったため4枚に（市岡さん判断）。
   PCは3列×2段 → 2列×2段を中央寄せ（カード幅400はそのまま） */
@media (min-width: 769px) {
  .experience__grid { grid-template-columns: repeat(2, 400px); justify-content: center; }
}
/* 【2026-09-17 修正】体験カードは下層（楽しみ方）の2列カードと同じ幅に（PC 2列・カード幅615px） */
@media (min-width: 769px) {
  .experience__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 42px; justify-content: stretch; }
  .experience__card { width: auto; }
  .experience__photo img { width: 100%; height: auto; aspect-ratio: 400 / 281; }
}

/* ==========================================================
   【2026-09-17 深夜3】市岡さん指示: カードは見出し青帯＋本文白地（全ページ共通の様式）
   所要時間／対象年齢はラベルと値を同じ行に、対象年齢で改行
   ========================================================== */
.experience__body { height: auto; min-height: 166px; padding: 0 0 86px; background: var(--color-white); color: var(--color-text); border: 1px solid rgba(22, 92, 226, 0.35); border-top: 0; }
.experience__name { margin: 0; padding: 15px 24px 14px; background: var(--color-primary); color: var(--color-white); }
.experience__meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 8px; row-gap: 6px; align-items: baseline; margin: 16px 24px 0; }
.experience__meta-term, .experience__meta-desc { display: block; margin: 0; }
.experience__more { background: var(--color-primary); color: var(--color-white); }
.experience__more-icon { background: var(--color-white); color: var(--color-primary); }
@media (max-width: 768px) {
  .experience__body { height: auto; padding: 0 0 76px; }
  .experience__name { padding: 12px 21px 11px; }
  .experience__meta { margin: 12px 21px 0; }
}

/* 【2026-09-17 夜】2列×2段（下層と同じ幅のカード）にしたため、カンプの固定高 1352px では2段目が見切れる。
   高さは中身に合わせ、下に次のセクションまでの余白を確保する（.bg-band-exp は透明＝背景の停止位置に依存しない） */
@media (min-width: 769px) {
  .experience { height: auto; min-height: 0; overflow: visible; padding-bottom: 96px; }
}

/* 【2026-09-18】市岡さん指示: 「詳しく見る」を本文（所要時間・対象年齢）の横に置き、白地の縦を詰める。
   SPは幅が足りないため本文の下・右寄せのまま、余白だけ詰める */
.experience__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "meta more"; align-items: center; min-height: 0; padding: 0; }
.experience__name { grid-area: name; }
.experience__meta { grid-area: meta; margin: 16px 0 16px 24px; }
.experience__more { grid-area: more; position: static; margin: 0 20px 0 16px; }
@media (max-width: 768px) {
  .experience__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "meta" "more"; padding: 0; }
  .experience__meta { margin: 12px 21px 0; }
  .experience__more { justify-self: end; margin: 8px 17px 14px 0; }
}