/* =============================================================
   ECLINE — カスタムスタイル
   Tailwindで対応できないスタイルのみ記載
============================================================= */

/* -------------------------------------------------------
   CSS カスタムプロパティ
------------------------------------------------------- */
:root {
  --brand: #af7d44;
  --brand-dark: #8f6434;
  --cream: #eed9c2;
}

/* -------------------------------------------------------
   Tailwind カスタムカラー用ユーティリティ
   (tailwind.config で定義できない CDN 環境向け)
------------------------------------------------------- */
.text-brand {
  color: var(--brand);
}

.bg-brand {
  background-color: var(--brand);
}

.border-brand {
  border-color: var(--brand);
}

.hover\:text-brand:hover {
  color: var(--brand);
}

.hover\:bg-brand:hover {
  background-color: var(--brand);
}

.bg-brand-dark {
  background-color: var(--brand-dark);
}

.hover\:bg-brand-dark:hover {
  background-color: var(--brand-dark);
}

/* -------------------------------------------------------
   Header / Footer 横パディング
   デスクトップ: 3rem, モバイル: セクションに合わせて 2rem
------------------------------------------------------- */
header>div,
footer {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media (max-width: 767px) {

  header>div,
  footer {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* -------------------------------------------------------
   ヒーローセクション
------------------------------------------------------- */

/*
 * --s : 斜めカットの横ズレ量（大きいほど急角度）
 *
 * レイアウト方針：
 *   - 各パネルを position: absolute で正確に 1/3 ずつ配置
 *   - 左・中パネルは width を +--s 分広げて次パネルに重ね、
 *     clip-path で右辺を斜めにカット → 隙間ゼロで斜め境界を実現
 *   - content は padding-right: --s で左1/3・中1/3に視覚的に中央揃え
 *   - ホバー展開は CSS :has() で全パネルを同時に動かす
 */
:root {
  --s: 110px;
  /* ← ここを増やすほど角度が急になる */
}

.hero-section {
  position: relative;
  min-height: 520px;
  max-height: 680px;
  overflow: hidden;
}

/* -------------------------------------------------------
   動画カルーセルオーバーレイ
   z-index:5 → パネル背景(auto)の上、テキスト(10)の下
------------------------------------------------------- */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateX(100%);
}

/* -------------------------------------------------------
/* 共通パネル */
.hero-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition:
    left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- デフォルト配置（各 33.33%） ---- */

/* 左：右辺を斜めカット。width +--s で中パネルに重ねて隙間ゼロ */
.hero-panel--left {
  left: 0;
  width: calc(33.33% + var(--s));
  /* content を左1/3の中央に揃えるため右に --s 分のパディング */
  padding-left: 2rem;
  padding-right: calc(var(--s) + 2rem);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%);
  /* z-indexなし → DOMの逆順(右→中→左)で重なりを制御 */
}

/* 中：同様に右辺を斜めカット */
.hero-panel--center {
  left: 33.33%;
  width: calc(33.33% + var(--s));
  padding-left: 2rem;
  padding-right: calc(var(--s) + 2rem);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%);
}

/* 右：clip-path 不要（左・中の clip が境界を作る） */
.hero-panel--right {
  left: 66.66%;
  right: 0;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ---- ホバー展開（:has() で兄弟パネルを同時に動かす） ----
 * 展開: 33.33% + 8.33% = 41.66%
 * 縮小: 33.33% - 4.17% = 29.17%
 * 合計: 41.66 + 29.17 + 29.17 = 100%
 */
@media (min-width: 768px) {

  /* 左ホバー */
  .hero-section:has(.hero-panel--left:hover) .hero-panel--left {
    width: calc(41.66% + var(--s));
  }

  .hero-section:has(.hero-panel--left:hover) .hero-panel--center {
    left: 41.66%;
    width: calc(29.17% + var(--s));
  }

  .hero-section:has(.hero-panel--left:hover) .hero-panel--right {
    left: 70.83%;
  }

  /* 中ホバー */
  .hero-section:has(.hero-panel--center:hover) .hero-panel--left {
    width: calc(29.17% + var(--s));
  }

  .hero-section:has(.hero-panel--center:hover) .hero-panel--center {
    left: 29.17%;
    width: calc(41.66% + var(--s));
  }

  .hero-section:has(.hero-panel--center:hover) .hero-panel--right {
    left: 70.83%;
  }

  /* 右ホバー */
  .hero-section:has(.hero-panel--right:hover) .hero-panel--left {
    width: calc(29.17% + var(--s));
  }

  .hero-section:has(.hero-panel--right:hover) .hero-panel--center {
    left: 29.17%;
    width: calc(29.17% + var(--s));
  }

  .hero-section:has(.hero-panel--right:hover) .hero-panel--right {
    left: 58.34%;
  }
}

/* ---- モバイル：縦積み（clip-path・absolute なし） ---- */
@media (max-width: 767px) {
  .hero-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* デスクトップの min-height: 520px をリセット */
    max-height: none;
    overflow: hidden;
  }

  .hero-panel {
    position: static;
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
    transition: none;
  }

  .hero-panel--left,
  .hero-panel--center,
  .hero-panel--right {
    position: relative;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
    clip-path: none;
    left: auto;
    right: auto;
  }

  /* モバイルでDOM逆順(右→中→左)の表示順を修正 */
  .hero-panel--left {
    order: 1;
  }

  .hero-panel--center {
    order: 2;
  }

  .hero-panel--right {
    order: 3;
  }

  /* IT・不動産パネルを非表示にして木目1枚に集約 */
  .hero-panel--right,
  .hero-panel--center {
    display: none;
  }

  /* インフラパネル → 全事業部まとめパネルとして高さを確保 */
  .hero-panel--left {
    min-height: 320px;
    cursor: default;
  }

  /* デスクトップコンテンツを非表示 */
  .hero-desktop-content {
    display: none !important;
  }

  /* モバイルコンテンツを表示 */
  .hero-mobile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
  }

  /* 各事業部リンク */
  .mobile-dept-link {
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: color 0.2s ease;
    text-align: center;
  }

  .mobile-dept-link:hover,
  .mobile-dept-link:active {
    color: #fcd34d;
    /* amber-300 */
  }
}

/* ---- デスクトップ：斜め切りによる視覚的ズレを補正 ---- */
@media (min-width: 768px) {

  /* モバイル専用コンテンツをデスクトップでは非表示 */
  .hero-mobile-content {
    display: none;
  }

  .hero-panel--center>div {
    transform: translateX(calc(var(--s) / 2));
  }

  .hero-panel--right>div {
    transform: translateX(calc(var(--s) / 4));
  }
}

/* -------------------------------------------------------
   ヒーロー内テキスト共通
------------------------------------------------------- */
.label-en {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
}

.dept-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.divider {
  width: 32px;
  height: 2px;
  margin: 1rem auto;
}

.dept-en {
  font-size: 0.7rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* -------------------------------------------------------
   ヒーロー CTAボタン
------------------------------------------------------- */
.hero-btn {
  display: inline-block;
  padding: 0.5rem 1.75rem;
  border-width: 1px;
  border-style: solid;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* -------------------------------------------------------
   ナビ下線ホバー
------------------------------------------------------- */
.nav-item {
  position: relative;
  padding-bottom: 2px;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--brand);
  transition: width 0.25s ease;
}

.nav-item:hover::after {
  width: 100%;
}

/* -------------------------------------------------------
   セクション共通
------------------------------------------------------- */
.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: inherit;
}

/* -------------------------------------------------------
   基本設定
------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------
   ヘッダーとヒーローの隙間をなくす
   sticky + z-index:50 のため border-bottom を除去
------------------------------------------------------- */
#site-header {
  border-bottom-width: 0;
}

/* -------------------------------------------------------
   アンカーナビ：sticky header分のオフセット補正
------------------------------------------------------- */
#news,
#infra,
#realestate,
#it,
#about,
#contact {
  scroll-margin-top: 80px;
}

@media (max-width: 767px) {

  #news,
  #infra,
  #realestate,
  #it,
  #about,
  #contact {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  /* ① パラグラフ → カードboxまでの余白を縮小 */
  #infra .mb-14,
  #realestate .mb-14,
  #it .mb-14 {
    margin-bottom: 1.75rem;
  }

  /* ② 01カード：上paddingを半分に */
  #infra .grid>div:nth-child(1),
  #realestate .grid>div:nth-child(1),
  #it .grid>div:nth-child(1) {
    padding-top: 1.25rem;
  }

  /* ③ 02・03カード：上paddingを1/3に */
  #infra .grid>div:nth-child(2),
  #infra .grid>div:nth-child(3),
  #realestate .grid>div:nth-child(2),
  #realestate .grid>div:nth-child(3),
  #it .grid>div:nth-child(2),
  #it .grid>div:nth-child(3) {
    padding-top: 0.75rem;
  }
}