@charset 'UTF-8';

/* Carousel (汎用レスポンシブ)
---------------------------------------------------------------------------------------------- */
.carousel                         { position: relative; margin: 0; }
.carousel-inner                   { position: relative; width: 100%; overflow: hidden; }
.carousel-inner > .item           { position: relative; display: none; -webkit-transition: .6s ease-in-out left; transition: .6s ease-in-out left; }
.carousel-inner > .item > img,
.carousel-inner > .item > a > img { line-height: 1; width: 100%; }

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev         { display: block; }
.carousel-inner > .active       { left: 0; }
.carousel-inner > .next,
.carousel-inner > .prev         { position: absolute; top: 0; width: 100%; }
.carousel-inner > .next         { left:  100%; }
.carousel-inner > .prev         { left: -100%; }
.carousel-inner > .next.left,
.carousel-inner > .prev.right   { left: 0; }
.carousel-inner > .active.left  { left: -100%; }
.carousel-inner > .active.right { left:  100%; }

/* Indicators */
.carousel-indicators           { position: absolute; bottom: -30px; left: 50%; z-index: 15; width: 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none; }
.carousel-indicators li        { display: inline-block; margin: 0 5px 0 0; height: 18px; width: 18px; text-indent: 100%; overflow: hidden; background: url(../img/dot_deactive.png) center bottom no-repeat; background-size: cover; }
.carousel-indicators li.active { background: url(../img/dot_active.png) center bottom no-repeat; background-size: cover; }
.carousel-indicators li:hover  { cursor: pointer; }

/* Controls */
.carousel-control       { margin-top: -40px; position: absolute; top: 50%; left: 0; width: 40px; font-size: 4.2rem; color: #fff; text-align: center; -webkit-text-shadow: 0px 0px 10px rgba(0,0,0,0.75); text-shadow: 0px 0px 10px rgba(0,0,0,0.75); }
.carousel-control.left  { }
.carousel-control.right { right: 0; left: auto; }
.carousel-control:hover,
.carousel-control:focus { color: rgba(255,255,255,.75); text-decoration: none; outline: 0; }

#carousel_pc_sp_top { margin-bottom: 40px; }
#carousel_pc_btm    { display: none; }
#carousel_pc_side1,
#carousel_pc_side2  { margin-bottom: 10px; }
#carousel_sp_side1,
#carousel_sp_side2  { margin-bottom: 10px; }

@media (min-width: 960px) {
 #carousel_pc_btm { display: block; margin-bottom: 40px; }
}