/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;700&display=swap');

/*
font-family: 'Shippori Mincho B1', serif;
*/

/* flaot clear
-----------------------------------------------------------------*/
.clearfix::after {
	content: "";
	clear: both;
	display: block;
}

img {
    /*-webkit-backface-visibility: hidden;*/
    image-rendering: -webkit-optimize-contrast;
	image-rendering: auto;
}
a.alpha:hover,
.alpha a:hover{
	opacity: 0.6;
	transform: 0.2s;
}

.u-max-full-width{
	max-width: 100%;
	box-sizing: border-box;
}

.row::after {
  content: "";
  display: block;
  clear: both;
}

.none { clear: both; width: 100%;}
.none hr { display: none; width: 100%;}

.center {
  text-align: center;
}

.showPc { display: flex !important; }
.showSp { display: none !important; }

@media screen and (max-width: 840px) {
	.showPc { display: none !important; }
	.showSp { display: flex !important; }
}

.ptb30 { padding: 30px 0; }
.ptb20 { padding: 20px 0; }
.ptb10 { padding: 10px 0; }
.ptb80{padding: 80px 0;}

.pt30 { padding-top: 30px; }
.pt20 { padding-top: 20px; }
.pt10 { padding-top: 10px; }

.pb30 { padding-bottom: 30px; }
.pb20 { padding-bottom: 20px; }
.pb10 { padding-bottom: 10px; }

/* 16px換算 */
.fs12 { font-size: 0.75rem; }
.fs14 { font-size: 0.875rem; }
.fs15 { font-size: 0.9375rem; }
.fs18 { font-size: 1.125rem; }
.fs20 { font-size: 1.25rem; }
.fs24 { font-size: 1.5rem; }
.fs28 { font-size: 1.75rem; }
.fs32 { font-size: 2rem; }
.fs36 { font-size: 2.25rem; }
.fs42 { font-size: 2.625rem; }
.fs48 { font-size: 3rem; }

.mt30{margin-top: 30px;}

.anchorWrap {
	position: relative;
}

.anchor {
	position: absolute;
	top: -150px;
}

a[href*="tel:"] {
	pointer-events: none;
	text-decoration: none;
}

@media only screen and (max-width: 767px) {
	a[href*="tel:"] {
		pointer-events: initial;
		text-decoration: underline;
	}
}

.scroll-table table {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
html,body {
  width: 100%;
  height: 100%;
  /*font-size: 1.00em;*/
}
html {
  scroll-behavior: smooth;
}
body * {
  box-sizing: border-box;
}

body {
	font-family: 'Shippori Mincho B1', serif;
	font-weight:400;
	position: relative;
}
.background {
    display: flex;
    flex: none;
    height: 100vh;
    margin: 0 0 0 0;
    
	position: -webkit-fixed;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 100%;
	height: 100vh;
	z-index: -3;
}
.background::before {
	content: "";
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 100%;
	height: 100vh;
	background-color: #fff;
	background-image: url("../img/background.png");
	background-position: 50%;
	background-size: cover;
	opacity: 0.3;
}
/*
.background {

    display: flex;
    flex: none;
    height: 100vh;
    margin: 0 0 0 0;
    
	position: -webkit-fixed;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 100%;
	height: 100vh;
	
	background-color: #fff;
	background-image: url("../img/background.png");
	background-position: 50%;
	background-size: cover;
	background-attachment: fixed;
    z-index: -3;
	
	/*opacity: 0.3;*/
	/*
	background-color: #ff0000;
	
}*/
/*
@media screen and (max-width: 540px) {
	.background {
		width: 100vw;
	    height: 100vh;
		max-width: 100vw;
		background-size: 100vw 100vh;
	}
}
*/
p,li,dd,td {
  font-weight:400;
}
h1,h2,h3,h4,h5,dt,th {
  font-weight:bold;
}
.mincho {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.tategaki {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: left;
}
.upright {
	-webkit-text-orientation: upright;
	text-orientation: upright;
}
.text-combine {
	-webkit-text-combine: horizontal;
	-ms-text-combine-horizontal: all;
	text-combine-upright: all;
}

.quote_s {
	display: inline-block;
	transform: translateX(0.2em) translateY(-0.35em) rotate(90deg);
}
.quote_e {
	display: inline-block;
	transform: translateX(-0.2em) translateY(-0.35em)  rotate(90deg);
}
@media screen and (max-width: 840px) {
	.quote_s {
		display: inline;
		transform: translateX(0em) translateY(0em) rotate(0deg);
	}
	 
	.quote_e {
		display: inline;
		transform: translateX(0em) translateY(0em)  rotate(0deg);
	}
}
.pivot {
	position: relative;
}

.flex {
	display: flex;
}
.iflex {
	display: inline-flex;
}
.rreverse {
  flex-direction: row-reverse;
}
.creverse {
  flex-direction: column-reverse;
}
.fwrap {
  flex-wrap: wrap;
}
.fwrapreverse {
  flex-wrap: wrap-reverse;
}
/* 水平 */
.fend {
  justify-content: flex-end;
}
.fcenter {
  justify-content: center;
}
.fbetween {
  justify-content: space-between;
}
.faround {
  justify-content: space-around;
}
/* 垂直 */
.fastart {
  align-items: flex-start;
}
.faend {
  align-items: flex-end;
}
.facenter {
  align-items: center;
}

.fistart {
  align-self: flex-start;
}
.fiend {
  align-self: flex-end;
}
.ficenter {
  align-self: center;
}
/*
.outer {
    width: 100%;
    min-width: 1400px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0 auto;
}
*/
.l-inner {
    max-width: 1200px;
	width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0 auto;
}

.l-inner-xl{
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	
}
@media screen and (max-width: 1400px) {
	.l-inner-xl{
		padding-left: 1em;
    padding-right: 1em;
	}
}

@media screen and (max-width: 1200px) {
	.l-inner {
		padding-left: 1em;
    padding-right: 1em;
	}
}

section{
	padding-top:80px;
	padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
	section{
	padding-top:30px;
	padding-bottom: 30px;
}
}

.pt0{
	padding-top: 0!important;
}

main * {
	/*
	position: relative;
	flex: none;
	flex-shrink: 0;
	/*transform: translateZ(0);*/
}

a { color: #000; }

.start {
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
	display: flex;
    justify-content: center;
	align-items: center;
	opacity: 1;
}
.start.close {
	animation-name: fadeOutHidden;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes fadeOutDown{
  0% {
	height: 100%;
  }

  100% {
	height: 0%;
  }
}
@keyframes fadeOutHidden{
  0% {
	opacity: 1;
  }

  100% {
	opacity: 0;
	display: none;
	z-index: -999;
  }
}

.scroll_fadein {
	opacity: 0;
	visibility: hidden;
	transform: translateY(50px);
	transition: opacity 1s,visibility 1s, transform 1s;
}

.fadein_start {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
.open_hidden {
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s,visibility 1s, transform 1s;
}
.open_fadein {
	animation-name: OpenfadeIn;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes OpenfadeIn{
  0% {
	opacity: 0;
	visibility: visible;
  }
  100% {
	opacity: 1;
  }
}

#header {
	align-items: stretch;
	background: rgba(0,0,0,0.0);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: auto;
	justify-content: center;
	left: 0;
	margin: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	transform: translate(0px, 0px);
	width: 100%;
	z-index: 1;
	max-width: 100%;
}
#header .inner {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	flex-wrap: nowrap;
	height: auto;
	justify-content: space-between;
	left: 0;
	margin: 0 auto;
	padding: 40px 0 0 0;
	position: relative;
	top: 0;
	width: 90%;
	z-index: 0;
	max-width: 90%;
}
#header h1 {
    margin: 0 0px 0px 0px;
}

#header h1 a img { 
    height: auto;
    width: 140px;
    max-width: 100%;
	transition: .3s cubic-bezier(.4,.4,0,1);
}
.header_nav_wrap {
	display: flex;
	height: 100%;
	justify-content: flex-start;
	align-items: center;
}
#social {
	display: flex;
	align-items: center;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	padding: 0px;
}
#social a {
	display: flex;
	align-items: center;
	flex-direction: column;
	flex-wrap: nowrap;
	height: auto;
	justify-content: center;
	margin: 8px 4px;
	padding: 20px 16px 20px 0;
	width: auto;
	max-width: calc(100% - 8px);
}
#social a img {
	width: 30px;
	max-width: 100%;
	transition: .3s cubic-bezier(.4,.4,0,1);
}
#social a:hover img { 	
	transform: scale(1.2, 1.2);
    transform-origin: top center;
 }

@media screen and (max-width: 840px) {
	#header .inner {
    	padding: 20px 0px 0px 0px;
	}
	#social {
		display: flex;
	}
	#header h1 a img { 
		width: 100px;
	}
}
@media screen and (max-width: 540px) {
	#header {
		z-index: 7;	
	}
	#header .inner {
    	padding: 20px 0px 0px 0px;
	}
	#social {
		display: none;
	}
	#header h1 a img { 
		width: 100px;
	}
}

#modal_switch {
	position: relative;
	/*background: rgba(0,0,0,0.0);
	font-size: 100%;
	border: 0;
	align-items: flex-end;
	flex-direction: column;
	flex-wrap: nowrap;
	height: auto;
	justify-content: center;
	margin: 4px 8px 4px 8px;
	padding: 10px;
	width: auto;
	max-width: calc(100% - 16px);
	vertical-align: baseline;
    box-sizing: border-box;
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 1000;
	background-color: rgba(255,255,255,0.8);*/
}
#modal_switch.openbtn{
	
	background:rgba(255,255,255,0.8);
	cursor: pointer;
    width: 50px;
    height:50px;
	border-radius: 0;
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 1000;
	border: none;
	
	
}
#modal_switch div {
	/*display: flex;
	background: #212121;
	height: 2px;
	transform-origin: center right;
	width: 48px;
	max-width: 100%;
	position: relative;
	line-height: 1;
	border: 0;
	transition: .3s cubic-bezier(.4,.4,0,1);
	transition: all .4s;*/
	display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 10px;
    height: 2px;
    border-radius: 2px;
	background: #222;
  	width: 60%;
}
#modal_switch div:nth-of-type(1)  {
    /*margin: 0px 0px 10px 0px;*/
	top:16px;	
}
#modal_switch div:nth-of-type(2)  {
	/*margin: 10px 0px 0px 0px;*/
top:24px;
}
#modal_switch div:nth-of-type(3)  {
	/*margin: 10px 0px 0px 0px;*/
	top:32px;
}
/*#modal_switch:hover div {
	background: #26453d;	
}*/

#modal_switch.model_open div:nth-of-type(1) 
{
	/*transform: rotate(15deg);
	transform-origin: 0 0;*/
	top: 18px;
    left: 13px;
    transform: translateY(6px) rotate(-45deg);
    width: 45%;
	background-color: #ffa500;
}
#modal_switch.model_open div:nth-of-type(2) {
	opacity: 0;
}
#modal_switch.model_open div:nth-of-type(3)  {
	/*transform: rotate(-15deg);
	transform-origin: 0 0;*/
	top: 30px;
    left: 13px;
    transform: translateY(-6px) rotate(45deg);
    width: 45%;
	background-color: #ffa500;
}

#modal {
	display: none;
    position: fixed;
    transition: none;
    width: 100%;
    height: 100%;
    z-index: 3;
	background-color: #fff;
	
}
#modal.model_open {
	display: flex;
	animation-name: OpenfadeIn;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	overflow: auto;
}
#modal .modal_inner {
	display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 0px;
	margin-top: 100px;
    width: 100%;
   height: 100%;
	
}

#modal.model_open .c-gnav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#modal #menu_wrap {
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    height: auto;
    justify-content: flex-start;
    margin: 0px;
    padding: 0px;
    width: 90%;
    max-width: 90%;
}
#modal #menu_wrap ul {
    margin: 0px;
    padding: 0px;	
}
#modal #menu_wrap ul li {
	list-style: none;
    color: #333;
    font-size: 28px;
    font-weight: 400;
    height: auto;
    letter-spacing: 0.2em;
    line-height: 1.4;
    margin: 24px 0px 0px 0px;
	padding: 0;
    text-align: center;
    width: auto;
    max-width: 100%;
    justify-content: center;
}
#modal #menu_wrap ul li a {
	text-decoration: none;
	transition: .3s cubic-bezier(.4,.4,0,1);
}
#modal #menu_wrap ul li a:hover {
	/*color: #EF5350;*/
	color: #ffa500;
}
#modal #modal_reservation {
    display: flex;
    align-content: center;
    align-items: center;
    background: #FFFFFF;
    flex-direction: column;
    flex-wrap: nowrap;
    height: auto;
    justify-content: center;
    padding: 80px 100px 100px 100px;
    width: 100%;
    max-width: 100%;
}

#modal_reservation .mark {
	display: flex;
    align-content: center;
    align-items: center;
}
#modal_reservation .mark img {
    align-content: center;
    align-items: center;
    height: auto;
    margin: 0px 0px 4px 0px;
    width: 48px;
    max-width: 100%;
	image-rendering: auto;
}

#modal_reservation h2 {
	display: flex;
	color: #333;
    font-size: 18px;
    font-weight: 400;
    height: auto;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin: 0px 0px 24px 0px;
    text-align: center;
    width: auto;
    max-width: 100%;
    justify-content: center;

}
#modal_reservation .tel_message {
	display: flex;
	color: #333;
    font-size: 20px;
    font-weight: 400;
    height: auto;
    line-height: 1.4;
    margin: 0px 0px 12px 0px;
    text-align: center;
    width: auto;
    max-width: 100%;
    justify-content: center;
}
#modal_reservation .phone {
	display: flex;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0px;
}
#modal_reservation .phone .ico {
	align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0px 8px 0px 0px;
    max-width: calc(100% - 8px);
}
#modal_reservation .phone .ico img {
	height: 30px;
	width: auto;
}
#modal_reservation .phone .number {
	display: flex;
    color: #333;
    font-size: 40px;
    font-weight: 400;
    height: auto;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-align: center;
    width: auto;
    max-width: 100%;
    justify-content: center;
}
#modal_reservation .daytime {
	display: flex;
    color: #333;
    font-size: 18px;
    font-weight: 400;
    height: auto;
    line-height: 1.4;
    margin: 12px 0px 0px 0px;
    text-align: center;
    width: auto;
    max-width: 100%;
    justify-content: center;
}

@media screen and (max-width: 1140px) {
	#modal .modal_inner {

	}
}
@media screen and (max-width: 840px) {
	#modal .modal_inner {
		margin-top: 250px;
	}
	#modal #modal_reservation {
		padding: 100px 100px 0px 100px;
	}
}
@media screen and (max-width: 540px) {
	#modal {
	    z-index: 6;
	}
	#modal .modal_inner {
		margin-top: 250px;
	}
	#modal #modal_reservation {
    	padding: 48px 24px 48px 24px;
	}
	#modal #menu_wrap ul li {
    	font-size: 20px;
	}
	#modal_reservation .tel_message {
		font-size: 16px;
	}
}

#side_reservation {
    align-content: center;
    align-items: center;
    bottom: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100vh;
    justify-content: flex-end;
    left: auto;
    margin: 0 0 0 0;
    padding: 60px 0px 60px 0px;
    position: fixed;
    right: 0px;
    top: 0px;
    width: auto;
    z-index: 2;
    max-width: 100%;
	opacity: 0;
	flex: none;
}

#side_reservation a {
	display: flex;
	align-content: center;
    align-items: center;
    border-radius: 20px 0px 0px 20px;
    flex-direction: column;
    flex-wrap: nowrap;
    height: auto;
    justify-content: center;
    padding: 0px;
    width: auto;
    max-width: 100%;
	text-decoration: none;
	flex: none;
	position: relative;
	
    background: #EF5350;
	border-bottom: 1px solid #ef5350;
	border-left: 1px solid #ef5350;
	border-right: 1px solid #ef5350;
	border-top: 1px solid #ef5350;
}

#side_reservation a:hover {
	background: #FFFFFF;
	border-bottom: 1px solid #ef5350;
	border-left: 1px solid #ef5350;
	border-right: 1px solid #ef5350;
	border-top: 1px solid #ef5350;
}
#side_reservation a div {
	display: flex;
	justify-content: center;
	align-items: center;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 400;

    line-height: 1.4;
    padding: 60px 0;
	/*margin: 0 20px;*/
    text-align: center;
	
    width: auto;
    height: auto;
    max-width: 100%;
	
    writing-mode: vertical-rl;
	flex: none;
	position: relative;
}
#side_reservation a::before {
	content: '';
	width: 24px;
	margin: 0 20px;
}
#side_reservation a:hover div {
	color: #ef5350;
}

@media screen and (max-width: 1140px) {
	#side_reservation {
	
	}
}
@media screen and (max-width: 840px) {
	#side_reservation {
		display: none;
	}
}
@media screen and (max-width: 540px) {
	#side_reservation {
		align-content: center;
		align-items: center;
		bottom: 24px;
		display: flex;
		flex: none;
		flex-direction: column;
		flex-wrap: nowrap;
		height: auto;
		justify-content: flex-start;
		left: 0px;
		padding: 0px 0px 0px 0px;
		right: 0px;
		top: auto;
		width: 100%;
		z-index: 5;
		max-width: 100%;
	}
	#side_reservation a {
		align-content: center;
		align-items: center;
		border-radius: 50px;
		flex: none;
		justify-content: flex-start;
		width: 85%;
		max-width: 85%;
	}
	#side_reservation a div {
		font-feature-settings: normal;
		font-size: 20px;
		padding: 20px 36px 20px 36px;
		text-orientation: mixed;
		writing-mode: horizontal-tb;	
	}
}

main {
	/*width: 100%;
	display: flex;
	height: auto;
	min-height: 100vh;
	flex-direction: column;
	position: relative;*/
	/*z-index: -2;*/
	overflow: hidden;
}

#middle_slide {
	display: flex;
	align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    height: auto;
    justify-content: flex-end;
    margin: 0px 0px 0px 0px;
    width: 100%;
    max-width: 100%;
	overflow: hidden;
	position: relative;
}
#middle_slide .middle_swiper {
    width: 100%;
    max-width: 100%;
    /*height: 70vh;*/
	height: 300px;
}
#middle_slide .swiper-wrapper {
  transition-timing-function: linear;
}
#middle_slide .middle_swiper div.swiper-slide {
    height: 100%;
    position: relative;
	overflow: hidden;
}
#middle_slide .middle_swiper div.swiper-slide div {
	overflow: hidden;
}
#middle_slide .middle_swiper div.swiper-slide div::before {
	background-position: 40% 50%;
	background-size: cover;
	border-radius: inherit;
	background-repeat: no-repeat;
	content: "";
	height: 100%;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: inherit;
	width: 100%;
	z-index: -2;
}

@keyframes middleslide {
  0% {
      background-position: 40% 50%;
  }
  100% {
      background-position: 60% 50%;
  }
}
@keyframes middleslidesp {
  0% {
      background-position: 30% 50%;
  }
  100% {
      background-position: 70% 50%;
  }
}

#middle_slide .middle_swiper div.swiper-slide div::before {
	animation: middleslide 40s both;
	animation-delay: 1s;
}
#middle_slide .middle_swiper div.swiper-slide.swiper-slide-visible div::before {
	animation: middleslide 40s both;
	animation-delay: 1s;
}

#middle_slide1 div::before { background-image: url("../asset/img/index/gallery01.jpg"); }
#middle_slide2 div::before { background-image: url("../asset/img/index/gallery02.jpg"); }
#middle_slide3 div::before { background-image: url("../asset/img/index/gallery03.jpg"); }
#middle_slide4 div::before { background-image: url("../asset/img/index/gallery04.jpg"); }
#middle_slide5 div::before { background-image: url("../asset/img/index/gallery05.jpg"); }
#middle_slide6 div::before { background-image: url("../asset/img/index/gallery06.jpg"); }
#middle_slide7 div::before { background-image: url("../asset/img/index/gallery07.jpg"); }
#middle_slide8 div::before { background-image: url("../asset/img/index/gallery08.jpg"); }

/*
#middle_slide9 div::before { background-image: url("../img/middle_slide9.jpg"); }
#middle_slide10 div::before { background-image: url("../img/middle_slide10.jpg"); }
#middle_slide11 div::before { background-image: url("../img/middle_slide11.jpg"); }
#middle_slide12 div::before { background-image: url("../img/middle_slide12.jpg"); }
#middle_slide13 div::before { background-image: url("../img/middle_slide13.jpg"); }
#middle_slide14 div::before { background-image: url("../img/middle_slide14.jpg"); }*/
/*
#middle_slide15 div::before { background-image: url("../img/middle_slide15.jpg"); }
*/
/*#middle_slide16 div::before { background-image: url("../img/middle_slide16.jpg"); }*/
@media screen and (max-width: 1140px) {
	#middle_slide {

	}
	#middle_slide .middle_swiper {

	}
}
@media screen and (max-width: 840px) {
	#middle_slide {
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
	}
	#middle_slide .middle_swiper {

	}
}
@media screen and (max-width: 540px) {
	#middle_slide {
		margin: 0px 0px 0px 0px;
	}
	#middle_slide .middle_swiper {

	}
	#middle_slide .middle_swiper div.swiper-slide {
		height: 50vh;
		height: auto;
		width: 240px;
		max-width: 100%;
	}
	
	#middle_slide .middle_swiper div.swiper-slide div::before {
		animation: middleslidesp 40s both;
	}
	#middle_slide .middle_swiper div.swiper-slide.swiper-slide-visible div::before {
		animation: middleslidesp 40s both;
	}

}

.col-half{
	width: 48%;
}

footer {
/*	background: #27084f;*/
	background: #6C272D;
	color: #ffffff;
}
footer .foot-r {
	text-align: right
}

footer a{
	color: #fff;
	text-decoration: none;
}



@media screen and (max-width: 767px) {
	footer .flex{
		flex-direction: column;
	}
	

	
}
footer ul{
	padding: 0 0 0.5em 0;
	margin: 0;
	list-style: none;
}

footer ul li{
	padding-right: 0;
}
footer ul li:last-child{
	padding-right: 0;
}

@media screen and (min-width: 768px) {
	footer ul{
		display: flex;
	}
	footer ul li{
		padding-right: 1em;
	}
}

#guide {
    width: 100%;
    max-width: 100%;	
}
#guide .inner_wrap {
	align-content: flex-start;
    align-items: flex-start;
    background: rgba(234, 228, 209, 0.6);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: auto;
    justify-content: center;
    margin: 120px 0px 0px 0px;
    overflow-x: visible;
    overflow-y: visible;
    padding: 120px 0px 120px 0px;
    width: 100%;
    max-width: 100%;
	position: relative;
}
#guide .inner_wrap h2 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: auto;
    justify-content: flex-start;
    left: 0;
    margin: 0 0 0 0;
    padding: 0px 0px 0px 320px;
    position: absolute;
    top: -24px;
    width: 100%;
    max-width: 100%;	
	
	color: #333;
    font-size: 28px;
    font-weight: 400;
    height: auto;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-align: center;
}
#guide .inner_wrap .menu_warp {
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    width: 60%;
    max-width: 60%;	
}
#guide .inner_wrap .menu_warp div {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    flex: 1;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0px;
    width: auto;
    max-width: 100%;	
}

#guide .inner_wrap .menu_warp div img {
    width: auto;
    max-width: 100%;
	height: auto;
}
#guide .inner_wrap .menu_warp div h3 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin: 0px 0px 0px 12px;
    padding: 0px;
    max-width: calc(100% - 12px);
	
	color: #333;
	font-size: 20px;
	font-weight: 400;
	height: auto;
	letter-spacing: NaNem;
	line-height: 2;
	text-align: left;
	width: auto;
	writing-mode: vertical-rl;
	max-width: 100%;
	justify-content: flex-start;
}
#guide .inner_wrap .menu_warp div h3 a {
	text-decoration: none;	
}
#guide .inner_wrap .menu_warp div .image {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    flex: none;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 0px;
    width: 80%;
    max-width: 80%;
}
#guide .inner_wrap .menu_warp div .image img {
    display: flex;
	border-radius: 60px 60px 60px 60px;
    flex: none;
    height: auto;
    margin: 0 0 0 0;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 100%;
    max-width: 100%;
}
#guide .inner_wrap .menu_warp .food {
		
}
#guide .inner_wrap .menu_warp .drink {
		
}

@media screen and (max-width: 840px) {
	#guide {
		
	}
	#guide .inner_wrap {
		align-content: flex-start;
		align-items: flex-start;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 120px 0px 120px 120px;
		position: relative;
	}
	#guide .inner_wrap h2 {
		align-content: flex-start;
		align-items: flex-start;
		background: rgba(0,0,0,0.0);
		flex: none;
		flex-direction: row;
		flex-wrap: nowrap;
		height: auto;
		justify-content: flex-start;
		left: 0;
		margin: 0 0 0 0;
		padding: 0px 0px 0px 120px;
		position: absolute;
		top: -24px;
		width: 100%;
		max-width: 100%;
	}
	#guide .inner_wrap .menu_warp {
		flex-direction: column-reverse;
		width: 85%;
 		max-width: 85%;
		padding: 0px 0 0px 0;
	}
	#guide .inner_wrap .menu_warp div {
		width: 100%;
		flex-direction: column;
	}
	#guide .inner_wrap .menu_warp div:first-child {
		margin: 24px 0px 0px 0px;
	}
	#guide .inner_wrap .menu_warp div h3 {
		align-content: flex-start;
		align-items: flex-start;
		background: rgba(0,0,0,0.0);
		display: flex;
		flex: none;
		flex-direction: column;
		flex-wrap: nowrap;
		height: auto;
		justify-content: center;
		margin: 0px 0px 4px 0px;
		width: 100%;
		max-width: 100%;
		writing-mode: horizontal-tb;
	}
	#guide .inner_wrap .menu_warp div .image {
		display: flex;
		flex: none;
		flex-direction: column;
		flex-wrap: nowrap;
		height: auto;
		justify-content: center;
		margin: 0px 0px 4px 0px;
		width: 100%;
		max-width: 100%;
	}
}
@media screen and (max-width: 540px) {
	#guide {
		
	}
	#guide .inner_wrap {
		align-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin: 80px 0px 0px 0px;
		padding: 0px 0px 40px 0px;
		width: 100%;
		max-width: 100%;
	}
	#guide .inner_wrap h2 {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: auto;
		justify-content: flex-start;
		margin: -24px 0px 24px 28px;
		padding: 0;
		width: calc(100% - 28px);
		max-width: calc(100% - 28px);
		position: relative;
		top: 0;
	}
	#guide .inner_wrap .menu_warp {
		flex-direction: column-reverse;
		width: 100%;
 		max-width: 100%;
		padding: 0px 28px 0px 28px;
	}
	#guide .inner_wrap .menu_warp div {
		width: 100%;
		flex-direction: column;
	}
	#guide .inner_wrap .menu_warp div:first-child {
		margin: 24px 0px 0px 0px;
	}
	#guide .inner_wrap .menu_warp div h3 {
		align-content: flex-start;
		align-items: flex-start;
		background: rgba(0,0,0,0.0);
		display: flex;
		flex: none;
		flex-direction: column;
		flex-wrap: nowrap;
		height: auto;
		justify-content: center;
		margin: 0px 0px 4px 0px;
		width: 100%;
		max-width: 100%;
		writing-mode: horizontal-tb;
	}
	#guide .inner_wrap .menu_warp div .image {
		display: flex;
		flex: none;
		flex-direction: column;
		flex-wrap: nowrap;
		height: auto;
		justify-content: center;
		margin: 0px 0px 4px 0px;
		width: 100%;
		max-width: 100%;
	}
	
}

header .navi ul li:first-child {
    display: none;
}

/* ==========================================================================
   ページのトップへ戻るボタン
   ========================================================================== */

/* リンクの形状設定 */
.u-page-top a {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #6C272D;
	border-radius: 5px;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size: 0.6rem;
	transition: all 0.3s;
	
	border: 2px solid #fff;
}

.u-page-top a i {
	color: #fff;
}

/* ホバー時の演出 */
.u-page-top a:hover {
	background: #f6f6f6;
	color: #942D2F;
}

/* ボタンの配置（初期状態は非表示） */
.u-page-top {
	position: fixed;
	right: 10px;
	bottom: 100px; /* JSの基準値と合わせる */
	z-index: 2;
	opacity: 0;
	transform: translateY(100px);
	/* 最下部で止まる際・戻る際の動きを滑らかにする */
	transition: bottom 0.2s ease-out; 
}

/* ── アニメーション：上にあがる（表示） ── */
.u-page-top.UpMove {
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── アニメーション：下にさがる（非表示） ── */
.u-page-top.DownMove {
	animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0; /* スムーズに消えるよう 1 から 0 に修正 */
    transform: translateY(100px);
  }
}


.grecaptcha-badge{
	margin-bottom: 250px;
}