@charset "UTF-8";

/* ============================================================
   オープニング（イントロ）演出（JS主導のシーケンス）
   0.jpg → 白フラッシュ → 1.jpg → 白フラッシュ → 2.jpg → 白フラッシュ
   → 3.jpg → 白フラッシュ → フェードアウトして通常TOPへ
============================================================ */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #04122f;   /* 画像読み込み前の下地（濃紺） */
  opacity: 1;
  /* JSで .intro-fadeout を付けたときだけフェードアウト */
  transition: opacity 0.6s ease;
}
/* 最後の全体フェードアウト（JSがクラス付与） */
.intro-overlay.intro-fadeout {
  opacity: 0;
}
/* JSで演出完了後に完全非表示（クリック透過を確実に） */
.intro-overlay.intro-done {
  opacity: 0;
  visibility: hidden;
  display: none;
}

/* 全面画像：表示のたびにゆっくりズームイン
   JSが background-image を差し替え、.zooming を付け外しして
   ズームアニメを毎回リスタートさせる。 */
.intro-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);
}
.intro-image.zooming {
  animation: intro-zoom 0.7s ease-out forwards;
}

/* 白フラッシュ：画像の切り替え時に一瞬白く反転
   JSが .flash を付けるたびにフラッシュを再生する。 */
.intro-flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}
/* フラッシュを in/out の2段階に分割し、タイミングを CSS イベント基準に一本化。
   .flash-in の animationend（＝白の頂点）で JS が画像を差し替え、
   その後 .flash-out で自然に透明へ戻す。速いPCでもズレにくい。 */
.intro-flash.flash-in {
  animation: intro-flash-in 0.22s ease-in forwards;   /* 白まで上げて保持 */
}
.intro-flash.flash-out {
  animation: intro-flash-out 0.28s ease-out forwards; /* 白から透明へ */
}

@keyframes intro-zoom {
  0%   { transform: scale(1.12); }
  100% { transform: scale(1.0); }
}
@keyframes intro-flash-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes intro-flash-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* アニメーション抑制設定のユーザーにはイントロを出さない */
@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none; }
}
/* モバイル系（幅が狭い端末）ではイントロを出さない（画像が入りきらないため） */
@media (max-width: 768px) {
  .intro-overlay { display: none; }
}

/* ============================================================
   ページ全体の背景（動画／静止画・透過表示）
============================================================ */
body.home {
  position: relative;
  background: transparent;
}

/* 動画が再生できないブラウザ向けの静止画フォールバック背景 */
body.home::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background: url("../images/backgrounnd.jpg") center center / cover no-repeat fixed;
}

/* 背景動画ラッパー（画面全体に固定） */
.bg-video-wrap {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
/* 白のベールで透過感を出し、白基調・濃紺テキストの可読性を確保 */
.bg-video-veil {
  position: absolute;
  inset: 0;
  background: rgba(239, 245, 255, 0.57);
}

/* 背景を透けさせるため、主要セクションの背景を半透明に */
body.home .hero {
  background: transparent;
}
body.home .stats-section,
body.home .works-preview-section {
  background: rgba(219, 232, 255, 0.50);
}
/* Philosophy と NEWS は同じ濃いめの背景で引き締める */
body.home .philosophy-section,
body.home .news-section {
  background: rgba(203, 220, 250, 0.73);
}

/* ============================================================
   Hero
============================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-height) + 4rem) 0 4rem;
}

/* ヒーロー固定背景動画（Top.mp4・透過表示） */
.hero-video-wrap {
  position: fixed;
  inset: 0;
  z-index: -1;            /* body全体の背景動画(-2)より手前、ヒーローコンテンツ(1)より背面 */
  overflow: hidden;
  pointer-events: none;
}
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
/* ベール：左（テキスト側）を濃く、右（動画）を薄くして両立させる */
.hero-video-veil {
  position: absolute;
  inset: 0;
  z-index: 2;   /* 動画・地紋の上に重ねて霞ませる */
  background:
    linear-gradient(100deg,
      rgba(244, 248, 255, 0.90) 0%,
      rgba(244, 248, 255, 0.85) 40%,
      rgba(244, 248, 255, 0.77) 70%,
      rgba(244, 248, 255, 0.73) 100%);
}

/* ARBウォーターマーク地紋（Top.mp4 と同じ hero-video-wrap 内に置き、固定表示）
   親 .hero-video-wrap が position:fixed なので、スクロールしても見切れず追従する */
.hero-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(46vw, 560px);
  aspect-ratio: 480 / 380;
  background: url("../images/background-001.png") center / contain no-repeat;
  opacity: 0.7;
  pointer-events: none;
  z-index: 3;   /* ベール(2)の上に出して、地紋が見えるようにする */
}

.hero-blob-1 {
  width: 700px; height: 700px;
  top: -15%; left: -10%;
}
.hero-blob-2 {
  width: 500px; height: 500px;
  bottom: 5%; right: -5%;
}

/* グリッドライン */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(21,83,216,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,83,216,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 30%, transparent 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* アイブロウ */
.hero-eyebrow { margin-bottom: -0.5rem; }

/* タイトル */
.hero-title {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hero-title-en {
  position: relative;
  display: inline-block;
  font-family: var(--font-en);
  font-size: clamp(3rem, 6.5vw, 5.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  /* <br> の位置でのみ改行し、単語内で折り返さない（Co-Creating / the Future の2行に） */
  white-space: nowrap;
}

/* 前面：グラデーション文字 */
.hero-title-fill {
  position: relative;
  z-index: 1;
  display: inline-block;
  white-space: nowrap;
  background: linear-gradient(135deg, #082456 0%, #1553d8 60%, #2f7bff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* 動画背景から浮かせる白い光彩 */
  filter: drop-shadow(0 1px 10px rgba(255,255,255,0.85))
          drop-shadow(0 0 2px rgba(255,255,255,0.7));
}

/* 背面：同じ文字をずらして薄く重ねるゴースト */
.hero-title-ghost {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  white-space: nowrap;
  color: rgba(21, 83, 216, 0.14);
  transform: translate(10px, 12px);
  pointer-events: none;
  user-select: none;
}

.hero-title-ja {
  font-family: var(--font-ja);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.15em;
  -webkit-text-fill-color: var(--color-accent);
  text-shadow: 0 1px 8px rgba(255,255,255,0.9);
}

/* リード文 */
.hero-lead {
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: var(--color-text);
  font-weight: 500;
  line-height: 2;
  max-width: none;
  width: max-content;
  max-width: 100%;
  text-shadow: 0 1px 6px rgba(255,255,255,0.95), 0 0 2px rgba(255,255,255,0.8);
}
/* 各文を折り返さない（画面が十分広い時） */
.hero-lead br { line-height: 0; }

/* アクションボタン */
.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   Hero Visual
============================================================ */
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-visual-card {
  position: relative;
  width: clamp(280px, 32vw, 420px);
  height: clamp(280px, 32vw, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ビジュアル背後の白いソフトグロー（動画からリングを浮かせる） */
.hero-visual-card::before {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,245,255,0.85) 0%, rgba(239,245,255,0.5) 45%, transparent 72%);
  z-index: 0;
  pointer-events: none;
}
/* ビジュアルカードの背景動画（円形に透過表示。リング・グローより背面） */
.hero-visual-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;      /* カードの円形に合わせてクリップ */
  z-index: -1;             /* 白グロー(::before=0)・リング・タグより背面 */
  opacity: 0.55;           /* 透過表示 */
  pointer-events: none;
  /* 縁を柔らかくフェードして周囲の背景になじませる */
  -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 100%);
  mask-image: radial-gradient(circle, #000 60%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual-media { display: none; }
}

/* 回転リング */
.visual-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(15,67,196,0.6);
}

.visual-ring-1 {
  inset: 0;
  animation: ring-spin 12s linear infinite;
}
.visual-ring-1::after {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  margin-left: -4px;
  background: var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--color-accent);
}

.visual-ring-2 {
  inset: 15%;
  border-color: rgba(47,123,255,0.55);
  animation: ring-spin 9s linear infinite reverse;
}
.visual-ring-2::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;
  background: #2f7bff;
  border-radius: 50%;
  box-shadow: 0 0 10px #2f7bff;
}

.visual-ring-3 {
  inset: 28%;
  border-color: rgba(15,67,196,0.65);
  animation: ring-spin 6s linear infinite reverse;
}
.visual-ring-3::after {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  background: var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--color-accent);
}

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* コアロゴ */
.visual-core {
  position: relative;
  z-index: 2;
  width: 120px; height: 120px;
  background: #ffffff;
  border: 1px solid rgba(21,83,216,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 44px rgba(15,67,196,0.4), 0 0 0 8px rgba(255,255,255,0.35);
}

.visual-core-text {
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.05em;
  background: var(--color-accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* フローティングタグ */
.visual-tag {
  position: absolute;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(21,83,216,0.25);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(15,67,196,0.28);
  animation: float 4s ease-in-out infinite;
}
/* リング周囲に散らして配置（9個） */
.visual-tag-1 { top: 2%;   right: 2%;   animation-delay: 0s; }
.visual-tag-2 { top: 14%;  right: -12%; animation-delay: 0.7s; }
.visual-tag-3 { top: 40%;  right: -14%; animation-delay: 1.4s; }
.visual-tag-4 { bottom: 24%; right: -10%; animation-delay: 2.1s; }
.visual-tag-5 { bottom: 4%;  right: 6%;  animation-delay: 0.4s; }
.visual-tag-6 { bottom: 2%;  left: 8%;   animation-delay: 1.1s; }
.visual-tag-7 { bottom: 26%; left: -12%; animation-delay: 1.8s; }
.visual-tag-8 { top: 40%;  left: -12%; animation-delay: 0.9s; }
.visual-tag-9 { top: 12%;  left: -10%; animation-delay: 1.6s; }
.visual-tag-10 { top: -6%; left: 26%; animation-delay: 2.4s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* スクロール誘導 */
.hero-scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(1.1); }
}

/* ============================================================
   Stats
============================================================ */
.stats-section {
  padding: 1rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-2);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.stat-item {}

.stat-number {
  font-family: var(--font-en);
  font-size: clamp(2.75rem, 5.5vw, 4.25rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
  margin-bottom: 0.5rem;
  background: var(--color-accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-number span {
  font-size: 80%;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--color-text-mid);
  letter-spacing: 0.02em;
}

/* ============================================================
   Philosophy
============================================================ */
.philosophy-section { background: var(--color-bg); }

.philosophy-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.philosophy-text {
  position: sticky;
  top: calc(var(--nav-height) + 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* 左テキストの見出し（VALUES見出しの下に来るリードタイトル） */
.philosophy-lead-title {
  font-family: var(--font-ja);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.4;
}

.philosophy-cards {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.philosophy-card {
  /* ほぼ白の半透明。青みはごく僅かにして白寄りにしつつカードとして見せる */
  background: rgba(227, 234, 253, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  /* アイコンと見出しを横並び、本文はその下に全幅で配置 */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.6rem;
  /* 立体感のある柔らかい影＋内側のハイライトで縁を上品に */
  box-shadow:
    0 10px 30px rgba(20, 55, 140, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color var(--transition-base),
              background var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
}
/* 上端の細いアクセントライン（会社カラーのグラデ） */
.philosophy-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: var(--color-accent-grad);
  opacity: 0.85;
}
/* 流線アニメーション背景：縦方向に流れる光の筋だけ（純CSS） */
/* ::after = 縦方向に流れる光の筋（複数本を縦に走らせる） */
.philosophy-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, transparent 0%, rgba(47,123,255,0.55) 50%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(21,83,216,0.45) 50%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(47,123,255,0.40) 50%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(21,83,216,0.50) 50%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(47,123,255,0.35) 50%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(21,83,216,0.42) 50%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(47,123,255,0.48) 50%, transparent 100%);
  /* 7本の光の筋を横方向に散らして配置 */
  background-size: 1px 45%, 1px 45%, 1px 45%, 1px 45%, 1px 45%, 1px 45%, 1px 45%;
  background-position:
    24px -45%, 72px -45%, 120px -45%, 168px -45%, 216px -45%, 264px -45%, 312px -45%;
  background-repeat: no-repeat;
  animation: card-flow-line 6s linear infinite;
}
/* カード内のコンテンツは流線より前面に */
.philosophy-card > * {
  position: relative;
  z-index: 1;
}
.philosophy-card:hover {
  border-color: rgba(21, 83, 216, 0.25);
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-4px);
  box-shadow:
    0 18px 40px rgba(20, 55, 140, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* ホバー時は光の流れを少し速く */
.philosophy-card:hover::after {
  animation-duration: 3.5s;
}

/* 7本の光の筋を、それぞれ時間差で上→下へ流す */
@keyframes card-flow-line {
  0% {
    background-position:
      24px -45%, 72px -45%, 120px -45%, 168px -45%, 216px -45%, 264px -45%, 312px -45%;
  }
  100% {
    background-position:
      24px 145%, 72px 200%, 120px 110%, 168px 175%, 216px 130%, 264px 190%, 312px 120%;
  }
}

.philosophy-card-icon {
  font-size: 1.75rem;
  line-height: 1;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(21,83,216,0.12), rgba(47,123,255,0.12));
  border: 1px solid rgba(21,83,216,0.2);
}

/* モノクロアイコン画像を会社カラーの青に着色 */
.philo-icon-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  /* 黒アイコン → 会社カラーの青(#1553d8 相当) へ着色 */
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(2200%) hue-rotate(212deg) brightness(92%) contrast(95%);
}

.philosophy-card h3 {
  font-family: var(--font-ja);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0;   /* Grid の row-gap で間隔を取る */
}

/* 本文は2行目に、アイコン列も含めた全幅で配置 */
.philosophy-card p {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: var(--color-text-mid);
  line-height: 1.8;
}

/* ============================================================
   Works Preview
============================================================ */
.works-preview-section {
  background: var(--color-bg-2);
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.work-card {
  position: relative;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-bg-card);
}

/* カード上部のサムネイル写真 */
.work-card-thumb {
  position: relative;
  margin: -2rem -2rem 1.5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.work-card-thumb img,
.work-card-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card:hover .work-card-thumb img,
.work-card:hover .work-card-thumb video {
  transform: scale(1.06);
}
/* 写真下端を背景になじませる */
.work-card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, var(--color-bg-card));
  pointer-events: none;
}

.work-card-number {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #ffffff;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  background: rgba(8,36,86,0.65);
  backdrop-filter: blur(4px);
  margin-bottom: 0;
}

.work-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.work-card-icon {
  font-size: 2rem;
  line-height: 1;
}

.work-card-title {
  font-family: var(--font-ja);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.4;
}

.work-card-desc {
  font-size: 0.875rem;
  color: var(--color-text-mid);
  line-height: 1.8;
  flex: 1;
}

.work-coming-soon {
  display: inline-block;
  font-size: 0.7rem;
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: 0.1em;
  background: rgba(21,83,216,0.08);
  color: var(--color-text-muted);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  vertical-align: middle;
  margin-left: 0.5rem;
}

.btn.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.works-cta {
  text-align: center;
}

/* ============================================================
   News
============================================================ */
.news-section { background: var(--color-bg); }

.news-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.news-head {
  position: sticky;
  top: calc(var(--nav-height) + 2rem);
}

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

.news-list {
  gap: 0.85rem;
}

/* 各ニュースをカード風に */
.news-item {
  position: relative;
  display: grid;
  grid-template-columns: 108px auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              background var(--transition-base),
              border-color var(--transition-base);
  color: var(--color-text);
}
/* 左端のアクセントバー（ホバーで出現） */
.news-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-accent-grad);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--transition-base);
}
/* リンク行のホバー演出 */
a.news-item:hover {
  transform: translateX(4px);
  background: #ffffff;
  border-color: rgba(21, 83, 216, 0.35);
  box-shadow: 0 10px 28px rgba(20, 55, 140, 0.14);
}
a.news-item:hover::before { transform: scaleY(1); }
a.news-item:hover .news-arrow {
  transform: translateX(4px);
  color: var(--color-accent-2);
}

.news-date {
  font-family: var(--font-en);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.news-title-text {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--color-text);
  grid-column: 3;
}

.news-arrow {
  font-size: 1rem;
  color: var(--color-accent);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

/* tagがない行のグリッド調整（タイトルはNEW付き行と同じ3列目・左寄せに揃える） */
.news-item:not(:has(.tag)) {
  grid-template-columns: 108px auto 1fr auto;
}
.news-item:not(:has(.tag)) .news-title-text {
  grid-column: 3;
  text-align: left;
}

/* ============================================================
   CTA Banner
============================================================ */
.cta-section {
  position: relative;
  padding: var(--space-xl) 0;
  overflow: hidden;
  text-align: center;
}

.cta-bg {
  position: absolute;
  inset: 0;
  background: var(--color-bg-2);
}
.cta-blob-1 {
  position: absolute;
  width: 600px; height: 600px;
  top: -30%; left: -5%;
}
.cta-blob-2 {
  position: absolute;
  width: 500px; height: 500px;
  bottom: -30%; right: -5%;
}

.cta-inner {
  position: relative;
  z-index: 1;
}

.cta-title {
  font-family: var(--font-ja);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.35;
  margin-bottom: 1.5rem;
}

.cta-desc {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  color: var(--color-text-mid);
  line-height: 2;
  margin-bottom: 2.5rem;
}

.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-visual { display: none; }
  .hero-lead { margin: 0 auto; }
  .hero-actions { justify-content: center; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .philosophy-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .philosophy-text { position: static; }

  .works-grid { grid-template-columns: 1fr; }

  .news-layout { grid-template-columns: 1fr; }
  .news-head { position: static; }
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  .news-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .news-item:not(:has(.tag)) {
    grid-template-columns: 1fr;
  }
  .news-title-text { grid-column: auto; }
  .news-arrow { display: none; }
}