@charset "utf-8";
/* CSS Document */
@media screen and (max-width:850px){
	
	html {
		font-size: 8px;
	}
	body {
		color: #333;
		max-width: 850px;
	}


	/*header*/
	#header {
		width: 100%;
		position: absolute;
		top: 1rem;
		left: 50%;
		transform: translate(-50%);
		z-index: 2;
	}
	#header .inner {
		width: 95%;
		margin: auto;
		justify-content: space-between;
		align-items: center;
	}
	.head-logo {
		width: 100px;
	}
	.head-nav .hn-top {
		width: 400px;
		margin-left: auto;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1rem;
	}
	.head-nav .hn-top .adress p {
		font-size: 12px;
	}
	.head-nav .hn-top .adress a {
		display: block;
		font-size: 20px;
		text-align: center;
		line-height: 1.5;
		text-shadow: 2px 2px 3px rgba(255,255,255,0.3);
	}
	.head-nav .hn-top .adress a i {
		font-size: 16px;
		margin-right: 1rem;
	}
	.reserve-btn {
		width: 150px;
		margin: auto;
		padding: 1rem 0;
		}
	.reserve-btn a {
		display: block;
		text-align: center;
		font-size: 16px;
	}
	.head-nav ul {
		gap:3rem;
		align-items: center;
	}
	.head-nav ul li a {
		display: block;
		font-size: 13px;
	}

	/*mainvisual*/
	.mainvisual {
		height: 60vh;
		background: url("../img/mainvisual.jpg");
		background-position: center;
		background-size: cover;
		position: relative;
	}
	.catch-copy {
		width: 90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.catch-copy h2 {
		text-align: center;
		font-size: 36px;
		line-height: 2;
		text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
	}
	.catch-copy h2 img {
		width: 250px;
		margin-top: -4rem;
	}

	/*news*/
	#news {
		padding: 5rem 0;
	}
	#news .ttl {
		text-align: center;
		font-size: 28px;
		line-height: 1;
	}
	#news .inner {
		width: 90%;
		margin: 5rem auto 0 auto;
	}
	#news .inner dl {
		width: 90%;
		margin: auto;
		justify-content: space-between;
		align-items: center;
		font-size: 16px;
	}
	#news .inner dl dt {
		width: 25%;
		text-align: center;
		margin-bottom: 1rem;
	}
	#news .inner dl dd {
		width: 75%;
		margin-left: 0;
		margin-bottom: 1rem;
	}


	#greeting {
		padding: 20rem 0;
		background: url("../img/bg04.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}
	#greeting::before {
		content: "";
		width: 200px;
		height: 160px;
		background: url("../img/greeting01.png");
		background-size: cover;
		position: absolute;
		top: 0;
		right: 0;
	}
	#greeting::after {
		content: "";
		width: 200px;
		height: 180px;
		background: url("../img/greeting02.png");
		background-size: cover;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	#greeting .inner {
		width: 80%;
		margin: auto;
	}
	.greeting-top {
		text-align: center;
		font-size: 36px;
	}
	.greeting-txt {
		text-align: center;
		font-size: 20px;
		line-height: 2;
		margin: 3rem auto;
	}

	/*kodawari*/
	#kodawari .container {
		width: 100%;
	}
	#kodawari .container .inner {
		padding: 15rem 0;
		width: 50%;
	}

	.l-box {
		margin-right: auto;
		background: url("../img/bg05.png");
		background-size: cover;
		background-position: center;
	}

	.r-box {
		margin-left: auto;
		background: url("../img/bg06.png");
		background-size: cover;
		background-position: center;
	}
	.kodawari01,
	.kodawari02 {
		position: relative;
	}
	.kodawari01::before {
		content: "";
		width: 50%;
		height: 100%;
		background: url("../img/kodawari01.jpg");
		background-size: cover;
		position: absolute;
		top:0;
		right: 0;
	}
	.kodawari02::before {
		content: "";
		width: 50%;
		height: 100%;
		background: url("../img/kodawari02.jpg");
		background-size: cover;
		position: absolute;
		top:0;
		left: 0;
	}
	.k-ttl {
		width: 95%;
		margin: auto;
		z-index: 2;
	}
	.k-txt {
		width: 98%;
		margin: 5rem auto 0 auto;
	}
	.k-txt p {
		font-size: 14px;
		line-height: 2;
		text-align: center;
	}

	#Recommend {
		padding: 8rem 0;
		background: url("../img/bg03.jpg");
		background-size: cover;
	}
	#Recommend .ttl {
		text-align: center;
		font-size: 36px;
	}
	#Recommend .inner {
		width: 90%;
		margin: 5rem auto;
		justify-content: space-between;
	}
	#Recommend .inner .item {
		width: 48%;
	}
	.recommend-txt {
		padding-left: 80px;
		box-sizing: border-box;
		position: relative;
	}
	.menu-ttl {
		font-size: 24px;
	}
	.menu-txt {
		font-size: 14px;
		line-height: 1.5;
		margin: 2rem auto 1rem auto;
	}
	.menu-price {
		font-size: 20px;
		text-align: right;
		margin-bottom: 2rem;
	}
	.recommend01 .recommend-txt::before {
		content: "";
		width: 70px;
		height: 84px;
		background: url("../img/deco06.png");
		background-size: cover;
		background-position: center;
		position: absolute;
		top:0;
		left: 0;
	}
	.recommend02 .recommend-txt::before {
		content: "";
		width: 70px;
		height: 84px;
		background: url("../img/deco07.png");
		background-size: cover;
		background-position: center;
		position: absolute;
		top:0;
		left: 0;
	}
	.page-link {
		width: 80%;
		margin: 5rem auto 0 auto;
		justify-content: space-between;
		align-items: center;
	}
	.page-link .link-btn {
		width: 48%;
		background: #FBF4E8;
		padding: 2rem 0;
	}
	.page-link .link-btn a {
		display: block;
		text-align: center;
		font-size: 20px;
		color: #333;
	}
	.page-link .link-btn:hover {
		background: #E1C9A1;
	}


	/*footer*/
	#footer {
		padding: 5rem 0 0 0;
		background: url("../img/bg01.jpg");
		background-size: cover;
	}
	.foot-logo {
		width: 150px;
		margin: auto;
	}
	#footer .inner {
		width: 95%;
		margin: 3rem auto;
		justify-content: space-between;
		align-items: center;
	}
	#footer .inner .txt {
		width: 44%;
	}
	#footer .inner .txt dl {
		width: 100%;
		justify-content: space-between;
		align-items: center;
		color: rgba(27,27,27,1.00);
	}
	#footer .inner .txt dl dt {
		width: 22%;
	}
	#footer .inner .txt dl dd {
		width: 75%;
	}
	#footer .inner .txt dl dt,
	#footer .inner .txt dl dd {
		font-size: 14px;
		margin-bottom: 1rem;
	}
	#footer .inner .map {
		width: 55%;
	}
	#footer .inner .map iframe {
		width: 100%;
	}
	.foot-copy {
		text-align: center;
		font-size: 12px;
		color: rgba(27,27,27,1.00);
	}


	/*下層*/
	/*mainvisual*/
	.s-mainvisual {
		height: 45vh;
		background: url("../img/s-mainvisual.jpg");
		background-position: center;
		background-size: cover;
		position: relative;
	}
	.page-ttl {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.page-ttl h2 {
		text-align: center;
		font-size: 50px;
		line-height: 2;
		text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	}

	/*menu*/
	.bg-beige {
		padding-bottom: 10rem;
	}

	.m-box {
		padding: 8rem 0;
	}
	.menu-ttl02 {
		width: 150px;
		margin: auto;
	}
	.menu-ttl02 img {
		width: 100%;
	}
	.menu-wrapper {
		width: 90%;
		margin: 5rem auto;
	}
	.menu-wrapper ul {
		justify-content: space-between;
		align-items: center;
	}
	.menu-wrapper ul li {
		width: 45%;
		justify-content: space-between;
		padding-bottom: 3rem;
		position: relative;
		margin-bottom: 2rem;
	}
	.menu-wrapper ul li::before {
		content: "";
		width: 100%;
		height: 8px;
		background: url("../img/deco01.png");
		background-size: cover;
		position: absolute;
		bottom: 2rem;
		left: 0;
	}
	.menu-wrapper ul li p {
		font-size: 14px;
	}
	#food {
		position: relative;
	}
	#food::before {
		content:"";
		width: 185px;
		height: 140px;
		background: url("../img/deco02.png");
		background-size: cover;
		position: absolute;
		bottom: 3rem;
		right: 10rem;
	}
	#drink {
		position: relative;
	}
	#drink::before {
		content:"";
		width: 135px;
		height: 170px;
		background: url("../img/deco03.png");
		background-size: cover;
		position: absolute;
		bottom: 0rem;
		right: 15rem;
	}


	/*gallery*/
	#gallery {
		padding: 5rem 0 0 0;
	}
	.gallery-ttl {
		width: 300px;
		margin: auto;
	}
	.gallery-top {
		width: 95%;
		margin: auto;
		padding: 5rem 0 15rem 0;
		position: relative;
	}
	.gallery-top::before {
		content: "";
		width: 40%;
		height: 80%;
		background: url("../img/gallery01.jpg");
		background-size: cover;
		position: absolute;
		bottom:0;
		right: 0;
	}
	.gallery-top .inner {
		width: 70%;
		background: #fff;
		padding: 3rem;
		box-sizing: border-box;
	}
	.gallery-top .inner .b-txt {
		font-size: 24px;
		margin-bottom: 2rem;
	}
	.gallery-top .inner .s-txt {
		font-size: 14px;
		line-height: 2;
	}
	.gallery-bottom {
		width: 95%;
		margin: 5rem auto;
		justify-content: space-between;
		align-items: flex-start;
	}
	.gallery-bottom .item {
		width: 45%;
	}
	.gallery-bottom .item img {
		margin-top: 2rem;
	}
	.gallery-bottom .item .b-txt {
		font-size: 24px;
	}
	.gallery-bottom .item .s-txt {
		font-size: 14px;
		line-height: 2;
	}


	/*about*/
	#about {
		padding: 5rem 0 0 0;
	}
	.about-ttl {
		width: 250px;
		margin: auto;
	}
	.about-info {
		width: 90%;
		margin: 5rem auto;
	}
	.about-info dl {
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}
	.about-info dl dt {
		width: 25%;
		text-align: center;
	}
	.about-info dl dd {
		width: 75%;
	}
	.about-info dl dt,
	.about-info dl dd {
		font-size: 16px;
		padding-bottom: 1rem;
		margin-bottom: 2rem;
		position: relative;
	}
	.about-info dl dt::before,
	.about-info dl dd::before {
		content: "";
		width: 100%;
		height: 3px;
		background: url("../img/deco08.png");
		background-size: cover;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.about-map {
		width: 95%;
		margin: 3rem auto;
	}
	.about-map iframe {
		width: 100%;
	}



	/*contact*/
	#contact {
		padding: 5rem 0;
	}
	.contact-ttl {
		width: 350px;
		margin: auto;
	}
	.contact-note {
		font-size: 16px;
		text-align: center;
		margin-top: 2rem;
	}
	form {
		width: 90%;
		margin: 3rem auto;
		background: #fff;
		padding: 5rem 0;
	}
	.formTable {
		width: 90%;
		margin: auto;
	}

	.formTable th {
		font-size: 14px;
		text-align: left;
		font-weight: normal;
	}
	.formTable th span {
		font-size: 10px;
		color: rgba(245,98,100,1.00);
		margin-left: 1rem;
	}
	.formTable th,
	.formTable td {
		padding-top: 3rem;
		padding-bottom: 2rem;
		border-bottom: 1px solid #ccc;
	}
	.formTable td input {
		width: 50%;
		border: 1px solid #ccc;
	}
	.formTable td textarea {
		width: 80%;
		border: 1px solid #ccc;
	}
	form .btn {
		width: 250px;
		margin: 3rem auto;
	}
	form .btn input {
		width: 100%;
		padding: 1rem 0;
		background: #7B5D2F;
		color: #fff;
		border: none;
	}
}

@media screen and (max-width:480px) {
	
	html {
		font-size: 6px;
	}
	body {
		color: #333;
		max-width: 480px;
	}
	.pc-only {
		display: none;
	}
	.sp-only {
		display: block;
	}

	/*header*/
	#header {
		width: 100%;
		position: absolute;
		top: 1rem;
		left: 50%;
		transform: translate(-50%);
		z-index: 2;
	}
	#header .inner {
		width: 90%;
		margin: auto;
		justify-content: space-between;
		align-items: center;
	}
	.head-logo {
		width: 100px;
	}
	

	/*mainvisual*/
	.mainvisual {
		height: 80vh;
		background: url("../img/mainvisual.jpg");
		background-position: center;
		background-size: cover;
		position: relative;
	}
	.catch-copy {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.catch-copy h2 {
		text-align: center;
		font-size: 23px;
		line-height: 2;
		text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
	}
	.catch-copy h2 img {
		width: 115px;
		margin-top: -4rem;
	}

	/*news*/
	#news {
		padding: 5rem 0;
	}
	#news .ttl {
		text-align: center;
		font-size: 28px;
		line-height: 1;
	}
	#news .inner {
		width: 90%;
		margin: 5rem auto 0 auto;
	}
	#news .inner dl {
		width: 90%;
		margin: auto;
		justify-content: space-between;
		align-items: center;
		font-size: 16px;
	}
	#news .inner dl dt {
		width: 25%;
		text-align: center;
		margin-bottom: 1rem;
		border-bottom: none;
	}
	#news .inner dl dd {
		width: 100%;
		margin-left: 0;
		margin-bottom: 1rem;
	}


	#greeting {
		padding: 20rem 0;
		background: url("../img/bg04.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}
	#greeting::before {
		content: "";
		width: 150px;
		height: 120px;
		background: url("../img/greeting01.png");
		background-size: cover;
		opacity: 0.5;
		position: absolute;
		top: 0;
		right: 0;
	}
	#greeting::after {
		content: "";
		width: 150px;
		height: 100px;
		background: url("../img/greeting02.png");
		background-size: cover;
		opacity: 0.5;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	#greeting .inner {
		width: 98%;
		margin: auto;
	}
	.greeting-top {
		text-align: center;
		font-size: 22px;
	}
	.greeting-txt {
		text-align: center;
		font-size: 13px;
		line-height: 2;
		margin: 3rem auto;
	}

	/*kodawari*/
	#kodawari .container {
		width: 100%;
	}
	#kodawari .container .inner {
		padding: 10rem 0;
		width: 100%;
	}

	.kodawari01::before {
		content: "";
		width: 100%;
		height: 30%;
		background: url("../img/kodawari01.jpg");
		background-size: cover;
		position: absolute;
		bottom:0;
		right: 0;
		display: none;
	}
	.kodawari02::before {
		content: "";
		width: 100%;
		height: 30%;
		background: url("../img/kodawari02.jpg");
		background-size: cover;
		position: absolute;
		bottom:0;
		right: 0;
		display: none;
	}
	.k-ttl {
		width: 80%;
		margin: auto;
		z-index: 2;
	}
	.k-txt {
		width: 98%;
		margin: 5rem auto 0 auto;
	}
	.k-txt p {
		font-size: 13px;
		line-height: 1.5;
		text-align: center;
	}

	#Recommend {
		padding: 8rem 0;
		background: url("../img/bg03.jpg");
		background-size: cover;
	}
	#Recommend .ttl {
		text-align: center;
		font-size: 36px;
	}
	#Recommend .inner {
		width: 90%;
		margin: 5rem auto;
		justify-content: space-between;
		gap:3rem;
	}
	#Recommend .inner .item {
		width: 100%;
	}
	.recommend-txt {
		padding-left: 80px;
		box-sizing: border-box;
		position: relative;
	}
	.menu-ttl {
		font-size: 24px;
	}
	.menu-txt {
		font-size: 14px;
		line-height: 1.5;
		margin: 2rem auto 1rem auto;
	}
	.menu-price {
		font-size: 20px;
		text-align: right;
		margin-bottom: 2rem;
	}
	.recommend01 .recommend-txt::before {
		content: "";
		width: 70px;
		height: 84px;
		background: url("../img/deco06.png");
		background-size: cover;
		background-position: center;
		position: absolute;
		top:0;
		left: 0;
	}
	.recommend02 .recommend-txt::before {
		content: "";
		width: 70px;
		height: 84px;
		background: url("../img/deco07.png");
		background-size: cover;
		background-position: center;
		position: absolute;
		top:0;
		left: 0;
	}
	.page-link {
		width: 80%;
		margin: 5rem auto 0 auto;
		justify-content: space-between;
		align-items: center;
	}
	.page-link .link-btn {
		width: 48%;
		background: #FBF4E8;
		padding: 2rem 0;
	}
	.page-link .link-btn a {
		display: block;
		text-align: center;
		font-size: 20px;
		color: #333;
	}
	.page-link .link-btn:hover {
		background: #E1C9A1;
	}


	/*footer*/
	#footer {
		padding: 5rem 0 0 0;
		background: url("../img/bg01.jpg");
		background-size: cover;
	}
	.foot-logo {
		width: 120px;
		margin: auto;
	}
	#footer .inner {
		width: 100%;
		margin: 3rem auto;
		justify-content: space-between;
		align-items: center;
	}
	#footer .inner .txt {
		width: 90%;
		margin: auto;
	}
	#footer .inner .txt dl {
		width: 100%;
		justify-content: space-between;
		align-items: center;
		color: rgba(27,27,27,1.00);
	}
	#footer .inner .txt dl dt {
		width: 22%;
	}
	#footer .inner .txt dl dd {
		width: 75%;
	}
	#footer .inner .txt dl dt,
	#footer .inner .txt dl dd {
		font-size: 14px;
		margin-bottom: 1rem;
	}
	#footer .inner .map {
		width: 100%;
	}
	#footer .inner .map iframe {
		width: 100%;
	}
	.foot-copy {
		text-align: center;
		font-size: 12px;
		color: rgba(27,27,27,1.00);
	}


	/*下層*/
	/*mainvisual*/
	.s-mainvisual {
		height: 45vh;
		background: url("../img/s-mainvisual.jpg");
		background-position: center;
		background-size: cover;
		position: relative;
	}
	.page-ttl {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.page-ttl h2 {
		text-align: center;
		font-size: 50px;
		line-height: 2;
		text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	}

	/*menu*/
	.bg-beige {
		padding-bottom: 10rem;
	}

	.m-box {
		padding: 8rem 0;
	}
	.menu-ttl02 {
		width: 150px;
		margin: auto;
	}
	.menu-ttl02 img {
		width: 100%;
	}
	.menu-wrapper {
		width: 80%;
		margin: 5rem auto;
	}
	.menu-wrapper ul {
		justify-content: space-between;
		align-items: center;
	}
	.menu-wrapper ul li {
		width: 100%;
		justify-content: space-between;
		padding-bottom: 3rem;
		position: relative;
		margin-bottom: 2rem;
	}
	.menu-wrapper ul li::before {
		content: "";
		width: 100%;
		height: 5px;
		background: url("../img/deco01.png");
		background-size: cover;
		position: absolute;
		bottom: 2rem;
		left: 0;
	}
	.menu-wrapper ul li p {
		font-size: 14px;
	}
	#food {
		position: relative;
	}
	#food::before {
		content:"";
		width: 120px;
		height: 90px;
		background: url("../img/deco02.png");
		background-size: cover;
		position: absolute;
		bottom: 0rem;
		right: 5rem;
	}
	#drink {
		position: relative;
	}
	#drink::before {
		content:"";
		width: 90px;
		height: 110px;
		background: url("../img/deco03.png");
		background-size: cover;
		position: absolute;
		bottom: 0rem;
		right: 5rem;
	}


	/*gallery*/
	#gallery {
		padding: 5rem 0 0 0;
	}
	.gallery-ttl {
		width: 200px;
		margin: auto;
	}
	.gallery-top {
		width: 95%;
		margin: auto;
		padding: 5rem 0 36rem 0;
		position: relative;
	}
	.gallery-top::before {
		content: "";
		width: 100%;
		height: 60%;
		background: url("../img/gallery01.jpg");
		background-size: cover;
		position: absolute;
		bottom:-3rem;
		right: 0;
	}
	.gallery-top .inner {
		width: 100%;
		background: #fff;
		padding: 3rem;
		box-sizing: border-box;
	}
	.gallery-top .inner .b-txt {
		font-size: 20px;
		margin-bottom: 2rem;
	}
	.gallery-top .inner .s-txt {
		font-size: 13px;
		line-height: 2;
	}
	.gallery-bottom {
		width: 90%;
		margin: 5rem auto;
		justify-content: space-between;
		align-items: flex-start;
	}
	.gallery-bottom .item {
		width: 100%;
	}
	.gallery-bottom .item img {
		margin-top: 2rem;
	}
	.gallery-bottom .item .b-txt {
		font-size: 20px;
	}
	.gallery-bottom .item .s-txt {
		font-size: 13px;
		line-height: 2;
	}


	/*about*/
	#about {
		padding: 5rem 0 0 0;
	}
	.about-ttl {
		width: 200px;
		margin: auto;
	}
	.about-info {
		width: 95%;
		margin: 5rem auto;
	}
	.about-info dl {
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}
	.about-info dl dt {
		width: 25%;
		text-align: center;
	}
	.about-info dl dd {
		width: 75%;
	}
	.about-info dl dt,
	.about-info dl dd {
		font-size: 11px;
		padding-bottom: 1rem;
		margin-bottom: 2rem;
		position: relative;
	}
	.about-info dl dt::before,
	.about-info dl dd::before {
		content: "";
		width: 100%;
		height: 1px;
		background: url("../img/deco08.png");
		background-size: cover;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.about-map {
		width: 95%;
		margin: 3rem auto;
	}
	.about-map iframe {
		width: 100%;
	}



	/*contact*/
	#contact {
		padding: 5rem 0;
	}
	.contact-ttl {
		width: 250px;
		margin: auto;
	}
	.contact-note {
		font-size: 12px;
		text-align: center;
		margin-top: 2rem;
	}
	form {
		width: 90%;
		margin: 3rem auto;
		background: #fff;
		padding: 5rem 0;
	}
	.formTable {
		width: 90%;
		margin: auto;
	}

	.formTable th {
		font-size: 10px;
		text-align: left;
		font-weight: normal;
	}
	.formTable th span {
		font-size: 7px;
		color: rgba(245,98,100,1.00);
		margin-left: 3px;
	}
	.formTable th,
	.formTable td {
		padding-top: 3rem;
		padding-bottom: 2rem;
		border-bottom: 1px solid #ccc;
	}
	.formTable td input {
		width: 70%;
		border: 1px solid #ccc;
	}
	.formTable td textarea {
		width: 95%;
		border: 1px solid #ccc;
	}
	form .btn {
		width: 250px;
		margin: 3rem auto;
	}
	form .btn input {
		width: 100%;
		padding: 1rem 0;
		background: #7B5D2F;
		color: #fff;
		border: none;
	}
	
	
	
	
	
}