@charset "UTF-8";
/*
Template: arkhe
Theme Name: Arkhe Child
Theme URI: https://arkhe-theme.com/ja/
Description: Arkhe用子テーマ
Version: 1.1.0
Text Domain: arkhe
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   エネアンサー（電力会社 乗り換え実態サイト）の見た目
   デザイン見本「電力会社の乗り換え実態と節約額」に合わせる
   - 白背景・濃紺の文字・明るい青。強調は黄色の帯
   - 金額は「減った＝緑」「増えた＝オレンジ」の地色つきで、文字でも「減／増」を示す
   - 会社ごとの識別色は使わない（矢印の色は順位で青の濃さだけ変える）
   - データ・集計・フォームはプラグイン denki-switch。ここでは配色・文字・余白・レイアウトだけを扱う
   ========================================================================== */

:root {
	/* Arkhe の配色変数 */
	--ark-color--main: #0e1a3a;
	--ark-color--text: #0e1a3a;
	--ark-color--link: #0b5bd3;
	--ark-color--bg: #ffffff;
	--ark-color--gray: #f3f6fb;
	--ark-color--header_bg: #ffffff;
	--ark-color--header_txt: #0e1a3a;
	--ark-color--footer_bg: #ffffff;
	--ark-color--footer_txt: #0e1a3a;
	--ark-width--article: 880px;
	--ark-width--article--slim: 760px;

	/* プラグイン（denki-switch/assets/css/dsw.css）の変数 */
	--dsw-ink: #0e1a3a;
	--dsw-ink-sub: #56627c;
	--dsw-line: #dde4ee;
	--dsw-tint: #eef5ff;
	--dsw-blue: #1167e8;
	--dsw-blue-ink: #0b56c7;
	--dsw-yellow: #ffe44d;
	--dsw-down: #0b8a62;
	--dsw-down-fill: #17b086;
	--dsw-up: #d9550c;
	--dsw-up-fill: #f4943d;
	--dsw-arrow: #1167e8;
	--dsw-radius: 6px;

	--denki-down-bg: #e5f6ef;
	--denki-up-bg: #fff0e5;
	--denki-cell: #eaf0f8;
}

body {
	background: #fff;
	color: var(--dsw-ink);
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic", Meiryo, sans-serif;
	font-feature-settings: "palt";
	-webkit-text-size-adjust: 100%;
}
.denki-site .l-main a:not([class]) { color: var(--dsw-blue-ink); }

/* ------------------------------
   ヘッダー：ロゴ左、右に「体験を投稿」とメニュー
------------------------------ */
.l-header { background: #fff; border-bottom: 1px solid var(--dsw-line); box-shadow: none; }
.l-header .c-headLogo { font-size: clamp(1.35rem, 5.6vw, 1.75rem); font-weight: 900; letter-spacing: .02em; color: var(--dsw-ink); white-space: nowrap; }
.l-header .l-header__center { text-align: left; min-width: 0; }
.l-header .l-header__logo { justify-content: flex-start; }
.l-header .c-headLogo { display: block; overflow: hidden; text-overflow: ellipsis; }
.denki-headBtn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1em; background: var(--dsw-blue); color: #fff !important; font-weight: 800; font-size: .9rem; text-decoration: none; border-radius: var(--dsw-radius); white-space: nowrap; }
@media not all and (min-width: 1000px) {
	.l-header[data-btns] .l-header__body { grid-template-columns: minmax(0, 1fr) auto var(--ark-drawerW, 48px); grid-template-areas: "center right menu"; padding-left: 16px; }
	.l-header .l-header__left, .l-header .l-header__searchBtn { display: none; }
	.l-header .l-header__right { display: flex; align-items: center; }
	.l-header__drawerBtn { grid-area: menu; }
	.denki-headBtn { min-height: 36px; padding: 0 .85em; font-size: .82rem; }
}
@media (min-width: 1000px) {
	.denki-headBtn { margin-left: 1rem; }
}

/* パンくず */
.p-breadcrumb { font-size: 12px; }

/* ------------------------------
   本文の幅・見出し（サイトのページ共通）
------------------------------ */
.denki-site .l-content__body.l-container { padding-left: 16px; padding-right: 16px; }
.denki-site .l-main { max-width: 880px; margin-left: auto; margin-right: auto; }
.denki-site .c-pageTitle { font-size: clamp(1.4rem, 5.5vw, 2rem); font-weight: 900; line-height: 1.35; border-left: 8px solid var(--dsw-yellow); padding-left: .4em; }
.dsw-h2 { font-size: clamp(1.25rem, 5vw, 1.6rem); font-weight: 900; }
.dsw-tag { border-radius: 4px; font-size: .8rem; }
.dsw-band { background: var(--dsw-yellow); padding: 0 .15em; }

/* ------------------------------
   金額：減＝緑地、増＝オレンジ地（文字でも減／増を表示）
------------------------------ */
.dsw-amt--down:not(.dsw-amt--few), .dsw-amt--up:not(.dsw-amt--few), .dsw-amt--zero:not(.dsw-amt--few) { padding: .3em .7em; border-radius: var(--dsw-radius); }
.dsw-amt--down:not(.dsw-amt--few) { background: var(--denki-down-bg); }
.dsw-amt--up:not(.dsw-amt--few) { background: var(--denki-up-bg); }
.dsw-amt--zero:not(.dsw-amt--few) { background: var(--denki-cell); }
.dsw-amt__pre { font-size: .78rem; }
.dsw-amt__num { font-weight: 900; letter-spacing: -.01em; }
.dsw-amt__unit { font-weight: 900; }
.dsw-highlight .dsw-amt { background: transparent !important; padding: 0 !important; }

/* ------------------------------
   TOP（固定ページ「トップ」のブロックに付けたクラス）
------------------------------ */
/* h1 はサイト名（小さく）、キャッチコピーは p（大きく）。どちらのタグでも同じ見た目になるようにタグを限定しない */
.denki-site .dsw-top-kicker { margin: .6rem 0 .25rem; color: var(--dsw-blue); font-weight: 800; font-size: .92rem; line-height: 1.5; letter-spacing: 0; border: 0; padding: 0; background: none; }
.denki-site h1.dsw-top-kicker::before, .denki-site h1.dsw-top-kicker::after { display: none; }
.denki-site .p-front__content > .dsw-top-title:first-child { padding-top: 1.4rem; } /* Arkhe は本文の最初の要素の上マージンを0にするため padding で空ける */
.denki-site .dsw-top-title { margin: 0 0 .5rem; font-size: clamp(1.8rem, 8.6vw, 3.1rem); font-weight: 900; line-height: 1.22; letter-spacing: -.02em; border: 0; padding: 0; }
.denki-site .dsw-top-title mark { background: var(--dsw-yellow) !important; color: inherit !important; padding: 0 .12em; }
.denki-site .dsw-top-lead { margin: 0 0 1.6rem; font-size: clamp(1rem, 4.4vw, 1.35rem); font-weight: 800; }
.denki-site h2.dsw-top-heading { margin: 1.8rem 0 .6rem; font-size: clamp(1.15rem, 5vw, 1.55rem); font-weight: 900; border: 0; padding: 0; background: none; }
.denki-site h2.dsw-top-heading::before, .denki-site h2.dsw-top-heading::after { display: none; }

/* 会社の選択 */
.dsw-top-co { min-height: 64px; border: 1px solid #cfd8e6; font-size: clamp(1rem, 4.4vw, 1.2rem); font-weight: 900; border-radius: var(--dsw-radius); }
.dsw-top-co.is-current { box-shadow: none; }
.dsw-top-search input[type="search"] { padding-left: 2.4em; border-color: #cfd8e6; border-radius: var(--dsw-radius); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2356627c' stroke-width='2.4'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E") no-repeat .7em 50%; }
.dsw-top-search__btn { border-radius: var(--dsw-radius); }
.dsw-top-meta { font-size: .8rem; }
.dsw-top-meta a { color: var(--dsw-blue-ink); font-weight: 700; }

/* 会社選択のパネル（薄い青）と乗り換え先（白いカード） */
.dsw-top-pick__panel { border-radius: 12px; }
.dsw-top-pick__title { font-weight: 900; }
.is-home .dsw-top-co { border-color: #d5deea; }
.is-home .dsw-top-co__name { font-size: 1.1rem; }
.dsw-top-out { background: #fff; border: 1px solid var(--dsw-line); border-radius: 12px; }
.dsw-top-res__self { border-radius: 10px; }
.dsw-top-res__name { font-weight: 900; }
.dsw-top-rank__name, .dsw-top-rank__n b { font-weight: 900; }
.dsw-top-out__empty { color: var(--dsw-ink-sub); }
.dsw-top-chip { border-radius: 4px; }
.dsw-top-out__title, .dsw-top-in__title { font-weight: 900; }
.dsw-top-flow__src { border-radius: 8px; }
.dsw-top-flow__name { font-weight: 900; }
.dsw-top-row { border: 0; border-radius: 8px; box-shadow: 0 1px 0 rgba(14, 26, 58, .06); }
.dsw-top-row__name { color: var(--dsw-ink) !important; text-decoration: none; }
.dsw-top-row__name:hover { text-decoration: underline; }
.dsw-top-notes { font-size: .74rem; }
.dsw-top-btn { min-height: 56px; border-radius: 8px; font-size: 1.05rem; font-weight: 900; }

/* 乗り換え元（白いカード） */
.dsw-top-in { border: 1px solid var(--dsw-line); border-radius: 10px; }
.dsw-top-chip--in { background: #dff3ff; color: var(--dsw-blue-ink); }
.dsw-top-flow--in .dsw-top-flow__src { background: #f1f4f9; border: 0; color: var(--dsw-ink); }

/* PC：見本と同じセル表示（社名／人数／金額を並べる） */
@media (min-width: 720px) {
	.dsw-top-row { background: transparent; box-shadow: none; padding: 0; gap: 0 .5rem; }
	.dsw-top-row__name { align-self: stretch; display: flex; align-items: center; padding: .7rem 1rem; background: var(--denki-cell); border-radius: 6px 0 0 6px; font-size: 1.25rem; }
	.dsw-top-row { grid-template-columns: minmax(70px, 1fr) minmax(9em, 14em) 5.8em minmax(10em, auto); }
	.dsw-top-flow--in .dsw-top-row { grid-template-columns: minmax(9em, 14em) 5.8em minmax(60px, 1fr); }
	.dsw-top-row__n { align-self: stretch; display: block; margin-left: -.5rem; padding: .45rem .5rem; background: #fff; border-radius: 0 6px 6px 0; text-align: center; line-height: 1.2; }
	.dsw-top-row__n small { display: block; margin: .15rem 0 0; }
	.dsw-top-row__amt { align-self: stretch; display: flex; justify-content: flex-end; }
	.dsw-top-row__amt .dsw-amt { width: 100%; justify-content: flex-end; align-content: center; }
	.dsw-top-flow--in .dsw-top-row:nth-child(1) .dsw-top-row__name { background: #e2edff; }
	.dsw-top-flow--in .dsw-top-row:nth-child(2) .dsw-top-row__name { background: #e1f5ef; }
}

/* 最近の乗り換え体験 */
.dsw-top-rv__co { border-radius: 4px; }
.dsw-top-rv__amt b { font-weight: 900; }
.dsw-top-more a { color: var(--dsw-blue-ink); font-weight: 800; }

/* 調査の案内（黄色） */
.denki-site .dsw-top-banner { display: grid; gap: .5rem 1.2rem; align-items: center; margin: 2.2rem 0 1rem; padding: 1.2rem 1.3rem; background: var(--dsw-yellow); border-radius: 8px; }
.denki-site .dsw-top-banner > * { margin: 0 !important; }
.denki-site .dsw-top-banner .dsw-top-banner__title { font-size: clamp(1.4rem, 6.4vw, 2rem); font-weight: 900; line-height: 1.2; }
.denki-site .dsw-top-banner p { font-size: .88rem; font-weight: 700; }
.denki-site .dsw-top-banner .dsw-count { font-size: 1.7rem; font-weight: 900; }
/* 投稿の案内（薄い青） */
.denki-site .dsw-top-cta { display: grid; gap: .5rem 1.2rem; align-items: center; margin: 1rem 0; padding: 1.2rem 1.3rem; background: var(--dsw-tint); border-radius: 8px; }
.denki-site .dsw-top-cta > * { margin: 0 !important; }
.denki-site .dsw-top-cta h2 { font-size: clamp(1.2rem, 5.4vw, 1.65rem); font-weight: 900; border: 0; padding: 0; background: none; }
.denki-site .dsw-top-cta h2::before, .denki-site .dsw-top-cta h2::after { display: none; }
.denki-site .dsw-top-cta p { font-size: .9rem; }
.denki-site .dsw-top-banner .wp-block-buttons, .denki-site .dsw-top-cta .wp-block-buttons { display: block; }
.denki-site .dsw-top-banner .wp-block-button__link, .denki-site .dsw-top-cta .wp-block-button__link { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: .4em 1.4em; font-weight: 900; border-radius: 8px; text-decoration: none; }
.denki-site .dsw-top-banner .wp-block-button__link { background: #fff; color: var(--dsw-ink) !important; border: 0; }
.denki-site .dsw-top-cta .wp-block-button__link { background: var(--dsw-blue); color: #fff !important; }
.denki-site .dsw-top-disclaimer { margin: 2rem 0 .5rem; padding-top: .9rem; border-top: 1px solid var(--dsw-line); font-size: .78rem; color: var(--dsw-ink-sub); text-align: center; }
@media (min-width: 720px) {
	.denki-site .dsw-top-disclaimer { display: flex; align-items: center; gap: 1rem; padding-top: 0; border-top: 0; }
	.denki-site .dsw-top-disclaimer::before, .denki-site .dsw-top-disclaimer::after { content: ""; flex: 1; height: 1px; background: var(--dsw-line); }
}

@media (min-width: 720px) {
	.denki-site .dsw-top-banner { grid-template-columns: auto 1fr auto; }
	.denki-site .dsw-top-banner .dsw-top-banner__title { padding-right: 1.2rem; border-right: 2px solid var(--dsw-ink); }
	.denki-site .dsw-top-cta { grid-template-columns: 1fr auto; }
	.denki-site .dsw-top-cta h2, .denki-site .dsw-top-cta p { grid-column: 1; }
	.denki-site .dsw-top-cta .wp-block-buttons { grid-column: 2; grid-row: 1 / span 2; }
}

/* ------------------------------
   電力会社ページ（同じ配色・カードの形にそろえる）
------------------------------ */
.dsw-hero__title { font-size: clamp(1.65rem, 7.4vw, 2.6rem); font-weight: 900; line-height: 1.28; letter-spacing: -.02em; }
.dsw-hero__name { display: inline-block; font-size: 1.2em; line-height: 1.1; }
.dsw-hero__title .dsw-band { display: inline; font-size: .82em; }
.dsw-hero__lead { font-size: .92rem; }
.dsw-toc { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
.dsw-toc a { flex-shrink: 0; border: 1px solid var(--dsw-line); border-radius: 999px; padding: .3em .9em; font-weight: 700; color: var(--dsw-ink); background: #fff; }
.dsw-toc a:hover { border-color: var(--dsw-blue); color: var(--dsw-blue-ink); }
.dsw-filter { background: var(--dsw-tint); border: 0; border-radius: 10px; }
.dsw-select select { border-color: #cfd8e6; border-radius: var(--dsw-radius); font-weight: 700; }
.dsw-seg span { border-color: #cfd8e6; }
.dsw-seg label:first-of-type span { border-radius: 6px 0 0 6px; }
.dsw-seg label:last-of-type span { border-radius: 0 6px 6px 0; }
.dsw-seg input:checked + span { background: var(--dsw-blue); border-color: var(--dsw-blue); }
.dsw-total { border-radius: 8px; }
.dsw-total__num { font-size: clamp(2rem, 10vw, 2.8rem); font-weight: 900; letter-spacing: -.02em; }
.dsw-flow { border-top: 0; padding-top: 0; }
.dsw-flowchart__self { background: var(--dsw-blue); border: 0; color: #fff; border-radius: 8px; }
.dsw-route { padding: .7rem .8rem; border: 0; border-radius: 8px; background: var(--dsw-tint); }
.dsw-route:nth-child(2) { --dsw-arrow: #3a86e8; }
.dsw-route:nth-child(3) { --dsw-arrow: #7db5f2; }
.dsw-route:nth-child(n+4) { --dsw-arrow: #b5bfd0; }
.dsw-route__name { font-size: 1.25rem; font-weight: 900; color: var(--dsw-ink) !important; text-decoration: none; }
.dsw-route__name:hover { text-decoration: underline; }
@media (max-width: 719px) {
	/* スマホ：社名を1行に取り、金額はその下に（社名を細く折り返さない） */
	.dsw-route { grid-template-columns: minmax(0, 1fr); grid-template-areas: "arrow" "co" "amount" "links"; }
	.dsw-flow--in .dsw-route { grid-template-areas: "co" "amount" "arrow" "links"; }
	.dsw-route__amount { text-align: left; }
	.dsw-route__amount .dsw-amt { justify-content: flex-start; }
	.dsw-route__amount .dsw-amt__n { text-align: left; }
}
.dsw-route__count { font-size: 1.15rem; }
.dsw-amt__num { font-size: clamp(1.45rem, 6.6vw, 1.85rem); }
.dsw-route__links a { font-weight: 700; }
.dsw-route__links a::after { content: " ›"; }
.dsw-dirbar { height: 32px; border: 0; border-radius: 6px; }
.dsw-highlight { border-radius: 8px; }
.dsw-highlight__co { border-radius: 6px; }
.dsw-details { border-radius: 8px; overflow: hidden; }
.dsw-review { border: 1px solid var(--dsw-line); border-radius: 8px; }
.dsw-plan { border-radius: 8px; overflow: hidden; }
.dsw-postbox { border-radius: 8px; }
.dsw-btn { border-radius: 8px; font-weight: 900; }

/* 一覧・調査ページ */
.dsw-cogrid__link { border-radius: 8px; }
.dsw-figure { border-radius: 8px; }
.dsw-bars__bar { border-radius: 0 4px 4px 0; }

/* 投稿フォーム */
.dsw-step { border-radius: 10px; }
.dsw-step__num { border-radius: 4px; background: var(--dsw-blue); }
.dsw-choice span { border-radius: var(--dsw-radius); }
.dsw-routeview { background: var(--dsw-tint); border: 0; border-radius: 8px; }
.dsw-form input[type="text"], .dsw-form input[type="email"], .dsw-form select, .dsw-form textarea { border-color: #cfd8e6; border-radius: var(--dsw-radius); }

/* ------------------------------
   固定CTA：本文と重ならないよう、ページトップボタンは CTA の上へ
------------------------------ */
body.dsw-has-cta .p-fixBtnWrap { bottom: calc(84px + env(safe-area-inset-bottom)); }
.dsw-cta { background: rgba(255, 255, 255, .97); border-top: 1px solid var(--dsw-line); }
.dsw-cta__btn { border-radius: 8px; font-size: 1rem; font-weight: 900; }
.dsw-cta__btn--sub { border-color: #cfd8e6; }
.dsw-cta__btn:not(.dsw-cta__btn--sub)::after { content: "›"; font-size: 1.3em; line-height: 1; margin-left: .2em; }

/* ------------------------------
   フッター：白地、左にサイト名、右にリンク
------------------------------ */
.l-footer { background: #fff; color: var(--dsw-ink); border-top: 1px solid var(--dsw-line); }
.l-footer a { color: var(--dsw-ink); }
.l-footer__foot .l-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; padding-top: 1.6rem; padding-bottom: 1.2rem; }
.denki-footBrand { font-size: 1.6rem; font-weight: 900; text-decoration: none; letter-spacing: .02em; }
.denki-footNav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 0; margin: 0; padding: 0; list-style: none; font-size: .85rem; line-height: 1.6; }
.denki-footNav { margin-left: -.8em; overflow: hidden; } /* 各行の先頭の区切り線をはみ出させて隠す */
.denki-footNav li { margin: 0 0 0 -1px; padding: 0 .8em; border: 0; border-left: 1px solid var(--dsw-line); }
.denki-footNav a { text-decoration: none; }
.denki-footNav a:hover { text-decoration: underline; }
.l-footer .c-copyright { flex-basis: 100%; margin: .4rem 0 0; font-size: .75rem; color: var(--dsw-ink-sub); }