/* =====================================================================
   NOAH 2026-11-06「プラン欄を Canva サイトの最新に合わせる」（案内担当）
   文はノアさん本人の文（sources/chat-2026-11-06-2.md）。言い回しは変えない。
   元に戻すとき：index.html の <link …plans-2026-11-06.css> を消し、#plans の文を戻す。
   余白は polish-2026-11-05.css の --noah-space-*、見た目は cancel-2026-11-06.css と同じ。
   ===================================================================== */

/* 金額：「通常¥50,000（スタジオ限定価格¥46,500）」は長いので折り返せるようにする */
.plan-top{ flex-wrap: wrap; }
.plan-price-wide{ white-space: normal; text-align: right; max-width: 100%; margin-left: auto; }
.plan-price-wide small{ margin: 0 2px 0 0; }
.plan-price-note{ display: block; font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: #8f6c3f; }
.plan-items li{ overflow-wrap: anywhere; }

/* 縦書きのリード文：一行が長いので、文字の列の高さを少し広げる */
.vtf-plans{ height: 350px; }
.vtf-anniv{ height: 225px; }
@media (min-width:768px){ .vtf-plans{ height: 380px; } .vtf-anniv{ height: 240px; } }

/* プラン前の案内（カードの上） */
.pi-guide{ margin: 0 2px var(--noah-space-3); color: var(--ink); font-size: 13.5px; line-height: 1.9; }
.pi-guide p{ margin: 0; }

/* プランの詳細（開閉。JS なしでも開閉できる） */
.pi-box{
  margin-top: var(--noah-space-3); background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 3px 14px rgba(150,125,90,.08);
}
.pi-sum{
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: var(--noah-space-2); min-height: 56px; padding: 12px 20px; border-radius: 20px;
  font-family: "Hiragino Mincho ProN","Hiragino Mincho","Yu Mincho",serif;
  font-size: 16px; font-weight: 600; letter-spacing: .05em; line-height: 1.5; color: #5d5043;
}
.pi-sum::-webkit-details-marker{ display: none; }
.pi-sum::after{ content: "＋"; flex: none; font-family: inherit; font-size: 18px; line-height: 1; color: #a07f56; }
.pi-box[open] > .pi-sum::after{ content: "－"; }
.pi-sum:focus-visible{ outline: 2px solid #a07f56; outline-offset: 2px; }
.pi-body{ padding: 0 20px 24px; color: var(--ink); font-size: 13.5px; line-height: 1.9; }
.pi-body p{ margin: 0; }
.pi-body p + p{ margin-top: var(--noah-space-1); }
.pi-sec + .pi-sec{ margin-top: var(--noah-space-3); padding-top: var(--noah-space-2); border-top: 1px dashed var(--line); }
.pi-h{
  margin: 0 0 var(--noah-space-1); font-size: 13.5px; font-weight: 700; line-height: 1.6; color: #57452f;
}
.pi-list{ list-style: none; margin: 0; padding: 0; }
.pi-list li{ padding: 7px 0; border-bottom: 1px solid #f7f0e4; overflow-wrap: anywhere; }
.pi-list li:last-child{ border-bottom: none; }

@media (prefers-reduced-motion: no-preference){
  .pi-box[open] .pi-body{ animation: piIn .28s ease-out; }
}
@keyframes piIn{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  .pi-box, .pi-box *{ animation: none !important; transition: none !important; }
}