:root{
  --bg:#0c1022;
  --ink:#ffffff;
  --ink-dim:rgba(255,255,255,.85);
  --cyan:#00E5FF;
  --cyan-soft:#76E4FF;
  --card:#ffffff0d; /* white/5 */
  --card-border:#ffffff1a; /* white/10 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:"Inter","Helvetica Neue","Hiragino Kaku Gothic ProN","Meiryo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* 背景：グラデ＋星粒子 */
.bg-wrap{position:fixed; inset:0; z-index:-2}
.bg-top, .bg-bottom{position:absolute; inset:0; opacity:.3}
.bg-top{background:radial-gradient(ellipse at top, #1b2a6b 10%, transparent 80%)}

/* 必要なら下部グラデも使う*/
.bg-bottom{background:radial-gradient(ellipse at bottom, #041026 10%, transparent 60%)} 
.stars{
  position:absolute; width:100%; height:100%; left:60%; top:30%;
  background:
    radial-gradient(10px 10px at 20% 30%, #76E4FF, transparent 60%),
    radial-gradient(20px 20px at 70% 60%, #76E4FF, transparent 60%),
    radial-gradient(10px 10px at 40% 80%, #76E4FF, transparent 60%),
    radial-gradient(20px 20px at 10% 50%, #76E4FF, transparent 60%),
    radial-gradient(10px 10px at 80% 20%, #76E4FF, transparent 60%),
    radial-gradient(20px 20px at 30% 70%, #76E4FF, transparent 60%),
    radial-gradient(10px 10px at 60% 40%, #76E4FF, transparent 60%);
  animation: drift 30s linear infinite; opacity:.8
}
@keyframes drift{to{transform:translate3d(-100%,-100%,0)}}

.btnbar{margin-top:18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{padding:10px 16px; border-radius:14px; font-weight:700; text-decoration:none; transition:.2s}
.btn.primary{background:color-mix(in oklab, var(--cyan) 90%, black 10%); color:#041026}
.btn.primary:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn.ghost{border:1px solid #ffffff33; color:var(--ink)}
.btn.ghost:hover{background:#ffffff10}

main{padding:0 16px 60px}
.grid{
  width:min(1200px,100%);
  margin:0 auto; display:grid; gap:16px;
  grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width:640px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:992px){ .grid{grid-template-columns:repeat(3,1fr)} }

h2 {
        color:var(--ink);
        font-size: 24px;
        border: none;
        border-top: none;
        border-right: none;
        padding: 15px 0 15px 15px;
    }

.card{
  position:relative; border-radius:18px; padding:18px;
  background:var(--card); border:1px solid var(--card-border);
  backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 6px 12px rgba(0,0,0,.25);
  transform:translateY(24px) scale(.96); opacity:0;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s;
  overflow:hidden;
  font-size:clamp(16px, 3vw + 12px, 9px);
}
.card.in{transform:none; opacity:1}
.card:hover{transform:translateY(-2px) scale(1.01)}

.card h2{
  margin:0;
  font-size:clamp(16px, 3vw + 12px, 23px);
  font-weight:900;
  letter-spacing:.05em;
  color:#fff;
  text-shadow:0 0 12px rgba(0,229,255,.6), 0 0 24px rgba(0,229,255,.4);
  animation:glowIn .8s ease-out;
  line-height:1.15;
  padding-left: 0;
}

@keyframes glowIn{
  0%{opacity:0; transform:scale(.7); text-shadow:none}
  70%{opacity:1; transform:scale(1.05); text-shadow:0 0 18px rgba(0,229,255,.8)}
  100%{transform:scale(1); text-shadow:0 0 12px rgba(0,229,255,.5)}
}

/*.meta{margin:8px 0 0; color:var(--ink-dim); line-height:1.7;  font-size:14px}*/
.meta{margin:8px 0 0; color:var(--ink-dim); line-height:1.7; font-size:17px}
/* ラベル：値 を2カラムで揃える */
.meta .row{
  display:grid;
  grid-template-columns:max-content 1fr; /* ラベルは必要最小、値が残り全部 */
  gap:10px;
}
.meta .k{
  font-weight:700;
  white-space:nowrap;     /* ラベルの折返し防止 */
  opacity:.95;
}
.meta .v{
  word-break:break-word;  /* 長い校名も折返して崩れにくく */
}
.head{display:flex; align-items:center; gap:10px}

.detail{
  display:grid; grid-template-rows:1fr; /* 常時オープン */
}
.detail > div{overflow:hidden}
.detailbox{
  margin-top:12px; border:1px solid var(--card-border);
  background:#ffffff08; border-radius:14px; padding:12px; color:var(--ink-dim)
}
.detailbox ul{margin:0; padding-left:1.2em}
.detailbox li{margin:.4em 0}

/* ボーダー */
.electric{ position:absolute; inset:0; border-radius:18px; pointer-events:none; }
.card:hover .electric::before{
  content:""; position:absolute; inset:-2px; border-radius:20px; padding:2px;
  background:conic-gradient(from 0deg, var(--cyan), var(--cyan-soft), var(--cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spin 2.4s linear infinite;
  filter:drop-shadow(0 0 14px rgba(0,229,255,.35))
}
@keyframes spin{to{transform:rotate(360deg)}}

/* アニメーション */
.bolt-wrap{position:sticky; top:0; height:0; z-index:-1}
.bolt{position:absolute; left:50%; transform:translateX(-50%); top:74px;
      width:min(1400px, 120vw); height:260px; pointer-events:none}
.dash{animation:dash 1.8s ease-in-out}
@keyframes dash{
  0%{stroke-dasharray:8 520; stroke-dashoffset:520; opacity:0}
  20%{opacity:.95}
  100%{stroke-dasharray:8 520; stroke-dashoffset:0; opacity:0}
}

/* .grid と同じ幅・左右余白に合わせる */
.section-titleEx{
  width:min(1200px,100%);
  margin:0 auto 12px;     /* 中央に寄せる（左右は自動） */
  padding:0 16px;         /* .grid と同じ横パディング */
  text-align:left;
  line-height:1.2;
  color:var(--ink);
  font-size: 24px;
  border: none;
  border-top: none;
  border-right: none;
  padding: 15px 0 15px 15px;
}

/* セクション見出し・補足 */
.sec{width:min(1000px,95%); margin:0 auto}
.sec h3{font-size:clamp(20px,3.5vw,28px); margin:6px 0 12px}
.note {
  border: 1px solid var(--card-border);
  background: rgba(20,26,45,0.1);  /* 90%不透明 */
  border-radius: 18px;
  padding: 16px;
  line-height: 1.8;
  font-size: 16px;
  backdrop-filter: saturate(140%) blur(6px); /* カードと同じ効果を付ける */
}

/* 低モーション設定尊重 */
@media (prefers-reduced-motion: reduce){
  .card,.card:hover{transition:none; transform:none}
  .dash{animation:none}
  .electric::before{animation:none}
  .stars{animation:none}
}

.contact-link {
  text-align: center;
  margin: 30px 0;
  font-size: 15px;
  color: #fff;
}

.contact-btn {
  display: inline-block;
  margin-left: 8px;
  padding: 10px 20px;
  font-weight: 700;
  border-radius: 999px;
  background:linear-gradient(90deg, #00E5FF, #76E4FF);
  color:#041026 !important;              
  text-decoration: none;
  box-shadow: 0 0 12px rgba(0,229,255,0.6), 0 0 20px rgba(0,229,255,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-shadow:none;
  
}

.contact-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 18px rgba(0,229,255,0.8), 0 0 30px rgba(0,229,255,0.6);
}

.note-list {
  margin: 0;
  padding-left: 1.4em; /* 左インデント */
  list-style: disc;    /* 黒丸 */
  line-height: 1.8;
  font-size: 14px;
}
.note-list li {
  margin: 0.6em 0;
}

.sublist {
  margin: 6px 0 6px 1.5em; /* 左に字下げ */
  padding: 0;
  list-style: disc;        /* 黒丸 */
  font-size: 13px;         /* 少し小さく */
  line-height: 1.6;
}
.sublist.note {
  list-style: none;        /* 注釈っぽく */
  font-size: 12px;
  color: var(--ink-dim);
}
.sublist li {
  margin: 2px 0;
}

.thumbnail {
  max-width: 150px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.modal {
  display: none; /* 初期は非表示 */
  position: fixed;
  z-index: 1000;
  padding-top: 60px;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

.modal-content {
  display: block;
  margin: auto;
  max-width: 80%;
  max-height: 80%;
  border-radius: 8px;
}

.close {
  position: absolute;
  top: 20px; right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.thumb-wrap {
  text-align: center;   /* 中の要素を右寄せ */
}
.thumb-wrap img {
  max-width: 120px;    /* サムネイルサイズ */
  border-radius: 6px;
  cursor: pointer;
}

/* コーチの注釈枠 */
.note { display:inline-block; margin-top:.35rem; }

/* ボタン共通 */
.cta-link{
  display:inline-flex; align-items:center; gap:.44em;
  padding:.42rem .7rem; border-radius:.6rem;
  text-decoration:none; font-weight:700; line-height:1;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset;
}

/* YouTubeっぽい強調 */
.yt-btn{
  background: linear-gradient(180deg,#ff4040,#d10000);
  color:#fff;
}
.yt-btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.yt-btn .icon{ width:1.05em; height:1.05em; display:block; }

/* 通常リンクの強調（YouTube以外） */
.ext-btn{
  background:#203a66; color:#d8e7ff; border:1px solid #3a5b8a;
}
.ext-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.ext-btn .linkdot{ font-size:.7em; }

/* 外部リンク矢印（控えめに） */
.cta-link .ext{ opacity:.8; font-weight:600; }

/* 共通：アイコン */
.cta-link .icon{
  width:1.05em;
  height:1.05em;
  display:block;
  fill: currentColor;
}

/* WordPressっぽい強調（青系） */
.wp-btn{
  background: linear-gradient(180deg, #2ea3f2, #1e6fbf);
  color:#fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset;
}
.wp-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.wp-btn .ext{ opacity:.9; }



.final-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #ff4081;   /* 目立つ色（ピンク系） */
  color: #fff;
  vertical-align: middle;
}

.final-badge small {
  font-size: 10px;
}

/* 体験日だけ段落感を出す */
.meta .row.trial-row{
  margin-top: 14px;                 /* 行間（段落間） */
  padding-top: 10px;                /* 文字の上の余白 */
  border-top: 1px solid rgba(255,255,255,.12); /* 区切り線（不要なら消してOK） */
}

/* 最初の体験日は区切り線いらないなら */
.meta .row.trial-row:first-of-type{
  border-top: none;
  padding-top: 0;
}

/* 体験日の中身（<br>で改行される部分）も読みやすく */
.meta .row.trial-row .v{
  line-height: 1.9;
}

/* 全チーム共通：指導フィロソフィ */
.philosophy{
  margin: 14px 0 20px;
  backdrop-filter: saturate(140%) blur(6px); /* カードと同じ効果を付ける */
}
.ph-card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
}
.ph-card:before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:3px;
  background: rgba(0,229,255,.9);
}
.ph-head{ margin-bottom: 12px; }
.ph-badge{
  display:inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(0,229,255,.95);
  background: rgba(0,229,255,.12);
  border: 1px solid rgba(0,229,255,.25);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.ph-title{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.35;
  color: rgba(255,255,255,.98);
}
.ph-sub{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}
.ph-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ph-note{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.65);
}



/* スマホ調整 */
@media (max-width: 767px){
  .ph-card{ padding: 14px 12px 12px; }
  .ph-title{ font-size: 15px; }
  .ph-actions{ gap: 8px; }
}