
.bg-primary {
  background-color: #996037 !important;
}

.map-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}



hr.cor {
  background-color: white !important;
}



.wcor {
  color: white !important;
}



table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
  font-size: 16px;
  /* 文字サイズを大きく */
  font-weight: bold;
  /* 文字を太く */
}

th {
  background-color: #f2f2f2;
}




.image-container {
  display: flex;
  justify-content: center;
  /* 水平方向の中央揃え */
  align-items: center;
  /* 垂直方向の中央揃え */
  height: 100%;
  /* 必要に応じて高さを調整 */
}



.tuition-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}


.fs80 {
  font-size: 80%;
}



.table-container {
  margin-right: 1rem;
  /* 必要に応じてマージンを調整 */
}

@media (max-width: 640px) {

  th,
  td {
    font-size: 11px;
  }

  .fs-4 {
    font-size: 2.5rem !important;
  }

  .fs-2 {
    font-size: 1.3rem !important;
  }

  h4 {
    font-size: 1.5rem !important;

  }

  h5 {
    font-size: 0.8rem !important;

  }
}



#contact_aria {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}



.ring-icon img {
  width: 60px;
  height: 60px;
}



.medatu {
  font-size: 110%;
  font-weight: 700;
  color: rgb(4, 90, 219) !important;
}



.medatu2 {
  font-size: 40px;
  font-weight: 700;
  color: rgb(252, 123, 2) !important;
}


.text-left {
  text-align: left;
}



.upicon {
  width: 30px;
  height: 30px;
  margin-right: 8px;
}

/* 上に戻るボタンのスタイル */
#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background-color: #965825;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
}



.horizontal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style-type: none;
  padding: 0;
}

.horizontal-list li {
  margin-right: 10px;
}

.text-white {
  color: white;
}

.mb-3 {
  margin-bottom: 1rem;
}


.low-hight {
  padding-top: 3.5rem !important;
  padding-bottom: 2.0rem !important;

}








.logo-container {
  position: absolute;
  bottom: 50px;
  right: 50px;
}

.logo {
  width: 400px; /* ロゴのサイズを調整します */
  transition: transform 0.3s ease-in-out;
}

.logo-container:hover .logo {
  animation: bounceIn 1s ease-in-out;
}

@media (max-width: 700px) {
  .logo {
    width: 260px; /* ロゴのサイズを調整します */
  }
  .logo-container {
    position: absolute;
    bottom: 0px;
    right: 10px;
  }
}

@keyframes bounceIn {
  0%, 100% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  80% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}


/* .card {
  transform: scale(0.75);
  transform-origin: top center;
  max-width: 85%;
  margin: 0 auto;
}*/


.card-img-top,
.card .center.slide {
  height: 260px;
  overflow: hidden;
  border-radius: 0.5rem 0.5rem 0 0;
}

.card .center.slide img {
  height: 260px;
  object-fit: cover;
  border-radius: 0.5rem 0.5rem 0 0;
}

.card-img-top {
  border-radius: 0.5rem 0.5rem 0 0;
}




/* ==========================================
   スライド
   ========================================== */












/* ==========================================
   講師紹介カードの文字をやわらかく親しみやすく
   ========================================== */
.card.h-100 .card-body {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.card.h-100 .card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  line-height: 1.35;
}

.card.h-100 .card-subtitle {
  font-size: 1rem;
  font-weight: 500;
  color: #555;
  margin-bottom: 0.8rem;
}

.card.h-100 .card-text {
  font-size: 0.95rem;
  line-height: 1.7;   /* ← やわらかさのポイント */
  color: #444;
}

/* スマホで文字が詰まらないように */
@media (max-width: 640px) {
  .card.h-100 .card-text {
    font-size: 0.9rem;
    line-height: 1.65;
  }
}

/* イラスト3人（正方形系） */
.card-img2-top.square {
  display: block;
  margin: 0 auto;
  width: auto;
  height: 180px;     /* ← バランス良く小ぶりに */
  object-fit: contain;
}

/* スマホ微調整 */
@media (max-width: 640px) {
  .card-img2-top.square {
    height: 140px;
  }
}


/* 講師紹介文（得意科目・趣味など）を中央揃えに */
.card.h-100 .card-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #444;
  text-align: center;   /* ← ここを追加 */
}


@media (max-width: 640px) {
  .card.h-100 .card-text {
    font-size: 0.9rem;
    line-height: 1.65;
    text-align: center;
  }
}


/* ===============================
   講師写真を背景含めて広めに表示（Cタイプ・最終版）
   =============================== */

.card-img2-top {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 260px;     /* ← 横幅を揃える */
  height: auto;         /* ← 本来の比率を保つ */
  object-fit: contain;  /* ← 背景を切らずに見せる */
  border-radius: 8px;   /* ← 優しい印象 */
}

/* スマホ時の最適化 */
@media (max-width: 640px) {
  .card-img2-top {
    max-width: 200px;
  }
}


/* ===============================
   講師写真の見た目サイズを完全に揃える（Cタイプ統一）
   =============================== */

.card-img2-top {
  display: block;
  margin: 0 auto;
  width: 100%;
  /*height: 260px;       /* ← 枠の高さを固定する（ここで揃う） */
  object-fit: contain; /* ← 背景も見せる・切らない */
  background-color: #fafafa; /* ← 背景を優しく整える（任意） */
  border-radius: 8px;
}

/* スマホ時 */
@media (max-width: 640px) {
  .card-img2-top {
    height: 200px;
  }
}


/* 講師画像サイズを完全統一 */
.card-img2-top {
  width: 100%;        /* ← 50% は消す！ */
  /*height: 260px;      /* ← 全員同じ高さに揃えるポイント */
  object-fit: contain; /* ← 背景を含めて切り取らない */
  display: block;
  margin: 0 auto;
  background-color: #fafafa; /* 優しい背景（任意） */
  border-radius: 8px;
}

/* スマホ */
@media (max-width: 768px) {
  .card-img2-top {
    height: 200px;
  }
}


/* =========================
   スライド最終完全版（枠固定・中身のみ移動）
   ========================= */

.slide {
  overflow: hidden;
  width: 100%;
  height: 260px;
  position: relative;
}

.center.slide {
  display: flex;
  width: 700%;              /* 画像7枚分 */
  animation: slide-move 30s linear infinite;
}

.center.slide img {
  width: 14.285%;
  height: 260px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.center.slide {
  display: flex;
  width: 700%;              /* 画像7枚分 */
  animation: slide-easeout 60s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}



@keyframes slide-easeout {
  /* 1枚目 */
  0%   { transform: translateX(0); }
  11%  { transform: translateX(0); }

  /* 2枚目 */
  16%  { transform: translateX(-14.285%); }
  27%  { transform: translateX(-14.285%); }

  /* 3枚目 */
  32%  { transform: translateX(-28.57%); }
  43%  { transform: translateX(-28.57%); }

  /* 4枚目 */
  48%  { transform: translateX(-42.855%); }
  59%  { transform: translateX(-42.855%); }

  /* 5枚目 */
  64%  { transform: translateX(-57.14%); }
  75%  { transform: translateX(-57.14%); }

  /* 6枚目（しっかり長く停止） */
  80%  { transform: translateX(-71.425%); }
  93%  { transform: translateX(-71.425%); }

  /* 7枚目へ 超ゆっくり移動 */
  100% { transform: translateX(-85.714%); }
}


/* 左コンテナ：少し狭める（55%） */
/* 左コンテナ：幅55%で中央寄せ */
.row > .col-md-6:first-child {
  flex: 0 0 55%;
  max-width: 55%;
  margin-left: auto;
  margin-right: auto;
}


/* 右コンテナ：しっかり細く（30%） */
.row > .col-md-6:last-child {
  flex: 0 0 30%;
  max-width: 30%;
  display: flex;
  justify-content: center;
}

/* 右のカード自体をさらに少しだけ細く */
.row > .col-md-6:last-child .card {
  width: 90%;
  margin: 0 auto;
}

/* スマホでは縦並びに戻す */
@media (max-width: 768px) {
  .row > .col-md-6:first-child,
  .row > .col-md-6:last-child {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row > .col-md-6:last-child .card {
    width: 100%;
  }
}


/* =========================
   お知らせカード：スライド＆画像の縦幅を拡張（正しく適用）
   ========================= */

/* 左スライド枠 */
.section.bg-100 .slide {
  height: 360px;
  overflow: hidden;
}

/* 左スライド画像 */
.section.bg-100 .center.slide img {
  height: 360px;
  object-fit: cover;
}

/* 右カード画像 */
.section.bg-100 .card-img-top {
  height: 360px;
  object-fit: cover;
}

/* スマホ */
@media (max-width: 768px) {
  .section.bg-100 .slide,
  .section.bg-100 .center.slide img,
  .section.bg-100 .card-img-top {
    height: 240px;
  }
}


.row.g-4 .slide {
  height: 360px;
  overflow: hidden;
}

.row.g-4 .center.slide img {
  height: 360px;
  object-fit: cover;
}

.row.g-4 .card-img-top {
  height: 360px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .row.g-4 .slide,
  .row.g-4 .center.slide img,
  .row.g-4 .card-img-top {
    height: 240px;
  }
}


/* =========================
   お知らせ：右テキスト高さを左に完全一致させる
   ========================= */

/* 左右カラムを高さ揃え */
.section.bg-100 .row {
  display: flex;
  align-items: stretch;
}

/* 右カラム内のカードを縦いっぱいに */
.section.bg-100 .row > .col-md-6:last-child .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 右カードのテキスト部分を下まで伸ばす */
.section.bg-100 .row > .col-md-6:last-child .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上寄せ */
}


/* =========================
   お知らせ：左右カードの底辺を完全一致させる（HTML構造対応）
   ========================= */

/* 行を高さ揃えのFlexに */
.bg-100 .row.g-4 {
  display: flex;
  align-items: stretch;
}

/* 左右カラム内のカードをフルハイト化 */
.bg-100 .row.g-4 > .col-md-6 > .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 右カードのテキストを下まで押す */
.bg-100 .row.g-4 > .col-md-6:last-child .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上詰め */
}

/* 左カードのテキストも同じく伸ばす（安全用） */
.bg-100 .row.g-4 > .col-md-6:first-child .card-body {
  flex: 1;
}


/* =========================
   お知らせ：左右カードのテキスト縦幅をコンパクトにする
   ========================= */

/* テキスト全体の上下余白を縮める */
.bg-100 .row.g-4 .card-body {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* タイトル下の余白を縮める */
.bg-100 .row.g-4 .card-body h5 {
  margin-bottom: 0.3rem;
  line-height: 1.4;
}

/* 日付・空行の余白をゼロに近づける */
.bg-100 .row.g-4 .card-body .text-500 {
  margin-bottom: 0.2rem;
}

/* 本文の上マージンを削る（mt-3 が効きすぎているため） */
.bg-100 .row.g-4 .card-body .mt-3 {
  margin-top: 0.3rem !important;
  line-height: 1.55;
}



/* =========================
   お知らせ：本文の高さを「1行分」だけ補正して完全一致
   ========================= */

/* 日付が「空」のときだけ1行分の高さを確保する */
.bg-100 .row.g-4 .card-body .text-500:empty {
  min-height: 1.2em;
  display: block;
}


/* お知らせ：タイトルの高さを1行分で固定して本文の開始位置を揃える */
.bg-100 .row.g-4 .card-body h5 {
  min-height: 2.8em;   /* ← 日本語2行分を確保（1行なら下に余白） */
  display: flex;
  align-items: flex-start;
}


/* お知らせ：タイトルと本文の間隔を限界まで詰める */
.bg-100 .row.g-4 .card-body h5 {
   margin-bottom: 0 !important; }

.bg-100 .row.g-4 .card-body .mt-3 {
   margin-top: 0 !important; }



   .ayumi-vertical-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}
