/*
 * トップの現場ロイドの帯（v1.0.0・2026-11-11）
 *
 * - 今の gembaroid.jp に寄せる: 黒の地・GR のロゴ＋「現場ロイド」・同じ言葉・青のグラデーションのボタン
 *   （gembaroid の .th__btn -blue と同じ linear-gradient(45deg, #0764C7, #0DC3C2)）。
 * - 帯全体を1つのリンク（.p-homeGr__link）にし、広告の帯らしく右に現場の写真を置く。
 *   マウスを合わせると帯が浮き、写真が少し寄り、ボタンが濃い青に変わる。
 * - 外側の section（.p-homeGr）は js-rise の入りの動きで transform を使うので、
 *   帯の見た目と浮き上がりは内側の a に持たせる（transform を取り合わない）。
 * - 写真は gembaroid.jp の自社撮影（top_own_wind.jpg）を 1000px に縮めて webp にしたもの。
 */

.p-homeGr.--banner {
  background: none;
  border-radius: 0;
  padding: 0;
  display: block;
}

.p-homeGr__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  isolation: isolate;
}
@media screen and (min-width: 1101px) {
  .p-homeGr__link {
    padding: 48px 56px;
    min-height: 260px;
  }
}
@media screen and (max-width: 1100px) {
  .p-homeGr__link {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 0 20px 28px;
  }
}

/* 右の写真（左へ黒くなじませる） */
.p-homeGr__photo {
  position: absolute;
  z-index: -1;
  overflow: hidden;
}
.p-homeGr__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.p-homeGr__photo:after {
  content: "";
  position: absolute;
  inset: 0;
}
@media screen and (min-width: 1101px) {
  .p-homeGr__photo {
    top: 0;
    right: 0;
    width: 48%;
    height: 100%;
  }
  /* 写真そのものを左へ透かして黒の地になじませる（重ねた黒のグラデーションだと左端に線が出た） */
  .p-homeGr__photo {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 65%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 65%);
  }
  .p-homeGr__photo:after {
    background: rgba(0, 0, 0, 0.3);
  }
}
@media screen and (max-width: 1100px) {
  .p-homeGr__photo {
    position: relative;
    z-index: 0;
    margin: 0 -20px;
    height: 150px;
  }
  .p-homeGr__photo img {
    object-position: center 35%;
  }
  /* 写真そのものを下へ透かして黒の地になじませる */
  .p-homeGr__photo {
    -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
  }
}

/* ロゴと言葉 */
/* ロゴを上、見出しと説明を下に積む（広告の帯の並び） */
.p-homeGr.--banner .p-homeGr__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
  color: #fff;
  min-width: 0;
}
@media screen and (max-width: 1100px) {
  .p-homeGr.--banner .p-homeGr__head {
    gap: 14px;
    margin: -8px 0 0;
  }
}

.p-homeGr__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  margin: 0;
}
.p-homeGr__brand img {
  display: block;
  height: auto;
}
.p-homeGr__brandName {
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  white-space: nowrap;
}
@media screen and (min-width: 1101px) {
  .p-homeGr__brand img { width: 88px; }
  .p-homeGr__brandName { font-size: 1.375rem; }
}
@media screen and (max-width: 1100px) {
  .p-homeGr__brand img { width: 64px; }
  .p-homeGr__brandName { font-size: 1.125rem; }
}

.p-homeGr.--banner .p-homeGr__head02 {
  display: block;
}
.p-homeGr.--banner .p-homeGr__h02 {
  margin: 0;
  letter-spacing: 0.06em;
  line-height: 1.45;
}
@media screen and (min-width: 1101px) {
  .p-homeGr.--banner .p-homeGr__h02 { font-size: 1.75rem; }
}
@media screen and (max-width: 1100px) {
  .p-homeGr.--banner .p-homeGr__h02 { font-size: 1.25rem; }
}
.p-homeGr.--banner .p-homeGr__lead {
  margin-top: 0.8em;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 26em;
}

/* ボタン（gembaroid の青のグラデーション） */
.c-btn.--gr {
  position: relative;
  flex-shrink: 0;
  color: #fff;
}
.c-btn.--gr:before {
  background: linear-gradient(45deg, #0764C7 0%, #0DC3C2 100%);
}
.c-btn.--gr .deco:before {
  font-family: "Material Symbols Outlined";
  content: "open_in_new";
  font-size: 1.125rem;
  background: none;
  width: auto;
  height: auto;
  color: #0764C7;
}
@media screen and (max-width: 1100px) {
  .c-btn.--gr {
    width: 100%;
    white-space: nowrap;
  }
}
@media screen and (max-width: 767px) {
  .c-btn.--gr {
    padding: 10px 60px 10px 24px;
    font-size: 0.9375rem;
  }
}

/* 帯にマウスを合わせたとき（帯全体がリンク） */
.p-homeGr__link:hover,
.p-homeGr__link:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(7, 100, 199, 0.28);
}
.p-homeGr__link:focus-visible {
  outline: 3px solid #0DC3C2;
  outline-offset: 3px;
}
.p-homeGr__link:hover .p-homeGr__photo img {
  transform: scale(1.05);
}
.p-homeGr__link:hover .c-btn.--gr {
  background: #054A94;
}
.p-homeGr__link:hover .c-btn.--gr:before {
  transform: translateX(50%) translateY(-50%) scale(0);
}
.p-homeGr__link:hover .c-btn.--gr .deco {
  background: transparent;
}
.p-homeGr__link:hover .c-btn.--gr .deco:before {
  transform: scale(0);
}
.p-homeGr__link:hover .c-btn.--gr .deco:after {
  transition-delay: 0.4s;
  opacity: 1;
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .p-homeGr__link,
  .p-homeGr__photo img {
    transition: none;
  }
  .p-homeGr__link:hover {
    transform: none;
  }
}