@charset "UTF-8";

/*--------------------------------------------------------------------------- mv */

/* slick */

/*.mvBox {
    background: url(../images/top/mv_bg.png) top center / cover no-repeat;
    position: relative;
    margin-bottom: 160px;
}*/

.mvBox {
    background: url(../images/top/mv_bg_plus.jpg) center top / 3000px no-repeat;
    position: relative;
    margin-bottom: 160px;
}

.mvBox:after {
    position: absolute;
    content: "";
    background: url(../images/top/mv_bg_02.svg) center bottom / cover no-repeat;
    bottom: -1px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 145px;
}

#slideBoxFlame {
   max-width: 1500px;
   margin: 0 auto;
}

#slideBox {
   position: relative;
}

/* slick */
.slick-slider {
   width: 100%;
   /*max-width: 1280px;*/
}

.slick-dots{text-align: center;}
.slick-dots li{display: inline-block;margin: 0 2px;}


/* 効果をかけるためのスタイル設定 */
#slick-main .slick-slide{
    /* slickによってelement.styleで付けられるopacityを無効化 */
    opacity: 1 !important;
}
#slick-main .slideobject{
    /* フェード要素の初期設定 */
    opacity: 0;
    transition: 0s;
}
#slick-main .slick-active .slideobject{
    /* slick-active(効果開始)の際のフェード設定 */
    /* [重要]slick側の設定と同じdurationを取る */
    opacity: 1;
    transition: ease 5.0s;
}
#slick-main .slick-continue .slideobject{
    /* エフェクトの継続用に付与したslick-continueのフェード設定 */
    /* [重要]slick側の設定と同じdurationを取る */
    opacity: 0;
    transition: ease 5.0s;
}

/* 画像 */
#slick-main figure.image.pic1{
    background-image: url(../images/top/mv_img_01.png);
}

#slick-main figure.image.pic2{
    background-image: url(../images/top/mv_img_02.png);
}

#slick-main figure.image.pic3{
    background-image: url(../images/top/mv_img_03.png);
}

#slick-main figure.image.pic4{
    background-image: url(../images/top/mv_img_04.png);
}

/* スライド周りの基本スタイル */
.slideobject{
    padding-top: 58%;
    margin-top: 0px;
    position: relative;
    z-index: 10;
    overflow: hidden;
    vertical-align: bottom;
    width: 100%;
    /*height: calc(var(--vh, 1vh) * 100);*/
}

.slideobject figure.image{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* mv_heart_deco */

.mvBox .mv_heart {
    width: min(520px, 34.7%);
}

.mvBox .mvht_deco01 {
    top: 2%;
    left: -12%;
}

.mvBox .mvht_deco02 {
    top: 5%;
    left: 15%;
}

.mvBox .mvht_deco03 {
    top: 4%;
    left: 60%;
}

.mvBox .mvht_deco04 {
    top: 35%;
    left: 81%;
}

.mvBox .mvht_deco05 {
    top: 49%;
    left: 5%;
}

.mvBox .mvht_deco06 {
    top: 59%;
    left: 46%;
    z-index: 1;
}

/* 上下ふわふわ */

/*.mvBox .mv_heart {
  animation: floating-y 2.2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}*/

.mvBox .mvht_deco01 { animation: float 5000ms cubic-bezier(0.46, 0.45, 0.25, 1) infinite 500ms;}
.mvBox .mvht_deco02 { animation: float 4500ms cubic-bezier(0.46, 0.45, 0.25, 1) infinite 1000ms;}
.mvBox .mvht_deco03 { animation: float 5000ms cubic-bezier(0.46, 0.45, 0.25, 1) infinite 500ms;}
.mvBox .mvht_deco04 { animation: float 4500ms cubic-bezier(0.46, 0.45, 0.25, 1) infinite 1000ms;}
.mvBox .mvht_deco05 { animation: float 4500ms cubic-bezier(0.46, 0.45, 0.25, 1) infinite 1500ms;}
.mvBox .mvht_deco06 { animation: float 4500ms cubic-bezier(0.46, 0.45, 0.25, 1) infinite 0ms;}

@keyframes float {
    from { transform: translate(0,0);}
    50% { transform: translate(0,-6%);}
    to { transform: translate(0,0);}
}

/* mv_copy */

.mvBox .mv_copy {
    width: 24.3%;
    top: 35%;
    left: 9%;
}

/* scroll */

.mvBox .scroll {
    display: block;
    position: absolute;
    bottom: 9%;
    left: 10%;
    z-index: 10;
}

.mvBox .scroll a {
    display: block;
    font-size: 1rem;
    letter-spacing: .4rem;
    color: #3e3a39;
    line-height: 1;
    writing-mode: vertical-lr;
    padding-bottom: 20px;
    position: relative;
    transition: all 300ms cubic-bezier(0.04, 0.65, 0.35, 1);
}

.mvBox .scroll a:after {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    background: url(../images/top/scroll.svg) top center / contain no-repeat;
    position: absolute;
    top: 75px;
    right: 0;
    left: 0;
    margin: auto;
    -webkit-animation: scdown 2s ease infinite;
    animation: scdown 2s ease infinite;
}

@-webkit-keyframes scdown {
0% {
    opacity:1;
    -webkit-transform:translateY(0);
    transform:translateY(0);
    }
to {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    }
}
@keyframes scdown {
0% {
    opacity:1;
    -webkit-transform:translateY(0);
    transform:translateY(0);
    }
to {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    }
}

.mvBox .scroll a span {
    position: relative;
}

.mvBox .scroll a span:before {
    content: "";
    display: block;
    width: 1px;
    height: 28px;
    background: #3e3a39;
    position: absolute;
    top: 75px;
    right: 0;
    left: 0;
    margin: auto;
}

.mvBox .scroll a:hover {
    opacity: .5;
}

#infoMark {
    padding-top: 100px;
    margin-top: -100px;
}


/*--------------------------------------------------------------------------- intro */

#intro .introInner {
    width: min(1200px, 85%);
    margin: 0 auto 150px;
    position: relative;
}

#intro .introInner p {
    text-align: center;
    font-weight: 700;
    letter-spacing: .2rem;
    line-height: 2.5;
    position: relative;
    z-index: 1;
}

#intro .introInner p:nth-child(n+2) {
    margin-top: 20px;
}

#intro .introInner .deco {
    width: 34.3%;
}

#intro .introInner .it_deco01 {
    top: -43%;
    left: 1%;
}

#intro .introInner .it_deco02 {
    top: 26%;
    left: -20%;
}

#intro .introInner .it_deco03 {
    top: 10%;
    left: 83%;
}

/*--------------------------------------------------------------------------- movie */

#movie {
    position: relative;
    padding-bottom: 8%;
}

#movie:after {
    content: "";
    position: absolute;
    background: url(../images/top/bg_01.svg) top center / 100% no-repeat;
    width: 100%;
    height: 100%;
    top: 15%;
    z-index: -1;
}

#movie .movieInner {
    width: min(830px, 85%);
    margin: 0 auto 170px;
}

#movie .movieBox {
    width: 100%;
    margin-bottom: 25px;
}

#movie .movieBox a {
    display: block;
    width: 100%;
    position: relative;
}

#movie .movieBox a:hover {
    cursor: pointer;
}

#movie .movieBox a:after {
    content: "";
    display: block;
    width: 100%;
    /*padding-top: 56.8181%;*/
    padding-top: 42%;
}

#movie .movieBox video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 30px;
}

.modaal-overlay {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 1;
}


/*--------------------------------------------------------------------------- about */

.categoryInner {
    margin-bottom: 150px;
}

.categoryInner:last-of-type {
    margin-bottom: 100px;
}

.categoryBox {
    display: flex;
    align-items: flex-end;
}

.categoryBox .imgBox {
    width: 57.5%;
    margin-right: 110px;
    position: relative;
}

.categoryBox .imgBox .deco {
    width: 30.5%;
}

.categoryBox .imgBox .ab_deco01 {
    top: -6%;
    left: 86%;
}

.categoryBox .textBox {
    width: 26%;
    margin-bottom: 85px;
}

.categoryInner .title {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

.categoryInner .title .en {
    font-size: 1.4rem;
    letter-spacing: .8rem;
    position: relative;
    margin-bottom: 35px;
    padding-left: 80px;
}

.categoryInner .title .en:before {
    position: absolute;
    content: "";
    width: 60px;
    height: 1px;
    background-color: #000;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.categoryInner .title .jp {
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: .4rem;
}

.categoryBox .textBox .text {
    margin-bottom: 50px;
}

#about {
    margin-top: -8%;
}


/*--------------------------------------------------------------------------- interview */

#interview {
    position: relative;
    padding-bottom: 10%;
}

#interview:after {
    content: "";
    position: absolute;
    background: url(../images/top/bg_03.svg) center bottom / 100% no-repeat;
    width: 100%;
    height: 100%;
    bottom: 0;
    z-index: -1;
}

.interviewInner {
    width: min(1200px, 85%);
    margin: 0 auto 150px;
    position: relative;
}

.interviewInner .iv_deco01 {
    top: -21%;
    left: 19%;
    width: 21.5%;
}

/* swiper */

#interview .swiper {
    /*overflow: visible;*/
    /*width: min(62%, 740px);*/
    padding: 0 10px;
}

#interview .swiper .swiper-wrapper .swiper-slide {
    width: calc((100% - 90px) / 3);
}

#interview .swiper .swiper-wrapper .swiper-slide:nth-child(n+2) {
    margin-left: 45px;
}

#interview .swiper .swiper-wrapper .swiper-slide .imgBox {
    margin-bottom: 20px;
    transition: .3s;
    /*width: min(363px, 20.64vw);
    height: min(515px, 29.28vw);*/
    overflow: hidden;
    position: relative;
    border-radius: 350px 350px 0 0; /* 上部をアーチ型にする */
}

#interview .swiper .swiper-wrapper .swiper-slide .imgBox img {
    /*width: 100%;
    height: 100%;
    object-fit: cover;*/
    transition: .3s
}

#interview .swiper .swiper-wrapper .swiper-slide .textBox p {
    font-size: 2rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    a.swiper-slidegn-items: center;
}

#interview .swiper .swiper-wrapper .swiper-slide .textBox p .arrow {
    width: 40px;
    height: 40px;
    transition: .3s;
}

#interview .swiper .swiper-wrapper .swiper-slide .textBox p .arrow:after {
    width: 10px;
    height: 6px;
}

/* HOVER */

#interview .swiper .swiper-wrapper .swiper-slide a:hover .imgBox img {
    transform: scale(1.1);
}

/*#interview .swiper .swiper-wrapper .swiper-slide a:hover .imgBox {
    opacity: .5;
}*/

/*.interviewInner .interviewList .inner {
    display: flex;
    justify-content: center;
}

.interviewInner .interviewList .inner li {
    width: calc((100% - 90px) / 3);
}

.interviewInner .interviewList .inner li:nth-child(n+2) {
    margin-left: 45px;
}

.interviewInner .interviewList .inner li .imgBox {
    margin-bottom: 20px;
}

.interviewInner .interviewList .inner li .textBox p {
    font-size: 2rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.interviewInner .interviewList .inner li .textBox p .arrow {
    width: 40px;
    height: 40px;
    transition: .3s;
}

.interviewInner .interviewList .inner li .textBox p .arrow:after {
    width: 10px;
    height: 6px;
}*/



/*--------------------------------------------------------------------------- environment */

#environment {
    margin-top: -22%;
}

#environment .categoryBox {
    flex-direction: row-reverse;
}

#environment .categoryBox .imgBox {
    margin-right: 0;
    margin-left: 110px;
}

.categoryBox .imgBox .ev_deco01 {
    top: 62%;
    left: -20%;
}


/*--------------------------------------------------------------------------- recruit */

.categoryBox .imgBox .re_deco01 {
    top: -7%;
    left: 85%;
}

#recruit .textBox .btnBox .newgraduate .arrow:after {
    background: url(../images/common/external_link.svg) center center / contain no-repeat;
    width: 12px;
    height: 12px;
}


/*--------------------------------------------------------------------------- kurukuru */

.kurukuru {
    margin-bottom: 150px;
    position: relative;
}

.kurukuru:before {
    content: "";
    display: block;
    width: 100%;
    height: 312px;
    left: 0;
    top: 0;
    animation: kurukuru 180000s linear infinite;
    background: url(../images/top/kurukuru.png) left top / 3320px 312px repeat-x;
}

@keyframes kurukuru {
    from { background-position: 0 center; }
    to { background-position: -6271232px center; }
}





/*------------------------------------------------------------------------------------

1500px以下
                                    
------------------------------------------------------------------------------------*/

@media screen and (max-width:1500px) {

    /*--------------------------------------------------------------------------- mv */
    
    .mvBox {
        background-size: 200%;
    }

}





/*------------------------------------------------------------------------------------

1200px以下
                                    
------------------------------------------------------------------------------------*/

@media screen and (max-width:1200px) {

    /*--------------------------------------------------------------------------- about */
    
    .categoryBox {
        align-items: center;
    }

    .categoryBox .textBox {
        margin-bottom: 0;
    }

}





/*------------------------------------------------------------------------------------

以下 TAB 用
                                    
------------------------------------------------------------------------------------*/

@media screen and (max-width:900px) {

    #infoMark {
        padding-top: 60px;
        margin-top: -60px;
    }


    /*--------------------------------------------------------------------------- about */
    
    .categoryInner {
        margin-bottom: 90px;
    }

    .categoryBox {
        display: block;
    }

    .categoryBox .imgBox {
        width: 95%;
        margin-right: 0;
        margin-bottom: 50px;
    }

    .categoryBox .imgBox .ab_deco01 {
        top: -24%;
        left: 67%;
    }

    .categoryBox .textBox {
        width: 85%;
        margin: 0 auto;
    }

}





/*------------------------------------------------------------------------------------

以下 SP 用
                                    
------------------------------------------------------------------------------------*/

@media screen and (max-width:600px) {

    /*--------------------------------------------------------------------------- mv */

    .mvBox {
        background: url(../images/top/mv_bg_plus-sp.jpg) center top / cover no-repeat;
        /*margin-bottom: 170px;*/
        margin-bottom: 45vw;
    }

    .mvBox:after {
        background-size: contain;
        height: 50px;
    }

    .slideobject{
        padding-top: 138%;
    }

    .slideobject figure.image {
        background-size: 220%;
        background-position: center 220%;
    }

    .mvBox .mv_copy {
        width: 48%;
        top: 16%;
        left: 11%;
    }

    .mvBox .scroll {
        left: 5%;
    }

    .mvBox .mv_heart {
        width: 65%;
    }

    .mvBox .mvht_deco01 {
        display: none;
    }

    .mvBox .mvht_deco02 {
        top: 29%;
        left: -16%;
    }

    .mvBox .mvht_deco03 {
        top: 29%;
        left: 65%;
    }

    .mvBox .mvht_deco04 {
        display: none;
    }

    .mvBox .mvht_deco05 {
        top: 55%;
        left: -32%;
    }

    .mvBox .mvht_deco06 {
        top: 71%;
        left: 30%;
    }


    /*--------------------------------------------------------------------------- intro */

    #intro .introInner {
        margin-bottom: 200px;
    }

    #intro .introInner .deco {
        width: 60%;
    }

    #intro .introInner .it_deco01 {
        top: -50vw;
        left: -12%;
    }

    #intro .introInner .it_deco02 {
        top: 98%;
        left: -22%;
    }

    #intro .introInner .it_deco03 {
        top: -25%;
        left: 60%;
    }

    #movie .movieInner {
        margin-bottom: 50px;
    }


    /*--------------------------------------------------------------------------- about */

    .categoryBox .imgBox {
    }

    .categoryBox .textBox .text {
        margin-bottom: 15px;
    }

    .categoryInner .title {
        margin-bottom: 20px;
    }

    .categoryInner .title .en {
        font-size: 1rem;
        letter-spacing: .5rem;
        margin-bottom: 20px;
        padding-left: 60px;
    }

    .categoryInner .title .en:before {
        width: 50px;
    }

    .categoryInner .title .jp {
        font-size: 2.2rem;
        letter-spacing: .3rem;
    }

    #about {
         margin-top: 0; 
    }


    /*--------------------------------------------------------------------------- interview */

    .interviewInner {
        width: 100%;
        margin-bottom: 90px;
    }

    .interviewInner .title {
        width: 85%;
        margin: 0 auto 50px;
    }

    .interviewInner .iv_deco01 {
        top: -16%;
        left: 54%;
        width: 40%;
    }

    /* swiper */

    #interview .swiper {
        overflow: hidden;
        width: 100%;
        padding: 0;
    }

    #interview .swiper .swiper-wrapper .swiper-slide {
        width: 80%;
    }

    #interview .swiper .swiper-wrapper .swiper-slide:nth-child(n+2) {
        margin-left: 0;
    }

    #interview .swiper .swiper-wrapper .swiper-slide .imgBox img {
        width: 90%;
        border-radius: 350px 350px 0 0;
    }

    #interview .swiper .swiper-wrapper .swiper-slide .textBox p {
        font-size: 1.4rem;
    }

    #interview .swiper .swiper-wrapper .swiper-slide .textBox p .arrow {
        width: 28px;
        height: 28px;
        margin-right: 10%;
    }

    /* HOVER */

    #interview .swiper .swiper-wrapper .swiper-slide a:hover .imgBox img {
        transform: none;
    }


    /*--------------------------------------------------------------------------- environment */

    #environment {
        margin-top: -40%;
    }

    #environment .categoryBox .imgBox {
        width: 95%;
        margin-left: 5%;
    }

    .categoryBox .imgBox .ev_deco01 {
        top: 73%;
        left: -5%;
    }


    /*--------------------------------------------------------------------------- recruit */

    .categoryBox .imgBox .re_deco01 {
        top: -17%;
        left: 74%;
    }


    /*--------------------------------------------------------------------------- kurukuru */

    .kurukuru {
        margin-bottom: 50px;
    }

    .kurukuru:before {
        /*height: 195px;
        background-size: 2075px 195px;*/
        height: 117px;
        background-size: 1245px 117px;
    }

}