@charset "utf-8";

/*----------------------------------------------------------------
 TopPage only
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
#header{
	--max-width		: 100vh;
}
/* @media screen and (min-width: 1100px) {
#header{
	--max-width		: 800px;
}
} */


#header .nanda{
	--area-overflow : 30px;
	position			: relative;
	top: calc(var(--area-overflow) * -1);
	z-index				: 2;
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-height: calc(100% + var(--area-overflow));
	overflow: hidden;
}
@media screen and (min-width: 769px) {
#header .nanda{
	--area-overflow : 30px;
	gap: 50px;
}
}

@media screen and (min-width: 769px) {
  #header .mv{
    min-height: 800px;
  }
}
#header .theme{
	z-index				: 3;
}
#header .mv{
	background: var(--main-color);
}
#header .logo,
#header .date{
	display: block;
	position: absolute;
	width: 100%;
	z-index: 10;
	max-width: var(--max-width);
	left: 0;
}
#header .logo{
	top: 0;
}
#header .date{
	bottom: 0;
}
#header .mv{
	position			: relative;
}
#header .mv p{
	opacity: 0;
}

#header .mv::before{
content: "";
	display: block;
  /* backdrop-filter:blur(18px); */
  animation:blur 12s ease-in-out infinite;
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
#header .mv .rslides{
	position: relative;
	z-index: 1;
}

@keyframes blur{
  0%{backdrop-filter:blur(0);}
  15%{backdrop-filter:blur(0.5px);}
  35%{backdrop-filter:blur(2px);}
  50%{backdrop-filter:blur(6px);}
  65%{backdrop-filter:blur(2px);}
  85%{backdrop-filter:blur(0.5px);}
  100%{backdrop-filter:blur(0);}
}


/*-----------------------------------------------------
 background skew
-----------------------------------------------------*/
#outline{
	padding				: 40px 0 0 0;
	z-index				: 9;
}
#outline,#outline:after{ background: var(--bg-color); }
@media screen and (min-width: 769px) {
#outline{
	padding				: 80px 0 0 0;
}
}
#program{
	z-index				: 8;
}
#program,#program:after{ background: var(--sub-color); }



#about{
	z-index				: 7;
}
#about:after{display: none;}
#about{
	background: var(--bg-color);
	padding: 4vw 0;
}


#lab{
	z-index				: 6;
	padding: 4vw 0;
}
#lab,#lab:after{ background: var(--sub-color); }


#stair{
	z-index				: 5;
}
#stair,#stair:after{ background: var(--bg-color); }
@media screen and (max-width: 768px) {
#stair{
	padding				: 40px 0;
}
}


#footer{ z-index: 3; }

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
/*-----------------------------------------------------
 header
-----------------------------------------------------*/
@media screen and (min-width: 768px) {
#header .theme img{ max-width: 1040px; }
}

/* wanted-banner
-----------------------------------------------------*/
.wanted-banner{ margin: 50px 0 0 0; }
.wanted-banner li{ margin: 20px 0; }
.wanted-banner li a{ display: block;}

/*-----------------------------------------------------
 about
-----------------------------------------------------*/
#about .container{ padding: 0 0 80px 0; }
#about{
	line-height: 2;
}



/*-----------------------------------------------------
 stair
-----------------------------------------------------*/
#stair h2{ padding: 30px 0 0 0; }

#stair h3{
	text-align: left;
	margin: 0 0 0.5em 0;
}
#stair dl{
	margin: 0.5em 0;
}
#stair dl dt{
	font-weight: bold;
}
#stair .row .btn{
margin-left: 0;
}

/*-----------------------------------------------------
 lab
-----------------------------------------------------*/
#lab h2{ padding: 30px 0 0 0; }