/****************************************/
/********** ArtLab-Tokyo [CSS] **********/
/****************************************/


/****************************** Bootstrap Overrides ******************************/

.container,
.container-fluid {
  position: relative;
}

.container-fluid {
  max-width: 1140px;
}

/* - flex-item突き抜け対策 - */
.d-flex:not(.flex-column)>*,
.d-sm-flex:not(.flex-column)>*,
.d-md-flex:not(.flex-column)>*,
.d-lg-flex:not(.flex-column)>*,
.d-xl-flex:not(.flex-column)>* {
  min-width: 0;
}

.d-flex.flex-column>*,
.d-sm-flex.flex-column>*,
.d-md-flex.flex-column>*,
.d-lg-flex.flex-column>*,
.d-xl-flex.flex-column>* {
  max-width: 100%;
}


/* Placeholder */
.form-control::-moz-placeholder {
  color: #CCC;
}
.form-control::placeholder {
  color: #CCC;
}


/* =============================== ボタンのスタイル =============================== */
.btn {
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0.5em 1.5em;
  transition: all 0.15s ease;
  white-space: normal;
  border: 0;
}
.btn-search {
  padding: 0 0.75em;
}
.bi-search::before {
  font-size: 24px;
  padding-top: 3px;
}



/* ボタンのカラー設定 */
.btn {
  /* --- 1. 通常時の設定 --- */
  --bs-btn-color: var(--color-text);                /* 文字色 */
  --bs-btn-bg: var(--color-primary);                    /* 背景色（好きな色に！） */
  --bs-btn-border-color: var(--color-primary);          /* 枠線の色 */
  --bs-btn-border-radius: 1.5rem;          /* 角丸の強さ（必要なら） */

  /* --- 2. ホバー時（マウスを乗せた時）の設定 --- */
  --bs-btn-hover-bg: var(--color-primary-dark);
  --bs-btn-hover-border-color: var(--color-primary-dark);

  /* --- 3. アクティブ時（クリックした瞬間・押された状態）の設定 --- */
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
}

.btn-search {
  /* --- 1. 通常時の設定 --- */
  --bs-btn-color: #FFF;                /* 文字色 */
  --bs-btn-bg: var(--color-accent-orange);                    /* 背景色（好きな色に！） */
  --bs-btn-border-color: var(--color-accent-orange);          /* 枠線の色 */
  --bs-btn-border-radius: 0.5rem;          /* 角丸の強さ（必要なら） */

  /* --- 2. ホバー時（マウスを乗せた時）の設定 --- */
  --bs-btn-hover-color: #FFF;                /* 文字色 */
  --bs-btn-hover-bg: var(--color-accent-orange-dark);
  --bs-btn-hover-border-color: var(--color-accent-orange-dark);

  /* --- 3. アクティブ時（クリックした瞬間・押された状態）の設定 --- */
  --bs-btn-active-color: #FFF;                /* 文字色 */
  --bs-btn-active-bg: var(--color-accent-orange-dark);
  --bs-btn-active-border-color: var(--color-accent-orange-dark);
}

.btn-entry {
  /* --- 1. 通常時の設定 --- */
  --bs-btn-color: var(--color-text);                /* 文字色 */
  --bs-btn-bg: var(--color-secondary);                    /* 背景色（好きな色に！） */
  --bs-btn-border-color: var(--color-secondary);          /* 枠線の色 */

  /* --- 2. ホバー時（マウスを乗せた時）の設定 --- */
  --bs-btn-hover-bg: var(--color-secondary-dark);
  --bs-btn-hover-border-color: var(--color-secondary-dark);

  /* --- 3. アクティブ時（クリックした瞬間・押された状態）の設定 --- */
  --bs-btn-active-bg: var(--color-secondary-dark);
  --bs-btn-active-border-color: var(--color-secondary-dark);
}

.btn-myschool {
  /* --- 1. 通常時の設定 --- */
  --bs-btn-color: var(--color-text);                /* 文字色 */
  --bs-btn-bg: var(--color-accent-orange);                    /* 背景色（好きな色に！） */
  --bs-btn-border-color: var(--color-accent-orange);          /* 枠線の色 */

  /* --- 2. ホバー時（マウスを乗せた時）の設定 --- */
  --bs-btn-hover-bg: var(--color-accent-orange-dark);
  --bs-btn-hover-border-color: var(--color-accent-orange-dark);

  /* --- 3. アクティブ時（クリックした瞬間・押された状態）の設定 --- */
  --bs-btn-active-bg: var(--color-accent-orange-dark);
  --bs-btn-active-border-color: var(--color-accent-orange-dark);
}


/* 文字色上書き */
.stellarnav a.btn {
  color: var(--color-text)!important;
}


/* --- フラットボタン全体のスタイル --- */
.btn-flat {
  position: relative; /* アイコン配置の基準点にする */
  display: flex;      /* フレックスボックス化 */
  align-items: center;
  justify-content: center; /* テキストを中央揃え */
  width: 100%;        /* 親要素に合わせて広げる（必要に応じてpx指定も可） */
  max-width: 280px;   /* 最大幅の制限（お好みで） */
  height: 50px;       /* 高さ指定 */
	margin-inline: auto;

  border: 2px solid #FFF;
  background-color: var(--color-primary); /* ボタンの色 */
  color: #fff;
  text-decoration: none;
  border-radius: 30px; /* 丸み */
  font-weight: bold;
  font-size: 1rem;
  /* フラットな影（右・下・ぼかし0・広がり0・色） */
  box-shadow: 5px 5px 0 0 var(--color-primary);
  transition: all 0.2s;
}

/* --- クリック時の動き --- */
.btn-flat:hover {
  color: #FFF;
  transform: translate(-1px, -1px);
}
.btn-flat:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 0 var(--color-primary);
}

    /* --- 右端の白丸アイコン --- */
    .btn-flat .btn-icon {
      position: absolute; /* ボタン内で浮遊させる */
      right: 15px;        /* 右端からの距離 */
      top: 50%;           /* 上下中央の基準位置 */
      transform: translateY(-50%); /* 完全に上下中央に補正 */
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25px;  /* 白丸のサイズ */
      height: 25px;
      background-color: #fff; /* 白丸 */
      border-radius: 50%;
    }

    /* --- 白丸の中の矢印（三角形） --- */
    .btn-flat .btn-icon::after {
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      /* 三角形のサイズ調整：左辺を太くすると右向き三角になる */
      border-width: 6px 0 6px 9px; 
      /* 色指定：透明 透明 透明 オレンジ */
      border-color: transparent transparent transparent var(--color-primary);
      margin-left: 2px; /* 視覚的な重心調整 */
    }

/* --- コラムは色変更 --- */
.btn-flat.btn-column {
  border: 2px solid var(--color-accent-coral);
  background-color: #FFF; /* ボタンの色 */
  color: var(--color-accent-coral);
  box-shadow: 5px 5px 0 0 var(--color-accent-coral);
}
.btn-flat.btn-column:active {
  box-shadow: 2px 2px 0 0 #FFF;
}
    .btn-flat.btn-column .btn-icon {
      background-color: var(--color-accent-coral);
    }
    /* --- 白丸の中の矢印（三角形） --- */
    .btn-flat.btn-column .btn-icon::after {
      border-color: transparent transparent transparent #FFF;
    }




/* =============================== オリジナルのページネーション設定 =============================== */
.pagination-custom {
  /* --- 1. アクティブ（現在地）の見た目 --- */
  --bs-pagination-active-bg: var(--color-primary);           /* 背景色 */
  --bs-pagination-active-border-color: var(--color-primary); /* 枠線 */
  --bs-pagination-active-color: #fff;           /* 文字色 */

  /* --- 2. 通常時（リンク）の見た目 --- */
  --bs-pagination-color: var(--color-primary);               /* 文字色 */
  --bs-pagination-bg: #fff;                     /* 背景色 */
  --bs-pagination-border-color: var(--color-primary-dark);        /* 枠線 */

  /* --- 3. ホバー時（マウスを乗せた時）の見た目 --- */
  --bs-pagination-hover-color: #fff;            /* 文字色 */
  --bs-pagination-hover-bg: var(--color-primary-dark);            /* 背景色（少し薄い黄色） */
  --bs-pagination-hover-border-color: var(--color-primary-dark);  /* 枠線 */
  
  /* --- 4. クリック時のフォーカス（青い枠線を消す/変える） --- */
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(239, 187, 36, 0.25); /* 黄色の薄い影 */
}

/* お問い合わせページの左上の不要な「1」を非表示 */
body::before {
	content: none !important;
	display: none !important;
}

/* bodyタグの直接の子要素に対して */
body > *:not(nav):not(main):not(footer):not(script) {
	display: none;
}

/* より具体的に、bodyの最初のテキストノードを非表示 */
body {
	font-size: 16px;
}

body::first-line {
	color: transparent;
	font-size: 0;
	line-height: 0;
	height: 0;
	overflow: hidden;
}

/* 初めての方へページ：ヘッダーとコンテンツの隙間をなくす */
body#first-page main {
	padding-top: 0 !important;
}

/* sectionの上部余白も削除 */
body#first-page main section.pt-0 {
	padding-top: 0 !important;
}
/****************************** Bootstrap Overrides End ******************************/