/* assets/css/corp/recruit-group.css  (STORE RECRUIT: MYTHOS / AKANE) */
@charset "UTF-8";

/* =====================================================
RECRUIT STORE (MYTHOS / AKANE)
===================================================== */

/* =====================================================
Base / Scope Guard
===================================================== */

:is(.page-recruit, .page-recruit-group){

  --rs-ink:#111;
  --rs-muted:rgba(0,0,0,.62);

  --rs-line:rgba(0,0,0,.12);
  --rs-line-soft:rgba(0,0,0,.08);

  --rs-body:var(--corp-body,14px);
  --rs-lh:var(--corp-lh,2.28);
  --rs-track:var(--corp-track,.06em);

  --rs-en-track:var(--corp-en-track-wide,.18em);

  color:var(--rs-ink);

  padding-top:0 !important;
  margin-top:0 !important;

}

:is(.page-recruit, .page-recruit-group).l-main{
  padding-top:0 !important;
}

/* =====================================================
container
===================================================== */

:is(.page-recruit, .page-recruit-group) .corp-container{

  width:min(100%,var(--corp-max,1180px));
  margin:0 auto;

  padding-left:var(--corp-pad-pc,40px);
  padding-right:var(--corp-pad-pc,40px);

}

@media (max-width:768px){

  :is(.page-recruit, .page-recruit-group) .corp-container{

    padding-left:var(--corp-pad-sp,18px);
    padding-right:var(--corp-pad-sp,18px);

  }

}

/* =====================================================
MV
===================================================== */

:is(.page-recruit, .page-recruit-group) .recruit-mv{

  position:relative;
  overflow:hidden;
  background:#000;
  margin-top:0 !important;

}

:is(.page-recruit, .page-recruit-group) .recruit-mv__media{

  position:relative;

  height:38vh;
  min-height:320px;
  max-height:520px;

}

@media (max-width:768px){

  :is(.page-recruit, .page-recruit-group) .recruit-mv__media{

    height:34vh;
    min-height:220px;

  }

}

:is(.page-recruit, .page-recruit-group) .recruit-mv__media img{

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  display:block;

  filter:brightness(1.12) saturate(1.03) contrast(1.02);

  animation:recruitZoom 36s ease-in-out infinite alternate;

  will-change:transform;

}

@media (prefers-reduced-motion:reduce){

  :is(.page-recruit, .page-recruit-group) .recruit-mv__media img{

    animation:none !important;
    transform:scale(1.01);

  }

}

@keyframes recruitZoom{

  from{transform:scale(1.01);}
  to{transform:scale(1.035);}

}

:is(.page-recruit, .page-recruit-group) .recruit-mv__media::after{

  content:"";
  position:absolute;
  inset:0;

  background:rgba(0,0,0,.08);

  pointer-events:none;

}

/* MV text hidden */

:is(.page-recruit, .page-recruit-group) .recruit-mv__inner,
:is(.page-recruit, .page-recruit-group) .hero-title{

  display:none !important;

}

/* glass fade */

:is(.page-recruit, .page-recruit-group) .recruit-mv::before{

  content:"";

  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:70px;

  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0)0%,
    rgba(255,255,255,0.14)70%,
    rgba(255,255,255,0.22)100%
  );

  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);

  pointer-events:none;
  z-index:3;

}

/* =====================================================
Intro
===================================================== */

:is(.page-recruit, .page-recruit-group) .recruit-lead{
  padding:84px 0 62px;
}

@media (max-width:768px){

  :is(.page-recruit, .page-recruit-group) .recruit-lead{
    padding:64px 0 48px;
  }

}

:is(.page-recruit, .page-recruit-group) .corp-section__head{

  text-align:center;
  margin-bottom:34px;

}

:is(.page-recruit, .page-recruit-group) .corp-eyebrow{

  display:block;

  margin:0 0 14px;

  font-family:var(--font-en,"Cinzel",serif);

  font-weight:500;
  font-size:10px;

  letter-spacing:var(--rs-en-track);
  text-transform:uppercase;

  color:rgba(0,0,0,.45);

}

:is(.page-recruit, .page-recruit-group) .corp-title{

  margin:0;

  font-family:var(--font-jp,"Cormorant Garamond",serif);

  font-weight:400;

  font-size:clamp(20px,2.2vw,30px);

  letter-spacing:.08em;
  line-height:1.35;

  position:relative;
  display:inline-block;

  padding-bottom:18px;

}

:is(.page-recruit, .page-recruit-group) .corp-title::after{

  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  transform:translateX(-50%);

  width:62px;
  height:1px;

  background:rgba(0,0,0,.12);

}

/* =====================================================
TOC
===================================================== */

:is(.page-recruit, .page-recruit-group) ul.work{

  list-style:none;
  padding:0;

  margin:34px auto 0;

  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:18px 22px;

  max-width:980px;

}

@media (max-width:768px){

  :is(.page-recruit, .page-recruit-group) ul.work{

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:12px 14px;

    margin-top:26px;

  }

}

:is(.page-recruit, .page-recruit-group) ul.work li{

  margin:0;
  padding:0;

  text-align:center;

}

:is(.page-recruit, .page-recruit-group) ul.work a{

  display:inline-block;

  padding:12px 2px;

  font-family:var(--font-en,"Cinzel",serif);

  font-weight:500;
  font-size:10px;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:rgba(0,0,0,.70);

  border-bottom:1px solid rgba(0,0,0,.16);

  transition:opacity .25s ease,border-color .25s ease;

  opacity:.7;

}

:is(.page-recruit, .page-recruit-group) ul.work a.is-active{

  opacity:1;

  border-bottom-color:rgba(0,0,0,.42);

}

/* =====================================================
Works sections
===================================================== */

:is(.page-recruit, .page-recruit-group) section.works{
  padding:92px 0;
}

@media (max-width:768px){

  :is(.page-recruit, .page-recruit-group) section.works{
    padding:72px 0;
  }

}

:is(.page-recruit, .page-recruit-group) .works__lead{

  margin:0 auto 30px;

  max-width:980px;

  color:var(--rs-muted);

  font-size:var(--rs-body);

  line-height:var(--rs-lh);

  letter-spacing:var(--rs-track);

}

/* =====================================================
Table
===================================================== */

:is(.page-recruit, .page-recruit-group) table.works__table{

  width:100%;
  border-collapse:collapse;

  border-top:1px solid var(--rs-line-soft);
  border-bottom:1px solid var(--rs-line-soft);

}

:is(.page-recruit, .page-recruit-group) table.works__table th,
:is(.page-recruit, .page-recruit-group) table.works__table td{

  padding:18px 0;

  vertical-align:top;

  border-bottom:1px solid var(--rs-line-soft);

}

:is(.page-recruit, .page-recruit-group) table.works__table th{

  width:220px;

  padding-right:28px;

  font-family:var(--font-jp);

  font-weight:500;

  font-size:14px;

  letter-spacing:.06em;

}

:is(.page-recruit, .page-recruit-group) table.works__table td{

  font-size:var(--rs-body);

  line-height:var(--rs-lh);

  letter-spacing:var(--rs-track);

  text-align:center;

}

:is(.page-recruit, .page-recruit-group) table.works__table td > *{

  display:inline-block;

  text-align:left;

  width:100%;
  max-width:560px;

}

/* =====================================================
SP table ratio (38 : 62)
===================================================== */

@media (max-width:768px){

  :is(.page-recruit, .page-recruit-group) table.works__table{
    table-layout:fixed;
  }

  :is(.page-recruit, .page-recruit-group) table.works__table th{
    width:38% !important;
    padding-right:12px !important;
  }

  :is(.page-recruit, .page-recruit-group) table.works__table td{
    width:62% !important;
  }

  :is(.page-recruit, .page-recruit-group) table.works__table td > *,
  :is(.page-recruit, .page-recruit-group) .rs-val{
    max-width:380px !important;
  }

}

/* =====================================================
CTA
===================================================== */

:is(.page-recruit, .page-recruit-group) .contact-btn{

  margin:44px auto 0;

  max-width:980px;

  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

}

@media (max-width:768px){

  :is(.page-recruit, .page-recruit-group) .contact-btn{
    grid-template-columns:1fr;
  }

}

:is(.page-recruit, .page-recruit-group) a.link-btn{

  display:grid;

  place-items:center;

  padding:26px 12px;

  text-decoration:none;

  font-family:var(--font-en);

  font-size:12px;

  letter-spacing:.22em;

  text-transform:uppercase;

}

/* =====================================================
CTA – Cartier underline
===================================================== */

:is(.page-recruit, .page-recruit-group) .contact-btn a.link-btn{
  position:relative;
  padding-bottom:22px;
  -webkit-tap-highlight-color:transparent;
}

:is(.page-recruit, .page-recruit-group) .contact-btn a.link-btn::after{

  content:"";
  position:absolute;

  left:50%;
  bottom:10px;

  transform:translateX(-50%) scaleX(.62);

  transform-origin:center;

  width:150px;
  height:1px;

  background:rgba(0,0,0,.22);

  opacity:.85;

  transition:
  transform .55s cubic-bezier(.16,1,.30,1),
  opacity .25s ease,
  background-color .25s ease;

}

@media (hover:hover){

  :is(.page-recruit, .page-recruit-group) .contact-btn a.link-btn:hover::after{

    transform:translateX(-50%) scaleX(1);
    opacity:1;
    background:rgba(0,0,0,.28);

  }

}

/* =====================================================
rs-list hyphen style
===================================================== */

.rs-list{
  list-style:none;
  padding:0;
  margin:0;
}

.rs-list li{
  position:relative;
  padding-left:14px;
}

.rs-list li::before{
  content:"-";
  position:absolute;
  left:0;
}

/* =====================================================
  TOC underline unify
===================================================== */

:is(.page-recruit, .page-recruit-group) ul.work a{

  position:relative;
  border-bottom:none;   /* 既存の線を消す */

}

/* 固定幅ライン */
:is(.page-recruit, .page-recruit-group) ul.work a::after{

  content:"";
  position:absolute;

  left:50%;
  bottom:-8px;

  transform:translateX(-50%);

  width:72px;           /* ←線の長さ統一 */
  height:1px;

  background:rgba(0,0,0,.16);

  transition:opacity .25s ease, background .25s ease;

}

/* active */
:is(.page-recruit, .page-recruit-group) ul.work a.is-active::after{
  background:rgba(0,0,0,.42);
}

/* hover */
@media (hover:hover){

  :is(.page-recruit, .page-recruit-group) ul.work a:hover::after{
    background:rgba(0,0,0,.28);
  }

}