@charset "utf-8";

#contents {
width: 100%;
}


/*--------------------------------------
visArea
---------------------------------------*/
#visArea {
min-height: 38.4rem;
background: url(img/mv_bg_01.jpg) no-repeat left top;
background-size: auto 100%;
}


#visArea .mainArea {
    position: relative;
width: 128rem;
margin: 0 auto;
}

#visArea .mainArea {
    padding: 5rem 0 0 43rem;
    }

    @media (min-width: 1368px) and (max-width: 1860px)  {
        #visArea .mainAreaInner {
            padding-left: 250px;
            }
    }


@media (min-width: 600px) and (max-width: 1367px)  {
    #visArea .mainArea {
        padding: 5rem 0 0 72rem;
        }
}




#visArea .mainArea .logo {
width: 20rem;
margin: 0 0 2rem 0;
}
#visArea .mainArea .mainTxtBox .title {
margin: 0 0 3rem 0;
color: #282828;
font-size: 3.6rem;
font-weight: 700;
line-height: 1.4;
}
#visArea .mainArea .mainTxtBox .title span {
display: inline-block;
margin: 0 0 0.5rem 0;
padding: 0.1rem 0.5rem 0.3rem 0.5rem;
background: #0166c9;
color: #ffffff;
}
#visArea .mainArea .mainTxtBox p:not([class]) {
margin: 0;
}
#visArea .mainArea .mainTxtBox p:not([class]) > span:not([class]) {
border-bottom: 2px solid #ffc600;
font-weight: 700;
}


/*--------------------------------------
addParts02
---------------------------------------*/
.addParts02 {
padding: 7rem 0;
background: #ecedef url(img/add02_bg_01.jpg) no-repeat center top;
background-size: 100% auto;
}
.addParts02 .addParts-title {
margin: 0 0 7rem 0;
}
.addParts02-company {
position: relative;
margin: 0 0 10rem 0;
padding: 6rem;
background: #fff;
}
.addParts02-company:last-child {
margin: 0;
}
.addParts02-company::before {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10rem 10rem 0 0;
border-color: #282828 transparent transparent transparent;
content: "";
}
.addParts02-company::after {
position: absolute;
left: 50%;
top: -1.6rem;
transform: translateX(-50%);
width: 27.2rem;
height: 3.2rem;
background: url(img/add02_bg_02.png) no-repeat left top;
background-size: contain;
content: "";
}
.addParts02-company .title {
margin: 8rem 0 3rem 0;
padding: 2rem 0;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
font-size: 3rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
.addParts02-company table th {
width: 28rem;
border: 2px solid #fff;
}
.addParts02-company table td {
background: #ebedef;
border: 2px solid #fff;
}
.block-head  {
margin: 0 0 4.5rem 0;
text-align: center;
}
.block-head .catch {
margin: 0 0 3rem 0;
color: #f76b13;
font-size: 4rem;
font-weight: 700;
line-height: 1.4;
}
.block-head .name {
position: relative;
padding: 0 0 1.5rem 0;
font-size: 3.5rem;
font-weight: 700;
line-height: 1.4;
}
.block-head .name::after {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 45rem;
height: 0.1rem;
border-bottom: 1px solid #999;
content: "";
}
.addParts02 .fig {
max-width: 60rem;
margin: 0 auto;
text-align: center;
}
.addParts02 .fig + .caption {
text-align: center;
}
.block-feature {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 3.5rem 0;
background: #fdf7e3;
}
.block-feature .box {
width: 50%;
padding: 0 3.5rem;
}
.block-feature .box:nth-child(odd) {
border-right: 1px solid #999;
}
.block-feature .box-head {
display: flex;
align-items: center;
margin: 0 0 2rem 0;
min-height: 6rem;
padding: 0 0 0 8rem;
background: url(img/add02_bg_03.png) no-repeat left center;
background-size: 56px auto;
color: #f76b13;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.4;
}
.block-feature .box-body p:not([class]) {
margin: 0;
}


/*--------------------------------------
addParts03
---------------------------------------*/
.addParts03 {
padding: 6rem 0;
}
.addParts03 .accordion-btn::after {
content: "29社を全部見る";
}
.addParts03 .accordion-btn.is-open::after {
content: "閉じる";
}


/*--------------------------------------
addParts04
---------------------------------------*/
.addParts04 {
padding: 7rem 0 14rem 0;
background: #282828;
}
.addParts04 .addParts-title,
.addParts04 p.lead {
color: #fff;
}
.addParts04 .block {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border: 1px solid #fff;
border-top: none;
}
.addParts04 .block:nth-of-type(1) {
border-top: 1px solid #fff;
}
.addParts04 .block .box-fig {
width: 50%;
border-right: 1px solid #fff;
}
.addParts04 .block .box-txt {
width: 50%;
padding: 3rem 4rem;
background: #282828;
}
.addParts04 .block .box-txt p:not([class]) {
margin: 0;
color: #fff;
}
.addParts04 .block .box-txt .ttl {
margin: 0 0 3rem 0;
color: #fff;
font-size: 3rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
.addParts04 .block .box-txt .ttl a {
display: block;
padding: 0 3rem 0 0;
background: url(img/arrow_orange.png) no-repeat right 1rem center;
background-size: 10px auto;
color: inherit;
text-decoration: none;
}
.addParts04 .block .box-txt p:not([class]) {
margin: 0;
}
.addParts04 .block:nth-of-type(odd) .box-fig {
border: none;
order: 2;
}
.addParts04 .block:nth-of-type(odd) .box-txt {
border-right: 1px solid #fff;
order: 1;
}


/*--------------------------------------
addParts05
---------------------------------------*/
.addParts05 {
padding: 7rem 0;
}
.addParts05 .block {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.addParts05 .block::before,
.addParts05 .block::after {
display: block;
width: calc((100% - 4.2rem) / 4);
content: "";
}
.addParts05 .block::before {
order: 1;
}
.addParts05 .block .box {
width: calc((100% - 4.2rem) / 4);
margin: 0 0 1.5rem 0;
padding: 3rem 2rem;
background: #ebedef;
}
.addParts05 .block .box-head {
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 3rem 0;
}
.addParts05 .block .box-head .ttl {
width: 100%;
font-size: 2.3rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
.addParts05 .block .box-head .ttl a {
display: inline-block;
padding: 0 3rem 0 0;
background: url(img/arrow_orange.png) no-repeat right 1rem center;
background-size: 8px auto;
color: inherit;
text-decoration: none;
}
.addParts05 .block .box-body p:not([class]) {
margin: 0;
}





















































@media screen and (max-width: 599px) {

/*--------------------------------------
visArea
---------------------------------------*/
#visArea {
min-height: auto;
background: none;
}
#visArea .mainArea {
width: 100%;
padding: 0;
}
#visArea .mainArea .logo {
display: flex;
align-items: center;
justify-content: right;
width: 100%;
height: 10rem;
margin: 0;
padding: 0 1.5rem;
background: url(img/mv_bg_01.jpg) no-repeat left center;
background-size: auto 100%;
text-align: right;
}
#visArea .mainArea .logo img {
width: 18rem;
}
#visArea .mainArea .mainTxtBox {
padding: 2rem 1.5rem 3rem 1.5rem;
}
#visArea .mainArea .mainTxtBox .title {
margin: 0 0 1.5rem 0;
font-size: 2.4rem;
}


/*--------------------------------------
addParts02
---------------------------------------*/
.addParts02 {
padding: 5rem 0;
}
.addParts02 .addParts-title {
margin: 0 0 5rem 0;
}
.addParts02-company {
margin: 0 0 5rem 0;
padding: 3rem 1.2rem;
}
.addParts02-company::before {
border-width: 5rem 5rem 0 0;
}
.addParts02-company::after {
top: -1.1rem;
width: 17rem;
height: 2rem;
}
.addParts02-company .title {
margin: 6rem 0 3rem 0;
padding: 1.5rem 0;
font-size: 2rem;
}
.addParts02-company table {
border: 2px solid #fff;
}
.addParts02-company table th {
width: 100%;
}
.block-head  {
margin: 0 0 3rem 0;
}
.block-head .catch {
margin: 0 0 1.5rem 0;
font-size: 2.4rem;
}
.block-head .name {
padding: 0 0 1rem 0;
font-size: 2.1rem;
}
.block-head .name::after {
width: 100%;
}
.addParts02 .fig {
max-width: 100%;
}
.block-feature {
display: block;
padding: 0 1.5rem;
}
.block-feature .box {
width: 100%;
padding: 1.5rem 0;
}
.block-feature .box:nth-child(odd) {
border-right: none;
border-bottom: 1px solid #999;
}
.block-feature .box-head {
padding: 0 0 0 7rem;
font-size: 1.8rem;
}
.block-feature .box-body p:not([class]) {
margin: 0;
}


/*--------------------------------------
addParts03
---------------------------------------*/
.addParts03 {
padding: 5rem 0 1rem 0;
}


/*--------------------------------------
addParts04
---------------------------------------*/
.addParts04 {
padding: 5rem 0;
}
.addParts04 .block .box-fig {
width: 100%;
border-right: none;
}
.addParts04 .block .box-txt {
width: 100%;
padding: 2rem 1.5rem;
}
.addParts04 .block .box-txt .ttl {
font-size: 2rem;
}
.addParts04 .block .box-txt .btn-link {
margin: 2rem auto 0 auto;
}
.addParts04 .block:nth-of-type(odd) .box-fig {
order: 1;
}
.addParts04 .block:nth-of-type(odd) .box-txt {
border-right: none;
order: 2;
}


/*--------------------------------------
addParts05
---------------------------------------*/
.addParts05 {
padding: 5rem 0;
}
.addParts05 .block {
display: block;
}
.addParts05 .block::before,
.addParts05 .block::after {
display: none;
content: none;
}
.addParts05 .block .box {
width: 100%;
margin: 0 0 3rem 0;
}
.addParts05 .block .box-head {
margin: 0 0 2rem 0;
}
.addParts05 .block .box-head .ttl {
font-size: 2rem;
}

}