@charset "UTF-8";

/* ========== Base ========== */
:root{
  --c-primary:#1c2b6c;
}

.main *, .main *::before, .main *::after{
  box-sizing:border-box;
  border-style:solid;
  border-width:0;
}

.count-number{
  font-family:'Roboto Mono', Roboto, Arial, sans-serif !important;
  font-weight:800 !important;
  font-size:clamp(48px, 8vw, 96px);
  line-height:1;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"zero" 0, "ss01" 0, "ss02" 0;
}
@supports (font: -apple-system-body){
  .count-number{ font-feature-settings:"zero" 0, "ss01" 0, "ss02" 0; }
}

/* 数字＋単位：共通 */
.employee-big-number,
.employee-small-number,
.employeeratio-staff-number,
.employeeratio-engineer-number,
.employeeratio-marketing-number,
.serviceyr-number,
.turnover-number,
.age-number,
.experience-number,
.graduates-number,
.childcare-number,
.overtime-number,
.vacation-number{
  font-variant-numeric: tabular-nums;
  writing-mode: horizontal-tb !important;
  white-space: nowrap;
  flex-direction: row;
}
.employee-big-number::after,
.employee-small-number::after,
.employeeratio-staff-number::after,
.employeeratio-engineer-number::after,
.employeeratio-marketing-number::after,
.serviceyr-number::after,
.turnover-number::after,
.age-number::after,
.experience-number::after,
.graduates-number::after,
.childcare-number::after,
.overtime-number::after,
.vacation-number::after{
  font-family: 'SST W01 Roman', sans-serif, 'Helvetica Neue', Helvetica, Arial;
}

/* ========== KV ========== */
.kv-wrap{ position:relative; padding:.1px; width:100%; }
.kv-parts-inner{ width:100%; padding:.1px; position:relative; }

/* 共通 */
.kv-parts{ position:absolute; z-index:10; }
.kv-parts02,.kv-parts03,.kv-parts04,.kv-parts05,.kv-parts06,.kv-parts07{ transition:.5s; }

.kv-parts01,
.kv-parts02,
.kv-parts03,
.kv-parts04,
.kv-parts05,
.kv-parts06,
.kv-parts07 {
  position: absolute;   /* 位置決め用 */
  z-index: 10;          /* main より前に出す */
  width: 100%;          /* 必要なら */
  height: 100%;         /* 必要なら */
}

.kv-parts01{ width:215px; top:89px; left:calc((100% - 1330px)/2 + 83px); }
.kv-parts02{ width:320px; top:32px; right:calc((100% - 1330px)/2 + 15px); }
.kv-parts03{ width:303px; top:505px; left:calc((100% - 1330px)/2 + 130px); }
.kv-parts04{ width:193px; top:484px; right:calc((100% - 1330px)/2 + 284px); }
.kv-parts05{ width:265px; top:893px; left:calc((100% - 1330px)/2 + 58px); }
.kv-parts06{ width:378px; top:695px; right:calc((100% - 1330px)/2 - 8px); }
.kv-parts07{ width:378px; top:786px; right:calc((100% - 1330px)/2 + 28px); }

.kv-parts01 img,.kv-parts02 img,.kv-parts03 img,
.kv-parts04 img,.kv-parts05 img,.kv-parts06 img,.kv-parts07 img{
  width:100%; position:absolute; top:0; left:0; height: auto;  display: block;
}

@media screen and (max-width:639px){
  .kv-parts01{ width:23.2vw; top:21vw; left:4.7vw; }
  .kv-parts02{ width:31.6vw; top:2.7vw; right:5.2vw; }
  .kv-parts03{ width:33.86vw; top:82.93vw; left:9.73vw; right:auto; }
  .kv-parts04{ width:25.7vw; top:68.8vw; right:11.86vw; }
  .kv-parts05{ width:26.8vw; top:116.39vw; right:11.46vw; left:auto }
  .kv-parts06{ width:35.73vw; top:239vw; right:5vw; }
  .kv-parts07{ width:32.2666666667vw; top:208.9333333333vw; right:1.3333333333vw; }
}

/* inset 非対応fallback */
.intro-sub,
.exp-mask,
.exp-mask .exp-arc,
.exp-mask .exp-arc-rest,
.cc-mask,
.cc-mask .cc-arc{
  top:0; right:0; bottom:0; left:0;
}

.kv-main{
  position:relative; width:100%; height:570px; z-index:1; padding:.1px;
  background:url("../images/kv-img_pc.jpg") repeat-x center / 3000px;
}
.kv-title{ width:85%; max-width:640px; margin:190px auto 0; }
@media screen and (max-width:639px){
  .kv-main{ background:url("../images/kv-img_sp.jpg") no-repeat center / cover; height:126.4vw; }
  .kv-title{ margin:46.6vw auto 0; }
}

/* ========== 採用情報ボタン ========== */
.recruitment-btn{
  padding:.1px;
  margin:85px auto 0;
  display:block;
  border:none;
  text-align:center;
}
.recruitment-btn a{
  display:inline-block;
  font-size:19px;
  padding:10px 55px 10px 80px;
  background:#fff;
  border-radius:30px;
  position:relative;
  transition:opacity .3s;
  color:#000;
  text-decoration:none;
}
/* 矢印 */
.recruitment-btn a::before{
  content:"";
  width:20px; height:1px; background:#000;
  position:absolute; top:50%; left:15%;
  transform:translateY(-50%);
}
.recruitment-btn a::after{
  content:"";
  width:13px; height:13px;
  position:absolute; top:50%; left:16.5%;
  border-right:1px solid #000; border-bottom:1px solid #000;
  transform:translateY(-50%) rotate(-45deg);
}
.recruitment-btn a:hover{ opacity:.9; color:#000; text-decoration:none; }

@media (max-width:639px){
  .recruitment-btn{ margin-top:34.4vw; }
  .recruitment-btn a{
    font-size:3.8vw;
    padding:2.5vw 8vw 2.5vw 12.5vw;
    border-radius:6vw;
  }
  .recruitment-btn a::before{ width:4.2666666667vw; height:.2vw; left:4.9vw; }
  .recruitment-btn a::after{  width:3.0666666667vw; height:3.0666666667vw; left:5.5vw; }
}

/* ========== Sections & Layout ========== */
.kv-sub{ background:url("../images/kv-img-bg.jpg") no-repeat center / cover; padding:100px 5% 82px; }
.kv-read{ font-size:16.8px; text-align:center; line-height:2.3; }
.kv-read-main{ font-size:26.4px; text-align:center; line-height:2; margin-top:25px; }
.kv-read-corp{ font-size:18px; text-align:center; line-height:2; margin-top:30px; }
.kv-read-movie{
  display:block; margin:35px auto; padding:15px 15px 15px 45px; background:#fff; border:none;
  font-size:16.5px; position:relative; transition:.3s; line-height:1.44444;
}
.kv-read-movie::before{
  content:''; width:20px; height:20px; border-radius:50%; border:2px solid #000;
  position:absolute; top:0; left:18px; bottom:0; margin:auto;
}
.kv-read-movie::after{
  content:''; width:0; height:0; border-style:solid; border-width:6px 0 6px 8px; border-color:transparent transparent transparent #000;
  position:absolute; top:0; left:25px; bottom:0; margin:auto;
}
.kv-read-movie:hover{ text-decoration:none; opacity:.7 !important; }

@media screen and (max-width:639px){
  .kv-sub{ padding:20vw 5% 22vw; }
  .kv-read{ font-size:3.6vw; line-height:2.1; }
  .kv-read-main{ font-size:5.3333333333vw; margin-top:3vw; }
  .kv-read-corp{ font-size:3.8666666667vw; margin-top:6vw; }
  .kv-read-movie{ margin:7.3vw auto; padding:2.7vw 2.7vw 2.7vw 8vw; font-size:3.6vw; text-align:center; }
  .kv-read-movie::before{ width:4.6vw; height:4.6vw; border:.4vw solid #000; left:2vw; }
  .kv-read-movie::after{ border-width:1.5vw 0 1.5vw 1.8vw; left:3.6vw; }
}

.grey-bg,.grey-bg-footer{ background:#f2f2f2; width:100%; }
.grey-bg{ padding-top:80px; padding-bottom:90px; }
.grey-bg-footer{ padding-top:80px; padding-bottom:15px; }
.white-line{ width:100%; height:5px; background:#fff; }

@media screen and (max-width:639px){
  .grey-bg{ padding-top:18vw; padding-bottom:8.66vw; }
  .grey-bg-footer{ padding-top:9.7333333333vw; padding-bottom:3.59vw; }
  .white-line{ height:.6666666667vw; }
}

.inner-1000-wrap,.inner-782-wrap{ width:90%; margin:0 auto; text-align:center; padding:.1px; }
.inner-1000-wrap{ max-width:1000px; }
.inner-782-wrap{ max-width:782px; }

.main-title{
  font-size:30px; line-height:1.6; color:#000; position:relative; display:inline-block; padding:0 40px;
}
.main-title::before,.main-title::after{
  position:absolute; content:""; width:16px; height:48px; top:0; background:no-repeat center / cover;
}
.main-title::before{ left:0; background-image:url("../images/main-title-left.svg"); }
.main-title::after{ right:0; background-image:url("../images/main-title-right.svg"); }

.intro-read{ font-size:16px; font-weight:700; line-height:1.8; margin-top:25px; }
.intro-img{ position:relative; padding:.1px; margin-top:40px; }
.intro-sub{ position:absolute; inset:0; width:100%; }
.intro-main{ position:relative; }

@media screen and (max-width:639px){
  .main-title{ font-size:4.6666666667vw; padding:0 5.3333333333vw; }
  .main-title::before,.main-title::after{ width:2.5333333333vw; height:7.4666666667vw; }
  .intro-img{ margin-top:6vw; }
  .intro-read{ font-size:3.6vw; text-align:left; margin-top:6vw; }
}

.number-area{
  text-align:center; padding-top:85px; padding-bottom:110px; border-bottom:5px solid #f2f2f2; width:100%;
}
.number-ann{ font-size:16px; line-height:1.8; margin-top:10px; }
.grey-bg-number{ background:#f2f2f2; width:100%; position:relative; }

@media screen and (max-width:639px){
  .number-area{ padding-top:9.3vw; padding-bottom:10vw; border-bottom:.666vw solid #f2f2f2; }
  .number-ann{ font-size:2.66vw; margin-top:2vw; }
  .grey-bg-number.mgtop30{ margin-top:4.66vw !important; }
}

/* padding variants */
.number-base-padding{ padding:25px 45px; }
.number-right-bottom-padding{ padding:25px 0 0 45px; }
.number-bottom-padding{ padding:25px 45px 0; }

@media screen and (max-width:1112px){
  .number-base-padding{ padding:2.248vw 4vw; }
  .number-right-bottom-padding{ padding:2.248vw 0 0 4vw; }
  .number-bottom-padding{ padding:2.248vw 4vw 0; }
}
@media screen and (max-width:639px){
  .number-base-padding { padding:3vw 0; }
  .number-right-bottom-padding{ padding:3vw 0 0 0; }
  .number-bottom-padding{ padding:3vw 3vw 0 0; }
}

.number-base-wrap{ position:relative; padding:.1px; }
.number-employeeratio-wrap{ position:relative; height:385px; }
.number-serviceyr-wrap{
  position:relative; height:100%; padding:0 45px 25px 0;
  background:url(../images/serviceyr-bg.svg) no-repeat right bottom / 70%;
}
.number-turnover-wrap{
  position:relative; height:265px; padding:0 45px 25px 0;
  background:url(../images/turnover-bg.svg) no-repeat right bottom / 57%;
}
.number-age-wrap{
  position:relative; height:265px; padding:0 45px 25px 0;
  background:url(../images/age-bg.svg) no-repeat right bottom / 60%;
}
.number-childcare-wrap{
  position:relative; padding:10px 10px 35px;
  background:url(../images/childcare-bg.svg) no-repeat left bottom / 27%;
}
.number-overtime-wrap{
  position:relative; height:255px; padding:0 45px 25px 0;
  background:url(../images/overtime-bg.svg) no-repeat right bottom / 55%;
}
.number-vacation-wrap{
  position:relative; height:255px; padding:0 45px 25px 0;
  background:url(../images/vacation-bg.svg) no-repeat right bottom / 68%;
}

@media screen and (max-width:1112px){
  .number-employeeratio-wrap{ height:34.6vw; }
  .number-serviceyr-wrap{ padding:0 4vw 2.248vw 0; }
  .number-turnover-wrap,.number-age-wrap{ height:23.8vw; padding:0 4vw 2.248vw 0; }
  .number-childcare-wrap{ padding:.899vw .899vw 3.147vw; }
  .number-overtime-wrap,.number-vacation-wrap{ height:22.9vw; padding:0 4vw 2.248vw 0; }
}
@media screen and (max-width:639px){
  .number-employeeratio-wrap{ height:74vw; }
  .number-serviceyr-wrap{ height:74vw; padding:0 8vw 5vw; background-size:60%; background-position: right bottom -5vw; }
  .number-turnover-wrap{ height:48.5vw; padding:0 8vw 5vw; background-size:50%; }
  .number-age-wrap{ height:48.5vw; padding:0 8vw 5vw; background-size:53%; }
  .number-childcare-wrap{ height:132vw; padding:0 8vw 5vw; background-size:54%; background-position:left 12vw bottom; }
  .number-overtime-wrap{ height:49vw; padding:0 8vw 5vw; background-size:50%; }
  .number-vacation-wrap{ height:49vw; padding:0 8vw 5vw; background-size:60%; }
}

.number-title{
  font-size:25px; line-height:1.8; font-weight:700; color:var(--c-primary);
  text-decoration:underline; text-decoration-color:var(--c-primary);
  text-underline-offset:8px; text-decoration-thickness:1px;
  position:absolute; top:0; left:0;
}
@media screen and (max-width:1112px){
  .number-title{ font-size:2.248vw; text-underline-offset:.719vw; }
}
@media screen and (max-width:639px){
  .number-title{ font-size:4.39vw; text-underline-offset:.719vw; padding-left:5vw; }
}

/* ========== Employee block ========== */
.employee-flex{
  display:flex; justify-content:space-between; align-items:center;
  background:url(../images/employee-bg.svg) no-repeat center / cover;
  padding:10px 0;
}
.employee-big-number,
.employee-small-number,
.employee-label{ color:var(--c-primary); }

.employee-big-number{
  font-size:100px; font-weight:700; line-height:1; width:34%;
  display:inline-flex;
  align-items:baseline;
  gap:0em;
}
.employee-big-number::after{
  content:"\540D"; /* 名 */
  font-size:0.6em; line-height:1; color:inherit;
  align-self: baseline;
  transform: translateY(-.05em);
}
.employee-label{ font-size:20px; line-height:1.3; }
.employee-small-number{
  font-size:50px; font-weight:700; line-height:1;
  display:inline-flex; align-items:baseline; gap:0.08em;
}
.employee-small-number::after{ content:'%'; font-size:0.6em; color:inherit; align-self: baseline; }
.employee-number-flex{ display:flex; justify-content:space-between; align-items:center; width:57%; }

.number-2col-flex{ margin-top:10px; display:flex; align-items:stretch; }
.number-2col-flex li{ margin-right:10px; width: calc(50% - 5px);}
.number-2col-flex li:last-child{ margin-right:0; }

@media screen and (max-width:1112px){
  .employee-flex{ padding:.899vw 0; }
  .employee-big-number{ font-size:8.99vw; }
  .employee-label{ font-size:1.798vw; }
  .employee-small-number{ font-size:4.496vw; }
  .number-2col-flex{ margin-top:.899vw; }
  .number-2col-flex li{ margin-right:.899vw; width: calc(50% - .4495vw);}
}
@media screen and (max-width:639px){
  .employee-flex{ display:block; background:url(../images/employee-bg_sp.svg) no-repeat center / 100%; padding:3vw 5vw; }
  .employee-big-number{ font-size:13.3vw; width:53%; margin:14vw auto 0; }
  .employee-label{ font-size:3.2vw; }
  .employee-small-number{ font-size:8vw; }
  .employee-number-flex{ width:100%; padding-top:11vw; }
  .employee-number-inner{ padding-right:1.8vw; }
  .employee-number-inner:last-child{ padding-right:0; }
  .number-2col-flex{ margin-top:4vw; display:block; }
  .number-2col-flex li {margin-right: 0; width: 100%;}
  .number-2col-flex li:last-child{ margin-top:4vw; }
}

/* ========== Employeeratio circles ========== */
.number-employeeratio-staff{ width:130px; position:absolute; bottom:0; left:130px; text-align:center; }
.number-employeeratio-engineer{ width:155px; position:absolute; left:0; bottom:90px; text-align:center; }
.number-employeeratio-marketing{ width:240px; position:absolute; right:0; top:30px; text-align:center; }

.number-employeeratio-inner{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.number-employeeratio-label{ font-size:17px; line-height:1; color:var(--c-primary); }

.employeeratio-staff-number,.employeeratio-engineer-number,.employeeratio-marketing-number{
  font-weight:700; line-height:1; color:var(--c-primary);
}
.employeeratio-staff-number{ font-size:40px; display:inline-flex; align-items:baseline; gap:0.05em; }
.employeeratio-engineer-number{ font-size:45px; display:inline-flex; align-items:baseline; gap:0.05em; }
.employeeratio-marketing-number{ font-size:60px; display:inline-flex; align-items:baseline; gap:0em; }

.employeeratio-staff-number::after,.employeeratio-engineer-number::after,.employeeratio-marketing-number::after{
  content:'%'; color:inherit; align-self: baseline;
}
.employeeratio-staff-number::after{ font-size: 0.625em; }
.employeeratio-engineer-number::after{ font-size: 0.555em; }
.employeeratio-marketing-number::after{ font-size: 0.5em; }

@media screen and (max-width:1112px){
  .number-employeeratio-staff{ width:11.69vw; left:11.69vw; }
  .number-employeeratio-engineer{ width:13.9vw; bottom:8.09vw; }
  .number-employeeratio-marketing{ width:21.58vw; top:2.69vw; }
  .number-employeeratio-label{ font-size:1.528vw; }
  .employeeratio-staff-number{ font-size:3.59vw;}
  .employeeratio-engineer-number{ font-size:4vw;}
  .employeeratio-marketing-number{ font-size:5.39vw;}
}
@media screen and (max-width:639px){
  .number-employeeratio-staff{ width:22.93vw; bottom:2vw; left:31.3vw; }
  .number-employeeratio-engineer{ width:27.3vw; left:8.26vw; bottom:18.4vw; }
  .number-employeeratio-marketing{ width:42.6vw; right:8.26vw; top:6.93vw; }
  .number-employeeratio-label{ font-size:2.99vw; }
  .employeeratio-staff-number{ font-size:7.039vw; }
  .employeeratio-engineer-number{ font-size:7.9vw;}
  .employeeratio-marketing-number{ font-size:10.56vw;}
}

/* ========== Service year / Turnover / Age ========== */
.number-serviceyr-inner{ position:absolute; text-align:left; top:50%; left:0; transform:translateY(-60%); }
.number-serviceyr-label{ font-size:28px; line-height:1; color:var(--c-primary); }

.serviceyr-number,.turnover-number,.age-number{
  font-size:100px; font-weight:700; line-height:1; color:var(--c-primary);
  display:inline-flex; align-items:baseline; gap:0.05em;
}
.serviceyr-number::after,.turnover-number::after,.age-number::after{
  font-size:0.6em; color:inherit; align-self: baseline;
}
.serviceyr-number::after{ content:"\5E74"; transform: translateY(-.05em); }
.turnover-number::after{ content:'%'; }
.age-number::after{ content:"\6B73"; transform: translateY(-.05em); }

.number-turnover-inner,.number-age-inner{ position:absolute; text-align:left; top:25%; left:0; }
.number-turnover-text{ font-size:17px; margin-top:10px; color:var(--c-primary); }

@media screen and (max-width:1112px){
  .number-serviceyr-label{ font-size:2.5vw; }
  .serviceyr-number,.turnover-number,.age-number{ font-size:8.99vw; }
  .number-turnover-text{ font-size:1.528vw; margin-top:.89vw; }
}
@media screen and (max-width:639px){
  .number-serviceyr-inner{ left:8.3vw; }
  .number-serviceyr-label{ font-size:4.928vw; }
  .serviceyr-number,.turnover-number,.age-number{ font-size:17.59vw;}
  .number-turnover-inner,.number-age-inner{ top:33%; left:8.3vw; }
  .number-turnover-text{ font-size:2.992vw; margin-top:3vw; }
}

/* ========== Experience (semi-donut gauge) ========== */
.experience-flex{ display:flex; justify-content:space-between; align-items:flex-end; margin:20px 0; }
.experience-2022,.experience-2023{ width:26%; }
.experience-2024{ width:35%; }

.experience-circle{
  position:relative; --start:-120deg; --span:.78turn; --overlap:.012turn;
  --cx:50%; --cy:58%; --ringOuter:47%; --ringInner:25%; --spanGrow:0turn;
}
.experience-circle>img{ display:block; width:100%; height:auto; opacity:1; pointer-events:none; }
.exp-mask{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  -webkit-mask:radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--ringInner)), #000 calc(var(--ringInner) + 1px), #000 var(--ringOuter), transparent 0);
          mask:radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--ringInner)), #000 calc(var(--ringInner) + 1px), #000 var(--ringOuter), transparent 0);
}
.exp-mask .exp-arc{
  position:absolute; inset:0; background:linear-gradient(to top,#a5ffff 0%,#19aaff 100%);
  -webkit-mask-image:conic-gradient(from var(--start) at var(--cx) var(--cy), #000 0turn var(--ang,0turn), transparent calc(var(--ang,0turn) - var(--overlap)) 1turn);
          mask-image:conic-gradient(from var(--start) at var(--cx) var(--cy), #000 0turn var(--ang,0turn), transparent calc(var(--ang,0turn) - var(--overlap)) 1turn);
}
.exp-mask .exp-arc-rest{
  position:absolute; inset:0; background:#d2e6dc;
  -webkit-mask-image:conic-gradient(from var(--start) at var(--cx) var(--cy), transparent 0turn var(--ang,0turn), #000 var(--ang,0turn) var(--spanGrow,0turn), transparent var(--spanGrow,0turn) 1turn);
          mask-image:conic-gradient(from var(--start) at var(--cx) var(--cy), transparent 0turn var(--ang,0turn), #000 var(--ang,0turn) var(--spanGrow,0turn), transparent var(--spanGrow,0turn) 1turn);
}

/* 年ラベル */
.experience-year{ font-size:25px; font-weight:700; color:var(--c-primary); }
.experience-2024 .experience-year{ font-size:30px; }
.experience-year span{ font-size:14px; color:var(--c-primary); }
.experience-2024 .experience-year span{ font-size:20px; }

/* ====== ラベル＆数値（最終版） ====== */
/* ラベル＆数値は外側に少し出す＋上付き見え防止 */
.experience-inner,
.graduates-inner{
  position:absolute;
  bottom:65px;
  width:50%;
  text-align:center;
  z-index:3;
  pointer-events:none;
}
.experience-inner{ left:-25px; }
.graduates-inner { right:-25px; }

.experience-label{
  font-size:17px;
  line-height:1;
  color:var(--c-primary);
  display:block;
}

.experience-number,
.graduates-number{
  font-size:35px;
  font-weight:700;
  line-height:1;
  color:var(--c-primary);
  display:inline-flex;
  align-items:flex-end;
  gap:.05em;
}
.experience-number::after,
.graduates-number::after{
  content:'%';
  font-size:.72em;
  color:inherit;
  transform:translateY(-.05em);
}
.experience-2024 .experience-number,
.experience-2024 .graduates-number{ font-size:60px !important; }

/* 年やコンテナのレイアウト調整 */
@media screen and (max-width:1112px){
  .experience-flex{ margin:1.79vw 0; }
  .experience-year{ font-size:2.24vw; }
  .experience-2024 .experience-year{ font-size:2.69vw; }
  .experience-year span{ font-size:1.25vw; }
  .experience-2024 .experience-year span{ font-size:1.79vw; }
}
/* ラベル＆数値のレスポンシブ（最終版） */
@media screen and (max-width:1112px){
  .experience-inner{ left:-2.24vw; bottom:5.84vw; }
  .graduates-inner{ right:-2.24vw; bottom:5.84vw; }
  .experience-label{ font-size:1.52vw; }
  .experience-number,.graduates-number{ font-size:3.14vw; }
  .experience-2024 .experience-number,
  .experience-2024 .graduates-number{ font-size:5.39vw !important; }
}
@media screen and (max-width:639px){
  .experience-flex{ margin:14.66vw 6.6vw 2vw; flex-wrap:wrap; }
  .experience-2022,.experience-2023{ width:44%; }
  .experience-2024{ width:72.5%; margin:4.39vw auto; }

  .experience-year{ font-size:3.83vw; }
  .experience-2024 .experience-year{ font-size:5.28vw; }
  .experience-year span{ font-size:2.146vw; }
  .experience-2024 .experience-year span{ font-size:3.519vw; }

  .experience-inner{ bottom:10.4vw; left:-3.5vw; }
  .graduates-inner{ bottom:10.4vw; right:-3.5vw; }
  .experience-label{ font-size:2.6vw; }
  .experience-number,.graduates-number{ font-size:5.36vw; }
  .experience-2024 .experience-number,
  .experience-2024 .graduates-number{ font-size:10.56vw !important; }
}

/* ========== Childcare (donut sweep) ========== */
.childcare-flex{ display:flex; justify-content:space-between; align-items:flex-end; }
.childcare-small{ width:19%; }
.childcare-big{ width:57%; margin-bottom: 20px;}
.childcare-text{ font-size:17px; line-height:1.5; margin-top:10px; color:var(--c-primary); }

.childcare-inner-flex{ display:flex; justify-content:space-between; }
.childcare-inner-flex li{ width:44.5%; }

.childcare-label{ font-size:20px; font-weight:700; line-height:1.2; }

.number-childcare-circle{ position:relative; margin-top:8px; --cc-start:0deg; --cc-overlap:.004turn; }
.number-childcare-circle>img{ display:block; width:100%; height:auto; }

.cc-mask{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  -webkit-mask-image:url("../images/childcare-circle.svg");
  -webkit-mask-position:center; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat;
          mask-image:url("../images/childcare-circle.svg");
          mask-position:center; mask-size:contain; mask-repeat:no-repeat;
}
.cc-mask .cc-arc{
  position:absolute; inset:0; background:linear-gradient(to top left,#a5ffff 0%,#19aaff 70%);
  -webkit-mask-image:conic-gradient(from var(--cc-start,0deg), #000 0turn var(--cc-ang,0turn), transparent calc(var(--cc-ang,0turn) - var(--cc-overlap)) 1turn);
          mask-image:conic-gradient(from var(--cc-start,0deg), #000 0turn var(--cc-ang,0turn), transparent calc(var(--cc-ang,0turn) - var(--cc-overlap)) 1turn);
}

.childcare-number{
  position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:60px; font-weight:700; line-height:1; color:var(--c-primary);
  background:none !important; -webkit-mask:none !important; mask:none !important;
  display:inline-flex; align-items:baseline; gap:0.05em;
}
.childcare-number::after{ content:'%'; font-size:0.416em; color:inherit; align-self: baseline; }
.childcare-small .childcare-number{ font-size:45px; }

@media screen and (max-width:1112px){
  .childcare-text{ font-size:1.528vw; margin-top:.89vw; }
  .childcare-label{ font-size:1.79vw; }
  .number-childcare-circle{ margin-top:.7vw; }
  .childcare-number{ font-size:5.39vw; }
  .childcare-big{ margin-bottom: 1.798vw;}
  .childcare-small .childcare-number{ font-size:4vw; }
}
@media screen and (max-width:639px){
  .childcare-flex{ display:block; padding-top:11vw; position:relative; }
  .childcare-small{ width:28.159vw; }
  .childcare-big{ width:100%; margin-bottom: 0;}
  .childcare-small:first-child{ width:0; }
  .childcare-small:last-child{ position:absolute; top:74vw; right:0; }
  .childcare-text{ font-size:2.6vw; margin-top:2.26vw; }
  .childcare-inner-flex{ display:block; }
  .childcare-inner-flex li{ width:38.72vw; }
  .childcare-inner-flex li:first-child{ margin:0 auto; }
  .childcare-inner-flex li:last-child{ margin-top:3.33vw; }
  .childcare-label{ font-size:3.519vw; }
  .number-childcare-circle{ margin-top:2vw; }
  .childcare-number{ font-size:10.56vw; }
  .childcare-small .childcare-number{ font-size:7.91vw; }
}

/* ========== Overtime / Vacation ========== */
.number-overtime-inner,.number-vacation-inner{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-40%); text-align:left;
}
.overtime-number,.vacation-number{
  font-size:100px; font-weight:700; line-height:1; color:var(--c-primary);
  display:inline-flex; align-items:baseline; gap:0.05em;
}
.overtime-number::after,.vacation-number::after{
  font-size:0.6em; color:inherit; align-self: baseline; transform: translateY(-.05em);
}
.overtime-number::after{ content:"\6642\9593"; }
.vacation-number::after{ content:"\65E5"; }
.number-overtime-text{ font-size:17px; line-height:1.5; margin-top:10px; color:var(--c-primary); }

@media screen and (max-width:1112px){
  .overtime-number,.vacation-number{ font-size:8.99vw; }
  .overtime-number::after,.vacation-number::after{ font-size:5.39vw; }
  .number-overtime-text{ font-size:1.52vw; margin-top:.89vw; }
}
@media screen and (max-width:639px){
  .overtime-number,.vacation-number{ font-size:17.59vw; }
  .overtime-number::after,.vacation-number::after{ font-size:10.56vw; }
  .number-overtime-text{ font-size:2.992vw; margin-top:2vw; }
}

/* ========== Carousel (Interview / Story) ========== */
.link-erea{ text-align:center; padding-top:95px; }
@media screen and (max-width:639px){ .link-erea{ padding-top:8.6vw; } }

.interview-items{ width:100%; max-width:1450px; margin:65px auto 0; padding:.1px; position:relative; }
.interview-thumb{ height:auto; margin:0 18px; }
.interview-thumb a{ transition:.3s; outline:none; }
.interview-thumb a:hover{ opacity:.7; }
.interview-thumb img{ width:100%; height:100%; object-fit:cover; }

.interview-items-title{ font-size:18px; font-weight:500; line-height:1.555; margin-top:15px; text-align:left; }
.interview-items-job{ font-size:12px; line-height:1.666; margin-top:10px; text-align:left; }
.interview-items-name{ font-size:15px; line-height:1.3333; margin-top:5px; text-align:left; }

@media screen and (max-width:1450px){
  .interview-thumb{ margin:0 1.4vw; }
}
@media screen and (max-width:1200px){
  .interview-items-title{ font-size:1.5vw; }
  .interview-items-job{ font-size:1vw; }
  .interview-items-name{ font-size:1.3vw; }
}
@media screen and (max-width:1000px){
  .interview-items{ width:90%; margin:65px auto 0; }
}
@media screen and (max-width:639px){
  .interview-items{ margin:8vw auto 0 !important; }
  .interview-thumb{ margin:0 2.35vw; }
  .interview-items-title{ font-size:3.3vw; margin-top:2vw !important; }
  .interview-items-job{ font-size:2.2vw; margin-top:2vw !important; }
  .interview-items-name{ font-size:3vw; margin-top:1.3vw !important; }
}

/* slick arrows 共通 */
.interview-items .slick-arrow,.sonystory-items .slick-arrow{
  background:#cacaca !important; width:40px !important; height:40px !important; z-index:2 !important;
  border-radius:50%; position:absolute; border:5px solid #fff;
}
.interview-items .slick-arrow{ top:215px; }
.sonystory-items .slick-arrow{ top:85px; }

.slick-prev{ left:250px !important; transform-origin:25% 25%; transform:rotate(180deg); margin-left:20px; }
.slick-next{ right:250px !important; }
.slick-prev::before,.slick-next::before{
  position:absolute; content:""; width:10px; height:10px; border-right:3px solid #4d4d4d; border-top:3px solid #4d4d4d;
  inset:0; margin:auto; transform:rotate(45deg);
}

@media screen and (max-width:1450px){
  .interview-items .slick-arrow{ top:calc(26vw - 100px); }
  .sonystory-items .slick-arrow{ top:calc(10vw - 40px); }
  .slick-prev{ left:12% !important; }
  .slick-next{ right:12% !important; }
}
@media screen and (max-width:1000px){
  .slick-prev{ left:-1vw !important; }
  .slick-next{ right:-1vw !important; }
  .interview-items .slick-arrow{ top:23vw; }
}
@media screen and (max-width:639px){
  .interview-items .slick-arrow,.sonystory-items .slick-arrow{
    width:7vw !important; height:7vw !important; border:.7vw solid #fff;
  }
  .interview-items .slick-arrow{ top:33vw; }
  .slick-prev{ left:-2vw !important; margin-left:3.5vw; }
  .slick-next{ right:-2vw !important; }
  .slick-prev::before,.slick-next::before{ width:2.2vw; height:2.2vw; border-right:.6vw solid #4d4d4d; border-top:.6vw solid #4d4d4d; }
}

/* ========== Story ========== */
.sub-title{ font-size:23px; margin-top:100px; }

.sonystory-items{ width:100%; max-width:1450px; position:relative; padding:.1px 290px; margin:30px auto 80px; }
.sonystory-thumb{ height:auto; margin:0 18px; }
.sonystory-thumb a{ transition:.3s; outline:none; }
.sonystory-thumb a:hover{ opacity:.7; }
.sonystory-thumb img{ width:100%; height:100%; object-fit:cover; }

.sonystory-items-title{
  font-size:16px; font-weight:500; line-height:1.555; margin-top:15px; text-align:left; padding-left:13px; position:relative;
}
.sonystory-items-title::before{
  content:''; width:0; height:0; border-style:solid; border-width:6px 0 6px 6px; border-color:transparent transparent transparent #333;
  position:absolute; top:4px; left:0; margin:auto;
}

@media screen and (max-width:1450px){
  .sonystory-items{ padding:.1px 175px; }
  .sonystory-thumb{ margin:0 1.4vw; }
}
@media screen and (max-width:1200px){ .sonystory-items-title{ font-size:1.15vw; } }
@media screen and (max-width:1000px){
  .sonystory-items{ width:90%; padding:.1px; }
  .sonystory-items .slick-arrow{ top:9vw; }
}
@media screen and (max-width:639px){
  .sub-title{ font-size:4vw; margin-top:20vw; }
  .sonystory-items{ margin:5.3vw auto 12vw; }
  .sonystory-thumb{ margin:0 2.35vw; }
  .sonystory-items-title{ font-size:2.93vw; margin-top:2vw !important; }
  .sonystory-items-title::before{ border-width:1.3vw 0 1.3vw 1.3vw; top:1vw; }
  .sonystory-items .slick-arrow{ top:13vw; }
}

/* ========== Story banner ========== */
.story-title{ font-size:23px; line-height:1.8; margin-top:70px; }
.story-banner{ display:flex; width:100%; max-width:685px; margin:40px auto 75px; justify-content:space-between; }
.story-banner li{ width:46%; }
.story-banner li a{ transition:.3s; }
.story-banner li a:hover{ opacity:.7; }
.story-banner-text{
  font-size:16px; line-height:1.5; text-align:left; margin-top:13px; padding-left:10px; position:relative; display:inline-block;
}
.story-banner-text::before{
  content:''; width:0; height:0; border-style:solid; border-width:6px 0 6px 6px; border-color:transparent transparent transparent #000;
  position:absolute; top:.3em; left:0; margin:auto;
}

/* ========== Accordion etc. ========== */
.app-ann{ font-size:13px; line-height:1.8; margin-top:40px; }
.app-list{ margin-top:20px; width:100%; border:1px solid #000; background:#fff; text-align:left; }
.app-title{
  transition:background .3s ease; cursor:pointer; position:relative; font-size:18px; font-weight:700; line-height:1.3;
  padding:20px 50px 20px 20px; width:100%;
}
.app-title::before,.app-title::after{
  position:absolute; content:''; top:0; right:20px; bottom:0; width:25px; height:2px; margin:auto; background:#000;
}
.app-title::after{ transform:rotate(-90deg); transition:transform .3s; }
.app-title.active::after{ transform:rotate(0deg); }

.credit{ font-size:10px; text-align:center; margin-top:50px; }

@media screen and (max-width:639px){
  .app-ann{ font-size:2.6666666667vw; margin-top:5.8666666667vw; text-align:left; }
  .app-list{ margin-top:2.6666666667vw; border:.16vw solid #000; }
  .app-title{ font-size:4vw; line-height:1.8; padding:3.3333333333vw 10.6666666667vw 3.3333333333vw 3.3333333333vw; }
  .app-title::before,.app-title::after{ right:2.6666666667vw; width:5.6vw; height:.2666666667vw; }
  .credit{ font-size:2vw; margin-top:13.3vw; }
}

.app-detail{ margin:20px; display:none; }
.app-detail table{ width:100%; border-collapse:separate; border-spacing:0 15px; }
.app-detail table th{
  width:24%; font-size:18px; font-weight:400; line-height:1.3; background:#e0e0e0; padding:15px;
}
.app-detail table td{ width:76%; padding:10px 0 10px 30px; font-size:15px; line-height:1.8; }
@media screen and (max-width:639px){
  .app-detail{ margin:4vw; }
  .app-detail table{ border-spacing:0 2vw; }
  .app-detail table th{ display:block; width:100%; font-size:3.6vw; padding:3vw; text-align:center; }
  .app-detail table td{ display:block; width:100%; padding:4vw 0; font-size:3.6vw; }
}
.app-detail table td span{ font-weight:700; }

/* ========== Forms / Steps ========== */
.form-title{ width:100%; margin-top:75px; text-align:center; font-size:30px; line-height:1.5; }
.step-wrap{ margin-top:30px; padding:.1px; }
.step-list{
  display:flex; align-items:flex-start; width:100%; background:#fff; border-radius:10px; padding:12px; margin:10px auto;
}
.step-arrow{ position:relative; height:35px; width:1px; background:#000; margin:0 auto; }
.step-arrow:before{
  content:""; display:block; left:-12px; bottom:4px; width:25px; height:25px; position:absolute;
  border-right:1px solid #000; border-bottom:1px solid #000; transform:rotate(45deg);
}

@media screen and (max-width:639px){
  .form-title{ margin-top:12vw; font-size:5vw; }
  .step-wrap{ margin-top:6vw; }
  .step-list{ display:block; border-radius:3vw; padding:4vw; margin:1.5vw auto; }
  .step-arrow{ height:7.3333333333vw; width:.2vw; }
  .step-arrow:before{ width:5.2vw; height:5.2vw; left:-2.4vw; bottom:1vw; }
}

.step-no{ width:100px; font-size:25px; line-height:1.5; margin-left:10px; text-align:left; }
.step-detail{
  width:calc(100% - 100px); border-left:1px solid #000; font-size:17px; padding:5px 0 5px 20px; line-height:1.8; text-align:left;
}
.step-detail a{ font-weight:700; text-decoration:underline; }
.step-ann{ font-size:13px; line-height:2; }

@media screen and (max-width:639px){
  .step-no{ width:100%; font-size:5vw; text-align:center; margin-left:0; margin-bottom:2vw; }
  .step-detail{ width:100%; border-left:none; border-top:.2vw solid #000; padding:4.6666666667vw 0 0; font-size:3.6vw; line-height:2; }
  .step-ann{ font-size:2.6666666667vw; }
}
.step-ann span{ color:#f00; }

.terms-title{ font-size:17px; text-align:left; margin-top:60px; line-height:1.8; }
.terms-title span{ font-weight:700; }
.terms-ann,.form-ann{ font-size:15px; line-height:1.8; }
.terms-ann{ margin-top:30px; text-align:left; }
.form-ann{ margin-top:20px; }

@media screen and (max-width:639px){
  .terms-title{ font-size:4vw; margin-top:12vw; }
  .terms-ann{ font-size:2.6666666667vw; margin-top:4vw; }
  .form-ann{ font-size:3.6vw; margin-top:5vw; text-align:left; }
}

/* ========== フォームボタン ========== */
.form-btn{
  width:100%; max-width:650px;
  margin:60px auto 0;
  text-align:center;
}
.form-btn a{
  display:block;
  background:#000;
  border-radius:10px;
  color:#fff;
  font-size:23px;
  line-height:1.5;
  padding:15px;
  transition:opacity .3s;
  text-decoration:none;
}
.form-btn a:hover{ opacity:.7; color:#fff; text-decoration:none; }

@media (max-width:639px){
  .form-btn{ margin:6.6666666667vw auto 0; }
  .form-btn a{ border-radius:3vw; font-size:4vw; padding:3.3333333333vw; }
}

.recruitment-btn a:focus-visible,
.form-btn a:focus-visible{
  outline:2px solid #333;
  outline-offset:3px;
}

/* ========== ZooKeepボタン ========== */
.ZooKeep-btn{
  width:100%; max-width:650px;
  margin:60px auto 0;
  text-align:center;
}
.ZooKeep-btn a{
  display:inline-flex;       /* ← flexで横並び */
  align-items:center;        /* アイコンと文字を縦位置そろえ */
  justify-content:center;
  width:100%;
  background:#262f6a;
  border-radius:10px;
  color:#fff;
  font-size:23px;
  line-height:1.5;
  padding:15px;
  transition:opacity .3s;
  text-decoration:none;
  gap:18px;
}
.ZooKeep-btn a .icon {
  display:inline-block;
  width:18px;
  height:14px;
  background:url(../images/win-icon.svg) no-repeat center center;
  background-size:contain;
}
.ZooKeep-btn a:hover{ opacity:.7; color:#fff; text-decoration:none; }

@media (max-width:639px){
  .ZooKeep-btn{ margin:6.6666666667vw auto 0; }
  .ZooKeep-btn a{ border-radius:3vw; font-size:4vw; padding:6.666666666666667vw; gap:2.4vw; }
  .ZooKeep-btn a .icon {
    width:3.86vw;
    height:2.93vw;
  }
}

.ZooKeep-btn a:focus-visible{
  outline:2px solid #333;
  outline-offset:3px;
}

/* ========== Footer ========== */
.footer-link-wrap{ margin-top:60px; text-align:left; }
.footer-link a{
  font-size:15px; line-height:2; position:relative; padding-left:13px; transition:.3s;
}
.footer-link a:hover{ opacity:.7; text-decoration:none; }
.footer-link a::before{
  content:''; width:0; height:0; border-style:solid; border-width:6px 0 6px 6px; border-color:transparent transparent transparent #333;
  position:absolute; top:2px; left:0; margin:auto;
}
@media screen and (max-width:639px){
  .footer-link-wrap{ margin-top:6.6666666667vw; }
  .footer-link a{ font-size:3.3333333333vw; padding-left:2.4vw; }
  .footer-link a::before{ border-width:1.2vw 0 1.2vw 1.2vw; top:.8vw; }
}

.s5-returnToTop{ margin-top:0; z-index:200; }

/* ========== Inline box ========== */
.inline-box{
  width:100%; height:520px; overflow:auto; background:#fff; border:#ccc 1px solid; padding:20px 20px 60px; margin-top:10px;
  text-align:left; color:#333;
}
.inline-box a{ transition:.3s; }
.inline-box a:hover{ text-decoration:none; opacity:.7; }

.inline-title{ font-size:14px; font-weight:700; line-height:1.6; padding-bottom:10px; border-bottom:1px solid #666; }
.inline-text,.inline-text-center,.inline-text-right,.inline-text-indent{ font-size:14px; line-height:1.6; }
.inline-text-center{ text-align:center; }
.inline-text-right{ text-align:right; }
.inline-text-indent{ text-indent:-1em; padding-left:1em; }
.inline-corp-info{ font-size:14px; line-height:1.6; margin-left:auto; width:210px; }

@media screen and (max-width:639px){
  .inline-box{ height:80vw; margin-top:3vw; padding:4vw 4vw 10vw; }
  .inline-title{ font-size:3.6vw; padding-bottom:2.6666666667vw; }
  .inline-text,.inline-text-center,.inline-text-right,.inline-text-indent{ font-size:3.6vw; }
  .inline-corp-info{ width:50vw; font-size:3.6vw; }
}

/* ========== Margins & Animations ========== */
.mgtop5{ margin-top:5px !important; }
.mgtop10{ margin-top:10px !important; }
.mgtop15{ margin-top:15px !important; }
.mgtop20{ margin-top:20px !important; }
.mgtop30{ margin-top:30px !important; }
.mgtop40{ margin-top:40px !important; }
.mgtop50{ margin-top:50px !important; }

.fadeInUp{ opacity:0; transform:translate(0,10%); transition:1s; }
.fadeInUp.is-show{ transform:translate(0,0); opacity:1; }
.fadeIn{ opacity:0; transition:1s; }
.fadeIn.is-show{ opacity:1; }

.ripples{ opacity:0; transition:.5s ease-out; transform:scale(.9); }
.ripples.is-show{ opacity:1; transform:scale(1); }

.fadeIn.delay01,.ripples.delay01{ transition-delay:.3s; }
.fadeIn.delay02,.ripples.delay02{ transition-delay:.6s; }
.fadeIn.delay03,.ripples.delay03{ transition-delay:.9s; }
.fadeIn.delay04,.ripples.delay04{ transition-delay:1.2s; }
.fadeIn.delay05,.ripples.delay05{ transition-delay:1.5s; }
.fadeIn.delay06,.ripples.delay06{ transition-delay:1.8s; }
.fadeIn.delay07,.ripples.delay07{ transition-delay:2.1s; }
.fadeIn.delay08,.ripples.delay08{ transition-delay:2.4s; }
.fadeIn.delay09,.ripples.delay09{ transition-delay:2.7s; }
.fadeIn.delay10,.ripples.delay10{ transition-delay:3s; }
.fadeIn.delay11,.ripples.delay11{ transition-delay:3.3s; }

/* ========== Pict fill & Grow circle ========== */
.employee-number-inner{ position:relative; display:inline-block; line-height:0; }
.employee-number-inner>img.js-pict{ display:block; width:100%; height:auto; }

.pict-fill{
  position:absolute; left:0; top:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg,#19a3ff,#a7f5ff);
  background-repeat:no-repeat; background-position:center bottom;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center center; mask-position:center center;
  -webkit-mask-size:contain; mask-size:contain;
  transition-property:background-size; transition-timing-function:cubic-bezier(.2,.8,.2,1);
  will-change:background-size;
}
img.grow-circle{ display:block; transform-origin:50% 50%; transform:scale(0); transition:transform 1s cubic-bezier(.2,.8,.2,1); }
img.grow-circle.in{ transform:scale(1); }



.desired-area {
  text-align:center; padding-top:120px;
}
.desired-bnr {
  margin-top: 50px;
}
.desired-bnr a {
  transition: .3s;
}
.desired-bnr a:hover {
  opacity: .7;
}
.grey-bg-footer .inner-1000-wrap { position: relative; }
.impressed-logo {
  position: absolute;
  right: -120px;
  bottom: 60px;
  width: 330px;
}
@media screen and (max-width:1300px){
  .impressed-logo {
    right: 10px;
  }
}
@media screen and (max-width:970px){
  .impressed-logo {
    width: 25vw;
  }
}
@media screen and (max-width:639px){
  .desired-area {
    padding-top: 10vw;
  }
  .desired-bnr {
    margin-top: 8vw;
  }
  .impressed-logo {
    position: relative;
    right: auto;
    bottom: auto;
    width: 60%;
    margin: 10vw auto 0;
  }
}