@charset "UTF-8"; 

:root {
    --scale: 1;
    --scroll2: 1;
    --scroll1: 0;
    --maxScaleY: 6.911392;
    --maxScaleX: 6.381875;
    --h: 79px;
}

body {
    background-color: #fff;
    color: rgba(110, 95, 95);
}

.works {
    display: flex;
    width: 100%;
    height: auto;
    padding: 5vw 7vw 0;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.title {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 2vw;
    gap: 3vw;
    border-bottom: 1px solid #6E5F5F;
}

h1 {
    font-family: "Noto Sans JP";
    -webkit-text-stroke-width: 1px;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 1.5vw;
}

.title p {
    color: #a7a7a7;
    font-family: "Noto Sans JP";
    font-size: 1.2rem;
    line-height: 2rem;
    letter-spacing: 0.3vw;
}

@media screen and (min-width:769px) {

    .works3 {
        padding: 0 5vw;
    }

    h1 {
        font-size: 3rem;
        letter-spacing: 1vw;
    }

    .title p {
        font-size: 16px;
    }

}

/* mainexplanation */

.mainexplanation {
    display: flex;
    width: 100%;
    height: auto;
    padding: 15vw 5vw;
    flex-direction: column;
    align-items: center;
    gap: 15vw;
}

.mainexplanation-area {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
    flex-direction: column;
    gap: 10vw;
}

.devicemockup-img {
    display: flex;
    width: 100%;
    height: 50vw;
}

.mainexplanation-list {
    display: flex;
    width: 100%;
    height: auto;
    gap: 10vw;
    flex-direction: column;
}

.mainexplanation-item {
    display: flex;
    flex-direction: row;
    gap: 2vw;
    justify-content: space-between;
}

.mainexplanation-item h2 {
    font-family: "Noto Sans JP";
    font-size: 1.2rem;
    letter-spacing: 1vw;
}

.mainexplanation-item p {
    width: 50%;
    color: #a7a7a7;
    font-family: "Noto Sans JP";
    font-size: 1.2rem;
    line-height: 2rem;
    letter-spacing: 0.2vw;
}
.mainexplanation-item a {
    width: 50%;
    color: #a7a7a7;
    font-family: "Noto Sans JP";
    font-size: 1.2rem;
    line-height: 2rem;
    letter-spacing: 0.2vw;
}

@media screen and (min-width:769px) {

    .mainexplanation {
        padding: 8vw 5vw 0;
        gap: 8vw;
    }

    .mainexplanation-area {
        flex-direction: row;
        align-items: center;
        gap: 8vw;
    }

    .devicemockup-img {
        width: 100%;
        height: 35vw;
    }

    .mainexplanation-list {
        width: 45%;
        gap: 3vw;
    }

    .mainexplanation-item {
        flex-direction: column;
        gap: 1vw;
    }

    .mainexplanation-item h2 {
        font-size: 1.6rem;
        letter-spacing: 0.3vw;
    }

    .mainexplanation-item p {
        width: 100%;
        font-size: 1.2rem;
    }
    
}    

/* pagemockup */

.pagemockup {
    display: flex;
    width: 100%;
    height: auto;
}

/* explanation-area */

.explanation-area {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    gap: 10vw;
}    

.explanation-list {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: space-between;
}    

.explanation-list h2 {
    color: #6E5F5F;
    font-family: "Noto Sans JP";
    font-size: 1.2rem;
    letter-spacing: 1vw;
}    

.explanation-list p {
    width: 50%;
    color: #a7a7a7;
    font-family: "Noto Sans JP";
    font-size: 1.2rem;
    letter-spacing: 0.1vw;
    line-height: 4vw;
}    

@media screen and (min-width:769px) {
    
    .explanation-area {
        gap: 5vw;
    }     

    .explanation-list h2 {
        font-size: 1.6rem;
        letter-spacing: 0.3vw;
    }    

    .explanation-list p {
        width: 70%;
        font-size: 1.3rem;
        letter-spacing: 0.1vw;
        line-height: 2vw;
    }    

}    

.mockuparea {
    display: flex;
    width: 100%;
    height: auto;
    padding: 5vw 0;
}

.mockuparea-img {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 40vw;
}


/* accordion */

.accordion {
    display: flex;
    width: 100%;
    height: auto;
    padding: 5vw 0vw;
    position: relative;
    flex-direction: column;
}

.accordion-item {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
}

.accordion-title {
    display: flex;
    width: 100%;
    height: auto;
    padding-bottom: 10vw;
    gap: 5vw;
    justify-content: center;
    cursor: pointer;
}

.accordion-title p {
    font-size: 1.6rem;
    letter-spacing: 0.5rem;
    color: #a7a7a7;
}

.accordionarea {
    display: none;
}

.accordion-title::after {
    border-right: solid 2px #a7a7a7;
    border-top: solid 2px #a7a7a7;
    content: "";
    display: block;
    width: 1.5vw;
    height: 1.5vw;
    transform: rotate(135deg);
    transition: transform .8s ease-in-out, top .8s ease-in-out;
    cursor: pointer;
}

.accordion-title.open::after {
    top: 35%;
    transform: rotate(-45deg);
}

@media screen and (min-width:769px) {

    .accordion-title {
        padding-bottom: 5vw;
    }

    .accordion-title p {
        font-size: 1.6rem;
        letter-spacing: 0.5rem;
        color: #a7a7a7;
        height: 1.5vw;
        align-items: center;
    }

    .accordion-title::after {
        border-right: solid 2px #a7a7a7;
        border-top: solid 2px #a7a7a7;
        width: 1vw;
        height: 1vw;
    }
}