@charset "UTF-8";

/* =========================================================
   変数
   ========================================================= */
:root{
  --navy:      #004192;   /* メインのネイビー */
  --navy-dark: #003377;
  --blue:      #0e4f9b;   /* アイコン・「派遣！」 */
  --red:       #d5111e;   /* 強調・CTA */
  --red-dark:  #b60e19;
  --ink:       #111418;   /* 本文 */
  --gray:      #eff2f6;   /* 背景ベタ */
  --line:      #d5dbe4;
  --white:     #fff;

  --form-w: 780px;                    /* フォームカラムの幅 */
  --gutter: clamp(16px, 4vw, 72px);   /* 左右余白 */
  --gap:    clamp(24px, 3vw, 56px);   /* カラム間 */
}

.c-red { color:var(--red); }
.c-navy{ color:var(--navy); }

/* =========================================================
   FV 全体
   ========================================================= */
.fv{
  position:relative;
  width:100%;
  overflow:hidden;
		margin: 0px;
  padding: 120px 0px 0px 0px;
}
.partner{
 padding-top:100px!important;
}

/* ---- 背景：写真 ＋ ベタ塗り ---- */
.fv__bg{ position:absolute; inset:0; z-index:0; }

.fv__bg-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(1);
}

/* 写真の上に薄いグレーのベールを重ねて、下にいくほど無地に */
.fv__bg-veil{
  position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    rgba(239,242,246,.55)   0%,
    rgba(239,242,246,.90)  45%,
    rgba(239,242,246,1)    72%
  );
}

/* 右側のネイビー（斜めのベタ塗り） */
.fv__bg-navy{
  position:absolute;
  inset:0 0 0 auto;
  width:46%;
  background:var(--navy);
  clip-path:polygon(22% 0, 100% 0, 100% 100%, 3% 100%);
}
.fv__bg-navy--back{
  width:52%;
  background:var(--navy-dark);
  opacity:.35;
  clip-path:polygon(24% 0, 40% 0, 20% 100%, 3% 100%);
}

/* ---- コンテンツ枠 ---- */
.fv__inner{
  position:relative;
  z-index:2;
  width:98%;
		margin: 0 auto;
  max-width:1600px;
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--form-w);
  gap:var(--gap);
  /*align-items:center;*/
		padding: 0px 0px 40px 0px;
}

.fv__main{margin-top: 90px; position:relative; z-index:2; max-width:1000px; }

/* =========================================================
   写真（重ね配置）
   ========================================================= */
.fv__photos{
		display: none;
  position:absolute;
  top:4%;
		left: 44%;
		transform:  translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
  width:24%;
		aspect-ratio:1/2;
  z-index:1;
  pointer-events:none;
		opacity: 0.5;
}
.fv__photo{ position:absolute; filter:grayscale(1); }

.fv__photo--person{
  width:100%;
		top: 0px;
		left: 0px;
}
.fv__photo--business{
  right:0%;
		top:12%;
  width:58%;
  object-fit:cover;
		display: none;
}
.fv__photo--event{
  right:-36%; bottom:0;
  width:82%; aspect-ratio:16/9;
  object-fit:cover;
		display: none;
}

/* =========================================================
   アイキャッチコピー
   ========================================================= */
.eyebrow{
  display:inline-flex;
  align-items:stretch;
  gap:.35em;
  margin-bottom:clamp(14px, 1.6vw, 24px);
}
.eyebrow__label{
  display:block;
  padding:.45em 1.5em;
  background:var(--navy);
  color:var(--white);
  font-size:clamp(14px, 1.35vw, 22px);
  font-weight:700;
  letter-spacing:.08em;
  transform:skewX(-12deg);
}
.eyebrow__label > *{ display:block; transform:skewX(12deg); }
.eyebrow__slash{
  display:block;
  width:clamp(6px, .55vw, 10px);
  background:var(--navy);
  transform:skewX(-12deg);
}

.headline{
  font-weight:900;
  font-feature-settings:"palt" 1;
  line-height:1.16;
  letter-spacing:.01em;
}
.headline__row1,
.headline__row2{ display:block; }

.headline__row1{ font-size:clamp(32px, 4.2vw, 72px); }
.headline__no  { font-size:.7em; }

.headline__row2{
  font-size:clamp(50px, 7.3vw, 120px);
  letter-spacing:-.01em;
  margin-top:.06em;
}

.lead{
  font-feature-settings:"palt" 1;
  margin-top:clamp(18px, 2.1vw, 30px);
  font-size:clamp(14px, 1.35vw, 23px);
  font-weight:700;
  line-height:1.75;
}
.lead .c-red{ font-weight:900; }

/* =========================================================
   4つのポイント
   ========================================================= */
.points{
  margin-top:clamp(16px, 2vw, 32px);
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(10px, 1.1vw, 20px);
  max-width:1000px;
}
.points__item{
  background:var(--white);
  border-radius:4px;
  padding:clamp(24px, 2.4vw, 40px) clamp(6px, .8vw, 14px);
  text-align:center;
  box-shadow:0 2px 10px rgba(0,32,80,.06);
}
.points__icon{
  width:clamp(57.2px, 5.4vw, 94px);
  height:auto;
  margin-inline:auto;
}
.points__title{
  font-feature-settings:"palt" 1;
  margin-top:.6em;
  padding-bottom:.5em;
  border-bottom:1px solid var(--line);
  font-size:clamp(18px, 1.8vw, 32px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.01em;
}
.points__title--smm{     font-size: clamp(18px, 1.8vw, 32px); }
.points__title--sm{ font-size:clamp(16px, 1.6vw, 28px);  line-height: 1.2}
.points__title-en{ font-family:inherit; }

.points__text{
  margin-top:.7em;
  font-size:clamp(14px, 1.1vw, 18px);
  font-weight:700;
  line-height:1.5;
}

/* =========================================================
   締めのバナー
   ========================================================= */
.closing{
  margin-top:clamp(18px, 2.0vw, 21px);
  max-width:1000px;
  display:flex;
  align-items:center;
  gap:clamp(12px, 1.6vw, 28px);
  padding:clamp(24px, 2.4vw, 40px) clamp(16px, 2vw, 34px);
  background:var(--white);
  border-radius:4px;
  box-shadow:0 2px 10px rgba(0,32,80,.06);
}
.closing__icon{
  flex:0 0 auto;
  width:clamp(46px, 4.6vw, 78px);
}
.closing__body{ display:block; }
.closing__lead{
  display:block;
  font-size:clamp(16px, 1.7vw, 28px);
  font-weight:700;
}
.closing__main{
  display:block;
  font-feature-settings:"palt" 1;
  margin-top:.15em;
  color:var(--navy);
  font-size:clamp(19px, 2.3vw, 40px);
  font-weight:900;
  letter-spacing:.01em;
}

.photoList{
 margin: 40px 0px 0px 0px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.photoList .photo{
 width : -webkit-calc(33.3% - 10px) ;
 width : calc(33.3% - 10px) ;
}
/* --- スマートフォン --- */
@media (max-width:600px){
		.fv__main{
		 margin-top: 0px;
		}
	.photoList{
	 display: none;
	}
}

/* =========================================================
   フォーム
   ========================================================= */
.fv__form{ position:relative; z-index:3; }

.cta{
  background:var(--white);
  border-radius:14px;
  padding:clamp(18px, 1.6vw, 28px) clamp(16px, 1.5vw, 26px) clamp(20px, 1.8vw, 30px);
  box-shadow:0 10px 34px rgba(0,26,66,.16);
}

/* ＼ かんたん1分で完了 ／ */
.cta__badge{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  color:var(--red);
  font-size:clamp(13px, .95vw, 16px);
  font-weight:900;
  letter-spacing:.02em;
}
.cta__badge::before,
.cta__badge::after{
  content:"";
  width:2px; height:1.4em;
  background:var(--red);
}
.cta__badge::before{ transform:rotate(-22deg); }
.cta__badge::after { transform:rotate(22deg);  }

.cta__title{
  font-feature-settings:"palt" 1;
  margin-top:.35em;
  text-align:center;
  color:var(--ink);
  font-size:clamp(20px, 1.7vw, 30px);
  font-weight:900;
  line-height:1.35;
}
/*
.formOuter{
 max-height: 500px;
	overflow-y: auto;
}
*/

.cta__form{ margin-top:clamp(12px, 1.1vw, 18px); }

.field + .field{ margin-top:clamp(10px, .85vw, 15px); }

.field__label{
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:.35em;
  font-size:clamp(12px, .9vw, 15px);
  font-weight:700;
}
.tag{
  display:inline-block;
  padding:.15em .7em;
  border-radius:3px;
  color:var(--white);
  font-size:.78em;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.04em;
}
.tag--req{ background:var(--red); }
.tag--any{ background:#8a97a8; }

.field__input{
  display:block;
  width:100%;
  padding:.72em .9em;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--white);
  font-size:clamp(13px, .95vw, 16px);
  font-weight:500;
  line-height:1.5;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field__input::placeholder{ color:#9aa5b4; }
.field__input:focus-visible{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(0,65,146,.15);
}
.field__input--area{ resize:vertical; min-height:5.5em; }

/* セレクトの矢印 */
.field__select{ position:relative; }
.field__select select{
  appearance:none;
  padding-right:2.4em;
  cursor:pointer;
}
.field__select::after{
  content:"";
  position:absolute;
  top:50%; right:1em;
  width:.5em; height:.5em;
  margin-top:-.35em;
  border-right:2px solid #46536a;
  border-bottom:2px solid #46536a;
  transform:rotate(45deg);
  pointer-events:none;
}

/* 送信ボタン */
.cta__submit{
  position:relative;
  z-index:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:clamp(14px, 1.2vw, 20px);
  padding:.9em 1.4em;
  border:none;
  border-radius:6px;
  overflow:hidden;
  background:var(--red);
  color:var(--white);
  font-size:clamp(15px, 1.1vw, 19px);
  font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;
  transition:color .3s ease;
}
/* 左から右へスライドする背景 */
.cta__submit::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:var(--red-dark);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .35s ease;
}
.cta__submit:hover::before,
.cta__submit:focus-visible::before{
  transform:scaleX(1);
  transform-origin:left center;
}
.cta__submit::after{
  content:"";
  position:absolute;
  top:50%; right:1.3em;
  width:.45em; height:.45em;
  margin-top:-.28em;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg);
}
.cta__submit:focus-visible{ outline:3px solid rgba(0,65,146,.5); outline-offset:2px; }

/* =========================================================
   レスポンシブ
   ========================================================= */

/* --- ノートPC --- */
@media (max-width:1400px){
  :root{ --form-w:350px; }
  /*.fv__photos{ width:min(34%, 440px); }*/
}

/* --- タブレット：フォームを下に --- */
@media (max-width:1080px){
  .fv{ padding-bottom:0; }

  .fv__inner{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(28px, 4vw, 44px);
				
  }

  .fv__bg-navy{
    width:100%;
    clip-path:polygon(0 62%, 100% 52%, 100% 100%, 0 100%);
  }
  .fv__bg-navy--back{ display:none; }
  .fv__bg-veil{
    background:linear-gradient(180deg,
      rgba(239,242,246,.55) 0%,
      rgba(239,242,246,.92) 40%,
      rgba(239,242,246,1)  62%);
  }

  /* 人物のみ、コピーの背面に薄く配置 */
		/*
  .fv__photos{
    top:0; bottom:auto; right:0;
    height:46%;
    width:44%;
    opacity:.35;
  }
		*/
		/*
  .fv__photo--person{ right:0; height:100%; }
		*/
  .fv__photo--business,
  .fv__photo--event{ display:none; }

  .headline__row1{ font-size:clamp(24px, 4.6vw, 44px); }
  .headline__row2{ font-size:clamp(34px, 7.4vw, 70px); }
  .lead          { font-size:clamp(14px, 2vw, 20px); }

  .points{
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
    max-width:none;
  }
  .points__title{ font-size:clamp(14px, 2.1vw, 22px); }
  .points__title--sm{ font-size:clamp(11px, 1.55vw, 16px); }
  .points__text { font-size:clamp(11px, 1.35vw, 14px); }

  .closing{ max-width:none; }

  .fv__form{ padding-bottom:clamp(28px, 5vw, 48px); }
  .cta{ max-width:560px; margin-inline:auto; }
}

/* --- スマートフォン --- */
@media (max-width:600px){
  :root{ --gutter:16px; }

  .fv{ padding:122px 10px 30px; }

  .fv__bg-navy{ clip-path:polygon(0 58%, 100% 50%, 100% 100%, 0 100%); }
/*
  .fv__photos{ height:32%; width:52%; opacity:.28; }
*/
  .fv__photos{
		top:0px;
		left: 67%;
		width: 50%;
		transform: translate(0%, 0%); 
  -webkit-transform: translate(0%, 0%);
		opacity: 0.4;
		}
  .eyebrow__label{ font-size:12px; padding:.45em 1.1em; }
  .eyebrow__slash{ width:5px; }

  .headline__row1{ font-size:clamp(20px, 6.2vw, 28px); }
  .headline__row2{ font-size:clamp(32px, 11vw, 46px); }
  .lead{ font-size:13px; line-height:1.8; }

  .points{
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }
  .points__icon { width:42px; }
  .points__title{ font-size:17px; }
  .points__title--sm{ font-size:13px; }
  .points__text { font-size:12px; }

  .closing{
    flex-direction:column;
    text-align:center;
    gap:8px;
    padding:16px;
  }
  .closing__icon{ width:52px; }
  .closing__lead{ font-size:13px; }
  .closing__main{ font-size:20px; }

  .cta{ border-radius:10px; }
  .cta__title{ font-size:21px; }
}

/* --- モーションを減らす設定に配慮 --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}

.sp{
 display: none;
}
.pc{
 display: block;
}
.pagetop.n{
 z-index: 999;
}
.fv__form.bottom{
 margin: 60px auto;
	max-width: 1120px;
}
@media (max-width:767px){
.sp{
 display: block;
}
.pc{
 display: none;
}

.fv__form.bottom{
 max-width: 90%;
}

}