:root {
  color-scheme: light;
  --paper: #fcfaf1;
  --paper-deep: #f1eee3;
  --ink: #3a3e33;
  --ink-soft: #696d63;
  --green: #4aa895;
  --green-soft: #b9d4ca;
  --blue: #3d5084;
  --line: rgba(58, 62, 51, .18);
  --white: #fffef9;
  --shell: min(1200px, calc(100vw - 80px));
  --film-progress: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  line-height: 1.85;
  letter-spacing: .04em;
}
a { color: inherit; }
a:focus-visible { outline: 3px solid #d6a53d; outline-offset: 5px; }
img { display: block; max-width: 100%; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.skip-link { position: fixed; z-index: 10001; left: 1rem; top: -6rem; padding: .75rem 1rem; background: var(--blue); color: white; }
.skip-link:focus { top: 1rem; }
.section-shell { width: var(--shell); margin-inline: auto; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 82px;
  padding: 20px max(20px, calc((100vw - 1400px) / 2));
  background: linear-gradient(180deg, rgba(252,250,241,.97) 0%, rgba(252,250,241,.76) 58%, rgba(252,250,241,0) 100%);
}
.brand { flex: 0 0 auto; text-decoration: none; }
.brand img { width: 172px; height: auto; }
.site-header > nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.site-header > nav a { position: relative; padding-bottom: 4px; text-decoration: none; font-size: .7rem; font-weight: 650; letter-spacing: .12em; }
.site-header > nav a::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; }
.site-header > nav a:hover::after { transform: scaleX(1); }
.site-header > nav span { margin-right: 7px; color: var(--green); font-size: .58rem; }
.mobile-nav { display: none; }

.brand-film { position: relative; min-height: 1080px; background: var(--paper); }
.brand-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 1080px;
  overflow: clip;
  isolation: isolate;
  background: var(--paper);
  --slogan-out: 0;
  --message-in: 1;
}
.motion-ready .brand-film { height: 240svh; min-height: 1850px; }
.motion-ready .brand-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  --slogan-out: clamp(0, calc(var(--film-progress) * 2.25), 1);
  --message-in: clamp(0, calc((var(--film-progress) - .36) * 3.15), 1);
}

.shape-field {
  position: absolute;
  z-index: -1;
  inset: -8%;
  overflow: hidden;
  opacity: calc(.88 - (var(--film-progress) * .68));
  transition: opacity .08s linear;
}
.brand-piece {
  position: absolute;
  left: 0;
  width: var(--size, 150px);
  max-width: none;
  height: auto;
  filter: drop-shadow(0 16px 24px rgba(255,255,255,.75));
  translate: 125vw 0;
  rotate: var(--angle, 0deg);
  animation: brand-cross var(--duration, 38s) linear infinite, brand-turn var(--spin, 26s) linear infinite;
  animation-delay: var(--delay, 0s), var(--turn-delay, -4s);
  animation-play-state: paused;
  will-change: translate, rotate;
}
.film-active .brand-piece { animation-play-state: running; }
.piece-01 { --size: clamp(110px, 12vw, 210px); --duration: 36s; --delay: -4s; --spin: 31s; --angle: 12deg; top: 7%; }
.piece-02 { --size: clamp(80px, 9vw, 150px); --duration: 36s; --delay: -22s; --spin: 25s; --angle: -18deg; top: 8%; }
.piece-03 { --size: clamp(150px, 18vw, 310px); --duration: 45s; --delay: -13s; --spin: 33s; --angle: 24deg; top: 28%; }
.piece-04 { --size: clamp(70px, 8vw, 135px); --duration: 45s; --delay: -34s; --spin: 24s; --angle: 68deg; top: 31%; }
.piece-05 { --size: clamp(85px, 10vw, 170px); --duration: 40s; --delay: -7s; --spin: 29s; --angle: -35deg; top: 49%; animation-direction: reverse, normal; }
.piece-06 { --size: clamp(145px, 19vw, 330px); --duration: 40s; --delay: -25s; --spin: 37s; --angle: 122deg; top: 47%; animation-direction: reverse, normal; }
.piece-07 { --size: clamp(105px, 12vw, 220px); --duration: 43s; --delay: -3s; --spin: 28s; --angle: -77deg; top: 69%; }
.piece-08 { --size: clamp(78px, 8vw, 135px); --duration: 43s; --delay: -29s; --spin: 23s; --angle: 150deg; top: 72%; }
.piece-09 { --size: clamp(90px, 10vw, 170px); --duration: 39s; --delay: -17s; --spin: 30s; --angle: 15deg; top: 84%; animation-direction: reverse, normal; }
.piece-10 { --size: clamp(75px, 9vw, 150px); --duration: 39s; --delay: -35s; --spin: 26s; --angle: -105deg; top: 86%; animation-direction: reverse, normal; }
.piece-11 { --size: clamp(130px, 16vw, 270px); --duration: 48s; --delay: -41s; --spin: 39s; --angle: 57deg; top: 15%; }
.piece-12 { --size: clamp(95px, 11vw, 185px); --duration: 47s; --delay: -37s; --spin: 35s; --angle: -42deg; top: 60%; }

.hero-slogan {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: clamp(420px, 39vw, 558px);
  transform: translate(-50%, calc(-50% - (var(--film-progress) * 100px))) scale(calc(1 - (var(--film-progress) * .055)));
  opacity: calc(1 - var(--slogan-out));
  transition: opacity .08s linear;
  will-change: transform, opacity;
}
.hero-slogan img { width: 100%; height: auto; }

.brand-manifesto {
  position: absolute;
  z-index: 3;
  left: max(24px, calc(50% - 320px));
  bottom: clamp(40px, 8vh, 88px);
  width: min(640px, calc(100vw - 48px));
  opacity: var(--message-in);
  transform: translateY(calc((1 - var(--message-in)) * 90px));
  font-size: clamp(.9rem, 1.45vw, 1.32rem);
  line-height: 1.75;
  letter-spacing: .13em;
  will-change: transform, opacity;
}
.brand-manifesto p { margin: 0 0 .42em; }
.brand-manifesto .manifesto-kicker { margin-bottom: 1.05em; }
.film-note {
  position: absolute;
  z-index: 2;
  left: max(24px, calc((100vw - 1200px) / 2));
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: calc(1 - var(--slogan-out));
  color: var(--blue);
  font-size: .58rem;
  letter-spacing: .25em;
}
.film-note-line { width: 72px; height: 1px; background: currentColor; }
.scroll-cue {
  position: absolute;
  z-index: 4;
  right: max(24px, calc((100vw - 1200px) / 2));
  bottom: 31px;
  display: flex;
  align-items: center;
  gap: 15px;
  opacity: calc(1 - var(--slogan-out));
  text-decoration: none;
  font-size: .58rem;
  letter-spacing: .22em;
}
.scroll-cue span { position: relative; width: 82px; height: 1px; overflow: hidden; background: rgba(58,62,51,.2); }
.scroll-cue span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateX(-100%); animation: scroll-line 2s ease-in-out infinite; }

.purpose { padding-block: clamp(120px, 13vw, 190px); }
.section-index, .card-label { margin: 0 0 30px; color: var(--green); font-size: .67rem; font-weight: 750; letter-spacing: .24em; }
.purpose-grid, .section-heading, .local-grid, .company-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); gap: clamp(48px, 8vw, 128px); align-items: start; }
h2 { margin: 0; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(2.8rem, 5.35vw, 5.4rem); font-weight: 500; line-height: 1.3; letter-spacing: -.035em; }
.purpose-copy { border-top: 1px solid var(--line); padding-top: 28px; }
.purpose-copy p { margin: 0 0 22px; color: var(--ink-soft); }
.purpose-copy .purpose-lead { color: var(--ink); font-size: clamp(1.12rem, 1.55vw, 1.36rem); font-weight: 650; line-height: 1.85; }

.approach { position: relative; overflow: hidden; padding-block: clamp(110px, 11vw, 160px); background: var(--blue); color: white; }
.approach::before { content: ""; position: absolute; width: 520px; aspect-ratio: 1; right: -180px; top: -210px; border: 95px solid rgba(74,168,149,.24); border-radius: 50%; }
.section-index.light, .inverse p { color: #a9d9cf; }
.section-heading p { margin: 13px 0 0; color: var(--ink-soft); }
.process-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 92px 0 0; padding: 0; list-style: none; background: rgba(255,255,255,.22); }
.process-list li { position: relative; min-height: 310px; padding: 36px; overflow: hidden; background: var(--blue); }
.process-list li::after { content: ""; position: absolute; width: 120px; aspect-ratio: 1; right: -64px; bottom: -66px; border: 22px solid rgba(74,168,149,.2); border-radius: 50%; transition: transform .5s ease; }
.process-list li:hover::after { transform: scale(1.45); }
.process-list span { display: block; color: #a9d9cf; font-size: .66rem; letter-spacing: .2em; }
.process-list h3 { margin: 64px 0 13px; font-family: serif; font-size: 2.2rem; font-weight: 500; }
.process-list p { margin: 0; color: rgba(255,255,255,.72); font-size: .88rem; }

.initiatives, .local-trust { padding-block: clamp(120px, 12vw, 175px); }
.section-heading { margin-bottom: 76px; }
.initiative-card { display: grid; grid-template-columns: 1.12fr .88fr; min-height: 560px; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.initiative-visual { position: relative; min-height: 480px; margin: 0; overflow: hidden; background: var(--green-soft); }
.initiative-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(34,43,39,.55)); pointer-events: none; }
.initiative-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.initiative-card:hover .initiative-visual img { transform: scale(1.035); }
.initiative-visual figcaption { position: absolute; z-index: 2; left: 30px; bottom: 24px; color: white; font-size: .62rem; letter-spacing: .22em; }
.initiative-content { align-self: center; padding: 56px clamp(34px, 5vw, 76px); }
.initiative-content h3 { margin: 0 0 22px; font-family: serif; font-size: clamp(2.8rem, 4.4vw, 4.7rem); font-weight: 500; line-height: 1.15; }
.initiative-content p:not(.card-label) { color: var(--ink-soft); }
.initiative-content a { display: inline-flex; gap: 15px; margin-top: 25px; border-bottom: 1px solid var(--ink); text-decoration: none; font-weight: 700; }

.evidence { padding-block: clamp(115px, 11vw, 160px); background: var(--paper-deep); }
.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 125px); }
.evidence-copy > p { margin: 14px 0 46px; color: var(--ink-soft); }
.evidence-copy dl { margin: 0; border-top: 1px solid var(--line); }
.evidence-copy dl div { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.evidence-copy dt { font-weight: 750; }
.evidence-copy dd { margin: 0; color: var(--ink-soft); }

.local-lead { max-width: 620px; margin: 32px 0 0; color: var(--ink-soft); }
.trust-panel { position: relative; padding: 42px; border-top: 5px solid var(--green); background: var(--white); box-shadow: 0 24px 70px rgba(61,80,132,.11); }
.trust-panel::after { content: ""; position: absolute; width: 72px; aspect-ratio: 1; right: 28px; top: -39px; border-radius: 52% 48% 12% 48%; background: var(--blue); rotate: 21deg; }
.trust-panel h3 { margin: 0; padding-right: 82px; font-family: serif; font-size: 1.55rem; }
.trust-panel ul { display: grid; gap: 10px; margin: 26px 0; padding: 0; list-style: none; }
.trust-panel li::before { content: "✓"; margin-right: 12px; color: var(--green); font-weight: 800; }
.status-note { margin: 30px 0 0; padding: 19px; background: var(--paper); color: var(--ink-soft); font-size: .82rem; }
.status-note span { display: inline-block; margin-right: 7px; padding: 1px 8px; background: #e6bd5b; color: #24343b; font-weight: 800; }

.company { position: relative; overflow: hidden; padding-block: clamp(115px, 11vw, 160px); background: var(--blue); color: white; }
.company::after { content: ""; position: absolute; width: 360px; aspect-ratio: 1; right: -140px; bottom: -180px; border: 64px solid rgba(74,168,149,.22); border-radius: 50%; }
.company-grid > div > p { color: rgba(255,255,255,.67); }
.company-list { margin: 0; border-top: 1px solid rgba(255,255,255,.22); }
.company-list div { display: grid; grid-template-columns: 135px 1fr; gap: 18px; padding: 19px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.company-list dt { color: #a9d9cf; font-size: .78rem; }
.company-list dd { margin: 0; }
.verification-note { margin: 60px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.64); font-size: .8rem; }

footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 54px max(24px, calc((100vw - 1200px) / 2)); background: var(--paper); color: var(--ink); }
.footer-brand { text-decoration: none; }
.footer-brand img { width: 172px; height: auto; }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: end; gap: 12px 24px; font-size: .72rem; }
.footer-meta small { color: var(--ink-soft); }

@keyframes brand-cross {
  from { translate: 125vw 0; }
  to { translate: -35vw 0; }
}
@keyframes brand-turn {
  from { rotate: var(--angle, 0deg); }
  to { rotate: calc(var(--angle, 0deg) + 1turn); }
}
@keyframes scroll-line {
  0% { transform: translateX(-100%); }
  45%, 60% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@media (max-width: 960px) {
  :root { --shell: min(100% - 44px, 760px); }
  .site-header > nav { gap: 16px; }
  .site-header > nav a { font-size: .62rem; }
  .site-header > nav span { display: none; }
  .purpose-grid, .section-heading, .local-grid, .company-grid, .evidence-grid { grid-template-columns: 1fr; gap: 40px; }
  .process-list { grid-template-columns: 1fr; }
  .process-list li { min-height: 220px; }
  .process-list h3 { margin-top: 32px; }
  .initiative-card { grid-template-columns: 1fr; }
  .initiative-visual { min-height: 430px; }
}

@media (max-width: 700px) {
  :root { --shell: min(100% - 40px, 560px); }
  .site-header { min-height: 70px; padding: 17px 20px; }
  .brand img { width: 146px; }
  .site-header > nav { display: none; }
  .mobile-nav { position: relative; display: block; }
  .mobile-nav summary { padding: 8px 0 8px 12px; cursor: pointer; list-style: none; color: var(--blue); font-size: .6rem; font-weight: 750; letter-spacing: .2em; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary::after { content: "+"; display: inline-block; margin-left: 7px; color: var(--green); font-size: .85rem; }
  .mobile-nav[open] summary::after { content: "−"; }
  .mobile-nav nav { position: absolute; top: 42px; right: 0; display: grid; width: min(78vw, 270px); padding: 18px 22px; border: 1px solid var(--line); background: rgba(252,250,241,.98); box-shadow: 0 18px 45px rgba(61,80,132,.12); }
  .mobile-nav nav a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: .76rem; font-weight: 650; }
  .mobile-nav nav a:last-child { border-bottom: 0; }
  .mobile-nav nav span { margin-right: 8px; color: var(--green); font-size: .58rem; }
  .brand-film { min-height: 950px; }
  .brand-stage { min-height: 950px; }
  .motion-ready .brand-film { height: 215svh; min-height: 1500px; }
  .motion-ready .brand-stage { min-height: 620px; }
  .shape-field { inset: -4% -18%; opacity: calc(.72 - (var(--film-progress) * .52)); }
  .hero-slogan { top: 45%; width: min(100%, 375px); transform: translate(-50%, calc(-50% - (var(--film-progress) * 70px))) scale(calc(1 - (var(--film-progress) * .045))); }
  .brand-manifesto { left: 12%; right: auto; bottom: 9%; width: 80%; font-size: clamp(.73rem, 3.25vw, .9rem); line-height: 1.45; letter-spacing: .04em; }
  .brand-manifesto p { margin-bottom: .28em; }
  .film-note { display: none; }
  .scroll-cue { right: 20px; bottom: 22px; writing-mode: vertical-rl; }
  .scroll-cue span { width: 1px; height: 68px; }
  .scroll-cue span::after { transform: translateY(-100%); animation-name: scroll-line-y; }
  .piece-01, .piece-07 { --size: 125px; }
  .piece-03, .piece-06, .piece-11 { --size: 165px; }
  .piece-02, .piece-04, .piece-05, .piece-08, .piece-09, .piece-10, .piece-12 { --size: 95px; }
  .purpose, .initiatives, .local-trust { padding-block: 100px; }
  h2 { font-size: clamp(2.35rem, 11vw, 3.6rem); }
  .section-heading { margin-bottom: 48px; }
  .approach, .evidence, .company { padding-block: 100px; }
  .initiative-visual { min-height: 320px; }
  .initiative-content { padding: 42px 24px 48px; }
  .trust-panel { padding: 32px 24px; }
  .trust-panel::after { width: 54px; right: 20px; top: -28px; }
  .company-list div, .evidence-copy dl div { grid-template-columns: 1fr; gap: 2px; }
  footer { align-items: flex-start; flex-direction: column; padding: 44px 20px; }
  .footer-meta { justify-content: start; }
  .footer-brand img { width: 158px; }
}

@keyframes scroll-line-y {
  0% { transform: translateY(-100%); }
  45%, 60% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

.reduced-motion .brand-film,
html:not(.motion-ready) .brand-film { height: auto; min-height: 0; }
.reduced-motion .brand-stage,
html:not(.motion-ready) .brand-stage { position: relative; display: grid; grid-template-rows: minmax(620px, 80svh) auto; height: auto; min-height: 0; padding-bottom: 90px; }
.reduced-motion .shape-field,
html:not(.motion-ready) .shape-field { opacity: .18; }
.reduced-motion .brand-piece,
html:not(.motion-ready) .brand-piece { animation: none; }
.reduced-motion .piece-01,
html:not(.motion-ready) .piece-01 { translate: 72vw 120px; }
.reduced-motion .piece-03,
html:not(.motion-ready) .piece-03 { translate: 10vw 420px; }
.reduced-motion .piece-05,
html:not(.motion-ready) .piece-05 { translate: 62vw 640px; }
.reduced-motion .brand-piece:not(.piece-01):not(.piece-03):not(.piece-05),
html:not(.motion-ready) .brand-piece:not(.piece-01):not(.piece-03):not(.piece-05) { display: none; }
.reduced-motion .hero-slogan,
html:not(.motion-ready) .hero-slogan { position: relative; left: auto; top: auto; align-self: center; transform: none; opacity: 1; }
.reduced-motion .brand-manifesto,
html:not(.motion-ready) .brand-manifesto { position: relative; left: auto; bottom: auto; width: min(640px, calc(100vw - 48px)); margin-inline: auto; opacity: 1; transform: none; }
.reduced-motion .film-note,
.reduced-motion .scroll-cue,
html:not(.motion-ready) .film-note,
html:not(.motion-ready) .scroll-cue { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand-piece, .scroll-cue span::after { animation: none; }
  .initiative-visual img, .process-list li::after, .site-header > nav a::after { transition: none; }
}