*{box-sizing:border-box}

:root{
  --black:#11100f;
  --ink:#292322;
  --paper:#f5eee6;
  --paper2:#fffaf4;
  --line:#d8c7b8;
  --muted:#74665f;
  --accent:#9f735d;
  --gold:#c49a72;
}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP",sans-serif;
  line-height:1.85;
}

main{
  position:relative;
  z-index:1;
}

a{color:inherit}

.wrap{
  width:min(1040px,100%);
  margin:0 auto;
  padding:0 22px;
}

.float-menu{
  position:fixed;
  top:14px;
  right:14px;
  z-index:500;
  width:54px;
  height:54px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:16px;
  background:rgba(17,16,15,.82);
  box-shadow:0 14px 32px rgba(0,0,0,.26);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:opacity .25s ease,background .22s ease,box-shadow .22s ease,transform .22s ease;
}

.float-menu span{
  position:absolute;
  width:23px;
  height:2px;
  background:#fff;
  border-radius:999px;
  transition:.24s ease;
}

.float-menu.open{
  background:rgba(17,16,15,.94);
  box-shadow:0 10px 24px rgba(0,0,0,.3);
}

.float-menu.is-scrolling:not(.open){
  opacity:.38;
  transform:translateY(4px);
}

.float-menu span:nth-child(1){transform:translateY(-7px)}
.float-menu span:nth-child(3){transform:translateY(7px)}
.float-menu.open span:nth-child(1){transform:rotate(45deg)}
.float-menu.open span:nth-child(2){opacity:0}
.float-menu.open span:nth-child(3){transform:rotate(-45deg)}

.side-wrap{
  position:fixed;
  inset:0;
  z-index:460;
  background:rgba(17,16,15,.72);
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease;
}

.side-wrap.open{
  opacity:1;
  pointer-events:auto;
}

.side-menu{
  width:min(320px,84vw);
  min-height:100%;
  padding:88px 26px 34px;
  margin-left:auto;
  background:rgba(17,16,15,.96);
  color:#fff;
  transform:translateX(100%);
  transition:transform .28s ease;
  display:flex;
  flex-direction:column;
}

.side-wrap.open .side-menu{transform:translateX(0)}

.side-menu a{
  text-decoration:none;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  letter-spacing:.12em;
  font-size:.86rem;
}

.hero{
  height:100vh;
  min-height:100svh;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  clip-path:inset(0);
  -webkit-clip-path:inset(0);
  isolation:isolate;
  background:#11100f;
}

@supports(height:100dvh){
  .hero{
    height:100dvh;
    min-height:100dvh;
  }
}

.hero-photo{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:#11100f;
  overflow:hidden;
  transform:translateZ(0);
}

.hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(17,16,15,.34),rgba(76,49,40,.28));
  pointer-events:none;
}

.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:saturate(.9) brightness(.78);
  transform:scale(1.06);
  animation:heroFade 18s infinite;
}

.hero-slide-01{
  background-image:url("images/hero-01.jpg");
}

.hero-slide-02{
  background-image:url("images/hero-02.jpg");
  animation-delay:6s;
}

.hero-slide-03{
  background-image:url("images/hero-03.jpg");
  animation-delay:12s;
}

@keyframes heroFade{
  0%,30%{
    opacity:1;
    transform:scale(1);
  }
  42%,100%{
    opacity:0;
    transform:scale(1.06);
  }
}

.brand-mark{
  position:relative;
  z-index:1;
  padding:0 24px 90px;
  text-align:center;
  color:#fff;
  pointer-events:none;
}

.brand-mark p{
  margin:0 0 14px;
  color:rgba(255,255,255,.72);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:.78rem;
}

.brand-mark h1{
  margin:0;
  font-size:clamp(2.8rem,16vw,5.4rem);
  line-height:.92;
  letter-spacing:.08em;
}

.overlap-panel{
  position:relative;
  z-index:2;
  margin-top:0;
  padding:108px 0 68px;
  background:var(--paper);
}

.panel-arch{
  position:absolute;
  left:50%;
  top:-86px;
  width:145%;
  height:132px;
  transform:translateX(-50%);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:var(--paper);
  border-top:8px solid rgba(196,154,114,.72);
  pointer-events:none;
}

.section{
  position:relative;
  z-index:2;
  padding:68px 0;
  background:var(--paper);
}

.section-label{
  margin:0 0 10px;
  color:var(--accent);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.18em;
}

h2{
  margin:0 0 18px;
  font-size:clamp(1.7rem,7vw,2.7rem);
  line-height:1.38;
}

p{
  margin:0;
  color:var(--muted);
}

.lead{
  max-width:680px;
}

.system-section{
  background:var(--paper2);
}

.system-list{
  display:grid;
  gap:12px;
}

.system-list div{
  padding:20px;
  background:rgba(255,255,255,.68);
  border:1px solid var(--line);
}

.system-list span{
  display:block;
  color:var(--accent);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.16em;
}

.system-list strong{
  display:block;
  margin:6px 0;
}

.gallery-strip{
  position:relative;
  z-index:2;
  overflow:hidden;
  background:#211b19;
  padding:18px 0;
}

.strip-track{
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  animation:stripMove 42s linear infinite;
}

.strip-track img{
  height:190px;
  width:auto;
  display:block;
  object-fit:cover;
}

.strip-track span{
  flex:0 0 48px;
  height:190px;
  background:#8a6d58;
}

@keyframes stripMove{
  from{transform:translateX(0)}
  to{transform:translateX(-45%)}
}

.company-section{
  position:relative;
  z-index:2;
  background:var(--paper);
}

table{
  width:100%;
  border-collapse:collapse;
  margin:24px 0;
}

th,td{
  border-bottom:1px solid var(--line);
  padding:14px 0;
  vertical-align:top;
  text-align:left;
}

th{
  width:104px;
  font-size:.9rem;
}

td{color:var(--muted)}

.map-box{
  height:260px;
  display:grid;
  place-items:center;
  background:#d5c5b7;
  color:#7b6a5c;
  font-weight:900;
  letter-spacing:.2em;
}

.footer{
  position:relative;
  z-index:2;
  padding:34px 22px 40px;
  text-align:center;
  background:#11100f;
  color:#fff;
}

.footer p{
  margin:0;
  color:#fff;
  font-weight:900;
}

.footer small{
  color:rgba(255,255,255,.55);
}

@media(min-width:760px){
  .hero{min-height:760px}
  .overlap-panel{
    margin-top:-150px;
    padding-top:180px;
  }
  .panel-arch{
    top:-160px;
    height:220px;
  }
  .system-list{
    grid-template-columns:repeat(3,1fr);
  }
  .strip-track img,
  .strip-track span{
    height:240px;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .strip-track,
  .hero-slide{
    animation:none;
  }
  .hero-slide-01{
    opacity:1;
    transform:scale(1);
  }
  .side-wrap,
  .side-menu,
  .float-menu span{
    transition:none;
  }
}

/* final arch position: lower start */
.overlap-panel{
  margin-top:0!important;
  padding-top:62px!important;
}

.panel-arch{
  left:0!important;
  top:-54px!important;
  width:100%!important;
  height:118px!important;
  transform:none!important;
  border-radius:100% 100% 0 0 / 72% 72% 0 0!important;
}

.panel-arch::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:62px;
  background:var(--paper);
}

/* final panel timing: keep the photo visible a little longer */
.hero{
  height:118vh!important;
  min-height:118svh!important;
}

@supports(height:100dvh){
  .hero{
    height:118dvh!important;
    min-height:118dvh!important;
  }
}

/* v13: keep the main photo full-screen inside the TOP area only */
.hero{
  display:block!important;
  overflow:visible!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
}

.hero-photo{
  position:sticky!important;
  top:0!important;
  right:0!important;
  bottom:auto!important;
  left:0!important;
  width:100%!important;
  height:100vh!important;
  min-height:100svh!important;
}

@supports(height:100dvh){
  .hero-photo{
    height:100dvh!important;
    min-height:100dvh!important;
  }
}

.brand-mark{
  position:absolute!important;
  inset:0;
  display:grid;
  place-items:center;
}

.overlap-panel{
  margin-top:-1px!important;
}

.panel-arch{
  top:-64px!important;
  height:128px!important;
}

.panel-arch::after{
  height:68px;
}

/* v14: restore fixed photo animation, keep the arch seam covered */
.hero{
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  clip-path:inset(0 0 -140px 0)!important;
  -webkit-clip-path:inset(0 0 -140px 0)!important;
}

.hero-photo{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  min-height:100svh!important;
  z-index:0!important;
  background:#11100f;
}

@supports(height:100dvh){
  .hero-photo{
    height:100dvh!important;
    min-height:100dvh!important;
  }
}

.brand-mark{
  position:relative!important;
  inset:auto;
  z-index:1;
  display:block;
}

.overlap-panel{
  margin-top:-2px!important;
}

.panel-arch{
  left:-2px!important;
  width:calc(100% + 4px)!important;
  top:-70px!important;
  height:136px!important;
}

.panel-arch::after{
  bottom:-3px;
  height:76px;
}

/* v15: lock horizontal movement while keeping the fixed hero animation */
html,
body{
  overflow-x:hidden;
}

.hero-photo{
  width:100%!important;
  max-width:100%!important;
}

.overlap-panel{
  overflow:hidden;
}

.overlap-panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-2px;
  height:12px;
  background:var(--paper);
  pointer-events:none;
}

.panel-arch{
  left:0!important;
  right:0!important;
  width:100%!important;
  transform:none!important;
}

/* v16: restore a right-rising wave arch without horizontal wobble */
.overlap-panel{
  overflow:visible!important;
}

.overlap-panel::before{
  display:none!important;
}

.panel-arch{
  left:0!important;
  right:0!important;
  top:-88px!important;
  width:100%!important;
  height:154px!important;
  overflow:hidden!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  transform:none!important;
}

.panel-arch::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:36px;
  height:156px;
  background:var(--paper);
  border-top:7px solid rgba(196,154,114,.72);
  border-radius:50% 50% 0 0 / 74% 58% 0 0;
  transform:rotate(-2.4deg);
  transform-origin:center top;
}

.panel-arch::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:82px;
  background:var(--paper);
}

/* v17: stronger right-rising wave, less semicircle */
.panel-arch{
  top:-116px!important;
  height:184px!important;
  background:transparent!important;
  overflow:hidden!important;
}

.panel-arch::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 220' preserveAspectRatio='none'%3E%3Cpath d='M0 148 C115 135 160 105 255 116 C365 128 420 78 535 86 C650 94 720 44 825 51 C905 56 955 26 1000 12 L1000 220 L0 220 Z' fill='%23f5eee6'/%3E%3Cpath d='M0 148 C115 135 160 105 255 116 C365 128 420 78 535 86 C650 94 720 44 825 51 C905 56 955 26 1000 12' fill='none' stroke='%23c49a72' stroke-opacity='.72' stroke-width='7'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  transform:none!important;
}

.panel-arch::after{
  display:none!important;
}

/* v18: real SVG wave, fixed animation kept, no semicircle */
.panel-arch{
  left:0!important;
  right:0!important;
  top:-126px!important;
  width:100%!important;
  height:188px!important;
  overflow:hidden!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  transform:none!important;
}

.panel-arch::before,
.panel-arch::after{
  content:none!important;
  display:none!important;
}

.panel-arch svg{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

.panel-wave-fill{
  fill:var(--paper);
}

.panel-wave-line{
  fill:none;
  stroke:rgba(196,154,114,.78);
  stroke-width:7;
  stroke-linecap:round;
}

/* v19: simple straight bordered edge */
.overlap-panel{
  overflow:visible!important;
}

.panel-arch{
  left:0!important;
  right:0!important;
  top:-8px!important;
  width:100%!important;
  height:8px!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  transform:none!important;
}

.panel-arch::before{
  content:""!important;
  display:block!important;
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:8px;
  background:rgba(196,154,114,.78);
}

.panel-arch::after{
  content:""!important;
  display:block!important;
  position:absolute;
  left:0;
  right:0;
  top:8px;
  height:10px;
  background:var(--paper);
}

.panel-arch svg{
  display:none!important;
}

/* v21: swipe gallery instead of auto-flow animation */
.gallery-strip{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:18px 0 22px!important;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.gallery-strip::-webkit-scrollbar{
  display:none;
}

.strip-track{
  width:max-content!important;
  gap:14px!important;
  padding:0 22px;
  animation:none!important;
  transform:none!important;
}

.strip-track img{
  flex:0 0 clamp(230px,76vw,380px);
  width:clamp(230px,76vw,380px)!important;
  height:clamp(180px,58vw,270px)!important;
  border-radius:0;
  scroll-snap-align:center;
}

.strip-track span{
  display:none!important;
}

/* v22: keep decorative spacer blocks inside the swipe gallery */
.strip-track span{
  display:block!important;
  flex:0 0 46px!important;
  width:46px!important;
  height:clamp(180px,58vw,270px)!important;
  background:#8a6d58;
  scroll-snap-align:center;
}

/* v25: payment logos */
.payment-logo-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.payment-logo-item{
  display:grid;
  place-items:center;
  width:52px;
  height:34px;
  padding:5px;
  background:#fff;
  border:1px solid var(--line);
}

.payment-logo{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.payment-note{
  margin-top:8px;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.6;
}

/* v26: Google map */
.map-frame{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:4/3;
  background:#d5c5b7;
}

.map-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.map-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:14px;
  min-height:44px;
  padding:0 18px;
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  font-size:.88rem;
  font-weight:800;
  letter-spacing:.04em;
}

/* v27: footer TEL banner */
.footer-tel-banner{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  min-height:46px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  text-decoration:none;
}

.footer-tel-banner span{
  color:rgba(255,255,255,.62);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.14em;
}

.footer-tel-banner strong{
  color:#fff;
  font-size:1.05rem;
  letter-spacing:.04em;
}

/* v33: Instagram and recruit icon buttons */
.floating-badges{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:opacity .25s ease,transform .25s ease;
}

.floating-badges.hide-when-menu-open{
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
}

.floating-badges.is-scrolling{
  opacity:.38;
  transform:translateY(4px);
}

.floating-badge{
  position:relative;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  padding:0;
  color:#fff;
  overflow:hidden;
  text-decoration:none;
  font-size:0;
  font-weight:900;
  border:1px solid rgba(255,255,255,.22);
  border-radius:16px;
  background:rgba(17,16,15,.82);
  box-shadow:0 14px 32px rgba(0,0,0,.26);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.floating-badge span{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  background:transparent;
  font-size:.76rem;
  letter-spacing:0;
  line-height:1;
}

.badge-instagram{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.badge-instagram span{
  color:transparent;
  background:url("images/icons8-instagram-144.png") center/54px 54px no-repeat;
}

.badge-recruit{
  background:rgba(17,16,15,.9);
}

.badge-recruit span{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:auto;
  height:auto;
  padding:0;
  font-size:.78rem;
  line-height:1;
}

@media(max-width:640px){
  .floating-badges{
    right:14px;
    bottom:14px;
    gap:8px;
  }
}

/* v30: additional menu pages */
.page-main{
  position:relative;
  z-index:2;
  min-height:100vh;
  background:var(--paper);
}

.page-hero{
  padding:96px 0 48px;
  background:linear-gradient(135deg,#1c1716,#332523);
  color:#fff;
}

.page-hero p{
  color:rgba(255,255,255,.72);
}

.page-hero h1{
  margin:0;
  font-size:clamp(2.1rem,10vw,4rem);
  line-height:1.18;
  letter-spacing:.04em;
}

.content-page{
  padding:48px 0 76px;
  background:var(--paper);
}

.content-card{
  background:rgba(255,255,255,.62);
  border:1px solid var(--line);
  padding:24px 22px;
}

.content-card + .content-card{
  margin-top:18px;
}

.content-card h2,
.content-card h3{
  margin:0 0 12px;
}

.content-card p + p{
  margin-top:12px;
}

.info-list{
  border-top:1px solid var(--line);
  margin:18px 0 0;
}

.info-list div{
  display:grid;
  grid-template-columns:128px 1fr;
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}

.info-list dt{
  font-weight:900;
}

.info-list dd{
  margin:0;
  color:var(--muted);
}

.route-cards{
  display:grid;
  gap:12px;
}

.route-card{
  padding:18px;
  background:rgba(255,255,255,.62);
  border:1px solid var(--line);
}

.route-card span{
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-bottom:8px;
  background:var(--ink);
  color:#fff;
  font-weight:900;
}

.gallery-page-grid{
  display:grid;
  gap:12px;
}

.gallery-page-grid img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

@media(min-width:760px){
  .content-card{
    padding:34px;
  }

  .route-cards,
  .gallery-page-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:640px){
  .page-hero{
    padding:82px 0 42px;
  }

  .info-list div{
    grid-template-columns:1fr;
    gap:4px;
  }
}

/* raphael trial 20260618: TOP horizontal swipe gallery balance */
.gallery-strip{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:18px 0 24px!important;
  scroll-snap-type:x proximity!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;
}

.gallery-strip::-webkit-scrollbar{
  display:none!important;
}

.strip-track{
  display:flex!important;
  align-items:center!important;
  width:max-content!important;
  gap:18px!important;
  padding:0 20px!important;
  animation:none!important;
  transform:none!important;
}

.strip-track img{
  flex:0 0 min(80vw,320px)!important;
  width:min(80vw,320px)!important;
  height:250px!important;
  object-fit:cover!important;
  border-radius:18px!important;
  scroll-snap-align:center!important;
}

.strip-track span{
  display:block!important;
  flex:0 0 46px!important;
  width:46px!important;
  height:250px!important;
  background:#8a6d58!important;
  border-radius:14px!important;
  scroll-snap-align:center!important;
}

@media(max-width:380px){
  .strip-track img{
    flex-basis:78vw!important;
    width:78vw!important;
    height:235px!important;
  }

  .strip-track span{
    height:235px!important;
  }
}

@media(min-width:760px){
  .strip-track{
    gap:22px!important;
    padding:0 32px!important;
  }

  .strip-track img{
    flex-basis:340px!important;
    width:340px!important;
    height:255px!important;
  }

  .strip-track span{
    height:255px!important;
  }
}

/* raphael gallery exact 4:3 frame final */
.strip-track img{
  width:min(80vw,320px)!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
}

.strip-track span{
  height:min(60vw,240px)!important;
}

@media(max-width:380px){
  .strip-track img{
    width:78vw!important;
    height:auto!important;
  }

  .strip-track span{
    height:58.5vw!important;
  }
}

@media(min-width:760px){
  .strip-track img{
    width:340px!important;
    height:auto!important;
  }

  .strip-track span{
    height:255px!important;
  }
}

/* raphael 20260618: gallery no spacer, gap only */
.strip-track{
  gap:20px!important;
  padding:0 22px!important;
}

.strip-track span{
  display:none!important;
  width:0!important;
  flex-basis:0!important;
  height:0!important;
  background:none!important;
}

.strip-track img{
  scroll-snap-align:center!important;
}

@media(min-width:760px){
  .strip-track{
    gap:24px!important;
    padding:0 32px!important;
  }
}

/* raphael 20260618: restore hamburger lines after gallery spacer removal */
.float-menu span{
  display:block!important;
}

.strip-track span{
  display:none!important;
  width:0!important;
  flex-basis:0!important;
  height:0!important;
  background:none!important;
}

/* raphael 20260618: instagram badge icon replace and cutoff guard */
.floating-badges{
  right:14px!important;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px))!important;
  max-width:calc(100vw - 28px)!important;
  box-sizing:border-box!important;
}

.floating-badge{
  box-sizing:border-box!important;
  max-width:100%!important;
}

.floating-badge img,
.floating-badge .badge-icon img{
  display:block!important;
  width:22px!important;
  height:22px!important;
  object-fit:contain!important;
  flex:0 0 auto!important;
}

/* raphael 20260618: restore badge size and fix instagram icon fit only */
/* バッジ全体は小さくしない。元の見た目を優先 */
.floating-badges{
  right:14px!important;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px))!important;
  overflow:visible!important;
  z-index:9999!important;
}

/* バッジ本体のサイズ感は既存CSSに任せる */
.floating-badge{
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* Instagram画像だけを枠内に正しく収める */
.floating-badge img,
.floating-badge .badge-icon img{
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  overflow:visible!important;
  flex-shrink:0!important;
}

/* アイコン枠がある場合だけ、切り抜かない */
.floating-badge .badge-icon{
  overflow:visible!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-shrink:0!important;
}

/* raphael 20260618: align menu instagram recruit buttons */
:root{
  --merurun-float-size:58px;
  --merurun-float-right:18px;
  --merurun-float-radius:18px;
}

/* 右上メニュー：サイズを基準化 */
.float-menu{
  width:var(--merurun-float-size)!important;
  height:var(--merurun-float-size)!important;
  min-width:var(--merurun-float-size)!important;
  min-height:var(--merurun-float-size)!important;
  max-width:var(--merurun-float-size)!important;
  max-height:var(--merurun-float-size)!important;
  right:var(--merurun-float-right)!important;
  border-radius:var(--merurun-float-radius)!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}

/* 三本線は必ず表示 */
.float-menu span{
  display:block!important;
  width:28px!important;
  height:3px!important;
  border-radius:999px!important;
  flex:0 0 auto!important;
}

/* 右下バッジ全体：右位置を三本線と揃える */
.floating-badges{
  position:fixed!important;
  right:var(--merurun-float-right)!important;
  bottom:calc(96px + env(safe-area-inset-bottom, 0px))!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:14px!important;
  width:var(--merurun-float-size)!important;
  max-width:var(--merurun-float-size)!important;
  z-index:9998!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* Instagram / 求人：三本線と同じ正方形ボタンにする */
.floating-badge{
  width:var(--merurun-float-size)!important;
  height:var(--merurun-float-size)!important;
  min-width:var(--merurun-float-size)!important;
  min-height:var(--merurun-float-size)!important;
  max-width:var(--merurun-float-size)!important;
  max-height:var(--merurun-float-size)!important;
  padding:0!important;
  border-radius:var(--merurun-float-radius)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  white-space:normal!important;
  text-align:center!important;
  line-height:1!important;
}

/* Instagram画像：見切れず、Instagramと分かる大きさで中央配置 */
.floating-badge img,
.floating-badge .badge-icon img{
  display:block!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  max-width:34px!important;
  max-height:34px!important;
  object-fit:contain!important;
  object-position:center!important;
  flex:0 0 auto!important;
  overflow:visible!important;
}

/* アイコン用span等がある場合も中央に揃える */
.floating-badge .badge-icon{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  flex:0 0 auto!important;
}

/* 求人テキストは正方形内に収める */
.floating-badge:not(:has(img)){
  font-size:.86rem!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
}

/* 画像とテキストが同時にある場合は、Instagram側は画像だけを優先して見せる */
.floating-badge:has(img){
  font-size:0!important;
}

/* 小さいスマホでも3ボタンの見た目を維持 */
@media(max-width:390px){
  :root{
    --merurun-float-size:56px;
    --merurun-float-right:16px;
    --merurun-float-radius:18px;
  }

  .floating-badges{
    bottom:calc(94px + env(safe-area-inset-bottom, 0px))!important;
    gap:13px!important;
  }

  .floating-badge img,
  .floating-badge .badge-icon,
  .floating-badge .badge-icon img{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    max-width:32px!important;
    max-height:32px!important;
  }
}

/* raphael 20260618: instagram icon html fixed, no :has */
:root{
  --merurun-float-size:58px;
  --merurun-float-right:18px;
  --merurun-float-radius:18px;
}

.float-menu{
  width:var(--merurun-float-size)!important;
  height:var(--merurun-float-size)!important;
  right:var(--merurun-float-right)!important;
  border-radius:var(--merurun-float-radius)!important;
  padding:0!important;
  box-sizing:border-box!important;
}

.float-menu span{
  display:block!important;
}

.floating-badges{
  position:fixed!important;
  right:var(--merurun-float-right)!important;
  bottom:calc(96px + env(safe-area-inset-bottom, 0px))!important;
  width:var(--merurun-float-size)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:14px!important;
  z-index:9998!important;
  overflow:visible!important;
}

.floating-badge{
  width:var(--merurun-float-size)!important;
  height:var(--merurun-float-size)!important;
  min-width:var(--merurun-float-size)!important;
  min-height:var(--merurun-float-size)!important;
  max-width:var(--merurun-float-size)!important;
  max-height:var(--merurun-float-size)!important;
  padding:0!important;
  border-radius:var(--merurun-float-radius)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  text-align:center!important;
  line-height:1!important;
}

/* Instagramバッジ内の画像を確実に中央表示 */
.floating-badge img{
  display:block!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  max-width:36px!important;
  max-height:36px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  flex:0 0 auto!important;
}

/* 求人など文字バッジは同じ正方形内に収める */
.floating-badge:not([aria-label="Instagram"]){
  font-size:.86rem!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
  white-space:normal!important;
}

.floating-badge[aria-label="Instagram"]{
  font-size:0!important;
}

@media(max-width:390px){
  :root{
    --merurun-float-size:56px;
    --merurun-float-right:16px;
    --merurun-float-radius:18px;
  }

  .floating-badges{
    bottom:calc(94px + env(safe-area-inset-bottom, 0px))!important;
    gap:13px!important;
  }

  .floating-badge img{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
  }
}

/* raphael 20260618: instagram icon bigger only */
/* 見切れなし状態を維持したまま、Instagramアイコンだけ大きくする */
.floating-badge[aria-label="Instagram"] img{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  max-width:44px!important;
  max-height:44px!important;
  object-fit:contain!important;
  object-position:center!important;
}

@media(max-width:390px){
  .floating-badge[aria-label="Instagram"] img{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    max-width:42px!important;
    max-height:42px!important;
  }
}

/* raphael 20260618: instagram cropped icon visual same size */
/* アイコン画像内の余白を詰めたので、ボタン内で大きく見せる */
.floating-badge[aria-label="Instagram"] img{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  max-width:48px!important;
  max-height:48px!important;
  object-fit:contain!important;
  object-position:center!important;
}

@media(max-width:390px){
  .floating-badge[aria-label="Instagram"] img{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    max-width:46px!important;
    max-height:46px!important;
  }
}

/* raphael 20260618: recruit exact visual match with instagram */
/*
  InstagramはOK版のまま固定。
  求人は外側58pxのタップ範囲の中に、Instagram画像と同じ48pxの見た目ボタンを中央配置する。
*/

/* 右下の縦並びは三本線と同じ右位置で固定 */
.floating-badges{
  right:var(--merurun-float-right)!important;
  width:var(--merurun-float-size)!important;
  align-items:center!important;
  overflow:visible!important;
}

/* 求人の外側はInstagramと同じ58px枠。ただし背景は消して中身だけ見せる */
.floating-badge.recruit-badge{
  width:var(--merurun-float-size)!important;
  height:var(--merurun-float-size)!important;
  min-width:var(--merurun-float-size)!important;
  min-height:var(--merurun-float-size)!important;
  max-width:var(--merurun-float-size)!important;
  max-height:var(--merurun-float-size)!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}

/* 元CSSの absolute / inset を完全に解除して、中央に置く */
.floating-badge.recruit-badge > span{
  position:static!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  margin:0!important;

  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  max-width:48px!important;
  max-height:48px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;

  background:rgba(17,16,15,.9)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:16px!important;
  box-shadow:0 12px 28px rgba(0,0,0,.24)!important;

  font-size:.98rem!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  white-space:nowrap!important;
  text-align:center!important;
}

/* Instagramと同じ小画面サイズへ合わせる */
@media(max-width:390px){
  .floating-badge.recruit-badge > span{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    max-width:46px!important;
    max-height:46px!important;
    border-radius:15px!important;
    font-size:.94rem!important;
  }
}

/* raphael 20260618: narrow instagram recruit badge gap */
/* Instagramと求人バッジの間隔だけ狭くする */
.floating-badges{
  gap:8px!important;
}

@media(max-width:390px){
  .floating-badges{
    gap:8px!important;
  }
}

/* raphael 20260618: tighter instagram recruit badge gap */
/* Instagramと求人バッジの間隔だけさらに狭くする */
.floating-badges{
  gap:4px!important;
}

@media(max-width:390px){
  .floating-badges{
    gap:4px!important;
  }
}

/* raphael 20260618: instagram recruit badge gap 2px */
/* Instagramと求人バッジの間隔だけ2pxへ */
.floating-badges{
  gap:2px!important;
}

@media(max-width:390px){
  .floating-badges{
    gap:2px!important;
  }
}

/* raphael 20260618: keep badges fixed and move lower */
/*
  Instagram・求人バッジは固定追従を維持。
  OK版のスタイル・サイズ・2px間隔はそのまま、画面下寄りへ移動する。
*/
.floating-badges{
  position:fixed!important;
  right:var(--merurun-float-right)!important;
  bottom:calc(24px + env(safe-area-inset-bottom, 0px))!important;
  width:var(--merurun-float-size)!important;
  max-width:var(--merurun-float-size)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:2px!important;
  margin:0!important;
  padding:0!important;
  z-index:9998!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:none!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* スクロール中・メニュー開閉系の非表示指定で消えないようにする */
.floating-badges.is-scrolling,
.floating-badges.hide-when-menu-open{
  opacity:1!important;
  pointer-events:auto!important;
  transform:none!important;
}

@media(max-width:390px){
  .floating-badges{
    bottom:calc(22px + env(safe-area-inset-bottom, 0px))!important;
    gap:2px!important;
  }
}

/* raphael 20260618: move fixed badges slightly lower */
/* Instagram・求人バッジだけ、固定追従のまま少し下げる */
.floating-badges{
  bottom:calc(12px + env(safe-area-inset-bottom, 0px))!important;
}

@media(max-width:390px){
  .floating-badges{
    bottom:calc(10px + env(safe-area-inset-bottom, 0px))!important;
  }
}

/* raphael 20260618: fixed badges bottom edge 2px */
/* safe-area加算を外して、Instagram・求人バッジを画面下ギリギリへ */
.floating-badges{
  position:fixed!important;
  right:var(--merurun-float-right)!important;
  top:auto!important;
  bottom:2px!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  gap:2px!important;
  z-index:9998!important;
  overflow:visible!important;
}

@media(max-width:390px){
  .floating-badges{
    bottom:2px!important;
    gap:2px!important;
  }
}

/* raphael 20260618: restore scroll fade for bottom edge badges */
/* 画面下2px固定は維持し、スクロール時の透明化だけ復旧 */
.floating-badges{
  transition:opacity .25s ease, transform .25s ease!important;
}

.floating-badges.is-scrolling{
  opacity:.38!important;
  transform:translateY(4px)!important;
  pointer-events:auto!important;
}

.floating-badges.hide-when-menu-open{
  opacity:0!important;
  pointer-events:none!important;
  transform:translateY(8px)!important;
}

/* raphael 20260618: fixed badges right edge 2px */
/* Instagram・求人バッジだけ、右端2pxまで攻める */
.floating-badges{
  right:2px!important;
}

@media(max-width:390px){
  .floating-badges{
    right:2px!important;
  }
}

/* raphael 20260618: menu right edge 2px */
/* 三本線メニューも右端2pxまで寄せる */
.float-menu{
  right:2px!important;
}

@media(max-width:390px){
  .float-menu{
    right:2px!important;
  }
}

/* raphael 20260618: menu right edge 4px, badges stay 2px */
/* 三本線メニューだけ右端4pxへ。Instagram／求人バッジは2pxのまま */
.float-menu{
  right:4px!important;
}

@media(max-width:390px){
  .float-menu{
    right:4px!important;
  }
}

/* raphael 20260618: menu right edge 6px, badges stay 2px */
/* 三本線メニューだけ右端6pxへ。Instagram／求人バッジは2pxのまま */
.float-menu{
  right:6px!important;
}

@media(max-width:390px){
  .float-menu{
    right:6px!important;
  }
}

/* raphael 20260618: menu right edge 8px, badges stay 2px */
/* 三本線メニューだけ右端8pxへ。Instagram／求人バッジは2pxのまま */
.float-menu{
  right:8px!important;
}

@media(max-width:390px){
  .float-menu{
    right:8px!important;
  }
}

/* raphael 20260618: menu right edge 7px, badges stay 2px */
/* 三本線メニューだけ右端7pxへ。Instagram／求人バッジは2pxのまま */
.float-menu{
  right:7px!important;
}

@media(max-width:390px){
  .float-menu{
    right:7px!important;
  }
}

/* raphael 20260618: trial menu width one third */
/*
  TOP本体は触らない。
  三本線メニューを開いた時の黒いパネル幅だけ、試しに画面の約3分の1へ。
*/
.side-menu{
  width:33.333vw!important;
  max-width:33.333vw!important;
  min-width:33.333vw!important;
  box-sizing:border-box!important;
}

/* 3分の1幅だと内側余白が強すぎるため、メニュー内だけ最小限に詰める */
@media(max-width:600px){
  .side-menu{
    width:33.333vw!important;
    max-width:33.333vw!important;
    min-width:33.333vw!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
}

/* raphael 20260618: trial menu width 40 percent */
/*
  TOP本体は触らない。
  三本線メニューを開いた時の黒いパネル幅だけ40％へ。
*/
.side-menu{
  width:40vw!important;
  max-width:40vw!important;
  min-width:40vw!important;
  box-sizing:border-box!important;
}

@media(max-width:600px){
  .side-menu{
    width:40vw!important;
    max-width:40vw!important;
    min-width:40vw!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }
}

/* raphael 20260618: translucent menu panel */
/*
  TOP本体は触らない。
  メニューを開いた時の黒いパネル背景だけ半透明化。
  文字やボタンは薄くしない。
*/
.side-menu{
  background:rgba(17,16,15,.78)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

/* 半透明化してもメニュー文字は読みやすく維持 */
.side-menu a,
.side-menu button,
.side-menu .menu-title,
.side-menu .menu-label{
  color:inherit;
}

/* raphael 20260618: more translucent menu panel */
/*
  メニュー幅40％は維持。
  黒いメニューパネル背景だけ、さらに薄くする。
*/
.side-menu{
  background:rgba(17,16,15,.58)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

/* raphael 20260618: menu panel opacity 0.45 */
/* メニュー幅40％は維持。黒いメニューパネル背景だけ0.45へ */
.side-menu{
  background:rgba(17,16,15,.45)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

/* raphael 20260619: tighten top concept text spacing */
/* TOP紹介文だけ、文章はそのまま段落間を少し詰める */
#concept h2{
  margin-bottom:18px!important;
}

#concept .concept-lead-tight{
  margin-top:0!important;
  margin-bottom:12px!important;
  line-height:1.9!important;
}

#concept .concept-lead-tight:last-child{
  margin-bottom:0!important;
}

/* raphael 20260621: system price notes */
.price-note{
  margin-top:8px!important;
  font-size:.9rem!important;
  line-height:1.8!important;
  color:#6f6660!important;
}

.drink-note{
  margin-top:20px!important;
  padding-top:18px!important;
  border-top:1px solid rgba(120,95,80,.22)!important;
}

.drink-note h3{
  margin:0 0 8px!important;
  font-size:1rem!important;
  letter-spacing:.04em!important;
}

.drink-note p{
  margin:0!important;
  line-height:1.9!important;
  color:#6f6660!important;
}

/* raphael 20260621: page headers thin aggressive */
/*
  各メニューページ内のヘッダー文字だけ細くする。
  TOP本体・右側ボタン・料金文・メニュー幅は触らない。
*/
body:not(.home) .page-hero .section-label,
.page-main .page-hero .section-label{
  font-weight:400!important;
  letter-spacing:.16em!important;
  opacity:.72!important;
}

body:not(.home) .page-hero h1,
.page-main .page-hero h1{
  font-weight:400!important;
  letter-spacing:.06em!important;
  line-height:1.25!important;
  text-shadow:none!important;
}

body:not(.home) .content-card h2,
.content-page .content-card h2{
  font-weight:500!important;
  letter-spacing:.04em!important;
}

body:not(.home) .content-card h3,
.content-page .content-card h3{
  font-weight:500!important;
}

/* raphael 20260621: page headers ultra thin */
/*
  各メニューページ内ヘッダーの太さをさらに落とす。
  TOP本体・右側ボタン・料金文・メニュー幅は触らない。
*/
.page-main .page-hero .section-label{
  font-weight:300!important;
  letter-spacing:.18em!important;
  opacity:.58!important;
  text-shadow:none!important;
}

.page-main .page-hero h1{
  font-weight:300!important;
  letter-spacing:.08em!important;
  line-height:1.28!important;
  text-shadow:none!important;
  -webkit-text-stroke:0!important;
}

.content-page .content-card h2{
  font-weight:400!important;
  letter-spacing:.05em!important;
  text-shadow:none!important;
  -webkit-text-stroke:0!important;
}

.content-page .content-card h3{
  font-weight:400!important;
  letter-spacing:.04em!important;
  text-shadow:none!important;
  -webkit-text-stroke:0!important;
}

/* bold指定が中で残っている場合の圧を抑える */
.page-main .page-hero strong,
.content-page .content-card strong{
  font-weight:500!important;
}

/* raphael 20260621: direct thin page header classes */
/*
  各メニューページのヘッダーへ直接classを付けて細くする。
  前回の汎用セレクタが効かなかったため、専用classで上書き。
*/
.page-hero .page-label-thin{
  font-weight:200!important;
  font-size:.68rem!important;
  letter-spacing:.18em!important;
  opacity:.52!important;
  text-shadow:none!important;
  -webkit-text-stroke:0!important;
}

.page-hero .page-title-thin{
  font-weight:200!important;
  font-size:clamp(1.55rem, 7vw, 2.15rem)!important;
  letter-spacing:.06em!important;
  line-height:1.18!important;
  text-shadow:none!important;
  -webkit-text-stroke:0!important;
  font-synthesis-weight:none!important;
}

/* 念押し。page-hero内のh1にも直接当てる */
section.page-hero h1.page-title-thin{
  font-weight:200!important;
}

section.page-hero p.page-label-thin{
  font-weight:200!important;
}

/* raphael 20260621: compact page hero header area */
/*
  各メニューページ内のヘッダー面積そのものを詰める。
  TOP本体・右側ボタン・料金文・メニュー幅は触らない。
*/
.page-main .page-hero{
  min-height:0!important;
  height:auto!important;
  padding-top:54px!important;
  padding-bottom:34px!important;
  margin-bottom:0!important;
}

.page-main .page-hero .wrap{
  padding-top:0!important;
  padding-bottom:0!important;
}

.page-main .page-hero .section-label,
.page-hero .page-label-thin{
  margin-bottom:8px!important;
  font-weight:300!important;
  font-size:.68rem!important;
  letter-spacing:.16em!important;
  opacity:.58!important;
}

.page-main .page-hero h1,
.page-hero .page-title-thin{
  margin-top:0!important;
  margin-bottom:0!important;
  font-weight:300!important;
  font-size:clamp(1.55rem, 6.2vw, 2.05rem)!important;
  line-height:1.18!important;
  letter-spacing:.06em!important;
}

.content-page{
  padding-top:34px!important;
}

@media(max-width:600px){
  .page-main .page-hero{
    padding-top:46px!important;
    padding-bottom:28px!important;
  }

  .content-page{
    padding-top:28px!important;
  }
}

/* raphael 20260621: inline compact page headers fallback */
/* 直接指定の補助。各メニューページのヘッダー下余白も詰める */
.content-page{
  padding-top:20px!important;
}

@media(max-width:600px){
  .content-page{
    padding-top:18px!important;
  }
}

/* raphael 20260621: page header slimmer */
/* 各メニューページのヘッダー帯をもう少し細くする */
.content-page{
  padding-top:16px!important;
}

@media(max-width:600px){
  .content-page{
    padding-top:14px!important;
  }
}

/* raphael 20260621: page header text max size */
/*
  ヘッダー帯は細いまま、ヘッダー内文字を限界ギリギリ大きめにする。
  TOP本体・料金文・右側ボタン・メニュー幅は触らない。
*/
.page-hero .page-label-max,
.page-hero .page-label-thin,
.page-hero .section-label{
  font-size:.72rem!important;
  font-weight:400!important;
  letter-spacing:.17em!important;
  opacity:.72!important;
  margin-bottom:6px!important;
}

.page-hero .page-title-max,
.page-hero .page-title-thin,
.page-hero h1{
  font-size:1.72rem!important;
  font-weight:400!important;
  line-height:1.12!important;
  letter-spacing:.05em!important;
  margin:0!important;
  text-shadow:none!important;
  -webkit-text-stroke:0!important;
}

@media(max-width:390px){
  .page-hero .page-title-max,
  .page-hero .page-title-thin,
  .page-hero h1{
    font-size:1.68rem!important;
  }

  .page-hero .page-label-max,
  .page-hero .page-label-thin,
  .page-hero .section-label{
    font-size:.7rem!important;
  }
}

/* raphael 20260621: system top space trim */
/*
  料金ページの白カード上部だけ調整。
  重複見出し削除後に残っていた、上の余白と横線を消す。
*/
.system-price-card{
  padding-top:18px!important;
}

.system-price-card .info-list{
  margin-top:0!important;
  border-top:0!important;
}

.system-price-card .info-list > div:first-child{
  padding-top:0!important;
}

/* raphael 20260621: recruit top space trim */
/*
  スタッフ募集ページの白カード上部だけ調整。
  重複見出し削除後に残っていた、上の余白と横線を消す。
*/
.recruit-info-card{
  padding-top:18px!important;
}

.recruit-info-card .info-list{
  margin-top:0!important;
  border-top:0!important;
}

.recruit-info-card .info-list > div:first-child{
  padding-top:0!important;
}

/* raphael 20260621: header to first card gap +12px */
/*
  黒ヘッダー直下から最初の白カードまでの外側余白だけを約12px戻す。
  黒ヘッダー自体、白カード内余白、本文内容、右側ボタン、メニュー画面は触らない。
  対象：店内の雰囲気、料金・システム、アクセス、スタッフ募集
*/
.page-main .content-page{
  padding-top:28px!important;
}

@media(max-width:600px){
  .page-main .content-page{
    padding-top:26px!important;
  }
}

/* raphael 20260621: header to first card gap 16px */
/*
  12px版から少し広げる。
  黒ヘッダー直下から最初の白カードまでの外側余白を16px相当に調整。
*/
.page-main .content-page{
  padding-top:32px!important;
}

@media(max-width:600px){
  .page-main .content-page{
    padding-top:30px!important;
  }
}

/* raphael 20260621: header to first card gap plus 8px */
/*
  16px版からさらに+8px。
  黒ヘッダー直下から最初の白カードまでの外側余白のみ広げる。
*/
.page-main .content-page{
  padding-top:40px!important;
}

@media(max-width:600px){
  .page-main .content-page{
    padding-top:38px!important;
  }
}

/* raphael 20260621: gallery plain intro */
/*
  店内ページ専用。
  ブロックなしの短い案内文だけを、黒ヘッダーと写真カードの間に置く。
*/
.gallery-plain-intro{
  margin:0 0 18px;
  font-size:.92rem;
  line-height:1.8;
  color:#6f6660;
  letter-spacing:.02em;
}

/* raphael 20260621: gallery intro bold black */
/* 店内ページの短い案内文だけ、太く・黒くする */
.gallery-plain-intro{
  color:#222!important;
  font-weight:700!important;
}

/* raphael 20260621: drink note font match price note */
/*
  料金ページのみ。
  飲み放題の説明文を、セット料金下の説明文と同じフォントサイズに揃える。
*/
.system-price-card .drink-note p{
  font-size:.9rem!important;
  line-height:1.8!important;
}

/* raphael 20260621: access page one block */
/*
  アクセスページを1つの白カードに統合。
  STEP形式を削除し、所在地・最寄り・徒歩ルート・Googleマップ・外観写真・電話番号を一体化。
*/
.access-one-card .access-section{
  margin-top:28px;
  padding-top:26px;
  border-top:1px solid rgba(120,95,80,.22);
}

.access-one-card .access-section:first-of-type{
  margin-top:24px;
}

.access-one-card .access-section h2{
  margin:0 0 16px;
}

.access-one-card .access-section p{
  margin:0;
  line-height:1.9;
  color:#6f6660;
}

.access-one-card .access-note{
  margin-top:12px!important;
  font-size:.9rem;
}

.access-one-card .map-embed{
  margin-top:14px;
}

.access-one-card .map-embed iframe{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  height:auto;
}

.access-one-card .map-button{
  display:inline-block;
  margin-top:16px;
}

.access-photo{
  margin-top:14px;
}

.access-photo img{
  display:block;
  width:100%;
  height:auto;
}

/* v43: manual interior photo gallery */
.manual-gallery.gallery-strip{
  overflow:hidden!important;
  padding:20px 0 18px!important;
}

.manual-gallery .gallery-carousel{
  width:min(100%, 860px);
  margin:0 auto;
}

.manual-gallery .gallery-stage{
  position:relative;
}

.manual-gallery .gallery-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.manual-gallery .gallery-viewport::-webkit-scrollbar{
  display:none;
}

.manual-gallery .gallery-viewport:focus-visible{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:4px;
}

.manual-gallery .strip-track{
  display:flex!important;
  align-items:stretch!important;
  width:100%!important;
  gap:0!important;
  padding:0!important;
  animation:none!important;
  transform:none!important;
}

.manual-gallery .gallery-slide{
  flex:0 0 100%;
  width:100%;
  margin:0;
  padding:0 clamp(38px, 8vw, 76px);
  scroll-snap-align:center;
  scroll-snap-stop:always;
}

.manual-gallery .gallery-slide img{
  display:block;
  width:100%!important;
  max-width:700px;
  height:auto!important;
  aspect-ratio:4/3!important;
  margin:0 auto;
  object-fit:cover!important;
  border-radius:8px!important;
}

.manual-gallery .gallery-arrow{
  position:absolute;
  top:50%;
  z-index:1;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid rgba(255,255,255,.45);
  border-radius:8px;
  background:rgba(17,16,15,.72);
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
  transform:translateY(-50%);
}

.manual-gallery .gallery-arrow-prev{
  left:8px;
}

.manual-gallery .gallery-arrow-next{
  right:8px;
}

.manual-gallery .gallery-arrow:disabled{
  opacity:.34;
  cursor:default;
}

.manual-gallery .gallery-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:14px;
}

.manual-gallery .gallery-dot{
  width:9px;
  height:9px;
  padding:0;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}

.manual-gallery .gallery-dot.is-active{
  background:#fff;
  transform:scale(1.18);
}

@media(min-width:760px){
  .manual-gallery .gallery-slide{
    padding:0 82px;
  }

  .manual-gallery .gallery-arrow-prev{
    left:22px;
  }

  .manual-gallery .gallery-arrow-next{
    right:22px;
  }
}

@media(prefers-reduced-motion:reduce){
  .manual-gallery .gallery-viewport{
    scroll-behavior:auto;
  }
}

/* v44: keep gallery arrows inside the dark side frame, outside the image */
.manual-gallery .gallery-stage{
  display:grid;
  grid-template-columns:46px minmax(0, 1fr) 46px;
  gap:8px;
  align-items:stretch;
}

.manual-gallery .gallery-viewport{
  grid-column:2;
  grid-row:1;
  min-width:0;
}

.manual-gallery .gallery-arrow{
  position:static;
  top:auto;
  align-self:stretch;
  width:100%;
  height:auto;
  min-height:0;
  border-color:rgba(255,255,255,.26);
  background:rgba(17,16,15,.9);
  box-shadow:none;
  transform:none;
}

.manual-gallery .gallery-arrow-prev{
  grid-column:1;
  grid-row:1;
}

.manual-gallery .gallery-arrow-next{
  grid-column:3;
  grid-row:1;
}

.manual-gallery .gallery-slide{
  padding:0;
}

@media(min-width:760px){
  .manual-gallery .gallery-stage{
    grid-template-columns:60px minmax(0, 1fr) 60px;
    gap:12px;
  }
}

/* v45: shorten the side-frame arrow buttons */
.manual-gallery .gallery-arrow{
  align-self:center;
  height:clamp(56px, 18vw, 110px);
}


@media(max-width:600px){
  .access-one-card .access-section{
    margin-top:24px;
    padding-top:22px;
  }

  .access-one-card .access-section h2{
    margin-bottom:12px;
  }
}

/* v42: white logo image for the TOP brand mark */
.brand-mark .brand-logo{
  display:block;
  width:min(76vw, 390px);
  height:auto;
  margin:0 auto;
}

/* v49: keep gallery swipes inside the gallery and lock the TOP photo horizontally */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}

@supports(overflow:clip){
  html,
  body{
    overflow-x:clip;
  }
}

.hero-photo{
  left:0!important;
  right:0!important;
  width:auto!important;
  max-width:none!important;
}

.manual-gallery .gallery-viewport{
  overscroll-behavior-x:contain;
}

/* v50: subtle bookshelf trim at the top and bottom of the dark gallery */
.manual-gallery.gallery-strip{
  isolation:isolate;
  padding:40px 0 38px!important;
}

.manual-gallery.gallery-strip::before,
.manual-gallery.gallery-strip::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  z-index:0;
  height:24px;
  pointer-events:none;
  opacity:.88;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.12) 0 1px, transparent 1px 20px, rgba(0,0,0,.42) 20px 24px),
    repeating-linear-gradient(90deg,
      #b98a60 0 8px,
      #322725 8px 10px,
      #6e5c70 10px 19px,
      #302727 19px 21px,
      #60776d 21px 31px,
      #302827 31px 33px,
      #bf9c67 33px 40px,
      #312727 40px 42px,
      #a66050 42px 53px,
      #302827 53px 55px,
      #7a695f 55px 63px,
      #302827 63px 65px);
  box-shadow:inset 0 1px rgba(255,255,255,.12), inset 0 -1px rgba(0,0,0,.42);
}

.manual-gallery.gallery-strip::before{
  top:0;
}

.manual-gallery.gallery-strip::after{
  bottom:0;
  transform:scaleY(-1);
}

.manual-gallery .gallery-carousel{
  position:relative;
  z-index:1;
}

@media(min-width:760px){
  .manual-gallery.gallery-strip{
    padding:48px 0 46px!important;
  }

  .manual-gallery.gallery-strip::before,
  .manual-gallery.gallery-strip::after{
    height:28px;
  }
}

/* v51: replace colorful book spines with a restrained walnut wood grain */
.manual-gallery.gallery-strip::before,
.manual-gallery.gallery-strip::after{
  opacity:.78;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.1) 0 1px, transparent 1px 20px, rgba(12,7,5,.62) 20px 24px),
    repeating-linear-gradient(97deg, rgba(39,20,12,.3) 0 1px, transparent 1px 11px, rgba(214,158,103,.09) 11px 13px, transparent 13px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 18px, rgba(25,12,8,.22) 18px 20px),
    linear-gradient(90deg, #3a2118 0%, #795039 24%, #4a2a1e 48%, #865a3d 72%, #3a2118 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.1), inset 0 -1px rgba(0,0,0,.58);
}

/* v52: match the TOP photo-to-paper transition with the gallery wood trim */
.overlap-panel::before{
  content:""!important;
  display:block!important;
  position:absolute;
  left:0;
  right:0;
  top:-22px;
  z-index:3;
  height:22px;
  pointer-events:none;
  opacity:.78;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.1) 0 1px, transparent 1px 18px, rgba(12,7,5,.62) 18px 22px),
    repeating-linear-gradient(97deg, rgba(39,20,12,.3) 0 1px, transparent 1px 11px, rgba(214,158,103,.09) 11px 13px, transparent 13px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 18px, rgba(25,12,8,.22) 18px 20px),
    linear-gradient(90deg, #3a2118 0%, #795039 24%, #4a2a1e 48%, #865a3d 72%, #3a2118 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.1), inset 0 -1px rgba(0,0,0,.58);
}

@media(min-width:760px){
  .overlap-panel::before{
    top:-28px;
    height:28px;
    background:
      linear-gradient(to bottom, rgba(255,255,255,.1) 0 1px, transparent 1px 23px, rgba(12,7,5,.62) 23px 28px),
      repeating-linear-gradient(97deg, rgba(39,20,12,.3) 0 1px, transparent 1px 11px, rgba(214,158,103,.09) 11px 13px, transparent 13px 24px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 18px, rgba(25,12,8,.22) 18px 20px),
      linear-gradient(90deg, #3a2118 0%, #795039 24%, #4a2a1e 48%, #865a3d 72%, #3a2118 100%);
  }
}

/* v53: make the TOP wood trim slightly larger, darker, and seam-free */
.overlap-panel::before{
  top:-26px;
  height:27px;
  opacity:.92;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.1) 0 1px, transparent 1px 22px, rgba(12,7,5,.62) 22px 27px),
    repeating-linear-gradient(97deg, rgba(39,20,12,.3) 0 1px, transparent 1px 11px, rgba(214,158,103,.09) 11px 13px, transparent 13px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 18px, rgba(25,12,8,.22) 18px 20px),
    linear-gradient(90deg, #3a2118 0%, #795039 24%, #4a2a1e 48%, #865a3d 72%, #3a2118 100%);
}

@media(min-width:760px){
  .overlap-panel::before{
    top:-32px;
    height:33px;
    background:
      linear-gradient(to bottom, rgba(255,255,255,.1) 0 1px, transparent 1px 28px, rgba(12,7,5,.62) 28px 33px),
      repeating-linear-gradient(97deg, rgba(39,20,12,.3) 0 1px, transparent 1px 11px, rgba(214,158,103,.09) 11px 13px, transparent 13px 24px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 18px, rgba(25,12,8,.22) 18px 20px),
      linear-gradient(90deg, #3a2118 0%, #795039 24%, #4a2a1e 48%, #865a3d 72%, #3a2118 100%);
  }
}

/* v54: place the TOP wood trim inside the paper panel to eliminate the seam */
.overlap-panel{
  margin-top:-27px!important;
  padding-top:87px!important;
}

.overlap-panel::before{
  top:0!important;
}

@media(min-width:760px){
  .overlap-panel{
    margin-top:-33px!important;
    padding-top:93px!important;
  }
}

/* v55: let the paper layer overlap the lower edge of the TOP wood trim */
.overlap-panel::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:23px;
  z-index:4;
  height:5px;
  background:var(--paper);
  pointer-events:none;
}

@media(min-width:760px){
  .overlap-panel::after{
    top:29px;
  }
}

/* v56: unify the wood tone and tighten the TOP concept spacing */
.manual-gallery.gallery-strip::before,
.manual-gallery.gallery-strip::after,
.overlap-panel::before{
  opacity:1;
}

.overlap-panel{
  padding-top:56px!important;
  padding-bottom:48px!important;
}

@media(min-width:760px){
  .overlap-panel{
    padding-top:72px!important;
    padding-bottom:56px!important;
  }
}

/* v57: improve readability of store-detail body text without changing headings */
table td,
.info-list dd{
  color:#493b35;
}

table th,
table td,
.info-list,
.info-list div{
  border-color:rgba(120,95,80,.16);
}

/* v58: apply the same charcoal-brown to ordinary body copy site-wide */
main :where(p, li, dd, td, small),
main .payment-note,
main .price-note,
main .access-one-card .access-section p,
main .access-one-card .access-note{
  color:#493b35;
}

main .system-price-card .drink-note p,
main .gallery-plain-intro{
  color:#493b35!important;
}

/* v59: simplify page content frames and keep only quiet reading dividers */
.content-page .content-card{
  border-color:transparent;
  border-radius:8px;
}

.content-page .info-list{
  border-top:0;
}

.content-page .info-list > div{
  border-bottom-color:rgba(120,95,80,.16);
}

.content-page .info-list > div:last-child{
  border-bottom:0;
}

.company-section table tr:last-child > th,
.company-section table tr:last-child > td{
  border-bottom:0;
}

/* v59: TOP access map and building exterior pair */
.company-section .access-media-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.company-section .map-frame,
.company-section .building-photo-frame{
  aspect-ratio:2/3;
  border-radius:8px;
  overflow:hidden;
}

.company-section .building-photo-frame{
  margin:0;
}

.company-section .building-photo-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 58%;
}

@media(min-width:760px){
  .company-section .access-media-pair{
    max-width:680px;
    gap:18px;
  }
}

/* v61: center map actions and soften action corners */
.map-link{
  display:flex;
  width:max-content;
  max-width:100%;
  margin:14px auto 0;
  border-radius:12px;
}

.footer-tel-banner{
  border-radius:12px;
}

/* v62: introduce the shop sign beside the TOP concept heading */
#concept .intro-heading{
  display:flex;
  align-items:center;
  gap:clamp(10px,3vw,16px);
  max-width:100%;
  margin:0 0 18px;
}

#concept .intro-sign{
  display:block;
  flex:0 0 auto;
  width:clamp(54px,18vw,112px);
  height:auto;
  border-radius:8px;
}

#concept .intro-heading h2{
  margin:0;
  font-size:clamp(1.3rem,6vw,2.5rem);
  white-space:nowrap;
}

/* v63: give the sign lockup more breathing room and optical balance */
#concept .intro-heading{
  gap:clamp(14px,4vw,22px);
}

#concept .intro-heading h2{
  transform:translateY(4px);
}

/* v64: tighten the concept block without changing the wood transition */
.overlap-panel{
  padding-top:50px!important;
  padding-bottom:44px!important;
}

@media(min-width:760px){
  .overlap-panel{
    padding-top:64px!important;
    padding-bottom:52px!important;
  }
}

/* v65: make the sign-heading spacing and optical lowering clearly visible */
#concept .intro-heading{
  gap:clamp(20px,6vw,32px);
}

#concept .intro-heading h2{
  transform:translateY(10px);
}

/* v66: balance the TOP access note and footer spacing */
.company-section .access-media-pair + .payment-note{
  margin-top:22px;
}

.company-section{
  padding-bottom:46px;
}

@media(min-width:760px){
  .company-section{
    padding-bottom:52px;
  }
}

/* v67: narrow the TOP gallery arrow lanes and pull them from the screen edge */
.manual-gallery .gallery-stage{
  grid-template-columns:34px minmax(0, 1fr) 34px;
  gap:8px;
  padding-inline:8px;
}

@media(min-width:760px){
  .manual-gallery .gallery-stage{
    grid-template-columns:42px minmax(0, 1fr) 42px;
    gap:10px;
    padding-inline:12px;
  }
}

/* v68: reduce the arrow lanes to roughly two-thirds again */
.manual-gallery .gallery-stage{
  grid-template-columns:24px minmax(0, 1fr) 24px;
  gap:10px;
  padding-inline:14px;
}

@media(min-width:760px){
  .manual-gallery .gallery-stage{
    grid-template-columns:28px minmax(0, 1fr) 28px;
    gap:12px;
    padding-inline:16px;
  }
}

/* v69: remove visible gallery arrows and return their width to the photo */
.manual-gallery .gallery-stage{
  display:block;
  padding-inline:0;
}

.manual-gallery .gallery-arrow{
  display:none;
}

.manual-gallery .gallery-viewport{
  width:100%;
}

/* v71: tighten the handoff from the gallery wood trim into shop information */
.company-section{
  padding-top:42px;
}

.company-section .section-label{
  margin-bottom:6px;
}

@media(min-width:760px){
  .company-section{
    padding-top:52px;
  }
}

/* v73: four TOP images in the supplied order, with the existing gentle fade */
.hero-slide{
  animation-duration:24s;
}

.hero-slide-01{
  animation-delay:0s;
}

.hero-slide-02{
  animation-delay:6s;
}

.hero-slide-03{
  animation-delay:12s;
}

.hero-slide-04{
  background-image:url("images/hero-04.jpg");
  animation-delay:18s;
}

@keyframes heroFade{
  0%,22%{
    opacity:1;
    transform:scale(1);
  }
  30%,100%{
    opacity:0;
    transform:scale(1.06);
  }
}

/* v77: show each of the four TOP photos every 3 seconds */
.hero-slide{
  animation-duration:12s;
}

.hero-slide-02{
  animation-delay:3s;
}

.hero-slide-03{
  animation-delay:6s;
}

.hero-slide-04{
  animation-delay:9s;
}

@keyframes heroFade{
  0%,18%{
    opacity:1;
    transform:scale(1);
  }
  30%,100%{
    opacity:0;
    transform:scale(1.06);
  }
}

/* v76: permanent LINE friend button within the shared footer */
.footer-line-button{
  display:block;
  width:fit-content;
  margin:14px auto 0;
  line-height:0;
}

.footer-line-button img{
  display:block;
  height:36px;
  border:0;
}

/* v64: compact footer contact actions and a quiet Instagram / LINE guide */
.footer-guidance{
  max-width:340px;
  margin:12px auto 0;
  color:rgba(255,255,255,.62)!important;
  font-size:.76rem;
  font-weight:400;
  line-height:1.75;
}

.footer-guidance a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:2px;
}

.footer-contact-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:14px;
}

.footer-contact-button{
  display:grid;
  place-items:center;
  min-width:84px;
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:12px;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  line-height:1;
}

.footer-contact-tel{
  font-size:1.28rem;
}

.footer-contact-line{
  border-color:rgba(174,211,156,.46);
  color:#eef6e9;
  font-size:.8rem;
  letter-spacing:.08em;
}

/* v65: keep the official LINE friend banner unmodified inside the footer actions */
.footer-contact-actions .footer-line-button{
  width:auto;
  margin:0;
}

.footer-contact-actions .footer-line-button img{
  height:36px;
}

/* 20260624: quiet, text-led introduction page */
.about-page-content{
  display:grid;
  gap:0;
}

.about-page-section{
  padding:0 0 24px;
  border-bottom:1px solid rgba(120,95,80,.16);
}

.about-page-section + .about-page-section{
  padding-top:24px;
}

.about-page-section:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.about-page-section h2{
  margin:0 0 12px;
  color:#211a17;
  font-size:1.08rem;
  font-weight:500;
  letter-spacing:.04em;
}

.about-page-section p{
  color:#493b35;
  line-height:1.9;
}

.about-page-links{
  display:grid;
  gap:10px;
  margin-top:20px;
}

.about-page-link{
  display:grid;
  min-height:48px;
  place-items:center;
  border-radius:12px;
  background:#1c1716;
  color:#fff;
  font-size:.94rem;
  font-weight:500;
  letter-spacing:.04em;
  text-decoration:none;
}

@media(min-width:760px){
  .about-page-links{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* 20260624: restore the quiet divider before the first recruitment detail */
.recruit-info-card .info-list{
  margin-top:20px!important;
  border-top:1px solid rgba(120,95,80,.16)!important;
}

.recruit-info-card .info-list > div:first-child{
  padding-top:18px!important;
}

/* 20260624: match the recruitment lead with the detail labels */
.recruit-info-card .recruit-intro-title{
  color:#211a17!important;
  font-size:1rem;
  font-weight:900;
  letter-spacing:0;
}

/* 20260624: short, stable recovery after scroll fades */
.float-menu{
  transition:opacity .15s ease, background .22s ease, box-shadow .22s ease, transform .15s ease;
}

.floating-badges{
  transition:opacity .15s ease, transform .15s ease!important;
}

/* v66: match the TEL icon banner to the official LINE banner dimensions */
.footer-contact-actions .footer-contact-tel{
  width:116px;
  min-width:116px;
  min-height:36px;
  height:36px;
  padding:0;
}

/* v67: use the TEL label at the largest comfortable size within its banner */
.footer-contact-actions .footer-contact-tel{
  font-size:1.85rem;
  letter-spacing:.32em;
  line-height:1;
  padding-left:.32em;
}

/* v68: reduce the TEL label one step while preserving the matched banner size */
.footer-contact-actions .footer-contact-tel{
  font-size:1.55rem;
  letter-spacing:.26em;
  padding-left:.26em;
}

/* v69: tighten TEL letter spacing without changing its size */
.footer-contact-actions .footer-contact-tel{
  letter-spacing:.10em;
  padding-left:.10em;
}

/* v70: PC-only layout polish without touching the completed mobile view */
@media screen and (min-width:769px){
  .side-menu{
    width:min(440px, 38vw)!important;
    min-width:0!important;
    max-width:440px!important;
    padding-left:34px!important;
    padding-right:34px!important;
  }

  .content-page .wrap,
  .page-hero .wrap{
    max-width:1000px;
  }

  .content-page .content-card{
    max-width:960px;
    margin-left:auto;
    margin-right:auto;
  }

  .company-section .wrap{
    max-width:1080px;
  }

  .company-section table{
    max-width:960px;
    margin-left:auto;
    margin-right:auto;
  }

  .company-section .access-media-pair{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  .company-section .access-media-pair + .payment-note{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  .access-one-card .access-section,
  .access-one-card .access-note,
  .access-one-card .map-embed{
    max-width:860px;
    margin-left:auto;
    margin-right:auto;
  }

  .access-one-card .map-button{
    display:block;
    width:max-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  .footer{
    padding-left:24px;
    padding-right:24px;
  }

  .footer > p,
  .footer-guidance,
  .footer-contact-actions{
    margin-left:auto;
    margin-right:auto;
  }

  .footer-guidance{
    max-width:620px;
  }

  .footer-contact-actions{
    width:fit-content;
  }
}

/* v71: PC-only TOP photo scale fix for portrait hero images */
@media screen and (min-width:1025px){
  .hero-slide{
    background-position:center center, center center;
    background-size:auto 100%, cover;
    background-repeat:no-repeat;
    animation-name:heroFadePc;
  }

  .hero-slide-01{
    background-image:url("images/hero-01.jpg"), url("images/hero-01.jpg");
  }

  .hero-slide-02{
    background-image:url("images/hero-02.jpg"), url("images/hero-02.jpg");
  }

  .hero-slide-03{
    background-image:url("images/hero-03.jpg"), url("images/hero-03.jpg");
  }

  .hero-slide-04{
    background-image:url("images/hero-04.jpg"), url("images/hero-04.jpg");
  }

  @keyframes heroFadePc{
    0%,18%{
      opacity:1;
      transform:scale(1);
    }

    30%,100%{
      opacity:0;
      transform:scale(1.015);
    }
  }
}

/* v72: PC-only four-photo TOP panel with quiet framing */
@media screen and (min-width:1025px){
  .hero-photo{
    display:grid!important;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:clamp(10px, 1vw, 16px);
    box-sizing:border-box!important;
    padding:clamp(10px, 1vw, 16px)!important;
    border:1px solid rgba(214,178,138,.52)!important;
    background:#11100f!important;
  }

  .hero-photo::after{
    inset:clamp(10px, 1vw, 16px);
    background:linear-gradient(135deg, rgba(17,16,15,.18), rgba(76,49,40,.24));
  }

  .hero-slide{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    min-width:0;
    height:100%;
    opacity:1!important;
    transform:none!important;
    animation:none!important;
    filter:saturate(.92) brightness(.76);
    background-size:cover!important;
    background-repeat:no-repeat!important;
  }

  .hero-slide + .hero-slide{
    border-left:0;
  }

  .hero-slide-01{
    background-image:url("images/hero-01.jpg")!important;
    background-position:center center!important;
  }

  .hero-slide-02{
    background-image:url("images/hero-02.jpg")!important;
    background-position:center center!important;
  }

  .hero-slide-03{
    background-image:url("images/hero-03.jpg")!important;
    background-position:center center!important;
  }

  .hero-slide-04{
    background-image:url("images/hero-04.jpg")!important;
    background-position:center center!important;
  }
}

/* v73: keep the system price dividers to a single visible line */
.system-price-card .info-list > div:last-child{
  border-bottom:0!important;
}

/* v74: remove the extra nested divider inside the set price note */
.system-price-card .price-note{
  display:block!important;
  grid-template-columns:none!important;
  gap:0!important;
  padding:0!important;
  border-bottom:0!important;
}

/* v75: make the all-you-can-drink note match the system rows */
.system-price-card .drink-note{
  display:grid!important;
  grid-template-columns:128px 1fr;
  gap:18px!important;
  margin-top:0!important;
  padding:14px 0 0!important;
  border-top:1px solid rgba(120,95,80,.16)!important;
}

.system-price-card .drink-note h3{
  margin:0!important;
  color:#211a17!important;
  font-size:1rem!important;
  font-weight:900!important;
  letter-spacing:0!important;
  line-height:1.8!important;
}

.system-price-card .drink-note p{
  margin:0!important;
  color:#493b35!important;
  font-size:.9rem!important;
  line-height:1.8!important;
}

@media(max-width:640px){
  .system-price-card .drink-note{
    grid-template-columns:1fr;
    gap:4px!important;
  }
}