@charset "utf-8";

#business{  width:100%;   margin:1060px auto 0;   position:absolute}

#business .business-wrapper{  position:absolute;   top:0;   left:0;   margin-top:80px;   background:#fff;   width:55%;   z-index:5}

#business .business-box{  text-align:center}

#business .business-box h2{  color:#CF1126;   font-family:'Roboto',sans-serif;   font-weight:900;   letter-spacing:0.18em;   font-size:min(6vw,90px);   line-height:1em;   text-align:right;   padding:30px 0 0;   margin-left:20%;   text-align:center}

#business .business-box h3{  font-size:1.25rem;   letter-spacing:0.1em;   padding:10px 0 30px;   margin-left:20%}

#business .business-box p{  font-size:0.9375rem; padding:0 20px; margin-left:20%}

#business .business-img1 img,
#business .business-img2 img,
#business .business-img3 img{  max-width:480px}

#business .business-img1{  position:absolute;   top:0;   left:50%;   z-index:2}

#business .business-img2{  position:absolute;   top:235px;   right:2%;   z-index:3}

#business .business-img3{  position:absolute;   top:470px;   left:46%;   z-index:4}

#business .link{  position:relative;   width:320px;   display:inline-block;   margin:30px auto 45px;   margin-left:20%}

#business .link a{  display:inline-block;   border:solid #CF1126 1px;   padding:14px 20px;   font-size:1.125rem;   width:300px;   color:#CF1126}

#business .business-carousel{  display:none}

@media (max-width:959px){#business .business-box h2{  font-size:min(10vw,50px);   line-height:10vw;   text-align:center;   padding:10px 20px 0;   margin:0 auto}

#business .business-box h3{  font-size:0.875rem;   letter-spacing:0.1em;   padding:0 20px 15px;   margin:0 auto}

#business .business-box p{  font-size:0.9375rem;   padding:0 10px;   margin:0 auto}

#business{  width:100%;   margin:0 auto 0;   position:relative}

#business .business-wrapper{  position:relative;   top:0;   left:0;   margin-top:20px;   background:#fff;   width:100%}

#business .business-img1,
#business .business-img2,
#business .business-img3{  display:none}

#business .link{  width:100%;   margin:20px auto 30px;   padding:0 40px;   position:relative}

#business .link a{  width:100%}

#business .business-carousel{  display:block;   margin:20px auto 0;   height:43vw}

}

#career-path{  width:100%;   margin:1820px auto 0;   position:absolute;   text-align:center}

#career-path .career-wrapper{  position:relative;   width:100%}

#career-path h2{  color:#CF1126;   font-family:'Roboto',sans-serif;   font-weight:900;   letter-spacing:0.18em;   font-size:min(6vw,90px);   line-height:1em;   padding:30px 0 0;   text-align:center}

#career-path h3{  font-size:1.25rem;   letter-spacing:0.1em;   padding:10px 0 25px}

#career-path p{  font-size:0.9375rem; padding:0 20px 40px}

#career-path .img-box{  max-width:100%}

#career-path .link{  position:relative;   width:320px;   display:inline-block;   margin:50px auto 45px}

#career-path .link a{  display:inline-block;   border:solid #CF1126 1px;   padding:14px 20px;   font-size:1.125rem;   width:300px;   color:#CF1126}

@media (max-width:959px){#career-path{  width:100%;   margin:0 auto 0;   position:relative}

#career-path .link{  width:100%;   margin:20px auto 30px;   padding:0 40px;   position:relative}

#career-path .link a{  width:100%}

#career-path h2{  font-size:min(10vw,50px);   line-height:10vw;   text-align:center;   padding:10px 20px 0;   margin:10px auto 0}

#career-path h3{  font-size:0.875rem;   letter-spacing:0.1em;   padding:0 20px 15px;   margin:0 auto}

#career-path p{  font-size:0.9375rem;   padding:0 20px 20px}

}

#interview-index{  width:100%;   margin:0 auto;   position:absolute;   text-align:center;   margin-top:calc(40vw + 2310px)}

@media (min-width:1201px){#interview-index{  margin-top:2820px}
}

#interview-index .interview-index-wrapper{  position:relative;   max-width:100%;   margin-left:11%}

@media (min-width:1538px){#interview-index .interview-index-wrapper{  --widthA:calc(100vw - 1200px);   --widthB:calc(var(--widthA) / 2);  margin-left:var(--widthB)}
}

#interview-index .main-box{ width:100%}

#interview-index .interview-carousel{ height:490px;  position:relative}

#interview-index .interview-carousel .carousel-cell{ position:relative;  width:280px;  height:490px;  margin-left:5px}

#interview-index .interview-carousel .carousel-cell.is-selected{ width:350px;  height:490px}

#interview-index .interview-carousel .carousel-cell img{ border-radius:20px;  width:250px;  height:350px;  transition:all .5s;  position:absolute;  left:100px;  top:120px}

#interview-index .interview-carousel .is-selected img{ width:350px;  height:490px;  position:absolute;  left:0;  top:0}

#interview-index .caption{ display:none}

#interview-index .interview-carousel .is-selected .caption{ display:block;  color:#fff;  position:absolute;  top:46.5%;  bottom:0;  left:0;  right:0;  text-align:center;  font-size:1rem;  font-weight:bold;  text-shadow:1px 0 0 #333,0 1px 0 #333}

#interview-index .flickity-button{ background:#CF1126}

#interview-index .flickity-prev-next-button .flickity-button-icon{ color:#fff}

#interview-index .flickity-prev-next-button{ top:66%}

#interview-index .flickity-prev-next-button.previous{ left:18px}

#interview-index .flickity-prev-next-button.next{ right:18px}

#interview-index .hbox{ position:absolute;  top:0;  left:380px;  z-index:7}

#interview-index h2{ color:#CF1126;  font-family:'Roboto',sans-serif;  font-weight:900;  letter-spacing:0.18em;  font-size:min(6vw,90px);  line-height:0.72em;  padding:0 0 0;  text-align:left}

#interview-index h3{ font-size:1.25rem;  letter-spacing:0.1em;  padding:10px 0 25px;  text-align:left}

#interview-index .link{ position:relative;  width:320px;  display:inline-block;  margin:50px auto 45px}

#interview-index .link a{ display:inline-block;  border:solid #CF1126 1px;  padding:14px 20px;  font-size:1.125rem;  width:300px;  color:#CF1126}

@media (max-width:959px){#interview-index{ width:100%;  margin:0 auto 0;  position:relative}

#interview-index .interview-index-wrapper{ margin:0 auto;  padding:0 0 0 40px}

#interview-index .hbox{ position:relative;  top:0;  left:0}

#interview-index h2{ font-size:min(10vw,50px);  line-height:10vw;  text-align:center;  padding:10px 20px 0;  margin:10px auto 0}

#interview-index h3{ font-size:0.875rem;  letter-spacing:0.1em;  padding:0 20px 15px;  margin:0 auto;  text-align:center;  z-index:3;  position:relative}

#interview-index .link{ width:100%;  margin:10px auto 50px;  padding:0 40px;  position:relative}

#interview-index .link a{ width:100%}


}

@media (max-width:600px){ #interview-index .interview-index-wrapper{ margin:0 auto;  padding:0}

#interview-index .interview-carousel .is-selected .caption{ top:47%;  height:auto;  font-size:0.875rem;  padding:0 20px}

#interview-index .flickity-prev-next-button{ top:50%}

#interview-index .flickity-prev-next-button.previous{ left:5px}

#interview-index .flickity-prev-next-button.next{ right:5px}

#interview-index .interview-carousel{  height:calc(76vw * 1.37);  max-height:500px;  position:relative}

#interview-index .interview-carousel .carousel-cell{ position:relative;  width:76%;  max-width:370px;  height:auto;  padding:10px}

#interview-index .interview-carousel .carousel-cell.is-selected{ width:76%;  max-width:370px;  height:auto}

#interview-index .interview-carousel .carousel-cell img{ border-radius:20px;  width:100%;  height:auto;  transition:all .5s;  position:relative;  left:0;  top:0}

#interview-index .interview-carousel .is-selected img{ width:100%;  height:auto;  position:relative;  left:0;  top:0}

}

.index-end{ position:relative}

@media (min-width:960px){ .index-end{ margin-top:calc(35vw + 1050px)}
}

@media (min-width:1201px){ .index-end{ margin-top:1510px}
}
