@charset "UTF-8";

body{
    background:#000;
    color:#fff;
}
header{
    background: #000;
    /*border-bottom: 1px solid #fff;*/
}
header h1 img{
    width:60px;
}
#menu{
    top: 6%;
}
/*main.content{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto 0;
    padding: 3rem 6rem 6rem;
    overflow: hidden;
    z-index: 2;
    position: relative;
}
main h2{
    color:#fff;
    font-family: "aptos",sans-serif;
    font-size: 3.2em;
    width:100%;
    text-align:center;
    margin:0 auto 3%;
    padding:0 0 20px;
}
main h2 span{
    display: block;
    font-size: 0.4em;
    margin: 40px auto 0;
}*/
#product{
    margin: 5% auto 0;
    z-index: 2;
    position: relative;
}
#product .inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    max-width:1280px;
    width:95%;
    margin:0 auto 5%;
}
#product .inner .text{
    width:42%;
    padding:30px;
}
#product .inner .text h3{
    font-family: "aptos",sans-serif;
    font-size:2.2em;
    font-weight:300;
    text-align:center;
    margin:0 auto 5%;
}
#product .inner .text h4{
    font-weight:300;
    text-align:center;
    margin:0 auto 5%;
    padding:0;
    width:100%;
    position:relative;
}
#product .inner .text h4:before,
#product .inner .text h4:after{
    content:"";
    background:#000;
    width:36%;
    height:1px;
    position:absolute;
    top:50%;
    transform:translate(0,-50%);
}
#product .inner .text h4:before{
    left:0;
}
#product .inner .text h4:after{
    right:0;
}
#product .inner .text p{
    font-size:0.9em;
    line-height:1.6em;
}
#product .inner .main{
    width:55%;
}
#product .inner02 .text{
    order:2;
}
#product .inner02 .main{
    order:1;
}
#product .inner02 .sub{
    order:3;
    margin: 8% auto 0;
}
#product .inner02 .sub h3{
    font-family: "aptos",sans-serif;
    font-size:2.2em;
    font-weight:300;
    text-align:center;
    margin:0 auto 5%;
}
#product .inner02 .sub ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
#product .inner02 .sub ul li{
    max-width: 23vw;
    width: calc(94% / 3);
    height: 18vw;
    margin: 0 1% 2vw;
}
#product .inner02 .sub ul img{
    height:100%;
    object-fit:cover;
}

@media all and (min-height:1200px) and (min-width:769px){
    #product .inner .text{
        background: rgba(255, 255, 255, 0.3);
    }
}
@media all and (min-height:1040px) and (max-width:768px){
    #product .inner .text{
        background: rgba(255, 255, 255, 0.3);
    }
}
@media all and (min-width:769px){

}
@media all and (max-width:768px){
    main h2{
        font-size: 1.8em;
    }
    main.content{
        padding: 2rem 1rem 2rem;
    }
    #product{
        margin: 5% auto 0;
    }
    #product h2{
        margin: 0 auto 15%;
    }
    #product .inner .text{
        width:100%;
        order:2;
    }
    #product .inner .main{
        width: 90%;
        margin: 0 auto;
        order:1;
    }
    #product .inner .text h3{
        font-size: 1.8em;
        margin:0 auto 8% 0;
    }
    #product .inner02 .sub h3{
        font-size: 1.8em;
    }
    #product .inner02 .sub ul li{
        max-width: 48vw;
        width: calc(94% / 2);
        height: 34vw;
        margin: 0 1% 4vw;
    }
}