@charset "utf-8";

/* ==========================================================================
 sp(767px以下)
========================================================================== */
@media only screen and (max-width: 767px) {
body{
 background-image: none!important;
 background-color:#1a1a1a;
 overflow-x:hidden;
}
#wrap{
 background-image: none!important;
 width:100vw;
 height: 1193px;
 overflow-x:hidden;
}
#header{
 position: relative;
}
}

#diam-area{
 position: absolute;
 top:0;left: 50%;
 background:url("../../image/sp_top_bg.png") no-repeat bottom center;
 width: 600px;
 height: 1193px;
 margin-left: -300px;
}
.thumb{
 position: absolute;
 top:90px;left:0;
 width: 600px;
 height: 1103px;
}
.thumb li{
 display: block;
 overflow: hidden;
 position: absolute;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
.thumb li a{
 display:block;
}
/*top動画*/
#freediam {
 position: absolute;
 display:block;
 overflow: hidden;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
 background-color: #1a1a1a;

 width: 424px;
 height: 424px;
 top:-234px;
 left:163px;
 transition: all 0s!important;

}
#freediam > video {
 position: absolute;
 display: block;
 padding: 0;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);

 height: 400px;
 width: auto;
 top:76px;
 left:-23px;
}
#freediam .screen{
width:430px;
height:430px;
position: absolute;
top:0px;left:0px;
background: rgba(0,0,0,0);
}

/*ひし形（小）*/
.small{
 width: 106px;
 height: 106px;
 transition: all 0s!important;

}
.s-inner{
 display: block;
 position: absolute;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 text-align: center;
 width: 150px;
 height: 150px;
 top: -22px;
 left: -22px;
 position: relative;

}
.s-inner img{
 position: absolute;
 top:0;left:0;
 width: 150px;
 height:150px;
}
/*ひし形（中）*/
.medium{
 width: 106px;
 height: 106px;
 transition: all 0s!important;
}
.m-inner{
 display: block;
 position: absolute;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 text-align: center;

 width: 150px;
 height: 150px;
 top: -22px;
 left: -22px;
}
.m-inner img{
 position: absolute;
 top:0;left:0;

 width: 150px;
 height:auto;
}
/*ひし形（大 動画）*/
.large{
 width: 212px;
 height: 212px;
 transition: all 0s!important;
 background-color: #000!important;
}
.l-inner{
 display: block;
 position: absolute;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 text-align: center;
 background-color: #F00;

 width: 300px;
 height: 300px;
}
.large > video {
 position: absolute;
 display: block;
 padding: 0;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 height: 300px;
 width: auto;
 left:-42px;
 top:-45px;
/*YT*/
/* left:-164px;
 top:-44px;*/
}

/*sp*/
#videos {
 position: absolute;
 display: block;
 padding: 0;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 top:88px;
 left:-30px;
}


#vs1{
 position: absolute;
 display: block;
 padding: 0;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 width: auto;
 left:-132px;
 top:-133px;
 height: 901px;
 width: 901px;

}

#vs2{
 position: absolute;
 display: block;
 padding: 0;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 width: auto;
 left:-132px;
 top:-133px;
 height: 901px;
 width: 901px;
}


.large .screen{
width:212px;
height:212px;
 position: absolute;
 top:0px;left:0px;
 background: rgba(0,0,0,0.3);
}
img.ovimg{
 opacity: 0;
}

/*sp版位置指定*/
/*1列目*/
#sml01{ top:0px; left:22px;}
/*2列目*/
#sml02{ top:75px; left:97px;}
/*3列目*/
#sml03{ top:150px; left:22px;}
#sml04{ top:150px; left:172px;}
#sml05{ top:150px; left:472px;}
/*4列目*/
#sml06{ top:225px; left:97px;}
#sml07{ top:225px; left:247px;}
#sml08{ top:225px; left:397px;}
/*3列目*/
#sml09{ top:300px; left:22px;}
#lrg01{ top:322px; left:119px;}
#sml10{ top:300px; left:322px;}
#sml11{ top:300px; left:472px;}
/*4列目*/
#med01{ top:375px; left:397px;}
/*3列目*/
#sml12{ top:450px; left:22px;}
#sml13{ top:450px; left:322px;}
#sml14{ top:450px; left:472px;}
/*4列目*/
#sml15{ top:525px; left:97px;}
#sml16{ top:525px; left:247px;}
#sml17{ top:525px; left:397px;}
/*3列目*/
#sml18{ top:600px; left:22px;}
#sml19{ top:600px; left:172px;}
#sml20{ top:600px; left:322px;}
#sml21{ top:600px; left:472px;}
/*4列目*/
#med02{ top:675px; left:97px;}
#sml22{ top:675px; left:247px;}
#sml23{ top:675px; left:397px;}
/*3列目*/
#sml24{ top:750px; left:22px;}
#sml25{ top:750px; left:172px;}
#lrg02{ top:772px; left:269px;}
#sml26{ top:750px; left:472px;}
/*4列目*/
#sml27{ top:825px; left:97px;}
/*3列目*/
#sml28{ top:900px; left:22px;}
#sml29{ top:900px; left:172px;}
#sml30{ top:900px; left:472px;}
/*4列目*/
#sml31{ top:975px; left:247px;}
#sml32{ top:975px; left:397px;}

#footer{
 width: 100vw;
 background:url("../../image/sp_top_btm.png") no-repeat top center;
}



/*wsz*/
#scrIcon{
	display: block;
	position: fixed;
	width: 1px;
	height: 1px;
	z-index: 500;
	left: 50%;
	margin-left: -22px;
	bottom: 2px;
	pointer-events: none;
}
#scrIcon>img{
	position: absolute;
	bottom: -70px;
}

#ldMk{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 3000;
}

#overAnmCtnr {
	display: none;
}




/* ==========================================================================
 pc(768px以上)
========================================================================== */
@media only screen and (min-width: 768px) {
body{
 overflow-x:hidden;
 background:#1a1a1a url("../../image/top_bg.png") repeat-x top center;
}
#wrap{
 position: relative;
 min-width: auto;
 height: 2100px;
 z-index: 2!important;
}
#diam-area{
 position: absolute;
 top:0;left: 50%;
 background:url("../../image/top_bg1200.png") no-repeat top center;
 width: 1800px;
 height: 2100px;
 margin-left: -900px;
}
.thumb{
 position: absolute;
 top:195px;left:0;
 width: 1800px;
 height: 1905px;
}

.thumb li{/*pcのみ*/
 transition: all .5s;
 transition:left 0s;
 transition:top 0s;
 background-color: #FFF;
}
/*top動画*/
#freediam {
 width: 848px;
 height: 848px;
 top:-468px;
 left:626px;
 -webkit-backface-visibility:hidden;
backface-visibility:hidden;


}
#freediam > video {
 height: 750px;
 top:209px;
 left:-17px;
}
#freediam .screen{
width:850px;
height:850px;
 top:0px;left:0px;
}

#videos {
 position: absolute;
 display: block;
 padding: 0;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 top:207px;
 left:-88px;
 -webkit-backface-visibility:hidden;
backface-visibility:hidden;
}

iframe{
	 -webkit-backface-visibility:hidden;
backface-visibility:hidden;
}



/*ひし形（小）*/
.small{
 width: 212px;
 height: 212px;
 transition: all 0.3s!important;
/* transition:left 0s!important;
 transition:top 0s!important;*/

}
.s-inner{
 width: 300px;
 height: 300px;
 top: -44px;
 left: -44px;
 position: relative;

}
.s-inner img{
 width:300px;
 height:300px;
 transform: scale(1,1)!important;  
 transition: all 0.4s!important;

/* transition:left,top 0s!important;*/
}
.medium{
 width: 424px;
 height: 424px;
  transition: all 0.3s!important;
  /*transition:left,top 0s!important;*/
}
.m-inner{
 width: 600px;
 height: 600px;
 top: -88px;
 left: -88px;
}
.m-inner img{
 width:600px;
 height:auto;
  transform: scale(1,1)!important;  
 transition: all 0.4s!important;
 /*transition:left,top 0s!important;*/
}
/*ひし形（大 動画）*/
.large{
 width: 636px;
 height: 636px;
}
.l-inner{
 width: 900px;
 height: 900px;
 top: -132px;
 left: -132px;
 color: #fff;
}
.large > video {
 height: 910px;
 width: auto;
 left:-130px;
 top:-138px;

 /*YT*/
/*  left:-491px;
 top:-139px;*/
}
.large .screen{
	width:636px;
	height:636px;
}

/*mouseover*/
.ovr{
	transform: rotate(45deg) scale(1.07,1.07)!important;  
	box-shadow:0px 0px 32px 8px rgba(0,0,0,0.4)!important;
	z-index: 100!important;
	transition: all 0.1s!important;
	transition-timing-function:ease-out;
}
.medium.ovr{
 /*transform: rotate(45deg)!important;*/
 transform: rotate(45deg) scale(1.04,1.04)!important;  
}
.ovr img.ovimg {
 opacity:1;
 transition: all .4s!important;
}

.ovimg{
 opacity:0;
 transition: all .3s!important;
}

.ovr .s-inner img:not(.ovimg) {
 transform: scale(1.1,1.1)!important;  
 transition: all .1s!important;
}
.ovr .m-inner img:not(.ovimg) {
 transform: scale(1.1,1.1)!important;  
 transition: all .1s!important;
}


/*pc版位置指定*/
/*1列目*/
#sml01{ top:0; left:44px;}
#sml02{ top:0; left:344px;}
#sml03{ top:0; left:1544px;}
/*2列目*/
#sml04{ top:150px; left:194px;}
#sml05{ top:150px; left:494px;}
#sml06{ top:150px; left:1394px;}
/*3列目*/
#sml07{ top:300px; left:44px;}
#lrg01{ top:388px; left:132px;/*大*/}
#sml08{ top:300px; left:644px;}
#sml09{ top:300px; left:1244px;}
#sml10{ top:300px; left:1544px;}
/*4列目*/
#sml11{ top:450px; left:794px;}
#med01{ top:494px; left:988px;/*中*/}
#sml12{ top:450px; left:1394px;}
/*5列目*/
#sml13{ top:600px; left:1544px;}
/*6列目*/
#sml14{ top:750px; left:794px;}
#sml15{ top:750px; left:1394px;}
/*7列目*/
#sml16{ top:900px; left:44px;}
#sml17{ top:900px; left:644px;}
#sml18{ top:900px; left:944px;}
#sml19{ top:900px; left:1244px;}
#sml20{ top:900px; left:1544px;}
/*8列目*/
#sml21{ top:1050px; left:194px;}
#med02{ top:1094px; left:388px;/*中*/}
#sml22{ top:1050px; left:794px;}
#lrg02{ top:1138px; left:882px;/*大*/}
#sml23{ top:1050px; left:1394px;}
/*9列目*/
#sml24{ top:1200px; left:44px;}
#sml25{ top:1200px; left:1544px;}
/*10列目*/
#sml26{ top:1350px; left:194px;}
/*11列目*/
#sml27{ top:1500px; left:44px;}
#sml28{ top:1500px; left:344px;}
#sml29{ top:1500px; left:644px;}
#sml30{ top:1500px; left:1544px;}
/*12列目*/
#sml31{ top:1650px; left:794px;}
#sml32{ top:1650px; left:1394px;}

#footer{
 width: 100%;
 min-width: auto;
 position: relative;
 top:0px;
 margin-top:-2px;
 background:url("../../image/top_bg_btm.png") repeat-x top center;
 z-index: 1;
}

/*wsz*/
#vs1{
	width: 1280px;
	height: 720px;
}

#overAnmCtnr {
	display: block;
	position:fixed;
	margin:auto;
	width: 100%;
	left:0;right:0;
	top:0;bottom:0;
	z-index: 10000;
	pointer-events:none;
}

#overAnm{
	width: 100%;
	height: 100%;
	pointer-events:none;
}


/* ======================================================================= */

@media only screen and (min-width: 768px) and (max-width: 1200px) {
body,
#footer{
 background:#1a1a1a url("../../image/top_bg_btm.png") no-repeat top center;
}
#wrap{
 overflow:hidden;
}


}