@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@400;700&family=Zen+Old+Mincho&display=swap');
/* CSS Document */
body {
	    font-family: 'Noto Sans JP', sans-serif;
}
a{
	transition: all 0.3s ease;
}
.mincho,
h1, h2, h3, h4, h5, h6{
	font-family: "Zen Old Mincho", serif;
}
.c-entry__body h1,
.c-entry__body h2,
.c-entry__body h3,
.c-entry__body h4,
.c-entry__body h5,
.c-entry__body h6,
.reservation h2{
	font-weight: normal;
}
.ff-ns{
	    font-family: 'Noto Sans JP', sans-serif;
}
.sp,
.br-sp{
	display:none;
}
.btn01{
	font-family: "Zen Old Mincho", serif;
}
.btn02{
	display: block;
	width: 100%;
	max-width: 24rem;
	text-decoration: none;
	color: #000;
	border: solid 1px #000;
	margin: 0 auto;
	padding: .75rem 1rem;
}
.btn01 a:hover,
.btn02:hover{
	color: #fff;
	background-color: #333;
	border-color: #333;
}
@media (max-width: 767px) {
	.pc,
	.br-pc{
		display:none;
	}
	.sp,
	.br-sp{
		display:block;
	}
}
/* =======================================
    fadein
======================================= */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* 遅延ありバリエーション */
.fadein00 {
  opacity: 0;
}

.fadein00.delay-0 {
  animation: fadeIn 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 0s;
}
.fadein00.delay-1 {
  animation: fadeIn 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 1s;
}
.fadein00.delay-2 {
  animation: fadeIn 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 2s;
}
.fadein,
.fadein01,
.fadein02,
.fadein03,
.fadein04,
.fadein05,
.fadein06{
	opacity: 0;
	transition: all 1.5s;
	transform: translate(0,20px);
}
.fadein.scrollin,
.fadein01.scrollin,
.fadein02.scrollin,
.fadein03.scrollin,
.fadein04.scrollin,
.fadein05.scrollin,
.fadein06.scrollin{
	opacity: 1 !important;
	transform: translate(0, 0) !important;
}
/* =======================================
    header
======================================= */
.l-header{
	font-family: "Zen Old Mincho", serif;
}
.p-global-nav--hover-text-color .c-navbar__item:focus-visible, .p-global-nav--hover-text-color.p-global-nav--current-same-hover-effect .c-navbar__item[data-active-menu]{
	color: #c19962;
}
.c-hamburger-btn,
.c-drawer a{
	color: #000;
}
.c-drawer .c-hamburger-btn__bar{
	background-color: #000;
}
.c-header-content{
	display: flex;
	align-items: center;
	gap: 1rem;
}
.header-contact{
	font-size: .75rem;
	line-height: 1;
	text-align: center;
	background-color: #fff;
	border-radius: 5rem;
	padding: .5rem 2rem .75rem;
}
.header-contact a{
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	text-decoration: none;
	color: #000;
	margin-top: .5rem;
	pointer-events: none;
}
.header-insta img{
	width: 2.5rem;
}
#menu-item-246 a{
	font-size: 0;
	width: 1.5rem;
	height: 1.5rem;
	background: url(img/icon-instagram.svg) center center / contain no-repeat;
}
#menu-item-247 a{
	font-size: 1rem;
	text-align: center;
	background-color: #fff;
	border-radius: 3rem;
	padding: .5rem;
}
@media (min-width: 1024px) {
	[data-scrolled=false] .l-header--sticky-overlay-colored-lg{
		color: #000;
	}
	[data-scrolled=true] .header-contact{
		box-shadow: 0 0 3px 0px #ddd;
	}
}
@media (max-width: 1023px) {
	.l-header__content{
		padding: 5px 0;
	}
	.c-site-branding__title{
		line-height: 0;
	}
	.c-site-branding__title .custom-logo{
		width: auto;
		height: 45px;
	}
}
/* =======================================
    メインコンテンツ
======================================= */
.c-section{
	padding-top: 0;
}
.p-entry-content>:where(:not(:first-child)){
	margin-top: 0;
}
.p-entry-content{
	padding: 0;
}
:where(.c-entry__content>:not(.alignleft):not(.alignright):not(.alignfull)){
	max-width: none;
}
.l-contents__main .c-section:last-child{
	padding-bottom: 0;
}
.container{
	max-width: 66rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 1024px) {
	.l-contents{
		padding-top: 82px;
	}
	.home .l-contents{
		padding-top: 0;
	}
}
/* =======================================
    TOP
======================================= */
/*mainview*/
.mainview{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background: url(img/bg-mainview.jpg) center center / cover no-repeat;
	margin-bottom: 3rem;
}
.mainview img{
	width: 340px;
}
/*Concept*/
.concept01{
	position: relative;
	margin-bottom: 4rem;
	padding-top: 4rem;
}
.concept01::before{
	content: "";
	position: absolute;
	top: 0;
	left: -18rem;
	display: block;
	width: 451px;
	height: 655px;
	background: url(img/concept.png) center center / contain no-repeat;
	z-index: -1;
}
.con01-text{
	position: absolute;
	top: 3rem;
	left: 0;
}
.concept01 h2{
	font-size: 2.25rem;
	margin-bottom: 2rem;
}
.concept-img{
	position: relative;
	display: block;
	width: 90%;
	max-width: 1030px;
	margin-left: auto;
}
.concept-img .fadein01{
	display: block;
	width: 100%;
}
.concept-img .fadein02,
.concept-img .fadein03,
.concept-img .fadein04{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.concept-img-sp{
	display: none;
}
.concept02{
	display:flex;
	align-items: center;
	gap: 4rem;
	max-width: 68rem;
	margin: 0 auto 3rem;
}
.concept02 h2{
	margin-bottom: 2rem;
}
/*MENU*/
.index-menu{
	text-align: center;
	background-color: #dcdacf;
	background-image: url(img/menu.png);
	background-position: top 45px center;
	background-repeat: no-repeat;
	background-size: 440px;
	padding: 6rem 0 3rem;
	margin-top: 6rem;
}
.index-menu .container{
	position: relative;
	z-index: 10;
}
.index-menu h1{
	font-size: 2.5rem;
	margin-bottom: 4rem;
}
.index-menu h1 span{
	display: block;
	font-size: 1rem;
}
.index-lunch,
.lunch{
	max-width: 40rem;
	background-color: #fff;
	border-radius: 1rem;
	margin: 0 auto 3rem;
	padding: 2rem;
}
.index-lunch dt,
.lunch dt{
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 1;
	margin-bottom: 1rem;
}
.index-lunch dt span,
.lunch dt span{
	display: block;
	font-size: .875rem;
}
.index-lunch dd,
.lunch dd{
	font-size: 2rem;
}
.index-menu-img01{
	width: 100%;
	margin-top: 4rem;
}
/*ACCESS*/
#access{
	text-align: center;
	padding: 4rem 0;
}
#access h1{
	font-size: 2.5rem;
	margin-bottom: 2rem;
}
#access h1 span{
	display: block;
	font-size: 1rem;
}
.access01{
	margin-bottom: 1rem;
}
.access02{
	line-height: 1.5;
}
#access iframe{
	margin-top: 2rem;
}
/*Instagram*/
.sbi_feedtheme_header_text{
	color: #000;
}
@media (max-width: 1200px) {
	.concept01::before{
		left: -15rem;
	}
	.concept02{
		gap: 3rem;
	}
	.concept02 img{
		width: calc(100% - 23rem);
	}
	.con02-text{
		width: 20rem;
	}
}
@media (max-width: 1024px) {
	.mainview{
		margin-top: -62px;
	}
}
@media (max-width: 960px) {
	.mainview{
		margin-bottom: 2rem;
	}
	.concept01{
		text-align: center;
		margin-bottom: 0;
		padding-top: 1rem;
	}
	.concept01::before{
		left: -13rem;
	}
	.con01-text{
		position: inherit;
		top: inherit;
		left: inherit;
		margin-bottom: 1rem;
	}
	.concept-img{
		display: none;
	}
	.concept-img-sp{
		display: block;
		width: 100%;
		margin-bottom: 4rem;
	}
	.concept-img-sp img:first-child{
		width: 80%;
	}
	.concept-img-sp img:last-child{
		display: block;
		width: 60%;
		margin-top: -2rem;
		margin-left: auto;
	}
}
@media (max-width: 767px) {
	.mainview{
		height: 600px;
	}
	.mainview img{
		width: 290px;
	}
	.concept01{
		padding-top: 0;
	}
	.concept01::before{
		top: -8rem;
		left: -9rem;
		width: 300px;
	}
	.concept01 h2{
		font-size: 1.75rem;
	}
	.concept02{
		flex-direction: column-reverse;
		gap: 2rem;
	}
	.concept02 img{
		width: 100%;
	}
	.con02-text{
		width: 100%;
		text-align: center;
	}
	.index-menu{
		background-size: 280px;
		background-position: top 20px center;
		padding: 3rem 0;
	}
	.index-menu-img02{
		margin-top: 4rem;
	}
	.index-menu-img02 img{
		display: block;
	}
	.index-menu-img02 img:nth-of-type(1){
		width: 70%;
	}
	.index-menu-img02 img:nth-of-type(2){
		width: 80%;
		margin-left: auto;
		margin-top: -2rem;
		margin-bottom: 3rem;
	}
	.index-menu-img02 img:nth-of-type(3){
		width: 75%;
	}
	#access h1{
		font-size: 2rem;
		margin-bottom: 1rem;
	}
}
@media (max-width: 560px) {
	.index-menu{
		margin-top: 4rem;
		padding-top: 4rem;
	}
	.index-menu::before{
		font-size: 7rem;
	}
	.index-menu h1{
		font-size: 2rem;
		margin-bottom: 2rem;
	}
	.index-lunch dt{
		font-size: 1.25rem;
	}
	.index-lunch dd{
		font-size: 1.5rem;
	}
}
/* =======================================
    footer
======================================= */
.l-footer--default .l-footer-widget-area{
	padding: 0;
}
.l-footer .c-container{
	max-width: none;
	padding: 0;
}
.l-footer .c-row>.c-row__col:not(:last-of-type){
	margin-bottom: 0;
}
.reservation{
	text-align: center;
	color: #fff;
	background: url(img/reservation.jpg) center center / cover no-repeat;
	padding: 6rem 1rem;
}
.reservation h2{
	font-size: 2.5rem;
}
.reservation p{
	margin-bottom: 1.25rem;
}
.reservation a{
	display: block;
	max-width: 26rem;
	font-size: 2.5rem;
	text-decoration: none;
	color: #000;
	background-color: #fff;
	border-radius: 10rem;
	margin: 0 auto;
	padding: 1rem;
	pointer-events: none;
}
.footer01{
	text-align: center;
	color: #fff;
	background-color: #000;
	padding: 3rem 1rem;
}
.logo-footer{
	display: block;
	width: 100%;
	max-width: 342px;
	margin: 0 auto 2rem;
}
address{
	font-style: inherit;
}
.footer-phone{
	display: block;
	font-size: 2rem;
	text-decoration: none;
	pointer-events: none;
	margin-top: 2rem;
}
.c-copyright--inverse{
	background-color: #000;
}
@media (max-width: 767px) {
	.reservation{
		padding: 3rem 1rem;
	}
	.reservation h2{
		font-size: 2rem;
	}
	.reservation a{
		font-size: 1.75rem;
		padding: .5rem;
		pointer-events: auto;
	}
	.reservation a:hover{
		background-color: rgba(255, 255, 255, .8);
	}
	.footer-phone{
		font-size: 1.5rem;
		border: solid 1px #fff;
		border-radius: 3rem;
		padding: .25rem;
		pointer-events: auto;
	}
	.footer-phone:hover{		
		background-color: rgba(255, 255, 255, .2);
	}
}
/* =======================================
    ページ共通
======================================= */
.c-entry__header{
	font-size: 3rem;
	text-align: center;
	background-color: #dcdacf;
	padding: 3.5rem 1rem;
}
.c-entry__title::after{
	display: block;
	font-size: 1rem;
}
.page-id-12 .c-entry__title::after{
	content: "THE HAMANAKO TERRACE について";
}
.page-id-14 .c-entry__title::after{
	content: "店舗情報";
}
@media (max-width: 767px) {
	.c-entry__header{
		font-size: 2rem;
		padding: 2.5rem 1rem;
	}
}
/* =======================================
    ABOUT
======================================= */
.about-intro{
	font-size: 1.5rem;
	text-align: center;
	margin: 2rem 0 6rem;
	padding: 0 1rem;
}
.greeting01{
	position: relative;
	margin-bottom: 4rem;
}
.greeting01::before{
	content: "";
	position: absolute;
	top: 0;
	left: 60%;
	display: block;
	width: 581px;
	height: 371px;
	background: url(img/greeting.png) center center /contain no-repeat;
	z-index: -1;
}
.greeting01 .container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 5rem;
}
.greeting01 img{
	width: 33%;
	max-width: 443px;
}
.greeting01 img.sp{
	display: none;
}
.gre01-text{
	flex: 1;
}
.greeting01 h2{
	font-size: 1.5rem;
	margin-bottom: 2rem;
}
.greeting01 p{
	margin-bottom: 1rem;
}
.greeting01 .syomei{
	font-size: 1.25rem;
	text-align: right;
	margin-bottom: 0;
}
.greeting02{
	margin-bottom: 3rem;
}
.greeting02 .container{
	position: relative;
}
.gre-img01{
	position: relative;
	width: 100%;
	max-width: 1038px;
	margin-left: auto;
}
.gre-img01 .fadein02{
	width: 100%;
}
.gre-img01 .fadein03,
.gre-img01 .fadein04,
.gre-img01 .fadein05,
.gre-img01 .fadein06{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.gre02-text{
	position: absolute;
	top: 2rem;
	left: 1rem;
	width: 50%;
}
.greeting02 h2{
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}
.gre-img02,
.gre-img03,
.gre-img04{
	display: none;
}
.page-id-12 .concept02{
	max-width: 78rem;
}
.page-id-12 .concept02 h2{
	text-align: center;
}
.page-id-12 .con02-text p{
	padding: 0 1rem;
}
.about-img01{
	display: block;
	width: 100%;
	margin-bottom: 2rem;
}
.about-img02{
	display: none;
}
#menu{
	text-align: center;
	background-color: #dcdacf;
	background-image: url(img/menu.png);
	background-position: top 45px center;
	background-repeat: no-repeat;
	background-size: 440px;
	padding: 6rem 0 3rem;
}
#menu h2{
	font-size: 3rem;
	margin-bottom: 3rem;
}
#menu h2 span{
	display: block;
	font-size: 1.5rem;
	line-height: 1;
}
.lunch{
	max-width: 50rem;
	margin-bottom: .5rem;
}
.lunch img{
	display: block;
	margin: 1rem auto;
}
.menu-list{
	font-size: 1.125rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu-note{
	max-width: 50rem;
	font-size: .875rem;
	text-align: right;
	margin: 0 auto 2rem;
}
@media (max-width: 1200px) {
	.page-id-12 .concept02{
		gap: 2rem;
	}
	.page-id-12 .concept02 img {
		width: calc(100% - 26rem);
	}
	.page-id-12 .con02-text{
		width: 26rem;
	}
	.page-id-12 .concept02 h2{
		margin-bottom: 1rem;
	}
}
@media (max-width: 960px) {
	.greeting01::before{
		left: 55%;
		font-size: 9rem;
	}
	.greeting01 .container{
		align-items: flex-start;
		gap: 3rem;
	}
	.gre-img01{
		display: none;
	}
	.greeting02 .container{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
		gap: 2rem;
		height: auto;
		margin-bottom: 1rem;
	}
	.gre-img02{
		display: block;
		width: 50%;
	}
	.gre02-text{
		position: relative;
		top: inherit;
		left: inherit;
		flex: 1;
		padding-top: 0;
	}
	.greeting02 h2{
		font-size: 1.25rem;
	}
	.gre-img03{
		display: block;
		width: 60%;
	}
	.gre-img04{
		display: block;
		width: 70%;
		margin-top: -2rem;
		margin-left: auto;
	}
}
@media (max-width: 767px) {
	.about-intro{
		font-size: 1.125rem;
	}
	.greeting01::before{
		top: -3rem;
		font-size: 7rem;
	}
	.greeting01 .container{
		display: block;
	}
	.greeting01 img.pc{
		display: block;
		float: left;
		margin: 0 2rem 1rem 0;
	}
	.greeting01 h2{
		font-size: 1.25rem;
		margin-bottom: 1.5rem;
	}
	.greeting02 .container{
		flex-direction: column;
		gap: 1rem;
	}
	.gre-img02{
		width: 100%;
	}
	.gre02-text{
		width: 100%;
	}
	.greeting02 h2{
		margin-bottom: .75rem;
	}
	.page-id-12 .concept02{
		flex-direction: column;
	}
	.page-id-12 .concept02 img{
		width: 100%;
	}
	.page-id-12 .con02-text{
		width: 100%;
	}
	.page-id-12 .con02-text p{
		display: inline-block;
		text-align: left;
		padding: 0 .5rem 0 1rem;
	}
	.about-img01{
		display: none;
	}
	.about-img02{
		display: block;
	}
	.about-img02 img{
		display: block;
		margin-bottom: 1rem;
	}
	#menu{
		background-size: 280px;
		background-position: top 20px center;
		padding: 3rem 0;
	}
	#menu h2{
		font-size: 2rem;
		margin-bottom: 2rem;
	}
	#menu h2 span{
		font-size: 1rem;
	}
	.lunch{
		padding: 2rem 1rem;
	}
	.lunch dt{
		font-size: 1.25rem;
	}
	.lunch dd{
		font-size: 1.5rem;
	}
	.menu-list{
		font-size: 1rem;
	}
	.menu-note{
		text-align: left;
	}
}
@media (max-width: 560px) {
	.about-intro{
		margin-bottom: 4rem;
	}
	.greeting01::before{
		content: none;
	}
	.greeting01 img.pc{
		display: none;
	}
	.greeting01 img.sp{
		display: block;
		width: 100%;
		max-width: 24rem;
		margin: 0 auto 1rem;
	}
	.greeting01 .syomei{
		font-size: 1.125rem;
	}
}
/* =======================================
    Restaurant Guide 店舗情報
======================================= */
.guide01{
	margin-bottom: 4rem;
}
.guide01 img{
	display: block;
	margin: 0 auto 2rem;
}
.guide01 dl{
	max-width: 48rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: solid 1px #333;
	margin: 0 auto;
	padding: 1rem;
}
.guide01 dl:last-child{
	border-bottom: solid 1px #333;
}
.guide01 dt{
	width: 10rem;
	text-align: center;
}
.guide01 dd{
	flex: 1;
}
.btn-map{
	display: block;
	max-width: 15rem;
	text-align: center;
	text-decoration: none;
	color: #000;
	background-color: #cfcfcf;
	padding: .25rem;
}
.btn-map:hover{
	background-color: #dcdacf;
}
.guide02{
	text-align: center;
	background-color: #dcdacf;
	padding: 5rem 1rem;
}
.guide02 h2{
	font-size: 3rem;
	margin-bottom: 2rem;
}
.guide02 p{
	display: inline-block;
	text-align: left;
	margin-bottom: 4rem;
}
.guide02 img{
	display: block;
	width: 100%;
	max-width: 1196px;
	margin: 0 auto;
}
.guide02 img.sp{
	display: none;
}
@media (max-width: 767px) {
	.guide01 dt{
		width: 6rem;
		text-align: left;
	}
	.guide02{
		padding: 3rem 1rem;
	}
	.guide02 h2{
		font-size: 2rem;
	}
	.guide02 p{
		margin-bottom: 3rem;
	}
	.guide02 img.pc{
		display: none;
	}
	.guide02 img.sp{
		display: block;
	}
}
@media (max-width: 560px) {
	.guide01 img{
		width: 140px;
	}
	.guide01 dl{
		flex-direction: column;
		align-items: flex-start;
	}
	.guide02 h2{
		font-size: 1.5rem;
		margin-bottom: 1rem;
	}
	.guide02 p{
		margin-bottom: 2rem;
	}
}