/* ==========================================================================
   Components - KIC Security (kic-mix Hybrid Edition)
   Gemini版ベース + guarantee-cardホバー改善 + badge--safety控えめ（gray背景+navy文字）
   ボタン/カード/テーブル/アコーディオン/バッジ/フォーム/タイムライン/動画 等の共通部品
   ========================================================================== */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: all var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.5;
}

.btn--primary {
  background-color: var(--color-gold);
  color: var(--color-navy);
  border-color: var(--color-gold);
}

.btn--primary:hover {
  background-color: var(--color-gold-light);
  border-color: var(--color-gold-light);
  color: var(--color-navy);
  box-shadow: var(--shadow-gold);
}

.btn--secondary {
  background-color: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

.btn--secondary:hover {
  background-color: var(--color-navy-light);
  border-color: var(--color-navy-light);
  color: var(--color-white);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--outline:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
}

.btn--outline-navy {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.btn--outline-navy:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-base);
  border-radius: var(--radius-lg);
}

.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--font-size-xs); }
.btn--full { width: 100%; }

.btn--icon-right::after {
  content: '\2192';
  transition: transform var(--transition-fast);
}

.btn--icon-right:hover::after {
  transform: translateX(4px);
}

/* --- Cards --- */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  overflow: hidden;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body { padding: var(--space-6); }

.card__label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold-text);
  margin-bottom: var(--space-2);
  letter-spacing: 0.05em;
}

.card__title { font-size: var(--font-size-xl); margin-bottom: var(--space-3); }

.card__text {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold-text);
}

.card__link:hover { color: var(--color-gold-dark); }

.card--feature {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.card--feature .card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  background-color: rgba(196, 162, 101, 0.1);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
}

.card--flat {
  box-shadow: none;
  border: 1px solid var(--color-gray-200);
}

.card--flat:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-gold);
}

/* === Guarantee Card (Gemini由来) + kic-mix ホバーインタラクション改善 === */
.guarantee-card {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-gray-200);
  padding: var(--space-8);
  position: relative;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.guarantee-card:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}

.guarantee-card__badge {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: var(--space-6);
  background-color: var(--color-gold);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

.guarantee-card__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
}

.guarantee-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}

.guarantee-card__fact {
  background-color: var(--color-safety-bg);
  border-left: 3px solid var(--color-safety-green);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-safety-green);
}

.guarantee-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
}

/* 不安解消テキスト: 常時表示（ホバー専用表示はキーボード・タッチ端末で閲覧不能のため廃止） */
.guarantee-card__anxiety {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-gray-200);
}

.guarantee-card__anxiety strong {
  color: var(--color-gold-dark);
}

/* --- Tables --- */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200);
  vertical-align: top;
}

.table th {
  background-color: var(--color-gray-50);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  white-space: nowrap;
  width: 30%;
}

.table td { color: var(--color-gray-700); }

.table--bordered th,
.table--bordered td { border: 1px solid var(--color-gray-200); }

/* --- Accordion --- */
.accordion {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.accordion__item { border-bottom: 1px solid var(--color-gray-200); }
.accordion__item:last-child { border-bottom: none; }

.accordion__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-navy);
  background-color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  text-align: left;
}

.accordion__trigger:hover { background-color: var(--color-gray-50); }

.accordion__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
  transition: transform var(--transition-base);
}

.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  background-color: var(--color-navy);
  border-radius: 1px;
}

.accordion__icon::before {
  width: 14px; height: 2px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.accordion__icon::after {
  width: 2px; height: 14px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-base);
}

.accordion__item.active .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.accordion__body {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
  font-size: var(--font-size-sm);
}

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
}

.badge--navy { background-color: rgba(26, 39, 68, 0.1); color: var(--color-navy); }

/* kic-mix: badge--safety を控えめに変更（safety-green → gray背景 + navyテキスト） */
.badge--safety { background-color: var(--color-gray-100); color: var(--color-navy); }

/* --- Tag --- */
.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-sm);
}

/* --- Forms --- */
.form-group { margin-bottom: var(--space-6); }

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}

.form-label .required {
  color: var(--color-red);
  font-size: var(--font-size-xs);
  margin-left: var(--space-1);
}

/* ラジオ・チェックボックス群のグループ化用 fieldset/legend（見た目は現状維持のリセット） */
fieldset.form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.form-fieldset legend {
  padding: 0;
  display: block;
  width: 100%;
}

/* legend.form-label でも .form-label と同じ下マージンを確実に適用 */
.form-fieldset legend.form-label {
  margin-bottom: var(--space-2);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  color: var(--color-gray-800);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(196, 162, 101, 0.2);
}

.form-textarea { min-height: 150px; resize: vertical; }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: var(--space-10);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  margin-top: 4px;
  accent-color: var(--color-gold);
}

.form-error {
  font-size: var(--font-size-xs);
  color: var(--color-red);
  margin-top: var(--space-1);
}

/* === Checkbox Group (Gemini由来) === */
.form-checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.form-checkbox-group .form-check {
  padding: var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.form-checkbox-group .form-check:has(input:checked) {
  border-color: var(--color-gold);
  background-color: rgba(196, 162, 101, 0.05);
}

/* --- Timeline --- */
.timeline { position: relative; padding-left: var(--space-8); }

.timeline::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 15px;
  width: 2px;
  background-color: var(--color-gray-200);
}

.timeline__item { position: relative; padding-bottom: var(--space-8); }
.timeline__item:last-child { padding-bottom: 0; }

.timeline__dot {
  position: absolute;
  left: calc(-1 * var(--space-8) + 8px);
  top: 4px;
  width: 16px; height: 16px;
  background-color: var(--color-gold);
  border-radius: var(--radius-full);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-gold);
}

.timeline__date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold);
  margin-bottom: var(--space-1);
}

.timeline__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  margin-bottom: var(--space-1);
}

.timeline__text { font-size: var(--font-size-sm); color: var(--color-gray-600); }

/* --- Steps --- */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--space-4); counter-reset: step; }

.step { display: flex; gap: var(--space-4); align-items: flex-start; counter-increment: step; }

.step__number {
  flex-shrink: 0;
  width: 48px; height: 48px;
  background-color: var(--color-navy);
  color: var(--color-gold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
}

.step__content { flex: 1; }

.step__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  margin-bottom: var(--space-1);
}

.step__text { font-size: var(--font-size-sm); color: var(--color-gray-600); }

/* --- Image Placeholder --- */
.img-placeholder {
  background-color: var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.img-placeholder--portrait { aspect-ratio: 3 / 4; min-height: 400px; }

.img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}

/* --- News --- */
.news-list { display: flex; flex-direction: column; }

.news-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-gray-200);
  transition: background-color var(--transition-fast);
}

.news-item:last-child { border-bottom: none; }

.news-item__meta { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

.news-item__meta .tag {
  min-width: 5.5em;
  text-align: center;
  box-sizing: border-box;
}

.news-item__date { font-size: var(--font-size-sm); color: var(--color-gray-500); white-space: nowrap; min-width: 6em; }

.news-item__title { line-height: 1.5; }
.news-item__title a { font-weight: var(--font-weight-medium); color: var(--color-gray-800); }
.news-item__title a:hover { color: var(--color-gold); }

/* --- Video --- */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* YouTubeファサード: クリックされるまでプレーヤーを読み込まない軽量サムネイル */
.youtube-facade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: var(--color-black);
}

.youtube-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}

.youtube-facade:hover img,
.youtube-facade:focus-visible img {
  opacity: 1;
}

.youtube-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background-color: rgba(26, 39, 68, 0.85);
  border-radius: var(--radius-lg);
  transition: background-color var(--transition-fast);
}

.youtube-facade__play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent var(--color-white);
}

.youtube-facade:hover .youtube-facade__play,
.youtube-facade:focus-visible .youtube-facade__play {
  background-color: var(--color-gold);
}

/* --- Map --- */
.map-container { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-gray-200); }
.map-container iframe { width: 100%; height: 450px; border: 0; display: block; }

/* --- Icon List --- */
.icon-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.icon-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.icon-list__item::before {
  content: '\2713';
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(196, 162, 101, 0.15);
  color: var(--color-gold);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* --- Point Box（安心ポイントまとめ等の囲み） --- */
.point-box {
  padding: var(--space-6);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-gold);
}

/* --- Testimonial --- */
.testimonial {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  position: relative;
}

.testimonial::before {
  content: '\201C';
  position: absolute;
  top: var(--space-4); left: var(--space-6);
  font-size: 4rem;
  color: var(--color-gold);
  opacity: 0.3;
  line-height: 1;
  font-family: Georgia, serif;
}

.testimonial__text {
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}

.testimonial__author { display: flex; align-items: center; gap: var(--space-3); }

.testimonial__avatar {
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  color: var(--color-gray-400);
  flex-shrink: 0;
}

.testimonial__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-navy); }
.testimonial__role { font-size: var(--font-size-xs); color: var(--color-gray-500); }

/* === Persona Tag (Gemini由来) === */
.testimonial__persona {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.testimonial__persona--senior { background-color: #fef3c7; color: #92400e; }
.testimonial__persona--middle { background-color: #dbeafe; color: #1e40af; }
.testimonial__persona--young { background-color: #dcfce7; color: #166534; }

/* voices.html のペルソナバッジ（ジャンプリンク・インタビュー見出し用） */
.persona-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  text-decoration: none;
}

.persona-tag--senior { background-color: #fef3c7; color: #92400e; }
.persona-tag--middle { background-color: #dbeafe; color: #1e40af; }
.persona-tag--young { background-color: #dcfce7; color: #166534; }

/* ==========================================================================
   汎用ボックス・見出し（インラインstyle属性のクラス化 2026-07-03）
   ========================================================================== */

/* 補足情報ボックス（グレー背景） */
.info-box {
  padding: var(--space-6);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.info-box--lg {
  padding: var(--space-8);
}

.info-box--gold {
  border-left: 4px solid var(--color-gold);
}

/* 安心ポイントボックス（薄緑背景） */
.point-box {
  padding: var(--space-3);
  background: var(--color-safety-bg);
  border-radius: var(--radius-md);
}

/* ゴールド左罫線付き見出し（FAQカテゴリ等） */
.heading-gold-left {
  font-size: var(--font-size-xl);
  border-left: 4px solid var(--color-gold);
  padding-left: var(--space-4);
}

/* 写真キャプション */
.photo-caption {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-top: var(--space-3);
}

/* メリット列挙リスト（マーカーなし・行間ゆったり） */
.merit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.merit-list li {
  padding: 4px 0;
}

/* 注記用discリスト（小さめグレー文字） */
.note-list {
  list-style: disc;
  padding-left: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.note-list li {
  margin-bottom: var(--space-2);
}

/* 本文用discリスト（プライバシーポリシー等） */
.disc-list {
  list-style: disc;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.disc-list li {
  margin-bottom: var(--space-2);
}

/* 大型アイコン（サンクスページのチェックマーク等） */
.icon-hero {
  font-size: 4rem;
  margin-bottom: var(--space-6);
}

/* フォームエラー表示ボックス（js/form-error.jsが生成。
   CSPのstyle-srcはcssText代入をブロックするためクラスで指定する） */
.form-alert {
  background: #fff0f0;
  border: 1px solid #e74c3c;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.form-alert__text {
  color: #e74c3c;
  font-weight: bold;
}

.form-alert__title {
  color: #e74c3c;
  font-weight: bold;
  margin-bottom: 8px;
}

.form-alert__list {
  color: #e74c3c;
  font-size: 14px;
  padding-left: 20px;
}

/* include読込失敗時のフォールバックナビ・エラー表示（js/include.jsが生成） */
.fallback-nav {
  padding: 1rem;
  background: var(--color-navy);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.fallback-nav a {
  color: var(--color-white);
  font-size: 0.875rem;
}

.include-error {
  color: red;
  padding: 1rem;
}