@charset "utf-8";

body{min-width: 1200px;}
#wrapper{ padding: 101px 0 0; }

.flex{display: flex}
a.view_btn{color: #fff; background: linear-gradient(115deg, #64ACEB, #F1BBE0); border-radius: 100px; display: block; text-align: center;}
a.btn{font-size: 18px; letter-spacing: 0.05em; width: 242px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); padding: 22px 0 23px; line-height: 160%; margin: 42px auto 0; appearance: none; -webkit-appearance: none; }

.main-title{text-align: center; font-size: 18px; line-height: 160%; text-align: center;}
.main-title span{background: linear-gradient(to left,#F1BBE0,#64ACEB); font-size: 78px; line-height: 100%; font-family: josefin-sans, sans-serif; font-weight: 400; font-style: normal; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

#toTop{ position: relative; width: 1100px; margin: 0 auto; padding: 80px 0; }
#toTop:before{ position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 8px; background: linear-gradient(115deg, #64ACEB, #F1BBE0); }


/* ------------------------------------------------------------ header ------------------------------------------------------------ */
header{background: #ffff; min-width: 1200px; width: 100%; padding: 24px 25px 25px 33px; position: fixed; z-index: 1000;}
header .flex{display: flex; justify-content: space-between; align-items: center;}
header nav ul li{display: inline-block;}
header nav ul li:not(:last-child){padding: 0 37px 0 0}
header nav ul li a{display: block; padding: 13px 0 14px;line-height: 160%; text-align: center;}
header nav ul li a.view_btn{ width: 187px; }
header a.view_btn.sp{ display: none; }

.burger-btn{ display: none; }

/* ----------------------------- #talent ------------------------------- */
#talent{padding: 110px 0 0;}
#talent .talent_tag{display: grid; grid-template-columns: repeat(5,1fr); gap: 41px 20px; margin: 71px auto 0;}
#talent .talent_tag a{position: relative; border-radius: 10px; display: block;}

#talent .talent_tag a .img{ position: relative; }
#talent .talent_tag a .img:before{content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #64ACEA, #DCB9E2); border-radius: 10px; position: absolute; top: 9px; right: -9px;}
#talent .talent_tag a img{ width: 100%; height: auto; border: 1px solid #000; border-radius: 10px; display: block; position: relative; z-index: 1;}
#talent .talent_tag a p{padding: 12px 0 0; font-size: 18px;font-family: 'Noto-Sans-JP-Light'; line-height: 100%;}
#talent .talent_tag a p span{ font-size: 22px; letter-spacing: 0.05em;line-height: 191%;}

/* ----------------------------- footer ------------------------------- */
footer{ padding: 120px 0  20px; background: #464D84; }
footer h2{ text-align: center; padding: 0 0 80px; }
footer p{ color: #fff; text-align: center; font-size: 14px; font-family: 'Noto-Sans-JP-Regular';　}



/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
	#wrapper{ padding: 60px 0 0; }
	a.view_btn{ width: 40%; padding: 12px; }
	a.btn{ width: 73%; padding: 21px 0 22px; margin: 50px auto 0; }
	
	.main-title{ font-size: 16px; }
	.main-title span{ font-size: 50px; }
	
	#toTop{ width: 90%; padding: 30px 0 50px; }
	#toTop::before{ height: 4px; }
	
	
/* ------------------------------------------------------------ header ------------------------------------------------------------ */
	body{min-width: 100%;}
	header{ min-width: 100%; padding: 10px 5%; }
	header h1{ position: relative; z-index: 50; width: 20%; }
	
	header nav{ transition: all 0.5s; opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 20% 10%; background: linear-gradient(30deg,#F1BBE0,#64ACEB); }
	header nav ul li{ display: block; }
	header nav ul li:not(:last-child){ padding: 0; }
	header nav ul li:last-child{ padding: 30px 0 0; }
	header nav ul li a{ padding: 10px 0; color: #fff !important; text-align: left; }
	header nav ul li a.view_btn{ background: #fff; color: #000 !important; }
	header a.view_btn.sp{ display: block; margin-left: 20%; }
	
	header nav.active{ opacity: 1; visibility: visible; }
	
	.burger-btn{ position: relative; display: block; width: 30px; height: 20px; }
	.burger-btn span{ transition: all 0.5s; position: absolute; left: 0; width: 100%; height: 1px; background: #000; }
	.burger-btn span:first-of-type{ top: 5px; }
	.burger-btn span:nth-of-type(2){ top: 15px; }
	
	.burger-btn.active span{ background: #fff; }
	.burger-btn.active span:first-of-type{ top: 10px; transform: rotate(15deg); }
	.burger-btn.active span:nth-of-type(2){ top: 10px; transform: rotate(-15deg); }
	
	
/* ----------------------------- #talent ------------------------------- */
	#talent{ padding: 40px 0 60px; }
	#talent .talent_tag{ margin: 35px 0 0; grid-template-columns: repeat(2,1fr); gap: 25px 4%; }
	#talent .talent_tag a .img::before{ top: 6px; right: -7px; }
	#talent .talent_tag a p span{ font-size: 17px; }
	#talent .talent_tag a p{ padding: 8px 0 0; font-size: 14px; }
	
/* ----------------------------- footer ------------------------------- */
	footer { padding: 60px 0 15px; }
	footer h2 { padding: 0 0 35px; width: 30%; margin: 0 auto; }


	
	
	
}
