/* 
共通
*/

html,
body {
  overflow: hidden; /* スクロールバーを非表示にする */
}

body {
  font-family: "Noto Sans JP", sans-serif, "Helvetica Neue", "Helvetica",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo",
    sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #141414;
  letter-spacing: 0.04em;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.caution {
  color: #d52103;
}

.text-link {
  text-decoration: underline;
  color: #d52103;
}

.button {
  display: block;
  width: 100%;
  padding: 20px;
  margin: 0 auto;
  text-align: center;
  font-weight: 700;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer; /*hrefが入らない場合*/
  transition-duration: 0.2s;
}

.button-primary {
  color: #fff;
  background-color: #d52103;
}

@media (hover: hover) {
  .button-primary:hover {
    background-color: #bc1d03;
  }
}

.button-secondary {
  color: #d52103;
  background-color: #fff;
  border: #d52103 1px solid;
}

@media (hover: hover) {
  .button-secondary:hover {
    background-color: #fbefee;
  }
}

.note {
  font-size: 14px;
  line-height: 1.7;
  padding-left: 1.2em;
  text-indent: -1.2em;
  letter-spacing: 0.02em;
}

.note > li {
  margin-top: 4px;
}

.pc,
.pc-br {
  display: block;
}

.tb,
.tb-br,
.sp,
.sp-br {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .pc,
  .pc-br {
    display: none;
  }

  .tb,
  .tb-br {
    display: block;
  }
}

/* テーブル */

table,
tr,
th,
td {
  border: #d8d8db 1px solid;
  padding: 8px;
  font-weight: 400;
  vertical-align: middle;
}

table {
  table-layout: fixed;
  width: 100%;
  margin-top: 24px;
}

tr {
  height: 80px;
}

th {
  background-color: #fafafa;
}

/*
リザルト
*/

.result__section {
  padding: 0 40px;
  margin-top: 40px;
}

.result__column {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}

.result__column-item {
  display: flex;
  flex: 1;
  width: 100%;
  gap: 32px;
}

.alert-image {
  display: none;
  width: 80px;
}

/* 警戒レベルごとに1つだけ表示 */
.alert-level1 > div > .alert-level1-img,
.alert-level2 > div > .alert-level2-img,
.alert-level3 > div > .alert-level3-img,
.alert-level4 > div > .alert-level4-img {
  display: block;
}

.result__value-wrap {
  display: flex;
  flex-direction: column;
  width: calc(50% - 12px); /* gapを引いて調整 */
}

.result__value-wrap--alert {
  flex: 1;
}

.result__value-wrap--price {
  flex: 2;
}

.result__column-item-inner {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 16px;
}

.result__column-item-inner:nth-child(2) {
  margin-top: 24px;
}

.result__label {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 12px;
}
.result__label-small {
  font-size: 14px;
  margin-bottom: 8px;
}
.result__value {
  font-size: 76px;
  font-weight: 700;
  line-height: 1;
  color: #d52103;
  margin-top: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 必要に応じて */
}
.result__value-disabled {
  color: #757578;
}
.result__value > span {
  font-size: 16px;
  padding-left: 8px;
  color: #6c6a61;
}
.result__value-small {
  font-size: 30px;
  font-weight: 500;
  margin-top: -4px;
}
.result__value-small > span {
  font-size: 14px;
  padding-left: 4px;
}

@media only screen and (max-width: 1024px) {
  .result__section {
    padding: 0 16px;
    margin-top: 24px;
  }

  .result__column {
    display: block;
    margin-bottom: 32px;
  }

  .result__column-item {
    width: 100%;
    gap: 24px;
    margin-bottom: 24px;
  }

  .result__column-item > div > img {
    width: 56px;
  }

  .result__column-item:nth-child(2) {
    margin-top: 24px;
  }

  .result__column-item-inner {
    row-gap: 20px;
  }

  .result__value-wrap {
    width: initial;
  }

  .result__value-wrap--alert {
    flex: initial;
  }

  .result__value-wrap--price {
    flex: initial;
  }

  .result__label {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .result__label-small {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 8px;
  }
  .result__value {
    font-size: 56px;
    margin-top: -2px;
  }
  .result__value > span {
    font-size: 14px;
  }
  .result__value-small {
    font-size: 28px;
    margin-top: -5px;
  }
  .result__value-small > span {
    font-size: 14px;
  }
}

/* 
リザルト - グラフ
*/

.result__tab {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}

.tab-item {
  position: relative;
}

.tab-item > span {
  font-size: 12px;
  vertical-align: top;
}

input[type="radio"] {
  opacity: 0;
  position: absolute;
}

input:disabled + .tab-item {
  color: #949497;
  background-color: #fff;
  border: #949497 1px solid;
  cursor: inherit;
}

input:checked + .tab-item {
  background-color: #d52103;
  color: #fff;
  transition: none;
}

input:checked + .tab-item:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -12px;
  border: 10px solid transparent;
  border-top: 10px solid #d52103;
}

@media only screen and (max-width: 768px) {
  .result__tab {
    gap: 12px;
  }
  .button-tab {
    padding: 16px;
  }
}

/* 
chart.js
*/

/* 配置の基準となるラッパーブロック; 背景色も設定する */
.result__chart-wrap {
  margin: 24px 0 16px;
  background-color: #fff;
}

.result__chart {
  position: relative;
}

/* スクロール可能グラフを囲む div */
.result__chart > div {
  position: relative;
  overflow-x: scroll;
}

/* Y軸イメージコピー用 canvas */
.result__chart > canvas {
  position: absolute; /* これにより、上の div と重なる位置に canvas が配置される */
  left: 0;
  top: 0;
  background-color: #fff; /* ここをコメントアウトすると、背景色が透明になるので、Y軸を透かしてグラフ部分が見えるようになる */
}

.result__chart-label {
  font-size: 12px;
  color: #787878;
}

.result__chart-label-yen {
  text-align: left;
  margin-left: 6px;
  margin-bottom: 6px;
}

.result__chart-label-time {
  text-align: center;
  margin-top: 8px;
}

@media only screen and (max-width: 768px) {
  .result__chart-label-time {
    margin-top: 0;
  }
}

/*
アラート
*/

.alert__section {
  padding: 0 40px;
  margin-top: 40px;
}

.alert__wrap {
  margin: 0 auto;
}

.alert__heading {
  font-size: 20px;
  font-weight: 700;
}

.alert__text {
  margin-top: 8px;
}

.th-image {
  width: 190px;
}

.td-image > img {
  display: block;
  width: 64px;
  margin: 0 auto;
}

.alert__table {
  max-width: 520px;
  margin-bottom: 12px;
}

.alert__tr-level1 {
  background-color: #f1f7e3;
}

.alert__tr-level3 {
  background-color: #fff9e9;
}

.alert__tr-level4 {
  background-color: #fce4e4;
}

@media only screen and (max-width: 768px) {
  .alert__section {
    padding: 0 16px;
    margin-top: 24px;
  }

  table {
    font-size: 14px;
    line-height: 1.5;
  }
  .th-image {
    width: inherit;
  }
  .alert__table {
    margin-bottom: 16px;
  }
}

/*
時間別単価表
*/

.price__section {
  padding: 0 40px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.price__wrap {
  margin: 0 auto;
}

.price__heading {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  /* transition: max-height 0.4s ease; */
}

.accordion-content.open {
  max-height: 100%;
  border-bottom: 1px solid #d8d8db;
  margin-bottom: 50px;
}

.accordion-button {
  position: relative;
  border-top: 1px solid #d8d8db;
  border-bottom: 1px solid #d8d8db;
  width: 100%;
  font-weight: 400;
  padding: 24px 0;
  cursor: pointer;
}

.accordion-button[aria-expanded="true"] {
  border-bottom: 0;
}

.accordion-button[aria-expanded="false"]::after {
  position: absolute;
  top: 34px;
  right: 24px;
  display: block;
  width: 14px;
  height: 14px;
  margin: auto;
  content: "";
  transform: translateY(-50%) rotate(135deg);
  border-top: 2px solid #1c1c1c;
  border-right: 2px solid #1c1c1c;
}

.accordion-button[aria-expanded="true"]::after {
  position: absolute;
  top: 34px;
  right: 24px;
  display: block;
  width: 14px;
  height: 14px;
  margin: auto;
  content: "";
  transform: translateY(0) rotate(315deg);
  border-top: 2px solid #1c1c1c;
  border-right: 2px solid #1c1c1c;
}

@media (hover: hover) {
  .accordion-button:hover {
    background-color: #fafafa;
  }
}

.price__column {
  display: flex;
  gap: 40px;
  margin-top: -24px;
  margin-bottom: 40px;
}

.price__column-item-caption {
  font-size: 14px;
}

.price__target {
  font-weight: 700;
}

@media only screen and (max-width: 768px) {
  .price__section {
    padding: 0 16px;
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .price__column {
    gap: 16px;
  }
  .price__column-item-caption {
    font-size: 12px;
  }
}