:root {
  --primary-color: #FEF751;
  --text-color: #333333;
  --heading-color: #000000;
  --bg-color: #FFFFFF;
  --bg-gray: #F9F9F9;
  --bg-black: #111111;
  --white: #FFFFFF;
  --font-main: 'Inter', 'Noto Sans JP', sans-serif;
  --container-width: 1200px;
  --header-height: 80px;
  --blue-dots-color: #BCE2F8;
  /* Light blue for dots */
  --blue-text-color: #00A0E9;
  /* Blue for categories/links */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  color: var(--text-color);
  line-height: 1.6;
  background-color: var(--bg-color);
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

a:hover {
  opacity: 0.7;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}

.logo img {
  height: 80px;
  width: auto;
}

.nav-list {
  display: flex;
  gap: 30px;
  align-items: center;
}

.nav-list a {
  font-size: 14px;
  font-weight: 700;
  color: var(--heading-color);
  text-transform: uppercase;
}

.btn-contact {
  background-color: var(--primary-color);
  padding: 10px 20px;
  border-radius: 4px;
  color: var(--heading-color) !important;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
}

.mobile-menu-btn span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--heading-color);
  transition: 0.3s;
}

/* --- メインビジュアルセクション --- */
.hero-header {
  width: 100%;
  background-color: #E3D949;
  /*background-image: url('../img/image_5.png');*/
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  height: clamp(400px, 45vw, 650px);
  margin-top: var(--header-height);
  padding-top: 0;

  @media (max-width: 768px) {
    background-size: cover;
    height: auto;
    padding-top: 75%;
  }
}

/* --- エントリーボタンセクション --- */
.entry-section {
  background-color: #fff100;
  /* GPAの鮮やかなイエロー */
  padding: 30px 10px 50px;
  text-align: center;
}

.entry-buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ▼▼▼ ボタンのデザイン修正箇所（ここが決定版です） ▼▼▼ */
.entry-button {
  display: block;
  position: relative;
  /* 影（擬似要素）の基準点 */
  width: 220px;
  height: 220px;
  padding: 0;
  /* 余白なし */
  background-color: transparent;
  /* 背景透明 */
  text-decoration: none;
  /* 親要素には影も角丸も設定しません */
}

/* 【重要】影専用のレイヤーを画像の背後に作る */
.entry-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 95%;
  height: 95%;
  border-radius: 50%;
  /* 正円 */
  background-color: transparent;
  /* それ自体は透明 */
  z-index: -1;
  /* 画像の後ろに配置 */

  /* 【決定打】ぼかしを0pxにした、クッキリと硬いる影 */
  /* 横方向6px, 縦方向6px, ぼかし0px, 色は少し濃い黒 */
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.4);

  transition: all 0.2s ease-in-out;
  /* キビキビした動きに */
}

.entry-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* 画像を丸く切り抜く */
  display: block;
  /* 下の隙間排除 */
  border: none;
  /* ボーダーなし */
  position: relative;
  z-index: 1;
  /* 影より前に表示 */
}

/* ホバー時の動き */
/* 画像と影が連動して動くように設定 */
.entry-button:hover img {
  transform: translateY(-4px) translateX(-2px);
  /* 少し左上に浮く感じ */
  transition: all 0.2s ease-in-out;
}

.entry-button:hover::before {
  /* 影は位置をキープしつつ、少し濃く、少し遠くへ */
  transform: translateY(-4px) translateX(-2px);
  box-shadow: 9px 9px 0px rgba(0, 0, 0, 0.5);
}

/* ▲▲▲ 修正箇所ここまで ▲▲▲ */


/* --- レスポンシブ調整 --- */
@media (max-width: 768px) {
  .entry-buttons-container {
    gap: 20px;
    max-width: 600px;
  }

  .entry-button {
    width: calc(50% - 20px);
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  .entry-section {
    padding: 20px 10px 40px;
  }

  .entry-buttons-container {
    gap: 15px;
  }

  .entry-button {
    width: calc(50% - 15px);
    max-width: 160px;
  }
}

/* Hero */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--primary-color);
  padding-top: var(--header-height);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: #fff;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-title {
  font-size: 80px;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 20px;
  color: var(--heading-color);
}

.hero-subtitle {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 40px;
}

/* Sections */
.section {
  padding: 100px 0;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 60px;
  text-align: center;
  position: relative;
  padding-bottom: 20px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--primary-color);
}

.bg-gray {
  background-color: var(--bg-gray);
}

.bg-black {
  background-color: var(--bg-black);
  color: var(--white);
}

.text-white {
  color: var(--white);
}

.text-yellow {
  color: var(--primary-color);
}

/* Latest News Section (Blue Dots) */
.latest-news-section {
  background-color: #fff;
  background-image: url('../img/bg03.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

/* Add a white overlay to fade the dots towards the center/content if needed, 
   or just keep the pattern. The image shows dots everywhere but content is readable.
   Let's add a subtle white gradient overlay to ensure text readability if needed,
   but the image shows clear white cards/backgrounds for items? 
   Actually, the image shows the dots are the background, and the news items seem to be floating or have white backgrounds?
   Looking closely at the image: The items have white backgrounds (cards) or are just text on the dots?
   Wait, the image shows the items have a white background (card style) with shadow?
   No, the first item has a white card. The others seem to have white backgrounds too.
   Let's make them white cards with a subtle shadow to stand out against the dots.
*/

.latest-news-section::before {
  /* Optional: White fade at the top/bottom if desired */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 10%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0.8) 100%);
  pointer-events: none;
  z-index: 0;
}

.latest-news-section .container {
  position: relative;
  z-index: 1;
}

.latest-news-header {
  text-align: center;
  margin-bottom: 60px;
}

.latest-news-subtitle {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #999;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.latest-news-title {
  font-size: 32px;
  font-weight: 700;
  color: #333;
}

.latest-news-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 900px;
  margin: 0 auto 50px;
}

.latest-news-item {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  /* Minimal radius */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  /* Subtle shadow */
  display: flex;
  gap: 30px;
  align-items: flex-start;
  transition: transform 0.3s;
}

.latest-news-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.latest-news-image {
  width: 240px;
  flex-shrink: 0;
}

.placeholder-image {
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-weight: 700;
  border-radius: 2px;
}

.latest-news-content {
  flex: 1;
}

.latest-news-meta {
  margin-bottom: 10px;
}

.latest-news-cat {
  color: var(--blue-text-color);
  font-size: 12px;
  font-weight: 700;
}

.latest-news-heading {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
}

.latest-news-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.btn-outline-blue {
  border: 1px solid var(--blue-text-color);
  color: var(--blue-text-color);
  background: #fff;
  padding: 12px 40px;
  font-size: 14px;
}

.btn-outline-blue:hover {
  background: var(--blue-text-color);
  color: #fff;
}


/* Grid Layout */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.card {
  background: var(--white);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.card-image {
  width: 100%;
  height: 200px;
  background-color: #eee;
  margin-bottom: 20px;
  border-radius: 4px;
}

.placeholder-yellow {
  background-color: var(--primary-color);
  opacity: 0.8;
}

.placeholder-gray {
  background-color: #ddd;
}

.card-title {
  font-size: 20px;
  margin-bottom: 10px;
}

/* List Layout */
.list-layout {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 800px;
  margin: 0 auto;
}

.list-item {
  background: var(--white);
  padding: 30px;
  border-left: 5px solid var(--primary-color);
}

.list-item-title {
  font-size: 20px;
  margin-bottom: 10px;
}

/* News (Original Section - maybe keep or remove? User asked to ADD, not replace. 
   But having two news sections is weird. 
   The request said "NEWSセクションを追加してください" (Add News Section).
   And "GPAの活動の上とheroセクションの間に入れて" (Insert between Hero and Activities).
   The original "NEWS" section was further down.
   I will keep the original one for now as "NEWS" (maybe rename to "Updates" or just keep as is) 
   unless instructed to remove. The user might want this new one to be the *main* news.
   Actually, usually "Latest News" replaces the old news. 
   But I'll stick to "Add" literally.
*/
.news-list {
  max-width: 800px;
  margin: 0 auto;
}

.news-item {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.news-date {
  font-weight: 700;
  margin-right: 20px;
  min-width: 100px;
}

.news-category {
  background-color: var(--primary-color);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 2px;
  margin-right: 20px;
  font-weight: 700;
}

.news-link {
  flex: 1;
}

/* Activities Section */
.activities-section {
  grid-column: full-start / full-end;
  padding: 4rem 0;
  margin-bottom: 4rem;
  background-color: #fff;
}

.activities-header {
  text-align: center;
  margin-bottom: 3rem;
}

.activities-subtitle {
  font-size: 0.9rem;
  color: #999;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.activities-title {
  font-family: "M PLUS 1p", sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: #333;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding: 0 1rem;
}

.activity-card {
  display: flex;
  align-items: flex-start;
  background: #fff;
  padding: 2rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #eee;
}

.activity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.activity-card-image {
  flex: 0 0 120px;
  margin-right: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.activity-card-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

.activity-card-content {
  flex: 1;
}

.activity-card-title {
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
  line-height: 1.4;
  color: #333;
}

.activity-card-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #666;
}

.activity-card-text a.text-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: bold;
}

.activity-card-text a.text-link:hover {
  text-decoration: underline;
}

.activity-card-text a.more-link {
  color: var(--color-primary);
  margin-left: 0.5em;
  font-size: 0.9em;
}

/* Responsive: 1 column for Mobile/Tablet Portrait */
@media only screen and (max-width: 56.25em) {
  .activities-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .activities-title {
    font-size: 1.8rem;
  }

  .activity-card {
    padding: 1.5rem;
  }
}

/* For very small screens */
@media only screen and (max-width: 37.5em) {
  .activity-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .activity-card-image {
    margin-right: 0;
    margin-bottom: 1rem;
    flex: 0 0 auto;
    width: 150px;
  }

  .activity-card-content {
    width: 100%;
  }
}

/* YouTube */
.video-wrapper {
  max-width: 800px;
  margin: 0 auto 40px;
  aspect-ratio: 16 / 9;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-placeholder {
  color: #fff;
  font-size: 20px;
}

.center-btn {
  text-align: center;
}

.btn {
  display: inline-block;
  padding: 15px 40px;
  font-weight: 700;
  border-radius: 50px;
  transition: 0.3s;
}

.btn-yellow {
  background-color: var(--primary-color);
  color: var(--heading-color);
}

.btn-black {
  background-color: var(--heading-color);
  color: var(--white);
  border: none;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

/* Contact */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Footer */
.footer {
  background-color: #f5f5f5;
  padding: 20px 0;
  text-align: center;
  font-size: 12px;
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .header-container {
    padding: 0 20px;
  }

  .mobile-menu-btn {
    display: flex;
    z-index: 1001;
  }

  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
  }

  .nav.active {
    right: 0;
  }

  .nav-list {
    flex-direction: column;
    text-align: center;
  }

  .hero-title {
    font-size: 48px;
  }

  .hero::after {
    width: 100%;
    height: 50%;
    top: auto;
    bottom: 0;
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
  }

  .news-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Latest News Responsive */
  .latest-news-item {
    flex-direction: column;
    gap: 15px;
  }

  .latest-news-image {
    width: 100%;
  }
}

/* =========================================
   New Sections Styles
   ========================================= */

/* Slider Section (Carousel) */
.slider-section {
  width: 100%;
  background-color: #000;
  margin-top: 0;
  padding-top: 0;
  /* Allow height to be determined by carousel */
}

.carousel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 550px;
  /* Reduced height for PC */
  overflow: hidden;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.carousel:hover .slide:after,
.carousel:hover .counter,
.carousel:hover .slide:before {
  opacity: 1;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
  text-align: center;
  transition: opacity 0.4s;
  opacity: 0;
  /* Hidden by default */
  z-index: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide:before {
  content: attr(annot);
  display: block;
  position: absolute;
  left: 20px;
  bottom: 20px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 24px;
  /* Increased for visibility */
  font-weight: 700;
  z-index: 12;
  opacity: 0;
  transition: opacity 0.3s;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.slide:after {
  content: attr(slide);
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: opacity 0.3s;
  width: 100%;
  height: 80px;
  opacity: 0;
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  text-align: right;
  /* Changed to right for better layout */
  padding-right: 20px;
  line-height: 101px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 1px black;
  box-sizing: border-box;
}

.counter {
  position: absolute;
  bottom: 20px;
  right: 1px;
  height: 20px;
  width: 60px;
  z-index: 2;
  text-align: center;
  color: #fff;
  line-height: 21px;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.3s;
}

.faux-ui-facia {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 9;
  margin: 0;
}

/* Logic: Checked input reveals its adjacent slide */
.faux-ui-facia:checked {
  z-index: 8;
  /* Move behind */
}

.faux-ui-facia:checked+.slide {
  opacity: 1;
  z-index: 10;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .carousel {
    height: 300px;
    /* Smaller height for mobile */
  }

  .slide:before {
    font-size: 18px;
  }
}

/* Section Title Small */
.section-title-sm {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  background-color: #f0f0f0;
  /* Light gray background bar */
  padding: 10px;
  border-radius: 4px;
}

/* Sponsors Common */
.sponsor-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #333;
  font-weight: 700;
  border: 1px solid #eee;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  transition: 0.3s;
}

.sponsor-logo-placeholder:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

.sponsor-logo-placeholder img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Special Sponsors */
.special-sponsors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.sponsor-card-large {
  height: 200px;
}

/* Sponsors */
.sponsors-grid-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 0 auto 30px;
}

.sponsor-card-medium {
  height: 150px;
}

.sponsors-grid-main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  max-width: 1000px;
  margin: 0 auto;
}

.sponsor-card-small {
  height: 80px;
}

/* Organizer */
.organizer-logo {
  max-width: 300px;
  height: 100px;
  margin: 0 auto;
}

.organizer-placeholder {
  color: #003366;
  /* Dark blue text */
  font-size: 18px;
}

/* Mutual Links */
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.link-item {
  height: 60px;
}

.link-item .sponsor-logo-placeholder {
  padding: 0;
  border: none;
}

.link-placeholder {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  transition: 0.3s;
}

.link-placeholder:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* Footer Updates */
.footer {
  background-color: #111;
  color: #fff;
  padding: 40px 0;
  position: relative;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.footer-sns-title {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.8;
}

.footer-sns-links {
  display: flex;
  gap: 20px;
}

.sns-icon {
  color: #fff;
  font-size: 14px;
  opacity: 0.7;
}

.sns-icon:hover {
  opacity: 1;
  color: var(--primary-color);
}

.scroll-top {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: #333;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.scroll-top:hover {
  background-color: var(--primary-color);
}

.copyright {
  opacity: 0.5;
  font-size: 10px;
}

/* Responsive Adjustments for New Sections */
@media (max-width: 768px) {
  .slider-title {
    font-size: 32px;
  }

  .special-sponsors-grid,
  .sponsors-grid-top,
  .sponsors-grid-main,
  .links-grid {
    grid-template-columns: repeat(2, 1fr);
    /* Force 2 columns on mobile */
  }

  .sponsor-card-large {
    height: 100px;
  }

  .sponsor-card-medium {
    height: 80px;
  }

  .sponsor-card-small {
    height: 60px;
  }
}

/* =========================================
   Mai Tsuruno Section
   ========================================= */

.mai-section {
  padding: 60px 0;
  background-color: #fff;
}

/* The Banner Area (Pink Box) */
.mai-banner {
  background-color: #ff00cc;
  /* Vivid Pink */
  color: #fff;
  padding: 40px;
  position: relative;
  overflow: visible;
  /* Allow image to stick out */
  margin-bottom: 30px;
}

/* Character Image via Pseudo-element to allow overflow */
.mai-banner::after {
  content: '';
  position: absolute;
  bottom: -40px;
  /* Stick out bottom */
  right: -50px;
  /* Stick out right slightly if needed, or 0 */
  width: 60%;
  /* Adjust size as needed, maybe larger */
  height: 140%;
  /* Taller than container to show more */
  background-image: url('../img/tsuruno_mai.png');
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  z-index: 1;
  /* Behind content but above background color? No, we want it behind content. Content is z-index 2. */
  pointer-events: none;
  /* Let clicks pass through if needed */
}

/* Responsive adjustment for the image */
@media (max-width: 768px) {
  .mai-banner::after {
    width: 90%;
    right: 5%;
    bottom: -20px;
    height: 100%;
    /* Reset height constraint or adjust */
    background-position: bottom center;
  }
}

.mai-content {
  display: flex;
  justify-content: flex-start;
  /* Align content to the left to avoid overlapping with bg image on right */
  align-items: center;
  gap: 60px;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  /* Ensure text is above image */
}

@media (max-width: 768px) {
  .mai-banner {
    background-position: center bottom;
    background-size: 80%;
    /* Adjust for mobile */
    padding-bottom: 300px;
    /* Keep space for mobile if needed, or adjust */
    margin-bottom: 50px;
    /* Extra margin for overflowing image */
  }

  .mai-content {
    flex-direction: column;
    gap: 30px;
    text-align: center;
    justify-content: center;
  }
}

/* Typography Part (Left) */
.mai-typography {
  position: relative;
  z-index: 2;
  /* Ensure it is above the ::after image */
}

.mai-gpa-bg-dots {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 200px;
  height: 100px;
  background-image: radial-gradient(#fff 20%, transparent 20%);
  background-position: 0 0;
  background-size: 10px 10px;
  opacity: 0.3;
  z-index: -1;
}

.mai-gpa-big {
  font-size: 100px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-family: 'Inter', sans-serif;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.mai-tagline-box {
  background-color: #fff;
  color: #ff00cc;
  padding: 10px 20px;
  display: inline-block;
  margin-top: 10px;
  text-align: center;
}

.mai-tagline-box p {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.2;
}

.mai-tagline-box span {
  font-size: 10px;
  display: block;
  letter-spacing: 0.05em;
}

/* Character Part (Right) */
.mai-character-area {
  display: flex;
  align-items: center;
  gap: 20px;
}

@media (max-width: 768px) {
  .mai-character-area {
    flex-direction: column;
  }
}

.mai-name-box {
  text-align: left;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  /* Add shadow for readability over image if needed */
}

@media (max-width: 768px) {
  .mai-name-box {
    text-align: center;
  }
}

.mai-role {
  font-size: 18px;
  display: block;
  margin-bottom: 5px;
}

.mai-name {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.1;
  font-family: serif;
}

.mai-name-kana {
  font-size: 16px;
  display: block;
  letter-spacing: 0.2em;
}

.mai-char-img-placeholder {
  display: none;
  /* Hide placeholder as image is now in background */
}

/* Action Text */
.mai-action-text {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #666;
}

/* Buttons Area */
.mai-btns-area {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.mai-btn-link {
  text-decoration: none;
  transition: opacity 0.3s;
}

.mai-btn-link:hover {
  opacity: 0.8;
}

.mai-btn-placeholder {
  width: 300px;
  padding: 15px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-weight: 700;
  gap: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mai-btn-youtube-style {
  background-color: #c4302b;
  border-left: 5px solid #fff;
}

.mai-btn-scratch-style {
  background-color: #f7a518;
}

.mai-btn-placeholder i {
  font-size: 24px;
}

/* Programming World Content */
.mai-programming-world {
  margin-top: 60px;
  text-align: center;
}

.mai-pw-header {
  margin-bottom: 40px;
}

.mai-pw-title {
  font-size: 28px;
  font-weight: 700;
  color: #00A0E9;
  /* Cyan/Light Blue */
  margin-bottom: 20px;
}

.mai-pw-desc-box {
  background-color: #f9f9f9;
  /* Slight gray bg for box effect? Or just transparent */
  display: inline-block;
  padding: 15px 30px;
  border-radius: 4px;
}

.mai-pw-desc-box p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* Circles */
.mai-pw-circles {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.mai-pw-circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00A0E9 0%, #0077b5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 20px rgba(0, 160, 233, 0.3);
  transition: transform 0.3s;
}

.mai-pw-circle:hover {
  transform: translateY(-10px);
}

.mai-pw-circle p {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

/* Footer Link Area */
.mai-pw-footer {
  margin-top: 40px;
}

.mai-pw-footer-title {
  font-size: 24px;
  font-weight: 700;
  color: #00A0E9;
  margin-bottom: 15px;
  text-decoration: underline;
  /* It looks like a link in the image maybe? */
  cursor: pointer;
}

.mai-pw-footer-text {
  font-size: 14px;
  color: #666;
}

@media (max-width: 768px) {
  .mai-pw-circles {
    flex-direction: column;
    align-items: center;
  }
}

/* =========================================
   Tooltip Styles for Circles
   ========================================= */
.mai-pw-circle {
  position: relative;
  /* Ensure positioning context */
}

.tooltip-content {
  position: absolute;
  top: 110%;
  /* Position below the circle */
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 280px;
  background-color: #fff;
  color: #333;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 100;
  pointer-events: none;
  text-align: left;
}

.mai-pw-circle:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.tooltip-content::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

.tooltip-content strong {
  display: block;
  font-size: 18px;
  color: #00A0E9;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #eee;
}

.tooltip-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0;
  font-weight: normal;
  text-shadow: none;
}

/* Archive Section */
.archives-section {
  background-color: #fff;
  padding: 80px 0;
}

.archives-header {
  text-align: center;
  margin-bottom: 50px;
}

.archives-subtitle {
  display: block;
  font-size: 14px;
  color: #666;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.archives-title {
  font-size: 40px;
  font-weight: 800;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.archives-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: #fff;
}

.archive-card {
  position: relative;
  background: #fff;
  /* border: 1px solid #eee; Removed border to match clean look if preferred, but keeping minimal */
}

.archive-image {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.archive-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.archive-card:hover .archive-image img {
  transform: scale(1.05);
}

.archive-caption {
  padding: 15px 0;
  /* Changed padding to be top/bottom only to align with image width if no border */
  font-size: 15px;
  font-weight: 700;
  color: #000;
  line-height: 1.4;
}

/* Responsive for Archives */
@media (max-width: 900px) {
  .archives-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .archives-grid {
    grid-template-columns: 1fr;
  }

  .archives-title {
    font-size: 28px;
  }
}

/* Video Learning Section */
.video-learning-section {
  padding: 80px 0;
  background-color: #fff;
}

.video-learning-header {
  text-align: center;
  margin-bottom: 50px;
}

/* Blue Title Speech Bubble */
.speech-bubble-title {
  position: relative;
  display: block;
  /* Full width */
  width: 100%;
  background: #89CFF0;
  /* Sky blue matching image */
  color: #fff;
  padding: 10px 0;
  font-size: 20px;
  font-weight: 700;
  border-radius: 0;
  margin: 0 auto;
}

.speech-bubble-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 15px 15px 0;
  border-color: #89CFF0 transparent transparent transparent;
}

.video-learning-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 30px;
  /* Space for the top triangle */
}

/* Pink Card Design */
.video-learning-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 2px solid #FF66B2;
  /* Pink border around entire card */
  border-radius: 6px;
  overflow: visible;
  /* Needed for the triangle sticking out if we did it that way, but here it's inside */
  /* Actually, if triangle sticks out of header into body, overflow: visible isn't strictly needed if body is part of card, but good for safety */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.video-learning-card:hover {
  transform: translateY(-5px);
}

.video-learning-card-header {
  position: relative;
  background-color: #FF66B2;
  /* Pink background */
  color: #fff;
  padding: 5px;
  /* 5px padding */
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  /* Above body */
}

/* Pink Triangle for Card Header */
.video-learning-card-header::after {
  content: '';
  position: absolute;
  bottom: -10px;
  /* Overlaps into the white body */
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 10px 10px 0;
  /* Triangle size */
  border-color: #FF66B2 transparent transparent transparent;
  z-index: 2;
}

.video-learning-card-body {
  padding: 30px 20px 20px 20px;
  /* Top padding increased to clear triangle */
  color: #333;
  font-size: 14px;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  z-index: 1;
}

.video-learning-card-body p {
  margin-bottom: 20px;
}

.video-learning-card-body p:last-child {
  margin-bottom: 0;
}

.video-learning-image-embed {
  width: 100%;
  margin-top: auto;
  border: 1px solid #eee;
}

.video-learning-image-embed img {
  width: 100%;
  height: auto;
  display: block;
}

/* Vol.10 Specific Buttons */
.vol10-btn-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: auto;
  width: 100%;
}

.vol10-main-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  padding: 15px;
  text-align: center;
  color: #2ecc71;
  /* Green text */
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  border-left: 8px solid #2ecc71;
  /* Green bar */
  transition: opacity 0.3s;
  width: 100%;
}

.vol10-main-btn:hover {
  opacity: 0.8;
  color: #2ecc71;
}

.vol10-sub-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.vol10-sub-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  padding: 20px 5px;
  text-align: center;
  color: #00A0E9;
  /* Blue text */
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.3s;
}

.vol10-sub-btn:hover {
  background: #ddd;
  color: #00A0E9;
}

@media (max-width: 900px) {
  .video-learning-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .video-learning-grid {
    grid-template-columns: 1fr;
  }
}