/* 
==========================================
= SELL/TRADE PAGE - Additional Styles
= Adjusted for 3-column fitting
==========================================
*/

/* 1. Hero Section (.sell-hero-section) */
/* 
----------------------------------
  SELLページ専用 Heroセクション
----------------------------------
*/
/* ヒーローセクションの調整 */
.sell-hero-section {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 120px 0; /* パディングを増やして空間を広げる */
    text-align: center;
    min-height: 500px; /* 高さを増やす */
    width: 100vw; /* ビューポート幅いっぱいに広げる */
    margin-left: calc(-50vw + 50%); /* 中央揃えのための調整 */
    left: 0;
    right: 0;
    max-width: 100%; /* 幅の制限を解除 */
    box-sizing: border-box;
  }
  
  /* オーバーレイを少し薄くして視認性を高める */
  .sell-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 透明度を0.4に設定 */
    z-index: 1;
  }
  
  /* コンテナのz-indexを確実に設定 */
  .sell-hero-section .container {
    position: relative;
    z-index: 2;
    max-width: 1200px; /* コンテンツ自体は適切な幅に制限 */
    margin: 0 auto;
    padding: 0 15px;
  }
  
  /* タイトルのスタイル */
  .sell-hero-section h2.h1 {
    font-size: 2.6rem; /* サイズを大きく */
    font-weight: 700; /* 太字に */
    margin-bottom: 1.5rem; /* 下マージンを増やす */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); /* テキストシャドウで視認性向上 */
    letter-spacing: 1px; /* 文字間隔を少し広げる */
  }
  
  /* サブタイトルのスタイル */
  .sell-hero-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }
  
  /* テキストのスタイル */
  .sell-hero-section h4 {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }
  
  /* レスポンシブ対応 */
  @media (max-width: 767px) {
    .sell-hero-section {
      padding: 80px 0; /* モバイルでのパディング調整 */
      min-height: 300px; /* モバイルでの最小高さ */
      background-size: cover;
      background-position: center center;
    }
    
    .sell-hero-section h2.h1 {
      font-size: 1.8rem; /* モバイルでは少し小さく */
    }
    
    .sell-hero-section h3 {
      font-size: 1.2rem;
    }
    
    .sell-hero-section h4 {
      font-size: 1rem;
    }
  }
  
  /* WordPressテーマの幅制限を上書き */
  body .sell-hero-section {
    max-width: none !important;
  }
  
  /* 2. Content Section (.sell-content-section) */
  .sell-content-section {
    padding: 60px 0;
    background-color: #fff;
  }
  .sell-content-section.bg-light {
    background-color: #f9f9f9;
  }
  
  .sell-content-section h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  .sell-content-section h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  .sell-content-section .h5 {
    font-size: 1.1rem;
  }
  
  /* 3. Layout (.container, .row, .col-*) */
  
  /* コンテナ幅をやや広げる or 余白を少なく */
  .container {
    width: 95%;           /* 90%→95%に拡張 */
    max-width: 1400px;    /* 1200px→1400pxに拡張 */
    margin: 0 auto;
  }
  
  /* rowのマイナス余白を小さく */
  .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;  /* 以前は -15px */
  }
  
  /* カラムのpaddingも小さく */
  .row > [class*="col-"] {
    padding: 0 10px;  /* 以前は 0 15px */
  }
  
  /* 768px以上で .col-md-4 => calc(33.333% - 20px) */
  @media (min-width: 768px) {
    .col-md-4 {
      flex: 0 0 calc(33.333% - 20px); /* 幅から20px分引いて余白を確保 */
      max-width: calc(33.333% - 20px);
    }
    .col-md-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-md-8 {
      flex: 0 0 66.6667%;
      max-width: 66.6667%;
    }
    .col-md-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
  
  /* 4. Card Component */
  .card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    flex-direction: column; 
  }
  .card-body {
    padding: 1rem;
    flex: 1; 
  }
  .h-100 {
    height: 100%;
  }
  
  /* 5. Text Utilities */
  .text-center {
    text-align: center;
  }
  .text-primary {
    color: #0068B7;
  }
  .text-info {
    color: #0068B7;
  }
  .font-italic {
    font-style: italic;
  }
  .font-weight-bold {
    font-weight: bold;
  }
  
  /* 余白系 */
  .mb-0 {
    margin-bottom: 0 !important;
  }
  .mb-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-5 {
    margin-bottom: 3rem !important;
  }
  .mb-1 {
    margin-bottom: 0.5rem !important;
  }
  .mt-3 {
    margin-top: 1rem !important;
  }
  .my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .offset-xl-2 {
    margin-left: 16.6667% !important;
  }
  .offset-lg-1 {
    margin-left: 8.3333% !important;
  }
  
  /* 6. img-fluid */
  .img-fluid {
    max-width: 100%;
    height: auto;
  }
  
  /* SELL専用のカードスタイル - 統合版 */
  .sell-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .sell-card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
  }
  
  .sell-card-icon {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    color: #0068B7; /* text-primary の色 */
  }
  
  .sell-card-title {
    color: #0068B7; /* text-info の色 */
    font-size: 1.25rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .sell-card-text {
    flex: 1;
    width: 100%;
    display: block;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 0;
    text-align: center;
  }
  
  /* フッターテキスト用 - これは個別に残す */
  .sell-footer-text {
    display: block;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: bold;
    color: #333;
    margin: 0 auto;
    max-width: 700px;
  }
  
  /* 既存のカードクラスを使用する場合の調整（移行期間用） */
  .card-body .text-info,
  .card-body .text-primary {
    margin-bottom: 0.5rem;
  }
  
  .card-body h4.text-primary.mt-1,
  .card-body h3.text-info.h4.mt-1 {
    margin-top: 0.5rem;
  }
  
  /* レスポンシブ対応 */
  @media (min-width: 768px) {
    .sell-content-section .card {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .sell-content-section .card-body {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
  
  /* SELL専用のカードスタイル（HOW IT WORKSとTHREE BIG REASONSの両方に使用） */
  .sell-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 1.5rem;
  }
  
  .sell-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
    text-align: center;
  }
  
  .sell-card-icon {
    font-size: 3.5rem;
    color: #0068B7; /* text-primaryの色 */
    margin-bottom: 0.5rem;
  }
  
  /* HOW IT WORKSのタイトル用 */
  .sell-card-title {
    color: #0068B7; /* text-primaryの色 */
    font-size: 1.25rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
  
  /* THREE BIG REASONSのタイトル用 - 色違い */
  .sell-content-section:not(.bg-light) .sell-card-title {
    color: #0068B7; /* text-infoの色 */
  }
  
  .sell-card-text {
    flex: 1;
  }

/* SELL専用のボタンスタイル - 余白修正版 */
.sell-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0068B7;
  color: #fff;
  padding: 15px 30px;
  border-radius: 4px;
  font-size: 1.2rem;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin: 1rem auto;
  line-height: 1;
}

.sell-contact-btn-icon {
  margin-right: 8px;
  display: flex;
  align-items: center;
}

.sell-contact-btn-text {
  display: inline-block;
}

.sell-contact-btn:hover {
  background-color: #005294;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.sell-contact-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
  .sell-contact-btn {
    padding: 12px 20px;
    font-size: 1rem;
    width: 90%;
    max-width: 300px;
  }
}