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

/* =========================================
   1. 全般 / 共通設定
   ========================================= */
@media screen and (max-width: 960px) {
  .br-960 {
    display: block !important;
  }
}

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

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

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

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

@media screen and (max-width: 992px) {
  .p-business-main-content {
    flex-direction: column !important;
  }

  .p-service-main-visual,
  .p-business-main-image-wrap {
    width: 100% !important;
    max-width: 400px !important;
  }

  .p-business-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* =========================================
   3. #troubleshooting (問題解決セクション)
   ========================================= */

@media screen and (max-width: 1200px) {
  .p-trouble-grid {
    max-width: 984px !important;
    width: auto !important;
    margin: 0 auto !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  .p-trouble-item {
    height: auto !important;
    width: 100% !important;
    max-width: 480px !important;
    padding: 15px !important;
  }
  .p-trouble-content-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
  }
  .p-trouble-visual {
    flex-shrink: 0;
    width: 115px !important;
  }
  .p-trouble-solution {
    flex-grow: 1 !important;
    text-align: left !important;
  }
  .br-trouble-pc {
    display: none !important;
  }
  #troubleshooting .p-section-inner {
    padding: 40px 0px !important;
  }
}

@media screen and (max-width: 992px) {
  .p-trouble-grid {
    width: 100% !important;
    max-width: 728px !important;
  }
  .p-trouble-content-wrap {
    display: block !important;
  }
  .p-trouble-visual {
    margin: 0 auto !important;
  }
  .p-trouble-solution {
    width: 100% !important;
    margin-top: 10px !important;
  }
  .p-trouble-catch {
    font-size: 24px !important;
    margin: 40px 0 !important;
  }
}

@media screen and (max-width: 880px) {
  .p-trouble-catch {
    font-size: 20px !important;
    margin: 40px 0 !important;
  }
}

@media screen and (max-width: 357px) {
  .p-trouble-catch {
    font-size: 18px !important;
    margin: 40px 0 !important;
  }
}

@media screen and (max-width: 324px) {
  .p-trouble-catch {
    font-size: 17px !important;
    margin: 40px 0 !important;
  }
}

@media screen and (max-width: 992px) {
  .p-company-catch {
    font-size: 24px !important;
    margin: 40px 0 !important;
  }
}

@media screen and (max-width: 880px) {
  .p-company-catch {
    font-size: 20px !important;
    margin: 40px 0 !important;
  }
}

@media screen and (max-width: 357px) {
  .p-company-catch {
    font-size: 18px !important;
    margin: 40px 0 !important;
  }
}

@media screen and (max-width: 324px) {
  .p-company-catch {
    font-size: 17px !important;
    margin: 40px 0 !important;
  }
}

/* 1039px以下で画像がはみ出さないように設定 */
@media screen and (max-width: 1039px) {
  .p-trouble-cause__image-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px; /* 左右に少し余白が欲しい場合 */
    box-sizing: border-box;
  }

  .p-trouble-cause__image {
    width: 100% !important;
    height: auto !important; /* アスペクト比を維持 */
    display: block;
    margin: 0 auto;
  }
}

/* =========================================
   4. 詳細サービス / 工程 / アイコン
   ========================================= */

@media screen and (max-width: 1280px) {
  .ac-type-horizontal-wrapper > p {
    flex: 1 1 52.5% !important;
    min-width: 400px !important;
  }
  .ac-type-image-group-horizontal {
    flex: 1 1 47.5% !important;
    gap: 30px !important;
  }
}

@media screen and (max-width: 1110px) {
  .p-service-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

@media screen and (max-width: 1043px) {
  .p-detail-service-grid {
    grid-template-columns: 1fr !important;
    gap: 50px 0 !important;
  }

  .p-detail-service-item {
    display: block !important;
  }
  .p-detail-service-item > p {
    float: left !important;
    width: 52.5% !important;
    padding-right: 10px;
  }
  .p-detail-image-group,
  .p-detail-image-group_a {
    float: right !important;
    width: 47.5% !important;
    gap: 20px;
  }
  .p-detail-service-item::after {
    content: "";
    display: table;
    clear: both;
  }
}

@media screen and (max-width: 992px) {
  /* ① 縦並びの復元（既存のデザインを壊さず配置のみ変更） */
  .p-detail-service-item {
    display: flex !important;
    flex-direction: column !important;
  }

  .p-detail-service-item > p {
    width: 100% !important;
    padding-right: 0 !important;
    min-height: auto !important; /* 縦並び時に大きな余白が出ないよう調整 */
    float: none !important;
  }

  .p-detail-image-group,
  .p-detail-image-group_a {
    width: 100% !important;
    margin-top: 15px !important;
    justify-content: center !important;
    float: none !important;
  }
}

@media screen and (max-width: 992px) {
  /* ① p-detail-service-item の縦並び */
  .p-detail-service-item {
    display: flex !important;
    flex-direction: column !important;
  }

  .p-detail-service-item > p {
    width: 100% !important;
    padding-right: 0 !important;
    min-height: auto !important;
    float: none !important;
  }

  .p-detail-image-group,
  .p-detail-image-group_a {
    width: 100% !important;
    margin-top: 15px !important;
    justify-content: center !important;
    float: none !important;
  }

  /* ② ac-type-horizontal-wrapper の縦並び */
  .ac-type-horizontal-wrapper {
    display: flex !important;
    flex-direction: column !important; /* 横並びから縦並びに */
    align-items: center !important;
  }

  .ac-type-horizontal-wrapper > p {
    width: 100% !important; /* 幅固定(630px)を解除 */
    max-width: 100% !important;
    margin-bottom: 30px !important;
  }

  .ac-type-image-group-horizontal {
    width: 100% !important; /* 幅固定(570px)を解除 */
    justify-content: center !important;
    gap: 30px !important; /* 狭い画面に合わせて間隔を調整 */
  }
}

/* --- 992px以下：テキストと画像を縦並びにする --- */
@media screen and (max-width: 992px) {
  .p-detail-main-wrap {
    /* 横並びのグリッドを「1列」に変更して縦に積む */
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  /* 画像を中央に寄せたい場合 */
  .p-detail-main-image {
    text-align: center !important;
  }

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

@media screen and (max-width: 992px) {
  /* メインカード：親要素を中央寄せにして、中身を左揃えに固定 */
  .p-service-module__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 子要素（画像・テキスト箱）自体は中央に置く */
    padding: 30px 40px !important;
    border-radius: 10px !important;
    width: 100% !important;
    gap: 30px !important; /* 余白を少し広げて調整 */
  }

  /* 画像：中央に配置し、大きすぎないように制限 */
  .p-service-main-visual {
    width: 100% !important;
    max-width: 450px !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important; /* 画像を中央に */
  }

  /* テキスト箱：ここを左揃えにすることで「文字は左・箱は中央」を作る */
  .p-service-main-text-wrap {
    width: 100% !important;
    max-width: 500px !important; /* 購入セクションに合わせて幅を制限 */
    text-align: left !important; /* flex-startの代わりにleftを使用 */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* 中身のボタン等も左に寄せる */
  }

  .p-service-main-title,
  .p-business-main-title {
    font-size: 26px !important;
    margin-bottom: 15px !important;
  }

  /* 前回の指示に基づき、560px以下で変わる前の段階として3列を維持 */
  .p-service-icon-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media screen and (max-width: 480px) {
  .p-service-main-title,
  .p-business-main-title {
    font-size: 22px !important;
    margin-bottom: 15px !important;
  }
}

/* --- 480px以下：アイコングリッドを2列*3段に変更 --- */
@media screen and (max-width: 480px) {
  .p-service-icon-grid {
    display: grid !important;
    /* 横2列に固定 */
    grid-template-columns: repeat(2, 1fr) !important;
    /* 画面からはみ出さないよう、親の幅を制限 */
    width: 100% !important;
    max-width: 100vw !important;
    /* paddingを含めたサイズ計算を正しく行う */
    box-sizing: border-box !important;
    padding: 0 15px !important;
    gap: 20px 10px !important;
  }

  /* 子要素（アイコンとテキストのセット）の幅調整 */
  .p-service-icon-item {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* --- 480px以下（または420px以下）の修正 --- */
@media screen and (max-width: 480px) {
  .ac-type-horizontal-wrapper > p {
    /* 400pxの固定制限を解除して画面幅に合わせる */
    min-width: 0 !important;
    flex: 1 1 100% !important;

    /* 文字が端に寄りすぎないよう余白を確保 */
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }

  /* 親要素も念のため横幅を制限 */
  .ac-type-horizontal-wrapper {
    display: flex !important;
    flex-direction: column !important; /* 前回の縦一列化と連動 */
    width: 100% !important;
    overflow: hidden; /* はみ出しをカット */
  }
}

/* =========================================
   560px以下の修正：グリッドの1列化とテキスト中央寄せ
   ========================================= */
@media screen and (max-width: 560px) {
  /* グリッドを横1列に変更 */
  .p-trouble-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 25px !important; /* 広めの間隔を採用 */
    width: 100% !important;
  }

  /* アイテムと解決策テキスト：左寄せのまま中央に配置 */
  .p-trouble-grid-item,
  .p-trouble-solution-text {
    width: fit-content !important; /* 中身の幅に合わせる */
    max-width: 90% !important; /* 画面端に密着するのを防ぐ */
    margin-left: auto !important; /* ブロック自体を中央へ */
    margin-right: auto !important; /* ブロック自体を中央へ */
    text-align: left !important; /* 文字は左揃えを維持 */
    box-sizing: border-box !important;
    display: block !important; /* 確実にfit-contentを効かせる */
  }
}

/* =========================================
   480px以下の修正：はみ出し解消とサイズ調整
   ========================================= */
@media screen and (max-width: 480px) {
  /* 1280px版の min-width: 400px を解除 */
  .ac-type-horizontal-wrapper > p {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 親要素が画面を突き抜けないようにガード */
  .ac-type-horizontal-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }
}

@media screen and (max-width: 767px) {
  .p-trouble-cause__title,
  .p-senjyo-catch {
    /* デザインに合わせてサイズを調整してください（例：24px） */
    font-size: 28px !important;
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
    text-align: center !important; /* タイトルは中央寄せが一般的ですが、左寄せが良い場合は left に変えてください */
  }
}

@media screen and (max-width: 390px) {
  .p-trouble-cause__title,
  .p-senjyo-catch {
    /* デザインに合わせてサイズを調整してください（例：24px） */
    font-size: 24px !important;
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
    text-align: center !important; /* タイトルは中央寄せが一般的ですが、左寄せが良い場合は left に変えてください */
  }
}

/* --- 767px以下：メーカーロゴ等のグリッドを2列*3段に変更 --- */
@media screen and (max-width: 767px) {
  .p-business-grid {
    display: grid !important;
    /* 横2列に固定（要素が6つの場合、自動で3段になります） */
    grid-template-columns: repeat(2, 1fr) !important;

    /* 画面幅に収めるための設定 */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    /* 余白の調整（お好みに合わせて調整してください） */
    gap: 15px !important;
    padding: 0 10px !important;
  }

  /* グリッド内アイテムの調整 */
  .p-business-grid-item {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* アイテム内の画像がはみ出さないようにガード */
  .p-business-grid-item img {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media screen and (max-width: 580px) {
  /* 親要素：高さの制限を解除し、幅を100%に */
  .p-business-main-image-wrap {
    width: 100% !important;
    height: auto !important; /* 固定高さを解除 */
    max-height: none !important;
    overflow: visible !important; /* はみ出しを隠さない */
    display: block !important;
  }

  /* 画像自体：幅100%で、高さは自動計算にする */
  .p-business-main-image-wrap img {
    width: 100% !important;
    height: auto !important; /* これでアスペクト比が維持されます */
    max-width: 100% !important;
    object-fit: contain !important; /* 全体が表示されるように調整 */
    display: block !important;
    margin: 0 auto !important;
  }
}

@media screen and (max-width: 992px) {
  .p-business-main-content {
    /* 両端揃えを解除し、上（または左）寄せに変更 */
    justify-content: flex-start !important;

    /* 要素間の距離を、service-moduleと同じ25px〜30pxに固定 */
    gap: 25px !important;

    /* 縦並びの際に余計な高さを持たないように調整 */
    height: auto !important;
    align-items: center !important; /* または flex-start (お好みで) */
  }

  /* 画像側の余計な余白（margin-rightなど）をリセット */
  .p-business-main-image-wrap {
    margin: 0 !important;
    flex: 0 0 auto !important; /* 画像が勝手に広がったり縮みすぎたりするのを防ぐ */
  }

  /* テキスト側の余白もリセット */
  .p-business-main-text-wrap {
    margin: 0 !important;
    flex: 1 !important; /* 残りの幅を適切に埋める */
  }
}

/* --- 400px以下：メーカーロゴ等のグリッドを1列に変更 --- */
@media screen and (max-width: 400px) {
  .p-business-grid {
    /* 横1列に変更 */
    grid-template-columns: 1fr !important;

    /* 縦に並んだ時のアイテム同士の間隔を調整 */
    gap: 20px !important;

    /* 中央に寄せるための設定 */
    justify-items: center !important;
  }

  .p-business-grid-item {
    /* 1列のときは少し幅を絞ると綺麗に見えます（お好みで調整） */
    max-width: 250px !important;
    margin: 0 auto !important;
  }
}

/* --- 407px以下：メーカー紹介文のサイズ調整 --- */
@media screen and (max-width: 407px) {
  .p-business-catch {
    /* 画面幅に合わせて小さく調整（現在のサイズに合わせて数値を微調整してください） */
    font-size: 20px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    /* 文字が詰まって見える場合は少しだけ字間を広げる */
    letter-spacing: 0.02em !important;
  }
}

@media screen and (max-width: 320px) {
  .p-business-catch {
    /* 画面幅に合わせて小さく調整（現在のサイズに合わせて数値を微調整してください） */
    font-size: 18px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    /* 文字が詰まって見える場合は少しだけ字間を広げる */
    letter-spacing: 0.02em !important;
  }
}

/* =========================================
   #business styles
   ========================================= */

.p-business-header {
  margin-left: -40px !important;
  margin-right: -40px !important;
}

@media screen and (max-width: 992px) {
  .p-business-merits-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    max-width: none !important;
  }

  .p-business-merits-wrap .p-section-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }

  .p-merit-title {
    font-size: 22px !important;
  }

  .p-merit-body {
    padding: 20px !important;
    gap: 15px !important;
  }

  .p-merit-image {
    width: 80px !important;
    height: 100px !important;
  }
}

@media screen and (max-width: 767px) {
  .p-business-header {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }
}

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

  .p-business-note {
    font-size: 14px !important;
    text-align: center !important;
    margin-top: 20px !important;
    margin-right: 0px !important;
  }
}

@media screen and (max-width: 992px) {
  .p-business-background-wrap {
    padding: 50px 0px;
  }
}