html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
   margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
}

.sp{
    display: none;
}

a:hover{
	opacity:0.8;
}

.center{
    text-align: center;
}

.font-size-12px{
	font-size:12px;
}

.font-size-13px{
	font-size:13px;
}

div:has(> .inline-block){
	letter-spacing: -1em;
}

.inline-block{
    display: inline-block;
    width: 50%;
    letter-spacing: 0em;
    vertical-align: top;
}

header{
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: space-between;
	z-index: 1000;
	padding: 40px 20px;
    box-sizing: border-box;
}

header h1 a img{
	filter: drop-shadow(1px 2px 2px #3e3e3e) drop-shadow(1px 3px 2px #fff);
}

header nav{
	text-align: right;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

header nav ul{
	margin-top: 10px;
}

header nav ul li{
	list-style: none;
	display: inline-block;
	margin-right:15px;
}

header nav ul li:last-child{
	margin:0;
}

nav p img,
header nav ul li a{
	filter: drop-shadow(1px 2px 2px #3e3e3e) drop-shadow(1px 3px 2px #3e3e3e);
}

header nav ul li a{
	text-decoration: none;
	color:#fff;
	font-size: 20px;
	font-weight: bold;
}

.block{
	display: block !important;
}

.padding0{
	padding:0 !important;
}



/* スライダー */

.slider {
  margin-inline: auto;
  overflow: hidden; /* 画像がはみ出ないようにする */
  margin-bottom:100px !important;
}
.slick-img img {
  width: 100%;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}

.slide-dots{
	position: absolute;
    bottom: 20px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slide-dots li{
	position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slide-dots li button{
	border-radius: 50%;
    width: 15px;
    height: 15px;
    background: none;
    border: 1px solid #fff;
    color: transparent;
}

.slide-dots li.slick-active button{
	border: 1px solid #c43636;
}

.slide-dots li button:hover{
	cursor:pointer;
}

.slider .slick-initialized .slick-slide{
	height: 100svh;
}


/* コンテンツ共通 */

article > div:nth-child(n+2){
	margin:90px 30px;
}


/* ご挨拶 */

.about-div{
	background: #fff3f3;
    width: 50%;
    margin: 0 auto;
    padding: 10px;
    margin-bottom: 100px;
}

.about-div > div{
	border: 1px solid;
    padding: 50px;
}


/* タイトル */

h2{
	position: relative;
    display: inline-block;
    padding: 0 150px;
    width: 160px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    text-align: center;
    line-height: 25px;
    margin-bottom: 50px;
}

h2:before,
h2:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 125px;
    height: 1px;
    background-color: #666;
}

h2:before {
    left: 0;
}

h2:after {
    right: 0;
}

h2 span{
	font-size: 13px;
}


/* メニュー */

.content{
	display:none;
}

.menu-ul{
	margin: 0 auto;
	list-style-type: none;
	text-align: center;
}

.menu-ul > li{
	display: inline-block;
	width: 19%;
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    padding: 10px 0;
    font-weight: bold;
}

.menu-ul > li:hover{
	cursor: pointer;
}

.menu-ul > li > div{
	position: absolute;
    width: 100%;
    left: 0;
    margin-top: 10px;
    padding: 50px 0;
    background: #cc0000;
    cursor: default;
}

.menu-ul li div > p{
	margin-bottom:10px;
}

.menu-ul li div ul{
	display: grid;
    width: 100%;
    column-gap: 30px;
    grid-template-columns: repeat(3, 30%);
    justify-content: center;
}

.menu-ul li div ul li{
	display: flex;
	padding: 10px;
	text-align: left;
	justify-content: space-between;
	align-items: normal;
}

.menu-ul li div ul li.block > div{
	display: flex !important;
	text-align: left;
	justify-content: space-between;
	align-items: center;
}

.menu-ul li div ul li img{
	width: 100%;
}

.menu-open{
	background: #cc0000;
	color:#fff;
}


/* 店舗情報 */

#info > div{
	margin: 0 50px;
}

#info table{
	border-spacing: 5px;
}

#info table tr td{
	vertical-align: middle;
}

#info table tr td:first-child{
	background: #cc0000;
    border-radius: 8px 0 0 8px;
    padding: 8px 20px;
    color: #fff;
    width: 110px;
}

#info table tr td:last-child{
	padding-left:10px
}

.info-slider img{
	width:100%;
}

.info-slider .slick-dots{
    display: flex;
    justify-content: space-between;
    position: static;
    margin-top:10px;
}

.info-slider .slick-dots li{
	width: 23%;
    margin: 0;
    height:auto;
    opacity:0.5;
}

.info-slider .slick-dots li.slick-active{
	opacity:1;
}

.info-slider .slick-dots li img{
	border-radius: 100%;
}

#info .slick-dotted.slick-slider{
	width:90%;
	margin-left:auto;
}


/* ボタン */

a.btn {
	display: flex;
    justify-content: space-evenly;
    align-items: center;
	text-align: center;
	text-decoration: none;
	width: 200px;
	margin: auto;
	padding: 1rem 4rem 1rem 3rem;
	font-weight: bold;
	background: #cc0000;
	color: #fff;
	border-radius: 100vh;
	position: relative;
	transition: 0.5s;
}
a.btn::before {
	content: '';
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}
a.btn:hover {
	opacity:0.5;
	color: #fff;
}

#access iframe{
	margin: 10px 0 30px 0;
}

/* 予約 */

#yoyaku{
	width:100%;
	margin-top: 35px;
}

#yoyaku > div{
	margin: 0 auto;
    width: 270px;
}


/* フッター */

footer{
	text-align: center;
    background: #000;
    color: #fff;
    padding: 50px 10px;
}

footer p{
	margin:15px 0;
}

footer div p:first-child,
footer div p:last-child{
	margin-top:50px;
}

footer > p > a > img{
	filter: drop-shadow(1px 2px 2px #fff) drop-shadow(1px 3px 2px #fff);
}


/* スマホだけに適用するCSS
------------------------------------------- */
@media screen and ( max-width:480px ){

	.sp{
		display: block;
	}
	
	.pc{
	    display: none;
	}

	.sp-displayBlock{
        display: block;
        width:100%;
    }
    
	.sp-img{
		width:100%;
	}
	
	header{
		padding: 10px 0px;
	}
	
	header h1 a img{
		width:85%;
	}
	
	.slider{
		margin-bottom: 60px !important;
	}
	
	.about-div{
		width: auto;
	}
	
	.about-div > div{
		padding: 20px;
	}
	
	article > div:nth-child(n+2) {
		margin: 90px 10px;
	}
	
	.menu-ul > li{
		width: 18%;
	}
	
	.slick-initialized .slick-slide{
		height:auto;
	}
	
	h2{
		margin-bottom: 25px;
		padding: 0 110px;
		width: 120px;
	}
	
	h2:before, h2:after{
		width: 100px;
	}
	
	.menu-ul li div ul{
		grid-template-columns: auto;
		justify-content: normal;
	}

	.menu-ul > li:last-child p{
		letter-spacing: -1px;
	}
	
	.notification-div{
		margin:0 50px;
	}
	
	#info > div > div:first-child{
		margin-bottom:30px;
	}
	
	#access iframe{
		width:100%;
	}
	
	#info > div{
		margin:0;
	}
	
	#info .slick-dotted.slick-slider{
		width:100%;
	}
	
	


	/* ハンバーガーメニュー */

	 .sp-btn {
		position: fixed;
		top: 16px;
		right: 16px;
		width: 50px;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		border: none;
		background: #fff;
		border-radius: 50%;
	}

	/***** 真ん中のバーガー線 *****/
	.btn-line {
		width: 80%;
		height: 4px;
		background-color: #000;
		position: relative;
		transition: .2s;
		border-radius: 10px;
	}

	/***** 上下のバーガー線 *****/
	.btn-line::before,
	.btn-line::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #000;
		transition: .2s;
		left: 0px;
		border-radius: 10px;
	}

	.btn-line::before {
		transform: translateY(-12px);
	}

	.btn-line::after {
		transform: translateY(12px);
	}

	/***** メニューオープン時 *****/
	.btn-line.open {
		background-color: transparent;
	}

	.btn-line.open::before,
	.btn-line.open::after {
		content: "";
		transition: .2s;
	}

	.btn-line.open::before {
		transform: rotate(45deg);
	}

	.btn-line.open::after {
	  /* 上の線を傾ける */
	  transform: rotate(-45deg);
	}

	/* ボタンフォーカス時の装飾 */
	.btn:focus .btn-line ,
	.btn:focus .btn-line::before ,
	.btn:focus .btn-line::after {
	  box-shadow: 1px 1px 10px rgba(0, 0, 0, .7);
	}

	.btn:focus .btn-line.open {
	  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	}
	    
	.btn:focus .btn-line.open::before ,
	.btn:focus .btn-line.open::after {
	  box-shadow: 1px 1px 10px rgba(0, 0, 0, .7);
	}
	/**************** ここまで、ハンバーガーボタンのスタイリング ****************/

	/**************** 以下、メニューのスタイリング ****************/
	.menu {
	  position: fixed;
	  /* メニューの位置マイナス指定で画面外に */
	  transform : translateX(130%);
	  width: 100%;
	  height: 100%;
	  /* メニューを縦に */
	  display: flex;
	  flex-direction: column;
	  color: #efefef;
	  background-color: #cc0000;
	  transition: transform .3s;
	}

	.menu-list {
	  width: 100%;
	  height: 120px;
	  /* メニューテキスト位置をリスト内中心に */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.menu-list:first-child{
		margin-top:80px
	}

	.menu-list:hover {
	  color: #333;
	  background-color: rgba(255, 255, 255, 0.5);
	  cursor: pointer;
	}

	/***** メニューオープン時位置0にして画面内に *****/
	.menu.open {
	  transform: translateX(0%);
	  left: 0;
	  top: -10px;
	}

	/* 600px以上はハンバーガーボタン非表示、ヘッダー固定 */
	@media screen and (min-width: 600px) {
	  .btn {
	    display: none;
	  }

	  .menu {
	    position: fixed;
	    transform : translateX(0);
	    width: 100%;
	    height: 100px;
	    /* メニューを横に */
	    display: flex;
	    flex-direction: row;
	  }
	}
	
	nav p img, header nav ul li a{
		filter: none;
	}
}