/* =========================================================
   postmenu_final_fixed_v9.css
   願いを記す 投稿メニュー 完全修正版 v11
   - 桜画像を1枚だけ、大きく、見える薄さに調整
========================================================= */

.pm8-wrap{
    width:min(100%, 780px);
    margin:0 auto;
    padding:8px 8px 34px;
  }
  
  .pm8-heading{
    width:min(92vw, 440px);
    margin:0 auto 12px;
    text-align:center;
  }
  .pm8-heading-img{
    display:block;
    width:100%;
    height:auto;
  }
  
  .pm8-scroll-stage{
    position:relative;
    width:min(95vw, 520px);
    margin:0 auto;
  }
  .pm8-scroll-img{
    display:block;
    width:100%;
    height:auto;
    pointer-events:none;
    user-select:none;
  }
  
  .pm8-panel{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:8.4%;
    width:69.8%;
  }
  
  .pm8-grid{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:17px 13px;
  }
  
  .pm8-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:148px;
    padding:13px 9px 16px;
    text-align:center;
    text-decoration:none;
    color:#4f3823;
    border-radius:22px;
    border:1px solid rgba(225, 216, 194, .96);
    background:
      linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.36) 54%, rgba(255,250,240,.20) 100%);
    -webkit-backdrop-filter:blur(1.2px);
    backdrop-filter:blur(1.2px);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.92),
      inset 0 -9px 0 rgba(211,190,148,.36),
      inset 0 0 0 1px rgba(255,255,255,.30),
      0 8px 0 rgba(198,171,124,.58),
      0 14px 18px rgba(98,72,36,.14);
    overflow:hidden;
    transition:
      transform 2.2s cubic-bezier(.16,.83,.18,1),
      box-shadow 2.2s cubic-bezier(.16,.83,.18,1),
      filter .45s ease;
  }
  
  .pm8-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:22px;
    pointer-events:none;
    background:
      linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.15) 34%, rgba(255,255,255,0) 62%),
      linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 78%, rgba(255,255,255,.12));
  }
  
  .pm8-card::after{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    bottom:-12px;
    height:20px;
    border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(98,70,25,.18) 0%, rgba(98,70,25,.07) 44%, rgba(98,70,25,0) 74%);
    pointer-events:none;
  }
  
  .pm8-card.is-pressed{
    transform:translateY(26px) scale(.935);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.56),
      inset 0 -4px 0 rgba(209,190,154,.28),
      0 2px 0 rgba(186,159,110,.46),
      0 3px 8px rgba(111,82,42,.12);
  }
  
  .pm8-icon{
    position:relative;
    z-index:2;
    font-size:26px;
    line-height:1;
    margin-bottom:6px;
  }
  
  .pm8-title{
    position:relative;
    z-index:2;
    display:block;
    width:100%;
    font-family:"Yuji Syuku","Hiragino Mincho ProN","Yu Mincho",serif;
    font-size:clamp(24px, 4vw, 35px);
    font-weight:900;
    line-height:1.18;
    letter-spacing:.03em;
    color:#5a4026;
    text-shadow:0 1px 0 rgba(255,255,255,.82);
    padding:0 2px 18px;
  }
  
  .pm8-title small{
    display:block;
    font-size:.82em;
    line-height:1.02;
    margin-top:2px;
  }
  
  .pm8-title--kingan{
    font-size:clamp(17px, 3.2vw, 23px);
    line-height:1.12;
    letter-spacing:.01em;
    white-space:nowrap;
  }
  
  /* 細い金の筆線 */
  .pm8-title::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%) rotate(-1deg);
    bottom:4px;
    width:56%;
    height:8px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23b88a1f' stop-opacity='0'/%3E%3Cstop offset='0.09' stop-color='%23b88a1f' stop-opacity='.55'/%3E%3Cstop offset='0.28' stop-color='%23f6db7c'/%3E%3Cstop offset='0.52' stop-color='%23c38c18'/%3E%3Cstop offset='0.76' stop-color='%23efd06a'/%3E%3Cstop offset='0.91' stop-color='%23ab7612' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ab7612' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6 15 C25 7 48 21 68 12 C92 4 110 20 132 13 C154 7 170 18 191 12 C212 6 233 18 251 13 C266 10 281 10 294 14 L294 18 C282 20 266 20 252 22 C234 24 214 17 194 22 C174 27 157 18 136 22 C114 26 98 16 76 21 C53 26 28 16 6 20 Z' fill='url(%23g)'/%3E%3Cpath d='M13 13 C22 12 30 12 36 14 M72 13 C81 12 89 13 96 14 M133 14 C142 13 151 14 158 15 M191 13 C201 12 210 13 218 15 M245 13 C256 12 264 13 272 15' stroke='%23fff3c9' stroke-width='1.2' stroke-linecap='round' opacity='.48'/%3E%3C/svg%3E");
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.26)) drop-shadow(0 2px 5px rgba(185,144,44,.24));
    opacity:.98;
  }
  
  .pm8-sub{
    position:relative;
    z-index:2;
    display:block;
    margin-top:8px;
    font-size:clamp(15px, 2.35vw, 21px);
    line-height:1.38;
    font-weight:800;
    color:#6d5135;
  }
  
  .pm8-prayer-wrap{
    width:min(94vw, 560px);
    margin:18px auto 0;
  }
  
  .pm8-prayer-label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:18px 18px;
    border-radius:26px;
    border:1px solid #d9c18a;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,248,223,.9), rgba(255,248,223,0) 38%),
      linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,247,221,.99) 45%, rgba(235,213,160,.98) 100%);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.95),
      inset 0 -6px 0 rgba(219,191,125,.82),
      0 8px 18px rgba(119,87,37,.14),
      0 0 0 3px rgba(241,223,171,.42),
      0 0 22px rgba(222,186,92,.15);
    position:relative;
    overflow:hidden;
  }
  
  .pm8-prayer-label::before,
  .pm8-prayer-label::after{
    content:"";
    position:absolute;
    top:50%;
    width:70px;
    height:3px;
    background:linear-gradient(90deg, transparent, rgba(184,143,42,.98), rgba(231,199,108,.98), transparent);
    box-shadow:0 0 8px rgba(225,187,84,.28);
  }
  .pm8-prayer-label::before{ left:16px; }
  .pm8-prayer-label::after{ right:16px; }
  
  .pm8-prayer-mark{
    color:#c79739;
    font-size:22px;
    text-shadow:0 0 9px rgba(236,201,123,.55);
    flex:0 0 auto;
  }
  
  .pm8-prayer-text{
    color:#6c4e31;
    font-size:clamp(18px, 2.8vw, 24px);
    font-weight:900;
    letter-spacing:.03em;
    text-shadow:0 1px 0 rgba(255,255,255,.82);
  }
  
  /* 指定画像を少なく・大きく・ゆっくり落とす */
  .pm8-sakura-layer{
    position:fixed;
    inset:0;
    z-index:99999;
    overflow:hidden;
    pointer-events:none;
  }
  
  .pm8-sakura-img{
    position:absolute;
    display:block;
    object-fit:contain;
    opacity:.64;
    filter: opacity(.88) saturate(.72) brightness(1.08) drop-shadow(0 5px 10px rgba(143,80,100,.10));
    transform:translate3d(0, -26vh, 0) rotate(var(--rot1, 0deg)) scale(var(--scale, 1));
    animation:pm8ImageSakuraFall linear forwards;
    will-change:transform, opacity;
  }
  
  @keyframes pm8ImageSakuraFall{
    0%{
      opacity:0;
      transform:translate3d(0, -30vh, 0) rotate(var(--rot1, 0deg)) scale(var(--scale,1));
    }
    10%{
      opacity:.64;
    }
    35%{
      opacity:.62;
      transform:translate3d(var(--mid-drift, 0px), 32vh, 0) rotate(var(--rot2, 70deg)) scale(var(--scale,1));
    }
    70%{
      opacity:.56;
      transform:translate3d(calc(var(--drift, 0px) * .72), 78vh, 0) rotate(calc(var(--rot3, 120deg) * .72)) scale(var(--scale,1));
    }
    100%{
      opacity:.42;
      transform:translate3d(var(--drift, 0px), 130vh, 0) rotate(var(--rot3, 160deg)) scale(var(--scale,1));
    }
  }
  
  .sr-only{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }
  
  @media (max-width: 768px){
    .pm8-wrap{ padding:8px 6px 28px; }
    .pm8-heading{ width:min(90vw, 400px); margin:0 auto 10px; }
    .pm8-scroll-stage{ width:min(96vw, 500px); }
    .pm8-panel{ width:69.4%; top:8.2%; }
    .pm8-grid{ gap:16px 12px; }
    .pm8-card{ min-height:142px; }
  }
  
  @media (max-width: 480px){
    .pm8-heading{ width:min(90vw, 338px); margin:0 auto 8px; }
    .pm8-scroll-stage{ width:min(96vw, 390px); }
    .pm8-panel{ width:68.8%; top:8.2%; }
    .pm8-grid{ gap:13px 10px; }
    .pm8-card{ min-height:124px; padding:10px 7px 13px; border-radius:20px; }
    .pm8-icon{ font-size:23px; margin-bottom:5px; }
    .pm8-title{ font-size:clamp(18px, 5.4vw, 27px); padding-bottom:15px; }
    .pm8-title--kingan{ font-size:clamp(14px, 4vw, 19px); }
    .pm8-title::after{ width:56%; height:7px; bottom:4px; }
    .pm8-sub{ font-size:clamp(12px, 3.1vw, 16px); margin-top:7px; }
    .pm8-prayer-label{ padding:14px 12px; gap:8px; }
    .pm8-prayer-label::before,
    .pm8-prayer-label::after{ width:30px; }
    .pm8-prayer-text{ font-size:clamp(15px, 4vw, 18px); }
  }
  
  
  /* v13: 押した瞬間に桜が見えるよう、CSS側にも保険を入れている */
  .pm13-sakura-layer{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483647 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }
  .pm13-sakura-piece{
    position:fixed !important;
    top:-2vh !important;
    left:50vw;
    width:180px;
    height:180px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    opacity:.76;
    filter:opacity(.92) saturate(.72) brightness(1.08) drop-shadow(0 5px 12px rgba(143,80,100,.10));
    transform:translate3d(0,0,0) rotate(var(--rot-start, -8deg)) scale(var(--scale, 1));
    animation:pm13SakuraOneFall var(--fall-time, 5.4s) linear forwards;
    will-change:transform, opacity;
  }
  @keyframes pm13SakuraOneFall{
    0%{
      opacity:.76;
      transform:translate3d(0,0,0) rotate(var(--rot-start, -8deg)) scale(var(--scale,1));
    }
    10%{ opacity:.76; }
    42%{
      opacity:.68;
      transform:translate3d(var(--mid-x, 30px),38vh,0) rotate(var(--rot-mid, 32deg)) scale(var(--scale,1));
    }
    78%{
      opacity:.62;
      transform:translate3d(var(--end-x, -30px),88vh,0) rotate(var(--rot-end, 82deg)) scale(var(--scale,1));
    }
    100%{
      opacity:.38;
      transform:translate3d(var(--end-x, -30px),132vh,0) rotate(var(--rot-end, 82deg)) scale(var(--scale,1));
    }
  }