/* ==========================================================================
   タブレット (769px〜1200px: iPad縦・横想定) 対応
   ヘッダーがpx固定幅の要素を横並びさせているため、PC幅未満では
   崩れる/はみ出す。ここではヘッダー内の各要素を縮小して収める。
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1200px) {

  .header-top {
    padding: 12px 16px;
    gap: 12px;
  }
  .header-brand {
    gap: 16px;
  }
  .header-logo {
    width: 76px;
  }
  .header-brand-body {
    gap: 6px;
  }
  .header-catch {
    width: 220px;
  }
  .header-brand-sub {
    gap: 16px;
    flex-wrap: wrap;
  }
  .header-info {
    font-size: .82rem;
    white-space: normal;
  }
  .header-brand-buttons {
    gap: 8px;
  }
  .header-brand-buttons img {
    width: 110px;
  }
  .header-actions {
    gap: 14px;
  }
  .header-icon-btn img {
    width: 48px;
  }
  .header-line {
    font-size: .72rem;
    gap: 4px;
  }
  .header-line img {
    width: 40px;
  }
  .header-divider {
    height: 40px;
  }
  .header-menu-btn {
    font-size: .72rem;
    gap: 4px;
  }
  .header-menu-btn .bars span {
    width: 30px;
  }

  .global-nav ul {
    padding: 10px 16px;
    gap: 6px;
  }
  .global-nav a {
    font-size: .8rem;
    min-height: 40px;
    padding: 0 4px;
  }
}

/* ==========================================================================
   SP (768px以下) レスポンシブ対応
   ========================================================================== */
@media (max-width: 768px) {

  .container {
    padding: 0 16px;
  }

  /* 新人情報以下の .container.corner-frame セクション(一覧ページの
     .list-frame は対象外)は、隅飾り(frame-05/06)の位置を本日の出勤の
     隅飾り位置( .container のpadding 16px + 10px = 26px )に揃える */
  .container.corner-frame:not(.list-frame)::before {
    left: 26px;
  }
  .container.corner-frame:not(.list-frame)::after {
    right: 26px;
  }

  .section {
    padding: 44px 0;
  }

  .section-title {
    font-size: 2.1rem;
  }
  .section-title::after {
    width: 280px;
    height: 18px;
  }

  /* PC/共通ルールの padding-top(26px) は、見出しのmargin-top(30px)と
     合わせるとSPでは間延びして見えるため詰める。
     0にすると直下の見出しのmargin-topがコンテナの外側に漏れてしまう
     (margin collapse)ため、1pxだけ持たせて漏れを防ぐ */
  .container.corner-frame:not(.list-frame) {
    padding-top: 1px;
  }

  .corner-frame::before,
  .corner-frame::after {
    width: 34px;
    height: 38px;
    top: 4px;
  }
  .corner-frame::before { left: 4px; }
  .corner-frame::after { right: 4px; }

  .event-banner-corner {
    width: 34px;
    height: 38px;
    bottom: 4px;
  }
  .event-banner-corner--bl { left: 4px; }
  .event-banner-corner--br { right: 4px; }

  /* ---------- ヘッダー ---------- */
  .pc-only { display: none !important; }
  .sp-only { display: block !important; }

  .header-top {
    padding: 12px 14px;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
  }
  .header-brand {
    gap: 10px;
    min-width: 0;
  }
  .header-brand-body {
    gap: 6px;
    min-width: 0;
  }
  .header-logo {
    width: 70px;
  }
  .header-catch {
    display: block;
    width: 208px;
    max-width: 100%;
  }
  .header-brand-sub {
    gap: 12px;
    align-items: flex-end;
  }
  .header-info {
    font-size: .72rem;
    line-height: 1.4;
    white-space: nowrap;
  }
  .header-brand-buttons {
    gap: 5px;
  }
  .header-brand-buttons img {
    width: 100px;
  }
  .header-actions {
    gap: 8px;
    flex: none;
    margin-top: 23px;
  }
  .header-menu-btn {
    color: var(--color-white);
    padding: 0;
    font-size: .7rem;
  }
  .header-menu-btn .bars span {
    background: var(--color-primary-light);
  }
  .header-actions .header-line,
  .header-divider {
    display: none;
  }
  .header-actions img {
    height: 30px;
    width: auto;
  }
  .header-menu-btn .bars span {
    width: 45px;
  }

  .global-nav { display: none; }

  /* ---------- SP固定フッターバー ---------- */
  .sp-fixed-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
    border-top: 1px solid rgba(255,255,255,.2);
    /* 最初は画面外に隠しておき、少しスクロールした所でJSにより
       is-visible が付与されたら画面下から追随してくる */
    transform: translateY(100%);
    transition: transform .25s ease;
  }
  .sp-fixed-bar.is-visible {
    transform: translateY(0);
  }
  .sp-fixed-bar a,
  .sp-fixed-bar button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 2px 10px;
    color: var(--color-white);
    font-size: .62rem;
    background: none;
    border: none;
  }
  .sp-fixed-bar img {
    height: 20px;
    width: auto;
  }
  .sp-fixed-bar a:nth-child(1) img {
    height: 26px;
  }
  /* 「会員登録/ログイン」はラベルが長く画面端に近いため、実機で
     角に「会」がわずかに隠れる報告があり、他より1段階文字を小さくする */
  .sp-fixed-bar a:nth-child(1) {
    font-size: .56rem;
  }
  /* 電話する・LINE予約を、それぞれの枠内で少し左に寄せる
     (ハンバーガーメニューは既に .sp-fixed-bar-menu で左寄せ済み)
     会員登録/ログインを1ボタンに統合した分、位置が1つずつ前に詰まっている
     （電話する=2番目、LINE予約=3番目、メニュー=4番目） */
  .sp-fixed-bar a:nth-child(2),
  .sp-fixed-bar a:nth-child(3) {
    padding-left: 2px;
    padding-right: 10px;
  }
  /* 会員登録/ログイン・電話する・LINE予約・メニューの間を金色の区切り線で
     分ける。ハンバーガーボタン(transformで縦位置調整あり)をまたいでborder
     を置くとズレるため、動かない「電話する」「LINE予約」側の擬似要素を
     基準にする。高さは電話するアイコンの上辺(padding-top:8px)〜文字の
     下辺(8px + icon20px + gap4px + 文字行高約17px ≒ 41px)に合わせる */
  .sp-fixed-bar a:nth-child(2),
  .sp-fixed-bar a:nth-child(3) {
    position: relative;
  }
  .sp-fixed-bar a:nth-child(2)::before,
  .sp-fixed-bar a:nth-child(3)::before,
  .sp-fixed-bar a:nth-child(3)::after {
    content: "";
    position: absolute;
    top: 8px;
    height: 41px;
    width: 1px;
    background: var(--color-gold);
  }
  .sp-fixed-bar a:nth-child(2)::before,
  .sp-fixed-bar a:nth-child(3)::before {
    left: 0;
  }
  .sp-fixed-bar a:nth-child(3)::after {
    right: 0;
  }
  /* フッターのハンバーガーメニューはヘッダーの.header-menu-btnとは
     独立したスタイルとして扱う */
  .sp-fixed-bar-menu {
    /* 中身をボタン内で少し左に寄せつつ、ほんの僅かに下げる */
    padding: 8px 22px 10px 2px;
    transform: translateY(1px);
  }
  .sp-fixed-bar-menu .bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .sp-fixed-bar-menu .bars span {
    display: block;
    width: 30px;
    height: 3px;
    background: var(--color-white);
  }
  body {
    padding-bottom: 66px;
  }

  /* ---------- フッター ---------- */
  .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    padding: 30px 16px 0;
  }
  .footer-nav a {
    font-size: .82rem;
    min-height: 50px;
  }
  .footer-catch img {
    width: 190px;
  }

  /* ---------- 年齢認証 ---------- */
  .age-gate-panel {
    top: min(190px, 20vh);
    --gate-anchor-y: 0%;
    padding: 34px 22px 30px;
  }
  .age-gate-bg-image {
    transform: scale(1.27);
    transform-origin: 50% 100%;
  }
  .age-gate-title {
    font-size: 1.3rem;
  }
  .age-gate-text {
    font-size: .85rem;
  }

  /* ---------- TOP ---------- */
  .gate-open-btn {
    max-width: 78%;
    margin-top: -18px;
  }
  .today-schedule {
    padding: 26px 16px 44px;
    border-width: 2px;
    border-color: var(--color-gold);
    /* frame-03/04 は画像自体の絵柄が frame-01/02/05/06 より太く大きいため、
       見た目のサイズを他のframeに合わせて縮小して描画する */
    background-size: 34px 38px, 34px 38px, cover;
    /* SPでは .container が画面幅いっぱいになるため、PCのような外側への
       はみ出しはせず、.container の左右padding分をそのまま隙間として見せる。
       上だけ .section の padding-top(44px) を打ち消してさらに少し引き上げ、
       TOP2枚目の画像に少し重なるようにする */
    margin: -60px 0 0;
  }
  .today-schedule .section-title {
    font-size: 2.1rem;
  }
  .today-schedule .btn-more {
    max-width: 240px;
  }
  .today-schedule-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cast-mini-card .thumb {
    /* 84pxの正方形だと解説文側より短くなるため、元のaspect-ratio(390:560)を
       活かした縦長サイズに拡大してバランスを取る */
    width: 120px;
  }
  .cast-mini-card .name,
  .cast-card .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cast-mini-card .time {
    margin-bottom: 0;
  }
  .cast-mini-card .desc {
    font-size: .88rem;
    line-height: 1.3;
  }
  .grid-2x2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .info-card .thumb {
    width: 130px;
  }
  .price-preview {
    padding: 16px;
  }
  .price-preview ul {
    grid-template-columns: 1fr;
  }

  /* ---------- 一覧系グリッド ---------- */
  .page-heading {
    padding: 34px 0 6px;
  }
  .page-heading h1,
  .page-heading h2 {
    font-size: 1.5rem;
  }
  .date-tabs button,
  .filter-tabs button {
    padding: 8px 14px;
    font-size: .78rem;
  }
  .cast-grid,
  .cast-grid.cols-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 14px;
  }
  .cast-card .name {
    font-size: 1rem;
  }
  /* 名前(1rem)より年齢の方が大きく見えてしまっていたため縮小 */
  .cast-card .age {
    font-size: .85rem;
  }
  /* .list-frame の隅飾りはPCでは意図的に外側にはみ出す設計(-14px)だが、
     SPでは.containerが画面幅いっぱいになるため、画面外にはみ出して
     しまう。画面内に収まる位置に戻す */
  .list-frame::before {
    left: 6px;
  }
  .list-frame::after {
    right: 6px;
  }
  /* ページネーション画像(幅210px)が2つ並ぶとSP幅に収まらないため縮小 */
  .pager-nav {
    gap: 14px;
  }
  .pager-nav img {
    width: 130px;
  }
  /* タグの文字が楕円(pill-btn)からはみ出すため縮小 */
  .pill-btn {
    font-size: .68rem;
  }
  /* 「タマヨおすすめ」だけ文字数が多くギリギリなので、もう僅かに縮小 */
  .pill-btn--sm {
    font-size: .6rem;
  }

  /* ---------- プロフィール ---------- */
  .profile-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* grid-template-columns:1fr でも、子要素(divに640px max-widthの
     .comment-area等が含まれる)の内容幅にグリッド列が引っ張られ、
     ページ全体が横に広がってしまう(min-width:autoの既定挙動)。
     明示的に0にして本来の1frの幅(コンテナ幅)まで縮められるようにする */
  .profile-head > div {
    min-width: 0;
  }
  /* プロフィール写真は画面幅いっぱいに表示する（.container の左右padding
     16px分だけ外側にはみ出させて画面端まで届かせる） */
  .profile-photo {
    width: calc(100% + 32px);
    margin: 0 -16px;
    border-radius: 0;
  }
  .profile-sub-photos {
    width: calc(100% + 32px);
    margin: 10px -16px 0;
  }
  .profile-name {
    font-size: 1.5rem;
    text-align: center;
  }
  .profile-kana,
  .profile-new-tag {
    text-align: center;
    display: block;
  }
  .profile-new-tag {
    display: inline-block;
    margin: 0 auto 16px;
  }
  .profile-sns-links {
    justify-content: center;
  }
  .btn-message {
    display: block;
    width: 100%;
    text-align: center;
  }
  .genre-block h2 {
    font-size: 1.1rem;
  }
  /* .genre-group 自体が width:max-content のままだと、中の1frグリッドが
     広がる余地(=自分の外側の利用可能幅)を参照できず縮こまってしまうため、
     SPでは幅いっぱいに広げる */
  .genre-group {
    width: 100%;
  }
  /* .genre-group .tag-list が固定4列×120pxのままだと画面幅からはみ出すため、
     幅に応じて伸縮する2列グリッドに変更する */
  .genre-group .tag-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .genre-group .pill-btn {
    width: 100%;
  }
  .profile-table th {
    width: 100px;
  }
  .profile-table th,
  .profile-table td {
    font-size: .85rem;
  }

  /* ---------- クチコミ一覧 ---------- */
  /* 絞り込み行に収まりきらないため、SPでは単独の行として幅いっぱいに表示する */
  .review-post-open-btn {
    width: 100%;
    margin: 4px 0 0;
    padding: 10px 14px;
    font-size: .82rem;
    text-align: center;
  }
  .review-post-modal {
    padding: 32px 18px 22px;
  }
  .review-post-cast-list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---------- 裏日記 ---------- */
  .diary-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .diary-card {
    gap: 16px;
  }
  .diary-card .thumb {
    width: 130px;
  }
  .diary-detail {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .diary-detail-castname--sp {
    display: block;
    margin-bottom: 10px;
  }
  .diary-detail-castname--pc {
    display: none;
  }

  /* ---------- 料金・初めての方へ ---------- */
  /* 「初めての方へ」「ご利用の流れ」の見出しは、共通の.page-heading h2より
     大きく見せたいが詳細度が同じでこちらが後勝ちしてしまうため、
     専用の値で明示的に上書きする(PCの 2.5rem : 2.1rem の比率を踏襲) */
  .page-heading--sub h2 {
    font-size: 1.8rem;
    line-height: 1.25;
  }

  /* SPだとPCより着地位置が高くなりすぎるため、上へずらす量を控えめにする */
  .anchor-offset {
    top: -16px;
  }

  .price-table-main {
    margin-bottom: 30px;
  }
  .price-table-main ul {
    grid-template-columns: 1fr;
  }
  .price-table-main li {
    /* space-betweenだけだとlabel/valueが接近して折り返す行があるため
       最低限のgapを確保する */
    gap: 10px;
  }
  .price-table-main .label {
    font-size: 1.1rem;
  }
  .price-table-main .label::before {
    width: 16px;
    height: 16px;
  }
  .price-table-main .value {
    font-size: 1.7rem;
  }
  .price-table-main .badge {
    font-size: .6rem;
    padding: 1px 6px;
    margin-left: 4px;
  }

  .option-list-block {
    margin-bottom: 30px;
  }
  .option-list-block h2 {
    font-size: 1.4rem;
  }
  .option-list-block .opt-name {
    font-size: 1.05rem;
  }
  .option-list-block .opt-desc {
    font-size: .85rem;
  }
  .option-list-block .opt-price {
    font-size: 1rem;
  }

  .guide-list {
    margin-bottom: 30px;
  }
  .guide-list .g-title {
    font-size: 1.05rem;
  }
  .guide-list .g-desc,
  .flow-step .body p {
    font-size: .9rem;
  }

  .flow-steps {
    margin-bottom: 30px;
  }
  .flow-step {
    gap: 14px;
  }
  .flow-step .num {
    width: 34px;
  }
  .flow-step .body h3 {
    font-size: 1.05rem;
  }

  .notice-block {
    margin-bottom: 30px;
  }
  .notice-block h3 {
    font-size: 1.3rem;
  }
  .notice-block p {
    font-size: .9rem;
  }

  .prohibited-list {
    columns: 1;
  }

  .see-you {
    max-width: 220px;
    margin-bottom: 50px;
  }

  .login-panel {
    padding: 30px 22px;
  }
}