/* FV　リボンラベル */
.hero-flag {
  position: relative;  display: block;
  height: 50px;  line-height: 50px;
  width: fit-content;
  margin: 0 0 10px 28px;  padding: 0 6px;
  background: #1f9d72;  color: #fff;
  font-size: 20px;  font-weight: 650;
  text-align: center;  white-space: nowrap; /* ← これ超重要 */}

.hero-flag::before,
.hero-flag::after {
  content: "";  position: absolute;  top: 0;  display: block;  height: 0;  border-top: 28px solid #1f9d72;  border-bottom: 22px solid #1f9d72;}

.hero-flag::before {
  left: -28px;  border-left: 14px solid transparent;  border-right: 14px solid #1f9d72;}

.hero-flag::after {
  right: -28px;  border-left: 14px solid #1f9d72;  border-right: 14px solid transparent;}

.hero-flag  em{  font-style:normal;  color:#fde75a;}




.hero-emblem-l,.hero-emblem-r{height:40px;width:auto;vertical-align:middle;}/*エンブレム */
.hero-emblem-l{margin-right:12px;}
.hero-emblem-r{margin-left:12px;}




/* FV　フォント設定 */
.hero-btn:hover{transform:translateY(-2px);filter:brightness(1.08);}
.hero-note{font-size:12px;color:var(--sub);margin-bottom:20px;margin-left: 165px;}

.hero-h1 .l1{/* 2行目：黒文字＋黄色帯 */
    margin-top:20px;
  display:inline-block;  position:relative;
  font-size:clamp(42px,3.2vw,34px);
  font-weight:900;  color:#000000;  line-height:1.25;  padding-bottom:4px;  z-index:1;}

.hero-h1 .l2{
  display:block;  font-size:clamp(70px,1.5vw,18px);  font-weight:900;  color:#FE771B;   margin-top:-20px; margin-bottom:8px;  letter-spacing:.08em;}

.hero-h1 .l3{  display:block;  font-size:clamp(70px,6vw,64px);  font-weight:900;  line-height:1.1;  margin-top:-60px;margin-bottom :20px;
  color:#192027;
  text-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.hero-h1 .l3 em{/* 4だけ少し大きく */
  font-style:normal;
  font-weight:900;  font-size:1.8em;  line-height:1;vertical-align: baseline;position: relative;
  top: 10px;
  color:#FE771B;}

/* .hero-sub{font-size:13px;color:var(--sub);line-height:1.8;margin-bottom:20px;max-width:540px;}*/
/* .hero-sub strong{color:#007f91;}*/


/* FV　相談ボタン */
.hero-btn{   position: relative;  overflow: hidden;  width: fit-content;　display:inline-block;  padding:20px 45px;  border-radius:999px;
  color:#fff;  font-size:33px;  font-weight:750;  text-align:center; margin-left:auto;  margin-right:auto;
  background: linear-gradient(    to bottom,    #007f91 0%,    #007f91 50%,    #007f91 100%  );
  box-shadow: /* 立体感 */
    inset 0 6px 12px rgba(255,255,255,0.4), /* 上の光 */
    inset 0 -6px 12px rgba(0,0,0,0.25),     /* 下の影 */
    0 4px 10px rgba(0,0,0,0.25);            /* 外側影 */
  transition: all .2s;}

.hero-btn .hero-btn-free{  color:#FBEC6F;}
.hero-btn:hover{  transform: translateY(-2px);  filter: brightness(1.05);}
.hero-btn:active{  transform: translateY(1px);  box-shadow:    inset 0 3px 6px rgba(0,0,0,0.3);}

.hero-btn::before {  content: "";  position: absolute;
  top: 5px;  left: 12%;  width: 76%;  height: 28%;  border-radius: 999px;
  background: linear-gradient(    to bottom,
    rgba(255,255,255,.55),
    rgba(255,255,255,.12),
    transparent  );  pointer-events: none;}

    .hero-sub strong{  color:#1f9d72;   font-weight:700;
}


.hero-cos-row{  position:relative;  min-height:90px;  margin-bottom:16px;margin-top: 10px;}


/* ══ HERO AREA BADGE（対象エリア） ══ */
.hero-area-badge{
  position:absolute;
  left:0;  top:50%;  transform:translateY(-50%);
  width:225px;  height:auto;  border-radius:16px;  overflow:visible;
  background:linear-gradient(180deg,#ffffff 0%,#f5f4f3 100%);
  border:1px solid #1f9d72;  outline:2px dotted rgba(0, 160, 27, 0.836);
  outline-offset:3px;
  display:flex;  flex-direction:row;  align-items:center;  gap:8px;
  box-shadow:0 6px 18px rgba(255,153,0,.14), 0 8px 20px rgba(0,0,0,0.25); /* 末尾の0.25で下影の濃さ調整 */  padding:14px 10px;  box-sizing:border-box;}
.hero-area-badge::before{  content:'';  position:absolute;  bottom:-9px;  right:24px;  width:16px;  height:16px;  background:#f5f4f3;  border-right:1px solid #1f9d72;  border-bottom:1px solid #1f9d72;  transform:rotate(45deg);}


.area-pin{/* ピン */
  width:28px;  height:auto;  display:block;  flex-shrink:0;}
.area-badge-content{  display:flex;  flex-direction:column;  align-items:flex-start;  gap:4px;}
.area-name-row{  display:flex;  align-items:baseline;  gap:4px;}
.area-label{/* ラベル */
  font-size:12px;  font-weight:700;  color:#333;  margin-bottom:0;}
.area-main{/* メイン */
  font-size:16px;  font-weight:800;  line-height:1.4;  color:#020f24;  margin-bottom:0;}
.area-note{/* 注釈 */
  display:inline-block;  background:#1f9d72;  color:#fff;  font-size:11px;  font-weight:800;  line-height:1.4;  padding:5px 8px;  border-radius:999px;}


/* ══ COMPARE TABLE ══ */
.compare{background:var(--bg);}
.tbl-wrap{overflow-x:auto;border-radius:14px;box-shadow:var(--s3);}
.ctbl{width:100%;border-collapse:collapse;background:var(--wh);min-width:640px;table-layout:fixed;}
.ctbl thead .hrow th{border-bottom:2px solid var(--line);vertical-align:bottom;padding:0;}
.ctbl thead .hrow th:first-child{
  background:#FAFAF9;padding:14px 12px;
  text-align:left;font-size:12px;color:var(--sub);font-weight:500;width:120px;
}
.col-h{text-align:center;padding:0 2px;}
.col-h-in{display:flex;flex-direction:column;align-items:center;}
.col-thumb{width:100%;height:64px;position:relative;border-radius:4px 4px 0 0;overflow:hidden;}
.ct-a,
.ct-b,
.ct-c,
.ct-d {
  background: #2FA65A;
}
.col-lbl{position:absolute;top:50%;left:7px;right:7px;transform:translateY(-50%);font-size:18px;font-weight:900;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);line-height:1.2;text-align:center;}
.col-nm{padding:9px 4px;font-size:13px;font-weight:900;border-bottom:3px solid transparent;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cnm-a{border-color:#2FA65A;color:#2FA65A;}
.cnm-b{border-color:#CDA4AD;color:#CDA4AD;}
.cnm-c{border-color:#D6B98A;color:#D6B98A;}
.cnm-d{border-color:#8DA1B8;color:#8DA1B8;}
.ctbl tbody td{padding:14px 8px 12px;text-align:center;border-bottom:1px solid var(--line);font-size:16px;vertical-align:top;}
.ctbl tbody td:first-child{text-align:left;padding-left:14px;font-size:16px;font-weight:700;color:var(--sub);background:#FAFAF9;}
.ctbl tbody tr:hover td{background:#FFFBF5;}
.ctbl tbody tr:hover td:first-child{background:#F5F5F4;}
.ctbl tbody td.hl{font-size:14px;}
.ctbl tbody td:has(.ic-s){background:#FFFBF0;}
.ico{display:flex;align-items:center;justify-content:center;margin:0 auto;margin-bottom:6px;width:36px;height:36px;border-radius:50%;font-weight:900;font-size:50px;}
.ic-s{color:var(--am-d);}
.ic-g{color:#d7ba69;}
.ic-y{color:#c8c9c9;}
.ico-sub{display:block;font-size:14px;color:var(--sub);margin-top:14px;margin-bottom:6px;line-height:1.3;}
.stars{color:var(--am);font-size:12px;}
.ctbl tfoot td{padding:12px 6px;background:#FAFAF9;}
.tbl-btn{display:block;text-align:center;padding:11px 4px;border-radius:7px;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg, #1a6e3c 0%, #2d9e5a 50%, #1a6e3c 100%);}
.tb-a,.tb-b,.tb-c,.tb-d{background:#F97316;color:#fff;}


/*CTAボタン*/
.sc-cta{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  gap:18px;
  width:100%;padding:18px 42px;
  background:linear-gradient(135deg,#27b866 0%,#16914b 55%,#11783d 100%);
  border:1px solid #1e9e56;
  border-radius:9999px;
  color:#fff;font-size:28px;font-weight:800;letter-spacing:.02em;
  box-shadow:inset 0 0 0 4px #fff,0 14px 28px rgba(19,126,67,.25),0 4px 8px rgba(0,0,0,.08);
  overflow:hidden;transition:all .25s ease;
}
.sc-cta::before,.sc-cta::after{
  content:"";position:absolute;width:140px;height:140px;opacity:.18;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.95) 1.5px,transparent 2px);
  background-size:16px 16px;
}
.sc-cta::before{top:-30px;right:-20px;}
.sc-cta::after{bottom:-30px;left:-20px;}
.sc-cta:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 4px #fff,0 18px 34px rgba(19,126,67,.32);}
.sc-cta:active{transform:translateY(0);}
.fv-cta-icon{display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#16914b;font-weight:bold;flex-shrink:0;}
.sc-cta .fv-cta-icon{width:58px;height:58px;font-size:24px;}
.hd-cta .fv-cta-icon{width:26px;height:26px;font-size:12px;}
.yellow{color:#FFD84D;}
.fv-cta-arrow{line-height:1;font-weight:300;transition:transform .25s ease;}
.sc-cta .fv-cta-arrow{font-size:62px;margin-left:6px;}
.hd-cta .fv-cta-arrow{font-size:18px;margin-left:2px;}
.sc-cta:hover .fv-cta-arrow,.hd-cta:hover .fv-cta-arrow{transform:translateX(6px);}
@media(max-width:768px){
  .sc-cta{padding:16px 24px;font-size:24px;gap:12px;}
  .sc-cta .fv-cta-icon{width:42px;height:42px;font-size:18px;}
  .sc-cta .fv-cta-arrow{font-size:42px;}
}


/* ══ SITUATION ══ */
.sit{background:#FCFBF7;}
.sit .h2{color:#111111;line-height:1.2;}
.sit .h2 em{font-style:normal;color:#2FA65A;}
.sit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.sit-card{
  background:#fff;border-radius:20px;padding:24px 16px 28px;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s;
}
.sit-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.1);}
.sit-a::before,.sit-b::before,.sit-c::before,.sit-d::before{content:'';position:absolute;top:0;left:0;right:0;height:8px;}
.sit-a::before{background:#2FA65A;}
.sit-b::before{background:#D97A8C;}
.sit-c::before{background:#E8A126;}
.sit-d::before{background:#2E78B7;}
.sit-a::after,.sit-b::after,.sit-c::after,.sit-d::after{content:'';position:absolute;bottom:0;right:0;width:100px;height:100px;background-size:12px 12px;pointer-events:none;}
.sit-a::after{background-image:radial-gradient(circle,rgba(47,166,90,.15) 1.5px,transparent 2px);}
.sit-b::after{background-image:radial-gradient(circle,rgba(217,122,140,.15) 1.5px,transparent 2px);}
.sit-c::after{background-image:radial-gradient(circle,rgba(232,161,38,.15) 1.5px,transparent 2px);}
.sit-d::after{background-image:radial-gradient(circle,rgba(46,120,183,.15) 1.5px,transparent 2px);}
.sit-ic{font-size:52px;width:96px;height:96px;display:flex;align-items:center;justify-content:center;margin:6px auto 20px;flex-shrink:0;}
.sit-ic img{width:100%;height:100%;object-fit:contain;display:block;}
.sit-card h4{font-size:14px;font-weight:800;text-align:center;line-height:1.45;margin-bottom:24px;color:#111;}
.sit-rec{display:flex;align-items:center;justify-content:center;text-align:center;gap:8px;width:100%;height:34px;border-radius:10px;font-size:16px;font-weight:800;color:#fff;margin-bottom:0;}
.sit-a .sit-rec{background:linear-gradient(135deg,#2FA65A,#238E4A);}
.sit-b .sit-rec{background:linear-gradient(135deg,#D97A8C,#C9657A);}
.sit-c .sit-rec{background:linear-gradient(135deg,#E8A126,#D48C08);}
.sit-d .sit-rec{background:linear-gradient(135deg,#2E78B7,#1F5E96);}
.sit-card p{font-size:14px;color:var(--sub);line-height:1.7;border-top:1px solid rgba(0,0,0,.08);padding-top:24px;margin-top:24px;margin-bottom:0;}

/* ══ INTERACTIVE CHARTS ══ */
.chart-wrap{font-family:inherit;margin:0;}
.chart-title{font-size:12px;font-weight:900;color:var(--am-dd);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid #F2D5A0;display:flex;align-items:center;gap:8px;}
.chart-title::before{content:'';width:4px;height:16px;background:var(--am-d);border-radius:2px;display:inline-block;}
.elec-chart{display:flex;flex-direction:column;gap:8px;}
.elec-row{display:flex;align-items:center;gap:10px;}
.elec-label{font-size:11px;font-weight:700;color:var(--sub);width:48px;flex-shrink:0;text-align:right;}
.elec-bar-wrap{flex:1;border-radius:4px;height:32px;overflow:hidden;position:relative;}
.elec-bar{height:100%;border-radius:4px;display:flex;align-items:center;padding-right:10px;justify-content:flex-end;font-size:12px;font-weight:900;color:#fff;width:0%;transition:width 1s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 3px 8px rgba(255,255,255,.25),inset 0 -3px 8px rgba(0,0,0,.2);}
.elec-bar.before{background:#C0BDB9;}
.elec-bar.after{background:#21A652;}
.elec-saving{margin-top:10px;background:#ff6700;color:#fff;border-radius:8px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;}
.elec-saving-label{font-size:12px;font-weight:700;opacity:.9;}
.elec-saving-val{font-size:18px;font-weight:900;}
.case-body>div>p{font-size:16px;color:var(--sub);line-height:1.7;margin-top:10px;}
.cost-bars{display:flex;gap:12px;align-items:flex-end;min-width:0;}
.cost-bar-col{flex:1;min-width:0;}
.cost-bar-box{height:140px;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;}}
.cost-bar-arrow{display:flex;align-items:center;padding-bottom:16px;font-size:32px;color:#F2A100;}
.cost-label-row{display:flex;gap:12px;margin-top:10px;}
.cost-label{flex:1;text-align:center;font-size:12px;color:var(--sub);}
.cost-label-spacer{width:28px;}
.cost-bar-seg{width:100%;border-radius:6px 6px 0 0;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:11px;font-weight:900;color:#fff;height:0%;transition:height 1s cubic-bezier(.4,0,.2,1);overflow:hidden;min-height:0;}
.cost-bar-seg:not(:first-child){border-radius:0;}
.cost-bar-seg:last-child{border-radius:0 0 6px 6px;}
.cost-bar-seg:only-child{border-radius:6px 6px 0 0;}
.seg-teika{background:#C0BDB9;}
.seg-teika>span{padding:6px 4px;font-size:12px;line-height:1.4;text-align:center;}
.seg-teika>span>span{font-weight:400;opacity:.85;}
.seg-hojo{background:#FFE8C3;color:#7a4400;}
.seg-hojo>span{padding:4px 4px;font-size:12px;line-height:1.3;text-align:center;}
.seg-jisshitsu{background:#21A652;}
.seg-jisshitsu>span{padding:6px 4px;font-size:12px;line-height:1.4;text-align:center;font-weight:900;}
.seg-jisshitsu>span>span{font-weight:400;opacity:.9;font-size:9px;}

/*フッター*/
.page_footer { padding:24px; text-align:center; }
.page_footer_nav { display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin-bottom:12px; }
.page_footer_nav a { font-size:13px;  padding:4px 16px; border-right:1px solid #3a6a4e; }
.page_footer_nav a:last-child { border-right:none; }
.page_footer_nav a:hover { color:#ff6700; text-decoration:none; }
.page_footer p { font-size:11px; color:#5a8a6a; }