@charset "utf-8";
/* 低圧LP（lp004）用の追加スタイル。共通部分は main.css（lp001 と同じ） */

/*fv*/
#fv #fv_txt h1{ margin: 30px auto 30px;}
#fv #fv_txt h1 .tag{ display: table; background: #f5dd6d; color: #192f75; font-size: 1rem; line-height: 1em; padding: 0.4em 0.75em; border-radius: 4px; margin-bottom: 0.6em;}
#fv #fv_txt ul.spec{ display: flex; margin-bottom: 8px;}
#fv #fv_txt ul.spec li{ flex: 1; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.5); border-radius: 8px; color: #fff; text-align: center; padding: 10px 5px; margin-right: 10px;}
#fv #fv_txt ul.spec li:last-child{ margin-right: 0;}
#fv #fv_txt ul.spec li span{ display: block; font-size: 0.7rem; margin-bottom: 4px;}
#fv #fv_txt ul.spec li strong{ display: block; font-size: 1.3rem; line-height: 1.2em; color: #f5dd6d;}
#fv #fv_txt p.spec_att{ color: #fff; font-size: 0.6rem; line-height: 1.5em; margin-bottom: 30px;}
#fv #fv_form textarea{ height: 5em;}
@media screen and (max-width:767px){
#fv #fv_txt h1{ margin: 5% auto 5%;}
#fv #fv_txt h1 .tag{ font-size: 1.1rem;}
#fv #fv_txt ul.spec li{ padding: 2.5vw 1vw; margin-right: 1.5vw; border-radius: 1.25vw;}
#fv #fv_txt ul.spec li span{ font-size: 0.85rem;}
#fv #fv_txt ul.spec li strong{ font-size: 1.35rem;}
#fv #fv_txt p.spec_att{ font-size: 0.8rem; margin-bottom: 5%;}
#fv #fv_form textarea{ height: 7em;}
}



/*sec08 低圧系統用蓄電池とは*/
#sec08{ background: #192f75; color: #fff; padding: 80px 0; position: relative; z-index: 3;}
#sec08 h2{ text-align: center; font-size: 2rem; margin-bottom: 30px;}
#sec08 p.txt{ text-align: center;}
#sec08 p.txt .bg_y{ color: #fff; background: linear-gradient(to bottom, rgba(214,19,73,0) 0%, rgba(214,19,73,0) 66%, rgba(214,19,73,1) 67%, rgba(214,19,73,1) 100%);}

#sec08 .list{ position: relative; padding-top: 40px; margin-top: 20px;}
#sec08 .list:before{ content: ""; width: 120px; height: 4px; background: #fff; position: absolute; left: 0; right: 0; top: 0; margin: auto;}
#sec08 .list table{ width: 100%; border-collapse: collapse; background: #fff; color: #000; border-radius: 20px; overflow: hidden; font-size: 0.85rem; line-height: 1.5em;}
#sec08 .list table th{ width: 260px; text-align: left; vertical-align: middle; background: #eef1f8; color: #092887; font-weight: bold; padding: 1em 1.5em; border-bottom: 1px solid #d4d3d2;}
#sec08 .list table td{ vertical-align: middle; padding: 1em 1.5em; border-bottom: 1px solid #d4d3d2;}
#sec08 .list table tr:last-child th,
#sec08 .list table tr:last-child td{ border-bottom: none;}
#sec08 .list table td small{ font-size: 0.85em; color: #555;}
#sec08 .list p.att{ text-align: right; font-size: 0.7rem; margin: 10px;}

#sec08 .compare{ margin: 50px auto 60px; background: #fff; color: #000; border-radius: 20px; padding: 40px;}
#sec08 .compare h3{ text-align: center; font-size: 1.4rem; color: #192f75; margin-bottom: 30px;}
#sec08 .compare ul{ display: flex; justify-content: space-between;}
#sec08 .compare ul li{ width: calc(33.33% - 14px); background: #f8f8f8; border-radius: 12px; padding: 24px 20px; text-align: center;}
#sec08 .compare ul li i{ display: block; font-size: 1.8rem; color: #d61349; margin-bottom: 12px;}
#sec08 .compare ul li strong{ display: block; font-size: 0.95rem; line-height: 1.5em; margin-bottom: 8px;}
#sec08 .compare ul li span{ display: block; font-size: 0.75rem; line-height: 1.6em; text-align: left;}

#sec08 figure.btn{ display: flex; align-items: center; justify-content: center; width: 600px; height: 80px;}
#sec08 figure.btn a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 3px solid #fff; color: #fff; font-size: 1.2rem; font-weight: bold; text-align: center; padding: 0.75em; position: relative; cursor: pointer; transition: 0.3s;}
#sec08 figure.btn a:hover{ background: #fff; color: #192f75;}
#sec08 figure.btn a i{ position: absolute; right: 1em; top: 50%; transform: translateY(-50%);}
@media screen and (max-width:767px){
#sec08{ padding: 10% 0;}
#sec08 h2{ margin-bottom: 5%;}
#sec08 p.txt{ font-size: 1rem; text-align: left;}
#sec08 .list{ padding-top: 10%; margin-top: 5%;}
#sec08 .list:before{ width: 20vw;}
#sec08 .list table{ border-radius: 2.5vw; font-size: 1rem;}
#sec08 .list table tr{ display: block; border-bottom: 1px solid #d4d3d2;}
#sec08 .list table tr:last-child{ border-bottom: none;}
#sec08 .list table th,
#sec08 .list table td{ display: block; width: 100%; border-bottom: none; padding: 0.6em 1em;}
#sec08 .list table th{ padding-bottom: 0.4em;}
#sec08 .list table td{ padding-top: 0.4em;}
#sec08 .list p.att{ font-size: 0.8rem; margin: 2.5vw 0;}

#sec08 .compare{ margin: 7.5% auto 10%; border-radius: 2.5vw; padding: 7.5% 5%;}
#sec08 .compare h3{ font-size: 1.4rem; line-height: 1.5em; margin-bottom: 5%;}
#sec08 .compare ul{ display: block;}
#sec08 .compare ul li{ width: 100%; margin-top: 4vw; border-radius: 2vw; padding: 5%;}
#sec08 .compare ul li:first-child{ margin-top: 0;}
#sec08 .compare ul li strong{ font-size: 1.2rem;}
#sec08 .compare ul li span{ font-size: 1rem;}

#sec08 figure.btn{ width: 100%; height: auto;}
#sec08 figure.btn a{ border: 1px solid #fff;}
}



/*sec09 3つの始め方*/
#sec09{ background: #fff; padding: 80px 0;}
#sec09 h2{ text-align: center; font-size: 2rem; margin-bottom: 30px;}
#sec09 p.txt{ text-align: center;}
#sec09 .list{ position: relative; padding-top: 40px; margin-top: 20px;}
#sec09 .list:before{ content: ""; width: 120px; height: 4px; background: #000; position: absolute; left: 0; right: 0; top: 0; margin: auto;}
#sec09 .list ul{ display: flex; justify-content: space-between;}
#sec09 .list ul li{ width: calc(33.33% - 14px); border: 2px solid #092887; border-radius: 20px; padding: 30px 24px; text-align: center;}
#sec09 .list ul li .ico{ display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto 16px; border-radius: 50%; background: #eef1f8; color: #092887; font-size: 2rem;}
#sec09 .list ul li h3{ font-size: 1.3rem; color: #092887; margin-bottom: 12px;}
#sec09 .list ul li h3 small{ display: block; font-size: 0.6em; color: #555; font-weight: normal; margin-top: 6px;}
#sec09 .list ul li p{ font-size: 0.8rem; line-height: 1.6em; text-align: left; min-height: 3.2em;}
#sec09 .list ul li dl{ margin-top: 16px; background: #f8f8f8; border-radius: 8px; padding: 12px; text-align: left;}
#sec09 .list ul li dl dt{ font-size: 0.7rem; font-weight: bold; color: #d61349; margin-bottom: 4px;}
#sec09 .list ul li dl dd{ font-size: 0.8rem; line-height: 1.5em; font-weight: bold;}
@media screen and (max-width:767px){
#sec09{ padding: 10% 0;}
#sec09 h2{ font-size: 1.8rem; line-height: 1.4em; margin-bottom: 5%;}
#sec09 p.txt{ font-size: 1rem;}
#sec09 .list{ padding-top: 10%; margin-top: 5%;}
#sec09 .list:before{ width: 20vw;}
#sec09 .list ul{ display: block;}
#sec09 .list ul li{ width: 100%; margin-top: 5vw; border-radius: 2.5vw; padding: 6% 5%;}
#sec09 .list ul li:first-child{ margin-top: 0;}
#sec09 .list ul li .ico{ width: 15vw; height: 15vw; font-size: 1.8rem; margin-bottom: 3vw;}
#sec09 .list ul li h3{ font-size: 1.5rem;}
#sec09 .list ul li p{ font-size: 1rem; min-height: 0;}
#sec09 .list ul li dl{ padding: 3vw; border-radius: 1.25vw;}
#sec09 .list ul li dl dt{ font-size: 0.9rem;}
#sec09 .list ul li dl dd{ font-size: 1rem;}
}



/*sec02 補足：見出しが長い分の余白*/
#sec02 .list ul li dl dt h3{ white-space: nowrap;}

/*sec06 FAQ内リンク*/
#sec06 .faq dl dd p a.link{ color: #092887; text-decoration: underline;}
#sec06 .faq dl dd p a.link:hover{ text-decoration: none;}

/*form 企業名の補足*/
#fv #fv_form dl dt small,
#form dl dt small{ font-size: 0.85em; color: #555; margin-left: 0.25em;}

/*角丸をなくす（2026-09-28 本人指示：四角に）*/
#sec08 .list table,
#sec08 .compare,
#sec08 .compare ul li,
#sec09 .list ul li,
#sec09 .list ul li dl{ border-radius: 0 !important;}

/*提携機関ブロック削除後（2026-09-28）：目安3つの下の余白を詰める*/
#fv #fv_txt p.spec_att{ margin-bottom: 0;}