@charset "UTF-8";

/*----------------------------------------------------
    ☆PC
----------------------------------------------------*/

/*--------------------------------------------------------------------------- loading */

#loading {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1200;
    pointer-events: none;

    background: #000922;

    opacity: 1;
    transform: translateY(0);

    animation:loading 3.5s ease-in-out forwards;
}

#loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: url(../images/top/loading_bk.jpg) center center / cover no-repeat;

    opacity: 0;
    transition: opacity 3.8s ease-in;
    /*transition: fadeBg 3.5s ease-in forwards;*/
}

#loading.bg-show::before {
    opacity: 1;
}

#loading .loadingMessage {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    width: clamp(250px, 30%, 600px);
    /*animation:openingTitle 2s ease-in-out forwards;*/
    transform-origin: left top;
    animation:star 3.5s linear forwards;
    /*transform-origin: center center;*/
}


.first #loading {
    display: block;
}

.not-first #loading {
    display: none !important;
}


@keyframes openingTitle {
    0% { opacity: 1; transform: scale(1) translate(-50%, -50%);}
    30% { opacity: 1; transform: scale(1) translate(-50%, -50%);}
    65% { opacity: 0; transform: scale(0.95) translate(-50%, -50%); pointer-events: none; }
    100% { opacity: 0; transform: scale(0.95) translate(-50%, -50%); pointer-events: none; }
}

@keyframes loading {
    0% { opacity: 1;}
    70% { opacity: 1; pointer-events: none; }
    100% { opacity: 0; pointer-events: none; }
}

@keyframes star {
    0% { opacity: 0; transform: scale(0.7) translate(-50%, -50%);}
    12.5% { opacity: 0.5; transform: scale(1) translate(-50%, -50%);}
    25% { opacity: 1; transform: scale(1) translate(-50%, -50%);}
    37.5% { opacity: 1; transform: scale(1) translate(-50%, -50%);}
    50% { opacity: 1; transform: scale(1) translate(-50%, -50%);}    
    62.5% { opacity: 1; transform: scale(1) translate(-50%, -50%);}
    75% { opacity: 0.7; transform: scale(1.5) translate(-50%, -50%);}
    87.5% { opacity: 0.5; transform: scale(2.0) translate(-50%, -50%);}
    100% { opacity: 0; transform: scale(2.5) translate(-50%, -50%);}
}


body #header,
body #footer{
    opacity: 0;
    transition: 1s;
}
body.loaded #header,
body.loaded #footer{
    opacity: 1;
}


.mv {
    opacity: 0;
    transition: opacity 0.8s;
}

.mv.show-mv {
    opacity: 1;
}


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

.mv {
    /*max-width: 1500px;*/
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    z-index: 0;
}

.mv:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

.mv:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 12.2%;
    bottom: 0;
    left: 0;
    background:url(../images/top/mv_bottom.png) bottom center / cover no-repeat;
}

.movieArea {
    position: relative;
    /*padding-top: 820px;*/
    padding-top: 54.66%;
}

.movieArea video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.movieArea .moviebox {
    position: absolute;
    top: 0;
    height: 100%;
}

.movieArea .leftrightBox .moviebox {
    width: 37%
}

.movieArea .centerBox .moviebox {
    width: 47%;
}

.movie1 {
    left: 0;
    clip-path: polygon(
        0 0,
        100% 0,
        70% 100%,
        0 100%
    );
}

.movie2 {
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(
        23.5% 0,
        76.5% 0,
        100% 100%,
        0 100%
    );
}

.movie3 {
    right: 0;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        30% 100%
    );
}

.mv .movieboxInner {
    height: 100%;
    position: relative;
}

.mv .mv_chara {
    width: 63%;
}

.mv .mv_chara01 {
    top: 38%;
    left: 6%;
}

.mv .mv_chara02 {
    top: 33%;
    left: 36%;
    width: 25%;
    z-index: 10;
}

.mv .mv_chara03 {
    top: 34%;
    left: 31%;
}

.mv .mv_title {
    width: 63%;
    top: 17%;
    right: 0;
    margin: auto;
    z-index: 1;
}


/*--------------------------------------------------------------------------- message */

#message {
    background:url(../images/top/message_bg.png) top center / cover no-repeat;
    width: 100%;
    height: auto;
    position: relative;
}

#message:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 15%;
    top: -1px;
    left: 0;
    background: linear-gradient(0deg,rgba(14, 47, 127, 0) 0%, rgba(14, 47, 127, 1) 100%);
    z-index: 1;
}

#message .messageInner {
    padding: 50px 0 150px;
    position: relative;
    z-index: 1;
}

#message .messageInner .text {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 40px;
    line-height: 2;
}

#message .messageInner .text:last-of-type {
    margin-bottom: 60px;
}

#message .messageInner .message_text {
    width: clamp(550px, 50%, 590px);
    margin: 0 auto;
}

/*--------------------------------------------------------------------------- common */

/*.catBox {
    padding: 80px 0 130px;
    position: relative;
}

.catBox.colorBox:before,
.catBox.colorBox:after {
    content: "";
    position: absolute;
    top: -6.9vw;
    left: 0;
    background:url(../images/common/blue_bg_tb.png) top center / cover no-repeat;
    width: 100%;
    height: 7vw;
}

.catBox.colorBox:after {
    top: auto;
    bottom: -6.9vw;
    transform: scaleY(-1);
}

.catBox:not(.colorBox) {
    padding-top: 120px;
}

.catBox.colorBox.bk-dpgreen:before,
.catBox.colorBox.bk-dpgreen:after {
    background:url(../images/common/green_bg_tb.png) top center / cover no-repeat;
}

.catBox.colorBox.bk-red:before,
.catBox.colorBox.bk-red:after {
    background:url(../images/common/red_bg_tb.png) top center / cover no-repeat;
}

.catInner {
    position: relative;
}

.catInner:before,
.catInner:after {
    content: "";
    position: absolute;
    bottom: min(-300px, -20vw);
    width: min(520px, 60%);
    height: 430px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.catInner:before {
    background-position: bottom left;
    left: 0;
}

.catInner:after {
    background-position: bottom right;
    right: 0;
}*/

.catBox .titleBox {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
}

.catBox .titleBox .en_title {
    font-size: 13.8rem;
    letter-spacing: .1em;
    color: #ebebeb;
    mix-blend-mode: multiply;
}

.catBox .titleBox .jp_title {
    font-size: 2rem;
    font-weight: 600;
    padding-bottom: 20px;
    margin: -40px 0 20px;
    position: relative;
}

.catBox .titleBox .jp_title:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 55px;
    height: 1px;
    background-color: #000;
}

.catBox .fc-wt .jp_title:after {
    background-color: #fff;
}

.catBox .titleBox .jp_title + .text {
    font-weight: 600;
}

.chara {
    width: min(380px, 36%);
}

.chara_01 {
    top: -230px;
    left: calc((100% + 195px) / 2);
    opacity: 0;
}

.chara_02 {
    top: -330px;
    left: calc((100% - 1210px) / 2);
    opacity: 0;
}

.chara_03 {
    top: -290px;
    left: calc((100% + 380px) / 2);
    opacity: 0;
}

.chara_04 {
    top: auto;
    bottom: -240px;
    left: calc((100% - 380px) / 2);
    z-index: 1;
    opacity: 0;
}

.chara_05,
.chara_07 {
    top: auto;
    bottom: -20%;
    left: auto;
    right: 15%;
    opacity: 0;
}

.chara_06 {
    top: auto;
    bottom: -20%;
    left: 15%;
    opacity: 0;
}

.bg_deco_01 {
    top: -90px;
    left: calc((100% - 1075px) / 2);
}

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

#about .catInner:before {
    background-image:url(../images/common/blue_bg_left.png);
}

#about .catInner:after {
    background-image:url(../images/common/blue_bg_right.png);
}

#about .en_title {
    color: #000eb7;
}

#about .linkBox ul {
    display: flex;
    max-width: 1230px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

#about .linkBox ul li {
    width: min(410px, 33.4%);
}

#about .linkBox ul li:nth-child(2) {
    margin-top: 65px;
}

#about .linkBox ul li:nth-child(3) {
    margin-top: 30px;
}

#about .linkBox ul li .imgBox {
    transition: all 300ms ease;
}

#about .linkBox ul li .btn {
    /*justify-content: center;*/
}

/*--- catBox ---*/
.catBox .mainBox {
    position: relative;
}

.catBox .mainBox .imgBox {
    width: 67%;
}

.catBox .mainBox .textBox {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 40%;
    font-weight: 600;
    z-index: 1;
    background-color: #fff;
    padding-left: 50px;
}

.catBox .mainBox .textBox .title {
    font-size: 1.8rem;
    font-weight: 600;
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
}

.catBox .mainBox .textBox .title:after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 30px;
    height: 1px;
    background-color: #000;
}

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

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

#interview .catInner:before {
    background-image:url(../images/common/green_bg_left.png);
}

#interview .catInner:after {
    background-image:url(../images/common/green_bg_right.png);
}

#interview .catInner:before,
#interview .catInner:after {
    bottom: -335px;
}

/*--------------------------------------------------------------------------- crosstalk */

#crosstalk .catInner:before {
    background-image:url(../images/common/red_bg_left.png);
}

#crosstalk .catInner:after {
    background-image:url(../images/common/red_bg_right.png);
}

#crosstalk .catInner:before,
#crosstalk .catInner:after {
    bottom: -360px;
}

#crosstalk .crosstalkList li {
    position: relative;
}

#crosstalk .crosstalkList li:nth-child(n+2) {
    margin-top: min(-8.5%, -90px);
}

#crosstalk .crosstalkList li .imgBox {
    /*width: 67.5%;*/
    width: 71%;
    margin-left: calc(100% - 71%);
    position: relative;
}

#crosstalk .crosstalkList li .imgBox .diamond {
    position: absolute;
    bottom: -20px;
    right: 15%;
    width: 50%;
}

#crosstalk .crosstalkList li .imgBox .diamondInner {
    /*width: 310px;
    height: 310px;
    position: relative;
    transform: rotate(45deg) skew(-8deg, -8deg);*/
}

/* ひし形 */
:root{
  --diamondInner-w: 470;   /* 基準幅 (px) */
  --diamondInner-h: 395;   /* 基準高さ (px) */
}

#crosstalk .crosstalkList li .imgBox .diamondInner{
    /* 幅はビューポートに合わせて縮むが最大は470px */
    /*width: min(calc(var(--diamondInner-w) * 1px), 90vw);*/
    width: 130%;
    /* 幅に対する縦横比（width / height）を明示 */
    aspect-ratio: calc(var(--diamondInner-w) / var(--diamondInner-h));
    position: relative;
    /* クリップは要素全体に対して行う */
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    overflow: hidden;
    display: block;
}

#crosstalk .crosstalkList li .imgBox .diamondInner h3 {
    width: 53%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#crosstalk .crosstalkList li .textBox {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: calc(36% + 40px);
    background-color: #ff0000;
    padding: 20px 40px 20px 0;
}

#crosstalk .crosstalkList li .textBox .text {
    margin-bottom: 50px;
}

/* 偶数 */
#crosstalk .crosstalkList li:nth-child(even) .imgBox {
    margin-left: auto;
    margin-right: calc(100% - 71%);
}

#crosstalk .crosstalkList li:nth-child(even) .imgBox .diamond {
    right: auto;
    left: 0;
}

#crosstalk .crosstalkList li:nth-child(even) .textBox {
    left: auto;
    right: 0;
    padding-right: 0;
    padding-left: 40px;
}

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

#recruit .recruitList {
    display: flex;
    justify-content: center;
    column-gap: 50px;
}

/*#recruit .recruitList li {
    overflow: hidden;
    position: relative;
    background-position: center center;
    background-size: cover;
    width: 30.5%;
    padding-top: 29.3%;
    transition: background-size 0.5s ease;
}

#recruit .recruitList li:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(96, 96, 96, 1);
    mix-blend-mode: multiply;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    transition: .4s;
}

#recruit .recruitList li a {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: .4s;
    font-weight: 600;
    padding: 0 10px;
}*/

#recruit .recruitList li {
    overflow: hidden;
    position: relative;
    width: 30.5%;
}

#recruit .recruitList li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
}

#recruit .recruitList li a .imgBox {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#recruit .recruitList li a .imgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.3s ease;
}

#recruit .recruitList li a .imgBox::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(96, 96, 96, 1);
    mix-blend-mode: multiply;
    z-index: 2;
    transition: background 0.3s;
}

#recruit .recruitList li a .title {
    font-size: 2rem;
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

#recruit .recruitList li a .arrow {
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 3;
}


/*--------------------------------------------------------------------------- hover */

#about .linkBox ul li a:hover .imgBox {
    transform: scale(0.9);
}

#recruit .recruitList li a:hover .imgBox img {
    transform: scale(1.1);
}





/*----------------------------------------------------
    ☆PC UNDER 1200
----------------------------------------------------*/

@media screen and (max-width:1200px) {
    
    .catBox .titleBox .en_title {
        font-size: 12rem;
    }

    #crosstalk .catInner:before,
    #crosstalk .catInner:after {
        bottom: -345px;
    }

    #crosstalk .crosstalkList li:nth-child(n+2) {
        margin-top: 0;
    }

}





/*----------------------------------------------------
    ☆TABLET UNDER 900
----------------------------------------------------*/

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

    /*--------------------------------------------------------------------------- common */

    .chara {
        width: 144px;
    }

    .chara_01 {
        top: -135px;
    }

    .chara_02 {
        top: -120px;
        left: calc((100% - 410px) / 2);
    }

    .chara_03 {
        top: -105px;
        left: 67%;
    }

    .chara_04 {
        bottom: -120px;
        left: calc((100% - 190px) / 2);
    }

    .chara_05, .chara_07 {
        bottom: 10%;
        right: 70%;
    }

    .chara_06 {
        bottom: 10%;
        left: 61%;
    }

    .bg_deco_01 {
        top: -190px;
        left:-10%;
    }

    .catBox .titleBox .en_title {
        font-size: 8rem;
    }

    .catInner:before, .catInner:after {
        width: 300px;
        height: 252px;
        bottom: -230px;
    }

    #interview .catInner:before, #interview .catInner:after {
        bottom: -235px;
    }

    #crosstalk .catInner:before, #crosstalk .catInner:after {
        bottom: -240px;
    }

    /*--------------------------------------------------------------------------- crosstalk */

    #crosstalk .crosstalkList li:nth-child(n+2) {
        margin-top: 50px;
    }

    #crosstalk .crosstalkList li .imgBox {
        width: 100%;
        margin-left: 0;
    }

    #crosstalk .crosstalkList li .imgBox .diamond {
        width: 70%;
        position: static;
        margin-left: 4.4%;
        margin-top: -44%;
    }

    #crosstalk .crosstalkList li .imgBox .diamondInner h3 {
        width: 53%;
    }

    #crosstalk .crosstalkList li .textBox {
        width: 100%;
        position: static;
        background-color: unset;
        padding: 0;
    }

    #crosstalk .crosstalkList li .textBox .text {
        margin-bottom: 25px;
    }

    /* 偶数 */
    #crosstalk .crosstalkList li:nth-child(even) .imgBox {
        margin-right: 0;
    }

    #crosstalk .crosstalkList li:nth-child(even) .imgBox .diamond {
        left: auto;
    }

    #crosstalk .crosstalkList li:nth-child(even) .textBox {
        padding-left: 0;
    }

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

    #recruit .recruitList {
        column-gap: 20px;
    }

    #recruit .recruitList li a .title {
        font-size: 1.4rem;
    }






    
}


/*----------------------------------------------------
    ☆UNDER 600
----------------------------------------------------*/

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

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

    .mv:before {
        height: 15%;
    }

    .mv:after {
        height: 10%;
        bottom: 5.5%;
        background-size: contain;
    }

    .movieArea {
        padding-top: 185.5%;
    }

    .movieArea .leftrightBox .moviebox {
        width: 100%;
        height: 40%;
    }

    .movieArea .centerBox .moviebox {
        width: 100%;
        height: 35%;
    }

    .movieArea .moviebox.movie2 {
        left: 0;
        transform: translateX(0);
        clip-path: polygon(0% 80%, 0% 0%, 100% 0%, 100% 100%);
    }

    .movieArea .moviebox.movie1 {
        top: auto;
        bottom: 0;
        clip-path: polygon(0% 100%, 0% 20%, 100% 0%, 100% 100%);
    }

    .movieArea .moviebox.movie3 {
        top: 32.5%;
        clip-path: polygon(0% 100%, 0% 0%, 100% 23%, 100% 77%);
    }

    .mv .mv_title {
        width: 85%;
        top: 8.5%;
        z-index: 20;
    }

    .mv .mv_chara {
        width: 40%;
    }

    .mv .mv_chara02 {
        top: 13%;
        left: 25%;
    }

    .mv .mv_chara03 {
        top: 43%;
        left: 21%;
    }

    .mv .mv_chara01 {
        top: 68.5%;
        left: 30%;
        z-index: 10;
    }


    /*--------------------------------------------------------------------------- message */

    #message {
        margin-top: -10%;
        background-image: url(../images/top/message_bg_sp.png);
    }

    #message .messageInner {
        padding: 70px 0 150px;
    }

    #message .messageInner .text {
        font-size: 1.4rem;
        margin-bottom: 30px;
    }

    #message .messageInner .text:last-of-type {
        margin-bottom: 50px;
    }

    #message .messageInner .message_text {
        width: 80%;
    }

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

    .catInner:before, .catInner:after {
        bottom: -140px;
        width: 210px;
        height: 200px;
    }

    /*.catBox {
        padding: 60px 0 75px;
    }

    .catBox:not(.colorBox) {
        padding-top: 80px;
    }*/

    .catBox .titleBox {
        margin-bottom: 40px;
    }

    .catBox .titleBox .en_title {
        font-size: 5.5rem;
    }

    .catBox .titleBox .jp_title {
        font-size: 1.4rem;
        padding-bottom: 15px;
        margin: -20px 0 20px;
    }

    .catBox .titleBox .jp_title:after {
        width: 30px;
    }

    .catBox .mainBox .imgBox {
        width: 100%;
    }

    .catBox .mainBox > .imgBox {
        margin-bottom: 25px;
    }

    .catBox .mainBox .textBox {
        position: static;
        transform: translateY(0%);
        width: 100%;
        padding-left: 0;
    }

    .catBox .mainBox .textBox .title {
        font-size: 1.6rem;
        text-align: center;
    }

    .catBox .mainBox .textBox .title:after {
        left: 50%;
        transform: translateX(-50%);
    }

    .catBox .mainBox .textBox .text {
        margin-bottom: 25px;
    }

    .chara_01 {
        top: -135px;
        left: 51%;
    }

    .chara_03 {
        left: 60%;
    }

    .chara_04 {
        bottom: -60px;
        left: calc((100% - 200px) / 2);
    }

    #about .linkBox ul {
        display: block;
    }

    #about .linkBox ul li {
        width: 61%;
        margin: 0 auto;
    }

    #about .linkBox ul li:nth-child(2),
    #about .linkBox ul li:nth-child(3) {
        margin-top: 0;
    }
    #about .linkBox ul li:nth-child(n+2) {
        margin-top: 20px;
    }

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

    #interview .catInner:before, #interview .catInner:after {
        bottom: -150px;
    }

    /*--------------------------------------------------------------------------- education */

    #education {
        z-index: 1
    }
        
    /*--------------------------------------------------------------------------- crosstalk */
    #crosstalk .catInner:before, #crosstalk .catInner:after {
        bottom: -155px;
    }

    #crosstalk .crosstalkInner {
        padding-bottom: 70px;
    }

    #crosstalk .crosstalkList li:nth-child(n+2) {
        margin-top: 0;
    }

    #crosstalk .crosstalkList li .imgBox .diamondInner h3 {
        width: 60%;
    }

    #crosstalk .crosstalkList li .textBox {
        transform: translateY(-25%);
    }

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

    #recruit .recruitList {
        display: block;
        column-gap: 0;
        width: 55%;
        margin: 0 auto;
    }

    #recruit .recruitList li {
        width: 100%;
        /*padding-top: 100%;*/
    }

    #recruit .recruitList li:nth-child(n+2) {
        margin-top: 15px;
    }

    #recruit .recruitList li a .arrow {
        right: 15px;
        bottom: 15px;
    }


}