@charset "utf-8";

/*ここから上部のタブ切り替え*/	
.tab-section{
position: relative;
width: 100%;
display: block;
}
	
.tab-container{
	position: relative;
width: 100%;
display: flex;
justify-content: space-between;
margin: 0.5em 0 0 0 !important;
z-index: 1;
}



.tab-container a{
width: 49%;
display: flex;
flex-direction: column;
}

.tab-band span{
font-size: clamp(12px, 0.74vw, 16px) ; /* 可変フォント */
display: inline-block;
white-space: nowrap;
	line-height: 100%;
}

.tab-band.band-green{
background-color: #14822d !important;
color: #fff;
text-align: center !important;		
}

.tab-band.band-blue{
background-color: #342d8f !important;
color: #fff;
text-align: center !important;		
}

.tab-band{
padding: 0.3em 0.6em;
}

.tab-green,.tab-title.tab-green h3{
background-color: #c8f3b6 !important;
color: #000 !important;
}

.tab-blue,.tab-title.tab-blue h3{
background-color: #aacff9 !important;
color: #000 !important;
}

.tab-title{
width: 100%;
margin: 0 auto;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: auto !important;
padding: 0 !important;
}	
.tab-title img{
width: 20%;
max-width: 77px;
margin: 0 0.5em 0 0 !important;
}

.tab-title h3{
font-size: clamp(12px, 0.77vw, 17px) ; /* 可変フォント */
padding: 1.2em 0.2em 0.0em 0.2em !important;
margin: 0!important;
white-space: nowrap;
}
	

	
.tab-title h3 span{
display: block;
line-height: 100%;
margin-top: 0.15em;
white-space: nowrap;           /* 改行しない */
font-size: clamp(17px, 2.8vw, 28px) !important; /* 可変フォント */
max-width: 100%;               /* 親幅を超えないように */
text-align: center;            /* 文字中央寄せ（任意） */

}
	
	
.tab-title span:before{
	content: "▶";
	font-size: 0.5em;
  position: relative;
  top: -0.3em; 
	margin-right: 0.25em;
}

	
p.tab-desc{
font-size: clamp(12px, 0.68vw, 17px) ; /* 可変フォント */
text-align: center;
display: block !important;
padding-bottom: 1.3em;
max-width: 100% !important;
overflow-wrap: anywhere !important;
margin: 0 auto;
}

.tab-section .tab-container a,
.tab-section .tab-container a:link,
.tab-section .tab-container a:visited,
.tab-section .tab-container a:hover,
.tab-section .tab-container a:focus,
.tab-section .tab-container a *,
.tab-section .tab-container a:hover *,
.tab-section .tab-container a:focus * {
  text-decoration: none !important;
	opacity: 1.0 !important;
}
	

	
.qs-images a:hover img {
  transform: none !important;
	transition: 0.5s !important;
}
	
/* hoverでの透過を徹底的に無効化 */
#truck-tabs .tab:hover,
#truck-tabs .tab:hover *,
#truck-tabs .tab:focus,
#truck-tabs .tab:focus * {
  opacity: 1 !important;
  filter: none !important;           /* filter:opacity() / brightness() 対策 */
  mix-blend-mode: normal !important; /* blendで薄くなるテーマ対策 */
}
	
#truck-tabs a:hover,
#truck-tabs a:hover * {
  opacity: 1 !important;
  filter: none !important;
}
	
h3.subtit_mame.truck_header{
white-space: nowrap !important;
display: inline-block;
font-size: clamp(20px, 2.0vw, 24px) !important;
max-width: 100% !important;             /* はみ出し防止 */
line-height: 145%;
margin-bottom: 0.8em !important;
padding-top: 0 !important;
margin-top: 1.2em !important;
}
	
.truck_img_right{
width: 35%;
float: right;
}
	
.truck_img_left{
width: 35%;
float: left;
}
	
.truck_img_right img,.truck_img_left img{
width: 100%;
height: auto;
}
	
.truck_img_right span,.truck_img_left span{
font-size: 0.8rem;
line-height: 165%;
text-align: center;
margin: 15px;
}
/*ここまで上部のタブ切り替え*/	
	
/* ここから本文と写真 */
/* ブロック外枠（clearfix代わり） */
.qs-block { margin: 2.5rem 0; overflow: hidden; }

/* 見出しと本文は普通に流すだけ */
.qs-block .qs-text {}

/* ── 1枚のとき：回り込み（既定は右寄せ） ── */
.qs-block.is-single.is-right .qs-images{
  float: right;
  margin: .25rem 1.6rem 1rem 2rem;
  max-width: 45%; /* JSで 36% / 28% に上書き */
}
.qs-block.is-single.is-left .qs-images{
  float: left;
  margin: .25rem 2rem 1rem 1.6rem;
}

/* aで包んでも崩れないように */
.qs-block.is-single .qs-images a{
  display: block;
  width: 100%;
}
.qs-block.is-single .qs-images img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 見栄え優先でトリミング */
  border-radius: 0;
  transition: transform .25s ease;
}

/* 単枚画像：4:3 と 3:4 を使い分け */
.qs-block.is-single .qs-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 横長 → 4:3 */
.qs-block.is-single .qs-images img[data-orientation="landscape"],
.qs-block.is-single .qs-images a[data-orientation="landscape"]{
  aspect-ratio: 4 / 3;
}

/* 縦長 → 3:4（上下が切れない） */
.qs-block.is-single .qs-images img[data-orientation="portrait"],
.qs-block.is-single .qs-images a[data-orientation="portrait"]{
  aspect-ratio: 3 / 4;
}

.qs-block.is-single .qs-images img:hover{ transform: scale(1.02); }

/* ── 2枚のとき：本文の下で横並び＆高さ揃え ── */
.qs-block.is-duo .qs-images{
  float: none;
  clear: both;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1rem 1.6rem;
}
.qs-block.is-duo .qs-images a{ display:block; width:100%; }
.qs-block.is-duo .qs-images img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 0;
}
@media screen and (max-width: 800px) {
	
/* ── 1枚のとき：回り込み（既定は右寄せ） ── */
.qs-block.is-single.is-right .qs-images{
  float: right;
  margin: .25em 0.7em 0.25em 0.88em;
  max-width: 45%; /* JSで 36% / 28% に上書き */
}
.qs-block.is-single.is-left .qs-images{
  float: left;
  margin: .25em 0.88em 0.25em 0.7em;
}
	
/*ここから上部のタブ切り替え*/		
.tab-section{
	width: 100%;
}
		

	
.tab-container{
width: 100%;
display: flex;
flex-direction: column;
margin: 4em 0 0 0;
z-index: 1;
}
	
  .tab-container a:hover {
    transform: none !important;
  }
	
		
.tab-container a{
width: 100%;
display: flex;
flex-direction: column;
	margin-bottom: 1em;
}
	
div.tab-title.kasen_tab{
	margin-top: 0.7em !important;
}
	
	div.tab-title h3,div.tab-title img{
		margin-top: 0 !important;
		padding-top:0 !important;
	}
	
div.tab-title.tab-blue{
overflow: hidden;
margin-bottom: 20px;
padding: 0 !important;
width: 96%;
}

.tab-container a:hover div.tab-title.tab-blue{
overflow: hidden;
margin-bottom: 20px;
padding: 0  !important;
width: 96%;
}
	
div.tab-title.tab-green{
overflow: hidden;
margin-bottom: 20px;
padding: 0  !important;
width: 96%;
}

.tab-container a:hover div.tab-title.tab-green{
overflow: hidden;
margin-bottom: 20px;
padding: 0  !important;
width: 96%;
}
	

	
p.tab-desc{
font-size: clamp(12px, 2.5vw, 17px) ; /* 可変フォント */
text-align: center;
	display: block;
padding-bottom: 1.0em;
max-width: 100% !important;
overflow-wrap: anywhere !important;
padding-top: 0.5em !important;
margin: 0 auto 0 auto !important;
}
	
.tab-title.kasen_tab{
	line-height: 165% !important;
	padding: 0em 0.1em 0em 0.1em !important;
	margin-bottom: 0 !important;
}


	
.tab-title span:before{
	content: "▶";
	font-size: 0.4em;
  top: -0.4em; 
	margin-right: 0.5em;
}	
	
	
.tab-title h3,.tab-band span{
font-size: clamp(12px, 2.8vw, 17px) !important; /* 可変フォント */
}
	
.tab-title h3 span{
font-size: clamp(18px, 5.2vw, 29px) !important; /* 可変フォント */
}
	

	
/*ここまで上部のタブ切り替え*/	
	
/*ここから本文と写真*/
	
h3.subtit_mame.truck_header{
white-space: nowrap !important;
display: inline-block;
font-size: clamp(16px, 3.5vw, 24px) !important;
max-width: 100% !important;             /* はみ出し防止 */
line-height: 145%;
	letter-spacing: -0.07em;
}
	
  /* 1枚も回り込み維持で良いなら、この3ルールは不要 */
  .qs-block.is-single .qs-images{
    float: none;
    margin: .5rem auto 1rem;
    max-width: 100%;
    text-align: center;
  }
  .qs-block.is-single .qs-images img{ max-width: 100%; }
}
/*ここまで本文と写真*/	

  .lightbox .lb-outerContainer {
    margin-top: 60px !important; /* ←数値を調整して下げたい分だけ変更 */
  }

}/*←削除注意　消さないこと*/