html {
  /* ヘッダーの高さ（約70px〜80px）に合わせて調整してください */
  scroll-padding-top: 80px;
  scroll-behavior: smooth; /* スムーズスクロールも有効にする場合 */
}

/* Google Fontsのインポート 

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,200;1,14..32,200&family=M+PLUS+1p&family=Noto+Serif+JP:wght@200..900&display=swap');*/

/* フォント：roboto（通常ウェイト） */
.inter-200 {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

/* フォント：m-plus-1p（4ウェイト） */
.m-plus-1p-light {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-1p-bold {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.m-plus-1p-extrabold {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 800;
  font-style: normal;
}
.noto-serif-jp-bold {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


  /* 基本設定（スマホなどの小さな画面用） */
  .logo-img {
    height: 30px; /* スマホでは少し控えめなサイズに */
    width: auto;
    transition: height 0.3s; /* サイズが変わる時に滑らかにする設定 */
  }

  /* タブレット・PC用（画面幅が768px以上の時）の設定 */
  @media (min-width: 768px) {
    .logo-img {
      height: 46px; /* PCでは大きく表示 */
    }
  }

/* 本文のベーススタイル */
body {
  font-size: 18px;
  line-height: 30px;
  font-family: "M PLUS 1p", sans-serif;
  background-color: #FFF;
}

/* h2見出しのスタイル */
h2 {
  font-size: 38px;
  line-height: 52px;
  margin: 2rem 0;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 600;
  font-style: normal;
}
h2.marugoto {
  font-size: 60px;
  line-height: 76px;
  margin: 0rem;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 300;
  font-style: normal;
}
h2.s-title {
  font-size: 28px;
  line-height: 36px;
  margin: 0.75rem 0;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  font-style: normal;
}
h2.s-title span {
  font-size: 60px;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

h3.fukidashi {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 1100px;
  margin-bottom: 40px;
  padding: 16px;
  border-radius: 20px;
  background-color: #fff;
  text-align: center;
  font-size: 28px;
  line-height: 36px;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
}

h3.fukidashi::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 35px 15px 0 15px;
  border-color: #fff transparent transparent;
  transform: translate(-50%, 100%); /* translateプロパティよりtransformの方が互換性が高いです */
}

/* h3見出しのスタイル */
h3 {
  font-size: 28px;
  line-height: 32px;
  margin: 1.5rem 0;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}
h3 span.profile_t { font-size: 1.35rem; }
p.caption { font-size: 1rem; }
p.voicenushi { font-size: 1.3rem; }
p.staff01 { font-size: 1.5rem; }
p.staff02 { font-size: 1.15rem; }
p.staff03 { font-size: 1rem; line-height: 1.6rem; }

/* 白文字用のユーティリティクラス */
.color-white { color: #fff; }

/* 最大幅1100pxに制限したコンテナ */
.container { max-width: 1100px; }

/* Bootstrap Icons */
.icon-link > .bi {
  width: 0.75em;
  height: 0.75em;
}

/* ヘッダー */
.site-header {
  background-color: rgba(157, 195, 103, 1);
  -webkit-backdrop-filter: saturate(100%) blur(20px);
  backdrop-filter: saturate(100%) blur(20px);
}
.site-header a {
  color: #8e8e8e;
  transition: color .15s ease-in-out;
}
.site-header a:hover {
  color: #fff;
  text-decoration: none;
}


/* ハンバーガーメニューを正方形にする設定 */
.custom-toggler {
  width: 60px !important;   /* 幅を固定（高さに合わせる） */
  height: 60px !important;  /* 高さを固定 */
  padding: 0 !important;    /* 余計な隙間を消す */
  display: flex !important;
  align-items: center;      /* 三本線を上下中央に */
  justify-content: center;   /* 三本線を左右中央に */
  margin: 0 !important;     /* 外側の余白をゼロにする */
  border: none !important;  /* 枠線を消す */
  outline: none !important; /* アウトラインを消す */
}

/* クリック時・フォーカス時に枠線が出ないようにする設定 */
.custom-toggler:focus,
.custom-toggler:active,
.custom-toggler:focus-visible {
  outline: none !important;
  box-shadow: none !important; /* これが枠線の正体（影）を消します */
  border: none !important;
}

/* 三本線アイコン自体のサイズ（お好みで調整） */
.navbar-toggler-icon {
  width: 30px;
  height: 30px;
}


/* フレックス等幅 */
.flex-equal > * { flex: 1; }

/* ナビゲーションアイコン */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/*
.btn-close {
  width: 1.5rem;
  height: 1.5rem;
  background-size: 1.5rem;
  background-color: transparent;
  border: none;
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='1' y1='1' x2='15' y2='15' stroke='white' stroke-width='2.5'/%3E%3Cline x1='15' y1='1' x2='1' y2='15' stroke='white' stroke-width='2.5'/%3E%3C/svg%3E");
}
*/
.btn-close {
  /* サイズ固定（小さめに設定） */
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  
  /* 背景を白、不透明度を100%に強制 */
  background-color: #ffffff !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  
  /* バツ印の設定：グレー(#666)のアイコンを指定 */
  background-size: 10px !important;
  background-position: center !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") !important;

  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin-right: 5px; /* 右端に寄りすぎないための調整 */
}

/* ホバー時の効果 */
.btn-close:hover {
  background-color: #f0f0f0 !important;
  opacity: 0.9 !important;
}



/* オフキャンバス */
.offcanvas {
  height: auto !important;
  max-height: none;
  top: auto;
  bottom: auto;
}
.offcanvas-backdrop {
  background-color: rgba(0, 0, 0, 0) !important;
}

/* アニメーション */
.animate-on-scroll { opacity: 0; }
.animate-on-scroll.animate__animated { opacity: 1; }

/* ロゴ */
.logo-img {
  height: 30px;
  width: auto;
  transition: height 0.3s;
}


/* メインボタン */
.mainimage-btn {
  background: #FB5;
  color: #fff;
  margin: 8px 0;
  padding: 8px 20px;
  font-size: 18px;
  border: solid 3px #FFF;
  text-decoration: none;
  border-radius: 50px;
  width: 100%;
  position: relative;
  display: inline-block;
  transition: opacity .5s; /* 記述を整理しました */
}
@media (min-width: 768px) {
.mainimage-btn {
    padding: 16px 40px;
    font-size: 24px;
border: solid 4px #FFF;
  }

}




.mainimage-btn:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}
.mainimage-btn:hover { opacity: .3; }

/* 背景画像 */
.backimage01 {
  background-image: url(../../images/backimage01.webp);
  background-size: cover;
  background-position: center;
}
.backimage02 {
  background-image: url(../../images/backimage02b.webp);
  background-size: cover;
  background-position: bottom;
}

/* フッター */
.footer { text-align: center; padding: 16px; }
.footer a { color: #808080; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .menu {
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.footer .menu li { margin: 0; padding: 0 20px; border-right: 1px #808080 solid; }
.footer .menu li:last-child { border: none; }

/* お知らせ */
.news-list {
  list-style: none;
  padding: 0;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
.news-item {
  border-bottom: 1px solid #ccc;
  padding: 15px 15px;
  display: flex;
  flex-direction: column;
  background-color:#FFF;
}
.news-item:first-child {
  border-top: 1px solid #ccc;
}
.news-item2 {
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  text-align:right;
}
.news-date { font-weight: bold; color: #333; margin-bottom: 5px; }
.news-content { display: flex; gap: 10px; align-items: flex-start; }
.news-category {
  font-size: 0.75rem;
  padding: 2px 8px;
  background: #9dc367;
  color: #fff;
  border-radius: 4px;
  white-space: nowrap;
}

section.marugoto {
  background-color: #FFF;
  background-image: url(../../images/marugoto.svg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;

}
.kazari-marugoto{  padding-top: 120px;}

/* --- メディアクエリ（PC/タブレット用: 768px以上） --- */
@media (min-width: 768px) {
  h3.fukidashi {
    font-size: 46px;
    line-height: 60px;
    padding: 32px;
  }
  .flex-md-equal > * { flex: 1; }
  .logo-img { height: 46px; }

  .news-item {
    flex-direction: row;
    align-items: center;
  }
  .news-date {
    flex-basis: 150px;
    flex-shrink: 0;
    margin-bottom: 0;
  }

.kazari-marugoto{padding-top: 350px;}
h2.s-title {
  font-size: 40px;
  line-height: 54px;
margin: 2rem 0;
}
h2.s-title span {
  font-size: 90px;
}
}

/* --- メディアクエリ（スマホ用: 767px以下） --- */
@media (max-width: 767px) {
  .backimage01 {
    background-image: url(../../images/backimage01b.webp);
    background-position: bottom;
  }
  .backimage02 {
    background-image: url(../../images/backimage02b.webp);
    background-size: contain;
    background-position: bottom;
    background-repeat: repeat-y;
  }

}

/* --- メディアクエリ（さらに小さいスマホ用: 599px以下 / 576px以下） --- */
@media (max-width: 599px) {
  .footer .menu { justify-content: flex-start; }
  .footer .menu li { width: 50%; box-sizing: border-box; border: none; }
  .footer .menu li:nth-child(odd) { border-right: 1px #808080 solid; }
}

@media (max-width: 576px) {
  body { font-size: 16px; line-height: 28px; }
  h2 { font-size: 32px; line-height: 42px; }
  h3 { font-size: 24px; line-height: 28px; }
  h3 span.profile_t { font-size: 1.15rem; }
  p.voicenushi { font-size: 1.0rem; }
  p.staff02 { font-size: 1.0rem; }
}

/* --- キャリアの設定 --- */

/* --- カード全体の共通設定 --- */
.career-card {
  background: #fff;
  border: 1px solid #eee;
  padding: 25px;
  margin-bottom: 30px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* --- カード内の見出し --- */
.card-heading {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 20px;
  border-left: 5px solid #2d5a27;
  padding-left: 15px;
}

/* --- 取得可能な資格（リスト形式・左寄せ維持） --- */
.qual-list {
  list-style: none;
  padding-left: 0;
  font-size: 1.25rem; /* ベースのサイズを維持 */
}

.qual-list li {
  margin-bottom: 8px;
  display: flex;           /* ●とテキストを分離 */
  align-items: flex-start; /* 改行しても●は1行目の横 */
  text-align: left;        /* 左寄せ */
  line-height: 1.4;
}

.qual-list li::before {
  content: "●";
  color: #333;
  margin-right: 10px;
  font-size: 0.7rem;
  flex-shrink: 0;          /* ●が潰れないように固定 */
  padding-top: 0.5em;      /* 1.25remの文字の高さに合わせる調整 */
}

/* --- 取得可能な資格（ボックス形式・左寄せ） --- */
.career-box2 {
  padding: 12px 15px;        /* 左右に少し余白を追加 */
  color: #333;
  height: 100%;
  display: flex;
  align-items: center;       /* 上下は中央 */
   justify-content: center;/* 左寄せに変更 */
  text-align:center;          /* 改行時も左寄せ */
  border-radius: 32px;
  background-color: #fff;
  font-size: 1.25rem;        /* 1.25remを維持 */
}


/* --- 卒業後の進路（ボックス形式・左寄せ） --- */
.career-box {
  border: 3px solid #8eb35d; /* 2pxを維持 */
  padding: 12px 15px;        /* 左右に少し余白を追加 */
  color: #333;
  height: 100%;
  
  display: flex;
  align-items: center;       /* 上下は中央 */
   justify-content: center;/* 左寄せに変更 */
  text-align:center;          /* 改行時も左寄せ */
  
  background-color: #fff;
  font-size: 1.25rem;        /* 1.25remを維持 */
}

/* 右下の「ほか」のテキスト */
.etc-text {
  text-align: right;
  margin-top: 10px;
  font-size: 1rem;
  color: #666;
}

/* --- キャンパス紹介の設定 --- */

/* --- キャンパスセクションの設定 --- */
.campus-section {
  position: relative;
  z-index: 1;
  background-color: #fff; /* 背景色：#fff */
  overflow: hidden;
}

/* --- 背景画像だけを透過30%にする（疑似要素を使用） --- */
.campus-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* 画像の指定 */
  background-image: url('../../images/canpus01.webp'); /* パスを合わせてください */
  background-attachment: fixed; /* スクロールしない仕様 */
  background-size: cover;
  background-position: center;
  
  /* 透過30% (透明度 0.3) */
  opacity: 0.3;
  z-index: -1; /* コンテンツの裏に配置 */
}

/* --- H2のデザイン調整 --- */
.s-title {
  position: relative;
  margin-bottom: 40px;
  font-weight: bold;
}
.s-title span {
  font-family: 'Arial Black', sans-serif;
  font-size: calc(3rem + 3vw);
  line-height: 1;
  display: inline-block;
  letter-spacing: -2px;
}



/* --- 紹介カードの設定 --- */
.campus-intro-card {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 40px;
  border: 1px solid #eee;
}

.campus-intro-title {
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.campus-intro-text {
  text-align: left;
  line-height: 1.8;
}
/* スマホ対応 */
@media (max-width: 767.98px) {
  .campus-section {
    background-attachment: scroll; /* iOS等の不具合防止のためスマホは固定解除推奨 */
  }
  .s-title span { font-size: 4rem; }
  .img-main { aspect-ratio: 16 / 9; }
}

/* --- 千曲市長 --- */
h3.chikumacity{
font-family: "Noto Serif JP", serif;
font-size: 38px;
line-height: 62px;
}
p.chikumacity{
font-family: "Noto Serif JP", serif;
}
@media (max-width: 767px) {
h3.chikumacity{
font-size: 28px;
line-height: 52px;
}

}

/* =================================================
   コース紹介セクション（Department）専用CSS
   ================================================= */

/* --- セクション全体の設定 --- */
.course-section {
  position: relative;
  margin-top: 4rem;
  text-align: left; 
}

/* --- コース名タイトル（38px） --- */
.course-tab {
  display: inline-block;
  color: #fff;
  font-size: 38px; 
  font-weight: bold;
  line-height: 1.1;
  padding: 12px 45px;
  border-radius: 20px 20px 0 0;
  margin-bottom: 5px; 
  position: relative;
  z-index: 2;
}

/* --- コースカード（背景：#FFF2c4） --- */
.course-card {
  background-color: #FFF2c4;
  border: 5px solid; /* 色は各コースのクラスで指定 */
  border-radius: 32px; 
  padding: 40px;
  position: relative;
  z-index: 1;
}

/* --- 吹き出しとリストのレイアウト（縦並び・文字拡大） --- */
.info-box {
  margin-top: 2rem;
}

.info-row {
  display: block; /* 2カラムを解除し縦並びに */
  margin-bottom: 30px;
}

/* 吹き出しラベル（文字を大きく、スリムに） */
.info-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  background-color: #9dc367;
  color: #fff;
  font-size: 22px; /* 文字を大きく */
  font-weight: bold;
  padding: 4px 20px;
  border-radius: 10px;
  margin-bottom: 15px; /* 下のリストとの間隔 */
}

/* 吹き出しの角（下向きに変更） */
.info-label::after {
  content: "";
  position: absolute;
  top: 100%; /* ラベルの下側に配置 */
  left: 30px; /* 左端から少し離す */
  border-style: solid;
  border-width: 12px 8px 0 8px; /* 下向きの三角形 */
  border-color: #9dc367 transparent transparent transparent;
}

/* リスト部分（文字を大きく） */
.info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0 10px; /* 少しインデント */
  /*font-size: 1.25rem;  文字を大きく */
}

.info-list li {
  position: relative;
  padding-left: 25px; /* 点との間隔を広げる */
  line-height: 1.5rem;
  margin-bottom: 8px;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: bold;
  font-style: normal;
  color: #333;
}

.info-list li::before {
  content: "●"; /* 点を少し強調 */
  position: absolute;
  left: 0;
  font-size: 1rem;
  top: 0.1em;
  color: #666;
}

/* --- その他のテキスト --- */
.course-catch {
  font-size: 1.8rem; /* 大きく */
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

.course-desc {
  font-size: 1.1rem; /* 大きく */
  line-height: 1.8;
  margin-bottom: 2rem;
}

/* --- カラー設定 --- */
.bg-agri, .border-agri, .label-agri, .bg-food, .border-food, .label-food { background-color: #9dc367; border-color: #9dc367; }
.text-agri-dark, .text-food-dark { color: #00A95F; }

/* --- レスポンシブ調整 --- */
@media (max-width: 767px) {
  .course-tab { font-size: 28px; padding: 10px 25px; }
  .course-catch { font-size: 1.4rem; }
  .info-label { font-size: 18px; min-width: 140px; }
  .info-list { font-size: 18px; }
}

/* =================================================
   協議会メンバー専用CSS
   ================================================= */

/* --- 協議会メンバーセクション 影なし・フラット設定 --- */
.collab-card {
  background-color: #fff;
  border: 4px solid #fff;
  border-radius: 15px;
  padding: 30px;
  height: 100%;
  box-shadow: none !important; /* 影を強制排除 */
}

.collab-quote {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.6;
  color: #333;
}
.collab-quote small {
  font-size: 1rem;
  font-weight: normal;
  color: #00A95F;
  margin-top: 10px;
}

.collab-photo img {
  width: 100%;
  max-width: 140px;
  border-radius: 8px;
}

.collab-company-name {
  font-size: 1.35rem;
  font-weight: bold;
  color: #00A95F;
  border-color: #f0f0f0 !important;
}

.collab-logo-img {
  max-height: 55px;
  width: auto;
}

.collab-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #444;
}

.collab-web-btn {
  background-color: #f1e6b3;
  color: #333;
  padding: 5px 25px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  box-shadow: none !important;
}

.collab-url {
  font-size: 0.85rem;
  color: #666;
  font-family: Arial, sans-serif;
}

/* スマホ表示の調整 */
@media (max-width: 767px) {
  .collab-card {
    text-align: center !important;
  }
  .collab-photo img {
    max-width: 180px;
    margin: 15px 0;
  }
  .collab-company-name {
    font-size: 1.2rem;
  }
  .collab-logo-img {
    margin: 20px 0;
  }
  .collab-desc {
    text-align: left; /* 文章だけは左寄せで見やすく */
  }
  .collab-footer {
    justify-content: center;
  }
}


/* =================================================
   農学部の概要専用CSS
   ================================================= */

/* お知らせ */
.outline-list {
  list-style: none;
  padding: 0;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
.outline-item {
  border-bottom: 1px solid #ccc;
  padding: 24px 24px;
  display: flex;
  flex-direction: column;
  background-color:#FFF;
font-size:20px;
}
.outline-item:first-child{
border-top: 1px solid #ccc;
}

.outline-date { font-weight: bold; color: #333; margin-bottom: 5px; }
.outline-content { display: flex; gap: 10px; align-items: flex-start; }

@media (min-width: 768px) {
  .outline-item {
    flex-direction: row;
    align-items: center;
  }
  .outline-date {
    flex-basis: 150px;
    flex-shrink: 0;
    margin-bottom: 0;
  }
}