@charset "UTF-8";

/* ----------common---------- */
:root {
    --sugutabeColor-white: #FAF4D5;
    --sugutabeColor-green: #81AF79;
    --sugutabeColor-brown: #58534B;
    --sugutabeColor-red: #CE6B62;
}

html {
    background-color: var(--sugutabeColor-white);
}

.container {
    color: var(--sugutabeColor-brown);
}

.btn__back {
    background-color: var(--sugutabeColor-brown);
    color: var(--sugutabeColor-white);
}

.btn__back::after {
    background-image: url(../images/works/sugutabe/back-arrow.png);
}

@media screen and (min-width:821px) {
    .btn__back:hover {
        color: var(--sugutabeColor-white);
        background-color: var(--sugutabeColor-red);
        border: none;
        background-image: none;
    }
    
    .btn__back:hover::after {
        background-image: url(../images/works/sugutabe/back-arrow.png);
    }
}

/* header */
/* nav */
.nav {
    background-color: var(--sugutabeColor-green);
    border-color: var(--sugutabeColor-brown);
    color: var(--sugutabeColor-white);
}

.btn__nav {
    border-color: var(--sugutabeColor-brown);
    background-color: var(--sugutabeColor-white);
}

.btn__nav span {
    background-color: var(--sugutabeColor-brown);
}

.btn__nav.active {
    border-color: var(--sugutabeColor-brown);
    background-color: var(--sugutabeColor-red);
    background-image: none;
}

.btn__nav.active span {
    background-color: var(--sugutabeColor-white);
}

/* nav pc */
@media screen and (min-width:970px) {
    .nav {
        background-color: transparent;
    }

    .nav__item a {
        background-color: var(--sugutabeColor-white);
        border-color: var(--sugutabeColor-brown);
        color: var(--sugutabeColor-brown);
    }
    
    .nav__item a:hover {
        background-image: none;
        background-color: var(--sugutabeColor-red);
        border-color: var(--sugutabeColor-brown);
        color: var(--sugutabeColor-white);
    }   
}
/* nav pc */
/* nav */

.headerTopic {
    color: var(--sugutabeColor-brown);
}

.mainVisual {
    border-color: var(--sugutabeColor-brown);
    background-color: var(--sugutabeColor-white);
}

/* header pc */
@media screen and (min-width:821px) {
    .scrollIcon::before {
        background-color: var(--sugutabeColor-brown);
    }
    
    .scrollIcon::after {
        color: var(--sugutabeColor-brown);
    }
}
/* header pc */
/* header */

/* main */
.section__name {
    color: var(--sugutabeColor-brown);
    transition: all 0.4s;
}

.section__subTopic {
    color: var(--sugutabeColor-brown);
}
/* main */

/* footer */
.footer {
    background-color: var(--sugutabeColor-white);
    border-color: var(--sugutabeColor-brown);
    color: var(--sugutabeColor-brown);
}
/* footer */
/* ----------common---------- */

/* ----------main---------- */
/* worksTopic */
.worksItem {
    background-color: var(--sugutabeColor-green);
    border-color: var(--sugutabeColor-brown);
    color: var(--sugutabeColor-white);
}

.worksItem img {
    border-color: var(--sugutabeColor-brown);
}
/* worksTopic */

/* worksDetail */
.worksDetail {
    background-color: var(--sugutabeColor-brown);
    border-color: var(--sugutabeColor-brown);
}

.detail__item {
    background-color: var(--sugutabeColor-white);
    border: none;
}

.detail__topic {
    color: var(--sugutabeColor-green);
}

.detail__topic span {
    color: var(--sugutabeColor-brown);
}

.detail__img img {
    border-color: var(--sugutabeColor-brown);
}

.detail__color {
    border-color: var(--sugutabeColor-white);
}

.detail__color span {
    color: var(--sugutabeColor-brown);
}

.detail__color span:first-of-type {
    width: 45.73vw;
    background-color: var(--sugutabeColor-white);
}

.detail__color span:nth-of-type(2) {
    width: 27.44vw;
    background-color: var(--sugutabeColor-green);
}

.detail__color span:nth-of-type(3) {
    width: 16.464vw;
    background-color: var(--sugutabeColor-brown);
    color: var(--sugutabeColor-white);
}

.detail__color span:last-of-type {
    width: 1.82vw;
    background-image: none;
    background-color: var(--sugutabeColor-red);
}

/* worksDetail pc */
@media screen and (min-width:821px) {
    .detail__item--assignment {
        padding-bottom: 15px;
    }

    .detail__txt--flex {
        border-color: var(--sugutabeColor-brown);
        margin-top: 60px;
    }

    .detail__txt--flex:first-of-type {
        margin-top: 0;
    }

    .detail__item--assignment .detail__txt--flex {
        padding: 30px 2.08vw;
        margin-top: 0;
    }

    .detail__item--info .detail__img {
        height: 19.72vw;
    }

    .detail__item--design .detail__img {
        height: 17.29vw;
    }

    .detail__color span:first-of-type {
        width: 41.59vw;
    }
    
    .detail__color span:nth-of-type(2) {
        width: 24.95vw;
    }
    
    .detail__color span:nth-of-type(3) {
        width: 14.975vw;
    }
    
    .detail__color span:last-of-type {
        width: 1.66vw;
    }
}
/* worksDetail pc */

/* siteImg */
.siteImg__list--lp {
    background-color: var(--sugutabeColor-green);
    border: var(--sugutabeColor-brown) solid 1px;
}

.siteImg__list::before {
    content: '';
    width: 2.933vw;
    height: 3.73vw;
    position: absolute;
    top: 16vw;
    left: 50%;
    background-image: url(../images/works/sugutabe/img-arrow.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateX(-11.46vw);
}

.siteImg__list::after {
    content: 'SCROLL !';
    position: absolute;
    top: 16vw;
    left: 50%;
    font-family: neue-haas-grotesk-text, sans-serif;
    font-size: 3.73vw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: var(--sugutabeColor-white);
    transform: translateX(-6.13vw);
}

.siteImg__item--pc, .siteImg__item--sp {
    border-radius: 2.66vw;
    overflow: scroll;
    border: var(--sugutabeColor-brown) solid 1px;
}

.siteImg__item--pc {
    margin-top: 15.73vw;
}

.siteImg__item--sp {
    height: 148.8vw;
}

@media screen and (min-width:768px) and (max-width:820px) {
    .section--siteImg {
        height: auto;
    }

    .siteImg__item {
        border-radius: 20px;
    }

    .siteImg__item--pc, .siteImg__item--sp {
        margin-top: 15.73vw;
    }
}

/* siteImg pc */
@media screen and (min-width:768px) {
    .section--siteImg {
        height: auto;
    }
    
    .siteImg__list {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .siteImg__item--pc {
        width: min(1438px,56.38vw);
        height: min(1022px,40.13vw);
    }
    
    .siteImg__item--sp {
        width: min(375px,22.63vw);
        height: min(664px,40.13vw);
    }
}

@media screen and (min-width:821px) {
    .siteImg__list {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    
    .siteImg__list::before {
        width: min(16px,1.11vw);
        height: min(20px,1.38vw);
        top: 8.33vw;
        transform: translateX(max(-62px,-4.305vw));
    }
    
    .siteImg__list::after {
        top: 8.33vw;
        font-size: min(2rem,1.38vw);
        transform: translateX(max(-31px,-2.15vw));
    }

    .siteImg__item--pc, .siteImg__item--sp {
        margin-top: min(65px,4.51vw);
        border-radius: 20px;
    }
}
/* siteImg pc */
/* siteImg */
/* ----------works detail---------- */