/**
 * Global Background Styles
 * 全ページ共通の背景スタイル
 *
 * @package NONKE_SPA
 * @since 1.0.5
 */

/* ==========================================================================
   セクション共通背景スタイル
   ========================================================================== */

/* 各セクションの背景を半透明にする */
section,
.p-pageHeader,
.p-conceptDetail,
.p-staffList,
.p-reviewList,
.p-todayStaff,
.p-concept,
.p-price,
.p-access,
.p-notice,
.p-systemContent,
.p-accessPage,
.p-reserveSelect,
.l-content > div[class*="p-"] {
    position: relative;
}

/* 背景を黒い半透明にする */
.p-conceptDetail,
.p-staffList,
.p-systemContent,
.p-accessPage,
.p-reserveSelect,
.p-reviewList {
    background: rgba(0, 0, 0, 0.1);
}

/* コンテンツエリア全体 */
.l-content,
.site-main {
    position: relative;
    z-index: 0;
    background: rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   要素の不透明度を確保
   ========================================================================== */

/* テキスト要素は完全に不透明 */
h1, h2, h3, h4, h5, h6,
p, span, a, li, dt, dd,
.c-sectionTitle,
.c-sectionSubtitle,
.p-pageHeader__title,
.p-pageHeader__subtitle {
    position: relative;
}

/* 画像・メディア要素は完全に不透明 */
img,
video,
iframe,
.p-staffCard__image img,
.p-reviewItem__staffPhoto img,
.p-heroBanner__image,
.swiper-slide img {
    position: relative;
}

/* ボタン・フォーム要素は完全に不透明 */
button,
input,
select,
textarea,
.c-button,
.p-staffFilter__btn,
.p-reviewList__action .c-button {
    position: relative;
}

/* カード要素 */
.p-staffCard,
.p-notice__item {
    background: rgba(255, 255, 255, 0.95);
    position: relative;
}

/* テーブル要素 */
table,
.c-table,
.wp-block-table {
    background: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   ヘッダー・フッター
   ========================================================================== */

/* ヘッダー */
.l-header {
    background: rgba(48, 60, 9, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
}

/* フッター */
.l-footer {
    background: rgba(48, 60, 9, 0.95);
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   特殊なセクション
   ========================================================================== */

/* ヒーローセクション（メインビジュアル） */
.p-hero {
    background: transparent;
}

.p-hero::before {
    background: rgba(0, 0, 0, 0.4);
}

/* モーダル・ドロワー */
.c-drawerMenu,
.modal {
}

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */

@media (max-width: 768px) {
    /* SPでは背景をさらに濃くして可読性を確保 */
}