﻿@charset "utf-8";
/* CSS Document */

/* top layout
-----------------------------------------------------*/

#mainimage {
	text-align:center;
	margin-bottom:70px;
}
@media screen and (max-width: 700px) {
	#mainimage {
		margin-bottom:30px;
	}
}

#leftArea,
#rightArea {
	width:48%;/*456px*/
}
#leftArea {
	float:left;
}
#rightArea {
	float:right;
}

#link {
	clear:both;
}
@media screen and (max-width: 950px) {

}

@media screen and (max-width: 700px) {
	#leftArea,
	#rightArea {
		float:none;
		width:100%;
	}

}

/*

-----------------------------------------------------*/
#mainimage {
	position:relative;
	font-size:0;
}
#mainimage img {
	width:100%;
}

#mainimage:before {
	display:block;
	content:'';
	position:absolute;
	left:0;
	bottom:-111px;
	background:url(image/top_bg_left.png) no-repeat;
	width:191px;
	height:111px;
	z-index:-3;
}
#mainimage:after {
	display:block;
	content:'';
	position:absolute;
	right:0;
	bottom:-158px;
	background:url(image/top_bg_right.png) no-repeat;
	width:132px;
	height:158px;
	z-index:-3;
}
@media screen and (max-width: 700px) {
	#mainimage:before,
	#mainimage:after {
		background-size: contain;
	}
	#mainimage:before {
		width: 30%;
	}
	#mainimage:after {
		width: 20%;
	}
}
@media print {
	#mainimage {
		max-width: 100%;
	}
	#mainimage img {
		max-width: 100%;
		width: auto;
	}
}

#slider ul {
	list-style:none;
	margin:0;
	padding:0;
}


section {
	margin-bottom:50px;
}


#news {
	padding:20px;
	background:#f3f3f3;
}
#news h2 {
	margin-bottom:20px;
	padding-bottom:10px;
	border-bottom:1px solid #656565;
	line-height: 1;
}

#news dl {
	font-size:15px;
	height:137px;
	overflow-y:scroll;
}
#news dt {
	font-weight:bold;
}

#news dt {
	float:left;
	width:10em;
}
#news dd {
	padding-left:10em;
}
#news dd:after {
	display:block;
	content:'';
	clear:left;
}
#news dt,
#news dd {
	padding-bottom:6px;
}
@media screen and (max-width: 350px) {
	#news dt {
		float: none;
	}
	#news dd {
		padding-left: 0;
	}
	#news dt {
		padding-bottom:1px;
	}
	#news dd {
		padding-bottom:10px;
	}
}

#report {
	margin-bottom: 70px;
}
#fb_wrap {
	width: 100%;
}
#fb_wrp iframe,
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}
@media screen and (max-width: 700px) {
	#report {
		margin-bottom: 30px;
	}

}

#schedule {
	margin-bottom:15px;
}
#schedule iframe {
	width: 100%;
}
/*
#schedule h2 {
	position: relative;
	z-index: 1;
	background: #fff;
}
#schedule iframe {
	margin-top: -20px;
}
@media screen and (max-width: 700px) {
	#schedule iframe {
		width: 99.8%;
	}
}
*/
section#members {
	background:url(image/login_bg.png) no-repeat 0 0;
	background-size:100% 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width:100%;
	/*margin-bottom: 70px;*/
	margin-bottom: 20px;
	padding:27px 30px;
	text-align:center;
}

#members .btn_login {
	margin:10px 40px 0 40px;
}
#members .btn_login a {
	display:block;
	padding:5px 0;
	background:#eee6cc;
	font-size:25px;
	color:#373737;
	text-decoration:none;
}
@media screen and (max-width: 950px) {
	#members .btn_login {
		margin:10px 1vw 0 1vw;
	}
}
@media screen and (max-width: 700px) {
	section#members {
		margin-bottom: 30px;
	}

}


#btnActivity {
	margin-bottom: 50px;
	text-align: center;
}


#link {
	margin-top:50px;
	padding:24px 40px;
	background:#eaf1e8;font-size:0;
}
#link h2 {
	margin-bottom:20px;
	font-size:16px;
}
#link ul {
	list-style:none;
	display:inline-block;
	width:33.33%;
	font-size:16px;
	vertical-align:top;
}

#link li {
	margin-bottom:10px;
	
}
#link li a {
	position:relative;
	display:inline-block;
	padding:0 20px;
	color:#0b65b2;
	text-decoration:underline;
}

#link li a:before {
	position:absolute;
	top:4px;
	left:0;
	display:inline-block;
	content:'';
	margin-right:10px;
	background:url(image/arrow2.png) no-repeat 0 0;
	background-size:contain;
	width:8px;
	height:13px;
}
@media screen and (max-width: 700px) {
	#link ul {
		display:block;
		width:100%;
	}
}



/* illust
----------------------------------------------------
.negi {
	top:730px;
}
.onion {
	top:840px;
}

.cucumber {
	top:1270px;
}
.shiitake {
	top:1300px;
}

.carrot {
	top:1765px;
}
-*/



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

}

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

}
