.wrapTop {
    position: relative;
    width: 100vw;
    height: 100vh;
    color: #001858; /*ネイビー*/
    font-family: 'Hina Mincho', serif;
}

#chayaGirlWrap {
  opacity: 0.95;
  pointer-events: none;
}

@media screen and (min-width:768px){
/*　画面サイズが768px以上の場合読み込む　*/
    #oogiriChayaText3 {
        font-family: 'Hina Mincho', serif;
        min-width: 46vw;
        opacity: 0.95;
        font-size: 7vw;
        position: absolute;
        left: 63%;
        top: 13.4%;
        transform: translate(-50%, -3%);
    }
    #catchCopyText3 {
        font-family: 'Hina Mincho', serif;
        min-width: 36vw;
        opacity: 0.95;
        font-size: 2.2vw;
        position: absolute;
        left: 78%;
        top: 48%;
        transform: translate(-80%, -35%);
    }
    #chayaGirl3 {
        width: auto;
        height: 80vh;
        position: absolute;
        left: 20%;
        bottom: -2%;
        transform: translate(-20%, -0%);
    }
    #wakasa3 {
         width: 12vw;
         height: auto;
         position: absolute;
         left: 74%;
         bottom: 3%;
         transform: translate(-73%,-10%);
         opacity: 0.9;
    }
    #sub3 {
        width: 61vw;
        height: auto;
        position: absolute;
        right: -12%;
        top: 58%;
        transform: translate(-0%,-50%);
        opacity: 0.7;
        z-index: -1;
        pointer-events: none;
    }
    #clickText {
        width: 100%;
        height: 100%;
        font-size: 1vw;
    }
    .copyright {
        margin: -71px -47px;
        font-size: 12px;
        width: 37%;
        pointer-events: auto !important;
    }
}

@media screen and (max-width:767px) {
/*　画面サイズが767px以下の場合読み込む　*/
    #oogiriChayaText3 {
        font-family: 'Hina Mincho', serif;
        min-width: 70vw;
        opacity: 0.95;
        font-size: 11vw;
        position: absolute;
        left: 50%;
        top: 6%;
        transform: translate(-50%, -3%);
    }
    #catchCopyText3 {
        font-family: 'Hina Mincho', serif;
        min-width: 50vw;
        opacity: 0.95;
        font-size: 4.4vw;
        position: absolute;
        right: 7%;
        top: 22%;
        transform: translate(-0%, -10%);
    }
    #chayaGirl3 {
        width: 73vw;
        height: auto;
        position: absolute;
        left: 39%;
        bottom: 8%;
        transform: translate(-62%, -0%);
    }
    #wakasa3 {
        width: 23vw;
        height: auto;
        position: absolute;
        left: 95%;
        bottom: 6%;
        transform: translate(-95%,-50%);
    }
    #sub3 {
        width: 111vw;
        height: auto;
        position: absolute;
        right: -6%;
        top: 52%;
        transform: translate(-2%,-50%);
        opacity: 0.8;
        z-index: -1;
        pointer-events: none;
    }
    #clickText {
        width: 100%;
        height: 100%;
        font-size: 3vw;
    }
    .copyright {
        font-size: 10px;
        width: 40%;
        pointer-events: auto !important;
    }
}


@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

#wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
}

/*========= particle js を描画するエリア設定 ===============*/

html,body{
  height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{
  position:fixed;/*描画固定*/
  z-index:-1;/*描画を一番下に*/
  width: 100vw;
  height: 100vh;
  /*background-color:#FEE7E7; */
}

#wrapper{
  position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
  z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
  width:100%;
  height: 100%;
}

}