@charset "UTF-8";

/*---------------------
		main
---------------------*/


/*top*/
#top{
	background-image: url("../img/img_bgMain.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #000;
	position: relative;
}
#top:before{
	content: '';
	position: absolute;
	bottom: -20px;
	width: 100%; 
	height: 100%;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(121,121,121,0.5) 70%, rgba(0,0,0,0) 90%);
}
#topInner{padding: 125px 0;}
#top .titleBox{
	width: 400px;
	margin: 0 auto;
    padding: 40px 0;
}
#top h2{font-size: 5.5rem; font-weight: 600;color: #fff; text-align: center; background: none;}
/*#top h2,
#top p{color: #fff;}
#top h2{font-size: 2.2rem; background-color: #E9470B; margin-bottom: 1rem; text-align: center; letter-spacing: 0.4rem;}
#top p{font-size: 5.2rem; line-height: 5.2rem; font-weight: 600;}
#top .txt01{line-height: 6rem;}
#top .txt01 span{font-size: 7.5rem;}
#top .txt03{font-size: 8.8rem; line-height: 8rem;}
#top .txt04{font-size: 2.4rem; line-height: 2rem;}
#top .txt04 .kome{font-size: 1rem; font-weight: 500;}*/



/* main */
#main{
	background-image: url("../img/img_bgCenter.png");
	background-repeat: no-repeat;
	background-position: center 25%;
}
#mainInner{
	background-image: url("../img/img_bgLeft.png"),url("../img/img_bgRight.png");
	background-repeat: no-repeat, no-repeat;
	background-position: 5% 0, 95% 40%;
	position: relative;
}
#main .bgimg{ pointer-events: none;}
#main .bgimg01{position: absolute;}
#main .bgimg02{position: absolute;}

#main .menu{max-width: 1200px; margin: 40px auto;}
#main .menu li{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	justify-content: center;
	
	background-color: #E9470B;
	width: 19%;
	text-align: center;
    border-radius: 5px;
}
#main .menu li p{line-height: 1;}
#main .menu img{
	height: 35px; 
	margin: 0 auto;
}
#main .menu a{
	font-weight: 600;
    font-size: 1.2rem;
    color: #fff;
	padding: 10px;
}


/*news*/
#news{max-width: 1000px; width: 100%; margin: 80px auto;}
#news h2{text-align: center}
#news ul{width: 75%; margin: 20px auto;}
#news li{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	
	border-bottom: solid 1px #305097;
	padding: 10px 60px;
}
#news li:first-child{border-top: solid 1px #305097;}
#news .newsDate{width: 25%;}
#news .more{float: right; color: #305097; font-weight: 600;font-size: 1.4rem; line-height: 3rem;}


/*topic*/
#topic{max-width: 1000px; width: 100%; margin: 80px auto;}
#topic h2{text-align: center; font-size: 3.5rem; color: #E9470B;}
#topic p{text-align: center; line-height: 2.2rem;}
#topic p.secondary{text-align: right; line-height: 1.6rem;}


/*gallery*/
#gallery{width: 100%; margin: 80px auto 0;}
#gallery img{width:100%; height: 195px;}
#gallery ul{position: relative; z-index: -1;}
#gallery ul:after{
	background: -webkit-linear-gradient(transparent 70%, #fff 100%);
	background: -o-linear-gradient(transparent 70%, #fff 100%);
	background: linear-gradient(transparent 70%, #fff 100%) ;
	
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
}



/* sns */
#sns{
	margin-top: -5px;
	background: linear-gradient(180deg, rgba(219,219,219,1) 0%, rgba(230,230,230,1) 50%, rgba(255,255,255,1) 70%, rgba(219,219,219,1) 100%);
}
#snsInner{
	max-width: 1000px; 
	width: 100%; 
	margin: 0 auto;
	padding: 80px 0;
	position: relative;
}
/*#sns .headingOuter{text-align: center;}
#sns h2{text-align: center; color: #E9470B; margin-bottom: 20px; position: relative; background-color: #fff; display: inline-block;width: 30%; padding: 0 10px;font-size: 1.8rem;}
#sns h2:before{
	content: ""; 
	width: 4000px; 
	height: 5px; 
	background-color: #E9470B;
	position: absolute; 
	top: 50%;
    left: 50%;
	z-index: -1;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
#sns .snsBox{margin: 0 auto; width:80%; }
#sns .twitterBox,
#sns .facebookBox{text-align: center; width: 45%; }
#sns .twitterBox h3{font-size: 1.6rem; color: #00aced;}
#sns .facebookBox h3{font-size: 1.2rem; color: #305097;}
#sns iframe{background: lightblue; width: 100%; height: 400px;}
#sns a{text-align: right; margin-top: 10px; color: #305097;}*/
.fbColor{color: #1474FE}
.twColor{color: #3B9FDD}
.xColor{color: #000}
.igColor{color: #AE5692}
.noteColor{color: #55B6BC}
#sns .snsTopBox {align-items: flex-end; margin-bottom: 30px;}
#sns .snsTopBox h2 span{font-size: 1.7rem; font-weight: 600;margin-left: 20px;}
#sns .snsTopBox li{text-align: center; margin-left: 40px;}
#sns .snsTopBox p{font-weight: 600}

#sns .snsBox .snsBoxItem{width: 45%;}
#sns .snsBox h3{text-align: center; background-color: #fff; font-size: 1.6rem; padding: 10px 0;}
#sns .snsBox .timelineArea{height: 460px; background:lightgray;}

#sns .chara{position: absolute; bottom: 0; right: -200px;}




/* sp */
@media screen and (max-width:896px) {	
	#top{background-position: 70%;}
	#topInner{padding: 20px;}
	#top h2{font-size: 2.4rem;}
	
	/*---------------------
			main
	---------------------*/
	#main{background-size: 100%; background-position: center 25%;}
	#mainInner{background-image: none;}
	#main .menu {margin: 10px;}
	#main .menu li{width: 48%; margin-bottom: 10px;}
	#main .menu a{font-size: 1rem;}
	
	#news{padding: 0 5%;}
	#news ul{width: 100%;}
	#news li{flex-direction: column; padding: 10px;}
	
	#topic{padding: 0 5%;}
	#topic h2{font-size: 2.6rem;}
	
	#sns .snsTopBox {flex-direction: column; align-items: center;}
	#sns .snsTopBox h2 {text-align: center;}
	#sns .snsTopBox h2 span{margin: 0}
	#sns .snsLink {width: 90%; margin: 20px auto 0; justify-content: space-between}
	#sns .snsTopBox li{margin: 0;}

	#sns .snsBox {flex-direction: column;}
	#sns .snsBox .snsBoxItem{
		max-width: 460px;
		width: 90%;
    	margin: 0 auto 40px;
	}
	
}

/*facebook resize*/
.facebook-wrapper {
    max-width: 500px;
    margin: 0 auto;
}
.facebook-wrapper > .fb-page {
    width: 100%;
}
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
    width: 100% !important;
}