@charset "utf-8";
/* ============================================================
   K.E興業株式会社 上書きCSS（sinoki の css/style.css の後に読み込む）
   方針：レイアウトは sinoki のまま。ここでやるのは
     1) 配色の置き換え（ロゴのグリーン #009944 / 深緑 #00733a の2色でまとめる）
        ※2026-09-18: sinoki の赤・オレンジ・シアン（#e60012 ほか）は style.css 側の色リテラルを
          直接グリーンに置換済み。差し色のスカイブルーも廃止して緑1系統に統一した
     2) 英字フォント（Montserrat → Manrope）
     3) 見出しを和文主体に（英字は小ラベル）
     4) ロゴ・写真の差し替えに伴うサイズ調整
   新しいレイアウト部品は作らない。
   ============================================================ */
:root {
  --ke-green: #009944;
  --ke-green-d: #00733a;
  --ke-sky: #009944;
  --ke-sky-d: #00733a;
  --ke-line: #dfe6ea;
  --primary-color: #009944;
  --primary-color2: #009944;
}
.ke-en { font-family: 'Manrope', 'Noto Sans JP', sans-serif; }

/* ---------- 1) 配色の置き換え ---------- */
/* ヘッダー／SPドロワー／SP固定CTAは linect のCSS（css/ke-header.css・色置換済み）に任せる。ここでは触らない */
.c-btn, a.c-btn, button.c-btn, a.c-btn-flat.c-btn--red { background: var(--ke-green); }
.c-btn:hover, a.c-btn:hover, button.c-btn:hover, a.c-btn-flat.c-btn--red:hover { background: var(--ke-green-d); }
/* VIEW MORE 等のボタン：元テーマのホバー演出（斜めの塊が左下からスライドインする）はそのまま使い、
   色だけ黒 #0A0A0A → 深緑に。休止時に左下へ覗く黒い三角が、緑のボタンから浮いて見えていたため */
a.c-btn-flat::before { background: var(--ke-green-d); }
a.c-btn-flat.-bk { background: var(--ke-green-d); }
a.c-btn-flat.-bk::before { background: var(--ke-green); }
/* ★ `.c-btn--red` 付きのボタン（TOPのABOUT「VIEW MORE」）は style.css:15259 の
   `a.c-btn-flat.c-btn--red::before{background:#0A0A0A}` が詳細度で勝ち、
   上の指定を上書きして黒い三角が残る。同じ詳細度で潰す */
a.c-btn-flat.c-btn--red::before { background: var(--ke-green-d); }
.home-mv__catch .catchLabel { color: #fff; }
.home-mv__catch .catchText .catchAccent { color: #7fe0a8; }
.p-home-svc__item:hover::before { background: linear-gradient(to top, rgba(0, 115, 58, .70), rgba(0, 0, 0, .25)); }
.p-recycle-sys__btn { background-color: var(--ke-green); border-radius: 50px; }
.p-recycle-sys__card:hover::after { background: linear-gradient(to top, rgba(0, 115, 58, .82) 0%, rgba(0, 0, 0, .45) 50%, rgba(0, 0, 0, .08) 100%); }
.p-recycle-sys__num { color: var(--ke-green); }
.p-topics__col .p-topics__tit { background: linear-gradient(135deg, var(--ke-green) 0%, var(--ke-green-d) 100%); }
.section-heading__num { color: rgba(0, 153, 68, .28); }
.sub-shop__table tr::before { background: var(--ke-green); }
.sub-shop__map-note { color: var(--ke-green); }
.sub-contact__list-top--tel { border-color: var(--ke-green); }
.sub-contact__item dt .required { background-color: var(--ke-green); }
.sub-contact__submit input { background: var(--ke-green); }
.sub-contact__time span.sub-contact__time-label { background: var(--ke-green); border: none; color: #fff; }
.sub-thanks__title { color: var(--ke-green-d); }
/* フッターCTA：深緑→緑の斜めグラデ＋2導線を薄枠の半透明カードに（ユーザー指定で 9/13 の版に戻した。sinoki の .footer_cta_box / .btnArea / .c-btnB 構造はそのまま） */
.footer_cta { position: relative; background: linear-gradient(120deg, #005c2f 0%, var(--ke-green-d) 45%, var(--ke-green) 100%); overflow: hidden; }
.footer_cta::before { content: ""; position: absolute; right: -8rem; top: -10rem; width: 42rem; height: 42rem; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
.footer_cta .inner { position: relative; }
.footer_cta__lead { margin-top: 2rem; font-size: 1.5rem; line-height: 2; color: rgba(255, 255, 255, .92); }
.footer_cta .footer_cta_box { align-items: stretch; gap: 2.4rem; }
.footer_cta .btnArea { flex: 1 1 0; margin-top: 0; padding: 3rem 3.2rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 1.4rem; background: rgba(255, 255, 255, .06); }
.footer_cta .footer-txt { font-size: 1.5rem; margin-bottom: 1.4rem; letter-spacing: .06em; }
.footer_cta .footer-txt::before { content: ""; display: inline-block; width: 1.6rem; height: 2px; background: #fff; vertical-align: middle; margin-right: 1rem; opacity: .8; }
.footer_cta .telArea .tel { color: #fff; }
.footer_cta .telArea .tel .num { letter-spacing: .04em; }
.footer_cta .telInfo { opacity: .85; }
.footer_cta .c-btnB { position: relative; display: inline-flex; align-items: center; gap: 1.4rem; background: #fff; border-radius: 50px; padding: 1.6rem 5.2rem 1.6rem 3.6rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.footer_cta .c-btnB::after { content: ""; position: absolute; right: 2.2rem; top: 50%; width: .8rem; height: .8rem; border-top: 2px solid var(--ke-green); border-right: 2px solid var(--ke-green); transform: translateY(-50%) rotate(45deg); transition: right .25s ease; }
.footer_cta .c-btnB:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.footer_cta .c-btnB:hover::after { right: 1.8rem; }
.footer_cta .c-btnB__text { color: var(--ke-green-d); font-weight: 700; letter-spacing: .04em; }
@media screen and (max-width: 768px) {
  .footer_cta .btnArea { width: 100%; padding: 2.4rem 2rem; text-align: center; }
  .footer_cta .footer-txt::before { display: none; }
}

/* ---------- 下層ページのタイトル帯：agent（agent-r-e.co.jp）テーマの .l-page-cover をそのまま使用 ---------- */
.l-page-cover { background-image: url(../img/ke/mv01.jpg); background-repeat: no-repeat; background-position: center bottom 25%; background-size: cover; position: relative; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px; overflow: hidden; z-index: 3; }
/* 写真は沖縄の海（cover.jpg）だったが、サイト全体を緑基調にした結果この帯だけ鮮やかな青が浮いた。
   海の写真に緑の幕を重ねると会社概要セクションと同じくティール（青緑）に転ぶため、
   写真自体を K.E の実写（ダクト施工現場 mv01）へ差し替え、その上に緑の幕を重ねている。
   ※旧 cover.jpg はサーバー・ローカルとも残置（戻せるように） */
.l-page-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(0, 58, 29, .74) 0%, rgba(0, 58, 29, .46) 55%, rgba(0, 58, 29, .32) 100%); }
.l-page-cover__inner { padding: 85px 0 40px 0; position: relative; z-index: 2; }
.l-page-cover__ttl { font-size: 12vw; font-weight: bold; line-height: 1.45; margin-left: auto; margin-right: auto; max-width: 116.8rem; padding-left: 2.4rem; padding-right: 2.4rem; text-align: left; color: #fff; text-shadow: 0 2px 14px rgba(0, 40, 80, .25); }
.l-page-cover__ttl span { display: block; font-size: 4vw; font-weight: 500; }
.l-page-cover .c-en { font-family: 'Manrope', 'Noto Sans JP', sans-serif; }
@media screen and (min-width: 768px) {
  .l-page-cover__inner { padding: 140px 0 80px 0; }
  .l-page-cover__ttl { font-size: 6rem; }
  .l-page-cover__ttl span { font-size: 1.6rem; }
}
@media screen and (max-width: 767px) {
  .l-page-cover { border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; }
}

/* ============================================================
   MV：agent テーマ（agent-r-e.co.jp）の home-mv 型
   全面写真1枚 ＋ 左下に「背後の大きな英字3行／主キャッチ／説明3行」を重ねる。
   agent はキャッチが catch.png（画像）だが、ここはテキストで同じ見た目を組んでいる。
   写真は img/ke/mv-main.jpg（PC 1920x1072）／mv-main-sp.jpg（SP 1080x1350）。
   ============================================================ */
/* sinoki の黒い暗幕（rgba(0,0,0,.4) の全面ベタ）は外し、
   写真の右側（厨房・ダクト）は明るいまま、コピーが乗る左下だけ濃くする斜めグラデにする。
   ※背景が明るいクリーム色の壁なので、これが無いと白のコピーが読めない */
.home-mv__slide::before { background: none; }
.home-mv__slide { position: relative; }
.home-mv__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(0, 38, 20, .64) 0%, rgba(0, 38, 20, .46) 26%, rgba(0, 38, 20, .18) 50%, rgba(0, 38, 20, 0) 68%),
    linear-gradient(to top, rgba(0, 38, 20, .36) 0%, rgba(0, 38, 20, 0) 38%);
}

.home-mv__text { left: 4%; right: auto; bottom: 11%; width: min(62vw, 900px); z-index: 2; }

.ke-mvcatch { position: relative; }
/* 背後の大きな英字3行（agent の "Real Estate / Management / Partner" にあたる部分）。
   主キャッチの少し上から流し、キャッチと説明文の両方に重なるように置く */
.ke-mvcatch__en {
  position: absolute;
  left: -.05em;
  top: -.95em;
  bottom: auto;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  font-weight: 800;
  font-size: clamp(4rem, 5vw, 8rem);
  line-height: 1.04;
  letter-spacing: .02em;
  white-space: nowrap;
  color: rgba(126, 226, 168, .28);
}
.ke-mvcatch__en span { display: block; }
/* 主キャッチ */
.ke-mvcatch__main {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: clamp(2.8rem, 3.5vw, 5.4rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .03em;
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(0, 24, 12, .55);
}
.ke-mvcatch__main .catchAccent { display: inline; color: #7fe0a8; font-weight: 700; font-size: inherit; line-height: inherit; text-shadow: 0 2px 18px rgba(0, 24, 12, .55); }
/* 説明3行 */
.ke-mvcatch__lead {
  position: relative;
  z-index: 1;
  margin: 2.2rem 0 0;
  color: #fff;
  font-size: clamp(1.4rem, 1.15vw, 1.8rem);
  font-weight: 500;
  line-height: 2;
  letter-spacing: .04em;
  text-shadow: 0 2px 14px rgba(0, 24, 12, .55);
}
/* agent はスクロールインジケータをコメントアウトして出していない。キャッチに白い線が重なるので同じく出さない */
.home-mv__scrolldown { display: none; }

@media screen and (max-width: 768px) {
  /* ★ transform で位置を作らないこと。
     この要素には .js-fadeUp が付いており、テーマ側が transform（translateY）を握っている。
     sinoki 既定の left:50% + translate(-50%,-50%) はフェードイン発火で打ち消されて右にずれる。
     そのため left/right/padding だけで幅を決める（PC側も transform 不使用） */
  .home-mv__text {
    left: 0;
    right: 0;
    top: auto;
    bottom: 8%;
    width: auto;
    padding: 0 24px;
    box-sizing: border-box;
  }
  /* ★ 2026-09-26 修正：style.css 1753 のネスト内 @media に .home-mv__text { transform: translate(-50%,-50%) } が
     残っており、.js-fadeUp / .is-inview（style.css 961/986）より後ろにあるため常に勝っていた。
     実機ではキャッチが画面幅の半分だけ左にはみ出していた（capture.py --show-fadeup は transform:none を
     強制するのでキャプチャには写らない）。フェードインの動きは残したまま、詳細度を上げて打ち消す */
  .home-mv .home-mv__text.js-fadeUp { transform: translateY(50px); }
  .home-mv .home-mv__text.js-fadeUp.is-inview { transform: translateY(0); }
  .ke-mvcatch__en { font-size: 8.5vw; left: -.04em; top: -.9em; color: rgba(126, 226, 168, .26); }
  /* 6vw だと 375px 以下で「る。」だけ2行目に落ちるため、14文字が 320px 幅でも1行に収まる 5.6vw＋改行なしに */
  .ke-mvcatch__main { font-size: 5.6vw; line-height: 1.6; white-space: nowrap; }
  .ke-mvcatch__lead { margin-top: 1.6rem; font-size: 3.5vw; line-height: 1.95; }
}

/* ---------- 会社セクション ----------
   背景は沖縄の海辺の街（oki02）だったが、海の青に緑の半透明幕が乗って
   セクション全体がティール（青緑）に転んでいたため、K.Eの実写（ダクト施工現場）に差し替え。
   幕も濃い緑に寄せて、青みが出ないようにする */
.company::before { background-image: url(../img/ke/mv01.jpg); filter: blur(4px) brightness(.78); }
.company::after { background: rgba(0, 58, 29, .70); }
.footer .footer-box .infoArea .navArea .listWrap .listTit { color: var(--ke-green); }
.copyArea { background: var(--ke-green-d); }
.footer__copyright { background: transparent; color: #fff; }
.footer .page-top span { color: #fff; }

/* ---------- 2) 英字フォント Montserrat → Manrope ---------- */
.c-titA__en, .sub-section-title, .header__tel, .sub-contact__tel-link, .sub-contact__tel, .telArea .tel,
.p-home-svc__tit span, .p-recycle-sys__cardEn, .section-heading__num, .c-btn, a.c-btn, button.c-btn,
.home-mv__catch .catchLabel, .footer .footer-box .infoArea .navArea .listWrap .listTit {
  font-family: 'Manrope', 'Noto Sans JP', sans-serif;
}

/* ---------- 3) 見出しを和文主体に（sinoki は英字8remが主） ---------- */
body .c-titA { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
body .c-titA .c-titA__en { order: 1; position: relative; font-size: 1.3rem; font-weight: 800; letter-spacing: .22em; color: var(--ke-green); line-height: 1; padding-left: 2.8rem; text-transform: uppercase; white-space: nowrap; }
body .c-titA .c-titA__en::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.8rem; height: 2px; background: var(--ke-green); transform: translateY(-50%); }
body .c-titA .c-titA__jp { order: 2; font-size: 3.6rem; font-weight: 700; color: #222; line-height: 1.3; letter-spacing: .04em; margin: 0; padding: 0; border: none; width: auto; }
body .c-titA--white .c-titA__en, body .c-titA--white .c-titA__jp { color: #fff; }
body .c-titA--white .c-titA__en::before { background: #fff; }
body .c-titA--center { align-items: center; text-align: center; }
.p-aboutus .c-titA__jp { margin-top: 0; }
@media screen and (max-width: 768px) {
  body .c-titA .c-titA__jp { font-size: 2.6rem; }
}

/* ---------- 4) 素材差し替えに伴う調整 ---------- */
.header__logo img, .header-sp__logo img { height: auto; width: 100%; }
.footer .footer-box .infoArea .footer_information_item .footer__logo img { width: 24rem; }
/* sinoki の「.home-mv__catch span { font-size:7rem }」が MV 内の span 全部に効くので打ち消す
   （キャッチは .ke-mvcatch 側で組んでいる。上の MV ブロックを参照） */
.home-mv__catch span { font-size: inherit; line-height: inherit; text-shadow: none; }
/* フッターCTA：見出し下の一文（sinokiには無い要素なので余白だけ） */
.footer_cta__lead { margin-top: 2rem; font-size: 1.5rem; line-height: 2; color: #fff; }
/* フッター：ナビ項目が sinoki より多く長いため、住所列が潰れないように列幅を固定し、リストは折り返す
   （sinoki 側はネストCSSで詳細度が高いので同じ深さで指定） */
.footer .footer-box .infoArea .footer_information_item { width: 34%; flex: 0 0 34%; min-width: 0; }
.footer .footer-box .infoArea .navArea { flex: 1 1 auto; min-width: 0; }
.footer .footer-box .infoArea .navArea .listWrap .footer__list { flex-wrap: wrap; gap: 1.2rem 3rem; }
.footer .footer-box .infoArea .navArea .listWrap .footer__list .footer__item .footer__link { white-space: normal; }
@media screen and (max-width: 768px) {
  .footer .footer-box .infoArea .footer_information_item { width: 100%; flex: 1 1 auto; }
}
/* サービスタイル：タイトル下に短い説明を1行足す（sinokiのタイルはタイトルのみ） */
.p-home-svc__item { cursor: default; }
/* 2026-10-04 サブ事業（設計・メンテナンス）は下段で低く。メイン（工事・販売）は sinoki 既定の 42rem のまま */
.p-home-svc__item.p-home-svc__item--sub { height: 26rem; }
@media screen and (max-width: 768px) { .p-home-svc__item.p-home-svc__item--sub { height: 16rem; } }
.p-home-svc__tit .p-home-svc__txt { display: block; margin-top: .8rem; font-size: 1.3rem; font-weight: 400; line-height: 1.7; letter-spacing: .02em; color: rgba(255, 255, 255, .9); max-width: 46rem; }
@media screen and (max-width: 768px) {
  .p-home-svc__item, .p-home-svc__item--wide { height: 22rem; }
  .p-home-svc__tit .p-home-svc__txt { display: none; }
  /* SPで「フード・ダクト工事／空調設備工事」が2行に割れて「工事」が分断されるため一段小さく */
  .p-home-svc__tit { font-size: 1.8rem; }
  /* 募集バナーはPC向けの横長1枚（1776x592）。SPで全幅に縮めると文字が潰れて読めないので、
     文字が入っている左側だけを切り出して表示する（画像は差し替えず、表示範囲だけ変える） */
  .recruit-banner img { aspect-ratio: 3 / 2; object-fit: cover; object-position: left center; }
}
/* 実績カード（p-recycle-sys）はリンクではなく表示のみ */
.p-recycle-sys__card { cursor: default; }
/* 会社概要ページ：ごあいさつ・お問い合わせ（sinoki の部品に文言を足しただけ） */
.ke-greeting { margin-top: 4rem; align-items: start; }
.ke-greeting__catch { font-size: 2.2rem; font-weight: 700; line-height: 1.5; margin-bottom: 1.6rem; }
.ke-greeting .grid-col02_text p + p { margin-top: 1.2rem; }
.ke-note { display: inline-block; margin-left: .6rem; font-size: 1.2rem; color: var(--ke-sky-d); }
.ke-sec__lead { margin-top: 2.4rem; font-size: 1.5rem; line-height: 2; color: #444; max-width: 82rem; }
.ke-contact { padding: 9rem 0 10rem; background: #fff; scroll-margin-top: 10rem; }
.ke-contact .sub-contact__btm { margin-top: 4rem; }
.sub-contact__list-top--fax { padding: 3rem; border-radius: 14px; background: #fff; border: 1px solid var(--ke-sky); }
.sub-contact__list-top--fax .c-titA--contact { flex-wrap: wrap; gap: .6rem 2rem; }
.sub-contact__list-top--fax .sub-contact__item-top { margin-top: 2.5rem; }
.sub-contact__fax-num { font-size: 4.2rem; font-weight: 800; letter-spacing: .05em; line-height: 1.2; color: #0A0A0A; }
.ke-contact .sub-contact__box { padding-top: 7rem; }
.ke-contact .sub-contact__intro { margin: 2.4rem 0 0; text-align: left; font-size: 1.5rem; line-height: 2; }
.ke-contact .sub-contact__form { margin-top: 3rem; padding-top: 0; }
.sub-contact__submit { margin-bottom: 0; }
@media screen and (max-width: 768px) {
  .ke-contact { padding: 6rem 0 7rem; }
  .sub-contact__list-top--fax { padding: 2.5rem 1.75rem; }
  .sub-contact__fax-num { font-size: 3.2rem; }
  .ke-contact .sub-contact__box { padding-top: 5rem; }
  .ke-greeting__catch { font-size: 1.9rem; }
}
/* MV微調整：SPは SCROLL の線がキャッチに重なるため非表示 */
@media screen and (max-width: 768px) {
  .home-mv__scrolldown { display: none; }
}