*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #fcfcfc;
  --ink:       #3a3a3a;
  --ink-mid:   #5a5147;
  --ink-faint: #9a8e83;
  --gold:      #C8A55A;
  --gold-dark: #8E5D1C;
  --dark:      #110e0b;
  --cream:     #F8F6F4;
  --font:      'Zen Old Mincho', serif;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.7; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold); }
a{ text-decoration: none; color: var(--gold); }
/*** ul ***/
ul.text_list {
  list-style: none;
  margin: .8rem 0;
}
ul.text_list li {
  margin-left: 2rem;
}
ul.text_list li::before {
  content: '';
  display: inline-block;
  position: relative;
  left: -0.8rem;
  top: -0.2rem;
  width: .3rem;
  height: .3rem;
  margin-left: -0.6rem;
  border-radius: 25%;
  background: #aaa;
}
/* ════════════════════════════
   BTN
════════════════════════════ */
.link-line {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  cursor: pointer;
  transition: border-color .3s;
}
.link-line:hover { border-color: var(--gold); }
.link-line span:first-child {
  font-size: 16px; letter-spacing: .1em; color: var(--ink);
}
.link-arrow { font-size: 18px; color: var(--ink); transition: transform .3s; }
.link-line:hover .link-arrow { transform: translateX(4px); }

.btn-crimson {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 16px;
  background: #6B1A1A;
  color: #F5ECD7;
  font-size: clamp(16px, 2.5vw, 20px); letter-spacing: .12em;
  padding: 18px 32px;
  border: none; cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(107, 26, 26, 0.35), 0 2px 4px rgba(0,0,0,0.2);
  transition: background .3s, box-shadow .3s, transform .2s;
  text-decoration: none;
  width: 100%;
}
.btn-crimson:hover {
  background: #8a2222;
  box-shadow: 0 6px 18px rgba(107, 26, 26, 0.45), 0 3px 6px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}
.btn-crimson:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(107, 26, 26, 0.3);
}
.btn-crimson:hover .link-arrow { transform: translateX(4px); }
.btn-crimson .link-arrow { color: #F5ECD7; font-size: 18px; transition: transform .3s; }

/* ════════════════════════════
   HEADER
════════════════════════════ */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2vw 4vw;
  background: transparent;
  transition: background .4s, padding .4s;
  pointer-events: none;
}
#header.visible {
  background: transparent;
  padding: 2vw 4vw;
  pointer-events: all;
}
#header.on-hero { pointer-events: all; }
.header-logo {
  color: #fff;
  font-size: 18px;
  letter-spacing: .12em;
  font-weight: 400;
  text-decoration: none;
  opacity: .92;
  transition: color .4s;
}
#header.visible .header-logo { color: #222; opacity: 1; }
.header-right { display: flex; align-items: center; gap: 24px; }
.header-tel {
  display: none;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  letter-spacing: .06em;
  transition: color .4s;
}
#header.visible .header-tel { color: #222; }
.hamburger {
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; padding: 12px;
}
.hamburger span {
  display: block; width: 28px; height: 1px;
  background: rgba(255,255,255,.85);
  transition: transform .3s, opacity .3s, background .4s;
}
#header.visible .hamburger { background-color: transparent; border-radius: 1px; }
#header.visible .hamburger span { background: #3a3a3a; }

/* ════════════════════════════
   NAV OVERLAY
════════════════════════════ */
#nav-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex;
  opacity: 0; pointer-events: none;
  transition: opacity .4s;
}
.nav-bg-left { display: none; cursor: pointer; }
.nav-panel {
  width: 100%;
  background: rgba(60,58,54,.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 8% 60px 10%;
  gap: 32px; position: relative;
}
/* wp_nav_menu() が出力する <li> のリセット */
.nav-panel li { list-style: none; }
#nav-overlay.open { opacity: 1; pointer-events: all; }
#nav-overlay a {
  color: rgba(255,255,255,.85);
  font-size: 20px; letter-spacing: .2em;
  text-decoration: none; position: relative;
  padding-bottom: 6px; display: inline-block;
  transition: color .3s;
}
#nav-overlay a::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 100%;
  height: 1px; background: var(--cream);
  transition: right .35s ease;
}
#nav-overlay a:hover { color: #fff; }
#nav-overlay a:hover::after { right: 0; }
#nav-overlay a.current { color: #fff; }
#nav-overlay a.current::after { right: 0; }
.nav-close {
  position: absolute; top: 24px; right: 32px;
  color: rgba(255,255,255,.5); font-size: 22px;
  cursor: pointer; transition: color .3s; font-family: var(--font);
}
.nav-close:hover { color: #fff; }

/* ════════════════════════════
   FOOTER
════════════════════════════ */
#footer { background: var(--dark); color: #fff; }
.footer-top {
  grid-template-columns: 1fr;
  padding: 48px 20px 60px;
  gap: 0; display: grid;
}
.footer-top > div:first-child { display: none; }
.footer-contact-label {
  font-size: 15px;
  color: rgba(255,255,255,.4); letter-spacing: .15em;
  margin-bottom: 12px;
}
.footer-tel {
  font-size: 16px;
  letter-spacing: .06em;
  margin-bottom: 16px; font-weight: 400;
}
.footer-tel a{
  color: rgba(255,255,255,.85); 
}
.footer-form-link {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding-bottom: 10px; width: 100%; cursor: pointer;
  transition: border-color .3s;
}
.footer-form-link:hover { border-color: var(--gold); }
.footer-form-link span:first-child {
  font-size: 24px; color: rgba(255,255,255,.7); letter-spacing: .08em;
}
.footer-form-arrow { font-size: 18px; color: rgba(255,255,255,.6); }
.footer-bottom {
  grid-template-columns: 1fr; padding: 0 20px 36px;
  gap: 32px; min-height: auto; display: grid;
}
.footer-logo-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.footer-catch { color: rgba(255,255,255,.5); letter-spacing: .06em; }
.footer-brand {
  font-size: 32px; font-weight: 400;
   letter-spacing: .06em; line-height: 1;
}
.footer-brand a{
  color: rgba(255,255,255,.88);
}
.footer-nav-col {
  flex-direction: column; align-items: flex-start;
  gap: 20px; height: auto;
  display: flex; justify-content: space-between; padding-top: 0;
}
.footer-nav { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.footer-nav li { list-style: none; }
.footer-nav a {
  font-size: 16px; color: rgba(255,255,255,.65); letter-spacing: .08em;
  text-decoration: none; transition: color .3s;
}
.footer-nav a:hover { color: var(--gold); }
.footer-meta {
  flex-direction: row; align-items: center;
  align-self: stretch; justify-content: space-between;
  gap: 16px; display: flex;
}
.footer-privacy a {
  font-size: 12px; color: rgba(255,255,255,.3); letter-spacing: .06em;
  cursor: pointer; transition: color .3s;
}
.footer-privacy:hover { color: rgba(255,255,255,.6); }
.footer-copy { font-size: 12px; color: rgba(255,255,255,.25); letter-spacing: .05em; }

/* ════════════════════════════
   MARQUEE SLIDER
════════════════════════════ */
#about-marquee {
  overflow: hidden;
  background: var(--cream);
  padding: 0;
}
.page-about #about-marquee { padding: 0 0 80px; }
.marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee 120s linear infinite;
}
.marquee-item {
  flex-shrink: 0;
  width: 72vw;
  max-width: 420px;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.marquee-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ════════════════════════════
   FADE-IN
════════════════════════════ */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease, transform .9s ease;
}
.fade-in.is-visible { opacity: 1; transform: translateY(0); }

/* ════════════════════════════
   KEYFRAMES
════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
@media (min-width: 768px) {
  #header { padding: 18px 24px; }
  #header.visible { padding: 8px 24px; }
  .header-tel { display: block; }
  .nav-bg-left { display: block; flex: 1; }
  .nav-panel { width: 50%; }
  .footer-top { grid-template-columns: 1fr 1fr; padding: 60px 32px 32px; gap: unset; }
  .footer-top > div:first-child { display: unset; }
  .footer-bottom { grid-template-columns: 1fr 1fr; padding: 0 32px 40px; gap: unset; min-height: 220px; }
  .footer-brand { font-size: 36px; }
  .footer-nav-col { flex-direction: row; align-items: flex-end; gap: unset; height: 172px; }
  .footer-meta { flex-direction: column; align-items: flex-end; align-self: flex-end; justify-content: unset; gap: 8px; }
  .marquee-item { width: 44vw; }
  .page-about #about-marquee { padding: 0 0 100px; }
}

@media (min-width: 1025px) {
  #header { padding: 22px 40px; }
  #header.visible { padding: 8px 36px; }
  .nav-bg-left { flex: 1; display: block; }
  .nav-panel { width: 50%; }
  .footer-top { grid-template-columns: 1fr 1fr; padding: 120px 80px 60px; }
  .footer-bottom { grid-template-columns: 1fr 1fr; padding: 0 80px 80px; min-height: 220px; }
  .footer-brand { font-size: 44px; }
  .marquee-item { width: 28vw; max-width: 480px; }
  .page-about #about-marquee { padding: 0 0 120px; }
}