/* @override https://itsuka.work/os2308/css.css */

/* @override https://itsuka.work/os2308/css.css */

@charset "UTF-8";
@import "animation.css";
/*アニメーション用cssの読み込み*/


/*表示デバイスごとの指定は一番最後にあります*/
/*ここから初期設定*/

/*ベース部分*/
html,body{
	width: 100%;
	height:100%;
	box-sizing: border-box;
	touch-action: manipulation;
}

/*バウンス効果を無くすための指定です*/
html {
	overflow: hidden;
	background: var(--light-gray);
}

/*バウンス効果を無くすためにposition:fixed〜overflow:auto;までを入れています*/
body {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	-webkit-text-size-adjust: 100%;
	font: 15pt/30pt 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	color: #333;
	background: #333;
}

/* webフォント読み込み */
@font-face {
	font-family: "degi";
	src: url("../font/DSEG7ClassicMini-Regular.woff") format('woff');
}

* {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	box-sizing: border-box;
    min-height: 0vw; /* Safari clamp関数対策 */
}

/*画像でリンクを貼った場合のボーダーを消去*/
a img{
	border-width:0;
	display: block;
}

/*文字関係は「common.css」でブラウザ設定を解除済み。*/
/*リンク*/
a:link {
	color: #333;
	text-decoration: none;
}

a:visited {
}
a:hover {
}

a:active {
}

.img_hover{
 opacity: 1;
 transition: .2s;
}

.img_hover:hover{
 opacity: 0.7;
}



/*見出し*/
/*フォントウェイトが必要な場合は「font-weight: bold」等を設定*/
h1 {
}

h2 {
	margin: 1.5em 0 1em;
	padding: 0.5em;
	font-size: 1em;
	font-weight: bold;
	line-height: 1;
	border: 1px solid var(--border);
}


/*ブロック要素*/
p {
}

/*クリア要素*/
.clr{
clear: both;
}

/*ここまで初期設定*/

:root{
	--light-gray: #f9f9f9;
	--border: #ccc;
}


/* @group 共通指定 */

/* @group aside（右コンテンツ） */

/* ユーザー情報 */

aside {
	float: right;
	width: 20%;
	padding: 0 1.75em 0 0;
	font-size: 0.7em;
	color: #333;
/*	margin: 60px 0;*/
}

aside > div{
	margin-bottom: 1em;
	border: 1px solid var(--border);
	background: var(--light-gray);
}

aside > div img{
	display: block;
	width: 100%;
}
.asidelogo{
	display: block;
	width: 15.5em;
}
.reco-machine img{
	padding: 0 1em 1em;
}

aside h2 {
	margin-top: 0;
	padding: 0.5em 1em 0.75em;
	border: none;
	border-bottom: 1px solid var(--border);
}

.side-user-info h3{
	margin: 0.75em 0 0;
	padding: 0 1em;
	font-weight: bold;
	line-height: 1;
}


.side-user-info h3:before{
	display: table-cell;
	vertical-align: middle;
	float: left;
	content: "▶︎";
	font-size: 0.7em;
	line-height: 1.25;
	margin-right: 0.5em;
}

.side-user-info p{
	padding: 0 1em;
	clear: both;
}


/* ランキング */

.side-ranking{
	border: 1px solid var(--border);
}

.side-ranking h2{
	font-size: 0.95em;
}
.side-ranking ul{
	padding: 0 1em;
	line-height: 1.5em;
}

.side-ranking li{
	border-bottom: 1px dotted #333;
	overflow: hidden;
	padding: 0.5em;
	padding-left: 2em;
}

.side-ranking li:last-child{
	border: none;
}

span.rank1,
span.rank2,
span.rank3,
span.rank4,
span.rank5,
span.rank6,
span.rank7,
span.rank8,
span.rank9,
span.rank10 {
	clear: both;
	display: block;
	margin-left: -2em;
	float: left;
	width: 1.5em;
	height: 1.5em;
	margin-top: 0;
	padding-top: 0.3em;
	color: #fff;
	text-align: center;
	line-height: 1;
	background: #888;
}
span.rank1,
span.rank2,
span.rank3 {
	background: #8c0000;
}




/* @end */

.akidai,
.mandai {
	display: block;
	color: #fff;
	font-weight: bold;
	text-align: center;
	background: url(../images/index/vacant_bg.png) repeat-y center;
	background-size: contain;
	clear: both;
}

.mandai {
	background: url(../images/index/occupied_bg.png) repeat-y center;
	background-size: contain;

}

/* 空台・遊技中(台選択画面）、空台あり・満台（index）の表示を切り換えて片方を非表示する為のクラス*/
.tab_hidden{
 display: none;
}



/* @group レイアウト系 */

/* @group header */

header{
    width: 1200px;
    margin: 0 auto 1em;
    padding: 1em 1em 0;
    overflow: hidden;
}

.site-logo{
	float: left;
  width: 33%;
	padding-top: 0.75em;
	white-space: nowrap;
	line-height: 20px;
}

.site-logo img{
	display: block;
	float: left;
	width: auto;
	height: 2.5em;
	margin: -0.5em 0.75em 0 1em;
}

.site-title{
	float: right;
  font-size: 0.7em;
  padding-right: 50px;
}

.site-logo a{
	color: #fff !important;
	overflow: hidden;
}



header .banner{
	display: block;
	float: left;
	width: 35%;
	align-items: center;
	padding-top: 0.25em;
	margin: 0;
}

header .banner img{
 width: 100%;
}

.header-button {
	float: right;
	margin-top: 0.5em;
}

.header-button li{
	margin-left: 1em;
}

.header-button li a{
	color: #fff;
	font-size: 0.7em;
}

.header-button li.search a{
	display: block;
	padding: 0 1em;
	border: 1px solid var(--border);
	border-radius: 10px;
}

/* header スクロール時に固定 */


/* @end */

/* @group コンテンツ・本文 */

article {
	width: 80%;
	padding: 0 1em;
	float: left;
}

.container{
	width: 100%;
	height: auto;
	min-width: 1200px;
	margin: 0 auto;
	padding-bottom: 1.5em 1.5em 0;
	background: url(../images/index/site_bg.jpg) repeat-y center #000;
	/*background: #333;*/
	color: #fff;
}

main{
	width: 1200px;
	/*height: 100%; */
	margin: 0 auto;
	overflow: hidden;
}

main #contents{
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	color: #fff;
}

main #contents a:link{
	color: #fff;
}

main #contents a:visited{
	color: #fff;
}

.right{
	text-align: right;
}

img.frame{
	display: block;
	margin: 0 auto;
}

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

ul,
ul li{
	list-style: none;
}
/* @end */

/* @group footer */


footer{
	width: 1195px;
	margin: 0 auto;
	padding: 1em;
	text-align: center;
        overflow: hidden;
	border-top: 2px solid #FFF;
}


.footer-wrapper{
	float: right;
}

footer nav .under-nabi{
	display: flex;
	justify-contents: flex-end;
}

footer nav li{
	display: inline;
	font-size: 0.8em;
	margin-right: 0.5em;
}

/* @end */


/* @end */

/* @group トップページへ戻る */

section.return-button {
	position: fixed;
	bottom: 1em;
	width: 1000px;
	margin-left: 100px;
}

section.return-button a{
	display: block;
	text-align: center;
	color: #f00;
	background: url(../images/site_parts/btn-silver.png) no-repeat;
	background-size:cover;
	border-radius: 3em;
	opacity: 0.7;
}

section.return-button a:hover{
	opacity: 1;
}

/* @end */

/* @group モーダル設定 */

/* @group 基本設定 */

/*クローズボタン*/
.modal-window h3{
	margin-top: 0;
}

.modal-window .modal_close,
.design-select-view .modal_close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: block;
	width: 20px;
	height: 20px;
	cursor: pointer;
	background: url(../js/modal/modal-close.png) no-repeat 0 0;
	z-index: 2;
}

/* @end */

/* @group モーダル内のボタン設定*/
.modal-button {
	display: flex;
	font-size: 0.7em;
	justify-content:center;
}

.modal-button input.modal_close{
	position: inherit;
	top: 0;
	right: 0;
	display: block;
	width: inherit;
	height: auto;
	background: none;
	z-index: 3;
	border: none;
}

.modal-button input,
.modal-button a {
	margin-right: 1em;
	padding: 0.5em 1em;
	cursor: pointer;
	color: #777;
	white-space: nowrap;
	border: 2px solid #aaa !important;
	border-radius:7px;
	background: none;
}

.modal-button input:hover{
	background: #cff;
}
.modal-button input:last-child{
	margin-right: 0;
}

/* @end */

/* @group 検索 */
#search.modal-window.header-btn .flex{
	flex-wrap: wrap;
	justify-content:flex-start;
}

#search.modal-window.header-btn div div{
	width: 50%;
}

#search.modal-window.header-btn .search-title{
	padding-top: 0.5em !important;
	margin-bottom: -0.25em;
}

#search.modal-window.header-btn .search-title{
	line-height: 1;
}

#search.modal-window.header-btn label{
	font-size: 0.8em;
}

#search.modal-window.header-btn input.search-btn{
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 0.5em;
	font-size: 1em;
	color: #fff;
	background: #f90;
	border: 1px solid var(--border);
	border-radius: 0.5em;
}


/* @end */

/* @group キーコントロールのモーダル内 */
#keybord.modal-window dl{
	width: 80%;
	margin: 0 auto;
}
#keybord.modal-window dt,
#keybord.modal-window dd{
	margin-top: 0.5em;
}

#keybord.modal-window dt:first-child,
#keybord.modal-window dd:nth-child(2){
	margin-top: 0;
}

#keybord.modal-window dt{
	clear: both;
	float: left;
}

#keybord.modal-window dd{
	float: right;
}

#keybord.modal-window dd:before{
	content: "..........................";
	margin-right: 0.5em;
	line-height: 0em;
	vertical-align: super;
}

#keybord.modal-window dd .key{
	display: inline-block;
	width: 2em;
	text-align: center;
	border: 1px solid #ccc;
	border-radius:10px;
}

/* @end */



/* @end */




/* @end */

/* @group indexのみの設定 */
#index h2{
	margin-bottom: 0;
}

/* @group スライダー */

#index_featured_post {
background:#222;
position:relative;
width:100%;
overflow:hidden;
/*margin-bottom: 2em;*/
}



#main_slider {
width:64.8%;
float:left; }


#main_slider img {
width:100%;
display:block; }


#main_slider img:hover img {
opacity:0.7; }


#main_slider .caption {
margin:0;
background:rgba(0, 0, 0, 0.5);
height:50px;
width:100%;
line-height:50px;
padding:0 20px;
color:#fff;
display:block;
font-size:14px;
position:absolute;
bottom:0px;
left:0px;
z-index:2;
text-decoration:none; }



#sub_slider {
width:35.2%;
float:right;
margin:0;
padding:0; }


#sub_slider .item {
height:84px;
line-height:100%;
margin:0;
padding:0;
border-bottom:1px dotted #555;
cursor:pointer;
-webkit-transition: background-color 300ms ease-in-out;
-moz-transition: background-color 300ms ease-in-out;
-o-transition: background-color 300ms ease-in-out;
-ms-transition: background-color 300ms ease-in-out;
transition: background-color 300ms ease-in-out; }

#sub_slider .item:last-child{
	border: none;
}

#sub_slider .item:hover, #sub_slider .item.slick-current {
background:#444; }


#sub_slider .image {
float:left;
margin:10px 15px 0 10px;
}


#sub_slider .image img {
width:60px;
height:60px;
display:block; }


#sub_slider .info {
float:left;
width:200px;
margin:11px 0 0 0; }


#sub_slider .title {
clear:both;
margin:0;
padding:0;
color:#fff;
font-size:13px;
line-height:170%; }


#sub_slider p {
float:left;
color:#888;
line-height:100%;
font-size:11px;
border-right:1px solid #888;
margin:0 10px 5px 0;
padding:0 10px 0 0; }


#sub_slider p.category {
border:none; }

/* スライドした時にサブ表示が一緒に動かないようにする */
#sub_slider .slick-track {
transform:unset!important;
}



/* @end */


/* @group 遊技台一覧表示 */
.top-machine-list{
	margin-top: 1em;
	flex-wrap: wrap;
	justify-content:flex-start;
}


.top-machine-list li {
	width: calc(100% / 6);
}

.reg-machines {
	margin: 0 0.2em 0.5em;
}



.reg-number {
	display: table-cell;
	vertical-align: middle;
	position: absolute;
	height: 3em;
	margin-left: 5.5em;
	padding-top: 0.75em;
	width: 3em;
	color: #fff;
	font-size: 0.8em;
	text-align: center;
	line-height: 1;
	background: url(../images/index/info-2.png) no-repeat center;
	border-radius: 50%;
	z-index: 5;
}

.reg-number .secchi{
	display: block;
	font-size: 0.7em;
}

.reg-machines img{
	width: 100%;
	margin: 0.25em 0;
	transition: all 0.2s;
}

.reg-machines .hover:hover{
	opacity: 0.7;
}

.reg-machines img:first-child{
	margin-top: 1em;
}

/* @end */

/* @group お知らせ */
.whats-new{
 margin-bottom: 2em;
}

.whats-new li{
	border-bottom: 1px dotted var(--border);

}

.whats-new li:last-child{
	border-bottom: none;
}

.whats-new li a{
	display: block;
	padding: 1em 0;
	font-size: 0.8em;
	line-height: 1.2em;
}

/* @end */


/* 人気機種一覧 */
.popular-list{
	align-items: stretch;
	border: 1px solid var(--border);
	border-top: none;
	line-height: 1.5;
}

.popular-list .most-popular {
	width: 50%;
	padding: 0.5em;
}

.popular-list .most-popular img{
	display: block;
	width: 100%;
	margin-bottom: 0.5em;
}
.popular-list .most-popular p .kadou{
	display: block;
	font-size: 0.8em;
}

.popular-list ul{
	width: 50%;
	line-height: 1;
}

.popular-list ul li{
	clear: both;
	padding: 0.5em 0 0.5em 0.5em;
	border-bottom: 1px solid var(--border);
	border-left: 1px solid var(--border);
	overflow: hidden;
}

.popular-list ul li:last-child{
	border-bottom: none;
}

.popular-list ul li img{
	display: block;
	float: left;
	width: 90px;
	margin-right: 1em;
}

/* @end */

/* @group 遊技台選択ページ */
a.machine-other-site {
	display: block;
	margin: 1em 0 2em 0;
	text-align: center;
	border:1px solid var(--border);
}

h2.machine-page-title {
	margin: 0 0 1em;
	border: none;
	background: #f90;
}



.list-image {
	display: block;
	width: 100%;
}

.play-machine-count {
	margin: 0.75em 0;
	text-align: center;
	color: #fff;
	background: #c00;
}


.list-machine-list{
	margin-top: 0.75em;
	flex-wrap: wrap;
	justify-content:flex-center;
	margin-bottom: 2em;
}

.list-machines {
	padding: 0.5em;
	margin-bottom: 1em;
	background: #000;
}

.list-machines img{
	cursor: pointer;
}

/* 上部ランプ部分 */
.list-machine-number {
	height: 0.8em;
	font-size: 1em;
	line-height: 1;
	background: url(../images/play_machine_list/lamp-2.png) no-repeat center 0;
	background-size: 100%;
}

.list-machine-number .machine-number-display {
	display: block;
	width: 3em;
	margin: 0 auto ;
	padding-top: 0.3em;
	color: #333;
	font-size: 0.5em;
	text-align: center;
}

/* カウンター表示部分 */
.list-counter{
	height: 3.3em;
	margin: 0.25em 0;
	background: url(../images/play_machine_list/data-2.png) no-repeat center 0;
	background-size: contain;
	overflow: hidden;
}

.list-counter div {
	padding: 0.75em 0.3em 0.7em 0;
	color: #fff;
	font-size: 0.75em;
	text-align: right;
	line-height: 1;
}

.list-counter .list-bb{
	float: left;
	width: 48%;
}

.list-counter .list-rb{
	float: right;
	width: 50%;
}

.list-counter .list-games{
	clear: both;
}

/* 当たりグラフ */
.list-machines table{
	width: 100%;
	color: #fff;
	font-size: 2px;
}

/* @group クローム用ハック（10px以下のフォント対応） */

_:lang(x)::-internal-media-controls-overlay-cast-button,
.list-machines table{
	margin-left: -68%;
	font-size: 10px;
	transform: scale(0.43);
}

_:lang(x)::-internal-media-controls-overlay-cast-button,
 .list-machines .bonus-graph {
	position: relative;
	height: 6em;
	margin-top: -2.5em;
	transform-origin: 0,0;
}

/* @end */

/* 実機画像 */
.list-machines img{
	display: block;
	width: 100%;
	height: auto;
	margin-top: 0.25em;
}

.list-machine-list li {
	width: calc(100% / 6);
	margin-bottom: 1em;
	margin: 0 5px;
}

.list-machines .bonus-graph table td,
.list-machines .bonus-graph table tr{
	padding: 0.1em;
	text-align: center;
	line-height: 1;
	border: none;
	background: #333;
}

/* @end */

/* @group 検索結果ページ */

main section ul{
	width: 95%;
	margin: 0 auto 1em;
}

.list-search-result li {
	clear: both;
	padding: 2% ;
	font-size: 0.8em;
	line-height: 2em;
	background: var(--light-gray);
	border: 1px solid var(--border);
	border-top: none;
	overflow: hidden;
}

.list-search-result li:nth-child(1){
	border-top: 1px solid var(--border);
}


img.search-image {
	width: 40%;
	float: left;
	margin-right: 1em;
}

.list-search-result li p{
	float: right;
	width: calc(60% - 1em);
	color: #333;
}

.search-result-title {
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2em;
}

.list-search-result a{
	color: #333;
}

/* @end */




/* @group 遊技台のみの設定（<body>の「class="play-page"」を参照） */
body.play-page{
	font: 15pt/30pt 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	background: #000;
}

.play-page .container{
	height: 100%;
	color: #FFF;
	background: none;
}

.play-page article {
	width: 100%;
	height: 100%;
	float: none;
}

.play-page footer{
	display: none;
}

.user-display {
	padding: 0.3em 0 0;
	font-size: 1em;
	line-height: 1;
	background: url(../images/play-page/user.png) no-repeat 0 0;
	background-size:contain;
	overflow: hidden;
}


section.play-info {
	float: left;
	width: calc(37.5% - 1em);
	margin-right: 1em;
}

.user-display .machine-number{
	display: inline-block;
	float: left;
	margin-left: 3%;
	text-align: center;
}

.user-display .user-name{
	display: inline-block;
	float: left;
	width: 45%;
	margin-left: 0;
	text-align: center;
	color: #000;
}

.user-display .money-count{
	padding-top: 0.1em;
	margin-right: 0.5em;
	color: #000;
	float: right;
	text-align: right;
}


.information-lamp {
	height: auto;
	padding: 0.5em;
	border: 4px solid #f30;
	border-radius:1em
}

.play-page .main{
	height: 100%;
	min-height: 100%;
}
.content_display {
	  display: block;
	  position: fixed;
	  width: 100%;
	  height: 100%;
	  top: 0px;
	  left: 0px;
	  background:rgba(105,105,105,0.7);
		z-index:2000
}

/* @end */

/* @group プレイ画面とお知らせ */

.play-page footer nav{
	display: none;
}

/* @group プレイ動画 */

section.play-machine {
	float: right;
	width: 62.5%;
	height: calc(100% - 20px);
	min-height: 650px;
}

section.play-movie {
}


section.play-machine video{
	width:100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #909;
}


/* @end */

/* @group loading画面 */

.modalOpen_load {
	display: inline-block;
	min-height: 100px;
  width: 60%;
  height: 15%;
  background-color: #808080;
/*	background-color: #f5f5f5*/
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  line-height: 50px;
  text-align: center;
	font-size: 20px;
}

/* @end */

/* @group  ボタン制御　*/

#change-botton{
	display: block;
}

#not-change-botton, #not-auto-botton, #not-exit-botton{
	display: none;
	width: 100%;
	padding: 1.5em;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	background: url(../images/play-page/btn-s-l.png) no-repeat;
	background-size:100% 100%;
	background-position: center;
	cursor: pointer;
}

#botton-777{
	display: block;
}

#not-777-botton{
	display: none;
}

/* @end */

/* @group 呼び出しボタン */

.call-button a{
	display: block;
	width: 70px;
	height: 70px;
	margin: 10px 0 0 10px;
	padding: 25px 0;
	color: #000 !important;
	font-size: 1em;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	background: url(../images/play-page/call_button.png) no-repeat center;
	background-size: contain;
	z-index: 5;
	cursor: pointer;
}

.call-button .hidden{
 display: none;
}

.call-button a:hover{
	opacity: 0.7;
}

/* @end */



/* @group チェンジコインモーダル　*/

.change-coin-md1{

}

.change-coin-tx{
	text-align:center;
}

.change-coin-md2{
	text-align:center;
	margin-top:50px;/*上*/
	margin-bottom:50px;/*下*/
}

.change-coin-md2 input:first-of-type{
	width: 30%;
  padding: 5px;
	border-radius: 10px;
	margin-right:auto;/*右*/
}

.change-coin-md2 input:nth-of-type(2){
	width: 30%;
	padding: 5px;
	border-radius: 10px;
}
/* @end */


/* @group 実機アンダーパネル */


.under-panel{
	float: left;
	width: calc(37.5% - 1em);
	margin-top: 0;
	margin-top: -90px;
	z-index: -10;
	position: relative;
	opacity: 0.5;

}




/* @end */



@keyframes flowing {
  100% {
    transform: translateX(-100%);
  }
}



/* @end */

/* @group 操作ボタン */
.option-button li{
	margin-right: 1em;
}

.option-button li img{
	width: 100%;
}

/* @end */

/* @group カウンター */

/* @group 流れるテキスト */

.news-machine{
	width:98%;
	margin-top: 7%;
	margin-left: 1%;
	clear: both;
	overflow: hidden;
}

/*animation.cssに記述あり*/
.news-machine p{
	display: inline-table;
	margin: 0.25em 0 0.75em;
	white-space: nowrap;
}

/* @end */

.information-lamp img{
	display: block;
	width: 100%;
	height: auto;
}

/* データ表示 */
.counter-display{
	width: 100%;
	display: flex;
	font-size: 70%;
	flex-wrap: wrap;
	justify-content:space-between;
}


.counter-display .counter-seg{
	width: 49%;
}

.counter-display .counter-seg table{
	width: 85%;
	float: right;
	margin: 12% 0.15% 0 0;
	border-collapse: collapse;
	font-family: impact;
	font-size: 1.4em;
}

.counter-display table td,
.counter-display table tr{
	padding: 0 4%;
	text-align: right;
	vertical-align: bottom;
}

.counter-display .bb{
	background: url(../images/play-page/bb.png) no-repeat center;
	background-size:contain;
}

.counter-display .rb{
	background: url(../images/play-page/rb.png) no-repeat center;
	background-size:contain;
}


.counter-display .av{
	background: url(../images/play-page/bill_counter.png) no-repeat center;
	background-size:contain;
	font-size: 1.4em;
	padding-top: 0.2em;
	line-height: 1;

}

.counter-display .game{
	background: url(../images/play-page/game.png) no-repeat center;
	background-size:contain;
	font-size: 0.8em !important;
}

/* 追加調整　2023/10/09 */
.counter-display .game td{
	padding-right: 0.3em;
}


main section.play-machine-info,
main section.play-movie{
	width: 100%;
	color: #fff;
}

.play-page #contents{
	padding: 0 0em 1em;
	height: 100%;
	overflow: inherit;
	margin-top: 0px;
}

/* @group データグラフ */

.information-lamp .bonus-graph table{
	width: 100%;
	margin-top:0.5em;
	font-size: 0.6em;
	text-align: center;
	border-collapse: collapse;
}

.information-lamp .bonus-graph table td,
.information-lamp .bonus-graph table tr{
	padding: 0.1em;
	line-height: 1;
	border: 2px solid #000;
	background: #333;
}

.bonus-dot{
	width: 100%;
	height: 1em;
	background: #0f9;
}

.bonus-graph .bb{
	background: #f00;
}

.bonus-graph .rb{
	color: #000;
	background: #0ff;
}
/* @end */

/* @group イルミネーション */

.illumination{
	margin-bottom: 0.5em;
    background: url(../images/play-page/top_illumi_base.jpg) no-repeat 0 0;
    background-size: cover;
}

/*animation.cssに記述あり*/
.illumination img{
	display: block;
	width: 100%;
	height: auto;
}

.counter{
	height: auto;
	padding: 0;
}

/* @end */

.counter div{
	height: auto;
	background: none;
}

.change-count-user div{
	margin: 0.25em 0;
	overflow: hidden;
}

.change-count-user.counter-window.flex.coins {
	margin: 0.25em;
}

.change-count-user .counter-title{
	font-size: 0.9em !important;
	clear: both;
	white-space: nowrap;
}

/*.change-count-user.counter-window.flex.coins .counter-title{
	font-size: 1em;
}*/

.play-machine-info{
	margin-top: 1em;
	line-height: 1;
	float: left;
	width: 22% !important;
}

.information-lamp .user-name{
	padding: 0;
	float: right;
	text-align: center;
	overflow: hidden;
}


.information-lamp .machine-number{
	padding: 0.5em 0;
	text-align: center;
	background: #FBA21F;
}

.data-option-btn a {
	margin-top: 10px;
	padding: 0.5em;
	color: #000;
	text-align: center;
	background: url(../images/play-page/bg-sillver.jpg) repeat-y center;
	background-size: contain;
	border-radius: 5px;
}


/* @end */

/* @group 下側ボタン類 */

/* @group オート777・キーコントロール・サウンド */

.information-lamp-under{
	width: 100%;
	margin-top: 2%;
	line-height: 1;
	font-size: clamp(0.5em, 0.7em, 1em);
}

div.counter-under {
	overflow: hidden;
}

table.control-buttons {
	float: left;
	width: calc(37.5% - 1em);
	height: 90px;
	margin-top: 2px;
	text-align: center;
	vertical-align: middle;
	background-color: rgba(0,0,0, 0.5);
}

table.control-buttons td,
table.control-buttons tr{
	text-align: center;
	padding: 0;
	border-collapse: separate;
}

table.control-buttons a,
table.control-buttons label{
	display: table;
	vertical-align: middle;
	width: 100%;
	padding: 0;
	color: #000;
	text-align: center;
	text-decoration: none;
}

/* 終了までの時間 */
.time-display{
	width: 23%;
	color: #fff;
}

.time-display .title{
	display: block;
	text-align: left;
	font-size: 0.9em;
}


span.time.seg {
	display: block;
	text-align: right;
	font-size: 1.2em;
	line-height: 1.4;
	font-family: "degi";
}

.data-option-btn a:hover{
	opacity: 0.7;
	transition: 0;
	-erbkit-transition: 0;
}

.key-cont-btn a:hover{
	opacity: 0.7;
	transition: 0;
	-erbkit-transition: 0;
}


/* @end */

.text-color{
 color: #000 !important;
 font-weight: bold;
}

.auto-set {
	width: 14%;
	background: url(../images/play-page/btn_bg_silver.jpg) repeat-y center;
	font-size: 0.7em;
	color: #000;
}

/* @group サウンドボタン */
.sound-key{
	padding: 1 !important;
	width: 19%;
	height: 30px;
	background: url(../images/play-page/btn_bg_silver.jpg) repeat-y center;
}

.sound-key a,
.sound-key a:visited{
	display: block;
	height: 40px;
	padding-top: 6px !important;
	font-size: 0.7em;
    border-top: 2px solid #000;
}

.sound-key input[type="checkbox"]{
    display: none;
}

.sound-key input[type="checkbox"] + label.sound-toggle{
    position: relative;
    cursor: pointer;
    display: block;
    height: 40px;
    margin: 0;
    padding: 0;
    transition: .2s;
    -erbkit-transition: .2s;
    background: url(../images/play-page/volume_off.jpg) no-repeat center;
 }

.sound-key input[type="checkbox"]:checked + label.sound-toggle{
	color: #ddd;
    background: url(../images/play-page/volume_on.jpg) no-repeat center;
    transition: .2s;
    -erbkit-transition: .2s;
}

/* ゲーム数字　使わない部分は黒字で隠す */
.blackcolor{
 color: #000 !important;
}

/* @end */

/* @end */

/* @group 退出・オートプレイボタン */

/* @group AUTO/MANUAL切り替え */
td.exit{
	width: 17%;
	font-size: 1em;
	font-weight: bold;
	background: url(../images/play-page/logou_bgt.png) repeat-y center;
}

a.exit,
a.exit:visited {
	padding: 1em 0 !important;
	color: #000 !important;
	font-weight: bold;
}

.auto{
	width: 29%;
	height: 60px;
    background: url(../images/play-page/autoplay_bg.png) repeat-y center;
}

.auto .title{
	display: block;
	margin-top: -1.1em;
	font-size: 1em;
	font-weight: bold;
}

.auto input[type="checkbox"]{
    display: none;
}

.auto input[type="checkbox"] + label.auto-play-toggle{
    position: relative;
    cursor: pointer;
    display: table-cell;
    width: 170px;
    height: 60px;
    transition: .2s;
    -erbkit-transition: .2s;
    background: url(../images/play-page/autoplay_off.png) no-repeat center 35px;
    background-size: ;
}

.auto input[type="checkbox"]:checked + label.auto-play-toggle{
	color: #ff0;
    background: url(../images/play-page/autoplay_on.png) no-repeat center 35px;
     transition: .2s;
    -erbkit-transition: .2s;
}

.auto-play-toggle::after {
/*content: "ON";通常状態の表示・表記*/
/*transition: .2s;
-erbkit-transition: .2s;*/
}

.auto input[type="checkbox"]:checked + label.auto-play-toggle::after{
	/*content: "OFF";展開状態の表示・表記*/
}

/* @end */

/* @end */



/* @end */

/* @group 操作ボタン */
div.btn-wrapper {
	position: relative;
	height: 85px;
	margin: -14px 0 0;
	padding: 0 1em;
	background: url(../images/play-page/lever.jpg) no-repeat center bottom;
	background-size:100%;
	z-index: 3;
}

.machine-button{
	width: 436px;
	margin: 0 0 0 95px;
	padding-top: 20px;
}

/* startレバー */
.start-buttons{
	float: left;
	margin-top: -10px;
}

.start-buttons .bet img{
	width: 3em;
	cursor: pointer;
}
.start-buttons .bet:active img{
	margin: 0.5vw auto 0;
}


/* @group stopボタン */

/* stopボタン */

.stop-button {
	width: 54%;
}

.stop-button li{
	width: 33.33333%;
	background: url(../images/play-page/stop_on.png) no-repeat center;
	background-size: 60%;
	list-style: none;
	cursor: pointer;
}

.stop-button li a{
	display: block;
}

.stop-button li a img{
	display: block;
	width: 60%;
	margin: 0 auto;
}

.stop-button li a:active img{
	opacity: 0;
}

/* @end */

.action-buttons li a{
	cursor: pointer;
}

.auto777:active img,
.chance:active img,
.chance2:active img{
	opacity: 0.7;
}

.chance-buttons {
	display: block;
	position: absolute;
	margin-top: -220px;
	width: 150px;
	margin-left: 60%;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid #fff;
	border-radius: 10px;
}

.chance-buttons a{
	display: block;
	padding: 1em;
	cursor: pointer;
}

.chance-buttons img
{
	width: 100%;
}

/* @group 7setモーダルウィンドウ */
.auto7-item {
	border:none;
}

.auto7-item td{
	width: 30%;
	height: auto;
	border:none;
}

.auto7-item img{
	width: 100%;
	height: auto;
}
/* @end */


/* @end */

.pc{
	display: block;
}

.smp{
	display: none;
}

@media screen and (max-width: 600px) {
/*.pc{
	display: none;
}*/

.smp{
	display: block;
}
main{
	width: 100%;
}

body.play-page{
	height: 100%;
	overflow: hidden;
}


/* @group 共通指定 */

/* @group aside（右コンテンツ） */

aside {
	float: none;
	width: 100%;
	padding: 0 5vw;
	font-size: 0.9em;
}

aside > div{
	margin-bottom:3vw;
}

aside h2 {
	padding: 2vw 3vw;
}

.reco-machine img{
	padding: 0 3vw 3vw;
}

.asidelogo{
	margin: auto;
	width: 30%;
}

/* ユーザー情報 */

.side-user-info h3{
	margin: 2vw 0 0;
	padding: 0 3vw;
	line-height: 1;
}

.side-user-info h3:before{
	margin-right: 1vw;
}

.side-user-info p{
	padding: 0 3vw;
}


/* ランキング */

.side-ranking ul{
	padding: 0 3vw;
}


/* @end */

.akidai,
.mandai {
	margin: 2vw 0;
	padding: 2vw;
	font-size: 5vw;
	line-height: 1em;
}
/*
.mandai {
	background: url(../images/index/occupied_bg.png) repeat-y center;
	background-size: contain;

}
*/

/* @group レイアウト系 */



/* @group header */

header{
	position: sticky;
	top: 0;
	left: 0;
	margin: 0;
	padding:0;
/*	padding: 3vw 5vw;*/
	width: 100%;
	z-index: 10;
}

.header_fixed{
 width: 100%;
 padding: 0.8em 0.5em 0.8em 0.5em;
 margin:0;
 background: #333;
 display: flex;
 justify-content: space-between;
 align-items: center;
}


.header-button ul{
	float: none;
}

.header-button li{
	margin-left: 4vw;
}

.header-button li a{
	font-size: 3vw;
}


.site-logo{
	width: 15vw;
	padding-top: 0;
	white-space: inherit;
}


.site-logo img{
	height:auto;
	width: 118px;
	max-width: : 100%;
	margin: 7px 0 0 4px;
}

header .site-title{
	display:none;
}

header .banner{
	display:none;
}

header .copy{
	/*display: none;*/
}

.header-button {
	margin: 0;
}


/* @end */

/* @group コンテンツ・本文 */

article {
	width: 100%;
	padding: 0 5vw;
	float: none;
}

.container{
	width: 100%;
	min-width: inherit;
	margin: 0 auto;
	padding-bottom: 1.5em 1.5em 0;
}

main #contents{
	width: 100%;
	height: 100%;
	margin: 50px auto 0 auto;
	overflow: hidden;
}

/*machine-listグラフ0329*/
main [id^="graph"] table  {
	width: 100%;
	font-size: 1vw;
	}

.right{
	text-align: right;
}

img.frame{
	display: block;
	margin: 0 auto;
}

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

ul,
li{
	list-style: none;
}
/* @end */

/* @group footer */

footer{
	/*width: 1520px;*/
	width: 100%;
	margin-top: 2vw;
}

.footer-wrapper{
	width: 100%;
	padding: 2vw 2vw 2vw 5vw;
}

footer nav{
	float: right;
}

footer nav li{
	display: inline;
	font-size: 3vw;
white-space: nowrap;
}

/* @end */


/* @end */

/* @group トップページへ戻る */

section.return-button {
	position: fixed;
	bottom: 1em;
	width: 1000px;
	margin-left: 100px;
}

section.return-button a{
	display: block;
	text-align: center;
	color: #f00;
	background: url(../images/site_parts/btn-silver.png) no-repeat;
	background-size:cover;
	border-radius: 3em;
	opacity: 0.7;
}

section.return-button a:hover{
	opacity: 1;
}

/* @end */

/* @group モーダル設定 */

/* @group 基本設定 */

/*クローズボタン*/
.modal-window h3{
	margin-top: 0;
}

.modal-window .modal_close,
.design-select-view .modal_close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: block;
	width: 20px;
	height: 20px;
	cursor: pointer;
	background: url(../js/modal/modal-close.png) no-repeat 0 0;
	z-index: 2;
}

/* @end */

/* @group モーダル内のボタン設定*/
.modal-button {
	display: flex;
	font-size: 0.7em;
	justify-content:center;
}

.modal-button input.modal_close{
	position: inherit;
	top: 0;
	right: 0;
	display: block;
	width: inherit;
	height: auto;
	background: none;
	z-index: 3;
	border: none;
}

.modal-button input,
.modal-button a {
	margin-right: 1em;
	padding: 0.5em 1em;
	cursor: pointer;
	color: #777;
	white-space: nowrap;
	border: 2px solid #aaa !important;
	border-radius:7px;
	background: none;
}

.modal-button input:hover{
	background: #cff;
}
.modal-button input:last-child{
	margin-right: 0;
}

/* @end */

/* @group 検索 */

#search.modal-window.header-btn .flex{
	display: block;
}

#search.modal-window.header-btn div div{
	margin-right: 0;
	width: 100% ;
}

#search.modal-window.header-btn div:first-child .search-title{
	padding-top: 0;
}

#search.modal-window.header-btn .search-title{
	padding-top: 3vw !important;
	font-size: 0.8em;
}

#search.modal-window.header-btn input.search-btn{
	margin: 2vw auto;
	padding: 1vw;
	font-size: 5vw;
	border-radius: 2vw;
}

/* @end */


/* @group キーコントロールのモーダル内 */
#keybord.modal-window dl{
	width: 80%;
	margin: 0 auto;
}
#keybord.modal-window dt,
#keybord.modal-window dd{
	margin-top: 0.5em;
}

#keybord.modal-window dt:first-child,
#keybord.modal-window dd:nth-child(2){
	margin-top: 0;
}

#keybord.modal-window dt{
	clear: both;
	float: left;
}

#keybord.modal-window dd{
	float: right;
}

#keybord.modal-window dd:before{
	content: "..........................";
	margin-right: 0.5em;
	line-height: 0em;
	vertical-align: super;
}

#keybord.modal-window dd .key{
	display: inline-block;
	width: 2em;
	text-align: center;
	border: 1px solid #ccc;
	border-radius:10px;
}

/* @end */



/* @end */


/* @end */



/* @group indexのみの設定 */

/* @group スライダー */

#index_featured_post {
position:inherit;
width:100%;
height:auto;
margin-bottom: 4em;
}

#main_slider {
width:100%;
height:auto;
float:none;
}


#main_slider img {
width:100%;
height:auto;
display:block;
}


#main_slider img:hover img {
opacity:0.7; }


#main_slider .caption {
margin:0;
background:rgba(0, 0, 0, 0.5);
height:2em;
width:100%;
line-height:1em;
padding:2vw;
color:#fff;
display:block;
font-size:3vw;
position:absolute;
bottom:0px;
left:0px;
z-index:2;
text-decoration:none;
}


#sub_slider {
width:100%;
height: 30vw;
float:none;
margin:0;
padding:0;
}

.slick-track {
	display: flex !important;
}


#sub_slider .item {
	width: 25% !important;
	height: auto;
text-align: center;
line-height:1em;
margin:0;
padding:1.5vw;
border: none;
overflow: hidden;
}

#sub_slider .image {
float:none;
margin:0;
}


#sub_slider .image img {
width:100%;
height:auto;
display:block;
}


#sub_slider .info {
float:left;
width:100%;
margin:11px 0 0 0; }


#sub_slider .title {
clear:both;
margin:0;
padding:0;
color:#fff;
font-size:2.5vw;
line-height:1;
}


#sub_slider p {
float:left;
color:#888;
line-height:100%;
font-size:11px;
border-right:1px solid #888;
margin:0 10px 5px 0;
padding:0 10px 0 0; }


#sub_slider p.category {
border:none; }
/* @end */



/* @group お知らせ */

.whats-new li{
}

.whats-new li a{
	display: block;
	padding: 1em 0;
	padding: 3vw 0;
	font-size: 0.8em;
	line-height: 1.2em;
}

/* @end */
/* 人気機種一覧 */
.popular-list{
	display: block;
	font-size: 4vw;
}

.popular-list .most-popular {
	width: 100%;
	padding: 3vw;
	border: 1px solid var(--border);
}

.popular-list .most-popular img{
	display: block;
	width: 100%;
}

.popular-list .most-popular p .kadou{
	display: block;
	font-size: 3vw;
}

.popular-list ul{
	width: 100%;
}

.popular-list ul li{
	clear: both;
	padding: 3vw;
	border-bottom: 1px solid var(--border);
	border-left: none;
	overflow: hidden;
}

.popular-list ul li:last-child{
	border-bottom: 1px solid var(--border);
}

.popular-list ul li img{
	display: block;
	float: left;
	width: 90px;
	margin-right: 1em;
}



/* @group 遊技台一覧表示 */


.top-machine-list{
	display: flex;
	margin-top: 10vw;
}

.top-machine-list li {
	width: 50%;
	padding: 0 2vw 0 0;
	margin-bottom: 10vw;
}

.top-machine-list li:nth-child(2n){
	padding: 0 0 0 2vw;
}
.reg-machines {
	margin: 0 0 7vw;
	padding: 2vw;
	border: 2px solid var(--border);
	border-radius: 2vw;
	background: var(--light-gray);
}



.reg-number {
	height: 15vw;
	width: 15vw;
	margin-top: -5vw;
	margin-left: 25vw;
	padding-top: 3.25vw;
	color: #fff;
	font-size: 5vw;
	border-radius: 50%;
}

.reg-number .secchi{
	display: block;
	font-size: 0.7em;
	line-height: 1.25;
}

.reg-machines img{
	width: 100%;
	margin: 0.25em 0;
}

.reg-machines img:first-child{
	margin-top: 1em;
}

.list-machine-list li {
	width: calc(100% / 6);
	margin-bottom: 1em;
}

.list-search-result a{
	display: block;
	color: #333;
	font-size: 3vw;
}

/* @end */


/* @group 検索結果ページ */

main section ul{
	width: 100%;
	margin: 0 auto 3vw;
	font-size: 3vw;
}

.list-search-result li {
	clear: both;
	padding: 2% ;
	font-size: 4vw;
	line-height: 2em;
}

.list-search-result li:nth-child(1){
	border-top: 1px solid var(--border);
}

img.search-image {
	width: 100%;
	float: none;
	margin-right: 1em;
}

.list-search-result li p{
	float: none;
	width: 100%;
	padding: 3vw 0;
}

.search-result-title {
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2em;
}

/* @end */

/* @group 遊技台選択ページ */

.list-image {
	display: block;
	width: 100%;
}

.play-machine-count {
	margin: 2vw 0;
	text-align: center;
	color: #fff;
	background: #f00;
}

.list-machine-list{
	display: flex;
	margin-top: 0;
}

.list-machine-list li {
	width: 50%;
	padding: 0 2vw 0 0;
	margin: 0;
	margin-bottom: 3vw;
}

.list-machine-list li:nth-child(2n){
	padding: 0 0 0 2vw;
}


.list-machines {
	padding: 0.5em;
	background: #000;
}

/* 上部ランプ部分 */
.list-machine-number {
	height: 5vw;
	font-size: 6.5vw;
	padding-top: 0vw;
	background-position: center bottom ;
	background-size: 100%;
}

.list-machine-number .machine-number-display {
	padding-top: 1vw;
}

/* カウンター表示部分 */
.list-counter{
	height: 19vw;
	margin: 4vw 0 0;
}

.list-counter div {
	padding: 2.5vw 1.5vw 3vw 0;
	font-size: 4.5vw;
}

/* カウンター表示部分 */
/*
.list-counter{
	height: 44vw;
	margin: 4vw 0 2vw;
}

.list-counter div {
	padding: 5vw 1.5vw 9vw 0;
	font-size: 10vw;
}
*/

.list-counter .list-bb{
	width: 47%;
}

.list-counter .list-games{
	clear: both;
	padding-top: 3vw;
}

/* 当たりグラフ */
.list-machines table{
	width: 100%;
	color: #fff;
	font-size: 2.5vw;
}

/* @group クローム用ハック（10px以下のフォント対応） */

_:lang(x)::-internal-media-controls-overlay-cast-button,
.list-machines table{
	margin-left: 0;
	font-size: 10px;
	transform: scale(1);
}

_:lang(x)::-internal-media-controls-overlay-cast-button,
 .list-machines .bonus-graph {
	position: inherit;
	height: auto;
	margin: 3vw 0;
}

/* @end */

/* 実機画像 */
.list-machines img{
	margin-top: 2vw;
}


/* @end */
/* @group イルミネーション */

.illumination{
	margin-bottom: 2vw;
    background: url(../images/play-page/top_illumi_base_smp.jpg) no-repeat 0 0;
    background-size: cover;
}

.illumination img{
	height: 5px;
}
/* @end */

/* @group 遊技台のみの設定（<body>の「class="play-page"」を参照） */
.play-page .container{
	width: 100%;
	min-width: inherit;
	height: inherit;
	padding: 0;
}


div.user-display {
	padding: 2vw 0 0;
	height: 15vw;
	font-size: 3vw;
	line-height: 1;
	background: url(../images/play-page/user.png) no-repeat 0 0;
	background-size:contain;
	overflow: hidden;
}


section.play-info {
	float: none;
	width: 100%;
	margin-right: 1em;
}

div.user-display .machine-number{
	display: inline-block;
	float: left;
	margin-left: 3%;
	text-align: center;
}

div.user-display .user-name{
	display: inline-block;
	float: left;
	margin-left: 5%;
	width: 13em;
	color: #000;
}

div.user-display .money-count{
	padding-top: clamp(0em, 0.1em, 0.2em);
	margin-right: 0.5em;
	color: #000;
	float: right;
	text-align: right;
}

.information-lamp {
	padding: 0;
	border: none;
	border-radius:0;
}

.play-page .main{
	height: 100%;
	min-height: 100%;
}


/* @end */



/* @group プレイ画面とお知らせ */

.play-page footer nav{
	display: none;
}



/* @group カウンター */

.counter{
	height: auto;
	margin: 0 0 2vw;
	padding: 0;
	overflow: hidden;
}

div.information-lamp img{
	display: none;
}

/* データ表示 */

.counter-display .counter-seg{
	width: 49%;
	height: 13.5vw;
	margin: 0;
}

.counter-display .counter-seg table{
	margin: 7vw 0vw 0 0;
	font-size: 4vw;
}

.counter-display table td.game_td,
.counter-display table tr{
	padding: 0 0.26em 0 0.1em;
	text-align: right;
	line-height: 1;
	vertical-align: bottom;
}

.counter-display table td,
.counter-display table tr{
	padding: 0 0.4em 0;
	text-align: right;
	line-height: 1;
	vertical-align: bottom;
}

.counter-display .av table{
	margin-top: 4.5vw;
}
.counter-display .av td{
	font-size: 6vw !important;
}

/* @group データグラフ */
.counter div{
}

.information-lamp .bonus-graph table{
	width: 100%;
	font-size: 1.5vw;
}

.information-lamp .bonus-graph table td,
.information-lamp .bonus-graph table tr{
	padding: 0.1vw;
	line-height: 1;
	border: 1px solid #000;
	background: #333;
}
/* @end */


/* @end */

/* @group プレイ動画 */

section.play-machine {
	float: none;
	width: 100%;
	height: inherit;
	min-height: inherit;
}

section.play-movie {
}


/*section.play-machine video{
	width:92vw;
	height: 69vw;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #909;
}*/


/* @end */

/* @group 呼び出しボタン */

.call-button a{
	width: 12vw;
	height: 12vw;
	margin: 1vw 0 0 1vw;
	padding: 4.5vw 0;
	font-size: 4vw;
}


/* @end */

/* @group AUTO/MANUAL切り替え */
.exit{
	font-size: 3.5vw;
}

.auto .title{
	display: block;
	margin-top: -1.1em;
	font-size: 3.5vw;
	font-weight: bold;
}

.auto input[type="checkbox"] + label.auto-play-toggle{
    height: inherit;
    transition: .2s;
}

* @group AUTO/MANUAL切り替え */
.exit{
	width: 18%;
	font-size: clamp(1em , 1.5vw, 20px);
	font-weight: bold;
	background: url(../images/play-page/logou_bgt.png) repeat-y center;
}

.auto{
	width: 30%;
	height: 80px;
    background: url(../images/play-page/autoplay_bg.png) repeat-y center;
}

.auto .title{
	display: block;
	margin-top: -1.1em;
	font-size: clamp(1em , 1.5vw, 20px);
	font-weight: bold;
}

.auto input[type="checkbox"]{
    display: none;
}

.auto input[type="checkbox"] + label.auto-play-toggle{
    position: relative;
    cursor: pointer;
    display: table-cell;
    width: 170px;
    height: 80px;
    transition: .2s;
    -erbkit-transition: .2s;
    background: url(../images/play-page/autoplay_off.png) no-repeat center 45px;

}

.auto input[type="checkbox"]:checked + label.auto-play-toggle{
	color: #ff0;
    background: url(../images/play-page/autoplay_on.png) no-repeat center 45px;

     transition: .2s;
    -erbkit-transition: .2s;
}

.auto-play-toggle::after {
/*content: "ON";通常状態の表示・表記*/
/*transition: .2s;
-erbkit-transition: .2s;*/
}

.auto input[type="checkbox"]:checked + label.auto-play-toggle::after{
	/*content: "OFF";展開状態の表示・表記*/
}

/* @end */

/* @end */
/* @group 下側ボタン類 */

/* @group オート777・キーコントロール・サウンド */

table.control-buttons {
	float: none;
	height: 10vh;
	width: 100%;
	margin-top: 1px;
}

table.control-buttons td,
table.control-buttons tr{
	text-align: center;
	padding: 0;
	border-left: 3px solid #000;
}


/* 終了までの時間 */

.time-display{
	width: 24%;
	color: #fff;
}

.time-display .title{
	font-size: 2.5vw;
}

span.time.seg {
	font-size: 5vw;
}

.auto-set {
	font-size: 2.5vw;
}

/* @end */

/* @group サウンドボタン */
.sound-key{
	padding: 1 !important;
	width: 14%;
	height: 35px;
	background: url(../images/play-page/btn_bg_silver.jpg) repeat-y center;
}

.sound-key a{
	display: none !important;
	border: none;
}

.sound-key input[type="checkbox"]{
    display: none;
}

.sound-key input[type="checkbox"] + label.sound-toggle{
    position: relative;
    cursor: pointer;
    display: block;
    height: 40px;
    margin: 0;
    padding: 0;
    transition: .2s;
    -erbkit-transition: .2s;
    background: url(../images/play-page/volume_off.jpg) no-repeat center;
 }

.sound-key input[type="checkbox"]:checked + label.sound-toggle{
	color: #ddd;
    background: url(../images/play-page/volume_on.jpg) no-repeat center;
    transition: .2s;
    -erbkit-transition: .2s;
}

/* @end */

/* @end */



/* @group AUTO/MANUAL切り替え */
.exit{
	font-size: 3.4vw;
}

.auto{
	height: 12vw;
}

.auto .title{
	font-size: 2.5vw;
}


.auto input[type="checkbox"] + label.auto-play-toggle{
    height: inherit;
    transition: .2s;
    background: url(../images/play-page/autoplay_off.png) no-repeat center 6.5vw;
    background-size: 60%;
}

.auto input[type="checkbox"]:checked + label.auto-play-toggle{
    background: url(../images/play-page/autoplay_on.png) no-repeat center 6.5vw;
    background-size: 60%;
}

/* @end */

/* @group 実機アンダーパネル */

.under-panel{
	float: none;
	width: 100%;
	margin-top: 0;
	margin-top: -18vw;
}

/* @group 操作ボタン */
div.btn-wrapper {
	position: inherit;
	height: 16vw;
	min-height: inherit;
	max-height: inherit;
	margin: -2vw 0 ;
	padding: 0;
	background: url(../images/play-page/lever_mobile3.png) no-repeat center top;
	background-size:100%;
}

.machine-button{
	width: 78vw;
	margin: 0 0 0 1.25vw ;
	padding-top: 4vw;
}

.stop-buttons{
	padding-top:0;
}

img.btn-bet{
		width: 12vw;
}

/* startレバー */
.start-buttons{
	margin-top: -2vw;
}

.start-buttons .bet img{
	width: 12vw;
	margin-top: 0vw;
}

.start-buttons .bet:active img{
	margin: 1.7vw auto 0;
}


/* @group stopボタン */

/* stopボタン */

.stop-button {
	width: 54%;
}

.stop-button li{
	background: url(../images/play-page/button_on.png) no-repeat center;
	background-size: 9vw;
}

.stop-button li a img{
	display: block;
	width: 9vw;
	margin: 0 auto;
}

/* @end */

.chance-buttons {
	margin-top: -25vw;
	width: 20vw;
	margin-left: 70vw;
	border-radius: 1vw;
}

.chance-buttons a{
	display: block;
	padding: 3vw;
	cursor: pointer;
}

.chance-buttons img
{
	width: 100%;
}


/* @end */
}

/*プレイ画像用追加CSS*/
.playcontainer{
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding-bottom: 1.5em 1.5em 0;
	background: url(../images/index/site_bg.jpg) repeat-y center #000;
	/*background: #333;*/
	color: #fff;
}

.playcontainer a:visited{
 color:#FFF;
}

.playguide{
 width: 100%;
 height: auto;
 margin: 2em 0;
}

.play-list{
 display: flex;
 justify-content: center;
 font-size: 1.1em;
 text-align: center;
 white-space: nowrap;
}

.play-list li{
 margin: 0 1.2em;
}



.play-list li .btn_layout_playguide_off{
	display: block;
	padding: 0.5em 1em;
	border: 2px solid var(--border);
	border-radius: 10px;
	color: #AAA;
        box-shadow: 0px 3px 1px 0.5px rgba(255, 255, 255, 0.8);
}


.play-list li .btn_layout_playguide_on{
	display: block;
	padding: 0.5em 1em;
	border: 2px solid var(--border);
	border-radius: 10px;
	transition: 0.1s;
        box-shadow: 0px 3px 1px 0.5px rgba(255, 255, 255, 0.8);
}

.play-list li .btn_layout_playguide_on:hover{
        box-shadow: 0 0 rgba(255, 255, 255, 0.8);
	transform: translateY(5px);
}

.list-image{
 margin-bottom: 2em;
}


/* ページ上部に戻るボタン */
#up_move{
 position: fixed;
 bottom: 15%;
 right: 10%;
 z-index: 30;
 transform: translateY(100px);
}

.up_move_layout a{
 font-size: 16px;
 color: #FFF !important;
 border: 1px solid #FFF;
 background-color: #333;
 color: rgba(0,0,0,0.5);
 padding: 10px 14px;
}



@media screen and (max-width: 600px) {
.playguide{
 width: inherit;
 margin: 1em 0;
}

.play-list{
 display: flex;
 justify-content: center;
 font-size: 4vw;
 text-align: center;
}


.play-list li a{
	display: block;
	padding: 0.2em 0.5em;
	border: 2px solid var(--border);
	border-radius: 10px;
}



/* ページ上部に戻るボタン */
#up_move{
 position: fixed;
 bottom: 15%;
 right: 10%;
 z-index: 30;
 transform: translateY(100px);
}

.up_move_layout a{
 font-size: 3vw;
 color: #FFF !important;
 border: 0.5vw solid #FFF;
 background-color: #333;
 padding: 10px 14px;
}

}


/* ---- */
/* ログアウト・データページのボタンレイアウト */
/* ログアウトは文字表示が違うので他とは少し処理が異なるクラスを用意 */
.btn_layout_logout{
 display: flex;
 height: 38px;
 align-items: center;
 justify-content: center;
 border: 1px solid #FFF;
 border-radius: 4px;
 padding: 0 1.1em !important;
 transition: 0.3s;
 box-shadow: 0px 3px 1px 0.5px rgba(255, 255, 255, 0.8);
}

.btn_layout_logout:hover{
 box-shadow: 0 0 rgba(0, 0, 0, 0.4);
 transform: translateY(2px);
}

@media screen and (max-width: 600px) {
.btn_layout_logout{
 border: 1px solid #FFF;
 border-radius: 4px;
 padding: 0 0.5em !important;
 transition: 0.3s;
 box-shadow: 0px 3px 1px 0.5px rgba(255, 255, 255, 0.8);
 }
}


/* TOP・遊び方ボタンのレイアウト */
/*
.btn_layout{
 border: 1px solid #FFF;
 border-radius: 4px;
 padding: 0.4em 2em !important;
 transition: 0.3s;
 box-shadow: 0 3px 1px 0.5px rgba(255,255,255,0.8);
}

.btn_layout:hover{
 box-shadow: 0 0 rgas(0,0,0,0.4);
 transform: translateY(5px);
}
*/
.btn_layout_other{
 display: flex;
 height: 36px;
 align-items: center;
 justify-content: center;
 border: 1px solid #FFF;
 border-radius: 4px;
 padding: 0 1.1em !important;
 transition: 0.3s;
 box-shadow: 0px 3px 1px 0.5px rgba(255, 255, 255, 0.8);
}

.btn_layout_other:hover{
 box-shadow: 0 0 rgba(0, 0, 0, 0.4);
 transform: translateY(2px);
}

/* -------- */
/*機種別の情報ページに飛ぶ用のボタン*/

.btn_layout_machine{
 display: flex;
 height: 50px;
  magrin: 0 auto;
 align-items: center;
 justify-content: center;
 border: 1px solid #FFF;
 border-radius: 4px;
 padding: 0 1.1em !important;
 transition: 0.3s;
 box-shadow: 0px 3px 1px 0.5px rgba(255, 255, 255, 0.8);
}

.btn_layout_machine:hover{
 box-shadow: 0 0 rgba(255, 255, 255, 0.8);
 transform: translateY(5px);
}


@media screen and (max-width: 600px) {
.btn_layout_machine{
 display: flex;
 height: 50px;
 font-size: 5vw;
  magrin: 0 auto;
 align-items: center;
 justify-content: center;
 border: 1px solid #FFF;
 border-radius: 4px;
 padding: 0 1.1em !important;
 transition: 0.3s;
 box-shadow: 0px 3px 1px 0.5px rgba(255, 255, 255, 0.8);
}

.btn_layout_machine:hover{
 box-shadow: 0 0 rgba(255, 255, 255, 0.8);
 transform: translateY(5px);
}


}



/*---------------------------------------------------------------*/
/* ガイドページ用のCSS */
.userguidecontainer{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding-bottom: 1.5em 1.5em 0;
	background: url(../images/index/site_bg.jpg) repeat-y center #000;
	/*background: #333;*/
	color: #fff;
}

main .userguide{
 width: 90%;
 height: auto;
 margin: 0 auto;
}

main .userguide .guide-text{
 width: 90%;
 margin: 0 auto;
}

main .userguide p{
 font-size: 18px;
}

main .userguide .guide-text h3{
 font-weight: bold;
 margin-top: 1em;
}

main .userguide .guide-text .text-list{
 width: 90%;
 margin: 0 auto;
 font-size: 17px;
}



main .noticeguide{
 width: 90%;
 height: inherit;
 margin: 0 auto;
}



@media screen and (max-width: 600px) {
main .userguide{
 width: 90%;
 margin: 0 auto;
 padding-top: 20px;
}


main .noticeguide{
 width: 90%;
 height: auto;
 margin: 0 auto;
 padding-top: 20px;
 padding-bottom: 2em;
}



main .userguide .guide-text{
 width: 90%;
 margin: 0 auto;
}

main .userguide p{
 font-size: 18px;
}

main .userguide .guide-text h3{
 font-weight: bold;
 margin-top: 1em;
}

main .userguide .guide-text .text-list{
 width: 90%;
 margin: 0 auto;
 font-size: 17px;
}

}

/* -------------------------------------- */
/* お知らせページ */
.businesshours-category{
 margin: 3em 0;
}

.businesshours-category .font-layout{
 font-weight: bold;
}

.noticelist li{
	border-bottom: 1px dotted var(--border);
}
.noticelist a:visited{
 color: #FFF;
}
.noticelist-category > img{
	display: block;
	width: 20vw;
	margin: 30px auto;
}

/* 前日の設定変更発表用 */
.settingchange-category .font-layout{
 font-weight: bold;
}

.settingchange-category h4{
 font-size: 0.9em;
 margin: 0.5em 0;
}


/* レスポンシブ用 */
@media screen and (max-width: 600px) {
 .noticelist{
  font-size: 4vw;
 }

 .businesshours-category .font-layout{
  font-size: 4vw;
 }

.settingchange-category .font-layout{
 font-size: 4vw;
}


.settingchange-category h4{
 font-size: 3.5vw;
}

}




/* 設定台ヒント　レイアウト */
/* リンクページ用項目　レイアウト */
.hint-text{
 text-align: center;
 margin: 1.1em auto 2em auto;
}


/* ヒントページリンク用ボタンレイアウト */
.hint_btn_layout{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #FFF;
  font-size: 18px;
  border-radius: 0px;
  width: 80%;
  height: 40px;
  margin: 0 auto;
  font-weight: bold;
  border: 2px solid #333333;
  border-radius: 5px;
  transition: 0.3s;
  box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.7);
  background-color: #f90;
}

.hint_btn_layout:hover{
 box-shadow: 0 0 #333;
 color: #f90 !important;
 background-color: #FFF;
}


@media screen and (max-width: 600px) {
.hint_btn_layout{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #FFF;
  font-size: 4vw;
  border-radius: 0px;
  width: 95%;
  height: 40px;
  margin: 0 auto;
  font-weight: bold;
  border: 2px solid #333333;
  border-radius: 5px;
  transition: 0.3s;
  box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.7);
  background-color: #f90;
}

.hint_btn_layout:hover{
 box-shadow: 0 0 #333;
 color: #f90 !important;
 background-color: #FFF;
}
}

/* ===================== hintpage.html  ======================== */
.userguide-hint{
 width: 90%;
 margin: 0 auto;
}

.hintpage-category{
 margin: 3em 0 0 0;

}

/* 告知機種用レイアウト */
.hintpage-category .text-layout{
 font-size: 1.2em;
 font-weight: bold;
}

.hintpage-category .hint-machinelist{
 margin: 1em 0 1em 0.5em;
}

.hintpage-category .hint-machinelist p{
 font-size: 0.8em;
}

.margin{
 margin-top: 1em;
}

.hintpage-category p a:visited {
 color: #F90 !important;
}

.border{
 margin-left: 0.2em;
 border-bottom: 2px solid #FFF;
 padding: 0.2em 0.2em 0 0.2em;

}

.text-small{
 font-size: 0.8em;
}

/* -----レスポンシブCSS------- */
/* フォントサイズをwidthサイズに調整 */
@media screen and (max-width: 600px) {

.hintpage-category{
 margin: 5em 0 0 0;

}

.hintpage-category h2{
 font-size: 4.7vw;
}

/* 告知機種用レイアウト */
.hintpage-category .text-layout{
 font-size: 4.7vw;
 font-weight: bold;
}

.hintpage-category .hint-machinelist{
 margin: 1em 0 1em 0.5em;
}

.hintpage-category .hint-machinelist p{
 font-size: 4vw;
}

.hintpage-category p{
 font-size: 4.9vw;
}

}
/* -------------------------- */