@charset "UTF-8";

/* =================
worksLower__header
==================== */
.worksLower__header{
    padding: 50px 9.8% 30px;
    position: relative;
}

.header__nav{
    width: 30px;
    position: fixed;
    top: 42px;
    right: 35px;
    z-index: 101;
}

.wkLheader__topic{
    width: fit-content;
}

.wkLheader__topic p{
    color: var(--green,#228966);
    font-size: 1.4rem;
    font-weight: 700;
}

.wkLheader__topic h2{
    color: var(--green,#228966);
    font-size: 2rem;
    font-weight: 700;
}

.mockup{
    display: block;
    margin: 30px auto 0;
}

.mockup__banner{
    max-width: 350px;
    width: 100%;
}

.wkLheader__cont dl{
    margin-top: 35px;
}

.wkL__title{
    font-size: 1.6rem;
    font-weight: 500;
}

.txt__wkL{
    margin-top: 5px;
    line-height: 1.5;
}

.txt__wkL--url{
    margin-top: 20px;
}

.btn__wkLheader{
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8vw;
}

.btn__wkLheaderO img{
    width: 132px;
}

.btn__wkLheaderG img{
    width: 120px;
}

.fv__list{
    display: none;
}

/* worksLower__header pc */
@media screen and (min-width: 470px) {
    .worksLower__header{
        padding: 50px 9.8%;
    }

    .btn__wkLheader,
    .btn__wkLheaderG,
    .btn__wkLheaderO{
        display: block;
        width: fit-content;
    }

    .btn__wkLheader{
        position: absolute;
        bottom: 32px;
        right: 8.6vw;
        left: auto;
        top: auto;
    }

    .btn__wkLheaderO img{
        width: 36.6vw;
        max-width: 110px;
    }

    .btn__wkLheaderG img{
        max-width: 105px;
        width: 26.7vw;   
    }
}
/* pc 470px */

@media screen and (min-width:1025px) {
    .wkLheader__topic p{
        font-size: 1.6rem;
    }

    .wkLheader__topic h2{
        font-size: 3rem;
    }

    .wkL__title{
        font-size: 1.8rem;
    }

    .btn__wkLheader{
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0 8vw;
    }

    .btn__wkLheaderO img{
        width: 132px;
    }

    .btn__wkLheaderG img{
        width: 120px;
    }

    .fv__list{
        display: block;
        position: relative;
        z-index: 101;
    }

    .fv__item{
        color: #7C672D;
        text-align: left;
        font-family: "optima";
        font-size: 2rem;
        font-weight: 700;
        margin-top: 15px;
        display: flex;
        align-items: center;
    }

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

    .fv__item::before{
        content: "";
        display: inline-block;
        width: 30px;
        height: 2px;
        background-color: #7C672D;
        margin-right: 20px;
    }

    .btn__wkLheader{
        position: absolute;
        top: 460px;
        left: 56vw;
        gap: 0 70px;
    }

    .btn__wkLheaderO img{
        max-width: 132px;
    }

    .btn__wkLheaderG img{
        max-width: 120px;
    }

    .worksLower__header{
        padding: 50px 9.7% 150px;
    }

    .wkLheader__flex{
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 0 30px;
    }

    .wkLheader__cont{
        max-width: 470px;
        width: 32vw;
        padding: 15px 0;
    }

    .mockup{
        margin: 0 60px 0 0;
    }

    .mockup__site{
        max-width: 742px;
        width: 51.5vw;
    }

    .wkLheader__cont dl:first-of-type{
        margin-top: 0;
    }

    .wkLheader__topicflex{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        max-width: 1160px;
        margin: 0 auto;
    }
}
/* pc 1025px */

@media screen and (min-width: 1140px) {
    .worksLower__header{
        padding: 50px 9.7% ;
    }

    .btn__wkLheader,
    .btn__wkLheaderG,
    .btn__wkLheaderO{
        display: block;
        width: fit-content;
    }

    .btn__wkLheader{
        position: absolute;
        bottom: 44px;
        right: 5.6vw;
        left: auto;
        top: auto;
    }

    .btn__wkLheaderO img{
        width: 9.1vw;
        max-width: 132px;
    }

    .btn__wkLheaderG img{
        max-width: 132px;
        width: 8.3vw;   
    }
}
/* pc 1140px */

/* =================
process__figma
==================== */
.process__slide{
    background-color: var(--backgroundY,#FFF2BA);
    position: relative;
    padding: 50px 9.8%;
}

.separator--processF{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 50px;
}

.sec__title--process{
    color: var(--green,#228966);
    text-align: center;
    font-family: "optima";
    font-size: 5.4rem;
    line-height: 1; /* 70px */
}

.figmaslide{
    display: block;
    margin: 35px auto 0;
    border-radius: 12px;
    border: 3px solid #E9E9E9;
    width: 100%;
    aspect-ratio: 4/3;
}

/* process__figma pc */
@media screen and (min-width:1025px) {
    .sec__title--process{
        font-size: 6.4rem;
        margin-top: 25px;
    }

    .figmaslide{
        margin: 60px auto 0;
        max-width: 930px;
        max-height: 575px;
    }

    .process__slide{
        padding: 50px 9.7% 70px;
    }
}

@media screen and (min-width: 1160px) {
    .separator--processF{
        max-height: 110px;
    }
}
/* pc 1160px */

/* =================
process__txt
==================== */
.process__txtcont{
    position: relative;
    padding: 50px 9.8% 65px;
}

.separator--processT{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 50px;
}

.process__item{
    margin-top: 60px;
}

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

.process__topic{
    color: var(--green,#228966);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.txt__process{
    margin: 20px auto 0;
    line-height: 1.7;
    max-width: 720px;
    display: block;
}

.txt__process span{
    line-height: 1.7;
}

.process__detail--el{
    margin-top: 45px;
}

.process__detail--el h3{
    text-align: center;
    font-size: 1.5rem;
}

.colorpalette{
    margin: 20px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    width: fit-content;
}

.txt__color{
    display: block;
    text-align: center;
    font-size: 1.4rem;
}

.txt__color--white{
    color: #FDFDFD;
}

.process__border{
    display: block;
    border: 2px solid #D9D9D9;
    padding: 14px;
    width: 33vw;
    max-width: 125px;
}

.process__border:first-of-type{
    background-color: #735120;
}

.process__border:nth-of-type(2){
    background-color: #FDFDFD;
}

.process__border:nth-of-type(3){
    background-color: #EFE5E2;
}

.process__border:nth-of-type(4){
    background-color: #447D4B;
}

/* process__txt pc */
@media screen and (max-width :336px) {
    .process__border{
        padding: 9px;
    }
}

@media screen and (min-width: 566px) {
    .txt__process--concept{
        text-align: center;
    }
}

@media screen and (min-width: 700px) {
    .colorpalette{
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media screen and (min-width:1025px) {
    .process__topic{
        font-size: 1.6rem;
    }

    .process__list{
        margin-top: 20px;
    }
}

@media screen and (min-width: 1160px) {
    .separator--processT{
        max-height: 110px;
    }
}

@media screen and (min-width: 1200px) {
    .process__txtcont{
        padding: 150px 9.7% 70px;
    }

    .process__item{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 80px;
    }

    .txt__process{
        margin: 0;
        width: 720px;
    }

    .process__list{
        padding: 0 5.5%;
        margin: 0 auto;
        max-width: 1160px;
    }

    .txt__process--margin{
        margin: 20px auto 0;
    }

    .txt__process--concept{
        text-align: left;
    }
}

/* =================
design
==================== */
.designcomp{
    background-color: var(--backgroundY,#FFF2BA);
    position: relative;
    padding: 60px 11.4% 50px;
}

.separator--design{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 50px;
}

.sec__title--design{
    color: var(--green,#228966);
    text-align: center;
    font-family: "optima";
    font-size: 5.5rem;
    line-height: 1; /* 80px */
    /* transform: rotate(2.7deg); */
}

.design__list{
    margin: 45px auto 0;
    max-width: 1160px;
}

.design__item{
    display: block;
    margin: 60px auto 0;
    max-width: 290px;
}

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

.design__item h3{
    color: #7C672D;
    font-size: 2.2rem;
    font-weight: 500;
}

.scroll--pc{
    display: none;
}

.scroll--sp{
    display: block;
    margin: 15px auto 0;
    border-radius: 12px;
    border: 3px solid #E9E9E9;
}

/* design pc */
@media screen and (min-width: 768px) {
    .scroll--sp{
        width: 23.4vw;
        max-width: 338px;
    }

    .scroll--pc{
        display: block;
        margin: 15px auto 0;
        border-radius: 12px;
        border: 3px solid #E9E9E9;
        width: 35.4vw;
        max-width: 510px;
    }

    .design__item{
        margin-top: 60px;
        max-width: 1160px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0 5.4vw;
    }

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

    .designcomp{
        padding: 70px 9.7%;
    }
}
/* pc 768px */

@media screen and (min-width:1025px) {
    .sec__title--design{
        font-size: 6.5rem;
        margin-top: 15px;
    }
}

@media screen and (min-width:1160px) {
    .separator--design{
        max-height: 110px;
    }
}

/* =================
other works
==================== */
.otherworks{
    position: relative;
    padding: 65px 9.8% 85px;
}

.separator--otherworks{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 50px;
}

.sec__title--otherworks{
    color: var(--green,#228966);
    text-align: center;
    font-family: "optima";
    font-size: 5.5rem;
    line-height: 0.9; /* 63px */
}

.slider{
    margin: 40px auto 0;
    max-width: 1160px;
}

.cont__slide-mediaB,
.cont__slide-mediaS{
    box-shadow: 3px 3px 3px 0 #A09564;
    height: 49vw;
    object-fit: cover;
    margin: 0 auto;
    max-height: 320px;
    overflow: hidden;
}

.slide-media--site{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.slide-media--banner{
    width: 100%;
    object-fit: contain;
}

.slide-content{
    margin: 15px auto 0;
    width: 80vw;
}

.slide-flex{
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 0 20px;
}

.slide-kinds{
    font-size: 1.4rem;
    font-weight: 500;
    border: 1px solid var(--pink,#F7845E);
    border-radius: 24px;
    padding: 8px 20px;
    background-color: var(--pink,#F7845E);
    color: #FDFDFD;
    text-align: center;
}

.slide-kinds--yellow{
    border: 1px solid #FFBE70;
    border-radius: 24px;
    padding: 8px 20px;
    background-color: #FFBE70;
    color: var(--black,#303030);
}

.slide-designkinds{
    font-size: 1.3rem;
}

.slide-content h2{
    font-size: 1.4rem;
}

.slide-content h2{
    margin-top: 10px;
}

.br__pc--client{
    display: block;
}

.br__pc--mahopan{
    display: block;
}

.br__pc--site{
    display: none;
}

.br__pc--skincare,
.br__pc--english,
.br__pc--career,
.br__pc--houseworks{
    display: none;
}

.br__sp--skincare{
    display: block;
}

.br__sp--skincareRow{
    display: none;
}

.cont__slide-mediaB{
    width: 49vw;
    max-width: 320px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* other works pc */
@media screen and (min-width:340px) {
    .br__sp--skincare{
        display: none;
    }

    .br__sp--skincareRow{
        display: block;
    }
}

@media screen and (min-width:359px) {
    .br__pc--client{
        display: none;
    }
}

@media screen and (min-width:405px) {
    .br__pc--mahopan{
        display: none;
    }
}

@media screen and (min-width:600px) {
    .br__pc--skincare,
    .br__pc--english,
    .br__pc--career,
    .br__pc--houseworks,
    .br__pc--site{
        display: block;
    }

    .br__pc--mahopan{
        display: block;
    }

    .cont__slide-mediaS{
        height: 22.2vw;
        width: 34.7vw;
        max-height: 320px;
        max-width: 500px;
    }

    .cont__slide-mediaB{
        height: 22.2vw;
        width: 22.2vw;
        max-height: 320px;
        max-width: 320px;
    }

    .slide-content{
        margin-top: 20px;
        width: 34.7vw;
        max-width: 500px;
    }

    .br__pc--client{
        display: block;
    }

    .slide-kinds--yellow{
        text-align: center;
    }
}

@media screen and (min-width: 605px) {
    .br__pc--houseworks{
        display: none;
    }
}

@media screen and (min-width:611px) {
    .br__pc--site{
        display: none;
    }
}

@media screen and (min-width: 646px) {
    .br__pc--english,
    .br__pc--career{
        display: none;
    }
}

@media screen and (min-width: 686px) {
    .br__pc--skincare{
        display: none;
    }
}

@media screen and (min-width: 733px) {
    .br__pc--client{
        display: none;
    }
}

@media screen and (min-width: 1025px) {
    .slide-media--banner,
    .slide-media--site{
        transition:1s all;
    }

    .slide-media--banner:hover,
    .slide-media--site:hover{
        transform: scale(1.2);
        transition:1s all;
    }

    .sec__title--otherworks{
        font-size: 6.5rem;
        margin-top: 15px;
    }

    .slide-kinds{
        font-size: 1.6rem;
    }

    .slide-designkinds{
        font-size: 1.4rem;
    }

    .slide-content h2{
        font-size: 1.6rem;
    }
}

@media screen and (min-width: 1098px) {
    .br__pc--mahopan{
        display: none;
    }
}

@media screen and (min-width :1160px) {
    .separator--otherworks{
        max-height: 110px;
    }

    .otherworks{
        padding: 70px 9.7% 50px;
    }

    .slider{
        margin-top: 50px;
    }
}

/* =================
slide__otherworks
==================== */
.sliderArea {
  max-width: 100%;
  margin: 0 auto;
}

.sliderArea.w300 {
  max-width: 300px;
}

.slick-slide {
  margin: 0 5px;
}

.slick-prev, .slick-next {
    z-index: 1;
    bottom: -70px;
}

.slick-next{
    right: 0;
}

.slick-prev{
    right: 50px;
}

.slick-prev::before{
    content: "";
    display: block;
    aspect-ratio: 1/1;
    max-width: 40px;
    max-height: 40px;
    background-image: url(../mahopan/img/btn-arrowL.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.slick-next::before{
    content: "";
    display: block;
    aspect-ratio: 1/1;
    max-width: 40px;
    max-height: 40px;
    background-image: url(../mahopan/img/btn-arrowR.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.slick-prev:before, .slick-next:before {
  color: #000;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: 1;
}

.slick-current {
  opacity: 1;
}

.thumb {
  margin: 20px 0 0;
}

.thumb .slick-slide {
  cursor: pointer;
}

.thumb .slick-slide:hover {
  opacity: .7;
}

/* =================
footer
==================== */
.footer__flowerB{
    display: none;
}

.footer__flowerR{
    width: 90px;
    display: block;
    margin: 0 auto;
}

/* footer pc */
@media screen and (min-width :1025px) {
    .footer__flowerR{
        display: block;
        width: 7.6vw;
        max-width: 110px;
        margin: 0;
    }

    .footer__flowerB{
        display: block;
        width: 8.3vw;
        max-width: 120px;
    }
}
/* pc 1025px */