/*
========================================================
RESET
========================================================
*/

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

html{
	scroll-behavior:smooth;
}

body{
	font-family:'Noto Sans JP',sans-serif;
	font-size:16px;
	line-height:1.8;
	color:#3a312c;
	background:#fffdf8;
}

img{
	display:block;
	width:100%;
	height:auto;
}

a{
	text-decoration:none;
	color:inherit;
	transition:.3s;
}

ul{
	list-style:none;
}

/*
========================================================
COMMON
========================================================
*/

.container{
	width:min(1200px,92%);
	margin:auto;
}

section{
	padding:100px 0;
}

.section-title{
	text-align:center;
	margin-bottom:70px;
}

.section-title span{
	display:block;
	font-family:'Cormorant Garamond',serif;
	font-size:18px;
	letter-spacing:.25em;
	color:#b8860b;
	margin-bottom:10px;
}

.section-title h2{
	font-size:40px;
	color:#3a312c;
	font-weight:700;
}

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:16px 40px;
	background:#8b4513;
	color:#fff;
	border-radius:50px;
	font-weight:700;
}

.btn:hover{
	background:#6f3510;
	transform:translateY(-3px);
}

.btn-outline{
	display:inline-block;
	padding:14px 36px;
	border:2px solid #8b4513;
	border-radius:40px;
	color:#8b4513;
	font-weight:bold;
}

.btn-outline:hover{
	background:#8b4513;
	color:#fff;
}

/*
========================================================
HEADER
========================================================
*/

header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:999;
	transition:.3s;
}

.header-inner{
	height:95px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.logo img{
	height:70px;
	width:auto;
	display:block;
}

.gnav ul{
	display:flex;
	align-items:center;
	gap:40px;
}

.gnav a{
	position:relative;
	color:#fff;
	font-weight:500;
	letter-spacing:.05em;
}

.gnav a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-8px;
	width:0;
	height:2px;
	background:#c89b3c;
	transition:.3s;
}

.gnav a:hover::after{
	width:100%;
}

.header-btn{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:14px 28px;
	background:#c89b3c;
	color:#fff;
	border-radius:50px;
	font-weight:700;
	box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.header-btn:hover{
	background:#d8a944;
	transform:translateY(-2px);
}

/*
========================================================
HERO
========================================================
*/

.hero{
	position:relative;
	height:100vh;
	padding:0;
	display:flex;
	align-items:center;
}

.hero-bg{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
}

.hero-overlay{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.45);
}

.hero-inner{
	position:relative;
	z-index:2;
}

.hero-content{
	max-width:600px;
	color:#fff;
}

.hero-sub{
	display:block;
	font-family:'Cormorant Garamond',serif;
	font-size:20px;
	letter-spacing:.3em;
	margin-bottom:20px;
	color:#f5d78e;
}

.hero h1{
	font-family:'Cormorant Garamond',serif;
	font-size:84px;
	line-height:1;
	margin-bottom:30px;
}

.hero p{
	font-size:20px;
	margin-bottom:40px;
	line-height:2;
}

/*
========================================================
CONCEPT
========================================================
*/

.concept-wrap{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:70px;
	align-items:center;
}

.concept-image img{
	border-radius:20px;
	box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.concept-text h3{
	font-size:36px;
	margin-bottom:25px;
	color:#3a312c;
}

.concept-text p{
	margin-bottom:25px;
	color:#666;
	line-height:2;
}

/*
========================================================
MENU
========================================================
*/

.menu{
	background:#faf7f2;
}

.menu-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:30px;
}

.menu-grid article{
	background:#fff;
	border-radius:18px;
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0,0,0,.08);
	transition:.3s;
}

.menu-grid article:hover{
	transform:translateY(-8px);
}

.menu-grid img{
	aspect-ratio:1;
	object-fit:cover;
}

.menu-grid h3{
	font-family:'Cormorant Garamond',serif;
	font-size:30px;
	padding-top:20px;
	text-align:center;
}

.menu-grid p{
	padding:0 20px 25px;
	text-align:center;
	color:#777;
}

/*
========================================================
GALLERY
========================================================
*/

.gallery-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px;
}

.gallery-grid img{
	aspect-ratio:1;
	object-fit:cover;
	border-radius:16px;
	transition:.4s;
	cursor:pointer;
}

.gallery-grid img:hover{
	transform:scale(1.05);
}

/*
========================================================
NEWS
========================================================
*/

.news{
	background:#fff;
}

.news-list{
	max-width:900px;
	margin:auto;
	border-top:1px solid #e6ddd2;
}

.news-item{
	display:flex;
	align-items:center;
	gap:25px;
	padding:22px 0;
	border-bottom:1px solid #e6ddd2;
}

.news-date{
	width:130px;
	color:#8b4513;
	font-weight:700;
	flex-shrink:0;
}

.news-title{
	flex:1;
	color:#3a312c;
}

.news-item:hover .news-title{
	color:#c89b3c;
}

.news-more{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:10px;
	margin-top:40px;
	color:#8b4513;
	font-weight:700;
}

/*
========================================================
ACCESS
========================================================
*/

.access{
	background:#faf7f2;
}

.access-wrap{
	display:grid;
	grid-template-columns:1.2fr .8fr;
	gap:50px;
	align-items:center;
}

.access-map iframe{
	width:100%;
	height:450px;
	border:none;
	border-radius:20px;
}

.access-info{
	background:#fff;
	padding:40px;
	border-radius:20px;
	box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.access-info dl{
	display:grid;
	grid-template-columns:110px 1fr;
	row-gap:18px;
	column-gap:20px;
}

.access-info dt{
	font-weight:700;
	color:#8b4513;
}

.access-info dd{
	margin:0;
	padding-bottom:15px;
	border-bottom:1px solid #eee;
}

/*
========================================================
RESERVE
========================================================
*/

.reserve{
	position:relative;
	padding:120px 0;
	background:url("../images/reserve.jpg") center center / cover;
}

.reserve::before{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.55);
}

.reserve .container{
	position:relative;
	z-index:2;
}

.reserve-box{
	max-width:760px;
	margin:auto;
	background:rgba(255,255,255,.96);
	padding:70px 60px;
	border-radius:24px;
	text-align:center;
}

.reserve-box span{
	display:block;
	font-family:'Cormorant Garamond',serif;
	font-size:18px;
	letter-spacing:.25em;
	color:#b8860b;
	margin-bottom:15px;
}

.reserve-box h2{
	font-size:42px;
	color:#3a312c;
	margin-bottom:25px;
}

.reserve-box p{
	color:#666;
	line-height:2;
	margin-bottom:40px;
}

.reserve-buttons{
	display:flex;
	justify-content:center;
	gap:20px;
	flex-wrap:wrap;
}

.tel-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:16px 36px;
	border:2px solid #8b4513;
	border-radius:50px;
	color:#8b4513;
	font-weight:700;
	background:#fff;
	transition:.3s;
}

.tel-btn:hover{
	background:#8b4513;
	color:#fff;
}

/*
========================================================
FOOTER
========================================================
*/

footer{
	background:#2c2118;
	color:#ddd;
	padding:70px 0 30px;
}

.footer-logo{
	text-align:center;
	margin-bottom:30px;
}

.footer-logo img{
	height:70px;
	width:auto;
	margin:auto;
}

.footer-nav{
	margin-bottom:30px;
}

.footer-nav ul{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:25px;
}

.footer-nav a:hover{
	color:#c89b3c;
}

.copyright{
	text-align:center;
	font-size:14px;
	color:#aaa;
}

/*
========================================================
RESPONSIVE
========================================================
*/

@media(max-width:900px){

.hero h1{
	font-size:58px;
}

.concept-wrap,
.access-wrap{
	grid-template-columns:1fr;
}

.menu-grid{
	grid-template-columns:repeat(2,1fr);
}

.gallery-grid{
	grid-template-columns:repeat(2,1fr);
}

.gnav{
	display:none;
}

.header-btn{
	display:none;
}

}

@media(max-width:600px){

section{
	padding:70px 0;
}

.hero{
	height:80vh;
}

.hero h1{
	font-size:44px;
}

.hero p{
	font-size:16px;
}

.section-title h2{
	font-size:30px;
}

.concept-text h3{
	font-size:28px;
}

.menu-grid,
.gallery-grid{
	grid-template-columns:1fr;
}

.reserve-box{
	padding:45px 25px;
}

.reserve-box h2{
	font-size:30px;
}

.reserve-buttons{
	flex-direction:column;
}

.btn,
.tel-btn{
	width:100%;
}

.footer-nav ul{
	flex-direction:column;
	gap:15px;
}

}

/*
=====================================================
NEWS
=====================================================
*/

.news{
	background:#fff;
}

.news-list{
	max-width:900px;
	margin:auto;
}

.news-item{
	display:flex;
	align-items:center;
	gap:30px;
	padding:22px 10px;
	border-bottom:1px solid #eee;
	transition:.3s;
}

.news-item:hover{
	padding-left:20px;
	background:#fff7f9;
}

.news-date{
	min-width:110px;
	font-size:14px;
	color:#c08497;
	font-weight:700;
}

.news-title{
	flex:1;
	font-size:16px;
}

.news-more{
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin-top:40px;
	color:#c08497;
	font-weight:700;
	transition:.3s;
}

.news-more:hover{
	gap:18px;
}


/*
=====================================================
ACCESS
=====================================================
*/

.access{
	background:#fff9f7;
}

.access-wrap{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:70px;
	align-items:center;
}

.access-image img{
	border-radius:18px;
	box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.access-info h3{
	font-family:'Cormorant Garamond',serif;
	font-size:40px;
	margin-bottom:30px;
}

.access-info dl{
	display:grid;
	grid-template-columns:120px 1fr;
	row-gap:18px;
	column-gap:20px;
	margin-bottom:40px;
}

.access-info dt{
	font-weight:700;
	color:#c08497;
}

.access-info dd{
	color:#555;
}


/*
=====================================================
RESERVE
=====================================================
*/

.reserve{
	position:relative;
	padding:120px 0;
	background:
	linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
	url("../images/reserve.jpg") center center/cover no-repeat;
}

.reserve-box{
	max-width:700px;
	margin:auto;
	padding:70px 50px;
	background:rgba(255,255,255,.95);
	border-radius:20px;
	text-align:center;
	box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.reserve-box span{
	display:block;
	letter-spacing:4px;
	color:#c08497;
	font-size:13px;
	font-weight:700;
	margin-bottom:15px;
}

.reserve-box h2{
	font-family:'Cormorant Garamond',serif;
	font-size:48px;
	margin-bottom:20px;
	color:#3f3232;
}

.reserve-box p{
	margin-bottom:35px;
	color:#666;
}

.reserve-buttons{
	display:flex;
	justify-content:center;
	gap:20px;
	flex-wrap:wrap;
}

.tel-btn{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:16px 34px;
	background:#4a3b3b;
	color:#fff;
	border-radius:999px;
	font-weight:700;
	transition:.3s;
}

.tel-btn:hover{
	background:#2f2525;
}


/*
=====================================================
FOOTER
=====================================================
*/

footer{
	background:#3f3232;
	color:#fff;
	padding:70px 0 30px;
}

.footer-logo{
	text-align:center;
	margin-bottom:30px;
}

.footer-logo img{
	height:60px;
	margin:auto;
}

.footer-nav ul{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:30px;
	margin-bottom:35px;
}

.footer-nav a{
	color:#fff;
	transition:.3s;
}

.footer-nav a:hover{
	color:#f4c9d4;
}

.footer-sns{
	display:flex;
	justify-content:center;
	gap:18px;
	margin-bottom:30px;
}

.footer-sns a{
	width:46px;
	height:46px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid rgba(255,255,255,.3);
	border-radius:50%;
	font-size:18px;
	transition:.3s;
}

.footer-sns a:hover{
	background:#c08497;
	border-color:#c08497;
}

footer span{
	display:block;
	text-align:center;
	margin-bottom:20px;
	color:#ddd;
}

.copyright{
	text-align:center;
	font-size:13px;
	color:#aaa;
}


/*
=====================================================
RESPONSIVE
=====================================================
*/

@media (max-width:992px){

.hero h1{
	font-size:58px;
}

.concept-wrap,
.access-wrap{
	grid-template-columns:1fr;
	gap:50px;
}

.menu-grid{
	grid-template-columns:repeat(2,1fr);
}

.staff-grid{
	grid-template-columns:repeat(2,1fr);
}

.gallery-grid{
	grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:768px){

section{
	padding:70px 0;
}

.header-inner{
	flex-direction:column;
	gap:20px;
}

nav ul{
	flex-wrap:wrap;
	justify-content:center;
	gap:16px;
}

.hero{
	min-height:600px;
}

.hero h1{
	font-size:42px;
}

.hero p{
	font-size:16px;
}

.section-title h2{
	font-size:34px;
}

.concept-text h3{
	font-size:34px;
}

.menu-grid,
.staff-grid,
.gallery-grid{
	grid-template-columns:1fr;
}

.staff img{
	width:180px;
	height:180px;
}

.news-item{
	flex-direction:column;
	align-items:flex-start;
	gap:8px;
}

.access-info dl{
	grid-template-columns:1fr;
	row-gap:10px;
}

.reserve-box{
	padding:45px 25px;
}

.reserve-box h2{
	font-size:36px;
}

.reserve-buttons{
	flex-direction:column;
}

.btn,
.btn-outline,
.tel-btn{
	width:100%;
	justify-content:center;
	text-align:center;
}

.footer-nav ul{
	flex-direction:column;
	gap:15px;
}

}