@charset "UTF-8";

/* CSS Document */

@media only screen and (max-width : 768px) {

  /*-------------------------------------
全体レイアウト
-------------------------------------*/
  body {
    width: var(--sp-content-width);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  .article {
    border-left: none;
    border-right: none;
    font-size: var(--sp-font-size);
  }

  .article,
  .top_image_in {
    width: var(--sp-content-width);
  }

  .text_caution {
    font-size: 10px;
  }

  .layout-flex {
    display: block;
  }

  /*-------------------------------------
ヘッダー
-------------------------------------*/
  /* ヘッダー部分をカラム幅にする */
  .header {}

  .header__body {
    max-width: var(--sp-content-width);
    padding: 15px 10px 20px 10px;
  }

  .header__logo_inr {
    width: var(--sp-content-width);
  }

  .header__logo {
    width: 70%;
  }

  .header__ci_logo {
    width: 35%;
  }

  .header__btn {
    display: none;
  }

  /*-------------------------------------
FV
-------------------------------------*/
  .top_image {
    background-image: none;
  }

  /*-------------------------------------
お悩み
-------------------------------------*/
  .section_worry {
    padding: var(--sp-padding-x) var(--sp-padding-x) 0 var(--sp-padding-x);
  }

  .area_worry {
    width: var(--sp-content-width);
  }

  .area_worry__body {
    width: var(--sp-content-width);
  }

  .area_worry_tail {
    display: none;
  }

  /*-------------------------------------
Worry解決
-------------------------------------*/
  .area_about_service {
    width: var(--sp-content-width);
  }

  .area_about_service__title {
    width: var(--sp-content-width);
    padding-bottom: var(--sp-title-padding-bottom);
  }

  .area_about_service__body {
    text-align: left;
    padding: 0 var(--sp-padding-x) var(--sp-padding-bottom) var(--sp-padding-x);
  }

  /*-------------------------------------
特徴
-------------------------------------*/
  .area_points {
    width: var(--sp-content-width);
    padding: var(--sp-padding-top) var(--sp-padding-x) var(--sp-padding-bottom) var(--sp-padding-x);
  }

  .area_points__title {
    width: var(--sp-content-width);
    padding-bottom: var(--sp-title-padding-bottom);
  }

  .point__box {
    margin-bottom: 20px;
  }

  .point__img,
  .row_reverse .point__img {
    width: 90%;
    margin: -80px auto 0 auto;
  }

  .point__txt,
  .row_reverse .point__txt {
    padding: 20px 15px 100px 15px;
    margin-bottom: 0;
  }

  .point__title {
    font-size: 18px;
  }

  /*-------------------------------------
お客様の声
-------------------------------------*/
  .area_voices {
    width: var(--sp-content-width);
    padding: var(--sp-padding-top) 0 0 0;
  }

  .area_voices__title {
    width: var(--sp-content-width);
    padding-bottom: 55px;
  }

  .area_voices__body {
    width: var(--sp-content-width);
    padding: 0 var(--sp-padding-x) 100px var(--sp-padding-x);

  }

  .voice__box {
    margin-bottom: 70px;
  }

  .voice__box:last-child {
    margin-bottom: 0;
  }

  .voice__inner {
    flex-direction: column;
    padding: 20px 0;
  }

  .voice__img {
    position: absolute;
    top: -50px;
    right: 0px;
  }

  .voice__img img {
    width: 100px;
    height: 100px;
  }

  .voice__text {}

  /*-------------------------------------
流れ
-------------------------------------*/

  .area_flows {
    width: var(--sp-content-width);
    padding: var(--sp-padding-top) var(--sp-padding-x) var(--sp-padding-bottom) var(--sp-padding-x);
  }

  .area_flows__title {
    width: var(--sp-content-width);
    padding-bottom: 50px;
  }

  .flow__box {
    display: block;
    padding: var(--sp-padding-x) var(--sp-padding-x) 30px var(--sp-padding-x);
  }

  .flow__title {
    text-align: center;
  }

  .flow__icon {
    width: 80%;
    margin: 30px auto 0px auto;
  }

  .area_flows__body ol {
    flex-wrap: wrap;
    justify-content: center;
  }

  .area_flows__body ol li {
    width: calc(30%);
    flex: none;
  }

  .area_flows__body ol li::after {
    top: 35%;
    right: -14px;
  }

  /*-------------------------------------
施工エリア
-------------------------------------*/
  .area_support_area {
    width: var(--sp-content-width);
  }

  /*-------------------------------------
よくある質問
-------------------------------------*/
  .area_faq {
    width: var(--sp-content-width);
    padding: var(--sp-padding-top) var(--sp-padding-x) var(--sp-padding-bottom) var(--sp-padding-x);
  }

  .area_faq__title {
    width: var(--sp-content-width);
    padding-bottom: var(--sp-title-padding-bottom);
  }

  .area_faq__body {
    width: var(--sp-content-width);
  }

  .faq__q,
  .faq__a {
    align-items: inherit;
    gap: 8px;
    margin-bottom: 10px;
  }


  .faq__q img,
  .faq__a img {
    width: 23px;
    height: 23px;
  }

  /*-------------------------------------
メッセージ
-------------------------------------*/
  .area_message {
    width: var(--sp-content-width);
    padding: var(--sp-padding-top) 0 0 0;
  }

  .area_message__title {
    width: var(--sp-content-width);
    padding-bottom: var(--sp-title-padding-bottom);
  }

  .area_message__body {
    width: var(--sp-content-width);
    padding: 0 var(--sp-padding-x) 200px var(--sp-padding-x);
  }

  .area_message__body img {
    width: var(--sp-content-width);
    margin-bottom: 20px;
  }

  .area_message__bg {
    background: none;
    padding: 0;
  }

  .staff_man,
  .staff_woman {
    width: 20%;
  }

  .staff_woman {
    right: 0;
    width: 60%;
  }


  /*-------------------------------------
CTA
-------------------------------------*/
  .area_cta {
    width: var(--sp-content-width);
  }

  .area_cta {
    padding: 15px;
  }

  .area_cta__content {
    padding: 10px;
  }

  .area_cta__title {
    width: var(--sp-content-width);
    padding-bottom: 10px;
  }

  .area_cta__body {
    width: 90%;
    padding-left: 0;
  }

  .vietnam_staff {
    right: -10px;
  }

  /*-------------------------------------
追従ボタン
-------------------------------------*/
  .fixed_cta {
    width: var(--sp-content-width);
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
    margin: 0 auto;
    overflow: hidden;
  }

  .fixed_cta.is-visible {
    display: flex;
  }

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

  /*-------------------------------------
thanks
-------------------------------------*/
  .area_thanks {
    max-width: var(--sp-content-width);
    padding: var(--sp-padding-top) var(--sp-padding-x) var(--sp-padding-bottom) var(--sp-padding-x);
    ;
  }

  .area_thanks__title {
    width: var(--sp-content-width);
  }

  .area_thanks__body {
    width: var(--sp-content-width);
  }
}