@charset "UTF-8";

.sec-hero {
	position: relative;
	width: 100%;
	max-width: 100%;
}
.sec-hero .slide-wrapper {
	position: relative;
	width: 100%;
}
.img-full {
	display: block;
	width: 100%;
	height: auto;
}
.sec-hero .slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	opacity: 0;
	animation-duration: 24s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
.sec-hero .slide-placeholder {
	position: relative;
	z-index: 0;
}
.sec-hero .slide-01 {
animation-name: fade-01;
z-index: 1;
}
.sec-hero .slide-02 {
animation-name: fade-02;
z-index: 1;
}
.sec-hero .slide-03 {
animation-name: fade-03;
z-index: 1;
}

@keyframes fade-01 {
0%   { opacity: 1; }
30%  { opacity: 1; }
40%  { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fade-02 {
0%   { opacity: 0; }
30%  { opacity: 0; }
40%  { opacity: 1; }
60%  { opacity: 1; }
70%  { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fade-03 {
0%   { opacity: 0; }
60%  { opacity: 0; }
70%  { opacity: 1; }
90%  { opacity: 1; }
100% { opacity: 0; }
}

.breadcrumbs,
.sec-face {
	background-color: #006837;
	color: #fff;
}
.breadcrumbs a,
.breadcrumbs a:visited {
	color: #fff;
}

@media screen and (min-width: 751px){
	.sec-face {
		margin-bottom: 80px;
		height: 400px;
	}
	.sec-face .font-ex {
		font-size: 40px!important;
	}
}
@media screen and (max-width:750px){
	.sec-face {
		padding-top: 30px;
		padding-bottom: 30px;
		margin-bottom: 40px;
	}
	.sec-face .font-ex {
		font-size: 30px!important;
		line-height: 1.4em;
	}
	
}
@media screen and (min-width: 751px){
	.sec-lineup .inner {
		background: url("../../common/images/bg_side.png") repeat-y 8% 0%;
		background-size: 30% auto;
	}
	.bnn-lead {
		background: #f5fff0 url("../images/bg_catch.png") no-repeat top right;
		background-size: 15% auto;
		border: 1px solid #006837;
		margin-bottom: 30px;
		padding: 15px 40px;
	}
}
@media screen and (max-width:750px){
	.sec-lineup .inner {
		background: url("../../common/images/bg_side.png") repeat-y right 0%;
		background-size: 30% auto;
	}
	.bnn-lead {
		background: #f0f9ff url("../../common/images/bg_side.png") no-repeat top right;
		background-size: 25% auto;
		border: 1px solid #2f6aac;
		margin-bottom: 30px;
		padding: 15px 40px 15px 30px;
	}
}

@media screen and (min-width: 751px){
	.visual-title {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;
		color: #fff;
	}
	.visual-block {
		display: block;
		border-bottom: 1px solid #fff;
		margin: 0 2em 0.5em 2em;
		padding-bottom: 0.5em;
		
	}
}
@media screen and (max-width:750px){
	.visual-title {
		margin-bottom: 20px;
		color: #fff;
	}
	.visual-title h3 {
		padding: 0.6em 0;
	}
	.visual-block {
		display: block;
		border-bottom: 1px solid #fff;
		margin: 0 2em 0.5em 2em;
		padding-bottom: 0.5em;
		
	}
}

.bg-storage-battery {
	background-color: #006837;
}
.visual-title .border-text {
	display: inline-block;
	border-bottom: 2px solid #fff; /* お好みで色や太さを調整 */
	padding-bottom: 4px; /* ボーダーとの間隔調整 */
	margin-bottom: 10px;
  }