@charset "utf-8";
/* ************************************************************

Title: layout.css

************************************************************ */


/*--------------- mainArea ---------------*/
#mainArea .co {
	padding: 40px;
	border-top: dotted 2px #dae4e4;
	text-align: left;
	line-height: 1.7;
}

@media screen and (max-width:767px) {
	#mainArea .co {
		padding: 1.5em;
	}
}

#mainArea .co.titleArea {
	padding: 50px 60px;
	text-align: center;
}

@media screen and (max-width:767px) {
	#mainArea .co.titleArea {
		padding: 2em;
		text-align: center;
	}
}

#mainArea .co.titleArea,
#mainArea .co:first-child {
	border-top: none;
}

#mainArea .contentsTitle {
	margin-bottom: 1em;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
}

#mainArea .co:not(.titleArea) .contentsTitle {
	margin-bottom: 3em;
}

#mainArea .contentsTitle .icon {
	margin-right: .3em;
	font-size: 1.8em;
	vertical-align: -.2em;
}


#contents[class*="basic"] #mainArea .contentsTitle,
#contents[class*="basic"] #mainArea .coHead,
#contents[class*="basic"] #mainArea a.txtLink,
#contents[class*="basic"] #mainArea .captureBox .caption .em,
#contents[class*="basic"] #mainArea ul.discnote li::before,
#contents[class*="basic"] #mainArea .faq .question::before {
	color: #80ba03;
}

#contents[class*="uses"] #mainArea .contentsTitle,
#contents[class*="uses"] #mainArea .coHead,
#contents[class*="uses"] #mainArea a.txtLink,
#contents[class*="uses"] #mainArea .captureBox .caption .em,
#contents[class*="uses"] #mainArea ul.discnote li::before,
#contents[class*="uses"] #mainArea .faq .question::before {
	color: #dd6d69;
}

#contents[class*="self_sufficiency"] #mainArea .contentsTitle,
#contents[class*="self_sufficiency"] #mainArea .coHead,
#contents[class*="self_sufficiency"] #mainArea a.txtLink,
#contents[class*="self_sufficiency"] #mainArea .captureBox .caption .em,
#contents[class*="self_sufficiency"] #mainArea ul.discnote li::before,
#contents[class*="self_sufficiency"] #mainArea .faq .question::before {
	color: var(--color-blue);
}

#contents[class*="circuitgroup"] #mainArea .contentsTitle,
#contents[class*="circuitgroup"] #mainArea .coHead,
#contents[class*="circuitgroup"] #mainArea a.txtLink,
#contents[class*="circuitgroup"] #mainArea .captureBox .caption .em,
#contents[class*="circuitgroup"] #mainArea ul.discnote li::before,
#contents[class*="circuitgroup"] #mainArea .faq .question::before {
	/*	color: #5f8fc9;*/
	color: #00a4bf;
}

#contents[class*="expense"] #mainArea .contentsTitle,
#contents[class*="expense"] #mainArea .coHead,
#contents[class*="expense"] #mainArea a.txtLink,
#contents[class*="expense"] #mainArea .captureBox .caption .em,
#contents[class*="expense"] #mainArea ul.discnote li::before,
#contents[class*="expense"] #mainArea .faq .question::before {
	color: #e1943d;
}

.icon-s-cb-monthly {
	color: #f2c300;
}

.icon-s-cb-yearly {
	color: #6bb55e;
}

.icon-s-cb-compare {
	color: #57b2af;
}

#mainArea .leadTitle {
	font-size: 1.2em;
}

#mainArea .firstLead {
	margin-bottom: 2.5em;
	text-align: center;
	font-weight: bold;
	font-size: 1em;
	line-height: 2em;
}

#mainArea .firstLead+.firstLead {
	margin-top: -1.5em;
}

#mainArea .firstLead:last-child {
	margin-bottom: 0;
}

#mainArea .contentsSubTitle {
	margin-bottom: 1.25em;
	font-size: 1.25em;
	font-weight: bold;
	text-align: center;
}

#mainArea .coHead {
	margin: 2em auto .7em;
	font-size: 1.25em;
	font-weight: bold;
	letter-spacing: .05em;
}

#mainArea .coHead:first-child {
	margin: 0 auto .7em;
}

#mainArea .coHead .icon {
	font-size: 1.8em;
	margin-right: .3em;
	vertical-align: -.2em;
}


.co p,
.co li {
	margin-bottom: 1em;
	font-size: .95em;
}

.co li p {
	font-size: 1em;
}

.co p:last-child {
	margin-bottom: 0 !important;
}

.co .note li,
.co p span.note {
	font-size: .9em;
	color: #666;
}


#mainArea a:not([class]) {
	color: var(--color-blue);
}

#mainArea a.txtLink:hover,
#mainArea a:not([class]):hover {
	text-decoration: underline;
}

/* captureBox */

#mainArea .captureTitle {
	margin: 3em 0 0;
	font-size: 1.1em;
	font-weight: bold;
}

#mainArea .captureBox {
	margin: 1em 0;
	position: relative;
}

@media screen and (min-width:768px) {
	#mainArea .captureBox {
		display: flex;
		justify-content: space-between;
	}
}

#mainArea .captureBox:last-child {
	margin-bottom: 1em;
}

#mainArea .captureBox .capture {
	width: 530px;
	position: relative;
}

#mainArea .captureBox .capture.fullW {
	width: 100%;
}

#mainArea .captureBox .capture img {
	width: 100%;
	height: auto;
	/* 	background: #ddd; */
	border: solid 1px #ccc;
}

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

	#mainArea .captureBox.connectArrow .capture::before,
	#mainArea .captureBox.connectArrow .capture::after {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
	}

	#mainArea .captureBox.connectArrow .capture::before {
		width: .8em;
		height: 1.5em;
		top: calc(100% - .7em);
		background-color: #80ba03;
	}

	#mainArea .captureBox.connectArrow .capture::after {
		border: solid 15px transparent;
		border-top: solid 15px #80ba03;
		top: calc(100% + .7em);
	}
}

#mainArea .captureBox .caption {
	width: 290px;
	text-align: justify;
	counter-reset: cap;
}

#mainArea .captureBox .caption .sec:not(:last-child) {
	margin-bottom: 2em;
}

#mainArea .captureBox .caption .capNum {
	margin-bottom: .7em;
	padding-left: 2.1em;
	position: relative;
}

#mainArea .captureBox .caption .capNum::before {
	content: counter(cap);
	counter-increment: cap;
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	width: 1.6em;
	line-height: 1.6em;
	color: #fff;
	background-color: #ccc;
	text-align: center;
	border-radius: 50%;
}

#mainArea .captureBox .caption .em {
	display: block;
	padding-bottom: .3em;
	font-weight: bold;
	font-size: 1.05em;
}

#mainArea .captureBox .caption p {
	margin-bottom: .8em;
	font-size: .9em;
}

#mainArea .captureBox .caption li {
	margin-bottom: .5em;
	font-size: .9em;
}

.frameBox {
	display: block;
	padding: 1.5em 2.5em 1em;
	position: relative;
	margin: .5em auto;
}

.frameBox.tabTitle {
	padding: 3.5em 2.5em 1em;
}

.caption .frameBox {
	padding: 1em 1.5em;
}

.caption .frameBox.tabTitle {
	padding: 2.5em 1.5em 1em;
}

.frameBoxTitle {
	padding: .5em 1em;
	position: absolute;
	left: 2.5em;
	top: 0;
	color: #fff;
	letter-spacing: .1em;
	font-weight: bold;
	line-height: 1;
	font-size: 1em;
}

.caption .frameBoxTitle {
	left: 1.5em;
	font-size: .9em;
}

#contents[class*="basic"] .frameBox {
	border: solid 1px #80ba03;
}

#contents[class*="uses"] .frameBox {
	border: solid 1px #dd6d69;
}

#contents[class*="circuitgroup"] .frameBox {
	border: solid 1px var(--color-blue);
}

#contents[class*="circuitgroup"] .frameBox {
	border: solid 1px #00a4bf;
}

#contents[class*="expense"] .frameBox {
	border: solid 1px #e1943d;
}


#contents[class*="basic"] .captureBox .caption .capNum::before,
#contents[class*="basic"] .frameBoxTitle {
	background-color: #80ba03;
}


#contents[class*="uses"] .captureBox .caption .capNum::before,
#contents[class*="uses"] .frameBoxTitle {
	background-color: #dd6d69;
}


#contents[class*="circuitgroup"] .captureBox .caption .capNum::before,
#contents[class*="circuitgroup"] .frameBoxTitle {
	background-color: var(--color-blue);
}


#contents[class*="circuitgroup"] .captureBox .caption .capNum::before,
#contents[class*="circuitgroup"] .frameBoxTitle {
	background-color: #00a4bf;
}


#contents[class*="expense"] .captureBox .caption .capNum::before,
#contents[class*="expense"] .frameBoxTitle {
	background-color: #e1943d;
}


/*--------- basic ---------*/


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

	.monthly .coHead+p,
	.yearly .coHead+p,
	.compare .coHead+p {
		padding-left: 3em;
	}
}

/*** point ***/

.frameBox .em {
	font-size: .9em !important
}

/*** frameBox meadl ***/
.frameBox.medalBox {
	display: flex;
	flex-wrap: wrap;
	margin: .5em auto;
	padding: .5em 1em;
	font-size: .9em;
}

.frameBox.medalBox>span {
	width: 43%;
	padding: .5em 0;
}

.frameBox.medalBox>span:nth-child(even) {
	width: 57%;
}

.frameBox.medalBox .medal {
	display: inline-block;
	width: 2.2em;
	vertical-align: .2em;
}

.frameBox.medalBox .medal img {
	width: 100%;
	height: auto;
}

/*** comparePattern ***/
#comparePattern {
	width: calc(100% + 120px);
	margin: 2em -60px;
	padding: 40px 60px;
	background-color: #f6f9ef;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#comparePattern .pattern {
	width: 190px;
	padding: 1em;
	background-color: #fff;
	text-align: center;
	position: relative;
	counter-reset: pList;
}

#comparePattern .pattern:not(:first-child)::before {
	content: '\e900';
	font-family: 'regular';
	position: absolute;
	right: calc(100% + 11%);
	top: calc(50% - .5em);
	color: #80ba03;
	font-weight: bold;
}

#comparePattern .pattern p {
	font-size: .9em;
}

#comparePattern .pattern p span.compare {
	display: block;
	margin: .3em auto .5em;
	color: #80ba03;
	font-weight: bold;
	font-size: 1.1em;
	letter-spacing: .05em;
}

#comparePattern .pattern .pList {
	display: block;
	width: 9em;
	margin: .5em auto;
	padding-left: 1.5em;
	text-align: left;
	border: solid 1px #80ba03;
	line-height: 2em;
}

#comparePattern .pattern .pList::before {
	content: counter(pList)'.';
	counter-increment: pList;
	padding-right: .2em;
	color: #80ba03;
	font-weight: bold;
}

#comparePattern .sum span {
	padding: .2em;
	color: #80ba03;
	font-weight: bold;
	font-size: 1.1em;
}

#comparePattern .sum.all {
	width: 7em;
	height: 7em;
	padding-top: 2em;
	line-height: 1.3em;
	background-color: #fff;
	border-radius: 50%;
	text-align: center;
	position: relative;
}

#comparePattern .sum.all span {
	display: block;
}

#comparePattern .sum.all::before {
	content: '';
	display: block;
	width: 1.4em;
	height: .6em;
	border-top: solid 2px #80ba03;
	border-bottom: solid 2px #80ba03;
	position: absolute;
	right: calc(100% + 15%);
	top: calc(50% - .4em);
}


/*--------- uses ---------*/
.faq .fullwHeader {
	/* height: 180px; */
	position: relative;
	padding: 3em 0;
}

@media screen and (max-width:767px) {
	.faq .fullwHeader {
		padding: 3em 0 1em;
	}
}

/* #contents[class*="uses"] .faq .fullwHeader {
	background-color: #f8eae9;
}

#contents[class*="self_sufficiency"] .faq .fullwHeader {
	background-color: #d9eaf6;
} */

.faq .fullwHeader .contentsTitle {
	width: 100%;
	margin: 0 auto;
	/* padding-left: 3.5em; */
	color: #000 !important;
	font-size: 1.6em;
	line-height: 1em;
	position: relative;
	top: 50%;
	/* transform: translateY(-50%); */
	/* text-align: left; */
	text-align: center;
	font-weight: normal;
}

/* .faq .fullwHeader .contentsTitle::before {
	content: '';
	display: block;
	width: 2.6em;
	height: 2.6em;
	background-image: url(/pub/faqbook/img/icon_faq.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	position: absolute;
	left: 0;
	top: calc(50% - 1.3em);
} */

/* #contents[class*="uses"] .faq .fullwHeader .contentsTitle::before {
	background-image: url(/aut/about/img/icon_faq.svg);
} */

.faq .fullwHeader .contentsTitle span {
	display: block;
	margin: 0.5em 0 0;
	font-size: 0.8em;
}

/* #contents[class*="uses"] .faq .fullwHeader .contentsTitle span {
	color: #dd6d69;
} */

#contents[class*="self_sufficiency"] .faq .fullwHeader .contentsTitle span {
	color: var(--color-blue);
}

.faq .fullwHeader .headerIllust {
	width: 150px;
	height: 135px;
	/* position: absolute;
	right: calc(50% - 400px);
	bottom: 0;
	overflow: hidden; */
	margin: 1em auto;
}

#mainArea .faq .fullwHeader .headerIllust img {
	width: 100%;
	height: auto;
}

#mainArea .fullwHeader+.co {
	border-top: none;
}

.faq .question {
	margin-bottom: 1.2em;
	padding-left: 3em;
	font-size: 1.2em;
	position: relative;
}

.faq .question:not(:first-child) {
	margin-top: 2.5em;
}

.faq .question::before {
	content: 'Q';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	font-size: .9em;
	line-height: 2;
	font-weight: 500;
	text-align: center;
	line-height: 1;
	border: solid 1px;
	border-radius: 50%;
	position: absolute;
	background-color: #fff;
	left: 0;
	top: -.1em;
}

.discnote li h5 {
	font-weight: bold;
	font-size: 1.05em;
}

/*--------- expence ---------*/

/* #contents[class*="expense"] .faq,
#contents[class*="expense"] .terms {
	border-top: none !important;
	background-color: #fdf6ef;
} */

/*--------- self_sufficiency ---------*/

/* .terms h4 {
	margin: 0 auto 1.5em;
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: .05em;
	text-align: center;
	color: #333;
}

.terms h4::before {
	content: '';
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	margin-left: -1em;
	margin-right: .7em;
	background: url(/aut/about/img/terms.svg) no-repeat center / contain;
	vertical-align: -.3em;
}

.terms ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.terms li {
	width: 49%;
	margin: 1em 0;
	padding: 1.5em 1.5em 1.5em 1em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	border-radius: 10px;
	font-size: .85em;
}

.terms li h5 {
	width: 8em;
	color: #e1943d;
	font-size: 1.05em;
	text-align: center;
	font-weight: bold;
}

.terms li p {
	width: calc(100% - 10em);
} */


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

	/*--------------- mainArea ---------------*/
	/* #mainArea {
		padding: 5vw 0;
		border: none;
	} */

	#mainArea .co {
		/* padding: 10vw 0 !important; */
	}

	#mainArea .co:last-child {
		/* padding: 10vw 0 0 !important; */
	}

	/* #mainArea .contentsTitle {
		margin-bottom: 1em;
		font-size: 1.4em;
		font-weight: bold;
		text-align: center;
		line-height: 1.5;
	}

	#mainArea .contentsTitle .icon {
		display: block;
		margin: 0 auto .3em;
		font-size: 2em;
		vertical-align: 0;
	} */

	#mainArea .firstLead {
		text-align: justify;
		font-size: .95em;
	}

	#mainArea .firstLead br {
		display: none;
	}

	.basic_manual.page1 #mainArea .coHead,
	.basic_manual.page4 #mainArea .coHead,
	.expense_manual.page3 #mainArea .co>.coHead:first-of-type {
		position: relative;
		padding-left: 2.5em;
	}

	.basic_manual.page1 #mainArea .coHead .icon,
	.basic_manual.page4 #mainArea .coHead .icon,
	.expense_manual.page3 #mainArea .co>.coHead:first-of-type .icon {
		position: absolute;
		left: 0;
	}

	#mainArea .captureBox {
		margin: 5vw 0 15vw;
	}

	#mainArea .captureBox .capture,
	#mainArea .captureBox .caption {
		width: 100%;
	}

	#mainArea .captureBox .capture {
		margin-bottom: 1em;
	}

	#mainArea .captureBox .caption p {
		margin-top: 0 !important;
		padding-left: 0;
	}

	#mainArea .captureBox .caption .em {
		padding-bottom: 0;
	}

	.frameBox.tabTitle {
		padding: 3.5em 1em 1em;
	}

	.frameBoxTitle {
		left: 1em;
	}


	/*** comparePattern ***/
	/* #comparePattern {
		width: 100vw;
		margin: 2em -5vw;
		padding: 5vw;
		justify-content: column;
		flex-wrap: wrap;
	}

	#comparePattern .pattern {
		width: 100%;
		margin-bottom: 2em;
		padding: 1em 0;
	}

	#comparePattern .pattern:not(:first-child)::before {
		right: calc(50% - .5em);
		top: auto;
		bottom: calc(100% + .2em);
	}

	#comparePattern .pattern .pList {
		display: inline-block;
		width: 7em;
		margin: 0 .5em;
		padding: .5em 0 0;
		text-align: center;
	}

	#comparePattern .pattern .pList::before {
		content: counter(pList);
		display: block;
		padding-right: 0;
		line-height: 1;
	}

	#comparePattern .sum.all {
		margin: auto;
		width: 10em;
		height: auto;
		border-radius: 5px;
		padding: .7em 0;
		height: auto;
	}

	#comparePattern .sum.all span {
		display: inline-block;
	}

	#comparePattern .sum.all::before {
		width: .6em;
		height: 1em;
		border: none;
		border-left: solid 2px #80ba03;
		border-right: solid 2px #80ba03;
		position: absolute;
		right: calc(50% - .5em);
		top: auto;
		bottom: calc(100% + .4em);
	} */

	/*--------- uses ---------*/

	/* .faq .fullwHeader {
		width: 100vw;
		margin: 2em -5vw 0;
		padding: 10vw 5vw;
		justify-content: column;
		flex-wrap: wrap;
		overflow: hidden;
	} */

	/* #mainArea .faq .fullwHeader .contentsTitle {
		width: 100%;
		font-size: 1.4em;
		text-align: center;
		top: calc(50% - 3em);
		left: 0;
		padding-left: 0;
		transform: translateY(0);
	}

	#mainArea .faq .fullwHeader .contentsTitle::before {
		display: block;
		width: 100%;
		height: 2em;
		position: static;
		text-align: center;
		left: auto;
		top: auto;
		margin-bottom: 0.5em;
	}

	#mainArea .faq .fullwHeader .headerIllust {
		bottom: -20px;
		right: 20px;
		width: 100px;
		height: 100px;
	} */


	/*--------- expence ---------*/

	/* #contents[class*="expense"] .faq,
	#contents[class*="expense"] .terms {
		width: 100vw;
		margin-left: -5vw;
		padding: 10vw 5vw !important;
	}

	#mainArea .co.gas {
		border-top: none;
	} */


	/* .terms ul {
		display: block;
	}

	.terms li {
		width: 100%;
		padding: 1.5em 1.5em 1.5em .5em;
	}

	.terms li h5 {
		width: 9.5em;
	}

	.terms li p {
		width: calc(100% - 9em);
	} */

}

.help .inner {
	padding: 1.5em 0;
	margin-bottom: 3em;
}

.help .pageContents {
	max-width: 980px;
	margin: 0 auto;
	padding: 0;
}

/*--------------- manual menu ---------------*/

#manualMenu {
	margin: 0 auto;
	padding: 0 0 1.5em;
	position: relative;
	border-bottom: 2px solid #dae4e4;
}

#manualMenu .menuTitle {
	margin-bottom: 1em;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
}

#manualMenu ul {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	position: relative;
	font-size: .9em;
}

#manualMenu ul li strong {
	display: none;
	margin-bottom: .3em;
	font-size: 1.1em;
}

#manualMenu ul li a:hover {
	text-decoration: underline;
}

#manualMenu ul li a~a {
	margin-left: 2em;
}

/* #contents[class*="basic"] a.txtlinkArrow::before {
	color: #80ba03;
}

#contents[class*="uses"] a.txtlinkArrow::before {
	color: #dd6d69;
}

#contents[class*="self_sufficiency"] a.txtlinkArrow::before {
	color: var(--color-blue);
}

#contents[class*="circuitgroup"] a.txtlinkArrow::before {
	color: #00a4bf;
}

#contents[class*="expense"] a.txtlinkArrow::before {
	color: #e1943d;
} */


.selfSufficiencyBlock .btn-wrp {
	padding-bottom: 1em;
	text-align: center;
	padding: 30px 60px 60px;
}

.selfSufficiencyBlock .btn-wrp .text {
	font-size: 1.2em;
	font-weight: bold;
	color: var(--color-blue);
	margin-bottom: 1.5em;
}

.selfSufficiencyBlock .btn-wrp a {
	padding: .7em 3em .7em 2em;
	font-size: 1.2em;
	border-radius: 2em;
}

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

	.selfSufficiencyBlock .btn-wrp {
		padding: 10vw 0;
	}

	.selfSufficiencyBlock .btn-wrp .text {
		font-size: 1.1em;
	}

	.selfSufficiencyBlock .btn-wrp a {
		font-size: 1em;
	}
}

/* help disk */
.helpdesk {
	border: 1px solid #ccc;
	padding: 1em 2.5em 1.5em;
	border-radius: 4px;
	background-color: #fcfcfc;
	margin: 1.5em auto;
}

.helpdesk .title {
	display: block;
	color: var(--color-blue);
	margin: 0;
}

.helpdesk .center {
	text-align: center;
	border-bottom: 1px solid #ccc;
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
}

.helpdesk .title.center span {
	display: inline-block;
	font-size: 1.8em;
	vertical-align: middle;
	margin-right: 0.5em;
}

.helpdesk p {
	padding-top: 1em;
}

.helpdesk p span {
	display: inline-block;
	margin-right: 0.25em;
	color: var(--color-blue);
	vertical-align: middle;
}

.helpdesk td {
	font-size: 0.9em;
	padding: 0.25em 1em 0.25em 0;
}

.helpdesk td.tel span {
	font-size: 2em;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.25em;
}

.helpdesk td.time span {
	font-size: 1.4em;
	padding: 0 0.25em;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.25em;
}