/* Common CSS */

:root {

    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --darkred: #861924;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --black: #000;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;

    /* Bootstrap 5 color palette */
    /*
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    */

    --attend-start: var(--yellow);
    --attend-end: var(--gray-600);
    --recept-allow: var(--blue);    
    --recept-wait: var(--red);      
    --recept-few: var(--red);       
    --recept-cancel: var(--gray-600);
    --recept-end: var(--gray-600);
    
}


body { font-size: 80%; }
.menu-txt {	font-size: 85%;	}
.attend-name_txt {	font-size: 140%;}
.attend-baner_txt {	font-size: 140%;}
.bottom-baner_txt {	font-size: 100%;}

button i.menu1-icon, a i.menu1-icon { font-size: 140% !important; }

.btn-girl-border-side-none-start {
    border-radius: 0 !important; /* 角丸をなくす */
    border-top: 2px solid #ccc !important; /* 上にボーダーを追加 */
    border-bottom: 2px solid #ccc !important; /* 下にボーダーを追加 */
    border-left: none !important; /* 左のボーダーを削除 */
    border-right: none !important; /* 右のボーダーを削除 */
}

.btn-girl-border-side-none {
    border-radius: 0 !important; /* 角丸をなくす */
    border-top: none !important; /* 上にボーダーを追加 */
    border-bottom: 2px solid #ccc !important; /* 下にボーダーを追加 */
    border-left: none !important; /* 左のボーダーを削除 */
    border-right: none !important; /* 右のボーダーを削除 */
}

.btn-girl-border-side-none-end {
    border-radius: 0 !important; /* 角丸をなくす */
    border-top: none !important; /* 上にボーダーを追加 */
    border-bottom: none !important; /* 下にボーダーを追加 */
    border-left: none !important; /* 左のボーダーを削除 */
    border-right: none !important; /* 右のボーダーを削除 */
}

.btn-girl-border-side-none-one {
    border-radius: 0 !important; /* 角丸をなくす */
    border-top: 2px solid #ccc !important; /* 上にボーダーを追加 */
    border-bottom: none !important; /* 下にボーダーを追加 */
    border-left: none !important; /* 左のボーダーを削除 */
    border-right: none !important; /* 右のボーダーを削除 */
}

.prof-img-link {
    z-index: 1;
    position: relative;
    display: block;
    width: 100%;
    pointer-events: auto; /* リンクのクリックを有効化 */
}

.badge-attend-start {
    background-color: var(--attend-start);
    color: var(--white);
    padding: 0.375rem 0.75rem; /* 適切なパディング */
    border-radius: 0.25rem; /* 角を丸くする */
    display: inline-block; /* インラインブロック要素として表示 */
}
.badge-attend-end {
    background-color: var(--attend-end);
    color: var(--white);
    padding: 0.375rem 0.75rem; /* 適切なパディング */
    border-radius: 0.25rem; /* 角を丸くする */
    display: inline-block; /* インラインブロック要素として表示 */
}
.badge-recept-allow {
    background-color: var(--recept-allow);
    color: var(--white);
    padding: 0.375rem 0.75rem; /* 適切なパディング */
    border-radius: 0.25rem; /* 角を丸くする */
    display: inline-block; /* インラインブロック要素として表示 */
}
.badge-recept-wait {
    background-color: var(--recept-wait);
    color: var(--white);
    padding: 0.375rem 0.75rem; /* 適切なパディング */
    border-radius: 0.25rem; /* 角を丸くする */
    display: inline-block; /* インラインブロック要素として表示 */
}
.badge-recept-few {
    background-color: var(--recept-few);
    color: var(--white);
    padding: 0.375rem 0.75rem; /* 適切なパディング */
    border-radius: 0.25rem; /* 角を丸くする */
    display: inline-block; /* インラインブロック要素として表示 */
}
.badge-recept-cancel {
    background-color: var(--recept-cancel);
    color: var(--white);
    padding: 0.375rem 0.75rem; /* 適切なパディング */
    border-radius: 0.25rem; /* 角を丸くする */
    display: inline-block; /* インラインブロック要素として表示 */
}
.badge-recept-end {
    background-color: var(--recept-end);
    color: var(--white);
    padding: 0.375rem 0.75rem; /* 適切なパディング */
    border-radius: 0.25rem; /* 角を丸くする */
    display: inline-block; /* インラインブロック要素として表示 */
}

.schedule-time {
    text-align: center; /* テキストを中央揃え */
    display: block; /* ブロック要素として表示 */
    color: var(--darkred);
    font-weight: bold;
}

@media (max-width: 576px) {
    body { font-size: 70%; }
    .menu-txt {	font-size: 70%;	}
    .prof-name_txt { font-size: 100%;}
    .attend-name_txt {	font-size: 100%;}
    .attend-baner_txt {	font-size: 100%;	}
    .bottom-baner_txt {	font-size: 90%;}
    .schedule-time {font-size: 100%; }
    .member-menu_txt {	font-size: 70%;}
    .member-menu_txt_lg {	font-size: 130% !important;}
    .btn-girl_name { font-size: 130% !important; }
    button.loginfrm-btn { font-size: 100% !important; }
    a.loginfrm-btn { font-size: 100% !important; }
    button i.membermenu-icon, a i.membermenu-icon  { font-size: 120% !important; }
    button i.menu1-icon, a i.menu1-icon { font-size: 100% !important; }
}

@media (min-width: 577px) and (max-width: 768px) {
    body { font-size: 70%; }
    .menu-txt {	font-size: 75%;	}
    .prof-name_txt { font-size: 120%;}
    .attend-name_txt {	font-size: 110%;}
    .attend-baner_txt {	font-size: 110%;	}
    .bottom-baner_txt {	font-size: 95%;}
    .schedule-time {font-size: 105%;}
    .member-menu_txt {	font-size: 80%;}
    .member-menu_txt_lg {	font-size: 140% !important;}
    .btn-girl_name { font-size: 140% !important; }
    button.loginfrm-btn { font-size: 120% !important; }
    a.loginfrm-btn { font-size: 120% !important; }
    button i.membermenu-icon, a i.membermenu-icon  { font-size: 130% !important; }
    button i.menu1-icon, a i.menu1-icon { font-size: 115% !important; }
}

@media (min-width: 769px) and (max-width: 992px) {
    body { font-size: 75%; }
    .menu-txt {	font-size: 80%;	}
    .prof-name_txt { font-size: 140%;}
    .attend-name_txt {	font-size: 120%;}
    .attend-baner_txt {	font-size: 120%;	}
    .bottom-baner_txt {	font-size: 100%;}
    .schedule-time {font-size: 110%;}
    .member-menu_txt {	font-size: 90%;}
    .member-menu_txt_lg {	font-size: 150% !important;}
    .btn-girl_name { font-size: 150% !important; }
    button.loginfrm-btn { font-size: 140% !important; }
    a.loginfrm-btn { font-size: 140% !important; }
    button i.membermenu-icon, a i.membermenu-icon  { font-size: 140% !important; }
    button i.menu1-icon, a i.menu1-icon { font-size: 130% !important; }
}

@media (min-width: 993px) and (max-width: 1200px) {
    body { font-size: 80%; }
    .menu-txt {	font-size: 85%;	}
    .prof-name_txt { font-size: 160%;}
    .attend-name_txt {	font-size: 110%;}
    .attend-baner_txt {	font-size: 110%;	}
    .bottom-baner_txt {	font-size: 105%;}
    .schedule-time {font-size: 110%;}
    .member-menu_txt {	font-size: 100%;}
    .member-menu_txt_lg {	font-size: 150% !important;}
    .btn-girl_name { font-size: 150% !important; }
    button.loginfrm-btn { font-size: 160% !important; }
    a.loginfrm-btn { font-size: 160% !important; }
    button i.membermenu-icon, a i.membermenu-icon  { font-size: 150% !important; }
    button i.menu1-icon, a i.menu1-icon { font-size: 140% !important; }
}

@media (min-width: 1201px) {
    body { font-size: 80%; }
    .menu-txt {	font-size: 85%;	}
    .prof-name_txt { font-size: 180%;}
    .attend-name_txt {	font-size: 140%;}
    .attend-baner_txt {	font-size: 140%;	}
    .bottom-baner_txt {	font-size: 110%;}
    .schedule-time {font-size: 120%;}
    .member-menu_txt {	font-size: 100% !important;}
    .member-menu_txt_lg {	font-size: 150% !important;}
    .btn-girl_name { font-size: 150% !important; }
    button.loginfrm-btn { font-size: 140% !important; }
    a.loginfrm-btn { font-size: 140% !important; }
    button i.membermenu-icon, a i.membermenu-icon  { font-size: 160% !important; }
    button i.menu1-icon, a i.menu1-icon  { font-size: 150% !important; }
}

.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}

.carousel-indicators button {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #666 !important;
}

.carousel-indicators .active {
    background-color: #FCC !important;
}

body.ageCheckBG {
    background: linear-gradient(-225deg, #b3d0de 0%, #C5C1FF 56%, #FFBAC3 100%);
}

.member-menu-button {
    background-color: var(--white) !important;
}
.member-menu-button:hover {
    background-color: var(--red) !important;
    color: var(--white) !important;
}

.member-menu-button-gray {
    background-color: var(--white) !important;
}
.member-menu-button-gray:hover {
    background-color: var(--gray-600) !important;
    color: var(--white) !important;
}

/* Accordionヘッダーの背景色を変更 */
.accordion-header .accordion-button {
    background-color: #fff5f6; /* ヘッダーの背景色を変更 */
    color: #333; /* テキストカラーを変更 */
    font-weight: bold; /* テキストを太字に */
}

/* ヘッダーがアクティブな場合の背景色 */
.accordion-header .accordion-button:not(.collapsed) {
    background-color: #FFBAC3; /* アクティブ時の背景色 */
    color: #000; /* アクティブ時のテキストカラー */
}

/* ヘッダーのホバー時の背景色 */
.accordion-header .accordion-button:hover {
    background-color: #fddfe2; /* ホバー時の背景色 */
    color: #000; /* ホバー時のテキストカラー */
}

/* カード全体のリンクにホバー時のスタイルを追加 */
.card-link:hover .card-body {
    filter: brightness(1.15); /* 明度を上げる */
    transition: filter 0.3s ease; /* なめらかなアニメーション */
}