@charset "utf-8";

/* -----------------------------------------------------------
mv-area
-------------------------------------------------------------- */
.mv-area {
	position: relative;
	height: 650px;
	overflow: hidden;
}

#top .h1-area {
	top: 610px;
	left: unset;
	right: 10px;
	z-index: 2;
}

#top .h1-area h1 {
	color: #fff;
}

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

	.mv-area {
		margin: 60px 0 0;
		height: 400px;
	}

	.mv-area > .inner {
		padding: 0 20px;
		height: 400px;
	}

	#top .h1-area {
		top: 420px;
		right: unset;
		left: 20px;
	}

}

@keyframes zoomUp {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.15);
	}
}
.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
	animation: zoomUp 12s linear 0s normal both;
}

.swiper-slide img {
	object-fit: cover;
	position: relative;
	height: 100%;
	z-index: -1;
}

.swiper {
	position: absolute;
	top: 0;
	z-index: 1;
}

.swiper-slide {
	position: relative;
}

.swiper-slide.slide01 .swiper-img .img {
	width: 100%;
	height: 650px;
	background: url(../img/top_mv-area_slide01_pc.jpg) no-repeat center;
	background-size: cover;
}

.swiper-slide.slide02 .swiper-img .img {
	width: 100%;
	height: 650px;
	background: url(../img/top_mv-area_slide02_pc.jpg) no-repeat center;
	background-size: cover;
}

@media screen and (min-width: 1400px) {

	.swiper-slide.slide02 .swiper-img .img {
		background: url(../img/top_mv-area_slide02_pc-wide.jpg) no-repeat top;
		background-size: cover;
	}

}

.swiper-slide.slide03 .swiper-img .img {
	width: 100%;
	height: 650px;
	background: url(../img/top_mv-area_slide03_pc.jpg) no-repeat center;
	background-size: cover;
}

.swiper .swiper-slide::before {
	position: absolute;
	bottom: 0;
	content: "";
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
	z-index: 4;
}

.slide-text {
	position: absolute;
	top: 35%;
	left: calc((100% - 1200px) / 2);
	color: #fff;
	z-index: 4;
}

.slide-text .mv-ttl {
	margin: 0 0 20px;
	font-size: 6rem;
	font-weight: 700;
	line-height: 1.5;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.slide-text .mv-sub-ttl {
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 1.5;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

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

	.swiper,
	.swiper::before {
		height: 400px;
	}

	.swiper-slide.slide01 .swiper-img .img {
		height: 400px;
		background: url(../img/top_mv-area_slide01_sp.jpg) no-repeat center;
		background-size: cover;
	}

	.swiper-slide.slide02 .swiper-img .img {
		height: 400px;
		background: url(../img/top_mv-area_slide02_sp.jpg) no-repeat center;
		background-size: cover;
	}

	.swiper-slide.slide03 .swiper-img .img {
		height: 400px;
		background: url(../img/top_mv-area_slide03_sp.jpg) no-repeat center;
		background-size: cover;
	}

	.slide-text {
		top: unset;
		bottom: 50px;
		left: 20px;
	}

	.slide-text .mv-ttl {
		margin: 0 0 12px;
		font-size: 3.2rem;
	}

	.slide-text .mv-sub-ttl {
		font-size: 1.6rem;
	}

}


/* -----------------------------------------------------------
main-service-link-area
-------------------------------------------------------------- */
.main-service-link-area {
	padding: 100px 0;
	/*background: url("../img/cmn_line-bg01.png") no-repeat bottom right;*/
    position: relative;
}

.main-service-link-area .main-service-link-list {
	display: flex;
	gap: 40px;
	margin: 40px 0 0;
}

.main-service-link-area .main-service-link-list .main-service-link-list_item a {
	display: block;
}

.main-service-link-area .main-service-link-list .main-service-link-list_item a:hover img {
	transform: scale(1.1);
	transition-duration: .3s;
}

.main-service-link-area .main-service-link-list .main-service-link-list_item a:hover .main-service-ttl::after {
	right: -32px;
}

.main-service-link-area .main-service-link-list .main-service-link-list_item .main-service-ttl {
	display: inline-block;
	position: relative;
	margin-bottom: 8px;
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.05em;
}

.main-service-link-area .main-service-link-list .main-service-link-list_item .main-service-ttl::after {
	position: absolute;
	content: "\f105";
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 0.8rem;
	top: 11px;
	right: -30px;
	width: 20px;
	height: 20px;
	background: var(--blue);
	border-radius: 50%;
	transition: .2s;
}

.main-service-link-area .main-service-link-list .main-service-link-list_item .img {
	margin: 0 0 20px;
	height: 250px;
	overflow: hidden;
}

.main-service-link-area .main-service-link-list .main-service-link-list_item img {
	object-fit: cover;
	height: 100%;
	transition-duration: .3s;
}

.main-service-link-area .main-service-link-list .main-service-link-list_item span {
	color: var(--blue);
}

/*円形アニメーション*/
.main-service-link-area .circle{
    position: absolute;
    right: 0;
    bottom: 0;
}

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

	.main-service-link-area {
		padding: 40px 0;
		/*background: url("../img/cmn_line-bg01_sp.png") no-repeat bottom right;*/
		background-size: 25%;
	}

	.main-service-link-area .main-service-link-list {
		flex-direction: column;
		gap: 30px;
		margin: 24px 0 0;
	}

	.main-service-link-area .main-service-link-list .main-service-link-list_item .img {
		height: 150px;
	}

	.main-service-link-area .main-service-link-list .main-service-link-list_item .main-service-ttl {
		font-size: 2.2rem;
	}

	.main-service-link-area .main-service-link-list .main-service-link-list_item .main-service-ttl::after {
		top: 8px;
	}

	.main-service-link-area .main-service-link-list .main-service-link-list_item .txt {
		font-size: 1.4rem;
	}
    
    /*円形アニメーション*/
    .main-service-link-area .circle img{
        width: 90px;
    }

}


/* -----------------------------------------------------------
about-area
-------------------------------------------------------------- */
.about-area {
	padding: 100px 0;
	background: var(--light-blue);
    position: relative;
}

.about-area .inner {
    position: relative;
    z-index: 3;
}

.about-area .col2 {
	display: flex;
	align-items: center;
	gap: 100px;
}

.about-area .col2 .txt-box {
	width: 670px;
	flex-shrink: 0;
}

.about-area .col2 .img {
	width: 100%;
}

.about-area .col2 img {
	object-fit: cover;
	height: 100%;
}


/* 常時表示グリッド */
.blueprint-area__grid-base{
	position:absolute;
	inset:0;
	background-image:
		linear-gradient(rgba(4,109,182,.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(4,109,182,.02) 1px, transparent 1px),
		linear-gradient(rgba(4,109,182,.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(4,109,182,.02) 1px, transparent 1px);
	background-size:
		40px 40px,
		40px 40px,
		200px 200px,
		200px 200px;
	z-index:1;
}
/* 描画用 */
.blueprint-area__grid-h,
.blueprint-area__grid-v{
	position:absolute;
	inset:0;
	z-index:2;
	opacity:1;
}
.blueprint-area__grid-h{
	background:
		repeating-linear-gradient(
			to bottom,
			rgba(120,150,170,.3) 0,
			rgba(120,150,170,.3) 1px,
			transparent 1px,
			transparent 40px
		);
	transform-origin:left center;
	transform:scaleX(0);
}
.blueprint-area__grid-v{
	background:
		repeating-linear-gradient(
			to right,
			rgba(120,150,170,.3) 0,
			rgba(120,150,170,.3) 1px,
			transparent 1px,
			transparent 40px
		);
	transform-origin:center top;
	transform:scaleY(0);
}
/* 発火 */
.blueprint-area.is-active .blueprint-area__grid-h{
	animation:
		drawH .35s ease-out forwards,
		fadeGrid .5s .7s forwards;
}
.blueprint-area.is-active .blueprint-area__grid-v{
	animation:
		drawV .35s ease-out .15s forwards,
		fadeGrid .5s .7s forwards;
}
.blueprint-area.is-active .blueprint-area__content{
	animation:
		contentIn .6s .8s forwards;
}
@keyframes drawH{
	to{
		transform:scaleX(1);
	}
}
@keyframes drawV{
	to{
		transform:scaleY(1);
	}
}
@keyframes fadeGrid{
	to{
		opacity:.15;
	}
}
@keyframes contentIn{
	from{
		opacity:0;
		transform:translate(-50%,-40%);
	}
	to{
		opacity:1;
		transform:translate(-50%,-50%);
	}
}

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

	.about-area {
		padding: 40px 0 50px;
	}

	.about-area .col2 {
		flex-direction: column-reverse;
		gap: 32px;
	}

	.about-area .col2 .txt-box {
		width: unset;
	}

	.about-area .col2 .img {
		height: 250px;
	}

	.about-area .more-btn {
		margin-inline: auto;
	}
    
    /* 常時表示グリッド */
    .blueprint-area__grid-base{
        background-size:
            20px 30px,
            30px 30px,
            200px 200px,
            200px 200px;
    }
    /* 描画用 */
    .blueprint-area__grid-h{
        background:
            repeating-linear-gradient(
                to bottom,
                rgba(120,150,170,.3) 0,
                rgba(120,150,170,.3) 1px,
                transparent 1px,
                transparent 30px
            );
    }
    .blueprint-area__grid-v{
        background:
            repeating-linear-gradient(
                to right,
                rgba(120,150,170,.3) 0,
                rgba(120,150,170,.3) 1px,
                transparent 1px,
                transparent 30px
            );
    }

}


/* -----------------------------------------------------------
service-area
-------------------------------------------------------------- */
.service-area {
	position: relative;
	padding: 0;
	/* background: url("../img/cmn_line-bg02.png") no-repeat top left; */
}

.service-area .intro-area {
    padding: 100px 0 20px;
}

/* 動く文字 */
/*.service-area::before {
	content: "SOLAR POWER SOLAR POWER SOLAR POWER";
	position: absolute;
	top: 40px;
	left: 0;
	font-size: 25rem;
	overflow: hidden;
	white-space: nowrap;
	color: var(--light-blue02);
	font-weight: bold;
	font-family: var(--Montserrat);
	animation: marquee 150s linear infinite;
	letter-spacing: unset;
	mix-blend-mode: multiply;
}*/

.service-area .col2 {
	position: relative;
	display: flex;
	align-items: center;
}

.service-area .col2 .txt-box {
	width: 600px;
	flex-shrink: 0;
}

.service-area .col2 .img {
	position: absolute;
	top: 0;
	right: -40px;
	z-index: 1;
}

.service-area .col2 img {
	object-fit: cover;
	height: 100%;
}

.service-area .col2 .intro-ttl {
	margin-bottom: 20px;
	font-size: 4.8rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.05em;
}


/* 01 Solar Grid Scan */
.panel-area {
	position: absolute;
    top: 50px;
    height: 550px;
    width: 100%;
    z-index: -1;
}
.grid-scan {
	position: relative;
	overflow: hidden;
	/*background: radial-gradient(circle at 78% 20%, rgba(255, 216, 97, .18), transparent 24%), linear-gradient(135deg, #052438, #031522);*/
    height: 100%;
}
.solar-grid {
	position: absolute;
	inset: -20%;
	transform: perspective(900px) rotateX(62deg) rotateZ(-18deg) translateY(18%);
	opacity: .95;
}
.solar-grid:before,
.solar-grid:after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(187,187,187, .5) 1px, transparent 1px),
		linear-gradient(90deg, rgba(187,187,187, .5) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
/*.solar-grid:after {
	background-image:
		linear-gradient(rgba(255,234,168, .8) 2px, transparent 2px),
		linear-gradient(90deg, rgba(255,234,168, .8) 2px, transparent 2px);
	background-size: 68px 68px;
	clip-path: inset(0 100% 0 0);
	filter: drop-shadow(0 0 18px rgba(255,234,168, .7));
}*/
.solar-grid:after {
	background-image:
		linear-gradient(rgba(201,230,249, .8) 2px, transparent 2px),
		linear-gradient(90deg, rgba(201,230,249, .8) 2px, transparent 2px);
	background-size: 68px 68px;
	clip-path: inset(0 100% 0 0);
	filter: drop-shadow(0 0 18px rgba(201,230,249, .7));
}
.grid-scan.is-active .solar-grid:after {
	animation: gridScan 3.2s cubic-bezier(.22, .8, .22, 1) infinite;
}

.grid-light {
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	right: calc((100% - 1500px) / 2);
	top: -30px;
	background: radial-gradient(circle, rgba(255, 216, 97, .85), rgba(255, 216, 97, .08) 48%, transparent 70%);
	filter: blur(4px);
	opacity: 0;
}
.grid-scan.is-active .grid-light {
	animation: sunDrop 1.2s ease forwards, sunPulse 2s ease-in-out 1.2s infinite alternate;
}

@keyframes gridScan {
	0% {
		clip-path: inset(0 100% 0 0)
	}

	42% {
		clip-path: inset(0 0 0 0)
	}

	70% {
		clip-path: inset(0 0 0 100%)
	}

	100% {
		clip-path: inset(0 100% 0 0)
	}
}
@keyframes sunDrop{to{opacity:1;transform:translateY(20px)}}
@keyframes sunPulse{to{transform:translateY(20px) scale(1.3);filter:blur(8px)}}

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

	.service-area {
		position: relative;
		padding: 50px 0;
	}

	.service-area .intro-area {
		padding: 0 20px;
	}

    .service-area::before {
        content: "SOLAR POWER SOLAR POWER SOLAR POWER";
        position: absolute;
        top: 10px;
        left: 0;
        font-size: 10rem;
        overflow: hidden;
        white-space: nowrap;
        color: var(--light-blue02);
        font-weight: bold;
        font-family: var(--Montserrat);
        animation: marquee 150s linear infinite;
        letter-spacing: unset;
        mix-blend-mode: multiply;
    }
    
	/*.service-area::before {
		top: 10px;
		font-size: 10rem;
	}*/

	.service-area .col2 {
		flex-direction: column;
		align-items: unset;
		gap: 20px;
	}

	.service-area .col2 .img {
		position: unset;
		width: 100%;
	}

	.service-area .col2 .txt-box {
		width: unset;
	}

	.service-area .col2 .intro-ttl {
		margin-bottom: unset;
		font-size: 2.4rem;
		line-height: 1.7;
	}
    
    /* 01 Solar Grid Scan */
    .panel-area {
        top: 80px;
        height: 400px;
    }
    .grid-scan {
    }
    .grid-light {
        width: 140px;
        height: 140px;
        right: -10px;
        top: 60px;
    }
    
}


.service-area .main-cont {
	margin: 120px 0 0;
}

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

	.service-area .main-cont {
		margin: 40px 0 0;
	}

}

/* 導入タイトル */
.service-area .main-cont .head-ttl-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	margin: 0 0 40px;
	z-index: 1;
}

.service-area .head-ttl-wrap .head-ttl {
	font-size: 4rem;
	font-weight: 600;
}

.service-area .head-ttl-wrap .head-txt {
	font-size: 3.2rem;
	font-weight: 600;
	line-height: 1.7;
}

.service-area .head-ttl-wrap .deco {
	position: absolute;
	top: -35px;
	left: -40px;
	z-index: -1;
}

/* 法人向けサービス */
.service-area .corporate-solar-power .head-ttl-wrap .deco {
	top: 0;
}

.service-area .head-ttl-wrap .deco p {
	color: var(--light-blue02);
	font-size: 12rem;
	font-weight: 700;
	line-height: 1;
}

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

	.service-area .main-cont .head-ttl-wrap {
		flex-direction: column;
		align-items: unset;
		gap: 16px;
		margin: 0 0 32px;
		padding: 0 20px;
	}

	.service-area .head-ttl-wrap .head-ttl {
		font-size: 2.4rem;
	}

	.service-area .head-ttl-wrap .head-txt {
		font-size: 1.8rem;
	}

	.service-area .head-ttl-wrap .deco {
		top: -15px;
		left: 5px;
	}

	.service-area .head-ttl-wrap .deco p {
		font-size: 5.4rem;
	}

	/* 法人向けサービス */
	.service-area .corporate-solar-power .head-ttl-wrap .deco {
		top: -15px;
	}

}


/* サービスMV */
.service-area .big-img .img {
	margin-right: calc(50% - 50vw);
	/* width: 100%; */
	height: 500px;
	/* background: url(../img/service-area_main-cont_mv01.jpg) no-repeat center; */
	/* background: cover; */
}

.service-area .big-img img {
	object-fit: cover;
	height: 100%;
}

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

	.service-area .big-img {
		padding-left: 20px;
	}

	.service-area .big-img .img {
		height: 300px;
	}

}


/* 詳細 */
.service-detail-area {
	position: relative;
	padding: 100px 0 0;
	background: var(--blue) url("../img/service-area_main-cont_bg01_pc.png") no-repeat top right;
}
.service-detail-area::after {
	content: "";
	position: absolute;
	top: -250px;
	left: -1200px;
	background: var(--blue);
	width: 100%;
	height: 1100px;
	z-index: -1;
}

.service-detail-area .service-detail-service-ttl_wrap {
	position: relative;
	margin: 0 0 48px;
}
.service-detail-area .service-detail-service-ttl_wrap::after {
	content: "";
	position: absolute;
	top: -16px;
	left: -910px;
	background: var(--dark-blue02);
	width: 100%;
	height: 66px;
}

.service-detail-area .service-detail-service-ttl {
	position: relative;
	color: #fff;
	font-size: 3.2rem;
	font-weight: 600;
	z-index: 1;
}

.service-detail-area .txt-box {
	/* width: 1000px; */
	color: #fff;
}

/* 法人向け */
.main-cont.corporate-solar-power {
	margin: 120px 0 0;
}

.main-cont.corporate-solar-power .service-detail-area {
	padding-bottom: 100px;
	background: var(--dark-blue03) url("../img/service-area_main-cont_bg01_pc.png") no-repeat top right;
}

.main-cont.corporate-solar-power .service-detail-area::after {
	top: -250px;
	background: var(--dark-blue03);
	height: 1000px;
}

.main-cont.corporate-solar-power .service-detail-area .service-detail-service-ttl_wrap::after {
	left: -780px;
	background: #001345;
}

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

	.service-detail-area {
		position: relative;
		padding: 64px 20px 0;
		background: var(--blue) url("../img/service-area_main-cont_bg01_sp.png") no-repeat top right;
		background-size: 100%;
	}
	.service-detail-area::after {
		content: "";
		left: 0;
		height: 250px;
	}

	.service-detail-area .service-detail-service-ttl_wrap {
		margin: 0 0 32px;
	}
	.service-detail-area .service-detail-service-ttl_wrap::after {
		top: -12px;
		left: -20px;
		width: 61%;
		height: 44px;
	}

	.service-detail-area .service-detail-service-ttl {
		font-size: 2rem;
	}

	.service-detail-area .txt-box {
		width: unset;
	}

	/* 法人向け */
	.main-cont.corporate-solar-power {
		margin: 64px 0 0;
	}

	.main-cont.corporate-solar-power .service-detail-area {
		padding: 64px 20px;
		background: var(--dark-blue03) url("../img/service-area_main-cont_bg01_sp.png") no-repeat top right;
		background-size: 100%;
	}

	.main-cont.corporate-solar-power .service-detail-area::after {
		background: var(--dark-blue03);
	}

	.main-cont.corporate-solar-power .service-detail-area .service-detail-service-ttl_wrap::after {
		left: -20px;
		width: 87%;
	}

	.main-cont .service-detail-area .more-btn_wh {
		margin-inline: auto;
	}

}


/* 個人向けサブサービス */
.sub-service-area {
	position: relative;
	margin-top: 100px;
	margin-right: calc(50% - 50vw);
	background: var(--blue);
}

.sub-service-area .sub-service-link-list {
	display: flex;
}

.sub-service-area .sub-service-link-list .sub-service-link-list_item {
	width: calc(100% / 3);
	background: #fff;
}

.sub-service-area .sub-service-link-list .sub-service-link-list_item a {
	display: block;
}

.sub-service-area .sub-service-link-list .sub-service-link-list_item a:hover img {
	transform: scale(1.1);
	transition-duration: .3s;
}

.sub-service-area .sub-service-link-list .sub-service-link-list_item a:hover .ttl-m::after {
	right: -32px;
}

.sub-service-area .sub-service-link-list .sub-service-link-list_item .ttl-m {
	display: inline-block;
	position: relative;
}

.sub-service-area .sub-service-link-list .sub-service-link-list_item .ttl-m::after {
	position: absolute;
	content: "\f105";
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 0.8rem;
	top: 16px;
	right: -30px;
	width: 20px;
	height: 20px;
	background: var(--blue);
	border-radius: 50%;
	transition: .2s;
}

.sub-service-area .sub-service-link-list .sub-service-link-list_item .img {
	margin: 0 0 20px;
	height: 400px;
}

.sub-service-area .sub-service-link-list .sub-service-link-list_item img {
	object-fit: cover;
	height: 100%;
	transition: .3s;
}

.sub-service-area .sub-service-link-list .sub-service-link-list_item .txt {
	padding: 0 40px 0 0;
}

.sub-service-area .sub-service-link-list .sub-service-link-list_item .txt-link-icon_blue::after {
	top: calc(60% / 2);
}

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

	.sub-service-area {
		position: relative;
		margin-top: 56px;
		margin-right: unset;
	}

	.sub-service-area::after {
		content: "";
		position: absolute;
		top: 110px;
		left: -20px;
		background: #fff;
		width: 100vw;
		height: 1100px;
	}

	.sub-service-area .sub-service-link-list {
		position: relative;
		flex-direction: column;
		gap: 40px;
		z-index: 1;
	}

	.sub-service-area .sub-service-link-list .sub-service-link-list_item {
		width: 100%;
	}

	.sub-service-area .sub-service-link-list .sub-service-link-list_item .img {
		margin: 0 0 10px;
		height: 220px;
	}

	.sub-service-area .sub-service-link-list .sub-service-link-list_item .ttl-m::after {
		top: calc(50% / 2);
	}

}


/* 設備工事の流れ */
.service-area .main-cont.flow {
	position: relative;
	margin: unset;
	padding: 100px 0;
	background: var(--light-purple);
}
.service-area .main-cont.flow::after {
	content: "";
	position: absolute;
	top: -700px;
	margin-left: calc(50% - 50vw);
	background: var(--light-purple);
	width: 100vw;
	height: 700px;
	z-index: -2;
}

.service-area .main-cont.flow .head-ttl-wrap .head-ttl {
	color: #333;
}

.service-area .main-cont.flow .head-ttl-wrap .deco p {
	color: #EFF1F9;
}

.flow-cont-list {
	display: flex;
	gap: 24px;
}

.flow-cont-list .flow-cont-list_item {
	padding: 32px 20px;
	width: calc(100% / 5);
	background: #fff;
	box-shadow: 10px 10px 20px rgb(237, 240, 243);
}

.flow-cont-list .flow-cont-list_item .ttl-wrap {
	height: 120px;
}

.flow-cont-list .flow-cont-list_item .num-wrap {
	text-align: center;
}

.flow-cont-list .flow-cont-list_item .num-wrap .step {
	display: block;
	color: var(--dark-blue);
	font-size: 1.5rem;
	font-weight: 800;
}

.flow-cont-list .flow-cont-list_item .num-wrap .num {
	display: block;
	margin: 4px 0 0;
	color: var(--dark-blue);
	font-size: 2.8rem;
	font-weight: 700;
}

.flow-cont-list .flow-cont-list_item .flow-cont-ttl {
	margin: 20px 0 0;
	text-align: center;
	color: var(--dark-blue);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.flow-cont-list .flow-cont-list_item.step01 .flow-cont-ttl,
.flow-cont-list .flow-cont-list_item.step04 .flow-cont-ttl {
	margin: 32px 0 0;
}

.flow-cont-list .flow-cont-list_item .img {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-inline: auto;
	height: 120px;
}

.flow-cont-list .flow-cont-list_item .img01 img {
	width: 113px;
}
.flow-cont-list .flow-cont-list_item .img02 img {
	width: 54px;
}
.flow-cont-list .flow-cont-list_item .img03 img {
	width: 82px;
}
.flow-cont-list .flow-cont-list_item .img04 img {
	width: 57px;
}
.flow-cont-list .flow-cont-list_item .img05 img {
	width: 63px;
} 

.flow-cont-list .flow-cont-list_item .txt {
	font-size: 1.3rem;
	letter-spacing: 0.09em;
}

.service-area .main-cont.flow .more-btn {
	margin: 56px auto 0;
}

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

	.service-area .main-cont.flow {
		padding: 40px 0;
	}
	.service-area .main-cont.flow::after {
		content: unset;
	}

	.flow-cont-list {
		flex-direction: column;
		gap: 20px;
		padding: 0 20px;
	}

	.flow-cont-list .flow-cont-list_item {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		gap: 20px;
		padding: 0 20px;
		width: 100%;
		box-shadow: 10px 10px 30px #E6EDF2;
	}

	.flow-cont-list .flow-cont-list_item .ttl-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 60%;
		flex-shrink: 0;
	}

	.flow-cont-list .flow-cont-list_item .num-wrap {
		text-align: unset;
	}

	.flow-cont-list .flow-cont-list_item .num-wrap .step {
		display: inline-block;
	}

	.flow-cont-list .flow-cont-list_item .num-wrap .num {
		display: inline-block;
		margin: unset;
		font-size: 2.2rem;
	}

	.flow-cont-list .flow-cont-list_item .flow-cont-ttl {
		margin: 8px 0 0;
		text-align: unset;
	}

	.flow-cont-list .flow-cont-list_item.step01 .flow-cont-ttl,
	.flow-cont-list .flow-cont-list_item.step04 .flow-cont-ttl {
		margin: 8px 0 0;
	}

	.flow-cont-list .flow-cont-list_item .img {
		width: 90px;
		height: unset;
		flex-shrink: 0;
	}

	.flow-cont-list .flow-cont-list_item .img01 img {
		position: absolute;
		left: 45px;
		width: 54px;
	}

	.service-area .main-cont.flow .more-btn {
		margin: 32px auto 0;
		padding: 0 20px;
	}

}


/* -----------------------------------------------------------
slider_bg
-------------------------------------------------------------- */
/* スライド画像 */
.slider_bg {
	position: relative;
	margin: 120px 0 20px;
	background: url(../img/top_slide-img.png) repeat-x;
	background-size: auto;
	width: 100%;
	height: 580px;
	overflow: hidden;
	-moz-animation: recruit_cmn_slider-loop 60s linear infinite;
	animation: recruit_cmn_slider-loop 60s linear infinite;
	z-index: 0;
}

@keyframes recruit_cmn_slider-loop {

	0% {
		background-position: 0 0;
	}

	100% {
		background-position: -4880px 0;
	}
}

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

	/* スライド画像 */
	.slider_bg {
		margin: unset;
		background-size: cover;
		width: 100%;
		height: 350px;
	}

}


/* -----------------------------------------------------------
works-area
-------------------------------------------------------------- */
#top .works-area {
	padding: 100px 0 0;
}

.works-area .intro-area {
	display: flex;
	justify-content: space-between;
	gap: 100px;
}

#top .works-area .niwork__list {
	gap: unset;
	flex-wrap: wrap;
	width: 95%;
	margin: 56px auto 0;
	border: solid 1px var(--lightgray02);
}

#top .works-area .niwork__list .niwork__item {
	width: calc(100% / 4);
	border-right: solid 1px var(--lightgray02);
	border-bottom: solid 1px var(--lightgray02);
	box-shadow: unset;
}

@media(any-hover: hover) {

	#top .works-area .niwork__list .niwork__item:hover {
		top: unset;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
		z-index: 1;
	}

}

#top .works-area .niwork__list .niwork__item:nth-child(4),
#top .works-area .niwork__list .niwork__item:nth-child(8) {
	border-right: none;
}

#top .works-area .niwork__list .niwork__item:nth-child(5),
#top .works-area .niwork__list .niwork__item:nth-child(6),
#top .works-area .niwork__list .niwork__item:nth-child(7),
#top .works-area .niwork__list .niwork__item:nth-child(8) {
	border-bottom: none;
}

@media screen and (min-width: 1400px) {

	#top .works-area .niwork__list .niwork__item .thumb {
		height: 260px;
	}

}

.works-area .more-btn {
	margin: 56px auto 0;
}

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

	#top .works-area {
		padding: 40px 0;
	}

	.works-area .intro-area {
		flex-direction: column;
		gap: 24px;
	}

	.works-area .intro-area .txt-box {
		width: 100%;
	}

	#top .works-area .niwork__list {
		flex-wrap: unset;
		flex-direction: unset;
		margin: 40px 0 0;
		padding: 0 0 10px 20px;
		width: 100%;
		border: unset;
		overflow: auto;
	}

	#top .works-area .niwork__list .niwork__item {
		width: 300px;
		border: solid 1px var(--lightgray02);
		flex-shrink: 0;
	}
	#top .works-area .niwork__list .niwork__item + .niwork__item {
		margin: 0 0 0 -1px;
	}

	#top .works-area .niwork__list .niwork__item:nth-child(4),
	#top .works-area .niwork__list .niwork__item:nth-child(8) {
		border-right: solid 1px var(--lightgray02);
	}

	#top .works-area .niwork__list .niwork__item:nth-child(5),
	#top .works-area .niwork__list .niwork__item:nth-child(6),
	#top .works-area .niwork__list .niwork__item:nth-child(7),
	#top .works-area .niwork__list .niwork__item:nth-child(8) {
		border-bottom: solid 1px var(--lightgray02);
	}

	#top .works-area .niwork__list .niwork__item .thumb {
		height: 180px;
	}

	.works-area .more-btn {
		margin: 30px auto 0;
		padding: 0 20px;
	}

}


/* -----------------------------------------------------------
others-link-area
-------------------------------------------------------------- */
.others-link-area {
	padding: 130px 0 230px;
    position: relative;
	/*background-image: url("../img/cmn_line-bg01.png"), url("../img/cmn_line-bg02.png");
	background-repeat: no-repeat, no-repeat;
	background-position: top right, bottom left;*/
}

.others-link-area .col2 {
	display: flex;
}

.others-link-area .col2 a {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 40px;
	width: calc(100% / 2);
	height: 500px;
	transition: .3s;
	overflow: hidden;
}

.others-link-area .col2 a::before {
	position: absolute;
	content: "\f105";
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1rem;
	letter-spacing: 0;
	bottom: 20px;
	right: 20px;
	width: 24px;
	height: 24px;
	border: solid 1px #fff;
	border-radius: 50%;
	z-index: 1;
}

.others-link-area .col2 a::after {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	transition: .4s;
}

.others-link-area .col2 a .img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
}

.others-link-area .col2 a img {
	object-fit: cover;
	height: 100%;
	transition-duration: .3s;
}

.others-link-area .col2 a:hover img {
	transform: scale(1.1);
	transition-duration: .3s;
}

.others-link-area .col2 .section-page-ttl .en {
	color: rgb(51, 51, 51);
}

.others-link-area .col2 a.company {
	position: relative;
	top: 100px;
}

.others-link-area .col2 .section-page-ttl .en {
	position: relative;
	color: #fff;
	font-size: 6rem;
	z-index: 1;
}

.others-link-area .col2 .section-page-ttl .jp,
.others-link-area .col2 a .txt {
	position: relative;
	color: #fff;
	z-index: 1;
}

/*円系アニメーション*/
.others-link-area .circle-t{
    position: absolute;
    right: 0;
    top: 0;
}
.others-link-area .circle-b{
    position: absolute;
    left: 0;
    bottom: 0;
}

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

	.others-link-area {
		margin: unset;
		padding: 40px 0 50px;
		/*background-image: url("../img/cmn_line-bg03_sp.png"), url("../img/cmn_line-bg02_sp.png");
		background-size: 30%, 25%;
		background-repeat: no-repeat, no-repeat;
		background-position: top right, bottom left;*/
	}

	.others-link-area .col2 {
		flex-direction: column;
		gap: unset;
		padding: 40px 20px 0 0;
	}

	.others-link-area .col2 a {
		padding: 40px 20px;
		width: 100%;
		height: 200px;
	}

	.others-link-area .col2 .section-page-ttl {
		margin: unset;
	}

	.others-link-area .col2 a::after {
		background: rgba(0, 0, 0, 0.4);
	}

	.others-link-area .col2 a::before {
		bottom: 12px;
		right: 12px;
		width: 20px;
		height: 20px;
	}

	.others-link-area .col2 a .img {
		height: 100%;
	}

	.others-link-area .col2 a.company {
		top: unset;
	}
	
	.others-link-area .col2 .section-page-ttl .en {
		font-size: 3rem;
	}
    
    /*円系アニメーション*/
    .others-link-area .circle-t{
        top: 0;
    }
    .others-link-area .circle-t img{
        width: 110px;
    }
    .others-link-area .circle-b{
    }
    .others-link-area .circle-b img{
        width: 90px;
    }

}


/* -----------------------------------------------------------
	ninews-area
-------------------------------------------------------------- */
.ninews-area {
	padding: 40px 0 140px;
}

.ninews-inner {
	display: flex;
	gap: 100px;
}

.ninews-head {
	position: relative;
	flex-shrink: 0
}

#top .ninews-thumb__img {
	height: 260px;
}

.ninews-head-link {
	display: inline-block;
	margin: 20px 0 0;
}

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

	.ninews-area {
		padding: 20px 0 90px;
	}

	.ninews-inner {
		flex-direction: column;
		gap: unset;
	}

	#top .ninews-list {
		margin: 10px 0 0;
		padding: 0 20px 10px 20px;
		gap: 20px;
		overflow: auto;
	}

	#top .ninews-list .ninews-item {
		width: 280px;
		flex-shrink: 0;
	}

	#top .ninews-thumb__img {
		height: 260px;
	}

	.ninews-head-link {
		position: absolute;
		top: 530px;
		right: 20px;
		margin: unset;
	}

}