@charset "utf-8";

/* reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;tab-size:2;scrollbar-gutter:stable;interpolate-size:allow-keywords;line-height:1.5}:where(html:has(dialog:modal[open])){overflow:clip}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:inherit;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit;letter-spacing:inherit;word-spacing:inherit;font-feature-settings:inherit;font-variation-settings:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled,label:has(>:disabled,+disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(dialog,[popover]){border:none;background:none;color:inherit;inset:unset;max-width:unset;max-height:unset;overflow:unset}:where(dialog:not([open],[popover]),[popover]:not(:popover-open)){display:none!important}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important;user-select:none!important}
/* --- */
html{
	scroll-behavior: auto;
}
ul{

}
/* ---  */
img{

}
/* --- */
table{
	border-collapse: collapse;
}

:root{
	--main-color: #005883;
}

.material-symbols-rounded{
	vertical-align: -4px;

}




/* ------------------------------

--------------------------------- */
body{
	background:#005883;
	font-family: "Shippori Mincho B1", serif;
	font-weight: 500;
	font-style: normal;
}
h1,h2,h3,h4{
	font-weight:800;
}

a{

}

/* ------------------------------------
  コンテナ
-------------------------------------- */
.container{
	max-width:1080px;
	width: 100%;
	margin:0 auto;
}




/* ------------------------------------
  
-------------------------------------- */
h1{
	text-align:center;

}
h2{
	font-weight: 700;
	text-align:center;
}

p{
	margin-bottom:1em;
}


/* ------------------------------------

	ヘッダ

-------------------------------------- */
.header{
	background:url(../img/bg_header.webp) no-repeat top center;
	background-attachment: fixed;
	height: 700px;
	margin-top:80px;
	position: relative;
}
.main-logo-block{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	height: 700px;

}
@media screen and (max-width: 800px) {

	.header{
		background:url(../img/bg_header_sp.webp) no-repeat top center;
		background-attachment: fixed;
		height: 400px;
		margin-top:60px;
	}
	.main-logo-block{
		display: flex;
		height: 400px;
		text-align: center;
	}
	.main-logo-block img{
		width: 70%;
		margin:0 auto;
	}

}



.oden-box{
	background:url(../img/bg_header.webp) no-repeat top center;
	background-attachment: fixed;
	height: 200px;
}

/* ------------------------------------

	フッタ

-------------------------------------- */
.footer{


}
.footer .copyright-logo{
	text-align: center;
	padding-top:50px;
}
.footer .copyright-logo img{
	margin:0 auto;
}
.footer .copyright{
	text-align: center;
	color:#fff;
	padding:30px 0 50px 0;
}
.footer .copyright .company{
	text-align: center;
	font-size:14px;
	margin-top:10px;
}

@media screen and (max-width: 800px) {
	.footer{
		padding-left:20px;
		padding-right:20px;
	}
}


/* ------------------------------------

	ナビ

-------------------------------------- */
nav{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	overflow: hidden;
	background:#005883;
    box-shadow: 0 0 5px #544b4b;
}
nav ul{
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}
nav ul li{
	width:auto;
	padding:0 15px;
}
nav ul li.logo{
	flex:1;
	padding:10px 0 15px 0;
	margin-left:40px;
}
nav ul li.logo img{
	width: 150px;
}
nav ul li a{
	color:#fff;
	font-weight: 800;
	text-decoration: none;
}

nav ul li.contact{
	color:#fff;
	background:#005883;
}

@media screen and (max-width: 800px) {

	nav ul li{
		display: none;
	}
	nav ul li.logo{
		display: block;
		text-align: center;
		margin-left:10px;
	}
	nav ul li.logo img{
		width: 120px;
	}
	nav ul li.contact{
		display: block;
	}

}


/* ------------------------------------

	メインコンテンツ

-------------------------------------- */
.contents{

	background:#fff;
}




/* ------------------------------------

	タイトル

-------------------------------------- */
.title-box{
	margin-bottom:100px;
}
.title-box h2 strong{
	color:var(--main-color);
}

.title-box .sub-title{
	font-size: 12px;
	color:var(--main-color);
	text-align: center;
}


/* ------------------------------------

	リード文

-------------------------------------- */
.lead-section{
	padding:100px 0;

}
.lead-text{
	text-align: center;
	font-size: 18px;
	line-height: 1.8;

}
.lead-text p{
	text-align: center;
}
.lead-text p strong{
	color:var(--main-color);
}
@media screen and (max-width: 800px) {
	.lead-section{
		padding-left:20px;
		padding-right:20px;
	}
	.lead-text p{
		text-align: left;
	}
}



/* ------------------------------------

	店内の雰囲気

-------------------------------------- */
.photo-section{
	padding:0px 0;
	overflow: hidden;
	margin-bottom:80px;
}
.photo-block{


}
.photo-list{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.photo-list li{
	margin-bottom:25px;
	width: 31%;
}
.photo-list li img{
	border-radius:5px;
	width: 100%;
}
@media screen and (max-width: 800px) {
	.photo-section{
		padding-left:20px;
		padding-right:20px;
	}

	.photo-block{

	}

	.photo-list li{
		margin-bottom:25px;
		width: 48%;
	}

	.photo-list2 li{
		margin-bottom:25px;
	}
	.photo-list2 li:nth-child(3){
		display: none;
	}


}


/* ------------------------------------

	営業時間

-------------------------------------- */
.time-section{
	padding:100px 0;
	background:#f3f0eb;
	background:url(../img/bg_mokume.webp) no-repeat;
	background-attachment: fixed;
}

.btime-block{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.btime-block .btime-box{
	width: 48%;
	background:#fff;
	box-shadow: 3px 3px 10px #c8c8c8;
}
.btime-block .btime-box h3{
	background:#005883;
	padding:15px 10px;
	color:#fff;
	border-radius:3px 3px 0 0;
	text-align: center;
}
.btime-block .btime-box.lunch h3{
	background:#ff5722;
}
.btime-block .btime-box .btime-img img{
	width: 100%;
}
.btime-block .btime-box .btime-text{
	font-size:24px;
	text-align:center;
	padding:20px 0 5px 0;
}
.btime-block .btime-box .holiday-text{
	font-size:14px;
	text-align: center;
}
.btime-block .btime-box p{
	line-height: 1.5;
	margin-top:15px;
	padding:15px 15px;

}

@media screen and (max-width: 800px) {
	.btime-block{
		padding: 0 20px;
	}
	.btime-block .btime-box{
		width: 100%;
		margin-bottom:30px;
	}


}


/* ------------------------------------

	メニュー

-------------------------------------- */
.menu-section{
	padding:100px 0;
	background:url(../img/bg_mokume.webp) no-repeat;
	background-attachment: fixed;
}
.menu-box{
	padding:30px;
	border-radius:5px;
	background:#fff;
	box-shadow: 3px 3px 10px #33333333;
}
.menu-box h3{
	color:var(--main-color);
	margin-bottom:15px;
}
.menu-box h3.lunch{
	color:#ff5722;
}


.menu-layout-box{
	display: flex;
	justify-content: space-between;
}
.menu-layout-box .l-box{
	width: 48%;
}
.many-menu-text{
	text-align: right;
	margin-top:5px;
}
.menu-table{
	width: 100%;
	border-top:solid 1px #ddd;
}
.menu-table.top-no-border{
	border-top:0;
}
.menu-table th,
.menu-table td{
	padding:10px 0px;
	border-bottom:solid 1px #ddd;
}
.menu-table td.price{
	width: 120px;
	text-align: right;
}

.menu-caution{
	padding:10px 0;
	text-align:right;
	font-size:14px;
	line-height:1.5;
}


@media screen and (max-width: 800px) {
	.menu-section{
		padding: 100px 20px;
	}
	
	.menu-layout-box{
		flex-wrap: wrap;
	}
	.menu-layout-box .l-box{
		width: 100%;
	}

	.menu-table th,
	.menu-table td{
		font-size: 14px;
	}

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


}



/* ------------------------------------

	アクセス

-------------------------------------- */
.access-section{
	padding:100px 0;

}


.access-block{
	padding:100px 0;
}
.map-block{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.map-block .map-box{
	width: 48%;
}

@media screen and (max-width: 800px) {
	.access-section{
		padding-left:20px;
		padding-right:20px;
	}

	.map-block .map-box{
		width: 100%;
		margin-bottom:20px;
	}

}




/* ガイド
---------------------------- */
.guide-box{
	margin-top:100px;
}
.guide-box .guide-text{
	padding:50px 0;
	text-align: center;
	line-height:2;
}
.guide-box .guide-img img{
	width: 100%;
}

.about-table-title{
	margin-top:100px;
	color:#fff;
	font-size: 20px;
	font-weight: 900;
}
.about-table{
	margin-top:10px;
	width: 100%;
	border-top:solid 1px #346d89;
}
.about-table th,
.about-table td{
	color:#fff;
	padding: 15px 10px;
	border-bottom: solid 1px #346d89;
}
.about-table th{
	width: 180px;
	background:#00486c;
	border-radius:3px;
	text-align: left;
}


@media screen and (max-width: 800px) {

	.about-table th{
		width: 100px;
		padding-top:5px;
		padding-bottom:5px;
	}

	.about-table th,
	.about-table td{
		display: block;
		width:100%;
		font-size: 14px;
	}

	.guide-box .guide-text{
		font-size: 0.9em;
		text-align: left;
	}
}





/* 湯気
---------------------------------------- */

@keyframes steam01 {
  0% {
    bottom: -600px;
    filter: blur(16px);
    transform: rotateY(0deg);
    transform: scale(0.6, 1);
    opacity: 0
  }
  11% { opacity: 0.1 }
  33% {
    transform: rotateY(40deg);
    transform: scale(1, 1.4);
    opacity: 0.5
  }
  66% {
    transform: rotateY(10deg);
    transform: scaleY(1.8, 1);
    opacity: 0.4
  }
  100% {
    bottom: 0;
    filter: blur(20px);
    transform: rotateY(60deg);
    transform: scaleY(2, 1.8);
    opacity: 0
  }
}
@keyframes steam02 {
  0% {
    bottom: -400px;
    filter: blur(16px);
    transform: rotateY(0deg);
    transform: scale(0.6, 0.6);
    opacity: 0
  }
  11% { opacity: 0.1 }
  33% {
    transform: rotateY(40deg);
    transform: scale(0.8, 1);
    opacity: 0.4
  }
  66% {
    transform: rotateY(2deg);
    transform: scaleY(1, 1.2)
  }
  100% {
    bottom: 0;
    filter: blur(20px);
    transform: rotateY(50deg);
    transform: scaleY(1.2, 1.4);
    opacity: 0
  }
}
.steamBox {
	width: 100%;
	height: 100%;
	position:absolute;
	left:0;
	top:0;
	overflow: hidden;
}
.steamBox > img {
	width: 100%;
	display: block;
}
.steam01 {
	position: absolute;
	right: 0;
	animation: steam01 10s infinite linear;
	opacity: 0
}
.steam02 {
	position: absolute;
	left: 0;
	animation: steam02 14s infinite linear;
	opacity: 0
}
.steam03 {
	margin: auto;
	position: absolute;
	right: 0;
	left: 0;
	animation: steam02 12s infinite linear;
	animation-delay: 6s;
	opacity: 0
}
.steam01 img, .steam03 img {
	width: 532px;
	height: 800px;
	user-select: none;
}
.steam02 img {
	width: 399px;
	height: 600px;
	user-select: none;
}