@charset "utf-8";

/*共通の値*/
:root{
  --bg:#FAF7F2;
  --ink:#2E2A28;
  --brown:#6B4E3D;
  --accent:#C46A2B;
  --line:#E6DED4;
  --max:1100px;
  --brand:var(--brown);
  --ink-soft:#5a4c44;
  --brand-line:#6a4c3a;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:16px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans JP","Catamaran",system-ui,-apple-system,Segoe UI,Roboto,Meiryo,sans-serif;
  letter-spacing:.02em;
  font-weight:400;
  font-size:18px; 
  line-height: 1.9; 
}

img{ max-width:100%; height:auto; display:block; }
p,.lead{ color:var(--ink-soft); }

/*Global Navigation */
header {
  display: flex;
  align-items: center;
  justify-content: center; /* ←中央寄せに変更 */
  position: relative;
  padding: 16px clamp(16px, 4vw, 24px);
  max-width: var(--max);
  margin: auto;
  z-index: 10;
}

.siteLogo img{ display:block; height:auto; }

/* チェックボックス常時非表示 */
.menu-btn{ display:none; }

/* 三本線 */
.menu-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:55px;
  height:55px;
  border-radius:10px;
  border:1px solid var(--line);
  cursor:pointer;
  z-index:100;
}

.menu-icon .navicon,
.menu-icon .navicon::before,
.menu-icon .navicon::after{
  width:22px;
  height:2px;
  background:var(--brown);
  display:block;
  border-radius:2px;
  position:relative;
  transition:.25s;
}
.menu-icon .navicon::before,
.menu-icon .navicon::after{
  content:"";
  position:absolute;
  left:0;
}
.menu-icon .navicon::before{ top:-7px; }
.menu-icon .navicon::after{ top:7px; }

/* 開閉時の✕ */
.menu-btn:checked ~ .menu-icon .navicon{ background:transparent; }
.menu-btn:checked ~ .menu-icon .navicon::before{ transform:rotate(45deg); top:0; }
.menu-btn:checked ~ .menu-icon .navicon::after{ transform:rotate(-45deg); top:0; }

/* Dropdown */
.gMenu{ position:absolute; 
  right: 16px;
  top: 16px;
  margin-left:0; 
  z-index: 100;}

/* Dropdown */
.menu{
  position:absolute;
  right:0;
  top:56px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  list-style:none;
  margin:0;
  padding:8px;
  min-width:200px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transform:translateY(-10px);
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
  z-index:1000;
  display:block;
}
.menu li{ list-style:none; }
.menu li a{
  display:block;
  padding:12px 14px;
  text-decoration:none;
  border-radius:8px;
  color:var(--ink);
  font-weight:700;
}
.menu li a:hover{ background:#F4ECE4; }
.menu li a[aria-current="page"]{ background:var(--brand); color:#fff; }

/* 開いたとき有効 */
.menu-btn:checked ~ .menu{
  transform:none;
  opacity:1;
  pointer-events:auto;
}

/* Hero Visual */
.hero{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.18);
  pointer-events:none;
}
.hero .hero-inner{
  position:relative;
  z-index:1;
  padding:0 20px;
}
.hero .hero-inner h1{
  font-family:"Catamaran","Noto Sans JP",sans-serif;
  font-size:clamp(32px,5vw,60px);
  font-weight:900;
  letter-spacing:.06em;
  margin:0 0 10px;
  text-shadow:0 1px 0 rgba(0,0,0,.08);
}
.hero .hero-inner p{
  font-size:clamp(14px,1.6vw,20px);
  line-height:1.8;
  margin:0 auto;
  max-width:70ch;
}

/* Hero画像 */
.hero-top{
  height:80vh;
  background:url("../images/top_hero.jpg") center/cover no-repeat;
}
.hero-menu   { background-image:url("../images/menu_hero.jpg"); }
.hero-about  { background-image:url("../images/about_hero.jpg"); }
.hero-access { background-image:url("../images/access_hero.jpg"); }

/* 内ページ共通 */
.hero-menu,
.hero-about,
.hero-access{
  height:48vh;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 68%;
}

/* Layout Section titles */
.container{
  max-width:var(--max);
  margin:auto;
  padding:0 clamp(16px,4vw,24px) 48px;
}
.sectionHead{
  margin:24px 0;
  padding-bottom:8px;
  border-bottom:2px solid var(--brand-line);
}
.sectionHead h1,
.sectionHead h2{
  margin:0;
  font-family:"Catamaran","Noto Sans JP",sans-serif;
  font-size:clamp(28px,3.2vw,40px);
  font-weight:800;
  color:var(--brand);
  letter-spacing:.06em;
}
.sectionHead h2{ text-align:center; }

/* Top link cards */
.linkList{
  list-style:none;
  margin:0 auto;
  padding:0 clamp(16px,4vw,24px);
  max-width:var(--max);
  display:grid;
  gap:16px;
}
.linkList li a{
  position:relative;
  display:block;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
}
.linkList img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  aspect-ratio:3/2;
  filter:brightness(.9) saturate(1.05);
  transition:transform .5s ease, filter .3s ease;
}
.linkList span{
  position:absolute;
  inset:auto 14px 14px 14px;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-weight:700;
  padding:10px 14px;
  border-radius:10px;
  letter-spacing:.12em;
}
.linkList li a:hover img{
  transform:scale(1.04);
  filter:brightness(1);
}

/* Menu cards */
.cards{ display:grid; gap:16px; }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}
.card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.card.card--land img{ aspect-ratio:4/3; }
.card .body{
  padding:14px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.card .title{ font-weight:700; margin:0 0 6px; }
.price{ font-weight:700; color:var(--accent); }

/*Concept */
.concept{
  background:#f7f4ef;
  text-align:center;
  padding:60px 20px;
}
.concept h2{
  font-size:clamp(24px,2.6vw,32px);
  color:var(--brown);
  margin-bottom:20px;
  font-weight:900;
  letter-spacing:.05em;
}
.concept p{
  max-width:700px;
  margin:0 auto;
  line-height:1.8;
  color:#554d46;
}

/* Message */
.message{
  text-align:center;
  padding:80px 20px;
  background:#fff;
}
.message h2{
  font-size:26px;
  margin-bottom:16px;
  color:var(--brown);
}
.message p{ line-height:1.8; color:#6b635d; }

/* ボタン */
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 2px 0 rgba(0,0,0,.05);
  transition:filter .2s ease;
}
.btn:hover{ filter:brightness(1.06); }
.btn.btn-outline{
  background:#fff;
  color:var(--accent);
  border:1px solid var(--accent);
}
.btn.btn-outline:hover{ background:#FFF6EF; }

/*Top Page */

.topPage .linkList li a{ padding-bottom:2px; }
.topPage .menu li a{ padding:14px 16px; }

/*Navigation states */
.menu li a{ font-weight:700; color:var(--ink); }
.menu li a[aria-current="page"]{ background:var(--brand); color:#fff; }
.menu li a:hover{ background:#F4ECE4; }

/* ===== 920px以上（PC用） ===== */
@media (min-width:920px){
  .hero-menu,
  .hero-about,
  .hero-access{
    height:60vh;
    background-position:center 80%;
  }
  .cards{ grid-template-columns:repeat(3,1fr); }
  .linkList{ grid-template-columns:repeat(3,1fr); }
}

/* セクション間余白 */
.container{
  margin-top:80px;
}
.container:first-of-type{ margin-top:0; }

address{
  font-style:normal;
  color:#6b635d;
  line-height:1.6;
  margin-bottom:16px;
  display:block;
}

/* Story本文の読みやすくする */
.lead{
  max-width:70ch;
  margin:0 auto 20px;
}
.eat-in-grid p{
  max-width:70ch;
  margin:0 auto 20px;
}
.container .lead{
  text-align:center;
  max-width:70ch;
  margin:0 auto 32px;
}
.story-figure{
  margin:32px auto 64px;
  max-width:min(900px,85%);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.story-figure img{
  width:100%;
  height:auto;
  display:block;
}

/* Eat Inの写真も中央寄せ */
.about-photo{
  margin:32px auto 64px;
  max-width:min(900px,85%);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.about-photo img{
  width:100%;
  height:auto;
  display:block;
}

/* 店舗情報：写真を左、テキストを右 */
.store-wrap{
  display:flex;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}
.store-photo img{
  border-radius:12px;
  width:400px;
  height:auto;
}
.container p.note{
  text-align:center;
  margin:16px 0 0;
}

/* map */
iframe{
  border:0;
  border-radius:12px;
  display:block;
}

/* 予約入力欄 */
.reserve-form input[type="text"],
.reserve-form input[type="tel"],
.reserve-form input[type="email"],
.reserve-form select,
.reserve-form textarea{
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;          /* ←グレー枠線 */
  border-radius: 6px;
  font-size: 16px;
  margin-top: 6px;
  background: #fffdfa;             /* 背景*/
  color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);  /* ←内側に軽い影 */
}

.reserve-form p {
  margin-bottom: 16px;
}

.reserve-form label {
  margin-right: 12px;
}

.reserve-banner {
  background: var(--accent); 
  text-align: center;
  padding: 14px 10px;
}

.btn-reserve {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .05em;
  font-size: 1rem;
}
.btn-reserve:hover {
  text-decoration: underline;
}
.footer {
  background: var(--brown);
  color: #fff;
  border-top: none;
  padding: 32px 20px;
  text-align: center;
  font-size: 14px;
}
.footer address {
  color: #f7f4ef;
}
/* === Typo Normalize (site-wide final) === */

/* 見出し：ページ差が出ないように字間を共通化 */
.sectionHead h1,
.sectionHead h2{
  letter-spacing: .06em;
}

/* リード文：全ページで“ほんの少し大きめ＆読みやすく”に統一 */
.lead{
  font-size: 1.05em;
  line-height: 1.9;
  color: var(--ink-soft);
}

/* カード内テキスト：サイズの体感差をなくす */
.card .title{
  font-size: 1.0625rem; /* ≒18px（ベース17pxの約106%） */
  line-height: 1.4;
  font-weight: 700;
}
.card .body p{
  font-size: 1rem;      /* ベースと同じ */
  line-height: 1.8;
}

/* 予約バナー：全ページで同じ強さに */
.btn-reserve{
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ナビ文字の整え（フォントは継承、太さ明示） */
.gMenu a{
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
}

/* 親要素での“勝手な縮小”を防ぐ保険 */
.container, .concept, .message, .cards, .reserve-form{
  font-size: 1rem;
}
/* 見出しをより太く表示（日本語が細く見える対策） */
.sectionHead h2,
.concept h2,
.message h2 {
  font-family: "Catamaran", "Noto Sans JP", sans-serif;
  font-weight: 900;
}
/* 高齢者にも見やすい文字サイズに調整 */
body {
  font-size: 18px;        /* 基本文字サイズを1pxアップ */
  line-height: 1.9;       /* 行間も少し広げてゆったり */
}

.lead,
.container p,
.message p,
.concept p {
  font-size: 1.12em;      /* 約20px相当で読みやすく */
  line-height: 1.95;
}
/* MENUカード内の説明文を他ページと揃える（少し大きく） */
.card .body p {
  font-size: 1.08em;    /* 約18〜19px相当にアップ */
  line-height: 1.9;     /* 行間もゆったり */
  color: var(--ink-soft);
}
/* 数量入力ボックスのデザイン */
.reserve-form input[type="number"] {
  width: 80px;
  padding: 6px 8px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: #fff7ef;  /* やさしい薄いベージュ */
  font-size: 1rem;
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(196, 106, 43, 0.15); /* accent色の薄い枠 */
}

/* フォーカス時（クリック時）さらにわかりやすく */
.reserve-form input[type="number"]:focus {
  outline: none;
  background: #ffe7d3; /* さらに明るいベージュ */
  box-shadow: 0 0 0 4px rgba(196, 106, 43, 0.28);
}