@charset "utf-8";


/*--- Common Setting ---*/

ul.notesListA01{
  font-size: 12px;
}

.txRe1{
  color:#cc0000!important;
}

.sas-r{
  bottom: 0.3em;
  font-size: 80%;
  padding-right: 0;
  position: relative;
  vertical-align: top;
}


/*--- Blocks ----*/

#wrapper {
  text-align: center;
}

.contents_block{

}

.contents_block.bg1{
	background:url(/afl/playjalcard/img/bg_1.png);
	background-position:top center;
}

.contents_block.bg2{
	background:url(/afl/playjalcard/img/bg_2.png) no-repeat;
	background-position:center top;
	background-color:#efefef;


}

.contents_block.bg3{
	/* background:url(/afl/playjalcard/img/bg_3.png) repeat-y #d6d4d4; */

  background: #e3e1e2;
}


.contents_block_inner{
	width:940px;
  margin: 0px auto!important;
}

@media only screen and (max-width: 768px) {
  .contents_block_inner{
    width: 100%;
  }
}

.top__txt {
  padding: 30px 0;
}
@media only screen and (max-width: 768px) {
  .top__txt {
    padding: 0;
  }
}


.top__txt img{
  width: 941px;
  height: 107px;
}

@media only screen and (max-width: 768px) {
  .top__txt img{
    width: 100%;
    height: 100%;
  }
}

@media only screen and (max-width: 768px) {
  .movie_list_title img{
    width: 100%;
  }
}

.movie_list{
 display: flex;
 gap: 0 30px;
 margin-top: 20px;
}

@media only screen and (max-width: 768px) {
  .movie_list{
    flex-direction: column;
    gap: 0 30px;
   }
}  
/* .movie_list>div{
	float:left;
	width:300px;
  margin: 20px 10px 0 0;
} */

@media only screen and (max-width: 768px) {
  .movie_list_item img{
    width: 100%;
  }
}

.use_list{
  display: flex;
  gap: 0 20px;
  margin-top: 20px;
}

@media only screen and (max-width: 768px) {
  .use_list{
    flex-direction: column;
   }
}

@media only screen and (max-width: 768px) {
  .use_list_item{
    margin-bottom: 30px;
   }
}

.use_list_item a{
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10;
}

.use_list_item a::before{
  content: '';
  position: absolute;
  bottom: -5px;
  left: 5px;
  width: 97%;
  height: 10px;
  background: radial-gradient(circle at left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 90%) 0 0 / 50% 100% no-repeat,
  radial-gradient(circle at right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 90%) 100% 0 / 50% 100% no-repeat;
  pointer-events: none;
  filter: blur(2px);
  z-index: -1;
}

@media only screen and (max-width: 768px) {
  .use_list_item a::before{
    left: 36px;
    width: 46%;
  }
}

.use_list_item a img{
  width: 300px;
}
@media only screen and (max-width: 768px) {
  .use_list_item a img{
    width: 100%;
  }
}

.header{
  max-width: 940px;
  margin: 10px auto 0;
}

.header__inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_center img{
  width: 100%;
}

.header_right{
  display: flex;
  gap: 0 15px;
}


.contents {
width: auto!important;
}

#footer {
 text-align: center;
 padding:40px 0;
}


.sp-slide{
 cursor: pointer;
}



body{
	position:relative;
}

#slider_conts{
 display:none;

}

#slider_conts .play_btn{
 position:absolute;
 top:0;
 left:5px;
 height:430px;
 width:939px;
 text-indent:-9999px;
 background:url(/afl/playjalcard/img/icon_play.png) center center no-repeat;
 opacity: 0;
 filter: alpha(opacity=0);
 -webkit-transition: 0.3s ease-in-out;
 -moz-transition: 0.3s ease-in-out;
 -o-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}

#slider_conts .play_btn:hover{
 opacity: 1;
 filter: alpha(opacity=100);

}


#mono_ver .play_btn{
 position:absolute;
 top:0;
 left:5px;
 height:430px;
 width:939px;
 text-indent:-9999px;
 background:url(/afl/playjalcard/img/icon_play.png) center center no-repeat;
 opacity: 0;
 filter: alpha(opacity=0);
 -webkit-transition: 0.3s ease-in-out;
 -moz-transition: 0.3s ease-in-out;
 -o-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}

#mono_ver .play_btn:hover{
 opacity: 1;
 filter: alpha(opacity=100);

}

.position_style{
 position:relative;
 width: 940px;
 margin-left: auto;
 margin-right:auto;
 display: none;
 cursor: pointer;
}

#mordal_bk{
	position:fixed;
    background-color: #000;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0.8;
    filter: alpha(opacity=80);
	display:none;
}

.modal {
  display: none;
}

.bnr_area{
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	background-color:#000;
}

.bnr_area .bnr_area_inner{
	width:950px;
	margin:0 auto;
  padding:20px;
}

.bnr_area .bnr_area_inner a{
  margin-right:20px;
  display:inline-block;
  background-color: #fff;
}

.bnr_area .bnr_area_inner a.last{
  margin-right:0;
}

.modal .youtube {
  position: fixed;
  background: #000;
  width: 950px;
  left: 50%;
  top:50%;
  height: 535px;
}

.modal .close_area {
    background-color: #000;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

/* /Button */

.mo img:hover  {
  -ms-filter: "alpha( opacity=65 )";
  filter: alpha(opacity=65);
  -moz-opacity: 0.65;
  opacity: 0.65;
  background: #fff;
  cursor: pointer;
}

#lean_overlay{
  position: fixed; z-index:100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
  display: none;
}

#mordal_l #mordal_cm1,#mordal_l #mordal_cm2,#mordal_l #mordal_cm3 ,#mordal_l #mordal_cm4{
box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
display: none;
width:760px;
max-height:80%;
padding:25px 20px 20px;
background: #fff;
border: #ccc 1px solid;
position: fixed;
z-index: 1001;
overflow:auto;
position:relative;
font-size:14px;
}

#mordal_l .top_btn{
 display:block;
 width:25px;
 height:26px;
 margin-left:-15px;
 position:absolute;
 top:10px;
 right:10px;
}

#mordal_l .mds{
 text-align:center;
 font-size:30px;
 margin-bottom:25px;

}


#mordal_l .text_box{
 float:left;
 width:310px;
}

#mordal_l .text_box p{
 line-height:1.5;
}

#mordal_l .border_top{
 border-top:solid 1px #999;
 margin-top:20px;
 padding-top:20px;
}


#mordal_l .image_box{
 float:right;
 width:400px;
}

#mordal_l .image_box img{
 width:100%;
}

.btn_info{
    margin:25px 0 10px;
text-align: center;
}

.btn_info span{
    background-color: #fff;
    border: 1px solid #d0d0d0;
    padding: 10px 20px;


}

.btn_info span.inText a{
    text-decoration: none!important;
}


.btn_info span.inText a:hover{
    text-decoration: underline!important;
}

.myjalcard_login_btn{
 display: inline-block;
 *display: inline;
 *zoom: 1;
 vertical-align:top;
}

.myjalcard_login_btn>span{
 background-color:#cc0000;
 height:80px;
 line-height:80px;
 width:440px;
 color:#fff;
 font-size:22px;
 letter-spacing:0.1em;
 font-weight:bold;
 display: inline-block;
 *display: inline;
 *zoom: 1;

}

.myjalcard_login_btn>span:hover{
 filter: alpha(opacity=65);        /* ie 6 7 */
 -ms-filter: "alpha(opacity=65)";  /* ie 8 */
  -moz-opacity: 0.65;
  opacity: 0.65;
}

@media only screen and (max-width: 768px) {
  .bn_customersvoice img{
    width: 95%;
    margin: 5px auto 0;
  }
}

.bnr_2{
 text-align: center;
}

@media only screen and (max-width: 768px) {
  .bnr_2 img{
    width: 100%;
   }
}

@media only screen and (max-width: 768px) {
  .bnr__cpn a img{
    width: 100%;
   }
}

@media only screen and (max-width: 768px) {
  .bnr__text{
    font-size: 20px;
    padding-left: 30px;
  }
}