/*
Theme Name: NIWAMA
Theme URI: https://niwama.com/
Author: STUDIO iNTo
Description: NIWAMA by MASAKI-KOGYO のサイト（静的版v7から変換）
Version: 1.0.0
Requires PHP: 7.4
Text Domain: niwama
*/
@charset "UTF-8";

:root {
  --ink: #171715;
  --muted: #6d6b65;
  --sand: #eae5da;
  --paper: #f5f4f0;
  --rule: #d4d1c8;
  --line: #58bf64;
  --gutter: 2.5vw;
  --section-space: clamp(80px, 8.33vw, 160px);
  --row-gap: clamp(40px, 4.44vw, 80px);
  --body-size: clamp(14px, 1.38vw, 22px);
  --heading-size: clamp(28px, 2.78vw, 48px);
  --texture: url('assets/wall.jpg');
  --sans: 'Noto Sans JP', sans-serif;
  --latin: 'Montserrat', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--ink); background: #fff; font-family: var(--sans); font-weight: 500; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3, h4, dl, dd { margin: 0; }
h2, h3 { font-weight: 800; letter-spacing: .075em; }
ul, ol { padding: 0; margin: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #857343; outline-offset: 6px; }
input:focus-visible, textarea:focus-visible { outline: 2px solid #857343; outline-offset: 2px; }
[hidden] { display: none !important; }
.icon-definitions, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 100; left: 20px; top: -80px; background: #fff; padding: 16px 24px; }
.skip:focus { top: 12px; }
.wrap { width: calc(100% - var(--gutter) * 2); margin-inline: auto; }
.section-space { padding-block: var(--section-space); }
.note { font-size: 12px; line-height: 1.8; color: var(--muted); }
.nowrap { white-space: nowrap; }
.eyebrow { font-family: var(--latin); font-size: 13px; font-weight: 500; letter-spacing: .14em; }
.arrow { display: inline-block; width: 25px; height: 12px; position: relative; flex: 0 0 25px; transition: transform .25s ease; }
.arrow::before { content: ''; position: absolute; top: 6px; left: 0; width: 100%; border-top: 1px solid currentColor; }
.arrow::after { content: ''; position: absolute; top: 2px; right: 1px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.detail-link, .text-link { display: flex; align-items: center; justify-content: space-between; gap: 24px; text-align: left; padding: 18px 0; border-bottom: 1px solid var(--ink); font-size: clamp(14px, 1.4vw, 21px); font-weight: 500; letter-spacing: .07em; }
.detail-link small { display: block; font-family: var(--sans); font-size: 11px; margin-top: 4px; }
@media (hover: hover) {
  a.detail-link:hover .arrow, a.text-link:hover .arrow, .contact-actions a:hover .arrow { transform: translateX(5px); }
  .desktop-nav a:hover, .desktop-nav button:hover, .footer nav a:hover, .footer nav button:hover { opacity: .55; }
}

/* The actual mortar image is clipped to the letters; opacity belongs to the stack. */
.texture-text, .type-pattern span, .texture-stack span {
  color: #d9d8d4;
  background-image: var(--texture);
  background-size: 880px auto;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.texture-stack { font-family: var(--latin); font-weight: 700; letter-spacing: .005em; line-height: .92; }
.texture-stack span { display: block; }
.texture-stack span:nth-child(2) { opacity: .55; }
.texture-stack span:nth-child(3) { opacity: .18; }
.plaster { background: var(--texture) center / cover; }

/* Existing Figma: opening and concept */
.opening { height: 56.25vw; }
.header { height: 4.9vw; min-height: 64px; display: flex; align-items: center; position: relative; background: #fff; z-index: 20; }
.brand { display: block; width: 11.6vw; margin-left: var(--gutter); }
.brand img { width: 100%; }
.desktop-nav { display: flex; align-items: center; gap: 2.6vw; margin-left: auto; padding-inline: 2.4vw 1.6vw; height: 100%; }
.desktop-nav a, .desktop-nav button, .desktop-nav .pending-link { text-align: center; transition: opacity .2s; line-height: 1.25; }
.desktop-nav span { display: block; font-family: var(--latin); font-size: 1.04vw; font-weight: 500; letter-spacing: .08em; }
.desktop-nav small { font-size: .48vw; font-weight: 500; letter-spacing: .1em; display: block; margin-top: 2px; }
.header-partner { background: var(--sand); height: 100%; width: 13.3vw; display: grid; place-items: center; font-size: 1.08vw; font-weight: 700; letter-spacing: .03em; }
.menu-toggle, .mobile-menu { display: none; }
.hero { height: calc(100% - max(4.9vw, 64px)); position: relative; }
.hero-side { position: absolute; top: 9px; left: 8px; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--latin); font-size: .87vw; letter-spacing: .24em; color: #d4d4d0; }
.hero-photo { position: absolute; left: 20%; right: 0; inset-block: 0; overflow: hidden; }
.hero-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-note { position: absolute; bottom: 9px; right: 14px; color: #fff; font-size: 10px; text-shadow: 0 1px 4px #333; }
.hero-copy { position: absolute; left: 0; bottom: 1vw; z-index: 2; }
.hero-copy h1 { font-size: 3vw; font-weight: 800; letter-spacing: .065em; line-height: 1.6; }
.hero-copy h1 b { font-weight: inherit; }
.hero-copy h1 span { display: table; padding: .9vw .8vw .9vw var(--gutter); background: var(--texture) center / 1200px; margin-bottom: .7vw; }
.hero-copy p { display: table; background: var(--texture) center / 1200px; padding: .38vw 1.4vw .38vw var(--gutter); font-size: 1.64vw; font-weight: 800; line-height: 1.4; letter-spacing: .06em; }
.hero-contact { position: absolute; right: 0; top: 28.5%; z-index: 3; width: 4.15vw; }
.hero-contact a, .hero-contact button, .hero-contact .pending-link { display: flex; flex-direction: column; align-items: center; gap: .6vw; width: 100%; padding: 1vw .4vw; }
.hero-contact svg { width: 2.4vw; height: 2.5vw; }
.hero-contact span { writing-mode: vertical-rl; text-orientation: upright; font-size: 1.1vw; font-weight: 700; letter-spacing: .12em; }
.rail-line { background: var(--line); color: #fff; }
.rail-mail { background: #f2f1ec; }
.concept { padding: 6.8vw 20px 10vw; text-align: center; }
.concept h2 { font-size: 2.12vw; letter-spacing: .28em; }
.concept-mark { margin: 1.2vw 0 2.8vw; font-size: 6.5vw; font-weight: 800; letter-spacing: .08em; line-height: 1.3; }
.concept-copy { font-size: 1.64vw; font-weight: 800; letter-spacing: .07em; line-height: 1.55; }
.concept-logo { width: 14vw; margin: 3.4vw auto 0; }

/* Existing Figma: works */
.works-heading { height: 17vw; position: relative; overflow: hidden; }
.type-pattern { position: absolute; top: 0; left: -2.5vw; font-family: var(--latin); font-size: 6.45vw; font-weight: 700; line-height: .85; white-space: nowrap; letter-spacing: 0; pointer-events: none; }
.type-pattern span { display: block; }
.type-pattern span:nth-child(2) { opacity: .5; }
.type-pattern span:nth-child(3) { opacity: .12; }
.works-heading h2 { position: absolute; left: var(--gutter); bottom: 4.6vw; font-size: var(--heading-size); }
.works-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 8 / 3; }
.photo-tile { position: relative; overflow: hidden; display: block; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.works-main { grid-row: span 2; }
.photo-tag { position: absolute; bottom: 7px; right: 9px; color: #fff; text-shadow: 0 1px 5px #000; text-align: right; font-size: clamp(8px, .66vw, 12px); line-height: 1.6; letter-spacing: 0; pointer-events: none; }
.works-bottom { min-height: 20.7vw; display: grid; grid-template-columns: 1fr 1fr; padding-top: 1vw; }
.works-bottom-type { font-size: 6.45vw; align-self: start; }
.works-bottom .detail-link { font-family: var(--latin); align-self: start; margin: 1vw var(--gutter) 0 0; padding-block: 1.35vw; }


/* Existing Figma: material and patent badge */
.material { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }
.material-photo { min-height: 100%; }
.material-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.material-copy { padding: 4.2vw var(--gutter) 3.4vw 6.2vw; }
.material-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: .5vw; }
.material-heading h2 { font-size: 2.5vw; line-height: 1.4; letter-spacing: .075em; }
.patent { width: 10.3vw; height: auto; flex: 0 0 10.3vw; }
.material-body { font-size: clamp(12px, 1.12vw, 18px); font-weight: 700; letter-spacing: .05em; line-height: 1.9; }
.material-body p + p { margin-top: 2vw; }
.material-copy .detail-link { width: 100%; margin-top: 2.8vw; padding-bottom: 1.5vw; }

/* Existing Figma: three technical features */
.section-heading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.section-heading h2 { font-size: var(--heading-size); line-height: 1.45; }
.section-heading p { font-size: clamp(13px, 1.1vw, 18px); letter-spacing: .05em; line-height: 1.85; margin-top: 1vw; }
.technology-heading { min-height: 18.5vw; padding-block: 4vw 6vw; }
.technology-heading > div:first-child { position: relative; z-index: 1; }
.heading-type { position: absolute; right: calc(-1 * var(--gutter)); top: 0; font-size: 6.45vw; }
.technology-list { display: grid; gap: var(--row-gap); }
.technology-item { display: grid; grid-template-columns: 41% 59%; position: relative; isolation: isolate; }
.technology-item::before { content: ''; position: absolute; left: 7%; right: 0; top: 6.15vw; bottom: 0; background: var(--paper); z-index: -1; }
.technology-item figure { align-self: start; }
.technology-item figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.technology-copy { padding: 3vw 4.4vw 3.7vw 2.5vw; }
.tech-number { display: block; font-family: var(--latin); color: #dededb; font-size: 6.4vw; font-weight: 400; line-height: 1; margin-bottom: 1.6vw; }
.technology-copy h3 { font-size: clamp(21px, 2.15vw, 36px); line-height: 1.35; margin-bottom: 1.6vw; letter-spacing: .075em; }
.technology-copy p { font-size: var(--body-size); font-weight: 600; line-height: 1.58; letter-spacing: .055em; }
.single-pattern { width: 100%; overflow: hidden; margin-top: 1.8vw; line-height: 1; font-family: var(--latin); font-size: 6.45vw; font-weight: 700; white-space: nowrap; }
.single-pattern span { display: block; margin-left: -12vw; }

/* Existing Figma: six construction diagrams */
.construction { padding-top: 3.4vw; padding-bottom: var(--section-space); }
.construction-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 4vw; row-gap: clamp(40px, 5vw, 80px); margin-top: 3.5vw; }
.construction-grid > figure { border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
.diagram-image { width: 100%; aspect-ratio: 1.6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.diagram-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.construction-grid figcaption { display: flex; align-items: baseline; gap: 18px; padding-top: 8px; }
.construction-grid figcaption > span { font-family: var(--latin); font-size: clamp(22px, 2.3vw, 38px); font-weight: 500; line-height: 1.1; }
.construction-grid h3 { font-size: clamp(14px, 1.25vw, 20px); font-weight: 700; letter-spacing: .025em; }
.construction-bottom { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 4.5vw; }
.construction-bottom .detail-link { width: 48%; }

/* Continuation: specifications → professional visitors → company → news → contact */
.product { background: var(--paper); }
.product .section-heading { margin-bottom: 4vw; }
.section-word { font-family: var(--latin); font-size: 7.8vw; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.product-layout { display: grid; grid-template-columns: 48% 1fr; gap: 5vw; align-items: start; }
.product-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.product-info dl > div { display: grid; grid-template-columns: 34% 1fr; gap: 15px; padding: 1.6vw 0; border-bottom: 1px solid var(--rule); }
.product-info dl > div:first-child { padding-top: 0; }
.product-info dt { font-size: clamp(14px, 1.35vw, 22px); font-weight: 700; line-height: 1.5; }
.product-info dt > span { display: block; margin-bottom: .5vw; font-family: var(--latin); font-size: 12px; font-weight: 400; color: var(--muted); }
.product-info dd { font-size: clamp(14px, 1.17vw, 19px); line-height: 1.8; letter-spacing: .025em; }
.product-info dd b { font-family: var(--latin); font-size: 1.5em; font-weight: 500; white-space: nowrap; }
.product-info dd b span { font-size: .6em; margin-left: 3px; }
.product-info small { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.product-info .detail-link { width: 100%; margin-top: 2vw; }
.partner-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 4.2vw; }
.partner-heading .eyebrow { margin-bottom: 15px; }
.partner-heading h2 { font-size: var(--heading-size); }
.partner-heading > p { font-size: clamp(22px, 2.1vw, 36px); font-weight: 700; line-height: 1.6; letter-spacing: .12em; }
.partner-options { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5vw; }
.partner-options article { position: relative; display: flex; gap: 2.6vw; padding: 3.6vw 3vw; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.partner-options article.option-primary { background: var(--paper); border-color: transparent; }
.option-letter { font-family: var(--latin); font-size: clamp(64px, 6.5vw, 110px); font-weight: 400; line-height: .95; color: #c8c4b8; }
.partner-options article > div { flex: 1; display: flex; flex-direction: column; }
.partner-options h3 { font-size: clamp(22px, 2vw, 34px); margin-bottom: 1.5vw; }
.partner-options p { flex: 1; max-width: 31em; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.9; letter-spacing: .05em; }
.partner-options .text-link { margin-top: 2vw; font-size: clamp(13px, 1.1vw, 18px); width: 100%; }
.partner-contact { display: flex; align-items: center; justify-content: space-between; gap: 35px; margin-top: 3vw; }
.partner-form { display: flex; align-items: center; justify-content: space-between; flex: 0 0 44%; padding: 25px 26px; background: var(--sand); font-size: clamp(15px, 1.2vw, 20px); letter-spacing: .05em; }
.partner-contact > a:not(.partner-line) { font-family: var(--latin); font-size: clamp(17px, 1.7vw, 28px); letter-spacing: .04em; }
.partner-contact small { display: block; font-family: var(--sans); font-size: 10px; margin-top: 5px; }
.partner-line { font-size: 13px; border-bottom: 1px solid var(--rule); padding-block: 12px; white-space: nowrap; }
.company { border-block: 1px solid var(--rule); }
.company-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.big-label { font-family: var(--latin); font-size: 6.45vw; font-weight: 700; line-height: 1; margin-bottom: 1.3vw; letter-spacing: -.02em; }
.company h2, .news h2 { font-size: var(--heading-size); }
.company-sign { margin-top: 4vw; }
.company-sign img { width: 17vw; }
.company-sign span { display: block; font-family: var(--latin); font-size: 10px; letter-spacing: .12em; margin-top: 12px; }
.company-intro { margin-top: 24px; font-size: clamp(15px, 1.3vw, 20px); line-height: 1.9; letter-spacing: .06em; }
.company-info { padding-top: 1vw; }
.company-info h3 { font-size: clamp(20px, 1.8vw, 28px); margin-bottom: 30px; }
.company-info dl > div { display: grid; grid-template-columns: 95px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.8; }
.company-info dt { font-size: 12px; }
.company-info small { display: block; font-size: 11px; margin-top: 7px; }
.showroom-note { margin-top: 10px; font-size: 12px; color: var(--muted); }
.company-info .text-link { font-size: 14px; }
.news { display: grid; grid-template-columns: 37% 1fr; align-items: center; gap: 5vw; }
.news-empty { border-block: 1px solid var(--rule); padding-block: 33px; }
.news-empty .eyebrow { font-size: 11px; color: var(--muted); }
.news-empty p { margin-top: 15px; font-size: 15px; letter-spacing: .04em; }
.contact { position: relative; overflow: hidden; background: var(--paper); padding: 3vw 0 var(--section-space); }
.contact-word { font-family: var(--latin); font-size: 17.3vw; font-weight: 700; line-height: .95; letter-spacing: -.035em; text-align: center; white-space: nowrap; }
.contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; margin-top: 3vw; }
.contact-heading { padding-top: 1vw; }
.contact-heading h2 { font-size: clamp(26px, 2.65vw, 45px); line-height: 1.65; margin-top: 20px; }
.contact-heading > p:last-child { margin-top: 24px; font-size: clamp(14px, 1.25vw, 20px); line-height: 1.9; }
.contact-actions { display: grid; align-content: start; }
.contact-line, .contact-mail { display: flex; align-items: center; gap: 20px; padding: 28px 25px; font-size: clamp(15px, 1.5vw, 24px); letter-spacing: .03em; text-align: left; }
.contact-line { background: var(--line); color: #fff; }
.contact-line svg { width: 42px; height: 42px; flex: 0 0 42px; }
.contact-line small { display: block; font-size: 11px; margin-top: 8px; font-weight: 400; }
.contact-actions .arrow { margin-left: auto; }
.contact-mail { font-size: clamp(14px, 1.2vw, 19px); border-bottom: 1px solid var(--rule); }
.contact-mail svg { width: 27px; height: 24px; flex: 0 0 27px; }
.contact-phone { font-size: 11px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 22px; }
.contact-phone b { font-family: var(--latin); font-size: 16px; font-weight: 500; }
.contact-phone span { color: var(--muted); }
.footer { padding: 4.5vw var(--gutter) 25px; }
.footer-top { display: flex; align-items: flex-start; gap: 6vw; }
.footer-brand { width: 16vw; flex: 0 0 16vw; }
.footer-brand span { display: block; font-family: var(--latin); font-size: 9px; letter-spacing: .12em; margin-top: 12px; }
.footer nav { display: flex; flex: 1; flex-wrap: wrap; gap: 20px 28px; padding-top: 5px; }
.footer nav a, .footer nav button, .footer nav .pending-link { font-size: 12px; text-align: left; }
.back-top { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--rule); flex: 0 0 46px; font-size: 24px; }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--rule); font-family: var(--latin); font-size: 9px; letter-spacing: .04em; color: var(--muted); }


@media (max-width: 1000px) {
  .header { min-height: 64px; }
  .brand { width: 135px; }
  .desktop-nav { gap: 17px; padding-inline: 22px 18px; }
  .desktop-nav span { font-size: 10px; }
  .desktop-nav small { font-size: 6px; }
  .header-partner { width: 145px; font-size: 11px; }
  .material-copy { padding-left: 4vw; }
  .material-body { font-size: 12px; }
  .material-body .desktop-break { display: none; }
  .material-heading { margin-bottom: 24px; }
  .technology-heading { min-height: 220px; }
  .technology-heading p { max-width: 62%; }
  .technology-heading p .desktop-break { display: none; }
  .technology-copy { padding-right: 3vw; }
  .technology-copy p { line-height: 1.7; }
  .technology-copy .desktop-break { display: none; }
  .partner-options article { gap: 20px; }
  .partner-contact { gap: 24px; }
  .company-info dl > div { grid-template-columns: 70px 1fr; gap: 12px; }
}

@media (max-width: 760px) {
  :root { --gutter: 24px; --section-space: 72px; --row-gap: 40px; --heading-size: 26px; --body-size: 15px; }
  html { scroll-padding-top: 20px; }
  .desktop-break { display: none; }
  .opening { height: auto; }
  .header { height: 72px; min-height: 0; }
  .brand { width: 133px; margin-left: 20px; flex: 0 0 133px; }
  .desktop-nav { display: none; }
  .header-partner { margin-left: auto; width: 124px; font-size: 10px; letter-spacing: 0; height: 72px; }
  .menu-toggle { display: flex; width: 58px; height: 72px; flex: 0 0 58px; flex-direction: column; justify-content: center; gap: 7px; align-items: center; }
  .menu-toggle span { width: 21px; height: 1px; background: var(--ink); transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-menu { display: flex; position: absolute; z-index: 19; top: 72px; inset-inline: 0; height: calc(100dvh - 72px); overflow-y: auto; background: #fff; padding: 25px; flex-direction: column; }
  .mobile-menu a, .mobile-menu button, .mobile-menu .pending-link { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--rule); font-size: 16px; text-align: left; }
  .mobile-menu span { font-family: var(--latin); font-size: 10px; color: var(--muted); }
  .hero { height: min(730px, calc(100svh - 72px)); min-height: 530px; max-height: 780px; }
  .hero-photo { left: 12%; right: 0; bottom: 50px; }
  .hero-photo > img { object-position: 56% center; }
  .hero-side { top: 12px; left: 12px; font-size: 9px; letter-spacing: .2em; }
  .hero-note { bottom: 10px; right: 10px; font-size: 9px; }
  .hero-copy { bottom: 92px; width: calc(100% - 25px); }
  .hero-copy h1 { font-size: clamp(25px, 6vw, 43px); line-height: 1.7; letter-spacing: .02em; }
  .hero-copy h1 span { padding: 7px 14px 7px 20px; margin-bottom: 6px; max-width: 100%; }
  .hero-copy h1 span:last-child { max-width: 94%; }
  .hero-copy h1 b { display: inline-block; }
  .hero-copy p { padding: 8px 13px 8px 20px; font-size: 13px; letter-spacing: .03em; }
  .hero-contact { top: auto; bottom: 0; width: 100%; height: 50px; display: grid; grid-template-columns: 1fr 1fr; }
  .hero-contact a, .hero-contact button, .hero-contact .pending-link { padding: 0 15px; flex-direction: row; justify-content: center; gap: 11px; }
  .hero-contact svg { width: 25px; height: 25px; }
  .hero-contact span { writing-mode: horizontal-tb; font-size: 12px; letter-spacing: .04em; }
  .concept { padding: 75px 20px 80px; }
  .concept h2 { font-size: 17px; letter-spacing: .18em; }
  .concept-mark { font-size: 66px; margin: 12px 0 27px; }
  .concept-copy { font-size: 14px; line-height: 1.85; letter-spacing: .015em; }
  .concept-logo { width: 152px; margin-top: 32px; }
  .works-heading { height: 128px; }
  .type-pattern { top: 0; left: -4vw; font-size: 48px; line-height: .87; }
  .works-heading h2 { bottom: 27px; }
  .works-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; aspect-ratio: auto; }
  .works-main { grid-column: span 2; grid-row: auto; aspect-ratio: 4/3; }
  .photo-tile:not(.works-main) { aspect-ratio: 4/3; }
  .photo-tag { font-size: 8px; bottom: 5px; right: 5px; }
  .works-bottom { min-height: 145px; padding-top: 8px; grid-template-columns: 40% 60%; }
  .works-bottom-type { font-size: 36px; }
  .works-bottom .detail-link { margin: 8px 24px 0 0; padding-block: 12px; font-size: 12px; gap: 10px; }
  .material { grid-template-columns: 1fr; }
  .material-photo { min-height: 0; }
  .material-photo img { aspect-ratio: 4/3; height: auto; }
  .material-copy { padding: 35px 24px 42px; }
  .material-heading { gap: 16px; margin-bottom: 24px; align-items: center; }
  .material-heading h2 { font-size: 27px; line-height: 1.4; letter-spacing: .045em; }
  .patent { width: 84px; flex-basis: 84px; }
  .material-body { font-size: 14px; line-height: 1.9; font-weight: 600; letter-spacing: .03em; }
  .material-body p + p { margin-top: 20px; }
  .material-copy .detail-link { margin-top: 25px; padding-block: 14px; font-size: 13px; }
  .technology-heading { padding-block: 68px 38px; min-height: 0; }
  .technology-heading h2 { font-size: 24px; }
  .technology-heading p { font-size: 12px; margin-top: 15px; max-width: 100%; line-height: 1.85; }
  .heading-type { font-size: 43px; right: calc(-1 * var(--gutter)); top: 3px; opacity: .5; line-height: .84; }
  .technology-list { gap: 40px; }
  .technology-item { grid-template-columns: 1fr; }
  .technology-item::before { top: 115px; left: 16px; }
  .technology-item figure { width: calc(100% - 16px); }
  .technology-copy { padding: 23px 18px 30px 35px; }
  .tech-number { font-size: 55px; line-height: .95; margin-bottom: 14px; }
  .technology-copy h3 { font-size: 21px; line-height: 1.5; letter-spacing: .025em; margin-bottom: 16px; }
  .technology-copy p { font-size: 14px; line-height: 1.9; letter-spacing: .025em; font-weight: 500; }
  .single-pattern { font-size: 48px; margin-top: 25px; }
  .single-pattern span { margin-left: -20px; }
  .construction { padding-top: 30px; }
  .construction-grid { grid-template-columns: 1fr 1fr; gap: 40px 18px; margin-top: 30px; }
  .construction-grid > figure { padding-bottom: 14px; }
  .diagram-image { aspect-ratio: 1.12; }
  .construction-grid figcaption { gap: 8px; align-items: start; padding-top: 6px; }
  .construction-grid figcaption > span { font-size: 20px; line-height: 1.4; }
  .construction-grid h3 { font-size: 12px; line-height: 1.65; letter-spacing: 0; }
  .construction-bottom { display: block; margin-top: 28px; }
  .construction-bottom .note { font-size: 10px; }
  .construction-bottom .detail-link { width: 100%; margin-top: 16px; }
  .section-heading { gap: 18px; }
  .section-word { font-size: 10vw; }
  .product .section-heading { margin-bottom: 30px; }
  .product-layout { grid-template-columns: 1fr; gap: 28px; }
  .product-info dl > div { padding: 22px 0; grid-template-columns: 33% 1fr; gap: 15px; }
  .product-info dt { font-size: 14px; }
  .product-info dt > span { margin-bottom: 6px; }
  .product-info dd { font-size: 13px; }
  .product-info dd b { font-size: 20px; }
  .product-info .detail-link { font-size: 13px; margin-top: 18px; }
  .partner-heading { display: block; margin-bottom: 30px; }
  .partner-heading .eyebrow { font-size: 11px; margin-bottom: 12px; }
  .partner-heading h2 { font-size: 25px; letter-spacing: .035em; }
  .partner-heading > p { font-size: 18px; margin-top: 25px; line-height: 1.75; }
  .partner-options { grid-template-columns: 1fr; gap: 20px; }
  .partner-options article { padding: 30px 20px; gap: 18px; }
  .option-letter { font-size: 56px; }
  .partner-options h3 { font-size: 21px; letter-spacing: .025em; margin-bottom: 15px; }
  .partner-options p { font-size: 13px; letter-spacing: .015em; }
  .partner-options .text-link { font-size: 12px; margin-top: 18px; gap: 12px; }
  .partner-contact { margin-top: 25px; flex-direction: column; gap: 0; }
  .partner-form { flex-basis: auto; width: 100%; padding: 22px 20px; font-size: 14px; }
  .partner-contact > a:not(.partner-line) { font-size: 20px; margin-top: 24px; text-align: center; }
  .partner-contact small { font-size: 10px; }
  .partner-line { margin-top: 12px; font-size: 12px; }
  .company-layout { grid-template-columns: 1fr; gap: 40px; }
  .big-label { font-size: 48px; margin-bottom: 10px; }
  .company-sign { margin-top: 30px; }
  .company-sign img { width: 174px; }
  .company-intro { font-size: 14px; margin-top: 20px; }
  .company-info { padding-top: 0; }
  .company-info h3 { font-size: 21px; margin-bottom: 25px; }
  .company-info dl > div { font-size: 13px; grid-template-columns: 55px 1fr; gap: 20px; padding: 20px 0; }
  .showroom-note { font-size: 11px; }
  .news { grid-template-columns: 1fr; gap: 28px; }
  .news-empty { padding-block: 25px; }
  .news-empty p { font-size: 14px; }
  .contact { padding-top: 27px; }
  .contact-word { font-size: 17.3vw; }
  .contact-content { grid-template-columns: 1fr; gap: 30px; margin-top: 35px; }
  .contact-heading { padding-top: 0; }
  .contact-heading .eyebrow { font-size: 11px; }
  .contact-heading h2 { font-size: 27px; margin-top: 15px; letter-spacing: .04em; }
  .contact-heading > p:last-child { margin-top: 18px; font-size: 14px; }
  .contact-line { padding: 23px 18px; gap: 15px; font-size: 17px; }
  .contact-line svg { width: 34px; height: 34px; flex-basis: 34px; }
  .contact-line small { font-size: 9px; }
  .contact-mail { padding: 23px 6px; gap: 14px; font-size: 13px; }
  .contact-phone { font-size: 10px; gap: 8px; padding-top: 20px; justify-content: center; }
  .contact-phone b { font-size: 15px; }
  .footer { padding-top: 42px; }
  .footer-top { display: grid; grid-template-columns: 1fr 46px; gap: 30px 15px; }
  .footer-brand { width: 160px; }
  .footer nav { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; padding: 0; }
  .footer nav a, .footer nav button, .footer nav .pending-link { font-size: 11px; min-height: 44px; display: flex; align-items: center; }
  .back-top { grid-column: 2; grid-row: 1; }
  .footer-bottom { margin-top: 25px; font-size: 8px; gap: 16px; }
  .footer-bottom span:last-child { display: none; }

}
@media (max-width: 370px) {
  :root { --gutter: 20px; }
  .brand { width: 112px; flex-basis: 112px; margin-left: 16px; }
  .header-partner { width: 116px; }
  .menu-toggle { flex-basis: 50px; width: 50px; }
  .hero-copy h1 { font-size: 24px; }
  .material-copy { padding-inline: 20px; }
  .material-heading h2 { font-size: 24px; }
  .patent { width: 74px; flex-basis: 74px; }
  .concept-copy { font-size: 13px; }
  .technology-heading h2 { font-size: 22px; }
  .technology-copy { padding-left: 30px; }
  .technology-copy h3 { font-size: 19px; }
  .partner-options h3 { font-size: 19px; }
  .contact-heading h2 { font-size: 24px; }
  .contact-line { font-size: 15px; gap: 10px; }
}
/* A quiet reveal, with the three mortar-text layers moving at different speeds. */
.concept-line { display: block; }
.concept { position: relative; isolation: isolate; overflow: hidden; }
.concept > :not(.concept-dust) { position: relative; z-index: 1; }
.concept-dust { display: none; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.motion-enabled .concept.dust-ready > .concept-dust { display: block; }
.motion-enabled .concept.dust-ready > h2 { opacity: var(--dust-title-opacity, 1); }
.motion-enabled .concept.dust-ready > .concept-mark {
  opacity: var(--dust-word-opacity, 1);
  filter: blur(var(--dust-word-blur, 0px));
  transform: translate3d(0, var(--dust-word-y, 0px), 0);
}
.motion-enabled .concept.dust-ready > .concept-copy {
  opacity: var(--dust-copy-opacity, 1);
  transform: translate3d(0, var(--dust-copy-y, 0px), 0);
}
.motion-enabled .concept.dust-ready > .concept-logo { opacity: var(--dust-logo-opacity, 1); }
.pending-link { cursor: default; }
.works, .technology { overflow: clip; }
.motion-enabled .motion-reveal:not(.motion-panel) {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 1.1s ease, transform 1.45s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-enabled .motion-reveal.motion-line {
  transform: translate3d(0, 16px, 0);
  clip-path: inset(0 0 30% 0);
  transition: opacity 1s ease, transform 1.5s cubic-bezier(.22, 1, .36, 1), clip-path 1.5s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-enabled .motion-reveal.motion-photo {
  overflow: hidden;
  clip-path: inset(0 0 12% 0);
  transition: opacity 1.15s ease, transform 1.7s cubic-bezier(.22, 1, .36, 1), clip-path 1.7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-enabled .motion-photo > img {
  transform: scale(1.045);
  transition: transform 2.1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-enabled .motion-reveal.is-revealed:not(.motion-panel) {
  opacity: 1;
  transform: none;
}
.motion-enabled .motion-line.is-revealed, .motion-enabled .motion-photo.is-revealed { clip-path: inset(0); }
.motion-enabled .motion-photo.is-revealed > img { transform: none; }
.motion-enabled .motion-panel::before {
  opacity: 0;
  transform: scaleX(.88);
  transform-origin: left center;
  transition: opacity 1.1s ease, transform 1.8s cubic-bezier(.22, 1, .36, 1);
}
.motion-enabled .motion-panel.is-revealed::before { opacity: 1; transform: none; }

.type-pattern > span, .single-pattern > span { width: max-content; }
.motion-enabled .type-pattern > span,
.motion-enabled .single-pattern > span {
  animation: mortar-track 22s linear infinite alternate;
  animation-play-state: paused;
}
.motion-enabled .type-pattern > span:nth-child(2) { animation-duration: 28s; animation-direction: alternate-reverse; }
.motion-enabled .type-pattern > span:nth-child(3) { animation-duration: 34s; }
.motion-enabled .single-pattern > span { animation-duration: 24s; animation-direction: alternate-reverse; }
.motion-enabled .works-bottom-type > span,
.motion-enabled .heading-type > span {
  --letter-drift: .16em;
  animation: mortar-layers 4.8s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  animation-play-state: paused;
}
.motion-enabled .works-bottom-type > span:nth-child(2),
.motion-enabled .heading-type > span:nth-child(2) { --letter-drift: .3em; animation-duration: 6s; }
.motion-enabled .works-bottom-type > span:nth-child(3),
.motion-enabled .heading-type > span:nth-child(3) { --letter-drift: .44em; animation-duration: 7.2s; }
.motion-enabled .heading-type > span { animation-direction: alternate-reverse; }
.motion-enabled .heading-type > span:nth-child(1) { --letter-drift: -.16em; }
.motion-enabled .heading-type > span:nth-child(2) { --letter-drift: -.3em; }
.motion-enabled .heading-type > span:nth-child(3) { --letter-drift: -.44em; }
.motion-enabled .motion-lettering.is-in-view > span { animation-play-state: running; }
.motion-enabled.motion-suspended .motion-lettering > span { animation-play-state: paused; }
@keyframes mortar-track {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-20%, 0, 0); }
}
@keyframes mortar-layers {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--letter-drift), 0, 0); }
}

@media (prefers-reduced-motion: reduce), print {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .motion-reveal, .motion-photo > img, .motion-panel::before {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .concept > :not(.concept-dust) { opacity: 1 !important; filter: none !important; transform: none !important; }
  .concept > .concept-dust { display: none !important; }
}

/* 壁の質感：対応するブラウザは軽い AVIF を使う（2026-10-21 J。それ以外は wall.jpg のまま） */
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  :root { --texture: image-set(url('assets/wall.avif') type('image/avif'), url('assets/wall.jpg') type('image/jpeg')); }
}