@charset "UTF-8";
/* CSS Document */

/***
* top.css
*/

@media only print, only screen and (min-width: 18.75em){

#intro #navCollectionSp > a,
#intro #navCollection20SsSp > a{
  text-decoration: underline;
}

#introWrap{
  width: 100%;
  height: 100%;
}

#introLogo{
  width: 25vw;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -4vw 0 0 -12.5vw;
  z-index: 1111;
  opacity: 0;
	transition: all 1000ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-webkit-transition: all 1000ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

#introLogo.active{
  opacity: 1;
  margin: -8vw 0 0 -12.5vw;
	transition: all 1000ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-webkit-transition: all 1000ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

#introWrapImagesSp{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.introWrapListSp{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%) scale(1.25);
  transform: translateY(-50%) scale(1.25);
}

.introWrapListSp ul{
  width: 100%;
  overflow: hidden;
}

.introWrapListSp li{
  width: calc(100% / 4);
  float: left;
  position: relative;
  overflow: hidden;
}

.space{
  width: 25%;
  height: 80px;
  background: #0ff;
}

#topLinks{
  width: 100%;
  height: 100%;
  margin-top: 40px;
}

#topLinksA{
  width: 100%;
  float: none;
  position: relative;
  display: block;
}

#topLinksB{
  width: 100%;
  float: none;
  position: relative;
  display: block;
}

.topLinksImg{
  width: 81.25vw;
  margin: 0 auto 9.37vw;
  display: block;
  position: relative;
}

#topLinksA .topLinksImg{
  right: 0;
}

#topLinksB .topLinksImg{
  left: 0;
}

#topLinks a img{
  opacity: 0.3;
  filter: blur(1vw);
  transition-duration: 0.8s;
}

#topLinks a.active img{
  opacity: 1;
  filter: blur(0);
  transition-duration: 0.8s;
}

#topLinks h2{
  width: 100%;
  position: absolute;
  top: 50%;
  margin-top: -1vw;
  left: 0;
  text-align: center;
  font-size: 4.688vw;
  letter-spacing: 0.04em;
  opacity: 1;
	transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-webkit-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

#topLinks a.active h2{
  opacity: 0;
	transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-webkit-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

}

@media only print, only screen and (min-width: 1000px){

#navCollection li{
  display: block;
}

#intro #navCollection > a,
#intro #navCollection20Ss > a{
  text-decoration: underline;
}

#introWrap{
  width: 100%;
  height: 100vh;
  position: relative;
}

#introLogo{
  width: 8vw;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2vw 0 0 -4vw;
  z-index: 1111;
  opacity: 0;
	transition: all 1000ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-webkit-transition: all 1000ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

#introLogo.active{
  opacity: 1;
  margin: -3vw 0 0 -4vw;
	transition: all 1000ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-webkit-transition: all 1000ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

#introWrapImages{
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.introWrapList{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%) scale(1.25);
  transform: translateY(-50%) scale(1.25);
}

.introWrapList li{
  width: calc(100% / 6);
  float: left;
  position: relative;
  overflow: hidden;
}

#topLinks{
  width: 100%;
  height: 100vh;
  margin-top: 0;
  overflow: hidden;
}

#topLinksA{
  width: 50%;
  height: 100vh;
  float: left;
  position: relative;
  display: block;
}

#topLinksB{
  width: 50%;
  height: 100vh;
  float: right;
  position: relative;
  display: block;
}

.topLinksImg{
  width: 60%;
  margin: 0 auto;
  display: block;
  position: relative;
  top: 50%;
  margin-top: -0.6vw;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  overflow: hidden;
}

#topLinksA .topLinksImg{
  right: -5.6vw;
}

#topLinksB .topLinksImg{
  left: -5.6vw;
}

#topLinks a img{
  opacity: 0.3;
  filter: blur(1vw);
  transition-duration: 0.8s;
}

#topLinks a:hover img{
  opacity: 1;
  filter: blur(0);
  transition-duration: 0.8s;
}

#topLinks h2{
  width: 100%;
  position: absolute;
  top: 50%;
  margin-top: 0;
  left: 0;
  text-align: center;
  font-size: 1.571vw;
  letter-spacing: 0.04em;
  opacity: 1;
	transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-webkit-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

#topLinks a:hover h2{
  opacity: 0;
  margin-top: -1vw;
	transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-webkit-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

}