@charset "UTF-8";

.caption {
position: absolute;
bottom: 10px;
left: 10px;
color: white;
background: rgba(0,0,0,0.5);
padding: 5px 10px;
border-radius: 5px;
}

.slider div {
position: relative;
}

.slick-initialized:last-child{
    width:100%!important;
   max-height: 120px !important;
    height: 100% !important;
    aspect-ratio:auto!important;
}

.slick-initialized:last-child li{
    aspect-ratio:auto!important;
    height: 120px !important;
}

.slick-initialized:last-child li img {
    max-height: none !important;
    object-fit: cover !important;
    height: 100% !important;
}

.entryAuthor {
display: none;
}

.entryCreated {
display: none;
}

 .slick-slide {
  aspect-ratio: 16 / 9!important; 
  height: auto !important; 
  max-height: 500px!important; 
}

 .slick-slide img {
  width: 100%!important;
  height: 100%!important; 
  max-height: 500px!important; 
  object-fit: contain!important;
}

.slick-list img {
width: 100%;
height: 100px;
object-fit: cover;
}

.slick-track li + li {
margin-top: 0 !important;
}

.row{
    display: flex !important;
}

/* 1. スライダーコンテナのサイズをJSの設定と一致させる */
/* JSで width:100% と height:500px が指定されているため、CSSでは補足的な設定のみ */
.box_skitter {
    /* 必要に応じて最大幅を設定 */
    max-width: 1140px; 
    margin: 0 auto;
}

/* 2. 画像が配置される img 要素に object-fit を適用 */
/* Skitterは内部で img.image_main に画像を設定します */
.box_skitter .image_main {
    width: 100% !important;  /* 親要素の幅いっぱいに広げる */
    height: 100% !important; /* 親要素の高さいっぱいに広げる */
    
    /* 画像の縦横比を維持しつつ、コンテナ内に全体を収める（画像が切れるのを防ぐ） */
    object-fit: contain; 
    
    /* object-fit が機能しないブラウザ向けに、画像の高さが固定されないように保険 */
    max-height: 500px; /* スライダーの高さに合わせて設定 */
}

.box_skitter .box_clone,
.box_skitter .cube,
.box_skitter .cube_mask,
.box_skitter .box_skitter_cube {
    display: none !important;
}

#entryRayout02{
    margin-top:100px;
}

#entryRayout02 h1{
    display: none !important;
}

.siteblock-side{
    padding-top: 50px;
}

.siteblock-side h1{
    margin-bottom: 30px!important;
}

[class*="siteblock-"] > * + div .boxBottom > h3{
    margin-top: -30px!important;
    margin-bottom: 20px!important;
    text-align: left;
}

.blogIndividualBox{
    margin-top: 70px;
}

.blogIndividual h1{
    display: none;
}

.entryRayout02 h3.blogEntryTtl {
    font-size: 1rem;
}

.entryRayout02 .blogEntryCategory li {
    font-size: 0.8rem;
}


@media screen and (max-width: 1000px) {
.slick-initialized:last-child li img {
    height: 100px !important;
    object-fit: cover!important;
}
}

@media screen and (max-width: 768px) {
    .slick-slide {
        aspect-ratio: 4 / 3; /* 例: 768px以下では少し縦長に */
        height: auto !important;
        max-height: 300px; /* CSSで設定していた300pxをmax-heightに移動 */
        margin: 0 auto;
    }
    
    .slick-slide img {
        height: 100%; 
        max-height: 300px; /* 高さを300pxに制限 */
    }
    
   .slick-list img {
   height: 80px;
   }
   
   .slick-initialized:last-child li{
    height: 80px !important;
}
.row{
    flex-direction: column;
}

.col-lg-9{
    order: 2;
}


/* 1. スライダーコンテナのサイズを調整 */
    .box_skitter,
    .container_skitter {
        /* アスペクト比を維持し、幅に合わせて高さを自動調整 */
        aspect-ratio: 4 / 3 !important;
        height: auto !important; 
        max-height: 600px !important; /* 絶対的な最大高さを設定 */
        width: 100% !important; /* 幅いっぱいに広げる */
        margin: 0 auto !important; /* 中央寄せを維持 */
    }

    /* 2. 画像の表示方法を調整 */
    .box_skitter .image_main {
        width: 100% !important;
        height: 100% !important;
        
        /* 縦長画像を切らずにコンテナ内に全体を収め、余白を許容 */
        object-fit: contain !important; 
        
        /* 画像をコンテナ内で中央に配置 */
        object-position: center !important; 
        
        /* 親要素の max-height に合わせる */
        max-height: 600px !important;
    }
    
    .container_skitter img {
        height: 100%!important; 
        max-height: 600px!important; 
 }
    
    .container_skitter .image a,
    .container_skitter .image {
        height: auto !important;
    }
    
    #entryRayout02 {
    margin-top: 0px;
}

[class*="siteblock-"] > * + div .boxBottom > h3 {
    margin-top: 0px !important;
}

.blogIndividualBox{
    margin-top: 0px;
}

}





/* 768px以上での基準となるアスペクト比を設定します (slick-6 .slick-slide に相当) */
#bxslider-2 .slider {
    /* 例：16:9 や 21:9 など、想定される横長画像の比率を設定 */
    /* bx-viewportが幅を決定し、このアスペクト比で高さを決定します */
    aspect-ratio: 16 / 9!important; 
    
    /* height は auto にして aspect-ratio を優先 */
    /* BxSliderはJSで高さを設定するため、!importantが必要になる場合があります */
    height: auto !important; 
    
    /* 必要に応じて、全体の最大高さを制限 */
    max-height: 500px!important; 
    
    /* BxSliderのli要素はfloat: left; heightがautoになることで、
       親要素の高さが確定しなかったり、表示が崩れたりすることがあるため
       高さの基準を明示的に指定します。 */
    background-color: #000;
}

/* 画像の設定 (slick-6 .slick-slide img に相当) */
#bxslider-2 .slider img {
    width: 100%!important;
    /* height: 100%; にすることで、親要素(.slider)の高さ(aspect-ratioで決まる)に合わせます */
    height: 100%!important; 
    /* 画像自体の最大高さを制限 */
    max-height: 500px!important; 
    /* 画像を要素内に収めるために 'contain' を使用 */
    object-fit: contain!important;
    /* object-fit: cover; を使用すると、画像が要素を埋めるように拡大され、一部が切り取られます */
    /* object-fit: fill; を使用すると、画像が要素に合わせて引き伸ばされます */
}

/* 768px以下の調整 (メディアクエリ) */
@media screen and (max-width: 768px) {
    /* スライド要素の設定 */
    #bxslider-2 .slider {
        aspect-ratio: 4 / 2.2!important; /* 例: 768px以下では少し縦長に */
        height: auto !important;
        /* CSSで設定していた300pxをmax-heightに移動 */
        max-height: 300px!important; 
        margin: 0 auto!important;
    }
    
    /* 画像の設定 */
    #bxslider-2 .slider img {
        height: 100%!important; 
        /* 高さを300pxに制限 */
        max-height: 300px!important; 
        /* object-fit: contain; はそのまま維持 */
    }
    
    /* BxSliderのViewportの高さも調整が必要な場合があります */
    /* BxSliderのJSが動くため、この設定だけでは足りない場合は、
       BxSliderの初期設定でminSlidesやmaxSlidesを1にし、
       responsive: true オプションを使用するなど、JS側での調整も検討してください。 */
    .bx-viewport {
        /* max-height: 300px; や height: auto; !important; を試す */
        /* JSで高さを動的に設定しているため、このセレクタへのCSS適用は難しい場合があります */
    }
}

@media (min-width: 768px) {
.cparts-table-block th, .cparts-table-block td {
        padding: 15px !important; 
    }
    
.cparts-txt-block th, .cparts-txt-block td {
        padding: 15px !important; 
    }
}