/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/

/* ===== 下層ページ用ヘッダー帯（最小限だけ残す） ===== */
.subpage-header-wrap{
  max-width: 1200px;
  margin: 0 auto 16px;
}
img.page-mini-hero{
  width: 100% !important;
  height: 70px;
  object-fit: cover;
  display: block;
}

/* ----- ここから下は再開後に追記していきます ----- */
/* ---------- 業務効率化（AI × Web） ---------- */
.wai-ops{margin-top:40px}
.wai-ops .wai-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}
.wai-ops .wai-title h2{margin:0;font-size:clamp(20px,3vw,28px)}
.wai-ops .wai-title .sub{color:#64748b;font-size:14px}

.ops-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.ops-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ops-grid{grid-template-columns:1fr}}
.ops-item{border:1px solid var(--lz-line);border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.ops-media{aspect-ratio:16/9;background:linear-gradient(135deg,#eef6ff,#fff7ec);display:flex;align-items:center;justify-content:center}
.ops-media .emoji{font-size:38px}
.ops-body{padding:14px}
.ops-body h3{margin:0 0 6px;font-size:18px}
.ops-body p{margin:0;color:var(--lz-ink-weak)}
.ops-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ops-tag{font-size:12px;padding:.2em .55em;border-radius:999px;border:1px solid var(--lz-line);background:#f8fafc}

/* ユースケース見出しの強調（カテゴリだけ青） */
.sc-body h3 { margin: 0 0 4px; line-height: 1.3; }
.sc-body h3 .cat { color: #1e90ff; font-weight: 700; }

/* ユースケース内の画像を高さ基準で揃える */
.usecase-card img {
  max-height: 200px;   /* ←好みで調整（180px〜220pxあたりがおすすめ） */
  width: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain; /* 縦横比を保ちながら枠内に収める */
}

.lz-section {
  padding: 60px 0;
  background: #f7f9fc;
}
.lz-head {
  text-align: center;
  margin-bottom: 40px;
}
.lz-sub {
  font-size: 1rem;
  color: #666;
}
.lz-underline {
  display: block;
  width: 60px;
  height: 3px;
  background: #00bcd4;
  margin: 12px auto 0;
}
.lz-cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.lz-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 300px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.lz-ico {
  font-size: 2rem;
  margin-bottom: 12px;
  color: #00bcd4;
}
.lz-btn {
  margin-top: 16px;
  display: inline-block;
  background: #00bcd4;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
}
.lz-btn:hover {
  background: #0097a7;
}
/* 機種カードグリッド設定 */
.lz-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  margin: 0 auto;
  max-width: 1200px; /* 中央に整列させる場合 */
  padding: 0 1rem;
}

/* 各カードのスタイル */
.lz-card {
  flex: 0 1 calc(33.333% - 1.5rem); /* 3列均等に配置 */
  box-sizing: border-box;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 画像スタイル（中央揃え） */
.lz-card img {
  display: block;
  margin: 0 auto 1rem;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 小見出し */
.lz-card .catch {
  font-weight: bold;
  color: #333;
  margin: 0.5em 0;
}

/* 詳細説明 */
.lz-card .desc {
  font-size: 0.95em;
  line-height: 1.6;
  margin-top: 0.5em;
  color: #444;
}

/* スマホ対応 */
@media screen and (max-width: 960px) {
  .lz-card {
    flex: 0 0 100%;
  }
}
.lz-card-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 2rem !important;
  margin: 0 auto !important;
  max-width: 1200px !important;
  padding: 0 1rem !important;
}

.lz-card {
  flex: 0 1 calc(33.333% - 1.5rem) !important;
  box-sizing: border-box !important;
  background: #fff !important;
  padding: 20px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.lz-card img {
  display: block !important;
  margin: 0 auto 1rem !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
}

.lz-card .catch {
  font-weight: bold !important;
  color: #333 !important;
  margin: 0.5em 0 !important;
}

.lz-card .desc {
  font-size: 0.95em !important;
  line-height: 1.6 !important;
  margin-top: 0.5em !important;
  color: #444 !important;
}

@media screen and (max-width: 960px) {
  .lz-card {
    flex: 0 0 100% !important;
  }
}
.lz-card img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
  margin-bottom: 1rem !important;
  border-radius: 8px !important;
}
.p3-intro img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.hero-img-wrap {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  background: none; /* ← 黒背景を消す */
  padding: 1rem 2rem;
  border-radius: 0;  /* ← 角丸も不要なら0に */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* ← 背景が無くなっても文字を見やすく */
}
/* ===== ChizuLand 地図コンテンツ表示用スタイル ===== */

.cl-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}

.cl-empty {
  text-align: center;
  color: #666;
  padding: 2rem;
  font-size: 1.2rem;
}

.cl-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}

.cl-detail-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.cl-lead {
  color: #444;
  font-size: 1.1rem;
  line-height: 1.6;
}

.cl-section-tabs {
  display: flex;
  gap: 8px;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.cl-tab {
  padding: 0.4rem 1rem;
  background: #eee;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  color: #333;
  border: 1px solid #ccc;
}

.cl-tab.active {
  background: #2563eb;
  color: #fff;
}

.cl-section-content {
  margin-top: 1rem;
  line-height: 1.8;
  font-size: 1rem;
  color: #333;
}

.cl-photos {
  display: grid;
  gap: 12px;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .cl-photos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .cl-photos {
    grid-template-columns: 1fr;
  }
}

.cl-photos img {
  width: 100%;
  border-radius: 6px;
}
/* ========== 有効・無効の都道府県塗り分け ========== */
#svg-japan path {
  fill: #d1d5db; /* 無効県＝グレー */
  cursor: not-allowed;
  pointer-events: none;
  transition: all 0.3s;
}

#svg-japan path.enabled {
  fill: #60a5fa; /* 有効県＝青系 */
  cursor: pointer;
  pointer-events: auto;
}

#svg-japan path.enabled:hover {
  fill: #3b82f6; /* ホバー時＝濃い青 */
}

/* ========== 有効・無効の都道府県塗り分け ========== */
#svg-japan path {
  fill: #d1d5db;            /* 無効県＝グレー */
  cursor: not-allowed;
  pointer-events: none;
  transition: all 0.3s;
}
#svg-japan path.enabled {
  fill: #60a5fa;            /* 有効県＝青系 */
  cursor: pointer;
  pointer-events: auto;
}
#svg-japan path.enabled:hover {
  fill: #3b82f6;
}
/* ==== ChizuLand：セクション切替タブを大きく・青ボタン ==== */
.cl-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 12px;
}
.cl-tabs button{
  appearance:none;
  padding:12px 18px;
  font-size:16px;
  line-height:1;
  border-radius:9999px;
  border:1px solid #cbd5e1;
  background:#e5e7eb;
  color:#1f2937;
  cursor:pointer;
  font-weight:700;
}
.cl-tabs button.active{
  background:#2563eb;
  color:#fff;
  border-color:#1e40af;
}
.cl-tabs button:hover{ filter:brightness(0.98); }

@media (max-width:480px){
  .cl-tabs button{ padding:14px 20px; font-size:17px; }
}
/* === レイザッカの特徴セクション === */
.wai-features {
  background: #fff;
  padding: 3rem 1rem;
}
.f-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 2.5rem;
}
.f-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.f-card {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  text-align: center;
}
.f-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}
.f-card h3 {
  font-size: 1.2rem;
  margin: 0.5rem 0;
}
.f-card p {
  font-size: 0.95rem;
  color: #555;
}
/* 不要なレイザッカ特徴は非表示に（任意） */
#lazakka-feature {
  display: none;
}

/* 特徴紹介セクションの左右余白も白にする */
#features {
  background-color: #fff !important;
}

/* さらに念のため親コンテナも白に強制 */
#features.lz-container,
#features .sc-grid {
  background-color: #fff !important;
}