/* autohtml コンテナクエリによるレスポンシブ対応 */
/* PC画面幅（1280px以上）には一切影響を与えない */

/* コンテナの設定 */
.pc-top {
  container-type: inline-size;
  container-name: main-container;
}

/* 各セクションもコンテナとして設定 */
.header,
._1st-view,
.div10,
.div14,
.div17,
.div24,
.div31,
.div39 {
  container-type: inline-size;
}

/* PC画面幅を保護するベースルール */
@container main-container (min-width: 1280px) {
  /* PC画面では何も変更しない */
}

/* タブレット対応（コンテナ幅 768px - 1279px） */
@container main-container (max-width: 1279px) {
  .pc-top {
    max-width: 100cqw;
    padding: 0 2cqw;
  }

  /* ヘッダー調整 */
  .header {
    padding: 0 2cqw;
  }
  
  .frame-302 {
    gap: 1cqw;
  }
  
  .button, .button2, .link {
    padding: 1cqh 1.5cqw;
  }
  
  .div, .div2, .div3 {
    font-size: 1.8cqw;
    width: auto;
  }

  /* ヒーローセクション */
  ._1st-view {
    padding: 4cqh 2cqw;
    height: auto;
    min-height: 60cqh;
  }
  
  .frame-37 {
    padding: 0 2cqw;
  }
  
  .div4 {
    font-size: 4.5cqw;
  }
  
  .div-4-span, .div-4-span2 {
    font-size: 4.5cqw;
  }
  
  .frame-33, .frame-34 {
    width: 100%;
    max-width: 40cqw;
    height: 8cqh;
  }
  
  .div5 {
    font-size: 2.8cqw;
  }

  /* 統計カード */
  .frame-36 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2cqw;
    width: 100%;
  }
  
  ._5-000, ._97, ._6700, ._5600 {
    font-size: 3.8cqw;
  }

  /* 検索セクション */
  .div10 {
    padding: 6cqh 2cqw;
  }
  
  .heading-2 {
    font-size: 3.5cqw;
  }
  
  .frame-49 {
    flex-wrap: wrap;
    gap: 1.5cqw;
  }
  
  .frame-15, .frame-46, .frame-47, .frame-48 {
    flex: 1 1 45%;
    min-width: 20cqw;
  }

  /* 特徴セクション */
  .div14 {
    padding: 6cqh 2cqw;
  }
  
  .frame-51 {
    gap: 2.5cqw;
  }
  
  .heading-3 {
    font-size: 2.2cqw;
  }
  
  .div16 {
    font-size: 1.4cqw;
  }

  /* 利用の流れ */
  .div17 {
    padding: 6cqh 2cqw;
  }
  
  .frame-512 {
    gap: 2.5cqw;
  }

  /* お客様の声 */
  .div24 {
    padding: 6cqh 2cqw;
  }
  
  .frame-59 {
    gap: 2.5cqw;
  }

  /* FAQ */
  .div31 {
    padding: 6cqh 2cqw;
  }

  /* フッター */
  .div39 {
    padding: 4cqh 2cqw;
  }
}

/* スマートフォン対応（コンテナ幅 767px以下） */
@container main-container (max-width: 767px) {
  /* ヘッダー */
  .header {
    height: auto;
    flex-direction: column;
    padding: 2cqh 2cqw;
  }
  
  @container (max-width: 767px) {
    .frame-30 {
      padding: 0 0 2cqh 0;
      width: 100cqw;
    }
    
    .group-14-1 {
      width: 80cqw;
      height: auto;
    }
    
    .frame-302 {
      padding: 0;
      flex-direction: column;
      width: 100cqw;
      gap: 1cqh;
    }
    
    .button, .button2, .link {
      width: 100%;
      padding: 1.5cqh;
    }
    
    .div, .div2, .div3 {
      font-size: 5cqw;
    }
  }

  /* ヒーローセクション */
  ._1st-view {
    padding: 3cqh 2cqw;
    background-size: cover !important;
    background-position: center !important;
  }
  
  @container (max-width: 767px) {
    .frame-37, .frame-42 {
      flex-direction: column;
      gap: 3cqh;
      width: 100%;
    }
    
    .frame-303 {
      padding: 3cqh 2cqw;
      background: rgba(255, 255, 255, 0.85);
    }
    
    .div4 {
      font-size: 10cqw;
      line-height: 1.3;
    }
    
    .div-4-span, .div-4-span2 {
      font-size: 10cqw;
    }
    
    .frame-33, .frame-34 {
      width: 100%;
      max-width: none;
      height: 10cqh;
      padding: 2cqh 4cqw;
    }
    
    .div5 {
      font-size: 6cqw;
    }
    
    .frame-9 {
      width: 5cqw;
      height: 5cqw;
    }
    
    .ellipse-1 {
      width: 5cqw;
      height: 5cqw;
    }
    
    .div6, .div7 {
      font-size: 6cqw;
    }
  }

  /* 統計カード */
  @container (max-width: 767px) {
    .frame-36 {
      width: 100%;
      grid-template-columns: 1fr;
      gap: 2cqh;
      padding: 2cqw;
    }
    
    .frame-14, .frame-13, .frame-11, .frame-12 {
      height: 12cqh;
    }
    
    .div8, .div9 {
      font-size: 4.5cqw;
    }
    
    ._5-000, ._97, ._6700, ._5600 {
      font-size: 9cqw;
    }
  }

  /* アワードセクション */
  @container (max-width: 767px) {
    .frame-41 {
      width: 100%;
      padding: 2cqw;
    }
    
    .frame-39 {
      flex-direction: column;
      align-items: center;
      gap: 2cqh;
    }
    
    ._2023-1 {
      width: 30cqw;
      height: 30cqw;
    }
    
    .no-1 {
      font-size: 4cqw;
      text-align: center;
    }
    
    ._2023-4-28-2023-5-16-japan-trust-research-10-50-20-60-n-127 {
      font-size: 2.8cqw;
    }
  }

  /* 検索セクション */
  .div10 {
    padding: 5cqh 2cqw;
  }
  
  @container (max-width: 767px) {
    .heading-2 {
      font-size: 7cqw;
    }
    
    .div11 {
      font-size: 3.5cqw;
    }
    
    .frame-49 {
      flex-direction: column;
      gap: 1.5cqh;
    }
    
    .frame-15, .frame-46, .frame-47, .frame-48 {
      flex: 1 1 100%;
      width: 100%;
    }
    
    .button3 {
      padding: 2.5cqh 2cqw;
    }
    
    ._120 {
      font-size: 4cqw;
    }
  }

  /* 特徴セクション */
  .div14 {
    padding: 5cqh 2cqw;
  }
  
  @container (max-width: 767px) {
    .heading-2-4 {
      font-size: 7cqw;
    }
    
    .frame-51 {
      flex-direction: column;
      gap: 2.5cqh;
    }
    
    .div15 {
      width: 100%;
    }
    
    .heading-3 {
      font-size: 5cqw;
    }
    
    .div16 {
      font-size: 3.5cqw;
      line-height: 1.6;
    }
  }

  /* 利用の流れ */
  .div17 {
    padding: 5cqh 2cqw;
  }
  
  @container (max-width: 767px) {
    .background-border-shadow {
      padding: 2cqh;
    }
    
    .div18 {
      font-size: 3.5cqw;
    }
    
    ._3-7 {
      font-size: 6cqw;
    }
    
    .frame-512 {
      flex-direction: column;
      gap: 2.5cqh;
    }
    
    .div19 {
      width: 100%;
    }
    
    .frame-152, .frame-16 {
      width: 5cqw;
      height: 5cqw;
    }
    
    ._1, ._2, ._32, ._4 {
      font-size: 5cqw;
    }
    
    .div20 {
      font-size: 3.5cqw;
    }
    
    .div21 {
      font-size: 3.2cqw;
    }
    
    .link2 {
      padding: 2cqh 3cqw;
    }
    
    .div22 {
      font-size: 4.5cqw;
    }
    
    .div23 {
      font-size: 3.5cqw;
    }
  }

  /* お客様の声 */
  .div24 {
    padding: 5cqh 2cqw;
  }
  
  @container (max-width: 767px) {
    .heading-22 {
      font-size: 7cqw;
    }
    
    .div25 {
      font-size: 3.5cqw;
    }
    
    .frame-59 {
      flex-direction: column;
      gap: 2.5cqh;
    }
    
    .border3 {
      width: 100%;
      padding: 3cqh 2cqw;
    }
    
    .blockquote {
      font-size: 3.2cqw;
    }
    
    .blockquote2 {
      font-size: 3.5cqw;
      line-height: 1.6;
    }
    
    .background {
      width: 10cqw;
      height: 10cqw;
    }
    
    .div26 {
      font-size: 4.5cqw;
    }
    
    .div27 {
      font-size: 4cqw;
    }
    
    .div28, ._22, .div29 {
      font-size: 3.2cqw;
    }
  }

  /* 統計バー */
  @container (max-width: 767px) {
    .paragraph-background {
      flex-direction: column;
      gap: 2cqh;
      padding: 3cqh 2cqw;
    }
    
    ._98, ._972, ._92 {
      font-size: 9cqw;
    }
    
    .div30 {
      font-size: 3.5cqw;
    }
  }

  /* FAQ */
  .div31 {
    padding: 5cqh 2cqw;
  }
  
  @container (max-width: 767px) {
    .heading-23 {
      font-size: 7cqw;
    }
    
    .div32 {
      font-size: 3.5cqw;
    }
    
    .background-border-shadow2,
    .paragraph-background-border-shadow {
      height: auto;
      min-height: 15cqh;
      padding: 2.5cqh 2.5cqw;
    }
    
    .heading-32, .heading-33, .heading-34, .heading-35 {
      font-size: 4cqw;
      position: relative;
      left: 0;
      top: 0;
    }
    
    .div33, .div36, .div37, .div38 {
      position: relative;
      left: 0;
      top: 1cqh;
      font-size: 3.5cqw;
      line-height: 1.6;
    }
    
    .link3 {
      position: relative;
      left: 0;
      top: 1cqh;
      display: inline;
    }
    
    .div34 {
      font-size: 3.5cqw;
    }
    
    .div35 {
      position: relative;
      left: 0;
      top: 1cqh;
      display: inline;
    }
    
    .link4 {
      padding: 1.8cqh 2.5cqw;
    }
    
    .q-a {
      font-size: 4cqw;
    }
  }

  /* フッター */
  .div39 {
    padding: 4cqh 2cqw;
  }
  
  @container (max-width: 767px) {
    .frame-66 {
      flex-direction: column;
      gap: 2cqh;
      align-items: center;
      text-align: center;
    }
    
    .group-14-2 {
      width: 70cqw;
      height: auto;
    }
    
    .heading-24 {
      font-size: 3.5cqw;
      line-height: 1.6;
    }
    
    .frame-69 {
      flex-direction: column;
      gap: 3cqh;
      align-items: center;
      text-align: center;
    }
    
    .frame-65, .frame-672, .frame-68 {
      width: 100%;
    }
    
    .heading-25 {
      font-size: 4.5cqw;
    }
    
    .heading-26 {
      font-size: 3.5cqw;
    }
    
    ._2025-bipe-all-rights-reserved {
      font-size: 3cqw;
    }
  }
}

/* コンテナクエリのフォールバック（ブラウザサポート） */
@supports not (container-type: inline-size) {
  /* フォールバックとして既存のメディアクエリを使用 */
  @import url('/autohtml/responsive.css');
}