@charset "UTF-8";
/* 体験申込選択ページ専用CSS：既存の style.css / parts.css は読み込みません */
:root { --blue:#00a7eb; --navy:#203747; --text:#27343c; --muted:#65747e; --border:#d7e4e9; --bg:#f5f9fb; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--text); font-family:'Noto Sans JP',sans-serif; font-size:15px; line-height:1.7; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid #f5b727; outline-offset:4px; }
img { display:block; max-width:100%; }
.ex-header { background:#fff; border-bottom:1px solid #edf1f4; }
.ex-header__inner { max-width:1200px; margin:auto; padding:18px 26px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.ex-logo img { width:min(330px,55vw); height:auto; }
.ex-home { font-size:13px; color:#4b5c64; font-weight:700; white-space:nowrap; }
.ex-home:hover { color:var(--blue); }
.ex-hero { text-align:center; padding:64px 20px 60px; background:linear-gradient(115deg,#e4f5fc 0%,#f7fbfc 45%,#eaf5f8 100%); }
.ex-eyebrow { color:var(--blue); font-weight:900; letter-spacing:.22em; font-size:13px; margin:0 0 8px; }
.ex-hero h1 { font-size:clamp(26px,3.2vw,38px); letter-spacing:.09em; margin:0; color:var(--navy); }
.ex-hero > p:last-child { margin:10px 0 0; color:var(--muted); font-size:14px; }
.ex-container { max-width:1170px; margin:0 auto; padding:0 26px 100px; }
.ex-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:42px 0 42px; padding:0; list-style:none; gap:4px; }
.ex-step { min-height:96px; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#e7eef2; color:#5f707b; position:relative; text-align:center; padding:14px 28px; clip-path:polygon(0 0,calc(100% - 23px) 0,100% 50%,calc(100% - 23px) 100%,0 100%,23px 50%); }
.ex-step:first-child { clip-path:polygon(0 0,calc(100% - 23px) 0,100% 50%,calc(100% - 23px) 100%,0 100%); }
.ex-step:last-child { clip-path:polygon(0 0,100% 0,100% 100%,0 100%,23px 50%); }
.ex-step--current { background:var(--navy); color:#fff; }
.ex-step span { font-size:11px; font-weight:900; letter-spacing:.12em; opacity:.85; }
.ex-step strong { font-size:15px; letter-spacing:.02em; }
.ex-section-title { text-align:center; font-size:clamp(19px,2.4vw,25px); margin:0 0 25px; color:var(--navy); }
.ex-notice { border:1px solid #9ab1bd; border-left:5px solid var(--blue); border-radius:4px; padding:20px 26px; margin-bottom:30px; background:#fff; }
.ex-notice p { margin:0 0 6px; font-size:13px; }
.ex-notice p:last-child { margin-bottom:0; }
.ex-courses { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 22px; }
.ex-card { min-width:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid #e2e9ee; border-radius:13px; background:#fff; box-shadow:0 8px 24px rgba(22,70,93,.06); transition:transform .2s,box-shadow .2s; }
.ex-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(22,70,93,.12); }
.ex-card__image { aspect-ratio:1.42; overflow:hidden; background:#dbeaf1; display:flex; align-items:center; justify-content:center; }
.ex-card__image img { width:100%; height:100%; object-fit:cover; }
.ex-card__image--kids { background:linear-gradient(135deg,#d8f3fb,#79cde9); color:#14678d; }
.ex-card__image--robot { background:linear-gradient(135deg,#e9f7e6,#8dcdb6); color:#245c4b; }
.ex-card__image--kids span,.ex-card__image--robot span { font-weight:900; font-size:clamp(25px,3vw,38px); line-height:1.2; text-align:center; letter-spacing:.08em; }
.ex-card__image--robot span { font-size:clamp(19px,2.3vw,27px); }
.ex-card__body { display:flex; flex-direction:column; flex:1; padding:18px; }
.ex-card__type { align-self:flex-start; background:#ebf8fd; color:#087fae; padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; }
.ex-card h3 { margin:10px 0 3px; font-size:19px; line-height:1.4; }
.ex-card__body p { color:var(--muted); font-size:12px; margin:0 0 20px; }
.ex-card__link { margin-top:auto; display:flex; align-items:center; justify-content:center; gap:12px; background:var(--blue); color:#fff; border-radius:7px; padding:12px 8px; font-weight:700; font-size:14px; transition:background .2s; }
a.ex-card__link:hover { background:#007fb6; }
.ex-card__link--pending { background:#e2e7ea; color:#536671; cursor:default; }
.ex-footnote { margin-top:26px; color:var(--muted); font-size:12px; }
.ex-footer { border-top:1px solid #e5edf1; padding:28px 20px; text-align:center; color:#5d707b; background:var(--bg); }
.ex-footer a { display:block; font-weight:700; }
.ex-footer small { font-size:11px; }
/* PCのみ：3列のままカード幅を旧サイズの約80%にし、カード間隔を広げる */
@media (min-width:1000px) {
  .ex-courses {
    width:90%;
    margin-inline:auto;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:70px;
    row-gap:48px;
  }
}
@media (max-width:760px) {
  .ex-header__inner { padding:15px 18px; }
  .ex-hero { padding:45px 16px; }
  .ex-container { padding:0 18px 65px; }
  .ex-steps { margin:25px 0 30px; gap:2px; }
  .ex-step { min-height:74px; padding:8px 10px 8px 20px; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%); }
  .ex-step:first-child { clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%); }
  .ex-step:last-child { clip-path:polygon(0 0,100% 0,100% 100%,0 100%,12px 50%); }
  .ex-step strong { font-size:11px; }
  .ex-step span { font-size:10px; }
  .ex-courses { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .ex-notice { padding:15px 17px; }
}
@media (max-width:480px) {
  .ex-logo img { width:min(235px,59vw); }
  .ex-home { font-size:11px; }
  .ex-courses { grid-template-columns:1fr; gap:18px; }
  .ex-card__image { aspect-ratio:1.65; }
  .ex-step strong { font-size:10px; line-height:1.35; }
  .ex-section-title { font-size:18px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }

/* マインクラフト・ロボ団：教室別フォーム選択（JavaScript不要） */
.ex-school-select { margin-top:auto; }
.ex-school-select > summary { cursor:pointer; list-style:none; }
.ex-school-select > summary::-webkit-details-marker { display:none; }
.ex-school-select > summary:hover { background:#007fb6; }
.ex-school-select[open] > summary { border-radius:7px 7px 0 0; }
.ex-school-select__links { border:1px solid #b9deec; border-top:0; border-radius:0 0 7px 7px; overflow:hidden; }
.ex-school-select__links a { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; font-size:13px; font-weight:700; background:#f4fbff; border-bottom:1px solid #d6ecf5; }
.ex-school-select__links a:last-child { border-bottom:0; }
.ex-school-select__links a:hover, .ex-school-select__links a:focus-visible { color:#006e9f; background:#e0f4fd; }