/*webfont*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/*全体*/
body{
    font-family: Ryumin Medium KL, sans-serif;
    line-height: 1.75;
	font-weight: 400;
    color: #ffffff;
    background: #174db1;
		@media screen and (max-width: 600px){
			font-weight: 500;
			overflow-x: hidden;
		}

}

.psm-gradient {
}

@media screen and (min-width: 601px){
		.sp-menu { display: none;}
		.sp-menu-list{ display: none;}
}

@media screen and (max-width: 600px){
		.sp-menu {
		  background-color: #00374d;
		  color: #fff;
		  width: 60px;
		  height: 60px;
		  position: fixed;
		  z-index: 999;
		  top: 0;
		  right: 10px;
		  border-radius: 0 0 10px 10px;
		}
		
		.sp-menu.close{
		  background-color: #ffffff;
		  color: #00374d;
		}
		
		.hamburger{
		  width: 30px;
		  height: 30px;
		  display: block;
		  position: relative;
		  margin: 15px;
		}

		.hamburger_bar {
		  display: block;
		  width: 100%;
		  height: 4px;
		  position: absolute;
		  left: 0;
		  background: #fff;
		  transition: all 0.3s 0s ease;
		}

		.hamburger_bar:nth-child(1) {
		  top: 0;
		}

		.hamburger_bar:nth-child(2) {
		  top: 50%;
		  transform: translateY(-50%);
		}

		.hamburger_bar:nth-child(3) {
		  top: 100%;
		  transform: translateY(-100%);
		}
		
		.close{
			.hamburger_bar {  background: #00374d;}
			.hamburger_bar:nth-child(1) { transform: rotate(-45deg); top: 40%;}
			.hamburger_bar:nth-child(2) { display: none;}
			.hamburger_bar:nth-child(3) { transform: rotate(45deg); top: 40%;}
		}
		
		.sp-menu-list.open{
		  right: 0;
		}

		.sp-menu-list{
		  background-color: rgba(0, 55, 77, 0.8);
		  color: #fff;
		  position: fixed;
		  top: 0;
		  right: -250px;
		  z-index: 100;
		  width: 250px;
		  height: 100%;
		  border-left: 2px solid #000;
		  transition: all 0.3s 0s ease;
		  
		  & ul{ width: 100%; margin: 50px 0 0;}
		  & li{ width: 100%;}
		  
		  & a{
		  	padding: 10px 20px;
		    border-bottom: 1px solid #fff;
		    display: block;
		  }
		}
}



.main-image {
	display: flex;
	background-image: url("../images/main-image-back2.jpg");
	background-size: contain;
	justify-content: end;
	position: relative;
	color: #333333;

	@media screen and (max-width: 600px){
		display: block;
		height: 180vw;
	}
	
	
	.text{ 
		width: 500px;
		position: relative;
		animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
		z-index: 50;

			  @media screen and (max-width: 1200px){
					position: absolute;
					left: 0;
					margin-left: 4%;
			  }

			@media screen and (max-width: 600px){
				position: relative;
				width: 90%;
				margin: 0 auto;
				padding: 5vw 0 0;
			}

		
		.data{
	      background-color: #174db1;
	      color: #fff;
	      display: inline-block;
	      padding: 5px 20px;
	      font-size: 22px;
	      letter-spacing: 10px;
	      margin: 20px 0 20px;
	      @media screen and (max-width: 875px){
			font-size: 2vw;
			padding: 1vw 2vw;
			letter-spacing: 5px;
	      }
	      @media screen and (max-width: 600px){
			margin: 3vw 0px;
			font-size: 2.5vw;
			padding: 1vw 2vw;
			letter-spacing: 5px;
	      }
	    }
	    .syusai{
	    	font-size: 18px;
	    	& span{ 
	    		display:inline-block;
	    		background-color: #fff;
	    		padding: 2px 10px;
	    		margin: 0 10px 0 0;
	    	}
	    	@media screen and (max-width: 875px){
 				 text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
	    	}
	    	@media screen and (max-width: 600px){
	    		font-size: 16px;
	    	}
	    }
	    .site{
	    	margin: 10px;
	    	font-size: 14px;
	    	& br{ display: none;}
	    	& span{ display: block;}

	    	@media screen and (max-width: 875px){
	    		font-size: 12px;
 				 text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
	    	}
	    	@media screen and (max-width: 600px){
	    		font-size: 10px;
		    	& i{ display: none;}
		    	& br{ display: block;}
	    		& span{ display: block; margin-bottom: 1em; }
	    	}

	    }
	    .read{
	    	font-size: 16px;
	    	margin: 30px 10px;
	    	@media screen and (max-width: 875px){
	    		font-size: 14px;
 				 text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
	    	}
	    	@media screen and (max-width: 600px){
		    	display: none;
		    }
	    }
		
	}
	.image{ width: 50%;  animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
		& img{ display: block;}
		@media screen and (max-width: 875px){
			width: 70%;
		}
		@media screen and (max-width: 600px){
			width: 100%;
	        position: absolute;
	        top: 50vw;
	        right: 0px;
	        z-index: 25;
		}
	}
}



.lower-image {
	display: flex;
	background-image: url("../images/main-image-back.jpg");
	background-size: cover;
	justify-content: end;
	position: relative;
	
	 @media screen and (max-width: 1200px){
		display: block;
	 }
	@media screen and (max-width: 600px){
		display: block;
	}

	
	& h1{
		  font-size: 40px;
		  padding: 30px 0 30px;	
		&:before{ display: none;}
		
		 @media screen and (max-width: 1200px){ font-size: 28px;}
		 @media screen and (max-width: 600px){ font-size: 22px;}
	}
	
	.text{ 
		width: 500px;
		margin-right: 50%;
		position: relative;
		animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
		z-index: 50;

			  @media screen and (max-width: 1200px){
					position: relative;
					left: 0;
					margin-left: 4%;
					margin-right: 0;
			  }

			@media screen and (max-width: 600px){
				position: relative;
				width: 60%;
				margin: 0 0 0 4%;
				padding: 0;
			}





		
	}

}



h1{
	font-weight: bold;
	font-size: 16px;
	position: relative;
	z-index: 2;
	width: 670px;
	line-height: 1.4;
	padding: 200px 0 0;
			@media screen and (max-width: 1200px){
				padding: 15vw 0 0;
				width: 540px;
			}
			@media screen and (max-width: 875px){
				font-size: 2vw;
			}
			@media screen and (max-width: 600px){
				width: 100%;
				margin: 0 atuo;
				padding: 5vw 0 0;
				font-size: 2.5vw;
			}


	& span{
		display: inline-block;
		z-index: 2;
	    position: relative;
	        margin: 0 0 15px;
		}

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

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

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


	  }
}

.member-list{
	width: 100%;
	margin: 0 auto 100px;
	
	& td:first-child{ font-size: 20px;
		@media screen and (max-width: 600px){
			font-size: 17px;
		}
	}

	& td:nth-child(2){
		@media screen and (max-width: 600px){
			font-size: 14px;
		}	
	}

	& td:nth-child(3){ text-align: center;}
	
	& th {
		@media screen and (max-width: 600px){
			font-size: 12px;
		}	
	}
	
	& td,
	& th {
		border-bottom: 1px solid #ddd;
		padding: 10px 40px;
		vertical-align: middle;
		text-align: left;
		@media screen and (max-width: 600px){
			padding: 5px;
		}
		
		.link_set{
			display: flex;
			& a { margin: 0 5px;
				&:hover{ opacity: 0.65;}
			}
		}
		& img{ display: block;
		
			@media screen and (max-width: 600px){
				width: 28px;
				height: auto;
			}
		
		}
	}
}


.hanpu-list{
	width: 100%;
	margin: 0 auto 100px;
	
	& a{ text-decoration: underline; color: #f097de;}
	
	.hatu{
		background-color: #ec4ab4;
	    color: #fff;
	    font-size: 16px;
	    padding: 2px 7px;
	    margin: 0 5px 0 0;
	    border-radius: 10px;
	    @media screen and (max-width: 920px){
	    	font-size: 14px;
	    }
    }
	
	& td:nth-child(2){ font-size: 20px;
		@media screen and (max-width: 600px){
			font-size: 17px;
		}
	}

	& td:nth-child(2){
		@media screen and (max-width: 600px){
			font-size: 15px;
		}	
	}

	
	
	& td,
	& th {
		border-bottom: 1px solid #ddd;
		padding: 10px 10px;
		vertical-align: middle;
		text-align: left;
		@media screen and (max-width: 920px){
			padding: 5px;
			display: block;
			border:none;
		}
	}
	@media screen and (max-width: 920px){
		display: block;
		 width: 100%;
		& tr, & tbody{ display: block; width: 100%; }
		& tr:first-child{ display:none;}
		& tr{
			color: #333;
			background-color: #fff;
			padding: 10px;
			border: 1px solid #ddd;
			border-radius: 10px;
			margin-bottom: 10px;
		}
		& th{ display: none; }
	}


}


.wrap {
  max-width: 1000px;
  width: 92%;
  margin: 0 auto;
}

.read_sp{ display: none;
	@media screen and (max-width: 600px){
		display: block;
       font-size: 13px;
       padding: 20vw 0 0;
       text-align: center;

	}
}

.contents{
	& h2 {
		font-size: 32px;
		font-weight: 900;
		text-align: center;
		margin: 100px 0 50px;
		@media screen and (max-width: 600px){
			font-size: 26px;
		}
		
		& span{
			position: relative;
		
			&:before{
				content: "";
		        display: block;
		        width: 100px;
		        height: 1px;
		        background-color: #ffffff;
		        position: absolute;
		        top: 25px;
		        left: -110px;
			}
			&:after{
				content: "";
		        display: block;
		        width: 100px;
		        height: 1px;
		        background-color: #ffffff;
		        position: absolute;
		        top: 25px;
		        right: -110px;
			}

			@media screen and (max-width: 600px){
				&:before{ width: 75px; left: -85px; top: 20px;}
				&:after{ width: 75px; right: -85px; top: 20px;}
			}
		}
	}
	
	.h2-bottom{
		font-size: 14px;
		text-align: center;
		margin: -50px auto 50px;
	}
	
}
.webclap{
	padding: 75px 0 0;
}

.webclap + p{
	padding-bottom: 50px;
	text-align: center;
	@media screen and (max-width: 600px){
		font-size: 12px;
	}
}

.webclupbutton{
	width: 100%;
  height: 50px;
  text-align: center;
  margin: 30px auto 10px;
  font-weight: bold;
  font-size: 24px;
  background-color: #83d7d8;
  color: #fff;
  border: none;
  

}

.webclap button.newiine_btn{
	width: 100%;
  height: 50px;
  text-align: center;
  margin: 30px auto 10px;
  font-weight: bold;
  font-size: 24px;
  background-color: #83d7d8;
  color: #fff;
  border: none;
   text-shadow: -1px -1px 1px #2e5859;
  border-bottom: 3px solid #357071;
}

.webclap button.newiine_btn:hover,
.webclupbutton:hover{
  background-color: #43a9aa;
  color: #fff;
  border-bottom: 3px solid #357071;

}
.newiine_count{
 background-color: #fff;
  border-radius: 25px;
  font-size: 80%;
  padding: 5px 0px 3px;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  color: #357071;
  text-shadow: none;
  display: inline-block;
  width: 45px;
  height: 33px;
  border: 1px solid #467c7d;
}
.newiine_thanks{
   text-shadow: none;
   text-align: center;
}

footer{
	background-color: #00374d;
	color: #fff;
	padding: 10px;
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

 

.sakura {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  position: absolute;
  
  @media screen and (max-width: 600px){
	  overflow-x: hidden;
	  height: 600px;
  }
  
}
.sakura li {
	width: 18px;
	position: absolute;
	list-style: none;
	top: -50px;
	animation: fall 4s linear infinite, rotate1 2s ease-in-out infinite alternate;
	& img{ width: 15px; height: auto;}
	@media screen and (max-width: 600px){
		& img{ width: 10px; height: auto;}
	}
}
@keyframes fall {
	to {
		top: 120%;
	}
}
@keyframes rotate1 {
	from {
		transform: translateX(0px) rotate(0deg);
	}
	to {
		transform: translateX(200px) rotate(-80deg) rotateX(180deg);
	}
}
@keyframes rotate2 {
	from {
		transform: translateX(200px) rotate(-45deg);
	}
	to {
		transform: translateX(0px) rotate(0deg);
	}
}
.sakura li:nth-child(1) {
	left: 0;
	animation: fall 10s linear infinite, rotate1 3s ease-in-out infinite alternate;
}
.sakura li:nth-child(2) {
	left: 5vw;
	animation: fall 15s linear infinite, rotate1 2s ease-in-out infinite alternate;
}
.sakura li:nth-child(3) {
	left: 15vw;
	animation: fall 9s linear infinite, rotate1 3.5s ease-in-out infinite alternate;
}
.sakura li:nth-child(4) {
	left: 30vw;
	animation: fall 8s linear infinite, rotate2 4s ease-in-out infinite alternate;
}
.sakura li:nth-child(5) {
	left: 40vw;
	animation: fall 10s linear infinite, rotate1 4s ease-in-out infinite alternate;
}
.sakura li:nth-child(6) {
	left: 55vw;
	animation: fall 11s linear infinite, rotate2 3s ease-in-out infinite alternate;
}
.sakura li:nth-child(7) {
	left: 65vw;
	animation: fall 7s linear infinite, rotate2 3.5s ease-in-out infinite alternate;
}
.sakura li:nth-child(8) {
	left: 50vw;
	animation: fall 7s linear infinite, rotate1 3s ease-in-out infinite alternate;
}

.title-vote-bnr {
  margin: 50px auto;
  text-align: center;
  
  @media screen and (max-width: 600px){
  	margin-left: -20px;
  	& p{
  		text-align: left;
  		margin-left: 20px;
  		width: 94%;
  		font-size: 12px;
  	}
  }

}
.snow-monkey-form{
		padding-bottom: 50px;
		}
.snow-monkey-form button.smf-button-control__control{
		font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシック", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
		background-color: #83d7d8;
		color: #fff;
		border-bottom: 3px solid #2e5859;
		background-image: none;
		text-shadow: -1px -1px 1px #2e5859;
		padding: 5px 0 3px;
		width: 100%;
		  height: 50px;
		  text-align: center;
		  margin: 30px auto 10px;
		  font-weight: bold;
		  font-size: 24px;
}

.smf-action{
	display: flex;
	justify-content: space-around;
	.smf-button-control{ width: 48%; display: block;}
}



.kikaku{
	 .kikaku-read{ text-align: center;}
	 .row {
	    display: flex;
	    justify-content: space-between;
	    margin: 30px auto;

		@media screen and (max-width: 600px){
			flex-wrap: wrap;
		}	
	  }
	.clm{ width: 46%;
		@media screen and (max-width: 600px){
			width: 100%;
			margin-bottom: 15px;
		}	

	
		& p{ padding:0 0.5em}
	
		& h3{
			background-color: #fff;
			color: #174db1;
			border-bottom: 3px solid #3a3571;
			display: block;
			padding: 0.5em 1em;
			margin-bottom: 10px;
			font-weight: bold;
		}
		
		& p a{
			text-decoration: underline;
			color: #43a9aa;
			font-weight: 700;
			margin-top: 10px;
			display:inline-block;

			@media screen and (max-width: 600px){
				margin-bottom: 30px;
			}

		}

	}

	
}

#gallery-list{
	display: flex;
	justify-content: space-around;
	& img{ width: 15%; cursor: pointer;}
	@media screen and (max-width: 600px){
		& img{ width: 24%;}
	}
}