/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
.fied:before, .fied:after {z-index: 1002;}

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#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:#fff; opacity: 0.95; filter: alpha(opacity = 95);}
#colorbox{outline:0;}
/*
    #cboxTopLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 0;}
    #cboxTopCenter{height:25px; background:url(images/border1.png) repeat-x 0 -50px;}
    #cboxTopRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px 0;}
    #cboxBottomLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 -25px;}
    #cboxBottomCenter{height:25px; background:url(images/border1.png) repeat-x 0 -75px;}
    #cboxBottomRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px -25px;}
    #cboxMiddleLeft{width:25px; background:url(images/border2.png) repeat-y 0 0;}
    #cboxMiddleRight{width:25px; background:url(images/border2.png) repeat-y -25px 0;}
*/
    #cboxContent{ overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:0px; display: flex; justify-content: center; }
        #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
        #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
        #cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat 5px 5px;}

        /* 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; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
        #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
        #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
        #cboxClose{position:fixed; bottom:0; right:50%; display:block; color:#444;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

#inline_content{display: none;}
.cboxs{ padding:  50px 0; width: 830px; position: relative;box-sizing: border-box; background: rgba(255,255,255,0.00); }
.closebox{position: fixed; top: 50px; right: 50px; background:url(../img/topics_box/closebox.png) no-repeat center center; width: 80px;height: 80px; z-index: 100; cursor: pointer;}
#cboxClose{display: none;}
.cbox-title{background: url(../img/topics_box/title.png) no-repeat center bottom; text-align: center; font-size: 20px; min-width: 130px; padding-bottom: 10px; }
.cbox-content{width: 800px; display:  flex;justify-content: center;  flex-wrap: wrap; padding: 50px 0;}
.cbox-content01{ clear: both; width: 800px; position: relative; margin-top: 50px; }

.cbox-content02{ clear: both; width: 800px; position: relative; margin-top: 50px;}
.cbox-content02.zerospe{margin-top: 0px; }
.cbox-content02 .cbox-pic{ width: 290px; text-align: center; float: left;}
.cbox-content03{ clear: both; width: 800px; position: relative; margin-top: 50px; }


.cbox-catch{font-size: 20px; text-align: left; float: right; width: 480px;}
.cbox-main-ph{}
.cbox-txt{float: right; width:480px;padding-right: 10px; }
.cbox-txt01{color:#a7962b; font-size:16px; }
.cbox-txt02{font-size:16px; }
.cbox-txt03{font-size:12px; }
.cbox-name{font-size:18px; line-height: 1.4;}
.cbox-pic{ width: 290px; text-align: center; float: left;}
.cbox-spec{width: 480px;float: right;}
.cbox-content02 .cbox-spec{margin-top:0px;}
.cbox-content02 .cbox-spec .online-bnr{font-size: 18px; color:#FFF; background: #dcc65a; border-radius: 1em; text-align: center; width: 420px; padding: 15px 0; line-height: 1.2em;}

.cbox-content02 .cbox-spec .online-bnr span{background: url(../img/topics_box/window_wh.png) no-repeat right; padding-right: 20px;}

.cbox-content02.vertical{ display:  flex; justify-content: space-between;    flex-wrap: wrap;}
.cbox-content02.vertical .cbox-pic{width: 300px; text-align: center; padding-left: 0;}
.cbox-content02.vertical .cbox-spec{width: 480px;}

.cbox-note{float: left;width: 100%; clear: both; font-size: 12px; margin-top: 25px; }
.cbox-note li{text-indent: -1em;padding-left: 1em !important;
position:static !important; padding-top: 0px !important; margin-bottom: 0px !important; 
background: no-repeat !important;}
.cbox-note li a{color: #3e3a39;  text-decoration: underline;}
.cbox-note li a[target="_blank"] { background: url(../common_img/window.png) right 2px no-repeat; padding-right: 14px;  }
.cbox-note li .fc {  background: url(../common_img/icon_fc.png) no-repeat left 3px; padding-left: 20px; }

.cbox-main-ph-flm{position: relative; display: flex; justify-content: center; width: 300px; margin-top: 20px; float: left;}
.cbox-main-ph { height: 180px; width: 290px; position: relative; /* -webkit-box-shadow:0 1px 4px rgba(0,0,0, 0.3), 0 0 40px rgba(0,0,0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0,0,0, 0.3), 0 0 40px rgba(0,0,0, 0.1) inset; box-shadow:0 1px 4px rgba(0,0,0, 0.3), 0 0 40px rgba(0,0,0, 0.1) inset;
	*/ margin-bottom: 15px; }
.cbox-main-ph img { height: 180px; width: 290px; position: relative; z-index: 2; }
.cbox-main-ph a { background: no-repeat; border-bottom: none; }
a:hover .cbox-main-ph { opacity: 0.8; }
.cbox-main-ph:before, .cbox-main-ph:after { content: ""; position: absolute; z-index: 1; -webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 35px rgba(0, 0, 0, 0.8); box-shadow: 0 0 35px rgba(0, 0, 0, 0.8); top: 50%; bottom: 1px; left: 20px; right: 20px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; }
.cbox-main-ph:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); }
.modal-wrap{width: calc(100% - 16px);height: calc(100vh - 16px); background: rgba(255,255,255,.95); display: none; position: fixed; top: 8px;left: 8px; z-index: 1001; }
.modal-box{width: 100%;height: 100vh; display: flex; justify-content: center; overflow: auto;}

.cbox-content03 li{width: 33%; float: left; background:  no-repeat !important; padding-left: 0px !important; padding-right: 15px;}
.cbox-content03 li:last-child{width: 34%;}
.cbox-content03 li .cbox-pic{width: 100%;}
.cbox-content03 li .cbox-spec{width: 100%;}
.txt-s{font-size:12px;}

.cbox-info{float: left;width: 100%; clear: both; font-size: 16px; margin-top: 25px;}
.cbox-info li{position:static !important; padding-top: 0px !important; margin-bottom: 0px !important; 
background: no-repeat !important;}
.cbox-info li a{color: #3e3a39;  text-decoration: underline;}
.cbox-info li a[target="_blank"] span{ background: url(../common_img/window.png) right 2px no-repeat; padding-right: 14px;  }
.cbox-info li .fc {  background: url(../common_img/icon_fc.png) no-repeat left 3px; padding-left: 20px; }
.topics-list li dl dd .nowind{background: no-repeat !important;    border: none !important;} 

.cbox-border{ border:solid 1px #d5c562; width:800px; padding:20px; display: flex; justify-content: center;
flex-wrap: wrap;
margin-top: 50px;background: #FFF;}
.cbox-border .title{font-size: 24px;border-bottom:3px solid #d5c562;
position: relative;
text-align: center;
padding:5px 10px ;}
.cbox-border .title .small{font-size:14px;}
.cbox-border .title:before{content:"";
display:block;
width:50%;
border-bottom:3px solid #bab8b8;
position:absolute;
bottom:0;
left: 0;
margin-bottom:-3px;}
.cbox-border-list { margin-top: 30px; display: flex;justify-content: space-between;}
.cbox-border-list li{padding: 0 0px 0 0 !important; font-size: 16px; width: 400px; background: no-repeat!important;}
.cbox-border-list li:nth-child(2){width: 270px; margin-left: 30px;}
.cbox-border-list li .large{ font-size: 18px;}
.cbox-border-list li .small{ font-size: 12px;}
.cbox-border-pic{text-align: center; height: 200px; display:  flex; align-items: center; justify-content: center;}
.redcolor{color:#d9001a;}