@charset 'UTF-8';

div#topBg {
	position:relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transition:all 0.5s linear;
	background-image:url('../images/front/head_bg.jpg');
}
div.yokojima {
	position: fixed;
	top: 0; 
	left: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background: url('../images/front/yokojima.png');
	z-index: -1;
}
div#header {
	position:absolute;
	bottom:0;
	left:0;
	z-index:9999;
}
div#top {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:80%;
	max-width:1200px;
	padding:0 10%;
	margin:0 auto;
}
div#topSearch {
	float:left;
	width:60%;
	font-size:1.6em; font-size:1.6rem;
}
div.searchBox {
	width:70%;
	max-width:400px;
	margin:120px auto 0;
}
div.searchBox form {
	position:relative;
	width:80%;
	height:50px;
	margin:0 auto;
}
div#topSearch form input {
	position:absolute;
}
div#topSearch form input:first-child {
	width:78%;
	height:44px;
	color:#969696;
	line-height:44px;
	border:2px solid #8fb01d;
	border-radius:5px;
	padding-right:20%;
	padding-left:2%;
}
div#topSearch form input:last-child {
	top:5px;
	right:2px;	
}
div.searchBox > img {
	margin:0 auto 10px;
}
div.searchBox a {
	width:60%;
	margin:20px auto 0;
}

div#topCont {
	float:left;
	width:36%;
	min-height:200px;
	font-size:1.4em; font-size:1.4rem;
	background-color:rgba(255,255,255,0.8);
	padding:50px 1% 100px;
	margin-left:2%;
}
div.contBox {
	width:100%;
	max-width:575px;
	margin:0 auto;
}
div.contBox > div {
	clear:both;
	margin-bottom:10px;
}
div.contBox a {
	position:relative;
	overflow:hidden;
	color:#222;
}
div.contBox p {
	position:absolute;
	bottom:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	width:98%;
	background-color:rgba(255,255,255,0.8);
	padding:0 1%;
	margin:0;
}
div.contBox div.midl a,
div.contBox div.btm a {
	float:left;
	width:49%;
	margin-left:2%;
}
div.contBox div.btm a {
	width:32%;
}
div.contBox div.midl a:first-child,
div.contBox div.btm a:first-child {
	margin-left:0;
}
div.contBox a:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	-moz-opacity: 1;
	-khtml-opacity: 1;
}
div.contBox a img {
	-moz-transition: -moz-transform 4s linear;
	-webkit-transition: -webkit-transform 4s linear;
	-o-transition: -o-transform 4s linear;
	-ms-transition: -ms-transform 4s linear;
	transition: transform 4s linear;
}
div.contBox a:hover img {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}
div.contBox > a {
	float:right;
	width:32%;
	color:#222;
}
div.contBox > a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
}

.topWrap {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
ul#news {
	width:60%;
	background-color:#ece8d3;
	padding:20px 0;
}
ul#news li {
	border-top:1px solid #fff;
	border-bottom:1px solid #999;
	padding:15px 30px;
}
ul#news li:first-child {
	border-top:0;
	padding-top:0;
	padding-bottom:0;
}
ul#news li:last-child {
	border-bottom:0;
	padding-bottom:0;
}
ul#news a {
	color:#222;
}
ul#news a.btn {
	float:right;
	width:59%;
	color:#222;
}
ul#news .left {
	width:30%;
	text-align:center;
	font-size:1.2em; font-size:1.2rem;
	color:#fff;
}
ul#news .left p {
	background-color:#008a4b;
	margin:0 0 5px;
}
div.newImg {
	height:175px;
	overflow:hidden;
	border-radius:5px;
}
div.newImg img {
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
ul#news .right {
	overflow:hidden;
	width:66%;
	font-size:1.4em; font-size:1.4rem;
	max-height:12.5em;
}
ul#news .right span {
	font-size:1.2em; font-size:1.2rem;
}
ul#news .right p {
	overflow:hidden;
	max-height:6em;
	font-weight:400;
	margin:0;
}
ul#news .right h3 {
	margin:10px 0;
}

.topWrap-side {
	width:38%;
}
div.fb-page {
	margin-bottom:1%;
}

.topWrap-side ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}
.topWrap-side ul::before {
	content: none;
}
.topWrap-side ul li {
	width: 32%;
	margin-bottom: 5px;
}

/* .topWrap-side ul:last-child li {
	float:left;
	width:31.3333%;
	margin:1% 1% 0;
} */

@media (max-width: 1400px) {
	/* .topWrap-side ul:last-child li {
		float:left;
		width:49%;
		margin:1% 0.5% 0;
	} */
	.topWrap-side ul li {
		width: 49%;
	}
}
@media (max-width: 800px) {
	div#topBg {
		height:300px;
	}
	div#topBg div#header {
		position:static;
		padding-top:300px;
		background:url('../images/header.png') repeat-x bottom center;
	}
	div#top {
		position:static;
		width:auto;
		max-width:100%;
		padding:0;
	}
	div#topSearch {
		float:none;
		position:absolute;
		top:30px;
		width:100%;
	}
	div#topSearch form input:first-child {
		height:auto;
	}
	div#topSearch p {
		color:#222;
	}
	div.searchBox {
		margin:0 auto;
		width:auto;
		max-width:90%;
	}
	p.mainCap {
		position:absolute;
		bottom:auto;
		top:50px;
		left:5px;
	}
	h1 {display:none;}
	div.searchBox ul li {
		margin-bottom:10px;
	}
	div#topSearch ul li a {
		text-decoration:none;
		line-height:1;
		background-color:#d71618;
		border-radius:10px;
		padding:2px 10px;
	}
	div#topCont {
		float:none;
		position:static;
		width:90%;
		background-color:#fff;
		padding:20px 5%;
		margin-left:0;
	}
	div.contBox div.btm a {
		float:none;
		width:100%;
		margin:0 0 10px;
	}
	div#event, ul#news {
		float:none;
	}
	div#event {
		width:90%;
		padding:50px 5% 100px;
	}
	ul#news {
		width:100%;
		padding:50px 0;
		margin-bottom:10%;
	}
	ul#conv {
		width:90%;
		padding:0 5%;
	}
	ul#conv li {
		float:none;
		margin:0 auto 10px;
	}
	.topWrap-side {
		width:80%;
		margin:10%;
	}
	.mid {
		font-size:2.0rem;
		text-align:center;
	}
	.mid span {
		font-size:2.6rem;
	}
	div.contBox > a,ul#news a.btn {
		float:none;
		width:50%;
		margin:0 auto;
	}
	div.contBox > a {
		margin-bottom:30px;
	}
}
@media (max-width: 737px) {
	p.mainCap {
		left:auto;
		right:5px;
		width:150px;
	}
	p.mainCap,p.mainCap .btn {
		font-size:1.2em;font-size:1.2rem;
	}
}
@media (max-width: 569px) {
	p.mainCap {
		width:120px;
	}
	div.searchBox h1 {
		width:80%;
		margin-left:auto;
		margin-right:auto;
	}
	div#topSearch form input:first-child {
		line-height:34px;
	}
	div#topSearch form input:last-child {
		width:30px;
	}
	div#topSearch p {
		margin-top:60px;
	}
}
@media (max-width: 500px) {
	div#topBg {
		height:400px;
	}
	div#topBg div#header {
		padding-top:400px;
	}
	div#topSearch {
		top:80px;
		width:100%;
	}
	p.mainCap {
		top:450px;
		right:auto;
		left:50%;
		width:290px;
		margin-left:-150px;
		z-index:9999;
	}
	p.mainCap .btn {
		padding:2px;
	}
	div.lang {
		display:none;
	}
	div.eveCont a {
		float:none;
		width:100%;
	}
	div.eveCont a:nth-child(2n) {
		margin-left:0;
	}
	div.eveCont a:nth-child(3) {
		margin-bottom:68px;
	}
	div#event > a {
		width:60%;
	}
	ul#conv li {
		width:80%;
	}
}