@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

body {
	font-family: 'Noto Sans JP', "メイリオ", Meiryo, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:20px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
	color: #000;}

a:hover{
	opacity:0.5;
	transition: 0.3s all;}
	
img{
	max-width: 100%;
	 height: auto;
}

/*Hack */
.clearfix:after{
    content: ""; 
    display: block; 
    clear: both;}
.clearfix {zoom:1;}

@media screen and (min-width:768px){
	.pc_hidden{display: none;}
	.Contents{max-width: 1000px; margin: 0 auto;}
	.Container{}
	}
@media screen and (max-width:767px) {
	.sp_hidden{display: none;}
	.Contents{padding: 0 10px;}}

/*header//////////////*/

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

@-webkit-keyframes fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1}}
	
	
.kv{
	text-align: center;
	background: url(../images/bg.jpg) no-repeat center;
	background-size: cover;
	padding-top: 30px;
	padding-bottom: 150px;
	
	}

	
.kv_inner{animation: fadeIn 2s ease 0s 1 normal;  padding: 0 10px; position: relative;}


h1{
	padding: 40px 0 30px 0;
	display: inline-block;
	border-bottom: 2px solid #968038;
	margin:0 30px 30px 30px;
	}

.lead{
  font-weight: bold;
  
}
.scroll{
	position: absolute;
	left: 50%;
	bottom:-150px;
	-webkit-animation: arrow 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate;
  animation: arrow 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate;
}
@keyframes arrow {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, -20px, 0);
    transform: translate3d(-50%, -20px, 0);
  }
}

	@media screen and (min-width:768px){
		/*.kv{min-width: 1000px;}*/
	}

	@media screen and (max-width:767px) {
		.kv{
			padding-top: 10px;
			padding-bottom: 100px;
			background: url(../images/bg-sp.jpg) no-repeat top center;
			background-size: cover;}
			
		.supporter_logo{margin: 0 40px;}
		h1{padding: 15px 0px; margin: 0 20px; margin-bottom: 15px;}
		.lead{font-size: 16px; margin-bottom: 0px;}
		.scroll{bottom: -120px; width: 80px;}
		}

/*サポータ一覧*/
.supporter_bg_top{
	height: 0;
	padding-top: 4.2857%;
	background: url(../images/bg_grass_top.png) no-repeat bottom center;
	background-size: cover;
	margin-top: -4.2857%;
	z-index: 10;
}

.supporter_bg{
	padding: 60px 20px 0 20px;
	background: url(../images/bg_grass.jpg)  repeat top center;
	background-size: 100%;
}

ul.supporter_list li {
	background: url(../images/hexagon.png) no-repeat 0 0;
	background-size: 100%;
	float: left;
	display: block;
	
}
	@media screen and (min-width:768px){
    .supporter_list_wrap{
			width: 1016px;
			margin: 0 auto;
		}

		ul.supporter_list li {
			box-sizing: border-box;
			width: 246px;
			height: 228px;
			padding: 9px 0;
			
		}

		ul.supporter_list li:nth-child(5n+4){margin-left: 192px; margin-top: -110px;}
		ul.supporter_list li:nth-child(5n+5){margin-left: 139px; margin-top: -110px;}
		ul.supporter_list li:nth-child(5n+1){margin-top: -112px;}
		ul.supporter_list li:nth-child(5n+2){margin-left: 139px; margin-top: -110px;}
		ul.supporter_list li:nth-of-type(5n+3){margin-left: 139px; margin-top: -110px;}

		ul.supporter_list li:nth-child(1),
		ul.supporter_list li:nth-child(2),
		ul.supporter_list li:nth-child(3){margin-top: 0px;}
	}

.hexagon_logo{	
	display: block;
 	text-align: center;
	max-width: 120px;
	margin: 0 auto;
	position: relative;
	height: 100%;}
	
.hexagon_logo img{
	position: absolute;
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  	margin: auto;}

.hexagon_logo a{display: block; height: 100%;}

@media screen and (max-width:767px) {
	.supporter_list_wrap{
		max-width: 320px;
		margin: 0 auto;}
		
	ul.supporter_list li {
		width: 123px;
		height: 114px;}
	
	ul.supporter_list li:nth-child(2){margin-left: 74px;}
	ul.supporter_list li:nth-child(3n+3){margin-left: 100px; margin-top: -58px;}
	ul.supporter_list li:nth-child(3n+1){margin-top: -58px;}
	ul.supporter_list li:nth-child(3n+2){margin-left: 74px; margin-top: -58px;}
	
	ul.supporter_list li:nth-child(1),
		ul.supporter_list li:nth-child(2){margin-top: 0px;}
	
	.hexagon_logo{max-width: 60px;}
}


.txt{
  border: 6px solid #FFF;
  text-align: center;
  line-height: 2.5;
  max-width: 1000px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 60px 20px;
  color: #FFF;
}

.txt p{font-weight: bold;font-size: 24px;}
.txt span{font-weight: bold; font-size: 44px;}

  
  @media screen and (max-width:1000px) {
    .txt p{font-size: 2.4vw;}
    .txt span{font-size: 4.4vw;}
  }

  @media screen and (max-width:640px) {
    .txt{padding: 20px 10px; border: 3px solid #FFF; line-height: 2.2;}
    .txt p{font-size: 3.8vw;}
    .txt span{font-size: 6vw;}
  }

.pagetop{
	text-align: center;
	margin-top: 50px;
}


footer{
	padding: 10px;
	color: #FFF;
	background: #242a38;
	text-align: center;
	font-size: 12px;
}
.foot_logo{
	padding: 50px 0;
}

/*fadein/////////////////////////*/	
.fadein-y {
  opacity: 0;
  transform : translate(0, 40px);
  transition : all 1500ms;
  }

.fadein-y.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

.fadein {
  opacity: 0;
  transition : all 1500ms;
  }

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}
.box.scrollin{
		opacity : 1;
		transform : translate(0, 0);
		transition : all 0.8s;
		}