/*
* ===============================================
*  Shop Page Common Style (Final Rebuild)
* ===============================================
*/
:root {
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --bg-base: #1a1a1a;
  --bg-surface-primary: rgba(0, 0, 0, 0.2);
  --border-secondary: 1px solid rgba(255, 255, 255, 0.3);
  --overlay-color: rgba(0,0,0,0.6);
}
html {}
body { margin: 0; font-family: 'Noto Sans JP', sans-serif; background-color: var(--bg-base); color: var(--text-primary); line-height: 1.7; font-size: var(--font-size-base); }
a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
* { box-sizing: border-box; }

#pc-nav { display: none; }

/* --- ヘッダー（スマホ用） --- */
#header { position: fixed; top: 0; left: 0; width: 100%; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; z-index: 100; transition: background-color 0.3s; }
#header.scrolled { background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); }
.logo { margin: 0; z-index: 1001; }
.logo a {
  color: var(--text-primary);
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: var(--sp-header-logo-font-size); /* ← 変数に変更 */
  line-height: 1.2;
  text-shadow: var(--sp-header-logo-text-shadow); /* ← 変数に変更 */
}
.logo span {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--sp-header-sublogo-font-size); /* ← 変数に変更 */
  font-weight: 400;
  color: var(--text-secondary, #ccc);
  opacity: 1;
  letter-spacing: 1px;
}
/* ... */
.nav-toggle { width: 40px; height: 40px; position: relative; cursor: pointer; z-index: 1001; }
.nav-toggle span { display: block; width: 24px; height: 2px; background-color: var(--text-primary); position: absolute; left: 8px; transition: all 0.4s; }
.nav-toggle span:nth-child(1) { top: 12px; } .nav-toggle span:nth-child(2) { top: 19px; } .nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle.active span:nth-child(1) { top: 19px; transform: rotate(45deg); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
.nav-menu { position: fixed; top: 0; right: -100%; width: 280px; max-width: 80%; height: 100%; background-color: #000; padding-top: 100px; transition: right 0.5s; z-index: 1000; }
.nav-menu.active { right: 0; }
.nav-menu ul li a { display: block; padding: 18px 30px; color: var(--text-primary); font-size: 1rem; font-weight: bold; transition: background-color 0.2s; }
.nav-menu ul li a:hover { background-color: var(--shop-primary-color); }
body.nav-open #main { filter: blur(5px); opacity: 0.5; pointer-events: none; }

/* --- メインコンテンツ & セクション --- */
#main { position: relative; z-index: 1; transition: filter 0.5s, opacity 0.5s; }
.full-screen { min-height: 100vh; position: relative; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px 20px 40px; overflow: hidden; background-attachment: scroll; }
.full-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* 黒いオーバーレイをやめて、デフォルトを透明にする */
  z-index: 1;
  pointer-events: none; /* オーバーレイが下の要素のクリックを邪魔しないようにする */
}

/* スマホ表示の時、2枚目以降のセクションにだけ半透明の黒い膜をかける */
@media (max-width: 1023px) {
  
}
.section-header { position: relative; z-index: 2; text-align: center; width: 100%; padding-bottom: 20px; flex-shrink: 0; }
.section-title { font-family: 'Orbitron', sans-serif; font-size: var(--font-size-xl); font-weight: bold; color: var(--text-primary); margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.section-title::after { content: ''; display: block; width: 80px; height: 3px; background: var(--shop-primary-color); margin: 15px auto 0; }
.section-content { position: relative; z-index: 2; width: 100%; max-width: 800px; flex-grow: 1; overflow-y: auto; padding: 10px; }
h2.section-title-inner { font-size: var(--font-size-lg); font-weight: bold; margin: 40px 0 20px 0; padding-bottom: 10px; border-bottom: var(--border-secondary); }
h2.section-title-inner:first-child { margin-top: 0; }

/* --- 各要素 --- */
.hero-catchphrase {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 20px;
  max-width: 90%;
}

.hero-catchphrase .main-line {
  font-family: 'Noto Sans JP', sans-serif;
  /* ▼▼▼ この行を、直接指定から変数指定に変更 ▼▼▼ */
  font-size: var(--hero-font-size-main);
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 0.5em 0;
  line-height: 1.3;
  -webkit-text-stroke: 2px black;
  text-stroke: 2px black;
  paint-order: stroke fill;
  text-shadow: 
    0px 4px 8px rgba(0, 0, 0, 0.5),
    0 0 10px var(--shop-primary-color),
    0 0 20px var(--shop-primary-color),
    0 0 30px var(--shop-secondary-color),
    0 0 40px var(--shop-secondary-color);
}

.hero-catchphrase .sub-line {
  /* ▼▼▼ この行を、直接指定から変数指定に変更 ▼▼▼ */
  font-size: var(--hero-font-size-sub);
  line-height: 1.6;
  color: #ffffff;
  font-weight: 700;
  text-shadow: 
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0px 2px 5px rgba(0,0,0,0.8),
    0 0 5px var(--shop-primary-color);
}


.info-table td { padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,0.2); }
.info-table a { color: var(--shop-secondary-color); font-weight: bold; }
.price-items { margin-bottom: 25px; }
.price-item { display: flex; justify-content: space-between; gap: 15px; padding: 15px 0; border-bottom: 1px dashed rgba(255,255,255,0.2); }
.price-note { background-color: var(--bg-surface-primary); border-radius: 8px; padding: 20px; margin-top: 25px; text-align: center; }
.faq-list li { padding: 15px 0; border-bottom: 1px dashed rgba(255,255,255,0.2); overflow: hidden; }
.faq-list h3 { font-size: var(--font-size-lg); margin: 0; cursor: pointer; position: relative; padding-right: 35px; }
.faq-list h3::after { content: '+'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; transition: transform 0.3s; }
.faq-list li.is-open h3::after { transform: translateY(-50%) rotate(45deg); }
.faq-list p { margin: 0; padding-top: 15px; color: var(--text-secondary); max-height: 0; opacity: 0; transition: all 0.5s; }
.faq-list li.is-open p { max-height: 500px; opacity: 1; }
.gallery-wrapper-fullscreen { width: 100%; position: relative; -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.gallery-track-fullscreen { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 20px 0; }
.gallery-track-fullscreen::-webkit-scrollbar { display: none; }
.gallery-item-fullscreen { flex: 0 0 70%; max-width: 320px; scroll-snap-align: center; margin: 0 15px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.3); transform: scale(0.95); transition: transform 0.4s; aspect-ratio: 16 / 9; }
.gallery-item-fullscreen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-pagination { display: flex; justify-content: center; margin-top: 25px; }
.pagination-dot { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); margin: 0 6px; cursor: pointer; transition: all 0.3s; }
.pagination-dot.active { background-color: var(--shop-primary-color); transform: scale(1.3); }
.sns-contact-buttons { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 30px; }
.sns-btn { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 320px; height: 55px; padding: 0 25px; border-radius: 50px; font-weight: bold; font-size: 1rem; transition: all 0.2s; color: var(--text-primary); border: 2px solid var(--shop-secondary-color); }
.sns-btn:hover { background: var(--shop-secondary-color); color: #000; }
.sponsor-list { display: flex; flex-direction: column; gap: 20px; }
.sponsor-item { text-align: center; background: var(--bg-surface-primary); border-radius: 8px; padding: 20px; }
.sponsor-btn { display: inline-block; background: var(--shop-primary-color); color: var(--text-primary); padding: 10px 30px; border-radius: 50px; font-weight: bold; margin-top: 15px; transition: transform 0.2s; }
.sponsor-btn:hover { transform: scale(1.05); }
.page-footer-nav { padding: 30px 0; }
.shop-pagination { display: flex; justify-content: space-between; margin-bottom: 25px; }
.shop-pagination a { color: #e0e0e0; font-weight: 700; display: flex; align-items: center; gap: 15px; padding: 8px 15px; border-radius: 50px; transition: all 0.3s; }
.shop-pagination a:hover { background-color: rgba(255, 255, 255, 0.1); }
.shop-pagination .arrow { font-size: 1.5rem; color: var(--shop-primary-color); }
.breadcrumb-container { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 25px; }
.breadcrumb { text-align: center; font-size: var(--font-size-sm); color: var(--text-secondary); }
.breadcrumb a, .breadcrumb span { display: inline-block; margin: 0 5px; }
.breadcrumb a { color: var(--text-primary); }
.scroll-down-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 5; opacity: 0; transition: opacity 0.5s; }
.scroll-down-indicator.show { opacity: 1; }
.arrow-icon { width: 20px; height: 20px; border: solid var(--text-primary); border-width: 0 3px 3px 0; transform: rotate(45deg); animation: bounce 2s infinite; }
@keyframes bounce { 0%,100% {transform:translateY(0) rotate(45deg);} 50% {transform:translateY(10px) rotate(45deg);} }
#footer { text-align: center; padding: 40px; background: #111; color: #888; }

/*
* ===============================================
*  【スマホ専用】特定セクションの高さを自動調整
* ===============================================
*/
@media (max-width: 1023px) {
  
  /* 高さを自動調整したいセクションをカンマ区切りで指定 */
  #beerpong-intro,
  #darts-info,
  #section6 {
    min-height: auto; /* 画面いっぱいに広げる指定を解除 */
    padding-top: 60px;    /* 上の余白を調整 */
    padding-bottom: 60px; /* 下の余白を調整 */
  }

  /* 中身のコンテンツを上下中央に配置 */
  #beerpong-intro .section-content,
  #darts-info .section-content,
  #section6 .section-content,
  #section8 .section-content {
      flex-grow: 0; /* コンテンツに合わせて高さを縮める */
  }

}

/* --- PC表示 (1024px以上) --- */
/* --- PC表示 (1024px以上) --- */
@media (min-width:1024px){
  #header, .scroll-down-indicator { display:none !important; }
  body { overflow:hidden; background:#000; }

  /* PC背景レイヤー */
  #pc-background-layer{
    display:block;           /* ← モバイルとの差分はここだけ */
    position:fixed; inset:0; z-index:1;
    width:100%; height:100%;
  }
  .pc-background-image{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    transform:scale(1.1); opacity:0;
    transition: transform 3.5s cubic-bezier(.25,.46,.45,.94),
                opacity   3.5s cubic-bezier(.25,.46,.45,.94);
  }
  .pc-background-image.active{ transform:scale(1); opacity:1; }

  /* ▼▼ ここから下のPC用スタイル“全部”もこの中へ ▼▼ */
  #pc-nav { display:flex; flex-direction:column; position:fixed; top:0; left:0; width:320px; height:100vh; padding:40px 20px; z-index:10; }
  .brand-logo{ text-align:center; margin-bottom:50px; }
  .brand-logo a{ display:inline-block; padding:15px 20px; border:2px solid var(--shop-primary-color); border-radius:8px; transition:.3s; }
  .brand-logo a:hover{ background-color:var(--shop-primary-color); box-shadow:0 0 15px var(--shop-primary-color); }
  .brand-logo .shop-name{ display:block; font-family:'Orbitron',sans-serif; font-size:1.6rem; font-weight:900; color:#fff; line-height:1.3; text-shadow:0 0 8px var(--shop-secondary-color); }
  .brand-logo .site-name{ display:block; font-size:.7rem; color:var(--text-muted-color,#a0a0b0); margin-top:8px; letter-spacing:1px; }
  #pc-nav nav ul{ display:flex; flex-direction:column; gap:10px; }
  #pc-nav nav li a{ display:block; padding:12px 20px; border-radius:8px; color:#fff; font-weight:500; transition:.3s; border-left:4px solid transparent; }
  #pc-nav nav li a:hover{ background-color:rgba(255,255,255,0.1); }
  #pc-nav nav li a.active{ background-color:rgba(0,0,0,0.2); border-left-color:var(--shop-primary-color); font-weight:bold; }

  .site-menu-container{ position:fixed; top:20px; right:20px; z-index:20; }
  .menu-toggle-btn{ background:rgba(30,30,30,0.5); border:2px solid var(--shop-primary-color); backdrop-filter:blur(5px); border-radius:50%; cursor:pointer; width:50px; height:50px; position:relative; padding:0; transition:.3s; box-shadow:0 0 10px rgba(0,0,0,.5), 0 0 5px var(--shop-primary-color); }
  .menu-toggle-btn:hover{ transform:scale(1.1); background:var(--shop-primary-color); box-shadow:0 0 20px var(--shop-primary-color); }
  .menu-toggle-btn span{ display:block; position:absolute; width:20px; height:2px; background:#fff; left:11px; transition:.3s; }
  .menu-toggle-btn span:nth-child(1){ top:12px; } .menu-toggle-btn span:nth-child(2){ top:20px; } .menu-toggle-btn span:nth-child(3){ top:28px; }
  .menu-toggle-btn.active span:nth-child(1){ top:20px; transform:rotate(45deg); } .menu-toggle-btn.active span:nth-child(2){ opacity:0; } .menu-toggle-btn.active span:nth-child(3){ top:20px; transform:rotate(-45deg); }
  .site-menu-nav{ position:absolute; top:calc(100% + 10px); right:0; width:220px; background:rgba(10,10,20,0.95); border-radius:8px; padding:10px; display:flex; flex-direction:column; gap:5px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:.3s; }
  .site-menu-container.active .site-menu-nav{ opacity:1; visibility:visible; transform:translateY(0); }
  .site-menu-nav a{ color:var(--text-primary); padding:10px; text-align:left; border-radius:4px; font-size:.9rem; transition:background-color .2s; }

  #wrapper{ position:absolute; left:320px; right:0; top:0; width:auto; height:100vh; overflow-y:scroll; z-index:5; -ms-overflow-style:none; scrollbar-width:none; }
  #wrapper::-webkit-scrollbar{ display:none; }
  #main{ padding-top:0; }

  .full-screen{ padding:10vh 40px; min-height:0; display:flex; flex-direction:column; justify-content:center; background-image:none !important; background-attachment:scroll; }
  .full-screen::before{ display:none; }

  .section-content{
    background:#0d0d1a; border:1px solid rgba(255,255,255,0.1);
    border-radius:12px; padding:40px; width:100%; max-width:800px; margin:0 auto;
    display:block; box-shadow:0 10px 30px rgba(0,0,0,0.3);
  }
  #beerpong-intro .section-content,
  #darts-info .section-content,
  #section6 .section-content{ display:flex; flex-direction:column; justify-content:center; }

  .hero-catchphrase{ text-align:left; }
    /* ▼ フッター（PC時はカード幅と揃える） */
  #footer{
    width:100%;
    max-width:720px;               /* .section-content と同じ */
    margin:0 auto 40px;            /* 中央寄せ＋下余白 */
    padding:40px;
    background:#0d0d1a;
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    color:#888;
  }
}
/* ここで必ず @media を閉じる */
@media (min-width: 1200px) {
  #wrapper { left: 50%; transform: translateX(-50%); max-width: 800px; right: auto; }
}
/*
* ===============================================
*  料金・メニューリスト専用スタイル
* ===============================================
*/
.price-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}
.price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.2);
}
.price-list li:last-child {
  border-bottom: none;
}
.price-list strong {
  color: var(--text-primary);
}
.price-list span {
  font-weight: bold;
  color: var(--shop-secondary-color, #00ffcc);
  white-space: nowrap;
  padding-left: 20px;
}
.menu-links {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: center;
  margin-bottom: 30px;
}
.menu-links a {
  font-weight: bold;
  color: var(--shop-primary-color);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/*
* ===============================================
*  【追加】スマホ時のみヒーロー背景を動かすアニメーション
* ===============================================
*/

/* アニメーションの動きを定義 */
@keyframes pan-right {
  0% { background-position: 0% 50%; } /* 開始時 */
  100% { background-position: 100% 50%; }/* 終了時 */
}

/* スマホ表示の時だけ (max-width: 1023px) */
@media (max-width: 1023px) {
  /* "hero-bg-image" というクラスを持つ要素にアニメーションを適用 */
  .hero-bg-image {
    animation: pan-right 100s infinite alternate cubic-bezier(0.25, 0.1, 0.25, 1);
  }
}
/*
* ===============================================
*  【追加】セクション8（系列店舗）のスタイル
* ===============================================
*/
#section8 .section-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
/* ===== Gallery makeover (CSSだけで見栄え改善) ===== */
/* 既存のクラス名をそのまま使います */
.gallery-wrapper-fullscreen { width: 100%; position: relative; }

/* 横スクロールの土台。両端をふわっと隠すマスク付き */
.gallery-track-fullscreen{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 8px 14px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  scrollbar-width: none;
}
.gallery-track-fullscreen::-webkit-scrollbar{ display:none; }

/* 1枚ずつを“カード”化。サイズと比率を統一 */
.gallery-item-fullscreen{
  flex: 0 0 min(88vw, 760px);      /* モバイル：画面にフィット、PC：最大760px */
  max-width: min(88vw, 760px);
  aspect-ratio: 16 / 9;            /* 写真の縦横比。4/3や1/1に変えると雰囲気も変わる */
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  scroll-snap-align: center;
  transform: scale(.98);
  transition: transform .35s ease;
}
.gallery-item-fullscreen img{
  width: 100%; height: 100%;
  object-fit: cover;               /* 余白を出さずに“いいところ”で切り抜く */
  display: block;
  transform: scale(1.0);
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}

/* ホバー/フォーカスで軽くズーム（PC向けの視覚効果） */
@media (hover:hover){
  .gallery-item-fullscreen:hover img,
  .gallery-item-fullscreen:focus-within img{ transform: scale(1.04); }
}

/* PCは幅を固定して安定表示（中央1枚がドン） */
@media (min-width:1024px){
  .gallery-item-fullscreen{ flex-basis: 760px; }
}

/* ドットの見た目を整える（既存JSのまま使えます） */
.gallery-pagination{ display:flex; justify-content:center; gap:8px; margin-top:12px; }
.pagination-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.38);
  transition: transform .2s, background .2s, box-shadow .2s;
}
.pagination-dot.active{
  background: var(--shop-primary-color);
  box-shadow: 0 0 10px var(--shop-primary-color);
  transform: scale(1.25);
}

/* 動きが苦手な人向け（OS設定に合わせてアニメ弱め） */
@media (prefers-reduced-motion: reduce){
  .gallery-item-fullscreen,
  .gallery-item-fullscreen img,
  .pagination-dot{ transition: none !important; }
}
/* ===== 1) 関連リンク（ボタン風ピル） ===== */
/* 対象：店舗情報テーブル内のアンカー（既存の <br> 区切りそのまま） */
#section2 .info-table td a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 6px 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color: var(--shop-secondary-color);
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;            /* 既存の下線は消す */
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}



/* ホバー時の小気味良い動き */
#section2 .info-table td a:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}

/* モバイルは横幅いっぱいでタップしやすく */
@media (max-width:1023px){
  #section2 .info-table td a{ display:flex; width:100%; justify-content:center; }
}

/* ===== 2) Googleマップで見る（大きめCTA） ===== */
/* 対象：#section2 の最後の段落にあるリンク */
#section2 .section-content > p:last-of-type a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

/* ピンのアイコン（これも文字なしSVGマスク） */
#section2 .section-content > p:last-of-type a::before{
  content:"";
  width: 18px; height: 18px;
  background: var(--shop-secondary-color);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ffcc'><path d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ffcc'><path d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z'/></svg>") center/contain no-repeat;
}

/* ホバーで軽く持ち上げ */
#section2 .section-content > p:last-of-type a:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  box-shadow: 0 18px 40px rgba(0,0,0,.34);
}

/* モバイルは幅いっぱいで親切に */
@media (max-width:1023px){
  #section2 .section-content > p:last-of-type{ text-align:center; }
  #section2 .section-content > p:last-of-type a{ display:flex; width:100%; justify-content:center; }
}
/* ===== セクション4：メニューリンクをピル型に ===== */
#section4 .menu-links a{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 16px; margin:8px 0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--shop-primary-color);
  font-weight:800; letter-spacing:.02em;
  text-decoration:none;               /* 既存の下線を消す */
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* ホバー動作を統一 */
#section4 .menu-links a:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow:0 16px 36px rgba(0,0,0,.35);
}

/* モバイルは幅いっぱいでタップしやすく */
@media (max-width:1023px){
  #section4 .menu-links{ align-items:center; }
  #section4 .menu-links a{ width:100%; }
}

/* ===== セクション4：PDFボタン（.price-note 内の a） ===== */
#section4 .price-note a{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color:#fff; font-weight:800; letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
#section4 .price-note a:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  box-shadow:0 18px 40px rgba(0,0,0,.34);
}
@media (max-width:1023px){
  #section4 .price-note a{ width:100%; }
}
/* --- PCのヒーローだけは常に全画面表示にする --- */
@media (min-width: 1024px) {
  #section1.full-screen{
    min-height: 100vh;              /* ← ここがキモ */
    padding: 12vh 40px 14vh;        /* 余白はお好みで */
    display: flex;
    align-items: center;            /* 縦中央 */
    justify-content: center;        /* 横中央 */
  }
  #section1 .hero-catchphrase{
    max-width: 820px;               /* 読みやすい幅に制限（任意） */
    margin: 0 auto;
  }
}
.lang-link {
  text-align: center;
  margin-top: 20px;
}

.lang-link a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #e63946;   /* 赤系で目立たせる */
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background-color 0.3s, transform 0.2s;
}

.lang-link a:hover {
  background-color: #d62839;
  transform: translateY(-2px);
}
/* 英語/日本語どちらでも、ボタンだけは必ず中央 */
.hero-catchphrase .lang-link{
  display:flex;
  justify-content:center;
  margin-top:12px;
}
.hero-catchphrase .lang-link a{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background: var(--shop-primary-color);
  color:#fff;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
@media (min-width:1024px){
  /* 英語ページの見出しサイズを少し大きく */
  html[lang="en"]{
    --hero-font-size-main: clamp(3.2rem, 4.5vw, 7rem);
    --hero-font-size-sub : clamp(1.2rem, 1.8vw, 1.8rem);
  }
  /* 英語ページはヒーロー全体を“画面中央寄せ”に配置 */
  html[lang="en"] #section1 .hero-catchphrase{
    top: 45vh;                 /* 位置は好みで ± 調整OK（例: 42–50vh）*/
    left: 42%;
    transform: translate(-50%, -50%);
    text-align: center;        /* 見出しも中央配置 */
  }
}
/* === section2 モバイル可読性UP（縦積みカード & 関連リンクをボタン化） === */
@media (max-width: 1023px){
  #section2 .info-table{ width:100%; border-collapse:separate; border-spacing:0; }
  #section2 .info-table tr{
    display:block; padding:14px; margin:12px 0;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.25);
  }
  #section2 .info-table td{ display:block; width:100%; }
  #section2 .info-table td:first-child{
    font-weight:800; color:#fff; font-size:.95rem; letter-spacing:.02em; margin-bottom:6px; opacity:.95;
  }
  #section2 .info-table td:last-child{ color:var(--text-color); line-height:1.7; font-size:1rem; }

  /* 関連リンクを縦並びボタンに */
  #section2 .info-table .link-list{ display:grid; gap:10px; }
  #section2 .info-table .link-list a{
    display:block; text-align:center; padding:12px 16px; border-radius:999px;
    text-decoration:none; font-weight:800; letter-spacing:.02em; color:#fff;
    border:1px solid rgba(255,255,255,.22);
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    box-shadow:0 8px 18px rgba(0,0,0,.24);
    transition:transform .16s ease, background .16s ease, box-shadow .16s ease;
  }
  #section2 .info-table .link-list a:hover{
    transform:translateY(-1px);
    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
    box-shadow:0 12px 26px rgba(0,0,0,.28);
  }

  /* 電話リンクもセンター化（既にピル風ならそのまま効きます） */
  #section2 .info-table a[href^="tel:"]{ display:block; text-align:center; }
}
/* 店舗情報テーブル：1列目を広げる */
.info-table td:first-child {
  min-width: 6em; /* 必要に応じて調整（pxでもOK） */
  white-space: nowrap; /* 強制改行を防ぐ */
  vertical-align: top; /* 上寄せ */
}
/* セクションを中央寄せ・ヒーロー風に */
#section0-recruit.notice-section{
  min-height: 70vh;
  padding: 60px 20px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
}
#section0-recruit .notice-inner{
  width: 100%; max-width: 900px; margin: 0 auto;
}

/* カードのベース */
.notice-card{
  text-align: center;
  background: rgba(13,13,26,.85);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  position: relative;
}

/* 強調スタイル（光る縁・内側グラデ・パルス） */
.notice-card.is-highlight{
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,255,204,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(0,255,204,.45);
  box-shadow:
    0 0 0 2px rgba(0,255,204,.15) inset,
    0 22px 60px rgba(0,0,0,.55),
    0 0 35px rgba(0,255,204,.25);
  animation: pulse-glow 2.6s ease-in-out infinite;
}
@keyframes pulse-glow{
  0%,100%{ box-shadow: 0 0 0 2px rgba(0,255,204,.15) inset, 0 22px 60px rgba(0,0,0,.55), 0 0 22px rgba(0,255,204,.18); }
  50%    { box-shadow: 0 0 0 2px rgba(0,255,204,.22) inset, 0 22px 60px rgba(0,0,0,.55), 0 0 40px rgba(0,255,204,.35); }
}

/* タイトルを太く大きく */
.notice-title{
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: .02em; margin: 0 0 10px;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* タグ列を“ピル”化して中央に */
.notice-tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px;
  margin: 10px 0 14px;
}
.notice-tags li{
  display:inline-flex; align-items:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  font-weight:700; color: var(--text-primary);
}

/* 説明をセンター寄せ＋読みやすく */
.notice-desc{
  text-align: center; margin: 12px auto 18px; color: var(--text-secondary);
}

/* CTAを横並び（モバイルは縦）で中央配置 */
.notice-ctas{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.notice-ctas .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 240px; height: 48px; padding: 0 18px;
  border-radius: 999px; font-weight:800;
  border:2px solid var(--shop-secondary-color);
  transition: transform .15s ease, background .15s ease;
  background: transparent; color: #fff;
}
.notice-ctas .btn-outline:hover{ background: var(--shop-secondary-color); color:#000; transform: translateY(-1px); }

/* 右上に“採用中”リボン（任意） */
.notice-card.is-highlight::after{
  content:"採用中";
  position:absolute; top:14px; right:-8px;
  background: var(--shop-primary-color);
  color:#000; font-weight:900; padding:6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* PCでさらに中央に寄せる（左右スペースが広い時） */
@media (min-width:1024px){
  #section0-recruit.notice-section{ padding: 80px 20px; }
  .notice-card{ padding: 36px 40px; }
}
/* お問い合わせブロック */
.contact-box{ max-width:860px; margin:0 auto; }
.contact-description{ color:var(--text-secondary); margin-bottom:12px; }
.contact-grid{
  display:grid; gap:14px; grid-template-columns:1fr 1fr;
  margin:16px 0 10px;
}
.contact-field{ display:flex; flex-direction:column; gap:6px; }
.contact-field.wide{ grid-column:1 / -1; }

.input{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; font-size:1rem;
}
.input:focus{ outline:none; box-shadow:0 0 0 2px var(--shop-primary-color); }
.select{ appearance:none; background-image:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
.mono{ font-family: ui-monospace, Menlo, Consolas, monospace; }

.textarea-container{ display:grid; gap:10px; margin-top:10px; }
.copy-btn{
  justify-self: start;
  padding:10px 18px; border-radius:999px; border:2px solid var(--shop-secondary-color);
  background:transparent; color:#fff; font-weight:800; cursor:pointer;
  transition:transform .15s, background .15s;
}
.copy-btn:hover{ background:var(--shop-secondary-color); color:#000; transform:translateY(-1px); }
.copy-alert{ margin-top:6px; color:var(--shop-secondary-color); font-weight:700; }

.contact-actions{ margin-top:14px; }
@media (max-width:1023px){
  .contact-grid{ grid-template-columns:1fr; }
  .copy-btn{ justify-self: stretch; text-align:center; }
}
/* 追加推奨：スマホではPC要素を非表示 */
.pc-only { display:none; }
@media (min-width:1024px){ .pc-only { display:block; } }