@charset "utf-8";

.loader{
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff8ec;
}
.loader_logo{
	width: 280px;
	max-width: 60%;
	opacity: 0;
	animation: loader_in 1.1s ease-out forwards;
}
.loader_logo img{
	width: 100%;
	height: auto;
	animation: loader_float 1.6s ease-in-out infinite;
}
@keyframes loader_in{
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}
@keyframes loader_float{
	0%, 100%{ transform: translateY(0); }
	50%{ transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce){
	.loader_logo{
		opacity: 1;
		animation: none;
	}
	.loader_logo img{
		animation: none;
	}
}
body.gjs-dashed .loader{display: none!important;}
/* CSS Document */

.inner{
	width: 920px;
	max-width: calc(100% - 80px);
	margin: 0 auto;
}
.wave img{
	display: block;
	width: 100%;
	height: auto;
}
.sec_dots{
	display: flex;
	gap: 6px;
}
.sec_dot{
	width: 12px;
	height: 12px;
	border-radius: 6px;
}
.sec_dot_y{background-color: #ffeb9a;}
.sec_dot_m{background-color: #9bdcdc;}

/* ---------- hero ---------- */
.hero{
	position: relative;
	width: 100%;
	aspect-ratio: 1120 / 764;
	background-color: #fff8ec;
	overflow: hidden;
	container-type: inline-size;
}
.hero_logo{
	position: absolute;
	left: 3.21%;
	top: 3.4%;
	width: 17.32%;
	z-index: 5;
}
.hero_copy{
	position: absolute;
	left: 11.79%;
	top: 29.32%;
	width: 30.71%;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hero_title{
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-size: 34px;
	font-size: calc(34 / 1120 * 100cqi);
	line-height: 1.62;
	letter-spacing: 0.04em;
	color: #403b2f;
}
.hero_en{
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 20px;
	font-size: calc(20 / 1120 * 100cqi);
	line-height: 1.34;
	letter-spacing: 0.05em;
	color: #bad86d;
}
.hero_visual{
	position: absolute;
	inset: 0;
}
.hero_shape{
	position: absolute;
	left: 18.21%;
	top: 60.73%;
	width: 21.52%;
	z-index: 1;
}
.hero_photo{
	position: absolute;
	left: 46.07%;
	top: 7.33%;
	width: 50.98%;
	z-index: 1;
}
.hero_blob_float{
	animation: hero_blob_float 5.2s ease-in-out infinite;
}
.hero_shape .hero_blob_float{
	animation-duration: 4.6s;
	animation-delay: -1.4s;
}
.hero_blob_float img{
	display: block;
	width: 100%;
	height: auto;
}
.hero_blob_defs{
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
@keyframes hero_blob_float{
	0%,
	100%{transform: translateY(0);}
	50%{transform: translateY(-12px);}
}
@media (prefers-reduced-motion: reduce){
	.hero_blob_float{
		animation: none;
	}
}
.hero_illust1{
	position: absolute;
	left: 67.77%;
	top: 55.63%;
	width: 22.14%;
	z-index: 2;
}
.hero_illust2{
	position: absolute;
	left: 36.43%;
	top: 8.64%;
	width: 16.07%;
	z-index: 2;
}
.deco_tree{
	position: absolute;
	z-index: 3;
}
.hero_tree_l{
	left: 2.68%;
	top: 50.13%;
	width: 5.08%;
}
.hero_tree_r{
	left: 91.53%;
	top: 62.05%;
	width: 5.08%;
}
.hero_wave{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 4;
}

/* ---------- about ---------- */
.about{
	background-color: #ffffff;
	padding: 60px 0 40px;
	overflow: hidden;
}
.about_box,
.recruit_box{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
}
.about_text,
.recruit_text{
	width: 479px;
	max-width: 52%;
}
.about_en,
.service_en,
.news_en{
	color: #fcbdbd;
	font-size: 20px;
	letter-spacing: 2px;
	line-height: 25px;
	text-transform: capitalize;
}
.about_title{
	padding-top: 14px;
	font-size: 28px;
	line-height: 42px;
	color: #403b2f;
}
.about_body,
.recruit_body{
	padding: 20px 0 30px;
}
.about_body p,
.recruit_body p{
	font-size: 16px;
	font-weight: 500;
	line-height: 31px;
	color: #403b2f;
}
.about_visual,
.recruit_visual{
	position: relative;
	width: 441px;
	max-width: 48%;
	flex-shrink: 0;
}
.about_visual{
	height: 490px;
}
.recruit_visual{
	height: 380px;
}
.about_photo,
.recruit_photo{
	position: absolute;
	left: 14%;
	top: -2%;
	width: 88%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
}
.about_photo img,
.recruit_photo img{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about_illust{
	position: absolute;
	left: 56.7%;
	top: 57%;
	width: 46%;
	z-index: 2;
}
.about_tree_l,
.recruit_tree_l{
	left: 9.3%;
	top: 68%;
	width: 8.8%;
}
.about_tree_r,
.recruit_tree_r{
	left: 100%;
	top: -3%;
	width: 12.9%;
}

/* ---------- service ---------- */
.service{
	background-color: #faf9f5;
	padding: 50px 0 80px;
}
.service_head{
	text-align: center;
}
.service_title_row{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding-top: 5px;
}
.service_title{
	font-size: 30px;
	line-height: 47px;
	color: #403b2f;
}
.service_cards{
	display: flex;
	gap: 30px;
	margin-top: 30px;
}
.service_card{
	position: relative;
	width: calc(50% - 15px);
	box-sizing: border-box;
	background-color: #ffffff;
	border-radius: 15px;
	padding: 30px;
}
.service_num{
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	letter-spacing: 2px;
	color: #fcbdbd;
}
.service_illust{
	height: 210px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 8px 0 10px;
}
.service_illust img{
	width: auto;
	height: 100%;
	max-width: 80%;
}
.service_name{
	display: flex;
	align-items: center;
	gap: 5px;
}
.service_mark{
	font-size: 15px;
	font-weight: 700;
	line-height: 30px;
	color: #fcbdbd;
}
.service_name h3{
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: #403b2f;
}
.service_txt{
	padding-top: 10px;
	font-size: 15px;
	line-height: 1.75;
	color: #403b2f;
}
.v_label{
	position: absolute;
	top: -16px;
	width: 36px;
	box-sizing: border-box;
	padding: 8px 0;
	background-color: #9bdcdc;
	border-radius: 5px;
	writing-mode: vertical-rl;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 36px;
	letter-spacing: 0.06em;
	color: #403b2f;
	text-align: center;
	z-index: 2;
}
.v_label_a{right: 30px;}
.v_label_b{right: 73px;}
.service_more{
	display: flex;
	justify-content: center;
	padding-top: 30px;
}
.service_links{
	display: flex;
	justify-content: center;
	gap: 30px;
	padding-top: 80px;
}
.c_btn_lg{
	display: flex;
	align-items: center;
	gap: 15px;
	width: 400px;
	max-width: 100%;
	box-sizing: border-box;
	background-color: #bad86d;
	border-radius: 999px;
	padding: 10px 20px;
}
.c_btn_lg_icon{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.c_btn_lg_icon img{
	width: 33px;
	height: auto;
}
.c_btn_lg_icon .icon_staff{
	width: 35px;
	height: 39px;
}
.c_btn_lg p{
	flex: 1;
	font-size: 19px;
	font-weight: 500;
	line-height: 25px;
	color: #403b2f;
}

/* ---------- recruit ---------- */
.recruit{
	background-color: #ffd9cd;
	padding: 40px 0 30px;
	overflow: hidden;
}
.recruit_en{
	color: #faf9f5;
	font-size: 20px;
	letter-spacing: 2px;
	line-height: 25px;
	text-transform: capitalize;
}
.recruit_title{
	padding-top: 14px;
	font-size: 32px;
	line-height: 42px;
	color: #f29c9f;
}

/* ---------- news ---------- */
.news{
	background-color: #ffffff;
	padding: 100px 0;
}
.news_head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.news_en{
	font-size: 16px;
	letter-spacing: 3.15px;
	line-height: 15px;
	text-transform: none;
}
.news_title{
	padding-top: 8px;
	font-size: 30px;
	line-height: 31px;
	color: #403b2f;
}
.news_blog .webgene-blog{
	display: flex;
	gap: 20px;
	padding-top: 20px;
}
.news_blog .webgene-item{
	width: calc((100% - 40px) / 3);
}
.news_blog .webgene-item a{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 13px;
}
.news_img{
	position: relative;
	width: 100%;
	aspect-ratio: 245.5 / 148;
	border-radius: 10px;
	overflow: hidden;
}
.news_img img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.news_cate{
	background-color: #9bdcdc;
	border-radius: 50px;
	padding: 5px 10px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.4;
	color: #403b2f;
}
.news_ttl{
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.61;
	color: #403b2f;
}
.news_date{
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: #403b2f;
}

/* ---------- instagram ---------- */
.insta{
	background-color: #faf9f5;
	padding: 60px 0 20px;
}
.insta_head{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
}
.insta_icon{
	width: 30px;
	height: 30px;
}
.insta_icon img{
	width: 30px;
	height: 30px;
}
.insta_title{
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 22px;
	line-height: 27px;
	letter-spacing: 3px;
	color: #eed56f;
}
.insta_blog .webgene-blog{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	padding-top: 20px;
}
.insta_blog .webgene-item a{
	display: block;
	border: 3px solid #ffffff;
	border-radius: 14px;
	overflow: hidden;
	box-sizing: border-box;
}
.insta_img{
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 0.96;
}
.insta_img img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.insta_more{
	display: flex;
	justify-content: center;
	padding-top: 20px;
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.inner{
		max-width: calc(100% - 48px);
	}
	.service_links{
		gap: 16px;
	}
	.c_btn_lg{
		width: 360px;
	}
}
/* ---------- 1080px ~ ---------- */
/*
@media screen and (max-width: 1080px){
	.about_box,
	.recruit_box{
		flex-direction: column;
	}
	.about_text,
	.recruit_text,
	.about_visual,
	.recruit_visual{
		width: 100%;
		max-width: 100%;
	}
	.about_visual{
		height: auto;
		aspect-ratio: 441 / 490;
	}
	.recruit_visual{
		height: auto;
		aspect-ratio: 441 / 380;
	}
	.service_links{
		flex-direction: column;
		align-items: center;
	}
}
*/
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.about_box,
	.recruit_box{
		flex-direction: column;
	}
	.about_text,
	.recruit_text,
	.about_visual,
	.recruit_visual{
		width: 100%;
		max-width: 100%;
	}
	.about_visual{
		height: auto;
		aspect-ratio: 441 / 490;
	}
	.recruit_visual{
		height: auto;
		aspect-ratio: 441 / 380;
	}
	.service_links{
		flex-direction: column;
		align-items: center;
	}
/*
	.hero{
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		padding: 24px 20px 0;
		overflow: hidden;
		align-items: center;
	}
	.hero_logo,
	.hero_copy{
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
	}
	.hero_logo{
		width: 140px;
	}
	.hero_copy{
		padding: 24px 0 10px;
	}
	.hero_title{
		font-size: 28px;
	}
	.hero_en{
		font-size: 16px;
	}
	.hero_visual{
		position: relative;
		width: 100%;
		aspect-ratio: 1120 / 700;
	}
	.hero_wave{
		position: relative;
		margin-top: -8px;
	}
*/
	.about,
	.recruit{
		padding-left: 0;
		padding-right: 0;
	}
	.service_cards{
		flex-direction: column;
	}
	.service_card{
		width: 100%;
	}
	.service_links{
		padding-top: 40px;
	}
	.c_btn_lg{
		width: 100%;
	}
	.news{
		padding: 70px 0;
	}
	.news_head{
		flex-direction: column;
		align-items: flex-start;
	}
	.news_blog .webgene-blog{
		flex-direction: column;
	}
	.news_blog .webgene-item{
		width: 100%;
	}
	.insta_blog .webgene-blog{
		grid-template-columns: repeat(2, 1fr);
	}
	
	.about_text, .recruit_text{order: 2;}

	.about_visual, .recruit_visual{order: 1;}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.hero{
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		padding: 24px 20px 0;
		overflow: hidden;
		align-items: center;
	}
	.hero_logo,
	.hero_copy{
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
	}
	.hero_logo{
		width: 140px;
	}
	.hero_copy{
		padding: 24px 0 10px;
	}
	.hero_title{
		font-size: 28px;
	}
	.hero_en{
		font-size: 16px;
	}
	.hero_visual{
		position: relative;
		width: 100%;
		aspect-ratio: 1120 / 700;
	}
	.hero_wave{
		position: relative;
		margin-top: -8px;
	}
	.inner{
		max-width: calc(100% - 40px);
	}
	.hero_title{
		font-size: 24px;
	}
	.about_title,
	.service_title,
	.recruit_title,
	.news_title{
		font-size: 24px;
		line-height: 1.5;
	}
	.v_label{
		font-size: 14px;
		width: 28px;
		line-height: 28px;
	}
	.v_label_a{right: 16px;}
	.v_label_b{right: 50px;}
	.service_card{
		padding: 24px 16px 24px;
	}
	.hero_shape{
		width: 40%;
		top: 45%;
		left: 0;
	}
	.hero_photo{
		left: 38%;
		width: 62%;
		top: 0;
	}
	.hero_illust1{
		width: 30%;
		left: 70%;
	}
	.hero_illust2{
		width: 30%;
		left: 26%;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
	.hero_title{
		font-size: 22px;
	}
	.c_btn_lg_icon{
		width: 60px;
		height: 60px;
	}
	.c_btn_lg p{
		font-size: 16px;
	}
}