/*
Theme Name: Minami (実南)
Author: 実南
Description: 北九州市小倉北区・鍛冶町の日本料理店「実南」オリジナルテーマ。
Version: 2.8.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: minami
*/
@keyframes mnFade { from { opacity: 0; transform: translateY(16px) scale(.995); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mnBloom { from { opacity: 0; transform: translateY(14px) scale(.996); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mnBloomImg { from { opacity: 0; transform: translateY(20px) scale(1.012); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mnAppear { from { opacity: 0; } to { opacity: 1; } }
@keyframes mnXfade4 { 0% { opacity: 0; } 4.5% { opacity: 1; } 25% { opacity: 1; } 29.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mnXfade { 0% { opacity: 0; } 6% { opacity: 1; } 33.3% { opacity: 1; } 39.3% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mnZoom { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes mnDrift { from { transform: scale(1.02) translateY(1.5%); } to { transform: scale(1.1) translateY(-1.5%); } }
@keyframes mnImg { from { opacity: 0; transform: translateY(20px) scale(1.015); filter: blur(11px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mnLine { 0% { transform: scaleY(0); transform-origin: top; } 42% { transform: scaleY(1); transform-origin: top; } 58% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes mnSoft { from { opacity: 0; } to { opacity: 1; } }
html { scroll-behavior: smooth; }
body { margin: 0; background: #1B1D19; color: #E7E3D7; font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; }
body:not(.home) .mn-main img { filter: saturate(.86) brightness(.93); }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; transition: color .4s ease, opacity .4s ease, background-color .4s ease, border-color .4s ease; }
a:hover { color: #B08E7E; }
::selection { background: #232620; }
a:focus-visible, button:focus-visible { outline: 1px solid #B08E7E; outline-offset: 4px; }
/* Safari など scroll-driven animation 非対応環境のフォールバック（属性で判定） */
/* 浮かび上がり演出：全ブラウザ共通でJS制御（scroll-driven animation の有無に依存しない） */
[data-bloom] { animation-timeline: auto !important; }
html.mn-js [data-bloom] { animation-play-state: paused !important; }
html.mn-js [data-bloom].mn-in { animation-play-state: running !important; }
[data-bloom][style*="mnDrift"] { animation-duration: 16s !important; animation-iteration-count: infinite !important; animation-direction: alternate !important; animation-fill-mode: both !important; }
/* mn-viewport-fix: 実機での左右余白ズレ対策（root cause fix） */
html, body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; overscroll-behavior-x: none; }
img, video, svg, iframe, table { max-width: 100%; }
@media (max-width: 820px) {
  /* すべてのコンテンツコンテナを共通の padding-inline で管理（margin による位置合わせは使わない） */
  div[style*="width: min("]:not([style*="min-width: min("]):not([style*="position: absolute"]):not([style*="position: fixed"]),
  div[style*="width:min("]:not([style*="min-width:min("]):not([style*="position:absolute"]):not([style*="position:fixed"]),
  form[style*="width: min("], form[style*="width:min("] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  section, footer, header { max-width: 100%; overflow-x: clip; }
  .mn-sea-pc { display: none !important; }
  .mn-sea-mobile { display: block !important; }
}
/* mn-mobile-left */
@media (max-width: 820px) {
}
@media (max-width: 820px) {
  .mn-main > section:first-of-type, section:first-of-type { padding-top: clamp(44px, 9vw, 80px) !important; }
}
@media (max-width: 820px) {
  /* 左右は必ず同じ余白（コンテナの padding-inline のみで管理） */
  div[style*="width: min("]:not([style*="min-width: min("]):not([style*="position: absolute"]):not([style*="position: fixed"]),
  div[style*="width:min("]:not([style*="min-width:min("]):not([style*="position:absolute"]):not([style*="position:fixed"]) {
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 24px !important; padding-right: 24px !important;
  }
  section p, section h1, section h2, section h3, section div, section span, section a, footer p, footer nav, footer div { text-align: left !important; }
  section div[style*="justify-content: center"]:not([style*="position: absolute"]):not([style*="position: fixed"]),
  section div[style*="justify-content:center"]:not([style*="position:absolute"]):not([style*="position:fixed"]),
  section a[style*="display: flex"], section a[style*="display:flex"],
  footer nav { justify-content: flex-start !important; }
  /* 中央寄せにするセクション（導入・店舗案内・予約・お知らせ）とフッター */
  section[data-screen-label="導入"] p, section[data-screen-label="導入"] div, section[data-screen-label="導入"] span,
  section[data-screen-label*="店舗案内"] p, section[data-screen-label*="店舗案内"] h2, section[data-screen-label*="店舗案内"] div, section[data-screen-label*="店舗案内"] span, section[data-screen-label*="店舗案内"] a,
  section[data-screen-label*="店舗情報"] p, section[data-screen-label*="店舗情報"] h2, section[data-screen-label*="店舗情報"] div, section[data-screen-label*="店舗情報"] span, section[data-screen-label*="店舗情報"] a,
  section[data-screen-label*="予約"] p, section[data-screen-label*="予約"] h2, section[data-screen-label*="予約"] div, section[data-screen-label*="予約"] span, section[data-screen-label*="予約"] a, section[data-screen-label*="予約"] label,
  section[data-screen-label*="お知らせ"] p, section[data-screen-label*="お知らせ"] h2, section[data-screen-label*="お知らせ"] div, section[data-screen-label*="お知らせ"] span, section[data-screen-label*="お知らせ"] a,
  footer p, footer div, footer nav, footer span, footer a { text-align: center !important; }
  /* フッターの住所・営業時間とナビは左寄せ */
  footer p[style*="line-height:2.3"], footer p[style*="line-height:2.3"] a, footer nav, footer nav a { text-align: left !important; }
  section[data-screen-label*="店舗案内"] div[style*="justify-content"],
  section[data-screen-label*="店舗情報"] div[style*="justify-content"],
  section[data-screen-label*="予約"] div[style*="justify-content"],
  section[data-screen-label*="お知らせ"] div[style*="justify-content"],
  section[data-screen-label*="お知らせ"] a[style*="display:flex"],
  section[data-screen-label*="お知らせ"] a[style*="display: flex"],
  section[data-screen-label*="お知らせ"] a[style*="display: flex"] { justify-content: center !important; }
  footer nav { justify-content: flex-start !important; }
  /* お知らせの記事行・注記文は左揃え（見出しとボタンは中央のまま） */
  section[data-screen-label*="お知らせ"] a[style*="border-top"],
  section[data-screen-label*="お知らせ"] a[style*="border-top"] span,
  section[data-screen-label*="お知らせ"] div[style*="flex-direction:column"] a,
  section[data-screen-label*="お知らせ"] div[style*="flex-direction:column"] a span { text-align: left !important; justify-content: flex-start !important; }
  section[data-screen-label*="予約"] p[style*="color:#A5A093"],
  section[data-screen-label*="予約"] p[style*="letter-spacing:.06em"] { text-align: left !important; }
  html body footer p[style*="line-height:2.3"],
  html body footer p[style*="line-height:2.3"] a,
  html body footer nav,
  html body footer nav a { text-align: left !important; }
  /* 構造セレクタで確実に左寄せ（Reactの style 出力に依存しない） */
  footer p:nth-of-type(3), footer p:nth-of-type(3) a,
  footer nav, footer nav a { text-align: left !important; justify-content: flex-start !important; }
  section[data-screen-label*="店舗案内"] > div > div[style] > p:last-child,
  section[data-screen-label*="店舗案内"] > div > p:last-child,
  section[data-screen-label*="予約"] > div > p:last-child { text-align: left !important; }
  /* 実南についての導入本文は左寄せ */
  section[data-screen-label="導入"] p[style*="max-width"] { text-align: left !important; }
  /* 店舗情報の項目リストは左寄せ */
  section[data-screen-label*="店舗情報"] div[style*="border-top"],
  section[data-screen-label*="店舗情報"] div[style*="border-top"] p,
  section[data-screen-label*="店舗案内"] div[style*="border-top"],
  section[data-screen-label*="店舗案内"] div[style*="border-top"] p,
  section[data-screen-label*="店舗案内"] div[style*="border-top"] span,
  section[data-screen-label*="店舗案内"] div[style*="border-top"] a { text-align: left !important; }
  /* フォーム入力欄は左揃えのまま */
  section[data-screen-label*="予約"] input, section[data-screen-label*="予約"] select, section[data-screen-label*="予約"] textarea { text-align: left !important; }
  /* 中途半端な改行はやめて続けて流す（住所・営業時間・箇条書きなど構造的な改行は維持） */
  section p br { display: none; }
  section div[style*="border-top"] p br,
  section div[style*="border-bottom"] p br,
  section div[style*="border-top"] span br,
  footer p br { display: revert; }
  /* 縦書き見出しは必ず2行に収める */
  section h1[style*="vertical-rl"] { font-size: min(22px, 3svh) !important; }
  section p[style*="vertical-rl"] { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *:not([data-xfade]):not([data-bloom]), *::before, *::after { animation-name: mnSoft !important; animation-duration: 1s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; } [data-bloom] { animation-name: mnSoft !important; animation-duration: 1.1s !important; } [data-xfade] { animation-name: mnXfade !important; animation-play-state: running !important; } }

body.home { background: #191919; color: #F2EFE7; }
body.home ::selection { background: #2C2F29; }
.mn-header{position:relative;z-index:60;background:transparent;color:#E7E3D7;border-bottom:1px solid transparent}
body.home .mn-header{position:absolute;top:0;left:0;right:0;color:#F2EFE7}
.mn-header-in{width:100%;max-width:100%;margin:0;padding:clamp(40px,5vw,70px) clamp(20px,2.6vw,40px) 0;display:flex;align-items:flex-start;justify-content:flex-end;height:auto}
.mn-logo{display:none}
.mn-logo-sub{display:none}
.mn-nav{display:none}
.mn-menu-btn{display:flex;flex-direction:column;gap:7px;background:none;border:none;color:inherit;cursor:pointer;padding:12px 2px;margin-top:4px}
.mn-menu-lines{display:contents}
.mn-menu-lines span{display:block;width:30px;height:1px;background:currentColor}
.mn-menu-label{display:none}
.mn-floating-logo{position:absolute;top:25vh;left:clamp(20px,3.4vw,56px);z-index:55;display:block}
.mn-floating-logo:hover{opacity:.7}
.mn-floating-logo img{display:block;width:auto;height:clamp(110px,12.5vw,180px)}
.mn-overlay{position:fixed;inset:0;z-index:80;background:rgba(20,22,19,.985);display:none;flex-direction:column;padding:0 24px;overflow-y:auto}
.mn-overlay.is-open{display:flex;animation:mnAppear .5s ease both}
.mn-onav-link{color:#E7E3D7;white-space:nowrap}
.mn-onav-link:hover{color:#B08E7E}
.mn-otel{white-space:nowrap}
.mn-otel:hover{color:#B08E7E !important}
.mn-row:hover{color:#B08E7E !important}
[data-mnh="mnhbk"]:hover{color:#B08E7E !important;border-color:#B08E7E !important}
.mn-content p{margin:0 0 24px;font-size:14px;line-height:2.55;letter-spacing:.08em}
.mn-content h2,.mn-content h3{font-family:'Yu Mincho','YuMincho','Hiragino Mincho ProN','Hiragino Mincho Pro','Noto Serif JP',serif;font-weight:400;letter-spacing:.18em;line-height:2.2;margin:44px 0 20px}
.mn-content img{border-radius:2px;margin:28px 0}
.mn-content a{border-bottom:1px solid rgba(229,225,213,.3);padding-bottom:1px}
.mn-hero-sp{display:none !important}
@media (max-width:820px){
  .mn-crab-pc, .mn-sea-pc, .mn-hero-pc { display: none !important; }
  .mn-crab-mobile, .mn-sea-mobile { display: block !important; }
  .mn-hero-sp { display: block !important; object-fit: cover !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
  .mn-floating-logo { top: 12vh !important; left: 12px !important; }
  .mn-floating-logo img { height: clamp(100px, 28vw, 140px) !important; }
}
[data-mnh="mnh1"]:hover{opacity:.7 !important}
[data-mnh="mnh2"]:hover{color:#B08E7E !important;border-color:#B08E7E !important}
[data-mnh="mnh3"]:hover{opacity:1 !important}
[data-mnh="mnh4"]:hover{color:#B08E7E !important}