@charset "UTF-8";

/* =====================
top common
===================== */
h3{
    font-size: 1.6rem;
    font-weight: 700;
}

/* topcommon pc */
@media screen and (min-width:769px) {
    h3{
        font-size: 2rem;
        font-weight: 500;
    }
}

/* =====================
main visual
===================== */
.article__header{
    padding: 21.5rem 0 16.5rem;
    background-color: var(--primary-yellow);
    position: relative;
}

.article__header::after{
    -webkit-animation: unyo-right 1.5s linear 0s infinite;
    animation: unyo-right 1.5s linear 0s infinite;
    background-color: var(--primary-yellow);
    content: url(../img/uneune2.png);
    display: block;
    left: 0;
    -webkit-mask-image: url(../img/uneune2.png);
    mask-image: url(../img/uneune2.png);
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    padding-top: 3.4666666667%;
    position: absolute;
    top: 100%;
    width: 100%;
    height: 1.3rem;
}

.mv__logo {
    position: absolute;
    width: 14.3rem;
    top: 17.3rem;
    left: 2.1rem;
    z-index: 5;
}

.mvSp{
    position: relative;
}

.mv__copy{
    position: absolute;
    top: 18rem;
    right: 0.9rem;
    width: 2rem;
    z-index: 3;
}

.mv__sp{
    width: 93.3%;
    margin: 0 2.4% 0 var(--contentPadding);
}

/* mvdecolation */
.deco__top1 img{
    position: absolute;
    top: 9rem;
    left: 2rem;
    width: 6rem;
    -webkit-animation: deco_top1 13s infinite steps(8, jump-none);
    animation: deco_top1 13s infinite steps(8, jump-none);
}

@keyframes deco_top1{
    0% {
        transform: rotate(0);
    }

    25%{
        transform: rotate(87deg);
    }

    50%{
        transform: rotate(164deg);
    }

    75%{
        transform: rotate(215deg);
    }
    
    100% {
        transform: rotate(315deg);
    }
}

.deco__top2 img{
    position: absolute;
    top: 14rem;
    right: 4rem;
    -webkit-animation: deco__top2 2.2s infinite;
    animation: deco__top2 2.2s infinite;
    width: 6rem;
}

@keyframes deco__top2{
    0% {
        transform: translateY(0);
    }
    24.9999% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-20%);
    }
    49.9999% {
        transform: translateY(-20%);
    }
    50% {
        transform: translateY(-40%);
    }
    74.9999% {
        transform: translateY(-40%);
    }
    75% {
        transform: translateY(-20%);
    }
    99.9999% {
        transform: translateY(-20%);
    }
    100% {
        transform: translateY(0);
    }
}

.deco__top3 img{
    position: absolute;
    bottom: 6rem;
    left: 1rem;
    -webkit-animation: deco_top3 3s infinite steps(4, jump-none);
    animation: deco_top3 3s infinite steps(4, jump-none);
    z-index: 2;
    width: 7rem;
}

@keyframes deco_top3 {
    0% {
        transform: translate(50%);
    }
    
    100% {
        transform: translate(0%);
    }
}

.deco__top4 img{
    position: absolute;
    bottom: 11rem;
    right: 1rem;
    -webkit-animation: deco__top4 2s ease-out infinite;
    animation: deco__top4 2s ease-out infinite;
    z-index: 1;
    width: 8.5rem;
}

@keyframes deco__top4 {
    0%, 40%, 60%, 80% {
      transform: scale(1.0);
    }
    50%, 70% {
      transform: scale(0.85);
    }
}

.mv__pc{
    display: none;
}

.top__arrow{
    position: absolute;
    bottom: 12rem;
    right: 5.2rem;
}

.arrow {
    position: relative;
    height: 3rem;
    display: inline-block;
    background-color: #214259;
    z-index: 6;
}

.arrow::before {     
    content: "";
    position: absolute;
    top: 98%;
    left: 1px;
    aspect-ratio: 1 / 1;
    height: 14%;
    transform-origin: bottom left;
    transform: translateX(-13%) translateY(-100%) rotate(-44deg);
    border-bottom: solid 1px var(--primary-darkBlue);
    border-left: solid 1px var(--primary-darkBlue);
    opacity: 0;
    --webkit-animation: arrow12 3.5s linear infinite;
    animation: arrow12 3.5s linear infinite;
}

.arrow span {        
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1px;               
    height: calc(100% - 2px); 
    overflow: hidden;
}

.arrow span::before {     
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    transform: translateY(-100%);
    background-color: var(--primary-darkBlue);
    -webkit-animation: arrow11 3.5s linear infinite;
    animation: arrow11 3.5s linear infinite;
}
@keyframes arrow11 {
    0%   { opacity: 0; transform: translateY(-100%); }
    20%  { opacity: 1; transform: translateY(0); }
    45%  { opacity: 1; transform: translateY(0); }
    70%  { opacity: 1; transform: translateY(100%); }
    80%  { opacity: 0; transform: translateY(100%); }
    100% { opacity: 0; transform: translateY(100%); }
}

@keyframes arrow12 {
    0%   {opacity: 0; }
    15%  {opacity: 0; }
    40%  {opacity: 1; }
    65%  {opacity: 1; }
    75%  {opacity: 0; }
    100% {opacity: 0; }
}
  
.circle{
    cursor: pointer;
    position: absolute;
    width: 8.6rem;
    height: 8.6rem;
    bottom: 9.5rem;
    right: -0.2rem;
    z-index: 3;
}

/* main visual pc */
@media screen and (min-width:769px) {
    .mv__pc{
        display: block;
        margin: 0 auto;
        width: 65.3%;
    }

    .mv__copy{
        top: 24%;
        right: 18.7%;
        width: 2.8%;
    }

    .mv__sp{
        display: none;
    }

    .article__header{
        padding: 18rem 3rem 16rem 0rem;
    }

    .article__header::after{
        -webkit-animation: unyo-right 3.2s linear 0s infinite;
        animation: unyo-right 3.2s linear 0s infinite;
    }

    .mv__logo{
        width: 30rem;
        top: 19.5rem;
        left: 10%;
    }

    .top__arrow{
        bottom: 10rem;
        right: 23rem;
    }

    .arrow {
        height: 5rem;
        top: 0rem;
        right: 0.3rem;
    }
    
    .arrow::before {     
        border-bottom: solid 2px var(--primary-darkBlue); 
        border-left: solid 2px var(--primary-darkBlue); 
        transform: translateY(-100%) rotate(-45deg);  
    }
    
    .arrow span {        
        width: 2px;               
    }
    
    .arrow span::before {     
        -webkit-animation: arrow11 3.5s linear infinite;
        animation: arrow11 3.5s linear infinite;
      }

    .circle{
        width: 14.6rem;
        height: 14.6rem;
        bottom: 6rem;
        right: 14.7rem;
    }

/* mvdecolation pc */
    .deco__top1 img{
        top: 13rem;
        left: 0rem;
        width: 13rem;
    }
    
    .deco__top2 img{
        top: 15rem;
        right: 4rem;
        width: 15rem;
        height: 13rem;
    }

    .deco__top3 img{
        bottom: 18rem;
        left: 11rem;
        width: 14.6rem;
    }

    .deco__top4 img{
        bottom: 7rem;
        right: 15rem;
        width: 16.5rem;
    }
}

/* =====================
about
===================== */
.section--about{
    padding: 5.8rem 0 8rem;
    overflow: hidden;
    position: relative;
}

.aboutCaption{
    padding: 0 12.2% 0 17.8%;
}

.aboutCaption__topic{
    font-size: 1.6rem;
    font-weight: 700;
}

.aboutCaption__topic span{
    display: inline-block;
    background: linear-gradient(transparent 0%, var(--primary-whiteLow) 0%);
    margin-top: 0.5rem;
    padding: 0.5rem 0.5rem 0 0.5rem;
}

.aboutCaption__topic span:last-child{
    padding: 0.5rem 0 0 0.2rem;
}

.aboutCaption__txt{
    margin-top: 2.8rem;
    line-height: 2;
}

.aboutCaption__copy{
    margin-top: 1.6rem;
    font-size: 1.4rem;
}

.aboutCaption__copy:last-of-type{
    margin-top: 0.6rem;
}

.deco__aboutImg{
    position: relative;
}

.aboutImg img{
    margin-top: 3.7rem;
    padding: 0 12.2% 0 17.8%;
    position: static;
    z-index: 5;
}

/* about decolation */
.deco__about1 {
    width: 6rem;
    position: absolute;
    top: 48rem;
    left: -1rem;
    -webkit-animation: deco__top2 2.2s infinite;
    animation: deco__top2 2.2s infinite;
}

.deco__about2 {
    width: 5rem;
    position: absolute;
    top: 21rem;
    right: 3rem;
    -webkit-animation: deco_about2 3s infinite steps(4, jump-none);
    animation: deco_about2 3s infinite steps(4, jump-none);
}

@keyframes deco_about2 {
    0% {
        transform: translate(40%);
    }
    
    100% {
        transform: translate(0%);
    }
}
  
.deco__about3 {
    position: absolute;
    z-index: -3;
    top: 33rem;
    left: 1rem;
    width: 100%;
    height: 100%;
}
  
.decoAbout3 {
    width: 13rem;
    height: 11rem;
    border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;
    -webkit-animation: round_anime 2s linear infinite;
    animation: round_anime 2s linear infinite;
    background-color: var(--primary-whiteLow);
}
@keyframes round_anime {
      0% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
     25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
     50% { border-radius: 70% 30% 30% 70% / 50% 70% 30% 50%;}
     75% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
    100% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
}

/* about pc */
@media screen and (min-width:769px) {
    .section--about{
        padding: 17.8rem 0 18.1rem;
    }

    .about__wrap{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9rem;
    }

    .aboutCaption{
        padding: 0;
    }

    .aboutCaption__topic{
        font-size: 2rem;
        margin-top: 2.4rem;
    }
    
    .aboutCaption__topic span{
        padding: 0.7rem 0.8rem 0 1rem;
        margin-top: 0.8rem;
    }
    
    .aboutCaption__topic span:last-child{
        padding: 0.7rem 0 0 1.2rem;
    }
    
    .aboutCaption__txt{
        margin-top: 2.4rem;
    }
    
    .aboutCaption__copy{
        margin-top: 2.4rem;
        font-size: 1.6rem;
    }
    
    .aboutCaption__copy:last-of-type{
        margin-top: 2.2rem;
    }
    
    .aboutImg img{
        width: 50rem;
        padding: 0;
        margin-top: 0;
    }

    /* about decolation */
    
    .deco__about1{
        top: 31rem;
        left: 8rem;
        width: 10.8rem;
    }

    .deco__about2{
        top: 32rem;
        right: -6rem;
        width: 8rem;
    }

    .deco__about3{
        top: 54rem;
        left: -10rem;
    }

    .decoAbout3{
        width: 22rem;
        height: 20rem;
    }

    .btn--about{
        display: block;
        margin: -2rem 0 0 24rem;
    }

}

/* =====================
nail & goods
===================== */
.section--nail{
    padding: 8rem 0 6.2rem;
    background-color: var(--primary-yellow);
    position: relative;
}


.nailCaption{
    margin-right: 0.7rem;
    position: relative;
    background-color: var(--primary-whiteLow);
    padding: 3.5rem 0 4.8rem 4.3rem;
    border-radius: 0 500px 500px 0;
    z-index: 4;
    transform: translateX(0%, -5.6679%) translate3d(0px, 0px, 0px);
}

.nailCaption__txt{
    margin-top: 1.5rem;
}

/* nail photo */
.nailPhoto__item1{
    width: 27%;
    position: absolute;
    top: 51rem;
    right: 4.6rem;
    z-index: 2;
    transform: translate(0%, -5.6679%) translate3d(0px, 0px, 0px);
}

.nailPhoto__item2{
    width: 59.7%;
    position: absolute;
    top: 73rem;
    left: 5.6rem;
    z-index: 2;
    transform: translate(0%, -5.6679%) translate3d(0px, 0px, 0px);
}

.nailPhoto__item3{
    width: 21.8%;
    position: absolute;
    top: 85rem;
    right: 3rem;
    z-index: 3;
    transform: translate(0%, -5.6679%) translate3d(0px, 0px, 0px);
}

.nailPhoto__item4{
    width: 47.2%;
    position: absolute;
    top: 101rem;
    left: 8rem;
    z-index: 2;
    transform: translate(0%, -5.6679%) translate3d(0px, 0px, 0px);
}

.nailPhoto__item5{
    width: 45.3%;
    position: absolute;
    top: 120rem;
    right: 3rem;
    z-index: 4;
    transform: translate(0%, -5.6679%) translate3d(0px, 0px, 0px);
}

.nailScroll{
    overflow: hidden;
}

.nailScroll__item--sp{
    display: flex;
    width: 90rem;
    height: 10.8rem;
    margin-top: 105rem;
}

.nailScroll__item{
    width: auto;
    height: 100%;
    position: relative;
    z-index: 1;
}

@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}

.nailScroll__item:first-child{
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
}

.nailScroll__item:last-child {
    -webkit-animation: loop2 50s linear infinite;
    animation: loop2 50s linear infinite;
}

.nailScroll__item--pc{
    display: none;
}

.nailScroll__box{
    margin: -15rem 0 0 var(--contentPadding);
    -webkit-animation: nail__box 2s ease-out infinite;
    animation: nail__box 2s ease-out infinite;
    position: relative;
    z-index: 0;
}

@keyframes nail__box {
    0%, 40%, 60%, 80% {
      transform: scale(1.0);
    }
    50%, 70% {
      transform: scale(0.98);
    }
}

/* nail decolation */
.deco__nail1 img{
    position: absolute;
    top: 48rem;
    right: 1.6rem;
    z-index: 1;
    -webkit-animation: deco__top2 2.2s infinite;
    animation: deco__nail1 2.2s infinite;
    width: 10rem;
}

@keyframes deco__nail1{
    0% {
        transform: translateY(0);
    }
    24.9999% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-5%);
    }
    49.9999% {
        transform: translateY(-5%);
    }
    50% {
        transform: translateY(-10%);
    }
    74.9999% {
        transform: translateY(-10%);
    }
    75% {
        transform: translateY(-5%);
    }
    99.9999% {
        transform: translateY(-5%);
    }
    100% {
        transform: translateY(0);
    }
}

.deco__nail2 img{
    position: absolute;
    top: 69rem;
    left: 1.6rem;
    z-index: 1;
    -webkit-animation: deco__nail2 2s ease-in-out forwards infinite;
    animation: deco__nail2 2s ease-in-out forwards infinite;
    width: 18rem;
}

 
@keyframes deco__nail2 {
    0%  {
      transform: scale(1.0, 1.0) translate(0, 0);
    }
    15% {
      transform: scale(0.98, 0.9) translate(0, 5px);
    }
    30% {
      transform: scale(1.02, 1.0) translate(0, 8px);
    }
    50% {transform: scale(0.98, 1.05) translate(0, -8px);
    }
    70% {
      transform: scale(1.0, 0.9) translate(0, 5px);
    }
    100% {
      transform: scale(1.0, 1.0) translate(0, 0);
    }
    0%, 100% {
      opacity: 1;
    }
  }

.deco__nail3 img{
    position: absolute;
    top: 109rem;
    right: 8rem;
    z-index: 1;
    -webkit-animation: deco_nail3 3s infinite steps(4, jump-none);
    animation: deco_nail3 3s infinite steps(4, jump-none);
    width: 7.2rem;
}

@keyframes deco_nail3 {
    0% {
        transform: translate(0%);
    }
    
    100% {
        transform: translate(7%);
    }
}

/* nail pc */
@media screen and (min-width:769px) {
    .section--nail{
        padding: 10rem 0 9.2rem;
    }

    .nailCaption{
        margin-right: 46.8%;
        padding: 4.5rem 0 5rem 12.5%;
    }

    .nailCaption__topic{
        margin-top: 1.6rem;
        line-height: 1.5;
    }

    .nailCaption__txt{
        margin-top: 1.6rem;
        line-height: 1.5;
    }

    .svgAnimation {
        top: -27.6rem;
        width: 42.8rem;
        left: 48%;
    }

    .btn--nail{
        margin: 5rem 17rem 0 0;
    }

    /* nail photo */
    .nailPhoto__item1{
        width: 22rem;
        top: 55rem;
        right: 21%;
    }
    
    .nailPhoto__item2{
        width: 48rem;
        top: 80rem;
        left: 17.3%;
    }
    
    .nailPhoto__item3{
        width: 15.7rem;
        top: 105rem;
        right: 40.9%;
    }
    
    .nailPhoto__item4{
        width: 32.2rem;
        top: 138rem;
        left: 29.1%;
    }
    
    .nailPhoto__item5{
        width: 27.7rem;
        top: 152rem;
        right: 18.7%;
    }

    /* deco nail */
    .deco__nail1 img{
        top: 48rem;
        right: 22rem;
        width: 19.2rem;
    }
    
    .deco__nail2 img{
        top: 71rem;
        left: 14rem;
        width: 38.5rem;
    }
    
    .deco__nail3 img{
        top: 150rem;
        left: 28rem;
        width: 17.7rem;
    }

    .nailScroll__box{
        margin: -27rem 0 0 17rem;
    }

    .nailScroll__box img{
        width: 30.4rem;
    }

    .nailScroll__item--pc{
        display: flex;
        width: 100%;
        height: 22.9rem;
        margin-top: 140rem;
        overflow: hidden;
    }
    
    .nailScroll__item{
        width: auto;
        height: 100%;
    }
    
    @keyframes loop {
        0% {
            transform: translateX(100%);
        }
        to {
            transform: translateX(-100%);
        }
    }
    
    @keyframes loop2 {
        0% {
            transform: translateX(0);
        }
        to {
            transform: translateX(-200%);
        }
    }
    
    .nailScroll__item:first-child{
        -webkit-animation: loop 50s -25s linear infinite;
        animation: loop 50s -25s linear infinite;
    }
    
    .nailScroll__item:last-child {
        -webkit-animation: loop2 50s linear infinite;
        animation: loop2 50s linear infinite;
    }
    
    .nailScroll__item--sp{
        display: none;
    }
}


/* =====================
menu
===================== */
.section--menu{
    text-align: center;
    padding: 5.1rem var(--contentPadding) 10rem;
    background-image: url(../img/menu__bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.topic--hand{
    position: relative;
}

/* メニュー下のバー */
.topic--hand::after{
    position: absolute;
    background-color: var(--primary-darkBlue);
    content: '';
    display: inline-block;
    width: 0.2rem;
    height: 8.8rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 100;
    bottom: -17.59vw;
    left: 50%;
}

.menu__wrapper{
    background-color: var(--primary-whiteLow);
    border-radius: 50rem 50rem 0 0;
    padding: 12.8rem 2.4rem 5.4rem 2.8rem;
}

.menu{
    max-width: 700px;
    margin: 0 auto;
}

.handFoot__title{
    font-size: 2.8rem;
    margin: 0 auto 0 5.8rem;
    font-weight: 600;
    text-align: left;
    width: fit-content;
}

.menu__notes{
    font-size: 1.2rem;
    font-weight: 400;
    display: block;
    margin: -1.5rem 0 0 0.2rem;
}

.menu dl {
    display: table;
    width: 100%;
    position: relative;
    font-family: 'jost';
}

.onecolor{
    margin-top: 2.8rem;
    font-weight: 400;
}

.onecolor__txt{
    display: block;
    font-size: 1.2rem;
    text-align: left;
    margin-top: -1.3rem;
}

.menu dt{
    display: table-cell;
    padding:0.4rem;
    text-align: left;
    font-weight: 400;
}
.menu dd{
    text-align: right;
    display: table-cell;
    padding:0.4rem;
    font-weight: 400;
}

.menu__topic{
    font-size: 3.2rem;
    font-weight: 600;
}

.menu--off, .menu--repair{
    margin-top: 6.7rem;
}

.off__topic{
    font-size: 2.8rem;
    font-weight: 600;
    text-align: left;
}

.offOnly__txt{
    padding-right: 0;
}

.repair__topic{
    font-size: 2.8rem;
    font-weight: 600;
    font-family: "Josefin Sans"
}


/* menu decolation */
.deco__menu{
    position: relative;
}

.deco__menu1{
    top: -28rem;
    left: -4.3rem;
    position: absolute;
}

.deco__menu1 img{
    width: 4rem;
}

.deco__menu2{
    position: absolute;
    top: -20rem;
    right: -5.5rem;
}

.deco__menu2 img{
    width: 5.6rem;
}

.deco__menu3{
    display: none;
}

.deco__menu4{
    display: none;
}

.deco__menu5{
    display: none;
}

.deco__menu6{
    display: none;
}

/* menu pc */
@media screen and (min-width:769px) {
    .section--menu{
        padding: 17rem 23.6rem 20rem;
        background-image: url(../img/menu_bg_pc.jpg);
    }

    .menu__wrapper{
        padding: 18.8rem 20.1% 7.4rem;
        /* padding: 18.8rem 19.5rem 7.4rem; */
        margin-top: 4rem;
    }

    .menu h3, .repair__topic{
        font-size: 4rem;
    }

    dd, dl{
        font-size: 1.8rem;
        font-weight: 500;
        margin-top: 1.5rem;
    }

   .onecolor{
    margin-top: 5rem;
   }

    .onecolor__txt, .menu__notes{
        font-size: 1.5rem;
    }
    
    .topic--hand::after {
        height: 13.8rem;
        bottom: -9.59vw;
    }
    
    .handFoot__title{
        margin: 0 auto;
    }

    .deco__menu1{
        display: block;
        position: absolute;
        top: -35rem;
        left: -24.3rem;
        -webkit-animation: deco_top1 13s infinite steps(8, jump-none);
        animation: deco_top1 8s infinite steps(8, jump-none);
    }
    
    .deco__menu1 img{
        width: 11.3rem;
    }
    
    .deco__menu2{
        display: block;
        position: absolute;
        top: -31rem;
        right: -33.5rem;
        -webkit-animation: deco__top2 2.2s infinite;
        animation: deco__top2 2.2s infinite;
    }
    
    .deco__menu2 img{
        width: 11.7rem;
    }
    
    .deco__menu3{
        display: block;
        position: absolute;
        bottom: -49rem;
        left: -25rem;
        -webkit-animation: deco_nail3 3s infinite steps(4, jump-none);
        animation: deco_nail3 3s infinite steps(4, jump-none);
    }
    
    .deco__menu3 img{
        width: 8.9rem;
    }   
    
    .deco__menu4{
        display: block;
        position: absolute;
        bottom: -49rem;
        right: -25.2rem;
        -webkit-animation: deco_top1 8s infinite steps(8, jump-none);
        animation: deco_top1 8s infinite steps(8, jump-none);
    }
    
    .deco__menu4 img{
        width: 7.8rem;
    }
    
    .deco__menu5{
        display: block;
        position: absolute;
        top: 100rem;
        left: -35.6rem;
        -webkit-animation: deco__top2 2.2s infinite;
        animation: deco__top2 2.2s infinite;
    }
    
    .deco__menu5 img{
        width: 12.9rem;
    }
    
    .deco__menu6{
        display: block;
        position: absolute;
        top: 100rem;
        right: -26rem;
        -webkit-animation: deco_menu6 3s infinite steps(4, jump-none);
        animation: deco_menu6 3s infinite steps(4, jump-none);
    }
    
    @keyframes deco_menu6 {
        0% {
            transform: translate(20%);
        }
        
        100% {
            transform: translate(0%);
        }
    }
    
    .deco__menu6 img{
        width: 9.6rem;
    }
}

/* =====================
goods
===================== */
.section--goods{
    background-color: var(--primary-yellow);
    padding: 7.2rem 0 8rem;
    position: relative;
}

.section--goods::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%;
}

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

.goodsCaption__txt{
    margin-top: 1.5rem;
}

.goodsCaption{
    position: relative;
    background-color: var(--primary-whiteLow);
    padding:     0rem 0 2.8rem 10.3rem;
    border-radius: 500px 0 0 500px;
    z-index: 4;
}

.goods__wrap{
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
}

.goods__photo{
    position: absolute;
    width: 92%;
    top: 52rem;
    left: 1.5rem;
    opacity: 0;
	animation: image-switch-animation linear 15s infinite;
}

.goods__photo:nth-of-type(1) {
    animation-delay: 0s;
}

.goods__photo:nth-of-type(2) {
    animation-delay: 5s;
}

.goods__photo:nth-of-type(3) {
    animation-delay: 10s;
}


@keyframes image-switch-animation {
    0% { opacity: 0; }     
    5% { opacity: 1; }     
    33% { opacity: 1; }  
    38% { opacity: 0; }   
    100% { opacity: 0; }
}

.btn--goods{
    margin-top: 50rem;
}

/* goods decolation */
.deco__goods1 img{
    position: absolute;
    top: 43rem;
    left: 26rem;
    width: 7rem;
}

.deco__goods2 img{
    position: absolute;
    top: 38rem;
    left: 1rem;
    z-index: 2;
    width: 4.3rem;
}

@keyframes deco_goods2 {
    0% {
        transform: translate(0%);
    }
    
    100% {
        transform: translate(50%);
    }
}

.deco__goods3 img{
    position: absolute;
    top: 85rem;
    left: 9rem;
    z-index: 2;
}

/* svg animation */
.svgAnimation1 img{
    z-index: 3;
    display: inline-block;
    width: 41.4%;
    position: absolute;
    left: 53%;
    top: 72rem;
    -webkit-animation: 30s linear infinite rotation;
    animation: 30s linear infinite rotation
}

@keyframes rotation{
    0%{transform: rotate(0);}
    100%{transform: rotate(360deg);}
}

/* goods pc */
@media screen and (min-width:769px) {
    .section--goods{
        padding: 10.4rem 0 7.7rem;
        position: relative;
    }

    .goodsCaption{
        padding: 3.5rem 15.5% 3.5rem 15%;
    }

    .goodsCaption__topic{
        margin-top: 1.6rem;
    }

    .goodsCaption__txt{
        margin-top: 1.6rem;
    }

    .svgAnimation1 img{
        width: 27.4%;
        left: 53%;
        top: 60%;
    }

    .goods__photo{
        width: 55%;
        top: 42%;
        left: 10%;
    }

    .deco__goods1 img{
        top: 65%;
        left: 84%;
        width: 10%;
    }
    
    .deco__goods2 img{
        top: 35%;
        left: 11%;
        width: 8.3rem;
    }
    
    .deco__goods3 img{
        top: 86%;
        left: 16%;
        width: 7rem;
        z-index: 0;
    }
    
    .btn--goods{
        margin-top: 77rem;
    }
}

/* =====================
shop information
===================== */
.section--shopInformation{
    padding: 9rem var(--contentPadding) 10rem;
    overflow: hidden;
    position: relative;
}

.topic--shop{
    letter-spacing: 0;
    font-size: 6rem;
    line-height: 1;
    margin-left: 2rem;
}

.shopTopic{
    text-align: center;
    font-size: 4.8rem;
    font-weight: 500;
}

.reservation--contents{
    margin-top: 4.7rem;
    padding: 4.4rem 3.9rem 6rem 3.9rem;
    text-align: center;
    position: relative;
}

.rsvBg__sp img{
    position: absolute;
    top: 0rem;
    left: 0rem;
    z-index: -1;
    -webkit-animation: rsvBg 2s ease-in-out forwards infinite;
    animation: rsvBg 2s ease-in-out forwards infinite;
}

@keyframes rsvBg{
    0%{
        transform: scale(1.0, 1.0) translate(0, 0);
    }
    15% {
        transform: scale(0.98, 0.97) translate(0, 1px);
    }
    30% {
        transform: scale(1.0, 1.0) translate(0, 1px);
    }
    50% {
        transform: scale(1.0, 1.0) translate(0, -1px);
    }
    70% {
        transform: scale(1.0, 0.97) translate(0, 1px);
    }
    100% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }
    0%, 100% {
        opacity: 1;
    }
}


.rsvBg__pc img{
    display: none;
}

.reservation__txt, .access__txt, .address{
    margin-top: 1.5rem;
}

.reservation__bold{
    font-weight: 700;
}

.link__btn--shop{
    margin-top: 2.4rem;
}

.access--contents{
    margin-top: 4.7rem;
    text-align: center;
    width: 62rem;
    height: 62rem;
    border-radius: 50%;
    padding-top: 6rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.mapBox{
    width: 30.7rem;
    height: 22.9rem;
    margin-top: 2.5rem;
}

.address{
    margin-top: 3rem;
}

.deco__access {
    position: absolute;
    z-index: -3;
    top: 3rem;
    left: 1rem;
    width: 100%;
    height: 100%;
}
  
.decoAccess {
    width: 60rem;
    height: 61rem;
    border-radius: 61% 58% 51% 62% / 51% 57% 48% 64%;
    /* -webkit-animation: round_anime 7s linear infinite;
    animation: round_anime 7s linear infinite; */
    background-color: var(--primary-whiteLow);
}
@keyframes round_anime {
      0% { border-radius: 30% 55% 60% 40% / 30% 40% 60% 55%;}
     25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
     50% { border-radius: 55% 30% 30% 55% / 50% 55% 30% 50%;}
     75% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
    100% { border-radius: 30% 55% 60% 40% / 30% 40% 60% 55%;}
}

/* shopinformation pc */
@media screen and (min-width:769px) {
    .section--shopInformation {
        padding: 16rem var(--contentPadding) 8rem;
    }

    .topic--shop{
        font-size: 9rem;
        text-align: center;
    }
    
    .shopTopic{
        font-size: 5.2rem;
    }
    
    .reservation--contents{
        margin:  4rem auto 0;
    }

    .rsvBg__sp{
        display: none;
    }

    .rsvBg__pc img{
        position: absolute;
        display: block;
        width: 96.4rem;
        height: 41.8rem;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
        /* -webkit-animation: rsvBg2 2s ease-in-out forwards infinite;
        animation: rsvBg2 2s ease-in-out forwards infinite; */
    }


    @keyframes rsvBg2{
        0%{
            transform: scale(1.0, 1.0) translate(-50%, 0);
        }
        15% {
            transform: scale(0.98, 0.94) translate(-50%, 1px);
        }
        30% {
            transform: scale(1.0, 1.0) translate(-50%, 1px);
        }
        50% {
            transform: scale(1.0, 1.0) translate(-50%, -1px);
        }
        70% {
            transform: scale(1.0, 0.94) translate(-50%, 1px);
        }
        100% {
            transform: scale(1.0, 1.0) translate(-50%, 0);
        }
        0%, 100% {
            opacity: 1;
        }
    }
    
    .reservation__txt, .access__txt, .address{
        margin-top: 1.8rem;
    }
    
    .link__btn--shop{
        margin-top: 2.4rem;
    }
    
    .access--contents{
        margin-top: 6.7rem;
        width: 90rem;
        height: 90rem;
        padding-top: 7rem;
    }
    
    .mapBox{
        width: 57.2rem;
        height: 39.9rem;
        margin-top: 3.5rem;
    }
    
    .address{
        margin-top: 3rem;
    }

    .deco__access {
        position: absolute;
        z-index: -3;
        top: 3rem;
        left: 1rem;
    }
      
    .decoAccess {
        width: 86rem;
        height: 80rem;
    }
}

/* =====================
footer
===================== */
.footer{
    background-color: var(--primary-gray);
}