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



/*  ---------------------------------------------------------------------------------------------------------------------------------- */


/*トップページ/


/*  ---------------------------------------------------------------------------------------------------------------------------------- */



/*------------------------------------------------------------------

header

------------------------------------------------------------------*/


#top .logo a{color: #fff;}




@media screen and (min-width: 769px) {
	
#top .head .nav-list li a {color: #fff;}

}




/* スクロール後：黒 */
#top .head.scrolled .logo a{color: #4C566F;}
#top .head.scrolled .nav-list li a {
  color: #212829;
}
#top .head.scrolled .nav-list li:not(:last-of-type)::after {
  color: #000;
}












/*  --------------------------------------------------------- */

#top #mainVisualArea {
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


.slidefade{
	position:absolute;
	width:100%;
	height:100vh;
	box-sizing: border-box;
	z-index: -1;
	background-color: #000;
}


/* 前面のオーバーレイ（うっすら暗くする） */
.slidefade::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.slidefade > li {
	width:100%;
	height:100vh;
	box-sizing: border-box;
	background-size:cover;
	background-position: center;
	background-repeat:no-repeat;
	position: absolute;
	list-style: none;
	visibility: hidden;
	animation: anime_slidefade 18s 0s infinite;
	animation-timing-function: ease;
	transform-origin: 50% 50%;
}

.slidefade > li:nth-of-type(2) {animation-delay: 6s;}
.slidefade > li:nth-of-type(3) {animation-delay: 12s;}

.slide1{ background-image:url("../images/topMv.webp");}
.slide2{ background-image:url(../images/topMv2.webp);}
.slide3{ background-image:url(../images/topMv3.webp);}




/* 不要なスライドは非表示 */
@media screen and (min-width: 769px){
.slide4 { display: none; }
}

.slide5, .slide6 { display: none; }




@keyframes anime_slidefade {
    0% {visibility: visible;opacity: 0;}
    15% {opacity: 1;}
    33.3% {opacity: 1;}
    48.3% {opacity: 0;}
    100% {opacity: 0;}
}


@media screen and (max-width: 768px){
	
.slidefade > li {
	width:100%;
	height:100vh;
	box-sizing: border-box;
	background-size:cover;
	background-position: center;
	background-repeat:no-repeat;
	position: absolute;
	list-style: none;
	visibility: hidden;
	animation: anime_slidefade_sp 20s 0s infinite;
	animation-timing-function: ease;
	transform-origin: 50% 50%;
}

.slidefade > li:nth-of-type(2) {animation-delay: 5s;}
.slidefade > li:nth-of-type(3) {animation-delay: 10s;}
.slidefade > li:nth-of-type(4) {animation-delay: 15s;}

	
.slide1{ background-image:url("../images/topMv_sp.webp");}
.slide2{ background-image:url(../images/topMv_sp2.webp);}
.slide3{ background-image:url(../images/topMv_sp3.webp);}
.slide4{ background-image:url(../images/topMv_sp4.webp);}	

	
}

@keyframes anime_slidefade_sp {
0%   { visibility: visible; opacity: 0; }
    5%   { opacity: 1; }  /* フェードイン完了 */
    25%  { opacity: 1; }  /* 表示維持（20秒の25% = 5秒） */
    30%  { opacity: 0; }  /* フェードアウト完了 */
    100% { opacity: 0; }
}




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


#top #mainVisualArea,
	#top .studio-branding{
	min-width: 1000px;
}
	
#top .studio-branding{
	left:50%;
	transform: translateX(-50%);
	top:110px;
	margin: auto;
	box-sizing: border-box;
	width: 100%;
	padding: 0 20px;
	padding: 0 max(20px, 3%);
}


#top .hero-nav{
	right:50%;
	transform: translateX(50%);
	bottom:40px;
	margin: auto;
	box-sizing: border-box;
	width: 100%;
	padding: 0 max(20px, 3%);
	text-align: right;
}


}





#top .hero-catchcopy{
	position: relative;
	z-index: 3;
	color:#fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
	width: 100vw;
}


#top .hero-catchcopy__title{
	font-weight: 500;
	margin: 0 0 0.7rem; 
	font-size: 3.2rem;
	letter-spacing: 0.05em;
}
#top .hero-catchcopy__kana{font-size: 1rem;letter-spacing: 0.2em;font-weight: 500;}
#top .hero-catchcopy__subtitle{font-size: 1.4rem;letter-spacing: 0.1em;margin-top: 3rem;font-weight: 400;text-transform: lowercase;line-height: 2.2;}
#top .hero-catchcopy__subtitle{margin-top: 0rem;position: absolute;bottom:4rem;left:50%;transform: translateX(-50%);}





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


#top .hero-nav{display: none;}



#top .hero-catchcopy__title{
	font-size: 2.6rem;
	margin: 0 0 0.2rem;
}
	
#top .hero-catchcopy__subtitle{	font-size: 1.1rem;}
#top .hero-catchcopy__subtitle {
  bottom: 3rem;
	width: 100%;
}
	
}



/*------------------*/





/*  ---------------------------------------------------------------------------------------------------------------------------------- */


/*top_greetings/


/*  ---------------------------------------------------------------------------------------------------------------------------------- */

#top_greetings{padding: 10rem 0 5rem;background: #F0EEEC;}


@media screen and (min-width: 769px) {
#top_greetings .section-area{display: flex;justify-content: space-between;}		
#top_greetings .section-area .imgblock{width: 36%;}
#top_greetings .section-area .txtblock{width: 59%;}

}



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

#top_greetings{padding: 5rem 0 5rem;}	
	
}







/*  ---------------------------------------------------------------------------------------------------------------------------------- */


/*top_works/


/*  ---------------------------------------------------------------------------------------------------------------------------------- */


#top_works{padding: 5rem 0 10rem;background: #F0EEEC;}





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

#top_works{padding: 3rem 0 6rem;}

	
}








/*  ---------------------------------------------------------------------------------------------------------------------------------- */


/*top_project/


/*  ---------------------------------------------------------------------------------------------------------------------------------- */


#top_project{padding: 8rem 0 10rem;/*! background: #F0EEEC; */}



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

#top_project .section-area {margin-top: 7rem;}


}

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

#top_project{padding: 5rem 0 6rem;}
#top_project .section-area {margin-top: 3rem;}


}





/*  ---------------------------------------------------------------------------------------------------------------------------------- */


/*top_news/


/*  ---------------------------------------------------------------------------------------------------------------------------------- */


#top_news{padding: 9rem 0 9rem;background: #fff;}

#top_news .post-item{padding: 3rem 0;border-bottom:1px dashed #b0b0b0;}
#top_news .post-item:last-of-type{border-bottom: none;}
#top_news .post-date{font-size: 1.3rem;}
#top_news .post-item p{line-height: 2;}



@media screen and (min-width: 769px) {	
#top_news .wrap{width: 780px;}

}


@media screen and (max-width: 768px){
#top_news{padding: 5rem 0 3rem;}

}








/*------------------------------*/


@media screen and (min-width: 769px) {
#top #footer .wrap{padding: 6rem 20px 5rem;box-sizing: border-box;}

}