* { box-sizing: border-box; }

:root {
  --cream: #f7efe3;
  --cream-2: #fbf7f0;
  --leaf: #cfd4bc;
  --leaf-deep: #8d9574;
  --wood: #7f5d45;
  --wood-deep: #4f3628;
  --rose: #d8a4ae;
  --gold: #bf9a5b;
  --shadow: 0 24px 50px rgba(73, 48, 30, .12);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--wood-deep);
  font-family: "Noto Serif JP", serif;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.85), transparent 22%),
    radial-gradient(circle at 100% 12%, rgba(255,255,255,.65), transparent 25%),
    linear-gradient(180deg, #f8f1e6 0%, #f2e4d2 52%, #efe0cd 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .55;
  background-image:
    linear-gradient(rgba(170,133,90,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(170,133,90,.04) 1px, transparent 1px);
  background-size: 34px 34px;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.site-vines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.vine {
  position: absolute;
  top: 60px;
  width: min(18vw, 240px);
  opacity: .42;
  filter: saturate(.7) sepia(.08) drop-shadow(0 10px 18px rgba(92,69,49,.10));
}
.vine-left { left: -84px; }
.vine-right { right: -84px; transform: scaleX(-1); }

.global-header {
  position: sticky;
  top: 16px;
  z-index: 40;
  width: min(1240px, calc(100% - 32px));
  margin: 16px auto 0;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 999px;
  background: rgba(250, 245, 237, .72);
  border: 1px solid rgba(191,154,91,.18);
  box-shadow: 0 10px 24px rgba(80,57,38,.08);
  backdrop-filter: blur(10px);
}
.header-logo img {
  width: 152px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(90,63,39,.10));
}
.global-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: "Noto Sans JP", sans-serif;
}
.global-nav a {
  padding: 11px 16px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: .07em;
  font-weight: 700;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.global-nav a:hover {
  transform: translateY(-2px);
  background: rgba(207,212,188,.5);
}

.hero {
  position: relative;
  min-height: 1020px;
  padding: 70px 0 40px;
  overflow: clip;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 62% 20%, rgba(255,255,255,.7), transparent 28%),
    radial-gradient(circle at 78% 56%, rgba(238, 221, 198, .65), transparent 26%),
    linear-gradient(180deg, rgba(255,250,244,.35), rgba(246,235,221,.86)),
    url("assets/window_bg.png") center top / cover no-repeat;
  opacity: .50;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(242,228,210,0) 0%, rgba(242,228,210,.75) 40%, rgba(242,228,210,1) 100%);
  pointer-events: none;
}
.ornament-corner {
  position: absolute;
  top: 32px;
  right: max(18px, calc((100vw - 1240px) / 2));
  width: min(27vw, 320px);
  opacity: .42;
  pointer-events: none;
}
.wave {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(138vw, 1900px);
  max-width: none;
  pointer-events: none;
  filter: drop-shadow(0 10px 28px rgba(111,82,54,.10));
  animation: waveFloat 9s ease-in-out infinite;
}
.wave-soft { bottom: 34px; z-index: 7; opacity: .95; animation-delay: -1.8s; }
.wave-sage { bottom: 90px; z-index: 6; opacity: .78; animation-delay: -3.6s; }
.wave-gold { bottom: 142px; z-index: 5; opacity: .64; animation-delay: -5.1s; }

.hero-inner {
  position: relative;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  min-height: 860px;
  z-index: 10;
}
.hero-copy {
  position: relative;
  z-index: 18;
  width: min(520px, 48vw);
  padding-top: 28px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(191,154,91,.18);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
  color: #7d654e;
}
.eyebrow::before, .eyebrow::after {
  content: "";
  width: 18px; height: 1px;
  background: rgba(191,154,91,.65);
}
.main-logo {
  width: min(92%, 390px);
  margin-bottom: 16px;
  filter: drop-shadow(0 14px 20px rgba(79,54,34,.10));
}
.catch {
  margin: 0 0 18px;
  display: grid;
  gap: 6px;
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(32px, 4.1vw, 62px);
  line-height: 1.22;
  letter-spacing: .08em;
}
.catch span { display: block; }
.lead {
  margin: 0;
  max-width: 420px;
  font-size: 15px;
  line-height: 2;
  color: #6d5644;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

.hero-stage {
  position: absolute;
  inset: 20px 0 0 0;
  min-height: 800px;
}
.stage-row {
  position: absolute;
  right: 0;
  width: min(1000px, 78vw);
  pointer-events: none;
}
.stage-row img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 22px rgba(83,58,37,.12));
}
.stage-back {
  top: 150px;
  right: 40px;
  z-index: 8;
  width: min(980px, 76vw);
}
.stage-mid {
  top: 272px;
  right: 120px;
  z-index: 12;
  width: min(840px, 66vw);
}
.stage-front {
  bottom: 76px;
  right: 24px;
  z-index: 16;
  width: min(1120px, 87vw);
}

.ability-stream {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ability {
  position: absolute;
  bottom: -26%;
  font-family: "Zen Old Mincho", serif;
  writing-mode: vertical-rl;
  letter-spacing: .16em;
  color: rgba(88,62,42,.64);
  text-shadow: 0 0 18px rgba(255,255,255,.42);
  opacity: 0;
}
body.scrolled .ability { animation: riseWord 5.1s linear infinite; }
.size-l { font-size: clamp(26px, 2.4vw, 42px); }
.size-m { font-size: clamp(18px, 1.7vw, 30px); }
.size-s { font-size: clamp(14px, 1.2vw, 22px); }
.depth-back { z-index: 7; opacity: .46; }
.depth-mid { z-index: 13; opacity: .58; }
.depth-front { z-index: 20; opacity: .72; }
.pos-01 { left: 46%; animation-delay: -.6s; }
.pos-02 { left: 72%; animation-delay: -1.8s; }
.pos-03 { left: 87%; animation-delay: -3.2s; }
.pos-04 { left: 58%; animation-delay: -2.4s; }
.pos-05 { left: 33%; animation-delay: -4.3s; }
.pos-06 { left: 78%; animation-delay: -1.2s; }
.pos-07 { left: 93%; animation-delay: -2.8s; }
.pos-08 { left: 52%; animation-delay: -4.8s; }
.pos-09 { left: 66%; animation-delay: -3.8s; }
.pos-10 { left: 24%; animation-delay: -.9s; }
.pos-11 { left: 81%; animation-delay: -5.4s; }
.pos-12 { left: 39%; animation-delay: -2.1s; }

.section-block {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto 34px;
  position: relative;
  z-index: 3;
}
.section-head {
  margin-bottom: 22px;
}
.section-head span {
  display: inline-block;
  margin-bottom: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(191,154,91,.16);
  color: var(--leaf-deep);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 700;
}
.section-head h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: .07em;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(280px, 1.1fr);
  gap: 24px;
  align-items: stretch;
}
.about-photo, .about-copy, .work-card, .contact-card {
  background: rgba(255, 251, 245, .72);
  border: 1px solid rgba(191,154,91,.16);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.about-photo {
  min-height: 300px;
  border-radius: 34px;
  position: relative;
  overflow: hidden;
}
.about-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 26% 22%, rgba(255,255,255,.92), transparent 18%),
    linear-gradient(135deg, rgba(207,212,188,.55), rgba(255,247,240,.72));
}
.about-photo::after {
  content: "";
  position: absolute;
  inset: auto 24px 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(125,101,78,.09);
  filter: blur(12px);
}
.about-photo.placeholder div {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  z-index: 2;
}
.about-photo strong {
  display: block;
  margin-bottom: 12px;
  font-size: 22px;
}
.about-photo p { margin: 0; color: #77604c; }
.about-copy {
  border-radius: 34px;
  padding: 34px 34px 32px;
  display: flex;
  align-items: center;
}
.about-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 2.15;
  color: #6c5542;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.work-card {
  padding: 30px 28px;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
}
.work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.66), transparent 34%),
    linear-gradient(135deg, rgba(248,237,222,.44), rgba(221,232,206,.28));
  z-index: 0;
}
.work-card > * { position: relative; z-index: 1; }
.work-no {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--gold);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 12px;
}
.work-card h3 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.4;
}
.work-card p {
  margin: 0;
  color: #6e5947;
  line-height: 1.95;
  font-size: 14px;
}
.contact-card {
  border-radius: 28px;
  padding: 26px 30px;
}
.contact-card p {
  margin: 0;
  line-height: 1.9;
  color: #6e5947;
}

@keyframes waveFloat {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-16px); }
}
@keyframes riseWord {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: .95; }
  88% { opacity: .78; }
  100% { transform: translateY(-142vh); opacity: 0; }
}

@media (max-width: 1180px) {
  .hero { min-height: 980px; }
  .hero-copy { width: min(480px, 52vw); }
  .stage-back { right: 0; }
  .stage-mid { right: 80px; }
  .stage-front { right: 0; }
}

@media (max-width: 980px) {
  .global-header {
    border-radius: 28px;
    flex-direction: column;
  }
  .hero {
    min-height: 1160px;
    padding-top: 50px;
  }
  .hero-inner {
    min-height: 1020px;
  }
  .hero-copy {
    width: min(100%, 520px);
    padding-top: 0;
  }
  .hero-stage {
    position: relative;
    margin-top: 36px;
    min-height: 640px;
  }
  .stage-row { width: 95%; }
  .stage-back { top: 0; right: 0; }
  .stage-mid { top: 100px; right: 30px; width: 82%; }
  .stage-front { top: 250px; bottom: auto; right: 0; width: 98%; }
  .about-grid, .works-grid { grid-template-columns: 1fr; }
  .vine { width: 180px; opacity: .26; }
}

@media (max-width: 640px) {
  .global-header {
    width: calc(100% - 18px);
    margin-top: 8px;
    top: 8px;
    padding: 12px;
  }
  .header-logo img { width: 132px; height: 50px; }
  .global-nav { justify-content: center; }
  .global-nav a { font-size: 12px; padding: 8px 12px; }
  .hero {
    min-height: 1040px;
    padding-top: 32px;
  }
  .hero-inner {
    width: calc(100% - 20px);
    min-height: 980px;
  }
  .main-logo { width: 250px; }
  .catch { font-size: 32px; }
  .lead { font-size: 14px; max-width: 100%; }
  .hero-stage { min-height: 520px; margin-top: 24px; }
  .stage-back { width: 140%; left: -18%; right: auto; top: 22px; }
  .stage-mid { width: 120%; left: -7%; right: auto; top: 150px; }
  .stage-front { width: 152%; left: -20%; right: auto; top: 260px; }
  .ability { letter-spacing: .08em; }
  .ornament-corner { width: 190px; right: 4px; opacity: .30; }
  .wave { width: 180vw; }
  .wave-soft { bottom: 16px; }
  .wave-sage { bottom: 52px; }
  .wave-gold { bottom: 92px; }
  .section-block { width: calc(100% - 20px); }
  .about-copy, .work-card, .contact-card { padding: 24px 18px; border-radius: 24px; }
  .about-photo { min-height: 240px; border-radius: 24px; }
  .about-copy p { font-size: 14px; line-height: 1.95; }
  .work-card h3 { font-size: 20px; }
}


/* ===== Step7: uploaded 3-row header layer placement ===== */
.hero-stage{
  inset: 0 0 0 0;
  min-height: 840px;
}
.stage-row{
  position:absolute;
  pointer-events:none;
}
.stage-row img{
  width:100%;
  height:auto;
  object-fit:contain;
}
.stage-back{
  top: 18px !important;
  right: -12px !important;
  z-index: 7 !important;
  width: min(1040px, 79vw) !important;
  opacity: .96;
  filter: drop-shadow(0 16px 20px rgba(83,58,37,.10));
}
.stage-mid{
  top: 235px !important;
  right: 8px !important;
  z-index: 12 !important;
  width: min(960px, 72vw) !important;
  opacity: .98;
  filter: drop-shadow(0 18px 22px rgba(83,58,37,.12));
}
.stage-front{
  top: 430px !important;
  right: -34px !important;
  bottom: auto !important;
  z-index: 17 !important;
  width: min(1120px, 84vw) !important;
  opacity: 1;
  filter: drop-shadow(0 20px 24px rgba(83,58,37,.14));
}
.stage-front::after,
.stage-mid::after,
.stage-back::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:18%;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(242,228,210,0), rgba(242,228,210,.72));
  opacity:.46;
}
.stage-back::after{ height:22%; opacity:.32; }
.stage-mid::after{ height:16%; opacity:.26; }
.stage-front::after{ height:12%; opacity:.22; }

@media (max-width: 1180px){
  .stage-back{
    top: 40px !important;
    right: -80px !important;
    width: 86vw !important;
  }
  .stage-mid{
    top: 260px !important;
    right: -20px !important;
    width: 80vw !important;
  }
  .stage-front{
    top: 455px !important;
    right: -60px !important;
    width: 92vw !important;
  }
}
@media (max-width: 980px){
  .hero-stage{
    min-height: 720px;
  }
  .stage-back{
    top: 10px !important;
    right: -28vw !important;
    width: 118vw !important;
  }
  .stage-mid{
    top: 185px !important;
    right: -18vw !important;
    width: 110vw !important;
  }
  .stage-front{
    top: 350px !important;
    right: -22vw !important;
    width: 124vw !important;
  }
}
@media (max-width: 640px){
  .hero{
    min-height: 1120px;
  }
  .hero-stage{
    min-height: 640px;
  }
  .stage-back{
    top: 10px !important;
    left: auto !important;
    right: -48vw !important;
    width: 165vw !important;
  }
  .stage-mid{
    top: 190px !important;
    left: auto !important;
    right: -42vw !important;
    width: 152vw !important;
  }
  .stage-front{
    top: 340px !important;
    left: auto !important;
    right: -50vw !important;
    width: 170vw !important;
  }
}


/* ===== Step8: requested header relayer ===== */
.global-nav a:first-child::after{
  content:"";
}
.hero{
  min-height: 900px;
  padding-top: 72px;
  background:
    radial-gradient(circle at 82% 30%, rgba(255,255,255,.54), transparent 34%),
    linear-gradient(180deg, #f7ecdb 0%, #f0dec5 54%, #ead3b7 100%) !important;
}
.hero-bg{
  opacity:.44 !important;
  mix-blend-mode:multiply;
}
.ornament-corner{
  z-index:3 !important;
  opacity:.22 !important;
  width:min(24vw,260px) !important;
}
.hero-inner{
  width:min(1340px, calc(100% - 52px)) !important;
  min-height:790px !important;
}
.hero-copy{
  position:absolute !important;
  left:0 !important;
  top:118px !important;
  width:min(425px, 34vw) !important;
  z-index:18 !important;
  padding-top:0 !important;
}
.eyebrow{
  margin-bottom:12px !important;
  padding:7px 14px !important;
  font-size:10px !important;
  opacity:.82;
}
.main-logo{
  width:min(230px, 82%) !important;
  margin:0 0 20px !important;
  opacity:.88 !important;
  filter:drop-shadow(0 10px 18px rgba(82,52,31,.13)) !important;
  mix-blend-mode:multiply;
}
.catch{
  display:grid !important;
  gap:10px !important;
  max-width:440px !important;
  margin:0 !important;
  font-size:clamp(19px, 2.0vw, 31px) !important;
  line-height:1.65 !important;
  letter-spacing:.12em !important;
  color:#3d281d !important;
  text-shadow:0 1px 0 rgba(255,255,255,.44) !important;
}
.catch span{
  display:block !important;
  background:rgba(255,250,240,.30);
  width:max-content;
  max-width:100%;
  padding:2px 6px;
}
.hero-stage{
  position:absolute !important;
  inset:0 0 0 auto !important;
  width:min(1020px, 73vw) !important;
  min-height:760px !important;
  z-index:12 !important;
}
.stage-row{
  position:absolute !important;
  pointer-events:none !important;
}
.stage-row img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 18px 24px rgba(63,42,29,.15)) !important;
}
.stage-back{
  top:18px !important;
  right:52px !important;
  width:min(840px, 61vw) !important;
  z-index:8 !important;
  opacity:.88;
}
.stage-mid{
  top:180px !important;
  right:30px !important;
  width:min(780px, 58vw) !important;
  z-index:13 !important;
  opacity:.95;
}
.stage-front{
  top:348px !important;
  right:-18px !important;
  bottom:auto !important;
  width:min(860px, 64vw) !important;
  z-index:20 !important;
  opacity:1;
}
.wave{
  z-index:34 !important;
}
.wave-soft{
  bottom:12px !important;
  opacity:.96 !important;
}
.wave-sage{
  bottom:74px !important;
  opacity:.72 !important;
}
.wave-gold{
  bottom:120px !important;
  opacity:.58 !important;
}
.site-vines{
  z-index:2 !important;
  pointer-events:none !important;
}
.vine{
  opacity:.20 !important;
}
.ability-stream{
  z-index:24 !important;
}
.ability{
  opacity:.33 !important;
}
@media(max-width: 960px){
  .hero{min-height:980px !important;}
  .hero-inner{min-height:880px !important;}
  .hero-copy{
    top:60px !important;
    width:min(92vw,520px) !important;
  }
  .main-logo{width:190px !important;}
  .catch{font-size:clamp(18px,4.8vw,27px) !important;}
  .hero-stage{
    width:100% !important;
    right:0 !important;
    top:220px !important;
  }
  .stage-back{
    top:0 !important;
    right:0 !important;
    width:min(96vw,780px) !important;
  }
  .stage-mid{
    top:160px !important;
    right:1vw !important;
    width:min(92vw,740px) !important;
  }
  .stage-front{
    top:330px !important;
    right:-2vw !important;
    width:min(98vw,780px) !important;
  }
}
@media(max-width: 560px){
  .hero{min-height:850px !important; padding-top:60px !important;}
  .hero-inner{width:calc(100% - 24px) !important; min-height:760px !important;}
  .hero-copy{top:42px !important;}
  .eyebrow{font-size:9px !important;}
  .main-logo{width:150px !important;}
  .catch{font-size:18px !important; line-height:1.55 !important; letter-spacing:.06em !important;}
  .hero-stage{top:260px !important;}
  .stage-back{width:102vw !important; right:-18vw !important; opacity:.82;}
  .stage-mid{top:126px !important; width:104vw !important; right:-20vw !important;}
  .stage-front{top:278px !important; width:110vw !important; right:-22vw !important;}
  .wave{width:170vw !important;}
}


/* ===== Step9: header balance / wave placement / vertical text fix ===== */
.hero{
  min-height: 900px !important;
}
.hero-stage{
  width:min(1000px, 72vw) !important;
  min-height:760px !important;
}

/* 2列目・3列目を縮小。1列目は基準として維持 */
.stage-back{
  top:56px !important;
  right:92px !important;
  width:min(650px, 48vw) !important;
  z-index:8 !important;
  opacity:.86 !important;
}
.stage-mid{
  top:222px !important;
  right:96px !important;
  width:min(610px, 45vw) !important;
  z-index:13 !important;
  opacity:.94 !important;
}
.stage-front{
  top:365px !important;
  right:-10px !important;
  width:min(820px, 61vw) !important;
  z-index:20 !important;
  opacity:1 !important;
}

/* 波：1列目の下に配置。最下段の1枚を一番手前で固定 */
.wave{
  pointer-events:none !important;
  max-width:none !important;
}
.wave-soft{
  position:absolute !important;
  left:50% !important;
  bottom:58px !important;
  width:min(1000px, 72vw) !important;
  z-index:35 !important;
  opacity:.92 !important;
  transform:translateX(-50%) !important;
  animation:none !important;
}
.wave-sage{
  bottom:118px !important;
  width:min(920px, 66vw) !important;
  z-index:18 !important;
  opacity:.54 !important;
}
.wave-gold{
  bottom:176px !important;
  width:min(860px, 62vw) !important;
  z-index:17 !important;
  opacity:.42 !important;
}

/* 縦文字：一列に固まらないよう、各語を個別レイヤー化して散らす */
.ability-stream{
  position:absolute !important;
  inset:0 !important;
  overflow:visible !important;
  z-index:24 !important;
  pointer-events:none !important;
}
.ability{
  position:absolute !important;
  display:block !important;
  writing-mode:vertical-rl !important;
  text-orientation:upright !important;
  white-space:nowrap !important;
  line-height:1.05 !important;
  letter-spacing:.14em !important;
  opacity:.30 !important;
  font-family:"Zen Old Mincho","Noto Serif JP",serif !important;
  color:rgba(74,45,33,.58) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.42) !important;
  animation-name:abilityRiseFree !important;
  animation-timing-function:linear !important;
  animation-iteration-count:infinite !important;
}
.ability.size-s{font-size:17px !important;}
.ability.size-m{font-size:23px !important;}
.ability.size-l{font-size:31px !important;}
.ability.pos-01{left:8% !important; top:82% !important; animation-duration:9.4s !important; animation-delay:-1.1s !important;}
.ability.pos-02{left:21% !important; top:112% !important; animation-duration:7.6s !important; animation-delay:-3.5s !important;}
.ability.pos-03{left:38% !important; top:96% !important; animation-duration:10.8s !important; animation-delay:-5.2s !important;}
.ability.pos-04{left:54% !important; top:122% !important; animation-duration:8.8s !important; animation-delay:-.7s !important;}
.ability.pos-05{left:68% !important; top:104% !important; animation-duration:11.5s !important; animation-delay:-7.4s !important;}
.ability.pos-06{left:81% !important; top:88% !important; animation-duration:7.9s !important; animation-delay:-4.4s !important;}
.ability.pos-07{left:92% !important; top:116% !important; animation-duration:10.2s !important; animation-delay:-2.1s !important;}
@keyframes abilityRiseFree{
  0%{ transform:translateY(90px); opacity:0; }
  12%{ opacity:.34; }
  78%{ opacity:.28; }
  100%{ transform:translateY(-760px); opacity:0; }
}

@media(max-width: 960px){
  .hero{min-height:930px !important;}
  .hero-stage{
    top:230px !important;
    width:100% !important;
  }
  .stage-back{
    top:8px !important;
    right:4vw !important;
    width:min(76vw, 610px) !important;
  }
  .stage-mid{
    top:150px !important;
    right:4vw !important;
    width:min(74vw, 590px) !important;
  }
  .stage-front{
    top:305px !important;
    right:-3vw !important;
    width:min(92vw, 760px) !important;
  }
  .wave-soft{
    bottom:54px !important;
    width:min(105vw, 820px) !important;
  }
  .wave-sage{
    bottom:105px !important;
    width:min(96vw, 760px) !important;
  }
  .wave-gold{
    bottom:150px !important;
    width:min(88vw, 700px) !important;
  }
}
@media(max-width: 560px){
  .hero{min-height:830px !important;}
  .hero-stage{top:255px !important;}
  .stage-back{
    top:0 !important;
    right:-4vw !important;
    width:82vw !important;
  }
  .stage-mid{
    top:126px !important;
    right:-5vw !important;
    width:82vw !important;
  }
  .stage-front{
    top:278px !important;
    right:-14vw !important;
    width:112vw !important;
  }
  .wave-soft{
    bottom:42px !important;
    width:118vw !important;
  }
  .wave-sage{
    bottom:92px !important;
    width:104vw !important;
  }
  .wave-gold{
    bottom:136px !important;
    width:96vw !important;
  }
  .ability.size-s{font-size:13px !important;}
  .ability.size-m{font-size:17px !important;}
  .ability.size-l{font-size:22px !important;}
}


/* ===== Step10: lift character rows / show full bottom wave / logo shift ===== */

/* ロゴマーク・文字を少し右へ */
.hero-copy{
  left:clamp(56px, 7.2vw, 118px) !important;
}
.hero-logo{
  margin-left:18px !important;
}
.hero-title,
.hero-lead{
  transform:translateX(18px) !important;
}

/* 1列目を上へ。2列目の少し下に近づけ、全列をまとめて上へ */
.stage-back{
  top:24px !important;
  right:96px !important;
  width:min(615px, 45vw) !important;
}
.stage-mid{
  top:180px !important;
  right:96px !important;
  width:min(610px, 45vw) !important;
}
.stage-front{
  top:272px !important;
  right:-10px !important;
  width:min(820px, 61vw) !important;
}

/* 3列目を少し縮小 */
.stage-back{
  transform:translateY(-6px) scale(.94) !important;
  transform-origin:top right !important;
}

/* 波は下に合わせて全体表示 */
.wave-soft{
  bottom:0 !important;
  left:50% !important;
  width:min(1040px, 76vw) !important;
  z-index:35 !important;
  object-fit:contain !important;
}
.wave-sage{
  bottom:64px !important;
  width:min(980px, 70vw) !important;
}
.wave-gold{
  bottom:112px !important;
  width:min(920px, 66vw) !important;
}

/* ヒーローの余白を詰めすぎず、上へ上げた列が収まるよう調整 */
.hero-stage{
  min-height:720px !important;
}

/* 縦文字の開始位置も上がった構図に合わせて少し散らす */
.ability.pos-01{left:9% !important; top:76% !important;}
.ability.pos-02{left:25% !important; top:105% !important;}
.ability.pos-03{left:42% !important; top:90% !important;}
.ability.pos-04{left:57% !important; top:113% !important;}
.ability.pos-05{left:70% !important; top:97% !important;}
.ability.pos-06{left:82% !important; top:82% !important;}
.ability.pos-07{left:93% !important; top:108% !important;}

@media(max-width: 960px){
  .hero-copy{
    left:clamp(26px, 6vw, 60px) !important;
  }
  .hero-logo{
    margin-left:10px !important;
  }
  .hero-title,
  .hero-lead{
    transform:translateX(10px) !important;
  }
  .stage-back{
    top:-22px !important;
    right:2vw !important;
    width:min(70vw, 565px) !important;
    transform:translateY(-4px) scale(.94) !important;
  }
  .stage-mid{
    top:104px !important;
    right:3vw !important;
    width:min(72vw, 575px) !important;
  }
  .stage-front{
    top:218px !important;
    right:-4vw !important;
    width:min(92vw, 760px) !important;
  }
  .wave-soft{
    bottom:0 !important;
    width:min(108vw, 860px) !important;
  }
  .wave-sage{
    bottom:52px !important;
    width:min(100vw, 780px) !important;
  }
  .wave-gold{
    bottom:96px !important;
    width:min(92vw, 720px) !important;
  }
}

@media(max-width: 560px){
  .hero{
    min-height:790px !important;
  }
  .hero-stage{
    top:238px !important;
    min-height:620px !important;
  }
  .stage-back{
    top:-28px !important;
    right:-7vw !important;
    width:76vw !important;
    transform:translateY(-4px) scale(.92) !important;
  }
  .stage-mid{
    top:82px !important;
    right:-6vw !important;
    width:80vw !important;
  }
  .stage-front{
    top:190px !important;
    right:-16vw !important;
    width:112vw !important;
  }
  .wave-soft{
    bottom:0 !important;
    width:124vw !important;
  }
  .wave-sage{
    bottom:42px !important;
    width:110vw !important;
  }
  .wave-gold{
    bottom:82px !important;
    width:102vw !important;
  }
}


/* ===== Step11: second row right / all rows higher / full-width wave / menu-like nav ===== */

/* 文字は左へ */
.hero-copy{
  left:clamp(30px, 4.4vw, 76px) !important;
}
.hero-title,
.hero-lead{
  transform:translateX(-8px) !important;
}

/* Gardenia Caffè をCSS側でも非表示 */
.brand-sub,
.logo-sub,
.hero-subtitle,
.en-title,
[class*="caffe"],
[class*="cafe"]{
  display:none !important;
}

/* ロゴマークを拡大し、左側上の中心へ */
.hero-logo{
  width:clamp(184px, 17vw, 292px) !important;
  max-width:none !important;
  margin-left:clamp(38px, 8.5vw, 132px) !important;
  margin-top:6px !important;
  margin-bottom:18px !important;
  opacity:.96 !important;
  filter:drop-shadow(0 14px 28px rgba(69,43,24,.16)) !important;
}

/* 2列目をかなり右へ。全体を上へ */
.stage-back{
  top:0px !important;
  right:92px !important;
  width:min(590px, 43vw) !important;
  transform:translateY(-18px) scale(.92) !important;
  transform-origin:top right !important;
}
.stage-mid{
  top:126px !important;
  right:-38px !important;
  width:min(610px, 45vw) !important;
  transform:translateY(-18px) !important;
  transform-origin:top right !important;
}
.stage-front{
  top:212px !important;
  right:-24px !important;
  width:min(820px, 61vw) !important;
  transform:translateY(-22px) !important;
  transform-origin:bottom right !important;
}

/* 波だけサイトの両端に届くように */
.wave-soft{
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100vw !important;
  max-width:none !important;
  min-width:100vw !important;
  transform:none !important;
  object-fit:fill !important;
  z-index:36 !important;
  pointer-events:none !important;
}
.wave-sage,
.wave-gold{
  left:0 !important;
  right:0 !important;
  width:100vw !important;
  max-width:none !important;
  min-width:100vw !important;
  transform:none !important;
  object-fit:fill !important;
}
.wave-sage{
  bottom:56px !important;
}
.wave-gold{
  bottom:98px !important;
}

/* グローバルナビ：角丸を外し、メニュー表風 */
.global-nav,
.header-nav,
.site-nav,
nav{
  border-radius:0 !important;
}
.global-nav a,
.header-nav a,
.site-nav a,
nav a{
  border-radius:0 !important;
}
.global-nav,
.header-nav,
.site-nav{
  background:
    linear-gradient(180deg, rgba(255,250,236,.96), rgba(236,222,191,.94)) !important;
  border:1px solid rgba(109,79,43,.45) !important;
  border-top:3px double rgba(128,91,46,.58) !important;
  border-bottom:3px double rgba(128,91,46,.58) !important;
  box-shadow:
    0 10px 22px rgba(64,42,25,.12),
    inset 0 0 0 1px rgba(255,255,255,.58) !important;
  padding:8px 10px !important;
  gap:0 !important;
}
.global-nav a,
.header-nav a,
.site-nav a{
  background:transparent !important;
  border:0 !important;
  border-left:1px solid rgba(117,86,49,.34) !important;
  padding:9px 17px !important;
  color:#4a321d !important;
  letter-spacing:.08em !important;
  font-family:"Noto Serif JP", "Yu Mincho", serif !important;
  box-shadow:none !important;
}
.global-nav a:first-child,
.header-nav a:first-child,
.site-nav a:first-child{
  border-left:0 !important;
}
.global-nav a:hover,
.header-nav a:hover,
.site-nav a:hover{
  background:rgba(104,139,104,.13) !important;
}

/* ヘッダー高さは上げた分を自然に保つ */
.hero-stage{
  min-height:700px !important;
}

@media(max-width: 960px){
  .hero-copy{
    left:clamp(22px, 4vw, 42px) !important;
  }
  .hero-logo{
    width:clamp(160px, 24vw, 230px) !important;
    margin-left:clamp(24px, 7vw, 78px) !important;
  }
  .stage-back{
    top:-54px !important;
    right:0vw !important;
    width:min(66vw, 535px) !important;
    transform:translateY(-12px) scale(.90) !important;
  }
  .stage-mid{
    top:62px !important;
    right:-13vw !important;
    width:min(71vw, 565px) !important;
    transform:translateY(-16px) !important;
  }
  .stage-front{
    top:168px !important;
    right:-11vw !important;
    width:min(93vw, 748px) !important;
    transform:translateY(-18px) !important;
  }
  .wave-soft,
  .wave-sage,
  .wave-gold{
    width:100vw !important;
    min-width:100vw !important;
  }
}

@media(max-width: 560px){
  .hero{
    min-height:760px !important;
  }
  .hero-stage{
    top:220px !important;
    min-height:600px !important;
  }
  .hero-logo{
    width:156px !important;
    margin-left:28px !important;
  }
  .stage-back{
    top:-58px !important;
    right:-6vw !important;
    width:70vw !important;
    transform:translateY(-10px) scale(.88) !important;
  }
  .stage-mid{
    top:54px !important;
    right:-22vw !important;
    width:78vw !important;
    transform:translateY(-16px) !important;
  }
  .stage-front{
    top:152px !important;
    right:-21vw !important;
    width:112vw !important;
    transform:translateY(-18px) !important;
  }
  .global-nav,
  .header-nav,
  .site-nav{
    padding:6px 4px !important;
    overflow-x:auto !important;
  }
  .global-nav a,
  .header-nav a,
  .site-nav a{
    padding:8px 12px !important;
    white-space:nowrap !important;
  }
}


/* ===== Step12: logo decoration remove / rows scale / wave down / text left ===== */

/* ロゴマーク上の模様・白い枠を消す */
.logo-ornament,
.logo-flourish,
.hero-logo-ornament,
.brand-ornament,
.logo-frame,
.hero-logo-frame,
.hero-emblem-frame,
.logo-mark-frame,
.frame-line,
.white-frame,
.hero-white-frame,
.hero .ornament-top,
.hero .ornament,
.hero [class*="ornament"],
.hero [class*="flourish"],
.hero [class*="white-frame"],
.hero [class*="logo-frame"]{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* ロゴ自体は透過PNGとして表示し、不要な枠背景を出さない */
.hero-logo,
.logo-mark,
.brand-logo{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* 文字をさらに左へ移動 */
.hero-copy{
  left:clamp(16px, 2.6vw, 48px) !important;
}
.hero-title,
.hero-lead{
  transform:translateX(-22px) !important;
}

/* 2列目をさらに右へ。1・2・3列目を全体的に拡大 */
.stage-back{
  top:-4px !important;
  right:86px !important;
  width:min(660px, 48vw) !important;
  transform:translateY(-18px) scale(1.02) !important;
  transform-origin:top right !important;
}
.stage-mid{
  top:118px !important;
  right:-110px !important;
  width:min(720px, 52vw) !important;
  transform:translateY(-20px) scale(1.06) !important;
  transform-origin:top right !important;
}
.stage-front{
  top:202px !important;
  right:-54px !important;
  width:min(920px, 67vw) !important;
  transform:translateY(-20px) scale(1.04) !important;
  transform-origin:bottom right !important;
}

/* 波をかなり下へ移動。縦文字の出現場所を上に確保 */
.wave-soft,
.wave-sage,
.wave-gold{
  pointer-events:none !important;
}
.wave-soft{
  bottom:-118px !important;
  opacity:.88 !important;
  z-index:34 !important;
}
.wave-sage{
  bottom:-74px !important;
  opacity:.58 !important;
  z-index:31 !important;
}
.wave-gold{
  bottom:-40px !important;
  opacity:.42 !important;
  z-index:30 !important;
}

/* 固定している波は透明度0 */
.wave-fixed,
.fixed-wave,
.wave-anchor,
.wave-front-fixed,
.wave-bottom-fixed,
.wave-lock,
.hero-wave-fixed,
.wave-soft.is-fixed,
.wave-sage.is-fixed,
.wave-gold.is-fixed{
  opacity:0 !important;
}

/* 縦文字が波の上側で散って見えるように出現位置を再調整 */
.vertical-words,
.ability-words,
.floating-words{
  bottom:88px !important;
  height:72% !important;
  z-index:42 !important;
}
.vertical-words span,
.ability-words span,
.floating-words span,
.ability-word{
  bottom:-18% !important;
}

/* ヘッダー内の装飾線・白枠の取り残し対策 */
.hero-stage::before,
.hero-stage::after,
.hero-logo-wrap::before,
.hero-logo-wrap::after,
.brand-area::before,
.brand-area::after{
  border-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* 拡大後も右側が自然に収まるように */
.hero-stage{
  overflow:visible !important;
}

@media(max-width: 960px){
  .hero-copy{
    left:24px !important;
  }
  .hero-title,
  .hero-lead{
    transform:translateX(-14px) !important;
  }
  .stage-back{
    top:-58px !important;
    right:-2vw !important;
    width:min(72vw, 610px) !important;
    transform:translateY(-14px) scale(1.0) !important;
  }
  .stage-mid{
    top:58px !important;
    right:-22vw !important;
    width:min(82vw, 650px) !important;
    transform:translateY(-16px) scale(1.03) !important;
  }
  .stage-front{
    top:154px !important;
    right:-18vw !important;
    width:min(106vw, 840px) !important;
    transform:translateY(-18px) scale(1.02) !important;
  }
  .wave-soft{
    bottom:-104px !important;
  }
  .wave-sage{
    bottom:-66px !important;
  }
  .wave-gold{
    bottom:-32px !important;
  }
}

@media(max-width: 560px){
  .hero-copy{
    left:20px !important;
  }
  .stage-back{
    top:-64px !important;
    right:-10vw !important;
    width:80vw !important;
  }
  .stage-mid{
    top:50px !important;
    right:-32vw !important;
    width:92vw !important;
  }
  .stage-front{
    top:142px !important;
    right:-28vw !important;
    width:126vw !important;
  }
  .wave-soft{
    bottom:-86px !important;
  }
  .wave-sage{
    bottom:-52px !important;
  }
  .wave-gold{
    bottom:-26px !important;
  }
}


/* ===== Step13: logo centered above copy / wave motion / remove dash frame ===== */

/* ― ― と見える枠を完全削除 */
.eyebrow,
.eyebrow::before,
.eyebrow::after,
.hero-copy .eyebrow{
  display:none !important;
  content:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* 文字を左側真ん中に設置 */
.hero-copy{
  left:clamp(24px, 4.1vw, 72px) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:min(470px, 34vw) !important;
  z-index:24 !important;
  padding-top:0 !important;
}

/* ロゴマークを文の真ん中上に設置 */
.main-logo,
.hero-logo,
.logo-mark,
.brand-logo{
  display:block !important;
  width:clamp(190px, 18vw, 300px) !important;
  max-width:none !important;
  margin:0 auto 20px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 14px 24px rgba(70,43,24,.14)) !important;
}

.catch{
  text-align:center !important;
  margin:0 auto !important;
  max-width:470px !important;
  transform:none !important;
}
.catch span{
  margin-left:auto !important;
  margin-right:auto !important;
  background:transparent !important;
  padding:0 !important;
}

/* 2列目を少しだけ縮小し、少し右へ */
.stage-mid{
  right:-132px !important;
  width:min(690px, 50vw) !important;
  transform:translateY(-20px) scale(1.00) !important;
  transform-origin:top right !important;
}

/* 全体バランス保持 */
.stage-back{
  width:min(660px, 48vw) !important;
}
.stage-front{
  width:min(920px, 67vw) !important;
}

/* 波：スクロールで動かすため、CSS側の固定を解除。縦幅も調整 */
.wave{
  left:50% !important;
  right:auto !important;
  width:100vw !important;
  min-width:100vw !important;
  max-width:none !important;
  height:auto !important;
  object-fit:fill !important;
  transform:translateX(-50%) !important;
  animation:none !important;
}
.wave-soft{
  bottom:-104px !important;
  z-index:36 !important;
  opacity:.72 !important;
  max-height:230px !important;
}
.wave-sage{
  bottom:-52px !important;
  z-index:31 !important;
  opacity:.50 !important;
  max-height:185px !important;
}
.wave-gold{
  bottom:-8px !important;
  z-index:30 !important;
  opacity:.38 !important;
  max-height:150px !important;
}

/* 固定波の透明度0指定を解除し、最前面の波は薄く動かす */
.wave-fixed,
.fixed-wave,
.wave-anchor,
.wave-front-fixed,
.wave-bottom-fixed,
.wave-lock,
.hero-wave-fixed,
.wave-soft.is-fixed,
.wave-sage.is-fixed,
.wave-gold.is-fixed{
  opacity:0 !important;
}

/* 縦文字の出現場所は波の上に確保 */
.ability-stream{
  z-index:40 !important;
}
.ability.pos-01{top:70% !important;}
.ability.pos-02{top:96% !important;}
.ability.pos-03{top:82% !important;}
.ability.pos-04{top:104% !important;}
.ability.pos-05{top:88% !important;}
.ability.pos-06{top:74% !important;}
.ability.pos-07{top:98% !important;}

@media(max-width: 960px){
  .hero-copy{
    left:clamp(18px, 4vw, 42px) !important;
    top:34% !important;
    width:min(500px, 86vw) !important;
  }
  .main-logo,
  .hero-logo,
  .logo-mark,
  .brand-logo{
    width:clamp(168px, 26vw, 230px) !important;
  }
  .stage-mid{
    right:-24vw !important;
    width:min(78vw, 620px) !important;
  }
  .wave-soft{
    bottom:-92px !important;
    max-height:190px !important;
  }
  .wave-sage{
    bottom:-48px !important;
    max-height:160px !important;
  }
  .wave-gold{
    bottom:-12px !important;
    max-height:130px !important;
  }
}

@media(max-width: 560px){
  .hero-copy{
    left:16px !important;
    top:28% !important;
    width:calc(100% - 32px) !important;
  }
  .catch{
    text-align:left !important;
  }
  .catch span{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .main-logo,
  .hero-logo,
  .logo-mark,
  .brand-logo{
    margin-left:auto !important;
    margin-right:auto !important;
    width:158px !important;
  }
  .stage-mid{
    right:-34vw !important;
    width:88vw !important;
  }
  .wave-soft{
    bottom:-76px !important;
    max-height:155px !important;
  }
  .wave-sage{
    bottom:-42px !important;
    max-height:130px !important;
  }
  .wave-gold{
    bottom:-14px !important;
    max-height:110px !important;
  }
}


/* ===== Step14: requested header position refinements ===== */

/* 文字とロゴマーク全体を左上へ移動 */
.hero-copy{
  left:clamp(18px, 2.8vw, 46px) !important;
  top:34% !important;
  transform:translateY(-50%) !important;
  width:min(450px, 33vw) !important;
}
.main-logo,
.hero-logo,
.logo-mark,
.brand-logo{
  width:clamp(180px, 16vw, 276px) !important;
  margin:0 auto 16px !important;
}
.catch{
  font-size:clamp(18px, 1.85vw, 29px) !important;
  line-height:1.62 !important;
}

/* 三列目を少し縮小 */
.stage-back{
  width:min(630px, 45vw) !important;
  transform:translateY(-18px) scale(.96) !important;
  transform-origin:top right !important;
}

/* 2列目を少し下、少し右へ */
.stage-mid{
  top:138px !important;
  right:-152px !important;
  width:min(680px, 49vw) !important;
  transform:translateY(-14px) scale(.98) !important;
  transform-origin:top right !important;
}

/* 波は位置を維持。下が見切れてもよいので幅を少し戻す */
.wave{
  width:112vw !important;
  min-width:112vw !important;
  max-width:none !important;
}
.wave-soft{
  bottom:-104px !important;
  width:112vw !important;
  min-width:112vw !important;
  max-height:260px !important;
}
.wave-sage{
  bottom:-52px !important;
  width:110vw !important;
  min-width:110vw !important;
  max-height:210px !important;
}
.wave-gold{
  bottom:-8px !important;
  width:108vw !important;
  min-width:108vw !important;
  max-height:175px !important;
}

@media(max-width: 960px){
  .hero-copy{
    left:18px !important;
    top:26% !important;
    width:min(470px, 82vw) !important;
  }
  .main-logo,
  .hero-logo,
  .logo-mark,
  .brand-logo{
    width:clamp(158px, 23vw, 218px) !important;
  }
  .stage-back{
    width:min(68vw, 580px) !important;
    transform:translateY(-14px) scale(.94) !important;
  }
  .stage-mid{
    top:74px !important;
    right:-27vw !important;
    width:min(76vw, 610px) !important;
    transform:translateY(-12px) scale(.97) !important;
  }
  .wave,
  .wave-soft{
    width:118vw !important;
    min-width:118vw !important;
  }
  .wave-sage{
    width:116vw !important;
    min-width:116vw !important;
  }
  .wave-gold{
    width:114vw !important;
    min-width:114vw !important;
  }
}

@media(max-width: 560px){
  .hero-copy{
    left:14px !important;
    top:22% !important;
    width:calc(100% - 28px) !important;
  }
  .main-logo,
  .hero-logo,
  .logo-mark,
  .brand-logo{
    width:148px !important;
  }
  .stage-back{
    width:74vw !important;
    transform:translateY(-10px) scale(.92) !important;
  }
  .stage-mid{
    top:64px !important;
    right:-38vw !important;
    width:86vw !important;
    transform:translateY(-10px) scale(.96) !important;
  }
  .wave,
  .wave-soft{
    width:130vw !important;
    min-width:130vw !important;
  }
  .wave-sage{
    width:124vw !important;
    min-width:124vw !important;
  }
  .wave-gold{
    width:120vw !important;
    min-width:120vw !important;
  }
}


/* ===== Step15: remove waves / move copy left / offset white caption boxes ===== */

/* 波を一度削除 */
.wave,
.wave-soft,
.wave-sage,
.wave-gold,
[class*="wave"]{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* 文字とロゴマーク全体を左へ移動 */
.hero-copy{
  left:clamp(0px, 1.1vw, 18px) !important;
  top:32% !important;
  transform:translateY(-50%) !important;
  width:min(500px, 36vw) !important;
  z-index:28 !important;
}

/* ロゴは文字の中央上を維持しつつ、全体として左側へ */
.main-logo,
.hero-logo,
.logo-mark,
.brand-logo{
  width:clamp(178px, 16vw, 272px) !important;
  margin:0 auto 18px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* コピー2行それぞれの後ろに、半分から右斜め下へずらした白い四角枠 */
.catch{
  display:grid !important;
  gap:18px !important;
  max-width:500px !important;
  margin:0 auto !important;
  text-align:left !important;
  font-size:clamp(18px, 1.85vw, 29px) !important;
  line-height:1.55 !important;
  letter-spacing:.105em !important;
  color:#3b261b !important;
}
.catch span{
  position:relative !important;
  display:block !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  z-index:1 !important;
}
.catch span::before{
  content:"" !important;
  position:absolute !important;
  left:48% !important;
  top:52% !important;
  width:58% !important;
  height:1.55em !important;
  background:rgba(255,255,255,.62) !important;
  border:1px solid rgba(118,84,52,.12) !important;
  box-shadow:0 10px 20px rgba(78,52,31,.08) !important;
  z-index:-1 !important;
}

/* 波を消したぶん、縦文字の表示スペースを少し下まで広げる */
.ability-stream{
  z-index:22 !important;
}
.ability.pos-01{top:80% !important;}
.ability.pos-02{top:108% !important;}
.ability.pos-03{top:92% !important;}
.ability.pos-04{top:116% !important;}
.ability.pos-05{top:100% !important;}
.ability.pos-06{top:86% !important;}
.ability.pos-07{top:110% !important;}

@media(max-width: 960px){
  .hero-copy{
    left:14px !important;
    top:25% !important;
    width:min(500px, 86vw) !important;
  }
  .main-logo,
  .hero-logo,
  .logo-mark,
  .brand-logo{
    width:clamp(156px, 24vw, 218px) !important;
  }
  .catch{
    font-size:clamp(17px, 3.6vw, 25px) !important;
    gap:14px !important;
  }
  .catch span::before{
    left:44% !important;
    width:62% !important;
  }
}

@media(max-width: 560px){
  .hero-copy{
    left:12px !important;
    top:22% !important;
    width:calc(100% - 24px) !important;
  }
  .main-logo,
  .hero-logo,
  .logo-mark,
  .brand-logo{
    width:146px !important;
  }
  .catch{
    font-size:17px !important;
    line-height:1.5 !important;
    letter-spacing:.055em !important;
  }
  .catch span{
    max-width:calc(100vw - 34px) !important;
  }
  .catch span::before{
    left:40% !important;
    width:65% !important;
    height:1.45em !important;
  }
}


/* ===== Step16: caption white boxes / shorter header height ===== */

/* ヘッダー自体の縦幅を少し狭める */
.hero{
  min-height:820px !important;
  padding-top:58px !important;
  padding-bottom:20px !important;
}
.hero-inner{
  min-height:720px !important;
}
.hero-stage{
  min-height:650px !important;
}

/* 狭めたヘッダーに合わせて3列も少し上へ詰める */
.stage-back{
  top:-22px !important;
}
.stage-mid{
  top:116px !important;
}
.stage-front{
  top:184px !important;
}

/* キャッチコピー裏の白枠：もう少し細く、2文字目の下から始まる位置へ */
.catch span::before{
  left:1.05em !important;
  top:.74em !important;
  width:calc(100% - .65em) !important;
  height:.92em !important;
  background:rgba(255,255,255,.58) !important;
  border:1px solid rgba(118,84,52,.10) !important;
  box-shadow:0 8px 16px rgba(78,52,31,.07) !important;
}

/* 文字とロゴの収まりを縦幅短縮に合わせて微調整 */
.hero-copy{
  top:30% !important;
}
.main-logo,
.hero-logo,
.logo-mark,
.brand-logo{
  margin-bottom:14px !important;
}
.catch{
  gap:16px !important;
}

@media(max-width: 960px){
  .hero{
    min-height:850px !important;
    padding-top:48px !important;
  }
  .hero-inner{
    min-height:760px !important;
  }
  .hero-stage{
    top:210px !important;
    min-height:610px !important;
  }
  .stage-back{
    top:-70px !important;
  }
  .stage-mid{
    top:52px !important;
  }
  .stage-front{
    top:132px !important;
  }
  .hero-copy{
    top:23% !important;
  }
  .catch span::before{
    left:.95em !important;
    top:.72em !important;
    width:calc(100% - .55em) !important;
    height:.9em !important;
  }
}

@media(max-width: 560px){
  .hero{
    min-height:710px !important;
    padding-top:42px !important;
  }
  .hero-inner{
    min-height:650px !important;
  }
  .hero-stage{
    top:200px !important;
    min-height:520px !important;
  }
  .stage-back{
    top:-74px !important;
  }
  .stage-mid{
    top:42px !important;
  }
  .stage-front{
    top:122px !important;
  }
  .hero-copy{
    top:20% !important;
  }
  .catch{
    gap:12px !important;
  }
  .catch span::before{
    left:.9em !important;
    top:.72em !important;
    width:calc(100% - .45em) !important;
    height:.86em !important;
  }
}


/* ===== Step17: uploaded ornaments / transition layers / larger 3 rows ===== */

/* 文字とロゴマーク全体をさらに左へ */
.hero-copy{
  left:clamp(0px, .7vw, 14px) !important;
  top:30% !important;
  width:min(500px, 35vw) !important;
}
.main-logo,
.hero-logo,
.logo-mark,
.brand-logo{
  margin-left:auto !important;
  margin-right:auto !important;
}
.catch{
  max-width:500px !important;
}

/* 1・2・3列目を少し拡大 */
.stage-back{
  width:min(665px, 48vw) !important;
  transform:translateY(-18px) scale(1.00) !important;
}
.stage-mid{
  width:min(720px, 52vw) !important;
  transform:translateY(-14px) scale(1.02) !important;
}
.stage-front{
  width:min(960px, 70vw) !important;
  transform:translateY(-10px) scale(1.03) !important;
}

/* 既存波は今回も非表示 */
.wave,
.wave-soft,
.wave-sage,
.wave-gold,
[class*="wave"]{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* 新規：ヘッダー左下・右下の装飾 */
.new-header-ornament{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:4;
  opacity:.78;
  filter:drop-shadow(0 14px 24px rgba(72,48,29,.10));
}
.new-header-left-ornament{
  left:-72px;
  bottom:26px;
  width:min(25vw, 300px);
}
.new-header-right-ornament{
  right:-26px;
  bottom:-20px;
  width:min(29vw, 360px);
  z-index:32;
  opacity:.92;
}

/* ヘッダーと次セクションの間の重なり装飾 */
.gardenia-transition-ornaments{
  position:relative;
  z-index:26;
  width:100vw;
  height:180px;
  margin:-92px 0 34px;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
  overflow:visible;
}
.transition-ornament{
  position:absolute;
  left:50%;
  width:100vw;
  max-width:none;
  transform:translateX(-50%);
  object-fit:fill;
  user-select:none;
  pointer-events:none;
}
.transition-base{
  bottom:-36px;
  z-index:1;
  width:104vw;
  opacity:.70;
  filter:drop-shadow(0 14px 20px rgba(76,56,32,.08));
}
.transition-cream{
  bottom:-14px;
  z-index:2;
  width:102vw;
  opacity:.78;
}
.transition-sage{
  bottom:10px;
  z-index:3;
  width:101vw;
  opacity:.66;
}
.transition-line{
  bottom:64px;
  z-index:4;
  width:100vw;
  opacity:.74;
}

/* 次セクションが装飾に埋もれないように */
.section-block{
  position:relative;
  z-index:28;
}

/* 縦幅を少しだけ保ち、下装飾との重なりを作る */
.hero{
  min-height:820px !important;
  padding-bottom:0 !important;
}
.hero-inner{
  min-height:720px !important;
}

@media(max-width: 960px){
  .hero-copy{
    left:10px !important;
    width:min(500px, 86vw) !important;
  }
  .stage-back{
    width:min(72vw, 610px) !important;
  }
  .stage-mid{
    width:min(82vw, 650px) !important;
  }
  .stage-front{
    width:min(112vw, 850px) !important;
  }
  .new-header-left-ornament{
    left:-62px;
    bottom:34px;
    width:210px;
  }
  .new-header-right-ornament{
    right:-42px;
    bottom:-16px;
    width:260px;
  }
  .gardenia-transition-ornaments{
    height:140px;
    margin:-72px 0 28px;
  }
  .transition-line{
    bottom:50px;
  }
}

@media(max-width: 560px){
  .hero-copy{
    left:8px !important;
    width:calc(100% - 18px) !important;
  }
  .stage-back{
    width:78vw !important;
  }
  .stage-mid{
    width:94vw !important;
  }
  .stage-front{
    width:132vw !important;
  }
  .new-header-left-ornament{
    left:-78px;
    bottom:38px;
    width:190px;
    opacity:.62;
  }
  .new-header-right-ornament{
    right:-82px;
    bottom:-20px;
    width:230px;
  }
  .gardenia-transition-ornaments{
    height:118px;
    margin:-56px 0 24px;
  }
  .transition-base{
    bottom:-26px;
    width:126vw;
  }
  .transition-cream{
    bottom:-10px;
    width:122vw;
  }
  .transition-sage{
    bottom:8px;
    width:120vw;
  }
  .transition-line{
    bottom:42px;
    width:116vw;
  }
}


/* ===== Step18: taller header / keep waves below first row ===== */

/* ヘッダーの縦幅を広げる */
.hero{
  min-height:940px !important;
  padding-bottom:90px !important;
}
.hero-inner{
  min-height:840px !important;
}
.hero-stage{
  min-height:810px !important;
}

/* 1列目の下に波・装飾が被らないよう、キャラ列を少し上、下装飾を下へ逃がす */
.stage-front{
  top:174px !important;
  z-index:24 !important;
}
.stage-mid{
  top:106px !important;
}
.stage-back{
  top:-30px !important;
}

/* ヘッダー左右装飾もキャラ足元に被りすぎないよう微調整 */
.new-header-left-ornament{
  bottom:-4px !important;
  z-index:3 !important;
}
.new-header-right-ornament{
  bottom:-42px !important;
  z-index:21 !important;
}

/* ヘッダーと次セクション間の波・蔦装飾を下へ移動。
   1列目の足元の下に余白を作り、重なりを避ける */
.gardenia-transition-ornaments{
  height:230px !important;
  margin:-28px 0 40px !important;
  z-index:18 !important;
}
.transition-base{
  bottom:-92px !important;
  z-index:1 !important;
}
.transition-cream{
  bottom:-68px !important;
  z-index:2 !important;
}
.transition-sage{
  bottom:-38px !important;
  z-index:3 !important;
}
.transition-line{
  bottom:10px !important;
  z-index:4 !important;
}

/* 文字とロゴは前回の位置を維持しつつ、広げたヘッダー内に自然に収める */
.hero-copy{
  top:29% !important;
}

/* 次セクションは装飾の下から開始 */
.section-block{
  z-index:28 !important;
}

@media(max-width: 960px){
  .hero{
    min-height:980px !important;
    padding-bottom:80px !important;
  }
  .hero-inner{
    min-height:880px !important;
  }
  .hero-stage{
    min-height:760px !important;
  }
  .stage-front{
    top:142px !important;
  }
  .stage-mid{
    top:42px !important;
  }
  .stage-back{
    top:-80px !important;
  }
  .gardenia-transition-ornaments{
    height:190px !important;
    margin:-18px 0 34px !important;
  }
  .transition-base{
    bottom:-78px !important;
  }
  .transition-cream{
    bottom:-58px !important;
  }
  .transition-sage{
    bottom:-34px !important;
  }
  .transition-line{
    bottom:4px !important;
  }
}

@media(max-width: 560px){
  .hero{
    min-height:850px !important;
    padding-bottom:68px !important;
  }
  .hero-inner{
    min-height:760px !important;
  }
  .hero-stage{
    min-height:650px !important;
  }
  .stage-front{
    top:130px !important;
  }
  .stage-mid{
    top:34px !important;
  }
  .stage-back{
    top:-84px !important;
  }
  .new-header-left-ornament{
    bottom:-20px !important;
  }
  .new-header-right-ornament{
    bottom:-58px !important;
  }
  .gardenia-transition-ornaments{
    height:150px !important;
    margin:-8px 0 28px !important;
  }
  .transition-base{
    bottom:-58px !important;
  }
  .transition-cream{
    bottom:-42px !important;
  }
  .transition-sage{
    bottom:-22px !important;
  }
  .transition-line{
    bottom:6px !important;
  }
}


/* ===== Step19: slightly shorter header height ===== */

/* ヘッダー縦幅を少しだけ狭める */
.hero{
  min-height:890px !important;
  padding-bottom:58px !important;
}
.hero-inner{
  min-height:790px !important;
}
.hero-stage{
  min-height:760px !important;
}

/* 縦幅短縮に合わせ、下部装飾は被りすぎない範囲で少し上げる */
.gardenia-transition-ornaments{
  height:205px !important;
  margin:-34px 0 36px !important;
}

/* 1列目への被りを避けたまま全体を少し詰める */
.stage-front{
  top:164px !important;
}
.stage-mid{
  top:100px !important;
}
.stage-back{
  top:-34px !important;
}

/* 左側コピー位置もわずかに上へ */
.hero-copy{
  top:28% !important;
}

@media(max-width: 960px){
  .hero{
    min-height:930px !important;
    padding-bottom:62px !important;
  }
  .hero-inner{
    min-height:830px !important;
  }
  .hero-stage{
    min-height:720px !important;
  }
  .gardenia-transition-ornaments{
    height:170px !important;
    margin:-22px 0 32px !important;
  }
  .stage-front{
    top:134px !important;
  }
  .stage-mid{
    top:38px !important;
  }
  .stage-back{
    top:-84px !important;
  }
}

@media(max-width: 560px){
  .hero{
    min-height:810px !important;
    padding-bottom:54px !important;
  }
  .hero-inner{
    min-height:720px !important;
  }
  .hero-stage{
    min-height:610px !important;
  }
  .gardenia-transition-ornaments{
    height:136px !important;
    margin:-10px 0 26px !important;
  }
  .stage-front{
    top:124px !important;
  }
  .stage-mid{
    top:30px !important;
  }
  .stage-back{
    top:-88px !important;
  }
}


/* ===== Step20: stable responsive header / about image right / nav character ===== */

/* ヘッダーの位置関係・大きさをブラウザ幅が変わっても崩れにくい比率固定へ */
.hero{
  position:relative !important;
  min-height:clamp(760px, 64vw, 910px) !important;
  padding-top:clamp(42px, 4.5vw, 64px) !important;
  padding-bottom:clamp(48px, 4vw, 64px) !important;
  overflow:hidden !important;
}
.hero-inner{
  position:relative !important;
  width:min(1360px, calc(100vw - 36px)) !important;
  min-height:clamp(680px, 58vw, 820px) !important;
  margin:0 auto !important;
}

/* 文字・ロゴは左エリア内で比率固定 */
.hero-copy{
  position:absolute !important;
  left:clamp(0px, 1.2vw, 18px) !important;
  top:clamp(120px, 18vw, 245px) !important;
  transform:none !important;
  width:clamp(300px, 33vw, 500px) !important;
  z-index:30 !important;
}
.main-logo,
.hero-logo,
.logo-mark,
.brand-logo{
  width:clamp(170px, 16vw, 270px) !important;
  margin:0 auto 14px !important;
}
.catch{
  font-size:clamp(18px, 1.85vw, 29px) !important;
  line-height:1.55 !important;
  max-width:500px !important;
}

/* 右側キャラクター3列は同じステージ内の割合配置に統一 */
.hero-stage{
  position:absolute !important;
  top:clamp(16px, 2vw, 28px) !important;
  right:clamp(-28px, -1.2vw, -10px) !important;
  width:clamp(760px, 72vw, 1080px) !important;
  height:clamp(560px, 48vw, 720px) !important;
  min-height:0 !important;
  overflow:visible !important;
  transform-origin:top right !important;
}
.stage-row{
  position:absolute !important;
  pointer-events:none !important;
}
.stage-row img{
  width:100% !important;
  height:auto !important;
  display:block !important;
}
.stage-back{
  top:0% !important;
  right:6% !important;
  width:48% !important;
  transform:scale(.98) !important;
  transform-origin:top right !important;
  z-index:8 !important;
}
.stage-mid{
  top:18% !important;
  right:-10% !important;
  width:55% !important;
  transform:scale(.98) !important;
  transform-origin:top right !important;
  z-index:13 !important;
}
.stage-front{
  top:28% !important;
  right:-4% !important;
  width:72% !important;
  transform:scale(1.03) !important;
  transform-origin:top right !important;
  z-index:24 !important;
}

/* 追加装飾もステージに干渉しない固定比率へ */
.new-header-left-ornament{
  left:clamp(-88px, -4vw, -46px) !important;
  bottom:clamp(-18px, -1vw, 0px) !important;
  width:clamp(190px, 19vw, 300px) !important;
}
.new-header-right-ornament{
  right:clamp(-80px, -3vw, -34px) !important;
  bottom:clamp(-58px, -3vw, -34px) !important;
  width:clamp(240px, 26vw, 380px) !important;
}

/* ヘッダー下の装飾は横幅に固定しつつ、セクション境界で安定 */
.gardenia-transition-ornaments{
  width:100vw !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  height:clamp(150px, 14vw, 210px) !important;
  margin:clamp(-34px, -2.4vw, -18px) 0 clamp(28px, 3vw, 40px) !important;
}
.transition-ornament{
  width:100vw !important;
  min-width:100vw !important;
  max-width:none !important;
}

/* 喫茶ガーデニアって？：枠なし・背景と一体化。画像は右側 */
.about-grid-photo-right{
  display:grid !important;
  grid-template-columns:minmax(320px, .95fr) minmax(360px, 1.05fr) !important;
  gap:clamp(28px, 4vw, 58px) !important;
  align-items:center !important;
}
.about-grid-photo-right .about-copy{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
.about-grid-photo-right .about-copy p{
  font-size:clamp(15px, 1.18vw, 18px) !important;
  line-height:2.15 !important;
}
.about-photo-real{
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.about-photo-real img{
  width:100% !important;
  height:auto !important;
  border-radius:0 !important;
  box-shadow:none !important;
  display:block !important;
  mix-blend-mode:multiply;
  opacity:.92;
}

/* ナビ3番目：キャラクター */
.nav-anchor{
  position:relative;
  top:-90px;
  height:0;
}

@media(max-width: 980px){
  .hero{
    min-height:clamp(780px, 105vw, 980px) !important;
  }
  .hero-copy{
    top:clamp(82px, 16vw, 135px) !important;
    left:18px !important;
    width:min(500px, 84vw) !important;
  }
  .hero-stage{
    top:clamp(230px, 30vw, 300px) !important;
    right:-18vw !important;
    width:116vw !important;
    height:70vw !important;
  }
  .about-grid-photo-right{
    grid-template-columns:1fr !important;
  }
  .about-photo-real{
    order:2;
  }
}

@media(max-width: 560px){
  .hero{
    min-height:760px !important;
  }
  .hero-copy{
    top:74px !important;
    left:12px !important;
    width:calc(100% - 24px) !important;
  }
  .main-logo,
  .hero-logo,
  .logo-mark,
  .brand-logo{
    width:146px !important;
  }
  .catch{
    font-size:17px !important;
  }
  .hero-stage{
    top:210px !important;
    right:-42vw !important;
    width:155vw !important;
    height:92vw !important;
  }
  .new-header-left-ornament{
    width:180px !important;
    left:-82px !important;
  }
  .new-header-right-ornament{
    width:220px !important;
    right:-86px !important;
  }
}


/* ===== Step21: replace header waves / enlarge rows / move copy left ===== */
.wave{ display:none !important; }

.gardenia-transition-ornaments.header-wave-stack{
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: clamp(180px, 17vw, 270px) !important;
  margin: clamp(-52px, -3.6vw, -26px) 0 clamp(22px, 2.6vw, 36px) !important;
  pointer-events: none !important;
  z-index: 12 !important;
  overflow: visible !important;
}
.header-wave-stack .header-wave{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(100vw, 1700px) !important;
  max-width: none !important;
  min-width: 100vw !important;
  height: auto !important;
  display: block !important;
}
.header-wave-stack .back-wave{
  bottom: 26px !important;
  z-index: 1 !important;
  opacity: .95 !important;
  filter: drop-shadow(0 10px 18px rgba(84, 63, 40, .10));
}
.header-wave-stack .front-wave{
  bottom: 0 !important;
  z-index: 2 !important;
  opacity: .98 !important;
  filter: drop-shadow(0 12px 20px rgba(84, 63, 40, .10));
}

.hero-copy{
  left: clamp(-72px, -5.5vw, -34px) !important;
  top: clamp(114px, 17vw, 236px) !important;
  width: clamp(320px, 35vw, 540px) !important;
}
.main-logo,
.hero-logo,
.logo-mark,
.brand-logo{
  margin: 0 auto 14px 0 !important;
}
.catch{
  max-width: 560px !important;
}

.hero-stage{
  right: clamp(-48px, -2.5vw, -20px) !important;
  width: clamp(860px, 78vw, 1180px) !important;
  height: clamp(600px, 52vw, 780px) !important;
}
.stage-back{
  top: -1% !important;
  right: 4% !important;
  width: 53% !important;
  transform: scale(1.05) !important;
}
.stage-mid{
  top: 16% !important;
  right: -11% !important;
  width: 60% !important;
  transform: scale(1.05) !important;
}
.stage-front{
  top: 27% !important;
  right: -6% !important;
  width: 79% !important;
  transform: scale(1.08) !important;
}

@media (max-width: 980px){
  .hero-copy{
    left: 10px !important;
    width: min(520px, 86vw) !important;
  }
  .hero-stage{
    right: -22vw !important;
    width: 124vw !important;
    height: 76vw !important;
  }
  .header-wave-stack{
    height: clamp(140px, 21vw, 220px) !important;
    margin: -12px 0 26px !important;
  }
  .header-wave-stack .header-wave{
    width: 128vw !important;
    min-width: 128vw !important;
  }
}

@media (max-width: 560px){
  .hero-copy{
    left: 8px !important;
    width: calc(100% - 16px) !important;
  }
  .hero-stage{
    right: -47vw !important;
    width: 164vw !important;
    height: 98vw !important;
  }
  .header-wave-stack{
    height: 120px !important;
    margin: -6px 0 20px !important;
  }
  .header-wave-stack .header-wave{
    width: 150vw !important;
    min-width: 150vw !important;
  }
}


/* ===== Step22: shop info page / contact page / top works coming soon ===== */
.shop-info-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:22px;
  padding:12px 24px;
  border:1px solid rgba(111,78,43,.40);
  border-top:3px double rgba(111,78,43,.46);
  border-bottom:3px double rgba(111,78,43,.46);
  background:linear-gradient(180deg, rgba(255,252,242,.86), rgba(230,214,181,.64));
  color:#4a321d;
  font-family:"Noto Serif JP", serif;
  letter-spacing:.12em;
  box-shadow:0 12px 24px rgba(77,50,27,.10);
}
.shop-info-button:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg, rgba(255,255,248,.92), rgba(219,230,202,.66));
}
.coming-soon-card{
  width:min(760px, 100%);
  margin:0 auto;
  padding:44px 34px;
  text-align:center;
  background:rgba(255,250,238,.48);
  border-top:1px solid rgba(126,95,58,.22);
  border-bottom:1px solid rgba(126,95,58,.22);
}
.coming-soon-card span{
  display:block;
  margin-bottom:14px;
  font-family:"Zen Old Mincho", serif;
  font-size:clamp(34px, 4.6vw, 62px);
  letter-spacing:.12em;
  color:rgba(72,49,31,.82);
}
.coming-soon-card p{
  margin:0;
  font-size:clamp(15px, 1.4vw, 18px);
  letter-spacing:.08em;
  line-height:1.9;
  color:#6d5644;
}

.subpage{
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.85), transparent 22%),
    radial-gradient(circle at 100% 12%, rgba(255,255,255,.65), transparent 25%),
    linear-gradient(180deg, #f8f1e6 0%, #f2e4d2 52%, #efe0cd 100%);
}
.sub-header{
  position:sticky;
}
.subpage-main{
  width:min(1180px, calc(100% - 40px));
  margin:70px auto 110px;
}
.page-kicker{
  display:inline-block;
  margin-bottom:12px;
  color:#87906b;
  font-family:"Noto Sans JP", sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.shop-hero-detail{
  display:grid;
  grid-template-columns:minmax(280px,.86fr) minmax(360px,1.14fr);
  gap:clamp(28px, 4vw, 60px);
  align-items:center;
  margin-bottom:70px;
}
.shop-hero-copy h1,
.contact-form-section h1{
  margin:0 0 18px;
  font-family:"Zen Old Mincho", serif;
  font-size:clamp(34px, 4.6vw, 64px);
  line-height:1.2;
  letter-spacing:.08em;
}
.shop-hero-copy p,
.contact-form-section p{
  margin:0;
  color:#6d5644;
  line-height:2;
}
.shop-hero-detail img{
  width:100%;
  height:auto;
  display:block;
  box-shadow:none;
  border:0;
}
.info-story-block{
  margin:0 auto 74px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.info-story-block h2{
  margin:0 0 20px;
  font-family:"Zen Old Mincho", serif;
  font-size:clamp(28px, 3.2vw, 46px);
  letter-spacing:.08em;
  color:#3a281d;
}
.info-story-block p{
  margin:0 0 24px;
  max-width:900px;
  color:#5f4a38;
  line-height:2.15;
  font-size:clamp(15px, 1.25vw, 18px);
}
.info-image{
  margin:28px 0 38px;
  position:relative;
}
.info-image img{
  width:100%;
  height:auto;
  display:block;
  border:0;
  box-shadow:0 22px 44px rgba(71,48,29,.12);
}
.info-image.wide img{
  box-shadow:none;
}
.menu-image-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:26px;
  align-items:start;
  margin:24px 0 30px;
}
.zoomable{
  overflow:hidden;
}
.zoom-button{
  position:absolute;
  top:14px;
  right:14px;
  z-index:5;
  border:1px solid rgba(82,55,31,.36);
  background:rgba(255,251,241,.88);
  color:#4a321d;
  padding:8px 13px;
  font-family:"Noto Serif JP", serif;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(63,42,24,.14);
}
.image-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:62px 24px 24px;
  background:rgba(33,22,15,.76);
}
.image-modal.is-open{
  display:flex;
}
.image-modal img{
  max-width:96vw;
  max-height:88vh;
  object-fit:contain;
  background:#fffdf5;
}
.modal-close{
  position:absolute;
  top:18px;
  right:22px;
  z-index:1001;
  border:1px solid rgba(255,255,255,.46);
  background:rgba(255,252,244,.92);
  color:#3d281d;
  padding:10px 18px;
  font-family:"Noto Serif JP", serif;
  cursor:pointer;
}
.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:900;
  width:52px;
  height:52px;
  border:1px solid rgba(91,63,36,.36);
  background:rgba(255,250,239,.86);
  color:#4a321d;
  font-size:24px;
  font-family:"Noto Serif JP", serif;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(70,45,25,.18);
}
.contact-main{
  width:min(860px, calc(100% - 40px));
}
.contact-form-section{
  background:rgba(255,250,238,.52);
  border-top:1px solid rgba(126,95,58,.22);
  border-bottom:1px solid rgba(126,95,58,.22);
  padding:42px clamp(18px, 4vw, 54px) 52px;
}
.contact-form{
  display:grid;
  gap:20px;
  margin-top:32px;
}
.contact-form label{
  display:grid;
  gap:8px;
  font-family:"Noto Serif JP", serif;
  color:#4b3424;
  letter-spacing:.06em;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  border:1px solid rgba(105,75,44,.30);
  background:rgba(255,252,245,.82);
  padding:13px 14px;
  color:#3d281d;
  font:inherit;
  outline:none;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:rgba(104,139,104,.72);
  box-shadow:0 0 0 3px rgba(104,139,104,.12);
}
.contact-form button{
  justify-self:start;
  border:1px solid rgba(111,78,43,.42);
  border-top:3px double rgba(111,78,43,.46);
  border-bottom:3px double rgba(111,78,43,.46);
  background:linear-gradient(180deg, rgba(255,252,242,.92), rgba(230,214,181,.72));
  color:#4a321d;
  padding:13px 28px;
  font-family:"Noto Serif JP", serif;
  letter-spacing:.12em;
  cursor:pointer;
}

@media(max-width:820px){
  .shop-hero-detail,
  .menu-image-grid{
    grid-template-columns:1fr;
  }
  .subpage-main{
    width:calc(100% - 28px);
    margin-top:48px;
  }
}


/* ===== Step23: header row2 / logo-copy / footer ===== */

/* 2列目を約2cm右へ移動 */
.stage-mid{
  right:calc(-11% - 75px) !important;
}

/* ロゴマークをキャッチコピーの真ん中上へ。
   ロゴ＋キャッチコピー全体をかなり左・上へ配置 */
.hero-copy{
  left:clamp(-112px, -8.2vw, -62px) !important;
  top:clamp(68px, 9.2vw, 128px) !important;
  width:clamp(330px, 36vw, 560px) !important;
  transform:none !important;
  text-align:center !important;
}
.main-logo,
.hero-logo,
.logo-mark,
.brand-logo{
  display:block !important;
  width:clamp(180px, 16vw, 280px) !important;
  margin:0 auto 15px !important;
}
.catch{
  text-align:center !important;
  margin:0 auto !important;
  max-width:560px !important;
}
.catch span{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* TOPページ下のお問い合わせ欄の残骸が出ないよう保険 */
main > .contact.section-block{
  display:none !important;
}

/* Actor風フッター */
.actor-style-footer{
  position:relative;
  z-index:50;
  margin-top:80px;
  background:
    linear-gradient(180deg, rgba(69,45,31,.94), rgba(42,28,21,.98)),
    radial-gradient(circle at 18% 0%, rgba(208,174,110,.18), transparent 30%);
  color:#fff8ec;
  border-top:1px solid rgba(216,182,117,.46);
}
.footer-inner{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
  padding:46px 0 34px;
  display:grid;
  gap:24px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:18px;
}
.footer-brand img{
  width:150px;
  height:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));
}
.footer-brand p{
  margin:0;
  color:rgba(255,248,236,.78);
  letter-spacing:.10em;
  line-height:1.8;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-top:1px solid rgba(255,248,236,.16);
  border-bottom:1px solid rgba(255,248,236,.16);
}
.footer-links a{
  padding:12px 18px;
  color:rgba(255,248,236,.82);
  border-left:1px solid rgba(255,248,236,.12);
  font-size:14px;
  letter-spacing:.08em;
}
.footer-links a:first-child{
  border-left:0;
}
.footer-links a:hover,
.footer-social a:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}
.footer-social{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  padding:10px 16px;
  color:#fff8ec;
  border:1px solid rgba(255,248,236,.26);
  background:rgba(255,255,255,.04);
  letter-spacing:.08em;
}
.actor-style-footer small{
  color:rgba(255,248,236,.58);
  letter-spacing:.08em;
}

/* 下層ページでもフッターが自然につながるよう調整 */
.subpage-main{
  margin-bottom:80px !important;
}

@media(max-width:980px){
  .stage-mid{
    right:calc(-22vw - 52px) !important;
  }
  .hero-copy{
    left:8px !important;
    top:76px !important;
    width:min(520px, 86vw) !important;
  }
  .footer-brand{
    display:block;
  }
  .footer-brand img{
    margin-bottom:12px;
  }
}

@media(max-width:560px){
  .stage-mid{
    right:calc(-47vw - 28px) !important;
  }
  .hero-copy{
    left:6px !important;
    top:58px !important;
    width:calc(100% - 12px) !important;
  }
  .footer-inner{
    width:calc(100% - 28px);
    padding:36px 0 28px;
  }
  .footer-links{
    display:grid;
    grid-template-columns:1fr;
  }
  .footer-links a{
    border-left:0;
    border-top:1px solid rgba(255,248,236,.10);
  }
}


/* ===== Step24: character page / top shop button / about headline ===== */
.shop-info-button{
  margin-top:22px !important;
}

/* about page title: one line */
.compact-about-hero{
  grid-template-columns:minmax(360px,.78fr) minmax(420px,1.22fr) !important;
}
.compact-about-hero .shop-hero-copy h1{
  white-space:nowrap;
  font-size:clamp(30px, 4vw, 56px) !important;
}

.characters-main{
  width:min(1180px, calc(100% - 40px));
  margin:70px auto 110px;
}
.characters-intro{
  margin-bottom:54px;
  text-align:left;
}
.characters-intro h1{
  margin:0 0 14px;
  font-family:"Zen Old Mincho", serif;
  font-size:clamp(42px, 6vw, 82px);
  line-height:1.08;
  letter-spacing:.12em;
}
.characters-intro p{
  margin:0;
  color:#6d5644;
  line-height:2;
}

.character-profile{
  display:grid;
  grid-template-columns:minmax(360px, .95fr) minmax(360px, 1.05fr);
  gap:clamp(30px, 5vw, 70px);
  align-items:start;
  padding:70px 0;
  border-top:1px solid rgba(126,95,58,.18);
}
.character-profile:first-of-type{
  border-top:0;
}
.character-visual-block{
  position:sticky;
  top:110px;
  display:grid;
  gap:18px;
}
.character-carousel{
  position:relative;
}
.carousel-frame{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:rgba(255,250,238,.28);
  box-shadow:0 22px 44px rgba(72,48,30,.12);
}
.carousel-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.25s ease;
}
.carousel-image.is-active{
  opacity:1;
}
.carousel-dots{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:16px;
}
.carousel-dot{
  width:13px;
  height:13px;
  border-radius:50%;
  border:1px solid rgba(84,58,34,.40);
  background:rgba(255,255,255,.72);
  cursor:pointer;
}
.carousel-dot.is-active{
  background:#7f8b66;
  box-shadow:0 0 0 4px rgba(127,139,102,.14);
}
.next-character-link{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  color:#4a321d;
  border-bottom:1px solid rgba(74,50,29,.34);
  font-family:"Noto Serif JP", serif;
  letter-spacing:.12em;
}
.next-character-link::after{
  content:"→";
}
.character-copy-block h2{
  margin:0 0 18px;
  font-family:"Zen Old Mincho", serif;
  font-size:clamp(32px, 4.2vw, 58px);
  line-height:1.25;
  letter-spacing:.10em;
}
.character-copy-block h2 span{
  display:block;
  margin-top:8px;
  font-family:"Noto Serif JP", serif;
  font-size:clamp(14px, 1.4vw, 20px);
  letter-spacing:.16em;
  color:#816952;
}
.character-copy-block p{
  margin:0 0 18px;
  color:#5f4a38;
  line-height:2.05;
  font-size:clamp(15px, 1.18vw, 17px);
}
.ability-line{
  font-weight:700;
  color:#4a321d !important;
}
.secret-ability{
  position:relative;
  display:inline-block;
  min-width:7.2em;
  color:transparent;
  overflow:hidden;
  vertical-align:middle;
  background:
    repeating-linear-gradient(90deg, rgba(48,38,31,.75) 0 5px, rgba(230,218,190,.80) 5px 9px),
    repeating-linear-gradient(0deg, rgba(88,113,85,.72) 0 4px, rgba(60,42,34,.68) 4px 8px);
  filter:contrast(1.2);
}
.secret-ability::before,
.secret-ability::after{
  content:"";
  position:absolute;
  inset:-8px;
  background:
    linear-gradient(45deg, transparent 0 10%, rgba(255,255,255,.65) 10% 14%, transparent 14% 24%, rgba(54,38,31,.8) 24% 28%, transparent 28% 100%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.56) 0 3px, rgba(255,255,255,.46) 3px 6px, transparent 6px 10px);
  mix-blend-mode:multiply;
  animation:secretMosaic 1.1s steps(4) infinite;
}
.secret-ability::after{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.65) 0 5px, transparent 5px 18px),
    radial-gradient(circle at 70% 60%, rgba(38,30,27,.82) 0 7px, transparent 7px 20px),
    repeating-linear-gradient(90deg, rgba(159,128,81,.60) 0 2px, transparent 2px 7px);
  animation-duration:.72s;
  animation-direction:reverse;
}
@keyframes secretMosaic{
  0%{ transform:translate(-8px, -4px) scale(1.02); opacity:.74; }
  33%{ transform:translate(4px, 7px) scale(1.06); opacity:.88; }
  66%{ transform:translate(9px, -2px) scale(1.03); opacity:.70; }
  100%{ transform:translate(-8px, -4px) scale(1.02); opacity:.74; }
}
.character-data{
  display:grid;
  gap:10px;
  margin:24px 0 26px;
  padding:0;
}
.character-data div{
  display:grid;
  grid-template-columns:9em 1fr;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid rgba(126,95,58,.16);
}
.character-data dt{
  color:#8a735a;
  font-weight:700;
  letter-spacing:.12em;
}
.character-data dd{
  margin:0;
  color:#4b3424;
}
.character-icon-strip{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}
.character-icon-strip img{
  width:74px;
  height:74px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid rgba(255,250,238,.9);
  box-shadow:0 10px 18px rgba(72,48,30,.12);
}

@media(max-width:900px){
  .compact-about-hero{
    grid-template-columns:1fr !important;
  }
  .compact-about-hero .shop-hero-copy h1{
    white-space:normal;
  }
  .character-profile{
    grid-template-columns:1fr;
  }
  .character-visual-block{
    position:relative;
    top:auto;
  }
}
@media(max-width:560px){
  .characters-main{
    width:calc(100% - 28px);
    margin-top:48px;
  }
  .character-profile{
    padding:46px 0;
  }
  .character-data div{
    grid-template-columns:1fr;
    gap:4px;
  }
  .character-icon-strip img{
    width:58px;
    height:58px;
  }
}


/* ===== Step25: add Shizuku/Akari and 7-icon strip ===== */
.character-icon-strip{
  gap:10px !important;
}
.character-icon-strip img{
  width:68px !important;
  height:68px !important;
}
.characters-page .actor-style-footer{
  margin-top:40px;
}

@media(max-width:560px){
  .character-icon-strip img{
    width:50px !important;
    height:50px !important;
  }
}


/* ===== Step26: header vertical words scatter fix / add mystery words ===== */

/* 既存の横並び発生を完全に止め、個別に散らして縦方向へ流す */
.hero .ability-stream{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:18 !important;
  display:block !important;
  contain:layout paint !important;
}
.hero .ability-stream .ability{
  position:absolute !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:.28em .14em !important;
  writing-mode:vertical-rl !important;
  text-orientation:mixed !important;
  white-space:nowrap !important;
  line-height:1 !important;
  color:rgba(72,49,33,.34) !important;
  background:rgba(255,250,236,.26) !important;
  border:1px solid rgba(255,250,236,.36) !important;
  letter-spacing:.16em !important;
  font-family:"Noto Serif JP","Yu Mincho",serif !important;
  text-shadow:0 1px 0 rgba(255,255,255,.22) !important;
  transform:translateY(115vh) !important;
  animation-name:abilityRiseScattered !important;
  animation-timing-function:linear !important;
  animation-iteration-count:infinite !important;
  will-change:transform, opacity !important;
}
@keyframes abilityRiseScattered{
  0%{
    transform:translate3d(0, 120vh, 0) rotate(var(--rot, 0deg));
    opacity:0;
  }
  8%{ opacity:var(--op, .48); }
  74%{ opacity:var(--op, .48); }
  100%{
    transform:translate3d(var(--drift, 0px), -132vh, 0) rotate(var(--rot, 0deg));
    opacity:0;
  }
}

/* 25語すべて、横一列にならないよう座標・速度・大きさ・奥行きを別指定 */
.ability.word-01{left:6%;  top:58%; font-size:18px; --op:.32; --drift:22px;  --rot:-2deg; animation-duration:21s !important; animation-delay:-4s !important; z-index:16;}
.ability.word-02{left:13%; top:86%; font-size:14px; --op:.28; --drift:-18px; --rot:2deg;  animation-duration:29s !important; animation-delay:-13s !important; z-index:13;}
.ability.word-03{left:19%; top:36%; font-size:20px; --op:.34; --drift:30px;  --rot:1deg;  animation-duration:24s !important; animation-delay:-7s !important; z-index:20;}
.ability.word-04{left:24%; top:110%;font-size:13px; --op:.24; --drift:-25px; --rot:-1deg; animation-duration:34s !important; animation-delay:-19s !important; z-index:12;}
.ability.word-05{left:31%; top:72%; font-size:17px; --op:.30; --drift:18px;  --rot:3deg;  animation-duration:27s !important; animation-delay:-3s !important; z-index:15;}
.ability.word-06{left:38%; top:96%; font-size:15px; --op:.26; --drift:-34px; --rot:-3deg; animation-duration:32s !important; animation-delay:-24s !important; z-index:11;}
.ability.word-07{left:44%; top:50%; font-size:19px; --op:.32; --drift:26px;  --rot:2deg;  animation-duration:23s !important; animation-delay:-10s !important; z-index:19;}
.ability.word-08{left:50%; top:118%;font-size:16px; --op:.29; --drift:-20px; --rot:0deg;  animation-duration:28s !important; animation-delay:-16s !important; z-index:14;}
.ability.word-09{left:56%; top:64%; font-size:21px; --op:.36; --drift:32px;  --rot:-2deg; animation-duration:22s !important; animation-delay:-6s !important; z-index:18;}
.ability.word-10{left:62%; top:40%; font-size:13px; --op:.25; --drift:-16px; --rot:3deg;  animation-duration:31s !important; animation-delay:-20s !important; z-index:10;}
.ability.word-11{left:68%; top:92%; font-size:18px; --op:.31; --drift:20px;  --rot:1deg;  animation-duration:26s !important; animation-delay:-2s !important; z-index:16;}
.ability.word-12{left:74%; top:124%;font-size:14px; --op:.26; --drift:-30px; --rot:-2deg; animation-duration:35s !important; animation-delay:-27s !important; z-index:12;}
.ability.word-13{left:80%; top:54%; font-size:20px; --op:.33; --drift:24px;  --rot:2deg;  animation-duration:25s !important; animation-delay:-11s !important; z-index:17;}
.ability.word-14{left:86%; top:78%; font-size:15px; --op:.27; --drift:-22px; --rot:-3deg; animation-duration:30s !important; animation-delay:-5s !important; z-index:13;}
.ability.word-15{left:92%; top:106%;font-size:17px; --op:.30; --drift:16px;  --rot:1deg;  animation-duration:33s !important; animation-delay:-22s !important; z-index:15;}
.ability.word-16{left:9%;  top:132%;font-size:15px; --op:.24; --drift:-28px; --rot:3deg;  animation-duration:38s !important; animation-delay:-29s !important; z-index:9;}
.ability.word-17{left:16%; top:46%; font-size:18px; --op:.30; --drift:21px;  --rot:-1deg; animation-duration:28s !important; animation-delay:-8s !important; z-index:14;}
.ability.word-18{left:29%; top:122%;font-size:13px; --op:.23; --drift:-19px; --rot:2deg;  animation-duration:36s !important; animation-delay:-31s !important; z-index:8;}
.ability.word-19{left:36%; top:30%; font-size:16px; --op:.28; --drift:27px;  --rot:-2deg; animation-duration:30s !important; animation-delay:-14s !important; z-index:13;}
.ability.word-20{left:48%; top:82%; font-size:18px; --op:.32; --drift:-24px; --rot:2deg;  animation-duration:24s !important; animation-delay:-18s !important; z-index:16;}
.ability.word-21{left:59%; top:114%;font-size:14px; --op:.25; --drift:18px;  --rot:-3deg; animation-duration:34s !important; animation-delay:-26s !important; z-index:10;}
.ability.word-22{left:66%; top:26%; font-size:19px; --op:.31; --drift:-21px; --rot:1deg;  animation-duration:27s !important; animation-delay:-9s !important; z-index:15;}
.ability.word-23{left:76%; top:70%; font-size:15px; --op:.27; --drift:29px;  --rot:-1deg; animation-duration:31s !important; animation-delay:-17s !important; z-index:12;}
.ability.word-24{left:83%; top:136%;font-size:13px; --op:.23; --drift:-27px; --rot:2deg;  animation-duration:39s !important; animation-delay:-34s !important; z-index:8;}
.ability.word-25{left:95%; top:34%; font-size:18px; --op:.30; --drift:20px;  --rot:-2deg; animation-duration:29s !important; animation-delay:-12s !important; z-index:14;}

/* 以前のpos指定が残っていても横一列に戻らないよう無効化 */
.ability.pos-01,.ability.pos-02,.ability.pos-03,.ability.pos-04,.ability.pos-05,.ability.pos-06,.ability.pos-07{
  top:auto !important;
}

@media(max-width:980px){
  .hero .ability-stream{
    z-index:12 !important;
  }
  .hero .ability-stream .ability{
    font-size:14px !important;
  }
  .ability.word-03,.ability.word-09,.ability.word-13,.ability.word-22{
    font-size:16px !important;
  }
}

@media(max-width:560px){
  .hero .ability-stream .ability{
    font-size:12px !important;
    opacity:.82;
  }
}


/* ===== Step27: button placement / about sizing / single character view ===== */
.shop-info-button-line{ display:block !important; margin-top:18px !important; }
.shop-info-button-line .shop-info-button{ display:inline-flex !important; white-space:nowrap !important; margin-top:0 !important; }
.compact-about-hero{ grid-template-columns:minmax(280px,.72fr) minmax(420px,1.28fr) !important; gap:clamp(30px, 5vw, 78px) !important; }
.compact-about-hero .shop-hero-copy h1{ white-space:nowrap !important; font-size:clamp(24px, 3.2vw, 44px) !important; letter-spacing:.06em !important; }
.character-link-block{ padding-top:16px !important; border-top:1px solid rgba(126,95,58,.18) !important; }
.character-link-block .character-button{ display:inline-flex !important; white-space:nowrap !important; }
.character-profile.single-character{ display:none !important; }
.character-profile.single-character.is-active-character{ display:grid !important; animation:characterFadeIn .55s ease both; }
@keyframes characterFadeIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
.character-nav-row{ display:flex; justify-content:space-between; gap:14px; }
.prev-character-link,.next-character-link{ display:inline-flex; align-items:center; justify-content:center; min-width:122px; padding:10px 16px; background:transparent; color:#4a321d; border:0; border-bottom:1px solid rgba(74,50,29,.34); font-family:"Noto Serif JP", serif; letter-spacing:.12em; cursor:pointer; }
.prev-character-link::before{ content:"←"; margin-right:10px; }
.next-character-link::after{ content:"→"; margin-left:10px; }
.character-icon-strip{ gap:10px !important; }
.character-jump-icon{ width:68px !important; height:68px !important; padding:0; border-radius:50%; border:2px solid rgba(255,250,238,.9); background:transparent; cursor:pointer; box-shadow:0 10px 18px rgba(72,48,30,.12); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.character-jump-icon img{ width:100% !important; height:100% !important; object-fit:cover; border:0 !important; border-radius:0 !important; box-shadow:none !important; display:block; }
.character-jump-icon:hover,.character-jump-icon.is-current{ transform:translateY(-3px); border-color:rgba(127,139,102,.95); box-shadow:0 14px 24px rgba(72,48,30,.18); }
@media(max-width:900px){ .compact-about-hero{ grid-template-columns:1fr !important; } .compact-about-hero .shop-hero-copy h1{ white-space:normal !important; } }
@media(max-width:560px){ .character-jump-icon{ width:50px !important; height:50px !important; } }


/* ===== Step28: make header words visible / slightly shorter header ===== */

/* ヘッダー縦幅を少し狭める */
.hero{
  min-height:clamp(710px, 58vw, 845px) !important;
  padding-top:clamp(34px, 3.8vw, 56px) !important;
  padding-bottom:clamp(36px, 3.2vw, 52px) !important;
}
.hero-inner{
  min-height:clamp(620px, 52vw, 760px) !important;
}
.hero-stage{
  top:clamp(6px, 1.2vw, 18px) !important;
  height:clamp(530px, 48vw, 710px) !important;
}

/* 文字が出てこない問題の修正：hero直下で必ず表示されるレイヤーに変更 */
.hero .header-word-stream{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:40 !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  mix-blend-mode:multiply;
}
.hero .header-word-stream .ability{
  position:absolute !important;
  display:block !important;
  writing-mode:vertical-rl !important;
  text-orientation:mixed !important;
  white-space:nowrap !important;
  line-height:1 !important;
  padding:.34em .18em !important;
  color:rgba(68,43,31,.55) !important;
  background:rgba(255,251,238,.46) !important;
  border:1px solid rgba(255,251,238,.62) !important;
  box-shadow:0 8px 18px rgba(70,45,28,.08) !important;
  font-family:"Noto Serif JP","Yu Mincho",serif !important;
  letter-spacing:.14em !important;
  text-shadow:0 1px 0 rgba(255,255,255,.45) !important;
  opacity:0;
  transform:translateY(100vh);
  animation:headerWordRise var(--dur, 26s) linear var(--delay, 0s) infinite !important;
  will-change:transform, opacity;
}
@keyframes headerWordRise{
  0%{
    transform:translate3d(0, 112vh, 0) rotate(var(--rot, 0deg));
    opacity:0;
  }
  7%{ opacity:var(--op, .70); }
  76%{ opacity:var(--op, .70); }
  100%{
    transform:translate3d(var(--drift, 0px), -130vh, 0) rotate(var(--rot, 0deg));
    opacity:0;
  }
}

/* 座標をばらして、横一列ではなく常に散らして出現 */
.header-word-stream .word-01{left:5%;  top:68%; font-size:18px; --op:.55; --drift:22px;  --rot:-2deg; --dur:22s; --delay:-3s;}
.header-word-stream .word-02{left:11%; top:102%;font-size:14px; --op:.48; --drift:-18px; --rot:2deg;  --dur:31s; --delay:-17s;}
.header-word-stream .word-03{left:18%; top:44%; font-size:20px; --op:.58; --drift:30px;  --rot:1deg;  --dur:25s; --delay:-8s;}
.header-word-stream .word-04{left:24%; top:126%;font-size:13px; --op:.45; --drift:-25px; --rot:-1deg; --dur:36s; --delay:-23s;}
.header-word-stream .word-05{left:30%; top:80%; font-size:17px; --op:.53; --drift:18px;  --rot:3deg;  --dur:28s; --delay:-2s;}
.header-word-stream .word-06{left:36%; top:116%;font-size:15px; --op:.47; --drift:-34px; --rot:-3deg; --dur:34s; --delay:-26s;}
.header-word-stream .word-07{left:42%; top:58%; font-size:19px; --op:.56; --drift:26px;  --rot:2deg;  --dur:24s; --delay:-11s;}
.header-word-stream .word-08{left:48%; top:136%;font-size:16px; --op:.52; --drift:-20px; --rot:0deg;  --dur:30s; --delay:-18s;}
.header-word-stream .word-09{left:54%; top:72%; font-size:21px; --op:.62; --drift:32px;  --rot:-2deg; --dur:23s; --delay:-6s;}
.header-word-stream .word-10{left:60%; top:48%; font-size:13px; --op:.46; --drift:-16px; --rot:3deg;  --dur:33s; --delay:-20s;}
.header-word-stream .word-11{left:66%; top:108%;font-size:18px; --op:.55; --drift:20px;  --rot:1deg;  --dur:27s; --delay:-4s;}
.header-word-stream .word-12{left:72%; top:144%;font-size:14px; --op:.46; --drift:-30px; --rot:-2deg; --dur:37s; --delay:-29s;}
.header-word-stream .word-13{left:78%; top:62%; font-size:20px; --op:.57; --drift:24px;  --rot:2deg;  --dur:26s; --delay:-13s;}
.header-word-stream .word-14{left:84%; top:92%; font-size:15px; --op:.49; --drift:-22px; --rot:-3deg; --dur:32s; --delay:-7s;}
.header-word-stream .word-15{left:90%; top:122%;font-size:17px; --op:.53; --drift:16px;  --rot:1deg;  --dur:35s; --delay:-25s;}
.header-word-stream .word-16{left:8%;  top:148%;font-size:15px; --op:.45; --drift:-28px; --rot:3deg;  --dur:40s; --delay:-31s;}
.header-word-stream .word-17{left:15%; top:54%; font-size:18px; --op:.54; --drift:21px;  --rot:-1deg; --dur:29s; --delay:-10s;}
.header-word-stream .word-18{left:27%; top:140%;font-size:13px; --op:.44; --drift:-19px; --rot:2deg;  --dur:38s; --delay:-33s;}
.header-word-stream .word-19{left:34%; top:38%; font-size:16px; --op:.51; --drift:27px;  --rot:-2deg; --dur:31s; --delay:-14s;}
.header-word-stream .word-20{left:46%; top:98%; font-size:18px; --op:.56; --drift:-24px; --rot:2deg;  --dur:25s; --delay:-19s;}
.header-word-stream .word-21{left:57%; top:132%;font-size:14px; --op:.46; --drift:18px;  --rot:-3deg; --dur:36s; --delay:-28s;}
.header-word-stream .word-22{left:64%; top:34%; font-size:19px; --op:.55; --drift:-21px; --rot:1deg;  --dur:28s; --delay:-9s;}
.header-word-stream .word-23{left:74%; top:84%; font-size:15px; --op:.49; --drift:29px;  --rot:-1deg; --dur:33s; --delay:-17s;}
.header-word-stream .word-24{left:82%; top:152%;font-size:13px; --op:.44; --drift:-27px; --rot:2deg;  --dur:41s; --delay:-35s;}
.header-word-stream .word-25{left:94%; top:42%; font-size:18px; --op:.54; --drift:20px;  --rot:-2deg; --dur:30s; --delay:-12s;}

/* キャラ・コピーの手前に文字が出すぎないよう、必要箇所はさらに上に */
.hero-copy{
  top:clamp(56px, 8.6vw, 112px) !important;
}
.stage-front{
  top:25% !important;
}
.stage-mid{
  top:14% !important;
}
.stage-back{
  top:-2% !important;
}

/* ヘッダー下の波は縦幅短縮に合わせて少し上詰め */
.gardenia-transition-ornaments.header-wave-stack{
  margin:clamp(-60px, -4vw, -34px) 0 clamp(18px, 2vw, 30px) !important;
  height:clamp(160px, 15vw, 240px) !important;
}

@media(max-width:980px){
  .hero{
    min-height:clamp(720px, 98vw, 900px) !important;
  }
  .hero-inner{
    min-height:clamp(630px, 86vw, 790px) !important;
  }
  .hero .header-word-stream .ability{
    font-size:14px !important;
  }
  .header-word-stream .word-03,
  .header-word-stream .word-09,
  .header-word-stream .word-13,
  .header-word-stream .word-22{
    font-size:16px !important;
  }
}
@media(max-width:560px){
  .hero{
    min-height:710px !important;
  }
  .hero-inner{
    min-height:640px !important;
  }
  .hero .header-word-stream .ability{
    font-size:12px !important;
  }
}


/* ===== Step29: shrink about page heading / remove global nav background ===== */

/* 「喫茶ガーデニアについて」の見出しを収縮 */
.compact-about-hero .shop-hero-copy h1,
.shop-info-page .shop-hero-copy h1{
  font-size:clamp(20px, 2.35vw, 34px) !important;
  letter-spacing:.04em !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
}
.compact-about-hero{
  grid-template-columns:minmax(240px,.62fr) minmax(460px,1.38fr) !important;
  gap:clamp(38px, 6vw, 92px) !important;
}

/* グローバルナビの背景をなくす */
.global-nav{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.global-nav::before,
.global-nav::after{
  display:none !important;
  content:none !important;
}
.global-nav a{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
}
.global-nav a::before,
.global-nav a::after{
  background:transparent !important;
  box-shadow:none !important;
}

/* ヘッダー自体に残る薄いナビ背面も透明化 */
.global-header{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
}
.sub-header{
  background:transparent !important;
  background-color:transparent !important;
}

@media(max-width:900px){
  .compact-about-hero{
    grid-template-columns:1fr !important;
  }
  .compact-about-hero .shop-hero-copy h1,
  .shop-info-page .shop-hero-copy h1{
    white-space:normal !important;
    font-size:clamp(22px, 6vw, 34px) !important;
  }
}


/* ===== Step30: remove old word/wave systems, add bottom waves and random words ===== */

/* 古い文字演出・波演出・トランジション波は完全停止 */
.ability-stream,
.header-word-stream,
.gardenia-transition-ornaments,
.wave,
.header-wave-stack,
.transition-ornament,
.header-wave{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  animation:none !important;
}

/* ヘッダーは少し狭めた状態で、下部装飾が収まるよう調整 */
.hero{
  position:relative !important;
  min-height:clamp(690px, 56vw, 820px) !important;
  padding-bottom:clamp(34px, 3vw, 48px) !important;
  overflow:hidden !important;
}
.hero-inner{
  position:relative !important;
  z-index:20 !important;
  min-height:clamp(600px, 50vw, 735px) !important;
}

/* 新しい2枚波をヘッダー最下部・最前面へ */
.header-bottom-waves{
  position:absolute !important;
  left:50% !important;
  bottom:-2px !important;
  transform:translateX(-50%) !important;
  width:100vw !important;
  height:clamp(135px, 12vw, 205px) !important;
  z-index:90 !important;
  pointer-events:none !important;
  overflow:visible !important;
}
.header-bottom-wave{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:100vw !important;
  min-width:100vw !important;
  max-width:none !important;
  height:auto !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}
.header-bottom-wave.wave-back{
  bottom:clamp(28px, 2.6vw, 46px) !important;
  z-index:1 !important;
  filter:drop-shadow(0 -4px 10px rgba(75,55,31,.08));
}
.header-bottom-wave.wave-front{
  bottom:0 !important;
  z-index:2 !important;
  filter:drop-shadow(0 -5px 12px rgba(75,55,31,.10));
}

/* 新しいランダム文字レイヤー */
.random-word-field{
  position:absolute !important;
  inset:0 !important;
  z-index:38 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
.random-word{
  position:absolute;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  white-space:nowrap;
  line-height:1;
  letter-spacing:.12em;
  font-family:"Noto Serif JP","Yu Mincho",serif;
  color:rgba(64,43,31,.46);
  background:rgba(255,250,238,.34);
  border:1px solid rgba(255,250,238,.45);
  padding:.32em .18em;
  text-shadow:0 1px 0 rgba(255,255,255,.42);
  filter:drop-shadow(0 6px 12px rgba(63,42,25,.08));
  opacity:0;
  transform:translateY(0);
  animation:randomWordRise linear forwards;
  will-change:transform, opacity;
}
@keyframes randomWordRise{
  0%{
    opacity:0;
    transform:translate3d(0, 0, 0) scale(var(--scale, 1));
  }
  10%{
    opacity:var(--word-opacity, .62);
  }
  82%{
    opacity:var(--word-opacity, .62);
  }
  100%{
    opacity:0;
    transform:translate3d(0, var(--travel, -720px), 0) scale(var(--scale, 1));
  }
}

/* 文字の後景・前景ランダム階層に対応 */
.random-word.layer-back{ z-index:12; color:rgba(64,43,31,.30); }
.random-word.layer-mid{ z-index:42; color:rgba(64,43,31,.45); }
.random-word.layer-front{ z-index:82; color:rgba(64,43,31,.58); background:rgba(255,250,238,.44); }

/* レイヤー調整：波は完全に最前面、文字はキャラやロゴの前後にランダム配置 */
.hero-copy{ z-index:55 !important; }
.hero-stage{ z-index:35 !important; }

@media(max-width:980px){
  .hero{
    min-height:clamp(690px, 94vw, 850px) !important;
  }
  .hero-inner{
    min-height:clamp(600px, 82vw, 760px) !important;
  }
  .header-bottom-waves{
    height:clamp(112px, 18vw, 175px) !important;
  }
  .header-bottom-wave{
    width:128vw !important;
    min-width:128vw !important;
  }
}
@media(max-width:560px){
  .hero{
    min-height:680px !important;
  }
  .hero-inner{
    min-height:600px !important;
  }
  .header-bottom-waves{
    height:104px !important;
  }
  .header-bottom-wave{
    width:155vw !important;
    min-width:155vw !important;
  }
}


/* ===== Step31: random header words as text-only transparent elements ===== */
/* 下から上へ流れる文字の四角い枠・背景を完全削除し、文字だけ表示 */
.random-word{
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  padding:0 !important;
  color:rgba(64,43,31,.50) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.28),
    0 8px 16px rgba(73,48,28,.08) !important;
}
.random-word::before,
.random-word::after{
  display:none !important;
  content:none !important;
}
.random-word.layer-back{
  color:rgba(64,43,31,.30) !important;
}
.random-word.layer-mid{
  color:rgba(64,43,31,.46) !important;
}
.random-word.layer-front{
  color:rgba(64,43,31,.60) !important;
  background:transparent !important;
}


/* ===== Step32: make random header words larger on average ===== */
.random-word{
  font-weight:600 !important;
  letter-spacing:.13em !important;
  color:rgba(64,43,31,.56) !important;
}
.random-word.layer-back{
  color:rgba(64,43,31,.36) !important;
}
.random-word.layer-mid{
  color:rgba(64,43,31,.54) !important;
}
.random-word.layer-front{
  color:rgba(64,43,31,.68) !important;
}

@media(max-width:980px){
  .random-word{
    font-size:clamp(18px, 3.1vw, 32px) !important;
  }
}
@media(max-width:560px){
  .random-word{
    font-size:clamp(16px, 5vw, 26px) !important;
  }
}


/* ===== Step33: random words fade out before reaching top ===== */
/* 一番上まで行かず、一定距離上がったらふわっと消える */
@keyframes randomWordRise{
  0%{
    opacity:0;
    transform:translate3d(0, 0, 0) scale(var(--scale, 1));
  }
  12%{
    opacity:var(--word-opacity, .62);
  }
  58%{
    opacity:var(--word-opacity, .62);
  }
  100%{
    opacity:0;
    transform:translate3d(0, var(--travel, -360px), 0) scale(var(--scale, 1));
  }
}


/* ===== Step35: story page ===== */
.story-main{width:min(1180px, calc(100% - 40px));margin:72px auto 112px;}
.story-episode{position:relative;}
.story-kicker{display:inline-flex;margin-bottom:14px;padding:7px 14px;border:1px solid rgba(126,95,58,.22);color:#8a735a;font-family:"Noto Serif JP", serif;letter-spacing:.18em;background:rgba(255,250,238,.28);}
.story-episode h1{margin:0 0 34px;font-family:"Zen Old Mincho", serif;font-size:clamp(34px, 5.2vw, 72px);line-height:1.18;letter-spacing:.08em;color:#3f2c21;}
.story-episode h1 span{display:block;margin-top:10px;font-size:clamp(22px, 3vw, 42px);letter-spacing:.05em;}
.story-visual-frame{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden;border:12px solid rgba(255,250,238,.88);outline:1px solid rgba(126,95,58,.35);background:#2c211a;box-shadow:0 28px 60px rgba(61,39,25,.22), inset 0 0 0 1px rgba(255,255,255,.16);}
.story-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.015);transition:opacity 1.35s ease, transform 5s ease;}
.story-slide.is-active{opacity:1;transform:scale(1);}
.story-synopsis{width:min(860px, 100%);margin:54px auto 0;padding:clamp(28px, 4vw, 54px);background:linear-gradient(180deg, rgba(255,250,238,.70), rgba(245,237,215,.48));border:1px solid rgba(126,95,58,.20);box-shadow:0 18px 38px rgba(61,39,25,.10);}
.story-synopsis h2{margin:0 0 24px;font-family:"Zen Old Mincho", serif;font-size:clamp(26px, 3.2vw, 44px);letter-spacing:.16em;color:#4a321d;}
.story-synopsis p{margin:0 0 18px;line-height:2.25;color:#514032;font-family:"Noto Serif JP", serif;font-size:clamp(15px, 1.16vw, 18px);}
.story-synopsis p:last-child{margin-bottom:0;}
.story-quote{margin:28px 0 !important;padding:20px 24px;border-left:4px solid rgba(127,139,102,.70);background:rgba(255,255,255,.36);color:#3f2c21 !important;font-weight:700;}
.story-action{display:flex;justify-content:center;margin-top:40px;}
.episode-play-button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:240px;min-height:64px;padding:0 42px;color:#fff8ec;background:linear-gradient(135deg, #7f6241, #4d3423);border:1px solid rgba(255,250,238,.52);box-shadow:0 18px 30px rgba(61,39,25,.22);font-family:"Noto Serif JP", serif;font-size:18px;letter-spacing:.16em;overflow:hidden;cursor:not-allowed;}
.episode-play-button span{position:relative;z-index:2;}
.episode-play-button em{position:absolute;right:-42px;top:9px;z-index:3;width:170px;transform:rotate(28deg);padding:7px 0;background:#8f2f2f;color:#fff8ec;font-style:normal;font-size:12px;letter-spacing:.08em;text-align:center;box-shadow:0 8px 14px rgba(61,39,25,.26);}
.episode-play-button::after{content:"";position:absolute;inset:2px;border:1px solid rgba(255,250,238,.26);pointer-events:none;}
@media(max-width:720px){.story-main{width:calc(100% - 28px);margin-top:48px;}.story-visual-frame{border-width:7px;}.story-synopsis{margin-top:36px;}}


/* ===== Step36: story title and visual compact ===== */
.story-main{
  width:min(1040px, calc(100% - 40px)) !important;
  margin-top:58px !important;
}
.story-episode h1{
  font-size:clamp(26px, 3.9vw, 52px) !important;
  line-height:1.15 !important;
  margin-bottom:24px !important;
  letter-spacing:.06em !important;
}
.story-episode h1 span{
  display:inline !important;
  margin-top:0 !important;
  font-size:clamp(20px, 2.4vw, 34px) !important;
  letter-spacing:.04em !important;
}
.story-kicker{
  margin-bottom:10px !important;
  padding:5px 12px !important;
  font-size:13px !important;
}
.story-visual-frame{
  width:min(900px, 100%) !important;
  margin:0 auto !important;
  aspect-ratio:16 / 8.4 !important;
  border-width:9px !important;
  box-shadow:
    0 20px 44px rgba(61,39,25,.18),
    inset 0 0 0 1px rgba(255,255,255,.16) !important;
}
.story-synopsis{
  margin-top:42px !important;
}

@media(max-width:720px){
  .story-main{
    width:calc(100% - 28px) !important;
    margin-top:42px !important;
  }
  .story-episode h1 span{
    display:block !important;
    margin-top:8px !important;
  }
  .story-visual-frame{
    border-width:6px !important;
    aspect-ratio:16 / 9 !important;
  }
}


/* ===== Step37: tablet/smartphone dedicated Gardenia header ===== */
/* タブレット・スマホ幅では、ヘッダーの1・2・3列画像を消した専用構成に変更 */
@media(max-width:980px){
  .hero{
    min-height:clamp(560px, 78vw, 700px) !important;
    padding-top:74px !important;
    padding-bottom:88px !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at 50% 28%, rgba(255,255,255,.68), transparent 34%),
      linear-gradient(180deg, rgba(248,241,220,.92), rgba(228,216,186,.88)) !important;
  }

  /* 1,2,3のキャラクター列・ステージ列を非表示 */
  .hero-stage,
  .stage-back,
  .stage-mid,
  .stage-front,
  .row-back,
  .row-mid,
  .row-front{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
  }

  /* スマホ/タブレット専用：ロゴとキャッチコピーを中央寄せ */
  .hero-inner{
    min-height:clamp(430px, 64vw, 560px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    z-index:44 !important;
  }
  .hero-copy{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:min(620px, calc(100% - 44px)) !important;
    margin:0 auto !important;
    transform:none !important;
    text-align:center !important;
    z-index:58 !important;
  }
  .main-logo,
  .hero-logo,
  .logo-mark,
  .brand-logo{
    width:clamp(190px, 34vw, 285px) !important;
    margin:0 auto 18px !important;
  }
  .catch{
    font-size:clamp(22px, 4.3vw, 38px) !important;
    line-height:1.58 !important;
    letter-spacing:.08em !important;
    text-align:center !important;
    max-width:620px !important;
  }
  .catch span{
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* 専用構成でもランダム文字と下部波は残す */
  .random-word-field{
    z-index:30 !important;
  }
  .random-word.layer-front{
    z-index:52 !important;
  }
  .header-bottom-waves{
    z-index:90 !important;
    height:clamp(104px, 17vw, 164px) !important;
  }
  .header-bottom-wave{
    width:132vw !important;
    min-width:132vw !important;
  }

  /* 左右装飾は背景の雰囲気だけ残し、邪魔にならないサイズへ */
  .new-header-ornament,
  .new-header-left-ornament,
  .new-header-right-ornament{
    opacity:.28 !important;
    transform:scale(.72) !important;
    z-index:8 !important;
  }
}

@media(max-width:560px){
  .hero{
    min-height:560px !important;
    padding-top:66px !important;
    padding-bottom:82px !important;
  }
  .hero-inner{
    min-height:400px !important;
  }
  .hero-copy{
    width:calc(100% - 30px) !important;
  }
  .main-logo,
  .hero-logo,
  .logo-mark,
  .brand-logo{
    width:clamp(168px, 52vw, 235px) !important;
    margin-bottom:14px !important;
  }
  .catch{
    font-size:clamp(19px, 6.1vw, 28px) !important;
    line-height:1.58 !important;
    letter-spacing:.055em !important;
  }
  .header-bottom-waves{
    height:96px !important;
  }
  .header-bottom-wave{
    width:168vw !important;
    min-width:168vw !important;
  }
  .new-header-ornament,
  .new-header-left-ornament,
  .new-header-right-ornament{
    opacity:.18 !important;
    transform:scale(.58) !important;
  }
}