/* On The Way — HEROセクション */

/* HERO全体: ノートPC画面いっぱいに表示
   ヘッダー高さ約100px（本番）を差し引く。
   開発環境のWP管理バー（32px）がある場合でも収まるよう余裕を持たせる */
.main-visual {
  min-height: calc(100vh - 120px);
  overflow: visible;
}

.header-eyecatch {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 本番環境（管理バーなし）ではヘッダー分のみ差し引く */
body:not(.admin-bar) .main-visual {
  min-height: calc(100vh - 60px);
}

body:not(.admin-bar) .header-eyecatch {
  min-height: calc(100vh - 60px);
}

/* 背景画像を全幅に拡張 */
.main-visual__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 背景画像のぼかし + 全幅カバー */
.main-visual__background-img {
  filter: blur(3px);
  transform: scale(1.06);
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 30%;
}

/* テキストコンテンツを前面に */
.main-visual-inner__content {
  position: relative;
  z-index: 2;
}

/* メインコピー「実装支援。」— 72px Noto Serif JP */
.main-visual__title {
  font-family: var(--ow-font-serif);
  font-size: 72px;
  font-weight: 500;
  letter-spacing: 5px;
  color: #FFFFFF;
}

/* サブタイトル（リード文: "やりたい"を"できている"に変える） */
.main-visual__sub-title {
  font-family: var(--ow-font-sans);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 2px;
  color: #C5D4C0;
}

/* メッセージ（リード文） */
.main-visual__message {
  font-size: 15px;
  line-height: 2.0;
  color: #C5D4C0;
}

/* CTAボタン1: サービスを見る（バーントオレンジ塗り） */
.main-visual__btn-left .c-btn {
  background: var(--ow-accent);
  border-color: var(--ow-accent);
  color: var(--ow-white);
  border-radius: var(--ow-radius-sm);
}

.main-visual__btn-left .c-btn:hover {
  opacity: 0.85;
}

/* CTAボタン2: お問い合わせ（アウトライン） */
.main-visual__btn-right .c-btn {
  border-radius: var(--ow-radius-sm);
}

/* ============================================
   スクロール目印 — HERO下部のバウンスアニメーション
   ============================================ */
.main-visual {
  position: relative;
}

.ow-scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: ow-bounce 2s ease-in-out infinite;
}

.ow-scroll-indicator__text {
  font-family: var(--ow-font-sans);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.ow-scroll-indicator__arrow {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.4);
  position: relative;
}

.ow-scroll-indicator__arrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

@keyframes ow-bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(10px);
    opacity: 0.5;
  }
}

/* SP */
@media (max-width: 767px) {
  .main-visual {
    min-height: calc(100svh - 60px);
    overflow: visible;
  }

  .header-eyecatch {
    min-height: calc(100svh - 60px);
  }

  .main-visual__title {
    font-size: 40px;
    letter-spacing: 3px;
  }

  .ow-scroll-indicator {
    bottom: 24px;
  }
}