@charset "utf-8";
/* CSS Document */
.car1 { background-image:url("../img/bg.png"); padding: 50px; background-color: #353535; text-align: center; position: relative; margin-bottom: 4em; border:2px solid #E9E328; box-sizing: border-box;}

.car1 h3 { font-size: 36px; color: #E9E328; font-weight: 600; line-height: 1.4;}
.car1 h3 span { display: block; font-size: 80%; color: #FFF; font-weight: 600; line-height: 1.4;}
.caption { background-color: #E9E328; display: inline-block; color: #000; font-size: 15px; padding: .7em 2em; position: absolute; left: 50%; transform: translateX(-50%); bottom: -1em; font-weight: 600;}

.section { padding: 0px 20px 80px 20px; text-align: center;}
.section.ff { background-color: rgba(255,255,255,.1); padding-top: 80px;}
.section.ff+.section { padding-top: 80px;}
h4 { font-size: 26px; color: #E9E328; font-weight: 600; margin-bottom: .7em; line-height: 1.4;}
h4 span { display: block;  color: #FFF; font-weight: 600; line-height: 1.4;}
h4 span.inline { display: inline;}
h4.small { font-size: 18px;}
h4 span.inline.sm { margin-left: 1em; font-size: 50%;}
.image+h4 { margin-top: 40px;}

.clm3 { display: flex; flex-wrap: wrap; justify-content: space-around;}
.clm3 li { width: calc( ( 100% / 3 ) - 13.33333333333333px ); background-color: #535353; position: relative; margin-bottom: 2em;}
.clm3 li img { width: 100%; height: 100%; object-fit: contain;}
.clm3 li .caption { background-color: #353535; color: #fff; font-size: 10px; width: 90%; line-height: 1.4; padding: .7em .7em;}

.image { display: flex; justify-content: space-around; }
.image.w2 li { width: 48%;}
.image.w3 li { width: 31%;}
.image + p { margin-top: 1em;}

.image.w2.w2a li { width: auto; height: 300px;}
.image.w2.w2a li img { width: auto; height: 100%;}

.parts_section_01 h2 { font-size: 36px;}

.clm2 { display: flex; justify-content: space-between;}
.clm2 li:nth-child(1){ width: 150px;}
.clm2 li:nth-child(2){ width: calc( 100% - 150px - 30px ); text-align: left;}
.sp { display: none;}
.lower .clm2 p { font-size: 15px;}

@media screen and (max-width:700px){
    .sp { display: block;}
    .pc { display: none;}
    .car1 h3 { font-size: 28px;}
    .car1 {padding: 50px 20px;}
    .caption { width: 90%;}
    .clm3 {
    flex-direction: column;
}
    .clm3 li { width: auto;margin-bottom: 4em;}
    .clm3 li .caption { font-size: 15px;}
    .image li img { width: 100%;}
    .image.w2,.image.w3,.clm2 {flex-direction: column;}
    .image.w2 li,.image.w3 li,.clm2 li:nth-child(1),.clm2 li:nth-child(2) { width: auto;}
    .image li,.clm2 li:nth-child(1) { margin-bottom: 1em;}
    .section {
    padding: 0px 20px 40px 20px;
}
    .section.ff {
    padding-top: 40px;
}
    .section.ff+.section { padding-top: 40px;}
    .image.w2.w2a li {
    width: auto;
    height: 30vh;
}
    
}