/* =========================================================
  custom_cls_stable_layout.css（1ファイル版）
  目的：
  ・上の「2列ブロック」は触らない
  ・下の「4枚ブロック」だけを PCで4列 にする
  ・枠の安定（CLS低減）を優先（画像は伸縮しても枠が暴れにくい）
========================================================= */

/* =========================================================
  0) 影響範囲を「下の4枚ブロックっぽいコンテナ」だけに限定
  ※HTMLのクラス名が不明なため、"下4枚ブロックにだけ当たりやすい" ものを
    複数候補で並べています（どれか1つが一致すればOK）。
  ※ここに当たらない場合は、4枚ブロックの親要素クラスに合わせて1つに絞れます。
========================================================= */
:where(
  /* よくある命名（オンライン/通信/コースカード系） */
  .online-course-cards,
  .online-course-list,
  .online_course_list,
  .onlineCourseList,
  .onlineCourseCards,
  .commuting-course-cards,
  .commuting-course-list,
  .commuting_course_list,
  .course-cards-4,
  .course_cards_4,
  .courseCards4,
  .courseCardGrid,
  .course-card-grid,
  .course_card_grid,
  .home-4course,
  .home_4course,
  .homeCourse4,
  .top-4course,
  .top_4course,

  /* "通信講座" を想定した命名 */
  .tsushin-course-cards,
  .tsushin-course-list,
  .tsushin_course_list,

  /* もし「4つ並び」専用ラッパが存在する場合 */
  .grid-4,
  .grid4,
  .four-grid,
  .fourGrid
) {
  /* まずは何もしない（下でPC幅以上のときだけgrid化） */
}

/* =========================================================
  1) PC：下の4枚だけ 4列
  目安：1024px以上で4列固定
========================================================= */
@media (min-width: 1024px) {
  :where(
    .online-course-cards,
    .online-course-list,
    .online_course_list,
    .onlineCourseList,
    .onlineCourseCards,
    .commuting-course-cards,
    .commuting-course-list,
    .commuting_course_list,
    .course-cards-4,
    .course_cards_4,
    .courseCards4,
    .courseCardGrid,
    .course-card-grid,
    .course_card_grid,
    .home-4course,
    .home_4course,
    .homeCourse4,
    .top-4course,
    .top_4course,
    .tsushin-course-cards,
    .tsushin-course-list,
    .tsushin_course_list,
    .grid-4,
    .grid4,
    .four-grid,
    .fourGrid
  ) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
  }
}

/* =========================================================
  2) タブレット：2列（崩れにくさ優先）
========================================================= */
@media (min-width: 600px) and (max-width: 1023.98px) {
  :where(
    .online-course-cards,
    .online-course-list,
    .online_course_list,
    .onlineCourseList,
    .onlineCourseCards,
    .commuting-course-cards,
    .commuting-course-list,
    .commuting_course_list,
    .course-cards-4,
    .course_cards_4,
    .courseCards4,
    .courseCardGrid,
    .course-card-grid,
    .course_card_grid,
    .home-4course,
    .home_4course,
    .homeCourse4,
    .top-4course,
    .top_4course,
    .tsushin-course-cards,
    .tsushin-course-list,
    .tsushin_course_list,
    .grid-4,
    .grid4,
    .four-grid,
    .fourGrid
  ) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
  }
}

/* =========================================================
  3) モバイル：1列（読みやすさ優先）
========================================================= */
@media (max-width: 599.98px) {
  :where(
    .online-course-cards,
    .online-course-list,
    .online_course_list,
    .onlineCourseList,
    .onlineCourseCards,
    .commuting-course-cards,
    .commuting-course-list,
    .commuting_course_list,
    .course-cards-4,
    .course_cards_4,
    .courseCards4,
    .courseCardGrid,
    .course-card-grid,
    .course_card_grid,
    .home-4course,
    .home_4course,
    .homeCourse4,
    .top-4course,
    .top_4course,
    .tsushin-course-cards,
    .tsushin-course-list,
    .tsushin_course_list,
    .grid-4,
    .grid4,
    .four-grid,
    .fourGrid
  ) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
  }
}

/* =========================================================
  4) 「カード（子要素）」の最低限の安定化
  ※上の2列ブロックに当たらないよう、対象は上のコンテナ配下だけ。
========================================================= */
:where(
  .online-course-cards,
  .online-course-list,
  .online_course_list,
  .onlineCourseList,
  .onlineCourseCards,
  .commuting-course-cards,
  .commuting-course-list,
  .commuting_course_list,
  .course-cards-4,
  .course_cards_4,
  .courseCards4,
  .courseCardGrid,
  .course-card-grid,
  .course_card_grid,
  .home-4course,
  .home_4course,
  .homeCourse4,
  .top-4course,
  .top_4course,
  .tsushin-course-cards,
  .tsushin-course-list,
  .tsushin_course_list,
  .grid-4,
  .grid4,
  .four-grid,
  .fourGrid
) > * {
  min-width: 0;
}

/* カードの中身が縦に揃って見えるように（崩れにくい） */
:where(
  .online-course-cards,
  .online-course-list,
  .online_course_list,
  .onlineCourseList,
  .onlineCourseCards,
  .commuting-course-cards,
  .commuting-course-list,
  .commuting_course_list,
  .course-cards-4,
  .course_cards_4,
  .courseCards4,
  .courseCardGrid,
  .course-card-grid,
  .course_card_grid,
  .home-4course,
  .home_4course,
  .homeCourse4,
  .top-4course,
  .top_4course,
  .tsushin-course-cards,
  .tsushin-course-list,
  .tsushin_course_list,
  .grid-4,
  .grid4,
  .four-grid,
  .fourGrid
) a,
:where(
  .online-course-cards,
  .online-course-list,
  .online_course_list,
  .onlineCourseList,
  .onlineCourseCards,
  .commuting-course-cards,
  .commuting-course-list,
  .commuting_course_list,
  .course-cards-4,
  .course_cards_4,
  .courseCards4,
  .courseCardGrid,
  .course-card-grid,
  .course_card_grid,
  .home-4course,
  .home_4course,
  .homeCourse4,
  .top-4course,
  .top_4course,
  .tsushin-course-cards,
  .tsushin-course-list,
  .tsushin_course_list,
  .grid-4,
  .grid4,
  .four-grid,
  .fourGrid
) .card,
:where(
  .online-course-cards,
  .online-course-list,
  .online_course_list,
  .onlineCourseList,
  .onlineCourseCards,
  .commuting-course-cards,
  .commuting-course-list,
  .commuting_course_list,
  .course-cards-4,
  .course_cards_4,
  .courseCards4,
  .courseCardGrid,
  .course-card-grid,
  .course_card_grid,
  .home-4course,
  .home_4course,
  .homeCourse4,
  .top-4course,
  .top_4course,
  .tsushin-course-cards,
  .tsushin-course-list,
  .tsushin_course_list,
  .grid-4,
  .grid4,
  .four-grid,
  .fourGrid
) .item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 画像：見た目の安定（object-fitは既存指定があれば尊重されやすい） */
:where(
  .online-course-cards,
  .online-course-list,
  .online_course_list,
  .onlineCourseList,
  .onlineCourseCards,
  .commuting-course-cards,
  .commuting-course-list,
  .commuting_course_list,
  .course-cards-4,
  .course_cards_4,
  .courseCards4,
  .courseCardGrid,
  .course-card-grid,
  .course_card_grid,
  .home-4course,
  .home_4course,
  .homeCourse4,
  .top-4course,
  .top_4course,
  .tsushin-course-cards,
  .tsushin-course-list,
  .tsushin_course_list,
  .grid-4,
  .grid4,
  .four-grid,
  .fourGrid
) img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* タイトルが長くてもはみ出さない（2行程度） */
:where(
  .online-course-cards,
  .online-course-list,
  .online_course_list,
  .onlineCourseList,
  .onlineCourseCards,
  .commuting-course-cards,
  .commuting-course-list,
  .commuting_course_list,
  .course-cards-4,
  .course_cards_4,
  .courseCards4,
  .courseCardGrid,
  .course-card-grid,
  .course_card_grid,
  .home-4course,
  .home_4course,
  .homeCourse4,
  .top-4course,
  .top_4course,
  .tsushin-course-cards,
  .tsushin-course-list,
  .tsushin_course_list,
  .grid-4,
  .grid4,
  .four-grid,
  .fourGrid
) :where(h1,h2,h3,h4,h5,p,span) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 2行クランプ（対応ブラウザのみ。未対応でも表示は壊れません） */
:where(
  .online-course-cards,
  .online-course-list,
  .online_course_list,
  .onlineCourseList,
  .onlineCourseCards,
  .commuting-course-cards,
  .commuting-course-list,
  .commuting_course_list,
  .course-cards-4,
  .course_cards_4,
  .courseCards4,
  .courseCardGrid,
  .course-card-grid,
  .course_card_grid,
  .home-4course,
  .home_4course,
  .homeCourse4,
  .top-4course,
  .top_4course,
  .tsushin-course-cards,
  .tsushin-course-list,
  .tsushin_course_list,
  .grid-4,
  .grid4,
  .four-grid,
  .fourGrid
) :where(.title, .ttl, .course-title, .course_ttl) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
  5) 既存のfloat/inline-blockを消す必要がある場合だけ（安全に）
  ※上の2列ブロックへ波及しないよう、対象を限定。
========================================================= */
:where(
  .online-course-cards,
  .online-course-list,
  .online_course_list,
  .onlineCourseList,
  .onlineCourseCards,
  .commuting-course-cards,
  .commuting-course-list,
  .commuting_course_list,
  .course-cards-4,
  .course_cards_4,
  .courseCards4,
  .courseCardGrid,
  .course-card-grid,
  .course_card_grid,
  .home-4course,
  .home_4course,
  .homeCourse4,
  .top-4course,
  .top_4course,
  .tsushin-course-cards,
  .tsushin-course-list,
  .tsushin_course_list,
  .grid-4,
  .grid4,
  .four-grid,
  .fourGrid
) > * {
  float: none !important;
}

/* ===== CLS対策：直営校ブログのサムネ領域を先取り ===== */
.contentArticleBoxColInImg.blog{
  width: 100%;
  aspect-ratio: 16 / 9;   /* ここが“場所取り” */
  overflow: hidden;
  background: #f2f2f2;    /* 読み込み前のチラつき防止 */
}

.contentArticleBoxColInImg.blog img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 画像サイズがバラバラでも崩れない */
  display: block;
}

/* =========================================================
  6) Footer layout restore & compact (全ページ共通)
  目的：
  ・フッターの各「列（.i2FooterInnerMenu）」の中身を縦並びに固定
  ・列レイアウトは「.i2FooterInnerMenuArea」をGridで管理
  ・ロゴを左寄せしてメニュー側の有効幅を確保
  ・「養成講座日程」が下に落ちにくいよう、5列を優先（幅が足りない時のみ段階的に列数を減らす）
========================================================= */

/* フッター内の「列」そのものは横並び化しない（ここが崩れの根本） */
footer .i2FooterInnerMenu{
  display:block !important;
  float:none !important;
  min-width:0;
}

/* 列タイトル・リンクを縦に積む */
footer .i2FooterInnerMenuTtl{
  display:block;
  margin:0 0 10px 0;
  font-weight:700;
  letter-spacing:.02em;
}
footer .i2FooterInnerMenuLink{
  display:block;
  margin:0 0 8px 0;
  line-height:1.6;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* アイコン幅を固定して、読み込み差で微妙にズレないように */
footer .i2FooterInnerMenuLink i{
  display:inline-block;
  width:14px;
}

/* ロゴ＋メニューの2カラムを安定させる */
footer .i2FooterInner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
}

/* ロゴブロック：左寄せ＆取りすぎ防止 */
footer .i2FooterInnerLogoArea{
  flex:0 0 320px;
  max-width:320px;
}
footer .i2FooterInnerLogo{
  text-align:left;
}
footer .i2FooterInnerLogo img{
  display:block;
  max-width:100%;
  height:auto;
}
footer .i2FooterInnerLogo span{
  display:block;
  margin-top:10px;
  line-height:1.6;
  overflow-wrap:anywhere;
}

/* メニューエリア：ここで「列」を作る */
footer .i2FooterInnerMenuArea{
  flex:1 1 auto;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr)); /* まずは5列を優先 */
  gap:22px;
  align-items:start;
}

/* 画面幅に応じて“必要な時だけ”列数を減らす */
@media (max-width: 1199.98px){
  footer .i2FooterInnerLogoArea{ flex-basis:300px; max-width:300px; }
  footer .i2FooterInnerMenuArea{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }
}
@media (max-width: 1023.98px){
  footer .i2FooterInner{ flex-wrap:wrap; }
  footer .i2FooterInnerLogoArea{ flex:1 1 100%; max-width:none; }
  footer .i2FooterInnerMenuArea{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
}
@media (max-width: 820px){
  footer .i2FooterInnerMenuArea{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
}
@media (max-width: 520px){
  footer .i2FooterInnerMenuArea{ grid-template-columns: minmax(0, 1fr); gap:14px; }
}

/* 余白が広すぎて“詰まって見えない”場合の保険（フッター内だけ） */
@media (min-width: 1024px){
  footer .conWrap{
    padding-left:16px;
    padding-right:16px;
  }
}


/* =========================================================
  6) スマホのみ：フッター左ブロック（ロゴ＋住所）を「ブロック中央」＋「文字は左揃え」
  目的：
  ・ロゴ/住所の塊は中央に見せる
  ・住所/TEL/mail は左から読みやすい（左詰めの真ん中）
  対象HTML（footer.php）:
    .i2FooterInnerLogoArea > .i2FooterInnerLogo > img + span
========================================================= */
@media (max-width: 767.98px) {
  footer .i2FooterInnerLogoArea,
  footer .i2FooterInnerLogo {
    text-align: center; /* ブロックは中央 */
  }
  footer .i2FooterInnerLogo img{
    display: inline-block;
    max-width: 100%;
    height: auto;
  }
  footer .i2FooterInnerLogo span{
    display: inline-block;  /* “塊”として中央に置ける */
    text-align: left;       /* 文字は左詰め */
    margin-top: 6px;
    line-height: 1.75;
    max-width: 100%;
    white-space: normal;
  }
}

/* =========================================================
  [CLS追加] フッターのアイコン（FontAwesome等）の読み込みで文字がズレるのを抑制
========================================================= */
.i2FooterInnerMenu i,
.i2FooterInnerMenu .fas,
.i2FooterInnerMenu .far,
.i2FooterInnerMenu .fal,
.i2FooterInnerMenu .fab{
  display:inline-block;
  width: 1.2em;
  text-align:center;
  flex: 0 0 1.2em;
}


/* ===== CLS対策：loading-div がレイアウトフローに影響しないよう固定 ===== */

#loading-div{
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  z-index:2147483640 !important; /* できるだけ最前面 */
}
#loading-div.fade-out.loaded,
#loading-div.loaded{
  visibility:hidden !important;
  pointer-events:none !important;
  opacity:0 !important;
}