@charset "utf-8";
/* ------------------------------------------------------------

top.css

------------------------------------------------------------ */


/* mv
------------------------------------------------------------ */
@media screen and (min-width: 769px) {
	.wrap {
		width:100%;
		min-width:1000px;
	}
}


/* mv
------------------------------------------------------------ */

#mv {
	width:100%;
	aspect-ratio: 16 / 9;
	position:relative;
	background-image:url(../img/top/mv.jpg);
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:cover;
}
#mv::after {
	display:block;
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	background-image:url(../img/share/cover.png);
	background-repeat:repeat;
	background-position:0 0;
	background-size:2px auto;
	opacity:0.15;
}
#mv .header {
	position:relative;
	z-index:4;
}
#mv .header .inner {
	display:-webkit-box;
	display:flex;
	-webkit-box-pack: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	max-width:1600px;
	margin:0 auto;
	padding:40px 2.5% 0 2.5%;
	color:#fff;
}
#mv .sitename {
	width:160px;
	height:80px;
}
#mv .sitename .category{
	width:100%;
	margin-bottom:12px;
	font-size:1.2rem;
	line-height:1;
	text-align:center;
}
#mv .sitename .logo,
#mv .sitename .logo img{
	width:100%;
}

#mv .tel {
	height:80px;
	padding-top:5px;
	text-align:center;
}
#mv .tel .text {
	padding-left:27px;
	font-size:1.2rem;
}
#mv .tel a {
	padding-left:27px;
	font-size:2.6rem;
	line-height:26px;
	color:#fff;
	text-decoration:none;
	background:url(../img/share/icon_tel.png) no-repeat top 7px  left 0;
	background-size:22px auto;
}


#mv .catchcopy {
	display:-webkit-box;
	display:flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
	max-width:1600px;
	height:100%;
	margin:2em auto 0;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index:3;
}
#mv .catchcopy .text{
	display:inline-block;
	letter-spacing:0.2em;
	writing-mode: vertical-lr;
	text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
}

#mv .catchcopy .kuten {
	margin-top:-0.2em;
	letter-spacing:0;
}
#mv .catchcopy .dot {
	margin:0.2em 0 0.6em;
	font-size:2.2rem;
	letter-spacing:0.05em;
}

@media screen and (max-width: 539px) {
	#mv .sitename {
		width:130px;
		height:80px;
		margin:0 auto;
	}
	#mv {
		min-height:540px;
		aspect-ratio: 1 / 1.5;
	}
	#mv .tel {
		display:none;
	}
	#mv .catchcopy .text{
		font-size:3.6rem;
	}
}
@media print, screen and (min-width: 540px) and (max-width: 768px) {
	#mv {
		min-height:540px;
		aspect-ratio: 1 / 1.5;
	}
	#mv .catchcopy .text{
		font-size:4.2rem;
	}
}
@media print, screen and (min-width: 769px) {
	#mv {
		min-height:787px;
		aspect-ratio: 16 / 9;
	}
	#mv .catchcopy .text{
		font-size:4.8rem;
	}
}
@media print, screen and (min-width: 1200px) {
	#mv .catchcopy .text{
		font-size: clamp(48px, 3.5vw, 72px);
	}
}



/* infoBox
------------------------------------------------------------ */

#infoBox {
	width:90%;
	max-width:920px;
	margin:0 auto;
	padding:0 0 15px;
	text-align:center;
	background-color: rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.4);
	position: absolute;
	left:0;
	right:0;
	z-index:3;
}
/* 左上・右下 */
#infoBox::before,
#infoBox::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
}
#infoBox::before {
  top: 0;
  left: 0;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}
#infoBox::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
}
/* 右上・左下 */
#infoBox span::before,
#infoBox span::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
}
#infoBox span::before {
  top: 0;
  right: 0;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
#infoBox span::after {
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
}

#infoBox .text1 {
	font-size:4.4rem;
	line-height:1.5;
	letter-spacing:0.05em;
}
#infoBox .text1 .year {
	font-size:1.22em;
}
#infoBox .text1 .month {
	font-size:1.36em;
}
#infoBox .text2 {
	font-size:2.4rem;
	line-height:1.5;
	color:#a98c35;
	letter-spacing:0.04em;
}
#infoBox .text2 .dot {
	display:none;
}
	
@media screen and (max-width: 539px) {
	#infoBox {
		bottom:-72px;
	}
	#infoBox .text1 {
		font-size:2.1rem;
		margin-bottom:6px;
	}
	#infoBox .text2 {
		font-size:1.8rem;
	}
}
@media print, screen and (min-width: 540px) and (max-width: 768px) {
	#infoBox {
		bottom:-80px;
	}
	#infoBox .text1 {
		font-size:3.0rem;
		margin-bottom:8px;
	}
	#infoBox .text2 {
		font-size:2.0rem;
	}
}
@media print, screen and (min-width: 769px) {
	#infoBox {
		bottom:-55px;
	}
	#infoBox .text1 {
		font-size:4.4rem;
	}
	#infoBox .text2 {
		font-size:2.4rem;
	}
	#infoBox .text2 .dot {
		display:inline;
	}
}



/* categoryName
------------------------------------------------------------ */

.categoryName {
	position:relative;
}
.categoryName .eng{
	font-size:6.4rem;
	line-height:1.2;
	letter-spacing:0.05em;
	text-indent:-0.15em;
}
.categoryName .heading{
	width:100%;
	font-size:0.86em;
	letter-spacing:0.1em;
}
.categoryName .text{
	margin-top:1.5em;
	font-size:1.4rem;
	line-height:2.5;
}

@media screen and (max-width: 539px) {
	.categoryName .eng{
		font-size:6.4rem;
	}
}

@media screen and (min-width: 540px) {
	.categoryName .eng{
		font-size:7.2rem;
	}
}
@media screen and (min-width: 769px) {
	.categoryName .eng{
		font-size:8.0rem;
		text-indent:-0.25em;
	}
}
@media print, screen and (min-width: 1200px) {
	.categoryName .eng{
		font-size:10.0rem;
	}
}



/* concept
------------------------------------------------------------ */

#concept {
	position:relative;
	overflow:hidden;
}
#concept .brush {
	width:1106px;
	height:auto;
	position:absolute;
	right:45%;
	top:-200px;
}
#concept .inner {
	display:-webkit-box;
	display:flex;
	-webkit-box-pack: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	max-width:1400px;
	margin:0 auto;
	padding:120px 25px 0;
	position:relative;
}

#concept .categoryName {
	width: 100%;
}
#concept .textBox {
	width: 100%;
	padding-top:20px;
}
#concept .textBox .catchcopy {
	font-size:3.2rem;
	line-height:1.5;
	letter-spacing:0.1em;
}
#concept .textBox .text {
	margin-top:1.5em;
	font-size:1.4rem;
	line-height:2.5;
}

#concept .decorationText {
	width:100%;
	padding:20px 0 0;
	line-height:0.75;
	text-align:center;
	letter-spacing:0.05em;
	opacity:0.05;
}

@media screen and (max-width: 539px) {
	#concept .decorationText {
		font-size: clamp(16px, 20vw, 180px);
	}
}

@media print, screen and (min-width: 540px) {
	#concept .textBox .catchcopy {
		font-size:3.6rem;
	}
	#concept .decorationText {
		font-size: clamp(16px, 10.5vw, 180px);
		white-space: nowrap; 
	}
}
@media print, screen and (min-width: 769px) {
	#concept .inner {
		padding:120px 5% 0;
	}
	#concept .categoryName {
		width: calc(100% - 550px);
	}
	#concept .textBox {
		width: 550px;
	}
	#concept .textBox .catchcopy {
		font-size:3.8rem;
	}
}
@media print, screen and (min-width: 1200px) {
	#concept .inner {
		padding:120px 7% 0;
	}
	#concept .textBox .catchcopy {
		font-size:4.0rem;
	}
}



.history::after {
  content: "";
  display:block;
  width:100%;
  height:1px;
  background:#ba9f60;
  position: absolute;
  bottom: 45px;
  left: 0;
  opacity:0.6;
}
.history .history-swiper {
  padding-bottom: 80px;
}
.history-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}
.history .slide-inner {
  position: relative;
}
.history .slide-inner img {
  width: 100%;
  display: block;
}

.history .swiper-slide .year {
  position: absolute;
  bottom: -13px;
  left: 20px;
  background: rgba(80, 80, 80, 0.9);
  color: #fff;
  padding: 0 18px;
  font-size: 2.8rem;
  line-height:40px;
  letter-spacing: 0.1em;
  display: inline-block;
}
.history .swiper-slide .year::after {
  content: "";
  margin:0 auto;
  position: absolute;
  bottom: -10px;
  left: 0;
  right:0;

  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid rgba(80, 80, 80, 0.9);
}
.history .swiper-slide .year::before {
  content: "";
  display:bloci;
  width:18px;
  height:18px;
  margin:0 auto;
  border-radius:50vh;
  background:#ba9f60;
  position: absolute;
  bottom: -30px;
  left: 0;
  right:0;
}

.history .swiper-pagination {
  bottom: 10px !important;
}

.history .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #777;
  opacity: 1;
  margin: 0 20px !important;
}

.history .swiper-pagination-bullet-active {
  background: #c9a44d;
}

@media screen and (max-width: 539px) {
	.history .swiper-slide {
		width: 335px;
	}
}
@media print, screen and (min-width: 540px) {
	.history .swiper-slide {
		width: 380px;
	}
}
@media print, screen and (min-width: 769px) {
	.history .swiper-slide {
		width: 400px;
	}
}
@media print, screen and (min-width: 1200px) {
	.history .swiper-slide {
		width: 420px;
	}
}




/* cuisine
------------------------------------------------------------ */

#cuisine {
	background-color:#141718;
	background-image:url(../img/top/cuisine_photo.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;
	overflow:hidden;
}
#cuisine .inner {
	display:-webkit-box;
	display:flex;
	-webkit-box-align: center;
	align-items: center;
	max-width:1400px;
	margin:0 auto;
	position:relative;
}

#cuisine .categoryName {
	width: 100%;
}
#cuisine .textBox .catchcopy {
	font-size:4.0rem;
	line-height:1.5;
	letter-spacing:0.1em;
}
#cuisine .textBox .text {
	margin-top:1.5em;
	font-size:1.4rem;
	line-height:2.5;
	text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
}

@media screen and (max-width: 768px) {
	#cuisine {
		background-position:bottom 0% left 50%;
	}
	#cuisine .inner {
		padding:50px 25px 180px;
	}
}

@media print, screen and (min-width: 769px) {
	#cuisine {
		background-position:bottom 0% right 0%;
	}
	#cuisine .inner {
		padding:110px 5%;
	}
}

@media print, screen and (min-width: 1200px) {
	#cuisine .inner {
		padding:110px 7%;
	}
}




/* bwimage
------------------------------------------------------------ */

#bwimage {
	display:-webkit-box;
	display:flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#bwimage > div {
	height:500px;
	overflow: hidden;
	position: relative;
}
#bwimage > div:nth-child(1){
	width:100%;
}
#bwimage > div:nth-child(2){
	width:100%;
}
#bwimage > div img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
}

@media screen and (max-width: 539px) {
	#bwimage > div {
		height:325px;
	}
}

@media print, screen and (min-width: 540px) {
	#bwimage > div {
		height:380px;
	}
}

@media print, screen and (min-width: 769px) {
	#bwimage > div {
		height:380px;
	}
	#bwimage > div:nth-child(1){
		width:37%;
	}
	#bwimage > div:nth-child(2){
		width:63%;
	}
}

@media print, screen and (min-width: 1200px) {
	#bwimage > div {
		height:500px;
	}
}



/* shopdata
------------------------------------------------------------ */

#shopdata {
	display:-webkit-box;
	display:flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin:0 auto;
	padding:50px 0;
	position:relative;
	overflow:hidden;
}
#shopdata .brush {
	width:100%;
	height:auto;
	position:absolute;
	transform: scaleX(-1);
}

#shopdata .sitename {
	display:-webkit-box;
	display:flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
	width:100%;
}
#shopdata .sitename > div {
	width:160px;
}
#shopdata .sitename .category{
	width:160px;
	margin-bottom:12px;
	font-size:1.2rem;
	line-height:1;
	text-align:center;
}
#shopdata .sitename .logo{
	width:160px;
}
#shopdata .sitename .logo img{
	width:100%;
}


#shopdata .data {
	width:100%;
}
#shopdata .data .inner {
	padding:40px 7%;
}

#shopdata .data .dataBox {
	margin:30px 0 0;
	position:relative;
}

#shopdata .data .contact .heading{
	font-size:1.8rem;
}
#shopdata .data .contact .linkBox{
	display:-webkit-box;
	display:flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#shopdata .data .contact .linkBox p{
	margin-top:0;
}
#shopdata .data .contact .linkBox .tel{
	display:inline-block;
	padding-left:35px;
	font-size:3.6rem;
	line-height:50px;
	color:#fff;
	text-decoration:none;
	background:url(../img/share/icon_tel.png) no-repeat top 12px  left 0;
	background-size:30px auto;
}
#shopdata .data .contact .linkBox .reservBtn {
	display:inline-block;
	width:240px;
	padding:0 20px 0 30px;
	font-size:1.8rem;
	line-height:50px;
	font-weight:500;
	text-align:center;
	letter-spacing:0;
	color:#000;
	text-decoration:none;
	background:url(../img/share/icon_cal.png) no-repeat top 50%  left 15px #a78b47;
	background-size:26px auto;
}

#shopdata .gmapBtn {
	display:block;
	width:180px;
	margin-top:10px;
	padding:4px 1.5em 8px 2em;
	font-size:1.8rem;
	line-height:1.2;
	font-weight:500;
	text-align:center;
	letter-spacing:0;
	color:#000;
	text-decoration:none;
	background:url(../img/share/icon_add.png) no-repeat top 50%  left 10px #fff;
	background-size:14px auto;
	border-radius:50vh;
}

#shopdata .data .dataList {
	display:-webkit-box;
	display:flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#shopdata .data .dataList dt {
	width:100%;
}
#shopdata .data .dataList dd {
	width:100%;
}
#shopdata .data .dataList dd .list {
	margin-top:5px;
}
#shopdata .data .dataList dd .list li {
	line-height:1.8;
}

#shopdata .data .timeList {
	display:-webkit-box;
	display:flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#shopdata .data .timeList dt {
	width:5.5em;
	position:relative;
}
#shopdata .data .timeList dt::after {
	display:block;
	content:"：";
	position:absolute;
	top:0;
	right:0;
}
#shopdata .data .timeList dd {
	width: calc(100% - 5.5em);
}

#shopdata .data .coutionList {
	color:#ddd;
}

#shopdata .data #copyright {
	margin-top:40px;
	font-size:1.2rem;
	color:#888888;
}

@media screen and (max-width: 768px) {
	#shopdata .brush {
		width:1106px;
		left:20%;
		bottom:-600px;
	}
	#shopdata .data .inner {
		padding:0 25px 40px;
	}
	#shopdata .data .contact .linkBox .tel{
		font-size:3.4rem;
	}
	#shopdata .gmapBtn {
		margin:15px auto 0;
	}
	#shopdata .data .contact .heading{
		text-align:center;
	}
	#shopdata .data .contact .linkBox{
		-webkit-box-pack: center;
		justify-content: center;
	}
	#shopdata .data .dataList dd .list {
		font-size:0.86em;
	}
	#shopdata .data .coutionList {
		font-size:0.86em;
	}
}
@media print, screen and (min-width: 769px) {
	#shopdata .brush {
		max-width:1200px;
		left:45%;
		top:300px;
	}
	#shopdata .data .inner {
		padding:0 5% 40px;
	}
	#shopdata .sitename {
		width:28.5%;
	}
	#shopdata .data .contact .linkBox .tel{
		font-size:3.6rem;
	}
	#shopdata .data {
		width:71.5%;
		border-left:1px solid #333333;
	}
	#shopdata .data .dataList dt {
		width:6.5em;
	}
	#shopdata .data .dataList dd {
		width: calc(100% - 6.5em);
	}
	#shopdata .data .dataList dd .list {
		padding-left:1em;
	}
}
@media print, screen and (min-width: 1000px) {
	#shopdata .data .inner {
		padding:0 7% 40px;
	}
	#shopdata .gmapBtn {
		width:150px;
		font-size:1.6rem;
		position:absolute;
		top:25px;
		left:320px;
	}
}
@media print, screen and (min-width: 1200px) {

}