@charset "UTF-8";
/***
The new CSS reset - version 1.7.2 (last updated 23.6.2022)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Reapply the pointer cursor for anchor tags */
a,
button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol,
ul,
menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-width: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the text input doesn't working */
input,
textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
-webkit-user-drag: element;
}
:root {
--header-height: 50px;
--inner-padding: 4.26vw;
--hover-opacity: 0.75;
--font-family: "Noto Sans JP", "Hiragino Sans", "Helvetica Neue", sans-serif;
--color-main: #e56b2e;
--color-sub: #ffeadf;
--color-energy: #42893e;
--color-energy-rgb: 66, 137, 62;
--color-decarbon: #42a4a9;
--color-ppa: #5EBBBF;
--color-asune: #83CBCD;
--color-light-gray: #f5f5f5;
--color-text: #333;
--color-background: #fffefe;
--color-cta: #FFA50B;
--color-black: #000;
--color-white: #fff;
--color-gray-mv: #D9D9D9;
--line-height: 1.8;
--font-weight: 400;
--letter-spacing: 0.03em;
--transition-property: all;
--transition-duration: 0.3s;
--transition-easing: ease-in;
--shadow-sp-base: 0 4px 6px 2px rgba(0, 0, 0, 0.25);
--shadow-pc-base: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
}
@media (min-width: 1024px) {
:root {
--header-height: 80px;
}
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
}
*::before,
*::after {
pointer-events: none;
}
html {
overflow-x: hidden;
overflow-y: auto;
font-size: 62.5%;
}
body {
position: relative;
overflow-x: hidden;
min-width: 320px;
line-height: var(--line-height);
background-color: var(--color-background);
font-weight: var(--font-weight);
font-family: var(--font-family);
color: var(--text-color);
-webkit-text-size-adjust: 100%;
letter-spacing: var(--letter-spacing);
font-size: 1.6rem;
}
body h1:has(wbr),
body h2:has(wbr),
body h3:has(wbr),
body h4:has(wbr),
body h5:has(wbr),
body h6:has(wbr),
body p:has(wbr) {
word-break: keep-all;
overflow-wrap: anywhere;
}
body.is-fixed {
overflow: hidden;
position: fixed;
width: 100%;
}
main a:not([class]) {
text-decoration: underline;
}
@media not all and (pointer: coarse) {
main a:not([class]):hover {
text-decoration: none;
}
}
a {
color: inherit;
text-decoration: none;
transition: var(--transition-property) var(--transition-duration) var(--transition-easing);
}
span {
font-weight: inherit;
}
sup {
vertical-align: text-top;
font-size: 0.75em;
}
img {
display: block;
width: 100%;
max-width: fit-content;
height: auto;
}
input,
textarea,
button {
border: none;
appearance: none;
caret-color: var(--color-main);
}
input:focus-visible,
textarea:focus-visible,
button:focus-visible {
outline-color: var(--color-main);
}
@media (max-width: 1023.98px) {
input,
textarea,
button {
font-size: 1.6rem;
}
}
/* ハンバーガー展開時の背景 */
.js-overlay {
display: none;
position: fixed;
top: var(--header-height);
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
z-index: 100;
}
/* MV Slider */
.js-mv-slider .splide__pagination {
position: relative;
bottom: 0;
padding: 0;
}
.js-mv-slider .splide__pagination__page {
width: 1em;
height: 1em;
margin: 0 0.5em;
opacity: 1;
background: #D9D9D9;
}
.js-mv-slider .splide__pagination__page.is-active {
background: var(--color-main);
transform: none;
}
.js-mv-toggle {
width: 1em;
height: 1em;
cursor: pointer;
background: no-repeat center/contain;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cline%20x1%3D%221%22%20y1%3D%224.37112e-08%22%20x2%3D%220.999999%22%20y2%3D%2216%22%20stroke%3D%22%23D9D9D9%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%229%22%20y1%3D%224.37112e-08%22%20x2%3D%229%22%20y2%3D%2216%22%20stroke%3D%22%23D9D9D9%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
}
.js-mv-toggle.is-paused {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22105%22%20height%3D%22122%22%20viewBox%3D%220%200%20105%20122%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M105%2060.6218L0%20121.244V4.95911e-05L105%2060.6218Z%22%20fill%3D%22%23E56B2E%22%2F%3E%3C%2Fsvg%3E");
}
/* .l-header */
.l-header {
box-sizing: border-box;
position: fixed;
z-index: 2000;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--color-background);
font-weight: 700;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 12px;
}
.l-header__logo {
width: 158px;
}
.l-header__logo img {
width: 100%;
}
.l-header__contact {
display: flex !important;
flex-direction: column;
justify-content: end;
align-items: center;
width: 68px;
height: var(--header-height);
margin-right: var(--header-height);
background-color: var(--color-cta);
color: var(--color-background);
text-align: center;
}
.l-header__contact-icon {
transform: translateY(5px);
}
.l-header__contact-icon svg {
width: 24px;
height: 24px;
}
.l-header__contact-text {
display: block;
padding-bottom: 3px;
line-height: 1.2;
font-weight: 700;
font-size: 1rem;
}
@media (min-width: 1024px) {
.l-header {
width: auto;
top: 17px;
right: 24px;
left: 17px;
border-radius: 10px;
padding: 16px;
border-radius: 10px;
opacity: 0.95;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
}
.l-header__logo {
width: 20%;
max-width: 274px;
margin-right: 3.2%;
}
}
/* ハンバーガーメニュー用ボタン */
.l-header-button {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
justify-content: end;
align-items: center;
gap: 5px;
position: absolute;
top: 0;
right: 0;
width: var(--header-height);
height: var(--header-height);
background-color: var(--color-black);
color: var(--color-background);
cursor: pointer;
border-bottom-right-radius: 10px;
}
.l-header-button__line {
display: inline-block;
width: 18px;
height: 2px;
background-color: var(--color-background);
transition: transform 0.3s, opacity 0.3s;
}
.l-header-button[aria-expanded=true] .l-header-button__line:nth-child(1) {
transform: translateY(6px) rotate(25deg);
}
.l-header-button[aria-expanded=true] .l-header-button__line:nth-child(2) {
opacity: 0;
}
.l-header-button[aria-expanded=true] .l-header-button__line:nth-child(3) {
transform: translateY(-8px) rotate(-25deg);
}
.l-header-button__text {
display: inline-block;
padding-bottom: 3px;
line-height: 1.2;
font-weight: 700;
font-size: 1rem;
}
/* gnav */
.l-header-nav__link {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.l-header-nav__link::after {
content: "";
display: inline-block;
background: no-repeat center/contain;
}
@media (max-width: 1023.98px) {
.l-header-nav {
display: none;
box-sizing: border-box;
position: fixed;
z-index: 2000;
top: var(--header-height);
left: 0;
width: 100%;
height: calc(100vh - var(--header-height));
padding-top: 90px;
padding-bottom: 42px;
background-color: var(--color-background);
overflow-y: auto;
}
.l-header-nav.is-open {
display: block;
}
.l-header-nav__list {
margin: 0 40px 48px 50px;
}
.l-header-nav__item {
border-bottom: 1px solid #565656;
}
.l-header-nav__item:not(:last-of-type) {
margin-bottom: 16px;
}
.l-header-nav__link {
padding: 16px 0;
}
.l-header-nav__link::after {
width: 8px;
height: 13px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%2213%22%20viewBox%3D%220%200%208%2013%22%20fill%3D%22none%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.071%207.071L1.414%2012.728L0%2011.314L4.95%206.364L0%201.414L1.414%200L7.071%205.657C7.25847%205.84453%207.36379%206.09884%207.36379%206.364C7.36379%206.62916%207.25847%206.88347%207.071%207.071Z%22%20fill%3D%22%23E56B2E%22%2F%3E%3C%2Fsvg%3E");
}
}
@media (min-width: 1024px) {
.l-header-nav {
display: flex;
justify-content: end;
width: 80%;
gap: 3.2%;
}
.l-header-nav__list {
display: flex;
align-items: center;
gap: 10px;
}
.l-header-nav__item--energy {
--gnav-link-background: var(--color-energy);
}
.l-header-nav__item--decarbon {
--gnav-link-background: var(--color-decarbon);
}
.l-header-nav__link {
gap: 0.5em;
padding: min(0.83vw, 16px) min(0.625vw, 12px);
background-color: var(--gnav-link-background, var(--color-main));
color: var(--color-background);
font-size: clamp(1.3rem, 0.401754386rem + 0.8771929825vw, 1.6rem);
}
@supports not (font-size: clamp(13 * 0.1rem, 0.401754386rem + 0.8771929825vw, 16 * 0.1rem)) {
.l-header-nav__link {
font-size: 1.3rem;
}
}
.l-header-nav__link {
border-radius: 10px;
line-height: 1.3;
padding: 14px 16px;
}
.l-header-nav__link::after {
width: 9px;
height: 18px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%2218%22%20viewBox%3D%220%200%209%2018%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M1.83899%204.93493L2.63474%204.13993L6.96899%208.47268C7.03886%208.54211%207.0943%208.62467%207.13214%208.7156C7.16997%208.80654%207.18945%208.90406%207.18945%209.00256C7.18945%209.10105%207.16997%209.19857%207.13214%209.28951C7.0943%209.38045%207.03886%209.46301%206.96899%209.53243L2.63474%2013.8674L1.83974%2013.0724L5.90774%209.00368L1.83899%204.93493Z%22%20fill%3D%22%23FFFEFE%22%2F%3E%3C%2Fsvg%3E");
}
}
@media (min-width: 1400px) {
.l-header-nav__link {
box-sizing: border-box;
justify-content: center;
width: 144px;
}
.l-header-nav__item--energy tool .l-header-nav__link::after {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
}
.l-header-nav__item--decarbon .l-header-nav__link {
width: 218px;
}
}
/* gnavの外部リンク */
.l-header-utility__button {
display: flex;
align-items: center;
gap: 18px 10px;
color: var(--color-text);
font-size: 1.6rem;
font-weight: 700;
line-height: 1.3;
background-color: #E5E5E5;
border-radius: 10px;
padding: 16px;
}
.l-header-utility__button::before, .l-header-utility__button::after {
content: "";
display: inline-block;
background: no-repeat center/contain;
transition: var(--transition-property) var(--transition-duration) var(--transition-easing);
}
.l-header-utility__button::before {
width: 16px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20' fill='none'%3E%3Cpath d='M3.75 4.40459L3.75 2.16867C3.75 1.38516 4.38516 0.75 5.16867 0.75L12.7308 0.750001C13.8458 0.750001 14.75 1.53096 14.75 2.49389L14.75 17.0061C14.75 17.969 13.8458 18.75 12.7308 18.75L5.16867 18.75C4.38516 18.75 3.75 18.1148 3.75 17.3313L3.75 15.0954' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M0.75 9.75L10.75 9.75' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M7.86438 11.6958L10.7497 9.74998L7.86438 7.8042' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
}
.l-header-utility__button::after {
width: 15px;
height: 16px;
margin-left: auto;
background-image: url(/business/denki/css/"data:image/svg+xml,%3Csvg xmlns='http:/www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16' fill='none'%3E%3Cg clip-path='url(%23clip0_5258_10548)'%3E%3Cpath d='M12.8113 0.759033H6.02628C5.22042 0.759033 4.56714 1.43868 4.56714 2.27706V9.33588C4.56714 10.1743 5.22042 10.8539 6.02628 10.8539H12.8113C13.6172 10.8539 14.2704 10.1743 14.2704 9.33588V2.27706C14.2704 1.43868 13.6172 0.759033 12.8113 0.759033Z' stroke='%23565656' stroke-miterlimit='10'/%3E%3Cpath d='M10.4326 12.3566V13.7987C10.4326 14.5881 9.77594 15.2409 8.97341 15.2409H2.18839C1.38586 15.2409 0.729248 14.5578 0.729248 13.7228V6.66402C0.729248 5.82911 1.28372 5.146 1.95493 5.146H3.18061' stroke='%23565656' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5258_10548'%3E%3Crect width='15' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
@media (min-width: 1024px) {
.l-header-utility__button {
font-size: 1.3rem;
line-height: 1.3;
padding: 7px 12px;
}
.l-header-utility__button::after {
background-position: center right;
background-size: 11.5px 12px;
padding-left: 8px;
}
.l-header-utility__button:hover {
color: var(--color-background);
background-color: var(--color-text);
}
.l-header-utility__button:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20' fill='none'%3E%3Cpath d='M3.75 4.40459L3.75 2.16867C3.75 1.38516 4.38516 0.75 5.16867 0.75L12.7308 0.750001C13.8458 0.750001 14.75 1.53096 14.75 2.49389L14.75 17.0061C14.75 17.969 13.8458 18.75 12.7308 18.75L5.16867 18.75C4.38516 18.75 3.75 18.1148 3.75 17.3313L3.75 15.0954' stroke='%23fffefe' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M0.75 9.75L10.75 9.75' stroke='%23fffefe' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M7.86438 11.6958L10.7497 9.74998L7.86438 7.8042' stroke='%23fffefe' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
}
.l-header-utility__button:hover::after {
background-image: url(/business/denki/css/"data:image/svg+xml,%3Csvg xmlns='http:/www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cg clip-path='url(%23clip0_5256_9871)'%3E%3Cpath d='M9.6801 0.569336H4.55364C3.94476 0.569336 3.45117 1.07907 3.45117 1.70786V7.00197C3.45117 7.63076 3.94476 8.14049 4.55364 8.14049H9.6801C10.289 8.14049 10.7826 7.63076 10.7826 7.00197V1.70786C10.7826 1.07907 10.289 0.569336 9.6801 0.569336Z' stroke='%23FFFEFE' stroke-miterlimit='10'/%3E%3Cpath d='M7.88217 9.26759V10.3492C7.88217 10.9412 7.38606 11.4308 6.7797 11.4308H1.65325C1.04689 11.4308 0.550781 10.9184 0.550781 10.2923V4.99814C0.550781 4.37195 0.969718 3.85962 1.47685 3.85962H2.40292' stroke='%23FFFEFE' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5256_9871'%3E%3Crect width='11.3333' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.l-header-utility__button--has-tooltip {
--external-link-icon-width: 12px;
position: relative;
align-self: center;
border: 0;
font-size: clamp(1.2rem, 0.6011695906rem + 0.5847953216vw, 1.4rem);
}
@supports not (font-size: clamp(12 * 0.1rem, 0.6011695906rem + 0.5847953216vw, 14 * 0.1rem)) {
.l-header-utility__button--has-tooltip {
font-size: 1.2rem;
}
}
.l-header-utility__button--has-tooltip:hover span {
opacity: var(--hover-opacity);
}
.l-header-utility__button--has-tooltip:hover::before {
content: attr(data-tooltip);
position: absolute;
z-index: 9999;
top: 100%;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
padding: 1em;
background: var(--color-text);
border-radius: 4px;
white-space: nowrap;
font-size: inherit;
color: var(--color-background);
opacity: 1;
}
}
.l-header-utility__list {
display: flex;
flex-direction: column;
gap: 24px 14px;
}
.l-header-utility__link {
font-size: 1.2rem;
font-style: normal;
font-weight: 400;
line-height: 1.83;
text-decoration: underline;
text-underline-offset: 2px;
display: block;
}
.l-header-utility__link::after {
content: "";
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
background: no-repeat center/contain;
background-image: url(/business/denki/css/"data:image/svg+xml,%3Csvg xmlns='http:/www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cg clip-path='url(%23clip0_5258_10554)'%3E%3Cpath d='M9.60842 0.569092H4.51965C3.91525 0.569092 3.42529 1.07882 3.42529 1.70761V7.00173C3.42529 7.63052 3.91525 8.14025 4.51965 8.14025H9.60842C10.2128 8.14025 10.7028 7.63052 10.7028 7.00173V1.70761C10.7028 1.07882 10.2128 0.569092 9.60842 0.569092Z' stroke='%23565656' stroke-width='0.75' stroke-miterlimit='10'/%3E%3Cpath d='M7.82436 9.26734V10.3489C7.82436 10.941 7.3319 11.4305 6.73 11.4305H1.64123C1.03934 11.4305 0.546875 10.9182 0.546875 10.292V4.99789C0.546875 4.37171 0.962731 3.85938 1.46614 3.85938H2.3854' stroke='%23565656' stroke-width='0.75' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5258_10554'%3E%3Crect width='11.25' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
margin-left: 6px;
}
@media (max-width: 1023.98px) {
.l-header-utility__list {
margin: 0 40px 48px 50px;
}
}
@media (min-width: 1024px) {
.l-header-utility__list {
flex-direction: row;
align-items: center;
}
.l-header-utility__item + .l-header-utility__item {
position: relative;
padding-left: 14px;
}
.l-header-utility__item + .l-header-utility__item::before {
content: "";
display: block;
width: 1px;
height: 42px;
background-color: var(--color-text);
position: absolute;
top: calc(50% - 21px);
left: 0;
}
.l-header-utility__link {
font-size: 1.3rem;
font-weight: 700;
line-height: 1.3;
text-align: center;
text-decoration: none;
position: relative;
padding-right: 18px;
}
.l-header-utility__link span {
font-size: 1.2rem;
font-weight: 400;
}
.l-header-utility__link::after {
width: 24px;
height: 12px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background-position: center right;
}
}