@charset "utf-8";

/*------------------------------------------------
  base
-------------------------------------------------*/
/* -----------------------------------------------------------------
   main_action
----------------------------------------------------------------- */

#main_info{
	position:relative;
	max-width:100%;
	margin:0 auto 12px;
	padding:0 20px;
}
#main_info div.logo{
	position:relative;
	top:0;
	left:40px;
}
#main_info div.illust{
	position:relative;
	width:1000px;
	height:220px;
	margin:0 auto;
	background-image: url("../../image/top/illust.png") ;
	background-repeat:no-repeat;
	top:-78px;
	left:-10px;
}
#main_info div.date{
	position:relative;
	width:900px;
	height:140px;
	margin:0 auto;
	background-image: url("../../image/top/date.png") ;
	background-repeat:no-repeat;
	top:-50px;
	left:0px;
}
#event_info{
	position:relative;
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	width:980px;
	top:-20px;
	max-width:100%;
	margin:0 auto;
}

/* --- responsive --- */
@media only screen and (max-width:767px){	
	#main_info{
		padding:5px 13px;
	}
	#main_info div.logo{
		position:relative;
		top:-40px;
		left:10px;
	}
	#main_info div.illust{
		position:relative;
		width:100%;
		height:155px;
		background-image: url("../../image/top/illust2.png") ;
		background-size: 100%;
		top:-75px;
		left:0px;
	}
	#main_info div.date{
		position:relative;
		width:100%;
		height:155px;
		background-image: url("../../image/top/date2.png") ;
		background-size: 100%;
		top:-50px;
		left:0px;
	}
	#event_info{
		display:block;
		text-align:left;
	}
	#event_info div{
		margin:0 0 20px;
	}
}

/* ------------------------------------------------
   apply_btn
-------------------------------------------------*/

#apply_btn{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	width:1040px;
	max-width:100%;
	margin:0 auto 35px;
	padding:0 20px;
	}
	#apply_btn div{
		max-width:49%;
	}
	#apply_btn a{
		transition-duration:0.5s;
	}
	#apply_btn a:hover{
		opacity:0.7;
}
/* --- responsive --- */
@media only screen and (max-width:767px){	
	#apply_btn{
		display:block;
	}
	#apply_btn div{
		max-width:80%;
		margin:10px auto;
	}
}

/* ------------------------------------------------
   supporters
-------------------------------------------------*/

#supporters{
	position:relative;
	width:1000px;
	height:auto;
	margin:50px auto 55px;
	border-bottom:2px solid #ec758a;
	}
	#supporters .supporters_title{
		padding:10px;
		border-top:2px solid #ec758a;
		border-bottom:2px solid #ec758a;
	}
	#supporters h2{
		text-align:center;
		margin: 0 auto;
	}
	#supporters p{
		text-align: center;
		margin: 5px 0;
}

#supporters ul.supporters_list{
	width: 100%;
	height: auto;
	list-style: none;
	display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
	}
	#supporters ul.supporters_list:nth-of-type(1){
		border-bottom:2px dotted #ec758a;
	}
#supporters .supporters_list li{
	display: flex;
	justify-content: center;
	width: 490px;
	height: auto;
	margin:0px auto 10px;
	padding:20px 0 10px;
	float: left;
	text-align: center;
	align-items: center;
	}
#supporters .supporters_list img{
		max-width: 233px;
		height: auto;
		text-align: center;
		margin:0px auto;
	}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#supporters{
		border-bottom:none;
	}
	#supporters .supporters_title{
		margin:0 0 10px;
	}
	#supporters p{
		font-size:0.77rem;
		text-align:center;
	}
	#supporters ul.supporters_list:nth-of-type(1){
		border-bottom:none;
	}
	#supporters .supporters_list li{
		display: block;
		width: 90%;
		margin:10px auto 10px;
		padding:0px 0 10px;
		float:none;
		text-align: center;
		border-bottom:2px dotted #ec758a;
		line-height: 2rem;
	}
}


/* ------------------------------------------------
   message
-------------------------------------------------*/

#message{
	position:relative;
	width:920px;
	margin:0 auto 40px;
	padding:0 20px;
	}
	#message h2{
		position:relative;
		margin:0 auto 30px;
		width:252px;
		height:60px;
		padding:15px 0;
		font-weight:normal;
		font-size:1.6rem;
		text-align:center;
		color:#fff;
		background-image: url("../../image/top/message.png");
		background-repeat: no-repeat;
	}
	#message p{
		margin:0 0 20px;
		font-weight:bold;
		font-family: 'M PLUS Rounded 1c', sans-serif;
		font-size:0.94rem;
		line-height:1.75;
}

/* --- responsive --- */
@media only screen and (max-width:1000px){
	#message{
		position:relative;
		height:auto;
		margin:0 auto 40px;
		padding:30px 40px 30px 40px;
		background:none;
		border-top:3px dotted #2093D3;
		border-bottom:3px dotted #2093D3;
		}
		#message h2{
			padding-right:0px;
		}
		#message p{
			margin:0 0 15px;
			font-weight:bold;
			font-family:'M PLUS Rounded 1c', sans-serif;
			font-size:0.94rem;
		}
		#message p br.pc{
			display:none !important;
		}
}
@media only screen and (max-width:767px){
	#message{
		padding:30px 20px;
	}
	#message h2{
		font-size:1.2rem;
	}
	#message h2 span{
		font-size:0.87rem;
	}
	#message p{
		font-size:0.77rem;
		line-height:1.5;
	}
}


/* ------------------------------------------------
   sns_area　SNS投稿表示エリア
-------------------------------------------------*/
#sns_area{
	display: flex;
	justify-content: space-between;
	width: 1040px;
	height:auto;
	margin:0 auto;
	padding:10px 0;
	overflow: hidden;
}

#sns_area div{
	width: 300px;
	margin:0 auto;
	text-align: center;
}

.sns_area{
	width: 333px;
	height:auto;
	margin:0 auto;
	padding:0;
}
.iframe-wrap {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 300px;
	padding-top: 56.25%;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	border:2px solid #ccc; 
}
.iframe-wrap iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
    display:block;
}

.sns_icon{
	display: inline-block;
	width: auto;
	height: 45px;
	float: left;
}

.sns_icon div{
	width: auto;
	margin:0 auto;
	text-align: center;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#sns_area{
		display: block;
		padding:10px 20px 20px;
		text-align: center;
		width: 100%;
		height:auto;
	}
	#sns_area div{
		width: 100%;
		padding:0;
	}
	#sns_area .iframe-wrap{
		display: block;
		margin: 10px 0 30px;
		padding:20px;
	}
	.sns_icon{
		display: block;
	}
}

/* ------------------------------------------------
   bnr_area
-------------------------------------------------*/

#bnr_area{
	width:1000px;
	max-width:100%;
	margin:30px auto 40px;
}
#bnr_area .support{
	width:700px;
	height:100px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color:#ed758b;
	margin:10px auto;
}
#bnr_area .contact{
	width:700px;
	height:100px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color:#5db7e8;
	margin:10px auto;
}
#bnr_area:hover{
	opacity: 0.7;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#bnr_area{
		display: block;
		margin:0px auto 10px;
		padding:10px 20px;
	}
	#bnr_area img{
		margin:5px 0;
	}
	
	#bnr_area .support{
		width:100%;
		height:70px;
		margin:20px 0 0;
	}
	#bnr_area .contact{
		width:100%;
		height:70px;
	}
}

/* ------------------------------------------------
  information
------------------------------------------------- */

#information{
	width:1040px;
	max-width:100%;
	margin:0 auto 0;
	padding:0 20px 0;
	text-align:left;
	}
	#information p{
		margin:0 0 15px;
		font-size:0.87rem;
		line-height:1.5;
		}
		#information p:last-child{
			margin:0 0 0px;
	}
	#information b{
		display:inline-block;
		margin:0px 0 5px 0;
		padding:4px 20px 6px;
		font-size:0.92rem;
		line-height:1.5;
		background:#181777;
		color:#FFF;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#information p{
		font-size:0.77rem;
	}
}