@charset "UTF-8";
/*==========================

	季節背景

============================*/
.pattern_spring {
	background: url(../img/index/bgPattern_spring.jpg) repeat-x center top;
}
.pattern_summer {
	background: url(../img/index/bgPattern_summer.jpg) repeat-x center top;
}
.pattern_autumn {
	background: url(../img/index/bgPattern_autumn.jpg) repeat-x center top;
}
.pattern_winter {
	background: url(../img/index/bgPattern_winter.jpg) repeat-x center top;
}
/*==========================

	indexNav

============================*/
#container .indexNav {
	padding: 40px 0 0;
}
#container .indexNav a:hover {
	text-decoration: none;
}
#container .indexNavBody .gNavi {
	margin: 0 auto 40px;
	width: 984px;
}
#container .indexNavBody .gNavi li {
	float: left;
	font-size: 20px;
	margin: 0 12px;
	text-align: center;
	width: 140px;
	position: relative;
}
#container .indexNavBody .gNavi li a {
	display: block;
	color: #ffffff;
	padding: 88px 0 20px;
	width: 140px;
}
#container .indexNavBody .gNavi li a:hover {
	filter:alpha(opacity=70);
	-moz-opacity:0.70;opacity:0.70;
}
#container .indexNavBody .gNavi li.navi01 a {
	background: url(../img/index/navi01.jpg) no-repeat #93454E;
}
#container .indexNavBody .gNavi li.navi02 a {
	background: url(../img/index/navi02.jpg) no-repeat #C46E55;
}
#container .indexNavBody .gNavi li.navi03 a {
	background: url(../img/index/navi03.jpg) no-repeat #B99C40;
}
#container .indexNavBody .gNavi li.navi04 a {
	background: url(../img/index/navi04.jpg) no-repeat #4A7450;
}
#container .indexNavBody .gNavi li.navi05 a {
	background: url(../img/index/navi05.jpg) no-repeat #557797;
}
#container .indexNavBody .gNavi li.navi06 a {
	background: url(../img/index/navi06.jpg) no-repeat #7D517F;
}
/*==========================

	subNavi

============================*/
#container .indexNavBody .subNavi {
	margin: 0 auto 40px;
	width: 980px;
}
#container .indexNavBody .subNavi h2 {
	float: left;
	margin: 0 10px;
	width: 225px;
}
/*==========================

	anchor

============================*/
.anchor {
	text-align: center;
	padding: 0 0 15px;
}



/*==========================

	blankSiteBox

============================*/
.blankSiteBox{
	padding-bottom: 40px;
}

/*==========================

	contents

============================*/
#contents {
	width:100%;
}
#contents .itemBox {
	padding: 20px 0;
}
.itemBox h3 {
	border-bottom: 3px solid #000000;
	font-size: 30px;
	margin: 0 auto 20px;
	width: 960px;
}
.subttl {
	color: #ffffff;
	font-size: 14px;
	font-weight: normal;
	margin: 15px 0 0 15px;
	height: 22px;
	padding: 0 10px;
}
/*IE用CSS*/
@media all and (-ms-high-contrast:none){
	.subttl {
		height: 17px;
		padding: 3px 10px 3px 10px;
	}
	*::-ms-backdrop,
	.subttl {
		height: 17px;
		padding: 3px 10px 3px 10px;
	}
}
.itemBox h3 span {
	display: block;
	float: left;
	position: relative;
}

/*==========================
	event
============================*/
.eventList,.calendarlist {
	position: relative;
	overflow:hidden;
	float: left;
	margin:0 10px 10px;
	width: 225px;
	text-align: left;
}


.calendarlist a {
    background: #99454c;
    color: #ffffff;
    display: block;
    height: 225px;
    width: 225px;
}

.calendartext {
    font-size: 24px;
    padding: 25px 0 10px;
    text-align: center;
}

.calendarlist .imgtable {
    text-align: center;
    color: #99454c;
    width: 160px;
    height: 120px;
    margin: 0 auto;
    background: url(../img/event/imgtable.jpg) no-repeat center;
}

.calendarlist .imgtable span {
    display: block;
    line-height: 35px;
    font-size: 20px;
}


.listBox .caption h4,
.listBox .caption_a h4,
.listBox .caption_g h4,
.listBox .caption_s h4,
.listBox .caption_d h4,
.listBox .caption_p h4 {
	margin:0 auto;
	width:190px;
	padding: 7px 0 8px;
}
.listBox li:hover .caption h4 {
	padding: 15px 0 10px;
}
.listBox .caption p,
.listBox .caption_a p,
.listBox .caption_g p,
.listBox .caption_s p,
.listBox .caption_d p,
.listBox .caption_p p {
	font-size: 14px;
	margin:0 auto;
	width:190px;
}
.caption, .caption_a, .caption_g, .caption_s, .caption_d, .caption_p {
	background: rgba(153, 69, 76, 0.7);
	color:#ffffff;
	height: 100%;
	left: 0;
	opacity: 1;
	position: absolute;
	bottom: -84%;
	transition: all 0.3s ease 0s;
	-webkit-transition: .3s;
	width: 225px;
	z-index: 3;
}
.caption_a{ background: rgba(204, 112, 82, 0.7)}
.caption_g{ background: rgba(191, 156, 57, 0.7)}
.caption_s{ background: rgba(69, 115, 78, 0.7)}
.caption_d{ background: rgba(76, 121, 153, 0.7)}
.caption_p{ background: rgba(128, 83, 128, 0.7) }

.listBox li:hover .caption,
.listBox li:hover .caption_a,
.listBox li:hover .caption_g,
.listBox li:hover .caption_s,
.listBox li:hover .caption_d,
.listBox li:hover .caption_p{
	bottom: 0;
	left: 0;
	transition: all 0.3s ease 0s;
	-webkit-transition: .3s;
}
.eventList .imgBox::before {
	border:none;
	bottom: auto;
	content: "";
	left: auto;
	opacity: 1;
	position: relative;
	right: auto;
	top: auto;
	display: none;
}
.eventList a:hover .imgBox:before {
	opacity: 1;
	transform: none;
	z-index: 1;
}
/*=======================
	border アニメーション
=========================*/
.listBox {
	margin: 0 auto 5px;
	width: 980px;
}
.imgList {
	float: left;
	margin:0 10px;
	width: 225px;
	text-align: center;
}
/* 追加 css */
.imgBox {
	/*background: #fff;*/ /* #e5e5e5 */
	position: relative;
	z-index: 3;
}
.imgBox img.fullImg{
	margin:0 auto;
	max-height: 225px;
}
.table {
	max-height: 224px;
	position:absolute;
	left: 0;
	top: 112px;
	right:0;
	margin: 0 auto;
	z-index: -1;
	-webkit-transform: translate3d(0px, -50%, 0px);
	-ms-transform: translate3d(0px, -50%, 0px);
	transform: translate3d(0px, -50%, 0px);
}
/* 追加 css */
.effectBox {
	overflow: hidden;
}
.imgBox img.effectImg {
	width: 100%
}
.imgList .imgBox::before {
/*	box-shadow: inset 0 0 0 5px #ffffff;
	-webkit-text-shadow: inset 0 0 0 5px #ffffff;
	-moz-text-shadow: inset 0 0 0 5px #ffffff;
	-ms-text-shadow: inset 0 0 0 5px #ffffff;
	-o-text-shadow: inset 0 0 0 5px #ffffff;
	text-shadow: inset 0 0 0 5px #ffffff;*/
	border:5px solid #ffffff;
	bottom: 0;
	content: "";
	left: 0;
	opacity: 1;
	position: absolute;
	right: 0;
	top: 0;
	transform: scale3d(1, 1, 1);
	/*opacity 0.30s opacityの消えるスピード*/
	/*ease 0s       opacityの透過具合*/
	/*transform     transformのスピード*/
	/*ease          transformの透過具合*/
	transition: opacity 0.40s ease 0s, transform 0.25s ease 0s;
}
.imgList a:hover .imgBox:before {
	opacity: 0;
	/*数値が多ければ外側にて、少なければ内側に消える*/
	transform: scale3d(1.1, 1.1, 1.1);
	z-index: 1;
}
.iconNew {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 51px;
}
.iconNew img {
	width: 100%;
}

/*=======================
	subttlの◀の共通設定
=========================*/
.subttl:after {
	border-style: solid;
	border-width: 5px 10px 5px 0;
	bottom: 0;
	content: "";
	display: block;
	height: 0;
	left: -6px;
	line-height: 0;
	margin: 0 auto;
	position: absolute;
	top: 6px;
	width: 0;
}
/*=======================
	subttlの◀カラー
=========================*/
.subttl.bgWine:after {
	border-color: transparent #93454E transparent transparent;
}
.subttl.bgSkin:after {
	border-color: transparent #C46E55 transparent transparent;
}
.subttl.bgGold:after {
	border-color: transparent #B99C40 transparent transparent;
}
.subttl.bgGreen:after {
	border-color: transparent #4A7450 transparent transparent;
}
.subttl.bgBlue:after {
	border-color: transparent #557797 transparent transparent;
}
.subttl.bgPurple:after {
	border-color: transparent #7D517F transparent transparent;
}
.subttl.bgGlay:after {
	border-color: transparent #a0a0a0 transparent transparent;
}
/*=======================
	moreLink
=========================*/
.moreLink {
	font-size: 20px;
	clear: both;
	margin: 0 auto;
	width: 960px;
	text-align: right;
}
.moreLink a {
	position: relative;
}
.moreLink a:after {
	border-color: transparent transparent transparent #000000;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	bottom: 0;
	content: "";
	display: block;
	height: 0;
	left: -11px;
	line-height: 0;
	margin: 0 auto;
	position: absolute;
	top: 10px;
	width: 0;
}
/*=======================
	リンク集
=========================*/
.itemBox ul.bannerLink {
	margin: 0 auto 5px;
	width: 984px;
}
.itemBox ul.bannerLink li {
	float: left;
	margin:0 10px 13px;
	height: auto;
	width: 220px;
	border:3px solid #e6e6e6;
	background:#ffffff;
}
.itemBox ul.bannerLink li.noMargin {
	margin:0 10px;
}
.itemBox ul.bannerLink li img, x:-moz-any-link, x:default {
	box-shadow: #000 0 0 0;
}
.itemBox ul.bannerLink li img {
	box-shadow: #000 0 0 0;
	transition: none 0s ease 0s ;
}
.itemBox ul.bannerLink li img.over {
	transition: none 0s ease 0s ;
}

/*=======================
	相互リンクバナー
=========================*/
.none {
	display: none;
}
.itemBox ul.mutualLink {
	margin: 0 auto 40px;
	width: 975px;
}
.itemBox ul.mutualLink li {
	float: left;
	margin:0 7px 0 8px;
	height: auto;
	width: 310px;
}
/*=======================
	rentalBox
=========================*/
.rentalBox {
	padding: 30px 0;
	margin: 0 auto;
}
/* Media Queries ================================================== */
@media screen and (max-width: 736px) {
	/*==========================

		contents

	============================*/
	.itemBox {
		background: #ffffff;
		padding: 3% 0!important;
	}
	.itemBox h3 {
		border-bottom: 3px solid #000000;
		font-size: 25px;
		margin: 0 auto 3%;
		width: 85%;
	}
	.subttl {
		color: #ffffff;
		font-size: 14px;
		font-weight: normal;
		margin: 2% 0 0 2%;
		padding: 0 1%;
	}
	.itemBox h3 span {
		display: block;
		float: left;
		position: relative;
	}

	/*==========================
		event
	============================*/
	.eventList {
		margin:0 0 5%;
		width: 100%;
		position: relative;
		overflow:hidden;
		float: none;
		text-align: left;
	}
	.eventList .imgBox {
		background: #e6e6e6 none repeat scroll 0 0;
		float: left;
		height: auto;
		overflow: hidden;
		width: 45%;
		z-index: 1;
	}
	.eventList .table {
		left: 0;
		margin: 0 auto;
		max-height: 100%;
		overflow: hidden;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate3d(0px, -50%, 0px);
		z-index: 0;
	}
		.eventList .caption h4,
	.listBox li:hover .caption h4,
	.eventList .caption_a h4,
	.listBox li:hover .caption_a h4,
	.eventList .caption_g h4,
	.listBox li:hover .caption_g h4,
	.eventList .caption_s h4,
	.listBox li:hover .caption_s h4,
	.eventList .caption_d h4,
	.listBox li:hover .caption_d h4,
	.eventList .caption_p h4,
	.listBox li:hover .caption_p h4 {
		margin: 0 auto;
		padding: 0 0 3%;
		width: auto;
	}
	.listBox li:hover .caption,
	.listBox li:hover .caption_a,
	.listBox li:hover .caption_g,
	.listBox li:hover .caption_s,
	.listBox li:hover .caption_d,
	.listBox li:hover .caption_p{
		bottom: auto;
		left: auto;
		transition: none 0s ease 0s ;
		-webkit-transition: none 0s ease 0s;
	}
	.eventList a:hover .imgBox:before {
		opacity: 1;
		transform: none;
		z-index: 1;
	}
	.eventList .imgBox::before {
		border:none;
		bottom: auto;
		content: "";
		left: auto;
		opacity: 1;
		position: relative;
		right: auto;
		top: auto;
		display: none;
	}
	.eventList .caption,
	.eventList .caption_a,
	.eventList .caption_g,
	.eventList .caption_s,
	.eventList .caption_d,
	.eventList .caption_p {
		background: none;
		bottom: auto;
		color: #000000;
		float: right;
		left: auto;
		opacity: 1;
		position: relative;
		transition: none 0s ease 0s ;
		width: 50%;
		z-index: 2;
	}
	.eventList .caption p,
	.eventList .caption_a p,
	.eventList .caption_g p,
	.eventList .caption_s p,
	.eventList .caption_d p,
	.eventList .caption_p p{
		font-size: 12px;
		margin: 0 auto;
		width: auto;
	}
	/*=======================
		border アニメーション
	=========================*/
	.listBox {
		margin: 0 auto 2%;
		width: 80%;
	}
	.imgList {
		margin:0 0 5%;
		width: 45%;
	}
	.imgList:nth-child(odd) {
		float: left;
	}
	.imgList:nth-child(even) {
		float: right;
	}
	.imgBox {
		background: #fff; /* #e5e5e5 */
		position: relative;
		overflow: hidden;
	}
/* 追加 css */
	.imgBox img.fullImg {
		max-height: 100%;
		max-width: 100%;
	}
	.table {
		left: 0;
		margin: 0 auto;
		max-height: 100%;
		position: absolute;
		right: 0;
		top: 50%;
		z-index: -1;
		-webkit-transform: translate3d(0px, -50%, 0px);
		-ms-transform: translate3d(0px, -50%, 0px);
		transform: translate3d(0px, -50%, 0px);
	}
/* 追加 css */
	.imgList .imgBox::before {
		display: none;
		box-shadow: none;
		bottom: 0;
		content: "";
		left: 0;
		opacity: 1;
		position: absolute;
		right: 0;
		top: 0;
		transform: scale3d(1, 1, 1);
		/*opacity 0.30s opacityの消えるスピード*/
		/*ease 0s       opacityの透過具合*/
		/*transform     transformのスピード*/
		/*ease          transformの透過具合*/
		transition: opacity 0.40s ease 0s, transform 0.25s ease 0s;
	}
	.imgList a:hover .imgBox:before {
		display: none;
		opacity: 0;
		/*数値が多ければ外側にて、少なければ内側に消える*/
		transform: scale3d(1.1, 1.1, 1.1);
		z-index: 1;
	}
	.iconNew {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		width: 30%;
	}
	.iconNew img {
		width: 100%;
	}
	.moreLink {
		font-size: 16px;
		clear: both;
		margin: 0 auto;
		width: 62%;
		text-align: center;
		line-height: 2;
	}
	.moreLink a {
		display: block;
		position: relative;
		background: #f3c2c6;
	}
	.moreLink a:after {
		border-color: transparent transparent transparent #000000;
		border-style: solid;
		border-width: 5px 0 5px 8px;
		bottom: 0;
		content: "";
		display: block;
		height: 0;
		left: -70px;
		right: 0;
		line-height: 0;
		margin: 0 auto;
		position: absolute;
		top: 12px;
		width: 0;
	}
	/*=======================
		リンク集
	=========================*/
	.itemBox ul.bannerLink {
		margin: 0 auto 5%;
		width: 90%;
		padding: 0 0 0 3%
	}
	.itemBox ul.bannerLink li {
		float: left;
		height: auto;
		margin: 0 1% 2%;
		width: 28.6%;
		border:3px solid #e6e6e6;
	}
	.itemBox ul.bannerLink li.noMargin {
		margin: 0 1% 2%;
	}
	/*=======================
		相互リンクバナー
	=========================*/
	.itemBox ul.mutualLink {
		margin: 0 auto 1%;
		width: 86%;
	}
	.itemBox ul.mutualLink li {
		float: left;
		margin: 0 1%;
		height: auto;
		width: 31%;
	}
	/*=======================
		rentalBox
	=========================*/
	.rentalBox {
		padding: 6% 0;
		margin: 0 auto;
	}
}

/* Media Queries ================================================== */
	@media screen and (max-width: 375px) {
		.itemBox ul.bannerLink {
			margin: 0 auto 5%;
			width: 90%;
			padding: 0 0 0 3%
		}
		.itemBox ul.bannerLink li {
			float: left;
			height: auto;
			margin: 0 1% 2%;
			width: 28.4%;
			border:3px solid #e6e6e6;
		}
	}
	@media screen and (max-width: 360px) {
		.itemBox ul.bannerLink {
			margin: 0 auto 5%;
			width: 90%;
		}
		.itemBox ul.bannerLink li {
			float: left;
			height: auto;
			margin: 0 1% 2%;
			width: 28.4%;
			border:3px solid #e6e6e6;
		}
	}

	@media screen and (min-width: 0px) and (max-width: 320px) {
		.itemBox ul.bannerLink {
			margin: 0 auto 5%;
			width: 89%;
		}
		.itemBox ul.bannerLink li {
			float: left;
			height: auto;
			margin: 0 1% 2%;
			width: 28%;
			border:3px solid #e6e6e6;
		}
	}