@charset "utf-8";

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

body {
  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;
  line-height: 1;
  color: #333;
  background-image: url(images/bg.svg);
  background-size: cover; /* 追加: 背景画像をウインドウに合わせて拡大 */
  overflow-x: hidden; /* 追加: 横スクロールを防ぐ */
  height: auto; /* ページ全体の高さを設定 */
}

header {
  background-color: #a6e3e9;
  overflow: hidden;
  background-image: none;
  position: fixed; /* 画面上部に固定 */
  top: 0; /* 上端に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 画面幅全体に広げる */
  z-index: 400; /* 他の要素より上に配置 */
  height: 160px; /* ヘッダーの高さを固定 */
}
#header_logo {
  float: left;
  margin-top: 10px; /* ロゴを左寄せ */
}
#header_inner {
  width: 1200px;
  height: 160px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

header h1 {
  margin: 0;
}

.search-box {
  float: right;
  margin-top: 29px;
  margin-bottom: 88px;
}

#search-input {
  width: 181px;
  height: 32px;
  border: 1px solid #ccc;
  border-right: none; /* ボタンとつなげる */
  border-radius: 5px 0 0 5px; /* 左側だけ丸める */
  margin-bottom: 4px;
}

#search-button {
  width: 109px;
  height: 32px;
  background-color: #ffc75f;
  border: 1px solid #ccc; /* inputと同じボーダーを設定 */
  border-left: none; /* inputとつなげる */
  border-radius: 0 5px 5px 0; /* 右側だけ丸める */
  cursor: pointer;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

nav {
  clear: both;
  float: right;
  margin-top: -79px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 6px;
  display: inline-flex;
  gap: 60px;
}

nav ul li {
  font-size: 24px;
  font-family: "Kiwi Maru", serif;
  color: #5c4d24;
}

header nav ul li a {
  color: #5c4d24; /* リンクのテキストカラーを設定 */
  text-decoration: none; /* 下線を削除 */
}
header nav ul li a:hover {
  color: #ff6f91; /* ホバー時の色（任意で変更） */
}

/* ヒーローコンテンツ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(0 0 100px 0);
  border: 0;
}
.hero-slider {
  position: relative; /* 画像とテキストを重ねるために必要 */
  width: 1200px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.hero-slider img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 画像を親要素にフィット */
}

/*--スライダーの位置とサイズ調整--*/
.slider {
  width: 70%;
  margin: 0 auto;
}

/*--------画像サイズ調整---------*/
img {
  width: 100%;
}

/*-----------height調整----------*/
.slick-slide {
  height: auto !important;
}

/*-----------矢印表示----------*/
.slick-next {
  right: 0 !important;
}
.slick-prev {
  left: 0 !important;
}
.slick-arrow {
  z-index: 2 !important;
}

.slick-prev::before,
.slick-next::before {
  content: ""; /* 矢印のコンテンツを空に */
  font-size: 60px !important; /* アイコンのサイズ */
  color: #fcfcfc !important;
  position: absolute; /* 絶対位置に設定 */
  top: 50%; /* 垂直中央揃え */
  transform: translateY(-50%); /* 中央揃えの補正 */
}
.slick-prev::before {
  left: -16px;
}
.slick-next::before {
  right: -16px; /* 必要に応じて位置を調整 */
}
.hero {
  position: relative;
  width: 100%; /* 画面幅に合わせる */
  max-width: 1200px; /* 最大幅を設定 */
  margin: 0 auto; /* 中央寄せ */
  margin-top: 160px; /* ヘッダーの高さに合わせる */
  z-index: 1; /* ヘッダーより下に配置 */
}

.cta-button {
  position: absolute;
  bottom: 20px;
  left: 95%;
  transform: translateX(-50%);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
  background: linear-gradient(135deg, #ec008c, #fc6767);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
  width: 110px;
  height: 110px;
  padding: 0;
  opacity: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s;
}
.cta-button a {
  color: #fff;
}
/* ... 既存のコード ... */
.cta-button::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
}

.cta-button:hover::before {
  animation: kiran 0.7s linear;
}

@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーニュース部分 */
#news {
  width: 1200px; /* 必要に応じて幅を設定 */
  height: 400px; /* 必要な高さを指定 */
  margin: 0 auto; /* 左右のマージンを自動にして中央寄せ */
  margin-top: 140px;
}
#news h2 {
  text-align: center;
}

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

.event-button {
  background-color: #ff6f91;
  color: white;
  border: none;
  padding: 5px 10px;
  margin-right: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.news-button {
  background-color: #a6e3e9;
  color: white;
  border: none;
  padding: 5px 10px;
  margin-right: 5px;
  border-radius: 5px;
  cursor: pointer;
}
/* ... 既存のスタイル ... */

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

.tab-all {
  background-color: #f9f871; /* すべてボタンの色 */
  position: relative;
}

.tab-all a {
  position: absolute;
  bottom: 10px; /* 下からの距離を指定 */
  right: 10px; /* 右からの距離を指定 */
  color: #27210f; /* リンクの文字色 */
  text-decoration: none; /* 下線を削除 */
  font-size: 1.2em; /* フォントサイズを調整 */
}

.tab-all a:hover {
  background-color: #ec008c;
}
.tab-news {
  background-color: #a6e3e9; /* ニュースボタンの色 */
}

.tab-events {
  background-color: #ff6f91; /* イベントボタンの色 */
}

.tab-content {
  background-color: #f9f871;
  border: 1px solid #000; /* 実線の色を指定 */
  border-radius: 5px; /* 角丸の半径を指定 */
  padding: 10px; /* 内側の余白を追加 */
  height: 645px;
  text-align: justify;
  position: relative;
}

.tab-content a {
  position: absolute;
  bottom: 16px;
  right: 16px;
  color: #27210f;
}
.tab-content a:hover {
  color: #ec008c;
}
#news_item {
  background-color: #a6e3e9;
}
#events {
  background-color: #ff6f91;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー重要なお知らせ部分 */
#important-notice {
  display: flex; /* フレックスボックスを使用 */
  flex-direction: column; /* 縦方向に配置 */
  justify-content: center; /* 垂直方向に中央揃え */
  align-items: center; /* 水平方向に中央揃え */
  width: 1200px; /* 必要に応じて幅を設定 */
  height: 600px; /* 必要な高さを指定 */
  margin: 0 auto; /* 左右のマージンを自動にして中央寄せ */
  margin-top: 437px;
  position: relative; /* 追加: 親要素に相対位置を指定 */
}

.notice {
  position: relative; /* アニメーション用に相対位置を指定 */
  overflow: hidden; /* アニメーションがはみ出さないようにする */
  font-size: 3.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;
}

.notice::after {
  content: "";
  position: absolute;
  left: 50%; /* 中央から開始 */
  bottom: 10px; /* アンダーラインの位置 */
  width: 100%;
  height: 3px; /* アンダーラインの高さ（太さ） */
  background: #f76c6c; /* アンダーラインの色 */
  transform: translateX(-50%) scaleX(0); /* 初期状態で線を非表示にする */
  transform-origin: center; /* アニメーションの開始位置を中央に設定 */
  transition: transform 0.3s ease; /* アニメーションの速度とイージング */
  border-radius: 10px; /* 両端を丸くする */
}

.notice:hover::after {
  transform: translateX(-50%) scaleX(1); /* ホバー時に線を表示する */
}

.notice-list {
  list-style-type: none;
  padding: 0;
  background-color: #fff;
  width: 1200px; /* 必要に応じて幅を設定 */
  height: 600px;
  border: 1px solid #000;
  border-radius: 5px;
}
.notice-list p {
  padding: 10px 10px;
  line-height: 2.5; /* 行間を広くする */
  font-size: 1.5em;
  margin: auto;
  text-align: justify;
  color: #27210f;
}

#important-notice a {
  display: inline-block;
  margin-top: 15px;
  color: #352469;
  text-decoration: none;
  position: absolute; /* 追加: 絶対位置を指定 */
  right: 16px; /* 追加: 右端からの距離を指定 */
  bottom: 16px; /* 追加: 下端からの距離を指定 */
}
#important-notice a:hover {
  color: #fff;
}

a.button-link {
  display: inline-block;
  background-color: #ffc75f;
  color: #000;
  padding: 20px 20px;
  border-radius: 36px;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

a.button-link:hover {
  background-color: #f58b92;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー学部案内 */

#departments {
  width: 100%;
  margin: 0 auto; /* センターに配置 */
  width: 1200px;

  margin-top: 253px;
  text-align: center; /* 子要素を中央に配置 */
  position: relative; /* 親要素を相対位置に設定 */
}
#departments .department p,
#departments .department a {
  text-align: left;
}

#departments h2 {
  display: inline-block;
  position: relative; /* アニメーション用に相対位置を指定 */
  overflow: hidden; /* アニメーションがはみ出さないようにする */
  font-size: 3.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;
}

#departments h2::after {
  content: "";
  position: absolute;
  left: 50%; /* 中央から開始 */
  bottom: 10px; /* アンダーラインの位置 */
  width: 100%;
  height: 3px; /* アンダーラインの高さ（太さ） */
  background: #f76c6c; /* アンダーラインの色 */
  transform: translateX(-50%) scaleX(0); /* 初期状態で線を非表示にする */
  transform-origin: center; /* アニメーションの開始位置を中央に設定 */
  transition: transform 0.3s ease; /* アニメーションの速度とイージング */
  border-radius: 10px; /* 両端を丸くする */
}

#departments h2:hover::after {
  transform: translateX(-50%) scaleX(1); /* ホバー時に線を表示する */
}

#departments-title .char1 {
  color: #ff6f91; /* 学 */
}

#departments-title .char2 {
  color: #ffc75f; /* 部 */
}

#departments-title .char3 {
  color: #a6e3e9; /* 案 */
}

#departments-title .char4 {
  color: #ff9671; /* 内 */
}

.department-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列に設定 */
  gap: 60px;
  grid-template-columns: repeat(
    auto-fill,
    minmax(300px, 1fr)
  ); /* カードを均等に並べる */
  margin: 0 auto; /* センターに配置 */
}

.department {
  position: relative;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  padding: 10px;
  border: 2px solid #000;
  width: 360px;
  height: 400px;
  transition: transform 0.3s ease; /* 追加: ホバー時の拡大効果 */
}

.department:hover {
  transform: scale(1.05); /* 追加: ホバー時の拡大効果 */
  animation: borderAnimation 0.6s infinite linear; /* 追加: 枠線アニメーション */
  background-image: repeating-linear-gradient(
      0deg,
      #049fff,
      #049fff 10px,
      transparent 10px,
      transparent 20px,
      #049fff 20px
    ),
    repeating-linear-gradient(
      90deg,
      #049fff,
      #049fff 10px,
      transparent 10px,
      transparent 20px,
      #049fff 20px
    ),
    repeating-linear-gradient(
      180deg,
      #049fff,
      #049fff 10px,
      transparent 10px,
      transparent 20px,
      #049fff 20px
    ),
    repeating-linear-gradient(
      270deg,
      #049fff,
      #049fff 10px,
      transparent 10px,
      transparent 20px,
      #049fff 20px
    );
  background-size: 3px calc(100% + 20px), calc(100% + 20px) 3px,
    3px calc(100% + 20px), calc(100% + 20px) 3px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
}

@keyframes borderAnimation {
  from {
    background-position: 0 0, -20px 0, 100% -20px, 0 100%;
  }
  to {
    background-position: 0 -20px, 0 0, 100% 0, -20px 100%;
  }
}

.department img {
  width: 160px;
  height: 160px;
  display: block; /* ブロック要素として扱う */
}

.department p {
  margin: 10px 0 0 0; /* 上に少しマージンを追加 */
  font-weight: bold;
}

.department p:first-of-type {
  font-size: 1.5em; /* 文字サイズを大きくする */
}
.department p:last-of-type {
  font-size: 1em; /* 文字サイズを大きくする */
  line-height: 1.8em; /* 行間を広げる */
  margin-top: 20px;
  color: #5c4d24;
}

.department a {
  font-size: 1.5em; /* 文字サイズを大きくする */
  position: absolute; /* 絶対位置を設定 */
  bottom: 30px; /* 下からの距離を設定 */
  left: 10px; /* 左からの距離を設定 */
  text-decoration: none; /* 下線を消す */
  display: flex; /* アイコンとテキストを横並びにする */
  align-items: center; /* アイコンとテキストを中央揃え */
  color: #271d0f;
}

.department a:hover {
  color: #ff6f91; /* ホバー時の文字色 */
}

.department a::before {
  content: "➔"; /* 矢印アイコンを追加 */
  display: inline-block;
  width: 24px; /* 円の直径 */
  height: 24px; /* 円の直径 */
  background-color: #ffffff; /* 円の背景色 */
  color: #000; /* 矢印の色 */
  border-radius: 50%; /* 円形にする */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px; /* テキストとの間にスペースを追加 */
  border: 2px solid #000; /* 枠線を追加 */
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーフッターーーーーーーーーーーーーー */
/* フッターの全体スタイル */
footer {
  font-family: "Kiwi Maru", serif;
  background-image: none;
}

/* 黄色のフッター部分 */
.footer-top {
  position: relative;
  background-color: #f9f871;
  text-align: center;
  margin: 0 auto;
  margin-top: 300px;
  padding: 20px;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
  box-sizing: border-box;
  color: #333;
  height: 300px;
}

.footer-top span {
  margin-top: 30px; /* 上に配置するためのマージン */
  font-size: 1.3em;
  color: #4b3311;
}
.footer-top span:hover {
  color: #faa506;
}
.footer-top:hover {
  animation: fluffy 0.8s linear 0s 1; /* ホバー時にアニメーションを適用 */
  border-radius: 100% 100%0 0; /* ホバー時に角を丸くする */
  cursor: pointer;
}

@keyframes fluffy {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  15% {
    transform: scale(0.9, 0.9) translate(0%, 5%);
  }
  30% {
    transform: scale(1.3, 0.8) translate(0%, 10%);
  }
  50% {
    transform: scale(0.8, 1.3) translate(0%, -10%);
  }
  70% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}

/* 青色のフッター部分 */
.footer-bottom {
  background-color: #a6e3e9;
  padding: 15px 30px;
  color: #ffffff;
  height: 100%;
}

/* フッター内のレイアウトを縦方向に変更 */
#footer-inner {
  width: 1200px;
  height: 160px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center; /* 中央揃え */
}

/* ロゴのスタイル */
.footer-bottom .logo {
  width: 524px;
  height: 123px;
  display: block;
  margin-bottom: 12px;
}

#footer-inner span {
  margin-left: -462px;
  margin-top: 119px;
  color: #5c4d24;
  font-size: 1em;
}
/* フッター右側のスタイル */
.footer-right {
  text-align: center;
  margin-top: 67px; /* SNS部分を下に配置 */
  margin-left: auto; /* 追加: 右寄せにするために追加 */
  margin-right: auto;
  font-size: 1.5em;
  color: #271d0f;
}

/* SNSアイコンのスタイル */
.social-icons {
  margin-bottom: 16px;
}
.social-icons a {
  margin: 0 5px;
  display: inline-block;
}
.social-icons img {
  width: 80px;
  height: 80px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーースクロールトップボタン */
.scroll-to-top {
  position: fixed; /* 固定位置にする */
  bottom: 20px; /* 下からの距離 */
  right: 20px; /* 右からの距離 */
  border: none;
  border-radius: 50%; /* 丸いボタンにする */
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  background: linear-gradient(
    135deg,
    #ec008c,
    #fc6767
  ); /* ピンクのグラデーションを追加 */
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); /* ドロップシャドウを追加 */
  width: 90px; /* ボタンの幅を調整 */
  height: 90px; /* ボタンの高さを調整 */
  padding: 0; /* パディングをリセット */
  opacity: 1;
  overflow: hidden;
  transition: background 0.3s ease, transform 0.3s ease; /* 追加: ホバー時のトランジション */
}

.scroll-to-top .arrow {
  font-size: 16px; /* 矢印のサイズ */
  margin-bottom: 5px; /* 矢印と文字の間のスペース */
}
.scroll-to-top:hover {
  background: linear-gradient(
    135deg,
    #fc6767,
    #ec008c
  ); /* 追加: ホバー時の背景色の変更 */
  transform: scale(1.1); /* 追加: ホバー時の拡大効果 */
}
.scroll-to-top::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
}

.scroll-to-top:hover::before {
  animation: kiran 0.7s linear;
}

@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}