/* ========================================
   オナクラ店（ピンク）テーマ CSS
   デフォルトテーマベース
   ======================================== */

/* カラー変数 */
:root {
    --maincolor: #ff6ca1;
    --subcolor: #fdeff5;
}

/* 背景画像（bodyのみ） */
body {
    background: url(../../images/bg.jpg) repeat !important;
}

/* body>* の白背景を解除して背景画像を透過させる */
body > main {
    background: transparent !important;
}

/* ナビバー白背景（全ページ共通、navbar-transparent上書き含む） */
.navbar-custom,
.navbar-custom.navbar-transparent {
    background: #fff !important;
    background-color: #fff !important;
}

/* ========================================
   左メニュー
   ======================================== */

/* セクションタイトル（サイドメニュー内のみ） */
.side_menu .module-title {
    color: #000;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -1px;
    display: block !important;
    white-space: nowrap;
}
.side_menu .module-title:first-letter {
    color: #ff6ea1 !important;
}
.side_menu .module-title:after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 8px;
    background-image: linear-gradient(90deg, transparent, transparent 50%, #fff 50%, #fff 100%),
                       linear-gradient(90deg, #ff6ca1, #E5C12D, #68E1EE);
    background-size: 10px 1px, 100% 1px;
    border: none;
}
.side_menu_title h5 {
    border-bottom: dashed 1px #777;
}

/* 電話・会員BOX 角丸 */
.side_menu .card.sidebar-card-shadow {
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #eee;
}

/* 電話番号 */
.tel_link {
    font-size: 27px;
    font-weight: bold;
}

/* 会員登録・予約ボタン */
.card .btn.btn-circle.member_Add {
    background: #ff6d6d;
    color: #fff;
    border: solid 1px #fff;
    padding: 5px 15px;
    width: 94%;
}

/* メニューリスト枠 */
.side_menu .list-group {
    background: #fff;
    padding: 10px;
    border: dashed 2px #639bff;
    border-radius: 10px;
}

/* メニューアイコン（丸枠なし、白色のみ） */
.side_menu .list-group i {
    font-size: 20px;
    color: #fff;
    background: none;
    width: auto;
    height: auto;
    border-radius: 0;
    display: inline-block;
    margin-right: 5px;
}

/* メニュー項目（カラフルボタン） */
.side_menu .list-group .list-group-item {
    padding: 15px 15px 13px;
    background-color: #ff6ca1;
    color: #fff;
    border-radius: 5px;
    margin: 5px 0;
    border: none;
    border-left: none;
    transition: opacity 0.2s ease;
}
/* ホバー：色を薄くする（青変化を無効化） */
.side_menu .list-group .list-group-item:hover {
    opacity: 0.7;
    color: #fff;
    border-left: none;
    padding-left: 15px;
}
.side_menu .list-group .list-group-item:first-of-type:hover {
    background-color: #ff6ca1;
}
.side_menu .list-group .list-group-item:hover i {
    color: #fff;
}
.side_menu .list-group .list-group-item:nth-of-type(2n) {
    background-color: #E5C12D;
}
.side_menu .list-group .list-group-item:nth-of-type(3n) {
    background-color: #68E1EE;
}
.side_menu .list-group .list-group-item:nth-of-type(4n) {
    background-color: #24CC71;
}
.side_menu .list-group .list-group-item:nth-of-type(5n) {
    background-color: #E5C12D;
}

/* バッジ */
.badge {
    background: #ff6ea1;
}
.panel-default > .panel-heading .badge {
    background: #ff6ea1;
}

/* text-danger をピンクに */
.text-danger {
    color: #ff6ea0;
}

/* ========================================
   新着ニュース - Yahoo風タブ
   ======================================== */

.news-tabs {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 0;
    padding: 0;
    gap: 0;
}
.news-tab {
    flex: 1;
    padding: 10px 5px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    outline: none;
    white-space: nowrap;
}
.news-tab:hover {
    color: #ff6ca1;
}
.news-tab.active {
    color: #ff6ca1;
}
.news-tab.active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: #ff6ca1;
    border-radius: 3px 3px 0 0;
}

/* ========================================
   つぶやき（VOICE）
   ======================================== */

/* カード白背景を強調（下部voice-list + 右カラム共通） */
.voice-list .msg__left.action-pc-tweet,
.msg__bg_wh .msg__contents .msg__left {
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.1) !important;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 14px 14px 14px 72px;
    margin-bottom: 12px;
    min-height: 60px;
    max-width: 100% !important;
}
/* テキスト余白・メタ情報 */
.msg__contents .msg__left .msg__left-text {
    margin-left: 10px;
}
.msg__contents .msg__left .msg__left-text .post-meta {
    font-size: 8px;
    white-space: nowrap;
}
/* figureの位置リセット */
.msg__contents.voice-list .msg__left figure,
.msg__bg_wh .msg__contents .msg__left figure {
    top: 12px;
    left: 12px;
    transform: none;
    width: 48px;
    height: 48px;
}
.msg__bg_wh .msg__contents .msg__left figure img {
    width: 44px;
    height: 44px;
}
/* HR仕切り線を非表示 */
.voice-list hr.divider-w,
.msg__bg_wh .msg__contents hr.divider-w {
    display: none !important;
}
/* 吹き出し矢印を非表示 */
.voice-list .msg__left .text::after,
.msg__bg_wh .msg__contents .msg__left .text::after {
    display: none !important;
}
/* 右カラム吹き出しボーダーを消す */
.msg__bg_wh .msg__contents .msg__left .text {
    border: none !important;
    padding: 0;
    border-radius: 0;
    min-height: auto;
}
.msg__bg_wh .msg__contents .msg__left .text::before {
    display: none !important;
}

/* ========================================
   キャスト一覧
   ======================================== */

/* キャスト名ラベル */
.cast_name {
    background: #00a0e9;
}

/* ========================================
   プロフィール
   ======================================== */

/* アクションボタン */
.bg-pink {
    background-color: #ff6ca1 !important;
    color: #fff;
}
.bg-yellow {
    background-color: #E5C12D !important;
    color: #fff;
}
.bg-green {
    background-color: #24CC71 !important;
    color: #fff;
}

/* ========================================
   フッター
   ======================================== */

/* 背景白・テキスト色（上段フッター + copyright） */
.footer,
footer.bg-dark,
.module-extra-small.footer,
.pc-footer-modern,
footer.pc-footer-modern {
    background: #fff !important;
    background-color: #fff !important;
    border-top: solid 1px #ddd !important;
    color: #4f4d4d !important;
}
.footer a,
.footer .widget a,
.footer .icon-list a,
.footer .icon-list li a,
footer.bg-dark a,
.pc-footer-modern a {
    color: #4f4d4d !important;
}
.footer a:hover,
footer.bg-dark a:hover,
.pc-footer-modern a:hover {
    color: #111 !important;
}
.footer .copyright,
.pc-footer-modern .copyright {
    color: #333 !important;
}
.footer .widget-title {
    color: #333 !important;
    border-bottom-color: transparent !important;
}
.footer .widget-title::after {
    display: none !important;
}
.footer .widget p {
    color: #4f4d4d !important;
}
.footer .widget p i.fa {
    color: #999 !important;
}
.footer .icon-list li a::before {
    background: transparent !important;
}
.footer .logo-container {
    background: #f8f8f8 !important;
}

/* widget-title カラフル点線ボーダー */
.footer .footer_box > div:nth-of-type(1) .widget .widget-title { border-bottom: dashed 2px #ff6ca1 !important; }
.footer .footer_box > div:nth-of-type(2) .widget .widget-title { border-bottom: dashed 2px #E5C12D !important; }
.footer .footer_box > div:nth-of-type(3) .widget .widget-title { border-bottom: dashed 2px #ED923F !important; }
.footer .footer_box > div:nth-of-type(4) .widget .widget-title { border-bottom: dashed 2px #68E1EE !important; }
.footer .footer_box > div:nth-of-type(5) .widget .widget-title { border-bottom: dashed 2px #24CC71 !important; }

/* icon-list カラフルアイコン（丸ドット） */
.footer .footer_box > div:nth-of-type(1) .widget .icon-list li a::before { background: #ff6ca1 !important; }
.footer .footer_box > div:nth-of-type(2) .widget .icon-list li a::before { background: #E5C12D !important; }
.footer .footer_box > div:nth-of-type(3) .widget .icon-list li a::before { background: #ED923F !important; }
.footer .footer_box > div:nth-of-type(4) .widget .icon-list li a::before { background: #68E1EE !important; }
.footer .footer_box > div:nth-of-type(5) .widget .icon-list li a::before { background: #24CC71 !important; }

/* ========================================
   トップページ: ヘッダー〜バナー間の空白除去
   ======================================== */
@media (max-width: 767px) {
    body .header-spacer {
        margin-top: 5px !important;
        height: 0 !important;
    }
}

/* ========================================
   キャスト画像の表示調整（2026-08-06）
   共通style.cssの比率固定・切り抜きをオナクラのみ解除し、
   元画像の縦横比のまま表示する
   ======================================== */
/* SP版キャストBOX: 3/4固定を解除 */
.modern-sp-left > img {
    aspect-ratio: auto;
}
/* キャスト一覧サムネイル: 切り抜き(cover)を解除 */
.shop-item-image img {
    object-fit: fill;
}