@charset "utf-8";
/* CSS Document */
/* =========================================================
   guide.css
   受領済みCSSのみで整理
   - 新規挙動は追加しない
   - HTML変更なし
   - 重複削除
   - パスと差分は統一方針に合わせて整理
   ========================================================= */


/* =========================================================
   共通ベース
   ========================================================= */

#main_return .content-asset {
  display: inline-block;
}

.row {
  align-items: flex-end;
}

.pict_cap {
  margin: 2em auto;
  text-align: center;
}



caption,
.caption {
  caption-side: top;
}


/* =========================================================
   リンク
   ========================================================= */

.navi_link {
  text-align: right;
  margin: 0.3em 0;
}
#law .navi_link {text-align: left;}/* 特定商取引法に基づく表記のみ */
.navi_link a:after,
.navi_list a:after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 13px;
  margin-left: 7px;
  margin-bottom: 3px;
  background: url("../../images/common/icon/i_arrow_right_primary.svg") center / 100% auto no-repeat;
  vertical-align: middle;
}

.navi_link.blank a:after {
  width: 15px;
  height: 15px;
  background: url("../../images/common/icon/i_blank.svg") center / 100% auto no-repeat !important;
}

.navi_list a {
  display: block;
  padding: 0.15em 0 0.7em 1.2em;
}
#policy div.page_index {
    text-align: right;
    margin-bottom: 1em;
}
#policy div.page_index li {
    display: inline-block;
    margin-right: 1em;
}
/* =========================================================
   注釈・リスト
   ========================================================= */

.c-list-note {
  position: relative;
/*  padding-left: 16px;*/
}

.c-list-note li + li {
  margin-top: 0;
}

.c-list-note strong {
  color: #f00;
}

.c-list-note.none li {
  padding: 0;
}

.c-list-note.none li:before {
  content: "";
  padding-left: 0;
}
.c-list-disc{padding-left: 0;}
#law .c-list-disc,#main_mydhc .c-list-disc{padding-left: 16px;}/* 特定商取引法に基づく表記のみ */
ul.list_check > li {
  background: url("../../images/common/icon/i_check_circle.svg") no-repeat left 0.2em;
  background-size: 1.4em auto;
  padding: 0.15em 0 0.15em 1.8em;
}


/* =========================================================
   数式・説明
   ========================================================= */

.equation {
  margin: 1em 4%;
  text-align: center;
  padding: 2em 4em 1.8em;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1em;
  font-weight: bold;
  position: relative;
  background-color: #fff;
}

.explan_box {
  margin-bottom: 1em;
}

.explan_box dt span[class^="icon-"] {
  font-size: 1.2em;
  vertical-align: -0.1em;
  margin-right: 0.3em;
  font-weight: normal;
}

.explan_box dd dl dt,
.explan_box dd dl dd {
  display: inline;
}

.explan_box dd dl dd:before {
  content: "…";
}

.explan_box dt img {
  height: 1.1em;
  vertical-align: middle;
  margin-right: 0.3em;
}

img.icon_bumon {
  height: 1.3em;
  width: auto;
  vertical-align: -0.2em;
  margin: 0 0.2em;
}


/* =========================================================
   テーブル
   ========================================================= */

table[class^="table_"] {
  margin: 1em auto;
}

table[class^="table_"] th,
table[class^="table_"] td {
  text-align: center;
  font-weight: normal;
}

table[class^="table_"] th strong {
  font-weight: normal;
}

table[class^="table_"] strong {
  font-size: 2em;
  margin: 0 0.1em;
}

.table_tokuten {
  border-collapse: separate;
  border-spacing: 0.2em;
}

.table_tokuten th {
  background-color: #f0f0f0;
}

.table_tokuten td {
  background-color: #f60;
  color: #fff;
}

.table_normal tr {
  border-bottom: 0.1em dotted #ccc;
}

.table_normal th,
.table_normal td {
  padding: 0.3em 0.4em;
}

.orange {
  color: #ff871c !important;
}


/* =========================================================
   フォント
   ========================================================= */

.cp_box,
.price_box,
.goodsprice,
.couponcode,
.phone {
  font-family: "Roboto Condensed", Arial, sans-serif;
}


/* =========================================================
   期間案内
   ========================================================= */

.new_period_box dl {
  margin: 1em 0;
  box-sizing: border-box;
}

.new_period_box dt {
  position: relative;
  background-color: #f0f0f0;
}

.new_period_box dt,
.new_period_box dd {
  padding: 1em 3%;
}

.new_period_box dd {
  background-color: #f60;
  color: #fff;
  text-align: center;
}

.new_period_box .price_box {
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1;
  margin: 0.5em auto;
}

.new_period_box .price_box strong,
.new_period_box .price_box strong span {
  font-size: 2em;
}


/* =========================================================
   フォーム
   ========================================================= */

.form_box {
  margin: 1em 0;
  border: 1px solid #ccc;
}

.form_box dl:first-child {
  border-top: none;
}

.form_box > dl {
  border-top: 1px solid #ccc;
  background-color: #f8f7f4;
}

.form_box > dl > dt {
  width: 14em;
  float: left;
}

.form_box > dl > dt,
.form_box > dl > dd {
  padding: 0.5em 0.8em;
}

.form_box > dl > dd {
  margin-left: 15em;
  background-color: #fff;
}

.form_box > dl:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}


/* =========================================================
   FAQ
   ========================================================= */

.faq_pickup_box {
  margin: 2em 0;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
}

.faq_pickup_box .faq_title {
  padding: 0.5em;
  padding-left: 25px;
  margin-bottom: 0.5em;
  font-weight: bold;
  background: url("../../images/common/guide/mark.png") no-repeat left top;
}

.faq_pickup_box .faq_list li {
  padding: 0.3em 0;
  text-indent: -1.8em;
  padding-left: 1.8em;
}

.faq_pickup_box .faq_list img {
  height: 1.35em;
  margin-right: 0.3em;
  vertical-align: middle;
}


/* =========================================================
   その他
   ========================================================= */

.credit img {
  margin: 0.5em 2% 0.7em;
}
.guide-pict_cap {
  margin: 2em auto;
  text-align: center;
}
.guide-explan_box dt img {
    height: 2.5em;
}
/* =========================================================
   PC
   ========================================================= */

@media print, screen and (min-width: 768px) {
  .c-list-note {
    font-size: 85%;
  }
}

@media screen and (min-width: 768px) {
  .pict_cap {
    width: 500px;
  }
.pc_none {
  display: none;
}
  .explan_box {
    display: table;
    table-layout: fixed;
  }

  .explan_box > dl {
    display: table-row;
  }

  .explan_box > dl > dt {
    padding-right: 1em !important;
    white-space: nowrap;
  }

  .explan_box > dl > dt,
  .explan_box > dl > dd {
    display: table-cell;
    padding: 0.2em 0;
  }

  .new_period_box dl {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .new_period_box dt,
  .new_period_box dd {
    display: table-cell;
    vertical-align: middle;
  }

  #catalog .pict img {
    width: 130px;
  }

  .contents_main .faq_pickup_box ul {
    margin-left: 1.5em;
  }

  #faq ul.navi_list {
    display: flex;
    flex-wrap: wrap;
  }

  #faq ul.navi_list li {
    width: 50%;
  }

  .credit img {
    width: 45%;
    vertical-align: top;
  }
.guide-pict_cap {
    width: 500px;
}
.guide-explan_box {
    display: table;
    table-layout: fixed;
}
.guide-explan_box > dl {
    display: table-row;
}
.guide-explan_box > dl > dt {
    padding-right: 3em !important;
    white-space: nowrap;
}
.guide-explan_box > dl > dt, .guide-explan_box > dl > dd {
    display: table-cell;
    padding: 0.2em 0;
}
}


/* =========================================================
   SP
   ========================================================= */

@media screen and (max-width: 768px) {
  .sph_none {
    display: none;
  }

  .explan_box > dl {
    margin: 0.4em 0;
  }

  .explan_box > dl > dt {
    font-weight: bold;
  }

  .table_tokuten th,
  .body_pc .table_tokuten td {
    padding: 0.5em 0.8em;
  }

  table[class^="table_"] span {
    display: inline-block;
  }

  table[class^="table_"] strong {
    font-size: 1.5em;
  }

  table {
    font-size: 0.85em;
  }

  #catalog .pict img {
    width: 45%;
    margin-bottom: 0.3em;
  }

  .form_box dl > dt {
    width: auto;
    float: none;
    font-size: 0.85em;
  }

  .form_box dl > dd {
    margin-left: 0;
  }

  .credit img {
    display: block;
  }


  .d-flex button {
    margin-top: 8px !important;
  }
.guide-explan_box > dl > dd {
    margin-left: 1.5em;
}
.guide-explan_box > dl > dt {
    font-weight: bold;
}
.guide-explan_box > dl {
    margin: 0.4em 0;
}
}