@charset "utf-8";
/**
 *
 *  ページ用CSS
 *　common space
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.content{
  margin-top: 100px;  
}
.content .caption{
  position: absolute;
  right: 20px;
  bottom: 15px;
  font-size: 1.2rem;
  color: var(--light);
  transform: rotate(0.05deg);    
}
.content .caption._bk{
  color: var(--dark);  
}

/* kv
-----------------------------------------------------------------*/
.kv{
  position: relative;  
}
.kv h1{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;  
}
.kv h1 img{
  width: 40.83vw;
  height: auto;
  filter: drop-shadow(2px 2px 10px rgba(0,0,0,.3));
}

/* intro
-----------------------------------------------------------------*/
.intro{
  padding: 120px 0 180px;  
}
.intro h2{
  margin-bottom: 80px;
  font-size: 4rem;
  color: #595757;
  text-align: center;
  font-weight: 900;
  letter-spacing: .08em;
  transform: rotate(0.05deg);
}
.intro .page-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3px;  
}
.intro .page-nav li{
  width: calc((100% - 6px)/3); 
}
.intro .page-nav a{
  position: relative;
  display: block;
  color: var(--light);
  overflow: hidden;  
}
.intro .page-nav a::before{
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #9fa0a0;
  mix-blend-mode: multiply;
  transition: .5s;     
}
.intro .page-nav a:hover::before{
  transform: translateY(100%);  
}
.intro .page-nav p{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  line-height: 0;  
}
.intro .page-nav p img{
 filter: drop-shadow(2px 2px 10px rgba(0,0,0,.3)); 
}


/* common-space
-----------------------------------------------------------------*/
.common-space{
  padding-bottom: 80px;  
}
.common-space .pic-main{
  position: relative;
	overflow: hidden;  
}
.common-space .pic-main::before{
  position: absolute;
  left: 0;
  top: 0;
	z-index: 10;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #9fa0a0;
  mix-blend-mode: multiply;
  transition: 1s;
	transition-delay: .5s;     
}
.common-space .pic-main.mv::before{
  transform: translateX(100%);  
}
.common-space .pic-main h3{
	position: absolute;
	left: 5vw;
	top: 5vw;	
}
.common-space .pic-main h3 img{
	max-width: none;
	width: auto;
	height: 130px;
	filter: drop-shadow(2px 2px 10px rgba(0,0,0,.2)); 
}
.space{
  display: flex;
  align-items: flex-start;
	scroll-margin-top: 100px;  
}
.common-space .space._rev{
  flex-direction: row-reverse;  
}
.common-space .space .txt-area{
  position: relative;
  z-index: 10;
  width: 50%;
}
.common-space .space h2{
  position: relative;  
}
.common-space .space h2 .script{
  position: absolute;
}
.common-space .space h2+.txt{
  margin-top: 30px;
  font-weight: 900;
  color: #595757;
  font-size: 3.6rem;
  letter-spacing: .08em;
	transition-delay: .3s; 
}
.common-space .space h2+.txt span{
	display: inline-block;
	transform: rotate(0.05deg);
}
.common-space .space .txt-area .txt-box{
  max-width: 615px;
  margin-left: auto;
  padding: 0 40px 0 15px;  
}
.common-space .space._rev .txt-box{
  margin-left: 0;
  margin-right: auto;
  padding: 0 15px 0 40px;    
}
.common-space .space .pic-area{
  width: 50%;
  position: relative;  
}
.common-space .space .pic-area .caption{
  right: 15px;
  bottom: 10px;  
}

/* space01 */
.space01{
  padding-top: 80px;  
}
.space01 .script{
  transform: translate(-30%,-90%);  
}

/* space02 */
.space02{
  margin-top: -30px;
  margin-bottom: 180px;
  align-items: flex-end;  
}
.space02 .script{
  transform: translate(-30%,-90%);  
}

/* space03 */
.space03{
  margin-top: 100px;
  align-items: center;  
}
.space03 .script{
  right: 0;
  transform: translate(60%,-100%);  
}

/* space04 */
.space04{
  margin-top: 100px;
  align-items: flex-end;  
}
.space04 .script{
  transform: translate(-30%,-90%);  
}

/* space05 */
.space05{
  margin-top: 100px;
  align-items: flex-end;   
}
.space05 .script{
  right: 0;
  transform: translate(60%,-90%);  
}

/* space06 */
.space06{
  margin-top: 100px;
  align-items: flex-end;  
}
.space06 .script{
  transform: translate(-30%,-90%);  
}













/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/

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


	.content{
		margin-top: 65px;  
	}
	.content .caption{
		right: 10px;
		bottom: 5px;
		font-size: 1rem;
	}

/* kv
-----------------------------------------------------------------*/
	.kv h1 img{
		width: 80vw;
	}

/* intro
-----------------------------------------------------------------*/
	.intro{
		padding: 50px 0 60px;  
	}
	.intro h2{
		margin-bottom: 40px;
		font-size: 2rem;
	}
	.intro .page-nav{
		gap: 4px;  
	}
	.intro .page-nav li{
		width: calc(50% - 2px); 
	}
	.intro .page-nav a:hover::before{
		transform: translateY(0);  
	}


/* common-space
-----------------------------------------------------------------*/
	.common-space{
		padding-bottom: 20px;  
	}
	.common-space .pic-main h3{
		left: 20px;
		top: 15px;	
	}
	.common-space .pic-main h3 img{
		height: 40px;
		filter: drop-shadow(2px 2px 5px rgba(0,0,0,.3)); 
	}	
	.space{
		display: block;
		scroll-margin-top: 65px;
	}
	.common-space .space .txt-area{
		width: auto;
	}
	.common-space .space h2 .script{
		position: absolute;
	}
	.common-space .space h2 .script + span img{
		width: auto;
		height: 60px;
	}
	.common-space .space h2+.txt{
		margin-top: 15px;
		font-size: 2.2rem;
	}
	.common-space .space .txt-area .txt-box{
		max-width: none;
		margin-left: 0;
		padding: 0 var(--gap);
	}
	.common-space .space._rev .txt-box{
		margin-right: 0;
		padding: 0 var(--gap);    
	}
	.common-space .space .pic-area{
		width: auto;
		margin-top: 30px;
	}
	.common-space .space .pic-area .caption{
		right: 10px;
		bottom: 5px;  
	}

/* space01 */
	.space01{
		padding-top: 65px;  
	}
	.space01 .script{
		transform: translate(-20%,-100%);
		width: 180px;  
	}
	.space01 .pic-area{
		padding: 0 10%;
	}

/* space02 */
	.space02{
		margin-top: 50px;
		margin-bottom: 80px;
	}
	.space02 .script{
		transform: translate(-20%,-100%);
		width: 180px;  
	}

/* space03 */
	.space03{
		margin-top: 60px;
		margin-bottom: 140px;
	}
	.space03 .script{
		right: auto;
		left: 0;
		transform: translate(-20%,-100%);
		width: 180px;   
	}

/* space04 */
	.space04{
		margin-top: 100px;
	}
	.space04 .script{
		transform: translate(-20%,-85%);
		width: 160px;  
	}

/* space05 */
	.space05{
		margin-top: 140px; 
	}
	.space05 .script{
		right: auto;
		left: 0;
		transform: translate(0%,-98%); 
		width: 160px;  
	}

/* space06 */
	.space06{
		margin-top: 140px;
	}
	.space06 .script{
		transform: translate(-5%,-100%);
		width: 160px;  
	}



}