/* C案「端正」＝白いページに角丸の大きな枠・縦書きの見出し・細い罫線。オーソドックスで誰でも読める形に、静かな動きを足す。
   色＝深い緑 #0e6b4a（濃い #0a4d36・淡い #eaf4ee / #dcefe4）＋白＋墨 #1c2321。書体＝Zen Kaku Gothic New（400 / 500）＋英字 Poppins。
   動き（ASB の語彙）＝見出しが行ごとに現れる anim-mask／縦書きの見出しは上から開く anim-clip-down／写真に緑の帯が走る anim-wipe／
   罫線が伸びる anim-line／資格の数字が数え上がる anim-count／背景のやわらかい形がスクロールで動き（anim-scrub）ゆっくり揺れる（anim-sway）／
   段違いの写真の視差 anim-parallax／ロゴの言葉がゆっくり流れる anim-marquee／施工実績は横の列 fx-rail／ボタン fx-btn-slide／リンク fx-underline／TOPへ戻る bar。
   この案だけの小さな CSS の動きは 2 つ＝メインビジュアルの左下のカードが上がってくる（ts-rise）・Scroll の細い線（ts-scroll）。
   下へ進むと出る細いヘッダーは tansei.js。グラデーションはメインビジュアルの暗幕の 1 か所だけ。
   ★「折らない」（white-space: nowrap）と決めた字: キャッチ・横書きの見出し・事業案内の一文・採用の呼びかけ・電話番号。350px より狭い幅だけ折ってよい（末尾）。 */

/* ---------- 土台（どの区画でも同じ物） ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dt, dd, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }

.plan-tansei {
  --green: #0e6b4a; --green-d: #0a4d36; --pale: #eaf4ee; --pale-2: #dcefe4;
  --ink: #1c2321; --gray: #5d6965; --line: #d3dcd7;
  --ja: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --en: 'Poppins', 'Zen Kaku Gothic New', sans-serif;
  --gutter: clamp(20px, 4.2vw, 60px);   /* 本文の左右の空き */
  --wrap-max: 1280px;                    /* 本文の幅の上限（1920 でも間延びしない） */
  --edge: 12px;                          /* 角丸の大きな枠と画面の端の間 */
  --r: 14px; --r-s: 10px;
  --bar-h: 42px;                         /* 案内の帯の高さ（撮影では 0） */
  --arr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  /* 動きの調整（静かに・ゆっくり） */
  --anim-duration: .9s; --anim-distance: 24px; --anim-wipe-color: var(--green); --anim-wipe-duration: 1.25s;
  --anim-mask-duration: 1.05s; --anim-clip-duration: 1.2s; --anim-count-duration: 1.8s;
  /* TOPへ戻る＝bar（縦書きの字＋細い線） */
  --fx-backtop-ink: var(--green-d); --fx-backtop-font: 'Poppins', sans-serif; --fx-backtop-right: 12px; --fx-backtop-bottom: 20px; --fx-backtop-rail: 56px;
  background: #fff; color: var(--ink);
  font-family: var(--ja); font-size: 15.5px; font-weight: 400; line-height: 2.1; letter-spacing: .07em; font-feature-settings: "palt" 1;
}
html.is-shot .plan-tansei { --bar-h: 0px; }

/* 文の最後の 1 字だけが次の行に落ちるのを減らす（★まとめ書きの text-wrap は使わない＝「折らない」の指定まで消してしまう） */
.plan-tansei :is(p, li, dd, h3) { text-wrap-style: pretty; }
/* 短い文と題は、言葉の切れ目で折る（対応しているブラウザだけ・ほかは今までどおり） */
.news-t, .cc-quote, .dr-t, .bi-dl dd, .cd-for, .rc-dl dd { word-break: auto-phrase; }
.wrap { position: relative; z-index: 1; width: min(var(--wrap-max), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.sec { position: relative; padding: clamp(80px, 9.6vw, 150px) 0; }
.ph { position: relative; overflow: hidden; }
.ph > img { width: 100%; height: 100%; object-fit: cover; }

/* 矢印（色は文字の色） */
.arr { display: inline-block; flex: none; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--arr) center / contain no-repeat; mask: var(--arr) center / contain no-repeat; transition: transform .4s cubic-bezier(.22, .61, .36, 1), opacity .4s, color .4s; }

/* 横書きの見出し（日本語＋小さな英字） */
.hd-ja { font-size: clamp(24px, 2.25vw, 32px); font-weight: 400; line-height: 1.5; letter-spacing: .18em; white-space: nowrap; }
.hd-en { margin-top: 6px; font: 500 13px/1.5 var(--en); letter-spacing: .08em; color: var(--green); }
.hd.is-center { text-align: center; }

/* 縦書きの見出し（右に日本語・左に小さな英字）。狭い幅では横書きに戻す */
.v-head { writing-mode: vertical-rl; font-feature-settings: normal; }
.v-ja { font-size: clamp(26px, 2.3vw, 32px); font-weight: 400; line-height: 1.4; letter-spacing: .34em; white-space: nowrap; }
.v-en { margin-right: 14px; font: 500 13px/1.4 var(--en); letter-spacing: .1em; color: var(--green); }

/* 罫線（anim-line で左から伸びる） */
.rule { display: block; height: 1px; background: var(--ink); --anim-duration: 1.4s; }
li > .rule { position: absolute; left: 0; right: 0; top: 0; }
li > .rule.is-end { top: auto; bottom: 0; }

/* 札 */
.tag { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 13px; border-radius: 999px; background: var(--pale-2); color: var(--green-d); font-size: 11.5px; font-weight: 500; line-height: 1; letter-spacing: .08em; white-space: nowrap; }
.tag.is-fill { background: var(--green); color: #fff; }
.tag.is-line { background: #fff; box-shadow: inset 0 0 0 1px var(--green); color: var(--green); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nb { white-space: nowrap; }
.chips li { padding: 7px 16px; border-radius: 18px; background: #fff; font-size: 13px; line-height: 1.5; letter-spacing: .06em; }

/* ボタン（塗りが左から流れる＝fx-btn-slide） */
.btn-line, .btn-dark, .btn-fill, .sh-cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; border-radius: 8px; font-weight: 500; line-height: 1; letter-spacing: .14em; white-space: nowrap; transition: color .4s; }
.btn-line { min-width: 216px; height: 54px; padding: 0 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--green); color: var(--green); font-size: 14.5px; --fx-btn-slide-bg: var(--green); }
.btn-dark { height: 48px; padding: 0 24px; background: var(--ink); color: #fff; font-size: 13.5px; --fx-btn-slide-bg: var(--green); }
.btn-fill { width: min(340px, 100%); height: 64px; background: var(--green); color: #fff; font-size: 15.5px; --fx-btn-slide-bg: var(--green-d); }
.btn-line.sp-btn { display: none; }
.btn-line::after, .btn-dark::after, .btn-fill::after { content: ''; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--arr) center / contain no-repeat; mask: var(--arr) center / contain no-repeat; transition: transform .4s cubic-bezier(.22, .61, .36, 1); }
.more { position: relative; display: inline-block; align-self: flex-end; margin-top: auto; font-size: 13.5px; font-weight: 500; line-height: 1.6; letter-spacing: .14em; color: var(--green); --fx-underline-h: 1px; --fx-underline-offset: -3px; }

/* 入口の札（産業廃棄物処理・会社案内） */
.entry { display: flex; align-items: center; gap: 16px; height: 74px; padding: 0 20px 0 24px; border-radius: var(--r-s); background: #fff; transition: background-color .45s, color .45s; }
.en-no { font: 500 12px/1 var(--en); letter-spacing: .1em; color: var(--green); transition: color .45s; }
.en-t { font-size: 15.5px; font-weight: 500; line-height: 1.4; letter-spacing: .12em; }
.entry .arr { margin-left: auto; color: var(--green); }
.entry:hover { background: var(--green); color: #fff; }
.entry:hover .en-no, .entry:hover .arr { color: #fff; }
.entry:hover .arr { transform: translateX(5px); }

/* ロゴ（マークは画像・社名は文字で組む）。白い面の上にだけ置く */
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand img { width: auto; height: 40px; }
.brand-t { display: flex; flex-direction: column; gap: 6px; line-height: 1; }
.brand-ja { font-size: 18px; font-weight: 500; letter-spacing: .12em; white-space: nowrap; }
.brand-en { font: 400 10px/1 var(--en); letter-spacing: .24em; color: var(--gray); white-space: nowrap; }

/* ---------- 下へ進むと出る細いヘッダー ---------- */
.site-header { position: fixed; left: 0; right: 0; top: 0; z-index: 900; background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 var(--line); transform: translateY(-102%); visibility: hidden; transition: transform .55s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .55s; }
.site-header.is-shown { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.22, .61, .36, 1), visibility 0s; }
html.is-shot .site-header { display: none; }
.sh-inner { height: 70px; display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); padding: 0 16px 0 26px; }
.gnav { margin-left: auto; display: flex; gap: clamp(16px, 1.9vw, 30px); font-size: 14px; font-weight: 500; letter-spacing: .1em; white-space: nowrap; }
.gnav a { padding: 6px 0; transition: color .3s; --fx-underline-color: var(--green); --fx-underline-h: 1px; --fx-underline-offset: 0px; }
.gnav a:hover { color: var(--green); }
.sh-tel { display: flex; align-items: baseline; gap: 8px; font: 400 19px/1 var(--en); letter-spacing: .06em; white-space: nowrap; }
.sh-tel span { font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--green); }
.sh-cta { height: 44px; padding: 0 24px; background: var(--green); color: #fff; font-size: 14px; --fx-btn-slide-bg: var(--green-d); }
.menu-btn { display: none; position: relative; flex: none; width: 46px; height: 46px; border-radius: 8px; }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; }
.menu-btn span:nth-child(1) { top: 16px; } .menu-btn span:nth-child(2) { top: 22px; } .menu-btn span:nth-child(3) { top: 28px; }

/* ---------- 1 メインビジュアル ---------- */
.hero { position: relative; padding: var(--edge); --anim-delay-step: .2s; --anim-distance: 18px; }
.hero-frame { position: relative; isolation: isolate; display: flex; align-items: center; height: calc(100vh - var(--bar-h) - var(--edge) * 2); height: calc(100svh - var(--bar-h) - var(--edge) * 2); min-height: 600px; max-height: 1040px; border-radius: var(--r); overflow: hidden; background: #133b2d; color: #fff; }
.bg-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.bg-video::-webkit-media-controls, .bg-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
/* 薄い暗幕（字を読める濃さに・緑がかった墨。このページでただ 1 つのグラデーション） */
.hero-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(98deg, rgba(8, 32, 24, .7) 0%, rgba(8, 32, 24, .42) 46%, rgba(8, 32, 24, .3) 100%); }

/* ロゴの白い札＝左上の角に食い込む（枠との境目は内側に丸める） */
.hero-logo { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 26px 34px 24px 38px; background: #fff; border-radius: 0 0 var(--r) 0; }
.hero-logo img { width: auto; height: 52px; }
.hero-logo .brand-ja { font-size: 22px; }
.hero-logo .brand-en { font-size: 11px; }
.hero-logo::before, .hero-logo::after { content: ''; position: absolute; width: var(--r); height: var(--r); border-top-left-radius: var(--r); box-shadow: -7px -7px 0 7px #fff; pointer-events: none; }   /* 角の外側だけを白で埋める（影は要素の中には描かれない） */
.hero-logo::before { left: 100%; top: var(--edge); }
.hero-logo::after { left: var(--edge); top: 100%; }

/* 縦書きのメニュー（1 項目ずつ白い角丸の札・お問い合わせだけ緑） */
.vnav { position: absolute; right: 30px; top: 28px; z-index: 2; display: flex; align-items: flex-start; gap: 14px; font-feature-settings: normal; }
.vnav a, .ft-nav a { writing-mode: vertical-rl; padding: 13px 7px; border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: .16em; white-space: nowrap; transition: background-color .4s, color .4s; }
.vnav a:hover, .vnav a.is-cta, .ft-nav a:hover, .ft-nav a.is-cta { background: var(--green); color: #fff; }
.vnav a.is-cta:hover, .ft-nav a.is-cta:hover { background: var(--green-d); }
.hero-menu { position: absolute; right: 14px; top: 14px; z-index: 3; background: #fff; color: var(--ink); }

.hero-copy { margin-left: clamp(28px, 12.8vw, 210px); padding-bottom: 3vh; text-shadow: 0 1px 22px rgba(6, 28, 20, .42); }
.hero-catch { font-size: clamp(34px, min(4.1vw, 7.6vh), 64px); font-weight: 400; line-height: 1.55; letter-spacing: .16em; white-space: nowrap; --anim-mask-duration: 1.3s; --anim-mask-step: .2s; --anim-delay: .2s; }
.hero-en { margin-top: clamp(18px, 2vw, 30px); font: 400 clamp(14px, 1.2vw, 17px)/1.4 var(--en); letter-spacing: .1em; }
/* 添え書きはキャッチの下（動画は場面が変わる＝暗幕の濃い左側にまとめて、どの場面でも読めるように） */
.hero-sub { margin-top: clamp(24px, 2.6vw, 38px); font-size: clamp(13px, 1.02vw, 15px); line-height: 2.1; letter-spacing: .2em; white-space: nowrap; }
.hero-sub::before { content: ''; display: block; width: 40px; height: 1px; margin-bottom: clamp(18px, 2vw, 28px); background: rgba(255, 255, 255, .7); }

/* 左下の採用情報のカード */
.hero-recruit { position: absolute; left: 24px; bottom: 24px; z-index: 2; display: flex; align-items: center; gap: 16px; width: 392px; padding: 11px 18px 11px 11px; border-radius: var(--r-s); background: #fff; color: var(--ink); }
.hr-ph { flex: none; width: 104px; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.hr-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
.hero-recruit:hover .hr-ph img { transform: scale(1.07); }
.hr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.hr-head { display: flex; align-items: baseline; gap: 10px; }
.hr-en { font: 500 15px/1 var(--en); letter-spacing: .06em; color: var(--green); text-transform: uppercase; }
.hr-ja { font-size: 11px; line-height: 1; letter-spacing: .14em; color: var(--gray); }
.hr-text { font-size: 12px; line-height: 1.6; letter-spacing: .06em; }
.hero-recruit .arr { width: 16px; height: 16px; color: var(--green); }
.hero-recruit:hover .arr { transform: translateX(4px); }
/* ★このカードは画面の下の端に居る＝ASB の出現アニメ（画面の下 1 割を過ぎたら出る）だと、背の高い窓やスマホでは最初の画面で出ないままになる。
   ここだけ、読み込みから少し遅れて上がってくる小さな CSS にする（JS が無い時・動きを減らす設定では最初から見えている）。 */
@media (prefers-reduced-motion: no-preference) { html.anim-on .hero-recruit { animation: ts-rise 1s cubic-bezier(.22, .61, .36, 1) 1.3s both; } }
@keyframes ts-rise { from { opacity: 0; transform: translateY(18px); } }

.hero-scroll { position: absolute; right: 36px; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; font: 400 11px/1 var(--en); letter-spacing: .2em; }
.hero-scroll span { writing-mode: vertical-rl; }
.hero-scroll i { position: relative; width: 1px; height: 72px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.hero-scroll i::after { content: ''; position: absolute; left: 0; top: -45%; width: 1px; height: 45%; background: #fff; }
@media (prefers-reduced-motion: no-preference) { .hero-scroll i::after { animation: ts-scroll 2.6s cubic-bezier(.65, 0, .35, 1) infinite; } }
@keyframes ts-scroll { to { top: 100%; } }

/* ---------- 2 お知らせ・9 情報公開（左に見出し・右に行の一覧） ---------- */
.news { padding-top: clamp(64px, 7.6vw, 116px); }
.news-grid, .disc-grid { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 0 clamp(40px, 6vw, 96px); align-items: start; }
.side-head { display: flex; flex-direction: column; align-items: flex-start; gap: 44px; }
.news-list li, .disc-list li { position: relative; }
.news-list .rule, .disc-list .rule { background: #b9c5bf; }
.news-row { display: grid; grid-template-columns: 78px 104px minmax(0, 1fr) 17px; align-items: center; gap: 0 clamp(16px, 2.3vw, 32px); padding: 27px 10px 26px; transition: color .35s; }
.news-row time { font: 400 14px/1 var(--en); letter-spacing: .06em; color: var(--gray); }
.news-t { font-size: 15.5px; line-height: 1.7; letter-spacing: .08em; }
.news-row .arr, .disc-row .arr { color: var(--green); opacity: .35; }
.news-row:hover, .disc-row:hover { color: var(--green); }
.news-row:hover .arr, .disc-row:hover .arr { opacity: 1; transform: translateX(5px); }

.disc { padding-top: clamp(8px, 1.6vw, 28px); }
.disc-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 17px; align-items: center; gap: 0 clamp(14px, 2vw, 28px); padding: 30px 10px 29px; transition: color .35s; }
.dr-no { font: 500 12px/1 var(--en); letter-spacing: .1em; color: var(--green); }
.dr-t { font-size: 17px; line-height: 1.6; letter-spacing: .12em; }
.dr-t small { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.8; letter-spacing: .06em; color: var(--gray); }
.pdf { padding: 6px 12px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--green); font: 500 11px/1 var(--en); letter-spacing: .14em; color: var(--green); }

/* ---------- 3 事業案内 ---------- */
.biz { overflow: hidden; overflow: clip visible; padding-top: clamp(36px, 4.6vw, 72px); }   /* 横だけ切る（形の上下は隣の区画へやわらかく続く） */
/* 背景のやわらかい形：外側＝スクロールに合わせて上下にずれる（anim-scrub の --p）／内側＝ゆっくり揺れる（anim-sway）。印が無い時は真ん中の位置で止まる */
.blob { position: absolute; z-index: 0; pointer-events: none; }
.blob i { display: block; width: 100%; height: 100%; background: var(--pale); border-radius: 46% 54% 52% 48% / 58% 44% 56% 42%; rotate: -32deg; --anim-sway-duration: 14s; --anim-sway-y: -20px; --anim-sway-rot: 2.5deg; }
@media (prefers-reduced-motion: no-preference) {
  html.anim-on .blob.anim-scrub { transform: translate3d(0, calc((var(--p, .5) - .5) * var(--blob-shift, 140px)), 0); }
}
.blob-a { left: -16vw; top: 8vw; width: max(72vw, 520px); height: max(33vw, 240px); --blob-shift: 170px; }
.blob-b { right: -27vw; top: 25vw; width: max(74vw, 540px); height: max(29vw, 210px); --blob-shift: -120px; }
.blob-b i { border-radius: 52% 48% 44% 56% / 46% 58% 42% 54%; --anim-sway-duration: 17s; --anim-sway-y: 16px; --anim-sway-rot: -2deg; }

.biz-intro { display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 50fr) minmax(0, 20fr); grid-template-rows: auto auto; align-items: start; padding-bottom: clamp(88px, 10vw, 160px); }
.bi-ph1 { grid-column: 1; grid-row: 1 / span 2; }
.bi-ph1 .ph { aspect-ratio: 4 / 5; border-radius: var(--r); }
.bi-body { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 0 clamp(44px, 4.6vw, 60px) 0 clamp(36px, 5.4vw, 84px); }
.bi-lead { font-size: clamp(17px, 1.72vw, 22px); line-height: 2.5; letter-spacing: .1em; white-space: nowrap; --anim-mask-step: .16s; }
.bi-dl { margin-top: clamp(26px, 3vw, 44px); padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.9; }
.bi-dl dd { margin-top: 8px; }
.biz-intro .v-head { grid-column: 3; grid-row: 1; justify-self: end; margin-right: clamp(0px, 2vw, 34px); }
.bi-ph2 { grid-column: 3; grid-row: 2; margin: clamp(48px, 6vw, 96px) 0 0 -18%; }
.bi-ph2 .ph { aspect-ratio: 4 / 3; border-radius: var(--r-s); }

/* 5 つの事業＝罫線で区切った行（左に角丸の写真・右に番号と名前・説明・右下に小さなボタン） */
.biz-row { position: relative; display: grid; grid-template-columns: minmax(0, 43%) minmax(0, 1fr); gap: 0 clamp(36px, 6vw, 84px); padding: clamp(30px, 3.4vw, 46px) 0; }
.br-ph { aspect-ratio: 5 / 3; align-self: start; border-radius: var(--r-s); }
/* 除雪＝小さい実写 3 枚の組（大 1 ＋小 2）。元は 440×330＝この升なら引き伸ばさない */
.br-trio { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; border-radius: 0; }
.br-trio .ph { border-radius: var(--r-s); }
.br-trio .ph:first-child { grid-row: 1 / span 2; }
.br-body { display: flex; flex-direction: column; min-width: 0; padding-top: 6px; }
.br-no, .cc-no { font: 500 13px/1 var(--en); letter-spacing: .12em; color: var(--green); }
.br-name { margin-top: 14px; font-size: clamp(23px, 2.1vw, 30px); font-weight: 400; line-height: 1.4; letter-spacing: .14em; }
.br-en { margin-top: 6px; font: 400 13.5px/1.4 var(--en); letter-spacing: .04em; color: #89948f; }
.br-main { margin-top: auto; padding-top: 28px; }
.br-text { overflow-wrap: anywhere; }
.br-text .dm { vertical-align: .1em; }
.br-sub { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.br-sub li { padding: 5px 15px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #c9ddd2; color: var(--green-d); font-size: 12.5px; line-height: 1.6; letter-spacing: .08em; }
.br-spec { margin-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.7; }
.br-spec > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 0 16px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.br-spec dt { color: var(--green-d); font-weight: 500; }
.br-body .btn-dark { align-self: flex-end; margin-top: 26px; }

/* ---------- 4 施工実績（横の列・fx-rail） ---------- */
.works { padding-top: clamp(20px, 3vw, 48px); }
.works-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(34px, 4vw, 56px); }
.works .fx-rail-nav { color: var(--ink); --fx-rail-btn: 46px; --fx-rail-ink: var(--green); --fx-rail-line: #c3cec8; --fx-rail-bar-w: 110px; }
.works .fx-rail-btn:hover:not(:disabled) { border-color: var(--green); }
.works-rail { display: flex; gap: clamp(18px, 2.2vw, 30px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 4px max(var(--gutter), calc((100% - var(--wrap-max)) / 2)) 8px; scroll-padding-left: max(var(--gutter), calc((100% - var(--wrap-max)) / 2)); }
.works-rail::-webkit-scrollbar { display: none; }
.work-card { flex: 0 0 clamp(236px, 22vw, 290px); min-width: 0; scroll-snap-align: start; }
.work-card a { display: block; }
.wc-ph { aspect-ratio: 4 / 3; border-radius: var(--r-s); overflow: hidden; background: var(--pale); }
.wc-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22, .61, .36, 1); }
.work-card a:hover .wc-ph img { transform: scale(1.05); }
.work-card .tag { margin-top: 18px; }
.wc-name { margin-top: 10px; font-size: 15px; font-weight: 500; line-height: 1.75; letter-spacing: .06em; transition: color .35s; }
.work-card a:hover .wc-name { color: var(--green); }
.wc-place { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--gray); }
.wc-term { display: flex; gap: 10px; margin-top: 3px; font-size: 12.5px; line-height: 1.7; color: var(--gray); }
.wc-term span { flex: none; color: var(--green); font-weight: 500; }
.works-foot { margin-top: clamp(34px, 4vw, 56px); }

/* ---------- 5 産業廃棄物処理のご利用（淡い緑の面） ---------- */
.waste { padding: 0 var(--edge); }
.waste-panel { border-radius: var(--r); background: var(--pale); padding: clamp(60px, 8vw, 120px) 0 clamp(52px, 6.6vw, 96px); }
.waste-grid { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 0 clamp(36px, 6vw, 84px); align-items: center; }
.waste-ph { aspect-ratio: 4 / 3; border-radius: var(--r); }
.waste-lead { margin-top: 30px; }
.waste-kinds { margin-top: 26px; }
.waste-kinds dt, .bi-dl dt, .cc-label, .co-label { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 500; line-height: 1.6; letter-spacing: .14em; color: var(--green-d); }
.waste-kinds dt::before, .bi-dl dt::before, .cc-label::before, .co-label::before { content: ''; flex: none; width: 20px; height: 1px; background: currentColor; }
.waste-kinds dd { margin-top: 14px; }
.entry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(44px, 5vw, 72px); }
.waste-note { margin-top: 26px; font-size: 14px; }

/* ---------- 6 取り組み・認定 ---------- */
.csr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(38px, 4.6vw, 64px); }
.csr-card { display: flex; flex-direction: column; padding: clamp(26px, 3.2vw, 46px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.csr-card.is-wide { grid-column: 1 / -1; }
.cc-name { margin-top: 12px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 400; line-height: 1.5; letter-spacing: .14em; }
.cc-label { margin-top: 24px; }
.cc-quote { margin-top: 10px; font-size: clamp(16px, 1.3vw, 18px); line-height: 2; letter-spacing: .1em; }
.cc-text { font-size: 14.5px; }
.cc-with-ph { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 22px; align-items: start; margin-top: 14px; }
.cc-ph { aspect-ratio: 4 / 3; border-radius: 6px; margin-top: 6px; }
.csr-card > .more { padding-top: 24px; }
.cc-headline { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.cc-headline .more { margin-top: 0; }
/* 資格の数字（数え上がる＝anim-count。数字だけの span に付ける） */
.quals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 30px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quals li { padding: 24px 8px 20px 28px; border-left: 1px solid var(--line); }
.quals li:first-child { padding-left: 4px; border-left: 0; }
.q-name { font-size: 13.5px; line-height: 1.6; letter-spacing: .1em; }
.q-num { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font: 300 clamp(44px, 4.4vw, 64px)/1.15 var(--en); letter-spacing: .01em; color: var(--green); font-variant-numeric: tabular-nums; }
.q-num small { font: 400 14px/1 var(--ja); letter-spacing: .1em; color: var(--ink); }
.cc-list { display: grid; gap: 12px; margin-top: 24px; font-size: 14.5px; }
.cc-list li { position: relative; padding-left: 22px; }
.cc-list li::before { content: ''; position: absolute; left: 2px; top: 1.05em; width: 9px; height: 1px; background: var(--green); }
.csr-card.is-cert { border-color: transparent; background: var(--pale); }
.csr-card.is-cert .cc-name { margin-top: 0; }
.csr-card.is-cert .chips { margin-top: 22px; }
.cert-img { margin-top: auto; padding-top: 24px; }
.cert-img img { width: min(290px, 100%); border-radius: 6px; }

/* ---------- 7 会社案内 ---------- */
.company { overflow: hidden; overflow: clip visible; padding-top: clamp(40px, 5vw, 80px); }
.blob-c { left: -22vw; top: 8vw; width: max(70vw, 520px); height: max(31vw, 230px); --blob-shift: 150px; }
.blob-d { right: -30vw; bottom: -4vw; width: max(64vw, 480px); height: max(26vw, 200px); --blob-shift: -110px; }
.blob-d i { background: var(--pale-2); opacity: .55; border-radius: 52% 48% 44% 56% / 46% 58% 42% 54%; --anim-sway-duration: 18s; --anim-sway-y: 14px; --anim-sway-rot: -2deg; }
.co-grid { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; gap: 0 clamp(34px, 5vw, 76px); align-items: start; }
.co-ph { aspect-ratio: 4 / 3; border-radius: var(--r); }
.co-table { margin-top: clamp(26px, 3vw, 44px); border-top: 1px solid var(--ink); font-size: 14px; line-height: 1.8; }
.co-table > div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 0 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.co-table dt { color: var(--green-d); font-weight: 500; letter-spacing: .14em; }
.co-body { padding-top: 6px; }
.co-label { font-size: 13px; letter-spacing: .2em; color: var(--green); }
.co-text { margin-top: 20px; }
.co-text p + p, .rc-text p + p { margin-top: 1.3em; }
.co-sign { margin-top: 28px; text-align: right; font-size: 20px; line-height: 1.6; letter-spacing: .3em; }
.co-sign span { margin-right: 1.3em; font-size: 12.5px; letter-spacing: .14em; color: var(--gray); }
.co-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 38px; }
.co-links .entry { height: 64px; box-shadow: inset 0 0 0 1px var(--line); }
.co-links .entry:hover { box-shadow: inset 0 0 0 1px var(--green); }

/* ---------- 8 採用情報（写真と文の組） ---------- */
.rc-grid { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 0 clamp(40px, 7vw, 120px); align-items: center; width: min(1560px, 100%); margin-inline: auto; padding: 0 var(--gutter) 0 var(--edge); }
.rc-ph { aspect-ratio: 5 / 4; border-radius: var(--r); }
.rc-body { max-width: 580px; }
.rc-call { margin-top: 32px; font-size: clamp(19px, 1.75vw, 24px); line-height: 1.9; letter-spacing: .12em; color: var(--green-d); white-space: nowrap; }
.rc-text { margin-top: 20px; }
.rc-dl { margin-top: 28px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.9; }
.rc-dl > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 0 16px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.rc-dl dt { color: var(--green-d); font-weight: 500; letter-spacing: .1em; }
.rc-body .btn-line { margin-top: 36px; }

/* ---------- 10 ロゴの言葉がゆっくり流れる帯 → お問い合わせ ---------- */
.flow { display: flex; gap: .34em; overflow: hidden; white-space: nowrap; padding-top: clamp(4px, 1.6vw, 24px); font: 300 clamp(76px, 12vw, 200px)/1.16 var(--en); letter-spacing: -.015em; color: var(--pale-2); user-select: none; --anim-marquee-duration: 90s; --anim-marquee-gap: .34em; }
.flow span { flex: none; }

.contact { padding: 0 var(--edge); }
.ct-panel { position: relative; isolation: isolate; display: flex; justify-content: center; overflow: hidden; padding: clamp(52px, 7vw, 104px) var(--gutter); border-radius: var(--r); background: var(--green); }
/* 写真に緑を被せる（白黒にして乗算＝濃淡だけが緑の面に残る） */
.ct-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; opacity: .55; }
.ct-card { display: flex; flex-direction: column; align-items: center; width: min(940px, 100%); padding: clamp(38px, 5.4vw, 76px) clamp(22px, 5vw, 84px) clamp(38px, 5vw, 68px); border-radius: var(--r); background: rgba(255, 255, 255, .97); text-align: center; }
.ct-main { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 10px 30px; margin-top: 34px; }
.ct-office { align-self: center; padding: 5px 18px; border-radius: 999px; background: var(--pale-2); color: var(--green-d); font-size: 13.5px; font-weight: 500; line-height: 1.5; letter-spacing: .24em; }
.ct-tel { display: flex; align-items: baseline; gap: 12px; font: 300 clamp(33px, 3.9vw, 50px)/1.1 var(--en); letter-spacing: .03em; white-space: nowrap; }
.ct-fax { display: flex; align-items: baseline; gap: 10px; font: 400 20px/1.2 var(--en); letter-spacing: .05em; white-space: nowrap; }
.ct-tel span, .ct-fax span, .cd-tel span { font: 500 12px/1 var(--en); letter-spacing: .14em; color: var(--green); }
.ct-desks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: 38px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; }
.ct-desks li { padding: 26px 8px 24px 32px; border-left: 1px solid var(--line); }
.ct-desks li:first-child { padding-left: 8px; border-left: 0; }
.cd-for { font-size: 13.5px; line-height: 1.7; color: var(--gray); }
.cd-name { margin-top: 6px; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: .14em; }
.cd-tel { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; font: 400 24px/1.2 var(--en); letter-spacing: .04em; white-space: nowrap; }
.ct-card .btn-fill { margin-top: 40px; }
.ct-side { position: absolute; top: 50%; writing-mode: vertical-rl; color: #fff; white-space: nowrap; transform: translateY(-50%); font-feature-settings: normal; }
.ct-side.is-l { left: clamp(28px, 6.2vw, 110px); font: 400 14px/1 var(--en); letter-spacing: .14em; }
.ct-side.is-r { right: clamp(28px, 6.2vw, 110px); font-size: 19px; line-height: 1; letter-spacing: .34em; }

/* ---------- フッター（白・細い枠） ---------- */
.site-footer { padding: var(--edge); }
.ft-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px 40px; padding: clamp(34px, 4.4vw, 60px) clamp(22px, 3.6vw, 52px) 26px; border: 1px solid var(--line); border-radius: var(--r); }
.ft-info .brand img { height: 48px; }
.ft-info .brand-ja { font-size: 20px; }
.ft-info address { margin-top: 22px; font-size: 13px; line-height: 2; letter-spacing: .08em; }
.ft-nav { display: flex; align-items: flex-start; gap: 12px; font-feature-settings: normal; }
.ft-nav a { background: var(--pale); }
.ft-bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; letter-spacing: .1em; }
.ft-bottom a { --fx-underline-h: 1px; --fx-underline-offset: -1px; }
.ft-bottom small { font-size: 11.5px; color: var(--gray); }

/* TOPへ戻る（bar）＝どの面の上でも読めるように、白い角丸の札に載せる */
.plan-tansei .asbsb-backtop.asbsb-bt-bar { padding: 13px 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(14, 107, 74, .12); }

/* ---------- 幅ごとの直し ---------- */
/* 背の低い画面（ノート PC）＝キャッチの下を詰めて、左下のカードとの間を空ける */
@media (min-width: 1024px) and (max-height: 740px) { .hero-copy { padding-bottom: 8vh; } .hero-en { margin-top: 16px; } .hero-sub { margin-top: 18px; } .hero-sub::before { margin-bottom: 14px; } }
@media (max-width: 1260px) { .ct-side { display: none; } }
@media (max-width: 1180px) { .sh-tel { display: none; } }

@media (max-width: 1023px) {
  .gnav, .sh-cta, .vnav, .hero-scroll, .btn-line.pc-btn { display: none; }
  .menu-btn { display: block; }
  .site-header .menu-btn { margin-left: auto; }
  .btn-line.sp-btn { display: inline-flex; margin-top: 34px; }
  .hero-copy { margin-left: clamp(24px, 7vw, 72px); }

  /* 縦書きの見出しは横書きに戻す */
  .v-head { writing-mode: horizontal-tb; font-feature-settings: "palt" 1; }
  .v-ja { font-size: clamp(24px, 3.4vw, 30px); letter-spacing: .18em; }
  .v-en { margin: 6px 0 0; }

  .news-grid, .disc-grid { grid-template-columns: minmax(0, 1fr); }
  .side-head { margin-bottom: 34px; }

  .biz-intro { display: flex; flex-direction: column; align-items: stretch; }
  .biz-intro .v-head { order: 1; margin: 0 0 30px; }
  .bi-body { order: 2; align-self: stretch; padding: 0; }
  .bi-lead { font-size: clamp(15.5px, 4.3vw, 22px); line-height: 2.3; }
  .bi-ph1 { order: 3; width: 64%; margin-top: 46px; }
  .bi-ph1 .ph { aspect-ratio: 4 / 3; }
  .bi-ph2 { order: 4; align-self: flex-end; width: 46%; margin: -11% 0 0; }
  .bi-ph2 .ph { box-shadow: 0 0 0 6px #fff; }

  .co-grid { display: flex; flex-direction: column; align-items: stretch; }
  .co-grid .v-head { order: 1; margin-bottom: 34px; }
  .co-side { display: contents; }
  .co-ph-wrap { order: 2; width: min(560px, 100%); }
  .co-body { order: 3; padding-top: 38px; }
  .co-table { order: 4; margin-top: 44px; }
}

@media (max-width: 900px) {
  .rc-grid { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .rc-ph { margin: 0 var(--edge); aspect-ratio: 16 / 10; }
  .rc-body { max-width: none; padding: 44px var(--gutter) 0; }
  .waste-grid { grid-template-columns: minmax(0, 1fr); }
  .waste-body { padding-top: 38px; }
  .csr-grid { grid-template-columns: minmax(0, 1fr); }
  .entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quals li:nth-child(odd) { padding-left: 4px; border-left: 0; }
  .quals li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 767px) {
  .plan-tansei { font-size: 15px; line-height: 2; letter-spacing: .05em; }
  .sh-inner { height: 60px; padding: 0 8px 0 14px; }
  .brand img { height: 34px; }
  .brand-ja { font-size: 15px; }
  .brand-en { font-size: 9px; letter-spacing: .2em; }

  .hero-frame { min-height: 540px; }
  .hero-logo { gap: 10px; padding: 14px 18px 13px 16px; }
  .hero-logo img { height: 36px; }
  .hero-logo .brand-ja { font-size: 15px; }
  .hero-logo .brand-en { font-size: 9px; }
  .hero-copy { margin-left: 22px; padding: 0 0 6vh; }
  .hero-catch { font-size: clamp(32px, 9.4vw, 40px); letter-spacing: .14em; }
  .hero-sub { font-size: 12.5px; line-height: 2; letter-spacing: .1em; }
  .hero-recruit { left: 12px; right: 12px; bottom: 12px; width: auto; gap: 14px; padding: 9px 14px 9px 9px; }
  .hr-ph { width: 84px; }
  .hr-text { font-size: 11.5px; letter-spacing: .02em; white-space: nowrap; }
  .hero-recruit .arr { display: none; }

  .news-row { grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 14px; padding: 20px 4px 19px; }
  .news-row time { grid-column: 1; }
  .news-row .tag { grid-column: 2; justify-self: start; }
  .news-t { grid-column: 1 / -1; font-size: 15px; }
  .news-row .arr { display: none; }
  .sp-btn, .works-foot .btn-line, .rc-body .btn-line { width: 100%; }

  .biz-row { grid-template-columns: minmax(0, 1fr); gap: 26px 0; padding: 30px 0 34px; }
  .br-main { margin-top: 0; padding-top: 20px; }
  .br-spec { font-size: 13px; }
  .br-spec > div { grid-template-columns: 9em minmax(0, 1fr); gap: 0 10px; }

  .works-head { align-items: center; }
  .works .fx-rail-nav { --fx-rail-btn: 40px; --fx-rail-bar-w: 56px; gap: 10px; }
  .work-card { flex-basis: 232px; }

  .entry-grid { gap: 10px; }
  .waste .hd-ja { font-size: clamp(20px, 5.9vw, 26px); letter-spacing: .1em; }
  .entry { height: 62px; gap: 10px; padding: 0 12px 0 14px; }
  .en-t { font-size: 14px; letter-spacing: .06em; }
  .entry .arr { width: 14px; height: 14px; }

  .cc-with-ph { grid-template-columns: minmax(0, 1fr); }
  .cc-ph { width: 180px; }
  .quals { grid-template-columns: minmax(0, 1fr); }
  .quals li, .quals li:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 4px 8px; border-left: 0; }
  .quals li + li { border-top: 1px solid var(--line); }
  .q-name { min-width: 0; }
  .q-num { flex: none; margin-top: 0; font-size: 40px; }

  .co-sign { font-size: 18px; }
  .co-links { gap: 10px; }
  .rc-call { font-size: clamp(17.5px, 5vw, 22px); letter-spacing: .08em; }
  .rc-dl > div { grid-template-columns: minmax(0, 1fr); padding: 12px 2px; }

  .disc-row { grid-template-columns: 24px minmax(0, 1fr) auto; padding: 22px 4px 21px; }
  .disc-row .arr { display: none; }
  .dr-t { font-size: 15.5px; letter-spacing: .08em; }

  .ct-panel { padding: 40px 14px; }
  .ct-main { flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
  .ct-desks { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .ct-desks li, .ct-desks li:first-child { padding: 20px 4px 18px; border-left: 0; }
  .ct-desks li + li { border-top: 1px solid var(--line); }
  .cd-tel { font-size: 22px; }
  .ct-card .btn-fill { margin-top: 30px; height: 58px; }

  .ft-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ft-nav { flex-wrap: wrap; gap: 8px; }
  .ft-nav a { writing-mode: horizontal-tb; padding: 9px 14px; font-size: 13px; letter-spacing: .08em; }
  .ft-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  .plan-tansei .asbsb-backtop.asbsb-bt-bar { --fx-backtop-rail: 34px; --fx-backtop-right: 6px; --fx-backtop-bottom: 14px; padding: 10px 7px 11px; }
}

@media (max-width: 480px) {
  .entry-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .entry-grid .entry { height: 56px; padding: 0 16px 0 18px; gap: 14px; }
}
/* 350px より狭い画面の保険（折らないと決めた字を折ってよいことにする） */
@media (max-width: 350px) { .hr-text, .bi-lead, .rc-call, .hero-sub, .hd-ja { white-space: normal; } .cd-tel, .ct-tel { flex-wrap: wrap; } }