@charset "UTF-8";

/* 共通 */
body:not(.index)::before,
body:not(.index)::after {
    display: none;
}

/* lv */
#lv {
    height: 100vh !important;
    width: 100%;
    max-width: none;
}

#lv p {
    mix-blend-mode: hard-light;
}

#lv p>span {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto auto;
    align-items: end;
    gap: 0 30px;
}

#lv p>span span.txt:first-of-type {
    grid-area: 1 / 1 / 4 / 2;
    writing-mode: vertical-rl;
    font-size: clamp(4rem, 8vw, 12rem);
    color: var(--i_main_color);
}

#lv p>span span.txt:nth-of-type(2) {
    font-size: clamp(4rem, 8vw, 12rem);
    font-weight: 900;
    padding-bottom: 30px;
}

#lv p>span span.txt:nth-of-type(2)::first-letter {
    color: var(--i_yellow_color);
    background: linear-gradient(-185deg, var(--i_main_color), var(--i_yellow_color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

#lv p>span span.txt:nth-of-type(3) {
    font-size: clamp(2rem, 2.5vw, 3.5rem);
}

#lv p>span span.txt:nth-of-type(4) {
    font-size: clamp(2rem, 5vw, 4rem);
    padding-bottom: 20px;
}

#lv_outer::before {
    bottom: -50px;
}

#lv_outer::after {
    position: absolute;
    display: block;
    content: "";
    pointer-events: none;
    width: 25vw;
    max-width: 458px;
    min-width: 300px;
    height: 100%;
    bottom: 75px;
    right: 0;
    background: url("/common/upload_data/recruit-spread-grpcojp/image/slanting_bg3.png") no-repeat right bottom / contain;
    z-index: 2;
    opacity: 0;
    transform: translateX(250px);
}

#lv_outer.active::after {
    opacity: 1;
    transform: translateX(0);
    transition: transform .6s ease-out 0.6s, opacity .3s ease-out 0.6s;
}

@media screen and (max-width: 900px) {
    #lv_outer::before {
        bottom: -20px;
    }

    #lv_outer::after {
        bottom: 40px;
    }

    #lv {
        height: 75vh !important;
        min-height: auto !important;
        align-items: flex-end;
    }

    #lv .parallax_img {
        background-position: 70% 50% !important
    }

    #lv p {
        padding-bottom: 50px;
    }

    #lv p>span {
        align-items: flex-start;
        gap: 0 10px;
    }

    #lv p>span span.txt:nth-of-type(2) {
        padding-bottom: 15px;
    }
}

/* --- */
a[id^="gr"]+section {
    overflow: visible;
}

a[id^="gr"]+section::before {
    position: absolute;
    display: block;
    pointer-events: none;
    writing-mode: vertical-rl;
    font-size: clamp(6rem, 8vw, 15rem);
    color: var(--i_sub_color);
    font-weight: 900;
    line-height: 1;
}

a[id^="gr"]+section>.content_wrapper {
    border: 10px solid var(--i_sub_color);
    background: var(--i_bg_color);
    border-top: 0;
    padding: 0;
}

a[id^="gr"]+section .heading.block_header_4 {
    background: var(--i_sub_color);
    padding: 20px 4% 10px;
}

a[id^="gr"]+section .heading.block_header_4 .h {
    color: var(--i_bg_color);
    font-size: clamp(2.5rem, 5vw, 7rem) !important;
    line-height: 1.2;
}

a[id^="gr"]+section .wrapper_item {
    padding: 15px 30px 30px !important;
}

a[id^="gr"]+section .inner_item_txt p {
    font-weight: bold;
}

/* 過去20年の挑戦 */
#gr+section::before {
    content: "IT BEGINS \A A NEW REVOLUTION";
    white-space: pre;
    top: 50px;
    right: 10px;
    background: linear-gradient(45deg, var(--i_sub_color), var(--i_yellow_color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    opacity: 0;
}

#gr+section.anm2::before {
    animation: slideIntop 0.8s ease-out forwards 0.3s;
}

@keyframes slideIntop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 関西から世界 */
#gr+section>.content_wrapper {
    margin-right: 20%;
}

#gr2+section::before {
    content: "KANSAI \A LEADS THE WORLD";
    white-space: pre;
    top: -50%;
    left: 10px;
    background: linear-gradient(-185deg, var(--i_main_color), var(--i_yellow_color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-align: right;
    opacity: 0;
}

#gr2+section.anm2::before {
    animation: slideIntop2 0.8s ease-out forwards 0.3s;
}

@keyframes slideIntop2 {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

#gr2+section>.content_wrapper {
    margin-left: 20%;
}

#gr2+section .heading.block_header_4 {
    background: var(--i_main_color);
}

#gr2+section>.content_wrapper {
    border: 10px solid var(--i_main_color);
    border-top: 0;
}

/* すべてをリセットして挑戦するのか */
#gr3+section>.content_wrapper {
    margin-right: 20%;
}

#gr3+section::before {
    content: "STEP INTO \A THE UNKNOWN";
    white-space: pre;
    top: 150px;
    right: 10px;
    background: linear-gradient(45deg, var(--i_sub_color), var(--i_yellow_color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-align: right;
    opacity: 0;
}

#gr3+section.anm2::before {
    animation: slideIntop3 0.8s ease-out forwards 0.3s;
}

@keyframes slideIntop3 {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@media screen and (max-width: 1500px) {
    a[id^="gr"]+section>.content_wrapper {
        width: 85%;
    }

    #gr+section>.content_wrapper,
    #gr3+section>.content_wrapper {
        margin-right: auto;
        margin-left: 0;
    }

    #gr2+section>.content_wrapper {
        margin-left: auto;
        margin-right: 0;
    }
}

@media screen and (max-width: 650px) {
    a[id^="gr"]+section .wrapper_item {
        padding: 15px 10px 30px !important;
    }

    #gr+section::before {
        content: "IT BEGINS A NEW REVOLUTION";
        white-space: normal;
    }

    #gr2+section::before {
        content: "KANSAI LEADS THE WORLD";
        white-space: normal;
        top: 0;
    }

    #gr3+section::before {
        content: "STEP INTO THE UNKNOWN";
        white-space: normal;
        top: 0;
    }
}

/* 画像 */
#img+div .inner_item_txt {
    background: transparent;
}

#img+div .inner_item>a {
    pointer-events: none;
}

#img+div .inner_item {
    min-height: 350px;
}

@media screen and (max-width: 650px) {
    #img+div .inner_item {
        min-height: 200px;
    }
}

/* 私が求めているのは、以下のような人材です */
#per+section .heading.block_header_1 {
    background: url("/common/upload_data/recruit-spread-grpcojp/image/h_r.png") no-repeat center / 180px;
}

#per+section .heading.block_header_1 p::first-letter {
    color: var(--i_yellowgreen_color);
}

#per2+div .heading.block_header_3 {
    background: var(--i_yellowgreen_color);
    text-align: center;
}

#per2+div .heading.block_header_3 .h {
    color: var(--i_txt_color);
    font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
}

#per2+div .wrapper_item {
    gap: 30px 4%;
}

#per2+div .inner_item {
    margin: 0 !important;
    width: 48%;
    border: 3px solid var(--i_bg_color);
    padding: 10px 30px 20px;
    text-align: right;
}

#per2+div .heading.block_header_4 .h {
    font-size: clamp(1.8rem, 3vw, 4rem) !important;
}

#per3+div>.content_wrapper {
    background: var(--i_bg_color);
    padding: 65px 20px;
}

#per3+div>.content_wrapper::before {
    position: absolute;
    display: block;
    content: "";
    pointer-events: none;
    width: 20%;
    min-width: 200px;
    height: 90px;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--i_yellowgreen_color);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

#per3+div .heading.block_header_5 {
    margin-bottom: 40px;
}

#per3+div .heading.block_header_5 .h {
    font-size: clamp(3rem, 4vw, 3rem) !important;
    line-height: 1.3;
}

#per3+div .heading.block_header_4 .h {
    color: var(--i_sub_color);
    font-size: clamp(2rem, 3vw, 3rem) !important;
}

#per3+div .wrapper_item {
    justify-content: center;
    gap: 30px 5px;
}

#per3+div .inner_item {
    margin: 0 !important;
    width: 30%;
}

#per3+div .inner_item_img img {
    height: auto !important;
    max-width: 130px;
}

@media screen and (max-width: 650px) {
    #per2+div .inner_item {
        padding: 10px 15px 20px;
        text-align: left;
        line-height: 1.4;
    }
}

/*  未来への約束  */
#promise+section {
    overflow: visible;
}

#promise+section::before {
    position: absolute;
    display: block;
    pointer-events: none;
    writing-mode: vertical-rl;
    font-size: clamp(5rem, 8vw, 15rem);
    color: var(--i_sub_color);
    font-weight: 900;
    line-height: 1;
    content: "OUR PROMISE \A FOR TOMORROW";
    white-space: pre;
    top: 50px;
    right: 10px;
    background: linear-gradient(45deg, var(--i_main_color), var(--i_yellow_color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    opacity: 0;
}

#promise+section.anm2::before {
    animation: slideIntop2 0.8s ease-out forwards 0.3s;
}

#promise+section .inner_item_txt {
    padding-left: 5%;
}

#promise+section .heading.block_header_2 .h {
    font-size: clamp(2.5rem, 5vw, 5rem) !important;
}

#promise+section .inner_item_txt p {
    font-weight: bold;
}

#promise+section .inner_item_txt p strong {
    background: var(--i_yellowgreen_color);
    font-size: clamp(1.65rem, 2vw, 2rem);
    padding: 2px 15px 0;
    margin: 20px 0 10px;
    display: inline-block;
}

#promise+section .inner_item_img img {
    object-fit: cover;
}

@media screen and (min-width: 901px) {
    #promise+section .inner_item_img img {
        aspect-ratio: 1/1.1;
    }
}

@media screen and (max-width: 1300px) {
    #promise+section {
        padding-bottom: 200px;
    }

    #promise+section::before {
        writing-mode: inherit;
        top: auto;
        bottom: 50px;
        left: -5px;
        right: auto;
    }
}