/*ハンバーガーメニュー*/
.openbtn1{
	background:transparent;
	cursor: pointer;
    width: 50px;
    height:50px;
    transform: scale(0.88) !important;
	position: absolute;
	top:0;
	bottom:0;
	right:10px;
	margin:auto;
}
	/*ボタン内側*/
.openbtn1 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 3px;
	background:#fff;
  	width: 45%;
  }
.openbtn1 span:nth-of-type(1) {
	top:15px;	
}
.openbtn1 span:nth-of-type(2) {
	top:23px;
}
.openbtn1 span:nth-of-type(3) {
	top:31px;
}
	/*activeクラスが付与されると線が回転して×に*/
.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.openbtn1.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}
.openbtn1.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
/*ヘッダー*/
div#headerWrapper{
	width:100%;
	height: 54px;
	position: fixed;
	top:0;
	right:0;
	background-color:var(--main-color);
	background-repeat: no-repeat;
	background-image:url("../images/icon_header.svg");
	background-size:44px;
	background-position: left 20px center;
	z-index: 1000;
	/*background-image: radial-gradient(circle at center center, rgb(93, 60, 152),rgb(10, 3, 9));*/
}
div#header {
	width:calc(100%);
	height: 54px;
}
div#header h1{
	background:url("../images/logo.svg") center center no-repeat;
	background-size:110px;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
h1#date{
	text-align: center;
	font-size:20px;
}
p.tel{
	background:url("../images/icon_tel.svg") center center no-repeat;
	background-size:24px;
	width:50px;
	height: 50px;
	position: absolute;
	margin:auto;
	top:0;
	bottom:0;
	right:60px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
p.tel a{
	display: block;
	width:100%;
	height: 100%;
}
/*フッター*/
div#footerWrapper{
	width:100%;
	background:var(--main-color);
	position: fixed;
	margin: auto;
	padding-bottom:10px;
	left:0;
	right:0;
	bottom:0;
	border-top:1px solid #ccc;
	padding-bottom: env(safe-area-inset-bottom);
}
div#footer{
	width:100%;
	box-sizing: border-box;
	margin:auto;
}
ul.nav{
	width:calc(100% - 20px);
	margin:0 10px;
	display: flex;
	justify-content: space-between;
	font-size:12px;
}
ul.nav a{
	display: block;
	width:calc(20% - 10px);
	color:#fff;
}
ul.nav a:hover{
	text-decoration: none;
	color:#fff;
}
ul.nav li{
	background-repeat: no-repeat;
	background-position: center bottom 26px;
	padding-top:50px;
	text-align: center;
}
ul.nav a:nth-child(1) li{
	background-image:url("../images/m01.svg");
	background-size:26px;
}
ul.nav a:nth-child(2) li{
	background-image:url("../images/m02.svg");
	background-size:22px;
}
ul.nav a:nth-child(3) li{
	background-image:url("../images/m04.svg");
	background-size:30px;
}
ul.nav a:nth-child(4) li{
	background-image:url("../images/m05.svg");
	background-size:25px;
}
ul.nav a:nth-child(1) li:hover,
ul.nav a:nth-child(1) li.active{
	background-image:url("../images/m01h.svg");
}
ul.nav a:nth-child(2) li:hover,
ul.nav a:nth-child(2) li.active{
	background-image:url("../images/m02h.svg");
}
ul.nav a:nth-child(3) li:hover,
ul.nav a:nth-child(3) li.active{
	background-image:url("../images/m04h.svg");
}
ul.nav a:nth-child(4) li:hover,
ul.nav a:nth-child(4) li.active{
	background-image:url("../images/m05h.svg");
}
ul.nav li.active,
ul.nav li:hover{
	color:var(--main-color);
}
ul.nav li:hover a,
ul.nav li.active a{
	color:#fff;
	font-weight: bold;
}
ul.nav li.active{
	color:#fff;
	font-weight: bold;
}
/*desktop*/
@media(min-width:768px){
}
/*mobile*/
@media(max-width:767px){
}

/*コンテンツ領域*/
div.contentsWrapper{
	width:100%;
	min-width:var(--min-width);
	margin-top:54px;
	overflow: hidden;
	padding-bottom:100px;
}
div.contents{
	background:#fff;
	box-sizing: border-box;
	margin:10px;
	border-radius: 8px;
}
/*desktop*/
@media(min-width:768px){
}
/*mobile*/
@media(max-width:767px){
}

h2.news{
	text-align: center;
	color:var(--main-color);
	margin:10px auto;
	font-size:18px;
}
h2.news::before{
	content:"～"
}
h2.news::after{
	content:"～"
}
div.image{
	margin:25px auto;
	text-align: center;
}
div.image img {
	width:100%;
	height: auto;
}
div.image.w50 img{
	width:50%;
}
table.schedule{
	width:calc(100% - 60px);
	margin:10px 30px;
	border-bottom: 1px solid #ccc;
}
table.schedule td{
	padding:5px 10px;
	border-top:1px solid #ccc;
}
div.hansalan{
	width:100vw;
	height: 100vh;
	background-color:var(--main-color);
	position: relative;
}
p.hansalan{
}
p.hansalan img{
	position: absolute;
	margin:auto;
	top:0;
	left:0;
	bottom:0;
	right:0;
	text-align: center;
	line-height: 100vh;
	width:50%
}
div.sns{
	display: flex;
	justify-content: center;
	gap:30px;
	margin-bottom:25px;
}
div.pointcard {
	width:100%;
	box-sizing: border-box;
	padding:20px;
	border-radius: 8px;
	background-image: radial-gradient(circle at 52% 94%, rgba(169, 169, 169,0.04) 0%, rgba(169, 169, 169,0.04) 50%,rgba(199, 199, 199,0.04) 50%, rgba(199, 199, 199,0.04) 100%),radial-gradient(circle at 96% 98%, rgba(61, 61, 61,0.04) 0%, rgba(61, 61, 61,0.04) 50%,rgba(201, 201, 201,0.04) 50%, rgba(201, 201, 201,0.04) 100%),radial-gradient(circle at 93% 97%, rgba(227, 227, 227,0.04) 0%, rgba(227, 227, 227,0.04) 50%,rgba(145, 145, 145,0.04) 50%, rgba(145, 145, 145,0.04) 100%),radial-gradient(circle at 79% 52%, rgba(245, 245, 245,0.04) 0%, rgba(245, 245, 245,0.04) 50%,rgba(86, 86, 86,0.04) 50%, rgba(86, 86, 86,0.04) 100%),linear-gradient(90deg, rgb(210, 9, 198),rgb(25, 38, 118));
}
div.pointcard h3{
	color:#fff;
	text-align: center;
	font-size:18px;
}
div.point{
	display: flex;
	justify-content: space-between;
	gap:10px;
	margin:10px auto;
}
p.pt{
	width:45px;
	height:45px;
	border-radius:45px;
	background:#fff;
	text-align: center;
	line-height: 45px;
	font-size:30px;
	color:orange;
}
div.notice{
	font-size:12px;
	margin:30px 0;
	box-sizing: border-box;
	padding:10px;
	background:#ccc;
	border-radius: 8px;
}
p.large{
	margin:20px;
	font-size:16px;
}
div.qoupon {
	margin:10px;
	overflow: hidden;
}
div.qoupon.blue {
	background-color:#3caafd;
}
div.qoupon.green {
	background-color:darkgreen;
}
div.qoupon.orange {
	background-color:orange;
}
div.qoupon h3{
	font-size:18px;
	color:#fff;
	padding: 20px;
}
div.qoupon img{
	width:calc(100% - 20px);
	margin:10px;
	height: auto;
}
div.qoupon dl{
	background:#fff;
	margin:10px;
	overflow: hidden;
	padding:10px;
}
div.qoupon dl dt,
div.qoupon dl dd{
	padding:5px;
	border-top:1px solid #ccc;
	box-sizing: border-box;
}
div.qoupon dl dt{
	width:30%;
	float: left;
	clear: both;
}
div.qoupon dl dd{
	width:70%;
	float: right;
}
div.line{
	color:#fff;
	overflow: hidden;
	font-size:10px;
}

p.use{
	background:#fff;
	width:40%;
	margin:20px auto;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	font-size:22px;
	box-shadow: 3px 3px 9px rgba(0,0,0,0.35);
	border-radius: 4px;
}
.wrapper{
    max-width: calc(100%);
    margin: 0 auto 10px;
    color: #666;
}


/*カレンダー*/
#calendar {
    text-align: center;
    width: 100%;
}
#calendar table {
    outline: 2px solid #ccc;
    border-collapse: collapse;
    width: 100%;
}
#calendar table th {
    color: #000;
}
#calendar table th,
#calendar table td {
    outline: 1px solid #ccc;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}
/*日曜日*/
#calendar table td:first-child {
    color: red;
}
/*土曜日*/
#calendar table td:last-child {
    color: blue;
}
/*前後月の日付*/
#calendar table td.disabled {
    color: #ccc;
}
/*本日*/
#calendar table td.today {
    background-color: #D65E72;
    color: #fff;
}

/*ボタン*/
#next-prev-button {
    position: relative;
}
#next-prev-button button{
    cursor: pointer;
    background: var(--main-color);
    color: #fff;
    border: 1px solid  var(--main-color);
    border-radius: 4px;
    font-size: 1rem;
    padding: 0.5rem 2rem;
    margin: 1rem 0;
}
#next-prev-button button:hover{
    background-color: #D4BB92;
    border-color: #D4BB92;
}
#prev {
    float: left;
}
#next {
    float: right;
}
select,
input[type=text],
textarea{
    margin:10px;
    width:calc(100% - 24px);
    height: auto;
    box-sizing: border-box;
    padding:0 10px;
    border:1px solid #ccc;
    border-radius: 4px;
    min-height: 50px;
    font-size:16px;
    position: relative;
    background-color:#fff;
}
input[type=text].short{
    width:calc(100% - 50px);
}
textarea.trouble{
    height: 300px;
}
select{
    background-image:url("../images/arrow_down.svg");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size:12px;
    cursor: pointer;
}
select.must{
    background-image:
        url("../images/arrow_down.svg"),
        url("../images/icon_must.svg");
    background-position: 
        right 10px center,
        right 28px center;
    background-repeat: no-repeat;
    background-size:
        12px,
        42px;
}
select option.red{
    background:linear-gradient(red,red);
    color:#fff;
}
div.submit{
    display: flex;
    justify-content: center;
    gap:20px;
    align-items: center;
    padding-top:20px;
}
button.action{
	width:100%;
	background-color:var(--main-color);
	color:#fff;
	border:2px solid var(--main-color);
	display: block;
	margin:10px;
	border-radius: 4px;
	padding:10px;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size:6px;
	font-size:18px;
}
div.menu{
	overflow: hidden;
	padding:10px 0;
	border-bottom:1px solid #ccc;
	margin:10px auto;
}
h2.menu + div{
	border-top:1px solid #ccc;
}
div.menu img{
	width:100px;
	height: 100px;
	object-fit: cover;
	display: block;
	float: left;
	margin-right: 10px;
}
div.menu p.name{
	font-weight: bold;
}
h2.menu{
	background:var(--main-color);
	color:#fff;
	padding:7px 10px;
	background-image: linear-gradient(78deg, rgba(96, 96, 96, 0.04) 0%, rgba(96, 96, 96, 0.04) 35%,rgba(220, 220, 220, 0.04) 35%, rgba(220, 220, 220, 0.04) 100%),linear-gradient(150deg, rgba(83, 83, 83, 0.04) 0%, rgba(83, 83, 83, 0.04) 71%,rgba(6, 6, 6, 0.04) 71%, rgba(6, 6, 6, 0.04) 100%),linear-gradient(311deg, rgba(203, 203, 203, 0.04) 0%, rgba(203, 203, 203, 0.04) 58%,rgba(3, 3, 3, 0.04) 58%, rgba(3, 3, 3, 0.04) 100%),linear-gradient(137deg, rgba(110, 110, 110, 0.04) 0%, rgba(110, 110, 110, 0.04) 11%,rgba(226, 226, 226, 0.04) 11%, rgba(226, 226, 226, 0.04) 100%),linear-gradient(90deg, rgb(219,39,21),rgb(234, 119, 123));
	font-size: 15px;
	margin-bottom: 10px;
} 
h3.menu{
	color:var(--main-color);
	font-size:15px;
	border-bottom:2px solid var(--main-color);
	margin:10px 0;
}
p.price{
	font-size:16px;
	font-weight: bold;
	color:var(--main-color);
	text-align: right;
}
h3.reserve:first-child {
	margin-top:20px;
	margin-bottom: 0;
}
h4.reserve{
	margin-top:10px;
}
ul.switch {
	display: flex;
	justify-content: space-between;
	gap:3px;
	margin-bottom:5px;
}
ul.switch li{
	width:calc(25% - 3px);
	font-size:13px;
	text-align:center;
	background:#fff;
	box-sizing:border-box;
	border:0.5px solid var(--main-color);
	padding:5px 0;
}
ul.switch li.ui-state-active{
	background:var(--main-color);
	color:#fff;
}
ul.switch li.ui-state-active a{
	color:#fff;
	text-decoration: none;
}
ul.switch a{
	display: block;
	width:100%;
	height: 100%;
}


div.news {
	margin:10px;
}
div.news img{
	width:100%;
	height: auto;
}
table.shop{
	margin-bottom:10px;
}
table.shop td{
	padding:5px;
	border:1px solid #ccc;
}
label{
	margin:10px 20px;
	display: flex;
	justify-content: flex-start;
	gap:10px;
}
input[type=checkbox]{
	width:20px;
	height: 20px;
	border:2px solid var(--main-color);
	border-radius: 4px;
}
input[type=checkbox]:checked{
	background: var(--main-color);
}
textarea{
	height: 150px;
}
p#totop{
	width:40px;
	height: 40px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-image:url("../images/totop.svg");
	background-position: center top;
	background-size:40px;
	position: fixed;
	right:15px;
	bottom:100px;
	display: none;
}
p#totop:hover{
	background-position: center bottom;
}
p#totop a{
	display: block;
	width:100%;
	height: 100%;
}