/* ============================================================
   たひら common.css
   全ページ共通スタイル
   ============================================================ */

/* カラー変数 */
:root{
  --cream:#FAF7F2;--warm:#F5F0E8;--sand:#E8DDD0;--tan:#C9B49A;
  --brown:#8B6E52;--dark:#4A3728;--espresso:#2C1F15;
  --gold:#C4A96B;--gold-l:#D4BC8A;
  --text:#2C1F15;--text-m:#6B5344;--text-l:#9C8070;
  --err:#C0392B;--ok:#2E7D52;
}

/* リセット */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Noto Serif JP',serif;background:var(--cream);color:var(--text);overflow-x:hidden;}

/* ============================================================
   ナビゲーション
   ============================================================ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:14px 52px;display:flex;align-items:center;
  justify-content:space-between;background:rgba(44,31,21,0.96);
  backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(196,169,107,0.3);
  transition:all 0.4s;
}
/* index.htmlのスクロール前状態 */
nav.transparent{
  background:transparent;box-shadow:none;padding:22px 52px;backdrop-filter:none;
}
nav.scrolled{
  background:rgba(44,31,21,0.96);backdrop-filter:blur(8px);
  padding:14px 52px;box-shadow:0 1px 0 rgba(196,169,107,0.3);
}
.nav-logo{
  font-family:'Shippori Mincho',serif;font-size:18px;font-weight:600;
  letter-spacing:0.14em;color:var(--cream);text-decoration:none;
}
nav.transparent .nav-logo{font-size:19px;}
.nav-logo small{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:11px;font-weight:300;letter-spacing:0.24em;
  color:var(--gold);display:block;margin-top:2px;
}
.nav-links{display:flex;gap:28px;list-style:none;}
nav.transparent .nav-links{gap:30px;}
.nav-links a{
  font-size:11px;letter-spacing:0.16em;
  color:rgba(255,255,255,0.72);text-decoration:none;transition:color 0.3s;
}
.nav-links a:hover,.nav-links a.active{color:var(--gold);}
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-cta{
  font-size:11px;letter-spacing:0.22em;color:var(--espresso);
  background:var(--gold);padding:10px 24px;text-decoration:none;transition:all 0.3s;
}
nav.transparent .nav-cta{padding:10px 26px;}
.nav-cta:hover{background:var(--gold-l);}
.nav-cta-ghost{
  font-size:11px;letter-spacing:0.22em;color:var(--cream);
  background:transparent;border:1px solid rgba(196,169,107,0.6);
  padding:10px 24px;text-decoration:none;transition:all 0.3s;
}
.nav-cta-ghost:hover{border-color:var(--gold);color:var(--gold);}

/* ============================================================
   ページヘッダー（espressoベース・テキストのみ）
   blog, news, members, menu, reserve-*, takeout で使用
   ============================================================ */
.page-header{
  background:var(--espresso);padding:72px 80px 32px;
  position:relative;overflow:hidden;margin-top:56px;
}
.page-header.tall{padding:72px 80px 32px;}
.page-header::before{
  position:absolute;right:4%;top:50%;transform:translateY(-50%);
  font-family:'Shippori Mincho',serif;font-size:160px;font-weight:700;
  color:rgba(255,255,255,0.04);pointer-events:none;line-height:1;
}
/* 各ページで content を上書き */
.page-header.blog::before{content:'読';}
.page-header.news::before{content:'知';}
.page-header.members::before{content:'会';}
.page-header.menu::before{content:'品';}
.page-header.reserve::before{content:'予約';font-size:140px;}
.page-header.takeout::before{content:'持';}

/* パンくず */
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.breadcrumb a,.breadcrumb span{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:12px;letter-spacing:0.2em;color:rgba(250,247,242,0.45);text-decoration:none;
}
.breadcrumb .sep{color:rgba(196,169,107,0.4);}
.breadcrumb .current{color:var(--gold);}

/* ページヘッダー内テキスト */
.ph-sub{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:12px;letter-spacing:0.4em;color:var(--gold);
  margin-bottom:12px;display:flex;align-items:center;gap:12px;
}
.ph-sub::before{content:'';width:24px;height:1px;background:var(--gold);}
.ph-ttl{
  font-family:'Shippori Mincho',serif;font-size:clamp(28px,4vw,48px);
  font-weight:600;letter-spacing:0.14em;color:var(--cream);
}
.ph-desc{
  font-size:13px;line-height:2.2;letter-spacing:0.07em;
  color:rgba(250,247,242,0.5);margin-top:16px;max-width:720px;
}

/* ページヒーロー（画像背景付き・store, about, blog-post で使用） */
.page-hero{
  height:52vh;min-height:380px;position:relative;
  display:flex;align-items:flex-end;padding-bottom:56px;overflow:hidden;margin-top:56px;
}
.page-hero-bg{
  position:absolute;inset:0;
  background:center center/cover no-repeat;
  transform:scale(1.04);animation:bgZoom 8s ease forwards;
}
.page-hero-ov{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(44,31,21,0.85) 0%,rgba(44,31,21,0.3) 60%,rgba(44,31,21,0.2) 100%);
}
.page-hero-body{position:relative;z-index:2;padding:0 80px;}

/* ============================================================
   共通ボタン
   ============================================================ */
.btn-gold{
  font-size:12px;letter-spacing:0.26em;color:var(--espresso);
  background:var(--gold);padding:16px 48px;text-decoration:none;
  transition:all 0.3s;display:inline-block;
}
.btn-gold:hover{background:var(--gold-l);}
.btn-gold-sm{
  font-size:11px;letter-spacing:0.22em;color:var(--espresso);
  background:var(--gold);padding:11px 24px;text-decoration:none;
  transition:all 0.3s;display:inline-block;width:100%;text-align:center;
}
.btn-gold-sm:hover{background:var(--gold-l);}
.btn-outline{
  font-size:12px;letter-spacing:0.26em;color:rgba(250,247,242,0.8);
  background:transparent;border:1px solid rgba(255,255,255,0.25);
  padding:16px 48px;text-decoration:none;transition:all 0.3s;display:inline-block;
}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}
.btn-outline-sm{
  font-size:11px;letter-spacing:0.22em;color:var(--cream);
  background:transparent;border:1px solid rgba(196,169,107,0.5);
  padding:11px 24px;text-decoration:none;transition:all 0.3s;display:inline-block;
  width:100%;text-align:center;
}
.btn-outline-sm:hover{border-color:var(--gold);color:var(--gold);}
.btn-outline-w{
  font-size:12px;letter-spacing:0.24em;color:rgba(250,247,242,0.7);
  background:transparent;border:1px solid rgba(255,255,255,0.2);
  padding:15px 36px;text-decoration:none;transition:all 0.3s;
  text-align:center;white-space:nowrap;
}
.btn-outline-w:hover{border-color:var(--gold);color:var(--gold);}
.btn-line{
  font-size:12px;letter-spacing:0.26em;color:var(--espresso);text-decoration:none;
  display:inline-flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--tan);padding-bottom:4px;transition:all 0.3s;
}
.btn-line::after{content:'→';transition:transform 0.3s;}
.btn-line:hover{color:var(--gold);border-color:var(--gold);}
.btn-line:hover::after{transform:translateX(6px);}

/* ============================================================
   共通セクションラベル
   ============================================================ */
.sec-lbl{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:12px;letter-spacing:0.42em;color:var(--gold);
  margin-bottom:18px;display:flex;align-items:center;gap:14px;
}
.sec-lbl::before{content:'';width:28px;height:1px;background:var(--gold);}
.section-label{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:12px;letter-spacing:0.4em;color:var(--gold);
  margin-bottom:14px;display:flex;align-items:center;gap:14px;
}
.section-label::before{content:'';width:28px;height:1px;background:var(--gold);}
.section-ttl{
  font-family:'Shippori Mincho',serif;font-size:clamp(22px,3vw,34px);
  font-weight:600;letter-spacing:0.1em;color:var(--espresso);margin-bottom:52px;
}
.sec-ttl{
  font-family:'Shippori Mincho',serif;font-size:clamp(26px,3vw,40px);
  font-weight:600;letter-spacing:0.1em;line-height:1.5;
  color:var(--espresso);margin-bottom:22px;
}
.sec-body{font-size:13.5px;line-height:2.6;letter-spacing:0.07em;color:var(--text-m);margin-bottom:34px;}

/* ============================================================
   サイドバーCTA（blog, blog-post, news-post 共通）
   ============================================================ */
.sidebar-cta{background:var(--espresso);padding:28px 24px;text-align:center;margin-bottom:40px;}
.sidebar-cta-ttl{
  font-family:'Shippori Mincho',serif;font-size:16px;font-weight:600;
  letter-spacing:0.12em;color:var(--cream);margin-bottom:10px;
}
.sidebar-cta-desc{
  font-size:12px;line-height:2;letter-spacing:0.06em;
  color:rgba(250,247,242,0.5);margin-bottom:20px;
}
.sidebar-cta-btns{display:flex;flex-direction:column;gap:8px;align-items:center;}
.sidebar-ttl{
  font-family:'Shippori Mincho',serif;font-size:15px;font-weight:600;
  letter-spacing:0.12em;color:var(--espresso);margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--sand);
}
.sidebar-block{margin-bottom:40px;}

/* ============================================================
   フォーム共通（reserve, takeout, members）
   ============================================================ */
.form-label{font-size:12px;letter-spacing:0.14em;color:var(--text-m);}
.form-label .required,.form-label span{font-size:10px;letter-spacing:0.1em;color:var(--err);margin-left:6px;}
.form-input,.form-select,.form-textarea{
  font-family:'Noto Serif JP',serif;font-size:13px;letter-spacing:0.06em;
  color:var(--text);background:var(--cream);
  border:1px solid var(--sand);padding:13px 16px;
  transition:border-color 0.3s;outline:none;
  -webkit-appearance:none;appearance:none;width:100%;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--gold);}
.form-input.invalid{border-color:var(--err);}
.err-msg{font-size:11px;color:var(--err);letter-spacing:0.08em;margin-top:5px;display:none;}
.form-input.invalid + .err-msg{display:block;}
.form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239C8070' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;
}
.form-textarea{resize:vertical;min-height:120px;}
.form-row{margin-bottom:18px;}

/* ============================================================
   フッター（シンプル版：about, blog, news, menu等）
   ============================================================ */
footer{background:var(--espresso);padding:48px 80px 32px;}
.foot-in{
  max-width:1100px;margin:0 auto;display:flex;
  justify-content:space-between;align-items:center;
  padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:20px;
}
.foot-logo{
  font-family:'Shippori Mincho',serif;font-size:17px;font-weight:600;
  letter-spacing:0.14em;color:var(--cream);text-decoration:none;
}
.foot-logo small{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:11px;color:var(--gold);display:block;margin-top:2px;letter-spacing:0.22em;
}
.foot-links{display:flex;gap:24px;list-style:none;}
.foot-links a{
  font-size:11px;letter-spacing:0.1em;
  color:rgba(250,247,242,0.3);text-decoration:none;transition:color 0.3s;
}
.foot-links a:hover{color:var(--gold-l);}
.foot-copy{
  max-width:1100px;margin:0 auto;
  font-family:'Cormorant Garamond',serif;font-size:11px;
  letter-spacing:0.18em;color:rgba(250,247,242,0.18);
}

/* ============================================================
   アニメーション・ユーティリティ
   ============================================================ */
@keyframes bgZoom{from{transform:scale(1.04);}to{transform:scale(1.0);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}}

.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.8s ease,transform 0.8s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.rd1{transition-delay:0.12s;}.rd2{transition-delay:0.24s;}.rd3{transition-delay:0.36s;}

/* ============================================================
   レスポンシブ（共通部分）
   ============================================================ */
@media(max-width:900px){
  nav{padding:12px 20px;}
  nav.transparent{padding:12px 20px;background:rgba(44,31,21,0.96);}
  .nav-links{display:none;}
  .nav-right{gap:8px;}
  .page-header{padding:80px 24px 36px;}
  .page-header.tall{padding:110px 24px 48px;}
  .page-hero-body{padding:0 24px;}
  footer{padding:32px 24px 20px;}
  .foot-in{flex-direction:column;gap:20px;text-align:center;}
  .foot-links{flex-wrap:wrap;justify-content:center;}
}