/* 背景：唐草 ＋ 生成り */
body {
    margin: 0;
    font-family: 'Zen Old Mincho', serif;
    background-color: #f4f1e8;
    background-repeat: repeat;
    background-blend-mode: lighten;
    color: #1a2a40;
    line-height: 2.6;
}

/* ヘッダー */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    height: 56px;
    backdrop-filter: blur(8px);
    background: rgba(244,241,232,0.7);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-small { height: 50px; width: auto; }

/* ハンバーガーメニュー */
.hamburger {
    width: 22px;
    height: 14px;
    position: relative;
    cursor: pointer;
    z-index: 1001;
}
.hamburger span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #333;
    border-radius: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 7px; }

.hamburger.open span:nth-child(1) { top: 3.5px; transform: rotate(45deg); }
.hamburger.open span:nth-child(2) { top: 3.5px; transform: rotate(-45deg); }

/* ナビメニュー */
.nav-menu {
    position: fixed;
    top: 56px;
    right: 0;
    left: 0;
    background: rgba(244,241,232,0.96);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 900;
}
.nav-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-menu ul { list-style: none; margin: 14px 20px; padding: 0; }
.nav-menu li + li { border-top: 1px solid rgba(0,0,0,0.06); }
.nav-menu a {
    display: block;
    padding: 10px 4px;
    text-decoration: none;
    color: #1a2a40;
    letter-spacing: 0.18em;
}

/* メインテキスト */
.main-text {
    max-width: 900px;
    margin: 60px auto;
    padding: 40px 20px;
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    line-height: 2.8;
    position: relative;
}
.text-lines { position: relative; z-index: 1; }
.text-line {
    opacity: 0;
    transform: translateY(8px);
    animation: fadeUp 1s ease-out forwards;
}
.text-line + .text-line { margin-top: 0.4em; }

.text-line:nth-of-type(1) { animation-delay: 0.2s; }
.text-line:nth-of-type(2) { animation-delay: 0.6s; }
.text-line:nth-of-type(3) { animation-delay: 1.0s; }
.text-line:nth-of-type(4) { animation-delay: 1.4s; }
.text-line:nth-of-type(5) { animation-delay: 1.8s; }
.text-line:nth-of-type(6) { animation-delay: 2.2s; }

@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.main-text::before {
    content: "";
    position: absolute;
    left: 8%; right: 8%; top: 10px; bottom: 10px;
    background: rgba(244,241,232,0.55);
    backdrop-filter: blur(7px);
    border-radius: 16px;
    z-index: 0;
}

@media (max-width: 768px) {
    .main-text { margin: 50px auto; padding: 30px 14px; font-size: 1.2rem; }
    .main-text::before { left: 6%; right: 6%; }
}


/* ===== keikoba.html sections ===== */

/* allow scrolling on long one-page */
html, body { height: auto; overflow-x: hidden; }
body{}

/* anchor offset */
#about, #profile, #schedule, #contact { scroll-margin-top: 72px; }

.sections { padding-bottom: 60px; }
.section-block { padding: 20px 0; }
.site-footer{ text-align:center; padding: 30px 0 10px; font-size: 0.9rem; letter-spacing: 0.12em; opacity: 0.85; }

/* unify wrapper widths */
.keikoba-page .main-wrapper{ max-width: 980px; margin: 0 auto; padding: 0 16px; }
.keikoba-page .panel,
.keikoba-page .profile-panel,
.keikoba-page .schedule-panel{
  background: rgba(244,241,232,0.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 28px 20px;
  margin: 18px auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}


/* ===== page-specific styles (scoped) ===== */
.keikoba-page /* 元のCSSそのまま */


.logo-small{ height: 50px; width: auto; }

.keikoba-page .main-wrapper{ max-width: 960px; margin: 34px auto 80px; padding: 0 18px; }

.keikoba-page .panel{ position: relative; padding: 30px 22px 36px; border-radius: 18px; background: rgba(244,241,232,0.6); backdrop-filter: blur(7px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); }

.keikoba-page .panel::before{ content: ""; position: absolute; inset: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.7); pointer-events: none; }

.keikoba-page .section-title{ font-size: 1.1rem; letter-spacing: 0.22em; margin-bottom: 8px; }

.keikoba-page .divider{ margin: 24px 0; border: none; border-top: 1px solid rgba(0,0,0,0.12); }

.keikoba-page .map-link{ color: #39506b; font-size: 0.9rem; letter-spacing: 0.15em; text-decoration: none; }

.keikoba-page .apply-button-wrap{ margin: 20px 0 10px; text-align: center; }

.keikoba-page .apply-button{ display: inline-block; padding: 10px 26px; background: rgba(255,255,255,0.75); border: 1px solid rgba(0,0,0,0.12); border-radius: 20px; font-size: 0.95rem; color: #1a2a40; letter-spacing: 0.18em; text-decoration: none; backdrop-filter: blur(4px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); transition: 0.2s ease; }

.keikoba-page .apply-button:hover{ background: rgba(255,255,255,0.92); box-shadow: 0 8px 22px rgba(0,0,0,0.12); }

@media (max-width: 768px) { .main-wrapper { margin: 24px auto 60px; padding: 0 12px; }

.keikoba-page .panel{ padding: 24px 16px 30px; }

}
.keikoba-page /* 元のCSSそのまま */


.logo-small{ height: 50px; width: auto; }

.keikoba-page .main-wrapper{ max-width: 960px; margin: 34px auto 80px; padding: 0 18px; }

.keikoba-page .profile-panel{ position: relative; padding: 30px 22px 34px; border-radius: 18px; background: rgba(244,241,232,0.6); backdrop-filter: blur(7px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); }

.keikoba-page .profile-panel::before{ content: ""; position: absolute; inset: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.7); pointer-events: none; }

.keikoba-page .profile-hero{ display: flex; gap: 26px; align-items: center; margin-bottom: 20px; }

.keikoba-page .profile-photo-wrap{ flex: 0 0 46%; }

.keikoba-page .profile-photo{ width: 100%; border-radius: 14px; display: block; }

.keikoba-page .profile-heading{ flex: 1; }

.keikoba-page .profile-name-ja{ font-size: 1.8rem; letter-spacing: 0.25em; margin: 0 0 8px; }

.keikoba-page .profile-name-en{ font-size: 0.9rem; letter-spacing: 0.18em; margin: 0 0 14px; }

.keikoba-page .profile-title{ font-size: 1rem; letter-spacing: 0.16em; }

.keikoba-page .section-title{ margin: 22px 0 6px; font-size: 1.05rem; letter-spacing: 0.22em; }

.keikoba-page ul.profile-list{ margin: 0 0 4px 1em; padding: 0; list-style: none; }

.keikoba-page ul.profile-list li{ text-indent: -0.8em; padding-left: 0.8em; margin-bottom: 2px; }

@media (max-width: 768px) { .main-wrapper { margin: 26px auto 60px; padding: 0 12px; }

.keikoba-page .profile-panel{ padding: 24px 16px 28px; }

.keikoba-page .profile-hero{ flex-direction: column; align-items: flex-start; gap: 16px; }

.keikoba-page .profile-photo-wrap{ width: 100%; }

.keikoba-page .profile-name-ja{ font-size: 1.5rem; }

}
.keikoba-page /* 元のCSSそのまま */


.logo-small{ height: 50px; width: auto; }

.keikoba-page .main-wrapper{ max-width: 960px; margin: 40px auto 70px; padding: 0 18px; }

.keikoba-page .schedule-panel{ position: relative; padding: 26px 20px 30px; border-radius: 18px; background: rgba(244,241,232,0.7); backdrop-filter: blur(7px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); }

.keikoba-page .schedule-panel::before{ content: ""; position: absolute; inset: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.7); pointer-events: none; }

.keikoba-page .schedule-title{ margin: 0 0 12px; font-size: 1.3rem; letter-spacing: 0.22em; text-align: center; }

.keikoba-page .schedule-note{ font-size: 0.9rem; text-align: center; margin-bottom: 24px; }

.keikoba-page .calendar-section{ margin-bottom: 30px; }

.keikoba-page .calendar-heading{ font-size: 1rem; letter-spacing: 0.1em; margin-bottom: 10px; border-left: 3px solid #8b7b6a; padding-left: 10px; color: #333; }

.keikoba-page .calendar-wrap{ border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

.keikoba-page .calendar-wrap iframe{ width: 100%; border: 0; display: block; }

@media (max-width: 768px) { .main-wrapper { margin: 28px auto 60px; padding: 0 12px; }

.keikoba-page .schedule-panel{ padding: 22px 14px 26px; }

}
.keikoba-page /* 元のCSSそのまま */
    
    
    .page-wrapper{ min-height: 100vh; display: flex; flex-direction: column; }

.keikoba-page .logo-small{ height: 50px; width: auto; }

.keikoba-page .main-wrapper{ flex: 1; padding: 96px 16px 40px; display: flex; justify-content: center; }

.keikoba-page .panel{ max-width: 720px; width: 100%; margin: 0 auto; background: rgba(255, 253, 248, 0.94); border-radius: 26px; padding: 26px 20px 32px; box-shadow: 0 16px 45px rgba(0,0,0,0.10); border: 1px solid rgba(206, 192, 170, 0.6); }

.keikoba-page .section-title{ font-size: 22px; text-align: center; letter-spacing: 0.25em; margin-bottom: 12px; }

.keikoba-page .lead-text{ font-size: 14px; text-align: center; margin-bottom: 18px; }

.keikoba-page .divider{ width: 60px; height: 1px; border: none; margin: 0 auto 20px; background: linear-gradient(to right, transparent, #8b7b6a, transparent); opacity: 0.6; }

.keikoba-page .contact-cards{ display: flex; flex-direction: column; gap: 16px; margin-top: 6px; margin-bottom: 18px; }

.keikoba-page .contact-card{ display: block; text-decoration: none; color: inherit; background: #fdfaf5; border-radius: 20px; padding: 16px 18px; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 8px 24px rgba(0,0,0,0.10); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }

.keikoba-page .contact-card:active{ transform: translateY(1px); box-shadow: 0 4px 14px rgba(0,0,0,0.12); background: #f7efe4; }

@media (hover: hover) { .contact-card:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,0.14); background: #f8f2e7; }

}

.keikoba-page .contact-label{ font-size: 15px; letter-spacing: 0.08em; margin-bottom: 4px; display: block; }

.keikoba-page .contact-label::before{ content: "■"; margin-right: 6px; font-size: 0.9em; }

.keikoba-page .contact-sub{ font-size: 13px; opacity: 0.8; margin-top: 4px; }

.keikoba-page .contact-email{ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; font-size: 14px; margin-top: 4px; word-break: break-all; }

.keikoba-page .contact-footer-text{ font-size: 13px; text-align: center; opacity: 0.9; margin-top: 6px; }

.keikoba-page footer{ text-align: center; font-size: 11px; padding: 10px 0 16px; color: rgba(0,0,0,0.55); }

.profile img{padding:0 !important;}


/* ===== Patch: remove double-frame inner layers ===== */
.main-text::before,
.panel::before,
.profile-panel::before,
.schedule-panel::before{
  content: none !important;
  display: none !important;
}


/* ===== Patch v3: Intro card keeps double-frame; profile photo full-bleed; center name ===== */

/* Intro ("心静かに…") should be the only double-frame card */
.keikoba-page .main-text{
  background: rgba(244,241,232,0.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.keikoba-page .main-text::before{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.7);
  pointer-events: none;
  display: block;
}

/* Profile: photo should touch the frame edges */
.keikoba-page .profile-panel{
  padding: 0 !important;
  overflow: hidden;
}
.keikoba-page .profile-hero{
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  margin-bottom: 0;
}
.keikoba-page .profile-photo-wrap{
  flex: 0 0 auto;
  width: 100%;
}
.keikoba-page .profile-photo{
  width: 100%;
  display: block;
  border-radius: 0 !important;
}
.keikoba-page .profile-heading{
  padding: 22px 22px 10px;
  text-align: center;
}
.keikoba-page .profile-name-ja,
.keikoba-page .profile-name-en{
  text-align: center;
}
/* Body part inside profile panel */
.keikoba-page .profile-panel > section{
  padding: 0 22px 18px;
}


/* ===== Patch v4: narrow intro card ===== */
.keikoba-page .main-text{
  max-width: calc(100% - 80px);
  margin-left: auto;
  margin-right: auto;
}


/* ===== Patch v5: brighten profile card ===== */
.keikoba-page .profile-panel{
  background: rgba(255,255,255,0.78) !important;
}


/* ===== Patch v6 ===== */

/* Footer same band style as header */
footer.site-footer{
  background: rgba(244,241,232,0.85);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Anchor jump offset so card top is visible below header */
section[id]{
  scroll-margin-top: 88px; /* header height */
}


/* ===== Patch v6: footer matches header band; anchor scroll lands at card top ===== */

/* Footer band (same feel as header) */
footer{
  position: relative;
  background: rgba(244,241,232,0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.06);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: #1a2a40;
  font-size: 0.95rem;
}

/* When jumping to anchors from the menu, align to the start of the card */



/* ===== Patch v7: menu jump offset ~50px from top ===== */
#intro, #keiko, #profile, #schedule, #contact{
  scroll-margin-top: 50px;
}

/* ===== Patch v8: anchor landing gap (top ~50px), robust across iOS/header height ===== */
:root{
  --header-h: 56px;
  --phoenix-grad-1: #071A3D; /* deep blue */
  --phoenix-grad-2: #0B2E73; /* blue-gray */
  --phoenix-grad-3: #3A7AE0; /* silver */
  --phoenix-glow: rgba(160,200,255,.55);
}
html, body{ height: 100%; }
/* assume main content wrapper is .container or main; make it flex:1 if present */
/* footer sticks to bottom and includes safe-area */
body.keikoba-page footer{
  
  height: auto;
  min-height: 56px;
}



body.keikoba-page{
   /* prevent content hidden behind fixed footer */
}
body.keikoba-page 


/* ===== Patch v13: Footer shows only at page end (not fixed), but reaches bottom nicely ===== */
html, body{ height: 100%; }
/* Make main content grow so footer is pushed to bottom when content is short */
/* Footer band styling (same feel as header) */
body.keikoba-page footer{
  background: rgba(244,241,232,0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  color: #1a2a40;
  font-size: 0.95rem;
}


/* ===== Patch v14: background applies only to main (footer sits on plain band) ===== */
body.keikoba-page{
  background: #f5f3ee; /* plain base behind footer */
}
body.keikoba-page footer{
  background: rgba(244,241,232,0.96);
}

/* ===== Patch v15: main-only background + normal document flow (prevents iOS scroll lock) ===== */
body.keikoba-page{ background: #f5f3ee; }
/* Footer band stays plain and sits in normal flow */
body.keikoba-page footer{
  background: rgba(244,241,232,0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}


/* ===== Patch v16: Background pattern scale + iOS scroll lock fix ===== */
/* Keep body scroll native (do not force overflow-y on iOS) */
html, body{
  height: auto;
  overflow-x: hidden;
}
body{
  /* do NOT set overflow-y: auto; (can cause iOS rubber-band lock) */
  background-color: #f5f3ee;
  margin: 0;
}
/* Background only behind main content (footer sits on plain band) */
main.bg-area{
  padding-top: calc(var(--header-h) + 50px);

  background-image: url("../images/karakusa.png");
  background-repeat: repeat;
  background-position: center top;
  background-size: 260px; /* match previous look */
}


/* ===== Patch v17: fixed header + remove unwanted top gap before background ===== */
:root{ --header-h: 72px; } /* fallback; actual height is approx, safe for iPhone */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}
/* Ensure the area under header is not blank: main starts right under header and carries pattern */
main.bg-area{
  margin-top: 0 !important;
  padding-top: calc(var(--header-h) + 50px);
}
/* Remove any first-section extra spacing */
/* If there is a global top padding on body or container, neutralize it */
body.keikoba-page{ padding-top: 0 !important; }

/* ===== Patch v18: restore first card vertical rhythm (do not zero first-child margin) ===== */
/* Intentionally no rule overriding main.bg-area > :first-child margin-top */

/* ===== Patch v19: header-to-first-card spacing = 50px ===== */

/* ===== Patch v20: header-to-intro gap exactly 50px ===== */


/* ===== Patch v21: clean structure (gap handled by container only) ===== */
/* Header fixed, container controls vertical rhythm, cards remain uniform */

/* ===== Patch v23: .main-text margin-top=0 (avoid double gap); container controls top gap ===== */

/* ===== Patch v24: anchor landing offset = 90px (header 72 + gap 18) ===== */
:root{
  --header-h: 72px;
  --scroll-offset: 90px;
}
#intro, #about, #profile, #schedule, #contact{
  scroll-margin-top: var(--scroll-offset);
}

/* ===== Patch v25: first (intro) card top spacing = 90px ===== */
#intro { padding-top: 0 !important; margin-top: 0 !important; }
#intro .main-text { margin-top: 90px !important; }


/* ===== Patch v27: ONLY adjust card outer/inner spacing (keep all other styles intact) ===== */
/* Card outer spacing (top/bottom space around the card) */
.main-text{
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
/* Card inner spacing (text start padding) */
.main-text{
  padding-top: 40px !important;
}
/* Ensure the first (intro) card follows the same rule (override any earlier intro-specific values) */
#intro .main-text{
  margin-top: 40px !important;
  padding-top: 40px !important;
}


/* ===== Patch v28: apply spacing to intro card element itself (#intro is the card) ===== */
section#intro.main-text,
#intro.main-text{
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  padding-top: 40px !important;
}


/* ===== Patch v31: initial view + anchor landings =====
   Goal:
   - When opening keikoba.html (no hash), the first card starts at Y=90px from viewport top.
   - When landing via hash (from index or within page), the target aligns with 90px from viewport top.
   - Card outer spacing = 40px (between cards), but first card top spacing is controlled by the initial 90px.
   - Card inner padding-top = 40px (text breathing space).
*/

/* 1) Initial view: push main content down by 90px (header is fixed, so this sets the visual start) */
main.bg-area{
  padding-top: 100px !important;
}

/* 2) Unify anchor landing offset to 90px */
#intro, #about, #profile, #schedule, #contact{
  scroll-margin-top: 90px;
}

/* Extra robustness for cross-page hash landings (iOS/Safari timing quirks) */
:target::before{
  content:"";
  display:block;
  height:90px;
  margin-top:-90px;
}

/* 3) Card outer spacing (between cards) */
.main-text{
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

/* First card: avoid adding extra 40px on top (initial 90px already provides the top breathing) */
#intro.main-text,
section#intro.main-text{
  margin-top: 0 !important;
}

/* 4) Card inner spacing (text start) */
.main-text{
  padding-top: 40px !important;
}


/* ===== はじめにカード：JS制御フェード（is-show） ===== */
#introTextLines .text-line {
  animation: none !important;
  opacity: 0 !important;
  transform: translateY(12px);
  filter: blur(2px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out, filter 0.9s ease-out;
}
#introTextLines .text-line.is-show {
  opacity: 1 !important;
  transform: translateY(0);
  filter: blur(0);
}


/* --- Omikuji Phoenix Logo --- */
.phoenix-btn{
  border: 0;
  background: transparent;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

/* size: follow existing .logo-small */
.phoenix-btn .phoenix-logo, .phoenix-btn img{
  height: 46px;
  width: auto;
  min-width: 46px;
  display: block;
}


/* gradient colors (inline svg stops) */
.phoenix-btn .phoenix-stop1{ stop-color: var(--phoenix-grad-1); }
.phoenix-btn .phoenix-stop2{ stop-color: var(--phoenix-grad-2); }
.phoenix-btn .phoenix-stop3{ stop-color: var(--phoenix-grad-3); }

/* tap: gold gradient (no glow) */
.phoenix-btn.is-glow{
  /* clear, unmistakable gold gradient */
  --phoenix-grad-1: #6B4A00; /* deep gold */
  --phoenix-grad-2: #D6A83A; /* gold */
  --phoenix-grad-3: #FFF1B8; /* pale gold */
}
/* speech bubble */
.omikuji-bubble{
  position: absolute;
  top: calc(var(--header-h) + 10px);
  left: 12px;
  max-width: min(360px, calc(100vw - 24px));
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}

.omikuji-bubble::before{
  content:"";
  position:absolute;
  top:-8px;
  left: 20px;
  width: 16px;
  height: 16px;
  background: rgba(255,255,255,.92);
  border-left: 1px solid rgba(0,0,0,.08);
  border-top: 1px solid rgba(0,0,0,.08);
  transform: rotate(45deg);
}

.omikuji-bubble.is-show{
  opacity: 1;
  transform: translateY(0);
}

.omikuji-rank{
  font-weight: 700;
  margin-bottom: 8px;
}

.omikuji-text{
  white-space: pre-wrap;
  line-height: 1.9;
}

.omikuji-lucky{
  margin-top: 10px;
  font-size: .85em;
  opacity: .85;
}


/* 鳳凰クリック時 発光 */


/* optional: slightly brighten gradient on glow */
.phoenix-btn.is-glow #phoenixGrad stop:first-child{
  stop-color:#1e4fa8;
}

.phoenix-logo{display:block;height:28px;width:auto;}


/* ===== Patch: remove iOS tap highlight on phoenix logo ===== */
.phoenix-btn{
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}


/* ===== Patch: phoenix soft drop-shadow while gold ===== */
.phoenix-logo,
.phoenix-btn svg{
  transition: filter 0.3s ease;
}

/* When omikuji is open (gold state), add gentle depth */
.phoenix-btn.is-glow .phoenix-logo,
.phoenix-btn.is-glow svg{
  filter:
    drop-shadow(0 2px 6px rgba(120, 90, 30, 0.35))
    drop-shadow(0 6px 14px rgba(214, 168, 58, 0.25));
}


/* ===== Patch: phoenix gold + soft shadow + gentle lift ===== */

/* smooth return */
.phoenix-logo,
.phoenix-btn svg{
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* gold state: shadow + slight upward lift */
.phoenix-btn.is-glow .phoenix-logo,
.phoenix-btn.is-glow svg{
  filter:
    drop-shadow(0 2px 6px rgba(120, 90, 30, 0.35))
    drop-shadow(0 6px 14px rgba(214, 168, 58, 0.25));
  transform: translateY(-2px);
}


/* ===== Patch: phoenix shadow ONLY downward + gentle lift (override) ===== */

/* ensure smooth in/out */
.phoenix-logo,
.phoenix-btn svg{
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* gold state: shadow straight down + slight upward lift */
.phoenix-btn.is-glow .phoenix-logo,
.phoenix-btn.is-glow svg{
  filter:
    drop-shadow(0 4px 6px rgba(120, 90, 30, 0.35))
    drop-shadow(0 10px 14px rgba(214, 168, 58, 0.25));
  transform: translateY(-2px);
}


/* ===== Patch: sharper downward shadow + dark brown tone ===== */

/* Override gold-state shadow: sharp +焦げ茶 */
.phoenix-btn.is-glow .phoenix-logo,
.phoenix-btn.is-glow svg{
  filter:
    drop-shadow(0 3px 2px rgba(60, 40, 20, 0.55))
    drop-shadow(0 7px 4px rgba(90, 60, 30, 0.35));
  transform: translateY(-2px);
}


/* ===== Patch: lift + shadow animation duration = 1s ===== */
.phoenix-logo,
.phoenix-btn svg{
  transition: filter 1s ease, transform 1s ease;
}


/* ===== Patch: One-shot lift + downward sharp brown shadow (return after 1s) ===== */

/* keyframes: lift once, then return */
@keyframes phoenixLiftOnce {
  0% {
    transform: translateY(0);
    filter: none;
  }
  40% {
    transform: translateY(-2px);
    filter:
      drop-shadow(0 3px 2px rgba(60, 40, 20, 0.55))
      drop-shadow(0 7px 4px rgba(90, 60, 30, 0.35));
  }
  100% {
    transform: translateY(0);
    filter: none;
  }
}

/* play animation once when gold state appears */
.phoenix-btn.is-glow .phoenix-logo,
.phoenix-btn.is-glow svg{
  animation: phoenixLiftOnce 1s ease forwards;
}



/* --- Phoenix SVG layered shadow (hidden by default) --- */
#shadow{
  filter: blur(6px);
  opacity: 0;                 /* 普段は見えない */
  transition: opacity .25s ease;
}

/* クリック時だけ影を出す */
.phoenix-btn.is-glow #shadow{
  opacity: .35;              /* 影の濃さはここ */
}

/* Glow only on main layer when active */
.phoenix-btn.is-glow #main{
  filter: drop-shadow(0 0 8px rgba(120,160,255,.9));
}