/*!
Template: Puyolove-Portal-group
Theme Name: Puyolove-Portal-shop
Author:  CASTPRO
Author URI: https://castpro-cms.com/
Description: CASTPRO5 Portal Site Shop theme
Version: 0.0.1
Text Domain: cp5-portal-shop
Tags:CASTPRO,Portalsite
*/

/*# sourceMappingURL=source/maps/style.css.map */


/****************************************************
 * 出勤スケジュールのレイアウトシフト対策（最新版）
 ****************************************************/

/* 出勤スケジュール全体の高さをある程度確保しておき、
   読み込み後にガツっと伸びないようにする */
#schedule .content-frame {
  min-height: 900px; /* 実際の高さを見て 700〜1100px くらいで調整 */
}

/* 一覧UL自体にも最低高さを確保しておく（キャスト0〜1人の日の揺れ防止） */
#schedule #shop-schedule-list {
  min-height: 650px; /* 足りなければ 700〜750 に上げる */
}

/* キャストカード全体を絶対配置の基準にする＋
   カード自体の最低高さを確保しておく */
#schedule #shop-schedule-list .cast-frame {
  position: relative;
  min-height: 540px; /* PCでの1カードの実高さを見て 500〜600px で微調整 */
}

/* 画像エリアの縦横比を固定して、
   画像ロード前から高さが決まるようにする（480x640 → 3:4） */
#schedule #shop-schedule-list .cast-image {
  position: relative;
  aspect-ratio: 3 / 4;  /* 480:640 は 3:4。必要なら微調整OK */
  overflow: hidden;
}

/* キャスト画像を枠いっぱいにフィットさせる */
#schedule #shop-schedule-list .cast-image img.cast-thumb {
  display: block;       /* 画像下の余白を消して高さを安定させる */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* カップアイコンを「画像の上に重ねる」形にして、
   アイコン表示の有無で高さが変わらないようにする */
#schedule #shop-schedule-list .cast-icon-cup {
  position: absolute;
  top: 8px;      /* 位置はお好みで調整 */
  right: 8px;
  width: 40px;   /* アイコンの実サイズに合わせて調整 */
  height: 40px;
  z-index: 2;
}

/* カップアイコン画像も枠の中にきれいに収める */
#schedule #shop-schedule-list .cast-icon-cup img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* アイコンが多い・少ないで高さが変わりやすいエリアの最低高さを確保 */
#schedule #shop-schedule-list .cast-icon-lists {
  min-height: 140px; /* アイコンが多い子も想定して 120〜180px くらいで調整 */
}

/****************************************************
 * 出勤スケジュール：PC レイアウトの安定化（3カラムまとめ）
 ****************************************************/
@media (min-width: 1024px) {

  /* 全体の3カラム枠（左サイド・真ん中・右サイド） */
  #shop-content.container.row.layout- {
    display: flex;           /* すでに flex ならそのまま */
    align-items: flex-start;
    min-height: 1200px;      /* 足りなければ 1300, 1400 などに調整 */
  }

  /* 真ん中のスケジュールカラム */
  #schedule.shop-main-column {
    min-height: 900px;       /* 出勤人数が少ない日でもある程度の高さを確保 */
  }

  /* 左右サイドバーにも最低高さを付ける */
  #shop-home-side-left.shop-sidebar,
  #shop-home-side-right.shop-sidebar {
    min-height: 900px;
  }
}

/****************************************************
 * 左右サイドバーのバナー：レイアウト崩れ防止（高さを固定しない）
 ****************************************************/

/* バナーリスト自体の高さは必要以上に予約しない */
#shop-home-side-left .banner_column,
#shop-home-side-right .banner_column {
  min-height: 0;
}

/* 各バナー枠：高さ固定はせず、画像に合わせて自然に伸縮させる */
#shop-home-side-left .banner_column li,
#shop-home-side-right .banner_column li {
  min-height: 0;
}

/* バナー画像：幅100%で比率維持、トリミングしない */
#shop-home-side-left .banner_column li img,
#shop-home-side-right .banner_column li img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  /* aspect-ratio は指定しないので、元画像の比率で表示される */
  object-fit: contain; /* （削除してもOK／好みで cover に変更可） */
}

/****************************************************
 * 右サイド 新人・オススメのサムネ（180x270 → 2:3）
 ****************************************************/
#shop-home-side-right .cast-image {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

#shop-home-side-right .cast-image img.cast-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/****************************************************
 * matchHeight 高さ揃えの効果を無効化（CLS対策）
 ****************************************************/

/* 出勤スケジュールのカードにつけられる inline height を打ち消す */
#schedule #shop-schedule-list .cast-frame {
  height: auto !important;  /* JS が height:◯px を書いても無視させる */
}

/* 右サイドバーの新人／オススメ欄も data-mh 対象になっている可能性があるので、
   念のためこちらも height: auto に固定 */
#shop-home-side-right .cast-frame {
  height: auto !important;
}

/****************************************************
 * グローバルヘッダー：サイトロゴのCLS対策
 ****************************************************/

/* ロゴを入れている枠に、あらかじめ高さを確保しておく */
.full-site-header #header-site-logo {
  /* 実際のロゴの高さに合わせて 50〜70px くらいで微調整してください */
  min-height: 60px;
  display: flex;
  align-items: center;   /* ロゴを縦中央寄せにして見た目も崩れないように */
}

/* 画像の描画を安定させる */
.full-site-header #header-site-logo a {
  display: inline-block;
}

.full-site-header #header-site-logo img {
  display: block;
  height: auto;
  max-height: 60px;      /* 上の min-height とセットで、ヘッダーが極端に大きくならないようにする */
  width: auto;
  max-width: 100%;
}

/****************************************************
 * 店舗ヘッダー：ショップロゴのCLS対策
 ****************************************************/

/* ショップロゴの枠に縦横比を持たせて、画像ロード前から高さを固定する */
#shop-info-logo {
  width: 215px;            /* img の width に合わせる */
  max-width: 100%;
  aspect-ratio: 215 / 111; /* img の 215x111 に合わせる */
  overflow: hidden;
}

/* ロゴ画像を枠いっぱいにフィットさせる */
#shop-info-logo img.shop-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}