@charset "UTF-8";
@import url("reset.css");

/*突貫工事で流用しまくってるから許せよ＞(・|・)*/

/*////////////////////////////////////////////
配置とめでぃあくえりー的な何か
////////////////////////////////////////////*/

/*640pxより大きいサイズ、推奨は1024px*/
@media screen and (min-width:641px){
html,body{
	background-color: #ccc;
	/*background-image: url(/item/bg-shiroroMp.jpg);
	background-repeat: repeat;
	overflow: hidden;*/
	height: 100%;
}

#wrapper{
	border-left: dotted 3px;
	border-right: dotted 3px;
	margin: 0 auto;
	position: relative;
	max-width: 1024px;
	height: 100%;
	font-size: 0.8em; color:#663333;
    line-height: 150%;
    /*background: #ffffff;
    background-image: url(/item/bg-x20th.jpg);*/
    background-repeat: no-repeat;
	background-origin: content-box;
    background-position: right bottom;
}

#mainContents{
	overflow: auto;
	position: relative;
	min-height: 100%;
	height: 100%;
	z-index: 1;
}

#mainContentsInner{
	padding:  30px 30px 100px 30px;
}

#header{
	background: url(/item/header-x20th.png) no-repeat ;
	height: 60px;
	position: absolute;
		top: 0;
		left: 0;
	z-index: 2;
	width: 480px;
}

#footer{
	/*background-color: #a40035;*/
	position: absolute;
		bottom: 0;
		left: 0;
	z-index: 2;
	width: 100vw;
	height: 50px;
}

#footer div {display: inline;}
#counter { margin-left: 10px;}
}

/*640-768px,タブレット枠？：フッターをいじるだけ*/
@media screen and (max-width:768px) and (min-width:641px){
#footer{
	background: linear-gradient(to top, #FFF, transparent);
		bottom: 0;
		left: 0;
	z-index: 2;
	height: auto;
}
#footer>div {display: block;}
#counter,#sc,#sns  { margin: 0px 10px;}
}

/*-640px：ヘッダフッタ未固定*/
@media screen and (max-width:640px){
html,body{
	background-color: #fff;
	height: 100%;
}

#wrapper{
	margin: 0 auto;
	font-size: 0.8em; color:#663333;
    line-height: 150%;
    /*background-image: url(/item/bg-test-t.jpg);*/
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right bottom;

    min-height: 100vh;
    position: relative;

}

#mainContents{
    position: relative;
              padding-bottom: 180px;
  box-sizing: border-box;
    	z-index: 1;
}

/*#mainContentsInner{
	padding: 10px;
}*/

#header{
	background: url(/item/header-x20th.png) no-repeat #fff ;
	background-size:contain;
	height: 60px;
}

#footer{
	background: linear-gradient(to top, #FFF, transparent);
	position: fixed;
	bottom: 0;
    	width: 100vw;
		height: auto;
    	z-index: 2;
}
#footer div {display: block;}
#counter,#sc,#sns  { margin: 0px 10px;}
}

/*-480px：背景可変*/
@media screen and (max-width:480px){
#wrapper{ background-size:contain; }
}

/*////////////////////////////////////////////
メイン部分のデザインとか何か
////////////////////////////////////////////*/

/*かうんたiframe*/
#count {
  vertical-align:bottom;
}

/*背景差し替え*/
.g0{ background-image: url(/item/bg-test.jpg); background-color: #fff; } /*galley：標準流用*/
.g1{ background-image: url(/item/bg-bemani.jpg); background-color: #fff; } /*BEMANI*/
.g2{ background-image: url(/item/bg-softmax.jpg); background-color: #fff; } /*SOFTMAX*/
.g3{ background-image: url(/item/bg-shoumetsu.jpg); background-color: #fff; } /*Shoumetsu*/
.g4{ background-image: url(/item/bg-x20th.jpg); background-color: #fff; } /*Xepher20th*/

/*パンくず*/
ol.breadcrumb {
  border-bottom: solid 1px #ff8762;
}
ol.breadcrumb li{
  display: inline;
}
ol.breadcrumb li:first-child:before{
  content:"★";
}
ol.breadcrumb li:after{
  content:">";
}
ol.breadcrumb li:last-child:after{
  content:none;
}
ol.breadcrumb li a { color: #ff0066; }
ol.breadcrumb li a:visited { color: #999999 }
ol.breadcrumb li a:active { color: #339933 }
ol.breadcrumb li a:hover { color: #3333cc; font-weight: bold; }

/*メイン部分の*/
h1 { font-size: 1.4em; color: #993366; padding : 1em; }
h2 { font-size: 1em; color: #cc6699; padding-top : 0.5em; }
p {padding-bottom: 1em;}

.a-space { padding: 5px 5px 5px 30px; }
.center { text-align: center; }

.caution { font-weight: bold; color: #ff0000; }
.small { font-size: 0.9em; }
.indent { padding-left: 1em; padding-top: 0.5em;}
.strike {text-decoration: line-through;}

A:link { color: #ff3399; }
A:visited { color: #006699; }
A:active { color: #999999; }
A:hover { color: #ff9933; }


/*About*/
.list ul {list-style-type: none; padding: 0 0 1em 1em;}
.list li:before {content: "■";}
.label { color: #a40035; }


/*Gallery*/
#gfield { width:100%; /*padding-top: 15px;*/}
#gfield h2 { font-size: 1.2em; padding: 0.5em; }
#gfield div { width:90%; margin: 0 auto; }
#gfield img { max-width: 100%; height: auto; padding: 10px 0 10px 0;}
#gfield p { padding: 1em; margin-left: 2em;}

.glist { border-bottom: dotted 3px #666; padding: 10px; max-width: 600px; }
.glist ul { margin-left: 2em; list-style-type: none; padding: 0.5em; }
.glist li:before { content: "★"; }

.gtext { padding: 10px; max-width: 600px; }

.fg1 { color: #2673a9; border-left: solid 5px #2632a9; } /*Original：青紺*/
.fg2 { color: #c73664; border-left: solid 5px #a50035; } /*FanArt：赤えんじ*/
.fg3 { color: #326dce; border-left: solid 5px #115cb1; } /*Xepher：みずいろ*/
.fg4 { color: #e145af; border-left: solid 5px #ce1ba2; } /*2DX：ぴんく*/
.fg5 { color: #37c66d; border-left: solid 5px #12a738; } /*BEMANI：緑*/
.fg6 { color: #fa7046; border-left: solid 5px #f35600; } /*TalesWeaver：オレンジ*/
.fg7 { color: #7b7670; border-left: solid 5px #545454; } /*その他：灰*/
.fg8 { color: #589077; border-left: solid 5px #589077; } /*消滅都市：青灰*/

.gnavi {
  text-align: center; 
  font-size: 1.2em;
  padding: 0.5em;
}