:root {
  --about-ink: #17343b;
  --about-soft: #61777b;
  --about-deep: #27545b;
  --about-teal: #2f7774;
  --about-gold: #b99b55;
  --about-line: #d9e4e1;
  --about-wash: #f3f8f6;
  --about-ivory: #fbfaf5;
  --about-ui: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", sans-serif;
  --about-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
}

.about-main { overflow: hidden; color: var(--about-ink); background: #fff; }
.about-shell { box-sizing: border-box; width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.about-breadcrumb { padding: 26px 0 0; color: #77898c; font-family: var(--about-ui); font-size: 11px; }
.about-breadcrumb a { color: #42686d; text-decoration: none; }
.about-breadcrumb span { margin: 0 9px; color: var(--about-gold); }
.about-kicker { margin: 0 0 17px; color: #8a7137; font-family: var(--about-ui); font-size: 10px; font-weight: 800; letter-spacing: .2em; }

.about-hero { padding: 54px 0 86px; border-bottom: 1px solid var(--about-line); }
.about-hero-grid { display: grid; grid-template-columns: minmax(360px,.78fr) minmax(0,1.22fr); gap: 64px; align-items: center; }
.about-hero-copy h1 { width: fit-content; margin: 0; padding-bottom: 15px; border-bottom: 1px solid var(--about-gold); font-family: var(--about-serif); font-size: clamp(42px,5vw,66px); font-weight: 500; line-height: 1.34; letter-spacing: -.045em; }
.about-hero-copy h1 em { color: var(--about-teal); font-style: normal; }
.about-hero-copy > p:last-child { max-width: 620px; margin: 27px 0 0; color: #506b70; font-size: 14px; line-height: 2.05; }
.about-hero-visual { position: relative; margin: 0; padding: 18px 18px 42px; border: 1px solid #dce7e4; background: linear-gradient(145deg,#f9fcfb,#edf6f2); box-shadow: 0 28px 70px rgba(31,67,75,.1); }
.about-hero-visual::before { content: ""; position: absolute; z-index: 1; top: -12px; right: 34px; width: 98px; height: 24px; border: 1px solid rgba(155,125,58,.28); background: rgba(231,214,168,.55); transform: rotate(2deg); }
.about-hero-visual img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; background: #f4f8f6; }
.about-hero-visual figcaption { position: absolute; right: 18px; bottom: 13px; left: 18px; color: #6e8184; font-family: var(--about-ui); font-size: 9px; text-align: center; }

.about-origin { padding: 100px 0 106px; background: var(--about-deep); color: #fff; }
.about-origin-grid { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr); gap: 100px; }
.about-origin .about-kicker { color: #dac483; }
.about-origin h2 { margin: 0; font-family: var(--about-serif); font-size: clamp(35px,4.4vw,52px); font-weight: 500; line-height: 1.55; }
.about-story { padding-left: 38px; border-left: 1px solid rgba(255,255,255,.18); }
.about-story p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; line-height: 2.15; }
.about-story p + p { margin-top: 23px; }
.about-story .about-story-lead { color: #fff; font-family: var(--about-serif); font-size: 20px; line-height: 1.9; }
.about-story blockquote { margin: 38px 0; padding: 23px 0 23px 30px; color: #eadcae; border-top: 1px solid rgba(234,220,174,.35); border-bottom: 1px solid rgba(234,220,174,.35); font-family: var(--about-serif); font-size: clamp(21px,2.7vw,30px); line-height: 1.7; }

.about-diary { padding: 106px 0; background: var(--about-ivory); }
.about-diary-grid { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); gap: 92px; align-items: center; }
.about-diary h2,.about-section-head h2,.about-pdf h2,.about-closing h2 { margin: 0; font-family: var(--about-serif); font-size: clamp(34px,4.1vw,50px); font-weight: 500; line-height: 1.5; }
.about-diary-grid > div:last-child > p:not(.about-kicker) { margin: 20px 0 0; color: var(--about-soft); font-size: 14px; line-height: 2.05; }
.about-diary-grid .about-emphasis { margin-top: 28px !important; padding-top: 24px; color: #2f5f61 !important; border-top: 1px solid var(--about-gold); font-family: var(--about-serif); font-size: 17px !important; }
.about-diary-visual { position: relative; min-height: 390px; box-sizing: border-box; padding: 43px 38px; overflow: hidden; border: 1px solid #cddbd7; background: #fff; box-shadow: 0 30px 70px rgba(31,67,75,.09); }
.about-diary-visual::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 8px; background: linear-gradient(90deg,var(--about-deep),#5b9c94 70%,var(--about-gold)); }
.about-diary-day { width: 54px; height: 54px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--about-deep); font: 400 24px Georgia,serif; }
.about-diary-line { display: grid; grid-template-columns: 10px 1fr 10px 1fr 10px; gap: 7px; align-items: center; margin: 46px 0 38px; }
.about-diary-line i { width: 10px; height: 10px; border: 2px solid var(--about-gold); border-radius: 50%; }
.about-diary-line b { height: 1px; background: #bed2cd; }
.about-diary-visual dl { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; border-top: 1px solid #d7e3e0; border-bottom: 1px solid #d7e3e0; }
.about-diary-visual dl div { padding: 20px 7px; text-align: center; }
.about-diary-visual dl div + div { border-left: 1px solid #e2eae8; }
.about-diary-visual dt { color: #718487; font-size: 9px; }
.about-diary-visual dd { margin: 8px 0 0; color: var(--about-deep); font: 400 22px Georgia,serif; }
.about-diary-visual > small { position: absolute; right: 32px; bottom: 20px; color: #8a7137; font-family: var(--about-ui); font-size: 8px; font-weight: 800; letter-spacing: .19em; }

.about-tools { padding: 106px 0 116px; background: #fff; }
.about-section-head { max-width: 900px; margin-bottom: 55px; }
.about-section-head > p:last-child { max-width: 780px; margin: 21px 0 0; color: var(--about-soft); font-size: 14px; line-height: 2; }
.about-tool-list { border-top: 1px solid #cbdad6; }
.about-tool-list article { min-height: 210px; display: grid; grid-template-columns: 105px 80px minmax(0,1fr); gap: 35px; align-items: center; padding: 35px 8px; border-bottom: 1px solid #cbdad6; }
.about-tool-index { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-right: 22px; border-right: 1px solid #dce5e2; }
.about-tool-index strong { color: #315f61; font: 400 32px Georgia,serif; }
.about-tool-index small { margin-top: 7px; color: #8a7137; font-family: var(--about-ui); font-size: 7px; font-weight: 800; letter-spacing: .12em; line-height: 1.5; }
.about-tool-program { background: linear-gradient(90deg,rgba(243,248,246,.78),rgba(251,250,245,.82)); }
.about-tool-program .about-tool-index strong { color: #8a7137; font-size: 39px; line-height: 1; }
.about-tool-program .about-tool-icon { color: #8a7137; border-color: rgba(185,155,85,.42); background: #fffdf7; }
.about-tool-icon { width: 66px; height: 66px; display: grid; place-items: center; color: #3b7774; border: 1px solid #cfe0dc; border-radius: 50%; background: var(--about-wash); }
.about-tool-icon svg { width: 37px; height: 37px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.about-tool-list article > div:last-child > span { color: #8a7137; font-family: var(--about-ui); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.about-tool-list h3 { width: fit-content; margin: 8px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--about-gold); font-family: var(--about-serif); font-size: 24px; font-weight: 500; }
.about-tool-list p { max-width: 780px; margin: 13px 0 0; color: var(--about-soft); font-size: 13px; line-height: 1.95; }
.about-tool-list a { display: inline-block; margin-top: 14px; color: var(--about-deep); font-family: var(--about-ui); font-size: 11px; font-weight: 800; text-decoration: none; }
.about-tool-list a:hover,.about-tool-list a:focus-visible { color: var(--about-teal); }

@media (prefers-reduced-motion: no-preference) {
  .about-motion-ready .about-reveal-item {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity .58s ease,
      transform .58s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--about-reveal-delay, 0ms);
  }

  .about-motion-ready .about-reveal-item.is-visible {
    opacity: 1;
    transform: none;
  }

  .about-motion-ready .about-reveal-item .about-tool-icon {
    transform: scale(.92);
    transition: transform .42s .18s ease;
  }

  .about-motion-ready .about-reveal-item.is-visible .about-tool-icon {
    transform: scale(1);
  }
}

.about-pdf { padding: 108px 0; color: #fff; background: linear-gradient(135deg,#173e47,#27545b 58%,#356f6c); }
.about-pdf-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.75fr); gap: 90px; align-items: center; }
.about-pdf .about-kicker { color: #dac483; }
.about-pdf-grid > div > p:not(.about-kicker) { margin: 22px 0 0; color: rgba(255,255,255,.68); font-size: 14px; line-height: 2.05; }
.about-summary-sheet { box-sizing: border-box; margin: 0; padding: 30px 34px 22px; color: #1d3033; background: #fff; box-shadow: 0 28px 70px rgba(0,0,0,.24); transform: rotate(1deg); }
.about-summary-sheet header { display: flex; justify-content: space-between; padding-bottom: 11px; border-bottom: 3px solid var(--about-deep); }
.about-summary-sheet header span { color: var(--about-deep); font: 700 11px Georgia,serif; letter-spacing: .12em; }
.about-summary-sheet header b { color: #8a7137; font: 800 7px var(--about-ui); letter-spacing: .13em; }
.about-summary-sheet section { padding: 16px 0; border-bottom: 1px solid #dce5e2; }
.about-summary-sheet section strong { display: block; color: var(--about-deep); font: 800 8px var(--about-ui); }
.about-summary-sheet section i { height: 7px; display: block; margin-top: 8px; background: #e8efed; }
.about-summary-sheet section i:last-child { width: 72%; }
.about-summary-sheet > div { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.about-summary-sheet figcaption { margin-top: 17px; color: #758588; font-family: var(--about-ui); font-size: 7px; text-align: right; }

.about-benefits { padding: 106px 0 116px; background: var(--about-wash); }
.about-section-head.compact { margin-bottom: 46px; }
.about-benefit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid #bdd1cc; border-left: 1px solid #bdd1cc; }
.about-benefit-grid article { min-height: 225px; padding: 31px 34px; border-right: 1px solid #bdd1cc; border-bottom: 1px solid #bdd1cc; background: rgba(255,255,255,.58); }
.about-benefit-grid span { color: #8a7137; font: 400 24px Georgia,serif; }
.about-benefit-grid h3 { margin: 24px 0 11px; font-family: var(--about-serif); font-size: 23px; font-weight: 500; }
.about-benefit-grid p { margin: 0; color: var(--about-soft); font-size: 13px; line-height: 1.95; }

.about-closing { padding: 104px 0 54px; background: #fff; }
.about-closing-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 80px; align-items: center; padding-bottom: 68px; }
.about-closing-inner > div:first-child > p:last-child { max-width: 760px; margin: 22px 0 0; color: var(--about-soft); font-size: 14px; line-height: 2.05; }
.about-closing-actions { min-width: 220px; display: grid; gap: 10px; }
.about-closing-actions a { min-height: 50px; display: grid; place-items: center; padding: 0 20px; color: var(--about-deep); border: 1px solid #c9d9d5; font-family: var(--about-ui); font-size: 12px; font-weight: 800; text-decoration: none; }
.about-closing-actions .about-primary { color: #fff; border-color: var(--about-deep); background: var(--about-deep); }
.about-closing-actions a:hover,.about-closing-actions a:focus-visible { color: #fff; border-color: var(--about-teal); background: var(--about-teal); }
.about-medical-note { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 28px; padding: 25px 0; border-top: 1px solid var(--about-gold); border-bottom: 1px solid var(--about-line); }
.about-medical-note strong { color: var(--about-deep); font-family: var(--about-ui); font-size: 12px; }
.about-medical-note p { margin: 0; color: #718285; font-size: 10px; line-height: 1.8; }

@media (max-width: 900px) {
  .about-hero-grid,.about-origin-grid,.about-diary-grid,.about-pdf-grid { grid-template-columns: 1fr; }
  .about-hero-grid { gap: 46px; }
  .about-origin-grid,.about-diary-grid,.about-pdf-grid { gap: 56px; }
  .about-origin-grid { max-width: 760px; }
  .about-story { padding-left: 0; border-left: 0; }
  .about-diary-visual { max-width: 520px; width: 100%; margin: 0 auto; }
  .about-pdf-grid { max-width: 800px; }
  .about-summary-sheet { width: min(100%,520px); margin: 0 auto; }
}

@media (max-width: 700px) {
  .about-shell { width: calc(100% - 32px); }
  .about-breadcrumb { padding-top: 18px; }
  .about-hero { padding: 38px 0 62px; }
  .about-hero-copy h1 { font-size: clamp(34px,10vw,46px); }
  .about-hero-copy h1 br { display: none; }
  .about-hero-copy > p:last-child { font-size: 13px; line-height: 1.95; }
  .about-hero-visual { padding: 10px 10px 36px; }
  .about-hero-visual::before { right: 22px; width: 72px; height: 18px; }
  .about-origin,.about-diary,.about-tools,.about-pdf,.about-benefits,.about-closing { padding-top: 68px; }
  .about-origin,.about-diary,.about-tools,.about-pdf,.about-benefits { padding-bottom: 72px; }
  .about-origin h2,.about-diary h2,.about-section-head h2,.about-pdf h2,.about-closing h2 { font-size: 31px; }
  .about-story .about-story-lead { font-size: 18px; }
  .about-story p,.about-diary-grid > div:last-child > p:not(.about-kicker),.about-pdf-grid > div > p:not(.about-kicker) { font-size: 13px; line-height: 2; }
  .about-story blockquote { margin: 30px 0; padding-left: 17px; font-size: 21px; }
  .about-diary-visual { min-height: 340px; padding: 37px 24px; }
  .about-diary-visual dl { grid-template-columns: 1fr; }
  .about-diary-visual dl div { display: flex; justify-content: space-between; padding: 10px 6px; }
  .about-diary-visual dl div + div { border-top: 1px solid #e2eae8; border-left: 0; }
  .about-diary-visual dd { margin: 0; font-size: 18px; }
  .about-tool-list article { grid-template-columns: 62px minmax(0,1fr); gap: 19px; align-items: start; padding: 29px 0; }
  .about-tool-index { grid-row: 1 / span 2; padding-right: 14px; }
  .about-tool-index strong { font-size: 27px; }
  .about-tool-icon { width: 54px; height: 54px; }
  .about-tool-icon svg { width: 30px; height: 30px; }
  .about-tool-list article > div:last-child { grid-column: 2; }
  .about-tool-list h3 { font-size: 21px; }
  .about-tool-list p { font-size: 12px; }
  .about-summary-sheet { padding: 23px 22px 18px; transform: none; }
  .about-summary-sheet > div { grid-template-columns: 1fr; gap: 0; }
  .about-benefit-grid { grid-template-columns: 1fr; }
  .about-benefit-grid article { min-height: 0; padding: 27px 24px; }
  .about-closing { padding-bottom: 44px; }
  .about-closing-inner { grid-template-columns: 1fr; gap: 34px; padding-bottom: 48px; }
  .about-closing-actions { min-width: 0; }
  .about-medical-note { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero-visual,.about-summary-sheet { transform: none; }
  .about-reveal-item,
  .about-reveal-item .about-tool-icon {
    opacity: 1;
    transform: none;
    transition: none;
  }
}