/*
Theme Name: ふぐ海鮮料理 あぐり
Theme URI: https://hugu-aguri.com/
Author: Aguri
Description: 大阪・北田辺「ふぐ海鮮料理 あぐり」公式サイト用テーマ。墨×金の和モダン。TOP/あぐりについて/お品書き/店舗情報/WEB予約 の5ページ構成。
Version: 1.0.0
License: GPL v2 or later
Text Domain: hugu-aguri
*/

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0f1115; color: #e8e2d5; font-family: 'Zen Kaku Gothic New', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* ---- keyframes ---- */
@keyframes xfadeA { 0%, 44% { opacity: 1; } 56%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes xfadeB { 0%, 44% { opacity: 0; } 56%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes slowzoom { 0% { transform: scale(1); } 100% { transform: scale(1.09); } }
@keyframes bob { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(7px); opacity: 1; } }
@keyframes capA { 0%, 44% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes capB { 0%, 44% { opacity: 0; } 56%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* ---- FAQ (details) ---- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }

/* ---- Back to top ---- */
.to-top { position: fixed; bottom: 24px; right: 24px; z-index: 55; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20,24,31,.92); border: 1px solid #c9a45e; color: #c9a45e; text-decoration: none; font-size: 19px; box-shadow: 0 4px 16px rgba(0,0,0,.45); }
@media (max-width: 820px) { .to-top { right: 98px; bottom: 22px; width: 60px; height: 60px; } }

/* ---- Navigation defaults ---- */
.desk-nav { display: flex; }
.m-reserve, .m-burger, .m-menu { display: none; }
#navtoggle { display: none; }
#navtoggle:checked ~ .m-menu { display: flex !important; }
#navtoggle:checked ~ .m-burger .mi-open { display: none; }
#navtoggle:checked ~ .m-burger .mi-close { display: inline !important; }
.m-menu a:hover { color: #c9a45e !important; }

/* ---- Mobile-only helper ---- */
.m-only { display: none; }

@media (max-width: 820px) {
  h1 { font-size: 40px !important; }
  h2 { font-size: 27px !important; }
  body.page-top #top h1 { font-size: 46px !important; line-height: 1.25 !important; }
  .desk-nav { display: none !important; }
  .brand-sub { display: none !important; }
  .m-reserve { display: inline-flex !important; }
  .m-burger { display: flex !important; }
}
@media (max-width: 760px) {
  .m-only { display: inline !important; }
  .m-himono { padding-left: 22px !important; padding-right: 22px !important; }
  .m-himono-sec { padding-left: 22px !important; padding-right: 22px !important; }
  .m-quote { font-size: 24px !important; }
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 340px"],
  [style*="grid-template-columns: 360px"],
  [style*="grid-template-columns: 300px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(3, 1fr) !important; }
  section, footer { padding-left: 22px !important; padding-right: 22px !important; }
}