:root{
    --alp-font: "Orbitron",  sans-serif;
    --jp-font: "Orbitron", "Murecho", sans-serif;
}
h1 {
  text-align: center;
  font-family: var(--alp-font);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #0c0f0f;
  font-size: 54px;
  text-shadow: 3px 4px 4px rgba(84, 222, 203, 0.66);
}
@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  /* カードのサイズを少し調整（3つ並ぶように） */
  --card-height: 400px;
  --card-width: 300px;
}

body {
  min-height: 100vh;
  background: #212534;
  display: flex;
  align-items: center;
  justify-content: center; /* 中央寄せ */
}

/* 3つ並べるためのグリッド */
.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  padding: 20px;
}

.card {
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff; /* 文字を見えるように */
  cursor: pointer;
  text-decoration: none; /* 下線を消す */
  display: flex;         /* aタグにしてもflexを維持 */
  font-family: var(--jp-font);
}

/* ホバー時のテキスト表示設定 */
.card .content p {
  opacity: 0;
  transition: opacity 0.5s;
  font-size: 0.8em;
  margin-top: 15px;
  font-family: sans-serif;
}

.card:hover .content p {
  opacity: 1;
}



/* ホバー時にアニメーションを止めない場合はここを削除（提示コードに合わせました） */
.card:hover:before, .card:hover:after {
  animation: none;
  opacity: 0;
}

@keyframes spin {
  0% { --rotate: 0deg; }
  100% { --rotate: 360deg; }
}

/* レスポンシブ */
@media (max-width: 1100px) {
  .grid-wrapper {
    grid-template-columns: 1fr;
  }
}

.card::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  /* HTMLから渡された変数を使う。未指定時のために予備の色(青系)も設定 */
  background-image: linear-gradient(
    var(--rotate), 
    var(--clr1, #5ddcff), 
    var(--clr2, #3c67e3) 43%, 
    var(--clr3, #4e00c2)
  );
  position: absolute;
  z-index: -1;
  top: -1%;
  left: -2%;
  animation: spin 2.5s linear infinite;
}

.card::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  /* こちらも同様に変数を使う */
  background-image: linear-gradient(
    var(--rotate), 
    var(--clr1, #5ddcff), 
    var(--clr2, #3c67e3) 43%, 
    var(--clr3, #4e00c2)
  );
  opacity: 1;
  transition: opacity .5s;
  animation: spin 2.5s linear infinite;
}

/* ボタンの基本スタイル */
.neon-btn {
  position: relative;
  display: inline-block;
  padding: 8px 18px;
  margin-top: 20px;
  color: var(--clr1); /* 各カードの1色目と連動 */
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 0.75rem;
  text-transform: uppercase;
  border: 1px solid var(--clr1);
  border-radius: 4px;
  transition: 0.5s;
  /* 最初は隠して、ホバーでスッと出す設定 */
  opacity: 0;
  transform: translateY(15px);
}

/* カードをホバーした時にボタンを表示 */
.card:hover .neon-btn {
  opacity: 1;
  transform: translateY(0);
}

/* ボタン自体にホバーした時の強力な発光 */
.neon-btn:hover {
  background: var(--clr1);
  color: #191c29; /* 背景色に近い色にして文字を抜く */
  box-shadow: 0 0 10px var(--clr1),
              0 0 30px var(--clr1),
              0 0 60px var(--clr1);
  /* 鏡面反射の効果 */
  -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0,0,0,0.2));
}

/* モーダル背景（最初は隠しておく） */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85); /* 暗めの背景 */
  backdrop-filter: blur(8px); /* 背景をぼかす */
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

/* モーダルの箱 */
.modal-content {
  position: relative;
  width: 90%;
  max-width: 600px;
  height: 80vh;
  background: #191c29;
  border: 2px solid #0cafea; /* カードの色に合わせる */
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(12, 175, 234, 0.5);
  overflow: hidden;
}

/* 閉じるボタン */
.close-btn {
  position: absolute;
  /* フォームの内容と重ならないよう、少し外側（右上）へ出す */
  top: 10px;
  right: 15px; 
  
  font-size: 32px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  z-index: 1001; /* フォーム（iframe）より必ず上に表示 */
  transition: 0.3s;
  
  /* Googleフォームの白背景に負けないよう、影をつけておく */
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8), 0 0 10px #0cafea;
}

.close-btn:hover {
  color: #0cafea;
  transform: scale(1.2); /* ホバーで少し大きくして押しやすく */
}

@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    height: 90vh; /* スマホでは少し高さを出す */
  }
}