@charset "utf-8";

/*-----------------------------------------
	▼リセット
-------------------------------------------*/


/*body{
	background:#fff;
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" ,Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#31313F;
	margin:0;
	padding:0;
	color:#444;
	line-height:1.8;
	font-size:14px;
}

h1,h2,h3,h4,h5,p{
	margin:0;
	padding:0;
}

ul,li{
	margin:0;
	padding:0;
	text-decoration:none;
	list-style:none;
}

img{
	border:none;
	margin:0;
	padding:0;
	vertical-align:top;
}

input, select{
	font-size:16px;
}

table{
	border-collapse: separate;
	border-spacing: 0px;
}

table,tr,td,th{
	padding:0;
	margin:0;
	border-collapse: separate;
}
*/


/* =================================================================
	
	バナーシステム用 20251101

==================================================================*/


/*----------------------------------
 New_banner用
 スペーサー
 ----------------------------------*/

.banner_spacer5 {
  height: 5px;
  width: 100%;
}

.banner_spacer10 {
  height: 10px;
  width: 100%;
}

.banner_spacer20 {
  height: 20px;
  width: 100%;
}

.banner_spacer30 {
  height: 30px;
  width: 100%;
}

.banner_spacer40 {
  height: 40px;
  width: 100%;
}



/*----------------------------------
 New_banner_large：PC用
 New_banner_medium：PC用
 右カラムバナー
-----------------------------------*/

.banner_unit_large-mudium{
	margin-bottom: 20px;
}


.banner_large ul,
.banner_medium ul {
  display: flex;
  flex-direction: column; /* 縦並びにする */
  align-items: center; /* 中央揃え */
  padding: 0;
  margin: 0;
}

.banner_large ul li,
.banner_medium ul li {
  /*width: calc(100% - 45px); /* 左右スペース調整用：40px = 20px + 20px */
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 15px; /* バナー間の間隔（調整OK） */
}


.banner_large li,
.banner_medium li {
  display: inline-block;
}

.banner_large a img,
.banner_medium a img {
  display: block;
  border-radius: 2px;
  transition: opacity 0.3s;
}

.banner_large a:hover img,
.banner_medium a:hover img {
  opacity: 0.85;
}



/*----------------------------------
 New_banner_large_freeschool：PC用
 New_banner_vplan：PC用
 New_banner_showcase_option：PC用
 無償校大バナー、
 Vプラン、
 ショーケースオプション（営業系バナー）
-----------------------------------*/


.banner_large_freeschool,
.banner_vplan,
.banner_showcase_option {
  background-color: #f6f6f6;  /*背景*/
  padding: 35px 0;
  width: 1040px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 50px;

}

.banner_large_freeschool ul,
.banner_vplan ul,
.banner_showcase_option ul {
  display: flex;              /* 横並び */
  justify-content: center;    /* 中央寄せ */
  align-items: center;
  gap: 50px;                  /* 各バナーの間隔 */
  list-style: none;           /* liのマーカーを消す */
  margin: 0;
  padding: 0;
}

.banner_large_freeschool li,
.banner_vplan li,
.banner_showcase_option li {
  display: inline-block;
}

.banner_large_freeschool a img,
.banner_vplan a img,
.banner_showcase_option a img {
  display: block;
  border-radius: 2px;
  transition: opacity 0.3s;
}

.banner_large_freeschool a:hover img,
.banner_vplan a:hover img,
.banner_showcase_option a:hover img {
  opacity: 0.85; /* ホバー時に少し暗く */
}


.banner_showcase_option_only_sp {
	display: none;
}


.banner_showcase_option_720{
	width: 720px;
}

.banner_showcase_option_720 ul {
  gap: 20px;                  /* 各バナーの間隔 */
}

/*----------------------------------
 New_banner_small：PC用
 フッターバナー
-----------------------------------*/

.banner_unit_small{
background: url(../images/footer_line.gif) repeat-x 0 top;

}

.banner_small {
  padding: 45px 20px 20px;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  box-sizing: border-box;
}

.banner_small ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.banner_small li {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.banner_small a img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  transition: opacity 0.3s;
}

.banner_small a:hover img {
  opacity: 0.85; /* ホバー時に少し暗く */
}

/* タブレット〜小型PC用フッターバナー調整 (2列) */
@media screen and (max-width: 900px) {
  .banner_small ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ用フッターバナー調整 (1列) */
@media screen and (max-width: 600px) {
  .banner_small {
    padding: 30px 15px 20px;
  }
  .banner_small ul {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}



/*----------------------------------
 New_banner_small_option：PC用
 小バナーオプション（説明会、入試カレンダー上部）
-----------------------------------*/


.banner_small_option {
  background-color: #f6f6f6; /* 背景グレー */
  padding: 25px 0;
  width: 1060px;
  margin: 0 auto;
  margin-bottom: 20px;
}

.banner_small_option ul {
  display: flex;              /* 横並び */
  justify-content: center;    /* 中央寄せ */
  align-items: center;
  gap: 20px;                  /* 各バナーの間隔 */
  list-style: none;           /* liのマーカーを消す */
  margin: 0;
  padding: 0;
}

.banner_small_option li {
  display: inline-block;
}

.banner_small_option a img {
  display: block;
  border-radius: 2px;
  transition: opacity 0.3s;
}

.banner_small_option a:hover img {
  opacity: 0.85; 
}




/*----------------------------------
 New_banner_small_float：PC用
 小バナーオプションフロート（無償校フロートバナー）
-----------------------------------*/

#banner_small_float { display:none !important; }

/* デフォルト：可視状態 */
#float-banner{
  position: fixed;
  right: max(60px, env(safe-area-inset-right) + 12px);
  bottom: max(30px, env(safe-area-inset-bottom) + 12px);
  z-index: 99999;
  width: min(336px, 92vw);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s ease-out, transform .35s ease-out; /* IN時 */
}

/* バナー本体 */
#float-banner .fb-card{
  position: relative;
  background:#fff;
  border-radius:2px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  overflow:hidden;
}
#float-banner .fb-card a,
#float-banner .fb-card img{
  display:block;
  width:100%;
  height:auto;
}

/* 右上“外側”クローズ */
#float-banner .fb-close{
  position:absolute;
  top:-38px; right:2px;
  width:32px; height:32px;
  border:none;
  border-radius:999px;
  background:#111;
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  font-size:18px;
  line-height:32px;
  cursor:pointer;
  transition: filter .25s ease;
}
#float-banner .fb-close:hover{ filter:brightness(0.9); }

/* ── 可視制御の正解パターン ── */
/* フェードアウト中（見えるが薄くなる） */
#float-banner.is-hiding{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .6s ease-in-out, transform .6s ease-in-out; /* OUT時 */
  pointer-events:none; /* 誤クリック防止 */
}

/* フェード完了後だけ display 的な不可視にする */
#float-banner.is-hidden{
  visibility:hidden;
}

/* 印刷時は出さない */
@media print{ #float-banner{ display:none !important; } }




/*----------------------------------
 New_banner_headline：PC用
 ヘッドライン
-----------------------------------*/

:root{
  --h: 60px;                       /* バー高さ */
  --duration: 700ms;               /* 降下速度 */
  --interval: 8400ms;              /* ローテ間隔（倍） */
  --easing: cubic-bezier(.22,.61,.36,1);
}

/* 土台（フルワイド） */
.headline_rotator{
  position: relative;
  width: 100%;
  height: var(--h);
  overflow: hidden;
}

/* フルワイドで降りるパネル（★背景は固定グラデに統一） */
.headline_rotator .panel{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: var(--h);
  background: linear-gradient(90deg,#e5effb 0%,#f0f6ff 100%);
  transform: translateY(0);
  transition:
    transform var(--duration) var(--easing),
    box-shadow var(--duration) ease,
    background 800ms ease-in-out;      /* ← hover時の色変化だけ */
  will-change: transform;               /* 安定化 */
  text-decoration: none;
  color: #377FE5 !important;
  text-decoration: none !important;
  box-shadow: none;                     /* 通常は影なし */
}


/* 本文だけに下線を付ける（従来の見た目を維持） */
.headline_rotator .panel .text{
  text-decoration: underline;
}

/* ★ロールオーバー時だけ背景を少し濃くフェード */
.headline_rotator .panel:hover{
  background: linear-gradient(90deg,#d5e5fa 0%,#e7f0ff 100%);
}

/* 内容枠：レスポンシブ（最大900px） */
.headline_rotator .panel__inner{
  height: 100%;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 15px;
}

/* アイコン */
.headline_rotator .icon{
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: url('/share/images/icon.svg') no-repeat center/contain;
}

/* ★文末タグ（NEW/PR） */
.headline_rotator .badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 6px;
  margin-left: 2px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .04em;
  color: #fff;
  background: transparent;
  text-decoration: none !important;  /* ← これを追加（親の下線を打ち消す） */
  flex-shrink: 0;
}
.headline_rotator .badge--new{ background: #E60028; } /* 赤 */
.headline_rotator .badge--pr { background: #000;    } /* 黒 */

/* 待機は画面外の“上” */
.headline_rotator .panel.is-above{ 
  transform: translateY(-100%);
}

/* 降下時のみ薄い影 */
.headline_rotator .panel.drop{
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}

/* 上に戻す瞬間はアニメ完全無効化（上がる動作ゼロ） */
.headline_rotator .panel.no-anim{
  transition: none !important;
  box-shadow: none !important;
}

.headline_rotator .slides{
  display:none;
}

@media (prefers-reduced-motion: reduce){
  .headline_rotator .panel{ transition: none; }
  .headline_rotator .panel.drop{ box-shadow: none; }
}


/*----------------------------------
 New_banner_showcase：PC用
 トップショーケース
-----------------------------------*/


.left-box {
    width: 740px;
}

/*#showcase {
  position: relative;
  height: 250px;
  padding: 0 0;
  overflow: hidden;
}*/


.left-box {
  width: 100%;
  max-width: 740px; /* もとの指定を上限としてレスポンシブ */
}

#banner_showcase {
  position: relative;
  overflow: hidden;
  /*background: #f7f7f7;*/
  padding: 6px 0 34px;         /* 上下に少し余白（左右は見せ幅を確保するため 0） */
  margin-bottom: 14px;
}

/* トラック（ul） */
#banner_showcase > ul {
  display: flex;
  align-items: center;
  gap: 10px;               /* スライド間隔 */
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  transform: translateX(0); /* JSで上書き */
}

/* スライド（li） */
#banner_showcase li {
  flex: 0 0 auto;
  width: clamp(240px, 44vw, 330px); /* 最小240px〜最大330pxで可変 */
}


/* 中央スライドの強調 */
#banner_showcase li.is-center img {
  transform: scale(1.035);        /* わずかに拡大 */
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  opacity: 1;
}
/* その他は少し抑える（お好みで数値調整） */
#banner_showcase li:not(.is-center) img {
  opacity: .9;
  transition: transform .35s ease, opacity .35s ease, box-shadow .35s ease;
}


/* 画像 */
#banner_showcase img {
  display: block;
  width: 100%;
  height: 220px;         /* 固定 */
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .25s ease, opacity .25s ease;
}
#banner_showcase a:hover img {
  opacity: .92;
  transform: translateY(-2px);
}

/* ページネーション */
#banner_showcase .pager {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
#banner_showcase .pager button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: #cfcfcf;
  cursor: pointer;
  padding: 0;
}
#banner_showcase .pager button[aria-current="true"] {
  width: 22px;                 /* アクティブを楕円にして視認性UP */
  border-radius: 6px;
  background: #00B7CD;
}

/* ホバー中はカーソルで「止まる」ことが伝わりやすいように */
#banner_showcase:hover { cursor: pointer; }

/* スマホ向け微調整 */
@media (max-width: 480px) {
  #banner_showcase { border-radius: 8px; }
  #banner_showcase .pager { bottom: 6px; }
}