:root{
  --red:#e4002b;
  --black:#111;
  --gray:#f5f5f5;
  --shadow:0 10px 24px rgba(0,0,0,0.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Zen Kaku Gothic New','Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Meiryo","メイリオ",sans-serif;
  color:var(--black);
  background:#fff;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px; border-bottom:1px solid #eee;
  transition: box-shadow .25s ease, padding .25s ease;
}
header.scrolled{ box-shadow:0 6px 20px rgba(0,0,0,.06); padding:16px 28px; }
.logo{ font-weight:800; font-family:'Montserrat',sans-serif; letter-spacing:.06em; }

nav a{
  margin:0 18px; text-decoration:none; color:var(--black);
  font-weight:700; font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase; opacity:.9;
  font-family:'Montserrat',sans-serif; transition:color .3s ease;
}
nav a:hover{ color:var(--red); }

.btn-reserve{
  background:var(--red); color:#fff; padding:12px 24px; border-radius:6px; text-decoration:none;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 6px 14px rgba(228,0,43,.18);
  font-family:'Montserrat',sans-serif; display:inline-block;
}

/* Hero */
.hero{ position:relative; height:90vh; overflow:hidden; color:#fff; text-align:center; display:flex; justify-content:center; align-items:center; }
.slides{ position:absolute; inset:0; display:flex; animation:slideShow 12s infinite; }
.slide{ flex:0 0 100%; width:100%; height:100%; background-size:cover; background-position:center; }
.hero::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:1; }
.hero-content{ position:relative; z-index:2; padding:0 20px; }
.hero h1{ font-family:'Montserrat',sans-serif; font-size:clamp(2.4rem,4.5vw,3.8rem); margin-bottom:12px; font-weight:800; letter-spacing:.01em; text-transform: uppercase; color:#fff; text-shadow: 2px 2px 12px rgba(0,0,0,0.4);}
.hero p{ margin-bottom:26px; font-weight:600; opacity:.95; font-size: 1.1rem; letter-spacing: .05em; color: #fff;}

.slides{
  position:absolute;
  inset:0;
  display:flex;
  animation:slideShow 10s linear infinite;
}

@keyframes slideShow{
  0%   { transform:translateX(0%); }
  15%  { transform:translateX(0%); }

  25%  { transform:translateX(-100%); }
  40%  { transform:translateX(-100%); }

  50%  { transform:translateX(-200%); }
  65%  { transform:translateX(-200%); }

  75%  { transform:translateX(-300%); }
  90%  { transform:translateX(-300%); }

  100% { transform:translateX(0%); }
}


/* Sections */
section{ padding:60px 20px; max-width:1200px; margin:0 auto; }
h2{
  font-family:'Montserrat',sans-serif; text-align:center; color:var(--red);
  margin-bottom:40px; font-size:clamp(1.6rem,2.2vw,2rem); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}

/* Strengths */
.strengths{ display:flex; flex-direction:column; gap:44px; align-items:stretch; }
.strength{ background:#fafafa; padding:26px; border-radius:10px; text-align:center; box-shadow:var(--shadow); }
.strength img{ width:100%; height:300px; object-fit:cover; border-radius:8px; margin-bottom:16px; }
.strength h3{ font-family:'Montserrat',sans-serif; font-size:1.35rem; margin-bottom:10px; color:var(--black); font-weight:800; letter-spacing:.02em; }
.strength p{ opacity:.95; font-size: 1.05rem; font-weight: 600; line-height: 1.6; }

/* Menu */
.menu-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.card{ border:1px solid #eee; border-radius:10px; padding:22px; text-align:center; box-shadow:0 6px 16px rgba(0,0,0,0.04); font-weight:600; }
.menu-more{ text-align:center; margin-top:30px; }
.menu-more a{ font-family:'Montserrat',sans-serif; font-size:1.1rem; font-weight:700; letter-spacing:.05em; text-decoration:none; color:#111; transition:color .3s ease; }
.menu-more a:hover{ color:var(--red); }

/* Style gallery */
.style-gallery{ display:grid; grid-template-columns: repeat(3, 1fr);max-width: 1200px;margin: 0 auto; gap:24px; }
.style-item{ border-radius: 12px;overflow: hidden;box-shadow: 0 8px 20px rgba(0,0,0,.08);background: #fff;transition: transform .25s ease, box-shadow .25s ease; }
.style-item:hover{transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0,0,0,.12);}
.style-item img{ width: 100%;height: 360px; /* PCで3列でも大きめに見せる */object-fit: cover;display: block;}
.style-item figcaption{ padding:14px 16px 18px; }
.style-item h3{ font-family:'Montserrat',sans-serif; font-size:1.05rem; margin:2px 0 6px; letter-spacing:.02em;text-align: center;}
/* スマホ対応 */
@media (max-width: 768px) {
  .style-gallery { grid-template-columns: 1fr; /* スマホで1列 */ gap: 20px;}
  .style-item img {height: 480px; /* 1列表示なら縦を大きく */}}

/* Inline reserve */
.reserve-center{ text-align:center; margin:40px 0; }

/* Staff */
.staff-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.staff-card{ border:1px solid #eee; border-radius:12px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.05); background:#fff; transition:transform .25s ease, box-shadow .25s ease; text-align:left; }
.staff-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.08); }
.staff-photo{ width:100%; height:600px; object-fit:cover; display:block; }
.staff-body{ padding:18px 16px 20px; }
.staff-name{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.1rem; letter-spacing:.03em; margin:0 0 4px; }
.staff-role{ font-size:.9rem; color:#666; margin:0 0 12px; font-weight: 500;}
.staff-catch{ font-size:.98rem; color:#111; margin:0 0 10px; font-weight: 600;}
.staff-msg{ font-size:.95rem; color:#444; line-height:1.7; font-weight: 500; }

/* Access */
.access-text { text-align:center; margin-bottom:20px; opacity:.95; font-size: 1.05rem; font-weight: 600; line-height: 1.6; }
.map-container { position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,0.08); margin-top:20px; }
.map-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; border-radius:12px; }
/* Footer */
footer{ background:#0f0f10; color:#fff; text-align:center; padding:48px 20px; }
footer a{ color:#fff; text-decoration:none; display:inline-block; margin:10px; font-family:'Montserrat',sans-serif; }
footer a:hover{ color:var(--red); }
/* ===== Footer redesign ===== */
/* ===== Footer redesign ===== */
.site-footer {
  background: #111; /* 黒背景 */
  color: #fff;
  padding: 40px 20px;
  text-align: center;
}

.site-footer .footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.footer-socials {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.footer-socials img {
  width: 38px;  /* ← アイコンサイズ調整 */
  height: 38px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-socials a:hover img {
  transform: scale(1.1);
  opacity: 0.8;
}

.footer-copy {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #ccc;
}

.btn-reserve {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 22px;
  border-radius: 8px;
  background: #e4002b; /* ブランドレッド */
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s;
}

.btn-reserve:hover {
  background: #c70024;
}

/* Responsive Tweaks */
@media (max-width: 768px){
  nav a{ margin:0 12px; font-size:.95rem; letter-spacing:.08em; }
  header{ padding:18px 20px; }
  .hero{ height:70vh; }
  .strength img{ height:200px; }
  .staff-photo{ height:260px; }
}

/* ===== Mobile header: 2段で重なり防止 ===== */
@media (max-width: 768px){
  header{
    display:flex;
    flex-wrap: wrap;          /* 2段化 */
    padding: 12px 14px;
    gap: 8px;
  }
  header .logo{ order:1; }
  .btn-reserve{ 
    order:2; 
    padding: 8px 12px; 
    font-size: .78rem; 
    flex: 0 0 auto;          /* 予約は縮まない */
  }
  header nav{
    order:3;
    width: 100%;              /* 2段目にフル幅で配置 */
    display:flex; 
    justify-content: space-evenly;
    align-items:center;
    gap: 0;
  }
  header nav a{
    margin: 0 6px;
    font-size: .8rem;
    letter-spacing: .04em;    /* 文字間も少し詰める */
    white-space: nowrap;      /* 折返し防止 */
  }
  /* ロゴも少しだけ控えめに */
  header .logo img{ height: 44px !important; max-height:44px !important; }
  .staff-photo{height:320px; /* 少し縦に余裕を持たせる */
    object-position: top center;
}
/* Strengths - Mobile tweak */
@media (max-width: 768px){
  .strength h3{
    font-size: 1.1rem;     /* 見出し小さめ */
    margin-bottom: 8px;
  }
  .strength p{
    font-size: 0.9rem;     /* 本文小さめ */
    line-height: 1.5;      /* 行間もスッキリ */
  }
}
}
/* ========= ハンバーガー＆モバイルナビ ========= */
/* 基本は非表示。SPで出す */
.nav-toggle { display: none; }
.nav-mobile { display: none; }

/* トグルボタンのバー */
.nav-toggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid #eee; border-radius: 8px;
  background: #fff; cursor: pointer;
}
.nav-toggle-bar {
  display:block; width:22px; height:2px; background:var(--black);
  position:relative;
}
.nav-toggle-bar + .nav-toggle-bar { margin-top:5px; }

/* モバイルメニュー（ドロップダウン） */
.nav-mobile {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  display: flex; flex-direction: column; align-items: stretch;
  overflow: hidden;
  max-height: 0; /* 閉じた状態 */
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease;
  will-change: max-height, opacity;
  z-index: 60;
}
.nav-mobile a{
  padding:14px 20px;
  text-decoration: none;
  color: var(--black);
  font-weight:700; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
  border-top: 1px solid #f4f4f4;
}

/* 展開時のクラス */
.nav-mobile.show {
  max-height: 320px; /* 項目数に応じて余裕をもたせる */
  opacity: 1;
}

/* レイアウトの前提：headerを展開位置の基準にする */
header{ position: sticky; top:0; z-index: 50; }
header{ position: sticky; } /* 既にあるが安全のため再掲 */
header{ display:flex; align-items:center; gap:16px; } /* 予約ボタンとの距離を少し確保 */

/* スマホ幅で切り替え */
@media (max-width: 768px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:block; }
  /* 予約ボタンが被る場合は縮小＆改行されるように */
  .btn-reserve{ padding:10px 16px; font-size:.95rem; }
}
@media (max-width: 768px){
  .footer-inner{
    flex-direction:column;       /* 縦積み */
    align-items:stretch;         /* ボタンを左右いっぱいに */
    gap:14px;
  }
  .footer-socials{
    order:2;                     /* 並び順：コピー→SNS→ボタン に揃えるならここで調整 */
  }
  .site-footer .btn-reserve{
    width:100%;                  /* 全幅ボタンでタップしやすく */
    text-align:center;
  }
  .footer-copy{
    text-align:left;
  }
}

/* さらに極小端末での余白・サイズ微調整 */
@media (max-width: 380px){
  .footer-socials img{ width:24px; height:24px; }
  .site-footer{ padding:20px 14px; }
}