@charset "UTF-8";

html{
    font-size: 62.5%;
}

body{
    font-family: 
    "Noto Sans JP",
    Serif,
    Rubik Mono One,
    Ms Madi;
    font-style: normal;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: #393736;
    background-color: #FCF9F1;
    text-align: center;
}

img{
    max-width: 100%;
    height: auto;
}

:root{
    --primary-lightblue:#7C85A1;
    --primary-blue:#1070B3;
    --primary-greenblue:#2D90A0;
    --primary-orange:#F29E1F;
    --primary-gray:#7C85A1;
    --contentpadding:4.1%;
    --contentpaddingpc:8.3%;
}


h3{
    font-size: 4rem;
}

h4{
    font-size: 1.6rem;
    margin: 17px 0 0 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

h4::before{
    border-top: 1px solid var(--primary-blue);
    content: '';
    width: 35px;
    margin-right: 13px;
}

/* sp */
@media screen and (max-width:700px) {
    h4{
        font-size: 1.3rem;
        margin: 10px 0 0 12px;
    }
    h4::before{
        width: 20px;
    }
}


/* ===============
header
================== */
h1{
    font-size: 5rem;
    font-family: Ms Madi;
}

/* header sp */
@media screen and (max-width:700px){
    h1{
        font-size: 3rem;
        margin-left: 2%;
    }
}

/* ================
main 
================= */

/* --------------
article__header
----------------- */
.article__header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px var(--contentpaddingpc);
    margin: 0 auto;
    /* background-image: url(../image/IMG_9165\ 1.jpg); */
    background-image: url(../image/main_visual.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.article__header p{
    font-size: 4rem;
    rotate: -90deg;
}

.article__headerName{
    font-size: 10rem;
    font-family: Bebas Neue;
    letter-spacing: 6px;
    line-height: 1.1;
    text-shadow: 5px 3px 3px rgba(255, 255, 255, 0.5);
    text-align: right;
}

/* article__header sp */
@media screen and (max-width:700px) {
    .article__header{
        display: block;
        padding: 20px var(--contentpadding);
        position: relative;
    }
    .article__header p{
        font-size: 2rem;
        position: absolute;
        top: 22%;
        left: 1%;
        letter-spacing: 1px;
    }
    .article__headerName{
        font-size: 5rem;
        position: absolute;
        top: 48%;
        right: 6%;
        text-shadow: 3px 1px 0px rgba(255, 255, 255, 0.5);
    }
}

/* -------------
about
-------------- */
.section--about{
    max-width: 1440px;
    margin: 0 auto;
}

.topicName{
    font-size: 5rem;
}

.about span{
    color: var(--primary-greenblue);
}

.topic{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.profile__group{
    display: flex;
    justify-content: space-between;
    padding: 0 5%;
    margin: 80px auto 0;
}

.profile__group img{
    width: 40%;
    object-fit: contain;
}

.profile{
    width: 46%;
    text-align: left;
    align-items: end;
    padding: 20px 0;
}

.category{
    font-size: 3.6rem;
    letter-spacing: 3px;
    border-bottom: 3px solid rgba(45, 144, 170, 0.5);
}

.name{
    font-size: 1.7rem;
    margin: 35px 0 0 2%;
}

.profile__txt{
    line-height: 2;
    margin: 13px 0 0 2%;
}

.about__btn{
    margin-left: auto;
}

.about__btn span{
    margin-left: 10px;
}

/* about sp */
@media screen and (max-width:700px) {
    .topicName{
        font-size: 3rem;
    }
    .profile__group{
        display: block;
        margin: 60px auto 0;
    }
    .profile__group img{
        width: 78%;
    }
    .profile{
        width: 100%;
        padding: 30px 2%;
    }
    .category{
        font-size: 2rem;
    }
}


/* ---------------
works
---------------- */
.section--works{
    max-width: 1440px;
    margin: 0 auto;
}

.works span{
    color: var(--primary-orange);
}

.works__nav{
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0 40px;
    margin: 50px 2% 0 0;
}

.works__nav li:hover{
    opacity: 0.7;
}

.works__list{
    display: flex;
    justify-content: center;
    gap: 50px 40px;
    flex-wrap: wrap;
    margin: 40px auto 0;
}

.works__list::after{
    content: "";
    display: block;
    width: 47%;
    margin: 0 auto;
}

.production{
    width: 47%;
    margin:  0 auto;
}

.production:hover{
    opacity: 0.8;
}

.production img{
    padding: 40px 4%;
}

.works_sugutabe__img{
    background-color: rgba(205, 184, 185, 0.4);
}

.works_headspa__img{
    background-color: rgba(184, 204, 205, 0.4);
}

.works_sauna__img{
    background-color: rgba(222, 219, 163, 0.4);
}

.works__item{
    text-align: left;
    margin: 20px 0 0 10px;
}

.type{
    color: var(--primary-gray);
}

h3{
    font-size: 1.8rem;
}

h3 span{
    font-weight: 700;
    margin-left: 15px;
}

.works__btn{
    margin: 50px auto 0;
}

.works__btn span{
    margin-left: 10px;
}

/* works sp */
@media screen and (max-width:800px) {
    .works__nav{
        margin: 42px 2% 0 0;
    }
    .works__list{
        display: block;
        gap: 50px 30px;
    }
    .production{
        width: 90%;
        margin-top: 40px;
    }
    .production img{
        padding: 26px 4%;
    }
}