/* ベースのスタイル */
.container {
  max-width: 790px;
  margin: 0 auto;
  padding: 20px 0;
}

/* カードのデザイン (共通) */
.card {
  padding: 15px;
  text-align: center;
  height: 100%; /* 高さ揃え */
  box-sizing: border-box;
  background: #fff;
  border-radius: 6px;
  border: 2px solid #002D64;
  box-shadow: 3px 3px 0 0 #E95180;
}
.card h3{
  font-size: 20px;
}
.card p{
  color: #121212;
font-family: "Noto Sans JP";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
text-align: left;
}

.step-label {
  display: inline-block;
  background: #f39c12; /* オレンジ背景 */
  color: #fff;
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.image-area {
  background: #f0f0f0;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Swiperの調整 */
.swiper {
  width: 100%;
  padding-bottom: 40px; /* ページネーション用の余白 */
}

.swiper-slide {
  height: auto; /* カードの高さを揃えるために必要 */
}

/* PC時のスタイル調整 (768px以上) */
@media (min-width: 768px) {
  .swiper-wrapper {
    /* PCではフレックスボックスの中央寄せのように見せる */
    justify-content: center; 
  }
  
  /* PCでは矢印やドットを隠す */
  .swiper-pagination,
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
  
  .card {
     /* PCのみ横並びの間隔調整などが必要なら記述 */
  }
}
/* PC表示 (768px以上) の時だけ適用 */
@media (min-width: 768px) {
  
  /* 1. コンテナの制限を解除 */
  .swiper.mySwiper {
    overflow: visible !important; /* はみ出しを許容（念のため） */
    padding: 0 !important;        /* 余計なパディングを除去 */
  }

  /* 2. スライドを包むラッパーの動きを止める */
  .swiper-wrapper {
    transform: none !important;   /* ★最重要：Swiperによる移動(translate)を無効化 */
    display: flex !important;     /* Flexボックスとして並べる */
    justify-content: center;      /* 中央寄せ */
    gap: 20px;                    /* カード間の余白（JSのspaceBetweenと同じ値推奨） */
    width: 100% !important;       /* 幅を親に合わせる */
    box-sizing: border-box;
  }

  /* 3. 個々のスライド（カード）の幅をCSSで決める */
  .swiper-slide {
    width: calc(33.333% - 20px) !important; /* 3等分から余白分を引く */
    margin: 0 !important;         /* Swiperがつけるmargin-rightを無効化 */
    height: auto !important;      /* 高さを自然に */
  }
}

/* --- SP (767px以下) のコントロールエリア設定 --- */
@media (max-width: 767px) {
    .container {
     padding: 20px 0 0px;
    }  

  /* 1. コントロール全体を横並び（Flex）にする */
  .swiper-controls {
    display: flex;
    justify-content: center; /* 中央寄せ */
    align-items: center;     /* 上下中央 */
    gap: calc(100% - 255px);               /* 矢印とドットの間隔 */
    margin-top: 20px;        /* スライダーとの隙間 */
    padding-bottom: 20px;
    position: relative;      /* 相対配置にする */
  }

  /* 2. Swiperデフォルトの絶対配置を解除する */
  .swiper-controls .swiper-button-next,
  .swiper-controls .swiper-button-prev,
  .swiper-controls .swiper-pagination {
    position: static !important; /* 絶対配置(absolute)を解除 */
    margin: 0 !important;        /* 余計なマージンを削除 */
    transform: none !important;  /* 位置調整をリセット */
  }

  /* 3. ドット（ページネーション）の幅を調整 */
  .swiper-controls .swiper-pagination {
    width: auto !important; /* 全幅ではなく中身に合わせる */
    text-align: center;
  }

  /* 4. 矢印ボタンのデザイン（丸い背景） */
  .swiper-button-next,
  .swiper-button-prev {
    width: 30px;  /* 丸のサイズ */
    height: 30px;
    background-color: #ffffff; /* 白背景 */
    border: solid 1px #002D64;
    border-radius: 50%; /* 丸くする */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影 */
    flex-shrink: 0; /* 縮まないようにする */display: flex;
    justify-content: center;
    align-items: center;
    
    /* フレックスボックス内での配置になるのでtop/left等の指定は不要になります */
  }

  /* 5. 矢印アイコンをSVG画像に変更 */
  
  /* 共通設定 */
  .swiper-button-prev::after,
  .swiper-button-next::after {
    content: "" !important; /* これまで表示していたテキストを空にする */
    display: block;
    width: 12px;  /* SVGを表示させたい幅 */
    height: 12px; /* SVGを表示させたい高さ */
    
    /* ★ここにSVGファイルのパスを指定します★ */
    background-image: url('../img/2026_spring/icon_arrow.svg');
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* 枠内にきれいに収める */
    
    /* Swiperデフォルトのスタイルをリセット */
    font-family: none !important;
    font-size: 0 !important;
    color: transparent !important;
  }

  /* 左矢印（戻る）だけを180度回転（反転）させる */
  .swiper-button-prev::after {
    transform: rotate(180deg);
  }
  
  /* 右矢印（進む）はそのままでOK */
  .swiper-button-next::after {
    transform: rotate(0deg); /* 明示的に指定 */
  }
}

/* --- PC (768px以上) ではコントロールバーごと消す --- */
@media (min-width: 768px) {
  .swiper-controls {
    display: none !important;
  }
}