@charset "UTF-8";
:root {
  --paper: #f5f3ec;
  --white: #fffef9;
  --ink: #143a2c;
  --deep: #102f24;
  --muted: #626a61;
  --gold: #a78d53;
  --line: #d4d8cc;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/2.05 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: #d6c69d; color: var(--deep); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 7px; }
img { display: block; max-width: 100%; }
p { margin: 0 0 1.5rem; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; }
h2 { font-size: clamp(2rem, 3.05vw, 2.8rem); line-height: 1.8; letter-spacing: .07em; margin: 0 0 2rem; }
.skip { position: fixed; z-index: 30; top: -8rem; left: 1rem; background: var(--white); padding: .75rem 1rem; }
.skip:focus { top: 1rem; }
.header { max-width: 1680px; margin: auto; padding: 1.75rem 4.4%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.brand-symbol { display: block; width: 3.7rem; height: 3.7rem; flex-shrink: 0; background: var(--ink); mask: url('brand-emblem.webp') center / contain no-repeat; -webkit-mask: url('brand-emblem.webp') center / contain no-repeat; }
.brand-type { display: block; }
.brand-name { display: block; font: 500 1.8rem/1.45 var(--serif); letter-spacing: .14em; }
.brand-caption { font-size: .75rem; display: block; letter-spacing: .21em; line-height: 1.8; }
.navigation { display: flex; align-items: center; gap: 2.5rem; font-size: .875rem; }
.navigation > a { position: relative; }
.navigation > a:not(.nav-contact)::after { content: ""; display: block; height: 1px; background: var(--ink); width: 0; transition: width .25s; }
.navigation > a:hover::after { width: 100%; }
.nav-contact { border: 1px solid #acb7a7; padding: .7rem 1.4rem; display: flex; align-items: center; gap: 1.5rem; border-radius: 2rem; transition: background .25s, color .25s; }
.nav-contact:hover { background: var(--ink); color: var(--paper); }
.hero { position: relative; isolation: isolate; max-width: 1616px; margin: 0 2rem; min-height: 42rem; color: var(--white); display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--deep); }
.hero-image { position: absolute; inset: 0; z-index: -2; }
.hero-image img { height: 100%; width: 100%; object-fit: cover; object-position: center 54%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #081e15c9 0%, #0a221682 38%, #0a221614 75%), linear-gradient(0deg,#0c281970,transparent 45%); }
.hero-copy { padding: 5rem 6% 7.5rem; }
.eyebrow { display: block; margin: 0 0 1.2rem; font: 400 .75rem/1.8 var(--sans); letter-spacing: .17em; }
.hero .eyebrow { color: #e4dcc4; font-size: .75rem; letter-spacing: .17em; }
.hero h1 { font-size: clamp(2.9rem, 4.7vw, 5rem); letter-spacing: .09em; line-height: 1.62; margin: 2rem 0 1.8rem; text-shadow: 0 2px 20px #10231420; }
.hero h1 span { display: block; }
.hero-sub { font-size: 1rem; line-height: 2.25; letter-spacing: .08em; color: #f0eee4; margin: 0; }
.hero-side { position: absolute; top: 3rem; right: 2rem; writing-mode: vertical-rl; font-size: .75rem; letter-spacing: .19em; }
.hero-bottom { display: flex; justify-content: space-between; align-items: center; position: absolute; bottom: 2.2rem; left: 6%; right: 5%; border-top: 1px solid #e9ecdd52; padding-top: 1.2rem; font-size: .875rem; gap: 1rem; }
.scroll-link { display: inline-flex; align-items: center; gap: 1.5rem; font-size: .75rem; letter-spacing: .16em; min-height: 2.75rem; }
.scroll-link span { font-size: 1.3rem; }
.photo-note { position: absolute; bottom: .65rem; right: 1.2rem; font-size: .75rem; color: #e2e3d7; }
.hero-caption { max-width: 1550px; margin: auto; padding: 1.3rem 4.4% 0; display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; letter-spacing: .09em; color: var(--muted); }
.section { max-width: 1400px; margin: auto; padding: 8.5rem 6%; }
.section-kicker { padding-top: .4rem; font-size: .875rem; }
.section-kicker .eyebrow { margin: 0 0 .25rem; }
.about { display: grid; grid-template-columns: .9fr 2.15fr .9fr; gap: 3%; align-items: start; }
.about h2 { margin-bottom: 2.5rem; }
.about-body { max-width: 31rem; }
.about-body p { margin-bottom: 1.6rem; }
.about-body p:not(.about-closing) { color: var(--muted); }
.about-signature { padding-top: 6rem; text-align: center; }
.about-signature .brand-symbol { width: 8rem; height: 8rem; margin: 0 auto 1.2rem; background: var(--gold); }
.signature-word { font: 500 1.7rem/1.5 var(--serif); display: block; letter-spacing: .13em; }
.signature-caption { display: block; margin-top: 1rem; font-size: .75rem; letter-spacing: .08em; }
.consulting { padding-top: 0; }
.business-heading { display: flex; align-items: start; justify-content: space-between; padding: 2.5rem 0 3.7rem; border-top: 1px solid var(--line); gap: 2rem; }
.business-heading > p { font: 500 1.5rem/1.8 var(--serif); letter-spacing: .07em; margin: 0; }
.service-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8%; }
.service-aside { align-self: start; }
.service-number { display: block; font: 400 5rem/1.1 Georgia, serif; letter-spacing: -.07em; color: var(--gold); margin: 0 0 1rem; }
.service-aside .eyebrow, .rice .eyebrow, .network .eyebrow { margin: 0 0 1.7rem; }
.service-aside h2 { font-size: clamp(1.8rem, 2.5vw, 2.5rem); margin-bottom: 1.2rem; }
.service-category { font-size: .875rem; letter-spacing: .04em; margin-bottom: 2rem; }
.service-intro { margin: 0 0 2.5rem; }
.support-types { border-top: 1px solid var(--line); }
.support-types article { padding: 2rem 0; border-bottom: 1px solid var(--line); }
.support-label { display: flex; align-items: baseline; gap: 1.1rem; font-size: .875rem; margin-bottom: .9rem; }
.support-label span:first-child { font: 400 .75rem/1.8 var(--sans); letter-spacing: .13em; color: #80672f; }
.support-types h3 { margin: 0 0 .9rem; font-size: 1.55rem; letter-spacing: .045em; }
.support-types article > p:last-child { color: var(--muted); margin: 0; }
.scope { margin: 2.3rem 0 1.8rem; }
.scope h3 { font: 500 .875rem/1.8 var(--sans); margin: 0 0 1.1rem; }
.scope ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.4rem; }
.scope li { font-size: .875rem; display: flex; align-items: baseline; gap: .8rem; }
.scope li::before { content: ""; display: block; width: .45rem; height: 1px; background: var(--gold); flex-shrink: 0; transform: translateY(-.3rem); }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5rem; padding: .8rem 0; font-size: .875rem; min-height: 3.6rem; }
.text-link > span:first-child { padding: .2rem 0; background: linear-gradient(currentColor,currentColor) no-repeat left bottom / 0 1px; transition: background-size .25s; }
.text-link:hover > span:first-child { background-size: 100% 1px; }
.link-arrow { border: 1px solid #a7b2a1; border-radius: 50%; height: 2.7rem; width: 2.7rem; flex-shrink: 0; display: grid; place-items: center; font-size: 1.2rem; transition: background .25s, color .25s, transform .25s; }
.text-link:hover .link-arrow { background: var(--ink); color: var(--paper); transform: translate(2px,-2px); }
.network { background: var(--deep); color: var(--paper); overflow: hidden; }
.network-inner { max-width: 1400px; margin: auto; padding: 6.5rem 6% 2rem; display: grid; grid-template-columns: 1fr 1.6fr; column-gap: 8%; }
.network .service-number { color: #c0aa76; }
.network .eyebrow { color: #d1c39c; }
.network-main h2 { font-size: clamp(2rem, 3.1vw, 2.8rem); margin: .25rem 0 2rem; }
.network-body { max-width: 36rem; color: #d6dfd3; }
.network-body p { margin-bottom: 1.4rem; }
.network .link-arrow { border-color: #8b9e8b; }
.network .text-link:hover .link-arrow { background: var(--paper); color: var(--ink); }
.network-word { grid-column: 1/-1; font: 400 clamp(3rem, 11.9vw, 10rem)/1.15 Georgia, serif; letter-spacing: -.025em; text-align: center; color: #aabb9c36; white-space: nowrap; margin: 4rem 0 0; }
.rice { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10%; align-items: center; padding-top: 9rem; padding-bottom: 9rem; }
.rice-photo { margin: 0; position: relative; align-self: stretch; min-height: 34rem; }
.rice-photo img { width: 100%; height: calc(100% - 3rem); object-fit: cover; object-position: 65% center; }
.rice-photo figcaption { font-size: .75rem; letter-spacing: .06em; padding: .9rem 0; }
.rice h2 { font-size: clamp(2rem, 3vw, 2.7rem); margin-bottom: 1rem; }
.rice-copy > p:not(.eyebrow):not(.service-category) { color: var(--muted); }
.rice .text-link { gap: 1.5rem; }
.company { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.6fr; gap: 8%; padding-top: 5.5rem; padding-bottom: 7rem; }
.company h2 { font-size: 2rem; }
.company dl { margin: 0; }
.company dl > div { display: grid; grid-template-columns: 6rem minmax(0,1fr); gap: 2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.company dl > div:first-child { padding-top: 0; }
.company dt { font-size: .875rem; color: var(--muted); }
.company dd { margin: 0; overflow-wrap: anywhere; }
.company a:hover { text-decoration: underline; text-underline-offset: .2em; }
.contact { background: #e7e9df; }
.contact-inner { max-width: 1400px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10%; padding: 6.5rem 6%; }
.contact h2 { margin-bottom: 1.5rem; }
.contact p:last-child { margin-bottom: 0; color: var(--muted); }
.email-button { border-bottom: 1px solid var(--ink); padding: 1rem 0 1.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--serif); font-size: 1.65rem; transition: color .2s; }
.email-button:hover { color: #8b743c; }
.email-button small { font: 400 .875rem/1.8 var(--sans); display: block; margin-top: .65rem; overflow-wrap: anywhere; }
.email-button > span:last-child { font: 300 2.5rem/1 var(--sans); }
.telephone { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; flex-wrap: wrap; }
.telephone > span:first-child { font-size: .875rem; }
.telephone > span:last-child { font: 400 1.9rem/1.4 Georgia, serif; letter-spacing: .03em; }
footer { max-width: 1680px; margin: auto; padding: 2.5rem 4.4%; display: flex; gap: 2rem; align-items: center; }
footer p { margin: 0 0 0 auto; font-size: .75rem; color: var(--muted); letter-spacing: .03em; }
footer .brand-symbol { width: 2.8rem; height: 2.8rem; }
footer .brand-name { font-size: 1.5rem; }
footer .brand-caption { letter-spacing: .07em; }
.back-top { height: 3rem; width: 3rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font-size: 1.25rem; }
@media (min-width: 1680px) { .hero { margin-left: auto; margin-right: auto; } }
@media (max-width: 1100px) {
  .navigation { gap: 1.7rem; }
  .about { grid-template-columns: .7fr 1.65fr .75fr; gap: 4%; }
  .about-signature .brand-symbol { width: 6rem; height: 6rem; }
  .signature-word { font-size: 1.3rem; }
  .signature-caption { writing-mode: vertical-rl; margin: 1.3rem auto 0; }
  .service-layout, .company, .network-inner { column-gap: 6%; grid-template-columns: 1fr 1.55fr; }
  .rice { gap: 7%; }
  .rice-photo { min-height: 33rem; }
  .email-button { font-size: 1.4rem; }
}
@media (max-width: 800px) {
  .header { padding: 1.3rem 5%; }
  .navigation > a:not(.nav-contact) { display: none; }
  .nav-contact { padding: .5rem 1rem; gap: 1rem; }
  .hero { margin: 0 1rem; min-height: 38rem; }
  .hero h1 { font-size: clamp(2.55rem, 6.2vw, 3.2rem); }
  .hero-copy { padding-left: 7%; }
  .hero-side { right: 1.3rem; }
  .hero-caption { padding: 1rem 5% 0; }
  .hero-caption span:last-child { letter-spacing: .015em; font-size: .75rem; }
  .section { padding: 5.5rem 7%; }
  .about { grid-template-columns: 1fr .35fr; gap: 1rem 7%; }
  .about .section-kicker { grid-column: 1/-1; margin-bottom: 1.5rem; }
  .about-main h2 { font-size: 2rem; }
  .about-signature { padding-top: 1rem; }
  .about-signature .brand-symbol { width: 5rem; height: 5rem; }
  .consulting { padding-top: 0; }
  .service-layout { grid-template-columns: 1fr; gap: 2rem; }
  .service-aside { position: relative; padding-left: 5.5rem; }
  .service-aside .service-number { position: absolute; top: 0; left: 0; font-size: 3.5rem; }
  .service-aside h2 { font-size: 2rem; margin-bottom: .7rem; }
  .service-aside .eyebrow { margin-bottom: 1rem; }
  .service-category { margin-bottom: 0; }
  .network-inner { grid-template-columns: 1fr; padding: 4rem 7% 2rem; }
  .network-aside { position: relative; padding-left: 5.5rem; margin-bottom: 2rem; }
  .network-aside .service-number { position: absolute; top: 0; left: 0; font-size: 3.5rem; }
  .network-aside .eyebrow { margin-bottom: .4rem; }
  .network-main h2 { font-size: 2rem; }
  .network-word { font-size: 12vw; margin-top: 3rem; }
  .rice { grid-template-columns: .9fr 1fr; gap: 6%; align-items: start; }
  .rice h2 { font-size: 1.8rem; }
  .rice .service-category { margin-bottom: 1.5rem; }
  .rice-photo { min-height: 30rem; }
  .rice .service-number { font-size: 3.5rem; }
  .rice .text-link { align-items: center; gap: .75rem; }
  .company { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 4rem; }
  .company dl > div { grid-template-columns: 7rem minmax(0,1fr); }
  .contact-inner { padding: 4rem 7%; gap: 5%; }
  .contact h2 { font-size: 1.8rem; }
  .email-button { font-size: 1.1rem; }
  .telephone > span:last-child { font-size: 1.6rem; }
}
@media (max-width: 540px) {
  body { line-height: 2; }
  .header { gap: 1rem; padding: 1rem 5%; }
  .brand { gap: .55rem; }
  .brand-symbol { width: 2.7rem; height: 2.7rem; }
  .brand-name { font-size: 1.45rem; }
  .brand-caption { font-size: .75rem; letter-spacing: .12em; }
  .nav-contact { font-size: .875rem; padding: .5rem .8rem; gap: .7rem; }
  .hero { min-height: 37.5rem; margin: 0 .75rem; }
  .hero-image img { object-position: 61% center; }
  .hero::before { background: linear-gradient(90deg,#092415ab,#09241544), linear-gradient(0deg,#09241570,transparent 70%); }
  .hero-copy { padding: 5rem 6% 7rem; }
  .hero .eyebrow { max-width: 14rem; font-size: .75rem; line-height: 2; letter-spacing: .12em; }
  .hero h1 { font-size: clamp(1.875rem, 7.5vw, 2.75rem); letter-spacing: .065em; line-height: 1.8; margin: 1.5rem 0; }
  .hero-sub { font-size: 1rem; letter-spacing: .02em; }
  .hero-side { top: 1.6rem; right: 1rem; font-size: .75rem; }
  .hero-bottom { bottom: 2rem; left: 6%; right: 6%; padding-top: .7rem; align-items: start; }
  .hero-bottom > span { max-width: 13rem; font-size: .75rem; line-height: 1.9; }
  .scroll-link { gap: .65rem; min-height: 2.5rem; }
  .hero-caption { padding: 1rem 6% 0; }
  .hero-caption span:last-child { display: none; }
  .section { padding: 4.5rem 7%; }
  .about { display: block; }
  .about .section-kicker { margin-bottom: 2.2rem; }
  .about h2 { font-size: 2rem; margin-bottom: 1.8rem; }
  .about-signature { padding: 1rem 0 0; display: grid; grid-template-columns: 4rem auto; grid-template-rows: auto auto; text-align: left; column-gap: 1rem; justify-content: start; }
  .about-signature .brand-symbol { width: 4rem; height: 4rem; grid-row: 1/3; margin: 0; }
  .signature-word { font-size: 1.35rem; align-self: end; }
  .signature-caption { writing-mode: horizontal-tb; margin: .2rem 0 0; }
  .consulting { padding-top: 0; }
  .business-heading { padding: 1.8rem 0 2.6rem; gap: 1.2rem; }
  .business-heading > p { font-size: 1.125rem; }
  .section-kicker { font-size: .875rem; }
  .service-aside { padding-left: 4.3rem; }
  .service-number, .service-aside .service-number { font-size: 3.25rem; }
  .service-aside h2 { font-size: 1.75rem; }
  .service-content { padding-top: .3rem; }
  .support-types h3 { font-size: 1.45rem; }
  .scope ul { grid-template-columns: 1fr; gap: .75rem; }
  .text-link { gap: 1.25rem; }
  .network-inner { padding: 3.5rem 7% 1.8rem; }
  .network-aside { padding-left: 4.3rem; }
  .network-aside .service-number { font-size: 3.25rem; }
  .network-main h2 { font-size: 1.8rem; }
  .network .text-link { gap: 1rem; }
  .network-word { margin-top: 2.5rem; font-size: 12vw; }
  .rice { display: flex; flex-direction: column; gap: 2.5rem; }
  .rice-photo { min-height: 0; width: 100%; }
  .rice-photo img { height: 23rem; object-position: 65% center; }
  .rice-photo figcaption { padding-bottom: 0; }
  .rice-copy { width: 100%; }
  .rice .service-number { font-size: 3.25rem; }
  .rice .eyebrow { margin-bottom: 1rem; }
  .rice h2 { font-size: 2rem; }
  .rice .service-category { margin-bottom: 1.5rem; }
  .company { padding-top: 3.5rem; }
  .company h2 { margin-bottom: 1rem; }
  .company dl > div { grid-template-columns: 4.5rem minmax(0,1fr); gap: 1rem; }
  .contact-inner { display: block; padding: 3.5rem 7%; }
  .contact h2 { font-size: 2rem; }
  .contact-options { margin-top: 2.5rem; }
  .email-button { font-size: 1.35rem; }
  .telephone > span:last-child { font-size: 1.6rem; }
  footer { flex-wrap: wrap; gap: 1.5rem; padding: 2rem 7%; }
  footer .brand { flex: 1; }
  footer p { order: 3; width: 100%; margin: 0; }
  .back-top { width: 2.75rem; height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

@media (max-width: 360px) { .header .brand-symbol { width: 2.25rem; height: 2.25rem; } .header .brand-name { font-size: 1.25rem; } .header { gap: .75rem; } }
/* Keep the rice page reachable from compact navigation. */
@media(max-width:800px){.navigation>.rice-nav{display:block;font-size:.875rem}.navigation{gap:.9rem}}
@media(max-width:420px){.header{flex-wrap:wrap}.navigation{margin-left:auto}.navigation>.rice-nav{padding:.4rem 0}}

/* Lead the homepage with Tsumugi rice and its product destination. */
.hero--rice .hero-copy{padding-bottom:10rem}
.hero-purchase{display:inline-block;margin-top:1.8rem;padding:.95rem 1.5rem;background:var(--paper);color:var(--ink);border:1px solid var(--paper);font-size:1rem;line-height:1.7;transition:background .2s,color .2s}
.hero-purchase:hover{background:var(--ink);color:var(--paper)}
.hero--rice .hero-bottom{align-items:center}
.hero--rice .hero-bottom small{font-size:.75rem}
@media(max-width:540px){.hero--rice .hero-copy{padding-top:4rem;padding-bottom:10rem}.hero-purchase{font-size:.875rem;padding:.85rem 1.1rem;margin-top:1.5rem}.hero--rice .hero-bottom>span{max-width:15rem;font-size:.75rem}.hero--rice .hero-bottom .scroll-link{font-size:.75rem;letter-spacing:0}}