/* ================================================
   modern.css — Nexpo Design Enhancement
   全ページ共通のモダン化オーバーライド
   ================================================ */

/* ─── CSS Custom Properties ─── */
:root {
  --mn-primary:          #086310;
  --mn-primary-light:    #0d8f1e;
  --mn-primary-dark:     #064e0c;
  --mn-primary-gradient: linear-gradient(135deg, #064e0c 0%, #0d8f1e 100%);
  --mn-primary-shadow:   0 4px 20px rgba(8, 99, 16, 0.28);

  --mn-surface:          #ffffff;
  --mn-surface-subtle:   #f4f7f4;
  --mn-border:           #dce6dc;

  --mn-shadow-xs: 0 1px 4px  rgba(0, 0, 0, 0.05);
  --mn-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.07);
  --mn-shadow-md: 0 6px 28px rgba(0, 0, 0, 0.11);
  --mn-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.13);

  --mn-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --mn-duration: 0.22s;

  --mn-radius-sm: 10px;
  --mn-radius-md: 16px;
  --mn-radius-lg: 22px;
}


/* ════════════════════════════════════════════════
   HEADER — site-header（USS会社ヘッダー）
   ════════════════════════════════════════════════ */
/* .site-header {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px) saturate(1.7);
  -webkit-backdrop-filter: blur(12px) saturate(1.7);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
  transition: background var(--mn-duration) var(--mn-ease),
              box-shadow var(--mn-duration) var(--mn-ease);
} */

/* ドロップダウンメニュー */
.dropdown-menu {
  border: none !important;
  border-radius: var(--mn-radius-md) !important;
  box-shadow: var(--mn-shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden;
}

.dropdown-menu a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: background var(--mn-duration) var(--mn-ease),
              color var(--mn-duration) var(--mn-ease);
}

.dropdown-menu a:hover {
  background: rgba(8, 99, 16, 0.07) !important;
  color: var(--mn-primary) !important;
}

.dropdown-menu li:last-child a {
  border-bottom: none !important;
}

/* ナビゲーションリンクホバー */
.nav-item > a {
  transition: color var(--mn-duration) var(--mn-ease);
}

.nav-item > a:hover {
  color: var(--mn-primary) !important;
}


/* ════════════════════════════════════════════════
   HEADER — navigate（Nexpo製品ナビ）
   ════════════════════════════════════════════════ */
header.navigate {
  backdrop-filter: blur(14px) saturate(1.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.8);
}

header.navigate.is-show,
header.navigate.is-show-second {
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.10) !important;
}


/* ════════════════════════════════════════════════
   BUTTONS / LINKS
   ════════════════════════════════════════════════ */

/* メインCTAボタン（緑） */
.-Theme-link,
.-main-link {
  background: var(--mn-primary-gradient) !important;
  border-color: transparent !important;
  box-shadow: var(--mn-primary-shadow) !important;
  transition:
    box-shadow var(--mn-duration) var(--mn-ease),
    transform   var(--mn-duration) var(--mn-ease),
    opacity     var(--mn-duration) var(--mn-ease) !important;
}

.-Theme-link:hover,
.-main-link:hover {
  box-shadow: 0 6px 30px rgba(8, 99, 16, 0.42) !important;
  opacity: 0.93;
  color: #fff !important;
}

.-Theme-link,
.-main-link,
.-Theme-link:visited,
.-main-link:visited {
  color: #fff !important;
}

/* 白ボタン */
.-White-link {
  border-color: var(--mn-border) !important;
  box-shadow: var(--mn-shadow-xs) !important;
  transition:
    box-shadow var(--mn-duration) var(--mn-ease),
    transform   var(--mn-duration) var(--mn-ease) !important;
}

.-White-link:hover {
  box-shadow: var(--mn-shadow-sm) !important;
}

/* 緑枠ボタン */
.-Theme-boredr-link {
  border-color: var(--mn-primary) !important;
  transition:
    background var(--mn-duration) var(--mn-ease),
    box-shadow  var(--mn-duration) var(--mn-ease) !important;
}

.-Theme-boredr-link:hover {
  background: rgba(8, 99, 16, 0.07) !important;
  box-shadow: 0 2px 10px rgba(8, 99, 16, 0.18) !important;
}

/* テーマカラーバッジ */
.-border-Theme {
  border-color: var(--mn-primary) !important;
  color: var(--mn-primary);
  transition: background var(--mn-duration) var(--mn-ease);
}

.-border-Theme:hover {
  background: rgba(8, 99, 16, 0.07);
}


/* ════════════════════════════════════════════════
   CARDS / BOXES
   ════════════════════════════════════════════════ */

/* 白ボックス */
.-bg-White {
  border: 1px solid var(--mn-border) !important;
  box-shadow: var(--mn-shadow-sm);
}

/* 緑グラデーションボックス */
.-bg-Theme {
  background: var(--mn-primary-gradient) !important;
  box-shadow: var(--mn-primary-shadow);
}

/* グレー枠ボックス */
.-border-gray {
  border-color: var(--mn-border) !important;
  box-shadow: var(--mn-shadow-sm);
}

/* ニュースカード */
.-border-news {
  border-color: var(--mn-border) !important;
  box-shadow: var(--mn-shadow-sm);
}

/* 3カラム･4カラムカード */
.-three-box,
.-four-box {
  transition: box-shadow var(--mn-duration) var(--mn-ease);
}



/* ════════════════════════════════════════════════
   -down-move: transition: all → transform のみに限定
   「戻る瞬間のボコっ」を防ぐ
   ════════════════════════════════════════════════ */
.-down-move,
.-down-move:hover {
  transition: transform 0.2s ease !important;
}

/* ボタン系は box-shadow･opacity も加える */
.-Theme-link.-down-move,
.-main-link.-down-move,
.-White-link.-down-move,
.-Theme-boredr-link.-down-move {
  transition: transform    0.2s ease,
              box-shadow   0.2s ease,
              opacity      0.2s ease !important;
}