/*-------------- mainvisual ---------------*/
/*
.home .mainvisual .slide{
opacity: 0!important;
transition: opacity 2s ease!important;
}
.home .mainvisual .slide.slick-initialized{
opacity: 1!important;
}
.home .mainvisual .inner {
position: relative;
}
.home .mainvisual .slide {
position: relative;
width: 100%;
height: auto;
margin: auto;
line-height: 0;
}
.home .mainvisual img{
width: 100%;
height: auto;
}
*/
.home .mainvisual {
position: relative;
width: 100%;
margin-top: -55px;
}
.home .mainvisual .video_area {
/* PCでの高さ設定：画面高の85% または 画面幅に対する16:9高さ（56.25vw）の小さい方を採用 */
--mv-height: min(90vh, 56.25vw);

position: relative;
width: 100%;
height: var(--mv-height);
overflow: hidden;
}
.home .mainvisual .video_area > iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;

width: 100vw;
height: 56.25vw; /* 100vw * 9 / 16 */

/* 設定した高さに対して16:9になる最小サイズを自動計算 */
min-width: calc(var(--mv-height) * 16 / 9);
min-height: var(--mv-height);
}
.home .mainvisual .video_area .catch {
width: 36%;
position: absolute;
bottom:6.05%;
left: 3%;
z-index: 1;
color: #fff;
font-size:max(66.508px,3.46vw);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.15em;
white-space: nowrap;
}
@media only screen and (max-width: 767px) {
.home .mainvisual {
/*margin-top: 48px;*/
}
.home .mainvisual .video_area {
/* スマホでお好みの高さに変更する（例: 画面高の70%にする場合） */
--mv-height: 70vh; 
}
.home .mainvisual .video_area .catch {
width: auto;
max-width: auto;
min-width :auto;
position: absolute;
bottom:0;
left: 50%;
transform: translate(-50%,-50%);
font-size:7vw;
}
}

/*-------------- information_area ---------------*/
.news_area{
background: #fff;
}
.news_area .inner{
width: 1200px;
height: 140px;
margin: auto;
display: flex;
justify-content: space-between;
}
.news_area .inner h2{
width: 210px;
display: flex;
align-items: center;
}
.news_area .inner h2 a{
position: relative;
display: block;
line-height: 1;
color: #2b2a2a;
font-size:3.2rem;
font-family: "Raleway", sans-serif;
font-weight: 700;
text-decoration: none;
}
.news_area .wrap{
display: flex;
align-items: center;
width: 990px;
position: relative;
}
.slick-slide {
line-height: 0;
}
.news_area .wrap .article{
display: flex!important;
align-items: center;
width: 990px;
}
.news_area .wrap .article .text_wrap{
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
width: 850px;
height: 20px;
letter-spacing: 0.15em;
padding-right:240px ;
line-height: 1.3;
}
.news_area .wrap .article a{
width: 850px;
height: 20px;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
color: #333;
text-decoration: none;
padding-right:240px ;
background: url(../images/icon/icon-arrow-red.svg) no-repeat center right 8px;
background-size: 16px auto;
}
.news_area .wrap .article p{
font-size: 1.6rem;
font-weight: 500;
}
.news_area .wrap .article a:hover{
text-decoration:underline;
}
.news_area .wrap .article .date{
width: 140px;
display: inline-block;
font-size: 1.6rem;
font-family: "Barlow", sans-serif;
font-weight: 700;
color: #222222;
white-space: nowrap;
}
@media only screen and (max-width: 767px) {
.news_area{
background: #f7fafb url(../images/bg-news.jpg) no-repeat top left -80px;
background-size: 300% auto;
}
.news_area .inner{
display: block;
width: 100%;
height: auto;
padding: 15px;
}
.news_area .inner h2{
width: 100%;
display: block;
margin-bottom: 5px;
}
.news_area .inner h2 a{
font-size:1.6rem;
}
.news_area .wrap{
width: 100%;
}
.news_area .wrap .article{
display: block!important;
width: 100%;
}
.news_area .wrap .article .text_wrap{
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
width: 100%;
height: auto;
padding-right:10px ;
}
.news_area .wrap .article a{
width: 100%;
height: auto;
padding-right:40px ;
background: url(../images/icon/icon-arrow-red.svg) no-repeat center right 5px;
background-size: 12px;
}
.news_area .wrap .article p{
font-size: 1.3rem;
}
.news_area .wrap .article .date{
display: block;
width: 100%;
font-size: 1.4rem;
line-height: 1;
margin-bottom: 5px;
}
}

/*-------------- contents_index ---------------*/
.contents_index > .wrap{
display: flex;
flex-wrap: wrap;
gap: 40px;
padding: 0 40px 40px;
}
.contents_index > .wrap a{
width: calc((100% - 40px) / 2);
}
.contents_index > .wrap a{
color: #333;
display: block;
line-height: 1;
text-decoration: none;
transition: 0.5s;
}
.contents_index > .wrap a img{
display: block;
width: 100%;
height: auto;
background:#000;
border: 1px solid #d5d5d5;
border-radius: 10px;
transition: 0.5s;
}
.contents_index > .wrap a:hover img{
overflow: hidden;
opacity: 0.7;
}
.contents_index > .wrap a:hover{
color: #e00012;
}
.contents_index > .wrap a .ttl{
display: flex;
align-items: center;
gap: 28px;
margin: 20px 0 40px;
background: url(../images/icon/icon-arrow-red.svg) no-repeat center right;
}
.contents_index > .wrap a .ttl span:nth-child(1){
font-size: 4rem;
font-family: "Raleway", sans-serif;
font-weight: 700;
}
.contents_index > .wrap a h3 span:nth-child(2){
font-size: 1.6rem;
} 
.contents_index .interview_area{
width:100%;
background: #f5f5f7 url(../images/bg-interview.jpg) no-repeat top center;
background-size: 100% auto;
padding-top: 27%;
padding-bottom: 3.5%;
margin-bottom: 80px;
}
.contents_index .interview_area .wrap h3{
display: flex;
align-items: center;
gap: 28px;
width:100%;
}
.contents_index .interview_area .wrap a{
text-decoration: none;
}
.contents_index .interview_area .wrap h3 span:nth-child(1){
font-size: 4.8rem;
font-family: "Raleway", sans-serif;
font-weight: 700;
}
.contents_index .interview_area .wrap h3 span:nth-child(2){
font-size: 1.8rem;
font-weight: 600;
margin-left: 20px;
} 
.contents_index .interview_area .wrap{
width: 91.5%;
background:url(../images/bg-interview_area2.svg) no-repeat top center;
background-size: 100% auto;
padding: 5.3% 1.5% 0 9.5%;
margin-left: auto;
}
.contents_index .interview_area .staff_list a{
display: block;
color: #333;
text-decoration: none;
background: #fff;
transition: 0.3s;
border-radius: 0 0 10px 10px ;
}
.contents_index .interview_area .staff_list a img{ 
border-radius: 10px 10px 0 0 ;
}
.contents_index .interview_area .staff_list a:hover{
opacity: 0.7;
}
.contents_index .interview_area .staff_list a .text_wrap{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height:5vw;
min-height:63.9375px;
}
.contents_index .interview_area .staff_list a .text_wrap p{
font-size: max(16.627px,1.3vw);
font-weight: 400;
line-height: 1.3;
text-align: center;
}
.contents_index .interview_area .staff_list a .text_wrap p span{
color: #e00012;
}
.contents_index .interview_area .wrap .btn01{
margin-top: 3.5% ;
}
.contents_index .interview_area .wrap .btn01 a{
margin:auto;
}
.contents_index .interview_area .staff_list .slick-slide img{
width: 100%;
height: auto;
}
.contents_index .interview_area .staff_list .slick-slide{
margin: 0 0.28%;
}
.contents_index .interview_area .staff_list .slick-arrow{
cursor: pointer;
width: 51px;
height: 51px;
border: none;text-indent: -9999px;
transition: 0.3s;
}
.contents_index .interview_area .staff_list .slick-prev{
position: absolute;
top: -70px;
right: 71px;
background: url(../images/icon/icon-arrow-l.svg) no-repeat;
}
.contents_index .interview_area .staff_list .slick-next{
position: absolute;
top: -70px;
right: 10px;
background: url(../images/icon/icon-arrow-r.svg) no-repeat;
}
.contents_index .interview_area .staff_list .slick-arrow:hover{
opacity: 0.7;
}
@media only screen and (max-width: 767px) {
.contents_index > .wrap{
gap:6vw 5vw;
padding: 0 15px 30px;
}
.contents_index > .wrap a{
width:100%;
}
.contents_index > .wrap a img{
border-radius: 5px;
}
.contents_index > .wrap a .ttl{
gap: 3vw;
margin: 2vw 0 0;
background: url(../images/icon/icon-arrow-red.svg) no-repeat center right;
background-size: 12px;
}
.contents_index > .wrap a .ttl span:nth-child(1){
font-size: 6vw;
}
.contents_index > .wrap a .ttl span:nth-child(2){
font-size: 3vw;
}
.contents_index > .wrap:last-child{
gap:6vw 0;
justify-content: space-between;
padding: 30px 15px 0;
}
.contents_index > .wrap:last-child a{
display: block;
width: calc((100% - 15px) / 2);
padding: 0 0 40px;
}
.contents_index > .wrap:last-child a img{
width: 100%;
height: 42.5vw;
object-fit: cover;
}
.contents_index > .wrap:last-child a .ttl{
display: block;
}
.contents_index > .wrap:last-child a .ttl span:nth-child(1){
font-size: 5vw;
display: block;
margin-bottom: 1vw;
}
.contents_index > .wrap:last-child a .ttl span:nth-child(2){
font-size: 3vw;
display: block;
}

.contents_index .interview_area{
width:100%;
background: #f5f5f7 url(../images/bg-interview.jpg) no-repeat top center;
background-size: 100% auto;
padding-top: 27%;
padding-bottom: 6%;
margin-bottom: 0;
}
.contents_index .interview_area .wrap h3{
display: flex;
align-items: center;
gap: 2vw;
width:100%;
padding-bottom: 5vw;
}
.contents_index .interview_area .wrap h3 span:nth-child(1){
font-size: 6vw;
}
.contents_index .interview_area .wrap h3 span:nth-child(2){
font-size: 4vw;
} 
.contents_index .interview_area .wrap{
width: 96%;
padding: 5.3% 30px 0 15px;
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
border-radius: 4vw 0 0 0;
}
.contents_index .interview_area .staff_list a .text_wrap{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height:20vw;
min-height:20vw;
}
.contents_index .interview_area .staff_list a .text_wrap p{
font-size: 4.5vw;
}
.contents_index .interview_area .wrap .btn01{
margin-top: 6vw;
}
.contents_index .interview_area .staff_list .slick-slide{
margin: 0;
}
.contents_index .interview_area .staff_list .slick-arrow{
width: 8.5vw;
height: 8.5vw;
transition: initial;
}
.contents_index .interview_area .staff_list .slick-prev{
position: absolute;
top: -14.5vw;
right: 10.5vw;
background: url(../images/icon/icon-arrow-l.svg) no-repeat;
background-size: 100% auto;
}
.contents_index .interview_area .staff_list .slick-next{
position: absolute;
top: -14.5vw;
right: 0;
background: url(../images/icon/icon-arrow-r.svg) no-repeat;
background-size: 100% auto;
}
}


/*-------------- banner_area ---------------*/
.banner_area{
padding-top: 31.25%;
background: url(../images/bg-banner-area.jpg) no-repeat top center;
background-size: 100% auto;
}
.banner_area ul{
display: flex;
flex-wrap: wrap;
gap: 30px;
padding: 80px 0;
}
.banner_area ul li a{
display: block;
transition: 0.5s;
}
.banner_area ul li a:hover{
opacity: 0.7;
}
@media only screen and (max-width: 767px) {
.banner_area{
padding: 62.5% 0 40px;
background: url(../images/bg-banner-area.jpg) no-repeat top center;
background-size: 200% auto;
}
.banner_area .inner{
width: 100%;
}
.banner_area ul{
justify-content: center;
gap: 10px;
padding: 40px 0 0;
}
.banner_area ul li:nth-child(1),.banner_area ul li:nth-child(2),.banner_area ul li:nth-child(3){
width: calc((100% - 10px) / 2);
}
.banner_area ul li a{
display: block;
transition: 0.5s;
}
.banner_area ul li a:hover{
opacity: 0.7;
}
}

/*================================trans================================*/
.tMv01{
opacity: 0;
transform: translateY(200px);
}
.tMv01.mv01{
animation-name: SlideInAnime01;
animation-fill-mode:forwards;
animation-duration:1.5s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0;
animation-direction:normal;
}
@keyframes SlideInAnime01{
  0% {
  opacity: 0;
  transform: translateY(200px);
  }
  100% {
  opacity: 1;
  transform: translateY(0);
  }
}
.tMv01_2{
opacity: 0;
transform: translateY(200px);
}
.tMv01_2.mv01_2{
animation-name: SlideInAnime01_2;
animation-fill-mode:forwards;
animation-duration:2s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0;
animation-direction:normal;
}
@keyframes SlideInAnime01_2{
  0% {
  opacity: 0;
  transform: translateY(200px);
  }
  100% {
  opacity: 1;
  transform: translateY(0);
  }
}
.tMv01_3{
opacity: 0;
transform: translateY(200px);
}
.tMv01_3.mv01_3{
animation-name: SlideInAnime01_3;
animation-fill-mode:forwards;
animation-duration:2.5s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0;
animation-direction:normal;
}
@keyframes SlideInAnime01_3{
  0% {
  opacity: 0;
  transform: translateY(200px);
  }
  100% {
  opacity: 1;
  transform: translateY(0);
  }
}
.tMv01_4{
opacity: 0;
transform: translateY(200px);
}
.tMv01_4.mv01_4{
animation-name: SlideInAnime01_4;
animation-fill-mode:forwards;
animation-duration:3s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0;
animation-direction:normal;
}
@keyframes SlideInAnime01_4{
  0% {
  opacity: 0;
  transform: translateY(200px);
  }
  100% {
  opacity: 1;
  transform: translateY(0);
  }
}

.tMv02 {
opacity: 0;
transform: translateX(-200px);
}
.tMv02.mv02 {
animation-name: SlideInAnime02;
animation-fill-mode:forwards;
animation-duration:1.5s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0;
animation-direction:normal;
}
@keyframes SlideInAnime02{
  0% {
  opacity: 0;
  transform: translateX(-200px);
  }
  100% {
  opacity: 1;
  transform: translateX(0);
  }
}

.tMv03 {
opacity: 0;
transform: translateX(100px);
}
.tMv03.mv03 {
animation-name: SlideInAnime03;
animation-fill-mode:forwards;
animation-duration:1.5s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0;
animation-direction:normal;
}
@keyframes SlideInAnime03{
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

.tMv04 {
opacity: 0;
transform: translateY(-100px);
}
.tMv04.mv04 {
animation-name: SlideInAnime04;
animation-fill-mode:forwards;
animation-duration:1.5s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0;
animation-direction:normal;
}
@keyframes SlideInAnime04{
  0% {
  opacity: 0;
  transform: translateY(-100px);
  }
  100% {
  opacity: 1;
  transform: translateY(0);
  }
}

@media print, screen and (max-width: 767px) {
.tMv01{
opacity: 0;
transform: translateY(50px);
}
@keyframes SlideInAnime01{
  0% {
  opacity: 0;
  transform: translateY(50px);
  }
  100% {
  opacity: 1;
  transform: translateY(0);
  }
}
.tMv01_2{
opacity: 0;
transform: translateY(50px);
}
.tMv01_2.mv01_2{
animation-name: SlideInAnime01_2;
animation-fill-mode:forwards;
animation-duration:1.5s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0;
animation-direction:normal;
}
@keyframes SlideInAnime01_2{
  0% {
  opacity: 0;
  transform: translateY(50px);
  }
  100% {
  opacity: 1;
  transform: translateY(0);
  }
}
.tMv01_3{
opacity: 0;
transform: translateY(50px);
}
.tMv01_3.mv01_3{
animation-name: SlideInAnime01_3;
animation-fill-mode:forwards;
animation-duration:1.5s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0;
animation-direction:normal;
}
@keyframes SlideInAnime01_3{
  0% {
  opacity: 0;
  transform: translateY(50px);
  }
  100% {
  opacity: 1;
  transform: translateY(0);
  }
}
.tMv01_4{
opacity: 0;
transform: translateY(50px);
}
.tMv01_4.mv01_4{
animation-name: SlideInAnime01_4;
animation-fill-mode:forwards;
animation-duration:1.5s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0;
animation-direction:normal;
}
@keyframes SlideInAnime01_4{
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

.tMv02 {
opacity: 0;
transform: translateY(50px);
}
.tMv02.mv02 {
animation-name: SlideInAnime02;
animation-fill-mode:forwards;
animation-duration:1.5s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0;
animation-direction:normal;
}
@keyframes SlideInAnime02{
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

.tMv03 {
opacity: 0;
transform: translateY(50px);
}
.tMv03.mv03 {
animation-name: SlideInAnime03;
animation-fill-mode:forwards;
animation-duration:1.5s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0;
animation-direction:normal;
}
@keyframes SlideInAnime03{
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

.tMv04 {
opacity: 0;
transform: translateY(50px);
}
.tMv04.mv04 {
animation-name: SlideInAnime04;
animation-fill-mode:forwards;
animation-duration:1.5s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0;
animation-direction:normal;
}
@keyframes SlideInAnime04{
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
}

#launcher{display: none;}