/* =========================================
   HERO（上:白 / 下:青 の二色背景）
   ・写真が下の青に少し被る（translateY）
   ・コピーを右上で軽く斜めに
   ・青帯は ::after で下へ延長し、次セクションと一体化
========================================= */
.rb-hero-split { --rb-primary: #009BF0; }
.rb-hero-split{
  /* 90%まで白、以降は青（被り量は%で微調整） */
  background: linear-gradient(
    to bottom,
    #fff 0%, #fff 90%,          /* 上 0〜90% は白 */
    var(--rb-primary, #009BF0) 90%, var(--rb-primary, #009BF0) 100%  /* 残りは青 */
  );
  position: relative;
  z-index: 0;
  overflow: visible; /* 下へはみ出し可 */
}

/* 青帯をさらに下へ延長して次セクションと一体化 */
.rb-hero-split::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 530px;
  background: linear-gradient(180deg, var(--rb-primary, #009BF0) 0%, #1a4dbd 100%);
  z-index: 0;
  pointer-events: none;
}

/* 写真フレーム */
.rb-hero-photo{
  position: relative;
  overflow: hidden;
  /* aspect-ratio: 16/7; */
  /* transform: translateY(22px); */ /* 必要なら有効化 */
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  z-index: 1; /* 延長青帯(::after)より前面 */
}
.rb-hero-photo > img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 右上 斜めコピー（画像） */
.rb-hero-copy{
  position: absolute;
  top: 70px;
  width: 75%;
  transform-origin: 0% 0;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.rb-eyebrow{
  color:#fff; letter-spacing:.12em; font-size:.9rem; opacity:.95;
}
.rb-hero-heading{
  color:#fff; font-weight: 900;
  font-size: clamp(1.6rem, 2.8vw + 1rem, 3rem);
  line-height: 1.18; letter-spacing:.02em;
}
.rb-hero-en{
  color:#fff; opacity:.95; letter-spacing:.06em;
  font-size: clamp(.9rem, .6vw + .65rem, 1.1rem);
}

/* ===========================
   縦書きスクロールインジケータ
=========================== */
:root{
  --indicator-offset: 160px; /* 下端からのオフセットで縦位置を調整 */
  --line-bleed: 36px;        /* 黒線の下はみ出し量 */
}

.rb-scroll-indicator{
  right: -20px;  /* コンテナ右から少し外へ */
  top: 50%; /* Hero下端を基準に上へ配置 */
  z-index: 2;    /* 写真より手前に */
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.15));
}

.rb-scroll-text{
  writing-mode: vertical-rl;
  letter-spacing: .35em;
  font-size: .7rem;
  font-weight: 700;
  color: #273142;
  user-select: none;
}

/* 縦の棒（細いライン＋下にはみ出し） */
.rb-scroll-line{
  position: relative;               /* ::after の基準 */
  width: 2px;
  height: clamp(140px, 55vh, 210px);
  background: #111;
  opacity: .9;
  border-radius: 1px;
}
.rb-scroll-line::after{
  content:"";
  position:absolute;
  left:0;
  bottom: calc(-1 * var(--line-bleed)); /* 親の下端より下へ延長 */
  width:2px;
  height: var(--line-bleed);
  background:#111;
  border-radius: 1px;
}

/* 余白の微調整（狭い画面では内側へ） */
@media (max-width: 1200px){
  .rb-scroll-indicator{/* right: 8px; */}
}

/* =========================================
   HERO直下の紹介ブロック（青帯の“上”に載せる）
========================================= */
.rb-hero-intro{
  position: relative;
  margin-top: 0;            /* ヒーローと連続表示 */
  background: transparent;  /* ← 透明化して一体化 */
  color: #fff;
  z-index: 1;               /* 背後の ::after の上に載せる */
}
.rb-hero-intro h2,
.rb-hero-intro p{ color:#fff; }

.rb-hero-intro img{
  object-fit: cover; height: 260px;
  width: 100%;
  /* border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.18); */
}

/* Responsive（Hero専用） */
@media (max-width: 1199.98px){
  .rb-hero-photo{ max-width: 1040px; }
}
@media (max-width: 991.98px){
  .rb-hero-split{
    /* background: linear-gradient(to bottom, #fff 0 60%, var(--rb-primary, #009BF0) 60% 100%); */
    background: none;
    padding-bottom: clamp(32px, 5vw, 56px);
  }
  .rb-hero-photo{ aspect-ratio: 16/9; transform: translateY(18px); }
  .rb-hero-intro img{ height: 220px; }
}
@media (max-width: 767.98px){
  .rb-hero-split{
    /* background: linear-gradient(to bottom, #fff 0 64%, var(--rb-primary, #009BF0) 64% 100%); */
    padding-bottom: 40px;
  }
  /* .rb-hero-photo{ aspect-ratio: 16/10; transform: translateY(14px); } */
  /* .rb-hero-copy{ right: 16px; top: 16px; } */
  .rb-hero-heading{ font-size: clamp(1.4rem, 5.2vw + .6rem, 2rem); }
  .rb-hero-intro img{ height: 180px; background:linear-gradient(180deg, #009BF0 -8%, #1a4dbd 50%)}
  .rb-scroll-indicator{ display: none !important; } /* SPでは非表示 */
}