/*コンテイナー*/

#container{
	opacity:0;
}


/*ヘッダー*/

#header{
	background:#000;
	vertical-align:top;
	color:#fff;
}
#in-header{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
}
#in-header h1{
	position:absolute;
	text-indent:-9999px;
	-webkit-background-size:100% auto;
	-moz-background-size:100% auto;
	-ms-background-size:100% auto;
	-o-background-size:100% auto;
	background-size:100% auto;
}
#h-icon{
	position:absolute;
	overflow:hidden;
}
#h-icon li{
	float:left;
}
#h-icon li a,#h-icon li span{
	display:block;
	text-indent:-9999px;
}

/*メインリスト*/

#in-main-list{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
}
#in-main-list:before{
	content:"";
	z-index:9999;
}
.iml-nav{
	color:#fff;
	-webkit-background-size:cover!important;
	-moz-background-size:cover!important;
	-ms-background-size:cover!important;
	-o-background-size:cover!important;
	background-size:cover!important;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}

/*フッター*/

#footer{
	color:#fff;
	text-align:center;
}



@media screen and (min-width: 1025px) {

/*コンテイナー*/

#container{
	display:table;
	height:100%;
	width:100%;
}

/*ヘッダー*/

#header{
	display:table-cell;
	width:245px;
	height:100%;
}
#in-header{
	padding:0 15px;
	height:100%;
}
#in-header h1{
	top:50%;
	left:30px;
	width:193px;
	height:105px;
	background-image:url(../images/logo-studiojandec2.svg);
	background-repeat: no-repeat;
	margin:-53px 0 0;
}
#h-icon{
	bottom:30px;
	left:30px;
	width:184px;
	height:45px;
}
#h-icon li{
	width:45px;
	margin:0 1px 0 0;
	opacity:.15;
}
#h-icon li:hover{
	opacity:1;
}
#h-icon li a,#h-icon li span{
	width:45px;
	height:45px;
}
#h-icon li:nth-of-type(1){
	background:url(../images/icon-facebook.svg);
}
#h-icon li:nth-of-type(2){
	background:url(../images/icon-itunes.svg);
}
#h-icon li:nth-of-type(3){
	background:url(../images/icon-youtube.svg);
}
#h-icon li:nth-of-type(4){
	background:url(../images/icon-share.svg);
}
#h-link{
	position:absolute;
	bottom:146px;
	left:30px;
	font-size:1.2rem;
}
#h-link a{
	color:#fff;
}
#h-copy{
	position:absolute;
	bottom:100px;
	left:30px;
	color:#626262;
	line-height:1.5;
}
#h-copy span,#h-copy a{
	color:#626262;
	text-decoration:underline;
	cursor:pointer;
}

/*メインリスト*/

#main-list{
	overflow:hidden;
}
#main-list{
	display:table-cell;
	vertical-align:top;
	height:100%;
}
#in-main-list{
	padding:0 15px 0 0;
	height:100%;
}
#in-main-list:before{
	position:absolute;
	width:13px;
	top:0;
	left:0;
	height:100%;
	background:url(../images/shadow.png) repeat-y;
}
#iml{
	display:table;
	height:100%;
	width:100%;
}
.iml-nav{
	display:table-cell;
	width:25%;
	height:100%;
	-webkit-transition:all 0.25s linear;
	-moz-transition:all 0.25s linear;
	-ms-transition:all 0.25s linear;
	-o-transition:all 0.25s linear;
	transition:all 0.25s linear;
}
.iml-nav:nth-of-type(1){
	background:url(../images/bg-ml1.jpg) center center no-repeat;
	border-right:1px solid #000;
}
.iml-nav:nth-of-type(2){
	background:url(../images/bg-ml2.jpg) center center no-repeat;
	border-right:1px solid #000;
}
.iml-nav:nth-of-type(3){
	background:url(../images/bg-ml3.jpg) center center no-repeat;
	border-right:1px solid #000;
}
.iml-nav:nth-of-type(4){
	background:url(../images/bg-ml4.jpg) center center no-repeat;
}
.ml-wrapper{
	height:100%;
	width:100%;
	display:table;
}
.ml-in{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.iml-nav h2{
	font-size:4.8rem;
}
.iml-nav p{
	font-size:1.2rem;
	margin:5px 0 0;
}
.iml-content{
	position:absolute;
	top:0;
	left:25%;
	width:75%;
	height:100%;
	background:#fff;
	margin:0 0 0 -4px;
	padding:0 4px 0 0;
}
.in-iml-content{
	position:relative;
	margin:0 11px 0 0;
	height:100%;
}
.close{
	position:absolute;
	top:15px;
	right:0;
	width:64px;
	height:auto;
}
.scroll_box{
    position:absolute;
	overflow:hidden;
    top:7.471264367816092%;
    left:5.76271186440678%;
	width:79.54802259887006%;
	height:85.05747126436782%;
}

/*フッター*/

#footer{
	position:absolute;
	left:50%;
	bottom:28px;
	margin:0 0 0 -107px;
	font-size:1.4rem;
}
#f-link,#f-copy{
	display:none;
}

}
@media screen and (max-width: 1024px) {

/*コンテイナー*/

#container{
}

/*ヘッダー*/

#header{
	height:45px;
	background:#000;
}
#in-header{
}
#in-header h1{
	top:15px;
	left:15px;
	width:120px;
	height:17px;
	background-image:url(../images/logo-studiojandec-s2.svg);
	background-repeat: no-repeat;
}
#h-icon{
	top:15px;
	right:15px;
	width:100px;
	height:15px;
}
#h-icon li{
	width:15px;
	margin:0 0 0 10px;
}
#h-icon li a,#h-icon li span{
	width:15px;
	height:15px;
}
#h-icon li:nth-of-type(1){
	background:url(../images/icon-facebook-s.svg);
}
#h-icon li:nth-of-type(2){
	background:url(../images/icon-itunes-s.svg);
}
#h-icon li:nth-of-type(3){
	background:url(../images/icon-youtube-s.svg);
}
#h-icon li:nth-of-type(4){
	background:url(../images/icon-share-s.svg);
}
#h-link,#h-copy{
	display:none;
}

/*メインリスト*/

#main-list{
}
#in-main-list{
}
#in-main-list:before{
}
#iml{
}
.iml-nav{
	display:table;
	width:100%;
	height:200px;
	border-left:15px solid #000;
	border-right:15px solid #000;
}
.iml-nav:nth-of-type(1){
	background:url(../images/bg-ml1-s.jpg) center center no-repeat;
	border-bottom:1px solid #000;
}
.iml-nav:nth-of-type(2){
	background:url(../images/bg-ml2-s.jpg) center center no-repeat;
	border-bottom:1px solid #000;
}
.iml-nav:nth-of-type(3){
	background:url(../images/bg-ml3-s.jpg) center center no-repeat;
	border-bottom:1px solid #000;
}
.iml-nav:nth-of-type(4){
	background:url(../images/bg-ml4-s.jpg) center center no-repeat;
}
.ml-wrapper{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.iml-nav h2{
	font-size:3.6rem;
}
.iml-nav p{
	font-size:1.2rem;
	margin:5px 0 0;
}
.active{
	overflow-y:hidden;
}
.iml-content{
	display:none;
	overflow:hidden;
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:99999;
	background:#fff;
}
.in-iml-content{
	position:relative;
	height:100%;
	min-height:100%;
}
.iml-content:before,.iml-content:after,.in-iml-content:before,.in-iml-content:after{
	content:"";
    background:#000;
    position:fixed;
    display:block;
    z-index:100000;
}
.iml-content:before{
    height:15px;
    left:0;
    right:0;
    top:0;
}
.iml-content:after{
    width:15px;
    top:0;
    right:0;
    bottom:0;
}
.in-iml-content:before{
    height:15px;
    right:0;
    bottom:0;
    left:0;
}
.in-iml-content:after{
    width:15px;
    top:0;
    bottom:0;
    left:0;
}
.close{
	position:fixed;
	top:15px;
	right:15px;
	width:64px;
	height:auto;
	width:30px;
	height:auto;
}
.scroll_box{
    position:absolute;
	overflow:hidden;
    top:60px;
    left:7.5%;
	width:85%;
	height:85%;
}

/*フッター*/

#footer{
}
#f-catch{
	font-size:1.2rem;
	margin:15px;
	line-height:1.25;
}
#f-link{
	font-size:1.3rem;
}
#f-link a{
	color:#fff;
}
#f-copy{
	color:#626262;
	line-height:1.5;
	margin:0 0 15px;
}
#f-copy a,#f-copy span{
	color:#626262;
	text-decoration:underline;
}

}