/* ================================================================
   奥鉄オクテツ東京 - レスポンシブ統合スタイルシート
   Breakpoints: SP <= 640px | Tablet 641-893px | PC >= 894px
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&family=Open+Sans:wght@700&family=Noto+Sans+JP:wght@400;700&display=swap');

/* ---- Reset / Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
    font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,メイリオ,sans-serif;
    color: #333;
    background: #fff;
    min-width: 320px;
}
a { color: #961a1a; text-decoration: none; }
a:hover { opacity: 0.8; }
img { max-width: 100%; height: auto; vertical-align: middle; }
ul, ol { list-style: none; }

/* ================================================================
   POPUP / 年齢確認
   ================================================================ */
#popup_body {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9000;
}
body.hands_up #popup_body { display: block; }
body.hands_up #popup_content { display: flex; }

#popup_content {
    display: none;
    position: fixed; inset: 0;
    z-index: 9001;
    align-items: center;
    justify-content: center;
}
#popup_content .cont_verification {
    background: #fff;
    border: 2px solid #931d1d;
    border-radius: 8px;
    padding: 24px;
    max-width: 360px;
    width: 90%;
    text-align: center;
}
#popup_content .cont_verification .title {
    font-size: 16px;
    font-weight: bold;
    color: #931d1d;
    margin-bottom: 12px;
}
#popup_content .cont_verification .icon { margin-bottom: 12px; }
#popup_content .cont_verification .text { font-size: 12px; line-height: 1.7; margin-bottom: 16px; }
#popup_content .cont_verification .button { display: flex; flex-direction: column; gap: 8px; }
#popup_content .cont_verification .button p { margin: 0; }
#popup_content .cont_verification input[type="button"] {
    width: 100%;
    padding: 10px;
    background: #931d1d;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
#popup_content .cont_verification .popup_close {
    display: block;
    padding: 8px;
    background: #999;
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
}

/* ================================================================
   HEADER
   ================================================================ */
header {
    background: #fff;
    border-bottom: 1px solid #ccc;
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-inner {
    max-width: 1130px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 0;
}
header h1 { flex-shrink: 0; margin-right: auto; padding: 0; }
header h1 img { height: 40px; width: auto; display: block; }
.header-phone {
    text-align: right;
    flex-shrink: 0;
    padding-left: 8px;
    border-left: 1px dotted #D0D0D0;
    margin-left: 8px;
}
.header-phone .number {
    font-size: 28px;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
    color: #ED556A;
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
    margin-bottom: 2px;
}
.header-phone .number img { height: 16px; width: 28px; }
.header-phone .number a { color: inherit; text-decoration: none; }
.header-phone .sub { font-size: 11px; font-weight: bold; color: #666; text-align: right; }
.btn-login {
    flex-shrink: 0;
    background: #D6428B;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
}
.btn-login a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
}
.btn-login a img { width: 40px; height: 40px; display: block; }

.btn-mypage {
    flex-shrink: 0;
    background: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
}
.btn-mypage a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
}
.btn-mypage a img { width: 40px; height: 40px; display: block; }


/* ハンバーガーボタン (SP のみ表示) */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.hamburger-btn span {
    display: block;
    width: 26px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
.hamburger-btn.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* SP メニューパネル */
#sp-nav-panel {
    display: none;
    position: fixed;
    top: 0;
    right: -280px;
    width: 260px;
    height: auto;
    max-height: 100%;
    background: #2a2a2a;
    z-index: 300;
    overflow-y: auto;
    transition: right 0.3s ease;
    padding-top: 0;
    padding-bottom: 16px;
}
#sp-nav-panel.open { right: 0; }
#sp-nav-panel ul { list-style: none; margin: 0; padding: 0; }
#sp-nav-panel ul li { border-bottom: 1px solid #3a3a3a; }
#sp-nav-panel ul li a {
    display: block;
    padding: 11px 18px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}
#sp-nav-panel ul li a:active { background: #444; }
.sp-menu-close {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 1px solid #3a3a3a;
    color: #aaa;
    font-size: 20px;
    text-align: right;
    cursor: pointer;
}
.menu-separator {
    height: 16px;
    background: #1a1a1a;
    border: none !important;
    pointer-events: none;
}

/* オーバーレイ */
#sp-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 299;
}
#sp-nav-overlay.open { display: block; }

/* SP header icons - hidden on PC */
.sp-header-icons {
    display: none;
    margin-left: auto;
    gap: 10px;
    align-items: center;
}
.sp-header-icons .sp-login { order: 1; }
.sp-header-icons .sp-mypage { order: 1; }
.sp-header-icons .sp-search { order: 2; }
.sp-header-icons .sp-tel   { order: 3; }
.sp-header-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
}
.sp-header-icons a img { width: 36px; height: 36px; display: block; }
.sp-header-icons a.sp-login { background: #D6428B; }
.sp-header-icons a.sp-login img { width: 36px; height: 36px; }
.sp-header-icons a.sp-mypage { background: #fff; }
.sp-header-icons a.sp-mypage img { width: 36px; height: 36px; }
.sp-header-icons a.sp-tel { display: none; }
.sp-header-icons a.sp-search { background: #3498db; width: 40px; height: 40px; padding: 0; gap: 0; flex-direction: column; overflow: hidden; }
.sp-header-icons a.sp-search img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.sp-header-icons a.sp-search .sp-search-label { color: #fff; font-size: 7px; font-weight: bold; white-space: nowrap; line-height: 1; margin-top: 1px; }

/* ================================================================
   MAIN NAVIGATION
   ================================================================ */
#main-nav {
    background: #000;
}
#main-nav .nav-inner {
    max-width: 1130px;
    margin: 0 auto;
    padding: 0 8px;
}
#main-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#main-nav ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 12px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    gap: 2px;
    white-space: nowrap;
    transition: background 0.2s;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#main-nav ul li a:hover { background: rgba(255,255,255,0.15); opacity: 1; }
#main-nav ul li a span img { width: 26px; height: 26px; border-top-left-radius: 6px; border-top-right-radius: 6px; }

/* SP nav (image buttons) */
.nav-sp {
    background: #fff;
    border-bottom: 1px solid #ddd;
    margin-bottom: 12px;
    padding: 10px 8px;
    box-sizing: border-box;
}
.nav-sp .nav-inner { max-width: 1130px; margin: 0 auto; }
.nav-sp ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.nav-sp ul li { flex: 0 0 calc(33.333% - 6px); }
.nav-sp ul li a { display: block; }
.nav-sp ul li a img {
    width: 100%;
    height: auto;
    display: block;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* ================================================================
   BREADCRUMB
   ================================================================ */
.breadcrumb-wrap {
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}
.breadcrumb {
    max-width: 1130px;
    margin: 0 auto;
    padding: 6px 16px;
    font-size: 11px;
    color: #666;
}
.breadcrumb ul { display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumb ul li::after { content: '›'; margin-left: 4px; }
.breadcrumb ul li:last-child::after { content: ''; }
.breadcrumb ul li a { color: #961a1a; }

/* ================================================================
   NOTICE / 出勤中バナー
   ================================================================ */
#notice {
    background: #D6428B;
    text-align: center;
    padding: 6px 16px;
    margin: 4px 8px 4px;
    border-radius: 10px;
}
#notice a {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}
#notice strong {
    font-size: 18px;
    background: #fff;
    color: #D6428B;
    padding: 1px 6px;
    border-radius: 3px;
}

/* ================================================================
   BANNER SLIDER
   ================================================================ */
#slider-recommend {
    position: relative;
    background: #222;
    overflow: hidden;
    line-height: 0;
}
.banner-slider {
    overflow: hidden;
    width: 100%;
}
.slide-track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}
.slide-item {
    flex-shrink: 0;
    width: 100%;
}

/* PC/タブレット: peek スライダー */
@media (min-width: 641px) {
    .banner-slider { overflow: visible; }
    .slide-item { width: calc(100% - 200px); }
    .slider-arrow.left { left: 104px; }
    .slider-arrow.right { right: 104px; }

    /* 左右peek部分にblurオーバーレイ */
    #slider-recommend::before,
    #slider-recommend::after {
        content: '';
        position: absolute;
        top: 0;
        width: 100px;
        height: 100%;
        z-index: 5;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        pointer-events: none;
    }
    #slider-recommend::before { left: 0; }
    #slider-recommend::after  { right: 0; }
}
.slide-item a { display: block; line-height: 0; }
.slide-item img {
    width: 100%;
    height: auto;       /* 960×194の元サイズで比率を維持 */
    display: block;
    max-height: 280px;  /* 極端に大きくなるのを抑制 */
}
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 10;
    display: flex;
    align-items: center;
}
.slider-arrow.left { left: 4px; }
.slider-arrow.right { right: 4px; }
.slider-arrow img { display: block; }
.slider-dots {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
}
.slider-dots span {
    width: 8px; height: 8px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
    display: block;
}
.slider-dots span.active { background: #fff; }

/* ================================================================
   NEWS TICKER
   ================================================================ */
#newsticker {
    background: #262525;
    color: #fff;
    max-width: 100%;
    margin-top: 4px;
}
.newsticker-inner {
    max-width: 1130px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 12px;
}
#newsticker h2 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 8px 12px 8px 0;
    border-right: 1px solid rgba(255,255,255,0.3);
    white-space: nowrap;
}
#newsticker h2 a { color: #fff; }
#newsticker h2 img { width: 22px; height: 22px; }
.news-slider {
    flex: 1;
    min-width: 0;           /* flex子要素の潰れ防止 */
    overflow: hidden;
    padding: 0 10px;
    position: relative;
    min-height: 40px;
}
.news-slide {
    display: none;
    min-height: 40px;
    align-items: center;
    flex-wrap: wrap;        /* 幅不足時は折り返す */
    padding: 4px 0;
}
.news-slide.active {
    display: flex;
    animation: newsTickerIn 0.4s ease forwards;
}
@keyframes newsTickerIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* PC/タブレット用: 右からスライドイン */
.news-slider.pc-ticker .news-slide.active {
    animation: newsPCSlideIn 0.35s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
@keyframes newsPCSlideIn {
    from { transform: translateX(110%); }
    to   { transform: translateX(0); }
}
.news-slide.news-out {
    display: flex;
    animation: newsTickerOut 0.25s ease forwards;
}
@keyframes newsTickerOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
}
.news-slide a {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex-wrap: wrap;        /* テキストを折り返し許可 */
    min-width: 0;
    width: 100%;
}
.news-slide a span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: normal;
    font-size: 11px;
    opacity: 0.8;
    white-space: nowrap;    /* カテゴリラベルは折り返さない */
    flex-shrink: 0;
}
.news-slide a span img { width: 18px; height: 18px; }
/* 本文テキスト（span以外）は折り返す */
.news-slide a > span + * ,
.news-slide a > :last-child:not(span) { flex-shrink: 1; word-break: break-all; }
.news-nav-btn { display: none; }

/* ニュースカテゴリ別カラー（PC・タブレット・SP 共通） */
.news-slide a.osirase span,
.news-marquee-inner a.osirase span { background:#2FBF71; color:#fff; opacity:1; padding:2px 7px; border-radius:3px; }
.news-slide a.event span,
.news-marquee-inner a.event span  { background:#0097BD; color:#fff; opacity:1; padding:2px 7px; border-radius:3px; }
.news-slide a.pickup span,
.news-marquee-inner a.pickup span { background:#B90180; color:#fff; opacity:1; padding:2px 7px; border-radius:3px; }
.news-slide a.chance span,
.news-marquee-inner a.chance span { background:#EB7742; color:#fff; opacity:1; padding:2px 7px; border-radius:3px; }
.news-slide a.nyuten span,
.news-marquee-inner a.nyuten span { background:#8CA823; color:#fff; opacity:1; padding:2px 7px; border-radius:3px; }
.news-slide a.hukki span,
.news-marquee-inner a.hukki span { background:#6E00FF; color:#fff; opacity:1; padding:2px 7px; border-radius:3px; }
.news-slide a.photo span,
.news-marquee-inner a.photo span  { background:#E36367; color:#fff; opacity:1; padding:2px 7px; border-radius:3px; }
.news-slide a.otakara span,
.news-marquee-inner a.otakara span{ background:#0000FF; color:#fff; opacity:1; padding:2px 7px; border-radius:3px; }

/* ニュースリンク ホバー時の強調 */
.news-slide a:hover,
.news-marquee-inner a:hover {
    color: #FFD700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 全サイズ marquee モード */
.news-slider.marquee-mode {
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
}
.news-marquee-inner {
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    will-change: transform;
}
.news-marquee-inner a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    padding: 8px 0;
    text-decoration: none;
}
.news-marquee-inner a span {
    font-size: 11px;
    font-weight: normal;
    opacity: 0.8;
    white-space: nowrap;
}
.news-marquee-inner a span img { width: 16px; height: 16px; vertical-align: middle; }
.news-marquee-sep { color: rgba(255,255,255,0.4); padding: 0 20px; flex-shrink: 0; }
.news-more a {
    color: #262525;
    font-size: 9px;
    font-weight: bold;
    background: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    margin-left: 8px;
    flex-shrink: 0;
}

/* ================================================================
   PAGE WRAPPER (2-column on PC)
   ================================================================ */
#page-wrapper {
    max-width: 1130px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    gap: 20px;
}
#main { flex: 1; min-width: 0; }
#sidebar {
    width: 255px;
    flex-shrink: 0;
}

/* ================================================================
   SECTION TITLES
   ================================================================ */
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #931d1d;
    padding-bottom: 8px;
    margin-bottom: 14px;
    margin-top: 20px;
}
.section-title:first-child { margin-top: 0; }
.section-title h2 {
    font-size: 16px;
    color: #262525;
    font-weight: bold;
    flex: 1;
}
.section-title h2 em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: #666;
    font-weight: normal;
}
.section-title .icon img { width: 36px; height: 36px; }
.section-title .more a {
    font-size: 9px;
    background: #fff;
    color: #931d1d;
    padding: 3px 8px;
    border: 1px solid #931d1d;
    border-radius: 4px;
    white-space: nowrap;
    font-weight: bold;
}
.section-title .more a:hover { background: #931d1d; color: #fff; opacity: 1; }

/* ================================================================
   THUMBNAIL GRID
   PC: 5列 | Tablet: 4列 | SP: 2列
   ================================================================ */
.tile {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 16px;
    margin-bottom: 16px;
}
.tile .item {
    flex: 0 0 calc(20% - 7px); /* PC: 5列 */
    min-width: 0;
    position: relative;
}
.tile .item .inner {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.tile .item .inner:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.tile .item a { display: block; color: #333; }
.tile .item .girl-photo {
    position: relative;
    padding-top: 150%;
    overflow: hidden;
    background: #f0f0f0;
}
.tile .item .girl-photo img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    background: #f0f0f0;
}
/* ブログタイルは正方形のまま */
.blog-tile .item .girl-photo { padding-top: 100%; }
.blog-tile .item .girl-photo img { object-fit: cover; object-position: center; }
.tile .item dl { padding: 4px 5px 5px; min-height: 56px; }
.newface-list .item dl { min-height: 76px; }
.tile .item dl dt {
    font-size: 11px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}
.tile .item dl dd {
    font-size: 10px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}
.tile .item dl dd.honjitsu {
    color: #fff;
    background: linear-gradient(135deg, #ff70a6 0%, #D6428B 50%, #8b1a5e 100%);
    padding: 5px 8px 4px;
    border-radius: 10px;
    display: block;
    width: fit-content;
    margin: 4px auto 0;
    line-height: 1;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #ffd54f;
    box-shadow: 0 1px 3px rgba(139, 26, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
/* ==================== 満員御礼 バッジ 一括管理 ==================== */
/* チップ型（枠付き・角丸）— 立体化オレンジ→赤グラデ共通スタイル */
.tile .item dl dd.manin,
.rank-tile .rank-item dl dd.manin,
.related-card dl dd.manin,
.ac-badge.manin,
.cast-status-badge.manin {
    color: #fff;
    background: linear-gradient(135deg, #ff6b35 0%, #e53935 50%, #b71c1c 100%);
    font-weight: bold;
    border: 1px solid #ffd54f;
    box-shadow: 0 1px 3px rgba(183, 28, 28, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* .tile .item はブロック中央寄せの特別スタイル */
.tile .item dl dd.manin {
    display: block;
    width: fit-content;
    margin: 4px auto 0;
    padding: 5px 8px 4px;
    border-radius: 10px;
    font-size: 10px;
    text-align: center;
}
.tile .item dl dd.timesale {
    color: #fff;
    background: linear-gradient(135deg, #FFE57F 0%, #FFB000 50%, #B37B00 100%);
    padding: 5px 8px 4px;
    border-radius: 10px;
    display: block;
    width: fit-content;
    margin: 4px auto 0;
    line-height: 1;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #ffd54f;
    box-shadow: 0 1px 3px rgba(139, 26, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
/* 各セレクタの個別サイズ（honjitsu と揃える）*/
.rank-tile .rank-item dl dd.manin { padding: 3px 8px; border-radius: 10px; font-size: 11px; margin-top: 2px; }
.related-card dl dd.manin { padding: 3px 7px; border-radius: 10px; font-size: 9px; margin-top: 2px; }
.ac-badge.manin { padding: 4px 10px; border-radius: 10px; margin: 0 10px 8px; font-size: 10px; }
.cast-status-badge.manin { padding: 5px 14px; border-radius: 14px; font-size: 12px; margin-bottom: 10px; }
/* SP写真下端の manin バー（modifier） */
.ac-sp-badge.manin {
    background: linear-gradient(135deg, #ff6b35 0%, #e53935 50%, #b71c1c 100%);
}
/* スケジュール表内 満員御礼セル（全幅・letter-spacing 保持）*/
.ac-slot-fullbooked {
    color: #fff;
    background: linear-gradient(135deg, #ff6b35 0%, #e53935 50%, #b71c1c 100%);
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 12px 4px;
    letter-spacing: 0.3em;
    border: 1px solid #ffd54f;
    box-shadow: 0 1px 3px rgba(183, 28, 28, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.tile .item dl dd span { color: #931d1d; font-weight: bold; }
.tile .item .badge-new {
    position: absolute;
    top: 4px;
    right: 4px;
}

/* ==================== 本日出勤中 バッジ 一括管理 ==================== */
/* チップ型（枠付き・角丸）— 立体化ピンクグラデ共通スタイル */
.rank-tile .rank-item dl dd.honjitsu,
.related-card dl dd.honjitsu,
.ac-badge,
.cast-status-badge,
.modal-honjitsu {
    color: #fff;
    background: linear-gradient(135deg, #ff70a6 0%, #D6428B 50%, #8b1a5e 100%);
    font-weight: bold;
    border: 1px solid #ffd54f;
    box-shadow: 0 1px 3px rgba(139, 26, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* 個別のサイズ・余白（構造プロパティ）*/
.rank-tile .rank-item dl dd.honjitsu { padding: 3px 8px; border-radius: 10px; font-size: 11px; margin-top: 2px; }
.related-card dl dd.honjitsu { padding: 3px 7px; border-radius: 10px; font-size: 9px; margin-top: 2px; }
.ac-badge { padding: 4px 10px; border-radius: 10px; margin: 0 10px 8px; font-size: 10px; }
.cast-status-badge { padding: 5px 14px; border-radius: 14px; font-size: 12px; margin-bottom: 10px; }
.cast-status-badge.ok {
    background: #2e7d32;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 3px rgba(46, 125, 50, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* モーダル内の本日出勤中バッジ（初期は非表示、is-active で表示）*/
.modal-honjitsu {
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 10px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
    display: none;
}
.modal-honjitsu.is-active { display: inline-flex; }
/* バー型（写真下端全幅バッジ）— 枠なし・角丸なし */
.ac-sp-badge {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    color: #fff;
    background: linear-gradient(135deg, #ff70a6 0%, #D6428B 50%, #8b1a5e 100%);
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    padding: 3px 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.tile .item .badge-new img { width: 28px; height: auto; }

/* ランクバッジ */
.rank-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: #47414e;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.4;
    z-index: 1;
}
.rank-badge.rank-1 { background: #c8a000; } /* 金 */
.rank-badge.rank-2 { background: #8c8c8c; } /* 銀 */
.rank-badge.rank-3 { background: #8a4e29; } /* 銅 */

/* 合成画像 */
.tile .item .pattern {
    position: absolute;
    top: 0;
    left: 0;
}
.tile .item .pattern img { width: 100%; height: auto; }

/* ================================================================
   BLOG TILE (キャストパネルと同じグリッド・PC6列/タブレット4列/SP2列)
   ================================================================ */
.blog-tile .item a.box { color: #333; }
.blog-tile dl dt {
    font-size: 11px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blog-age { font-size: 10px; font-weight: normal; color: #666; }
.blog-time { font-size: 10px; color: #999; }
.blog-text { font-size: 10px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================
   RANKING / REVIEW section
   ================================================================ */
.rank-list .item { flex: 0 0 calc(16.666% - 6px); }
.review-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
}
.review-list .item {
    border-bottom: 1px solid #eee;
}
.review-list .item a {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    color: #333;
}
.review-list .photo {
    width: 70px;
    height: 105px;
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #f0f0f0;
    border-radius: 4px;
    flex-shrink: 0;
}
.review-list dl { flex: 1; min-width: 0; }
.review-list dl dt { font-size: 13px; font-weight: bold; margin-bottom: 2px; }
.review-list dl dd { font-size: 11px; color: #666; line-height: 1.5; }
.review-list dl dd:first-of-type { color: #931d1d; }

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar-box {
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
}
.sidebar-box-title {
    background: #47414e;
    color: #fff;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar-box-title-text { flex: 1; }
.sidebar-box-title h2 { font-size: 15px; }
.sidebar-box-title p { font-size: 11px; opacity: 0.8; margin-top: 2px; text-align: center; }
.sidebar-box-title img { width: 32px; height: 32px; filter: invert(1); }
.hit-count {
    background: #f9f9f9;
    padding: 8px 12px;
    font-size: 13px;
    border-bottom: 1px solid #ddd;
    text-align: center;
}
.hit-count em { color: #931d1d; font-style: normal; font-size: 20px; font-weight: bold; }

/* Search Form */
#search-form { padding: 12px; }
#search-form p { font-size: 11px; color: #444; margin-bottom: 6px; font-weight: bold; }
.name-search {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.name-search input[type="text"] {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 13px;
}
.name-search button {
    background: #931d1d;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.name-search button img { width: 22px; height: 22px; }
#search-form select {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 4px;
    font-size: 12px;
    margin-bottom: 6px;
    background: #fff;
}
.half-row { display: flex; flex-wrap: wrap; gap: 4px; }
.half-row select { width: calc(50% - 2px); }
.checkbox-group { display: flex; flex-wrap: wrap; row-gap: 6px; margin: 8px 0; }
.checkbox-group label {
    display: flex;
    align-items: flex-start;
    width: 50%;
    gap: 4px;
    font-size: 11px;
    cursor: pointer;
    line-height: 1.3;
}
.checkbox-group label span { color: #666; font-size: 10px; display: block; }
.option-selects { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.option-selects select { width: 100%; border: 1px solid #ccc; border-radius: 4px; padding: 6px 4px; font-size: 12px; background: #fff; }
.search-btns { display: flex; gap: 6px; margin-top: 12px; }
.search-btns button {
    flex: 1;
    padding: 8px;
    border-radius: 4px;
    border: none;
    font-size: 13px;
    cursor: pointer;
    font-weight: bold;
}
.search-btns .btn-search { background: #931d1d; color: #fff; }
.search-btns .btn-reset { background: #999; color: #fff; }
/* SP アイコンメニュー */
.sp-icon-nav { display: none; margin: 12px 0; }
.sp-icon-nav ul {
    display: flex;
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    gap: 4px;
}
.sp-icon-nav ul li { flex: 1; }
.sp-icon-nav ul li a { display: block; }
.sp-icon-nav ul li a img { width: 100%; height: auto; display: block; }

.sidebar-links { padding: 0; }
.sidebar-links li {
    border-top: 1px solid #eee;
}
.sidebar-links li:first-child { border-top: none; }
.sidebar-links li a { display: block; }
.sidebar-links li a img {
    width: 100%;
    height: auto;
    display: block;
}

/* ================================================================
   FOOTER
   ================================================================ */
footer {
    background: #000;
    color: #fff;
    margin-top: 20px;
}
footer nav {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 12px 16px;
}
footer nav ul {
    max-width: 1130px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
}
footer nav ul li a {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 12px;
    padding: 8px 12px;
    border-right: 1px solid rgba(255,255,255,0.2);
    white-space: nowrap;
}
footer nav ul li:last-child a { border-right: none; }
footer nav ul li a img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.footer-phone {
    text-align: center;
    padding: 16px;
}
.footer-phone .number {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.footer-phone .number img { height: 22px; width: auto; }
.footer-phone .number a { color: #ED556A !important; }
.footer-phone .sub { font-size: 12px; color: #fff; font-weight: bold; }
.footer-breadcrumb {
    text-align: center;
    padding: 0 16px 12px;
    font-size: 11px;
    color: #aaa;
}
.footer-breadcrumb a { color: #aaa; }
.footer-copy {
    text-align: center;
    padding: 12px 16px 100px;
    font-size: 12px;
    color: #888;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* ================================================================
   PAGE TOP BUTTON
   ================================================================ */
#page-top {
    position: fixed;
    top: 75%;
    right: 12px;
    transform: translateY(-50%);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
#page-top.visible { opacity: 1; pointer-events: auto; }
#page-top a {
    display: block;
    width: 46px;
    height: 46px;
    text-decoration: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    overflow: hidden;
}
#page-top a:hover { opacity: 0.85; }
#page-top a img { display: block; width: 100%; height: 100%; }

/* SP: 追従電話バー */
#sp-tel-bar {
    display: none;
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 199;
    width: calc(100% - 180px);
}
#sp-tel-bar a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px 10px;
    background: #e8376e;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    padding: 0 16px;
    min-height: 45px;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    white-space: nowrap;
}
#sp-tel-bar a svg {
    width: 32px;
    height: 32px;
}
.tel-bar-number {
    font-size: 19px;
    position: relative;
    top: -6px;
    white-space: nowrap;
}
.tel-bar-hours {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    opacity: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    white-space: nowrap;
}

/* ================================================================
   RESPONSIVE: TABLET (641px - 893px)
   ================================================================ */
@media (min-width: 641px) and (max-width: 893px) {

    #page-wrapper { flex-direction: column; padding: 12px; }
    #sidebar { width: 100%; }
    .sidebar-links { display: flex; flex-wrap: wrap; gap: 4px; }
    .sidebar-links li { width: calc(50% - 2px); }

    .tile .item { flex: 0 0 calc(25% - 6px); } /* Tablet: 4列 */

    .header-inner { padding: 0 10px; }
    header h1 img { height: 40px; }
    .header-phone .number { font-size: 28px; line-height: 1; margin-bottom: 0; }
    .header-phone .number img { height: 16px; width: 28px; }
    .header-phone .sub { line-height: 1; font-size: 11px; }

    .news-slider, .news-slide { min-height: 60px; }

    /* タブレット: ニュース縦並び */
    .news-slide a { flex-direction: column; gap: 2px; }

    /* タブレット: 虫眼鏡のみ表示（ログインの左側に配置） */
    .sp-header-icons { display: flex; margin-left: 0; margin-left: 12px; order: 3; }
    .sp-header-icons .sp-login,
    .sp-header-icons .sp-mypage,
    .sp-header-icons .sp-tel { display: none; }
    .btn-login { order: 2; }
    .btn-mypage { order: 2; }
    .header-phone { order: 4; }
    /* タブレット: 虫眼鏡サイズをログインボタン(40px)に合わせる */
    .sp-header-icons a.sp-search { width: 40px; height: 40px; }
    .sp-header-icons a.sp-search img { width: 24px; height: 24px; }
    .sp-header-icons a.sp-search .sp-search-label { font-size: 7px; }

    #main-nav ul li a { padding: 8px 8px; font-size: 10px; }

    .slide-item img { max-height: 180px; }

    /* Tablet: SPナビ非表示 */
    .nav-sp { display: none; }

    .rank-list .item { flex: 0 0 calc(25% - 5px); }

    .search-toggle-btn { display: none; }
    #search-form { display: block !important; }
}

/* ================================================================
   RESPONSIVE: SMARTPHONE (<= 640px)
   ================================================================ */
@media (max-width: 640px) {

    /* Header */
    .header-inner { padding: 0 10px; gap: 8px; }
    header h1 img { height: 36px; }
    .btn-login { display: none; }
    .btn-mypage { display: none; }
    .header-phone { display: none; }
    .sp-header-icons { display: flex; }

    /* Main nav - scroll horizontally on SP */
    #main-nav ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #main-nav ul::-webkit-scrollbar { display: none; }
    #main-nav ul li a { padding: 8px 10px; font-size: 10px; }

    /* SP Nav: 6アイコン1行（左右余白＋上下余白1/3） */
    .nav-sp { padding: 0 10px; margin: 8px 0; box-sizing: border-box; }
    .nav-sp ul { flex-wrap: nowrap; gap: 8px; }
    .nav-sp ul li { flex: 0 0 calc((100% - 40px) / 6); }
    /* sp-icon-nav 上下余白1/3 */
    .sp-icon-nav { margin: 8px 0; }
    .sp-icon-nav ul { gap: 8px; margin: 0 0 8px; }

    /* Page wrapper: single column */
    #page-wrapper { flex-direction: column; padding: 10px; gap: 12px; }
    #sidebar { width: 100%; order: 2; }
    #main { order: 1; }

    /* Thumbnail grid: 2列 */
    .tile .item { flex: 0 0 calc(50% - 4px); }
    .rank-list .item { flex: 0 0 calc(50% - 4px); }

    /* Section title compact */
    .section-title h2 { font-size: 14px; }

    /* Slider: SP uses square banners — remove height cap and show full 1:1 ratio */
    .slide-item img { max-height: none; width: 100%; aspect-ratio: 1 / 1; }

    /* スライダー矢印ボタン非表示 */
    .slider-arrow { display: none; }

    /* ニュースティッカー文字サイズ2倍 */
    .news-marquee-inner a { font-size: 28px; }
    .news-marquee-inner a span { font-size: 22px; }
    .news-marquee-inner a span img { width: 24px; height: 24px; }

    /* 「もっと見る」を右上に絶対配置 */
    #newsticker { position: relative; }
    .news-more { position: absolute; top: 2px; right: 4px; }


    /* ニュースティッカー：幅不足時はタイトルを非表示にしてスペース確保 */
    #newsticker h2 { display: none; }
    .news-slider, .news-slide { min-height: 72px; }
    .news-slide a { flex-direction: column; gap: 2px; }

    /* 追従電話バー */
    #sp-tel-bar { display: block; }

    /* ハンバーガーボタン表示 */
    .hamburger-btn { display: none; }

    /* SP アイコンメニュー表示 */
    .sp-icon-nav { display: block; }

    /* 共通メニュー非表示→ハンバーガーへ */
    #main-nav { display: none; }

    /* SP メニューパネル有効化 */
    #sp-nav-panel { display: block; }

    /* Footer nav: SP 2行折り返し */
    footer nav ul {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    footer nav ul li { flex: 0 0 50%; }
    footer nav ul li a {
        font-size: 11px;
        padding: 8px 10px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .footer-phone .number { font-size: 20px; }

    /* Sidebar search: always visible on SP */
    .search-toggle-btn { display: none; }
    #search-form { display: block !important; }
}

/* ================================================================
   PC ONLY (>= 894px)
   ================================================================ */
@media (min-width: 894px) {

    .sp-header-icons { display: none; }
    .nav-sp { display: none; } /* SP用ナビはPC非表示 */
    #notice { display: none; } /* SP count notice */
    #sp-active-fab { display: none }

    /* Blog PC grid layout */
    .blog-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .blog-grid > li {
        flex: 0 0 calc(50% - 3px);
        border-bottom: 1px solid #eee;
    }

    .search-toggle-btn { display: none; }
    #search-form { display: block !important; }

    /* PC: アイコンとテキストを横並びに */
    #main-nav ul li a {
        flex-direction: row;
        text-align: left;
        gap: 4px;
        padding: 10px 6px;
        white-space: normal;
    }
    #main-nav ul li a span { flex-shrink: 0; }

    .header-phone .number a,
    .footer-phone .number a {
        pointer-events: none;
        cursor: default;
        color: inherit;
        text-decoration: none;
    }
}

/* SP/Tablet: 奥様サーチ トグルパネル */
#sp-search-panel { display: none; }
@media (max-width: 893px) {
    #sp-search-panel { display: block; margin-top: 4px; margin-bottom: 12px; }
    #sidebar-search-box { display: none; }
    #sp-search-toggle {
        width: 100%;
        background: #47414e;
        color: #fff;
        border: none;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        text-align: left;
        box-sizing: border-box;
    }
    #sp-search-toggle img { filter: invert(1); flex-shrink: 0; }
    .sp-st-title { font-size: 15px; font-weight: bold; }
    .sp-st-sub { font-size: 11px; opacity: 0.8; margin-left: 8px; }
    .sp-st-arrow { margin-left: auto; font-size: 12px; flex-shrink: 0; display: inline-block; transition: transform 0.2s; }
    #sp-search-form-wrap { display: none; padding: 10px; background: #fff; }
    #sp-search-form-wrap.open { display: block; }
    #sp-search-form-wrap p { font-size: 14px; }
    #sp-search-form-wrap input[type="text"] { font-size: 16px; }
    #sp-search-form-wrap select { font-size: 14px; }
    #sp-search-form-wrap .checkbox-group label { font-size: 14px; }
    #sp-search-form-wrap .checkbox-group label span { font-size: 12px; }
    #sp-search-form-wrap .search-btns button { font-size: 15px; }
}

/* ================================================================
   UTILITY
   ================================================================ */
.clr::after { content: ''; display: table; clear: both; }
.pc-only { display: none; }
@media (min-width: 894px) { .pc-only { display: block; } }
.sp-only { display: block; }
@media (min-width: 641px) { .sp-only { display: none; } }

/* Lazy loading placeholder */
img.lazyload { background: #f0f0f0; }

/* Slick custom dots */
.slick-dots { list-style: none; text-align: center; padding: 6px 0; }
.slick-dots li { display: inline-block; margin: 0 3px; }
.slick-dots li button {
    width: 8px; height: 8px;
    background: rgba(255,255,255,0.5);
    border: none;
    border-radius: 50%;
    text-indent: -9999px;
    cursor: pointer;
    padding: 0;
}
.slick-dots li.slick-active button { background: #fff; }

/* ================================================================
   SUB PAGES
   ================================================================ */
.subpage-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 3px solid #47414e;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
@media (max-width: 640px) {
    .subpage-heading { margin-top: 20px; }
}
.subpage-heading h1 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0;
}
.subpage-heading img { width: 32px; height: 32px; }
.avail-sort-select {
    margin-left: auto;
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    appearance: auto;
}
.result-count {
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}
.result-count .count-num {
    font-size: 20px;
    font-weight: bold;
    color: #931d1d;
}
.pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px 0;
}
.pagination a, .pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
}
.pagination .current { background: #47414e; color: #fff; border-color: #47414e; }
.pagination a:hover { background: #f5f5f5; }

/* System page */
.system-section { margin-bottom: 28px; }
.system-section-title {
    background: #47414e;
    color: #fff;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0;
}
.system-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.system-table th, .system-table td {
    border: 1px solid #ddd;
    padding: 10px 12px;
    font-size: 13px;
    vertical-align: middle;
}
.system-table th { background: #f5f5f5; width: 40%; font-weight: normal; }
.system-table .price { font-size: 16px; font-weight: bold; color: #931d1d; }
.system-table .price-sub { font-size: 11px; color: #999; }
.option-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    margin-right: 4px;
    margin-bottom: 4px;
}
.option-free { background: #e8f5e9; color: #2a7a2a; border: 1px solid #a5d6a7; }
.option-paid { background: #fce4e4; color: #931d1d; border: 1px solid #f5b8b8; }

/* --- オプション一覧リスト (system.html) --- */
.opt-tel-note {
    background: #fff3f7;
    border-left: 4px solid #e8376e;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: bold;
    color: #931d1d;
    margin-bottom: 12px;
    border-radius: 0 4px 4px 0;
}
.opt-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
}
.opt-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.opt-no { font-size: 13px; font-weight: bold; color: #931d1d; white-space: nowrap; min-width: 36px; }
.opt-icon-img { width: 34px; height: auto; flex-shrink: 0; }
.opt-name { flex: 1; font-size: 12px; color: #444; line-height: 1.3; }
.opt-name small { font-size: 10px; color: #888; }
.opt-price { font-size: 12px; font-weight: bold; color: #e8376e; white-space: nowrap; }
.opt-price.opt-free { color: #2e7d32; }
@media (max-width: 480px) { .opt-list { grid-template-columns: 1fr; } }

/* --- 遊び方 (system.html) --- */
.howtoplay-box {
    background: #fff8fa;
    border: 1px solid #f5c0d0;
    border-radius: 8px;
    padding: 18px 20px;
}
.howtoplay-subtitle {
    font-size: 15px;
    font-weight: bold;
    color: #931d1d;
    border-bottom: 2px solid #e8376e;
    padding-bottom: 8px;
    margin-bottom: 12px;
}
.howtoplay-text {
    font-size: 13px;
    line-height: 2;
    color: #555;
}

/* Notice page */
.notice-intro {
    background: #fff8f0;
    border-left: 4px solid #e8b060;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #555;
    line-height: 1.8;
}
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list li {
    position: relative;
    padding: 12px 12px 12px 32px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    line-height: 1.7;
    color: #444;
}
.notice-list li::before {
    content: '●';
    position: absolute;
    left: 10px;
    top: 14px;
    color: #931d1d;
    font-size: 10px;
}
.notice-caution {
    background: #fff3f3;
    border: 1px solid #f0c0c0;
    border-radius: 4px;
    padding: 14px 16px;
    margin-top: 20px;
    font-size: 13px;
    color: #931d1d;
    line-height: 1.7;
}

/* Area page */
.area-map { margin-bottom: 20px; }
.area-map img { width: 100%; height: auto; display: block; border: 1px solid #ddd; border-radius: 4px; }
.area-info-table { width: 100%; border-collapse: collapse; }
.area-info-table th, .area-info-table td {
    border: 1px solid #ddd;
    padding: 10px 14px;
    font-size: 13px;
}
.area-info-table th { background: #47414e; color: #fff; width: 35%; font-weight: normal; }
.area-ward-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0;
}
.area-ward {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 13px;
    color: #444;
}
.area-note {
    margin-top: 16px;
    padding: 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    font-size: 12px;
    color: #666;
    line-height: 1.7;
}

/* Availability page — cast list format */
.avail-note {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 14px;
}
.date-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.date-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    line-height: 1.2;
    background: #f5f5f5;
}
.date-tab.active { background: #47414e; color: #fff; border-color: #47414e; }
.date-tab .dow { font-size: 10px; font-weight: normal; }
.date-tab .cast-cnt { font-size: 10px; color: #931d1d; font-weight: normal; margin-top: 2px; }
.date-tab.active .cast-cnt { color: #ffb3b3; }
.avail-cast-list { display: flex; flex-direction: column; gap: 12px; }
.avail-cast-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #fff;
}
.avail-cast-photo {
    flex-shrink: 0;
    width: 90px;
}
.avail-cast-photo img {
    width: 90px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.avail-cast-info { flex: 1; min-width: 0; }
.avail-cast-name {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin: 0 0 3px;
}
.avail-cast-age { font-size: 12px; color: #666; font-weight: normal; }
.avail-cast-size { font-size: 11px; color: #666; margin: 0 0 5px; }
.avail-cast-time {
    font-size: 12px;
    color: #333;
    margin: 0 0 6px;
}
.time-label {
    display: inline-block;
    background: #931d1d;
    color: #fff;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 2px;
    margin-right: 5px;
}
.avail-cast-tags { margin: 0 0 8px; }
.avail-tag {
    display: inline-block;
    border: 1px solid #ccc;
    font-size: 10px;
    color: #666;
    padding: 1px 5px;
    border-radius: 2px;
    margin: 1px 2px 1px 0;
}
.avail-profile-btn {
    display: inline-block;
    background: #47414e;
    color: #fff;
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 3px;
    text-decoration: none;
}

/* Scroll offset for sticky header */
[id^="sec-"] { scroll-margin-top: 240px; }
@media (max-width: 893px) { [id^="sec-"] { scroll-margin-top: 220px; } }
@media (max-width: 640px) { [id^="sec-"] { scroll-margin-top: 100px; } }

/* System page index nav */
.sys-index {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}
.sys-index a {
    font-size: 11px;
    font-weight: bold;
    color: #47414e;
    text-decoration: none;
    border: 1px solid #ccc;
    padding: 4px 8px;
    border-radius: 3px;
    background: #fff;
}
.sys-index a:hover { background: #47414e; color: #fff; border-color: #47414e; }

/* Course list */
.course-list { margin-bottom: 0; }
.course-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
}
.course-min {
    flex-shrink: 0;
    background: #47414e;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    width: 54px;
    text-align: center;
    padding: 6px 4px;
    border-radius: 3px;
    line-height: 1.2;
}
.course-min small { font-size: 10px; font-weight: normal; }
.course-body { flex: 1; }
.course-price { font-size: 16px; font-weight: bold; color: #333; margin-right: 6px; }
.course-name { font-size: 12px; color: #666; }
.breakdown-btn {
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #aaa;
    color: #555;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
}
.breakdown-btn:hover { background: #47414e; color: #fff; border-color: #47414e; }
.course-fees {
    display: flex;
    gap: 16px;
    padding: 10px 12px;
    font-size: 13px;
    color: #555;
    background: #fafafa;
    border-top: 1px solid #eee;
}
.course-fees::before { content: '◎'; color: #931d1d; margin-right: 4px; }

/* Breakdown modal */
.breakdown-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
    width: 90%;
    max-width: 360px;
    z-index: 1001;
    padding: 20px;
}
.breakdown-modal.is-open { display: block; }
.breakdown-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1000;
}
.breakdown-overlay.is-open { display: block; }
.breakdown-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #777;
}
.breakdown-modal h3 {
    font-size: 15px;
    font-weight: bold;
    color: #47414e;
    margin: 0 0 14px;
    border-bottom: 2px solid #47414e;
    padding-bottom: 8px;
}
.breakdown-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.breakdown-table th, .breakdown-table td {
    border: 1px solid #ddd;
    padding: 8px 10px;
    font-size: 13px;
    text-align: left;
}
.breakdown-table th { background: #f5f5f5; color: #555; width: 55%; font-weight: normal; }
.breakdown-total th, .breakdown-total td { background: #47414e; color: #fff; font-weight: bold; }
.breakdown-note { font-size: 11px; color: #888; line-height: 1.6; margin: 0; }

/* Simulation calculator */
.sim-total {
    background: #47414e;
    color: #fff;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 4px;
    margin-bottom: 16px;
    text-align: center;
}
.sim-total em {
    font-size: 28px;
    font-weight: bold;
    color: #ffcc00;
    margin: 0 4px;
    font-style: normal;
}
.sim-block { margin-bottom: 16px; }
.sim-label {
    font-size: 12px;
    font-weight: bold;
    color: #47414e;
    border-left: 3px solid #47414e;
    padding-left: 8px;
    margin-bottom: 8px;
}
.sim-radio, .sim-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #444;
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}
.sim-radio input, .sim-check input { margin-top: 2px; flex-shrink: 0; }
.sim-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    margin-top: 6px;
    color: #444;
}

/* Credit card section */
.credit-caution {
    font-size: 13px;
    color: #931d1d;
    background: #fff3f3;
    border: 1px solid #f0c0c0;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 14px;
    line-height: 1.7;
}
.credit-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.credit-checklist li {
    padding: 10px 10px 10px 32px;
    border-bottom: 1px solid #eee;
    position: relative;
}
.credit-checklist li::before {
    content: '✓';
    position: absolute;
    left: 8px;
    top: 11px;
    color: #931d1d;
    font-weight: bold;
}
.credit-check-title {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin: 0 0 3px;
}
.credit-check-title span { color: #931d1d; font-weight: bold; }
.credit-check-title a { color: #931d1d; font-weight: bold; }
.credit-check-sub {
    font-size: 11px;
    color: #888;
    margin: 0;
    line-height: 1.5;
}
.credit-pay-btn {
    display: block;
    background: #931d1d;
    color: #fff;
    text-align: center;
    padding: 14px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}
.credit-pay-btn:hover { background: #7a1818; }

/* Receipt section */
.receipt-item {
    padding: 12px;
    background: #faf8fa;
    border: 1px solid #e8d8e8;
    border-radius: 4px;
    margin-bottom: 10px;
}
.receipt-title {
    font-size: 13px;
    color: #333;
    line-height: 1.7;
    margin: 0 0 6px;
}
.receipt-title span { color: #931d1d; font-weight: bold; }
.receipt-note {
    font-size: 12px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* Step guide (system page) */
.step-guide { margin-top: 8px; }
.step-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}
.step-item:last-child { border-bottom: none; }
.step-num {
    flex-shrink: 0;
    background: #47414e;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    padding: 6px 8px 4px;
    border-radius: 4px;
    line-height: 1.2;
    min-width: 42px;
}
.step-num span {
    display: block;
    font-size: 20px;
    line-height: 1;
}
.step-body { flex: 1; }
.step-title {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    margin: 0 0 4px;
}
.step-text {
    font-size: 12px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}
.step-note {
    font-size: 11px;
    color: #777;
    line-height: 1.7;
    margin: 8px 0 0;
    padding: 8px 10px;
    background: #f7f3f7;
    border-left: 3px solid #c8a8c8;
    border-radius: 2px;
}

/* Ranking tabs */
.rank-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.rank-tab {
    padding: 7px 12px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    background: #f5f5f5;
    color: #555;
    text-decoration: none;
}
.rank-tab.active {
    background: #47414e;
    color: #fff;
    border-color: #47414e;
}

/* ---- ブラウザバックボタン ---- */
.btn-browser-back {
    position: fixed;
    top: 75%;
    left: 12px;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    background-image: url(../../images/ot/btn_back.png);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    z-index: 990;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    text-decoration: none;
    font-size: 0;
    line-height: 0;
}
.btn-browser-back:hover { opacity: 0.85; }
/* SP: バックボタン・TOPボタンを追従バーの上に下げる */
@media (max-width: 640px) {
    .btn-browser-back,
    #page-top {
        top: auto;
        bottom: 75px;
        transform: none;
    }
}
/* ハンバーガーメニュー展開中はバックボタン・追従電話バー・追従メニュー・出勤中・TOP非表示 */
body:has(#sp-nav-panel.open) .btn-browser-back,
body:has(#sp-nav-panel.open) #sp-tel-bar,
body:has(#sp-nav-panel.open) #sp-menu-fab,
body:has(#sp-nav-panel.open) #sp-active-fab,
body:has(#sp-nav-panel.open) #page-top { display: none; }

/* SP用フローティング メニューボタン（電話ボタンと同色） */
#sp-menu-fab { display: none; }
@media (max-width: 640px) {
    #sp-menu-fab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 16px;
        right: 12px;
        width: 60px;
        height: 45px;
        border-radius: 16px;
        background: linear-gradient(135deg, #7b4eb0 0%, #5e35b1 100%);
        color: #fff;
        border: none;
        cursor: pointer;
        z-index: 200;
        box-shadow: 0 3px 10px rgba(0,0,0,0.3);
        padding: 0;
        font-size: 10px;
        font-weight: bold;
        line-height: 1;
    }
    #sp-menu-fab .fab-icon {
        display: block;
        position: relative;
        width: 22px;
        height: 16px;
        margin-bottom: 3px;
    }
    #sp-menu-fab .fab-icon::before,
    #sp-menu-fab .fab-icon::after,
    #sp-menu-fab .fab-icon span {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 2.5px;
        background: #fff;
        border-radius: 2px;
    }
    #sp-menu-fab .fab-icon::before { top: 0; }
    #sp-menu-fab .fab-icon span    { top: 50%; transform: translateY(-50%); }
    #sp-menu-fab .fab-icon::after  { bottom: 0; }

    /* SP用フローティング 出勤中ボタン（目立たせ強化版） */
    #sp-active-fab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 16px;
        left: 12px;
        width: 60px;
        height: 45px;
        border-radius: 16px;
        background: linear-gradient(135deg, #ff5e3a 0%, #ff9800 100%);
        color: #fff;
        text-decoration: none;
        z-index: 200;
        box-shadow: 0 3px 10px rgba(0,0,0,0.3), 0 0 0 0 rgba(255,107,53,0.55);
        font-size: 10px;
        font-weight: bold;
        line-height: 1.2;
        text-align: center;
        text-shadow: 0 1px 1px rgba(0,0,0,0.25);
        animation: activeFabPulse 1.6s ease-out infinite;
    }
    #sp-active-fab .fab-num { font-size: 14px; }
    #sp-active-fab .fab-heart {
        display: inline-block;
        color: #fff200;
        animation: heartBeat 1s ease infinite;
        margin-left: 1px;
    }
    @keyframes activeFabPulse {
        0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,0.3), 0 0 0 0    rgba(255,107,53,0.55); }
        70%      { box-shadow: 0 3px 10px rgba(0,0,0,0.3), 0 0 0 12px rgba(255,107,53,0); }
    }
    @keyframes heartBeat {
        0%, 60%, 100% { transform: scale(1); }
        15%           { transform: scale(1.35); }
        30%           { transform: scale(1); }
        45%           { transform: scale(1.2); }
    }
}


/* キャストサブナビ「奥様日記」12時間以内投稿あり強調（パルス + NEWバッジのみ） */
.cast-subnav a.is-new { position: relative; animation: subnavNewPulse 1.6s ease-in-out infinite; }
.cast-subnav a.is-new::after {
    content: 'NEW';
    position: absolute;
    top: 3px;
    right: 3px;
    background: #d32f2f;
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 8px;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    animation: badgeBlink 1.6s ease-in-out infinite;
}
@keyframes subnavNewPulse {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(255,193,7,0); }
    50%      { box-shadow: inset 0 0 18px rgba(255,193,7,0.7); }
}
@keyframes badgeBlink {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* 新・奥様秘密日記 表示件数制御: PC 10件 / SP・タブレット 8件 */
.blog-tile .item:nth-child(n+11) { display: none; }
@media (max-width: 893px) {
    .blog-tile .item:nth-child(n+9) { display: none; }
}

/* system.html: 非通知拒否解除ガイドモーダル */
.unblock-link {
    background: none;
    border: none;
    padding: 0;
    color: #931d1d;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
    font-size: inherit;
    font-family: inherit;
}
.unblock-link:hover { color: #c0392b; }
.unblock-guide section { margin-bottom: 14px; }
.unblock-guide h4 {
    font-size: 13px;
    color: #931d1d;
    margin: 0 0 6px;
    padding: 5px 9px;
    background: #fdf2f5;
    border-left: 3px solid #931d1d;
    border-radius: 2px;
}
.unblock-guide ol,
.unblock-guide ul {
    padding-left: 20px;
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.8;
    color: #444;
}
.unblock-guide ol li,
.unblock-guide ul li { margin-bottom: 4px; }
.unblock-guide p {
    font-size: 12px;
    line-height: 1.8;
    margin: 0 0 6px;
    color: #444;
}
.unblock-guide strong { color: #931d1d; }
.unblock-guide code {
    background: #f5f3f5;
    color: #c0392b;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}