/*-------------*/
/*common*/
/*-------------*/
*:focus{outline:none;}
body{
min-width:320px !important;
font-family:"メイリオ",Meiryo,"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka",Arial,Verdana,Helvetica,sans-serif;}

/*-------------*/
/*共通レイアウト*/
/*-------------*/
.cl_ctpl_clear{
clear:both;}

.cl_ctpl_space{
height:14px;
display:block;}

.cl_ctpl_inner{
width:980px;
position:relative;
margin:0 auto;}

.cl_ctpl_head{
display:block;
margin-bottom:15px;}

/*画面上部の画像 */
.cl_ctpl .cl_ctpl_top_img_outer{
position:relative;
width:100%;
height:120px;}

.cl_ctpl .cl_ctpl_top_img{
width:1200px;
height:150px;
margin-left:-120px;}

.cl_ctpl .cl_ctpl_top_img > img{
width:100%;
display:none;}

/*-------------*/
/*コンテンツロゴ*/
/*-------------*/
h1.header_logo{
position:absolute;
top:0px;
width:100%;
height:120px;
background:url("../img/common/header_logo.png") no-repeat;
background-position:center;
/*background-size:cover;*/}

h1.header_logo a{
display:block;
width:100%;
height:120px;}

/*--------------*/
/*もっと見る*/
/*-------------*/
.cl_read_more{
width:100%;
margin:14px auto;
height:30px;
text-align:center;}

/*--------------*/
/*ページトップへ */
/*-------------*/
.cl_btn_pagetop{
z-index:2;
display:none;
width:70px;
position:fixed;
bottom:30px;
right:30px;}

.cl_btn_pagetop a{
display:block;
text-align:center;
text-decoration:none;}
 
.cl_btn_pagetop a:hover{
display:block;
text-align:center;
text-decoration:none;}

.cl_btn_pagetop a > img{width:100%;}

@media screen and (max-width:700px){
.cl_btn_pagetop{
bottom:20px;
right:10px;}
.cl_btn_pagetop a > img{width:70%;}
/*.cl_btn_pagetop{visibility:hidden;}*/}

/*--------------*/
/* smallバナー*/
/*-------------*/
.cl_ctpl_small_banner_bloc{
margin-top:10px;
padding-bottom:30px;}


.cl_ctpl_small_banner_bloc div{
margin:1%;
display:inline-block;}

.cl_ctpl_small_banner_bloc div:nth-child(odd){text-align:right;}
.cl_ctpl_small_banner_bloc div:nth-child(even){text-align:left;}

.cl_ctpl_small_banner_bloc div img{width:145px;}
.cl_ctpl_small_banner_bloc:after{visibility:hidden; display:block; content:" "; clear:both; height:0;}


@media screen and (max-width:800px){
.cl_ctpl_small_banner_bloc div{
float:left;
width:49%;
margin:0.5%;}}



/*--------------*/
/*中央部レイアウト*/
/*-------------*/
.cl_ctpl_side{
max-width:300px;
display:none;}

.cl_ctpl_side > img{
width:100%;}

.cl_ctpl_side .cl_ctpl_side_none{
height:125px;
display:block;}

/*--------------*/
/*popup */
/*-------------*/
.cl_popup_zoomin{}
.cl_popup_zoomin .cl_popup-animation{
opacity:0;
transition:all 0.3s ease-in-out;
transform:scale(0.8);}
.cl_popup_zoomin.mfp-bg{
opacity:0;
transition:all 0.4s ease-out;}
.cl_popup_zoomin.mfp-ready .cl_popup-animation{
opacity:1;
transform:scale(1);}
.cl_popup_zoomin.mfp-ready.mfp-bg{
opacity:0.8;}
.cl_popup_zoomin.mfp-removing .cl_popup-animation{
transform:scale(0.8);
opacity:0;}
.cl_popup_zoomin.mfp-removing.mfp-bg{
opacity:0;}

@media screen and (max-width:980px){
/*-------------*/
/*共通*/
/*------------*/
.cl_ctpl_inner{
width:100%;
font-size:13px;}

.cl_common_bloc_inner,.cl_getdata_top,#id_error,#id_welcome,.cl_userstatus{
margin-bottom:32px;
border-radius:0;}

/*-------------*/
/*ロゴ*/
/*------------*/
.cl_ctpl_head{
margin-bottom:0;
position:relative;}

h1.header_logo{
width:150px;
background:url("../img/common/header_logo.png") no-repeat;
background-size:contain;
position:absolute;
top:4px;
left:5px;}

h1.header_logo a{
width:auto;
height:50px;
display:block;}

.content_logo{
width:86px;
height:23px;
background:url("../img/common/content_logo.png") no-repeat;
position:absolute;
top:auto;
bottom:9px;
left:8px;
display:block;
z-index:2;}

.cl_ctpl .cl_ctpl_top_img{
background:none;
width:auto;
height:66px;
margin:0;
overflow:hidden;}

.cl_ctpl .cl_ctpl_top_img > img{
display:block; }

.cl_ctpl .cl_ctpl_top_img_outer{
height:auto;}}

@media screen and (max-width:768px){
/*--------------*/
/* キャラクタ */
/*-------------*/
#id_ctpl_left_side{
float:left;
display:block;
left:auto;
width:75px;}

#id_ctpl_right_side{
display:block;
right:left:auto;
width:75px;
float:right;}}

@media screen and (min-width:1200px){
/*キャラクタ */
#id_ctpl_left_side{
display:block;
left:0px;
position:fixed;
bottom:0px;
z-index:2;}

#id_ctpl_right_side{
display:block;
right:0px;
position:fixed;
bottom:0px;
z-index:2;}}

/*
=====================================================
追加記述
=====================================================
*/
.cl_ctpl_inner img{padding:0; margin:0; border:0; vertical-align:middle;}

.cl_ctpl_inner section,
.cl_ctpl_inner div,
.cl_ctpl_inner ul,
.cl_ctpl_inner ul li,
.cl_ctpl_inner table,
.cl_ctpl_inner table tr,
.cl_ctpl_inner table tr td,
.cl_ctpl_inner table tr th,
.cl_ctpl_inner span,
.cl_ctpl_inner strong,
.cl_ctpl_inner p{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;}

/*BEMANIロゴ*/
#id_bnr_bemani_pc{
position:absolute;
top:10px;
right:0;}
#id_bnr_bemani_sp{display:none;}
@media screen and (max-width:980px){
#id_bnr_bemani_pc{display:none;}
#id_bnr_bemani_sp{display:block; padding:0 0 20px 10px;}}

/*背景用CSS*/
@media screen and (min-width:981px){
#id_ctpl_body{
background-repeat:no-repeat,no-repeat,no-repeat,repeat !important;
background-image:url(../img/common/bg_flare_pc.png),url(../img/common/bg_top_pc.png),url(../img/common/bg_bottom_pc.png),url(../img/common/bg.jpg) !important;
background-position:center 500px,top,bottom,left !important;}}
@media screen and (max-width:980px){
#id_ctpl_body{
background-repeat:no-repeat,no-repeat,repeat !important;
background-image:url(../img/common/bg_flare_pc.png),url(../img/common/bg_bottom_pc.png),url(../img/common/bg.jpg) !important;
background-position:center 500px,bottom,left !important;}}
@media screen and (max-width:700px){
#id_ctpl_body{
background-repeat:no-repeat,no-repeat,repeat !important;
background-image:url(../img/common/bg_flare_pc.png),url(../img/common/bg_bottom_sp.png),url(../img/common/bg.jpg) !important;
background-position:center 500px,bottom,left !important;}}

/*共通タイトル用CSS*/
.page-title{
display:block;
width:97%;
height:34px;
background-image:url("../img/title/head_title_icon.png");
background-size: 23px;
background-repeat:no-repeat;
background-position:left bottom;
text-align:left !important;
border-bottom:2px solid #1c1b21;
margin:14px auto !important;}
.page-title img{/*width:100%; max-width:180px;*/height:20px; margin-top:7px; margin-left:35px;}
.page-welcome img,
.page-howto img{/*width:100% !important; max-width:347px !important;*/}

.cl_common_bloc_inner{padding-top:10px; margin-bottom:50px;}

@media screen and (max-width:980px){
.page-title{width:100%; background-color:#dcdade;}}

@media screen and (max-width:700px){
.page-title{height:30px; background-size:23px;}
.page-welcome{height:32px !important;}
.page-title img{/*max-width:130px;*/height:20px; margin-left:20px; margin-top: 5px;}
.page-welcome img,
.page-howto img{/*width:100%*/ !important; max-width:290px !important;}}

/*セレクトフォーム*/
.cl_ctpl_inner select{
min-height:30px;
-webkit-appearance:none !important;
-moz-appearance:none !important;
appearance:none !important;
background-image:url(../img/common/select.png);
background-size:20px;
background-repeat:no-repeat;
background-position:right 5px center;
background-color:#fff;
border:1px solid #000;
font-size:15px;
letter-spacing:2px;
padding:0 5px;}
.cl_ctpl_inner select::-ms-expand{display:none;}

@media screen and (max-width:800px){
.cl_ctpl_inner select{font-size:12px !important; background-size:15px;}}

/*ボタン*/
.cl_btn_back,
.cl_btn_post{
display:block;
width:30%;
max-width:200px;
color:#fff;
font-size:13px;
text-align:center;
border-radius:4px;
margin:20px auto;}
.cl_btn_back a,
.cl_btn_post a{display:block; color:#fff !important; padding:10px; text-decoration:none !important; border-radius:4px;}

/*ボタン TOPに戻る*/
.cl_btn_back{background-color:#1c1b21;}
.cl_btn_back a:hover{cursor:pointer; background-color:#b51ab5;}
.cl_btn_back br{display:none;}

/*ボタン 動画投稿サイトへ*/
.cl_btn_post{background-color:#f00; margin-bottom:0;}
.cl_btn_post a:hover{background-color:#ff4b4b;}
@media screen and (max-width:800px){
.cl_btn_back,.cl_btn_post{width:80%; font-size:14px;}}
@media screen and (max-width:640px){
.cl_btn_back br{display:block;}}

/*ボックス調整*/
.box-adjust{width:97%; margin:0 auto;}
@media screen and (max-width:980px){.box-adjust{width:100%;}}
@media screen and (max-width:640px){.box-adjust{}}