@charset "UTF-8";
/*
 * ======================================
 * site.css － 有限会社中林木工（tos-serv015_3601001474）
 * 共通 main.css で再現できない箇所のみを追加。すべて .nbk- プレフィックス。
 * ======================================
 *
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * --------------------------------------
 * .nbk-eyebrow / __bar / __en / --light   - セクション英語ラベル（40px緑バー＋字間広め英字）。--lightは暗背景用
 * .nbk-hero-bar                           - 下層ヒーローの日本語見出し前 32px 緑バー
 * .nbk-grid / --cols2/3/5/cols-sm/__cell  - 1px ヘアライン区切りのボーダーグリッド（罫線でカードを仕切る当サイトの定番レイアウト）
 * .nbk-grid--ongreen                      - グリーン帯内で白の細線で仕切るヘアライングリッド
 * .nbk-ongreen                            - グリーン帯上の淡いラベル色（#a9d3b6）
 * .nbk-num                                - 装飾用の大きな番号（淡いグリーングレー #dfe6e1）
 * .nbk-bordered                           - 全周 1px ボーダー＋白背景の罫線カード
 * .nbk-card-link                          - ページ誘導カード（罫線セル内リンク、ホバーで薄グレー）
 * .nbk-badge / --en                       - インラインのグリーンバッジ（FLAGSHIP / 現在募集中 等）
 * .nbk-table / __row / __th / __td        - 会社概要・募集要項テーブル（緑の上罫＋行下罫、SPで縦積み）
 * .nbk-mv / __text / __media / __title / __slideshow - TOP メインビュー（左テキスト / 右スライド の分割）
 * .nbk-form / .nbk-req / .nbk-opt / .nbk-error / .nbk-required-mark / .nbk-top-accent - お問い合わせフォーム関連
 * .nbk-muted (#555) / .nbk-muted2 (#666)  - 本文の中間グレー（共通 text-light より濃い）
 * .nbk-accent-corner / --right            - 写真左下/右下の緑の角アクセント（60px四方）
 * .nbk-band-img                           - グリーン帯セクションで高さ100%に伸びる写真
 * .nbk-fmeta / .nbk-fnav / __en / __ja    - フッターの会社情報メタ表とナビ（en緑＋ja白の縦積み）
 *
 * 共通SCSSに不足していたもの（5分類）
 * --------------------------------------
 * ・装飾パターン不足：1pxヘアライン区切りグリッド（card系はradius/shadow前提のため、角ばった罫線グリッドが組めない）→ .nbk-grid
 * ・装飾パターン不足：セクション英語ラベルの「短い実線バー＋字間広め英字」あしらい → .nbk-eyebrow
 * ・構造不足：写真の角に重なる単色の四角アクセント → .nbk-accent-corner
 * ・構造不足：緑上罫＋行下罫のみのシンプルな2カラム表（table-basicはth背景前提）→ .nbk-table
 * ・値の粒度不足：装飾番号の極淡カラー（#dfe6e1）・グリーン帯上の淡色（#a9d3b6）は補助色スロットにない → .nbk-num / .nbk-ongreen
 * ・状態/装飾不足：白地・角型・1px罫線のフォーム入力（form-inputは灰地・角丸前提）→ .nbk-form スコープで上書き
 */

/* --------------------------------------------------
 * 固定ヘッダー分のオフセット（header-bar = position:fixed）
 * -------------------------------------------------- */
body { padding-top: 84px; }
@media (max-width: 1100px) { body { padding-top: 60px; } }

/* --------------------------------------------------
 * container-narrow の左右ゆとり（共通CSSは 640〜899px で側余白が無いため補完）
 * -------------------------------------------------- */
@media (max-width: 899px) {
  .container-narrow { max-width: 100%; padding-left: 5%; padding-right: 5%; }
}

/* --------------------------------------------------
 * ヘッダー微調整（日本語を上・英語を下、現在地は緑）
 * -------------------------------------------------- */
.header-bar { border-bottom: 1px solid #e6e6e6; box-shadow: none; }
.header__inner { height: 84px; }
@media (max-width: 1100px) { .header__inner { height: 60px; } }
.header__nav-ja { font-size: 1.4rem; font-weight: 700; color: #1a1a1a; margin-top: 0; order: 0; }
.header__nav-en { color: #9a9a9a; font-size: .9rem; letter-spacing: .16em; margin-top: 4px; order: 1; }
.header__nav-item--current .header__nav-en { color: #296541; }
.header__tel::before { content: none; }
.header__tel { font-size: 2.1rem; }
.header__tel i { margin-right: 8px; font-size: .72em; color: #296541; }
/* ヘッダーロゴを少し大きく */
.header__logo img { height: 52px; }
@media (max-width: 1100px) { .header__logo img { height: 40px; } }
/* フッターロゴ：ヘッダーと同じロゴ画像を白抜きで使用（暗背景対応） */
.nbk-flogo { display: inline-block; line-height: 0; }
.nbk-flogo img { height: 50px; width: auto; filter: brightness(0) invert(1); }

/* --------------------------------------------------
 * フッター CTA 帯：アイコン抑制・メールボタンを緑文字の角型に
 * -------------------------------------------------- */
.footer-cta__tel::before,
.footer-cta__mail::before { content: none; }
/* CTA帯の内側幅をフッター本体（footer-body__inner）と揃える（左右5%） */
.footer-cta__inner { padding-left: 5%; padding-right: 5%; }
.footer-cta__mail { color: #296541; border-radius: 0; font-weight: 700; }
.footer-cta__tel { font-size: 3.4rem; }
@media (max-width: 639px) {
  .footer-cta__tel { font-size: 2.4rem; }
  /* スマホ時は CTA 帯の高さを抑える */
  .footer-cta { padding: 28px 0; }
  .footer-cta__inner { gap: 16px; }
  .footer-cta .fz-32 { font-size: 2rem; }
}

/* --------------------------------------------------
 * セクション英語ラベル（緑バー＋英字）
 * -------------------------------------------------- */
.nbk-eyebrow { display: flex; align-items: center; gap: 14px; }
.nbk-eyebrow__bar { width: 40px; height: 2px; background: #296541; flex: none; }
.nbk-eyebrow__en {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1rem; font-weight: 700; letter-spacing: .26em; color: #296541;
}
.nbk-eyebrow--light .nbk-eyebrow__bar { background: #7fae8d; }
.nbk-eyebrow--light .nbk-eyebrow__en { color: #a9d3b6; }

/* 下層ヒーローの見出し前バー */
.nbk-hero-bar { display: inline-block; width: 32px; height: 2px; background: #296541; flex: none; }

/* --------------------------------------------------
 * 1px ヘアライン区切りグリッド
 * -------------------------------------------------- */
.nbk-grid { display: grid; gap: 1px; background: #e6e6e6; border: 1px solid #e6e6e6; }
.nbk-grid--cols2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.nbk-grid--cols3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.nbk-grid--cols5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.nbk-grid--cols-sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.nbk-grid__cell { background: #fff; }
/* スマホで端数セル（埋まらない箇所）の地のグレーが見えるのを防ぐため1カラム化 */
@media (max-width: 767px) { .nbk-grid--cols5 { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .nbk-grid--cols-sm { grid-template-columns: 1fr; } }

/* 装飾番号 */
.nbk-num { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 900; line-height: 1; color: #dfe6e1; }

/* ページ誘導カード（罫線セル内リンク） */
.nbk-card-link { display: block; text-decoration: none; transition: background .3s ease; }
.nbk-card-link:hover { background: #f5f6f5; }

/* 写真の角アクセント */
.nbk-accent-corner { position: absolute; bottom: -1px; left: -1px; width: 60px; height: 60px; background: #296541; }
.nbk-accent-corner--right { left: auto; right: -1px; }

/* グリーン帯で高さいっぱいに伸びる写真 */
.nbk-band-img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }

/* --------------------------------------------------
 * フッター：会社情報メタ ＆ ナビ
 * -------------------------------------------------- */
.nbk-fmeta { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin-top: 18px; font-size: 1.3rem; color: rgba(255,255,255,.6); }
.nbk-fmeta dt { color: #7fae8d; font-weight: 700; }
.nbk-fnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 22px; }
.nbk-fnav a { display: flex; flex-direction: column; gap: 3px; }
.nbk-fnav a:hover { opacity: 1; }
.nbk-fnav__en { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: .14em; color: #7fae8d; }
.nbk-fnav__ja { font-size: 1.4rem; color: #e6e6e6; transition: color .3s ease; }
.nbk-fnav a:hover .nbk-fnav__ja { color: #fff; }

/* ヘッダーロゴ角アイコンの中央寄せ（rounded-none と併用） */
.header-logo__icon { font-size: 2rem; }

/* --------------------------------------------------
 * TOP 採用導線（小）：お問い合わせ帯の上に置く控えめなフルワイドリンク
 * （nbk-card-link は display:block 前提のため流用せず専用クラスで組む）
 * -------------------------------------------------- */
.nbk-recruit-link {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 44px 0; text-decoration: none; color: #1a1a1a;
  transition: color .3s ease;
}
.nbk-recruit-link__text { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 20px; }
.nbk-recruit-link__arrow { color: #296541; transition: transform .3s ease; }
.nbk-recruit-link:hover { color: #296541; }
.nbk-recruit-link:hover .nbk-recruit-link__arrow { transform: translateX(6px); }
@media (max-width: 639px) {
  .nbk-recruit-link { padding: 32px 0; }
  .nbk-recruit-link .fz-22 { font-size: 1.7rem; }
  .nbk-recruit-link__msg { font-size: 1.3rem; }
}

/* --------------------------------------------------
 * 本文の中間グレー（共通の text-light より少し濃い）
 * -------------------------------------------------- */
.nbk-muted  { color: #555; }
.nbk-muted2 { color: #666; }

/* --------------------------------------------------
 * TOP メインビュー（左テキスト / 右スライド の分割）
 * -------------------------------------------------- */
.nbk-mv { display: flex; flex-wrap: wrap; width: 100%; }
.nbk-mv__text {
  flex: 1 1 380px;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 6vw, 104px) clamp(28px, 5vw, 70px);
  animation: nbkUp .8s ease both;
}
.nbk-mv__media { flex: 1.45 1 520px; position: relative; overflow: hidden; animation: nbkUp 1s ease .15s both; }
.nbk-mv__title { margin: 0; font-size: clamp(30px, 5.2vw, 50px); font-weight: 900; line-height: 1.45; letter-spacing: .02em; color: #1a1a1a; }
.nbk-mv__slideshow { position: relative; width: 100%; height: clamp(440px, 74vh, 860px); overflow: hidden; }
/* ROS CMS メインスライダー（swiper）を外枠の高さいっぱいに追従させる（§10.1） */
.nbk-mv__slideshow #cms-slider-1-1-area,
.nbk-mv__slideshow #cms-slider-1-1-area .slider_wrapper,
.nbk-mv__slideshow #cms-slider-1-1-area .swiper,
.nbk-mv__slideshow #cms-slider-1-1-area .swiper-wrapper { width: 100%; height: 100%; }
.nbk-mv__slideshow #cms-slider-1-1-area .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) { .nbk-mv__slideshow { height: 62vw; min-height: 240px; } }
@keyframes nbkUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------
 * TOP お知らせ：最大100件・3件分の高さでスクロール
 * （1件 ≒ 60px。3件 ≒ 180px を超えたら overflow でスクロール）
 * -------------------------------------------------- */
.nbk-news-scroll { max-height: 184px; overflow-y: auto; padding-right: 6px; }
.nbk-news-scroll { scrollbar-width: thin; scrollbar-color: #c4c4c4 transparent; }
.nbk-news-scroll::-webkit-scrollbar { width: 6px; }
.nbk-news-scroll::-webkit-scrollbar-track { background: transparent; }
.nbk-news-scroll::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 3px; }
/* お知らせはホバーで色・背景を変えない（共通 blog-list のホバーを無効化） */
.nbk-news-scroll .blog-list__link { cursor: default; }
.nbk-news-scroll .blog-list__link:hover { background: transparent; }
.nbk-news-scroll .blog-list__link:hover .blog-list__title { color: #1a1a1a; }

/* --------------------------------------------------
 * 罫線カード（全周 1px ボーダー + 白背景）
 * -------------------------------------------------- */
.nbk-bordered { border: 1px solid #e6e6e6; background: #fff; }

/* グリーン帯セクション内のヘアライングリッド（白の細線で仕切る） */
.nbk-grid--ongreen { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.18); }
.nbk-grid--ongreen .nbk-grid__cell { background: #296541; }

/* グリーン帯上の淡いラベル色 */
.nbk-ongreen { color: #a9d3b6; }

/* インラインのグリーンバッジ（FLAGSHIP / 募集中 等） */
.nbk-badge {
  display: inline-block; background: #296541; color: #fff;
  font-size: 1.2rem; font-weight: 700; letter-spacing: .08em; padding: 7px 16px;
}
.nbk-badge--en { font-family: "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; font-size: 1.1rem; }

/* --------------------------------------------------
 * 会社概要・募集要項テーブル（緑の上罫 + 行下罫）
 * -------------------------------------------------- */
.nbk-table { border-top: 2px solid #296541; }
.nbk-table__row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; border-bottom: 1px solid #e6e6e6; }
.nbk-table__th { padding: 22px 8px 22px 0; font-size: 1.4rem; font-weight: 700; color: #296541; }
.nbk-table__td { padding: 22px 0; font-size: 1.5rem; color: #333; line-height: 1.8; }
@media (max-width: 639px) {
  .nbk-table__row { grid-template-columns: 1fr; }
  .nbk-table__th { padding: 18px 0 0; }
  .nbk-table__td { padding: 6px 0 18px; }
}

/* --------------------------------------------------
 * お問い合わせフォーム
 * -------------------------------------------------- */
.nbk-req, .nbk-opt {
  display: inline-block; font-size: 1rem; font-weight: 700; letter-spacing: .06em;
  color: #fff; padding: 3px 9px; vertical-align: middle;
}
.nbk-req { background: #c0392b; }
.nbk-opt { background: #ededed; color: #888; }
.nbk-form .form-input { background: #fff; border: 1px solid #d4d4d4; border-radius: 0; }
.nbk-form .form-input:focus { border-color: #296541; }
.nbk-form input[type="checkbox"] { width: 20px; height: 20px; accent-color: #296541; flex: none; cursor: pointer; }
.nbk-topic { cursor: pointer; }
.nbk-error { margin-top: 8px; font-size: 1.25rem; color: #c0392b; font-weight: 500; }
.nbk-required-mark { color: #c0392b; }
.nbk-top-accent { border-top: 3px solid #296541; }

/* ROS CMS フォーム（cms_ajax 出力）の送信ボタンをブランドカラー（角型グリーン）に上書き */
#cms-contact-1-1-area .submit-btn {
  background: #296541; color: #fff; border: none; border-radius: 0;
  font-weight: 700; letter-spacing: .06em; cursor: pointer; transition: background .3s ease;
}
#cms-contact-1-1-area .submit-btn:hover { background: #1f4f33; }

/* --------------------------------------------------
 * スクロール連動フェードイン
 * common.js の IntersectionObserver が表示領域に入った要素へ
 * .is-visible を付与して発火（当サイト既存の .is-visible 規約に準拠）。
 * メインビューは読み込み時に nbkUp で動くため対象外。
 * -------------------------------------------------- */
.nbk-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.nbk-reveal.is-visible { opacity: 1; transform: none; }

/* 画像向け：ふわっと拡大しながらフェード */
.nbk-reveal--zoom { transform: scale(.96); }
.nbk-reveal--zoom.is-visible { transform: none; }

/* 左 / 右からスライドイン（基本の translateY を上書き） */
.nbk-reveal--left  { transform: translateX(-48px); }
.nbk-reveal--right { transform: translateX(48px); }
.nbk-reveal--left.is-visible,
.nbk-reveal--right.is-visible { transform: none; }

/* 子要素を順番に表示（背景のない grid-3 など透過レイアウト向け） */
.nbk-reveal--stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.nbk-reveal--stagger.is-visible > * { opacity: 1; transform: none; }
.nbk-reveal--stagger.is-visible > *:nth-child(2) { transition-delay: .12s; }
.nbk-reveal--stagger.is-visible > *:nth-child(3) { transition-delay: .24s; }
.nbk-reveal--stagger.is-visible > *:nth-child(4) { transition-delay: .36s; }

/* 動きを抑える設定のユーザーには即時表示 */
@media (prefers-reduced-motion: reduce) {
  .nbk-reveal,
  .nbk-reveal--zoom,
  .nbk-reveal--left,
  .nbk-reveal--right,
  .nbk-reveal--stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}