/* =========================================================
   HERO 改修 2026-10-16 (rev.c)
   左：コンソール（縦のみクリップ・横はみ出し許可）
   右：ロゴ＋キャッチコピー
   style.css の後に読み込み、既存 .hero 指定を上書きする

   [rev.c 修正点]
   style.css の .hero は flex(column) コンテナで、.wrap の
   margin:0 auto により .hero-split が内容幅まで縮んでいた。
   → 左カラム（コンソール）の幅が 0 になり描画されなかった。
   width:100% で全幅に戻す。
   ========================================================= */

/* ---------- 高さのリセット ---------- */
.hero {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 58px 0 !important;
}

.hero .hero-split {
  width: 100%;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 56px;
  height: auto !important;
  min-height: 0 !important;
}

/* ---------- 左：コンソール ---------- */
.hero-console {
  position: relative;
  align-self: stretch;                 /* 右カラム（ロゴ＋キャッチ）の高さに追従 */
  height: auto;
  min-height: 384px;
  min-width: 0;
  clip-path: inset(0 -100vw 0 -100vw); /* 上下のみクリップ、左右ははみ出し可 */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: repeat-x;        /* 横へのはみ出し部分にもマスクを敷く */
          mask-repeat: repeat-x;
}

/* ---------- 右：ロゴ＋キャッチ ---------- */
.hero-brand {
  position: relative;
  z-index: 6;                          /* コンソール行(z-index:5相当)より前面 */
  display: flex;
  flex-direction: column;              /* ロゴ → キャッチ を縦積み */
  align-items: center;
  gap: 28px;
}

.hero .hero-logo {
  display: block;
  width: 288px;                        /* ロゴサイズはここで調整 */
  height: auto;
  max-width: none;
}

.hero-brand .hero-h1 {
  margin: 0;
}
.hero-brand .hero-h1 .l1,
.hero-brand .hero-h1 .l2 {
  font-size: clamp(30px, 4.2vw, 63px); /* キャッチの大きさ（70px の 90%） */
}

/* ---------- タブレット・スマホ：ロゴ上／コンソール下 ---------- */
@media (max-width: 900px) {
  .hero {
    padding: 32px 0 !important;
  }
  .hero .hero-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-brand {
    order: 1;
    gap: 20px;
  }
  .hero-console {
    display: none;                     /* スマホではコンソール演出を非表示 */
  }
  .hero .hero-logo {
    width: 156px;
  }
}