:root{
  --black:#101010;
  --white:#ffffff;
  --cream:#f4efe6;
  --beige:#e8dfcf;
  --logo-orange:#ff9933;
  --accent:#d98a1c;
  --accent-soft:#e6b56a;
  --accent-bg:#fbf4e8;
  --brown:#4a3320;
  --gray:#6a655d;
  --line:#ded3c2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--black);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;line-height:1.86;letter-spacing:.045em;font-weight:400;-webkit-font-smoothing:antialiased}
img,video{display:block;width:100%;height:auto}a{color:inherit;text-decoration:none}

.site-header{position:fixed;z-index:100;inset:0 0 auto 0;height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 4.5vw;color:#fff;mix-blend-mode:difference;font-weight:600}
.brand{font-size:13px;letter-spacing:.16em}
.site-header nav{display:flex;gap:28px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}

.hero{position:relative;height:100svh;min-height:720px;overflow:hidden;background:#111}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:0;transform:scale(1.02)}
.cinematic-video{filter:contrast(.94) saturate(.76) brightness(.88) sepia(.08)}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.22)),linear-gradient(0deg,rgba(0,0,0,.34),transparent 48%)}
.hero-copy{position:absolute;left:7vw;bottom:12vh;z-index:2;max-width:960px;color:#fff}
.eyebrow{margin:0 0 20px;color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.hero h1{margin:0 0 32px;font-size:clamp(44px,6.3vw,92px);line-height:1.12;font-weight:700;letter-spacing:.04em}
.lead{font-size:clamp(15px,1.55vw,19px);font-weight:400;letter-spacing:.06em}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap;margin-top:38px}
.button{display:inline-block;padding:13px 26px;border:1px solid currentColor;font-size:13px;font-weight:500;letter-spacing:.12em;transition:.3s ease}
.button:hover{transform:translateY(-2px);opacity:.86}
.button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.button.primary:hover{background:#c97e17;border-color:#c97e17}
.button.secondary{color:#fff}

.section{padding:150px 7vw}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:8vw;align-items:center}
.split.reverse{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)}
.split.reverse .copy-block{order:2}
.copy-block h2,.section-title h2,.office-copy h2{margin:0 0 36px;font-size:clamp(30px,4vw,54px);line-height:1.22;font-weight:500;letter-spacing:.055em}
.copy-block h3{font-size:20px;margin:34px 0 10px;font-weight:500;letter-spacing:.06em;color:var(--accent)}
.copy-block p,.section-title p,.office-copy p{font-size:16px;max-width:700px;color:#282520}
.highlight{color:var(--accent);font-weight:500}
.quiet-copy{margin-top:36px;font-size:18px!important;font-weight:500;letter-spacing:.08em}

.visual-card{margin:0;position:relative;overflow:hidden;background:#d6c7b4;box-shadow:0 30px 70px rgba(42,32,22,.10)}
.visual-card img,.visual-card video{aspect-ratio:16/10;object-fit:cover}
.visual-card figcaption,.office-video-wrap figcaption{padding:12px 4px 0;font-size:11px;letter-spacing:.12em;color:var(--gray);background:transparent}
.overlap-card{transform:translateY(30px)}
.section-title{max-width:980px;margin:0 0 76px}

.service-section{background:#fff}
.service-feature{display:grid;grid-template-columns:1.15fr .85fr;gap:5vw;align-items:center;margin:0 0 120px}
.service-feature.reverse{grid-template-columns:.85fr 1.15fr}
.service-feature.reverse .visual-card{order:2}
.copy-block.small h3{font-size:30px;margin:0 0 18px;font-weight:500}
.number{color:var(--accent);font-size:12px;font-weight:500;letter-spacing:.2em}
.inline-list,.check-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.inline-list li,.check-list li{border:1px solid var(--accent-soft);padding:7px 12px;font-size:13px;background:var(--accent-bg)}
.flow-list{padding-left:1.3em}
.flow-list li{margin-bottom:6px}

.dark-section{background:#14110e;color:#fff}
.dark-section p{color:#e8ded1}
.dark-section .copy-block h2{color:#fff}
.dark-section .copy-block h3{color:var(--accent-soft)}
.black-section{background:#101010;color:#fff}
.black-section p{color:#e9e0d2}

.office-section{background:#fff;padding:150px 7vw 126px}
.office-copy{max-width:820px;margin-bottom:60px}
.office-video-wrap{margin:0;overflow:hidden;box-shadow:0 34px 80px rgba(42,32,22,.11)}
.section-video{width:100%;height:auto;display:block;object-fit:cover;background:#cc9933}
.office-video{height:min(76vh,880px);object-position:center center}

.sustainability-section{background:var(--beige)}
.company-table{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 18px 45px rgba(42,32,22,.05)}
.company-table th,.company-table td{border-bottom:1px solid var(--line);padding:24px;text-align:left;vertical-align:top}
.company-table th{width:24%;color:#55483a;font-size:14px;font-weight:500}
.footer{background:#101010;color:#fff;text-align:center;padding:90px 7vw}
.footer-copy{font-size:28px;font-weight:500;letter-spacing:.08em}

@media(max-width:980px){
  .site-header nav{display:none}
  .section{padding:96px 6vw}
  .hero{min-height:640px}
  .hero-copy{left:6vw;right:6vw}
  .split,.split.reverse,.service-feature,.service-feature.reverse{grid-template-columns:1fr;gap:46px}
  .split.reverse .copy-block,.service-feature.reverse .visual-card{order:0}
  .office-section{padding:100px 6vw 84px}
  .office-video{height:58vh}
  .company-table th,.company-table td{display:block;width:100%;padding:16px 18px}
  .company-table th{border-bottom:none;padding-bottom:0}
  .company-table td{padding-top:4px}
}
.footer-logo{

width:180px;

max-width:42vw;

height:auto;

display:block;

margin:

32px auto 18px;

opacity:.92;

}
/* Japanese editorial headings: strong Mincho, restrained corporate style */
.hero h1, .copy-block h2, .section-title h2, .office-copy h2,
.copy-block h3, .footer-copy {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 700;
  letter-spacing: .045em;
}
.hero h1 { line-height: 1.28; }
.copy-block h2, .section-title h2, .office-copy h2 { line-height: 1.48; }
.copy-block.small h3 { font-weight: 700; }

/* BENTATSU ECN | section art (single-source definitions) */
.concept-section, .service-section, .history-section,
.sustainability-section, .office-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* CONCEPT: remove outdated decoration that appeared over the photo. */
.concept-section { background: #f4ead9; }
.concept-section::before, .concept-section::after { content: none; }
.concept-section .split { position: relative; z-index: 1; }
.concept-section .copy-block { position: relative; isolation: isolate; z-index: 2; }
.concept-section .copy-block::before {
  content: "";
  position: absolute;
  left: -7vw; /* flush with section's left edge */
  top: -200px; /* rise above title to section's upper edge */
  width: min(66vw, 1050px);
  height: min(53vw, 760px);
  background: url("assets/bg-rice.png") left top / contain no-repeat;
  opacity: .40;
  pointer-events: none;
  z-index: 0;
}
.concept-section .copy-block > * { position: relative; z-index: 1; }
.concept-section .visual-card { position: relative; z-index: 2; }

/* SERVICE / OFFICE: one fan-shaped paper image at the top.
   The last third dissolves into a plain cream background. */
.service-section, .office-section {
  background: #f4efe5;
}
.service-section::before, .office-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 52%;
  background-image: url("assets/bg-washi.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left top;
  opacity: .82;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
/* Shift the office composition for visual variety without repetition. */
.office-section::before {background-position: right top; opacity: .74;}
.service-section > *, .office-section > * {position: relative; z-index: 1;}

/* HISTORY: full sepia editorial image, unobscured by white gradients. */
.history-section {
  background: #ead9bf url("assets/bg-history.png") center / cover no-repeat;
}
.history-section .split {position:relative;z-index:1;}

/* SUSTAINABILITY: counterpart rice motif stays on the right. */
.sustainability-section {background:#e8dfcf;}
.sustainability-section::before {
  content:"";
  position:absolute;
  top:0;
  right:-5vw;
  width:min(47vw,720px);
  height:min(37vw,570px);
  background:url("assets/bg-rice.png") right top / contain no-repeat;
  transform:scaleX(-1);
  opacity:.30;
  pointer-events:none;
  z-index:0;
}
.sustainability-section .split {position:relative;z-index:1;}

@media(max-width:980px) {
  .concept-section .copy-block::before {
    left:-6vw;
    top:-105px;
    width:min(95vw,780px);
    height:min(72vw,600px);
    opacity:.28;
  }
  .sustainability-section::before {
    right:-8vw;width:68vw;height:52vw;opacity:.23;
  }
}
@media(max-width:640px) {
  .concept-section .copy-block::before {
    left:-6vw;
    top:-102px;
    width:105vw;
    height:82vw;
    opacity:.22;
  }
  .history-section {background-position:58% center;}
  .sustainability-section::before {
    right:-15vw;width:82vw;height:62vw;opacity:.17;
  }
}