@charset "UTF-8";

/* =======================================
	アニメーション調整　mv home01まで含む
========================================== */
/* =========================
   Hero Motion（改修版：キャッチコピーもスクロール、画像切り替えは一方向のみ）

   動作の流れ：
   1. イントロ演出（赤カーテン、ロゴ、ぼかし拭き取り）
   2. ヘッダーがフェードイン
   3. スクロールすると：
      - 背景（MV）は固定されたまま
      - キャッチコピーとコンテンツが自然にスクロールして上へ流れる
      - home01のh2Titが画面中央に到達すると背景が切り替わる（戻らない）
   4. ニュースティッカーは画面下部に固定、home01の最後で一緒にスクロール
========================= */
:root {
  --red: #c92b22;
  --logoSizeMax: 600px;
  /* イントロ演出のタイミング */
  --t-logo-in: .6s;
  --t-gap: 1.5s;
  --t-switch: 1.2s;
  --t-blur-hold: .8s;
  --t-wipe: 1.4s;
  --t-wipe-red: .9s;
  /* ヘッダー・キャッチコピーのフェードイン */
  --t-header-in: .6s;
  --t-copy-in: .6s;
  --t-gap-56: .25s;
  /* イントロ完了のタイミング */
  --intro-total: calc(var(--t-logo-in) + var(--t-gap) + var(--t-blur-hold) + var(--t-wipe) + .2s);
  /* 各要素の表示開始タイミング */
  --header-start: var(--intro-total);
  --copy-start: calc(var(--header-start) + var(--t-header-in) + var(--t-gap-56));
  --ticker-start: calc(var(--copy-start) + var(--t-copy-in) + .3s);
}

/* ===== ヒーローセクション：スクロール時に固定される背景 ===== */
.hero {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  z-index: 0;
  /* 最背面レイヤー：すべてのコンテンツがこの上を流れる */
}

/* ヒーロービューポート：MV表示の実体 */
.hero-viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 背景露出防止レイヤー：イントロ演出完了まで一時的に表示 */
.mv-base {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: inherit;
  animation: baseHide 0.001s linear var(--intro-total) forwards;
}

@keyframes baseHide {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ===== MV背景画像：2枚を重ねて切り替え可能に ===== */
.hero .mv {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero .mv-slide {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  /* 滑らかなクロスフェード */
}

/* 最初の画像（mv.jpg）を即座に表示 */
.hero .mv-slide:first-child {
  opacity: 1;
}

.hero .mv-slide.active {
  opacity: 1;
}

/* ===== ① 赤カーテン：右→左拭き取り演出 ===== */
.intro-red {
  position: absolute;
  inset: 0;
  /* background: var(--red); */
  background: rgba(201, 43, 34, 0.8);
  filter: blur(20px);
  z-index: 2;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
  animation: redWipeRTL var(--t-wipe-red) cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--t-logo-in) + var(--t-gap)) forwards;
}

@keyframes redWipeRTL {
  0% {
    clip-path: inset(0 0 0 0);
  }

  90% {
    clip-path: inset(0 0 0 95%);
  }

  100% {
    clip-path: inset(0 0 0 100%);
  }
}

/* ===== ② ロゴ：表示→退場アニメーション ===== */
.hero-logo {
  position: absolute;
  /* insetの代わりに明示的な位置指定に変更 */
  top: 50%;
  left: 50%;
  /* transformで中央配置（margin: autoより安定） */
  transform: translate(-50%, -50%);
  width: min(60vw, var(--logoSizeMax));
  height: auto;
  display: block;
  z-index: 3;
  opacity: 0;

  /* Safariのレンダリングを安定させるプロパティを追加 */
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;

  /* アニメーションを統合して単一の流れに */
  animation: logoSequence calc(var(--t-logo-in) + var(--t-gap) + var(--t-switch)) ease-out 0.2s forwards;
}

/* 2つのアニメーションを1つに統合 */
@keyframes logoSequence {

  /* フェードイン＋上移動（最初の0.4秒） */
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  /* logoPopの完了時点（0.4秒 / 全体2.1秒 = 約19%） */
  19% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 20px));
  }

  /* 待機期間（0.9秒間静止、19%から61%まで） */
  61% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 20px));
  }

  /* フェードアウト完了 */
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 20px));
  }
}

/* ===== ④ ぼかし層：表示→右→左拭き取り ===== */
.hero::after {
  content: "";
  position: absolute;
  inset: -28px;
  /* 端のぼかし切れを防ぐため外側に拡張 */
  background: inherit;
  filter: blur(18px);
  opacity: 0;
  z-index: 1;
  clip-path: inset(0 0 0 0);
  animation: blurIn 0s linear forwards, cleanWipeRTL var(--t-wipe) cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--t-logo-in) + var(--t-gap)), calc(var(--t-logo-in) + var(--t-gap) + var(--t-blur-hold));
}

@keyframes blurIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes cleanWipeRTL {
  0% {
    clip-path: inset(0 0 0 0);
  }

  90% {
    clip-path: inset(0 0 0 95%);
  }

  100% {
    clip-path: inset(0 0 0 100%);
  }
}

/* ===== ⑤ ヘッダー表示 ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* デフォルト：下層ページでは即座に表示（アニメーションなし） */
  opacity: 1;
  transform: translateY(0);
  will-change: opacity, transform;
}

/* トップページのみ：イントロ演出後にフェードイン */
.home .site-header {
  opacity: 0;
  transform: translateY(-8px);
  animation: headerIn var(--t-header-in) ease-out var(--header-start) forwards;
}

/* 下層ページでアニメーションを完全に無効化（念のため明示的に指定） */
.page .site-header {
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important;
}

@keyframes headerIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== ⑥ キャッチコピー：スクロール可能にするためヒーローの外に配置 ===== */
/* 重要：ヒーローの外側に配置することで、スクロール時に自然に流れる */
.hero-copy-section {
  position: relative;
  z-index: 1;
  /* ヒーロー（z-index: 0）より上のレイヤー */
  margin-top: -54vh;
  /* ヒーローの中央付近に視覚的に重ねる（ネガティブマージン） */
  pointer-events: none;
  /* 背景部分はクリック貫通 */
}

.hero-copy-section .txt {
  display: flex;
  /* gridからflexに変更して、より細かい制御を可能に */
  align-items: flex-end;
  /* 下揃えに変更：テキストを下の方に配置 */
  justify-content: flex-start;
  /* 左揃えに変更 */
  min-height: 50vh;
  padding: 20px 20px 80px 100px;
  /* 左側に余白を追加、下側にも余白を追加 */
}

.hero-copy-section .catch_copy {
  opacity: 0;
  transform: translateY(8px);
  font-size: clamp(32px, 5vw, 64px);
  /* フォントサイズを少し大きく調整 */
  line-height: 1.3;
  /* 行間を少し広げる */
  text-align: left;
  /* 中央揃えから左揃えに変更 */
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  animation: copyIn var(--t-copy-in) ease-out var(--copy-start) forwards;
  will-change: opacity, transform;
  pointer-events: auto;
  max-width: 800px;
  /* 最大幅を設定して、テキストが横に広がりすぎないように */
}

.hero-copy-section .catch_copy span {
  display: block;
  /* spanを改行させる */
  font-size: 0.4em;
  /* 日本語部分を小さく（英語の半分程度） */
  margin-top: 0.4em;
  /* 英語部分との間に少し余白 */
  font-weight: normal;
  /* 日本語部分は通常のウェイトに */
}

@keyframes copyIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== home01ラッパー：ニュースバーとhome01をまとめる親要素 ===== */
/* このラッパーがニュースティッカーのstickyの範囲を決定する */
.home01-wrapper {
  position: relative;
  z-index: 2;
  /* キャッチコピー(z-index:1)より上 */
  min-height: 100vh;
  /* 最低でも画面1枚分の高さを確保 */
}

/* ===== ニュースティッカー：画面下部に固定、home01エリアで非表示 ===== */
/* position: fixedで画面下部に完全固定 */
/* home01が表示されるタイミングで、ふわっとフェードアウトして下に消える */
.news-ticker {
  position: fixed;
  bottom: 0;
  /* 画面の下端に完全固定 */
  left: 0;
  width: 100%;
  height: 2.5em;
  /* 可読性を考慮した高さ（約40px） */
  background: #232220;
  z-index: 100;
  /* ヒーローやコンテンツより圧倒的に上に表示 */
  overflow: hidden;
  /* はみ出すテキストを隠す */
  opacity: 0;
  /* 最初は非表示 */
  animation: newsTickerIn 0.5s ease-out var(--ticker-start) forwards;
  /* キャッチコピーと同じタイミングで表示 */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  /* フェードアウトとスライドアウトの滑らかなアニメーション */
}

/* home01エリアに入った時に付与されるクラス */
.news-ticker.hidden {
  opacity: 0;
  /* 透明にする */
  transform: translateY(100%);
  /* 下にスライドさせる */
  pointer-events: none;
  /* クリック不可にする */
}

@keyframes newsTickerIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ニュースのラッパー：アニメーションで右から左へ移動 */
.news-ticker-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  /* テキストを一行に保つ */
  animation: tickerScroll 60s linear infinite;
  /* 60秒で1周（JavaScriptで複製されるため長めに設定） */
  will-change: transform;
}

/* 右から左へスクロールするアニメーション */
@keyframes tickerScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
    /* 半分の位置まで移動（複製された内容が切り替わる） */
  }
}


/* ニュース項目のスタイル */
.news-item {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  /* 各要素間の余白 */
  padding-right: 3em;
  /* 次の項目との間隔 */
  color: #fff;
  font-size: 1.4rem;
  flex-shrink: 0;
  /* 項目が縮まないようにする */
}

/* ホバー時のスタイル */
.news-item {
  text-decoration: none;
  transition: color 0.3s ease;
}

.news-item:hover {
  color: #E60013;
}

.news-item:hover .news-date {
  color: #E60013;
}

.news-item:hover .news-category {
  color: #E60013;
  border-color: #E60013;
}

.news-item:hover .news-title {
  color: #E60013;
}

/* 日付のスタイル */
.news-date {
  color: #fff;
  letter-spacing: 0.05em;
}

/* カテゴリのスタイル */
.news-category {
  display: inline-block;
  padding: 0.4em 0.6em;
  border: 1px solid #fff;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* タイトルのスタイル */
.news-title {
  color: #fff;
  font-weight: 500;
}

/* ホバー時：アニメーションを一時停止（ユーザーが読みやすくするため） */
.news-ticker:hover .news-ticker-wrapper {
  animation-play-state: paused;
}

/* ===== モーション低減設定への対応 ===== */
@media (prefers-reduced-motion: reduce) {
  .hero {
    position: relative;
    /* stickyを解除 */
  }

  .hero .mv-slide {
    transition: none;
    /* アニメーションを無効化 */
  }

  .hero .mv-slide.active {
    opacity: 1;
  }

  .hero .mv-slide:not(.active) {
    opacity: 0;
  }

  .mv-base {
    animation: none;
    opacity: 0;
    visibility: hidden;
  }

  .hero-logo {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero::after {
    animation: none;
    opacity: 0;
    clip-path: none;
  }

  .intro-red {
    animation: none;
    opacity: 0;
    clip-path: none;
  }

  .site-header {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero-copy-section .catch_copy {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero-copy-section {
    margin-top: 0;
  }

  /* ニュースティッカーのアニメーションも停止 */
  .news-ticker {
    animation: none;
    opacity: 1;
  }

  .news-ticker-wrapper {
    animation: none;
    /* スクロールを停止して静止表示 */
  }
}

/* ===== ★★★★★開発用：イントロモーションを一時的にスキップ ===== */
/* .intro-red,
.hero-logo,
.hero::after,
.mv-base {
  display: none !important;
}

.site-header,
.hero-copy-section .catch_copy {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
} */

/* ===== 開発用：イントロモーションを一時的にスキップ ===== */
/* =======================================
	スタイル調整　mv home01まで含む
========================================== */
.site-header {
  background: rgba(26, 26, 26, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.headerArea {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: calc(100% - 100px);
  margin: 0 auto;
}

h1.logo a {
  display: inline-block;
  width: 20em;
}

.header02 {
  display: block;
}

.header02 .nav01>ul {
  width: 100%;
}

.header02 .nav01 .h_tel a,
.header02 .nav01 .h_contact a,
.header02 .nav01 .h_recruit a,
.global-nav .h_recruit a,
.global-nav .h_contact a,
.global-nav .h_tel a {
  display: inline-block;
  width: 100%;
  color: #FFFDFC;
}

.header02 .nav01 .h_tel,
.global-nav .h_tel a {
  line-height: 1;
}

.header02 .nav01 .h_recruit a,
.global-nav .h_recruit a {
  background: #E60013 url(../img/recruit.svg) no-repeat left 1.8em center/1em;
  padding: 0.8em 2em 0.8em 3em;
  text-align: center;
}

.header02 .nav01 .h_contact a,
.global-nav .h_contact a {
  padding: 0.8em 2em 0.8em 3em;
  background: #ffffff url(../img/contact.svg) no-repeat left 1.8em center/1em;
  color: #232220;
}

.header_nav .nav {
  display: flex;
}

.header_nav .nav li a {
  color: #fff;
  padding: 10px 0 13px 30px;
  display: inline-block;
}

.nav_u01 {
  position: relative;
}

.no-pointer {
  pointer-events: none;
}

.nav_u01 .nav_u01-box {
  background-color: #232220;
  position: absolute;
  width: 16em;
  z-index: 9999;
  top: 100%;
  left: -11px;
  color: #FFFDFC;
  padding: 10px 6px;
  text-align: left;
  border-radius: 5px;
}

.nav_u01 .nav_u01-box a {
  color: #FFFDFC;
  display: inline-block;
  background: url(../img/arrow.svg) no-repeat top 12px left 7px/1.2em !important;
  padding-left: 1.5em;
  font-size: 1.4rem;
  padding: 4px 0 10px 30px !important;
}