@charset "UTF-8";

/* 共通 */

#container_Wrap{
  letter-spacing: 0.2em;
  line-height: 1.2;
  /* font-family: "Noto Sans JP", sans-serif; */
  /* font-weight: 300; */
  font-size: 18px;
}
section{
  padding-top: 130px;
  /* padding-bottom: 100px; */
}
.inner{
  max-width: 1200px;
  width: 90%;
}

.lh-02{
  line-height: 2;
}

.main_img { width: 100%;}
.main_img > div.main_Block {
position: relative;
width: 100%;
height: 600px;
padding-top: 20%;
background: url(../img/mv.jpg) no-repeat center bottom;
background-size: cover;
}
.main_img h2 {
display: block;
position: absolute;
top: 50%;
left: 45%;
max-width: 1000px;
width: 90%;
color: #fff;
font-size: 36px;
font-weight: 400;
letter-spacing: 0.2em;
line-height: 1.5;
/* text-shadow: 0 2px 5px rgba(0,0,0,.5); */
transform: translate(-45%,-50%);
}
.main_img h2 p:nth-of-type(1){
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
}
.main_img h2 p:nth-of-type(1)::before {
  content: "";           /* 擬似要素を表示するために必須 */
  display: inline-block; /* または block */
  width: 6px;            /* 横幅 */
  height: 30px;          /* 縦幅 */
  background-color: #ffffff; /* 長方形の色 */
  margin-right: 10px;      /* 本体との間隔 */
  vertical-align: middle; /* テキストの真ん中に揃えたい場合 */
  margin-bottom: 5px;
}

.content01{
  /* margin: auto; */
  text-align: center;
  padding-bottom: 130px;
}
.content01 h2{
  color: #29b729;
  font-size: 28px;
  position: relative; /* afterを絶対配置するために必要 */
  display: inline-block; /* 線の幅を文字幅に合わせたい場合 */
  padding-bottom: 20px;
  margin-bottom: 20px;
  font-weight: 600;
}
.content01 h2::after {
  content: ""; /* 擬似要素なので必須 */
  position: absolute;
  left: 50%; /* 中央寄せ */
  bottom: 0; /* 文字下に配置 */
  transform: translateX(-50%); /* 中央寄せの補正 */
  width: 60px; /* 線の長さ */
  height: 2px; /* 線の太さ */
  background-color: #29b729; /* 線の色 */
}

.content02{
  background: linear-gradient(to right, #f9fdf6, #d5f3fb);
  position: relative; /* imgを絶対位置で配置したい場合の親 */
}
.content02 > div{
  /* background-color: #fff; */
  display: flex;
  justify-content: space-between;
  
}
.content02 div div{
  width: 100%;
  height: 600px;
}
.content02 img{
  /* width: 50%; */
  position: absolute; /* 親sectionの右端に固定 */
  top: 50%;           /* 垂直中央に寄せる場合 */
  right: 0;           /* 画面右端にくっつける */
  width: 60vw;        /* 画面幅の60% */
  max-width: 830px;     /* 幅の上限も指定して安全に */
  transform: translateY(-50%); /* 垂直中央に寄せる */
  height: auto;
}


.ttl {
display: block;
padding: 0 0 15px;
color: #000000;
font-size: 28px;
font-weight: 500;
line-height: 1;
}
.ttl::before {
  content: "";           /* 擬似要素を表示するために必須 */
  display: inline-block; /* または block */
  width: 6px;            /* 横幅 */
  height: 28px;          /* 縦幅 */
  background-color: #29b729; /* 長方形の色 */
  margin-right: 10px;      /* 本体との間隔 */
  vertical-align: middle; /* テキストの真ん中に揃えたい場合 */
  margin-bottom: 4px;
}

.content02 ul{
  margin-top: 30px;
}

.content02 ul li{
  list-style: disc; /* 丸い点 */
  margin-left: 20px;
}
.content02 ul li::marker {
  font-size: 0.6em; /* 小さくする。1emが通常サイズ */
}

.content02 ul li{
  padding-bottom: 16px;

}



/* インタビュー */

.content03{
  position: relative;
}

.content03 .itv{
  position: absolute;
  top: 0;
  left: 0;
  color: #c9d0d8;
  font-size: 200px;
  line-height: 0.73;
  opacity: 0.2;
  font-family: 'Noto Sans JP';
}

.itv-u{
  margin-top: 130px;
}

.container{
  margin-top: 20px;
}
.container .flex{
  gap: 5%;
}


.itv-img{
  width: 40%;
}

.itv-txt h3{
  color: #007bce;
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.itv-txt h3 span{
  color: #38b729;
  font-size: 16px;
  font-weight: 400;
  margin-left: 16px;
}

.itv-txt > p{
  border-bottom: solid 2px #007bce;
  padding-bottom: 10px;
}


.itv-txt{
  width: 55%;
}
.itv-txt li{
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.li-ttl{
  font-weight: 500;
  font-size: 18px;
  margin-top: 20px;
}
.itv-time{
  margin: 80px auto 130px;
  text-align: center;
}
.itv-time img{
  width: 85%;
  padding: 0 4px 10px 4px;
}

/* インタビュー02 */
.content03 .container + .container{
  background-color: #f9fdf6;
  padding-top: 100px;
  padding-bottom: 30px;
}
.content03 .container + .container .itv-txt h3 span{
  color: #838383;
}


/* 募集要項 */
.job-detail {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2px;
  padding-bottom: 100px;
}
.job-detail dt {
  /* font-weight: bold; */
  background-color: #ededed;
  /* padding: 40px 60px; */
  text-align: center;
  padding: 40px;

}
.job-detail dd{
  background-color: #f4f3f3;
  text-align: left;
  padding: 40px;
}

/* エントリー */
.content05{
  background: linear-gradient(to right, #d5f3fb, #f9fdf6);
  text-align: center;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 100px;
}
.content05 h2{
  color: #29b729;
  font-size: 28px;
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
  margin-bottom: 20px;
  font-weight: 600;
}
.content05 h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background-color: #29b729;
}
.content05 img{
  max-width: 470px;
  width: 80%;
  margin-top: 20px;
}


/* フェードアニメ */
.fade_Box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade_Box.animated {
  opacity: 1;
  transform: translateY(0);
}

.fade_h2 {
  opacity: 0;
  transform: translate(-45%, -50%) translateY(30px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
  transition-delay: 0.5s; /* ← 遅延させる */
}

.fade_h2.animated {
  opacity: 1;
  transform: translate(-45%, -50%) translateY(0);
}


/* 横スクロール表示 */

.scroll-hint-icon {
  background: rgba(32, 32, 32, 0.7);
}

.scroll-hint-text {
  font-size: 10px;
  letter-spacing: 0.1em;
}




@media only screen and (max-width: 1050px) {
  /* .content02 img{
    width: 500px;
  } */
.pc { display: none;}
.tb { display: block;}
section{
  padding-top: 100px;
}
.content01{
  padding-bottom: 100px;
}
.content02{
  padding-bottom: 100px;
}

.content02 img{
  position: static;
  transform: translateY(0);
  width: 100%;
  max-width: 1000px;
  padding-top: 16px;
}
.content02 div div{
  height: auto;
}

/* インタビュー */
.content03 .itv{
  font-size: 150px;
}
.tb-flex{
  display: flex;
  gap: 3%; 
}
.tb-flex ul{
  width: 60%;
}
.itv-img{
  width: 37%;
  margin-top: 16px;
}
.itv-txt > p{
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.itv-txt{
  width: 100%;
}
.itv-txt li{
  font-size: 14px;
}
.li-ttl{
  font-size: 16px;
  margin-top: 10px;
}
.itv-time{
  margin: 30px auto 60px;
}
.itv-time img{
  width: 800px;
}


/* 募集要項 */
.job-detail dt {
  padding: 20px;

}
.job-detail dd{
  padding: 20px;
}




}


@media only screen and (max-width: 767px) {
section{
  padding-top: 60px;
}
/* FV */
.main_img > div.main_Block{
  height: 200px;
  padding-top: 30%;
}
.main_img h2{
  font-size: 18px;
}
.main_img h2 p:nth-of-type(1){
  font-size: 16px;
  margin-bottom: 4px;
}
.main_img h2 p:nth-of-type(1)::before {
  width: 4px;
  height: 16px;
  margin-right: 5px;
  margin-bottom: 3px;
}
.ttl {
padding: 0 0 10px;
font-size: 22px;
}

.content01 h2{
  font-size: 22px;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.lh-02{
  line-height: 1.8;
  text-align: left;
}
.content01{
  padding-bottom: 60px;
}
.content02{
  padding-bottom: 60px;
}

/* インタビュー */
.content03 .itv{
  font-size: 70px;
}
/* .container > div{
  flex-direction: column;
} */
.tb-flex{
flex-direction: column;
}
.itv-img {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 0px;
}
.itv-u{
  margin-top: 30px;
}
.itv-txt h3{
  font-size: 22px;
  letter-spacing: 0.05em;

}
.itv-txt h3 span{
  font-size: 12px;
  margin-left: 8px;
  letter-spacing: 0.05em;

}
.itv-txt > p {
  font-size: 14px;
  letter-spacing: 0.05em;
}
.li-ttl{
  margin-top: 16px;
}
.tb-flex ul{
  width: 100%;
}
/* .itv-time{
  width: 100%;
} */
.content03 .container + .container{
  padding-top: 60px;
}
/* スケジュール */
.itv-time img{
  width: 600px;
}

/* 募集要項 */
.job-detail{
  margin-top: 0px;
  grid-template-columns: 1fr; /* 1列にする */
}
.job-detail dt {
  padding: 4px;
  font-size: 16px;
  font-weight: 600;
  /* text-align: left; */
  background-color: #e5e3e3;
}
.job-detail dd{
  padding: 16px;
  font-size: 16px;
  /* margin-bottom: 8px; */
}

.content05{
  padding-top: 60px;
  padding-bottom: 60px;
}
.content05 h2{
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.content05 .lh-02{
  text-align: center;
  letter-spacing: 0.07em;
  line-height: 1.5;
}
.content05 img{
  width: 60%;
  margin-top: 16px;
}
/* スクロールヒント */
.scroll-hint-text {
  font-size: 8px;
  letter-spacing: 0.05em;
}
}