@charset "UTF-8";
/* テキスト */
.fs-xl {
		font-size: 165%;
}

.fs-lg {
		font-size: 130%;
}

.fs-sm {
		font-size: 75%;
}

.fs-xs {
		font-size: 60%;
}

.text-under {
		text-decoration: underline;
}

/* テキストカラー */
.color-ele-blue {
		color: #3185ff;
}

/* 背景 */
.bg-ele-yellow {
		background-color: #feff7f;
}

/* リスト */
.list-note li.list-none {
		padding-left: 0;
}
.list-note li.list-none::before {
		display: none;
}

/* 罫線 */
.bd-ele {
		border: solid #f18d00 1px;
}

.bd-bolder {
		border-width: 3px;
}

/* 既存モジュール拡張 */
.text-upper.text-upper-lg::before, .text-upper.text-upper-lg::after {
		border-width: 3px;
		height: 32px;
}
@media screen and (max-width: 767px) {
		.text-upper.text-upper-lg::before, .text-upper.text-upper-lg::after {
				border-width: 2px;
		}
}

.box-card {
		position: relative;
}

/* ボード */
.board-balloon-ele {
		position: relative;
		padding: 12px 16px 10px;
		border-radius: 16px;
		border: 3px solid #f18d00;
		max-width: 320px;
		margin: 0 auto 24px;
}
@media screen and (max-width: 767px) {
		.board-balloon-ele {
				width: 75%;
		}
}
.board-balloon-ele::before, .board-balloon-ele::after {
		content: "";
		position: absolute;
		right: 0;
		left: 0;
		width: 0;
		height: 0;
		margin: auto;
		border-style: solid;
		border-width: 22px 14px 0 14px;
}
.board-balloon-ele::before {
		bottom: -24px;
		border-color: #f18d00 transparent transparent transparent;
}
.board-balloon-ele::after {
		bottom: -19px;
		border-color: #fff transparent transparent transparent;
		z-index: 1;
}
/* ボタン */
.btn-primary.entry, .btn-primary.member {
		display: inline-block;
		line-height: 1.4;
		max-width: 352px;
		width: 100%;
		min-width: auto;
		min-height: 58px;
		padding: 10px 0;
}
@media screen and (max-width: 767px) {
		.btn-primary.entry, .btn-primary.member {
				background-position: 16px center;
				background-size: 28px auto;
		}
}
.btn-primary.entry .fs-sm, .btn-primary.member .fs-sm {
		font-size: 12px;
		display: block;
}
.btn-primary.entry {
		background: #d9161b url(/common_v10/images/icn-think-white.svg) no-repeat 20px center/32px auto;
}
.btn-primary.member {
		color: #333 !important;
		border-color: #f5d200;
		background: #f5d200 url(/common_v10/images/icn-member.svg) no-repeat 20px center/32px auto;
}
.btn-primary.member.btn-blank::after {
		background-image: url(/common_v10/images/icn-link-blank-black.svg);
}

/* J:COM 電力への切替はとってもかんたん */
.ele-features {
		display: flex;
		justify-content: space-between;
}
@media screen and (max-width: 767px) {
		.ele-features {
				max-width: 280px;
				margin: auto;
				flex-wrap: wrap;
		}
}
.ele-features > .item {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		font-weight: bold;
		line-height: 1.5;
		color: #e83316;
		text-align: center;
		width: 170px;
		height: 170px;
		border-radius: 100px;
		background-color: #f9d9ae;
		background: linear-gradient(#f9d9ae 10%, #fff6e8 90%);
}
@media screen and (max-width: 767px) {
		.ele-features > .item {
				font-size: 18px;
				width: 130px;
				height: 130px;
		}
}

/* 割引イメージグラフ */
.graph {
		position: relative;
		max-width: 736px;
		margin: auto;
}
.graph img.img-small {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
}
.graph div[class^=js-ele_com] {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
}
.graph div[class^=js-ele_com] img {
		width: 100%;
		height: auto;
}
/* 割引イメージをチェック（流用） */
.pricecheck {
		width: 220px;
		padding: 10px;
		margin: 0 auto 50px;
		background: #f5d200;
		position: relative;
		font-weight: bold;
		text-align: center;
}
.pricecheck::after {
		position: absolute;
		content: "";
		width: 220px;
		height: 20px;
		bottom: -20px;
		right: 0;
		border-style: solid;
		border-width: 20px 110px 0 110px;
		border-color: #f5d200 transparent;
}

/* エリア設定モーダル関連 */
#ele-area-setting-btn {
		pointer-events: none;
		color: #999 !important;
}
#ele-area-setting-btn::after {
		opacity: 0.4;
}
#ele-area-setting-btn.enabled {
		pointer-events: auto;
		color: #333 !important;
}
#ele-area-setting-btn.enabled::after {
		opacity: 1;
}

.input-hide {
		display: none !important;
}

/* WEBでかんたんお手続き */
@media screen and (max-width: 767px) {
		.step-list[data-responsive=false] > .col::after,
		.step-list[data-responsive=false] > [class*=col-]::after {
				width: 20px;
				height: 20px;
				top: calc(50% - 10px);
				bottom: 0;
				transform: rotate(0deg);
		}
}
.step-list[data-responsive=false] > [class*=col-]:nth-of-type(1)::after {
		right: -5px;
}
.step-list[data-responsive=false] > [class*=col-]:nth-of-type(2)::after {
		right: -15px;
}