/* ぴったんこ紹介ページ。共通のsite.cssは変更しません。 */
.pittanko-page { padding-top: 20px; padding-bottom: 58px; }
.pittanko-breadcrumbs { margin-bottom: 18px; }
.pittanko-breadcrumbs ol { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0; padding:0; list-style:none; color:var(--muted); font-size:.8rem; }
.pittanko-breadcrumbs li + li::before { content:"/"; margin-right:10px; color:#7c9797; }
.pittanko-breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; font-weight:700; text-underline-offset:4px; }

.pittanko-hero { overflow:hidden; border:1px solid #d4e6e2; border-radius:25px; background:#e8f2ef; }
.pittanko-hero-copy { padding:25px 23px 22px; }
.pittanko-hero h1 { margin:0 0 12px; font-size:clamp(1.58rem,6.4vw,2.3rem); font-weight:800; line-height:1.4; letter-spacing:.025em; }
.pittanko-lead { margin:0; max-width:40em; color:#3e6264; font-size:.94rem; line-height:1.85; }
.pittanko-tags { display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:17px 0 0; list-style:none; }
.pittanko-tags li { padding:5px 10px; border:1px solid #d0e2dd; border-radius:999px; background:#fff; color:var(--teal-dark); font-size:.73rem; font-weight:800; line-height:1.6; }

.pittanko-hero-start-link { display:inline-flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; min-height:54px; padding:12px 20px; border:2px solid var(--teal); border-radius:999px; background:var(--teal); color:#fff; font-size:.98rem; font-weight:800; line-height:1.45; text-decoration:none; box-shadow:0 5px 13px rgba(32,88,82,.13); }
.pittanko-hero-start-link:hover { border-color:var(--teal-dark); background:var(--teal-dark); }
.pittanko-hero-start-link:active { transform:translateY(1px); }
.pittanko-hero-start-link span { font-size:1.12rem; }
.pittanko-hero-start-note { margin:8px 0 0; color:var(--muted); font-size:.74rem; line-height:1.7; }

.pittanko-hero-visual { position:relative; min-height:230px; padding:24px; background:linear-gradient(180deg,#d8ebe5,#eef7f3); }
.pittanko-hero-visual::before { content:""; position:absolute; left:8%; right:8%; top:50%; height:1px; background:#c4ddd5; }
.pittanko-sample { position:absolute; display:grid; place-items:center; width:112px; height:112px; border:1px solid #d8e8e3; border-radius:24px; background:#fff; box-shadow:0 7px 18px rgba(42,83,77,.08); }
.pittanko-sample img { width:86%; height:86%; object-fit:contain; }
.sample-apple { left:7%; top:24px; transform:rotate(-4deg); }
.sample-lion { right:7%; top:38px; transform:rotate(3deg); }
.sample-train { left:50%; bottom:18px; width:138px; height:94px; transform:translateX(-50%) rotate(-1deg); }

.pittanko-section { margin-top:20px; padding:23px 21px; border:1px solid var(--line); border-radius:22px; background:var(--paper); }
.pittanko-section h2 { margin:0 0 13px; font-size:clamp(1.18rem,4.8vw,1.45rem); line-height:1.45; letter-spacing:.02em; }
.pittanko-section > p { margin:0 0 13px; color:var(--muted); font-size:.92rem; line-height:1.9; }
.pittanko-section > p:last-child { margin-bottom:0; }
.pittanko-theme-note { margin-top:18px; padding:15px 16px; border-radius:15px; background:#f5f9f7; border:1px solid #e0ebe7; }
.pittanko-theme-note strong { display:block; margin-bottom:5px; font-size:.9rem; }
.pittanko-theme-note span { display:block; color:var(--muted); font-size:.82rem; line-height:1.75; }

.pittanko-steps { display:grid; gap:18px; margin:0; padding:0; list-style:none; }
.pittanko-steps li { display:flex; align-items:flex-start; gap:12px; }
.pittanko-step-number { display:grid; flex:none; place-items:center; width:31px; height:31px; border-radius:50%; background:#e0efeb; color:var(--teal-dark); font-size:.86rem; font-weight:800; }
.pittanko-steps h3 { margin:2px 0 5px; font-size:.99rem; line-height:1.6; }
.pittanko-steps p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.85; }

.pittanko-parents { background:#f0f6f3; border-color:#d8e7e0; }
.pittanko-parent-notes { margin:0; }
.pittanko-parent-notes > div { padding:15px 0; border-top:1px solid #d9e6df; }
.pittanko-parent-notes > div:first-child { padding-top:0; border-top:0; }
.pittanko-parent-notes > div:last-child { padding-bottom:0; }
.pittanko-parent-notes dt { margin:0 0 5px; font-size:.91rem; font-weight:800; }
.pittanko-parent-notes dd { margin:0; color:var(--muted); font-size:.88rem; line-height:1.85; }

.pittanko-start { margin-top:22px; padding:28px 22px 23px; border:1px solid #d1e4de; border-radius:22px; background:#e5f0ec; text-align:center; }
.pittanko-start h2 { margin:0 0 7px; font-size:1.2rem; line-height:1.5; }
.pittanko-start > p { margin:0 0 18px; color:#3e6264; font-size:.86rem; line-height:1.8; }
.pittanko-start-link { display:inline-flex; align-items:center; justify-content:center; gap:15px; width:min(100%,340px); min-height:58px; padding:13px 18px; border:2px solid var(--teal); border-radius:999px; background:var(--teal); color:#fff; font-size:1.02rem; font-weight:800; line-height:1.5; text-decoration:none; box-shadow:0 5px 13px rgba(32,88,82,.13); }
.pittanko-start-link:hover { border-color:var(--teal-dark); background:var(--teal-dark); }
.pittanko-start-link:active { transform:translateY(1px); }
.pittanko-start-link span { font-size:1.15rem; }
.pittanko-start .pittanko-start-note { margin:12px 0 0; font-size:.77rem; }
.pittanko-start .back-home { margin:10px 0 0; font-size:.86rem; }
.pittanko-page .ad-root { margin-top:36px; margin-bottom:0; }

@media (min-width:650px) {
  .pittanko-page { padding-top:26px; padding-bottom:74px; }
  .pittanko-hero-copy { padding:32px; }
  .pittanko-hero-visual { min-height:270px; }
  .pittanko-sample { width:135px; height:135px; }
  .sample-train { width:165px; height:110px; }
  .pittanko-section { margin-top:26px; padding:30px 32px; }
  .pittanko-steps { gap:20px; }
  .pittanko-parent-notes > div { display:grid; grid-template-columns:145px minmax(0,1fr); gap:18px; }
  .pittanko-parent-notes dt { margin:0; }
  .pittanko-start { margin-top:26px; padding:34px 28px 28px; }
}
@media (min-width:900px) {
  .pittanko-hero { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
  .pittanko-hero-copy { display:flex; flex-direction:column; justify-content:center; padding:32px 34px; }
  .pittanko-hero-visual { min-height:300px; }
  .pittanko-steps { grid-template-columns:1fr 1fr; gap:24px 32px; }
}
@media (max-width:359px) {
  .pittanko-hero-copy { padding:22px 18px 19px; }
  .pittanko-hero-visual { min-height:205px; padding:18px; }
  .pittanko-sample { width:96px; height:96px; border-radius:20px; }
  .sample-train { width:122px; height:84px; }
  .pittanko-section { padding:21px 17px; }
  .pittanko-steps li { gap:9px; }
}