@charset "UTF-8";

/* ----------common---------- */
:root {
    --fieldandbloomColor-gray: #E6E6E6;
    --fieldandbloomColor-white: #FFFFF3;
    --fieldandbloomColor-black: #333333;
    --fieldandbloomColor-pink: #E5B2C2;
    --fieldandbloomColor-yellow: #E5E5B2;
    --fieldandbloomColor-orange: #E5D3B2;
    --fieldandbloomColor-blue: #B2E5E1;
    --fieldandbloomColor-green: #B2E5B2;
}

html {
    background-color: var(--fieldandbloomColor-black);
}

.container {
    color: var(--fieldandbloomColor-black);
}

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

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

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

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

.btn__nav {
    border-color: var(--fieldandbloomColor-black);
    background-color: var(--fieldandbloomColor-white);
}

.btn__nav span {
    background-color: var(--fieldandbloomColor-black);
}

.btn__nav.active {
    border-color: var(--fieldandbloomColor-black);
    background-color: var(--fieldandbloomColor-gray);
    background-image: none;
}

.btn__nav.active span {
    background-color: var(--fieldandbloomColor-black);
}

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

    .nav__item a {
        background-color: var(--fieldandbloomColor-gray);
        border-color: var(--fieldandbloomColor-black);
        color: var(--fieldandbloomColor-black);
    }
    
    .nav__item a:hover {
        background-image: none;
        background-color: var(--fieldandbloomColor-white);
        border-color: var(--fieldandbloomColor-black);
        color: var(--fieldandbloomColor-black);
    }   
}
/* nav pc */
/* nav */

.headerTopic {
    color: var(--fieldandbloomColor-black);
}

.mainVisual {
    border-color: var(--fieldandbloomColor-black);
    background-color: var(--fieldandbloomColor-gray);
}
/* header */

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

.section__subTopic {
    color: var(--fieldandbloomColor-black);
}

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

/* footer */
.footer {
    background-color: var(--fieldandbloomColor-gray);
    border-color: var(--fieldandbloomColor-black);
    color: var(--fieldandbloomColor-black);
}
/* footer */
/* ----------common---------- */

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

.worksItem img {
    border-color: var(--fieldandbloomColor-black);
}

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

/* worksDetail */
.worksDetail {
    background-color: var(--fieldandbloomColor-gray);
    border-color: var(--fieldandbloomColor-black);
}

.detail__item {
    background-color: var(--fieldandbloomColor-white);
    border-color: var(--fieldandbloomColor-black);
}

.detail__img {
    border-color: var(--fieldandbloomColor-black);
}

.detail__color {
    border-color: var(--fieldandbloomColor-black);
}

.detail__color span {
    width: 3.65vw;
    color: var(--fieldandbloomColor-black);
}

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

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

.detail__color span:nth-of-type(3) {
    background-color: var(--fieldandbloomColor-pink);
}

.detail__color span:nth-of-type(4) {
    background-color: var(--fieldandbloomColor-yellow);
}

.detail__color span:nth-of-type(5) {
    background-color: var(--fieldandbloomColor-orange);
}

.detail__color span:nth-of-type(6) {
    background-color: var(--fieldandbloomColor-blue);
}

.detail__color span:last-of-type {
    background-image: none;
    background-color: var(--fieldandbloomColor-green);
}

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

    .detail__item--target {
        display: block;
    }

    .detail__txt--flex {
        border-color: var(--fieldandbloomColor-black);
    }

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

    .detail__item--target dd:first-of-type {
        font-weight: 700;
        margin-top: 45px;
    }

    .detail__item--target .detail__txt {
        width: auto;
    }

    .detail__item--target .detail__txt--flex {
        padding: 30px 2.08vw;
    }

    .detail__item--target .detail__txt--flex:first-of-type {
        border-top: var(--fieldandbloomColor-black) dotted 1px;
        margin-top: 30px;
    }
    
    .detail__img {
        width: 27.77vw;
    }
    
    .detail__color span {
        width: 3.32vw;
    }
    
    .detail__color span:first-of-type {
        width: 41.59vw;
    }
    
    .detail__color span:nth-of-type(2) {
        width: 24.95vw;
    }
}
/* worksDetail pc */

/* siteImg */
.siteImg__list--pc {
    background-color: var(--fieldandbloomColor-white);
    border: var(--fieldandbloomColor-black) solid 1px;
}

.siteImg__list--sp {
    background-color: var(--fieldandbloomColor-gray);
    border: var(--fieldandbloomColor-black) solid 1px;
}

.siteImg__item {
    height: auto;
}

.siteImg__item img {
    border: var(--fieldandbloomColor-black) solid 1px;
}
/* siteImg */
/* ----------works detail---------- */