@charset "UTF-8";
/* CSS Document */
/*=================================
commonLayout
=================================*/
#canvasWave{
	position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 100%;
	z-index: -1;
}
.sectionWrap{
	padding-left: 40px;
    padding-right: 40px;
}
.sectionWrap.bg,
.sectionWrap.bgGray{
	position: relative;
	padding-top: 80px;
	padding-bottom: 80px;
}
.sectionWrap.bg.half::before{
	content: "";
	position: absolute;
	top: 0;
	left:0;
	z-index: 0;
	display: block;
	width: 45%;
	height: 100%;
	background: #f5fffd;
}
.sectionWrap.reverse.bg.half::before{
	right:auto;
	left: 0;
}
.sectionWrap.bgGray{
	background: #f5fffd;
	width: calc(100% - 80px);
    margin-left: auto;
    margin-right: auto;
}

.contentsWrap section+section{
	margin-top: 150px;
}
.contentsWrap .kvArea+section{
	margin-top: 100px;
}

.column-2{
	display: flex;
    align-items: center;
	justify-content: space-between;
}
.column-2 .sectionImg{
	width: 50%;
}
.column-2 .sectionText{
	width: 50%;
	max-width: 570px;
}
@media only screen and (max-width: 1366px) {
	.container {
		width: 100%;
	}
}
@media only screen and (max-width: 1024px) {
	.contentsWrap section+section{
		margin-top: 100px;
	}
	.column-2 {
		flex-flow: column;
	}
	.column-2 .sectionImg {
		width: 80%;
	    margin-bottom: 40px;
	}
	.column-2 .sectionText {
		width: 80%;
		max-width: none;
	}
}
@media only screen and (max-width: 767px) {
	.contentsWrap section+section{
		margin-top: 75px;
	}
	.contentsWrap .kvArea+section{
		margin-top: 75px;
	}
	.sectionWrap.bg, .sectionWrap.bgGray {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.sectionWrap.bgGray {
		width: 100%;
	}
	.contentsWrap section+section{
		margin-top: 50px;
	}
	.sectionWrap {
		padding-left: 6%;
		padding-right: 6%;
	}
	.column-2 {
		justify-content: center;
		flex-flow: column wrap;
	}
	.column-2 .sectionImg{
		width: 100%;
		order: -1;
		margin-bottom: 25px;
	}
	.column-2 .sectionText{
		width: 100%;
		padding-left: 0;
	}
}
@media only screen and (max-width: 320px) {}


/*=================================
animation
=================================*/
.fade{transition: all .6s ease-in-out;}
.delay1{transition-delay: .3s;}
.delay2{transition-delay: .6s;}
.delay3{transition-delay: .9s;}
.delay4{transition-delay: 1.2s;}
.delay5{transition-delay: 1.5s;}
@media only screen and (max-width: 767px) {
	.delay1,.delay2,.delay3,.delay4,.delay5{transition-delay: .3s;}
}


body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;  /* 背景カラー */
  z-index: 9999;  /* 一番手前に */
  pointer-events: none;  /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
  opacity: 0;  /* 初期値 : 透過状態 */
  -webkit-transition: opacity .7s ease;  /* アニメーション時間は 0.8秒 */
  transition: opacity .7s ease;
}
body.fadeout::after{
	opacity: 1;
}
body.fadeout .contentsWrap{
  transform:scale(1.0075);
}
/*ie*/
@media all and (-ms-high-contrast: none) {
	body.fadeout .contentsWrap{
  		transform:scale(1);
	}
}
body .contentsWrap{
    transition: transform .7s ease-out;
	transform: scale(1);
}

.fadein{
	transition: all 1s;
	opacity: 0;
	transform: rotate(0) translate3D(0, 5%, 0);
}
.fadein.inview{
    transform: rotate(0) translate3D(0, 0, 0);
    opacity: 1;
}
.swipeIcon {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: 100px;
	animation: swipeAnimation 1s ease-in-out infinite alternate;
}
@keyframes swipeAnimation{
	0% {transform: translate(-30%, -50%);}
	to {transform: translate(-70%, -50%);}
}
@media only screen and (max-width:1024px) {
	.swipescroll{position: relative;}
	.swipescroll::before{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0,0,0,.5);
		width: 100%;
		height: 100%;
		z-index: 1;
		pointer-events: none;
		transition: all .3s;
	}
	.swipescroll.active::before{
		opacity: 0;
	}
	.swipeWrap{
		position: relative;
		overflow: hidden;
	}
	.swipeIcon {
		display: block;
	}
}

/*=================================
textDesign
=================================*/
h1{
	text-align: center;
    color: #fff;
	padding: 10px 15px;
    font-size: 1.1rem;
    background: #2f2b28;
	line-height: 1.4;
	opacity: 0;
}
.pageload h1{opacity: 1;}
.title_en{
	margin-top: 25px;
	display: block;
	color: #69bfb1;
	font-size: 1.4rem;
	font-family: 'Lato', sans-serif;
	visibility: hidden;
	opacity: 0;
}
.count{
	color: #69bfb1;
	font-size: 1.6rem;
	font-family: 'Cinzel', serif;
	font-weight: 500;
}
.num{
	color: #69bfb1;
	font-family: 'Cinzel', serif;
	font-weight: 400;
}
.imgcap,
.imgcap_w{
	position: absolute;
    bottom: 2px;
    right: 2px;
    z-index: 1;
    color: rgba(0,0,0,.3);
	font-size: 1.1rem;
}
.imgcap_w{
    color: rgba(255,255,255,.8);
	font-size: 1.1rem;
}
.copyright{
	text-align: center;
    color: #fff;
    margin-top: 30px;
    padding: 15px;
    border-top: 1px solid rgba(255,255,255,.25);
    font-size: 1.1rem;
	font-family: YakuHanMP_Noto, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
	background: #403b37;
}
.pageTitle{
	font-size: 3.6rem;
	font-weight: 500;
    line-height: 1.4;
}
.pageTitle ~ *{
	margin-top: 30px;
}
.sectionTitle {
	font-size: 2.8rem;
	font-weight: 500;
    line-height: 1.4;
}
.sectionTitle ~ *{
	margin-top: 50px;
}
.sectionText p{
	font-size: 1.4rem;
}
@media only screen and (max-width: 1240px) {}
@media only screen and (max-width: 991px) {
	.pageTitle {
		font-size: 3.2rem;
	}
	.sectionTitle {
		font-size: 3rem;
	}
}
@media only screen and (max-width: 767px) {
	.pageTitle {
		font-size: 3rem;
	}
	.sectionTitle {
		font-size: 2.6rem;
	}
	.sectionTitle ~ * {
    	margin-top: 25px;
	}
	.sectionTitle .title_en {
		margin-top: 15px;
		font-size: 1.1rem;
	}
}
@media only screen and (max-width: 320px) {
	.sectionTitle {
		font-size: 2.4rem;
	}
}


/*=================================
header
=================================*/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 100;
    background: rgba(255,255,255,.0);
	transition: all .5s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px;
}
header.active {
    background: rgba(255,255,255,1);
	height: 60px;
}
header .siteTitle{
    width: 300px;
}
header .siteTitle a{
	display: block;
    width: 100%;
    max-width: 300px;
}
header #gNav{
	height: 100%;
}
header #gNav ul:not(.subNav){
	display: flex;
	height: 100%;
}
header #gNav ul:not(.subNav) li{
	position: relative;
    margin: 0 15px;
    text-align: center;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.2;
}
header #gNav ul li.comingsoon{
	display: flex;
	align-items: center;
	opacity: .5;
}
header #gNav ul:not(.subNav) li a{
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
header #gNav ul:not(.subNav) > li > a::after{
	content: "";
	width: 20px;
	height: 2px;
	background: #69bfb1;
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	margin: auto;
	transition: all .25s;
}
header #gNav ul li a:hover::after,
header #gNav ul li.is-current a::after{bottom: 0;}

header #gNav ul.subNav{
	display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 250px;
    transform: translate(-50%,0%);
    padding: 20px;
    background: rgba(255,255,255,.8);
	pointer-events: none;
	transition: all .3s ease-in-out;
	opacity: 0;
	border-bottom: 2px solid rgba(105,191,177,.5); 
}
header #gNav ul:not(.subNav) li:hover ul.subNav{
	opacity: 1;
	pointer-events: auto;
}
header #gNav ul.subNav li{
	position: relative;
    padding-left: 20px;
    font-size: 1.3rem;
    margin: 0 auto;
    text-align: left;
    line-height: 1.4;
}
header #gNav ul.subNav li::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid #69bfb1;
    border-right: 1px solid #69bfb1;
    transform: translateY(-50%) rotate(45deg);
}
header #gNav ul.subNav li+li{
	margin-top: 15px;
}
header #gNav ul.subNav li a{
	transition: all .3s;
}
header #gNav ul.subNav li a:hover{
	color: #69bfb1;
}
header #gNav ul.subNav.active{
	opacity: 1;
	pointer-events: auto;
}
header #gNavBtnWrap{
	display: none;
}
@media only screen and (max-width: 1240px) {
	header .siteTitle {
		width: calc(100% - 60px);
	}
	
	header #gNav ul.subNav{display: none;}
	header nav{ 
		position: fixed; width: 300px; top: 0; left: auto; right: 0; bottom: 0; z-index: 990; display: flex; flex-direction: column; justify-content: center; transform: translateX(100%); transition: all .6s cubic-bezier(0.215, 0.61, 0.355, 1); padding: 100px 0;
	}
	header #gNav ul {
		align-items: center;
		justify-content: center;
		flex-flow: row wrap;
	}
	header #gNav ul li{ width: 100%; height: auto;font-size: 1.6rem;}
	header #gNav ul li.comingsoon,
	header #gNav ul li a{justify-content: center;}
	header #gNav ul li.is-current a{color: #69bfb1;}
	header #gNav ul li a:hover::after,
	header #gNav ul li.is-current a::after{content: none;}
	.open header nav{
		visibility: visible; opacity: 1; transform: translateX(0); background: rgba(255,255,255,1);
	}
	header #gNavBtnWrap{
		display: block;
		width: 34px;
		height: 34px;
		pointer-events: auto;
		z-index: 1000;
		cursor: pointer;
	}
	
	header #gNavBtn,
	header #gNavBtn span { display: inline-block; transition: all .4s; box-sizing: border-box;}
	header #gNavBtn { position: relative; width: 34px; height: 34px;}
	header #gNavBtn span { transition: all .6s cubic-bezier(0.215, 0.61, 0.355, 1);}
	header #gNavBtn span:nth-of-type(1),
	header #gNavBtn span:nth-of-type(2),
	header #gNavBtn span:nth-of-type(3) { position: absolute; left: 0; width: 100%; height: 1px; background-color:#403b38; border-radius: 4px;}
	header #gNavBtn span:nth-of-type(1) { top: 0;}
	header #gNavBtn span:nth-of-type(2) { top: 8px;}
	header #gNavBtn span:nth-of-type(3) { top: 16px;}
	header #gNavBtn span:nth-of-type(4),
	header #gNavBtn span:nth-of-type(5) { position: absolute; bottom: 0; left: 0; width: 100%; font-size: 10px; text-align: center; letter-spacing: .1em;}
	header #gNavBtn span:nth-of-type(5),
	.open header #gNavBtn span:nth-of-type(2),
	.open header #gNavBtn span:nth-of-type(4) { opacity: 0;}
	.open header #gNavBtn span:nth-of-type(5) { opacity: 1;color: #403b38;}
	.open header #gNavBtn span:nth-of-type(1) { transform: translateY(8px) rotate(-45deg);background: #403b38;}
	.open header #gNavBtn span:nth-of-type(3) { transform: translateY(-8px) rotate(45deg);background: #403b38;}
}
@media only screen and (max-width: 991px) {}
@media only screen and (max-width: 767px) {
	header {height: 60px;}
	header {padding: 0 6%;}
	header .siteTitle p {font-size: 1.4rem;}
	header nav{width: 100%;padding: 100px 0;}
	header #gNavBtn {width: 28px;display: block;margin: auto;}
	header #gNavBtn span:nth-of-type(4),
	header #gNavBtn span:nth-of-type(5) {left: 50%;font-size: 1rem;letter-spacing: 0;transform: translateX(-55%);}
}
@media only screen and (max-width: 320px) {}


/*=================================
.kvArea
=================================*/
.kvArea .sectionWrap{
    padding-top: 100px;
	width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
	align-items: center;
}
.kvArea .sectionWrap{
    padding-top: 100px;
	width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
	align-items: center;
}
.kvArea .kvText{
	width: 35%;
}
.kvArea .kvText p{
	font-size: 1.4rem;
	color: #807770;
}
.kvArea .swiper-container{
	width: 65%;
}
.kvArea .slide-item ul{
	display: flex;
	margin: 0 -15px;
}
.kvArea .slide-item ul li{
	position: relative;
	margin: 0 15px;
	overflow: hidden;
}
.kvArea .slide-item ul li::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all .3s;
	z-index: 1;
	background: #fff;
}
.kvArea .slide-item ul li:nth-child(2)::before{transition-delay: .1s;}
.kvArea .slide-item ul li:nth-child(3)::before{transition-delay: .2s;}
.kvArea .slide-item.slick-active ul li::before{
	left: 100%;
	opacity: 0;
}
.kvArea .slide-item ul li:nth-child(2){margin-top: 3.75%;}
.kvArea .slick-dots {
	bottom: 0;
    width: auto;
    right: 0;
}
.kvArea .slick-dots li {
    height: 4px;
    width: 15px;
    margin: 0 5px;
    padding: 0;
}
.kvArea .slick-dots li button {
    height: 4px;
    width: 15px;
    padding: 0;
}
.kvArea .slick-dots li button:before {
	content: "";
    height: 4px;
	width: 15px;
    background: #69bfb1;
}
@media only screen and (min-width: 1921px) {
	.kvArea .sectionWrap{
		max-width: 92%;
	}	
}
@media only screen and (max-width: 1024px) {
	.kvArea .sectionWrap {
		flex-flow: column;
	}
	.kvArea .kvText{
		width: 100%;
	}
	.kvArea .swiper-container{
		width: 100%;
		order: -1;
		margin-bottom: 40px;
	}
}
@media only screen and (max-width: 767px) {
	.kvArea .slide-item ul {
		margin: 0 -5px;
	}
	.kvArea .slide-item ul li {
		height: 300px;
		margin: 0 5px;
	}
	.kvArea .slide-item ul li:nth-child(2) {
		margin-top: 5%;
	}
	.kvArea .slide-item ul li figure{
		height: 100%;
	}
	.kvArea .slide-item ul li figure img{
		object-position: center;
	}
}

/*=================================
meritArea
=================================*/
.meritList{
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}
.meritList li{
	position: relative;
	width: 33.3333%;
	opacity: 0;
    transition: opacity .6s ease-in-out;
}
.meritList li.inview{
	opacity: 1;
}
.meritList li:nth-child(even){
	background: rgba(58,166,148,.15);
	transition-delay: .2s;
}
.meritList li:nth-child(odd){
	background: #f5fffd;
}
.meritList li+li:not(:nth-child(4)){
	border-left: 2px solid #fff;
}
.meritList li:nth-child(n+4){
	border-top: 2px solid #fff;
}
.meritList li .count{
	position: absolute;
    top: 30px;
    left: 40px;
    z-index: 1;
}
.meritList li .num{
	display: inline-block;
	margin-left: 5px;
	font-size: 5rem;
}
.meritList li .meritText{
	padding: 30px 40px;
}
.meritList li h4{
	font-size: 2.6rem;
	font-weight: 400;
	color: #3aa694;
	margin-bottom: 15px;
}
@media only screen and (max-width: 991px) {
	.meritList li {
		width: 50%;
	}
	.meritList li+li:not(:nth-child(4)){
		border-left: none;
	}
	.meritList li+li:not(:nth-child(odd)) {
		border-left: 2px solid #fff;
	}
	.meritList li .count {
		top: 10px;
		left: 10px;
	}
	.meritList li .num {
		font-size: 4rem;
	}
}
@media only screen and (max-width: 767px) {
	.meritList li {
		width: 100%;
	}
	.meritList li .meritText {
		padding: 20px;
	}
	.meritList li h4 {
		font-size: 2rem;
	}
	.meritList li+li:not(:nth-child(odd)) {
		border-left: none;
	}
	.meritList li:nth-child(n+2) {
		border-top: 2px solid #fff;
	}
}


/*=================================
prchaseArea
=================================*/
.prchaseArea .info {
    color: #3aa694;
    position: relative;
}
.prchaseArea .name {
    font-family: YakuHanMP_Noto, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
}
.prchaseArea .address {
    font-size: 1.2rem;
}


/*=================================
qandaArea
=================================*/
.qandaArea dl{
	transition: all .6s ease-in-out;
	padding: 15px;
	transform: translateY(-30px);
    opacity: 0;
}
.qandaArea dl.inview{
	transform: translateY(0);
    opacity: 1;
}
.qandaArea dl:nth-of-type(odd){
	background: #fafffe;
}
.qandaArea dt{
	position: relative;
	font-size: 1.8rem;
	font-weight: 500;
	color: #3aa694;
	padding:15px 15px 15px 50px;
}
.qandaArea dt::before{
	content: "Q.";
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 2.8rem;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.qandaArea dd{
	border-top:1px solid #e2f2ef; 
	padding: 15px 15px 15px 50px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	line-height: 1.8;
}
@media only screen and (max-width: 991px) {
	.qandaArea dt {
		padding: 15px 0 15px 30px;
	}
	.qandaArea dt::before {
		font-size: 2rem;
	}
	.qandaArea dd {
		padding: 15px 0 15px 30px;
	}
}


/*=================================
.contentsNav
=================================*/
.contentsNav .sectionWrap{
	position: relative;
	width: calc(100% - 80px);
    margin: 0 auto;
    padding: 0;
}
.contentsNav .backImg > *{
	opacity: 0;
	transition: all .6s ease-in-out;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;		
}
.contentsNav .backImg div:nth-of-type(1){
	background: url("../../img/element/fnav01.jpg") no-repeat;
	background-size: cover;
	background-position: center;
}
.contentsNav .backImg div:nth-of-type(2){
	background: url("../../img/element/fnav02.jpg") no-repeat;
	background-size: cover;
	background-position: center;
}
.contentsNav .backImg div:nth-of-type(3){
	background: url("../../img/element/fnav03.jpg") no-repeat;
	background-size: cover;
	background-position: center;
}
.contentsNav .backImg div:nth-of-type(4){
	background: url("../../img/element/fnav04.jpg") no-repeat;
	background-size: cover;
	background-position: center;
}
.contentsNav[class*="active"] .backImg div.active{opacity: 1;}

.contentsNav ul li figure{
	height: 100%;
	transition: all .6s ease-in-out;
	opacity: 1;
}
.contentsNav[class*="active"] ul li figure{opacity: 0;}

.contentsNav ul{
	display: flex;
    flex-flow: row wrap;
}
.contentsNav ul li{
	position: relative;
	width: 33.3333%;
	height: 400px;
}
.contentsNav ul li .object-fit {
    object-position: center;
    font-family: 'object-fit: cover;object-position: center;';
}
.contentsNav ul li+li{border-left: 1px solid #fff;}
.contentsNav ul li:last-child{
	border-left: none;
	border-top: 1px solid #fff;
}
.contentsNav ul li a{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.contentsNav ul li a::before,
.contentsNav ul li.comingsoon::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin:auto;
	background: rgba(25,42,51,.3);
	z-index: 1;
	transition: all .6s ease-in-out;
}
.contentsNav ul li.comingsoon{
	width: 100%;
}
.contentsNav ul li.comingsoon figure{
	opacity: .45;
}
.contentsNav ul li.comingsoon .view{
	font-size: 2rem;
}
.contentsNav ul li.comingsoon::before{
	background: rgba(0,0,0,.5);
}
.contentsNav ul:hover li::before{
	background: rgba(25,42,51,.3);
}
.contentsNav ul li.comingsoon:hover::before{
	background: rgba(0,0,0,.5);
}

.contentsNav ul li.active a::before{
	background: rgba(25,42,51,.65);
}
.contentsNav ul li .inner{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin:auto;
	transform: translateY(-50%);
	z-index: 1;
	display: flex;
    flex-flow: wrap;
    justify-content: center;
}
.contentsNav ul li h3{
    font-size: 2.8rem;
    text-align: center;
    color: #fff;
    font-weight: 500;
	width: 100%;
}
.contentsNav ul li .title_en{
	visibility: unset;
	opacity: 1;
    font-size: 1.2rem;
}
.contentsNav ul li .viewBtn {
	color: #fff;
	margin-top: 50px;
	border-bottom: none;
}
.contentsNav ul li .viewBtn.comingsoon{
	font-size: 2rem;
    margin-top: 25px;
}
.contentsNav ul li .viewBtn::before{
	background: #fff;
}
.contentsNav ul li:not(.comingsoon):hover .viewBtn::before{
	left: 0%;
	right: auto;
	width: 100%;
}
@media only screen and (max-width: 1024px) {
	.contentsNav .backImg{
		display: none;
	}
	.contentsNav ul li {
		width: 100%;
		height: 150px;
		background: rgba(63,168,151,.15);
	}
	.contentsNav ul li:nth-child(even){border-left: none;}
	.contentsNav ul li:nth-child(n+2){border-top: 1px solid #fff;}
	.contentsNav ul li .viewBtn {
	    display: none;
	}
	.contentsNav ul li a{
		display: flex;
	}
	.contentsNav ul li a::before,
	.contentsNav ul li.comingsoon::before {
		content: none;
	}
	.contentsNav ul li a::before{
		display: flex;
	}
	.contentsNav ul li.comingsoon{
		display: flex;
	}
	.contentsNav ul li figure{
		width: 35%;
	}
	.contentsNav ul li figure img.object-fit{
		object-position: 50%;
	}
	.contentsNav ul li .inner {
		position: static;
		transform: none;
		width: 55%;
		padding: 15px;
		flex-flow: row;
    	align-items: center;
	}
	.contentsNav ul li h3 {
		font-size: 2.2rem;
		text-align: left;
		color: #403b38;
	}
	.contentsNav ul li h3 .title_en{
		color: #4aad9d;
	}
}
@media only screen and (max-width: 767px) {
	.contentsNav .sectionWrap {
		width: 88%;
	}
	.contentsNav ul li {
		height: 120px;
	}
	.contentsNav ul li figure {
		width: 30%;
	}
	.contentsNav ul li .inner {
		width: 70%;
		padding: 0 10px;
	}
	.contentsNav ul li h3 {
		font-size: 1.8rem;
	}
	.contentsNav ul li h3 .title_en {
		margin-top: 10px;
		font-size: 1.1rem;
	}
}

/*=================================
footer
=================================*/
footer{
	background: #f2eeeb;
    margin-top: 100px;
    position: relative;
    z-index: 0;
}
footer .fNav{
	font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.2rem;
    padding: 20px 0;
    border-bottom: 1px solid #fff;
}
footer .fNav ul{
	display: flex;
    justify-content: center;
}
footer .fNav ul li{
	padding: 0 15px;
}
footer .fNav ul li.comingsoon{
	opacity: .5;
}
footer .fNav ul li+li{
    border-left: 1px solid #fff;
}
footer .logo{
    width: 300px;
    margin: 20px auto;
}
footer .kurasuma{
	border-bottom: 1px solid #fff;
}
footer .kurasuma p{
	font-size: 1.2rem;
    line-height: 1.4;
    text-align: center;
    margin-top: 30px;
}
footer .kurasuma p span{
	display: inline-block;
	font-weight: bold;
	padding-bottom: 8px;
}
footer .kurasuma .logo2{
	width: 180px;
	margin: 15px auto 30px;
}

@media only screen and (max-width: 1024px) {}
@media only screen and (max-width: 991px) {
	footer .fNav ul {flex-flow: wrap;}
	footer {
		margin-top: 60px;
	}
}
@media only screen and (max-width: 767px) {
	footer {
		margin-top: 30px;
	}
	footer .fNav ul li{width: calc(100% / 2);text-align: center;border-left: none!important;}
	footer .fNav ul li:nth-child(even){border-left: 1px solid #fff!important;}
	footer .fNav ul li:nth-child(n+3){margin-top: 15px;}
	footer .fNav ul li:last-child:nth-child(odd){width: 100%;}
	footer .logo {width: 250px;margin: 15px auto;}
	footer .kurasuma .logo2 {width: 160px; margin: 20px auto;}

}
@media only screen and (max-width: 320px) {}


/*=================================
btnDesign
=================================*/
.viewBtn{
	position: relative;
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
	font-weight: 500;
	color: #403b38;
	border-bottom: 1px solid rgba(128,119,112,.5);
    padding-bottom: 20px;
}
.viewBtn::before{
	content: "";
	background: #807770;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 0%;
	height: 1px;
	transition: all .3s ease;
}
.viewBtn:hover::before{
	left: 0%;
	right: auto;
	width: 100%;
}
.viewBtn.comingsoon{
    font-size: 2rem;
	font-weight: 400;
	border-bottom: none;
    padding-bottom: 0;
}
.viewBtn.comingsoon::before{
	content: none;
}
.cvBtn{}

@keyframes borderAnimation{
	0%{
		right: auto;
		width: 0%;
	}
	100%{
		left: 0%;
		width: 100%;
	}
}
@media only screen and (max-width: 1240px) {}
@media only screen and (max-width: 991px) {
	.viewBtn {
		border-bottom: 1px solid rgba(128,119,112,.25);
		padding-bottom: 15px;
	}
	.viewBtn::before{
		animation: borderAnimation 1.5s ease-in-out infinite;
	}
}
@media only screen and (max-width: 767px) {}
@media only screen and (max-width: 320px) {}