/*歴史*/
#structure h4 {
  border: none;
  text-align: center;
  line-height: 140%;
  margin-bottom: 2em;
}
.history_box {
  padding-left: 32%;
  background-repeat: no-repeat;
  background-size: 30%;
}

.history_box h4 span {
  font-size: 50%;
  letter-spacing: 0.1em;
  font-weight: 300;
  margin-left: 0.5em;
}

.history1 {
  background-image: url(../../common/images/charm/history1.png);
}

.history2 {
  background-image: url(../../common/images/charm/history2.png);
}

.history3 {
  background-image: url(../../common/images/charm/history3.png);
}

.history4 {
  background-image: url(../../common/images/charm/history4.png);
}

/*仕組み・構造*/
.structure_box ul {
  margin-top: 2em;
  justify-content: space-between;
}

.structure_box li {
  margin: 1em 0 0 0;
}

.structure_box li span {
  display: block;
  font-weight: bold;
}

/*メンテナンス */
.half_ul {
  justify-content: space-between;
  flex-wrap: wrap;
}

.half_ul li {
  width: 48%;
  border-bottom: 1px solid #555;
  padding-bottom: 1em;
}

.border_bef {
  margin: 1em 2% 1em 0;
  border-right: 1px solid #555;
  padding-right: 2%;
  width: 50%;
}
.border_aft {
  width: 48%;
}
.border_aft div {
  border-bottom: 1px solid #555;
  padding-bottom: 0.5em;
}
.border_aft div:last-child {
  border: unset;
}

.structure_box h5 {
  text-align: center;
  margin: 0;
}
.border_aft h5 {
  margin: 1em 0 1em 0;
}

.r_text_det {
  font-size: 80%;
  text-align: right;
  margin-right: -0.7em;
}

.lb_bg {
  position: absolute;
  bottom: 0vw;
  z-index: 0;
}

.history_bg span,
.structure_bg span,
.mainte_bg span {
  background-repeat: no-repeat;
}
.history_bg span {
  background-image: url(../../common/images/charm/his_logo.svg);
  padding-left: 1.7em;
}

.structure_bg span {
  background-image: url(../../common/images/charm/stru_logo.svg);
  padding-left: 2.2em;
}
.mainte_bg span {
  background-image: url(../../common/images/charm/mente_logo.svg);
  padding-left: 1.7em;
}
/******************************************************/
.charm_fbg {
  background: #5a9f4d;
  background-image: url(../../common/images/charm/foot_bg.svg);
}

/* --- PC用タブ --- */
.tab-switch-chrm {
  --tab-color: #49566a;
  display: flex;
  justify-content: center;
  gap: 5px;
  max-width: 800px;
  margin: auto;
}

.tab-switch-chrm > label {
  flex: 1 1 auto;
  padding: 0.7em 1em;
  background-color: #f2f3f4;
  color: #999;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.tab-switch-chrm input {
  display: none;
}

.tab-switch-chrm > label:hover,
.tab-switch-chrm input:checked + span {
  background-color: var(--tab-color);
  color: #fff;
}

/* --- スマホ用プルダウン --- */
.tab-select-chrm {
  display: none;
  max-width: 800px;
  margin: 1em auto;
}

.tab-select-chrm select {
  width: 100%;
  padding: 0.5em;
}

/* --- コンテンツ共通 --- */
.tab-contents-chrm {
  max-width: 800px;
  margin: auto;
  padding: 1.5em 1em;
}

.tab-pane-chrm {
  display: none;
}

.tab-pane-chrm.active {
  display: block;
}

/* --- レスポンシブ切替 --- */
@media (max-width: 768px) {
  .tab-switch-chrm {
    display: none;
    /* スマホではタブを隠す */
  }

  .tab-select-chrm {
    display: block;
    /* スマホではプルダウンを表示 */
  }
}

/***********************************************************************/

/* --- レスポンシブ切替 Mobile--- */
@media screen and (max-width: 480px) {
  .history_box {
    padding-left: 0;
    margin-top: 5em;
  }
  .history1 {
    background-position: center top;
    padding-top: 40vw;
    background-size: 70%;
  }
  .history2,
  .history3,
  .history4 {
    background-position: center;
    padding-top: 0vw;
    background-size: 90%;
  }
  .tab-content-charm h2 {
    width: 100vw;
    display: block;
    left: -1em;
    padding: 0.5em 0 0 1em;
  }
  .border_bef {
    width: 100%;
    margin: 0;
    border: unset;
    padding-right: 0;
  }
  .tab-content-charm_box h4 {
    font-size: 160%;
    position: relative;
    text-align: left;
    margin-bottom: 1.4em;
  }
  .history_box h4 span {
    display: block;
    position: absolute;
    right: 0;
    bottom: -2.2em;
  }
  .structure_box h5 {
    font-size: 140%;
    text-align: left;
  }
  .structure_box li span {
    font-size: 120%;
  }
  .structure_bg span {
    padding-left: 2.5em;
  }
  .border_aft {
    width: 100%;
    margin-top: 5em;
  }
  .tab-content-charm_box h5 span,
  .tab-content-set_box h5 span {
    margin: 0 0em;
  }
  .r_text_det {
    font-size: 90%;
    text-align: -webkit-left;
    margin-right: 0;
    line-height: 140%;
  }
  .half_ul li {
    width: 100%;
  }
  .tab-content-charm_box h5,
  .tab-content-set_box h5 {
    margin: 2em 0 0 0;
    font-size: 120%;
  }
  .half_ul p {
    margin: 0;
  }
} /* --- レスポンシブ切替 Mobile--- */