/* =========================================================
   鳥取県解体工事業協同組合 サイト共通スタイル
========================================================= */
:root{
  --color-navy: #0a3d62;
  --color-navy-light: #146c94;
  --color-orange: #19a7ce;
  --color-orange-light: #7dd3fc;
  --color-sand: #eaf6fb;
  --color-bg: #f5fafd;
  --color-ink: #202b36;
  --shadow-soft: 0 10px 30px -12px rgba(10,61,98,0.25);
}

html{scroll-behavior:smooth;}

body{
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  color: var(--color-ink);
  background: var(--color-bg);
}

/* ===== ヘッダー ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,61,98,0.96);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 14px rgba(0,0,0,0.15);
}

.brand-mark{
  display:flex;
  align-items:center;
  gap:0.65rem;
}

.brand-mark .brand-icon{
  width:44px;height:44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange-light));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:1.1rem;
  flex-shrink:0;
}

.nav-link{
  position:relative;
  color:#e8edf3;
  font-size:0.92rem;
  font-weight:500;
  padding-bottom:4px;
  transition: color .2s;
  white-space:nowrap;
}
.nav-link:hover{ color: var(--color-orange-light); }
.nav-link.is-current{ color: var(--color-orange-light); }
.nav-link.is-current::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:100%; height:2px;
  background: var(--color-orange);
  border-radius:2px;
}

#mobile-menu{
  max-height:0;
  overflow:hidden;
  transition: max-height .35s ease;
}
#mobile-menu.open{ max-height: 640px; }

/* ===== ヒーロー ===== */
.hero-section{
  position:relative;
  color:#fff;
  overflow:hidden;
  background: linear-gradient(120deg, var(--color-navy) 0%, var(--color-navy-light) 60%, #1c5a8c 100%);
}
.hero-section::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 85% 20%, rgba(25,167,206,0.35), transparent 45%),
                     radial-gradient(circle at 10% 90%, rgba(255,255,255,0.08), transparent 40%);
}
.hero-section > *{ position:relative; z-index:1; }
/* 写真背景ヒーロー */
.hero-photo{
  background: url('../images/hero-excavator.jpg') center 35% / cover no-repeat;
  min-height: 560px;
  display:flex; align-items:center;
}
.hero-photo::before{
  background: linear-gradient(90deg, rgba(10,61,98,0.92) 0%, rgba(10,61,98,0.75) 45%, rgba(10,61,98,0.15) 100%);
}
@media (max-width: 767px){
  .hero-photo{ min-height: 520px; background-position: 70% center; }
  .hero-photo::before{ background: linear-gradient(180deg, rgba(10,61,98,0.85) 0%, rgba(10,61,98,0.7) 100%); }
}

.page-hero{
  background: linear-gradient(120deg, var(--color-navy), var(--color-navy-light));
  color:#fff;
  position:relative;
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute; right:-60px; top:-60px;
  width:260px;height:260px;border-radius:50%;
  background: rgba(25,167,206,0.25);
}

/* ===== 共通パーツ ===== */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background: var(--color-orange);
  color:#fff; font-weight:700;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  transition: transform .2s, background .2s;
}
.btn-primary:hover{ background: #1382a0; transform: translateY(-2px); }

.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border: 2px solid #fff;
  color:#fff; font-weight:700;
  padding: 0.8rem 1.85rem;
  border-radius: 999px;
  transition: background .2s, color .2s;
}
.btn-outline:hover{ background:#fff; color: var(--color-navy); }

.section-label{
  display:inline-flex; align-items:center; gap:.5rem;
  color: var(--color-orange);
  font-weight:700; letter-spacing:.08em; font-size:.82rem;
}
.section-label::before{
  content:""; width:28px; height:3px; background: var(--color-orange); border-radius:3px;
}

.card{
  background:#fff;
  border-radius: 16px;
  box-shadow: 0 6px 20px -10px rgba(15,42,67,0.18);
  transition: transform .25s, box-shadow .25s;
  border: 1px solid #eef1f5;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 18px 32px -14px rgba(15,42,67,0.28); }

.news-item{
  border-bottom: 1px dashed #dfe3e8;
}
.news-item:last-child{ border-bottom:none; }

.tag-pill{
  display:inline-block;
  font-size:.72rem; font-weight:700;
  padding: .18rem .7rem;
  border-radius:999px;
}
.tag-news{ background:#e7f1ff; color:#1a5fb4; }
.tag-event{ background:#e0f7fb; color:#0f7ea3; }
.tag-important{ background:#fde8e8; color:#c0392b; }

/* ===== テーブル ===== */
.compare-table{ border-collapse: separate; border-spacing:0; width:100%; }
.compare-table th{
  background: var(--color-navy);
  color:#fff;
  font-weight:600;
  padding: .9rem 1rem;
  text-align:left;
}
.compare-table td{
  padding: .9rem 1rem;
  border-bottom:1px solid #e6e9ee;
  vertical-align:top;
}
.compare-table tr:nth-child(even) td{ background:#f7f9fc; }

/* ===== アコーディオン(FAQ) ===== */
.faq-item{ border-bottom:1px solid #e6e9ee; }
.faq-question{
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.2rem .25rem; font-weight:700;
}
.faq-question .icon{ transition: transform .25s; color: var(--color-orange); flex-shrink:0; margin-left:1rem;}
.faq-item.open .faq-question .icon{ transform: rotate(45deg); }
.faq-answer{
  max-height:0; overflow:hidden; transition: max-height .3s ease;
  color:#4a5568; line-height:1.9;
}
.faq-item.open .faq-answer{ max-height: 500px; padding-bottom:1.2rem; }

/* ===== フッター ===== */
.site-footer{ background: #0a1c2e; color:#c8d3de; }
.site-footer a:hover{ color: var(--color-orange-light); }

/* ===== ユーティリティ ===== */
.fade-up{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.visible{ opacity:1; transform:none; }

.chip-area{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--color-sand); color:var(--color-navy);
  font-weight:700; font-size:.8rem;
  padding:.3rem .8rem; border-radius:999px;
}

::selection{ background: var(--color-orange); color:#fff; }

.back-to-top{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:40;
  width:46px;height:46px;border-radius:50%;
  background: var(--color-navy);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft);
  opacity:0; pointer-events:none; transition: opacity .3s, transform .3s;
}
.back-to-top.show{ opacity:1; pointer-events:auto; }
.back-to-top:hover{ background: var(--color-orange); transform: translateY(-3px); }