/* =========================================================
   未来デザインラボ - FINAL 2025
   United Mind Japan / Responsive + Vertical Video Edition
========================================================= */

/* ----------------------------------------
   ベースカラー・フォント設定
---------------------------------------- */
:root {
  --umj-orange: #FF8C00;
  --umj-orange-light: #FFA94D;
  --umj-orange-bg: #FFF7EE;
  --umj-dark: #333;
  --umj-gray: #666;
  --umj-lightgray: #F8F9FA;
  --umj-white: #FFFFFF;
}

/* ----------------------------------------
   背景トーン（グラデーション全体）
---------------------------------------- */
body.lab-page {
  background: linear-gradient(
    180deg,
    #FFFDF9 0%,
    #FFF5E8 10%,
    #FFEAD2 35%,
    #FFF3E0 60%,
    #FFFFFF 100%
  );
  background-attachment: fixed;
  font-family: "Hiragino Sans", "Meiryo", sans-serif;
  color: var(--umj-dark);
  line-height: 1.8;
}

/* ----------------------------------------
   Heroセクション
---------------------------------------- */
.lab-hero {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(180deg, #FFA94D 0%, #FFCA80 60%, #FFEFD5 100%);
}
.lab-hero-bg img,
.lab-hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(80%) saturate(115%);
  z-index: 0;
}
.lab-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 20px;
  max-width: 900px;
}
.lab-hero-label {
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.lab-hero h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  margin-bottom: 14px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.lab-hero-description {
  font-size: 1.05rem;
  opacity: 0.95;
  line-height: 1.9;
}

/* ----------------------------------------
   セクション共通
---------------------------------------- */
.lab-section,
.lab-switch,
.lab-videos,
.lab-docs,
.lab-related,
.lab-x,
.lab-cta {
  padding: 100px 20px;
}

/* ----------------------------------------
   見出し系
---------------------------------------- */
.lab-header {
  text-align: center;
  margin-bottom: 60px;
}
.lab-label {
  color: var(--umj-orange);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin-bottom: 6px;
  display: block;
}
.lab-title {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 10px;
}
.lab-desc {
  color: var(--umj-gray);
  font-size: 1rem;
  line-height: 1.7;
}

/* ----------------------------------------
   カテゴリ切替ボタン
---------------------------------------- */
.lab-switch {
  background: #FFF7EE;
}
.lab-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 44px;
}
.lab-tab {
  background: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 700;
  color: #666;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.25s ease;
}
.lab-tab:hover {
  background: #FFEBD2;
  transform: translateY(-1px);
}
.lab-tab.is-active {
  background: #FFA94D;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* ----------------------------------------
   記事カードグリッド
---------------------------------------- */
.lab-pane { display: none; }
.lab-pane.is-active { display: block; animation: fadeUp 0.6s ease both; }

.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}
.lab-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  text-decoration: none;
  color: #333;
  display: flex;
  flex-direction: column;
}
.lab-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
.lab-thumb {
  height: 200px;
  overflow: hidden;
  background: #f7f7f7;
}
.lab-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.lab-card:hover .lab-thumb img {
  transform: scale(1.05);
}
.lab-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lab-date {
  color: #999;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.lab-h3 {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 8px;
}
.lab-tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lab-tag {
  background: #FFF3E0;
  color: #A65C00;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s;
}
.lab-tag:hover {
  background: var(--umj-orange-light);
  color: #fff;
}

/* ----------------------------------------
   ショート動画スライダー（縦長3枚横並び）
---------------------------------------- */
.lab-videos { background: #fff; text-align: center; }
.lab-vslider {
  overflow: hidden;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.lab-vtrack {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: nowrap;
}
.lab-vcard {
  flex: 0 0 30%;
  max-width: 30%;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.lab-vcard:hover { transform: translateY(-6px); }
.lab-vthumb {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 16px;
}
.lab-vthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lab-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  background: rgba(255, 140, 0, 0.95);
  border-radius: 50%;
}
.lab-play::after {
  content: '';
  position: absolute;
  left: 24px; top: 19px;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
}

/* ----------------------------------------
   House-HRコラム
---------------------------------------- */
.lab-related {
  background: var(--umj-orange-bg);
  text-align: center;
}
.lab-related .lab-title { color: var(--umj-dark); }
.lab-error { color: #999; font-size: 0.95rem; }

/* ----------------------------------------
   代表Xカードスライダー
---------------------------------------- */
.lab-x { background: #fff; text-align: center; }
.lab-xslider {
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.lab-xtrack {
  display: flex;
  gap: 24px;
  transition: transform 0.6s ease;
}
.lab-xcard {
  flex: 0 0 100%;
  background: linear-gradient(180deg,#FFFFFF 0%,#FFF8F1 100%);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  padding: 25px 30px;
  text-align: left;
  color: #333;
}
.lab-xhead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.lab-xhead img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.lab-xmeta strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
}
.lab-xmeta span {
  font-size: 0.85rem;
  color: #999;
}
.lab-xmeta small {
  display: block;
  font-size: 0.8rem;
  color: #aaa;
}
.lab-xcard p {
  font-size: 1rem;
  line-height: 1.7;
  margin-top: 5px;
}

/* ----------------------------------------
   CTA
---------------------------------------- */
.lab-cta {
  background: linear-gradient(135deg, #FF922B 0%, #FFB46A 100%);
  color: #fff;
  text-align: center;
  padding: 100px 20px;
}
.lab-cta h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 24px;
}
.lab-ctabtns {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}
.lab-btn {
  background: #fff;
  color: #FF8C00;
  padding: 13px 34px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: all .25s;
}
.lab-btn:hover {
  background: #FFF1E0;
  transform: translateY(-2px);
}
.lab-btn.outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.lab-btn.outline:hover {
  background: #fff;
  color: #FF8C00;
}

/* ----------------------------------------
   アニメーション
---------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------
   モバイル最適化
---------------------------------------- */
@media (max-width: 768px) {
  .lab-hero { min-height: 60vh; }
  .lab-hero h1 { font-size: 1.8rem; }
  .lab-hero-description { font-size: 0.95rem; }
  .lab-grid { grid-template-columns: 1fr; }
  .lab-vtrack { flex-wrap: nowrap; overflow-x: scroll; gap: 16px; }
  .lab-vcard { flex: 0 0 80%; max-width: 80%; }
  .lab-xtrack { flex-wrap: nowrap; overflow-x: auto; gap: 16px; }
  .lab-xcard { flex: 0 0 85%; }
  .lab-btn { width: 100%; }
}