@charset "utf-8";

/* -----------------------------------------------------------
	エリアCMS詳細   共通
-------------------------------------------------------------- */
.page-mv-area {
	margin: unset;
}

#area .breadcrumbs.page {
	top: 620px;
	color: #fff;
	z-index: 1;
}

#area  .breadcrumbs a {
	color: #fff;
}

#header {
	position: relative;
	z-index: 999;
}

.sub-nav a.is-active,
#sp-gnav a.is-active {
	color: #fff !important;
}

#niarea-detail-pref .footer-support-area,
#niarea-detail .footer-support-area {
	display: none;
}

#niarea-detail-pref #footer .footer-area,
#niarea-detail #footer .footer-area {
	padding-top: 100px;
}

#footer .footer-area {
	padding-bottom: 100px;
}

#page-top {
	bottom: 100px;
}

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

	.sub-nav a.is-active,
	#sp-gnav a.is-active {
		color: unset !important;
	}

	.h1-area {
		top: 420px;
	}

	#footer .footer-area {
		padding-bottom: 70px;
	}

	#page-top {
		bottom: 80px;
	}

	#niarea-detail-pref #footer .footer-area,
	#niarea-detail #footer .footer-area {
		padding-top: 40px;
	}


}


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

#area .h1-area {
	top: 610px;
	left: unset;
}

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

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

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

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

	#area .h1-area {
		top: 400px;
		right: unset;
		left: 20px;
		width: 90%;
		z-index: 2;
	}

}

@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: 30%;
	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: 70px;
		left: 20px;
		width: 90%;
	}

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

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

}


/* -----------------------------------------------------------
	ナビ
-------------------------------------------------------------- */
.service-nav {
	background: #fff;
	width: 100%;
}

.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 16;
	width: 100%;
}

.service-nav ul {
	display: flex;
}

/* 都道府県の場合 */
.service-nav .main-menu-wrap ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(100% / 7);
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.5;
	margin: 0 0 0 0;
	text-align: center;
}

/* 市区町村の場合 */
.service-nav.city .main-menu-wrap ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(100% / 6);
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.5;
	margin: 0 0 0 0;
	text-align: center;
}

.service-nav .main-menu-wrap ul li.regist {
	display: none;
}

.service-nav .main-menu-wrap ul li a {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 15px;
	width: 100%;
	position: relative;
	z-index: 1;
}

.service-nav .main-menu-wrap ul li+li::before {
	content: "";
	width: 1px;
	height: 20px;
	background: var(--lightgray02);
}

.service-nav .main-menu-wrap ul li a:hover {
	color: #fff;
	opacity: 1;
}

.service-nav .main-menu-wrap ul li a::before {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	top: 0;
	right: 0;
	z-index: -1;
	transition: all 0.3s ease;
	background: var(--blue);
}

.service-nav .main-menu-wrap ul li a:hover::before {
	left: 0;
	width: 100%;
}

.sub-menu-wrap {
	position: relative;
	z-index: 1;
}
.sub-menu-wrap.person {
	background: var(--blue);
}
.sub-menu-wrap.business {
	background: var(--dark-blue03);
}

.sub-menu-wrap .inner {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sub-menu-wrap .sub-menu-ttl {
	color: #fff;
	font-size: 1.4rem;
}

.service-nav .sub-menu li {
	position: relative;
}

.service-nav .sub-menu li+li::before {
	position: absolute;
	top: 10px;
	content: "";
	width: 1px;
	height: 20px;
	background: var(--lightgray02);
}

.service-nav .sub-menu li a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 32px;
	height: 40px;
	color: #fff;
	font-size: 1.4rem;
}

.service-nav .sub-menu li a:hover {
	opacity: 0.7;
}


/* カレント（アクティブ）表示 */
.service-nav .main-menu-wrap ul li a.active {
	background: var(--blue);
	color: #fff;
}

.service-nav .sub-menu-wrap.person .sub-menu li a.active {
	background: var(--dark-blue03);
	color: #fff;
}

.service-nav .sub-menu-wrap.business .sub-menu li a.active {
	background: var(--blue);
	color: #fff;
}

@media screen and (max-width: 768px){
	
	#menu-box {
		box-shadow: none;
		height: auto;
	}

	.service-nav {
		display: none;
		padding: 0 0 110px;
		height: 100vh;
		position: relative;
		z-index: 16;
		background: #fff;
		overflow: auto;
	}

	.service-nav ul {
		padding: 0 20px 20px;
		display: block;
	}

	.service-nav .main-menu-wrap ul li,
	.service-nav.city .main-menu-wrap ul li {
		width: 100%;
		text-align: left;
	}

	.service-nav .main-menu-wrap ul li + li::before {
		content: unset;
	}

	.service-nav ul li,
	.service-nav ul li.regist{
		display: block;
		font-size: 1.6rem;
		line-height: 1.5;
		margin: 0 0 0 0;
		text-align: left;
	}
	.service-nav ul .entry {
	}
	

	.service-nav .main-menu-wrap ul li a {
		position: relative;
		align-content: center;
		height: 50px;
		display: block;
		padding: 0 20px;
		border-bottom: var(--lightgray02) solid 1px;
	}

	.service-nav .main-menu-wrap ul li a::before {
		background: unset;
	}

	.service-nav .main-menu-wrap ul li a:hover {
		color: unset;
	}
	
	.service-nav ul li a::after {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 27px;
		background: var(--blue);
		width: 8px;
		height: 1px;
	}

	.sub-menu-wrap.person,
	.sub-menu-wrap.business {
		background: unset;
	}

	/* .sub-menu-wrap {
		background: var(--light-blue);
	} */

	.sub-menu-wrap .sub-menu-ttl {
		display: flex;
		align-items: center;
		padding: 0 20px;
		width: 100%;
		height: 50px;
		font-size: 1.6rem;
		font-weight: 500;
		/* background: var(--green); */
	}

	.sub-menu-wrap.person .sub-menu-ttl {
		background: var(--blue);
	}
	.sub-menu-wrap.business .sub-menu-ttl {
		background: var(--dark-blue03);
	}

	.sub-menu-wrap .inner {
		flex-direction: column;
		gap: unset;
	}

	.service-nav ul {
		width: 100%;
	}

	.service-nav ul.sub-menu {
		padding-bottom: unset;
	}

	.sub-menu-wrap.business .sub-menu {
		padding-bottom: 90px;
	}

	.service-nav ul.sub-menu li a {
		position: relative;
		justify-content: flex-start;
		padding: 0 20px;
		height: 50px;
		color: #333;
		font-size: unset;
		font-weight: 500;
		border-bottom: var(--lightgray02) solid 1px;
	}

	/* .service-nav ul.sub-menu li a::before {
		content: "\f105";
		display: inline-block;
		position: absolute;
		top: 35%;
		right: 5px;
		font-size: 1.6rem;
		color: #333;
	}

	.service-nav ul.sub-menu li a:hover {
		color: unset;
	} */

	.service-nav .sub-menu li + li::before {
		content: unset;
	}


	/* カレント（アクティブ）表示 */
	.service-nav .main-menu-wrap ul li a.active {
		background: unset;
		color: var(--blue);
	}

	.service-nav .sub-menu-wrap.person .sub-menu li a.active {
		background: unset;
		color: var(--blue);
	}

	.service-nav .sub-menu-wrap.business .sub-menu li a.active {
		background: unset;
		color: var(--blue);
	}
	
}


/* -----------------------------------------------------------
about-area
-------------------------------------------------------------- */
.about-area {
	padding: 100px 0;
    position: relative;
	/*background: var(--light-purple) url(../img/cmn_line-bg01.png) no-repeat bottom right;*/
}

.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%;
}

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

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

	.about-area {
		padding: 40px 0;
		/*background: var(--light-purple) url(../img/cmn_line-bg01_sp.png) no-repeat bottom right;
		background-size: 25%;*/
	}

	.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;
	}
    
    /*円形アニメーション*/
    .about-area .circle img{
        width: 90px;
    }

}


/* -----------------------------------------------------------
	benefits-area
-------------------------------------------------------------- */
.benefits-area {
	padding: 0 0 100px;
	background: var(--blue) url("../img/service-area_main-cont_bg01_pc.png") no-repeat right top;
	background-size: cover;
	background-attachment: fixed;
	overflow: hidden;
}

.benefits-area .intro-area {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1;
}

.benefits-area .benefits-item {
	position: relative;
	padding: 110px 0 0;
}

.benefits-area .benefits-item .right-block {
	display: flex;
	justify-content: flex-end;
	margin: 0 auto;
	width: 1200px;
}

.benefits-detail-wrap {
	margin: 80px 0 0;
	overflow: hidden;
}
.benefits-detail-wrap + .benefits-detail-wrap {
	margin: 100px 0 0;
}

.benefits-detail {
	position: relative;
	display: flex;
	justify-content: flex-end;
	position: relative;
	z-index: 1;
}
.benefits-detail::after {
	content: "";
	position: absolute;
	top: 60px;
	left: calc((100% - 1000px) / 2);
	width: 100vw;
	height: 100%;
	background: #fff;
	z-index: -1;
}

.benefits-detail .txt-wrap {
	padding: 150px 0 80px 0;
	width: 620px;
	height: auto;
}

.benefits-detail .img-wrap {
	position: absolute;
	top: 0;
	left: calc((100% - 1200px) / 2);
}
.benefits-detail .img-wrap .img img {
	width: 500px;
	height: 400px;
	object-fit: cover;
}

.benefits-ttl-wrap {
	position: relative;
	margin: 0 0 24px;
	padding: 24px 0;
	border-top: solid 1px var(--gray02);
	border-bottom: solid 1px var(--gray02);
}

.benefits-ttl-num {
	position: absolute;
	top: -16px;
	padding: 4px 20px 4px 0;
	color: var(--blue);
	font-size: 2.4rem;
	font-weight: 700;
	background: #fff;
}

.benefits-ttl {
	margin: unset;
	color: var(--dark-blue);
}

.benefits-area .benefits-ttl span {
	display: inline-block;
	font-size: 2.6rem;
}

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

	.benefits-area {
		padding: 0 0 40px;
		background: var(--blue) url("../img/cmn_benefits-area_bg_sp.jpg") no-repeat center top;
	}

	.benefits-area .intro-area {
		flex-direction: column;
		align-items: unset;
		gap: 24px;
	}
	
	.benefits-area .benefits-item {
		padding: 40px 0 0;
	}

	.benefits-detail-wrap {
		margin: 40px 0 0;
	}
	.benefits-detail-wrap + .benefits-detail-wrap {
		margin: 20px 0 0;
	}

	.benefits-area .benefits-item .right-block {
		width: 100%;
	}

	.benefits-detail {
		flex-direction: column-reverse;
	}
	.benefits-detail::after {
		top: unset;
		left: unset;
		width: 100vw;
		height: 100%;
	}
	
	.benefits-detail .txt-wrap {
		padding: 40px 20px 20px;
		width: 100%;
	}
	
	.benefits-detail .img-wrap {
		position: relative;
		left: unset;
	}
	.benefits-detail .img-wrap .img img {
		width: 100%;
		height: 250px;
		object-fit: cover;
	}

	.benefits-ttl-wrap {
		padding: 16px 0 12px;
	}
	.benefits-ttl-num {
		top: -12px;
		padding: 4px 16px 4px 0;
		font-size: 1.6rem;
	}

	.benefits-area .benefits-ttl span {
		font-size: 1.8rem;
	}

}

/* 反転 */
.benefits-detail-wrap.reverse {
	margin: 100px 0 0;
}
.reverse .benefits-detail {
	flex-direction: row-reverse;
}
.reverse .benefits-detail::after {
	right: calc((100% - 1000px) / 2);
	left: unset;
}
.benefits-area .benefits-item .left-block {
	display: flex;
	justify-content: flex-start;
	margin: 0 auto;
	width: 1200px;
}
.reverse .benefits-detail .img-wrap {
	right: calc((100% - 1200px) / 2);
	left: unset;
}

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

	.benefits-detail-wrap.reverse {
		margin: 20px 0 0;
	}
	.reverse .benefits-detail {
		flex-direction: column-reverse;
	}
	.reverse .benefits-detail::after {
		right: unset;
	}
	.benefits-area .benefits-item .left-block {
		width: 100%;
	}
	.reverse .benefits-detail .txt-wrap {
		padding: 40px 20px 20px;
		width: 100%;
	}
	.reverse .benefits-detail .img-wrap {
		right: unset;
		left: unset;
	}

}


/* BENEFITS 01 */
.benefits-service_block {
	margin: 32px 0 0;
}

.benefits-service_block + .benefits-service_block {
	border-top: solid 1px var(--lightgray02);
}

.benefits-service_block > div {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 32px 0 12px;
}

.benefits-service_block > div .img {
	width: 120px;
	flex-shrink: 0;
}
.benefits-service_block > div img {
	object-fit: cover;
	height: 100%;
}

.benefits-service_block .ttl {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.7;
}

.benefits-service_block .ttl span {
	display: inline-block;
	margin: 0 12px 8px 0;
	padding: 4px 12px;
	color: #fff;
	font-size: 1.3rem;
	background: var(--blue);
}

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

	.benefits-service_block {
		margin: 20px 0 0;
	}

	.benefits-service_block > div {
		gap: 20px;
		margin: 20px 0 16px;
	}

	.benefits-service_block > div .img {
		width: 120px;
		height: 120px;
	}

	.benefits-service_block .ttl {
		margin: unset;
		font-size: 1.6rem;
	}

	.benefits-service_block .ttl span {
		padding: 2px 14px;
		font-size: 1.2rem;
	}

}


/* BENEFITS 01以外 */
.benefits-point {
	position: relative;
	margin: 40px 0 0;
	padding: 60px 20px 20px;
	border: solid 1px var(--blue);
}

.benefits-point .list-base {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	font-weight: 500;
}

.benefits-point .list-base li::before {
	background: var(--blue);
}

.benefits-point_ttl {
	position: absolute;
	top: 0;
	left: 0;
	padding: 4px 10px;
	color: #fff;
	font-weight: 600;
	background: var(--blue);
}

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

	.benefits-point_ttl {
		font-size: 1.5rem;
	}

	.service-area .more-btn {
		margin-top: unset;
	}

}


/* 動く文字 */
.benefits-item::before {
	position: absolute;
	top: 40px;
	left: 0;
	font-size: 25rem;
	overflow: hidden;
	white-space: nowrap;
	color: #C5E1F2;
	font-weight: bold;
	font-family: var(--Montserrat);
	animation: marquee 120s linear infinite;
	letter-spacing: 1rem;
	mix-blend-mode: multiply;
	z-index: 1;
}

.benefits-item.home-solar-power::before {
	content: "BENEFITS BENEFITS BENEFITS";
}

@keyframes marquee {
  0% {
	-moz-transform: translateX(0%);
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
  }
  100% {
	-moz-transform: translateX(-75%);
	-webkit-transform: translateX(-75%);
	transform: translateX(-75%);
  }
}

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

	.benefits-item::before {
		top: 15px;
		font-size: 9rem;
		letter-spacing: 0.05rem;
	}

}


/* -----------------------------------------------------------
service-area
-------------------------------------------------------------- */
.service-area {
	position: relative;
	padding: 0 0 0;
	overflow: hidden;
}

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


/* 動く文字 */
/*.service-area::before {
	content: "SOLAR POWER SOLAR POWER SOLAR POWER";
	position: absolute;
	top: 64px;
	left: 0;
	font-size: 25rem;
	overflow: hidden;
	white-space: nowrap;
	color: var(--light-purple);
	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;
	margin: 0 0 100px;
}

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

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

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

/* 01 Solar Grid Scan */
.panel-area {
	position: absolute;
    top: 50px;
    height: 600px;
    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: -40px;
	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: 40px 0 0;
	}

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

    .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: 30px;
		margin: 0 0 40px;
	}

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

	.service-area .col2 .txt-box {
		width: unset;
	}
    
    /* 01 Solar Grid Scan */
    .panel-area {
        top: 380px;
        height: 400px;
    }
    .grid-scan {
    }
    .grid-light {
        width: 100px;
        height: 100px;
        right: -10px;
        top: -20px;
    }

}


/* メインサービス */
.service-area .big-img .img {
	height: 500px;
}
.service-area .big-img img {
	object-fit: cover;
	height: 100%;
}

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

	/* メインサービス */
	.service-area .big-img .img {
		height: 250px;
	}

}


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

.service-area .head-ttl-wrap .head-ttl {
	font-size: 5rem;
	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;
	left: -40px;
	z-index: -1;
}

.service-area .head-ttl-wrap .deco p {
	color: #dfeef7;
	font-size: 12rem;
	font-weight: 700;
	line-height: 1;
}

.service-area .point-cont {
	background: #fff;
	border: unset;
}

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

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

	.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: -10px;
	}

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

}


/* メインコンテンツベース */
.service-area .service-cont-base-wrap {
	margin: 56px 0 0;
	padding: 40px;
	background: var(--blue) url("../img/area_service-cont-base-wrap_bg-person.jpg") no-repeat top right;
	background-size: contain;
}

.service-area .service-cont-block {
	padding: 100px 0;
	background: var(--light-blue);
}

.service-area .service-ttl {
	position: relative;
	margin: 0 0 12px;
	padding: 4px;
	color: #fff;
	font-size: 3.2rem;
	font-weight: 600;
	z-index: 1;
}
.service-area .service-ttl::after {
	content: "";
	position: absolute;
	top: 4px;
	left: -40px;
	background: var(--dark-blue02);
	width: 330px;
	height: 64px;
	z-index: -1;
}


/* 法人の場合 */
.service-area .service-cont-base-wrap.business {
	background: var(--dark-blue03) url("../img/area_service-cont-base-wrap_bg-business.jpg") no-repeat top right;
}

.service-area .service-cont-base-wrap.business .service-ttl::after {
	background: #001345;
	width: 460px;
}


.service-area .service-cont-base {
	position: relative;
	margin: 40px 0 0;
	padding: 40px;
	background: #fff;
}

.service-area .service-cont-base .intro-area {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.service-area .service-cont-base .intro-area .ttl-box .service-cont-ttl {
	display: inline-block;
	position: relative;
	margin: 14px 0 28px;
	padding: 0 0 20px;
	color: var(--blue);
	font-size: 3.2rem;
	font-weight: 600;
}
.service-area .service-cont-base .intro-area .ttl-box .service-cont-ttl::before {
	content: "";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--blue);
}
.service-area .service-cont-base .intro-area .ttl-box .service-cont-ttl::after {
	content: "";
	position: absolute;
	left: -40px;
	bottom: 0;
	width: 56px;
	height: 1px;
	background: var(--blue);
}

.service-area .service-cont-base .intro-area .ttl-box .service-cont-sub-ttl {
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 2;
}

.service-area .service-cont-base .intro-area .ttl-box .service-cont-main-ttl {
	font-size: 4rem;
	font-weight: 600;
	line-height: 1.6;
}

.service-area .service-cont-base .intro-area .ttl-box .num {
	margin: 0 0 4px;
	color: var(--dark-yellow);
	font-weight: 700;
	line-height: 1;
}

.service-area .service-cont-base .intro-area {
	display: flex;
	gap: 50px;
}
.service-area .service-cont-base .intro-area .img {
	width: 400px;
	height: 300px;
	flex-shrink: 0;
}
.service-area .service-cont-base .intro-area img {
	object-fit: cover;
	height: 100%;
}

.service-area .service-cont-base .txt-wrap {
	margin: 56px 0 0;
}


/* オール電化のサービス紹介の場合 */
.service-area .service-cont-base.all-electric-sub {
	background: var(--light-blue);
	box-shadow: unset;
}

.service-area .service-cont-base.all-electric-sub .choose-cont-detail {
	background: #fff;
}

.service-area .service-cont-base.all-electric-sub .choose-cont-detail.manufacturer {
	border: unset;
}

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

	.service-area .service-cont-base-wrap {
		margin: 32px -20px 0;
		padding: 20px;
		background-size: 170%;
	}

	.service-area .service-cont-base {
		margin: 20px 0 0;
		padding: 20px 20px 32px;
	}

	.service-area .service-cont-block {
		padding: 40px 0;
	}

	.service-area .service-ttl {
		margin: 0 0 12px;
		padding: 4px;
		font-size: 2.2rem;
	}
	.service-area .service-ttl::after {
		left: -40px;
		width: 245px;
		height: 44px;
	}

	/* 法人の場合 */
	.service-area .service-cont-base-wrap.business {
		background-size: 170%;
	}

	.service-area .service-cont-base-wrap.business .service-ttl::after {
		width: 340px;
	}

	.service-area .service-cont-base .intro-area {
		gap: unset;
		display: block;
		padding: unset;
		margin: 0 auto;
	}

	.service-area .service-cont-base .intro-area .ttl-box .service-cont-ttl {
		margin: 12px 0 20px;
		padding: 0 0 16px;
		font-size: 2rem;
		font-weight: 700;
	}
	.service-area .service-cont-base .intro-area .ttl-box .service-cont-ttl::before {
		left: -20px;
		width: calc(100% + 20px);
	}
	.service-area .service-cont-base .intro-area .ttl-box .service-cont-ttl::after {
		content: unset;
	}

	.service-area .service-cont-base .intro-area .ttl-box .service-cont-main-ttl {
		margin: 0 0 20px;
		font-size: 2.4rem;
	}

	.service-area .service-cont-base .intro-area .ttl-box .service-cont-sub-ttl {
		margin: 0 0 2px;
		font-size: 1.6rem;
		line-height: 1.7;
	}

	.service-area .service-cont-base .intro-area .img {
		width: 100%;
		height: 250px;
	}

	.service-area .service-cont-base .txt-wrap {
		margin: 20px 0 0;
	}

}


/* ポイント */
.service-area .point-cont {
	position: relative;
	margin: 56px 0 0;
	padding: 20px;
	border: solid 1px var(--blue);
}

.service-area .point-cont .img-wrap {
	position: absolute;
	right: 40px;
}
.service-area .point-cont .img-wrap img {
	object-fit: cover;
	height: 100%;
}

/* 太陽光発電OPTIMAX */
.service-area .home-solar-power .point-cont .img-wrap {
	top: -30px;
	right: 70px;
	width: 280px;
}

/* 見守りサービス */
.service-area .monitoring-servic .point-cont .img-wrap {
	top: -20px;
	right: 70px;
	width: 260px;
}

/* 家庭用蓄電池 */
.service-area .home-battery-storage .point-cont .img-wrap {
	top: -30px;
	right: 100px;
	width: 240px;
}

/* オール電化 */
.service-area .all-electric .point-cont .img-wrap {
	top: -10px;
	right: 90px;
	width: 250px;
}

/* V2H */
.service-area .v2h .point-cont .img-wrap {
	top: 30px;
	right: 80px;
	width: 280px;
}

/* 法人向け事業用太陽光発電 */
.service-area .corporate-solar-power .point-cont .img-wrap {
	top: -20px;
	right: 60px;
	width: 280px;
}

/* 業務用エコキュート */
.service-area .ecocute .point-cont .img-wrap {
	top: -40px;
	right: 100px;
	width: 280px;
}

/* EV充電スタンド */
.service-area .ev .point-cont .img-wrap {
	top: -20px;
	right: 70px;
	width: 300px;
}

.service-area .point-cont .point-ttl {
	display: flex;
	align-items: center;
	gap: 12px;
}

.service-area .point-cont .point-ttl span {
	display: block;
	position: relative;
	padding: 8px 12px 6px;
	color: #fff;
	font-family: var(--Montserrat);
	font-weight: 700;
	line-height: 1;
	background: var(--blue);
	border-radius: 16px;
}

.service-area .point-cont .point-ttl p {
	color: var(--blue);
	font-size: 2.2rem;
	font-weight: 700;
}

.service-area .point-cont .point-list {
	margin: 8px 0 0;
}

.service-area .point-cont .point-list .point-list_item {
	font-size: 1.8rem;
}

.service-area .list-base li::before {
	top: 17px;
	background: var(--blue);
}

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

	.service-area .point-cont {
		margin: 64px 0 0;
		padding: 100px 20px 20px;
	}

	.service-area .point-cont .img-wrap {
		right: unset;
		left: 50%;
		transform: translateX(-50%);
		width: 150px;
		height: 100px;
	}

	/* 太陽光発電OPTIMAX */
	/* 見守りサービス */
	/* オール電化 */
	/* V2H */
	/* 法人向け事業用太陽光発電 */
	.service-area .home-solar-power .point-cont .img-wrap,
	.service-area .monitoring-servic .point-cont .img-wrap,
	.service-area .all-electric .point-cont .img-wrap,
	.service-area .corporate-solar-power .point-cont .img-wrap,
	.service-area .ecocute .point-cont .img-wrap {
		top: -40px;
		width: 150px;
	}

	/* 家庭用蓄電池 */
	.service-area .home-battery-storage .point-cont .img-wrap {
		top: -40px;
		width: 100px;
	}

	/* V2H */
	.service-area .v2h .point-cont .img-wrap {
		top: -35px;
		width: 200px;
	}

	/* EV充電スタンド */
	.service-area .ev .point-cont .img-wrap {
		top: -30px;
		width: 170px;
	}

	.service-area .point-cont .point-ttl {
		flex-direction: column;
		gap: unset;
	}

	.service-area .point-cont .point-ttl p {
		font-size: 1.8rem;
	}

	.service-area .point-cont .point-list .point-list_item {
		font-size: 1.6rem;
	}

	.service-area .list-base li::before {
		top: 14px;
	}

}


/* 選び方 */
.service-area .choose-cont {
	position: relative;
	margin: 56px 0 0;
}

.service-area .choose-cont .img-wrap {
	position: absolute;
	top: -60px;
	right: 100px;
	width: 250px;
}
.service-area .choose-cont .img-wrap img {
	object-fit: cover;
	height: 100%;
}

.service-area .choose-cont .choose-ttl {
	padding: 16px 20px;
	color: #fff;
	font-size: 2.6rem;
	font-weight: 700;
	background: var(--blue);
}

.service-area .choose-cont-detail {
	margin: 20px 0 0;
	padding: 20px;
	background: var(--light-blue);
}

.service-area .choose-cont-detail .choose-cont-detail-ttl {
	margin: 0 0 16px;
	padding: 0 0 4px;
	font-size: 2.2rem;
	font-weight: 700;
	border-bottom: solid 1px var(--blue);
}

.service-area .choose-cont-detail .choose-cont-detail-ttl span {
	position: relative;
	top: 1px;
	padding-right: 10px;
	font-family: var(--Montserrat);
	color: var(--blue);
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 1;
}

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

	.service-area .choose-cont {
		margin: 40px 0 0;
		padding: unset;
		border: unset;
	}

	.service-area .choose-cont .img-wrap {
		top: -50px;
		right: unset;
		left: 50%;
		transform: translateX(-50%);
		width: 130px;
		height: 100px;
	}

	.service-area .choose-cont .choose-ttl {
		margin: -20px -20px 0;
		padding: 10px 32px;
		font-size: 1.8rem;
		line-height: 1.5;
	}

	.service-area .choose-cont-detail {
		margin: 20px 0 0;
		padding: 20px;
	}

	.service-area .choose-cont-detail .choose-cont-detail-ttl {
		padding: 0 0 12px;
		font-size: 1.8rem;
		line-height: 1.5;
	}

	.service-area .choose-cont-detail .choose-cont-detail-ttl span {
		font-size: 2.2rem;
	}

}


/* 取り扱いメーカー（一例） */
.service-area .choose-cont-detail.manufacturer {
	margin: 40px 0 0;
	background: unset;
	border: solid 1px var(--blue);
}

.service-area .choose-cont-detail.manufacturer .manufacturer-ttl {
	margin: 0 0 8px;
	font-weight: 500;
}

.service-area .choose-cont-detail.manufacturer .manufacturer-list {
	display: flex;
	align-items: center;
	gap: 32px;
}

.service-area .choose-cont-detail.manufacturer .manufacturer-list .manufacturer-list_item {
	width: 160px;
}

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

	.service-area .choose-cont-detail.manufacturer {
		margin: 32px 0 0;
	}

	.service-area .choose-cont-detail.manufacturer .manufacturer-list {
		flex-wrap: wrap;
		gap: 20px;
	}

	.service-area .choose-cont-detail.manufacturer .manufacturer-list .manufacturer-list_item {
		width: calc((100% / 2) - 10px);
	}

}


/* -----------------------------------------------------------
	system-area
-------------------------------------------------------------- */
.system-area {
	position: relative;
	padding: 100px 0;
}

.system-area .inner {
	position: relative;
}

.system-area .txt-box {
	position: relative;
	margin-inline: auto;
	width: 670px;
}

.system-area .section-page-ttl,
.system-area .ttl-l {
	margin-inline: auto;
	text-align: center;
}

.system-area .img-wrap .img {
	position: absolute;
}

.system-area .img-wrap .img01 {
	top: 150px;
	left: -40px;
	width: 250px;
}

.system-area .img-wrap .img02 {
	top: 0;
	right: 100px;
	width: 150px;
}

.system-area .img-wrap .img03 {
	top: 400px;
	right: -40px;
	width: 250px;
}

.system-area .img-wrap img {
	object-fit: cover;
	height: 100%;
}


/* CVエリア */
.system-area .cv-block {
	margin: 80px 0 0;
}

.system-area .cv-block .cv-list {
	display: flex;
	gap: 40px;
}

.system-area .cv-block .cv-list_item {
	padding: 28px 40px;
	width: calc(100% / 2);
	background: var(--light-blue);
	text-align: center;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.02);
}

.system-area .cv-block .cv-list_item .txt {
	font-size: 1.8rem;
	font-weight: 700;
}

.system-area .cv-block .cv-list_item .txt.tel {
	position: relative;
	top: 4px;
}

/* TEL */
.system-area .cv-block .cv-list_item .tel-box .flex {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 3px 0 0;
}
.system-area .cv-block .cv-list_item .tel-box .flex .img {
	position: relative;
	top: 13px;
	width: 60px;
}
.system-area .cv-block .cv-list_item .tel-box .num {
	font-size: 4.2rem;
	font-weight: 600;
	font-family: var(--Montserrat);
	line-height: 1.5;
}
.system-area .cv-block .cv-list_item .tel-box .tel-txt {
	position: relative;
	font-size: 1.5rem;
}

.system-area .cv-block .cv-list_item .cv-btn-base {
	margin: 8px auto 0;
	width: unset;
}

/* メール */
.system-area .cv-block .cv-list_item .cv-btn-base a {
	margin-inline: auto;
	font-size: 2rem;
	width: 400px;
}

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

	.system-area {
		padding: 40px 0;
		text-align: unset;
	}

	.system-area .txt-box {
		margin-inline: unset;
		width: 100%;
	}

	.system-area .section-page-ttl,
	.system-area .ttl-l {
		margin-inline: unset;
		text-align: unset;
	}

	.system-area .img-wrap .img {
		position: relative;
	}

	.system-area .img-wrap img {
		margin: 0 0 24px;
		object-fit: cover;
		height: 100%;
	}

	.system-area .cv-block {
		margin: 24px 0 0;
	}

	.system-area .cv-block .cv-list {
		flex-direction: column;
		gap: 20px;
	}

	.system-area .cv-block .cv-list_item {
		padding: 20px;
		width: 100%;
	}

	.system-area .cv-block .cv-list_item .txt {
		font-size: 1.6rem;
	}

	/* TEL */
	.system-area .cv-block .cv-list_item .tel-box .flex {
		justify-content: center;
		margin: unset;
	}
	.system-area .cv-block .cv-list_item .tel-box {
		margin: unset;
	}
	.system-area .cv-block .cv-list_item .tel-box .flex .img {
		top: 6px;
		width: 40px;
	}
	.system-area .cv-block .cv-list_item .tel-box .num {
		font-size: 3.2rem;
		line-height: 1.5;
	}
	.system-area .cv-block .cv-list_item .tel-box .tel-txt {
		font-size: 1.3rem;
		font-family: var(--notoSerifJP);
	}

	/* メール */
	.system-area .cv-block .cv-list_item .cv-btn-base a {
		font-size: 1.8rem;
		width: 100%;
		height: 60px;
	}
	
}


/* -----------------------------------------------------------
	flow-area
-------------------------------------------------------------- */
#wrapper {
	overflow: unset;
}

/* 固定メニュー */
.fixed-col2-area .fixed-detail-cont {
	display: flex;
	align-items: flex-start;
	gap: 150px;
	position: relative;
}

.fixed-col2-area .left-block {
	position: sticky;
	top: 140px;
	width: 400px;
	flex-shrink: 0;
}

.fixed-col2-area .left-block .fixed-menu-list {
	margin: 56px 0 0;
}

.fixed-col2-area .left-block .fixed-menu-list .fixed-menu-list_item {
	margin: 24px 0 0;
}

.fixed-col2-area .left-block .fixed-menu-list .fixed-menu-list_item a {
	display: block;
	position: relative;
	padding-left: 16px;
	font-weight: 500;
	line-height: 1.8;
}

.fixed-col2-area .left-block .fixed-menu-list .fixed-menu-list_item a::before {
	content: "";
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background: var(--gray02);
	transition: .3s;
}

.fixed-col2-area .left-block .fixed-menu-list .fixed-menu-list_item a:hover {
	color: var(--blue);
}

.fixed-col2-area .left-block .fixed-menu-list .fixed-menu-list_item a:hover::before {
	background: var(--blue);
}

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

	/* 固定メニュー */
	.fixed-col2-area .fixed-detail-cont {
		flex-direction: column;
		gap: unset;
	}

	.fixed-col2-area .left-block {
		position: unset;
		top: unset;
		width: unset;
	}

}


.flow-area {
	padding: 100px 0;
	background: var(--light-purple);
}

.flow-area .intro-area {
	margin: 0 0 56px;
}

.flow-area .flow-detail {
	position: relative;
	padding: 100px 40px 40px;
	background: #fff;
}

.flow-area .flow-detail.flow01 {
	padding-top: 64px;
}

.flow-area .flow-detail:last-of-type::after {
	content: unset;
}

.flow-area .flow-detail::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -49px;
	width: 100%;
	height: 50px;
	background: #fff;
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	z-index: 1;
}

.flow-area .flow-detail:nth-child(odd)::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -49px;
	width: 100%;
	height: 50px;
	background: #EFF1F9;
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	z-index: 1;
}
.flow-area .flow-detail:nth-child(odd) {
	background: #EFF1F9;
}

.flow-area .flow-detail .ttl-wrap {
	margin: 0 0 24px;
	text-align: center;
}

.flow-area .flow-detail .step-num {
	display: inline-block;
	margin: 0 0 12px;
	padding: 10px 16px 8px;
	color: #fff;
	font-size: 2rem;
	font-family: var(--Montserrat);
	font-weight: 700;
	background: var(--blue);
	border-radius: 20px;
}

.flow-area .flow-detail .icon-img {
	margin: 32px 0;
}
.flow-area .flow-detail img {
	width: unset;
}

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

	.flow-area {
		padding: 40px 0;
	}

	.flow-area .intro-area {
		margin: 0 0 40px;
	}

	.flow-area .right-block {
		margin: 24px 0 0;
	}

	.flow-area .flow-detail {
		position: relative;
		padding: 70px 20px 20px;
		background: #fff;
	}

	.flow-area .flow-detail.flow01 {
		padding-top: 32px;
	}

	.flow-area .flow-detail:first-of-type {
		padding-top: 32px;
	}

	.flow-area .flow-detail::after {
		bottom: -39px;
		height: 40px;
	}

	.flow-area .flow-detail:nth-child(even)::after {
		bottom: -39px;
		height: 40px;
	}

	.flow-area .flow-detail .ttl-wrap {
		margin: 0 0 24px;
		text-align: center;
	}

	.flow-area .flow-detail .step-num {
		font-size: 1.6rem;
	}

	.flow-area .flow-detail .icon-img {
		margin: 24px auto;
	}

	.flow-area .flow-detail.flow01 .icon-img {
		width: 180px;
	}
	.flow-area .flow-detail.flow02 .icon-img {
		width: 100px;
	}
	.flow-area .flow-detail.flow03 .icon-img {
		width: 130px;
	}
	.flow-area .flow-detail.flow04 .icon-img {
		width: 100px;
	}
	.flow-area .flow-detail.flow05 .icon-img {
		width: 100px;
	}

	.flow-area .flow-detail img {
		width: 100%;
	}

}


/* CVエリア */
.flow-area .cv-block .cv-list_item {
	margin: 32px 0 0;
	text-align: center;
}

.flow-area .cv-block .cv-list_item + .cv-list_item {
	padding: 32px 0 0;
	border-top: solid 1px var(--lightgray02);
}

.flow-area .cv-block .cv-list_item .txt {
	font-size: 1.8rem;
	font-weight: 700;
}

.flow-area .cv-block .cv-list_item .txt.tel {
	position: relative;
	top: 4px;
}

/* TEL */
.flow-area .cv-block .cv-list_item .tel-box .flex {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 3px 0 0;
}
.flow-area .cv-block .cv-list_item .tel-box .flex .img {
	position: relative;
	top: 13px;
	width: 60px;
}
.flow-area .cv-block .cv-list_item .tel-box .flex img {
	object-fit: cover;
	width: 100%;
}
.flow-area .cv-block .cv-list_item .tel-box .num {
	font-size: 4.2rem;
	font-weight: 600;
	font-family: var(--Montserrat);
	line-height: 1.5;
}
.flow-area .cv-block .cv-list_item .tel-box .tel-txt {
	position: relative;
	font-size: 1.5rem;
}

.flow-area .cv-block .cv-list_item .cv-btn-base {
	margin: 8px auto 0;
	width: unset;
}

/* メール */
.flow-area .cv-block .cv-list_item .cv-btn-base a {
	margin-inline: auto;
	font-size: 2rem;
	width: 340px;
}

.flow-area .cv-block .cv-list_item .cv-txt-link {
	margin: 24px 0 0;
}
.flow-area .cv-block .cv-list_item .cv-txt-link .txt-link-icon::after {
	top: 2px;
}

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

	.flow-area .cv-block .cv-list_item {
		margin: 24px 0 0;
	}

	.flow-area .cv-block .cv-list_item + .cv-list_item {
		padding: 24px 0 0;
	}

	.flow-area .cv-block .cv-list_item .txt {
		font-size: 1.6rem;
	}

	/* TEL */
	.flow-area .cv-block .cv-list_item .tel-box .flex {
		justify-content: center;
		margin: unset;
	}
	.flow-area .cv-block .cv-list_item .tel-box {
		margin: unset;
	}
	.flow-area .cv-block .cv-list_item .tel-box .flex .img {
		top: 6px;
		width: 40px;
	}
	.flow-area .cv-block .cv-list_item .tel-box .num {
		font-size: 3.2rem;
		line-height: 1.5;
	}
	.flow-area .cv-block .cv-list_item .tel-box .tel-txt {
		font-size: 1.3rem;
		font-family: var(--notoSerifJP);
	}

	/* メール */
	.flow-area .cv-block .cv-list_item .cv-btn-base a {
		font-size: 1.6rem;
		width: 100%;
		height: 60px;
	}
	
}


/* 設備工事サービス一例 */
.flow-area .works-list-area {
	margin: 100px 0 0;
}

/* メインコンテンツベース */
.flow-area .works-cont-base {
	position: relative;
	margin: 40px 0 0;
	padding: 40px;
	background: #fff;
}

.flow-area .works-cont-ttl {
	margin: 0 0 16px;
	font-size: 3.2rem;
	font-weight: 600;
	line-height: 1.5;
}

.flow-area .works-cont-base .col2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}

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

	.flow-area .works-list-area {
		margin: 40px 0 0;
	}

	.flow-area .works-cont-base {
		margin: 20px 0 0;
		padding: 20px;
	}

	.flow-area .works-cont-ttl {
		margin: 0 0 8px;
		font-size: 2.2rem;
	}

	.flow-area .works-cont-base .col2 {
		flex-direction: column-reverse;
		gap: 20px;
		margin: unset;
	}

}


/* ビフォーアフター画像 */
.flow-area .works-cont-base .col2 .img-wrap {
	display: flex;
	gap: 40px;
	width: 550px;
	flex-shrink: 0;
}

.flow-area .works-cont-base .col2 .img {
	position: relative;
	width: calc(100% / 2);
	height: 200px;
}
.flow-area .works-cont-base .col2 img {
	object-fit: cover;
	height: 100%;
}

.flow-area .works-cont-base .col2 .img .deco-ttl {
	position: absolute;
	top: 0;
	left: 0;
	padding: 3px 10px 0;
	color: #fff;
	font-size: 1.4rem;
	font-family: var(--Montserrat);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.7;
}

.flow-area .works-cont-base .col2 .before .deco-ttl {
	background: var(--dark-blue);
}

.flow-area .works-cont-base .col2 .after .deco-ttl {
	background: #FFC400;
}

.flow-area .works-cont-base .col2 .before {
	position: relative;
}

.flow-area .works-cont-base .col2 .before::after {
	content: "▶";
	position: absolute;
	top: 42%;
	right: -28px;
	color: var(--dark-blue);
	font-size: 18px;
}

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

	.flow-area .works-cont-base .col2 .img-wrap {
		flex-direction: column;
		width: 100%;
	}

	.flow-area .works-cont-base .col2 .img {
		width: 100%;
		height: 220px;
	}

	.flow-area .works-cont-base .col2 .img .deco-ttl {
		padding: 3px 8px 0;
		font-size: 1.2rem;
	}

	.flow-area .works-cont-base .col2 .before::after {
		content: "▼";
		top: 223px;
		right: 46%;
	}

}


/* -----------------------------------------------------------
	works-area
-------------------------------------------------------------- */
#cmn-page-works-area.works-area {
	position: relative;
	padding: 100px 0;
}
#cmn-page-works-area.works-area::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 533px;
	background: url(../img/cmn_works-area_bg.jpg) no-repeat center top;
	background-size: cover;
	z-index: -1;
}

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

.works-area .niwork-relation__scroll {
	position: relative;
	margin: 56px 0 0;
	z-index: 1;
}

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

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

	#cmn-page-works-area.works-area {
		padding: 40px 0;
	}
	#cmn-page-works-area.works-area::after {
		height: 458px;
	}

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

	.works-area .niwork-relation__scroll {
		margin: 40px 0 0;
	}

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

}


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

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

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

#cmn-page-works-area.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) {

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

}

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

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

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

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

}

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

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

	#cmn-page-works-area.works-area .intro-area {
		flex-direction: column;
		gap: unset;
	}

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

	#cmn-page-works-area.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;
	}

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

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

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

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

}


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

.support-area .intro-area .col2 {
	display: flex;
	gap: 64px;
}

.support-area .intro-area .col2 .img {
	width: 450px;
	flex-shrink: 0;
}
.support-area .intro-area .col2 img {
	object-fit: cover;
	height: 100%;
}

.niftarea {
	margin: 56px 0 0;
	padding: 20px;
	background: #fff;
}

.niftarea-prefectures__list {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.niftarea-prefectures__link {
	border: 1px solid var(--lightgray02);
	color: var(--cmnblack)!important;
	display: inline-block;
	font-weight: 400;
	padding: 12px 20px 12px 15px;
	position: relative;
	width: 110px;
	text-align: center;
}

.niftarea-prefectures__link:hover {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff!important;
}

.niftarea-prefectures__link::before {
	content: "\f105";
	color: var(--blue);
	font: 900 1rem/1 var(--webicon);
	right: 7px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	transition: .5s;
}

.niftarea-prefectures__link:hover::before {
	color: #fff;
}

.niftarea-prefectures__ttl {
	display: none;
}

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

	.support-area {
		padding: 40px 0;
	}

	.support-area .intro-area .col2 {
		flex-direction: column;
		gap: 40px;
	}

	.support-area .intro-area .col2 .img {
		margin: 24px auto;
		width: 100%;
	}

	.niftarea {
		margin: 40px 0 0;
	}

	/* .niftarea-prefectures {
		margin: 25px 0 0;
	} */

	.niftarea-prefectures__ttl {
		margin-bottom: 15px;
	}
	
	.niftarea-prefectures__ttl a {
		font-size: 1.9rem;
	}

	.niftarea-prefectures__item {
		width: calc((100% / 3) - 10px);
	}

	.niftarea-prefectures__link {
		font-size: 1.4rem;
		padding: 10px 13px 10px 8px;
		width: 100%;
	}

	.niftarea-prefectures__link::before {
		right: 4px;
	}

}


/* -----------------------------------------------------------
	free-area
-------------------------------------------------------------- */
.free-area {
	padding: 100px 0;
}

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

	.free-area {
		padding: 40px 0;
	}

}


/* -----------------------------------------------------------
	エリアCMS詳細   当道府県＆市区町村＆駅  共通
-------------------------------------------------------------- */
/* -----------------------------------------------------------
	niareadetail-mv
-------------------------------------------------------------- */
.niareadetail-mv {
	position: relative;
	background-color: var(--cmnbg);
	height: 600px;
	display: flex;
	padding: 0 0 0 150px;
	flex-direction: column;
	justify-content: center;
}

.niareadetail-mv__ttl {
	font-weight: bold;
	font-size: 4rem;
}

.niareadetail-mv .h1-area {
	position: absolute;
	top: 30px;
	right: 30px;
	color: var(--gray);
	font-size: 1.2rem;
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 450px;
	margin: 0 0 0 auto;
	padding: 0 0 3px;
}

@media screen and (max-width: 768px) {
	.niareadetail-mv {
		height: 300px;
		padding: 0 20px;
	}

	.niareadetail-mv__ttl {
		font-size: 2.5rem;
	}
}

/* -----------------------------------------------------------
	sorting1  出し分け①
-------------------------------------------------------------- */
.niareadetail-sorting1 {}

@media screen and (max-width: 768px) {
	.niareadetail-sorting1 {}
}

/* -----------------------------------------------------------
	sorting2  出し分け②
-------------------------------------------------------------- */
.niareadetail-sorting2 {}

@media screen and (max-width: 768px) {
	.niareadetail-sorting2 {}
}

/* -----------------------------------------------------------
	sorting3  出し分け③
-------------------------------------------------------------- */
.niareadetail-sorting3 {}

@media screen and (max-width: 768px) {
	.niareadetail-sorting3 {}
}

/* -------------------------------------------------------------
	フルリッチ
-------------------------------------------------------------- */
.niarea-fullrich h1,
.niarea-fullrich h2,
.niarea-fullrich h3,
.niarea-fullrich h4 {
	font-weight: bold;
	line-height: 1.4;
}

.niarea-fullrich h1 {
	font-size: 2.7rem;
	font-weight: bold;
	border-bottom: 6px solid var(--main);
	padding: 0 0 15px;
	margin: 50px 0 30px;
}

.niarea-fullrich h2 {
	background: var(--main);
	color: #fff;
	font-size: 2.6rem;
	margin: 50px 0 30px;
	padding: 10px 20px 12px;
	position: relative;
	letter-spacing: .05em;
}

.niarea-fullrich h3 {
	border-bottom: dotted 3px var(--main);
	color: var(--main);
	margin: 40px 0 30px;
	padding: 0 0 10px;
	font-size: 2.4rem;
	letter-spacing: .05em;
}

.niarea-fullrich h4 {
	margin: 30px 0 20px;
	padding: 4px 0 0 16px;
	font-size: 2.3rem;
	position: relative;
}

.niarea-fullrich h4::before {
	background: var(--main);
	position: absolute;
	top: 2px;
	left: 0;
	display: block;
	content: '';
	width: 6px;
	height: 100%;
}

.niarea-fullrich img {
	max-width: 100%;
	height: auto;
	display: inline-block;
}

.niarea-fullrich a:link {
	color: var(--link);
	display: inline-block;
	text-decoration: underline;
}

.niarea-fullrich p {
	margin: 1em 0;
}

@media screen and (max-width: 768px) {
	.niarea-fullrich {
		margin-top: 20px;
	}

	.niarea-fullrich h1,
	.niarea-fullrich h2,
	.niarea-fullrich h3,
	.niarea-fullrich h4 {
		line-height: 1.5;
	}

	.niarea-fullrich h1 {
		border-bottom-width: 4px;
		font-size: 2.3rem;
		line-height: 1.5;
		margin: 30px 0 20px;
		padding: 0 0 10px;
	}

	.niarea-fullrich h2 {
		margin: 30px 0 20px;
		padding: 8px 15px 10px;
		font-size: 2rem;
	}

	.niarea-fullrich h3 {
		margin: 30px 0;
		padding: 0 0 10px;
		font-size: 1.9rem;
	}

	.niarea-fullrich h4 {
		margin: 30px 0 20px;
		padding: 0 0 0 12px;
		font-size: 1.8rem;
	}

	.niarea-fullrich h4::before {
		top: 0;
		width: 5px;
	}

	.niarea-fullrich img {
		max-width: 100%;
	}
}

/* -----------------------------------------------------------
	エリアCMS詳細   都道府県のみ
-------------------------------------------------------------- */
/* -----------------------------------------------------------
	niareadetail-support
-------------------------------------------------------------- */
.niareadetail-support {
	margin: 100px 0 0;
}

.niareadetail-support__ttl {
	font-size: 3.5rem;
	font-weight: bold;
	margin: 0 0 30px;
}

.niareadetail-support__region {
	background: var(--cmnbg);
	font-size: 2rem;
	font-weight: bold;
	padding: 15px 20px;
}

.niareadetail-support__prefectures {
	margin: 30px 0 0;
}

.niareadetail-support__list {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

[data-detailsupport="station"] {
	margin: 15px 0 0;
}

.niareadetail-support__link {
	border: 1px solid var(--border2);
	color: var(--cmnblack) !important;
	display: inline-block;
	font-weight: 400;
	padding: 12px 20px 12px 15px;
	position: relative;
	min-width: 106px;
	text-align: center;
}

.niareadetail-support__link:hover {
	background: var(--link);
	border-color: var(--link);
	color: #fff !important;
}

.niareadetail-support__link::before {
	content: "\f054";
	color: var(--link);
	font: 900 1rem/1 var(--webicon);
	right: 7px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	transition: .5s;
}

.niareadetail-support__link:hover::before {
	color: #fff;
}

@media screen and (max-width: 768px) {
	.niareadetail-support {
		margin: 50px 0 0;
	}

	.niareadetail-support__ttl {
		font-size: 2.5rem;
	}

	.niareadetail-support__region {
		font-size: 2rem;
		padding: 13px 0px 11px 15px;
	}

	.niareadetail-support__prefectures {
		margin: 25px 0 0;
	}

	.niareadetail-support__link {
		font-size: 1.5rem;
		padding: 10px 13px 10px 8px;
		min-width: 100px;
	}

	.niareadetail-support__link::before {
		right: 4px;
	}
}