@charset "UTF-8";

/* ==========================================
   1. ベース・リセット設定
   ========================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ★ 修正: 縦スクロールバーを常に許可し、横スクロールのみを防止 ★ */
html {
  overflow-y: auto !important;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
}

/* ヘッダーの浮きを解除 */
header,
.c-header,
.l-header {
  position: relative !important;
  top: auto !important;
}

/* ------------------------------------------
   FV（ファーストビュー）全体制御
   ------------------------------------------ */

.fv-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.p-fv-section, .fv-section {
  position: relative;
  width: 100% !important;
  /* ★ 修正: 14px の隙間を消して0にする ★ */
  /* ★ ヘッダーの高さ分だけ下に押し下げる（※80pxはヘッダーの実際の高さに合わせて微調整してください） ★ */
  margin-top: 90px !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  z-index: 1;
  height: calc(100vh - 80px);
  max-height: none !important;
}

/* メインコンテナ */
.main-container,
.fv-main-container,
.fv-section main.main-container {
  display: block !important;
  width: 100% !important;
  max-width: 2600px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important; 
  max-height: none !important;
}

.p-top .l-main,
.l-main {
  padding-top: 0 !important;
}


/* ==========================================
   2. 演出①：ローディング画面
   ========================================== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  /* ★ 修正: 100vw を 100% にしてスクロールバー消失バグを防止 ★ */
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, #1899dd 0%, #1664b8 100%);
  z-index: 2147483647 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loading-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 0 20px;
}

.logo-wrapper img {
  width: 477px;
  max-width: 80vw;
  height: auto;
  display: block;
}

.line-progress-bar {
  width: 320px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.line-progress-fill {
  width: 0%;
  height: 100%;
  background: #ffffff;
  transition: width 2s cubic-bezier(0.22, 1, 0.36, 1);
}

html.skip-top-loading .loading-overlay {
  display: none !important;
}

html:not(.is-ready) #catchphraseOverlay,
html:not(.is-ready) .grid-slide-wrapper,
html:not(.is-ready) .sp-slide-track,
html:not(.is-ready) .slide-item {
  visibility: hidden !important;
  opacity: 0 !important;
}


/* ==========================================
   3. キャッチコピー（基本スタイル）
   ========================================== */
.catchphrase-overlay,
.fv-section .catchphrase-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 20 !important;
  pointer-events: none !important;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.catchphrase-overlay.is-show,
.fv-section .catchphrase-overlay.is-show {
  opacity: 1 !important;
  transform: translateY(0) !important;
  position: absolute;
}

.catchphrase-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.cp-stack {
  position: relative;
  display: inline-block;
}

.cp-stack .cp-under {
  display: block;
  width: 100%;
  height: auto;
}

.cp-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
}

/* ==========================================
   4. PC表示用スタイル（769px以上）
   ========================================== */
@media screen and (min-width: 769px) {
  .sp-only {
    display: none !important;
  }

  .fv-container {
    height: calc(100vh - 130px) !important;
    position: relative;
    margin-bottom: 50px !important;
  }

  .fv-container .grid-slide-wrapper.pc-only,
  .fv-section .grid-slide-wrapper.pc-only {
    display: grid !important;
    grid-template-columns: 1124fr 793fr !important;
    gap: 4px !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; 
  }

  .grid-slide-wrapper.pc-only .slide-item {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
  }

  .grid-slide-wrapper.pc-only .slide-item.is-active {
    opacity: 1;
    transform: translateX(0);
  }

  .grid-slide-wrapper.pc-only .slide-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .catchphrase-overlay {
    left: 0 !important;
    display: grid !important;
    grid-template-columns: 1124fr 793fr !important;
    gap: 8px !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
  }

  .catchphrase-left {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    gap: clamp(10px, 0.9vw, 14px) !important;
    padding: 0 !important;
    transform-origin: left bottom !important;
    transform: translate(-5vw, 40px) scale(1.2) !important;
    right: 70px;
  }

  .catchphrase-right {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    position: relative !important;
  }

  .cp-recruit-wrap {
    width: clamp(320px, 54vw, 1150px) !important;
    transform: none !important;
    margin-right: 50px;
    margin-bottom: -10px;
  }

  .cp-recruit-wrap img.cp-recruit {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .cp-top {
    width: clamp(280px, 33.8vw, 880px);
    position: relative;
    left: 1vw;
  }
  .cp-top .cp-under { transform: scaleX(1.04); transform-origin: left center; }
  .cp-top .cp-text { right: 5%; width: 70%; }

  .cp-bottom {
    width: clamp(280px, 33.8vw, 880px);
    position: relative;
    left: -0.7vw;
  }
  .cp-bottom .cp-under { transform: scaleX(1.0); transform-origin: left center; }
  .cp-bottom .cp-text { right: 8%; width: 60%; }
}

/* ==========================================
   中間サイズ用補正（769px〜1024px）
   ========================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .catchphrase-left {
    transform: translate(-2vw, 20px) scale(1.0) !important;
  }

  .cp-top,
  .cp-bottom {
    width: clamp(320px, 42vw, 450px) !important;
  }

  .cp-top .cp-text,
  .cp-bottom .cp-text {
    left: auto;
    right: 30px;
    width: auto !important;
    white-space: nowrap !important;
    height: 30px;
  }
}

/* ==========================================
   5. スマホ表示用スタイル（768px以下）
   ========================================== */
@media screen and (max-width: 768px) {
  .pc-only,
  .grid-slide-wrapper.pc-only,
  .fv-container .grid-slide-wrapper.pc-only,
  .fv-section .grid-slide-wrapper.pc-only,
  .catchphrase-right {
    display: none !important;
  }

  .fv-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vw !important;
    padding: 0 !important;
  }

  .p-fv-section, 
  .fv-section {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  .main-container,
  .fv-main-container,
  .fv-section main.main-container {
    display: block !important;
    width: 100% !important;
    max-width: 2600px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    height: auto !important;
    position: relative !important;
    overflow: visible !important; 
  }

  .catchphrase-wrapper.catchphrase-left {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    transform: translate(0px, 10px) !important;
  }

  .catchphrase-overlay,
  .fv-section .catchphrase-overlay {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    z-index: 10 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .cp-top {
    width: clamp(260px, 88vw, 420px) !important;
    position: relative !important;
    left: 0 !important;
  }
  .cp-top .cp-under {
    transform: translateX(-2px) scaleX(0.90) !important;
    transform-origin: left center !important;
  }
  .cp-top .cp-text {
    width: 70%;
    right: auto;
    left: 35px;
  }

  .cp-bottom {
    width: clamp(240px, 80vw, 380px) !important;
    position: relative !important;
    left: -2vw !important;
  }
  .cp-bottom .cp-under {
    transform: scaleX(0.8) !important;
    transform-origin: left center !important;
  }
  .cp-bottom .cp-text {
    width: 60%;
    right: 100px;
    left: auto;
  }

  .sp-slide-track.sp-only {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: auto !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    will-change: transform;
  }

  .sp-slide-item {
    width: 100% !important;
    min-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    scroll-snap-align: center !important;
  }

  .sp-slide-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}