@charset "utf-8";

body{
  font-family: 'Verdana', 'Geneva', 'Tahoma', 'YU Gothic UI', 'ヒラギノ丸ゴシック ProN（Pro）', 'sans-serif';
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}



img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}




body{
  background: url(../images/backxmas.jpg); no-repeat center top / contain;
  background-size: 200%;
  color: #ffffff;
}



header{
  background-color: rgba(204, 0, 0, 0.9);
  padding-top: 20px;
  padding-left: auto;
  padding-right: auto;
  padding-bottom: 10px;
  text-align: center;

}

h1{
  font-size: clamp(1rem, -0.882rem + 8.4112vw, 4.375rem);
  margin: 15px auto;
}

h2{
  font-size: clamp(1rem, -0.185rem + 5.296vw, 3.125rem);
  margin: 0;
}

h3{
  font-size: clamp(1rem, -0.3592rem + 6.0748vw, 3.4375rem);
  margin: 0;
}

h5{
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 0;
}

header nav{
  text-align: center;
}

header nav ul{
  display: flex;
  justify-content: center;
  padding: 0 0 5px;

}

header nav ul li{
  margin: 0 20px;
}

header nav ul li a{
  text-decoration: none;
  font-size: clamp(0.5rem, 0.05rem + 1.92vw, 1.25rem);
  color: #ffffff;
  font-weight: bold;
}

header nav ul li a:hover{
  border-bottom: 2px solid #ffffff;
}

h6{
  font-size: clamp(1rem, 0.7rem + 1.28vw, 1.5rem);
  background-color: rgb(3,37,3);
  padding: 10px 15px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  margin-top: 40px;
}

.wakusen{
  border: solid 1px #ffffff;
  padding: 1px;
}


.pdf{
  background-color: rgba(255,255,255,0.7);
  padding: 15px 20px;
  font-size: 18px;
  font-weight: bold;
  /* margin-left: 70%;
  margin-right: auto;
  margin-top: 10px; */
  text-align: center;
}

.pdf a{
  color: rgba(3,37,3);
}

.park-info{
font-size: 14px;
color: rgb(3, 37, 3);
font-weight: bold;
background-color: rgba(255,228,196,0.7);
padding: 10px;
margin-bottom: 10px;
}

.accesstitle{
  font-size: 18px;
}

.event-of{
background-color: rgba(255,255,255,0.7);
color: rgb(3, 37, 3);
font-size: clamp(0.75rem, 0.45rem + 1.28vw, 1.25rem);
text-align: center;
padding: 10px 30px;
margin-bottom: 10px;
}

.information{
  display: flex;
  justify-content: space-between;
  align-items: end;
}



h4{
  font-size: clamp(0.75rem, 0.3rem + 1.92vw, 1.5rem);
    margin-top: 10px;
  margin-bottom: 0px;
}

.event-time{
  font-size: clamp(0.875rem, 0.5rem + 1.6vw, 1.5rem);
  color: rgb(3, 37, 3);
text-align: center;
background-color: #ffffff;
padding: 10px 0;
}

.yoyakucheck{
  font-size: clamp(0.625rem, 0.25rem + 1.6vw, 1.25rem); text-align: center;
  font-size:18px;
}

table{
  font-size: clamp(0.625rem, 0.4rem + 0.96vw, 1rem);
  width: 100%;
  background-color: rgba(3, 37, 3, 0.6);
}


td,th{
  line-height: 150%;
  border: #ffffff solid 1px;
  padding: 5px;
}

thead th{
  text-align: center;
}

tbody,th{
  text-align: left;
  white-space: nowrap;
  }

.tyuui{
  font-size: 18px;
  padding: 8px;
}

.oya01{
  display: flex;
  justify-content: space-between;
  margin; auto;
  align-items: flex-start;
}

.kodomo01{
  flex-basis: 50%;
  padding-left: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: rgba(3, 37, 3, 0.6);
}

.taikai{
  flex-basis: 20%;
  border: #ffffff 5px dotted;
  padding: 8px;
  margin: 0;
  font-weight: bold;
  width: 20%;
 
  background-color: rgba(3, 37, 3, 0.6);
}

.kodomo03{
  flex-basis: 15%;
}


/* テキスト読みやすいようにシャドウ */
.fuchidori{
  font-size: clamp(0.625rem, 0.4rem + 0.96vw, 1rem);
  color: #ffffff;
  text-shadow:0.5px 0.5px 0 rgb(3,37,3), -0.5px -0.5px 0 rgb(3,37,3),
  -0.5px 0.5px 0 rgb(3,37,3), 0.5px -1px 0 rgb(3,37,3),
  0px 0.5px 0 rgb(3,37,3),  0 -0.5px 0 rgb(3,37,3),
  -0.5px 0 0 rgb(3,37,3), 0.5px 0 0 rgb(3,37,3);

  background-color: rgba(3, 37, 3, 0.3);
  padding: 8px; 


}


.telno{
  font-size: 20px;
  font-size: clamp(0.75rem, 0.525rem + 0.96vw, 1.125rem);
}

.topmenu{    background-color: chartreuse;
  width: 100%;
  padding: 10px 0px;
  text-align: center;
}

.topmenu a{color: #157209;
  font-size: 18px;
  text-decoration: underline;
  border: #157209 1px;
  text-underline-offset: 3px;
  font-weight: bold;
}



footer{
  background-color: #cc0000;
  padding-top: 10px;
  padding-left: auto;
  padding-bottom: 10px;
  padding-right: auto;
  color: #ffffff;
  text-align: center;
}

/* トップへ戻るボタンコピペ */
html{
  scroll-behavior: smooth;
}

  #topButton {
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: 100;
    opacity: 0;
  }

  #topButton.is-hide{
opacity: 1;
transition: opacity 350ms ease;
  }



/* サンタとトナカイのアニメーション */

/* .anim-box{
 display: flex;
align-items: flex-end;
animation-duration: 5s;
animation-name: slidein;
}


@keyframes slidein {
 

  from {
    margin-left: 0%;
    width: 100%;
  }

  to {
    margin-left: 100%;
    width: 300%;
  } 
}*/




/* そりのアニメーション */

.sori{
  margin-top: 20px;
  animation: slidein 4s forwards;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 10%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

.heart{
  position: fixed;
  bottom: 70px;
  left: 20px;
  z-index: 100;
  animation-name: heartAnimation;
    animation-duration: 10s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

@keyframes heartAnimation{
0%{
  transform: scaleX(0);

}
50%{
  transform: scaleX(1);
}
50.1%{
  transform: scaleX(1);
}
100%{
  transform: scaleX(0);
}

}




  /* レスポンシブ処理 最後の行でOK*/
  
  @media screen and (max-width: 768px){

body{
  width: 100%;
  margin:10%
}

header nav ul{
  display: block;
  margin-top: 10px;
  text-align: left;
  padding-left: 30%;
    }
    

.oya01{
  display: inline-block;
  width: 100%;
  margin: auto;
}

.taikai{
  width: 50%;
  margin: auto;
    }


.pdf{
  width: 100%;
  margin: auto;
}

.park-info{
  width: 100%;
  margin: auto;
}

.information{
  display: block;
  width: 100%;
  margin: auto;
}

tr,th,td{
  display: block;
}
td{
  text-align: center;
}
}