@charset  "utf-8" ;




/* -----------------------------------------------------------
   ビジュアルエリア（.school-k, .requirements）のカード風装飾
   ----------------------------------------------------------- */
.school-k,
.requirements {
  width: 80%;
  min-height: 240px; /* 一時的な枠確保用（コンテンツが入れば自動で伸びます） */
  background-color: var(--color-white);
  border: 1px solid var(--color-white);
  
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



/* ホバー時にカードをふわっと浮かせる演出 */
@media (hover: hover) {
  .school-k:hover,
  .requirements:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  }
}

/* ===========================================================
   新規書き換え
   =========================================================== */
.school-k {
  width: 100%;
  max-width: 240px; /* ★ここで箱自体の最大幅を制限（デカすぎ防止。数値はお好みで！） */
  margin: 0 auto 24px; /* とりあえず中央に置いておく */
  
  /* ★パディングで箱の内側に余白を作る＝画像がさらに一回り小さくなる */
  padding: 40px; 

  background-color: var(--color-white);
  border: 1px solid var(--color-white);
  /* その他 box-shadow などはそのまま */
}

/* 中の画像は親に従うだけ */
.school-k img {
  width: 100%;
  height: auto;
  display: block;
}

/* website.htmlのh2のみ変更したい */
section h2 {

  margin-top: 50px;
  margin-bottom: 30px;
  letter-spacing:0.05em;
}

/* PC向け（768px〜） */
@media (min-width: 768px), (orientation: landscape){
  /* logoボタンの箱のサイズ */
  .school-k {
    max-width: 350px;
  }
}

/* 共通cssで指定しているが、website用に書き換え調整 */
.content-area {
  padding: 0 15px;
}

/* -----------------------------------------------------------
   説明テキストエリア (.explain-box) の装飾
   ----------------------------------------------------------- */
.explain-box {
  padding: 0 8px;
}
/* Webサイト：スクールKの部分だけh2の中で少し小さくしたかった */
.school-box.js-bg-black h2{
  font-size: clamp(1.75rem, 1.684rem + 0.281vw, 2rem);
}


/* サブテキスト・解説文 */
.web-site-sub,
.require-sub {
  color: var(--color-text-sub);
  font-size: 0.9375rem; /* 15px相当 */
  line-height: 1.8;
  margin-top: 8px;
}

.content-sub{
  padding: 0 20px;
}


/* ベース（スマホ向け）：段落ごとの下余白設定 */
.web-site-sub p {
  margin-bottom: 20px; /* スマホ時の段落間の空き */
}
.require-sub p{
  margin-bottom: 20px; /* スマホ時の段落間の空き */
}

/* 最後の段落だけは下に余白を作らない */
.web-site-sub p:last-child {
  margin-bottom: 0;
}
.require-sub p:last-child {
  margin-bottom: 0;
}
/* PC向け（768px〜）：余白を詰める */
@media (min-width: 768px), (orientation: landscape) {
  .web-site-sub p {
    margin-bottom: 10px; /* PCでの段落間の空き（お好みで調整） */
  }
   .require-sub p {
    margin-bottom: 10px; /* PCでの段落間の空き（お好みで調整） */
  }
}
/* -----------------------------------------------------------
   PCレイアウト（768px~）：2カラムで並べたい場合のオプション
   ----------------------------------------------------------- */


/* -----------------------------------------------------------
   スライドショー(section class="requirements-area js-bg-white" ) の装飾
   ----------------------------------------------------------- */

/* Swiperコンテナのスタイリング */
.swiper {
    width: 100%;
    max-width: 800px; /* スライド表示の最大幅（お好みで調整） */
    margin: 0 auto 30px; /* 中央寄せ ＋ 下の解説ボックスとの余白 */
    height: auto;
    border-radius: 8px; /* スライドの角を少し丸く見せる場合 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* ほんのり影をつける */
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 矢印やドットの色指定（ディープネイビー等に合わせる場合） */
.swiper-button-next,
.swiper-button-prev {
    color: #df8138; /* ブランドカラー等に変更可能 */
}

.swiper-pagination-bullet-active {
    background-color: #888888;
}