@charset"utf-8";
/*==========================
fadeIn
==========================*/
.fadein{
    transform: translate(0,50px);
    opacity: 0;
    transition: 0.8s;
}
.fadein.animated{
    transform: translate(0,0);
    opacity: 1;
}
/* 初期状態：ぼやけて透明 */
.section__works,
.section__profile{
    opacity: 0;
    filter: blur(10px);
    transition: opacity 2s ease, filter 2s ease;
}
  
  /* 表示状態：くっきり表示 */
.section__works.visible,
.section__profile.visible{
    opacity: 1;
    filter: blur(0);
}
/* =========
common
===========*/
  .leaf {
    position: fixed;
    top: 20vh;         /* 初期位置 */
    left: 100px;
    width: 80px;
    height: 80px;
    background: url(../images/item/leaf.webp) no-repeat center/contain;
    transform-origin: center;
    pointer-events: none; /* クリックを邪魔しない */
    z-index: -1;
    animation: fall 100s linear infinite, sway 10s ease-in-out infinite alternate;
  }
  @keyframes sway {
    from {
      transform: translateX(0px) rotate(0deg);
    }
    to {
      transform: translateX(20vw) rotate(-45deg);
    }
  }
  
  @keyframes fall {
    to {
      top: 120%;
    }
  }

/* .main {
    padding-top: 65px;
} */
html{
    font-size: 62.5%;
}

body{
    font-family: "Noto Sans JP",
                "Noto Sans", 
                "Berkshire Swash", 
                "Kaisei Tokumin", 
                Arial,
                sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

img{
    max-width: 100%;
    height: auto;
}

:root{
    --primary--brown: #6a3a06;
    --primary--offwhite:#FFFAF3;
    --primary--green:#31744B;
    --primary--worksgreen:rgb(49,116,75,0.8);
    --primary--lightgreen:#a8d3b4;
    --primary--black:#222222;
    --primary--font--title: Berkshire Swash;
    --primary-fontsize24pxsp: clamp(0.1rem, 6.4vw, 3.2rem);
    --primary-fontsize12pxsp: clamp(0.1rem, 3.2vw, 1.6rem);
    --primary-fontsize64pxpc: clamp(4rem, 4.4vw, 8rem);
    --primary-fontsize40pxpc: clamp(3.2rem, 2.8vw, 4.8rem);
    --primary-fontsize24pxpc: clamp(0.1rem, 1.7vw, 3.2rem);
    --primary-fontsize20pxpc: clamp(0.1rem, 1.4vw, 2.4rem);
    --primary-fontsize16pxpc: clamp(0.1rem, 1.1vw, 2.0rem);
    --primary-fontsize16pxsp: clamp(0.1rem, 4.27vw, 2.0rem);
    --primary-fontsize14pxsp: clamp(0.1rem, 3.73vw, 1.8rem);
    --primary-margin25pxsp: 6.7vw;
    --primary-margin120pxpc: 8.34vw;
}

/* =========
header
===========*/

.header{
    margin: 25px var(--primary-margin25pxsp) 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* position: fixed; */
    background-color: #ffffff;
    z-index: 1;
}
.header__logo{
    width: 108px;
    height: 36px;
    align-items: center;
}

.header__logo img{
    width: 100%;
}

/* nav 初期設定 */
.nav{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    /* z-index: 100;
    transform: translateY(-100%);
    transition: transform 0.4s; */
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
    background-color:#ffffff;
    z-index: 3;
}
/* 
.nav__topic{
    color:#FFFAF3;
    font-family: "Berkshire Swash";
    font-size: 1.6rem;
} */

.nav__list{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav__item a{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav__itemen{
    font-size: 1.6rem;
}

.nav__itemja{
    color: var(--primary--green);
}

.nav__item a:last-of-type{
    margin-top: 50px;
}

.nav__sns{
    margin-top: 50px;
    width: 20px;
    height: 20px;
}
.nav__header{
    width: 40px;
    height: 40px;
    background-color: var(--primary--lightgreen);
    border-radius: 50%;
    z-index: 3;
    margin-left: 82.67vw;
    margin-top: 25px;
    position: relative;
}


.nav__btn{
    width: 20px;
    height: 2px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}


/* nav active */
.nav.active{
    /* transform: translateX(0); */
    opacity: 1;
    pointer-events: auto;
}


.header__btn{
    cursor: pointer;
    background-color: var(--primary--green);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 25px 0px 25px 76vw;
    position: fixed;
    z-index: 2;
}
.header__btn:hover{
    background-color: var(--primary--lightgreen);
}
.header__btn1,
.header__btn2{
    width: 20px;
    height: 2px;
    transition: margin-top 0.3s ease;
    cursor: pointer;
    background-color: #ffffff;
    margin: 0 auto;
}

.header__btn1{
    margin-top: 15px;
}

.header__btn2{
    margin-top: 5px;
}

.header__btn1.header__btnactive{
    margin-top: 17px;
}

.header__btn2.header__btnactive{
    margin-top: 3px;
}
/* header pc */
@media screen and (min-width:769px){
    /* nav初期設定 */
    /* .nav{
        top: -40px;
    } */
    .nav__itemen{
        font-size: 2rem;
    }
    .nav__itemja{
        font-size: 1.6rem;
    }
    .nav__sns{
        width: 40px;
        height: 40px;
    }
    .nav__header{
        width: 60px;
        height: 60px;
        margin-left: 87.5vw;
        margin-top: 80px;
    }
    
    .nav__btn{
        width: 30px;
        top: 30px;
    }
    .header{
        /* width: 100vw; */
        margin: 40px var(--primary-margin120pxpc);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header__logo{
        width: 148px;
        height: 51px;
        align-items: center;
    }
    
    .header__logo img{
        width: 100%;
    }

    .header__btn{
        width: 60px;
        height: 60px;
        margin:0px var(--primary-margin120pxpc) 0px 79.17vw;
        position: fixed;
        z-index: 2;
    }
    .header__btn1,
    .header__btn2{
        width: 30px;
    }
    
    .header__btn1{
        margin-top: 23px;
    }
    
    .header__btn2{
        margin-top: 10px;
    }
    
    .header__btn1.header__btnactive{
        margin-top: 27px;
    }
    
    .header__btn2.header__btnactive{
        margin-top: 5px;
    }

    /* .nav{
        background: transparent;
        width: auto;
        height: auto;
        padding: 0%;
        position: static;
        opacity: 1;
        pointer-events: painted;
    }

    .nav__header,
    .nav__sns,
    .header__btn{
        display: none;
    } */

    /* .nav__list {
        flex-direction: row;
    }

    .nav__item{
        margin-top: 0;
        margin-left: 77px;
    }
    .nav__item a{
        font-size: 2.4rem;
        font-family: "Berkshire Swash";
    }
    .nav__itemja{
        display: none;
    }
    .nav__itemen{
        font-size: 2.4rem;
    }
    .nav__item:first-of-type{
        margin-top: 0;
    } */
}
/* pc 769px */


/* footer */
.footer{
    background-color: var(--primary--lightgreen);
    position: relative;
    margin-top: 40px;
    padding-bottom: 10px;
}
.footer::before{
    content: '';
    display: block;
    background-image: url(../images/item/item__leaf.webp);
    background-repeat: no-repeat;
    background-size: contain;
    width: 375px;
    height: 25px;
    position: absolute;
    top: -25px;
    right: 0px;
}
.footer__title{
    text-align: center;
    padding-top: 20px;
}
.footer__titleen{
    color: #ffffff;
    font-size: 2.4rem;
}
.footer__titleja{
    color: #ffffff;
    font-size: 1.2rem;
}
.footer__txt{
    color: #ffffff;
    font-size: 1.2rem;
    text-align: center;
    padding-top: 20px;
}
.footer__email{
    text-align: center;
    font-size: 1.4rem;
    color: var(--primary--green);
    font-weight: 600;
    background-color: #ffffff;
    border-radius: 50px;
    padding: 8px 10px;
    margin: 10px auto;
    width: 215px;

}
.insta__copy{
    display: flex;
    justify-content: space-between;
    margin: 10px var(--primary-margin25pxsp);
    align-items: flex-end;
}
.insta__copy div{
    width: 20px !important;
    height: 20px !important;
}
.insta__copy p{
    font-size: 1rem;
}
/* pc */
@media screen and (min-width:769px){
    .footer{
    }
    .footer::before{
        width: 750px;
        height: 50px;
        top: -50px;
        right: 0px;
    }
    .footer__title{
        padding-top: 40px;
    }
    .footer__titleen{
        font-size: 4rem;
    }
    .footer__titleja{
        font-size: 2.4rem;
    }
    .footer__txt{
        font-size: 1.6rem;
        padding-top: 40px;
    }
    .footer__email{
        font-size: 1.6rem;
        border-radius: 50px;
        padding: 10px 15px;
        width: 250px;
        margin-top: 20px;
    }
    .insta__copy{
        margin: 20px var(--primary-margin120pxpc) 10px;
    }
    .insta__copy div{
        width: 40px !important;
        height: 40px !important;
    }
    .insta__copy p{
        font-size: 1.2rem;
    }
}