/* ==========================================================
   沖縄環境エンジニアリング株式会社  style.css
   Wix 版 (1280px 画面に 980px の中身を中央配置) の見た目を再現。
   PC は元サイトと同じ寸法。スマホは同じ素材を縦に並べる。
   数値の出典: 制作時に Wix 版を 1280 幅で実測した layout ダンプ (制作資料側に保存)
   ========================================================== */

:root {
  --w: 980px;
  --ink: #000;
  --ink-soft: #444;
  --gray-title: #a0a09f;          /* OZONE / 事業内容 の薄灰の見出し */
  --teal: #57bbbf;                /* フッター rgb(87,187,191) */
  --teal-deep: #317f81;           /* ナビの現在ページ・入力欄 rgb(49,127,129) */
  --teal-pale: #e3f1f5;           /* オゾンページの帯 rgb(227,241,245) */
  --green-line: #0c4426;          /* お問い合わせボタンの枠 */
  --blue-hover: #3078be;          /* お問い合わせボタンにカーソルを乗せた時 rgb(48,120,190) */
  --blue: #3078be;                /* 下層ページの青い見出し (Wix 実測 rgb(48,120,190)) */
  --white: #fff;
  --font-sans: "BIZ UDPGothic", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;   /* 筑紫ゴシック / UD 角ゴの代替 */
  --font-head: "Zen Kaku Gothic New", "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;           /* UD 角ゴ Large / ロダン の代替 */
  --font-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;                            /* MS P明朝 の代替 */
  --font-display: "Poppins", "Zen Kaku Gothic New", sans-serif;                                                       /* ヒーローの英字 */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.8; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6, figure { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: var(--w); margin: 0 auto; position: relative; }

/* ---------- 短い横線 (各見出しの上の「—」) ---------- */
.rule { display: block; width: 30px; height: 0; border-top: 2px solid #000; margin: 0 0 18px; }

/* ---------- ヘッダー (205px) ---------- */
.site-header { background: #fff; height: 205px; position: sticky; top: 0; z-index: 20; }  /* Wix 版と同じく、スクロールしてもヘッダーは上に残る (美紀さん指摘 09-12) */
.site-header .wrap { height: 205px; }
.site-header__name { position: absolute; left: 34px; top: 34px; font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 28px; white-space: nowrap; }
.site-header__tagline { position: absolute; left: 97px; top: 76px; font-family: var(--font-mincho); font-size: 14px; line-height: 14px; white-space: nowrap; }
.btn-contact {
  position: absolute; left: 616px; top: 18px; width: 142px; height: 40px;
  border: 1px solid var(--green-line); background: #fff; color: var(--green-line);
  font-family: var(--font-sans); font-size: 15px; line-height: 38px; text-align: center; letter-spacing: .05em;
}
.btn-contact:hover { background: rgba(61, 155, 233, .29); color: var(--blue-hover); border-color: #000; }   /* Wix 実測: 薄い青が敷かれ、文字が rgb(48,120,190)、枠が黒に */
.lang { position: absolute; left: 777px; top: 15px; width: 168px; height: 45px; }
.lang select {
  width: 100%; height: 100%; padding: 0 36px 0 15px; border: 1px solid rgba(0, 0, 0, .6); border-radius: 0; background: #fff;
  font-family: var(--font-mincho); font-size: 15px; color: #000; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.lang select:hover { background: rgba(160, 160, 159, .2); }   /* Wix 実測 */
.lang::after { content: ""; position: absolute; right: 16px; top: 17px; width: 8px; height: 8px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; transform: rotate(45deg); pointer-events: none; }
.site-nav { position: absolute; left: 0; right: 0; top: 151px; height: 50px; }
.site-nav ul { display: flex; justify-content: flex-end; height: 50px; }
.site-nav li + li { margin-left: 10px; }   /* Wix: 項目の箱の間に 10px */
.site-nav a { display: block; height: 50px; padding: 0 10px; line-height: 50px; font-size: 15px; color: #000; white-space: nowrap; }
.site-nav a:hover { color: var(--teal-deep); }
.site-nav a[aria-current="page"] { color: var(--teal-deep); }
.nav-toggle { display: none; }
.site-nav--en a { font-size: 15px; }

/* ---------- ヒーロー ---------- */
.hero { position: relative; overflow: hidden; background: #cfe3ef center / cover no-repeat; }
.hero--home { height: 695px; }
/* PC: 5 枚のスライド。動画 4 本 + 静止画 1 枚を右から左へ送る (Wix と同じ) */
.hero__slides { position: absolute; inset: 0; overflow: hidden; background: #fff; }   /* OutIn の途中で見える地色 (Wix の実測: 白まで明るくなる) */
/* PC の切り替え: Wix 連写 (2026-09-14) で「今の 1 枚が白へ消え、次が白から現れる」= OutIn を確認。クロスフェードではない */
.hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }   /* 設計図: OutIn 1000ms = 今の 1 枚が白へ消える (0.5s) → 次が白から現れる (0.5s) */
.hero__slide.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease .5s; }
.hero__slide-video, .hero__slide-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide > img:not(.hero__slide-still) { display: none; }   /* スマホ用の静止画は PC では出さない */
.hero__slide-title { display: none; }                            /* 題字もスマホ用とは別 (位置が違う) */
.hero__dots { display: none; }
.hero--home::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 62% 58% at 34% 42%, rgba(12, 58, 122, .2), rgba(12, 58, 122, 0) 72%); }   /* 題字の後ろだけ空を深くして読みやすく (Wix の空は題字の位置が濃い青) */
/* 題字は Wix の実測 (1280 幅で x=174/180/725+264/186/501、hero の上からの y=203/71/407+523/324/53、85px / 行送り 110.5px / #dbdbdb) */
.hero--home .hero__title,
.hero__pc-title {
  position: absolute; white-space: normal;
  font-family: var(--font-display); font-weight: 700; font-size: 85px; line-height: 110.5px; color: #dbdbdb; letter-spacing: -.02em;
  text-shadow: 0 2px 14px rgba(10, 50, 110, .35);
  margin: 0;
}
/* 箱の幅も Wix の実測。これで折り返す行数と位置が Wix と同じになる (1・2・5 は 2 行) */
.hero--home .hero__title { left: calc(50% - 466px); top: 203px; width: 800px; white-space: nowrap; line-height: 118px; }
.hero__pc-title--1  { left: calc(50% - 466px); top: 203px; width: 750px; }
.hero__pc-title--2  { left: calc(50% - 460px); top: 71px;  width: 833px; }
/* 3 枚目の 2 行は Wix では折り返さない。代替フォントは字幅が少し広いので箱でなく nowrap で持たせる */
.hero__pc-title--3a { left: calc(50% + 85px);  top: 407px; width: auto; white-space: nowrap; }
.hero__pc-title--3b { left: calc(50% - 376px); top: 523px; width: auto; white-space: nowrap; }
.hero__pc-title--4  { left: calc(50% - 454px); top: 324px; width: 750px; }
.hero__pc-title--5  { left: calc(50% - 139px); top: 53px;  width: 610px; }   /* Wix は 583 だが代替フォントだと「米国規制基準に」が入らないので少し広げる */
/* 英語版は 2 行に折り返すので、3 枚目と 5 枚目だけ Wix の実測 (x=182 / 489) に合わせる */
.hero__pc-title--3en { left: calc(50% - 458px); top: 407px; }
.hero__pc-title--5en { left: calc(50% - 151px); top: 53px; }
.hero--page { height: 550px; }
.hero--page .hero__box {
  position: absolute; left: calc(50% - 490px); top: 71px; width: 555px; height: 191px;
  background: rgba(255, 255, 255, .71); padding: 36px 0 0 46px;
}
.hero--page .hero__sub { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.hero--page .hero__title { font-family: var(--font-head); font-weight: 700; font-size: 44px; line-height: 1.2; color: #605e5e; }   /* Wix 実測 rgb(96,94,94) */

/* ---------- 見出しの型 ---------- */
.eyebrow { font-family: var(--font-head); font-weight: 700; font-size: 25px; line-height: 45px; color: var(--gray-title); }
.h-gray { font-family: var(--font-head); font-weight: 700; font-size: 50px; line-height: 1.3; color: var(--gray-title); }
.h-black { font-family: var(--font-head); font-weight: 700; font-size: 50px; line-height: 1.3; color: #000; }
.h-blue { font-family: var(--font-head); font-weight: 700; font-size: 32px; line-height: 1.4; color: var(--blue); }
.h-sub { font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.5; color: #000; }
.h-catch { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1.4; color: #000; }
.lead-en { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.body { font-size: 15px; line-height: 2; }
.body p + p { margin-top: 1.6em; }
.body ul { list-style: disc; padding-left: 1.4em; }
.body ul li { margin: .2em 0; }
.body b, .body strong { font-weight: 700; }

/* ---------- 共通の白いボタン / 黒いボタン ---------- */
.btn-black { display: inline-block; padding: 0 24px; height: 40px; line-height: 36px; border: 2px solid #000; background: #000; color: #fff; font-family: var(--font-mincho); font-size: 16px; }
.btn-black:hover { background: transparent; color: #000; }   /* Wix 実測: 黒 → 透明 (下地が透ける) */
.btn-outline { display: inline-block; height: 58px; line-height: 52px; border: 3px solid #282626; background: #fff; text-align: center; font-weight: 700; font-size: 18px; }
.btn-outline:hover { background: #282626; color: #fff; }

/* ---------- ホーム: お知らせ ---------- */
.notice { box-sizing: border-box; height: 286px; padding: 24px 0 0; }   /* Wix: 900→1186 */
.notice__title { font-weight: 700; font-size: 15px; }
.notice__text { font-weight: 700; font-size: 15px; margin-bottom: 30px; }
.notice__qrs { display: flex; gap: 74px; padding-left: 110px; }
.notice__qr { text-align: center; }
.notice__qr img { width: 107px; height: 107px; }
.notice__qr a { display: inline-block; margin-top: 10px; }
.notice__qr svg { width: 39px; height: 39px; }

/* ---------- ホーム: OZONE (左白 / 右写真) ---------- */
.ozone-split { display: grid; grid-template-columns: 1fr 1fr; height: 792px; margin-top: 0; }   /* Wix: 1186→1978 */
.ozone-split__text { position: relative; padding: 70px 40px 0 calc(50vw - 466px); }   /* 罫線 (2px + 18px) の分を引く */
.ozone-split__text .h-gray { font-size: 55px; line-height: 1.2; }
.ozone-split__text .h-sub { margin: 30px 0 22px; }
.ozone-split__text .body { max-width: 375px; }
.ozone-split__text .btn-black { position: absolute; left: calc(50vw - 466px); top: 664px; }
.ozone-split__img { background: var(--teal-deep); }
.ozone-split__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- ホーム: 事業内容 (波紋の背景) ---------- */
.business { position: relative; box-sizing: border-box; height: 1145px; padding: 78px 0 0; background: #e6f1f6 url(../images/business-ripple.webp) center / cover no-repeat; overflow: hidden; }  /* 波紋は生成画像 (Wix 素材の代替) */
.business::before { content: ""; position: absolute; inset: 0; background: rgba(214, 234, 246, .22); pointer-events: none; }  /* Wix 版の淡さに寄せる白い膜 */
.business .wrap { position: relative; z-index: 1; }
.business .eyebrow { margin-left: 40px; }
.business .h-gray { margin: -13px 0 0 43px; }   /* Wix は見出し同士が 13px 重なる */
.business .lead-en { margin: 49px 0 0 39px; }   /* Wix: 事業内容 2109 → Sustainable 2223 */
.business .h-catch { margin: 6px 0 0 39px; }
.cards { position: absolute; left: 0; top: 301px; display: grid; grid-template-columns: repeat(3, 311px); gap: 23px; }   /* Wix: カード上端 2358 = 節の上端 1979 + 379 (padding 98 を引いて 281) */
.card { background: #fff; height: 721px; position: relative; }
.card__img { width: 315px; height: 388px; object-fit: cover; margin-left: 3px; }
.card__title { font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 31px; text-align: center; margin-top: 18px; }
.card__text { font-size: 14px; line-height: 24px; padding: 42px 40px 0; color: #4d4d4d; font-family: var(--font-body); font-weight: 400; }   /* Wix: 本文 1 行目 2837、1 行 15 文字 */
/* Wix はカーソルを乗せると中身が 64px 上へ動き、下に隠してある「もっと見る」が出てくる
   (実測: translateY(-64px) / 0.4s ease-in-out)。カードの外に出る分は overflow で隠す */
.card { overflow: hidden; }
.card .btn-more { display: block; position: absolute; left: 93px; top: 693px; width: 142px; height: 40px; line-height: 40px; text-align: center; background: #fff; font-size: 14px; text-decoration: underline; }
@media (hover: hover) {
  .card > * { transition: transform .4s ease-in-out; }
  .card:hover > * { transform: translateY(-64px); }
  /* 出てくるまでは見せない (Wix も transition に visibility を混ぜている) */
  .card .btn-more { visibility: hidden; transition: transform .4s ease-in-out, visibility 0s .4s; }
  .card:hover .btn-more { visibility: visible; transition: transform .4s ease-in-out; }
}

/* ---------- ホーム: トピックス ---------- */
.topics { position: relative; box-sizing: border-box; padding: 73px 0 0; height: 624px; }
.topics .eyebrow { margin-left: 35px; }
.topics .h-black { margin-left: 37px; }
.topics .wrap { position: relative; }
.topic-cards { position: absolute; left: 0; top: 151px; display: grid; grid-template-columns: repeat(3, 319px); gap: 12px; }   /* Wix: 3348 = 3124 + 224 (padding 93 を引いて 131) */
.topic-card { border: 1px solid rgba(204, 204, 204, .75); height: 379px; }
.topic-card img { width: 100%; height: 239px; object-fit: cover; }
.topic-card__body { padding: 30px 16px 0; background: #fff; }
.topic-card__date { display: block; font-family: var(--font-mincho); font-size: 12px; line-height: 1; margin-bottom: 20px; }
.topic-card__title { font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 31px; }
.topic-card:hover .topic-card__title { color: var(--teal-deep); }   /* Wix 実測: 下線でなく色が rgb(49,127,129) に */

/* ---------- 下層ページ共通 ---------- */
.page { padding-bottom: 60px; }
.section { padding-top: 70px; }
.section--pale { background: var(--teal-pale); }
.section--pale-60 { background: rgba(227, 241, 245, .6); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.faq { border-top: 1px solid #ddd; }
.faq details { border-bottom: 1px solid #ddd; }
.faq summary { list-style: none; cursor: pointer; padding: 22px 60px 22px 24px; position: relative; font-weight: 700; font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 28px; top: 26px; width: 10px; height: 10px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(225deg); top: 32px; }
.faq .faq__a { padding: 0 24px 24px; font-size: 14px; line-height: 1.9; }
.faq__tab { display: inline-block; font-size: 13px; color: var(--teal-deep); border-bottom: 2px solid var(--teal-deep); padding: 0 8px 4px; margin-bottom: 20px; }
.table-list { border-top: 1px solid #000; }
.table-list__row { display: grid; grid-template-columns: 165px 1fr; gap: 0 40px; padding: 36px 0 36px 22px; border-bottom: 1px solid #000; }
.table-list__label { font-weight: 700; font-size: 18px; letter-spacing: .3em; color: var(--blue); }
.table-list__value { font-size: 18px; line-height: 1.7; color: #333; }
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.uses img { width: 260px; height: 260px; max-width: 100%; object-fit: cover; margin: 0 auto 18px; clip-path: circle(38.5% at 50% 50%); transform: scale(1.3); }  /* Wix 版と同じく、丸の中で画像を 1.3 倍に拡大して右下のアイコンを外に出す (美紀さん指摘 09-12)。clip-path は拡大前の座標なので 38.5% × 1.3 ≈ 直径 260px */
.uses p { font-size: 15px; line-height: 1.8; color: var(--blue); }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; }
.cases figure img { width: 100%; height: 300px; object-fit: cover; }
.cases figcaption { padding: 16px 0 0; }
.cases .case__name { font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.cases .case__text { font-size: 14px; line-height: 1.8; }

/* ---------- ブログ ---------- */
.blog-hero { height: 550px; background: var(--teal) center / cover no-repeat; position: relative; }
.blog-hero .wrap { padding-top: 70px; }
.blog-hero .h-black { font-size: 50px; line-height: 1.2; }
.post-list { padding: 0 0 40px; }
.post-card { display: grid; grid-template-columns: 472px 1fr; gap: 0; background: #fff; border: 1px solid #e5e5e5; margin-bottom: 20px; }
.post-card img { width: 472px; height: 354px; object-fit: cover; }
.post-card__body { padding: 30px 40px; }
.post-card__meta { font-size: 13px; color: #555; margin-bottom: 16px; }
.post-card__title { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1.5; margin-bottom: 20px; }
.post-card__excerpt { font-size: 15px; line-height: 1.8; }
.post { background: #fff; border: 1px solid #e5e5e5; max-width: 740px; margin: 40px auto; padding: 60px 70px; }
.post__meta { font-size: 13px; color: #555; margin-bottom: 20px; }
.post__title { font-family: var(--font-head); font-weight: 700; font-size: 32px; line-height: 1.45; margin-bottom: 16px; }
.post__updated { font-size: 13px; color: #555; margin-bottom: 30px; }
.post__body { font-size: 16px; line-height: 1.9; }
.post__body h2 { font-family: var(--font-head); font-weight: 700; font-size: 22px; margin: 36px 0 14px; }
.post__body p + p { margin-top: 1.5em; }
.post__body img { margin: 24px 0; }
.post__tags { margin-top: 40px; font-size: 13px; }
.post__tags a { display: inline-block; border: 1px solid #ccc; padding: 4px 10px; margin-right: 8px; }
.post-nav { max-width: 980px; margin: 0 auto; padding: 0 0 30px; display: flex; gap: 24px; font-size: 14px; }
.post-nav a[aria-current="page"] { font-weight: 700; }
.related { max-width: 980px; margin: 0 auto 40px; }
.related h2 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.related-cards { display: grid; grid-template-columns: repeat(3, 200px); gap: 20px; }
.related-cards img { width: 200px; height: 130px; object-fit: cover; }
.related-cards p { font-size: 14px; line-height: 1.5; margin-top: 8px; }

/* ---------- フッター (735px、お問い合わせフォーム) ---------- */
.site-footer { background: var(--teal); color: #000; }
.site-footer .wrap { height: 735px; }
.site-footer .rule { position: absolute; left: 32px; top: 52px; }
.site-footer__title { position: absolute; left: 32px; top: 85px; font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 25px; }
.site-footer__company { position: absolute; left: 32px; top: 136px; font-size: 18px; line-height: 30px; }
.site-footer__addr { position: absolute; left: 32px; top: 173px; font-size: 15px; line-height: 24px; }
.site-footer__sns { position: absolute; left: 31px; top: 298px; display: flex; gap: 16px; }
.site-footer__sns a { display: block; width: 25px; height: 25px; }
.site-footer__sns svg { width: 25px; height: 25px; display: block; }
.site-footer__copy { position: absolute; left: 32px; top: 392px; font-family: var(--font-mincho); font-size: 14px; line-height: 1; white-space: nowrap; }

.contact-form { position: absolute; left: 511px; top: 40px; width: 456px; }
.contact-form label { position: absolute; left: 6px; font-family: var(--font-mincho); font-size: 17px; line-height: 17px; }
.contact-form input, .contact-form textarea { position: absolute; left: 6px; width: 442px; border: 2px solid #000; background: var(--teal-deep); color: #fff; padding: 4px 8px; font-size: 15px; }
.contact-form input { height: 35px; }
.contact-form textarea { left: 0; height: 126px; resize: none; }
.contact-form .f-name label { top: 31px; } .contact-form .f-name input { top: 62px; }
.contact-form .f-mail label { top: 110px; } .contact-form .f-mail input { top: 141px; }
.contact-form .f-subj label { top: 189px; } .contact-form .f-subj input { top: 220px; }
.contact-form .f-msg label { top: 274px; left: 0; } .contact-form .f-msg textarea { top: 305px; }
.contact-form .f-submit { position: absolute; left: 282px; top: 462px; width: 142px; height: 35px; border: 2px solid #000; background: #000; color: #fff; font-family: var(--font-mincho); font-size: 16px; cursor: pointer; }
.contact-form .f-submit:hover { background: transparent; color: #000; }   /* Wix 実測: 背景は塗らず下地を透かす (「続きを読む」と同じ) */
.contact-form .f-status { position: absolute; left: 0; top: 510px; width: 442px; text-align: right; font-family: var(--font-mincho); font-size: 15px; display: none; }
.contact-form .f-status.is-shown { display: block; }
.contact-form .hp { position: absolute; left: -9999px; }

/* ---------- 上へ戻る (黒い丸) ---------- */
.to-top { position: fixed; right: 48px; bottom: 60px; z-index: 40; width: 50px; height: 50px; border-radius: 50%; border: 0; background: #000; color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s; }
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top::after { content: ""; position: absolute; left: 19px; top: 21px; width: 11px; height: 11px; border-left: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); }


/* ---------- 英語ページ向けの調整 (英文は長いので枠に収める。PC 幅のみ。スマホは共通の縦積み) ---------- */
@media (min-width: 1000px) {
  /* 英語ホームは Wix 英語版の実測 (ヘッダー 233 / オゾン 897 / 事業内容 1417 / トピックス 695) */
  html[lang="en"] .site-header { height: 233px; }
  html[lang="en"] .site-nav { top: 179px; }
  html[lang="en"] .site-nav a { font-size: 15px; padding: 0 8px; }      /* 客の要望 (2026-09-14): 「More」に畳まず 7 項目を全部見せる。詰めて 1 行に収める (合計 948px < 980px) */
  html[lang="en"] .site-nav li + li { margin-left: 0; }
  html[lang="en"] .hero--home .hero__title { top: 203px; }
  html[lang="en"] .ozone-split { height: 897px; }
  html[lang="en"] .ozone-split__text .btn-black { top: 847px; }
  html[lang="en"] .business { height: 1417px; }
  html[lang="en"] .cards { top: 361px; }
  /* 英語版はカードの高さが中身なりなので、下端からの位置で置く */
  html[lang="en"] .card .btn-more { top: auto; bottom: -12px; }
  html[lang="en"] .topics { height: 695px; }
  html[lang="en"] .business .h-gray { width: 208px; }   /* Wix 英語版は「Business / content」の 2 行 */
  html[lang="en"] .site-footer__copy { top: 340px; }
  html[lang="en"] .site-footer__sns { top: 245px; }
  html[lang="en"] .ozone-split__text .h-sub { font-size: 28px; line-height: 1.45; margin-top: 54px; }
  html[lang="en"] .card__title { font-size: 22px; line-height: 1.35; padding: 0 20px; }
  /* ナビの「もっと見る」折りたたみ (Wix 英語版は 5 項目 + もっと見る) */
  /* 英語版のヘッダー / フッター (Wix 英語版の実測: 社名 2 行 [82,34] 256 幅、副題 [65,104]、フッターは 15px 明朝 + TEL/FAX) */
  html[lang="en"] .site-header__name { left: 82px; width: 256px; text-align: center; white-space: normal; line-height: 28.6px; }
  html[lang="en"] .site-header__tagline { left: 65px; top: 104px; }
  html[lang="en"] .site-footer__company { font-family: var(--font-mincho); font-size: 15px; line-height: 15px; top: 133px; }
  html[lang="en"] .site-footer__addr { font-family: var(--font-mincho); font-size: 15px; line-height: 15px; top: 148px; width: 371px; white-space: normal; }
  html[lang="en"] .site-footer__tel { position: absolute; left: 32px; top: 178px; font-family: var(--font-mincho); font-size: 15px; line-height: 15px; }
  html[lang="en"] .hero--home .hero__title,
  html[lang="en"] .hero__pc-title { white-space: normal; width: 980px; font-size: 64px; line-height: 1.2; letter-spacing: -.01em; }
  html[lang="en"] .card { height: auto; padding-bottom: 96px; }
  html[lang="en"] .card__text { font-size: 13.5px; line-height: 1.65; }
  html[lang="en"] .card .btn-more { bottom: -12px; }
  html[lang="en"] .site-footer__copy { white-space: nowrap; }
  html[lang="en"] .ozone-split__text .body { max-width: 400px; }
  html[lang="en"] .table-list__label { letter-spacing: .05em; }
}

/* ==========================================================
   スマホ / タブレット (1000px 未満)
   ========================================================== */
@media (max-width: 999px) {
  :root { --w: 100%; }
  .wrap { width: 100%; padding: 0 19.7px; }   /* Wix のスマホ版は左右 19.7px (320 換算 16.4px) */
  /* Wix のスマホ版に合わせた並び: お問い合わせ → キャッチ → 社名 の縦積み中央揃え。
     Wix は 262.6px 幅で描いて端末幅まで拡大表示するので、実測値を 390/320 = 1.219 倍した px で置く */
  .site-header, .site-header .wrap { height: 147.7px; }
  .site-header .wrap { padding: 0; display: flex; flex-direction: column; align-items: center; }
  .site-header__name, .site-header__tagline, .btn-contact, .lang { position: static; }
  .btn-contact { order: 1; width: 119.8px; height: 41.8px; margin-top: 27.9px; padding: 0; font-size: 14.8px; line-height: 40.2px; text-align: center; }
  .site-header__tagline { order: 2; display: block; font-size: 13.1px; line-height: 15.6px; margin-top: 16.4px; text-align: center; }
  .site-header__name { order: 3; display: block; font-size: 14.8px; line-height: 19.7px; margin-top: 7.4px; text-align: center; padding: 0; }
  .lang { display: none; }   /* Wix のスマホ版にも言語切替は出ていない (切替はメニューから) */
  /* 英語版は社名が長く 2 行になるぶんヘッダーが高い (Wix 実測 183px、社名は y151 から 2 行) */
  html[lang="en"] .site-header, html[lang="en"] .site-header .wrap { height: 183px; }
  html[lang="en"] .site-header__tagline { white-space: normal; line-height: 15.6px; margin-top: 16.4px; }
  html[lang="en"] .site-header__name { white-space: normal; width: 269.1px; line-height: 19.7px; margin-top: 9px; }
  /* Wix のスマホ版は枠なしの線 3 本 (45x21、右 24 / 上 27)。押せる範囲は padding で確保する */
  .nav-toggle { display: block; position: absolute; right: 9.8px; top: 12.3px; width: 56.6px; height: 36.9px; padding: 9.8px; border: 0; border-radius: 0; background: none; cursor: pointer; box-sizing: border-box; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 9.8px; width: 36.9px; height: 2px; background: #000; }
  .nav-toggle span { top: 18.1px; } .nav-toggle span::before { left: 0; top: -9px; } .nav-toggle span::after { left: 0; top: 7.4px; }
  .site-nav { position: static; height: auto; display: none; margin: 8.2px -16px 0; border-top: 1px solid #eee; }
  .site-nav.is-open { display: block; }
  .site-nav ul { display: block; height: auto; }
  .site-nav a { padding: 0 13.1px; border-bottom: 1px solid #eee; }

  .hero--home { height: 62vw; min-height: 213.3px; }
  /* Wix のスマホ版の hero は動画でなく静止画 5 枚の自動送り (PC は動画) */
  .hero--home video, .hero--home > .hero__title, .hero__pc-title, .hero__slide-still { display: none; }
  .hero__slide > img:not(.hero__slide-still) { display: block; }
  .hero__slides { display: block; position: absolute; inset: 0; overflow: hidden; }
  .hero__slide-title { display: block; }
  .hero__dots { display: flex; }
  /* Wix は右から左へ送る (重ねてのフェードではない) */
  /* スマホは右から左へ (Wix 実測: 約 1.05 秒かけて x が 100% → 0、旧は 0 → -100%) */
  .hero__slide { opacity: 1; transform: translateX(100%); transition: transform 1s ease, visibility 0s 1s; }   /* 設計図 (スマホ定義): SlideHorizontal, 1000ms */
  .hero__slide.is-on { transform: translateX(0); transition: transform 1s ease; }
  .hero__slide img { width: 100%; height: 100%; object-fit: cover; }
  .hero__slide-title { position: absolute; left: 19px; width: 280px; white-space: nowrap;   /* 改行は <br> の位置だけ。端末フォントの幅差で 1 行目が折れないように (実機で 3 行になった) */ margin: 0; color: #fff; font-family: var(--font-head); font-weight: 700; text-shadow: 0 1px 4.9px rgba(0,0,0,.35); }
  .hero__slide-title--a { top: 108.3px; font-size: 30px; line-height: 40.3px; }   /* Wix スマホ実測 31px/40.3px、改行は HTML の <br> で固定 */   /* Wix は 2 行 (実測 h105)。31px だと 3 行に転ぶ */
  .hero__slide-title--b { top: 19.7px; font-size: 25px; line-height: 36px; }   /* 「沖縄の水環境を守る、」10 文字 = 250px + 余裕。実機 (Android) は 27px で収まらなかった */   /* 「沖縄の水環境を守る、」10 文字を 1 行に (客の指定の改行位置) */
  /* 3〜5 枚目は 1 行 1 文で、Wix では折り返さずに収まっている。代替書体だと 2 文字ぶん溢れるので気付かない範囲で詰める */
  .hero__slide-title--c { top: 19.7px; width: 300.3px; font-size: 29.5px; line-height: 41.8px; }
  /* 英語版は 5 枚とも同じ 2 行の題字で、行の間が日本語より広い */
  /* 英語のスマホ題字は Wix 実測 (390 幅で 23px / 行送り 29.9px / 左 16.4px / hero の上から 44.3px)。
     日本語より 1 行が長く 4 行になるので、行送りを日本語と同じにすると hero からはみ出す */
  html[lang="en"] .hero__slide-title { left: 16.4px; width: calc(100% - 32.8px); font-size: 23px; line-height: 29.9px; }
  html[lang="en"] .hero__slide-title--a,
  html[lang="en"] .hero__slide-title--b,
  html[lang="en"] .hero__slide-title--c { top: 44.3px; }
  .hero__dots { position: absolute; left: 0; right: 0; bottom: 11.5px; display: flex; justify-content: center; gap: 8.2px; }
  .hero__dots span { width: 6.6px; height: 6.6px; border-radius: 50%; background: rgba(255,255,255,.55); }
  .hero__dots span.is-on { background: #fff; }

  .hero--home .hero__title { left: 5%; top: 18%; width: 90%; white-space: normal; font-size: clamp(24.6px, 8.5vw, 49.2px); line-height: 1.35; }
  /* Wix のスマホ版は 題名 が上、キャッチ が下 (PC 版と逆) */
  /* Wix のスマホ版は hero の高さが中身なり: 箱の上に 20.5px、下に 30.4px の余白。箱は左右 19.7px、内側は上 25 / 左右 13 / 下 16 */
  /* 各ページの <style> が .hero--<名前> { height: ... } を持つので、こちらはクラス 2 つで詳細度を上げて勝つ */
  .hero.hero--page { height: auto; min-height: 0; padding: 20.5px 0 30.4px; }
  .hero.hero--page .hero__box { position: static; left: auto; top: auto; margin: 0 19.7px; width: auto; height: auto; padding: 20.5px 10.7px 13.1px; display: flex; flex-direction: column; align-items: flex-start; }
  .hero.hero--page .hero__title { order: 1; font-size: 32.8px; line-height: 1.42; margin: 0; }
  .hero.hero--page .hero__sub { order: 2; font-size: 13.1px; line-height: 18.1px; margin: 15.6px 0 0; }

  .notice__qrs { padding-left: 0; gap: 26.3px; }
  .ozone-split { grid-template-columns: 1fr; height: auto; }
  .ozone-split__text { padding: 32.8px 13.1px 24.6px; }
  .ozone-split__text .h-gray { font-size: 32.8px; }
  .ozone-split__text .body { max-width: none; }
  .ozone-split__text .btn-black { position: static; margin-top: 19.7px; }
  .ozone-split__img { height: 60vw; }
  .business { height: auto; padding: 39.4px 0; }
  .notice { height: auto; }
  .business .cards, .topic-cards { position: static; }
  .business .eyebrow, .business .h-gray, .business .lead-en, .business .h-catch { margin-left: 0; }
  .business .h-gray, .topics .h-black { font-size: 29.5px; }
  .business .h-catch { font-size: 18.1px; }
  .cards { grid-template-columns: 1fr; gap: 19.7px; margin-top: 32.8px; }
  .card { height: auto; padding-bottom: 26.3px; }
  .card { height: auto; padding-bottom: 65.6px; }
  .card__img { width: 100%; height: auto; aspect-ratio: 315 / 388; margin: 0; }
  .card .btn-more { left: 50%; transform: translateX(-50%); top: auto; bottom: 19.7px; }   /* PC 用の top:568.6px を打ち消す (両方あると top が勝って本文に重なる) */
  .topics { height: auto; padding: 39.4px 0; }
  .topics .eyebrow, .topics .h-black { margin-left: 0; }
  .topic-cards { grid-template-columns: 1fr; gap: 13.1px; }
  .topic-card { height: auto; }
  .topic-card__body { padding-bottom: 19.7px; }

  .section { padding-top: 32.8px; }
  .two-col { grid-template-columns: 1fr; gap: 19.7px; }
  .h-gray, .h-black { font-size: 27.9px; }
  .h-blue { font-size: 19.7px; }
  .h-catch { font-size: 18.1px; }
  .table-list__row { grid-template-columns: 1fr; gap: 4.9px; padding: 16.4px 0; }
  .table-list__label { font-size: 13.1px; letter-spacing: .2em; }
  .table-list__value { font-size: 13.1px; }
  .uses { grid-template-columns: 1fr 1fr; }
  .uses img { width: 123.1px; height: 123.1px; }
  .cases { grid-template-columns: 1fr; }
  .btn-outline { display: block; height: auto; line-height: 1.5; padding: 9.8px; }

  .blog-hero { height: 44vw; min-height: 180.5px; }
  .blog-hero .wrap { padding-top: 24.6px; }
  .blog-hero .h-black { font-size: 26.3px; }
  .post-card { grid-template-columns: 1fr; }
  .post-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .post-card__body { padding: 16.4px 13.1px; }
  .post-card__title { font-size: 18.1px; }
  .post { margin: 13.1px; padding: 19.7px 14.8px; }
  .post__title { font-size: 19.7px; }
  .post-nav { flex-wrap: wrap; padding: 0 13.1px 16.4px; }
  .related { padding: 0 13.1px; }
  .related-cards { grid-template-columns: 1fr 1fr; }
  .related-cards img { width: 100%; }

  /* Wix のスマホ版は 住所 → 送信フォーム → コピーライト の順 (PC 版はコピーライトが先) */
  .site-footer .wrap { height: auto; padding: 32.8px 19.7px 26.3px; display: flex; flex-direction: column; }
  .site-footer__copy { order: 9; }
  .site-footer .rule, .site-footer__title, .site-footer__company, .site-footer__addr, .site-footer__sns, .site-footer__copy, .contact-form { position: static; }
  .site-footer__title { margin-bottom: 35px; }   /* Wix スマホ実測: 見出し下端 73 → 社名 108 */
  .site-footer__company { font-size: 17px; line-height: 27px; }
  .site-footer__sns { margin: 69px 0 0 54px; }   /* Wix スマホ実測: 住所の 69px 下、左端から 74px */
  .site-footer__copy { white-space: normal; font-size: 14px; margin-top: 108px; }
  .site-footer__tel { position: static; margin-top: 6.6px; }
  /* Wix のスマホ版: 入力欄は左右 9.8px いっぱい、高さ 43、行の間は 11、送信も全幅 */
  .contact-form { width: auto; margin: 22px -12px 0; display: grid; gap: 9px; }   /* Wix スマホ実測: SNS アイコンの 22px 下から */
  .contact-form label, .contact-form input, .contact-form textarea, .contact-form .f-submit, .contact-form .f-status { position: static; }
  .contact-form label { display: block; margin-bottom: 15.6px; }
  .contact-form input, .contact-form textarea { width: 100%; height: 35.3px; box-sizing: border-box; }
  .contact-form textarea { height: 126.4px; }
  .contact-form .f-submit { width: 100%; height: 35.3px; margin: 1px 0 0; }
  .to-top { right: 13.1px; bottom: 13.1px; }

  /* --- Wix のスマホ版に合わせた文字の大きさ ---
     Wix は 262.6px 幅で描いた画面を端末幅まで拡大表示するので、スマホでは文字も一律に大きい。
     ここは実測値 (Wix の px x 端末幅/320) をそのまま置く。tools/sizefix.py がクラスごとの目標値を出す */
  .h-blue, .h-blue span { font-size: 34px; line-height: 47.6px; }
  .h-gray { font-size: 28px; }
  .h-black { font-size: 27px; }
  .lead-en { font-size: 19px; }
  .hero__title { font-size: 33px; }
  .hero__sub { font-size: 13px; }
  .card__title, .topic-card__title, .post-teaser__title, .case__name { font-size: 22px; }
  .post-teaser__excerpt, .faq__tab, .faq__a, .faq__a span, .message__body p, .message__sign span { font-size: 16px; }
  .table-list__label, .table-list__label span { font-size: 20px; }
  .table-list__value, .table-list__value span { font-size: 18px; }
  .body, .body p, .body span, .body li, .rp-lead p, .gap { font-size: 17px; }
  .b, .rp-b, .case__text { font-size: 15px; }
  .btn-black { font-size: 15.3px; }
  .btn-outline span { font-size: 18px; }
  .contact-form label { font-size: 17px; }
  .site-footer__addr { font-size: 14px; }
  .pfas-faq__title { font-size: 32px; }
  .faq__tab { display: table; margin: 0 auto 16.4px; }   /* Wix のスマホ版は中央 */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .to-top, .faq summary::after { transition: none; }
}

/* 320 幅の端末 (iPhone SE 等) だけ、題字が右で切れないよう少し詰める。
   Wix は 320 で描いて端末幅に拡大するので切れないが、こちらは 390 基準で組んでいるため */

/* ---------- 入場アニメーション (Wix の設計図: motion-slideIn / motion-floatIn) ----------
   PC: 下層ページの題字が、読み込み時に下から (translateY 100%) せり上がりながら現れる。1200ms、Wix と同じイージング
   スマホ: 見出し・罫線・本文・ボタンが、画面に入った時に 60px 下から浮き上がる (opacity 0→1)。1200ms
   どちらも animation-fill-mode: backwards で、始まるまでは見えない (Wix は paused → JS で再生) */
@keyframes motion-slideIn {
  0%   { opacity: 0; animation-timing-function: step-end; }
  0.01% { opacity: 1; transform: translateY(100%); clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); }
  100% { opacity: 1; transform: translateY(0); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}
@keyframes motion-floatIn {
  0%   { opacity: 0; transform: translateY(60px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero--page .hero__title,
  .hero--pfos .hero__sub { animation: motion-slideIn 1200ms 1ms cubic-bezier(0.645, 0.045, 0.355, 1) backwards 1; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 999px) {
  /* 画面に入るまで止めておき、js/main.js が .is-in を付けたら動く */
  [data-float] { opacity: 0; }
  [data-float].is-in { animation: motion-floatIn 1200ms 1ms cubic-bezier(0.445, 0.05, 0.55, 0.95) backwards 1; opacity: 1; }
}