/* ==============================
   全体の基本設定
============================== */
header {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: "Kosugi Maru", "Yu Gothic", sans-serif;
}


/* ==============================
   校章・学校名（完成版）
============================== */
.school-header {
  height: auto;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  padding: 2px 12px;
  overflow: hidden;
}


/* 校章画像は「高さ基準」で制御する */

.school-header img.school-mark {
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  padding-top: 2px;
  padding-bottom: 2px;
}

.school-mark {
  max-height: 32px;
  width: auto;
  flex-shrink: 0; 
}

.school-name-img {
  max-height: 42px;
  width: auto;
  max-width: 70%;  
}

.school-header {
  margin-bottom: 0;
}

.nav-wrapper {
  margin-top: 0;
}



/* ==============================
   ナビゲーションエリア
============================== */
.nav-wrapper {
  background-color: #00A794;
  position: relative;
  padding: 4px 10px;
  text-align: center;
  min-height: 56px;
  display: flex;
  align-items: center;
}


.nav {
  display: flex;              /* PCでは表示 */
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li a {
  display: block;
  padding: 8px 20px;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

.nav li a:hover {
  background-color: #007f71;
}


/* ==============================
   ハンバーガーボタン
============================== */

.menu-btn {
  display: none;              /* PCでは隠す */
  font-size: 26px;
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
}


/* ==============================
   スマホ表示：ここが重要
============================== */
@media (max-width: 768px) {

  /* 三ボタンを表示 */
  .menu-btn {
    display: block;
  }

  /* ナビは最初は隠す */
  .nav {
    display: none;            
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #00A794;
    z-index: 1000;
  }

  /* ☰を押したら開く */
  .nav.open {
    display: block;
  }

  .school-header {
    height: 64px;
  }

  .school-header img.school-mark {
    max-height: 35px;
  }

  .school-name-img {
    max-height: 46px;
    max-width: 88%;
  }
}


/* ==============================
   スマホ時：☰展開後ナビを左詰め
============================== */
@media (max-width: 768px) {

  /* ナビ全体を左基準に */
  .nav {
    text-align: left;
  }

  /* 各ナビ項目も左揃え */
  .nav li a {
    justify-content: flex-start;
    text-align: left;
    padding-left: 20px;
  }
}


/* ==============================
   メインレイアウト
============================== */
.container {
  display: flex;
  gap: 20px;
  padding: 10px;
}

/* トップページ用 */

.board {
  flex: 1;
  background-color: #f2f2f2;
  padding: 10px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
}


.topics {
  flex: 2;
  padding: 10px;
  min-width: 0; /* 追加: flex子要素が中身のサイズ以上に広がるのを防ぐ */
}

/* ==============================
   学校概要ページ（左寄せ本文）
============================== */
main.container.one-column {
  display: block;
}

.page-content {
  max-width: 900px;
  margin-left: 0;
  margin-right: auto;
  padding: 0 20px;
  line-height: 1.7;
  text-align: left;
}


/* ==============================
   本校の取組
============================== */
.sub-links {
  padding-left: 40px;
  margin-top: 15px;
}

.sub-links li {}


/* ==============================
   フッター（区切り線付き）
============================== */

footer {
  display: flex;
  justify-content: center;
  text-align: center;

  border-top: 3px solid #00A794;
  background: linear-gradient(to bottom, #E6F5F1, #ffffff);

  margin-top: 60px;
  padding: 24px 10px;
}

footer p {
  margin: 0;
  color: #2f4f4f;
}


/* ==============================
   学部紹介：画像＋文章レイアウト
============================== */
.dept-block {
  display: flex;
  gap: 20px;
  margin: 40px 0;
  align-items: center;
}

.dept-block img {
  width: 200px;
  max-width: 40%;
  border-radius: 6px;
}

/* 文章側 */
.dept-text {
  flex: 1;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .dept-block {
    flex-direction: column;
    align-items: flex-start;
  }

  .dept-block img {
    max-width: 100%;
  }
}

/* ==============================
   ヘッダーの高さを安定させる
============================== */

/* スクロールバー有無によるズレ防止 */
html {
  overflow-y: scroll;
}

/* ===== アクセスページ最適化 ===== */

/* 右エリア全体 */
.access-area {
  padding-top: 0;   /* ←余白カット */
}

/* 見出し */
.access-area .topics-title {
  margin-bottom: 10px;  /* ←地図と近づける */
}

/* 地図 */
.map iframe {
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 14px;
}

.map {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 15px auto;
  aspect-ratio: 4 / 3;
}

/* 住所 */
.access-info {
  text-align: center;
  line-height: 1.6;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .topics {
    order: -1;
  }
}

/* ===== PCだけ違和感を消す ===== */
@media (min-width: 769px) {
 
  .access-area .topics-title {
    margin-top: 0;
  }

  .access-area .map {
    margin-top: 5px;
  }
}

/* ===== アクセスページ 横の空白完全解消 ===== */
@media (min-width: 769px) {

  .access-page .board {
    flex: 1;   /* 左：1の幅 */
  }

  .access-page .topics {
    flex: 1;   /* 右：1の幅（←これが重要） */
  }

}

/* ===== アクセスページ空白だけ直す（安全版） ===== */
@media (min-width: 769px) {

  .access-page {
    align-items: flex-start;   /* 上揃えだけ調整 */
  }

}


/* ===== お問い合わせを交通と同じ見た目に ===== */
.contact-box {
  background-color: #f2f2f2;  /* ← 交通と同じ色 */
  padding: 10px;
  margin-top: 15px;
  border-radius: 0;           /* ← 角丸をなくして揃える */
  border-left: none;          /* ← 緑ライン削除 */
}

/* ===== 下段の見た目を上段に完全一致させる ===== */

/* 写真 */
.school-photo-img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* 下段の余白を整える */
.container + .container {
  margin-top: 0;   /* ←変な空白を消す */
}

.triple-block > * {
  flex: 1;
  text-align: left;
}

/* ===== 下段（3分割）のレスポンシブ調整 ===== */
@media (max-width: 768px) {

  .triple-block {
    flex-direction: column;   /* 縦並び */
    gap: 15px;                /* 間隔を少し狭める */
  }

  .triple-block > * {
    width: 100%;              /* 幅を揃える */
  }

  .triple-block > * {
    text-align: left;   /* ← 左固定 */
  }

  .triple-block p {
    font-size: 15px;
    line-height: 1.7;
  }


}


/* ===== メインビジュアル ===== */
.main-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.main-visual img {
  width: 100%;
  height: 600px;
  object-fit: cover; 
  object-position: center 60%; 
  display: block;
}


/* 文字 */
.main-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  background: linear-gradient(
    transparent,
    rgba(0,0,0,0.6)
  );


  color: white;
  font-weight: bold;
  padding: 10px 15px;
  border-left: 4px solid white;
  webkit-text-stroke: 0.5px rgba(0,0,0,0.7);
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
  max-width: 500px;
}

.main-text h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.main-text p {
  font-size: 17px;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
  line-height: 1.8;  
  background: linear-gradient(transparent 70%, rgba(255,255,255,0.6) 70%);
  display: inline;
  line-height: 1.8;

}


.main-text {
  animation: fadeUp 1s ease;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* 上余白を統一 */
main {
  padding-top: 0px;
}

.blog-card {
  display: block;
  max-width: 350px;
  margin: 20px auto;
  text-decoration: none;
  color: #333;

  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;             /* 角丸を画像にも効かせる */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ブログボタン制御 */
.blog-img {
  display: block;
  margin: 0 auto;
  max-width: 300px;
}

.topics.blog-text {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.8;
  display: inline-block;
  background-image: linear-gradient(
    transparent 40%,
    rgba(0, 167, 148, 0.35) 40%
  );
  padding: 2px 6px;
}

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

.page-content h2 a {
  color: inherit;        /* 見出しと同じ色 */
  text-decoration: none; /* 下線消す */
}

.page-content h2 a:hover {
  opacity: 0.7;          /* ホバー時ほんのり反応 */
}


/* ==============================
   見出し 共通（h1 h2 h3）
============================== */
.page-content h1,
.page-content h2,
.page-content h3 {
  position: relative;
  margin-top: 30px;
  line-height: 1.4;
}

/* ==============================
   h1 h2（メイン見出し）
============================== */
.page-content h1,
.page-content h2 {
  padding-left: 20px;
}

/* 縦ライン（h1 h2） */
.page-content h1::before,
.page-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 6px;
  height: 1.2em;
  background-color: #00A794;
}

/* ==============================
   h2だけ蛍光ペン
============================== */
.page-content h2 {
  background-image: linear-gradient(
    transparent 60%,
    rgba(0, 167, 148, 0.35) 60%
  );
}

/* ==============================
   h3（小見出し）
============================== */
.page-content h3 {
  padding-left: 14px;
}

/* 縦ライン（h3） */
.page-content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 4px;
  height: 1em;
  background-color: #00A794;
}

/* ===== アクセスページ：地図横並び ===== */
.access-right {
  display: flex;
  gap: 10px;
  align-items: stretch;
  min-width: 0;
}

/* 2つの地図を同じ大きさに */
.access-right .map {
  flex: 1;
  min-height: 300px; 
}

/* 画像 */
.access-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== スマホでは縦並び ===== */
@media (max-width: 768px) {
  .access-right {
    flex-direction: column;
  }
}
footer {
  display: block;
  text-align: center;
  padding: 20px 10px;          /* 余白を追加 */
  background-color: #f7f7f7;   /* 薄いグレー */
  font-size: 14px;             /* 少し小さめで整える */
  line-height: 1.6;            /* 行間を広げる */
}

footer p {
  display: block;
  margin: 8px 0;               /* 上下に少し間隔 */
}


footer img {
  border: 1px solid #ccc;
  padding: 2px;
  background: #fff;
}