html, body{
width:100%;
height:100%;
margin: 0;
padding: 0;
}
body
{
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 75%;
	font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'Osaka' ,sans-serif;
	background-color:#33220f;
	height: 100%;
	width: 100%;
	top: 50%;
}
.jam {
	width: 96%;
	text-align: center;
	padding-right: 2%;
	padding-left: 2%;
}
.bo {
	text-align: center;
	width: 300px;
	margin-left: auto;
margin-right: auto;
}

h1 {
	font-size: 12px;
	line-height: 18px;
	color: #fff;
	font-weight: normal;
}

.cen
{
	position: absolute;
	top:  50%;
	left: 50%;
	width:  380px;        /* 横幅 */
	height: 260px;
	text-align: center;
	margin-top: -130px;
	margin-left: -190px;

}

        .scroll-fade{opacity: 0; transition: all 1s;}
        .scroll-up{opacity: 0; transform: translateY(100px); transition: all 6s;}
        .scroll-up.done, .scroll-fade.done{opacity : 1 !important; transform : translate(0, 0) !important;}
        .load-fade {opacity : 0; transition : all 2s;}
        .load-up{opacity: 0; transform: translateY(100px); transition: all 6s;}
        .load-up.done, .load-fade.done{opacity : 1 !important; transform : translate(0, 0) !important;}
@media all and (max-width: 480px) {
h1 {
	font-size: 12px;
	line-height: 16px;
	color: #fff;
	font-weight: normal;
}


#cen
{
	position: absolute;
	top:  50%;
	left: 50%;
	width:  380px;        /* 横幅 */
	height: 260px;
	text-align: center;
	margin-top: -130px;
	margin-left: -190px;

}

        .scroll-fade{opacity: 0; transition: all 1s;}
        .scroll-up{opacity: 0; transform: translateY(100px); transition: all 6s;}
        .scroll-up.done, .scroll-fade.done{opacity : 1 !important; transform : translate(0, 0) !important;}
        .load-fade {opacity : 0; transition : all 2s;}
        .load-up{opacity: 0; transform: translateY(100px); transition: all 6s;}
        .load-up.done, .load-fade.done{opacity : 1 !important; transform : translate(0, 0) !important;}
}