/* 対象2ページだけに適用。色と書体は共通トークンを継承。 */
.left-hand-story { line-break: strict; }
.left-hand-story h2 { line-height: 1.7; letter-spacing: .03em; }
.left-hand-story h2 span, .left-hand-lead h2 span { display: block; }
.left-hand-story p { font-size: 16px; }
.left-hand-section { margin-top: 76px; }
.left-hand-story section > h2 { margin: 0 0 26px; }
.left-hand-origin { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; }
.left-hand-origin h2 { font-size: 26px; }
.left-hand-origin p:last-child { margin-bottom: 0; }
.left-hand-roles, .left-hand-examples { margin: 0; }
.left-hand-role { display: grid; grid-template-columns: minmax(0,1fr) 190px; align-items: center; gap: 44px; padding: 28px 0; border-top: 1px solid var(--line); }
.left-hand-role:last-child { border-bottom: 1px solid var(--line); }
.left-hand-role-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.left-hand-role-copy h3 { margin: 0 0 8px; font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 27px; font-weight: 700; color: var(--green); }
.left-hand-story .left-hand-role-subtitle { font-size: 18px; font-weight: 600; margin-bottom: 10px; line-height: 1.8; }
.left-hand-role-copy p:last-child, .left-hand-promises p { margin: 0; }
.left-hand-examples dd { margin: 0; }
.left-hand-example { padding: 36px 40px; background: var(--pale); border-radius: 0 40px 0 0; }
.left-hand-label { color: var(--green); font-size: 13px !important; font-weight: 600; letter-spacing: .08em; }
.left-hand-examples > div { padding: 22px 0; border-top: 1px solid var(--line); }
.left-hand-examples dt { color: var(--green); font-weight: 700; margin-bottom: 8px; }
.left-hand-examples dd { line-height: 2.1; }
.left-hand-story .left-hand-case-link { margin: 6px 0 0; }
.left-hand-case-link .text-link { gap: 18px; }
.left-hand-story .arrow, .left-hand-lead .arrow { flex-shrink: 0; }
.left-hand-promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; padding: 0 !important; }
.left-hand-promises li { margin: 0; padding-top: 20px; border-top: 2px solid var(--green); }
.left-hand-promises h3 { margin: 0 0 14px; font-size: 18px; }
.left-hand-story .left-hand-workshop { margin: 32px 0 0; }
.left-hand-story p > a:not(.text-link) { text-decoration: underline; text-underline-offset: .25em; }
.left-hand-lead { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; border-radius: 0 32px 0 0; padding: 32px; }
.left-hand-lead .left-hand-label { margin: 0 0 12px; }
.left-hand-lead h2 { margin: 0; font-size: 23px; letter-spacing: 0; }
.left-hand-lead p { font-size: 16px; }

@media (max-width: 640px) {
  .left-hand-origin, .left-hand-lead { grid-template-columns: 1fr; gap: 20px; }
  .left-hand-origin h2, .left-hand-story h2 { font-size: 23px; letter-spacing: 0; }
  .left-hand-section { margin-top: 56px; }
  .left-hand-story { padding-inline: 6px; }
  .left-hand-role { grid-template-columns: minmax(0,1fr) 104px; gap: 12px; align-items: start; padding: 24px 0; }
  .left-hand-role-copy { display: contents; }
  .left-hand-role-copy h3 { grid-column: 1; grid-row: 1; align-self: center; margin: 0; font-size: 25px; }
  .left-hand-role-art { grid-column: 2; grid-row: 1; }
  .left-hand-role-copy p { grid-column: 1 / -1; }
  .left-hand-story .left-hand-role-subtitle { margin: 0; font-size: 17px; }
  .left-hand-example { padding: 28px 20px; }
  .left-hand-example h2 { font-size: 22px; }
  .left-hand-promises { grid-template-columns: 1fr; gap: 24px; }
  .left-hand-lead { padding: 28px 22px; }
  .left-hand-lead h2 { font-size: 22px; }
}

/* 導入と下部の挿絵。見出しの余白を活かし、役割紹介より主張を抑える。 */
.left-hand-origin-heading h2 { margin: 0 0 24px; }
.left-hand-listen-art { display: block; width: 144px; height: auto; margin: 0 auto; }
.left-hand-section-heading { display: grid; grid-template-columns: minmax(0,1fr) 160px; align-items: center; gap: 32px; margin-bottom: 24px; }
.left-hand-section-heading h2 { margin: 0; }
.left-hand-promise-art { display: block; width: 100%; height: auto; }
.left-hand-vision { display: grid; grid-template-columns: minmax(0,1fr) 260px; align-items: center; gap: 36px; }
.left-hand-vision h2 { margin: 0 0 24px; }
.left-hand-vision p:last-child { margin-bottom: 0; }
.left-hand-vision-art { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  .left-hand-listen-art { width: 120px; margin: 0; }
  .left-hand-section-heading { grid-template-columns: minmax(0,1fr) 84px; gap: 12px; }
  .left-hand-section-heading h2 { font-size: 22px; }
  .left-hand-vision { grid-template-columns: 1fr; gap: 20px; }
  .left-hand-vision-art { width: 240px; max-width: 100%; justify-self: end; }
}