@charset "utf-8";
@import url('common.css');
@import url('amime.css');
@import url('button.css');


/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
TOP PAGE
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/



/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
PCページレイアウト
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */


@media all and (min-width: 1025px) {


/* visu */
/* 全体の構成 */
#visu {
  position: relative;
  width: 100%;
  height: calc(100vh - 160px);
	overflow:hidden;
}

/* 共通 */
.bg-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  opacity: 0;
  animation: fadebg 21s infinite, zoombg 21s linear infinite;
}

/* 各スライド */
.bg-slide.slide1 {
  background-image: url("../images/visu_top01.webp");
  animation-delay: 0s, 0s; /* fadeとzoomの両方 */
}
.bg-slide.slide2 {
  background-image: url("../images/visu_top02.webp");
  animation-delay: 7s, 7s;
}
.bg-slide.slide3 {
  background-image: url("../images/visu_top03.webp");
  animation-delay: 14s, 14s;
}

/* 7秒ごとに切り替わり、1秒重なりでフェード */
@keyframes fadebg {
  0% { opacity: 0; }
  4.76% { opacity: 1; }   /* 1秒かけてフェードイン */
  33.33% { opacity: 1; }  /* 6秒キープ */
  38.09% { opacity: 0; }  /* 1秒かけてフェードアウト */
  100% { opacity: 0; }
}

/* ズーム */
@keyframes zoombg {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}



#visu div.news{
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	bottom: 30px;
	right: 0;
	text-align:left;
}

#visu div.news a{
	display: block;
	position: relative;
	margin:0 0 0 0;
	padding:30px 10px 30px 10px;
	font-size:var(--font-16);
	font-weight:400;
	line-height:1.8;
	background:var(--color-nibe);
	color:var(--color-WH);
	letter-spacing: 1px;

	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;

}

#visu div.news a:hover {
	text-decoration: none;
}




#visutxt{
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	top: 66px;
	left: 9%;
	text-align:left;
}

#visutxt h2{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-36);
	font-weight:400;
	line-height:1.8;
	letter-spacing: 15px;
	color:var(--color-WH);
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

#visutxt h2 span {
  color: var(--color-nibe);
}





/* contBtn */

#contBtn{
	position: relative;
	width:100%;
	margin:0 0 0 0;
	padding:0 0 0 0;
	display: flex;
	justify-content:space-between;
	align-items:stretch;
	flex-wrap:wrap;
}

#contBtn div.cuisine,
#contBtn div.occasion,
#contBtn div.rooms{
	position: relative;
	display:block;
	width:calc(100% / 3);
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-24);
	font-weight:600;
	line-height:1.2;
	text-align:center;
	background:var(--color-nibe);
}

#contBtn a:hover{
	opacity:0.8;
}


#contBtn div.cuisine{
	background:var(--color-nibe);
}
#contBtn div.rooms{
	background:var(--color-gold);
}
#contBtn div.occasion{
	background:var(--color-crem);
}

#contBtn h3{
	margin:0 auto 0 auto;
	padding:80px 0 0 0;
	font-size:var(--font-35);
	font-weight:300;
	line-height:1.2;
	color:var(--color-WH);
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	text-align:center;
	letter-spacing: 13px;
}

#contBtn p{
	margin:0 auto 0 auto;
	padding:40px 0 0 0;
	font-size:var(--font-14);
	font-weight:400;
	line-height:1.8;
	color:var(--color-WH);
	letter-spacing: 1px;
}

#contBtn div.occasion h3,
#contBtn div.occasion p{
	color:var(--color-nibe);
}



#contBtn div.icon{
  position: absolute;
  display: block;
	width: 64px;
	height:64px;
	margin:0 0 0 0;
	padding:0 0 0 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#contBtn div.icon::before{
  position: absolute;
  margin: 0 0 0 -32px;
  content: "";
  vertical-align: middle;
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  background:var(--color-orag);
  border-radius: 50px;
  top: 8px;
  left: 50%;
}

#contBtn div.icon::after{
  position: absolute;
  margin: 0 0 0 -9px;
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 34px;
  left: 50%;
}

#contBtn div.ph{
  position: relative;
  display: block;
	width: 100%;
	height:380px;
	margin:80px 0 0 0;
	padding:0 0 0 0;
	background:var(--color-nibe);
	overflow:hidden;
}

#contBtn a div.ph img{
	width: 100%;
	height:380px;
	margin:0 0 0 0;
	padding:0 0 0 0;
	object-fit: cover;
	transition: transform 0.5s ease;
}

#contBtn a:hover div.ph img {
	width: 100%;
	height:380px;
	object-fit: cover;
	transform: scale(1.05);
}




/* topOmotenashi */

#topOmotenashi{
	position: relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:10vw 0 15vw 0;
	background: url(../images/bg_top01.webp) no-repeat center 0 fixed;
	background-size: cover;
}

#topOmotenashi div.block{
	position: relative;
	width:86%;
	max-width:1380px;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	display: flex;
	justify-content:space-between;
	align-items:stretch;
	flex-wrap:wrap;
	flex-direction:row-reverse;
}

#topOmotenashi h2{
	margin:2vw 12vw 0 0;
	padding:0 0 0 0;
	font-size:var(--font-36);
	font-weight:400;
	line-height:1.8;
	letter-spacing: 15px;
	color:var(--color-WH);
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

#topOmotenashi p{
	width:55%;
	max-width:700px;
	margin:6vw 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-15);
	font-weight:400;
	line-height:2.4;
	letter-spacing: 1px;
	color:var(--color-WH);
}






/* topHistory */

#topHistory{
	position: relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:10vw 0 10vw 0;
	background:url(../images/bg_tophistory.webp) no-repeat 0 28vw;
	background-size: 23vw auto;
}

#topHistory div.block{
	position: relative;
	width:86%;
	max-width:1380px;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	display: flex;
	justify-content:center;　
	align-items:stretch;
	flex-wrap:wrap;
}

#topHistory h2{
	margin:0 6vw 0 0;
	padding:0 0 0 0;
	font-size:var(--font-36);
	font-weight:400;
	line-height:1.8;
	letter-spacing: 15px;
	color:var(--color-nibe);
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

#topHistory p{
	width:60%;
	max-width:700px;
	margin:3vw 0 0 7vw;
	padding:0 0 0 0;
	font-size:var(--font-15);
	font-weight:400;
	line-height:2.4;
	letter-spacing: 1px;
	color:var(--color-nibe);
}

#topHistory div.ph{
	position: relative;
	width:86%;
	max-width:1085px;
	margin:8vw auto 0 auto;
	padding:0 0 0 0;
}

#topHistory div.ph img{
	width:100%;
}






/* topFuture */

#topFuture{
	position: relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:10vw 0 10vw 0;
	background:var(--color-nibe);
	z-index:-2;
}

#topFuture div.block{
	position: relative;
	width:86%;
	max-width:1180px;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	display: flex;
	justify-content:space-between;
	align-items:stretch;
	flex-wrap:wrap;
	flex-direction:row-reverse;
	background:url(../images/bg_topfuture.webp) no-repeat bottom 6vw right -8vw;
	background-size: 40vw auto;
}

#topFuture h2{
	position: relative;
	margin:2vw 12vw 0 0;
	padding:0 0 0 0;
	font-size:var(--font-36);
	font-weight:400;
	line-height:1.8;
	letter-spacing: 15px;
	color:var(--color-WH);
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

#topFuture p{
	width:55%;
	max-width:700px;
	margin:3vw 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-15);
	font-weight:400;
	line-height:2.4;
	letter-spacing: 1px;
	color:var(--color-WH);
}

#topFuture div.ph{
	position: relative;
	width:88%;
	max-width:1450px;
	margin:-4vw 0 0 0;
	padding:0 0 0 0;
	z-index:-1;
}

#topFuture div.ph img{
	width:100%;
}






/* topMap */

#topMap{
	position: relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:8vw 0 10vw 0;
	text-align:center;
}

#topMap h2{
	position: relative;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-28);
	font-weight:400;
	line-height:1.8;
	letter-spacing: 5px;
}

#topMap div.map{
	position: relative;
	width:90%;
	max-width:1200px;
	margin:4vw auto 0 auto;
	padding:0 0 0 0;
}

#topMap div.map iframe{
	width:100%;
}

#topMap table{
	width:90%;
	max-width:1200px;
	margin:3vw auto 0 auto;
	padding:0;
	border-collapse: separate;
	border-collapse: collapse;
}

#topMap table th{
	width:15%;
	max-width:200px;
	margin:0 0 0 0;
	padding:10px 0;
	font-size:var(--font-15);
	font-weight:400;
	line-height:1.8;
	letter-spacing: 1px;
	text-align:left;
}

#topMap table td{
	margin:0 0 0 0;
	padding:10px 0;
	font-size:var(--font-15);
	font-weight:400;
	line-height:1.8;
	letter-spacing: 1px;
	text-align:left;
}
 
#topMap table td span{
	font-size:var(--font-13);
}


}




/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
SPページレイアウト
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

@media all and (max-width: 1024px) {

/* visu */
/* 全体の構成 */
#visu {
  position: relative;
	margin:-20px 0 0 0;
  width: 100%;
  height: calc(100vh - 160px);
	overflow:hidden;
}

/* 共通 */
.bg-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  opacity: 0;
  animation: fadebg 21s infinite, zoombg 21s linear infinite;
  z-index:-1;
}

/* 各スライド */
.bg-slide.slide1 {
  background-image: url("../images/visu_top01_sp.webp");
  animation-delay: 0s, 0s; /* fadeとzoomの両方 */
}
.bg-slide.slide2 {
  background-image: url("../images/visu_top02_sp.webp");
  animation-delay: 7s, 7s;
}
.bg-slide.slide3 {
  background-image: url("../images/visu_top03_sp.webp");
  animation-delay: 14s, 14s;
}

/* 7秒ごとに切り替わり、1秒重なりでフェード */
@keyframes fadebg {
  0% { opacity: 0; }
  4.76% { opacity: 1; }   /* 1秒かけてフェードイン */
  33.33% { opacity: 1; }  /* 6秒キープ */
  38.09% { opacity: 0; }  /* 1秒かけてフェードアウト */
  100% { opacity: 0; }
}

/* ズーム */
@keyframes zoombg {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}




#visu div.news{
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	bottom: 10px;
	right: 0;
	text-align:center;
}

#visu div.news a{
	display: block;
	position: relative;
	margin:0 0 0 0;
	padding:7px 20px 7px 20px;
	font-size:var(--font-14);
	font-weight:400;
	line-height:1.8;
	background:var(--color-nibe);
	color:var(--color-WH);
	letter-spacing: 0px;

}

#visu div.news a:hover {
	text-decoration: none;
}


#visutxt{
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	top: 80px;
	left: 10%;
	text-align:left;
}

#visutxt h2{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-26);
	font-weight:400;
	line-height:1.8;
	letter-spacing: 10px;
	color:var(--color-WH);
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

#visutxt h2 span {
  color: var(--color-nibe);
}





/* contBtn */

#contBtn{
	position: relative;
	width:100%;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#contBtn div.cuisine,
#contBtn div.occasion,
#contBtn div.rooms{
	position: relative;
	display:block;
	width:100%;
	margin:0 0 0 0;
	padding:0 0 50px 0;
	font-size:var(--font-20);
	font-weight:600;
	line-height:1.2;
	text-align:center;
	background:var(--color-nibe);
}

#contBtn a{
	display: flex;
	align-items:stretch;
	flex-wrap:wrap;
	list-style-type:none;
}

#contBtn a:hover{
	opacity:0.8;
}


#contBtn div.cuisine{
	background:var(--color-nibe);
}
#contBtn div.rooms{
	background:var(--color-gold);
}
#contBtn div.occasion{
	background:var(--color-crem);
}

#contBtn h3{
	width: 20%;
	margin:0 0 0 0;
	padding:50px 0 0 0;
	font-size:var(--font-30);
	font-weight:300;
	line-height:1.2;
	color:var(--color-WH);
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	letter-spacing: 13px;
	text-align:left;
}

#contBtn p{
	width: 60%;
	margin:0 auto 0 auto;
	padding:80px 0 0 5%;
	font-size:var(--font-14);
	font-weight:400;
	line-height:1.8;
	color:var(--color-WH);
	letter-spacing: 1px;
	text-align:left;
}

#contBtn div.occasion h3,
#contBtn div.occasion p{
	color:var(--color-nibe);
}



#contBtn div.icon{
  position: absolute;
  display: block;
	margin:0 0 0 0;
	padding:0 0 0 0;
	bottom: 22px;
	left: 50%;
	transform: translate(-50%, 0);
}

#contBtn div.icon::before{
  position: absolute;
  margin: 0 0 0 -30px;
  content: "";
  vertical-align: middle;
  box-sizing: border-box;
	width: 55px;
	height:55px;
  background:var(--color-orag);
  border-radius: 50px;
  bottom: 0;
  left: 50%;
}

#contBtn div.icon::after{
  position: absolute;
  margin: 0 0 0 -9px;
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  bottom: 22px;
  left: 50%;
}

#contBtn div.ph{
  position: relative;
  display: block;
	width: 94%;
	height:55vw;
	margin:30px auto 0 auto;
	padding:0 0 0 0;
	background:var(--color-nibe);
	overflow:hidden;
}

#contBtn a div.ph img{
	width: 100%;
	height:55vw;
	margin:0 0 0 0;
	padding:0 0 0 0;
	object-fit: cover;
	transition: transform 0.5s ease;
}

#contBtn a:hover div.ph img {
	width: 100%;
	height:55vw;
	object-fit: cover;
	transform: scale(1.05);
}




/* topOmotenashi */

#topOmotenashi{
	position: relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:10vw 0 15vw 0;
	background: url(../images/bg_top01.webp) no-repeat center 0;
	background-size: cover;
}

#topOmotenashi div.block{
	position: relative;
	width:86%;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
}


#topOmotenashi div.h2-wrapper {
  display: flex;
  justify-content: center; /* 横方向中央 */
  align-items: flex-start; /* 上から積む */
}

#topOmotenashi h2{
  writing-mode: vertical-rl;
  margin: 50px 0 0 0;
  padding: 0;
  font-size: var(--font-22);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 10px;
  color: var(--color-WH);
}

#topOmotenashi p{
	margin:50px 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-13);
	font-weight:400;
	line-height:2;
	letter-spacing: 1px;
	color:var(--color-WH);
}






/* topHistory */

#topHistory{
	position: relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:10vw 0 10vw 0;
	background:url(../images/bg_tophistory.webp) no-repeat 0 180px;
	background-size: 200px auto;
}

#topHistory div.block{
	position: relative;
	width:86%;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
}

#topHistory div.h2-wrapper {
	width:100%;
  display: flex;
  justify-content: center; /* 横方向中央 */
  align-items: flex-start; /* 上から積む */
}

#topHistory h2{
  writing-mode: vertical-rl;
  margin: 50px 0 0 0;
  padding: 0;
  font-size: var(--font-22);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 10px;
}

#topHistory p{
	margin:50px 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-13);
	font-weight:400;
	line-height:2;
	letter-spacing: 1px;
	color:var(--color-nibe);
}

#topHistory div.ph{
	position: relative;
	width:86%;
	margin:8vw auto 0 auto;
	padding:0 0 0 0;
}

#topHistory div.ph img{
	width:100%;
}






/* topFuture */

#topFuture{
	position: relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:10vw 0 0 0;
	background:var(--color-nibe);
	z-index:-2;
}

#topFuture div.block{
	position: relative;
	width:86%;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	background:url(../images/bg_topfuture.webp) no-repeat center 150px;
	background-size: 300px auto;
}

#topFuture div.h2-wrapper {
	width:100%;
  display: flex;
  justify-content: center; /* 横方向中央 */
  align-items: flex-start; /* 上から積む */
}

#topFuture h2{
  writing-mode: vertical-rl;
  margin: 50px 0 0 0;
  padding: 0;
  font-size: var(--font-22);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 10px;
  color: var(--color-WH);
}

#topFuture p{
	margin:50px 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-13);
	font-weight:400;
	line-height:2;
	letter-spacing: 1px;
	color:var(--color-WH);
}

#topFuture div.ph{
	position: relative;
	margin:50px 0 0 0;
	padding:0 0 0 0;
	z-index:-1;
	font-size:0;
}

#topFuture div.ph img{
	width:100%;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:0;
}






/* topMap */

#topMap{
	position: relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:70px 0 70px 0;
	text-align:center;
}

#topMap h2{
	position: relative;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-22);
	font-weight:400;
	line-height:1.8;
	letter-spacing: 3px;
}

#topMap div.map{
	position: relative;
	width:86%;
	margin:40px auto 0 auto;
	padding:0 0 0 0;
}

#topMap div.map iframe{
	width:100%;
	height:300px;
}

#topMap table{
	width:86%;
	margin:3vw auto 0 auto;
	padding:0;
	border-collapse: separate;
	border-collapse: collapse;
}

#topMap table th{
	display:block;
	margin:0 0 0 0;
	padding:20px 0 0 0;
	font-size:var(--font-16);
	font-weight:600;
	line-height:1.8;
	letter-spacing: 1px;
	text-align:left;
}

#topMap table td{
	display:block;
	margin:0 0 0 0;
	padding:5px 0 0 0;
	font-size:var(--font-14);
	font-weight:400;
	line-height:1.8;
	letter-spacing: 1px;
	text-align:left;
}
 
#topMap table td span{
	display:block;
	margin:0 0 0 0;
	padding:5px 0 0 0;
	font-size:var(--font-13);
	line-height:1.5;
}


}