/* ==============================
   /about/（Hoppyとは）紙と手書き 2026-10
   共通部品（.pp-*）は paper.css。ここには /about/ だけのレイアウト（.ab-*）を置く。
   画像は images/about/。
============================== */
.hoppy-wp-v2.about-paper .ab-rika__body a { color: var(--pp-accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* 飾りの小枝の位置 */
.hoppy-wp-v2.about-paper .ab-sprig--omakase { top: 40px; right: 6%; transform: rotate(18deg); }
.hoppy-wp-v2.about-paper .ab-sprig--close { left: 2%; bottom: 40px; transform: rotate(-12deg); }
.hoppy-wp-v2.about-paper .ab-close { position: relative; }

/* 01. FV */
.hoppy-wp-v2.about-paper .ab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 0 3vw;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 4vw 72px;
}
.hoppy-wp-v2.about-paper .ab-hero__card {
  position: relative;
  z-index: 1;
  margin: -22px;
  padding: 30px 34px 30px;
  border-width: 30px;
  border-image-width: 30px;
  transform: rotate(-1.2deg);
  filter: drop-shadow(0 10px 16px rgb(90 72 54 / 14%));
}
.hoppy-wp-v2.about-paper .ab-hero__h1 {
  display: inline-block;
  margin-bottom: 20px;
  padding-bottom: 8px;
  font-family: var(--pp-mincho);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .05em;
  background: url("../../images/hero-paper/underline-thin.webp") left bottom / 100% 5px no-repeat;
}
.hoppy-wp-v2.about-paper .ab-profile__role span,
.hoppy-wp-v2.about-paper .ab-hero__h1 span,
.hoppy-wp-v2.about-paper .ab-hero__main span,
.hoppy-wp-v2.about-paper .ab-hero__lead span { display: inline-block; }
.hoppy-wp-v2.about-paper .ab-hero__main {
  margin-bottom: 20px;
  padding-bottom: 16px;
  font-family: var(--pp-mincho);
  font-size: clamp(30px, 2.5vw, 38px);
  font-weight: 700;
  line-height: 1.45;
  background: url("../../images/hero-paper/underline-brush.webp") left bottom / 100% 12px no-repeat;
}
.hoppy-wp-v2.about-paper .ab-hero__main em { font-style: normal; font-weight: 900; color: var(--pp-accent); white-space: nowrap; }
.hoppy-wp-v2.about-paper .ab-hero__lead { margin-bottom: 24px; font-family: var(--pp-mincho); font-size: 18px; font-weight: 500; line-height: 1.9; }
.hoppy-wp-v2.about-paper .ab-hero__card .pp-textlink { margin-left: calc((min(420px, 100%) - 6em) / 2); }
.hoppy-wp-v2.about-paper .ab-hero__photo { transform: rotate(1.6deg); }
.hoppy-wp-v2.about-paper .ab-hero__photo .pp-frame__img { object-position: 50% 40%; }
.hoppy-wp-v2.about-paper .ab-hero__note {
  position: absolute;
  right: 4%;
  bottom: -6px;
  font-size: 18px;
  color: var(--pp-ink);
  transform: rotate(-2deg);
}

/* 02. 岡田 */
.hoppy-wp-v2.about-paper .ab-trainer { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.45fr); gap: 40px; align-items: start; }
.hoppy-wp-v2.about-paper .ab-trainer__photo {
  padding: 12px 12px 40px;
  background: #fffdf8;
  box-shadow: 0 10px 22px rgb(90 72 54 / 16%);
  transform: rotate(-2deg);
}
.hoppy-wp-v2.about-paper .ab-trainer__body { display: grid; gap: 18px; }
.hoppy-wp-v2.about-paper .ab-profile { padding: 4px 8px; }
.hoppy-wp-v2.about-paper .ab-profile__role { font-size: 13px; font-weight: 700; color: var(--pp-accent); letter-spacing: .06em; }
.hoppy-wp-v2.about-paper .ab-profile__name { margin: 8px 0 12px; font-family: var(--pp-mincho); font-size: 32px; font-weight: 700; line-height: 1.3; }
.hoppy-wp-v2.about-paper .ab-profile__name rt { font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--ink-soft); }
.hoppy-wp-v2.about-paper .ab-profile__list { display: grid; gap: 6px; font-size: 15px; }
.hoppy-wp-v2.about-paper .ab-profile__list div { display: grid; grid-template-columns: 4.5em 1fr; gap: 12px; padding-bottom: 6px; border-bottom: 1px dashed rgb(59 51 44 / 22%); }
.hoppy-wp-v2.about-paper .ab-profile__list dt { font-weight: 700; color: var(--ink-soft); }
.hoppy-wp-v2.about-paper .ab-profile__list a { text-decoration: underline; text-underline-offset: 3px; }
.hoppy-wp-v2.about-paper .ab-profile__list--more { margin-top: 24px; }
.hoppy-wp-v2.about-paper .ab-profile__list--more div { grid-template-columns: 8em 1fr; }
.hoppy-wp-v2.about-paper .ab-trainer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hoppy-wp-v2.about-paper .ab-rika {
  justify-self: start;
  padding: 16px 22px;
  border: 22px solid transparent;
  border-image: url("../../images/hero-paper/paper-blue.webp") 64 fill / 22px / 0 stretch;
  margin: -12px -6px;
  transform: rotate(1deg);
  font-size: 14px;
}
.hoppy-wp-v2.about-paper .ab-rika__label { font-family: var(--pp-hand); font-weight: 600; font-size: 15px; }
.hoppy-wp-v2.about-paper .ab-rika__name { font-family: var(--pp-mincho); font-size: 22px; font-weight: 700; }
.hoppy-wp-v2.about-paper .ab-rika__name span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; line-height: 1.5; }

/* 歩み・年表（折りたたみの中身） */
.hoppy-wp-v2.about-paper .ab-more__lead,
.hoppy-wp-v2.about-paper .ab-more__pull { font-family: var(--pp-mincho); font-size: 17px; font-weight: 700; }
.hoppy-wp-v2.about-paper .ab-timeline { display: grid; gap: 12px; }
.hoppy-wp-v2.about-paper .ab-timeline div { display: grid; grid-template-columns: 5em 1fr; gap: 14px; }
.hoppy-wp-v2.about-paper .ab-timeline dt { font-family: var(--pp-mincho); font-weight: 700; color: var(--pp-accent); }

/* 03. おまかせの仕組み */
.hoppy-wp-v2.about-paper .ab-omakase { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 44px; }
.hoppy-wp-v2.about-paper .ab-omakase__photo,
.hoppy-wp-v2.about-paper .ab-big3__photo {
  padding: 10px;
  background: #fffdf8;
  box-shadow: 0 10px 22px rgb(90 72 54 / 14%);
  transform: rotate(-1deg);
}

/* 04. 所作 */
.hoppy-wp-v2.about-paper .ab-shosa { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: 36px; align-items: center; }
.hoppy-wp-v2.about-paper .ab-shosa__text p { font-size: 16px; line-height: 2; }
.hoppy-wp-v2.about-paper .ab-shosa__text p + p { margin-top: 14px; }
.hoppy-wp-v2.about-paper .ab-shosa__start {
  padding: 12px 16px;
  border-left: 3px solid var(--pp-accent);
  background: rgb(255 253 248 / 70%);
  font-family: var(--pp-mincho);
}
.hoppy-wp-v2.about-paper .ab-shosa__start b { color: var(--pp-accent-text); }
.hoppy-wp-v2.about-paper .ab-shosa__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hoppy-wp-v2.about-paper .ab-shosa__list img { mix-blend-mode: multiply; }
.hoppy-wp-v2.about-paper .ab-shosa__list span { display: block; margin-top: 4px; font-family: var(--pp-hand); font-weight: 600; font-size: 15px; line-height: 1.5; text-align: center; }
.hoppy-wp-v2.about-paper .ab-big3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: center; margin-top: 48px; }
.hoppy-wp-v2.about-paper .ab-big3__text p { font-size: 15px; line-height: 1.95; }
.hoppy-wp-v2.about-paper .ab-big3__text p + p { margin-top: 10px; }

/* 05. 会員の様子・声 */
.hoppy-wp-v2.about-paper .ab-members { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.hoppy-wp-v2.about-paper .ab-members__graph img { padding: 12px; background: #fffdf8; box-shadow: 0 8px 18px rgb(90 72 54 / 12%); }
.hoppy-wp-v2.about-paper .ab-members__caption { margin-top: 14px; font-size: 14px; line-height: 1.9; }
.hoppy-wp-v2.about-paper .ab-members__voices { display: grid; gap: 22px; }

/* 10. 最後のCTA（カードは .pp-cta__card） */
.hoppy-wp-v2.about-paper .ab-close {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 3vw;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 5% 96px;
}
.hoppy-wp-v2.about-paper .ab-close__card { transform: rotate(-.8deg); }
.hoppy-wp-v2.about-paper .ab-close__photo { transform: rotate(2deg); }
.hoppy-wp-v2.about-paper .ab-close__links { display: flex; justify-content: center; gap: 22px; margin-top: 16px; font-size: 14px; }
.hoppy-wp-v2.about-paper .ab-close__links a { text-decoration: underline; text-underline-offset: 3px; }

/* 07. 合う人 */
.hoppy-wp-v2.about-paper .ab-fit { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hoppy-wp-v2.about-paper .ab-fit__side p { margin-bottom: 16px; font-size: 15px; line-height: 1.9; }
.hoppy-wp-v2.about-paper .ab-fit__side .pp-textlink { margin-left: 4px; }

/* 08. 流れ */
.hoppy-wp-v2.about-paper .ab-flow { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); gap: 36px; }
.hoppy-wp-v2.about-paper .ab-flow__head { margin-bottom: 14px; font-family: var(--pp-mincho); font-size: 20px; font-weight: 700; }
.hoppy-wp-v2.about-paper .ab-flow__head span { margin-left: 10px; padding: 2px 10px; border: 1px solid var(--pp-accent); border-radius: 999px; font-family: var(--font-ja); font-size: 12px; color: var(--pp-accent-text); vertical-align: middle; }
.hoppy-wp-v2.about-paper .ab-flow .pp-small { margin-top: 14px; }

/* スマホ */
@media (max-width: 860px) {
  .hoppy-wp-v2.about-paper .ab-sprig--omakase { top: 18px; right: 2%; }
  .hoppy-wp-v2.about-paper .ab-sprig--close { bottom: 16px; }
  .hoppy-wp-v2.about-paper .ab-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 20px 40px; }
  .hoppy-wp-v2.about-paper .ab-hero__card { order: 2; margin: 0 -8px; padding: 18px 16px; border-width: 22px; border-image-width: 22px; }
  .hoppy-wp-v2.about-paper .ab-hero__photo { order: 1; margin: 0 -4px 6px; }
  .hoppy-wp-v2.about-paper .ab-hero__h1 { font-size: 12.5px; }
  .hoppy-wp-v2.about-paper .ab-hero__main { font-size: 29px; }
  .hoppy-wp-v2.about-paper .ab-hero__lead { font-size: 16px; }
  .hoppy-wp-v2.about-paper .ab-hero__photo { margin-bottom: 40px; }
  .hoppy-wp-v2.about-paper .ab-hero__note { right: 2%; bottom: -34px; font-size: 15px; }
  .hoppy-wp-v2.about-paper .ab-trainer,
  .hoppy-wp-v2.about-paper .ab-trainer__cols,
  .hoppy-wp-v2.about-paper .ab-omakase,
  .hoppy-wp-v2.about-paper .ab-shosa,
  .hoppy-wp-v2.about-paper .ab-big3,
  .hoppy-wp-v2.about-paper .ab-members,
  .hoppy-wp-v2.about-paper .ab-fit,
  .hoppy-wp-v2.about-paper .ab-flow,
  .hoppy-wp-v2.about-paper .ab-close { grid-template-columns: minmax(0, 1fr); }
  .hoppy-wp-v2.about-paper .ab-trainer { gap: 26px; }
  .hoppy-wp-v2.about-paper .ab-trainer__photo { max-width: 260px; margin: 0 auto; }
  .hoppy-wp-v2.about-paper .ab-shosa__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hoppy-wp-v2.about-paper .ab-close { padding: 50px 20px 64px; }
}