@charset "utf-8";


:root {
  --recruit-primary: #6CCBFF;   /* クリアなスカイブルー */
  --recruit-surface: #F7FAFC;   /* ほぼ白のやわらかい背景 */
  --recruit-text:    #0A2E4A;   /* 純黒ではない深いネイビー */
  --recruit-corp: #1D2088;
}
.imgshadow-inset{
  border:1px solid #000000;
}
.m-contentsWrap{
  margin: 0;
  padding: 0;
  background-color: var(--recruit-surface);
}
main{
  margin-bottom: 130px;
  container-type: inline-size;
}

@media screen and (max-width: 767px), print {
  main {
    margin-bottom: 220px; 
  }
}
.section_news,
.section_category{
  margin:100px 0;
}
.innerbox{
  margin:0px auto;
  padding:0 1em;
  max-width: 1140px;
}
h2{
  font-size: 26px;
  text-align: center;
  margin-bottom: 20px;
}

@media screen and (min-width: 1200px) {
  .innerbox{
    padding:0;
  }
  h2{
    font-size: 36px;
  }
}
.button__box{
  text-align: center;
}
/*オープニング*/
.section_op{
  background-color: #eeeeee;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  position: relative;
  }

/*オープニング用設定*/
#sectionop-bg{
  position: absolute;
  width: 100%;
  aspect-ratio: 384 / 875;
  background-image: url(../img/op_bg-sp.webp);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  opacity: 0;
}
#sectionop-mask{
  position: absolute;
  bottom: 0;
  width: 100%;
  aspect-ratio: 192 / 17;
  background-image: url(../img/op_mask.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

.sectionop-char{
  position: absolute;
  aspect-ratio: 1 / 1;
  opacity: 0;
}
.sectionop-char img{
  width: 100%;
  height: auto;
}

#sectionop-char01{
  width: 33%;
  right:6%;
  bottom: 25%;
}
#sectionop-char02{
  width: 46%;
  right:10%;
  bottom:7%;
}
#sectionop-char03{
  width: 33%;
  left: 24%;
  bottom:23%;
}
#sectionop-char04{
  width: 48%;
  left: 5%;
  bottom:3%;
}

#sectionop-copy{
  position: absolute;
  top:20%;
  width: 100%;
  box-sizing: border-box;
  height: auto;
  padding:0 50px;
  text-align: center;
  opacity: 0;
}
#sectionop-copy img{
  width: 100%;
  height: auto;
}
#sectionop-copy img.op_message01{
  aspect-ratio: 516 / 114;
  max-width: 516px;
}
#sectionop-copy img.op_message02{
  aspect-ratio: 476 / 114;
  max-width: 476px;
}
#sectionop-h1{
  position: absolute;
  top:45%;
  width: 100%;
  font-size: 16px;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  font-family: "Noto Serif JP";
}
#sectionop-h1 span{
  display: block;
  width: 90%;
  margin: 0 auto;
  padding:10px;
  text-align: center;
  background-color: var(--recruit-corp);
  color: var(--recruit-surface);
}
@container (min-width: 768px) {
.section_op{
  aspect-ratio: 1 / 1;
  }
#sectionop-bg{
  aspect-ratio: 26 / 35;
  background-image: url(../img/op_bg.webp);
}
#sectionop-char01{
  width: 28%;
  right:6%;
  bottom: 33%;
}
#sectionop-char02{
  width: 40%;
  right:10%;
  bottom:2%;
}
#sectionop-char03{
  width: 30%;
  left: 38%;
  bottom:28%;
}
#sectionop-char04{
  width: 48%;
  left: 5%;
  bottom:0%;
}
#sectionop-copy{
  top:20%;
}
#sectionop-copy img.op_message01{
  width: 51%;
}
#sectionop-copy img.op_message02{
  width: 47%;
}
#sectionop-h1{
  top:34%;
}
}
@container (min-width: 960px) {
.section_op{
  aspect-ratio: 4 / 3;
  }

#sectionop-char01{
  width: 24%;
  right:6%;
  bottom: 30%;
}
#sectionop-char02{
  width: 36%;
  right:16%;
  bottom:2%;
}
#sectionop-char03{
  width: 26%;
  left: 34%;
  bottom:28%;
}
#sectionop-char04{
  width: 40%;
  left: 5%;
  bottom:0%;
}
#sectionop-copy{
  top:16%;
}
#sectionop-copy img.op_message01{
  width: 51%;
}
#sectionop-copy img.op_message02{
  width: 47%;
}
#sectionop-h1{
  top:32%;
}
#sectionop-h1 span{
  width: 500px;
}
}
@container (min-width: 1100px) {
.section_op{
  height: 90vh;
  aspect-ratio: auto;
  }

#sectionop-char01{
  width: 260px;
  right:100px;
  bottom: 65%;
}
#sectionop-char02{
  width: 388px;
  right:30px;
  bottom:20%;
}
#sectionop-char03{
  width: 280px;
  left: auto;
  right: 360px;
  bottom:46%;
}
#sectionop-char04{
  width: 432px;
  left: auto;
  right: 420px;
  bottom:0%;
}
#sectionop-copy{
  top:32%;
  width: 60%;
}

#sectionop-h1{
  top:45%;
  width: 60%;
  padding:0 50px;
}

}
/*ニューススライダー*/
.section_news{}
.section_news .button__box{
  margin-top: 30px;
}
.btn-news {
  background: var(--recruit-primary);
  color: var(--recruit-text);
  border: none;
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-news:hover {
    background-color: var(--recruit-text);
    color: var(--recruit-surface);
    transform: translateY(-2px);
  }
  
.btn-news:active {
    transform: translateY(0);
  }
.swiper-container{
  position: relative;
  padding:0 20px 30px;
}
.swiper-wrapper{}
.swiper-slide{
  height: auto;
  overflow: hidden;
  position: relative;
}
.swiper-slide a{
  width: 100%;
  height: 100%;
  position: absolute;
  left:0;
  top:0;
  text-indent: -5000px;
}
.swiper-slide a:hover{
  background-color: rgba(0, 0, 0, 0.05);
}
.swiper-slide img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
  border: 1px solid var(--recruit-text);
}
@media screen and (min-width: 768px) {
.swiper-container{
  position: relative;
  padding:0 30px 50px;
}
}
/*新卒エントリー*/
.section_newgrad{
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  min-height: 50vh;
  align-items: center;
  margin:100px 0 20px
}
.section_newgrad .ul_newgradbg{
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  display: flex;
}

/* 初期状態（まだ見えていない） */
.section_newgrad .ul_newgradbg li {
  opacity: 0;
  transform: translateY(0);        /* ベースは0にしておく（後でnth-childで上書き） */
  transition: opacity 800ms ease, transform 800ms ease;
  will-change: opacity, transform;
}

/* 奇数番（1・3枚目）：下から上へ */
.section_newgrad .ul_newgradbg li:nth-child(1),
.section_newgrad .ul_newgradbg li:nth-child(3) {
  transform: translateY(40px);
}

/* 偶数番（2・4枚目）：上から下へ */
.section_newgrad .ul_newgradbg li:nth-child(2),
.section_newgrad .ul_newgradbg li:nth-child(4) {
  transform: translateY(-40px);
}

/* ul が「表示状態」になったら到達点へ */
.section_newgrad .ul_newgradbg.is-inview li {
  opacity: 1;
  transform: translateY(0);
}

/* ステップ（ずらし）ディレイ：0ms / 120ms / 240ms / 360ms 等 */
.section_newgrad .ul_newgradbg.is-inview li:nth-child(1) { transition-delay: 0ms; }
.section_newgrad .ul_newgradbg.is-inview li:nth-child(2) { transition-delay: 120ms; }
.section_newgrad .ul_newgradbg.is-inview li:nth-child(3) { transition-delay: 240ms; }
.section_newgrad .ul_newgradbg.is-inview li:nth-child(4) { transition-delay: 360ms; }

/* 低速回線・アクセシビリティ配慮：reduce motion のときは即時表示 */
@media (prefers-reduced-motion: reduce) {
  .section_newgrad .ul_newgradbg li {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.section_newgrad .ul_newgradbg li:first-child,
.section_newgrad .ul_newgradbg li:last-child{
  display: none;
}
@media screen and (min-width: 768px) {
.section_newgrad .ul_newgradbg li:first-child,.section_newgrad .ul_newgradbg li:last-child{
  display: block;
}
}
.section_newgrad .ul_newgradbg li img{
  object-fit: cover;
}
.section_newgrad .ul_newgradbg::after{
  position: absolute;
  content: "";
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
}
.section_newgrad .innerbox{
  display: flex;
  flex-direction: column;
  z-index: 10;
  text-align: center;
  color: var(--recruit-surface);
  padding:50px 20px;
}
.section_newgrad .newgrad_p{
  font-size: 18px;
  margin:40px 0 10px;
}
.section_newgrad .newgrad_h2{
  margin:10px 0 40px;
}
.btn-newgradentry {
  background: var(--recruit-primary);
  color: var(--recruit-text);
  border: none;
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-newgradentry:hover {
    background-color: var(--recruit-surface);
    transform: translateY(-2px);
  }
  
.btn-newgradentry:active {
    transform: translateY(0);
  }

@media screen and (min-width: 768px) {
.section_newgrad .innerbox{
  padding:100px 20px;
}
.section_newgrad .newgrad_p{
  font-size: 22px;
  margin:40px 0 10px;
}
.section_newgrad .newgrad_h2{
  margin:10px 0 40px;
}
}
/*カテゴリーバナー*/
.section_category{}
.ul_category{
  display: grid;
	grid-template-columns: repeat(2,calc(50% - 0.5em));
  gap:1em;
  list-style-type: none;
}
@media screen and (min-width: 768px) {
.ul_category{
	grid-template-columns: repeat(3,calc((100% / 3) - 1em));
  gap:1.5em;
}
}
.ul_category li img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
/*バナーエリア*/
.ul_banner{
  display: grid;
	grid-template-columns: repeat(2,calc(50% - 0.5em));
  gap:1em;
  list-style-type: none;
}
.ul_banner li img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/*ソーシャル*/
.div_socials{
  text-align: right;
  margin:50px auto;
}