/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
    padding-top: 50px;
    padding-bottom: 0;
}

.navbar-iyasinoyu .navbar-brand{
  color: #fff;
}

.navbar-iyasinoyu-items {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fdf4f7+0,f4b5c0+100 */
  background: #fdf4f7; /* Old browsers */
  background: -moz-linear-gradient(top, #fdf4f7 0%, #f4b5c0 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #fdf4f7 0%,#f4b5c0 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #fdf4f7 0%,#f4b5c0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf4f7', endColorstr='#f4b5c0',GradientType=0 ); /* IE6-9 */

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  height: 30px;
  margin-top: 15px;
  list-style: none;

  margin: 0.75em 0;
  padding: 0 0 0 1em;
  margin-right: 0.5em;
}

.navbar-iyasinoyu-items>li {
  position: relative;
  display: block;
  float: left;
  padding: 0 1em;
  line-height: 30px;
}

/* https://css-tricks.com/snippets/css/triangular-list-bullets/ */
.navbar-iyasinoyu-items>li:before {
    content: "";
    border-color: transparent #c83064;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    height: 0;
    width: 0;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -0.35em;
}

.navbar-iyasinoyu-items>li>a {
  line-height: 30px;
}

.navbar-brand {
  padding: 12px;
}

.navbar-brand>img {
  margin-left: 0.5em;
  height: 30px;
}

.front-img {
  background: url(../img/front.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.front-img>.container {
  margin-top: 17em;
}

@media (min-width: 500px) {
  .front-img {
    background-position: top;
  }
  .front-img>.container {
    margin-top: 35%;
  }
}

@media (max-width: 350px) {
  .navbar-iyasinoyu-items {
    padding: 0;
  }
  .navbar-brand {
    padding: 12px 0;
  }
  .navbar-brand>img {
    height: 28px;
  }
  .navbar-iyasinoyu-items>li {
    padding: 0 0.5em 0 1.5em;
  }
}

.navbar-right {
    float: right !important;
    margin-right: -15px;
}

.navbar-header {
  float: left;
}

footer small {
  font-size: 0.8em;
  line-height: 0;
}

/* Front jumbotron text overlay */
.front-img {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.front-img .front-title {
  font-weight: bold;
  margin-bottom: 0.3em;
}
.front-img .front-lead {
  font-size: 1.25em;
}

/* Section spacing and headings */
.section {
  padding: 0.5em 0 1em;
}
.section h2 {
  border-left: 0.35em solid #c83064;
  padding-left: 0.5em;
  margin-bottom: 0.6em;
}

/* vertically center columns in a row (desktop only; mobile stacks normally) */
@media (min-width: 768px) {
  .row-vcenter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* Facilities list */
.facility-list {
  list-style: none;
  padding-left: 0;
}
.facility-list > li {
  padding: 0.35em 0 0.35em 1.6em;
  position: relative;
  border-bottom: 1px dotted #e3c2cc;
}
.facility-list > li:before {
  content: "♨";
  color: #c83064;
  position: absolute;
  left: 0.2em;
}

/* Coupon code block */
pre.coupon {
  display: inline-block;
  font-size: 1.4em;
  letter-spacing: 0.12em;
  font-weight: bold;
  color: #c83064;
  background: #fdf4f7;
  border: 2px dashed #f4b5c0;
  padding: 0.4em 0.9em;
}

/* ==========================================================================
   Fan zone — NEW GAME! onsen tribute (everything scoped under .fan-zone /
   .site-footer so the top of the page is unaffected)
   ========================================================================== */
.fan-zone {
  --pink: #f4b5c0;
  --pink-soft: #fdf4f7;
  --accent: #c83064;
  --ink: #3a2730;
  --dark: #1f1620;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.9;
  overflow: hidden;
}
.fan-zone h2,
.fan-zone h3,
.fan-zone .fz-quote {
  font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
}

/* --- Key visual --- */
.fz-kv {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(40, 16, 30, 0.55), rgba(120, 40, 70, 0.45)),
    url(../img/front.jpg) center / cover no-repeat;
  background-attachment: fixed;
}
.fz-kv-inner { position: relative; z-index: 2; padding: 2.5em 1em; }
.fz-eyebrow {
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  font-size: 0.8rem;
  margin: 0 0 1.4em;
  opacity: 0.92;
}
.fz-kv-title {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 1.18;
  margin: 0;
  text-shadow: 0 2px 34px rgba(0, 0, 0, 0.45);
}
.fz-kv-title .fz-x { color: var(--pink); font-style: italic; margin: 0 0.12em; }
.fz-kv-sub {
  margin-top: 1.5em;
  font-size: clamp(1em, 2.2vw, 1.3em);
  letter-spacing: 0.18em;
}

/* steam */
.fz-steam { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fz-steam span {
  position: absolute;
  bottom: -60px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
  filter: blur(8px);
  animation: fz-rise 9s linear infinite;
}
.fz-steam span:nth-child(1) { left: 12%; animation-delay: 0s; }
.fz-steam span:nth-child(2) { left: 32%; animation-delay: 2.4s; transform: scale(1.4); }
.fz-steam span:nth-child(3) { left: 54%; animation-delay: 1.2s; }
.fz-steam span:nth-child(4) { left: 72%; animation-delay: 3.6s; transform: scale(1.7); }
.fz-steam span:nth-child(5) { left: 88%; animation-delay: 0.6s; }
@keyframes fz-rise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  20%  { opacity: 0.7; }
  100% { transform: translateY(-72vh) scale(1.9); opacity: 0; }
}

.fz-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; line-height: 0; }
.fz-wave svg { display: block; width: 100%; height: 60px; }

/* --- Bands --- */
.fz-band { position: relative; padding: clamp(3.5em, 9vw, 7em) 1.2em; }
.fz-band--light { background: linear-gradient(180deg, #fff, var(--pink-soft)); }
.fz-band--dark {
  background: radial-gradient(120% 130% at 50% 0%, #2a1d28, var(--dark));
  color: #f3e6ec;
}
.fz-band--accent {
  background: linear-gradient(135deg, var(--accent), #9a234c);
  color: #fff;
}
.fz-inner { max-width: 820px; margin: 0 auto; text-align: center; }

/* vertical label */
.fz-label { display: flex; justify-content: center; margin-bottom: 1em; }
.fz-label span {
  writing-mode: vertical-rl;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 700;
  letter-spacing: 0.35em;
  color: var(--accent);
  border-right: 2px solid var(--accent);
  padding: 0.35em 0.25em 0.35em 0;
}
.fz-band--dark .fz-label span,
.fz-band--accent .fz-label span { color: #fff; border-color: rgba(255, 255, 255, 0.6); }

/* headings */
.fz-h {
  display: inline-block;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 0.9em;
}
.fz-h::after {
  content: "♨";
  display: block;
  margin: 0.35em auto 0;
  font-size: 0.5em;
  color: var(--accent);
  opacity: 0.85;
}
.fz-h--light, .fz-h--light::after { color: #fff; }
.fz-h--light::after { color: var(--pink); }

.fz-lead { font-size: 1.2em; margin: 0; }
.fz-body { font-size: 1.2em; text-align: center; margin: 0; }
.fz-body strong { color: var(--pink); }
.fz-quote {
  margin: 1.4em 0 0;
  font-size: clamp(1.4em, 3vw, 2em);
  font-style: italic;
  color: var(--pink);
}

/* movie */
.fz-movie { margin-top: 1.5em; }
.fz-movie-frame {
  position: relative;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 22px 55px rgba(120, 30, 60, 0.28);
}
.fz-movie-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fz-movie-cap { margin: 1em 0 0; font-size: 0.9em; }
.fz-movie-cap a { color: var(--accent); }

/* links */
.fz-links { list-style: none; padding: 0; margin: 1.5em auto 0; max-width: 580px; }
.fz-links li { margin: 0.65em 0; }
.fz-links a {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.9em 1.3em;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.25s ease, background 0.25s ease;
}
.fz-links a:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.28); }
.fz-link-k {
  flex: none;
  padding: 0.25em 0.85em;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* footer */
.site-footer {
  background: #1f1620;
  color: #6f6470;
  text-align: center;
  padding: 2.2em 1.2em;
  font-size: 13px;
}
.site-footer .ff-disclaimer { margin: 0; font-weight: 400; letter-spacing: 0.04em; }

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .fz-steam { display: none; }
  .fz-kv { background-attachment: scroll; }
}

/* --- お客様の声 (character reviews) --- */
.fz-band--review { background: linear-gradient(180deg, var(--pink-soft), #fff); }
.fz-inner--wide { max-width: 1100px; }
.fz-note { margin: -0.3em 0 1.8em; font-size: 0.78rem; color: var(--accent); opacity: 0.65; }
.fz-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.1em;
  text-align: left;
}
.fz-review {
  display: flex;
  gap: 0.9em;
  margin: 0;
  padding: 1.2em 1.25em;
  background: #fff;
  border: 1px solid #f3dde4;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(120, 30, 60, 0.09);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fz-review:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(120, 30, 60, 0.16);
}
.fz-ava {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Shippori Mincho B1", serif;
  font-size: 1.4em;
  color: #fff;
  background: linear-gradient(135deg, var(--c1, #e58aa8), var(--c2, #c83064));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.fz-review figcaption { margin: 0; }
.fz-rev-name { margin: 0; font-weight: 700; font-size: 1em; color: var(--ink); }
.fz-rev-name span {
  display: inline-block;
  margin-left: 0.5em;
  font-weight: 400;
  font-size: 0.75em;
  color: #b59aa4;
}
.fz-rev-stars { margin: 0.15em 0 0.45em; color: var(--accent); font-size: 0.9em; letter-spacing: 0.12em; }
.fz-rev-text { margin: 0; font-size: 1.2em; line-height: 1.8; color: #4a3a42; }

/* --- layout spacing --- */
.main-content { padding-bottom: 3.5em; }

/* --- footer links --- */
.site-footer .ff-links {
  list-style: none;
  padding: 0;
  margin: 0 0 0.9em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35em 1.4em;
}
.site-footer .ff-links a {
  color: #8a7d86;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-footer .ff-links a:hover { color: #cbb6c2; border-bottom-color: currentColor; }

/* --- falling sakura petals --- */
.fz-petals { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.fz-petals span {
  position: absolute;
  top: -10%;
  width: 16px;
  aspect-ratio: 1;
  background: url(../img/sakura.svg) center / contain no-repeat;
  opacity: 0;
  will-change: transform;
  animation: fz-fall linear infinite;
}
@keyframes fz-fall {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { transform: translate3d(60px, 90vh, 0) rotate(420deg); opacity: 0; }
}
.fz-petals span:nth-child(1)  { left: 4%;  width: 16px; animation-duration: 11s;   animation-delay: 0s;   }
.fz-petals span:nth-child(2)  { left: 12%; width: 11px; animation-duration: 9s;    animation-delay: 2.5s; }
.fz-petals span:nth-child(3)  { left: 21%; width: 18px; animation-duration: 13s;   animation-delay: 1s;   }
.fz-petals span:nth-child(4)  { left: 30%; width: 20px; animation-duration: 10s;   animation-delay: 4s;   }
.fz-petals span:nth-child(5)  { left: 39%; width: 14px; animation-duration: 12s;   animation-delay: 0.8s; }
.fz-petals span:nth-child(6)  { left: 48%; width: 12px; animation-duration: 8.5s;  animation-delay: 3s;   }
.fz-petals span:nth-child(7)  { left: 57%; width: 17px; animation-duration: 12.5s; animation-delay: 1.6s; }
.fz-petals span:nth-child(8)  { left: 66%; width: 19px; animation-duration: 9.5s;  animation-delay: 4.5s; }
.fz-petals span:nth-child(9)  { left: 75%; width: 15px; animation-duration: 11.5s; animation-delay: 0.4s; }
.fz-petals span:nth-child(10) { left: 83%; width: 12px; animation-duration: 10.5s; animation-delay: 2.2s; }
.fz-petals span:nth-child(11) { left: 90%; width: 16px; animation-duration: 13.5s; animation-delay: 3.6s; }
.fz-petals span:nth-child(12) { left: 96%; width: 18px; animation-duration: 9s;    animation-delay: 1.2s; }

/* --- key-visual title glow --- */
.fz-kv-title { animation: fz-glow 5s ease-in-out infinite; }
@keyframes fz-glow {
  0%, 100% { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45); }
  50%      { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45), 0 0 26px rgba(255, 200, 220, 0.6); }
}

/* --- seigaiha wave texture on the dark band --- */
.fz-band .fz-inner { position: relative; z-index: 1; }
.fz-band--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../img/seigaiha.svg) repeat;
  background-size: 120px 60px;
  opacity: 0.02;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .fz-petals { display: none; }
  .fz-kv-title { animation: none; }
}

/* canvas particle layer (sakura + steam) */
.fz-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* がんばるぞい! cheer bubble on the 予約 button */
#iyasino-click { position: relative; }
/* keep the button's base look on focus (the <a> keeps focus after click) */
#iyasino-click:focus,
#iyasino-click.focus {
  background-color: #ae293a;
  border-color: #992433;
  outline: none;
  box-shadow: none;
}
#iyasino-click:hover {
  background-color: #851f2c;
  border-color: #681823;
}
#iyasino-click:focus-visible {
  outline: 2px solid #c83064;
  outline-offset: 2px;
}
.iy-cheer {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 8px;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #fff;
  color: #c83064;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  padding: 0.45em 0.85em;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(200, 48, 100, 0.3);
  pointer-events: none;
  z-index: 20;
  animation: iy-cheer-pop 1.1s ease-out forwards;
}
.iy-cheer::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #fff;
}
@keyframes iy-cheer-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.8); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(1); }
}

/* Konami toast */
.iy-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: #1f1620;
  color: #f4b5c0;
  font-size: 14px;
  font-weight: 700;
  padding: 0.8em 1.4em;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.iy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }