/* =========================================================
   モバイルファースト構成
   ベース(無条件) = SP(〜568px)
   min-width: 569px  = 〜960px 相当
   ========================================================= */

/* #intro .half_box は他ページと共有する汎用クラスへの
   小さい画面限定の上書き（詳細度の罠）のため、
   元のmax-widthスコープのまま維持する */
@media screen and (max-width: 568px) {
  #intro .intro_box .half_box .photo {
    margin-top: 0;
  }
  #intro .intro_box .half_box .ttl {
    font-size: 21px;
    margin: 10px 0 10px;
  }
}

.major_items.sec_cost .cost_box.box_01 dd div:first-of-type {
  border-bottom: 2px solid var(--site-keycolor);
  padding-bottom: 0.15em;
}
.major_items.sec_cost .cost_box.box_01 dd .txt_normal {
  color: #333;
  padding-right: 0.5em;
}
.major_items.sec_cost .cost_box.box_01 .cost_content dl {
  flex-direction: column;
}
.major_items.sec_cost .cost_box.box_01 .cost_content dt {
  width: 100%;
}
.major_items.sec_cost .cost_box.box_01 .cost_content dd {
  width: 100%;
}

.major_items.sec_cost .cost_box.box_03 .cost_content {
  background: url("../img/tv/bg_cost_03.png") no-repeat center right 10%;
  background-size: 24% auto;
}

.major_items.sec_cost .cost_box.box_04 .cost_content dt {
  color: #fff;
  background: var(--site-keycolor);
  padding: 0.75em 0.75em 0.95em;
  margin: 0;
  width: 100%;
}
.major_items.sec_cost .cost_box.box_04 .cost_content dd .txt_normal {
  color: #333;
  padding-right: 1.5em;
}
.major_items.sec_cost .cost_box.box_04 .cost_content dl {
  border: none;
  flex-direction: column;
  width: 100%;
}
.major_items.sec_cost .cost_box.box_04 .cost_content dd div {
  border-bottom: dotted 4px var(--site-keycolor);
}
.major_items.sec_cost .cost_box.box_04 .cost_content dd {
  width: 100%;
}

@media screen and (min-width: 569px) {
  .major_items.sec_cost .cost_box.box_01 .cost_content dl {
    flex-direction: row;
  }
  .major_items.sec_cost .cost_box.box_01 .cost_content dt {
    width: 25%;
  }
  .major_items.sec_cost .cost_box.box_01 .cost_content dd {
    width: 75%;
  }
  .major_items.sec_cost .cost_box.box_03 .cost_content {
    background-position: center right 7%;
    background-size: 18% auto;
  }
  .major_items.sec_cost .cost_box.box_04 .cost_content dt {
    margin-right: 15px;
    width: initial;
  }
  .major_items.sec_cost .cost_box.box_04 .cost_content dd .txt_normal {
    padding-right: 0.5em;
  }
  .major_items.sec_cost .cost_box.box_04 .cost_content dl {
    flex-direction: row;
    width: fit-content;
  }
  .major_items.sec_cost .cost_box.box_04 .cost_content dd {
    width: initial;
  }
}