@charset "Shift-JIS";

/*e-amusementサイトテンプレート*/
header,footer,
header#id_nav_menu_1{position:relative !important; z-index:9996 !important;}
#wrapper{position:relative !important;}
header#id_nav_menu_1{background-color:#fff;}
#container{background-color:#000;}

/*
================================================================================================================
COMMON
================================================================================================================
*/
*{padding:0; margin:0; border:0;}
*, *:before, *:after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;}

html{width:100%; height:100%;}
body{
min-width:320px !important;
color:#fff;
background-color:#000;
margin:0;
font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", /*"ＭＳ Ｐゴシック","MS PGothic", */sans-serif;
overflow-x:hidden;}
header,footer{z-index:1;}
h1,h2,h3,h4,h5,h6{display:none;}
a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
img{padding:0; margin:0; border:0; vertical-align:bottom;}
ul{margin:0; padding:0; border:0;}
li{list-style:none;}
strong,em,b{font-weight:bold; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}

*:focus{outline:0;}

a img{
-webkit-transition:opacity 0.3s ease;
-moz-transition:opacity 0.3s ease;
transition:opacity 0.3s ease;}

@media screen and (min-width:2048px){
body{width:100%; max-width:2048px; margin:0 auto;}}

/*
================================================================================================================
PAGE COMMON
================================================================================================================
*/
#main{
display:block;
position:relative;
width:100%;
background-color:#000;
background-image:url(../images/common/page/bg_sdvx.png) , url(../images/common/page/bg_grd_left.png) , url(../images/common/page/bg_grd_right.png) , url(../images/common/page/bg_main02.png) , url(../images/common/page/bg_main01.png);
background-repeat:no-repeat , repeat-y , repeat-y , repeat , repeat-x;
background-position:center , left , right , top left , bottom;
padding:80px 0;
margin:0 auto;
z-index:0;}

#main::before,
#main::after{
display:block;
position:absolute;
left:0;
width:100%;
height:33px;
content:"";}
#main::before{
top:0;
background-image:url(../images/common/page/frame_top_left.png) , url(../images/common/page/frame_top_right.png) , url(../images/common/page/frame_top_bar.png) , url(../images/common/page/frame_top_title.png);
background-repeat:no-repeat , no-repeat , repeat-x , no-repeat;
background-position:top left , top right , top center , top center;}
#main::after{
bottom:0;
background-image:url(../images/common/page/frame_btm_left.png) , url(../images/common/page/frame_btm_right.png) , url(../images/common/page/frame_btm_bar.png) , url(../images/common/page/frame_btm_title.png);
background-repeat:no-repeat , no-repeat , repeat-x , no-repeat;
background-position:bottom left , bottom right , bottom center , bottom center;}

@media screen and (max-width:980px){
#main{padding:40px 0;}}

@media screen and (max-width:900px){
#main::before,
#main::after{background-size:auto 20px , auto 20px , auto 20px , auto 20px;}}

@media screen and (max-width:640px){
#main{background-size:auto , 100px auto , 100px auto , auto , auto;}
#main::before{background-position:top left -100px , top right -100px, top center , top center;}
#main::after{background-position:bottom left -100px , bottom right -100px , bottom center , bottom center;}}

@media screen and (max-width:480px){
#main{background-size:80% auto , auto , auto , auto , auto;}}

@media screen and (max-width:360px){
#main::before{background-position:top left -150px , top right -150px, top center , top center;}
#main::after{background-position:bottom left -150px , bottom right -150px , bottom center , bottom center;}}

/*
=========================
フレーム
=========================
*/
#main > #main-inner{
position:relative;
width:calc(96% - 6px);
max-width:1200px;
background-color:rgba(0,62,102,0.6);
background-image:url(../images/common/frame/bar.png) , url(../images/common/frame/bar.png) ,
                 url(../images/common/frame/top_orange.png) , url(../images/common/frame/btm_orange.png) ,
                 url(../images/common/frame/bg02.png);
background-repeat:repeat-y , repeat-y , repeat-x , repeat-x , repeat-x;
background-position:top left -3px , top right -3px , top , bottom , bottom;
border-radius:14px;
padding:20px;
margin:0 auto;}
#main > #main-inner::before,
#main > #main-inner::after{
display:block;
position:absolute;
left:-3px;
width:calc(100% + 6px);
height:62px;
content:"";
z-index:1;}
#main > #main-inner::before{
top:0;
background-image:url(../images/common/frame/top_left.png) , url(../images/common/frame/top_right.png);
background-repeat:no-repeat , no-repeat;
background-position:top left , top right;
border-radius:14px 14px 0 0;}
#main > #main-inner::after{
bottom:0;
background-image:url(../images/common/frame/btm_left.png) , url(../images/common/frame/btm_right.png);
background-repeat:no-repeat , no-repeat;
background-position:bottom left , bottom right;
border-radius:0 0 14px 14px;}
/*#main > #main-inner img{width:100%;}*/

@media screen and (max-width:640px){
#main > #main-inner{padding:20px 10px;}}

/*
=========================
ページ名
=========================
*/
#main > #main-inner > #page-title{
position:relative;
width:calc(100% - 61px);
height:45px;
background-image:url(../images/common/title/bg.png) , url(../images/common/title/bar.png);
background-repeat:no-repeat , repeat-x;
background-position:left , left;
background-size:auto 100% , auto 100%;
color:#fff;
font-size:20px;
font-weight:800;
font-family:'M PLUS Rounded 1c', sans-serif;
line-height:45px;
transform:rotate(0.05deg);
text-shadow:2px 2px 0 rgba(63,46,17,0.5),-2px -2px 0 rgba(63,46,17,0.5),
            2px -2px 0 rgba(63,46,17,0.5),-2px 2px 0 rgba(63,46,17,0.5),
            1px 1px 0 rgba(63,46,17,0.5),-1px -1px 0 rgba(63,46,17,0.5),
            -1px 1px 0 rgba(63,46,17,0.5),1px -1px 0 rgba(63,46,17,0.5),
            0px 0px 0 rgba(63,46,17,0.5);
padding:0 10px;
margin:0 17px 0 44px;}
#main > #main-inner > #page-title::before,
#main > #main-inner > #page-title::after{display:block; position:absolute; height:45px; content:""; background-size:auto 100%;}
#main > #main-inner > #page-title::before{top:0; left:-44px; width:44px; background-image:url(../images/common/title/left.png);}
#main > #main-inner > #page-title::after{top:0; right:-17px; width:17px; background-image:url(../images/common/title/right.png);}

@media screen and (max-width:640px){
#main > #main-inner > #page-title{
width:calc(100% - 40px);
height:30px;
font-size:16px;
line-height:30px;
margin:0 11px 0 29px;}
#main > #main-inner > #page-title::before,#main > #main-inner > #page-title::after{height:30px;}
#main > #main-inner > #page-title::before{left:-29px; width:29px;}
#main > #main-inner > #page-title::after{right:-11px; width:11px;}}

/*
=========================
ページ名 サブタイトル
=========================
*/
#main > #main-inner > #sub-title{
width:calc(100% - 26px);
background-image:url(../images/common/title/sub01.png) , url(../images/common/title/sub02.png) , url(../images/common/title/sub03.png) , url(../images/common/title/sub04.png);
background-repeat:no-repeat , no-repeat , no-repeat , no-repeat;
background-position:top left , top right , bottom right , bottom left;
padding:5px;
margin:10px auto 30px;}
#main > #main-inner > #sub-title p{
width:100%;
color:#fff;
background-color:rgba(251,182,73,0.3);
font-size:16px;
font-weight:500;
font-family:'M PLUS Rounded 1c', sans-serif;
transform:rotate(0.05deg);
border:1px solid #fbb649;
padding:5px 10px;
box-shadow:0 0 8px rgba(251,182,73,0.7);}

@media screen and (max-width:640px){
#main > #main-inner > #sub-title{width:calc(100% - 18px); margin:10px auto;}
#main > #main-inner > #sub-title p{font-size:13px; padding:3px 5px;}}

/*
================================================================================================================
PLAYER NAME
================================================================================================================
*/
#playername{
display:flex;
position:relative;
width:100%;
height:48px;
background-image:url("../images/common/login/bar.png");
background-size:auto 100%;
padding:8px 0;
z-index:2;
align-items:center;
justify-content:center;}
#playername::before,
#playername::after{
display:block;
position:absolute;
width:25px;
height:48px;
content:"";}
#playername::before{top:0; left:-25px; background-image:url("../images/common/login/left.png");}
#playername::after{top:0; right:-25px; background-image:url("../images/common/login/right.png");}

#playername p:first-child img{width:30px; height:30px; border:1px solid #ffdff9;}
#playername p:nth-child(2) img{margin:0 10px;}
#playername p:nth-child(3){
color:#f8d9b5;
font-size:18px;
font-family:'M PLUS Rounded 1c', sans-serif;
transform:rotate(0.05deg);
text-shadow:2px 2px 0 rgba(63,46,17,0.5),-2px -2px 0 rgba(63,46,17,0.5),
            2px -2px 0 rgba(63,46,17,0.5),-2px 2px 0 rgba(63,46,17,0.5),
            1px 1px 0 rgba(63,46,17,0.5),-1px -1px 0 rgba(63,46,17,0.5),
            -1px 1px 0 rgba(63,46,17,0.5),1px -1px 0 rgba(63,46,17,0.5),
            0px 0px 0 rgba(63,46,17,0.5);}

@media screen and (max-width:480px){
#playername{height:40px;}
#playername p:nth-child(2) img{width:120px;}}

/*
================================================================================================================
FOOTER
================================================================================================================
*/
#footer{display:block; position:relative; width:100%; margin:0 auto;}
#footer > .inner{display:flex; width:96%; max-width:980px; padding:30px 0; margin:0 auto; align-items:center;}
#footer ul#copy{width:130px; /*color:#f8d9b5;*/ font-size:12px; font-weight:bold;}
#footer ul#copy li span{display:inline-block; font-family:Arial, Helvetica, serif;}
#footer ul#bnr{display:flex; width:calc(100% - 130px); justify-content:flex-end;}
#footer ul#bnr li{text-align:center; margin:0 5px;}
#footer ul#bnr li img{width:100%; max-width:145px;}
#footer ul#bnr li a{
display:block;
width:100%;
max-width:145px;
background-color:#fff;
margin:0 auto;}
#footer ul#bnr li a:hover img{opacity:0.3;}

@media screen and (max-width:640px){
#footer > .inner{flex-wrap:wrap;}
#footer ul#copy{display:flex; width:100%; justify-content:center;}
#footer ul#copy li{margin:0 10px 10px;}
#footer ul#bnr{width:100%;}}

@media screen and (max-width:480px){
#footer ul#bnr{flex-wrap:wrap;}
#footer ul#bnr li{width:calc(50% - 10px); margin:5px;}
#footer ul#copy{font-size:10px;}
#footer ul#copy li span{font-size:12px !important;}}

/*
================================================================================================================
ERROR
================================================================================================================
*/
#error .main{
position:relative;
width:100%;
max-width:980px;
text-align:center;
margin:100px auto;
z-index:2;}

#error .main strong{font-size:18px; display:block;}
#error .main strong br{display:none;}
#error .main p{font-size:14px; margin:20px auto;}
#error .main span{display:block; font-size:12px;}

@media screen and (max-width:1100px){#error .main{width:90%;}}

@media screen and (max-width:800px){
#error .main strong{line-height:22px;}
#error .main strong br{display:block;}
#error .main p,
#error .main span{text-align:left !important;}}

@media screen and (max-width:370px){
#error .main strong{font-size:15px;}}

/*
================================================================================================================
TOPに戻るボタン
================================================================================================================
*/
#page-top{
position:fixed;
bottom:20px;
right:20px;
width:80px;
height:71px;
z-index:9997;}
#page-top a{
display:block;
width:80px;
height:71px;
background-image:url(../images/common/page/top_off.png);}
#page-top a:hover {background-image:url(../images/common/page/top_on.png);}
/*
@media screen and (max-width:1200px){
#page-top{visibility:hidden;}}*/