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

.fv{
	position: relative;
	width: 100%;
	padding-top: 30px;
}


.fv .swiper{
	width: calc(100% - 80px);
	aspect-ratio: 2 / 1;
	border-radius: 30px;
	margin: 0 auto;
	overflow: hidden;
	z-index: 1;
	position: relative;
}
body.gjs-dashed .fv .swiper{
	position: static;
	aspect-ratio: auto;
	overflow: inherit;
}

.fv .swiper::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #313131;
	opacity: 0.2;
	mix-blend-mode: multiply;
	z-index: 99;
}
body.gjs-dashed .fv .swiper::after{display: none;}

@keyframes zoomUp {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.15);
	}
}
body:not(.gjs-dashed) .fv .swiper-slide{
	width: 100%!important;
	height:100%;
	aspect-ratio: 1.6 / 1;
}
body:not(.gjs-dashed) .fv .swiper-slide .swiper-img{
	width: 100%!important;
	height:100%;
	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;
	left: 10%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	color: #fff;
	gap: 15px;
	flex-direction: column;
	align-items: flex-end;
}
body.gjs-dashed .fv .txtbox{
	position: static;
	transform: translateY(0);
}
.fv .txtbox h1,.fv .txtbox p{
	color: #fff;
}
body.gjs-dashed .fv .txtbox h1,body.gjs-dashed .fv .txtbox p{
	color: #000;
}
.fv .txtbox h1,.fv .txtbox p{
	opacity: 0;
}
body.gjs-dashed .fv .txtbox h1,body.gjs-dashed .fv .txtbox p{
	opacity: 1;
	color: #000;
}
.fv .txtbox h1{
	animation-name: fvtxt1;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	font-size: clamp(20px, 5.0vw, 50px);
	animation-delay: 0.4s;
	font-weight: 700;
}
.fv .txtbox p{
	animation-name: fvtxt2;
	animation-duration: 1.8s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	font-size: clamp(14px, 2.4vw, 26px);
	font-weight: 700;
	animation-delay: 1.4s;
	letter-spacing: 0.1rem;
}
@keyframes fvtxt1 {
	0% {
		opacity: 0;
		-ms-filter: blur(6px);
		filter: blur(6px);
		letter-spacing: -0.2rem;
	}
	100% {
		opacity:1;
		-ms-filter: blur(0px);
		filter: blur(0px);
		letter-spacing: 0.1rem;
	}
}
@keyframes fvtxt2 {
	0% {
		opacity: 0;
		-ms-filter: blur(6px);
		filter: blur(6px);
		letter-spacing: -0.1rem;
	}
	100% {
		opacity:1;
		-ms-filter: blur(0px);
		filter: blur(0px);
		letter-spacing: 0.1rem;
	}
}

.section01 .contents{
	position: relative;
	background-color: #EAE7D3;
	padding: 80px 30px;
	overflow: inherit;
}
.section01 .contents .titlebox .icon{
	position: relative;
	width: 18%;
	max-width: 62px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: #fff;
}
.section01 .contents .titlebox .icon img{
	width: 50%;
}
.section01 .contents .boxwrap{
	justify-content: flex-start;
	align-items: flex-start;
	gap: 15px;
}
.section01 .contents .boxwrap .box{
	width: calc(100% / 4 - 45px / 4);
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid #D8D5B7;
	box-shadow: 0 3px 0 #D8D5B7;
	justify-content: flex-start;
	padding: 10px 15px;
}
.section01 .contents .boxwrap .box .img{
	width: 30%;
	aspect-ratio: 1 / 1;
	background-color: #fff;
	border-radius: 50%;
	border: 1px solid #D3D3D3;
}
.section01 .contents .boxwrap .box p{
	width: 70%;
	padding-left: 15px;
	font-weight: 700;
}
.section01 .contents .more1{
	position: absolute;
	width: 60%;
	max-width: 400px;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,50%);
}
.section01 .contents .more1 a{
	width: 100%;
	max-width: 400px;
}
.section01 .contents .more1 a p,.section01 .contents .more1 a i{
	font-size: clamp(15px,1.8vw,20px);
}

.section02 .titlebox p{
	color: #FB8389;
}
.section02 .contents .webgene-blog,.section06 .contents .webgene-blog{
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: center;
    align-items: flex-start;
	flex-direction: row;
	gap: 20px;
}
.section02 .contents .webgene-blog .webgene-item,.section06 .contents .webgene-blog .webgene-item{
	width: calc(100% / 4 - 60px / 4);
}
.section02 .contents .webgene-blog .webgene-item .cate_txt,.section06 .contents .webgene-blog .webgene-item .cate_txt{
	background-color: #fff;
	border: 1px solid #008172;
	border-radius: 200px;
	padding: 0px 10px;
	color: #008172;
	display: inline-block;
}
.section03 .contents{
	gap: 60px;
}
.section03 .contents > div{
	width: calc(100% / 2 - 60px / 2);
}

.section04{
	position: relative;
}
.section04::before,.section04::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
body.gjs-dashed .section04::before,body.gjs-dashed .section04::after{display: none;}
.section04::before{
	mix-blend-mode: multiply;
	opacity: 0.3;
	background: #2C2927;
	background: linear-gradient(180deg, rgba(44, 41, 39, 1) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 1;
}
.section04::after{
	transform: translateY(-1px);
	background-image: url("https://miraiseikatsu.co.jp/system_panel/uploads/images/top_section4_bg.png");
	background-position: top center;
	background-size: 100% auto;
	background-repeat: no-repeat;
	z-index: 2;
}
.section04 .contents{
	position: relative;
	z-index: 3;
}
body:not(.gjs-dashed) .section04 .contents .titlebox{color: #fff;}
.section04 .contents .linkbox{
	gap: 30px;
}
.section04 .contents .linkbox a{
	position: relative;
	width: calc(100% / 2 - 30px / 2);
	background-color: #fff;
	padding: 30px 20px;
}
.section04 .contents .linkbox a::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
}
.section04 .contents .linkbox a:nth-of-type(odd)::after{
	background-color: #FD666F
}
.section04 .contents .linkbox a:nth-of-type(even)::after{
	background-color: #3FACE4
}
.section04 .contents .linkbox a .imgbox{
	width: 30%;
}
.section04 .contents .linkbox a .txtbox{
	width: 70%;
	padding: 20px 0;
	padding-left: 30px;
}
.section04 .contents .linkbox a .icon{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50px;
	aspect-ratio: 1 / 1;
	border-top-left-radius: 50px;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: flex-end;
    align-items: flex-end;
	flex-direction: row;
	padding: 15px;
	transition: ease 0.4s;
}
.section04 .contents .linkbox a:hover .icon{
	width: 60px;
	border-top-left-radius: 60px;
}
.section04 .contents .linkbox a:nth-of-type(odd) .icon{
	background-color: #FD666F
}
.section04 .contents .linkbox a:nth-of-type(even) .icon{
	background-color: #3FACE4
}
.section04 .contents .linkbox a .icon i{
	color: #fff;
	transition: ease 0.3s;
}
/*
.section04 .contents .linkbox a:hover .icon i{
	transform: translateX(3px);
}
*/
.section05 .contents{
	position: relative;
}
.section05 .contents{
	background-image: url("https://miraiseikatsu.co.jp/system_panel/uploads/images/japan_map1.svg");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: auto 100%;
	align-items: stretch;
}
.section05 .contents > div{
	width: 50%;
}
.section05 .contents .areabox{
	position: relative;
}
.section05 .contents .areabox .box{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 24%;
	aspect-ratio: 1 / 1;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
	flex-direction: row;
	border-radius: 50%;
}
.section05 .contents .areabox .box:nth-of-type(1){
	background-color: #07BAA5;
	transform: translateY(-120%) translateX(-20%);
}
.section05 .contents .areabox .box:nth-of-type(2){
	background-color: #E8A527;
}
.section05 .contents .areabox .box:nth-of-type(3){
	background-color: #FD666F;
	transform: translateY(-30%) translateX(-120%);
}
.section05 .contents .areabox .box::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 115%;
	height: 115%;
	opacity: 0.3;
	border-radius: 50%;
}
.section05 .contents .areabox .box:nth-of-type(1)::after{
	background-color: #07BAA5;
}
.section05 .contents .areabox .box:nth-of-type(2)::after{
	background-color: #E8A527;
}
.section05 .contents .areabox .box:nth-of-type(3)::after{
	background-color: #FD666F;
}
.section05 .contents .areabox .box p{
	position: relative;
	z-index: 2;
	color: #fff;
	font-size: clamp(16px,2.0vw,26px);
	font-weight: 700;
}
.section05 .contents .txtbox{
	position: relative;
	z-index: 2;
	padding-left: 20px;
}

.section06 .contents{
	background-color: #fff;
	padding: 80px 50px;
}
.section06 .contents .webgene-blog{
	justify-content: flex-start;
}
.section07 .contents .webgene-blog{
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-items: flex-start;
	flex-direction: row;
	gap: 10px;
}
.section07 .contents .webgene-blog .webgene-item{
	width: calc(100% / 5 - 40px / 5);
}

.company_area{
	position: relative;
	z-index: 1;
	border-radius: 30px 30px 0 0;
	overflow: hidden;
}
.company_area::after{
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #71B553;
	background: linear-gradient(135deg, rgba(113, 181, 83, 1) 0%, rgba(214, 207, 11, 1) 100%);
	opacity: 0.8;
}
body.gjs-dashed .company_area::after{display: none;}
body.gjs-dashed .company_area{
	background: #71B553;
	background: linear-gradient(135deg, rgba(113, 181, 83, 1) 0%, rgba(214, 207, 11, 1) 100%);
}
.company_area{
	margin-bottom: -150px;
}
.company_area .contents{
	position: relative;
	z-index: 2;
}
.company_area .contents .company_links{
	gap: 15px;
}
.company_area .contents .company_links a{
	width: calc(100% / 3 - 30px / 3);
	flex-direction: column;
	gap: 10px;
	background-color: #fff;
	border: 2px solid #409A07;
	padding: 40px 20px;
}
.company_area .contents .company_links a:nth-of-type(2){
	animation-delay: 0.2s;
}
.company_area .contents .company_links a:nth-of-type(3){
	animation-delay: 0.4s;
}
.company_area .contents .company_links a img{
	width: 54px;
}

.main-wrap .contact_area{
	position: relative;
	z-index: 2;
	padding-top: 0;
}
.footer_contact{display: none;}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.section01 .contents .boxwrap .box{
		width: calc(100% / 3 - 30px / 3);
	}
	.section03 .contents{
		gap: 50px;
	}
	.section03 .contents > div{
		width: calc(100% / 2 - 50px / 2);
	}
	.section04 .contents .linkbox a .imgbox{
		width: 35%;
	}
	.section04 .contents .linkbox a .txtbox{
		width: 65%;
		padding: 20px 0;
		padding-left: 20px;
	}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.fv .swiper{
		width: calc(100% - 80px);
		aspect-ratio: 1.6 / 1;
		border-radius: 30px;
	}
	.section01 .contents .boxwrap .box p{
		padding-left: 10px;
	}
	.section03 .contents{
		gap: 40px;
	}
	.section03 .contents > div{
		width: calc(100% / 2 - 40px / 2);
	}
	.section05 .contents .areabox .box{
		width: 28%;
	}
	.section06 .contents{
		padding: 60px 40px;
	}
	.company_area .contents .company_links{
		gap: 10px;
	}
	.company_area .contents .company_links a{
		width: calc(100% / 3 - 20px / 3);
		padding: 40px 20px;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.fv .swiper{
		width: calc(100% - 60px);
		aspect-ratio: 1.6 / 1;
		border-radius: 30px;
	}
	.section01 .contents .boxwrap{
		gap: 10px;
	}
	.section01 .contents .boxwrap .box{
		padding: 6px 10px;
		width: calc(100% / 3 - 20px / 3);
	}
	.section02 .contents .webgene-blog,.section06 .contents .webgene-blog{
		gap: 10px;
	}
	.section02 .contents .webgene-blog .webgene-item,.section06 .contents .webgene-blog .webgene-item{
		width: calc(100% / 4 - 30px / 4);
	}
	.section04 .contents .linkbox{
		gap: 10px;
	}
	.section04 .contents .linkbox a{
		position: relative;
		width: calc(100% / 2 - 10px / 2);
		background-color: #fff;
		padding: 20px 15px;
	}
	.section04 .contents .linkbox a .imgbox{
		width: 40%;
	}
	.section04 .contents .linkbox a .txtbox{
		width: 60%;
		padding: 20px 0;
		padding-left: 15px;
	}
	.section05 .contents .areabox .box{
		width: 35%;
	}
	.section06 .contents{
		padding: 50px 30px;
	}
	.section07 .contents .webgene-blog{
		gap: 6px;
	}
	.section07 .contents .webgene-blog .webgene-item{
		width: calc(100% / 5 - 24px / 5);
	}
	.company_area .contents .company_links a{
		width: calc(100% / 3 - 20px / 3);
		padding: 30px 10px;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.fv .swiper{
		width: calc(100% - 20px);
		aspect-ratio: 1.6 / 1;
		border-radius: 20px;
	}
	.section01 .contents{
		padding: 50px 20px;
	}
	.section01 .contents .boxwrap{
		gap: 8px;
	}
	.section01 .contents .boxwrap .box{
		padding: 6px 10px;
		width: calc(100% / 2 - 8px / 2);
		flex-direction: column;
		gap: 5px;
	}
	.section01 .contents .boxwrap .box .img{
		width: 50%;
	}
	.section01 .contents .boxwrap .box p{
		width: auto;
		padding-left: 0px;
	}
	.section02 .contents .webgene-blog,.section06 .contents .webgene-blog{
		gap: 15px;
	}
	.section02 .contents .webgene-blog .webgene-item,.section06 .contents .webgene-blog .webgene-item{
		width: calc(100% / 2 - 15px / 2);
	}
	.section03 .contents{
		gap: 40px;
	}
	.section03 .contents > div{
		width: 100%;
	}
	.section04 .contents .linkbox{
		gap: 20px;
	}
	.section04 .contents .linkbox a{
		position: relative;
		width: 100%;
		background-color: #fff;
		padding: 20px 15px;
	}
	.section05{
		padding-bottom: 0;
	}
	.section05 .contents{
		background-size: 90% auto;
		background-position: center top;
	}
	.section05 .contents > div{
		width: 100%;
	}
	.section05 .contents .areabox{
		aspect-ratio: 1 / 1;
	}
	.section05 .contents .areabox .box{
		bottom: 10%;
		width: 30%;
	}
	.section05 .contents .txtbox{
		padding-left: 0;
	}
	.section06 .contents{
		padding: 40px 20px;
	}
	.section07 .contents .webgene-blog{
		gap: 5px;
	}
	.section07 .contents .webgene-blog .webgene-item{
		width: calc(100% / 2 - 5px / 2);
	}
	.section07 .contents .webgene-blog .webgene-item:nth-of-type(3),.section07 .contents .webgene-blog .webgene-item:nth-of-type(4),.section07 .contents .webgene-blog .webgene-item:nth-of-type(5){
		width: calc(100% / 3 - 10px / 3);
	}
	.company_area .contents .company_links{
		gap: 15px;
	}
	.company_area .contents .company_links a{
		width: 100%;
		padding: 20px 10px;
		gap: 6px;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}