/* ==========================
   RESET
========================== */
*{
    margin:0;
    padding:0;
   box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family:serif;
    color:#4b4037;
    background:#faf7f2;
    line-height:1.8;
}
img{
    width:100%;
    display:block;
}
a{
    text-decoration:none;
    color:inherit;
}
ul{
    list-style:none;
}
h2{
    position:relative;
    text-align:center;
    font-family:"Noto Serif JP",serif;
    font-size:20px;
    font-weight:500;
    letter-spacing:.05em;
    color:#5d4b3b;
    margin-bottom:60px;
}



.section-title {
  display: flex;
  align-items: center;
  gap: 20px;
  font-style: italic;
  color:#c2a686;
  letter-spacing: 1px;
}

.section-title::before,
.section-title::after {
  content: "";
  height: 1px;
  background: #dbbf9e;
  flex: 1;
}

.section-title span {
  font-size: 24px;
  letter-spacing: 0.1em;
}

section{
    padding:50px 10px 0;
    max-width: 800px;
    margin: 0 auto;
}

/* ==========================
   COMMON
========================== */
.container{
    width:min(1200px,100%);
    margin:auto;
}

/* ==========================
   HEADER
========================== */
header{
/* position:fixed; */
top:0;
left:0;
width:100%;
z-index:999;
backdrop-filter:blur(12px);
background:rgba(255,255,255,.55);
border-bottom:1px solid rgba(255,255,255,.4);
}
.nav{
    /* display:flex;
    justify-content:space-between;
    align-items:center; */
    height:80px;
}
.logo{
    font-family:"Playfair Display",serif;
    font-size:34px;
    letter-spacing:.08em;
}
nav ul{
    display:flex;
    flex-wrap:wrap;
    /* gap:40px; */
}
nav ul li{
    width:50%;
    text-align:center;
    border: 1px solid #ddd;
}
nav a{
    transition:.3s;
}
nav a:hover{
    color:#b69463;
}
.reserve-btn{
    background:#b69463;
    color:white;
    padding:14px 26px;
    border-radius:999px;
    transition:.3s;
}
.reserve-btn:hover{
    background:#a88554;
    transform:translateY(-2px);
}
/* ==========================
   HERO
========================== */
.hero{
/* position:relative; */
/* height:100vh; */
/* background:url("../img/hero.jpg") center center/cover; */
/* display:flex; */
justify-content:center;
align-items:center;
text-align:center;
}
.overlay{
/* position:absolute; */
/* inset:0; */
/* background:linear-gradient(
        rgba(250,247,242,.25),
        rgba(250,247,242,.55)

    ); */
}
.hero-inner{
    position:relative;
    z-index:5;
    max-width:850px;
    padding:40px 20px;  
}
.sub-title{
    font-family:"Playfair Display",serif;
    letter-spacing:.15em;
    margin-bottom:15px;
    font-size:18px;
}
.hero h1{
    font-family:"Playfair Display",serif;
    font-size:82px;
    font-weight:500;
    margin-bottom:20px;
    color:#5d4b3b;
}
.hero h2{
    font-family:"Noto Serif JP",serif;
    font-size:42px;
    font-weight:500;
    line-height:1.7;
    margin-bottom:28px;
}
.lead{
    font-size:20px;
    margin-bottom:55px;
    color:#6d6258;
}

/* ==========================
   BUTTON
========================== */
.button-area{
    display:flex;
    flex-direction:column;
    gap:18px;
    max-width:520px;
    margin:auto;
}
.button-area img{
    height:25px;
    width:auto;
    margin-right:10px;
}
.hero-btn{
    display: flex;
    align-items: center;
    background: white;
    padding: 22px 30px;
    border-radius: 11px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
    border: 1px solid #d3d3d3;
    transition: .35s;
    font-size: 18px;
    justify-content: center;
}
.hero-btn span{
    font-size:24px;
}
.hero-btn:hover{
    transform:translateY(-4px);
    background:#f8f2ea;
}
.reserve-btn{
    background:#c8ab7a;
    color:white;
}
/* ==========================
   FOOTER
========================== */
footer{
    background:#5d4b3b;
    color:white;
    padding:90px 20px;
    font-size:14px;
    margin-top:45px;
}
.footer-inner{
    width:min(900px,90%);
    margin:auto;
    text-align:center;
}
.footer-inner h3{
    font-family:"Playfair Display",serif;
    font-size:42px;
    margin-bottom:35px;
}
.footer-inner p{
    margin-bottom:22px;
    color:rgba(255,255,255,.9);
}
.footer-inner a{
    color:white;
}
.copyright{
    margin-top:45px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.2);
    color:rgba(255,255,255,.65);
    font-size:12px;
}
/* ==========================
   RESPONSIVE
========================== */
@media(max-width:900px){
.hero h1{
    font-size:58px;
}
.hero h2{
    font-size:30px;
}
.hero-btn{
    padding:18px 24px;
}
}
@media(max-width:600px){
header{
    /* padding:0 10px; */
}
.nav{
    height:70px;
}
.logo{
    font-size:28px;
}
.reserve-btn{
    /* display:none; */
}
.hero{
/* padding:0 20px; */
}
.hero h1{
    font-size:48px;
}
.hero h2{
    font-size:24px;
}
.sub-title{
    font-size:15px;
}
.lead{
    font-size:16px;
}
.button-area{
    width:100%;
}
.hero-btn{
    font-size:16px;
}
.footer-inner h3{
    font-size:34px;
}
}