@charset 'utf-8';

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{/*width:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;*/}
    #cboxTopCenter{/*height:14px; background:url(images/border.png) repeat-x top left;*/}
    #cboxTopRight{/*width:14px; height:14px; background:url(images/controls.png) no-repeat -36px 0;*/}
    #cboxBottomLeft{/*width:14px; height:43px; background:url(images/controls.png) no-repeat 0 -32px;*/}
    #cboxBottomCenter{/*height:43px; background:url(images/border.png) repeat-x bottom left;*/}
    #cboxBottomRight{/*width:14px; height:43px; background:url(images/controls.png) no-repeat -36px -32px;*/}
    #cboxMiddleLeft{/*width:14px; background:url(images/controls.png) repeat-y -175px 0;*/}
    #cboxMiddleRight{/*width:14px; background:url(images/controls.png) repeat-y -211px 0;*/}
    #cboxContent{padding:65px 0; /*background:#fff;*/ overflow:visible;}
        .cboxIframe{/*background:#fff;*/background:transparent;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:5px;}
        #cboxLoadingOverlay{/*background:url(images/loading_background.png) no-repeat center center;*/}
        #cboxLoadingGraphic{/*background:url(images/loading.gif) no-repeat center center;*/}
        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
        #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, /*#cboxClose*/ {border:0; padding:0; margin:0; overflow:visible;  position:absolute; bottom:-29px; background:url(images/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{left:0px; background-position: -51px -25px;}
        #cboxPrevious:hover{background-position:-51px 0px;}
        #cboxNext{left:27px; background-position:-75px -25px;}
        #cboxNext:hover{background-position:-75px 0px;}
        #cboxClose{
            font-size: 0;
            position:absolute;
            top:0; right:0;
            width:44px; height: 44px;
            border:0;
            background: url(../js/lib/colorbox/images/close.gif) no-repeat;
            text-indent: 100%; 
            white-space: nowrap; 
            overflow: hidden; 
            /*background-position:-100px -25px;*/
        }
        #cboxClose::before {
            content: "";
            font-size: 14px;
        }
        #cboxClose:hover{/*background-position:-100px 0px;*/}

        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-125px 0px;}



/*---------------------------------------*/
/* [z-index] */
#loader{z-index: 100;}
#stage{z-index: 50;}
#navs{z-index: 100;}
#links{z-index: 200;}
#main{z-index: 50;}
.page_ttl{z-index: 1000;}


/*---------------------------------------*/
/* [PAGE BASE SETTING] */

html, body{
    height: 100%;
}
.indexpage, .secpage{
    overflow-y: scroll;
}
#stage{
    position: relative;
    top:0; left:0;
    min-width: 1280px;
	overflow: hidden;
    background: url('../img/bg_paper.jpg') repeat-y;
}
#wrapper{
    min-height: 100%;
    overflow: hidden;
    background: url('../img/nav/line.png') repeat-y;
}
#wrapper.noline{
	background: none;
}

/* side nav */
#navs{
    position: relative;
    float:left;
    width:240px;
}
#navs .site_ttl{
    padding-top:32px;
    text-align: center;
}
#navs .navs_ttl{
    position: absolute;
    left:0; top:0;
}
#navs .mainNav{
    margin: 20px 0 0 12px;
}
#navs .mainNav li{
    position: relative;
	width:158px;
	overflow: hidden;
    margin-top: 10px;
    background: url('../img/nav/icon.png') no-repeat 0 10%;
}
#navs .mainNav .invalid{
    opacity:0.3;
}
#navs .mainNav .invalid::after{
    display: none !important;
}
#navs .mainNav li::after{
    content: '';
    display: none;
    position: absolute;
    left:0; top:1px;
    width:17px; height:17px;
    background: url('../img/nav/over.png') no-repeat;
}
#navs .mainNav li.active::after{
	display:block;
}
#navs .mainNav li:not(.active):hover::after{
    display: block;
    
    -webkit-animation: navIconkaiten 0.3s 1 linear;
        animation: navIconkaiten 0.3s 1 linear;
}
@keyframes navIconkaiten{
   0% { transform: rotate(260deg); }
   100% { transform: rotate(360deg); } 
}
@-webkit-keyframes navIconkaiten{
   0% { -webkit-transform: rotate(260deg); }
   100% { -webkit-transform: rotate(360deg); } 
}
#navs .sns{
    margin:20px 0 0 38px;
}
#navs .sns li{
    margin-top: 8px;
    font-size:14px;
    font-size:1.4rem;
    line-height: 1.5;
    color:#FFF;
}
#navs .sns img{
    margin-right: 10px;
    vertical-align: middle;
}

#navs .bnrs ul{
    margin-top: 30px;
    margin-left: 20px;
}
#navs .bnrs li:not(:first-child){
    margin-top: 15px;
}
#navs .bnrs img{
    width: 200px;
    height: auto;
}

#navs .copyrights{
    display: block;
    margin: 30px 0 0 38px;
}

/* main */
#main{
    position: relative;
    float: right;
    width: 100%;
    margin-left: -240px;
}
.mainInner{
    position: relative;
    margin-left: 240px;
}
#contents{
	background: #1a1613 url('../img/bg_sec1.jpg') no-repeat center top;
	background-size: 100% auto;
}
.page_ttl{
    position: absolute;
    right:20px; top:0;
}

/* links */
#links{
    position: fixed;
    left:0; bottom:-140px;
    width:100%;
    padding:13px 20px;
    box-sizing: border-box;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.8);
}
#linksInner{
    overflow: hidden;
}
/*
#linksInner dt{
    float:left;
    margin-right: 45px;
}
#linksInner dd{
    float:left;
    margin: 8px 20px 0 0;
    opacity:0.2;
}
#linksInner dd:last-child{
    margin-right: 0;
}
*/
#linksInner .ttl{
    float:left;
    width:120px;
}
#linksInner .bnrs{
    float:left;
    width:945px;
    overflow: hidden;
}
#linksInner .bnrs li{
    display: inline-block;
    margin: 18px 18px 0 0;
    opacity:0.6;
}
#linksInner .bnrs img{
    vertical-align: top;
}
#linksInner .bnrs li.last{
    margin-right: 0;
}


/*---------------------------------------*/
/* [LOADER] */
#loader{
    position: fixed;
    left:0; top:0;
    width: 100%; height: 100%;
    background: url('../img/bg_paper.jpg');
}
#loader .loaderProgress{
    position: absolute;
    left:50%; top:50%;
    
    -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
	
	width:100px; height:235px;
	background: url('../img/loader.png') no-repeat;
}
#loader .loaderInner{
	height:0;
	overflow: hidden;
}


/*---------------------------------------*/
/* [MODULE] */
.opover img{
    opacity:1;
    /*
    -webkit-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
    */
}
.opover:hover img{
    opacity: 0.7;
}




/*--------------------------------------*/
/* [loadedModal]*/
.loadedModal{
    width: 100%;
    height: 100%;
}
.loadedModal > a{
    display: block;
    width: 100%;
    height: 100%;
    transition: .3s ease;
}
.loadedModal > a >img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.loadedModal > a:hover{
    opacity: 0.8;
}