#customSlide{
 margin: 0px !important;
 padding: 0px;
 position: relative;
 width: 704px;
}
#customSlide .slideArea,
#customSlide .slideArea .thumArea *{
 margin: 0px;
 padding: 0px;
}
#customSlide .slideArea{
 height: 200px;
 position: relative;
}
#customSlide .slideArea .slide img{
 width: 100%;
 height: auto;
}
#customSlide .slideArea .img{
 position: absolute;
 display: none;
 z-index: 1;
}
#customSlide .slideArea .this{
 display: block;
 z-index: 2;
}
#customSlide .thumArea{
 position: relative;
 display: table;
 table-layout: fixed;
 width: 704px;
}
#customSlide .thumArea .thum:first-child{
 border-left:solid 1px #ccc;
}
#customSlide .thumArea .thum{
 cursor: pointer;
 display: table-cell;
 *float:left;
 vertical-align: middle;
 border-top:solid 1px #ccc;
 border-right:solid 1px #ccc;
 border-bottom:solid 2px #ccc;
 background: #efefef;
 padding: 15px;
 *padding: 0px;
 line-height: 1.5em;
 box-sizing: border-box;
 font-size: 12px;
}
#customSlide .thumArea .this{
 background: #cee5f3;
 position: relative;
}
#customSlide .thumArea .this:after{
 position: absolute;
 content: "";
 display: block;
 top: -10px;
 left: 50%;
 margin-left: -5px;
 border-bottom: solid 10px #ccc;
 border-left: solid 10px transparent;
 border-right: solid 10px transparent;
 z-index: 2;
}
#customSlide .thumArea .this:before{
 position: absolute;
 content: "";
 display: block;
 top: -9px;
 left: 50%;
 margin-left: -5px;
 border-bottom: solid 10px #cee5f3;
 border-left: solid 10px transparent;
 border-right: solid 10px transparent;
 z-index: 3;
}
#customSlide .leftBtn{
 position: absolute;
 left: 0px;
 bottom: -10px;
 cursor: pointer;
}
#customSlide .rightBtn{
 position: absolute;
 right: 0px;
 bottom: -10px;
 cursor: pointer;
}
#customSlide .ctrBtn{
 padding: 10px;
 text-align: right;
 overflow: hidden;
 font-size: 14px;
 display: none;
}
#customSlide .ctrBtnView{
 display: block;
}
#customSlide .ctrBtn .inner{
 cursor: pointer;
 display: inline-block;
 *display:inline;
 *zoom:1;
 min-width: 162px;
 text-align: left;
}
#customSlide .startBtn .inner{
 background: url("../images/index/slide1_start.gif") no-repeat 11px 10px;
}
#customSlide .stopBtn .inner{
 background: url("../images/index/slide1_stop.gif") no-repeat 10px 10px;
}
#customSlide .ctrBtn .inner .circle_wrapper,
#customSlide .ctrBtn .inner .start,
#customSlide .ctrBtn .inner .stop{
 display: inline-block;
 *display: inline;
 *zoom:1;
 vertical-align: middle;
 *vertical-align: top;
}

/*円形ローディング用設定*/
.circle_wrapper {
	width: 30px;
	height: 30px;
	position: relative;
	display: inline-block;
 *display: inline;
 *zoom:1;
}
.circle_wrapper * {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
 *display: none;
}
/*IE9以下は円形に対応しないため非表示*/

html>/**/body .circle_wrapper * {
 display/***/: none¥9;
}

.circle {
	width: 50%;
	height: 100%;
	position: absolute;
	border: 5px solid #0F0F6F;
}
.spinner {
	-moz-border-radius: 125px 0 0 125px;
	-webkit-border-radius: 125px 0 0 125px;
	border-radius: 125px 0 0 125px;
	z-index: 200;
	border-right: none;
	-moz-transform-origin: 100% 50%;
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}
.spinnerAnime{
 -moz-animation: rota 4.9s linear forwards;
	-webkit-animation: rota 4.9s linear forwards;
	animation: rota 4.9s linear forwards;
}
.righthalf {
	-moz-border-radius: 0 125px 125px 0;
	-webkit-border-radius: 0 125px 125px 0;
	border-radius: 0 125px 125px 0;
	z-index: 100;
	border-left: none;
	left: 50%;
	opacity: 0;
}
.righthalfAnime{
 -moz-animation: rhalf 4.9s steps(1, end) forwards;
 -webkit-animation: rhalf 4.9s steps(1, end) forwards;
 animation: rhalf 4.9s steps(1, end) forwards;
}
.draft-right {
	-moz-border-radius: 0 125px 125px 0;
	-webkit-border-radius: 0 125px 125px 0;
	border-radius: 0 125px 125px 0;
	width: 50%;
	height: 100%;
	position: absolute;
	left: 50%;
	z-index: 50;
	border: 6px solid #ccc;
	border-left: none;
}
.draft-left {
	-moz-border-radius: 125px 0 0 125px;
	-webkit-border-radius: 125px 0 0 125px;
	border-radius: 125px 0 0 125px;
	width: 50%;
	height: 100%;
	position: absolute;
	z-index: 300;
	border: 6px solid #ccc;
	border-right: none;
}
.draft-leftAnime{
 -moz-animation: draft 4.9s steps(1, end) forwards;
 -webkit-animation: draft 4.9s steps(1, end) forwards;
 animation: draft 4.9s steps(1, end) forwards;
}
@-moz-keyframes rota {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@-webkit-keyframes rota {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes rota {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@-moz-keyframes rhalf {
	0%        { opacity: 0; }
	50%, 100% { opacity: 1; }
}
@-webkit-keyframes rhalf {
	0%        { opacity: 0; }
	50%, 100% { opacity: 1; }
}
@keyframes rhalf {
	0%        { opacity: 0; }
	50%, 100% { opacity: 1; }
}
@-moz-keyframes draft {
	0%        { z-index: 300; }
	50%, 100% { z-index: 50; }
}
@-webkit-keyframes draft {
	0%        { z-index: 300; }
	50%, 100% { z-index: 50; }
}
@keyframes draft {
	0%        { z-index: 300; }
	50%, 100% { z-index: 50; }
}

@media screen and (max-width: 767px) {
 #customSlide{
  width: 100%;
 }
 #customSlide .thumArea{
  width: 100%;
  text-align: center;
  padding: 10px;
 }
 #customSlide .thumArea .thum:first-child{
  border:none;
 }
 #customSlide .thumArea .thum{
  cursor: pointer;
  display: inline-block;
  border:none;
  background: #efefef;
  padding: 5px;
  background: #ddd;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  display: inline-block;
  width: 10px !important;
  height: 10px !important;
  margin: 0 5px 0 0;
 }
 #customSlide .thumArea .this{
  background: #000066;
 }
 #customSlide .thumArea .thum:before,
 #customSlide .thumArea .thum:after{
  display: none;
 }
 #customSlide .thumArea .thum .txt{
  display: none;
 }
 #customSlide .ctrBtnView{
  display: none;
 }
 #customSlide .ctrBtn{
  display: none;
 }
}