/* 全体フォント設定 */
   body { 
      background-color: #fafbfc; 
      color: #333333; 
      font-family: 'Zen Maru Gothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
   }
   .bg-white { background-color: #ffffff; padding: 60px 0; }
   .bg-light { background-color: #f4f7f9; padding: 60px 0; } 
   .inline-block { display: inline-block; }

   /* 見出しの基本カラー（ピンクを維持してアクセントに） */
   h1, h2, h3 { color: #ff3366; font-weight: 900; } 

   /* ボタンデザイン */
   .btn { margin: 0 10px; display: inline-block; }

   .btn-primary { 
      background-color: #ff3366; 
      color: #ffffff; 
      padding: 14px 28px; 
      border-radius: 30px; 
      text-decoration: none; 
      font-weight: bold; 
      box-shadow: 0 4px 12px rgba(255, 51, 102, 0.3); 
      transition: 0.2s; 
   }
   .btn-primary:hover { 
      background-color: #e60039; 
      transform: translateY(-2px); 
   }

   /* ★サブボタンの色をもっと明るい青に変更 */
   .btn-secondary { 
      background-color: #33ccff; /* より明るい青 */
      color: #ffffff; 
      padding: 14px 28px; 
      border-radius: 30px; 
      text-decoration: none; 
      font-weight: bold; 
      box-shadow: 0 4px 12px rgba(51, 204, 255, 0.4); 
      transition: 0.2s; 
   }
   .btn-secondary:hover { 
      background-color: #00bfff; 
      transform: translateY(-2px); 
   }

   /* =========================================
      ヒーローエリア（白文字＋もっと明るい青の背景）
      ========================================= */
   .hero {
      /* ★背景をピンク系から、もっと明るい青のグラデーションに変更 */
      background: linear-gradient(135deg, #33ccff 0%, #00bfff 100%);
      color: #ffffff;
      padding: 60px 0;
   }
   .hero h1 { 
      color: #ffffff; /* 白字指定 */
      text-shadow: 2px 2px 0px rgba(0,0,0,0.1); 
   }
   .hero .eyebrow, .hero .hero-lead { color: #ffffff; }

   .hero-badge { background: #ffffff; color: #ff3366; font-weight: bold; padding: 10px; border-radius: 8px; text-align: center; margin-top: 10px;}

   /* =========================================
      レイアウトアレンジ
      ========================================= */
   #about .panel {
      background-color: #ffffff;
      border: 3px solid #ff3366;
      border-radius: 16px;
      padding: 24px;
      text-align: center;
      box-shadow: 5px 5px 0px #ff3366; 
      transition: transform 0.2s;
   }
   #about .panel:hover {
      transform: translate(-2px, -2px);
      box-shadow: 7px 7px 0px #ff3366;
   }
   #about .panel h3 { margin-top: 0; }

   @media (min-width: 768px) {
      #jobs .grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
      #jobs .card { display: flex; flex-direction: row; align-items: center; background-color: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
      #jobs .card-media { width: 35%; flex-shrink: 0; }
      #jobs .card-body { width: 65%; padding: 24px; }
   }

   /* ★学科・分野カードの上部ラインをもっと明るい青に変更 */
   #courses .card {
      border-top: 5px solid #33ccff; 
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
      transition: transform 0.3s, box-shadow 0.3s;
      background-color: #ffffff;
      display: block;
      text-decoration: none;
      color: inherit;
   }
   #courses .card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(51, 204, 255, 0.3); }

   #traits .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
   #traits .panel { background-color: #ffffff; border-left: 6px solid #ffcc00; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 20px 24px; border-radius: 0 8px 8px 0; }
   #traits .panel h3 { color: #333333; } 
   #traits .panel h3::before { content: '✨ '; color: #ffcc00; }

   /* =========================================
      CTAエリア（白文字＋色字指定）
      ========================================= */
   /* ★背景をシアン系から、もっと明るい青のグラデーションに変更 */
   #open-campus.cta { 
      background: linear-gradient(135deg, #33ccff 0%, #00bfff 100%); 
      border-radius: 20px;
      padding: 40px;
      margin-top: 40px;
      color: #ffffff;
   }
   #open-campus .label {
      background-color: #ff3366;
      color: #ffffff;
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 0.9em;
      display: inline-block;
      margin-bottom: 10px;
      font-weight: bold;
   }

   #open-campus h2 {
      color: #ffffff; /* 白字指定 */
      text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
   }
   #open-campus p { color: #ffffff; }
   #open-campus .note { color: #e0f7fa; font-size: 0.9em; margin-top: 15px; }

   /* 白いボックス内の色字リスト指定 */
   #open-campus .cta-box {
      background: #ffffff; 
      padding: 24px; 
      border-radius: 12px; 
      margin-top: 20px; 
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
   }
   #open-campus .cta-box h3 { color: #333333; margin:0 0 15px; }

   .cta-list { list-style: none; padding: 0; margin: 0; }
   .cta-list li {
      font-size: 1.1em;
      margin-bottom: 12px;
      padding-left: 1.5em;
      position: relative;
   }
   .cta-list li::before {
      content: '★';
      position: absolute;
      left: 0;
   }

   /* 色字指定（それぞれ別々のPOPカラーに、以前の色を維持） */
   .cta-list li:nth-child(1) { color: #ff3366; font-weight: 900; } /* ピンク */
   .cta-list li:nth-child(2) { color: #00d2ff; font-weight: 900; } /* シアン */
   .cta-list li:nth-child(3) { color: #ff9900; font-weight: 900; } /* オレンジ */
   .cta-list li:nth-child(4) { color: #9d00ff; font-weight: 900; } /* パープル */