@charset "UTF-8";

/* ========================================================
   1. ベース設定（全体 / PCは白背景）
======================================================== */
body {
    font-family: "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    background: #fff; /* PC時は白背景 */
    margin: 0;
    padding: 0;
}
figure { padding: 0; margin: 0; box-sizing: border-box; }
ul, ol { list-style: none; }

/* SP用/PC用エリアのデフォルト表示状態 */
.box_sp { display: none; }
.box_pc { display: block; }

/* ========================================================
   2. パンくずリスト基本設定 (PC時は白背景・黒文字)
======================================================== */
#breadcrumbs {
    background: #fff;
    padding: 10px;
}
#breadcrumbs > ol,
#breadcrumbs > ul {
    white-space: nowrap;
    list-style: none;
    overflow-x: auto; /* 横スクロール可能にする */
    overflow-y: hidden;
    padding: 0 10px;
    margin: 5px auto;
    font-size: 14px;
    display: block;
    text-align: center;
}
#breadcrumbs ol li,
#breadcrumbs ul li {
    display: inline-block; /* 縦に改行されるのを防ぐ */
    margin: 0;
    padding: 0;
}
#breadcrumbs li > a {
    text-decoration: none;
    color: #000; /* PC時は黒文字 */
}
#breadcrumbs li:last-child:after { content: ""; }
#breadcrumbs li::after {
    content: ">";
    margin: 0 8px;
    color: #000; /* PC時は黒矢印 */
}
#breadcrumbs li:last-child a {
    pointer-events: none;
    color: #999;
}

/* PhotoSwipeのキャプション非表示 */
.pswp__ui .pswp__caption { display: none; }

/* ========================================================
   3. スライダー全体の枠組み (PC)
======================================================== */
.content, .contents, .menu, .slider {
    max-height: 100vh;
    height: 100vh;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}
.slider {
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0 auto;
}
.slider li { width: 100%; height: 100%; }

/* ========================================================
   4. スライダー画像と見開き配置 (PC / 東映仕様)
======================================================== */
.slider img,
.slider h1 > img {
    max-width: 100% !important; /* はみ出し防止 */
    max-height: 94vh !important;
    width: auto !important;  /* Wheelzoomによるインライン上書きを防止 */
    height: auto !important; /* Wheelzoomによるインライン上書きを防止 */
    object-fit: contain !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    display: inline-block !important; /* 左右寄せのために必要 */
    margin: 0 auto;
    padding: 0;
}
.slick-slider .slick-track, .slick-slider .slick-list { height: 100%; }
.slick-track { height: 100%; }
.slick-slide { height: 100%; }

/* 奇数ページを右寄せ、偶数ページを左寄せにして綴じる */
.slick-track .slick-slide:nth-child(odd) { text-align: right; }
.slick-track .slick-slide:nth-child(even) { text-align: left; }

/* Wheelzoomが背景画像化した際に見開きの綴じ目（中央）へ寄せる */
.slick-track .slick-slide:nth-child(odd) img { background-position: right center !important; }
.slick-track .slick-slide:nth-child(even) img { background-position: left center !important; }

/* 1枚目（表紙 h1） */
h1 { margin: 0; padding: 0; line-height: 1; }

/* ========================================================
   5. スライダー矢印ボタン (PC)
======================================================== */
.slick-prev { left: 20px !important; z-index: 9999 !important; }
.slick-next { right: 20px !important; z-index: 9999 !important; }

/* 画像が見つからない場合でも矢印が出るよう、文字記号を適用 */
.slick-prev:before {
    content: "←" !important;
    position: absolute;
    left: 15%;
    /* content: url(../../images/wedding/pamphlet/slick-prev.png); 画像を使う場合はコメント解除 */
    color: #000 !important;
    font-size: 30px !important;
    opacity: 1 !important;
}
.slick-next:before {
    content: "→" !important;
    position: absolute;
    right: 15%;
    /* content: url(../../images/wedding/pamphlet/slick-next.png); */
    color: #000 !important;
    font-size: 30px !important;
    opacity: 1 !important;
}

/* ========================================================
   6. スマートフォン (SP) 向け設定
======================================================== */
@media screen and (max-width: 640px) {
    /* SP用の縦並びHTML要素（box_sp）を表示し、PC用を隠す */
    .box_sp { display: block !important; }
    .box_pc { display: none !important; }
    
    /* 画面全体を黒背景にして固定（PhotoSwipe風） */
    body { background: #000; overflow: hidden; }
    .content, .contents, .menu_sp {
        background: #000;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden;
        position: relative;
    }
    
    /* パンくずは上部固定、背景黒・文字白 */
    #breadcrumbs {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: #000;
        z-index: 10000;
        padding: 15px 0;
    }
    #breadcrumbs > ol, #breadcrumbs > ul { -webkit-overflow-scrolling: touch; }
    #breadcrumbs li > a, #breadcrumbs li::after { color: #fff; }
    
    /* SP用エリアを横スクロール可能なフレックスボックスにする */
    .menu_sp {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory; /* 1枚ずつスナップさせる */
        -webkit-overflow-scrolling: touch;
        padding-top: 60px; /* パンくずリストの下から配置 */
        box-sizing: border-box;
    }
    
    /* 各画像のコンテナ（1画面に1枚ずつ収める） */
    .menu_sp figure {
        flex: 0 0 100%; /* 横幅を画面の100%に固定 */
        width: 100vw;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center; /* 画像を上下中央揃え */
        scroll-snap-align: start; /* スクロール時に左端に合わせる */
    }
    
    /* 画像そのもののサイズ調整 */
    .menu_sp figure img,
    .menu_sp figure h1 > img {
        max-width: 100% !important;
        max-height: 85vh !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        background-size: contain !important;
        background-position: center center !important;
    }
    
    /* h1のデフォルト余白をリセット */
    .menu_sp h1 { margin: 0; padding: 0; line-height: 1; }
    
    /* PC用の矢印はSPでは不要 */
    .slick-prev, .slick-next { display: none !important; }
}

/* ========================================================
   7. PC向け追加設定
======================================================== */
@media screen and (min-width: 751px) {
    .slider .slick-slide a { pointer-events: none; }
}

#breadcrumbs {
    position: relative;
    z-index: 100000 !important;
}

.pswp {
    top: 55px !important;
    height: calc(100% - 55px) !important;
}

@media screen and (max-width: 640px) {
    #breadcrumbs {
        position: absolute !important;
    }
    .pswp {
        top: 60px !important;
        height: calc(100% - 60px) !important;
    }
}