:root {
  
      --paper:#f4f0e8;
      --paper2:#ebe4d7;
      --white:#fffaf2;
      --ink:#2e332d;
      --muted:#585b52;
      --green:#22402b;
      --green2:#476542;
      --line:#0b8043;
      --gold:#b79a6a;
      --border:rgba(46,51,45,.16);
      --shadow:0 30px 80px rgba(34,64,43,.12);
      --serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
      --sans:"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
    }
    * {
  box-sizing:border-box}
    html {
  scroll-behavior:smooth}
    body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:2;
  letter-spacing:.08em;
  -webkit-font-smoothing:antialiased}
    a {
  color:inherit;
  text-decoration:none}
 img {
  max-width:100%;
  display:block}
    .serif {
  font-family:var(--serif);
  font-weight:500}
    .container {
  width:min(1180px,calc(100% - 56px));
  margin-inline:auto}
    .narrow {
  width:min(850px,calc(100% - 56px));
  margin-inline:auto}
    .wide {
  width:min(1440px,calc(100% - 48px));
  margin-inline:auto}
    .section {
  padding:112px 0}
.section--white {
  background:var(--white)}
.section--soft {
  background:var(--paper2)}
    .kicker {
  margin:0 0 22px;
  color:var(--green2);
  font-size:12px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase}
    .title {
  margin:0;
  font-family:var(--serif);
  font-size:clamp(34px,5vw,68px);
  line-height:1.42;
  letter-spacing:.12em;
  font-weight:500}
    .lead {
  margin:34px 0 0;
  color:var(--muted);
  font-size:clamp(16px,1.6vw,20px);
  line-height:2.35}
.small {
  color:var(--muted);
  font-size:13px;
  line-height:2}
    .btns {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:42px}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:224px;
  padding:15px 28px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.12em;
  transition:.25s}
.btn:hover {
  transform:translateY(-2px)}
    .btn-primary {
  background:var(--green);
  color:#fff;
  box-shadow:0 15px 34px rgba(34,64,43,.18)}
.btn-line {
  background:var(--line);
  color:#fff;
  box-shadow:0 15px 34px rgba(6,199,85,.18)}
.btn-outline {
  border:1px solid var(--green);
  color:var(--green);
  background:rgba(255,250,242,.58)}
    .header {
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  background:rgba(244,240,232,.88);
  border-bottom:1px solid rgba(46,51,45,.12);
  backdrop-filter:blur(16px)}
    .header-inner {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px}
.logo {
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.24em;
  line-height:1.1}
.logo span {
  display:block;
  margin-top:9px;
  font-family:var(--sans);
  font-size:10px;
  color:var(--muted);
  letter-spacing:.32em}
.nav {
  display:flex;
  align-items:center;
  gap:26px;
  font-size:13px;
  color:#565a53}
.nav a {
  position:relative}
.nav a:hover {
  color:var(--green)}
.nav a::after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-7px;
  height:1px;
  background:var(--gold);
  transition:.25s}
.nav a:hover::after {
  right:0}
.reservation-link {
  font-weight:800;
  color:var(--green)!important}
    .side-reserve {
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:55;
  writing-mode:vertical-rl;
  background:var(--green);
  color:#fff;
  padding:28px 13px;
  border-radius:18px 0 0 18px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.22em;
  box-shadow:var(--shadow)}
    .hero {
  min-height:100vh;
  padding-top:82px;
  position:relative;
  display:grid;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(244,240,232,.96) 0%,rgba(244,240,232,.82) 45%,rgba(244,240,232,.22) 100%),image-set(url('../images/hero-yosa.webp') type('image/webp'),url('../images/hero-yosa.jpg') type('image/jpeg')) center right/cover no-repeat}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 80% 30%,rgba(255,250,242,.32),transparent 26%),linear-gradient(180deg,transparent,rgba(34,64,43,.08));
  pointer-events:none}
.hero-copy {
  position:relative;
  z-index:1;
  max-width:760px;
  padding:105px 0}
.hero-catch {
  margin:0 0 22px;
  color:var(--green2);
  font-size:14px;
  font-weight:800;
  letter-spacing:.32em;
  text-transform:uppercase}
.hero-title {
  margin:0;
  font-family:var(--serif);
  font-size:clamp(48px,7.5vw,104px);
  line-height:1.22;
  letter-spacing:.12em;
  font-weight:500}
.hero-sub {
  margin:36px 0 0;
  color:#4f564e;
  font-size:clamp(17px,1.8vw,22px);
  line-height:2.35}
.scroll {
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  z-index:2;
  color:var(--green);
  font-size:11px;
  letter-spacing:.24em}
.scroll::after {
  content:"";
  display:block;
  width:1px;
  height:54px;
  background:var(--green);
  margin:14px auto 0;
  opacity:.55}
    .greeting {
  display:grid;
  grid-template-columns:1fr .86fr;
  gap:76px;
  align-items:center}
.photo-card {
  border-radius:0;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--paper2);
  min-height:0}
.photo-card img {
  width:100%;
  height:auto;
  display:block;
  object-fit:contain}
.vertical-note {
  padding:40px;
  border-left:1px solid var(--gold);
  background:rgba(255,250,242,.56);
  color:var(--muted);
  margin-top:36px}
    .identity {
  background:var(--green);
  color:#fff}
.identity .kicker {
  color:#d9c49a}
.identity .lead {
  color:rgba(255,255,255,.78)}
.identity-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center}
.mark-box {
  border:1px solid rgba(255,255,255,.22);
  padding:48px;
  min-height:380px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.05)}
.kamuy-mark {
  width:230px;
  height:230px;
  border:1px solid rgba(217,196,154,.62);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--serif);
  font-size:38px;
  letter-spacing:.22em;
  color:#d9c49a;
  text-align:center}
.kamuy-mark span {
  display:block;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.3em;
  margin-top:10px;
  color:rgba(255,255,255,.62)}
    .check-list {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px 18px;
  list-style:none;
  padding:0;
  margin:42px 0 0}
.check-list li {
  position:relative;
  padding:19px 22px 19px 50px;
  background:rgba(255,250,242,.78);
  border:1px solid var(--border);
  color:var(--muted)}
.check-list li::before {
  content:"＋";
  position:absolute;
  left:22px;
  color:var(--green2);
  font-weight:800}
    .menu-head {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:end;
  margin-bottom:46px}
.menu-head .lead {
  max-width:640px;
  margin:0}
.menu-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--border);
  border-left:1px solid var(--border)}
.menu-item {
  padding:38px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(255,250,242,.64);
  transition:.25s}
.menu-item:hover {
  background:#fff;
  transform:translateY(-3px);
  box-shadow:0 18px 50px rgba(34,64,43,.08)}
.menu-badge {
  display:inline-block;
  margin-bottom:18px;
  color:var(--green2);
  font-size:12px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase}
.menu-item h3 {
  margin:0 0 10px;
  font-family:var(--serif);
  font-size:clamp(24px,2.3vw,36px);
  line-height:1.45;
  letter-spacing:.1em}
.menu-time {
  margin:0;
  color:var(--green2);
  font-weight:800}
.price {
  margin:16px 0 18px;
  font-size:28px;
  font-weight:900;
  color:var(--green)}
.menu-item ul {
  margin:20px 0 0;
  padding-left:1.2em;
  color:var(--muted);
  font-size:14px}
    .gallery {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:48px}
.gallery figure {
  margin:0;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--paper2)}
.gallery img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.85)}
    .line-section {
  background:linear-gradient(90deg,rgba(34,64,43,.92),rgba(34,64,43,.62)),image-set(url('../images/forest.webp') type('image/webp'),url('../images/forest.jpg') type('image/jpeg')) center/cover no-repeat;
  color:#fff}
.line-section .kicker,.line-section .lead,.line-section .small {
  color:rgba(255,255,255,.82)}
.line-box {
  margin-top:44px;
  padding:36px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(9px)}
.line-flow {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:28px;
  background:rgba(255,255,255,.22)}
.line-flow div {
  background:rgba(29,44,30,.88);
  padding:24px 18px;
  text-align:center}
.line-flow strong {
  display:block;
  font-size:22px;
  color:#d9c49a}
.line-flow span {
  font-size:14px}
    .flow-list {
  margin-top:46px;
  display:grid;
  gap:0;
  border-top:1px solid var(--border)}
.flow-item {
  display:grid;
  grid-template-columns:150px 1fr;
  gap:28px;
  padding:28px 0;
  border-bottom:1px solid var(--border)}
.step {
  color:var(--green2);
  font-weight:900;
  letter-spacing:.18em}
.flow-item h3 {
  margin:0 0 8px;
  font-size:22px}
.flow-item p {
  margin:0;
  color:var(--muted)}
    details {
  border-top:1px solid var(--border);
  padding:24px 0}
details:last-child {
  border-bottom:1px solid var(--border)}
summary {
  cursor:pointer;
  font-weight:900;
  color:var(--green)}
details p {
  margin:14px 0 0;
  color:var(--muted)}
    .access-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:stretch;
  margin-top:46px}
.access-card {
  padding:42px;
  background:rgba(255,250,242,.72);
  border:1px solid var(--border);
  box-shadow:var(--shadow)}
.access-card dl {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:14px 20px;
  margin:0}
.access-card dt {
  font-weight:900;
  color:var(--green)}
.access-card dd {
  margin:0;
  color:var(--muted)}
.map-visual {
  min-height:420px;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  background:linear-gradient(rgba(34,64,43,.52),rgba(34,64,43,.52)),image-set(url('../images/contact.webp') type('image/webp'),url('../images/contact.jpg') type('image/jpeg')) center/cover no-repeat}
.map-visual strong {
  font-family:var(--serif);
  font-size:clamp(24px,4.5vw,34px);
  letter-spacing:.18em;
  overflow-wrap:anywhere}
.map-visual span {
  display:block;
  margin-top:18px;
  font-size:13px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.82)}
    .feature-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:48px}
.feature-card {
  padding:34px 28px;
  background:rgba(255,250,242,.72);
  border:1px solid var(--border);
  border-radius:18px}
.feature-num {
  display:block;
  margin-bottom:18px;
  color:var(--green2);
  font-family:var(--serif);
  font-size:28px;
  letter-spacing:.16em}
.feature-card h3 {
  margin:0 0 12px;
  font-family:var(--serif);
  font-size:22px;
  line-height:1.6;
  letter-spacing:.1em}
.feature-card p {
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:2}
.fixed-lines .line {
  display:block;
  white-space:nowrap}
.feature-card--wide-title h3 {
  font-size:20px;
  letter-spacing:.06em}
    .voice-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:44px}
.voice-card {
  padding:30px;
  background:rgba(255,250,242,.78);
  border:1px solid var(--border);
  border-radius:18px}
.voice-card h3 {
  margin:0 0 14px;
  color:var(--green);
  font-size:17px}
.voice-card p {
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:2}
.notice {
  margin-top:24px;
  color:var(--muted);
  font-size:12px;
  line-height:2}
    .final {
  background:var(--green);
  color:#fff;
  text-align:center}
.final .lead {
  color:rgba(255,255,255,.82);
  max-width:760px;
  margin-inline:auto}
    .footer {
  padding:46px 0;
  background:#272a25;
  color:rgba(255,255,255,.72);
  font-size:13px}
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  align-items:end}
.footer-logo {
  font-family:var(--serif);
  font-size:24px;
  letter-spacing:.22em;
  color:#fff}
.footer-logo span {
  display:block;
  margin-top:8px;
  font-family:var(--sans);
  font-size:10px;
  color:rgba(255,255,255,.54)}
.footer-links {
  display:flex;
  gap:22px;
  flex-wrap:wrap}
.footer-links a {
  border-bottom:1px solid rgba(255,255,255,.4)}
    #privacy {
  display:none;
  background:#fffaf2;
  border-top:1px solid var(--border);
  padding:80px 0;
  scroll-margin-top:100px}
.privacy-inner {
  width:min(920px,calc(100% - 56px));
  margin:auto}
.privacy-inner h2 {
  font-family:var(--serif);
  font-size:36px;
  letter-spacing:.12em}
.privacy-inner h3 {
  margin-top:32px;
  color:var(--green)}
.privacy-inner p,.privacy-inner li {
  color:var(--muted);
  line-height:2}
.privacy-inner ul {
  padding-left:1.4em}
.privacy-close {
  display:inline-flex;
  margin-top:32px;
  color:var(--green);
  font-weight:900;
  border-bottom:1px solid var(--green)}
    body.privacy-open #privacy {
  display:block}
.fixed-cta {
  display:none}
    @media(max-width:980px) {
  .nav {
  display:none}
.greeting,.identity-grid,.access-grid {
  grid-template-columns:1fr}
.menu-head {
  display:block}
.menu-head .lead {
  margin-top:26px}
.menu-grid {
  grid-template-columns:1fr}
.gallery {
  grid-template-columns:repeat(2,1fr)}
.feature-grid,.voice-grid {
  grid-template-columns:1fr 1fr}
.side-reserve {
  display:none}
.fixed-cta {
  display:block;
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:90}
.fixed-cta a {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px 20px;
  border-radius:999px;
  background:var(--green);
  color:#fff;
  font-weight:900;
  box-shadow:var(--shadow)}
}
    @media(max-width:640px) {
  .container,.narrow,.wide {
  width:min(100% - 30px,1180px)}
.feature-grid,.voice-grid {
  grid-template-columns:1fr}
.header-inner {
  height:70px}
.logo {
  font-size:17px}
.hero {
  padding-top:70px;
  min-height:92vh;
  background:linear-gradient(rgba(244,240,232,.84),rgba(244,240,232,.84)),image-set(url('../images/forest.webp') type('image/webp'),url('../images/forest.jpg') type('image/jpeg')) center/cover no-repeat}
.hero-copy {
  padding:70px 0 120px}
.section {
  padding:78px 0}
.check-list,.line-flow {
  grid-template-columns:1fr}
.flow-item {
  grid-template-columns:1fr;
  gap:8px}
.access-card dl {
  grid-template-columns:1fr}
.btn {
  width:100%;
  min-width:0}
.footer {
  padding-bottom:96px}
.footer-inner {
  align-items:flex-start}
.title {
  font-size:34px}
.hero-title {
  font-size:48px}
}
    /* Hero title: 2 text lines with two-line blank space between */
    .hero-title--spaced {
  line-height:1.06;
}
    .hero-title--spaced .hero-title__line {
  display:block;
  white-space:nowrap;
}
    .hero-title--spaced .hero-title__blank {
  display:block;
  height:1.55em;
}
    @media(max-width:640px) {
  .hero-title--spaced .hero-title__line {
  white-space:normal}
.hero-title--spaced .hero-title__blank {
  height:.85em}
}
    /* ============================================================
       GROEN-like cinematic flash motion design
       ============================================================ */
    .flash-hero {
  
      background:#eef0eb !important;
      color:#1f2821;
      isolation:isolate;
    }
    .hero-motion {
  
      position:absolute;
      inset:82px 0 0;
      z-index:0;
      overflow:hidden;
      background:#e7e8e2;
    }
    .hero-motion__frame {
  
      position:absolute;
      inset:-4%;
      opacity:0;
      background-size:cover;
      background-position:center;
      filter:grayscale(1) contrast(.92) brightness(1.05);
      transform:scale(1.08);
      animation:kamuyFrame 18s infinite;
      will-change:opacity,transform,filter;
    }
    .hero-motion__frame::after {
  
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg,rgba(244,240,232,.96) 0%,rgba(244,240,232,.88) 46%,rgba(244,240,232,.3) 100%),
        radial-gradient(circle at 76% 45%,rgba(255,255,255,.42),transparent 26%);
    }
    .hero-motion__frame--1 {
  background-image:image-set(url('../images/hero-yosa.webp') type('image/webp'),url('../images/hero-yosa.jpg') type('image/jpeg'));
  animation-delay:0s;
}
    .hero-motion__frame--2 {
  background-image:image-set(url('../images/forest.webp') type('image/webp'),url('../images/forest.jpg') type('image/jpeg'));
  animation-delay:6s;
}
    .hero-motion__frame--3 {
  background-image:image-set(url('../images/forest.webp') type('image/webp'),url('../images/forest.jpg') type('image/jpeg'));
  animation-delay:12s;
}
    .hero-flash {
  
      position:absolute;
      inset:82px 0 0;
      z-index:1;
      pointer-events:none;
      background:#fff;
      opacity:0;
      mix-blend-mode:screen;
      animation:kamuyFlash 18s infinite;
    }
    .hero-film-noise {
  
      position:absolute;
      inset:82px 0 0;
      z-index:2;
      pointer-events:none;
      opacity:.12;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
      animation:kamuyNoise 1.1s steps(2,end) infinite;
    }
    .hero-motion__line {
  
      position:absolute;
      inset:0;
      z-index:3;
      pointer-events:none;
      background:
        linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),rgba(31,40,33,.08) calc(25% - 1px),rgba(31,40,33,.08) 25%,transparent 25%,transparent calc(50% - 1px),rgba(31,40,33,.08) calc(50% - 1px),rgba(31,40,33,.08) 50%,transparent 50%,transparent calc(75% - 1px),rgba(31,40,33,.08) calc(75% - 1px),rgba(31,40,33,.08) 75%);
    }
    .flash-hero .hero-copy {
  z-index:5;
  animation:kamuyCopyIn 1.2s cubic-bezier(.2,.8,.2,1) both;
}
    .flash-hero .hero-catch {
  color:#52624f;
}
    .flash-hero .hero-title {
  color:#202820;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
    .flash-hero .hero-sub {
  color:#404940;
}
    .hero-scene {
  
      position:absolute;
      right:5.2vw;
      bottom:6.5vw;
      z-index:5;
      margin:0;
      font-size:12px;
      font-weight:800;
      letter-spacing:.28em;
      color:rgba(28,36,29,.9);
      text-shadow:0 1px 3px rgba(244,240,232,.85);
      writing-mode:vertical-rl;
      animation:kamuyScene 18s infinite;
    }
    @keyframes kamuyFrame {
  
      0% {
  opacity:0;
  transform:scale(1.12) translateX(1.5%);
  filter:grayscale(1) contrast(.88) brightness(1.18);
}
      4% {
  opacity:1;
}
      28% {
  opacity:1;
  transform:scale(1.02) translateX(-1.5%);
  filter:grayscale(1) contrast(.95) brightness(1.04);
}
      34% {
  opacity:0;
  transform:scale(1.02) translateX(-1.5%);
}
      100% {
  opacity:0;
}
    }
    @keyframes kamuyFlash {
  
      0%,31%,100% {
  opacity:0;
}
      1% {
  opacity:.86;
}
      2.4% {
  opacity:0;
}
      33.5% {
  opacity:.62;
}
      35% {
  opacity:0;
}
      66.5% {
  opacity:.55;
}
      68% {
  opacity:0;
}
    }
    @keyframes kamuyNoise {
  0% {
  transform:translate(0,0)}
50% {
  transform:translate(-1.5%,1%)}
100% {
  transform:translate(1%,-1%)}
}
    @keyframes kamuyCopyIn {
  0% {
  opacity:0;
  transform:translateY(28px);
  filter:blur(8px)}
100% {
  opacity:1;
  transform:none;
  filter:blur(0)}
}
    @keyframes kamuyScene {
  0%,32%,100% {
  opacity:.22}
4%,27% {
  opacity:.68}
36%,61% {
  opacity:.68}
70%,94% {
  opacity:.68}
}
    @media(max-width:640px) {
  
      .hero-motion,.hero-flash,.hero-film-noise {
  inset:70px 0 0;
}
      .hero-scene {
  display:none;
}
      .hero-motion__frame::after {
  background:linear-gradient(rgba(244,240,232,.86),rgba(244,240,232,.86));
}
    }
    @media (prefers-reduced-motion: reduce) {
  
      .hero-motion__frame,.hero-flash,.hero-film-noise,.flash-hero .hero-copy,.hero-scene {
  animation:none!important;
}
      .hero-motion__frame--1 {
  opacity:1;
  transform:none;
}
    }
  
/* ============================================================
   PRIVACY POLICY OPEN / CLOSE FIX
   ============================================================ */
#privacy  {
  
  display: none;
}
body.privacy-open #privacy  {
  
  display: block;
}
.privacy-close-wrap  {
  
  text-align: right;
  margin-bottom: 28px;
}
.privacy-close,
.privacy__close  {
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--green);
  background: var(--green);
  color: #fff !important;
  font-weight: 900;
  letter-spacing: .12em;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(34,64,43,.16);
}
.privacy-close:hover,
.privacy__close:hover  {
  
  transform: translateY(-1px);
  background: #1a3322;
}
/* Identity mark text adjusted for YOSA PARK KAMUY 亀戸 */
.kamuy-mark--yosa {
  
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:28px 18px 46px;
}
.kamuy-mark--yosa .kamuy-mark__main {
  
  display:block;
  font-family:var(--serif);
  font-size:24px;
  line-height:1.08;
  letter-spacing:.11em;
  color:#d9c49a;
  margin:0;
  text-align:center;
}
.kamuy-mark--yosa .kamuy-mark__main span {
  
  display:block;
}
.kamuy-mark--yosa .kamuy-mark__sub {
  
  display:block;
  font-family:var(--serif);
  font-size:24px;
  line-height:1.08;
  letter-spacing:.11em;
  margin-top:10px;
  color:#d9c49a;
  text-align:center;
}
.kamuy-mark--yosa .kamuy-mark__footer {
  
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:block;
  font-family:var(--sans);
  font-size:9px;
  letter-spacing:.20em;
  color:rgba(255,255,255,.52);
  white-space:nowrap;
}
@media(max-width:640px) {
  
  .kamuy-mark--yosa {
  padding:24px 14px 42px;
}
  .kamuy-mark--yosa .kamuy-mark__main {
  font-size:20px;
}
  .kamuy-mark--yosa .kamuy-mark__sub {
  font-size:20px;
}
  .kamuy-mark--yosa .kamuy-mark__footer {
  font-size:8px;
  bottom:16px;
}
}

/* ============================================================
   改修 追加分（アクセシビリティ / モバイルナビ）※デザインは不変
   ============================================================ */
.skip-link {
  position:absolute;
  left:16px;
  top:-120px;
  z-index:200;
  padding:12px 18px;
  background:var(--green);
  color:#fff;
  border-radius:8px;
  font-family:var(--sans);
  font-size:15px;
  transition:top .2s ease}
.skip-link:focus {
  top:16px}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline:3px solid #1a73e8;
  outline-offset:2px;
  border-radius:2px}

/* 固定ヘッダー分のアンカー補正 */
.section,
section[id],
[id]:target {
  scroll-margin-top:98px}

/* ハンバーガー（PCでは非表示） */
.nav-toggle {
  display:none;
  width:46px;
  height:46px;
  border:1px solid rgba(46,51,45,.2);
  border-radius:8px;
  background:transparent;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px}
.nav-toggle-bar {
  display:block;
  width:22px;
  height:2px;
  background:var(--green);
  transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform:translateY(-7px) rotate(-45deg)}

@media(max-width:980px) {
  .nav-toggle {
    display:inline-flex}
  /* 既存の .nav{display:none} を踏襲し、開いたときだけ縦並びで表示 */
  .nav.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    position:fixed;
    top:82px;
    left:0;
    right:0;
    max-height:calc(100vh - 82px);
    overflow:auto;
    padding:8px 24px 22px;
    background:rgba(244,240,232,.98);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(46,51,45,.12);
    box-shadow:0 18px 40px rgba(34,64,43,.14);
    font-size:15px}
  .nav.is-open a {
    padding:15px 4px;
    border-bottom:1px solid rgba(46,51,45,.12)}
  .nav.is-open a.reservation-link {
    margin-top:12px;
    text-align:center;
    border-bottom:none}
}
@media(max-width:640px) {
  .nav.is-open {
    top:70px;
    max-height:calc(100vh - 70px)}
}

/* 動きの軽減（全体） */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto}
  *,*::before,*::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important}
}

/* 極狭幅では固定改行の見出しを折り返し可にして横はみ出しを防ぐ */
@media(max-width:400px) {
  .fixed-lines .line,
  .hero-title--spaced .hero-title__line {
    white-space:normal}
}

/* 狭幅で identity の円形マークがはみ出さないよう応答化（見た目は通常幅で不変） */
@media(max-width:640px) {
  .mark-box {
    padding:clamp(20px,6vw,48px)}
  .kamuy-mark {
    width:min(230px,100%);
    height:auto;
    aspect-ratio:1/1}
}

/* map-visual の見出しを枠内で折り返し可にして狭幅の横はみ出しを防ぐ */
.map-visual > div {
  width:100%;
  max-width:460px;
  padding-inline:18px}
.map-visual strong {
  display:block}

/* ============================================================
   インライン style 属性から移設したクラス（CSP強化のため）
   ============================================================ */
.flow-note {
  margin-top:36px;
  font-weight:800;
  color:var(--green)}
.btns--center {
  justify-content:center}
/* プライバシー開閉を <button> 化した際のフォント/外観リセット */
.privacy-close {
  font-family:inherit;
  cursor:pointer;
  appearance:none}

/* ============================================================
   ヒーロー演出の描画負荷対策：モバイルではノイズ/フラッシュ層を停止
   （フレームのクロスフェードは維持。GPU負荷を軽減）
   ============================================================ */
@media(max-width:640px) {
  .hero-flash,
  .hero-film-noise {
    display:none !important}
}