/*
Theme Name: PUBLICA original
Theme URL: テーマのサイトのURI
Description: PUBLICAオリジナルのテーマです。
Author: T.Aratani
Version: 1.0.0
*/

/* =========================================
   Base styles
   ========================================= */

/* --- 1565px以下: レイアウト/幅のリセットと、セクションの基本パディング設定 --- */
@media screen and (max-width: 1565px) {
  /* 共通レイアウト調整: サイドバー非表示、ヘッダー・メイン幅100% */
  .l-sidebar {
    display: none !important;
  }

  .l-header {
    width: 100% !important;
    left: 0 !important;
  }

  .l-main-container {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .p-main-slider-wrapper {
    width: 100% !important;
    max-width: none !important;
  }

  /* 1. セクションIDの幅を固定し、パディングを40pxに設定 (PC/Tablet共通) */
  #troubleshooting,
  #reasons,
  #cases,
  #flow,
  #facilities,
  #models,
  #makers,
  #lease,
  #area,
  #faq,
  #contact,
  #company {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  /* 1. セクションIDの幅を固定し、パディングを40pxに設定 (PC/Tablet共通) */
  #troubleshooting,
  #reasons,
  #cases,
  #flow,
  #facilities,
  #models,
  #makers,
  #lease,
  #area,
  #faq,
  #company {
    padding-left: 40px !important; /* 統一ルール */
    padding-right: 40px !important; /* 統一ルール */
  }

  /* 2. .p-section-inner のレスポンシブなパディング制御はIDに集約するため、ここでは特に追加しない */
}

/* =========================================
   section styles
   ========================================= */

/* --- 1024px以下: (個別ルールを維持) --- */
@media screen and (max-width: 1024px) {
  #troubleshooting,
  #reasons,
  #cases,
  #company {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
}

/* --- 767px以下: セクションIDのパディングを20pxに縮小 --- */
@media screen and (max-width: 767px) {
  /* 統一ルール: 767px以下で20pxのパディングを適用 */
  #troubleshooting,
  #reasons,
  #cases,
  #flow,
  #facilities,
  #models,
  #makers,
  #lease,
  #area,
  #faq,
  #company {
    padding-left: 10px !important; /* 40pxから上書き */
    padding-right: 10px !important; /* 40pxから上書き */
  }

  /* 既存の767px以下の#companyスタイルを維持 */
  #company {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .p-company-header {
    margin-bottom: 30px !important;
  }
  .p-company-google-map iframe {
    height: 300px !important;
  }
}

/* --- 600px以下: H2/H2__mainの調整 (個別ルールを維持) --- */
@media screen and (max-width: 600px) {
  .p-section-h2 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }

  .p-section-h2__main {
    font-size: 24px !important;
  }
}

/* =========================================
   header styles (最終調整)
   ========================================= */

/* --- 1565pxのブレイクポイントの修正 (PC中サイズ) --- */
@media screen and (max-width: 1565px) {
  .l-sidebar {
    display: none !important;
  }
  .l-header {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  .l-main-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .c-hamburger {
    display: block !important;
    position: fixed !important;
    top: 35px !important;
    right: 30px !important;
    left: auto !important;
  }

  /* ① p-utility__tel-infoのmargin-right 200pxを無くす (リセット) */
  .p-utility__tel-info {
    margin-right: 160px !important;
    font-size: 14px !important;
    padding-right: 0 !important; /* ⑥ padding-rightを0pxに設定 */
  }

  /* ⑦ p-utilityの右に100pxのmarginを入れる */
  .p-utility {
    margin-right: 100px !important;
  }

  /* アイコンは表示を維持 (display:flex) */
  .p-utility__contact-icons {
    display: flex !important;
    align-items: center !important;
    position: fixed !important;
    top: 35px !important;
    right: 80px !important;
    z-index: 1002 !important;
  }

  .p-utility__icon-link {
    display: block !important;
    margin: 0 10px !important;
  }

  /* 1565px以下ではアイコンサイズを28pxに拡大 */
  .p-utility__img-icon {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    object-fit: contain !important;
  }

  .l-mobile-nav {
    display: flex !important;
  }

  .p-utility__icon-link.is-tel-icon {
    display: none !important;
  }
}

/* --- logo/tel (992px以下でのロゴ縮小と電話番号の表示維持) --- */
@media screen and (max-width: 992px) {
  /* ロゴのサイズ調整 */
  .c-logo .js-logo-img {
    max-width: 180px !important;
    height: auto !important;
  }

  /* ★★ 修正: 電話番号の注釈と番号本体を非表示にし、アイコン表示に切り替える ★★ */
  .p-utility__note {
    display: none !important; /* 注釈を非表示 */
  }
  .p-utility__tel-number {
    display: none !important; /* 電話番号を非表示 */
  }

  .p-utility__icon-mobile {
    display: none !important;
  }

  .p-utility__icon-link.is-tel-icon {
    display: block !important;
  }

  .c-logo {
    margin-left: 20px !important;
  }
}

@media screen and (max-width: 530px) {
  .p-utility__img-icon {
    display: none !important;
  }
}

@media screen and (max-width: 350px) {
  /* ロゴのサイズ調整 */
  .c-logo .js-logo-img {
    max-width: 130px !important;
    height: auto !important;
    padding-top: 12px;
  }
}

/* =========================================
  MV styles
   ========================================= */
/* ファイル: resp.css */

@media screen and (max-width: 1240px) {
  .p-main-slider-wrapper {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .mv-swiper .swiper-slide,
  .mv-swiper .swiper-wrapper .swiper-slide {
    width: 85% !important;
    max-width: 780px !important;
    flex-shrink: 0 !important;
  }

  .mv-swiper {
    width: 100% !important;
    height: 390px !important;
    position: relative !important;
  }

  .mv-swiper .swiper-wrapper,
  .mv-swiper .swiper-slide,
  .mv-swiper picture {
    position: static !important;
    height: 100% !important;
  }
  .mv-swiper img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    position: static !important;
    display: block !important;
  }

  #mv .p-main-slider-wrapper .swiper-button-prev-custom,
  #mv .p-main-slider-wrapper .swiper-button-next-custom {
    /* 矢印要素を完全に非表示にする */
    display: none !important;
  }
}

@media screen and (max-width: 992px) {
  .p-main-slider-wrapper {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .mv-swiper .swiper-slide,
  .mv-swiper .swiper-wrapper .swiper-slide {
    width: 50% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
  }

  .mv-swiper {
    height: auto !important;
    position: relative !important;
  }

  .mv-swiper .swiper-wrapper {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
  }

  .mv-swiper .swiper-slide,
  .mv-swiper picture,
  .mv-swiper img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
  }

  #mv .p-main-slider-wrapper .swiper-button-prev-custom,
  #mv .p-main-slider-wrapper .swiper-button-next-custom {
    /* 矢印要素を完全に非表示にする */
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  #mv {
    padding-bottom: 40px !important; /* 上部余白を強制 */
  }

  /* スライダーラッパーの最大幅も解除し、全幅に対応 */
  .p-main-slider-wrapper {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 992pxで設定された width: 50% を 100% に上書き */
  .mv-swiper .swiper-slide,
  .mv-swiper .swiper-wrapper .swiper-slide {
    width: 75% !important;
    max-width: none !important;
    flex-shrink: 0 !important;
  }

  /* スライダーコンテナの高さも必要に応じて調整 */
  .mv-swiper {
    height: auto !important;
  }
}

/* =========================================
   #banner styles
   ========================================= */
@media screen and (max-width: 767px) {
  /* 横並びコンテナ (p-banner-wrapper) の flex を解除 */
  .p-banner-wrapper {
    display: block !important;
    gap: 0 !important;
  }

  /* flexアイテム (p-banner-item) が縦積みの際に幅100%になることを保証し、中央寄せを追加 */
  .p-banner-item {
    width: 100% !important;
    margin-bottom: 20px !important;

    /* 💡 追加: 内部コンテンツを中央寄せする */
    text-align: center !important;
  }

  /* 最後のアイテムの下余白は不要なため解除 */
  .p-banner-item:last-child {
    margin-bottom: 0 !important;
  }

  /* p-banner-item の中に追記するか、独立して追加 */
  .p-banner-item img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media screen and (max-width: 767px) {
  #banner {
    margin-bottom: 40px !important;
  }
}

/* =========================================
   #reasons styles
   ========================================= */

/* --- 1260px 以下: p-reason-wrapper の幅固定を解除し、左右にパディングを適用 --- */
/* (1240px以上ではレスポンシブな幅とパディングを維持) */
@media screen and (max-width: 1260px) {
  /* p-reason-wrapper の幅固定を解除し、レスポンシブな幅とパディングに戻す */
  .p-reason-wrapper {
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 0 !important;
  }
}

/* --- 1240px 以下: 横並びレイアウト開始（980px幅固定） --- */
@media screen and (max-width: 1240px) {
  .p-reason-wrapper {
    width: 100% !important; /* 980pxの固定幅を解除し、画面幅いっぱいに広げる */
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 15px !important; /* 左右にパディングで余白を確保 */
    gap: 0px !important;
  }

  /* アイテムの親コンテナ（リスト全体）は縦積み */
  .p-reasons-list {
    display: block !important;
  }

  /* p-reason-item（各アイテム）: Float解除用のコンテナ */
  .p-reason-item {
    display: block !important;
    overflow: hidden !important;
    margin-bottom: 40px !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    text-align: center !important;
  }

  /* === 1段目: Number と Title の横並び (中央寄せ) === */

  .p-reason-number {
    float: none !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    vertical-align: middle !important;
    text-align: center !important;
    width: 40px !important;
    height: 40px !important;
    margin-right: 15px !important;
    margin-bottom: 20px !important;
    margin-top: 20px !important;
  }

  .p-reason-title {
    float: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    font-size: 32px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    max-width: calc(100% - 60px) !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  /* === 2段目: 画像 と 説明内容 の横並び (Floatを使用) === */

  /* 画像コンテナを左に寄せ、幅400pxを確保 */
  .p-reason-visual {
    text-align: left !important;
    float: left !important;
    width: 400px !important;
    max-width: 400px !important;
    margin-right: 60px !important; /* リストとの間隔 (1024px以下で変更される) */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: block !important;
  }

  /* 画像内の img タグも幅を適用 */
  .p-reason-visual img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* 説明コンテンツラッパー（Floatの右側）*/
  .p-reason-text-content {
    display: block !important;
    overflow: hidden !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  /* 説明サブタイトルの中央寄せ */
  .p-reason-subtitle {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto !important; /* 中央寄せ */
    margin-bottom: 10px !important;
    margin-top: 0 !important;
  }

  /* 詳細リストの中央寄せ */
  .p-reason-list {
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
  }

  /* 最後のアイテムの下余白を削除 */
  .p-reason-item:last-child {
    margin-bottom: 0 !important;
  }
}

/* --- 1024px 以下: 画像の margin-right を 0 にして横並びを詰める --- */
@media screen and (max-width: 1024px) {
  /* 画像のリストとの間隔をリセット */
  .p-reason-visual {
    margin-right: 0px !important;
  }

  /* ⭐⭐ 追加修正: 1024px以下で p-reason-item のパディングをさらに調整 ⭐⭐ */
  .p-reason-item {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media screen and (max-width: 992px) {
  .p-reason-wrapper {
    width: auto !important; /* 幅を解除 */
    max-width: none !important;
    margin: 0px auto !important;
  }
  /* ⭐⭐ 追加修正: 992px以下はパディングをリセット ⭐⭐ */
  .p-reason-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (max-width: 992px) {
  .p-reason-wrapper {
    width: 860px !important;
    max-width: 860px !important;
    margin: 0px auto !important;
  }

  .p-reason-item {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .p-reason-visual {
    width: 380px !important;
    max-width: 380px !important;
  }

  .p-reason-number {
    margin-top: 10px !important;
  }

  .p-reason-title {
    margin-top: 10px !important;
  }
}

@media screen and (max-width: 992px) {
  .p-reason-wrapper {
    width: 760px !important;
    max-width: 760px !important;
    margin: 0px auto !important;
  }
}

@media screen and (max-width: 800px) {
  #reasons {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .p-reason-wrapper {
    width: 700px !important;
    max-width: 700px !important;
    margin: 0px auto !important;
  }

  .p-reason-list li {
    font-size: 16px !important;
  }

  .p-reason-visual {
    width: 340px !important;
    max-width: 340px !important;
  }
}

/* --- 780px 以下: 縦積みレイアウトへ切り替え (レスポンシブの開始) --- */
@media screen and (max-width: 780px) {
  /* p-reason-wrapper の固定幅を解除し、フルレスポンシブに */
  .p-reason-wrapper {
    width: auto !important;
    max-width: none !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .p-reason-item {
    /* Float解除用のoverflow: hidden; を解除し、縦積みのブロックレベルに */
    overflow: visible !important;
    text-align: center !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-bottom: 50px !important;
  }

  /* ナンバーとタイトルは引き続き上部の横並び */
  .p-reason-number {
    margin-top: 10px !important;
    margin-bottom: 30px !important;
  }
  .p-reason-title {
    margin-top: 10px !important;
    margin-bottom: 30px !important;
  }

  /* === 2段目: 縦積みに戻す === */
  .p-reason-visual,
  .p-reason-text-content {
    float: none !important; /* Floatを解除 */
    display: block !important; /* 縦積み */
    width: 100% !important;
    max-width: 400px !important; /* スマホでの最大幅 */
    margin: 0 auto 20px auto !important; /* 中央寄せ */
    text-align: center !important;
    overflow: hidden !important; /* はみ出しを隠す */
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .p-reason-text-content {
    margin-bottom: 0 !important;
  }

  .p-reason-subtitle {
    display: block !important;
    text-align: center !important;
    font-size: 26px !important;
    font-weight: bold !important;
    color: #1360ca !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .p-reason-list li {
    font-size: 20px !important;
  }
}

/* =========================================
   #reasons styles (レスポンシブ対応)
   ========================================= */

/* 画面幅が420px以下の場合に適用 */
@media screen and (max-width: 420px) {
  /* * .p-section-h2__break をブロック要素に変更し、
     * 自動的に改行を発生させる
     */
  .p-section-h2__main .p-section-h2__break {
    display: block !important; /* 強制的にブロック要素に変更 */
    /* 必要に応じて中央寄せも追加 */
    text-align: center !important;
  }
}

/* =========================================
   #reasons styles (レスポンシブ対応)
   ========================================= */

/* --- 420px以下の改行処理 (前回の対応) --- */
@media screen and (max-width: 420px) {
  .p-section-h2__main .p-section-h2__break {
    display: block !important;
    text-align: center !important;
  }
}

/* --- 379px以下の画像縮小と余白確保 --- */
@media screen and (max-width: 379px) {
  /* ------------------------------------------- */
  /* 1. p-section-inner のパディングを 0 にリセット */
  /* ------------------------------------------- */
  .p-section-inner {
    max-width: none !important;
    width: 100% !important;
    /* 左右のパディングを 0 に設定 */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* 中央寄せを維持 */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ------------------------------------------- */
  /* 2. p-reason-wrapper のパディングと幅をリセット */
  /* ------------------------------------------- */
  .p-reason-wrapper {
    width: 100% !important;
    /* 左右のパディングを 0 に設定 */
    padding-left: 0 !important;
    padding-right: 0 !important;

    /* 幅の固定解除 (前回の修正を維持) */
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    flex-basis: auto !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
  }

  .p-reason-number {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .p-reason-title {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  /* ------------------------------------------- */
  /* ★★★ 3. p-reason-item の固定幅を解除し、レスポンシブ化 ★★★ */
  /* ------------------------------------------- */
  .p-reason-item {
    width: 100% !important; /* 幅を100%に変更 */
    max-width: none !important; /* 最大幅の強制解除 */
    min-width: 0 !important; /* 最小幅の強制解除 (これが最も重要) */
    flex: 1 1 auto !important; /* flexの固定を解除し、縮小・拡大を許可 */
    padding-left: 0 !important; /* パディングリセット (前回の余白調整を補助) */
    padding-right: 0 !important;
  }

  /* ------------------------------------------- */
  /* 4. p-reason-visual の調整（左右10pxの余白を確保しつつ親要素に合わせて縮小） */
  /* ------------------------------------------- */
  .p-reason-visual {
    /* p-reason-item が 100% になったので、その幅 - 20px に設定 */
    width: calc(100% - 20px) !important;
    max-width: 400px !important; /* 念のため、780px以下で設定された最大幅を再適用 */
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* 5. img タグのレスポンシブ設定 (前回の修正を維持) */
  .p-reason-visual img {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* === 2段目: 縦積みに戻す === */
  .p-reason-visual,
  .p-reason-text-content {
    margin: 0 auto 0px auto !important; /* 中央寄せ */
  }

  .p-reason-title {
    font-size: 28px !important;
  }

  /* p-reason-subtitle のフォントサイズを縮小 */
  .p-reason-subtitle {
    font-size: 22px !important; /* 例: 既存のサイズから縮小 */
    /* 必要に応じてline-heightも調整できます */
    line-height: 1.4 !important;
  }

  /* p-reason-list のフォントサイズを縮小 */
  .p-reason-list li {
    font-size: 17px !important; /* 例: 既存のサイズから縮小 */
  }
}

/* =========================================
   #cases styles
   ========================================= */

@media screen and (max-width: 1270px) {
  /* スライダーのラッパーを画面幅いっぱいに広げ、左右にパディングで矢印のスペースを確保 */
  .case-swiper-wrapper {
    max-width: 100% !important;
    /* 左右に50pxのパディングを設定し、矢印をこの内側に収める */
    padding: 0 50px !important;
  }

  /* 矢印の位置をパディングの端（50px）に合わせて調整 */
  .swiper-button-prev {
    /* 左端から15pxの位置に配置 (パディング50pxの余裕を利用) */
    left: -15px !important;
  }

  .swiper-button-next {
    /* 右端から15pxの位置に配置 */
    right: -15px !important;
  }
}

@media screen and (max-width: 1240px) {
  /* PCでの最大幅制限を解除 */
  .p-case-clip-wrapper {
    max-width: 100% !important;
    /* 矢印スペースを確保するためのパディング */
    padding: 0 50px !important;
  }

  .swiper-button-prev {
    /* 左端から50pxの位置に配置 */
    left: 15px !important;
  }

  .swiper-button-next {
    /* 右端から50pxの位置に配置 */
    right: 15px !important;
  }

  /* ★★ 修正: Swiperの計算を優先させるため、レスポンシブ時の強制幅も確実に解除 ★★ */
  .p-case-item,
  .p-case-content {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

/* 992px以下でのレイアウト調整 (タブレット・モバイル) */
@media screen and (max-width: 992px) {
  .p-case-text-content {
    padding: 15px;
  }

  .p-case-title {
    font-size: 18px;
  }

  .p-case-clip-wrapperr {
    /* モバイルでは矢印の位置が内側になるため、パディングを小さくする */
    padding: 0 40px !important;
  }

  .case-swiper-prev,
  .case-swiper-next {
    width: 40px !important;
    height: 40px !important;
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 16px !important;
  }
}

/* resp.css 内の #cases styles に追加 */
@media screen and (max-width: 767px) {
  .case-swiper-wrapper {
    /* 左右のパディングをさらに小さく (例: 30px) */
    padding: 0 30px !important;
  }
  .swiper-button-prev {
    left: 0px !important;
  }
  .swiper-button-next {
    right: 0px !important;
  }
}

/* =========================================
   #flow styles
   ========================================= */
@media screen and (max-width: 1240px) {
  #flow .p-section-inner {
    /* 幅を100%にし、左右のmax-width制限を解除 */
    width: 100% !important;
    max-width: none !important;

    /* 左右に40pxのパディングを設定 */
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* --- [追加] フローコンテナの最大幅を980pxに固定し、中央寄せする --- */
/* (ベースCSSで設定されていなければ、このルールをグローバルに追加) */
#flow .p-flow-container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- [置き換え] 1240px以下のフロー詳細の調整を簡素化 --- */
/* 以前の複雑な width: 80% のルールを、以下のシンプルな縦組みルールに置き換えてください */
@media screen and (max-width: 1240px) {
  /* 1. 詳細セクション全体（step1-detailsなど）は親要素に追従 */
  #step1-details,
  #step2-details {
    width: 100% !important; /* 980px幅のコンテナいっぱい */
    margin: 0 !important;
    margin-bottom: 50px !important;
  }

  #step3-details {
    width: 100% !important; /* 980px幅のコンテナいっぱい */
    margin: 0 !important;
    margin-bottom: 0px !important;
  }

  /* 2. p-flow-detail-item を縦組みに変更 */
  .p-flow-detail-wrap {
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

@media screen and (max-width: 1240px) {
  /* br-spを表示し、改行を適用 */
  .p-flow-title .br-sp {
    display: inline !important;
  }
}

@media screen and (max-width: 992px) {
  #flow h2.p-flow-item-details-title {
    margin-bottom: 20px !important;
    font-size: 26px !important;
    font-weight: bold !important;
    color: #333 !important;
  }

  .p-flow-item-details-lead {
    font-size: 18px !important; /* 例: 14pxに縮小 */
  }
}

@media screen and (max-width: 820px) {
  /* br-flow-leadを表示し、改行を適用 */
  .p-section-lead .br-flow-lead {
    display: inline !important;
  }
}

@media screen and (max-width: 800px) {
  /* 1. p-flow-wrapper の横並びを解除 (縦積み) */
  .p-flow-wrapper {
    display: block !important;
    /* 中央揃えを適用するために、幅を制限してからマージンで中央寄せ */
    /* ①幅を狭くして中央揃え */
    max-width: 450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 2. 各フローアイテムの縦積みと、STEP番号＆タイトルを横並びにする */
  .p-flow-item {
    width: 100% !important; /* 親要素p-flow-wrapperの450px幅いっぱいに広げる */
    max-width: none !important;
    margin-bottom: 30px !important;

    /* ④ボックスの上下にpadding 30px */
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    padding-left: 20px !important; /* 左右のパディングも調整 */
    padding-right: 20px !important;

    /* STEP番号とタイトルを横並びにする Flexbox */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* 垂直方向の中央揃え */
  }

  /* STEP番号の調整 */
  .p-flow-number {
    flex-shrink: 0 !important; /* 縮小しない */
    margin-right: 15px !important;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
    /* ②▼も右端にしてテキストに横並びにするため、STEP番号の幅を確保 */
    min-width: 70px !important;
  }

  /* タイトルの調整 */
  .p-flow-title {
    flex-grow: 1 !important; /* 残りのスペースを全て使用 */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;

    /* ③テキストは中央揃えではなく、左揃えに */
    text-align: left !important;
  }

  /* 2. ② "▼" も右端にしてテキストに横並びに */
  /* p-flow-itemがaタグ全体を指しているため、p-flow-itemをFlexboxにして、
       ::after (▼) を絶対配置からFlexアイテムとして扱うように変更 */
  .p-flow-item::after {
    content: "▼" !important; /* ▼の表示 */
    position: static !important; /* 絶対配置を解除し、Flexアイテムにする */
    margin-left: 10px !important; /* テキストとの間隔 */
    flex-shrink: 0 !important;

    /* アイテム全体が中央揃えになっていた場合は、テキストの左揃えを優先 */
    text-align: left !important;
  }

  /* 矢印などの装飾要素の非表示は維持 */
  .p-flow-arrow,
  .p-flow-connector {
    display: none !important;
  }

  /* STEP3の改行を有効にする */
  .p-flow-title .br-sp {
    display: inline !important;
  }

  /* 最後のアイテムの下マージンをリセット */
  .p-flow-item:last-child {
    margin-bottom: 0 !important;
  }
}

@media screen and (max-width: 767px) {
  .p-section-inner {
    padding-left: 20px;
    padding-right: 20px;
    width: 100% !important;
    max-width: none !important;
  }

  /* 1. 全体を囲むコンテナの横並び（Flexbox/Grid）を解除 */
  .p-flow-wrapper {
    display: block !important;
    /* 必要に応じて左右のパディングを調整 */
    padding: 0 20px !important;
  }
}

@media screen and (max-width: 600px) {
  .p-flow-detail-visual {
    display: none !important;
  }

  .p-flow-detail-title {
    font-size: 20px !important; /* 例として18pxに設定 */
  }
}

@media screen and (max-width: 580px) {
  #flow .p-section-inner {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  #flow h2.p-flow-item-details-title {
    font-size: 18px !important;
  }

  .p-flow-item-details-lead {
    font-size: 16px !important;
  }
}

@media screen and (max-width: 480px) {
  .p-flow-wrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .p-flow-item {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  .p-flow-number {
    font-size: 14px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
  }

  .p-flow-title {
    font-size: 16px !important;
    flex-grow: 1 !important;
    white-space: normal !important;
  }

  .p-flow-item::after {
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  .p-section-lead .br-flow-lead {
    display: inline !important;
  }

  .p-section-lead .br-flow-lead-480 {
    display: block !important;
  }
}

@media screen and (max-width: 360px) {
  #flow .p-section-h2__main {
    font-size: 25px !important;
  }

  #flow .p-flow-steps-lead {
    font-size: 20px !important;
  }

  #flow .p-flow-steps-lead {
    display: block !important;
  }

  .br-title-360 {
    display: block !important;
  }

  .p-flow-item-details-title {
    line-height: 2 !important;
  }

  .p-flow-detail-title {
    font-size: 18px !important;
  }
}

/* =========================================
   #area styles
   ========================================= */
@media screen and (max-width: 992px) {
  #area .p-section-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .p-area-content-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    max-width: none !important;
    margin-bottom: 30px !important;
  }

  .p-area-map-wrap {
    text-align: center !important;
  }

  .p-area-map-image {
    width: 80% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .p-area-right {
    order: 0 !important;
  }
  .p-area-left {
    order: 1 !important;
  }

  .p-area-accordion-wrap {
    max-width: none !important;
  }

  #area .p-area-sub {
    text-align: center !important;
  }

  .p-area-target {
    padding: 20px !important;
  }
}

@media screen and (max-width: 767px) {
  #area {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  #area .p-section-inner {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .p-area-target {
    padding: 15px !important;
  }

  .p-area-list li {
    width: calc(50% - 7.5px) !important;
    flex-grow: 0 !important;
  }
}

@media screen and (max-width: 767px) {
  #area {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .p-area-content-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    margin-bottom: 30px !important;
  }

  .p-area-description,
  .p-area-target {
    padding: 15px !important;
  }

  .p-area-description p {
    font-size: 16px !important;
  }
  .p-area-target-list {
    font-size: 15px !important;
  }
  .p-area-note {
    font-size: 12px !important;
  }
  .p-area-map-image {
    max-width: 100% !important;
  }

  .p-area-accordion-wrap {
    max-width: none !important;
  }
  .p-accordion-trigger {
    padding: 12px 15px !important;
  }
  .p-accordion-title {
    font-size: 16px !important;
  }
  .p-accordion-inner {
    padding: 15px !important;
  }
  .p-matsudo-list li {
    width: calc(50% - 10px) !important;
    font-size: 13px !important;
  }
}

@media screen and (max-width: 560px) {
  .p-area-map-image {
    width: 100% !important;
  }

  #area .p-section-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media screen and (max-width: 440px) {
  .br-title-440 {
    display: block !important;
  }
}

@media screen and (max-width: 400px) {
  #area .p-area-sub {
    font-size: 20px !important;
  }
}

@media screen and (max-width: 380px) {
  .p-area-list li {
    width: 100% !important;
    flex-grow: 1 !important;
  }
}

@media screen and (max-width: 340px) {
  #area .p-area-sub {
    font-size: 18px !important;
  }
}

/* =========================================
   #faq styles
   ========================================= */

@media screen and (max-width: 767px) {
  .p-section-faq {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .p-faq-layout-wrapper {
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 30px 15px !important;
  }

  .p-faq-list-wrapper {
    margin-top: 30px !important;
  }
  .p-faq-question {
    padding: 15px 10px !important;
  }
  .p-faq-icon {
    width: 25px !important;
    height: 25px !important;
    font-size: 14px !important;
    margin-right: 15px !important;
  }
  .p-faq-title {
    font-size: 16px !important;
  }

  .p-faq-answer__content {
    font-size: 16px !important;
  }
  .p-faq-toggle-icon {
    width: 15px !important;
    height: 15px !important;
    margin-left: 15px !important;
  }
  .p-faq-answer {
    padding: 0 10px 15px 10px !important;
  }
  .p-faq-answer__inner {
    padding: 15px !important;
  }
  .p-faq-icon--answer {
    width: 25px !important;
    height: 25px !important;
    font-size: 14px !important;
    margin-right: 15px !important;
  }
  .p-faq-answer__content p {
    font-size: 14px !important;
  }
}

/* =========================================
   #contact styles
   ========================================= */
@media screen and (max-width: 1150px) {
  .p-contact-layout-wrapper {
    margin-right: 15px !important;
    margin-left: 15px !important;
  }
}

@media screen and (max-width: 807px) {
  .br-title-807 {
    display: block !important;
  }
}

@media screen and (max-width: 1024px) {
  .p-contact-advice {
    font-size: 24px !important;
  }
}

@media screen and (max-width: 767px) {
  .p-contact-advice {
    font-size: 22px !important;
  }
}

@media screen and (max-width: 520px) {
  .p-contact-advice {
    font-size: 21px !important;
  }
}

@media screen and (max-width: 1141px) {
  .p-estimation-steps-container {
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 0 10px !important;
  }

  .p-estimation-step-item {
    width: 280px !important;
    min-width: 280px !important;
    margin: 20px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }
}

@media screen and (max-width: 882px) {
  .p-estimation-step-item {
    width: 250px !important;
    min-width: 250px !important;
    margin: 20px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }
}

@media screen and (max-width: 821px) {
  .p-estimation-step-item {
    width: 220px !important;
    min-width: unset !important;
    margin: 20px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }
}

@media screen and (max-width: 767px) {
  .p-estimation-steps-container {
    flex-direction: column !important;
    gap: 25px !important;
  }

  .p-estimation-step-item {
    flex: 0 0 100% !important;
    max-width: 300px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .p-estimation-arrow {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {
  .p-contact-h3 {
    font-size: 22px !important;
  }

  .br-title-480 {
    display: block !important;
  }
}

@media screen and (max-width: 310px) {
  .p-photo-estimate-container {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .p-photo-estimate-text-block {
    max-width: 100% !important;
    word-break: break-word !important;
  }

  .p-photo-estimate-image img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* --- line --- */

@media screen and (max-width: 1142px) {
  .p-line-estimate-arrow {
    display: none !important;
  }

  .p-line-estimate-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media screen and (max-width: 1024px) {
  .p-line-estimate-steps-container {
    justify-content: center !important;
    gap: 30px 20px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
  }

  .p-line-estimate-step-item {
    box-sizing: border-box !important;
    width: 300px !important;
    min-width: 300px !important;
    flex: 0 0 auto !important;
    max-width: 400px !important;
  }

  .p-line-estimate-step-item img {
    width: 100% !important;
    height: auto !important;
  }

  .p-line-estimate-arrow {
    display: none !important;
  }
}

@media screen and (max-width: 380px) {
  .p-line-estimate-section {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .p-line-estimate-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .p-line-estimate-step-item {
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media screen and (max-width: 1240px) {
  .p-contact-banner {
    width: calc(50% - 20px) !important;
    flex-shrink: 1 !important;
    max-width: 500px !important;
  }
}

@media screen and (max-width: 992px) {
  .p-contact-banner-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .p-contact-banner {
    width: 100% !important;
    max-width: 500px !important;
  }
}

@media screen and (max-width: 520px) {
  .p-contact-banner {
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media screen and (max-width: 381px) {
  .br-title-381 {
    display: block !important;
  }
}

@media screen and (max-width: 380px) {
  .p-estimation-section {
    padding: 60px 15px !important;
  }

  .p-estimation-wrapper {
    padding: 40px 20px !important;
  }
}

/* =========================================
   #company styles
   ========================================= */

@media screen and (max-width: 767px) {
  .p-company-section .p-section-inner {
    max-width: 100% !important;
  }
}

@media screen and (max-width: 959px) {
  .p-company-row {
    flex-direction: column !important;
    gap: 30px !important;
  }

  .p-company-table-col,
  .p-company-map-col {
    flex-basis: auto !important;
    width: 100% !important;
    padding-bottom: 0 !important;
  }

  .p-company-row--intro {
    flex-direction: column-reverse !important;
  }
}

@media screen and (max-width: 767px) {
  .p-company-section {
    padding: 40px 0 !important;
  }

  .p-company-row {
    margin-top: 30px !important;
  }

  .p-company-h3 {
    font-size: 20px !important;
    margin-bottom: 15px !important;
  }

  .p-company-table__th,
  .p-company-table__td {
    padding: 10px 15px !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #e0e0e0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  .p-company-table__th {
    background-color: #e9f0f9 !important;
  }
  .p-company-table__td {
    border-top: none !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e0e0e0 !important;
  }

  .p-company-table tr:last-child .p-company-table__td:last-child {
    border-bottom: none !important;
  }
}

@media screen and (max-width: 767px) {
  #company {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .p-company-header {
    margin-bottom: 30px !important;
  }
}

@media screen and (max-width: 767px) {
  .p-company-google-map iframe {
    height: 300px !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 959px) {
  .p-company-image-area {
    min-width: auto !important;
  }
  .p-company-intro-img {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    max-width: 300px !important;
    display: block;
  }
}

/* =========================================
   footer styles
   ========================================= */

@media screen and (max-width: 1565px) {
  .l-site-footer {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  .p-sidebar-footer {
    display: none !important;
  }

  .p-copyright-mobile {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .p-copyright-mobile small {
    display: block !important;
    font-size: 14px !important;
    color: #ffffff !important;
    height: 30px !important;
  }

  .l-site-footer {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    text-align: center !important;
    background-color: #1360ca !important;
  }
}