/* setting ---------------------------- */
:root {
	--header_height: 68px;
	--main-color: #00267B;
	--hamburger-line-height: 2px;
	--hamburger-color: #00267B;
}
@media screen and (min-width: 768px) {
	:root {
		--header_height: 86px;
	}
}
html,
body {
	color: #000;
	font-size: 14px;
	line-height: 1.625;
	font-family: "Noto Sans JP", sans-serif;
}
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
span {
	display: inline-block;
}
img {
	max-width: 100%;
	height: auto;
}
iframe {
	max-width: 100%;
}
.inner {
	width: 100%;
	max-width: 1032px;
	margin: 0 auto;
	padding: 0 16px;
}
.main_title {
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 30px;
	font-weight: bold;
	text-align: center;
	font-family: "Noto Serif JP", serif;
}
.main_title .en {
	font-size: 20px;
}
.main_title .ja::after {
	content: '';
	display: block;
	width: 4em;
	height: 3px;
	margin: 10px auto 0;
	border-radius: 3px;
	background-color: currentColor;
}
.page_title {
	margin-bottom: 48px;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
	font-family: "Noto Serif JP", serif;
}
.butt_wrap {
	display: flex;
	justify-content: center;
}
.button {
	position: relative;
	top: 0;
	left: 0;
	display: inline-block;
	width: 206px;
	padding: 10px 0;
	border-radius: 100px;
	background-image: linear-gradient(to right, #9C9CFD, #122679);
	color: #fff;
	font-family: 'Hiragino Kaku Gothic ProN', "Noto Sans JP", sans-serif;
	text-align: center;
	transition: .2s;
}
.button:hover {
	top: -2px;
}
.bg_solar {
	background: url('../img/sky.png') center / cover;
}
.bg_wall {
	background: url('../img/backwall.png') center / cover;
	background-color: rgb(255 255 255 / .7);
	background-blend-mode: lighten;
}
.bg_solar_about {
	padding: calc(70px + var(--header_height)) 0 27px;
	background: url('../img/sky.png');
	background-position: 50% 0;
	color: #fff;
}
.bg_sky_about {
	padding: 45px 0 480px;
	background: url('../img/sky-heart.png') center / cover;
	background-color: rgb(255 255 255 / .3);
	background-blend-mode: lighten;
}
.is_sp {
	display: block;
}
.is_pc {
	display: none;
}
@media screen and (min-width: 768px) {
	.main_title {
		margin-bottom: 60px;
	}
	.main_title .en {
		font-size: 30px;
	}
	.main_title .ja {
		font-size: 23px;
	}
	.page_title {
		font-size: 30px;
	}
	.button {
		width: 312px;
		font-size: 22px;
	}
	.is_sp {
		display: none;
	}
	.is_pc {
		display: block;
	}
}
@media screen and (min-width: 1920px) {
	.bg_solar_about {
		background-size: cover;
	}
}
/* ---------------------------- setting */

/* common ---------------------------- */
.js_anime.anime_box {
	position: relative;
	top: 20px;
	left: 0;
	opacity: 0;
	transition: top .5s, opacity .5s;
}
.js_anime.anime_box.anime_show {
	top: 0;
	opacity: 1;
}
.js_anime.anime_box .main_title {
	transform: scale(0);
}
.js_anime.anime_box.anime_show .main_title {
	animation: scaleUp .2s .1s forwards;
}
@keyframes scaleUp {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes fade_in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* ---------------------------- common */

#header {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--header_height);
	background-color: rgb(255 255 255 / .8);
	z-index: 1000;
}
#header .inner {
	padding: 0 0 0 16px;
	max-width: 1620px;
}
#header .box {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#header .logo {
	width: 180px;
}
#header .info {
	display: flex;
	align-items: center;
}
#header .info > * {
	width: 45px;
}
#header .info .tel,
#header .info .mail {
	display: block;
	color: var(--hamburger-color);
	font-size: 10px;
	text-align: center;
}
#header .info .tel img,
#header .info .mail img {
	display: block;
	width: auto;
	height: 25px;
	margin: 0 auto;
}
#header .info .mail .text {
	/* margin-top: 5px; */
}
@media screen and (min-width: 768px) {
	#header .inner {
		padding: 0 0 0 16px;
	}
	#header .logo {
		width: 261px;
	}
}
@media screen and (min-width: 900px) {
	#header .info {
		display: none;
	}
}

#hamburger {
	display: block;
	width: 100%;
	/* padding: 20px 8px 8px; */
	padding: 0 8px 16px;
}
#hamburger .line {
	position: relative;
	display: block;
	width: 100%;
	height: var(--hamburger-line-height);
	background-color: var(--hamburger-color);
}
#hamburger.on .line {
	background-color: transparent;
}
#hamburger .line::before,
#hamburger .line::after {
	content: '';
	width: 100%;
	height: var(--hamburger-line-height);
	background-color: var(--hamburger-color);
	transition: transform .2s;
}
#hamburger .line::before {
	position: absolute;
	top: -10px;
}
#hamburger .line::after {
	position: absolute;
	top: 10px;
}
#hamburger.on .line::before {
	top: 0;
	transform: rotate(-45deg);
}
#hamburger.on .line::after {
	top: 0;
	transform: rotate(45deg);
}

#hamburger .text {
	display: block;
	margin-top: 12px;
	color: var(--hamburger-color);
	font-size: 10px;
	text-align: center;
}

#nav {
	position: fixed;
	top: var(--header_height);
	left: -100vw;
	/* left: 0; */
	background-color: #00267B;
	color: #fff;
	width: 100vw;
	height: calc(100vh - var(--header_height));
	padding: 10px 0;
	opacity: 0;
	visibility: hidden;
	overflow-y: auto;
	transition: left .2s, opacity .2s, visibility .2s;
}
#nav.on {
	opacity: 1;
	visibility: visible;
	left: 0;
	z-index: 1000;
}
#nav .list {
	display: flex;
	flex-direction: column;
	padding: 0 15px;
}
#nav .list li a {
	display: block;
	padding: 8px 0;
	font-size: calc(12px + 2vw);
}
#nav .list li a:hover {
	transform: scale(1.1);
}
#nav .list li a::before {
	content: '－ ';
}
@media screen and (min-width: 900px) {
	#nav {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 920px;
		height: auto;
		background-color: transparent;
		color: #00267B;
		opacity: 1;
		visibility: visible;
		transition: none;
	}
	#nav .list {
		flex-direction: row;
		justify-content: space-between;
	}
	#nav .list li {
		flex: 1 1 auto;
		text-align: center;
		border-left: .5px solid currentColor;
	}
	#nav .list li:last-child {
		border-right: .5px solid currentColor;
	}
	#nav .list li a {
		position: relative;
		padding: 0;
		font-size: 18px;
		font-weight: 300;
		line-height: 1;
		border-radius: 4px;
		transition: transform .2s;
	}
	#nav .list li a::before {
		content: '';
	}
	#nav .list.sub_list {
		display: inline-flex;
		padding-top: 14px;
	}
	#nav .list.sub_list li a {
		padding-left: 34px;
		padding-right: 34px;
	}
}

#mv {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 160px 0 140px;
}
#mv .mv_title {
	margin-bottom: 40px;
	color: #fff;
	text-align: center;
	font-size: 7vw;
	font-weight: bold;
	font-family: "Noto Serif JP", serif;
	line-height: 2;
	opacity: 0;
	animation: fade_in 5s .1s forwards;
}
#mv .mv_text {
	padding: 0 16px;
	color: #fff;
	text-align: center;
	font-size: 5vw;
	font-family: "Noto Serif JP", serif;
	opacity: 0;
	animation: fade_in 5s .1s forwards;
}
@media screen and (min-width: 768px) {
	#mv {
		padding: 290px 0 265px;
	}
	#mv .mv_title {
		margin-bottom: 60px;
		font-size: 56px;
	}
	#mv .mv_text {
		font-size: 38px;
	}
}

#intro {
	padding: 55px 0 33px;
	background-color: rgb(24, 80, 128, .5);
}
#intro .main_title {
	color: #fff;
}
#intro .cont {
	padding: 38px 29px;
	background: url('../img/family.png') center / cover;
	background-color: rgb(255 255 255 / .5);
	background-blend-mode: lighten;
}
#intro .cont .title {
	margin-bottom: 34px;
	font-size: 18px;
	text-align: center;
	font-weight: 500;
	font-family: "Noto Serif JP", serif;
}
#intro .cont .text {
	font-size: 14px;
	font-weight: 300;
}
@media screen and (min-width: 768px) {
	#intro {
		padding: 100px 0 50px;
	}
	#intro .cont {
		padding: 69px 40px 57px;
	}
	#intro .cont .title {
		font-size: 42px;
	}
	#intro .cont .text {
		font-size: 21px;
	}
}

#content {
	padding: 45px 0;
}
#content .text {
	padding: 0 29px;
	font-weight: 300;
}
@media screen and (min-width: 768px) {
	#content {
		padding: 120px 0;
	}
	#content .text {
		font-size: 21px;
		text-align: center;
	}
}

#overview {
	padding: 45px 0;
}
#overview .item_list {
	display: flex;
	flex-direction: column;
	max-width: 800px;
	margin: 0 auto 45px;
}
#overview .item_list .item {
	position: relative;
	top: 0;
	left: 0;
	color: #fff;
	text-align: center;
	font-family: "Noto Serif JP", serif;
	aspect-ratio: 400 / 282;
}
#overview .item_list .item:not(:last-child) {
	margin-bottom: 30px;
}
#overview .item_list #solar.item {
	background: url('../img/solar.png') center / cover;
}
#overview .item_list #battery.item {
	background: url('../img/battery.png') center / cover;
}
#overview .item_list #electric.item {
	background: url('../img/all-ele.png') center / cover;
}
#overview .item_list #reform.item {
	background: url('../img/reform.png') center / cover;
}
#overview .item_list #advicer.item {
	background: url('../img/advisor.png') center / cover;
}
#overview .item_list .item .box {
	padding: 2% 0;
	background-color: rgb(24, 80, 128, .5);
}
#overview .item_list .item .number {
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	padding: 4px;
	font-size: 36px;
	line-height: 1;
	font-weight: bold;
}
#overview .item_list .item .logo {
	width: 70px;
	margin: 0 auto 2%;
}
#overview .item_list .item .catch {
	margin-bottom: 2%;
	font-size: 16px;
	line-height: 1;
}
#overview .item_list .item .title {
	margin-bottom: 1%;
	font-size: 28px;
	line-height: 1
}
#overview .item_list .item .text {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 36px;
	background-color: rgb(24, 80, 128, .5);
	font-size: 16px;
}
@media screen and (min-width: 429px) {

}
@media screen and (min-width: 768px) {
	#overview {
		padding: 120px 0 70px;
	}
	#overview .item_list {

	}
	#overview .item_list .item {
		aspect-ratio: 400 / 189;
	}
	#overview .item_list .item .box {
		width: 50%;
		height: calc(100% - 64px);
		padding: 80px 0 54px;
	}
	#overview .item_list .item .number {
		transform: scale(1.1);
		transform-origin: 0 0;
	}
	#overview .item_list .item .logo {
		width: 100px;
		margin-bottom: 20px;
	}
	#overview .item_list .item .catch {
		margin-bottom: 21px;
		font-size: 21px;
	}
	#overview .item_list .item .title {
		font-size: 46px;
	}
	#overview .item_list .item .text {
		height: 64px;
		font-size: 21px;
	}
}

#recruit {
	padding: 40px 0;
}
#recruit .text {
	margin-bottom: 60px;
	text-align: center;
	font-weight: 300;
}
@media screen and (min-width: 768px) {
	#recruit {
		padding: 70px 0 120px;
	}
	#recruit .text {
		font-size: 21px;
	}
}

#company {
	padding: 45px 0 105px;
}
#company .cont {
	max-width: calc(100% - 32px);
	margin: 0 auto;
	padding: 33px 10px 21px;
	background-color: rgb(24, 80, 128, .5);
}
#company .cont .place {
	display: inline-block;
	margin-bottom: 6px;
	padding: 4px 16px 5px;
	background-color: #fff;
	font-size: 16px;
	text-align: center;
}
#company .cont .address {
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 300;
}
#company .cont .tel {
	margin-bottom: 30px;
	font-size: 16px;
	font-weight: bold;
}
#company .cont .map {
	position: relative;
	top: 0;
	left: 0;
	aspect-ratio: 89 / 73;
}
#company .cont .map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media screen and (min-width: 768px) {
	#company {
		padding: 120px 0 0;
	}
	#company .cont {
		max-width: none;
		margin-left: calc(50% - 50vw);
		padding: 42px 0 147px;
	}
	#company .cont .inner {
		max-width: 890px;
	}
	#company .cont .place {
		margin-bottom: 23px;
		font-size: 29px;
	}
	#company .cont .address {
		font-size: 22px;
	}
	#company .cont .tel {
		font-size: 31px;
		margin-bottom: 64px;
	}
}

#about {
	padding-bottom: 40px;
}
#about .inner {
	/* animation: fade_in 5s .1s forwards; */
}
#about .text {
	max-width: 820px;
	text-align: center;
	font-weight: 300;
}
@media screen and (min-width: 768px) {
	#about .text {
		margin: 0 auto;
		font-size: 21px;
	}
}

#system {
	padding: 45px 0 0;
}
#system .box {
	padding: 30px 0 45px;
	background-color: #F4F4F4;
}
#system .img_wrap {
	margin-bottom: 24px;
	text-align: center;
}
#system .list_title {
	margin-bottom: 18px;
	padding-left: 44px;
	background: url('../img/icon-solar.png') no-repeat;
	background-size: 36px 32px;
	background-position: 0 0;
	font-size: 18px;
	font-weight: bold;
}
#system .info_list .info {
	padding: 6px 0;
	border-bottom: 2px dotted #2B2B2B;
}
#system .info_list .info:first-child {
	border-top: 2px dotted #2B2B2B;
}
#system .info_list .info .title {
	font-size: 14px;
	font-weight: bold;
}
#system .info_list .info .text {
	font-size: 14px;
	font-weight: 300;
}
@media screen and (min-width: 768px) {
	#system {
		padding: 90px 0 0;
	}
	#system .box {
		padding: 52px 0 90px;
	}
	#system .img_wrap {
		margin-bottom: 60px;
	}
	#system .list_title {
		font-size: 26px;
	}
	#system .info_list .info .title {
		font-size: 21px;
	}
	#system .info_list .info .text {
		font-size: 21px;
	}
}

#charging {
	padding: 45px 0 0;
}
#charging .box {
	/* width: 100vw; */
	margin-left: calc(50% - 50vw);
	padding: 30px 0 45px;
	background-color: #F4F4F4;
}
#charging .img_wrap {
	margin-bottom: 24px;
	text-align: center;
}
#charging .title {
	margin-bottom: 26px;
	font-size: 16px;
	text-align: center;
	font-weight: bold;
}
#charging .text {
	margin-bottom: 34px;
	font-weight: 300;
}
@media screen and (min-width: 768px) {
	#charging {
		padding: 90px 0 0;
	}
	#charging .box {
		padding: 60px 0 90px;
	}
	#charging .img_wrap {
		margin-bottom: 42px;
	}
	#charging .title {
		margin-bottom: 52px;
		font-size: 26px;
	}
	#charging .text {
		margin-bottom: 52px;
		font-size: 21px;
	}
}

#idea {
	padding: 45px 16px 60px;
	border-radius: 20px;
	background-color: rgb(255 255 255 / .7);
}
#idea .text {
	text-align: center;
	font-weight: 300;
}
@media screen and (min-width: 768px) {
	#idea {
		padding: 90px 32px 100px;
	}
	#idea .text {
		font-size: 21px;
	}
}

#recruit_info {
	padding: 45px 0;
}
#recruit_info .recruit_title {
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: bold;
}
#recruit_info .recruit_title .tag {
	margin: 4px 0;
	padding: 2px 14px;
	background-color: #00267B;
	color: #fff;
	font-size: 16px;
}
#recruit_info .recruit_sub_title {
	margin: 20px 0 10px;
	font-size: 20px;
	font-weight: bold;
}
#recruit_info .recruit_sub_title::before {
	content: '■';
	color: #00267B;
}
#recruit_info .war {
	margin-bottom: 10px;
	font-size: 16px;
	color: #f00;
	font-weight: bold;
}
#recruit_info .recruit_list {

}
#recruit_info .recruit_list .row {
	padding: 15px 0;
	border-top: 1px solid #aaa;
}
#recruit_info .recruit_list .row:last-child {
	border-bottom: 1px solid #aaa;
}
#recruit_info .recruit_list .row:nth-child(even) {
	background-color: #efefef;
}
#recruit_info .recruit_list .title {
	padding: 0 16px;
	font-size: 18px;
	font-weight: bold;
}
#recruit_info .recruit_list .text {
	padding: 0 16px;
	font-size: 16px;
	font-weight: 300;
}
#recruit_info .recruit_list .line {
	display: block;
	border-bottom: 1px dotted #aaa;
	margin: 10px 0;
}
#recruit_info .recruit_list .sub_title {
	display: block;
	color: #00267B;
	font-weight: bold;
}
#recruit_info .recruit_list .sub_title:not(:first-child) {
	margin-top: 10px;
}
#recruit_info .recruit_list .map {
	margin: 10px 0 0;
}
#recruit_info .recruit_list .map iframe {
	width: 100%;
}
#recruit_info .recruit_list .tel {
	display: block;
	margin: 10px 0;
	color: #00267B;
	font-size: 20px;
	font-weight: bold;
}
@media screen and (min-width: 768px) {
	#recruit_info .recruit_title {
		font-size: 21px;
	}
	#recruit_info .recruit_sub_title {
		font-size: 21px;
	}
	#recruit_info .recruit_list .row {
		display: flex;
	}
	#recruit_info .recruit_list .title {
		width: 140px;
		font-size: 18px;
	}
	#recruit_info .recruit_list .text {
		width: calc(100% - 140px);
		/* font-size: 18px; */
	}
	#recruit_info .recruit_list .tel {
		font-size: 21px;
	}
}

#footer {
	padding: 40px 18px 0;
	background-color: #185080;
	color: #fff;
}
#footer .logo {
	width: 70%;
	max-width: 495px;
	margin-bottom: 80px;
}
#footer .info {
	max-width: 400px;
	/* margin: 0 auto; */
	margin-bottom: 60px;
	font-weight: 300;
}
#footer .info .tel {
	font-size: 28px;
	font-weight: bold;
}
#footer .info .tel img {
	margin-right: 8px;
	margin-bottom: 4px;
	vertical-align: text-bottom;
}
#footer .list_wrap {
	max-width: 495px;
	margin-left: -5px;
	margin-bottom: 30px;
}
#footer .list {
	font-size: 14px;
	font-weight: 300;
}
#footer .list:not(:last-child) {
	margin-bottom: 10px;
}
#footer .list li a {
	display: inline-block;
	padding: 4px 0;
	transition: transform .2s;
}
#footer .list li a:hover {
	transform: scale(1.1);
}
#footer .list li a::before {
	content: '｜';
}
#footer .butt_wrap {
	margin-bottom: 30px;
}
#footer .button {
	background-image: linear-gradient(to right, #FFFFFF, #BFCCFF);
	color: #535353;
}
#footer .copy {
	padding: 4px 0;
	font-size: 12px;
	text-align: center;
}
@media screen and (min-width: 768px) {
	#footer {
		padding: 120px 0 0;
	}
	#footer .logo {
		margin: 0 auto 100px;
	}
	#footer .info {
		margin: 0 auto 90px;
	}
	#footer .info .text {
		font-size: 26px;
	}
	#footer .info .tel {
		font-size: 38px;
		font-weight: bold;
	}
	#footer .info .tel img {
		vertical-align: middle;
		transform: scale(1.1);
	}
	#footer .list_wrap {
		display: flex;
		justify-content: space-between;
		max-width: 700px;
		margin: 0 auto 112px;
	}
	#footer .list {
		width: 50%;
		white-space: nowrap;
		font-size: 25px;
	}
	#footer .butt_wrap {
		margin-bottom: 90px;
	}
	#footer .copy {
		font-size: 18px;
	}
}