@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');
:root{--navy:#343f4f;--blue:#657b75;--ink:#383b3a;--muted:#777b78;--pale:#f7f5f0;--line:#e2ded6;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}body{margin:0;background:#fff;color:var(--ink);font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;line-height:1.85}a{color:inherit}.site-header{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px clamp(18px,5vw,64px);background:var(--navy);color:#fff}.brand{font-weight:700;letter-spacing:.07em;text-decoration:none;white-space:nowrap;line-height:1.35}.brand small{display:block;font-size:.65rem;letter-spacing:.15em;font-weight:400;color:#c5d1dd}.back-link{border:1px solid #d5dee7;border-radius:4px;padding:7px 15px;text-decoration:none;font-size:.85rem;white-space:nowrap;transition:background .2s,color .2s}.back-link:hover{background:#fff;color:var(--navy)}
.hero{background:#f7f5f0;color:var(--ink);padding:clamp(42px,6vw,76px) clamp(20px,5vw,64px) 22px;border-bottom:1px solid var(--line)}.hero-grid{max-width:1120px;margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:38px;align-items:center}.tag{display:inline-block;border:1px solid #aab8c5;border-radius:3px;color:#526579;padding:2px 12px;font-size:.76rem;letter-spacing:.06em}.eyebrow{font-size:.68rem;letter-spacing:.14em;font-weight:700;color:#64798d;margin:0 0 7px}.hero .eyebrow{margin-top:18px}h1{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.35;letter-spacing:.015em;margin:12px 0;color:#343f4f}.hero h1 span{color:#657b75}.hero-lead{font-weight:600;font-size:clamp(1rem,1.5vw,1.2rem);margin:14px 0 8px}.hero-copy{color:#5f6f7f;font-size:.92rem;max-width:500px}.primary-button,.outline-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;border:1px solid #657b75;border-radius:4px;padding:9px 16px;text-decoration:none;font-weight:600;margin-top:14px;transition:.2s;color:#536c64}.primary-button:hover,.outline-button:hover{background:#657b75;color:#fff}.hero-chart{min-width:0;border:1px solid #e2ded6;border-radius:5px;padding:13px;background:#fff}.chart-caption{display:flex;align-items:center;gap:8px;color:#777b78;font-size:.63rem;letter-spacing:.07em}.chart-caption span:last-child{margin-left:auto;color:#999a95}.live-dot{width:6px;height:6px;border-radius:50%;background:#8b9b8c}.hero-chart img{display:block;width:100%;max-height:330px;object-fit:contain;margin:8px 0}.hero-bottom{max-width:1120px;margin:22px auto 0;display:flex;justify-content:space-between;color:#999a95;font-size:.62rem;letter-spacing:.13em}
.section{padding:clamp(42px,6vw,68px) clamp(20px,5vw,64px)}.section-title{max-width:1120px;margin:0 auto 26px;display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start}.section-index{font-size:1.45rem;font-weight:700;color:#999a95;line-height:1.3;border-right:1px solid #d6d0c5}.section-title h2{margin:0;color:#343f4f;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.5}.section-subtitle{margin:8px 0 0;color:var(--muted);font-size:.9rem}.intro-grid{max-width:1120px;margin:auto;display:grid;grid-template-columns:1fr .85fr;gap:clamp(25px,5vw,60px);align-items:center}.intro-copy p{color:#666b67;margin:0 0 14px}.intro-copy strong{color:#657b75}.chart-example{margin:0;background:#fff;border:1px solid var(--line);border-radius:5px;padding:12px}.chart-example img{display:block;width:100%;max-height:260px;object-fit:contain}.chart-example figcaption{font-size:.7rem;color:#858680;text-align:center;margin-top:7px}
.research-section{background:#fff;border-top:1px solid #edf0f3}.method-grid{max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.method-card{background:#fff;border:1px solid #dce3e9;border-radius:5px;padding:21px;min-height:260px;display:flex;flex-direction:column}.method-number{color:#657b75;font-weight:700;font-size:.8rem;letter-spacing:.07em}.method-number span{font-size:.62rem;color:#999a95;font-weight:500}.method-card h3{margin:18px 0 8px;font-size:1.1rem;color:#343f4f}.method-card p{font-size:.87rem;color:#666b67;margin:0;line-height:1.9}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:18px;color:#657b75;font-size:.78rem;font-weight:600}.card-footer span:last-child{font-size:1rem}.visit-section{padding:30px 20px 38px;text-align:center;background:#f7f5f0;border-top:1px solid #e2ded6}.visit-section p{margin:0;color:#536477;font-size:.95rem}.visit-section .outline-button{margin-top:12px}footer{display:flex;justify-content:space-between;gap:15px;align-items:center;background:#343f4f;color:#e0e1dc;padding:17px clamp(20px,5vw,64px);font-size:.7rem}footer span:first-child{color:#fff;font-weight:700;letter-spacing:.08em}
@media(max-width:850px){.hero-grid{grid-template-columns:1fr;gap:25px}.hero-chart{max-width:700px;width:100%;margin:auto}.hero-text{max-width:650px}.intro-grid{grid-template-columns:1fr}.chart-example{max-width:620px;width:100%;margin:auto}.method-grid{grid-template-columns:1fr}.method-card{min-height:0}.method-card h3{margin-top:10px}.card-footer{padding-top:13px}}
@media(max-width:580px){.site-header{padding:12px 17px}.brand{font-size:.88rem}.back-link{font-size:.75rem;padding:6px 9px}.hero{padding:36px 18px 18px}.hero h1{font-size:clamp(2rem,9vw,2.6rem)}.hero-copy{font-size:.87rem}.hero-chart{padding:9px}.chart-caption{font-size:.55rem}.section{padding:40px 18px}.section-title{grid-template-columns:34px 1fr;gap:10px}.section-index{font-size:1.3rem}.section-subtitle{font-size:.84rem}.method-card{padding:18px}.card-footer{padding-top:14px}footer{flex-wrap:wrap;justify-content:center;text-align:center}footer span:nth-child(2){width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

.chart-caption{font-size:.78rem;letter-spacing:0;color:#777b78}.live-dot{display:none}

/* User-provided research images */
.chart-example img{max-height:360px;object-fit:contain}
.chart-example img.pattern-image{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);max-height:300px}
.chart-example figcaption{line-height:1.6}

/* Two-column introduction: equal image frames, with each explanation below */
.intro-grid{max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.example-card{min-width:0;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#fff}
.example-card>img{display:block;width:100%;height:300px;object-fit:contain;background:#fbfaf7;padding:10px}
.example-copy{padding:18px 20px 20px;border-top:1px solid var(--line)}
.example-copy h3{margin:0 0 10px;color:#343f4f;font-size:1.08rem}
.example-copy p{margin:0 0 12px;color:#666b67;font-size:.9rem;line-height:1.9}
.example-copy p:last-child{margin-bottom:0}
.example-copy strong{color:#657b75}
.chart-caption{font-size:.78rem;letter-spacing:0;color:#777b78}
.hero-chart img{max-height:330px;object-fit:contain}
@media(max-width:850px){.intro-grid{grid-template-columns:1fr}.example-card{max-width:650px;width:100%;margin:auto}.example-card>img{height:clamp(220px,48vw,340px)}}
@media(max-width:580px){.example-copy{padding:15px}.example-copy p{font-size:.86rem}.example-card>img{height:230px}}

/* 01・02の見出しは、スクロールで現れ、画面外に戻ると消える */
.section-title.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}
.section-title.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .section-title.reveal-on-scroll { transition: none; transform: none; }
}