@charset "UTF-8";

/* contents ------------------------- */
#contents{
background:url(../img/example/bg.jpg) no-repeat center 140px;
background-size:100%;
}

/* catchBlc ------------------------- */
#catchBlc img{
display:block;
width:60%;
max-width:355px;
margin:0 auto;
}

/* exBlc ------------------------- */
.exBlc > .blcComm{
position:relative;
z-index:10;
}

.exBlc section > h1{
margin-bottom:5%;
padding-left:5%;
border-left:#eb6000 solid 5px;
font-weight:bold;
}

.exBlc section .info dt{
float:left;
padding-bottom:3%;
}

.exBlc section .info dd{
padding:0 0 3% 5em;
}

.exBlc section .info li{
display:inline-block;
}

.exBlc section .info li:before{
content:"・";
}

.exBlc .slider{
margin-top:-10%;
padding:10% 5% 5%;
background:url(../img/example/ex_bg.jpg);
box-shadow:rgba(0, 0, 0, 0.2) 0 18px 18px -20px;
}

.pager{
margin:3% 0 0 2%;
}

.pager li{
float:left;
width:23%;
margin:0 2% 2% 0;
}

.pager img {
display:block;
width:100%;
border:#fff solid 4px;
box-shadow:rgba(0, 0, 0, 0.2) 2px 2px 5px 0;
box-sizing:border-box;
}



/* bxslider ------------------------- */

/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
position: relative;
margin: 0 auto;
padding: 0;
*zoom: 1;
}

.bx-wrapper img {
width: 100%;
max-width:480px;
height: auto;
display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
box-shadow:rgba(0, 0, 0, 0.2) 2px 2px 5px 0;
border:  5px solid #fff;*
left: -5px;
background: #fff;
}

/* LOADER */

.bx-wrapper .bx-loading {
min-height: 50px;
background: url(../../img/bxslider/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
left: 5px;
background: url(../../img/bxslider/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
right: 5px;
background: url(../../img/bxslider/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}