/* @charset "utf-8"; */

/*--- メイン画像全体のdiv ---*/
#WGS_js_main_image {
    position: relative;
    overflow: hidden;
    content: "";
    background-color: white;
    z-index: 5;
    margin-bottom: 35px; /*--- from 23A ---*/
}

/*--- メイン画像一覧のdiv ---*/
#WGS_js_main_image_list {
    position: relative;
    display: flex;
}

/*--- メイン画像のli ---*/
#WGS_js_main_image_list li {
    position: relative;
    display: inline-block;
}

/*--- メイン画像のimg ---*/
#WGS_js_main_image_list li img{
    vertical-align: top;
}

.WGS_slideshow.full_screen #WGS_js_main_image::after {
    z-index: 1000;
}

/*--- 自動再生制御ボタンのimg ---*/
@media screen and (min-width: 0px) {

    #WGS_js_main_image::after {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -25px;
        content: "";
    }

    #WGS_js_slide_animation_area.WGS_js_init #WGS_js_main_image::after {
        background: url(../../images/common/wg_start_s.png);
        background-repeat:no-repeat;
    }
    
    #WGS_js_slide_animation_area.WGS_js_pause #WGS_js_main_image::after {
        background: none;
    }
    
    #WGS_js_slide_animation_area.WGS_js_pause.WGS_js_right_after #WGS_js_main_image::after {
        background: url(../../images/common/wg_pause_s.png);
        background-repeat:no-repeat;
    }
    
    #WGS_js_slide_animation_area.WGS_js_auto_play #WGS_js_main_image::after {
        background: none;
    }
    
    #WGS_js_slide_animation_area.WGS_js_auto_play.WGS_js_right_after #WGS_js_main_image::after {
        background:  url(../../images/common/wg_start_s.png);
        background-repeat:no-repeat;
    }
    
    #WGS_js_slide_animation_area.WGS_js_manual_play #WGS_js_main_image::after {
        background: none;
    }
    
    #WGS_js_slide_animation_area.WGS_js_restart #WGS_js_main_image::after {
        background: url(../../images/common/wg_restart_s.png);
        background-repeat:no-repeat;
    }

}

@media screen and (min-width: 480px) {

    #WGS_js_main_image::after {
        position: absolute;
        width: 10%;
        height: 17.75700934579439%;
        top: 50%;
        left: 50%;
        margin-top: -5%;
        margin-left: -5%;
        content: "";
    }

    #WGS_js_slide_animation_area.WGS_js_init #WGS_js_main_image::after {
        background: url(../../images/common/wg_start_l.png);
        background-repeat:no-repeat;
        background-size: contain;
    }
    
    #WGS_js_slide_animation_area.WGS_js_pause #WGS_js_main_image::after {
        background: none;
    }
    
    #WGS_js_slide_animation_area.WGS_js_pause.WGS_js_right_after #WGS_js_main_image::after {
        background: url(../../images/common/wg_pause_l.png);
        background-repeat:no-repeat;
        background-size: contain;
    }
    
    #WGS_js_slide_animation_area.WGS_js_auto_play #WGS_js_main_image::after {
        background: none;
    }
    
    #WGS_js_slide_animation_area.WGS_js_auto_play.WGS_js_right_after #WGS_js_main_image::after {
        background:  url(../../images/common/wg_start_l.png);
        background-repeat:no-repeat;
        background-size: contain;
    }
    
    #WGS_js_slide_animation_area.WGS_js_manual_play #WGS_js_main_image::after {
        background: none;
    }
    
    #WGS_js_slide_animation_area.WGS_js_restart #WGS_js_main_image::after {
        background: url(../../images/common/wg_restart_l.png);
        background-repeat:no-repeat;
        background-size: contain;
    }

}

/*--- メイン画像手動再生ボタンのdiv ---*/
@media screen and (min-width: 0px) {

    #WGS_js_main_image .WGS_js_main_manual_play_button {
        position: absolute;
        width: 24px;
        height: 24px;
        top: 50%;
        margin-top: -12px;
        content: "";
        cursor: pointer;

    }

    #WGS_js_main_next_button {
        /* left: 100%; */
        /* margin-left: -24px; */
        background: url(../../images/others/wg_frame_feed.png);
        background-repeat:no-repeat;
    }

    #WGS_js_main_prev_button {
        background: url(../../images/others/wg_frame_return.png);
        background-repeat:no-repeat;
    }

}

@media screen and (min-width: 480px) {

    #WGS_js_main_image .WGS_js_main_manual_play_button {
        position: absolute;
        width: 7%;
        height: 10%;
        top: 50%;
        content: "";
        cursor: pointer;
        margin-top: -3.5%;
    }

    #WGS_js_main_next_button {
        /* left: 100%; */
        /* margin-left: -7%; */
        background: url(../../images/others/wg_frame_feed_l.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    #WGS_js_main_prev_button {
        /* left: 1%; */
        background: url(../../images/others/wg_frame_return_l.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    
}

_::-webkit-full-page-media, _:future, :root #WGS_js_main_image_list img {
    image-rendering: optimizeQuality;
}
_::-webkit-full-page-media, _:future, :root #WGS_js_thumbnail_image_list img {
    image-rendering: optimizeQuality;
}

/*--- ステータス毎の手動再生ボタンの表示切替 ---*/
#WGS_js_slide_animation_area.WGS_js_auto_play #WGS_js_main_image .WGS_js_main_manual_play_button {
    visibility: hidden;
}

#WGS_js_slide_animation_area.WGS_js_one_image #WGS_js_main_image .WGS_js_main_manual_play_button {
    visibility: hidden;
}

#WGS_js_slide_animation_area.WGS_js_first_image_selected #WGS_js_main_image #WGS_js_main_prev_button {
    visibility: hidden;
}

#WGS_js_slide_animation_area.WGS_js_last_image_selected #WGS_js_main_image #WGS_js_main_next_button {
    visibility: hidden;
}

/*--- 拡大縮小ボタンのdiv ---*/
#WGS_js_fullscreen_button{
    position: absolute;
    /* right: 0; */
    /* left: 0; */
    bottom: 0;
    cursor: pointer;
}

@media screen and (min-width: 0px) {

    #WGS_js_fullscreen_button {
        width: 36px;
        height: 23px;
    }

    .WGS_slideshow.full_screen #WGS_js_fullscreen_button {
        background: url(../../images/others/wg_scaling_s.png);
        background-size: contain;
        background-position: center;
        background-color: rgba(0, 0, 0, 0.5);
        background-repeat :no-repeat;
    }
    
    .WGS_slideshow.not_full_screen #WGS_js_fullscreen_button {
        background: url(../../images/others/wg_scaling_e.png);
        background-size: contain;
        background-position: center;
        background-color: rgba(0, 0, 0, 0.5);
        background-repeat :no-repeat;
    }

}

@media screen and (min-width: 480px) {

    #WGS_js_fullscreen_button {
        width: 11%;
        height: 12%;
    }

    .WGS_slideshow.full_screen #WGS_js_fullscreen_button {
        background: url(../../images/others/wg_scaling_s_l.png);
        background-size: contain;
        background-position: center;
        background-color: rgba(0, 0, 0, 0.5);
        background-repeat :no-repeat;
    }
    
    .WGS_slideshow.not_full_screen #WGS_js_fullscreen_button {
        background: url(../../images/others/wg_scaling_e_l.png);
        background-size: contain;
        background-position: center;
        background-color: rgba(0, 0, 0, 0.5);
        background-repeat :no-repeat;
    }

}



/*--- サムネイル全体のdiv ---*/
#WGS_js_thumbnail {
    display: flex;
    background-color: white;
}

/*--- サムネイル画像のwrapperのdiv ---*/
#WGS_js_thumbnail_image_wrapper {
    overflow: hidden;
}

@media screen and (min-width: 0px) {

    #WGS_js_thumbnail_image_wrapper {
        width: 80%;
    }

}

@media screen and (min-width: 375px) {

    #WGS_js_thumbnail_image_wrapper {
        width: 80%;
    }

}

@media screen and (min-width: 480px) {

    #WGS_js_thumbnail_image_wrapper {
        width: 90%;
    }
    
}

/*--- サムネイル画像全体のdivのID ---*/
#WGS_js_thumbnail_image {
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-user-select: none;
}

/*--- サムネイル画像一覧のdiv ---*/
#WGS_js_thumbnail_image_list {
    display: flex;
    background-color: white;
}

/*--- サムネイル画像のli ---*/
#WGS_js_thumbnail_image_list li {
    width: 100%;
    display: inline-block;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
#WGS_js_thumbnail_image_list li.empty {
    background-color: lightgray;
}

#WGS_js_thumbnail_image_list li{
    margin: 2px;
}
#WGS_js_thumbnail_image_list li.WGS_js_selected{
    outline: 2px solid orange;
}


/*--- サムネイル画像のimg ---*/
#WGS_js_thumbnail_image_list li img {
    z-index: 1;
    position: relative;
    pointer-events: auto;
    vertical-align: top;
}

/*--- サムネイル画像手動再生ボタンのdiv ---*/
.WGS_js_thumbnail_manual_play_button {
    position: relative;
    box-sizing: border-box;
    background-color: rgb(127, 127, 127);
    margin-top: 2px;
    margin-bottom: 2px;
    flex: none;
    cursor: pointer;
    z-index: 0;
}

#WGS_js_thumbnail_prev_button {
    background-position: center;
    background-repeat:no-repeat;
    border-left: 1px;
}

#WGS_js_thumbnail_next_button {
    background-position: center;
    background-repeat:no-repeat;
    border-right: 1px;
}

.WGS_js_thumbnail_manual_play_button.inactive {
    cursor: default;
}

.inactive::before{
    background-color: rgba(255, 255, 255, 0.66);
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

@media screen and (min-width: 0px)  and (max-width: 375px)  {

    .WGS_js_thumbnail_manual_play_button {
        width: 10%;
    }
    
    #WGS_js_thumbnail_prev_button {
        background-image : url(../../images/others/wg_thumbnail_frame_return_s.png);
    }
    
    #WGS_js_thumbnail_next_button {
        background-image : url(../../images/others/wg_thumbnail_frame_feed_s.png);
    }

    #WGS_js_thumbnail_image_list .WGS_js_selected .WGS_js_page_number_mark .WGS_js_page_number_mark_text  {
        /* left: calc(3% - 2px); */
    }
}

@media screen and (min-width: 375px) and (max-width: 480px) {

    .WGS_js_thumbnail_manual_play_button {
        width: 10%;
    }

    #WGS_js_thumbnail_prev_button {
        background-image : url(../../images/others/wg_thumbnail_frame_return.png);
    }

    #WGS_js_thumbnail_next_button {
        background-image : url(../../images/others/wg_thumbnail_frame_feed.png);
    }

}

@media screen and (min-width: 480px) and (max-width: 1024px) {

    .WGS_js_thumbnail_manual_play_button {
        width: 5%;
    }

    #WGS_js_thumbnail_prev_button {
        background-image : url(../../images/others/wg_thumbnail_frame_return_s.png);
    }

    #WGS_js_thumbnail_next_button {
        background-image : url(../../images/others/wg_thumbnail_frame_feed_s.png);
    }
    
}

@media screen and (min-width: 1024px) {

    .WGS_js_thumbnail_manual_play_button {
        width: 5%;
    }

    #WGS_js_thumbnail_prev_button {
        background-image : url(../../images/others/wg_thumbnail_frame_return.png);
    }

    #WGS_js_thumbnail_next_button {
        background-image : url(../../images/others/wg_thumbnail_frame_feed.png);
    }
    
}

/*--- スライド番号のdiv（メイン画像） ---*/
#WGS_js_main_image_list li .WGS_js_page_number_mark {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    width: 28.15789473684211%;
    height: 50%;
    top: -25%;
    /* right: -14.07894736842105%; */
}

#WGS_js_main_image_list li .WGS_js_page_number_mark .WGS_js_page_number_mark_text {
    position: absolute;
    color: white;
    text-align: center;
    width: 50%;
    height: 50%;
    top: 57%;
    /* left: 3%; */
}

/*--- スライド番号のdiv（サムネイル画像） ---*/
#WGS_js_thumbnail_image_list li .WGS_js_page_number_mark {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    width: 55.06315789473684%;
    height: 97%;
    top: calc(-48% + 2px);
    /* right: -27.03157894736842%; */
    z-index: 1;
    pointer-events: none;
}

#WGS_js_thumbnail_image_list li .WGS_js_page_number_mark .WGS_js_page_number_mark_text {
    position: absolute;
    color: white;
    text-align: center;
    width: 50%;
    height: 50%;
    /* top: 55%; */
    /* left: calc(3% - 1px); */
}

/*--- 自動再生中のサムネイル画像非表示化 ---*/
#WGS_js_slide_animation_area.WGS_js_auto_play #WGS_js_thumbnail {
    opacity: 0;
}

#WGS_js_slide_animation_area.WGS_js_auto_play .WGS_js_thumbnail_manual_play_button {
    visibility: hidden;
}

#WGS_js_slide_animation_area.WGS_js_auto_play #WGS_js_thumbnail_image_wrapper {
    text-indent: -9999px;
}

/*--- フルスクリーン時 ---*/
.WGS_slideshow.full_screen {
    object-fit: contain;
    position: fixed !important;
    top: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    box-sizing: border-box !important;
    min-width: 0px !important;
    max-width: none !important;
    min-height: 0px !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    margin: 0px !important;
}

/*--- フルスクリーン時の背景塗りつぶし用 ---*/
.WGS_slideshow.full_screen {
    z-index: 1000;
    background-color: black;
}

.WGS_slideshow.full_screen * {
    z-index: 1000;
}

#WGS_js_full_screen_back {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#print_image_area{
    position: relative;
    overflow: hidden;
    background-color: white;
    z-index: 5;
    display: none;
}

/*--- 印刷用設定 ---*/
@media print{

    #WGS_js_main_image_list li{
        display: none;
    }
        
    #print_image_area{
        display: inline;
    }

    .WGS_js_page_number_mark_text {
        position: absolute;
        color: white;
        text-align: center;
        width: 50%;
        height: 50%;
        top: 57%;
        left: 3%;
    }

    .WGS_js_page_number_mark {
        position: absolute;
        border-radius: 50%;
        background-color: rgb(127,127,127);
        width: 28.15789473684211%;
        height: 50%;
        top: -25%;
        right: -14.07894736842105%;
    }

    .WGS_js_page_number_mark_text {
        position: absolute;
        color: white;
        text-align: center;
        width: 50%;
        height: 50%;
        top: 57%;
        left: 3%;
        font-size: 30px;
    }

    li.WGS_js_selected {
        position: relative;
        display: inline-block;
        overflow: hidden;
    }
    /*--- Add MP team ---*/
    /*--- サムネイル全体のdiv ---*/
	#WGS_js_thumbnail {
	    display: none;
	}
}