@charset "utf-8";


/*  common
----------------------------------------------------------------------------------------------------------- */
@import url(//fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap);
@import url(//cdn.jsdelivr.net/npm/yakuhanjp@2.0.0/dist/css/yakuhanjp.min.css);
*{font-family: 'Noto Sans SC', sans-serif; font-size: 16px; word-break: normal; font-weight:normal; -webkit-font-smoothing:subpixel-antialiased;margin:0;padding:0;outline:0;}
a{text-decoration: none;}

/* for All */

@keyframes move-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(5px);
  }
}



/* common */

.defaultbtn{
  position:relative;
  background:url(../assets/img/btn_base_bg.jpg) repeat-x center top;
  background-size:contain;
  color:#fff;
  display: block;
  width:80%;
  text-align: center;
  line-height:1em;
  padding:0.8em 0;
  margin:0 auto;
  font-size:4vw;
}
.defaultbtn:before{
  content:' ';
  position:absolute;
  background:url(../assets/img/btn_base.png) no-repeat center left;
  background-size:cover;
  width:5%;
  height:100%;
  top:0;
  left:-4.5%;
}
.defaultbtn:after{
  content:' ';
  position:absolute;
  background:url(../assets/img/btn_base.png) no-repeat center right;
  background-size:cover;
  width:5%;
  height:100%;
  top:0;
  right:-4.5%;
}

body{
  background:url(../assets/img/bg.jpg);
}

.wrapper{
  position:absolute;
  max-width:80vh;
  width:100%;
  height:100vh;
  max-height:200vw;
  overflow:hidden;
  margin:0 auto;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

/* start */

.start-section{
  position:relative;
  width:100%;
  height:100vh;
  background:#FFF;
  z-index:100;
}
.start-section .start-logo{
  position:absolute;
  width:86%;
  margin-left:10%;
  top:36%;
  transform:translateY(-50%);
}

.start-section .start-btn-wrap{
  position:absolute;
  width:100%;
  top:80%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}

.start-section .start-btn{
  margin-top:7%;
}

.start-bgm{
  display:inline-block;
  border:1px solid #ea346d;
  padding:1vw 3vw;
  border-radius:10px;
  color:#ea346d;
  font-size:4vw;
}

.start-bgm.on{
  color:#fff;
  background-color:#ea346d;
}

.select-window{
  position:absolute;
  top:0;
  left:0;
}

/* 選択肢 */
.select-window{
  height:100vh;
  width:100%;
  z-index: 95;
  opacity:0;
  pointer-events: none;
}

.select-window .select-area{
  width:100%;
  top:40%;
  transform:translate(0,-50%);
  z-index: 0;
  position:absolute;
}

.select-window .defaultbtn{
  margin-bottom:2%;
  font-size: 3vw;
}

/* クリックエリア */

.click-area{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:90;
}



/* セリフ */

.message-wrap{
  position:absolute;
  bottom:2%;
  left:0;
  z-index:50;
  width:96%;
  padding-top:30%;
  margin:0 auto;
  left:2%;
}

.massage-base_01{
  width:100%;
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  opacity:0;
}

.massage-base_02{
  width:100%;
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
}

.message-wrap span{
  font-size: 1em;
  opacity:0;
}

.message-wrap .message-wrap__name{
  position:absolute;
  top:5%;
  left:10%;
  color:#fff;
  font-size:4vw;
  z-index:10;
}

.message-wrap .message-wrap__text{
  position:absolute;
  top:37%;
  left:10%;
  line-height: 1.4em;
  color:#fff;
  font-size:3vw;
  opacity:0;
  z-index:10;
}

.message-wrap__icon-next{
  position:absolute;
  bottom:5%;
  right:10%;
  width:3%;
  z-index:60;
}

/* アニメーションエリア */

.animation-wrap{
  position:absolute;
  width:100%;
  padding-top:125%;
  top:55%;
  left:0;
  z-index:10;
  transform:translate(0,-50%);
  opacity:0;
}

.chara--main{
  position:absolute;
  width:110%;
  top:38%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:10;
}

.chara-hand{
  position:absolute;
  width:88%;
  top:63%;
  left:7%;
  z-index:15;
}

.chara-hand img{
  position:absolute;
  display:block;
  width:100%;
}

.chara-hand .chara--hand_01{
  opacity:0;
}

.chara-hand .chara--hand_02{
  opacity:0;
}

.partation{
  position:absolute;
  display:block;
  width:100%;
  top:50%;
  transform:translateY(-50%);
  z-index:20;
}

.partation-glass{
  position:absolute;
  display:block;
  top:0%;
  width:95%;
  padding-top:80%;
  left:2.5%;
  z-index:20;
  overflow:hidden;
  /* filter: blur(20px); */
  background-image:url('../assets/img/chara_blur.png');
  background-size:cover;
}

.partation-glass img{
  position:absolute;
  display:block;
  top:0;
  left:0;
  height:100%;
}

.desk{
  position:absolute;
  display:block;
  width:100%;
  top:70%;
  z-index:15;
}

.cafe-popup{
  position:absolute;
  top:0;
  left:0;
  z-index:50;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index: 20;
  opacity:0;
}

.cafe-popup img{
  position:absolute;
  display:block; 
  width:100%;
  top:45%;
  left:50%;
  transform:translate(-50%,-50%);
  opacity:0;
}

.cafe-image{
  position:absolute;
  top:72%;
  left:66%;
  z-index: 19;
  width:32%;
}

.cafe-image img{
  position:absolute;
  width:100%;
  opacity:0;
}

/* 背景  z10*/

.section-bg{
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  width:100%;
  height:100%;
}

.section-bg img{
  position:absolute;
  top:0;
  left:50%;
  width:auto;
  min-width:100%;
  height:100%;
  transform:translateX(-50%);  
}

.section-bg .bg-02 {
  opacity:0;
}
.message-wrap__icon-next{
  animation: move-y .5s infinite alternate ease-in-out;
}



@media screen and (min-width: 768px) {
  body{
    background:url(../assets/img/bg.jpg);
  }
  .wrapper{
    max-width:80vh;
    height:1250px;
    max-height:100vh;
    overflow:hidden;
  }
}