/* TOPページ */

/* 画面全体のコンテナ */
.mainContainer {
  height: 100%;
}

.topCarSelecter {
  display: flex;
  gap: 10px;
  justify-content: left; /* 横方向中央 */
  margin-left: 10%;
  margin-right: 10%;
  margin-top:50px;
  flex-wrap: wrap; /* 内部の要素を折り返す */
  container-type: inline-size;
}

.content_main{
  height: 100%;
  width: 100%;
  background-color: #E9E9E9;
  gap: 0;
  min-height: calc(100vh - var(--header-h)); /* 画面全体の高さ */
  padding-top: 85px;
  box-sizing: border-box;
}

.content_select{
  height: 100%;
  background-color: #fff;
  margin-left: 130px;
  margin-right: 130px;
  border-radius: 20px;
  overflow: hidden;
}

/* タイトル１ */
.content_title{
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左右端に配置 */
  background-color: #E17823;
  margin-top: 30px;
  margin-left: 50px;
  margin-right:  50px;
  margin-bottom: 30px;
  padding: 2rem .5rem 2rem .5rem;
  border-radius: 20px;

  overflow: visible;
  text-overflow: ellipsis;
}
.br-sm br { display: none; }

.select_title_img{
  width: clamp(48px, 20vw, 200px);
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;

}
:root {
  /* 画面幅に連動する基本の飛び出し量（左右共通 4vw）に、
     最小 0.5rem、最大 3rem のガードを付ける */
  --title-nudge: clamp(2rem, 4vw, 3rem);
}

.img_left{
  transform: translateX(calc(-1 * var(--title-nudge)));
}
.img_right{
  transform: translateX(var(--title-nudge));
}
/* タイトル2 */
.text{
  flex: 1 1 auto;             /* 中央領域を広げる */
  color: #fff;
  text-align: center;         /* テキスト中央揃え */
  font-size: clamp(10px, 2.5vw, 28px); /* 画面に応じて調整しつつ最小/最大を保証 */
  font-weight: bold;
  line-height: 1.3;
  margin: 0 0 0 0;
}
/* 車種選択ボックスサイズ調整用コンテナ　01/19調整　 */
.contena3{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; 
  width: 22%;
  min-width: 190px;
  height: auto;
  aspect-ratio:1/1;
  border-radius: 50%;
  border:6px solid transparent;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  container-type: inline-size;
  /*margin: 10px;*/
}
.contena3 + .contena3{
  margin-left: 10px;
}
/*画像領域サイズ調整▼*/
.CarSlecterimg{
 height: 60%;
 text-align: center;
}
.CarSlecterimg> img{
  width: 80%;
  margin: 5%;
}
/*画像領域サイズ調整▲*/
.CarSelecterButton {
  display: flex;
   align-self: center; 
   justify-content: center;
  color: #000000;
  width: 100%;
  height: 30%;
  font-size:10cqw;
  font-weight: bold;
}

/* .contena3::after {  /*右下▼作成　01/19調整
  
content: "";
  position: absolute;
  right: 4%;
  bottom: 4%;

  width: 7%;
  height: 7%;    
  background: #57c3a2fd;

  clip-path: polygon(100% 100%, 0% 100%, 100% 0%);

} */

#comingsoon.is-disabled 
{ 
  pointer-events: none; 
  cursor: not-allowed; 
  opacity: 0.6;
}

a {
    text-decoration: none;
}

/*コンテナにカーソルを合わせたとの処理　01/19調整*/
.contena3:hover {
  border-color: #F0BC3F;
   .CarSelecterButton{
    color: #F0BC3F;;
  }
}
/*SP用ボックス配置調整▼〰127まで　01/19調整*/
@media(orientation: portrait){
  .topCarSelecter{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 2%; 

  }
  .contena3{
    width: 100%;
    min-width: 120px;
    height: auto;
    aspect-ratio:1/1;
  }
  .br-sm br { display: inline; }
  .cntena1{    margin-top: 50px;}
  .site-title{
    font-size: 12vw;
    line-height: 1.2;
    
  }
  .text{
    /* font-size: 5vw; */
    font-size: clamp(13px, 3.2vw, 20px);
  }
  .content_select{
    margin-left: 0;
    margin-right: 0;
  }
  .content_title{
    margin-left: 15px;
    margin-right: 15px;
  }
}
/*▲*/