/* =========================================================
   postmenu.css
   願いを記す 投稿メニュー 完全修正版 v30
   - 桜演出は完全削除
   - お礼参りをスマホ投稿メニューに追加
   - 6項目を安全域内でバランスよく配置
   - うさぎ・キツネにはかぶらない
   - 鳥獣戯画に合う立体スイッチ
   - 高齢者でも読める濃く大きい文字
   - 押すとゆっくり深く沈む
========================================================= */

.pm20-wrap{
  width:min(100%, 560px);
  margin:0 auto;
  padding:6px 6px 26px;
}

/* 見出し画像：鳥獣戯画に合う立体額風 */
.pm20-heading{
  position:relative;
  width:min(86vw, 390px);
  margin:0 auto 8px;
  padding:8px 11px 10px;
  text-align:center;
  border-radius:8px;
  border:1px solid rgba(126,91,43,.72);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.58), rgba(255,255,255,0) 44%),
    linear-gradient(180deg, rgba(244,229,190,.96) 0%, rgba(205,160,88,.96) 52%, rgba(151,101,42,.96) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.74),
    inset 0 -5px 0 rgba(97,61,24,.30),
    inset 0 0 0 2px rgba(255,248,222,.34),
    0 4px 0 rgba(92,59,25,.50),
    0 8px 14px rgba(67,42,18,.22);
  transform:perspective(520px) rotateX(2deg);
}

.pm20-heading::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:6px;
  border:1px solid rgba(94,63,29,.34);
  background:
    linear-gradient(90deg, rgba(90,55,25,.08), rgba(255,255,255,.18), rgba(90,55,25,.08));
  pointer-events:none;
}

.pm20-heading::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:-7px;
  height:8px;
  border-radius:999px;
  background:radial-gradient(ellipse at center, rgba(72,43,14,.32), rgba(72,43,14,0) 70%);
  pointer-events:none;
}

.pm20-heading-img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  filter:
    sepia(.20)
    saturate(.82)
    contrast(1.16)
    drop-shadow(0 1px 0 rgba(255,255,255,.68))
    drop-shadow(0 2px 2px rgba(70,44,18,.18));
}

/* 巻物：スマホでもタブレットでも安定 */
.pm20-scroll-stage{
  position:relative;
  width:clamp(320px, 94vw, 430px);
  margin:0 auto;
}

.pm20-scroll-img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
}

/*
  ここが一番大事。
  パネルを「動物より上の安全域」に固定して、
  その中で3段をspace-betweenで散らす。
*/
.pm20-panel{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:11.6%;
  width:74.5%;
  height:56.2%;
}

.pm20-grid{
  list-style:none;
  margin:0;
  padding:0;
  height:100%;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:repeat(4, auto);
  align-content:space-between;
  column-gap:14px;
  row-gap:0;
}

/* 立体スイッチ：豪華め、でも巻物内に収める */
.pm20-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:74px;
  padding:7px 6px 8px;
  text-align:center;
  text-decoration:none;
  color:#3f2b1c;
  border-radius:17px;
  border:1px solid rgba(222,207,176,.98);
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.92), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.76) 0%, rgba(255,252,239,.60) 48%, rgba(235,218,174,.48) 100%);
  -webkit-backdrop-filter:blur(1px);
  backdrop-filter:blur(1px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -7px 0 rgba(193,163,102,.38),
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 7px 0 rgba(154,116,55,.56),
    0 11px 15px rgba(63,39,17,.18);
  overflow:hidden;
  transition:
    transform .62s cubic-bezier(.17,.78,.20,1),
    box-shadow .62s cubic-bezier(.17,.78,.20,1),
    filter .62s ease;
}

.pm20-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:17px;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.16) 38%, rgba(255,255,255,0) 70%),
    linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,0) 22%, rgba(255,255,255,0) 76%, rgba(255,255,255,.14));
}

.pm20-card::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:-10px;
  height:18px;
  border-radius:999px;
  background:radial-gradient(ellipse at center, rgba(66,42,18,.23), rgba(66,42,18,0) 70%);
  pointer-events:none;
}

/* 押した時：ゆっくり、深く沈む */
.pm20-card.is-pressed{
  transform:translateY(15px) scale(.948);
  filter:saturate(.96) brightness(.99);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -2px 0 rgba(183,151,94,.28),
    inset 0 0 0 1px rgba(255,255,255,.20),
    0 1px 0 rgba(120,84,38,.48),
    0 3px 7px rgba(63,39,17,.12);
}

.pm20-icon{
  position:relative;
  z-index:2;
  font-size:clamp(17px, 4.4vw, 21px);
  line-height:1;
  margin-bottom:4px;
}

/* 高齢者向け：濃く、大きく、1行固定 */
.pm20-title{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  font-family:"Yuji Syuku","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:clamp(16px, 4.25vw, 20px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:.005em;
  color:#3f2a1b;
  text-shadow:
    0 1px 0 rgba(255,255,255,.92),
    0 0 1px rgba(63,42,22,.18);
  white-space:nowrap;
  padding:0 1px 10px;
}

.pm20-title--long{
  font-size:clamp(12.8px, 3.62vw, 16.5px);
  letter-spacing:-.04em;
}

.pm20-title--kingan{
  font-size:clamp(13.4px, 3.78vw, 17.4px);
  letter-spacing:-.025em;
}

/* 金の筆線 */
.pm20-title::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%) rotate(-1deg);
  bottom:2px;
  width:48%;
  height:5px;
  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='.52'/%3E%3Cstop offset='0.28' stop-color='%23f6db7c'/%3E%3Cstop offset='0.52' stop-color='%23b67f16'/%3E%3Cstop offset='0.76' stop-color='%23efd06a'/%3E%3Cstop offset='0.91' stop-color='%23ab7612' stop-opacity='.52'/%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%3C/svg%3E");
  opacity:.98;
}

.pm20-sub{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  margin-top:4px;
  font-size:clamp(10.4px, 2.92vw, 13.5px);
  line-height:1.12;
  font-weight:900;
  color:#60462e;
  white-space:nowrap;
  overflow:hidden;
}


.pm20-item--thanks{
  grid-column:1 / -1;
  width:72%;
  justify-self:center;
}

.pm20-card--thanks{
  min-height:68px;
  border-color:rgba(191,151,72,.98);
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.94), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,250,232,.62) 48%, rgba(225,198,138,.50) 100%);
}

.pm20-card--thanks .pm20-title{
  font-size:clamp(16px, 4.1vw, 20px);
}

.pm20-card--thanks .pm20-sub{
  font-size:clamp(10.6px, 2.8vw, 13px);
}

/* 下の祈りラベル */
.pm20-prayer-wrap{
  width:min(88vw, 380px);
  margin:10px auto 0;
}

.pm20-prayer-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 12px;
  border-radius:20px;
  border:1px solid #d9c18a;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,248,223,.88), rgba(255,248,223,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,247,221,.98) 50%, rgba(235,213,160,.96) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.92),
    inset 0 -4px 0 rgba(219,191,125,.70),
    0 5px 13px rgba(119,87,37,.12),
    0 0 0 2px rgba(241,223,171,.36);
}

.pm20-prayer-mark{
  color:#c79739;
  font-size:16px;
  text-shadow:0 0 7px rgba(236,201,123,.45);
  flex:0 0 auto;
}

.pm20-prayer-text{
  color:#6c4e31;
  font-size:clamp(13px, 3.5vw, 18px);
  font-weight:900;
  line-height:1.2;
  letter-spacing:.01em;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.82);
}

.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:390px){
  .pm20-scroll-stage{
    width:clamp(310px, 94vw, 350px);
  }

  .pm20-panel{
    top:11.8%;
    width:73.5%;
    height:56.6%;
  }

  .pm20-grid{
    column-gap:12px;
  }

  .pm20-card{
    min-height:70px;
    padding:6px 5px 7px;
  }

  .pm20-title{
    font-size:14.8px;
  }

  .pm20-title--long{
    font-size:12.2px;
  }

  .pm20-title--kingan{
    font-size:12.9px;
  }

  .pm20-sub{
    font-size:9.9px;
  }

  .pm20-item--thanks{
    width:76%;
  }

  .pm20-card--thanks{
    min-height:62px;
  }
}

/* 標準スマホ */
@media(min-width:391px) and (max-width:480px){
  .pm20-scroll-stage{
    width:clamp(350px, 94vw, 390px);
  }

  .pm20-panel{
    top:11.6%;
    width:74.5%;
    height:56.3%;
  }

  .pm20-card{
    min-height:74px;
  }

  .pm20-item--thanks{
    width:74%;
  }

  .pm20-card--thanks{
    min-height:66px;
  }
}

/* タブレット以上 */
@media(min-width:481px){
  .pm20-scroll-stage{
    width:min(90vw, 470px);
  }

  .pm20-panel{
    top:11.2%;
    width:74.4%;
    height:56.4%;
  }

  .pm20-card{
    min-height:82px;
  }

  .pm20-item--thanks{
    width:72%;
  }

  .pm20-card--thanks{
    min-height:72px;
  }
}