/* arkhe-child/assets/css/2d-carousel.css */

/* 1. トップページのみArkheのメインコンテンツ（縦スクロール用の枠）やフッターを消去 */
body.home #l-footer, 
body.home .l-main,
body.home .p-breadcrumbs,
body.home .arkhe-search-modal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 2. 画面外のスクロールを完全にロックしてカルーセル専用にする */
html, body {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* 3. スライダー全体の絶対サイズ定義 */
.main-vertical-swiper, 
.sub-horizontal-swiper {
    width: 100%;
    height: 100vh;
}

/* 4. 固定矢印（▲▼◀▶）共通デザイン（JSで動かすため、top/bottomは空欄） */
.nav-arrow {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 15px;
    cursor: pointer;
    border-radius: 50px;
    font-size: 16px;
    z-index: 9999 !important;

    /* 遮断・フェードインのための設定 */
    opacity: 0;               /* 初期状態は完全に透明 */
    pointer-events: none;     /* 透明な間はクリックもできないようにする */
    transition: opacity 0.6s ease, background-color 0.2s; /* 0.6秒かけてじわっと出る */
}

/* 🚀 JS側で3秒経つとこのクラスが付与され、フェードインが始まります */
.nav-arrow.show-arrow {
    opacity: 1;
    pointer-events: auto;     /* 表示されたらクリック可能にする */
}

/* ⚠️ 行き止まり（disabled）のときは、表示後であっても薄く（透明度0.1に）する */
.nav-arrow.show-arrow:disabled {
    opacity: 0.1;
    pointer-events: none;
}

.nav-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* 各矢印の配置位置調整（既存のまま） */
.nav-up    { left: 50%; transform: translateX(-50%); }
.nav-down  { left: 50%; transform: translateX(-50%); }
.nav-left  { left: 20px; top: 50%; transform: translateY(-50%); }
.nav-right { right: 20px; top: 50%; transform: translateY(-50%); }

/* 各矢印の配置位置調整 */
.nav-up    { left: 50%; transform: translateX(-50%); }
.nav-down  { left: 50%; transform: translateX(-50%); }
.nav-left  { left: 20px; top: 50%; transform: translateY(-50%); }
.nav-right { right: 20px; top: 50%; transform: translateY(-50%); }

/* 5. 各マスの文章が入るスクロール容器 */
.slide-inner-content {
    width: 100%;
    max-width: 800px;
    height: 100%;
    margin: 0 auto;
    padding-bottom: 130px; /* 下部固定フッターに文字が被らないよう広めの余白 */
    overflow-y: auto;       /* 文字が長い場合はマスの中だけで綺麗にスクロール */
    box-sizing: border-box;
}

/* ==========================================
   🟢 丸型背景の固定フッター（Web予約・電話予約）
   ========================================== */
.custom-fixed-footer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 10000 !important; /* 矢印（▲▼）より手前に重ねる */
    pointer-events: auto;
}

/* 丸型ボタン共通 */
.footer-circle-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 11px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.2s, box-shadow 0.2s;
    line-height: 1.3;
    text-align: center;
}
.footer-circle-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.footer-circle-btn span {
    font-size: 20px;
    margin-bottom: 2px;
}

/* 各ボタン固有の背景色 */
.btn-reserve-line {
    background: #06C755; /* LINE公式カラー */
}
.btn-reserve-phone {
    background: #0073aa; /* 電話用の爽やかなブルー */
}

/* 📱 スマートフォン表示での微調整（指のサイズに合わせて少し押しやすく） */
@media screen and (max-width: 480px) {
    .custom-fixed-footer { gap: 15px; bottom: 15px; }
    .footer-circle-btn { width: 66px; height: 66px; font-size: 10px; }
    .footer-circle-btn span { font-size: 18px; }
}

/* ==========================================
🔔 Arkheのメニューを最前面に引っ張り出す調整
========================================== */
#l-header,
.c-drawer,
.p-drawer,
.p-navToggleBtn,
.c-navToggleBtn {
    z-index: 100000 !important; /* カルーセルの9999を上回る値 */
}