/* ==========================================
   Flipbook Modal
========================================== */

.catalog-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    z-index:99999;

    justify-content:center;
    align-items:center;
}

.catalog-modal.show{
    display:flex;
}

.catalog-modal-content{

    position:relative;

    width:min(1200px,95vw);
    height:min(90vh,900px);

    background:#fff;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 15px 50px rgba(0,0,0,.4);
}

.catalog-close{
    position:absolute;

    top:10px;
    right:15px;

    border:none;
    background:rgba(0,0,0,.45);

    width:44px;
    height:44px;
    border-radius:50%;

    color:#fff;
    font-size:36px;
    font-weight:200;
    line-height:40px;

    cursor:pointer;

    z-index:300;

    opacity:.75;
    transition:opacity .3s ease;
}

.catalog-close:hover{
    opacity:1;
}

#flipbook{

    width:100%;
    height:100%;

    display:flex;

    justify-content:center;
    align-items:center;

    font-size:2rem;

    color:#666;
}

/* ==========================================
   Catalog Intro
========================================== */

.catalog-intro{
    position:absolute;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#000;

    z-index:100;

    opacity:1;
    visibility:visible;

    transition:
        opacity 2.0s ease,
        visibility 2.0s ease;
}

.catalog-intro img{

    display:block;

    width:auto;
    height:min(88vh, 1000px);

    max-width:90vw;

    object-fit:contain;

    user-select:none;
    pointer-events:none;
}

/* ==========================================
   Catalog End
========================================== */

.catalog-end{
    pointer-events:none;
    position:absolute;
    inset:0;

    display:none;
    justify-content:center;
    align-items:center;

    background:#000;

    text-align:center;

    z-index:200;

    opacity:0;
}



.catalog-end.show{
    pointer-events:auto;
    display:flex;

    animation:
        catalogEndFadeIn 4s ease forwards,
        catalogEndFadeOut 2.5s ease 12s forwards;
}

.catalog-end-message{
    transform:translateY(-2vh);
}

.end-line1,
.end-line2,
.end-logo{
    opacity:0;
    color:#f3f3f3;
    text-shadow:
        0 0 5px rgba(255,255,255,.25),
        0 0 14px rgba(160,180,255,.12);
}

.end-line1{
    margin:0;

    font-size:clamp(1rem, 1.6vw, 1.35rem);
    font-weight:400;
    letter-spacing:.12em;

    animation:endTextFade 2.5s ease 2.2s forwards;
}

.end-line2{
    margin:10px 0 0;

    font-size:clamp(1rem, 1.6vw, 1.35rem);
    font-weight:400;
    letter-spacing:.12em;

    animation:endTextFade 2.5s ease 4.5s forwards;
}

.end-company-logo{
    display:block;

    width:180px;
    max-width:60%;
    height:auto;

    margin:90px auto 0;

    opacity:0;
    filter:blur(6px);
    transform:scale(.97);

    animation:endLogoFade 2.5s ease 7s forwards;
}

@keyframes endLogoFade{

    from{
        opacity:0;
        filter:blur(6px);
        transform:scale(.97);
    }

    to{
        opacity:1;
        filter:
            blur(0)
            drop-shadow(0 0 10px rgba(255,255,255,.15));
        transform:scale(1);
    }
}

@keyframes catalogEndFadeIn{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

@keyframes catalogEndFadeOut{
    from{
        opacity:1;
    }

    to{
        opacity:0;
    }
}

@keyframes endTextFade{
    from{
        opacity:0;
        filter:blur(3px);
    }

    to{
        opacity:1;
        filter:blur(0);
    }
}


/* 非表示用 */

.catalog-intro.hide{

    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

/* ==========================================================
   カタログ 拡大・縮小
========================================================== */

.catalog-link {
    appearance: none;
    -webkit-appearance: none;

    padding: 0;
    background: transparent;
    border: none;

    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* ==========================================================
   カタログの拡大・移動
========================================================== */

.catalog-link {
    font: inherit;
    cursor: pointer;
}


/*
 * 拡大・縮小ボタンと閉じるボタンは
 * カタログと一緒に移動させない
 */
.catalog-zoom-controls,
.catalog-close {
    position: fixed !important;
    z-index: 99999 !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
}

/*
 * 拡大・縮小ボタン配置
 */
.catalog-zoom-controls {
    top: 20px;
    right: 90px;

    display: flex;
    align-items: center;
    gap: 10px;
}

.catalog-zoom-level { 
    min-width: 58px;
    height: 44px;

    display: flex; 
    align-items: center; 
    justify-content: center; 

    padding: 0 10px;

    background: rgba(0,0,0,.45);
    border-radius: 22px;

    color: #fff; 

    font-size: 14px; 
    font-weight: 500; 
    line-height: 1; 

    user-select: none; 
}

/*
 * − / ＋ ボタン
 */
.catalog-zoom-button {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 2px solid rgba(255,255,255,.9);
    border-radius: 50%;

    background: rgba(0,0,0,.45);

    color: #fff;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
}

/* 移動モードボタン */
.catalog-pan-button {
    height: 44px;
    padding: 0 16px;

    border: 2px solid rgba(255,255,255,.9);
    border-radius: 22px;

    background: rgba(0,0,0,.45);

    color: #fff;
    font-size: 14px;
    font-weight: 500;

    cursor: pointer;
    white-space: nowrap;
}

.catalog-pan-button.is-active {
    background: rgba(0,110,255,.85);
}

.catalog-pan-button:disabled {
    opacity: .4;
    cursor: default;
}

/* 拡大すると移動できる案内 */
.catalog-pan-hint {
    padding: 7px 10px;

    background: rgba(0,0,0,.55);
    border-radius: 6px;

    color: #fff;
    font-size: 12px;
    white-space: nowrap;
}

.catalog-pan-hint[hidden] {
    display: none;
}


/*
 * 拡大対象
 */
.catalog-scale {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    transform: scale(1);
    transform-origin: center center;

    transition:
        transform .2s ease,
        transform-origin .2s ease;
}

.catalog-scale.is-pan-mode {
    cursor: grab;
    touch-action: none;
}

.catalog-scale.is-pan-mode.is-dragging {
    cursor: grabbing;
}

/*
 * 閉じるボタン
 */
.catalog-close {
    top: 20px !important;
    right: 20px !important;
}

/* ==========================================================
   スマートフォン
========================================================== */

@media (max-width: 768px) {

    .catalog-zoom-controls {
        top: 12px;
        right: 70px;
    }

.catalog-close {
        top: 12px !important;
        right: 12px !important;
    }

.catalog-modal {
    position: fixed;
   }

.catalog-end {
    position: absolute;
    inset: 0;
    z-index: 100000;
   }

.catalog-end[hidden] {
    display: none !important;
   }

.catalog-end.show {
    display: flex;
   }

}

/* ==========================================================
   PageFlip 緊急復旧
========================================================== */

/* モーダルを正常に表示 */
.catalog-modal {
    overflow: auto !important;
}

/* 非表示中のエンディングを確実に消す */
.catalog-end[hidden] {
    display: none !important;
}

/* エンディング表示時だけ前面へ出す */
.catalog-end.show:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 通常時のカタログを復旧 */
#flipbook:not(.is-zoomed) {
    position: relative !important;
    transform: none !important;
    touch-action: auto !important;
    user-select: auto !important;
    cursor: default !important;
}

/* モバイルのPageFlip操作を復旧 */
@media (max-width: 768px) {
    #flipbook:not(.is-zoomed) {
        width: 100% !important;
        max-width: 600px;
        margin-inline: auto;
        overflow: visible !important;
        touch-action: pan-y !important;
    }

    .catalog-modal-content {
      width: 100%;
      max-width: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
}