@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;
  }

  /*-------------------------------------
お悩み
-------------------------------------*/
  .area_worry {
    width: var(--sp-content-width);
  }

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

  .area_worry_tail {
    display: none;
  }

  /*-------------------------------------
Powerwallがあれあば安心
-------------------------------------*/
  .area_about_powerwall {
    width: var(--sp-content-width);
    padding: var(--sp-padding-top) var(--sp-padding-x) 0 var(--sp-padding-x);
  }

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

  .area_about_powerwall__body p {
    padding-bottom: 0;
  }

  /*-------------------------------------
太陽光発電＋Powerwall
-------------------------------------*/
  .area_about_solar {
    width: var(--sp-content-width);
    padding: 0;
  }

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

  .area_about_solar__body {
    width: var(--sp-content-width);
    padding: 0 var(--sp-padding-x) var(--sp-padding-bottom) var(--sp-padding-x);
  }

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

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

  .feature__box {
    margin-bottom: 20px;
  }

  .feature__img {
    padding-bottom: 0;
  }

  .feature__txt {
    padding: 210px 15px 20px 15px;
    background-color: var(--color-grey);
    margin-bottom: 20px;
    margin-left: 0;
    margin-top: -200px;
  }

  .feature__title {
    font-size: var(--sp-font-size);
    margin-left: -15px;
  }

  /*-------------------------------------
Powerwall3登場
-------------------------------------*/
  .area_powerwall3 {
    background-image:
      url(https://service.sustena.jp/wp/wp-content/uploads/2026/09/powerwall3_bg_txt.webp),
      url(https://service.sustena.jp/wp/wp-content/uploads/2026/09/powerwall3_bg_sp.webp);
    background-position:
      left top,
      center bottom;
    background-repeat:
      repeat-y,
      no-repeat;
    background-size:
      auto 100%,
      cover;
    padding: var(--sp-padding-top) var(--sp-padding-x) 200px var(--sp-padding-x);
  }

  .area_powerwall3__title {
    max-width: var(--sp-title-width);
    margin: 0 auto;
  }

  .area_powerwall3__body {
    padding: 0;
    padding-bottom: var(--sp-padding-bottom);
    color: #fff;
  }

  .area_powerwall3__body p {
    padding-left: 0;
  }

  /*-------------------------------------
Powerwall仕様
-------------------------------------*/
  .section_powerwall_spec {
    /* background-image: url(https://service.sustena.jp/wp/wp-content/uploads/2026/09/powerwall_spec_bg_sp.webp); */
    background-size: contain;
    padding-bottom: var(--sp-padding-bottom);
    padding: 60px var(--sp-padding-x) var(--sp-padding-bottom) var(--sp-padding-x);
  }

  .area_powerwall_spec__title {
    width: var(--sp-title-width);
  }

  .area_powerwall_spec__body {
    padding: 0 var(--sp-padding-x) 0 var(--sp-padding-x);
    width: var(--sp-body-width);
    margin: 0 auto;
    color: #fff;
  }

  /*-------------------------------------
Powerwall仕様
-------------------------------------*/
  .area_powerwall_spec {
    width: var(--sp-content-width);
    padding-bottom: 0;
  }

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

  .area_powerwall_spec__body {
    padding: 0;
  }

  .powerwall_spec__txt {
    /* padding: 40px; */
  }

  table.powerwall_spec__table th,
  table.powerwall_spec__table td {
    font-size: 14px;
  }

  /*-------------------------------------
サステナにお任せ
-------------------------------------*/
  .area_about_sustena {
    width: var(--sp-content-width);
    padding: 0;
  }

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

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

  .area_about_sustena__body p {
    padding: 20px;
  }

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

  .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: 30%;
    margin: 30px auto 20px auto;
  }

  /*-------------------------------------
施工エリア
-------------------------------------*/
  .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);
  }

  table.faq_＿table th,
  table.faq_＿table td {
    padding: 16px 7px;
  }

  /*-------------------------------------
メッセージ
-------------------------------------*/
  .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) 160px var(--sp-padding-x);
  }

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

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

  /*-------------------------------------
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: 0;
  }

  /*-------------------------------------
追従ボタン
-------------------------------------*/
  .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;
  }

  /*-------------------------------------
利用規約
-------------------------------------*/
  .area_law {
    max-width: var(--sp-content-width);
    padding: var(--sp-padding-top) var(--sp-padding-x) var(--sp-padding-bottom) var(--sp-padding-x);
    ;
  }

  .area_law__title {
    width: var(--sp-content-width);
    margin-bottom: 50px;
  }

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

  /*-------------------------------------
お問い合わせ
-------------------------------------*/
  .area_contact {
    max-width: var(--sp-content-width);
    padding: var(--sp-padding-top) var(--sp-padding-x) var(--sp-padding-bottom) var(--sp-padding-x);
    ;
  }

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

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

  .area_contact__presents .area_cta__title {
    width: 70%;
  }


  /*-------------------------------------
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);
  }
}