@media screen and (min-width:1200px){
#content{
overflow-x: hidden;
min-width: 1000px;
min-height: 990px;
width:100%;
height:100%;
z-index: 101;
position: absolute;
}
.box_style{
background:url(http://www.harthnir.com/game08/img/smp_back.jpg);
min-height: 1000px;
}
.box_style2{
background:url(http://www.harthnir.com/game08/img/smp_back.jpg);
min-height: 1300px;
}
.box_style3{
background:url(http://www.harthnir.com/game08/img/smp_back.jpg);
min-height: 2500px;
}
#logo{
z-index: 110;
position: absolute;
top: 10px;
left: 25px;
}

#hatsubai{
z-index: 109;
position: fixed;
-webkit-transform: translate3d(0,0,0);
bottom: 10px;
right: 20px;
}
#omotome{
z-index: 109;
position: fixed;
-webkit-transform: translate3d(0,0,0);
bottom: 10px;
right: 20px;
}
#special_mov_next{
z-index: 107;
float:left;
position: absolute;
bottom: 80px;
left: 40px;
text-align:center;
font-size:16px;
line-height:16px;
margin-bottom:6px;
padding:0;
}
#special_mov_next2{
z-index: 107;
float:left;
position: absolute;
bottom: 70px;
left: 350px;
text-align:center;
font-size:16px;
line-height:16px;
margin-bottom:6px;
padding:0;
}
#special_mov_next img,#special_mov_next2 img{
width:250px;
height:auto;
}
#special_mov,#special_mov2{
display:none;
}
#menu{
z-index: 106;
position: absolute;
top: 380px;
left: 40px;
width:200px;
height:600px;
}
#info{
z-index: 108;
position: fixed;
-webkit-transform: translate3d(0,0,0);
left: 40px;
bottom: 0;
width:600px;
height:100px;
font-size:10px;
color:#fff;
}
#copyright{
z-index: 109;
position: fixed;
-webkit-transform: translate3d(0,0,0);
right: 20px;
bottom: 10px;
width:500px;
height:10px;
font-size:10px;
text-align:right;
color:#fff;
}
/* インデックス */
#point{
z-index: 104;
position: absolute;
bottom: 110px;
right: 5px;
}
/* ストーリー */
#story{
z-index: 104;
position: absolute;
top: 0;
right: 0;
}
/* スタッフ */
#staff{
z-index: 104;
position: absolute;
top: 0;
right: 0;
}
#onsei{
z-index: 105;
position: absolute;
top: 750px;
right: 220px;
}

/* スペシャル */
#special{
z-index: 104;
position: absolute;
top: 0;
right: 0;
}
#special2{
z-index: 104;
position: absolute;
top: 3100px;
right: 0;
margin-bottom:150px;
}
#specialbanner{
z-index: 104;
position: absolute;
top: 240px;
right: 0;
text-align:right;
height:2000px;
width:950px;
color:#fff;
}
#specialbanner div.midashi{
font-size:24px;
color:#fff;
}
#specialbanner div.setsumei{
font-weight:bold;
font-size:12px;
color:#fff;
}
#specialbanner div.text{
font-size:8px;
color:#fff;
}
#special_back{
z-index: 102;
position: absolute;
top: 230px;
right: 0;
height:3100px;
width:auto;
}
#shop1{
z-index: 105;
position: absolute;
top: 3594px;
right: 115px;
}
#shop2{
z-index: 105;
position: absolute;
top: 3594px;
right: 10px;
}

/* スペック */
#spec{
z-index: 104;
position: absolute;
top: 0;
right: 0;
}
/* ショップ */
#shop{
z-index: 104;
position: absolute;
width:650px;
top: 300px;
right: 0;
}
#shop div.midashi{
font-size:48px;
font-weight:bold;
color:#fff;
}
#shop div.setsumei{
font-weight:bold;
font-size:12px;
color:#fff;
}
#footer_contents{
z-index: 107;
position: fixed;
-webkit-transform: translate3d(0,0,0);
bottom: 0px;
left: 0px;
width:100%;
height:110px;
background: url(../img/footer_contents.png) center center repeat;
}

}

/*                       ここから幅狭い                           */
@media screen and (min-width:320px) and (max-width:1199px) {
#content{
overflow-x: hidden;
width:100%;
height:100%;
z-index: 101;
position: absolute;
}
.box_style{
background:url(http://www.harthnir.com/game08/img/smp_back.jpg);
min-height: 1000px;
}
.box_style2{
background:url(http://www.harthnir.com/game08/img/smp_back.jpg);
min-height: 1300px;
}
.box_style3{
background:url(http://www.harthnir.com/game08/img/smp_back.jpg);
min-height: 2500px;
}
img.right{
float:right;
}
#logo{
z-index: 110;
position: absolute;
top: 10px;
left: 25px;
}
#logo img{
width:501px;
height:auto;
}
#hatsubai{
z-index: 109;
position: fixed;
-webkit-transform: translate3d(0,0,0);
bottom: 20px;
right: 20px;
}
#hatsubai img{
width:416px;
height:auto;
}
#omotome{
z-index: 109;
position: fixed;
-webkit-transform: translate3d(0,0,0);
bottom: 20px;
right: 20px;
}
#omotome img{
width:116px;
height:auto;
}

#special_mov_next,#special_mov_next2{
display:none;
}
#special_mov{
z-index: 105;
float:left;
position: absolute;
bottom: 70px;
left: 40px;
text-align:center;
font-size:12px;
line-height:12px;
margin-bottom:6px;
padding:0;
}
#special_mov2{
z-index: 105;
float:left;
position: absolute;
bottom: 70px;
left: 300px;
text-align:center;
font-size:10px;
line-height:14px;
margin-bottom:6px;
padding:0;
}
#special_mov img,#special_mov2 img{
width:200px;
height:auto;
}

#special_mov_next img{
width:390px;
height:auto;
}
#menu{
z-index: 106;
position: absolute;
top: 300px;
left: 40px;
width:120px;
height:600px;
}
#menu a img{
height:30px;
width:auto;
}

#info{
z-index: 108;
position: fixed;
-webkit-transform: translate3d(0,0,0);
left: 40px;
bottom: 0;
width:500px;
height:100px;
font-size:10px;
color:#fff;
}
#copyright{
z-index: 109;
position: fixed;
-webkit-transform: translate3d(0,0,0);
right: 20px;
bottom: 10px;
width:450px;
height:10px;
font-size:10px;
text-align:right;
color:#fff;
}
/* インデックス */
#point{
z-index: 104;
position: absolute;
bottom: 110px;
right: 5px;
}
#point img{
width:535px;
height:auto;
}
/* ストーリー */
#story{
z-index: 104;
position: absolute;
top: 100px;
right: 0;
}
#story img{
width:448px;
height:auto;
}
/* スタッフ */
#staff{
z-index: 104;
position: absolute;
top: 100px;
right: 0;
}
#staff img{
width:672px;
height:auto;
}
#onsei{
z-index: 105;
position: absolute;
top: 700px;
right: 176px;
}
#onsei img{
width:236px;
height:auto;
}

/* スペシャル */
#special{
z-index: 104;
position: absolute;
top: 100px;
right: 0;
}
#special2{
z-index: 104;
position: absolute;
top: 3250px;
right: 0;
height:600px;
margin-bottom:150px;
}
#specialbanner{
z-index: 104;
position: absolute;
top: 272px;
right: 0;
text-align:right;
height:3100px;
width:950px;
font-size:80%;
}
#specialbanner div.midashi{
font-size:22px;
color:#fff;
}
#specialbanner div.setsumei{
font-weight:bold;
font-size:10px;
color:#fff;
}
#specialbanner div.text{
font-size:6px;
color:#fff;
}

#special img,#special2 img{
width:512px;
height:auto;
}
#special_back{
z-index: 102;
position: absolute;
top: 270px;
right: 0;
height:3100px;
width:auto;
}
#shop1{
z-index: 105;
position: absolute;
top: 3444px;
right: 92px;
}
#shop1 img{
width:53px;
height:auto;
}
#shop2{
z-index: 105;
position: absolute;
top: 3444px;
right: 8px;
}
#shop2 img{
width:67px;
height:auto;
}

/* スペック */
#spec{
z-index: 104;
position: absolute;
top: 100px;
right: 0;
}
#spec img{
width:320px;
height:auto;
}

/* ショップ */
#shop{
z-index: 104;
position: absolute;
top: 300px;
right: 0;
}
#shop div.setsumei{
font-weight:bold;
font-size:10px;
color:#fff;
}
#shop div.midashi{
font-size:38px;
font-weight:bold;
color:#fff;
}
#footer_contents{
z-index: 107;
position: fixed;
-webkit-transform: translate3d(0,0,0);
bottom: 0px;
left: 0px;
width:100%;
height:110px;
background: url(../img/footer_contents.png) center center repeat;
}
}






/* みふゆ用 */

#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/loading.gif) center center no-repeat rgba(0,0,0,1);
	z-index: 10000;
}

/* 共用部分 */


#contents-back{
position: absolute;
top: 0px;
left: 0px;
height:100%;
width:auto;
}
#story_back{
z-index: 102;
position: absolute;
top: 0;
right: 0;
height:100%;
width:auto;
min-height:1000px;
}
#sitemap{
z-index: 109;
position: fixed;
-webkit-transform: translate3d(0,0,0);
left: 40px;
bottom: 10px;
width:450px;
height:10px;
font-size:10px;
text-align:left;
color:#fff;
}


#story_back img,#contents-back img, {
min-height: 600px;
min-width: 100%;
width: auto;
height: 100%;
position: absolute;
top: 0;
left: 0;
}






/* old */

#otahime_index{
background: url(../img/toppict1.png)center top no-repeat;
margin:0 auto;
padding:0;
width:1300px;
height: 676px;
position:relative;
}

.box_01{
width:1300px;
margin:0 auto;
position:relative;
}
.box_02{
width:1300px;
height:1360px;
margin:0 auto;
position:relative;
text-align:center;
}
.box_04{
width:1300px;
height:360px;
margin:0 auto;
position:relative;
text-align:left;
}
.box_04 h2{
margin:0;
padding:0;
position: absolute;
top: 50px;
left: 360px;
text-weight:bold;
color:#000;
margin:0;
padding:0;
}

.box_03{
background: url(../img/smpg_spe4.png)center top no-repeat;
width:900px;
height:800px;
margin:0 auto;
position:relative;
}
.box_03 p{
height: 500px;
width: 600px;
z-index: 10;
display: block;
position: absolute;
top: 330px;
left: 300px;
}

#otahime_index .box_01 .visualimg1 {
width:652px;
height:351px;
position:absolute;
z-index: 49;
top:390px;
left:0px;
}

#otahime_index .box_01 .visualimg2{
height: 351px;
width: 652px;
z-index: 50;
position: absolute;
top: 400px;
left: 0px;
}

#main p.img_masterup {
background: url(../img/masterup_s.png) no-repeat 0px 0px;
height: 340px;
width: 340px;
z-index: 50;
display: block;
position: absolute;
top: 30px;
left: 700px;
transform: scale(0.7);
}

#pagetop {
z-index: 9996;
position: fixed;
bottom: 20px;
right: 20px;
width: 200px;
height: 140px;
cursor: pointer;
}

.box_02 p.img_effect1 {
background: url(../img/sprite4.png) no-repeat 0px 0px;
height: 840px;
width: 1300px;
z-index: -10;
display: block;
position: absolute;
top: 580px;
left: 0px;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-webkit-animation-name: flash;
animation-name: flash;
}
@-webkit-keyframes effect1 {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(0.97); }
100% { -webkit-transform: scale(1); }
}
@keyframes effect1 {
0% { transform: scale(1); }
50% { transform: scale(0.97); }
100% { transform: scale(1); }
}

.box_02 p.img_effect2 {
background: url(../img/sprite5.png) no-repeat 0px 0px;
height: 840px;
width: 1300px;
z-index: 55;
display: block;
position: absolute;
top: 0px;
left: 0px;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-webkit-animation-name: flash;
animation-name: flash;
}

#otahime_index .box_01 p.img_price2-2 {
background: url(../img/sprite2-2.png) no-repeat 0px 0px;
height: 130px;
width: 260px;
z-index: 50;
display: block;
position: absolute;
top: 600px;
left: 950px;
}


.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}