@charset "utf-8";

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

/* =================================
  デフォルト全体設定
================================= */
body {
  margin: 0;
  font-family: Arial, sans-serif, "メイリオ", Meiryo, "ヒラギノ角ゴシック",
    "Hiragino Sans", "Meiryo UI", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", YuGothic, "Yu Gothic", "Yu Gothic UI",
    "ＭＳ ゴシック", "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN",
    "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ Ｐゴシック", "MS PGothic";
  font-size: 16px;
  background-color: #fffbee;
  width: 100%;
  height: 100vh;
}
html,
body {
  overflow-x: hidden;
}

/* =================================
  PCサイズ (最小幅769px)
================================= */
@media (min-width: 769px) {
  /* PCでは nav-menu を常に表示（横並び） */
  /* PCでは .nav-menu を表示、#overlay は非表示 */
  .nav-menu {
    display: flex; /* あるいは block、横並びなど */
  }
  #overlay-button {
    display: none; /* オーバーレイボタンは隠す */
  }
  #overlay {
    display: none; /* オーバーレイメニュー自体も非表示 */
  }

  .cta-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 16px;
  }
}

/* =================================
  タブレット用 (768px ~ 1024px)
================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 15px;
    line-height: 1.6;
  }
  header {
    padding: 15px;
    height: 160px; /* ヘッダーの高さを小さく */
  }
  #header_inner {
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #header_logo {
    margin: 10px auto;
  }

  nav ul {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
  }
  nav ul li {
    font-size: 20px;
  }

  .hero-slider {
    width: 100%;
  }
  .cta-button {
    width: 100px;
    height: 100px;
    font-size: 16px;
  }
  #news {
    width: 95%;
    margin: 20px auto;
  }
  #important-notice {
    width: 95%;
    margin: 20px auto;
  }
  .notice-list {
    width: 100%;
  }
  #departments {
    width: 100%;
  }
  .department-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  footer {
    font-size: 15px;
  }
  .footer-top {
    padding: 25px;
  }
  .footer-bottom {
    padding: 25px;
  }
  .scroll-to-top {
    width: 70px;
    height: 70px;
    font-size: 14px;
  }
  body {
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden; /* 横スクロール禁止 */
  }

  header {
    height: auto;
    padding: 10px;
  }

  #header_inner {
    width: 90%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* ロゴと検索ボックスを縦並び */
    align-items: center;
  }

  #header_logo {
    margin: 10px auto;
  }

  .search-box {
    margin: 10px 0;
  }
  #search-button {
    width: 54px;
  }

  /* スマホでは #overlay を表示、.nav-menu は非表示 */
  .nav-menu {
    display: none;
  }
  #overlay-button {
    display: block; /* ラベル(ボタン)を表示 */
  }
  #overlay {
    display: block; /* オーバーレイメニューを表示 */
  }

  /* その他セクション調整 */

  .hero {
    width: 90%; /* スマホサイズでは幅を90%に */
    margin: 0 auto; /* 中央揃え */
    margin-top: 225px; /* ヘッダーの高さに対応 */
  }

  .hero-slider {
    width: 100%; /* スライダーを親要素にフィット */
  }

  .hero-slider img {
    width: 100%; /* 横幅をスライダーにフィット */
    height: auto; /* 高さを自動調整 */
    object-fit: cover; /* 画像をスライダー全体に合わせる */
  }

  .slick-prev::before,
  .slick-next::before {
    content: ""; /* 矢印のコンテンツを空に */
    font-size: 35px !important; /* アイコンのサイズ */
    color: #fcfcfc !important;
    position: absolute; /* 絶対位置に設定 */
    top: 50%; /* 垂直中央揃え */
    transform: translateY(-50%); /* 中央揃えの補正 */
  }
  .cta-button {
    margin: 20px auto;
    width: 60px;
    height: 60px;
    font-size: 12px;
    position: absolute;
    bottom: 20px;
    left: 93%;
    top: 82%;
    transform: translateX(-50%);
  }

  .tabs .tab {
    font-size: 1em; /* ボタンを大きくする */
    padding: 10px 20px; /* ボタンの内側の余白を増やす */
    color: #27210f; /* ボタンの文字色
      border: none; /* ボタンの枠線を消す */
    border: none;
    border-radius: 5px 5px 0 0; /* 上部分だけ角を丸くする */
    cursor: pointer; /* マウスオーバー時にポインターを表示 */
    margin-top: 50px;
  }

  .tab-content {
    height: 430px;
  }

  #news p {
    line-height: 2; /* 行間を広くする */
    font-size: 0.9em;
    margin: auto;
    text-align: justify;
  }

  #news {
    width: 90%;
    margin: 20px auto;
    height: auto;
  }
  #important-notice {
    width: 90%;
    margin: 20px auto;
    height: auto;
  }

  .notice {
    position: relative; /* アニメーション用に相対位置を指定 */
    overflow: hidden; /* アニメーションがはみ出さないようにする */
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #f76c6c;
    text-align: center;
    background: none;
    height: 100px;
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-style: normal;
    margin-top: 18px;
    margin-bottom: 0px;
  }
  .notice::after {
    bottom: 30px; /* アンダーラインの位置 */
  }

  .notice-list {
    width: 100%;
    padding: 10px;
    height: 400px;
    border: 1px solid #000;
    border-radius: 5px;
  }

  .notice-list p {
    padding: 10px 10px;
    line-height: 1.5; /* 行間を広くする */
    font-size: 1.2em;
    margin: auto;
    text-align: justify;
    color: #27210f;
  }

  a.button-link {
    padding: 8px 8px;
    font-size: 14px;
  }

  #departments h2 {
    font-size: 2.5em;
    margin-top: 18px;
    margin-bottom: 0;
  }

  #departments h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 100%;
    height: 3px;
    background: #f76c6c;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
    border-radius: 10px;
  }

  #departments {
    width: 100%;
    margin: 20px auto;
  }
  .department-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .department {
    width: 100%;
    height: auto;
    padding: 10px; /* 内側の余白を調整 */
  }

  .department p:first-of-type {
    font-size: 1.2em; /* 学部名の文字サイズを縮小 */
    line-height: 1.4; /* 行間を調整 */
    text-align: center; /* 中央揃え */
  }

  .department p:last-of-type {
    font-size: 0.9em; /* 説明文の文字サイズを縮小 */
    line-height: 1.6; /* 行間を調整 */
    text-align: justify; /* 左右両端揃え */
    overflow-wrap: break-word; /* 長い単語を折り返し */
    word-break: break-word; /* はみ出し防止 */
  }

  .department a {
    font-size: 0.9em; /* リンクの文字サイズを調整 */
    position: static; /* スマホでは絶対位置を解除 */
    margin-top: 10px; /* 上部に余白を追加 */

    text-align: center; /* 中央揃え */
  }
  #footer-inner {
    width: 95%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .footer-bottom .logo {
    max-width: 200px; /* 必要に応じて変更 */
    width: 50%;
    height: auto;
    display: block;
    margin: 0 auto 12px;
  }

  .footer-right {
    text-align: center;
    margin-top: 20px;
    font-size: 1em;
    color: #271d0f;
  }

  .footer-top {
    height: auto;
    padding: 20px;
    font-size: 15px;
  }

  #footer-inner span {
    margin-left: 0; /* 左のマイナスマージンを打ち消す */
    margin-top: 0; /* 上マージンも調整 */
    display: block; /* インライン要素であればブロック化 */
    text-align: center; /* テキストを中央寄せ */
    font-size: 0.8em;
  }
  .social-icons {
    margin-bottom: 16px;
  }
  .social-icons a {
    margin: 0 5px;
    display: inline-block;
  }
  .social-icons img {
    width: 60px;
    height: 60px;
  }
}

/* =================================
   全画面オーバーレイ用のCSS
   (#overlay-button や #overlay など)
================================= */

/* チェックボックスの非表示 */
input[type="checkbox"] {
  display: none;
}

/* トグル用ボタン (#overlay-button)
   -> モバイルでのみ表示したい場合は、@media (max-width: 768px) 内で display:block; を指定してもOK */
#overlay-button {
  position: absolute;
  top: 3.5em;
  right: 2em;
  cursor: pointer;
  z-index: 1000;
  user-select: none;
}

/* 3本線 (中央線) */
#overlay-button span {
  display: block;
  width: 35px;
  height: 2px;
  background-color: white; /* ← ここが重要。中央線を可視化するため */
  /* position: relative; */
  transition: all 0.2s ease-in-out;
  border-radius: 2px;
}

/* 上下の線 */
#overlay-button span:before,
#overlay-button span:after {
  content: "";
  position: absolute;
  width: 35px;
  height: 6px;
  background-color: white;
  transition: all 0.2s ease-in-out;
  border-radius: 2px;
}
#overlay-button span:before {
  top: -10px;
}
#overlay-button span:after {
  top: 10px;
}

/* チェックONで「×」に変化 */
input[type="checkbox"]:checked ~ #overlay-button span {
  background: transparent;
}
input[type="checkbox"]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);
}
input[type="checkbox"]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* オーバーレイ本体 */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #a6e3e9;
  visibility: hidden;
  opacity: 0;
  z-index: 500;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 表示ON */
input[type="checkbox"]:checked ~ #overlay {
  visibility: visible;
  opacity: 1;
}

/* オーバーレイのメニュー */
#overlay ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Kiwi Maru", serif;
}
#overlay ul li {
  padding: 1em;
}
#overlay ul li a {
  text-decoration: none;
  color: white;
  font-size: 2em;
  transition: color 0.2s ease;
}
#overlay ul li a:hover {
  color: #ff6f91;
}

/* =================================
  スマホサイズ (最大幅768px)
================================= */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden; /* 横スクロール禁止 */
  }

  header {
    height: auto;
    padding: 10px;
  }

  #header_inner {
    width: 90%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* ロゴと検索ボックスを縦並び */
    align-items: center;
  }

  #header_logo {
    margin: 10px auto;
  }

  .search-box {
    margin: 10px 0;
  }
  #search-button {
    width: 54px;
  }

  /* スマホでは #overlay を表示、.nav-menu は非表示 */
  .nav-menu {
    display: none;
  }
  #overlay-button {
    display: block; /* ラベル(ボタン)を表示 */
  }
  #overlay {
    display: block; /* オーバーレイメニューを表示 */
  }

  /* その他セクション調整 */

  .hero {
    width: 90%; /* スマホサイズでは幅を90%に */
    margin: 0 auto; /* 中央揃え */
    margin-top: 225px; /* ヘッダーの高さに対応 */
  }

  .hero-slider {
    width: 100%; /* スライダーを親要素にフィット */
  }

  .hero-slider img {
    width: 100%; /* 横幅をスライダーにフィット */
    height: auto; /* 高さを自動調整 */
    object-fit: cover; /* 画像をスライダー全体に合わせる */
  }

  .slick-prev::before,
  .slick-next::before {
    content: ""; /* 矢印のコンテンツを空に */
    font-size: 35px !important; /* アイコンのサイズ */
    color: #fcfcfc !important;
    position: absolute; /* 絶対位置に設定 */
    top: 50%; /* 垂直中央揃え */
    transform: translateY(-50%); /* 中央揃えの補正 */
  }
  .cta-button {
    margin: 20px auto;
    width: 60px;
    height: 60px;
    font-size: 12px;
    position: absolute;
    bottom: 20px;
    left: 93%;
    top: 82%;
    transform: translateX(-50%);
  }

  .tabs .tab {
    font-size: 1em; /* ボタンを大きくする */
    padding: 10px 20px; /* ボタンの内側の余白を増やす */
    color: #27210f; /* ボタンの文字色
      border: none; /* ボタンの枠線を消す */
    border: none;
    border-radius: 5px 5px 0 0; /* 上部分だけ角を丸くする */
    cursor: pointer; /* マウスオーバー時にポインターを表示 */
    margin-top: 50px;
  }

  .tab-content {
    height: 430px;
  }

  #news p {
    line-height: 2; /* 行間を広くする */
    font-size: 0.9em;
    margin: auto;
    text-align: justify;
  }

  #news {
    width: 90%;
    margin: 20px auto;
    height: auto;
  }
  #important-notice {
    width: 90%;
    margin: 20px auto;
    height: auto;
  }

  .notice {
    position: relative; /* アニメーション用に相対位置を指定 */
    overflow: hidden; /* アニメーションがはみ出さないようにする */
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #f76c6c;
    text-align: center;
    background: none;
    height: 100px;
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-style: normal;
    margin-top: 18px;
    margin-bottom: 0px;
  }
  .notice::after {
    bottom: 30px; /* アンダーラインの位置 */
  }

  .notice-list {
    width: 100%;
    padding: 10px;
    height: 400px;
    border: 1px solid #000;
    border-radius: 5px;
  }

  .notice-list p {
    padding: 10px 10px;
    line-height: 1.5; /* 行間を広くする */
    font-size: 1.2em;
    margin: auto;
    text-align: justify;
    color: #27210f;
  }

  a.button-link {
    padding: 8px 8px;
    font-size: 14px;
  }

  #departments h2 {
    font-size: 2.5em;
    margin-top: 18px;
    margin-bottom: 0;
  }

  #departments h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 100%;
    height: 3px;
    background: #f76c6c;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
    border-radius: 10px;
  }

  #departments {
    width: 100%;
    margin: 20px auto;
  }
  .department-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .department {
    width: 100%;
    height: auto;
    padding: 10px; /* 内側の余白を調整 */
  }

  .department p:first-of-type {
    font-size: 1.2em; /* 学部名の文字サイズを縮小 */
    line-height: 1.4; /* 行間を調整 */
    text-align: center; /* 中央揃え */
  }

  .department p:last-of-type {
    font-size: 0.9em; /* 説明文の文字サイズを縮小 */
    line-height: 1.6; /* 行間を調整 */
    text-align: justify; /* 左右両端揃え */
    overflow-wrap: break-word; /* 長い単語を折り返し */
    word-break: break-word; /* はみ出し防止 */
  }

  .department a {
    font-size: 0.9em; /* リンクの文字サイズを調整 */
    position: static; /* スマホでは絶対位置を解除 */
    margin-top: 10px; /* 上部に余白を追加 */

    text-align: center; /* 中央揃え */
  }

  footer {
    font-size: 14px;
  }

  #footer-inner {
    width: 95%;
    height: auto;
  }
  .footer-top {
    height: auto;
    padding: 20px;
    font-size: 15px;
  }

  #footer-inner {
    width: 95%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .footer-bottom .logo {
    max-width: 200px; /* 必要に応じて変更 */
    width: 50%;
    height: auto;
    display: block;
    margin: 0 auto 12px;
  }

  .footer-right {
    text-align: center;
    margin-top: 20px;
    font-size: 1em;
    color: #271d0f;
  }

  .footer-top {
    height: auto;
    padding: 20px;
    font-size: 15px;
  }

  #footer-inner span {
    margin-left: 0; /* 左のマイナスマージンを打ち消す */
    margin-top: 0; /* 上マージンも調整 */
    display: block; /* インライン要素であればブロック化 */
    text-align: center; /* テキストを中央寄せ */
    font-size: 0.8em;
  }
  .social-icons {
    margin-bottom: 16px;
  }
  .social-icons a {
    margin: 0 5px;
    display: inline-block;
  }
  .social-icons img {
    width: 40px;
    height: 40px;
  }

  /* スクロールトップボタンや他の要素も必要に応じて微調整 */
  .scroll-to-top {
    width: 60px;
    height: 60px;
    font-size: 12px;
  }
}