/* 閾ｪ蛻�畑繝｡繝｢繝ｻ

繧ｹ繝ｩ繧､繝峨す繝ｧ繝ｼ縺ｮ莉慕ｵ�∩縺ｮ繧､繝｡繝ｼ繧ｸ
螟ｧ蜈�ｒ菴懊▲縺ｦ縲√◎縺ｮ荳ｭ縺ｫ蜈ｨ驛ｨ隕∫ｴ�繧貞�繧後€）s縺ｧ遏｢蜊ｰ繧偵け繝ｪ繝�け縺励◆繧臥音螳壹�px讓ｪ遘ｻ蜍輔☆繧九ｈ縺�↓縺吶ｋ

繝輔か繝ｳ繝亥､画峩逕ｨ繧ｳ繝ｼ繝峨◎縺ｮ竭�竊�
font-family: 'New Tegomin', serif;

*/

/* margin繝ｻpadding繝ｪ繧ｻ繝�ヨ */
*{
  margin: 0;
  padding: 0;
}

body{
  cursor: url(img/pointer.png),auto;
  scroll-snap-type: y mandatory;
  overflow: scroll;
}

/* sectionbox */
.sectionbox{
  scroll-snap-align: start;
  position: relative;
  width: 100%;
  height: 100vh;
}

/* 繝倥ャ繝€繝ｼ */
.headerbox{
  position: relative;
  width: 100%;
  height: 50px;
  background-color: rgb(0, 0, 0);
}

/* 繝翫ン */
.navbar{
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 1000;
  background-color: black;
  border-radius: 0 0 30px 30px;
}

.navbar ul{
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  list-style: none;
}

.navbar li{
  width: 150px;
  height: 40px;
  display: block;
  text-align: center;
  padding-top: 10px;
}

.navbar li a{
  text-decoration: none;
  color: white;
  font-family: 'New Tegomin', serif;
}

.navbar li a:hover{
  transition: color 0.3s ease 0s;
  color: rgb(194, 161, 194);
}

/* 繝医ャ繝礼判蜒� */
.top_img{
  position: relative;
  height: 800px;
  background-color: rgb(0, 0, 0);
}

.top_midasi{
  position: absolute;
  bottom: 35%;
  right: 0%;
  z-index: 900;
  color: rgb(255, 255, 255);
  font-family: 'Sawarabi Mincho', serif;
  font-size: 100px;
}

.top_img img{
  width: 100%;
}

/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ隱伜ｰ� */
  .scroll{
    position: absolute;
    left: 50%;
    bottom: 10px;
    height: 50px;
  }

  .scroll span{
    position: absolute;
    left: -15px;
    top: -15px;
    color: white;
    font-size: 10px;
  }

  .scroll::after{
    content: "";
    position: absolute;
    top: 0px;
    width: 1px;
    height: 30px;
    background-color: white;
    animation: scrolldown 1.4s ease-in-out infinite;
    opacity: 0;
  }

  @keyframes scrolldown{
    0%{
      height: 0;
      top: 0;
      opacity: 0;
    }

    30%{
      height: 30px;
      opacity: 1;
    }

    100%{
      height: 0px;
      top: 50px;
      opacity: 0;
    }
  }


/* 繧ｭ繝｣繝�メ繧ｳ繝斐�驛ｨ蛻� */
.catchcopy{
  height: 910px;
  background-color: rgb(0, 0, 0);
}

#kimari_1,#kimari_2,#kimari_3,#kimari_4,#kimari_5,#kimari_6,#kimari_7{
  opacity: 0;
  animation-fill-mode: forwards;
}

.kimari_1{
  animation-name: brah;
  animation-duration: 3s;
  animation-delay: 1s;
}

.kimari_2{
  animation-name: brah;
  animation-duration: 3s;
  animation-delay: 2s;
}

.kimari_3{
  animation-name: brah;
  animation-duration: 3s;
  animation-delay: 3s;
}

.kimari_4{
  animation-name: brah;
  animation-duration: 3s;
  animation-delay: 4s;
}

.kimari_5{
  animation-name: brah;
  animation-duration: 3s;
  animation-delay: 5s;
}

.kimari_6{
  animation-name: brah;
  animation-duration: 3s;
  animation-delay: 6s;
}

.kimari_7{
  animation-name: brah;
  animation-duration: 3s;
  animation-delay: 7s;
}

.brah_anime{
  animation-name: brah;
  animation-duration: 3s;
}


@keyframes brah{
  0%{
    opacity: 0;
    filter: blur(10px);
  }

  100%{
    opacity: 100;
    filter: blur(0px);
  }
}

.catchcopy_midasi1{
  padding: 30px 40px 50px 40px;
  font-size: 50px;
  font-family: 'New Tegomin', serif;
  color: rgb(210, 64, 64);
}

.catchcopy_contents{
  padding: 0 40px 10px 250px;
  color: white;
  font-size: 20px;
  font-family: 'New Tegomin', serif;
}

.catchcopy_contents p{
  padding: 0 0 5px 0;
}

.catchcopy_koumoku{
  font-size: 30px;
  font-weight: bold;
  color: rgb(163, 150, 150);
}

.catchcopy_midasi2{
  padding: 30px 40px 20px 40px;
  font-size: 50px;
  font-family: 'New Tegomin', serif;
  color: rgb(210, 64, 64);
  text-align: right;
}

/* 縺ゅｉ縺吶§驛ｨ蛻� */
.arasuji{
  padding-top: 100px;
  height: 600px;
  background-color: rgb(0, 0, 0);
  font-family: 'Sawarabi Mincho', serif;
}

.arasuji_midasi{
  font-size: 70px;
  color: rgb(210, 64, 64);
}

.arasuji_wrapper{
  padding: 40px;
  display: flex;
}

.activate {
  animation-name: fadeIn;
  animation-duration: 3s;
  }

.arasuji_contents{
  padding-top: 10px;
  padding-right: 10px;
  color: white;
  font-size: 20px;
  font-family: 'New Tegomin', serif;
}

.arasuji_contents p{
  padding-bottom: 30px;
}

.arasuji_img img{
  border-radius: 100px 0 0 100px;
}


/* 繧ｭ繝｣繝ｩ繧ｯ繧ｿ繝ｼ驛ｨ蛻� */
.character{
  height: 800px;
  background-color: rgb(0, 0, 0);
  font-family: 'Sawarabi Mincho', serif;
}

.character_midasi{
  padding-top: 100px;
  padding-bottom: 40px;
  color: rgb(210, 64, 64);
  font-size: 70px;}

/* 繧ｹ繝ｩ繧､繝峨す繝ｧ繝ｼ逕ｨ螟ｧ蜈� */
.frame{
  position: relative;
  width: 53%;
  height: 100%;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

#slide{
  position: absolute;
  display: flex;
  justify-content: flex-start;
  left:10%;
  width:1800px;
  height: 100%;
}

/* 繧ｹ繝ｩ繧､繝峨�繝懊ち繝ｳ */

#prevbutton{
  border-radius: 50%;
  border: 1px solid white;
  padding: 10px;
  font-size: 30px;
  position: absolute;
  color: white;
  left: 24%;
  top: 50%;
  z-index: 2000;
}

#nextbutton{
  border-radius: 50%;
  border: 1px solid white;
  padding: 10px;
  font-size: 30px;
  position: absolute;
  color: white;
  left: 80%;
  top: 50%;
  z-index: 2000;
}

#prevbutton:hover,#nextbutton:hover{
  background-color: white;
  color: black;
  animation-duration: 2s;
}

/* 繧ｹ繝ｩ繧､繝牙�騾� */

.chara_wrapper1,.chara_wrapper2,.chara_wrapper3,.chara_wrapper4{
  display: flex;
  width: 70%;
  height: 650px;
}

.character_img1 img,.character_img2 img,.character_img3 img,.character_img4 img{
  width: 400px;
  height: 600px;
}

.character_contents1,.character_contents2,.character_contents3,.character_contents4{
  width: 400px;
  height: 200px;
  padding-left: 50px;
  padding-top: 100px;
  color: white;
  font-size: 20px;
  font-family: 'New Tegomin', serif;
}

.character_contents1_nakami,.character_contents2_nakami,.character_contents3_nakami,.character_contents4_nakami{
  padding-top: 40px;
}

.character_contents1_midasi,.character_contents2_midasi,.character_contents3_midasi,.character_contents4_midasi{
  width: 400px;
  height: 30px;
  font-size: 50px;
  color: rgb(255, 255, 255);
  padding-bottom: 20px;
}

/* 繧ｹ繝ｩ繧､繝峨�縺ｨ縺､繧� */
.character_contents1_midasi{
  background-color: rgb(125, 62, 132);
}

.character_contents1{
  padding-left: 9px;
}

.character_img1

/* 繧ｹ繝ｩ繧､繝峨�縺溘▽繧� */
.character_contents2_midasi{
  background-color: rgb(223, 70, 4);
}

/* 繧ｹ繝ｩ繧､繝峨∩縺｣縺､繧� */
.character_contents3_midasi{
  background-color: rgb(4, 110, 223);
}

/* 繧ｹ繝ｩ繧､繝峨ｈ縺｣縺､繧� */
.character_contents4_midasi{
  background-color: rgba(212, 223, 4, 0.402);
}

.character_img4{
  margin-left: 50px;
}


/* 闡苓€�ｴｹ莉矩Κ蛻� */
.tyosya{
  height: 600px;
  background-color: rgb(0, 0, 0);
  font-family: 'Sawarabi Mincho', serif;
}

.tyosya_midasi{
  padding-top: 100px;
  color: rgb(210, 64, 64);
  font-size: 70px;
}

.tyosya_wrapper{
  padding: 80px 90px 80px 90px;
  display: flex;
  margin-right: 10%;
  margin-left: 10%;
}

#tyosya_contents_h2{
  font-size: 40px;
  padding-bottom: 10px;
}

.tyosya_contents{
  color: white;
  font-size: 20px;
  width: 700px;
  padding: 15px 0 0 40px;
  font-family: 'New Tegomin', serif;
}

.tyosya_img img{
  height: 300px;
  width: 300px;
  border-radius: 50%;
}

/* 蝠�刀邏ｹ莉矩Κ蛻� */
.syouhin{
  position: relative;
  background-color: rgb(0, 0, 0);
  font-family: 'Sawarabi Mincho', serif;
}

.syouhin_midasi{
  padding-top: 100px;
  color: rgb(210, 64, 64);
  font-size: 70px;
}

.syouhin_wrapper{
  position: absolute;
  right:30%;
  padding: 40px;
  display: flex;
}

.syouhin_contents{
  margin: auto;
  color: white;
  font-size: 20px;
  bottom: 0px;
}

.syouhin_contents ul{
  padding-right: 30px;
  padding-bottom: 30px;
  list-style: none;
  font-family: 'New Tegomin', serif;
}

.syouhin_contents li{
  padding-bottom: 5px;
}

.syouhin_img img{
  height: 600px;
  width: 400px;
}

.syouhin_img{
  animation-name:fuwafuwa;
  animation-delay: 0s;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes fuwafuwa{
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-10px);
  }
  100%{
    transform: translateY(0);
  }
}

/* 雉ｼ蜈･繝懊ち繝ｳ */

.kounyu {
  color: rgb(210, 64, 64);
  background-color:rgb(0, 0, 0);
  padding: 20px;
  border-radius: 100vh;
  text-decoration: none;
  font-family: 'Sawarabi Mincho', serif;
  font-weight: bold;
}

.kounyu:hover
{
  color: white;
  background-color: rgb(210, 64, 64);
  transition: color 1s ease 0s;
}

/* 繝輔ャ繧ｿ繝ｼ */
.footer{
  height: 50px;
  background-color: rgb(0, 0, 0);
}

/* 繝輔ャ繧ｿ繝ｼ縺ｮ繝翫ン */
.navbar_footer ul{
  display: flex;
  width: 100%;
  list-style: none;
}

.navbar_footer li{
  width: 100px;
  height: 50px;
  display: block;
  text-align: center;
  color: white;
  font-size: 13px;
  line-height: 50px;
}

.navbar_footer a{
  text-decoration: none;
  color: white;
}