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

*,*:before,*:after {
	box-sizing: border-box;
}
::selection {
	background: #cfd7c6;
}
::-moz-selection {/*Firefox*/
	background: #cfd7c6;
}

html{
	background-color: #cfd7c6;
}

body {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.8em;
	letter-spacing: 0.1em;
	background-color: #fff;
	color: #333;
	font-family: "Sawarabi Gothic";
	width: 100%;
}

.spOnly {display: none;}
.pcOnly {display: inline-block;}

h1 {
	font-size: 110%;
	letter-spacing: .2em;
	font-weight: normal;
	margin: 0;
}
h2 {
	margin: 0 auto 40px auto;
}
h3 {
	font-size: 110%;
	margin: 0 auto 20px auto;
	letter-spacing: .2em;
	color: #617b43;
}

a {
	color: #617b43;
	display: inline-block;
	text-decoration: underline;
	transition: 0.3s;
}
@media screen and (min-width: 768px) {
	a:hover,
	a:active {
		transform:scale(1.08);
		background-color: #cfd7c6;
	}
}
img {
	zoom: .5;
	max-width: 100%;
}
img,p,div {
	animation-name: fadedown;
	animation-duration: 1.5s;
}
@keyframes fadedown {
from {
	opacity: 0;
	transform: translateY(20px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}

.cf:after {content: ""; display: block; clear: both;}
.cf:before {content: ""; display: block; clear: both;}
.cf {display: block;}

#contents {
	padding: 0;
	margin: 50px auto;
	text-align: center;/*仮*/
	max-width: 800px;
}

section {
}
section:after {
	margin: 60px auto;
	content: '';
	display: inline-block;
	width: 17px;
	height: 20px;
	background-image: url(../img/point_coffeebean.png);
	background-size: contain;
	vertical-align: middle;
}
section:last-child::after {
	margin: 60px auto 0 auto;
}

#footer {
	padding: 20px 0;
	border-bottom: 8px solid #cfd7c6;
	font-size: 90%;
}
#footer:after {
	margin: 0 auto;
	content: '';
	display: inline-block;
	width: 39px;
	height: 30px;
	background-image: url(../img/point_mountain.png);
	background-size: contain;
	position: relative;
	bottom: -30px;
	left: 85%;
}
ul.footerList {
	width: 800px;
	max-width: 100%;
	margin: 0 auto 20px auto;
	text-align: center;
}
ul.footerList li {
	display: inline-block;
	padding: 0 20px;
}
ul.footerList li a {
	text-decoration: none;
	color: #333;
}
address {
	color: #617b43;
	font-style: normal;
	margin: 20px;
	text-align: center;
}

@media screen and (max-width: 767px) {
	
	.spOnly {display: inline-block;}
	.pcOnly {display: none;}
	
	#contents {
		width: 100%;
		padding: 0 5%;
	}
	
	h2 {
	}
	
	a {
	}
	a:hover,
	a:active {
	}
	
	#contents {
	}
	section {
	}	
	
	#footer {
	}
	#footer:after {
	}
	ul.footerList {
		margin: 0 auto 50px auto;
	}
	ul.footerList li {
		display: block;
		padding: 5px;
	}
	ul.footerList li a {
	}

}