@charset "utf-8";

/***********************************************************************************************************************/

/** .frontpage **/

html {overscroll-behavior: none;}

.frontpage{padding-bottom:0;overflow:clip;
	& section{position:relative;overflow:clip;}
	& h2{margin-bottom:0.5em;letter-spacing:0.1em;
		& span{font-size:1.375em;font-weight:700;line-height:1.3;display:block;}
		& small{font-size:0.4em;font-weight:500;margin-top:1.25em;display:block;}
	}
	& h3{font-size:3em;letter-spacing:0.1em;font-weight:700;}
	p{
		&.lead{font-size:1.25em;line-height:1.85;letter-spacing:0.05em;}
	}
	& .btn.paper{height:3.25em;font-size:1.25em;background:#0B192C45;border-color:#FFFFFF;color:#FFF;margin:0;
		&:after{border-color:#FFFFFF66;}
	}
	& .ml0{margin-left:0;}
}



/***********************************************************************************************************************/

/** .front_mv **/
.front_mv {position: relative;z-index:15;
	
	& .bg_known{background-color:#15B5EB;}
	& .bg_work{background-color:#8F7B70;}
	& .bg_recruit{background-color:#F98052;}

	& .bg_movie{z-index:1;position: relative; overflow: hidden; width: 100%;height:calc(100vh - 66px) ; max-width: inherit; margin: 0;
		& .video {position: absolute; top: 50%;left: 50%;min-width: 100%;min-height: 100%;-webkit-transform: translate(-50%, -50%);z-index:5;}
	}
	& .front_mv_copy{z-index:2;position:absolute;width:100%;height:100%;top:0;left:0;box-sizing:border-box;display:flex;justify-content:center;align-items:center;writing-mode: vertical-rl;font-size:2em;color:#FFF;padding:66px 0 120px;text-shadow:0 0 0.5em #000000;max-width:none;
		& .imgs img{width:45vw;height:auto;margin:0  auto;}
	}
	& .front_mv_menu{z-index:3;position:absolute;bottom:3em;left:50%;width:90vw;max-width:1000px;transform:translate(-50%, 0);
		& > a{border-radius:0.5em;box-shadow:0.25em 0.25em 0 0 #00000045;padding-bottom:0.5em;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:1.125em;height:6em;color:#FFF;flex-basis:33%;position:relative;margin:1em auto 0;
			&:after{content:'';display:block;position:absolute;left:50%;margin-left:-0.325em;top:50%;transform:rotate(-45deg);width:0.75em;height:0.75em;border-left:1px solid #FFF;border-bottom:1px solid #FFF;margin-top:1em;}
		}
	}
	& .scroll_next{position:absolute;bottom:2em;left:50%;transform:translate(-50%,0);color:#FFF;display:flex;width:5em;height:5em;align-items:center;justify-content:center;border:0;font-size:0.825em;z-index:10;cursor:pointer;border:1px solid #FFF;border-radius:50%;display:none;
		& span{letter-spacing:0.15em;position:relative;top:-0.25em;}
		&:after{content:'';display:block;width:0.6em;height:0.6em;border-right:1px solid #FFF;border-bottom:1px solid #FFF;transform:rotate(45deg) translate(-60%,0);position:absolute;left:50%;bottom:0.8em;transition:all 0.3s;}
		&:hover:after{bottom:0.5em;}
	}
}

/** 2026.02.27 .front_lead 削除 > .front_news > .front_news_mv **/
.front_news_mv{padding:2em 0;position:absolute;bottom:0;z-index:100;width:100vw;max-width:none;background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.60) 50%,rgba(0,0,0,0.85) 99%);
		& .row{position:relative;width:90vw;max-width:1180px;margin:0 auto;position:relative;bottom:0;display:flex;z-index:2;
			& .titles_link{flex-shrink:0;font-size:0.875em;margin-right:0.75em;
				& h2{line-height:1;font-size:2.75em;margin:0;text-shadow:none;color:#FFF;
					& span{color:#FFF;letter-spacing:0;line-height:1;}
				}
				& small{display:block;text-align:center;color:#FFF;font-size:1em;}
				
			}
			& .news_lists{margin:0;padding:0;flex-grow:1;border-top:1px solid #FFF;border-bottom:0;
				& > li{padding:1.25em 0;border-bottom:1px solid #FFF;
					& time{margin-right:1em;color:#FFF;}
					& .news_cat{margin-right:1em;width:8em;display:inline-block;text-align:center;}
					& a:hover{text-decoration:underline;}
					& .cont_txt{color:#FFF;}
				}
			}
		}
	}
	& .more_news{display:none;align-items:center;justify-content:center;width:70vw;max-width:240px;height:2.6em;background:#DDD;border:1px solid #000;margin:0 auto;margin-top:1em;
}


/***********************************************************************************************************************/

/** .front_lead **/ /** .front_news **/

.front_lead{background-color:#06b2eb;color:#FFF;overflow:clip;background:linear-gradient(180deg,rgba(178, 223, 247, 1) 25vh, rgba(6, 178, 235, 1) 65vh);background-attachment: fixed;overscroll-behavior: none;background-color:#FFF;
	& h2{text-align:center;text-shadow:0 0 2px #000000CC,0 0 10px #00000099;}
	& p{font-weight:500;}
	& .front_sticky_wrap{width:100vw;height:auto;max-width:none;padding-top:0px;position:relative;z-index:1;
	
		& .lead_item{width:100vw;height:80dvh;position:sticky;top:70px;z-index:5;display:flex;align-items:flex-start;justify-content:center;opacity:1;
			& .cont{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100vw;height:calc(100vh - 70px);
				/* & h2,& p{top:-100px;position:relative;} */
				& p.lead{
					& span{display:block;position:sticky;text-align:center;line-height:2;text-shadow:0 0 2px #000000CC,0 0 5px #00000099;top:0;}
				}
			}
			&.last{height:20dvh;}
		}
		
		& .sticky_bg{position:sticky;top:70px;height:70dvh;align-items:flex-start;justify-content:center;display:flex;
			& .imgs{width:100%;height:auto;opacity:0;transition:all 1s;display:flex;position:absolute;left:50%;top:50%;overflow:clip;
				&.hokkaido_img{transform:scale(1) translate(-50%,-50%);filter:blur(5px);transition:all 1s linear;
					& img{width:90vw;max-width:1280px;}
				}
				& .cloud_img{transition:all 0.75s;}
				
			}
			&.show{
				& .imgs{opacity:1;transition:all 1.5s;
					&.cloud_img{}
					&.hokkaido_img{filter:blur(0);}
				}
				&.blur{
					& .imgs.cloud_img{}
					& .imgs.hokkaido_img{filter:blur(4px);}
				}
			}
		}
		
		& .front_sticky_inner_wrap{padding-top:0;position:sticky;z-index:10;}
		& .sticky_bg{z-index:2;}
		& .hokkaido_img{z-index:3;transform:scale(1) translate(-50%,-50%);}
		& .cloud_img{z-index:4;transform:scale(1.5) translate(-33%,-35%);filter:blur(7px);}
	} 
	
	& .front_news{padding:3em 0;position:sticky;bottom:0;z-index:100;width:100vw;max-width:none;
			&:after{position:absolute;left:0;bottom:0;content:'';display:block;width:100vw;height:10em;background:linear-gradient(180deg,rgba(6, 178, 235, 0) 0%, rgba(6, 178, 235, 0.8) 50%, rgba(6, 178, 235, 1) 97%);z-index:1;}
		& .row{position:relative;width:90vw;max-width:1180px;margin:0 auto;position:sticky;bottom:0;display:flex;align-items:self-end;z-index:2;
			& .titles_link{flex-shrink:0;font-size:0.875em;margin-right:0.75em;
				& h2{line-height:1;font-size:2.75em;margin:0;text-shadow:none;color:#FFF;
					& span{color:#FFF;letter-spacing:0;line-height:1;}
				}
				& small{display:block;text-align:center;color:#FFF;font-size:1em;}
				
			}
			& .news_lists{margin:0;padding:0;flex-grow:1;border-top:1px solid #FFF;border-bottom:0;
				& > li{padding:1.25em 0;border-bottom:1px solid #FFF;
					& time{margin-right:1em;}
					& .news_cat{margin-right:1em;width:8em;display:inline-block;text-align:center;}
					& a:hover{text-decoration:underline;}
					& .cont_txt{color:#FFF;}
				}
			}
		}
	}
	& .more_news{display:none;align-items:center;justify-content:center;width:70vw;max-width:240px;height:2.6em;background:#DDD;border:1px solid #000;margin:0 auto;margin-top:1em;
	}
}


/***********************************************************************************************************************/

/** .front_known .front_work .front_recruit **/


.bg_img{position:absolute;left:0;top:0;width:100%;height:100%;
	&:after{content:'';display:block;position:absolute;top:0;width:200%;height:100%;transition:all 1s; transition-timing-function: ease-out;}
	& img{display:block;width:100%;height:100%;object-fit:cover;}
}

.front_known .bg_img:after,
.front_recruit .bg_img:after{left:0;background: linear-gradient(-90deg,#00000033 15%, #000000cc 45%,#000000FF 55%);}
.front_work .bg_img:after{left:-100%;background: linear-gradient(90deg,#00000033 15%, #000000cc 45%,#000000FF 55%);}

.front_known .bg_img.anime.active:after,
.front_recruit .bg_img.anime.active:after{left:-100%;}
.front_work .bg_img.anime.active:after{left:0;}

.front_known,
.front_work{color:#FFF;max-height:100dvh;padding:2em 0;box-sizing:border-box;width:100%;aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center;background-color:#000;height:100dvh;
}

.front_recruit{color:#FFF;max-height:100dvh;width:100%;padding:2em 0;aspect-ratio:8 / 5;display:flex;align-items:center;justify-content:center;background-color:#000;box-sizing:border-box;min-height:950px;
	& .row.recruit_wrap{display: flex;flex-direction: column;justify-content: space-around;align-items: flex-start;gap:3em;
		& .recruit_cont{width:100%;}
		& .guideline_nav{width:100%;}
	}
}
		

.recruit_nav{ }

.front_top_message{background:#003b77;color:#FFF;padding:5em 0;
	
	& .top_message_name{margin-top:1.25em;
		.name{color:#FFF;line-height:1.5;}
	}
}


@media screen and (min-width: 767px) and (max-width: 1279px) {

.frontpage{font-size:1.25vw;}

}


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

.frontpage{
	& h2{
		& span{font-size:2.5rem;text-align:center;}
		& small{text-align:center;}
	}
	& h3{font-size:2rem;text-align:center;}
}

.front_mv{
	& .bg_movie{height:calc(100dvh - 50px);}
	& .front_mv_copy .imgs img{width:85vw;}
}

.front_lead{
	& .front_sticky_wrap{padding-top:50px;
		& .sticky_bg{height:50dvh;top:50px;
		
		}
		& .lead_item{top:30px;
			& .lead_title span{font-size:7vw;}
			& p.lead{font-size:1em;}
		}
	}
	
	
	& .front_news{
		&:after{height:30dvh;background:linear-gradient(180deg,rgba(6, 178, 235, 0) 0%, rgba(6, 178, 235, 0.8) 20%, rgba(6, 178, 235, 1) 50%);}
		& .row{flex-direction:column;align-items:start;
			& .titles_link{display:flex;align-items:center;margin-bottom:0.2em;width:100%;justify-content:space-between;
				& h2{pointer-events:none;
				}
			}
		& .news_lists > li .cont_txt{display: block;margin-top: 0.5em;}
		}
	}
}

	& .front_news_mv{
		& .row{flex-direction:column;align-items:start;
			& .news_lists {width:100%;}
			& .titles_link{display:flex;align-items:center;margin-bottom:0.2em;width:100%;justify-content:space-between;
				& h2{pointer-events:none;
					& span{font-size:0.75em;}
				}
			}
		& .news_lists > li a{display: block;margin-top: 0.5em;}
		}
	}


.front_known,
.front_work,
.front_recruit{height:auto;aspect-ratio:inherit;padding-bottom:10vw;max-height:none;height:auto;
	& h2{padding-top:30vw;margin-bottom:1em;}
	& .bg_img.anime{height:60vw;
		&:after{content:'';display:block;position:absolute;left:0;top:0;width:100%;height:100%;background: linear-gradient(00deg,#000000 0%, #00000066 20%);left:0;}
		&.active:after{left:0;}
		& > img{height:60vw;object-fit:cover;}
	}
	& .btn.ml0{margin-left:auto!important;}
	& .btn.paper{margin-left:auto;margin-right:auto;}
}


}




/***********************************************************************************************************************/

/** .anime css **/

.anime{transition: all 1s;}
.anime.active{}

.anime.delay_01{transition-delay:0.1s;}
.anime.delay_02{transition-delay:0.2s;}
.anime.delay_03{transition-delay:0.3s;}
.anime.delay_04{transition-delay:0.4s;}
.anime.delay_05{transition-delay:0.5s;}
.anime.delay_06{transition-delay:0.6s;}
.anime.delay_07{transition-delay:0.7s;}
.anime.delay_08{transition-delay:0.8s;}
.anime.delay_09{transition-delay:0.9s;}
.anime.delay_1{transition-delay:1s;}
.anime.delay_15{transition-delay:1.5s;}
.anime.delay_2{transition-delay:2s;}
.anime.delay_25{transition-delay:2.5s;}
.anime.delay_3{transition-delay:3s;}
.anime.delay_4{transition-delay:4s;}
.anime.delay_5{transition-delay:5s;}
.anime.delay_6{transition-delay:6s;}
.anime.delay_7{transition-delay:7s;}

.anime.duration_01{transition-duration: 100ms;}
.anime.duration_02{transition-duration: 200ms;}
.anime.duration_03{transition-duration: 300ms;}
.anime.duration_04{transition-duration: 400ms;}
.anime.duration_05{transition-duration: 500ms;}
.anime.duration_06{transition-duration: 600ms;}
.anime.duration_07{transition-duration: 700ms;}
.anime.duration_08{transition-duration: 800ms;}
.anime.duration_09{transition-duration: 900ms;}
.anime.duration_1s{transition-duration: 1000ms;}
.anime.duration_15s{transition-duration: 1500ms;}
.anime.duration_2s{transition-duration: 2000ms;}
.anime.duration_25s{transition-duration: 2500ms;}
.anime.duration_3s{transition-duration: 3000ms;}

.anime.fadein{opacity:0;}
.anime.fadein.active{opacity:1;}

.anime.fadeout{opacity:1;}
.anime.fadeout.active{opacity:0;}

.anime.rotate_05{transform:rotate(5deg);}
.anime.rotate_05r{transform:rotate(-5deg);}
.anime.rotate_10{transform:rotate(10deg);}
.anime.rotate_10r{transform:rotate(-10deg);}
.anime.rotate_15{transform:rotate(15deg);}
.anime.rotate_15r{transform:rotate(-15deg);}
.anime.rotate_20{transform:rotate(20deg);}
.anime.rotate_20r{transform:rotate(-20deg);}
.anime[class*="rotate"].active{transform:rotate(0deg);}

.anime.zoomin{transform:scale(0.8);}
.anime.zoomin_09{transform:scale(0.9);}
.anime.zoomin_06{transform:scale(0.6);}
.anime[class*="zoomin"].active{transform:scale(1);}

.anime.zoomout{transform:scale(1.2);}
.anime.zoomout_110{transform:scale(1.1);}
.anime.zoomout_150{transform:scale(1.5);}
.anime.zoomout{transform:scale(1.2);}
.anime[class*="zoomout"].active{transform:scale(1);}

.anime.sc_left{transform:translateX(-20px);}
.anime.sc_left_50{transform:translateX(-50px);}
.anime.sc_left_100{transform:translateX(-100px);}
.anime[class*="sc_left"].active{transform:translateX(0px);}

.anime.sc_right{transform:translateX(20px);}
.anime.sc_right_50{transform:translateX(50px);}
.anime.sc_right_100{transform:translateX(100px);}
.anime[class*="sc_right"].active{transform:translateX(0px);}

.anime.sc_up{transform:translateY(20px);}
.anime.sc_up_50{transform:translateY(100px);}
.anime.sc_up_100{transform:translateY(100px);}
.anime[class*="sc_up"].active{transform:translateX(0px);}

.anime.sc_down{transform:translateY(-20px);}
.anime.sc_down_50{transform:translateY(-50px);}
.anime.sc_down_100{transform:translateY(-100px);}
.anime[class*="sc_down"].active{transform:translateX(0px);}

.anime.ft_out_blur_2 img{filter: blur(2px);}
.anime.ft_out_blur_5 img{filter: blur(5px);}
.anime.ft_out_blur_10 img{filter: blur(10x);}
.anime.ft_out_blur_20 img{filter: blur(20px);}
.anime[class*="ft_out_blur"].active img{filter:blur(0px);}

.anime[class*="ft_in_blur"]:not(.active) img{filter:blur(0px);}
.anime.ft_in_blur_2.active img{filter: blur(2px);}
.anime.ft_in_blur_5.active img{filter: blur(5px);}
.anime.ft_in_blur_10.active img{filter: blur(10x);}
.anime.ft_in_blur_20.active img{filter: blur(20px)}