/* ======[ SP対応スタイル (max-width: 768px) ]====== */
@media screen and (max-width: 768px) {
  body {
      overflow-x: hidden; /* 横スクロール禁止 */
  }

  /* --- 共通コンテナ調整 --- */
  .intro-container,
  .movie-container,
  .works-container,
  .data-container,
  .sv-container,
  .qa-body-container,
  .job-body-container {
      width: 100% !important; /* PC用の固定幅を強制上書き */
      max-width: 100%;    /* PC用の固定幅を強制上書き */
      height: auto; /* 基本的に高さを自動にし、コンテンツに合わせる */
      padding-left: 15px;
      padding-right: 15px;
      box-sizing: border-box;
      overflow-x: hidden; /* 各コンテナでも横スクロール禁止 */
  }

  /* --- intro-container (SP) --- */
  .intro-container {
      background-image: url('../image_SP/bg/saiyo_main_SP_01A.jpg');
      background-size: cover;
      background-position: top center;
      padding:0;
  }


  .intro-container .logo {
    top: 18px;
    left: 15px;
    z-index: 10;
    display: block;
    width: 135px;
    height: auto;
  }

 /* SP用メイン画像コンテナのスタイル */
  .intro-container .intro-main-image-sp {
      display: block; /* picture要素をブロック要素に */
      width: 100%; /* 親要素いっぱいに広げる */
  }


  .intro-container .intro-main-image-sp img { /* picture内のimg要素 */
      display: block;
      width: 100%;
      height: auto; /* アスペクト比を保つ */
  }
  /* PC用の背景画像指定を打ち消す（より確実に） */
  .intro-container {
      background-image: none !important;

  }


  /* --- movie-container (YouTube SP) --- */
  .movie-container {

      /* max-width: 375px;  コンテナの最大幅を指定 */
      min-height: 400px;
      margin-left: auto; /* 中央寄せ */
      margin-right: auto;/* 中央寄せ */
      /* box-sizing: border-box; */
      align-items: flex-start;
      background-image: url('../image_SP/bg/saiyo_main_SP_01B.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top center;
      padding:0;

  }


  .movie-container .youtube {
      margin-top:28px;
      width: 320px;       /* 動画の幅を指定 */
      height: 180px;      /* 動画の高さを指定 */

  }

    /* JSで追加する再生ボタンのスタイル */
  .movie-container .youtube .play-button-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 68px;  /* SPでのボタンサイズ */
      height: 48px; /* SPでのボタンサイズ (アスペクト比調整) */
      background-color: #FF0000;
      border-radius: 12px; /* SP用に角丸調整 */
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 3;
  }

  .movie-container .youtube iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
  }

  /* --- works-container (工程タイムライン SP) --- */
  /* PC/SP表示切り替え */
  .works-PC { display: none; }
  .works-SP { display: block; }

  .works-container {
      height:1200px; 
      padding-top: 200px; /* 上部余白 */
      padding-bottom: 50px; /* 下部余白 */
      background-image: url('../image_SP/bg/saiyo_main_SP_02.jpg');
      background-size: cover;
      background-position: top center;
      overflow-y: hidden;
  }

  .line-segment { /* SPでの線の太さ */
      width: 50px;
      /* left, transform はPCのものを継承 */
  }

  .works-container .sections { /* SPでのセクションコンテナのマージン */
      margin-top: 0px; /* PCより小さく */
  }

  .step { /* SPでの各工程 */
      width: 145px; /* 画像サイズに合わせる */
      height: 145px;
      margin-left: auto; /* 中央寄せ */
      margin-right: auto; /* 中央寄せ */
      /* margin-bottom はJSで設定 */
  }
  .step img {
    width:145px;
    height:145px;
  }

  .loading-indicator { /* SPでのローディングアイコン */
      width: 40px;
      height: 40px;
  }

  /* --- data-container (SP) --- */
  .data-container {
      background-image: url('../image_SP/bg/saiyo_main_SP_03.jpg');
      background-size: cover;
      background-position: top center;
      padding: 80px 0 50px; /* 上下パディング */
      /* height:700px; auto推奨 */
      /* overflow:scroll; auto推奨 */
  }
  .image-display-area { /* SPでのデータ画像エリア */
      width: 90%; /* 画面幅に合わせる */
      width:250px;
      margin: 0 auto; /* 上下マージンは親のpaddingで調整 */
  }
  

  /* --- sv-container (先輩の声 SP) --- */
  /* PC/SP表示切り替え */
  .sv-for-mobile { display: block; }
  .sv-for-PC { display: none; }

  .sv-container {
      padding: 110px 0 50px; /* 上下パディング */
      background-image: url('../image_SP/bg/saiyo_main_SP_04.jpg');
      background-size: cover;
      background-position: top center;
      height:1110px;
      /* overflow:scroll; auto推奨 */
  }
  .sv-container .image-container {
      flex-direction: column; /* 縦積み */
      align-items: center; /* 中央揃え */
      gap: 21px; /* 要素間のマージン */
      padding: 0; /* 親で設定済み */
  }

  .sv-container .image-pair {
      width: 85%; /* コンテナ幅に対する割合 */
      max-width: 228px; /* 最大幅 */
      height: auto; /* アスペクト比維持のためauto */
      position: relative;
      margin: 0 auto;
      cursor: pointer;
  }
  .sv-container .image-pair::before { /* アスペクト比維持 (元の比率 540/400 = 1.35) */
      content: "";
      display: block;
      padding-top: 135%; /* (高さ / 幅) * 100% */
  }

  .sv-container .image-a,
  .sv-container .image-c {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain; /* SPではcontainが良い場合も */
      backface-visibility: hidden;
      transition: opacity 0.3s ease-in-out;
  }
  .sv-container .image-pair .image-a { opacity: 1; z-index: 2; }
  .sv-container .image-pair .image-c { opacity: 0; z-index: 1; }

  .sv-container .button-wrapper {
      position: absolute;
      width: 100%;
      height: calc(100% * (360 / 540)); /* image-pairの高さに対する比率 (人物部分の高さ) */
      top: -31px;
      left: 0;
      z-index: 3;
      perspective: none; /* SPでは3D回転なし */
      transform: none;   /* SPでは3D回転なし */
  }

  .sv-container .button-flipper {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: flat; /* SPでは3D空間不要 */
      transform: none;       /* SPでは回転なし */
  }

  .sv-container .image-b,
  .sv-container .image-d {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain !important;
      backface-visibility: hidden;
      transition: opacity 0.3s ease-in-out;
      transform: rotateY(0deg) !important; /* PC用回転をリセット */
  }
  .sv-container .image-pair .image-b { opacity: 1; z-index: 5; }
  .sv-container .image-pair .image-d { opacity: 0; z-index: 4 !important; }



  /* PCホバー用のtransformはSPでは不要なので、確実に無効化 */
  .sv-container .image-pair:hover .button-flipper { transform: none !important; }
  .sv-container .image-pair:hover .image-a { opacity: 1 !important; }
  .sv-container .image-pair:hover .image-c { opacity: 0 !important; }
  .sv-container .image-pair:hover .image-b { opacity: 1 !important; }
  .sv-container .image-pair:hover .image-d { opacity: 0 !important; }

  /* JavaScriptで 'is-active' クラスを image-pair に付与したときのスタイル (タップ時) */
  .sv-container .image-pair.is-active .button-flipper { transform: none !important; }
  .sv-container .image-pair.is-active .image-a { opacity: 1 !important; }
  .sv-container .image-pair.is-active .image-c { opacity: 0 !important; }
  .sv-container .image-pair.is-active .image-b { opacity: 1 !important; }
  .sv-container .image-pair.is-active .image-d { opacity: 0 !important; }

  /* ポップアップ関連の調整 (SP) */
  .sv_popup-content {
      max-width: 95%; /* 画面幅いっぱいにならないように少し余白 */
      max-height: 95%;
  }
   .sv_popup .close-button {
      top: 10px;
      right: 15px;
      font-size: 30px;
  }


  /* --- qa-body-container (Q&A SP) --- */
  .qa-body-container {
      padding: 40px 0;
      /* overflow:scroll; auto推奨 */
  }
  .qa-body-container .qa_title {
      position: static;
      margin: 0 auto 30px auto; /* 上マージン調整、下マージンを少し減らす */
      width: 45px;
  }
  /* .qa-body-container .qa_title img はPCと同じ */
  .qa-body-container .summary_qa-container {
      width: 100%; /* 親のpaddingに合わせる */
      /* height:auto; */
      padding-top: 0;
      padding-bottom: 20px;
      margin-bottom: 0; /* qa-body-containerのpadding-bottomで調整 */
  }
  .qa-container {
      padding-left: 10px;
      padding-right: 10px;
  }
  .question {
      font-size: 1rem; /* SP用に調整 */
      padding-left: 1.3em;
      text-indent: -1.3em;
  }
  /* .question > div はPCと同じ */
  .toggle-button {
      width: 20px;
      height: 20px;
      font-size: 16px;
      padding: 8px;
  }
  .toggle-button.minus {
      /* サイズ変更はpaddingで行うため、width/heightの再指定は不要 */
  }
  .answer {
      font-size: 0.95rem; /* SP用に調整 */
      padding-left: 1.05em;
      text-indent: -1.05em;
      /* margin-left: 5px; はtext-indentで調整 */
  }

  /* --- job-body-container (募集要項 SP) --- */
  .job-body-container {
      padding: 40px 16px; /* 上下パディング */
      position: relative; /* job-title-mobile のため */
  }
  .job-body-container .job-title-mobile {
      display: block;
      position: static; /* 通常フローに戻す */
      width: 90px; /* タイトル画像の幅に合わせて調整 */
      margin: 0 auto 30px auto; /* 中央寄せ、下マージン */
      /* top, left, transform は不要に */
  }
  .job-body-container .job-title-mobile img {
      display: block;
      width: 100%;
      height: auto;
  }

  .job-body-container main {
      padding-top: 0; /* タイトルが通常フローになったため */
  }
  .job-container {
      width: 100%;
      padding: 0 0 30px; /* 左右パディングは親コンテナ、下パディング調整 */
  }
  .job-details-table {
      font-size: 0.9rem; /* SP用に調整 */
      width: 100%;
  }
  .job-details-table tr {
      border-bottom: 1px solid #eee;
      display: block; /* 各行をブロック要素に */
      margin-bottom: 15px; /* 行間のスペース */
      padding-bottom: 15px; /* 行内の下パディング */
  }
  .job-details-table tr:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
  }
  .job-details-table .detail-label,
  .job-details-table .detail-content {
      display: block;
      width: 100% !important;
      box-sizing: border-box;
      border-right: none !important;
      padding: 5px 0; /* 縦積みの際のラベルと内容の間のパディングを調整 */
      vertical-align: top; /*念のため*/
  }
  .job-details-table .detail-label {
      font-weight: bold;
      /* background-color: #f9f9f9; /* 強調しすぎなら削除 */
      padding-bottom: 2px;
  }
  .job-details-table .detail-content {
      padding-top: 2px;
      padding-left: 0; /* 左インデント不要なら0 */
  }
  /* PC用paddingリセットは不要になるか、影響ない場合はそのままでも可 */
  .job-details-table .first-detail-row .detail-label,
  .job-details-table .first-detail-row .detail-content,
  .job-details-table .last-detail-row .detail-label,
  .job-details-table .last-detail-row .detail-content {
      padding-top: 5px;
      padding-bottom: 5px;
  }


  .job-hosoku {
      font-size: 0.95rem; /* SP用に調整 */
      padding: 30px 10px;
      line-height: 1.6;
  }
  .button-area {
      padding-top: 10px;
  }
  .button-3d_1, .button-3d_2 {
      width: 90%;
      max-width: 300px; /* SPでのボタン最大幅 */
      height: 50px; /* SPでのボタン高さ */
      font-size: 1rem; /* SPでのフォントサイズ */
      border-bottom-width: 6px;
      margin-bottom: 15px;
  }
  .button-3d_1:last-of-type, /* 最後のボタンのマージンを調整 */
  .button-3d_2:last-of-type {
      margin-bottom: 0;
  }
  .button-3d_1:hover, .button-3d_2:hover,
  .button-3d_1:active, .button-3d_2:active {
      transform: translateY(2px);
      border-bottom-width: 4px;
  }

  .br-for-pc{
    display:none;
  }

  .br-for-sp{
    display: block;
  }
}