/* CSS Document */
@charset "UTF-8";
/*

interview-common.css

*/



/* ========================================

.main_view

======================================== */
.section.main_view {
    position: relative;
    width: 100%;
    height: 650px;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-repeat: no-repeat;
}
@media screen and ( max-width: 1600px ){
    .section.main_view {
        height: calc( 100vw * 650 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .section.main_view {
        width: 100%;
        height: calc( 100vw * 1080 / 750 );
    }
}



.main_view .box_main_view {
    position: relative;
    width: 1200px;
    height: 650px;
    margin: 0 200px;
    padding: 0;
    z-index: 200;
}
.main_view .box_main_view .catch {
    position: absolute;
    bottom: 320px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 40px;
    line-height: 1.5;
    clip-path: inset( 0 100% 0 0 );
    transform: translateX( 50px );
}
.main_view .box_main_view .catch.animation_active {
    animation: extendAnime_catch_01 1s ease-in forwards, extendAnime_catch_02 0.5s ease-in forwards;
}
@keyframes extendAnime_catch_01 {
    0% { clip-path: inset( 0 100% 0 0 ); }
    100% { clip-path: inset( 0 0 0 0 ); }
}
@keyframes extendAnime_catch_02 {
    0% { transform: translateX( calc( 100vw * 50 / 1600 ) ); }
    100% { transform: translateX( 0 ); }
}
.main_view .box_main_view .catch br.sp {
    display: none;
}
.main_view .box_main_view h1 {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 0 80px 0;
    z-index: 200;
}
.main_view .box_main_view h1 span.jp {
    margin: 0 0 30px 0;
    color: #fff;
    font-size: 18px;
    line-height: 2;
}
.main_view .box_main_view h1 span.en {
    margin: 0;
    color: #fff;
    font-size: 50px;
    font-weight: 500;
}
@media screen and ( max-width: 1600px ){
    .main_view .box_main_view {
        width: calc( 100vw * 1200 / 1600 );
        height: calc( 100vw * 650 / 1600 );
        margin: 0 calc( 100vw * 200 / 1600 );
    }
    .main_view .box_main_view .catch {
        bottom: calc( 100vw * 320 / 1600 );
        font-size: calc( 100vw * 40 / 1600 );
        transform: translateX( calc( 100vw * 50 / 1600 ) );
    }
    .main_view .box_main_view h1 {
        margin: 0 0 calc( 100vw * 80 / 1600 ) 0;
    }
    .main_view .box_main_view h1 span.jp {
        margin: 0 0 calc( 100vw * 30 / 1600 ) 0;
        font-size: calc( 100vw * 18 / 1600 );
    }
    .main_view .box_main_view h1 span.en {
        font-size: calc( 100vw * 50 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .main_view .box_main_view {
        width: calc( 100vw * 670 / 750 );
        height: calc( 100vw * 1080 / 750 );
        margin: 0 auto;
    }
    .main_view .box_main_view .catch {
        bottom: calc( 100vw * 380 / 750 );
        font-size: calc( 100vw * 50 / 750 );
        line-height: 1.5;
    }
    .main_view .box_main_view .catch br.sp {
        display: block;
    }
    .main_view .box_main_view h1 {
        margin: 0 0 calc( 100vw * 80 / 750 ) 0;
    }
    .main_view .box_main_view h1 span.jp {
        margin: 0 0 calc( 100vw * 30 / 750 ) 0;
        font-size: calc( 100vw * 32 / 750 );
        line-height: 1.8;
    }
    .main_view .box_main_view h1 span.en {
        font-size: calc( 100vw * 80 / 750 );
    }
}



.main_view .motif_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 850px;
    height: 610px;
    margin: 0;
    padding: 0;
    clip-path: polygon( 0% 100%, 0% 0%, 100% 22.460%, 100% 63.115% );
    mix-blend-mode: multiply;
    z-index: 100;
}
.main_view .motif {
    position: absolute;
    top: 0;
    left: 0;
    width: 850px;
    height: 610px;
    margin: 0;
    padding: 0;
    background-color: #00ccea;
    clip-path: inset( 0 100% 0 0 );
    z-index: 100;
    animation: extendAnime_h2_left 1s ease-in forwards;
}
@media screen and ( max-width: 1600px ){
    .main_view .motif_wrap {
        width: calc( 100vw * 850 / 1600 );
        height: calc( 100vw * 610 / 1600 );
    }
    .main_view .motif {
        width: calc( 100vw * 850 / 1600 );
        height: calc( 100vw * 610 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .main_view .motif_wrap {
        top: calc( 100vw * 375 / 750 );
        left: 0;
        width: calc( 100vw * 665 / 750 );
        height: calc( 100vw * 550 / 750 );
    }
    .main_view .motif {
        width: calc( 100vw * 665 / 750 );
        height: calc( 100vw * 550 / 750 );
    }
}



/* ========================================

.career_path

======================================== */
.section.career_path {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 30px calc( ( 100vw - 1200px ) / 2 ) 100px calc( ( 100vw - 1200px ) / 2 );
}
@media screen and ( max-width: 1600px ){
    .section.career_path {
        padding: calc( 100vw * 30 / 1600 ) calc( 100vw * 200 / 1600 ) calc( 100vw * 100 / 1600 ) calc( 100vw * 200 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .section.career_path {
        padding: calc( 100vw * 40 / 750 ) calc( 100vw * 40 / 750 ) calc( 100vw * 115 / 750 ) calc( 100vw * 40 / 750 );
    }
}



.career_path .breadcrumb {
    position: relative;
    margin: 0 0 120px 0;
    padding: 0;
    color: #333;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 16px;
    line-height: 1.5;
}
.career_path .breadcrumb a {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}
@media screen and ( max-width: 1600px ){
    .career_path .breadcrumb {
        margin: 0 0 calc( 100vw * 120 / 1600 ) 0;
        font-size: calc( 100vw * 16 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .career_path .breadcrumb {
        margin: 0 0 calc( 100vw * 100 / 750 ) 0;
        font-size: calc( 100vw * 28 / 750 );
    }
}



.career_path h2, 
.career_path h2.center {
    position: relative;
    margin: 0;
    clip-path: none;
}
.career_path h2::before {
    position: absolute;
    top: calc( 50% - 0.5px );
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #005ead;
    z-index: 100;
}
.career_path h2 span.en {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0 0.5em;
    background-color: #fff;
    font-size: 30px;
    line-height: 1;
    z-index: 200;
}
@media screen and ( max-width: 1600px ){
    .career_path h2 span.en {
        margin: 0;
        font-size: calc( 100vw * 30 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .career_path h2.center {
        margin: 0 calc( 100vw * 45 / 750 ) calc( 100vw * 80 / 750 ) calc( 100vw * 45 / 750 );
        padding: 0;
    }
    .career_path h2 span.en {
        margin: 0;
        font-size: calc( 100vw * 50 / 750 );
    }
}



.career_path .box_career_path {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 40px 80px;
    border-bottom: 1px solid #005ead;
}
.career_path .box_career_path .box_item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
}
.career_path .box_career_path .box_item .icon_square {
    margin: 7px 0 0 0;
}
.career_path .box_career_path .box_item p {
    position: relative;
    width: 990px;
    color: #333;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 18px;
    line-height: 2;
}
@media screen and ( max-width: 1600px ){
    .career_path .box_career_path {
        padding: calc( 100vw * 40 / 1600 ) calc( 100vw * 80 / 1600 );
    }
    .career_path .box_career_path .box_item .icon_square {
        margin: calc( 100vw * 7 / 1600 ) 0 0 0;
    }
    .career_path .box_career_path .box_item p {
        width: calc( 100vw * 990 / 1600 );
        font-size: calc( 100vw * 18 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .career_path .box_career_path {
        width: calc( 100vw * 580 / 750 );
        margin: 0 auto;
        padding: 0 0 calc( 100vw * 20 / 750 ) 0;
    }
    .career_path .box_career_path .box_item {
        margin: 0 0 calc( 100vw * 60 / 750 ) 0;
    }
    .career_path .box_career_path .box_item .icon_square {
        width: calc( 100vw * 32 / 750 );
        height: calc( 100vw * 32 / 750 );
        margin: calc( 100vw * 16 / 750 ) 0 0 0;
    }
    .career_path .box_career_path .box_item p {
        width: calc( 100vw * 539 / 750 );
        font-size: calc( 100vw * 32 / 750 );
        line-height: 2;
    }
}



/* ========================================

.reason

======================================== */
.section.reason {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 120px calc( ( 100vw - 1200px ) / 2 ) 240px calc( ( 100vw - 1200px ) / 2 );
    overflow: hidden;
}
@media screen and ( max-width: 1600px ){
    .section.reason {
        padding: calc( 100vw * 120 / 1600 ) calc( 100vw * 200 / 1600 ) calc( 100vw * 240 / 1600 ) calc( 100vw * 200 / 1600 );
        overflow: hidden;
    }
}
@media screen and ( max-width: 768px ){
    .section.reason {
        padding: calc( 100vw * 620 / 750 ) calc( 100vw * 85 / 750 ) calc( 100vw * 135 / 750 ) calc( 100vw * 85 / 750 );
        overflow: hidden;
    }
}



.reason .box_content {
    position: relative;
    width: calc( 100vw * 480 / 1600 );
    margin: 0;
    padding: 0;
}
@media screen and ( max-width: 1600px ){
    .reason .box_content {
        width: calc( 100vw * 480 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .reason .box_content {
        width: calc( 100vw * 580 / 750 );
    }
}



.reason .box_content h2 {
    position: relative;
    margin: 0 0 30px 0;
}
.reason .box_content h2 span.jp {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 7px;
    background-color: #00ccea;
    color: #fff;
    font-size: 16px;
    z-index: 200;
}
@media screen and ( max-width: 1600px ){
    .reason .box_content h2 {
        margin: 0 0 calc( 100vw * 30 / 1600 ) 0;
    }
    .reason .box_content h2 span.jp {
        padding: calc( 100vw * 7 / 1600 );
        font-size: calc( 100vw * 16 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .reason .box_content h2 {
        margin: 0 0 calc( 100vw * 30 / 750 ) 0;
    }
    .reason .box_content h2 span.jp {
        padding: calc( 100vw * 10 / 750 );
        font-size: calc( 100vw * 28 / 750 );
    }
}



.reason .box_content .caption {
    position: relative;
    margin: 0;
    padding: 0 0 30px 0;
    color: #333;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 28px;
    line-height: 1.5;
}
.reason .box_content p {
    position: relative;
    margin: 0;
    padding: 0;
    color: #333;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 18px;
    line-height: 2;
}
@media screen and ( max-width: 1600px ){
    .reason .box_content .caption {
        padding: 0 0 calc( 100vw * 30 / 1600 ) 0;
        font-size: calc( 100vw * 28 / 1600 );
    }
    .reason .box_content p {
        font-size: calc( 100vw * 18 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .reason .box_content .caption {
        margin: 0 0 calc( 100vw * 50 / 750 ) 0;
        padding: 0;
        font-size: calc( 100vw * 44 / 750 );
    }
    .reason .box_content p {
        font-size: calc( 100vw * 32 / 750 );
    }
}



.reason .image_01_wrap {
    position: absolute;
    top: 50px;
    right: 0;
    width: 800px;
    height: 750px;
    clip-path: polygon( 0% 87.733%, 0% 28%, 100% 0%, 100% 100%);
    z-index: 200;
}
.reason .image_01_wrap::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #005ead;
    transform: scaleX(0);
    z-index: 300;
}
.reason .image_01_wrap.animation_active::before {
    animation: extendAnime_show_image_cover 1s ease-in forwards;
}
.reason .image_01_wrap .image_01 {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    opacity: 0;
}
.reason .image_01_wrap.animation_active .image_01 {
    animation: extendAnime_show_image 1s ease-in forwards;
}
.reason .image_01_shadow_wrap {
    position: absolute;
    top: -20px;
    right: -70px;
    width: 800px;
    height: 750px;
    clip-path: polygon( 0% 87.733%, 0% 28%, 100% 0%, 100% 100%);
    z-index: 100;
    mix-blend-mode: multiply;
}
.reason .image_01_shadow_wrap .image_01_shadow {
    width: 100%;
    height: 100%;
    background-color: #00ccea;
    opacity: 0.6;
    clip-path: inset( 0 100% 0 0 );
}
.reason .image_01_shadow_wrap.animation_active .image_01_shadow {
    animation: extendAnime_show_image_shadow .5s ease-in forwards;
}
@keyframes extendAnime_show_image_shadow {
    0% { clip-path: inset( 0 100% 0 0 ); }
    100% { clip-path: inset( 0 0 0 0 ); }
}
@media screen and ( max-width: 1600px ){
    .reason .image_01_wrap {
        top: calc( 100vw * 50 / 1600 );
        width: calc( 100vw * 800 / 1600 );
        height: calc( 100vw * 750 / 1600 );
    }
    .reason .image_01_shadow_wrap {
        top: calc( 100vw * 20 / 1600 * -1 );
        right: calc( 100vw * 70 / 1600 * -1 );
        width: calc( 100vw * 800 / 1600 );
        height: calc( 100vw * 750 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .reason .image_01_wrap {
        top: calc( 100vw * 65 / 750);
        right: 0;
        width: calc( 100vw * 750 / 750);
        height: calc( 100vw * 500 / 750 );
        clip-path: polygon( 0% 87.6%, 0% 29.6%, 100% 0%, 100% 100%);
    }
    .reason .image_01_shadow_wrap {
        top: calc( 100vw * 15 / 750 * -1 );
        right: calc( 100vw * 85 / 750 * -1 );
        width: calc( 100vw * 750 / 750);
        height: calc( 100vw * 500 / 750 );
        clip-path: polygon( 0% 87.6%, 0% 29.6%, 100% 0%, 100% 100%);
    }
}



/* ========================================

.works

======================================== */
.section.works {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 50px calc( ( 100vw - 1200px ) / 2 ) 130px calc( ( 100vw - 1200px ) / 2 );
}
@media screen and ( max-width: 1600px ){
    .section.works {
        padding: calc( 100vw * 50 / 1600 ) calc( 100vw * 200 / 1600 ) calc( 100vw * 130 / 1600 ) calc( 100vw * 200 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .section.works {
        padding: calc( 100vw * 690 / 750 ) calc( 100vw * 85 / 750 ) calc( 100vw * 140 / 750 ) calc( 100vw * 85 / 750 );
    }
}



.works .box_content {
    position: relative;
    width: calc( 100vw * 480 / 1600 );
    margin: 0 0 0 auto;
    padding: 0;
}
@media screen and ( max-width: 1600px ){
    .works .box_content {
        width: calc( 100vw * 480 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .works .box_content {
        width: calc( 100vw * 580 / 750 );
    }
}



.works .box_content h2 {
    position: relative;
    margin: 0 0 30px 0;
}
.works .box_content h2 span.jp {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 7px;
    background-color: #00ccea;
    color: #fff;
    font-size: 16px;
    z-index: 200;
}
@media screen and ( max-width: 1600px ){
    .works .box_content h2 {
        margin: 0 0 calc( 100vw * 30 / 1600 ) 0;
    }
    .works .box_content h2 span.jp {
        padding: calc( 100vw * 7 / 1600 );
        font-size: calc( 100vw * 16 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .works .box_content h2 {
        margin: 0 0 calc( 100vw * 30 / 750 ) 0;
    }
    .works .box_content h2 span.jp {
        padding: calc( 100vw * 10 / 750 );
        font-size: calc( 100vw * 28 / 750 );
    }
}



.works .box_content .caption {
    position: relative;
    margin: 0;
    padding: 0 0 30px 0;
    color: #333;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 28px;
    line-height: 1.5;
}
.works .box_content p {
    position: relative;
    margin: 0;
    padding: 0;
    color: #333;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 18px;
    line-height: 2;
}
@media screen and ( max-width: 1600px ){
    .works .box_content .caption {
        padding: 0 0 calc( 100vw * 30 / 1600 ) 0;
        font-size: calc( 100vw * 28 / 1600 );
    }
    .works .box_content p {
        font-size: calc( 100vw * 18 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .works .box_content .caption {
        margin: 0 0 calc( 100vw * 50 / 750 ) 0;
        padding: 0;
        font-size: calc( 100vw * 44 / 750 );
        font-feature-settings: 'palt';
    }
    .works .box_content p {
        font-size: calc( 100vw * 32 / 750 );
    }
}



.works .image_01_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 750px;
    clip-path: polygon( 0% 100%, 0% 0%, 100% 12.267%, 100% 71.733%);
    z-index: 200;
}
.works .image_01_wrap::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #005ead;
    transform: scaleX(0);
    z-index: 300;
}
.works .image_01_wrap.animation_active::before {
    animation: extendAnime_show_image_cover 1s ease-in forwards;
}
.works .image_01_wrap .image_01 {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    opacity: 0;
}
.works .image_01_wrap.animation_active .image_01 {
    animation: extendAnime_show_image 1s ease-in forwards;
}
.works .image_01_shadow_wrap {
    position: absolute;
    top: 70px;
    left: 20px;
    width: 800px;
    height: 750px;
    clip-path: polygon( 0% 100%, 0% 0%, 100% 12.267%, 100% 71.733%);
    z-index: 100;
    mix-blend-mode: multiply;
}
.works .image_01_shadow_wrap .image_01_shadow {
    width: 100%;
    height: 100%;
    background-color: #00ccea;
    opacity: 0.6;
    clip-path: inset( 0 100% 0 0 );
}
.works .image_01_shadow_wrap.animation_active .image_01_shadow {
    animation: extendAnime_show_image_shadow .5s ease-in forwards;
}
@keyframes extendAnime_show_image_shadow {
    0% { clip-path: inset( 0 100% 0 0 ); }
    100% { clip-path: inset( 0 0 0 0 ); }
}
@media screen and ( max-width: 1600px ){
    .works .image_01_wrap {
        width: calc( 100vw * 800 / 1600 );
        height: calc( 100vw * 750 / 1600 );
    }
    .works .image_01_shadow_wrap {
        top: calc( 100vw * 70 / 1600 );
        left: calc( 100vw * 20 / 1600 );
        width: calc( 100vw * 800 / 1600 );
        height: calc( 100vw * 750 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .works .image_01_wrap {
        top: 0;
        left: 0;
        width: calc( 100vw * 750 / 750 );
        height: calc( 100vw * 550 / 750 );
        clip-path: polygon( 0% 100%, 0% 0%, 100% 12.267%, 100% 71.733%);
    }
    .works .image_01_shadow_wrap {
        top: calc( 100vw * 80 / 750 );
        left: calc( 100vw * 85 / 750 * -1 );
        width: calc( 100vw * 750 / 750 );
        height: calc( 100vw * 550 / 750 );
        clip-path: polygon( 0% 100%, 0% 0%, 100% 12.267%, 100% 71.733%);
    }
}



/* ========================================

.fascinating

======================================== */
.section.fascinating {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 50px calc( ( 100vw - 1200px ) / 2 ) 710px calc( ( 100vw - 1200px ) / 2 );
}
@media screen and ( max-width: 1600px ){
    .section.fascinating {
        padding: calc( 100vw * 50 / 1600 ) calc( 100vw * 200 / 1600 ) calc( 100vw * 710 / 1600 ) calc( 100vw * 200 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .section.fascinating {
        padding: 0 calc( 100vw * 85 / 750 ) calc( 100vw * 790 / 750 ) calc( 100vw * 85 / 750 );
    }
}



.fascinating .box_content {
    position: relative;
    width: 100%;
    margin: 0 0 0 auto;
    padding: 0;
}
@media screen and ( max-width: 768px ){
    .fascinating .box_content {
        margin: 0;
    }
}



.fascinating .box_content h2 {
    position: relative;
    margin: 0 0 30px 0;
}
.fascinating .box_content h2 span.jp {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 7px;
    background-color: #00ccea;
    color: #fff;
    font-size: 16px;
    z-index: 200;
}
@media screen and ( max-width: 1600px ){
    .fascinating .box_content h2 {
        margin: 0 0 calc( 100vw * 30 / 1600 ) 0;
    }
    .fascinating .box_content h2 span.jp {
        padding: calc( 100vw * 7 / 1600 );
        font-size: calc( 100vw * 16 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .fascinating .box_content h2 {
        margin: 0 0 calc( 100vw * 30 / 750 ) 0;
    }
    .fascinating .box_content h2 span.jp {
        padding: calc( 100vw * 10 / 750 );
        font-size: calc( 100vw * 28 / 750 );
    }
}



.fascinating .box_content .caption {
    position: relative;
    margin: 0;
    padding: 0 0 30px 0;
    color: #333;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 28px;
    line-height: 1.5;
}
.fascinating .box_content p {
    position: relative;
    margin: 0;
    padding: 0;
    color: #333;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 18px;
    line-height: 2;
}
@media screen and ( max-width: 1600px ){
    .fascinating .box_content .caption {
        padding: 0 0 calc( 100vw * 30 / 1600 ) 0;
        font-size: calc( 100vw * 28 / 1600 );
    }
    .fascinating .box_content p {
        font-size: calc( 100vw * 18 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .fascinating .box_content .caption {
        margin: 0 0 calc( 100vw * 50 / 750 ) 0;
        padding: 0;
        font-size: calc( 100vw * 44 / 750 );
    }
    .fascinating .box_content p {
        font-size: calc( 100vw * 32 / 750 );
    }
}



.fascinating .image_01_wrap {
    position: absolute;
    bottom: 100px;
    left: 0;
    width: 100%;
    height: 550px;
    z-index: 200;
}
.fascinating .image_01_wrap::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #005ead;
    transform: scaleX(0);
    z-index: 300;
}
.fascinating .image_01_wrap.animation_active::before {
    animation: extendAnime_show_image_cover 1s ease-in forwards;
}
.fascinating .image_01_wrap .image_01 {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    opacity: 0;
}
.fascinating .image_01_wrap.animation_active .image_01 {
    animation: extendAnime_show_image 1s ease-in forwards;
}
@media screen and ( max-width: 1600px ){
    .fascinating .image_01_wrap {
        bottom: calc( 100vw * 100 / 1600 );
        height: calc( 100vw * 550 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .fascinating .image_01_wrap {
        bottom: calc( 100vw * 150 / 750 );
        height: calc( 100vw * 550 / 750 );
    }
}



/* ========================================

.episode

======================================== */
.section.episode {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0 calc( ( 100vw - 1200px ) / 2 ) 140px calc( ( 100vw - 1200px ) / 2 );
}
@media screen and ( max-width: 1600px ){
    .section.episode {
        padding: 0 calc( 100vw * 200 / 1600 ) calc( 100vw * 140 / 1600 ) calc( 100vw * 200 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .section.episode {
        padding: 0 calc( 100vw * 85 / 750 ) calc( 100vw * 140 / 750 ) calc( 100vw * 85 / 750 );
    }
}



.episode .box_content {
    position: relative;
    width: 100%;
    margin: 0 0 0 auto;
    padding: 0;
}
@media screen and ( max-width: 768px ){
}



.episode .box_content h2 {
    position: relative;
    margin: 0 0 30px 0;
}
.episode .box_content h2 span.jp {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 7px;
    background-color: #00ccea;
    color: #fff;
    font-size: 16px;
    z-index: 200;
}
@media screen and ( max-width: 1600px ){
    .episode .box_content h2 {
        margin: 0 0 calc( 100vw * 30 / 1600 ) 0;
    }
    .episode .box_content h2 span.jp {
        padding: calc( 100vw * 7 / 1600 );
        font-size: calc( 100vw * 16 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .episode .box_content h2 {
        margin: 0 0 calc( 100vw * 30 / 750 ) 0;
    }
    .episode .box_content h2 span.jp {
        padding: calc( 100vw * 10 / 750 );
        font-size: calc( 100vw * 28 / 750 );
    }
}



.episode .box_content .caption {
    position: relative;
    margin: 0;
    padding: 0 0 30px 0;
    color: #333;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 28px;
    line-height: 1.5;
}
.episode .box_content p {
    position: relative;
    margin: 0;
    padding: 0;
    color: #333;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 18px;
    line-height: 2;
}
@media screen and ( max-width: 1600px ){
    .episode .box_content .caption {
        padding: 0 0 calc( 100vw * 30 / 1600 ) 0;
        font-size: calc( 100vw * 28 / 1600 );
    }
    .episode .box_content p {
        font-size: calc( 100vw * 18 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .episode .box_content .caption {
        margin: 0 0 calc( 100vw * 50 / 750 ) 0;
        padding: 0;
        font-size: calc( 100vw * 44 / 750 );
    }
    .episode .box_content p {
        font-size: calc( 100vw * 32 / 750 );
    }
}



/* ========================================

.challenge

======================================== */
.section.challenge {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0 calc( ( 100vw - 1200px ) / 2 ) 300px calc( ( 100vw - 1200px ) / 2 );
}
.section.challenge::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 225px;
    background-color: rgba( 0, 204, 234, 0.2 );
    clip-path: polygon( 0% 100%, 100% 0%, 100% 100% );
}
@media screen and ( max-width: 1600px ){
    .section.challenge {
        padding: 0 calc( 100vw * 200 / 1600 ) calc( 100vw * 300 / 1600 ) calc( 100vw * 200 / 1600 );
    }
    .section.challenge::before {
        height: calc( 100vw * 225 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .section.challenge {
        padding: 0 calc( 100vw * 85 / 750 ) calc( 100vw * 270 / 750 ) calc( 100vw * 85 / 750 );
    }
    .section.challenge::before {
        height: calc( 100vw * 200 / 750 );
    }
}



.challenge .box_content {
    position: relative;
    width: 100%;
    margin: 0 0 0 auto;
    padding: 0;
}
@media screen and ( max-width: 768px ){
}



.challenge .box_content h2 {
    position: relative;
    margin: 0 0 30px 0;
}
.challenge .box_content h2 span.jp {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 7px;
    background-color: #00ccea;
    color: #fff;
    font-size: 16px;
    z-index: 200;
}
@media screen and ( max-width: 1600px ){
    .challenge .box_content h2 {
        margin: 0 0 calc( 100vw * 30 / 1600 ) 0;
    }
    .challenge .box_content h2 span.jp {
        padding: calc( 100vw * 7 / 1600 );
        font-size: calc( 100vw * 16 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .challenge .box_content h2 {
        margin: 0 0 calc( 100vw * 30 / 750 ) 0;
    }
    .challenge .box_content h2 span.jp {
        padding: calc( 100vw * 10 / 750 );
        font-size: calc( 100vw * 28 / 750 );
    }
}



.challenge .box_content .caption {
    position: relative;
    margin: 0;
    padding: 0 0 30px 0;
    color: #333;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 28px;
    line-height: 1.5;
}
.challenge .box_content p {
    position: relative;
    margin: 0;
    padding: 0;
    color: #333;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 18px;
    line-height: 2;
}
@media screen and ( max-width: 1600px ){
    .challenge .box_content .caption {
        padding: 0 0 calc( 100vw * 30 / 1600 ) 0;
        font-size: calc( 100vw * 28 / 1600 );
    }
    .challenge .box_content p {
        font-size: calc( 100vw * 18 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .challenge .box_content .caption {
        margin: 0 0 calc( 100vw * 50 / 750 ) 0;
        padding: 0;
        font-size: calc( 100vw * 44 / 750 );
    }
    .challenge .box_content p {
        font-size: calc( 100vw * 32 / 750 );
    }
}



/* ========================================

.daily_flow

======================================== */
.section.daily_flow {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 25px calc( ( 100vw - 950px ) / 2 ) 150px calc( ( 100vw - 950px ) / 2 );
    background-color: rgba( 0, 204, 234, 0.2 );
}
@media screen and ( max-width: 1600px ){
    .section.daily_flow {
        padding: calc( 100vw * 25 / 1600 ) calc( 100vw * 325 / 1600 ) calc( 100vw * 150 / 1600 ) calc( 100vw * 325 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .section.daily_flow {
        padding: calc( 100vw * 60 / 750 ) calc( 100vw * 85 / 750 ) calc( 100vw * 200 / 750 ) calc( 100vw * 85 / 750 );
    }
}



.daily_flow h2 {
    margin: 0 0 60px 0;
}
.daily_flow h2 span.en {
    font-size: 65px;
    line-height: 1;
}
.daily_flow h2 span.jp {
    font-size: 16px;
}
@media screen and ( max-width: 1600px ){
    .daily_flow h2 {
        margin: 0 0 calc( 100vw * 60 / 1600 ) 0;
    }
    .daily_flow h2 span.en {
        font-size: calc( 100vw * 65 / 1600 );
    }
    .daily_flow h2 span.jp {
        font-size: calc( 100vw * 16 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .daily_flow h2 {
        margin: 0 0 calc( 100vw * 80 / 750 ) 0;
    }
    .daily_flow h2 span.en {
        display: inline-block;
        margin: 0 0 calc( 100vw * 20 / 750 ) 0;
        font-size: calc( 100vw * 80 / 750 );
    }
    .daily_flow h2 span.jp {
        display: inline-block;
        font-size: calc( 100vw * 28 / 750 );
    }
}



.daily_flow .box_content {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 20px 0 0 0;
}
.daily_flow .box_content::before {
    position: absolute;
    top: 0;
    left: 30px;
    content: '';
    width: 1px;
    height: 100%;
    background-color: #005ead;
}
@media screen and ( max-width: 1600px ){
    .daily_flow .box_content {
        padding: calc( 100vw * 20 / 1600 ) 0 0 0;
    }
    .daily_flow .box_content::before {
        left: calc( 100vw * 30 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .daily_flow .box_content {
        padding: calc( 100vw * 40 / 750 ) 0 0 0;
    }
    .daily_flow .box_content::before {
        left: calc( 100vw * 45 / 750 );
    }
}



.daily_flow .box_content .box_item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 0 0 20px 0;
}
@media screen and ( max-width: 1600px ){
    .daily_flow .box_content .box_item {
        padding: 0 0 calc( 100vw * 20 / 1600 ) 0;
    }
}
@media screen and ( max-width: 768px ){
    .daily_flow .box_content .box_item {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 0 calc( 100vw * 40 / 750 ) 0;
    }
}



.daily_flow .box_content .box_item .time {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 190px;
    margin: 0;
    padding: 0;
}
.daily_flow .box_content .box_item .time .icon_clock {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.daily_flow .box_content .box_item .time .time_text {
    position: relative;
    width: 60px;
    margin: 0;
    padding: 0;
    color: #005ead;
    font-size: 28px;
    font-family: "Oswald";
    font-weight: 400;
    line-height: 1;
    text-align: right;
}
@media screen and ( max-width: 1600px ){
    .daily_flow .box_content .box_item .time {
        width: calc( 100vw * 190 / 1600 );
    }
    .daily_flow .box_content .box_item .time .icon_clock {
        width: calc( 100vw * 60 / 1600 );
        height: calc( 100vw * 60 / 1600 );
    }
    .daily_flow .box_content .box_item .time .time_text {
        width: calc( 100vw * 60 / 1600 );
        font-size: calc( 100vw * 28 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .daily_flow .box_content .box_item .time {
        width: calc( 100vw * 230 / 750 );
    }
    .daily_flow .box_content .box_item .time .icon_clock {
        width: calc( 100vw * 90 / 750 );
        height: calc( 100vw * 90 / 750 );
    }
    .daily_flow .box_content .box_item .time .time_text {
        width: calc( 100vw * 108 / 750 );
        font-size: calc( 100vw * 56 / 750 );
        text-align: left;
    }
}


.daily_flow .box_content .box_item .time .icon_clock.time_0730 { background-image: url( '/recruit/asset/img/common/icon-clock_0730.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_0800 { background-image: url( '/recruit/asset/img/common/icon-clock_0800.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_0815 { background-image: url( '/recruit/asset/img/common/icon-clock_0815.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_0830 { background-image: url( '/recruit/asset/img/common/icon-clock_0830.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_0845 { background-image: url( '/recruit/asset/img/common/icon-clock_0845.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_0900 { background-image: url( '/recruit/asset/img/common/icon-clock_0900.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_1000 { background-image: url( '/recruit/asset/img/common/icon-clock_1000.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_1200 { background-image: url( '/recruit/asset/img/common/icon-clock_1200.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_1300 { background-image: url( '/recruit/asset/img/common/icon-clock_1300.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_1400 { background-image: url( '/recruit/asset/img/common/icon-clock_1400.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_1500 { background-image: url( '/recruit/asset/img/common/icon-clock_1500.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_1530 { background-image: url( '/recruit/asset/img/common/icon-clock_1530.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_1600 { background-image: url( '/recruit/asset/img/common/icon-clock_1600.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_1630 { background-image: url( '/recruit/asset/img/common/icon-clock_1630.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_1700 { background-image: url( '/recruit/asset/img/common/icon-clock_1700.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_1730 { background-image: url( '/recruit/asset/img/common/icon-clock_1730.png' ); }
.daily_flow .box_content .box_item .time .icon_clock.time_1800 { background-image: url( '/recruit/asset/img/common/icon-clock_1800.png' ); }
@media screen and ( max-width: 768px ){
}



.daily_flow .box_content .action {
    position: relative;
    width: 710px;
    margin: 0;
    padding: 14px 0 0 0;
    color: #333;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 18px;
    line-height: 2;
}
@media screen and ( max-width: 1600px ){
    .daily_flow .box_content .action {
        width: calc( 100vw * 710 / 1600 );
        padding: calc( 100vw * 14 / 1600 ) 0 0 0;
        font-size: calc( 100vw * 18 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .daily_flow .box_content .action {
        width: 100%;
        padding: 0 0 0 calc( 100vw * 122 / 750 );
        font-size: calc( 100vw * 32 / 750 );
        line-height: 2;
    }
}



/* ========================================

.messsage

======================================== */
.section.messsage {
    position: relative;
    width: 100%;
    height: 700px;
    margin: 0;
    padding: 120px calc( ( 100vw - 1200px ) / 2 ) 0 calc( ( 100vw - 1200px ) / 2 );
    background-color: #00ccea;
}
.section.messsage::before {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    width: 600px;
    height: 700px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    clip-path: polygon( 0% 100%, 50% 0%, 100% 0%, 100% 100% );
}
@media screen and ( max-width: 1600px ){
    .section.messsage {
        height: calc( 100vw * 700 / 1600 );
        padding: calc( 100vw * 120 / 1600 ) calc( 100vw * 200 / 1600 ) 0 calc( 100vw * 200 / 1600 );
    }
    .section.messsage::before {
        width: calc( 100vw * 600 / 1600 );
        height: calc( 100vw * 700 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .section.messsage {
        height: auto;
        padding: calc( 100vw * 630 / 750 ) calc( 100vw * 85 / 750 ) calc( 100vw * 200 / 750 ) calc( 100vw * 85 / 750 );
    }
    .section.messsage::before {
        width: calc( 100vw * 750 / 750 );
        height: calc( 100vw * 600 / 750 );
        clip-path: polygon( 0% 100%, 0% 0%, 100% 0%, 100% 66.667% );
    }
}



.messsage h2 {
    margin: 0 0 40px 0;
}
.messsage h2 span.en {
    font-size: 65px;
    line-height: 1;
}
.messsage h2 span.jp {
    font-size: 16px;
}
@media screen and ( max-width: 1600px ){
    .messsage h2 {
        margin: 0 0 calc( 100vw * 40 / 1600 ) 0;
    }
    .messsage h2 span.en {
        font-size: calc( 100vw * 65 / 1600 );
    }
    .messsage h2 span.jp {
        font-size: calc( 100vw * 16 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .messsage h2 {
        width: calc( 100vw * 580 / 750 );
        margin: 0 auto calc( 100vw * 70 / 750 ) auto;
        text-align: center;
        clip-path: circle( 0vw at 50% 50% );
    }
    .messsage h2.animation_active {
        animation: extendAnime_h2_center 1s ease-in forwards;
    }
    .messsage h2 span.en {
        display: inline-block;
        margin: 0 0 calc( 100vw * 20 / 750 ) 0;
        font-size: calc( 100vw * 80 / 750 );
    }
    .messsage h2 span.jp {
        display: inline-block;
        font-size: calc( 100vw * 28 / 750 );
    }
}



.messsage p {
    position: relative;
    width: calc( 100vw * 700 / 1600 );
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 20px;
    line-height: 2;
}
@media screen and ( max-width: 1600px ){
    .messsage p {
        width: calc( 100vw * 700 / 1600 );
        font-size: calc( 100vw * 20 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .messsage p {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: calc( 100vw * 32 / 750 );
        line-height: 2;
    }
}



/* ========================================

.person_index

======================================== */
.section.person_index {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 200px calc( ( 100vw - 1200px ) / 2 ) 250px calc( ( 100vw - 1200px ) / 2 );
}
@media screen and ( max-width: 1600px ){
    .section.person_index {
        padding: calc( 100vw * 200 / 1600 ) calc( 100vw * 200 / 1600 ) calc( 100vw * 250 / 1600 ) calc( 100vw * 200 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .section.person_index {
        padding: calc( 100vw * 200 / 750 ) 0 calc( 100vw * 120 / 750 ) 0;
    }
}



.person_index h2.center {
    position: relative;
    margin: 0 0 100px 0;
    clip-path: none;
}
.person_index h2::before {
    position: absolute;
    top: calc( 50% - 0.5px );
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #005ead;
    z-index: 100;
}
.person_index h2 span.en {
    position: relative;
    display: inline-block;
    padding: 0 0.5em;
    background-color: #fff;
    font-size: 30px;
    line-height: 1;
    z-index: 200;
}
@media screen and ( max-width: 1600px ){
    .person_index h2.center {
        margin: 0 0 calc( 100vw * 100 / 1600 ) 0;
    }
    .person_index h2::before {
        top: calc( 50% - 0.5px );
    }
    .person_index h2 span.en {
        font-size: calc( 100vw * 30 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .person_index h2.center {
        width: calc( 100vw * 580 / 750 );
        margin: 0 auto calc( 100vw * 100 / 750 ) auto;
    }
    .person_index h2 span.en {
        font-size: calc( 100vw * 50 / 750 );
    }
}


.person_index .box_person_list {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
@media screen and ( max-width: 768px ){
    .person_index .box_person_list {
        max-width: none;
    }
}



.person_index .box_person_list .box_item_wrap {
    position: relative;
    width: 387px;
    height: 500px;
    margin: 0;
    padding: 0;
}
.person_index .box_person_list .box_item_wrap.animation_active::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background-color: #005ead;
    z-index: 300;
}
.person_index .box_person_list .box_item_wrap.animation_active::before {
    animation: extendAnime_show_image_cover 1s ease-in forwards;
}
@media screen and ( max-width: 1600px ){
    .person_index .box_person_list .box_item_wrap {
        width: calc( 100vw * 387 / 1600 );
        height: calc( 100vw * 500 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .person_index .box_person_list .box_item_wrap {
        width: calc( 100vw * 580 / 750 );
        height: calc( 100vw * 750 / 750 );
        margin: 0;
    }
    .person_index .box_person_list .box_item_wrap:nth-last-of-type(-n+2) {
        margin: 0;
    }
    .person_index .box_person_list .box_item_wrap:last-of-type {
        margin: 0;
    }
}



.person_index .box_person_list .box_item {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
}
.person_index .box_person_list .box_item.animation_active {
    animation: extendAnime_show_image 1s ease-in forwards;
}



.person_index .box_person_list .box_item .image {
    position: relative;
    width: 387px;
    height: 500px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.person_index .box_person_list .box_item .image img {
    position: relative;
    width: 100%;
}
@media screen and ( max-width: 1600px ){
    .person_index .box_person_list .box_item .image {
        width: calc( 100vw * 387 / 1600 );
        height: calc( 100vw * 500 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .person_index .box_person_list .box_item .image {
        width: calc( 100vw * 580 / 750 );
        height: calc( 100vw * 750 / 750 );
    }
}


.person_index .box_person_list .box_item .image_bg {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.person_index .box_person_list .box_item .image_bg::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 687px;    /* 幅 +300 */
    height: 510px;    /* 高さ +10 */
    transform: skewX( -23.3deg ) translateX( 245px );
    mix-blend-mode: multiply;
}
.person_index .box_person_list .box_item.is_hover .image_bg::before {
    background-color: #00ccea;
}
.person_index .box_person_list .box_item.coming_soon .image_bg::before {
    background-color: rgba( 0, 0, 0, 0.3 );
}
.person_index .box_person_list .box_item.is_hover .image_bg::before {
    transition: all 1s;
}
.person_index .box_person_list .box_item.is_hover:hover .image_bg::before {
    left: -360px;
}
@media screen and ( max-width: 1600px ){
    .person_index .box_person_list .box_item .image_bg::before {
        width: calc( 100vw * 687 / 1600 );    /* 幅 +300 */
        height: calc( 100vw * 510 / 1600 );    /* 高さ +10 */
        transform: skewX( -23.3deg ) translateX( calc( 100vw * 245 / 1600 ) );
    }
    .person_index .box_person_list .box_item.is_hover:hover .image_bg::before {
        left: calc( 100vw * 360 / 1600 * -1 );
    }
}
@media screen and ( max-width: 768px ){
    .person_index .box_person_list .box_item .image_bg::before {
        width: calc( 100vw * 880 / 750 ); /* 幅 +300 */
        height: calc( 100vw * 760 / 750 ); /* 高さ +10 */
        transform: skewX( -23.3deg ) translateX( calc( 100vw * 345 / 750 ) );
    }
    .person_index .box_person_list .box_item.is_hover .image_bg::before {
        transition: none;
    }
    .person_index .box_person_list .box_item.is_hover:hover .image_bg::before {
        left: 0;
    }
}



.person_index .box_person_list .box_item .image_text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
}
@media screen and ( max-width: 768px ){
}



.person_index .box_person_list .box_item .image_text .content {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 30px;
    content: '';
}
@media screen and ( max-width: 1600px ){
    .person_index .box_person_list .box_item .image_text .content {
        padding: calc( 100vw * 30 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .person_index .box_person_list .box_item .image_text .content {
        padding: calc( 100vw * 40 / 750 ) calc( 100vw * 30 / 750 );
    }
}



.person_index .box_person_list .box_item .image_text .content .hover_text {
    position: relative;
    width: 100%;
    margin: 0 0 25px 0;
    padding: 0;
}
@media screen and ( max-width: 1600px ){
    .person_index .box_person_list .box_item .image_text .content .hover_text {
        margin: 0 0 calc( 100vw * 25 / 1600 ) 0;
    }
}
@media screen and ( max-width: 768px ){
    .person_index .box_person_list .box_item .image_text .content .hover_text {
        margin: 0 0 calc( 100vw * 50 / 750 ) 0;
    }
}



.person_index .box_person_list .box_item .image_text .content .hover_text .affiliation {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 18px;
    line-height: 2;
    text-align: right;
    text-shadow: 0 0 15px #333;
    opacity: 1;
}
.person_index .box_person_list .box_item.is_hover .image_text .content .hover_text .affiliation {
    transition: opacity 0.5s;
}
.person_index .box_person_list .box_item.is_hover:hover .image_text .content .hover_text .affiliation {
    opacity: 0;
}
@media screen and ( max-width: 1600px ){
    .person_index .box_person_list .box_item .image_text .content .hover_text .affiliation {
        font-size: calc( 100vw * 18 / 1600 );
        text-shadow: 0 0 calc( 100vw * 15 / 1600 ) #333;
    }
}
@media screen and ( max-width: 768px ){
    .person_index .box_person_list .box_item .image_text .content .hover_text .affiliation {
        font-size: calc( 100vw * 32 / 750 );
    }
    .person_index .box_person_list .box_item.is_hover .image_text .content .hover_text .affiliation {
        transition: none;
    }
    .person_index .box_person_list .box_item.is_hover:hover .image_text .content .hover_text .affiliation {
        opacity: 1;
    }
}



.person_index .box_person_list .box_item .image_text .content .hover_text .comment {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: "游ゴシック体 Pr6N B";
    font-size: 24px;
    line-height: 2;
    text-align: right;
    text-shadow: 0 0 15px #333;
    opacity: 0;
}
.person_index .box_person_list .box_item.is_hover .image_text .content .hover_text .comment {
    transition: opacity 0.5s;
}
.person_index .box_person_list .box_item.is_hover:hover .image_text .content .hover_text .comment {
    opacity: 1;
}
@media screen and ( max-width: 1600px ){
    .person_index .box_person_list .box_item .image_text .content .hover_text .comment {
        font-size: calc( 100vw * 24 / 1600 );
        text-shadow: 0 0 calc( 100vw * 15 / 1600 ) #333;
    }
}
@media screen and ( max-width: 768px ){
    .person_index .box_person_list .box_item .image_text .content .hover_text .comment {
        display: none;
    }
}



.person_index .box_person_list .box_item .image_text .content .name {
    position: relative;
    margin: 0 0 50px 0;
    padding: 0;
    color: #fff;
    font-family: "Oswald";
    font-size: 45px;
    font-weight: 500;
    line-height: 1;
    text-align: right;
    text-shadow: 0 0 15px #333;
}
@media screen and ( max-width: 1600px ){
    .person_index .box_person_list .box_item .image_text .content .name {
        margin: 0 0 calc( 100vw * 50 / 1600 ) 0;
        font-size: calc( 100vw * 45 / 1600 );
        text-shadow: 0 0 calc( 100vw * 15 / 1600 ) #333;
    }
}
@media screen and ( max-width: 768px ){
    .person_index .box_person_list .box_item .image_text .content .name {
        font-size: calc( 100vw * 64 / 750 );
    }
}



.person_index .box_person_list .box_item .image_text .content .coming_soon {
    position: relative;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: "Oswald";
    font-size: 25px;
    font-weight: 500;
    line-height: 1;
    text-align: right;
    text-shadow: 0 0 15px #333;
}
@media screen and ( max-width: 1600px ){
    .person_index .box_person_list .box_item .image_text .content .coming_soon {
        font-size: calc( 100vw * 25 / 1600 );
        text-shadow: 0 0 calc( 100vw * 15 / 1600 ) #333;
    }
}
@media screen and ( max-width: 768px ){
    .person_index .box_person_list .box_item .image_text .content .coming_soon {
        font-size: calc( 100vw * 40 / 750 );
    }
}



.person_index .box_person_list .box_item .image_text .content .link_arrow {
    position: relative;
    width: 60px;
    margin: 0 0 0 auto;
    padding: 0;
    color: #fff;
    font-family: "Oswald";
    font-size: 25px;
    font-weight: 500;
    line-height: 1;
    text-align: right;
}
.person_index .box_person_list .box_item .image_text .content .link_arrow img {
    position: relative;
    display: inline-block;
    width: 100%;
}
@media screen and ( max-width: 1600px ){
    .person_index .box_person_list .box_item .image_text .content .link_arrow {
        width: calc( 100vw * 60 / 1600 );
        font-size: calc( 100vw * 25 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .person_index .box_person_list .box_item .image_text .content .link_arrow {
        width: calc( 100vw * 103 / 750 );
        font-size: calc( 100vw * 40 / 750 );
    }
}



/*
slick
*/
.person_index .box_person_list .slick-slide {
    width: 387px;
    height: 500px;
    margin: 0 9.75px;
    position: relative;
    overflow: hidden;
}
.person_index .box_person_list .slick-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and ( max-width: 1600px ){
    .person_index .box_person_list .slick-slide {
        width: calc( 100vw * 387 / 1600 );
        height: calc( 100vw * 500 / 1600 );
        margin: 0 calc( 100vw * 9.75 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .person_index .box_person_list .slick-slide {
        width: calc( 100vw * 580 / 750 );
        height: calc( 100vw * 750 / 750 );
        margin: 0 calc( 100vw * 22.5 / 750 );
    }
}



/* coustom arrow */
.person_index .box_person_list .slick-arrow {
    position: absolute;
    top: calc( 50% - 26px );
    width: 20px;
    height: 52px;
    font-size: 0;
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: none;
    z-index: 350;
}
.person_index .box_person_list .slick-arrow::before {
    position: absolute;
    width: 100%!important;
    height: 100%!important;
    content: ''!important;
}
.person_index .box_person_list .slick-next {
    right: -50px;
}
.person_index .box_person_list .slick-next::before {
    background-image: url( '/recruit/asset/img/common/icon-arrow_gt-large-blue.png' )!important;
    background-size: contain;
    background-repeat: no-repeat;
}
.person_index .box_person_list .slick-prev {
    left: -50px;
}
.person_index .box_person_list .slick-prev::before {
    background-image: url( '/recruit/asset/img/common/icon-arrow_lt-large-blue.png' )!important;
    background-size: contain;
    background-repeat: no-repeat;
}
@media screen and ( max-width: 1600px ){
    .person_index .box_person_list .slick-arrow {
        top: calc( 50% - calc( 100vw * 52 / 1600 / 2 ) );
        width: calc( 100vw * 20 / 1600 );
        height: calc( 100vw * 52 / 1600 );
    }
    .person_index .box_person_list .slick-next {
        right: calc( 100vw * 50 / 1600 * -1 );
    }
    .person_index .box_person_list .slick-prev {
        left: calc( 100vw * 50 / 1600 * -1 );
    }
}



.person_index .slider_dots {
    position: relative;
    margin: 0 0 30px 0;
}
.person_index .slider_dots .slick-dots {
    text-align: center;
}
.person_index .slider_dots .slick-dots li {
    display: inline-block;
}
.person_index .slider_dots .slick-dots button {
    display: block;
    width: 10px;
    height: 10px;
    margin: 6px;
    padding: 0;
    font-size: 0;
    background: transparent;
    border: solid thin #005ead;
    outline: none;
    cursor: pointer;
}
.person_index .slider_dots .slick-dots .slick-active button {
    border: solid thin #00ccea;
    background: #00ccea;
}
@media screen and ( max-width: 1600px ){
    .person_index .slider_dots {
        margin: 0 0 calc( 100vw * 30 / 1600 ) 0;
    }
    .person_index .slider_dots .slick-dots button {
        width: calc( 100vw * 10 / 1600 );
        height: calc( 100vw * 10 / 1600 );
        margin: calc( 100vw * 6 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .person_index .slider_dots .slick-dots button {
        width: calc( 100vw * 20 / 750 );
        height: calc( 100vw * 20 / 750 );
        margin: calc( 100vw * 20 / 750 );
    }
}



.person_index .annotation {
    color: #000;
    font-family: "游ゴシック体 Pr6N M";
    font-size: 18px;
    line-height: 1;
    text-align: right;
}
@media screen and ( max-width: 1600px ){
    .person_index .annotation {
        font-size: calc( 100vw * 18 / 1600 );
    }
}
@media screen and ( max-width: 768px ){
    .person_index .annotation {
        margin: calc( 100vw * 70 / 750 ) 0 0 0;
        padding: 0 calc( 100vw * 85 / 750 );
        font-size: calc( 100vw * 24 / 750 );
        line-height: 1.417;
        text-align: center;
    }
}