/* ============================================================
   GITEC コーポレートサイト | TOP ページ専用スタイル
   ============================================================ */

/* （パーティクル背景は全ページ共通のため common.css に移動済み） */
/* ---------- 共通: セクションヘッダー（英字大 + 和文小） ---------- */
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 4rem;
}
.sec-head__sub {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-text-mute);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.sec-head__sub::before {
  content: "";
  display: inline-block;
  width: 2.4rem; height: 0.1rem;
  background: var(--c-accent);
}
.sec-head__en {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 4.8rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--c-accent);
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .sec-head { margin-bottom: 6rem; }
  .sec-head__en { font-size: 6.4rem; }
}
/* ---------- sec-title: プレーンな罫線付きh2（カタログ K2「プレーン版」と同一。
   短いオレンジメッシュ罫線を見出し上に配置。EN+JP併記が不要なセクションで使用） ---------- */
.sec-title {
  position: relative;
  margin: 0 0 4rem;
  padding-top: 2.2rem;
  font-size: 3.2rem;
  line-height: 1.35;
}
.sec-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6rem;
  height: 1rem;
  background:
    radial-gradient(at 20% 30%, #eab308 0%, transparent 55%),
    radial-gradient(at 75% 25%, #ff7519 0%, transparent 60%),
    radial-gradient(at 50% 80%, #ff8c42 0%, transparent 55%),
    #eb6100;
  border-radius: 0.2rem;
}
@media (min-width: 768px) {
  .sec-title { margin-bottom: 6rem; }
}
/* ============================================================
   1. Hero（MV）— フルブリード白地・主役級和文キャッチ
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-sp));
  background: transparent;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 9rem 0 4rem;
}
@media (min-width: 768px) {
  .hero {
    min-height: calc(100vh - var(--header-pc));
    padding: 8rem 0 10rem;
    align-items: center;
  }
}

/* 背景: グリッド線を薄くオーバーレイ（右側にフェード） */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--c-grid) 0.1rem, transparent 0.1rem),
    linear-gradient(90deg, var(--c-grid) 0.1rem, transparent 0.1rem);
  background-size: 8rem 8rem;
  mask-image: radial-gradient(ellipse 80% 70% at 75% 50%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 75% 50%, #000 20%, transparent 80%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--pad-sp);
}
@media (min-width: 768px) {
  .hero__inner { padding: 0 var(--pad-pc); }
}

/* コピー（左寄せ・最大幅制限なし） */
.hero__copy {
  display: flex; flex-direction: column; gap: 2rem;
}
.hero__en {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  color: var(--c-accent);
  text-transform: uppercase;
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1;
  transform: scaleY(0.8);
  transform-origin: left top;
}
.hero__en::before {
  content: "";
  display: inline-block;
  width: 2.4rem; height: 0.1rem;
  background: var(--c-accent);
  vertical-align: middle;
  margin-right: 0.8rem;
}
/* char分解 span: 少しだけ文字間を開ける */
.hero__en .char {
  display: inline-block;
  letter-spacing: 0.05em;
  white-space: pre;
}
@media (max-width: 767px) {
  .hero__en { font-size: 1rem; letter-spacing: 0.03em; }
  .hero__en::before { width: 1.6rem; margin-right: 0.5rem; }
  .hero__en .char { letter-spacing: 0.03em; }
}
.hero__title {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--c-text);
  margin: 0;
  transform: scaleY(1.3);
  transform-origin: left top;
}
.hero__title em {
  font-style: normal;
  color: var(--c-accent);
}
@media (min-width: 768px) {
  .hero__title { font-size: 3.6rem; line-height: 1.4; }
}
.hero__sub {
  font-size: 1.3rem;
  line-height: 1.9;
  color: var(--c-text-mute);
  margin: 1.2rem 0 0;
  max-width: 56rem;
}
@media (min-width: 768px) {
  .hero__sub { font-size: 1.4rem; }
}

/* CTA 群（テキストアニメ停止中・即表示） */
.hero__cta {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Scroll Down 誘導（右側・天地中央・縦書き） */
.hero__scroll {
  position: absolute;
  right: var(--pad-sp);
  top: 50%;
  transform: translateY(-50%);
  font-family: "Oswald", sans-serif;
  font-size: 1.1rem; font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--c-text-mute);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  display: inline-flex; align-items: center; gap: 1.2rem;
  z-index: 2;
}
.hero__scroll::after {
  content: ""; width: 0.1rem; height: 3rem;
  background: var(--c-text-mute);
  animation: heroScroll 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes heroScroll {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (min-width: 768px) {
  .hero__scroll { right: var(--pad-pc); }
}
/* SP: テキスト・ボタン群を画面下に寄せ、Scroll はさらにその下（絶対配置） */
@media (max-width: 767px) {
  .hero {
    display: flex;
    align-items: flex-end;
    padding: 9rem 0 20rem;
  }
  .hero__scroll {
    position: absolute;
    left: var(--pad-sp);
    bottom: 2.4rem;
    top: auto; right: auto;
    transform: none;
    margin: 0;
    gap: 1.2rem;
  }
  .hero__scroll::after {
    height: 2.4rem;
  }
}

/* prefers-reduced-motion: 装飾アニメ無効化 */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll::after { animation: none; }
}

/* ─────────────────────────────────────────
   Hero 先進アニメーション
   ・クリップパス wipe（上から下へ鋭く現れる）
   ・スタガー: en → title → sub → cta → news → scroll
   ・パーティクル背景はマウス視差（JS）
   ───────────────────────────────────────── */
.hero__en,
.hero__title,
.hero__sub,
.hero__cta,
.hero__scroll {
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition:
    clip-path 1.1s cubic-bezier(.65,.05,.36,1),
    -webkit-clip-path 1.1s cubic-bezier(.65,.05,.36,1),
    opacity 1.1s ease;
}
.hero.is-revealed .hero__en,
.hero.is-revealed .hero__title,
.hero.is-revealed .hero__sub,
.hero.is-revealed .hero__cta,
.hero.is-revealed .hero__scroll {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  opacity: 1;
}
.hero.is-revealed .hero__en    { transition-delay: 0.10s; }
.hero.is-revealed .hero__title { transition-delay: 0.30s; }
.hero.is-revealed .hero__sub   { transition-delay: 0.55s; }
.hero.is-revealed .hero__cta   { transition-delay: 0.75s; }
.hero.is-revealed .hero__scroll{ transition-delay: 0.95s; }

/* お知らせバッジは最後にふわっと（wipe ではなく fade + 微スライド）
   既存の .hero__news 定義（下方）に opacity/transform/transition を統合する形で
   後勝ちにする */
.hero.is-revealed .hero__news {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 1.4s !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero__news { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__en, .hero__title, .hero__sub, .hero__cta, .hero__news, .hero__scroll {
    clip-path: none;
    -webkit-clip-path: none;
    opacity: 1;
    transition: none;
  }
}

/* Hero 新着お知らせ（最新1件・常に右下絶対配置・ネイビー）
   初期は opacity 0 + 下から微スライド → is-revealed で fade-up（最後にふわっと） */
.hero__news {
  position: absolute;
  right: var(--pad-sp);
  bottom: 2.4rem;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 1.2rem;
  background: #081020;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.3rem;
  padding: 0.8rem 1.4rem 0.8rem 1rem;
  color: var(--c-on-dark);
  text-decoration: none;
  opacity: 0;
  transform: translateY(0.6rem);
  transition:
    background-color .25s ease,
    border-color .25s ease,
    opacity 1.2s ease,
    transform 1.2s cubic-bezier(.22,.61,.36,1);
  max-width: calc(100% - var(--pad-sp) * 2);
}
.hero__news:hover {
  background: #0e1830;
  border-color: var(--c-accent);
}
.hero__news-label {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--c-on-dark);
  background: var(--c-accent);
  padding: 0.4rem 0.9rem;
  border-radius: 0.2rem;
  flex: 0 0 auto;
  line-height: 1;
}
.hero__news-date {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.hero__news-title {
  font-size: 1.2rem;
  color: var(--c-on-dark);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18rem;
}
.hero__news-arr {
  flex: 0 0 auto;
  font-size: 1rem;
  color: var(--c-accent);
  transition: transform .25s ease;
}
.hero__news:hover .hero__news-arr { transform: translateX(0.3rem); }

/* PC: 余白を広げ、タイトル長め */
@media (min-width: 768px) {
  .hero__news {
    right: var(--pad-pc);
    bottom: 4rem;
    gap: 1.6rem;
    padding: 1rem 1.6rem 1rem 1.2rem;
    max-width: calc(100% - var(--pad-pc) * 2);
  }
  .hero__news-title { max-width: 32rem; }
}
/* ============================================================
   2. Message — コーポレートメッセージ
      ・背景なし（地のまま）
      ・背後に巨大タイポ "MESSAGE"（薄く透ける）
      ・上下にオレンジ装飾線
      ・見出し char fade-in（スクロールイン時）
   ============================================================ */
.message {
  position: relative;
  padding: 8rem var(--pad-sp);
  overflow: hidden;
}
@media (min-width: 768px) {
  .message { padding: 12rem var(--pad-pc); }
}
/* 背景巨大タイポ */
.message::before {
  content: "MESSAGE";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 28rem;
  line-height: 1;
  color: rgba(26, 26, 46, 0.04);
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767px) {
  .message::before { font-size: 14rem; }
}
/* 上下オレンジ装飾線 */
.message__deco {
  position: relative;
  display: flex; justify-content: center;
  z-index: 1;
}
.message__deco::before {
  content: "";
  display: block;
  width: 0.1rem; height: 6rem;
  background: linear-gradient(to bottom, transparent, var(--c-accent));
}
.message__deco--bottom::before {
  background: linear-gradient(to top, transparent, var(--c-accent));
}
.message__head {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  margin: 2rem 0 4rem;
  text-align: center;
}
@media (min-width: 768px) {
  .message__head { margin: 2.4rem 0 6rem; }
}
.message__en {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  color: var(--c-accent);
  text-transform: uppercase;
  line-height: 1;
  display: inline-block;
  transform: scaleY(0.8);
  transform-origin: left top;
}
.message__label {
  font-size: 1.1rem;
  color: var(--c-text-mute);
  letter-spacing: 0.16em;
}
.message__body {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 4rem;
  max-width: 100rem;
  margin: 0 auto 4rem;
  text-align: center;
}
@media (min-width: 768px) {
  .message__body { margin: 0 auto 6rem; }
}
.message__title {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
  letter-spacing: 0.04em;
  transform: scaleY(1.3);
  transform-origin: left top;
}
@media (min-width: 768px) {
  .message__title { font-size: 3.8rem; line-height: 1.6; }
}
.message__title em {
  font-style: normal;
  background: var(--grad-orange-mesh);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: 0 0.2em;
}
.message__lead {
  font-size: 1.2rem;
  line-height: 2.1;
  color: var(--c-text-mute);
  margin: 0;
  max-width: 72rem;
}
@media (min-width: 768px) {
  .message__lead { font-size: 1.3rem; }
}
/* 鏡の曇りが取れる演出（IntersectionObserver でクラス付与）
   ・初期: blur で霞んで、わずかに不透明
   ・完了: 鮮明 + 完全表示
   ・char ごとに微スタガー → 拭き取られていく印象 */
.message__title .char {
  display: inline-block;
  opacity: 0.15;
  filter: blur(14px);
  transform: scale(1.04);
  transition:
    opacity .55s cubic-bezier(.22, .61, .36, 1),
    filter .55s cubic-bezier(.22, .61, .36, 1),
    transform .55s cubic-bezier(.22, .61, .36, 1);
}
.message__title.is-in .char {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.message__lead {
  opacity: 0.2;
  filter: blur(10px);
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1) 1s,
    filter .7s cubic-bezier(.22, .61, .36, 1) 1s;
}
.message.is-in .message__lead {
  opacity: 1;
  filter: blur(0);
}
/* 装飾線と背景タイポも一緒に晴れる */
.message__deco::before,
.message::before {
  opacity: 0;
  filter: blur(8px);
  transition: opacity .6s ease, filter .6s ease;
}
.message.is-in .message__deco::before,
.message.is-in::before {
  opacity: 1;
  filter: blur(0);
}
.message::before {
  transition-delay: .15s;
}
@media (prefers-reduced-motion: reduce) {
  .message__title .char,
  .message__lead,
  .message__deco::before,
  .message::before {
    opacity: 1; filter: none; transform: none; transition: none;
  }
}
/* ============================================================
   3. Solution — ソリューション 6 項目（カード）
      ・背景なし
      ・PC 3列 / SP 1列
      ・カード: 画像 + 番号 + 和文タイトル + 英字 + 説明 + 矢印
   ============================================================ */
.solution {
  position: relative;
  padding: 8rem var(--pad-sp);
}
@media (min-width: 768px) {
  .solution { padding: 12rem var(--pad-pc); }
}
/* 2カラム: 左=見出し+リード+CTA / 右=行リスト */
.solution__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5rem;
}
@media (min-width: 768px) {
  .solution__inner {
    grid-template-columns: minmax(28rem, 38rem) 1fr;
    gap: 7rem;
    align-items: start;
  }
}
.solution__head {
  display: flex; flex-direction: column; gap: 1.6rem;
  max-width: 80rem;
}
@media (min-width: 768px) {
  .solution__head { position: sticky; top: calc(var(--header-pc) + 3rem); }
}
.solution__cta {
  margin-top: 1rem;
  align-self: flex-start;
}
.solution__label {
  display: flex; flex-direction: column; gap: 0.4rem;
}
.solution__en {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 5rem;
  letter-spacing: 0.06em;
  background: var(--grad-navy-mesh);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-transform: uppercase;
  line-height: 1;
  display: inline-block;
  transform: scaleY(0.8);
  transform-origin: left top;
}
@media (min-width: 768px) {
  .solution__en { font-size: 7rem; }
}
.solution__jp {
  font-size: 1.4rem;
  color: var(--c-text-mute);
  letter-spacing: 0.16em;
}
.solution__title {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-text);
  margin: 0;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .solution__title { font-size: 3rem; }
}
.solution__lead {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.9;
  color: var(--c-text);
  margin: 1.2rem 0 0;
  max-width: 60rem;
}
@media (min-width: 768px) {
  .solution__lead { font-size: 1.2rem; }
}

/* 右カラム: 行リスト */
.solution__list {
  display: flex; flex-direction: column;
}
.sol-row {
  position: relative;
  display: grid;
  grid-template-columns: 9rem 1fr;
  grid-template-areas:
    "media text"
    "media arr";
  align-items: center;
  gap: 0.8rem 1.6rem;
  padding: 1.6rem 0;
  color: var(--c-text);
  text-decoration: none;
  border-top: 1px solid var(--c-border-subtle);
  transition: background-color .25s ease;
}
.sol-row:last-child { border-bottom: 1px solid var(--c-border-subtle); }
@media (min-width: 768px) {
  .sol-row {
    grid-template-columns: 18rem 1fr auto;
    grid-template-areas: "media text arr";
    gap: 4rem;
    padding: 2rem 1rem 2rem 0;
  }
}
.sol-row:hover { background-color: var(--c-bg-subtle); }
.sol-row__media {
  grid-area: media;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0.3rem;
  background: var(--c-bg-muted);
}
.sol-row__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.sol-row:hover .sol-row__media img { transform: scale(1.06); }
.sol-row__text {
  grid-area: text;
  display: flex; flex-direction: column; gap: 0.4rem;
  min-width: 0;
}
.sol-row__name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-text);
  margin: 0;
}
@media (min-width: 768px) {
  .sol-row__name { font-size: 1.9rem; }
}
.sol-row__sub {
  font-size: 1.1rem;
  color: var(--c-text-mute);
  line-height: 1.6;
  margin: 0;
}
@media (min-width: 768px) {
  .sol-row__sub { font-size: 1.2rem; }
}
.sol-row__arr {
  grid-area: arr;
  justify-self: end;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--c-accent);
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .sol-row__arr {
    justify-self: auto;
    justify-content: center;
    width: 4.6rem; height: 4.6rem;
    border-radius: 50%;
    background-image: var(--grad-orange-mesh);
    background-color: var(--c-accent);
    background-size: 200% 200%;
    background-position: 0% 50%;
    color: var(--c-on-dark);
    font-size: 1.6rem;
    overflow: hidden;
    transition: background-position .5s ease;
  }
}
.sol-row__arr-label { display: inline-block; }
@media (min-width: 768px) {
  .sol-row__arr-label { display: none; }
}
.sol-row__arr-icon {
  display: inline-block; will-change: transform;
}
.sol-row:hover .sol-row__arr-icon { animation: btnArrowSlide .38s cubic-bezier(.65,.05,.36,1); }
@media (min-width: 768px) {
  .sol-row:hover .sol-row__arr { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .sol-row:hover .sol-row__arr-icon { animation: none; }
}

/* ─────────────────────────────────────────
   Solution 先進アニメーション
   ・左ヘッダ: 上から順に fade-up（en/jp/title/lead/cta）
   ・各行: 画像マスク wipe（左→右）+ テキスト fade-up + 矢印スプリング
   ───────────────────────────────────────── */
.solution__head > *,
.solution__cta {
  opacity: 0;
  transform: translateY(1.6rem);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);
}
.solution__head.is-in > * { opacity: 1; transform: translateY(0); }
.solution__head.is-in > *:nth-child(1) { transition-delay: 0.05s; }
.solution__head.is-in > *:nth-child(2) { transition-delay: 0.20s; }
.solution__head.is-in > *:nth-child(3) { transition-delay: 0.35s; }
.solution__head.is-in > *:nth-child(4) { transition-delay: 0.50s; }

/* 各行のカバーワイプ（行を一体として扱う）
   ネイビーパネルが左→右にスライドアウトして内容が現れる */
.sol-row {
  --reveal-delay: 0s;
  overflow: hidden;
}
.sol-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-orange-mesh);
  background-color: var(--c-accent);
  background-size: 200% 200%;
  background-position: 0% 50%;
  transform: translateX(0);
  transition: transform 1s cubic-bezier(.77, 0, .175, 1);
  z-index: 10;
  pointer-events: none;
}
.sol-row.is-in::before {
  transform: translateX(101%);
  transition-delay: var(--reveal-delay);
}
@media (prefers-reduced-motion: reduce) {
  .solution__head > *,
  .solution__cta { opacity: 1; transform: none; transition: none; }
  .sol-row::before { display: none; }
}
/* ============================================================
   4. Works — 制作実績 6 件（カード型）
      ・背景なし
      ・PC 3列 / SP 1列
      ・カード: 画像（4:3）+ カテゴリタグ + クライアント + プロジェクト名
   ============================================================ */
.works {
  position: relative;
  padding: 8rem var(--pad-sp);
}
@media (min-width: 768px) {
  .works { padding: 12rem var(--pad-pc); }
}
.works__head {
  display: flex; flex-direction: column; gap: 1.6rem;
  margin-bottom: 5rem;
  max-width: 80rem;
}
@media (min-width: 768px) {
  .works__head {
    flex-direction: row; align-items: flex-end; justify-content: space-between;
    gap: 4rem;
    margin-bottom: 6rem;
    max-width: none;
  }
}
.works__head-text {
  display: flex; flex-direction: column; gap: 1.6rem;
  max-width: 80rem;
}
.works__label {
  display: flex; flex-direction: column; gap: 0.4rem;
}
.works__en {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 5rem;
  letter-spacing: 0.06em;
  background: var(--grad-navy-mesh);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-transform: uppercase;
  line-height: 1;
  display: inline-block;
  transform: scaleY(0.8);
  transform-origin: left top;
}
@media (min-width: 768px) {
  .works__en { font-size: 7rem; }
}
.works__jp {
  font-size: 1.4rem;
  color: var(--c-text-mute);
  letter-spacing: 0.16em;
}
.works__title {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-text);
  margin: 0;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .works__title { font-size: 3rem; }
}
.works__lead {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.9;
  color: var(--c-text);
  margin: 0;
  max-width: 60rem;
}
@media (min-width: 768px) {
  .works__lead { font-size: 1.2rem; }
}
.works__note {
  margin-top: 1.2rem;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--c-text-mute);
}
.works__cta {
  flex: 0 0 auto;
  align-self: flex-start;
}
@media (min-width: 768px) {
  .works__cta { align-self: flex-end; margin-bottom: 0.4rem; }
}

/* 横スクロールカルーセル */
.works__carousel {
  position: relative;
}
.works__track {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad-sp);
  scroll-behavior: smooth;
  padding: 1rem var(--pad-sp) 3rem;
  margin: 0 calc(var(--pad-sp) * -1);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.works__track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .works__track {
    gap: 3rem;
    padding: 1rem var(--pad-pc) 3rem;
    margin: 0 calc(var(--pad-pc) * -1);
    scroll-padding-left: var(--pad-pc);
  }
}

/* 1枚のカード */
.works-card {
  flex: 0 0 auto;
  width: 28rem;
  scroll-snap-align: start;
  position: relative;
  display: flex; flex-direction: column;
  color: var(--c-text);
  text-decoration: none;
  transition: transform .25s ease;
}
@media (min-width: 768px) {
  .works-card { width: 38rem; }
}
.works-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.4rem;
  background: var(--c-bg-muted);
  margin-bottom: 2rem;
}
.works-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.works-card:not(.works-card--static):hover .works-card__media img { transform: scale(1.06); }
.works-card__cat {
  position: absolute;
  top: 1.2rem; left: 1.2rem;
  z-index: 2;
  display: inline-flex; align-items: center;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--c-on-dark);
  background: rgba(8, 16, 32, 0.78);
  padding: 0.4rem 0.9rem;
  border-radius: 0.2rem;
  line-height: 1;
  text-transform: uppercase;
}
/* リンクだとわかりにくいカードに VIEW → を表示（タグの下・右寄せ。ホバーで丸矢印が動く。.product-card__more と同じ挙動） */
.works-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-end;
  margin-top: 1.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-accent);
}
.works-card__more-arr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--c-bg-muted);
  color: var(--c-accent);
  font-size: 1rem;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.works-card:hover .works-card__more-arr {
  background: var(--c-accent);
  color: var(--c-on-dark);
  transform: translateX(0.3rem);
}
/* 見出しの上に大きく引用符 “（コンマ風装飾） */
.works-card__name-wrap {
  position: relative;
  padding-top: 3.6rem;
  margin-bottom: 1.6rem;
}
.works-card__name-wrap::before {
  content: "“";
  position: absolute;
  top: -0.4rem; left: -0.4rem;
  font-family: "M PLUS 1p", serif;
  font-weight: 700;
  font-size: 7rem;
  color: var(--c-text);
  line-height: 1;
  pointer-events: none;
}
@media (min-width: 768px) {
  .works-card__name-wrap { padding-top: 4.4rem; }
  .works-card__name-wrap::before { font-size: 9rem; top: -0.8rem; }
}

.works-card__name {
  position: relative;
  z-index: 1;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-text);
  margin: 0;
  transition: color .25s ease;
}
@media (min-width: 768px) {
  .works-card__name { font-size: 2rem; line-height: 1.75; }
}
.works-card:hover .works-card__name { color: var(--c-accent); }

/* カード下部: 案件名 + 担当者 + タグ */
.works-card__foot {
  display: flex; flex-direction: column; gap: 0.8rem;
  min-width: 0;
}
.works-card__project {
  font-size: 1.3rem;
  color: var(--c-text);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}
@media (min-width: 768px) {
  .works-card__project { font-size: 1.4rem; }
}
.works-card__client {
  font-size: 1.1rem;
  color: var(--c-text-mute);
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}
.works-card__tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  line-height: 1.4;
}
.works-card__desc {
  position: relative;
  z-index: 1;
  margin-top: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--c-text-mute);
}
.works-card--tight-foot .works-card__name-wrap { margin-bottom: 0.8rem; }
.works-card--tight-foot .works-card__foot { margin-top: auto; padding-top: 0.4rem; }
.works-card--static { cursor: default; }
.works-card--static:hover .works-card__name { color: var(--c-text); }
.works-card__tag {
  display: inline-block;
  font-size: 1rem;
  color: var(--c-text-mute);
  background: var(--c-bg-muted);
  padding: 0.3rem 0.8rem;
  border-radius: 0.2rem;
  line-height: 1.3;
}
/* カルーセルコントロール（Solution の矢印丸と同じトーン） */
.works__nav {
  display: flex; align-items: center; gap: 2rem;
  margin-top: 2rem;
}
.works__nav-btn {
  flex: 0 0 auto;
  width: 4.6rem; height: 4.6rem;
  border-radius: 50%;
  border: 0;
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-size: 1.6rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .25s ease, opacity .25s ease;
}
.works__nav-btn:hover { background: var(--c-accent-hi); }
.works__nav-btn:disabled { opacity: 0.25; cursor: not-allowed; background: var(--c-text); }
.works__nav-btn:disabled:hover { background: var(--c-text); }
.works__progress {
  position: relative;
  flex: 1 1 auto;
  height: 0.1rem;
  background: var(--c-border-subtle);
  overflow: hidden;
}
.works__progress-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 20%;
  background: var(--c-accent);
  transition: left .35s ease, width .35s ease;
}

/* ─────────────────────────────────────────
   Works 先進アニメーション
   ・左ヘッダ: 上から fade-up（en/jp/title/lead/cta）
   ・各カード: fade-up + 画像クリップマスク wipe + 引用符スケール pop
   ───────────────────────────────────────── */
.works__head-text > *,
.works__cta {
  opacity: 0;
  transform: translateY(1.6rem);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);
}
.works__head.is-in .works__head-text > *,
.works__head.is-in .works__cta {
  opacity: 1; transform: translateY(0);
}
.works__head.is-in .works__head-text > *:nth-child(1) { transition-delay: 0.05s; }
.works__head.is-in .works__head-text > *:nth-child(2) { transition-delay: 0.20s; }
.works__head.is-in .works__head-text > *:nth-child(3) { transition-delay: 0.35s; }
.works__head.is-in .works__cta                        { transition-delay: 0.50s; }

/* カード本体: fade-up */
.works-card {
  --reveal-delay: 0s;
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);
}
.works-card.is-in {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--reveal-delay);
}
/* 画像: 左→右クリップマスク wipe */
.works-card__media {
  overflow: hidden;
}
.works-card__media img {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition:
    clip-path 1.1s cubic-bezier(.65,.05,.36,1),
    -webkit-clip-path 1.1s cubic-bezier(.65,.05,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
}
.works-card.is-in .works-card__media img {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  transition-delay: calc(var(--reveal-delay) + 0.2s);
}
/* 引用符: スケール pop */
.works-card__name-wrap::before {
  transform-origin: left top;
  transform: scale(0.4) rotate(-8deg);
  opacity: 0;
  transition:
    opacity .5s ease,
    transform .8s cubic-bezier(.34, 1.56, .64, 1);
}
.works-card.is-in .works-card__name-wrap::before {
  opacity: 1;
  transform: scale(1) rotate(0);
  transition-delay: calc(var(--reveal-delay) + 0.45s);
}
@media (prefers-reduced-motion: reduce) {
  .works__head-text > *,
  .works__cta,
  .works-card,
  .works-card__media img,
  .works-card__name-wrap::before {
    opacity: 1; transform: none; clip-path: none; -webkit-clip-path: none; transition: none;
  }
}
/* ============================================================
   5. Products — 自社プロダクト 3 製品
      ・背景なし
      ・PC 3列 / SP 1列
      ・カード: ヒーロー画像 + 製品名(英) + カテゴリ + 説明 + リンク
   ============================================================ */
.products {
  position: relative;
  padding: 8rem var(--pad-sp);
}
@media (min-width: 768px) {
  .products { padding: 12rem var(--pad-pc); }
}
.products__head {
  display: flex; flex-direction: column; gap: 1.6rem;
  margin-bottom: 5rem;
  max-width: 80rem;
}
@media (min-width: 768px) {
  .products__head {
    flex-direction: row; align-items: flex-end; justify-content: space-between;
    gap: 4rem;
    margin-bottom: 6rem;
    max-width: none;
  }
}
.products__head-text {
  display: flex; flex-direction: column; gap: 1.6rem;
  max-width: 80rem;
}
.products__label {
  display: flex; flex-direction: column; gap: 0.4rem;
}
.products__en {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 5rem;
  letter-spacing: 0.06em;
  background: var(--grad-navy-mesh);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-transform: uppercase;
  line-height: 1;
  display: inline-block;
  transform: scaleY(0.8);
  transform-origin: left top;
}
@media (min-width: 768px) {
  .products__en { font-size: 7rem; }
}
.products__jp {
  font-size: 1.4rem;
  color: var(--c-text-mute);
  letter-spacing: 0.16em;
}
.products__title {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-text);
  margin: 0;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .products__title { font-size: 3rem; }
}
.products__lead {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.9;
  color: var(--c-text);
  margin: 0;
  max-width: 60rem;
}
@media (min-width: 768px) {
  .products__lead { font-size: 1.2rem; }
}
.products__cta {
  flex: 0 0 auto;
  align-self: flex-start;
}
@media (min-width: 768px) {
  .products__cta { align-self: flex-end; margin-bottom: 0.4rem; }
}

.products__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem 2.4rem;
}
@media (min-width: 768px) {
  .products__grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

.product-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border-subtle);
  border-radius: 0.4rem;
  overflow: hidden;
  color: var(--c-text);
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease;
}
.product-card:hover {
  border-color: var(--c-accent);
}
.product-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-muted);
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__cat {
  position: absolute;
  top: 1.2rem; left: 1.2rem;
  z-index: 2;
  display: inline-flex; align-items: center;
  font-size: 1.1rem;
  color: var(--c-text);
  background: var(--c-on-dark);
  padding: 0.4rem 0.9rem;
  border-radius: 0.2rem;
  line-height: 1;
}
.product-card__body {
  padding: 2.4rem 2rem 2.6rem;
  display: flex; flex-direction: column; gap: 1rem;
  flex: 1 1 auto;
}
@media (min-width: 768px) {
  .product-card__body { padding: 2.6rem 2.4rem 2.8rem; }
}
.product-card__name {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 2.6rem;
  letter-spacing: 0.04em;
  color: var(--c-text);
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  transition: color .25s ease;
}
@media (min-width: 768px) {
  .product-card__name { font-size: 3rem; }
}
.product-card:hover .product-card__name { color: var(--c-accent); }
.product-card__sub {
  font-size: 1.2rem;
  color: var(--c-text-mute);
  line-height: 1.4;
}
.product-card__desc {
  font-size: 1.3rem;
  line-height: 1.9;
  color: var(--c-text-mute);
  margin: 0;
}
.product-card__more {
  margin-top: auto;
  padding-top: 1.6rem;
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: var(--c-text);
  text-transform: uppercase;
}
.product-card__more-arr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--c-bg-muted);
  color: var(--c-text);
  font-size: 1rem;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.product-card:hover .product-card__more-arr {
  background: var(--c-accent);
  color: var(--c-on-dark);
  transform: translateX(0.3rem);
}

/* ─────────────────────────────────────────
   Products 先進アニメーション
   ・左ヘッダ: fade-up
   ・各カード: 3D Y軸 flip（右側が手前に開くように現れる）
   ・製品名: わずかな delay で再描画感
   ───────────────────────────────────────── */
.products__head-text > *,
.products__cta {
  opacity: 0;
  transform: translateY(1.6rem);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);
}
.products__head.is-in .products__head-text > *,
.products__head.is-in .products__cta {
  opacity: 1; transform: translateY(0);
}
.products__head.is-in .products__head-text > *:nth-child(1) { transition-delay: 0.05s; }
.products__head.is-in .products__head-text > *:nth-child(2) { transition-delay: 0.20s; }
.products__head.is-in .products__head-text > *:nth-child(3) { transition-delay: 0.35s; }
.products__head.is-in .products__cta                         { transition-delay: 0.50s; }

/* 各カード: シンプル fade-up */
.product-card {
  --reveal-delay: 0s;
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1),
    border-color .25s ease;
}
.product-card.is-in {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--reveal-delay);
}

/* 画像: ズームアウト（scale 1.15 → 1.0） */
.product-card__media img {
  transform: scale(1.15);
  transition: transform 1.3s cubic-bezier(.22,.61,.36,1);
}
.product-card.is-in .product-card__media img {
  transform: scale(1);
  transition-delay: calc(var(--reveal-delay) + 0.1s);
}
/* ホバー時の追加ズームは打ち消しを避けて維持 */
.product-card:hover .product-card__media img { transform: scale(1.06); }

/* 製品名: char ごとに fade-up */
.product-card__name .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.22,.61,.36,1);
}
.product-card.is-in .product-card__name .char {
  opacity: 1;
  transform: translateY(0);
}

/* サブ・説明・more: 後追い fade-up */
.product-card__sub,
.product-card__desc,
.product-card__more {
  opacity: 0;
  transform: translateY(0.8rem);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22,.61,.36,1);
}
.product-card.is-in .product-card__sub {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--reveal-delay) + 0.75s);
}
.product-card.is-in .product-card__desc {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--reveal-delay) + 0.90s);
}
.product-card.is-in .product-card__more {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--reveal-delay) + 1.05s);
}
@media (prefers-reduced-motion: reduce) {
  .products__head-text > *,
  .products__cta,
  .product-card,
  .product-card__media img,
  .product-card__name .char,
  .product-card__sub,
  .product-card__desc,
  .product-card__more {
    opacity: 1; transform: none; transition: none;
  }
}
/* ============================================================
   6. Posts — Blog & News（2カラム並列）
      ・背景なし
      ・PC 2列 / SP 縦
      ・左 Blog（SEO 記事一覧）/ 右 News（お知らせ一覧）
   ============================================================ */
.posts {
  position: relative;
  padding: 8rem var(--pad-sp);
}
@media (min-width: 768px) {
  .posts { padding: 12rem var(--pad-pc); }
}
.posts__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5rem;
}
@media (min-width: 768px) {
  .posts__inner { grid-template-columns: 1fr 1fr; gap: 6rem; }
}
.posts__col { display: flex; flex-direction: column; gap: 2.4rem; }
.posts__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--c-border-muted);
}
.posts__label {
  display: flex; flex-direction: column; gap: 0.4rem;
}
.posts__en {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 4rem;
  letter-spacing: 0.06em;
  background: var(--grad-navy-mesh);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-transform: uppercase;
  line-height: 1;
  display: inline-block;
  transform: scaleY(0.8);
  transform-origin: left top;
}
@media (min-width: 768px) {
  .posts__en { font-size: 5.4rem; }
}
.posts__jp {
  font-size: 1.4rem;
  color: var(--c-text-mute);
  letter-spacing: 0.16em;
}
.posts__more {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: var(--c-text);
  text-transform: uppercase;
  text-decoration: none;
  transition: color .25s ease;
  padding-bottom: 0.6rem;
}
/* posts__more の hover color は共通テキストリンクスタイルで制御（メッシュ塗り） */
.posts__more-arr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--c-bg-muted);
  color: var(--c-text);
  font-size: 1rem;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.posts__more:hover .posts__more-arr {
  background: var(--c-accent);
  color: var(--c-on-dark);
  -webkit-text-fill-color: var(--c-on-dark);
  transform: translateX(0.3rem);
}

.posts__list { display: flex; flex-direction: column; }

/* Blog: 画像つき記事行 */
.post-blog {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.6rem;
  align-items: center;
  padding: 1.8rem 0;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border-subtle);
  transition: background-color .25s ease;
}
@media (min-width: 768px) {
  .post-blog { grid-template-columns: 14rem 1fr; gap: 2rem; padding: 2rem 0; }
}
.post-blog:hover { background: var(--c-bg-subtle); }
.post-blog__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0.3rem;
  background: var(--c-bg-muted);
}
.post-blog__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.post-blog:hover .post-blog__media img { transform: scale(1.06); }
.post-blog__text {
  display: flex; flex-direction: column; gap: 0.6rem;
  min-width: 0;
}
.post-blog__meta {
  display: flex; align-items: center; gap: 1rem;
  font-size: 1.05rem;
  color: var(--c-text-mute);
}
.post-blog__date {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.post-blog__cat {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  background: var(--c-bg-muted);
  padding: 0.3rem 0.7rem;
  border-radius: 0.2rem;
  line-height: 1.3;
}
.post-blog__title {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .post-blog__title { font-size: 1.4rem; }
}
.post-blog:hover .post-blog__title { color: var(--c-accent); }

/* News: 段落ち（日付＋カテゴリ → タイトル）— Blog と同構造 */
.post-news {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.8rem 0;
  min-height: 9.85rem;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border-subtle);
  transition: background-color .25s ease;
}
@media (min-width: 768px) {
  .post-news { padding: 2rem 0; min-height: 12.75rem; }
}
.post-news:hover { background: var(--c-bg-subtle); }
.post-news__meta {
  display: flex; align-items: center; gap: 1rem;
}
.post-news__date {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--c-text-mute);
}
.post-news__cat {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--c-bg-muted);
  padding: 0.3rem 0.7rem;
  border-radius: 0.2rem;
  color: var(--c-text-mute);
  line-height: 1.3;
}
.post-news__title {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
  transition: color .25s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .post-news__title { font-size: 1.4rem; }
}
.post-news:hover .post-news__title { color: var(--c-accent); }

/* ─────────────────────────────────────────
   Posts (Blog & News) 先進アニメ
   ・各ヘッダ: fade-up
   ・各記事行: 下からふわっと、スタガーで順次
   ───────────────────────────────────────── */
.posts__head {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.posts__col.is-in .posts__head {
  opacity: 1; transform: translateY(0);
}
.post-blog,
.post-news {
  --reveal-delay: 0s;
  opacity: 0;
  transform: translateY(1.4rem);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22,.61,.36,1),
    background-color .25s ease;
}
.post-blog.is-in,
.post-news.is-in {
  opacity: 1; transform: translateY(0);
  transition-delay: var(--reveal-delay);
}
@media (prefers-reduced-motion: reduce) {
  .posts__head,
  .post-blog,
  .post-news { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
   7. Recruit — 採用情報導線（フルブリード・バナー型）
      ・大きな背景画像 + 暗いオーバーレイ
      ・白テキスト見出し + リード + CTA
      ・サブ動線: Interview / Requirements
   ============================================================ */
.recruit {
  position: relative;
  padding: 8rem var(--pad-sp);
}
@media (min-width: 768px) {
  .recruit { padding: 12rem var(--pad-pc); }
}
.recruit__banner {
  position: relative;
  overflow: hidden;
  border-radius: 0.6rem;
  min-height: 38rem;
  display: flex; align-items: center;
  padding: 5rem 2.4rem;
  color: var(--c-on-dark);
}
@media (min-width: 768px) {
  .recruit__banner {
    min-height: 44rem;
    padding: 6rem 6rem;
  }
}
/* 背景画像（picsum ダミー） */
.recruit__banner::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("https://picsum.photos/seed/gitec-recruit/1600/700");
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* 暗いオーバーレイ + 左から右へグラデ */
.recruit__banner::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 16, 32, 0.78) 0%, rgba(8, 16, 32, 0.55) 50%, rgba(8, 16, 32, 0.35) 100%);
  z-index: 1;
}
.recruit__content {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column; gap: 2.4rem;
  max-width: 60rem;
}
.recruit__label {
  display: flex; flex-direction: column; gap: 0.4rem;
}
.recruit__en {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 5rem;
  letter-spacing: 0.06em;
  background: var(--grad-orange-mesh);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-transform: uppercase;
  line-height: 1;
  display: inline-block;
  transform: scaleY(0.8);
  transform-origin: left top;
}
@media (min-width: 768px) {
  .recruit__en { font-size: 7rem; }
}
.recruit__jp {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.16em;
}
.recruit__title {
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-on-dark);
  margin: 0;
  letter-spacing: 0.02em;
  transform: scaleY(1.3);
  transform-origin: left top;
}
@media (min-width: 768px) {
  .recruit__title { font-size: 3.6rem; line-height: 1.45; }
}
.recruit__lead {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 50rem;
}
@media (min-width: 768px) {
  .recruit__lead { font-size: 1.3rem; }
}
.recruit__cta {
  margin-top: 0.6rem;
}
/* SP: コンテンツを幅 100% にしてボタンを画面中央へ */
@media (max-width: 767px) {
  .recruit__content {
    width: 100%;
    max-width: 100%;
  }
  .recruit__content > .btn {
    align-self: center;
  }
}

/* サブ動線（Interview / Requirements）— 横長フルブリードバナー */
.recruit__subs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-top: 2.4rem;
}
@media (min-width: 768px) {
  .recruit__subs { grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; }
}
.recruit-sub {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.6rem;
  min-height: 7rem;
  padding: 1.6rem 2.4rem 1.6rem 2.6rem;
  border-radius: 0.4rem;
  text-decoration: none;
  overflow: hidden;
  transition: background-color .25s ease, transform .25s ease;
}
@media (min-width: 768px) {
  .recruit-sub { min-height: 8rem; padding: 1.6rem 3rem 1.6rem 3.2rem; }
}
/* 共通: グレー背景バナー */
.recruit-sub {
  background: var(--c-bg-muted);
  color: var(--c-text);
}
.recruit-sub:hover { background: #e6e8eb; }
.recruit-sub__text {
  display: flex; flex-direction: column; gap: 0.3rem;
  min-width: 0;
}
.recruit-sub__name {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  color: inherit;
}
@media (min-width: 768px) {
  .recruit-sub__name { font-size: 1.7rem; }
}
/* 右側: 円形矢印（罫線なし） */
.recruit-sub__right {
  flex: 0 0 auto;
  display: flex; align-items: center;
}
.recruit-sub__arr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-size: 1.3rem;
  overflow: hidden;
  transition: background-color .25s ease;
}
.recruit-sub__arr-icon {
  display: inline-block; will-change: transform;
}
.recruit-sub:hover .recruit-sub__arr { background: var(--c-accent-hi); }
.recruit-sub:hover .recruit-sub__arr-icon { animation: btnArrowSlide .38s cubic-bezier(.65,.05,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .recruit-sub:hover .recruit-sub__arr-icon { animation: none; }
}

/* ─────────────────────────────────────────
   Recruit 先進アニメ
   ・バナー本体: 下からふわ
   ・サブ動線（社員インタビュー / 募集要項）: 下からふわ・スタガー
   ───────────────────────────────────────── */
.recruit__banner,
.recruit-sub {
  --reveal-delay: 0s;
  opacity: 0;
  transform: translateY(1.6rem);
  transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.22,.61,.36,1),
    background-color .25s ease,
    background-position .5s ease;
}
.recruit__banner.is-in,
.recruit-sub.is-in {
  opacity: 1; transform: translateY(0);
  transition-delay: var(--reveal-delay);
}
@media (prefers-reduced-motion: reduce) {
  .recruit__banner,
  .recruit-sub { opacity: 1; transform: none; transition: none; }
}