:root{
  --header-height: 96px;
  --header-height-sm: 72px;
  --bg: #fff;
  --fg: #000;
  --shadow: 0 2px 12px rgba(0,0,0,.06);
  --ease: cubic-bezier(.2,.7,.2,1);
  --reveal-dur: .8s;
  
  /* フォントサイズパラメーター */
  --drawer-menu-font-size: clamp(24px, 4vw, 42px); /* ハンバーガーメニューのフォントサイズ */
  --section-title-font-size: clamp(20px, 4vw, 36px); /* セクションタイトルのフォントサイズ */
  
  /* セクション間の余白調整 */
  --section-bottom-margin: clamp(220px, 20vh, 300px); /* 全セクション統一の下余白 */
  --footer-top-margin: 5px; /* フッター上部の余白（ピクセル指定） */
  
  /* 中央ロゴ画像サイズ調整（単一パラメーターで微調整） */
  --hero-logo-scale: 2; /* ここを変えるだけでロゴ全体のサイズを微調整（例: 0.9, 1.1 など） */
  --hero-logo-scale-mobile: 2.5; /* モバイル用倍率（PCとは独立して調整） */
  --hero-side-padding: 60px;    /* ヒーロー左右パディング（PC既定） */
  
  /* ハンバーガーメニュー遷移調整パラメーター */
  /* PC版セクション別オフセット */
  --pc-gallery-scroll-offset: 0; /* PC版Galleryセクションオフセット（px） */
  --pc-about-scroll-offset: -90; /* PC版Aboutセクションオフセット（px） */
  --pc-brand-scroll-offset: -40; /* PC版Brandセクションオフセット（px） */
  --pc-access-scroll-offset: -50; /* PC版Accessセクションオフセット（px） */
  
  /* モバイル版セクション別オフセット */
  --mobile-gallery-scroll-offset: 20; /* モバイル版Galleryセクション下方向オフセット（px） */
  --mobile-about-scroll-offset: -72; /* モバイル版Aboutセクション下方向オフセット（px） */
  --mobile-brand-scroll-offset: -40; /* モバイル版Brandセクション下方向オフセット（px） */
  --mobile-access-scroll-offset: -90; /* モバイル版Accessセクション下方向オフセット（px） */
  
  /* 共通調整値 */
  --content-center-base-offset: 40; /* コンテンツ中心計算時の基本下方向オフセット（px） */
  
  /* Access画像スタイリングパラメーター */
  --access-image-aspect-ratio: 4 / 3; /* Access画像のアスペクト比 */
  --access-image-min-width: 300px; /* Access画像の最小幅（px） */
  --access-image-margin-right: 20px; /* Access画像の右側余白（px） */
  --access-image-border-radius: 0; /* Access画像の角丸（px、0で角あり） */
  --access-image-shadow: 0 8px 30px rgba(0,0,0,.08); /* Access画像の影 */
  --access-grid-gap: clamp(40px, 8vw, 80px); /* Accessグリッドの要素間隔 */
  --access-grid-columns: 1.4fr 0.6fr; /* Accessグリッドの列比率（画像：情報） */
  --access-image-margin-right: 20px; /* Access画像の右側余白（px） */
  --access-image-border-radius: 0; /* Access画像の角丸（px、0で角あり） */
  --access-image-shadow: 0 8px 30px rgba(0,0,0,.08); /* Access画像の影 */
  --access-grid-gap: clamp(40px, 8vw, 80px); /* Accessグリッドの要素間隔 */
  --access-grid-columns: 1.4fr 0.6fr; /* Accessグリッドの列比率（左：情報, 右：画像） */
  --temp-logo-opacity-dur: 1.3s; /* 一時ロゴの不透明度フェード時間（PC既定） */
  --temp-logo-motion-dur: 1.3s;  /* 一時ロゴの動き（Y/blur）時間（PC既定） */
}

*{ box-sizing:border-box; }

html,body{
  height:100%; margin:0; background:var(--bg); color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo;
}

body.locked{ overflow:hidden; touch-action:none; } /* 1スク目はネイティブスクロール封鎖 */

/* === 追加: ロック中（初期スワイプ演出中）はヒーロー以外を不可視に === */
body.locked main > section:not(.hero){
  visibility: hidden;
}
body.locked .footer{
  visibility: hidden;
}

/* Header */
.header{
  position:fixed; inset:0 0 auto 0; height:var(--header-height); background:#fff;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:0 16px; z-index:1150;
  transition:height .28s var(--ease), box-shadow .28s var(--ease);
}

.header.is-scrolled{ height:var(--header-height-sm); box-shadow:var(--shadow); }

.hamburger{ 
  grid-column:1; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:8px; border:none; background:transparent; position:relative; z-index:1300;
  transition:transform .3s var(--ease), background-color .3s var(--ease); 
  pointer-events:auto; /* 確実にクリック可能に */ 
}

.hamburger:hover{ transform:scale(1.1); }

.hamburger .bars, .hamburger .bars::before, .hamburger .bars::after{
  display:block; width:22px; height:2px; background:#000; border-radius:2px; position:relative; 
  transition:all .3s var(--ease);
  pointer-events:none; /* 子要素はクリックイベントを無効に */
}

.hamburger .bars::before, .hamburger .bars::after{ content:""; position:absolute; left:0; right:0; }
.hamburger .bars::before{ top:-7px; } 
.hamburger .bars::after{ top:7px; }

.hamburger.is-active{ 
  transform:rotate(180deg); 
}

.hamburger.is-active .bars{ background:transparent; }

.hamburger.is-active .bars::before{ 
  transform:translateY(7px) rotate(45deg); 
  background:#000; /* バツ時は黒色 */
}

.hamburger.is-active .bars::after{ 
  transform:translateY(-7px) rotate(-45deg); 
  background:#000; /* バツ時は黒色 */
}

.logo-wrap{ 
  grid-column:2; display:flex; justify-content:center; align-items:center; 
  pointer-events:none; user-select:none; 
}

.logo{ 
  font-weight:900; font-size:clamp(22px,3.6vw,32px); letter-spacing:.02em; color:#000; 
  opacity:0; transition:opacity .6s var(--ease); pointer-events:auto; 
  will-change: opacity, transform, filter; /* フェードを滑らかに */
}

/* 追加: スワイプ中の一時ロゴ表示（ふわっと演出を強化） */
.logo.temp-prep{ /* 開始直後の準備状態（下げ＋ぼかし） */
  transform: translateY(8px);
  filter: blur(1px);
}
.logo.show-temp-logo{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity var(--temp-logo-opacity-dur) var(--ease),
    transform var(--temp-logo-motion-dur) var(--ease),
    filter var(--temp-logo-motion-dur) var(--ease);
}

.right{ grid-column:3; width:44px; height:44px; }

/* 画面中央ロゴ（1スクロール目の演出） */
.center-layer{ 
  position:sticky; 
  top:0; 
  height:100vh; 
  width:100%;
  display:flex; 
  justify-content:center; 
  align-items:center;
  pointer-events:none; 
  z-index:900;
  padding: 0 var(--hero-side-padding); /* 変数で管理（PC:60px、SPは@mediaで上書き） */
}

.center-logo{
  font-weight:900; color:#000; font-size:clamp(56px,12vw,120px); letter-spacing:.01em;
  opacity:0; transform:translateY(12px) scale(1.02); filter:blur(2px);
  transition:transform 1.2s var(--ease), filter 1.2s var(--ease), opacity 1.2s var(--ease); /* より長いアニメーション時間 */
  will-change:opacity, transform, filter;
  position:relative; z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.center-logo .logo-image {
  max-width: min(
    clamp(
      calc(180px * var(--hero-logo-scale)), /* 最小サイズ（小さめ） */
      calc(26vw * var(--hero-logo-scale)),  /* 画面幅に追従（以前より小さめ） */
      calc(360px * var(--hero-logo-scale))  /* 最大サイズ（小さめ） */
    ),
    calc(100vw - 2 * var(--hero-side-padding)) /* 画面幅−左右パディングを超えない */
  ); /* レスポンシブサイズ（倍率適用） */
  height: auto;
  object-fit: contain;
}

.center-logo.is-mirrored{
  transform:translateY(0) scale(1) scaleX(-1) !important; /* 鏡文字（水平反転）を強制適用 */
  transition:transform 0.8s var(--ease) !important; /* 反転アニメーション */
}

.center-layer.is-revealed .center-logo{ 
  opacity: 1; 
  transform:translateY(0) scale(1); 
  filter:blur(0);
  transition:transform 0.8s var(--ease), filter 1.2s var(--ease), opacity 1.2s var(--ease); /* 反転アニメーション対応 */
}

/* Drawer */
.drawer{ 
  position:fixed; inset:0; 
  background:transparent; /* 背景を透明に */
  z-index:1200; transition:transform 1.4s var(--ease); 
  transform:translateX(-100%);
  display:flex; align-items:center; justify-content:center; /* 画面中央配置 */
  transform-origin:center;
  pointer-events:none; /* ドロワー本体はクリックを奪わない（ナビ外は背後へ透過） */
}

.drawer.is-open{ transform:translateX(0); }

.drawer nav{
  display:flex; flex-direction:column; align-items:center; 
  transform:translateY(0); /* ヘッダー高さに依存しない中央配置 */
  gap:8px; /* アイテム間のスペース調整 */
  opacity:0;
  transition:opacity 1.3s var(--ease) 1.1s; /* 遅延でフェードイン */
  margin-top:116px; /* デフォルト値（通常ヘッダー + マージン） */
  pointer-events:auto; /* ナビ領域は操作可能に */
}

.drawer.is-open nav{
  opacity:1;
}

.drawer nav a{ 
  display:block; padding:24px 40px; color:#fff; text-decoration:none; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; /* システムフォント */
  font-weight:400; /* 標準ウェイト */
  font-size: var(--drawer-menu-font-size); /* パラメーター化 */
  background:transparent; 
  border:none; 
  transition:all .35s var(--ease);
  text-align:center; 
  letter-spacing:0.01em; /* わずかに文字間調整 */
  position:relative;
  cursor:pointer;
  line-height:1.2; /* 行間改善 */
}

.drawer nav a:hover{
  color:rgba(255,255,255,.85); 
  transform:scale(1.05) translateY(-1px); /* より控えめなホバー */
  text-shadow: 0 2px 8px rgba(255,255,255,0.2); /* ソフトなグロー */
}

.drawer nav a::before{
  content:'';
  position:absolute;
  bottom:6px; left:50%; 
  width:0; height:1px;
  background:rgba(255,255,255,0.5);
  transition:width .35s var(--ease), left .35s var(--ease);
}

.drawer nav a:hover::before{
  width:70%; left:15%;
}

/* ドロワー内Instagram */
.drawer-instagram{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 15px;
  text-decoration: none;
  position: relative;
  line-height: 0;
  margin-top: 20px; /* Accessとの間隔 */
}

.drawer-instagram-icon{
  width: 30px;
  height: 30px;
  display: block;
  opacity: 0.9;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.drawer-instagram:hover .drawer-instagram-icon{
  opacity: 1;
  transform: scale(1.1);
}

.drawer-instagram::before{
  display: none; /* ナビゲーションの下線効果を無効化 */
}

/* オーバーレイ（すりガラス効果 - ヘッダーを除く） */
.overlay{
  position:fixed; 
  top:0; left:0; right:0; bottom:0; /* 全画面表示に変更 */
  background:rgba(0,0,0,.45); 
  backdrop-filter:blur(12px); 
  opacity:0; visibility:hidden; 
  z-index:1100;
  transition:opacity 1.4s var(--ease), visibility 1.4s var(--ease), backdrop-filter 1.4s var(--ease);
}

.overlay.is-visible{
  opacity:1; visibility:visible;
}

/* スクロールスナップ（解錠後の体感補助） */
html{ scroll-behavior:smooth; }
main{ scroll-snap-type:y proximity; }
section{ scroll-snap-align:start; }

/* ヒーロー（真っ白） */
.hero{ 
  min-height:100vh; 
  background:#fff; 
  position:relative; 
  margin-bottom: var(--section-bottom-margin); /* ヒーローセクションにも同じ余白を適用 */
}

/* セクション共通（センター寄せ＆フェードイン） */
.section{
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 120px) 20px;
  text-align: center; /* すべて中央寄せ */
}

.reveal{
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1.6s var(--ease), transform 1.6s var(--ease), filter 1.6s var(--ease);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

.reveal.is-in{
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* 写真3枚（実際の画像） */
.gallery{
  display: grid;
  grid-template-columns: 1fr; /* 縦並び */
  gap: clamp(12px, 3vw, 24px);
  align-items: center;
  justify-items: center;
  margin-top: clamp(40px, 8vh, 80px); /* タイトルとの間に大きな余白 */
}

.photo{
  width: 100%;
  max-width: 1280px; /* 320px × 4 = 1280px */
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 0; /* 角をつける（角丸を削除） */
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  object-fit: cover; /* 画像のアスペクト比を保ちながらボックスにフィット */
  display: block;
}

/* About */
.section-title{
  font-family: "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo;
  font-weight: 300; /* Noto Sans JP - 300 */
  font-size: var(--section-title-font-size); /* パラメーター化 */
  letter-spacing: .02em;
  margin: 0 0 clamp(40px, 8vh, 80px); /* タイトルと内容の間に大きな余白 */
  color: #000; /* 普通の黒文字 */
}

.section-lead{
  max-width: 780px;
  margin: 0 auto;
  font-family: "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo;
  font-weight: 300; /* Noto Sans JP - 300 */
  font-size: clamp(14px, 2.3vw, 18px);
  line-height: 1.9;
  color: #222;
}

/* Brandセクション用の画像スタイル */
.brand-logo {
  width: 100%;
  max-width: clamp(200px, 35vw, 400px); /* サイズを小さくして調整 */
  height: auto;
  margin: clamp(20px, 4vh, 40px) auto clamp(30px, 6vh, 60px); /* 上下の余白 */
  display: block;
  object-fit: contain;
  border-radius: 0; /* 角をつける */
}

/* ヘッダー、Gallery、Aboutセクションの統一余白 */
.header, #gallery, #about, #brand{
  margin-bottom: var(--section-bottom-margin);
}

/* Accessセクションは小さな余白 */
#access{
  margin-bottom: clamp(80px, 8vh, 120px);
}

/* Access */
.access-box{
  display: grid;
  gap: 20px;
  justify-items: start; /* 左寄せ */
  font-size: clamp(14px, 2.3vw, 18px);
}

/* Contact section styling */
.contact-section {
  width: 100%;
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.contact-label {
  font-size: clamp(12px, 2vw, 14px);
  color: #666;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.contact-value {
  font-size: clamp(14px, 2.3vw, 18px);
  color: #000;
  line-height: 1.4;
}

.contact-value a {
  color: #0066cc;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}

.contact-value a:hover {
  color: #004499;
  text-decoration: underline;
}

.address-link {
  font-weight: 600;
}

.business-hours {
  margin-top: 8px;
  padding-top: 16px;
  /* border-top: 1px solid #eee; */ /* Instagram URL下の線を削除 */
}

.business-hours .contact-label {
  margin-bottom: 4px;
}

/* 追加: 2カラムレイアウト＆画像表示 */
.access-grid{
  display: grid;
  grid-template-columns: var(--access-grid-columns); /* パラメーター化された列比率 */
  gap: var(--access-grid-gap); /* パラメーター化されたギャップ */
  align-items: center; /* 縦方向中央揃え */
  margin-top: clamp(40px, 8vh, 80px); /* タイトルとの間に大きな余白 */
}

.access-photo{
  width: 100%; /* グリッド内での幅 */
  max-width: none; /* 最大幅制限を削除してグリッドに完全に従う */
  min-width: var(--access-image-min-width); /* パラメーター化された最小幅 */
  height: auto;
  aspect-ratio: var(--access-image-aspect-ratio); /* パラメーター化されたアスペクト比 */
  border-radius: var(--access-image-border-radius); /* パラメーター化された角丸 */
  box-shadow: var(--access-image-shadow); /* パラメーター化された影 */
  justify-self: end; /* 右寄せで中心を超えて配置 */
  margin-right: var(--access-image-margin-right); /* パラメーター化された右余白 */
  object-fit: cover; /* 画像のアスペクト比を保ちながらボックスにフィット */
  display: block;
}

/* 右側の情報を中央寄せに */
#access .access-box{
  justify-items: center; /* 中央寄せに変更 */
  align-items: center; /* 縦方向中央寄せ */
  text-align: center; /* テキスト中央寄せ */
  padding-left: 0; /* 余白調整 */
}

@media (max-width: 800px){
  /* モバイル版でのロゴサイズは --hero-logo-scale で統一制御（個別の倍率は不要） */
  :root {
    --hero-logo-scale: var(--hero-logo-scale-mobile); /* モバイル倍率を適用 */
    --hero-side-padding: 20px; /* モバイル左右パディング */
    --temp-logo-opacity-dur: 2.6s; /* さらにゆっくり（柔らかく） */
    --temp-logo-motion-dur: 2.8s;  /* 動きは少し長めに */
  }
  
  .access-grid{ 
    grid-template-columns: 1fr; 
    gap: clamp(20px, 4vw, 30px); /* モバイルでは余白を小さく */
  }
  
  .access-photo{ 
    max-width: calc(100vw - 80px); /* モバイルでは左右40pxの余白に変更（画像を小さく） */
    min-width: auto; /* モバイルでは最小幅をリセット */
    justify-self: center; /* モバイルでは中央配置 */
    margin-right: 0; /* モバイルでは右マージンをリセット */
    margin: 0 40px; /* 左右40pxの余白に変更（画像を小さく） */
  }
  
  #access .access-box{
    text-align: center; /* モバイルでは中央寄せ */
    justify-items: center; /* モバイルでは中央寄せ */
  }
  
  .center-layer {
    padding: 0 var(--hero-side-padding); /* モバイルではさらに右側パディングを増加 */
  }

  /* 一時ヘッダーロゴ：モバイルはよりソフトに（下げ量・ぼかし量アップ） */
  .logo.temp-prep{
    transform: translateY(12px);
    filter: blur(2px);
  }

  /* 一時ヘッダーロゴ：モバイルは強めの ease-out で柔らかく */
  .logo.show-temp-logo{
    transition:
      opacity var(--temp-logo-opacity-dur) cubic-bezier(.22, 1, .36, 1),
      transform var(--temp-logo-motion-dur) cubic-bezier(.22, 1, .36, 1),
      filter var(--temp-logo-motion-dur) cubic-bezier(.22, 1, .36, 1);
  }

  /* スマホ：一時ヘッダーロゴの速度はCSS変数で制御（--temp-logo-opacity-dur） */
}

/* 下部の"下へ"誘導（丸なし） */
.bottom-gradient{ 
  position:fixed; left:0; right:0; bottom:0; height:22vh; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 40%, #fff 100%);
  z-index:850; opacity:1; transition:opacity .5s var(--ease); 
}

.scroll-hint{ 
  position:fixed; left:50%; bottom:clamp(20px,4.5vh,56px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; z-index:951; 
  pointer-events:none; opacity:1; transition:opacity .5s var(--ease); 
}

.scroll-hint__text{ 
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#000; opacity:.7; 
}

.chevrons{ position:relative; width:24px; height:36px; }

.chevrons svg{ 
  position:absolute; left:50%; transform:translateX(-50%); width:18px; height:18px; 
  opacity:0; animation:chev 1.8s var(--ease) infinite; 
}

.chevrons svg:nth-child(1){ top:0; animation-delay:0s; }
.chevrons svg:nth-child(2){ top:8px; animation-delay:.35s; }
.chevrons svg:nth-child(3){ top:16px; animation-delay:.7s; }

@keyframes chev{ 
  0%{opacity:0; transform:translate(-50%,-2px);} 
  20%{opacity:.95;} 
  50%{opacity:.95;} 
  100%{opacity:0; transform:translate(-50%,8px);} 
}

.hint-hidden{ opacity:0; pointer-events:none; }

/* Footer */
.footer{
  background: #fff;
  border-top: 1px solid #eee;
  padding: var(--footer-top-margin) 20px 20px 20px; /* パラメーター化されたAccessセクションとの間隔、その他は20px */
}

.footer-content{
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px;
}

.footer-instagram{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-decoration: none;
  transition: opacity 0.3s var(--ease);
}

.footer-instagram:hover {
  opacity: 0.7;
}

.footer-instagram img{
  width: 32px;  /* ← 24px から 32px に引き上げ（規定の最小サイズ配慮） */
  height: 32px; /* ← 24px から 32px に引き上げ（規定の最小サイズ配慮） */
  display: block;
}

.footer-license {
  font-size: 12px;
  color: #999;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.4;
}

.footer-copyright{
  font-size: 14px;
  color: #666;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion:reduce){
  .header,.logo,.center-logo,.drawer,.scroll-hint,.bottom-gradient,.reveal{ 
    transition:none !important; 
  }
  .chevrons svg{ 
    animation:none !重要; opacity:.75; position:static; transform:none; 
  }
}

/* Center logo is now image-based - keeping only mirroring effect */
.center-logo.is-mirrored { 
  transform: translateX(0) translateY(0) scale(1) scaleX(-1) !important; /* 反転時は画面中央に配置 */
}