/* --------------------------------------------------------------------------
  CONTAINER
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .graph-status__container {
    margin-right: auto;
    margin-top: calc(48 / var(--font-size)* 1rem);
    max-width: calc(980 / var(--font-size)* 1rem);
  }
}

@media all and (max-width: 767px) {
}

/* ==========================================================================
  INDEX
========================================================================== */
/* 終了メッセージ */
.sec_finish__container {
  display: flex;
  justify-content: space-between;
  background-color: #FAF4ED;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}
@media all and (min-width: 768px), print {
  .sec_finish {
    margin-bottom: 3rem;
  }
  .sec_finish__container {
    background-color: var(--color-attention_1000);
    padding: 1rem;
    border-radius: 1.25rem;
  }
  .sec_finish-txt {
    text-align: center;
    width: 100%;
  }
  .sec_finish-txt__label {
    font-size: 1.125rem;
    font-weight: bold;
    color: #fff;
    line-height: 2;
  }
}
@media all and (max-width: 767px), print {
  .sec_finish {
    margin: 0 calc((15 / 14)*1rem) calc((30 / 14)*1rem);
  }
  .sec_finish__container {
    background-color: var(--color-attention_1000);
    padding: 1rem;
    border-radius: calc((10 / 14)*1rem);
  }
  .sec_finish-txt {
    text-align: center;
    width: 100%;
  }
  .sec_finish-txt__label {
    font-size: 0.875rem;
    font-weight: bold;
    color: #fff;
    line-height: 2;
  }
}
/* 概算値 */
.graph-estimate__container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: min(16px,calc((16 / 14) * 1rem));
  background-color: var(--sub-color-03);
  max-width: calc(980 / var(--font-size)* 1rem);
  margin-right: auto;
}
.graph-estimate__box:first-child {
  flex-grow: 1;
}
@media all and (min-width: 768px), print {
  .graph-estimate__container {
    border-radius: calc((20 / 14)*1rem);
    padding-top: calc((30 / 14)*1rem);
    padding-bottom: calc((30 / 14)*1rem);
    padding-left: min(54px,calc((54 / 14)*1rem));
    padding-right: min(54px,calc((54 / 14)*1rem));
  }
  .graph-estimate__box-heading {
    font-size: calc(24 / var(--font-size)* 1rem);
    font-weight: 700;
    line-height: 1.5;
  }
  .graph-estimate__box-heading span {
    font-size: min(20px,calc((20 / 14)*1rem));
  }
  .graph-estimate__box-heading + *{
    margin-top: calc(12 / var(--font-size)* 1rem);
  }
  .graph-estimate__box-text {
    font-size: calc((12 / 14)*1rem);
    line-height: 1.6;
    padding-left: 1em;
    text-indent: -1em;
    margin-top: 0.5rem;
  }
  .graph-estimate__box-text + .graph-estimate__box-text {
    margin-top: 0;
  }
  .graph-estimate-rate .number {
    font-size: calc(72 / var(--font-size)* 1rem);
    line-height: 1;
  }
  .graph-estimate-rate .symbol {
    font-size: calc(32 / var(--font-size)* 1rem);
  }
  .graph-estimate-today {
    font-size: calc(var(--text-size-xs) / var(--font-size)* 1rem);
    margin-top: calc(12 / var(--font-size)* 1rem);
  }
}
@media all and (max-width: 767px), print {
  .graph-estimate{
  }
  .graph-estimate__box:nth-child(2){
    padding-top: calc(12 / var(--font-size) * 1rem);
  }
  .graph-estimate__container {
    border-radius: calc((10 / 14)*1rem);
    padding-top: calc((24 / 14)*1rem);
    padding-bottom: calc((24 / 14)*1rem);
    padding-left: calc((15 / 14)*1rem);
    padding-right: calc((15 / 14)*1rem);
  }
  .graph-estimate__box-heading {
    font-size: calc(18 / var(--font-size) * 1rem);
    line-height: 1.422;
  }
  .graph-estimate__box-heading span {
  }
  .graph-estimate__box-text{
    font-size: calc((10 / 14)*1rem);
    line-height: 1.6;
    margin-top: 0.5rem;
  }
  .graph-estimate__box-text + .graph-estimate__box-text {
    margin-top: 0;
  }
  .graph-estimate-rate{
    text-align: center;
  }
  .graph-estimate-rate .number {
    font-size: min(44px,calc((44 / 14)*1rem));
    line-height: 1;
    white-space: nowrap;
  }
  .graph-estimate-rate .symbol {
    font-size: min(28px,calc((28 / 14)*1rem));
  }
  .graph-estimate-today {
    font-size: min(10px,calc((10 / 14)*1rem));
    text-align:right;
    margin-top: calc(15 / var(--font-size) * 1rem);
  }
}

/* グラフ */
.graph-area{
  margin-bottom: calc(64 / var(--font-size) * 1rem);
}

.graph-area__box{
  position: relative;
}
.graph-area__body-xScale{
  position: absolute;
  width: 100%;
  background-color: #fff;
  z-index: 10;
}
.graph-area__body-xScale_list{
  position: absolute;
  display: flex;
  height: 100%;
  width: 100%;
}
.graph-area__body-xScale_list-item{
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
}
.graph-area__body{
  position: relative;
  overflow-x: auto;
  z-index: 20;
}
.graph-area__body-entity{
  overflow: auto;
  position: absolute;
  left: 0;
  height:100%;
}
.graph-area__footer{
  max-width: 980px;
  width: 100%;
}
.graph-area__footer p{
  font-size: calc((12 / 14)*1rem);
  line-height: 1.8;
}

.graph-area__usage-label__list{
  display: flex;
  column-gap: 2rem;
}
.graph-area__usage-label__list-item{
  padding-left: 28px;
  position: relative;
}
.graph-area__usage-label__list-item::before{
  content: "";
  width: 20px;
  height: 4px;
  position: absolute;
  top: calc((100% - 4px)/2);
  left: 0;
}
.graph-area__usage-label__list-item::before{
  background-color: var(--main-eco);
}
.page-graph-before .graph-area__usage-label__list-item::before{
  background-color: #acacac;
}
@media all and (min-width: 768px), print {
  .graph-area_container {
    margin-right: auto;
    margin-top: calc(48 / var(--font-size) * 1rem);
    max-width: calc(980 / var(--font-size) * 1rem);
  }
  .graph-area__header{
    border-color:var(--main-color);
    border-top-width: 4px;
    border-top-style: solid;
    padding-top: 1rem;
    padding-bottom: 1rem;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .graph-area__title{
    margin-bottom: calc(20 / var(--font-size) * 1rem);
  }
  .graph-area__header-heading{
    font-size: min(24px,calc((24 / 14)*1rem));
    line-height: 1.5;
  }
  .graph-area_lead {
    max-width: calc(980 / var(--font-size) * 1rem);
    width: 100%;
    margin: 0 auto;
    padding-bottom: calc(20 / var(--font-size) * 1rem);
  }
  .graph-area_lead-txt {
    display: flex;
    font-size: calc(12 / var(--font-size) * 1rem);
  }
  .graph-area_lead-txt__ico{
    flex-shrink: 0;
  }
  .graph-area_lead-txt__label {
    margin-left: calc(4 / var(--font-size) * 1rem);
  }
  .graph-area_message {
    max-width: calc(800 / var(--font-size) * 1rem);
    width: 100%;
    margin: 0 auto;
    padding: calc((12 / 14)*1rem);
    border: var(--color-attention_1000) calc((4 / 14)*1rem) solid;
    text-align: center;
    margin-bottom: calc((20 / 14)*1rem);
  }
  .graph-area_message-txt {
    font-size: calc((18 / 14)*1rem);
    font-weight: bold;
    color: var(--color-attention_1000);
  }
  .graph-area__usage{
    width: 980px;
    margin: 28px auto 0;
  }
  .graph-area__header-today{
    font-size: 1rem;
    line-height: 2;
  }
  .graph-area__box{
    width: calc(980 / var(--font-size) * 1rem);
    margin: calc(28 / var(--font-size) * 1rem) auto 0;
  }
  .graph-area__body-xScale{
    height: 25.6px;
    bottom: -11px;
  }
  .graph-area__body-xScale_list-item{
    width: calc(56 / var(--font-size) * 1rem);
    text-align: center;
    position: relative;
    font-size: calc(16 / var(--font-size) * 1rem);
  }
  .graph-area__body-xScale_list-item:first-child{
    margin-left: calc(120 / var(--font-size)* 1rem);
  }
  .graph-area__body-xScale_list-item:nth-child(2){
    margin-left: calc(57 / var(--font-size) * 1rem);
  }
  .graph-area__body-xScale_list-item:nth-child(3){
    margin-left: calc(57 / var(--font-size) * 1rem);
  }
  .graph-area__body-xScale_list-item:nth-child(4){
    margin-left: calc(57 / var(--font-size) * 1rem);
  }
  .graph-area__body-xScale_list-item:nth-child(5){
    margin-left: calc(57 / var(--font-size) * 1rem);
  }
  .graph-area__body-xScale_list-item:nth-child(6){
    margin-left: calc(57 / var(--font-size) * 1rem);
  }
  .graph-area__body-xScale_list-item:nth-child(7){
    margin-left: calc(57 / var(--font-size) * 1rem);
  }
  .graph-area__body-xScale_list-item:nth-child(8){
    margin-left: calc(57 / var(--font-size) * 1rem);
  }
  .graph-area__body-xScale_list-item:nth-child(9){
    margin-left: calc(57 / var(--font-size) * 1rem);
    margin-right: calc(-23 / var(--font-size) * 1rem);
  }
  .graph-area__body-xScale_list-item::after {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #6B6B6B;
    position: absolute;
    left:0;
    right:0;
    margin:0 auto;
    top: -27px;
    border-radius: 50%;
  }
  .graph-area__body-xScale_list-item:last-child::after{
    /* right: 4px; */
  }
  .xScale--sp{
    display: none !important;
  }
  .graph-area__body{
    height: calc(470 / var(--font-size) * 1rem);
    width: calc(980 / var(--font-size) * 1rem);
    margin: 0 auto;
  }
  .graph-area__body-entity{
    width: 100%;
  }
  .graph-area__body-canvas{
    height: 460px;
  }
  .graph-area__footer{
    margin-top: calc(40 / var(--font-size) * 1rem);
    margin-left: auto;
    margin-right: auto;
  }
  .graph-area__footer p{
    font-size: calc(var(--text-size-xs) / var(--font-size) * 1rem);
  }
}
@media all and (max-width: 767px), print {
  .graph-area_container{
    margin-top: calc((28 / 14)*1rem);
  }
  .graph-area__header{
    border-top: 2px var(--main-color) solid;
    padding-top: calc((9 / 14)*1rem);
    padding-bottom: 20px;
  }
  .graph-area__header-heading{
    font-size: calc((18 / 14)*1rem);
    line-height: 1.3;
  }
  .c-page-heading__label{
    font-size:calc(18 / var(--font-size) * 1rem);
  }
  .graph-area__title{
    margin-bottom: calc(20 / var(--font-size) * 1rem);
  }
  .graph-area_lead {
    margin-bottom: 2rem;
  }
  .graph-area_lead-txt {
    font-size: calc(12 / var(--font-size) * 1rem);
    display: flex;
  }
  .graph-area_lead-txt__ico{
    flex-shrink: 0;
  }
  .graph-area_lead-txt__label {
    margin-left: calc(4 / var(--font-size) * 1rem);
  }
  .graph-area_message {
    padding: calc((12 / 14)*1rem);
    border: var(--color-attention_1000) calc((3 / 14)*1rem) solid;
    text-align: center;
    margin-bottom: calc((30 / 14)*1rem);
  }
  .graph-area_message-txt {
    font-size: calc((14 / 14)*1rem);
    font-weight: bold;
    color: var(--color-attention_1000);
  }
  .graph-area__usage{
    padding-top: calc((9 / 14)*1rem);
    padding-bottom: 20px;
    margin: 0 calc((15 / 14)*1rem);
  }
.graph-area__header-today{
    display: none;
  }
  .graph-comment {
    margin-bottom: 8px;
  }
  .graph-area__box{
    margin-bottom: 8px;
    width: 100%;
  }
  .graph-area__body-xScale {
    height: 75px;
    bottom: -50px;
  }
  .graph-area__body-xScale_list{
    padding: 0 14px 0 0;
    justify-content: flex-end;
  }
  .graph-area__body-xScale_list-item{
    width: calc((100% - 54px) / 9);
    display: flex;
    writing-mode: vertical-rl;
    text-orientation: upright;
    position: relative;
  }
  .graph-area__body-xScale_list-item .u-text-align-combine{
    transform: translateX(-1.4px);
  }
  .graph-area__body-xScale_list-item::after {
    content: "";
    width: 4px;
    height: 4px;
    background-color: #6B6B6B;
    position: absolute;
    right: 5px;
    top: -16px;
    border-radius: 50%;
  }
  @media all and (max-width: 410px), print {
    .graph-area__body-xScale_list-item:last-child{
      right: -4px;
    }
    .graph-area__body-xScale_list-item:last-child::after{
      right: 4px;
    }
  }
  .xScale--pc{
    display: none !important;
  }
  .graph-area__body{
    height: 320px;
    width: 90vw;
    margin: 0 auto 50px;
  }
  .graph-area__body-entity{
    width: 100%;
  }
  .graph-area__body-canvas{
    height: 320px;
  }
  .graph-area__footer{
    padding-left: calc((15 / 14)*1rem);
    padding-right: calc((15 / 14)*1rem);
  }
  .graph-area__footer p{
    font-size: calc((10 / 14)*1rem);
  }
}

/* 推移リンク */
.sec_other-transition_container{
  max-width: 980px;
  width: 100%;
}
.sec_other-transition__body_list{
  display: flex;
  justify-content: center;
}
@media all and (min-width: 768px), print {
  .sec_other-transition_container{
    margin-top: calc((80 / 14)*1rem);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: calc((52 / 14)*1rem);
  }
  .sec_other-transition__body-heading{
    font-size: min(28px,calc((28 / 14)*1rem)) !important;
  }
  .sec_other-transition__body_list{
    column-gap: calc((40 / 14)*1rem);
  }
  .sec_other-transition__body_list-item{
    max-width: 470px;
    width: 100%;
  }
  .sec_other-transition__body_list-item .c-button-text_label{
    font-size: min(18px,calc((18 / 14)*1rem));
  }
}
@media all and (max-width: 767px), print {
  .sec_other-transition_container{
    margin-top: calc((36 / 14)*1rem);
    padding-left: calc((15 / 14)*1rem);
    padding-right: calc((15 / 14)*1rem);
    padding-bottom: calc((25 / 14)*1rem);
  }
  .sec_other-transition__body-heading{
    font-size: min(19px,calc((19 / 14)*1rem)) !important;
  }
  .sec_other-transition__body_list{
    column-gap: 8px;
  }
  .sec_other-transition__body_list-item{
    width: calc(50% - 4px);
  }
  .sec_other-transition__body_list-item .c-button_body{
    padding: calc((16 / 14)*1rem) 0;
  }
  .sec_other-transition__body_list-item .c-button-text_label{
    font-size: min(12px,calc((12 / 14)*1rem));
  }
}

#graph_tekkyokasan_modal{
  background-color: var(--color-white);
}

@media all and (min-width: 768px), print {
  #graph_tekkyokasan_modal{
    padding: calc(32 / var(--font-size)* 1rem) calc(48 / var(--font-size)* 1rem);
    border-radius: calc(10 / var(--font-size)* 1rem);
  }
}
@media all and (max-width: 767px), print {
  #graph_tekkyokasan_modal{
    padding: calc(32 / var(--font-size)* 1rem) calc(20 / var(--font-size)* 1rem) calc(48 / var(--font-size)* 1rem) calc(20 / var(--font-size)* 1rem);
    border-radius: calc(10 / var(--font-size)* 1rem);
  }
}

/* --------------------------------------------------------------------------
  改行
-------------------------------------------------------------------------- */
.u-br::before {
  content: "\A" ;
  white-space: pre ;
}
@media all and (min-width: 768px), print {
  .u-br-sp {
    display: none;
  }
}
@media all and (max-width: 767px), print {
  .u-br-sp::before {
    content: "\A" ;
    white-space: pre ;
  } 
}

@media all and (min-width: 768px), print {
  .status-table__text .in {
    display: inline-block;
    position: relative;
  }
  .status-table__text sup {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: -1.25rem;
  }
}

@media all and (max-width: 767px), print {
  .status-table__text .in {
    display: inline-block;
    position: relative;
  }
  .status-table__text sup {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: -1.25rem;
  }
}