/* ==========================================
 * 1. ベース設定（スマホ縦向き想定）
 * ========================================== */

.test-section.twotone-back-area {
  padding: 60px 0;
  background: #ffffff;
}

.twotone-back-area .test-container {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  padding: 0;
  gap: 0;
}

.twotone-back-area .test-content-box,
.twotone-back-area .test-image-box {
  flex: 0 0 100%;
  max-width: 100%;
  box-shadow: none;
  border-radius: 0;
}

.twotone-back-area .test-content-box {
  box-sizing: border-box;
  padding: 40px 20px;
  background: #111111; /* スマホ時も黒パネルとして維持 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.twotone-back-area .test-title {
  font-size: 2rem;
  margin-bottom: 25px;
  color: #ffffff;
  letter-spacing: 0.05em;
}

/* 追加：サービスグループの区切り */
.twotone-back-area .service-group {
  margin-bottom: 30px;
}
.twotone-back-area .service-group:last-child {
  margin-bottom: 0;
}

/* 追加：小見出し（法人向け／個人向け） */
.twotone-back-area .service-sub-title {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0 0 10px 0;
}

.twotone-back-area .test-text {
  color: #cccccc;
  line-height: 1.8;
  margin: 0;
  font-size: 0.95rem;
}

.twotone-back-area .test-btn-wrap {
  margin-top: 15px;
}

.twotone-back-area .test-viewmore-btn {
  display: inline-block;
  width: 100%; /* スマホ時は全幅（必要に応じて調整してください） */
  max-width: 240px;
  box-sizing: border-box;
  padding: 12px 0;
  border: 1px solid #ffffff;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.twotone-back-area .test-viewmore-btn:hover {
  background: #ffffff;
  color: #111111;
}

/* 追加：個人向けボタンのコンテナ（スマホは縦並び、PCで横並び） */
.twotone-back-area .personal-btn-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15px;
}

/* 追加：まるんと・コレンドの共通ボタン */
.twotone-back-area .personal-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border: 1px solid #ffffff;
  color: #ffffff;
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.twotone-back-area .personal-btn:hover {
  background: #ffffff;
  color: #111111;
}

.twotone-back-area .personal-btn .btn-name {
  font-weight: bold;
  font-size: 1.05rem;
  margin-bottom: 2px;
}

.twotone-back-area .personal-btn .btn-sub {
  font-size: 0.75rem;
  color: #cccccc;
}

/* ホバー時にサブテキストの色も反転させる */
.twotone-back-area .personal-btn:hover .btn-sub {
  color: #111111;
}

.twotone-back-area .test-image-box img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  box-shadow: none;
}

/* ==========================================
 * 2. スマホ横向き（Landscape）
 * ========================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .twotone-back-area .test-image-box img {
    height: 200px;
  }
}

/* ==========================================
 * 3. タブレット・PC（768px以上 ＆ 501px以上）
 * ========================================== */
@media screen and (min-width: 768px) and (min-height: 501px) {
  .test-section.twotone-back-area {
    padding: 100px 0;
  }

  .twotone-back-area .test-container {
    display: flex !important;
    flex-direction: row;
    align-items: stretch !important; /* 🌟 左右の高さを常に100%綺麗に揃える（元に戻す） */
  }

  .twotone-back-area .test-container.row-reverse {
    flex-direction: row-reverse;
  }

  .twotone-back-area .test-content-box,
  .twotone-back-area .test-image-box {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .twotone-back-area .test-content-box {
    padding: 60px 6%;
    background: #111111;
    z-index: 2;

    /* 🌟 余計な高さ固定（もしあれば）を解除して、上下中央に綺麗にテキストを配置 */
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* 個人向けボタンを横並びにする */
  .twotone-back-area .personal-btn-container {
    flex-direction: row;
  }

  .twotone-back-area .personal-btn {
    flex: 1;
    max-width: 220px;
  }

  .twotone-back-area .test-image-box {
    z-index: 1;
    display: flex !important; /* 画像のコンテナもstretchに対応 */
  }

  .twotone-back-area .test-image-box img {
    width: 100%;
    height: 600px; /* 🌟 基本の高さ。文字がこれを超えたら全体が自然に伸びます */
    object-fit: cover;
  }
}

/* ==========================================
 * 4. 大型PC（1024px以上 ＆ 501px以上）
 * ========================================== */
@media screen and (min-width: 1024px) and (min-height: 501px) {
  .twotone-back-area .test-content-box {
    padding: 80px 8%;
  }

  .twotone-back-area .test-image-box img {
    height: 680px; /* 基本の高さ */
  }
}