/*
THEME NAME: kanzai
THEME URI: 
DESCRIPTION: 
VERSION: 0.1
AUTHOR: 
AUTHOR URI:
TAGS: 
*/

/* Two-column with sidebar on left from the /examples/ folder  */
@import url('style_page.css');


/* ===== 基本フォント ===== */
body {
  font-family:
    "Yu Mincho",
    "游明朝",
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "MS Mincho",
    serif;
  color: #222;
  line-height: 1.9;
  background-color: #F5F5F7;
}

.customize-support {
	margin: 0;
}

/* =========================
   共通
   ========================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;             /* ← 明示すると安心 */
  background: rgba(245, 245, 247, 0.9);
  /*background: rgba(255, 255, 255, 0.6); /* 初期はやや透明 */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* ← 影はここに持たせる */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header * {
  box-sizing: border-box;
}

/* ロゴ */
.site-header .header-logo {
  display: flex;
  align-items: center;
  line-height: 1;
}
.site-header .header-logo img {
  max-height: 48px;   /* ロゴサイズはここで調整（45〜55px目安） */
  width: auto;
  display: block;
}

/* メニュー共通（黒点を消す） */
.site-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =========================
   PC用ヘッダー
   ========================= */
.header-pc {
  display: flex;
  align-items: center;             /* ロゴとメニューの高さを揃える */
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);*/
}

.header-pc .header-menu {
  display: flex;
  align-items: center;
  gap: 22px;                       /* ｜の代わりに間隔で区切る */
}

.header-pc .header-menu a {
  display: block;
  text-align: left;　　　　　　　　　 /* PCメニューの文字左寄せ　sp時はcenter */
  text-decoration: none;
  color: #111;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.header-pc .header-menu a span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  color: #666;
  letter-spacing: 0.06em;
}

/* PCナビ：リンク色を常に固定 */
.header-pc .header-menu a,
.header-pc .header-menu a:hover,
.header-pc .header-menu a:focus,
.header-pc .header-menu a:visited {
  color: #111;
}

/* =========================
   PCナビ：色変化＋浮きアニメーション
   ========================= */
.header-pc .header-menu a {
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

@media (hover:hover) {
  .header-pc .header-menu a:hover {
    color: #333;                 /* ほんの少しだけ薄く */
    transform: translateY(-2px); /* わずかに浮かせる */
  }
}

/* =========================
   PC用 ドロップダウンメニュー設定
   ========================= */
.header-pc .header-menu > li {
  position: relative; /* 子要素の基準点に */
}

/* 下層メニューのコンテナ（最初は非表示） */
.header-pc .dropdown-menu-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(245, 245, 247, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-width: 180px;
  padding: 8px 0;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.05);
  
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1010;
}

/* ホバー時にフワッと表示 */
.header-pc .has-dropdown:hover .dropdown-menu-sub,
.header-pc .has-dropdown:focus-within .dropdown-menu-sub {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 下層メニュー内のリンクスタイル */
.header-pc .dropdown-menu-sub a {
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  text-align: center; /* 中央揃えで見やすく */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.header-pc .dropdown-menu-sub a:hover {
  background-color: rgba(0, 140, 200, 0.08); /* さりげないインフラブルー */
  color: #008cc8 !important;
  transform: none !important; /* 親要素の浮き上がりアニメーションをキャンセル */
}

/* =========================
   スマホ用 アコーディオンメニュー設定
   ========================= */
.header-sp .has-dropdown-sp {
  position: relative;
}

/* 下層メニュー（初期状態は閉じる） */
.header-sp .dropdown-menu-sub-sp {
  display: none;
  background: rgba(0, 0, 0, 0.02); /* 少し暗くして階層感を出す */
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.header-sp .dropdown-menu-sub-sp a {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  background: transparent;
}

/* 親メニューに下向き矢印のニュアンスを追加 */
.header-sp .dropdown-trigger-sp .arrow-icon::after {
  content: " ∨";
  font-size: 8px;
  display: inline-block;
  margin-left: 3px;
  transition: transform 0.3s ease;
}

/* 開いている時は矢印を反転 */
.header-sp .has-dropdown-sp.is-active .dropdown-trigger-sp .arrow-icon::after {
  transform: rotate(180deg);
}

/* =========================
   スマホ用ヘッダー
   ========================= */
.header-sp {
  display: none;                   /* 初期は非表示（PCで出ない＝チラつき防止） */
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 右上ハンバーガー（枠なし） */
.menu-btn {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  padding: 10px;
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

/* 3本線：同じ太さ */
.menu-btn span {
  display: block;
  width: 22px;
  height: 3px;
  background: #333;
}

/* スマホメニュー（最初は閉じる） */

.sp-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  /*background: #F5F5F7;*/
  /*background: rgba(255, 255, 255, 0.6);  初期はやや透明 */
  background: rgba(245, 245, 247, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: background-color 0.3s ease, box-shadow 0.3s ease;

  padding: 10px 0;
  border-top: 1px solid #e6e6e6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sp-menu.is-open {
  display: block;
}

.sp-menu-list a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #111;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.sp-menu-list a span {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 400;
  color: #666;
  letter-spacing: 0.06em;
}

/* PC + SP 共通 ヘッダー専用 underlineを完全に無効化*/
.header-menu a,
.sp-menu-list a,
.header-menu a:hover,
.sp-menu-list a:hover {
  text-decoration: none;
}

/* =========================
   レスポンシブ切り替え
   ========================= */
@media (max-width: 767px) {
  .header-pc { display: none; }
  .header-sp { display: flex; }
  .site-header .header-logo img {
    max-height: clamp(
      34px,
      calc(34px + (48 - 34) * ((100vw - 320px) / (767 - 320))),
      48px
    );
}
}


/* =========================
   home.php
   ========================= */
.home-hero {
  position: relative;
  width: 100%;
  height: 70vh;           /* 画面高さ基準でレスポンシブ */
  min-height: 400px;
  overflow: hidden;
}

/* 背景画像 */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: 
    /*linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),  画像の上に50%の黒いマスクを重ねて暗くする */
    url("images/common/top01_new.jpg");
  background-size: cover;
  background-position: center;
}

/* 全体配置（完全中央寄せ） */
.hero-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
}

/* 背面の濃い青（右上にずらす） */
.outer-box {
  position: absolute;
  top: -20px;        /* 上にずらす */
  left: 20px;        /* 右にずらす */
  width: 280px;
  height: 280px;
  background: rgba(0, 140, 200, 0.75);
  z-index: 1;
}

/* 手前の薄い青（文字はこちら） */
.inner-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 280px;
  background: rgba(180, 220, 240, 0.6);
  padding: 24px;
  z-index: 2;
  box-sizing: border-box;
}

/* 文字 */
.hero-catch {
  font-size: 26px !important;
  /*font-size: 1.6rem;*/
  font-weight: 600;         /* medium と bold の中間 */
  color: #ffffff;
  line-height: 1.8;        /* ← 行間を広げる（重要） */
  letter-spacing: 0.08em; /* ← 文字と文字の間隔 */
  margin-top: 12px;
  margin-bottom: 12px;
}

.hero-sub {
  font-size: 14px !important;
  /*font-size: 0.9rem;*/
  color: #ffffff;
}

/* =========================
   アニメーション（スッ → フェード）
   ========================= */

/* 初期状態 */
.outer-box,
.inner-box,
.hero-catch,
.hero-sub {
  opacity: 0;
}

/* 四角：スッと表示（移動ほぼ無し） */
.outer-box,
.inner-box {
  transform: scale(0.98);
  animation: boxShow 0.4s ease-out forwards;
}

/* 濃い → 薄い の順 */
.outer-box { animation-delay: 0s; }
.inner-box { animation-delay: 0.1s; }

/* 見出し：フェードのみ */
.hero-catch {
  animation: textFadeOnly 0.6s ease-out forwards;
  animation-delay: 0.55s;
}

/* サブ：フェードのみ（最後） */
.hero-sub {
  animation: textFadeOnly 0.6s ease-out forwards;
  animation-delay: 1.0s;
}

/* キーフレーム */
@keyframes boxShow {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes textFadeOnly {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* アクセシビリティ配慮 */
@media (prefers-reduced-motion: reduce) {
  .outer-box,
  .inner-box,
  .hero-catch,
  .hero-sub {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .hero-box {
    width: 220px;
    height: 220px;
    left: 50%;
  }

  .outer-box,
  .inner-box {
    width: 220px;
    height: 220px;
  }

  .outer-box {
    top: -12px;
    left: 12px;
  }

  .hero-catch {
	font-size: 19px !important;
    /*font-size: 1.1rem;*/
  }

  .hero-sub {
	font-size: 13px !important;
    /*font-size: 0.8rem;*/
  }
}

/* =========================
   NEWS section
   ========================= */
.home-news-section {
  background: #F5F5F7;
  padding: clamp(28px, 6vw, 56px) 16px 0; /* 下部の余白はabout側で調整するため0に */
}

.news-container {
  max-width: 920px; /* ABOUTのインナー幅（920px）と統一 */
  margin: 0 auto;
  padding-top: clamp(20px, 4vw, 40px);
}

.news-title-area {
  margin-bottom: clamp(18px, 4vw, 28px);
}

/* タイトル行（ABOUT/PRODUCTSと完全統一） */
.news-titleRow {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 18px);
}

.news-title {
  margin: 0;
  font-family: "Times New Roman", "Noto Serif JP", serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: clamp(22px, 3.2vw, 32px);
  color: #222;
  line-height: 1;
}

.news-line {
  flex: 1;
  height: 0.5px;
  background: #444;
  opacity: 0.7;
}

.news-sub {
  margin: clamp(8px, 1.8vw, 10px) 0 0;
  font-size: clamp(12px, 2.4vw, 14px);
  color: #444;
}

/* ニュースリストのスタイリング */
.news-content-area {
  max-width: 800px;
  margin: 0 auto;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-item {
  border-bottom: 1px solid #d9d9d9;
}

.news-link {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 16px 8px;
  text-decoration: none;
  color: #222;
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}

@media (hover: hover) {
  .news-link:hover {
    background-color: rgba(0, 140, 200, 0.04); /* ほんのり管材ブルー */
    padding-left: 14px;
  }
}

/* 日付とバッジのエリア */
.news-date-wp {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 140px; /* 横並び時の幅を確保 */
  flex-shrink: 0;
}

.news-date {
  font-size: 14px;
  color: #666;
  font-family: "Times New Roman", sans-serif;
}

/* NEW! バッジ */
.news-new-badge {
  background: #008cc8; /* 水インフラをイメージする青 */
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 2px;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* 記事タイトル */
.news-item-title {
  margin: 0;
  font-size: clamp(14px, 2.8vw, 15px);
  line-height: 1.5;
  font-weight: 500;
  text-align: left;
}

/* view more ボタン（ABOUTボタンと完全にデザイン・挙動を同期） */
.news-btn-area {
  display: flex;
  justify-content: center;
  margin-top: clamp(18px, 4.5vw, 30px); /* ABOUTの余白（30px）と同期 */
}

.news-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(200px, 48vw, 320px); /* ABOUTボタン（320px）と横幅を同期 */
  padding: clamp(10px, 2.4vw, 14px) clamp(18px, 4.5vw, 28px);
  font-size: clamp(13px, 2.8vw, 14px);
  letter-spacing: 0.06em;
  color: #fff;
  background: #1f1f1f;
  border: 1px solid #111;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,0.35); /* 特徴的な下部シャドウ */
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* ホバー時の「少し沈み込む」動きを完全再現 */
.news-more-btn:hover {
  background: #111;
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.35);
  color: #fff;
}

/* アクセシビリティ（Tabキー選択時）の枠線も同期 */
.news-more-btn:focus-visible {
  outline: 3px solid rgba(0, 120, 212, 0.6);
  outline-offset: 3px;
}
/* スマホ対応（縦並びへの変化） */
@media screen and (max-width: 640px) {
  .news-link {
    flex-direction: column;
    gap: 6px;
    padding: 14px 4px;
  }
  .news-date-wp {
    min-width: auto;
  }
}

/* =========================
   ABOUT section
   ========================= */
.home-about {
  background: #F5F5F7;
  /*border-top: 1px solid #d9d9d9;  画像の上の薄線っぽさ */
  padding: clamp(28px, 6vw, 56px) 16px;
}

.about-inner {
  max-width: 920px;
  margin: 0 auto;
  padding-top: clamp(20px, 4vw, 40px);       /*sectionの間スペースありすぎだったらここを削除*/
}

.about-head {
  margin-bottom: clamp(18px, 4vw, 28px);
}

/* ABOUT + line */
.about-titleRow {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 18px);
}

.about-title {
  margin: 0;
  font-family: "Times New Roman", "Noto Serif JP", serif; /* 画像の雰囲気寄せ */
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: clamp(22px, 3.2vw, 32px);
  color: #222;
  line-height: 1;
}

.about-line {
  flex: 1;
  height: 0.5px;
  background: #444;
  opacity: 0.7;
}

/* subtitle */
.about-sub {
  margin: clamp(8px, 1.8vw, 10px) 0 0;
  font-size: clamp(12px, 2.4vw, 14px);
  color: #444;
}

/* body text */
.about-body {
  max-width: 640px; /* 文章幅を制限して読みやすく */
  margin: 0 auto;
  text-align: left;
}

.about-body p {
  margin: 0;
  font-size: clamp(14px, 2.8vw, 16px);
  line-height: clamp(1.9, 1.2vw + 1.6, 2.2); /* 自然に行間が変化 */
  color: #222;
}

/* ABOUT本文エリア */
.about-body {
  position: relative;
  /*max-height: 6.6em;   /* 3行 × 最大行高 *//* 見せたい行数 */
  overflow: hidden;
}

/* 下部ぼかし（フェードアウト） 
.about-body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6.6em;　　　　/* ← 3行分フェード *//* 2行フェード 4.4em*/
 /* pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(245, 245, 247, 0)    0%,
    rgba(245, 245, 247, 0.15) 20%,
    rgba(245, 245, 247, 0.3)  40%,
    rgba(245, 245, 247, 0.45) 60%,
    rgba(245, 245, 247, 0.65) 80%,
    rgba(245, 245, 247, 0.85) 100%
  );
}
*/

/* CTA */
.about-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(18px, 4.5vw, 30px);
}

.about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(200px, 48vw, 320px);
  padding: clamp(10px, 2.4vw, 14px) clamp(18px, 4.5vw, 28px);
  font-size: clamp(13px, 2.8vw, 14px);
  letter-spacing: 0.06em;
  color: #fff;
  background: #1f1f1f;
  border: 1px solid #111;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,0.35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.about-btn:hover {
  background: #111;
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.35);
  color: #fff;
}

.about-btn:focus-visible {
  outline: 3px solid rgba(0, 120, 212, 0.6);
  outline-offset: 3px;
}


/* ==========================================================================
   【個別上書き】幅920pxを維持し、行頭左揃えのままブロックごと中央に寄せる 20260623追記
   ========================================================================== */

/* 1. TOPページの会社情報テキストブロック */
.home-about .about-body {
  max-width: 920px !important;    /* 最大幅920pxをキープ */
  width: fit-content !important;  /* ★箱の幅を文章の長さに合わせることで左右に余白を作る */
  margin-left: auto !important;   /* 左右オートマージンでブロックごと中央寄せ */
  margin-right: auto !important;
  text-align: left !important;    /* ★文章の行頭は左揃えをキープ */
}

/* 2. 代表者メッセージページのテキストブロック */
.page-message-body {
  max-width: 920px !important;    /* 最大幅920pxをキープ */
  width: fit-content !important;  /* ★箱の幅を文章の長さに合わせることで左右に余白を作る */
  margin-left: auto !important;   /* 左右オートマージンでブロックごと中央寄せ */
  margin-right: auto !important;
  text-align: left !important;    /* ★文章の行頭は左揃えをキープ */
}



/* =========================
   沿革　会社概要　事業所一覧
   ========================= */
.about-links {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: clamp(20px, 4vw, 40px);       /*sectionの間スペースありすぎだったらここを削除*/
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

/* カード全体 */
.about-card {
  position: relative;
  text-decoration: none;
  overflow: hidden;
}

/* 正方形トリミング */
.about-card-img {
  aspect-ratio: 1 / 1;
}

.about-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(50%) grayscale(10%);
  transition: filter .45s ease, transform .45s ease;
}

/* オーバーレイ（文字） */
.about-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: #fff;
  pointer-events: none;
  transform: translateY(-10px);
}

.about-card-title {
  font-size: 20px !important;
  /*font-size: 1.25rem;*/
  letter-spacing: 0.15em;
  font-weight: 500;
  margin-bottom: 10px;

}

/* ボタン */
.about-card-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  border: 1px solid #fff;
  border-radius: 4px;

  height: 36px;
  width: clamp(160px, 42vw, 210px);

  font-size: 14px !important;
  /*font-size: .85rem;*/
  letter-spacing: .1em;
  transition: background .3s ease, color .3s ease;
}

/* hover演出 */
.about-card:hover img {
  filter: brightness(100%) grayscale(0);
  transform: scale(1.03);
}

.about-card:hover .about-card-btn {
  background: #fff;
  color: #000;
}

@media (max-width: 768px) {
  .about-links {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-card-img {
    aspect-ratio: 2.2 / 1; /* ← スマホ時だけ横長 */
  }
}

/* =========================
   PRODUCTS section（about-links の下）
   ========================= */
.home-products {
  background: #F5F5F7;
  padding: clamp(28px, 6vw, 56px) 16px;
}

.products-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: clamp(20px, 4vw, 40px);
}

.products-head {
  margin-bottom: clamp(18px, 4vw, 28px);
}

/* タイトル行（ABOUTと同系統） */
.products-titleRow {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 18px);
}

.products-title {
  margin: 0;
  font-family: "Times New Roman", "Noto Serif JP", serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: clamp(22px, 3.2vw, 32px);
  color: #222;
  line-height: 1;
}

.products-line {
  flex: 1;
  height: 0.5px;
  background: #444;
  opacity: 0.7;
}

.products-sub {
  margin: clamp(8px, 1.8vw, 10px) 0 0;
  font-size: clamp(12px, 2.4vw, 14px);
  color: #444;
}

/* タイルグリッド（画像6枚） */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}

/* 各タイル */
.product-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background: #000;
}

/* 画像領域：PCは横長、タイルとして統一 */
.product-img {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(82%);
  transition: transform .35s ease, filter .35s ease;
}

/* =========================
   PRODUCTS：テキスト中央 → hoverで上（ボタン出現はコメントアウト）
   ========================= */

.product-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* 製品名：通常時はど真ん中 */
.product-name{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  margin:0;
  white-space: nowrap;
  max-width: 92%;
  overflow: hidden;
  font-size: clamp(11px, 2.2vw, 14px);
  letter-spacing: 0.08em;
  color:#fff;
  /*text-shadow: 0 2px 10px rgba(0,0,0,.45);*/
  transition: transform .28s ease;
}

/* ボタンの基本スタイルは残しておきます */
.product-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, calc(-50% + 18px));
  opacity:0;
  pointer-events:none;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  height:34px;
  width: clamp(140px, 22vw, 190px);
  border:1px solid rgba(255,255,255,0.95);
  border-radius:4px;
  font-size:.85rem;
  letter-spacing:.08em;
  color:#fff;
  background: rgba(0,0,0,0.18);
  transition: opacity .28s ease, transform .28s ease;
}

@media (hover:hover) and (pointer:fine){
  /* ホバー時に製品名を少し上に上げる動き（これは維持します） */
  .product-card:hover .product-name{
    transform: translate(-50%, calc(-50% - 10px));
  }
  
  /* ホバー時にカード内の「詳しく見る」ボタンを浮き上がらせる処理をコメントアウト */
  /*
  .product-card:hover .product-btn{
    opacity:1;
    transform: translate(-50%, calc(-50% + 22px));
  }
  */

  /* キーボード操作（Tabフォーカス）対応 */
  .product-card:focus-visible .product-name{
    transform: translate(-50%, calc(-50% - 10px));
  }
  /*
  .product-card:focus-visible .product-btn{
    opacity:1;
    transform: translate(-50%, calc(-50% + 22px));
  }
  */
}

/* タッチ端末（スマホ）ではボタンを完全に出さない */
@media (hover:none){
  .product-btn{ display:none; }
}

/* hover演出 */
.product-card:hover .product-img img {
  transform: scale(1.03);
  filter: brightness(100%);
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-img {
    aspect-ratio: 4 / 3;
  }

  .product-btn {
    width: min(180px, 80%);
    height: 34px;
  }
}

/* ==========================================================================================
   【追加】PRODUCTSセクション下部：「取扱品目一覧はこちら＞」ボタン用スタイル
   ========================================================================================== */
.products-btn-area {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 5vw, 40px); /* グリッドとの間隔 */
}

.products-more-btn {
  display: inline-flex;
  align-items: center;

  justify-content: center;
  min-width: clamp(200px, 48vw, 320px); /* ABOUTやNEWSボタンとサイズ同期 */
  padding: clamp(10px, 2.4vw, 14px) clamp(18px, 4.5vw, 28px);
  font-size: clamp(13px, 2.8vw, 14px);
  letter-spacing: 0.06em;
  color: #fff;
  background: #1f1f1f;
  border: 1px solid #111;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,0.35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.products-more-btn:hover {
  background: #111;
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.35);
  color: #fff;
}

.products-more-btn:focus-visible {
  outline: 3px solid rgba(0, 120, 212, 0.6);
  outline-offset: 3px;
}
/* =========================
   home-products 下リンク（CATALOG / RECRUIT）
   ========================= */
.home-link-section{
  background:#F5F5F7;
  padding: 0 16px clamp(28px, 6vw, 56px) ;
  /*padding: clamp(36px, 7vw, 64px) 16px;*/
  /*padding: clamp(28px, 6vw, 56px) 16px;*/
}

.home-link-inner{
  max-width:1100px;
  margin:0 auto;
  padding-top: clamp(20px, 4vw, 40px);       /*sectionの間スペースありすぎだったらここを削除*/
  /*margin:0 auto clamp(48px, 8vw, 72px);*/
}

.home-link-head{
  margin-bottom:18px;
}

/* 見出し（ABOUT / PRODUCTS と統一） */
.home-link-titleRow{
  display:flex;
  align-items:center;
  gap:clamp(12px, 2.5vw, 18px);
}

.home-link-title{
  margin:0;
  font-family:"Times New Roman","Noto Serif JP",serif;
  font-weight:500;
  letter-spacing:.08em;
  font-size:clamp(22px, 3.2vw, 32px);
  color:#222;
  line-height:1;
}

.home-link-line{
  flex:1;
  height:.5px;
  background:#444;
  opacity:.7;
}

.home-link-sub{
  margin:8px 0 0;
  font-size:clamp(12px, 2.4vw, 14px);
  color:#444;
}

/* 画像カード */
.home-link-card{
  position:relative;
  display:block;
  text-decoration:none;
  overflow:hidden;
}

.home-link-img{
  aspect-ratio: 16 / 4.5;
}

.home-link-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease, filter .4s ease;
}

/* 中央ボタン */
.home-link-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  padding:12px 36px;
  background:rgba(0,0,0,0.85);
  color:#fff;
  font-size:14px;
  /*font-size:0.9rem;*/
  letter-spacing:.12em;
  white-space:nowrap;
}

/* hover */
@media (hover:hover){
  .home-link-card:hover img{
    transform:scale(1.03);
    filter:brightness(90%);
  }
}

/* ===== レスポンシブ ===== */
@media (max-width:768px){
  .home-link-img{
    aspect-ratio: 16 / 6.5;
  }

  .home-link-btn{
    padding:10px 28px;
	font-size:13px;
    /*font-size:.85rem;*/
  }
}

/* ボタン上のラベル（商報 / 電子カタログ） */
/* 中央まとめコンテナ（これが基準） */
.home-link-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  pointer-events:none;
}

/* ラベル（商報 / 電子カタログ） */
.home-link-label{
  margin:0;
  font-size: clamp(14px, 2.4vw, 18px);
  font-weight:600;
  letter-spacing:.08em;
  color:#fff;
  white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.home-link-label_2 {
  margin:0;
  font-size: clamp(14px, 2.4vw, 18px);
  font-weight:600;
  letter-spacing:.08em;
  color:#222;
  white-space:nowrap;
  /*text-shadow:0 2px 10px rgba(0,0,0,.45);*/
	
}

/* ボタンは既存のまま */
.home-link-center .home-link-btn{
  pointer-events:auto;
}

/* home-link-center 内ではボタンを通常配置に戻す */
.home-link-center .home-link-btn{
  position: static;
  transform: none;
}

/* =========================
   PRODUCTS CATALOG：左右2分割
   ========================= */
.home-link-catalog .home-link-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0; /* 画像をぴったりくっつける */
}

/* 高さは既存のまま使う（重要） */
.home-link-catalog .home-link-img{
  aspect-ratio: 16 / 6.5;
}

/* スマホは縦並び */
@media (max-width:768px){
  .home-link-catalog .home-link-split{
    grid-template-columns: 1fr;
  }

  .home-link-catalog .home-link-img{
    aspect-ratio: 16 / 6.5;
  }
}

/* =========================
   CONTACT section
   ========================= */
.home-contact{
  background:#F5F5F7;
}

.home-contact-inner{
  max-width:1100px;
  margin:0 auto;
  padding-top: clamp(20px, 4vw, 40px);       /*sectionの間スペースありすぎだったらここを削除*/
}

/* 見出し */
.home-contact-head{
  margin-bottom: clamp(24px, 5vw, 36px);
  padding: 0 16px;
}

.home-contact-titleRow{
  display:flex;
  align-items:center;
  gap:clamp(12px, 2.5vw, 18px);
}

.home-contact-title{
  margin:0;
  font-family:"Times New Roman","Noto Serif JP",serif;
  font-weight:500;
  letter-spacing:.08em;
  font-size:clamp(22px, 3.2vw, 32px);
  color:#222;
  line-height:1;
}

.home-contact-line{
  flex:1;
  height:.5px;
  background:#444;
  opacity:.7;
}

.home-contact-sub{
  margin:8px 0 0;
  font-size:clamp(12px, 2.4vw, 14px);
  color:#444;
}

/* 背景ボックス */
.home-contact-box{
  position:relative;
  background-image:url("images/common/お問い合わせ.jpg"); /* 画像は差し替え可 */
  background-size:cover;
  background-position:center;
  padding: clamp(32px, 6vw, 56px) 16px;
  text-align:center;
  color:#fff;
}

/* 白フィルター */
.home-contact-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.7);
  z-index:0;
}

.home-contact-box > *{
  position:relative;
  z-index:1;
}

/* テキスト */
.home-contact-text{
  margin: 0 0 28px;

  /* ▼ ここが重要 */
  font-size: clamp(12px, 2.6vw, 16px);

  line-height: 1.9;
  color: #222;
  font-weight: 600;

  /* 不自然な日本語改行を防ぐ */
  word-break: keep-all;
  line-break: strict;

  /* 見た目を少し整える（任意） */
  text-wrap: balance;
}

/* ボタン */
.home-contact-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;

  min-width: clamp(220px, 50vw, 340px);
  height: 56px;

  background:#fff;
  color:#222;
  border-radius:6px;
  font-size:clamp(14px, 2.8vw, 16px);
  letter-spacing:.06em;
  text-decoration:none;

  box-shadow:0 4px 12px rgba(0,0,0,0.18);
  transition:transform .2s ease, box-shadow .2s ease;
}

@media (hover:hover){
  .home-contact-btn:hover{
    transform:translateY(2px);
    box-shadow:0 2px 6px rgba(0,0,0,0.18);
	color: #222;
  }
}

/* =========================
   footer
   ========================= */
/* 20260731追記　footer全体を基準にする */
.site-footer {
  /*position: relative;*/
  background-color: #bcdff5;
  padding: clamp(16px, 4vw, 24px) 16px;
}

/* グループ企業ロゴ */
.footer-group {
  /*position: absolute;*/
  /*top: 20px;*/
  /*right: 40px;*/

  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

/* ロゴ画像 */
.footer-group img {
  width: auto;
  max-width: 180px;
  height: auto;
  display: block;
}


.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* ロゴ：小画面で縮みすぎず、大画面でも大きくなりすぎない */
.footer-logo {
  height: clamp(28px, 6vw, 35px);
  width: auto;
}

/* コピーライト：ロゴとバランス連動 */
.footer-copy {
  margin-top: clamp(6px, 2vw, 10px);
  font-size: clamp(11px, 2.8vw, 12px);
  color: #333;
}

@media (max-width: 768px) {

  .footer-group {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;
  }

  .footer-group img {
    max-width: 180px;
  }

}


/* =========================================================
   20260527追記　スマホ・タッチ端末向け：ボタンとアニメーションの常時表示設定
   ========================================================= */
@media screen and (max-width: 768px) {
  
  /* 1. 「沿革・会社概要・事業所一覧」（ABOUTカード）のボタンを常時表示 */
  .about-links .about-card .about-card-btn {
    background: #fff;
    color: #000;
  }
  .about-links .about-card img {
    filter: brightness(50%) grayscale(0); /* 画像の暗さも解除して見やすく */
  }

  /* 2. 「PRODUCTS」（取扱品目タイル）のボタンと文字を常時表示 */
  .products-grid .product-btn {
    display: inline-flex !important; /* display: none を打ち消し */
    opacity: 1 !important;
    transform: translate(-50%, calc(-50% + 22px)) !important; /* ホバー後の位置に固定 */
  }
  
  .products-grid .product-name {
    transform: translate(-50%, calc(-50% - 10px)) !important; /* 文字を少し上にずらした位置に固定 */
  }

  .products-grid .product-card .product-img img {
    filter: brightness(82%) !important; /* 画像の暗さを解除 */
  }
}

/* =========================================================
   20260728追記　
   ========================================================= */
/*リンク全般　挙動なおし*/
a:focus,
a:active,
a:focus,
a:active {
    outline: none !important;
    box-shadow: none !important;
}

a:hover,
a:focus,
a:visited {
    text-decoration: none !important;
}

/* =========================================================
   20260729追記　
   ========================================================= */
/*footerの下に表示される余白をなくしたい
html,
body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-footer {
    margin-top: auto;
}
*/