@charset "UTF-8";

/* 追従ボタンのCSS */
/* position: fixed;
top: 28.5rem;
left: var(--contentPadding); */


/* =====================
Common
===================== */
:root{
    --primary-white:#FFFF;
    --primary-whiteLow:#F5F5F5;
    --primary-darkBlue:#214259;
    --primary-yellow:#FADC5A;
    --primary-gray:#E3E6E6;
    --primary-darkGray:#D5DADA;
    --primary-darkBrown:#5F6A6A;
    --contentPadding: 4.2%;
}

body{
    font-family: "Josefin Sans",
        "Zen Kaku Gothic Antique",
        "Jost","Noto Sans JP","Noto Sans Japanese", "ヒラギノ角ゴシック", "メイリオ","MS PGothic", sans-serif;
    font-size: 1.3rem;
    font-weight: 500 ;
    color: var(--primary-darkBlue);
    background-color: var(--primary-gray);
    line-height: 1.7;
}

h2{
    font-weight: 400;
    font-size: 5rem;
}

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

@media screen and (max-width:768px) {
    html{
        font-size: calc(2.66666666667vw);
        scroll-behavior: smooth;
    }
    :root{
        --relative-base-px: calc(var(--saved-visible-width-px) / 375);
    }
}

/* common pc */
@media screen and (min-width:769px) {
    html{
        font-size: calc(0.69444444444vw);
        scroll-behavior: smooth;
    }

    body{
        font-size: 1.6rem;
    }
    
    h2{
        font-size: 9rem;
        line-height: 1;
        letter-spacing: 0.68rem;
    }

    .brSp{
        display: none;
    }
}

/* viemore btn */
.btn{
    display: flex;
    justify-content: flex-end;
    margin: 6rem 1.6rem 0 0;
}

.btn a{
    justify-content: center;
    align-items: center;
    display: inline-flex;
    padding: 1.3rem 5.5rem 1.3rem 3.5rem;
    font-size: 2rem;
    font-weight: 400;
    background-color: var(--primary-whiteLow);
    border-radius: 10rem;
    position: relative;
}


.btn a::after{
    background-image: url(../img/linkBtn__arrow_blue.svg);
    content: '';
    display: inline-block;
    width: 0.7rem;
    height: 1.2rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    right: 2.8rem;
    transform: translateY(-50%);
}

@media screen and (min-width:769px) {
    .btn{
        margin-right: 17rem;
    }

    .btn a{
        font-size: 2.4rem;
        padding: 1.3rem 7.5rem 1.3rem 5.5rem;
    }
}

/* insta & line linkbtn */
.linkBtn{
    background-color: var(--primary-darkBlue);
    border-radius: 10rem;
    color: var(--primary-white);
    font-size: 1.8rem;
    letter-spacing: 0.08rem;
    display: inline-block;
    width: 19rem;
    height: 6rem;
    margin-top: 2.5rem;
}

.linkBtn--instagram{
    padding: 1.3rem 2.4rem 1.4rem 6rem;
    position: relative;
}

.linkBtn--line{
    padding: 1.58rem 2.4rem 1.4rem 6.8rem;
    position: relative;
}

.linkBtn--instagram::before{
    background-image: url(../img/instagram_icon.svg);
    content: '';
    display: inline-block;
    width: 3.2rem;
    height: 3.2rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 2.4rem;
    transform: translateY(-50%);
}

.linkBtn--line::before{
    background-image: url(../img/Line__icon.svg);
    content: '';
    display: inline-block;
    width: 2.7rem;
    height: 2.7rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 2.7rem;
    transform: translateY(-50%);
}

@media screen and (min-width:769px) {
    .linkBtn {
        width: 26.6rem;
        height: 6.7rem;
        font-size: 2.4rem;
        margin-top: 0;
    }

    .linkBtn--instagram{
        margin-right: 1.5rem;
    }

    .linkBtn--line{
        margin-left: 1.5rem;
    }

    .linkBtn--instagram::before {
        top: 48%;
        left: 4.4rem;
        width: 3.7rem;
        height: 3.7rem;
    }

    .linkBtn--line::before {
        width: 3rem;
        height: 3rem;
        left: 4.7rem;
    }
}

/* =====================
top rtn btn
===================== */

#pagetop {
    position: fixed;
    right: 5rem;
    bottom: 4rem;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #214259;
    font-weight: 400;
    font-size: 1.2rem;
    transition: .4s;
    writing-mode: vertical-lr;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#pagetop.visible {
    opacity: 1;
}

.pagetop__arrow{
    position: fixed;
    right: 4rem;
    bottom: 4rem;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #214259;
    font-weight: 400;
    font-size: 1.2rem;
    transition: .4s;
    writing-mode: vertical-lr; 
}

.pagetop__arrow img{
    width: 1rem;
    height: 6rem;
}


@media screen and (min-width:769px) {
    #pagetop{
        font-size: 1.6rem;
        right: 14rem;
        bottom: 6rem;
    }

    .pagetop__arrow{
        right: 13rem;
        bottom: 6rem;
    }

    .pagetop__arrow img{
        height: 8rem;
    }
}

/* =====================
header
===================== */
#header{
    height: 10rem;
    width: 100%;
    /* background-color: rgba(227, 230, 230, 0.45); */
    padding: 2.4rem var(--contentPadding) 0.5rem;
    position: relative;
    position: fixed;
    z-index: 100;
}

.header__topic{
    display: none;
}

.header__btn{
    position: absolute;
    display: block;
    cursor: pointer;
    top: 2.5rem;
    right: 2.1rem;
    width: 4.8rem;
    height: 4rem;
}

/* .Global nav */
.navList{
    text-align: left;
    margin: 84px 0 0 70px;
}

.nav{
    background: rgb(227, 230, 230);
    border-radius: 0 0 0 120px;
    width: 100%;
    height: 100vh;
    position:fixed;
    top:0;
    left:0;
    z-index: 100;
    transform: translateX(100%);
    transition: 0.4s;
}

.nav__btn{
    display: block;
    width: 27px;
    height: 27px;
}

.nav__btn{
    pointer-events: auto;
    cursor: pointer;
    display: block;
    width: 27px;
    height: 27px;
    position: fixed;
    top: 42px;
    right: 50px;
    z-index: 101;
    transition: opacity 0.25s ease;
}

.nav__list{
    padding: 38px 1.89% 0 1.6%;
}

.nav__item{
    font-size: 18px;
    font-weight: 400;
    margin-top: 7px;
}

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

.shopInformation{
    display: inline-flex;
    padding: 1px 5px 0 0;
    flex-direction: column;
    align-items: flex-end;
}

.dropdown__list{
    text-align: right;
}

.dropdown__list{
    font-size: 14px;
    margin-top: 4px;
}

.shopInfo:first-of-type{
    font-size: 18px;
    margin-top: 10px;
}

.nav.active{
    transform: translate(0);
}

.nav__Sns{
    display: flex;
    align-items: flex-end;
    margin-left: 77px;
}

.navSns{
    display: flex;
    gap:19px;
    width: 194px;
   margin: 30px 0 0 15px;
    align-items: flex-end;
}

.navSns__item{
    width: 30px;
    height: 30px;
}

.instagram, .line{
    fill: var(--primary-darkBlue);
}

.nav__wire{
    margin: 21px 0 0 50px;
}

.nav__logo{
    width: 120px;
    margin: 60px 0 0 0;
}

body.menuOpen{
    overflow: hidden;
}

@media screen and (min-width:769px) {
    #header{
        display: flex;
        align-items: flex-start;
        justify-content: space-evenly;
        height: 12rem;
    }

    .header__topic{
        display: block;
        width: 8rem;
        height: 8rem;
    }
    
    .header__btn{
        display: none;
    }

    .nav{
        background: transparent;
        width: auto;
        height: auto;
        position: static;
        transform: translateX(0);
        margin-top: 3rem;
    }
    
    .nav__list{
        padding: 0;
    }

    .nav__item{
        margin-top: 0;
        font-size: 2.4rem;
        margin-left: 6.6rem;
        position: relative;
    }

    .nav__item:hover {
        color: rgba(245, 245, 245, 0.69);
    }

    .nav__item::after{
        position: absolute;
        background-image: url(../img/footerNav.svg);
        content: '';
        display: inline-block;
        width: 1.2rem;
        height: 2.4rem;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        top: 0.8rem;
    }

    .shopInformation .nav__item::after{
        display: none;
    }

    .shopInfo:first-of-type {
        margin-top: 0;
        font-size: 2.4rem;
        margin-left: 6.6rem;
        transition: all .3s;
    }

    .navList{
        margin-top: 0;
    }

    .nav__btn{
        display: none;
    }

    .shopInfo__item{
        display: none;
    }

    .nav__list{
        display: flex;
    }

    .nav__Sns{
        display: none;
    }
    
    .nav__wire{
        display: none;
    }
    
    .nav__logo{
        display: none;
    }

    .nav__list .navTop::after {
        margin-left: 2.3rem;
    }

    .nav__list .navAbout::after, .nav__list .navMenu::after, .nav__list .navGoods::after{
        margin-left: 2.4rem;
    }

    .nav__list .navNail::after {
        margin-left: 2.3rem;
    }

    .dropdown__lists {
        display: none;
        width: 100%;
        position: absolute;
        left: 0;
    }

    .nav__item:hover .dropdown__lists {
        display: block;
    }

    .dropdown__list {
        height: 3.6rem;
        transition: all .3s;
        position: relative;
        color: var(--primary-whiteLow);
    }

    .dropdown__list:hover {
        color: var(--primary-darkBlue);
    }

    .dropdown__list a {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        text-decoration: none;
        position: relative;
    }
}


/* =====================
link banner
===================== */
.linkBanner__wrap{
    display: none;
}

@media screen and (min-width:769px) {
    .linkBanner__wrap{
        display: block;
        position: fixed;
        right: -2rem;
        top: 22%;
        z-index: 10;
        width: 10rem;
        height: 15.3rem;
        margin-top: -95px;
        background-color: var(--primary-darkBlue);
        transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
        border-radius: 4.5rem 0 0 4rem;
        padding: 3.6rem 0.2rem 3.6rem 2.7rem;
    }

    .banner__insta{
        width: 3rem;
        height: 3rem;
    }

    .banner__line{
        width: 3rem;
        height: 3rem;
        margin-top: 2.5rem;
    }
}

/* =====================
footer
===================== */
.footer{
    background: var(--primary-yellow) url(../img/footer_bg_sp.png) no-repeat bottom;
    background-size: 100% 78rem;
    padding: 19.3rem 3.3rem 7.7rem 7.8rem;
}

.footerLogo{
    width: 17.9rem;
    height: 5.5rem;
}

.footerNav__list{
    margin-top: 7.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.footerNav__item{
    margin-right: 3rem;
    position: relative;
    font-size: 1.8rem;
}

.footerNav__item::after{
    position: absolute;
    background-image: url(../img/footerNav.svg);
    content: '';
    display: inline-block;
    width: 0.8rem;
    height: 2.4rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    top: 0.4rem;
}

.navTop::after{
    margin-left: 1.3rem;
}

.navAbout::after{
    margin-left: 1.4rem;
}

.navNail::after{
    margin-left: 1.3rem;
}

.navMenu::after{
    margin-left: 1.4rem;
}

.navGoods::after{
    margin-left: 1.4rem;
}

.navShop::after{
    display: none;
}

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

.link__btn--footer{
    margin-top: 4rem;
}

.copy{
    margin-top: 6.1rem;
}

@media screen and (min-width:769px) {
    .footer{
        background: var(--primary-yellow) url(../img/footer_bg_pc.png) no-repeat bottom;
        background-size: 100% 48rem;
        padding: 12.5rem 21% 4.5rem;
        text-align: center;
    }

    .footerLogo {
        width: 21.9rem;
        margin: 0 auto;
    }

    .footerNav__wrap{
        display: inline-block;
        margin-top: 1rem;
    }

    .footerNav__item{
        font-size: 2.4rem;
    }

    .link__btn--footer {
        margin-top: 1.5rem;
    }

    .copy {
        margin-top: 3.1rem;
    }

    .footerNav__item::after {
        width: 1.2rem;
        top: 0.8rem;
    }
}

/* =====================
Fade in
===================== */

.fadeIn{
    transform: translate(0, 50px);
    opacity: 0;
    transition: 0.5s;
}

.fadeIn.animated{
    transform: translate(0, 0);
    opacity: 1;
}
/* =====================
Fade left
===================== */

.fadeLeft{
    transform: translateX(-50px);
    opacity: 0;
    transition: 1.5s;
}

.fadeLeft.animated{
    transform: translateX(0);
    opacity: 1;
}

/* =====================
Fade right
===================== */

.fadeRight{
    transform: translateX(50px);
    opacity: 0;
    transition: 1.5s;
}

.fadeRight.animated{
    transform: translateX(0);
    opacity: 1;
}

/* =====================
unyo
===================== */
/* unyo-right */
@keyframes unyo-right{
    0% {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    
    100% {
        -webkit-mask-position: 18.6666666667vw 0;
        mask-position: 18.6666666667vw 0;
    }
}

.section--nail::before, .section--ownerMessage::before, .section--order::before{
    -webkit-animation: unyo-left 1.5s linear 0s infinite;
    animation: unyo-left 1.5s linear 0s infinite;
    background-color: var(--primary-yellow);
    content: url(../img/uneune3.png);
    display: block;
    left: 0;
    -webkit-mask-image: url(../img/uneune3.png);
    mask-image: url(../img/uneune3.png);
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    padding-top: 3.4666666667%;
    position: absolute;
    width: 100%;
    height: 1.3rem;
    bottom: 100%;
}


/* unyo-left */
@keyframes unyo-left {
    0% {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    
    100% {
        -webkit-mask-position: -18.6666666667vw 0;
        mask-position: -18.6666666667vw 0;
    }
}

/* =====================
Loading
===================== */
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background:var(--primary-gray);
    text-align:center;
    color:#fff;
}
    
#splash_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#splash_logo img {
    width:12rem;
}

@media screen and (min-width:769px) {
    #splash_logo img {
        width:23rem;
    }
}
    
.fadeDown{
    animation-name: fadeDownAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}
    
@keyframes fadeDownAnime{
  from {
    opacity: 0;
    transform: translateY(0);
    }
    
    to {
    opacity: 1;
    transform: translateY(-20px);
    }
}

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

#header.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 1;
	transform: translateY(0);
  }
  to {
    opacity: 0;
	transform: translateY(-100px);
  }
}

#header.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-100px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}