@charset "UTF-8";

body {
/*font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;*/
font-size: 16px;
font-family:'Georgia';
background-image:url(../images/base_gray.jpg);
overflow: hidden;
}

#container{
	position:relative;
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	display:block;
	text-align:left;
}

.base_bg{
	style="text-align:center;
	background-image:url(../images/base_bg.jpg);
}

.top_bg{
	position:absolute;/*この指定が大切*/
	style="text-align:center;
	background-image:url(../images/top_bg.png);
	height:130px;
	width:1000px;
}

.logo_small{
	position:absolute;/*この指定が大切*/
	background-image:url(../images/logo_small.gif);
	height:100px;
	width:155px;
	margin-left:750px;
}

.logo_large{
	position:absolute;/*この指定が大切*/
	background-image:url(../images/logo_large.gif);
	height:200px;
	width:400px;
	top:140px;
	left:300px;
}

.menu_bg{
	position:absolute;/*この指定が大切*/
	style="text-align:center;
	background-image:url(../images/menu_bg.png);
	height:150px;
	width:1000px;
}

.stain_top{
	position:absolute;/*この指定が大切*/
	style="text-align:center;
	background-image:url(../images/stain_top.jpg);
	width:1000px;
}




#contents{
	position:absolute;/*この指定が大切*/
	display:block;
}
.box_enter{
	position:absolute;/*この指定が大切*/
	cursor: pointer;
	top:320px;
	left:320px;
	background-image:url(../images/enter_bg.gif);
}
.box_1{
	position:absolute;/*この指定が大切*/
	cursor: pointer;
    width:130px;
    height=:70px;
}
.box_2{
	position:absolute;/*この指定が大切*/
	cursor: pointer;
}
.box_3{
	position:absolute;/*この指定が大切*/
	cursor: pointer;
}
.box_4{
	position:absolute;/*この指定が大切*/
	cursor: pointer;
}
.box_5{
	position:absolute;/*この指定が大切*/
	cursor: pointer;
}
.image{
	position:absolute;/*この指定が大切*/
}
.firstset{
	top:350px;
	left:410px;
}
#movies{
	width:1000px;
}

.footer_credit{
	position:absolute;/*この指定が大切*/
	top:450px;
	left:280px;
}
.footer_credit .logo{
	float:left;
	margin:0px 20px 0px 20px;
}

/*----------スマホ用の記述----------------*/

@media screen and (max-width:480px) {
    /*　画面サイズが480px以下の場合ここの記述が適用される　*/
    
    body {
        font-size: 14px; /* スマートフォン用のフォントサイズ */
    }

    #container{
        width:100%;
    }
    
    .base_bg{
    	background-size: contain;
    }
    
    .logo_small{
        position:absolute;/*この指定が大切*/
        background-image:url(../images/logo_small.gif);
        background-size: contain;/*画像のサイズを変更する*/
        background-repeat: no-repeat;
        height:calc((100*56.25%)/1000);
        width:calc(100%*(155/1000));
        margin-left:calc(100%*(750/1000));
    }

    .logo_large{
        position:absolute;/*この指定が大切*/
        background-image:url(../images/logo_large.gif);
        background-size: contain;/*画像のサイズを変更する*/
        background-repeat: no-repeat;
        height:200px;
        height:calc((200*56.25%)/1000);/*16:9は、100%:56,26%*/
        width:calc(100%*(400/1000));
        top:calc(100%*(140/1000));
        left:calc(100%*(300/1000));
    }
    
    .box_enter{
        position:absolute;/*この指定が大切*/
        cursor: pointer;
        background-size: contain;/*画像のサイズを変更する*/
        background-repeat: no-repeat;
        top:calc(100%*(320/1000));
        left:calc(100%*(320/1000));
        width:calc(100%*(400/1000));
        height:calc((150*56.25%)/1000);/*16:9は、100%:56,26%*/
    }
    
     .box_enter img{
        width:100%;
        height:100%;
        /*width:100%;
        height:100%;/*100%は親要素の100%*/
    }
    
    .box_1{
        width:calc(100%*(130/1000));
        height:calc((70*56.25%)/1000);/*16:9は、100%:56,26%*/
    }
    .box_2{
        width:calc(100%*(130/1000));
        height:calc((70*56.25%)/1000);/*16:9は、100%:56,26%*/
    }
    .box_3{
        width:calc(100%*(200/1000));
        height:calc((70*56.25%)/1000);/*16:9は、100%:56,26%*/
    }
    .box_4{
        width:calc(100%*(200/1000));
        height:calc((70*56.25%)/1000);/*16:9は、100%:56,26%*/
    }
    .box_5{
        width:calc(100%*(170/1000));
        height:calc((70*56.25%)/1000);/*16:9は、100%:56,26%*/
    }
    .image img{
        width:100%;
        height:100%;/*100%は親要素の100%*/
    }
    .firstset{/*box達の初期位置*/
        top:calc(100%*(350/1000));
        left:calc(100%*(410/1000));
    }

}