@charset "UTF-8";

@media screen and (max-width: 990px) {
  .contact_bloc,
  .header_bloc,
  .trouble_bloc,
  .support_bloc,
  .users_vc_bloc {
    font-size: 4.041vw;
  }

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

  /* マンガ */
  .manga_bloc {
    margin: 8.081vw auto;
  }

  .manga_bloc p {
    padding: 1.021vw 0;
  }

  /* メインフィーチャー */
  .main_feature_copy_bloc {
    min-height: 67.1vw;
  }

  .mf_reviews_inner {
    min-height: 12.712vw;
  }

  /*******************************************   */
}

@media screen and (max-width: 800px) {
  /* 改行など用 */
  .tb_hide {
    display: none;
  }

  .tb_show {
    display: inline-block;
  }
}

@media screen and (max-width: 640px) {
  /* exciteお悩み相談室ヘッダー */
  #exHeader {
    height: 5.834vw;
    font-size: 2.2vw;
  }

  #exHeaderInner {
    width: 100%;
    max-width: 640px;
  }

  #exLogo {
    width: 29.2%;
    padding: 0.6% 0 0 2.3%;
  }

  #exDescription {
    top: 0 !important;
    left: 30% !important;
  }
}

@media screen and (max-width: 600px) {
  /* ヘッダー共通 */
  .header_inner {
    min-height: 5.2em;
    padding: 0 3em;
  }

  .header_inner::before,
  .header_inner::after {
    width: 2.25em;
    height: 5.2em;
  }

  /* 相談ボタン */
  .contact_bloc {
    width: 87.2%;
    padding: 3.1em 0 3em 1.78em;
    margin: 0.18em auto 0 2.4%;
  }

  .contact_illust_bloc {
    width: 21.8%;
    left: -20px;
    top: 1em;
  }

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

  /* メインフィーチャー */
  .main_feature_copy_bloc {
    min-height: 157.6vw;
    width: 98%;
    padding: 7.9% 0 6.6%;
    margin: 0 auto;
  }

  .mf_con_bloc::before {
    background-size: cover;
  }

  /* メイン悩み */
  .mf_trouble_list {
    width: 102.2%;
    margin: 0 -1% 0 -1.2%;
  }

  .mf_tb_con01,
  .mf_tb_con02,
  .mf_tb_con03,
  .mf_tb_con04 {
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }

  /* キャッチコピー */
  .mf_copy_bloc {
    width: 86.4%;
    margin: 4.4% 0 0 6.8%;
  }

  .mf_copy_inner {
    margin: 6.4% 0 0 2.8%;
  }

  /* ボタン */
  .mf_btn_bloc {
    position: relative;
    z-index: 4;
    width: 81.2%;
    margin: 77.2% 0 0 9.2%;
  }

  .mf_reviews_inner {
    min-height: 16.97vw;
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }

  /* イラスト */
  .mf_illust_bloc {
    overflow: hidden;
    z-index: 3;
    width: 38.6%;
    height: 0;
    padding-top: 95%;
    right: 29.4%;
    top: auto;
    bottom: 6%;
  }

  .mf_illust {
    top: auto;
    bottom: -3%;
    background-position: left bottom;
  }

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

  /* 悩み */
  .trouble_header_inner {
    width: 98%;
    padding: 0 2.66em;
    margin: auto;
  }

  .trouble_inner {
    margin: 1.6em 0 0;
  }

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

  /* サポート */
  .support_bloc::before {
    width: 170%;
    height: 100%;
    background-size: 100% 100%;
  }

  .support_header_bloc {
    width: 100%;
  }

  .support_list {
    width: 85.6%;
    margin: 2.2em 0 0 7.8%;
  }

  .support_each_bloc {
    width: 100%;
  }

  .support_each_bloc:not(:first-of-type) {
    margin: 1.8em 0 0;
  }

  .support_each_inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .support_each_inner > dt {
    width: 51.2%;
  }

  .support_each_inner > dd {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 48%;
    padding: 0 0 0 2%;
  }

  .support_content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .support_list_even > dt {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .support_list_even > dd {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .support_01_txt,
  .support_02_txt,
  .support_03_txt {
    margin-top: 0.6em;
  }

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

  /* 利用者の声 */
  .users_vc_bloc {
    padding: 1.3em 0 2.38em;
  }

  /* ヘッダー */
  .users_vc_header_inner {
    width: 77.8%;
    padding: 0 2.66em;
    margin: auto;
  }

  .users_vc_list {
    margin: 1em 0 0;
  }

  .users_vc_each_inner {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .uvc_photo_odd,
  .uvc_photo_even {
    width: 145px;
    margin: 0 0 -22px;
  }

  .uvc_content_odd,
  .uvc_content_even {
    position: relative;
    z-index: 2;
    width: 96%;
  }

  .uvc_photo_even {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .uvc_content_even {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .uvc_baloon_bloc_odd,
  .uvc_baloon_bloc_even {
    margin: 0 0 0 0.2em;
    padding: 1em 0.92em 0.92em 1.3em;
  }

  .uvc_baloon_bloc_odd::before,
  .uvc_baloon_bloc_even::before {
    -webkit-border-image: none;
    -o-border-image: none;
    border-image: none;
    border-color: #fff;
    background: #fff;
    border-radius: 1.6vw;
    overflow: hidden;
  }

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

  /* 最後のフィーチャー */
  .ff_con_bloc::before {
    bottom: -15vw;
    background-size: cover;
  }

  .final_feature_bloc {
    margin: 0 0 15vw;
  }

  .final_feature_copy_bloc {
    width: 88%;
    margin: 0 0 0 7.1%;
    padding: 0 0 0;
  }

  /* キャッチコピー */
  .ff_copy_bloc {
    margin: 0.8% 0 0 0;
  }

  /* ポイント */
  .ff_point_bloc {
    margin: 6.9% 0 0 1%;
  }

  .ff_msg_bloc {
    margin: 11% 0 0 2.2%;
  }

  /* ボタン */
  .ff_btn_bloc {
    z-index: 2;
    margin: 12.8% 0 0 1.1%;
  }

  /* イラスト */
  .ff_illust_bloc {
    overflow: hidden;
    z-index: auto;
    width: 23%;
    padding-top: 55%;
    right: 10%;
    bottom: 5%;
  }

  /*******************************************   */
}

@media screen and (max-width: 500px) {
  /* 改行など用 */
  .sp_show {
    display: inline-block;
  }

  .sp_hide {
    display: none;
  }

  body {
    font-size: 18px;
    line-height: 1.5;
  }

  .contents_bloc,
  .header_contents_bloc {
    padding: 0 10px;
  }

  /* マンガ */
  .manga_bloc {
    padding: 0 10px;
    margin: 8.42vw auto;
  }

  /* フッター */
  footer {
    font-size: 16px;
  }

  .footer_inner {
    padding: 3% 0;
  }

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

  /* サポート */
  .uvc_content_odd,
  .uvc_content_even {
    width: 100%;
  }

  .uvc_baloon_bloc_odd,
  .uvc_baloon_bloc_even {
    margin: 0;
    padding: 1em 0.5em 0.92em 0.5em;
  }

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

  /* 最後のフィーチャー */
  .final_feature_copy_bloc {
    width: 98%;
    margin: 0 0 0 1.5%;
  }

  /* イラスト */
  .ff_illust_bloc {
    width: 25.2%;
    padding-top: 62%;
    right: 6.6%;
    bottom: 6%;
  }

  /*******************************************   */
}

/* @media screen and (max-width: 422px) {} */

/* iPhone X 以下 */
@media screen and (max-width: 375px) {
  /* サポート */
  .support_list {
    width: 98%;
    margin: 2.2em 0 0 1.8%;
  }

  /* 最後のフィーチャー */
  .ff_point_bloc {
    padding: 3.8% 5.4% 3.2%;
  }

  .ff_msg_bloc {
    width: 64.6%;
  }
}