body {
    font-family: "Roboto","Rosarivo","Great Vibes","Noto Sans JP",sans-serif;
    font-size: 16px;
}

/*works1~4*/
.page_works1,
.page_works2,
.page_works3,
.page_works4{
    max-width: 1200px;
    display: flex;
    position: relative;
    margin: 0 auto 240px;
    flex-direction: column;
}

.page_works1 h1,
.page_works2 h1,
.page_works3 h1,
.page_works4 h1{
    writing-mode: sideways-lr;
    font-size: 54px;
    font-family: "Rosarivo";
    font-weight: normal;
    position: absolute;
}

.page_works_contents{
    padding: 0 200px;
}
    
.works_contents{
    margin-top: 100px;
}

.box_text{
    text-align: left;
    margin-bottom: 30px;
}

.box_text h3{
    font-size: 36px;
    font-weight: 450;
}

.works_tag{
    font-size: 14px;
    color: #d07164;
    margin-top: 10px;
}

.works_textcontents{
    margin-top: 100px;
}

.box_text_middle{
    display: flex;
    margin:0 auto 40px 0;
    border-bottom:solid
    #E0CEC0 1px; /*borderの指定*/
    padding: 0 30px 40px;/*余白の指定*/
    justify-content: space-between;
    letter-spacing: 0.1em;
}

.box_text_middle:first-child{
    margin-top: 0;
}

.box_text_middle:last-child{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.box_text_tag{
    width: 88px;
    font-weight: bold;
}

.works_text{
    width: 596px;
}

.works_text li{
    margin-top: 10px;
}

.works_text span{
    width: 172px;
    display: inline-block;
    margin-right: 30px;
}

.works_text li:first-child{
    margin-top: 0;
}

/*タブレット版*/
@media screen and (min-width:481px) and (max-width:1240px){
    .page_works1 img,
    .page_works2 img,
    .page_works3 img,
    .page_works4 img{
        width: 100%;
    }
}

/*タブレット版*/
@media screen and (max-width:1240px){
    .page_works1,
    .page_works2,
    .page_works3,
    .page_works4{
        max-width: none;
        display: block;
        margin: 0 auto 25vw;
        flex-direction: row;
        position: static;
    }

    .page_works1 h1,
    .page_works2 h1,
    .page_works3 h1,
    .page_works4 h1{
        writing-mode: horizontal-tb;
        font-size: 8vw;
        margin-bottom: 12.5vw;
        position: static;
        padding: 0 7.5vw;
    }

    .page_works_contents{
        padding: 0 0;
    }

    .works_contents{
        margin-top: 12.5vw;
    }

    .box_text{
        margin-bottom: 5vw;
        padding: 0 7.5vw;
    }
    
    .works_contents img{
        width: 100%;
    }

    .works_textcontents{
        margin-top: 12.5vw;
        padding: 0 7.5vw;
    }

    .box_text_middle{
        width: 85vw;
        display: block;
        margin:0 auto 5vw 0;
        padding: 0 0 5vw;/*余白の指定*/
        justify-content: flex-start;
    }
    
    .box_text_tag{
        width: 85vw;
        margin-bottom: 5vw;
    }

    .works_text{
        width: 85vw;
    }
    
    .works_text li{
        display: flex;
        margin-top: 1vw;
    }
    .page_works3 span{
        width: 20vw;
    }

    .page_works4 span{
        width: 34vw;
    }  
}

/*スマホ版*/
@media screen and (max-width:480px){
    .page_works1,
    .page_works2,
    .page_works3,
    .page_works4{
        width: 100vw;
        display: block;
        margin: 0 auto 25vw;
        flex-direction: row;
        position: static;
    }

    .page_works1 h1,
    .page_works2 h1,
    .page_works3 h1,
    .page_works4 h1{
        width: 85vw;
        writing-mode: horizontal-tb;
        font-size: 8vw;
        margin-bottom: 12.5vw;
        position: static;
        padding: 0 7.5vw;
    }

    .page_works_contents{
        padding: 0 0;
    }

    .works_contents{
        margin-top: 12.5vw;
    }

    .box_text{
        margin-bottom: 5vw;
        padding: 0 7.5vw;
    }

    .box_text h3{
        font-size: 5vw;
    }

    .works_contents img{
        width: 100%;
    }

    .works_textcontents{
        margin-top: 12.5vw;
        padding: 0 7.5vw;
    }

    .box_text_middle{
        width: 85vw;
        display: block;
        margin:0 auto 5vw 0;
        padding: 0 0 5vw;/*余白の指定*/
        justify-content: flex-start;
    }
    
    .box_text_tag{
        width: 85vw;
        margin-bottom: 5vw;
    }

    .works_text{
        width: 85vw;
    }
    
    .works_text li{
        display: flex;
        margin-top: 1vw;
    }
    .page_works3 span{
        width: 20vw;
    }

    .page_works4 span{
        width: 34vw;
    }
}