/* --- メインビジュアルスライダーのスタイル (モバイルファーストに修正) --- */

  /* デフォルト（スマホ）のスタイル */
  .mainvisual {
      width: 100%;
      height: auto; /* スマホでは高さをコンテンツに合わせる */
      padding: 20px 0;
      box-sizing: border-box;
      overflow: hidden;
      background-color: #ffffff;
  }

  .main-visual-swiper {
      width: 100%;
      height: 100%;
  }

  .main-visual-swiper .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  /* === リンク(aタグ)を追加したことによる修正 === */
  .main-visual-swiper .swiper-slide a {
      display: flex; /* aタグをflexコンテナにして中のimgを中央揃え */
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      text-decoration: none; /* リンクの下線を消す */
  }

  .main-visual-swiper .swiper-slide img {
      display: block;
      width: 100%; /* スマホではスライドの幅の90%を基準にする */
      height: auto;
      aspect-ratio: 1 / 1; /* アスペクト比を1:1 (正方形) に固定 */
      object-fit: cover; 
      border-radius: 1px; /* ボックスの角丸 */
      /* box-shadow: 0 10px 25px rgba(0,0,0,0.1); スライドの高さに合わせる */
      margin: 0 auto;
  }

  /* PC・タブレット表示用の設定 (768px以上で適用) */
  @media (min-width: 768px) {
      .mainvisual {
          /* 変更: 高さを固定せず、中の要素（画像）のサイズに合わせる */
          height: auto;
          padding: 40px 0;
      }
      .main-visual-swiper .swiper-slide img {
          /* 変更: スマホで設定した左右の余白をなくし、スライドいっぱいに表示 */
          width: 100%;
          /* aspect-ratio: 1 / 1; はスマホ用の設定が継承されるので正方形が維持される */
      }
  }

  .main-visual-swiper .slide-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      background-color: rgba(0, 0, 0, 0.2);
      padding: 10px 20px;
      border-radius: 5px; /* テキストバックの角丸 */
      text-align: center;
      width: 70%;
      pointer-events: none; /* テキストがリンクのクリックを妨げないようにする */
  }
  .main-visual-swiper .slide-content h2 { margin: 0 0 10px 0; font-size: 1.6rem; line-height:120%; font-weight: 600; }
  .main-visual-swiper .slide-content p { margin: 0; font-size: 1rem; line-height:130%; font-weight: 600; }


  /* --- 事例紹介スライダーのスタイル --- */
  .section {
      padding: 80px 0;
  }
  .client-box {
      height: 100%;
  }
  .text-very-peri { color: #6667ab; }
  .text-blue { color: #0d6efd; }
  .text-red { color: #dc3545; }
  .tx-09 { font-size: 0.9rem; }

  .case-swiper-section {
      overflow: hidden;
  }

  .case-swiper .swiper-wrapper {
      transition-timing-function: linear; 
  }

  .case-swiper .swiper-slide {
      width: 320px; 
      height: auto;
  }