@charset "utf-8";
/* CSS Document */

@media screen and (max-width:850px){
	html {
		font-size: 8px;
	}
	body {
		max-width: 850px;
	}
	.fs16 {
		font-size: 14px;
	}
	.fs18 {
		font-size: 15px;
	}
	.fs20 {
		font-size: 16px;
	}
	.fs24 {
		font-size: 20px;
	}
	.fs28 {
		font-size: 24px;
	}
	.fs32 {
		font-size: 28px;
	}
	.fs40 {
		font-size: 32px;
	}
	
	
	
	
	
	/*header*/
	#header {
		width: 280px;
		height: 65vh;
		background: rgba(0,0,0,0.8);
		padding: 3rem 0;
		box-sizing: border-box;
		position: absolute;
		top:0;
		right: 0;
		z-index: 2;
	}
	.head-logo {
		width: 120px;
		margin: 0 auto 1rem auto;
	}
	#header p {
		text-align: center;
	}
	#header .insta {
		display: block;
		text-align: center;
	}
	.head-nav {
		margin: 2rem auto;
	}
	.head-nav ul {
		flex-direction: column;
		gap: 1rem;
	}
	.head-nav ul li a {
		display: block;
		text-align: center;
	}
	.bnr-flex {
		width: 90%;
		margin: 1rem auto 0 auto;
		justify-content: space-between;
	}
	.bnr-flex .rebtn {
		width: 48%;
		padding: 1.6rem 0;
		box-sizing: border-box;
	}
	.bnr-flex .rebtn a {
		display: block;
		text-align: center;
	}
	.redbtn {
		background: linear-gradient(#B20F0F,#E25B5B);
	}
	.yelbtn {
		background: linear-gradient(#FFBB1F,#F3962C);
	}

	/*mainbvisual*/
	.mainvisual {
		height: 65vh;
		background-position: center center;
		background-size: cover;
		position: relative;
	}


	/*news*/
	#news {
		padding: 10rem 0;
		background: url("../img/bg01.jpg");
		background-size: cover;
		background-position: center;
	}
	.ttl01 {
		text-align: center;
		position: relative;
	}
	.ttl01::before {
		content: "";
		width: 150px;
		height: 3px;
		background: #B20F0F;
		position: absolute;
		bottom: -1rem;
		left: 50%;
		transform: translate(-50%);
	}
	#news .inner {
		width: 618px;
		margin: 5rem auto;
	}
	#news .inner dl {
		justify-content: space-between;
	}
	#news .inner dl dt {
		width: 20%;
		color: #B20F0F;
	}
	#news .inner dl dd {
		width: 80%;
	}


	/*greeting*/
	#greeting {
		padding: 10rem 0 5rem 0;
		background: url("../img/bg02.jpg");
		background-size: cover;
		background-position: center;
	}
	.ttl02 {
		text-align: center;
		letter-spacing: 3px;
	}
	#greeting .inner {
		width: 95%;
		margin: 10rem auto ;
	}
	#greeting .inner .img {
		width: 45%;
	}
	#greeting .inner .txt {
		width: 55%;
		padding: 5rem 0 5rem 8rem;
		background: rgba(0,0,0,0.7);
		margin-left: -5rem;
		margin-top: 10rem;
	}
	#greeting .inner .txt p {
		line-height: 2;
	}



	.bg-beige {
		background: url("../img/bg03.jpg");
		background-size: cover;
		background-position: center;
	}
	/*commitment*/
	#commitment {
		padding: 10rem 0;
	}
	.ttl03 {
		width: 300px;
		margin: auto;
	}
	#commitment .wrapper {
		width: 95%;
		margin: 10rem auto;
		flex-direction: column;
		gap:8rem;
	}
	#commitment .wrapper .container {
		justify-content: space-between;

	}
	#commitment .wrapper .container .txt,
	#commitment .wrapper .container .img {
		width: 50%;
	}
	#commitment .wrapper .container .txt {
		background: rgba(0,0,0,0.5);
		padding: 2rem;
		box-sizing: border-box;
	}
	.co-ttl {
		margin-bottom: 3rem;
	}
	.co-txt {
		line-height: 2;
	}
	#commitment .reserve-bnr p {
		text-align: center;
	}
	#commitment .bnr-flex {
		width: 499px;
	}


	/*linkflex*/
	.linkflex {
		justify-content: space-between;
	}
	.linkflex .page-link {
		padding: 10rem 0;
		width: calc(100%/3);
	}
	.linkflex .page-link a {
		display: block;
		text-align: center;
		position: relative;
	}
	.linkflex .page-link a::before {
		content: "";
		width:100px;
		height: 3px;
		background: #B20F0F;
		position: absolute;
		bottom: -0.5rem;
		left: 50%;
		transform: translate(-50%);
	}
	.menu-link {
		background: url("../img/bg04.jpg");
		background-size: cover;
	}
	.garelly-link {
		background: url("../img/bg05.jpg");
		background-size: cover;
	}
	.about-link {
		background: url("../img/bg06.jpg");
		background-size: cover;
	}


	/*footer*/
	#footer {
		background: #333;
		padding: 5rem 0 0 0;
	}
	#footer .inner {
		width: 90%;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
	}
	#footer .inner .left {
		width: 45%;
	}
	.foot-logo {
		width: 70%;
		margin: 0 auto 1rem auto;
	}
	#footer .inner .left p {
		text-align: center;
	}
	#footer .inner .right {
		width: 53%;
	}
	.foot-info dl {
		justify-content: space-between;
		align-items: center;
	}
	.foot-info dl dt {
		width: 20%;
		margin-bottom: 1.8rem;
	}
	.foot-info dl dd {
		width: 80%;
		margin-bottom: 1.8rem;
	}
	.foot-map {
		margin-top: 5rem;
		width: 100%;
	}
	.foot-map iframe {
		width: 100%;
	}
	.copy {
		text-align: center;
	}



	/*--- 下層ページ ---*/

	/*menu*/
	/*mainbvisual*/
	.menu-mainvisual {
		height: 65vh;
	}

	/*pickup*/
	#pickup {
		padding: 10rem 0;
	}
	.ttl04 {
		font-family:"DNP 秀英にじみ初号明朝 Std Hv";
		text-align: center;
	}
	.s-wrapper {
		width: 95%;
		margin: 10rem auto 8rem auto;
		flex-direction: column;
		gap:5rem;
	}
	.s-wrapper .container {
		justify-content: space-between;
		align-items: center;
	}
	.s-wrapper .container .img {
		width: 45%;
	}
	.s-wrapper .container .txt {
		width: 50%;
	}
	.menu-ttl {
		margin-bottom: 3rem;
	}
	.menu-txt {
		line-height: 2;
		margin-bottom: 3rem;
	}
	.menu-price {
		text-align: right;
	}
	.s-content .reserve-bnr {
		width: 450px;
		margin: auto;
		border: 2px solid #707070;
		padding: 3rem;
		box-sizing: border-box;
	}
	.s-content .reserve-bnr p {
		text-align: center;
	}

	.menu-link {
		justify-content: space-between;
	}
	.menu-link .menu-link-bnr {
		width: 50%;
		padding: 10rem 0;
	}
	.menu-link .menu-link-bnr .reserve-bnr {
		width: 300px;
		margin: auto;
		border: 2px solid #fff;
		padding: 3rem;
		box-sizing: border-box;
	}
	.menu-link .menu-link-bnr .reserve-bnr p {
		text-align: center;
	}
	.menu-link .left {
		background: url("../img/bg04.jpg");
		background-size: cover;
	}
	.menu-link .right {
		background: url("../img/bg05.jpg");
		background-size: cover;
		border-left: 1px solid #fff;
		box-sizing: border-box;
	}



	/*gallery*/
	/*mainbvisual*/
	.gallery-mainvisual {
		height: 65vh;
		
	}
	#gallery {
		padding: 10rem 0;
	}


	/*about*/
	/*mainvisual*/
	.about-mainvisual {
		height: 65vh;
	}
	#about {
		padding: 10rem 0;
	}
	.s-wrapper .container .txt dl {
		justify-content: space-between;
		align-items: center;
	}
	.s-wrapper .container .txt dl dt {
		width: 20%;
		margin-bottom: 2.5rem;
	}
	.s-wrapper .container .txt dl dd {
		width: 80%;
		margin-bottom: 2.5rem;
	}
	.about-map {
		width: 90%;
		margin: 5rem auto;
	}
	.about-map iframe {
		width: 100%;
	}

}















@media screen and (max-width:431px){
	html {
		font-size: 6px;
	}
	body {
		max-width: 420px;
	}
	.fs16 {
		font-size: 12px;
	}
	.fs18 {
		font-size: 14px;
	}
	.fs20 {
		font-size: 15px;
	}
	.fs24 {
		font-size: 18px;
	}
	.fs28 {
		font-size: 20px;
	}
	.fs32 {
		font-size: 22px;
	}
	.fs40 {
		font-size: 28px;
	}
	.sp-only {
		display: block;
	}
	
	
	
	
	/*header*/
	#header {
		width: 100%;
		height: auto;
		background: rgba(0,0,0,0.0);
		padding: 3rem 0;
		box-sizing: border-box;
		position: absolute;
		top:2rem;
		left: 0rem;
		z-index: 2;
	}
	.head-logo {
		width: 200px;
		margin: 0 auto 1rem 0;
	}
	#header p {
		display: none;
	}
	#header .insta {
		display: none;
	}
	.head-nav {
		margin: 2rem auto;
		display: none;
	}
	#header .bnr-flex {
		display: none;
	}
	.bnr-flex .rebtn {
		width: 48%;
		padding: 1.6rem 0;
		box-sizing: border-box;
	}
	.bnr-flex .rebtn a {
		display: block;
		text-align: center;
	}
	.redbtn {
		background: linear-gradient(#B20F0F,#E25B5B);
	}
	.yelbtn {
		background: linear-gradient(#FFBB1F,#F3962C);
	}

	/*mainbvisual*/
	.mainvisual {
		height: 90vh;
	}


	/*news*/
	#news {
		padding: 10rem 0;
	}
	#news .inner {
		width: 95%;
		margin: 5rem auto;
	}
	#news .inner dl {
		justify-content: space-between;
	}
	#news .inner dl dt {
		width: 20%;
		color: #B20F0F;
	}
	#news .inner dl dd {
		width: 70%;
	}


	/*greeting*/
	#greeting {
		padding: 10rem 0 5rem 0;
		background: url("../img/bg02.jpg");
		background-size: cover;
		background-position: center;
	}
	.ttl02 {
		text-align: center;
		letter-spacing: 3px;
	}
	#greeting .inner {
		width: 95%;
		margin: 10rem auto ;
		flex-direction: column;
		gap:3rem;
	}
	#greeting .inner .img {
		width: 100%;
	}
	#greeting .inner .txt {
		width: 100%;
		padding: 5rem 2rem;
		background: rgba(0,0,0,0.7);
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		box-sizing: border-box;
	}
	#greeting .inner .txt p {
		line-height: 2;
	}



	.bg-beige {
		background: url("../img/bg03.jpg");
		background-size: cover;
		background-position: center;
	}
	/*commitment*/
	#commitment {
		padding: 10rem 0;
	}
	.ttl03 {
		width: 300px;
		margin: auto;
	}
	#commitment .wrapper {
		width: 95%;
		margin: 10rem auto;
		flex-direction: column;
		gap:8rem;
	}
	#commitment .wrapper .container {
		flex-direction: column;
	}
	#commitment .wrapper .container .txt,
	#commitment .wrapper .container .img {
		width: 100%;
	}
	#commitment .wrapper .container .txt {
		background: rgba(0,0,0,0.5);
		padding: 2rem;
		box-sizing: border-box;
	}
	.co-ttl {
		margin-bottom: 3rem;
	}
	.co-txt {
		line-height: 2;
	}
	#commitment .reserve-bnr p {
		text-align: center;
	}
	#commitment .bnr-flex {
		width: 90%;
		margin: auto;
	}


	/*linkflex*/
	.linkflex {
		justify-content: space-between;
	}
	.linkflex .page-link {
		padding: 10rem 0;
		width: 100%;
	}
	.linkflex .page-link a {
		display: block;
		text-align: center;
		position: relative;
	}
	.linkflex .page-link a::before {
		content: "";
		width:100px;
		height: 3px;
		background: #B20F0F;
		position: absolute;
		bottom: -0.5rem;
		left: 50%;
		transform: translate(-50%);
	}
	.menu-link {
		background: url("../img/bg04.jpg");
		background-size: cover;
	}
	.garelly-link {
		background: url("../img/bg05.jpg");
		background-size: cover;
	}
	.about-link {
		background: url("../img/bg06.jpg");
		background-size: cover;
	}


	/*footer*/
	#footer {
		background: #333;
		padding: 5rem 0 0 0;
	}
	#footer .inner {
		width: 95%;
		margin: 0 auto;
		flex-direction: column-reverse;
		gap:3rem;
	}
	#footer .inner .left {
		width: 100%;
	}
	.foot-logo {
		width: 50%;
		margin: 0 auto 1rem auto;
	}
	#footer .inner .left p {
		text-align: center;
	}
	#footer .inner .right {
		width: 100%;
	}
	.foot-info dl {
		justify-content: space-between;
		align-items: center;
	}
	.foot-info dl dt {
		width: 20%;
		margin-bottom: 1.8rem;
	}
	.foot-info dl dd {
		width: 80%;
		margin-bottom: 1.8rem;
	}
	.foot-map {
		margin-top: 5rem;
		width: 100%;
	}
	.foot-map iframe {
		width: 100%;
	}
	.copy {
		text-align: center;
		font-size: 12px;
	}



	/*--- 下層ページ ---*/

	/*menu*/
	/*mainbvisual*/
	.menu-mainvisual {
		height: 90vh;
	}

	/*pickup*/
	#pickup {
		padding: 10rem 0;
	}
	.ttl04 {
		font-family:"DNP 秀英にじみ初号明朝 Std Hv";
		text-align: center;
	}
	.s-wrapper {
		width: 95%;
		margin: 10rem auto 8rem auto;
		flex-direction: column;
		gap:8rem;
	}
	.s-wrapper .container {
		flex-direction: column;
		gap:3rem;
	}
	.s-wrapper .container .img {
		width: 100%;
	}
	.s-wrapper .container .txt {
		width: 100%;
	}
	.menu-ttl {
		margin-bottom: 3rem;
	}
	.menu-txt {
		line-height: 2;
		margin-bottom: 3rem;
	}
	.menu-price {
		text-align: right;
	}
	.s-content .reserve-bnr {
		width: 95%;
		margin: auto;
		border: 2px solid #707070;
		padding: 3rem;
		box-sizing: border-box;
	}
	.s-content .reserve-bnr p {
		text-align: center;
	}

	.menu-link {
		flex-direction: column;
	}
	.menu-link .menu-link-bnr {
		width: 100%;
		padding: 10rem 0;
	}
	.menu-link .menu-link-bnr .reserve-bnr {
		width: 300px;
		margin: auto;
		border: 2px solid #fff;
		padding: 3rem;
		box-sizing: border-box;
	}
	.menu-link .menu-link-bnr .reserve-bnr p {
		text-align: center;
	}
	.menu-link .left {
		background: url("../img/bg04.jpg");
		background-size: cover;
	}
	.menu-link .right {
		background: url("../img/bg05.jpg");
		background-size: cover;
		border-left:none;
		border-top: 1px solid #fff;
		box-sizing: border-box;
	}



	/*gallery*/
	/*mainbvisual*/
	.gallery-mainvisual {
		height: 90vh;
		
	}
	#gallery {
		padding: 10rem 0;
	}


	/*about*/
	/*mainvisual*/
	.about-mainvisual {
		height: 90vh;
	}
	#about {
		padding: 10rem 0;
	}
	.s-wrapper .container .txt dl {
		justify-content: space-between;
		align-items: center;
	}
	.s-wrapper .container .txt dl dt {
		width: 20%;
		margin-bottom: 2.5rem;
	}
	.s-wrapper .container .txt dl dd {
		width: 80%;
		margin-bottom: 2.5rem;
	}
	.about-map {
		width: 90%;
		margin: 5rem auto;
	}
	.about-map iframe {
		width: 100%;
	}


}