@charset "utf-8";
/* ==========================================================================
   TOP ポップアップ（THE MOMENT）
   ※ magnific-popup.css より後に読み込むこと
   ========================================================================== */

/* オーバーレイ（背景） */
.mfp-themoment.mfp-bg {
    background: #000;
    opacity: .85;
}

/* ポップアップの幅（画面の横8割）
   ※画面内に収まるよう、高さ基準の上限も指定
     130vh ＝ 高さ約 88vh（130 × 0.6666）。比率を変えたら合わせて調整すること */
.mfp-themoment .mfp-content {
    width: 80%;
    max-width: 130vh;
}

#popup-themoment {
    position: relative;
}

/* 真っ黒なクリックエリア（縦は横幅に対して 66.66% ＝ 3:2） */
#popup-themoment .popup-themoment__link {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 66.66%;
    background: #000;
    box-shadow: 0 0 30px rgba(255, 255, 255, .15);
}

/* 右上の×ボタン */
#popup-themoment .popup-themoment__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    line-height: 44px;
    padding: 0;
    color: #fff;
    font-size: 30px;
    opacity: .8;
    text-shadow: 0 0 6px rgba(0, 0, 0, .8);
}

#popup-themoment .popup-themoment__close:hover,
#popup-themoment .popup-themoment__close:focus {
    opacity: 1;
}

/* フェード表示 */
.mfp-themoment.mfp-bg,
.mfp-themoment .mfp-content {
    opacity: 0;
    -webkit-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
}

.mfp-themoment.mfp-ready.mfp-bg {
    opacity: .85;
}

.mfp-themoment.mfp-ready .mfp-content {
    opacity: 1;
}

.mfp-themoment.mfp-removing.mfp-bg,
.mfp-themoment.mfp-removing .mfp-content {
    opacity: 0;
}