/**
 * 餃子のネオ大衆酒場 ニューカムラ 栄プリンセス大通り店
 * 参考デザインの構造 — 構造・余白・モーション機構をクローンし
 * テキスト/画像のみ当店のものへ差し替え。フォントは無料代替・POP（Bowlby One/Dela Gothic One/Hanken/Zen Kaku）。明朝系は不使用。
 * 見出しは制作ハーネス（§3-1）に従い実px上限でキャップ。
 */

/* ===== reset ===== */
html, body, main, div, section, article,
header, footer, nav, h1, h2, h3, h4, h5, h6,
ul, li, ol, table, tbody, tr, th, td,
a, button, p, span, b, strong, small, blockquote,
canvas, figure, picture, img, audio, video,
form, label, input, select, textarea {
  margin: 0; padding: 0; border: 0; box-sizing: border-box; vertical-align: baseline;
}
html { line-height: 1; -webkit-text-size-adjust: 100%; }
main { display: block; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
ul, ol { list-style: none; }
a { display: inline-block; color: inherit; background-color: transparent; text-decoration: none; }
b, strong { font-weight: bold; }
img { width: 100%; height: auto; object-fit: contain; vertical-align: top; }
button, input, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; color: inherit; outline: none; text-align: left; -webkit-appearance: none; appearance: none; background: transparent; }
button { cursor: pointer; }
/* キーボード操作時のみフォーカスリングを復活（マウス操作時は :focus-visible が発火せず＝見た目は不変。WCAG 2.4.7） */
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* skip-link：通常はオフスクリーン（不可視）、キーボードフォーカス時のみ左上に出す（WCAG 2.4.1） */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--red); color: #fff; padding: 0.7rem 1.2rem; font-weight: 700; border-radius: 0 0 8px 0; text-decoration: none; }
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }

/* ===== design tokens ===== */
:root {
  --bg: #F5F4F0;          /* アイボリー地 */
  --ink: #1a1a1a;
  --black: #000000;
  --red: #BA1C22;         /* 餃子・酒場の赤（メニュー帯/アクセント） */
  --maroon: #5b1414;      /* ブランド文字の深紅 */
  --yellow: #E7D31B;      /* フッター */
  --beige: #DFDCCD;       /* 採用/宴会セクション下地 */
  --en-serif: "Dela Gothic One", "Bowlby One", var(--ja); /* インパクト極太（SHOWA混ぜ餃子パッケージ寄せ・ラベル/見出し） */
  --en-sans: "Hanken Grotesk", system-ui, sans-serif;          /* 補助グロテスク */
  --ja: "Zen Kaku Gothic New", system-ui, sans-serif;          /* 本文ゴシック */
  --impact: "Dela Gothic One", var(--ja);                      /* 極太インパクト（数字・煽り・キャッチ） */
}

/* rem=vw スケール（比例レイアウト） */
html { font-size: 0.7142857153vw; }
@media only screen and (max-width: 980px) {
  html { font-size: 2.666666667vw; }
}

h1, h2, h3, h4, h5, h6, a, p, span, button, b, strong, label, input, textarea, select, th, td, li, time, small, summary, div {
  font-family: var(--ja);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (max-width: 980px) {
  h1, h2, h3, h4, h5, h6, a, p, span, button, b, strong, label, input, textarea, select, th, td, li, time, small, summary { font-size: 1.1rem; }
}
a *, button * { pointer-events: none; }
p, p * { letter-spacing: 0; font-feature-settings: "palt" 0; }
.bold, .bold *, b, b *, strong, strong * { font-weight: 700; }
.en-sans, .en-sans * { font-family: var(--en-sans); font-weight: 400; line-height: 0.9; letter-spacing: 0.04em; }
.enew, .enew * { font-family: var(--en-serif); font-weight: 400; line-height: 1.05; letter-spacing: 0.01em; }

/* 大型ディスプレイ文字＝実px上限でキャップ（AI感回避ハーネス §3-1） */
.display-xl { font-size: clamp(2.4rem, 6vw, 3.5rem) !important; line-height: 1; }
.display-lg { font-size: clamp(2rem, 5vw, 3.4rem) !important; line-height: 1; }
.display-md { font-size: clamp(1.6rem, 3.4vw, 2rem) !important; line-height: 1.15; }

.heading { display: inline-block; font-size: 1.4rem; line-height: 1; letter-spacing: 0.18em; font-family: var(--en-sans); }
.desktop { display: block; }
.smart { display: none; }
@media only screen and (max-width: 980px) {
  .desktop { display: none; }
  .smart { display: block; }
}

/* ===== flex utils ===== */
.flex { display: flex; flex-wrap: wrap; justify-content: space-between; }
.flex-center { justify-content: center; }
.align-center { align-items: center; }
.nowrap { flex-wrap: nowrap; }
.ratio-fixed { position: relative; padding-top: 56.25%; overflow: hidden; }
.ratio-fixed img { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; object-fit: cover; }

body { position: relative; overscroll-behavior: none; background-color: var(--bg); color: var(--ink); }
main { position: relative; overflow: hidden; }
.vertical_text { writing-mode: vertical-rl; text-orientation: mixed; font-feature-settings: initial; }

/* ===== loading ===== */
.loading {
  position: fixed; inset: 0; background-color: var(--bg); z-index: 100;
  display: flex; align-items: center; justify-content: center;
  /* 退場は JS(.hide)が主。ここは JS が死んだ時だけ効く保険（7s=JS失敗保険6.5sより後）。 */
  transition: opacity 0.55s ease, transform 0.55s ease;
  animation: loaderHide 0.6s ease 2.8s forwards;
}
@keyframes loaderHide { to { opacity: 0; visibility: hidden; } }
.loading .content { width: 30rem; text-align: center; }
.loading .content .mark { width: 12rem; margin: 0 auto 2rem; animation: markBoing 1.2s cubic-bezier(.2,.8,.3,1.4) infinite; }
@keyframes markBoing { 0%,100% { transform: translateY(0) rotate(-4deg) scale(1); } 50% { transform: translateY(-1rem) rotate(4deg) scale(1.06); } }
/* POP丸文字ロゴ（一文字ずつ弾む） */
.loading .content .word { font-family: "Dela Gothic One", "Rampart One", var(--ja); font-size: clamp(2.8rem, 7vw, 3.8rem); line-height: 1; letter-spacing: 0.04em; color: var(--red); display: flex; justify-content: center; gap: 0.04em; }
.loading .content .word span { display: inline-block; animation: popBounce 1s ease-in-out infinite; }
.loading .content .word span:nth-child(1){ animation-delay: 0s; color: var(--red); }
.loading .content .word span:nth-child(2){ animation-delay: .08s; color: var(--maroon); }
.loading .content .word span:nth-child(3){ animation-delay: .16s; color: var(--red); }
.loading .content .word span:nth-child(4){ animation-delay: .24s; color: var(--maroon); }
.loading .content .word span:nth-child(5){ animation-delay: .32s; color: var(--red); }
.loading .content .word span:nth-child(6){ animation-delay: .40s; color: var(--maroon); }
@keyframes popBounce { 0%,100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-0.9rem) rotate(-4deg); } }
.loading .content .sub { margin-top: 0.9rem; font-family: "Dela Gothic One", var(--ja); font-size: 1.4rem; color: var(--ink); transform: rotate(-2deg); }
.loading .content .sub:before, .loading .content .sub:after { content: "♪"; color: var(--yellow); margin: 0 0.4em; -webkit-text-stroke: 1px var(--ink); }
.loading .content .percentage { margin-top: 1.6rem; font-family: var(--impact); font-size: 1.5rem; color: var(--maroon); }
.loading .content .percentage .count { font-family: var(--impact); }
@media (prefers-reduced-motion: reduce){ .loading .content .word span, .loading .content .mark { animation: none !important; } }

/* ===== header ===== */
.shadow { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40; opacity: 0; visibility: hidden; transition: .3s; }
.shadow.open { opacity: 1; visibility: visible; }

header { position: relative; padding: 2.6rem 4.8rem; z-index: 45; }
header .day_hour_wrap { width: 32vw; }
header .day_hour_wrap .red {
  position: relative; display: inline-block; margin-right: 1.2rem; padding: 0.4rem 0.7rem;
  font-size: 1.2rem; line-height: 1; color: var(--bg); background-color: var(--red); border-radius: 2px;
}
header .day_hour_wrap .line { display: inline-block; width: 1px; height: 2.2rem; margin: auto 1rem; background-color: var(--black); }
header .day_hour_wrap .endless_wrap { width: 22vw; }
header .day_hour_wrap .endless_wrap .endless { height: 2.4rem; align-items: center; }
header .day_hour_wrap .endless_wrap .endless .item { flex-wrap: nowrap; align-items: center; margin: auto 1.2rem auto auto; font-size: 1.3rem; line-height: 1; white-space: nowrap; }
header .day_hour_wrap .endless_wrap .endless .item .day { display: inline-block; margin: 0 .2rem; padding: .35rem .5rem; font-size: 1.1rem; line-height: 1; color: var(--bg); background: var(--black); border-radius: 50%; }

header .nav_wrap {
  position: fixed; top: 2rem; left: 0; right: 0; margin: auto; width: 26rem; z-index: 50;
  background-color: var(--bg); border: 2px solid var(--black); border-radius: 4px; overflow: hidden;
}
header .nav_wrap .fixed_menu { padding: 1.1rem 2.2rem; align-items: center; }
header .nav_wrap .fixed_menu button { position: relative; font-size: 1.3rem; line-height: 1; font-weight: 700; letter-spacing: 0.08em; }
header .nav_wrap .fixed_menu button.open { padding-left: 2rem; }
header .nav_wrap .fixed_menu button.open:before, header .nav_wrap .fixed_menu button.open:after { content: ""; position: absolute; left: .2rem; top: 0; bottom: 0; margin: auto; width: 14px; height: 2px; background: var(--black); }
header .nav_wrap .fixed_menu button.open:before { transform: rotate(45deg); }
header .nav_wrap .fixed_menu button.open:after { transform: rotate(-45deg); }
header .nav_wrap .header_nav { display: none; padding: 0 2.2rem 2.4rem; border-top: 1px solid rgba(0,0,0,.15); }
header .nav_wrap .header_nav.open { display: block; }
header .nav_wrap nav ul li { margin-top: 1.8rem; display: flex; align-items: baseline; justify-content: space-between; }
header .nav_wrap nav ul li .en { font-family: var(--en-serif); font-size: 1.6rem; color: var(--maroon); }
header .nav_wrap nav ul li .ja { font-size: 1.3rem; font-weight: 700; }
header .nav_wrap .shop_data { display: none; padding: 1.8rem 2.2rem 2.2rem; border-top: 1px solid rgba(0,0,0,.15); }
header .nav_wrap .shop_data.open { display: block; }
header .nav_wrap .shop_data ul li { margin-bottom: 1rem; display: flex; gap: 1rem; }
header .nav_wrap .shop_data ul li .k { width: 6rem; flex: none; font-weight: 700; font-size: 1.2rem; }
header .nav_wrap .shop_data ul li .v { font-size: 1.2rem; line-height: 1.4; }
header .nav_wrap .shop_data ul li .v a { text-decoration: underline; }
header .nav_wrap .shop_data .map { display: block; margin-top: 1.4rem; padding: 1.2rem 0; font-size: 1.3rem; color: var(--bg); text-align: center; background: var(--black); border-radius: 3px; }

header .info_wrap { width: 32vw; justify-content: flex-end; gap: 2.4rem; }
header .info_wrap a { position: relative; padding-left: 2.6rem; font-size: 1.25rem; line-height: 1; align-self: center; }
header .info_wrap a:before { content: ""; position: absolute; left: 0; top: -0.3rem; width: 2rem; height: 2rem; background-size: contain; background-repeat: no-repeat; background-position: center; }
header .info_wrap a.address:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
header .info_wrap a.instagram:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E"); }

@media only screen and (max-width: 980px) {
  header { padding: 1rem 0.8rem; }
  header .day_hour_wrap { width: 100%; margin-top: 6rem; }
  header .day_hour_wrap .endless_wrap { width: 60vw; }
  header .nav_wrap { top: 0.8rem; width: calc(100vw - 1.6rem); }
  header .info_wrap { display: none; }
}

/* ===== endless marquee ===== */
.endless_wrap { display: flex; flex-wrap: nowrap; overflow: hidden; }
.endless_wrap .endless { position: relative; display: flex; flex-wrap: nowrap; width: max-content; white-space: nowrap; }
.endless_wrap .endless:nth-of-type(odd) { animation: endless 60s -30s linear infinite; }
.endless_wrap .endless:nth-of-type(even) { animation: endless_2 60s linear infinite; }
.endless_wrap .re { animation-direction: reverse !important; }
@keyframes endless { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes endless_2 { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } }

/* ===== MV (hero) ===== */
.mv { position: relative; border-bottom: 2px solid var(--black); }
.mv h1 { margin: auto; padding-top: 3rem; width: calc(100% - 16rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.mv h1 .text { width: 30%; }
.mv h1 .text span { display: block; font-family: var(--en-serif); font-size: clamp(1.1rem, 1.9vw, 1.7rem); line-height: 1.25; color: var(--maroon); }
.mv h1 .text.right { text-align: right; }
.mv h1 .logo { width: 36%; }
.mv h1 .logo img { width: 100%; }
.mv .visual_wrap { margin: 4rem auto 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.mv .visual_wrap .vertical_text { position: relative; padding-top: 6rem; font-family: var(--ja); font-weight: 700; font-size: clamp(1.2rem,1.6vw,1.7rem); letter-spacing: 0.3em; color: var(--ink); }
.mv .visual_wrap .vertical_text.left { margin-left: 5.5rem; }
.mv .visual_wrap .vertical_text.right { margin-right: 5.5rem; }
.mv .visual_wrap .main_visual { position: relative; width: 54%; }
.mv .visual_wrap .main_visual .label { position: absolute; top: -1.4rem; left: 0; right: 0; margin: auto; width: fit-content; padding: 0.3rem 1.4rem; font-family: var(--en-sans); font-size: 1.2rem; letter-spacing: 0.2em; color: var(--bg); background: var(--red); z-index: 2; }
.mv .visual_wrap .main_visual .visual { position: relative; padding-top: 100%; border: 2px solid var(--black); border-bottom: none; overflow: hidden; }
.mv .visual_wrap .main_visual .visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv .visual_wrap .main_visual .deco { position: absolute; z-index: 3; }
.mv .visual_wrap .main_visual .deco.drink { right: -7rem; bottom: -2rem; width: 16rem; animation: sway 5s ease-in-out infinite; }
.mv .visual_wrap .main_visual .deco.side { left: -8rem; bottom: 6rem; width: 17rem; animation: sway 6s ease-in-out infinite reverse; }
.mv .visual_wrap .main_visual .deco img { filter: drop-shadow(0 1.2rem 1.6rem rgba(0,0,0,.18)); }
@keyframes sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media only screen and (max-width: 980px) {
  .mv h1 { width: calc(100% - 3rem); flex-wrap: wrap; justify-content: center; }
  .mv h1 .text { display: none; }
  .mv h1 .logo { width: 80%; }
  .mv .visual_wrap { margin-top: 3rem; width: calc(100% - 2.4rem); }
  .mv .visual_wrap .vertical_text { display: none; }
  .mv .visual_wrap .main_visual { width: 100%; }
  .mv .visual_wrap .main_visual .deco.drink { right: -1rem; bottom: -9rem; width: 11rem; }
  .mv .visual_wrap .main_visual .deco.side { display: none; }
}

/* ===== concept ===== */
.concept { position: relative; z-index: 2; background: var(--bg); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4.6rem)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4.6rem)); }  /* 箱の底を斜めにクリップ＝縦線が斜め罫で終端。クリーム背景でstats上端のAA赤線を被覆 */
.concept .wrap { margin: auto; padding: 1.6rem 0 11.5rem; width: calc(60% - 4px); border-left: 2px solid var(--black); border-right: 2px solid var(--black); text-align: center; }
.concept .wrap .content_wrap { margin-top: 10rem; }
.concept .wrap .content_wrap .label { display: inline-block; font-family: var(--en-serif); font-size: clamp(1.8rem,3vw,2.6rem); color: var(--maroon); letter-spacing: 0.02em; }
.concept .wrap .content_wrap h2 { margin-top: 1.6rem; font-size: clamp(1.7rem,2.8vw,2rem); font-weight: 800; line-height: 1.55; letter-spacing: 0.01em; }
.concept .wrap .content_wrap h2 b { position: relative; font-size: 1em; font-weight: 800; color: var(--red); white-space: nowrap; }
.concept .wrap .content_wrap h2 b::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0.05em; height: 0.32em; background: var(--yellow); z-index: -1; transform: rotate(-1deg); }
.concept .wrap .content_wrap .text_wrap { margin: 2.6rem auto 0; max-width: 92%; }
.concept .wrap .content_wrap .text_wrap p { margin-top: 1.5rem; font-size: clamp(1.4rem,1.85vw,1.62rem); font-weight: 600; line-height: 1.95; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.concept .wrap .content_wrap .text_wrap p b { font-size: 1em; font-weight: 800; color: var(--red); background: linear-gradient(transparent 62%, rgba(255,216,61,.75) 62%); padding: 0 0.06em; white-space: nowrap; }
@media only screen and (max-width: 980px) {
  .concept .wrap { width: calc(100% - 4px - 2rem); padding-bottom: 5rem; }
  .concept .wrap .content_wrap { margin-top: 6rem; }
}

/* ===== menu (お品書き・赤帯) ===== */
.menu { padding-top: 9rem; background-color: var(--red); overflow: hidden; }
.menu * { color: var(--bg); }
.menu .oshinagaki .endless .item { position: relative; padding: 0 4rem; }
.menu .oshinagaki .endless .item .en { font-family: var(--en-serif); font-size: clamp(2.6rem,6vw,4rem); line-height: 1; }
.menu .oshinagaki .endless .item .ja { font-family: var(--ja); font-weight: 700; font-size: clamp(1.4rem,2.6vw,2rem); margin-left: 0.8rem; vertical-align: 0.3em; }
.menu .grid { margin-top: 3rem; border-top: 2px solid var(--bg); display: flex; flex-wrap: wrap; }
.menu .grid li { position: relative; padding: 5rem 2rem 6rem; width: calc(100% / 3); text-align: center; border-right: 2px solid var(--bg); border-bottom: 2px solid var(--bg); }
.menu .grid li:nth-of-type(3n) { border-right: none; }
.menu .grid li .heading2 { font-size: 1.7rem; font-weight: 700; line-height: 1.5; }
.menu .grid li .visual_wrap { position: relative; margin: 2.6rem auto 0; width: 74%; }
.menu .grid li .visual_wrap .photo { border-radius: 50%; overflow: hidden; aspect-ratio: 1/1; border: 2px solid var(--bg); }
.menu .grid li .visual_wrap .photo img { width: 100%; height: 100%; object-fit: cover; }
.menu .grid li .visual_wrap .price { position: absolute; right: -1rem; bottom: -1rem; width: 7rem; height: 7rem; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 50%; background: var(--bg); color: var(--red); border: 2px solid var(--black); transform: rotate(8deg); }
.menu .grid li .visual_wrap .price .num { font-family: var(--en-sans); font-weight: 700; font-size: 1.8rem; line-height: 1; }
.menu .grid li .visual_wrap .price .yen { font-size: 1rem; line-height: 1; }
.menu .grid li .visual_wrap .stamp { position: absolute; left: -1.2rem; top: -1rem; padding: 0.5rem 0.9rem; font-size: 1.1rem; font-weight: 700; color: var(--bg); background: var(--maroon); border: 2px solid var(--bg); transform: rotate(-8deg); z-index: 2; }
.menu .grid li .introduction { margin: 2.4rem auto 0; width: 88%; font-size: 1.2rem; line-height: 1.8; }
.menu .more { padding: 7rem 0; text-align: center; border-bottom: 2px solid var(--bg); }
.menu .more .lead { font-size: 1.6rem; font-weight: 700; }
.menu .more .word { display: block; margin: 1.6rem auto; font-family: var(--en-serif); font-size: clamp(2.4rem,6vw,3.8rem); line-height: 1; }
.menu .more .ig { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 0.6rem; padding: 1.3rem 2.6rem; border: 1px solid var(--bg); border-radius: 999px; font-family: var(--en-sans); letter-spacing: 0.08em; }
@media only screen and (max-width: 980px) {
  .menu { padding-top: 5rem; }
  .menu .grid li { width: 100%; padding: 4rem 2rem 4.5rem; border-right: none; }
  .menu .grid li .visual_wrap { width: 60%; }
}

/* ===== commitment (こだわり=名物三本柱) ===== */
.commitment { position: relative; padding: 9rem 0 0; text-align: center; }
.commitment .label { display: inline-block; font-family: var(--en-serif); font-size: clamp(2rem,4vw,2.8rem); color: var(--maroon); }
.commitment h2 { margin-top: 2.4rem; font-size: clamp(1.5rem,2.4vw,2rem); font-weight: 700; line-height: 1.5; }
.commitment .chara_list { margin-top: 7rem; display: flex; justify-content: center; gap: 3rem; }
.commitment .chara_list li { width: 11rem; height: 11rem; border-radius: 50%; border: 2px solid var(--black); display: flex; align-items: center; justify-content: center; font-family: var(--ja); font-weight: 700; font-size: 2.4rem; color: var(--maroon); transform: translateY(2rem); opacity: 0; transition: .5s; }
.commitment .chara_list.animation li { transform: translateY(0); opacity: 1; }
.commitment .chara_list.animation li:nth-of-type(2) { transition-delay: .1s; }
.commitment .chara_list.animation li:nth-of-type(3) { transition-delay: .2s; }
.commitment .content_list { margin-top: 7rem; display: flex; border-bottom: 2px solid var(--black); }
.commitment .content_list li { width: 33.3333%; }
.commitment .content_list li .content_wrap { padding-bottom: 6rem; border-top: 2px solid var(--black); border-right: 2px solid var(--black); height: 100%; }
.commitment .content_list li:last-of-type .content_wrap { border-right: none; }
.commitment .content_list li .visual_wrap { margin: 0 auto; width: 60%; aspect-ratio: 4/5; overflow: hidden; }
.commitment .content_list li .visual_wrap img { width: 100%; height: 100%; object-fit: cover; }
.commitment .content_list li .title { display: inline-block; margin-top: 3.4rem; font-size: 1.8rem; font-weight: 700; line-height: 1.5; }
.commitment .content_list li .sentence { margin: 1.6rem auto 0; width: 84%; font-size: 1.3rem; line-height: 1.9; }
@media only screen and (max-width: 980px) {
  .commitment { padding-top: 6rem; }
  .commitment .chara_list { gap: 1.4rem; margin-top: 4rem; }
  .commitment .chara_list li { width: 8rem; height: 8rem; font-size: 1.8rem; transform: none; opacity: 1; }
  .commitment .content_list { flex-wrap: wrap; }
  .commitment .content_list li { width: 100%; }
  .commitment .content_list li .content_wrap { border-right: none; }
  .commitment .content_list li .visual_wrap { width: 70%; }
}

/* ===== logo band + steam  ===== */
.brand_band { position: relative; height: 70rem; overflow: hidden; border-bottom: 2px solid var(--black); background: var(--bg); }
.brand_band .background { position: absolute; inset: -20% -10%; display: flex; flex-wrap: nowrap; gap: 4rem; transform: rotate(-12deg); opacity: 0.10; }
.brand_band .background .col { display: flex; flex-direction: column; gap: 3rem; width: 22rem; flex: none; animation: bandUp 50s linear infinite; }
.brand_band .background .col:nth-of-type(even) { animation: bandDown 50s linear infinite; }
.brand_band .background .col img { width: 100%; }
@keyframes bandUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes bandDown { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }
.brand_band .center { position: absolute; inset: 0; margin: auto; width: 46rem; height: 46rem; display: flex; align-items: center; justify-content: center; }
.brand_band .center .steam { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; filter: blur(0.6rem); mix-blend-mode: multiply; pointer-events: none; }
.brand_band .center .steam span { position: absolute; left: 0; right: 0; bottom: -20%; margin: auto; width: 60%; height: 60%; border-radius: 50%; background: radial-gradient(circle, rgba(186,28,34,.35), transparent 70%); animation: steam 9s linear infinite; }
.brand_band .center .steam span:nth-of-type(2) { animation-delay: -3s; left: -20%; }
.brand_band .center .steam span:nth-of-type(3) { animation-delay: -6s; left: 20%; }
@keyframes steam { 0% { transform: translateY(40%) scale(.6); opacity: 0; } 30% { opacity: .6; } 100% { transform: translateY(-120%) scale(1.3); opacity: 0; } }
.brand_band .center .dish { position: relative; width: 36rem; height: 36rem; border-radius: 50%; overflow: hidden; border: 3px solid var(--black); z-index: 2; }
.brand_band .center .dish img { width: 100%; height: 100%; object-fit: cover; }
.brand_band .center .ring { position: absolute; inset: 0; margin: auto; width: 44rem; height: 44rem; border: 2px solid var(--black); border-radius: 50%; z-index: 1; animation: spin 40s linear infinite; }
.brand_band .center .ring .tag { position: absolute; top: -1.4rem; left: 0; right: 0; margin: auto; width: fit-content; padding: 0.3rem 1.2rem; background: var(--bg); font-family: var(--en-serif); font-size: 1.6rem; color: var(--maroon); }
@keyframes spin { to { transform: rotate(360deg); } }
@media only screen and (max-width: 980px) {
  .brand_band { height: 44rem; }
  .brand_band .center { width: 28rem; height: 28rem; }
  .brand_band .center .dish { width: 22rem; height: 22rem; }
  .brand_band .center .ring { width: 27rem; height: 27rem; }
}

/* ===== course / 宴会 ===== */
.course { position: relative; padding-top: 9rem; text-align: center; overflow: hidden; }
.course:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52rem; background: var(--beige); z-index: 0; }
.course > * { position: relative; z-index: 1; }
.course .label { display: inline-block; font-family: var(--en-serif); font-size: clamp(2rem,4vw,2.8rem); color: var(--maroon); }
.course h2 { margin-top: 2.2rem; font-size: clamp(1.5rem,2.4vw,2rem); font-weight: 700; line-height: 1.5; }
.course .floats { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.course .floats img { position: absolute; border-radius: 50%; border: 2px solid var(--black); object-fit: cover; opacity: .9; }
.course .floats .f1 { width: 13rem; height: 13rem; top: 2rem; right: 9rem; }
.course .floats .f2 { width: 11rem; height: 11rem; top: 22rem; left: 8rem; }
.course .floats .f3 { width: 9rem; height: 9rem; top: 30rem; right: 6rem; }
.course .floats .f4 { width: 12rem; height: 12rem; bottom: 20rem; left: 11rem; }
.course .plans { margin: 6rem auto 0; width: min(108rem, 90%); display: flex; flex-wrap: wrap; gap: 2.4rem; justify-content: center; }
.course .plans .plan { width: calc(50% - 1.2rem); background: var(--bg); border: 2px solid var(--black); border-radius: 6px; padding: 3rem 2.6rem; text-align: left; transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.course .plans .plan:hover { transform: translateY(-6px); }
.course .plans .plan .ribbon { display: inline-block; padding: 0.4rem 1rem; font-size: 1.1rem; font-weight: 700; color: var(--bg); background: var(--red); border-radius: 2px; }
.course .plans .plan .pname { margin-top: 1.4rem; font-size: 1.7rem; font-weight: 700; line-height: 1.5; }
.course .plans .plan .pprice { margin-top: 1.4rem; display: flex; align-items: baseline; gap: 0.6rem; }
.course .plans .plan .pprice .num { font-family: var(--en-sans); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--maroon); }
.course .plans .plan .pprice .tax { font-size: 1.1rem; }
.course .plans .plan .pmeta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.course .plans .plan .pmeta span { padding: 0.3rem 0.8rem; font-size: 1.1rem; background: var(--beige); border-radius: 2px; }
.course .plans .plan .pdesc { margin-top: 1.4rem; font-size: 1.25rem; line-height: 1.8; }
.course .cta { margin: 5rem auto 0; }
.course .cta a { display: inline-block; padding: 1.6rem 4rem; font-size: 1.5rem; font-weight: 700; color: var(--bg); background: var(--red); border: 2px solid var(--black); border-radius: 999px; }
.course .marquee_band { margin-top: 6rem; padding: 2rem 0; background: var(--red); }
.course .marquee_band * { color: var(--bg); }
.course .marquee_band .item { display: inline-flex; align-items: center; gap: 1rem; margin-right: 2rem; }
.course .marquee_band .item .en { font-family: var(--en-serif); font-size: clamp(1.6rem,3vw,2.4rem); }
.course .marquee_band .item .ja { font-size: 1.3rem; font-weight: 700; }
@media only screen and (max-width: 980px) {
  .course:after { height: 40rem; }
  .course .floats { display: none; }
  .course .plans .plan { width: 100%; }
}

/* ===== area SEO ===== */
.area { padding: 8rem 0; background: var(--bg); }
.area .wrap { width: min(96rem, 88%); margin: auto; }
.area .label { font-family: var(--en-serif); font-size: clamp(1.8rem,3vw,2.4rem); color: var(--maroon); }
.area h2 { margin-top: 1.4rem; font-size: clamp(1.5rem,2.4vw,2rem); font-weight: 700; line-height: 1.5; }
.area p { margin-top: 2rem; font-size: 1.35rem; line-height: 2.1; }
.area .chips { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.area .chips span { padding: 0.5rem 1.1rem; font-size: 1.2rem; background: var(--beige); border-radius: 999px; }

/* ===== reviews / instagram ===== */
.social { padding: 8rem 0; background: var(--beige); }
.social .wrap { width: min(108rem, 90%); margin: auto; }
.social .label { font-family: var(--en-serif); font-size: clamp(1.8rem,3vw,2.4rem); color: var(--maroon); text-align: center; display: block; }
.social h2 { margin-top: 1rem; text-align: center; font-size: clamp(1.4rem,2.2vw,1.8rem); font-weight: 700; }
.social .reviews { margin-top: 3rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.social .reviews blockquote { background: var(--bg); border: 2px solid var(--black); border-radius: 6px; padding: 2.2rem; }
.social .reviews blockquote p { font-size: 1.25rem; line-height: 1.85; }
.social .reviews blockquote footer { margin-top: 1.4rem; font-size: 1.15rem; font-weight: 700; }
.social .reviews blockquote .stars { color: var(--red); }
.social .ig { margin-top: 4rem; }
.social .ig .ig-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.8rem; }
.social .ig .ig-list a { aspect-ratio: 1/1; overflow: hidden; border-radius: 4px; }
.social .ig .ig-list a img { width: 100%; height: 100%; object-fit: cover; }
@media only screen and (max-width: 980px) {
  .social .reviews { grid-template-columns: 1fr; }
  .social .ig .ig-list { grid-template-columns: repeat(2,1fr); }
}

/* ===== faq / news / column / contact ===== */
.block { padding: 7rem 0; }
.block .wrap { width: min(86rem, 88%); margin: auto; }
.block .label { font-family: var(--en-serif); font-size: clamp(1.8rem,3vw,2.4rem); color: var(--maroon); text-align: center; display: block; }
.block h2, .block h1 { margin-top: 1rem; text-align: center; font-size: clamp(1.4rem,2.2vw,1.8rem); font-weight: 700; }
.faq details { border-bottom: 1px solid rgba(0,0,0,.2); padding: 1.6rem 0; }
.faq summary { position: relative; list-style: none; cursor: pointer; padding-right: 3rem; font-size: 1.4rem; font-weight: 700; line-height: 1.6; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:after { content: "+"; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); font-size: 2rem; color: var(--red); }
.faq details[open] summary:after { content: "–"; }
.faq details .a { margin-top: 1rem; font-size: 1.3rem; line-height: 1.9; }
.faq .more-link, .news .more-link, .column .more-link { margin-top: 2.6rem; text-align: center; }
.faq .more-link a, .news .more-link a, .column .more-link a { display: inline-block; padding: 1.1rem 2.6rem; border: 2px solid var(--black); border-radius: 999px; font-weight: 700; }
.news .topic, .column .col-item { display: block; padding: 1.6rem 0; border-bottom: 1px solid rgba(0,0,0,.18); }
.news .topic time, .column .col-item time { font-family: var(--en-sans); font-size: 1.1rem; color: var(--red); }
.news .topic .t, .column .col-item h3 { font-size: 1.4rem; font-weight: 700; margin-top: 0.3rem; }
.column .col-item p { margin-top: 0.4rem; font-size: 1.25rem; line-height: 1.7; }

.contact form { margin-top: 2.6rem; display: grid; gap: 1.4rem; }
.contact form .row { display: grid; gap: 0.5rem; }
.contact form label { font-size: 1.2rem; font-weight: 700; }
.contact form input, .contact form select, .contact form textarea {
  width: 100%; padding: 1.2rem 1.4rem; font-size: 1.3rem; background: var(--bg);
  border: 2px solid var(--black); border-radius: 4px; -webkit-appearance: none; appearance: none;
}
.contact form textarea { min-height: 12rem; resize: vertical; }
.contact form .hp { position: absolute; left: -9999px; }
.contact form button { padding: 1.5rem; font-size: 1.5rem; font-weight: 700; color: var(--bg); background: var(--red); border: 2px solid var(--black); border-radius: 999px; }
.contact form [data-stem-form-success], .contact form [data-stem-form-error] { padding: 1.2rem; text-align: center; font-weight: 700; border-radius: 4px; }
.contact form [data-stem-form-success] { background: #e6f4e6; }
.contact form [data-stem-form-error] { background: #f7e1e1; }
.contact .nap { margin-top: 3rem; display: grid; gap: 0.8rem; }
.contact .nap div { display: flex; gap: 1rem; font-size: 1.3rem; }
.contact .nap div .k { width: 7rem; flex: none; font-weight: 700; }
.contact .nap div .v a { text-decoration: underline; }
.open-badge { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1rem; padding: 0.5rem 1.2rem; font-size: 1.2rem; font-weight: 700; border-radius: 999px; border: 2px solid var(--black); }
.open-badge .dot { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: #888; }
.open-badge.is-open { background: #e6f4e6; }
.open-badge.is-open .dot { background: #1c9e3a; }
.open-badge.is-closed { background: #f3e3e3; }
.open-badge.is-closed .dot { background: var(--red); }

/* ===== footer (yellow / 全役割を集約) ===== */
footer .yellow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4.5rem 5.5rem; padding: 9rem 5.5rem 5rem; background-color: var(--yellow); }
footer .yellow .content_wrap { padding: 0; }
footer .yellow .info_wrap { flex: 1 1 34rem; min-width: 30rem; }
footer .yellow .info_wrap h2 { font-family: var(--en-serif); font-size: clamp(2.6rem,5vw,3.8rem); line-height: 1.1; letter-spacing: -0.04em; }
footer .yellow .info_wrap .jp-name { margin-top: 0.6rem; font-size: 1.6rem; font-weight: 700; }
footer .yellow .info_wrap .sentence { margin-top: 3rem; font-size: 1.35rem; line-height: 2; }
footer .yellow .info_wrap .sentence a { text-decoration: underline; }
footer .yellow .info_wrap .google { display: block; margin-top: 2.4rem; padding: 1.4rem 0; width: 34rem; max-width: 100%; text-align: center; border: 2px solid var(--black); border-radius: 3px; font-weight: 700; }
footer .yellow .info_wrap .fsns { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }
footer .yellow .info_wrap .fsns a { padding: 0.6rem 1.4rem; font-size: 1.15rem; font-weight: 700; border: 2px solid var(--black); border-radius: 999px; transition: .2s; }
footer .yellow .info_wrap .fsns a:hover { background: var(--maroon); color: var(--yellow); border-color: var(--maroon); }
footer .yellow .foot-links { flex: 1 1 40rem; display: grid; grid-template-columns: repeat(3, auto); gap: 1.6rem 3.2rem; }
footer .yellow .foot-links .col h4 { font-family: "Bowlby One", var(--ja); font-size: 1.35rem; color: var(--maroon); margin-bottom: 1.2rem; letter-spacing: 0.02em; }
footer .yellow .foot-links .col a { display: block; font-size: 1.22rem; padding: 0.5rem 0; color: var(--ink); }
footer .yellow .foot-links .col a:hover { color: var(--maroon); text-decoration: underline; }
footer .yellow .title_wrap { flex: 1 1 100%; text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
footer .yellow .title_wrap .logo { width: 30rem; max-width: 70%; }
footer .yellow .title_wrap .tagline { margin-top: 2.4rem; font-family: var(--en-serif); font-size: clamp(1.8rem,3vw,2.4rem); }
footer .yellow .title_wrap .fcredit { margin-top: 1.8rem; font-size: 1.1rem; letter-spacing: 0.04em; color: rgba(0,0,0,.5); }
@media only screen and (max-width: 980px) {
  footer .yellow { gap: 3.4rem; padding: 7rem 1.8rem 3rem; }
  footer .yellow .info_wrap { flex: 1 1 100%; min-width: auto; }
  footer .yellow .info_wrap .google { width: 100%; }
  footer .yellow .foot-links { flex: 1 1 100%; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; }
  footer .yellow .title_wrap { padding: 0 0 1rem; align-items: center; text-align: center; }
  footer .yellow .title_wrap .logo { width: 24rem; }
  footer .end { padding: 2.2rem 1.8rem; }
}

/* ===== reveal anim ===== */
[data-reveal] { opacity: 0; transform: translateY(2.4rem); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
[data-reveal].in { opacity: 1; transform: none; }

/* ===== reduced motion / no-js failsafe ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .loading { display: none !important; }
  .commitment .chara_list li { opacity: 1 !important; transform: none !important; }
}
.no-js [data-reveal] { opacity: 1; transform: none; }
.no-js .loading { display: none; }
/* ローダー初回のみゲート：前回6h以内は即非表示（言語/ページ遷移でチラ見せしない） */
html.no-loader .loading { display: none !important; animation: none !important; }

/* ===== FV POPキャッチ（餃子エンタメ・シズル） ===== */
.mv .mv_inner { width: calc(100% - 12rem); margin: 0 auto; padding-top: 2.4rem; text-align: center; }
.mv .mv_inner .logo { width: 30rem; max-width: 70%; margin: 0 auto; }
.mv .mv_inner .logo img { width: 100%; }
.mv .mv_inner .mv_sub { margin-top: 1.6rem; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.14em; color: var(--maroon); }
.mv .mv_inner .mv_catch { margin-top: 0.6rem; font-family: var(--ja); font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 3.5rem); line-height: 1.2; letter-spacing: 0.02em; }
.mv .mv_inner .mv_catch .hl { position: relative; color: var(--red); white-space: nowrap; }
.mv .mv_inner .mv_catch .hl:after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0.08em; height: 0.34em; background: var(--yellow); z-index: -1; transform: rotate(-1.5deg); }
.mv .mv_inner .mv_catch .pop { display: inline-block; transform: rotate(-3deg); color: var(--red); }
.mv .mv_inner .mv_lead { margin-top: 1.4rem; font-size: 1.3rem; line-height: 1.8; }
.mv .mv_inner .mv_badges { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.mv .mv_inner .mv_badges span { padding: 0.5rem 1.2rem; font-size: 1.2rem; font-weight: 700; border: 2px solid var(--black); border-radius: 999px; background: var(--bg); white-space: nowrap; }
.mv .mv_inner .mv_badges span:nth-child(2n) { background: var(--yellow); transform: rotate(-2deg); }
.mv .mv_inner .mv_badges span:nth-child(3n) { background: var(--red); color: var(--bg); transform: rotate(1.5deg); }
@media only screen and (max-width: 980px) {
  .mv .mv_inner { width: calc(100% - 3rem); }
  .mv .mv_inner .logo { width: 60%; }
}

/* ===== 餃子レクチャー（マジうま食べ方・餃子エンタメ） ===== */
.lecture { padding: 9rem 0; background: var(--yellow); position: relative; overflow: hidden; border-top: 2px solid var(--black); }  /* border-bottom撤去：下の quiz 斜めカット罫と競合する水平線を消す */
.lecture .wrap { width: min(110rem, 90%); margin: auto; }
.lecture .head { text-align: center; }
.lecture .head .label { font-family: var(--en-serif); font-size: clamp(2rem,4vw,2.8rem); color: var(--maroon); }
.lecture .head h2 { margin-top: 1rem; font-size: clamp(1.6rem,2.8vw,2rem); font-weight: 700; line-height: 1.4; }
.lecture .head h2 .pop { color: var(--red); display: inline-block; transform: rotate(-2deg); }
.lecture .head .lead { margin-top: 1.2rem; font-size: 1.35rem; font-weight: 700; }
.lecture .steps { margin: 5rem auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.lecture .steps li { position: relative; background: var(--bg); border: 2px solid var(--black); border-radius: 8px; padding: 2.4rem 1.8rem 2rem; text-align: center; }
.lecture .steps li .no { position: absolute; top: -1.6rem; left: -1.2rem; width: 4.4rem; height: 4.4rem; display: flex; align-items: center; justify-content: center; font-family: var(--en-sans); font-weight: 700; font-size: 1.8rem; color: var(--bg); background: var(--red); border: 2px solid var(--black); border-radius: 50%; transform: rotate(-8deg); }
.lecture .steps li .photo { width: 11rem; height: 11rem; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 2px solid var(--black); }
.lecture .steps li .photo img { width: 100%; height: 100%; object-fit: cover; }
.lecture .steps li h3 { margin-top: 1.6rem; font-size: 1.5rem; font-weight: 700; line-height: 1.4; }
.lecture .steps li p { margin-top: 0.8rem; font-size: 1.2rem; line-height: 1.75; }
.lecture .tip { margin: 4rem auto 0; width: fit-content; max-width: 100%; padding: 1.4rem 2.4rem; font-size: 1.3rem; font-weight: 700; background: var(--bg); border: 2px dashed var(--black); border-radius: 999px; text-align: center; }
.lecture .tip .em { color: var(--red); }
@media only screen and (max-width: 980px) {
  .lecture .steps { grid-template-columns: 1fr 1fr; gap: 2.4rem 1.4rem; }
}
@media only screen and (max-width: 520px) {
  .lecture .steps { grid-template-columns: 1fr; }
}

/* ===== エリアSEO（栄×餃子 / 栄×居酒屋） ===== */
.area .seo-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.area .seo-grid .card { background: var(--bg); border: 2px solid var(--black); border-radius: 8px; padding: 2.6rem 2.4rem; }
.area .seo-grid .card h3 { font-size: 1.6rem; font-weight: 700; border-bottom: 2px solid var(--red); padding-bottom: 0.8rem; }
.area .seo-grid .card p { margin-top: 1.4rem; font-size: 1.28rem; line-height: 1.95; }
@media only screen and (max-width: 980px) {
  .area .seo-grid { grid-template-columns: 1fr; }
}

/* ===== 右下固定の“ホクホク餃子”FAB（同方式・SVG+CSS／タップで予約モーダル） ===== */
.gyoza-fab{ position:fixed; right:20px; bottom:calc(22px + env(safe-area-inset-bottom)); width:clamp(78px,8vw,118px); z-index:70; background:none; border:0; padding:0; cursor:pointer; filter:drop-shadow(0 3px 7px rgba(0,0,0,.28)); animation:gyozaBob 2.8s ease-in-out infinite; }
.gyoza-fab .g-svg{ width:100%; height:auto; display:block; overflow:visible; }
.gyoza-fab:hover .g-body{ filter:drop-shadow(0 0 6px var(--yellow)); }
.gyoza-fab .steam path{ fill:none; stroke:#cfccc2; stroke-width:5; stroke-linecap:round; opacity:0; transform-origin:center bottom; animation:gyozaSteam 2.6s ease-in-out infinite; }
.gyoza-fab .steam path:nth-child(2){ animation-delay:.55s; }
.gyoza-fab .steam path:nth-child(3){ animation-delay:1.1s; }
.gyoza-hint{ position:absolute; right:calc(100% + 9px); top:42%; transform:translateY(-50%); white-space:nowrap; background:var(--red); color:#fff; font-weight:700; font-size:1.05rem; letter-spacing:.04em; padding:5px 11px; border-radius:4px; }
.gyoza-hint::after{ content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color:var(--red); border-right:0; }
@keyframes gyozaBob{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-9px) rotate(2deg); } }
@keyframes gyozaSteam{ 0%{ opacity:0; transform:translateY(8px) scaleY(.65); } 28%{ opacity:.9; } 100%{ opacity:0; transform:translateY(-16px) scaleY(1.25); } }
@media (max-width:520px){ .gyoza-hint{ display:none; } .gyoza-fab{ width:84px; right:14px; } }
@media (prefers-reduced-motion: reduce){ .gyoza-fab{ animation:none!important; } .gyoza-fab .steam path{ animation:none!important; opacity:.45; } }

/* 予約モーダル（餃子タップで表示） */
.gmodal[hidden]{ display:none; }
.gmodal{ position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; padding:24px; }
.gmodal .bg{ position:absolute; inset:0; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:gFade .3s ease; }
.gmodal .card{ position:relative; width:100%; max-width:38rem; background:var(--bg); border:2px solid var(--black); border-radius:12px; padding:3.4rem 2.6rem 2.6rem; text-align:center; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); animation:gFade .35s ease; }
.gmodal .card .close{ position:absolute; top:0.8rem; right:1.1rem; font-size:2rem; line-height:1; background:none; border:0; cursor:pointer; color:var(--ink); }
.gmodal .card .em{ font-family:var(--en-serif); font-size:1.8rem; color:var(--maroon); }
.gmodal .card h3{ margin-top:0.4rem; font-size:1.7rem; font-weight:700; line-height:1.4; }
.gmodal .card .sub{ margin-top:0.8rem; font-size:1.2rem; line-height:1.7; }
.gmodal .card .tel{ display:block; margin-top:1.8rem; padding:1.4rem; font-size:1.5rem; font-weight:700; color:var(--bg); background:var(--red); border:2px solid var(--black); border-radius:999px; }
.gmodal .card .form-link{ display:block; margin-top:1rem; padding:1.3rem; font-weight:700; border:2px solid var(--black); border-radius:999px; }
.gmodal .card .num{ display:block; margin-top:1.4rem; font-family:var(--en-sans); font-weight:700; font-size:1.8rem; letter-spacing:.04em; }
@keyframes gFade{ from{ opacity:0; } to{ opacity:1; } }

/* ===== 追加アニメ・ユーティリティ（§10 居酒屋プリセット） ===== */
.shine { position: relative; overflow: hidden; }
.shine::after { content:""; position:absolute; top:0; left:-130%; width:60%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg); transition:left .65s ease; pointer-events:none; }
.shine:hover::after { left:150%; }
.lift { transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s; }
.lift:hover { transform: translateY(-7px); box-shadow: 0 18px 36px -18px rgba(0,0,0,.4); }
[data-parallax] { will-change: transform; }
.grain-overlay { position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ===== 数字で見る（count-up band） ===== */
.stats { background: var(--maroon); padding: 6rem 0; }
.stats .wrap { width: min(108rem, 90%); margin: auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }
.stats .stat { text-align: center; color: var(--bg); }
.stats .stat .num { font-family: var(--en-sans); font-weight: 700; font-size: clamp(2.6rem,5vw,4rem); line-height: 1; color: var(--yellow); }
.stats .stat .num .suf, .stats .stat .num .pre { font-size: 0.5em; }
.stats .stat .lab { margin-top: 1rem; font-size: 1.25rem; font-weight: 700; line-height: 1.5; }
@media only screen and (max-width: 680px){ .stats .wrap { grid-template-columns: 1fr 1fr; gap: 3rem 1.6rem; } }

/* ===== グランドメニュー（タブ・全カテゴリ・実価格） ===== */
.grandmenu { padding: 9rem 0; background: var(--bg); }
.grandmenu .wrap { width: min(104rem, 90%); margin: auto; }
.grandmenu .head { text-align: center; margin-bottom: 3rem; }
.grandmenu .head .label { font-family: var(--en-serif); font-size: clamp(2rem,4vw,2.8rem); color: var(--maroon); }
.grandmenu .head h2 { margin-top: 1rem; font-size: clamp(1.6rem,2.6vw,2rem); font-weight: 700; }
.grandmenu .head p { margin-top: 1rem; font-size: 1.25rem; }
.gm-tabs { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-bottom: 3rem; }
.gm-tabs button { padding: 0.7rem 1.5rem; font-size: 1.2rem; font-weight: 700; border: 2px solid var(--black); border-radius: 999px; background: var(--bg); white-space: nowrap; transition: .2s; }
.gm-tabs button[aria-selected="true"] { color: var(--bg); background: var(--red); }
.gm-panel { display: none; }
.gm-panel.active { display: block; animation: gmFade .4s ease; }
@keyframes gmFade { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.gm-grid { columns: 2; column-gap: 4rem; }
@media only screen and (max-width: 760px){ .gm-grid { columns: 1; } }
.gm-cat { break-inside: avoid; margin-bottom: 2.6rem; }
.gm-cat h3 { font-size: 1.5rem; font-weight: 700; color: var(--maroon); border-left: 4px solid var(--red); padding-left: 0.8rem; margin-bottom: 1rem; }
.gm-row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.6rem 0; border-bottom: 1px dotted rgba(0,0,0,.2); }
.gm-row .nm { font-size: 1.3rem; }
.gm-row .nm .tag { display: inline-block; margin-left: 0.5rem; padding: 0.15rem 0.6rem; font-size: 1rem; font-weight: 700; color: var(--bg); background: var(--red); border-radius: 3px; vertical-align: 0.1em; }
.gm-row .dots { flex: 1; border-bottom: 1px dotted rgba(0,0,0,.3); transform: translateY(-0.3rem); min-width: 1.4rem; }
.gm-row .pr { font-family: var(--en-sans); font-weight: 700; white-space: nowrap; font-size: 1.3rem; }
.gm-note { margin-top: 2rem; font-size: 1.1rem; color: #666; text-align: center; }
/* 税抜き表記の注記（各メニューセクション下部）。セクションの文字色を継承して明/暗どちらの背景でも読める */
.tax-note { margin: 1.6rem auto 0; text-align: center; font-size: 0.92rem; line-height: 1.5; color: inherit; opacity: 0.62; letter-spacing: 0.02em; }
.gm-happy { margin-top: 1.5rem; padding: 2.4rem; background: var(--yellow); border: 2px solid var(--black); border-radius: 8px; }
.gm-happy .ht { font-size: 1.5rem; font-weight: 700; text-align: center; }
.gm-happy .hgrid { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.gm-happy .hgrid span { padding: 0.5rem 1.1rem; font-size: 1.2rem; font-weight: 700; background: var(--bg); border: 2px solid var(--black); border-radius: 999px; }

/* ===== アクセス＋地図 ===== */
.contact .ways { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid rgba(0,0,0,.18); }
.contact .ways li { position: relative; padding-left: 1.6rem; margin-top: 0.6rem; font-size: 1.3rem; line-height: 1.7; }
.contact .ways li::before { content: ""; position: absolute; left: 0; top: 0.7rem; width: 0.7rem; height: 0.7rem; background: var(--red); border-radius: 50%; }

/* ===== 下層ページ：固定ヘッダー分の天地クリアランス（--head-h はJSが実測でセット） ===== */
body.subpage main { padding-top: var(--head-h, 13rem); }
body.subpage .faqpage,
body.subpage .newspage,
body.subpage .colpage,
body.subpage main > .contact { padding-top: 2.6rem !important; }
body.subpage main > .crumbs { padding-top: 2.6rem; }

/* ===== footer（黄色のみ・第二フッターと透かしは廃止） ===== */
footer { position: relative; }
footer .yellow { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce){
  .shine::after, .lift { transition: none !important; }
  [data-parallax] { transform: none !important; }
}

/* ===== カード ホバー浮上（lift） ===== */
.lecture .steps li, .social .reviews blockquote, .area .seo-grid .card, .gm-row { transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s; }
@media (min-width: 981px) {
  .lecture .steps li:hover, .social .reviews blockquote:hover, .area .seo-grid .card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px -18px rgba(0,0,0,.35); }
}
.gm-row:hover { transform: translateX(4px); }

/* ===== 店内・ご利用シーン カルーセル（オート再生＝動画的演出） ===== */
.gallery { padding: 9rem 0; background: var(--bg); overflow: hidden; }
.gallery .head { text-align: center; margin-bottom: 3rem; }
.gallery .head .label { font-family: var(--en-serif); font-size: clamp(2rem,4vw,2.8rem); color: var(--maroon); }
.gallery .head h2 { margin-top: 1rem; font-size: clamp(1.6rem,2.6vw,2rem); font-weight: 700; }
.gallery .head p { margin-top: 1rem; font-size: 1.25rem; }
.gallery .track-wrap { position: relative; width: min(120rem, 94%); margin: auto; }
.gallery .track { display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 1rem; scrollbar-width: none; }
.gallery .track::-webkit-scrollbar { display: none; }
.gallery .slide { flex: 0 0 auto; width: clamp(26rem, 40vw, 46rem); scroll-snap-align: center; }
.gallery .slide .ph { position: relative; aspect-ratio: 4/3; border: 2px solid var(--black); border-radius: 10px; overflow: hidden; }
.gallery .slide .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; }
.gallery .slide .ph:hover img { transform: scale(1.06); }
.gallery .slide .cap { margin-top: 1rem; font-size: 1.2rem; font-weight: 700; text-align: center; }
.gallery .nav { display: flex; justify-content: center; align-items: center; gap: 1.4rem; margin-top: 2rem; }
.gallery .nav button { width: 4.2rem; height: 4.2rem; border: 2px solid var(--black); border-radius: 50%; background: var(--bg); font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: .2s; }
.gallery .nav button:hover { background: var(--red); color: var(--bg); }
.gallery .dots { display: flex; gap: 0.6rem; }
.gallery .dots i { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: rgba(0,0,0,.2); cursor: pointer; transition: .2s; }
.gallery .dots i.on { background: var(--red); transform: scale(1.25); }

/* ===== 席タイプ案内（実情報・アイコン／写真は後差し替えslot） ===== */
.seats { padding: 8rem 0 9rem; background: var(--beige); }
.seats .wrap { width: min(108rem, 90%); margin: auto; }
.seats .head { text-align: center; margin-bottom: 3rem; }
.seats .head .label { font-family: var(--en-serif); font-size: clamp(2rem,4vw,2.6rem); color: var(--maroon); }
.seats .head h2 { margin-top: 1rem; font-size: clamp(1.5rem,2.4vw,2rem); font-weight: 700; }
.seats .grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.6rem; }
.seats .seat { background: var(--bg); border: 2px solid var(--black); border-radius: 10px; padding: 2.4rem 1.6rem; text-align: center; }
.seats .seat .ic { width: 5rem; height: 5rem; margin: 0 auto; color: var(--red); }
.seats .seat .ic svg { width: 100%; height: 100%; }
.seats .seat h3 { margin-top: 1.4rem; font-size: 1.5rem; font-weight: 700; }
.seats .seat p { margin-top: 0.6rem; font-size: 1.2rem; line-height: 1.7; }
.seats .note { margin-top: 2.4rem; text-align: center; font-size: 1.15rem; color: #555; }
@media only screen and (max-width: 760px){ .seats .grid { grid-template-columns: 1fr 1fr; } }

/* ===== 専用餃子 診断ウィザード ===== */
.quiz { padding: 9rem 0; background: var(--red); }
.quiz * { color: var(--bg); }
.quiz .wrap { width: min(72rem, 90%); margin: auto; text-align: center; }
.quiz .label { font-family: var(--en-serif); font-size: clamp(2rem,4vw,2.8rem); }
.quiz h2 { margin-top: 1rem; font-size: clamp(1.6rem,2.6vw,2rem); font-weight: 700; }
.quiz .stage { margin-top: 3.4rem; background: var(--bg); border: 2px solid var(--black); border-radius: 14px; padding: 3.4rem 2.6rem; box-shadow: 0 24px 50px -24px rgba(0,0,0,.55); }
.quiz .stage * { color: var(--ink); }
.quiz .step .q { font-size: 1.6rem; font-weight: 700; }
.quiz .step .prog { margin-bottom: 1.4rem; font-family: var(--en-sans); font-size: 1.2rem; color: var(--maroon); letter-spacing: .1em; }
.quiz .step .opts { margin-top: 2rem; display: grid; gap: 1rem; }
.quiz .step .opts button { padding: 1.4rem 1.6rem; font-size: 1.35rem; font-weight: 700; background: var(--bg); border: 2px solid var(--black); border-radius: 999px; transition: .2s; }
.quiz .step .opts button:hover { background: var(--yellow); transform: translateY(-2px); }
.quiz .result { display: none; }
.quiz .result.show { display: block; animation: gmFade .45s ease; }
.quiz .result .rlabel { font-family: var(--en-sans); font-size: 1.2rem; letter-spacing: .12em; color: var(--maroon); }
.quiz .result .rname { margin-top: 0.6rem; font-size: clamp(1.8rem,3.2vw,2.4rem); font-weight: 700; color: var(--red); }
.quiz .result .rph { width: 18rem; height: 18rem; margin: 1.8rem auto; border-radius: 50%; overflow: hidden; border: 3px solid var(--black); }
.quiz .result .rph img { width: 100%; height: 100%; object-fit: cover; }
.quiz .result .rdesc { font-size: 1.3rem; line-height: 1.9; }
.quiz .result .rprice { margin-top: 1rem; font-family: var(--en-sans); font-weight: 700; font-size: 1.8rem; color: var(--maroon); }
.quiz .ract { margin-top: 2.2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.quiz .ract a, .quiz .ract button { padding: 1.2rem 2.4rem; font-size: 1.3rem; font-weight: 700; border-radius: 999px; border: 2px solid var(--black); }
.quiz .ract .go { color: var(--bg); background: var(--red); }
.quiz .ract .retry { background: var(--bg); }
@media (prefers-reduced-motion: reduce){ .gallery .slide .ph img { transition: none !important; } }

/* ===== 席タイプ＝実写カード化（素材追加につき） ===== */
.seats .seat { padding: 0; overflow: hidden; text-align: left; }
.seats .seat .ph { aspect-ratio: 4/3; overflow: hidden; border-bottom: 2px solid var(--black); }
.seats .seat .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.seats .seat:hover .ph img { transform: scale(1.05); }
.seats .seat .body { padding: 1.6rem 1.6rem 2rem; text-align: center; }
.seats .seat .body h3 { margin-top: 0; }
@media (prefers-reduced-motion: reduce){ .seats .seat .ph img { transition: none !important; } }
/* タッチ端末：縦スクロール中のホバー誤発火(ブルブル)を根絶。特にお席のピン留め横送り中は、
   指の下を通るカードに :hover が次々当たって拡大/浮きが連鎖し激しく揺れる。
   (hover:none)/(pointer:coarse) で「拡大・浮き・影」を無効化し、土台の transition ごと殺す（一瞬の状態切替でもアニメで揺れない）。 */
@media (hover: none), (pointer: coarse){
  .seats .seat .ph img, .gallery .slide .ph img, .osusume .card .ph img,
  .course .plans .plan, .lift, .gm-row, .usecase .card, .usecase .grid .card,
  .osusume .card, .osusume .grid .card, .reading .items .item, .lecture .steps li,
  .social .reviews blockquote, .area .seo-grid .card, .quiz .step .opts button { transition: none !important; }
  .seats .seat:hover .ph img, .gallery .slide .ph:hover img, .osusume .card:hover .ph img,
  .seats .seat:active .ph img, .gallery .slide .ph:active img, .osusume .card:active .ph img { transform: none !important; }
  .course .plans .plan:hover, .lift:hover, .gm-row:hover, .usecase .card:hover,
  .osusume .card:hover, .osusume .grid .card:hover, .usecase .grid .card:hover,
  .reading .items .item:hover, .lecture .steps li:hover,
  .social .reviews blockquote:hover, .area .seo-grid .card:hover,
  .quiz .step .opts button:hover,
  .course .plans .plan:active, .lift:active, .usecase .card:active, .osusume .card:active,
  .osusume .grid .card:active, .usecase .grid .card:active, .reading .items .item:active,
  .area .seo-grid .card:active { transform: none !important; box-shadow: none !important; }
}

/* ===== ゴリゴリPOP仕上げ：ヒーローキャッチ・遊び要素を丸文字POPに（明朝廃止の延長） ===== */
.mv .mv_inner .mv_catch { font-family: "Dela Gothic One", var(--ja); font-weight: 400; }
.lecture .head h2 .pop, .commitment h2 .pop { font-family: var(--impact); letter-spacing: -0.03em; }
.quiz h2 .pop { font-family: var(--impact); letter-spacing: -0.03em; }
.osusume .head h2 .pop { font-family: var(--impact); letter-spacing: -0.03em; }

/* ===== 視認性UP：数字バンド（赤い方）は白文字＋拡大、数字は黄キープ ===== */
.stats * { color: #ffffff; }
.stats .stat .num, .stats .stat .num * { color: var(--yellow); }
.stats .stat .num { font-size: clamp(4rem, 7.4vw, 6rem); letter-spacing: -0.01em; }
.stats .stat .num .suf, .stats .stat .num .pre { font-size: 0.56em; }
.stats .stat .lab { font-size: 1.55rem; line-height: 1.55; }
@media only screen and (max-width: 680px){ .stats .stat .lab { font-size: 1.4rem; } }

/* ヒーローキャッチを拡大（視認性） */
.mv .mv_inner .mv_catch { font-size: clamp(3rem, 7.4vw, 3.95rem); }
.mv .mv_inner .mv_sub { font-size: 1.45rem; }

/* ===== 散りばめ餃子イラスト（強烈パララックス） ===== */
.concept, .stats, .lecture, .grandmenu, .gallery, .seats, .area, .social, .block, .course, .quiz, .usecase, .reading, .osusume { position: relative; overflow: hidden; }
.gyoza-deco { position: absolute; width: 7rem; height: auto; z-index: 0; pointer-events: none; opacity: .85; will-change: transform; filter: drop-shadow(0 0.4rem 0.6rem rgba(0,0,0,.12)); }
.gyoza-deco.sm { width: 5rem; opacity: .7; }
.gyoza-deco.lg { width: 10rem; }
.stats .gyoza-deco, .quiz .gyoza-deco, .menu .gyoza-deco { opacity: .14; }
.gallery .gyoza-deco, .course .gyoza-deco { opacity: .5; }
@media (prefers-reduced-motion: reduce){ .gyoza-deco { display: none; } }
@media only screen and (max-width: 680px){ .gyoza-deco { width: 5rem; } .gyoza-deco.lg { width: 7rem; } }

/* ===== 読みもの（名物解説・AIO向けロングテキスト） ===== */
.reading { padding: 8rem 0; background: var(--bg); }
.reading .wrap { width: min(100rem, 90%); margin: auto; }
.reading .head { text-align: center; margin-bottom: 3rem; }
.reading .head .label { font-family: var(--en-serif); font-size: clamp(2rem,4vw,2.6rem); color: var(--maroon); }
.reading .head h2 { margin-top: 1rem; font-size: clamp(1.5rem,2.4vw,2rem); font-weight: 700; }
.reading .items { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.reading .item { border: 2px solid var(--black); border-radius: 8px; padding: 2.6rem 2.4rem; background: var(--bg); }
.reading .item h3 { font-size: 1.55rem; font-weight: 700; color: var(--maroon); border-bottom: 2px solid var(--red); padding-bottom: 0.8rem; }
.reading .item p { margin-top: 1.2rem; font-size: 1.28rem; line-height: 1.95; }
@media only screen and (max-width: 860px){ .reading .items { grid-template-columns: 1fr; } }

/* ===== 利用シーン別ガイド ===== */
.usecase { padding: 8rem 0; background: var(--beige); }
.usecase .wrap { width: min(108rem, 90%); margin: auto; }
.usecase .head { text-align: center; margin-bottom: 3rem; }
.usecase .head .label { font-family: var(--en-serif); font-size: clamp(2rem,4vw,2.6rem); color: var(--maroon); }
.usecase .head h2 { margin-top: 1rem; font-size: clamp(1.5rem,2.4vw,2rem); font-weight: 700; }
.usecase .head p { margin-top: 1rem; font-size: 1.25rem; }
.usecase .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.usecase .card { background: var(--bg); border: 2px solid var(--black); border-radius: 8px; padding: 2.4rem 2rem; transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s; }
.usecase .card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px -18px rgba(0,0,0,.35); }
.usecase .card h3 { font-size: 1.5rem; font-weight: 700; }
.usecase .card .kw { margin-top: 0.5rem; font-size: 1.05rem; color: var(--red); font-weight: 700; }
.usecase .card p { margin-top: 1rem; font-size: 1.22rem; line-height: 1.85; }
@media only screen and (max-width: 860px){ .usecase .grid { grid-template-columns: 1fr; } }

/* ===== ローディング：白地・中央に3点セット(小)＋周囲を餃子の輪がぐるぐる回る ===== */
.loading { background-color: #fff !important; overflow: hidden; }
.loading .ld-badge { position: relative; width: min(96vw, 46rem); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
/* 回転する餃子の輪（12個を円周に配置＝縁は餃子だけ。輪ごとゆっくりぐるぐる回す） */
.loading .ld-ring { position: absolute; inset: 0; animation: ldSpin 20s linear infinite; }
.loading .ld-gz { position: absolute; top: 50%; left: 50%; width: clamp(4rem, 13.5vw, 6rem); height: auto; --R: min(49vw, 24rem); transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--R) * -1)); filter: drop-shadow(0 0.18rem 0.35rem rgba(0,0,0,.12)); }
@keyframes ldSpin { to { transform: rotate(360deg); } }
/* 中央の3点セット：少し中央に寄せて小さく（輪の内側に収める） */
.loading .ld-inner { position: relative; z-index: 2; width: auto; text-align: center; padding: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.4rem,1.8vw,1rem); }
/* ロゴ：白抜きせず自然色（黒マーク）。静かにフェード＋わずかに上昇 */
.loading .ld-logo { width: clamp(13rem, 42vw, 19rem); opacity: 0; transform: translateY(0.6rem); animation: ldFadeUp 0.8s cubic-bezier(.2,.7,.2,1) 0.1s forwards; }
@keyframes ldFadeUp { to { opacity: 1; transform: translateY(0); } }
/* マスコット：素材が元々ブランド赤なので白抜きフィルタなし＝赤。背中合わせ・小さめ・常時ひょこひょこ */
.loading .ld-mascots { display: flex; align-items: flex-end; justify-content: center; gap: clamp(0.1rem,1vw,0.5rem); width: auto; opacity: 0; animation: ldFadeUp 0.8s ease 0.4s forwards; }
.loading .ld-mascot { width: clamp(5.5rem, 19vw, 8.5rem); height: auto; transform-origin: bottom center; }
.loading .ld-mascot.girl { animation: ldMascotL 3s ease-in-out infinite; }
.loading .ld-mascot.boy  { animation: ldMascotR 3.4s ease-in-out infinite; }
@keyframes ldMascotL { 0%,100%{ transform: translateY(0) rotate(-2deg);} 50%{ transform: translateY(-0.3rem) rotate(2deg);} }
@keyframes ldMascotR { 0%,100%{ transform: translateY(0) rotate(2deg);} 50%{ transform: translateY(-0.3rem) rotate(-2deg);} }
/* キャプション：赤(ブランド赤)・小さめ。書体は FVキャッチと同じ var(--ja) 700 */
.loading .ld-cap { position: relative; margin-top: clamp(0.3rem,1.2vw,0.7rem); font-family: var(--ja); font-weight: 700; font-size: clamp(1.5rem,5.4vw,2.2rem); letter-spacing: 0.06em; line-height: 1.3; color: var(--red); opacity: 0; animation: ldFadeUp 0.8s ease 1.05s forwards; }
.loading .ld-cap .hl { font: inherit; color: inherit; letter-spacing: inherit; }
.loading .ld-cap .hl::after { content: none; }
@media (prefers-reduced-motion: reduce){
  .loading .ld-logo, .loading .ld-cap, .loading .ld-mascots, .loading .ld-mascot { animation: none !important; opacity:1 !important; transform:none !important; }
  .loading .ld-ring { animation: none !important; }
}

/* ===== FV：全画面モーフィング・カルーセル（写真主役・コピーは左に重ねる）＝913参照 ===== */
/* ===== FV：全面餃子写真＋巨大GYOZAワードマーク（シンプル＆モダン） ===== */
.mv { position: relative; min-height: 100svh; display: block; overflow: hidden; background: var(--ink); border-bottom: 2px solid var(--black); }
/* 背景＝30枚の“付箋”タイル：左→右へ時差でめくれ、下の色が覗き、新しい写真が敷かれる */
.mv .mv-hero-src { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mv .mv-deck { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.mv .mv-deck.ready { background: var(--red); }     /* 付箋の下に覗く色 */
.mv .mv-tile { position: absolute; box-sizing: border-box; background-repeat: no-repeat; transform-origin: 50% 0%; backface-visibility: hidden; transform: perspective(720px) rotateX(0deg); transition: transform .62s cubic-bezier(.62,.04,.28,1), filter .62s ease; will-change: transform, filter; }
.mv .mv-deck.peeling .mv-tile { transform: perspective(720px) rotateX(108deg); filter: brightness(.5); }
@media (prefers-reduced-motion: reduce){ .mv .mv-tile { transition: none !important; } }
/* 可読性スクリム：上（ロゴ）と下（キャッチ＋GYOZA）を暗く、中央はクリア */
.mv .mv-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(20,16,14,.62) 0%, rgba(20,16,14,.18) 18%, rgba(20,16,14,0) 40%, rgba(20,16,14,.12) 56%, rgba(20,16,14,.5) 74%, rgba(20,16,14,.82) 92%, rgba(20,16,14,.9) 100%); }
/* 上部：ロゴ（白抜き） */
.mv .mv-logo { position: absolute; z-index: 4; top: clamp(4.5rem, 11vh, 8.5rem); left: 50%; transform: translateX(-50%); width: clamp(20rem, 30vw, 33rem); max-width: 82%; -webkit-filter: brightness(0) invert(1) drop-shadow(0 0.6rem 1.4rem rgba(0,0,0,.55)); filter: brightness(0) invert(1) drop-shadow(0 0.6rem 1.4rem rgba(0,0,0,.55)); }
/* 中央：マスコット2人を白抜き・背中合わせ（女の子=左向き左／男の子=右向き右） */
.mv .mv-mascots { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: flex-end; justify-content: center; gap: clamp(0.2rem, 1vw, 0.9rem); pointer-events: none; }
.mv .mv-mascot { width: clamp(7.5rem, 13vw, 12.5rem); height: auto; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); opacity: 1; }
/* 下部：キャッチ（GYOZAのふりがな的に直上）＋巨大ワードマークを縦積み */
.mv .mv-stack { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(0.4rem, 0.8vw, 1.4rem); display: flex; flex-direction: column; align-items: center; text-align: center; }
.mv .mv-stack .mv_sub { font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 700; letter-spacing: 0.14em; color: #fff; text-shadow: 0 0.2rem 0.9rem rgba(0,0,0,.85); }
.mv .mv-stack .mv_catch { display: block; width: auto; padding: 0; margin: 0.9rem 0 clamp(1rem, 3.2vw, 2.8rem); font-family: var(--ja); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.95rem); line-height: 1.2; letter-spacing: 0.18em; text-indent: 0.18em; color: #fff; text-shadow: 0 0.12rem 0.6rem rgba(0,0,0,.7); }
.mv .mv-wordmark { line-height: 0.8; font-family: "Alfa Slab One", "Anton", var(--en-sans); font-weight: 400; font-size: clamp(5.6rem, 25vw, 25rem); letter-spacing: 0.12em; text-indent: 0.12em; color: #fff; text-shadow: 0 0.4rem 2.6rem rgba(0,0,0,.55); white-space: nowrap; pointer-events: none; }
@media (prefers-reduced-motion: reduce){ .mv .mv-bg { animation: none !important; } }
@media only screen and (max-width: 860px){
  .mv .mv-logo { top: clamp(3.5rem, 8vh, 6rem); width: min(70vw, 28rem); max-width: 78%; }
  .mv .mv-mascot { width: clamp(4.4rem, 17vw, 6.5rem); }
  .mv .mv-stack { bottom: clamp(0.8rem, 2.5vw, 1.6rem); }
  .mv .mv-stack .mv_sub { font-size: clamp(0.9rem, 3.4vw, 1.15rem); }
  .mv .mv-stack .mv_catch { font-size: clamp(1.15rem, 4.2vw, 1.55rem); letter-spacing: 0.14em; text-indent: 0.14em; margin-bottom: clamp(0.9rem, 4.5vw, 1.8rem); }
  .mv .mv-wordmark { font-size: clamp(4.4rem, 22vw, 12rem); letter-spacing: 0.02em; text-indent: 0.02em; }
}

/* ===== お問い合わせの地図（余白削減） ===== */
.contact .map-embed { margin-top: 3rem; border: 2px solid var(--black); border-radius: 8px; overflow: hidden; }
.contact .map-embed iframe { width: 100%; height: 32rem; border: 0; display: block; }

/* ===== ローディング→FV をなめらかに（クロスフェード＋ズーム） ===== */
.loading { animation: none !important; transition: opacity 1.1s ease, transform 1.15s cubic-bezier(.5,0,.2,1), visibility 1.1s; }
/* JS が付ける退場クラス。transition で opacity/scale が滑らかにフェードアウト（visibility は付けない＝カクつき防止。要素は JS が退場後に除去） */
.loading.hide { opacity: 0; transform: scale(1.14); pointer-events: none; }
/* FV側：ロゴ着地＋コピー/ワードマークが現れる */
html.loaded .mv .mv-logo { animation: mvLogoSettle 1.2s cubic-bezier(.2,.85,.3,1.35) both; }
@keyframes mvLogoSettle { from { transform: translateX(-50%) scale(.82); } to { transform: translateX(-50%) scale(1); } }
html.loaded .mv .mv-stack .mv_sub,
html.loaded .mv .mv-stack .mv_catch { animation: mvUp 0.9s ease both; }
html.loaded .mv .mv-stack .mv_sub { animation-delay: .25s; }
html.loaded .mv .mv-stack .mv_catch { animation-delay: .4s; }
html.loaded .mv .mv-wordmark { animation: mvFade 1.2s ease both; animation-delay: .12s; }
html.loaded .mv .mv-mascots { animation: mvFade 1.2s ease both; animation-delay: .5s; }
@keyframes mvUp { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }
@keyframes mvFade { from { opacity: 0; } to { opacity: 1; } }
/* マスコット：登場後の常時アニメ。背中合わせ2体を逆位相・逆方向に「ゆらり」 */
.mv .mv-mascot { transform-origin: bottom center; }
@keyframes mascotBobL { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-0.5rem) rotate(2deg); } }
@keyframes mascotBobR { 0%,100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-0.5rem) rotate(-2deg); } }
html.loaded .mv .mv-mascot.girl { animation: mascotBobL 3s ease-in-out 1.7s infinite; }
html.loaded .mv .mv-mascot.boy  { animation: mascotBobR 3.4s ease-in-out 1.9s infinite; }
@media (prefers-reduced-motion: reduce){ html.loaded .mv * { animation: none !important; } .loading{ transition:none!important; } }

/* ===== 名物・餃子 でかい画像セクション（元FVのビジュアルを独立セクションとして復活） ===== */
.gyoza-feature { position: relative; padding: 7rem 0 8.5rem; background: var(--red); border-bottom: 2px solid var(--black); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gyoza-feature .vertical_text { font-family: var(--ja); font-weight: 700; font-size: clamp(14px, 1.4vw, 18px); letter-spacing: 0.3em; color: var(--bg); }
.gyoza-feature .vertical_text.left { margin-right: 4.5rem; }
.gyoza-feature .vertical_text.right { margin-left: 4.5rem; }
.gyoza-feature .gf-visual { position: relative; width: min(44rem, 56vw); }
.gyoza-feature .gf-label { position: absolute; top: -1.4rem; left: 0; right: 0; margin: auto; width: fit-content; padding: 0.4rem 1.6rem; font-family: "Bowlby One", var(--ja); font-size: clamp(12px, 1.3vw, 16px); letter-spacing: 0.14em; color: var(--red); background: var(--bg); border: 2px solid var(--black); z-index: 3; }
.gyoza-feature .gf-frame { position: relative; aspect-ratio: 1/1; border: 3px solid var(--black); border-radius: 12px; overflow: hidden; }
.gyoza-feature .gf-frame img { width: 100%; height: 100%; object-fit: cover; }
.gyoza-feature .gf-deco { position: absolute; border-radius: 50%; border: 3px solid var(--black); aspect-ratio: 1/1; object-fit: cover; z-index: 4; box-shadow: 0 1rem 1.8rem rgba(0,0,0,.22); width: 13rem; }
.gyoza-feature .gf-deco.drink { right: -5.5rem; bottom: -3rem; animation: sway 5s ease-in-out infinite; }
.gyoza-feature .gf-deco.side { left: -6rem; top: 3rem; width: 14rem; animation: sway 6s ease-in-out infinite reverse; }
@media only screen and (max-width: 860px){
  .gyoza-feature .vertical_text { display: none; }
  .gyoza-feature .gf-visual { width: 78vw; }
  .gyoza-feature .gf-deco.drink { right: -1.5rem; bottom: -4rem; width: 11rem; }
  .gyoza-feature .gf-deco.side { display: none; }
}
@media (prefers-reduced-motion: reduce){ .gyoza-feature .gf-deco { animation: none !important; } }

/* ===== ハッピーアワー開催中バッジ（CTA=餃子FABの上・開催時間のみJSで表示） ===== */
.hh-banner { position: fixed; right: 14px; bottom: 178px; z-index: 71; padding: 1.05rem 1.9rem; font-family: "Bowlby One", var(--ja); font-size: clamp(1.4rem, 1.9vw, 1.75rem); font-weight: 400; color: #fff; background: var(--red); border: 3px solid var(--black); border-radius: 999px; white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.3); animation: hhPulse 1.05s ease-in-out infinite; }
.hh-banner { display: inline-flex; align-items: center; gap: 0.5rem; }
.hh-banner .hh-ico { width: 1.5em; height: 1.5em; flex: none; }
.hh-banner span { color: #fff; }
.hh-banner .em { color: #ffd83d; font-weight: 400; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.hh-banner::after { content: ""; position: absolute; right: 2.8rem; bottom: -11px; border: 9px solid transparent; border-top-color: var(--black); }
.hh-banner::before { content: ""; position: absolute; right: 2.9rem; bottom: -6px; border: 8px solid transparent; border-top-color: var(--red); z-index: 1; }
/* 跳ねる＋揺れる＋拡がる黄色グロー＝強く目立たせる */
@keyframes hhPulse {
  0%,100% { transform: translateY(0) rotate(-2.5deg) scale(1); box-shadow: 5px 5px 0 var(--black), 0 0 0 0 rgba(231,211,27,.75); }
  50%     { transform: translateY(-6px) rotate(2.5deg) scale(1.07); box-shadow: 5px 5px 0 var(--black), 0 0 0 16px rgba(231,211,27,0); }
}
@media only screen and (max-width: 520px){ .hh-banner { bottom: 128px; right: 10px; font-size: 1.3rem; padding: 0.9rem 1.5rem; } }
@media (prefers-reduced-motion: reduce){ .hh-banner { animation: none !important; box-shadow: 5px 5px 0 var(--black); } }

/* ===== おすすめ・人気メニュー（画像付きカード） ===== */
.osusume { padding: 9rem 0; background: var(--bg); position: relative; overflow: hidden; }
.osusume .wrap { width: min(112rem, 90%); margin: auto; }
.osusume .head { text-align: center; margin-bottom: 3.4rem; }
.osusume .head .label { font-family: var(--en-serif); font-size: clamp(2rem,4vw,2.8rem); color: var(--maroon); }
.osusume .head h2 { margin-top: 1rem; font-size: clamp(1.6rem,2.6vw,2rem); font-weight: 700; }
.osusume .head h2 .pop { color: var(--red); }
.osusume .head p { margin-top: 1rem; font-size: 1.25rem; }
.osusume .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.2rem; }
.osusume .card { background: var(--bg); border: 2px solid var(--black); border-radius: 12px; overflow: hidden; transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s; }
.osusume .card:hover { transform: translateY(-7px); box-shadow: 0 20px 38px -18px rgba(0,0,0,.4); }
.osusume .card .ph { position: relative; aspect-ratio: 4/3; overflow: hidden; border-bottom: 2px solid var(--black); }
.osusume .card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.osusume .card:hover .ph img { transform: scale(1.06); }
.osusume .card .badge { position: absolute; top: 1rem; left: 1rem; padding: 0.45rem 1rem; font-family: "Bowlby One", var(--ja); font-size: 1.1rem; color: #fff; background: var(--red); border: 2px solid var(--black); border-radius: 999px; transform: rotate(-3deg); }
.osusume .card .body { padding: 1.8rem 1.8rem 2rem; }
.osusume .card .nm { font-size: 1.6rem; font-weight: 700; color: var(--red); line-height: 1.4; }
.osusume .card .price { margin-top: 0.6rem; font-family: var(--impact); font-size: 1.8rem; color: var(--maroon); }
.osusume .card .price .tax { font-family: var(--ja); font-size: 1rem; font-weight: 400; color: var(--ink); }
.osusume .card .desc { margin-top: 0.9rem; font-size: 1.22rem; line-height: 1.8; }
@media only screen and (max-width: 860px){ .osusume .grid { grid-template-columns: 1fr; } }

/* ===== おすすめ項目を赤文字で強調（他セクション） ===== */
.gm-row:has(.tag) > .nm > span:first-child { color: var(--red); font-weight: 700; }
.gm-cat .gm-row:has(.tag) { background: rgba(186,28,34,.04); }
.area .seo-grid .card h3, .reading .item h3 { color: var(--maroon); }

/* ===== 数字は太いPOPフォントに統一（Hankenのクセを解消） ===== */
.menu .grid li .price .num,
.gm-row .pr,
.course .plans .plan .pprice .num { font-family: var(--impact) !important; font-weight: 400 !important; }
/* statsの数字：書体を Dela Gothic One 一本に統一（数字=欧文/和字=和文 の混在＝バラバラを解消） */
.stats .stat .num, .stats .stat .num * { font-family: var(--impact) !important; font-weight: 400 !important; }
/* 主役の数字(.ct)が global span ルールで極小化していた不具合を修正＝.ct を大、単位(.suf/.pre)を小に */
.stats .stat .num .ct  { font-size: 1em !important; line-height: 1; letter-spacing: -0.01em; }
.stats .stat .num .suf, .stats .stat .num .pre { font-size: 0.5em !important; }

/* ===== コース詳細（折りたたみ）＋食べログ予約リンク ===== */
.course .plans .plan .pcourse { margin-top: 1.4rem; border-top: 1px dashed rgba(0,0,0,.22); padding-top: 1.1rem; }
.course .plans .plan .pcourse summary { cursor: pointer; list-style: none; position: relative; padding-right: 2.2rem; font-size: 1.25rem; font-weight: 700; color: var(--maroon); }
.course .plans .plan .pcourse summary::-webkit-details-marker { display: none; }
.course .plans .plan .pcourse summary:after { content: "＋"; position: absolute; right: 0.2rem; top: 0; color: var(--red); }
.course .plans .plan .pcourse[open] summary:after { content: "−"; }
.course .plans .plan .pcourse ul { margin-top: 1.1rem; display: grid; gap: 0.45rem; }
.course .plans .plan .pcourse li { position: relative; padding-left: 1.5rem; font-size: 1.18rem; line-height: 1.6; }
.course .plans .plan .pcourse li:before { content: ""; position: absolute; left: 0.2rem; top: 0.7rem; width: 0.6rem; height: 0.6rem; background: var(--red); border-radius: 50%; }
.course .plans .plan .pcourse li b { color: var(--red); }
.course .plans .plan .pcourse .note { margin-top: 1rem; font-size: 1.05rem; line-height: 1.6; color: #6b6b6b; }
.course .plans .plan .pbook { display: block; margin-top: 1.4rem; padding: 1.15rem; text-align: center; font-weight: 700; color: #fff; background: var(--maroon); border: 2px solid var(--black); border-radius: 999px; transition: background .2s; }
.course .plans .plan .pbook:hover { background: var(--red); }
.course .plans .plan .pbook .ext { font-size: 0.85em; opacity: .85; }

/* ===== カードのPOP化：反復を崩す（傾き・ハードな色影・色巡回・上下ずらし） ===== */
/* osusume（おすすめ）：画像カードを少し傾けてハードな色影＋上下ずらし */
.osusume .grid .card { box-shadow: 6px 7px 0 var(--black); }
.osusume .grid .card:nth-child(6n+1){ transform: rotate(-1.4deg); }
.osusume .grid .card:nth-child(6n+2){ transform: rotate(1deg) translateY(1.6rem); }
.osusume .grid .card:nth-child(6n+3){ transform: rotate(-0.6deg); }
.osusume .grid .card:nth-child(6n+4){ transform: rotate(1.3deg) translateY(1.2rem); }
.osusume .grid .card:nth-child(6n+5){ transform: rotate(-1deg); }
.osusume .grid .card:nth-child(6n+6){ transform: rotate(0.8deg) translateY(1.4rem); }
.osusume .grid .card:nth-child(3n+2){ box-shadow: 6px 7px 0 var(--red); }
.osusume .grid .card:nth-child(3n+3){ box-shadow: 6px 7px 0 var(--yellow); }
.osusume .grid .card:hover { transform: rotate(0) translateY(-8px) !important; box-shadow: 10px 12px 0 var(--maroon); }
.osusume .grid .card:nth-child(2n) .badge { transform: rotate(4deg); background: var(--maroon); }

/* usecase（利用シーン）：背景色を巡回＋傾き＋ハード影で“貼ったシール”風に */
.usecase .grid .card { box-shadow: 5px 6px 0 var(--black); }
.usecase .grid .card:nth-child(4n+1){ transform: rotate(-1.3deg); background: var(--yellow); }
.usecase .grid .card:nth-child(4n+2){ transform: rotate(1deg); background: var(--bg); }
.usecase .grid .card:nth-child(4n+3){ transform: rotate(-0.8deg); background: #ffefe9; }
.usecase .grid .card:nth-child(4n+4){ transform: rotate(1.2deg); background: var(--bg); }
.usecase .grid .card:hover { transform: rotate(0) translateY(-6px) !important; box-shadow: 8px 10px 0 var(--red); }

/* reading（読みもの）：交互に色影＋わずかに傾ける */
.reading .items .item { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.reading .items .item:nth-child(4n+1){ transform: rotate(-0.8deg); box-shadow: 5px 6px 0 var(--red); }
.reading .items .item:nth-child(4n+2){ transform: rotate(0.8deg); box-shadow: 5px 6px 0 var(--ink); }
.reading .items .item:nth-child(4n+3){ transform: rotate(0.7deg); box-shadow: 5px 6px 0 var(--yellow); }
.reading .items .item:nth-child(4n+4){ transform: rotate(-0.7deg); box-shadow: 5px 6px 0 var(--maroon); }
.reading .items .item:hover { transform: rotate(0) translateY(-5px); }

/* ===== header（Frankie's風：赤帯＋中央ロゴバッジ＋横並びナビ／旧 day_hour/nav_wrap は廃止） ===== */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 0 !important; }
.site-head .head-top { display: flex; align-items: center; justify-content: center; gap: clamp(1rem,3vw,3rem); background: var(--red); padding: clamp(1.3rem,2.3vw,2.3rem) clamp(1.6rem,4vw,4rem); }
.site-head .head-rule { flex: 1 1 auto; max-width: 34vw; height: 2px; background: rgba(255,255,255,.42); }
.site-head .head-badge { flex: none; background: var(--bg); border: 2px solid var(--black); border-radius: 12px; padding: clamp(0.7rem,1.2vw,1.2rem) clamp(1.3rem,2.2vw,2.2rem); box-shadow: 0 0.6rem 1.6rem rgba(0,0,0,.22); }
.site-head .head-badge img { display: block; width: clamp(12rem,18vw,18rem); height: auto; }
.site-head .head-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(1.2rem,2.2vw,2.6rem); background: var(--bg); padding: clamp(0.9rem,1.3vw,1.3rem) clamp(1.6rem,4vw,4rem); border-bottom: 2px solid var(--black); }
.site-head .head-nav a { font-size: clamp(1.15rem,1.25vw,1.35rem); font-weight: 700; letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; transition: color .2s; }
.site-head .head-nav a:hover { color: var(--red); }
.site-head .head-nav .nav-cta { color: #fff; background: var(--red); border: 2px solid var(--black); border-radius: 999px; padding: 0.45rem 1.5rem; }
.site-head .head-nav .nav-cta:hover { color: #fff; background: var(--maroon); }
.site-head .head-nav .nav-lang { font-family: var(--en-sans); letter-spacing: 0.1em; }
/* 切り絵マスコット：メニュー両端で内側を向き、ひょこひょこ揺れる */
.site-head .head-nav .nav-mascot { flex: none; align-self: flex-end; width: auto; height: clamp(3.6rem, 5vw, 5.4rem); pointer-events: none; transform-origin: bottom center; }
.site-head .head-nav .nav-mascot.left { order: -1; margin-right: auto; animation: mascotHop 2.8s ease-in-out infinite; }
.site-head .head-nav .nav-mascot.right { order: 99; margin-left: auto; animation: mascotHop 2.8s ease-in-out infinite; animation-delay: 1.4s; }
@keyframes mascotHop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  28%      { transform: translateY(-0.5rem) rotate(-2.5deg); }
  56%      { transform: translateY(0) rotate(0deg); }
  78%      { transform: translateY(-0.22rem) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce){ .site-head .head-nav .nav-mascot, .site-head .head-mascot { animation: none !important; } }
/* スマホ：ハンバーガー内「ご予約」CTAを全幅＋両端余白＋左右に餃子アイコン */
@media (max-width: 860px){
  .site-head .head-nav .nav-cta{
    display:flex; align-items:center; justify-content:center; gap:0.8em;
    width:auto; margin:0.4rem 1.6rem; box-sizing:border-box;
    padding:1rem 1.5rem; font-size:1.5rem; letter-spacing:0.12em; border-bottom:0;
  }
  .site-head .head-nav .nav-cta::before,
  .site-head .head-nav .nav-cta::after{
    content:""; flex:none; width:1.7em; height:1.1em;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'%3E%3Cpath fill='%23fff' d='M4 17C4 9 11 4 20 4s16 5 16 13c0 3-3 4-7 4H11c-4 0-7-1-7-4z'/%3E%3Cpath fill='none' stroke='%23a01722' stroke-width='2.4' stroke-linecap='round' d='M9 13q4-6 8 0M17 13q4-6 8 0M25 13q3.5-6 7 0'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}
/* ロゴ横マスコット＆ハンバーガーボタンはモバイル専用（PCは非表示） */
.site-head .head-mascot, .site-head .head-toggle { display: none; }
@media only screen and (max-width: 760px){
  .site-head .head-nav .nav-mascot { display: none; }
  .site-head .head-rule { display: none; }
  .site-head .head-top { position: relative; gap: 0.5rem; padding: 0.9rem 1.3rem; justify-content: center; }
  /* ロゴの箱とメニューの箱を同じ大きさ（高さ）に揃える */
  .site-head .head-badge { box-sizing: border-box; height: 6rem; display: flex; align-items: center; justify-content: center; padding: 0 1.1rem; border-radius: 10px; }
  .site-head .head-badge img { width: clamp(9rem,32vw,13rem); }
  /* ロゴ左右のマスコット（内側向き・ひょこひょこ） */
  .site-head .head-mascot { display: block; flex: none; width: auto; height: 6rem; align-self: flex-end; pointer-events: none; transform-origin: bottom center; -webkit-filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0,0,0,.3)); filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
  .site-head .head-mascot.left { animation: mascotHop 2.8s ease-in-out infinite; }
  .site-head .head-mascot.right { animation: mascotHop 2.8s ease-in-out infinite; animation-delay: 1.4s; }
  /* 「メニュー」ハンバーガーボタン（右端固定） */
  .site-head .head-toggle { box-sizing: border-box; height: 6rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.28rem; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: var(--bg); border: 2px solid var(--black); border-radius: 10px; padding: 0 0.9rem; box-shadow: 0 0.3rem 0.8rem rgba(0,0,0,.18); }
  .site-head .head-toggle .ht-bars { display: block; width: 1.5rem; }
  .site-head .head-toggle .ht-bars span { display: block; height: 2px; background: var(--ink); border-radius: 2px; margin: 3px 0; transition: transform .25s, opacity .2s; }
  .site-head .head-toggle .ht-label { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); line-height: 1; }
  .site-head.nav-open .head-toggle .ht-bars span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
  .site-head.nav-open .head-toggle .ht-bars span:nth-child(2){ opacity: 0; }
  .site-head.nav-open .head-toggle .ht-bars span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }
  /* ナビ＝ドロワー（既定は閉。ボタンで開閉） */
  .site-head .head-nav { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; overflow: hidden; max-height: 0; gap: 0; padding: 0; border-bottom: 0; transition: max-height .32s ease; }
  .site-head.nav-open .head-nav { max-height: 80vh; overflow-y: auto; border-bottom: 2px solid var(--black); }
  .site-head .head-nav a { width: 100%; padding: 1.05rem 1.6rem; border-bottom: 1px solid rgba(0,0,0,.08); font-size: 1.3rem; white-space: normal; }
  .site-head .head-nav .nav-cta { margin: 0.9rem 1.6rem 0.4rem; padding: 0.95rem 1.6rem; text-align: center; border-radius: 999px; border-bottom: 2px solid var(--black); }
  .site-head .head-nav .nav-lang { border-bottom: 0; }
}

/* ヘッダー：スクロールで隠す（下スクロール/FV内は非表示・上スクロールで表示） */
.site-head { transition: transform .35s cubic-bezier(.4,0,.2,1); will-change: transform; }
.site-head.head-hidden { transform: translateY(-100%); }

/* =====================================================================
   セクション境界の“きれめ”を変化づけ（直線の反復をやめる）
   ① 斜めカット＝色替わり seam（上の色のくさびを下セクション上端に敷く）
   ② 点線パーフォレーション＝同色クリーム seam（切り取り線あしらい）
   ※ 各セクションは position:relative; overflow:hidden 済み（くさびは内側で非クリップ）
   ===================================================================== */
.stats::before, .quiz::before, .social::before, .seats::before {
  content: ""; position: absolute; top: 0; left: -1px; right: -1px; height: 4.6rem; z-index: 1; pointer-events: none;
}
.stats::before  { background: var(--bg);     -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%); }  /* ＼ クリーム→マルーン */
.quiz::before   { background: var(--yellow); -webkit-clip-path: polygon(0 0, 100% 0, 0 100%); clip-path: polygon(0 0, 100% 0, 0 100%); }       /* ／ 黄→赤 */
.seats::before  { background: var(--bg);     -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%); }  /* ＼ クリーム→ベージュ */
.social::before { background: var(--bg);     -webkit-clip-path: polygon(0 0, 100% 0, 0 100%); clip-path: polygon(0 0, 100% 0, 0 100%); }       /* ／ クリーム→ベージュ */
/* 区切り線も同じ角度に：斜めカットの稜線に沿って黒罫を引く（水平の黒線は引き上げ被覆で消滅） */
.stats::after, .quiz::after, .seats::after, .social::after {
  content: ""; position: absolute; top: 0; left: -1px; right: -1px; height: calc(4.6rem + 6px); z-index: 2; pointer-events: none; background: var(--black);
}
.stats::after, .seats::after  { -webkit-clip-path: polygon(0 0, 100% 4.6rem, 100% calc(4.6rem + 3px), 0 3px); clip-path: polygon(0 0, 100% 4.6rem, 100% calc(4.6rem + 3px), 0 3px); }       /* ＼ */
.quiz::after,  .social::after { -webkit-clip-path: polygon(0 4.6rem, 100% 0, 100% 3px, 0 calc(4.6rem + 3px)); clip-path: polygon(0 4.6rem, 100% 0, 100% 3px, 0 calc(4.6rem + 3px)); }       /* ／ */
/* 斜め分を“既存の seam 位置に食い込ませる”＝余白を増やさず上の直線ボーダーも覆う
   （margin-topで引き上げ→同量をpadding-topで相殺。slant=4.6rem） */
.stats  { margin-top: -4.6rem; padding-top: 10.6rem; }   /* 旧 padding-top 6rem */
.quiz   { margin-top: -4.6rem; padding-top: 13.6rem; }   /* 旧 9rem */
.seats  { margin-top: -4.6rem; padding-top: 12.6rem; }   /* 旧 8rem */
.social { margin-top: -4.6rem; padding-top: 12.6rem; }   /* 旧 8rem */

/* 点線パーフォレーション：同色クリーム seam を“切り取り線”であしらう */
.grandmenu::before, .reading::before, .osusume::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at center, rgba(40,18,10,.5) 2.1px, transparent 2.5px);
  background-size: 22px 12px; background-position: center top; background-repeat: repeat-x;
}

/* ===== レスポンシブ調整(モバイル)：ローダー全画面パラパラ / FVロゴ拡大中央 / キャッチ3行・餃子拡大 / 改行・非表示 / メニューピル2列 / お席横スクロール ===== */
.sp-br { display: none; }
@media only screen and (max-width: 860px){
  /* 改行・非表示ユーティリティ（SP限定） */
  .sp-br { display: inline; }
  .sp-hide { display: none; }

  /* ① ローダー：SPは餃子リングの直径を画面幅ほぼいっぱいに */
  .loading .ld-badge { width: min(98vw, 42rem); }

  /* ② FVロゴ：中央寄せ＋拡大 */
  .mv .mv-copy .mv-logo { width: min(76vw, 34rem); margin-left: auto; margin-right: auto; display: block; }

  /* ③ キャッチ：今夜は、/ 餃子 / にしよ。＋「餃子」をさらに拡大 */
  .mv .mv-copy .mv_catch .hl { font-size: 1.5em; }

  /* FVリード：写真上での視認性を上げる（クリームのハロー＋少し濃く） */
  .mv .mv-copy .mv_lead { color: var(--ink); text-shadow: 0 0 2px rgba(245,244,240,.95), 0 1px 7px rgba(245,244,240,.92), 0 2px 10px rgba(245,244,240,.7); }

  /* コンセプト：下の余白を広げる */
  .concept .wrap { padding-bottom: 12rem; }

  /* ⑥ メニューのカテゴリピル：全幅・2列(50%)・3段／3段目(単独)は左寄せ */
  .gm-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .gm-tabs button { width: 100%; font-size: clamp(1rem, 3.4vw, 1.2rem); padding: 0.7rem 0.6rem; white-space: nowrap; text-align: center; }
  .gm-tabs button:last-child { justify-self: start; width: auto; }

  /* ⑨ お席：セクションをピン留め＝縦スクロールで横にカードが流れる（JSで transform 制御。stickyは祖先overflowで不可のためtransform方式） */
  .seats { padding: 0; }
  .seats .wrap { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow-x: hidden; will-change: transform; padding-top: 2rem; padding-bottom: 2.6rem; }
  .seats .grid { display: flex; flex-wrap: nowrap; grid-template-columns: none; gap: 1.2rem; overflow: visible; will-change: transform; padding: 0 6vw; }
  .seats .grid .seat { flex: 0 0 80%; }
  .seats .note { margin-top: 1.6rem; }

  /* ハッピーアワー価格チップ：全幅・2列(50%)／余り(最後が単独)は左寄せ */
  .gm-happy .hgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .gm-happy .hgrid span { text-align: center; white-space: nowrap; font-size: clamp(1rem, 3.2vw, 1.2rem); padding: 0.55rem 0.5rem; }
  .gm-happy .hgrid span:last-child:nth-child(odd) { justify-self: start; }

  /* コース予約CTA：全幅 */
  .course .cta { width: 100%; }
  .course .cta a { display: block; width: 100%; padding: 1.4rem 1rem; text-align: center; }
}