@charset "UTF-8";
/* CSS Document */

#about h1,
#openday h1,
#access h1 {
	padding: 10px 25px;
	border-left: 6px solid #617b43;
	color: #617b43;
}

/* ---------- Index ---------- */
#index {
}

#mv {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 540px;
	background-color: #cfd7c6;
	color: #fff;
	font-size: .9em;
	text-align: center;
}
#mv h1,
#mv p {
	z-index: 100;
	position: absolute;
	width: 100%;
/*	opacity: 1;
	animation: mvTitle 2s 1;*/
}
#mv h1 {
	top: 60px;
}
#mv p {
	top: 330px;
}
@keyframes mvTitle {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}
}
.mvSlider {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}
@keyframes mvBackground {
	0% {
	  opacity: 0;
	}
	12.5% {/*24秒の12.5%＝3秒 で0％から100％にフェードイン完了*/
	  opacity: 1;
	}
	25% {/*24秒の25%＝6秒 でフェードアウト開始（＆次のスライドがフェードイン開始）*/
	  opacity: 1;
	}
	37.5% {/*24秒の37.5%＝9秒 でフェードアウト完了（＆次のスライドがフェードイン完了）*/
	  opacity: 0;
	  transform: scale(1.1) ;
	   z-index:9;/*4枚目より2巡目の1枚目が上に来るようにz-indexを一つ下げる*/
	}
	100% { opacity: 0 }/*9秒から24秒の間は画像は透明*/
	/*
	つまり：
	ひとつの画像のフェードイン／アウトは9秒で完了する。
	0%から100%になったように見えるのは6秒間。（残りの3秒は次の画像とかぶってるので数えない）
	なので6秒×枚数で、全体のmvBackgroundの長さは24秒。
	1枚ずつ順番にタイミングをずらして再生させるために、それぞれのimageに
	6秒ずつ遅延してmvBackgroundを再生するようにanimation-delayを設定する。
	*/
}
.mvSlider .image{
	z-index: 10;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	margin: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	/* アニメーション設定 */
	animation-name: mvBackground;
	animation-duration: 24s;/* mvBackgroundの長さ */
	animation-iteration-count: infinite;
}
.mvSlider .image:nth-of-type(1){
	animation-delay: 0;/* アニメをどれだけ遅れて再生するか */
	background-image: url(../img/index_mv1_pc.jpg);
}
.mvSlider .image:nth-of-type(2){
	animation-delay: 6s;
	background-image: url(../img/index_mv2_pc.jpg);
}
.mvSlider .image:nth-of-type(3){
	animation-delay: 12s;
	background-image: url(../img/index_mv3_pc.jpg);
}
.mvSlider .image:nth-of-type(4){
	animation-delay: 18s;
	background-image: url(../img/index_mv4_pc.jpg);
}


.wpIndex {
	margin: 0 auto 50px;
}
.postDate {
	font-size: .85em;
	color: #aaa;
	line-height: 1.3em;
}
.postTitle {
	line-height: 1.3em;
}
.postTitle a {
	font-size: .9em;
	color: #333;
	text-decoration: none;
}

.buttonIndex {
	margin: 0 auto 80px;
}
ul.buttonList {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
ul.buttonList li {
	width: 17%;
	display: inline-block;
	margin: 0 1%;
	padding: 0;
	vertical-align: top;
}
ul.buttonList li a {
	width: 100%;
	display: inline-block;
	padding: 8% 5%;
	margin: 0 2%;
	border: 1px solid #ccc;
	border-radius: 10px;
	text-decoration: none;
	color: #333;
	line-height: 1.3em;
	font-size: .9em;
	min-height: 90px;
}
ul.buttonList li a::before {
	content: "";
	display: block;
	background-size: cover;
	margin: 10px auto;
}
ul.buttonList li.buttonList-about a::before {
	background-image: url("../img/icon_coffee.png");
	width: 17px;
	height: 20px;
}
ul.buttonList li.buttonList-openday a::before {
	background-image: url("../img/icon_schedule.png");
	width: 19px;
	height: 19px;
}
ul.buttonList li.buttonList-access a::before {
	background-image: url("../img/icon_access.png");
	width: 17px;
	height: 20px;
}
ul.buttonList li.buttonList-blog a::before {
	background-image: url("../img/icon_blog.png");
	width: 20px;
	height: 20px;
}
ul.buttonList li.buttonList-shop a::before {
	background-image: url("../img/icon_onlineshop.png");
	width: 19px;
	height: 20px;
	margin: 0 auto 10px auto;
}

.lineWrap {
	margin: 0 auto 50px;
	padding: 30px;
	background-color: #e7ebe2;
	max-width: 750px;
}
.lineInner {
	width: 60%;
	margin: 30px auto 0;
}
.lineInnerLeft {
	float: left;
	width: 50%;
}
.lineInnerRight {
	
}
.lineWrap h5{
	color: #8dab7e;
	text-align: center;
}
ul.lineContents {
	text-align: justify;
	margin: auto;
}
ul.lineContents li {
	list-style-type: none;
	border-bottom: 1px dotted #8dab7e;
	display: block;
	line-height: 1.8em;
}
p.lineBtnTxt {
	font-size: 75%;
	text-align: center;
	margin: 10px auto 0;
	color: #8dab7e;
}
.lineBtn {
	text-align: center;
	margin: 0 auto;
}
.lineQr {
	max-width: 200px;
}

/* ---------- About ---------- */
#about {
}
.aboutLead {
	color: #617b43;
	text-align: center;
	font-size: 120%;
}
.aboutMessage {
}
.aboutMessage img {
	float: left;
	margin-right: 100px;
	border-radius: 15px;
}
.aboutMessage p {
	text-align: left;
	min-height: 200px;
}

/* ---------- OpenDay ---------- */
#openday {}

.opendayGcalendar {
}
.opendayGcalendar iframe {
	width:100%;
	max-width:800px;
	height:400px;
}

.opendayGcalendar div {
	background: none !important;
	background-color: none !important;
	color: #333 !important;
}

/* Googleカレンダー CSS上書き ここから */
.mv-daynames-table {
	background: #fff !important;
	color: #333;
}
.view-cap, .view-container-border {
	background-color: #fff;
}
.st-dtitle {
	background: #fff;
	text-align: center;
}
.mv-event-container {
	border-top: none;
	border-bottom: none;
}
/* Googleカレンダー CSS上書き ここまで */

/* ---------- Access ---------- */
#access {
}
#access iframe{
	margin: 50px auto 0;
	max-width: 100%
}
.accessLead {
	color: #617b43;
	text-align: center;
	font-size: 120%;
}
.accessText {
}

/* ---------- contact ---------- */
.message {
	border: 1px dotted #5f9eab;
	padding: 20px;
	margin: 10px 10px 20px 10px;
	background: #fff;
}
.message h3 {
	font-size: 110%;
	margin-bottom: 15px;
	color: #5f9eab;
}
.message ul {
	margin-bottom: 15px;
}
.message ul:last-child {
	margin-bottom: 0;
}
.message ul li {
	margin-left: 30px;
	list-style: #5f9eab;
	margin-bottom: 5px;
}
#formWrap {
	max-width:700px;
	margin:0 auto;
	text-align: center;
}
#formWrap h3,
#formWrap h4 {
	margin-bottom: 20px;
}
.erorrMessage {
	margin-bottom: 20px;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,
table.formTable th {
	border:0;
	padding: 15px;
	text-align: left;
}
table.formTable th {
	width: 50%;
	max-width: 200px;
	font-weight: bold;
	text-align: right;
	vertical-align: top;
	padding-top: 20px;
	color: #5f9eab;
}
table.formTable td {
}
.required:after {
	content: "※必須";
	color: #C00;
	margin-left: 8px;
	display: inline-block;
}
.btWrap {
	text-align: center;
	margin-top: 20px;
}

@media screen and (max-width: 767px) {
	
	/* ---------- About ---------- */
	#index {
	}
	
	#mv {
	}
	#mv p {
	}
	
	.mvSlider .image:nth-of-type(1){
		background-image: url(../img/index_mv1_sp.jpg);
	}
	.mvSlider .image:nth-of-type(2){
		background-image: url(../img/index_mv2_sp.jpg);
	}
	.mvSlider .image:nth-of-type(3){
		background-image: url(../img/index_mv3_sp.jpg);
	}
	.mvSlider .image:nth-of-type(4){
		background-image: url(../img/index_mv4_sp.jpg);
	}
	
	.wpIndex {
	}
	.postDate {
	}
	.postTitle {
	}
	.postTitle a {
	}

	.buttonIndex {}
	ul.buttonList {
		width: 100%;
		margin: 0 auto;
	}
	ul.buttonList li {
		width: 46%;
		margin: 0 2% 4% 2%;
		padding: 0;
	}
	ul.buttonList li:last-child {
		width: 96%;
		margin: 0 2% 0 0;
	}
	ul.buttonList li a {
		padding: 8% 5%;
		margin: 0 2%;
	}
	ul.buttonList li a::before {
	}
	ul.buttonList li.buttonList-about a::before {
	}
	ul.buttonList li.buttonList-openday a::before {
	}
	ul.buttonList li.buttonList-access a::before {
	}
	ul.buttonList li.buttonList-blog a::before {
	}
	ul.buttonList li.buttonList-shop a::before {
		margin: 10px 20px 0px auto;
		display: inline-block;
		vertical-align: bottom;
	}
	
	.lineWrap {
	}
	.lineInner {
		width: 100%;
	}
	.lineInnerLeft {
		float: none;
		width: 100%;
		margin-bottom: 40px;
	}
	.lineInnerRight {
	}
	.lineWrap h5{
	}
	ul.lineContents {
	}
	ul.lineContents li {
	}
	p.lineBtnTxt {
	}
	.lineQr {
		max-width: 280px;
		display: block;
		margin: auto;
	}
	
	/* ---------- About ---------- */
	#about {
	}
	.aboutLead {
	}
	.aboutMessage {
	}
	.aboutMessage img {
		float: none;
		margin-right: 0;
		margin-bottom: 20px;
	}
	.aboutMessage p {
		min-height: unset;
		padding: 0 3%;
		text-align: justify;
	}
	
	/* ---------- OpenDay ---------- */
	#openday {}
	.opendayGcalendar {/* Googleカレンダー埋め込み */
	}
	.opendayGcalendar iframe {
	height:600px;
	}
	
	/* ---------- Access ---------- */
	#access {
	}
	#access iframe{
	}
	.accessLead {
	}
	.accessText {
	}

	
	#formWrap {
		width:100%;
	}
	table.formTable{
	}
	table.formTable td,
	table.formTable th {
		width: 100%;
		padding: 10px 20px 5px 20px;

	}
	table.formTable th {
		width: 100%;
		max-width: none;
		text-align: left;
	}
	table.formTable td {
	}
}