@import url(//fonts.googleapis.com/css?family=Lato:400,700);
@font-face { font-family: 'Noto Sans CJK JP Regular'; font-style: normal; font-weight: 400; src: local("NotoSansJP-Regular.otf"), url(../webfonts/NotoSansCJKjp-subset-Regular.woff2) format("woff2"), url(../webfonts/NotoSansCJKjp-subset-Regular.woff) format("woff"), url(../webfonts/NotoSansCJKjp-subset-Regular.otf) format("opentype"); }

@font-face { font-family: 'Noto Sans CJK JP Medium'; font-style: normal; font-weight: 400; src: local("NotoSansJP-Medium.otf"), url(../webfonts/NotoSansCJKjp-subset-Medium.woff2) format("woff2"), url(../webfonts/NotoSansCJKjp-subset-Medium.woff) format("woff"), url(../webfonts/NotoSansCJKjp-subset-Medium.otf) format("opentype"); }

@font-face { font-family: 'Noto Sans CJK JP Bold'; font-style: normal; font-weight: 400; src: local("NotoSansJP-Bold.otf"), url(../webfonts/NotoSansCJKjp-subset-Bold.woff2) format("woff2"), url(../webfonts/NotoSansCJKjp-subset-Bold.woff) format("woff"), url(../webfonts/NotoSansCJKjp-subset-Bold.otf) format("opentype"); }

.feature-head-image { background-image: url(../images/pages/feature/head_image_feature.jpg); }

.plan-list { margin-top: 60px; }

.plan-item { text-align: center; }

.plan-item p, .plan-item small { margin: 0; }

.plan-item h5, .plan-item h6 { font-family: 'Noto Sans CJK JP Bold', sans-serif !important; font-weight: 400; }

.plan-item h5 strong, .plan-item h6 strong { font-family: 'Lato', Lato, sans-serif !important; font-size: 34px; }

.plan-item .plan-logo { height: 130px; }

.plan-item .plan-copy { margin-top: 30px; }

.plan-item .plan-copy h4 { letter-spacing: 0.075em; }

.plan-item .plan-detail { margin-top: 30px; }

.plan-item .plan-detail-title { padding: 12px 0px; }

.plan-item .plan-detail-title p { color: #FFFFFF; font-size: 20px; }

.plan-item .plan-detail-box { border-left: 1px solid #bebebe; border-right: 1px solid #bebebe; border-bottom: 1px solid #bebebe; padding: 30px; }

.plan-item .plan-detail-case p { font-size: 15px; }

.plan-item .plan-detail-current-cost { margin-top: 15px; padding: 20px 0px 30px; background-color: #e6eff1; }

.plan-item .plan-detail-current-cost small { font-size: 15px; }

.plan-item .plan-detail-current-cost p { font-family: 'Noto Sans CJK JP Medium', sans-serif !important; line-height: 1.2; }

.plan-item .plan-detail-current-cost p strong { font-family: 'Lato', Lato, sans-serif !important; font-size: 34px; letter-spacing: 0.015em; margin-left: 0.15em; margin-right: 0.15em; }

.plan-item .plan-detail-current-cost .plan-detail-graph-image { max-width: 200px; margin-left: auto; margin-right: auto; margin-top: 20px; }

.plan-item .plan-detail-change-price { height: 40px; position: relative; }

.plan-item .plan-detail-change-price:after { content: ""; position: absolute; top: 10px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 20px 14px 0 14px; border-color: #bcdfe4 transparent transparent transparent; }

.plan-item .plan-detail-change-price span { position: absolute; overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; font-size: 0; }

.plan-item .plan-detail-new-cost { padding: 15px 10px; }

.plan-item .plan-detail-new-cost p { color: #FFFFFF; font-family: 'Noto Sans CJK JP Medium', sans-serif !important; font-size: 18px; }

.plan-item .plan-detail-new-cost h6 { color: #FFFFFF; font-family: 'Noto Sans CJK JP Medium', sans-serif !important; line-height: 1.2; }

.plan-item .plan-detail-new-cost h6 strong { font-family: 'Lato', Lato, sans-serif !important; font-size: 36px; font-weight: 400; letter-spacing: 0.015em; margin-left: 0.15em; margin-right: 0.15em; }

.plan-item .plan-detail-saving-cost { padding: 10px 0px 15px; background-color: #FFFFFF; margin-top: 20px; }

.plan-item .plan-detail-saving-cost h5 { font-family: 'Noto Sans CJK JP Medium', sans-serif !important; font-size: 24px; letter-spacing: 0.075em; }

.plan-item .plan-detail-saving-cost h5 span.line { display: inline; padding-bottom: 2px; background-image: linear-gradient(to right, rgba(243, 170, 49, 0.4) 0%, rgba(243, 170, 49, 0.4) 100%); background-repeat: repeat-x; background-position: 0 100%; background-size: 100% 6px; }

.plan-item .plan-detail-saving-cost h5 strong { color: #f3aa31; font-family: 'Lato', Lato, sans-serif !important; font-size: 40px; font-weight: 700; margin-left: 5px; margin-right: 5px; }

.plan-item.se100-plan .plan-detail-title, .plan-item.se100-plan .plan-detail-new-cost { background-color: #10abd0; }

.plan-item.se30-plan .plan-detail-title, .plan-item.se30-plan .plan-detail-new-cost { background-color: #41c4d0; }

.plan-note { margin-top: 20px; }

.plan-cost-description { margin-top: 60px; }

@media screen and (max-width: 980px) { .plan-item .plan-detail-current-cost small { font-size: 15px; }
  .plan-item .plan-detail-current-cost p strong { font-size: 32px; }
  .plan-item .plan-detail-new-cost p { font-size: 18px; }
  .plan-item .plan-detail-new-cost h6 strong { font-size: 32px; }
  .plan-item .plan-detail-saving-cost h5 { font-size: 22px; letter-spacing: 0.045em; }
  .plan-item .plan-detail-saving-cost h5 strong { font-size: 36px; } }

@media screen and (max-width: 840px) { .plan-item .plan-logo { height: 110px; }
  .plan-item .plan-detail-box { padding: 20px; }
  .plan-item .plan-detail-new-cost { padding: 15px; } }

@media screen and (max-width: 767px) { .plan-list { margin-top: 40px; }
  .plan-item .plan-logo { height: 100px; }
  .plan-item .plan-copy { margin-top: 15px; }
  .plan-item .plan-copy h4 { letter-spacing: 0.045em; }
  .plan-item .plan-detail { margin-top: 20px; }
  .plan-item .plan-detail-title { padding: 10px 0px; }
  .plan-item .plan-detail-title p { font-size: 18px; }
  .plan-item .plan-detail-box { padding: 20px 10px; }
  .plan-item .plan-detail-case p { font-size: 14px; }
  .plan-item .plan-detail-current-cost { margin-top: 10px; padding: 15px 0px; }
  .plan-item .plan-detail-current-cost small { font-size: 14px; }
  .plan-item .plan-detail-current-cost p strong { font-size: 32px; }
  .plan-item .plan-detail-new-cost { padding: 20px 10px; }
  .plan-item .plan-detail-new-cost p { font-size: 16px; }
  .plan-item .plan-detail-new-cost h6 strong { font-size: 36px; }
  .plan-item .plan-detail-saving-cost { padding: 5px 0px 10px; }
  .plan-item .plan-detail-saving-cost h5 { font-size: 22px; letter-spacing: 0.045em; }
  .plan-item .plan-detail-saving-cost h5 strong { font-size: 38px; margin-left: 4px; margin-right: 4px; }
  .plan-item.se30-plan { margin-top: 40px; }
  .plan-cost-description { margin-top: 40px; } }

@media screen and (max-width: 360px) { .plan-item .plan-detail-case p { font-size: 13px; }
  .plan-item .plan-detail-current-cost p strong { font-size: 30px; }
  .plan-item .plan-detail-new-cost h6 strong { font-size: 34px; }
  .plan-item .plan-detail-saving-cost h5 { font-size: 19px; }
  .plan-item .plan-detail-saving-cost h5 strong { font-size: 36px; margin-left: 2px; margin-right: 2px; } }

.plan-fee-table { border: 1px solid #10abd0; padding: 20px; }

.plan-fee-table .plan-fee-table-group { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; align-items: stretch; }

.plan-fee-table .group-head, .plan-fee-table .group-data { text-align: center; }

.plan-fee-table .group-head h6, .plan-fee-table .group-head p, .plan-fee-table .group-data h6, .plan-fee-table .group-data p { display: block; line-height: 1.2; margin: 0; }

.plan-fee-table .group-head { width: 30%; padding: 15px 0px; background-color: #41c4d0; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 20px; }

.plan-fee-table .group-data { width: 70%; padding-left: 40px; }

.plan-fee-table .group-data .group-data-item { margin-bottom: 20px; position: relative; }

.plan-fee-table .group-data .group-data-item a { display: block; padding: 15px 0px; background-color: #daecef; color: inherit; }

.plan-fee-table .group-data .group-data-item a:hover { opacity: 0.65; }

.plan-fee-table .group-data .group-data-item h6 { margin-bottom: 0.35em; }

.plan-fee-table .group-data .group-data-item span.ic-arrow:before { content: ""; position: absolute; left: -28px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 14px 0 14px 20px; border-color: transparent transparent transparent #bcdfe4; }

.plan-fee-table .ic-plus, .plan-fee-table .ic-plus-pc, .plan-fee-table .ic-plus-sp { position: relative; }

.plan-fee-table .ic-plus:before, .plan-fee-table .ic-plus:after, .plan-fee-table .ic-plus-pc:before, .plan-fee-table .ic-plus-pc:after, .plan-fee-table .ic-plus-sp:before, .plan-fee-table .ic-plus-sp:after { content: ""; position: absolute; bottom: -30px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; width: 40px; height: 40px; }

.plan-fee-table .ic-plus:before, .plan-fee-table .ic-plus-pc:before, .plan-fee-table .ic-plus-sp:before { border-radius: 50%; border: 2px solid #10abd0; background-color: #FFFFFF; }

.plan-fee-table .ic-plus:after, .plan-fee-table .ic-plus-pc:after, .plan-fee-table .ic-plus-sp:after { background-image: url(../images/common/ic_plus.svg); background-position: center; background-repeat: no-repeat; background-size: 20px 20px; }

.plan-fee-table .ic-plus-sp:before, .plan-fee-table .ic-plus-sp:after { display: none; }

@media screen and (max-width: 767px) { .plan-fee-table { padding: 10px; }
  .plan-fee-table .plan-fee-table-group:last-child .group-data .group-data-item:last-child { margin-bottom: 0px; }
  .plan-fee-table .group-head, .plan-fee-table .group-data { width: 100%; }
  .plan-fee-table .group-head { padding: 10px 5px; margin-bottom: 10px; }
  .plan-fee-table .group-data { padding-left: 20px; }
  .plan-fee-table .group-data .group-data-item { margin-bottom: 20px; }
  .plan-fee-table .group-data .group-data-item a { padding: 10px 5px; }
  .plan-fee-table .group-data .group-data-item a:hover { opacity: 1.0; }
  .plan-fee-table .group-data .group-data-item span.ic-arrow:before { left: -20px; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent #bcdfe4; }
  .plan-fee-table .ic-plus-pc:before, .plan-fee-table .ic-plus-pc:after { display: none; }
  .plan-fee-table .ic-plus:before, .plan-fee-table .ic-plus:after, .plan-fee-table .ic-plus-sp:before, .plan-fee-table .ic-plus-sp:after { display: block; width: 36px; height: 36px; }
  .plan-fee-table .ic-plus:after, .plan-fee-table .ic-plus-sp:after { background-size: 16px 16px; }
  .plan-fee-table .ic-plus:before, .plan-fee-table .ic-plus:after { bottom: -26px; }
  .plan-fee-table .ic-plus-sp { padding-bottom: 25px; }
  .plan-fee-table .ic-plus-sp:before, .plan-fee-table .ic-plus-sp:after { bottom: 4px; } }

.plan-fee-detail .detail-block { margin-top: 80px; }

.plan-fee-detail .detail-block h5 { margin-bottom: 20px; }

.plan-fee-detail .content-item-note p, .plan-fee-detail .graph-note p { margin: 0.75em 0px 0.5em; }

.basic-charge-price-list .content-item { display: none; }

.basic-charge-price-list .content-item.selected { display: block; }

.purchase-cost-detail-point { margin-top: 50px; }

.purchase-cost-detail-graph .graph-head { position: relative; }

.purchase-cost-detail-graph .graph-head.form-item { border-bottom: none; margin-bottom: 0; }

.purchase-cost-detail-graph .graph-head .graph-name { padding-right: 210px; padding-top: 15px; line-height: 1.45; }

.purchase-cost-detail-graph .graph-head .graph-switcher { position: absolute; right: 0; top: 0; width: 200px; }

.purchase-cost-detail-graph .graph-content { margin-top: 10px; }

.purchase-cost-detail-graph .graph-content .graph-item { border: 1px solid #bebebe; }

.purchase-cost-detail-graph .graph-additional { margin-top: 40px; padding: 20px; background-color: #f3f3f3; }

.purchase-cost-detail-graph .graph-additional p { margin: 0; }

@media screen and (max-width: 767px) { .plan-fee-detail .detail-block { margin-top: 40px; }
  .plan-fee-detail .detail-block h5 { margin-bottom: 10px; }
  .purchase-cost-detail-point { margin-top: 40px; }
  .purchase-cost-detail-graph .graph-head { min-height: 44px; }
  .purchase-cost-detail-graph .graph-head.form-item { padding-bottom: 10px; }
  .purchase-cost-detail-graph .graph-head .graph-name { padding-right: 140px; padding-top: 0px; }
  .purchase-cost-detail-graph .graph-head .graph-switcher { width: 130px; }
  .purchase-cost-detail-graph .form-item select { font-size: 16px; } }

.energy-plant-section { background-image: url(../images/pages/feature/plant_bg_map.png); background-position: center 40px; background-repeat: no-repeat; background-size: contain; }

.energy-plant-list { margin-top: 60px; }

.energy-plant-item .plant-image img { width: 100%; height: auto; }

.energy-plant-item .plant-info { padding: 15px 20px; background-color: #FFFFFF; }

.energy-plant-item .plant-info p { color: #0f2c64; margin: 0; }

.energy-plant-item .plant-name { min-height: 50px; }

.energy-plant-item .plant-name p { font-family: 'Noto Sans CJK JP Medium', sans-serif !important; line-height: 1.5; }

.energy-plant-item .plant-output p { font-size: 14px; line-height: 1.2; }

.energy-plant-item .plant-output p span { font-family: 'Lato', Lato, sans-serif !important; font-size: 20px; font-weight: 700; letter-spacing: 0.125; }

.energy-plant-item .plant-output p strong { font-family: 'Lato', Lato, sans-serif !important; font-size: 36px; font-weight: 700; margin-left: 2px; margin-right: 2px; }

@media screen and (max-width: 840px) { .energy-plant-item .plant-info { padding: 15px 15px; }
  .energy-plant-item .plant-name p { font-size: 15px; } }

@media screen and (max-width: 767px) { .energy-plant-list { margin-top: 30px; }
  .energy-plant-list .energy-plant-item { max-width: 420px; margin-left: auto; margin-right: auto; margin-bottom: 20px; }
  .energy-plant-list .energy-plant-item:last-child { margin-bottom: 0; }
  .energy-plant-item .plant-info { padding: 15px 10px; } }

@media screen and (max-width: 640px) { .energy-plant-list .energy-plant-item { max-width: 280px; }
  .energy-plant-item .plant-name { min-height: 0; }
  .energy-plant-item .plant-name p { font-size: 14px; }
  .energy-plant-item .plant-output p span { font-size: 18px; }
  .energy-plant-item .plant-output p strong { font-size: 30px; } }

.energy-power-image { max-width: 1440px; margin-left: auto; margin-right: auto; }

.energy-power-image h4.hide { position: absolute; overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; font-size: 0; }

.energy-power-image img { width: 100%; height: auto; }

.energy-power-description { margin-top: 40px; }

/**
 * feature ブランチ対応 ここから
 */
@media screen and (max-width: 980px) {
  .plan-item .plan-logo {
    height: auto;
  }
  .plan-item .plan-logo img {
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .plan-item .plan-logo {
    height: 100px;
  }
  .plan-item .plan-logo img {
    height: 100%;
  }
}
.plan-item .plan-detail-title {
  padding: 12px 10px;
}
@media screen and (max-width: 767px) {
  .plan-item .plan-detail-title {
    padding: 10px 0px;
  }
}
.plan-item.debut-plan .plan-detail-title,
.plan-item.debut-plan .plan-detail-new-cost {
  background-color: #0097A7;
}
@media screen and (max-width: 767px) {
  .plan-item.se100-plan {
    margin-top: 40px;
  }
}
.col60 > .plan-item.size1of3 {
  width: calc((100% - 100px) / 3);
  margin-left: 20px;
}
.col60 > .plan-item.size1of3:first-child {
  margin-left: 60px;
}
@media screen and (max-width: 980px) {
  .col60 > .plan-item.size1of3:first-child {
    margin-left: 30px;
  }
}
@media screen and (max-width: 980px) {
  .col60 > .plan-item.size1of3 {
    width: calc((100% - 70px) / 3);
  }
}
@media screen and (max-width: 767px) {
  .col60 > .plan-item.size1of3 {
    width: 100%;
    margin-left: 0;
  }
  .col60 > .plan-item.size1of3:first-child {
    margin-left: 0;
  }
}

.energy-plant-list.col40 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: -20px;
}
.energy-plant-list.col40 > .region {
    float: none;
    margin-top: 40px;
}
@media screen and (max-width: 768px) {
    .energy-plant-list.col40 > .region {
        margin-top: 20px;
    }
}
@media screen and (max-width: 767px) {
    .energy-plant-list.col40 {
        margin-top: 30px;
    }
    .energy-plant-list.col40 > .region {
        margin-top: 0;
    }
}
/**
 * feature ブランチ対応 ここまで
 */