@charset "utf-8";

/***************************************************************************
 *
 * POPUP STYLE
 *
 ***************************************************************************/

body.lock{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
}


/* POP LOADING */
.popLoading {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #FFF;
    left: 0;
    top: 0;
    z-index: 999999;
    display: none;
}
.popLoading * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.popLoading .loadIcon {
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: galpoploader 0.5s linear infinite;
}
.popLoading .loadIcon:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    border: 1px solid #000;
    border-radius: 50%;
    z-index: 1;
}
.popLoading .loadIcon:after {
    content: "";
    width: 104%;
    height: 6px;
    border-top: 6px solid #FFF;
    position: absolute;
    top: calc(50% + 3px);
    left: -1%;
    transform: translateY(-50%);
    z-index: 8;
}
@keyframes galpoploader {
    0% { transform: translate(-50%, -50%) rotate(0deg) }
    100% { transform: translate(-50%, -50%) rotate(180deg) }
}


/* GALLERY POPUP */
.galleryPopup {
    width: 100%;
    height: calc(100% - 88px);
    position: fixed;
    top: 88px;
    left: 0;
    z-index: 999991;
    background-color: #FFF;
    display: none;
    font-family: playfair-display,"游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
    color: #4d4d4d;
    overflow-y: scroll;

}
.galleryPopup .wrapPop {
    width: 100%;
    height: 100%;
    position: relative;
}

.galleryPopup .popData {
    width: 100%;
    height: 100%;
    display: table;
    table-layout: fixed;
}

.galleryPopup .popCloseBtn {
    width: 41px;
    height: 41px;
    position: absolute;
    right: 40px;
    top: 40px;
    z-index: 9;
}

.galleryPopup .popSlider {
    /*width: 50%;*/
    width: 100%;
    /*display: table-cell;*/
    /*vertical-align: top;*/
}
.galleryPopup .popSlider .wrapSlider {
    width: 100%;
    /*height: 100vh;*/
/*     height: 72vh; */
    height: 50vw;
    overflow: hidden;
    position: relative;
}
.galleryPopup .popSlider .bx-wrapper {
    margin: 0;
}
.galleryPopup .popSlider .bx-wrapper .bx-viewport {
    box-shadow: none;
    background: none;
    border: none;
    left: 0;
}
.galleryPopup .popSlider .popslides li {
    overflow: hidden;
    text-align: center;
}
.galleryPopup .popSlider .popslides li img {
    width: 100%;
    /*height: 125vh;*/
    display: inline-block;
}
.galleryPopup .popSlider .popslides li img.fullheight {
    /*height: 100vh;
    width: auto;*/
    max-width: inherit;
}
.galleryPopup .popSlider .bx-wrapper .bx-controls-direction a {
    width: 13px;
    height: 25px;
    background: url(../img/popup/pop_slide_next.png) no-repeat center center;
    background-size: 100%;
    top: calc(50vw - 40px);
    margin-top: 0px;
}
.galleryPopup .popSlider .bx-wrapper .bx-controls-direction .bx-prev {
    background-image: url(../img/popup/pop_slide_prev.png);
    /*left: 23px;*/
    left: 25vw;
}
.galleryPopup .popSlider .bx-wrapper .bx-controls-direction .bx-next {
    /*right: 23px;*/
    right: 25vw;
}

.galleryPopup .popSlider .popslidethumbs {
    width: 100%;
    position: static;
    bottom: 0;
    left: 0;
    padding: 10px 0;
    text-align: center;
    /*background-color: rgba(0,0,0,0.4);*/
}
.galleryPopup .popSlider .popslidethumbs li {
    width: 133px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 7px;
    text-align: center;
}
.galleryPopup .popSlider .popslidethumbs li:last-child,
.galleryPopup .popSlider .popslidethumbs li:first-child{
    width: 80px;
}
.galleryPopup .popSlider .popslidethumbs li a {
    display: block;
    overflow: hidden;
    max-height: 73px;
    border: 1px solid transparent;
}
.galleryPopup .popSlider .popslidethumbs li a.active {
    border-color: #FFF;
}
.galleryPopup .popSlider .popslidethumbs li span{
    width: 19px;
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}
.galleryPopup .popSlider .popslidethumbs li span a{
    display: block;
}
.galleryPopup .popContent {
    /*display: table-cell;*/
    /*vertical-align: middle;*/
}
.galleryPopup .galleryCont {
    width: 100%;
    /*max-width: 470px;*/
    /*max-height: 100vh;*/
    /*max-height: 28vh;*/
    padding: 20px 20px;
    /*overflow-y: auto;*/
    margin: 0 auto;
    text-align: center;
}
.galleryPopup .galleryCont .galTitle {
    font-size: 35px;
}
.galleryPopup .galleryCont .galSubTitle {
    font-size: 18px;
    /*margin-top: 50px;*/
    text-align: left;
}
.galleryPopup .galleryCont .galSubTitle2{
    text-align: center;
    margin-top: 20px;
}
.galleryPopup .galleryCont .galText {
    font-size: 14px;
    text-align: left;
    /*margin-top: 45px;*/
    margin-top: 26px;
}
.galleryPopup .galleryCont .galLink {
    text-align: center;
    margin-top: 40px;
    font-size: 16px;
}
.galleryPopup .galleryCont .galLink a {
    color: #000;
    text-decoration: underline;
}
.galleryPopup .galleryCont .galLink a:hover {
    text-decoration: none;
}
.galleryPopup .galleryCont .galAction {
    width: 100%;
    text-align: center;
    /*margin-top: 85px;*/
    margin-top: 20px;
    list-style: none;
}
.galleryPopup .galleryCont .galAction li {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    width: 25%;
}
.galleryPopup .galleryCont .galAction li+li {
    margin-left: 35px;
}
.galleryPopup .galleryCont .galAction li a {
    color: #575757;
    text-decoration: none;
    color: #fff;
    padding: 8px 55px;
    display: block;
    transition: all 0.25s;
    font-size: 12px;
}

.galleryPopup .galleryCont .galAction li:first-child a{
    background: #000 url(../img/popup/prev.png) no-repeat center left 14px;
    background-size: 9px;
}

.galleryPopup .galleryCont .galAction li:last-child a{
    background: #000 url(../img/popup/next.png) no-repeat center right 14px;
    background-size: 9px;
}

/*.galleryPopup*/ .galleryCont .galAction li a:hover {
    text-decoration: none;
    opacity: 0.8;
}

.gal-con-left{
    width: 100%;
    display: block;
}

.gal-con-right{
    display: inline-block;
    vertical-align: top;
}

.p_close{
    margin-top: 30px;
    text-align: center;
    margin-bottom: 30px;
}
.p_close .closeBtn{
    text-decoration: none;
    color: #fff;
    background: #868282 url(../img/popup/close.png) no-repeat top 12px left 10px;
    padding: 7px 37px;
    display: inline-block;
    background-size: 14px;
    transition: all 0.5s;
}

.p_close .closeBtn:hover{
    opacity: 0.8;

}


/* STYLE SP */
@media (max-width: 815px) {
    .galleryPopup {
        top: 0;
        height: 100%;
    }
    
    .galleryPopup .popSlider .popslidethumbs li {
        width: 10%;
        margin: 0 0.2%;
    }
    .galleryPopup .popSlider .popslidethumbs li a {
        max-height: 40px;
    }

    .galleryPopup .popSlider .bx-wrapper .bx-controls-direction a {
        width: 10px;
        height: 20px;
        top: calc(100vh - 25px);
        margin-top: -5px;
    }
    .galleryPopup .popSlider .bx-wrapper .bx-controls-direction .bx-prev {
        left: 10px;
    }
    .galleryPopup .popSlider .bx-wrapper .bx-controls-direction .bx-next {
        right: 10px;
    }

    .galleryPopup .popCloseBtn {
        width: 22px;
        height: 22px;
        /*right: 15px;
        top: 15px;*/
        right: 20px;
        top: 20px;
    }

    .galleryPopup .galleryCont {
        padding: 5% 3%;
        -webkit-overflow-scrolling: touch;
    }
    .galleryPopup .galleryCont .galTitle {
        font-size: 14px;
    }
    .galleryPopup .galleryCont .galSubTitle {
        margin-top: 20px;
        font-size: 16px;
        text-align: center;
    }
    .galleryPopup .galleryCont .galText {
        font-size: 13px;
        margin-top: 30px;
    }
    .galleryPopup .galleryCont .galLink {
        font-size: 15px;
        margin-top: 28px;
    }
    .galleryPopup .galleryCont .galAction {
        margin-top: 18px;
    }
    .galleryPopup .galleryCont .galAction li {
        font-size: 14px;
    }
    .galleryPopup .galleryCont .galAction li+li {
        margin-left: 30px;
    }
    .gal-con-left, .gal-con-right{
        width: 100%;
        float: none;
    }
    .galleryPopup .popSlider .popslidethumbs li span{
        width: 13px;
    }
    .galleryPopup .popSlider .popslidethumbs li:last-child,
    .galleryPopup .popSlider .popslidethumbs li:first-child{
        width: 50px;
    }

    .galleryPopup .galleryCont .galAction li{
        display: block;
        width: 100%;
    }
    .galleryPopup .galleryCont .galAction li+li{
        margin-left: 0;
        margin-top: 10px;
    }
    .galleryPopup .galleryCont .galAction li a{
        padding: 8px 34px;
        font-size: 12px;
    }
}


/* SMALL SCREEN STYLE */
@media (max-width: 485px) {

    .galleryPopup .wrapPop {
        display: block;
    }
    /*.galleryPopup .popCloseBtn {
        width: 20px;
        height: 20px;
        top: calc(50vh + 15px);
    }*/
    .galleryPopup .popSlider {
        width: 100%;
        display: block;
    }
    .galleryPopup .popSlider .wrapSlider {
        height:61vw;
    }
    .galleryPopup .popSlider .popslidethumbs {
        /*background-color: #CACACA;*/
    }
    .galleryPopup .popSlider .popslidethumbs li {
        width: 17%;
        margin: 0 0.2%;
    }
    .galleryPopup .popSlider .popslidethumbs li a {
        max-height: 33px;
    }


    .galleryPopup .popSlider .popslides li img{
        max-width: 100%;
    }
    .galleryPopup .popSlider .popslides li img.fullheight{
        max-width: 100%;
    }
    .galleryPopup .popSlider .bx-wrapper .bx-controls-direction a {
        top: calc(50vh - 25px);
    }
    .galleryPopup .popContent {
        width: 100%;
        height: 50vh;
        overflow-y: auto;
        display: block;
    }
    .galleryPopup .galleryCont {
        max-height: 100%;
    }
    .galleryPopup .galleryCont .galText {
        margin-top: 20px;
    }
    .galleryPopup .galleryCont .galLink {
        margin-top: 25px;
    }
    .galleryPopup .popSlider .popslidethumbs li:last-child,
    .galleryPopup .popSlider .popslidethumbs li:first-child{
        width: 30px;
    }

}