@charset "utf-8";

/* -----------------------------------------------------------
	共通
-------------------------------------------------------------- */
.header-no-fixed {
	position: relative;
	z-index: 2;
}

#home-solar-power .page-mv-area.wide,
#home-battery-storage .page-mv-area.wide,
#all-electric .page-mv-area.wide,
#v2h .page-mv-area.wide,
#corporate-solar-power .page-mv-area.wide,
#flow .page-mv-area.wide {
	margin: unset;
}

.page-mv-area::after {
	content: unset;
}

#wrapper {
	overflow: unset;
}

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

.about #page-top,
.sustainability #page-top {
	bottom: 20px;
}


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


/* 固定メニュー */
.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) {

	/* #home-solar-power .page-mv-area.wide,
	#home-battery-storage .page-mv-area.wide,
	#all-electric .page-mv-area.wide,
	#v2h .page-mv-area.wide,
	#corporate-solar-power .page-mv-area.wide,
	#flow .page-mv-area.wide {
		margin: -60px 0 0;
	} */

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


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

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

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

}


/* -----------------------------------------------------------
	breadcrumbs & h1-area
-------------------------------------------------------------- */
/*#home-solar-power .breadcrumbs.page.wide,
#home-battery-storage .breadcrumbs.page.wide,
#all-electric .breadcrumbs.page.wide,
#v2h .breadcrumbs.page.wide,
#corporate-solar-power .breadcrumbs.page.wide,
#flow .breadcrumbs.page.wide {
	top: 590px;
}

#home-solar-power .h1-area.wide,
#home-battery-storage .h1-area.wide,
#all-electric .h1-area.wide,
#v2h .h1-area.wide,
#corporate-solar-power .h1-area.wide,
#flow .h1-area.wide {
	top: 580px;
}

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

	#home-solar-power .h1-area.wide,
	#home-battery-storage .h1-area.wide,
	#all-electric .h1-area.wide,
	#v2h .h1-area.wide,
	#corporate-solar-power .h1-area.wide,
	#flow .h1-area.wide {
		top: 360px;
	}

}*/


/* -----------------------------------------------------------
	ナビ
-------------------------------------------------------------- */
#menu-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	background: var(--light-blue);
	transition: all 0.3s ease;
}
#menu-box.is-fixed {
	box-shadow: 0 3px 20px -2px rgba(0,0,0,0.1);
}

#menu-box .service-nav-wrap {
	display: flex;
	gap: 15px;
	margin: 0 0 0 auto;
}

#menu-box .cv-btn-area {
	display: flex;
	align-items: center;
	gap: 15px;
	/* width: 100%; */
	/* flex-shrink: 0; */
}

/* 無料見積相談 */
#menu-box .cv-btn-base.mail a {
	width: 120px;
	border-radius: unset;
	box-shadow: unset;
	letter-spacing: .02em;
}

/* 電話 */
#menu-box .tel-box {
	position: relative;
	top: -3px;
	text-align: center;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

#menu-box .tel-box {
	text-shadow: unset;
	white-space: nowrap;
}

#menu-box .tel-box .flex {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
}

#menu-box .tel-box .ttl {
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .04em;
}
#menu-box .tel-box .ttl {
	color: #333;
}

#menu-box .tel-box .num {
	font-size: 2.2rem;
	font-weight: 600;
	font-family: var(--Montserrat);
	letter-spacing: .03em;
	line-height: 1;
}

#menu-box .tel-box .num a {
	color: #333;
}

#menu-box .tel-box .img {
	position: relative;
	top: -2px;
	width: 28px;
}

#menu-box .service-nav {
	flex-shrink: 0;
}

#menu-box.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 16;
	width: 100%;
}
/* #menu-box .h-logo {
	display: none;
	transition: all 0.3s ease;
} */
#menu-box .h-logo {
	display: block;
	padding-left: 10px;
	flex-shrink: 0;
	width: 150px;
	line-height: 1;
	mix-blend-mode: multiply;
}
@media screen and (min-width: 769px) and (max-width: 1400px) {
	#menu-box.is-fixed .h-logo {
		width: 120px;
	}
}

.service-nav ul {
	display: flex;
}

.service-nav .main-menu-wrap ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	/*width: calc(100% / 8);*/
	text-align: center;
}
.service-nav .main-menu-wrap ul li+li::before {
	content: "";
	width: 1px;
	height: 20px;
	background: var(--lightgray02);
}

#flow .service-nav .main-menu-wrap ul li {
	/*width: calc(100% / 5);*/
}

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

.service-nav .main-menu-wrap ul li a {
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	width: 100%;
	position: relative;
	z-index: 1;
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.4;
	letter-spacing: .02em;
}
@media screen and (min-width: 769px) and (max-width: 1400px) {
	.service-nav .main-menu-wrap ul li a {
		padding: 0 15px;
	}
}

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

@media screen and (max-width: 768px){
	
	#menu-box {
		top: unset;
		box-shadow: none;
		height: auto;
	}
	#menu-box.is-fixed {
		box-shadow: none;
	}
	#menu-box .service-nav-wrap {
		display: block;
		margin: 0 auto;
		width: 100%;
	}
	#menu-box .h-logo{
		display: none;
	}
	#menu-box .service-nav-wrap .cv-btn-area {
		display: none;
	}
	.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 {
		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 .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 .inner {
		flex-direction: column;
		gap: unset;
	}

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


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

.about-area .col2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 64px;
	margin: 0 0 40px;
}

.about-area .col2 .img {
	width: 600px;
	flex-shrink: 0;
}

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

/* 家庭用太陽光発電 */
#home-solar-power .about-area .col2 img {
	object-fit: unset;
}

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

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

	.about-area .col2 {
		flex-direction: column;
		gap: 20px;
		margin: 0 0 24px;
	}

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

}


/* -----------------------------------------------------------
	benefits-area
-------------------------------------------------------------- */
/* .benefits-area {
	padding: 0 0 100px;
	background-color: var(--blue);
	background-image: url("../img/home-solar-power_benefits-area_bg.jpg"), url("../img/cmn_line-bg_benefits-area.png");
	background-repeat: no-repeat, no-repeat;
	background-size: unset;
	background-position: top right, bottom right;
	overflow: hidden;
} */

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

@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-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-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;
	}

}


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

/* 詳細 */
.reason-area .reason-detail + .reason-detail {
	margin: 100px 0 0;
}

.reason-area .reason-detail .num {
	position: relative;
}
.reason-area .reason-detail .num span {
	position: relative;
	display: inline-block;
	margin: 0 0 16px;
	padding: 2px 8px 2px 0;
	color: var(--blue);
	background: #fff;
	font-size: 1.6rem;
	font-family: var(--Montserrat);
	font-weight: 700;
	z-index: 1;
}
.reason-area .reason-detail .num::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 0;
	width: 100%;
	height: 1px;
	background: var(--lightgray02);
}

.reason-area .reason-detail .ttl-l span {
	display: block;
}

.reason-area .reason-detail .img {
	margin: 32px 0;
}

/* オール電化 */
#all-electric .reason-area #reason04.reason-detail .img {
	border: solid 1px var(--lightgray02);
}

.reason-area .reason-detail .custom-txt {
	letter-spacing: 0.08em;
}

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

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


	/* 詳細 */
	.reason-area .reason-detail + .reason-detail {
		margin: 40px 0 0;
	}

	.reason-area .reason-detail .img {
		margin: 24px 0;
	}

}


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

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


/* メインサービス */
.service-area .main-service-area {
	position: relative;
	padding: 100px 0 80px;
	background: var(--light-blue);
}
.service-area .main-service-area::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -99px;
	width: 100%;
	height: 100px;
	background: var(--light-blue);
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	z-index: 1;
}

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

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

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


	/* メインサービス */
	.service-area .main-service-area {
		padding: 40px 0;
	}
	.service-area .main-service-area::after {
		bottom: -49px;
		height: 50px;
	}

}


/* メインコンテンツベース */
.service-area .service-cont-base {
	position: relative;
	margin: 56px 0 0;
	padding: 40px;
	background: #fff;
	/* box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.02); */
}

/* その他サービスの場合 */
.service-area .other-service-area .service-cont-base {
	background: var(--light-blue);
	box-shadow: unset;
}

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

.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: 500px;
	height: 350px;
	flex-shrink: 0;
}
.service-area .service-cont-base .intro-area img {
	object-fit: cover;
	height: 100%;
}

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

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

	.service-area .service-cont-base .intro-area {
		gap: unset;
		display: block;
		padding: 0 0 20px;
		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 .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: 120px;
	width: 170px;
}

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

/* 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: 260px;
}

/* 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: 600;
	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;
}

.service-area .choose-cont-detail .custom-txt {
	letter-spacing: 0.09em;
}

@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);
	}

}


/* その他サービス */
.service-area .other-service-area {
	padding: 200px 0 100px;
	background: #fff;
}

.service-area .other-service-area_intro-ttl {
	margin: 0 0 100px;
	font-size: 5rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-align: center;
}

.service-area .other-service-area .more-btn {
	margin: 56px auto 16px;
}

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

	.service-area .other-service-area {
		padding: 100px 0 40px;
	}

	.service-area .other-service-area_intro-ttl {
		margin: 0 0 40px;
		font-size: 2.6rem;
		line-height: 1.7;
	}

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

}


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

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

.service-area .other-service-area .head-ttl-wrap .head-txt {
	font-size: 4rem;
	font-weight: 700;
	line-height: 1.7;
}

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

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

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

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

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

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

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

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

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

}


/* -----------------------------------------------------------
	system-area
-------------------------------------------------------------- */
.system-area {
	position: relative;
	padding: 100px 0;
	background: var(--lightgray);
}

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

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

.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: #fff;
	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;
	}
	
}


/* -----------------------------------------------------------
	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: 40px 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: 20px 0 0;
	}

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

	.works-area .niwork__list {
		display: flex;
		flex-direction: unset;
		flex-wrap: nowrap;
		gap: 20px;
		padding: 0 20px 10px;
	}

	.works-area .niwork__list .niwork__item {
		width: 300px;
		flex-shrink: 0;
	}

}


/* -----------------------------------------------------------
slider_bg
-------------------------------------------------------------- */
/* スライド画像 */
.slider_bg {
	position: relative;
	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 {
		background-size: cover;
		width: 100%;
		height: 350px;
	}

}


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

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

.flow-area .flow-detail:first-of-type {
	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(even)::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(even) {
	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 .right-block {
		margin: 40px 0 0;
	}

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

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


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

.faq-area .intro-area {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 100px;
}

.faq-area .faq-cont {
	margin: 56px 0 0;
}

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

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

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

	.faq-area .faq-cont {
		margin: 40px 0 0;
		width: 100%;
	}

}