@charset "utf-8";

/* mainVisual
  ############################################################################################# */

.mainVisual {
	padding: 0 .6rem 0 0;
}
.mainVisual .slider {
	position: relative;
	line-height: 1px;
}
.mainVisual .slider img {
	width: 100%;
}
.mainVisual .slick-arrow {
	display: block;
	width: .12rem;
	height: .18rem;
	border: none;
	padding: 0;
	position: absolute;
	top: 50%;
	background: 0 0 / contain no-repeat;
	color: transparent;
	outline: none;
	transform: translate(0, -50%);
	cursor: pointer;
	transition: transform .3s ease-in;
}
.mainVisual .slick-prev {
	left: .2rem;
	z-index: +1;
	background-image: url("../images/ar-left.png");
}
.mainVisual .slick-prev:hover {
	transform: translate(-10px, -50%);
}
.mainVisual .slick-next {
	right: .2rem;
	background-image: url("../images/ar-right.png");
}
.mainVisual .slick-next:hover {
	transform: translate(10px, -50%);
}
.mainVisual .slick-dots {
	display: flex;
	position: absolute;
	bottom: .6rem;
	left: 50%;
	transform: translateX(-50%);
}
.mainVisual .slick-dots li + li {
	margin: 0 0 0 .05rem;
}
.mainVisual .slick-dots button {
	width: .16rem;
	height: .03rem;
	border: none;
	padding: 0;
	background: #fff;
	color: transparent;
	outline: none;
	overflow: hidden;
	cursor: pointer;
}
.mainVisual .slick-dots .slick-active button {
	background: #bd1200;
}

@media only screen and (max-width:959px) {
	.mainVisual {
		padding: 0 .4rem 0 0;
	}
	.mainVisual .slick-dots {
		bottom: .45rem;
	}
}
@media only screen and (max-width:599px) {
	.mainVisual {
		padding: 0 .2rem;
	}
	.mainVisual .slick-arrow {
		width: .24rem;
		height: .36rem;
}
	.mainVisual .slick-prev {
		left: .1rem;
	}
	.mainVisual .slick-next {
		right: .1rem;
	}
	.mainVisual .slick-dots {
		bottom: .5rem;
	}
	.mainVisual .slick-dots li + li {
		margin: 0 0 0 .09rem;
	}
	.mainVisual .slick-dots button {
		width: .32rem;
		height: .06rem;
	}
}

/* banner
  ############################################################################################# */

.banner {
	max-width: 12.2rem;
	margin: -0.4rem auto 0;
	padding: 0 1.1rem;
	position: relative;
}
.banner ul {
	display: flex;
	background: #fff;
	box-shadow: 0 0 .1rem rgba(0,0,0,.1);
}
.banner li {
	width: 25%;
}
.banner a {
	display: block;
	height: 1.3rem;
	position: relative;
	overflow: hidden;
}
.banner a::after {
	content: '';
	display: block;
	width: 0;
	height: .05rem;
	position: absolute;
	right: 100%;
	bottom: 0;
	background: #b61100;
	transition: transform .5s ease-in;
}
.banner a:hover::after {
	width: 100%;
	transform: translateX(200%);
}
.banner .image {
	width: calc(100% - 1rem);
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.banner .image img {
	max-width: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.banner .name {
	width: 1rem;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: #fff;
	text-align: center;
	transition: width .3s ease-in;
}
.banner .name img {
	width: 1rem;
}
.banner .name::after {
	content: '';
	display: block;
	width: .16rem;
	height: .16rem;
	position: absolute;
	right: .05rem;
	bottom: .05rem;
	background: url("../images/ico-ex01.png") 0 0 / contain no-repeat;
}
.banner a:hover .name {
	width: 100%;
}

@media only screen and (max-width:959px) {
	.banner {
		width: 8.4rem;
		margin: -0.3rem auto 0;
		padding: 0;
		position: relative;
	}
	.banner a::after {
		content: none;
	}
	.banner a:hover .image img {
		transform: translate(-50%,-50%) ;
	}
}
@media only screen and (max-width:599px) {
	.banner {
		width: auto;
		margin: -0.3rem .4rem 0;
		padding: 0;
	}
	.banner ul {
		flex-wrap: wrap;
	}
	.banner li {
		box-sizing: border-box;
		width: 50%;
		border-right: 1px solid #e5e5e5;
		border-bottom: 1px solid #e5e5e5;
	}
	.banner li:nth-child(even) {
		border-right-style: none;
	}
	.banner li:nth-child(n+3) {
		border-bottom: none;
	}
	.banner a {
		display: block;
		height: auto;
	}
	.banner .image {
		display: none;
	}
	.banner .name {
		width: auto;
		height: auto;
		position: relative;
	}
	.banner .name img {
		width: auto;
	}
	.banner .name::after {
		width: .2rem;
		height: .2rem;
		right: .09rem;
		bottom: .09rem;
		background-image: url("../images/ico-ex03.png");
	}
}

/* facilities
  ############################################################################################# */

.facilities {
	margin: .6rem 0 0;
	padding: .77rem 0;
	background-image: url("../../images2/bg02.png"), url("../../common2/images/bg01.png"), url("../../images2/bg01.jpg");
	background-position: 0 0, 50% 0, 100% 0;
	background-size: contain, auto, cover;
	background-repeat: no-repeat, repeat, no-repeat;
}
.facilities .inner {
	max-width: 11.04rem;
	margin: 0 auto;
	padding: 0 3.125%;
}
.facilities dl {
	display: flex;
	width: calc(6.99rem + 2px);
	background: #fff;
	box-shadow: 0 0 1rem rgba(0,0,0,.1);
	flex-wrap: wrap;
}
.facilities dt,
.facilities dd {
	border-top: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
}
.facilities dt:nth-child(-n+3),
.facilities dd:nth-child(-n+3) {
	border-top: none;
}
.facilities dd:nth-child(3n+3) {
	border-right: none;
}
.facilities dt {
	width: 2.03rem;
	height: 1.33rem;
	padding: .29rem 0 0 .3rem;
	background: #7e0c00;
	color: #fff;
}
.facilities dt .en {
	font-size: .3rem;
	font-weight: bold;
	letter-spacing: .2em;
	line-height: .36rem;
}
.facilities dt .ja {
	margin: .13rem 0 0;
	font-size: .2rem;
	letter-spacing: .01em;
	line-height: 1;
}
.facilities dd {
	width: 2.33rem;
	height: 1.62rem;
	position: relative;
}
.facilities dd a {
	display: block;
	box-sizing: border-box;
	height: 100%;
	padding: .3rem 0 0;
	position: relative;
	text-align: center;
	overflow: hidden;
}
.facilities dd a::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #b61100;
	transition: transform .3s ease-in;
}
.facilities dd a[data-hideTo=top]::before {
	transform: translate(0,-101%);
}
.facilities dd a[data-hideTo=right]::before {
	transform: translate(101%,0);
}
.facilities dd a[data-hideTo=bottom]::before {
	transform: translate(0,101%);
}
.facilities dd a[data-hideTo=left]::before {
	transform: translate(-101%,0);
}
.facilities dd .icon {
	width: .6rem;
	margin: 0 auto;
	position: relative;
}
.facilities dd .icon img {
	transition: opacity .3s ease-in;
}
.facilities dd .icon .ov {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.facilities dd .name {
	margin: .18rem 0 0;
	position: relative;
	font-size: .16rem;
	letter-spacing: .1em;
	line-height: 1.5;
	transition: color .3s ease-in;
}
.facilities dd:nth-child(7) .name,
.facilities dd:nth-child(9) .name {
	margin: .1rem 0 0;
}
.facilities dd a:hover .icon .ov {
	opacity: 1;
}
.facilities dd a:hover .icon .ov + img {
	opacity: 0;
}
.facilities dd a:hover::before {
	transform: translate(0,0) !important;
}
.facilities dd a:hover .name {
	color: #fff;
}

@media only screen and (max-width:959px) {
	.facilities {
		margin: .4rem 0 0;
	}
	.facilities .inner {
		max-width: none;
		padding: 0;
	}
	.facilities dl {
		margin: 0 auto;
	}
	.facilities dd a::before {
		content: none;
	}
	.facilities dd a:hover .icon .ov {
		opacity: 0;
	}
	.facilities dd a:hover .icon .ov + img {
		opacity: 1;
	}
	.facilities dd a:hover .name {
		color: inherit;
	}
}
@media only screen and (max-width:599px) {
	.facilities {
		margin: .6rem 0 0;
		padding: .6rem 0 3.39rem;
		background: url("../../images2/bg01_sp.jpg") 50% 0 / cover no-repeat;
	}
	.facilities .inner {
		max-width: none;
		padding: 0 .2rem;
	}
	.facilities dl {
		width: auto;
	}
	.facilities dt,
	.facilities dd {
		width: calc(100% / 3 - 2px / 3);
		height: 2.23rem;
	}
	.facilities dt {
		padding: 0;
	}
	.facilities dt .en {
		padding: .35rem 0 0 .2rem;
		font-size: .45rem;
		letter-spacing: .1em;
		line-height: .54rem;
	}
	.facilities dt .ja {
		margin: .05rem 0 0;
		padding: 0 0 0 .2rem;
		font-size: .3rem;
		letter-spacing: .05em;
	}
	.facilities dd a {
		padding: .4rem 0 0;
	}
	.facilities dd .icon {
		width: .9rem;
	}
	.facilities dd .name {
		margin: .4rem 0 0 !important;
		font-size: .28rem;
		letter-spacing: 0;
		line-height: calc(36 / 28);
		transform: translateY(-50%);
	}
}

/* news
   ========================================================================== */

.news {
	margin: .6rem 0;
	position: relative;
}
.news::before {
	content: '';
	display: block;
	width: 50%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: #7e0c00;
}
.news .wrap {
	position: relative;
}
.news .inner {
	display: flex;
	box-sizing: border-box;
	min-height: 5.12rem;
	padding: .7rem .4rem 0 .4rem;
	position: relative;
	background: #fff;
	overflow: hidden;
}
.news .inner::before {
	content: '';
	display: block;
	width: 1px;
	height: 2.55rem;
	position: absolute;
	top: 0;
	left: 0;
	background: #c17f78;
}
.news .headline {
	width: 2.55rem;
}
.news .title {
	margin: -0.03rem 0 0;
	line-height: 1;
}
.news .title .en {
	display: block;
	color: #b60000;
	font-size: .3rem;
	font-weight: bold;
	letter-spacing: .15em;
}
.news .title .ja {
	display: block;
	margin: .12rem 0 0;
	font-size: .2rem;
	font-weight: normal;
	letter-spacing: .1em;
}
.news .btList {
	display: block;
	box-sizing: border-box;
	width: 1.6rem;
	margin: .3rem 0 0;
	border: 1px solid #eee;
	padding: 0 0 0 1em;
	position: relative;
	letter-spacing: .1em;
	line-height: 2;
	overflow: hidden;
	transition: border-color,color .3s ease-in;
}
.news .btList::before {
	content: '';
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	right: inherit;
	background: #b61100;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .3s ease-in;
}
.news .btList::after {
	content: '';
	display: block;
	width: .09rem;
	height: .1rem;
	position: absolute;
	top: 50%;
	right: .08rem;
	background: url("../images/ar01.png") 0 0 / contain no-repeat;
	transform: translateY(-50%);
}
.news .btList span {
	position: relative;
}
.news .btList:hover {
	border-color: #b61100;
	color: #fff;
}
.news .btList:hover::before {
	right: auto;
	left: 0;
	transform: scaleX(1);
	transform-origin: left;
}
.news .btList:hover::after {
	background-image: url("../images/ar01_ov.png");
}
.news dl {
	display: flex;
	width: calc(100% - 2.55rem);
	letter-spacing: .1em;
	flex-wrap: wrap;
	align-content: flex-start;
}
.news dt {
	display: flex;
	width: 2.05rem;
	align-items: flex-start;
}
.news dt:nth-of-type(n+2),
.news dd:nth-of-type(n+2) {
	margin: .24rem 0 0;
}
.news .category {
	width: .77rem;
	margin: 0 .3rem 0 0;
	background: #000;
	color: #fff;
	font-size: .1rem;
	line-height: .19rem;
	text-align: center;
}
.news .date {
	color: #999;
	line-height: .19rem;
}
.news dd {
	width: calc(100% - 2.05rem);
	transform: translateY(-0.05rem);
	line-height: 2;
}
.news dd a {
	display: inline;
	border-bottom: 1px solid transparent;
	transition: border-bottom-color .3s ease-in;
	/*position: relative;*/
}
.news dd a:hover {
	border-bottom-color: #b61100;
	/*position: relative;*/
}
/*.news dd a::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #b61100;
	opacity: 0;
	transition: opacity .3s ease-in;
}
.news dd a:hover::after {
	opacity: 1;
}*/
.news .exp {
	font-size: .12rem;
  padding: .45rem .15rem .15rem 0;
	background: #fff;
}

@media only screen and (max-width:959px) {
	.news {
		margin: .4rem 0 1.45rem;
	}
	.news::before {
		content: none;
	}
	.news .wrap {
		padding: 0 1.39rem;
	}
	.news .inner {
		min-height: 0;
		padding: .7rem 0 0 .4rem;
	}
	.news .headline {
		width: 2rem;
	}
	.news .btList::before {
		content: none;
	}
	.news .btList:hover {
		border-color: #eee;
		color: inherit;
	}
	.news .btList:hover::after {
		background-image: url("../images/ar01.png");
	}
	.news dl {
		display: block;
		width: calc(100% - 2rem);
	}
	.news dt {
		width: auto;
	}
	.news dt:nth-of-type(n+2) {
		margin: .25rem 0 0;
	}
	.news dd,
	.news dd:nth-of-type(n+2) {
		width: auto;
		margin: .1rem 0 0;
		transform: none;
	}
	.news dd a::hover {
		border-bottom-color: transparent;
	}
	.news dd a::after {
		content: none;
	}
}
@media only screen and (max-width:599px) {
	.news {
		margin: .6rem 0;
		position: relative;
	}
	.news .wrap {
		padding: 0 .6rem;
	}
	.news .inner {
		display: block;
		padding: 0;
	}
	.news .inner::before {
		content: none;
	}
	.news .headline {
		display: flex;
		width: auto;
		border-left: 1px solid #c17f78;
		padding: 0.55rem 0 0.55rem 0.3rem;
		justify-content: space-between;
	}
	.news .title {
		margin: 0;
		padding: .08rem 0 0;
	}
	.news .title .en {
		font-size: .4rem;
	}
	.news .title .ja {
		margin: .1rem 0 0;
		font-size: .26rem;
	}
	.news .btList {
		width: 3.59rem;
		margin: 0;
		padding: 0 0 0 .3rem;
		font-size: .21rem;
		line-height: .92rem;
	}
	.news .btList::after {
		width: .14rem;
		height: .15rem;
		right: .22rem;
	}
	.news dl {
		width: auto;
		margin: .4rem 0 0;
	}
	.news .category {
		width: 1.54rem;
		margin: 0 .2rem 0 0;
		font-size: .2rem;
		line-height: .38rem;
	}
	.news .date {
		font-size: .26rem;
		line-height: .38rem;
	}
	.news dt:nth-of-type(n+2) {
		margin: .45rem 0 0;
	}
	.news dd,
	.news dd:nth-of-type(n+2) {
		margin: .2rem 0 0;
	}
	.news dt:nth-of-type(n+4),
	.news dd:nth-of-type(n+4) {
		display: none;
	}
	.news .exp {
		font-size: .2rem;
	}
}

/* fBnr
   ========================================================================== */

.fBnr {
	padding: .1rem 0 .4rem;
	background: #f6f6f6;
}
.fBnr ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.fBnr li {
	width: calc(100% * 232 / 1024);
	margin: .3rem 0 0;
}
.fBnr a {
	display: block;
	border: 1px solid #ddd;
	transition: border-color .3s ease-in;
}
.fBnr a:hover {
	border-color: #b61100;
}

@media only screen and (max-width:959px) {
	.fBnr a:hover {
		border-color: #ddd;
	}
}
@media only screen and (max-width:599px) {
	.fBnr ul {
		padding: 0 .2rem;
	}
	.fBnr li {
		width: calc(100% * 320 / 670);
	}
}
