/* =========================
   HERO 統合CSS（順番＆背景マスク対応）
   - 回路背景(main_background.png)：赤帯より下に表示しない（上側だけ）
   - アニメ順：背景→赤帯→地球儀→キャラ→文字(社会を)→つなぐ→技術→サブ
========================= */

:root {
  --inner-max: 1100px;

  /* ヒーロー高さ（px固定を避ける） */
  --hero-min: 560px;
  --hero-vh: 98vh;
  --hero-max: 860px;

  /* 赤帯 */
  --band-top: 63%;
  --band-h: 32%;
  --band-skew: 0;
  --band-red: #E70012;

  /* ===== 回路背景を「赤帯の下に出さない」ためのクリップ線 =====
     ここが“上の白エリアの下端(斜めライン)”です。
     数字をいじると回路背景の見える範囲が上下します。
     左端の線（%）/ 右端の線（%）
  */
  --circuit-cut-left: 74%;
  --circuit-cut-right: 48%;

  /* 地球儀（あなたの指定） */
  --globe-z: 3;
  --chara-z: 2;
  --globe-w: 100%;
  --globe-left: -50%;
  --globe-top: -9%;

  /* ===== アニメタイミング（気持ちいいリズム） ===== */
  --t-band-delay: 0ms;
  --t-band-dur: 850ms;

  --t-globe-delay: 650ms;
  /* 赤帯が出始めて少しして */
  --t-chara-delay: 780ms;

  --t-text1-delay: 920ms;
  /* 社会を */
  --t-text2-delay: 1040ms;
  /* つなぐ */
  --t-text3-delay: 1160ms;
  /* 技術 */
  --t-text4-delay: 1320ms;
  /* サブ */
  --t-text-dur: 560ms;

  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* =========================
   HERO 基本
========================= */
.hero {
  position: relative;

  height: 761px;

  background: #fff;
  /* ベースは白 */
}

/* =========================
   回路背景：上側だけ表示（赤帯より下に出さない）
   → 疑似要素を clip-path で斜めに切る
========================= */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background: url("img/main_background.png") center top / cover no-repeat;

  /* 上は全部、下は斜めで切る（赤帯より下を見せない） */
  /* clip-path: polygon(0% 0%,
      100% 0%,
      100% var(--circuit-cut-right),
      0% var(--circuit-cut-left)); */
}

.hero .asstes__circle {
  display: block;
  background: var(--color_marutus-red);
  width: 26px;
  aspect-ratio: 1 / 1;
  height: auto;
  filter: blur(6.150000095367432px);
  border-radius: 50%;
  position: absolute;
  bottom: -13px;
  left: calc(50% - (49px / 2));
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.hero .vertical-text {
  writing-mode: sideways-rl;
  /* 右から左への縦書き */
  /* writing-mode: vertical-lr; 左から右への縦書きならこちら */
  text-orientation: upright;
  /* 英数字も横に倒さず立たせる場合 */
  position: absolute;
  left: 49.5%;
  transform: translate(-50%, 0);
  bottom: -7%;
  color: #E70012;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.32px;
  animation: floatY 2s ease-in-out infinite;
}

/* 上下にふわっと動くアニメーション */
@keyframes floatY {
  0% {
    transform: translateY(0) translateX(-50%);
  }

  50% {
    transform: translateY(-6px) translateX(-50%);
    /* 上に6px */
  }

  100% {
    transform: translateY(0) translateX(-50%);
  }
}

/* =========================
   フル幅背景（赤帯マスク）
========================= */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 赤帯（フル幅） */
.hero__band {
  position: absolute;
  left: 0%;
  right: 0%;
  bottom: 0;
  height: var(--band-h);
  transform: skewY(var(--band-skew)) translateX(-110%);
  transform-origin: left center;
  overflow: hidden;
  will-change: transform;
}

/* 帯の中だけ写真が見える（マスク） */
.hero__bandPhoto {
  position: absolute;
  inset: -20% 0;
  background: url("img/redbackground.png") center/cover no-repeat;

  /* 親の傾きを戻して写真は水平に */
  transform: skewY(calc(var(--band-skew) * -1)) scale(1.15);
  transform-origin: center;
  filter: saturate(0.95) contrast(1.05);
}

/* 赤フィルター */
.hero__bandTint {
  position: absolute;
  inset: 0;
  background: var(--band-red);
}

/* 赤帯アニメ（順番：背景の次） */
.hero.is-animate .hero__band {
  animation: band-in var(--t-band-dur) var(--ease) forwards;
  animation-delay: var(--t-band-delay);
}

@keyframes band-in {
  from {
    transform: skewY(var(--band-skew)) translateX(-110%);
  }

  to {
    transform: skewY(var(--band-skew)) translateX(0%);
  }
}

/* =========================
   中身（最大1100px）
========================= */
.hero__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================
   文字エリア（1100pxまでは固定サイズ）
========================= */
.hero__copy {
  position: absolute;
  left: 0;
  top: 19%;
  /* ここで上下位置調整（上げたいなら小さく） */
  z-index: 4;
  color: #1f1f1f;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  width: 100%;
}

/* 行 */
.hero__row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

/* 1行目 */
.hero__row1 .line {
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-size: 88px;
  /* 固定 */
}

.hero__tsunagu {
  transform: translateY(-8px);
  font-size: 102px;
  /* 固定 */
}

/* 2行目 */
.hero__row2 {
  margin-top: 12px;
}

.hero__row2 .line {
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-size: 92px;
  /* 固定 */
}

/* サブ */
.hero__sub {
  margin: 3% 0 0;
  font-weight: 700;
  font-size: 20px;
  /* 固定 */
  letter-spacing: 0.02em;
  line-height: 1.7;
  white-space: normal;
}

.hero ruby rt {
  font-size: 0.6em;
}

/* =========================
   右：キャラ＋地球儀
========================= */
.hero__illust {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 620px;
  /* 必要なら調整 */
  height: 100%;
  z-index: 5;
  pointer-events: none;
  isolation: isolate;
  /* z-index安定 */
}

/* ※「赤帯より下は消す」(キャラが赤帯から出て下は消える) を入れている場合はここに残してください
.hero__illust{
  clip-path: polygon(0% 0%,100% 0%,100% 52%,0% 78%);
}
*/

.hero__illust img {
  position: absolute;
  max-width: none;
  height: auto;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  will-change: opacity, transform;
}

/* キャラ（後ろ） */
.hero__chara {
  position: absolute;

  /* ===== サイズ・位置はここで直接調整 ===== */
  width: 137%;
  right: -14%;
  top: 4.5%;

  z-index: 2;
  /* 地球儀より後ろ */
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .18));

  opacity: 0;
  transform: translateY(14px) scale(0.985);
  will-change: opacity, transform;
}

/* 地球儀（前）：あなたの指定 */
.hero__globe {
  position: absolute;
  width: 190%;
  left: -113%;
  top: 17%;
  z-index: 3;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .12));
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  will-change: opacity, transform;
}

/* =========================
   アニメ：地球儀→キャラ
========================= */
.hero.is-animate .hero__globe {
  animation: illust-fade 720ms var(--ease) forwards;
  animation-delay: var(--t-globe-delay);
}

.hero.is-animate .hero__chara {
  animation: illust-fade 760ms var(--ease) forwards;
  animation-delay: var(--t-chara-delay);
}

@keyframes illust-fade {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================
   文字アニメ：順番を“明示”する
   背景→赤帯→地球儀→キャラ→社会を→つなぐ→技術→サブ
========================= */
.line {
  display: inline-block;
}

/* reveal 自体は同じ */
.hero.is-animate .line {
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  animation: text-reveal var(--t-text-dur) var(--ease) forwards;
}

/* ここが“順番指定”の本体（delayを固定で与える） */
.hero.is-animate .hero__row1 .line:not(.hero__tsunagu) {
  animation-delay: var(--t-text1-delay);
}

/* 社会を */
.hero.is-animate .hero__tsunagu {
  animation-delay: var(--t-text2-delay);
  font-size: 120px;
}

/* つなぐ */
.hero.is-animate .hero__row2 .line {
  animation-delay: var(--t-text3-delay);
}

/* 技術 */
.hero.is-animate .hero__sub.line {
  animation-delay: var(--t-text4-delay);
}

.hero.is-animate .hero__row1 .inner__wrap {
  position: relative;
  width: 50%;
}

.hero.is-animate .hero__sub.line {
  width: 24%;
}

.hero.is-animate .hero__row1 .inner__wrap .hero__asstes {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 67%;
}

.hero.is-animate .hero__row1 .inner__wrap .hero__asstes.sp__block {
  display: none;
}

.hero .hero__sub.line.pc__block {
  display: block;
}

.hero__copy.sp__block {
  display: none;
}


@keyframes text-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

/* =========================
   Reduced Motion
========================= */
@media (prefers-reduced-motion: reduce) {
  .hero.is-animate .hero__band {
    animation: none;
    transform: skewY(var(--band-skew)) translateX(0);
  }

  .hero.is-animate .line {
    animation: none;
    clip-path: inset(0 0 0 0);
  }

  .hero__illust img {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* =========================
   SP（最低限）
========================= */
@media (max-width: 900px) {

  .hero.is-animate .hero__row1 .inner__wrap .hero__asstes.sp__block {
    display: block;
  }

  .hero.is-animate .hero__row1 .inner__wrap .hero__asstes.pc__block {
    display: none;
  }

  .hero.is-animate .hero__row1 .inner__wrap .hero__asstes {
    right: -3%;
  }

  .hero .asstes__circle {
    left: calc(50% - 9px);
  }

  .hero .vertical-text {
    left: 53%;
    bottom: -6%;
  }

  .hero__inner {
    padding: 0 16px;
  }

  .hero {
    min-height: initial;
    max-height: initial;
    height: 162vw;
  }

  .hero__copy {
    width: 100%;
    top: 15%;
  }

  .hero.is-animate .hero__row1 .inner__wrap {
    width: 95%;
    margin: auto;
  }

  .hero.is-animate .hero__sub.line.pc__block {
    display: none;
  }

  .hero__copy.sp__block {
    display: block;
    top: 44%;
    z-index: 6;
  }

  .hero.is-animate .hero__sub.line {
    width: 50%;
    margin-left: 4%;
  }

  .hero__row1 .line {
    font-size: 54px;
  }

  .hero__tsunagu {
    font-size: 62px;
    transform: translateY(-4px);
  }

  .hero__row2 .line {
    font-size: 56px;
  }

  .hero__sub {
    font-size: 14px;
  }

  .hero__illust {
    width: 72%;
    right: -4%;
    bottom: -2px;
  }

  .hero__chara {
    width: 190%;
    right: -50%;
    top: 27.5%;
  }

  .hero__globe {
    width: 300%;
    left: -193%;
    top: 23%;
  }

  /* SPで回路背景の見える範囲を少し上げたい場合 */
  /* :root{ --circuit-cut-left: 70%; --circuit-cut-right: 44%; } */
}

@media (max-width: 500px) {
  .hero .asstes__circle {
    left: calc(50% - 7px);
  }
}