/* 初期は隠す（クリックも不可） */
.ghost-menu{
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .36s ease, transform .36s ease;
}

/* introが終わって body に is-hero-bg が付いたら表示 */
body.is-hero-bg .ghost-menu,
body.wp-singular .ghost-menu{
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}


.ghost-menu .paper-menu{
  box-sizing: border-box;
  overflow: clip;  
  background-size: 100% 100%;
}

.ghost-menu{
  position: fixed !important; 
  right: 10px  ;
  top: 40px !important;
  z-index: 9999 !important;
  pointer-events: auto; 
}

.menu-badge{
  display:block; 
  border:none; 
  background: transparent; 
  padding: 0; 
  cursor: pointer;
  width: 130px; 
  height: 130px;
  filter: drop-shadow(0 10px 10px rgba(84, 52, 32, 0.819));
  pointer-events:auto;
}
.menu-badge img{ 
  width:100%; 
  height:100%; 
  object-fit: contain; 
  opacity:.85; 
  transition: opacity .2s;
  transform-origin: 50% 60%;
  animation: butterfly-flutter 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes butterfly-flutter {
  0% {
    transform: rotate(-3deg) scale(1) translateX(0%) translateY(0px) scaleX(1);
  }
  2% {
    transform: rotate(-5deg) scale(1.01) translateX(-2%) translateY(-4px) scaleX(1);
  }
  4% {
    transform: rotate(-2deg) scale(0.99) translateX(-4%) translateY(-8px) scaleX(1);
  }
  6% {
    transform: rotate(-6deg) scale(1.02) translateX(-6%) translateY(-12px) scaleX(1);
  }
  8% {
    transform: rotate(-1deg) scale(0.98) translateX(-8%) translateY(-16px) scaleX(1);
  }
  10% {
    transform: rotate(-4deg) scale(1.01) translateX(-10%) translateY(-20px) scaleX(1);
  }
  12% {
    transform: rotate(-7deg) scale(0.99) translateX(-12%) translateY(-24px) scaleX(1);
  }
  14% {
    transform: rotate(-3deg) scale(1.02) translateX(-14%) translateY(-28px) scaleX(1);
  }
  16% {
    transform: rotate(-5deg) scale(0.98) translateX(-16%) translateY(-32px) scaleX(1);
  }
  18% {
    transform: rotate(-2deg) scale(1.01) translateX(-18%) translateY(-36px) scaleX(1);
  }
  20% {
    transform: rotate(-6deg) scale(0.99) translateX(-20%) translateY(-40px) scaleX(1);
  }
  22% {
    transform: rotate(-1deg) scale(1.02) translateX(-22%) translateY(-44px) scaleX(1);
  }
  24% {
    transform: rotate(-4deg) scale(0.98) translateX(-24%) translateY(-48px) scaleX(1);
  }
  26% {
    transform: rotate(-7deg) scale(1.01) translateX(-26%) translateY(-52px) scaleX(1);
  }
  28% {
    transform: rotate(-3deg) scale(0.99) translateX(-28%) translateY(-56px) scaleX(1);
  }
  30% {
    transform: rotate(-5deg) scale(1.02) translateX(-30%) translateY(-60px) scaleX(1);
  }
  31% {
    transform: rotate(-2deg) scale(0.98) translateX(-30%) translateY(-60px) scaleX(-1);
  }
  34% {
    transform: rotate(-6deg) scale(1.01) translateX(-28%) translateY(-52px) scaleX(-1);
  }
  36% {
    transform: rotate(-1deg) scale(0.99) translateX(-26%) translateY(-44px) scaleX(-1);
  }
  38% {
    transform: rotate(-4deg) scale(1.02) translateX(-24%) translateY(-36px) scaleX(-1);
  }
  40% {
    transform: rotate(-7deg) scale(0.98) translateX(-22%) translateY(-28px) scaleX(-1);
  }
  42% {
    transform: rotate(-3deg) scale(1.01) translateX(-20%) translateY(-20px) scaleX(-1);
  }
  44% {
    transform: rotate(-5deg) scale(0.99) translateX(-18%) translateY(-12px) scaleX(-1);
  }
  46% {
    transform: rotate(-2deg) scale(1.02) translateX(-16%) translateY(-4px) scaleX(-1);
  }
  48% {
    transform: rotate(-6deg) scale(0.98) translateX(-14%) translateY(4px) scaleX(-1);
  }
  50% {
    transform: rotate(-1deg) scale(1.01) translateX(-12%) translateY(12px) scaleX(-1);
  }
  52% {
    transform: rotate(-4deg) scale(0.99) translateX(-10%) translateY(20px) scaleX(-1);
  }
  54% {
    transform: rotate(-7deg) scale(1.02) translateX(-8%) translateY(28px) scaleX(-1);
  }
  56% {
    transform: rotate(-3deg) scale(0.98) translateX(-6%) translateY(36px) scaleX(-1);
  }
  58% {
    transform: rotate(-5deg) scale(1.01) translateX(-4%) translateY(44px) scaleX(-1);
  }
  60% {
    transform: rotate(-2deg) scale(0.99) translateX(-2%) translateY(52px) scaleX(-1);
  }
  62% {
    transform: rotate(-6deg) scale(1.02) translateX(0%) translateY(60px) scaleX(-1);
  }
  64% {
    transform: rotate(-1deg) scale(0.98) translateX(2%) translateY(52px) scaleX(-1);
  }
  66% {
    transform: rotate(-4deg) scale(1.01) translateX(4%) translateY(44px) scaleX(-1);
  }
  68% {
    transform: rotate(-7deg) scale(0.99) translateX(6%) translateY(36px) scaleX(-1);
  }
  70% {
    transform: rotate(-3deg) scale(1.02) translateX(8%) translateY(28px) scaleX(-1);
  }
  72% {
    transform: rotate(-5deg) scale(0.98) translateX(10%) translateY(20px) scaleX(-1);
  }
  74% {
    transform: rotate(-2deg) scale(1.01) translateX(12%) translateY(12px) scaleX(-1);
  }
  76% {
    transform: rotate(-6deg) scale(0.99) translateX(14%) translateY(4px) scaleX(-1);
  }
  78% {
    transform: rotate(-1deg) scale(1.02) translateX(16%) translateY(-4px) scaleX(-1);
  }
  80% {
    transform: rotate(-4deg) scale(0.98) translateX(18%) translateY(-12px) scaleX(-1);
  }
  82% {
    transform: rotate(-7deg) scale(1.01) translateX(20%) translateY(-20px) scaleX(-1);
  }
  83% {
    transform: rotate(-3deg) scale(0.99) translateX(20%) translateY(-20px) scaleX(1);
  }
  84% {
    transform: rotate(-5deg) scale(1.02) translateX(18%) translateY(-12px) scaleX(1);
  }
  86% {
    transform: rotate(-2deg) scale(0.98) translateX(16%) translateY(-4px) scaleX(1);
  }
  88% {
    transform: rotate(-6deg) scale(1.01) translateX(14%) translateY(4px) scaleX(1);
  }
  90% {
    transform: rotate(-1deg) scale(0.99) translateX(12%) translateY(12px) scaleX(1);
  }
  92% {
    transform: rotate(-4deg) scale(1.02) translateX(10%) translateY(20px) scaleX(1);
  }
  94% {
    transform: rotate(-7deg) scale(0.98) translateX(8%) translateY(28px) scaleX(1);
  }
  96% {
    transform: rotate(-3deg) scale(1.01) translateX(4%) translateY(36px) scaleX(1);
  }
  98% {
    transform: rotate(-5deg) scale(0.99) translateX(2%) translateY(44px) scaleX(1);
  }
  100% {
    transform: rotate(-3deg) scale(1) translateX(0%) translateY(0px) scaleX(1);
  }
}

.menu-badge:hover img,
.ghost-menu:focus-within .menu-badge img{ 
  opacity: 1;
  animation: butterfly-hover 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

@keyframes butterfly-hover {
  0% {
    transform: rotate(-3deg) scale(1.05) translateX(-6%) translateY(-12px) scaleX(1);
  }
  5% {
    transform: rotate(-5deg) scale(1.06) translateX(-9%) translateY(-4px) scaleX(1);
  }
  10% {
    transform: rotate(-2deg) scale(1.07) translateX(-12%) translateY(8px) scaleX(1);
  }
  15% {
    transform: rotate(-6deg) scale(1.08) translateX(-15%) translateY(-8px) scaleX(1);
  }
  20% {
    transform: rotate(-1deg) scale(1.09) translateX(-18%) translateY(4px) scaleX(1);
  }
  25% {
    transform: rotate(-4deg) scale(1.08) translateX(-21%) translateY(-12px) scaleX(1);
  }
  30% {
    transform: rotate(-7deg) scale(1.07) translateX(-24%) translateY(8px) scaleX(1);
  }
  35% {
    transform: rotate(-3deg) scale(1.06) translateX(-27%) translateY(-4px) scaleX(1);
  }
  40% {
    transform: rotate(-5deg) scale(1.05) translateX(-30%) translateY(12px) scaleX(1);
  }
  42% {
    transform: rotate(-2deg) scale(1.05) translateX(-30%) translateY(0px) scaleX(-1);
  }
  50% {
    transform: rotate(-6deg) scale(1.06) translateX(-27%) translateY(-8px) scaleX(-1);
  }
  55% {
    transform: rotate(-1deg) scale(1.07) translateX(-24%) translateY(4px) scaleX(-1);
  }
  60% {
    transform: rotate(-4deg) scale(1.08) translateX(-21%) translateY(-12px) scaleX(-1);
  }
  65% {
    transform: rotate(-7deg) scale(1.09) translateX(-18%) translateY(8px) scaleX(-1);
  }
  70% {
    transform: rotate(-3deg) scale(1.08) translateX(-15%) translateY(-4px) scaleX(-1);
  }
  75% {
    transform: rotate(-5deg) scale(1.07) translateX(-12%) translateY(12px) scaleX(-1);
  }
  77% {
    transform: rotate(-2deg) scale(1.06) translateX(-12%) translateY(0px) scaleX(1);
  }
  80% {
    transform: rotate(-6deg) scale(1.05) translateX(-9%) translateY(-8px) scaleX(1);
  }
  85% {
    transform: rotate(-1deg) scale(1.06) translateX(-6%) translateY(4px) scaleX(1);
  }
  90% {
    transform: rotate(-4deg) scale(1.07) translateX(-3%) translateY(-12px) scaleX(1);
  }
  95% {
    transform: rotate(-2deg) scale(1.06) translateX(-1.5%) translateY(8px) scaleX(1);
  }
  100% {
    transform: rotate(-3deg) scale(1.05) translateX(-6%) translateY(-12px) scaleX(1);
  }
}


.paper-menu ul{ list-style:none; margin:0; padding:0.3rem }
.paper-menu a{
  display:block; 
  padding:.3rem .6rem; 
  border-radius:10px;
  color:#222; 
  font-family: 'Amatic SC', cursive; 
  font-size: 1.3em; 
  font-weight:600; 
  letter-spacing:.02em; text-decoration:none;
}




/* 開閉（縦方向に隠すよう修正） */
.paper-menu{
  position: absolute !important; 
  right: 5%; 
  top:100%;
  inline-size: fit-content(380px); /* 中身の幅にフィット、上限380px */
  min-inline-size: 200px;          /* 下限250px */
  max-inline-size: 380px;  
  padding: 0;
  opacity: 0; pointer-events: none;
  background-size: 100% 100% !important;
  overflow: clip; 
  transform: translateY(6px);
  transition: opacity .18s ease, transform .22s ease, clip-path .32s ease;
  clip-path: inset(92% 0 0 0);   /* ← 下を92%隠す＝上だけ細く見える */
  z-index: -1;
}

.ghost-menu.open .paper-menu{
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  z-index: 100;
   pointer-events: auto; 
}

/* 見た目（切り抜きPNG1枚＋巻き口の変数） */
.ghost-menu .paper-menu{
  position: relative;
  background: url('../img/menu_tex.webp') center / contain no-repeat;
  background-color: transparent;
  line-height: 1.5rem;
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
  padding: 1.1rem 1.3rem;
  border-radius: 0;
  overflow: visible;
  color:#222; 
  font-family: 'Amatic SC', cursive; 
  font-size: 1.3em; 
  font-weight:600; 
  letter-spacing:.02em; text-decoration:none;
  --roll-h: 40px;   /* 巻き口の高さ */
  --roll-o: .95;    /* 巻き口の濃さ */
  --roll-w: 28px;   /* 巻き口の幅（左右の余白） */
}

/* 巻き口（上辺の筒っぽいハイライト） */
.ghost-menu .paper-menu::before{
  content: "";
  position: absolute; 
  left: calc(-1 * var(--roll-w)); 
  right: calc(-1 * var(--roll-w)); 
  top: 0;
  height: var(--roll-h);
  opacity: var(--roll-o);
  border-bottom-left-radius: 50% 60%;
  border-bottom-right-radius: 50% 60%;
  background:
    radial-gradient(120% 120% at 50% -20%, rgba(255,255,255,.7),
                    rgba(0,0,0,.15) 60%, transparent 70%),
    linear-gradient(#efe3bf, #d9c89e);
  box-shadow: 0 6px 12px rgba(0,0,0,.18);
  transform: translateY(-2px);
  z-index: 1;
  pointer-events: none;
}
/* 中身は最前面 */
.ghost-menu .paper-menu > *{ 
  position: relative; 
  z-index: 2; 
}

/* “Categories”見出しより後ろに並ぶ li の a にだけ左インデント */
.paper-menu .menu-label ~ li > a{
  padding-left: 2.5rem;   /* お好みで調整 */
  position: relative;
}

/* 小さな矢印や点を付けたい場合（任意） */
.paper-menu .menu-label ~ li > a::before{
  content: "›";           /* "•" や "–" などでもOK */
  position: absolute;
  left: 2.0rem;
  opacity: .5;
}

.menu-label{
  padding-left: 1.3rem;
}
/* UL全体は折り返し可能に */
.paper-menu .menu-onecol{
 /* display: flex;*/
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;   
  margin: 0;
  padding: 0;
  row-gap: var(--menu-gap-y, .25rem);
  column-gap: var(--menu-gap-x, .4rem);
  gap: 0rem 0rem;  /* 行間/列間 */
  
}

/* すべての li は基本1列（全幅） */
.paper-menu .menu-onecol > li{
  flex: 1 1 100%; 
  min-width: 0;
}

/* 先頭4件（Home / Gallery / Contact / Grid Note）だけ2列配置（=2行固定） */
.paper-menu .menu-onecol > li:nth-child(-n+4){
  flex: 0 0 calc(50% - (var(--menu-gap-x, .4rem) / 2)); /* 2列にする幅。隙間はgapと合わせて調整 */
  min-width: 0;       /* ラベルが折返しにくいように */
}

/* 区切り＆見出しは改行させて1列レイヤへ戻す */
.paper-menu .menu-onecol > .menu-divider,
.paper-menu .menu-onecol > .menu-label{
  flex-basis: 100%;
}

/* 上段4つはチップ風（任意） */
.paper-menu .menu-onecol > li:nth-child(-n+4) a{
  display: block;
  white-space: nowrap;
  align-items: center;
  text-overflow: ellipsis;
  max-width: 100%;

  border-radius: 10px;
}

/* 640px以下は1列にして無理をしない（必要なら調整） */
@media (max-width: 640px){
  .paper-menu .menu-primary{ grid-template-columns: 1fr; }
  .paper-menu .menu-cats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 768px){
  .ghost-menu{ 
    right: 15px ;
    top: 10px ;
    transform: none ;
    z-index: 9999;
  }
  .menu-badge{ 
    width: 80px; 
    height: 80px; 
  }
  .menu-badge img {
    animation: butterfly-flutter-mobile 3.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .ghost-menu .paper-menu,
  .paper-menu {
    box-sizing: border-box;
    inline-size: clamp(200px, 70vw, 300px); /* min-width/max-width の一本化 */
    max-inline-size: 80vw;
    min-inline-size: 200px;
    flex: 0 0 auto;        /* 縮ませない（flex子になっていても） */
    line-height: 1.8rem;
    font-size: 1.3em; 
  }

/* “Categories”見出しより後ろに並ぶ li の a にだけ左インデント */
.paper-menu .menu-label ~ li > a{
  padding-left: 3.3rem;   /* お好みで調整 */
  position: relative;
}
}

@keyframes butterfly-flutter-mobile {
  0% {
    transform: rotate(-3deg) scale(1) translateX(0%) translateY(0px) scaleX(1);
  }
  5% {
    transform: rotate(-4deg) scale(1.005) translateX(-3%) translateY(-8px) scaleX(1);
  }
  10% {
    transform: rotate(-5deg) scale(1.01) translateX(-6%) translateY(-12px) scaleX(1);
  }
  15% {
    transform: rotate(-3deg) scale(0.995) translateX(-9%) translateY(4px) scaleX(1);
  }
  20% {
    transform: rotate(-2deg) scale(0.99) translateX(-12%) translateY(8px) scaleX(1);
  }
  25% {
    transform: rotate(-6deg) scale(1.005) translateX(-15%) translateY(-4px) scaleX(1);
  }
  27% {
    transform: rotate(-1deg) scale(0.998) translateX(-15%) translateY(0px) scaleX(-1);
  }
  35% {
    transform: rotate(-4deg) scale(1.002) translateX(-12%) translateY(-8px) scaleX(-1);
  }
  40% {
    transform: rotate(-2deg) scale(0.995) translateX(-9%) translateY(4px) scaleX(-1);
  }
  45% {
    transform: rotate(-5deg) scale(1.005) translateX(-6%) translateY(-4px) scaleX(-1);
  }
  50% {
    transform: rotate(-3deg) scale(1) translateX(-3%) translateY(0px) scaleX(-1);
  }
  55% {
    transform: rotate(-1deg) scale(0.998) translateX(0%) translateY(-8px) scaleX(-1);
  }
  60% {
    transform: rotate(-4deg) scale(1.002) translateX(3%) translateY(4px) scaleX(-1);
  }
  65% {
    transform: rotate(-2deg) scale(0.995) translateX(6%) translateY(-4px) scaleX(-1);
  }
  70% {
    transform: rotate(-5deg) scale(1.005) translateX(9%) translateY(0px) scaleX(-1);
  }
  72% {
    transform: rotate(-3deg) scale(0.998) translateX(9%) translateY(0px) scaleX(1);
  }
  75% {
    transform: rotate(-1deg) scale(1.002) translateX(6%) translateY(-8px) scaleX(1);
  }
  80% {
    transform: rotate(-4deg) scale(0.995) translateX(3%) translateY(4px) scaleX(1);
  }
  85% {
    transform: rotate(-2deg) scale(1.005) translateX(0%) translateY(-4px) scaleX(1);
  }
  90% {
    transform: rotate(-3deg) scale(0.998) translateX(-1.5%) translateY(0px) scaleX(1);
  }
  95% {
    transform: rotate(-1deg) scale(1.002) translateX(-0.6%) translateY(-4px) scaleX(1);
  }
  100% {
    transform: rotate(-3deg) scale(1) translateX(0%) translateY(0px) scaleX(1);
  }
}

  
@media(max-width:1200px){
body > .ghost-menu{ 
    right: 15px ;
    top: 10px ;
    transform: none ;
    z-index: 9999;
  }

}


/* 画面幅 ≤ 480px：さらに余白調整 */
@media (max-width: 480px){
  .ghost-menu .paper-menu{
    min-width: min(200px, 40vw);
    max-width: 60vw;
  }

}