@charset "utf-8";

/*======================================================
下層ページ
======================================================*/

.heading-page{
    background-color: var(--main-blue);
    padding: 0.5em 0;
    text-align: center;
    color:#fff;
    font-size:clamp(1.6rem,2vw,2.8rem);
    letter-spacing: 0.5em;
}


/*======================================================
会社概要
======================================================*/

.about-info{
    display: grid;
    @media(min-width:768px){
        grid-template-columns: 1fr 1fr;
    }
    gap: 20px 50px;
    margin-top:2em;
}

.heading-sec{
    font-size:clamp(1.8rem,2.8vw,2.8rem);
    margin-bottom:1em;
}

.btn-wrapper{
    text-align: center;
    padding:2em;
}
.btn-rounded-large{
    --btn-font-size:clamp(1.6rem,2.4vw,2.0rem);
    border: 2px solid var(--main-blue);  
    --btn-padding:1em 5em;
    display: block;
    margin:1em auto;
    a{
        color:var(--main-blue);
        letter-spacing: 1.1rem;
        display: block;
    }
    a:hover{
        color:#fff;
    }
}
/*======================================================
取扱商品
======================================================*/
.heading-item{
    font-size:clamp(1.5rem,2.4vw,3.0rem);
    margin-bottom:1em;
    span{
        font-size:clamp(1.8rem,2.8vw,3.6rem);
        color:var(--main-blue);
        margin-right:0.5em;
        
    }
}


.item-container{
    border:1px solid var(--main-blue);
    padding:1.5em 2.5em;
    margin-bottom:2em;
}

.item-wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(263px,1fr));
    @media(min-width:960px){    
        grid-template-columns: repeat(3, minmax(263px,1fr));
}
    gap:2em;    
}

.item-wrapper-col4{
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}


.item-text{
    dt{
        font-weight: bold;
        font-size:clamp(1.4rem,1.4vw,1.8rem);
        margin:0.5em 0;
        position:relative;
        padding-left:2em;
        &::before{
            content:url('../img/item/item-arrow.svg');
            position:absolute;
            left:0;
            top:2px;
        }
    }
    dd{
        font-size:clamp(1.3rem,1.5vw,1.3rem);
    }
}

.btn-item-wrapper{
    display:flex;
    place-content: center;
    gap:20px;
    flex-wrap: wrap;
}