// スタイルシート common

@charset "utf-8";

@import "mixin";

body {
    @include root;
    position: relative;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

img,
video {
    max-width: 100%;
    height: auto;
}

:where(figure) { margin: 0; }

// ===

html { scroll-behavior: smooth; }

html,body {
    color: $themetextcolor;
    background-color: $themecolor4;
}

// === Commpn parts

:root {
    --header-height: 100px;
    @include maxwidth(768) {
        --header-height: 90px;
    }
}

// @mixin scrollEnter {
//     &[data-trigger] {
//     }
// }

@mixin scrollEnterSplitText {
    &[data-trigger] {
        .str {
            display: inline-block;
            overflow: hidden;
            &Inner {
                display: inline-block;
                transform: translateX(100%);
                transition: transform 1200ms ease-out;
            }
        }
        .vertical { // 縦書き
            .str {
                &Inner {
                    @media screen and (min-width: 1025px) {
                        transform: translateY(-100%);
                    }
                }
            }
        }
        &.inview {
            .str {
                &Inner {
                    transform: translate(0%, 0%);
                }
            }
        }
    }
}

.c-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: relative;
    &__top {
    }
    &__foot {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .en {
        color: $themecolor;
        @include ff_en;
        @include f_all(16);
        font-weight: 500;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        &::before, &::after {
            margin-bottom: 0.20em;
        }
        &::before { content: "["; }
        &::after { content: "]"; }
    }
    .ja {
        color: $themetextcolor;
        font-size: 48px;
        @include maxwidth(1200) { font-size: clamp(36px,(48 / 1200 * 100vw),48px); }
        @include maxwidth(360) { font-size: 30px; }
        font-weight: bold;
        line-height: 1.3;
        text-align: center;

        br.sp {
            @media screen and (min-width: 769px) {
                display: none;
            }
        }
    }
    .t {
        color: $themetextcolor;
        @include f_all(16);
        @include maxwidth(768) { @include f_all(15); font-weight: bold; }
        @include maxwidth(360) { @include f_all(14); }
        font-weight: 500;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.3em 10px;
        box-sizing: border-box;
        background-color: $themecolor;
        text-align: center;
    }

    @include scrollEnterSplitText;
}

.c-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.c-button {
    --o: 0;
    --x: 0px;
    --y: 0px;
    display: inline-block;
    height: auto;
    position: relative;
    @include maxwidth(768) {
        width: 100%;
    }
    &__link {
        color: $themetextcolor;
        @include f_all(14);
        font-weight: bold;
        line-height: 1.4;
        text-align: center;
        @include flex_centering;
        min-width: 220px;
        min-height: 45px;
        height: 100%;
        padding: 0 1em;
        box-sizing: border-box;
        z-index: 0;
        background-color: transparent;
        border: solid 1px rgba(#CDCDCD, .7);
        position: relative;

        @media (any-hover: hover) {
            &:hover {
            }
        }

        @include maxwidth(768) {
            @include f_all(14);
            min-width: initial;
        }
        
        
    }

    .mask-button {
        position: absolute;
        inset: 0px;
        pointer-events: none;
        user-select: none;
        opacity: var(--o, 0);
        mask: radial-gradient(
            20em 20em at
            var(--x) var(--y),
            $basetextcolor 1%, transparent 25%
        );
        transition: mask 300ms;
        will-change: mask;
        @include f_all(14);
        font-weight: bold;
        line-height: 1.4;
        text-align: center;
        @include flex_centering;
        box-sizing: border-box;
        border: solid 1px $themecolor;
    }
    @media (any-hover: hover) {
        &:hover {
            .mask-button {
                box-shadow: 0 0 0 1px inset $themecolor;
                background-color: rgba($themecolor, 0.25);
            }
        }
    }

}

@keyframes flick {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

#loadingScreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    @include flex_centering;
    background-color: $themecolor4;
    overflow: hidden;
    .container {
        position: relative;
        @include flex_centering;
        flex-direction: column;
        padding-bottom: 45px;
        box-sizing: border-box;
    }
    .loading-text-en {
        white-space: nowrap;
        color: $themecolor;
        @include ff_en;
        font-size: 100px;
        @include maxwidth(1440) {
            font-size: clamp(40px,(100 / 1440 * 100vw),100px);
        }
        font-weight: 500;
        line-height: 1;
        mix-blend-mode: color-dodge;
        leading-trim: both;
        text-edge: cap;
        position: relative;
        z-index: 10;
        @include maxwidth(768) {
            display: flex;
            gap: 0.5em;
            flex-direction: column;
            align-items: center;
            gap: 0.2em;
        }
        .strs {
            display: inline-block;
            overflow: hidden;
            &>span {
                display: inline-block;
            }

            &.__left {
                margin-right: 0.25em;
                @include maxwidth(768) { margin-right: 0; }
            }
            &.__left > span {
                transform: translateX(100%);
            }
            &.__right > span {
                transform: translateX(-100%);
            }
        }
        .b {
            display: inline-block;
            // width: 0.4em;
            // width: 0.10em;
            width: 1px;
            height: 1em;
            background-color: $themecolor;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            transition: transform .4s;
            animation: flick 0.7s infinite;
            &.hidden {
                animation: none;
                transform: translate(-50%,-50%) scaleX(0);
            }
            @include maxwidth(768) { display: none !important; }
        }
    }
    .loading-text {
        color: $themetextcolor;
        @include f_all(15);
        font-weight: bold;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 0 1px 15px;
        box-sizing: border-box;
        min-height: 27px;
        margin-top: 22px;
        position: relative;
        @include maxwidth(768) {
            @include f_all(14);
            min-height: 26px;
        }
        &::before{
            content: '';
            @include absolute_centering;
            background-color: $themecolor2;
            mix-blend-mode: color-dodge;
            z-index: 4;
        }
        &>span {
            position: relative;
            z-index: 10;
        }
        .strs {
            display: inline-block;
            overflow: hidden;
            &>span {
                display: inline-block;
            }

            &.__left > span {
                transform: translateX(100%);
            }
            &.__right > span {
                transform: translateX(-100%);
            }
        }
    }
    .loading-num {
        color: $themetextcolor;
        @include ff_en;
        @include f_all(18);
        @include maxwidth(768) { @include f_all(16); }
        font-weight: 500;
        margin-top: 30px;
        display: inline-flex;
        align-items: flex-end;
        position: absolute;
        z-index: 10;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        .p {
            font-size: 0.875em;
            margin-right: 4px;
            margin-bottom: 0.4em;
        }
        .num {
            min-width: 1em;
        }
        .v {
            font-size: 0.75em;
            margin-left: 2px;
        }
    }
    .loading-bg {
        background: transparent;
        &-wrap {
            --bg-opacity: 1;
            pointer-events: none;
            @include absolute_centering;
            overflow: hidden;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            &::after{
                content: '';
                @include absolute_centering;
                background: radial-gradient(
                    50% 50% at 50% 50%,
                    rgba(#000, 0.40) 0%,
                    rgba(#000, 0.80) 100%
                );
                // background: radial-gradient(
                //     50% 50% at 50% 50%,
                //     rgba(0, 0, 0, 0.80) 0%,
                //     #000 100%
                // );
                opacity: var(--bg-opacity, 1);
            }
        }
    }
    .image {
        display: none;
        @include absolute_centering;
        overflow: hidden;
        &::after{
            content: '';
            @include absolute_centering;
            background: radial-gradient(
                50% 50% at 50% 50%,
                rgba(0, 0, 0, 0.60) 0%,
                #000 100%
            );
        }
        &>img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .stkr {
        position: fixed;
        top: 0;
        left: 0;
        transform: translate(-50%,-50%);
        display: block;
        width: 400px;
        height: 400px;
        border-radius: 400px;
        background: radial-gradient(
            43.94% 43.94% at 50% 50%,
            rgba($themecolor, 0.30) 0%,
            transparent 100%
        );

        // ホバー使えないときは消す
        @media (any-hover: none) { display: none !important; }

    }
}

#header {
    color: $themetextcolor;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 30px 50px 30px 40px;
    box-sizing: border-box;
    z-index: 15;
    height: var(--header-height);
    @include maxwidth(768) {
        padding: 27px 90px 27px 20px;
        box-sizing: border-box;
    }
    .subpage & {
        color: $themecolor;
        background-color: $basecolor;
    }
    .container {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 2em;
        .sitename {
            h1 {
                a {
                    img {
                        width: 320px;
                        @include maxwidth(768) { width: 230px; }
                    }
                }
            }
        }
        .menu {
            @include maxwidth(1280) { display: none !important; }
            nav {
                ul {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 1em 30px;
                    li {
                        a {
                            @include f_all(11);
                            font-weight: bold;
                            line-height: 1.5;
                            display: inline-flex;
                            flex-direction: column;
                            align-items: center;
                            &::before{
                                content: attr(data-en);
                                @include ff_en;
                                @include f_all(18);
                                font-weight: 500;
                                text-transform: uppercase;
                                .subpage & { color: $themecolor2; }
                            }

                            &[data-en="contact"] {
                                &::before {
                                    padding-left: 22px;
                                    box-sizing: border-box;
                                    background: url(../images/icon-mail-white.svg) no-repeat left top 60% / 16px auto;

                                    .subpage & {
                                        background-image: url(../images/icon-mail-color2.svg);
                                    }
                                }
                            }

                            @media (any-hover: hover) {
                                transition: 
                                    filter 300ms
                                    , -webkit-filter 300ms;
                                &:hover {
                                    filter: brightness(75%);
                                    -webkit-filter: brightness(75%);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#gnavToggleWrap {
    @media screen and (min-width: 769px) {
        display: none;
    }

    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 90;
    .gnav-toggle {
        cursor: pointer;
        display: block;
        width: 50px;
        height: 50px;
        background-color: #000;
        position: relative;
        .menu_open & {
            background-color: $themecolor3;
        }
        &>span {
            display: inline-block;
            width: 24px;
            height: 2px;
            background-color: #fff;
            @include absolute_centering;
            @include flex_centering;
            &:nth-of-type(1) {
                transform: translateY(-8px);
                .menu_open & {
                    transform: translateY(0px) rotate(45deg);
                }
            }
            &:nth-of-type(2) {
                .menu_open & {
                    opacity: 0;
                }
            }
            &:nth-of-type(3) {
                transform: translateY(8px);
                .menu_open & {
                    transform: translateY(0px) rotate(-45deg);
                }
            }
        }
    }
}

#gnav {
    position: fixed;
    inset: 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background-color: $themecolor4;
    transition: 0.3s;

    .menu_open & {
        opacity: 1;
        visibility: visible;
    }

    &Inner {
        position: fixed;
        inset: 0;

        overflow-y: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        &::webkit-scrollbar { display: none; }

        padding: 8vh 0;
        @include maxwidth(768) { padding: 30px 0; }
        box-sizing: border-box;
    }

    .container {
        @include container(800, 20);

        .head {
            img {
                width: 320px;
                @include maxwidth(768) { width: 230px; }
            }
        }

        .body {
            margin-top: 40px;
            @include maxwidth(768) { margin-top: 20px; }
            &>*:not(:first-child) { margin-top: 2px; }
            .menu {
                ul {
                    display: flex;
                    flex-direction: column;
                    gap: 2px;
                    li {
                        a {
                            @include f_all(11);
                            font-weight: bold;
                            line-height: 1.5;
                            display: flex;
                            align-items: center;
                            gap: 1em;
                            background-color: #000;
                            padding: 10px 35px 10px 20px;
                            box-sizing: border-box;
                            min-height: 50px;
                            position: relative;
                            &::before{
                                color: $themecolor;
                                @include ff_en;
                                content: attr(data-en);
                                @include f_all(20);
                                font-weight: 500;
                                text-transform: uppercase;
                            }
                            &::after{
                                content: '';
                                display: block;
                                width: 11px;
                                height: 10px;
                                background: url(../images/arrow-double-color.svg) no-repeat center/contain;
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                right: 15px;
                                margin: auto;
                            }
                            &[data-en="contact"] {
                                &::before {
                                    padding-left: 22px;
                                    box-sizing: border-box;
                                    background: url(../images/icon-mail-color.svg) no-repeat left top 50% / 16px auto;
                                }
                            }
                        }
                    }
                }
            }
            .buttons {
                display: flex;
                flex-direction: column;
                gap: 2px;
                .button {
                    &__link {
                        color: $themetextcolor;
                        display: flex;
                        flex-direction: column;
                        background-color: #000;
                        padding: 18px 20px;
                        box-sizing: border-box;
                        position: relative;
                        &>*:not(:first-child) { margin-top: 8px; }
                        .title {
                            @include ff_en;
                            color: $themecolor;
                            @include f_all(20);
                            font-weight: 500;
                            line-height: 1.4;
                            text-transform: uppercase;
                            @include flex_centering;
                            @include maxwidth(768) {
                                justify-content: flex-start;
                            }
                            gap: 6px;
                            &::before{
                                flex-shrink: 0;
                                content: '';
                                display: inline-block;
                                width: 13px;
                                height: 16px;
                                background: url(../images/icon-pin-color.svg) no-repeat center/contain;
                            }
                        }
                        .address {
                            @include f_all(14);
                            font-weight: 500;
                            line-height: 1.4;
                            text-align: center;
                            @include maxwidth(768) {
                                @include f_all(13);
                                text-align: left;
                            }
                        }
                        .cta {
                            @include f_all(14);
                            font-weight: bold;
                            line-height: 1.4;
                            @include flex_centering;
                            @include maxwidth(768) {
                                @include f_all(13);
                                justify-content: flex-start;
                            }
                            gap: 5px;
                            &::after{
                                flex-shrink: 0;
                                content: '';
                                display: inline-block;
                                width: 11px;
                                height: 10px;
                                background: url(../images/arrow-double-color.svg) no-repeat center/contain;
                                margin-top: 0.2em;
                            }
                        }
                    }
                }
            }
        }
    }
}

#aside {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 100;
    // overflow: hidden;
    @include maxwidth(768) {
        transform: none;
        top: auto;
        bottom: 0;
        left: 10px;
        right: 10px;
        margin: auto;
        opacity: 0;
        transform: translateY(100%);
        transition:
            opacity .3s,
            transform .3s
        ;
        .header_scrollout &,
        .menu_open & {
            opacity: 1 !important;
            transform: translateY(0%) !important;
        }
    }
    ul {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
        @include maxwidth(768) {
            flex-direction: row-reverse;
        }
        li {
            transform: translateX(5px);
            @include maxwidth(768) {
                flex: 50%;
                transform: translateY(5px);
                &:has( > .gnav-toggle) { 
                    flex-shrink: 0;
                    flex-grow: 0;
                    flex-basis: 120px;
                    height: 55px;
                }
            }
            a {
                transition: all 0.3s;
                &.gnav-toggle {
                    cursor: pointer;
                    display: inline-block;
                    width: 60px;
                    height: 55px;
                    border-radius: 5px 0 0 5px;
                    background-color: #000;
                    position: relative;
                    @include maxwidth(768) {
                        width: 100%;
                        height: 100%;
                        border-radius: 5px 5px 0 0;
                    }
                    .menu_open & {
                        background-color: $themecolor3;
                    }
                    span.b {
                        display: contents;
                        @include maxwidth(768) { display: block; }
                        &>span {
                            display: inline-block;
                            width: 24px;
                            height: 1px;
                            border-radius: 0.5px;
                            background-color: $themetextcolor;
                            @include absolute_centering;
                            right: 5px;
                            @include maxwidth(768) {
                                left: auto;
                                right: 24px;
                                bottom: 5px;
                            }
                            @include flex_centering;
                            &:nth-of-type(1) {
                                transform: translateY(-8px);
                                .menu_open & {
                                    transform: translateY(0px) rotate(45deg);
                                }
                            }
                            &:nth-of-type(2) {
                                .menu_open & {
                                    opacity: 0;
                                }
                            }
                            &:nth-of-type(3) {
                                transform: translateY(8px);
                                .menu_open & {
                                    transform: translateY(0px) rotate(-45deg);
                                }
                            }
                        }
                    }
                    span.t {
                        @media screen and (min-width: 769px) {
                            display: none;
                        }
                        position: absolute;
                        top: 0;
                        bottom: 5px;
                        left: 25px;
                        margin: auto;
                        @include flex_centering;
                        &::before{
                            content: 'MENU';
                            @include ff_en;
                            @include f_all(17);
                            font-weight: 500;
                            line-height: 1;
                            .menu_open & {
                                content: 'CLOSE';
                            }
                        }
                    }
                }
                &:not(.gnav-toggle) {
                    @include ff_en;
                    color: $themetextcolor;
                    @include f_all(18);
                    font-weight: 500;
                    text-transform: uppercase;
                    @include flex_centering;
                    gap: 0.5em;
                    width: 60px;
                    min-height: 235px;
                    padding-top: 8px;
                    padding-left: 5px;
                    padding-right: 10px;
                    box-sizing: border-box;
                    background-color: $themecolor3;
                    border-radius: 5px 0 0 5px;
                    position: relative;
                    @media screen and (min-width: 769px) {
                        writing-mode: vertical-rl;
                    }
                    @include maxwidth(768) {
                        width: 100%;
                        min-height: initial;
                        height: 55px;
                        border-radius: 5px 5px 0 0;
                        padding-right: 5px;
                        padding-bottom: 13px;
                    }
                    .menu_open & {
                        @media screen and (min-width: 769px) { transform: translateX(100%); }
                        @include maxwidth(768) { transform: translateY(100%); }
                    }
                    &>span {
                        @media screen and (min-width: 769px) {
                            display: inline-block;
                            width: 1em;
                        }
                        &.text {
                            @include ff_ja;
                            @include f_all(15);
                            font-weight: bold;
                            @media screen and (min-width: 769px) {
                                letter-spacing: 0.2em;
                                padding-left: 3px;
                            }
                            @include maxwidth(768) {
                                padding-bottom: 2px;
                            }
                        }
                    }
                }

                @media (any-hover: hover) {
                    &:hover {
                        transform: translateX(-5px);
                    }
                }
                @media (any-hover: hover) and (max-width: 768px) {
                    &:hover {
                        transform: translateY(-5px);
                    }
                }
            }
        }
    }
}

@keyframes scrollDownArrowMove {
    0% {
        opacity: 0;
        transform: translateY(-0.5em);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0.5em);
    }
}

#mainVisual {
    background-color: $themecolor4;
    position: relative;
    .container {
        position: relative;
        #glSliderWrap {
            min-height: 550px;
            position: relative;
            &::before{
                content: '';
                @include absolute_centering;
                background: rgba(11, 60, 93, 0.40);
                mix-blend-mode: overlay;
            }
            &::after{
                content: '';
                @include absolute_centering;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.40) 100%);
            }
            #glSlider {
                width: 100%;
                height: 100vh;
                height: 100svh;
            }
            #glSliderItem { display: none; }
        }
        .overlay {
            white-space: nowrap;
            text-align: center;
            position: absolute;
            z-index: 5;
            left: 50%;
            bottom: 100px;
            transform: translateX(-50%);
            @include maxwidth(768) {
                display: none;
            }
            &-container {
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                gap: 22px;
            }
            .text-en {
                color: $themecolor;
                @include ff_en;
                font-size: 100px;
                @include maxwidth(1440) {
                    font-size: clamp(65px,(100 / 1440 * 100vw),100px);
                }
                font-weight: 500;
            }
            .text {
                color: $themetextcolor;
                @include f_all(15);
                @include maxwidth(768) { 
                    @include f_all(14);
                }
                font-weight: bold;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0.4em 0 0.4em 1em;
                box-sizing: border-box;
                min-height: 27px;
                background-color: #000;
            }

            &_sp {
                @media screen and (min-width: 769px) {
                    display: none;
                }
                @include absolute_centering;
                .item {
                    position: absolute;
                    display: flex;
                    align-items: center;
                    &:nth-of-type(1) {
                        top: 100px;
                        right: (20 / 375 * 100vw);
                        flex-direction: row-reverse;
                        .text {
                            margin-right: -4px;
                        }
                    }
                    &:nth-of-type(2) {
                        bottom: 23px;
                        left: (20 / 375 * 100vw);
                        .text {
                            margin-left: -8px;
                        }
                    }
                    .text-en {
                        white-space: nowrap;
                        color: $themecolor;
                        @include ff_en;
                        font-size: 100px;
                        @include maxwidth(1440) {
                            font-size: clamp(65px,(100 / 1440 * 100vw),100px);
                        }
                        font-weight: 500;
                        &>span {
                            display: inline-block;
                            width: 1em;
                            writing-mode: vertical-rl;
                        }
                    }
                    .text {
                        color: $themetextcolor;
                        @include f_all(15);
                        @include maxwidth(768) { 
                            @include f_all(14);
                        }
                        font-weight: bold;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        box-sizing: border-box;
                        background-color: $themecolor3;
                        padding: 1em 0;
                        width: 26px;
                        &>span {
                            letter-spacing: 0.5em;
                            display: inline-block;
                            width: 1em;
                            writing-mode: vertical-rl;
                        }
                    }
                }
            }
        }
        .scroll-down {
            white-space: nowrap;
            position: absolute;
            z-index: 4;
            left: 50%;
            bottom: 15px;
            @include maxwidth(768) { bottom: 20px; }
            transform: translateX(-50%);
            &__link {
                color: $themetextcolor;
                @include ff_en;
                @include f_all(16);
                @include maxwidth(768) {
                    @include f_all(14);
                }
                font-weight: 500;
                text-transform: uppercase;
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                gap: 0.8em;
                &::after{
                    content: '';
                    display: block;
                    width: 13px;
                    height: 8px;
                    background: url(../images/arrow-bottom.svg) no-repeat center/contain;
                    animation: scrollDownArrowMove 2s ease-out infinite;
                }
            }
        }
    }
}

#contentFooter {
    &Contact {
        padding: 80px 0 100px;
        box-sizing: border-box;
        background-color: $themecolor4;
        position: relative;
        @include maxwidth(768) { padding: 60px 0 80px; }
        .container {
            @include container(1270, 20);
            position: relative;
            z-index: 5;
            .head {
                .c-heading {
                }
            }
            .body {
                margin-top: 40px;
                @include maxwidth(768) {
                    margin-top: 20px;
                }
                .items {
                    @include f_all(14);
                    font-weight: 500;
                    line-height: 1.4;
                    display: flex;
                    flex-direction: column;
                    gap: 20px 80px;
                    &>* {
                        flex: none !important;
                        width: 100% !important;
                    }
                    @include maxwidth(1024) {
                        gap: 5px;
                    }
                    .item {
                        text-align: center;
                        flex-basis: (100% / 3);
                        height: auto;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        // padding: 50px 20px;
                        // padding: 50px 80px;
                        padding: 50px 100px 50px 70px;
                        box-sizing: border-box;
                        background-color: rgba(#000, .75);
                        position: relative;
                        @include maxwidth(1024) { padding: 30px 20px; }
                        &>*:first-child { margin-top: 0 !important; }
                        &>*:not(:first-child) {
                            margin-top: 13px;
                            @include maxwidth(768) { margin-top: 1rem; }
                        }
                        .cols {
                            display: flex;
                            justify-content: space-between;
                            gap: 3rem;
                            @include maxwidth(1024) {
                                justify-content: center;
                                flex-wrap: wrap;
                                gap: 2rem;
                                &>* { flex-basis: calc((100% - 2rem) / 2); }
                            }
                            @include maxwidth(768) {
                                &>* { flex-basis: 100% !important; }
                            }
                            .col {
                                .office-title {
                                    @include f_all(16);
                                    font-weight: bold;
                                    line-height: 1.3;
                                    padding-bottom: 12px;
                                    box-sizing: border-box;
                                    margin-bottom: 10px;
                                    position: relative;
                                    &::before {
                                        content: "";
                                        display: block;
                                        width: 5px;
                                        height: 5px;
                                        background-color: $accentcolor;
                                        border-radius: 1rem;
                                        position: absolute;
                                        bottom: 0;
                                        left: 0;
                                        right: 0;
                                        margin: auto;
                                    }
                                }
                                .address {
                                    @include f_all(14);
                                    font-weight: 500;
                                    line-height: 1.4;
                                    text-align: center;
                                }
                                .cta {
                                    margin-top: 10px;
                                    &__link {
                                        @include f_all(14);
                                        @include flex_centering;
                                        flex-direction: row;
                                        font-weight: bold;
                                        text-align: center;
                                        line-height: 1.4;
                                        &::after {
                                            content: "";
                                            flex-shrink: 0;
                                            display: block;
                                            width: 11px;
                                            height: 10px;
                                            background: url(../images/arrow-double-color.svg) center / contain no-repeat;
                                        }
                                    }
                                }
                                .tel {
                                    @include flex_centering;
                                    flex-direction: column;
                                    margin-top: 20px;
                                    &-num {
                                        @include ff_en;
                                        @include f_all(20);
                                        line-height: 1;
                                        font-weight: bold;
                                        display: inline-flex;
                                        align-items: center;
                                        gap: 10px;
                                        padding-left: 30px;
                                        box-sizing: border-box;
                                        background: url(../images/icon-tel-color.svg) left top 55% / 17px auto no-repeat;
                                        &::after {
                                            content: "";
                                            flex-shrink: 0;
                                            display: block;
                                            width: 11px;
                                            height: 10px;
                                            background: url(../images/arrow-double-color.svg) center / contain no-repeat;
                                        }

                                        // リンク無効かの時、アローを削除
                                        &[href="javascript:void(0)"] {
                                            &::after { background: none; }
                                        }
                                    }
                                    &-time {
                                        @include f_all(11);
                                        font-weight: bold;
                                        line-height: 1.4;
                                        text-align: center;
                                        margin-top: 8px;
                                    }
                                }
                                .faxs {
                                    margin-top: 15px;
                                    .fax {
                                        @include flex_centering;
                                        flex-direction: column;
                                        &:not(:first-child) {
                                            margin-top: 15px;
                                        }
                                        &-title {
                                            color: $themetextcolor;
                                            @include f_all(12);
                                            font-weight: 500;
                                            line-height: 1.1;
                                            display: inline-flex;
                                            align-items: center;
                                            justify-content: center;
                                            padding: 0 7px 2px;
                                            box-sizing: border-box;
                                            background-color: $accentcolor;
                                            min-height: 21px;
                                            position: relative;
                                        }
                                        &-num {
                                            @include ff_en;
                                            @include f_all(20);
                                            font-weight: bold;
                                            line-height: 1;
                                            padding-left: 30px;
                                            padding-right: 30px;
                                            box-sizing: border-box;
                                            margin-top: 8px;
                                            background: url(../images/icon-fax-color.svg) left top 55% / 18px auto no-repeat;
                                        }
                                    }
                                }
                            }
                        }
                        h3 {
                            &.mail-form {
                                color: $themecolor;
                                @include ff_en;
                                @include f_all(24);
                                line-height: 1;
                                font-weight: bold;
                                text-align: center;
                                text-transform: uppercase;
                                @include flex_centering;
                                gap: 5px;
                                margin-top: 20px !important;
                                &::before{  
                                    flex-shrink: 0;
                                    content: '';
                                    display: block;
                                    background: no-repeat center center/contain;
                                    margin-top: 0.1em;
                                }
                                &.access {
                                    &::before{
                                        width: 13px;
                                        height: 16px;
                                        background-image: url(../images/icon-pin-color.svg);
                                    }
                                }
                                &.tel {
                                    &::before {
                                        width: 15px;
                                        height: 15px;
                                        background-image: url(../images/icon-tel-color.svg);
                                    }
                                }
                                &.fax {
                                    &::before {
                                        width: 18px;
                                        height: 15px;
                                        background-image: url(../images/icon-fax-color.svg);
                                    }
                                }
                                &::before {
                                    width: 16px;
                                    height: 13px;
                                    background-image: url(../images/icon-mail-color.svg);
                                }
                            }
                        }
                        .text {
                            @include f_all(13);
                            @include maxwidth(768) {
                                @include f_all(14);
                            }
                            font-weight: 500;
                            min-height: 5em;
                            @include maxwidth(1024) { min-height: initial }
                            @include flex_centering;
                        }
                        .cta {
                            @include maxwidth(768) {
                                margin-top: 10px;
                            }
                            &__link {
                                @include f_all(14);
                                font-weight: bold;
                                display: inline-flex;
                                flex-direction: column;
                                align-items: center;
                                gap: 12px;
                                &::after{
                                    flex-shrink: 0;
                                    content: '';
                                    display: block;
                                    width: 24px;
                                    height: 24px;
                                    background: url(../images/arrow-double-white.svg) no-repeat center/11px auto $themecolor;
                                }
                            }
                        }
                        .stick {
                            display: block;
                            overflow: hidden;
                            @include absolute_centering;
                            text-indent: -9999px;
                        }
                        .buttons {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            gap: 5px
                        }
                        .button {
                            &__link {
                                @include flex_centering;
                                flex-direction: column;
                                gap: 6px;
                                .num {
                                    @include ff_en;
                                    @include f_all(32);
                                    @include maxwidth(768) { @include f_all(28); }
                                    font-weight: bold;
                                    line-height: 1;
                                }
                                .time {
                                    @include ff_en;
                                    @include f_all(13);
                                    font-weight: bold;
                                    line-height: 1.2;
                                    display: inline-flex;
                                    align-items: center;
                                    &>span {
                                        @include ff_ja;
                                        margin-left: 0.25em;
                                        margin-bottom: 0.1em;
                                        @media screen and (min-width: 769px) {
                                            @include f_all(12);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .bgimage {
            @include absolute_centering;
            &:after {
                content: "";
                @include absolute_centering;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 0%, rgba(26, 82, 173, 0.70) 100%);
                mix-blend-mode: multiply;
            }
            .img {
                display: block;
                height: 100%;
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
            }
        }
    }
}

#footer {
    color: $themetextcolor;
    background-color: $themecolor4;
    padding: 40px 0 10px;
    box-sizing: border-box;
    position: relative;
    @include maxwidth(768) {
        padding: 40px 0 70px;
    }
    .container {
        @include container(1270, 30);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        // @include maxwidth(1024) {
        @include maxwidth(1280) {
            display: block;
        }
        .description {
            flex-basis: calc(100% - 680px);
            @include maxwidth(1280) {
                flex-basis: 100%;
            }
            .sitename {
                a {
                }
                img {
                    width: 220px;
                }
            }
            .address {
                @include f_all(13);
                font-weight: 500;
                line-height: 1.3;
                margin-top: 1em;
                @include maxwidth(768) { margin-top: 8px; }
                &>*:not(:first-child) { margin-top: 1em; }
            }
            .mark{
                margin-top: 20px;
                ul{
                    display: flex;
                    flex-wrap: wrap;
                    gap: 5px;
                    li{
                        height: 120px;
                        background-color: #fff;
                        padding: 14px;
                        box-sizing: border-box;
                        @include maxwidth(768) {
                            height: 100px;
                        }
                        img{
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                            object-position: center;
                        }
                    }
                }
            }
        }
        .menu {
            flex-basis: 680px;
            // @include maxwidth(1024) {
            @include maxwidth(1280) {
                flex-basis: 100%;
                margin-top: 30px;
            }
            @include maxwidth(768) { 
                margin-top: 20px;
            }
            .global {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-end;
                box-sizing: border-box;
                // @include maxwidth(1024) {
                @include maxwidth(1280) {
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-start;
                    gap: 12px;
                }
                ul {
                    margin-left: 80px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    // @include maxwidth(1024) {
                    @include maxwidth(1280) {
                        margin-left: 0;
                        gap: 12px;
                    }
                    li {
                        a {
                            color: #CDCDCD;
                            @include f_all(11);
                            font-weight: bold;
                            line-height: 1.5;
                            display: inline-flex;
                            align-items: center;
                            gap: 1em;
                            &::before{
                                content: attr(data-en);
                                color: $themecolor;
                                @include ff_en;
                                @include f_all(18);
                                font-weight: 500;
                                text-transform: uppercase;
                                // margin-bottom: 0.1em;
                            }
                            &.form::before {
                                padding-left: 23px;
                                box-sizing: border-box;
                                background: url(../images/icon-mail-color.svg) no-repeat left center/16px auto;
                            }
                        }
                    }
                }
            }
            .aside {
                margin-top: 42px;
                // @include maxwidth(1024) {
                @include maxwidth(1280) {
                    margin-top: 30px;
                }
                ul {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    flex-wrap: wrap;
                    gap: 2em;
                    // @include maxwidth(1024) {
                    @include maxwidth(1280) {
                        justify-content: flex-start;
                    }
                    @include maxwidth(768) {
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 0.5em;
                    }
                    li {
                        a {
                            @include f_all(13);
                            font-weight: bold;
                            line-height: 1.2;
                        }
                    }
                }
            }
        }
        .foot {
            flex-basis: 100%;
            margin-top: 20px;
            text-align: right;
            padding: 20px 0;
            box-sizing: border-box;
            border-top: solid 1px #626262;
            // @include maxwidth(1024) {
            @include maxwidth(1280) {
                margin-top: 30px;
            }
            .copyright {
                small {
                    @include ff_en;
                    @include f_all(13);
                    font-weight: 500;
                    @include maxwidth(768) { font-weight: 400; }
                    line-height: 1.5;
                    text-transform: uppercase;
                }
            }
        }
    }
}

.term-list {
    position: relative;
    .toppage & { margin: 0; }
    ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        .toppage & {
            display: inline-flex;
            flex-wrap: nowrap;
            gap: 0px;
        }
        .subpage & {
            @include maxwidth(768) {
                gap: 5px;
            }
        }
        li {
            height: auto;

            .toppage & {
                flex-shrink: 0;
                width: auto;
            }
            .subpage & {
                @include maxwidth(768) {
                    flex-basis: calc((100% - 5px) / 2);
                }
            }
            a {
                @include f_all(13);
                font-weight: bold;
                text-transform: uppercase;
                @include flex_centering;
                min-width: 120px;
                min-height: 40px;
                height: 100%;
                background-color: transparent;
                border-bottom: solid 1px $themecolor2;
                box-sizing: border-box;
                position: relative;

                &.all {
                    @include ff_en;
                    @include f_all(14);
                }

                &.current {
                    color: $themetextcolor;
                    background-color: $themecolor2 !important;
                }

                &.en {
                    @include ff_en;
                    @include f_all(14);
                }

                .subpage & {
                    @include maxwidth(768) {
                        min-width: initial;
                    }
                }

                @media (any-hover) {
                    overflow: hidden;
                    z-index: 1;
                    filter: brightness(1);
                    -webkit-filter: brightness(1);
                    transition: filter .3s, -webkit-filter .3s;
                    &::after{
                        content: '';
                        @include absolute_centering;
                        z-index: -1;
                        background-color: $themecolor2;
                        transform: translateY(100%);
                        transition: transform .3s;
                    }
                    &:hover {
                        color: $themetextcolor;
                        filter: brightness(1.2);
                        -webkit-filter: brightness(1.2);
                        &::after {
                            transform: translateY(0px);
                        }
                    }
                }
            }
        }
    }
}

// 階層表示(アーカイブページで使用)
.works-terms {
    position: relative;
    &>*:not(:first-child) { margin-top: 20px; }
    .parents {
        ul {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 40px;
            @include maxwidth(768) {
                column-gap: 20px;
            }
            li {
                a {
                    font-size: clamp(36px, (48 / 1200 * 100vw),48px);
                    @include maxwidth(360) {
                        font-size: clamp(28px, (36 / 360 * 100vw), 36px);
                    }
                    font-weight: bold;
                    line-height: 1.2;
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                    filter: opacity(50%);

                    @include maxwidth(768) {
                        flex-direction: column-reverse;
                        align-items: flex-start;
                        gap: 1px;
                        svg.arrow {
                            transform: rotate(-90deg);
                            margin-left: 0.25em;
                        }
                    }

                    svg.arrow {
                        flex-shrink: 0;
                        margin-top: 0.2em;
                        path {
                            fill: $basetextcolor;
                        }
                    }
                    
                    &.current {
                        filter: opacity(100%);
                        svg.arrow path {
                            fill: $themecolor;
                        }
                    }

                    @media (any-hover: hover) {
                        &:not(.current):hover {
                            opacity: 0.8;
                        }
                    }
                }
            }
        }
    }
    .children {
        ul {
            li {
                a {
                }
            }
        }
    }
}

// === Frontpage

#toppageAboutus {
    background-color: $themecolor4;
    position: relative;
    .sticky-wrapper {
        .sticky-contents {
            position: sticky;
            top: 0;
            left: 0;
        }
        .spacer {
            height: 250vh;
            height: 250dvh;
        }
    }
    .container {
        min-height: 100vh;
        height: 100%;
        position: relative;
        z-index: 5;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 20px;
        padding: 20px 0;
        box-sizing: border-box;
        .hidden {
            
        }
        .head {
            position: relative;
            display: flex;
            flex-direction: column-reverse;
            gap: 1rem;
            .c-heading {
                &__top {
                }
                &__foot {
                    .ja {
                       padding-left: 0.55em;
                       @include maxwidth(768) {
                        padding-left: 0.7em;
                       }
                    }
                    .t {
                    }
                }
            }
            .logo {
                &>img { 
                    width: 250px;
                }
            }
        }
        .body {
            margin-top: 48px;
            @include maxwidth(768) {
                margin-top: 30px;
            }
            .text {
                @include f_all(15);
                font-weight: 500;
                line-height: 1.8;
                @include maxwidth(768) {
                    @include f_all(14);
                }

                br.sp {
                    @media screen and (min-width: 769px) {
                        display: none;
                    }
                }
            }
            .c-buttons {
                margin-top: 50px;
                @include maxwidth(768) {
                    margin-top: 30px;
                }
            }
        }
    }
    .movie {
        @include absolute_centering;
        &::before {
            content: '';
            @include absolute_centering;
            z-index: 1;
            background: rgba(0, 0, 0, 0.25);
        }   
        &::after{
            content: '';
            @include absolute_centering;
            background: rgba($themecolor4, .5);
            @include maxwidth(768) {
                background: rgba($themecolor4, .4);
            }
            mix-blend-mode: overlay;
            z-index: 2;
        }
        .poster {
            width: 100%;
            height: 100%;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .video {
            @include absolute_centering;
            &::after{
             content: '';
             @include absolute_centering;
                background-image: radial-gradient(rgba($themecolor4, .80) 30%, transparent 31%), radial-gradient(rgba($themecolor4, .80) 30%, transparent 31%);
                background-size: 4px 4px;
                background-position: 0 0, 2px 2px;
            }
            video {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}

#toppageBusiness {
    padding: 80px 0 140px;
    box-sizing: border-box;
    position: relative;
    background-color: $themecolor4;
    @include maxwidth(768) {
        padding-bottom: 90px;
    }
    .container {
        @include container(1140, 20);
        .head {
            .c-heading {  }
        }
        .body {
            margin-top: 14px;
            .leadtext {
                @include f_all(16);
                font-weight: bold;
                line-height: 1.4;
                text-align: center;
                .index {
                    display: inline-block;
                    @include ff_en;
                    color: $themecolor3;
                    font-size: 2em;
                    line-height: 1;
                    transform: translateY(0.1em);
                    margin-right: 0.1em;
                }
            }
            .buz-items {
                margin-top: 20px;
                display: flex;
                @include maxwidth(1024) {
                    flex-wrap: wrap;
                    max-width: 680px;
                    width: 100%;
                    margin-left: auto;
                    margin-right: auto;
                }
                .buz-item {
                    flex-basis: (100% / 4);
                    height: auto;
                    padding-right: 47px;
                    box-sizing: border-box;
                    position: relative;
                    @include maxwidth(1024) {
                        flex-basis: 100%;
                        padding-right: 0;
                        padding-bottom: 30px;
                        display: flex;
                        align-items: center;
                        gap: 25px;
                        margin-bottom: 12px;
                        &:last-of-type {
                            padding-bottom: 0;
                            margin-bottom: 0;
                        }
                    }
                    &::after{
                        content: '×';
                        display: block;
                        color: $themecolor;
                        @include f_all(16);
                        font-weight: 900;
                        position: absolute;
                        top: 65px;
                        right: 14px;
                        @include maxwidth(1024) {
                            top: auto;
                            right: auto;
                            bottom: 3px;
                            left: 67px;
                        }
                        @include maxwidth(768) {
                            left: 42px;
                        }
                    }
                    &:last-of-type::after { display: none; }
                    &[data-trigger] {
                        opacity: 0;
                        transform: translateY(30px);
                        @include maxwidth(1024) {
                            transform: translateX(-1rem);
                        }
                        transition: opacity 1000ms, transform 1000ms;
                        &::after {
                            opacity: 0;
                            transform: translateX(-1em) rotate(-360deg);
                            @include maxwidth(1024) {
                                transform: translateY(-1em) rotate(-360deg);
                            }
                            transition: opacity 1000ms, transform 1000ms;
                        }
                        @media screen and (min-width: 1025px) {
                            @for $i from 0 to 4 {
                                &:nth-of-type(#{$i + 1}) {
                                    transition-delay: calc(#{$i} * 0.2s);
                                    &::after {
                                        transition-delay: calc((#{$i} * 0.2s) + 0.5s);
                                    }
                                }
                            }
                        }
                        &.inview {
                            opacity: 1 !important;
                            transform: translate(0px, 0px) !important;
                            &::after {
                                opacity: 1 !important;
                                transform: translate(0, 0) rotate(0) !important;
                            }
                        }
                    }
                    .icon { 
                        @include flex_centering;
                        @include maxwidth(1024) {
                            flex-shrink: 0;
                        }
                        &>img {
                            width: 150px;
                            @include maxwidth(768) {
                                width: 100px;
                            }
                        }
                    }
                    .docs {
                        margin-top: 20px;
                        @include maxwidth(1024) { margin-top: 0; }
                        .title {
                            color: $themecolor;
                            @include f_all(16);
                            font-weight: bold;
                            line-height: 1;
                            text-align: center;
                            @include maxwidth(1024) { text-align: left; }
                        }
                        .text {
                            @include f_all(14);
                            font-weight: 500;
                            line-height: 1.4;
                            text-align: center;
                            margin-top: 14px;
                            @include maxwidth(1024) { text-align: left; }
                            @include maxwidth(768) { margin-top: 12px; }
                        }
                    }
                }
            }
            .c-buttons {
                margin-top: 30px;
                @include maxwidth(768) { margin-top: 50px; }
            }
        }
    }
}

#toppageWorks {
    padding: 120px 0;
    @include maxwidth(768) { 
        padding: 85px 0 90px;
    }
    box-sizing: border-box;
    background-color: #000;
    position: relative;
    z-index: 6;
    @mixin works_container() {
        max-width: 1200px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0 30px;
        box-sizing: border-box;
        position: relative;
        @include maxwidth(768) {
            padding: 0 20px;
        }
    }
    .container {
        .head {
            @include works_container();
            .c-heading {
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-end;
                gap: 30px;
                @include maxwidth(768) {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 16px;
                }
            }
        }
        .body {
            margin-top: 24px;
            @include maxwidth(768) { margin-top: 20px; }
            .tab {
                &-trigger {
                    @include works_container();
                    ul {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 10px 60px;
                        @include maxwidth(1440) {
                            gap: 10px (60 / 1440 * 100vw);
                        }
                        @include maxwidth(768) {
                            gap: 10px 30px;
                        }
                        @include maxwidth(360) {
                            gap: 10px 15px;
                        }
                        li {
                            @include maxwidth(360) { flex-basis: calc((100% - 15px) / 2); }
                            a {
                                color: #626262;
                                font-size: 48px;
                                font-weight: bold;
                                line-height: 1.2;
                                display: inline-flex;
                                align-items: center;
                                transition: .3s;
                                @include maxwidth(1200) {
                                    font-size: clamp(36px, (48 / 1200 * 100vw), 48px);
                                }
                                @include maxwidth(360) {
                                    font-size: clamp(24px,(36 / 360 * 100vw),36px);
                                }
                                // gap: 5px;
                                @include maxwidth(768) {
                                    display: flex;
                                    flex-direction: column-reverse;
                                    align-items: flex-start;
                                    // gap: 4px;
                                }
                                &::before{
                                    flex-shrink: 0;
                                    content: '';
                                    display: block;
                                    width: 14px;
                                    height: 13px;
                                    background: url(../images/arrow-double.svg) no-repeat center/contain;
                                    margin-top: 0.2em;
                                    margin-right: 5px;
                                    @include maxwidth(768) {
                                        transform: rotate(90deg);
                                        margin-top: 0;
                                        margin-left: 0.25em;
                                        margin-right: 0;
                                        margin-top: 4px;
                                    }
                                }
                                &.current {
                                    color: $themetextcolor;
                                    &::before {
                                        background-image: url(../images/arrow-double-color.svg);
                                    }
                                }

                                .strWrap {
                                    @include scrollEnterSplitText;
                                }
                            }
                        }
                    }
                }
                &-container {
                    margin-top: 20px;
                }
                &-item {
                    position: absolute;
                    top: 0;
                    left: 0;
                    transform: scale(0);
                    &.active { 
                        position: static;
                        transform: scale(1);
                        .term-list ul {
                            li {
                                opacity: 1;
                                transform: translateY(0px);
                                @for $i from 0 to 20 {
                                    &:nth-of-type(#{$i + 1}) {
                                        transition-delay: $i * 0.10s;
                                    }
                                }
                            }
                        }
                        .works-headline {
                            .headline-item {
                                opacity: 1;
                                transform: translateY(0px);
                                @for $i from 0 to 12 {
                                    &:nth-of-type(#{$i + 1}) {
                                        transition-delay: $i * 0.10s;
                                    }
                                }
                            }
                        }
                        .c-buttons {
                            opacity: 1;
                            transform: translateY(0px);
                        }
                    }
                    &__head {
                        @include works_container();
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 2em;
                        @include maxwidth(1024) { padding: 0 !important; }
                        .term-list {
                            padding-bottom: 2px;
                            @include maxwidth(1024) { padding: 0 30px 2px; }
                            @include maxwidth(768) { padding: 0 20px 2px; }
                            ul {
                                li {
                                    opacity: 0;
                                    transform: translateY(10px);
                                    transition: .3s;
                                    a {
                                        &.all {
                                            @include ff_en;
                                        }
                                    }
                                }
                            }
                        }
                        .slider-controls {
                            display: flex;
                            align-items: center;
                            gap: 15px;
                            @include maxwidth(1024) { display: none; }
                            .slider-button {
                                &-prev, &-next {
                                    flex-shrink: 0;
                                    cursor: pointer;
                                    width: 55px;
                                    height: 55px;
                                    border-radius: 9999px;
                                    border: solid 1px #CDCDCD;
                                    background: url(../images/arrow-right.svg) no-repeat center/8px auto;
                                    transition: 
                                        filter .3s,
                                        -webkit-filter .3s
                                    ;
                                    &.swiper-button-disabled {
                                        cursor: none;
                                        filter: opacity(50%);
                                        -webkit-filter: opacity(50%);
                                    }
                                }
                                &-prev {
                                    transform: scale(-1, 1);
                                }
                                &-next {
                                }
                            }
                        }
                    }
                    &__body {
                        margin-top: 40px;
                        @include maxwidth(768) { margin-top: 30px; }
                        .works-headline {
                            padding: 0 (80 / 1440 * 100vw);
                            @include maxwidth(1200) {
                                padding: 0 30px;
                            }
                            @include maxwidth(768) {
                                padding: 0 20px;
                            }
                            box-sizing: border-box;
                            .headline {
                                &-items {
                                    &[data-trigger] {
                                        .headline-item {
                                            .image {
                                                clip-path: circle(20% at 50% 50%);
                                                transition: clip-path 1000ms 200ms;
                                            }
                                        }
                                        &.inview {
                                            .headline-item {
                                                .image {
                                                    clip-path: circle(100% at 50% 50%) !important;
                                                }
                                            }
                                        }
                                    }
                                }
                                &-item {
                                    width: (100% / 3.35);
                                    @include maxwidth(1200) { width: (100% / 3.15); }
                                    @include maxwidth(1024) { width: (100% / 2.15); }
                                    @include maxwidth(600) { width: (100% / 1.15); }
                                    opacity: 0;
                                    transform: translateY(10px);
                                    transition: .3s;
                                }
                            }
                        }
                        .c-buttons {
                            margin: 40px 20px 0;
                            opacity: 0;
                            transform: translateY(10px);
                            transition: .3s;
                        }
                    }
                }
            }
        }
    }

    .looptext {
        &-wrapper {
            font-size: (100 / 1440 * 100vw);
            @include maxwidth(1440) {
                font-size: clamp(60px,(100 / 1440 * 100vw),100px);
            }
            overflow: hidden;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            &.__top {
                top: -0.7em;
            }
            &.__foot {
                bottom: -0.5em;
            }
        }
        white-space: nowrap;
        color: $themecolor;
        @include ff_en;
        line-height: 1;
        display: inline-flex;
        align-items: flex-end;
        &-item {
            padding-bottom: 0.20em;
            padding-left: 0.5em;
        }
    }
}

@keyframes flash {
    0% { filter: brightness(1); -webkit-filter: brightness(1); }
    50% { filter: brightness(1.4); -webkit-filter: brightness(1.4); }
    100% { filter: brightness(1); -webkit-filter: brightness(1); }
}

.works-headline {
    position: relative;
    .subpage & {
        margin-top: 50px;
    }
    .headline-items {
        .subpage & {
            display: flex;
            flex-wrap: wrap;
            gap: 30px 10px;
        }
        .headline-item {
            height: auto;
            .subpage & {
                flex-basis: calc((100% - (10px * 2)) / 3);
                @include maxwidth(768) {
                    flex-basis: calc((100% - (10px * 1)) / 2);
                }
                @include maxwidth(360) { flex-basis: 100%; }
            }
            .headline-item__link {
                display: block;
                height: 100%;
                padding-left: 20px;
                box-sizing: border-box;
                position: relative;
                &::before{
                    content: 'CASE';
                    color: $themecolor;
                    @include ff_en;
                    @include f_all(16);
                    font-weight: bold;
                    position: absolute;
                    top: 0;
                    left: 0;
                    writing-mode: vertical-rl;
                    display: block;
                    width: 1em;
                }
                &>* {
                    display: block;
                }
                @media (any-hover: hover) {
                    &:hover {
                        .image::after {
                            opacity: 1;
                        }
                        .image {
                            animation:flash 0.8s forwards;
                        }
                    }
                }
                .image {
                    padding-top: 100%;
                    box-sizing: border-box;
                    position: relative;
                    @media (any-hover) {
                        filter: brightness(1);
                        -webkit-filter: brightness(1);
                    }
                    &::after{
                        content: '';
                        @include absolute_centering;
                        background: linear-gradient(180deg, rgba(86, 191, 237, 0.70) 0%, rgba(26, 82, 173, 0.70) 100%);
                        opacity: 0;
                        transition: opacity .3s;
                    }
                    &>img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .title {
                    @include f_all(16);
                    font-weight: bold;
                    line-height: 1.4;
                    margin-top: 12px;
                }
                .terms {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 1em;
                    margin-top: 8px;
                    .term {
                        @include f_all(13);
                        font-weight: bold;
                        display: inline-flex;
                        align-items: center;
                        gap: 0.5em;
                        &::before{
                            flex-shrink: 0;
                            content: '';
                            width: 7px;
                            height: 7px;
                            background-color: $themecolor2;
                        }
                    }
                }
            }
        }
    }
}

#contentsBgimg {
    position: fixed;
    inset: 0;
    .image {
        @include absolute_centering;
        &::after{
            content: '';
            @include absolute_centering;
            background: rgba(0, 0, 0, 0.60);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        .img {
            display: block;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
    }
}

@keyframes wave {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#toppageContents {
    position: relative;
    overflow: hidden;
    z-index: 1;
    .container {
        position: relative;
        .items {
            .item {
                overflow: hidden;
                position: relative;
                &:not(:first-of-type) { 
                    margin-top: 20px;
                    @include maxwidth(768) { margin-top: 40px; }
                }
                &:nth-of-type(odd) {
                    padding-top: 150px;
                    @include maxwidth(768) {
                        padding-top: 120px;
                    }
                    .item-container {
                        .image {
                            left: 65px;
                            margin-right: calc(50% - 50vw);
                            @include maxwidth(768) {
                                left: 55px;
                            }
                        }
                        &[data-trigger] {
                            .image {
                                clip-path: inset(0% 0% 0% 100%);
                            }
                        }
                    }
                }
                &:nth-of-type(even) {
                    padding-bottom: 150px;
                    box-sizing: border-box;
                    @include maxwidth(768) {
                        padding-bottom: 120px;
                    }
                    .item-container {
                        .image {
                            right: 65px;
                            margin-left: calc(50% - 50vw);
                            @include maxwidth(768) {
                                right: 55px;
                            }
                            .en { }

                        }
                        &[data-trigger] {
                            .image {
                                clip-path: inset(0% 100% 0% 0%);
                            }
                        }
                        .c-heading {
                            &__top {
                                @include maxwidth(768) {
                                    left: auto !important;
                                    right: 0 !important;
                                }
                            }
                        }
                    }
                    .item-bgimage {
                    }
                }
                &-container {
                    @include container(1270, 30);
                    position: relative;
                    z-index: 5;
                    padding-top: 180px;
                    box-sizing: border-box;
                    @include maxwidth(768) {
                        max-width: 100%;
                        width: auto;
                        margin: 0;
                        padding-top: 80px;
                    }
                    &[data-trigger] {
                        .image {
                            transition: clip-path 1000ms;
                            overflow: hidden;
                            &>img {
                                transform: scale(1.4);
                                transition: transform 1000ms;
                            }
                        }
                        &.inview {
                            .image {
                                clip-path: inset(0% 0% 0% 0%) !important;
                                &>img { transform: scale(1) !important; }
                            }
                        }
                    }
                    .image {
                        height: 350px;
                        @include maxwidth(768) {
                            height: 240px;
                        }
                        position: absolute;
                        z-index: 1;
                        top: 0;
                        right: 0;
                        left: 0;
                        box-sizing: border-box;
                        overflow: hidden;
                        &>img {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                        &[data-trigger] {
                            transition: clip-path 1000ms;
                            overflow: hidden;
                            &>img {
                                transform: scale(1.4);
                                transition: transform 1000ms;
                            }
                            &.inview {
                                clip-path: inset(0% 0% 0% 0%) !important;
                                &>img { transform: scale(1) !important; }
                            }
                        }
                    }
                    .docs {
                        padding: 210px 65px 60px;
                        box-sizing: border-box;
                        background-color: #000;
                        position: relative;
                        @include maxwidth(768) {
                            padding: 180px 20px 60px;
                        }
                        .cols {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            gap: 1em;
                            @include maxwidth(1200) {
                                flex-direction: column;
                                align-items: flex-start;
                                justify-content: flex-start;
                                flex-wrap: wrap;
                                gap: 20px;
                                &>* {
                                    flex: none !important;
                                    width: 100%;
                                }
                            }
                            .col {
                                &:nth-of-type(1) {
                                }
                                &:nth-of-type(2) {
                                    flex-basis: 480px;
                                }
                                .c-heading {
                                    display: flex;
                                    align-items: flex-start;
                                    justify-content: flex-start;
                                    flex-direction: row;
                                    gap: 20px;
                                    @include maxwidth(768) {
                                        gap: 10px;
                                    }
                                    &__top {
                                        @include maxwidth(768) {
                                            position: absolute;
                                            bottom: calc(100% + 20px);
                                            left: 0;
                                        }
                                        .en {
                                            writing-mode: vertical-rl;
                                            width: 1em;
                                            &::before, &::after {
                                                margin-left: 0.25em;
                                                margin-bottom: 0;
                                            }
                                            &::after {
                                                margin-top: 0.10em;
                                            }
                                        }
                                    }
                                    &__foot {
                                        align-items: flex-start;
                                        .ja {
                                            margin-top: -0.3em;
                                            text-align: left;
                                            @include maxwidth(768) { margin-top: 0; }
                                        }
                                        .t {
                                        }
                                    }
                                }
                                .text {
                                    @include f_all(15);
                                    font-weight: 500;
                                    line-height: 1.8;
                                    @include maxwidth(768) {
                                        @include f_all(14);
                                    }
                                }
                                .c-buttons {
                                    align-items: flex-start;
                                    margin-top: 23px;
                                    @include maxwidth(1200) {
                                        align-items: center;
                                    }
                                    @include maxwidth(768) {
                                        margin-top: 20px;
                                    }
                                }
                            }
                        }
                    }
                }
                &-bgimage {
                    @include absolute_centering;
                    &::after{
                        content: '';
                        @include absolute_centering;
                        background: rgba(0, 0, 0, 0.60);
                        backdrop-filter: blur(5px);
                        -webkit-backdrop-filter: blur(5px);
                    }
                    .img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        background-size: cover;
                        background-position: center center;
                        background-repeat: no-repeat;
                    }
                }
            }
        }
    }
    .object {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 2;
        @include flex_centering;
        &:has(> img) { overflow: hidden; }
        &>img {
            width: 2327px;
            max-width: initial;
        }
        &.__top {
            // bottom: calc(100% - 254px);
            top: 0;
        }
        &.__foot {
            bottom: 0;
            .object-item {
                display: flex;
                align-items: flex-end;
            }
        }

        &-item {
            width: 100%;
            height: 254px;
            svg {
                path {
                    fill: rgba($themecolor, 0.40);
                }
            }
        }
    }
}

#toppageRecruit {
    background-color: $themecolor4;
    position: relative;
    z-index: 1;
    .sticky-wrapper {
        @include maxwidth(1024) {
            display: contents;
        }
        .sticky-contents {
            position: sticky;
            top: 0;
            left: 0;
            overflow: hidden;
            @include maxwidth(1024) {
                display: contents;
            }
            .container {
                color: $themetextcolor;
                background-color: $themecolor3;
                position: relative;
                z-index: 2;
                @media screen and (min-width: 1025px) {
                    @include flex_centering;
                    height: 100vh;
                    height: 100dvh;
                }
                @include maxwidth(1024) {
                    padding: 100px 0 23px;
                }
                .docs {
                    max-width: 480px;
                    width: 100%;
                    margin-left: auto;
                    margin-right: auto;
                    @include maxwidth(1024) {
                        margin-top: 50px;
                        margin-bottom: 50px;
                    }
                    @include maxwidth(768) {
                        max-width: 100%;
                        width: auto;
                    }
                    .head {
                        .c-heading {
                            &__top {
                                .en {
                                    color: $themetextcolor;
                                }
                            }
                            &__foot {
                                @include maxwidth(768) {
                                    width: 100%;
                                }
                                .ja {
                                }
                                .t {
                                    color: $themecolor3;
                                    background-color: $themetextcolor;
                                    @include maxwidth(768) {
                                        letter-spacing: -0.05em;
                                        width: 100%;
                                    }
                                }
                            }
                        }
                    }
                    .body {
                        margin-top: 50px;
                        @include maxwidth(768) {
                            margin: 20px 1rem 0;
                        }
                        .text {
                            @include f_all(15);
                            @include maxwidth(768) { @include f_all(14); }
                            font-weight: 500;
                            line-height: 1.8;
                            text-align: center;
                            
                            br.sp {
                                @media screen and (min-width: 769px) {
                                    display: none;
                                }
                            }
                        }
                    }
                }
                .sp-images {
                    position: relative;
                    @media screen and (min-width: 1025px) {
                        display: none;
                    }
                    .sp-image {
                        overflow: hidden;
                        position: relative;
                        &__inner {
                            display: block;
                            box-sizing: border-box;
                            position: relative;
                            &>img {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                    }

                    &.__top {
                        .sp-image {
                            &:nth-of-type(1) {
                                // max-width: 200px;
                                width: 53%;
                                position: absolute;
                                top: -130px;
                                left: 0;
                                .sp-image__inner {
                                    padding-top: (240 / 200 * 100%);
                                }
                            }
                            &:nth-of-type(2) {
                                // max-width: 257px;
                                width: 69%;
                                margin-left: auto;
                                margin-right: 0;
                                z-index: 2;
                                .sp-image__inner {
                                    padding-top: (200 / 257 * 100%);
                                }
                            }
                        }
                    }
                    &.__foot {
                        .sp-image {
                            &:nth-of-type(1) {
                                width: 69%;
                                margin-left: 0;
                                margin-right: auto;
                                .sp-image__inner {
                                    padding-top: (200 / 257 * 100%);
                                }
                            }
                            &:nth-of-type(2) {
                                width: 53%;
                                position: absolute;
                                top: 20%;
                                right: 0;
                                .sp-image__inner {
                                    padding-top: (240 / 200 * 100%);
                                }
                            }
                        }
                    }

                }
            }
        }
        .images {
            pointer-events: none;
            height: 1050px;
            position: relative;
            z-index: 1;
            @include maxwidth(1024) { display: none !important; }
            .image {
                position: absolute;
                overflow: hidden;
                &>img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    // height: 100%;
                    object-fit: cover;
                    height: 140%;
                    object-position: center bottom;
                }
                &:nth-of-type(1) {
                    width: (325 / 1440 * 100vw);
                    height: 420px;
                    top: 0;
                    left: (85 / 1440 * 100vw);
                }
                &:nth-of-type(2) {
                    width: (410 / 1440 * 100vw);
                    height: 420px;
                    // top: 150px;
                    right: 0;
                    &>img {
                        width: (325 / 1440 * 100vw);
                    }
                }
                &:nth-of-type(3) {
                    width: (410 / 1440 * 100vw);
                    height: 420px;
                    // bottom: 170px;
                    bottom: 0;
                    left: 0;
                    &>img {
                        width: (325 / 1440 * 100vw);
                        left: auto;
                        right: 0;
                    }
                }
                &:nth-of-type(4) {
                    width: (325 / 1440 * 100vw);
                    height: 420px;
                    bottom: 0;
                    right: (85 / 1440 * 100vw);
                }
            }
        }
    }
    .foot {
        color: $themetextcolor;
        background-color: $themecolor3;
        position: relative;
        padding-top: 215px;
        padding-bottom: 80px;
        box-sizing: border-box;
        @include maxwidth(1024) { padding: 23px 0; }
        overflow: hidden;
        &-container {
            @include container(1270, 20);
            z-index: 10;
            @include maxwidth(1024) { margin: 0; }
        }
        .link-group {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            @include maxwidth(1024) {
                display: block;
                height: 100vh;
                min-height: 500px;
                position: relative;
            }
            &[data-trigger] {
                .link-group-item {
                    clip-path: circle(20% at 50% 50%);
                    transition: clip-path 1000ms 200ms;
                    @media screen and (min-width: 1025px) {
                        &:nth-of-type(4),
                        &:nth-of-type(5),
                        &:nth-of-type(6) {
                            transition-delay: 500ms;
                        }
                    }
                }
                &.inview {
                    .link-group-item {
                        clip-path: circle(100% at 50% 50%) !important;
                    }
                }
            }
            &-item {
                @media screen and (min-width: 1025px) {
                    flex-basis: calc((90% - (14px * 2)) / 3);
                    height: auto;
                    &:nth-of-type(3) { margin-right: 10%; }
                    &:nth-of-type(4) { margin-left: 10%; }
                }

                @include maxwidth(1024) {
                    --w: 300px;
                    --h: 420px;
                    --x: calc(var(--active) * 800%);
                    --y: calc(var(--active) * 200%);
                    --rotate: calc(var(--active) * 120deg);
                    --opacity: calc(var(--z) / var(--items) * 1);
                    z-index: var(--z);
                    transform: 
                        translate(var(--x), var(--y))
                        rotate(var(--rotate))
                    ;
                    margin: calc(var(--h) * -0.5) 0 0 calc(var(--w) * -0.5);
                    width: var(--w);
                    height: var(--h);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform-origin: 0% 100%;
                }
                @media screen and (max-width: 1024px) and (max-height: 500px) {
                    --h: 80vh;
                    margin: calc(var(--h) * -0.20) 0 0 calc(var(--w) * -0.5);
                }

                &__link {
                    @include flex_centering;
                    min-height: 280px;
                    height: 100%;
                    background-color: $themecolor4;
                    position: relative; 
                    @include maxwidth(1024) {
                        min-height: initial;
                        transition: opacity .5s;
                        opacity: var(--opacity, 1);
                    }
                    @media (any-hover: hover) {
                        &:hover {
                            .bgimg::after {
                                background-color: rgba(#000, .70);
                                backdrop-filter: blur(4px);
                                -webkit-backdrop-filter: blur(4px);
                            }
                        }
                    }
                    &>* { display: block; }
                    .title {
                        @include f_all(20);
                        @include maxwidth(768) { @include f_all(18); }
                        font-weight: bold;
                        line-height: 1.5;
                        text-align: center;
                        padding-bottom: 16px;
                        box-sizing: border-box;
                        position: relative;
                        z-index: 5;
                        &::after{
                            content: '';
                            display: block;
                            width: 30px;
                            height: 2px;
                            background-color: $themecolor;
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            transform: translateX(-50%);
                        }
                    }
                    .title-en {
                        color: $themecolor;
                        @include ff_en;
                        @include f_all(16);
                        font-weight: bold;
                        text-transform: uppercase;
                        writing-mode: vertical-rl;
                        width: 1em;
                        position: absolute;
                        top: 10px;
                        left: 8px;
                        z-index: 5;
                    }
                    .bgimg {
                        @include absolute_centering;
                        background-size: cover;
                        background-position: center center;
                        background-repeat: no-repeat;
                        clip-path: polygon(0 45px, 100% 5%, 100% calc(100% - 45px), 0 95%);
                        &::after{
                            content: '';
                            @include absolute_centering;
                            background-color: rgba(#000, .40);
                            transition: 300ms;
                            clip-path: polygon(0 45px, 100% 5%, 100% calc(100% - 45px), 0 95%);
                        }
                    }
                    &::after{
                        content: '';
                        display: block;
                        width: 14px;
                        height: 13px;
                        background: url(../images/arrow-double-color.svg) no-repeat center/contain;
                        position: absolute;
                        right: 15px;
                        bottom: 15px;
                        z-index: 5;
                    }
                }
            }
        }
        .bgimage {
            @include absolute_centering;
            bottom: 113px;
            @include maxwidth(1024) {
                bottom: 23px;
            }
            // clip-path: inset(0 0 0 100%);
            .img {
                display: block;
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                clip-path: polygon(0 0, 100% 15%, 100% 76%, 0% 100%);
                @include maxwidth(1024) {
                    clip-path: polygon(0 0, 100% 5%, 100% 95%, 0% 100%);
                }
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                &::after{
                    content: '';
                    @include absolute_centering;
                    background-color: rgba(#000, .40);
                }
            }
        }
    }
}

#toppageNews {
    padding: 100px 0 70px;
    @include maxwidth(768) {
        padding: 60px 0 50px;
    }
    box-sizing: border-box;
    background-color: $themecolor4;
    position: relative;
    .container {
        @include container(1140, 40);
        @include maxwidth(1024) {
            max-width: 100%;
            width: auto;
            margin: 0;
        }
        @mixin newsContainer() {
            @include maxwidth(1024) {
                padding-left: 40px;
                padding-right: 40px;
                box-sizing: border-box;
            }
            @include maxwidth(768) {
                padding-left: 20px;
                padding-right: 20px;
            }
        }
        .columns {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 3em;
            @include maxwidth(1024) {
                flex-direction: column;
                justify-content: flex-start;
                gap: 30px;
                &>* {
                    flex: none !important;
                    width: 100%;
                }
            }
            .column {
                &:nth-of-type(1) { 
                    @include newsContainer();
                }
                &:nth-of-type(2) {
                    flex-basis: 800px;
                }
                .c-heading {
                    align-items: flex-start;
                    &__top {
                        .en {
                        }
                    }
                    &__foot {
                        align-items: flex-start;
                        @media screen and (min-width: 1025px) {
                            flex-direction: row;
                            gap: 0;
                        }
                        .ja {
                            @media screen and (min-width: 1025px) {
                                padding-left: 0.28em;
                                padding-right: 0.28em;
                                &>span {
                                    display: inline-block;
                                    width: 1em;
                                    writing-mode: vertical-rl;
                                    letter-spacing: 0.1em;
                                }
                            }
                        }
                        .t {
                            @media screen and (min-width: 1025px) {
                                padding-top: 15px;
                                padding-bottom: 0px;
                                &>span {
                                    display: inline-block;
                                    width: 1em;
                                    writing-mode: vertical-rl;
                                    letter-spacing: 0.3em;
                                }
                            }
                        }
                    }
                }
                .term-list {
                    @include newsContainer();
                    padding-bottom: 2px;
                    ul {
                        li {
                            a {
                            }
                        }
                    }
                }
                .topics-headline {
                    @include newsContainer();
                    margin-top: 23px;
                    .headline-items {
                        &[data-trigger] {
                            .headline-item {
                                position: relative;
                                @for $i from 0 to 4 {
                                    &:nth-of-type(#{$i + 1})::after {
                                        transition-delay: calc(#{$i} * 0.1s);
                                    }
                                }
                                &::after{
                                    content: '';
                                    @include absolute_centering;
                                    background-color: $themetextcolor;
                                    clip-path: inset(0% 0% 0% 0%);
                                    transition: clip-path 1000ms;
                                }
                            }
                            &.inview {
                                .headline-item {
                                    &::after {
                                        clip-path: inset(0% 0% 0% 100%) !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.topics-headline {
    position: relative;
    .subpage & { margin-top: 30px; }
    .headline {
        &-items {
        }
        &-item {
            .toppage & {
                &:last-of-type .headline-item__link { border-bottom: none; }
            }
            &__link {
                .toppage & {
                    color: $themetextcolor;
                    background-color: $themecolor4;
                }
                display: flex;
                flex-wrap: wrap;
                padding: 22px 40px 22px 20px;
                box-sizing: border-box;
                border-bottom: solid 1px #626262;
                position: relative;
                @include maxwidth(768) {
                    padding: 15px 33px 15px 10px;
                }
                @media (any-hover: hover) {
                    transition: 
                        filter 300ms,
                        -webkit-filter 300ms
                    ;
                    &:hover {
                        filter: brightness(80%);
                        -webkit-filter: brightness(80%);
                    }
                }
                .date {
                    flex-shrink: 0;
                    @include f_all(15);
                    font-weight: 500;
                    margin-right: 23px;
                }
                .terms {
                    @include f_all(14);
                    font-weight: bold;
                    @include maxwidth(768) {
                        font-weight: 500;
                    }
                    display: inline-flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 1em;
                    .term {
                        display: inline-flex;
                        align-items: center;
                        gap: 0.5em;
                        &::before{
                            flex-shrink: 0;
                            content: '';
                            width: 7px;
                            height: 7px;
                            background-color: $themecolor2;
                        }
                    }
                }
                .title {
                    flex-basis: 100%;
                    margin-top: 8px;
                    @include f_all(15);
                    font-weight: bold;
                    line-height: 1.5;
                    @include maxwidth(768) {
                        @include f_all(14);
                        margin-top: 13px;
                    }
                }
                &::after{
                    content: '';
                    display: block;
                    width: 14px;
                    height: 13px;
                    background: url(../images/arrow-double-color.svg) no-repeat center/contain;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    right: 20px;
                    margin: auto;
                    @include maxwidth(768) {
                        top: auto;
                        right: 10px;
                        bottom: 20px;
                    }
                }
            }
        }
    }
}

// === Subpage

body.subpage #content {
    color: $basetextcolor;
    background-color: $basecolor;
}

#subpageHeadingVisual {
    padding-top: var(--header-height);
    box-sizing: border-box;
    position: relative;
    .visual {
        height: 280px;
        @include maxwidth(768) { height: 260px; }
        position: relative;
        &::before, &::after {
            content: '';
            @include absolute_centering;
            z-index: 1;
        }
        &::before {
            background: rgba(11, 60, 93, 0.70);
            mix-blend-mode: overlay;
        }
        &::after {
            background: rgba(0, 0, 0, 0.30);
        }
        &>img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .heading {
            position: absolute;
            top: 50%;
            left: (144 / 1440 * 100vw);
            transform: translateY(-50%);
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            @include maxwidth(1200) {
                left: 50%;
                align-items: center;
                transform: translate(-50%,-50%);
            }
            .en {
                color: $themetextcolor;
                @include ff_en;
                font-size: 100px;
                @include maxwidth(1200) {
                    font-size: clamp(65px,(100 / 1200 * 100vw),100px);
                }
                @include maxwidth(360) {
                    font-size: 60px;
                }
                font-weight: 500;
                line-height: 1;
                text-transform: uppercase;
                // @include scrollEnterSplitText();
            }
            .ja {
                color: $themetextcolor;
                @include f_all(14);
                @include maxwidth(360) { @include f_all(13); }
                font-weight: bold;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0 10px 1px;
                box-sizing: border-box;
                background-color: $themecolor;
                min-height: 27px;
                margin-top: 1em;
                position: relative;
            }
        }
    }
}

#subpageTopicpath {
    padding: 30px 0;
    box-sizing: border-box;
    position: relative;
    @include maxwidth(768) {
        padding: 20px 0;
    }
    .container {
        @include container(1140, 20);
        ul {
            li {
                &.en {
                    @include ff_en;
                }
                @include f_all(15);
                @include maxwidth(768) { @include f_all(14); }
                line-height: 1.2;
                text-transform: uppercase;
                font-weight: bold;
                display: inline-flex;
                align-items: center;
                &::after {
                    content: '';
                    display: block;
                    width: 8px;
                    height: 13px;
                    background: url(../images/arrow-right-dark.svg) no-repeat center/contain;
                    margin: 0 10px;
                }
                &:last-of-type::after { display: none; }
                a {
                    &.ja { @include ff_ja; }
                }
            }
        }
    }
}

#subpageContent {
    padding: 60px 0 100px;
    box-sizing: border-box;
    position: relative;
    @include maxwidth(768) { padding: 40px 0 60px; }
    .container {
        @include container(1140, 20);
        @include maxwidth(1280) { width: auto; margin-right: 80px; margin-left: 20px;}
        @include maxwidth(768) { width: auto; margin-right: 20px;  margin-left: 20px;}

        .default {
            @include contentdefault;
            @include eachcss;
        }

        // カテゴリ表示
        .block-terms {
            margin-bottom: 10px;
            position: relative;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 5px 10px;
            .block-term {
                color: $themetextcolor;
                text-decoration: none;
                @include f_all(14);
                @include maxwidth(768) {
                    @include f_all(13);
                }
                font-weight: bold;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0 0.55em 1px;
                box-sizing: border-box;
                min-height: 26px;
                @include maxwidth(768) {
                    min-height: 24px;
                }
                background-color: $themecolor2;
                gap: 0.4em;
                &::before{
                    content: '';
                    flex-shrink: 0;
                    display: block;
                    width: 0.5em;
                    height: 0.5em;
                    background-color: currentColor;
                }
                &.child {
                    font-size: 0.9em;
                    background-color: $themecolor4;
                    &::before { display: none; }
                }
                @media (any-hover: hover) {
                    &:hover { opacity: 0.8; }
                }
            }
        }
        .block-title {
            margin-top: 10px;
        }
    }
}

/* Pager */
.pager {
    text-align: center;
    margin: 40px 0;
    @include f_all(13);
    a,
    span {
        color: $basetextcolor;
        display: inline-block;
        margin: 0 0 0.25em 0.75em;
        min-width: 3em;
        padding: 1em;
        box-sizing: border-box;
        background-color: color-mix(in srgb, $basecolor 85%, $basetextcolor);
        border-radius: 5px;
    }
    .current {
        color: $themetextcolor;
        background-color: $themecolor2;
    }
}
/* Archivelink */
div.monthly_archive_link {
    color: $basetextcolor;
    @include container(800, 10);
    margin-top: 60px;
    @include f_all(14);
    a.show_archive_links {
        display: block;
        width: 200px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: color-mix(in srgb, $basecolor 85%, $basetextcolor);
        margin: auto;
        border-radius: 30px;
        position: relative;
        &:after {
            content: ">";
            display: inline-block;
            transform: rotateZ(90deg) scaleX(0.5);
            position: absolute;
            right: 30px;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    }
    ul {
        margin-top: 20px;
        display: none;
        &.show {
            display: flex;
        }
        justify-content: center;
        flex-wrap: wrap;
        li {
            margin: 0 5px 10px;
            flex: 0 0 113px;
            text-align: center;
            a {
                display: block;
                background-color: color-mix(in srgb, $basecolor 85%, $basetextcolor);
                padding: 7px 0;
                border-radius: 15px;
            }
        }
    }
}