@charset "utf-8";

.titlewrap {
    background:url(../img/products/relatedparts/mv.jpg) no-repeat center center/cover;
}

#page_link {
    .wrap {
        padding-bottom:60px;
        .contents {
            max-width:800px;
            ul {
                display:flex;
                flex-wrap:wrap;
                column-gap:2%;
                row-gap:.5em;
                li {
                    flex-grow:1;
                    a {
                        border:1px solid #707070;
                        display:grid;
                        grid-template-columns:1fr 1em;
                        align-items:center;
                        height:3em;
                        grid-column-gap:.5em;
                        text-align:center;
                        padding:.5em 1em;
                        font-size:min(1.6vw,1.6rem);
                    }
                }
            }
        }
    }
}

#parts {
    .wrap {
        .contents {
            ul {
                &.contents_inner {
                    display:grid;
                    grid-template-columns:repeat(3,1fr);
                    grid-gap:30px;
                    &:not(:last-child) {
                        margin-bottom:60px;
                    }
                    li {
                        background-color:#FFFFFF;
                        border:1px solid #707070;
                        padding:10px;
                        img {
                            display:block;
                            width:66%;
                            margin:30px auto 20px;
                            aspect-ratio:1;
                            object-fit:contain;
                        }
                        h3 {
                            font-size:2.0rem;
                            color:var(--color_main);
                            font-weight:500;
                            line-height:1.5;
                            margin-bottom:1em;
                        }
                        .detail {
                            * {
                                word-break:break-all;
                            }
                            dl {
                                border-top:1px solid #cccccc;
                                font-size:1.5rem;
                                padding:1em 0;
                                display:grid;
                                grid-template-columns:4em 1fr;
                                align-items:center;
                                dt {
                                    color:var(--color_main);
                                    font-weight:500;
                                }
                                dd {
                                    text-align:center;
                                    line-height:1.5;
                                }
                                &:has( + p) {
                                    border-bottom:1px solid #cccccc;
                                    margin-bottom:10px;
                                }
                            }
                            p {
                                font-size:1.3rem;
                                line-height:1.5;
                                &.att {
                                    color:#ff0000;
                                }
                            }
                        }
                    }
                }
            }
            & > h3 {
                font-size:2.4rem;
                line-height:1.5;
                margin-bottom:.5em;
                & + p {
                    margin-bottom:2em;
                }
            }
            .imgbox {
                display:grid;
                grid-template-columns:repeat(3,1fr);
                grid-column-gap:5px;
                margin-bottom:50px;
                .img {
                    p {
                        line-height:1.5;
                        margin-top:.5em;
                        text-align:center;
                    }
                }
            }
            .point {
                display:grid;
                grid-template-columns:repeat(4,1fr);
                margin-bottom:60px;
                li {
                    text-align:center;
                    img {
                        display:block;
                        width:50%;
                        margin:0 auto;
                    }
                    p {
                        font-size:2.0rem;
                        font-weight:600;
                        line-height:1.5;
                        margin-top:.5em;
                    }
                }
            }
            .related {
                border-top:1px solid #cccccc;
                padding:50px 30px 0;
                margin-bottom:50px;
                display:grid;
                grid-template-columns:1fr 40%;
                grid-column-gap:5%;
                .detail {
                    h3 {
                        font-size:2.4rem;
                        line-height:1.5;
                        margin-bottom:1em;
                    }
                    .item {
                        border-bottom:1px solid #cccccc;
                        dl {
                            border-top:1px solid #cccccc;
                            font-size:1.6rem;
                            display:grid;
                            grid-template-columns:4em 1fr;
                            padding:1em 0;
                            dt {
                                font-weight:600;
                                line-height:1.5;
                            }
                            dd {
                                line-height:1.5;
                            }
                        }
                    }
                    p {
                        font-size:1.3rem;
                        line-height:1.5;
                        padding-top:.66em;
                        
                    }
                }
            }
            .related2 {
                background-color:rgba(44,149,80,.1);
                padding:30px 60px;
                display:grid;
                grid-template-columns:repeat(3,1fr);
                grid-column-gap:5%;
                align-items:center;
                margin-bottom:30px;
                .img {
                    img {
                        display:block;
                        width:100%;
                        aspect-ratio:3/2;
                        object-fit:contain;
                    }
                    p {
                        font-size:1.5rem;
                        line-height:1.5;
                        margin-bottom:1em;
                    }
                    &:not(:first-child) {
                        padding-top:4em;
                    }
                }
                & + a {
                    display:grid;
                    color:var(--color_sub);
                    grid-template-columns:auto 3em;
                    width:11em;
                    margin-left:auto
                }
            }
        }
    }
}

#overture {
    .wrap {
        background-color:#F5F3F1;
        padding:50px 0;
        .contents {
            text-align:center;
            font-weight:600;
            a {
                color:var(--color_sub);
            }
        }
    }
}

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

}

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

    #parts {
        .wrap {
            .contents {
                ul {
                    &.contents_inner {
                        grid-template-columns:repeat(2,1fr);
                    }
                }
            }
        }
    }

}

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

    #page_link {
        .wrap {
            padding-bottom:45px;
            .contents {
                ul {
                    li {
                        a {
                            font-size:min(3.4vw,1.6rem);
                        }
                    }
                }
            }
        }
    }
    
    #parts {
        .wrap {
            .contents {
                h2 {
                    font-size:2.0rem;
                }
                ul {
                    &.contents_inner {
                        grid-gap:10px;
                        grid-template-columns:1fr;
                        max-width:400px;
                        margin:0 auto;
						&:not(:last-child) {
							margin-bottom:45px;
						}
                        li {
                            img {
                                margin:20px auto;
                            }
                            h3 {
                                font-size:1.6rem;
                            }
                            .detail {
                                dl {
                                    font-size:1.3rem;
                                    padding:.5em 0;
                                }
                                p {
                                    font-size:1.2rem;
                                }
                            }
                        }
                    }
                }
                & > h3 {
                    font-size:2.0rem;
                }
                .point {
                    grid-template-columns:repeat(2,1fr);
                    grid-gap:15px 10px;
                    max-width:300px;
                    margin:0 auto 30px;
                    li {
                        p {
                            font-size:1.5rem;
                        }
                    }
                }
                .related {
                    padding:30px 0;
                    margin-bottom:30px;
                    grid-template-columns:1fr;
                    .img {
                        max-width:400px;
                        margin:0 auto 20px;
                        grid-area:2/1/3/2;
                    }
                    .detail {
                        display:contents;
                        h3 {
                            font-size:2rem;
                            grid-area:1/1/2/2;
                        }
                        .item {
                            dl {
                                font-size:1.4rem;
                            }
                        }
                        p {
                            font-size:1.2rem;
                            
                        }
                    }
                }
                .related2 {
                    padding:30px;
                    grid-template-columns:1fr;
                    max-width:400px;
                    margin:0 auto 20px;
                    grid-row-gap:30px;
                    .img {
                        p {
                            font-size:1.4rem;
                        }
                        &:not(:first-child) {
                            padding-top:0;
                        }
                    }
                }
            }
        }
    }
    
    #overture {
        .wrap {
            padding:30px 0;
        }
    }
    
}