@charset "UTF-8";

/* JS実行前の初期状態：ホームはヒーロー上なので白 */
.-home .header:not(.-invert-ready) {
    color: #ffffff;
}

.-home .header:not(.-invert-ready) .header_logo img {
    filter: brightness(0) invert(1);
}

.-home .header:not(.-invert-ready) .header_nav_list > li > a[target="_blank"] > span::after {
    filter: invert(1);
}

.-home .header:not(.-invert-ready) + .menu > span {
    background: #ffffff;
}

.main {
    padding-top: var(--sp96);
    padding-bottom: var(--sp32);
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero_slide {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1400 / 800;
}

.hero_slide_item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.hero_slide_item:last-child {
    opacity: 1;
}

.hero_slide_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero_slide_item.-active {
    opacity: 1;
    z-index: 1;
}

.hero_slide_item.-out {
    z-index: 2;
    animation: hero-fadeout var(--slide-fade) linear forwards;
}

.hero_slide_item.-active img,
.hero_slide_item.-out img {
    transform: scale(1.08);
    transition: transform calc(var(--slide-interval) + var(--slide-fade)) linear;
}

@keyframes hero-fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.hero_catch {
    display: flex;
    flex-direction: column;
    gap: 1em;
    position: absolute;
    z-index: 10;
    margin-top: var(--sp80);
    color: var(--color-white);
    font-size: var(--fz30);
    line-height: 1;
}

.hero_catch > span {
    opacity: 0;
    transform: translateY(calc(12 * var(--u)));
    transition:
        opacity 1.2s var(--ease-out),
        transform 1.2s var(--ease-out);
}

.-load .hero_catch > span:nth-child(1) {
    transition-delay: 0s;
}

.-load .hero_catch > span:nth-child(2) {
    transition-delay: 1s;
}

.-load .hero_catch > span:nth-child(3) {
    transition-delay: 2s;
}

.-load .hero_catch > span {
    opacity: 1;
    transform: translateY(0);
}

.hero_wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 20;
    width: 100%;
}

.hero_wave.-back {
    transform: translateX(10%) skewX(-5deg) scaleX(1.2);
    transition: transform 1.4s var(--ease-out) 0.2s;
}

.-load .hero_wave.-back {
    transform: translateX(0) skewX(0) scaleX(1);
}

.hero_wave.-front {
    transform: translateX(-10%) skewX(5deg) scaleX(1.4);
    transition: transform 1.4s var(--ease-out) 0.8s;
}

.-load .hero_wave.-front {
    transform: translateX(0) skewX(0) scaleX(1);
}

.heading {
    line-height: 1;
}

.heading_ttl {
}

.heading_en {
    margin-top: var(--sp12);
    font-weight: 400;
    font-size: calc(80 * var(--u));
    font-family: var(--ff-en);
}

.service {
}

.service_intro {
    position: relative;
    z-index: 10;
    padding-bottom: var(--sp96);
}

.service_intro_catch {
    opacity: 0;
    position: absolute;
    top: calc(40 * var(--u));
    right: 0;
    font-weight: 600;
    font-size: var(--fz32);
    line-height: 1.8;
    transform: translateY(calc(24 * var(--u)));
    transition:
        opacity 0.8s var(--ease-out),
        transform 0.8s var(--ease-out);
}

.service_intro.-view .service_intro_catch {
    opacity: 1;
    transform: translateY(0);
}

.service_intro_text {
    margin-top: var(--sp36);
}

.service_intro_fish {
    opacity: 0;
    position: absolute;
    right: calc(-100 * var(--u));
    bottom: calc(-20 * var(--u));
    transform: translateX(calc(-40 * var(--u)));
    transition:
        opacity 0.8s var(--ease-out) 0.4s,
        transform 0.8s var(--ease-out) 0.4s;
}

.service_intro.-view .service_intro_fish {
    opacity: 1;
    transform: translateX(0);
}

.service_img {
    margin-inline: var(--margin-offset);
    padding-inline: var(--sp16);
}

.service_img > img {
    border-radius: var(--radius);
}

.service_slide {
    position: relative;
    z-index: 1;
    margin-inline: var(--margin-offset);
    padding-inline: var(--sp16);
}

.service_menu {
    display: grid;
    gap: var(--sp96);
    margin-top: var(--sp112);
}

.service_menu_list {
    display: grid;
    line-height: 1.7;
}

.service_menu_list.-col2 {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp32);
}

.service_menu_list.-col3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp32);
}

.service_menu_card {
}

.service_menu_card_img {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
}

.service_menu_card_img > img {
    transition: transform 0.6s var(--ease-out);
}

.service_menu_card:hover .service_menu_card_img > img {
    transform: scale(1.05);
}

.service_menu_card_catch {
    position: absolute;
    top: 0;
    right: var(--sp24);
    height: calc(100% - (64 * var(--u)));
    padding-top: var(--sp48);
    padding-block: var(--sp8);
    border-bottom-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    background: var(--color-white);
    font-weight: 600;
    font-size: var(--fz18);
}

.service_menu_list.-col3 .service_menu_card_catch {
    padding-top: var(--sp36);
}

.service_menu_card_ttl {
    display: flex;
    align-items: center;
    gap: var(--sp16);
    margin-top: var(--sp12);
    font-weight: 600;
    font-size: var(--fz26);
}

.service_menu_card_ttl::after {
    content: "";
    display: inline-block;
    width: calc(100 * var(--u));
    height: 1px;
    background: var(--color-border);
    transform-origin: left;
    transition: transform var(--duration-base) var(--ease-out);
}

.service_menu_card:hover .service_menu_card_ttl::after {
    transform: scaleX(0);
    transform-origin: right;
}

.service_menu_card_ttl > span {
}

.news {
    display: flex;
    flex-direction: row-reverse;
    gap: var(--sp88);
    margin-top: calc(160 * var(--u));
    margin-left: var(--margin-offset);
    padding-left: var(--sp16);
}

.news_cnt {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-top: var(--sp16);
}

.news_list {
    margin-top: auto;
    line-height: 1.8;
}

.news_item {
}

.news_item_link {
    display: grid;
    gap: var(--sp4);
    padding-block: var(--sp24);
    border-bottom: 1px solid;
    transition: background var(--duration-base) var(--ease-rich);
}

.news_item_link:hover {
    background: var(--color-hover);
}

.news_item_date {
}

.news_item_ttl {
}

.news_link {
    margin-top: var(--sp16);
    line-height: 1;
    text-align: right;
}

.news_img {
    opacity: 0;
    transform: translateY(calc(24 * var(--u)));
    transition:
        opacity 0.8s var(--ease-out) 0.3s,
        transform 0.8s var(--ease-out) 0.3s;
}

.news.-view .news_img {
    opacity: 1;
    transform: translateY(0);
}

.company {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    align-items: flex-start;
    position: relative;
    margin-top: calc(170 * var(--u));
    padding-right: calc(160 * var(--u));
}

.company_cnt {
}

.company_catch {
    opacity: 0;
    position: absolute;
    top: var(--sp40);
    right: 0;
    font-weight: 600;
    font-size: var(--fz32);
    line-height: 1.8;
    transform: translateY(calc(24 * var(--u)));
    transition:
        opacity 0.8s var(--ease-out),
        transform 0.8s var(--ease-out);
}

.company.-view .company_catch {
    opacity: 1;
    transform: translateY(0);
}

.company_text {
    margin-top: calc(80 * var(--u));
}

.company_link {
    display: grid;
    gap: var(--sp16);
    margin-top: var(--sp72);
}

.company_link > li {
}

.company_link > li > a {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    height: calc(64 * var(--u));
    padding-right: var(--sp48);
    padding-left: var(--sp24);
    border: var(--border);
    border-radius: var(--sp32);
    transition: background var(--duration-base) var(--ease-out);
}

.company_link > li > a:hover {
    background: var(--color-hover);
}

.company_link > li > a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: var(--sp24);
    width: calc(6 * var(--u));
    border-radius: 50%;
    background: var(--color-dot);
    transform: translateY(-50%);
    aspect-ratio: 1;
}

.company_img {
    opacity: 0;
    position: relative;
    margin-top: calc(170 * var(--u));
    transform: translateY(calc(24 * var(--u)));
    transition:
        opacity 0.8s var(--ease-out) 0.3s,
        transform 0.8s var(--ease-out) 0.3s;
}

.company.-view .company_img {
    opacity: 1;
    transform: translateY(0);
}

.company_img_main {
}

.company_img_fish {
    opacity: 0;
    position: absolute;
    bottom: calc(30 * var(--u));
    left: calc(420 * var(--u));
    transform: translateX(calc(40 * var(--u)));
    transition:
        opacity 0.8s var(--ease-out),
        transform 0.8s var(--ease-out);
}

.company_img_fish.-view {
    opacity: 1;
    transform: translateX(0);
}

.looper {
    height: calc(433 * var(--u));
    margin-top: calc(260 * var(--u));
    background-image: url(/assets/img/home/looper@2x.jpg);
    background-size: calc(4892 * var(--u)) calc(433 * var(--u));
    background-repeat: repeat-x;
    animation: looper-scroll 60s linear infinite;
}

@keyframes looper-scroll {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: calc(-4892 * var(--u)) 0;
    }
}

@media screen and (max-width: 767.98px) {
    .main {
        padding-top: var(--sp64);
        padding-bottom: var(--sp16);
    }

    /* heading */
    .heading_en {
        font-size: var(--fz32);
    }

    /* hero */
    .hero_slide {
        aspect-ratio: 375 / 500;
    }

    .hero_slide img {
        object-fit: cover;
        aspect-ratio: 375 / 500;
    }

    .hero_catch {
        margin-top: var(--sp40);
        font-size: var(--fz24);
        pointer-events: none;
    }

    /* service_slide */
    .service_slide {
        margin-inline: calc(-24 * var(--u));
        padding-inline: 0;
    }

    .service_img {
        margin-inline: calc(-24 * var(--u));
        padding-inline: 0;
    }

    .service_img > img {
        border-radius: 0;
        object-fit: cover;
        aspect-ratio: 375 / 220;
    }

    /* service */
    .service_intro {
        padding-bottom: var(--sp112);
    }

    .service_intro_catch {
        position: static;
        margin-top: var(--sp40);
        font-size: var(--fz32);
        line-height: 1.5;
    }

    .service_intro_text {
        margin-top: var(--sp16);
    }

    .service_intro_fish {
        right: calc(0 * var(--u));
        bottom: calc(-30 * var(--u));
        width: calc(260 * var(--u));
    }

    .service_menu {
        gap: var(--sp40);
        margin-top: var(--sp64);
    }

    .service_menu_list.-col2,
    .service_menu_list.-col3 {
        grid-template-columns: 1fr;
        gap: var(--sp40);
    }

    .service_menu_card_catch {
        right: var(--sp16);
        height: calc(100% - (24 * var(--u)));
        padding-top: var(--sp24);
        font-size: var(--fz15);
    }

    .service_menu_list.-col3 .service_menu_card_catch {
        padding-top: var(--sp24);
    }

    .service_menu_card_img > img {
        width: 100%;
        object-fit: cover;
        aspect-ratio: 327 / 220;
    }

    .service_menu_card_ttl {
        font-size: var(--fz18);
    }

    .service_menu_card_ttl::after {
    }

    /* news */
    .news {
        flex-direction: column;
        gap: var(--sp64);
        margin-top: var(--sp80);
        margin-left: 0;
        padding-left: 0;
    }

    .news_cnt {
        gap: var(--sp16);
        padding-top: 0;
    }

    .news_img {
        margin-inline: var(--margin-offset);
    }

    .news_img > img {
        width: 100%;
        object-fit: cover;
        aspect-ratio: 375 / 200;
    }

    /* company */
    .company {
        display: grid;
        margin-top: var(--sp80);
        padding-right: 0;
    }

    .company_catch {
        position: static;
        margin-top: var(--sp40);
        font-size: var(--fz32);
        line-height: 1.5;
    }

    .company_text {
        margin-top: var(--sp16);
    }

    .company_link {
        margin-top: var(--sp40);
    }

    .company_img {
        margin-top: var(--sp48);
    }

    .company_img_fish {
        right: calc(-15 * var(--u));
        bottom: calc(-45 * var(--u));
        left: auto;
        width: calc(260 * var(--u));
    }

    /* looper */
    .looper {
        height: calc(200 * var(--u));
        margin-top: calc(96 * var(--u));
        background-size: calc(2260 * var(--u)) calc(200 * var(--u));
    }

    @keyframes looper-scroll {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: calc(-2260 * var(--u)) 0;
        }
    }
}