@charset "UTF-8";
/* トップ（/）だけで使う見た目（2026-10-17 _home.scss から分けた。読むのはトップだけ＝pages/home.css） */
/* ① 最初の画面と ② 頼み方は _home-mv.scss（2026-10-18 作り直し） */
/* ═══ ③ 悩み → 進め方 ═══ */
/* ═══ ④ 進め方は2つ ═══ */
.p-ways {
  padding-block: var(--sec-y);
}

.p-ways__grid {
  width: min(100% - var(--gutter) * 2, var(--w-wide));
  margin-inline: auto;
  display: grid;
  gap: var(--sp-7);
}

.p-ways__item {
  display: grid;
}

.p-ways__photo {
  position: relative;
  aspect-ratio: 4/3.3;
}

.p-ways__photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-arch);
}

.p-ways__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-arch);
  background: var(--paper-2);
  translate: var(--paper-shift) var(--paper-shift);
}

.p-ways__panel {
  position: relative;
  z-index: 2;
  margin: -4.5rem clamp(0.75rem, 3vw, 2rem) 0;
  background: var(--white);
  border-radius: var(--r-m);
  padding: clamp(1.4rem, 3.5vw, 2.25rem);
  box-shadow: var(--sh-float);
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.p-ways__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.p-ways__tit {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  letter-spacing: 0.06em;
}

.p-ways__facts {
  display: grid;
  gap: 0.3rem;
  border-block: 1px solid var(--rule);
  padding-block: 0.7rem;
  font-size: var(--fs-sm);
}

.p-ways__facts div {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr);
  gap: 0.8em;
}

.p-ways__facts dt {
  color: var(--ink-sub);
  font-weight: 700;
}

.p-ways__facts b {
  font-family: var(--font-head);
  font-size: 1.45em;
  font-variant-numeric: tabular-nums;
  margin-right: 0.1em;
}

.p-ways__facts small {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink);
} /* 4周目: 掲載なしの値段は本文の濃さ */
.p-ways__for {
  font-size: var(--fs-sm);
  color: var(--ink-sub);
}

.p-ways__item--deep .p-ways__panel {
  background: var(--accent);
  color: var(--white);
}

.p-ways__item--deep :is(.p-ways__label, .p-ways__facts dt, .p-ways__for) {
  color: var(--accent-soft);
}

.p-ways__item--deep .p-ways__facts small {
  color: var(--paper);
}

.p-ways__item--deep .p-ways__tit {
  color: var(--white);
}

.p-ways__item--deep .p-ways__facts {
  border-color: rgba(246, 240, 228, 0.25);
}

.p-ways__item--deep .c-more {
  color: var(--white);
}

.p-ways__foot {
  margin-top: var(--sp-6);
  text-align: center;
  font-weight: 700;
}

@media (min-width: 900px) {
  .p-ways__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
    align-items: start;
  }
  .p-ways__item--deep {
    margin-top: var(--sp-8);
  }
}
.p-home .p-ways__item {
  background: var(--white);
  border-radius: 6px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  box-shadow: var(--sh-float);
  position: relative;
}

.p-home .p-ways__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper-2);
  border-radius: 6px;
  rotate: -1.6deg;
  z-index: -1;
}

.p-home .p-ways__item--deep::before {
  rotate: 1.8deg;
}

.p-home .p-ways__photo {
  aspect-ratio: 3/2;
}

.p-home .p-ways__photo::before {
  display: none;
}

.p-home .p-ways__panel {
  margin: 0;
  box-shadow: none;
  padding-inline: 0.25rem;
  background: transparent;
}

.p-home .p-ways__item--deep {
  background: var(--accent);
}

.p-home .p-ways__item--deep .p-ways__panel {
  background: transparent;
}

.p-home .p-ways__grid {
  isolation: isolate;
}

/* ═══ ⑤ 今のサイトを直したい方へ＋無料診断 ═══ */
/* ═══ ⑦ 動きの見本 ═══ */
.p-motion__grid {
  display: grid;
  gap: var(--sp-5);
}

.p-stage {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.p-stage__box {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--r-m);
  background-color: var(--paper);
  background-image: var(--texture);
  display: grid;
  place-items: center;
  padding: clamp(0.9rem, 3vw, 1.5rem);
}

.p-stage figcaption {
  display: grid;
  gap: 0.1rem;
  font-size: var(--fs-sm);
}

.p-stage figcaption b {
  font-family: var(--font-head);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
}

.p-stage figcaption small {
  color: var(--ink-sub);
  font-size: var(--fs-xs);
}

@media (min-width: 768px) {
  .p-motion__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-5);
  }
}
.p-menu {
  width: min(100%, 22rem);
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0.4rem;
}

.p-menu input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.p-menu label {
  cursor: pointer;
  padding: 0.35em 1em;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  transition: background-color var(--dur-2), color var(--dur-2);
}

.p-menu input:checked + label {
  background: var(--accent);
  color: var(--white);
}

.p-menu input:focus-visible + label {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.p-menu__panels {
  grid-column: 1/-1;
  display: grid;
  margin-top: 0.6rem;
  background: var(--white);
  border-radius: 14px;
  padding: 0.4rem 1rem;
}

.p-menu__panel {
  grid-area: 1/1;
  opacity: 0;
  translate: 0 10px;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out), visibility var(--dur-2);
}

.p-menu__panel li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.p-menu__panel li + li {
  border-top: 1px dashed var(--rule);
}

.p-menu__panel span {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.p-menu:has(#menu-1:checked) .p-menu__panel:nth-child(1),
.p-menu:has(#menu-2:checked) .p-menu__panel:nth-child(2),
.p-menu:has(#menu-3:checked) .p-menu__panel:nth-child(3) {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
}

.p-stage--compare .p-stage__box {
  padding: 0;
}

.p-route {
  width: 100%;
  height: auto;
}

.p-route__streets path {
  stroke: var(--white);
  stroke-width: 14;
}

.p-route__station {
  fill: var(--accent-tint);
  stroke: var(--accent);
  stroke-width: 1.5;
}

.p-route__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

[data-motion=on] .p-stage--route:not([data-revealed]) .p-route__line {
  stroke-dashoffset: 1;
}

[data-motion=on] .p-stage--route .p-route__line {
  transition: stroke-dashoffset 2.6s var(--ease-io) 0.3s;
}

.p-route__shop {
  fill: var(--accent);
}

[data-motion=on] .p-stage--route[data-revealed] .p-route__shop {
  animation: shop-ping 1.6s var(--ease-out) 2.8s 2 both;
  transform-box: fill-box;
  transform-origin: center;
}

.p-route__txt {
  font-size: 13px;
  font-weight: 700;
  fill: var(--ink);
  font-family: var(--font-sans);
}

.p-steps {
  width: min(100%, 24rem);
  display: grid;
  gap: 0.8rem;
  position: relative;
}

.p-steps__stop {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.p-steps__btn {
  justify-self: end;
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.3em 0.9em;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
}

.p-steps__stop:focus-visible + .p-steps__btn {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.p-steps__play {
  display: none;
}

.p-steps__stop:checked + .p-steps__btn .p-steps__pause {
  display: none;
}

.p-steps__stop:checked + .p-steps__btn .p-steps__play {
  display: inline;
}

.p-steps__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
  counter-reset: s;
}

.p-steps__list li {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-sub);
  position: relative;
}

.p-steps__list b {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--accent);
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  box-shadow: inset 0 0 0 1.5px var(--accent-soft);
}

.p-steps__view {
  display: grid;
  background: var(--white);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  min-height: 5.2rem;
  align-items: center;
}

.p-steps__view p {
  grid-area: 1/1;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.7;
}

@media (prefers-reduced-motion: no-preference) {
  .p-steps__view p {
    opacity: 0;
    animation: step-text 16s infinite both paused;
  }
  .p-steps__list b {
    animation: step-dot 16s infinite both paused;
  }
  /* 負の遅れで「途中から」始める（正の遅れだと、待っている間に最初の状態＝点灯で止まって見える） */
  .p-steps__view p:nth-child(2), .p-steps__list li:nth-child(2) b {
    animation-delay: -12s;
  }
  .p-steps__view p:nth-child(3), .p-steps__list li:nth-child(3) b {
    animation-delay: -8s;
  }
  .p-steps__view p:nth-child(4), .p-steps__list li:nth-child(4) b {
    animation-delay: -4s;
  }
  .p-stage--steps[data-revealed] .p-steps__view p,
  .p-stage--steps[data-revealed] .p-steps__list b,
  html:not([data-motion]) .p-steps__view p,
  html:not([data-motion]) .p-steps__list b {
    animation-play-state: running;
  }
  .p-steps:has(.p-steps__stop:checked) :is(.p-steps__view p, .p-steps__list b) {
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-stage--steps .p-stage__box {
    aspect-ratio: auto;
  } /* 4周目: 手順を全部並べると固定の高さで切れていた */
  .p-steps__btn {
    display: none;
  }
  .p-steps__view {
    gap: 0.4rem;
  }
  .p-steps__view p {
    grid-area: auto;
  }
}
.p-motion__foot {
  margin-top: var(--sp-6);
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  letter-spacing: 0.04em;
  color: var(--accent-dark);
  text-align: center;
}

.p-motion__reduce {
  display: none;
  margin-top: var(--sp-2);
}

@media (prefers-reduced-motion: reduce) {
  .p-motion__reduce {
    display: block;
  }
}
/* ═══ ⑧ 担当がやること、ぜんぶ（4枚同じカードにしない。番号＋罫線の読み物） ═══ */
.p-scope__list {
  display: grid;
  gap: 0 var(--sp-5);
  counter-reset: sc;
}

.p-scope__list li {
  counter-increment: sc;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 0.9rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--rule);
  align-content: start;
}

.p-scope__list li::before {
  content: counter(sc, decimal-leading-zero);
  content: counter(sc, decimal-leading-zero)/"";
  grid-row: 1/span 3;
  font-family: var(--font-en);
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
}

.p-scope__list b {
  font-family: var(--font-head);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
}

.p-scope__list p {
  margin: 0.25rem 0 0.5rem;
  font-size: var(--fs-sm);
}

.p-scope__list span {
  justify-self: start;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 0.15em 0.8em;
  border-radius: var(--r-pill);
}

@media (min-width: 768px) {
  .p-scope__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .p-scope__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .p-scope__list li {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    padding-top: 1.4rem;
  }
  .p-scope__list li::before {
    grid-row: auto;
    margin-bottom: 0.6rem;
    font-size: 2.6rem;
  }
}
/* ═══ ⑨ 結局いくら（レシート） ═══ */
.p-price__in {
  display: grid;
  gap: var(--sp-6);
}

.p-price__head p {
  margin-bottom: var(--sp-3);
  max-width: 30em;
}

.p-price__plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.p-price__plans li {
  display: grid;
}

.p-price__plan {
  position: relative;
  background: var(--paper-2);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-m);
  padding: 1rem 2rem 1rem 1.1rem;
  display: grid;
  gap: 0.1rem;
  align-content: start;
  transition: translate var(--dur-1) var(--ease-out), box-shadow var(--dur-1);
}

.p-price__plan::after {
  content: "→";
  content: "→"/"";
  position: absolute;
  right: 0.9rem;
  top: 1rem;
  font-weight: 700;
  color: var(--accent);
}

.p-price__plan:hover {
  box-shadow: 0 0 0 1.5px var(--accent), var(--sh-float);
} /* 🔴 2026-10-17 社長「ホバーで上にピョンと上がるのは嫌い。アニメーションでカバーしたい」→ 跳ねさせない */
.p-price__plan--deep::after {
  color: var(--white);
}

.p-price__plan b {
  font-family: var(--font-head);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
}

.p-price__yen {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.p-price__yen small {
  font-size: 0.55em;
  margin-left: 0.1em;
}

.p-price__sub {
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: 1.6;
} /* 3周目: 掲載なしの値段は本文の濃さで */
.p-price__plan--deep {
  background: var(--accent);
  color: var(--white);
}

.p-price__plan--deep b, .p-price__plan--deep .p-price__yen {
  color: var(--white);
}

.p-price__plan--deep .p-price__sub {
  color: var(--paper);
}

.p-price__cta {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}

.p-price__cta p {
  font-size: var(--fs-sm);
  color: var(--ink-sub);
}

@media (min-width: 900px) {
  .p-price__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    grid-template-rows: auto auto 1fr;
    gap: var(--sp-5) var(--sp-8);
    align-items: start;
  }
  .p-price__plans, .p-price__cta {
    grid-column: 1;
  }
}
/* ═══ ⑩ 作る2人（名刺のような2枚） ═══ */
.p-duo__in {
  display: grid;
  gap: var(--sp-6);
}

.p-duo__fig {
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
}

.p-duo__fig figcaption {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-sub);
  letter-spacing: 0.06em;
}

.p-duo__photo {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 30rem);
  border-radius: 50%;
}

.p-duo__photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 30%;
  border-radius: 50%;
}

.p-duo__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--paper);
  translate: var(--paper-shift) var(--paper-shift);
}

.p-duo__body {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.p-duo__cards {
  display: grid;
  gap: var(--sp-4);
}

.p-card {
  background: var(--white);
  border-radius: 6px;
  padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: 0 1px 0 rgba(43, 40, 36, 0.08), 10px 10px 0 var(--paper);
  display: grid;
  gap: 0.35rem;
  align-content: start; /* 2026-10-18 点検: 傾けた紙と浮いた影をやめ、紙をずらして敷く */
  transition: rotate var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
}

.p-card__role {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
}

.p-card__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

.p-card p:last-child {
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  .p-duo__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
@media (min-width: 900px) {
  .p-duo__in {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--sp-7);
    align-items: center;
  }
  /* 2026-10-18: 見出しを横書きにしたので、見出し → カードの縦の並びに */
  .p-home .p-duo__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
.p-home .p-duo__photo {
  border-radius: var(--r-arch);
  aspect-ratio: 4/4.8;
  width: min(100%, 26rem);
}

.p-home .p-duo__photo img, .p-home .p-duo__photo::before {
  border-radius: var(--r-arch);
}

/* ═══ ⑪ 流れ ═══ */
/* ═══ ⑫ 頼む前の不安 ═══ */
/* ═══ ⑬ 相談の入口（濃い藍・中央揃えはここだけ） ═══ */
/* ════════════════════════════════════════════════════════════
   2026-10-17 組み直し（営業/87 §9 ⑨'・社長「ホームランを」）で足した段
   ════════════════════════════════════════════════════════════ */
.p-hero__duo {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink);
}

.p-hero__faces {
  display: inline-flex;
  flex: none;
}

.p-hero__faces img {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
  border: 3px solid var(--paper);
  background: var(--paper-2);
}

.p-hero__faces img + img {
  margin-left: -0.9rem;
}

.p-hero__duo:hover span:last-child {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.p-duo__faces {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.p-duo__faces .p-duo__fig {
  gap: 0.6rem;
}

.p-duo__faces .p-duo__photo {
  width: clamp(9.5rem, 30vw, 15rem);
}

.p-duo__fig--maker {
  margin-left: -1.5rem;
  translate: 0 1.75rem;
}

.p-duo__photo--icon {
  background: var(--paper);
  border-radius: 50%;
}

.p-duo__photo--icon img {
  object-position: 50% 30%;
}

.p-duo__faces figcaption {
  display: grid;
  justify-items: center;
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: 0.08em;
}

.p-duo__faces figcaption small {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--ink-sub);
  letter-spacing: 0.04em;
}

.p-duo__near {
  font-size: var(--fs-sm);
  color: var(--ink-sub);
}

.p-exist__in {
  display: grid;
  gap: var(--sp-5);
}

.p-exist__in > div > p {
  max-width: 30em;
}

.p-exist__list {
  border-top: 1px solid var(--rule);
}

.p-exist__list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 1rem;
  padding: 1.1rem 0.25rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background-color var(--dur-2), padding var(--dur-2) var(--ease-out);
}

.p-exist__list a::after {
  content: "→";
  content: "→"/"";
  grid-row: 1/span 2;
  grid-column: 2;
  align-self: center;
  color: var(--accent);
}

.p-exist__list a:hover {
  background: var(--paper);
  padding-inline: 0.9rem;
}

.p-exist__list b {
  font-family: var(--font-head);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
}

.p-exist__list span {
  font-size: var(--fs-sm);
  color: var(--ink-sub);
}

@media (min-width: 900px) {
  .p-exist__in {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--sp-8);
    align-items: start;
  }
}
/* ═════════════════════════════════════════════════════════
   🔴 2026-10-17 社長「もうちょっと最近のモダンな感じに」（ダメ出しではなく、一歩今どきに）
   紙とペンの個性は残したまま、今どきの作りを足す:
   ① 段が「紙が1枚ずつ重なる」ように、角の丸い面が前の段に少し乗る（スクロールで紙をめくる感じ）
   ② 見出しを大きく・字間を詰める（大小の差をはっきり）
   ③ 担当することの8つを、大きさの違う箱の組み（ベントー）に
   ④ 最初の画面は、読み込んだら「担当」にペンで丸がつき、写真の後ろの紙がそっと傾く
   ═════════════════════════════════════════════════════════ */
/* ① 紙が重なる段 */
.p-home > :is(section, .p-consult) ~ :is(section, .p-consult):not(.p-start) {
  position: relative;
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  margin-top: calc(var(--sheet-r) * -1);
  box-shadow: 0 -1px 0 rgba(43, 40, 36, 0.05), 0 -18px 40px -30px rgba(43, 40, 36, 0.35);
} /* トップは .p-ways（l-sec でない段）も重ねるので、共通の規則（layout/_sec.scss）に加えてこちらも持つ */
.p-home > .p-ways {
  background-color: var(--paper);
  background-image: var(--texture);
}

/* ② 見出し（トップだけ。大きく・詰めて） */
.p-home .p-home__head:not(.p-home__head--v) .c-sechead__ja {
  font-size: clamp(1.75rem, 1rem + 3.2vw, 3.5rem);
  line-height: 1.32;
  letter-spacing: 0.02em;
}

.p-home .p-consult .c-sechead__ja {
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.9rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* ③ 担当することの8つ＝大きさの違う箱の組み */
.p-scope__list {
  gap: 0.8rem;
}

.p-scope__list li {
  border-top: 0;
  border-radius: var(--r-m);
  padding: 1.3rem 1.3rem 1.4rem;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 1px rgba(43, 40, 36, 0.06);
  transition: translate var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

/* 跳ねる代わりに、見出しの下に藍のペンの線が引かれる */
.p-scope__list b {
  background: linear-gradient(var(--accent-soft), var(--accent-soft)) 0 100%/0 2px no-repeat;
  transition: background-size 0.6s var(--ease-out);
  justify-self: start;
}

.p-scope__list li:hover b {
  background-size: 100% 2px;
}

.p-scope__list li:nth-child(n+7) {
  background: var(--accent-dark);
  color: var(--paper);
}

.p-scope__list li:nth-child(n+7)::before {
  color: var(--accent-soft);
}

.p-scope__list li:nth-child(n+7) span {
  background: rgba(246, 240, 228, 0.14);
  color: var(--paper);
}

@media (min-width: 1100px) {
  .p-scope__list li:nth-child(1), .p-scope__list li:nth-child(6) {
    grid-column: span 2;
  }
  .p-scope__list li:nth-child(7), .p-scope__list li:nth-child(8) {
    grid-column: span 2;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.2rem;
  }
  .p-scope__list li:nth-child(7)::before, .p-scope__list li:nth-child(8)::before {
    grid-row: 1/span 3;
    margin: 0;
  }
  .p-scope__list li:nth-child(1) b, .p-scope__list li:nth-child(6) b {
    font-size: 1.6rem;
  }
  .p-scope__list li:nth-child(1) p, .p-scope__list li:nth-child(6) p {
    font-size: var(--fs-base);
    max-width: 26em;
  }
}
/* 実在のサイト: 乗せると画面が少し寄る */
/* 🔴 2026-10-17 親切さの点検 */
.p-home__label {
  margin-bottom: 0.6rem;
}

/* 07・08 の「別料金」は押せる札（保守のページへ） */
.p-scope__list li a {
  justify-self: start;
  margin-top: 0.2rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  color: var(--paper);
  background: rgba(246, 240, 228, 0.14);
  padding: 0.35em 1em;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(246, 240, 228, 0.35);
  transition: background-color var(--dur-2);
}

.p-scope__list li a::after {
  content: " →";
  content: " →"/"";
}

.p-scope__list li a:hover {
  background: rgba(246, 240, 228, 0.26);
}

/* ④ 2枚の中の「公開までの流れ」（2026-10-17 別の段からここへ移した） */
.p-ways__steps {
  list-style: none;
  padding: 0;
  margin: 0.2rem 0 0.6rem;
  display: grid;
  gap: 0.45rem;
  counter-reset: ws;
}

.p-ways__steps li {
  counter-increment: ws;
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.p-ways__steps li::before {
  content: counter(ws);
  content: counter(ws)/"";
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 400;
  background: var(--accent);
  color: var(--white);
}

.p-ways__item--deep .p-ways__steps li::before {
  background: var(--paper);
  color: var(--accent-dark);
}

.p-ways__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin: 0;
}

.p-kaigyo__more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: var(--sp-4);
}

/* ═══ 2026-10-17 最終確認 ═══ */
/* 段の左端をそろえる（最初の画面・頼み方は広い幅、ほかは狭い幅で、上から読むと左の線がガタガタしていた） */
.p-home .l-wrap {
  width: min(100% - var(--gutter) * 2, var(--w-wide));
}

/* ═══ ⑤ どれも、本物のサイトです（2026-10-17 最終確認で作り直し: 帯と同じ画面の繰り返しをやめ、別の角度で） ═══ */
.p-real__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

.p-real__big {
  display: grid;
  gap: var(--sp-4);
  color: inherit;
  text-decoration: none;
}

.p-real__win {
  display: block;
  background: var(--white);
  border-radius: 12px;
  padding: 0 0.45rem 0.45rem;
  box-shadow: 0 0 0 1px var(--rule), var(--sh-float);
}

.p-real__bar {
  display: flex;
  gap: 0.3rem;
  padding: 0.55rem 0.2rem;
}

.p-real__bar i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--paper-2);
}

.p-real__scroll {
  position: relative;
  display: block;
  aspect-ratio: 16/10.5;
  overflow: hidden;
  border-radius: 6px;
  background: var(--paper);
}

.p-real__scroll img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: object-position 1.2s var(--ease-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .p-real__big:hover .p-real__scroll img {
    object-position: 50% 100%;
    transition: object-position 6s cubic-bezier(0.45, 0, 0.55, 1) 0.2s;
  } /* 乗せると、ページの下までゆっくり流れる（跳ねない） */
}
.p-real__say {
  display: grid;
  gap: 0.2rem;
  align-content: start;
}

.p-real__say b {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
  letter-spacing: 0.05em;
}

.p-real__say > span {
  font-size: var(--fs-sm);
  color: var(--ink-sub);
}

.p-real__say q {
  margin-top: var(--sp-2);
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.8;
  letter-spacing: 0.03em;
  quotes: "「" "」";
}

.p-real__say small {
  font-size: var(--fs-sm);
  color: var(--ink-sub);
}

.p-real__phones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.p-real__phones a {
  display: grid;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
}

.p-real__phone {
  display: block;
  aspect-ratio: 9/19;
  border-radius: 1.4rem;
  overflow: hidden;
  background: var(--white);
  border: clamp(0.3rem, 0.8vw, 0.45rem) solid var(--ink);
  box-shadow: var(--sh-float);
}

.p-real__phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: scale 0.9s var(--ease-out);
}

.p-real__phones a:hover .p-real__phone img {
  scale: 1.05;
}

.p-real__phones li:nth-child(2) {
  margin-top: var(--sp-5);
} /* 真ん中を少し下げて、机に置いた3台に */
.p-real__name {
  display: grid;
  gap: 0.05rem;
}

.p-real__name b {
  font-family: var(--font-head);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  letter-spacing: 0.04em;
}

.p-real__name span {
  font-size: var(--fs-sm);
  color: var(--ink-sub);
}

.p-real__foot {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1.5rem;
  font-size: var(--fs-sm);
  color: var(--ink-sub);
}

@media (min-width: 900px) {
  .p-real__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: var(--sp-7);
  }
  .p-real__big {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ═══ 2026-10-17 最終確認2周目 ═══ */
/* 「結局、いくらかかるのか」の4枚: 狭いスマホは1列（「スタンダー／ド」「38,000／円」と割れていた）。金額とプラン名は折らない */
@media (max-width: 479.98px) {
  .p-price__plans {
    grid-template-columns: minmax(0, 1fr);
  }
}
.p-price__plan b, .p-price__yen {
  white-space: nowrap;
}

/* 07・08 の札: 「月／9,900円」と割れていた */
.p-scope__list li a {
  max-width: 100%;
} /* 3周目: nowrap にしたら札が箱から切れた → 折れてよいが、金額はひとかたまり（index.php の u-nw） */
/* 作る2人: 2枚を上でそろえ、iPad Pro 縦で左のアーチが画面の端で切れないように */
.p-duo__faces {
  align-items: flex-start;
  padding-inline: var(--sp-3);
}

.p-duo__fig--maker {
  translate: 0 0;
}

/* どれも本物のサイト: iPad Pro 縦（900〜1099）はスマホ3台を下の段に回して大きく */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .p-real__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .p-real__phones {
    width: min(100%, 40rem);
  }
}
.p-real__name b {
  word-break: keep-all;
  overflow-wrap: break-word;
} /* 5周目: 名前は index.php で入れた <wbr> の所でだけ折る（「サンライフ／グループ様」）。列は広げない */ /* 4周目: 「サンライフグルー／プ様」と名前の途中で折れた → 文節で折る（列は li の min-width:0 で広がらない） */ /* 3周目: 「サンライフグループ様」が1語扱いで折れず、真ん中のスマホを押し広げていた */
.p-real__phones li {
  min-width: 0;
}

/* 3周目（タブレット）: iPad Pro 縦で2人の写真が列より広く、左のアーチが画面の端で切れた → 列の幅に収める */
.p-duo__faces .p-duo__fig {
  flex: 0 1 50%;
  min-width: 0;
}

.p-duo__faces .p-duo__photo {
  width: min(100%, 15rem);
}

/* 3周目: 写真2枚の上に約130pxの空きがあり、写真が浮いて見えた → 題字の上端にそろえる */
@media (min-width: 900px) {
  .p-home .p-duo__in {
    align-items: start;
  }
  .p-home .p-duo__faces {
    margin-top: var(--sp-2);
  }
}
.p-real__phones a, .p-real__name {
  min-width: 0;
}