@charset "UTF-8";

/* -------------------------------------------------

Opening

------------------------------------------------- */
.main_photo {
	width: 1200px;
	margin: 0 auto;
 position: relative;
}
.main_photo {
	position:relative;
}
.main_photo ul {
	list-style:none;
	position:relative;
	z-index:0;
}
.main_photo ul li {
	list-style:none;
	overflow:hidden;
}
.main_photo img {
	display:block;
	width:100%;
}
.slider img {
 height: auto;
}
@media only screen and (max-width: 1200px) {
.main_photo {
	width: 100%;
	margin: 0 auto;
 position: relative;
}
}


/* -------------------------------------------------

Main

------------------------------------------------- */
#main {
width: 1200px;
margin: -65px auto 0;
background: #fff;
padding: 50px 0;
}
@media screen and (min-width: 899px) and (max-width: 1200px) {	
#main {
width: 100%;
}
}
@media all and (max-width: 898px) {
#main {
width: 100%;
}
}
#facebook {
width: 1200px;
margin: 10px auto 0;
padding: 50px 0;
}
@media screen and (min-width: 899px) and (max-width: 1200px) {	
#facebook {
width: 100%;
}
}
@media all and (max-width: 898px) {
#facebook {
width: 100%;
}
}
/* スマホ用 */
@media screen and (max-width: 767px) {
	.fb-container {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
}
 
/* PC用 */
@media screen and (min-width: 768px) {
	.fb-container {
		width: 500px;
		margin: 0 auto;
	}
}
/* -------------------------------------------------

banner

------------------------------------------------- */
.banner	{
 width: 925px;
 margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.banner > div	{
 width: calc(25% - 20px);
 margin: 10px;
 -webkit-flex-direction: column;
 flex-direction: column;
	word-wrap: break-word;
	position:relative;
}
.banner > div a:hover img {
 opacity: 0.7;
 filter: alpha(opacity=70);
 -moz-opacity: 0.7;
	transition: .3s;
}

@media screen and (min-width: 769px) and (max-width: 924px) {
.banner	{
 width: 95%;
	margin:0 auto;
}
.banner > div	{
 width: calc(25% - 20px);
 margin: 10px;
 -webkit-flex-direction: column;
 flex-direction: column;
	word-wrap: break-word;
	position:relative;
}
}
@media screen and (max-width: 768px)  {
.banner	{
 width: 85%;
	margin:0 auto;
	justify-content:	center;
}
.banner > div	{
 width: calc(50% - 20px);
 margin: 10px;
 -webkit-flex-direction: column;
 flex-direction: column;
	word-wrap: break-word;
	position:relative;
	text-align:center;
}
}
@media screen and (max-width: 736px)  {
.banner	{
 width: 85%;
	margin:0 auto;
	justify-content:	center;
}
}
@media screen and (max-width: 568px)  {
.banner	{
 width: 85%;
	margin:0 auto;
	justify-content:	center;
}
.banner > div	{
 width: calc(50% - 20px);
 margin: 10px;
	text-align:center;
}
}
@media screen and (max-width: 414px)  {
.banner	{
 width: 95%;
	margin:0 auto;
	justify-content:	center;
}
.banner > div	{
 width: calc(50% - 20px);
 margin: 10px;
	text-align:center;
}
}
@media screen and (max-width: 320px)  {
.banner > div	{
 width: 60%;
 margin: 10px;
	text-align:center;
}
}