@charset "UTF-8";
/*
Theme Name : 彩プロダクツ　採用
*/

/* ===================
基本設計
=================== */
.recruit{
  --width-inner: min(1200px, 82vw);
  --bleed: calc((var(--width-inner) - 100dvw) / 2);
  --color-main: var(--color-org);
  color: var(--color-dark);
	background: url(../img/recruit/bg_rec.jpg) 0 0 / auto repeat fixed;
}

.recruit header{
  background: url(../img/recruit/bg_rec.jpg) repeat;
}
.recruit header::after{
  content:"";
  position:absolute;
  left:0; 
  right:0;
  bottom:0; 
  height: 1px;
  pointer-events:none;

  /* 擬似ノイズ（規則性は出るけど手軽） */
  background:
  repeating-linear-gradient(60deg,
    rgba(0,0,0,.5) 0 1px,
    rgba(0,0,0,0) 1px 4px
  ),
  repeating-linear-gradient(0deg,
    rgba(0,0,0,.60) 0 1px,
    rgba(0,0,0,0) 1px 6px
  );
  opacity: .2;
  z-index: 30;
}
.recruit header h1 a,
.recruit .header-wrap > div a{
  width: auto;
}
.recruit header h1 a,
.recruit .header-wrap > div a{
  display: flex;
  align-items: center;
}
@media screen and (min-width: 810.1px) {
  .recruit header h1 a,
  .recruit .header-wrap > div a{
    gap: 12px;
  }
  .recruit header h1 a span,
  .recruit .header-wrap div a span{
    display: block;
    width: min(82px, 5.69vw);
    flex-shrink: 0;
  }
  .recruit header h1 a > img,
  .recruit .header-wrap > div a > img{
    width: min(252px, 17.5vw);
  }
  .recruit nav{
    font-size: clamp(11px, 1vw, 16px);
  }
}
@media screen and (max-width: 810px) {
  .recruit header h1 a,
  .recruit .header-wrap > div a{
    gap: 8px;
  }
  .recruit header h1 a span,
  .recruit .header-wrap div a span{
    display: block;
    width: min(60px, 16vw);
    flex-shrink: 0;
  }
  .recruit header h1 > img,
  .recruit .header-wrap > div a > img{
    width: min(130px, 34.666vw);
  }
}

.recruit .ft-logo{
  width: auto;
}
.recruit .ft-logo a{
  display: flex;
  align-items: center;
  gap: 12px;
}
.recruit .ft-logo a span{
  display: block;
  width: min(82px, 5.69vw);
  flex-shrink: 0;
}
.recruit .ft-logo a > img{
  width: min(252px, 17.5vw);
}
@media screen and (max-width: 810px) {
  .recruit .ft-logo a{
    justify-content: center;
    gap: 8px;
  }
  .recruit .ft-logo a span{
    display: block;
    width: min(60px, 16vw);
    flex-shrink: 0;
  }
  .recruit .ft-logo a > img{
    width: min(130px, 34.666vw);
  }
}

.recruit section{
  scroll-margin-top: var(--header-h);
}
.recruit .txt-link{
  color: var(--color-org-dark);
}
.recruit a[target="_blank"]:not(:has(img, svg))::after{
  background: url("../img/recruit/icon_external.svg") center / contain no-repeat;
}
/* orb対象セクション */
.has-orbs{
  --orb-size-min: 400; /* 単位なしでOK */
  --orb-size-max: 600;
  --orb-dur-min: 30;
  --orb-dur-max: 50;
  --orb-blur: 55px;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
@media (max-width: 810px){
  .has-orbs{
    --orb-size-min: 240;
    --orb-size-max: 280;
    --orb-blur: 30px;
    /* 速度も少し短くしたいなら */
    --orb-dur-min: 24;
    --orb-dur-max: 40;
  }
}

/* orbレイヤー（セクション内だけ） */
.has-orbs .orbs{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  clip-path: inset(-200vh 0 -200vh 0);
}
/* orb本体 */
.has-orbs .orb{
  position: absolute;
  left: 0;
  top: 0;

  width: var(--size, 560px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;

  filter: blur(50px);
  opacity: 0.8;
  mix-blend-mode: screen;

  /* JSがこの2変数を更新して動く */
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--s, 1));
  transition: transform var(--dur, 30s) cubic-bezier(.2,.8,.2,1);
  will-change: transform;

  background: radial-gradient(circle at 35% 30%,
    color-mix(in oklab, var(--orb-core) 70%, white 30%) 0%,
    color-mix(in oklab, var(--orb-core) 90%, white 10%) 22%,
    color-mix(in oklab, var(--orb-core) 75%, transparent 25%) 48%,
    transparent 72%
  );
}

@supports not (background: radial-gradient(circle, color-mix(in oklab, red 50%, white) 0%, transparent 70%)){
  .has-orbs .orb{
    background: radial-gradient(circle at 35% 30%,
      rgba(255, 240, 110, 0.95) 0%,
      rgba(255, 240, 110, 0.55) 24%,
      rgba(255, 240, 110, 0.22) 48%,
      rgba(255, 240, 110, 0.00) 72%
    );
  }
}

@media (prefers-reduced-motion: reduce){
  .has-orbs .orb{ transition: none; }
}

.sec-grd{
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,0) 120px, 
    rgba(255,255,255,.7) 220px,
    #fff 280px                  
  );
  z-index: 1;
  padding-block: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl);
}
@media screen and (max-width: 810px) {
  .sec-grd{
    background: linear-gradient(to bottom,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,0) 20px, 
      rgba(255,255,255,.7) 40px,
      #fff 80px                  
    );
  }
}
.sec-grd.sec-int{
  padding-block: 0 var(--space-xl);
}

.sec-wht{
  position: relative;
  padding-block: var(--space-lg);
  isolation: isolate;
}
.sec-wht::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  z-index: -1;
}

.sec-ylw{
  position: relative;
  padding-block: var(--space-md);
  isolation: isolate;
}
.sec-ylw::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-ylw);
  z-index: -1;
}
.sec-pad{
  padding-block: var(--space-xl);
}
.sec-pad-top{
  padding-top: var(--space-xl);
}
.sec-pad-btm{
  padding-bottom: var(--space-xl);
}

/* ------------------
採用情報
------------------ */
.recruit h2{
  position: relative;
  margin-bottom: var(--space-md);
}
.recruit h2:not(.no-line)::before{
  content: "";
  position: absolute;
  left: -40px;
  top: 10px;
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--color-dark);
}
@media screen and (max-width: 810px) {
  .recruit h2:not(.no-line)::before{
    left: -16px;
    top: 10px;
    width: 12px;
  }
  .recruit h2:not(.no-line) .ttl--en{
    padding-left: 2px;
  }
}

.recruit .ttl--ja{
  font-weight: 500;
  margin-top: 1em;
  --size-max: 32;
  --size-min: 24;
}
.recruit .ttl--ja > span{
  --size-max: 40;
  --size-min: 28;
}
.recruit .ttl--en{ 
  font-size: var(--font-16);
  letter-spacing: .15em;
  margin-block-start: 0;
  margin-block: .6em;
}
@media screen and (max-width: 810px) {
  .recruit .ttl--en{ 
    margin-block: .3em;
    letter-spacing: .08em;
  }
}

.recruit h3{
  --size-max: 24;
  --size-min: 18;
  line-height: 1.6;
}
.recruit section{ position: relative;}

/* ring */
.ring{
  --size: min(10.41vw, 150px);
  --ring-img: url("../img/recruit/ring.png");
  position: relative;
  width: var(--size);
  aspect-ratio: 1 / 1;
  border-radius: 10vmax;
  background: rgba(255, 240, 110, 0.55);
}
.ring::before,
.ring::after{
  content: "";
  position: absolute;
  inset: 0;
  background: center / contain no-repeat var(--ring-img);
  pointer-events: none;
}
.ring::before{
  transform: translateX(-0.347vw);
}
.ring::after{
  transform: translateX(0.347vw);
}
@media screen and (max-width: 810px) {
  .ring{
    --size: min( 37.33vw, 140px);
  }
  .ring::before{
    transform: translateX(-1.33vw);
  }
  .ring::after{
    transform: translateX(1.33vw);
  }
}
/* ===================
button
=================== */
/* .arrow {
  position: relative;
  display: inline-block;
  width: var(--border-width);
  height: var(--border-size);
  margin: 5px 0;
  background-color: #000000;
}
.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--border-half));
  right: 0;
  width: var(--border-angle);
  height: var(--border-size);
  background-color: var(--color-main);
  transform-origin: calc(100% - var(--border-half)) 50%;
}
.arrow::before {
  transform: rotate(45deg);
}
.arrow::after {
  transform: rotate(-45deg);
} */
.recruit .arrow{
  background-color: #fff;
}
.recruit .arrow::before,
.recruit .arrow::after{ background-color: #fff;}

.btn-pri{
  display: flex;
  align-items: center;
  gap: 1em;
  --size-max: 18;
  --size-min: 16;
  font-weight: 600;
  color: var(--color-org-dark);
  letter-spacing: .1em;
  width: fit-content;
  margin-top: 1em;
}
.btn-pri .line{
  position: relative;
  padding-right: 1.5em;
}
.btn-pri .line::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-org);
  transform: scaleX(1);
  transform-origin: right center;
  /* transition: transform .3s ease; */
}
@media (any-hover: hover) {
  a.btn-pri:hover .line::after{
    animation: line-replay 0.8s forwards;
  }
}
.btn-pri > .r-circle{
  position: relative;
  width: 60px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  transition: .3s ease;
  overflow: visible;
  background-color: var(--color-org);
  transform: scale(1);
  transition: transform .3s ease;
}
@media (any-hover: hover) {
  .btn-pri:hover .r-circle{
    transform: scale(1.1);
  }
}

/* btn sub */
.btn-sec{
  display: flex;
  justify-content: space-between;
  gap: 4em;
  align-items: center;
  --size-max: 18;
  --size-min: 16;
  font-weight: 600;
  color: var(--color-org-dark);
  letter-spacing: .1em;
  padding-block: 1em .5em;
  width: fit-content;
  margin-left: auto;
  position: relative;
}
.btn-sec::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-org);
  transform: scaleX(1);
  transform-origin: right center;
  /* transition: transform .3s ease; */
}
@media (any-hover: hover) {
  a.btn-sec:hover::after,
  a:hover .btn-sec::after {
    animation: line-replay 0.8s forwards;
  }
}
.btn-sec .arrow{
  --border-width: 16px;
  background-color: var(--color-org);
}
.btn-sec .arrow::before,
.btn-sec .arrow::after {
  --border-angle: 10px;
  background-color: var(--color-org);
}



/* btn orange */
.recruit .btn-more{
  --btn-size: 2.4em;
  gap: 10em;
  align-items: center;
  padding: 0 0 .5em;
  margin-block: var(--space-md);
  letter-spacing: .16em;
  --size-max: 24;
  --size-min: 18;
  margin-inline: auto;
}
.recruit .btn-more::before{
  top: -0.2em;
  right: 0;
  width: var(--btn-size);
  height: var(--btn-size);
  background: var(--color-org);
}
@media screen and (max-width: 810px) {
  .recruit .btn-more{
    gap: 5em;
  }
}
.recruit .btn-more::after{
  height: 1px;
}
.recruit .btn-more .arrow{
  right: calc((var(--btn-size) / 2) - (var(--border-width) / 2));
}

.h-rec{
  position: relative;
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-areas: "h-ttl h-img" "h-txt h-img";
  gap: var(--space-sm);
  margin-block: var(--space-md) 0;
  z-index: 1;
}
@media screen and (max-width: 810px) {
  .h-rec{
    grid-template-columns: 1fr;
    grid-template-areas: "h-ttl" "h-img" "h-txt";
  }
}
.h-rec > div:has(img){
  grid-area: h-img;
  margin-right: var(--bleed);
}
.h-rec img{
  overflow: hidden;
  border-radius: var(--rounded-r) 0 0 var(--rounded-r);
}
.h-rec > h1{
  grid-area: h-ttl;
  align-self: start;
}
.h-rec > p{
  grid-area: h-txt;
  margin-top: auto;
  align-self: end;
}
.h-rec .big{
  --size-max: 60;
  --size-min: 40;
  vertical-align: text-bottom;
}

.h-int{
  position: relative;
  z-index: 5;
  margin-bottom: var(--space-md);
}
.h-int .h-int-ttl{
  position: absolute;
  inset: var(--space-md) 0;
}
.h-int .h-int-ttl > *{color: #fff;}
.h-int > div:has(img){
  max-height: 500px;
  overflow: hidden;
}
/* --- leaf --- */
.leaf-box{
  position: relative;
  padding-top: var(--space-xl4);
  margin-top: calc(var(--space-xl) * -1);
}
/* 葉っぱレイヤー */
.leaves{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  perspective: 900px;
}

/* 葉っぱ本体 */
.leaf{
  /* 調整用 */
  --size: 64px;
  --x: 50%;
  --y: 0px;
  --d: 0s;
  --s: 1;

  position: absolute;
  right: var(--x);
  top: var(--y);
  width: var(--size);
  aspect-ratio: 1 / 1;

  transform-style: preserve-3d;
  backface-visibility: visible;
  transform-origin: 50% 50%;

  /* 画像（複数割り当て：下の nth-child で設定） */
  background-image: var(--leaf-img, url("../img/recruit/leaf1.png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0;
  animation: none;
}
.leaves.inview .leaf{
  animation:
    leaf-in   0.9s cubic-bezier(.2,.9,.2,1) var(--d) both,
    leaf-flip 0.6s ease-out calc(var(--d) + 0.9s) forwards;
}

/*  画像を振り分け */
.leaf:nth-child(1){
  --x:36%;
  --y:24px;
  --d:.00s;
  --size: 64px;
  --leaf-img: url("../img/recruit/leaf1.png");
}
.leaf:nth-child(2){
  --x:27%;
  --y:142px;
  --d:.10s;
  --size: 35px;
  --leaf-img: url("../img/recruit/leaf2.png");
}
.leaf:nth-child(3){
  --x:13%;
  --y:90px;
  --d:.22s;
  --size: 76px;
  --leaf-img: url("../img/recruit/leaf3.png");
}
.leaf:nth-child(4){
  --x:1%;
  --y:0;
  --d:.08s;
  --size: 63px;
  --leaf-img: url("../img/recruit/leaf4.png");
}
.leaf:nth-child(5){
  --x:0.8%;
  --y:204px;
  --d:.18s;
  --size: 65px;
  --leaf-img: url("../img/recruit/leaf5.png");
}

@media screen and (max-width: 810px) {
  .leaf{
    top: calc(var(--y) * 0.55);
    width: calc(var(--size) * 0.55);
  }
}

/* =========================
   アニメーション
========================= */

@keyframes leaf-in{
  0%{
    opacity: 0;
    transform: translateY(120px) rotateX(180deg);
    filter: blur(6px);
  }
  70%{
    opacity: 1;
    filter: blur(0px);
  }
  100%{
    opacity: 1;
    transform: translateY(0) rotateX(180deg);
  }
}

@keyframes leaf-flip{
  0%{
    transform: translateY(0) rotateX(180deg);
  }
  50%{
    transform: translateY(0) rotateX(180deg);
  }
  100%{
    transform: translateY(0) rotateX(360deg);
  }
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .leaf{
    animation:none;
    opacity:1;
    filter:none;
  }
}


/* ------------------
  採用TOP
------------------ */
/* --- KV --- */
.rec-hero{
  position: relative;
}
.rec-hero-inner{
  padding-block: var(--space-lg) var(--space-sm);
}
.rec-hero-txt{
  --size-max: 42;
  --size-min: 28;
  line-height: 1.4;
  margin-bottom: 24px;
}
.rec-hero-txt > span + span{
  margin-top: 16px;
}
.rec-hero-sub{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease 1s, transform 0.8s ease 1s;
}
.rec-hero-sub.en{ font-family: var(--font-en);}
.rec-hero-sub.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 一文字ずつのスタイル */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(5px); /* ★ここが垢抜けポイント：少しぼかす */
  transition: 
    opacity 0.3s ease, 
    transform 0.3s ease, 
    filter 0.3s ease,
    letter-spacing .6s ease; /* ★1のトラッキング要素 */
}
/* アニメーション実行時 */
.char.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  letter-spacing: 0.1em; /* ★ふんわり広がる */
}
/* 2行目だけ小さくする */
.sub-line{ display: block;}
.sub-line .char {
  font-size: 0.65em;
}
.sub-line .char.is-visible {
  letter-spacing: .05em;
}

/* --- ZOOM IMG --- */
.zoom-area{
  margin-block: var(--space-sm) var(--space-xl);
  height: calc(100vw * 70 / 216);
}
.zoom-cont{
  position: sticky;
  top: 0;
  height: calc(100vw * 70 / 216);
  width: 100%;
  position: relative;
}
.zoom-mask{
  position: absolute;
  top: 0;               
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}
/* 画像は固定サイズ（100vw）＋高さauto */
.zoom-img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--vw-safe);
  height: auto;
  display: block;
}



.rec-intro {
  position: relative;
  margin-top: var(--space-xl3);
}
.rec-intro-txt{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}
.intro-v{
  position: relative;
  isolation: isolate;
}
@media screen and (min-width: 810.1px) {
  .intro-v{
    text-orientation: mixed;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    display: inline-block;
  }
  .rec-intro-txt .ttl--en{
    writing-mode: vertical-rl;
  }
}
.intro-v > h2{
  margin-block-end: var(--space-md);
}
.intro-v p{
  --size-max: 18;
  --size-min: 16;
  letter-spacing: .05em;
}
.intro-v p > span{
  display: block;
}
.rec-intro-ring{
  position: absolute;
  top: calc(var(--space-md) * -1);
  z-index: -1;
}
@media screen and (min-width: 810.1px) {
  .rec-intro-ring{
    right: calc(var(--space-md) * -1);
  }
}
@media screen and (max-width: 810px) {
  .rec-intro-ring{
    left: var(--space-lg);
  }
}
.rec-intro-txt .ttl--ja{
  margin-top: 0;
  letter-spacing: .16em;
}

.rec-intro-txt span{
  display: block;
}
.rec-intro-img1 img,
.rec-intro-img2 img,
.rec-intro-img3 img{
  overflow: hidden;
  border-radius: var(--rounded-r);
}
@media screen and (min-width: 810.1px) {
  .rec-intro-img1{
    position: absolute;
    right: 7%;
    top: 20%;
    width: 20%;
  }
  .rec-intro-img2{
    position: absolute;
    left: 2%;
    top: 10%;
    width: 20%;
  }
  .rec-intro-img3{
    position: relative;
    margin-left: 13%;
    width: 45%;
  }
}
@media screen and (max-width: 810px) {
  .rec-intro-img{
    margin-inline: 5% 10px;
    display: grid;
    grid-template-columns: 52% 1fr;
    grid-template-areas: "img2 img1" "img3 img3";
    gap: 24px;
  }
  .rec-intro-img1{ grid-area: img1;}
  .rec-intro-img2{
    grid-area: img2;
    align-self: self-end;
  }
  .rec-intro-img3{ 
    grid-area: img3;
    width: 80%;
    margin-inline: auto 10px;
  }
}

.rec-co{
  display: grid;
  grid-template-columns: 1fr 65%;
  gap: var(--space-lg);
  margin-right: var(--bleed);
  position: relative;
  /* isolation: isolate; */
  padding-block: var(--space-lg);
  margin-top: var(--space-xl);
}
.rec-co::after{
  content: "";
  position: absolute;
  top: 0;
  left: var(--bleed);
  border-radius: 0 var(--rounded-r) var(--rounded-r) 0;
  display: block;
  width: 80%;
  height: 100%;
  background-color: var(--color-ylw);
  z-index: 1;
  pointer-events: none;
}
@media screen and (max-width: 810px) {
  .rec-co{
    grid-template-columns: 1fr;
  }
  .rec-co::after{
    width: 100%;
  }
  .rec-co-txt{
    width: 85%;
  }
}
.rec-co > *{z-index: 2;}
.rec-co-txt{
  display: flex;
  flex-direction: column;
}
.rec-co .ttl--en{
  margin-top: 0;
}
.rec-co-txt p{ margin-bottom: 1em;}
.rec-co-txt .btn-pri{
  position: relative;
  margin-top: auto;
  z-index: 10;
}
.rec-co > div:has(img) img{
  overflow: hidden;
  border-radius: var(--rounded-r) 0 0 var(--rounded-r);
}

.rec-int{
  display: grid;
  grid-template-columns: 1fr min(62%, 810px);
  margin-top: var(--space-xl);
}
@media screen and (max-width: 810px) {
  .rec-int{
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .rec-int ul{
    border-top: 1px solid rgba(0,0,0,.2);
    padding-top: var(--space-sm);
  }
  .rec-int .btn-pri{ margin-left: auto;}
}
.rec-int > *{ min-width: 0;}
.rec-int h3{
  margin-bottom: var(--space-md);
}
.rec-int ul li{
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.rec-int ul li a{
  display: grid;
  grid-template-columns: 24% 1fr;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
}
@media screen and (max-width: 810px) {
  .rec-int ul li a{
    grid-template-columns: 1fr;
  }
  .int-thumb{
    width: 50%;
    margin-inline: auto;
  }
}
.rec-int ul li + li{ margin-top: var(--space-sm);}
.int-thumb{
  border-radius: 100vmax;
  aspect-ratio: 1;
  position: relative;
}
.int-thumb > img{
  display: block;
  border-radius: 100vmax;
  filter: drop-shadow(8px 8px 0px #FFDC73);
  z-index: 1;
}
.int-thumb::before,
.int-thumb::after{
  content: "";
  position: absolute;
  display: block;
  inset: 0;
  border-radius: 100vmax;
  border: 1px solid var(--color-org);
  z-index: 2;
}
.int-thumb::before{
  transform: translate(-8px, 0);
}
.int-thumb::after{
  transform: translate(6px, 4px);
}

.int-thumb .is-hover{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .2s ease;
}
@media (any-hover: hover) {
  .rec-int ul li a:hover .is-hover,
  .rec-int ul li a:focus-visible .is-hover{
    opacity: 1;
  }
}
.rec-int ul li a > div > span{
  margin-left: auto;
}
.int-txt p:first-child{
  position: relative;
  padding-left: 1.5em;
  line-height: 1.2;
}
.int-txt p:first-child::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 10px;
  height: 10px;
  background-color: var(--color-org);
  border-radius: 50%;
}
.int-txt p span{
  display: inline-block;
  border-left: 1px solid var(--color-org);
  padding-left: 1em;
  margin-left: 1em;
}
.int-txt p:last-of-type{
  margin-top: 1em;
  font-size: var(--font-18);
}
.rec-story{
  display: grid;
  grid-template-columns: 58% 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
@media screen and (max-width: 810px) {
  .rec-story{
    grid-template-columns: 1fr;
  }
}

.rec-story-txt{
  position: relative;
  display: flex;
  flex-direction: column;
  padding-block: 0 var(--space-sm);
}
.rec-story-txt::before,
.rec-story-txt::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 1px;
  background: url(../img/recruit/bar.png) 0 0 repeat;
  background-size: auto 100%;
}
.rec-story-txt::before{
  top: 0;
}
.rec-story-txt::after{
  bottom:0;
}
@media screen and (max-width: 810px) {
  .rec-story{
    grid-template-columns: 1fr;
  }
}

.rec-story-txt h3{
  --size-max: 32;
  --size-min: 20;
  position: relative;
  padding-block: 2em;
  isolation: isolate;
}
@media screen and (max-width: 810px) {
  .rec-story-txt h3{
    padding-block: 1em;
  }
}
.rec-story-txt h3 span{
  display: inline-block;
  --size-max: 74;
  --size-min: 44;
  font-family: var(--font-script);
  font-weight: 400;
  color: rgba(255, 230, 106, 0.8);
  transform: rotate(-8deg);
  position: absolute;
  top: var(--space-xs);
  right: 0;
  z-index: -1;
}
.rec-story-txt p{
  position: relative;
}
.rec-story-txt > a{
  margin-top: auto;
}
.rec-story-btn{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
@media screen and (max-width: 810px) {
  .rec-story-btn{
    grid-template-columns: 1fr;
  }
}
.rec-story-btn a{
  --size-max: 20;
  --size-min: 16;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  color: var(--color-wht);
  background-color: var(--color-org);
  border: 1px solid var(--color-org);
  border-radius: var(--rounded-r);
  padding: .6em 1em;
  transition: color var(--transition), background-color var(--transition);
}
.rec-story-btn .arrow{
  --border-width: 20px;
}
.rec-story-btn .arrow::before,
.rec-story-btn .arrow::after {
  --border-angle: 12px;
}

@media (any-hover: hover) {
  .rec-story-btn a:hover{
    color: var(--color-org-dark);
    background-color: var(--color-wht);
  }
  .rec-story-btn a:hover .arrow,
  .rec-story-btn a:hover .arrow::before,
  .rec-story-btn a:hover .arrow::after {
    background-color: var(--color-org);
  }
}

.rec-job{
  border-top: 1px solid rgba(25,40,60,.2);
  margin-top: var(--space-md);
}
.rec-job li{
  padding-block: var(--space-xs);
  border-bottom: 1px solid rgba(25,40,60,.2);
}
.rec-job li a{
  display: grid;
  grid-template-areas: "thumb text arrow";
  grid-template-columns: 42% 1fr 50px;
  grid-template-rows: auto;
  gap: 8px var(--space-sm);
  align-items: center;
  position: relative;
  isolation: isolate;
}
@media screen and (max-width: 810px) {
  .rec-job li a{
    grid-template-areas: "thumb thumb" "text arrow";
    grid-template-columns: 1fr 40px;
    grid-template-rows: auto auto;
  }
}
.rec-job .ring{
  position: absolute;
  top: -10px;
  left: 45%;
  z-index: -1;
  opacity: 0;
  transform: scale(.5);
  transition: transform var(--transition), opacity var(--transition);
}
@media (any-hover: hover) {
  .rec-job li a:hover .ring{
    transform: scale(1);
    opacity: 1;
  }
}
@media screen and (max-width: 810px) {
  .rec-job .ring{
    display: none;
  }
}
.rec-job li a div:has(img){
  grid-area: thumb;
  border-radius: var(--rounded-r);
  overflow: hidden;
}
.rec-job li a div:has(img) > img{
  transform: scale(1);
  transition: transform var(--transition);
}
@media (any-hover: hover) {
  .rec-job li a:hover div:has(img) > img{
    transform: scale(1.08);
  }
}
.rec-job .rec-job-txt{
  grid-area: text;
}
@media screen and (min-width: 810.1px) {
  .rec-job .rec-job-txt{
    padding-left: var(--space-md);
  }
}
@media screen and (max-width: 810px) {
  .rec-job li{
    padding-block: var(--space-xs);
  }
}

.rec-job li h3{
  --size-max: 24;
  --size-min: 18;
  font-weight: 500;
  margin-bottom: 0.8em;
}
.rec-job li h3 span{
  display: block;
  font-size: var(--font-16);
  font-family: var(--font-en);
  color: var(--color-org-dark);
  margin-bottom: 0.8em;
}
.rec-job .arrow{
  grid-area: arrow;
  --border-width: 40px;
  background-color: var(--color-org);
  transform: translateX(0);
  transition: transform var(--transition);
}
.rec-job .arrow::before,
.rec-job .arrow::after {
  --border-angle: 24px;
  background-color: var(--color-org);
}
@media (any-hover: hover) {
  .rec-job a:hover .arrow{
    transform: translateX(10px);
  }
}
@media screen and (max-width: 810px) {
  .rec-job li h3{
    margin-bottom: 0.3em;
  }
  .rec-job li h3 span{
    margin-bottom: 0;
  }
  .rec-job .arrow{
    --border-width: 32px;
  }
  .rec-job .arrow::before,
  .rec-job .arrow::after {
    --border-angle: 18px;
  }
}

.rec-howto{
  display: grid;
  grid-template-columns: 1fr 38%;
  gap: var(--space-lg);
  position: relative;
  z-index: 10;
  margin-bottom: var(--space-xl2);
}
@media screen and (max-width: 810px) {
  .rec-howto{
    grid-template-columns: 1fr;
  }
  .rec-howto .btn-pri{
    margin-left: auto;
  }
}
.rec-howto .btn-sec{
  color: var(--color-dark);
  width: 100%;
}

/* --- box --- */
.box-rough {
  position: relative;
  padding: var(--space-sm);
  background: #fff;
  border-radius: var(--rounded-r);
}
.box-rough::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0,0,0,.5); 
  filter: url(#pencil-texture); /* フィルターを適用 */
  pointer-events: none;
  border-radius: var(--rounded-r);
}

.bdr-rough{
  font-weight: 600;
  position: relative;
  padding-bottom: .2em;
  margin-bottom: var(--space-xs);
}
.bdr-rough::before {
  content: "";
  position: absolute;
  inset: 0;
  border-bottom: 1px solid rgba(0,0,0,.5);
  filter: url(#pencil-texture); /* フィルターを適用 */
}

.rec-blog{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.rec-blog li a{
  display: block;
}
@media screen and (max-width: 810px) {
  .rec-blog{
    grid-template-columns: 1fr;
  }
  .rec-blog li{
    padding-bottom: 1em;
    border-bottom: 1px dotted #666;
  }
}
/* @media (any-hover: hover) {
  .rec-blog a:hover p:not([class]){
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: #666;
    text-decoration-thickness: 1px;
  }
} */
.underline{
  display: inline;
  text-decoration: none;
  background:linear-gradient(#666, #666) no-repeat left bottom;
  background-size: 0% 1px;
  transition: background-size var(--transition);
}
@media (any-hover: hover) {
  a:hover .underline{
    background-size: 100% 1px;
  }
}

.rec-blog-img{
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--rounded-r);
}
.rec-blog-date{
  color: var(--color-org-dark);
  margin-top: .5em;
}

/* ------------------
  会社情報 
------------------ */
.rec-msg{
  display: grid;
  grid-template-columns: 36% 1fr;
  gap: var(--space-lg);
}
@media screen and (max-width: 810px) {
  .rec-msg{
    grid-template-columns: 1fr;
  }
}
.rec-msg img{
  border-radius: var(--rounded-r);
  overflow: hidden;
}
@media screen and (max-width: 810px) {
  .rec-msg > .rec-msg-img{
    width: 60%;
    margin-inline: auto;
  }
}
.rec-msg-txt{
  position: relative;
  z-index: 10;
}
.rec-msg-txt h3{ margin-bottom: 1.5em;}
.rec-msg-txt .rec-sign{
  margin-top: 2em;
  line-height: 1.6;
  text-align: right;
}
.rec-msg-txt .rec-sign > div{
  width: 120px;
  margin-left: auto;
  margin-top: 8px;
}

.rec-commitment{
  display: grid;
  grid-template-columns: 1fr 56%;
  gap: var(--space-xl);
  align-items: start;
  position: relative;
  margin-bottom: var(--space-xl2);
  isolation: isolate;
}
@media screen and (max-width: 810px) {
  .rec-commitment{
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}
.rec-commitment::after{
  content: "";
  position: absolute;
  top: 0;
  left: var(--bleed);
  border-radius: 0 var(--rounded-r) var(--rounded-r) 0;
  display: block;
  width: 80%;
  height: 100%;
  background-color: var(--color-ylw);
  z-index: -1;
}
@media screen and (max-width: 810px) {
  .rec-commitment::after{
    width: calc(100% + (var(--bleed) * -1));
    height: calc(100% - 40px);
    top: auto;
  }
}
.rec-commitment-txt{
  padding-block: var(--space-sm) var(--space-md);
}
@media screen and (max-width: 810px) {
  .rec-commitment-txt{
    width: calc(100% + var(--bleed));
  }
  .rec-commitment--r .rec-commitment-txt{ margin-left: auto;}
}
.rec-commitment-txt > span{
  color: var(--color-org-dark);
  display: block;
  font-weight: 600;
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 1em;
}
.rec-commitment-txt > span::before{
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% + 1px);
  transform: translateY(-50%);
  display: block;
  width: 10px;
  height: 10px;
  background-color: var(--color-org-dark);
  border-radius: 50%;
}
.rec-commitment-txt > h3{
  margin-bottom: 1em;
}
.rec-commitment > div:has(img){
  border-radius: var(--rounded-r);
  overflow: hidden;
  margin-top: calc(var(--space-sm) * -1);
}
@media screen and (min-width: 810.1px) {
  .rec-commitment--r > div:has(img){
    order: 1;
  }
  .rec-commitment--r .rec-commitment-txt{
    order: 2;
  }
}
@media screen and (max-width: 810px) {
  .rec-commitment > div:has(img){
    aspect-ratio: 16 / 10;
    position: relative;
  }
  .rec-commitment > div:has(img) img{
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .rec-commitment--l > div:has(img){
    margin-right: var(--bleed);
    border-radius: var(--rounded-r) 0 0 var(--rounded-r);
  }
  .rec-commitment--l img{
    object-position: center;
  }
  .rec-commitment--r > div:has(img){
    margin-left: var(--bleed);
    border-radius: 0 var(--rounded-r) var(--rounded-r) 0;
  }
  .rec-commitment--r img{
    object-position: bottom;
  }
}

.rec-commitment--r{
  display: grid;
  grid-template-columns: 56% 1fr;
}
@media screen and (max-width: 810px) {
  .rec-commitment--r{
    grid-template-columns: 1fr;
  }
}

.rec-commitment--r::after{
  left: auto;
  right: var(--bleed);
  border-radius: var(--rounded-r) 0 0 var(--rounded-r);
}

.rec-outlook-img{
  width: 60%;
  margin: var(--space-sm) auto 0;
}
@media screen and (max-width: 810px) {
  .rec-outlook-img{ width: 100%;}
}
/* ------------------
  人を知る
------------------ */
.rec-staff{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
}
.rec-staff li{
  display: flex;
  flex-direction: column;
}
.staff-thumb{
  width: 70%;
  margin-inline: auto;
  border-radius: 100vmax;
  aspect-ratio: 1;
  position: relative;
}
@media screen and (max-width: 810px) {
  .staff-thumb{
    width: 60%;
  }
}
.staff-thumb > img{
  display: block;
  border-radius: 100vmax;
}
.staff-thumb.nophoto{
  border: 1px solid var(--color-org);
  background-color: #fff;
  display: grid;
  place-items: center;
}
.staff-thumb.nophoto > img{
  width: 35%;
  border-radius: 0;
}
.staff-thumb::before{
  content: "";
  position: absolute;
  display: block;
  inset: 0;
  transform: translate(-8px, 0);
  border-radius: 100vmax;
  border: 1px solid var(--color-org);
  z-index: 2;
}
.staff-box{
  margin-top: calc(var(--space-md) * -1);
  padding: var(--space-xl) 24px 24px;
  background-color: #fff;
  border-radius: var(--rounded-r);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.staff-box h3{
  --size-max: 16;
  --size-min: 14;
  position: relative;
  padding-bottom: 1em;
  margin-bottom: 1em;
  text-align: center;
}
.staff-box h3::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px);
  display: block;
  width: 80px;
  height: 1px;
  background-color: var(--color-org);
}
.staff-box h3 > span{ display: block;}
.staff-box p{
  --size-max: 18;
  --size-min: 16;
  font-weight: 500;
  line-height: 1.6;
}
.staff-box dl{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5em;
  align-items: start;
  padding-block: 8px;
  border-top: 1px dotted #B6B6B6;
  border-bottom: 1px dotted #B6B6B6;
  line-height: 1.4;
  margin-top: 1em;
}
.staff-box dl dt{
  color: #fff;
  font-weight: 600;
  text-align: center;
  letter-spacing: .05em;
  background-color: var(--color-org);
  padding: 0 1em;
  border-radius: 100vmax;
}
.staff-box dl dd{
  padding: 0 .5em;
}
.staff-box .btn-sec{
  --size-max: 16;
  letter-spacing: 0;
}

.env-data-wrap{
  padding: 20px;
  background-color: rgba(220,190, 0, .08);
  border-radius: var(--rounded-r);
  margin-bottom: var(--space-lg);
}
.env-data > li{
  padding: 16px var(--space-xs);
  background-color: #fff;
  border-radius: var(--rounded-r);
}
.env-data h4{
  display: block;
  width: fit-content;
  padding-bottom: 4px;
  border-bottom: 1px solid #919191;
}
.env-data p{
  --size-max: 32;
  --size-min: 24;
  color: var(--color-org);
  line-height: 1.4;
}
.env-data p > span{
  --size-max: 60;
  --size-min: 32;
  font-weight: 600;
  display: inline-block;
}
.env-data p > span:not(.nomg){
  margin-inline: .1em;
}
.env-data.data-co{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 10px;
}
.env-data.data-co li{
  display: grid;
  grid-template-columns: 1fr 32%;
}

.env-data.data-biz{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 10px;
}
.env-data.data-biz li{
  display: grid;
  grid-template-columns: 1fr 27%;
  align-items: center;
}
@media screen and (max-width: 990px) {
  .env-data.data-biz{
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  }
}
.data-txt{
  display: grid;
  grid-template-rows: auto 1fr;
}
.data-txt h4{
  align-self: start;
}
.data-txt p{
  align-self: center;
}
.env-data.data-co li > div:has(img){
  align-self: center;
}


.env-story li{
  display: grid;
  grid-template-columns: 28% 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "env-img env-h" "env-img env-txt";
  gap: 0 var(--space-lg);
  align-items: start;
  border-bottom: 1px solid #A5A5A5;
  padding-block: var(--space-sm) calc(var(--space-sm) + 10px);
}
.env-story li dl{
  grid-area: env-h;
  display: flex;
  align-items: center;
  gap: 1em;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.env-story li dl dt{
  color: var(--color-wht);
  background: var(--color-org);
  line-height: 1;
  text-align: center;
  padding: .2em .8em;
}
@media screen and (max-width: 810px) {
  .env-story li{
    grid-template-columns: 40% 1fr;
    grid-template-areas: "env-img env-h" "env-txt env-txt";
    gap: var(--space-md) var(--space-lg);
  }
  .env-story li dl{
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;
    gap: .5em;
  }
  .env-story li dl dt{
    text-align: left;
  }
}
.env-story li > p{
  grid-area: env-txt;
}
.env-story-thumb{
  grid-area: env-img;
  border-radius: var(--rounded-r);
  position: relative;
}
.env-story-thumb > img{
  display: block;
  border-radius: var(--rounded-r);
}
.env-story-thumb::before{
  content: "";
  position: absolute;
  display: block;
  inset: 0;
  transform: translate(8px, 8px);
  border-radius: var(--rounded-r);
  border: 1px solid var(--color-org);
  z-index: 2;
}

.env-policy{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.env-policy .ill-thumb{
  width: 70%;
  margin-bottom: 1em;
}
@media screen and (max-width: 810px) {
  .env-policy{
    grid-template-columns: 1fr;
  }
  .env-policy .ill-thumb{
    width: 50%;
  }
}
  
.ill-thumb{
  margin-inline: auto;
  border-radius: 100vmax;
  aspect-ratio: 1;
  position: relative;
}
.ill-thumb > img{
  display: block;
  border-radius: 100vmax;
}
.ill-thumb::before,
.ill-thumb::after{
  content: "";
  position: absolute;
  display: block;
  inset: 0;
  border-radius: 100vmax;
  border: 1px solid var(--color-org);
  z-index: 2;
}
.ill-thumb::before{
  transform: translate(-8px, 0);
}
.ill-thumb::after{
  transform: translate(4px, 4px);
}

.env-benefits{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.env-benefits dt{
  font-size: var(--font-18);
}
.env-benefits dd{
  display: grid;
  grid-template-columns: 1fr 20%;
  gap: var(--space-xs);
}
.env-benefits dd > div{
  align-self: center;
}
@media screen and (max-width: 810px) {
  .env-benefits{
    grid-template-columns: 1fr;
  }
  .env-benefits dd{
    grid-template-columns: 1fr;
  }
  .env-benefits dd > div{
    width: 30%;
    margin-inline: auto;
  }
}
/* ------------------
  仕事を知る
------------------ */
.rec-work{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.rec-work li{
  border-radius: var(--rounded-r);
  overflow: hidden;
}
@media screen and (max-width: 810px) {
  .rec-work{
    grid-template-columns: 1fr;
  }
  .rec-work li{
    aspect-ratio: 3 / 1;
  }
  .rec-work li a{
    height: 100%;
  }
  .rec-work li a > div:has(img){
    height: 100%;
  }
  .rec-work li a > div:has(img) > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
.rec-work li a{
  display: block;
  position: relative;
  isolation: isolate;
}

/* 画像ズーム（hover時） */
.rec-work li a > div:has(img){
  overflow: hidden;
}
.rec-work li a > div:has(img) > img{
  transform: scale(1);
  transition: transform var(--transition);
}
/* overlay（黒） */
.rec-work li a::before{
  content:"";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,.45);
  z-index: 1;
  pointer-events: none;
  transition: background-color var(--transition);
}
/* 枠線（擬似要素） */
.rec-work li a::after{
  content:"";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--rounded-r);
  z-index: 3;
  pointer-events: none;
  transition: opacity var(--transition);
}

@media (any-hover: hover) {
  .rec-work li a:hover::before,
  .rec-work li a:focus-visible::before{
    background-color: rgba(0,0,0,.25);
  }
  .rec-work li a:hover > div:has(img) > img,
  .rec-work li a:focus-visible > div:has(img) > img{
    transform: scale(1.08);
  }
}
.rec-work-box{
  position: absolute;
  inset: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5em;
  text-align: center;
  z-index: 4;
  pointer-events: none;
}
.rec-work-box p{
  --size-max: 24;
  --size-min: 18;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: .2em;
}
.rec-work-box > span{
  display: block;
  width: 20px;
  height: auto;
}

.rec-dept li{
  display: flex;
  gap: var(--space-lg);
  scroll-margin-top: calc(var(--header-h) + var(--space-lg));
}
.rec-dept li:not(:last-child){
  border-bottom: 1px solid #A5A5A5;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
}
@media screen and (min-width: 810.1px) {
  .rec-dept li:nth-child(2n){
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 810px) {
  .rec-dept li{
    flex-direction: column;
  }
}
.rec-dept h3 .ttl--en{
  color: var(--color-org-dark);
  letter-spacing: .1em;
}
.rec-dept h3 .ttl--ja{
  --size-max: 24;
  --size-min: 18;
  font-weight: 600;
}
.rec-dept h3 + p{
  margin-block: 1em 1.5em;
}  
.dept-img > img{
  border-radius: var(--rounded-r);
  overflow: hidden;
}
@media screen and (max-width: 810px) {
  .dept-img > img{
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 28%;
  }
}
.dept-txt{
  position: relative;
  isolation: isolate;
}
@media screen and (min-width: 810.1px) {
  .dept-img{
    flex: 0 0 35%;
    max-width: 35%;
  }
  .dept-txt{
    flex: 0 0 calc(65% - var(--space-lg));
    max-width: calc(65% - var(--space-lg));
    padding-left: var(--space-lg);
  }
}
@media screen and (max-width: 810px) {
  .dept-txt{
    padding-left: 0;
  }
}
.rec-dept-ring{
  position: absolute;
  top: calc(var(--space-xs) * -1);
  left: 0;
  z-index: -1;
}
.rec-chart {
  padding: var(--space-md) var(--space-sm) 0;
}
@media screen and (max-width: 810px) {
  .rec-dept-ring{
    top: calc(var(--space-md) * -1);
    left: -5%;
  }
  .rec-chart {
    padding: var(--space-sm) 0 0;
  }
}

/* ------------------
  働き方を知る
------------------ */
.rec-full li{
  display: grid;
  grid-template-columns: 1fr 23%;
  gap: var(--space-xs) var(--space-lg);
  align-items: center;
}
.rec-full li + li{
  margin-top: 60px;
}
.rec-full li:nth-child(2n){
  grid-template-columns: 23% 1fr;
}
@media screen and (max-width: 810px) {
  .rec-full li,
  .rec-full li:nth-child(2n){
    grid-template-columns: 1fr;
  }
  .rec-full .ill-thumb{
    width: 50%;
    margin-inline: auto;
  }
}
@media screen and (min-width: 810.1px) {
  .rec-full li:nth-child(2n) > div:first-child{
    order: 2;
  }
}
.rec-full h3{
  --size-max:24;
  --size-min: 18;
}
.rec-full h3 span{
  --size-max: 40;
  --size-min: 24;
}
.rec-part li{
  display: grid;
  grid-template-columns: 1fr 23%;
  grid-template-rows: auto 1fr;
  grid-template-areas: "part-ttl part-img" "part-txt part-img";
  gap: var(--space-xs) var(--space-lg);
  margin-bottom: 60px;
}
.rec-part h3{
  --size-max: 24;
  --size-min: 18;
  grid-area: part-ttl;
}
.rec-part h3 span{
  font-size: 0.8em;
}
.rec-part p{
  grid-area: part-txt;
}
.rec-part div{
  grid-area: part-img;
  aspect-ratio: 1;
  border: 1px solid var(--color-ylw);
  border-radius: var(--rounded-r);
  overflow: hidden;
}
@media screen and (max-width: 810px) {
  .rec-part li{
    grid-template-columns: 1fr 30%;
    grid-template-areas: "part-ttl part-img" "part-txt part-txt";
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
  }
  .rec-part h3{
    margin-bottom: 0;
  }
}

.rec-disc{
  position: relative;
  padding-left: 1.5em;
  line-height: 1.6;
  margin-bottom: 1em;
}
.rec-disc::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  transform: translateY(0);
  display: block;
  width: 10px;
  height: 10px;
  background-color: var(--color-org);
  border-radius: 50%;
}

.rec-style{
  margin-top: var(--space-md);
  padding: var(--space-sm) 8px;
  background: rgba(255, 242, 129, 0.4);
  border-radius: var(--rounded-r);
  position: relative;
}
.rec-style::before{
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid var(--color-org);
  border-radius: var(--rounded-r);
  transform: translate(-8px, -8px);
}
.rec-style p{
  text-align: center;
  --size-max: 20;
  --size-min: 16;
  position: relative;
  z-index: 5;
}
.rec-style p span{
  --size-max: 32;
  --size-min: 21;
}
.rec-style > span{
  --box-size: 0;
  position: absolute;
  display: block;
  height: var(--box-size);
  width: var(--box-size);
  background: rgba(255, 242, 129, 0.4);
  border-radius: var(--rounded-r);
}
.rec-style > span.box1{
  --box-size: 90px;
  left: 10%;
  bottom: calc(var(--space-sm) * -1);
}
.rec-style > span.box2{
  --box-size: 102px;
  left: 21%;
  top: calc(var(--space-sm) * -1);
}
.rec-style > span.box3{
  --box-size: 118px;
  right: 10%;
  bottom: calc(var(--space-md) * -1);
}
@media screen and (max-width: 810px) {
  .rec-style > span{
    height: calc(var(--box-size) * 0.5);
    width: calc(var(--box-size) * 0.5);
  }
}
/* ------------------
  募集要項
------------------ */
.recinfo-wrap{
  position: relative;
  margin-top: var(--space-xl);
}
.recinfo-wrap > picture{
  display: block;
  width: 100%;
}
/* PC：高さを固定してレスポンシブでも上限を超えないようにする */
@media screen and (min-width: 810.1px) {
  .recinfo-wrap > picture{
    max-height: 420px;
    overflow: hidden;
  }
  .recinfo-wrap > picture img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 見切れている側（下側）を見せる */
    object-position: center center;
  }
}
.recinfo-wrap > p{
  position: absolute;
  --size-max: 32;
  --size-min: 20;
  font-weight: 600;
  letter-spacing: .24em;
  line-height: 1.8;
  color: var(--color-wht);
}
@media screen and (min-width: 810.1px) {
  .recinfo-wrap > p{
    left: calc(var(--bleed) * -1);
    bottom: var(--space-md);
  }
  .recinfo-box{
    position: absolute;
    width: 55%;
    overflow: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    padding-inline: 12% 8%;
    display: grid;
    align-items: center;
    isolation: isolate;
  }
  .recinfo-box::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform:  translateY(-50%);
    display: block;
    width: 140%;
    aspect-ratio: 1;
    background: var(--color-ylw);
    border-radius: 100vmax;
    z-index: -1;
  }
}

@media screen and (max-width: 810px) {
  .recinfo-wrap > p{
    left: calc(var(--bleed) * -1);
    top: 42vw;
  }
  .recinfo-box{
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-block: 13vw 10%;
    padding-inline: 12%;
    display: grid;
    align-items: center;
    isolation: isolate;
    margin-top: -26.66vw;
  }
  .recinfo-box::after{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform:  translateX(-50%);
    display: block;
    width: 200%;
    aspect-ratio: 1;
    background: var(--color-ylw);
    border-radius: 100vmax;
    z-index: -1;
  }
}

.recinfo-cont h2{ margin-bottom: var(--space-sm);}
.recinfo-cont ul li + li{
  margin-top: var(--space-xs);
}
.recinfo-cont li a{
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1em;
  position: relative;
}
.recinfo-cont li a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-dark);
  transform: scaleX(1);
  transform-origin: right center;
  /* transition: transform .3s ease; */
}
@media (any-hover: hover) {
  .recinfo-cont li a:hover::after{
    animation: line-replay 0.8s forwards;
  }
}
.recinfo-cont li p{
  --size-max: 28;
  --size-min: 20;
  line-height: 1.6;
  letter-spacing: .16em;
}
.recinfo-cont li a > p span{
  display: block;
  font-weight: 600;
  letter-spacing: 0em;
  --size-max: 16;
  --size-min: 12;
}

.recinfo-cont li a > div{
  position: relative;
  width: min(80px,5.55vw);
  height: min(80px,5.55vw);
  display: grid;
  place-items: center;
  isolation: isolate;
}
@media screen and (max-width: 810px) {
  .recinfo-cont li a > div{
    width: min(60px,17.066vw);
    height: min(60px,17.066vw);
  }
}
.recinfo-cont li a > div::before{
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  background: var(--color-org);
  transform: scale(1);
  transition: transform var(--transition);
  z-index: -1;
}
@media (any-hover: hover) {
  .recinfo-cont li a:hover > div::before{
    transform: scale(1.1);
  }
}
.recinfo-cont li a > div span{
  display: block;
  width: 13px;
}

.rec-detail {
  display: grid;
  grid-template-columns: max(7em, 20%) 1fr;
  border-top: 1px solid #555;
}
.rec-detail dt,
.rec-detail dd{
  font-weight: 400;
  padding: 1em 1.5em;
  border-bottom: 1px solid #555;
}
.rec-detail dt{ background-color: #FFFACD;}
@media screen and (max-width: 810px) {
  .rec-detail { display: block;}
  .rec-detail dt{ border-bottom: none;}
  .rec-detail dt,
  .rec-detail dd{ padding: .5em 1em;}
}
.rec-jobsite{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.rec-jobsite li:first-child a{
  display: grid;
  align-items: center;
  height: 100%;
  padding-inline: 1em;
  background: #fff;
  border: 1px solid #D9D9D9;
  border-radius: 100vmax;
  transition: border var(--transition);
}
.rec-jobsite li:first-child a > img{
  width: 30%;
  margin-inline: auto;
}
@media (any-hover: hover) {
  .rec-jobsite li a:hover{
    border: 1px solid var(--color-org);
  }
}
@media screen and (max-width: 810px) {
  .rec-jobsite{
    grid-template-columns: 1fr;
  }
  .rec-jobsite li:first-child a{
    padding: 8px 1em;
  }
  .rec-jobsite li:first-child a > img{
    width: 50%;
  }
}
h1.entry{
  margin-block: var(--space-lg) 0;
  isolation: isolate;
}
.btn-entry{
  margin-inline: auto;
  --size-max: 20;
  --size-min: 16;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  text-align: center;
  font-weight: 800;
  color: var(--color-wht);
  background-color: var(--color-org);
  border: 1px solid var(--color-org);
  border-radius: 100vmax;
  padding: .6em 2em;
  transition: color var(--transition), background-color var(--transition);
}
/* .btn-entry .arrow{
  --border-width: 20px;
}
.btn-entry .arrow::before,
.btn-entry .arrow::after {
  --border-angle: 12px;
} */
@media (any-hover: hover) {
  .btn-entry:hover{
    color: var(--color-org-dark);
    background-color: var(--color-wht);
  }
  /* .btn-entry:hover .arrow,
  .btn-entry:hover .arrow::before,
  .btn-entry:hover .arrow::after {
    background-color: var(--color-org);
  } */
}

.rec-profile{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  isolation: isolate;
}
@media screen and (max-width: 810px) {
  .rec-profile{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.rec-profile > p{
  --size-max: 32;
  --size-min: 20;
  font-weight: 500;
}
.rec-profile .profile-box{
  background-color: #FFF281;
  padding: var(--space-sm) 100px;
  border-radius: var(--rounded-r) 0 0 var(--rounded-r);
  margin-right: var(--bleed);
}
@media screen and (max-width: 810px) {
  .rec-profile .profile-box{
    padding: 16px 24px;
    margin-left: 16%;
  }
}
.profile-box dt{
  --size-max: 18;
  --size-min: 14;
}
.profile-box dt > span{
  border-left: 1px solid #EADD65;
  margin-left: .5em;
  padding-left: .5em;
}
.profile-box dd{
  --size-max: 32;
  --size-min: 20;
  line-height: 1;
}
.profile-box p{
  --size-max: 16;
  --size-min: 14;
  border-top: 1px solid var(--color-dark);
  padding-top: .2em;
  margin-top: 1em;
}
h3.int-lead{
  font-family: "Zen Kurenaido", sans-serif;
  --size-max: 32;
  --size-min: 20;
  width: fit-content;
  font-weight: 400;
  border-bottom: 1px solid var(--color-dark);
  padding-bottom: .2em;
  margin: var(--space-xl2) auto var(--space-lg);
}
.int-box{
  display: grid;
  gap: var(--space-xl2);
  align-items: start;
}

.int-box.box1{
  grid-template-columns: 40% 1fr;
}
.int-box.box2{
  grid-template-columns: 1fr 40%;
}
@media screen and (max-width: 810px) {
  .int-box.box1,
  .int-box.box2{
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 810.1px) {
  .int-box.box2 > div:has(img){
    order: 2;
  }
}
.int-box div:has(img){
  position: relative;
  isolation: isolate;
}
.int-box div:has(img)::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255,242,129,.4);
  border-radius: var(--rounded-r);
  z-index: 0;
}
.int-box.box1 div:has(img)::before{
  transform: translate(30px, 30px);
}
.int-box.box2 div:has(img)::before{
  transform: translate(-30px, 30px);
}
@media screen and (max-width: 810px) {
  .int-box div:has(img){
    width: calc(100% - 24px);
  }
  .int-box.box1 div:has(img)::before,
  .int-box.box2 div:has(img)::before{
    transform: translate(24px, 24px);
  }
}
.int-box div:has(img) > img{
  position: relative;
  z-index: 1;
  border-radius: var(--rounded-r);
}

.int-box dl dt{
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: var(--space-sm);
}
.int-box dl dt::before{
  content: "Q";
  font-family: var(--font-serif);
  font-size: var(--font-24);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 100vmax;
  background-color: var(--color-org);
  flex: 0 0 48px;
}
.int-box dl dd + dt{ margin-top: var(--space-md);}
.skd-box{
  width: 80%;
  margin-inline: auto;
  border-radius: var(--rounded-r);
  padding: var(--space-lg);
  position: relative;
  z-index: 0;
}
.skd-box::before{
  content: "";
  position: absolute;
  inset: 0;                     
  border-radius: inherit;  
  border: 1px solid rgba(0,0,0,.5);
  filter: url(#pencil-texture); 
  pointer-events: none; 
  z-index: -1;  
}
@media screen and (max-width: 810px) {
  .skd-box{
    width: 100%;
    padding: var(--space-sm) 16px;
  }
}

.rec-timeline{
  --timeline-col-w: 6em;
  font-family: var(--font-sans);
  display: grid;
  grid-template-columns: var(--timeline-col-w) 1fr;
  gap: var(--space-md);
  position: relative;
  align-items: start;
}
.rec-timeline::before{
  content: "";
  position: absolute;
  left: calc(var(--timeline-col-w) / 2);
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: var(--color-org);
  z-index: 0;
}
.rec-timeline dt{
  color: #fff;
  background-color: var(--color-org);
  border-radius: 100vmax;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0.5em 0;
  text-align: center;
  font-weight: 700;
  line-height: 1;
}
.rec-timeline dd{
  margin: 0;
  align-self: start;
  line-height: 1.6;
}
.rec-timeline dd > h3{
  --size-max: 18;
  --size-min: 16;
  color: var(--color-org-dark);
}
.rec-timeline div:has(img){
  width: 35%;
  border-radius: var(--rounded-r);
  overflow: hidden;
}
.rec-timeline dd > h3 + div,
.rec-timeline dd > p + div,
.rec-timeline dd > p + h3{
  margin-top: 0.75em;
}
@media screen and (max-width: 810px) {
  .rec-timeline{
    --timeline-col-w: 4.5em;
  }
  .rec-timeline dt{
    padding: 0.3em 0;
  }
  .rec-timeline div:has(img){
    width: 100%;
  }
}
.dayoff{
  display: grid;
  grid-template-columns: 1fr 25%;
  background: url(../img/recruit/bg_rec.jpg) ;
  overflow: hidden;
  border-radius: var(--rounded-r);
  margin-top: var(--space-lg);
}
.dayoff .dayoff-txt{
  padding:  var(--space-xs) var(--space-sm) var(--space-sm);
}
.dayoff > div:has(img){
  width: 100%;
  min-height: 0;
  align-self: stretch;
  position: relative;
  overflow: hidden;
}
.dayoff > div:has(img) img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 810px) {
  .dayoff{
    grid-template-columns: 1fr;
  }
  .dayoff > div:has(img){
    aspect-ratio: 2 / 1;
    min-height: 160px;
  }
}
.fukidashi {
  position: relative;
  width: fit-content;
  padding: 4px 40px;
  margin-bottom: 1em;
}
.fukidashi::before,
.fukidashi::after {
  content: "";
  position: absolute;
  height: 50%;
  bottom: 0;
  border: 1px solid #333333;
  border-top: none;
}
.fukidashi::before{
  left: 0;
  width: 45%;
  border-right: none;
  border-bottom-left-radius: 50px; /* 左下の角丸 */
}
.fukidashi::after{
  right: 0;
  width: 45%;
  border-left: none;
  border-bottom-right-radius: 50px; /* 右下の角丸 */
}
.fukidashi span{
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  width: 16px;
  height: 1px;
  background-color: #333333;
  rotate: 50deg;
  translate: -50% 0;
}

.int-msg{
  display: grid;
  grid-template-columns: 1fr 28%;
  gap: var(--space-lg);
  align-items: center;
  margin-top: calc(var(--space-sm) * -1);
}
.int-msg > p{
  font-family: "Zen Kurenaido", sans-serif;
  --size-max: 22;
  --size-min: 18;
}
.int-msg > div{
  border-radius: 100vmax;
  aspect-ratio: 1;
  position: relative;
}
.int-msg > div > img{
  display: block;
  border-radius: 100vmax;
}
.int-msg > div::before,
.int-msg > div::after{
  content: "";
  position: absolute;
  display: block;
  inset: 0;
  border-radius: 100vmax;
  border: 1px solid var(--color-org);
  z-index: 2;
}
.int-msg > div::before{
  transform: translate(-8px, -10px);
}
.int-msg > div::after{
  transform: translate(8px, 10px);
}
@media screen and (max-width: 810px) {
  .int-msg{
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 0;
  }
  .int-msg > p{ order: 2;}
  .int-msg > div{
    order: 1;
    width: 70%;
    margin-inline: auto;
  }
  .int-msg > div::before{
    transform: translate(-6px, -6px);
  }
  .int-msg > div::after{
    transform: translate(6px, 6px);
  }
}
.int-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
.int-list a{
  display: grid;
  grid-template-columns: 60% 1fr;
  gap: 1em;
}
.int-list a dd{
  --size-max: 24;
  --size-min: 18;
  line-height: 1.4;
}
.int-list a div{
  overflow: hidden;
  border-radius: var(--rounded-r);
}
.int-list a img{
  filter: saturate(0.3);
  transform: scale(1);
  transition: transform var(--transition), filter var(--transition);
}
.int-list a:hover img{
  filter: saturate(1);
  transform: scale(1.05);
}
/* ------------------
フッター
------------------ */
footer.rec-ft{
  background-color: var(--color-wht);
  padding-block: var(--space-sm);
}

.rec-ft .ft-menu{
  font-size: var(--font-14);
  display: flex;
  justify-content:flex-end;
  flex-wrap: wrap;
  gap: 1em 2em;
  margin-bottom: var(--space-md);
}
@media screen and (max-width: 810px) {
  .rec-ft .ft-menu{
    justify-content: space-around;
  }
  .rec-ft .ft-btm{
    margin-bottom: 40px;
  }
}

.rec-ft .ft-btm{
  margin-top: var(--space-md);
}
.rec-ft .ft-btn li a{
  border: 1px solid var(--color-org);
  transition: all var(--transition);
}
.rec-ft .ft-btn li:first-child a{ background-color: var(--color-org);}
.rec-ft .ft-btn li:last-child a{ 
  color: var(--color-org-dark); 
  background-color: var(--color-wht);
}
@media (any-hover: hover) {
  .rec-ft .ft-btn li:first-child a:hover{ color: var(--color-dark); border: 1px solid var(--color-ylw); background-color: var(--color-ylw);}
  .rec-ft .ft-btn li:last-child a:hover{ color: var(--color-wht); background-color: var(--color-org);}
}
@media screen and (max-width: 810px) {
  .rec-ft .ft-btn li a{
    font-size: var(--font-14);
  }
}