@charset "utf-8";
.main_title{
    padding-top: clamp(150px,21vw,276px);

    h1{
        font-weight: var(--Bold);
        font-size: var(--font-size44);
        line-height: .9;
        position: relative;
        text-align: center;
        width: 12em;
        margin: 0 auto;        
        
        &::before{
        content: '';
        position: absolute;
        display: inline-block;
        height: 1.7em;
        top: -2.3em;
        left: 6em;
        border-left: solid clamp(3px,.5vw,5px) #2BAEA3;
        }
            
        span{
        font-weight: var(--Regular);
        color: #2BAEA3;
        font-size: var(--font-size16);
        }
    }
}
/*-----取り扱いコンタクトレンズ sp -----*/
.about_btn{
    padding-top: var(--px60);        

    li{
        background-color: #2BAEA3;
        color: #ffffff;
        font-weight: var(--SemiBold);
        border-radius: 50px;
        position: relative;
        width: 240px;
        padding-left: 20px;
        margin: var(--px20) auto 0;

        a{
            color: #ffffff;
            padding: 6px 20px 6px 0;
            display: flex;
            align-items: center;
        }
        &::after{
            display: inline-block;
            content: "";
            position: absolute;
            background-image: url("../images/common/png_03.png");
            width: 12px;
            height: 12px;
            background-size: 12px;
            top: 12px;
            right: 20px;
            transition: all .3S;
            background-repeat: no-repeat;
        }
    }
}
.inner{
    width: min(95%,1360px);
    margin: 0 auto;
    padding-bottom: var(--px140);

    h2{
        font-size: var(--font-size36);
        font-weight: var(--Bold);
        text-align: center;
        margin: var(--px120) 0 var(--px70);
        position: relative;

        &::before{
            position: absolute;
            content: '';
            display: block;
            border-bottom: 2px solid #2BAEA3;
            width: 2.5em;
            bottom: -.5em;
            left: calc((100% - 2.5em) / 2);
        }
    }
    .block-row{
        display: flex; 
        flex-wrap: wrap;
        justify-content: center; 
        row-gap: var(--px60);
        column-gap: 3px;

        .block-cell{
            width: 50%;
            background-color: #fff;
            box-shadow: 1px 1px 12px #E6E6E6,-1px -1px 12px #E6E6E6;
            border-radius: 5px;
            padding: var(--px40) 15px;
            flex: 1 1 48%;
            text-align: center;

            h3{                
                font-size: var(--font-size20);
                font-weight: var(--Medium);
                line-height: 1.4;

                span{
                    font-size: var(--font-size16);
                    font-weight: var(--Regular);
                }
            }
            img{
                width: min(90%,300px);
                padding: var(--px10) 0;
            }
            ul{
                padding: var(--px10) 0 0;
                text-align: left;

                li{
                    padding: 4px 8px;
                    border: 1px solid #333;
                    border-radius: 50px;
                    display: inline-block;
                    margin-right: 5px;
                    margin-bottom: var(--px10);
                    line-height: 1;
                }
            }
            
        }
    }
}



@media (min-width:768px){
/*-----取り扱いコンタクトレンズ tab -----*/
.about_btn{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: min(95%,630px);
    margin: 0 auto;

    li{
        width: min(49%,300px);
        margin: var(--px30) 0 0;
    }
}
.inner{

    .block-row{
        justify-content: flex-start; 

        .block-cell{
            width: 33%;
            flex: 0 0 33%;           
        }
    }
    .center{
        justify-content: center; 
    }
}

}
@media (min-width:1024px){
/*----- pc -----*/
.inner{
    width: min(90%,1360px);
}


}

@media (min-width:1280px){
/*----- 1280 -----*/


}


@media (min-width:1360px){
    /*----- 1360 -----*/
    .inner{

        .block-row{
    
            .block-cell{
                width: 25%;
                flex: 0 0 24.8%;
            }
        }
    }
    
    }