@charset "utf-8";
 /* ====================================
    recruit site Top Page
=======================================*/
/*loading */
#loading{width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;}
#loading .scrollLine{position: absolute; bottom:50%; left:25%; width:50%; height:1px; overflow: hidden;}
#loading .scrollLine .baseLine{width: 100%; height:1px; background: #eee;}
#loading .scrollLine .overlapLine{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 1px;
    display: block;
    top: 0;
    background: #000;
    -webkit-animation: loadingline 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
    animation: loadingline 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
@keyframes loadingline {
  0% { left:-100%; }
  100% { left:100%; }
}
#loading.loaded {
  opacity: 0;
  visibility: hidden;
}

/*reset*/
main ul{margin:0; padding:0;}
main a{transition:500ms all;}
/* inview */
main .w1000, main .wFull{margin-bottom: 150px;overflow: hidden;}
.inview.left{ position:relative;
    transition:all 1s ease;
    transition-delay: 0.8s;
    -webkit-transform:translateX(-5%) ;
    transform:translateX(-5%);
    opacity:0;
}
.inview.inviewShow.left{-webkit-transform:translateX(0) ;
transform:translateX(0); opacity:1;}

.inview.right{ position:relative;
    transition:all 1s ease;
    transition-delay: 0.8s;
    -webkit-transform:translateX(5%) ;
    transform:translateX(5%);
    opacity:0;
}
.inview.inviewShow.right{-webkit-transform:translateX(0) ;
transform:translateX(0); opacity:1;}

.inview.bottom{ position:relative;
    transition:all 1s ease;
    transition-delay: 0.4s;
    -webkit-transform:translateY(5%) ;
    transform:translateY(5%);
    opacity:0;
}
.inview.inviewShow.bottom{-webkit-transform:translateY(0) ;
transform:translateY(0); opacity:1;}
.inview.fade{opacity: 0;transition:all 1s ease;transition-delay: 0.8s;}
.inview.inviewShow.fade{opacity: 1;}

 /* delay */
.d1{transition-delay: 0.1s !important;}
.d2{transition-delay: 0.2s !important;}
.d3{transition-delay: 0.3s !important;}
.d4{transition-delay: 0.4s !important;}
.d5{transition-delay: 0.5s !important;}
.d6{transition-delay: 0.6s !important;}
.d8{transition-delay: 0.8s !important;}
.d10{transition-delay: 1s !important;}
.t2{transition-duration:2s !important;}


/* mainimg */
.mainimg{height: 100vh; overflow: hidden; position: relative;}
.mainSlide{ position: relative; height: 100%;}
.mainSlide li{ position: absolute; top:0; left:0; height: 100%; }
/*.mainSlide .imgframe>img{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);}*/

/* main1 main2 */
.main1 .imgframe, .main2 .imgframe{width:100vw;    height: 100%; position: absolute; top:0;}
.main1{z-index: 0;}
.main2{z-index: 1;}
.main3{z-index: 2;}
.main1, .main2{
    display: flex;
    align-items: center;}
.main1txt, .main2txt{position: absolute;
    top: 50%;
    left: 50%; width: 90%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);}
.main1txt .shoulder, .main2txt .shoulder{color:#fff;font-family: 'Oswald', sans-serif; letter-spacing: 0.2em;
    font-weight: 500; font-size: 24px;display: inline-block;    margin-bottom: 20px;}
.main1txt p , .main2txt p{display: flex;}
.main1txt p img , .main2txt p img{height: 6.3vw;}
.main1txt p img:last-child , .main2txt p img:last-child{margin-left:1vw;}

.main1txt p img:first-child{width:56vw;}
.main1txt p img:last-child{width:27vw;}
.main2txt p img:first-child{width:55vw;}
.main2txt p img:last-child{width:30vw;}


/*main3*/
.main3 .imgframe{width:100vw; height: 100%; }
.main3 h1{text-indent: -9999px;}
.main3txt{position: absolute; display: flex; flex-direction:row-reverse;width: 100vw;
    justify-content: space-between;
    top: 0;
    padding: 10vh 4vw 0 2vw;}
.main3txt img{
    width: 13vw;
    height: 13vw;
    margin-bottom: 1vw;
    }
.line {width: 13vw;overflow: hidden;}
/* の　*/
.main3txt .l3 img:nth-child(3){height:9vw;}
/* ブレイン */
.main3txt .l4{position: relative;}
.main3txt .l4 img{height:27vw;position: absolute;    top: 0;}
.main3txt .l4 img:last-child{opacity: 0;}
/*　と　れ。 */
.main3txt .l5 img:first-child{height:12vw;}
.main3txt .l5 img:last-child{height:17vw;}

.main3 .btn{    position: absolute;    bottom: 9vh;   left: calc(50% - 315px / 2);
    width: 315px;
    overflow: hidden;-webkit-transform: translate3d(0,0,0)}
.main3 .btn a{      position: relative;
    z-index: 1;  margin: 0 auto; padding: 19px 11px 19px 44px;   display: block;    color: #fff;    background: #ce121b;    width: 315px;    text-align: center;font-family: 'Noto Serif JP', serif; font-size: 18px;     font-weight: 500;  letter-spacing: 0.08em; line-height: 1; text-decoration: none;}
.main3 .btn a span{  display: block; font-family: 'Oswald', sans-serif;    font-weight: 700;  letter-spacing: 0.25em;  font-size: 8px; margin-bottom: 7px;}
.main3 .btn a:hover{text-decoration: none; color:#ce121b;}
.main3 .btn a::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    content: '';
    z-index: -1;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translate3d(-100%, 0, 0);
    transition: .3s;}
.main3 .btn a:hover::before {    transform: translate3d(0, 0, 0);}
.main3 .btn a:hover .arwWht::before {background:#ce121b;}
.main3 .btn a:hover .arwWht::after {border-color:#ce121b;}

.main3 .scrollLine{position: absolute; bottom:0; left:50%; height:6vh; overflow: hidden;}
.main3 .scrollLine .baseLine{width:1px; height:6vh; background:#555;}
.main3 .scrollLine .overlapLine{position: absolute;
    z-index: 2;
    width: 100%;
    height: 6vh;
    display: block;
    top: 0;
    background: #fff;
    -webkit-animation: scrollline 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
    animation: scrollline 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
@keyframes scrollline {
  0% {    top:-100%;}
  100% {    top:100%;  }
}

/* pick up message */
.pickup{position: relative;}
.pickup h2{position: absolute; height: 100%;     max-width: 80%; z-index: 0; padding:20px 0;}
.pickup h2 img{height: 100%;     max-width: 100%;}
.pickup ul{position: relative; text-align: center; padding:132px 0 0;}
.pickup ul li{list-style: none; margin-bottom: 60px;}
.pickup ul li:last-child{margin-bottom:0;}
.pickup ul li p{font-family: 'Noto Serif JP', serif; font-size: 24px;    padding-bottom: 3px;
    font-weight: 500;}
.pickup .arw,
.pickup .arwGry{font-family: 'Oswald', sans-serif;
    font-weight: 700; font-size:12px; margin-left: 50px;}
.pickup .arwGry{color: #7f7f7f;}
.pickup ul li a{display: block; color:#000; text-decoration: none;}
.pickup ul li a:hover{color:#ce121b; text-decoration: none;}


/* bnr */
.bnr{overflow: hidden;    margin-bottom: 0; display: block;}
.bnr a,
.bnr .nolink{position: relative; display: block;}
.bnr img{ width:100%; transition:500ms all;}
.bnr .ttl{    position: absolute; transition:500ms all;top:50%; left:50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);
    text-align: center;
    color: #fff; }
.bnr .ttl p{font-family: 'Oswald', sans-serif;
    font-weight: 500; font-size:12px;     padding-bottom: 0;letter-spacing: 0.2em;}
.bnr .ttl h2{font-family: 'Noto Serif JP', serif; font-size: 44px; font-weight: 500; margin-bottom:15px;letter-spacing: 0.25em; white-space: nowrap;}
.bnr .ttl span{font-family: 'Noto Serif JP', serif; font-size: 20px;}
.bnr a:hover img{transform:scale(1.05,1.05);}


/* seciton */
main section.section{    margin: 132px auto;;}
/* h2 */
.h2Ttl{font-family: 'Noto Serif JP', serif; font-size: 20px; font-weight: 500; letter-spacing: 0.08em; text-align: center; margin-bottom: 80px;}
.h2Ttl span{font-family: 'Oswald', sans-serif;
    font-weight: 500; font-size:12px; color:#7f7f7f; display: block; margin-bottom: 13px; letter-spacing: 0.25em;}

/* information */
.flex{display: flex; justify-content: space-between;}
.flex li{list-style: none; width:25%; margin-right: 10px;}
.flex li:last-child{margin-right: 0;}
.flex li img{max-width: 100%; transition:500ms all;}
.flex li .arw{display: inline-block;}
.flex li a{color:#000; font-family: 'Noto Serif JP', serif; font-weight: 500; letter-spacing: 0.08em;}
.flex li a:hover{color:#d0121b;}
.flex li a:hover img{ transform:scale(1.05,1.05);}
.flex li .frame{overflow: hidden;}

/* what's new */
.news{display: flex; flex-wrap: wrap; font-weight: 300;}
.news dt{    width: 10em;}
.news dd{    width: calc(100% - 10em);
    margin: 0 0 1em 0;}
.news dd a{color:#000; text-decoration: underline;}
.news dd a:hover{text-decoration: none; color: #ce121b;}

@media only screen and (max-width: 1280px){
    .w1200 , .w1000{padding:0 10px;}
}

@media (orientation: landscape)  {
    .mainSlide li{max-height: 1100px; height: 100vh;overflow: hidden;}
    .mainSlide .imgframe>img{ width:120%; height:auto;}
    .mainSlide .main1 .imgframe>img,.mainSlide .main2 .imgframe>img{
        margin-top: -10%;
        }
    .mainSlide .imgframe .mainimg3{position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
}

@media  (min-aspect-ratio: 33/23)and (max-aspect-ratio: 359/309){
    .mainSlide .main1 .imgframe>img,
    .mainSlide .main2 .imgframe>img{width: auto;
    height: 100%;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;}
}
@media  (min-aspect-ratio: 1/1) and (max-aspect-ratio: 359/309){
    .mainimg{height: 80vh;}
    .mainSlide li{height: 80vh; overflow: hidden;}
    .mainSlide .imgframe>img{width:110%; height:auto;}
    .mainSlide .imgframe>img.mainimg1{width:115%;}
    .main1txt p, .main2txt p{display: block;}
    .main1txt p img, .main2txt p img {    height: 10vw; margin-bottom: 1vw;}
    .main1txt .shoulder, .main2txt .shoulder{font-size: 18px;}
}
@media  (min-aspect-ratio: 1366/715){
    .mainSlide .main1 .imgframe>img ,
    .mainSlide .main2 .imgframe>img {margin-top: 0;
    height: auto;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    transform: translate(-40%,-40%);
    top: 40%;
    left: 40%;
    }
    .main3txt{padding: 10vh 10vw 0 10vw;}
    .main3txt img {     width: 9vw;    height: 9vw;    margin-bottom: 0.5vw;}
    .line {    width: 10vw;}
    .main3txt .l3 img:nth-child(3) {    height: 7vw;}
    .main3txt .l5 img:first-child {    height: 10vw;}
    .main3txt .l4 img {    height: 20vw;}
    .main3txt .l5 img:last-child {    height: 13vw;}
    .main3 .btn{bottom: 7vh;}
}

@media (orientation: portrait) {
    .mainimg{height: 100vh;  height: calc(var(--vh, 1vh) * 100);}
    .mainSlide li{overflow: hidden;}
    .mainSlide .imgframe *[class^="mainimg"]{width:auto !important; height: 100vh; }
    .mainSlide .imgframe>img.mainimg1,
    .mainSlide .imgframe>img.mainimg2{position: absolute; top:50%; left: 50%; transform:translate(-50%,-50%);}
    .mainSlide .imgframe .mainimg3{position: absolute;
    margin-left: 0;
    width: auto;
    right: 50%;
    left: inherit;
    top: 0;
    transform: translate(0,0);
    margin-right: -44vh;}
    .main1txt p, .main2txt p{display: block;}
    .main1txt p img, .main2txt p img{    height: 10.3vw; width:auto !important;
    margin-bottom: 0.8em;}
    .main1txt .shoulder, .main2txt .shoulder{font-size:20px;}


    /* mainimg*/
     .main3txt{padding-left: 4vw;padding-top: 15vh;}
     .main3txt img{width: 15vw;height: 15vw;}
     .line {width: 15vw;}
     .main3txt .l3 img:nth-child(3) {height: 12vw;}
     .main3txt .l4 img {height: 32vw;}
     .main3txt .l5 img:first-child {height: 16vw;}
     .main3txt .l5 img:last-child {height: 21vw;}
}
@media (max-width: 767px) and (orientation: portrait) {
    main .w1000, main .wFull{margin-bottom: 80px;}
    main .pickup.wFull{margin-bottom: 0;}
    .mainSlide .imgframe .mainimg3{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100% !important;
        height: auto;
    }
    /* pick up message */
    .pickup h2{height:auto; width: 57vw;    padding-left: 20px;}
    .pickup ul{padding:80px 0}
    .pickup ul li{margin-bottom: 35px;}
    .pickup ul li p{font-size:4.8vw;  letter-spacing: 0; line-height: 1.5; margin-bottom: 0;}
    .pickup .arw, .pickup .arwGry{font-size:11px;}

    /* bnr */
    .bnr .ttl h2{font-size: 36px;white-space: nowrap;}
    .bnr img {    width: 210%;    margin-left: -55%;}
    .bnr:last-child img{margin-left:-90%;}

    /* section */
    main section.section{margin:80px 0;}
    .h2Ttl{margin-bottom: 40px;}

    /* information */
    .flex{flex-wrap: wrap;}
    .flex li{width: calc(50% - 5px);}
    .flex li:first-child{margin-bottom: 30px;}
    .flex li:nth-child(2n){margin-right: 0;}

    /* news */
    .news{display: block;}
    .news dt, .news dd{width:100%;}

}