/************************************************
 * UMJ Front Universal Living – 統合CSS（フッター削除版）
 * トップページ専用レイアウトのみ保持
 ************************************************/

/* ========================================
   カラーパレット
======================================== */
:root {
  --umj-housing: #6ab12e;
  --umj-housing-light: #f0f9e8;
  --umj-housing-soft: #e3f4d4;

  --umj-ai: #0345e4;
  --umj-ai-light: #e8f2ff;
  --umj-ai-soft: #d6e8ff;

  --umj-diversity: #d70a4a;
  --umj-diversity-light: #fff0f5;
  --umj-diversity-soft: #ffe5ed;

  --umj-orange: #ff8a3c;
  --umj-orange-light: #fff3ea;

  --umj-text-primary: #1a1a1a;
  --umj-text-secondary: #555;
  --umj-text-muted: #888;

  --umj-gray-bg: #fafbfc;
  --umj-gray-border: #e8e8e8;

  --umj-radius-sm: 12px;
  --umj-radius-md: 20px;
  --umj-radius-lg: 28px;

  --umj-shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --umj-shadow-md: 0 8px 24px rgba(0,0,0,0.06);
  --umj-shadow-lg: 0 16px 48px rgba(0,0,0,0.08);

  --umj-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   ベース設定
======================================== */
.umj-universal-front {
  background: #fff;
  color: var(--umj-text-primary);
  font-family: "Noto Sans JP", -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.umj-section {
  padding: 120px 0;
}

.umj-section__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

/* ========================================
   HERO
======================================== */
.umj-hero-universal {
  position: relative;
  width: 100%;
}

.umj-hero-swiper {
  height: 90vh;
  min-height: 600px;
}

.umj-hero-slide {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.umj-hero-slide__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.umj-hero-slide--housing .umj-hero-slide__bg {
  background-image: url('/wp-content/themes/cat-so01_child/assets/img/hero/hero-abstract-housing.jpg');
}
.umj-hero-slide--ai .umj-hero-slide__bg {
  background-image: url('/wp-content/themes/cat-so01_child/assets/img/hero/hero-abstract-ai.jpg');
}
.umj-hero-slide--diversity .umj-hero-slide__bg {
  background-image: url('/wp-content/themes/cat-so01_child/assets/img/hero/hero-abstract-global.jpg');
}

/* オーバーレイ */
.umj-hero-slide__overlay {
  position: absolute;
  inset: 0;
}

.umj-hero-slide--housing .umj-hero-slide__overlay {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.95),
    rgba(240,249,232,0.9),
    rgba(227,244,212,0.85)
  );
}
.umj-hero-slide--ai .umj-hero-slide__overlay {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.95),
    rgba(232,242,255,0.9),
    rgba(214,232,255,0.85)
  );
}
.umj-hero-slide--diversity .umj-hero-slide__overlay {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.95),
    rgba(255,240,245,0.9),
    rgba(255,230,237,0.85)
  );
}

/* HERO コンテンツ */
.umj-hero-slide__inner {
  position: relative;
  z-index: 3;
  width: min(1200px, 90%);
}

.umj-hero-content-inner {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--umj-radius-lg);
  padding: 48px 56px;
  box-shadow: var(--umj-shadow-lg);
}

.umj-badge-business {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.umj-badge-business--housing {
  background: var(--umj-housing-light);
  color: var(--umj-housing);
}
.umj-badge-business--ai {
  background: var(--umj-ai-light);
  color: var(--umj-ai);
}
.umj-badge-business--diversity {
  background: var(--umj-diversity-light);
  color: var(--umj-diversity);
}

.umj-hero__title {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 900;
  margin: 24px 0 16px;
  letter-spacing: -0.02em;
}

.umj-hero__lead {
  font-size: 16px;
  color: var(--umj-text-secondary);
  margin-bottom: 32px;
}

/* HERO ボタン */
.umj-btn-universal {
  display: inline-flex;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: var(--umj-transition);
}

.umj-btn-universal--housing { background: var(--umj-housing); }
.umj-btn-universal--ai { background: var(--umj-ai); }
.umj-btn-universal--diversity { background: var(--umj-diversity); }

/* ========================================
   Universal Vision（3つの柱）
======================================== */
.umj-universal-vision {
  background: linear-gradient(180deg,#fff,#fafbfc);
  padding: 120px 0;
}

.umj-vision__text {
  text-align: center;
  font-size: 17px;
  line-height: 2;
  color: var(--umj-text-secondary);
}

.umj-vision-pillars {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 48px;
  margin-top: 64px;
}

.pillar {
  text-align: center;
}

.pillar-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pillar--housing .pillar-icon {
  background: var(--umj-housing-light);
  color: var(--umj-housing);
}
.pillar--ai .pillar-icon {
  background: var(--umj-ai-light);
  color: var(--umj-ai);
}
.pillar--diversity .pillar-icon {
  background: var(--umj-diversity-light);
  color: var(--umj-diversity);
}

/* ========================================
   NEWS / MEDIA
======================================== */
.umj-news-universal {
  background: #fff;
  padding: 100px 0;
}

.umj-news-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
}

.umj-news-panel {
  padding: 36px 40px;
  background: #fff;
  border-radius: var(--umj-radius-md);
  border: 1px solid var(--umj-gray-border);
  box-shadow: var(--umj-shadow-sm);
  transition: var(--umj-transition);
}

.umj-news-panel:hover {
  box-shadow: var(--umj-shadow-md);
  border-color: var(--umj-orange-light);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--umj-gray-border);
}

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

.news-item {
  border-bottom: 1px solid var(--umj-gray-border);
}

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

.news-item a {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  text-decoration: none;
  color: var(--umj-text-primary);
}

.news-item a:hover .news-title { color: var(--umj-orange); }

.news-date {
  min-width: 90px;
  font-size: 13px;
  color: var(--umj-text-muted);
  font-family: "Courier New", monospace;
}

.news-title {
  font-size: 14px;
  line-height: 1.6;
  color: var(--umj-text-primary);
}

/* SP NEWS */
@media (max-width: 768px) {
  .umj-news-grid { grid-template-columns: 1fr; }

  .news-item a {
    flex-direction: column;
    gap: 4px;
  }
}

/* ========================================
   BUSINESS（3つの事業）
======================================== */
.umj-business-universal {
  background: var(--umj-gray-bg);
  padding: 120px 0;
}

.umj-business-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px,1fr));
  gap: 36px;
  margin-top: 64px;
}

.business-card {
  background: #fff;
  border: 1px solid var(--umj-gray-border);
  border-radius: var(--umj-radius-lg);
  overflow: hidden;
  transition: var(--umj-transition);
}

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

.card-color-bar {
  height: 6px;
}

.business-card--housing .card-color-bar {
  background: linear-gradient(90deg,var(--umj-housing),#85d83e);
}
.business-card--ai .card-color-bar {
  background: linear-gradient(90deg,var(--umj-ai),#0066ff);
}
.business-card--diversity .card-color-bar {
  background: linear-gradient(90deg,var(--umj-diversity),#ff1a5a);
}

.card-inner { padding: 36px 32px; }

.card-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.business-card--housing .card-number { background:var(--umj-housing-light); color:var(--umj-housing); }
.business-card--ai .card-number { background:var(--umj-ai-light); color:var(--umj-ai); }
.business-card--diversity .card-number { background:var(--umj-diversity-light); color:var(--umj-diversity); }

.card-title {
  font-size: 22px;
  font-weight: 800;
  margin: 20px 0 12px;
}

.card-desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--umj-text-secondary);
}

/* ========================================
   RECRUIT（Join Our Team）
======================================== */
.umj-recruit-universal {
  position: relative;
  padding: 160px 0;
  text-align:center;
  color:#fff;
}

.umj-recruit__overlay {
  background: linear-gradient(135deg,rgba(255,138,60,0.92),rgba(255,108,26,0.88));
}

.recruit-title {
  font-size: clamp(32px,5vw,48px);
  font-weight:900;
  margin-bottom:24px;
}

.recruit-message {
  font-size: 17px;
  line-height:2;
  opacity:0.95;
  margin-bottom:40px;
}

.umj-btn-recruit-universal {
  display:inline-flex;
  gap:10px;
  padding:16px 40px;
  background:#fff;
  color:var(--umj-orange);
  text-decoration:none;
  border-radius:999px;
  font-size:16px;
  font-weight:700;
}

/* ========================================
   Vision（細部調整）
======================================== */
.umj-universal-vision {
  padding: 80px 0 90px !important;
}

.umj-section__header {
  margin-bottom: 48px !important;
}

.umj-vision-pillars {
  margin-top: 32px !important;
  gap: 32px !important;
}

.pillar-icon {
  width: 72px !important;
  height: 72px !important;
  margin-bottom: 12px !important;
}
/************************************************
 * UMJ Service Lineup（サービス6つのカード）完全復元
 ************************************************/

/* ▼ セクション全体 */
.umj-services-grid {
  background: #fff;
  padding: 120px 0;
}

/* ▼ 2カラム */
.services-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 64px;
}

/* ▼ カード */
.service-card {
  display: block;
  text-decoration: none;
  border-radius: var(--umj-radius-md);
  transition: var(--umj-transition);
}

.service-card:hover {
  transform: translateY(-4px);
}

/* ▼ カード内部 */
.service-card-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  background: #fff;
  border: 2px solid var(--umj-gray-border);
  border-radius: var(--umj-radius-md);
  transition: var(--umj-transition);
}

.service-card:hover .service-card-inner {
  box-shadow: var(--umj-shadow-md);
}

/* ▼ 事業別カラー変化 */
.service-card--housing:hover .service-card-inner {
  border-color: var(--umj-housing);
  background: var(--umj-housing-light);
}

.service-card--ai:hover .service-card-inner {
  border-color: var(--umj-ai);
  background: var(--umj-ai-light);
}

.service-card--diversity:hover .service-card-inner {
  border-color: var(--umj-diversity);
  background: var(--umj-diversity-light);
}

/* ▼ アイコン */
.service-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--umj-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--umj-transition);
}

.service-card--housing .service-icon {
  background: var(--umj-housing-light);
  color: var(--umj-housing);
}
.service-card--ai .service-icon {
  background: var(--umj-ai-light);
  color: var(--umj-ai);
}
.service-card--diversity .service-icon {
  background: var(--umj-diversity-light);
  color: var(--umj-diversity);
}

.service-card--housing:hover .service-icon {
  background: var(--umj-housing);
  color: #fff;
}
.service-card--ai:hover .service-icon {
  background: var(--umj-ai);
  color: #fff;
}
.service-card--diversity:hover .service-icon {
  background: var(--umj-diversity);
  color: #fff;
}

/* ▼ タイトルと説明文 */
.service-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--umj-text-primary);
  margin: 0 0 6px;
}

.service-desc {
  font-size: 13px;
  color: var(--umj-text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ▼ 矢印 */
.service-arrow {
  color: var(--umj-text-muted);
  transition: var(--umj-transition);
}

.service-card:hover .service-arrow {
  transform: translateX(4px);
}

/* ▼ スマホ最適化 */
@media (max-width: 768px) {
  .services-grid-2col {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .service-card-inner {
    padding: 24px 20px;
    grid-template-columns: auto 1fr auto;
  }

  .service-icon {
    width: 56px;
    height: 56px;
  }

  .service-title {
    font-size: 17px;
  }

  .service-desc {
    font-size: 14px;
  }
}
/************************************************
 * Vision（住み方／働き方／生き方）カードデザイン復元
 ************************************************/

.umj-vision-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 56px !important;
}

.pillar {
  text-align: center;
  padding: 32px 20px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

.pillar:hover {
  transform: translateY(-6px);
}

.pillar-icon {
  width: 82px !important;
  height: 82px !important;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.06);
}

.pillar h3 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 12px;
  color: #222;
}
/************************************************
 * Recruit Section（JOIN OUR TEAM）復元
 ************************************************/

.umj-recruit-universal {
  position: relative;
  padding: 140px 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.umj-recruit__bg {
  position: absolute;
  inset: 0;
  background: url('/wp-content/themes/cat-so01_child/assets/img/recruit-bg.jpg') center/cover no-repeat;
  z-index: 1;
}

.umj-recruit__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,138,60,0.92) 0%,
    rgba(255,108,26,0.88) 100%);
  z-index: 2;
}

.umj-recruit__content {
  position: relative;
  z-index: 3;
  max-width: 820px;
  margin: 0 auto;
}

.recruit-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-bottom: 24px;
}

.recruit-message {
  font-size: 17px;
  line-height: 2;
  opacity: 0.92;
  margin-bottom: 40px;
}

.umj-btn-recruit-universal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  background: #fff;
  color: var(--umj-orange);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  text-decoration: none;
  transition: .3s ease;
}

.umj-btn-recruit-universal:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
/* ============================================
   UMJ – Mobile Global Padding Fix（左右余白）
   ============================================ */
@media (max-width: 768px) {

  /* 全体のインナー幅に余裕を作る */
  .umj-section__inner {
      width: 92% !important;
      margin: 0 auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
  }

  /* 住み方/働き方/生き方の3アイコン */
  .umj-vision-pillars {
      padding-left: 4% !important;
      padding-right: 4% !important;
      gap: 24px !important;
  }

  /* サービスカード（トップの6つ） */
  .services-grid-2col {
      width: 100% !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
      grid-template-columns: 1fr !important; /* モバイルは1列 */
  }

  .service-card,
  .service-card-inner {
      width: 100% !important;
      margin: 0 auto 14px !important;
      border-radius: 20px !important;
  }

  /* BUSINESS（3枚の事業カード） */
  .umj-business-cards {
      padding-left: 4% !important;
      padding-right: 4% !important;
      grid-template-columns: 1fr !important;
      gap: 24px !important;
  }

  .business-card {
      border-radius: 18px !important;
      width: 100% !important;
  }

  /* JOIN OUR TEAM（採用セクション） */
  .umj-recruit-universal {
      padding-left: 6% !important;
      padding-right: 6% !important;
      text-align: center !important;
  }

  .umj-btn-recruit-universal {
      width: 88% !important;
      justify-content: center !important;
  }

  /* Footer（スマホ横幅の統一感） */
  .footer-main,
  .footer-bottom-container {
      padding-left: 4% !important;
      padding-right: 4% !important;
  }
}
/* ▼ スマホ お問い合わせボタン最適化 */
@media (max-width: 768px) {
  .footer-contact-btn {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      padding: 14px 20px !important;
      font-size: 18px !important;
      font-weight: 700 !important;
      border-radius: 32px !important;
      line-height: 1.4 !important;
      white-space: nowrap !important;  /* ← 折り返し禁止 */
  }
}
/* ▼ スマホ Vision 3つの柱を縦並びに */
@media (max-width: 768px) {

  .umj-vision-pillars {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 28px !important;
      width: 100% !important;
  }

  .pillar {
      width: 88% !important;
      max-width: 380px !important;
      padding: 28px 20px !important;
      border-radius: 20px !important;
      background: #fff !important;
      box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important;
      text-align: center !important;
  }

  .pillar-icon {
      width: 72px !important;
      height: 72px !important;
      margin-bottom: 10px !important;
  }
}
/* ================================================
   PC + SP お問い合わせボタン 強化（視認性UP）
================================================= */
.footer-contact-btn {
    background: #ffffff !important;
    color: var(--umj-orange) !important;
    border: 2px solid var(--umj-orange) !important;
    padding: 16px 32px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    border-radius: 40px !important;

    /* 影で浮かせる */
    box-shadow: 0 6px 20px rgba(255, 140, 66, 0.25) !important;

    transition: all .25s ease-in-out !important;
}

/* ホバー時（PC） */
@media (hover:hover) {
  .footer-contact-btn:hover {
      background: var(--umj-orange) !important;
      color: #fff !important;
      transform: translateY(-3px) !important;
      box-shadow: 0 10px 28px rgba(255, 140, 66, 0.35) !important;
  }
}
/* ================================================
   セクション間のオレンジアクセント帯
================================================= */

/* VISION の上に 30px のオレンジライン */
.umj-universal-vision::before {
    content:"";
    display:block;
    height: 30px;
    background: linear-gradient(90deg, #ff8a3c, #ffae71);
    opacity: 0.15; /* ← 強すぎない “品のある” アクセント */
}

/* BUSINESS の下にもアクセント */
.umj-business-universal::after {
    content:"";
    display:block;
    height: 36px;
    background: linear-gradient(90deg, #ff8a3c, #ffae71);
    opacity: 0.18;
}
/* JOIN OUR TEAM セクションの境界を滑らかに */
.umj-recruit-universal {
    background: linear-gradient(180deg,
        #ff8a3c 0%,
        #ff7b29 40%,
        #ff9d62 100%
    ) !important;
}
/* 白いメッセージカードを基準にする */
.umj-hero-slide__content{
  position: relative;
  overflow: hidden;              /* はみ出し防止 */
}

/* ===========================
   HERO カード内:画像を自然に溶け込ませる
=========================== */

/* カードの基本設定 */
.umj-hero-content-inner{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.65); /* 背景の透明度はお好みで調整 */
}

/* テキストを前面に */
.umj-hero-content-inner > *{
  position: relative;
  z-index: 2;
}

/* 右側画像:自然に溶け込む */
.umj-hero-card__art{
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;          /* 画像エリアの幅(お好みで45〜52%) */
  height: 100%;
  z-index: 1;
  pointer-events: none;

  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;    /* 画像全体を美しく表示 */

  opacity: 1;

  /* 左側にグラデーションで溶け込む(分割線なし) */
  -webkit-mask-image: linear-gradient(90deg, 
    transparent 0%, 
    rgba(0,0,0,0.3) 15%,
    rgba(0,0,0,0.8) 25%, 
    rgba(0,0,0,1) 35%, 
    rgba(0,0,0,1) 100%
  );
  mask-image: linear-gradient(90deg, 
    transparent 0%, 
    rgba(0,0,0,0.3) 15%,
    rgba(0,0,0,0.8) 25%, 
    rgba(0,0,0,1) 35%, 
    rgba(0,0,0,1) 100%
  );
}

/* 不要な疑似要素を無効化 */
.umj-hero-card__art::after{
  content: none !important;
}

/* テキストエリアの余白(PC) */
@media (min-width: 768px){
  .umj-hero-content-inner{
    padding-right: 52%;  /* 画像幅+少し余裕 */
  }
}

/* スマホは画像非表示 */
@media (max-width: 767px){
  .umj-hero-card__art{ 
    display: none; 
  }
  .umj-hero-content-inner{ 
    padding-right: 56px; 
  }
}

/* ===========================
   スライド別:画像指定
=========================== */
.umj-hero-slide--housing .umj-hero-card__art{
  background-image: url("/wp-content/themes/cat-so01_child/assets/img/hero/hero-abstract-housing.jpg");
}

.umj-hero-slide--ai .umj-hero-card__art{
  background-image: url("/wp-content/themes/cat-so01_child/assets/img/hero/hero-abstract-ai.jpg");
}

.umj-hero-slide--diversity .umj-hero-card__art{
  background-image: url("/wp-content/themes/cat-so01_child/assets/img/hero/hero-abstract-global.jpg");
}