@charset "UTF-8";

/* ==========================================
   🎨 1. 全体共通設定
   ========================================== */
html {
  scroll-behavior: smooth; 
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  background-color: #fffdf9; 
  color: #4a423c;            
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

/* ==========================================
   🔲 2. メニュー（ドロップダウンナビ）
   ========================================== */
.global-nav {
  background-color: #f5ede4; 
  border-bottom: 1px solid #e8ded2;
  position: relative;
  width: 100%;
  z-index: 9999;
}

.nav-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 15px 20px;
  cursor: pointer;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: #6e5d53;
  height: 3px;
  width: 25px;
  border-radius: 2px;
  position: relative;
  transition: all 0.3s ease;
}

.nav-toggle-label span::before { 
  content: ''; position: absolute; 
  bottom: 8px; left: 0; 
}
.nav-toggle-label span::after { 
  content: ''; position: absolute; 
  top: 8px; left: 0; 
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none; 
  flex-direction: column; 
  background-color: #f5ede4;
  width: 100%;
}

.nav-menu > li {
  position: relative;
  border-top: 1px solid #e8ded2;
}

.nav-menu a {
  display: block;
  padding: 14px 20px;
  color: #6e5d53; 
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

.nav-menu a:hover {
  background-color: #fae4df; 
  color: #b56b5f;
}

.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #faf6f0; 
}
.dropdown-menu li { 
  border-top: 1px solid #ede4da; 
}
.dropdown-menu a { 
  padding: 12px 12px 12px 35px; 
  font-size: 13px; 
  font-weight: normal; 
}

.nav-toggle:checked ~ .nav-menu { 
  display: flex; 
}
.nav-toggle:checked ~ .nav-toggle-label span { 
  background: transparent; 
}
.nav-toggle:checked ~ .nav-toggle-label span::before { 
  transform: rotate(45deg); top: 0; 
}
.nav-toggle:checked ~ .nav-toggle-label span::after { 
  transform: rotate(-45deg); top: 0; 
}

/* ==========================================
   🏡 3. メインコンテンツエリア（器）
   ========================================== */
.school-container {
  max-width: 1000px;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(180, 160, 140, 0.08); 
  margin: 0 auto 50px auto !important; 
}

.school-name {
  font-size: 22px;
  color: #8c6b53; 
  margin: 0 0 5px 0;
}

.catch-copy {
  font-size: 15px;
  color: #9c8a7c; 
  margin: 0 0 25px 0;
  font-weight: 500;
}

.school-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.left-column, .right-column {
  width: 100%;
}

/* ==========================================
   📷 4. 左側：ビジュアル＆複数紹介エリア
   ========================================== */
/* ==================================================
   👑 【最終解決】メイン画像を右側の表と完璧なバランスにする
   ================================================== */
.main-image {
  width: 100% !important;
  height: 280px !important; /* パソコン画面で一番美しく見える上品な高さ */
  margin: 0 auto 25px auto !important;
  /* 💡 背景色を「真っ白（#ffffff）」に変更することで、まわりの背景と100%完全に溶け込ませます！ */
  background-color: #ffffff !important; 
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.main-image img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  /* 💡 containにすることで、天地左右どこも1ミリも切り取られません */
  object-fit: contain !important; 
}

/* 📱 スマートフォン（画面幅767px以下）の時のためのサイズ調整 */
@media (max-width: 767px) {
  .main-image {
    height: 200px !important;
    background-color: #ffffff !important;
  }
}

.intro-container {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 20px; 
}

.intro-box {
  background-color: #faf5ef; 
  padding: 15px 20px;
  border-radius: 8px;
  border-left: 4px solid #d4a373; 
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.intro-box-content {
  flex: 1;
}

.intro-sub-image {
  width: 180px !important;
  max-width: 180px !important;
  /* 💡 高さを固定(120px)から「自動調整」に変更し、枠自体の潰れを防ぎます */
  height: auto !important; 
  background-color: transparent !important; 
  border-radius: 6px !important;
  overflow: hidden !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.intro-sub-image img {
  display: block !important;
  width: 100% !important;
  /* 💡 高さを自動にし、強制変形(fill)から「縦横比を維持(contain)」に変更します */
  height: auto !important;
  object-fit: contain !important; 
  object-position: center !important;
}




.section-title {
  font-size: 16px;
  color: #8c6b53; 
  margin: 0 0 10px 0;
}

.intro-text {
  line-height: 1.6;
  font-size: 14px;
  margin: 0;
}

/* ==========================================
   📊 5. 右側：基本情報・データエリア
   ========================================== */
.btn {
  display: block;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 15px;
  transition: opacity 0.2s;
}
.btn:hover { 
  opacity: 0.8; 
}

.btn-hp {
  background-color: #eadece;
  color: #5c4a3c;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
  font-size: 14px;
}

.info-table th, .info-table td {
  padding: 12px 5px;
  border-bottom: 1px solid #ede4da;
  text-align: left;
  vertical-align: top; 
}

.info-table th {
  width: 35%;
  color: #8c7665;
  font-weight: bold;
}

.dept-list, .scholarship-list, .reduction-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dept-list li, .scholarship-list li, .reduction-list li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.dept-list li:last-child, .scholarship-list li:last-child, .reduction-list li:last-child {
  margin-bottom: 0;
}

.accordion-item {
  border: 1px solid #ede4da;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 14px;
  background-color: #fff;
  overflow: hidden;
}

.accordion-title {
  padding: 12px 10px;
  font-weight: bold;
  cursor: pointer;
  background-color: #faf6f0; 
  list-style: none;          
  position: relative;
  user-select: none;
}
.accordion-title::-webkit-details-marker { 
  display: none; 
}

.accordion-title::after {
  content: '＋';
  position: absolute;
  right: 15px;
  color: #8c7665;
}
.accordion-item[open] .accordion-title::after { 
  content: 'ー'; 
}

.accordion-content {
  padding: 15px;
  border-top: 1px solid #ede4da;
  background-color: #ffffff;
}

.accordion-content ul {
  margin: 0;
  padding-left: 20px; 
}

.accordion-content li {
  margin-bottom: 6px;
  line-height: 1.5;
}



.request-box {
  margin-top: 20px;
  padding: 18px 15px;
  background-color: #fdf2ef; 
  border-radius: 8px;
  border: 1px dashed #edd0ca;
}

.request-title {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #b56b5f; 
}

.request-tel {
  font-weight: bold;
  margin: 0 0 12px 0;
  font-size: 15px;
  color: #4a423c;
}

.btn-mail {
  background-color: #e3a89f;
  color: #ffffff;
  margin-bottom: 0;
}

.tel-link {
  color: #4a423c;        
  text-decoration: none; 
  pointer-events: none;  
  cursor: default;       
}

.tel-notes {
  font-size: 12px;
  font-weight: normal;
  color: #8c7665;
  display: inline-block;
  margin-top: 4px;
}



/* ==========================================
   🔄 6. 【最下部】ボタンの完全センター寄せ（学校詳細用）
   ========================================== */
.page-back-nav {
  display: flex !important;
  flex-direction: column !important; 
  align-items: center !important;    
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  float: none !important;            
  clear: both !important;
  margin: 30px auto 10px auto !important;
}

.btn-back {
  font-size: 14px !important;
  width: 200px !important;            
  box-sizing: border-box !important;
  display: block !important;
  text-align: center !important;
  margin: 0 auto !important; 
  padding: 10px 24px !important;       
  border: 1px solid #e8ded2 !important;
  border-radius: 6px !important;
}

.btn-to-area {
  background-color: #faf6f0 !important;
  color: #6e5d53 !important;
}
.btn-to-area:hover {
  background-color: #eadece !important;
}

.btn-to-prev {
  background-color: #ffffff !important;
  color: #8c7665 !important;
}
.btn-to-prev:hover {
  background-color: #faf6f0 !important;
}

/* ==========================================
   👣 7. フッター（3カラム構成）
   ========================================== */
.site-footer {
  background-color: #f5ede4; 
  color: #6e5d53;
  padding: 40px 20px 20px 20px; 
  border-top: 1px solid #e8ded2;
  clear: both; 
}

.footer-container {
  max-width: 1000px;
  margin: 0 auto;
}

.footer-flex-links {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: left; 
  margin-bottom: 30px;
}

.footer-block-title {
  font-size: 15px;
  color: #8c6b53;
  margin: 0 0 12px 0;
  border-bottom: 1px solid #e8ded2;
  padding-bottom: 6px;
  font-weight: bold;
}

.footer-organizer {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 8px 0;
  display: block;
}

.footer-info {
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  color: #6e5d53;
}

.footer-sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-sitemap-list li {
  margin-bottom: 8px;
}
.footer-sitemap-list a {
  color: #6e5d53;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}
.footer-sitemap-list a:hover {
  color: #b56b5f;
  text-decoration: underline;
}

.footer-copyright {
  font-size: 11px;
  color: #9c8a7c;
  margin: 0;
  text-align: center;
  border-top: 1px solid #e8ded2;
  padding-top: 15px;
}

/* 固定表示の上へ戻るボタン */
.page-top-btn {
  position: fixed;
  bottom: 25px;               
  right: 25px;                
  width: 48px;
  height: 48px;
  background-color: #8c6b53;  
  color: #ffffff;             
  text-align: center;
  line-height: 48px;          
  border-radius: 50%;         
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  z-index: 9999;              
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(110, 93, 83, 0.3); 
}
.page-top-btn:hover {
  background-color: #b56b5f;  
  transform: translateY(-3px); 
}

/* ==================================================
   📢 11. トップ画面専用：お知らせエリア（共通・スマホ）
   ================================================== */
.news-section {
  background-color: #ffffff;
  border: 1px solid #ede4da;
  border-radius: 8px;
  padding: 20px;
  margin-top: 30px;
  box-shadow: 0 2px 8px rgba(180, 160, 140, 0.04);
}

.news-list {
  display: flex;
  flex-direction: column;
}

.news-item {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px dashed #ede4da;
}
.news-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.news-item:first-child {
padding-top: 5px;
}
.news-date {
font-size: 13px;
color: #9c8a7c;
font-family: Arial, sans-serif;
margin-bottom: 5px;
}
.news-badge {
background-color: #faf6f0;
color: #6e5d53;
border: 1px solid #ede4da;
font-size: 11px;
font-weight: bold;
padding: 2px 8px;
border-radius: 4px;
margin-bottom: 8px;
white-space: nowrap;
}
.news-badge.badge-important {
background-color: #fdf2ef;
color: #b56b5f;
border-color: #edd0ca;
}
.news-badge.badge-school {
background-color: #f5ede4;
color: #8c6b53;
border-color: #e8ded2;
}
.news-title {
font-size: 14px;
color: #4a423c;
text-decoration: none;
line-height: 1.5;
font-weight: 500;
transition: color 0.2s;
}
.news-title:hover {
color: #b56b5f;
text-decoration: underline;
}
/* ==================================================
   🖼️ トップ画面専用：メインビジュアル（完成版）
   ================================================== */
.top-hero {
  position: relative !important;
  width: 100% !important;
  height: 250px !important; /* 📱 スマホ時のデフォルト高さ */
  margin-bottom: 30px !important;
  overflow: hidden !important;
  background-color: #fcf8f2 !important;
}

.hero-bg-slider {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* HTML内の <img> タグに対する指示 */
.hero-bg-slider .slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0;
  /* 💡 infinite（無限ループ）を消して「1回だけ（1）」にし、
     最後に「forwards」をつけることでアニメーション終了時の状態をそのままキープします */
  animation: bgFadeOnce 10s 1 forwards;
}

/* 2枚目の画像は5秒遅らせてスタート */
.hero-bg-slider .slide2 {
  animation-delay: 5s;
}

/* 🎬 1回だけ切り替わって、1枚目に戻って止まるアニメーション */
@keyframes bgFadeOnce {
  0% { opacity: 0; }
  /* 【1枚目】最初の5世秒間を表示 */
  1% { opacity: 1; }
  45% { opacity: 1; }
  /* 【2枚目へ交代】ふわっと切り替え */
  50% { opacity: 0; }
  
  /* 💡 2枚目が終わった（10秒目）あと、
     1枚目の画像（slide1）が「不透明度1（表示）」のまま画面に固定されます */
  100% { opacity: 1; }
}

/* ⚠️ 2枚目の画像（slide2）は、10秒目が終わったら完全に消えるように個別に指定を足します */
.hero-bg-slider .slide2 {
  animation: bgFadeOnceSlide2 10s 1 forwards;
  animation-delay: 5s;
}
@keyframes bgFadeOnceSlide2 {
  0% { opacity: 0; }
  10% { opacity: 1; } /* 5秒遅れなので、実質5秒〜10秒の間だけ表示 */
  45% { opacity: 1; }
  50% { opacity: 0; } /* 10秒目が来たらふわっと消える */
  100% { opacity: 0; } /* その後は消えたまま固定 */
}


/* 💻 パソコン画面（画面幅960px以上）用のサイズ拡張 */
@media (min-width: 960px) {
  .top-hero {
    height: 380px !important; /* 💻 パソコン時はダイナミックに高くする */
    margin-bottom: 40px !important;
  }
}



/* ==========================================
   💻 8. パソコン用の設定（画面幅960px以上）
   ========================================== */
@media (min-width: 960px) {
  body { padding: 0; }
  .nav-toggle-label { display: none; }
  .sp-only { display: none; }

  /* メニューを横並び */
  .nav-menu {
    display: flex !important;
    flex-direction: row;
    background-color: transparent;
  }
  .nav-menu > li { flex: 1; border-top: none; }
  .nav-menu a { text-align: center; padding: 16px 5px; font-size: 14px; }

  /* マウスホバーで下層メニュー表示 */
  .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 230px;
    z-index: 1000;
    background-color: #faf6f0;
    box-shadow: 0 4px 10px rgba(180, 160, 140, 0.15);
  }
  .has-dropdown:hover .dropdown-menu {
    display: block;
  }
  .dropdown-menu a {
    text-align: left;
    padding: 12px 15px;
    font-size: 13px;
  }

  /* 2カラム横並び設定 */
  .school-container {
    padding: 30px;
    margin-top: 30px;
  }
  .school-name {
    font-size: 26px;
  }
  
  /* 💡【重要】ここで左と右が綺麗に2カラムに分かれます */
  .school-content {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px;
  }
  .left-column {
    width: 58% !important; /* 左側カラムの幅をしっかり固定 */
    flex: none !important;
  }
  .right-column {
  width: 38% !important; 
  flex: none !important;
  margin-top: 25px !important; /* 💡「25px」にして、あと2ピクセルだけ下げます */
}

  .main-image {
    height: 260px;
  }
  .info-table th {
    width: 30%;
  }

  /* PC時の学校紹介（写真横並び） */
  .intro-box.has-sub-image {
    flex-direction: row;
    align-items: flex-start;
  }
  .intro-box.has-sub-image .intro-sub-image {
    width: 180px;
    height: 120px;
    flex-shrink: 0;
  }

  /* パソコン表示時のナビボタン横並び */
  .page-back-nav {
    flex-direction: row !important;
  }
  .btn-back {
    width: 180px !important;
    margin: 0 6px !important;
  }

  /* 💻【修正】トップ画面：パソコン用のヒーロー（!important をつけて古い指示を完全に上書きします） */
  .top-hero {
    height: 380px !important; 
    margin-bottom: 40px !important;
  }
  .hero-title {
    font-size: 38px;
  }

  /* 💻【修正】会場案内を2列（横並び）にする正しい設定（venue-grid のスペルミスを直しました） */
  .venue-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }
  .venue-card {
    width: calc(50% - 8px) !important;
  }

  /* 💻 パソコン時だけお知らせを横一行に並める */
  .news-item {
    flex-direction: row;
    align-items: center;
    padding: 14px 0;
  }
  .news-date {
    width: 100px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .news-badge {
    margin-bottom: 0;
    margin-right: 15px;
    flex-shrink: 0;
  }
   /* 💻 パソコン時だけお知らせを横一行に並べる（文字が長いときは自動改行する設定） */
.news-item {
  /* flex-start から baseline に変更します */
  align-items: baseline !important; 
}


  .news-title {
    flex: 1;
    white-space: normal !important;   /* 💡改行を許可して最後まで見せる */
    overflow: visible !important;     /* 💡隠さずに全部表示する */
    text-overflow: clip !important;   /* 💡「...」の三点リーダーを消す */
    line-height: 1.5;
  }


   /* 💻 パソコン時だけフッターを3列の横並びにする（トップ画面のサイトマップ用） */
  /* 💡 修正箇所：トップ用の「.footer-flex-links」だけに限定し、学校詳細の文字が左に引っ張られるのを防ぎます */
  .footer-flex-links {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 40px !important;
    text-align: left !important; /* トップのサイトマップのみ左揃え */
  }
  .footer-block {
    flex: 1 !important;
  }
} /* 💡 ここでパソコン用設定（@media）が一度終了します */



/* ==================================================
📱 9. スマートフォン実機のみの設定（画面幅767px以下）
================================================== */
@media (max-width: 767px) {
.sp-only { display: inline; }
/* スマホ時はメイン画像の高さをスッキリさせる */
.top-hero {
height: 200px;
}
.tel-link {
color: #b56b5f;
pointer-events: auto;
cursor: pointer;
text-decoration: underline;
}
.page-top-btn {
bottom: 20px;
right: 20px;
width: 42px;
height: 42px;
line-height: 42px;
}
}

/* ==================================================
   🚨 【最終解決】フッターの文字を完全センター寄せ
   ================================================== */
/* 💡 フッター内のすべての要素に対して、左揃えの命令を完全に打ち消して真ん中に寄せます */
footer.site-footer,
footer.site-footer *,
.site-footer .footer-container,
.site-footer .footer-container * {
  text-align: center !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 住所やTELの2行のまとまりを中央に配置する調整 */
.site-footer .footer-info {
  display: inline-block !important;
  text-align: center !important;
}


/* ==================================================
   🔄 トップ・一覧専用：エリア切り替えタブ（完成版）
   ================================================== */
.area-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 25px;
}

.tab-label {
  display: block;
  padding: 10px 24px;
  background-color: #faf6f0;
  color: #6e5d53;
  border: 1px solid #ede4da;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

/* 仕組み用の隠しラジオボタン */
.tab-input {
  display: none !important;
}

/* 🎯 ボタンが選択されたときの見た目 */
#tab-all:checked ~ .area-tabs label[for="tab-all"],
#tab-aomori:checked ~ .area-tabs label[for="tab-aomori"],
#tab-hirosaki:checked ~ .area-tabs label[for="tab-hirosaki"],
#tab-hachinohe:checked ~ .area-tabs label[for="tab-hachinohe"] {
  background-color: #b56b5f !important;
  color: #ffffff !important;
  border-color: #b56b5f !important;
}

/* 🔄 エリア表示・非表示の切り替え制御（!importantで強制適用してバグを解決します） */
.left-column .area-section {
  display: none !important; /* 初期状態では一旦すべて非表示にする */
}

/* ラジオボタンのチェック状態に合わせて、該当の箱だけを最優先で表示させる命令 */
#tab-all:checked ~ .school-content .left-column .area-section {
  display: block !important;
}
#tab-aomori:checked ~ .school-content .left-column #section-aomori {
  display: block !important;
}
#tab-hirosaki:checked ~ .school-content .left-column #section-hirosaki {
  display: block !important;
}
#tab-hachinohe:checked ~ .school-content .left-column #section-hachinohe {
  display: block !important;
}
#tab-shimokita:checked ~ .school-content .left-column #section-shimokita {
  display: block !important;
}


/* 🎯 8つのボタンが選択されたときの見た目 */
#tab-all:checked ~ .area-tabs label[for="tab-all"],
#tab-1:checked ~ .area-tabs label[for="tab-1"],
#tab-2:checked ~ .area-tabs label[for="tab-2"],
#tab-3:checked ~ .area-tabs label[for="tab-3"],
#tab-4:checked ~ .area-tabs label[for="tab-4"],
#tab-5:checked ~ .area-tabs label[for="tab-5"],
#tab-6:checked ~ .area-tabs label[for="tab-6"],
#tab-7:checked ~ .area-tabs label[for="tab-7"],
#tab-8:checked ~ .area-tabs label[for="tab-8"] {
  background-color: #b56b5f !important;
  color: #ffffff !important;
  border-color: #b56b5f !important;
}


/* ==================================================
   📱 資格別一覧：スマホ・PC別のボタン配置カスタマイズ（完全版）
   ================================================== */

/* 💻 1. パソコンやタブレットなどの広い画面での見栄え調整 */
@media (min-width: 768px) {
  .school-container .area-tabs {
    display: flex !important;
    flex-wrap: wrap !important; /* ボタンが溢れたら綺麗に2段目に折り返す */
    justify-content: center !important; /* 中央寄せ */
    gap: 10px !important;
    margin-bottom: 25px !important;
  }

  .school-container .tab-label {
    display: inline-block !important;
    width: auto !important; /* 文字の長さに合わせて自動で横幅を決める */
    padding: 10px 20px !important; /* 縦長にならないよう左右に心地よい余白 */
    font-size: 14px !important;
    border-radius: 20px !important; /* コロンと可愛い丸型カプセルボタン */
    text-align: center !important;
  }
}

/* 📱 2. スマートフォン（画面幅767px以下）の時だけの押しやすさ設定 */
@media (max-width: 767px) {
  .school-container .area-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 押しやすい綺麗な2列 */
    gap: 8px !important;
    padding: 0 5px !important;
  }

  .school-container .tab-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 4px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    border-radius: 8px !important;
    word-break: break-all !important;
  }
  
  /* 💡 全分野を消したことで、ここにあった tab-8 の特別な命令（grid-column）は綺麗に消去して大丈夫です！ */
}



/* ==================================================
   🗺️ マップ専用：8ジャンルの地図表示切り替え
   ================================================== */
#tab-all:checked ~ .school-content .left-column #section-all {
  display: block !important;
}
#tab-1:checked ~ .school-content .left-column #section-1 {
  display: block !important;
}
#tab-2:checked ~ .school-content .left-column #section-2 {
  display: block !important;
}
#tab-3:checked ~ .school-content .left-column #section-3 {
  display: block !important;
}
#tab-4:checked ~ .school-content .left-column #section-4 {
  display: block !important;
}
#tab-5:checked ~ .school-content .left-column #section-5 {
  display: block !important;
}
#tab-6:checked ~ .school-content .left-column #section-6 {
  display: block !important;
}
#tab-7:checked ~ .school-content .left-column #section-7 {
  display: block !important;
}
#tab-8:checked ~ .school-content .left-column #section-8 {
  display: block !important;
}


/* ==================================================
   🗺️ マップページ専用：位置ズレ＆表示切り替え（最終解決版）
   ================================================== */

/* 1. 普段はすべての地図エリアを「非表示」にして一旦隠す */
.school-content .left-column .area-section {
  display: none !important;
}

/* 2. ラジオボタンのチェック状態に合わせて、該当する地図だけを最優先で「表示」にする */
#tab-all:checked ~ .school-content .left-column #section-all,
#tab-1:checked ~ .school-content .left-column #section-1,
#tab-2:checked ~ .school-content .left-column #section-2,
#tab-3:checked ~ .school-content .left-column #section-3,
#tab-4:checked ~ .school-content .left-column #section-4,
#tab-5:checked ~ .school-content .left-column #section-5,
#tab-6:checked ~ .school-content .left-column #section-6,
#tab-7:checked ~ .school-content .left-column #section-7,
#tab-8:checked ~ .school-content .left-column #section-8 {
  display: block !important;
}

/* 3. 地図の縦揺れ・はみ出しを強制ホールドして白い箱に収める */
.school-content .left-column .map-wrapper {
  position: relative !important;
  width: 100% !important;
  padding-top: 75% !important; /* スマホ・PCで綺麗な16:9〜4:3比率を維持 */
  margin: 0 !important;
}

.school-content .left-column .map-wrapper iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* ==================================================
   🎖 資格ページ内：エリア絞り込みの連動制御
   ================================================== */
/* ★ ラジオボタンがチェックされたら、それ以外のエリアのカードを「非表示」にする便利な小技 */
#lic1-aomori:checked ~ .venue-grid .venue-card:not(.sub-aomori),
#lic1-hirosaki:checked ~ .venue-grid .venue-card:not(.sub-hirosaki),
#lic1-hachinohe:checked ~ .venue-grid .venue-card:not(.sub-hachinohe),
#lic2-aomori:checked ~ .venue-grid .venue-card:not(.sub-aomori),
#lic2-hirosaki:checked ~ .venue-grid .venue-card:not(.sub-hirosaki),
#lic2-hachinohe:checked ~ .venue-grid .venue-card:not(.sub-hachinohe),
#lic3-aomori:checked ~ .venue-grid .venue-card:not(.sub-aomori),
#lic3-hirosaki:checked ~ .venue-grid .venue-card:not(.sub-hirosaki),
#lic3-hachinohe:checked ~ .venue-grid .venue-card:not(.sub-hachinohe),
#lic4-aomori:checked ~ .venue-grid .venue-card:not(.sub-aomori),
#lic4-hirosaki:checked ~ .venue-grid .venue-card:not(.sub-hirosaki),
#lic4-hachinohe:checked ~ .venue-grid .venue-card:not(.sub-hachinohe),
#lic5-aomori:checked ~ .venue-grid .venue-card:not(.sub-aomori),
#lic5-hirosaki:checked ~ .venue-grid .venue-card:not(.sub-hirosaki),
#lic5-hachinohe:checked ~ .venue-grid .venue-card:not(.sub-hachinohe),
#lic6-aomori:checked ~ .venue-grid .venue-card:not(.sub-aomori),
#lic6-hirosaki:checked ~ .venue-grid .venue-card:not(.sub-hirosaki),
#lic6-hachinohe:checked ~ .venue-grid .venue-card:not(.sub-hachinohe),
#lic7-aomori:checked ~ .venue-grid .venue-card:not(.sub-aomori),
#lic7-hirosaki:checked ~ .venue-grid .venue-card:not(.sub-hirosaki),
#lic7-hachinohe:checked ~ .venue-grid .venue-card:not(.sub-hachinohe),
#lic8-aomori:checked ~ .venue-grid .venue-card:not(.sub-aomori),
#lic8-hirosaki:checked ~ .venue-grid .venue-card:not(.sub-hirosaki),
#lic8-hachinohe:checked ~ .venue-grid .venue-card:not(.sub-hachinohe),
/* 【限定】8番目のセクションだけ下北の出し分けを有効化 */
#lic8-shimokita:checked ~ .venue-grid .venue-card:not(.sub-shimokita) {
  display: none !important;
}


/* ★ 資格ページ内：エリア切り替えボタンが選択された時だけ色を茶色にする（バッジ色崩れ対策版） */
#lic1-all:checked ~ .area-section .area-tabs label[for="lic1-all"], #lic1-aomori:checked ~ .area-section .area-tabs label[for="lic1-aomori"], #lic1-hirosaki:checked ~ .area-section .area-tabs label[for="lic1-hirosaki"], #lic1-hachinohe:checked ~ .area-section .area-tabs label[for="lic1-hachinohe"],
#lic2-all:checked ~ .area-section .area-tabs label[for="lic2-all"], #lic2-aomori:checked ~ .area-section .area-tabs label[for="lic2-aomori"], #lic2-hirosaki:checked ~ .area-section .area-tabs label[for="lic2-hirosaki"], #lic2-hachinohe:checked ~ .area-section .area-tabs label[for="lic2-hachinohe"],
#lic3-all:checked ~ .area-section .area-tabs label[for="lic3-all"], #lic3-aomori:checked ~ .area-section .area-tabs label[for="lic3-aomori"], #lic3-hirosaki:checked ~ .area-section .area-tabs label[for="lic3-hirosaki"], #lic3-hachinohe:checked ~ .area-section .area-tabs label[for="lic3-hachinohe"],
#lic4-all:checked ~ .area-section .area-tabs label[for="lic4-all"], #lic4-aomori:checked ~ .area-section .area-tabs label[for="lic4-aomori"], #lic4-hirosaki:checked ~ .area-section .area-tabs label[for="lic4-hirosaki"], #lic4-hachinohe:checked ~ .area-section .area-tabs label[for="lic4-hachinohe"],
#lic5-all:checked ~ .area-section .area-tabs label[for="lic5-all"], #lic5-aomori:checked ~ .area-section .area-tabs label[for="lic5-aomori"], #lic5-hirosaki:checked ~ .area-section .area-tabs label[for="lic5-hirosaki"], #lic5-hachinohe:checked ~ .area-section .area-tabs label[for="lic5-hachinohe"],
#lic6-all:checked ~ .area-section .area-tabs label[for="lic6-all"], #lic6-aomori:checked ~ .area-section .area-tabs label[for="lic6-aomori"], #lic6-hirosaki:checked ~ .area-section .area-tabs label[for="lic6-hirosaki"], #lic6-hachinohe:checked ~ .area-section .area-tabs label[for="lic6-hachinohe"],
#lic7-all:checked ~ .area-section .area-tabs label[for="lic7-all"], #lic7-aomori:checked ~ .area-section .area-tabs label[for="lic7-aomori"], #lic7-hirosaki:checked ~ .area-section .area-tabs label[for="lic7-hirosaki"], #lic7-hachinohe:checked ~ .area-section .area-tabs label[for="lic7-hachinohe"],
#lic8-all:checked ~ .area-section .area-tabs label[for="lic8-all"], #lic8-aomori:checked ~ .area-section .area-tabs label[for="lic8-aomori"], #lic8-hirosaki:checked ~ .area-section .area-tabs label[for="lic8-hirosaki"], #lic8-hachinohe:checked ~ .area-section .area-tabs label[for="lic8-hachinohe"],
/* 【限定】8番目のセクションだけ下北ボタンの茶色反転を有効化 */
#lic8-shimokita:checked ~ .area-section .area-tabs label[for="lic8-shimokita"] {
  background-color: #b56b5f !important;
  color: #ffffff !important;
  border-color: #b56b5f !important;
}


/* ==================================================
   🚨 【最終決定版】1000×380画像・1回切り替え固定・ボタン表示崩れ解消
   ================================================== */

/* 🌅 1. メインビジュアルエリア（1000px × 380px に完全一致させます） */
.top-hero {
  position: relative !important;
  width: 100% !important;
  height: 380px !important; /* パソコン画面での高さ（画像サイズと完全連動） */
  max-width: 1000px !important; /* 白い箱の横幅と完全一致 */
  margin: 0 auto 30px auto !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background-color: transparent !important;
}

.hero-bg-slider {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* 作成した画像を1ミリも切らずに枠内いっぱいに敷き詰めます */
.hero-bg-slider .slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* 1000×380で作れば、比率が同じなので一切切り取られません */
  object-position: center !important;
  opacity: 0;
  animation: bgFadeOnce 10s 1 forwards;
}

/* 2枚目の画像は5秒遅らせてスタート */
.hero-bg-slider .slide2 {
  animation-delay: 5s;
}

/* 🎬 1回だけ切り替わって、1枚目に戻って止まるアニメーション */
@keyframes bgFadeOnce {
  0% { opacity: 0; }
  1% { opacity: 1; }  /* 1枚目を表示 */
  45% { opacity: 1; }
  50% { opacity: 0; }  /* 2枚目へ交代するために1枚目を一瞬隠す */
  100% { opacity: 1; } /* 10秒目（最後）に1枚目を再び表示して固定 */
}

/* 2枚目の画像（slide2）専用のアニメーション（10秒目で完全に消去） */
.hero-bg-slider .slide2 {
  animation: bgFadeOnceSlide2 10s 1 forwards !important;
  animation-delay: 5s !important;
}
@keyframes bgFadeOnceSlide2 {
  0% { opacity: 0; }
  10% { opacity: 1; } /* 5〜10秒の間だけ表示 */
  45% { opacity: 1; }
  50% { opacity: 0; } /* 10秒目が来たら消える */
  100% { opacity: 0; }
}

/* 🏡 2. メインコンテナと2カラム（左右）の横幅をガチッと固定 */
.school-container {
  max-width: 1000px !important;
  margin: 0 auto 50px auto !important;
  padding: 20px !important;
}

.school-content {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 30px !important;
  width: 100% !important;
}

.left-column {
  width: 58% !important;
  flex: none !important;
}

.right-column {
  width: 38% !important;
  flex: none !important;
}

/* 🔍 3. 右側サイドバーボタンの崩れを完全に修正 */
.right-column .btn-top-nav {
  display: block !important;
  width: 100% !important;
  background-color: #faf6f0 !important;
  color: #6e5d53 !important;
  border: 1px solid #ede4da !important;
  text-align: left !important;
  padding: 14px 15px !important;
  position: relative !important;
  margin-bottom: 12px !important;
  font-weight: bold !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* 右端の「▶」マークを綺麗に復活させます */
.right-column .btn-top-nav::after {
  content: '▶' !important;
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 11px !important;
  color: #9c8a7c !important;
  display: block !important;
}

.right-column .btn-top-nav:hover {
  background-color: #eadece !important;
  color: #5c4a3c !important;
}

/* 📍 4. 4会場案内のカード崩れを「きれいな横2列」に維持 */
.venue-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 16px 0 !important;
  margin-top: 15px !important;
  width: 100% !important;
}

.venue-card {
  width: calc(50% - 8px) !important;
  box-sizing: border-box !important;
  background-color: #faf5ef !important;
  border-left: 4px solid #b56b5f !important;
  padding: 18px !important;
  border-radius: 0 8px 8px 0 !important;
}

/* 📱 5. スマートフォン（画面幅767px以下）の時のレスポンス保険 */
@media (max-width: 767px) {
  .top-hero {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 38% !important;        /* ★38% に戻して両端の切れを直します */
    border-radius: 0 !important;
    position: relative !important;
  }
  
  .hero-bg-slider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  .hero-bg-slider .slide {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    
    /* 💡 cover から fill に変更して、隙間なくピッタリ枠に密着させます */
    object-fit: fill !important;       
  }
  
   /* 📱 スマホの時だけカード内の要素の隙間を完全に一定にする設定 */
  .venue-card {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important; /* ★中身を上から下に順番に並べる */
    align-items: flex-start !important;
    gap: 0 !important;                  /* 一度余計な隙間をリセット */
  }

  /* 1. 会場名（ユートリーやカクヒロなどすべて共通）の余白を固定 */
  .venue-card div,
  .venue-card p,
  .venue-card h2,
  .venue-card h3,
  .venue-title {
    margin-top: 5px !important;
    margin-bottom: 15px !important; /* ★マイナスをやめて、下に「15px」の綺麗な隙間を固定します */
    padding-bottom: 0px !important;
    line-height: 1.3 !important;   /* 2行になった時の行間をきれいに整える */
  }

  /* 2. 開催日・時間などの各行の上下の間隔もきゅっと詰めて整える */
  .venue-card .info-row,
  .venue-card li { 
    margin-bottom: 6px !important; /* 開催日と時間の間の隙間 */
  }

  /* 3. 2カラム（左右並び）を縦に並べる設定（以前のまま維持） */
  .school-content {
    flex-direction: column !important;
  }

  .left-column, .right-column {
    width: 100% !important;
  }
} /* 👈 メディアクエリ全体の閉じカッコ */



/* ==================================================
   💖 【カラー最終調整】バッジを100%いちばん可愛いパステルカラーにする
   ================================================== */

/* 💡 国立大学：ふんわり優しいカフェオレブラウン */
.venue-card span.venue-tag[style*="background-color: #8c6b53"],
.venue-card span.venue-tag[style*="background-color:#8c6b53"] {
  background-color: #baa291 !important; /* くすみのない、明るく優しいミルク茶色 */
}

/* 💡 私立大学・短大：あたたかみのあるキャラメルアプリコット */
.venue-card span.venue-tag[style*="background-color: #d4a373"],
.venue-card span.venue-tag[style*="background-color:#d4a373"] {
  background-color: #e3a978 !important; /* パッと明るく、コロンとした可愛いパステルオレンジ */
}

/* 💡 公立大学：いちごミルクのような、ふんわりくすみ赤茶色 */
.venue-card span.venue-tag:not([style]) {
  background-color: #c98c83 !important; /* 濃い赤茶色を、優しく女の子らしいベリーカラーに */
}

/* 💡 バッジの文字（テキスト）の見た目の最終調整 */
.venue-card .venue-tag,
.venue-card span.venue-tag,
.venue-card a span.venue-tag {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 11px !important; /* 文字を少しだけ小さくして、バッジの余白を可愛く見せます */
  letter-spacing: 0.5px !important;
  font-weight: bold !important;
  padding: 3px 10px !important; /* バッジの形をぷっくり丸みのある形に微調整 */
  border-radius: 4px !important;
}


/* ==================================================
   🚨 【位置ズレ最終解決】オープンキャンパス写真を一番上にピタッと揃える
   ================================================== */
.school-container .has-sub-image {
  display: flex !important;
  align-items: flex-start !important; /* 💡 写真や文字を「一番上（トップ）」で綺麗に揃える最重要命令 */
}

/* ==================================================
   🚨 【最終解決】オープンキャンパス枠のガタガタ崩れ・位置ズレ完全修復
   ================================================== */

/* 1. 写真と「テキスト全体の塊」をきれいに横並びにします */
.school-container .intro-box,
.school-container [class*="intro-box"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important; /* 写真を一番上にピタッと揃えます */
  justify-content: flex-start !important;
  gap: 20px !important; /* 写真と文字の間の心地よいすき間 */
  width: 100% !important;
}

/* 2. 写真自体のサイズをガチッと固定して、強制的に一番上まで引っ張り上げます */
.school-container .intro-sub-image {
  width: 180px !important;
  max-width: 180px !important;
  height: 120px !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  background-color: transparent !important;
  /* 💡 追加：まわりのテキストに流されず、自分自身を一番上のラインに強制固定します */
  align-self: flex-start !important; 
}


/* 3. 🚨 超重要：右側の「テキスト全体の塊」の中身を、もう一度正しい縦並び（ブロック）に戻します */
.school-container .intro-box-content {
  display: block !important; /* 縦に潰れていた文章を、元の綺麗な縦並びに復活させます */
  flex: 1 !important;
  width: auto !important;
}

/* 4. 日程ボックスや箇条書きの文字も、縦に潰れないようにリセットします */
.school-container .oc-date-badge,
.school-container .intro-text,
.school-container .oc-date-badge ul {
  display: block !important;
  width: 100% !important;
}

.school-container .oc-date-badge li {
  display: list-item !important; /* 箇ポインタの点を復活させ、縦に並べます */
  margin-bottom: 5px !important;
}

/* 📱 5. スマートフォンの時は、自動で縦1列（上に写真、下に文字）に組み替えるレスポンシブ設定 */
@media (max-width: 767px) {
  .school-container .intro-box,
  .school-container [class*="intro-box"] {
    flex-direction: column !important;
    align-items: center !important;
  }
  .school-container .intro-sub-image {
    margin-bottom: 15px !important;
  }
}

/* ==================================================
   🚨 【最優先上書き】メイン画像復活・PC上揃え・スマホ縦並び完全修復
   ================================================== */

/* 🌅 1. メイン画像エリア（PC・スマホ共通デザイン） */
.main-image {
  width: 100% !important;
  height: auto !important; /* 💡 280pxからauto（自動）に変更します */
  margin: 0 auto 25px auto !important;
  background-color: #ffffff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.main-image img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* 💻 2. パソコン画面（画面幅768px以上）の時のレイアウト指定 */
@media (min-width: 768px) {
  .school-content .right-column {
    display: flex !important;
    flex-direction: column !important;
  }
  .school-content .right-column a[class*="btn-hp"],
  .school-content .right-column .btn-hp,
  .school-content .right-column a:first-child {
    margin-top: 0 !important;
    top: 0 !important;
    position: relative !important;
  }
  .school-content .right-column table,
  .school-content .right-column .profile-table {
    margin-top: 15px !important;
  }

  /* 💡 PCの時だけ、写真と文章を綺麗な横並びに固定します */
  .school-container .intro-box,
  .school-container [class*="intro-box"],
  .intro-box.has-sub-image {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .school-container .intro-box-content {
    flex: 1 !important;
  }
}

/* 📱 3. スマートフォン画面（画面幅767px以下）の時の縦並び強制指示 */
@media (max-width: 767px) {
  .main-image {
    height: 200px !important;
  }

  /* 💡 ここが最重要です！スマホ時は「写真と文章の横並び（flex）」を完全に解除（block）し、
     上から下へ流れる綺麗な縦1列に強制リセットします。これで絶対に潰れません！ */
  .school-container .intro-box,
  .school-container [class*="intro-box"],
  .intro-box.has-sub-image {
    display: block !important; /* 横並びを完全に破壊して縦並びにします */
    width: 100% !important;
  }

    /* スマホ時は写真を中央寄せにし、下に心地よいすき間（15px）を作ります */
  .school-container .intro-sub-image {
    display: flex !important; /* 💡 blockからflexに変更して、中身の写真を真ん中に引き寄せます */
    align-items: center !important;
    justify-content: center !important;
    width: 180px !important;
    height: 120px !important;
    margin: 0 auto 15px auto !important;
    flex-shrink: 0 !important;
  }


  /* 文字の入った箱を横幅いっぱいに広げます */
  .school-container .intro-box-content {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* 日程ボックス、文章、箇条書きを100%の幅で縦に整列させます */
  .school-container .oc-date-badge,
  .school-container .intro-text,
  .school-container .oc-date-badge ul {
    display: block !important;
    width: 100% !important;
  }

  .school-container .oc-date-badge li {
    display: list-item !important; /* 箇条書きの点を綺麗に復活させます */
    margin-bottom: 6px !important;
    width: auto !important;
  }
}

/* ==================================================
   🌟 【最終決戦】オープンキャンパス PC横並び ＆ スマホ写真中央寄せ完全両立版
   ================================================== */

/* 💻 1. パソコン画面（画面幅768px以上）の時の絶対防衛ライン */
@media (min-width: 768px) {
  .school-container .intro-box,
  .school-container [class*="intro-box"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important; /* 写真と見出しを一番上でピタッと揃えます */
    gap: 20px !important;
    width: 100% !important;
  }

  .school-container .intro-sub-image {
    display: block !important;
    width: 180px !important;
    max-width: 180px !important;
    height: 120px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  .school-container .intro-box-content {
    display: block !important;
    flex: 1 !important;
    width: auto !important;
  }
}

/* 📱 2. スマートフォン画面（画面幅767px以下）の時だけの個別指示 */
@media (max-width: 767px) {
  .school-container .intro-box,
  .school-container [class*="intro-box"] {
    display: block !important; /* 横並びを解除して縦1列にします */
    width: 100% !important;
  }

  /* 💡 写真の入っている「箱ごと」スマホ画面の本当のど真ん中に強制配置します */
  .school-container .intro-sub-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 180px !important;
    max-width: 180px !important;
    height: 120px !important;
    margin: 0 auto 15px auto !important; /* 🌟 左右のmarginをautoにすることで確実に真ん中に来ます */
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  /* 写真自体のまわりの隙間を強制的に埋めてパツパツに密着させます */
  .school-container .intro-sub-image img {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .school-container .intro-box-content {
    display: block !important;
    width: 100% !important;
  }
}

/* ==================================================
   🖼️ 学校紹介ページ：トピック内・写真2枚「上下並び」サイズ統一版
   ================================================== */
/* 2枚用の写真枠：1枚用（上のトピック）と同じ横幅をキープします */
.intro-sub-image.img-two {
  display: flex !important;
  flex-direction: column !important; /* 上下並びにする */
  gap: 8px !important;               /* 写真と写真の間の上下のすき間 */
  background-color: transparent !important; 
  height: auto !important;           
  width: 200px !important;           /* 💡修正：上の1枚用（200px）と横幅を完全に一致させます */
  flex-shrink: 0 !important;         
}

/* 2枚用の各写真：横長（3:2）の比率にして、2枚を等しく整列させます */
.intro-sub-image.img-two img {
  width: 100% !important;            /* 200pxの幅いっぱいに広げる */
  height: 120px !important;          /* 💡修正：上の1枚用（120px）と「1つの写真の高さ」を合わせます */
  aspect-ratio: auto !important;     /* 正方形から、上の写真と同じ横長比率に変更 */
  object-fit: cover !important;
  border-radius: 4px !important;     
}

/* 📱 スマホ画面（768px以下）の時のレスポンシブ設定 */
@media (max-width: 768px) {
  .intro-sub-image.img-two {
    flex-direction: row !important;  /* スマホ時は文章の上で「左右並び」に */
    width: 100% !important;          
    margin-bottom: 15px !important;  
  }
    .intro-sub-image.img-two img {
    width: calc(50% - 4px) !important; 
    height: auto !important;           /* 💡スマホでも高さを自動にして縛りを無くします */
  }

}

/* ========================================================
   高さの固定制限を完全に無くし、初期状態（指定なし）に戻す
   ======================================================== */
.school-container .intro-sub-image,
.intro-sub-image {
  height: min-content !important;   /* 💡 中身の写真の高さに完全に合わせます */
  max-height: none !important;      /* 💡 高さの上限を完全に無くします */
}

.intro-sub-image img {
  width: 100% !important;           /* 横幅は維持します */
  height: auto !important;          /* 💡 縦の固定を無くし、写真本来の比率にします */
  object-fit: visible !important;   /* 💡 切り抜きや変形を一切行いません */
}


/* ========================================================
   資料請求エリアの2つのボタンの間に隙間を作る
   ======================================================== */
.school-container a[href*="mailto"],
.school-container a:last-child {
  /* 💡 上のボタンとの間に「12ピクセル」のほどよい隙間を作ります */
  margin-top: 12px !important; 
  display: block !important;
}


/* ========================================================
   【完全最終解決】資料請求の隙間 ＆ 4つのボタンを一直線に固定
   ======================================================== */

/* 1. 資料請求エリアの2つのボタンの間に隙間を作る */
.school-container a[href*="mailto"],
.school-container a.btn-top-nav:last-child {
  margin-top: 12px !important; 
  display: block !important;
}

/* 2. 4つのボタンを横一列に並べる（文字に引きずられない最新の並び替えシステム） */
.yt-responsive-container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-start !important; /* 💡 アルファベットに関係なく、ボタンの上端を完璧な一直線にロックします */
  gap: 10px !important;
  margin: 20px 0 !important;
  flex-wrap: nowrap !important; /* パソコンでは絶対に折り返さない */
}

/* 3. ボタン自体の形をピシッと4つ綺麗に揃える */
.yt-responsive-container .yt-direct-button,
.yt-direct-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important; /* 文字の1行をキープ */
  width: auto !important; 
  padding: 0 18px !important; /* 上下の余白をリセットして文字を完全に真ん中へ */
  height: 46px !important;
  box-sizing: border-box !important;
  
  /* 見た目の装飾 */
  background-color: #ff0000 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: bold !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* 📱 スマホ用（スマホのときは自動で縦並びにする） */
@media (max-width: 768px) {
  .yt-responsive-container {
    flex-direction: column !important;
    align-items: center !important;
  }
  .yt-direct-button {
    width: 100% !important;
    max-width: 340px !important;
  }
}

/* ========================================================
   【最底レベル上書き】4つのボタンを何が何でも強制一直線ロック
   ======================================================== */
.school-container .yt-responsive-container,
.yt-responsive-container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-start !important; /* 💡 ボタンの上端を一直線に強制ロックします */
  gap: 10px !important;
  margin: 20px 0 !important;
  flex-wrap: nowrap !important;
  height: auto !important; /* 💡 枠の高さの呪いもこれで消去します */
}

.school-container .yt-direct-button,
.yt-responsive-container .yt-direct-button,
.yt-direct-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  width: auto !important; 
  padding: 0 18px !important;
  
  /* 💡 びよーんと伸びてしまう高さを「46px」に強制的に固定して縮めます！ */
  height: 46px !important; 
  max-height: 46px !important; 
  box-sizing: border-box !important;
  
  /* 見た目の装飾 */
  background-color: #ff0000 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: bold !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.tel-link {
  display: inline-block; /* ブロック化を解除して横並びにする */
  padding-left: 5px;     /* 必要に応じて「TEL：」との間に少し隙間をあける */
}

/* ========================================================
   スマホ版（レスポンシブ）で写真を綺麗に縦並びにする強制上書き設定
   ======================================================== */
@media (max-width: 767px) {
    /* 1. 全体の枠組みを縦並び（上に写真、下に文字）にする */
    .school-container .intro-box,
    .school-container [class*="intro-box"] {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 2. 写真を囲む「箱」のサイズ固定（180pxなど）を完全に解除して縦並びにする */
    .school-container .intro-sub-image {
        display: flex !important;
        flex-direction: column !important; /* 写真を縦に並べる */
        width: 100% !important;           /* 横幅をいっぱいにする */
        max-width: 100% !important;
        height: auto !important;          /* 縦幅の固定（120px）を解除 */
        margin: 0 auto 20px auto !important; /* 下の文字との間に隙間を作る */
    }

    /* 3. 箱の中にある「写真自体のサイズ」も歪まないように最適化する */
    .school-container .intro-sub-image img {
        display: block !important;
        width: 100% !important;           /* 写真の横幅をいっぱいにする */
        height: auto !important;          /* 縦横比をキープして潰れを直す */
        object-fit: cover !important;
    }
}

.map-link {
  display: block;       /* ★これでお互いを寄せ付けず、1行ずつ縦に並びます */
  margin-bottom: 10px;  /* リンクとリンクの間の上下のスキマ（数値はお好みで） */
}

/* 一番最後のリンク（大学本部）だけは下の余白をゼロにする */
.map-link:last-child {
  margin-bottom: 0;
}

/* 🎓 すべての資格エリア内の地域ボタン：選択されたら上のメインボタンと同じ色にする */

/* 全地域が選択されたとき */
[id$="-all"]:checked ~ .area-tabs [for$="-all"] {
  background-color: #b56b5f !important; /* 赤茶色 */
  color: #ffffff !important;            /* 白文字 */
  border-color: transparent !important; /* 枠線を消す */
}

/* 青森が選択されたとき */
[id$="-aomori"]:checked ~ .area-tabs [for$="-aomori"] {
  background-color: #b56b5f !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* 弘前が選択されたとき */
[id$="-hirosaki"]:checked ~ .area-tabs [for$="-hirosaki"] {
  background-color: #b56b5f !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* 八戸が選択されたとき */
[id$="-hachinohe"]:checked ~ .area-tabs [for$="-hachinohe"] {
  background-color: #b56b5f !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* 下北が選択されたとき */
[id$="-shimokita"]:checked ~ .area-tabs [for$="-shimokita"] {
  background-color: #b56b5f !important;
  color: #ffffff !important;
  border-color: transparent !important;
}