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

.fv{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
body.gjs-dashed .fv{
	height: auto;
}
body:not(.gjs-dashed) .fv::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: #383838;
	background: linear-gradient(180deg, rgba(56, 56, 56, 0.7) 0%, rgba(56, 56, 56, 0.2) 35%, rgba(56, 56, 56, 0.8) 80%, rgba(56, 56, 56, 1) 100%);
	opacity: 0.3;
	mix-blend-mode: multiply;
}

.fv .swiper{
	z-index: 1;
	position: relative;
}

@keyframes zoomUp {
	0% {
		-ms-filter: blur(6px);
		filter: blur(6px);
		transform: scale(1);
	}
	30%{
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
	100% {
		transform: scale(1.15);
	}
}
body:not(.gjs-dashed) .fv .swiper-slide{
	width: 100%!important;
	height:100vh;
}
body:not(.gjs-dashed) .fv .swiper-slide .swiper-img{
	width: 100%!important;
	height:100vh;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.fv .swiper-slide-active .swiper-img,
.fv .swiper-slide-duplicate-active .swiper-img,
.fv .swiper-slide-prev .swiper-img {
  animation: zoomUp 10s linear 0s normal both;
}
body:not(.gjs-dashed) .fv .swiper-slide img {
	display: block!important;
	opacity: 0;
	height: auto;
	width: 100%;
}

.fv .txtbox{
	position: absolute;
	bottom: 20%;
	left: 5%;
	width: auto;
	max-width: 90%;
	z-index: 9;
}
body:not(.gjs-dashed) .fv .txtbox{
	opacity:0;
	-ms-filter: blur(6px);
	filter: blur(6px);
	animation-name: blurin;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	animation-delay: 1.2s;
}
.fv .txtbox p,.fv .txtbox h1{color: #FAF5F3;}
.fv .txtbox p{
	font-family: "EB Garamond", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
	font-size: clamp(42px,6.4vw,75px);
}
.fv .txtbox h1{
	font-family: "Zen Old Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
	font-size: clamp(16px,2.6vw,30px);
	font-weight: 700;
}

.section01{
	justify-content: flex-start;
	position: relative;
}
.section01 .txtbox{
	position: relative;
	width: 55%;
	padding: 8%;
	background-color: #FAF8F7;
	margin-top: 5%;
	z-index: 3;
}
.section01 .txtbox .flower_item1{
	position: absolute;
	width: 35%;
	top: 0;
	left: 0;
	transform: translateY(-50%);
}
.section01 .txtbox .flower_item2{
	position: absolute;
	width: 40%;
	bottom: 10%;
	left: 100%;
	transform: translateX(-30%);
}
.section01 .imgbox{
	position: absolute;
	width: 50%;
	top: 10%;
	right: 0;
	z-index: 1;
}

.section02{
	position: relative;
}
.section02::after{
	content: "";
	position: absolute;
	width: 67%;
	height: 100%;
	top: 0;
	right: 0;
	background-color: #EDECE5;
}
.section02 > div{
	position: relative;
	z-index: 3;
}
.section02 .contents{
}
.section02 .contents .imgbox{
	width: 55%;
}
.section02 .contents .txtbox{
	width: 45%;
	padding: 0 5%;
}
.section02 .flower_item3{
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(-100%);
}

.section03{
	position: relative;
}
.section03::after{
	content: "";
	position: absolute;
	width: 67%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #ECF1F2;
}
.section03 > div{
	position: relative;
	z-index: 3;
}
.section03 .contents{
	flex-direction: row-reverse;
}
.section03 .contents .imgbox{
	width: 55%;
}
.section03 .contents .txtbox{
	width: 45%;
	padding: 0 5%;
}
.section03 .icon_list{
	margin-left: auto;
	margin-right: 0;
}
.section03 .flower_item2{
	position: absolute;
	top: 0;
	left: 60%;
	transform: translateY(-25%);
	z-index: 2;
}
.section03 .flower_item5{
	position: absolute;
	top: 80%;
	left: 0;
	z-index: 2;
}

.icon_list{
	max-width: 1280px;
}
.icon_list .item_list{
	width: 100%;
	gap: 10px;
	align-items: flex-start;
}
.icon_list .item_list .item{
	width: calc(100% / 6 - 50px / 6);
	text-align: center;
}
.icon_list .item_list .item img{
	max-width: 120px;
	margin-bottom: 10px;
}
.icon_list .item_list .item p{
	font-size: clamp(12px,1.2vw,14px);
}
.icon_list .item_list .item p span{
	display: inline-block;
}

.top_titlebox1 > div{
	width: calc(100% / 2 - 10px / 2);
}

.section04{
	position: relative;
	z-index: 3;
}
.section04 .column-5{
	gap: 15px;
}
.section04 .column-5 .column{
	width: calc(100% / 5 - 60px / 5)!important;
	padding: 3%;
	background-color: #fff;
	border: 1px solid #CCCCCC;
}

.section05{
	position: relative;
	z-index: 2;
}
.section05 .flower_item2{
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	transform: translateY(-20%);
}
.section05 > div{
	position: relative;
	z-index: 3;
}

.section07{
	position: relative;
	padding-right: 0;
}
.section07 .flower_item2{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 4;
}
.section07 > div{
	position: relative;
	z-index: 3;
}
.section07 .imgbox{
	width: 50%;
	z-index: 4;
	transform: translateX(10%);
}
.section07 .txtbox{
	width: 50%;
	padding: 5% 10%;
	padding-right: 5%;
	background-color: #F2ECEC;
	margin-top: 7%;
}
.section07 .txtbox .title_item1 .en_title3{
	color: #DCA08C;
}
.section07 .txtbox .title_item1 .title{
	background-color: #DCA08C;
}

.section08,.section09{
	padding-left: 0;
}
.section08 > div,.section09 > div{
	align-items: stretch;
}
.section08 .leftbox,.section09 .leftbox{
	width: 30%;
	justify-content: flex-end;
	align-items: center;
	padding: 0 5%;
}
.section08 .rightbox,.section09 .rightbox{
	width: 70%;
}
.section08 .rightbox > div,.section09 .rightbox > div{
	width: 100%;
}
.section08 .rightbox .webgene-blog{
	max-width: 860px;
}
.section08 .rightbox .webgene-blog .webgene-item:not(:last-of-type){
	margin-bottom: 40px;
}
.section08 .rightbox .webgene-blog .webgene-item a{
	flex-wrap: nowrap;
	gap: 15px;
}
.section08 .rightbox .webgene-blog .webgene-item a .date,.section08 .rightbox .webgene-blog .webgene-item a .catetxt{
	white-space: nowrap;
}
.section08 .rightbox .webgene-blog .webgene-item a .catetxt{
	padding: 3px 8px;
	border: 1px solid #313131;
}

.section09{
	overflow: hidden;
}
.section09 .leftbox{
	position: relative;
	z-index: 2;
	background-color: #F5F4EF;
}
.section09 .leftbox .titlebox i{
	font-size: clamp(24px,3.0vw,35px);
}
.section09 .swiper-container{
	position: relative;
}
.section09 .swiper-container .swiper-wrapper{
	transition-timing-function: linear !important;
}
.section09 .swiper-container .swiper-wrapper .swiper-slide{
	opacity: 1;
}
body.gjs-dashed .section09 .swiper-container .swiper-wrapper .swiper-slide{width: 25%;display: inline-block;}

.section09 .swiper-container .swiper-wrapper .swiper-slide a{
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
}
.section09 .swiper-container .swiper-wrapper .swiper-slide a:hover{
	opacity: 1;
}
.section09 .swiper-container .swiper-wrapper .swiper-slide a .bg_img_wrap2{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%,-50%);
	transition: ease 0.6s;
}
.section09 .swiper-container .swiper-wrapper .swiper-slide a:hover .bg_img_wrap2{
	transform: translate(-50%,-50%) scale(1.1);
}
.section09 .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(odd){
	margin-top: 10%;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.section01 .txtbox{
		width: 60%;
		padding: 5%;
		margin-top: 5%;
	}
	.section01 .txtbox .flower_item1{
		width: 35%;
		transform: translateY(-50%);
	}
	.section01 .txtbox .flower_item2{
		bottom: 10%;
		width: 40%;
		transform: translateX(-30%);
	}
	.section01 .imgbox{
		width: 55%;
	}
	.section04 .column-5{
		gap: 10px;
	}
	.section04 .column-5 .column{
		width: calc(100% / 5 - 40px / 5)!important;
		padding: 3%;
	}
	.section08 .leftbox,.section09 .leftbox{
		justify-content: flex-start;
	}
	
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.section04 .column-5{
		gap: 10px;
	}
	.section04 .column-5 .column{
		width: calc(100% / 3 - 20px / 3)!important;
		padding: 5%;
	}
	.section07{
		justify-content: flex-start;
	}
	.section07 .imgbox{
		width: 80%;
		z-index: 4;
		transform: translateX(0);
		margin-bottom: -6%;
	}
	.section07 .txtbox{
		width: 70%;
		margin-left: 30%;
		padding: 10% 5%;
		margin-top: 0;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.section01{
		overflow: hidden;
	}
	.section01 .txtbox{
		width: 82%;
		padding: 50px;
		margin-top: -10%;
		order: 2;
	}
	.section01 .txtbox .flower_item1{
		transform: translateY(-50%);
	}
	.section01 .txtbox .flower_item2{
		bottom: 10%;
		transform: translateX(-30%);
	}
	.section01 .imgbox{
		position: relative;
		width: 60%;
		order: 1;
		margin-left: 40%;
	}
	.top_titlebox1 > div:first-of-type{
		width: calc(55% - 10px / 2);
	}
	.top_titlebox1 > div:last-of-type{
		width: calc(45% - 10px / 2);
	}
	.section07 .txtbox{
		width: 75%;
	}
	.section08,.section09{
		padding-left: 50px;
	}
	.section08 .leftbox,.section09 .leftbox{
		width: 100%;
		padding-right: 0;
		text-align: center;
		justify-content: center;
	}
	.section08 .rightbox{
		width: 90%;
	}
	.section09 .rightbox{
		width: 100%;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.section01 .txtbox{
		width: 100%;
		padding: 50px 20px;
		margin-top: 20px;
		order: 2;
	}
	.section01 .txtbox p span br{display: none;}
	.section01 .txtbox .flower_item1{
		transform: translateY(-50%);
	}
	.section01 .txtbox .flower_item2{
		bottom: 10%;
		transform: translateX(-30%);
	}
	.section01 .imgbox{
		position: relative;
		width: 80%;
		order: 1;
		margin-left: 20%;
	}
	.section02::after{
		width: 85%;
	}
	.section02 .contents .imgbox{
		width: 100%;
	}
	.section02 .contents .txtbox{
		width: 100%;
		padding: 30px 20px 0;
	}
	.section03::after{
		width: 85%;
	}
	.section03 .contents .imgbox{
		width: 100%;
	}
	.section03 .contents .txtbox{
		width: 100%;
		padding: 30px 20px 0;
	}

	.icon_list{
		max-width: 1280px;
	}
	.icon_list .item_list{
		width: 100%;
		gap: 20px 10px;
		align-items: flex-start;
	}
	.icon_list .item_list .item{
		width: calc(100% / 3 - 20px / 3);
	}
	
	.section04 .column-5{
		gap: 10px;
	}
	.section04 .column-5 .column{
		width: calc(100% / 2 - 10px / 2)!important;
		padding: 5%;
	}
	
	.section07{
		padding-right: 20px;
	}
	.section07 .flower_item2{
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 4;
	}
	.section07 > div{
		position: relative;
		z-index: 3;
	}
	.section07 .imgbox{
		width: 100%;
		margin-bottom: 0;
	}
	.section07 .txtbox{
		width: 100%;
		padding: 40px;
		margin-left: 0;
	}
	.section08,.section09{
		padding-left: 20px;
	}
	.section08 .rightbox,.section09 .rightbox{
		width: 100%;
	}
	.section08 .rightbox .webgene-blog .webgene-item a{
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 10px;
	}
	.section08 .rightbox .webgene-blog .webgene-item:not(:last-of-type){
		margin-bottom: 20px;
	}
	.section08 .rightbox .webgene-blog .webgene-item a .catetxt{
		padding: 2px 4px;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}