/* 白パラ（しろパラ ona-doll.com の再現）
   寸法：幅980px / 本文710px＋左サイド250px など、元のサイトの値をテンプレートに固定した（余白・マージンは変えられない）。
   色：CSSには直書きしない。すべて --sp-* を読む。値は デザイン設定 > テンプレートの配色 で変えられる
       （既定色と一覧は config/hp_templates.php の shiropara.design.colors。出力は resources/views/hp/templates/shiropara.blade.php）。
   すべて .hp-shiropara の中だけに効かせる（他のテンプレートに影響しない）。 */

.hp-shiropara {
    margin: 0;
    background: var(--sp-page-bg);
    color: var(--sp-text);
    font-size: 16px;
    line-height: 1.5;
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS PGothic", sans-serif;
}
.hp-shiropara a { color: var(--sp-link); }
.hp-shiropara img { vertical-align: top; max-width: 100%; }
.hp-shiropara ul { margin: 0; padding: 0; list-style: none; }

.hp-shiropara .sp-container,
.hp-shiropara .sp-footer-up,
.hp-shiropara .sp-footer__inner { width: 980px; max-width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; }

/* ---------- ヘッダー ---------- */
.hp-shiropara .sp-header { width: 980px; max-width: 100%; margin: 0 auto; }
.hp-shiropara .sp-header__up { display: flex; justify-content: space-between; align-items: flex-start; height: 25px; padding-top: 5px; box-sizing: border-box; font-size: 12px; line-height: 20px; }
.hp-shiropara .sp-header__text { margin: 0; padding-left: 25px; color: var(--sp-brown); background: url('/hp/templates/shiropara/h_point.png') no-repeat left center; }
.hp-shiropara .sp-header__links { display: flex; color: var(--sp-link); }
.hp-shiropara .sp-header__links li:not(:last-child)::after { content: "｜"; }
.hp-shiropara .sp-header__links a { padding: 0 5px; text-decoration: none; }
.hp-shiropara .sp-header__inner { min-height: 357px; background: no-repeat left center; }
.hp-shiropara .sp-header__logo-w { display: flex; justify-content: space-between; min-height: 227px; }
.hp-shiropara .sp-header__logo { width: 323px; height: 151px; margin: 39px 0 0 300px; font-size: 24px; }
.hp-shiropara .sp-header__logo img,
.hp-shiropara .sp-header__info img { display: block; }
.hp-shiropara .sp-header__logo a { display: block; text-decoration: none; }
.hp-shiropara .sp-header__info { width: 290px; height: 169px; margin-top: 32px; }
.hp-shiropara .sp-header__desc { display: block; padding-left: 10px; color: var(--sp-brown); font-size: 12px; font-weight: normal; }
.hp-shiropara .sp-header__tel { margin: 0; font-size: 22px; font-weight: bold; color: var(--sp-brown); }
.hp-shiropara .sp-header__hours { margin: 0; color: var(--sp-brown); }

/* メニュー（画像ボタン。マウスを乗せると通常画像を透明にして、背景の画像を見せる） */
.hp-shiropara .sp-menu { display: flex; margin-bottom: 20px; }
.hp-shiropara .sp-menu li { width: 122px; height: 80px; margin-left: 21px; flex: none; }
.hp-shiropara .sp-menu li:first-child { margin-left: 0; }
.hp-shiropara .sp-menu a { display: block; width: 122px; height: 80px; background: no-repeat center top; }
.hp-shiropara .sp-menu__img img { width: 122px; height: 80px; transition: opacity .3s; }
.hp-shiropara .sp-menu__img:hover img,
.hp-shiropara .sp-menu__img.is-active img { opacity: 0; }
.hp-shiropara .sp-menu__text { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--sp-brown); background: var(--sp-panel); text-decoration: none; font-size: 13px; }

/* 速報 */
.hp-shiropara .sp-telop { display: flex; height: 30px; line-height: 32px; margin-bottom: 20px; }
.hp-shiropara .sp-telop__title { flex: none; width: 140px; margin: 0; text-align: center; color: var(--sp-heading-text); font-size: 14px; font-weight: bold; letter-spacing: 2px; background: var(--sp-brown); }
.hp-shiropara .sp-telop__text { flex: 1; margin: 0; padding: 0 5px; overflow: hidden; white-space: nowrap; background: var(--sp-panel); }
.hp-shiropara .sp-telop__text span { display: inline-block; padding-left: 100%; animation: sp-telop 60s linear infinite; }
@keyframes sp-telop { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* スマホでの出し方（管理画面 店舗管理 > ヘッダー/フッター）：パソコンだけの帯／スマホだけの帯（ページの一番下） */
.hp-shiropara .sp-telop--sp-only { display: none; }
@media (max-width: 767px) {
    .hp-shiropara .sp-telop--pc-only { display: none; }
    .hp-shiropara .sp-telop--sp-only { display: flex; margin: 8px 0; }
}

/* ---------- 画像バナー3枚（CTAバナー） ---------- */
.hp-shiropara .sp-banners { display: flex; padding: 20px 0; }
.hp-shiropara .sp-banners li { width: 312px; margin-left: 22px; }
.hp-shiropara .sp-banners li:first-child { margin-left: 0; }
.hp-shiropara .sp-banners a { display: block; }
.hp-shiropara .sp-banners img { width: 100%; height: auto; transition: opacity .3s; }
.hp-shiropara .sp-banners a:hover img { opacity: .8; }

/* ---------- 本文（左サイド250px＋メイン710px） ---------- */
.hp-shiropara .sp-container { margin-bottom: 40px; }
.hp-shiropara .l-page { display: flex; gap: 20px; width: 100%; max-width: 100%; margin: 0; padding: 0; }
.hp-shiropara .l-main { gap: 0; }
.hp-shiropara .l-page--sidebar-left { flex-direction: row; align-items: flex-start; }
.hp-shiropara .l-page--sidebar-left .l-sidebar { order: 0; position: static; flex: none; width: 250px; gap: 20px; }
.hp-shiropara .l-page--sidebar-left .l-main { flex: 1; min-width: 0; width: 710px; max-width: 710px; }
/* 埋め込みウィジェットの固定幅で、左サイドバーが本文へ重ならないようにする */
.hp-shiropara .hp-area-side,
.hp-shiropara .hp-area-side .hp-area-item,
.hp-shiropara .hp-area-side .media-banner-item,
.hp-shiropara .hp-area-side iframe { max-width: 100%; box-sizing: border-box; }
.hp-shiropara .hp-area-side iframe { width: 100%; }
.hp-shiropara .hp-area-side .fujoho_iphone_scroll_size_box,
.hp-shiropara .hp-area-side .fujoho_contents_box { width: 100% !important; max-width: 100%; }
.hp-shiropara .hp-area-side { overflow-x: hidden; }

/* 見出し（各ブロックの色付き帯） */
.hp-shiropara .sp-h3,
.hp-shiropara .l-main h2,
.hp-shiropara .l-sidebar h2 { margin: 0 0 10px; padding-left: 50px; height: 50px; line-height: 52px; color: var(--sp-heading-text); font-size: 16px; font-weight: normal; background-color: var(--sp-heading-today); }

/* ---------- スライドバナー（710×320。サムネイルの列は出さない） ---------- */
.hp-shiropara .bs-wrapper { width: 710px; max-width: 100%; height: 320px; margin: 0 0 20px; border: 1px solid var(--sp-border); box-sizing: border-box; overflow: hidden; }
.hp-shiropara .bs-slider { height: 318px; }
.hp-shiropara .bs-slide, .hp-shiropara .bs-slide a { display: block; height: 318px; }
.hp-shiropara .bs-thumbs { display: none; }
.hp-shiropara .bs-slide img { width: 100%; height: auto; }
/* 左右の余白なし：決まった幅（710px）・高さ・枠線をやめ、枠（980px）いっぱいに。高さは画像の比率のまま */
.hp-shiropara .bs-wrapper--full { width: 100%; height: auto; border: 0; }
.hp-shiropara .bs-wrapper--full .bs-slider,
.hp-shiropara .bs-wrapper--full .bs-slide,
.hp-shiropara .bs-wrapper--full .bs-slide a { height: auto; }

/* ---------- フッター ---------- */
.hp-shiropara .sp-footer-up { display: flex; justify-content: space-between; margin-bottom: 60px; clear: both; }
.hp-shiropara .sp-footer-up__img { flex: none; width: 272px; padding-top: 17px; }
.hp-shiropara .sp-footer-up__info { width: 671px; min-width: 0; }
.hp-shiropara .sp-footer-up__row { display: flex; margin-top: 11px; font-weight: bold; line-height: 34px; }
.hp-shiropara .sp-footer-up__title { flex: none; width: 130px; min-height: 32px; text-align: center; color: var(--sp-heading-text); font-size: 14px; background: var(--sp-brown); }
.hp-shiropara .sp-footer-up__text { flex: 1; min-width: 0; min-height: 32px; padding-left: 20px; font-size: 12px; overflow-wrap: anywhere; background: var(--sp-panel); }
.hp-shiropara .sp-footer-up__row.is-large { min-height: 90px; }
.hp-shiropara .sp-footer-up__row.is-large .sp-footer-up__title { padding-top: 22px; line-height: 1.5; }
.hp-shiropara .sp-footer-up__text .f_tel { display: flex; min-width: 0; flex-wrap: wrap; color: var(--sp-accent); }
.hp-shiropara .sp-footer-up__text .f_tel1 { min-width: 0; max-width: 100%; padding: 8px 0 0; font-size: clamp(32px, 4.3vw, 43px); white-space: nowrap; }
.hp-shiropara .sp-footer-up__text .f_time { padding: 7px 0 0 20px; line-height: 1.3; font-size: 14px; }

.hp-shiropara .sp-footer { min-width: 0; padding: 25px 0 30px; background: var(--sp-panel); clear: both; }
.hp-shiropara .sp-footer__inner { display: flex; justify-content: space-between; min-height: 109px; background: url('/hp/templates/shiropara/f_info.png') no-repeat left top; }
.hp-shiropara .sp-footer__info { width: 380px; margin: 0 0 0 144px; padding-top: 12px; }
.hp-shiropara .sp-footer__name { font-weight: bold; }
.hp-shiropara .sp-footer__tel { padding: 0 10px 0 20px; background: url('/hp/templates/shiropara/f_point3.gif') no-repeat left 5px; }
.hp-shiropara .sp-footer__mail { padding-left: 35px; background: url('/hp/templates/shiropara/f_point3.gif') no-repeat 10px -16px; }
.hp-shiropara .sp-footer__text { display: block; padding-top: 5px; font-size: 12px; }
.hp-shiropara .sp-footer__links { width: 410px; margin-top: 13px; padding-left: 43px; text-align: right; font-size: 11px; border-left: 1px solid var(--sp-border); }
.hp-shiropara .sp-footer__links a { color: var(--sp-text); text-decoration: none; }
.hp-shiropara .sp-footer__list { margin-bottom: 10px; }
.hp-shiropara .sp-footer__list li { display: inline; }
.hp-shiropara .sp-footer__list li:not(:last-child)::after { content: "｜"; }
.hp-shiropara .sp-footer__list + .sp-footer__list { margin-bottom: 30px; }

/* スマホ専用の部品（PCでは出さない） */
.hp-shiropara .sp-hamburger { display: none; }

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
    /* スマホの左右の余白。ヘッダー・本文・トップの段・フッター・料金ページはすべてこの1つの値を読む（2026-11-10 ユーザー指示で15px）。
       デザイン設定から変えられるようにするのは次回へ持ち越し（docs/modules/hp-templates.md） */
    .hp-shiropara { --sp-gutter: 15px; }
    /* 余白は外側の枠（トップの段・下層ページの本文）で1回だけ付ける。内側の枠では付けない（二重にしない） */
    .hp-shiropara .hp-area-layout,
    .hp-shiropara .sp-inner-main { padding-left: var(--sp-gutter); padding-right: var(--sp-gutter); box-sizing: border-box; }
    .hp-shiropara .sp-inner-main .l-page,
    .hp-shiropara .sp-inner-main .sp-system,
    .hp-shiropara .sp-inner-main .sp-page-body,
    .hp-shiropara .sp-inner-main .hp-area-layout { padding-left: 0; padding-right: 0; }
    /* 段の幅で「左右の余白なし」を選んだ段は、スマホでは画面の端から端まで（docs/modules/hp-templates.md の段の幅） */
    .hp-shiropara .hp-area-item[data-width="full"] { margin-left: calc(-1 * var(--sp-gutter)); margin-right: calc(-1 * var(--sp-gutter)); }
    /* 上：ロゴ（小）＋☰。補助のリンク・イラスト・案内画像・説明文は出さない（電話は右下の丸いボタン、営業時間は下の案内に出る） */
    .hp-shiropara .sp-header__up { display: none; }
    .hp-shiropara .sp-header__inner { background-image: none !important; min-height: 0; padding: 8px var(--sp-gutter) 0; box-sizing: border-box; }
    .hp-shiropara .sp-header__logo-w { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; min-height: 0; }
    .hp-shiropara .sp-header__logo { width: 46%; height: auto; margin: 0; }
    .hp-shiropara .sp-header__logo img { width: 100%; height: auto; }
    .hp-shiropara .sp-header__info { display: none; }
    /* メニュー：画像ボタンを4列に */
    .hp-shiropara .sp-menu-w { margin-top: 8px; }
    .hp-shiropara .sp-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
    .hp-shiropara .sp-menu li { width: auto; height: auto; margin-left: 0; }
    .hp-shiropara .sp-menu a { width: 100%; height: auto; aspect-ratio: 122 / 80; background-size: 100% 100%; }
    .hp-shiropara .sp-menu__img img { width: 100%; height: 100%; }
    .hp-shiropara .sp-menu__text { font-size: 11px; }
    .hp-shiropara .sp-telop { margin: 0 calc(-1 * var(--sp-gutter)) 8px; }
    .hp-shiropara .sp-telop__title { width: 96px; font-size: 12px; letter-spacing: 0; }
    .hp-shiropara .sp-banners { flex-direction: column; gap: 8px; padding: 12px; }
    .hp-shiropara .sp-banners li { width: 100%; margin-left: 0; }
    /* スマホは本文（スライダー・出勤・新人）を先に、左サイドの欄（バナー・口コミ）を後ろに */
    .hp-shiropara .l-page, .hp-shiropara .l-page--sidebar-left { flex-direction: column-reverse; padding: 0 var(--sp-gutter); box-sizing: border-box; }
    .hp-shiropara .l-page--sidebar-left .l-sidebar,
    .hp-shiropara .l-page--sidebar-left .l-main { width: 100%; max-width: 100%; }
    .hp-shiropara .sp-footer-up { flex-direction: column; padding: 0 var(--sp-gutter); }
    .hp-shiropara .sp-footer-up__img { display: none; }
    .hp-shiropara .sp-footer-up__info { width: 100%; }
    .hp-shiropara .sp-footer-up__info img { max-width: 100%; height: auto; }
    /* 案内の各段：PCは「見出し｜説明」の横並び（行の高さ34px固定）。スマホは見出しの帯を上、説明を下に積む */
    .hp-shiropara .sp-footer-up__row { flex-direction: column; line-height: 1.6; }
    .hp-shiropara .sp-footer-up__row.is-large { min-height: 0; }
    .hp-shiropara .sp-footer-up__title,
    .hp-shiropara .sp-footer-up__row.is-large .sp-footer-up__title { display: flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 0; padding: 6px 10px; line-height: 1.4; }
    .hp-shiropara .sp-footer-up__title br { display: none; }
    .hp-shiropara .sp-footer-up__title img { height: 20px; width: auto; }
    .hp-shiropara .sp-footer-up__text { min-height: 0; padding: 10px 12px; }
    /* 電話番号は1行に収め、営業時間はその下に */
    .hp-shiropara .sp-footer-up__text .f_tel { flex-direction: column; }
    .hp-shiropara .sp-footer-up__text .f_tel1 { padding: 4px 0 0; font-size: 32px; line-height: 1.2; white-space: nowrap; }
    .hp-shiropara .sp-footer-up__text .f_time { padding: 6px 0 0; }
    .hp-shiropara .sp-footer__inner { flex-direction: column; background-image: none; padding: 0 var(--sp-gutter); }
    .hp-shiropara .sp-footer__info { width: auto; margin: 0; }
    .hp-shiropara .sp-footer__links { width: auto; border-left: 0; padding-left: 0; text-align: left; }
}

/* ---------- 本文のブロック（色付きの見出し帯） ---------- */
.hp-shiropara .sp-block { margin-bottom: 20px; }
.hp-shiropara .sp-block--today { margin-bottom: 10px; }
.hp-shiropara .sp-block--newface { margin-bottom: 0; }
.hp-shiropara .sp-block .todays-heading,
.hp-shiropara .sp-block__title { display: flex; align-items: center; margin: 0 0 10px; padding: 0 0 0 50px; height: 50px; line-height: 52px; color: var(--sp-heading-text); font-size: 16px; font-weight: normal; text-align: left; background-color: var(--sp-heading-today); background-repeat: no-repeat; background-image: url('/hp/templates/shiropara/point_all.png'); background-position: left -50px; }
.hp-shiropara .sp-block .todays-heading__label { display: none; }
.hp-shiropara .sp-block .todays-heading__title { color: var(--sp-heading-text); font-size: 16px; font-weight: normal; letter-spacing: 0; }
/* 共通見出しの下線（::after）は帯の中で文字を上へ押し上げるので、白パラでは出さない */
.hp-shiropara .sp-block .todays-heading__title::after { display: none; }
.hp-shiropara .sp-block--news .todays-heading { background-color: var(--sp-heading-news); background-position: left top; }
.hp-shiropara .sp-block--newface .sp-block__title { background-color: var(--sp-heading-newface); background-position: left -100px; }

/* トップの「最新のお知らせ｜写メ日記」の2列（カスタマイズブロックの箱。元のサイトの #top_content_news：440px＋間20px＋250px） */
.hp-shiropara .cb-block { max-width: none; padding: 0; margin-bottom: 20px; }
.hp-shiropara .cb-grid { gap: 20px; }
.hp-shiropara .cb-cell .sp-block--news { margin-bottom: 0; }
.hp-shiropara .cb-cell .sp-block--news > .todays-heading ~ * { box-sizing: border-box; height: 474px; overflow: auto; padding: 10px !important; background: var(--sp-panel); }
.hp-shiropara .sp-news__item { display: block; padding: 8px 0; border-bottom: 1px solid var(--sp-border); color: var(--sp-text); text-decoration: none; }
.hp-shiropara .sp-news__date { display: block; font-size: 12px; color: var(--sp-brown); }
.hp-shiropara .sp-news__title { font-size: 14px; }
/* 最新1件の本文（管理画面のエディタで書いた中身）。
   画像は元の大きさのまま出し、枠より大きいときだけ縮める。引き伸ばさない（ヘブンの画像は120×180で、
   共通の「リンクの中の画像は横幅いっぱい」が効くと粗くなる。2026-11-10 ユーザー指示） */
.hp-shiropara .sp-news__body { padding: 10px 0; color: var(--sp-text); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.hp-shiropara .sp-news__body img { display: inline-block; max-width: 100%; height: auto; vertical-align: top; }
.hp-shiropara .sp-news__body img:not([width]) { width: auto; }
.hp-shiropara .sp-news__body video,
.hp-shiropara .sp-news__body iframe { max-width: 100%; height: auto; }
.hp-shiropara .sp-news__body table { max-width: 100%; }
.hp-shiropara .sp-news__empty { padding: 20px 0; text-align: center; color: var(--sp-text); }
.hp-shiropara .cb-cell .sp-block .cast_grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.hp-shiropara .cb-cell .hp-embed__heading { margin: 0 0 10px; padding-left: 50px; height: 50px; line-height: 52px; color: var(--sp-heading-text); font-size: 16px; font-weight: normal; text-align: left; background: var(--sp-heading-blog) url('/hp/templates/shiropara/point_all.png') no-repeat left -200px; }
@media (max-width: 767px) {
    .hp-shiropara .cb-cell .sp-block--news > .todays-heading ~ * { height: auto; max-height: 474px; }
}

/* キャストの一覧（5列。写真114×152） */
.hp-shiropara .sp-block [style*="max-width:1030px"],
.hp-shiropara .sp-inner-main .cast_section [style*="max-width:1030px"] { max-width: none !important; padding: 0 !important; }
/* 列数・間隔は、元のサイトの値（5列・幅134px・間隔10px）をテンプレートに固定する。店舗共通の列数の設定（!important）より優先。
   下層ページ（女の子一覧・出勤表など）も同じ。左右の余白を付けず、本文の左端から並べる（2026-11-04 ユーザー指示「左右の余白が元サイトと違う」） */
.hp-shiropara .sp-inner-main .cast_section { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; }
.hp-shiropara .sp-block .cast_grid,
.hp-shiropara .sp-inner-main .cast_section .cast_grid { display: grid; grid-template-columns: repeat(5, 134px) !important; gap: 10px !important; max-width: none; margin: 0; padding: 0; }
.hp-shiropara .sp-block .cast_grid > li,
.hp-shiropara .sp-inner-main .cast_section .cast_grid > li { box-sizing: border-box; margin: 0; }
.hp-shiropara .sp-block .no-staff { padding: 30px 0; text-align: center; color: var(--sp-text); }
.hp-shiropara .sp-block .sc-weekly-btn { display: none; }

/* 新人の女の子（写真＋紹介の2列） */
.hp-shiropara .sp-nf { display: grid; gap: 10px; }
.hp-shiropara .sp-nf__item { display: flex; width: auto; min-width: 0; height: 172px; padding: 9px; box-sizing: border-box; border: 1px solid var(--sp-panel); font-size: 14px; }
.hp-shiropara .sp-nf__img { position: relative; flex: none; width: 114px; height: 152px; }
.hp-shiropara .sp-nf__img > img { width: 114px; height: 152px; object-fit: cover; }
.hp-shiropara .sp-nf__info { flex: 1; min-width: 0; margin-left: 10px; }
.hp-shiropara .sp-nf__name { margin: 0 0 2px; color: var(--sp-accent); font-size: 15px; border-bottom: 2px solid var(--sp-border); }
.hp-shiropara .sp-nf__name span { margin-left: 6px; }
.hp-shiropara .sp-nf__size { margin: 0; font-size: 10px; white-space: pre; }
.hp-shiropara .sp-nf__tags { margin: 2px 0; font-size: 11px; color: var(--sp-accent); }
.hp-shiropara .sp-nf__comment { height: 77px; line-height: 1.1; font-size: 11px; overflow-y: auto; }
@media (max-width: 767px) {
    .hp-shiropara .sp-block .cast_grid,
    .hp-shiropara .sp-inner-main .cast_section .cast_grid { grid-template-columns: repeat(2, 1fr) !important; }
    .hp-shiropara .sp-nf__item { width: auto; height: auto; min-height: 172px; }
    .hp-shiropara .bs-wrapper { width: 100%; height: auto; }
    .hp-shiropara .bs-slider, .hp-shiropara .bs-slide, .hp-shiropara .bs-slide a { height: auto; }
}

/* 共通の下層ページ（女の子一覧・出勤予定・割引情報など）のページ名も、白パラの桃色の帯（.sp-ctitle と同じ）にする。
   英語の小見出しとパンくずは出さない（元のサイトの下層ページには無い。2026-11-04 ユーザー指示） */
.hp-shiropara .page-header { margin: 0 0 10px; padding: 0 0 0 20px; height: 50px; background: var(--sp-heading-today) !important; text-align: left; box-shadow: none; border-radius: 0; }
.hp-shiropara .page-header__title { margin: 0; color: var(--sp-heading-text) !important; font-size: 16px !important; font-weight: normal; line-height: 52px; text-align: left; letter-spacing: normal; }
.hp-shiropara .page-header__title span { display: none; }
.hp-shiropara .breadcrumb { display: none; }

/* ---------- 下層ページの左の欄（250px）｜本文（710px）。元のサイトの #side・#main_content ---------- */
.hp-shiropara .sp-inner { display: flex; align-items: flex-start; gap: 20px; }
.hp-shiropara .sp-inner-side { flex: none; width: 250px; min-width: 0; }
.hp-shiropara .sp-inner-main { flex: 1; min-width: 0; width: 710px; max-width: 710px; }
.hp-shiropara .sp-inner-side .hp-embed { padding: 0; gap: 20px; margin-bottom: 20px; }
.hp-shiropara .sp-inner-side .hp-embed__grid { grid-template-columns: minmax(0, 1fr); }
/* 画像の段（サイドバナーと同じ並び：縦に1列・間20px） */
.hp-shiropara .sp-inner-side .hp-image-block { grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0 0 20px; }
.hp-shiropara .hp-area-side .hp-image-block { gap: 20px; margin-bottom: 0; }
.hp-shiropara .sp-inner-side .hp-embed__heading { display: none; }
.hp-shiropara .sp-inner-side .hp-embed__row:has(.sp-home-only) { display: none; }
.hp-shiropara .sp-inner-side iframe { max-width: 100%; }
.hp-shiropara .sp-inner-side .l-sidebar-banners { display: flex; flex-direction: column; gap: 20px; }
.hp-shiropara .sp-inner-side .l-sidebar-banner { display: block; width: 250px; }
.hp-shiropara .sp-inner-side .l-sidebar-banner img { width: 100%; height: auto; transition: opacity .3s; }
.hp-shiropara .sp-inner-side a.l-sidebar-banner:hover img { opacity: .8; }
/* つぶやきの欄（外部パーツのマスに class="sp-tweet"）。帯は見出し帯と同じ形で、色は「見出し帯：左の欄のつぶやき」 */
.hp-shiropara .sp-tweet__title { margin: 0 0 10px; padding-left: 50px; height: 50px; line-height: 52px; color: var(--sp-heading-text); background: var(--sp-heading-tweet) url('/hp/templates/shiropara/point_all.png') no-repeat left -150px; }
.hp-shiropara .sp-tweet { text-align: left; }
.hp-shiropara .sp-tweet__body { height: 395px; overflow: hidden; }

/* ---------- システム（料金）ページ。元のサイトの system.css / map.css の寸法 ---------- */
.hp-shiropara .sp-system { margin: 0 0 40px; }
.hp-shiropara .sp-ctitle { margin: 0 0 10px; padding-left: 20px; height: 50px; line-height: 52px; color: var(--sp-heading-text); font-size: 16px; font-weight: normal; background: var(--sp-heading-today); }
.hp-shiropara .sp-system__intro { padding-bottom: 20px; margin-bottom: 20px; }
/* 案内の1行目（「初めてのお客様は…」＋コンセプトのボタン） */
.hp-shiropara .sp-system__intro .sp-lead { display: flex; justify-content: space-between; align-items: center; margin: 0 0 20px; padding: 10px 0 20px; border-bottom: 1px dashed var(--sp-border); }
.hp-shiropara .sp-system__intro .sp-lead p { margin: 0; line-height: 62px; font-size: 18px; }
.hp-shiropara .sp-system__intro .sp-button { display: block; width: 270px; height: 60px; line-height: 62px; color: var(--sp-heading-text); text-align: center; text-decoration: none; background: var(--sp-brown) url('/hp/templates/shiropara/point_link.png') no-repeat left top; transition: opacity .3s; }
.hp-shiropara .sp-system__intro .sp-button:hover { opacity: .8; }
/* 4つの枠（上＝色の付いた見出し、下＝説明） */
.hp-shiropara .sp-system__intro .sp-info { display: grid; grid-template-columns: repeat(4, 164px); justify-content: space-between; margin-bottom: 20px; text-align: center; }
.hp-shiropara .sp-system__intro .sp-info__up { display: flex; align-items: center; justify-content: center; height: 100px; margin: 0; line-height: 1.2; color: var(--sp-heading-text); font-size: 19px; background: var(--sp-info-box); }
.hp-shiropara .sp-system__intro .sp-info__up.is-small { font-size: 16px; }
.hp-shiropara .sp-system__intro .sp-info__up .is-small { font-size: 12px; }
.hp-shiropara .sp-system__intro .sp-info__bottom { height: 100px; margin: 0; padding-top: 20px; box-sizing: border-box; font-size: 13px; background: var(--sp-panel); }
.hp-shiropara .sp-system__intro .sp-info__bottom .is-accent { color: var(--sp-link); }
.hp-shiropara .sp-system__intro .sp-pill { width: 385px; max-width: 100%; height: 50px; line-height: 52px; margin: 0 auto; color: var(--sp-heading-text); text-align: center; font-size: 18px; border-radius: 25px; background: var(--sp-accent); }
/* コース（見出し＝ハートの印＋下線） */
.hp-shiropara .sp-course { margin-bottom: 40px; }
.hp-shiropara .sp-h4 { margin: 0 0 20px; padding-left: 40px; height: 34px; line-height: 30px; color: var(--sp-brown); font-size: 30px; font-weight: normal; white-space: nowrap; overflow: hidden; border-bottom: 1px solid var(--sp-course-sub); background: url('/hp/templates/shiropara/point_all.png') no-repeat left -269px; }
.hp-shiropara .sp-h4 span { color: var(--sp-course-sub); }
.hp-shiropara .sp-course__text { margin: 0 0 20px; font-size: 13px; }
.hp-shiropara .sp-course__lead { display: block; padding: 10px 0; color: var(--sp-brown); font-size: 16px; font-weight: bold; }
.hp-shiropara .sp-price { width: 100%; text-align: center; font-size: 14px; border-collapse: collapse; }
.hp-shiropara .sp-price th, .hp-shiropara .sp-price td { width: 20%; padding: 5px 0; border: 0; }
.hp-shiropara .sp-price th { color: var(--sp-price-head); font-weight: normal; background: var(--sp-price-head-bg); }
.hp-shiropara .sp-price td { color: var(--sp-text); background: var(--sp-price-cell-bg); }
/* オプション（料金ごとの帯＋名前｜説明） */
.hp-shiropara .sp-option-group__title { margin: 0 0 20px; border-bottom: 1px solid var(--sp-price-head); font-weight: normal; }
.hp-shiropara .sp-option-group__title span { display: block; width: 200px; height: 25px; line-height: 30px; text-align: center; color: var(--sp-heading-text); font-size: 14px; background: var(--sp-price-head); }
.hp-shiropara .sp-op { display: flex; margin: 0 0 10px; font-size: 13px; }
.hp-shiropara .sp-op__title { flex: none; width: 270px; height: 25px; line-height: 27px; color: var(--sp-price-head); text-align: center; background: var(--sp-price-head-bg); }
.hp-shiropara .sp-op__text { flex: none; width: 440px; min-width: 0; height: 25px; padding-left: 10px; line-height: 27px; }
/* 割引・注意事項・クレジット（固定ページ「system-notes」）。h2＝コースと同じ見出し */
.hp-shiropara .sp-system__notes h2 { margin: 0 0 20px; padding-left: 40px; height: 34px; line-height: 30px; color: var(--sp-brown); font-size: 30px; font-weight: normal; border-bottom: 1px solid var(--sp-course-sub); background: url('/hp/templates/shiropara/point_all.png') no-repeat left -269px; }
.hp-shiropara .sp-system__notes .sp-section { margin-bottom: 40px; }
.hp-shiropara .sp-system__notes .sp-list2 { margin: 0; }
.hp-shiropara .sp-system__notes .sp-notes { display: flex; gap: 0; font-size: 12px; }
.hp-shiropara .sp-system__notes .sp-notes ul { width: 355px; }
.hp-shiropara .sp-system__notes .sp-notes span { color: var(--sp-link); }
.hp-shiropara .sp-system__notes .sp-text { margin: 0; font-size: 13px; }
.hp-shiropara .sp-system__notes .sp-text .sp-course__lead { color: var(--sp-brown); }
.hp-shiropara .sp-system__notes img { height: auto; }
/* 名前｜内容の一覧（割引・アクセス）。幅は元のCSSの「幅＋左の余白」（元は余白を幅に含めない数え方） */
.hp-shiropara .sp-list2 li { display: flex; min-height: 25px; line-height: 27px; font-size: 13px; background: var(--sp-price-head-bg); }
.hp-shiropara .sp-list2 li:nth-child(2n) { background: var(--sp-price-cell-bg); }
.hp-shiropara .sp-list2__title { flex: none; width: 175px; padding-left: 25px; }
.hp-shiropara .sp-list2 .is-title { flex: none; width: 240px; padding-left: 25px; color: var(--sp-price-head); }
.hp-shiropara .sp-list2__text { flex: 1; min-width: 0; }
/* マップ */
.hp-shiropara .sp-access { padding-top: 10px; margin-bottom: 40px; }
.hp-shiropara .sp-map { width: 710px; max-width: 100%; height: 350px; margin-bottom: 30px; }
.hp-shiropara .sp-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.hp-shiropara .sp-hotels__cols { display: flex; }
.hp-shiropara .sp-hotels__list { width: 355px; }
.hp-shiropara .sp-hotels__list li { display: flex; height: 25px; line-height: 27px; font-size: 13px; background: var(--sp-hotel-bg); transition: background .3s; }
.hp-shiropara .sp-hotels__list li:nth-child(2n) { background: var(--sp-hotel-bg2); }
.hp-shiropara .sp-hotels__list li:hover { background: var(--sp-hotel-hover); }
.hp-shiropara .sp-hotels__list a { color: inherit; text-decoration: none; }
.hp-shiropara .sp-hotels__no { flex: none; width: 60px; padding-left: 30px; color: var(--sp-hotel-no); }
.hp-shiropara .sp-hotels__name { flex: none; width: 140px; }
.hp-shiropara .sp-hotels__tel { flex: 1; }
@media (max-width: 767px) {
    /* スマホ：左の欄は出さない（☰メニュー・下の固定ナビにまとめている）。本文は画面の幅いっぱい */
    .hp-shiropara .sp-inner { display: block; }
    .hp-shiropara .sp-inner-side { display: none; }
    .hp-shiropara .sp-inner-main { width: auto; max-width: none; }
    .hp-shiropara .sp-system { padding: 0 var(--sp-gutter); }
    .hp-shiropara .sp-system__intro .sp-lead { flex-direction: column; align-items: stretch; gap: 10px; }
    .hp-shiropara .sp-system__intro .sp-lead p { line-height: 1.6; font-size: 15px; }
    .hp-shiropara .sp-system__intro .sp-button { width: auto; }
    .hp-shiropara .sp-system__intro .sp-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hp-shiropara .sp-system__intro .sp-info__up { font-size: 16px; }
    .hp-shiropara .sp-system__intro .sp-info__bottom { height: auto; min-height: 80px; padding: 12px 4px; box-sizing: border-box; }
    .hp-shiropara .sp-h4, .hp-shiropara .sp-system__notes h2 { height: auto; min-height: 34px; white-space: normal; font-size: 20px; line-height: 1.5; }
    .hp-shiropara .sp-h4 span { display: inline-block; }
    .hp-shiropara .sp-price { font-size: 13px; }
    .hp-shiropara .sp-op { flex-direction: column; }
    .hp-shiropara .sp-op__title { width: auto; height: auto; min-height: 25px; }
    .hp-shiropara .sp-op__text { width: auto; height: auto; padding: 4px 0 0; line-height: 1.5; }
    .hp-shiropara .sp-system__notes .sp-notes { flex-direction: column; gap: 10px; }
    .hp-shiropara .sp-system__notes .sp-notes ul { width: auto; }
    .hp-shiropara .sp-list2__title, .hp-shiropara .sp-list2 .is-title { width: 110px; padding-left: 10px; }
    .hp-shiropara .sp-hotels__cols { flex-direction: column; }
    .hp-shiropara .sp-hotels__list { width: auto; }
    .hp-shiropara .sp-hotels__no { width: 40px; padding-left: 10px; }
    .hp-shiropara .sp-hotels__name { flex: 1; width: auto; }
    .hp-shiropara .sp-hotels__tel { flex: none; width: 110px; }
}

/* ---------- 固定ページ（求人・受付の方法・マップなど。hp/templates/shiropara/page.blade.php） ----------
   元のサイトの下層ページと同じく、パンくずは無く、ページ名は桃色の帯。本文で使える見た目は下の class（寸法は元の recruit.css） */
.hp-shiropara .sp-page-body { margin-bottom: 0; }
.hp-shiropara .sp-free { line-height: 1.6; }
.hp-shiropara .sp-free > .sp-ctitle, .hp-shiropara .sp-free .sp-ctitle { margin: 0 0 10px; }
.hp-shiropara .sp-free h2 { margin: 30px 0 20px; padding-left: 40px; min-height: 34px; line-height: 30px; color: var(--sp-brown); font-size: 30px; font-weight: normal; border-bottom: 1px solid var(--sp-course-sub); background: url('/hp/templates/shiropara/point_all.png') no-repeat left -269px; }
.hp-shiropara .sp-free h3:not(.sp-h4) { margin: 16px 0 6px; color: var(--sp-brown); font-size: 16px; }
.hp-shiropara .sp-free h2 span { color: var(--sp-course-sub); }
.hp-shiropara .sp-free img { height: auto; }
/* 画像（中央・最大640px）。.is-mb40 で下に40pxあける */
.hp-shiropara .sp-free .sp-img { text-align: center; }
.hp-shiropara .sp-free .sp-img img, .hp-shiropara .sp-free .sp-imgs img { width: 100%; max-width: 640px; }
.hp-shiropara .sp-free .sp-img.is-mb40 { margin-bottom: 40px; }
.hp-shiropara .sp-free .sp-imgs { text-align: center; }
.hp-shiropara .sp-free .sp-imgs li + li { margin-top: 0; }
/* 角の丸い枠 */
.hp-shiropara .sp-free .sp-ccard { margin: 40px auto; padding: 30px; border: 1px solid var(--sp-card-border); border-radius: 25px; }
.hp-shiropara .sp-free .sp-ccard video { width: 80%; height: auto; }
.hp-shiropara .sp-free .sp-txt { margin: 18px 0; padding: 5px; line-height: 32px; font-size: 14px; }
/* 項目の一覧（応募要項など。項目ごとに点線） */
.hp-shiropara .sp-free .sp-vi { margin: 0 auto 10px; padding: 0 0 5px; line-height: 1.5; }
/* 元のサイトは太字の指定（b・strong）が初期化されて普通の太さで出る。同じ見た目にする */
.hp-shiropara .sp-free .sp-vi strong, .hp-shiropara .sp-free .sp-txt strong { font-weight: normal; }
.hp-shiropara .sp-free .sp-vi li { margin-bottom: 5px; padding: 15px 0; border-bottom: 1px dashed var(--sp-list-rule); }
/* 応募ボタン（画像を横に3つ） */
.hp-shiropara .sp-free .sp-cta { display: flex; gap: 3%; }
.hp-shiropara .sp-free .sp-cta li { width: 30%; }
/* 元のサイトは画像を本来の大きさ（230px）のまま並べ、枠（30%）から少しはみ出す。PCは同じ出方、スマホは枠に収める */
.hp-shiropara .sp-free .sp-cta img { width: auto; max-width: none; }
/* 求人マスターの応募ボタン（[応募ボタン] の印。hp/partials/apply-buttons）も、元のサイトの .sp-cta と同じ並び（2026-11-07） */
.hp-shiropara .sp-free .hp-apply-buttons { display: flex; flex-wrap: nowrap; gap: 3%; }
.hp-shiropara .sp-free .hp-apply-buttons__item { flex: none; width: 30%; min-width: 0; }
.hp-shiropara .sp-free .hp-apply-buttons__item img { width: auto; max-width: none; }
/* 受付の方法（手順。番号の見出し・写真・角の丸い説明と下向きの矢印）。寸法は元の howto.css、番号と矢印の絵は recep_num.png（テンプレートの飾り） */
.hp-shiropara .sp-free .sp-recep { padding-top: 10px; margin-bottom: 40px; line-height: 1.5; }
.hp-shiropara .sp-free .sp-step { margin-bottom: 40px; }
.hp-shiropara .sp-free .sp-step__title { height: 40px; margin: 30px 0; padding: 8px 0 0 45px; box-sizing: border-box; color: var(--sp-brown); font-size: 24px; line-height: 1.2; background: url('/hp/templates/shiropara/recep_num.png') no-repeat left top; }
.hp-shiropara .sp-free .sp-step__title.is-2 { background-position: left -40px; }
.hp-shiropara .sp-free .sp-step__title.is-3 { background-position: left -80px; }
.hp-shiropara .sp-free .sp-step__row { display: flex; }
.hp-shiropara .sp-free .sp-step__img { flex: none; width: 180px; margin-right: 30px; }
/* 3つ目の手順の横長の写真（手順の行の外に置く）は、幅を絞らない */
.hp-shiropara .sp-free .sp-step > .sp-step__img { width: auto; margin-right: 0; }
.hp-shiropara .sp-free .sp-recep > h2:first-child { margin-top: 0; }
.hp-shiropara .sp-free .sp-step__info { width: 500px; min-width: 0; }
.hp-shiropara .sp-free .sp-step__text { margin: 0; padding: 10px 0; font-size: 13px; text-align: center; border-radius: 20px; background: var(--sp-step-bg); }
.hp-shiropara .sp-free .sp-step__text span { color: var(--sp-brown); font-size: 12px; font-weight: bold; }
.hp-shiropara .sp-free .sp-step__arrow { display: block; width: 34px; height: 30px; margin: 0 auto; background: url('/hp/templates/shiropara/recep_num.png') no-repeat left -120px; }

/* コンセプト（固定ページ concept。寸法は元の concept.css。「しろぱら」側の色はアクセント、「他店」側は concept_other） */
.hp-shiropara .sp-free .sp-conc__sec { margin-bottom: 50px; }
.hp-shiropara .sp-free .sp-conc__sec > h2:first-child { margin-top: 0; }
.hp-shiropara .sp-free .sp-conc__topimg { margin: 0 0 50px; padding-top: 10px; }
.hp-shiropara .sp-free .sp-conc__toptext { margin: 0; padding: 20px 0; text-align: center; color: var(--sp-accent); font-size: 20px; letter-spacing: 2px; border: 1px solid var(--sp-accent); }
.hp-shiropara .sp-free .sp-conc__text { margin: 0; font-size: 13px; }
.hp-shiropara .sp-free .sp-conc__text2 { margin: 0; font-size: 12px; }
.hp-shiropara .sp-free .sp-conc__img1 { margin: 20px 0 10px; }
.hp-shiropara .sp-free .sp-conc__img2 { margin: 40px 0; }
.hp-shiropara .sp-free .sp-conc img { max-width: 100%; }
.hp-shiropara .sp-free .sp-conc__button { display: block; width: 270px; max-width: 100%; height: 60px; margin: 0 auto; line-height: 62px; color: var(--sp-heading-text); text-align: center; text-decoration: none; background: var(--sp-accent) url('/hp/templates/shiropara/point_link.png') no-repeat left top; transition: opacity .3s; }
.hp-shiropara .sp-free .sp-conc__button:hover { opacity: .8; }
/* オプションの節：元のサイトは右上（見出しの下50px）に写真を背景で敷く。管理画面から差し替えられるよう画像として置き、同じ位置へ重ねる */
.hp-shiropara .sp-free .sp-conc__op { position: relative; }
.hp-shiropara .sp-free .sp-conc__op .sp-conc__text { position: relative; margin-bottom: 60px; }
.hp-shiropara .sp-free .sp-conc__opimg { position: absolute; top: 50px; right: 0; width: 247px; }
.hp-shiropara .sp-free .sp-conc__vs { display: flex; margin: 15px 0 30px; font-size: 20px; font-weight: bold; border-bottom: 2px solid var(--sp-accent); }
.hp-shiropara .sp-free .sp-conc__vs.is-other { margin-top: 30px; margin-bottom: 0; border-bottom-color: var(--sp-concept-other); }
/* 高さは元の concept.css と同じく余白を含まない数え方（content-box）。サイト全体の border-box のままだと、上の余白の分だけ枠が縮んで文字が下へはみ出す */
.hp-shiropara .sp-free .sp-conc__vs-title { flex: none; display: block; box-sizing: content-box; width: 65px; height: 60px; padding-top: 15px; line-height: 1.2; color: var(--sp-heading-text); text-align: center; background: var(--sp-accent); }
.hp-shiropara .sp-free .sp-conc__vs.is-other .sp-conc__vs-title { height: 45px; padding-top: 30px; background: var(--sp-concept-other); }
.hp-shiropara .sp-free .sp-conc__vs-text { flex: 1; min-width: 0; display: block; padding: 7px 0 0 15px; color: var(--sp-accent); }
.hp-shiropara .sp-free .sp-conc__vs.is-other .sp-conc__vs-text { color: var(--sp-concept-other); }

@media (max-width: 767px) {
    .hp-shiropara .sp-page-body { padding: 0 var(--sp-gutter); }
    /* 帯の文字が長いと右で切れるので、スマホは折り返して帯を伸ばす */
    .hp-shiropara .sp-ctitle { height: auto; min-height: 50px; padding: 13px 12px 11px 20px; line-height: 1.5; box-sizing: border-box; }
    .hp-shiropara .page-header { height: auto; min-height: 50px; padding: 13px 12px 11px 20px; box-sizing: border-box; }
    .hp-shiropara .page-header__title { line-height: 1.5; }
    .hp-shiropara .sp-free h2 { font-size: 20px; line-height: 1.5; }
    .hp-shiropara .sp-free .sp-ccard { margin: 20px auto; padding: 16px; }
    .hp-shiropara .sp-free .sp-ccard video { width: 100%; }
    .hp-shiropara .sp-free .sp-txt { line-height: 1.9; }
    .hp-shiropara .sp-free .sp-cta img { width: 100%; max-width: 100%; }
    .hp-shiropara .sp-free .hp-apply-buttons__item img { width: 100%; max-width: 100%; }
    /* 番号の絵は縦に並んだ1枚なので、見出しを高くすると次の番号がのぞく。スマホは文字を小さくして1行（高さ40px）に収める */
    .hp-shiropara .sp-free .sp-step__title { padding-top: 12px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hp-shiropara .sp-free .sp-step__row { flex-direction: column; align-items: center; gap: 12px; }
    .hp-shiropara .sp-free .sp-step__img { margin-right: 0; }
    .hp-shiropara .sp-free .sp-step__info { width: 100%; }
    .hp-shiropara .sp-free .sp-step__text { padding: 10px 12px; }
    .hp-shiropara .sp-free .sp-conc__toptext { font-size: 16px; letter-spacing: 1px; }
    /* 写真を文の上に重ねると読めないので、スマホは文の下へ置く */
    .hp-shiropara .sp-free .sp-conc__opimg { position: static; display: block; margin: 0 auto 20px; }
    .hp-shiropara .sp-free .sp-conc__op .sp-conc__text { margin-bottom: 20px; }
    .hp-shiropara .sp-free .sp-conc__vs { font-size: 15px; }
    .hp-shiropara .sp-free .sp-conc__vs-text br { display: none; }
}

/* ---------- キャスト詳細：対応コース・オプション ---------- */
.hp-shiropara .cp-courses-label { margin: 10px 0 4px; font-size: 13px; color: var(--sp-brown); }
.hp-shiropara .cp-courses-none { font-size: 13px; color: var(--sp-text); }
.hp-shiropara .cp-ng-tag { color: var(--sp-text); background: var(--sp-panel); border: 1px solid var(--sp-border); text-decoration: line-through; }

/* ---------- スマホのナビ（☰メニュー＋下の固定ナビ） ----------
   幅は bottom-nav.css（下の固定ナビ）と同じ 767px で切り替える。上の画像メニューはスマホでは出さず、
   全項目は☰のメニュー、よく使う5つは下の固定ナビ（デザイン設定 > ナビゲーション > スマホ下部）へまとめる */
@media (max-width: 767px) {
    .hp-shiropara .sp-menu-w { display: none; }
    /* 右下の丸い電話ボタン（共通 bottom-nav.css）も、下の固定ナビと同じくスクロールを待たずに最初から出す */
    .hp-shiropara .sp-tel-btn { transform: none; opacity: 1; }
    .hp-shiropara .sp-header__inner { padding-bottom: 8px; }
    .hp-shiropara .sp-hamburger { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 52px; min-height: 52px; padding: 0; border: 0; border-radius: 8px; cursor: pointer; background: var(--sp-brown); color: var(--sp-heading-text); }
    .hp-shiropara .sp-hamburger span { display: block; width: 24px; height: 2px; margin: 2px 0; background: currentColor; }
    .hp-shiropara .sp-hamburger small { margin-top: 3px; font-size: 9px; font-weight: bold; line-height: 1; }
    /* 下の固定ナビは、スクロールを待たずに最初から出す（上の画像メニューを出さないため） */
    .hp-shiropara .bottom-nav { transform: none; background-color: var(--sp-brown); border-top-color: var(--sp-border); }
    .hp-shiropara .bottom-nav__item { color: var(--sp-heading-text); }
    .hp-shiropara .bottom-nav__label { font-size: 10px; }
}

/* ---------- ☰メニュー（スマホ）の既定色 ----------
   未設定のときは白パラの配色を使う。デザイン設定 > ナビゲーション > スマホメニューの色を入れると、そちらが優先（#mobileNav に出る） */
.hp-shiropara .mobile-nav { --dw-accent: var(--sp-brown); --dw-sub: var(--sp-text); --dw-btn: var(--sp-brown); --dw-btn2: var(--sp-brown); --dw-btn-text: var(--sp-heading-text); --dw-line: var(--sp-border); --dw-soft: var(--sp-panel); --dw-pop: var(--sp-accent); }
.hp-shiropara .mobile-nav .nav-close, .hp-shiropara .mobile-nav .main-title, .hp-shiropara .mobile-nav .tel-number { color: var(--dw-accent); }
.hp-shiropara .mobile-nav .nav-header { border-bottom-color: var(--dw-line); }
.hp-shiropara .mobile-nav .btn-cyan { background: var(--dw-btn); color: var(--dw-btn-text); }

/* 明示的に選択したデザインでは、テンプレートの固定高・サムネイル非表示を解除 */
.hp-shiropara .bs-wrapper.bs-design--thumbnails,
.hp-shiropara .bs-wrapper.bs-design--simple,
.hp-shiropara .bs-wrapper.bs-design--carousel { height: auto; }
.hp-shiropara .bs-design--thumbnails .bs-thumbs { display: flex; }
.hp-shiropara .bs-wrapper:not(.bs-design--template) .bs-slider,
.hp-shiropara .bs-wrapper:not(.bs-design--template) .bs-slide,
.hp-shiropara .bs-wrapper:not(.bs-design--template) .bs-slide a { height: auto; }
.hp-shiropara .bs-wrapper:not(.bs-design--template) .bs-anim--vertical .bs-slide,
.hp-shiropara .bs-wrapper:not(.bs-design--template) .bs-anim--vertical .bs-slide a { height: 100%; }

/* ===== キャスト詳細（hp/templates/shiropara/pages/girl.blade.php）。元のサイトの profile.css の再現（2026-11-07） =====
   左 710px（プロフィール・週間出勤予定表）｜右 250px（ブログ）。色は --sp-*（デザイン設定）。寸法は元のサイトの値で固定 */
.hp-shiropara .sp-girl { display: flex; align-items: flex-start; gap: 20px; width: 980px; max-width: 100%; margin: 0 auto 40px; color: var(--sp-text); }
.hp-shiropara .sp-girl__main { flex: none; width: 710px; max-width: 100%; min-width: 0; }
.hp-shiropara .sp-girl .sp-ctitle { margin-bottom: 20px; }
.hp-shiropara .sp-girl__top { display: flex; align-items: flex-start; gap: 20px; }
.hp-shiropara .sp-girl__photos { flex: none; width: 300px; }
.hp-shiropara .sp-girl__big { height: 400px; margin-bottom: 8px; overflow: hidden; }
.hp-shiropara .sp-girl__big img { display: block; width: 300px; height: auto; }
.hp-shiropara .sp-girl__thumbs { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; height: 92px; overflow: hidden; }
.hp-shiropara .sp-girl__thumbs li { width: 75px; }
.hp-shiropara .sp-girl__thumbs img { display: block; width: 75px; height: auto; cursor: pointer; }
.hp-shiropara .sp-girl__info { flex: none; width: 390px; min-width: 0; }
.hp-shiropara .sp-girl__namebox { margin-bottom: 30px; }
.hp-shiropara .sp-girl__name { margin: 0 0 10px; height: 40px; line-height: 42px; font-size: 30px; color: var(--sp-accent); border-bottom: 1px solid var(--sp-text); }
.hp-shiropara .sp-girl__name span { padding-left: 20px; font-size: 20px; }
.hp-shiropara .sp-girl__size { margin: 0; font-size: 14px; }
.hp-shiropara .sp-girl__catch { margin: 0; font-size: 18px; color: var(--sp-brown); }
.hp-shiropara .sp-girl__title { margin: 0 0 10px; padding-left: 30px; height: 20px; line-height: 22px; font-size: 18px; font-weight: normal; color: var(--sp-accent); background: url('/hp/templates/shiropara/point_all.png') no-repeat left bottom; }
.hp-shiropara .sp-girl__text { margin: 0 0 20px; padding: 10px; font-size: 13px; background: var(--sp-panel); overflow-wrap: anywhere; }
.hp-shiropara .sp-girl__comment { min-height: 110px; }
.hp-shiropara .sp-girl__short { min-height: 20px; }
.hp-shiropara .sp-girl__weektitle { margin: 20px 0 0 !important; }
.hp-shiropara .sp-girl__week { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; color: var(--sp-week-text); line-height: 1.2; text-align: center; border: 2px solid var(--sp-week-border); border-top-width: 0; }
.hp-shiropara .sp-girl__week th { height: 50px; vertical-align: middle; font-weight: normal; background: var(--sp-week-head-bg); border-right: 1px solid var(--sp-week-rule); border-bottom: 1px solid var(--sp-week-rule); }
.hp-shiropara .sp-girl__week th.is-sat { background: var(--sp-week-sat); }
.hp-shiropara .sp-girl__week th.is-sun { background: var(--sp-week-sun); }
.hp-shiropara .sp-girl__week td { height: 80px; padding: 0 5px; vertical-align: middle; font-weight: bold; word-break: break-all; border-right: 1px solid var(--sp-week-rule); }
.hp-shiropara .sp-girl__week th:last-child, .hp-shiropara .sp-girl__week td:last-child { border-right: 0; }
.hp-shiropara .sp-girl__blog { flex: none; width: 250px; }
.hp-shiropara .sp-girl__blog h3 { margin: 0 0 10px; padding-left: 50px; height: 50px; line-height: 52px; font-size: 16px; font-weight: normal; color: var(--sp-heading-text); background: var(--sp-heading-blog) url('/hp/templates/shiropara/point_all.png') no-repeat left -200px; }
.hp-shiropara .sp-girl__blog iframe { display: block; max-width: 100%; border: 0; }
@media (max-width: 767px) {
    .hp-shiropara .sp-girl { display: block; padding: 0 10px; box-sizing: border-box; }
    .hp-shiropara .sp-girl__top { display: block; }
    .hp-shiropara .sp-girl__photos { width: 100%; max-width: 300px; margin: 0 auto 20px; }
    .hp-shiropara .sp-girl__big { height: auto; }
    .hp-shiropara .sp-girl__big img { width: 100%; }
    .hp-shiropara .sp-girl__info { width: 100%; }
    .hp-shiropara .sp-girl__name { font-size: 24px; }
    .hp-shiropara .sp-girl__week { font-size: 11px; }
    .hp-shiropara .sp-girl__week td { padding: 0 2px; }
    .hp-shiropara .sp-girl__blog { width: 250px; margin: 20px auto 0; }
}
.hp-shiropara .sp-girl__reserve { margin: -10px 0 20px; }
.hp-shiropara .sp-girl__reserve a { display: block; padding: 10px; text-align: center; font-size: 16px; color: var(--sp-heading-text); background: var(--sp-accent); text-decoration: none; }