@import "base.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Lato:wght@400;700;900&display=swap');

/* ============================================================
   【一時的な非表示・CSSのみで対応／削除予定】追加日:2026-09-15
   本人指示により、以下2つのメニュー項目をCSSのみで一時的に非表示にしています。
   HTML側（各ページのヘッダー／フッター／SPメニューのマークアップ）は変更していません。
   　・ヘッダー（PCドロップダウン）／フッター（ナビ）／SPメニューの
   　　「環境への取り組みについて」（リンク先: environment/）
   　・フッター／SPメニューの「サイトマップ」（リンク先: sitemap/）
   ※フッター下部の規約リンク行（特定商取引法／個人情報保護方針／サイトマップを
   　「　│　」区切りで並べた1つの<p>）は、区切り文字がHTML中の地の文（テキスト
   　ノード）として直書きされているため、サイトマップの<a>だけをCSSで消しても
   　直前の区切り「　│　」はテキストとして残ります（CSSのみでは除去不可）。
   　この一時対応が不要になったら、このブロックごと削除してください。
   ※各メニュー部品（.overmenu__item a 等）側で個別にdisplay:blockが
   　指定されているため、確実に上書きするよう!importantを付けています。
   ============================================================ */
li:has(> a[href$="environment/"]),
li:has(> a[href$="sitemap/"]){
	display:none !important;
}
a[href$="environment/"],
a[href$="sitemap/"]{
	display:none !important;
}
/* ============================================================
   【一時的な非表示ここまで】
   ============================================================ */

/*
------------------------------------------------------------ */
a{
	color:var(--color-primary);
	text-decoration:none;
	cursor:pointer;
	outline:none;
	-webkit-tap-highlight-color:transparent;
}

/*画像をウインドウサイズに合わせて可変*/
img{
	vertical-align:bottom;
	max-width:100%;
	height:auto;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}

body{
	color:var(--color-text);
	margin:0;
	padding:0;
	font-size:var(--fs-base);
	font-family:'Noto Sans JP', sans-serif;
	font-weight:400;
	line-height:1.8;
	background-color:#fff;
	text-align:center;
	position:relative;
}

#main-wrapper{
	position:relative;
}

main{
	display:block;
}

/* ボタン
--------------------------------------------*/
.btn-link{
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	box-shadow:2px 2px 4px gray;
	aspect-ratio:4 / 3;
}

/* flex 凡庸
--------------------------------------------*/
.flex-block{
	display:flex;
	gap:20px;
}
.flex-cell2 .flexbox{
	flex:50%;
}
.flex-cell3 .flexbox{
	flex:33.3333%;
}
.flex-cell4 .flexbox{
	flex:25%;
}
.flex-cell5 .flexbox{
	flex:20%;
}

.flex-wrap{
	display:flex;
	flex-wrap:wrap;
	gap:20px 20px;
}
.flex-wrap.flex-cell2 .flexbox{
	width:calc((100% - 20px) / 2);
}
.flex-wrap.flex-cell3 .flexbox{
	width:calc((100% - 20px * 2) / 3);
}
.flex-wrap.flex-cell4 .flexbox{
	width:calc((100% - 20px * 3) / 4);
}
.flex-wrap.flex-cell5 .flexbox{
	width:calc((100% - 20px * 4) / 5);
}

/* コンテンツ幅（セクションごとに実寸へ上書きして使用）
------------------------------------------------------------ */
.content-inner{
	width:1100px;
	margin:0 auto;
	text-align:left;
	box-sizing:border-box;
}
.content-innerS{
	width:925px;
	margin:0 auto;
	text-align:left;
	box-sizing:border-box;
}
.content-full-inner{
	width:100%;
}

/* 汎用パーツ：見出し・マーカー
------------------------------------------------------------ */
.sec-ttl{
	position:relative;
	text-align:center;
	font-size:var(--fs-title);
	font-weight:700;
	line-height:1.5;
	color:var(--color-text);
	margin:0 0 40px;
}
.sec-ttl__ico{
	display:inline-block;
	vertical-align:top;
	margin:0 6px -6px 0;
}
.sec-ttl__accent{
	color:var(--color-primary);
}
.sec-ttl--wave{
	position:relative;
	display:inline-block;
	padding:0 50px;
}
.sec-ttl--wave:before,
.sec-ttl--wave:after{
	content:"";
	position:absolute;
	top:-15px;
	width:40px;
	height:60px;
	background:var(--color-pink);
}
.sec-ttl--wave:before{
	left:0;
	background:url(../images/txt_left.png) left center no-repeat;
	background-size:40px auto;
}
.sec-ttl--wave:after{
	right:0;
	background:url(../images/txt_right.png) right center no-repeat;
	background-size:40px auto;
}

.badge-pill{
	display:inline-block;
	background:var(--color-primary);
	color:#fff;
	font-size:var(--fs-base);
	font-weight:700;
	border-radius:30px;
	padding:3px 14px;
	margin-right:10px;
	vertical-align:middle;
}

.mark{
	background:linear-gradient(transparent 65%, var(--color-yellow) 65%);
}
.mark--pink{
	color:var(--color-pink);
	background:none;
}
.mark--blue{
	color:var(--color-primary);
	background:none;
}
.mark--sm{
	font-weight:700;
}

.ornament{
	position:relative;
	display:inline-block;
	color:var(--color-primary);
	padding:0 50px;
}
.ornament:before,
.ornament:after{
	content:"";
	position:absolute;
	top:0;
	bottom:4px;
	width:40px;
	height:60px;
}
.ornament:before{
	left:0;
	background:url(../images/txt_left.png) left center no-repeat;
	background-size:40px auto;
}
.ornament:after{
	right:0;
	background:url(../images/txt_right.png) right center no-repeat;
	background-size:40px auto;
}

/* 汎用パーツ：矢印アイコン
------------------------------------------------------------ */
.ico-arrow-circle{
	position:relative;
	display:inline-block;
	width:26px;
	height:26px;
	border-radius:50%;
	background:rgba(255,255,255,1);
	flex:none;
}
.ico-arrow-circle:before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:0;
	height:0;
	border-style:solid;
	border-width:5px 0 5px 7px;
	border-color:transparent transparent transparent currentColor;
	transform:translate(-35%,-50%);
}
.ico-arrow-circle--outline{
	background:var(--color-primary);
	color:#fff;
}

.sp-menu__outline-row .ico-arrow-circle:before{
	border-color:transparent transparent transparent #fff;
}
.sp-menu__outline-row .ico-arrow-circle--outline{
	background:var(--color-navy);
}

/* 汎用パーツ：ボタン（塗り／アウトライン共通）
------------------------------------------------------------ */
.btn-round{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	min-width:280px;
	padding:16px 41px 16px 30px;
	background:var(--color-primary);
	color:#fff;
	font-size:var(--fs-label);
	font-weight:700;
	text-align:center;
	text-decoration:none;
	border-radius:40px;
	border:2px solid var(--color-primary);
	/*box-shadow:0 3px 0 rgba(0,0,0,.08);*/
	transition:.2s ease-in-out;
}
.btn-round:hover{
	opacity:.8;
}
.btn-round img{
	flex:none;
}
.btn-round:after{
	content:"";
	position:absolute;
	right:22px;
	top:50%;
	width:0;
	height:0;
	border-style:solid;
	border-width:7px 0 7px 11px;
	border-color:transparent transparent transparent #fff;
	transform:translateY(-50%);
}

.btn-round--outline{
	background:#fff;
	color:var(--color-primary);
	border-color:var(--color-primary);
}
.btn-round--outline:after{
	border-left-color:var(--color-primary);
}

.btn-round--blue{
	background:var(--color-primary);
	border-color:var(--color-primary);
}
.btn-round--green{
	background:var(--color-green);
	border-color:var(--color-green);
}
.btn-round--pink{
	background:var(--color-pink);
	border-color:var(--color-pink);
}
.btn-round--navy{
	background:var(--color-navy);
	border-color:var(--color-navy);
}
.btn-round--line{
	background:var(--color-line);
	border-color:var(--color-line);
}

.btn-round--sm{
	min-width:200px;
	padding:8px 40px 8px 24px;
	font-size:var(--fs-m);
}
.btn-round--sm:after{
	position:absolute;
	right:15px;
	top:50%;
	transform:translateY(-50%) scale(.8);
}
.btn-round--wide{
	width:399px;
	max-width:100%;
	min-width:0;
	height:69px;
	box-sizing:border-box;
	padding:0 60px;
}
.btn-round--wide:after{
	position:absolute;
	right:22px;
	top:50%;
	transform:translateY(-50%);
}

/* CTAブロック（10.jpg）専用ボタン：角丸矩形＋右端に無地の三角矢印（丸背景なし） */
.btn-cta{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:60px;
	padding:0 44px 0 28px;
	box-sizing:border-box;
	background:var(--color-primary);
	color:#fff;
	font-size:var(--fs-m);
	font-weight:700;
	text-decoration:none;
	border-radius:12px;
	box-shadow:0 3px 0 rgba(0,0,0,.08);
	transition:.2s ease-in-out;
}
.btn-cta img{
	flex:none;
	margin-right:8px;
}
.btn-cta:after{
	content:"";
	position:absolute;
	right:22px;
	top:50%;
	width:0;
	height:0;
	border-style:solid;
	border-width:6px 0 6px 10px;
	border-color:transparent transparent transparent #fff;
	transform:translateY(-50%);
}
.btn-cta--blue{
	background:var(--color-primary);
}
.btn-cta--green{
	background:var(--color-green);
}
.btn-cta--pink{
	background:var(--color-pink);
}
.btn-cta--outline{
	background:#fff;
	color:var(--color-navy);
	border:2px solid var(--color-navy);
	padding:0 42px 0 26px;
}
.btn-cta--outline:after{
	border-left-color:var(--color-navy);
}

.link-round{
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-size:var(--fs-base-s);
	font-weight:700;
	text-decoration:underline;
	color:var(--color-navy);
}
.link-round:after{
	content:"";
	flex:none;
	width:20px;
	height:20px;
	border-radius:50%;
	background-color:var(--color-navy);
}
.link-round:before{
	content:"";
	position:absolute;
	right:5.3px;
	top:50%;
	width:0;
	height:0;
	border-style:solid;
	border-width:4.5px 0 4.5px 7px;
	border-color:transparent transparent transparent #fff;
	transform:translateY(-50%);
}


/**/
.link-arrow{
	position: relative;
	text-decoration: none;
	padding-right: 30px;
}
.link-arrow:before{
	content:"";
	position:absolute;
	right:5.3px;
	top:50%;
	width:0;
	height:0;
	border-style:solid;
	border-width:8px 0 8px 13px;
	border-color:transparent transparent transparent var(--color-navy);
	transform:translateY(-50%);
}


/* ==================== header ==================== */
#header{
	position:sticky;
	top:0;
	z-index:1020;
	width:100%;
	background:#fff;
	transition:box-shadow .25s ease;
}
#header.is-fixed{
	box-shadow:0 4px 14px rgba(0,0,0,.1);
}
.header__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.header__inner--full{
	width:100%;
	margin:0;
	padding:0 10px 0 30px;
	box-sizing:border-box;
}
.header__top{
	padding:14px 0 0 0;
	transition:padding .25s ease;
}
#header.is-fixed .header__top{
	padding:10px 0;
}
#header.is-fixed .header__tagline{
	display:none;
}
#header.is-fixed .header__logo img{
	width:150px;
	height:auto;
}
#header.is-fixed .header__buttons-item--contact{
	display:none;
}
.header__brand{
	text-align:left;
}
.header__tagline{
	display:inline;
	font-size:var(--fs-note);
	margin:0 0 8px;
	color:var(--color-text);
	font-weight:700;
}
.header__logo{
	margin:0;
}
.header__logo img{
	display:block;
}

.header__side{
	display:flex;
	align-items:center;
	gap:32px;
}
.header__utility{
	display:flex;
	gap:24px;
	list-style:none;
	margin:0;
	padding:0;
	font-size:var(--fs-text-s);
	font-weight:500;
}
.header__utility a{
	color:#666;
	text-decoration:none;
}
.header__utility-item.dropdown > .n-inner > a{
	color:#666;
	font-weight:500;
}
.header__utility-item.dropdown.open > .n-inner > a{
	color:var(--color-navy);
	font-weight:500;
}
.header__utility-item.has-caret > .n-inner > a:after{
	content:"";
	display:inline-block;
	margin-left:6px;
	margin-top:-0.2em;
	width:8px;
	height:8px;
	border-right:2px solid var(--color-navy);
	border-bottom:2px solid var(--color-navy);
	transform:rotate(45deg) translateY(-2px);
	vertical-align:middle;
}
.header__buttons{
	display:flex;
	align-items:stretch;
	gap:12px;
	list-style:none;
	margin:0;
	padding:0;
}
.btn-header{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:4px;
	box-sizing:border-box;
	width:114px;
	height:59px;
	font-size:var(--fs-small);
	font-weight:700;
	color:var(--color-navy);
	text-decoration:none;
	background:#fff;
	border:2px solid var(--color-navy);
	border-radius:8px;
	line-height:1.2;
}
.btn-header__ico{
	display:block;
}
.btn-header--primary,
.btn-header--pink{
	flex-direction:row;
	gap:8px;
	width:auto;
	min-width:180px;
	padding:0 20px;
	border:none;
	white-space:nowrap;
}
.btn-header--primary{
	background:var(--color-primary);
	color:#fff;
}
.btn-header--pink{
	background:var(--color-pink);
	color:#fff;
	min-width:194px;
}

/* 追従（コンパクト）ヘッダー時のボタン */
#header.is-fixed .btn-header{
	height:48px;
	gap:8px;
}
#header.is-fixed .btn-header:not(.btn-header--primary):not(.btn-header--pink){
	flex-direction:row;
	width:auto;
	min-width:0;
	padding:0 18px;
}
#header.is-fixed .btn-header--primary,
#header.is-fixed .btn-header--pink{
	height:48px;
	min-width:0;
	padding:0 22px;
}
#header.is-fixed .btn-header--primary .btn-header__ico,
#header.is-fixed .btn-header--pink .btn-header__ico{
	display:none;
}

.gnav{
	display:flex;
	justify-content:center;
	list-style:none;
	margin:0;
	padding:0;
}
.gnav__item{
	text-align:center;
}
.gnav__item a{
	display:block;
	padding:14px 24px;
	color:var(--color-text);
	font-weight:700;
	text-decoration:none;
}
.gnav__item a:hover{
	opacity: 1;
	color:var(--color-navy);
}
.gnav__item.dropdown.open > .n-inner > a{
	color:var(--color-navy);
}

/* ==================== dropdown / overmenu（ヘッダーのプルダウン） ==================== */
.dropdown{
	position:relative;
}
.dropdown .n-inner{
	display:flex;
	align-items:center;
}
.gnav__item.dropdown .n-inner{
	justify-content:center;
}
.dropdown .toggle-icon{
	display:none;
}
.overmenu{
	display:none;
	position:absolute;
	top:60%;
	left:50%;
	transform:translateX(-50%);
	margin:14px 0 0 0;
	padding:10px 15px 15px 15px;
	min-width:100px;
	background:#fff;
	border:1px solid var(--color-border);
	border-radius:8px;
	box-shadow:0 10px 28px rgba(0,0,0,.12);
	list-style:none;
	text-align:left;
	white-space:nowrap;
	z-index:1040;
}
.overmenu__item + .overmenu__item{
	margin-top:0px;
}
.overmenu__item--sep{
	margin-top:0px;
}
.overmenu__item a{
	display:block;
	font-size:var(--fs-base-s);
	font-weight:400;
	color:var(--color-navy);
	text-decoration:underline;
	text-underline-offset:5px;
	padding:7px 0;
}

/* ==================== main slider ====================
------------------------------------------------------------------------- */
.main-slider{
	--slide-gap:5px;
	/* スライド間の隙間。ここを変更すると隙間が調整できます */
	position:relative;
	overflow:hidden;
	background:#fff;
}
.main-slider__list{
	visibility:hidden;
}
/* slick初期化後にJS側でvisibleにする（FOUC防止） */
.main-slider__list.slick-initialized{
	visibility:visible;
}
.main-slider .slick-track{
	display:flex;
	align-items:center;
}
.main-slider__slide{
	margin:0 var(--slide-gap);
	opacity:.4;
	transition:opacity .3s ease;
}
.main-slider__slide.slick-current{
	opacity:1;
}

.main-slider__slide a{
	display: block;
}
.main-slider__slide img{
	display:block;
	width:100%;
	height:auto;
}
.main-slider__arrow{
	position:absolute;
	top:50%;
	width:40px;
	height:40px;
	margin-top:-20px;
	border-radius:50%;
	background:#fff;
	box-shadow:0 2px 8px rgba(0,0,0,.15);
	border:none;
	cursor:pointer;
	z-index:2;
}
.main-slider__arrow:before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:14px;
	height:14px;
	border-top:2px solid var(--color-primary);
	border-right:2px solid var(--color-primary);
	border-radius:2px;
}
.main-slider__arrow--prev{
	left:21.5%;
}
.main-slider__arrow--prev:before{
	transform:translate(-30%,-50%) rotate(-135deg);
}
.main-slider__arrow--next{
	right:21.5%;
}
.main-slider__arrow--next:before{
	transform:translate(-70%,-50%) rotate(45deg);
}

/* ==================== quick cta（3ボタン） ==================== */
.quick-cta{
	position:relative;
	margin-top:33px;
	z-index:10;
}

.quick-cta__list{
	display:flex;
	justify-content:space-between;
	list-style:none;
	margin:0;
	padding:0;
}
.quick-cta__item{
	width:349px;
}
.quick-cta__item a{
	position:relative;
	display:flex;
	align-items:center;
	gap:19px;
	height:120px;
	padding:0 20px 0 29px;
	border-radius:12px;
	box-shadow:0 8px 0px rgba(0,0,0,.12);
	text-decoration:none;
	color:#fff;
	bottom:0;
	transition:.3s ease;
}

/*
.quick-cta__item a:hover{
	bottom:-8px;
	box-shadow:0 0px 0px rgba(0,0,0,.12);
}
*/
.quick-cta__item a .ico-arrow-circle{
	position:absolute;
	right:20px;
	top:50%;
	transform:translateY(-50%);
}
.quick-cta__item--blue a{
	background:var(--color-primary);
}
.quick-cta__item--green a{
	background:var(--color-green);
}
.quick-cta__item--pink a{
	background:var(--color-pink);
}
.quick-cta__ico{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:none;
	width:70px;
	height:70px;
	background:#fff;
	border-radius:50%;
}
.quick-cta__ico img{
	width:58%;
	height:auto;
	object-fit:cover;
}
.quick-cta__item--pink .quick-cta__ico img{
	width:48%;
}
.quick-cta__label{
	flex:1;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.4;
}
.quick-cta__item--blue .ico-arrow-circle{
	color:var(--color-primary);
}
.quick-cta__item--green .ico-arrow-circle{
	color:var(--color-green);
}
.quick-cta__item--pink .ico-arrow-circle{
	color:var(--color-pink);
}

/* ==================== 選ばれる理由 ==================== */
.reason{
	padding-top:90px;
}

.feature4{
	background:url(../images/bg_blue.jpg) center bottom no-repeat;
	background-size:100% 70%;
	padding-bottom:50px;
}
.feature4__list{
	display:flex;
	justify-content:space-between;
	list-style:none;
	margin:0;
	padding:0;
}
.feature4__item{
	width:250px;
	text-align:center;
}
.feature4__img{
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:19px;
	padding:15px 30px;
	background:#fff;
	border-radius:12px;
	box-shadow:0 2px 10px rgba(0,0,0,.06);
	box-sizing:border-box;
}

.feature4__badge{
	margin:0;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.45;
}

.feature4__badge sup{
	font-size:var(--fs-sup);
	vertical-align:top;
}

.reason__note{
	font-size:var(--fs-note);
	margin:25px auto 0;
	text-align:right;
}

.bg-soft{
	background:linear-gradient(180deg, #e6f9ff 0%, #cbf0ff 100%);
	padding:1px 0 60px;
	position:relative;
}

/* プロモーション共通（ガソリン・ポイント）
------------------------------------------------------------ */
.promo{
	padding:20px 0 20px 0;
	text-align:center;
}
.promo__inner{
	background:#fff;
	border-radius:20px;
	padding:50px 60px;
	box-sizing:border-box;
	text-align:center;
}
.promo--point .promo__inner{
	padding-top:20px;
}
.promo__mascot{
	position:relative;
	z-index:1;
	margin:0 auto -50px auto;
	line-height:0;
	text-align:center;
	width:190px;
}
.promo__eyebrow-accent{
	color:var(--color-primary);
}
.promo__badge{
	display:inline-block;
	margin:30px 0 0 0;
	padding:5px 10px;
	background:var(--color-primary);
	color:#fff;
	font-size:38px;
	font-weight:700;
	line-height:1.2;
}
.promo__eyebrow{
	margin:15px 0 0 0;
	font-size:var(--fs-xl);
	font-weight:700;
	text-align:center;
}
.promo__lead2{
	font-size:var(--fs-title);
	font-weight:700;
}
.promo__catch{
	font-size:var(--fs-large);
	font-weight:700;
	color:var(--color-pink);
}
.promo__catch-text{
	color:var(--color-pink);
}
.promo__catch-num{
	font-style:normal;
	font-size:125px;
	margin:0 2px;
}
.promo__catch--point{
	display:flex;
	align-items:flex-end;
	justify-content:center;
	gap:14px;
	color:var(--color-pink);
	font-size:var(--fs-xl);
	margin-top:-1em;
}
.promo__catch--point .promo__catch-text{
	font-size:var(--fs-l);
	color:var(--color-pink);
	font-weight:700;
}
.promo__catch-num--sm{
	font-size:90px;
	margin-bottom:-0.3em;
}
.promo__catch-num--sm i{
	font-size:44px;
	font-style:normal;
}
.promo__catch--point img{
	display:inline-block;
	margin-bottom:0.2em;
}
/* ガソリン特典「いつでも給油が5円引き」: 黄色塗り＋ピンク縁取りの吹き出し文字 */
.promo--gasoline .promo__catch{
	display:flex;
	align-items:baseline;
	justify-content:center;
	flex-wrap:wrap;
	gap:0 6px;
	margin-top:-1.2em;
}
.promo--gasoline .promo__catch-text{
	font-size:var(--fs-large);
}


.promo--gasoline .promo__catch-num,
.promo--gasoline .promo__catch-suffix{
	color:var(--color-yellow);
	-webkit-text-stroke:13px var(--color-pink);
	paint-order:stroke fill;
	text-shadow:0 0 1px var(--color-pink);
	filter:drop-shadow(2px 2px 0 var(--color-pink));
}

.promo--gasoline .promo__catch-suffix{
	font-size:var(--fs-large-xl);
	margin-left:2px;
}
.promo--gasoline .promo__catch-suffix i{
	color:#fff;
	font-style:normal;
	display:inline-block;
	margin-left:0.1em;
}
.promo__lead{
	font-size:var(--fs-m);
	margin:0 0 30px;
}

.promo--point .promo__catch-text{
	font-size:var(--fs-xl);
}

.promo--point .promo__lead{
	font-size:var(--fs-label);
	font-weight:700;
}
.promo__illust{
	display:flex;
	align-items:flex-end;
	justify-content:center;
	gap:16px;
	margin:0 0 30px;
}
.promo__action{
	margin:0;
	text-align:center;
	margin-bottom:20px;
}

.point-box-list{
	display:flex;
	gap:36px;
	margin:0 0 54px;
}
.point-box{
	text-align:center;
}
.point-box--wide{
	width:472px;
}
.point-box--narrow{
	width:472px;
}
.point-box__card{
	display:block;
	background:var(--color-bg-gray);
	border-radius:12px;
	padding:24px;
	margin:0 0 24px;
	border:solid #e8e8e8 2px;
	color:inherit;
	text-decoration:none;
	transition:box-shadow .2s ease;
}

.point-box__btn{
	display:flex;
	align-items:center;
	justify-content:center;
	width:70%;
	height:38px;
	margin:20px auto 0;
	background:#0071b9;
	border-radius:24px;
}
.point-box__btn:after{
	content:"";
	width:12px;
	height:12px;
	margin-top:-6px;
	border-right:3px solid #fff;
	border-bottom:3px solid #fff;
	transform:rotate(45deg);
}
.point-box__logo{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 0 16px;
	height:112px;
}
.point-box__logo img{
	margin:0 auto;
	display:block;
}
.point-box--wide .point-box__logo img{
	width:424px;
}
.point-box--narrow .point-box__logo img{
	width:172px;
}
.point-box__label{
	font-size:var(--fs-m);
	font-weight:700;
	margin:0;
}
.point-box__text{
	line-height:1.7;
	margin:0;
	text-align:left;
}
.promo--point .point-box__note{
	margin:0 0 55px;
	padding:24px 15px;
	background:var(--color-bg-gray);
	border-radius:8px;
	font-weight:400;
	color:var(--color-text);
}

/* ==================== 料金プラン ==================== */
.plan{
	padding:100px 0 0;
}
.plan.page-plan{
	padding-top: 50px;
}

.plan__inner{
	text-align:center;
}
.plan__list{
	display:flex;
	align-items:stretch;
	justify-content:space-between;
	list-style:none;
	margin:0 0 20px;
	padding:0;
}
.plan-card{
	width:31.5%;
	text-align:left;
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 2px 12px rgba(0,0,0,.08);
	background:#fff;
	display:flex;
	flex-direction:column;
}
.plan-card a{
	display:flex;
	flex-direction:column;
	height:100%;
	color:var(--color-text);
	text-decoration:none;
}
.plan-card__img{
	display:block;
	aspect-ratio:698/448;
	overflow:hidden;
}
.plan-card__img img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.plan-card__body{
	display:flex;
	flex-direction:column;
	align-items:center;
	flex:1;
	padding:22px 20px 26px;
	text-align:center;
}
.plan-card__name{
	display:block;
	font-size:var(--fs-title);
	font-weight:700;
	color:#0071b9;
	margin-bottom:8px;
}
.plan-card__desc{
	display:block;
	font-size:var(--fs-m);
	font-weight:700;
	margin-bottom:15px;
	flex:1;
	line-height:1.5;
}

.plan__eco{
	margin:15px 0 0 0;
	text-align:right;
}

.plan__compare-anchor{
	margin:30px 0 0 0;
	text-align:center;
}
.btn-x-circle{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:600px;
	max-width:100%;
	height:70px;
	box-sizing:border-box;
	padding:0 60px;
	background:var(--color-primary);
	border-radius:10px;
	color:#fff;
	font-size:var(--fs-l);
	font-weight:700;
	text-decoration:none;
}
.ico-x-circle{
	position:absolute;
	right:22px;
	top:50%;
	width:34px;
	height:34px;
	border-radius:50%;
	background:#fff;
	transform:translateY(-50%);
}
/* 閉じている時：三角矢印（他の丸アイコンボタンと共通のデザイン） */
.ico-x-circle:before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:0;
	height:0;
	border-style:solid;
	border-width:9px 6px 0 6px;
	border-color:var(--color-primary) transparent transparent transparent;
	transform:translate(-50%,-35%);
	transition:opacity .15s ease;
}
/* 開いている時：✕アイコン */
.ico-x-circle__x{
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity .15s ease;
}
.ico-x-circle__x:before,
.ico-x-circle__x:after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:14px;
	height:2px;
	background:var(--color-primary);
}
.ico-x-circle__x:before{
	transform:translate(-50%,-50%) rotate(45deg);
}
.ico-x-circle__x:after{
	transform:translate(-50%,-50%) rotate(-45deg);
}

.js-accordion-toggle.is-open .ico-x-circle:before{
	opacity:0;
}
.js-accordion-toggle.is-open .ico-x-circle__x{
	opacity:1;
}

.plan__compare{
	display:none;
	text-align:center;
	padding:50px 0 0 0;
}
.plan__compare-sub{
	margin:0 0 4px;
	font-size:var(--fs-l);
	font-weight:700;
}
.plan__compare-ttl{
	margin:0 0 24px;
	font-size:var(--fs-xl);
	font-weight:700;
}

.plan__compare-table-wrap{
	margin:0;
}
.plan__compare-table{
	border-collapse:collapse;
	table-layout:fixed;
	text-align:center;
}
.plan__compare-table th,
.plan__compare-table td{
	box-sizing:border-box;
	border:1px solid var(--color-bg-blue);
	vertical-align:middle;
}
.plan__compare-table-col--situation{
	width:300px;
}
.plan__compare-table-col--household{
	width:100px;
}
.plan__compare-table-col--current{
	width:350px;
}
.plan__compare-table-col--result{
	width:350px;
}
.plan__compare-table thead th{
	padding:15px 10px;
	background:var(--color-primary);
	color:#fff;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.4;
}
.plan__compare-table tbody tr:nth-child(2){
	background:var(--color-bg-primary);
}
.plan__compare-table-situation{
	padding:24px 20px 24px 26px;
	text-align:left;
}
.plan__compare-table-head{
	display:flex;
	align-items:center;
	gap:16px;
}
.plan__compare-table-icon{
	flex:none;
	width:50px;
	height:auto;
}
.plan__compare-table-label{
	display:block;
	font-size:23px;
	font-weight:700;
	line-height:1.3;
}
.plan__compare-table-note{
	display:block;
	margin-top:8px;
	font-size:var(--fs-small);
	font-weight:500;
	color:#666;
}
.plan__compare-table-household{
	padding:24px 8px;
	text-align:center;
	font-size:19px;
	font-weight:700;
	line-height:1.4;
}
.plan__compare-table-current{
	padding:24px 0 24px 5%;
	text-align:left;
	font-size:19px;
	font-weight:500;
	line-height:1.4;
	color:#333;
}
.plan__compare-table-result{
	padding:24px 0 24px 4.5%;
	text-align:left;
	font-size:27px;
	font-weight:700;
	color:var(--color-navy);
}
.plan__compare-table-result a{
	color:var(--color-navy);
}


/* ==================== モデルケース ==================== */
.model-case{
	padding:100px 0 100px 0;
}
.model-case__inner{
	width:926px;
	text-align:center;
}
.model-case .sec-ttl{
	margin-bottom:0px;
}

.example-card{
	position:relative;
	background:var(--color-bg-blue);
	border-radius:20px;
	padding:36px;
	margin-top:36px;
	text-align:center;
}
.example-card__catch{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	font-size:var(--fs-large-m);
	font-weight:700;
	margin:0 0 20px;
	color:var(--color-yellow);
	-webkit-text-stroke:10px #004baf;
	paint-order:stroke fill;
	color:#fff;
}

.example-card__catch em,
.example-card__catch-white{
	font-style:normal;
	color:#fff;
}
.example-card__catch em{
	font-size:var(--fs-large-xl);
	color:var(--color-yellow);
	margin-top:-0.2em;
	filter:drop-shadow(3px 4px 0 #0069b9);
}
.example-card__ico{
	flex:none;
}
.example-card__box{
	position:relative;
	background:#fff;
	border-radius:16px;
	padding:26px 30px;
	margin:0 0 16px;
}
.example-card__catch span{
	filter:drop-shadow(3px 4px 0 #0069b9);
}
.example-card__catch em i{
	font-size:var(--fs-large-m);
	font-style:normal;
	display:inline-block;
	margin-bottom:0.2em;
	margin-left:0.1em;
}

.example-card--point .example-card__catch span,
.example-card--point .example-card__catch em{
	font-size:var(--fs-large);
	margin:0;
}

.example-card__sub{
	font-size:var(--fs-label);
	margin:0 0 12px;
}
.example-card__num{
	font-size:var(--fs-xl);
	font-weight:700;
	margin:0;
	color:var(--color-pink);
}
.example-card__num strong{
	font-size:var(--fs-large-l);
}
.example-card__num strong span{
	font-size:var(--fs-large-l);
}

.example-card__mascot{
	position:absolute;
	right:-20px;
	bottom:-10px;
}
.example-card__mascot--left{
	position:absolute;
	left:-24px;
	bottom:-12px;
	z-index:1;
}

.example-card--point .example-card__box{
	padding-left:170px;
	text-align:left;
}
.example-card--point .example-card__sub{
	text-align:left;
}
.example-card__note{
	margin:5px 0 0 0;
}

/* ==================== CTA（電話/シミュレーション/申込み） ==================== */
.cta-block{
	padding:55px 0;
	background:var(--color-bg-blue);
	text-align:center;
}

.cta-block__head{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:24px;
	margin:0 0 20px;
	position:relative;
}
.cta-block__ttl{
	margin:0;
	text-align:center;
	display:inline-block;
	position:relative;
}
.cta-block__ttl-badge{
	display:block;
	margin:0 auto 8px;
	padding:5px 34px;
	background:var(--color-navy);
	color:#fff;
	border-radius:30px;
	font-size:var(--fs-title);
	font-weight:700;
	line-height:1.2;
	width:fit-content;
}
.cta-block__ttl-text{
	display:block;
	font-size:var(--fs-title);
	font-weight:700;
	color:var(--color-navy);
}
.cta-block__mascots{
	position:absolute;
	right:30px;
	display:flex;
	align-items:flex-end;
	gap:6px;
	margin:0;
}
.cta-block__mascot{
	flex:none;
}

.cta-block__list{
	display:flex;
	justify-content:space-between;
	list-style:none;
	margin:0;
	padding:0;
}
.cta-card{
	width:31.5%;
	background:#fff;
	border-radius:16px;
	padding:40px 24px;
	box-sizing:border-box;
	text-align:center;
}
.cta-card__ttl{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	font-size:var(--fs-footer-nav);
	font-weight:700;
	margin:0 0 16px;
}
.cta-card__ttl-icons{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
}
.cta-card__sub-list{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:12px;
}
.cta-card__sub-ttl{
	font-size:var(--fs-base-s);
	font-weight:700;
	margin:0 0 16px;
}
.cta-card--tel .cta-card__sub-ttl{
	margin:16px 0 2px;
}
.cta-card__action{
	margin:0 0 16px;
}
.cta-card__note{
	margin:0;
	color:#666;
}
.cta-card__tel-btn{
	font-family:"Lato", sans-serif;
	font-size:23px;
	font-weight:700;
}
.cta-card__tel-btn img{
	width:31px;
	height:31px;
}

/* ==================== No1実績 ==================== */
.achievement{
	padding:120px 0 100px 0;
	text-align:center;
}

.achievement__row{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:80px;
}
.achievement__col{
	text-align:center;
}
.achievement__lead{
	margin:0 0 8px;
	font-size:var(--fs-label-l);
	line-height:1.3;
	font-weight:700;
}
.achievement__ttl{
	margin:0 0 24px;
	font-size:62px;
	line-height:1.3;
	font-weight:700;
	color:var(--color-text);
}
.achievement__badge{
	display:inline-flex;
	align-items:center;
	gap:24px;
	margin:0;
	white-space:nowrap;
}
.achievement__badge img{
	margin:0 auto;
}

.achievement__img{
	flex:none;
	width:400px;
}
.achievement__note{
	font-size:var(--fs-note);
	margin:26px 0 0;
}

/* ==================== 安心 ==================== */
.safety{
	position:relative;
	padding:120px 0 80px 0;
	background:var(--color-bg-gray) url(../images/bg_gray.jpg) center top no-repeat;
	background-size:100% 500px;
}

.safety__inner{
	position:relative;
	z-index:1;
}
.safety-card-list{
	display:flex;
	justify-content:space-between;
	list-style:none;
	margin:0 0 60px;
	padding:0;
	text-align:center;
}
.safety-card-list__inner{
	border-radius:16px;
	overflow:hidden;
	background-color:#fff;
	box-shadow:0 2px 12px rgba(0,0,0,.06);
}

.safety-card{
	width:31.5%;
}

.safety-card__label{
	display:inline-block;
	padding:8px 40px;
	background:#fff;
	border:3px solid var(--color-primary);
	color:var(--color-primary);
	border-radius:30px;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.2;
	position:relative;
	bottom:-25px;
}

.safety-card__ttl{
	font-size:var(--fs-title);
	font-weight:700;
	line-height:1.4;
	color:#fff;
	text-align:center;
	padding:60px 20px 70px 20px;
	margin-top:-20px;
	background-color:var(--color-primary);
}

.safety-card__img{
	display:block;
	height:145px;
	margin-top:-40px;
}
.safety-card__img img{
	width:80%;
	display:block;
	margin:0 auto;
}
.safety-card__desc{
	line-height:1.5;
	margin:20px 0 0 0;
	text-align:left;
	padding:0 10%;
	min-height:115px;
}

.safety-simple{
	background:#fff;
	border-radius:16px;
	padding:50px 100px;
	text-align:center;
}
.safety-simple__lead{
	font-size:var(--fs-label-l);
	font-weight:700;
	line-height:1.7;
	margin:0 0 30px;
}
.safety-point-list{
	display:flex;
	justify-content:center;
	gap:36px;
	list-style:none;
	margin:30px 0 30px 0;
	padding:20px 0 0 0;
}
.safety-point{
	width:237px;
	background:#fff;
	border:2px solid var(--color-primary);
	border-radius:12px;
	padding:0 0 17px;
}
.safety-point__circle{
	display:flex;
	align-items:center;
	justify-content:center;
	width:120px;
	height:120px;
	margin:-25px auto 10px;
	border-radius:50%;
	background:var(--color-bg-blue);
}
.safety-point__ico--5min{
	width:66px;
	height:113px;
}
.safety-point__circle em{
	font-style:normal;
	font-weight:700;
	font-size:var(--fs-large-l);
	color:var(--color-primary);
}
.safety-point__label{
	margin:0;
	font-size:var(--fs-l);
	font-weight:700;
	text-align:center;
	line-height:1.3;
}
.safety-point__label strong{
	color:var(--color-primary);
	font-size:46px;
}
.safety-point__label strong span{
	font-size:35px;
}
.safety-point-wide-list{
	display:flex;
	justify-content:center;
	gap:32px;
	margin:0 0 24px;
}
.safety-point-wide{
	display:flex;
	align-items:center;
	justify-content:center;
	width:377px;
	height:70px;
	margin:0;
	border:2px solid var(--color-primary);
	border-radius:12px;
	font-size:29px;
	font-weight:700;
}
.safety-simple__note{
	line-height:1.7;
	margin:0;
	text-align:left;
}

/* ==================== 利用開始までの流れ ==================== */
.flow{
	padding:80px 0;
	background:var(--color-bg-primary);
	text-align:center;
}

.flow__sub{
	font-size:var(--fs-label);
	font-weight:700;
	text-align:center;
	margin-top:-2em;
}
.flow-step-list{
	display:flex;
	justify-content:space-between;
	list-style:none;
	margin:40px 0 40px;
	padding:0;
}
.flow-step{
	width:31.5%;
	background:#fff;
	border-radius:16px;
	padding:30px 24px;
	box-sizing:border-box;
	text-align:center;
}
.flow-step__num{
	display:inline-block;
	padding:5px 18px;
	background:var(--color-primary);
	color:#fff;
	font-size:var(--fs-text-s);
	border-radius:20px;
	margin-bottom:16px;
	line-height:1.2;
}
.flow-step__ico{
	display:block;
	height:59px;
	margin:0 auto 16px;
}
.flow-step__ttl{
	font-size:var(--fs-l);
	font-weight:700;
	margin:0 0 12px;
}
.flow-step__desc{
	line-height:1.7;
	margin:0;
	text-align:left;
}
.flow__action{
	margin:0;
	text-align:center;
}

/* ==================== お知らせ ==================== */
.news{
	padding:80px 0;
}
.news__inner{
	width:1000px;
	text-align:center;
}
.news-important{
	display:flex;
	align-items:center;
	gap:30px;
	margin:0 0 20px;
	padding:24px 30px;
	background:var(--color-bg-pink);
	border-radius:12px;
	text-align:left;
}
.news-important__label{
	flex:none;
	font-size:var(--fs-m);
	font-weight:700;
	color:var(--color-pink);
	margin:0;
	width:20%;
	text-align:center;
}
.news-important__list{
	flex:1;
	list-style:none;
	margin:0;
	padding:0;
}
.news-important__item{
	display:flex;
	gap:20px;
	padding:6px 0;
	font-size:var(--fs-text-s);
}
.news-important__item a{
	color:var(--color-pink);
	text-decoration:underline;
}
.news-important__date{
	flex:none;
	color:var(--color-pink);
}
.news-list{
	list-style:none;
	margin:0 0 30px;
	padding:0;
}
.news-list__item{
	display:flex;
	align-items:center;
	gap:20px;
	padding:16px 0;
	border-bottom:1px solid var(--color-border);
}
.news-list__item:first-child{
	border-top:1px solid var(--color-border);
}
.news-list__date{
	flex:none;
	color:#777;
}
.news-tag{
	flex:none;
	display:inline-block;
	min-width:100px;
	text-align:center;
	padding:4px 15px;
	font-size:var(--fs-note);
	border:1px solid var(--color-primary);
	color:var(--color-primary);
	border-radius:20px;
}
.news-list__item a{
	color:var(--color-text);
	text-decoration:none;
}
.news__action{
	margin:0;
	text-align:right;
}

/* ==================== よくある質問 ==================== */
.faq{
	padding:80px 0 0;
	background:var(--color-bg-gray);
}
.faq__inner{
	width:810px;
	text-align:center;
}
.faq-list{
	list-style:none;
	margin:0 0 30px;
	padding:0;
	text-align:left;
}
.faq-item{
	background:#fff;
	border:3px solid var(--color-primary);
	border-radius:10px;
	margin-bottom:16px;
}
.faq-item__q{
	display:flex;
	align-items:center;
	gap:16px;
	margin:0;
	padding:18px 24px;
	font-size:var(--fs-m);
	font-weight:700;
	cursor:pointer;
}
.faq-item__mark{
	flex:none;
	font-family:"Lato", sans-serif;
	font-size:var(--fs-title);
	color:var(--color-primary);
}
.faq-item__toggle{
	position:relative;
	margin-left:auto;
	width:18px;
	height:18px;
	flex:none;
}
.faq-item__toggle:before,
.faq-item__toggle:after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	background:var(--color-primary);
	transform:translate(-50%,-50%);
}
.faq-item__toggle:before{
	width:18px;
	height:3px;
}
.faq-item__toggle:after{
	width:3px;
	height:18px;
	transition:transform .2s ease, opacity .2s ease;
}
.faq-item.is-open .faq-item__toggle:after{
	transform:translate(-50%,-50%) rotate(90deg);
	opacity:0;
}

.faq-item__a{
	display:none;
	margin:0;
	padding:0 24px 20px 58px;
	font-size:var(--fs-text-s);
	line-height:1.8;
	color:#555;
}
.faq-item__a p{
	margin:0;
}

.faq__actions{
	margin:0;
	display:flex;
	justify-content:center;
	gap:16px;
}
.faq__actions .btn-round{
	padding:14px 30px;
	min-width:300px;
}

.faq-cta{
	margin-top:40px;
	padding:40px 0 80px;
	background:var(--color-bg-blue);
}
.faq-cta__inner{
	width:696px;
	text-align:center;
}
.faq__lead{
	font-size:var(--fs-m);
	margin:0 0 20px;
}

.faq-contact{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:24px;
	background:#fff;
	border:4px solid var(--color-navy);
	border-radius:16px;
	padding:30px 40px 30px 100px;
	text-align:center;
}
.faq-contact__img{
	position:absolute;
	left:-50px;
	bottom:-4px;
	flex:none;
}
.faq-contact__body{
	text-align:left;
}
.faq-contact__ttl{
	font-size:22px;
	font-weight:700;
	color:var(--color-navy);
	text-align:center;
}
.faq-contact__num{
	margin:0;
	display:flex;
	align-items:center;
	gap:16px;
}
.faq-contact__num a{
	font-family:"Lato", sans-serif;
	font-size:58px;
	font-weight:700;
	color:var(--color-navy);
	text-decoration:none;
	border-bottom:2px solid var(--color-navy);
	line-height:1;
}
.faq-contact__arrow{
	display:inline-flex;
	flex:none;
	align-items:center;
	justify-content:center;
	width:50px;
	height:50px;
	border-radius:50%;
	background:var(--color-navy);
}
.faq-contact__arrow:before{
	content:"";
	width:0;
	height:0;
	border-style:solid;
	border-width:10px 0 10px 14px;
	border-color:transparent transparent transparent #fff;
	margin-left:4px;
}
.faq-contact__hours{
	margin:10px 0 0;
	font-size:21px;
	font-weight:700;
	color:var(--color-text);
	line-height:1.3;
	text-align:center;
}

/* ==================== でんき知恵袋 ==================== */
.wisdom{
	padding:80px 0;
}
.wisdom__inner{
	text-align:center;
}
.wisdom-list{
	display:flex;
	justify-content:space-between;
	list-style:none;
	margin:0 0 35px;
	padding:0;
}
.wisdom-card{
	width:23.5%;
	text-align:left;
}
.wisdom-card a{
	display:block;
	color:var(--color-text);
	text-decoration:none;
}
.wisdom-card__img{
	display:block;
	margin-bottom:14px;
	border-radius:8px;
	overflow:hidden;
}
.wisdom-card__img img{
	display:block;
	width:100%;
}
.wisdom-card__ttl{
	display:block;
	font-weight:700;
	line-height:1.6;
	margin-bottom:10px;
}
.wisdom-card__cat{
	display:block;
	font-size:var(--fs-text-s);
	color:#777;
}
.wisdom__action{
	margin:0;
	text-align:right;
}

/* ==================== 3つのリンク ==================== */
.links3{
	padding:80px 0;
	background:#fff;
}

.links3-list{
	display:flex;
	justify-content:space-between;
	list-style:none;
	margin:0 0 30px;
	padding:0;
}
.link-card{
	width:49%;
	background:#f6f7f1;
	padding:40px;
	box-sizing:border-box;
	text-align:center;
}
.link-card__ico{
	display:inline-block;
	margin:0 10px 14px 0;
}
.link-card__ttl{
	font-size:var(--fs-l);
	font-weight:700;
	color:var(--color-navy);
	margin:0 0 14px;
	display:inline-block;
}
.link-card--line .link-card__ttl{
	color:var(--color-line);
}
.link-card__desc{
	line-height:1.6;
	margin:0 0 24px;
	color:#555;
}
.link-card__action{
	margin:0;
}

/* リンクカード内CTA：塗りつぶし角丸矩形（ピル形状ではない） */
.btn-flat{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:305px;
	height:70px;
	padding:0 24px;
	box-sizing:border-box;
	border-radius:10px;
	font-size:var(--fs-m);
	font-weight:700;
	color:#fff;
	text-decoration:none;
	transition:.2s ease-in-out;
}
.btn-flat:hover{
	opacity:.8;
}
.btn-flat--navy{
	background:var(--color-navy);
}
.btn-flat--line{
	background:var(--color-line);
}

.contract-banner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	background:#fff;
	border:2px solid var(--color-navy);
	border-radius:16px;
	padding:30px 40px;
}
.contract-banner__body{
	text-align:left;
}
.contract-banner__ttl{
	font-size:var(--fs-l);
	font-weight:700;
	color:var(--color-navy);
	margin:0 0 10px;
}
.contract-banner__desc{
	line-height:1.7;
	margin:0;
	max-width:580px;
}
.contract-banner__action{
	margin:0;
	flex:none;
}

/* お問い合わせ枠・ご契約者さま向け共通：角丸矩形アウトライン＋アイコン＋塗りつぶし矢印円（ピル形状ではない） */
.btn-outline-navy{
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:18px;
	padding:26px 24px 26px 28px;
	background:#fff;
	border:2px solid var(--color-navy);
	border-radius:10px;
	color:var(--color-navy);
	font-size:var(--fs-footer-nav);
	font-weight:700;
	text-decoration:none;
	transition:.2s ease-in-out;
}
.btn-outline-navy:hover{
	opacity:.8;
}
.btn-outline-navy img{
	flex:none;
}
.btn-outline-navy__arrow{
	position:relative;
	display:inline-block;
	flex:none;
	width:18px;
	height:18px;
	border-radius:50%;
	background-color:var(--color-navy);
}
.btn-outline-navy__arrow:before{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:0;
	height:0;
	border-style:solid;
	border-width:4px 0 4px 7px;
	border-color:transparent transparent transparent #fff;
	transform:translate(-35%,-50%);
}

/* ==================== フッター ==================== */
#footer{
	background:var(--color-bg-primary);
	padding:60px 0 0;
	font-size:var(--fs-small);
	text-align:left;
}

.footer__top{
	display:flex;
	gap:143px;
	padding-bottom:30px;
}
.footer__company{
	width:260px;
	flex:none;
}
.footer__logo{
	margin:0 0 10px;
}
.footer__logo-sub{
	margin:0 0 20px;
}
.footer__name{
	margin:0 0 6px;
	font-weight:700;
}
.footer__address{
	margin:0 0 16px;
	line-height:1.6;
}
.footer__tel-num{
	margin:0;
	font-size:var(--fs-l);
	font-weight:700;
	color:var(--color-text);
}
.footer__tel-num a{
	color:inherit;
	text-decoration:none;
}
.footer__tel-hours{
	margin:0 0 16px;
	font-size:var(--fs-small);
	font-weight:700;
	line-height:1.2;
}
.footer__btn{
	margin:0 0 10px;
}

/* フッターボタン：角丸矩形（ピル形状ではない）＋塗りつぶし円の矢印 */
.btn-footer{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:69px;
	box-sizing:border-box;
	border-radius:10px;
	font-size:var(--fs-base-s);
	font-weight:700;
	text-decoration:none;
	color:#fff;
	transition:.2s ease-in-out;
}
.btn-footer:hover{
	opacity:.85;
}
.btn-footer:after{
	content:"";
	position:absolute;
	right:13px;
	top:50%;
	transform:translateY(-50%);
	width:18px;
	height:18px;
	border-radius:50%;
}
.btn-footer:before{
	content:"";
	position:absolute;
	z-index:1;
	right:17.3px;
	top:50%;
	width:0;
	height:0;
	border-style:solid;
	border-width:4px 0 4px 7px;
	transform:translateY(-50%);
}
.footer-link{
	display:none;
}

.btn-footer--pink{
	background:var(--color-pink);
}
.btn-footer--pink:after{
	background-color:#fff;
}
.btn-footer--pink:before{
	border-color:transparent transparent transparent var(--color-pink);
}
.btn-footer--blue{
	background:var(--color-primary);
}
.btn-footer--blue:after{
	background-color:#fff;
}
.btn-footer--blue:before{
	border-color:transparent transparent transparent var(--color-primary);
}
.btn-footer--outline{
	background:#fff;
	color:var(--color-navy);
	border:2px solid var(--color-navy);
}
.btn-footer--outline:after{
	background-color:var(--color-navy);
}
.btn-footer--outline:before{
	border-color:transparent transparent transparent #fff;
}

.footer__nav{
	flex:1;
	display:flex;
	justify-content:space-between;
	gap:20px;
}
.footer__nav-col{
	width:31%;
}
.footer__nav-top{
	margin:0 0 20px;
	color:#0071b9;
	font-size:var(--fs-footer-nav);
}
.footer__nav-top a{
	font-weight:700;
	font-size:var(--fs-footer-nav);
	color:#0071b9;
	text-decoration:none;
}
.footer__nav-group{
	margin-bottom:24px;
}
.footer__nav-ttl{
	margin:0 0 10px;
	color:#0071b9;
	font-size:var(--fs-footer-nav);
}
.footer__nav-ttl a{
	font-weight:700;
	font-size:var(--fs-footer-nav);
	color:#0071b9;
	text-decoration:none;
}
.footer__nav-col ul{
	list-style:none;
	margin:0 0 25px 0;
	padding:0;
}
.footer__nav-col li{
	margin-bottom:8px;
}
.footer__nav-col ul li a{
	color:#333;
	text-decoration:none;
	font-size:var(--fs-small);
}

.footer__area{
	display:flex;
	align-items:center;
	gap:41px;
	background:#fff;
	border-radius:30px;
	padding:13px 40px 13px 46px;
	margin:0 0 30px 403px;
	width:calc(100% - 403px);
	box-sizing:border-box;
}
.footer__area-ttl{
	margin:0;
	font-weight:700;
	font-size:19px;
	color:var(--color-navy);
	flex:none;
}
.footer__area-list{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:28px;
	margin:0;
	padding:0;
	list-style:none;
}
.footer__area-list li{
	font-size:var(--fs-base);
	color:#000;
}
.footer__area-list li a{
	color:#000;
	text-decoration:none;
}
.footer__legal{
	background:var(--color-bg-blue-deep);
	padding:20px 0;
	text-align:center;
}
.footer__legal-links{
	text-align:center;
}
.footer__legal-links a{
	color:var(--color-text);
	text-decoration:none;
}

.footer__copyright{
	display:block;
	text-align:center;
	font-style:normal;
	font-size:var(--fs-note);
	padding:20px 0;
}

.link-blank{
	background:url(../images/icon_blank.png) right center no-repeat;
	background-size:19px auto;
	padding-right:22px;
}

/* ==================== 下層ページ共通：パンくず ==================== */
.breadcrumb{
	background:#ecf7fc;
	padding:12px 0;
	line-height:1.3;
}
.breadcrumb__inner{
	font-size:var(--fs-small);
	color:#666;
}
.breadcrumb__inner a{
	color:#333;
	text-decoration:none;
}
.breadcrumb__inner a:hover{
	opacity: 1;
	color:var(--color-navy);
}

/* ==================== 下層ページ共通 ==================== */
.block-ttl{
	position:relative;
	display:flex;
	align-items:center;
	gap:16px;
	margin:0 0 50px;
	font-size:var(--fs-title);
	font-weight:700;
	line-height:1.5;
}
.block-ttl:before{
	content:"";
	flex:none;
	width:36px;
	height:6px;
	border-radius:3px;
	background:var(--color-primary);
}
.block-ttl--center{
	justify-content:center;
	text-align:center;
}

.block-ttl__sub{
	font-size:28px;
	font-weight:700;
	line-height:1.5;
	text-align:center;
	margin-bottom: 20px;
}

/*sectionの余白共通*/
.page-section{
	margin-bottom:var(--section-gap);
}
.page-last-section{
	padding-bottom: 100px;
}
/**/
.page-title + .page-section{
	padding-top:var(--section-gap-title);
}

/**/
.bg-radius-block{
	background-color:#fff;
	border-radius:20px;
	padding:30px 80px 50px;
	margin-bottom:40px;
}
/* カード内見出し（中央揃え・青）＋直下のアクセント罫線（青の短い区間＋グレーの通常罫線） */
.card-ttl{
	margin:0 0 30px;
	color:#0071b9;
	font-size:var(--fs-label-l);
	font-weight:700;
	letter-spacing:.05em;
	text-align:center;
}
.card-hr{
	height:2px;
	margin:12px 0 15px;
	border:none;
	background:linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) 22%, #aeaeae 22%, #aeaeae 100%);
}

.card-hr__mt{
	margin:0 0 30px !important;
}

/**/
.cream-content-bg{
	background:var(--color-bg-grayish);
	border-radius:20px 20px 0 0;
	padding:80px 0;
}

/* ==================== ページヘッダー（h1） ==================== */
.page-title{
	background:var(--color-primary);
	color:#fff;
	line-height:1.3;
	height: 220px;
	display: flex;
	align-items: center;
}
.page-title__inner{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 130px;
	box-sizing:border-box;
}
.page-title__body{
	text-align:center;
}
.page-title__badge{
	display:inline-block;
	margin:0 0 30px;
	padding:8px 24px;
	background:#fff;
	color:#1e82c1;
	font-size:var(--fs-label);
	font-weight:700;
	border-radius:20px;
	line-height:1.2;
}
.page-title__sub{
	margin:0 0 0px;
	font-size:var(--fs-l);
	font-weight:700;
}
.page-title__ttl{
	display:block;
	margin:0;
	font-size:var(--fs-xl);
	font-weight:700;
	letter-spacing:.05em;
}
.page-title__img{
	position:relative;
	flex:none;
	width:290px;
	height:194px;
	margin:0;
	line-height:0;
}
.page-title__img.page-title__imgL{
	width:340px;
}
.page-title__img img:first-child{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}
.page-title__img-badge{
	position:absolute;
	top:-15px;
	right:-10px;
}

/* ---- イレギュラーレイアウト（ヒーロー画像あり：market・basic・midnight） ---- */
.page-title--market,
.page-title--basic,
.page-title--midnight{
	height: 300px;
}
.page-title--market .page-title__inner,
.page-title--basic .page-title__inner,
.page-title--midnight .page-title__inner{
	justify-content:space-between;
}
.page-title--market .page-title__ttl,
.page-title--basic .page-title__ttl,
.page-title--midnight .page-title__ttl{
	display:flex;
	align-items:center;
	gap:12px;
	margin:15px 0 0;
	font-size:42px;
	letter-spacing:normal;
}
.page-title--eco{
	background:#58c472;
}
.page-title--eco .page-title__ttl{
	font-size:var(--fs-label-l);
	letter-spacing:normal;
}

/* ---- プラン一覧 ---- */
.page-title--plan{
	padding:76px 0;
}

/* ---- 新規受付停止中プラン一覧 ---- */
.page-title--stop{
	padding:84px 0;
	background:#cccccc;
	color:#000;
}

/* ==================== プラン一覧ページ（/plan/） ==================== */
.plan-list-lead{
	padding:76px 0 0;
	text-align:center;
}
.plan-list-lead__text{
	margin:0 auto;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.5;
	text-align:center;
}

/* プラン比較表 */
.plan-compare-block{
	margin-top:120px;
	text-align:center;
}
.plan-compare-block .plan__compare-sub{
	margin-bottom:0;
}
.plan-compare-block .plan__compare-ttl{
	margin-bottom:50px;
}

.plan-eco-banner{
	margin-top:60px;
	padding-bottom: 180px;
	text-align:center;
}
.plan-eco-banner__lead{
	margin:0 0 20px;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.5;
	text-align:center;
}
.plan-eco-banner__box{
	width:607px;
	max-width:100%;
	margin:0 auto;
}
.plan-eco-banner__link{
	position:relative;
	display:flex;
	align-items:center;
	gap:20px;
	height:110px;
	padding:0 30px;
	background:#fff;
	border-radius:10px;
	box-shadow:0 4px 20px rgba(0,0,0,.2);
	text-decoration:none;
	transition:.2s ease-in-out;
}
.plan-eco-banner__link:hover{
	opacity:.8;
}
.plan-eco-banner__icon{
	flex:none;
	width:65px;
	height:65px;
}
.plan-eco-banner__text{
	flex:1;
	font-size:26px;
	font-weight:700;
	line-height:1.3;
	color:var(--color-primary);
	text-align:left;
}
.plan-eco-banner__link .ico-arrow-circle{
	position:absolute;
	right:24px;
	top:50%;
	transform:translateY(-50%);
}

/* ==================== プラン詳細本文：背景ラッパー ==================== */
.plan-content-bg{
	background:#f9f7f4;
	padding:70px 0 50px 0;
}

/* ==================== プラン ==================== */
/* ==================== こんな生活の方におすすめです ==================== */
.plan-recommend__box{
	width:942px;
	max-width:100%;
	margin:0 auto;
	background:#f4fcff;
	border-radius:20px;
	padding:40px 50px;
	box-sizing:border-box;
	text-align:center;
}
.plan-recommend__lead{
	position:relative;
	display:block;
	margin:0 auto 5px;
	width:318px;
	aspect-ratio:318 / 67;
	background:url(../images/img_speech_bubble.png) center / contain no-repeat;
}
.plan-recommend__lead span{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-primary);
	font-size:var(--fs-l);
	font-weight:500;
	line-height:1.1;
	margin-top:-1em;
}
.check-list{
	display:inline-block;
	list-style:none;
	margin:0;
	padding:0;
	text-align:left;
}
.check-list__item{
	display:block;
	font-size:var(--fs-l);
	font-weight:700;
	line-height:1.4;
	background:url(../images/icon_check_circle.png) left center no-repeat;
	background-size:35px auto;
	padding:10px 0 10px 50px;
}

/* ==================== マーケットプランBは市場連動型プランです ==================== */
.market-linked__sub{
	margin:30px 0 12px;
	font-size:var(--fs-l);
	font-weight:700;
}
.market-linked__desc{
	margin:0 0 30px;
	line-height:1.8;
}
.market-graph{
	position:relative;
	width:732px;
	max-width:100%;
	margin:0 auto;
	padding:20px;
	box-sizing:border-box;
	background:#fff;
	text-align:center;
}
.market-graph img{
	display:block;
	margin:0 auto;
}
.market-graph__badge{
	position:absolute;
	left:372px;
	top:114px;
	width:144px;
	height:144px;
	box-sizing:border-box;
	border-radius:50%;
	background:#fe7e03;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:28px;
	font-weight:700;
	white-space:nowrap;
	box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.market-graph__badge:after{
	content:"";
	position:absolute;
	bottom:-14px;
	left:40%;
	border-style:solid;
	border-width:16px 10px 0 10px;
	border-color:#fe7e03 transparent transparent transparent;
}
.market-linked__note{
	margin:20px 0 0;
	font-size:var(--fs-base);
	color:#555;
	text-align:center;
}

/* ==================== 日中に電気を使うとこんなにおトクに！ ==================== */
.saving__img{
	margin:0;
	line-height:0;
}
.saving__img img{
	width:100%;
	height:auto;
	border-radius:16px;
}

.saving .market-linked__note{
	text-align:left;
}

.saving-list{
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	list-style:none;
	margin:0;
	padding:0;
}
.saving-card{
	display:flex;
	align-items:center;
	gap:24px;
	width:calc(50% - 10px);
	box-sizing:border-box;
	padding:24px 32px;
	background:#f4fcff;
	border-radius:16px;
}
.saving-card__thumb{
	flex:none;
	width:110px;
	text-align:center;
}
.saving-card__ico{
	margin:0 0 8px;
	line-height:0;
}
.saving-card__ico img{
	display:block;
	margin:0 auto;
}
.saving-card__label{
	margin:0;
	font-size:var(--fs-label);
	font-weight:400;
	color:var(--color-navy);
}
.saving-card__num{
	margin:0;
	font-size:var(--fs-xl);
	font-weight:700;
	color:var(--color-navy);
	line-height:1.2;
	white-space:nowrap;
	text-align:center;
}
.saving-card__unit{
	margin:0 2px;
	font-size:var(--fs-l);
	font-weight:700;
}

/* ==================== 30分ごとにわかる ==================== */
.pricenavi__eyebrow{
	margin:0 0 24px;
	font-size:var(--fs-l);
	font-weight:500;
	text-align:center;
}
.pricenavi__action{
	margin:0 0 30px;
	text-align:center;
}
.pricenavi__btn{
	display:inline-flex;
	align-items:center;
	gap:24px;
	padding:15px 60px;
	background:#fee250;
	border-radius:16px;
	box-shadow:0 8px 0px rgba(0,0,0,.1);
	color:#000;
	font-size:var(--fs-label-l);
	font-weight:700;
	text-decoration:none;
	transition:.2s ease-in-out;
	margin-bottom:30px;
}
.pricenavi__btn:hover{
	opacity:.85;
}
.pricenavi__ico{
	flex:none;
}
.pricenavi__desc{
	margin:0 0 40px;
	font-size:var(--fs-m);
	line-height:1.8;
	text-align:left;
}
.pricenavi-notice{
	position:relative;
	width:940px;
	max-width:100%;
	height:141px;
	margin:0 auto;
	box-sizing:border-box;
	background:#fbfaef;
	border-radius:16px;
}
.pricenavi-notice__ico{
	position:absolute;
	left:113px;
	top:32px;
}
.pricenavi-notice__mail{
	position:absolute;
	left:206px;
	top:44px;
}
.pricenavi-notice__img{
	position:absolute;
	right:72px;
	top:0;
}
.pricenavi-notice__text{
	position:absolute;
	left:299px;
	top:46px;
	width:400px;
	margin:0;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.6;
}

/* ==================== 料金構成表・料金単価表 ==================== */
.price-table{
	padding:70px 0 60px;
	text-align:center;
}
.price-table__plan{
	margin:0 0 4px;
	font-size:var(--fs-title);
	font-weight:700;
	text-align:center;
}
.price-table .block-ttl{
	margin:0 0 24px;
}
.price-table__note{
	margin:40px 0 30px;
	font-size:var(--fs-m);
	font-weight:700;
}
.price-table__img{
	margin:0 0 20px;
}
.price-table__img img{
	border-radius:12px;
	overflow:hidden;
}
.price-table__foot{
	margin:0;
	font-size:var(--fs-base-s);
	font-weight:500;
	text-align:left;
}

/* ---- 料金単価表（table組み） ---- */
.price-unit-table__note{
	margin:0 0 8px;
	font-size:var(--fs-base-s);
	font-weight:700;
	text-align:right;
}
.price-unit-table-wrap{
	width:100%;
	overflow-x:auto;
}
.price-unit-table{
	width:1100px;
	border-collapse:collapse;
	table-layout:fixed;
}
.price-unit-table th,
.price-unit-table td{
	border:2px solid #bbecff;
	padding:20px 16px;
	font-size:var(--fs-label);
	text-align:center;
	vertical-align:middle;
}
.price-unit-table th sup,
.price-unit-table td sup{
	font-size:var(--fs-sup);
	vertical-align:top;
}
.price-unit-table thead th{
	background:var(--color-primary);
	color:#fff;
	font-weight:500;
	line-height:1.4;
}
.price-unit-table tbody td:nth-child(1),
.price-unit-table tbody td:nth-child(2){
	background:var(--color-bg-primary);
}
.price-unit-table tbody td{
	font-weight: 700;
	line-height: 1.2;
}
.price-unit-table tbody td:first-child{
	font-weight:700;
}
.price-unit-table__rate{
	display:block;
	margin-top:4px;
	color:var(--color-pink);
	font-size:var(--fs-base-s);
	font-weight:700;
}
.price-unit-table__foot{
	margin:24px 0 0;
	font-size:var(--fs-base-s);
	line-height:1.4;
	text-align:left;
}

/* ---- 罫線ルール（縦横に見出しがあるマトリクス表用）----
   見本デザインをピクセル単位で確認した結果に基づくルール：
   　・見出しセル同士が隣り合う内部境界（見出し行の中／見出し列の中）　→　白の区切り線
   　・見出しセルとデータセルの境界、データセル同士の境界　→　既定の薄水色(#bbecff)のまま（変更しない）
   　・表の外周のうち、見出しセルに接する辺（上端・左端）　→　線を引かない（transparent）。
   　　見出しセル自身の色がそのまま外周になる
   　・表の外周のうち、データセルに接する辺（右端・下端）　→　既定の薄水色の線を残す（消さない）
   　※角丸は一旦非対応（2026-09-15指示により削除）。以前は`.price-unit-table-frame`という
   　　外側ラッパーdiv＋overflow:hiddenで四隅を丸める実装を行っていたが、ラッパーのborderが
   　　table本体の外側に追加で乗る分だけ実寸が広がり、`.price-unit-table-wrap`の
   　　overflow-x:autoがPC幅でも反応してテーブルにだけ横スクロールバーが出る不具合を招いたため、
   　　角丸表現ごと撤去した。将来的に角丸を復活させる場合は、ラッパー側に
   　　box-sizing:border-boxを指定する、またはtableの`width`をラッパーのborder分だけ
   　　あらかじめ差し引いておく等でこの幅超過を防ぐこと。
   1行目がすべて見出し・1列目がすべて見出しの表（左上が交差する「マトリクス型」）を想定。
   `.price-unit-table--matrix`を追加すると適用される。 ---- */
.price-unit-table--matrix tr:first-child > .price-unit-table__head{
	border-left-color:#fff;
	border-right-color:#fff;
}
.price-unit-table--matrix .price-unit-table__head:first-child{
	border-top-color:#fff;
	border-bottom-color:#fff;
}
.price-unit-table--matrix tr:first-child > *{
	border-top-color:transparent;
}
.price-unit-table--matrix tr > *:first-child{
	border-left-color:transparent;
}
.price-unit-table--matrix tr:first-child > *:last-child{
	border-right-color:transparent;
}
.price-unit-table--matrix tr:last-child > .price-unit-table__head{
	border-bottom-color:transparent;
}

/* ---- 料金構成表（画像） ---- */
.price-composition__img{
	margin:30px 0 0 0;
}
.price-composition__img img{
	width:100%;
	height:auto;
	border-radius:12px;
}

/* ---- 料金構成表（HTML実装／ベーシックプラン・ミッドナイトプラン共通） ---- */
.fee-comp{
	margin:30px 0 0 0;
	background:var(--color-bg-primary);
	border-radius:24px;
	padding:48px 56px;
}
.fee-comp__combo{
	position:relative;
	display:flex;
	background:#fff;
	border:2px solid #bbecff;
	border-radius:16px;
	padding:44px 40px;
	gap:25px;
}
.fee-comp__combo-box{
	width:50%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	background:#bbecff;
	padding:56px 20px;
	text-align:center;
	font-size:var(--fs-label-l);
	font-weight:500;
	color:#111;
	border-radius: 12px;
}
.fee-comp__combo-formula{
	margin:8px 0 0;
	font-size:var(--fs-label);
	font-weight:500;
	line-height:1.4;
	color:#111;
}
.fee-comp__note-mark{
	margin-left:4px;
	font-size:14px;
	font-weight:500;
}

.fee-comp__connector{
	position:relative;
	height:20px;
}
.fee-comp__row{
	background:#fff;
	border:2px solid #bbecff;
	border-radius:16px;
	padding:32px 20px;
	text-align:center;
}
.fee-comp__ttl{
	margin:0 0 8px;
	font-size:28px;
	font-weight:500;
	line-height:1.3;
	color:#111;
}
.fee-comp__formula{
	margin:0;
	font-size:16px;
	font-weight:500;
	line-height:1.4;
	color:#111;
}
.fee-comp__plus{
	position:relative;
	width:54px;
	height:54px;
	border-radius:50%;
	border:3px solid #fff;
	background:#0071b9;
	font-size:0;
	color:transparent;
}
.fee-comp__plus::before,
.fee-comp__plus::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	background:#fff;
	transform:translate(-50%, -50%);
}
.fee-comp__plus::before{
	width:20px;
	height:2px;
}
.fee-comp__plus::after{
	width:2px;
	height:20px;
}
.fee-comp__plus--combo{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.fee-comp__connector .fee-comp__plus{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}

/* ---- 料金構成表（HTML実装／グレー配色：ファミリープラン・夜トクプラン・ビジネスプランA共通） ---- */
/* 構造は.fee-compと同一、色味のみ変更（本人指示） */
.fee-comp--gray{
	background:#e2e2e2;
}
.fee-comp--gray .fee-comp__combo{
	border-color:#ccc;
}
.fee-comp--gray .fee-comp__combo-box{
	background:#e2e2e2;
	padding:36px 20px;
}
.fee-comp--gray .fee-comp__row{
	border-color:#ccc;
}
.fee-comp--gray .fee-comp__plus{
	background:#666;
}

/* ---- 料金単価表：見出し違いで複数tableを並べる場合（ミッドナイトプラン等） ---- */
.price-unit-block{
	margin:0 0 60px;
}
.price-unit-block:last-child{
	margin-bottom:0;
}
.price-unit-block__ttl{
	margin:0 0 16px;
	font-size:var(--fs-title);
	font-weight:700;
	text-align:left;
}
.price-unit-table__head{
	background:var(--color-primary);
	color:#fff;
	font-weight:500;
	line-height:1.4;
}
.price-unit-table__sub-head{
	background:var(--color-bg-primary);
	color:#000;
	font-size: var(--fs-base) !important;
	font-weight:500;
	line-height:1.4;
}
.price-unit-table__sub-head p{
	display: inline-block;
	text-align: left;
}

.price-unit-table__sub-head--blue{
	background:var(--color-bg-primary);
	color:var(--color-primary);
	font-size: var(--fs-base) !important;
	font-weight:500;
	line-height:1.6;
}

.price-unit-table__sub-head--blue p{
	display: inline-block;
	text-align: left;
}
.price-unit-table__sub-head--blue strong{
	font-weight:500;
}
.price-unit-table--flat.price-unit-table tbody td:nth-child(1),
.price-unit-table--flat.price-unit-table tbody td:nth-child(2){
	background:#fff;
}

/* ---- こんな生活の方におすすめです：電力量料金グラフ＋おトク額（ミッドナイトプラン） ---- */
.midnight-saving{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:60px;
	margin:40px 0 0;
}
.midnight-saving__chart{
	margin:0;
	flex:none;
	width:447px;
}
.midnight-saving__chart img{
	width:100%;
	height:auto;
}
.midnight-saving__box{
	margin:0;
	flex:none;
	width:409px;
}
.midnight-saving__ttl{
	margin:0 0 16px;
	padding:16px 10px;
	border:3px solid #0071b9;
	border-radius:10px;
	color:#0071b9;
	font-size:var(--fs-label-l);
	line-height:1.3;
	font-weight:700;
	text-align:center;
}
.midnight-saving__compare{
	margin:0 0 14px;
	font-size:var(--fs-label-m);
	line-height:1.3;
	font-weight:700;
	text-align:center;
}
.midnight-saving__list{
	margin:0;
}
.midnight-saving__item{
	display:flex;
	align-items:center;
	gap:16px;
	margin:0 0 10px;
}
.midnight-saving__item:last-child{
	margin-bottom:0;
}
.midnight-saving__season{
	flex:none;
	width:106px;
	padding:10px 0;
	border-radius:50px;
	background:#0071b9;
	color:#fff;
	font-size:var(--fs-l);
	line-height:1.3;
	font-weight:700;
	text-align:center;
}
.midnight-saving__price{
	color:var(--color-pink);
	font-size:48px;
	line-height:1.3;
	font-weight:700;
}
.midnight-saving__price small{
	margin-left:4px;
	font-size:var(--fs-label-m);
	line-height:1.3;
	font-weight:700;
}

/* ==================== 各種調整金について ==================== */
.fee-link{
	margin:0;
	padding:40px 0;
	text-align:center;
}

/* ==================== お申し込みにあたっての注意事項 ==================== */
.caution{
	padding:0 0 70px;
	text-align:center;
	margin-top:50px;
}
.caution__box{
	padding:40px 50px;
	border:2px solid #ff0000;
	border-radius:12px;
	text-align:left;
}
.caution__ttl{
	margin:0 0 20px;
	font-size:22px;
	font-weight:700;
	color:#ff0000;
	text-align:center;
	line-height:1.4;
}
.caution__desc{
	margin:0;
	line-height:1.8;
	color:#ff0000;
}

/* ==================== イデックスでんきの料金プランのご紹介 ==================== */
.plan-list-links{
	padding:60px 0 100px;
	text-align:center;
}
.plan-link-list{
	display:flex;
	justify-content:space-between;
	list-style:none;
	margin:0;
	padding:20px 0 0 0;
	gap:20px;
}
.plan-link-card{
	position:relative;
	width:360px;
	background:#fff;
	border:3px solid var(--color-primary);
	border-radius:16px;
	overflow:visible;
	text-align:center;
}
.plan-link-card a{
	display:block;
	color:var(--color-text);
	text-decoration:none;
}
.plan-link-card__flag{
	position:absolute;
	width:220px;
	top:-18px;
	left:50%;
	margin:0 0 0 -110px;
	padding:8px 20px;
	background:#fee250;
	color:#000;
	font-size:var(--fs-base);
	font-weight:700;
	border-radius:20px;
	white-space:nowrap;
	z-index:2;
}
.plan-link-card__head{
	padding:36px 20px 20px;
	position:relative;
}
.plan-link-card__head::after{
	content:'';
	position:absolute;
	width:80%;
	height:2px;
	bottom:0;
	left:50%;
	margin-left:-40%;
	background-color:var(--color-primary);
}

.plan-link-card--current .plan-link-card__head{
	background:var(--color-primary);
	border-radius:13px 13px 0 0;
	color:#fff;
}
.plan-link-card__note{
	margin:0 0 0px;
	font-size:var(--fs-base);
	font-weight:700;
}
.plan-link-card__ttl{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	margin:0;
	font-size:var(--fs-l);
	font-weight:700;
	color:var(--color-primary);
}
.plan-link-card--current .plan-link-card__ttl{
	color:#fff;
}

.plan-link-card__target{
	list-style:none;
	margin:0;
	padding:20px 24px 24px;
	text-align:left;
	display:inline-block;
}
.plan-link-card__target li{
	position:relative;
	margin-bottom:12px;
	padding-left:32px;
	font-size:var(--fs-base);
}
.plan-link-card__target li:last-child{
	margin-bottom:0;
}
.plan-link-card__target li:before{
	content:"";
	position:absolute;
	left:0;
	top:.5em;
	width:20px;
	height:16px;
	background:url(../images/icon_check.png) left center no-repeat;
	background-size:20px auto;
}

/* ==================== ページトップ ==================== */
.pagetop{
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:100;
	display:none;
	cursor:pointer;
}
.pagetop span{
	display:flex;
	align-items:center;
	justify-content:center;
	width:70px;
	height:70px;
	border-radius:50%;
	background:url(../images/btn_pagetop.png) center center no-repeat;
	background-size:cover;
	color:#fff;
	font-size:var(--fs-sup);
	text-align:center;
	line-height:1.4;
	text-indent:-99999px;
	box-shadow:0 2px 8px rgba(0,0,0,.2);
}

/* ==================== ECOプラン ==================== */
.eco-intro{
	padding:60px 0 70px;
	overflow-x:hidden;
}
.eco-intro__inner{
	position:relative;
	text-align:center;
}
.eco-intro__icon{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	margin:0;
	line-height:0;
}
.eco-intro__icon--left{
	left:-78px;
	top:100px;
}
.eco-intro__icon--right{
	right:-98px;
	bottom:0;
}
.eco-intro__body{
	display:inline-block;
	max-width:820px;
	text-align:center;
}
.eco-intro__ttl{
	font-size:var(--fs-xl);
	font-weight:700;
	color:#159c35;
	margin:0 0 10px;
}
.eco-intro__sub{
	font-size:var(--fs-label);
	font-weight:500;
	color:#159c35;
	letter-spacing:.05em;
	margin:0;
}
.eco-intro__price-row{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:20px;
	margin:30px 0;
}
.eco-intro__price-box{
	padding:30px 40px;
	min-width:250px;
	border-radius:8px;
	font-size:var(--fs-label);
	font-weight:700;
	letter-spacing:.05em;
	line-height:1.2;
}
.eco-intro__price-box--plan{
	border:3px solid #58c472;
	color:#159c35;
	background:#fff;
}
.eco-intro__price-box--add{
	background:#58c472;
	color:#fff;
}
.eco-intro__plus{
	font-size:var(--fs-xl);
	font-weight:700;
	color:#159c35;
	line-height:1;
}
.eco-intro__note{
	font-size:var(--fs-m);
	font-weight:500;
	line-height:1.8;
	letter-spacing:.05em;
	margin:0;
}

.eco-features{
	background:#dff8e5 url(../images/bg_green.jpg) center top no-repeat;
	background-size:100% auto;
	padding:90px 0 50px;
	margin-top:40px;
	overflow-x:hidden;
}
.eco-features__inner{
	position:relative;
}
.eco-features__ttl{
	font-size:var(--fs-xl);
	font-weight:700;
	color:#159c35;
	text-align:center;
	margin:0 -70px 80px 0;
}
.eco-features__ttl img{
	display:inline-block;
	vertical-align:middle;
	margin-left:14px;
	margin-top: -25px;
	width: 70px;
}
.eco-feature-list{
	display:flex;
	align-items:stretch;
	justify-content:space-between;
	gap:35px;
	list-style:none;
	margin:0;
	padding:0;
}
.eco-feature{
	position:relative;
	flex:1;
	text-align:center;
}
.eco-feature__num{
	position:absolute;
	top:-30px;
	left:50%;
	width:72px;
	z-index:1;
	margin-left:-30px;
}
.eco-feature__card{
	background:#fff;
	border-radius:16px;
	box-shadow:0 4px 16px rgba(0,0,0,.08);
	padding:46px 20px 46px 20px;
	line-height:1.2;
}
.eco-feature__label{
	font-size:var(--fs-label-m);
	font-weight:700;
	color:#58c472;
	margin:25px 0 0px;
}
.eco-feature__value{
	display:flex;
	align-items:flex-end;
	justify-content:center;
	vertical-align:bottom;
	padding-bottom:14px;
	font-size:var(--fs-large);
	color:#ff9900;
	width:auto;
	line-height:1.2;
	height:120px;
}
.eco-feature__value em{
	display:inline-block;
	font-weight:700;
	font-style:normal;
	border-bottom:4px solid #ff9900;
	padding-bottom:5px;
}
.eco-feature__value em span{
	display:inline-block;
}
.eco-feature__value--sub{
	font-size:var(--fs-xl);
}
.eco-feature__value--num{
	font-size:100px;
	margin:0 0 -0.5em 0px;
}

.eco-detail-list{
	margin:60px 0 60px;
}
.eco-detail{
	position:relative;
	background:#fff;
	border-radius:20px;
	box-shadow:0 4px 20px rgba(0,0,0,.08);
	padding:44px 60px 60px;
	margin:0 0 40px;
	text-align:center;
}
.eco-detail:last-child{
	margin-bottom:0;
}
.eco-detail__tag{
	display:inline-block;
	padding:8px 24px;
	background:#58c472;
	color:#fff;
	font-size:var(--fs-base);
	font-weight:700;
	border-radius:230px;
	margin:0 0 12px;
	line-height: 1.2;
}
.eco-detail__ttl{
	font-size:var(--fs-xl);
	font-weight:700;
	color:#58c472;
	margin:0 0 40px;
	line-height:1.4;
}
.eco-detail__flow{
	margin:0;
}
.eco-detail__flow img{
	width:100%;
	max-width:929px;
}

.eco-detail__body{
	display:flex;
	align-items:center;
	gap:50px;
	text-align:left;
}
.eco-detail__icon{
	flex:none;
	width:200px;
	margin:0 50px 0 20px;
}
.eco-detail__content{
	flex:1;
}
.eco-detail__stat{
	margin:0 0 8px;
}
.eco-detail__stat-badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	vertical-align:middle;
	margin-right:16px;
	width:64px;
	height:64px;
	border-radius:50%;
	background:#58c472;
	color:#fff;
	font-size:var(--fs-text-s);
	font-weight:700;
}
.eco-detail__stat-value{
	display:inline-block;
	vertical-align:middle;
	font-size:var(--fs-xl);
	font-weight:700;
	color:#58c472;
	margin:0;
}
.eco-detail__stat-note{
	font-size:var(--fs-text-s);
	margin:0 0 24px;
	color:#555;
}
.eco-detail__highlight{
	font-size:36px;
	font-weight:700;
	color:#ff9900;
	margin:0 0 8px;
	line-height:1.3;
}
.eco-detail__small-note{
	font-size:var(--fs-text-s);
	margin:0 0 20px;
	color:#555;
	line-height:1.6;
}
.eco-detail__caption{
	font-size:var(--fs-base);
	margin:0;
	color:#333;
	line-height:1.6;
}

.eco-detail__head{
	margin:0 0 44px;
}
.eco-detail__badge-circle{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	vertical-align:middle;
	margin-right:16px;
	width:82px;
	height:82px;
	border-radius:50%;
	background:#ff9900;
	color:#fff;
	font-size:var(--fs-text-s);
	font-weight:700;
	line-height:1.3;
	text-align:center;
}
.eco-detail__head .eco-detail__ttl{
	display:inline-block;
	vertical-align:middle;
	margin:0;
}
.eco-perk-list{
	display:flex;
	justify-content:center;
	gap:90px;
	list-style:none;
	margin:0;
	padding:0;
}
.eco-perk{
	width:340px;
	text-align:center;
}
.eco-perk__icon{
	position:relative;
	margin:0 0 20px;
	height:140px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.eco-perk__icon-mail{
	width:116px;
}
.eco-perk__icon-cert{
	width:112px;
}
.eco-perk__ttl{
	font-size:var(--fs-title);
	font-weight:700;
	color:#58c472;
	margin:0 0 10px;
	line-height:1.3;
}
.eco-perk__desc{
	font-size:var(--fs-m);
	line-height:1.5;
	margin:0;
	color:#333;
}

/**/
.eco-price{
	padding: 50px 0 40px 0;
}
.eco-price-section{
	padding:0 0 60px;
}
.eco-price-block{
	margin:0 0 60px;
}
.eco-price-block:last-child{
	margin-bottom:0;
}
.eco-price-block__ttl{
	font-size:var(--fs-label-l);
	font-weight:700;
	text-align:center;
	margin:0 0 10px;
}
.eco-price-block__note{
	font-size:var(--fs-label);
	font-weight:500;
	text-align:center;
	margin:0 0 24px;
}
.eco-price-table-wrap{
	width:100%;
	overflow-x:auto;
}
.eco-price-table{
	width:1100px;
	border-collapse:collapse;
	table-layout:fixed;
	border:2px solid #58c472;
}

.eco-price-table th,
.eco-price-table td{
	
	padding:18px 20px;
	font-size:var(--fs-m);
	text-align:center;
	vertical-align:middle;
}
.eco-price-table th{
	border:2px solid #58c472;
	border-right:2px solid #dff8e5;
}
.eco-price-table th:last-child{
	border-right: none;
}
.eco-price-table td{
	border:2px solid #58c472;
}
.eco-price-table col.col--name{
	width:36%;
}
.eco-price-table thead th{
	background:#58c472;
	color:#fff;
	font-weight:700;
	font-size:var(--fs-label);
}
.eco-price-table tbody tr:nth-child(odd) td{
	background:#dff8e5;
}
.eco-price-table tbody tr:nth-child(even) td{
	background:#f8fffa;
}
.eco-price-table__amount{
	color:#159c35;
	font-size:26px;
	font-weight:700;
}
.eco-price-table__unit{
	font-size:var(--fs-text-s);
	font-weight:500;
}

/* ==================== 給油特典ページ（/benefit/gasoline/） ==================== */
.gasoline-intro{
	padding:50px 0 0;
}
.gasoline-intro__ttl{
	margin:0;
	font-size:var(--fs-xl);
	font-weight:500;
	line-height:1.5;
	color:#0071b9;
	text-align:left;
}
.gasoline-intro__banner{
	margin:35px auto 0;
	text-align:center;
}
.gasoline-intro__banner img{
	width:1040px;
	height:auto;
}

.gasoline-benefit{
	margin-top:50px;
	padding:60px 0;
	background:var(--color-bg-primary);
}
.gasoline-inner{
	width:1000px;
	margin:0 auto;
	text-align:left;
	box-sizing:border-box;
	padding-bottom:100px;
}
.gasoline-block{
	margin:0 0 60px;
}
.gasoline-block:last-of-type{
	margin-bottom:0;
}
.gasoline-block__ttl{
	display:flex;
	align-items:center;
	justify-content:center;
	width:1000px;
	height:80px;
	margin:0 0 40px;
	background:#11a7e6;
	border-radius:40px;
	color:#fff;
	font-size:var(--fs-xl);
	font-weight:700;
	line-height:1;
	text-align:center;
}

/* 給油特典：白カード（アイコン＋テキスト2カラム） */
.gasoline-benefit-card{
	display:flex;
	align-items:flex-start;
	justify-content:center;
	gap:40px;
	padding:55px 70px;
	background:#fff;
	border-radius:16px;
}
.gasoline-benefit-card__item{
	text-align:center;
}
.gasoline-benefit-card__img{
	margin:0;
	height:200px;
}
.gasoline-benefit-card__img img{
	display:block;
	margin:0 auto;
	height:auto;
}
.gasoline-benefit-card__item:nth-child(1) .gasoline-benefit-card__img img{
	width:426px;
}
.gasoline-benefit-card__item:nth-child(2) .gasoline-benefit-card__img img{
	width:429px;
}
.gasoline-benefit-card__text{
	margin:24px auto 0;
	font-size:var(--fs-label);
	font-weight:500;
	line-height:1.5;
	color:var(--color-text);
	text-align:left;
}
.gasoline-benefit-card__item:nth-child(1) .gasoline-benefit-card__text{
	width:390px;
}
.gasoline-benefit-card__item:nth-child(2) .gasoline-benefit-card__text{
	width:460px;
}
.gasoline-text-blue{
	color:#0071b9;
}

/* 給油特典：注意事項 */
.gasoline-notes{
	margin:26px 0 0;
	padding:0;
	list-style:none;
}
.gasoline-notes li{
	font-size:var(--fs-text-s);
	font-weight:500;
	line-height:1.9;
	color:var(--color-text);
}

/* ご利用方法：手順カード */
.gasoline-steps{
	margin:0;
	padding:0;
	list-style:none;
}
.gasoline-steps__item{
	display:flex;
	align-items:flex-start;
	gap:24px;
	padding:45px 55px;
	background:#fff;
	border-radius:16px;
}
.gasoline-steps__item + .gasoline-steps__item{
	margin-top:20px;
}
.gasoline-steps__img{
	width:30%;
	margin:0;
	text-align:center;
}

.gasoline-steps__item:nth-child(1) .gasoline-steps__img img{
	width:177px;
}
.gasoline-steps__item:nth-child(2) .gasoline-steps__img img{
	width:186px;
}
.gasoline-steps__item:nth-child(3) .gasoline-steps__img img{
	width:200px;
}
.gasoline-steps__num{
	display:flex;
	flex:none;
	align-items:center;
	justify-content:center;
	width:47px;
	height:47px;
	margin-top:10px;
	background:#0071b9;
	border-radius:50%;
	color:#fff;
	font-size:var(--fs-title);
	font-weight:700;
	line-height:1;
}
.gasoline-steps__body{
	flex:1;
	padding-top:14px;
}
.gasoline-steps__desc{
	margin:0;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.6;
	color:var(--color-text);
}
.gasoline-text-underline{
	text-decoration:underline;
}
.gasoline-steps__caption{
	margin:16px 0 0;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.5;
	color:var(--color-text);
	text-align:center;
}
.gasoline-steps__banner{
	margin:12px 0 0;
}
.gasoline-steps__banner img{
	display:block;
	width:380px;
	height:auto;
}
.gasoline-steps__note{
	margin:12px 0 0;
	font-size:var(--fs-base-s);
	font-weight:500;
	line-height:1.6;
	color:var(--color-text);
}

/* PDFリンク */
.gasoline-pdf-lead{
	margin:50px 0 0;
	font-size:var(--fs-label);
	font-weight:500;
	line-height:1.5;
	color:var(--color-text);
	text-align:center;
}
.gasoline-pdf-link{
	margin:20px 0 0;
	text-align:center;
}
.btn-pdf{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:20px;
	width:456px;
	max-width:100%;
	height:86px;
	box-sizing:border-box;
	background:#fff;
	border:2px solid var(--color-primary);
	border-radius:4px;
	color:var(--color-text);
	font-size:var(--fs-base);
	font-weight:700;
	line-height:1.5;
	text-decoration:none;
}
.btn-pdf:hover{
	opacity:.8;
}
.btn-pdf__icon{
	flex:none;
	width:40px;
	height:auto;
}

/* ==================== 引越しに伴う手続き（/howto/hikkoshi/） ==================== */
.hikkoshi-sec{
	padding:80px 0;
}
.hikkoshi-sec__ttl{
	margin:0 0 40px;
	color:#0071b9;
	font-size:var(--fs-label-m);
	font-weight:700;
	line-height:1.5;
	text-align:center;
}
.hikkoshi-sec__lead{
	margin:0 80px 80px;
	line-height:1.8;
	text-align:left;
}
.hikkoshi-sec__lead a{
	color:var(--color-navy);
	text-decoration:underline;
}
.hikkoshi-sec__sub{
	margin:0 0 20px;
	color:var(--color-text);
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.5;
	text-align:center;
}

/* 比較ボックス（現在 → お引越し先） */
.hikkoshi-compare{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:20px;
	margin:0 0 40px;
}
.hikkoshi-compare__box{
	width:360px;
	box-sizing:border-box;
	padding:24px 20px 26px;
	background:var(--color-bg-primary);
	border-radius:16px;
	text-align:center;
}
.hikkoshi-compare__label{
	margin:0 0 10px;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.3;
}
.hikkoshi-compare__badge{
	display:inline-block;
	margin:0 0 20px;
	padding:6px 22px;
	background:#0071b9;
	color:#fff;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.3;
	border-radius:30px;
}
.hikkoshi-compare__badge--green{
	background:#619415;
}
.hikkoshi-compare__img{
	display:flex;
	align-items:center;
	justify-content:center;
	height:126px;
	margin:0 0 20px;
}
.hikkoshi-compare__img img{
	width:auto;
	height:auto;
	max-height:100%;
}
.hikkoshi-compare__note{
	margin:0;
	font-size:var(--fs-text-s);
	line-height:1.6;
}
.hikkoshi-compare__arrow{
	display:flex;
	flex:none;
	align-items:center;
	justify-content:center;
	width:89px;
	height:70px;
	background:var(--color-primary);
	clip-path:polygon(0% 22%, 55% 22%, 55% 0%, 100% 50%, 55% 100%, 55% 78%, 0% 78%);
	color:#fff;
	font-size:var(--fs-text-s);
	font-weight:500;
	line-height:1.2;
	text-align:center;
}

/* 電話ボックス */
.hikkoshi-tel-box{
	display:flex;
	align-items:center;
	width:700px;
	max-width:100%;
	box-sizing:border-box;
	margin:0 auto 30px;
	padding:22px 43px 22px 66px;
	background:#fff;
	border:3px solid #0071b9;
	border-radius:8px;
	text-decoration:none;
}
.hikkoshi-tel-box:hover{
	opacity:.85;
}
.hikkoshi-tel-box__label{
	flex:none;
	margin:0 26px 0 0;
	color:#0071b9;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.3;
	text-align:center;
}
.hikkoshi-tel-box__hours{
	display:block;
	margin-top:6px;
	color:var(--color-text);
	font-size:var(--fs-base-s);
	font-weight:700;
	line-height:1.4;
}
.hikkoshi-tel-box__ico{
	flex:none;
	margin-right:16px;
}
.hikkoshi-tel-box__num{
	flex:none;
	margin:0;
	color:#0071b9;
	font-size:46px;
	font-weight:700;
	line-height:1.2;
	text-decoration:underline;
	text-decoration-thickness:2px;
	text-underline-offset:6px;
}
.hikkoshi-tel-box .ico-arrow-circle{
	flex:none;
	margin-left:auto;
}
.hikkoshi-tel-box .ico-arrow-circle--outline,
.hikkoshi-outline-btn .ico-arrow-circle--outline{
	background:var(--color-navy);
}

/* WEB申込みボタン */
.hikkoshi-web-btn{
	display:flex;
	align-items:center;
	gap:24px;
	width:700px;
	max-width:100%;
	box-sizing:border-box;
	margin:0 auto;
	padding:20px 34px;
	background:var(--color-primary);
	border-radius:8px;
	box-shadow:0 6px 0 rgba(0,0,0,.08);
	text-decoration:none;
}
.hikkoshi-web-btn:hover{
	opacity:.85;
}
.hikkoshi-web-btn__ico{
	width: 90px;
	margin-left: 15px;
}

.hikkoshi-web-btn__label{
	flex:1;
	margin:0 0 0 -25px;
	color:#fff;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.4;
	text-align:center;
}
.hikkoshi-web-btn .ico-arrow-circle{
	flex:none;
	color:var(--color-primary);
}

/* アウトラインボタン（マイページへログイン） */
.hikkoshi-outline-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:16px;
	width:700px;
	max-width:100%;
	box-sizing:border-box;
	margin:0 auto;
	padding:30px 34px;
	background:#fff;
	border:3px solid #0071b9;
	border-radius:8px;
	text-decoration:none;
}
.hikkoshi-outline-btn:hover{
	opacity:.85;
}
.hikkoshi-outline-btn__ico{
	width: 30px;
}
.hikkoshi-outline-btn__label{
	margin:0;
	color:#0071b9;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.4;
	text-align:center;
	width: 60%;
}
.hikkoshi-outline-btn .ico-arrow-circle{
	flex:none;
}

/* お手続き案内テキスト */
.hikkoshi-note-box{
	text-align:left;
}
.hikkoshi-note-box p{
	margin:0 0 8px;
	line-height:1.8;
}
.hikkoshi-note-box p:last-child{
	margin-bottom:0;
	color:var(--color-pink);
}

/* ==================== 申込み分岐ページ（/formbranch/） ==================== */
.formbranch-bg{
	background:#ecf7fc;
	padding:80px 0 60px;
}

/* ---- 即日開通（電話） ---- */
.formbranch-tel{
	margin:0 0 60px;
}
.formbranch-tel__ttl{
	margin:0 0 30px;
	color:#000;
	font-size:var(--fs-title);
	font-weight:700;
	line-height:1.5;
	text-align:left;
}
.formbranch-tel__box{
	box-sizing:border-box;
	width:1101px;
	max-width:100%;
	margin:0 auto;
	padding:35px 30px;
	background:#fff;
	border-radius:16px;
	text-align:center;
}
.formbranch-tel__label{
	margin:0 0 20px;
	color:#0071b9;
	font-size:var(--fs-l);
	font-weight:700;
	line-height:1.3;
}
.formbranch-tel__btn{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:16px;
	width:561px;
	max-width:100%;
	box-sizing:border-box;
	padding:20px 60px;
	background:#fff;
	border:3px solid #0071b9;
	border-radius:60px;
	box-shadow:0 5px 5px rgba(0,0,0,.2);
	text-decoration:none;
}
.formbranch-tel__btn:hover{
	opacity:.85;
}
.formbranch-tel__ico{
	flex:none;
}
.formbranch-tel__num{
	flex:none;
	color:#0071b9;
	font-family:"Lato", sans-serif;
	font-size:50px;
	font-weight:700;
	line-height:1.2;
	letter-spacing:.03em;
}
.formbranch-tel__btn .ico-arrow-circle{
	position:absolute;
	right:24px;
	top:50%;
	flex:none;
	transform:translateY(-50%);
}
.formbranch-tel__btn .ico-arrow-circle--outline,
.formbranch-mypage__btn .ico-arrow-circle--outline{
	background:var(--color-navy);
}
.formbranch-tel__hours{
	margin:20px 0 0;
	color:#0071b9;
	font-size:var(--fs-m);
	font-weight:700;
	line-height:1.3;
}

/* ---- WEBからのお申し込み ---- */
.formbranch-web{
	margin:0 0 60px;
}
.formbranch-web__ttl{
	margin:0 0 30px;
	color:#000;
	font-size:var(--fs-title);
	font-weight:700;
	line-height:1.5;
	text-align:left;
}
.formbranch-web__list{
	display:flex;
	justify-content:space-between;
	list-style:none;
	margin:0;
	padding:0;
}
.formbranch-web__item{
	box-sizing:border-box;
	width:48.5%;
	padding:40px 50px 46px;
	background:#fff;
	border-radius:20px;
	box-shadow:0 4px 12px rgba(0,0,0,.06);
	text-align:center;
}
.formbranch-web__btn{
	position:relative;
	display:flex;
	align-items:center;
	gap:20px;
	box-sizing:border-box;
	width:100%;
	padding:26px 46px;
	border:4px solid #fff;
	border-radius:20px;
	box-shadow:0 8px 14px rgba(0,0,0,.18);
	text-decoration:none;
}
.formbranch-web__item--blue .formbranch-web__btn{
	background:var(--color-primary);
}
.formbranch-web__item--green .formbranch-web__btn{
	background:var(--color-green);
}
.formbranch-web__btn:hover{
	opacity:.85;
}
.formbranch-web__badge{
	display:flex;
	flex:none;
	align-items:center;
	justify-content:center;
	width:70px;
	height:70px;
	background:#fff;
	border-radius:50%;
}
.formbranch-web__label{
	flex:1;
	color:#fff;
	font-size:var(--fs-l);
	font-weight:700;
	line-height:1.4;
	letter-spacing:.03em;
	text-align:left;
}
.formbranch-web__btn .ico-arrow-circle{
	flex:none;
	margin-left:auto;
}
.formbranch-web__item--blue .ico-arrow-circle{
	color:var(--color-primary);
}
.formbranch-web__item--green .ico-arrow-circle{
	color:var(--color-green);
}
.formbranch-web__note{
	margin:22px 0 0;
	color:var(--color-primary);
	font-size:var(--fs-m);
	font-weight:700;
	line-height:1.6;
	text-align:center;
}
.formbranch-web__note--green{
	color:var(--color-green);
}

/* ---- ご契約中のお客様のお引越し（マイページ） ---- */
.formbranch-mypage{
	text-align:center;
}
.formbranch-mypage__ttl{
	margin:0 0 16px;
	color:#1f1f1f;
	font-size:var(--fs-title);
	font-weight:700;
	line-height:1.5;
}
.formbranch-mypage__sub{
	margin:0 0 30px;
	color:#000;
	font-size:var(--fs-m);
	font-weight:700;
	line-height:1.5;
}
.formbranch-mypage__box{
	box-sizing:border-box;
	width:1101px;
	max-width:100%;
	margin:0 auto;
	padding:35px 30px;
	background:#fff;
	border-radius:16px;
}
.formbranch-mypage__btn{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:16px;
	width:559px;
	max-width:100%;
	box-sizing:border-box;
	padding:20px 60px;
	background:#fff;
	border:4px solid #0071b9;
	border-radius:60px;
	text-decoration:none;
}
.formbranch-mypage__btn:hover{
	opacity:.85;
}
.formbranch-mypage__ico{
	flex:none;
}
.formbranch-mypage__label{
	flex:none;
	color:#0071b9;
	font-size:var(--fs-l);
	font-weight:700;
	line-height:1.3;
}
.formbranch-mypage__btn .ico-arrow-circle{
	position:absolute;
	right:24px;
	top:50%;
	flex:none;
	transform:translateY(-50%);
}
.formbranch-mypage__note{
	margin:20px 0 0;
	color:#000;
	font-size:var(--fs-text-s);
	font-weight:700;
	line-height:1.6;
	text-align:center;
}
.formbranch-mypage__note-link{
	color:var(--color-navy);
	text-decoration:underline;
}
.formbranch-mypage__note-link:hover{
	opacity:.7;
}

/* ==================== 特定商取引法に基づく表記（/howto/tokutei/） ==================== */
.tokutei-sec{
	padding:80px 0 100px;
}

/* ---- 事業者情報 ---- */
.tokutei-info{
	border-top:1px solid var(--color-border);
}
.tokutei-info__row{
	display:flex;
	align-items:center;
	padding:40px 0;
	border-bottom:1px solid var(--color-border);
}
.tokutei-info__label{
	flex:none;
	width:200px;
	margin:0;
	font-weight:700;
}
.tokutei-info__value{
	flex:1;
	margin:0;
	font-weight:500;
	line-height:1.5;
}
.tokutei-info__value a{
	color:#0071b9;
}
.tokutei-info__small{
	font-size:var(--fs-text-s);
}

/* ---- セクション見出し ---- */
.tokutei-h2{
	margin:100px 0 60px;
	color:#0071b9;
	font-size:var(--fs-label-l);
	font-weight:700;
	line-height:1.5;
	text-align:center;
}

/* ---- 項目ブロック（見出し＋罫線＋本文） ---- */
.tokutei-block{
	margin:60px 0 0;
}
.tokutei-block__ttl{
	margin:0 0 20px;
	color:#000;
	font-size:var(--fs-l);
	font-weight:700;
	line-height:1.5;
}
.tokutei-block__text{
	margin:0;
}
.tokutei-block__text--mt{
	margin-top:30px;
}
.tokutei-block__link{
	color:#0071b9;
}

/* ==================== 会社概要（/company/） ==================== */
.company-sec{
	padding:80px 0 100px;
}

/* ---- 会社情報テーブル ---- */
.company-info{
	border-top:1px solid var(--color-border);
}
.company-info::after{
	content:"";
	display:table;
	clear:both;
}
.company-photo{
	float:right;
	width:344px;
	margin:30px 0 30px 40px;
}
.company-photo img{
	display:block;
	width:100%;
	height:390px;
	object-fit:cover;
	border-radius:16px;
	box-shadow:0 8px 20px rgba(0,0,0,.1);
}
.company-info__row{
	display:flex;
	align-items:center;
	padding:40px 0;
	border-bottom:1px solid var(--color-border);
}
.company-info__label{
	flex:none;
	width:200px;
	margin:0;
	font-weight:700;
}
.company-info__value{
	flex:1;
	margin:0;
	font-weight:500;
	line-height:1.5;
}
.company-info__value a{
	color:#0071b9;
}
.company-info__small{
	font-size:var(--fs-text-s);
}

/* ==================== 電気工事店様（/electrical-contractor/） ==================== */
.eleccon-content-bg{
	padding-bottom:100px;
}

/* ---- リード（見出し＋リード文） ---- */
.eleccon-lead{
	margin:0 0 50px;
	text-align:center;
}
.eleccon-lead__ttl{
	margin:0 0 30px;
	color:#0071b9;
	font-size:var(--fs-xl);
	font-weight:700;
	letter-spacing:.05em;
	line-height:1.3;
}
.eleccon-lead__text{
	margin:0;
	color:#000;
	font-size:var(--fs-m);
	font-weight:400;
	line-height:2;
}

/* ---- ホワイトボックス（入力内容／受付システム） ---- */
.eleccon-box__ttl{
	margin:0;
	color:#000;
	font-size:var(--fs-l);
	font-weight:700;
	line-height:1.5;
	text-align:left;
}
.eleccon-box__ttl--mt{
	margin-top:60px;
}
.eleccon-box__text{
	margin:0;
	color:#000;
	font-size:var(--fs-m);
	font-weight:400;
	line-height:2;
}
.eleccon-box__text--mt{
	margin-top:30px;
}
.eleccon-box__link{
	color:#0071b9;
}

/* ---- コールセンターボタン（/howto/kaiyaku/ の.kaiyaku-tel-boxをそのまま流用） ---- */
.eleccon-tel-box{
	max-width:440px;
	margin:40px 0 0;
}

/* ==================== 電気料金シミュレーション（/simulation-market02/） ==================== */

/* ---- ページヘッダー ---- */
.page-title--sim .page-title__ttl{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	font-size:var(--fs-xl);
	letter-spacing:normal;
}
.page-title__ico{
	flex:none;
}

/* ---- 入力フォーム ---- */
.sim-form-sec{
	background:var(--color-bg-grayish);
	padding:60px 0;
}
.sim-form-sec__lead{
	margin:0 0 40px;
	color:var(--color-text);
	font-size:var(--fs-m);
	font-weight:400;
	line-height:1.6;
	text-align:center;
}
.sim-form{
	width:658px;
	max-width:100%;
	margin:0 auto;
}
.sim-form__row{
	display:flex;
	align-items:center;
	margin-bottom:24px;
}
.sim-form__num{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:none;
	width:36px;
	height:36px;
	margin-right:16px;
	background:var(--color-primary);
	color:#fff;
	font-size:22px;
	font-weight:700;
	line-height:1;
	border-radius:50%;
}
.sim-form__label{
	flex:none;
	width:184px;
	margin:0;
	color:var(--color-text);
	font-size:var(--fs-label);
	font-weight:400;
	line-height:1.3;
}
.sim-form__control{
	position:relative;
	flex:1;
	min-width:0;
}
.sim-form__select,
.sim-form__input{
	display:block;
	width:100%;
	height:78px;
	padding:0 40px 0 20px;
	box-sizing:border-box;
	background:#fff;
	color:var(--color-text);
	font-family:inherit;
	font-size:var(--fs-label);
	line-height:1;
	border:1px solid #c7c7c7;
	border-radius:10px;
	appearance:none;
	-webkit-appearance:none;
}
.sim-form__input{
	padding-right:70px;
}
.sim-form__input::placeholder{
	color:#999;
}
.sim-form__control:after{
	content:"";
	position:absolute;
	top:50%;
	right:24px;
	width:0;
	height:0;
	border-style:solid;
	border-width:7px 6px 0 6px;
	border-color:var(--color-text) transparent transparent transparent;
	transform:translateY(-50%);
	pointer-events:none;
}
.sim-form__control--unit:after{
	display:none;
}
.sim-form__unit{
	position:absolute;
	top:50%;
	right:20px;
	transform:translateY(-50%);
	color:var(--color-text);
	font-size:var(--fs-label-m);
	font-weight:400;
	pointer-events:none;
}
.sim-form__control--capacity .sim-form__select{
	padding-right:70px;
}
.sim-form__control--capacity .sim-form__unit{
	right:44px;
}
.sim-form__error{
	margin:24px 0 0;
	color:#e60013;
	font-size:var(--fs-base-s);
	font-weight:500;
	text-align:center;
}
.sim-form__submit-wrap{
	margin:40px 0 0;
	text-align:center;
}
.sim-form__submit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:456px;
	max-width:100%;
	height:92px;
	background:var(--color-primary);
	color:#fff;
	font-family:inherit;
	font-size:var(--fs-label-m);
	font-weight:700;
	line-height:1;
	border:none;
	border-radius:16px;
	cursor:pointer;
}
.sim-form__submit:hover{
	opacity:.85;
}

/* ---- 診断結果 ---- */
.sim-result{
	padding:120px 0 70px;
	background:url(../images/bg_sim_result_curve.png) center -180px no-repeat, linear-gradient(180deg, #e6f9ff 0%, #cbf0ff 100%);
	background-size:100% auto, 100% 100%;
}
.sim-result[hidden]{
	display:none;
}
.sim-result__ttl-img{
	margin:0px 0 10px;
	text-align:center;
}
.sim-result__ttl-img img{
	width:871px;
	max-width:100%;
	height:auto;
}
.sim-result__date{
	margin:0 0 40px;
	color:var(--color-text);
	font-size:var(--fs-m);
	font-weight:400;
	text-align:center;
}
.sim-result__cards{
	display:flex;
	justify-content:center;
	align-items:flex-start;
	gap:35px;
	margin-bottom:40px;
}

/* ---- 診断結果カード ---- */
.sim-card{
	width:486px;
	max-width:100%;
	background:#fff;
	border:1px solid var(--color-primary);
	border-radius:16px;
	overflow:hidden;
}
.sim-card__head{
	padding:22px 20px;
	background:var(--color-primary);
	color:#fff;
	text-align:center;
}
.sim-card__head-sub{
	margin:0 0 8px;
	font-size:var(--fs-label-m);
	font-weight:700;
	line-height:1;
}
.sim-card__head-ttl{
	margin:0;
	font-size:var(--fs-title);
	font-weight:700;
	line-height:1;
}
.sim-card__summary{
	position:relative;
	padding:30px 30px 24px;
}
.sim-card__catch{
	margin:0 0 25px;
	text-align:center;
	line-height:1.2;
}
.sim-card__catch-year{
	color:var(--color-text);
	font-size:22px;
	font-weight:500;
}
.sim-card__catch-txt{
	color:#e60013;
	font-size:32px;
	font-weight:700;
}
.sim-card__price{
	display:flex;
	align-items:baseline;
	justify-content:center;
	gap:8px;
	margin:0 19px;
	padding:10px 0;
	background:#fffcd9;
	border:1px solid #cccccc;
	border-radius:0px;
}
.sim-card__price-label{
	color:var(--color-text);
	font-size:var(--fs-label);
	font-weight:700;
}
.sim-card__price-num{
	color:var(--color-text);
	font-size:54px;
	font-weight:700;
	line-height:1;
}
.sim-card__price-unit{
	color:var(--color-text);
	font-size:var(--fs-title);
	font-weight:700;
}
.sim-card__mascot{
	position:absolute;
	bottom:-5px;
	right:10px;
	width:80px;
	height:auto;
}
.sim-card__toggle{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	margin:0;
	padding:0 0 26px;
	background:none;
	color:var(--color-text);
	font-family:inherit;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1;
	border:none;
	cursor:pointer;
}


.sim-card__toggle-label{
	position: relative;
}

.sim-card__toggle-label::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: #000;
	bottom:-8px;
	left: 0;
}

.sim-card__toggle-label--open{
	display:none;
}
.sim-card.is-open .sim-card__toggle-label--closed{
	display:none;
}
.sim-card.is-open .sim-card__toggle-label--open{
	display:inline;
}
.sim-card__toggle-ico{
	position:relative;
	flex:none;
	width:30px;
	height:30px;
	background:var(--color-navy);
	border-radius:50%;
}
.sim-card__toggle-ico:before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:0;
	height:0;
	border-style:solid;
	border-width:8px 6px 0 6px;
	border-color:#fff transparent transparent transparent;
	transform:translate(-50%,-50%);
	transition:transform .2s ease;
}
.sim-card.is-open .sim-card__toggle-ico:before{
	transform:translate(-50%,-50%) rotate(180deg);
}
.sim-card__detail{
	display:none;
	padding:0 30px 30px;
}
.sim-card__annual{
	margin:0 0 16px;
	text-align:center;
}
.sim-card__annual-label{
	display:inline-block;
	margin:0 10px 8px 0;
	color:var(--color-text);
	font-size:var(--fs-m);
	font-weight:700;
}
.sim-card__annual-num{
	display:inline-block;
	color:var(--color-text);
	font-size:42px;
	font-weight:700;
}
.sim-card__annual-unit{
	color:var(--color-text);
	font-size:var(--fs-title);
	font-weight:700;
}
.sim-card__banner{
	position:relative;
	margin:0 0 20px;
	padding:10px;
	background:#e60013;
	color:#fff;
	font-size:var(--fs-label);
	font-weight:700;
	text-align:center;
	border-radius:6px;
}
/* 吹き出しの下向き三角（border trickでCSS三角形を作成し、バナー下端中央に配置） */
.sim-card__banner::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-10px;
	transform:translateX(-50%);
	width:0;
	height:0;
	border-style:solid;
	border-width:10px 9px 0 9px;
	border-color:#e60013 transparent transparent transparent;
}
.sim-card__list{
	margin:0;
	padding:0;
	list-style:none;
}
.sim-card__item{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:80px;
	padding:0 20px;
	margin-bottom:10px;
	background:var(--color-bg-pink);
	border-radius:10px;
}
.sim-card__item:last-child{
	margin-bottom:0;
}
.sim-card__item-label{
	color:var(--color-text);
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.3;
}
.sim-card__item-value{
	color:#e60013;
	font-size:var(--fs-label);
	font-weight:700;
}
.sim-card__item-value strong{
	font-size:var(--fs-xl);
	font-weight:700;
}
.sim-card__item-value em{
	margin-left:24px;
	color:var(--color-text);
	font-size:var(--fs-label-m);
	font-weight:500;
	font-style:normal;
}

/* ---- 現在の電気料金 ---- */
.sim-current{
	width:1006px;
	max-width:100%;
	margin:0 auto;
	padding:30px 20px;
	background:#fff;
	border:1px solid var(--color-primary);
	border-radius:16px;
	text-align:center;
}
.sim-current__ttl{
	margin:0 0 16px;
	color:#0071b9;
	font-size:var(--fs-title);
	font-weight:700;
}
.sim-current__price{
	margin:0 0 16px;
	color:var(--color-text);
	font-size:var(--fs-title);
	font-weight:500;
}
.sim-current__note{
	margin:0;
	color:var(--color-text);
	font-size:var(--fs-m);
	font-weight:400;
	line-height:1.6;
}

/* ---- 注意書き ---- */
.sim-notes{
	padding:40px 0 60px;
}
.sim-notes__list{
	margin:0;
	padding:0;
	list-style:none;
	color:#666;
	font-size:var(--fs-base-s);
	line-height:1.6;
}
.sim-notes__list li{
	margin-bottom:3px;
}
.sim-notes__list li:last-child{
	margin-bottom:0;
}

/* ==================== 各種調整金について（/plan/fee/） ==================== */
.page-title--fee{
	background:#11a7e6;
}
/* タイトル直後の余白は共通ルール（.page-title + .page-section）で自動適用される */
.fee-block{
	background:var(--color-bg-grayish);
}
.fee-block .block-ttl{
	font-size:var(--fs-label-l);
}
.fee-block__sub-ttl{
	margin:0 0 21px;
	font-size:var(--fs-l);
	font-weight:700;
	letter-spacing:.05em;
	line-height:1.4;
}
.fee-note-list{
	display:flex;
	flex-direction:column;
	gap:16px;
	margin:0;
	padding:0;
	list-style:none;
}
.fee-note-item{
	padding:16px 24px;
	background:#fff;
	border-radius:40px;
	font-size:var(--fs-m);
	font-weight:500;
	line-height:1.5;
}
.fee-desc{
	margin:38px 0 0;
	font-size:var(--fs-m);
	font-weight:500;
	line-height:1.8;
}
.fee-label{
	margin:60px 0 21px;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.4;
}
.fee-formula-list{
	display:flex;
	flex-direction:column;
	gap:16px;
	margin:0;
	padding:0;
	list-style:none;
}
.fee-formula-item{
	padding:16px 24px;
	background:#fff;
	border-radius:40px;
	font-size:var(--fs-m);
	font-weight:500;
	line-height:1.5;
}
.fee-rate-table-wrap{
	overflow-x:auto;
}
.fee-rate-table{
	width:940px;
	max-width:100%;
	border-collapse:collapse;
}
.fee-rate-table th,
.fee-rate-table td{
	box-sizing:border-box;
	width:50%;
	height:76px;
	padding:8px 20px;
	border:1px solid var(--color-bg-blue);
	text-align:center;
	vertical-align:middle;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.4;
}
.fee-rate-table th{
	background:var(--color-primary);
	color:#fff;
	border-color:#fff;
}
.fee-rate-table td{
	background:#fff;
}
.fee-rate-table td:first-child{
	background:var(--color-bg-primary);
}
.fee-example-list{
	display:flex;
	flex-direction:column;
	gap:16px;
	margin:0;
	padding:0;
	list-style:none;
}
.fee-example-item{
	padding:24px;
	background:#fff;
	border-radius:18px;
}
.fee-example-item__ttl{
	margin:0 0 8px;
	font-size:var(--fs-m);
	font-weight:700;
	line-height:1.5;
}
.fee-example-item__body{
	margin:0;
	font-size:var(--fs-m);
	font-weight:500;
	line-height:1.5;
}
.fee-pdf-grid{
	display:flex;
	flex-wrap:wrap;
	gap:10px 32px;
	margin:37px 0 0;
	padding:0;
	list-style:none;
}
.fee-pdf-item{
	width:calc(50% - 16px);
}
.fee-pdf-item a{
	display:flex;
	align-items:center;
	justify-content:space-between;
	box-sizing:border-box;
	width:100%;
	height:86px;
	padding:0 39px 0 58px;
	background:var(--color-bg-primary);
	border:1px solid var(--color-primary);
	border-radius:0;
	text-decoration:none;
	color:var(--color-text);
}

.fee-pdf-item__text{
	display:flex;
	flex-direction:row;
	align-items:flex-end;
	gap:20px;
}
.fee-pdf-item__year{
	font-size:var(--fs-label);
	font-weight:700;
}
.fee-pdf-item__size{
	font-size:var(--fs-text-s);
	font-weight:700;
	color:var(--color-text);
}
.fee-pdf-item__icon{
	flex:none;
	width:40px;
	height:auto;
}

/* ==================== 新規受付停止中プラン一覧（/plan/stop/） ==================== */
.stop-plan{
	padding-bottom: 100px;
}
.stop-plan__group{
	margin-bottom:75px;
}
.stop-plan__group:last-of-type{
	margin-bottom:0;
}
.stop-plan__group-ttl{
	margin:0 0 40px;
	padding:10px 0;
	background:#757575;
	color:#fff;
	font-size:var(--fs-label-l);
	font-weight:700;
	letter-spacing:.05em;
	text-align:center;
}
.stop-plan__cards{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:0 40px;
}
.stop-card{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	height:300px;
	background:#eeeeee;
	text-decoration:none;
	transition:.2s ease-in-out;
}
.stop-card:hover{
	opacity:.85;
}
.stop-card__name{
	margin:0;
	color:#cccccc;
	font-size:var(--fs-label-l);
	font-weight:700;
	letter-spacing:.05em;
}
.stop-card__msg{
	margin:30px 0 0;
	color:#cc0000;
	font-size:var(--fs-label-m);
	font-weight:700;
	line-height:1.4;
	text-align:center;
}
.stop-plan__more{
	margin-top:82px;
	text-align:center;
}
.stop-plan__more-btn{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:700px;
	max-width:100%;
	height:80px;
	background:#11a7e6;
	color:#fff;
	font-size:var(--fs-label-m);
	font-weight:700;
	text-decoration:none;
	border-radius:10px;
	transition:.2s ease-in-out;
}
.stop-plan__more-btn:hover{
	opacity:.85;
}
.stop-plan__more-btn:after{
	content:"";
	position:absolute;
	top:50%;
	right:33px;
	width:0;
	height:0;
	border-style:solid;
	border-width:8px 0 8px 12px;
	border-color:transparent transparent transparent #fff;
	transform:translateY(-50%);
}

/* ==================== 受付停止中プラン詳細（/plan/family/ 等） ==================== */
.plan-stop-notice{
	padding:64px 40px 65px;
	background:#eeeeee;
	border-radius:16px;
	text-align:center;
}
.plan-stop-notice__name{
	margin:0;
	color:#757575;
	font-size:var(--fs-label-xl);
	font-weight:700;
	letter-spacing:.075em;
}
.plan-stop-notice__msg{
	margin:44px 0 0;
	color:#d5082c;
	font-size:var(--fs-title);
	font-weight:700;
	line-height:1.4;
}
.plan-stop-notice__link-text{
	margin:36px 0 0;
	color:#d5082c;
	font-size:var(--fs-m);
	font-weight:500;
	line-height:1.5;
}
.plan-stop-notice__link-text a{
	color:inherit;
	text-decoration:underline;
}
.plan-stop-notice__desc{
	margin:38px 0 0;
	color:#999999;
	font-size:var(--fs-base);
	font-weight:400;
	line-height:1.4;
}

/* ---- 料金単価表：受付停止中プラン用（グレー配色） ---- */
.price-unit-table--stop th,
.price-unit-table--stop td{
	border-color:#757575;
}
.price-unit-table--stop thead th{
	background:#757575;
	border-color:#fff;
}
/* theadの外周（上端・左端・右端）はthead背景色に合わせ、内側の区切り線のみ白にする */
.price-unit-table--stop thead tr:first-child th{
	border-top-color:#757575;
}
.price-unit-table--stop thead tr:first-child th:first-child{
	border-left-color:#757575;
}
.price-unit-table--stop thead th:last-child{
	border-right-color:#757575;
}
.price-unit-table--stop tbody td:nth-child(1){
	background:#e2e2e2;
}
.price-unit-table--stop tbody td:nth-child(2){
	background:#fff;
}
/* ▲率の色は共通の.price-unit-table__rate（var(--color-pink)）がそのまま今回のサンプル色と一致するため上書き不要 */

/* ---- 料金構成表：脚注（※1） ---- */
.price-composition__note{
	margin:24px 0 0;
	font-size:var(--fs-base-s);
	line-height:1.4;
	text-align:left;
}

/* ---- 料金単価表：見出し違いで複数table（.price-unit-block）を受付停止中プランで使う場合 ---- */
.price-unit-table--stop .price-unit-table__head{
	background:#757575;
	color:#fff;
}
.price-unit-table--stop .price-unit-table__sub-head,
.price-unit-table--stop .price-unit-table__sub-head--blue{
	background:#e2e2e2;
	color:#000;
}
/* theadを使わないタイプも、theadタイプと同じく内側の区切り線は白、外周はthead背景色に合わせる（背景が濃いグレー＝__headの部分） */
.price-unit-table--stop .price-unit-table__head{
	border-color:#fff;
}
.price-unit-table--stop tbody tr:first-child > .price-unit-table__head{
	border-top-color:#757575;
}
/* 外周の左端は、rowspanで1行目のセルが2行目以降の左端を兼ねているケース（family/businessa等）だけでなく、
   夜トクプランの従量料金表のように2行目自身にも見出しセル（__head）が独立して存在するケースがあるため、
   「行の先頭が__headであれば、その行は常に表の左端」という前提で行を限定せずに適用する */
.price-unit-table--stop tbody tr > .price-unit-table__head:first-child{
	border-left-color:#757575;
}
.price-unit-table--stop tbody tr > .price-unit-table__head:last-child{
	border-right-color:#757575;
}
/* 見出しセル自体がrowspanで複数の見出し行にまたがる列（例：夜トクプラン従量料金表の「22:00〜8:00」）は、
   データ行と接する下端をthead背景色（濃いグレー）に合わせ、theadとtbodyの段差をなくす */
.price-unit-table--stop .price-unit-table__head[rowspan]{
	border-bottom-color:#757575;
}
/* 1行目の最終セルがrowspanで右端まで確保されているテーブル（夜トクプラン従量料金表の「22:00〜8:00」など）では、
   2行目以降の各行の最終セルは見た目上は表の右端に見えるが、実際の表の右端ではない（右端は1行目のrowspanセルが担う）。
   このような行の最終セルにまで:last-childの外周グレー線を当てると、22:00〜8:00セルの左端（白線）との間で
   行ごとに白／グレーが入り混じった不自然な区切り線になるため、白線に統一する */
.price-unit-table--stop tbody:has(> tr:first-child > .price-unit-table__head[rowspan]:last-child) tr:not(:first-child) > .price-unit-table__head:last-child,
.price-unit-table--stop tbody:has(> tr:first-child > .price-unit-table__head[rowspan]:last-child) tr:not(:first-child) > .price-unit-table__sub-head:last-child{
	border-right-color:#fff;
}
/* 背景が明るいグレー（__sub-head）区切り線 */
.price-unit-table--stop .price-unit-table__sub-head,
.price-unit-table--stop .price-unit-table__sub-head--blue{
	border-color:#757575;
}


/* ==================== 夜の料金はずっと一緒！（/plan/night/） ==================== */
.night-saving{
	padding:76px 0 51px;
	background:#cccccc;
}
.night-saving__card{
	padding:40px 0 62px;
	background:#fff;
	border-radius:20px;
	text-align:center;
}
.night-saving__ttl{
	margin:0 0 43px;
	font-size:var(--fs-xl);
	font-weight:700;
}
.night-saving__cards{
	display:flex;
	justify-content:center;
	align-items:flex-start;
	gap:134px;
	margin:0;
	padding:0;
	list-style:none;
}
.night-saving__img{
	display:block;
	width:342px;
	height:auto;
}
.night-saving__note{
	margin:24px 0 0;
	font-size:var(--fs-base-s);
	font-weight:400;
	line-height:1.8;
	text-align:left;
}

/* ==================== 404エラーページ（/404.html） ==================== */
.error-404{
	padding:120px 0 160px;
	background:var(--color-bg-grayish);
}
.error-404__box{
	width:1100px;
	max-width:100%;
	margin:0 auto;
	padding:65px 40px 77px;
	background:#fff;
	border-radius:20px;
	text-align:center;
}
.error-404__illust{
	margin:0 0 43px;
}
.error-404__illust img{
	display:inline-block;
	width:315px;
	height:auto;
}
.error-404__ttl{
	margin:0;
	color:#0071b9;
	font-size:var(--fs-xl);
	font-weight:700;
	letter-spacing:.05em;
}
.error-404__desc{
	margin:45px 0 0;
	color:#000;
	font-size:var(--fs-m);
	font-weight:700;
	line-height:1.6;
}
.error-404__btn-wrap{
	margin:46px 0 0;
}
.error-404__btn{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:410px;
	max-width:100%;
	height:80px;
	background:#fff;
	color:var(--color-primary);
	font-size:var(--fs-label);
	font-weight:700;
	text-decoration:none;
	border:3px solid var(--color-primary);
	border-radius:40px;
	box-sizing:border-box;
	transition:.2s ease-in-out;
}
.error-404__btn:hover{
	opacity:.7;
}
.error-404__btn:after{
	content:"";
	position:absolute;
	top:50%;
	right:35px;
	width:0;
	height:0;
	border-style:solid;
	border-width:8px 0 8px 12px;
	border-color:transparent transparent transparent var(--color-primary);
	transform:translateY(-50%);
}

/* ==================== 他社からの切替えに伴う手続き（/howto/join/） ==================== */
.join-content-bg{
	padding:80px 0;
	background:var(--color-bg-grayish);
}
.join-content-bg .bg-radius-block{
	margin-bottom:40px;
}
.join-content-bg .bg-radius-block:last-child{
	margin-bottom:0;
}

/* カード内見出し・アクセント罫線は共通パーツ .card-ttl / .card-hr（.bg-radius-block直後で定義）を使用 */

/* 簡単お申し込み！ */
.join-apply__sub{
	margin:0;
	font-size:var(--fs-label-m);
	font-weight:700;
	text-align:left;
}
.join-apply__lead{
	margin:0 0 40px;
	line-height:2;
	font-size:var(--fs-m);
	text-align:left;
}
/* WEB申込みボタン・電話ボックスは /howto/hikkoshi/ の共通パーツ（.hikkoshi-web-btn / .hikkoshi-tel-box）をそのまま流用。
   本ページのみ表示順が逆（WEBボタン→電話ボックス）のため、ボタン側にだけ下マージンを補う */
.join-apply .hikkoshi-web-btn{
	margin-bottom:30px;
}

/* ご準備いただくもの */
.join-prepare__sub{
	margin:0;
	font-size:var(--fs-label-m);
	font-weight:700;
	text-align:left;
}
.join-prepare__body{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:40px;
	margin-bottom:40px;
}
.join-prepare__list{
	flex:1;
	min-width:0;
	margin:0;
	padding:0;
	list-style:none;
	font-size:var(--fs-m);
	line-height:1.8;
}
.join-prepare__list li{
	position:relative;
	padding-left:1.3em;
}
.join-prepare__list li:before{
	content:"●";
	position:absolute;
	left:0;
}
.join-prepare__img{
	flex:none;
	width:500px;
	max-width:100%;
	margin:0;
}
.join-prepare__img img{
	display:block;
	width:100%;
	height:auto;
}

/* 検針票のみかた：アコーディオン */

.join-meter__toggle{
	position:relative;
	display:block;
	width:100%;
	margin:40px 0 0;
	padding:20px 70px;
	background:var(--color-primary);
	color:#fff;
	font-family:inherit;
	border:none;
	border-radius:8px;
	cursor:pointer;
	line-height: 1.2;
}
.join-meter__toggle-ttl{
	display:block;
	font-size:var(--fs-title);
	font-weight:700;
	text-align:center;
}
/* 開閉アイコン：閉じている時は「＋」、開くと45度回転して「×」になる。バー内で見出しテキストは中央揃え、アイコンは右端に絶対配置 */
.join-meter__toggle-ico{
	position:absolute;
	top:50%;
	right:30px;
	flex:none;
	width:35px;
	height:35px;
	background:#fff;
	border-radius:50%;
	transform:translateY(-50%);
	transition:transform .25s ease;
}
.join-meter__toggle-ico:before,
.join-meter__toggle-ico:after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	background:var(--color-primary);
	transform:translate(-50%,-50%);
}
.join-meter__toggle-ico:before{
	width:16px;
	height:3px;
}
.join-meter__toggle-ico:after{
	width:3px;
	height:16px;
}
.join-meter.is-open .join-meter__toggle-ico{
	transform:translateY(-50%) rotate(45deg);
}
.join-meter__body{
	display:none;
}
.join-meter__inner{
	padding:40px 0 0;
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	flex-direction: row-reverse;
}
/* 番号リストと検針票サンプル画像を、対応する項目ごとに横並びで区切る行 */
.join-meter__img{
	width: 480px;
}
.join-meter__list{
	flex:1;
	margin:0;
	padding:0 30px 0 0;
	list-style:none;
}
.join-meter__list--full{
	margin:0;
	padding:0;
	list-style:none;
}
.join-meter-item{
	margin:0 0 30px;
}
.join-meter__row .join-meter-item:last-child,
.join-meter__list--full .join-meter-item:last-child{
	margin-bottom:0;
}
.join-meter-item__ttl{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 10px;
	color:#0071b9;
	font-size:var(--fs-label);
	font-weight:700;
}
.join-meter-item__num{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:none;
	width:30px;
	height:30px;
	border-radius:50%;
	background:#0071b9;
	color:#fff;
	font-size:var(--fs-m);
	font-weight:700;
}
.join-meter-item__desc{
	margin:0;
	line-height:1.7;
}
.join-meter__img{
	position:relative;
	flex:none;
	width:480px;
	max-width:100%;
	margin:0;
}
.join-meter__img img{
	display:block;
	width:100%;
	height:auto;
}
.join-meter__img-cap{
	display:block;
	margin:0 0 8px;
	font-size:var(--fs-label);
	font-weight:700;
}

/* 切り替えお手続きから完了まで */
.join-flow .sec-ttl{
	color:var(--color-navy);
}
/* 右端が矢印状に尖ったリボン形の見出しバー */
.join-flow-bar{
	max-width:100%;
	box-sizing:border-box;
	margin:0 auto 40px;
	padding:15px 50px 15px 30px;
	background:var(--color-primary);
	color:#fff;
	font-size:var(--fs-label-m);
	font-weight:700;
	text-align:left;
	line-height: 1.2;
	clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
}
.join-flow__note{
	margin:0 auto;
	font-size:var(--fs-m);
	text-align:left;
}
.join-flow__notes{
	margin:20px auto 20px;
	padding:0;
	list-style:none;
	font-size:var(--fs-text-s);
	line-height:1.8;
	text-align:left;
}
.join-flow__notes li{
	position:relative;
	padding-left:1.2em;
}
.join-flow__notes li:before{
	content:"○";
	position:absolute;
	left:0;
}

/* よくある質問はこちら（白背景の独立セクション） */
.join-faq{
	padding:80px 0;
}
.join-faq__btn-ico{
	flex:none;
}
.btn-round.join-faq__btn{
	min-width: 500px;
	border-radius:80px;
	border-color: var(--color-navy);
	color:var(--color-navy);
}
.btn-round.join-faq__btn img{
	margin-right: 20px;
	margin-left: -50px;
	width: 60px;
}
.btn-round.join-faq__btn:after{
	border-color:transparent transparent transparent var(--color-navy);
}


/* ==================== お支払い方法（/howto/payment/） ==================== */
/* セクション自体の背景・角丸・paddingは共通パーツ.cream-content-bgを使用（howto/payment/index.html側で併用クラス指定） */

/* お支払方法をお選びください */
.payment-select__row{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:60px;
	margin:0 0 40px 20px;
}
.payment-select__row a{
	display: block;
	color: #000;
}
.payment-select__col{
	display:flex;
	flex-direction:column;
	align-items:center;
}

.payment-select__icon{
	display:block;
	height:145px;
	width:auto;
	margin:0 auto 20px;
}
.payment-select__label{
	margin:0;
	font-size:var(--fs-label-m);
	font-weight:700;
	text-align:center;
}
.payment-select__or{
	box-sizing:border-box;
	display:flex;
	flex:none;
	align-items:center;
	justify-content:center;
	width:60px;
	height:60px;
	margin:0 0 45px;
	padding:0 0 6px;
	background:#666;
	border-radius:50%;
	color:#fff;
	font-size:var(--fs-label-m);
	font-weight:700;
	line-height: 1;
}
.payment-select__desc{
	margin:0;
	font-size:var(--fs-m);
	text-align:left;
}

/* 口座振替によるお支払い／クレジットカードによるお支払い（共通） */
.payment-section__lead{
	margin:0 0 40px;
	font-size:var(--fs-m);
	line-height:1.8;
	text-align:left;
}
.payment-block__ttl{
	margin:0 0 15px;
	font-size:var(--fs-label-m);
	font-weight:700;
}
.payment-block{
	margin:0 0 30px;
}
.payment-block:last-of-type{
	margin-bottom:40px;
}
.payment-block__label{
	margin:0 0 4px;
	font-size:var(--fs-m);
	font-weight:700;
}
.payment-block__desc{
	margin:0;
	font-size:var(--fs-m);
	line-height:1.8;
}
.payment-block__desc a{
	color:var(--color-navy);
	text-decoration:underline;
}
.payment-section__note{
	margin:0 0 24px;
	font-size:var(--fs-m);
}
.payment-brand-list{
	margin:0 0 40px;
}
.payment-brand-list img{
	display:block;
	height:55px;
	width:auto;
}
.payment-notes{
	margin:0 0 40px;
	padding:0;
	list-style:none;
	font-size:var(--fs-m);
	line-height:1.8;
	text-align:justify;
}
.payment-notes:last-child{
	margin-bottom:0;
}
.payment-notes li{
	position:relative;
	margin:0 0 10px;
	padding-left:1.3em;
}
.payment-notes li:last-child{
	margin-bottom:0;
}
.payment-notes li:before{
	content:"※";
	position:absolute;
	left:0;
}

.payment-pdf-list{
	display:flex;
	flex-direction:column;
	gap:18px;
	margin:0;
	padding:0;
	list-style:none;
}
.payment-pdf-item a{
	display:flex;
	align-items:center;
	justify-content:space-between;
	box-sizing:border-box;
	width:556px;
	max-width:100%;
	height:106px;
	padding:0 39px 0 58px;
	background:var(--color-bg-primary);
	border:1px solid var(--color-primary);
	text-decoration:none;
	color:var(--color-text);
}
.payment-pdf-item a:hover{
	opacity:.8;
}
.payment-pdf-item__text{
	display:flex;
	flex-direction:column;
	gap:6px;
}
.payment-pdf-item__label{
	font-size:var(--fs-label);
	font-weight:700;
}
.payment-pdf-item__size{
	font-size:var(--fs-text-s);
	font-weight:700;
	color:var(--color-text);
}
.payment-pdf-item__icon{
	flex:none;
	width:40px;
	height:auto;
}

/* ==================== 契約変更・解約（/howto/kaiyaku/） ==================== */
/* .bg-radius-block内で.hikkoshi-sec__lead（本来.hikkoshi-secの80px内側余白前提）を使うため、左右余白を打ち消す */
.kaiyaku-content-bg .hikkoshi-sec__lead{
	margin:0;
}
.kaiyaku-proc__row{
	display:flex;
	align-items:stretch;
	gap:80px;
}
.kaiyaku-proc__col{
	display:flex;
	flex-direction:column;
	flex:1;
	min-width:0;
}
.kaiyaku-list{
	margin:0 0 30px;
	padding:0;
	list-style:none;
}
.kaiyaku-list li{
	position:relative;
	margin:0 0 16px;
	padding-left:1.2em;
	font-size:var(--fs-m);
	line-height:1.5;
}
.kaiyaku-list li:last-child{
	margin-bottom:0;
}
.kaiyaku-list li:before{
	content:"●";
	position:absolute;
	left:0;
	color:#0071b9;
	font-size:1em;
	top:0;
}
.kaiyaku-proc__action{
	margin-top:auto;
}
/* マイページボタン・電話ボックスの高さを揃えるため、両方に同じheightを直接指定する
   （height:100%をそれぞれ別クラスから当てると、クラス指定順・詳細度次第でどちらが勝つか不安定になるため、直接値で固定） */
.kaiyaku-proc__col .hikkoshi-outline-btn{
	width:100%;
	height:104px;
	box-sizing:border-box;
	margin:0;
	padding:0 34px;
}
.kaiyaku-tel-box{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:30px;
	width:100%;
	height:104px;
	box-sizing:border-box;
	padding:0 30px;
	background:var(--color-primary);
	border-radius:12px;
	text-decoration:none;
	line-height:1;
}
.kaiyaku-tel-box:hover{
	opacity:.85;
}
.kaiyaku-tel-box__ico{
	flex:none;
	width: 50px;
}

.kaiyaku-tel-box__text{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
}
.kaiyaku-tel-box__label{
	color:#fff;
	font-size:var(--fs-base);
	font-weight:700;
	line-height:1.3;
}
.kaiyaku-tel-box__num{
	color:#fff;
	font-size:36px;
	font-weight:700;
	line-height:1;
}
.kaiyaku-tel-box__hours{
	color:#fff;
	font-size:var(--fs-base);
	font-weight:700;
	line-height:1;
}

/* ==================== 供給エリア・契約条件（/howto/kyokyu/） ==================== */
.kyokyu-area__row{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:40px;
}
.kyokyu-area__pref{
	margin:0;
	font-size:var(--fs-m);
	line-height:1.6;
	text-align:left;
}
.kyokyu-area__mascot{
	margin:60px 0 0 340px;
}
.kyokyu-area__map{
	flex:none;
	margin:0;
}
.kyokyu-area__map img{
	width:283px;
	height:auto;
}

/* 契約条件：4列比較テーブル */
.kyokyu-cond__row{
	display:flex;
	gap:20px;
	margin:0 0 40px;
}
.kyokyu-cond__item{
	display:flex;
	flex-direction:column;
	flex:1;
	min-width:0;
	border-radius:8px;
	overflow:hidden;
}
.kyokyu-cond__label{
	margin:0;
	padding:12px 10px;
	background:var(--color-primary);
	color:#fff;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.4;
	text-align:center;
}
/* 4列の高さを揃えたうえで、テキストは上下中央揃えにする。
   .kyokyu-cond__item側をflex-directionカラムにし、__valueをflex:1で残り高さいっぱいに伸ばしたうえで
   自身もflexコンテナ化してalign-items:centerで縦中央揃えする（pタグ内のテキスト・改行もブロック扱いされ中央揃えされる） */
.kyokyu-cond__value{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:1;
	margin:0;
	padding:20px 10px;
	background:var(--color-bg-primary);
	font-size:var(--fs-label);
	line-height:1.4;
	text-align:center;
}
/* 「適用範囲」列のみ文字数が多く既定フォントサイズでは2行のはずが折り返して3行になるため、一段階小さくする */
.kyokyu-cond__value--small{
	font-size:var(--fs-m);
}
.kyokyu-cond__notes{
	margin:0;
	font-size:var(--fs-base-s);
	line-height:2;
	text-align:left;
}

/* ==================== ポイント特典（/benefit/dpoint/） ==================== */

/* ヒーロー：トップページの.promo--point（#point）を流用。上に本ページ専用のリード文のみ追加 */
.point-hero-lead{
	margin:0 0 10px;
	color:#0071b9;
	font-size:var(--fs-title);
	font-weight:500;
	line-height:1.5;
	text-align:center;
	position: relative;
	display: inline-block;
	padding: 0 50px;
}
.point-hero-lead::after,
.point-hero-lead::before{
	content: '';
	position: absolute;
	width: 40px;
	height: 80px;
	bottom: 0;
}
.point-hero-lead::before{
	background: url(../images/point_title_left.png) center center no-repeat;
	background-size: 40px auto;
	left: 0;
}
.point-hero-lead::after{
	background: url(../images/point_title_right.png) center center no-repeat;
	background-size: 40px auto;
	right: 0;
}
/* 数値行：参考画像（切り抜き02）に合わせ、共通パーツ.promo__catch--pointより文字サイズを本ページのみ調整 */
.point-hero .promo__catch--point{
	align-items:center;
}
.point-hero .promo__catch--point .promo__catch-text{
	font-size:var(--fs-large);
}
.point-hero .promo__catch-num--sm{
	font-size:120px;
	margin-top: -0.5em;
}
.point-hero .promo__catch-num--sm i{
	font-size:100px;
}
.point-hero .promo__catch--point img{
	width: 100px;
}
.point-hero__catch{
	margin:0 0 40px;
	color:#0071b9;
	font-size:var(--fs-large);
	font-weight:700;
	letter-spacing:.05em;
	text-align:center;
}
.point-hero__action{
	margin:30px 0 0;
	text-align:center;
}
.point-hero__action-link{
	color:var(--color-primary);
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.6;
	text-decoration:underline;
	min-width: 500px;
}
.point-hero .promo__lead{
	font-size: var(--fs-label-m);
}

/* カード見出し・支払い方法リンク：参考画像（アップ部分）に合わせ、本ページ（.point-hero）のみ上書き。トップページの共用パーツには影響させない */

.point-hero .point-box-list{
	gap:36px;
	margin:0 0 24px;
}
.point-hero .point-box__label{
	font-size:var(--fs-xl);
	color:#1a1a1a;
}
.point-hero .point-box__note{
	margin:0 0 40px;
	padding:0;
	background:none;
	border-radius:0;
	font-size: var(--fs-label);
}
.point-hero .point-hero__action-link{
	position:relative;
	display:inline-block;
	max-width:500px;
	margin:0 auto;
	padding:16px 60px 16px 30px;
	border:2px solid var(--color-primary);
	border-radius:10px;
	text-decoration:none;
}
.point-hero .point-hero__action-link:after{
	content:"";
	position:absolute;
	top:50%;
	right:24px;
	width:0;
	height:0;
	border-style:solid;
	border-width:8px 0 8px 12px;
	border-color:transparent transparent transparent var(--color-primary);
	transform:translateY(-50%);
}

/* dポイント／WAON POINT、2ブロックを内包する薄水色の背景セクション */
.point-page-bg{
	background:var(--color-bg-primary);
	padding:80px 0;
}
/* 背景・角丸・paddingは共通パーツ.bg-radius-blockを併用。ここではブロック間の余白のみ */
.point-block{
	position:relative;
}
.point-block + .point-block{
	margin-top:60px;
}

.point-block__hero{
	margin:0 0 30px;
	text-align:center;
}
.point-block__hero img{
	width:460px;
	height:auto;
}

/* 「d POINT がたまる！」見出し＋浮遊マスコット */
.point-block__head{
	position:relative;
	margin:0 0 30px;
	text-align:center;
}
.point-block__logo{
	display:inline-flex;
	align-items:center;
	gap:16px;
	margin:0;
	padding:0 0 12px;
}
.point-block__logo img{
	width:182px;
	height:auto;
}
.point-block__logo-text{
	font-size:var(--fs-xl);
	font-weight:700;
	color:#1a1a1a;
}
.point-block__mascot{
	position:absolute;
	top:-50px;
	right:0px;
	width:202px;
	height:auto;
}

/* カード＋ロゴ＋ポイント還元率を内包する薄水色ボックス */
.point-block__box{
	width:940px;
	max-width:100%;
	margin:0 auto 30px;
	padding:40px;
	background:var(--color-bg-primary);
	border-radius:16px;
}
.point-block__card{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:40px;
	margin:0 0 30px;
}
.point-block__card img{
	width:192px;
	height:auto;
	vertical-align: middle;
}
.point-block__wordmark{
	font-size:44px;
	font-weight:700;
	color:#1a1a1a;
}
.point-block__wordmark i{
	margin-right:10px;
	font-style:normal;
	font-size:70px;
}
.point-block__amount{
	width:700px;
	max-width:100%;
	margin:0 auto;
	padding:10px 20px;
	border:2px solid #1a1a1a;
	border-radius:8px;
	background:#fff;
	font-size:40px;
	font-weight:700;
	color:#1a1a1a;
	text-align:center;
	line-height: 1.2;
}
.point-block__amount span{
	color:var(--color-pink);
}
.point-block__intro{
	margin:0 0 60px;
	font-size:var(--fs-m);
	font-weight:700;
	text-align:center;
}

/* WAON POINT用ヒーロー（ロゴ画像なし・テキストのみの見出し／ワードマークがカード上に来るボックス） */
.point-block__head-text{
	margin:0;
	font-size:var(--fs-xl);
	font-weight:700;
	color:#1a1a1a;
}
.point-block__mascot--waon{
	top:-47px;
	right:30px;
	width:205px;
}
.point-block__wordmark-waon{
	margin:0 0 20px;
	font-size:var(--fs-large-m);
	font-weight:700;
	color:#1a1a1a;
	text-align:center;
}
.point-block__card-waon{
	margin:0 0 30px;
	text-align:center;
}
.point-block__card-waon img{
	width:490px;
	height:auto;
}

/* セクション見出し（進呈について・タイミング・お申込み方法で共通） */
.point-ttl{
	margin:0 0 20px;
	color:#0071b9;
	font-size:var(--fs-title);
	font-weight:700;
	text-align:center;
}

/* 進呈について：定義テーブル */
.point-table-wrap{
	margin:0 0 60px;
}
.point-table{
	width:100%;
	border-collapse:collapse;
}
.point-table th,
.point-table td{
	box-sizing:border-box;
	padding:24px 30px;
	border:1px solid var(--color-bg-blue);
	font-size:var(--fs-base);
	font-weight: 400;
	line-height:1.6;
	vertical-align:middle;
}
.point-table th{
	width:220px;
	background:var(--color-bg-primary);
	color:var(--color-text);
	text-align:center;
	font-size:var(--fs-m);
}
.point-table td{
	background:#fff;
	text-align:left;
}
.point-table__lead{
	font-weight:700;
	font-size:var(--fs-m);
}
.point-table__inline-logo{
	margin: 15px 0;
	width: 224px;
	display: block;
}
.point-table__note{
	display:block;
	margin:20px 0 0;
	font-size:var(--fs-text-s);
	line-height:1.5;
}
.point-table__note-img{
	margin:8px 0;
}

/* ポイント進呈のタイミング：図解画像 */
.point-timing{
	margin:0 0 60px;
	text-align:center;
}
.point-timing img{
	width: 90%;
	margin: 0 auto;
}

/* お申込み方法：2カラム×STEP手順 */
.point-apply{

	margin:0 0 60px;
}
.point-apply__col{

	background:var(--color-bg-primary);
	padding:30px 80px 30px;
	margin-bottom: 20px;
}
.point-apply__col-ttl{
	margin:0 0 20px;
	padding:0 0 10px;
	border-bottom:2px solid #0071b9;
	color:#0071b9;
	font-size:var(--fs-label);
	font-weight:700;
	text-align:left;
	line-height: 1.4;
}
.point-apply__steps{
	margin:0;
	padding:0;
	list-style:none;
}
.point-apply__step{
	display:flex;
	align-items:start;
	gap:20px;
	padding:0;
	background:none;
	border-radius:0;
}
.point-apply__step + .point-apply__step{
	margin-top:20px;
}
.point-apply__step-badge{
	display:flex;
	flex:none;
	align-items:center;
	justify-content:center;
	width:76px;
	height:22px;
	background:var(--color-primary);
	border-radius:16px;
	color:#fff;
	font-size:var(--fs-text-s);
	font-weight:700;
	line-height: 1.2;
	margin-top: 0.3em;
}
.point-apply__step-desc{
	margin:0;
	font-size:var(--fs-m);
	line-height:1.6;
}

/* カードをお持ちでない場合／メリット：アコーディオン（/howto/join/ 「検針票のみかた」と同じ構造・色違い） */
.point-accordion{
	margin-top:40px;
}
.point-accordion__toggle{
	position:relative;
	display:block;
	width:90%;
	margin:0 auto;
	padding:20px 70px 20px 70px;
	background:#ef5454;
	color:#fff;
	font-family:inherit;
	border:none;
	border-radius:8px;
	cursor:pointer;
	line-height:1.2;
}
.point-accordion__toggle-ttl{
	display:block;
	font-size:26px;
	font-weight:700;
	text-align:center;
}
.point-accordion__toggle-ico{
	position:absolute;
	top:50%;
	right:30px;
	flex:none;
	width:35px;
	height:35px;
	background:#fff;
	border-radius:50%;
	transform:translateY(-50%);
	transition:transform .25s ease;
}
.point-accordion__toggle-ico:before,
.point-accordion__toggle-ico:after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	background:#ef5454;
	transform:translate(-50%,-50%);
}
.point-accordion__toggle-ico:before{
	width:16px;
	height:3px;
}
.point-accordion__toggle-ico:after{
	width:3px;
	height:16px;
}
.point-accordion.is-open .point-accordion__toggle-ico{
	transform:translateY(-50%) rotate(45deg);
}
.point-accordion__body{
	display:none;
}
.point-accordion__inner{
	padding:20px 0 40px;
	width:90%;
	margin:0 auto;
}
.point-accordion__inner.point-accordion__inner-wide{
	width:100%;
	padding-top: 40px;
}

/* カードをお持ちでない場合 */
.point-nocard__lead{
	margin:0 0 30px;
	font-size:var(--fs-m);
}
.point-nocard__cols{

	margin:0 0 20px;
}
.point-nocard__col{
	display:flex;
	flex:1;
	min-width:0;
	align-items:center;
	gap:12px;
	padding:20px 24px;
	background:#fdf8e5;
	border-radius:12px;
	text-align:left;
	margin-bottom: 15px;
}
.point-nocard__col-head{
	display:flex;
	align-items:center;
	gap:16px;
	margin:0;
	width: 48%;
}

.point-nocard__col-ico{
	width: 60px;
}
.point-nocard__col-ttl{
	font-size:22px;
	font-weight:700;
	white-space:nowrap;
}
.point-nocard__col-desc{
	margin:0;
	font-size:var(--fs-base-s);
	font-weight:500;
	line-height:1.6;
}
.point-nocard__col-desc a{
	color:var(--color-text);
	text-decoration:underline;
}
.point-nocard__notes{
	margin:0;
	padding:0;
	list-style:none;
}
.point-nocard__notes li{
	position:relative;
	margin:0 0 12px;
	padding-left:1.2em;
	font-size:var(--fs-m);
	color:var(--color-text);
	line-height:1.6;
}
.point-nocard__notes li:before{
	content:"●";
	position:absolute;
	left:0;
	top:0.25em;
	color:#ef5454;
	font-size: 14px;
}
.point-nocard__link{
	margin:30px 0 0;
	
	text-align:center;
}

/* ○○って？／メリット：吹き出し見出し画像 */
.point-merit-bubble{
	margin:0 0 50px;
	text-align:center;
}
.point-merit-bubble img{
	max-width:100%;
	height:auto;
}

.point-merit-strip{
	margin:30px auto 0;
	text-align:center;
}
.point-merit-strip img{
	max-width:100%;
	height:auto;
	margin: 0 auto;
}
.point-merit-closing{
	margin:40px 0 0;
	text-align:center;
}
.point-merit-closing img{
	max-width:100%;
	height:auto;
}

/* WAON POINTのメリット：たまる／つかえる／わけあえる 3カラム */
.point-merit-3col{
	display:flex;
	justify-content:center;
	align-items:stretch;
	gap:20px;
	margin:0 0 40px;
	padding:12px;
	background:var(--color-bg-pink);
	border-radius:20px;
}
.point-merit-3col__item{
	flex:1;
	margin:0;
	padding:36px 20px;
	background:#fff;
	border-radius:16px;
	text-align:center;
}
.point-merit-3col__item img{
	display:block;
	margin:0 auto;
	max-width:100%;
	height:auto;
}
.point-merit-3col__notes{
	max-width:800px;
	margin:0 auto 50px;
	padding:0;
	list-style:none;
}
.point-merit-3col__notes li{
	position:relative;
	margin:0 0 12px;
	padding-left:1.2em;
	font-size:var(--fs-m);
	font-weight:500;
	color:var(--color-text);
	line-height:1.6;
}
.point-merit-3col__notes li:before{
	content:"●";
	position:absolute;
	left:0;
	top:0;
	color:#ef5454;
}
.point-merit-3col__notes a{
	color:var(--color-text);
	text-decoration:underline;
}

/* WAON POINT：ポイントの使い方 詳細カード（お支払い／アイテム交換）（本人指定・デザイン反映） */
.point-detail-card{
	padding:40px;
	background:#fdf8e5;
	border-radius:16px;
	text-align:left;
}
.point-detail-card + .point-detail-card{
	margin-top:30px;
}
.point-detail-card__ttl{
	margin:0 0 20px;
	padding:0 0 10px;
	border-bottom:2px solid #ef5454;
	color:#ef5454;
	font-size:var(--fs-l);
	font-weight:700;
	text-align: center;
}
.point-detail-card__desc{
	margin:0 0 20px;
	font-size:var(--fs-m);
	font-weight:700;
	line-height:1.6;
}
.point-detail-card__note{
	margin:0;
	font-size:var(--fs-text-s);
	font-weight:500;
	line-height:1.8;
}
.point-detail-card__link{
	margin:30px 0 0;
}
.point-detail-card__link .point-btn-outline{
	min-width:400px;
}
.point-detail-card__links{
	margin:0;
	padding:0;
	list-style:none;
}
.point-detail-card__links li{
	position:relative;
	margin:0 0 8px;
	padding-left:1.2em;
}
.point-detail-card__links li:before{
	content:"●";
	position:absolute;
	left:0;
	top:0;
	color:#ef5454;
}
.point-detail-card__links a{
	color:var(--color-text);
	font-size:var(--fs-base);
	font-weight:500;
	text-decoration:none;
}
.point-detail-card__links-ul{
	text-decoration:underline;
}

/* 進呈について：表内のブランドロゴ画像 */
.point-table__inline-logo{
	margin:12px 0 0;
	max-width:100%;
	height:auto;
}
.point-table__inline-logo--waon{
	width:390px;
}

/* リンク文言末尾の外部リンクアイコン（黒・ピンク） */
.icon-blank{
	margin-left:6px;
	vertical-align:-3px;
}

/* お申込み方法：ログインリンク（本人指定・デザイン反映） */
.point-apply__step-link{
	color:#333;
	text-decoration:underline;
}

/* カードをお持ちでない場合：各カラムのアイコン */
.point-nocard__col-ico{
	display:flex;
	align-items:center;
	justify-content:center;
}
.point-nocard__col-ico img{
	display:block;
}

/* CTAリンクの角丸アウトラインボタン */
.point-btn-outline{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:500px;
	padding:18px 30px;
	border:2px solid #ef5454;
	border-radius:8px;
	color:#ef5454;
	font-size:var(--fs-base);
	font-weight:700;
	text-decoration:none;
	line-height: 1.2;
}

/* dポイントって？：たまる／つかう カードグリッド＋マスコット装飾（本人指定・デザイン反映） */
.point-merit-group + .point-merit-group{
	margin-top:50px;
}
.point-merit-group__head{
	position:relative;
	margin:0 0 -20px;
	text-align:center;
}
.point-merit-group__label{
	height:60px;
	width:auto;
	margin: 0 -15px 0 0;
}
.point-merit-group__mascot{
	position:absolute;
	top:50%;
	transform:translateY(-60%);
	height:auto;
}
.point-merit-group__mascot--star{
	right:9%;
	width:80px;
}
.point-merit-group__mascot--chicks{
	left:9%;
	top:auto;
	bottom:-10px;
	width:110px;
	transform:none;
}
.point-merit-group__box{
	padding:40px;
	background:#fdf8e5;
	border-radius:16px;
}
.point-merit-group__box--cream{
	background:#fdf8e5;
}
.point-merit-cards{
	display:flex;
	flex-wrap:wrap;
	align-items: stretch;
	gap:20px;
	margin:0;
	padding:0;
	list-style:none;
}
.point-merit-card{
	flex:1;
	min-width:190px;
	padding:20px 10px;
	background:#fff;
	border-radius:8px;
	text-align:center;
	line-height:1.4;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.point-merit-cards--6 .point-merit-card{
	flex:0 0 calc((100% - 40px) / 3);
}
.point-merit-card__main{
	display:block;
	color:#ef5454;
	font-size: var(--fs-label);
	font-weight:700;
}
.point-merit-card__sub{
	display:block;
	color:var(--color-text);
	font-size:var(--fs-m);
	font-weight:700;
}
.point-merit-notes{
	margin:20px 0 0;
	color:var(--color-text);
	font-size:var(--fs-note);
	font-weight:500;
	line-height:1.8;
	text-align:left;
}

/* ==================== イデックスでんきが選ばれる理由（/about/） ==================== */

/* ---- イデックスでんきとは ---- */
.about-idex{
	background:var(--color-bg-primary);
	padding:80px 0;
}
.about-idex__box{
	padding:100px 80px 80px;
	text-align:center;
}
.about-idex__head{
	text-align:center;
	margin:0 0 30px;
}
.about-idex__logo{
	display:inline-block;
	width:620px;
	max-width:100%;
	height:auto;
}
.about-idex__text{
	margin:0;
	color:#000;
	font-size:var(--fs-m);
	font-weight:400;
	line-height:2;
	text-align:left;
}

/* ---- 3つの理由 ---- */
.about-reason{
	background:var(--color-bg-blue);
	padding:80px 0;
}
.about-reason__ttl{
	margin:0 0 50px;
	text-align:center;
	font-size:36px;
	font-weight:700;
	color:#005ca8;
	line-height:1.4;
}
.about-reason__ttl-l{
	display:inline-block;
	font-size:var(--fs-large-l);
}
.about-reason-list{
	display:flex;
	justify-content:space-between;
	list-style:none;
	margin:0 0 30px;
	padding:0;
}
.about-reason-card{
	width:31.5%;
	background:#fff;
	border-radius:10px;
	box-shadow:0 2px 12px rgba(0,0,0,.08);
	padding:40px 20px;
	box-sizing:border-box;
	text-align:center;
}
.about-reason-card__img{
	display:block;
	position:relative;
	height:140px;
	margin:0 0 20px;
}
.about-reason-card__img img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}
.about-reason-card__text{
	margin:0;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.5;
}

/* ---- 電力会社の切り替えに関する安心情報（.safety-card-listはTOPページと共通パーツを流用） ---- */
.about-safety{
	padding:90px 0;
}
.about-safety__ttl{
	margin:0 0 60px;
	text-align:center;
	font-size:34px;
	font-weight:700;
	color:#005ca8;
	line-height:1.4;
}

/* ---- 電源構成／CO2排出係数（見出し・リード文は共通） ---- */
.about-sec-ttl{
	margin:0 0 30px;
	text-align:center;
	font-size:var(--fs-title);
	font-weight:700;
	color:#0071b9;
	line-height:1.5;
}
.about-sec-lead{
	margin:0 0 50px;
	text-align:center;
	font-size:var(--fs-base);
	font-weight:400;
	line-height:1.8;
}

/* ---- 電源構成 ---- */
.about-elecmix{
	background:var(--color-bg-primary);
	padding:90px 0;
}
.about-elecmix-list{
	display:flex;
	justify-content:space-between;
	gap:20px;
	margin:0 0 50px;
}
.about-elecmix-card{
	width:calc(50% - 10px);
	background:#fff;
	border-radius:16px;
	box-shadow:0 2px 12px rgba(0,0,0,.08);
	padding:40px 30px;
	box-sizing:border-box;
	text-align:center;
}
.about-elecmix-card__ttl{
	margin:0 0 20px;
	font-size:var(--fs-label);
	font-weight:700;
	line-height:1.4;
}
.about-elecmix-card__badge{
	margin:0 0 30px;
	padding:16px;
	background:var(--color-primary);
	color:#fff;
	font-size:var(--fs-m);
	font-weight:700;
	line-height:1.4;
	border-radius:8px;
}
.about-elecmix-card__img{
	margin:0;
}
.about-elecmix-card__img img{
	display:block;
	max-width:100%;
	height:auto;
	margin:0 auto;
}
.about-elecmix-note{
	margin:0;
	text-align:left;
}
.about-elecmix-note p{
	margin:0 0 8px;
	font-size:var(--fs-text-s);
	font-weight:400;
	line-height:1.8;
}
.about-elecmix-note__gap{
	margin-top:20px !important;
}

/* ---- CO2排出係数 ---- */
.about-co2{
	background:#fff;
	padding:90px 0;
}
.about-co2-table__ttl{
	margin:0;
}
.about-co2-table__note{
	margin:24px 0 0;
}
.about-co2-table__note p{
	margin:0 0 8px;
	font-size:var(--fs-text-s);
	font-weight:400;
	line-height:1.6;
	text-align:left;
}