/* =================================================== */
/* ▼▼▼ デザインの配色はここで編集します ▼▼▼             */
/* =================================================== */
:root {
  /* ★要編集: メインカラー（一番上の目立つボタンなど） */
  --primary-color:     #098d9b;
  /* ★要編集: メインカラーのマウスホバー時 */
  --hover-color:       #077d87;
  /* ★要編集: アクセントカラー（下段のボタンなど） */
  --secondary-color:   #FF6F61;
  /* ★要編集: アクセントカラーのマウスホバー時 */
  --secondary-hover:   #E55D52;
  
  /* --- 上級者向け設定 --- */
  --text-color:        #333;
  --bg-gradient-start: #F0FBFF;
  --bg-gradient-end:   #E6F7F8;
  --container-bg:      rgba(255, 255, 255, 0.9);
  --border-color:      rgba(255, 255, 255, 0.5);
}

/* =================================================== */
/* ▼▼▼ 基本的に、この下のコードを編集する必要はありません ▼▼▼ */
/* =================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; padding: 0; font-family: 'Noto Sans JP', sans-serif; color: var(--text-color); min-height: 100vh; overflow-x: hidden; background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end), #d4f0f2, #e0f8fb); background-size: 400% 400%; animation: gradientAnimation 15s ease infinite; }
@keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.container { max-width: 900px; margin: 40px auto; padding: clamp(24px, 5vw, 40px); background: var(--container-bg); border-radius: 20px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border-color); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-align: center; opacity: 0; animation: fadeIn 1s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.video-section, .button-section { opacity: 0; animation: contentFadeIn 0.8s ease-out forwards; }
.video-section { animation-delay: 0.2s; }
.button-section { animation-delay: 0.4s; }
@keyframes contentFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.video-section { margin-bottom: 40px; }
.video-title { font-size: clamp(22px, 4.5vw, 30px); font-weight: 700; line-height: 1.5; color: var(--primary-color); margin-bottom: 24px; letter-spacing: 0.5px; }
.video-container { position: relative; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
.iframe-wrapper { position: relative; padding-top: 56.25%; }
.iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.button-section { margin-top: 20px; }
.main-button, .custom-button { display: block; text-decoration: none; font-weight: 700; border-radius: 50px; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); color: #fff; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.main-button:focus-visible, .custom-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg-gradient-start), 0 0 0 5px var(--primary-color); }
.custom-button:focus-visible { box-shadow: 0 0 0 3px var(--bg-gradient-start), 0 0 0 5px var(--secondary-color); }
.main-button { width: 100%; max-width: 480px; margin: 0 auto 24px; padding: 16px 24px; font-size: clamp(18px, 3.5vw, 20px); line-height: 1.4; background-color: var(--primary-color); }
.main-button:hover { background-color: var(--hover-color); transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 25px rgba(9, 141, 155, 0.4), 0 0 20px rgba(9, 141, 155, 0.2); }
.button-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.custom-button { padding: 14px 28px; font-size: clamp(16px, 3vw, 18px); background-color: var(--secondary-color); }
.custom-button:hover { background-color: var(--secondary-hover); transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 25px rgba(229, 93, 82, 0.4), 0 0 20px rgba(229, 93, 82, 0.2); }
.custom-button.clicked, .main-button.clicked { transform: translateY(0) scale(0.98); transition: transform 0.1s ease; }
@media (max-width: 768px) { body { animation: none; } .container { margin: 24px 16px; border-radius: 16px; } .button-row { flex-direction: column; align-items: center; gap: 16px; } .main-button, .button-row .custom-button { width: 100%; max-width: 380px; } }
@media (max-width: 500px) { .video-title br { display: none; } }