@charset "UTF-8";
/* ==========================================================================
   トップページ固有スタイル
   ========================================================================== */
/* ----------------------------------------------------------
   main : 横スクロール防止・スライダーの基点
   ---------------------------------------------------------- */

.p-hero-slider__track {
  _animation-play-state: paused !important;
}

.p-section__btn-or{
		margin: 0px auto 0;
	}

body {
  overflow-x: hidden; /* 横スクロール防止 */
}
main {
  position: relative;
}
section {
  padding-bottom: 80px;
}

@media (max-width: 767px) {
section {
  _padding-bottom: 0px;
}	
	
}

/* ----------------------------------------------------------
   l-hero : ヒーローセクション
   ---------------------------------------------------------- */
.l-hero {
  position: relative;
  width: 100%;
  height: 670px;
  overflow: hidden;
  background-color: var(--color-breadcrumb-bg);
}
.l-hero__bg {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 110%;
  background-image: url(../images/pc_main_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  will-change: transform;
  filter: brightness(1000%) opacity(0);
}
/* ローディング完了後に表示（JS側で .loaded クラス付与） */
.l-hero__bg.loaded {
  filter: brightness(100%);
}
.l-hero::after {
  content: "";
  position: absolute;
  bottom: -746px;
  left: 50%;
  transform: translateX(-50%);
  width: 160rem;
  height: 51.7rem;
  background-image: url(../images/home_fv_mask.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  pointer-events: none;
  /* z-indexはスライダーがl-heroの外になったので不要 */
}
/* ----------------------------------------------------------
   p-hero-slider : サムネイルスライダー
   ---------------------------------------------------------- */
.p-hero-slider {
  position: absolute;
  /* mainを基点にl-heroと同じ位置から配置（l-heroのheaderOffsetと同じ） */
  top: 120px; /* ヘッダーから120px余白 */
  left: 0;
  width: 100%;
  height: 670px; /* l-heroと同じ高さ */
  pointer-events: none;
  overflow: hidden; /* 横スクロール防止 */
  z-index: 15; /* l-hero::after(曲線)より後ろ */
  display: none; /* ローディング中は非表示・JS側で表示に切り替え */
}
/* トラック共通 */
.p-hero-slider__track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  animation: p-hero-slide linear infinite;
  will-change: transform;
}
/* リスト（1セット分：元サイトの2倍値 3540px） */
.p-hero-slider__list {
  position: relative;
  display: block;
  width: 3540px;
  flex-shrink: 0;
  height: 100%;
}
.p-hero-slider__item {
  position: absolute;
}
.p-hero-slider__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
/*
 * レイヤー重なり順はHTML記述順で制御（後に書いたものが上）
 * l3(奥) → l2 → l1(手前) の順でHTML上に記述済み
 * z-indexは親 .p-hero-slider の z-index:25 のみで管理
 */
/* アニメーション速度（PC: 元サイトの40s/45s/70s相当） */
.p-hero-slider__track--l1 {
  animation-duration: 40s;
}
.p-hero-slider__track--l2 {
  animation-duration: 45s;
}
.p-hero-slider__track--l3 {
  animation-duration: 70s;
  _filter: blur(8px);
  overflow: visible;
}
/* スライドアニメーション（1セット分3540px + 開始オフセット160px） */
@keyframes p-hero-slide {
  0% {
    transform: translateX(calc(-3540px - 160px));
  }
  100% {
    transform: translateX(-160px);
  }
}
/* ----------------------------------------------------------
   各アイテム位置（PC：元サイトのclamp最大値 = SP値×2）
   ---------------------------------------------------------- */
/* layer01：8枚 */
.p-hero-slider__item--l1-1 {
      top: 340px;
    left: -20px;
    width: 391px;
    height: 100%;
	border-radius: 20px;
	overflow: hidden;
}
.p-hero-slider__item--l1-1 video{
	position: absolute;
	left: -14px;
    right: 0;
    top: 0px;
    margin: 0 auto;
    height: auto;
    width: 116%;
}
.p-hero-slider__item--l1-2 {
  top: 50px;
  left: 500px;
  width: 578px;
    height: 324px;
	border-radius: 20px;
	overflow: hidden;
}

.p-hero-slider__item--l1-2 video{
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	border-radius: 20px;
    height: auto;
}

.p-hero-slider__item--l1-3 {
  top: 90px;
    left: 1200px;
    width: 220px;
    overflow: hidden;
    height: 145px;
    border-radius: 15px;
}

.p-hero-slider__item--l1-3 video{
	position: absolute;
    left: -39px;
    top: 0;
    width: 120%;
    height: auto;
}

.p-hero-slider__item--l1-4 {
  top: 370px;
  left: 1300px;
  width: 420px;
	overflow: hidden;
    height: 235px;
    border-radius: 20px;
}

.p-hero-slider__item--l1-4 video{
	position: absolute;
    left: 0px;
    top: 0;
    width: 100%;
    height: auto;
}

.p-hero-slider__item--l1-5 {
  top: 50px;
  left: 1700px;
  width: 180px;
	overflow: hidden;
    height: 120px;
	border-radius: 20px;
}
.p-hero-slider__item--l1-5 video{
	position: absolute;
    left: -2px;
    top: -10px;
    width: 102%;
    height: auto;
}
.p-hero-slider__item--l1-6 {
  top: 310px;
  left: 1836px;
  width: 360px;
}
.p-hero-slider__item--l1-7 {
  top: 20px;
  left: 2300px;
  width: 600px;
	overflow: hidden;
    height: 334px;
	border-radius: 20px;
}
.p-hero-slider__item--l1-7 video{
	position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: auto;
}
.p-hero-slider__item--l1-8 {
  top: 90px;
    left: 3090px;
    width: 310px;/* 次これ */
	overflow: hidden;
    height: 189px;
	border-radius: 15px;
}

.p-hero-slider__item--l1-8 video{
	position: absolute;
    left: 0px;
    top: -2px;
    width: 110%;
    height: auto;
}

/* layer02：2枚 */
.p-hero-slider__item--l2-1 {
  top: 50px;
    left: 180px;
  width: 180px;
}
.p-hero-slider__item--l2-2 {
  top: 400px;
  left: 2340px;
  width: 240px;
}
/* layer03：4枚（ぼかし） */
.p-hero-slider__item--l3-1 {
  top: 330px;
    left: 460px;
    width: 160px;
}

.p-hero-slider__item--l1-1 {
      top: 340px;
    left: -20px;
    width: 391px;
    height: 255px;
	border-radius: 20px;
	overflow: hidden;
}
.p-hero-slider__item--l1-1 video{
	position: absolute;
	left: -14px;
    right: 0;
    top: 0px;
    margin: 0 auto;
    height: auto;
    width: 116%;
}


.p-hero-slider__item--l3-2 {
  top: 500px;
    left: 910px;
    width: 140px;
}
.p-hero-slider__item--l3-3 {
  top: 120px;
  left: 2100px;
  width: 240px;
}
.p-hero-slider__item--l3-4 {
  top: 190px;
  left: 2620px;
  width: 240px;
}
/* ----------------------------------------------------------
   768px〜1199px : タブレット
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .l-hero {
    height: clamp(430px, calc(430px + (670 - 430) * ((100vw - 768px) / (1200 - 768))), 670px);
  }
  /*
   * スライダーを画面幅に比例してscale縮小
   * 1200px基準（scale:1）→ 768pxで約0.64になる比率
   */
  .p-hero-slider__track {
    transform-origin: top left;
    scale: calc(100vw / 1200px);
  }
  .p-home-intro {
    padding-top: clamp(110px, calc(110px + (170 - 110) * ((100vw - 768px) / (1200 - 768))), 170px);
  }
}
/* ----------------------------------------------------------
   767px以下 : スマホ
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .l-hero {
    height: auto;
    overflow: hidden;
    background-color: transparent;
    margin-bottom: -50px; /* 曲線の見える高さ分だけ次コンテンツを詰める */
  }
  .l-hero__bg {
    position: relative;
    height: auto;
    background-image: none;
    filter: none;
  }
  .l-hero__bg::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 150%;
    background-image: url(../images/sp_main_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
  }
  .l-hero::after {
    width: 100%;
    height: calc(100vw * 0.515);
    bottom: calc(-100vw * 0.515 + 50px);
    background-size: 100% auto;
  }
  /* SPスライダー：背景画像の下半分に重ねる
   * l-heroはheight:autoのため、スライダーはl-hero__bgの::beforeと合わせてtopで位置指定
   * 背景画像のpadding-top:150%の下から350px分を表示エリアにする
   * calc(100vw * 1.5)が背景画像の高さ、そこから350px+余白分引いた位置がtop
   */
  .p-hero-slider {
    /* display:noneはPC共通で設定済み・JS側で表示に切り替え */
    top: calc(100vw * 1.5 - 350px - 30px);
    height: 250px;
    overflow: hidden;
    z-index: 15;
  }
  /* SP用アイテムサイズ（元サイトのSP固定値） */
  .p-hero-slider__list {
    width: 1770px;
  }
  @keyframes p-hero-slide {
    0% {
      transform: translateX(calc(-1770px - 80px));
    }
    100% {
      transform: translateX(-80px);
    }
  }
  .p-hero-slider__item img {
    border-radius: 15px;
  }
  /* SP: 元サイトのSP固定座標値 */
  .p-hero-slider__item--l1-1 {
    top: 160px;
    left: 20px;
    width: 180px;
	  height: 113px;
  border-radius: 10px;
  }
  .p-hero-slider__item--l1-2 {
    top: 25px;
    left: 250px;
    width: 300px;
  }
  .p-hero-slider__item--l1-3 {
    top: 45px;
    left: 600px;
    width: 120px;
	  height: 79px;
  }
	.p-hero-slider__item--l1-3 video{
		left: -14px;
	}
  .p-hero-slider__item--l1-4 {
    top: 145px;
    left: 650px;
    width: 210px;
	  height: 116px;
  }
  .p-hero-slider__item--l1-5 {
    top: 25px;
    left: 850px;
    width: 90px;
	  height: 80px;
  border-radius: 10px;
  }
  .p-hero-slider__item--l1-6 {
    top: 155px;
    left: 918px;
    width: 180px;
  }
  .p-hero-slider__item--l1-7 {
    top: 45px;
    left: 1150px;
    width: 300px;
	  height: 167px;
  }
  .p-hero-slider__item--l1-8 {
    top: 25px;
    left: 1540px;
    width: 210px;
	  height: 125px;
  }
  .p-hero-slider__item--l2-1 {
    top: 70px;
    left: 0;
    width: 90px;
  }
	
	.p-hero-slider__item--l2-1 img{
		border-radius: 10px;
	}
	
  .p-hero-slider__item--l2-2 {
    top: 210px;
    left: 1350px;
    width: 120px;
  }
  .p-hero-slider__item--l3-1 {
    top: 80px;
    left: 200px;
    width: 120px;
  }
  .p-hero-slider__item--l3-2 {
    top: 185px;
    left: 480px;
    width: 120px;
  }
  .p-hero-slider__item--l3-3 {
    top: 60px;
    left: 1050px;
    width: 120px;
  }
  .p-hero-slider__item--l3-4 {
    top: 95px;
    left: 1310px;
    width: 120px;
  }
  /* アニメーション速度（SP） */
  .p-hero-slider__track--l1 {
    animation-duration: 30s;
  }
  .p-hero-slider__track--l2 {
    animation-duration: 35s;
  }
  .p-hero-slider__track--l3 {
    animation-duration: 60s;
  }
  /* キャッチコピー SP */
  .p-hero-copy {
    justify-content: flex-start !important; /* 上寄せ */
    align-items: center;
    text-align: center;
    padding-left: 6.5vw;
    padding-right: 6.5vw;
    margin-top: 0;
    padding-top: calc(58px + 14vw) !important; /* ← 58px=SPヘッダー高さ、14vwが余白（大きくすると下がる） */
    z-index: 50;
  }
  .p-hero-copy__title {
    font-size: 13.1vw !important; /* 50px / 382px(iPhone標準幅) ≒ 13.1vw */
    margin-bottom: 3vw;
    opacity: 1
  }
  .p-hero-copy__lead {
    font-size: 4.2vw !important; /* 16px / 382px ≒ 4.2vw・タイトルと同比率 */
  }
  /* Serviceタイトル */
  .p-home-intro {
    padding-top: 100px !important;
    padding-left: 30px;
    padding-right: 30px;
    text-align: left !important;
    margin-bottom: 30px !important;
  }
  .p-home-intro__title {
    font-size: 3.125rem;
    font-weight: 500 !important;
  }
  .p-home-intro__title-box::before {
    top: -14px;
    width: 33.5px;
    height: 2px;
  }
  .p-home-intro__lead {
    font-size: 0.9375rem;
    margin-top: 12px;
    text-align: left !important;
  }
}
/* ----------------------------------------------------------
   p-hero-copy : ヒーローセクション キャッチコピー
   ---------------------------------------------------------- */
.p-hero-copy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* センタリング */
  text-align: center;
  margin-top: -40px; /* ← ここの数値で上下位置を微調整（マイナス=上へ） */
  padding-left: 30px;
  padding-right: 30px;
  pointer-events: none;
  z-index: 50; /* スライダー(15)・曲線より前面 */
}
.p-hero-copy__title {
  font-family: "Google Sans Flex", sans-serif;
  font-size: clamp(5.625rem, calc(5.625rem + (9.375 - 5.625) * ((100vw - 48rem) / (75 - 48))), 9.375rem);
  /* clamp(50px, ..., 150px) */
  font-weight: 500;
  line-height: 1;
  color: #fff;
  margin-bottom: clamp(10px, 1.5vw, 20px);
  opacity: 0.8
}
.p-hero-copy__lead {
  font-size: clamp(1rem, calc(1rem + (1.4375 - 1) * ((100vw - 48rem) / (75 - 48))), 1.4375rem);
  /* clamp(16px, ..., 23px) */
  font-weight: 500;
  color: #fff;
  line-height: 1.6;
}
/* ----------------------------------------------------------
   l-loading : ローディングオーバーレイ
   ---------------------------------------------------------- */
.l-loading {
  position: absolute; /* l-hero内に収める */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* ヒーロー内で最前面 */
  opacity: 1;
  transition: opacity 0.6s ease;
}
/* ローディング下端の曲線（l-hero::afterと同じSVG） */
.l-loading::after {
  content: "";
  position: absolute;
  bottom: -746px;
  left: 50%;
  transform: translateX(-50%);
  width: 160rem;
  height: 51.7rem;
  background-image: url(../images/home_fv_mask.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  pointer-events: none;
}
/* SP */
@media (max-width: 767px) {
  .l-loading::after {
    width: 100%;
    height: calc(100vw * 0.515);
    bottom: calc(-100vw * 0.515 + 50px);
    background-size: 100% auto;
  }
}
/* ローディング完了：フェードアウト */
.l-loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}
/* ローディング完了後：DOMから除去済み状態 */
.l-loading.is-done {
  display: none;
}
.l-loading__logo {
  width: 156px;
  height: 67px;
  opacity: 0;
  animation: loading-logo-in 0.5s ease 0.3s forwards;
	transform: scale(calc(1200px / 100vw * 0.8));
}
@keyframes loading-logo-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* SP */
@media (max-width: 767px) {
  .l-loading__logo {
    width: 115px;
    height: auto;
  }
}
/* ----------------------------------------------------------
   サービス誘導エリア
   ---------------------------------------------------------- */
.p-service-block {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 625px;
  background: #F9F9F8 url(../images/top/pc_service_bg.jpg) center center no-repeat;
  /* 画像実寸1526px幅をそのまま表示 */
  background-size: 1526px auto;
}
.p-service-block__image {
  position: relative;
}
/* SP用imgは非表示 */
.p-service-block__image--sp {
  display: none;
}
/* テキストラッパー：1200px幅・センタリング */
.p-service-block__body-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  min-height: 625px;
}
/* テキストエリア：右半分に配置 */
.p-service-block__body {
  margin-left: auto;
  width: 36%;
  padding-left: 40px;
}
.p-service-block__label {
  font-size: clamp(1.25rem, calc(1.25rem + (2.1875 - 1.25) * ((100vw - 48rem) / (75 - 48))), 2.1875rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.p-service-block__title {
  font-size: clamp(1rem, calc(1rem + (1.1875 - 1) * ((100vw - 48rem) / (75 - 48))), 1.1875rem);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 16px;
}
.p-service-block__text {
  font-size: clamp(0.9375rem, calc(0.9375rem + (1.125 - 0.9375) * ((100vw - 48rem) / (75 - 48))), 1.125rem);
  line-height: 1.8;
  margin-bottom: 32px;
}
/* ----------------------------------------------------------
   1200px以下：背景画像とmin-heightを比例縮小
   ---------------------------------------------------------- */
@media (max-width: 1200px) and (min-width: 768px) {
  .p-service-block {
    background-size: 127.2vw auto; /* 1526 / 1200 * 100 = 127.2vw */
    min-height: calc(625 / 1200 * 100vw);
  }
  .p-service-block__body-wrap {
    min-height: calc(625 / 1200 * 100vw);
  }
}
/* ----------------------------------------------------------
   SP（767px以下）
   ---------------------------------------------------------- */
@media (max-width: 767px) {
	
.l-loading__logo {
  width: 156px;
  height: 67px;
  opacity: 0;
  animation: loading-logo-in 0.5s ease 0.3s forwards;
	transform: scale(calc(375px / 100vw * 0.7));
}	

  .p-service-block {
    position: static;
    overflow: visible;
    min-height: auto;
    display: flex;
    flex-direction: column-reverse;
    background: none;
    background-color: var(--color-gray-bg);
  }
  /* PCのCSS背景は非表示 */
  .p-service-block__image {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    background-image: none;
  }
  .p-service-block__image img {
    width: 100%;
    display: block;
  }
  /* SP用imgを横幅100%で表示 */
  .p-service-block__image-sp {
    display: block;
    width: 100%;
    height: auto;
  }
  .p-service-block__body-wrap {
    max-width: none;
    min-height: auto;
    display: block;
    margin: 0;
  }
  .p-service-block__body {
    width: 100%;
    margin-left: 0;
    padding: 0 30px 40px;
    text-align: left;
  }
  .p-service-block__label {
    font-size: 1.25rem;
    margin-bottom: 12px;
  }
  .p-service-block__title {
    font-size: 1rem;
    margin-bottom: 12px;
  }
  .p-service-block__text {
    font-size: 0.9375rem;
    margin-bottom: 24px;
  }
	
	.p-home-intro.type2 {
	padding-top: 0px!important;
}

	
}
/* ----------------------------------------------------------
   p-home-intro : Serviceタイトル＆リード
   ---------------------------------------------------------- */
.p-home-intro {
  text-align: center;
  padding-top: 170px;
  margin-bottom: clamp(30px, calc(30px + (130 - 30) * ((100vw - 768px) / (1200 - 768))), 60px);
}


/*
.p-home-intro.type {
	margin-bottom: clamp(60px, calc(60px + (20 - 60) * ((100vw - 768px) / (1200 - 768))), 20px);
}*/

.p-home-intro__title-box {
  display: inline-block;
  position: relative;
}
.p-home-intro__title {
  font-family: "Google Sans Flex", sans-serif;
  font-size: clamp(3.125rem, calc(3.125rem + (9.6875 - 3.125) * ((100vw - 48rem) / (75 - 48))), 9.6875rem);
  font-weight: 400;
  line-height: 1;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.p-home-intro__title-box::before {
  content: "";
  position: absolute;
  top: clamp(-14px, calc(-14px + (-25 - (-14)) * ((100vw - 48rem) / (75 - 48))), -25px);
  left: 0;
  width: clamp(33.5px, calc(33.5px + (67 - 33.5) * ((100vw - 48rem) / (75 - 48))), 67px);
  height: clamp(2px, calc(2px + (4 - 2) * ((100vw - 48rem) / (75 - 48))), 4px);
  background: url(../images/txt_bar_l.svg) no-repeat center / contain;
}
.p-home-intro__lead {
  margin-top: clamp(12px, calc(12px + (24 - 12) * ((100vw - 48rem) / (75 - 48))), 24px);
  font-size: clamp(0.9375rem, calc(0.9375rem + (1.75 - 0.9375) * ((100vw - 48rem) / (75 - 48))), 1.75rem);
  text-align: center;
}

/* ----------------------------------------------------------
   p-about-block : 会社概要誘導エリア
   ---------------------------------------------------------- */

.p-about-block__image {
  position: relative;
  text-align: center;
  margin-top: clamp(80px, calc(80px + (130 - 80) * ((100vw - 768px) / (1200 - 768))), 130px);
}

.p-about-block__image img {
  position: relative;
  max-width: 80%; /* 画像の左右に余白がある分 */
  height: auto;
  z-index: 1; /* 背景色ブロックより前面 */
}

.p-about-block__image-bg {
  position: absolute;
    bottom: -90px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #EBEBE9;
    z-index: 0;
}

@media (max-width: 1200px) {
	
}

@media (max-width: 767px) {
	.p-about-block__image {
  position: relative;
  text-align: center;
  margin-top: 60px;
}
	
.p-about-block__image-bg {
	display: none;
	}
	
	.p-about-block__image img {
		max-width: 100%;
	}
	
}

/* ----------------------------------------------------------
   p-hero-ticker : 流れる文字エリア
   ---------------------------------------------------------- */
.p-hero-ticker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 30; /* スライダー(15)の上、キャッチコピー(50)の下 */
}

.p-hero-ticker__item {
  position: absolute;
  white-space: nowrap;
  font-family: "Google Sans Flex", sans-serif;
  font-weight: 500;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  will-change: transform;
}

/* ----------------------------------------------------------
   スライダー
   ---------------------------------------------------------- */

#staff-slide{
	position: relative;
}

.p-top-staff {
	position: relative;
	width:100%;
	background: #FFF;
	background: linear-gradient(180deg,rgba(247, 247, 247, 1) 15%, rgba(240, 238, 235, 1) 15%);
	padding-bottom:110px;
	_margin-bottom:400px;
	_display: none;
}

.p-top-staff::before{
	content: 'Work With Us';
	position: absolute;
	bottom:-110px;
	left:0;
	right:0;
	margin:0 auto;
	font-size:187px;
	color:#F9F9F9;
	font-family: "Google Sans Flex", sans-serif;
	font-weight: 400;
	text-align: center;
}

.p-top-staff::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 100%;
    background:
        linear-gradient(#ededed, #ededed) 0% 0 / 1px 100% no-repeat,
        linear-gradient(#ededed, #ededed) 33.333% 0 / 1px 100% no-repeat,
        linear-gradient(#ededed, #ededed) 66.666% 0 / 1px 100% no-repeat,
        linear-gradient(#ededed, #ededed) 100% 0 / 1px 100% no-repeat;
    pointer-events: none;
    z-index: 0;
}

.p-top-staff__slider{
	position: relative;
    z-index: 1;
}

/* Swiperがflex制御するため、手動のgap/justify-contentは不要 */
.p-top-staff__slider .swiper-wrapper{
	/* Swiperが自動制御 */
}

.p-top-staff__card{
	position: relative;
	width:338px !important; /* Swiperのauto幅を上書き */
	min-height:450px;
	border:solid 1px #e9e9e9;
	border-radius:10px;
	padding:30px;
	cursor: pointer;
	background: var(--color-white);
	box-sizing: border-box;
}

.p-top-staff__card::after{
	content: '';
	position: absolute;
	-webkit-mask: url(../images/ico_blank.svg) 0 0 no-repeat;
    mask: url(../images/ico_blank.svg) 0 0 no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--color-text);
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
	right:20px;
	bottom:20px;
}

/* 偶数カードの段差（data-staff-indexをJSで付与） */
.swiper-slide[data-staff-even="true"] {
  margin-top: 25px;
}

.p-top-staff__card:hover{
	border:solid 1px var(--color-primary);
}

.p-top-staff__card:hover img{
	opacity: 0.7
}

.p-top-staff__photo{
	width:278px;
	height:auto;
	margin-bottom:20px;
}

.p-top-staff__photo img{
	width:100%;
	border-radius:3px;
}

.p-top-staff__name{
	font-size:1.5rem;
	width:100%;
	text-align: center;
	margin-bottom:15px;
	font-weight: 500;
}

.p-top-staff__name a{
	text-decoration: none;
}

.p-top-staff__year{
	display: flex;
	gap:15px;
	align-items: center;
	font-size:1rem;
	margin-bottom:10px;
}

.p-top-staff__year .p-top-staff__badge{
	font-size:0.9375rem;
	border-radius:3px;
	display: flex;
	align-items: center;
	justify-content: center;
	width:60px;
	height:30px;
	color:var(--color-white);
}

.p-top-staff__year .p-top-staff__badge.new{
	background: var(--color-primary)
}

.p-top-staff__year .p-top-staff__badge.career{
	background: var(--color-orange);
	letter-spacing: -1px;
    width: 70px;
}

.p-top-staff__detail div{

}

/* Swiperデフォルトナビを上書き */
.p-top-staff__prev.swiper-button-prev,
.p-top-staff__next.swiper-button-next {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	margin-top: 0;
}

.p-top-staff__prev.swiper-button-prev::after,
.p-top-staff__next.swiper-button-next::after {
	_content: none; /* Swiperデフォルトの矢印を消す */
}

.p-top-staff__nav{
	position: absolute;
	left:0;
	right:0;
	bottom:-30px;
	max-width: 1200px;
    margin: 0 auto;
    display: flow-root;
	display: flex;
	justify-content: flex-end;
	gap:15px;
	padding:0 20px;
}


.p-top-staff__prev{
	position: relative;
	width:60px;
	height:60px;
	border:solid 1px #e9e9e9;
	border-radius:2em;
	background: var(--color-white);
	display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
}

.p-top-staff__prev:hover,
.p-top-staff__next:hover{
	border:solid 1px var(--color-primary);
}

.p-top-staff__next{
	position: relative;
	width:60px;
	height:60px;
	border:solid 1px #e9e9e9;
	border-radius:2em;
	background: var(--color-white);
	display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
}

.p-top-staff__prev::after{
position: absolute;
    top: 44%;
    left: 44%;
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border-left: 2px solid #212121;
    border-top: 2px solid #212121;
    transform: rotate(-45deg);
}

.p-top-staff__next::after{
position: absolute;
    top: 44%;
    left: 40%;
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border-left: 2px solid #212121;
    border-top: 2px solid #212121;
    transform: rotate(-225deg);
}

.p-top-staff__prev:hover::after,
.p-top-staff__next:hover::after{
	border-left: 2px solid var(--color-primary);
    border-top: 2px solid var(--color-primary);
}

/* ----------------------------------------------------------
   スライダー 1200px以下
   ---------------------------------------------------------- */
@media (max-width: 1200px) {
  .p-top-staff__card {
    width: 28.2vw !important; /* 338 / 1200 * 100 = 28.2vw */
    min-height: auto;
    padding: 2.5vw;
  }

	#staff-slide{
	margin-bottom: calc(400px * (100vw / 1200));
}

  .p-top-staff {
    padding-bottom: calc(110px * (100vw / 1200));
  }

  .p-top-staff::before {
    font-size: min(187px, 15.58vw);
    bottom: max(-110px, -9.17vw);
  }

  .p-top-staff__photo {
    width: 100%;
  }

  .p-top-staff__name {
    font-size: clamp(1.1rem, calc(1.1rem + (1.5 - 1.1) * ((100vw - 47.9375rem) / (75 - 47.9375))), 1.5rem);
  }

  .p-top-staff__year {
    font-size: clamp(0.8rem, calc(0.8rem + (1 - 0.8) * ((100vw - 47.9375rem) / (75 - 47.9375))), 1rem);
  }

  .swiper-slide[data-staff-even="true"] {
    margin-top: calc(25px * (100vw / 1200));
  }
}


/* ----------------------------------------------------------
   スライダー（767px以下）
   ---------------------------------------------------------- */
@media (max-width: 767px) {

  .p-top-staff__slider {
    transform: none; /* スケールをやめてvw指定に */
    _overflow: visible;
	  overflow: hidden;
  }
	
	#staff-slide{
		margin-bottom: 0px;
	_margin-bottom: calc(150px + (400 - 150) * ((100vw - 375px) / (767 - 375)));
}

  .p-top-staff {
    padding-bottom: 60px;
    background: linear-gradient(180deg,rgba(247, 247, 247, 1) 30%, rgba(240, 238, 235, 1) 30%);
	  _overflow: hidden;
  }

  .p-top-staff::before {
    font-size: min(187px, 15.58vw);
    bottom: max(-110px, -9.17vw);
  }

  .p-top-staff::after {
    content: none;
  }

  /* カードサイズ：SP用 */
  .p-top-staff__card {
    width: max(180px, 46vw) !important;
    min-height: auto;
    padding: 20px;
  }

  .swiper-slide[data-staff-even="true"] {
    margin-top: 12px;
  }

  .p-top-staff__photo {
    width: 100%;
  }

  .p-top-staff__name {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }

  .p-top-staff__year {
    font-size: 0.8rem;
    gap: 8px;
    margin-bottom: 8px;
	  line-height: 1.2;
  }

  .p-top-staff__year .p-top-staff__badge {
    font-size: 0.75rem;
    width: 48px;
    height: 24px;
  }

  .p-top-staff__detail {
    font-size: 0.75rem;
  }

  .p-top-staff__card::after {
    width: 10px;
    height: 10px;
    right: 12px;
    bottom: 12px;
  }

  /* ナビボタン：SP用サイズ */
  .p-top-staff__nav {
    transform: none;
    bottom: -20px;
  }

  .p-top-staff__prev,
  .p-top-staff__next {
    width: 50px;
    height: 50px;
  }

  .p-top-staff__prev::after,
  .p-top-staff__next::after {
    width: 8px;
    height: 8px;
  }
}