@charset "UTF-8";


/* --------------------------------
ポップアップ
-------------------------------- */

/* 共通設定 */
.popup-banner {
    display: none;
    position: fixed;
    z-index: 100000;
}

.popup-banner .popupbanner {
    display: block;
    margin-bottom: 10px;
}

.popup-banner a {
    display: block;
}

.popup-banner a:nth-of-type(2) {
    padding: 0;
}

.popup-banner img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
}

.popup-banner hr {
    margin: 10px 0;
    padding: 0;
}

.popup-banner .popup-logo {
    width: 100px;
    margin: 0 auto 10px auto;
}

.close-btn {
    display: block;
    position: absolute;
    top: -15px;
    left: -15px;
    cursor: pointer;
    border-radius: 3px;
    width: 30px;
    height: 30px;
}

.popupcat {
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "Meiryo UI", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Droid Sans", sans-serif
}

.popuptext {
    font-size: 12px;
    margin-bottom: 5px;
}


/* ライトボックス設定 */
#lightbox {
    width: 90%;
    max-width: 600px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}



/* スライドイン設定 */
#slideIn {
    width: 100%;
    max-width: 220px;
    height: auto;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f0f0f0;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 10px 0 0 10px;
}

@media only screen and (max-width: 751px) {
    #slideIn {
        width: 40%;
    }
}

/* フローティングバー設定 */
#floatingBar {
    width: 100%;
    max-width: 960px;
    height: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    text-align: center;
}



/* 空白エリア */
.spacer {
    height: 3000px;
    background-color: #f9f9f9;
}