/* ******************************************************************
 *	File name		: base.css
 *	Summary			: css base
 * ******************************************************************
 */

/*

*/

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

#wrapper{
	<!--background:none;-->
	}
	#wrapper::before{
		content:" ";
		position:absolute;
		top:570px;
		left:0px;
		width:100%;
		height:100%;
		background:linear-gradient(-180deg, rgba(31,40,113,0), rgba(31,40,113,0.8), rgba(31,40,113,0.8), rgba(31,40,113,0.8), rgba(31,40,113,0.8));
		z-index:56;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#wrapper{
		padding-top:60px !important;
	}
}


/* ------------------------------------------------
   movie
------------------------------------------------- */

#movie{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:-2;
	overflow:hidden;
	}
	#youtube{
		position:absolute;
		z-index:-2;
	}
	#vimeo{
		position:absolute;
		z-index:-2;
		}
		#vimeo iframe{
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			height:100%;
	}
	#movie_cover{
		display:none;
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		background:url(../../image/base/cover.png) repeat rgba(0,0,0,0.6);
		z-index:-1;
}
/* 縦横100% */
@media (aspect-ratio:16/9), (min-aspect-ratio:16/9) and (min-width:767px) {/*横長*/
	#youtube,
	#vimeo{
	    top:50%;
		left:0px;
		width:100%;
		height:calc(100vw * 0.5625);
		transform:translateY(-50%);
	}
}
@media (max-aspect-ratio:16/9) and (min-width:767px) {/*縦長*/
	#youtube,
	#vimeo{
		top:0px;
		left:50%;
		width:calc(100vh * 1.7778);
		height:100%;
		transform:translateX(-50%);
	}
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#movie{
		position:relative;
		width:100%;
		height:0px;
		padding-top:56.25%;
		overflow:visible;
	}
	#vimeo{
		position:absolute;
		top:0px !important;
		left:0px !important;
		width:100%;
		height:100%;
	}
}

/* -----------------------------------------------------------------
   main_img
----------------------------------------------------------------- */

#main_lead{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	height:300px;
	margin:0 auto;
	padding:30px 20px 10px;
	text-align:center;
}

#main_img_sp{
	display:none;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#main_lead{
		height:180px;
	}
}

/* -----------------------------------------------------------------
   top h2
----------------------------------------------------------------- */

h2{
	display:block;
	position:relative;
	margin:0 0 10px;
	padding:0 0 5px;
	font-family: 'Literata', serif;
	font-weight:normal;
	font-size:1.55rem;
	color:#7ECEF4;
}

#pickup h2::after{
	content:" ";
	position:absolute;
	left:0px;
	bottom:0px;
	width:310px;
	height:1px;
	background:rgba(255,255,255,0.5);
}


/* -----------------------------------------------------------------
   pickup
----------------------------------------------------------------- */

#pickup{}
#pickup ul{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	list-style:none;
	width:100%;
	}
	#pickup ul li{
		position:relative;
		width:310px;
		max-width:33%;
		font-size:0.87rem;
		transition-duration:0.5s;
		}
		#pickup ul li:hover{
			-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
			-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
			box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		}
		#pickup ul li a{
			font-size:inherit;
			color:#000;
}
/* --- responsive --- */
@media(max-width:767px){
	#pickup ul li{
		max-width:100%;
		margin:0 auto 15px;
	}
}

/* -----------------------------------------------------------------
   contents_area
----------------------------------------------------------------- */

#contents_area{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	width:100%;
	margin-bottom:50px;
	}
	#contents_area #news{
		width:calc(100% - 290px);
		margin-bottom:0px;
	}
	#contents_area #topics{
		width:250px;
		margin-bottom:0px;
	}
	#contents_area #topics ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
		flex-wrap:wrap;
		list-style:none;
	}
	#contents_area #news iframe{
		width:100%;
		height:100%;
}

/* --- responsive --- */
@media(max-width:767px){
	#contents_area{
		margin-bottom:0px;
	}
	#contents_area #news{
		width:100%;
		height:250px;
		margin-bottom:20px;
	}
	#contents_area #topics{
		width:100%;
	}
	#contents_area #topics ul{
	}
	#contents_area #topics ul li{
		display:inline-block;
		width:48%;
	}
	#contents_area #topics .sp_40{
		width:calc(40% - 5px);
	}
	#contents_area #topics .sp_60{
		width:calc(60% - 5px);
	}
}

/* -----------------------------------------------------------------
   news
----------------------------------------------------------------- */

/* news_menu */
#news #news_menu{
	position:absolute;
	top:0px;
	right:0px;
	}
	#news #news_menu ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:flex-end;
		flex-wrap:wrap;
		position:relative;
		top:0px;
		left:0px;
		width:520px;
		max-width:100%;
		list-style:none;
		text-align:left;
	}
	#news #news_menu ul li{
		position:relative;
		width:70px;
		margin:0 0 0 5px;
		padding:3px 5px;
		font-size:0.70rem;
		text-align:center;
		color:#FFF;
		line-height:1.3;
		cursor:pointer;
		transition-duration:0.5s;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
	}
	#news #news_menu ul li#tm_all{
		border:1px solid #C265A4;
		color:#C265A4;
	}
	#news #news_menu ul li#tm_news{
		border:1px solid #2CA6E0;
		color:#2CA6E0;
	}
	#news #news_menu ul li#tm_event{
		border:1px solid #8DC21F;
		color:#8DC21F;
	}
	#news #news_menu ul li#tm_notice{
		border:1px solid #614C9B;
		color:#614C9B;
	}
	#news #news_menu ul li#tm_recruitment{
		border:1px solid #00B285;
		color:#00B285;
	}
	#news #news_menu ul li#tm_branch{
		border:1px solid #F49D02;
		color:#F49D02;
	}
	#news #news_menu ul li#tm_list{
		width:60px;
		}
		#news #news_menu ul li#tm_list a{
			text-decoration:none;
			color:#FFF;
			transition-duration:0.5s;
		}
		#news #news_menu ul li#tm_list a:hover{
			text-decoration:underline;
			color:#FFF;
	}
	/* active */
	#news #news_menu ul li#tm_all:hover,
	#news #news_menu ul li#tm_all.active{
		background:#C265A4;
		color:#FFF;
	}
	#news #news_menu ul li#tm_news:hover,
	#news #news_menu ul li#tm_news.active{
		background:#2CA6E0;
		color:#FFF;
	}
	#news #news_menu ul li#tm_event:hover,
	#news #news_menu ul li#tm_event.active{
		background:#8DC21F;
		color:#FFF;
	}
	#news #news_menu ul li#tm_notice:hover,
	#news #news_menu ul li#tm_notice.active{
		background:#614C9B;
		color:#FFF;
	}
	#news #news_menu ul li#tm_recruitment:hover,
	#news #news_menu ul li#tm_recruitment.active{
		background:#00B285;
		color:#FFF;
	}
	#news #news_menu ul li#tm_branch:hover,
	#news #news_menu ul li#tm_branch.active{
		background:#F49D02;
		color:#FFF;
	}
	#news #news_menu ul li#tm_list:hover,
	#news #news_menu ul li#tm_list.active{
		background:none;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#news #news_menu{
		position:relative;
		margin:0 0 15px;
	}
}

/* news_list */
#news #news_list{
	height:320px;
	background:#FFF;
	overflow-y:scroll;
}
#news #news_list ul{
	position:relative;
	width:100%;
	max-width:100%;
	list-style:none;
	}
	#news #news_list ul li{
		display:block;
		position:relative;
		width:100%;
		min-height:70px;
		padding:10px 20px 10px 120px;
		font-size:0.84em;
		color:#0D55A6;
		border-bottom:1px dashed #162985;
		line-height:1.4;
		}
		#news #news_list ul li span.news_day{
			display:block;
			position:absolute;
			top:10px;
			left:20px;
			width:105px;
			font-weight:normal;
			font-size:0.90rem;
			text-align:left;
			color:#0D55A6;
		}
		#news #news_list ul li::before{
			content:" ";
			display:-webkit-flex;
			display:flex;
			justify-content:center;
			align-items:center;
			position:absolute;
			top:35px;
			left:20px;
			width:70px;
			height:20px;
			padding-bottom:1px;
			font-size:0.77rem;
			text-align:center;
			color:#FFF;
			line-height:18px;
			-moz-border-radius:6px;
			-webkit-border-radius:6px;
			border-radius:6px;
			z-index:1;
			}
			#news #news_list ul li.news:before{
				content:"NEWS";
				border:1px solid #2CA6E0;
				color:#2CA6E0;
			}
			#news #news_list ul li.event:before{
				content:"イベント";
				border:1px solid #8DC21F;
				color:#8DC21F;
			}
			#news #news_list ul li.notice:before{
				content:"告知";
				border:1px solid #614C9B;
				color:#614C9B;
			}
			#news #news_list ul li.recruitment:before{
				content:"募集";
				border:1px solid #00B285;
				color:#00B285;
			}
			#news #news_list ul li.branch:before{
				content:"支部";
				border:1px solid #F49D02;
				color:#F49D02;
		}
		#news #news_list ul li a{
			color:#0D55A6;
			}
			#news #news_list ul li a:hover{
				text-decoration:none;
		}

/* --- responsive --- */
@media screen and (max-width:767px){
	#news #news_list ul li{
		width:100%;
		height:auto;
		min-height:70px;
		padding:10px 20px 10px 20px;
		font-size:0.77rem;
		}
		#news #news_list ul li span.news_day{
			display:block;
			position:relative;
			top:0px;
			left:0px;
			width:100%;
			font-size:0.84rem;
		}
		#news #news_list ul li::before{
			top:9px;
			left:100px;
			height:18px;
			font-size:0.70rem;
		}
}


/* news_menu */
#news #news_menu{
	position:absolute;
	top:0px;
	right:0px;
	}
	#news #news_menu ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:flex-end;
		flex-wrap:wrap;
		position:relative;
		top:0px;
		left:0px;
		width:520px;
		max-width:100%;
		list-style:none;
		text-align:left;
	}
	#news #news_menu ul li{
		position:relative;
		width:70px;
		margin:0 0 0 5px;
		padding:3px 5px;
		font-size:0.70rem;
		text-align:center;
		color:#FFF;
		line-height:1.3;
		cursor:pointer;
		transition-duration:0.5s;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
	}
	#news #news_menu ul li#tm_all{
		border:1px solid #C265A4;
		color:#C265A4;
	}
	#news #news_menu ul li#tm_news{
		border:1px solid #2CA6E0;
		color:#2CA6E0;
	}
	#news #news_menu ul li#tm_event{
		border:1px solid #8DC21F;
		color:#8DC21F;
	}
	#news #news_menu ul li#tm_notice{
		border:1px solid #614C9B;
		color:#614C9B;
	}
	#news #news_menu ul li#tm_recruitment{
		border:1px solid #00B285;
		color:#00B285;
	}
	#news #news_menu ul li#tm_branch{
		border:1px solid #F49D02;
		color:#F49D02;
	}
	#news #news_menu ul li#tm_list{
		width:60px;
		}
		#news #news_menu ul li#tm_list a{
			text-decoration:none;
			color:#FFF;
			transition-duration:0.5s;
		}
		#news #news_menu ul li#tm_list a:hover{
			text-decoration:underline;
			color:#FFF;
	}
	/* active */
	#news #news_menu ul li#tm_all:hover,
	#news #news_menu ul li#tm_all.active{
		background:#C265A4;
		color:#FFF;
	}
	#news #news_menu ul li#tm_news:hover,
	#news #news_menu ul li#tm_news.active{
		background:#2CA6E0;
		color:#FFF;
	}
	#news #news_menu ul li#tm_event:hover,
	#news #news_menu ul li#tm_event.active{
		background:#8DC21F;
		color:#FFF;
	}
	#news #news_menu ul li#tm_notice:hover,
	#news #news_menu ul li#tm_notice.active{
		background:#614C9B;
		color:#FFF;
	}
	#news #news_menu ul li#tm_recruitment:hover,
	#news #news_menu ul li#tm_recruitment.active{
		background:#00B285;
		color:#FFF;
	}
	#news #news_menu ul li#tm_branch:hover,
	#news #news_menu ul li#tm_branch.active{
		background:#F49D02;
		color:#FFF;
	}
	#news #news_menu ul li#tm_list:hover,
	#news #news_menu ul li#tm_list.active{
		background:none;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#news #news_menu{
		position:relative;
		margin:0 0 15px;
	}
}

/* news_list2 */
#news2 #news_list{
	height:320px;
	background:#FFF;
	overflow-y:scroll;
}
#news2 #news_list ul{
	position:relative;
	width:100%;
	max-width:100%;
	list-style:none;
	}
	#news2 #news_list ul li{
		display:block;
		position:relative;
		width:100%;
		min-height:70px;
		padding:10px 20px 10px 120px;
		font-size:0.84em;
		color:#0D55A6;
		border-bottom:1px dashed #162985;
		line-height:1.4;
		}
		#news2 #news_list ul li span.news_day{
			display:block;
			position:absolute;
			top:10px;
			left:20px;
			width:105px;
			font-weight:normal;
			font-size:0.90rem;
			text-align:left;
			color:#0D55A6;
		}
		#news2 #news_list ul li::before{
			content:" ";
			display:-webkit-flex;
			display:flex;
			justify-content:center;
			align-items:center;
			position:absolute;
			top:35px;
			left:20px;
			width:70px;
			height:20px;
			padding-bottom:1px;
			font-size:0.77rem;
			text-align:center;
			color:#FFF;
			line-height:18px;
			-moz-border-radius:6px;
			-webkit-border-radius:6px;
			border-radius:6px;
			z-index:1;
			}
			#news2 #news_list ul li.news:before{
				content:"NEWS";
				border:1px solid #2CA6E0;
				color:#2CA6E0;
			}
			#news2 #news_list ul li.event:before{
				content:"イベント";
				border:1px solid #8DC21F;
				color:#8DC21F;
			}
			#news2 #news_list ul li.notice:before{
				content:"告知";
				border:1px solid #614C9B;
				color:#614C9B;
			}
			#news2 #news_list ul li.recruitment:before{
				content:"募集";
				border:1px solid #00B285;
				color:#00B285;
			}
			#news2 #news_list ul li.branch:before{
				content:"支部";
				border:1px solid #F49D02;
				color:#F49D02;
		}
		#news2 #news_list ul li a{
			color:#0D55A6;
			}
			#news2 #news_list ul li a:hover{
				text-decoration:none;
		}

/* --- responsive --- */
@media screen and (max-width:767px){
	#news2 #news_list ul li{
	}
	#news2 #news_list ul li{
		width:100%;
		min-height:0px;
		padding:10px 20px 10px 20px;
		font-size:0.77rem;
		}
		#news2 #news_list ul li span.news_day{
			display:block;
			position:relative;
			top:0px;
			left:0px;
			width:100%;
			font-size:0.84rem;
		}
		#news2 #news_list ul li::before{
			top:9px;
			left:100px;
			height:18px;
			font-size:0.70rem;
		}
}

/* -----------------------------------------------------------------
   topics
----------------------------------------------------------------- */

#topics{
	position:relative;
	}
	#topics ul{
		list-style:none;
	}
	#topics ul li{
		margin:0 0 18px;
		text-align:center;
	}
	#topics ul li:last-child{
		margin:0px;
}

#topics2{
	position:relative;
	padding-top:38px;
	}
	#topics2 ul{
		list-style:none;
	}
	#topics2 ul li{
		text-align:center;
	}
	#topics2 ul li:last-child{
		margin:0px;
}

/* -----------------------------------------------------------------
   twitter
----------------------------------------------------------------- */

#twitter{
	position:relative;
	padding-top:38px;
	}
	#twitter h2{
		display:none;
	}
	#twitter #tweet{
		background:#FFF;
		height:320px;
		overflow-y:scroll;
	}
	#twitter #tweet .twitter-timeline{
		border:none !important;
}
/* --- responsive --- */
@media screen and (max-width:767px){
	#twitter{
		position:relative;
		padding-top:0px;
	}
	#twitter h2{
		display:block;
	}
}

/* -----------------------------------------------------------------
   top_banner
----------------------------------------------------------------- */

#top_banner{
	margin:0 0 35px;
	}
	#top_banner ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
		flex-wrap:wrap;
		list-style:none;
	}
	#top_banner ul li{
		width:50%;
	}
	#top_banner ul li.small{
		width:25%;
	}
	#top_banner ul li a:hover{
		opacity:0.8;
		transition-duration:0.5s;
}
/* --- responsive --- */
@media screen and (max-width:767px){
	#top_banner ul li{
		width:100%;
		margin:0 0 10px;
	}
}

.video{
	height: 400px !important;
}


.bn_attention{
	display:none;
	width:70%;
	margin:0 auto 30px;
	}
	.bn_attention:hover{
		opacity:0.8;
}
/* --- responsive --- */
@media screen and (max-width:918px){
	.bn_attention{
		display:block;
		width:100%;
		margin:0 0 20px 0;
	}
}


/* -----------------------------------------------------------------
   main_slide
----------------------------------------------------------------- */

#main_slide{
	position:relative;
	width:1000px;
	height:334px;
	margin:0 auto 45px;
	background:#000;
	border:2px solid #FFF;
	overflow:hidden;
	}
	#main_slide.slide_count_one{
		width:838px;
	}
	#main_slide ul{
		position:relative;
		list-style:none;
	}
	#main_slide ul li{
		position:absolute;
		right:0px;
		width:838px;
		z-index:0;
	}
	#main_slide ul li.disp_00{
		animation:disp_00 2.0s ease 0s forwards;
		z-index:10;
	}
	#main_slide ul li.disp_01{
		animation:disp_01 1.0s ease 0s forwards;
		z-index:9;
	}
	#main_slide ul li.disp_02{
		animation:disp_02 1.0s ease 0s forwards;
		z-index:8;
	}
	#main_slide ul li.disp_03{
		animation:disp_02 1.0s ease 0s forwards;
		z-index:1;
	}
	#main_slide ul li.disp_reverse_01{
		animation:disp_reverse_01 1.0s ease 0s forwards;
		z-index:9;
	}
	#main_slide ul li.disp_reverse_02{
		animation:disp_reverse_02 1.0s ease 0s forwards;
		z-index:8;
}

@keyframes disp_00{
	0%   {right:162px;}
	50%  {right:100%;z-index:10;}
	51%  {right:100%;z-index:0;}
	100% {right:0%;z-index:0;}
}
@keyframes disp_reverse_01{
	0%   {right:100%;}
	100% {right:162px;}
}
@keyframes disp_reverse_02{
	0%   {right:162px;}
	100% {right:81px;}
}
@keyframes disp_01{
	0%   {right:81px;}
	100% {right:162px;}
}
@keyframes disp_02{
	0%   {right:0px;}
	100% {right:81px;}
}

#slide_prew,
#slide_next{
	content:" ";
	position:absolute;
	top:calc(50% - 15px);
	width:20px;
	height:30px;
	z-index:999;
	cursor:pointer;
	}
	#slide_prew{
		left:0px;
		transform:rotate(180deg);
	}
	#slide_next{
		right:0px;
	}
	#slide_prew::after,
	#slide_next::after{
		content:" ";
		position:absolute;
		top:calc(50% - 10px);
		left:0px;
		border:10px solid transparent;
		border-left:10px solid #FFF;
	}
	#slide_prew:hover,
	#slide_next:hover{
		opacity:0.6;
}

#main_slide.slide_count_one #slide_prew,
#main_slide.slide_count_one #slide_next{
	display:none;
}

#main_slide #hover_img{
	position:absolute;
	top:23px;
	right:31px;
	width:206px;
	height:286px;
	z-index:10;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
	overflow:hidden;
}

/* --- responsive --- */
@media screen and (max-width:1040px){
	#main_slide{
		width:838px;
		max-width:calc(100% - 40px);
		height:334px;
		}
		#main_slide ul li{
			width:100%;
	}

	@keyframes disp_00{
		0%   {right:0%;}
		50%  {right:100%;z-index:10;}
		51%  {right:100%;z-index:0;}
		100% {right:0%;z-index:0;}
	}
	@keyframes disp_reverse_01{
		0%   {right:0px;}
		100% {right:0px;}
	}
	@keyframes disp_reverse_02{
		0%   {right:0px;}
		100% {right:0px;}
	}
	@keyframes disp_01{
		0%   {right:0px;}
		100% {right:0px;}
	}
	@keyframes disp_02{
		0%   {right:0px;}
		100% {right:0px;}
	}
}
/* --- responsive --- */
@media screen and (max-width:918px){
	#main_slide{
		width:100% - 20px;
		height:calc(41vw - 20px);
		margin:15px auto 5px;
	}
	#main_slide #hover_img{
		display:none;
	}
	#mypage_btn{
		width:90%;
		margin:0 auto 15px;
	}
}