@charset 'utf-8';
.mainw{
    max-width: 68.4rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.img100{
    width: 100%;
}
.serif{
    font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

@media (max-width: 767px) {
    .mainw{
        max-width: calc( 325 / 375 * 100vw );
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }
}
.f-about{
    .mv{
        background: url('https://importrossa8189.itembox.design/item/images/f-about/about-cover@2x.jpg') no-repeat center/cover;
        .mv_inr{
            height: calc(300 / 900 *100svw);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        h2{
            text-align: center;
            font-size: 2.6rem;
            font-weight: 600;
            text-shadow: 0 0 10px #fff;
        }

    }
    @media (max-width: 767px) {
        .mv{
            .mv_inr{
                height: calc(126 / 377 * 100svw);
            }
            h2{
                font-size: calc( 16 / 375 * 100vw );
            }
    
        }
    }
    .intro{
        p{
            font-weight: 500;
            margin-top: 3.6rem;
            text-align: center;
            line-height:calc(26 / 16 *1) ;
        }
    }
    @media (max-width: 767px) {
        .intro{
            max-width: calc( 325 / 375 * 100vw );
            margin-left: auto;
            margin-right: auto;
            p{
                margin-top: calc( 28 / 375 * 100vw );
                text-align: initial;
                line-height:calc(20 / 14 *1) ;
                font-size: calc( 14 / 375 * 100vw );
            }
        }
    }
    .for{
        margin-top: 5.8rem;
        border-top: 1px solid #D1CDCD;
        position: relative;
        &::before{
            position: absolute;
            width: 9.2rem;
            height: 1.5px;
            background-color: #C0AA79;
            top: 0;
            left: 50%;
            content: '';
            transform: translate(-50%,-50%);
        }
        .for_img{
            margin: 4.8rem auto 0;
            max-width: 68rem;
        }
        h2{
            margin-top: 2rem;
            font-size: 2.1rem;
            font-weight: 600;
            padding-left: 2rem;
            border-left: 6px solid #C0AA79;
            color: #C0AA79;
        }
        h2+p{
            margin-top: 3.2rem;
            font-weight: 500;
        }
        ul{
            margin-top:8.6rem ;
        }
        li{
            display: flex;
            gap: 0 2rem;
            p{
                width: 41.4rem;
                font-weight: 500;
                line-height:calc(23 / 16 *1) ;
                margin-top: 3.5rem;
            }
        }
        li:nth-child(even){
            flex-direction: row-reverse;
            margin-top: 1.6rem;
        }
        .for_list_img{
            width: 25.3rem;
        }
        .cite{
            text-align: center;
            color: #C0AA79;
            margin-top: 7rem;
            font-size: 1.8rem;
            font-weight: 800;
        }
        .linkbtn{
            margin: 8rem auto;
            text-align: center;
        }
    }
    @media (max-width: 767px) {
        .for{
            margin-top: calc( 60 / 375 * 100vw );
            &::before{
                position: absolute;
                width:calc( 39 / 375 * 100vw );
            }
            .for_img{
                margin:calc( 35 / 375 * 100vw ) auto 0;
                max-width: calc( 325 / 375 * 100vw );
            }
            h2{
                letter-spacing: -0.05rem;
                margin-top: calc( 13 / 375 * 100vw );
                font-size: calc( 16 / 375 * 100vw );
                padding-left: calc( 10 / 375 * 100vw );
                border-left: calc( 5 / 375 * 100vw ) solid #C0AA79;
            }
            h2+p{
                margin-top: calc( 24 / 375 * 100vw );
            }
            ul{
                margin-top:calc( 100 / 375 * 100vw ) ;
            }
            li{
                flex-direction: column;
                gap: calc( 30 / 375 * 100vw 0);
                p{
                    margin-top: calc( 20 / 375 * 100vw );
                    width: calc( 325 / 375 * 100vw );
                    line-height:calc(19 / 13 *1) ;
                    font-size: calc( 13 / 375 * 100vw );
                }
            }
            li:nth-child(even){
                flex-direction: column;
                margin-top: calc( 40 / 375 * 100vw );
                .for_list_img{
                    margin-left: auto;
                }
            }
            .for_list_img{
                width:calc( 222 / 375 * 100vw );
            }
            .cite{
                text-align: initial;
                margin-top: calc( 50 / 375 * 100vw );
                font-size: calc( 14 / 375 * 100vw );
            }
            .linkbtn{
                margin: calc( 60 / 375 * 100vw ) auto;
            }
        }
    }
    .p_ttl{
        text-align: center;
        span{
            display: block;
            margin-top: 4rem;
            color: #C0AA79;
        }
    }
    @media (max-width: 767px) {
        .p_ttl{
            span{
                margin-top: calc( 7 / 375 * 100vw );
                font-size: calc( 10 / 375 * 100vw );
            }

        }
    }
    .collection{
        margin-top: 10.4rem;
        padding: 5.8rem 0 8rem;
        background-color: #F5F5F5;
        ul{
            margin-top: 5.4rem;
            display: flex;
            gap:0 8rem;
            justify-content: center;
        }
        li{
            width: 30.2rem;
        }
        .collection_img{
            position: relative;
            span{
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translate(-50%,50%);
                width: 26.2rem;
                height: 5.6rem;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.6rem;
                font-weight: 700;
                color: #C0AA79;
                background-color: #fff;
                border: 2px solid #C0AA79;
                border-radius: 50px;
                &:after{
                    position: absolute;
                    top: 38.5%;
                    right: 18px;
                    content: '';
                    width: 1rem;
                    height: 1rem;
                    border-bottom: 2px solid #C0AA79;
                    border-right: 2px solid #C0AA79;
                    transform: rotate(-45deg);
                }
            }
        }
        p{
            margin-top: 7rem;
            font-weight: 500;
        }
    }
    @media (max-width: 767px) {
        .collection{
            margin-top: calc( 60 / 375 * 100vw );
            padding: calc( 30 / 375 * 100vw ) 0 calc( 54 / 375 * 100vw );

            h2{
                img{width: calc( 144 / 375 * 100vw );}
            }
            ul{
                margin-top:calc( 28 / 375 * 100vw );
                display: flex;
                flex-direction: column;
                gap: calc( 30 / 375 * 100vw )0;
            }
            li{
                width: 100%;
            }
            .collection_img{
                span{
                    width: calc(200 / 375* 100vw);
                    height: calc(36 / 375* 100vw);
                    font-size: calc(14 / 375* 100vw);
                    border: 1px solid #C0AA79;
                    &:after{
                        position: absolute;
                        top: 44%;
                        right: calc( 11 / 375 * 100vw );
                        content: '';
                        width: calc( 4 / 375 * 100vw );
                        height: calc( 4 / 375 * 100vw );
                        border-bottom: 1px solid #C0AA79;
                        border-right: 1px solid #C0AA79;
                    }
                }
                img{
                    width: 100%;
                }
            }
            p{
                margin-top: calc( 30 / 375 * 100vw );
                font-size: calc( 13 / 375 * 100vw );
                line-height: calc( 19 / 13 * 1 );
            }
        }
    }
    .category{
        border-top: 1px solid #D1CDCD;
        padding: 5.8rem 0 8rem;
        background-color: #F5F5F5;
        &::before{
            position: absolute;
            width: 9.2rem;
            height: 1.5px;
            background-color: #C0AA79;
            top: 0;
            left: 50%;
            transform: translate(-50%,-50%);
            content: '';
        }
        position: relative;
        ul{
            max-width: 79.2rem;
            width: 100%;
            margin: 5rem auto 0;
            display: flex;
            flex-wrap: wrap;
            gap: 3.2rem 2.4rem ;
            p{
                font-weight: 700;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                color: #fff;
                width: 100%;
                text-align: center;
            }
            li{
                position: relative;
            }
        }
        .btn a{
            margin-top: 5.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26.2rem;
            height: 5.6rem;
            color: #fff;
            position: relative;
            background-color: #C0AA79;
            font-weight: 700;
            &:after{
                position: absolute;
                right: 18px;
                content: '';
                width: 0.5rem;
                height: 0.5rem;
                border-bottom: 2px solid #fff;
                border-right: 2px solid #fff;
                transform: translateY(calc(50% - .25rem)) rotate(-45deg);
            }
        }
    }
    @media (max-width: 767px) {
        .category{
            padding:  calc( 22 / 375 * 100vw ) 0  calc( 60 / 375 * 100vw );           
            &::before{
                position: absolute;
                width:calc( 39 / 375 * 100vw );
            }
            h2{
                img{
                    width: calc( 116 / 375 * 100vw ) ;
                }
            }
            ul{
                max-width: calc( 344 / 375 * 100vw );
                width: 100%;
                margin: calc( 28 / 375 * 100vw )  auto 0;
                gap: calc( 16 / 375 * 100vw ) 0 ;
                justify-content: space-between;
                p{
                   font-size: calc( 14 / 375 * 100vw ) ;
                }
            }
            li{
                width:calc( 165 / 375 * 100vw )  ;
                img{
                    width: 100%;
                }
            }
            .btn a{
                margin-top: calc( 40 / 375 * 100vw );
                width: calc( 208 / 375 * 100vw );
                height: calc( 43 / 375 * 100vw );
                &:after{
                    position: absolute;
                    right: calc( 11 / 375 * 100vw );
                    content: '';
                    width: calc( 4 / 375 * 100vw );
                    height: calc( 4 / 375 * 100vw );
                    border-bottom: 1px solid #fff;
                    border-right: 1px solid #fff;
                }
            }
        }
    }
    .benefits{
       .benefits_box{
        position: relative;
        border: 1px solid #C0AA79;
        padding: 7.6rem 0 5.5rem;
        margin-top: 11.6rem;
        max-width: 79.2rem;
        width: 100%;
        margin-left: auto;
        margin-right: auto;

        h2{
            word-break: keep-all;
            font-size: 2.4rem;
            text-align: center;
            font-weight: 600;
            padding: 0 2rem;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 50%;
            line-height: 1;
            transform: translate(-50%,-150%);
        }
        p{
            text-align: center;
            font-weight: 500;
        }
        
       }
    }
    @media (max-width: 767px) {
        .benefits{
            .benefits_box{
             padding: calc( 55 / 375 * 100vw ) calc( 26 / 375 * 100vw ) calc( 38 / 375 * 100vw );
             margin-top: calc( 62 / 375 * 100vw );
             max-width:calc( 330 / 375 * 100vw );
             h2{
                 font-size:calc( 16 / 375 * 100vw );
                 padding: 0 calc( 6 / 375 * 100vw );
             }
             p{
                 text-align: initial;
             }
             
            }
         }
    }
}

.linkbtn {
    a{
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        border: 1px solid #433C2D;
        width: 30rem;
        height: 5rem;
        margin: 4.8rem auto 0;
    }
    .arrow:after {
        width: 5.5rem;
        height: 1.1rem;
        background: url('https://importrossa8189.itembox.design/item/images/f-about/arrow.svg') no-repeat center/cover;
        position: absolute;
        right: -20px;
        transition: all 0.2s;
        content: '';
        transform: translateY(-50%);
        top: 50%;
    }
    
    .arrow:hover:after {
        right:-30px;
    }
}
@media (max-width: 767px) {
    .linkbtn{
        a{
            width:  calc( 280 / 375 * 100vw );
            height:  calc( 45 / 375 * 100vw );
            display: flex;
            margin:  calc( 60 / 375 * 100vw ) auto 0;
        }
        .arrow:after {
            width: calc( 51 / 375 * 100vw );
            height:  calc( 10 / 375 * 100vw );
            right: - calc( 17 / 375 * 100vw );
        }
        
        .arrow:hover:after {
            right:- calc( 20 / 375 * 100vw );
        }
    }
}