@charset "UTF-8";

/* ----------common---------- */
:root {
    --shikijitsuColor-green: #3F503E;
    --shikijitsuColor-white: #F9EBD0;
    --shikijitsuColor-orange: #C76234;
    --shikijitsuColor-ligthBlue: #83BCAE;
}

html {
    background-color: var(--shikijitsuColor-green);
}

.container {
    color: var(--shikijitsuColor-green);
}

.btn__back {
    background-color: var(--shikijitsuColor-orange);
    color: var(--shikijitsuColor-white);
    border: var(--shikijitsuColor-white) solid 1px;
}

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

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

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

.btn__nav {
    border-color: var(--shikijitsuColor-white);
    background-color: var(--shikijitsuColor-green);
}

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

.btn__nav.active {
    border-color: var(--shikijitsuColor-green);
    background-color: var(--shikijitsuColor-ligthBlue);
    background-image: none;
}

.btn__nav.active span {
    background-color: var(--shikijitsuColor-green);
}

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

    .nav__item a {
        background-color: var(--shikijitsuColor-green);
        border-color: var(--shikijitsuColor-white);
        color: var(--shikijitsuColor-white);
    }
    
    .nav__item a:hover {
        background-image: none;
        background-color: var(--shikijitsuColor-ligthBlue);
        border-color: var(--shikijitsuColor-white);
        color: var(--shikijitsuColor-white);
    }   
}
/* nav pc */
/* nav */

.headerTopic {
    color: var(--shikijitsuColor-white);
}

.mainVisual {
    border-color: var(--shikijitsuColor-white);
    background-color: var(--shikijitsuColor-green);
}
/* header */

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

.section__subTopic {
    color: var(--shikijitsuColor-white);
    margin-top: 3px;
}

/* main pc */
@media screen and (min-width:821px) {
    .section__subTopic {
        margin-top: 0;
    }

    .scrollIcon::before {
        background-color: var(--shikijitsuColor-white);
    }
    
    .scrollIcon::after {
        color: var(--shikijitsuColor-white);
    }
}
/* main pc */
/* main */

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

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

.worksItem img {
    border-color: var(--shikijitsuColor-green);
}

.worksItem__link::after {
    background-image: url(../images/works/shikijitsu-records/link-arrow.jpg);
}
/* worksTopic */

/* worksDetail */
.worksDetail {
    background-color: var(--shikijitsuColor-green);
    border-color: var(--shikijitsuColor-white);
}

.detail__item {
    background-color: var(--shikijitsuColor-white);
    border-color: var(--shikijitsuColor-green);
}

.detail__img {
    border-color: var(--shikijitsuColor-green);
}

.detail__img--icon {
    height: 22.91vw;
    margin-right: 3.46vw;
}

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

.detail__color span {
    width: 27.44vw;
}

.detail__color span:first-of-type {
    color: var(--shikijitsuColor-green);
    background-color: var(--shikijitsuColor-white);
}

.detail__color span:nth-of-type(2) {
    color: var(--shikijitsuColor-white);
    background-color: var(--shikijitsuColor-green);
}

.detail__color span:nth-of-type(3) {
    width: 18.29vw;
    color: var(--shikijitsuColor-white);
    background-color: var(--shikijitsuColor-orange);
}

.detail__color span:last-of-type {
    width: 18.29vw;
    background-image: none;
    color: var(--shikijitsuColor-green);
    background-color: var(--shikijitsuColor-ligthBlue);
}

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

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

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

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

    .detail__item--info .detail__img {
        height: 22.22vw;
    }
    
    .detail__item--design .detail__img {
        height: 22.22vw;
    }

    .detail__item--design .detail__img--icon {
        height: 14.86vw;
        margin: 0 2.083vw 0 0;
    }

    .detail__item--design .detail__img--icon:last-of-type {
        margin: 0;
    }

    .detail__color span {
        width: 24.95vw;
    }

    .detail__color span:nth-of-type(3), .detail__color span:last-of-type {
        width: 16.63vw;
    }
}
/* worksDetail pc */

/* siteImg */
.siteImg__list--pc {
    background-color: var(--shikijitsuColor-white);
}

.siteImg__list--sp {
    border: var(--shikijitsuColor-white) solid 1px;
    background-color: var(--shikijitsuColor-green);
}

.siteImg__list::before {
    content: '';
    width: 2.933vw;
    height: 3.73vw;
    position: absolute;
    top: 16vw;
    left: 50%;
    background-image: url(../images/works/shikijitsu-records/img-arrow_pc.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(--shikijitsuColor-green);
    transform: translateX(-6.13vw);
}

.section--siteImgsp .siteImg__list::before {
    background-image: url(../images/works/shikijitsu-records/img-arrow_sp.jpg);
}

.section--siteImgsp .siteImg__list::after {
    color: var(--shikijitsuColor-white);
}

.siteImg__item {
    border-radius: 2.66vw;
    overflow: scroll;
}

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

.siteImg__item--pc {
    border: var(--shikijitsuColor-green) solid 1px;
}

.siteImg__item--sp {
    border: var(--shikijitsuColor-white) solid 1px;
}

@media screen and (min-width:768px) and (max-width:820px) {
    .siteImg__item {
        border-radius: 20px;
    }
    
    .siteImg__item--pc:nth-of-type(2), .siteImg__item--sp:nth-of-type(2), .siteImg__item--sp:nth-of-type(3) {
        margin-top: 15.73vw;
    }
}

/* siteImg pc */
@media screen and (min-width:821px) {
    .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 {
        border-radius: 20px;
    }
    
    .siteImg__item--pc:first-of-type, .siteImg__item--pc:nth-of-type(2),
    .siteImg__item--sp:first-of-type, .siteImg__item--sp:nth-of-type(2), .siteImg__item--sp:nth-of-type(3) {
        margin-top: min(65px,4.51vw);
    }
}
/* siteImg pc */
/* siteImg */
/* ----------works detail---------- */