/* === /{area}/{shop}/cast/ フロアレディ求人(④) 2026-08-21 ===
   Figma Dev Mode MCPで取得した実データ(node 1524:1066配下)を基準に値を確定 */

/* renewal.css側の「応募導線 準備中につき一時非表示」ブロック(.final-cta-section
   等)を、IPプレビュー時(body.is-cast-preview)のみ元の表示に戻す。詳細度を
   renewal.css側の単一クラス!importantより上げて上書きする(同じ!important
   同士は詳細度で決着する)。
   .cast-cta-line/.cast-cta-webは2026-08-25にファーストビューのみ解禁したため
   renewal.css側のブロックから外れており、ここでの上書きは不要になった */
body.is-cast-preview .day-shop-calendar {
  display: block !important;
}

body.is-cast-preview #day-calendar-dialog[open] {
  display: flex !important;
}

/* .day-shop-cardを予約用ラッパーとして流用(area_result.jsの
   trigger.closest(".day-shop-card")対応のため)。本来の店舗一覧カード用
   グリッド(160px 1fr)ではなくカレンダー単体をフル幅で見せたいので上書き */
body.is-cast-preview .cast-calendar-card {
  display: block;
  margin: 16px 20px 0;
  padding: 0;
  background: transparent;
}

/* 2026-08-25クライアント指示: ページ下部CONTACT(.final-cta-section)は⑤まで
   非表示を維持する。2026-08-22時点でここに存在した
   body.is-cast-preview .final-cta-section の強制表示上書き(と、それに伴う
   .cast-main のpadding-bottom:0上書き)は削除し、renewal.css側の
   「応募導線 準備中につき一時非表示」ブロックがそのまま効くようにする */

.cast-main {
  /* 2026-08-22: Figma実データ3方向(get_design_context/get_variable_defs/
     実スクリーンショットのピクセル実測)で単色#fffaffを確認したため、
     以前借用していた③(day-today-section)のグラデーションから単色に修正 */
  background: #fffaff;
  padding-bottom: 20px;
}

/* パンくずはFigmaに存在しない(視覚的には非表示)。schema.org構造化データの
   SEO価値は残すため、要素自体は削除せず視覚的にのみ隠す */
.cast-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cast-breadcrumb {
  padding: 12px 20px;
}

.cast-breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: var(--color-muted);
}

.cast-breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 4px;
}

.cast-breadcrumb a {
  color: var(--color-muted);
  text-decoration: none;
}

/* ヒーロー画像: Figmaはaspect-[768/512]でクロップしない(object-fit:coverは使わない) */
.cast-hero {
  position: relative;
}

.cast-hero-slider {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fffdf9;
}

.cast-hero-slider img {
  display: block;
  width: 100%;
  aspect-ratio: 768 / 512;
  height: auto;
  object-fit: cover;
}

/* ドットナビ(node 1524:1080/1081相当): area_result.cssの.result_specialゴールド
   パターンを流用(色#b89a5d=--color-gold) */
.cast-hero .bx-wrapper {
  margin: 0 !important;
  /* node 1524:1078のshadow-[0px_24px_70px_0px_rgba(72,58,82,0.13)] = --shadow-soft
     bx-viewportがoverflow:hiddenで画像をクロップするため、shadowはその親の
     bx-wrapper側に付ける(pagerは.cast-hero-pagerへ退避済みなのでbx-wrapperの
     ボックスは画像とほぼ同じ大きさになる) */
  box-shadow: var(--shadow-soft);
  border: none;
}

.cast-hero .bx-pager {
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: static !important;
}

.cast-hero .bx-pager-link {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gold) !important;
  background: transparent !important;
  text-indent: -9999px;
  overflow: hidden;
}

.cast-hero .bx-pager-link.active {
  border-color: var(--color-gold) !important;
  background: var(--color-gold) !important;
}

.cast-hero .bx-controls-direction a {
  display: none;
}

.cast-special-btn {
  display: block;
  width: fit-content;
  margin: 10px auto 0;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(121, 99, 84, 0.18);
  background: linear-gradient(165deg, #e0c691 0%, #b89a5d 100%);
  color: #fffdf9;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
}

/* SHOP見出し */
.cast-shop-header {
  padding: 24px 20px;
}

.cast-shop-header .section-label {
  margin: 0;
}

.cast-shop-header h1 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 44px;
}

/* CTA(LINE/WEB。⑤解禁までrenewal.cssの非表示ブロックで隠す)
   node 1524:1135「応募」フレーム(高さ92、ボタン高さ44)は上下24pxずつの
   paddingを持つ。旧実装は上16px・下0pxで実質半分しかなく詰まって見えていた */
.cast-cta-row {
  display: flex;
  gap: 10px;
  padding: 24px 20px;
}

.cast-cta-row .button {
  flex: 1 1 0;
}

.cast-pr-text {
  /* cast-cta-row側の下paddingで既に24px確保済みのため、ここでは追加しない */
  padding: 0 20px;
  /* node 1527:1387実測値: Bold(700)/15px/line-height28/#5e496b。
     旧値はfont-weight未指定(初期値400)・14px・line-height1.8・
     var(--color-muted)で、F12で見ると400になっているとの指摘どおりだった */
  color: #5e496b;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 28px;
}

/* 体入/本入時給ピル(node 1527:2557): ラベルだけピンクの角丸チップ、数値はピンクの大文字 */
.cast-pay-pills {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* node 1527:1383/1527:2557: PR文とpillsの間は10px、pills自体の下は0
     (appealフレームの下端に隙間なく接する)。旧値は上下とも20pxで、
     accordion-group側のpadding-top20pxと合わせて給与カード上の余白が
     二重(40px超)になっていた */
  padding: 10px 20px 0;
}

.cast-pay-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 390px;
}

.cast-pay-label {
  flex: 0 0 auto;
  width: 150px;
  padding: 4px 10px;
  border-radius: 16px;
  background: #cf5f94;
  color: #fffdf9;
  font-family: var(--font-sans, "Noto Sans JP", sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}

.cast-pay-value {
  width: 200px;
  color: #cf5f94;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 900;
  line-height: 36px;
  text-align: right;
}

/* アコーディオン(給与/待遇・特典/働き方/店舗情報)。node 1532:2576ほかを基準 */
.cast-accordion-group {
  display: grid;
  gap: 16px;
  padding: 20px 20px 0;
}

.cast-accordion,
.cast-shop-info {
  border-radius: 8px;
  background: #fffdf9;
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.cast-shop-info {
  /* node 1532:2575のカテゴリ全体末尾の余白20px相当(次のRELATED SHOPS
     セクション自体のpadding-top24pxとは別に必要) */
  margin: 16px 20px 20px;
}

.cast-accordion summary,
.cast-shop-info-title {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  margin: 0;
  padding: 0 18px 0 10px;
  background: #fbedfb;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.cast-accordion summary::-webkit-details-marker {
  display: none;
}

.cast-accordion summary::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
  transform: rotate(-135deg);
  transition: transform 0.2s;
}

.cast-accordion[open] summary::after {
  transform: rotate(45deg);
}

.cast-accordion-icon {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.cast-accordion-body {
  margin: 0;
  padding: 0 10px;
}

/* 項目名(dt)と内容(dd)は1:3グリッドで左右に並べる(node 1532:2584ほか) */
.cast-accordion-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 10px;
  padding: 10px 0;
}

.cast-accordion-row + .cast-accordion-row {
  border-top: 1px solid var(--color-border);
}

/* お得ポイント行(2026-08-25クライアント指示で非表示化)が使っていたクラス。
   マークアップからは削除済みだが、復活時に流用できるよう残置する */
.cast-accordion-row.cast-collapsible {
  display: none;
}

.cast-accordion-row.cast-collapsible.is-expanded {
  display: grid;
}

/* MAPを見るはdt/ddの下に行全体(1〜-1列)を占める独立要素として置く
   (node 1538:1027、dd列内ではなく行全体でセンタリングされている) */
.cast-accordion-row > .cast-map-btn {
  grid-column: 1 / -1;
}

/* もっと見るは「待遇」の外、アコーディオン最下部に独立配置する
   (閉じるボタンが常に展開済みコンテンツの最下部に出るようにするため) */

.cast-accordion-row dt {
  color: var(--color-muted);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.cast-accordion-row dd {
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

/* 待遇: 3行省略 + もっと見るトグル(node 1532:2628/1532:2660) */
.cast-clamp-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* <br>(nl2br由来)混在時に-webkit-line-clampの行計算がブレて高さと
     見た目のクリップ位置がズレることがあるため、行数分の高さを併用して
     下の項目(お得ポイント等)が食い込まないよう確実に頭打ちする */
  max-height: calc(14px * 1.7 * 3);
}

.cast-clamp-text.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  max-height: none;
}

.cast-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  border: none;
  background: none;
  color: #cf5f94;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.cast-more-btn::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #cf5f94;
  border-bottom: 2px solid #cf5f94;
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.cast-more-btn.is-expanded::before {
  transform: rotate(-135deg);
}

.cast-merit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cast-merit-list li {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-cream);
  color: var(--color-ink);
  font-size: 12px;
}

.cast-map-btn {
  display: block;
  width: fit-content;
  margin: 8px auto 0;
  padding: 4px 20px;
  border-radius: 16px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-sans, "Noto Sans JP", sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

/* 系列店舗(node 1524:1199): 見出し30px、カードは店名+画像のみ(バッジ無し) */
.cast-related-shops {
  padding: 24px 20px 0;
}

.cast-related-shops .section-label {
  margin: 0;
}

.cast-related-shops h2 {
  margin: 0 0 8px;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 44px;
}

.cast-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* node 1524:1206ほか: カード枠192.5pxに対し実際の画像は183px(左右4.75pxずつ
     余白)で中央寄せされているため、画像同士の実質の間隔はgridのgap(5px)
     単体ではなくその余白×2を足した14.5pxになる */
  column-gap: 14.5px;
  row-gap: 5px;
}

.cast-related-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cast-related-name {
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  overflow-wrap: break-word;
}

.cast-related-name a {
  color: inherit;
  text-decoration: none;
}

.cast-related-image {
  display: block;
  width: 100%;
  aspect-ratio: 183 / 122;
  border: 1px solid rgba(234, 220, 186, 0.64);
  border-radius: 8px;
  box-shadow: 0 24px 70px 0 rgba(72, 58, 82, 0.13);
  overflow: hidden;
}

.cast-related-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* LINE応募ポップアップ(2026-08-25、③の暫定対応で新設)。
   area_result.cssの.day-calendar-dialogと同じ作法(ネイティブdialog + backdrop、
   カード地color-paper・角丸radius-card)に揃え、Figma未着のため独自の意匠は
   起こさない */
.cast-line-dialog {
  width: min(calc(100% - 70px), 360px);
  max-width: none;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.cast-line-dialog[open] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.cast-line-dialog::backdrop {
  background: rgba(48, 42, 57, 0.46);
}

.cast-line-dialog-close {
  border: none;
  background: none;
  padding: 0;
  height: 48px;
  font-size: 30px;
  line-height: 48px;
  color: var(--color-paper);
  cursor: pointer;
}

.cast-line-dialog-card {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 8px 24px 28px;
  border-radius: var(--radius-card);
  background: var(--color-paper);
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
}

.cast-line-dialog-lead {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.7;
}

.cast-line-dialog-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.cast-line-dialog-title {
  margin: 0;
  color: var(--color-charcoal);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
}

.cast-line-dialog-name {
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
}

/* jquery.qrcode(render:"image")が挿入する<img>を包む。サイズはJS側の
   qrcode({size:128})と合わせる */
.cast-line-dialog-qr {
  width: 144px;
  height: 144px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-paper);
}

.cast-line-dialog-qr img {
  display: block;
  width: 100%;
  height: 100%;
}

.cast-line-dialog-example {
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--color-cream);
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.7;
}

.cast-line-dialog-actions {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

.cast-line-dialog-actions .button {
  width: 100%;
}