html{
    overflow: auto;
}

body {
    background: url(../img/background_wasi.png);
    background-repeat: repeat-y;
    background-size: 100%;
    font-family: 'Klee One', cursive,'serif';
    overflow-x: hidden;
}

/* アイコン---------------------------------------------------------- */


.wrap{
    overflow: hidden;
}

li {
    list-style: none;
}

.top_logo{
    width: 50%;
    margin: 0 auto;
    margin-top: 20%;
    margin-bottom: 0;
}


#trigger_block{
    margin-bottom: 30rem;
}

.trigger_head{
    font-size: 350%;
    margin-left: 57%;
    margin-top: 20%;
    margin-bottom: 20%;
    color:#9F8383;
    line-height: 150%;
}

.marche img{
    width: 47%;
    margin-bottom: 20%;
    margin-left: 6%;
    margin-top: -38%;
}

.trigger{
    color:#9F8383;
    margin-left: 5%;
    font-size: 230%;
    line-height: 170%;
    margin-top: -13%;
    text-align: center;
    line-height: 4.5rem;
}

#message_bloak{
    margin-bottom: 30rem;
}

.message_head{
    float: left;
    font-size: 350%;
    margin-left: 10%;
    line-height: 150%;
    margin-top: 30%;
    margin-bottom: 20%;
    color:#9F8383;
}

.sea img{
    width: 47%;
    margin-bottom: 20%;
    margin-left: 45%;
    margin-top: -45%;
}

.message{
    color:#9F8383;
    margin-left: 5%;
    font-size: 230%;
    line-height: 4.5rem;
    text-align: center;
}

#store_bloak{
    margin-bottom: 30rem;
}

.store_head{
    font-size: 350%;
    margin-left: 57%;
    margin-top: 20%;
    margin-bottom: 20%;
    color:#9F8383;

    line-height: 150%;
}

.mango img{
    width: 27%;
    margin-bottom: 20%;
    margin-left: 25%;
    margin-top: -80%;
    line-height: 150%;
}

.umibudou img{
    width:  22%;
    margin-bottom: 20%;
    margin-left: 6%;
    margin-top: -80%;
}

.store{
    color:#9F8383;
    margin-left: 5%;
    font-size: 230%;
    line-height: 4.5rem;
    margin-top: -13%;
    text-align: center;
}


#company_bloak{
    margin-bottom: 30rem;
}

.company_section{
    margin-top: 30rem;
    overflow-x: hidden;
}

.big_logo{
    position: relative;
    left: 5%;
    margin: 0;
}
 
.company_info{
    font-size: 240%;
    color: #9F8383;
    margin-bottom: 30%;
    text-align: center;
    line-height: 200%;
    display: flex;
    justify-content: center;
    position: relative;
    top: -19em;
    left: 10em;
}

.link_after{
    border: 0.08rem solid #9F8383;
    position: relative;
    top: -2rem;
    left: 31.5rem;
    border-radius: 1px;
    width: 5rem;
}

.link{
    margin-left: 10%;
    margin-top: -10%;
    font-size: 250%;
    color: #9F8383;
}

.link_block a img{
    margin-left: 38%;
    margin-top: -30%;
}

.link_block{
    margin-left: 5%;
    margin-bottom: 20%;
}

.SNS{
    margin-top: 15%;
}

.FB_icon a img{
    width: 6rem;
    height: 6rem;
    margin-top: auto;
    margin-left: 4%;
}

.IG_icon a img{
    width: 6rem;
    height: 6rem;
    float: left;
    margin-top: auto;
}

/* -------------桜を表示するコンテナのスタイル------------------------------------------------- */
.cherry-blossom-container {
    position: relative;
    height: 100vh; /* コンテナの高さ */
    width: 100%; /* コンテナの横幅 */
    overflow: hidden; /* コンテナからはみ出した要素を隠す */
}
  /* 桜の花びらのスタイル */
.petal {
    position: absolute;
    background-color: #ffc0cb; /* 花びらの色 */
    border-radius: 150% 0 150% 0;
    animation: animate-petal 10s linear;
}

.petal::after {
    content: "";
    position: absolute;
    top: -14%;
    left: -10%;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ffc0cb;
    border-radius: 150% 0 150% 0;
    transform: rotate(15deg);
}

  /* --------------------------花びらが降るアニメーション------------------------ */
@keyframes animate-petal {
    0% {
    top: 0;
    opacity: 0;
    transform: rotate(0deg);
    }
    10% {
    opacity: 1;
    }
    90% {
    opacity: 1;
    }
    100% {
    opacity: 0;
    top: 100vh;
    transform: rotate(3000deg);
    }
}
/* 
------------------------------------------------------------------------------------------------------------------ */
/* 

.nav_toggle {
    display: block;
    position: relative;
    width: 7rem;
    height: 5.5rem;
    margin-top: -35%;
    margin-left: 92%;
}
.nav_toggle i {
    margin: auto;
    display: block;
    width: 7rem;
    height: 0.6rem;
    background-color:#ffe6da;
    position: absolute;
    transition: transform .5s, opacity .5s;
    border-radius: 6%/70%;
    box-shadow: 0 0.1rem 0.25rem 0 #dca4a4;
}
.nav_toggle i:nth-child(1) {
    top: 0;
}
.nav_toggle i:nth-child(2) {
    top: 0;
    bottom: 0;
    margin: auto;
}
.nav_toggle i:nth-child(3) {
    bottom: 0;
}
/* ----------------------------------------------------------------------- */
/* 
.nav_toggle.show i:nth-child(1) {
    transform: translateY(10px) rotate(-45deg);
}
.nav_toggle.show i:nth-child(2) {
    opacity: 0;
}
.nav_toggle.show i:nth-child(3) {
    transform: translateY(-12px) rotate(45deg);
}

/* ------------------------------------------------------------------------------- */
/*  
.nav {
    position: fixed;
    top: 3rem;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s, visibility .5s;
}
*/

/* ---------------------------------------------------------------------------- */
/* /
.nav.show {
    opacity: 1;
    visibility: visible;
} */ 



/*----------------------------
* メニュー開閉ボタン
*----------------------------*/
.menu-btn{
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 2;
    width: 6rem;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../img/hamburger_1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    animation-name:fadeIn1Anime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
  }
  
  /*----------------------------
  * メニュー本体
  *----------------------------*/
  .menu{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.835) ;
/* url(../img/background_wasi.png) */
  }
  .menu_item,.menu__item,.menu___item,.menu____item,.menu_____item{
    font-size: 200%;
    width: 100%;
    height: auto;
    padding: .5em 1em;
    text-align: center;
    color: #9F8383;
    box-sizing: border-box;
  }
  
  /*----------------------------
  * アニメーション部分
  *----------------------------*/
  
  /* アニメーション前のメニューの状態 */
  .menu{
    transform: translateX(100vw);
    transition: all .6s linear;
  }
  /* アニメーション後のメニューの状態 */
  .menu.is-active{
    transform: translateX(0);
    background: #ffffffcd;

}
.menu-btn.is-active{
    transform: translateX(0);
    background: #ffffffcd;
    background-image: url(../img/hamburger_2.png);
    background-size: 5rem;
    background-repeat: no-repeat;
    background-position: right 0.3rem top 0.3rem;
    animation-name:fadeIn2Anime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;

}


    
    @keyframes fadeIn1Anime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 10;
      }
    }

    @keyframes fadeIn2Anime{
        from {
          opacity: 0;
        }
      
        to {
          opacity: 10;
        }
      }
  /* 
.menu-btn.is-active{
    transform: translateX(0);
    background: #ffffffcd;
} */

.bold1{
    font-weight: bolder;
}

.bold2{
    font-weight: bolder;
}

.bold3{
    font-weight: bolder;
}
/* 
.under1{
    background-color: #ffc0cb88;
    height: 1rem;
    width: 14em;
    position: relative;
    top: -22.5rem;
    left: 60rem;
}
.under2{
    background-color: #ffc0cb88;
    height: 1rem;
    width: 24em;
    position: relative;
    top:37rem;
    left: 10rem;
}
.under3{
    background-color: #ffc0cb88;
    height: 1rem;
    width: 9em;
    position: relative;
    top: -28.8rem;
    left: 60rem;
} */

/* ------------------------タブレット用-------------------------------------------- */

@media screen and (max-width:1400px) {

    .wrap{
        overflow: hidden;
    }


    .top_logo{
        width: 70%;
        margin: 0 auto;
        margin-top: 50%;
        margin-bottom: 0;
    }
    
    #TOP{
        margin-bottom: 180%;
    }

    #trigger_block + section{
        margin-top: -120%;
    }
    
    .trigger_head{
        font-size: 210%;
        display: inline-block;
        margin-bottom: 25%;
    }
    
    .trigger{
        margin-left: 5%;
        font-size: 160%;
        line-height: 150%;
        margin-top: -7%;
    
    }

    #store_block{
        margin-top: 30%;
    }

    .marche img{
        display: inline-block;
        margin-top: -69%;
        /* width: 47%;
        margin-bottom: 20%;
        margin-left: 6%;
        margin-top: -77%;
        margin-bottom: 23.5%; */
    }
    
    
    .message_head{
        font-size: 210%;
        margin-left: 56%;
        margin-bottom: 31%;
    }
    
    .message{
        font-size: 150%;
        line-height: 150%;
    }
    
    .sea img{
        width: 47%;
        margin-bottom: 20%;
        margin-left: 6%;
        margin-top: -770%;
    }
    
    .store_head{
        font-size: 210%;
        margin-left: 59%;
        margin-bottom: 15%;
    }
    
    .store{
        margin-left: 5%;
        font-size: 150%;
        line-height: 150%;
        margin-top: -2%;
    }
    
    .mango img{
        width: 30%;
        margin-bottom: 10%;
        margin-left: 24%;
        margin-top: -770%;
    }
    
    .umibudou img{
        width: 24%;
        margin-bottom: 20%;
        margin-left: 6%;
        margin-top: -770%;
    }
    
    .store_head .bold3{
        display: inline-block;
    }
    
    .store_head .next{
        display: inline-block;
    }
    
    .company_section{
        font-size: 60%;
        margin-top: 50%;
    }
    
    .company_section img{
        width: 40%;
    }

    .link_block{
        margin-top: 60%;
    }
    
    .link_block .link{
        font-size: 130%;
        margin-left: 5.5%;
    }

    .link_block img{
        width: 50%;
        margin-bottom: 4%;
    }


    .link_block a img {
        margin-left: 38%;
        margin-top: -6%;
    }
    
    
.SNS{
    margin-top: 15%;
}

.FB_icon a img{
    width: 6rem;
    height: 6rem;
    margin-top: auto;
    margin-left: 4%;
}

.IG_icon a img{
    width: 6rem;
    height: 6rem;
    float: left;
    margin-top: auto;
}

    
    .menu-btn{
        width: 3rem;
        height: 3rem;
    }
    
    .menu-btn.is-active{
        background-size: 3rem;
    }
    
    .under1{
        background-color: #ffc0cb00;
        height: 0.1%;
        width: 14%;
        position: relative;
        top: -70.5%;
        left: 60%;
    }
    
    .under2{
        background-color: #ffc0cb00;
        height: 1rem;
        width: 24em;
        position: relative;
        top:37rem;
        left: 10rem;
    }
    
    .under3{
        background-color: #ffc0cb00;
        height: 1rem;
        width: 24em;
        position: relative;
        top:37rem;
        left: 10rem;
    }
/*     
    .link_after{
        border: 0.08rem solid #9f838300;
        position: relative;
        top: -2rem;
        left: 31.5rem;
        border-radius: 1px;
        width: 5rem;
    } */
}

/* ------------------------スマホ用-------------------------------------------- */

@media screen and (max-width:768px) {

    .wrap{
        overflow: hidden;
    }

.top_logo{
    width: 70%;
    margin: 0 auto;
    margin-top: 90%;
    margin-bottom: 0;
}

#trigger_block + section{
    margin-top: -120%;
}

.trigger_head{
    width: 130%;
    font-size: 100%;
    /* margin-left: 56%;
    margin-top: -140%; */
    margin-top: -70%;
    display: inline-block;
}

.trigger{
    margin-left: 5%;
    font-size: 80%;
    line-height: 150%;
    margin-top: -7%;
}



.message_head{
    width: 130%;
    font-size: 100%;
    margin-left: 56%;
    margin-top: 70%;
}

.message{
    margin-left: 5%;
    font-size: 80%;
    line-height: 150%;
    margin-top: -7%;
}

.sea img{
    width: 47%;
    margin-bottom: 20%;
    margin-left: 6%;
    margin-top: -770%;
}

.store_head{
    width: 180%;
    font-size: 100%;
    margin-left: 66%;
    margin-top: 70%;
    margin-bottom: 5%;
}

.store{
    margin-left: 5%;
    font-size: 80%;
    line-height: 150%;
    margin-top: -7%;
}

.mango img{
    width: 31%;
    margin-bottom: 10%;
    margin-left: 26%;
    margin-top: -770%;
}

.umibudou img{
    width: 27%;
    margin-bottom: 20%;
    margin-left: 6%;
    margin-top: -770%;
}

.store_head .bold3{
    display: inline-block;
}

.store_head .next{
    display: inline-block;
}

.company_section{
    font-size: 25%;
    margin-top: 50%;
}

.company_section img{
    width: 40%;
}

.link_block .link{
    font-size: 90%;
    margin-left: 2%;
    margin-top: auto;
}

.link_block a img {
    margin-left: 38%;
    margin-top: -6%;
}

.SNS{
    margin-top: 15%;
}

.FB_icon a img{
    width: 2rem;
    height: 2rem;
    margin-left: 4%;
    margin-top: auto;
}

.IG_icon a img{
    width: 2rem;
    height: 2rem;
    float: left;
    margin-top: auto;
}



.menu-btn{
    width: 3rem;
    height: 3rem;
}

.menu-btn.is-active{
    background-size: 3rem;
}

.under1{
    background-color: #ffc0cb00;
    height: 0.1%;
    width: 14%;
    position: relative;
    top: -70.5%;
    left: 60%;
}

.under2{
    background-color: #ffc0cb00;
    height: 1rem;
    width: 24em;
    position: relative;
    top:37rem;
    left: 10rem;
}

.under3{
    background-color: #ffc0cb00;
    height: 1rem;
    width: 24em;
    position: relative;
    top:37rem;
    left: 10rem;
}

.link{
    font-size: 40%;
}
}






.scroll-up {
    opacity: 0; 
    visibility: hidden;
    transform: translateY(50px);
    transition: all 1s;
  }
  .scroll-up.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
  }






@media screen and (max-width:1520px) {
    .company_info{
        position: relative;
        top: -19em;
        left: 9em;
        font-size: 240%;
    }
    }