/* ============================================================
   08 recruit / 09 entry / 10 contact
   絶対座標はキャプチャJSONのrect（ページ絶対y − セクションy0）
   recruit y0=9583 / entry y0=10633 / contact y0=11433
   ============================================================ */

/* セクション外へはみ出す装飾を許可するセクション */
.sec--visible {
  overflow: visible;
}

/* 原サイトは和文に palt（プロポーショナル字形）が効いている。
   これが無いと「お問い合わせ」等の実測幅がJSONのrectと合わず折り返す。
   ※本来は base.css で全体に当てるべき設定（チームへ共有済み） */
#recruit,
#entry,
#contact {
  font-feature-settings: 'palt' 1;
}

/* ---------------------------------------------- 08 recruit */

#recruit {
  height: 1050px;
}

.recruit__card {
  position: absolute;
  top: 0;
  left: 16px;
  width: 1408px;
  height: 1050px;
  border-radius: 16px;
  overflow: hidden;
}

/* 元サイトの描画背景（webp）は淡ピンク基調の多層グラデで代替 */
.recruit__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 16px;
  background:
    radial-gradient(38% 34% at 34% 46%, #F8E1DA 0%, rgba(248, 225, 218, 0) 74%),
    radial-gradient(46% 40% at 78% 78%, #F6E2EC 0%, rgba(246, 226, 236, 0) 76%),
    radial-gradient(40% 30% at 88% 12%, #FBEDE2 0%, rgba(251, 237, 226, 0) 72%),
    linear-gradient(168deg, #FDF4F0 0%, #FBEBE6 58%, #F9E7E4 100%);
}

/* --- 背景アート層 --- */

.recruit__art {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.recruit__blob {
  position: absolute;
  top: 76.0032px;
  left: 177px;
  width: 1408px;
  height: 1085.06px;
  z-index: 3;
}

/* 元アートの赤／青の大ブロブと差し色ストロークをCSS図形で近似 */
.recruit__blob > span {
  position: absolute;
  display: block;
}

/* 三日月形 = 楕円から一回り大きい円を抜く（maskで刳り抜き） */
.recruit__blob-red {
  left: 240px;
  top: 175px;
  width: 300px;
  height: 680px;
  border-radius: 50%;
  background: linear-gradient(160deg, #F4776C 0%, #F04E52 50%, #DE414C 100%);
  transform: rotate(-6deg);
  -webkit-mask-image: radial-gradient(circle 300px at 123% 50%, #0000 0 300px, #000 302px);
  mask-image: radial-gradient(circle 300px at 123% 50%, #0000 0 300px, #000 302px);
}

.recruit__blob-blue {
  left: 880px;
  top: 190px;
  width: 300px;
  height: 640px;
  border-radius: 50%;
  background: linear-gradient(200deg, #7460F0 0%, #5D3FE8 50%, #4A2FCE 100%);
  transform: rotate(6deg);
  -webkit-mask-image: radial-gradient(circle 300px at -23% 50%, #0000 0 300px, #000 302px);
  mask-image: radial-gradient(circle 300px at -23% 50%, #0000 0 300px, #000 302px);
}

.recruit__stroke {
  border-radius: 128px;
}

.recruit__stroke--magenta {
  left: 236px;
  top: 158px;
  width: 30px;
  height: 172px;
  background: var(--magenta);
  transform: rotate(19deg);
}

.recruit__stroke--green {
  left: 146px;
  top: 338px;
  width: 28px;
  height: 232px;
  background: var(--green);
  transform: rotate(-13deg);
}

.recruit__dot {
  left: 190px;
  top: 302px;
  width: 36px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  transform: rotate(-8deg);
}

.recruit__photos {
  position: absolute;
  top: 188.006px;
  left: 473.031px;
  width: 794.984px;
  height: 794.984px;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: circle(50% at 50% 50%);
}

.recruit__photos-in {
  width: 794.984px;
  height: 794.984px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  transform: rotate(15deg);
}

/* 元の縦スクロール画像帯は、写真を縦積みしたCSSマーキーで代替。
   1セット = 5枚 x 240px = 1200px。同じ並びを2セット積み、1セット分だけ
   translateY させることで継ぎ目なくループする（clip-path の円内＝
   photos-in 座標で半径397.5px の範囲しか見えないため、1セットで足りる）。 */
.recruit__strip {
  flex: 0 0 317.984px;
  height: 1563px;
  overflow: hidden;
}

.recruit__col {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.recruit__col img {
  flex: none;
  width: 317.984px;
  height: 240px;
  object-fit: cover;
}

.recruit__strip--1 .recruit__col {
  animation: recruit-marquee-down 78s linear infinite;
}

.recruit__strip--2 .recruit__col {
  animation: recruit-marquee-up 90s linear infinite;
}

.recruit__strip--3 .recruit__col {
  animation: recruit-marquee-down 84s linear infinite;
}

@keyframes recruit-marquee-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1200px); }
}

@keyframes recruit-marquee-down {
  0%   { transform: translateY(-1200px); }
  100% { transform: translateY(0); }
}

/* --- 左: 白箱 + 縦書きリード文 --- */

.recruit__lead {
  position: absolute;
  top: 0;
  left: 0;
  width: 283.625px;
  height: 491px;
  z-index: 3;
  background: #fff;
  border-radius: 0 0 16px 0;
}

.recruit__lead-tx {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 153.625px;
  height: 371px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
}

.recruit__lead-tx p {
  writing-mode: vertical-rl;
  width: 20.4062px;
  font-family: var(--font-jp);
  font-size: 20.016px;
  font-weight: 700;
  line-height: 20.4163px;
  letter-spacing: 0.60048px;
  color: var(--navy);
  white-space: nowrap;
}

/* 白箱の逆アール（凹コーナー）。16px角の白から1/4円を抜いた形 */
.recruit__notch {
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
}

.recruit__notch--lead-tr {
  top: 0;
  left: 283.625px;
  background: radial-gradient(circle 16px at 100% 100%, #0000 0 15.4px, #fff 16.2px);
}

.recruit__notch--lead-bl {
  top: 491px;
  left: 0;
  background: radial-gradient(circle 16px at 100% 100%, #0000 0 15.4px, #fff 16.2px);
}

/* --- 右: 白箱 + Recruit 見出し --- */

.recruit__head {
  position: absolute;
  top: 0;
  left: 707px;
  width: 700.969px;
  height: 224px;
  z-index: 3;
  background: #fff;
  border-radius: 0 0 0 16px;
}

.recruit__head-in {
  position: absolute;
  top: 0;
  left: 76px;
  width: 576.969px;
  height: 184px;
}

/* 「Environment」は原文「Recruit」より字数が多いため、
   箱の寸法（160px高）は保ったままフォントサイズだけ落として収める */
.recruit__title {
  width: 576.969px;
  height: 160px;
  display: flex;
  align-items: center;
  font-family: var(--font-en);
  font-size: 88px;
  font-weight: 800;
  line-height: 160px;
  letter-spacing: -1.76px;
  color: var(--navy);
}

.recruit__label {
  position: absolute;
  top: 160px;
  left: 440px;
  width: 136.891px;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.recruit__label-dot {
  width: 30px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
}

.recruit__label p {
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 900;
  line-height: 24px;
  letter-spacing: 0.72px;
  color: var(--navy);
}

.recruit__notch--head-tl {
  top: 0;
  left: -16px;
  background: radial-gradient(circle 16px at 0% 100%, #0000 0 15.4px, #fff 16.2px);
}

.recruit__notch--head-br {
  top: 224px;
  left: 684.969px;
  background: radial-gradient(circle 16px at 0% 100%, #0000 0 15.4px, #fff 16.2px);
}

/* --- 左下: 働く環境リスト（2行→4行のため上端を繰り上げ） --- */

.recruit__links {
  position: absolute;
  top: 620px;
  left: 49px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.recruit__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  height: 80px;
}

.recruit__circle {
  position: relative;
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 128px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.recruit__circle-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
}

/* リンクではなく項目表示。原文より字数が多いので1段小さくして
   写真コラージュ（x=473〜）に掛からない幅に収める */
.recruit__link-tx {
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 900;
  line-height: 28px;
  letter-spacing: 0.66px;
  color: var(--navy);
  white-space: nowrap;
}

/* --- セクション上端をまたぐ浮遊キャラ + 吹き出し --- */

.recruit__float {
  position: absolute;
  top: -125px;
  left: 278px;
  width: 307px;
  height: 333.812px;
  z-index: 3;
}

.recruit__chara {
  position: relative;
  width: 307px;
  height: 333.812px;
  animation: top_recruit_float01 2s ease-in-out infinite alternate;
}

.recruit__chara img {
  width: 307px;
  height: 333.812px;
  object-fit: contain;
  object-position: 50% 100%;
}

.recruit__bubble {
  position: absolute;
  top: 199.812px;
  left: 226.094px;
  width: auto;
  height: 64px;
  z-index: 2;
  padding: 12px 28px;
  border-radius: 128px;
  background: var(--red);
  animation: top_recruit_float01 3s ease-in-out infinite alternate;
}

.recruit__bubble p {
  width: auto;
  height: 40px;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: 0.48px;
  color: #fff;
  white-space: nowrap;
}

.recruit__bubble-tail {
  position: absolute;
  display: block;
  top: -4px;
  left: -6px;
  width: 25px;
  height: 21.1406px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 100%, 34% 100%);
}

@keyframes top_recruit_float01 {
  0%   { transform: translateY(20px); }
  100% { transform: translateY(-10px); }
}

/* ---------------------------------------------- 09 entry */

#entry {
  height: 800px;
}

.entry__card {
  position: absolute;
  top: 120px;
  left: 16px;
  display: block;
  width: 1408px;
  height: 600px;
  border-radius: 16px;
  overflow: hidden;
}

/* 元サイトの描画背景（webp）はクリーム基調のグラデで代替 */
.entry__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 16px;
  background:
    radial-gradient(48% 60% at 82% 22%, #FDF0E6 0%, rgba(253, 240, 230, 0) 74%),
    radial-gradient(40% 54% at 24% 18%, #FBEFF3 0%, rgba(251, 239, 243, 0) 76%),
    linear-gradient(176deg, #FDF5F1 0%, #FBEDE8 100%);
}

/* 大きなカラースウォッシュ（元はSVG1枚）をCSS図形で近似 */
.entry__swoosh {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.entry__swoosh > span {
  position: absolute;
  display: block;
}

.entry__swoosh-cyan {
  left: -130px;
  top: 296px;
  width: 380px;
  height: 430px;
  border-radius: 50%;
  background: linear-gradient(170deg, #5FD6F8 0%, #3EC9F5 52%, #2BA6DF 100%);
  z-index: 0;
}

.entry__swoosh-green {
  left: -170px;
  top: 300px;
  width: 1010px;
  height: 620px;
  border-radius: 50%;
  background: linear-gradient(88deg, #3BE87A 0%, #46E48D 62%, #57DCA6 100%);
  transform: rotate(-8deg);
  z-index: 1;
}

.entry__swoosh-blue {
  left: 110px;
  top: 432px;
  width: 920px;
  height: 470px;
  border-radius: 50%;
  background: linear-gradient(84deg, #4A2FCE 0%, #5D3FE8 48%, #7B5CF0 100%);
  transform: rotate(-6deg);
  z-index: 2;
}

.entry__swoosh-pink {
  left: 955px;
  top: 322px;
  width: 122px;
  height: 66px;
  border-radius: 6px;
  background: var(--pink);
  transform: rotate(-4deg);
  z-index: 3;
}

.entry__swoosh-pink::after {
  content: '';
  position: absolute;
  left: 56px;
  top: 48px;
  width: 122px;
  height: 66px;
  border-radius: 6px;
  background: var(--pink);
}

.entry__chars {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* 差し替えたキャラは原アセットと縦横比が違うため contain で収める */
.entry__char {
  position: absolute;
  object-fit: contain;
  object-position: 50% 100%;
}

.entry__char--1 { top: -86px;     left: 258px;  width: 330px; height: 372px;     animation: cta_entry_float01 2s ease-in-out infinite alternate; }
.entry__char--2 { top: 93px;      left: 29px;   width: 216px; height: 252px;     animation: cta_entry_float01 3s ease-in-out infinite alternate; }
.entry__char--3 { top: 367px;     left: 164px;  width: 372px; height: 241px;     animation: cta_entry_float01 4s ease-in-out infinite alternate; }
.entry__char--4 { top: -75px;     left: 817px;  width: 347px; height: 296px;     animation: cta_entry_float01 4s ease-in-out infinite alternate; }
.entry__char--5 { top: 149px;     left: 1193px; width: 224px; height: 342px;     animation: cta_entry_float01 2s ease-in-out infinite alternate; }
/* 6番だけ横長キャラのため、中心位置を保ったまま枠を横長に取り直す */
.entry__char--6 { top: 393px;     left: 910px;  width: 260px; height: 188px;     animation: cta_entry_float01 3s ease-in-out infinite alternate; }

@keyframes cta_entry_float01 {
  0%   { transform: translateY(20px); }
  100% { transform: translateY(-10px); }
}

/* 中央ブロック。原文より行数が増えるので中心を保ったまま上へ寄せて広げる
   （中心 x=704 / y=300 はカード中心と一致） */
.entry__text {
  position: absolute;
  top: 170px;
  left: 455px;
  width: 497.766px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.entry__title {
  width: 100%;
  height: 108px;
  font-family: var(--font-en);
  font-size: 108px;
  font-weight: 800;
  line-height: 108px;
  text-align: center;
  color: var(--navy);
}

.entry__sub {
  width: 100%;
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 900;
  line-height: 38.4px;
  letter-spacing: 0.72px;
  text-align: center;
  color: var(--navy);
}

.entry__badges {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
}

/* 求人媒体バッジ（公開後にリンクを設定するためリンクにはしない） */
.entry__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 22px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(40, 40, 64, 0.08);
  font-family: var(--font-jp);
  font-size: 17px;
  font-weight: 900;
  line-height: 17px;
  letter-spacing: 0.51px;
  color: var(--navy);
  white-space: nowrap;
}

.entry__badge small {
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: 0.3px;
  color: rgba(40, 40, 64, 0.55);
}

/* ---------------------------------------------- 10 contact */

#contact {
  height: 381px;
  background: #fff;
}

.contact__rule {
  position: absolute;
  top: 0;
  left: 64px;
  width: 1312px;
  height: 1px;
  background: var(--navy);
  z-index: 2;
}

.contact__tab {
  position: absolute;
  top: 1px;
  left: 64px;
  width: auto;
  height: 31px;
  z-index: 2;
  padding: 7px 69px 6px 12px;
  background: var(--navy);
  border-radius: 0 0 16px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.contact__tab-dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.contact__tab-tx {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  color: #fff;
}

.contact__tab-notch {
  position: absolute;
  display: block;
  top: 0;
  left: 100%;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle 16px at 100% 100%, #0000 0 15.4px, var(--navy) 16.2px);
}

.contact__h {
  position: absolute;
  top: 143px;
  left: 119px;
  width: 340.438px;
  height: 58.7969px;
  white-space: nowrap;
  font-family: var(--font-jp);
  font-size: 56px;
  font-weight: 900;
  line-height: 58.8px;
  letter-spacing: 1.68px;
  color: var(--navy);
}

/* 会社概要テーブル（原文の連絡先ブロックと同じ位置・同じ右側カラム）。
   掲載方針によりメール／電話の行は置かない */
.contact__body {
  position: absolute;
  top: 96px;
  left: 563px;
  width: 750px;
  font-family: var(--font-jp);
  color: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}

.contact__row dt {
  flex: 0 0 96px;
  font-size: 15px;
  font-weight: 900;
  line-height: 28px;
  letter-spacing: 0.45px;
  color: var(--red);
}

.contact__row dd {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.51px;
}