@charset "UTF-8";

@import "base.css";
@import "main.css";


/* -------------------------------------
 *	共通
 * ------------------------------------- */

/* Title
-----------------------------------------*/
#main h2 {
	display: inline-block;
	line-height: 1.2;
	padding-bottom: 15px;
	margin-bottom: 30px;
	font-family: "Noto Serif JP", serif;
	font-size: 36px;
	font-weight: 700;
	background: url(../images/bg_tit.png) no-repeat left bottom;
	background-size: 100% 36px;
}
#main h2 span {
	display: block;
	color: #208845;
	font-family: "Noto Sans JP", serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5em;
}


/* -------------------------------------
 *	Teaser
 * ------------------------------------- */

/* Teaser Pic
-----------------------------------------*/
.Opening {
	position:relative;
	background-color: #fff;
}
.Opening ul li{
	position: relative;
	overflow: hidden;
	width: 100%;
	text-align: center;
}
.Opening ul li img.Opening__text{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	z-index: 9;
}
.Opening ul li span {
}
.Opening ul li span img.Opening__img{
	max-width: inherit;
	width: 100%;
	height: auto;
}

/* キャッチコピー
-----------------------------------------*/
#teaserCatch {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#teaserCatch p {
	color: #fff;
	font-family: "Noto Serif JP", serif;
	font-size: 55px;
	font-weight: 700;
	text-shadow: 0px 0px 10px #000;
}

/* What's News
-----------------------------------------*/
#news {
	width: 90%;
	font-size: 12px;
	background: #fff;
	border: 1px solid #208845;
	position: absolute;
	bottom: 50px;
	left: 0;
	right: 0;
	margin: auto auto;
}
#news h3 {
	width: 8em;
	margin-right: 2em;
	color: #fff;
	text-align: center;
	background: #208845;
	float: left;
}
#news p.newsListTop span {
	margin-left: 0.5em;
	color: #666;
}
#news p.newsListBut {
	margin-right: 1em;
	float: right;
}


/* -------------------------------------
 *	Toppage Contents
 * ------------------------------------- */

/* Layout
-----------------------------------------*/
#frontMain {
	width: 96%;
	margin: 60px auto 100px;
}

/* Concept
-----------------------------------------*/
#concept {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 100px;
}
#concept #conceptBody {
	flex: 1;
	margin-left: 50px;
}
#concept figure {
	width: 464px;
	margin-left: 20px;
}

/* Body */
#concept p#conceptCatch {
	margin-bottom: 20px;
	font-size: 20px;
}

/* Information
-----------------------------------------*/
.indexInfo {
	width: 96%;
	max-width: 980px;
	padding: 1em 0;
	margin: 0 auto 30px;
	text-align: center;
	border: 2px solid #e10000;
}
.indexInfo h3 {
	margin-bottom: 0.5em;
	color: #e10000;
	font-family: "Noto Sans JP", serif;
	font-size: 20px;
	font-weight: 700;
}


/* -------------------------------------
 *	Gallery
 * ------------------------------------- */

#loopSlide {
	margin-bottom: 85px;
}
.simply-scroll-container {
    position: relative;
}
.simply-scroll-clip {
    position: relative;
    overflow: hidden;
}
.simply-scroll-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.simply-scroll-list li {
    float: left; /* Horizontal scroll only */
    padding: 0;
    margin: 0;
    width: 340px;
    height: 240px;
    line-height: 100%;
    font-size: 14px;
}
.simply-scroll-list li img {
    display: block;
}

@media screen and (max-width : 1150px) {
	#main #teaser #news p.newsListTop {
		clear: both;
		width: 100%;
	}
}
@media screen and (max-width : 950px) {
	#concept {
		flex-direction: column;
	}
	#concept #conceptBody {
		margin-left: 0;
	}
	#concept figure {
		width: 100%;
		margin-left: 0;
		text-align: center;
	}
}