:root{
  --bg: #f7f3ea;        /* 生成り */
  --ink: #3a2e2a;       /* 濃茶 */
  --accent: #5b7054;    /* 深緑 */
  --line: #d8cfc0;      /* 和紙の繊維色 */
  --wood: #b08b67;      /* 木の温もり */
  --ghost: #8c7b6a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,0.7), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(0deg, rgba(216,207,192,0.25) 0 2px, rgba(216,207,192,0.12) 2px 4px),
    linear-gradient(0deg, var(--bg), var(--bg));
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  line-height:1.8;
}

/* コンテナ */
.container{max-width:1080px;margin:0 auto;padding:0 20px}

/* ヘッダー */
.site-header{
  backdrop-filter: blur(6px);
  position: sticky; top:0; z-index:10;
  background: rgba(247,243,234,0.85);
  border-bottom: 1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.logo{width:32px;height:32px}
.brand-text{font-family: 'Noto Serif JP', serif; font-weight:600; letter-spacing:0.08em; font-size:1.4em}

.nav a{
  color:var(--ink); text-decoration:none; margin-left:20px; padding:8px 10px; border-radius:6px;
  transition: color .2s, background .2s;
  font-weight:500;
}
.nav a:hover{background:rgba(176,139,103,0.12)}
.nav .btn{border:1px solid var(--line)}
.nav .btn:hover{background:rgba(91,112,84,0.15)}
.nav a.active{background:var(--accent); color:#fff; border-radius:6px}

/* ハンバーガーメニュー */
.menu-toggle{display:none; cursor:pointer; font-size:1.4rem; color:var(--ink)}

/* ヒーロー */
.hero {
  position: relative;
  background-image: url('assets/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 52vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-media {display: none;}
.hero-content {
  background: rgba(247, 243, 234, 0.85);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  max-width: 720px;
}

h1{font-family:'Noto Serif JP', serif; font-size:1.9rem; margin:0 0 10px; text-align:center}
.hero-actions{display:flex;gap:12px;margin-top:10px}

/* セクション共通 */
.section{padding:60px 0}
.section-alt{background:rgba(255,255,255,0.6); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-header h2{
  font-family:'Noto Serif JP', serif; font-size:1.6rem; margin:0 0 6px
}
.section-header p{margin:0;color:#564a44}

/* カード */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.card{
  background: rgba(255,255,255,0.78);
  border:1px solid var(--line); border-radius:12px; padding:18px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.04);
  transition: transform .2s;
}
.card:hover{transform:translateY(-2px)}

.card h3{font-family:'Noto Serif JP', serif; margin:0 0 6px}

.image-gallery {
  display: flex;              /* 横並び */
  gap: 12px;                  /* 画像の間隔 */
  margin-top: 20px;
  justify-content: center;    /* 中央寄せ */
}

/* 画像ギャラリー */
.image-gallery img {
  width: 30%;                 /* 横幅を揃える（3枚なら30%程度） */
  height: auto;               /* 縦横比を維持 */
  border-radius: 8px;         /* 角丸 */
  object-fit: cover;          /* はみ出しをカットして整える */
}
/* グリッド */
.grid.two{display:grid;grid-template-columns:1.2fr 0.8fr;gap:24px;align-items:start}
.image-frame{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,0.7)
}
.image-frame img{width:100%;display:block;filter:saturate(90%)}

/* サービス */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:20px}
.service{
  background: rgba(255,255,255,0.78);
  border:1px solid var(--line); border-radius:12px; padding:18px;
}

/* 予約CTA */
.reserve-cta{
  background: linear-gradient(90deg, rgba(91,112,84,0.10), rgba(176,139,103,0.10));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; margin-top:20px
}
.reserve-inner{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:16px}
.reserve-icon img{width:64px;height:64px;opacity:0.85}
.reserve-content h2{font-family:'Noto Serif JP', serif; margin:0}
.reserve-actions .btn{padding:12px 18px}

/* ボタン */
.btn{
  display:inline-block; padding:10px 14px; border-radius:8px; text-decoration:none;
  color:var(--ink); background:rgba(255,255,255,0.6); border:1px solid var(--line);
  transition: transform .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent}
.btn.ghost{background:transparent}

/* リスト・細部 */
.hours{list-style:none;padding:0;margin:8px 0}
.hours li{margin:6px 0}

/* フォーム */
.form{max-width:720px;margin-top:10px}
.form-row{display:flex;flex-direction:column;margin-bottom:12px}
label{font-weight:600}
input,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  background:rgba(255,255,255,0.85); font:inherit; color:inherit
}
input::placeholder,textarea::placeholder{color:#8a7f78}
input:focus,textarea:focus{border-color:var(--accent); outline:none}
.form-actions{margin-top:10px}

/* フッター */
.site-footer{margin-top:40px; border-top:1px solid var(--line); background:rgba(255,255,255,0.6)}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 0}
.brand-foot{font-family:'Noto Serif JP', serif; font-weight:600; margin:0 0 6px}
.sns a{margin-left:12px; color:var(--ghost); text-decoration:none}
.copy{padding-bottom:20px}

/* レスポンシブ */
@media (max-width:960px){
  .features{grid-template-columns:1fr 1fr}
  .grid.two{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .hero-media img{height:40vh}
}
@media (max-width:560px){
  .nav{
    display:none; flex-direction:column; gap:4px;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(247,243,234,0.97); border-bottom:1px solid var(--line);
    padding:12px 20px;
  }
  .nav.open{display:flex}
  .nav a{margin-left:0}
  .menu-toggle{display:block}
  .hero{min-height:60vh}
  .hero-content{margin-top:-40px; padding:18px}
  h1{font-size:1.3rem}
  .features, .services{gap:12px}
  .card, .service{padding:14px}
  .btn{padding:14px 18px; font-size:1rem}
  input,textarea{padding:14px 16px}
  .footer-inner{flex-direction:column; gap:12px}
  .image-gallery {
    flex-direction: column;   /* 縦並び */
    align-items: center;
  }
  .image-gallery img {
    width: 90%;               /* スマホでは大きめに */
  }
}