/* Y'S GEAR : sp_solarpanel.css */


.contentsWidth {
	background: url(../img/main_bg.jpg) center top no-repeat;
	background-size: 100% auto;
}

/* [ 共通 ] */
.contentsWidth .commonNotes { margin-left: 0; }
.contentsWidth .commonNotes li { list-style: none; }
.contentsWidth .commonNotes li + li { margin-top: 5px; }
.contentsWidth .txtog { color: #ff6600; }
.contentsWidth b.txtog, 
.contentsWidth span.txtog { display: inline; }

@media screen and (max-width: 568px) {
	.contentsWidth {
		background: url(../img/main_bg_sp.jpg) center top no-repeat;
		background-size: 100% auto;
	}
} /* */


/*==============================================*
 *  [ solarMain ] 
 *==============================================*/

.solarMain {
	padding: 4% 20px;
	text-align: center;
}
@media screen and (max-width: 568px) {
	.solarMain { padding: 4%  10px; }
} /* */


/*==============================================*
 *  [ solarContents ] 
 *==============================================*/

@media screen and (max-width: 980px) {
	.solarContents { padding: 0 20px; }
} /* */

@media screen and (max-width: 568px) {
	.solarContents { padding: 0 10px; }
} /* */


/*==============================================*
 *  [ sectionWrap ] 
 *==============================================*/

.solarContents .sectionWrap:first-child { margin-top: 20px; }

.sectionWrap h2 {
	margin-bottom: 30px;
	text-align: center;
}
.sectionWrap h2 > b {
	display: inline-block;
	border-bottom: 5px solid #fff799;
	font-size: 2.4rem;
}
.sectionWrap h2 span {
	color: #666;
	font-size: 2rem;
}

/* [ 右画像 ] */
.sectionWrap .flex.rimg > div { width: calc(70% - 40px); }
.sectionWrap .flex.rimg > figure {
	width: 30%;
	margin: 0;
}

@media screen and (max-width: 568px) {
	.sectionWrap h2 > b {
		padding-bottom: 5px;
		font-size: 2rem;
		line-height: 1.4;
	}
	.sectionWrap h2 span { font-size: 1.8rem; }
	
	/* [ 右画像 ] */
	.sectionWrap .flex.rimg > div { width: 100%; }
} /* */


/*==============================================*
 *  [ exampleBox ] 
 *==============================================*/

.exampleBox {
	position: relative;
	margin: 30px 0 0 !important;
	padding: 40px 20px 20px;
	background: #fdfbdd;
}
.exampleBox::before {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 20px;
	background: #4894ce;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	content: "例えば…";
}

.exampleBox h3 {
	margin-bottom: 15px;
	color: #1456a6;
	font-size: 2rem;
}

.exampleBox .border {
	padding-top: 30px;
	border-top: 1px dashed #000;
}

/* [ 左画像 ] */
.exampleBox.flex.limg > figure {
	width: 42%;
	margin: 0;
}
.exampleBox.flex.limg > div { width: calc(58% - 20px); }
.exampleBox.flex.limg p { margin-bottom: 0; }
.exampleBox.flex.limg p + p { margin-top: 10px; }

/* [ 吹き出し ] */
.exampleBox .balloon {
	position: relative;
	width: 100%;
	margin-right: 20px;
	padding: 10px;
	background: #fff;
	font-size: calc(1em - 0.2rem);
}
.exampleBox .balloon::before {
	position: absolute;
	top: -20px;
	right: 20%;
	border: 10px solid transparent;
	border-top: 0;
	border-bottom: 20px solid #fff;
	content: "";
}

@media screen and (max-width: 568px) {
	.exampleBox { padding: 40px 20px 10px; }
	
	.exampleBox h3 { font-size: 1.8rem; }

	/* [ 左画像 ] */
	.exampleBox.flex.limg > figure {
		width: 100%;
		margin-bottom: 15px;
	}
	.exampleBox.flex.limg > div { width: 100%; }
	
	/* [ 吹き出し ] */
	.exampleBox .balloon::before { right: calc(50% - 10px); }
} /* */



/*==============================================*
 *  [ pointBox ] 
 *==============================================*/

.pointBox h2 {
	margin-bottom: 15px;
	padding: 5px 10px;
	background: #ff6600;
	color: #fff;
	font-size: 2rem;
}

.pointBox ul { margin: 0; }
.pointBox li {
	list-style: none !important;
	padding-left: 2em;
}
.pointBox li::before {
	display: inline-block;
	width: 2em;
	margin-left: -2em;
	color: #1456a6;
	text-align: center;
	content: "●";
}

@media screen and (max-width: 568px) {
	.pointBox h2 { font-size: 1.8rem; }
} /* */