body {
  max-width: 100vw;
  overflow-x: hidden;
  background-image: url(halloween_main5.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #070707;
  color: #EDE9F1;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}




#video-area{
  position: fixed;
  z-index: -1;/*最背面に設定*/
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
}

#video {
  /*天地中央配置*/
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
  opacity: 0.2;
}









.main_img {
  text-align: center;
  margin-top: 10px;
  width: 100vw;
}

.main_img img{
  text-align: center;
  margin: 20px auto 0 auto;
  width: 58%;
}

.navigation {
  margin-top: 0px;
  z-index: 9999;
}

.navigation h1{
  margin: 0 0 10px 0;
  text-align: center;
  font-size: 40px;
}

.navigation p{
  text-align: center;
  margin: 0 0 50px 0;
}

ul {
  display: flex;
  justify-content: center;
}

li {
  list-style: none;
}


a.btn_04 {
	display: ;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 30%;
	margin: 100px 10px;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #F88400;
	color: #F88400;
	border-radius: 100vh;
	transition: 0.5s;
  font-size: 22px;
}
a.btn_04:hover {
	color: #fff;
	background: #F88400;
}







.AW_img {
  text-align: center;
  margin-top: 200px;
}

.AW_img img{
  width:250px;
}

/*
.text_box {
  width: 70%;
  margin: 200px auto 0 auto;
  text-align:  center;
  background:rgba(0,0,0,0.5);
  padding: 10px 50px;


}
*/

.text {
  color: white;
  font-size: 25px;
  text-align: center;
  line-height: 45px;
  letter-spacing: 3px;
  margin: 100px 0 80px 0;
}

.whitebox{
  width: 100vw;
  padding-bottom: 0%;
  margin-top: -10px;
  margin: -10px auto 0 auto;
}

.whitebox h1 {
  font-size: 45px;
  text-align: center;
  padding-top: 200px;
}

.whitebox h2 {
  font-size: 22px;
  text-align: center;
  margin-top: -20px;
  margin-bottom: 100px;
}

.whitebox h3 {
  font-size: 50px;
  text-align: center;
}

.whitebox p {
  font-size: 25px;
  text-align: center;
  margin: 15px;
}

.halloweennight_img {
  text-align: center;
  margin-top: 300px;
  width: 100%;
  z-index: 999;
}

.halloweennight_img img{
  text-align: center;
  width: 90%;
  margin: 0 auto;
}


.event_title1 {
  width: 90%;
  margin: 200px auto 20px auto;
  text-align: center;
}

.event_title2 {
  width: 90%;
  margin: 400px auto 20px auto;
  text-align: center;
}

.event1_text  {
  width: 100%;
  color: white;
  padding:0 0 80px 0;
  margin: 0 auto;
  font-size: 30px;
  text-align: center;
}

.event_title1 img {
  margin: 10px 0 50px 0;
}

.event1_mainimg img{
  width: 100vw;
  height: 500px;
  margin-bottom: 0px;
}

.event1_img {
  width: 90%;
  margin: 90px auto 150px auto;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
}


.event1_img a {
  width: 30%;
  margin: 30px auto 0 auto;
}

.event1_img img {
  width: 95%;
  margin-top: 30px;
}

.event1_light img{
  margin: 100px auto 0 auto;
  width: 100%;
}

.light_img {
  display: flex;
  flex-direction: row;
  width: 90%;
  justify-content: center;
  margin: 0 auto;
}

.light_img ul{
  width: 100%;
  
}

.light_img li{
  width: 25%;
  padding-top: 5%;
  margin: 0 3%;
}

.img_box1 {
  width: 100%;
  padding-top: 100%;
  background-color: #F88400;
  background-image: url(img/IMG_0623.jpg);
  background-size: cover;
  order: 2;
  border-radius:59% 41% 64% 36% / 54% 50% 50% 46%;
}

.img_box2 {
  width: 100%;
  padding-top: 100%;
  background-color: #F88400;
  background-image: url(img/IMG_0629.jpg);
  background-size: cover;
  background-position: 40%;
  order: 3;
  border-radius:44% 56% 52% 48% / 54% 52% 48% 46% ;
}

.img_box3 {
  width: 100%;
  padding-top: 100%;
  background-color: #F88400;
  background-image: url(img/IMG_0614.jpg);
  order: 1;
  background-size: cover;
  border-radius:39% 61% 41% 59% / 60% 56% 44% 40% ;
}




.entry {
  margin: 180px;
}

.illust_entry {
  margin: 100px 0 100px 0;
}

.illust_entry h2 {
  font-weight: lighter;
  margin: 80px auto;
  padding-bottom: 30px;
  font-size: 35px;
  width: 30%;
  border-bottom: solid 1px #F88400;
}

.entry_text {
  margin-bottom: 50px;
}

.entry_button {
  text-align: center;
}

a.btn_03 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 25%;
	margin: 50px auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #F88400;
	color: #F88400;
	border-radius: 100vh;
	transition: 0.5s;
  font-size: 22px;
}
a.btn_03:hover {
	color: #fff;
	background: #F88400;
}

.volunteer_entry {
  margin: 200px 0;
}

.volunteer_entry h2 {
  font-weight: lighter;
  width: 30%;
  margin: 80px auto;
  padding-bottom: 30px;
  border-bottom: solid 1px #F88400;
  font-size: 35px;
}

.event1_light {
  width: 100vw;
}

.event3 p {
  font-size: 25px;
  text-align: center;
  margin: 15px;
}

.furituke p {
  margin-top: 200px;
  font-weight: bold;
  font-size: 30px;
}

.furituke {
  text-align: center;
}

.responsive {
  width: 100%;
  aspect-ratio: 16/9;
}

.responsive iframe {
  width: 70%;
  height: 70%;
  }




.circle_btn08 {
  text-decoration: unset;
  position: relative;
  display: inline-block;
  padding-left: 48px;
  
  box-sizing: border-box;
  font-weight: 500;
  transition: padding-right .6s cubic-bezier(.25,1,.5,1);
}
.circle_btn08:before {
  content: "";
  width: 32px;
  height: 32px;
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 45%;
  transform-origin: center center;
  transform: translateY(-50%);
  border-radius: 50%;
  border: solid 7px #F88400; /* 円の色 */
  transition: width .4s cubic-bezier(.25,1,.5,1);
  transition-property: width,height,left;
}
.circle_btn08_box {
  position: relative;
  overflow: hidden;
  color: #F88400; /* 文字の色 */
  display: table;
  font-size: 25px;
  font-weight: bold; /* 文字の大きさ */
}
.circle_btn08 span {
  position: relative;
  display: inline-block;
  transition: transform 1s cubic-bezier(.25,1,.5,1);
}
.circle_btn08 span:after {
  content: attr(data-text);
  position: absolute;
  top: 1.5em;
  left: 0;
}

/* ↓文字の下図に合わせて調整する */
.circle_btn08 span:nth-child(1) {
  transition-delay: 0.02s;
}
.circle_btn08 span:nth-child(2) {
  transition-delay: .04s;
}
.circle_btn08 span:nth-child(3) {
  transition-delay: .06s;
}
.circle_btn08 span:nth-child(4) {
  transition-delay: .08s;
}
.circle_btn08 span:nth-child(5) {
  transition-delay: .1s;
}
.circle_btn08 span:nth-child(6) {
  transition-delay: .12s;
}
.circle_btn08 span:nth-child(7) {
  transition-delay: .14s;
}
.circle_btn08 span:nth-child(8) {
  transition-delay: .16s;
}
.circle_btn08 span:nth-child(9) {
  transition-delay: .18s;
}
.circle_btn08 span:nth-child(10) {
  transition-delay: .2s;
}

/* マウスオーバーした際のデザイン */
.circle_btn08:hover:before {
  width: 14px;
  height: 14px;
  left: 8px;
}
.circle_btn08:hover span {
  transform: translateY(-1.5em);
}


.timeschedule {
  margin: 500 0 100 0;
}

.timeschedule img {
  width: 100vw;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される
   スマートフォンで見たときは"sp"のclassがついた画像が表示される */

.pc { display: block !important; }
.sp { display: none !important; }
 










footer {
  width: 100%;
  height: 500px;
  margin-top: 200px;
}

footer p {
  text-align: center;
  font-size: 20px;
  line-height: 35px;
}

.tel {
  margin-top: 50px;
}








.fadeUpTrigger{
  opacity: 0;
}

.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }

  .fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
      transform: translateY(1000px);
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }


  /* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(2.5);
  }

  to {
	filter: blur(0);
	transform: scale(1.2);
  }
}

.blur_high{
	animation-name:blurAnime2;
	animation-duration:1.3s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime2{
  from {
	filter: blur(10px);
	transform: scale(1.2);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}





.updown1 {
  animation-name:updown1;   /* アニメーション名の指定 */
  animation-delay:0s;   /* アニメーションの開始時間指定 */
  animation-duration: 2.5s;   /* アニメーション動作時間の指定 */
  animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
  animation-iteration-count: infinite; 
}

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




.updown2 {
  animation-name:updown1;   /* アニメーション名の指定 */
  animation-delay:0s;   /* アニメーションの開始時間指定 */
  animation-duration: 2.3s;   /* アニメーション動作時間の指定 */
  animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
  animation-iteration-count: infinite; 
}

@keyframes updown1 {
0% {
  transform: translateY(0);
}
45% {
  transform: translateY(-40px);
}
50% {
  transform: translateY(20px);
}
60% {
  transform: translateY(0);
}
100% {
  transform: translateY(0);
}
}


.updown3 {
  animation-name:updown1;   /* アニメーション名の指定 */
  animation-delay:0s;   /* アニメーションの開始時間指定 */
  animation-duration: 2.7s;   /* アニメーション動作時間の指定 */
  animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
  animation-iteration-count: infinite; 
}

@keyframes updown1 {
0% {
  transform: translateY(0);
}
45% {
  transform: translateY(-40px);
}
50% {
  transform: translateY(20px);
}
60% {
  transform: translateY(0);
}
100% {
  transform: translateY(0);
}
}













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


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

  body {
    background-image: none;
  
  }

  .main_img {  
    width: 140%;
    margin: 0 calc(50% - 70vw);
    margin-top: 150px;
  }

  ul {
    flex-wrap: wrap;
    width: 90%;
    margin: 20 auto 0 auto;
  }
  
  li {
    list-style: none;
    width: 45%;
    margin: 0 auto;
    text-align: center;
    margin-top: 70px;
  }

  a.btn_03 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 50%;
    margin: 70 auto;
    padding: 1.5rem 1rem;
    font-weight: bold;
    border: 2px solid #F88400;
    color: #F88400;
    border-radius: 100vh;
    transition: 0.5s;
  }
  a.btn_03:hover {
    color: #fff;
    background: #F88400;
  }
  
  .halloweennight_img image{
    width: 130%;
    margin: 0 calc(50% - 63vw);
    margin-top: 200;
  }

  .event_title1 img {
    width: 100%;
    margin: 10px 0 50px 0;
  }

  .event1_text p {
    line-height: 2rem;
    text-align: left;
    width: 60%;
    margin: 0 auto;
  }

  .event1_mainimg img{
    height: 35vh;
  }

  .entry_text p{
    text-align: left;  
    width: 80%;
    margin: 0 auto;
    line-height: 2rem;
  }

  .illust_entry h2 {
    width: 60%;
  }

  .event1_light img {
    width: 140%;
    margin: 100 calc(50% - 70vw);;
  }

  .volunteer_entry h2 {
    width: 60%;
    margin: 80px auto;
    padding-bottom: 30px;
  }
  

  .event2_mainimg img{
    height: 40vh;
  }

  .event_title2 img {
    margin: 10px 0 40px 0;
    width: 100%;
  }


  .timeschedule {
   margin-top: 200; 
  }

  .timeschedule img {
    width: 140%;
    margin: 0 calc(50% - 70vw);;
  }


}







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

  ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 50 auto 0 auto;
  }
  
  li {
    list-style: none;
    width: 100%;
    margin: 0 auto 60px auto;
    text-align: center;
  }





}









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


@media screen and (max-width:480px) {
  body {
    background-color: #070707;
    font-family:"Noto Sans";
    color: #EDE9F1;
  }

  .main_img {
    text-align: center;
    margin: 180px auto 0 auto;
    width: 100%;
  }

  .main_img img{
    text-align: center;
    margin: 180px auto 0 auto;
    width: 100%;
  }





  .navigation {
    margin-top: 60px;
  }
  
  .navigation h1{
    margin: 0 0 10px 0;
    text-align: center;
    font-size: 40px;
  }
  
  .navigation p{
    text-align: center;
    margin: 0 0 50px 0;
  }
  
  ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
  }
  
  li {
    list-style: none;
    width: 100%;
    margin: 0 auto 60px auto;
    text-align: center;
  }
  
  
  a.btn_04 {
    display: ;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 20%;
    margin: 100px 10px;
    padding: 1rem 2rem;
    font-weight: bold;
    border: 2px solid #F88400;
    color: #F88400;
    border-radius: 100vh;
    transition: 0.5s;
    background:rgba(0,0,0,0.4);
    font-size: 15px;
  }
  a.btn_04:hover {
    color: #fff;
    background: #F88400;
  }
  








  

  .AW_img {
  text-align: center;
  margin-top: 650px;
  }

  
  .AW_img img{
    width:auto;
  }

  .text {
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  letter-spacing: 3px;
  margin: 100px 0 80px 0;
  }
  

  .halloweennight_img {
    width: 100vw;
    text-align: center;
    margin: 200px 0 0 0;
    z-index: 999;
  }

  .halloweennight_img img{
    width: 100%;
    margin: 0 calc(50% - 50vw);
  }



  .whitebox{
    padding-bottom: 50px;
    margin-top: -10px;

  }

  .whitebox p {
    font-size: 15px;
    text-align:left;
    margin: 1px auto;
    width: 80%;
    line-height: 27px;
  }

  .whitebox h1 {
    font-size: 22px;
    text-align: center;
    padding-top: 100px;
  }

  .whitebox h2 {
    font-size: 13px;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 50px;
  }





  .event_title1 {
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }

  .event_title2 {
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }

  .event_title1 img {
    margin: 70px 0 10px 0;
    width: 100%;
  }

  .event_title2 img {
    margin: 10px 0 10px 0;
    width: 100%;
  }

  .event1_text  {
    width: 90%;
    padding: 20px 0 20px 0;
    margin: 0 auto;
    font-size: 30px;
    text-align: center;
  }

  

  .event1_img {
    width: 90%;
    margin: 50px auto 0 auto;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
  }


  .event1_img a {
    width: 45%;
    margin: 0 auto 0 auto;
  }
  
  .event1_img img {
    width: 100%;
    margin-top: 15px;
  }

  .event1_mainimg img{
    width: 95vw;
    height: 300px;
    margin: 0 auto;
  }

  .event1_light {
    margin-top: 50px;
    width: 100vw;
  }
  
  .event1_light img {
    width: 100vw;
    margin: 0 auto;
  }

  

  .entry {
    margin: 180px;
  }
  
  .illust_entry {
    margin: 130px 0;
  }
  
  .illust_entry h2 {
    margin: 40px auto;
    padding-bottom: 10px;
    font-size: 20px;
    width: 80%;
    border-bottom: solid 1px #F88400;
  }
  
  .illust_entry p {
    margin: 0 auto;
    width: 80%;
    line-height: 28px;
  }

  .entry_text {
    margin-bottom: 30px;
  }


  
  .entry_button {
    text-align: center;
  }
  
  .volunteer_entry {
    margin: 120px 0 120px 0;
  }
  
  .volunteer_entry h2 {
    width: 80%;
    border-bottom: solid 1px #F88400;
    margin: 40px auto;
    padding-bottom: 10px;
    font-size: 20px;
  }

  .volunteer_entry p {
    margin: 0 auto;
    width: 80%;
    line-height: 28px;
    text-align: left;
  }

  .light_img {
    display: flex;
    width: 90%;
    justify-content: center;
    margin: 60px auto 0 auto;
  }
  
  .light_img ul{
    width: 100%;
    
  }
  
  .light_img li{
    width: 40%;
    margin: 0 3%;
  }






  

  .circle_btn08_box {
    position: relative;
    overflow: hidden;
    color: #F88400; /* 文字の色 */
    display: table;
    font-size: 15px;
    font-weight: bold; /* 文字の大きさ */
  }


  a.btn_03 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 80%;
    margin: 30px auto;
    padding: 1rem 3rem;
    font-weight: bold;
    border: 2px solid #F88400;
    color: #F88400;
    border-radius: 100vh;
    transition: 0.5s;
    font-size: 15px;
  }
  a.btn_03:hover {
    color: #fff;
    background: #F88400;
  }

  .event3 p {
    font-size: 14px;
    text-align: center;
    margin: 15px;
  }

  .timeschedule {
    margin: 100 0 100 0;
  }

  .timeschedule img {
    width: 100%;
    margin: 0 calc(50% - 50vw);;
  }

  .event3 p{
    text-align: left;
    width: 80%;
    margin: 10 auto;
    line-height: 25px;
    font-size: 15px;
  }

  .furituke p {
    margin-top: 50px;
  }

  .responsive iframe {
    width: 100%;
    height: 100%;
    }






  .pc { display: none !important; }
    .sp { display: block !important; }






  footer {
  width: 100%;
  height: 250px;
  margin-top: 50px;
  }

  footer p {
  text-align: center;
  font-size: 15px;
  line-height: 20px;
  }



}