@charset "utf-8";
/* CSS Document */

/*
＜管理している部分＞

⓪期間イベント告知スペース
①ニュースティッカー
②機種情報サイトバナー
③ピックアップバナー
④注意喚起
⑤パチスロ・ぱちんこファン向けバナー
⑥ぱちんこ・パチスロは適度に楽しむ遊びですテキスト
⑦上下グラデーション
⑧パチンコ・パチスロ産業21世紀会決議内容の遵守について
⑨403.404.500.501メンテナンス
==========================================================================
*/

/*
==========================================================================
⓪期間イベント告知スペース
==========================================================================
*/
#event, #event1, #event2, #event3, #event4, #event5, #event6, #event7, #event8, #event9{
	width:100%;
	height:auto;
	position:relative;
	padding:0;
	margin:0 auto;
}
.top_event{
	width:98%;
	height:auto;
	position:relative;
	padding:10px 0 0 0;
	margin:0 auto 0px auto;
	cursor: pointer;
}
@media only screen and (max-width: 640px) {.top_event{width:96%;}}
.top_banner01{
	width:96%;
	height:auto;
	position:relative;
	padding:10px 0 0 0;
	margin:0 auto 0px auto;
	cursor: pointer;
}
@media only screen and (min-width: 801px) {.top_event, .top_banner01{max-width:980px; /*max-height:80px;*/}}
@media only screen and (max-width: 800px) {.top_event, .top_banner01{min-width:240px;}}
.top_event img, .top_banner01 img{
	width:100%;
	height:auto;
	padding:0;
	margin:0;
	vertical-align: bottom;
}
.top_banner01 img{border: solid 1px #999;}
.event_textarea{
	width:calc(100% - 30px);
	height:auto;
	padding:10px;
	margin:10px auto 0 auto;
	vertical-align: bottom;
	background-color: rgba(104,116,124,1.00);
	border-radius: 6px;
	font-size: 12px;
	font-weight: bold;
color: rgba(225,225,225,1.00);
}

/*
==========================================================================
    新着情報＆設置店検索エリア全体
==========================================================================
*/
#News_Search{width:69%; margin:0;}
@media only screen and (max-width: 980px) {#News_Search{width:100%; max-width: 980px; margin-top: 20px;}}



/*
==========================================================================
②機種情報サイトバナー
==========================================================================
*/
.title_box {
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
	margin:0px;
	float:left;
}
.title_box div{
	width:220px;
	height:77px;
	padding:25px 5px 5px 5px;
	background:#FFFFFF;
	position:absolute;
	top:0;
	left:0;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	vertical-align:bottom;
	color:#333333;
	z-index:100;
	display:inline;
}
.title_box span{
	color:#CC0000;
}
/*マウスオン・テキスト表示時のリンクエリア*/
.title_box .popup_link{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:9999;
	/*background-color:#00CC99;*/
	background-image:url(../../img/index/pickup/space.gif);
}

@media only screen and (max-width: 979px) {
.title_box div{
	display:none;
}
}

@media only screen and (max-width: 800px) {
.title_box div{ display: none;}
}



/*
==========================================================================
③ピックアップバナー
==========================================================================
*/
section.pickup_banner{
	width:30%;
	position:relative;
	overflow:hidden;
	margin:0;
	padding: 0;
}
@media only screen and (max-width: 980px) {section.pickup_banner{width:calc(100% - 10px); margin:0px auto;}}
@media only screen and (max-width: 640px) {section.pickup_banner{width:calc(100% - 10px); margin:0px auto;}}

section.pickup_banner .container{
	width:100%;
	height: 100%;
	margin:0px;
	padding: 0;
	display: flex;
	align-items: center;
    flex-wrap: wrap;
    align-content: space-around;
}
@media only screen and (max-width: 980px) {section.pickup_banner .container{justify-content: space-around; margin:0 0 0px 0;}}
@media only screen and (max-width: 640px) {section.pickup_banner .container{width:calc(100% - 0px); justify-content: space-between; margin:0 auto 10px auto;}}

section.pickup_banner .container .post_01,
section.pickup_banner .container .post_02{
	width:calc(100% - 2px);
	 height:60px;
	margin:5px 0;
	padding: 0;
	line-height: 0;
	border: solid 1px rgba(120,120,120,1.00);
	background-color: rgba(255,110,227,1.00);
}
@media only screen and (max-width: 980px) {
	section.pickup_banner .container .post_01{width:calc((100% / 3) - 12px); height:8vw; margin: 0;}
	section.pickup_banner .container .post_02{width:calc((100% / 3) - 12px); height:8vw; margin: 0;}
}
@media only screen and (min-width: 421px)  and (max-width: 640px) {
	section.pickup_banner .container .post_01{width:calc(((100% / 3) - 2px) - 2vw); height:14vw; margin:1vw 1vw;}
	section.pickup_banner .container .post_02{width:16vw; height:16vw; margin: 0;}
}
@media only screen and (max-width: 420px) {
	section.pickup_banner .container .post_01{width:calc(((100% / 2) - 2px) - 2vw); height:14vw; margin:1vw 1vw;}
	section.pickup_banner .container .post_02{width:16vw; height:16vw; margin: 0;}
}

.post_01.bg_xp, .post_02.bg_xp {background: url("../../img/index/pickup/bn_x_link.jpg");}
.post_01.bg_yt, .post_02.bg_yt {background: url("../../img/index/pickup/bn_youtube.jpg");}
.post_01.bg_mo, .post_02.bg_mo {background: url("../../img/index/pickup/bn_magiotsu.jpg");}

@media only screen and (max-width: 640px) {
.post_02.bg_xp {background: url("../../img/index/pickup/bn_sp_x_link.jpg");}
.post_02.bg_yt {background: url("../../img/index/pickup/bn_sp_youtube.jpg");}
.post_02.bg_mo {background: url("../../img/index/pickup/bn_sp_magiotsu.jpg");}
}

.post_01.bg_xp, .post_01.bg_yt, .post_01.bg_mo,
.post_02.bg_xp, .post_02.bg_yt, .post_02.bg_mo{
	background-repeat: no-repeat;
	background-position: left center;
	background-size:120%;
	display: flex; 
	align-items: center;
    justify-content: flex-end;
}
@media only screen and (max-width: 980px) {
.post_01.bg_xp, .post_01.bg_yt, .post_01.bg_mo,
.post_02.bg_xp, .post_02.bg_yt, .post_02.bg_mo{
	background-repeat: no-repeat;
	background-position: left center;
	background-size:160%;
	display: flex; 
	align-items: center;
    justify-content: flex-end;
}
}
@media only screen and (max-width: 640px) {
.post_01.bg_xp, .post_01.bg_yt, .post_01.bg_mo,
.post_02.bg_xp, .post_02.bg_yt, .post_02.bg_mo{
	background-repeat: no-repeat;
	background-position: left center;
	background-size:220%;
	display: flex; 
	align-items: center;
    justify-content: flex-end;
}
}


.post_01 .icon_sns.xp, .post_02 .icon_sns.xp {background: url("../../img/index/pickup/icon_xp.png");}
.post_01 .icon_sns.yt, .post_02.icon_sns.yt {background: url("../../img/index/pickup/icon_yt.png");}
.post_01 .icon_sns.mo, .post_02 .icon_sns.mo {background: url("../../img/index/pickup/icon_mo.png");}
.post_01 .icon_sns.xp, .post_01 .icon_sns.yt, .post_01 .icon_sns.mo,
.post_02 .icon_sns.xp, .post_02 .icon_sns.yt, .post_02 .icon_sns.mo{
	position: absolute;
	width:24px;
	 height:24px;
	margin: 10px;
	padding: 0;
	line-height: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
@media only screen and (max-width: 640px) {.icon_sns.xp, .icon_sns.yt, .icon_sns.mo{display: none;}}

@media only screen and (max-width: 980px) {.icon_sns.xp, .icon_sns.yt, .icon_sns.mo{width:3vw; height:3vw; margin: 1vw;}}
@media only screen and (max-width: 640px) {.icon_sns.xp, .icon_sns.yt, .icon_sns.mo{width:7vw; height:7vw; margin: 2vw; }}

section.pickup_banner img{width: 100%;}

/*マウスオン・テキスト表示用div*/
.pic_box span.size_x2x1{
	padding:10px;
	width:210px;
	height:90px;
}
.pic_box span.size_x2x2{
	padding:10px;
/*	width:450px;
	height:210px;*/
	width:210px;
	height:210px;
}
.pic_box span.size_x4x1{
	padding:10px;
	width:450px;
	height:90px;
}
.pic_box span.size_x4x2{
	padding:10px;
	width:450px;
	height:210px;
}

/*マウスオン・テキスト表示時のリンクエリア*/
.pic_box .popup_link{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:9999;
	/*background-color:#00CC99;*/
	background-image:url(../../img/index/pickup/space.gif);
}

.fixed-bottom{
	z-index:99999;
	width:100%;
	position:fixed;
	bottom:0px;
}


.gridContainer {
	width: 100%;
	max-width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
	text-align:center;
}

/*ピックアップバナーテキスト*/
.pic_box span { display: block;}

@media only screen and (max-width: 979px) {
.pic_box span{
	display:none;
}
}
@media only screen and (max-width: 800px) {
.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	clear: none;
	float: none;
	margin-left: auto;
	text-align:center;
}
/*ピックアップバナーテキスト*/
.pic_box span { display: none;}
}
@media only screen and (max-width: 480px) {
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	clear: none;
	float: none;
	text-align:center;
}  
}

/*
==========================================================================
④注意喚起
==========================================================================
*/

#user_caution{
	position:relative;
	width:calc(100% - 20px);
	max-width:1200px;
	margin:20px auto;
}
#user_caution a{
	display: block;
	width:calc(100% - 2px);
	margin:0;
	text-align:center;
	border:solid 1px #CC0000;
	padding:10px 0px 6px 0px;
	background-color:#FFEEEE;
	border-radius: 0px;
}
@media only screen and (min-width: 1200px) {#user_caution{width:calc(100% - 0px);}}
#user_caution a:hover{background-color:#FDE1D5;}
#user_caution a span{
	font-weight:bold;
	color:#CC0000;
	font-size:18px;
	text-align:center;
	line-height:22px;
	padding:10px;
}
#user_caution a span br{display:none;}

@media only screen and (max-width: 800px) {
#user_caution{
	width:calc(100% - 20px);
	margin:20px auto;
}
#user_caution a span{
	font-weight:bold;
	color:#CC0000;
	font-size:2.6vw;
	text-align:center;
	line-height:22px;
	padding:10px;}
}

@media only screen and (max-width: 480px) {
#user_caution{width:96%;margin:10px auto; padding:5px 0px;}
#user_caution a span{font-size:4vw; line-height:4vw; padding:0;}
#user_caution a span br{display:block;}
}

/*
==========================================================================
④ＫＩＢＵＮ　ＰＡＣＨＩ－ＰＡＣＨＩ
==========================================================================
*/

#pachi_caution{
	position:relative;
	width:calc(100% - 0px);
	/*max-width: 720px;*/
	margin:0 auto 0px auto;
	text-align:center;
	border:solid 0px #007CCC;
	border-radius: 0px;
	padding:0px;
	/*background-color:#EEFCFF;*/
}

#pachi_caution a.box01{
	display: block ;
	width:calc(100% - 0px);
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	border:solid 0px #666;
}

#pachi_caution .box02{
	display: block ;
	width:calc(100% - 0px);
	margin: 2% 0 0 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	display: flex;
	justify-content: space-between;	
}

#pachi_caution .box02 a{
	display: block ;
	width:calc((100% / 2) - 1.5%);
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	border:solid 0px #666;
}

#pachi_caution a.box01 img, #pachi_caution .box02 a img{
	width:100%;
	margin: 0 !important;
	padding: 0 !important;
}

/*
==========================================================================
④e-SLOT
==========================================================================
*/

#eslot{
	position:relative;
	width:100%;
	max-width:978px;
	margin:30px auto;
	text-align:center;
	border:solid 1px #00003b;
	padding:10px 0px;
	background-color:#020181;
	border-radius:5px;
}
#eslot span{
	font-weight:bold;
	color:#fff;
	font-size:18px;
	text-align:center;
	margin:10px auto 5px auto;
	line-height:22px;
}

@media only screen and (max-width: 800px) {
#eslot{
	width:95%;
	margin:30px auto;
}
#eslot span{
	font-weight:bold;
	color:#fff;
	font-size:18px;
	text-align:center;
	margin:10px auto 5px auto;
	line-height:22px;
}}

@media only screen and (max-width: 540px) {
#eslot{
	width:95%;
	margin:20px auto;
}
#eslot span{
	font-size:12px;
	padding:0;
}}

/*
==========================================================================
⑤パチスロ・ぱちんこファン向けバナー
==========================================================================
*/
.fun_banner_all{
	position:relative;
	width:100%;
	max-width:1200px;
	background-color:#FFF;
	margin:0 auto 20px auto;
	/*border:solid 2px #990014;*/
}
.fun_banner_title{
	width:calc(100% - 0px);
	text-align:center;
	color:#353535;
	font-size:18px;
	font-weight:bold;
	padding:6px 0 3px 0;
	border-bottom:solid 2px #8B9CAD;
	margin:0 auto;
}
@media only screen and (min-width: 981px) and (max-width: 1200px) {
.fun_banner_title{width:calc(100% - 20px);}
}
@media only screen and (max-width: 980px) {
.fun_banner_title{width:calc(100% - 0px);}
}

.fun_banner_inner_01{
	width:100%;
	max-width:1200px;
	margin:0 auto 0px auto;
	padding:0;
	display: flex;
  flex-wrap: wrap;
justify-content: space-between;
}
.fun_banner_inner_01 .fun_banner_01{width:calc((52.5% - 2px) - 0px); margin: 0 0px 0 0px; padding: 0;}
.fun_banner_inner_01 .fun_banner_02{width:calc((47.0% - 2px) - 0px); margin: 0 0px 0 0px; padding: 0;}

@media only screen and (min-width: 801px) and (max-width: 1200px) {
.fun_banner_inner_01{width:calc(100% - 20px);flex-wrap: wrap; margin:0 auto 10px auto;}
.fun_banner_inner_01 .fun_banner_01{width:calc((52.5% - 2px) - 0px); margin: 0 0px 0 0px; padding: 0;}
.fun_banner_inner_01 .fun_banner_02{width:calc((47.0% - 2px) - 0px); margin: 0 0px 0 0px; padding: 0;}
}

@media only screen and (max-width: 800px) {
.fun_banner_inner_01{flex-wrap: wrap; margin:0 auto 10px auto;}
.fun_banner_inner_01 .fun_banner_01{width:calc(100% - 20px); margin: 0 auto; padding: 0;}
.fun_banner_inner_01 .fun_banner_02{width:calc(100% - 20px); margin: 0 auto; padding: 0;}
}
.fun_banner_inner_01  img{
	display: block;
  flex-grow: 1;
  object-fit: cover;
  width:calc(100% - 2px);
  max-height: 200px;
  max-width: 1200px;
  margin:0 0 10px 0;
	padding:0;
  border-radius: 0px;
  border: solid 1px #666;
}


.fun_banner_inner_02{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:0;
	display: flex;
  flex-wrap: wrap;
justify-content: space-between;
}
.fun_banner_inner_02 .fun_banner_01{width:calc(100% - 10px); margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start;}
.fun_banner_inner_02 a {
	display: block;
  max-height: 50px;
  width:auto;
  margin: 5px;
}
.fun_banner_inner_02 a img {
  width:auto;
  max-height: 45px;
  border: solid 1px #666;
}
@media only screen and (max-width: 800px) {
.fun_banner_inner_02 .fun_banner_01{width:calc(100% - 10px); margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;}
.fun_banner_inner_02 a {
	display: block;
  max-height: 8vw;
  width:auto;
  margin: 5px;
}
.fun_banner_inner_02 a img {
  width:auto;
  max-height: 8vw;
  border: solid 1px #666;
}
}
  
.fun_banner_inner{text-align:center; margin-bottom:0px;}

.fun_banner_inner img{margin:1px 3px;}
  
.fun_banner_inner ul{
	margin-right:10px;
}
.fun_banner_inner li{
	float:left;
	margin-right:10px;
	margin-bottom:10px;
}

@media only screen and (max-width: 800px) {
.fun_banner_title{
	width:100%;
	text-align:center;
	color:#353535;
	font-size:18px;
	line-height: 18px;
	font-weight:bold;
	padding-bottom:3px;
	border-bottom:solid 2px #8B9CAD;
	margin:0 auto 0px auto;
}
.fun_banner_all{
	position:relative;
	padding:10px 0 0 0;
	width:100%;
}
.fun_banner_inner{
	width:100%;
	margin:0 auto;
}
.fun_banner_inner img{margin:3px 6px;}
.fun_banner_inner li{
	margin-right:0px;
	text-align:center;
	width:30%;
}
}

@media only screen and (max-width: 540px) {
.fun_banner_title{
	font-size:14px;
}
.fun_banner_inner{
	padding:25px 0;
}

.fun_banner_inner li{
	margin-right:0px;
	text-align:center;
	width:40%;
}
}


/*
==========================================================================
⑦上下グラデーション
==========================================================================
*/
.bg_grd{
	/*margin-top:100px;*/
	width:100%;
	height:200px;
	position:absolute;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #c1d9e4 0%, #ffffff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #c1d9e4 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #c1d9e4 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1d9e4', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    z-index: -1;
}

@media only screen and (max-width: 800px) {
.bg_grd{
	height:120px;
}
}

@media only screen and (max-width: 720px) {
.bg_grd{
	height:200px;
}
}

@media only screen and (max-width: 640px) {
.bg_grd{
	height:200px;
}
}

@media only screen and (max-width: 540px) {
.bg_grd{
	height:200px;
}
}
/*
==========================================================================
⑧パチンコ・パチスロ産業21世紀会決議内容の遵守について　（期間限定情報）
==========================================================================
*/

#attention{
	position:relative;
	width:100%;
	max-width:978px;
	margin:30px auto;
	text-align:center;
	border:solid 1px #237518;
	padding:10px 0px;
	background-color:#fffd31;
}
#attention span{
	font-weight:bold;
	color:#237518;
	font-size:18px;
	text-align:center;
	line-height:22px;
	padding:10px;
}
#attention span br{display:none;}

@media only screen and (max-width: 800px) {
#attention{
	width:95%;
	margin:30px auto;
}
#attention span{
	font-weight:bold;
	color:#237518;
	font-size:18px;
	text-align:center;
	line-height:22px;
	padding:10px;}}

@media only screen and (max-width: 640px) {
#attention span{font-size:15px;}}

@media only screen and (max-width: 540px) {
#attention{
	width:95%;
	margin:20px auto;
}
#attention span{
	font-size:12px;
	padding:0;
}}

@media only screen and (max-width: 480px) {
#attention span br{display:block;}}



.flex-box01{
	width:calc(100% - 20px);
	max-width: 1200px;
	margin: 20px auto 0 auto;
	display: flex;
	    flex-wrap: nowrap;
	    align-items: stretch;
	justify-content: space-between;
}
@media only screen and (max-width: 980px) {
.flex-box01{
	width: 100%;
	margin: 20px auto;
	display: flex;
	    flex-wrap: wrap;
	flex-direction: column-reverse;
}
}

/*
==========================================================================
⑨403.404.500.503メンテナンス
==========================================================================
*/
.maintenance{
	width:calc(100% - 20px);
	max-width: 1200px;
	min-height:calc(100vh - 400px);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media only screen and (max-width: 540px) {
.maintenance{font-size:12px;}
}