/* ==============================
   紙と手書き：共通部品（.hoppy-wp-v2.is-paper の中で使う）2026-10
   /about/ で作った見た目を他の固定ページでも使えるように切り出したもの。
   - 読み込みは functions.php の $hoppy_paper_pages。明朝(Zen Old Mincho)と手書き風(Klee One)も同時に読む。
   - 読み込み順は hoppy-v2.css → このファイル → ページ別CSS(about.css / price.css)。
     ページ別CSSは同じ強さのセレクタで部品を上書きできる。
   - 素材はトップFV（.hero-paper）と共通の images/hero-paper/。線画アイコンは白地なので multiply で紙になじませる。
   - 部品の一覧と使い方は docs/paper-components.md。
============================== */
.hoppy-wp-v2.is-paper {
  --pp-ink: var(--ink);
  --pp-accent: #d2562a;
  --pp-accent-text: #a83a0b;
  --pp-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --pp-hand: "Klee One", "Hiragino Maru Gothic ProN", sans-serif;
  background: var(--paper) url("../../images/hero-paper/paper-base.webp") center top / 1600px auto repeat;
  color: var(--pp-ink);
}
.hoppy-wp-v2.is-paper .pp-sp { display: none; }
.hoppy-wp-v2.is-paper .pp-hand { font-family: var(--pp-hand); font-weight: 600; }
/* 日本語の折り返し位置の指定。span.pp-nobr の中では改行しない（見出し・ラベル・段落末の「〜です。」に使う） */
.hoppy-wp-v2.is-paper .pp-nobr { display: inline-block; white-space: nowrap; }
.hoppy-wp-v2.is-paper .pp-small { font-size: 13px; color: var(--ink-soft); }
.hoppy-wp-v2.is-paper .pp-small a,
.hoppy-wp-v2.is-paper .pp-qa__item a { color: var(--pp-accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* 枠組み */
.hoppy-wp-v2.is-paper .pp-sec { position: relative; padding: 88px 5%; }
.hoppy-wp-v2.is-paper .pp-sec--paper { background: rgb(239 230 214 / 72%); }
.hoppy-wp-v2.is-paper .pp-inner { max-width: 1080px; margin: 0 auto; }
.hoppy-wp-v2.is-paper .pp-title {
  display: inline-block;
  margin-bottom: 30px;
  padding-bottom: 14px;
  font-family: var(--pp-mincho);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .03em;
  background: url("../../images/hero-paper/underline-brush.webp") left bottom / 100% 10px no-repeat;
}
.hoppy-wp-v2.is-paper .pp-lead { max-width: 760px; margin-bottom: 34px; font-size: 16px; line-height: 2; }
.hoppy-wp-v2.is-paper .pp-note__label {
  margin-bottom: 10px;
  font-family: var(--pp-mincho);
  font-size: 15px;
  font-weight: 700;
  color: var(--pp-accent);
  letter-spacing: .06em;
}

/* ボタン・テキストリンク（トップFVと同じ見た目） */
.hoppy-wp-v2.is-paper .pp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
  max-width: 420px;
  padding: 17px 26px;
  border-radius: 6px;
  background: linear-gradient(#e0662f, #c94e22);
  box-shadow: 0 6px 14px rgb(160 70 30 / 26%);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .06em;
}
.hoppy-wp-v2.is-paper .pp-btn:hover { color: #fff; opacity: .92; }
.hoppy-wp-v2.is-paper .pp-btn span { font-size: 1.2em; line-height: 1; }
.hoppy-wp-v2.is-paper .pp-btn--ghost {
  background: rgb(255 255 255 / 70%);
  border: 1.5px solid var(--pp-accent);
  box-shadow: none;
  color: var(--pp-accent-text);
  font-size: 17px;
}
.hoppy-wp-v2.is-paper .pp-btn--ghost:hover { color: var(--pp-accent-text); background: #fff; }
.hoppy-wp-v2.is-paper .pp-textlink {
  display: inline-flex;
  gap: .6em;
  margin-top: 16px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-size: 15px;
}

/* 写真枠（images/hero-paper/photo-frame.webp の窓に写真をはめる。.hero-paper__photo と同じ数値） */
.hoppy-wp-v2.is-paper .pp-frame {
  position: relative;
  aspect-ratio: 1328 / 928;
  filter: drop-shadow(0 12px 18px rgb(90 72 54 / 16%));
}
.hoppy-wp-v2.is-paper .pp-frame__img {
  position: absolute;
  left: 6.02%;
  top: 8.08%;
  width: 87.8%;
  height: 78.99%;
  max-width: none;
  object-fit: cover;
}
.hoppy-wp-v2.is-paper .pp-frame__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    6.0241% 8.0819%, 93.8253% 8.0819%, 93.8253% 87.0690%, 6.0241% 87.0690%, 6.0241% 8.0819%);
}

/* 生成りの紙片（カード）。単独で使うときは .pp-card を付ける */
.hoppy-wp-v2.is-paper .pp-card,
.hoppy-wp-v2.is-paper .pp-cta__card,
.hoppy-wp-v2.is-paper .pp-note,
.hoppy-wp-v2.is-paper .pp-icons li,
.hoppy-wp-v2.is-paper .pp-steps li,
.hoppy-wp-v2.is-paper .pp-qa__item {
  border: 22px solid transparent;
  border-image: url("../../images/hero-paper/paper-ivory.webp") 60 fill / 22px / 0 stretch;
  filter: drop-shadow(0 6px 10px rgb(90 72 54 / 10%));
}
.hoppy-wp-v2.is-paper .pp-note { padding: 4px 6px; font-size: 15px; }

/* 飾りの小枝（位置はページ側で決める） */
.hoppy-wp-v2.is-paper .pp-sprig { position: absolute; z-index: 0; width: 120px; mix-blend-mode: multiply; pointer-events: none; }

/* チェックリスト・点の箇条書き */
.hoppy-wp-v2.is-paper .pp-checks li,
.hoppy-wp-v2.is-paper .pp-dots li { position: relative; padding-left: 1.8em; line-height: 1.7; }
.hoppy-wp-v2.is-paper .pp-checks li + li,
.hoppy-wp-v2.is-paper .pp-dots li + li { margin-top: 8px; }
.hoppy-wp-v2.is-paper .pp-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .25em;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: var(--pp-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.hoppy-wp-v2.is-paper .pp-dots li::before { content: "●"; position: absolute; left: .2em; color: var(--pp-accent); font-size: .7em; top: .45em; }
.hoppy-wp-v2.is-paper .pp-checks--lg { font-family: var(--pp-mincho); font-size: 19px; font-weight: 500; }
.hoppy-wp-v2.is-paper .pp-checks--lg li + li { margin-top: 14px; }

/* 折りたたみ（details.pp-more） */
.hoppy-wp-v2.is-paper .pp-more { margin-top: 18px; border-top: 1px solid rgb(59 51 44 / 18%); }
.hoppy-wp-v2.is-paper .pp-more:first-of-type { margin-top: 44px; }
.hoppy-wp-v2.is-paper .pp-more summary {
  display: flex;
  justify-content: space-between;
  padding: 16px 4px;
  cursor: pointer;
  font-family: var(--pp-mincho);
  font-size: 17px;
  font-weight: 700;
  list-style: none;
}
.hoppy-wp-v2.is-paper .pp-more summary::-webkit-details-marker,
.hoppy-wp-v2.is-paper .pp-qa__item summary::-webkit-details-marker { display: none; }
.hoppy-wp-v2.is-paper .pp-more summary::after,
.hoppy-wp-v2.is-paper .pp-qa__item summary::after { content: "＋"; color: var(--pp-accent); font-weight: 700; }
.hoppy-wp-v2.is-paper .pp-more[open] summary::after,
.hoppy-wp-v2.is-paper .pp-qa__item[open] summary::after { content: "－"; }
.hoppy-wp-v2.is-paper .pp-more__body { max-width: 760px; padding: 4px 4px 28px; font-size: 15px; line-height: 2; }
.hoppy-wp-v2.is-paper .pp-more__body p + p { margin-top: 12px; }

/* アイコン付きの紙片を3列に並べる（ul.pp-icons > li > img + b + span） */
.hoppy-wp-v2.is-paper .pp-icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hoppy-wp-v2.is-paper .pp-icons li { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto 1fr; gap: 2px 14px; padding: 6px 8px; }
.hoppy-wp-v2.is-paper .pp-icons img { grid-row: 1 / 3; width: 72px; height: 72px; mix-blend-mode: multiply; }
.hoppy-wp-v2.is-paper .pp-icons b { font-family: var(--pp-mincho); font-size: 17px; line-height: 1.45; }
.hoppy-wp-v2.is-paper .pp-icons span { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }

/* クチコミの付箋（figure.pp-quote > blockquote + figcaption） */
.hoppy-wp-v2.is-paper .pp-quote {
  padding: 14px 18px 10px;
  border: 22px solid transparent;
  border-image: url("../../images/hero-paper/paper-blue.webp") 64 fill / 22px / 0 stretch;
  margin: -8px;
  filter: drop-shadow(0 6px 10px rgb(90 72 54 / 10%));
}
.hoppy-wp-v2.is-paper .pp-quote--tilt { transform: rotate(-1.4deg); }
.hoppy-wp-v2.is-paper .pp-quote blockquote { margin: 0; padding: 0; border: 0; font-size: 18px; line-height: 1.75; }
.hoppy-wp-v2.is-paper .pp-quote figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-soft); text-align: right; }
.hoppy-wp-v2.is-paper .pp-rating { font-size: 15px; text-align: right; }
.hoppy-wp-v2.is-paper .pp-rating b { font-size: 1.3em; color: #c9922a; }

/* CTAの紙片（.pp-cta > .pp-cta__card > .pp-cta__title + .pp-cta__body + .pp-btn） */
.hoppy-wp-v2.is-paper .pp-cta { padding: 64px 5%; }
.hoppy-wp-v2.is-paper .pp-cta__card { max-width: 760px; margin: 0 auto; padding: 22px 28px; text-align: center; }
.hoppy-wp-v2.is-paper .pp-cta__card .pp-btn { margin: 0 auto; }
.hoppy-wp-v2.is-paper .pp-cta__title { font-family: var(--pp-mincho); font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; line-height: 1.5; }
.hoppy-wp-v2.is-paper .pp-cta__body { margin: 10px 0 20px; font-size: 15px; line-height: 1.9; }

/* 手順（ol.pp-steps > li > img + b + span。番号は自動） */
.hoppy-wp-v2.is-paper .pp-steps { display: grid; gap: 12px; list-style: none; counter-reset: pp-step; }
.hoppy-wp-v2.is-paper .pp-steps li { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto 1fr; gap: 0 14px; padding: 2px 8px; counter-increment: pp-step; }
.hoppy-wp-v2.is-paper .pp-steps img { grid-row: 1 / 3; width: 56px; height: 56px; mix-blend-mode: multiply; }
.hoppy-wp-v2.is-paper .pp-steps b { font-size: 15.5px; }
.hoppy-wp-v2.is-paper .pp-steps b::before { content: counter(pp-step) ". "; color: var(--pp-accent); font-family: var(--pp-mincho); }
.hoppy-wp-v2.is-paper .pp-steps span { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }

/* Q&A（.pp-qa > .pp-qa__list > details.pp-qa__item） */
.hoppy-wp-v2.is-paper .pp-qa { max-width: 860px; }
.hoppy-wp-v2.is-paper .pp-qa__list { display: grid; gap: 8px; }
.hoppy-wp-v2.is-paper .pp-qa__item { padding: 0 6px; }
.hoppy-wp-v2.is-paper .pp-qa__item summary {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 6px 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 15.5px;
  list-style: none;
}
.hoppy-wp-v2.is-paper .pp-qa__item p { padding: 4px 0 10px; font-size: 14.5px; line-height: 1.9; }
.hoppy-wp-v2.is-paper .pp-qa__item a { margin-left: .5em; }

/* スマホ */
@media (max-width: 860px) {
  .hoppy-wp-v2.is-paper .pp-sp { display: inline; }
  .hoppy-wp-v2.is-paper .pp-sprig { width: 72px; }
  .hoppy-wp-v2.is-paper .pp-sec { padding: 60px 20px; }
  .hoppy-wp-v2.is-paper .pp-title { margin-bottom: 22px; font-size: 25px; }
  .hoppy-wp-v2.is-paper .pp-lead { font-size: 15px; }
  .hoppy-wp-v2.is-paper .pp-btn { max-width: none; font-size: 17px; padding: 15px 18px; }
  .hoppy-wp-v2.is-paper .pp-icons { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hoppy-wp-v2.is-paper .pp-icons li { grid-template-columns: 56px 1fr; }
  .hoppy-wp-v2.is-paper .pp-icons img { width: 56px; height: 56px; }
  .hoppy-wp-v2.is-paper .pp-cta { padding: 44px 20px; }
  .hoppy-wp-v2.is-paper .pp-cta__card { padding: 14px 10px; }
  .hoppy-wp-v2.is-paper .pp-quote blockquote { font-size: 16.5px; }
  .hoppy-wp-v2.is-paper .pp-checks--lg { font-size: 17px; }
}