/*-------------------------------------------*/ /*common*/ /*-------------------------------------------*/ html{margin:0; padding:0; font-size:1vw; color:#333;} body{width:100%; margin:0; padding:0; background:rgba(255, 255, 255, 0) url(../img/titleBg01a.svg) no-repeat center top / 100%; background-color:rgba(255, 255, 255, 0.5); background-blend-mode:lighten; font-size:1vw; color:#333; box-sizing:border-box;} body.no_scroll{overflow: hidden;} p{margin:0; padding:0; font-size:16px; font-weight:100; font-family:'M PLUS Rounded 1c', sans-serif;} article{width:1280px; margin:0 auto; box-sizing:border-box;} /*section{float:left; width:1044px; margin:0; padding:32px 0; box-sizing:border-box;}*/ section{float:left; width:1000px; margin:0; padding:32px 0; box-sizing:border-box;} #header{width:100%; aspect-ratio:20/1; margin:0 auto; background-color:#009988; box-sizing:border-box;} #side{display:none; float:left; width:256px; padding-top:32px; background-color:rgba(255, 255, 255, 0); box-sizing:border-box;} #footer{width:100%; aspect-ratio:20/1; margin:0 auto; background-color:#009988; box-sizing:border-box;} *{box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} /*heading*/ h1{width:100%; margin:0; padding:0 16px; font-size:32px; font-weight:900; font-family:'M PLUS Rounded 1c', sans-serif; color:#fff; box-sizing:border-box;} h2{width:100%; margin:0; padding:0 32px; font-size:24px; font-weight:900; font-family:'M PLUS Rounded 1c', sans-serif; color:#009988; box-sizing:border-box;} .h1Wrap{float:left; width:30%; aspect-ratio:1/1; margin:0; padding:32px; background:linear-gradient(to bottom right, #009988, #365); box-sizing:border-box;} /*button*/ .prevBt{float:left; width:30%; margin-top:80px; margin-left:5%; margin-right:10%; padding:16px; background-color:#009988; border-radius:6px; font-family:'M PLUS Rounded 1c', sans-serif; font-size:18px; font-weight:100; text-align:center; color:#fff; cursor:pointer; filter:drop-shadow(2px 1px 2px #000); box-sizing:border-box;} .prevBt:hover{filter:brightness(80%) drop-shadow(1px 0px 1px #000);} .nextBt{float:left; width:30%; margin-top:80px; margin-left:240px; margin-right:0%; padding:16px; background-color:#009988; border-radius:6px; font-family:'M PLUS Rounded 1c', sans-serif; font-size:18px; font-weight:100; text-align:center; color:#fff; cursor:pointer; filter:drop-shadow(2px 1px 2px #000); box-sizing:border-box;} .nextBt:hover{filter:brightness(80%) drop-shadow(1px 0px 1px #000);} .nextBtNormal{float:left; width:30%; margin-top:80px; margin-left:240px; margin-right:0; padding:16px; background-color:#ccc; border-radius:6px; font-family:'M PLUS Rounded 1c', sans-serif; font-size:18px; font-weight:100; text-align:center; color:#fff; cursor:default; box-sizing:border-box;} /*sideMenu*/ .navNormal{width:90%; margin:0 auto 16px auto; padding:16px; background-color:#fff; border:1px #eee solid; border-radius:6px; font-family:'M PLUS Rounded 1c', sans-serif; font-size:16px; font-weight:100; text-align:center; color:#333; box-sizing:border-box;} .navClickable{width:90%; margin:0 auto 32px auto; padding:16px; background-color:#009988; border-radius:5px; font-family:'M PLUS Rounded 1c', sans-serif; font-size:15px; font-weight:100; text-align:center; color:#fff; cursor:pointer; filter:drop-shadow(2px 1px 2px #666); box-sizing:border-box;} .navClickable:hover{filter:brightness(80%) drop-shadow(1px 0px 1px #666);} .nav{width:90%; aspect-ratio:4/1; margin:16px auto; padding:16px 16px 16px 16px; text-align:center; box-sizing:border-box;} .navText{margin-bottom:42px;} .navGreen{width:90%; aspect-ratio:4/1; margin:16px auto; padding:16px 16px 16px 16px; background-color:#009988; border-radius:6px; text-align:center; color:#fff; cursor:pointer; filter:drop-shadow(2px 1px 2px #666); box-sizing:border-box;} .navGreen:hover{filter:brightness(80%) drop-shadow(1px 0px 1px #000);} .navTriangleWrap{width:100%; height:64px; margin:32px auto -16px auto; padding-left:80px;} .svgTriangle {width:100%; height:20px; margin:0 auto 10px auto; overflow:visible; font-size:36px; text-align:center;} .svgTriangleNomal {width:100%; height:20px; margin:0 auto 10px auto; overflow:visible; font-size:36px; text-align:center;} .textTriangle {margin:0 auto 10px auto; fill:#ecc63f; stroke:#fff; stroke-width:2px; stroke-linejoin:miter;} .textTriangleNomal {margin:0 auto 10px auto; fill:#E9F3E3; stroke:#cdb; stroke-width:2px; stroke-linejoin:miter;} .navTxt{width:100%;} /*title*/ #titleHeader{width:1280px; height:88px; margin:0 auto; padding:5px 0 5px 0; background-color:#009988; text-align:center; box-sizing:border-box;} #titleHeaderLogoWrap{width:1280px; height:100%; margin:0 auto; text-align:left; box-sizing:border-box;} #titleHeader img{width:240px; height:72px; margin:3px 0 0 0;} #wrapTitle{width:1280px; margin:0 auto; padding:0; overflow:hidden; box-sizing:border-box;} #titleTitle{width:60%; margin:16px auto; padding:50px 0 0 0; background-color:rgba(255, 255, 255, 0); box-sizing:border-box;} #titleTitle img{width:100%;} #titleText{width:50%; aspect-ratio:10/1; margin:50px auto 80px auto; padding:30px 0 30px 0; background-color:rgba(255, 255, 255, 1); border:1px #eee solid; font-size:20px; font-weight:900; text-align:center; color:#666; box-sizing:border-box;} #btStart{width:70%; margin:50px auto 0 auto; padding:0 0 0 0; text-align:center; cursor:pointer; box-sizing:border-box;} #btStart img {width:100%;} #btStart:hover{filter:brightness(80%);} .titleTxtLineWrap{width:80%; height:5px; margin:30px auto 30px auto; padding:0; box-sizing:border-box;} .titleTxtLineLeft{float:left; width:33%; height:10px; margin:0; padding:0; background-color:#009988; border:1px #fff solid; opacity:0.3; box-sizing:border-box;} .titleTxtLineCenter{float:left; width:34%; height:10px; margin:0; padding:0; background-color:#FFF7CA; border:1px #fff solid; box-sizing:border-box;} .titleTxtLineRight{float:left; width:33%; height:10px; margin:0; padding:0; background-color:#009988; border:1px #fff solid; opacity:0.3; box-sizing:border-box;} #titleFooter{width:1280px; height:88px; margin:0 auto; padding-top:30px; background-color:#009988; box-sizing:border-box;} #titleFooterCopyrightWrap{width:1280px; margin:30px auto 0 auto; font-size:12px; color:#fff; text-align:center; box-sizing:border-box;} /*prefecture*/ #wrapPrefectureUpper{width:980px; border:1px #f00 solid; margin-left:50px;} #wrapPrefectureLower{width:980px; border:1px #f00 solid; margin-left:50px;} #section1{display:none; width:1024px;} .h1Txt{width:94%; margin:0 0 10px 48px; padding:32px 32px 32px 32px; background-color:#fff; color:#333; font-size:24px; text-align:left; box-sizing:border-box;} .h1Txt{ --x-gradient: linear-gradient(90deg, #009988 0 15px, transparent 0 calc(100% - 15px), #009988 calc(100% - 15px)); --y-gradient: linear-gradient(#009988 0 15px, transparent 0 calc(100% - 15px), #009988 calc(100% - 15px)); outline:#fff 2px solid; outline-offset: -5px; background-image: var(--x-gradient), var(--y-gradient), var(--x-gradient), var(--y-gradient); background-repeat: no-repeat; background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; background-position: top, right, bottom, left; } .explanationTxt{width:900px; margin:0 45px 60px 85px; padding:16px 16px 16px 16px; color:#333; font-size:14px; text-align:left; box-sizing:border-box;} #prefectureWrap{float:left; width:95%; margin:0 0 0 5%; font-size:16px; box-sizing:border-box;} #mapWrap{width:92%; margin-bottom:-30px; margin-left:32px; background:rgba(255, 255, 255, 0); box-sizing:border-box;} .questionWrap{float:left; width:65%; margin:0 0 0 5%; box-sizing:border-box;} .mapFloat{float:left;} .mapBt1{width:7%; aspect-ratio:1/1; border:2px #fff solid; border-radius:4px; color:#fff; letter-spacing:2px; white-space:nowrap; font-size:12px; line-height:60px; text-align:center; cursor:pointer; box-sizing:border-box;} .mapBt1:hover{filter:brightness(80%);} .mapBt2{width:16%; margin-left:5px; margin-right:0; aspect-ratio:1/1; border:2px #fff solid; border-radius:5px; color:#fff; letter-spacing:2px; white-space:nowrap; font-size:12px; line-height:160px; text-align:center; box-sizing:border-box;} .mapSpacer12x2{width:550px; aspect-ratio:5/1; margin:0 0 0 140px; padding-top:20px; background-color:#36c; border-radius:6px; box-sizing:border-box;} #hokkaidoTriangle{float:left; width:5%; aspect-ratio:2/1; margin:16px 0 0 -2px; background-color:#36c; clip-path:polygon(0 0, 0 100%, 100% 50%); box-sizing:border-box;} #hokkaidoUl{width:550px; margin:0 auto; padding:0 8px 16px 20px; font-size:16px; text-align:right; list-style:none; box-sizing:border-box;} #hokkaidoUl li{float:left; margin:3px 16px 10px 0; padding:3px 16px 3px 16px; background-color:#039; border:2px #fff solid; border-radius:8px; font-size:12px; color:#fff; cursor:pointer; box-sizing:border-box;} #hokkaidoUl li:hover{color:#999;} .mapSpacer12x1{width:84%; aspect-ratio:12/1; box-sizing:border-box;} .mapSpacer1x1{width:7%; aspect-ratio:1/1; box-sizing:border-box;} .mapSpacer9x1{width:63%; aspect-ratio:9/1; box-sizing:border-box;} .mapSpacer5x1{width:35%; aspect-ratio:5/1; box-sizing:border-box;} .mapSpacer2x1{width:14%; aspect-ratio:2/1; box-sizing:border-box;} .mapSpacer7x1{width:49%; aspect-ratio:7/1; box-sizing:border-box;} .mapSpacer13x1{width:91%; aspect-ratio:13/1; box-sizing:border-box;} .mapColor1{background-color:#36c;} .mapColor2{background-color:#63e;} .mapColor3{background-color:#399;} .mapColor4{background-color:#595;} .mapColor5{background-color:#390;} .mapColor6{background-color:#990;} .mapColor7{background-color:#6c0;} .mapColor8{background-color:#096;} .mapColor9{background-color:#969;} .mapColor10{background-color:#00c;} #prefectureHeader{width:100%; height:88px; margin:0; padding:10px 0 10px 0; background-color:#009988; text-align:center; box-sizing:border-box;} #prefectureHeaderLogoWrap{width:1280px; height:100%; margin:0 auto;} #prefectureHeader img{display:block; height:68px; margin:0 0 0 0; box-sizing:border-box;} #prefectureFooter{width:100%; height:88px; padding-top:30px; background-color:#009988; box-sizing:border-box;} #prefectureFooterCopyrightWrap{width:1280px; margin:30px auto 0 auto; font-size:12px; color:#fff; text-align:center; box-sizing:border-box;} /*area*/ #section2{display:none; width:1024px; box-sizing:border-box;} #h1Wrap2{float:left; width:30%; aspect-ratio:1/1; margin:0; padding:32px; background:url(../img/h1BgImg2.png) no-repeat bottom left / 100% 100%; box-sizing:border-box;} #areaWrap{float:left; width:900px; margin:0 45px 0 85px; font-size:16px; box-sizing:border-box;} #areaSelector{width:100%; margin:32px auto; padding:32px; background:rgba(60, 60, 60, 0.8); border-radius:0; color:#fff; box-sizing:border-box;} #areaBtWrap{width:100%; list-style:none; box-sizing:border-box;} .areaBt{float:left; width:190px; margin:16px; padding:6px; list-style-type:none; background-color:#009988; border-radius:6px; font-size:16px; text-align:center; color:#fff; cursor:pointer; filter:drop-shadow(2px 1px 2px #000); box-sizing:border-box;} .areaBt:hover{filter:brightness(80%) drop-shadow(1px 0px 1px #000);} .areaBtSelected{float:left; width:190px; margin:16px 48px 16px 0; padding:6px; list-style-type:none; background-color:#c00; border-radius:6px; font-size:16px; text-align:center; color:#fff; box-sizing:border-box;} /*panel*/ #section3{display:none; width:1024px; box-sizing:border-box;} #h1Wrap3{float:left; width:30%; aspect-ratio:1/1; margin:0; padding:32px; background:url(../img/h1BgImg3.png) no-repeat bottom left / 100% 100%; font-size:16px; box-sizing:border-box;} #panelWrap{float:left; width:900px; margin:0 45px 0 85px; box-sizing:border-box;} .panelList{list-style:none; float:left; width:45%; margin:0 5% 32px 0; padding:6px; list-style-type:none; background-color:#009988; border-radius:6px; font-size:16px; text-align:center; color:#fff; cursor:pointer; filter:drop-shadow(2px 1px 2px #000); box-sizing:border-box;} .panelList:first-of-type{list-style:none; float:left; width:45%; margin:0 5% 32px 0; padding:6px; list-style-type:none; background-color:#999; border-radius:6px; font-size:16px; text-align:center; color:#fff; cursor:pointer; filter:drop-shadow(2px 1px 2px #000); box-sizing:border-box;} .panelList:hover{filter:brightness(80%) drop-shadow(1px 0px 1px #000);} .panelListSelected{list-style:none; float:left; width:45%; margin:0 5% 32px 0; padding:6px; list-style-type:none; background-color:#c00; border-radius:6px; font-size:16px; text-align:center; color:#fff; box-sizing:border-box;} /*capacity*/ #section4{display:none; width:1024px; box-sizing:border-box;} #h1Wrap4{float:left; width:30%; aspect-ratio:1/1; margin:0; padding:32px; background:url(../img/h1BgImg4.png) no-repeat bottom left / 100% 100%; box-sizing:border-box;} #capacityWrap{float:left; width:900px; margin:0 45px 0 85px; padding-left:32px; font-size:16px; box-sizing:border-box;} .capacityBt{list-style:none; float:left; width:45%; margin:0 5% 32px 0; padding:6px; list-style-type:none; background-color:#009988; border-radius:6px; text-align:center; font-size:16px; color:#fff; cursor:pointer; filter:drop-shadow(2px 1px 2px #000); box-sizing:border-box;} .capacityBt:hover{filter:brightness(80%) drop-shadow(1px 0px 1px #000);} .capacityBtSelected{list-style:none; float:left; width:45%; margin:0 5% 32px 0; padding:6px; list-style-type:none; background-color:#c00; border-radius:6px; text-align:center; font-size:16px; color:#fff; box-sizing:border-box;} #capacityInput{width:96px; height:48px; font-size:32px;} /*loof*/ #section5{display:none; width:1024px; box-sizing:border-box;} #h1Wrap5{float:left; width:30%; aspect-ratio:1/1; margin:0; padding:32px; background:url(../img/h1BgImg5.png) no-repeat bottom left / 100% 100%; box-sizing:border-box;} #loofWrap{float:left; width:900px; margin:0 45px 0 85px; padding:0; font-size:16px; box-sizing:border-box;} .btLoof{float:left; list-style:none; list-style-type:none; width:180px; height:200px; margin:16px 32px 16px 0; padding:8px 8px 24px 8px; list-style-type:none; background-color:#009988; border-radius:6px; text-align:center; font-size:16px; color:#fff; cursor:pointer; filter:drop-shadow(2px 1px 2px #000); box-sizing:border-box;} .btLoof img{width:80%;} .btLoof:hover{filter:brightness(80%) drop-shadow(1px 0px 1px #000);} .btLoofSelected{float:left; list-style:none; list-style-type:none; width:180px; height:200px; margin:16px 32px 16px 0; padding:8px 8px 24px 8px; list-style-type:none; background-color:#c00; border-radius:6px; text-align:center; font-size:16px; color:#fff; box-sizing:border-box;} .btLoofSelected img{width:80%;} .noDisplay{display:none; clear:both; list-style:none; list-style-type:none; box-sizing:border-box;} .loofBottomSpace{width:100%; padding-bottom:32px; box-sizing:border-box;} /*direction*/ #section6{display:none; width:1024px; box-sizing:border-box;} #h1Wrap6{float:left; width:30%; aspect-ratio:1/1; margin:0; padding:32px; background:url(../img/h1BgImg6.png) no-repeat bottom left / 100% 100%; font-size:16px; box-sizing:border-box;} #directionWrap{float:left; width:900px; margin:0 45px 0 85px; text-align:center; font-size:16px; box-sizing:border-box;} .btDirection{list-style:none; list-style-type:none; width:80%; margin:16px 32px 48px 16px; padding:6px; list-style-type:none; background-color:#009988; border-radius:6px; text-align:center; font-size:16px; color:#fff; cursor:pointer; filter:drop-shadow(2px 1px 2px #000); box-sizing:border-box;} .btDirection:hover{filter:brightness(80%) drop-shadow(1px 0px 1px #000);} .btDirectionSelected{list-style:none; list-style-type:none; width:80%; margin:16px 32px 48px 16px; padding:6px; list-style-type:none; background-color:#c00; border-radius:6px; text-align:center; font-size:16px; color:#fff; box-sizing:border-box;} /*plan*/ #section7{display:none; width:1024px; box-sizing:border-box;} #h1Wrap7{float:left; width:30%; aspect-ratio:1/1; margin:0; padding:32px; background:url(../img/h1BgImg7.png) no-repeat bottom left / 100% 100%; box-sizing:border-box;} #planWrap{float:left; width:900px; margin:0 45px 0 85px; padding-left:32px; font-size:16px; box-sizing:border-box;} .planBt{list-style:none; float:left; width:45%; margin:0 5% 32px 0; padding:6px; list-style-type:none; background-color:#009988; border-radius:6px; text-align:center; font-size:16px; color:#fff; cursor:pointer; filter:drop-shadow(2px 1px 2px #000); box-sizing:border-box;} .planBt:last-of-type{list-style:none; list-style-type:none; float:left; width:45%; margin:0 5% 32px 0; padding:6px; list-style-type:none; background-color:#999; border-radius:6px; text-align:center; font-size:16px; color:#fff; cursor:pointer; filter:drop-shadow(2px 1px 2px #000); box-sizing:border-box;} .planBt:hover{filter:brightness(80%) drop-shadow(1px 0px 1px #000);} .planBtSelected{list-style:none; float:left; width:45%; margin:0 5% 32px 0; padding:6px; list-style-type:none; background-color:#c00; border-radius:6px; text-align:center; font-size:16px; color:#fff; box-sizing:border-box;} /*fee*/ #section8{display:none; width:1024px; box-sizing:border-box;} #h1Wrap8{float:left; width:30%; aspect-ratio:1/1; margin:0; padding:32px; background:url(../img/h1BgImg8.png) no-repeat bottom left / 100% 100%; box-sizing:border-box;} #feeWrap{float:left; width:900px; margin:0 45px 0 85px; padding-left:32px; font-size:16px; box-sizing:border-box;} .btFee{list-style:none; float:left; width:45%; margin:0 5% 32px 0; padding:6px; list-style-type:none; list-style-type:none; background-color:#009988; border-radius:6px; text-align:center; font-size:16px; color:#fff; cursor:pointer; filter:drop-shadow(2px 1px 2px #000); box-sizing:border-box;} .btFee:hover{filter:brightness(80%) drop-shadow(1px 0px 1px #000);} .btFeeSelected{list-style:none; float:left; width:45%; margin:0 5% 32px 0; padding:6px; list-style-type:none; background-color:#c00; border-radius:6px; text-align:center; font-size:16px; color:#fff; box-sizing:border-box;} #feeInput{width:144px; height:48px; font-size:32px;} /*result*/ #section9{display:none; user-select:none; width:1024px; margin-left:0; box-sizing:border-box;} .resultFormWrap{margin-left:32px;} .resultForm{float:left; width:23%; margin:1px; border:1px #999 solid; box-sizing:border-box;} .resultFormTitle{padding:6px; background-color:rgb(0 153 136 /0.3); font-size:16px; font-weight:900; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; box-sizing:border-box;} .resultFormValue{padding:6px; background-color:#fff; font-size:16px; font-weight:100; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; box-sizing:border-box;} #graphArea{width:100%; margin:60px 6px 0 0; padding:16px 0 16px 0; border:1px rgba(255, 255, 255, 0.01) solid; box-sizing:border-box;} #totalEconomizeArea{width:100%; margin:60px 6px 0 0; padding:16px 0 16px 0; border:1px #fff solid; box-sizing:border-box;} #graphLineArea{width:100%; margin:32px 6px 0 0; padding:16px 0 16px 0; border:1px #fff solid; box-sizing:border-box;} /*modal window*/ #btBattSub{width:68%; margin:10px auto 60px auto; padding:20px; text-align:center; background:#f60; filter:drop-shadow(2px 1px 2px #000); font-size:24px; font-weight:900; color:#fff; border-radius:10px; cursor:pointer;} #btBattSub:hover{filter:brightness(80%) drop-shadow(1px 0px 1px #000);} #btBattSubTriangle{display:inline-block; margin-left:12px; transform:rotate(270deg);} #batterySubsidyBg{display:none; width:100%; height:auto; position:absolute; z-index:100; background:rgb(0 0 0/0.8);} #batterySubsidyWin{width:60%; margin:15% auto 30% auto; padding:30px 40px 20px 40px; background:#fff; color:#333; border-radius:20px; font-size:14px;} #labelCheckboxBatteryBefore{display:block; padding:10px 0 10px 18px; color:#333; font-size:14px; font-weight:900; line-height:18px; text-align:left;} #checkboxBattery{display:inline-block;} #txtBattSub{display:block; width:95%; margin:10px 0 20px 18px; padding:10px 0 10px 0; border-bottom:1px #ccc solid; color:#333; font-size:14px; line-height:18px; text-align:left;} #labelCheckboxSubsidy{display:block; padding:50px 0 10px 18px; color:#333; font-size:14px; font-weight:900; line-height:18px; text-align:left;} #txtAmountSubsidyBefore{display:block; width:90%; margin-left:18px; padding:10px 0 10px 0; color:#333; font-size:14px; line-height:18px; text-align:left;} #amountSubsidy{display:inline-block; width:120px; margin-left:18px; font-size:14px; text-align:left;} #txtAmountSubsidyAfter{display:inline-block; width:120px; font-size:14px; text-align:left;} #txtBattSubCaution{display:block; width:95%; margin:10px 0 0 18px; padding:10px 0 10px 0; border-top:1px #ccc solid; color:#c00; font-size:14px; line-height:18px; text-align:left;} .checkboxBattSubs{ position:relative; cursor:pointer; width:3.5rem; height:1.9rem; margin-top:-0.2rem; border-radius:60px; background-color:#ddd; -webkit-appearance:none; -moz-appearance:none; appearance:none; vertical-align:middle; transition:0.5s; } .checkboxBattSubs::before { position:absolute; top:0.2rem; left:0.2rem; width:1.5rem; height:1.5rem; box-sizing:border-box; border-radius:50%; background:white; color:black; content:''; transition:0.3s ease; } .checkboxBattSubs:checked{ background: #00dd33; } .checkboxBattSubs:checked::before { left: 1.8rem; } #btBattSubApplyCloseWrap{display:flex;} #btBattSubsApply{width:150px; height:28px; margin:20px auto; padding:3px; background:#eee; border:1px #999 solid; border-radius:5px; font-size:14px; text-align:center; color:#333; cursor:pointer;} #btBattSubsApply:hover{background:#ccc; border:1px #666 solid; color:#333;} #btModalWinClose{width:80px; height:28px; margin:20px auto; padding:3px; background:#eee; border:1px #999 solid; border-radius:5px; font-size:14px; text-align:center; color:#333; cursor:pointer;} #btModalWinClose:hover{background:#ccc; border:1px #666 solid; color:#333;} /*bar*/ #chartWrap{width:98%; z-index:100; padding:1%; border:1px rgba(255, 255, 255, 0.01) solid; user-select:none; box-sizing:border-box;} #chartWrap:hover{cursor:default;} #chartVLabel{float:left; width:5%; padding:1% 1% 1% 3%; border:1px rgba(255, 255, 255, 0.01) solid; font-size:16px; text-align:center; box-sizing:border-box;} #chartMeterWrap{float:left; width:5%; margin-left:3%; margin-right:2%; padding-top:0.3%; border:1px rgba(255, 255, 255, 0.01) solid; box-sizing:border-box;} #chartMeterTop{width:100%; height:52%; padding-bottom:10%; border:1px rgba(255, 255, 255, 0.01) solid; text-align:right; font-size:16px; line-height:16px; box-sizing:border-box;} #chartMeterMiddle{width:100%; height:8%; margin-top:-2%; margin-bottom:8%; padding-top:-2%; border:1px rgba(255, 255, 255, 0.01) solid; text-align:right; font-size:16px; line-height:0; box-sizing:border-box;} #chartMeterBottom{position:relative; width:100%; height:40%; padding-top:10%; border:1px rgba(255, 255, 255, 0.01) solid; text-align:right; font-size:16px; line-height:0; box-sizing:border-box;} #chartMeterBottom > p{position:absolute; bottom:0; right:0; margin:0;} #chartBarWrap{float:left; display:flex; align-items:flex-end; width:83%; padding:0 0 0 1%; border:1px #999 solid; border-top:none; border-right:none; box-sizing:border-box;} .chartBar{width:7%; height:5vw; margin-right:2%; background:linear-gradient(rgb(0 153 136 /1), rgb(0 153 136 /0.8)); border:1px #333 solid; text-align:center; color:#fff; font-size:12px; user-select:none; box-sizing:border-box;} #chartHLabelSpacer{float:left; width:10%; padding:1%; border:1px rgba(255, 255, 255, 0.01) solid; box-sizing:border-box;} #chartHLabel{float:left; display:flex; width:85%; margin-left:5%; padding:1%; border:1px rgba(255, 255, 255, 0.01) solid; box-sizing:border-box;} .chartMonth{width:48px; margin-right:4%; border:1px rgba(255, 255, 255, 0.01) solid; font-size:12px; text-align:center; box-sizing:border-box;} #newTable{width:90%; margin:16px auto; border-collapse:collapse; font-size:12px; text-align:center; user-select:none; box-sizing:border-box;} #newTable th{background-color:rgb(0 153 136 /0.3); font-size:16px; text-align:center; vertical-align:middle; box-sizing:border-box;} #newTable td{background-color:#fff; font-size:16px; text-align:center; vertical-align:middle; box-sizing:border-box;} #newTable, td, th{white-space:nowrap; border:1px rgba(255, 255, 255, 0.01) solid; box-sizing:border-box;} #chartBarNumericTable{width:90%; margin:16px auto; border-collapse:collapse; font-size:12px; text-align:center; user-select:none; box-sizing:border-box;} #chartBarNumericTable th{background-color:rgb(0 153 136 /0.3); font-size:16px; text-align:center; vertical-align:middle; box-sizing:border-box;} #chartBarNumericTable td{background-color:#fff; font-size:16px; text-align:center; vertical-align:middle; box-sizing:border-box;} #chartBarNumericTable, td, th{white-space:nowrap; border:1px rgba(255, 255, 255, 0.01) solid; box-sizing:border-box;} /*line*/ #graphLineWrapParent{width:98%; z-index:100; margin:0 0 0 96px; padding:16px 0 16px 0; border:1px #fff solid; box-sizing:border-box;} #graphLineWrapParent:hover{cursor:default;} #graphLineWrapChild{display:flex; margin:0; padding:0; box-sizing:border-box;} #graphLineVLabel{height:5%; margin:60px 0 0 -50px; padding:0; border:1px #fff solid; white-space:nowrap; font-size:16px; font-weight:900; box-sizing:border-box;} #graphLineVMeterWrap{width:3%; margin:0 0 0 -48px; padding:0; border:1px #fff solid; box-sizing:border-box;} #graphLineVMeterTop{width:100%; height:47.5%; border:1px #fff solid; font-size:12px; text-align:right; box-sizing:border-box;} #graphLineVMeterMid{width:100%; height:47.5%; border:1px #fff solid; font-size:12px; text-align:right; box-sizing:border-box;} #graphLineVMeterBtm{width:100%; height:5%; border:1px #fff solid; font-size:12px; text-align:right; box-sizing:border-box;} #graphLineCanvas{display:block; width:88%; padding:0; border:1px #999 solid; border-top:none; border-right:none; user-select:none; box-sizing:border-box;} #graphLineHMeterWrap{display:flex; justify-content:space-between; width:89%; margin-left:-54px; margin-top:6px; padding:0; border:1px #fff solid; box-sizing:border-box;} .depreciationTermChildFirst{width:4%; border:1px #fff solid; white-space:nowrap; text-align:right; font-size:12px; box-sizing:border-box;} .depreciationTermChild{width:5%; border:1px #fff solid; text-align:left; font-size:12px; box-sizing:border-box;} #graphLineCaution{width:100%; padding:0 48px 48px 48px; text-align:left; font-size:14px; color:#c00;} #graphLineNumericTable{width:90%; margin:16px auto; border-collapse:collapse; font-size:12px; text-align:center; box-sizing:border-box;} #graphLineNumericTable th{background-color:rgb(0 153 136 /0.3); font-size:16px; text-align:center; vertical-align:middle; box-sizing:border-box;} #graphLineNumericTable td{background-color:#fff; font-size:16px; text-align:center; vertical-align:middle; box-sizing:border-box;} #graphLineNumericTable, td, th{white-space:nowrap; border:1px #ccc solid; box-sizing:border-box;} #rangeOfUseWrap{width:90%; margin:16px auto; padding:16px 16px 0 16px; text-align:center; font-size:16px; background-color:#eee; border:1px #999 solid; border-radius:16px; box-sizing:border-box;} #rangeOfUseWrap input{width:95%; border:1px #fff solid; box-sizing:border-box;} #rangeOfUseWrap ul{display:flex; width:103%; margin-top:-6px; margin-left:-4%; list-style:none; white-space:nowrap; box-sizing:border-box;} #rangeOfUseWrap li{width:5%; font-size:12px; list-style:none; box-sizing:border-box;} #sliderCaution{width:100%; padding:0 48px 48px 48px; text-align:left; font-size:14px; color:#c00;} /*total*/ #totalEconomizeTableParent{width:90%; margin:16px auto; border-collapse:collapse; font-size:12px; text-align:center; box-sizing:border-box;} #totalEconomizeTableParent th{background-color:rgb(0 153 136 /0.3); font-size:20pxpx; text-align:center; vertical-align:middle; box-sizing:border-box;} #totalEconomizeTableParent td{background-color:#fff; font-size:20px; text-align:center; vertical-align:middle; box-sizing:border-box;} #totalEconomizeTableParent, td, th{white-space:nowrap; border:1px #ccc solid; box-sizing:border-box;} #economizeTableMonth{width:90%; margin:16px auto; border-collapse:collapse; font-size:12px; text-align:center; box-sizing:border-box;} #economizeTableMonth th{background-color:rgb(0 153 136 /0.3); font-size:16px; text-align:center; vertical-align:middle; box-sizing:border-box;} #economizeTableMonth td{background-color:#fff; font-size:16px; text-align:center; vertical-align:middle; box-sizing:border-box;} #economizeTableMonth, td, th{white-space:nowrap; border:1px #ccc solid; box-sizing:border-box;} #economizeTableCaution{width:90%; margin:0 auto 48px auto; font-size:14px; text-align:left; color:#c00;} #economizeTableCaution2{width:90%; margin:0 auto 48px auto; font-size:14px; text-align:left; color:#c00;} #btAfterCost{display:inline-block; padding:6px; background-color:#009988; border-radius:6px; text-decoration:none; font-size:12px; color:#fff; filter:drop-shadow(2px 1px 2px #000); box-sizing:border-box;} #btAfterCost:hover{filter:brightness(80%) drop-shadow(1px 0px 1px #000);} #totalBaidenTableParent{width:90%; margin:16px auto; border-collapse:collapse; font-size:12px; text-align:center; box-sizing:border-box;} #totalBaidenTableParent th{background-color:rgb(0 153 136 /0.3); font-size:20px; text-align:center; vertical-align:middle; box-sizing:border-box;} #totalBaidenTableParent td{background-color:#fff; font-size:32px; text-align:center; vertical-align:middle; box-sizing:border-box;} /*banner*/ .mitsumoriBt{/**/color:#333;} .mitsumoriBt:hover{filter:brightness(80%);} /*-------------------------------------------*/ /*screen size changer*/ /*-------------------------------------------*/ @media screen and (min-width:480px) {} @media screen and (min-width:768px) and ( max-width:1024px) {} @media screen and (min-width:1024px) {}