


#id_ea_common_content{
  width:auto;
}

.cl_ctpl {
  width:100%;
  height:auto;
}

.cl_ctpl a{
  text-decoration: none;
}
/*
.cl_ctpl a:hover {
  opacity:0.8;
}*/


/*-----------------------------------
  スライダー (ここは好きなように)
-------------------------------------*/
/*スライダーが1枚以下の時はこちらのstyleを適用してください*/
.slider_one{
  width: 100%;
  height: auto;
  margin: 0;padding: 0;
  text-align: center;
  background: #060803;
}

.slider_one img{
  margin: 0;
  padding: 0;
  max-width: 660px;
  width:100%;
  height:auto;
  vertical-align: bottom;
}

.cl_ctpl .cl_slide_bloc {
  /*width:725px;
  height:325px;*/
  margin:0 auto;
  margin-top:10px;

}

.cl_ctpl .cl_slide_bloc img {
  max-width: 100%;
  height: auto;
}

.cl_slide_bloc .slick-slide {
    -webkit-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
}
 
.slider_box{
  position:relative;
}

.slick-next,
.slick-prev {
  position:absolute;
  width: 160px;
  height: 100%;
  border: 0;
  top: 0;
  z-index: 1;
  cursor:pointer;
  opacity:0.8;  
}

.slick-next {
  right: 0;
  /*** 画像もいけます
  background:url("../img/top/slider_next_pc.png");
  ***/
}
.slick-prev {
  left: 0;
  /*** 画像もいけます
  background:url("../img/top/slider_prev_pc.png");
  ***/
}

.slick-prev:before,
.slick-next:before {
    color: #000;
}

.slick-next:hover,
.slick-prev:hover {
  opacity:1;
  transition:0.3s;
}

.slick-slider{
    margin-bottom: 30px;
}

.slick-dots{
    position: absolute;
    bottom: -21px;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li{
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 16px;
    height: 16px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before{
    opacity: 1;
}
.slick-dots li button:before{
  content: '';

  /** 画像もいけます
  background:url("../img/top/slider_point.png");  
  **/

  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  color: black;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  width: 80%;
  height: 80%;
  border-radius  : 50%;
  background-color:  rgba(0, 0, 0, 0.5);
}

.slick-dots li.slick-active button:before{
  /*** 画像もいけます
  background:url("../img/top/slider_point.png");
  background-position:0 16px;
  ***/
  color: black;

  width: 80%;
  height: 80%;
  border-radius  : 50%;
  border-color  : rgba(0, 0, 0, 0.5);
  background-color:  rgba(128, 128, 128, 0.5);
}


/*-------------------
  中身
--------------------*/
/* 右サイド */
.cl_ctpl .cl_right_side_bloc {
  float:left;
  width:250px;
  margin-bottom:10px;
  text-align:center;
}

.cl_sns {
  background:url("/game/bishibashi/channel/img/top/sns_bg.png");
}

/* タイムライン */
.cl_ctpl .cl_ctpl_eaApp {
  width:227px;
  height:200px;
  display:block;
  margin:-4px auto 10px auto;
  background:#FFFFFF;
  overflow:auto;
}

.cl_ctpl .cl_ctpl_eaApp li {
  text-align:left;
}


/* 設置店舗 */
#id_cptl_search_facility_link {
  width  : 100%;
}

.cl_cptl_search_facility_link {
  float:left;
}


/* 左ブロック */
.left_bloc{
  width:700px;
  float:left;
  margin-right:30px;
}

.right_bloc{
  /*** 右ブロック用追加 ***/
  width: calc(100% - 730px);
  display  : inline-block;
}

@media screen and (max-width: 980px) {

  /*-------------------
    スライダー
  --------------------*/
  .cl_ctpl .cl_slide_bloc {
    width:100%;
    height:auto;
  }
  .cl_slide_bloc .slick-slide {
    -webkit-transition:all 0.25s ease-in-out;
     transition:all 0.25s ease-in-out;
  }
  .cl_slide_bloc .slick-slide:not(.slick-center) {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
  }
  .slick-next {
    display:none !important;
  }
  .slick-prev {
    display:none !important;
  }

  .cl_slide_bloc .slick-slide:not(.slick-center):before {
      content:"";
      width:100%;
      height:100%;
      position:absolute;
      background:rgba(0, 0, 0, 0.67);
      z-index:2;
  }
  .slider_box:before{
    display:none;
  }  
  .slider_box:after{
    display:none;
  }

  /*-------------------
    中身
  --------------------*/
  .left_bloc{
    width:100%;
  }

  .right_bloc{
    width: 100%;
    display  : block;  
  }  

  .cl_ctpl .cl_right_side_bloc{
    width:50%;
    background-size:contain;
    margin-left  : auto;
    margin-right  ; auto;
  }
  
  .cl_ctpl .cl_ctpl_small_banner_bloc {
    margin:0 auto;
    width:325px;
  }
  
}

@media screen and (max-width:700px){
  .left_bloc{
    width:100%;
  }
}

@media screen and (max-width:600px){

  .right_bloc{
    width:100%
  }

  .cl_ctpl .cl_right_side_bloc {
    width:100%;
    margin-top:10px;
    padding-top:52px;
  }

  /* タイムライン */
  .cl_ctpl .cl_ctpl_eaApp {
    width:auto;
    height:250px;
    padding:10px;
    background:#FFFFFF;
  }

}

@media screen and (max-width:480px){
  .cl_slide_bloc .slick-slide:not(.slick-center):before {
    content:"";
    display:none;
  }
}



/*
==================================
追加
==================================
*/





.cl_title{
background: #F00;
text-align: center;
border: 4px solid #fff;
position: relative;
height: 45px;
margin-top: 20px;
margin-bottom: 30px;
}

/*ミニゲーム紹介*/
.cl_title#mini{
background: -moz-linear-gradient(left,#ff8b04, #ff3f01, #ff8b04);
background: -webkit-linear-gradient(left,#ff8b04, #ff3f01, #ff8b04);
background:url(/game/bishibashi/channel/img/common/dot.png), linear-gradient(to right,#ff8b04, #ff3f01, #ff8b04);
background-position: 100%;
}

.cl_title#mini img{
    margin-top: -35px;
    margin-left: 280px;
}

/*最新ミニゲーム紹介*/
.cl_title#new{
background: -moz-linear-gradient(left,#78ff20, #0ffc00, #78ff20);
background: -webkit-linear-gradient(left,#78ff20, #0ffc00, #78ff20);
background:url(/game/bishibashi/channel/img/common/dot.png), linear-gradient(to right,#78ff20, #0ffc00, #78ff20);
background-position: 100%;
position: relative;
}

.cl_title#new img{
	position: absolute;
    margin-top: -33px;
    margin-left: 247px;
}

.cl_title#new img.vol{
	top: 0px;
    left: 660px;
    margin: 0;
    width: 73px;
}


/*プレーデータ*/
.cl_title#pdata{
background: -moz-linear-gradient(left,#14feff, #01a9ff, #14feff);
background: -webkit-linear-gradient(left,#14feff, #01a9ff, #14feff);
background:url(/game/bishibashi/channel/img/common/dot.png), linear-gradient(to right,#14feff, #01a9ff, #14feff);
background-position: 100%;
}

.cl_title#pdata img{
    margin-top: -33px;
    margin-left: 340px;
}


/*ミニゲーム紹介*/
.minigame_area{
    display: inline-block;
    padding:10px;
    box-sizing: border-box;
}

.minigame_con{
	width:300px;
    height:420px;
    margin:10px;
    float:left;
	background:#ffF;
	border-radius: 10px;
}

.minigame_con .title{
background:#5100fd;
height:80px;
text-align:center;
box-sizing:border-box;
border-radius: 10px 10px 0px 0px;

width: 300px;
vertical-align: middle;
line-height: 0;
display: table-cell;
}

.minigame_con .thum{
text-align:center;
padding:5px;
}

.minigame_con .txt{
text-align:center;
padding:5px;

width: 300px;
vertical-align: middle;
line-height: 0;
display: table-cell;
}

.minigame_con .title img{
margin:auto;
}

.minigame_con .thum img{
width:100%;
max-width: 290px;
}

.minigame_con .txt img{
margin:auto;
max-width: 290px;
}


/*最新ミニゲーム紹介*/
.newgame_area{
    display: inline-block;
}

.newgame_con{
background:#ffF;
border-radius: 10px;
width:980px;
display: inline-block;
}

.newgame_con .title{
background:#5100fd;
height:50px;
padding:12px;
text-align:center;
box-sizing:border-box;
border-radius: 10px 10px 0px 0px;
}

.newgame_con .thum{
	text-align: right;
    padding: 20px;
    float: left;
    width: 50%;
    box-sizing: border-box;
}

.newgame_con .txt{
	text-align: left;
    padding: 20px;
    float: left;
    width: 50%;
    box-sizing: border-box;
}

.newgame_con .title img{
max-width:100%;
height:25px;
}

.newgame_con .thum img{
width:80%;
}

.newgame_con .txt img{
width:70%;
}


/*プレーデータ*/
.pdata_area{
    display: inline-block;
	width: 980px;
	background: rgba(255,255,255,0.6);
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
}

.pdata_con{
    margin-bottom:20px;
}

.table_inner{
	border: solid 2px #fff;
}

.pdata_con table{
	margin: auto;
    width: 100%;
    background-color: #fff;
    border: 5px solid #01a8ff;
}


.pdata_con th{
	background-color: #59c6fd;
    color:#fff;
    width:30%;
    font-weight:bold;
}

.pdata_con th, td {
    border: 2px solid #000;
    text-align: center;
    padding:10px;
}

.pdata_title{
	margin-bottom: 10px;
    border-bottom: 4px solid #5100fd;
}

.more_btn{
	display:none;
}

.slide_box{
    display: block;
}

@media screen and (max-width: 980px) {

.cl_title{
    margin-top: 10px;
    margin-bottom: 10px;
}

.cl_title#mini img{
    margin: -10px auto;
    position: initial;
}

.cl_title#new img{
	margin: -10px auto;
    position: initial;
}

.cl_title .volbox {
	width: 303px;
    margin: auto;
    position: relative;
}
	
.cl_title#new img.vol {
    top: 18px;
    left: 242px;
    width: 46px;
    position: absolute;
}

.cl_title#pdata img{
	margin: -10px auto;
    position: initial;
}

.minigame_area{
    width: 100%;
}


.minigame_con{
	width:100%;
    height: auto;
    margin:0;
    margin-bottom: 10px;
}

.slide_box div:nth-child(1){
    margin-top: 10px;
}


.minigame_con .title{
	height:auto;
    padding:10px;
    display: block;
	width:100%;
}

.minigame_con .thum {
    width: 50%;
    box-sizing: border-box;
    float: left;
}

.minigame_con .txt {
    width: 50%;
    padding;10px;
    box-sizing: border-box;
    float: left;
}

.minigame_con .txt img{
	width: 90%;
    max-width:293px;
}


.newgame_area{
    display: block;
    padding: 0 10px;
}


.newgame_con{
	width:100%;
    height:auto;
    display: inline-block;
}

.newgame_con .thum{
	padding:5px;
}

.newgame_con .thum img{
	width:100%;    
    max-width: 290px;
}

.newgame_con .txt{
	padding:5px;
}

.newgame_con .txt img {
    width: 90%;
    max-width: 293px;
}

.pdata_area {
	width:100%;
}


.more_btn{
    display: inline-block;
    background-color: #8300fd;
    color: #fff;
    text-align: center;
    font-weight: bold;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
/*    margin-bottom: 10px;*/
    border-radius: 10px;
    border: solid 2px #fff;
    line-height: 30px;
}

.sp_mini_box{
    float: left;
    background: rgba(255,255,255,0.6);
    width: 100%;
    border-radius: 10px;
    box-sizing: border-box;
}

.slide_box{
    display: none;   
}


.accordion_icon,
.accordion_icon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.accordion_icon {
	position: relative;
	width: 30px;
	height: 30px;
	float: right;
	margin-right: 5px;
}
.accordion_icon span {
	position: absolute;
    left: 6px;
    width: 50%;
	height: 2px;
    background-color: #fff;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
    top: 12px;
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
    top: 12px;
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

/*下部閉じる×ボタン*/
.accordion_icon#close span {
    background-color: #8300fd;
}
.accordion_icon#close span:nth-of-type(1) {
	transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.accordion_icon#close span:nth-of-type(2) {
	transform: rotate(90deg);
    -webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
}

/*＋、－切り替え*/
#accordion1 .accordion_icon.active span:nth-of-type(1) {
	display:none;
}
#accordion1 .accordion_icon.active span:nth-of-type(2) {
	top: 12px;
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);

}
/*＋、×切り替え*/
#accordion2 .accordion_icon.active span:nth-of-type(1) {
	top: 12px;
    transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
#accordion2 .accordion_icon.active span:nth-of-type(2) {
	top: 12px;
    transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
}


.accordion_icon_close span:nth-of-type(1) {
	top: 12px;
    transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.accordion_icon_close span:nth-of-type(2) {
	top: 12px;
    transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
}

/* cleatfix */

.clearfix {zoom:1;}
.clearfix:after {
	content : ""    ;
	display : block ;
	clear   : both  ;
}



}

