// スタイルシート common

@charset "utf-8";

@import "mixin";

// html { scroll-behavior: smooth; }

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; }

// === Component

// body.menu_open & {
//     overflow: hidden;
// }

@keyframes cHeadingMainTextMove {
    0% {
        transform: scaleX(0%);
        transform-origin: left 50%;
    }
    50% {
        transform: scaleX(100%);
        transform-origin: left 50%;
    }
    51% {
        transform: scaleX(100%);
        transform-origin: right 50%;
    }
    100% {
        transform: scaleX(0%);
        transform-origin: right 50%;
    }
}

.c-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    .sub {
        color: $themetextcolor;
        @include f_all(15);
        font-weight: bold;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
        box-sizing: border-box;
        background-color: $themecolor;
        min-height: 27px;
        position: relative;
        @include maxwidth(768) { @include f_all(14); }
    }
    .main {
        @include f_all(42);
        font-weight: bold;
        line-height: 1.3;
        text-align: center;
        @include maxwidth(768) { @include f_all(30); }
        .row { display: block; }
    }

    // スクロールトリガーを付与
    &.js-target {
        .main {
            .row {
                @for $i from 0 to 5 {
                    &:nth-child(#{$i + 1}) {
                        & > .str,
                        & > .str > span 
                        { transition-delay: #{$i * 0.2}s; }
                    }
                }
                & > .str {
                    display: inline-block;
                    overflow: hidden;
                    position: relative;
                    transform: translate(-100%, 0);
                    transition: transform 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
                    & > span {
                        display: inline-block;
                        transform: translate(100%, 0);
                        transition: transform 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
                    }
                }
            }
        }
        &.act {
            .main {
                .row {
                    & > .str,
                    & > .str > span {
                        transform: translate(0, 0) !important;
                    }
                }
            }
        }
    }
}

.c-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    @include maxwidth(768) { gap: 5px; }
}

.c-button {
    display: inline-block;
    height: auto;
    @include maxwidth(768) { width: 100%; }
    &__link {
        color: $themetextcolor;
        @include f_all(14);
        font-weight: bold;
        line-height: 1.3;
        @include flex_centering;
        background-color: $basetextcolor;
        min-width: 250px;
        min-height: 60px;
        @include maxwidth(768) {
            min-width: initial;
            width: 100%;
            min-height: 50px;
        }
        height: 100%;
        box-sizing: border-box;
        position: relative;

        &::after {
            content: "";
            display: block;
            width: 8px;
            height: 13px;
            background: url(../images/arrow-white.svg) no-repeat center center / contain;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 12px;
            margin: auto;
        }

        @media (any-hover: hover) {
            z-index: 0;
            &::before {
                content: "";
                @include absolute_centering;
                background-color: mix($accentcolor, $basecolor, 0.9);
                z-index: -1;
                transform: scaleX(0%);
                transition: transform 300ms;
                transform-origin: right 50%;
            }
            &:hover {
                &::before {
                    transform: scaleX(100%);
                    transform-origin: left 50%;
                }
            }
        }
    }
}

.topics-headline {
    position: relative;

    .headline-items {  }

    .headline-item {

        &:last-child .headline-item__link {
            border-bottom: none;
        }
        
        &__link {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 28px 60px 24px 40px;
            box-sizing: border-box;
            border-bottom: solid 1px rgba($themecolor, 0.15);
            position: relative;
            @include maxwidth(768) {
                flex-wrap: wrap;
                padding: 20px 36px 15px 20px;
            }

            .date {
                flex-shrink: 0;
                @include f_all(16);
                font-weight: 500;
                margin-right: 30px;
            }

            .terms {
                @include f_all(13);
                font-weight: 500;
                margin-right: 40px;
                @include maxwidth(768) { margin-right: 0; }
                display: flex;
                flex-wrap: wrap;
                gap: 0.4em 0.9em;

                .term {
                    display: inline-flex;
                    align-items: center;
                    gap: 6px;
                    &::before {
                        content: "";
                        flex-shrink: 0;
                        display: block;
                        width: 6px;
                        height: 6px;
                        border-radius: 6px;
                        background-color: $accentcolor;
                        margin-top: 0.1em;
                    }
                }
            }
            
            .title {
                @include f_all(15);
                font-weight: 500;
                line-height: 1.8;
                @include maxwidth(768) {
                    flex-basis: 100%;
                    margin-top: 5px;
                }
            }

            &::after {
                content: "";
                display: block;
                width: 6px;
                height: 10px;
                background: url(../images/arrow-black.svg) no-repeat center center / contain;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 40px;
                margin: auto;
                @include maxwidth(768) {
                    top: auto;
                    right: 20px;
                    bottom: 20px;
                }
                transition: 300ms;
            }

        
            @media (any-hover: hover) {
                &:hover {
                    filter: opacity(80%);
                    -webkit-filter: opacity(80%);
                    &::after {
                        transform: translateX(1rem);
                    }
                }
            }
        }
    }
}

.topics-terms {
    &:has(+ .topics-headline) { margin-bottom: 20px; }
    ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        @include maxwidth(768) { gap: 5px; }
        li {
            @include maxwidth(768) {
                flex-basis: calc((100% - 5px) / 2);
                &:first-child { flex-basis: 100%; }
            }
            a {
                color: $themetextcolor;
                @include f_all(15);
                font-weight: 500;
                line-height: 1.2;
                @include flex_centering;
                gap: 0.5em;
                padding: 0.75em 1em;
                box-sizing: border-box;
                min-width: 180px;
                @include maxwidth(768) { min-width: initial; }
                background-color: $basetextcolor;
                border-radius: 5px;
                position: relative;
                &::after {
                    content: "";
                    flex-shrink: 0;
                    display: inline-block;
                    width: 8px;
                    height: 13px;
                    background: url(../images/arrow-white.svg) no-repeat center / contain;
                    margin-top: 0.15em;
                }

                &.current {
                    color: $themetextcolor;
                    background-color: $accentcolor;
                    &::after { display: none; }
                }
                
                @media (any-hover: hover) {
                    &:hover { opacity: 0.8; }
                }
            }
        }
    }
}

.gnav-toggle {
    cursor: pointer;
    display: block;
    width: 50px;
    height: 50px;
    background: linear-gradient(315deg, $accentcolor 0%, $themecolor 100%);
    position: relative;
    transition: background 300ms;
    @include maxwidth(768) {
        width: 45px;
        height: 45px;
    }
    .menu_open & { background: $accentcolor !important; }
    .bar {
        display: block;
        width: 20px;
        height: 1px;
        background-color: $themetextcolor;
        @include absolute_centering;
        @include flex_centering;
        transition-property: opacity, transform;
        transition-duration: 300ms;
        &:nth-child(1) {
            transform: translateY(-6px);
            .menu_open & { transform: translateY(0px) rotateZ(45deg); }
        }
        &:nth-child(2) {
            .menu_open & {
                opacity: 0;
                transform: translateX(50%);
            }
        }
        &:nth-child(3) {
            transform: translateY(6px);
            .menu_open & { transform: translateY(0px) rotateZ(-45deg); }
        }
    }
}

#gnavToggleWrap {
    position: fixed;
    top: 30px;
    .admin-bar & { top: 62px; }
    right: 40px;
    z-index: 101;
    @include maxwidth(768) {
        position: absolute;
        top: 20px !important;
        right: 15px;
        z-index: 90;
    }

    @media screen and (min-width: 1281px) {
        opacity: 0;
        transform: translateX(100px);
    }

    transition-property: opacity, transform;
    transition-duration: 300ms;
    .header_scrollout &,
    .menu_open & {
        opacity: 1;
        transform: translateX(0px);
    }
}

#gnav {
    &Wrap {
        position: fixed;
        inset: 0;
        z-index: 100;
        color: $themetextcolor;
        visibility: hidden;
        background-color: rgba($basetextcolor, 0.2);
        transition-property: opacity, visibility;
        .menu_open & {
            transition-duration: 500ms;
            visibility: visible;
        }
        .gnav-band {
            &s {
                pointer-events: none;
                position: fixed;
                inset: 0;
                display: flex;
                overflow: hidden;
            }
            flex: (100% / 3);
            // background-color: mix($basetextcolor, $basecolor, 0.9);
            background-color: rgba($basetextcolor, 0.9);
            border: solid 1px transparent;
            margin: -1px;
            height: calc(100% + 90px);
            clip-path: polygon(0 0, 100% 90px, 100% 100%, 0% 100%);
            transform: translateY(100%);
            transition: transform 500ms;
            .menu_open & {
                transform: translateY(-90px);
                &:nth-child(1) { transition-delay: 200ms; }
                &:nth-child(2) { transition-delay: 100ms; }
                &:nth-child(3) { transition-delay: 0ms; }
            }
        }
    }

    position: fixed;
    inset: 0;
    z-index: 1;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
    opacity: 0;
    transition: opacity 300ms;
    .menu_open & {
        opacity: 1;
        transition-delay: 500ms;
    }
    .container {
        padding: 25vh 0;
        box-sizing: border-box;
        position: relative;
        .head {
            position: absolute;
            top: 40px;
            left: (50 / 1440 * 100vw);
            right: (50 / 1440 * 100vw);
            @include maxwidth(768) {
                top: 30px;
                left: 15px;
                right: 15px;
            }
            .sitename {
                a {  }
                img {
                    width: 336px;
                    @include maxwidth(768) { width: 213px; }
                }
            }
        }
        .body {
            max-width: 760px;
            width: 100%;
            margin: 0 auto;
            padding: 0 80px;
            box-sizing: border-box;
            @include maxwidth(768) {
                max-width: 640px;
                padding: 0 20px;
            }
            transform: translateY(1rem);
            transition: transform 300ms;
            .menu_open & {
                transform: translateY(0rem);
                transition-delay: 500ms;
            }
            .menu {
                ul {
                    li {
                        &:first-child a { border-top: none; }
                        &:last-child a { border-bottom: solid 1px $themecolor; }
                        a {
                            @include f_all(11);
                            @include maxwidth(768) { @include f_all(10); }
                            font-weight: 500;
                            padding: 10px;
                            box-sizing: border-box;
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            border-top: solid 1px $themecolor;
                            min-height: 4.5em;
                            position: relative;

                            &[data-en] {
                                &::before {
                                    content: attr(data-en);
                                    @include ff_en;
                                    @include f_all(18);
                                    @include maxwidth(768) { @include f_all(15); }
                                    font-weight: 500;
                                    text-transform: uppercase;
                                    box-sizing: border-box;
                                }
                            }

                            &[data-en="contact"] { // 問い合わせ
                                &::before {
                                    padding-left: 20px;
                                    background: url(../images/icon-mail-white.svg) no-repeat left top 60% / 15px auto;
                                }
                            }

                            &[data-en="access map"] { // アクセスマップ
                                &::before {
                                    padding-left: 20px;
                                    background: url(../images/icon-map-white.svg) no-repeat left center / 13px auto;
                                }
                            }

                            &.parent {
                                &::after {
                                    content: "";
                                    display: block;
                                    width: 13px;
                                    height: 10px;
                                    background: url(../images/arrow-white-bottom.svg) no-repeat center center / contain;
                                    position: absolute;
                                    top: 0;
                                    bottom: 0;
                                    right: 17px;
                                    margin: auto;
                                    transition: transform 300ms;
                                }

                                &.act {
                                    &::after {
                                        transform: rotateX(180deg);
                                    }
                                }
                            }

                            &+ul { display: none; }
                        }
                    }

                    &.children {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 5px;
                        padding-bottom: 5px;
                        box-sizing: border-box;
                        li {
                            flex-basis: calc((100% - 5px) / 2);
                            a {
                                border: none !important;
                                background-color: $themecolor;
                                min-height: 3.85em;

                                &[data-en] {
                                    &::before {
                                        content: "";
                                        padding-left: 15px;
                                        height: 1em;
                                    }
                                }

                                &::after {
                                    content: "";
                                    display: block;
                                    width: 8px;
                                    height: 10px;
                                    background: url(../images/arrow-white.svg) no-repeat center center / contain;
                                    position: absolute;
                                    top: 0;
                                    bottom: 0;
                                    right: 10px;
                                    margin: auto;
                                }

                                @media (any-hover: hover) {
                                    &:hover { opacity: 0.8; }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}

.menu-overlay { // #header .global-nav .parentをクリック時に出現
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.90);
    opacity: 0;
    visibility: hidden;
    z-index: 19;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: all 300ms;
    &.act {
        opacity: 1;
        visibility: visible;
    }
}

#header {
    color: $themetextcolor;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 20;
    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 3rem;
        padding: 40px (50 / 1440 * 100vw);
        box-sizing: border-box;
        position: relative;
        @include maxwidth(768) {
            padding: 30px 75px 30px 15px;
        }
        .sitename {
            h1 {  }
            a {  }
            img {
                width: 336px;
                @include maxwidth(768) { width: 213px; }
            }
        }
        .global-nav {
            @include maxwidth(1280) {
                display: none !important;
            }
            ul {
                display: flex;
                align-items: center;
                gap: 1rem 30px;
                li {
                    position: relative;
                    a {
                        @include f_all(11);
                        font-weight: 500;
                        display: inline-flex;
                        align-items: center;
                        flex-direction: column;
                        gap: 8px;

                        &::before {
                            content: attr(data-en);
                            @include ff_en;
                            @include f_all(18);
                            font-weight: 500;
                            text-transform: uppercase;
                            box-sizing: border-box;
                        }

                        &[data-en="contact"] {
                            &::before {
                                padding-left: 22px;
                                background: url(../images/icon-mail-white.svg) no-repeat left center;
                            }
                        }

                        &.parent {
                            transition: 300ms;
                            &::before {
                                padding-right: 19px;
                                background: url(../images/arrow-white-bottom.svg) no-repeat right center;
                            }

                            &.act {
                                filter: opacity(80%);
                                -webkit-filter: opacity(80%);
                            }
                        }
                    }
                    &>ul {
                        display: none;
                        position: absolute;
                    }
                }
                &.children {
                    position: absolute;
                    right: 0;
                    min-width: 11rem;
                    padding: 10px;
                    box-sizing: border-box;
                    background-color: rgba($basecolor, 0.5);
                    border-radius: 5px;
                    margin-top: 1rem;
                    li {
                        height: auto;
                        &:not(:first-child) { margin-top: 0.45em; }
                        a {
                            @include f_all(12);
                            display: inline-flex;
                            flex-direction: row-reverse;
                            align-items: center;
                            gap: 5px;
                            &::before { display: none; }
                            &::after {
                                content: "";
                                flex-shrink: 0;
                                display: block;
                                width: 6px;
                                height: 10px;
                                background: url(../images/arrow-white.svg) no-repeat center / contain;
                                margin-top: 0.15em;
                            }
                            &:hover { opacity: 0.8; }
                        }
                    }
                }
            }
        }
    }
}

/* ＠追加＠ */
@keyframes zoomUp {
	0% { transform: scale(1); }
	100% { transform: scale(1.2); }
}

@keyframes overlay_shine {
    from { background-position: 100% 50%; }
    to { background-position: 0% 50%; }
}

#mainVisual {
    position: relative;

    .spacer { height: 100vh; }

	/* ＠追加＠ */
	background-color: #000;

    .container {
        position: sticky;
        top: 0;
        left: 0;
        .swiper {
            &-wrapper {
            }
            &-slide {
                height: 100vh;
                height: 100svh;
                // min-height: 600px;
                .admin-bar & {
                    height: calc(100vh - 32px);
                    height: calc(100svh - 32px);
                }
                position: relative;
                &::before {
                    content: "";
                    @include absolute_centering;
                    background-color: rgba($themecolor, 0.3);
                    mix-blend-mode: overlay;
                }
                &::after {
                    content: "";
                    @include absolute_centering;
                    background: radial-gradient(50% 50% at 50% 50%, rgba($basetextcolor, 0.10) 0%, rgba($basetextcolor, 0.25) 100%);
                }
                &>img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

				/* ＠追加＠ */
				// &.add-animation {
				//   animation: zoomUp 8s linear 0s normal both;
				// }
                
                &-active > img,
                &-prev > img,
                &-duplicate > img {
                    animation: zoomUp 8s linear 0s normal both;
                }
            }

            .hero-pagination {
                height: calc(10px * 5 + 8px * 4);
				width: 10px;
				gap: 8px;
				display:flex;
                flex-direction: column;
                gap: 8px;
				flex-wrap:wrap;
				position:absolute;
				inset: 0 auto 0 30px;
                z-index: 10;
				margin-block: auto;
                @include maxwidth(768) { inset: 0 auto 0 15px; }
                .swiper-pagination-bullet {
                    cursor: pointer;
                    opacity: 1;
                    margin: 0;
                    border-radius: 0px;
                    display: block;
                    width: 10px;
                    height: 10px;
                    background-color: mix($basecolor, $basetextcolor, 0.805);
                    @include maxwidth(768) {
                        width: 8px;
                        height: 8px;
                    }
                    &-active {
                        background-color: $accentcolor;
                    }
                }
            }
        }
        .overlay {
            color: $themetextcolor;
            white-space: nowrap;
            position: absolute;
            bottom: 100px;
            @media screen and (max-height: 440px) {
                bottom: 60px;
            }
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
            display: inline-flex;
            align-items: center;
            flex-direction: column;
            @include maxwidth(1024) { gap: 1.2rem; }
            @include maxwidth(768) { bottom: 62px; }
            &-text {
                @include ff_en;
                font-size: 96px;
                font-size: clamp(40px, (96 / 1440 * 100vw), 96px);
                font-weight: 500;
                line-height: 1.5;
                @include maxwidth(1024) { line-height: 1.1; }
                @include maxwidth(375) { font-size: clamp(34px, (40 / 375 * 100vw), 40px); }

                .row {
                    @include maxwidth(1024) {
                        display: block;

                        &:nth-of-type(even) { margin-left: 1.8em; }
                    }
                }

                // background-image: linear-gradient(
                //     70deg,
                //     $themetextcolor 45%, 
                //     $accentcolor 50%,
                //     $themetextcolor 55% 
                // );
                // color: transparent;
                // background-size: 500% 500%;
                // background-clip: text;
                // -webkit-background-clip: text;
                // animation: overlay_shine 5s infinite;

                margin-bottom: -0.4em;

                .char {
                    display: inline-block;
                    overflow: hidden;
                    padding-bottom: 0.25em;
                    &>span {
                        display: inline-block;
                        opacity: var(--opacity, 0);
                        transform: translateX(var(--x, -105%));
                        transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1);
                        transition-delay: calc(var(--char-index) * 40ms);
                        body.mvLoaded & {
                            --x: 0;
                            --opacity: 1,
                        }
                    }
                }
            }
            &-text2 {
                color: $themetextcolor;
                @include f_all(15);
                font-weight: bold;
                padding: 0.5em 0.4em 0.55em 15px;
                box-sizing: border-box;
                background: linear-gradient(90deg, $accentcolor 0%, $themecolor 100%);
                position: relative;
                @include maxwidth(768) { @include f_all(13); }
                @include maxwidth(375) { font-size: clamp(10px, (13 / 375 * 100vw), 13px); }
            }
        }
        .scroll-down {
            color: $themetextcolor;
            position: absolute;
            bottom: 20px;
            @media screen and (max-height: 440px) {
                bottom: 15px;
            }
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
            @include maxwidth(768) { bottom: 15px; }
            &__link {
                @include ff_en;
                @include f_all(16);
                font-weight: 500;
                text-transform: uppercase;
                display: inline-flex;
                align-items: center;
                flex-direction: column;
                gap: 13px;
                @include maxwidth(768) { @include f_all(12); }
                &::after {
                    content: "";
                    flex-shrink: 0;
                    width: 13px;
                    height: 8px;
                    background: url(../images/arrow-white-bottom.svg) no-repeat center center;
                }
            }
        }
    }
}

.sidebar-overlay {
    position: fixed;
    inset: 0px;
    background: rgba(0, 0, 0, 0.90);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 102;
    opacity: 0;
    visibility: hidden;
    transition: 300ms;
    &.act {
        opacity: 1;
        visibility: visible;
    }
}

#sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 103;
    @include maxwidth(768) {
        top: auto;
        bottom: 0;
        left: 0;
        margin: auto;
        transform: translateY(100%);
        transition: transform 300ms;
        .header_scrollout &,
        .menu_open &
        {
            transform: translateY(0%) !important;
        }
    }
    @media screen and (max-height: 420px) and (min-width: 769px) {
        display: none;
    }
    &.act {
        & > ul > li > a {
            filter: brightness(40%);
            -webkit-filter: brightness(40%);
            pointer-events: none;
        }
    }
    ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
        @include maxwidth(768) {
            flex-direction: row;
            // margin-left: 1px;
            // margin-right: 1px;
            gap: 1px;
        }
        li {
            position: relative;
            &.pc {
                @include maxwidth(768) {
                    display: none !important;
                }
            }
            &.sp {
                @media screen and (min-width: 769px) {
                    display: none !important;
                }
            }
            @include maxwidth(768) {
                // flex: 0px;
                flex: auto;
                &:has(> .gnav-toggle) {
                    flex-shrink: 0;
                    flex-grow: 0;
                    flex-basis: 50px;
                }

                // &:nth-child(1) { order: 2; }
                // &:nth-child(2) { order: 3; }
                // &:nth-child(3) { order: 1; }
                // &:nth-child(4) { order: 4; }
            }
            @media screen and (max-height: 700px) and (min-width: 769px) {
                &:has(> .isRed) { display: none; }
            }
            a {
                color: $themetextcolor;
                padding: 10px;
                box-sizing: border-box;
                @include flex_centering;
                flex-wrap: wrap;
                @media screen and (min-width: 769px) {
                    gap: 0.5em;
                    flex-direction: column;
                    border-radius: 5px 0 0 5px;
                    width: 55px;
                    min-height: 235px;
                }
                @include maxwidth(768) {
                    width: 100%;
                    height: 50px;
                    padding: 5px;
                }
                background-color: $themecolor;
                position: relative;
                transition: 300ms;
                @media (any-hover: hover) and (min-width: 769px) {
                    &:hover { transform: translateX(8%); }
                }
                &.isRed  {
                    background-color: $accentcolor;
                }
                &.tel {
                    flex-direction: column;
                    gap: 0px;
                    .num {
                        @include ff_en;
                        @include f_all(18);
                        @include maxwidth(768) { @include f_all(16); }
                        font-weight: bold;
                        padding-left: 16px;
                        box-sizing: border-box;
                        background: url(../images/icon-tel-white.svg) no-repeat left top 60% / 13px auto;
                    }
                    .time {
                        @include f_all(8);
                        font-weight: bold;
                        line-height: 1.1;
                        text-align: center;
                        margin-top: 5px;
                    }
                }
                &.contact {
                    cursor: pointer;
                    &::before {
                        content: "";
                        flex-shrink: 0;
                        display: block;
                        width: 11px;
                        height: 19px;
                        background: url(../images/icon-thunder.svg) no-repeat center / contain;
                        @include maxwidth(768) {
                            margin-right: 0.2em;
                        }
                    }
                    &.hasParent{
                        &.act{
                            opacity: 0;
                        }
                    }
                }
                .t {
                    @media screen and (min-width: 769px) {
                        width: 1em;
                        writing-mode: vertical-rl;
                    }
                    display: inline-block;
                    &.en {
                        @include ff_en;
                        @include f_all(18);
                        @include maxwidth(360) { @include f_all(13); }
                        font-weight: 500;
                        text-transform: uppercase;
                    }
                    &.ja {
                        @include f_all(15);
                        font-weight: bold;
                        padding-left: 0.2em;
                        @media screen and (min-width: 769px) {
                            letter-spacing: 0.2em;
                        }
                        @include maxwidth(768) {
                            display: none;
                        }
                        @include maxwidth(360) {
                            @include f_all(14);
                            padding-left: 0;
                        };
                        &>span {
                            display: inline-block;
                            @media screen and (min-width: 769px) {
                                margin: 0.5em 0;
                                transform: translateX(-0.2em);
                            }
                        }
                    }
                }

                &+ul {
                    position: absolute;
                    z-index: 1;
                    opacity: 0;
                    visibility: hidden;
                }
                &+ul.hasChildren {
                    position: absolute;
                    top: 50%;
                    right: 0px;
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                    transform: translateY(-50%);
                    opacity: 0;
                    visibility: hidden;
                    transition: 300ms;
                    @include maxwidth(768) {
                        align-items: center;
                        justify-content: center;
                        top: auto;
                        bottom: 0px;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                    &.opt {
                        opacity: 1;
                        visibility: visible;
                        &::before {
                            transform: translateX(0px);
                            @include maxwidth(768) {
                                transform: translate(-50%, 0px);
                            }
                        }
                        &::after { opacity: 1; }
                        li {
                            opacity: 1;
                            visibility: visible;
                            transform: translateX(0px);
                            @include maxwidth(768) { transform: translateY(0px); }
                            @for $i from 0 to 10 {
                                &:nth-child(#{$i + 1}) {
                                    transition-delay: #{$i * 0.15}s;
                                }
                            }
                        }
                    }
                    &::before {
                        content: "";
                        display: block;
                        width: 236px;
                        height: 236px;
                        @include maxwidth(360) {
                            width: 200px;
                            height: 200px;
                        }
                        background: linear-gradient(
                            270deg, 
                            mix($themecolor, #000, 0.6) 0%, 
                            mix($accentcolor, #000, 0.6) 100%);
                        @include maxwidth(768) {
                            background: linear-gradient(
                                0deg, 
                                mix($themecolor, #000, 0.6) 0%, 
                                mix($accentcolor, #000, 0.6) 100%);
                        }
                        border-radius: 50%;
                        position: absolute;
                        right: -50px;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        transform: translateX(50px);
                        transition: transform 300ms;
                        @include maxwidth(768) {
                            top: auto;
                            bottom: -50px;
                            left: 50%;
                            transform: translate(-50%, 50px);
                        }
                    }
                    &::after {
                        content: "CLOSE";
                        cursor: pointer;
                        @include ff_en;
                        color: $themetextcolor;
                        @include f_all(18);
                        font-weight: 500;
                        letter-spacing: 0.05em;
                        writing-mode: vertical-rl;
                        width: 1em;
                        display: block;
                        position: absolute;
                        top: 50%;
                        right: 20px;
                        transform: translateY(-50%);
                        padding-top: 1.2em;
                        box-sizing: border-box;
                        background: url(../images/sidebar-close.svg) no-repeat center top / 0.85em auto;
                        opacity: 0;
                        transition: opacity 300ms 0ms;
                        @include maxwidth(768) {
                            @include f_all(16);
                            width: auto;
                            writing-mode: initial;
                            top: auto;
                            right: auto;
                            bottom: 20px;
                            left: 50%;
                            transform: translate(-50%, 0px);
                            padding-top: 0;
                            padding-left: 1.1em;
                            background-position: left center;
                        }
                    }
                    li {
                        margin-right: 90px;
                        opacity: 0;
                        visibility: hidden;
                        transform: translateX(10px);
                        transition: 300ms;
                        @include maxwidth(768) {
                            margin-right: 0;
                            transform: translateY(10px);
                            &:last-child { margin-bottom: 120px; }
                        }
                        @include maxwidth(360) {
                            &:last-child { margin-bottom: 90px; }
                        }
                        a {
                            @include f_all(14);
                            @include maxwidth(768) { @include f_all(13); }
                            font-weight: bold;
                            line-height: 1.4;
                            width: 200px;
                            min-height: 50px;
                            @include maxwidth(360) {
                                @include f_all(12);
                                width: 160px;
                                min-height: 40px;
                            }
                            border-radius: 0px;
                            padding-left: 30px;
                            padding-right: 30px;
                            &::before {
                                content: "";
                                display: block;
                                width: 8px;
                                height: 13px;
                                background: url(../images/arrow-white.svg) no-repeat center / contain;
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                left: 15px;
                                margin: auto;
                            }
                            @media (any-hover: hover) {
                                &:hover {
                                    transform: translate(0px);
                                    opacity: 0.8;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#contentFooter {
    &Contact {
        margin-bottom: 60px;
        @include maxwidth(768) { margin-bottom: 40px; }
        position: relative;
        .container {
            @include container(1280, 15);
            padding: 80px 30px;
            box-sizing: border-box;
            @include maxwidth(1024) {
                padding: 38px 20px 30px;
            }

            .contact-buttons {
                display: flex;
                justify-content: center;
                gap: 80px;
                position: relative;
                z-index: 5;
                @include maxwidth(1024) {
                    flex-direction: column;
                    align-items: center;
                    gap: 5px;
                }
            }
            .contact-button {
                @include maxwidth(768) { width: 100%; }
                &__link {
                    color: $themetextcolor;
                    @include flex_centering;
                    background-color: $basetextcolor;
                    min-width: 370px;
                    min-height: 120px;
                    position: relative;
                    @include maxwidth(768) {
                        min-width: initial;
                        width: 100%;
                        min-height: 80px;
                    }
                    &.form {
                        background-color: $accentcolor;
                        .title {
                            @include f_all(20);
                            font-weight: 900;
                            line-height: 1.3;
                            padding-left: 24px;
                            box-sizing: border-box;
                            background: url(../images/icon-mail-white.svg) no-repeat left top 55% / 16px auto;
                            @include maxwidth(768) { @include f_all(18); }
                        }
                        &::after {
                            content: "";
                            display: block;
                            width: 8px;
                            height: 13px;
                            background: url(../images/arrow-white.svg) no-repeat center center / contain;
                            margin-left: 8px;
                            margin-top: 2px;
                        }
                    }

                    &.tel {
                        flex-direction: column;
                        gap: 6px;
                        .num {
                            @include f_all(32);
                            @include maxwidth(768) { @include f_all(24); }
                            font-weight: bold;
                            line-height: 1;
                            padding-left: 27px;
                            box-sizing: border-box;
                            background: url(../images/icon-tel-white.svg) no-repeat left top 70% / 23px auto;
                            @include maxwidth(768) {
                                padding-left: 20px;
                                background-size: 18px auto;
                            }
                        }
                        .time {
                            @include f_all(13);
                            @include maxwidth(768) { @include f_all(12); }
                            font-weight: bold;
                            line-height: 1.4;
                            text-align: center;
                        }
                    }

                    @media (any-hover: hover) {
                        &:hover {
                            filter: opacity(85%);
                            -webkit-filter: opacity(85%);
                        }
                    }
                }
            }

            .bg-image {
                @include absolute_centering;
                .image {
                    display: block;
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                }
            }
        }
    }
}

#footer {
    color: $themetextcolor;
    background-color: $basetextcolor;
    margin-top: 60px;
    position: relative;
    @include maxwidth(768) { margin-top: 40px; }

    a:hover { opacity: 0.8; }

    .container {
        @include container(1280, 15);
        display: flex;
        justify-content: space-between;
        padding: 60px 0 40px;
        box-sizing: border-box;
        gap: 3rem;
        @include maxwidth(1280) { display: block; }
        @include maxwidth(768) { padding-bottom: 75px; }
        .l-left {  }

        .l-right {  }

        .sitename {
            @include maxwidth(1280) {
                text-align: center;
            }
            a {  }
            img { width: 280px; }
        }

        address {
            @include f_all(13);
            line-height: 1.5;
            font-weight: 500;
            margin-top: 12px;
            @include maxwidth(1280) {
                text-align: center;
            }
            @include maxwidth(768) {
                margin-top: 8px;
            }
        }

        .auth {
            margin-top: 20px;
            @include maxwidth(768) {
                margin-top: 14px;
            }
            ul {
                display: flex;
                flex-direction: column;
                gap: 5px;
                @include maxwidth(1280) {
                    flex-wrap: wrap;
                    flex-direction: row;
                    justify-content: center;
                }
                li {
                    a {
                        @media (any-hover: hover) {
                            &:hover { opacity: 1; }
                        }
                        img {
                            @media (any-hover: hover) {
                                &:hover { outline: 4px solid $themecolor; }
                            }
                        }
                    }
                }
            }
        }

        .menu {
            display: flex;
            justify-content: flex-end;
            gap: 60px;
            @include maxwidth(1280) {
                justify-content: center;
                margin-top: 30px;
            }
            @include maxwidth(768) {
                flex-direction: column;
                justify-content: initial;
                gap: 20px;
            }
            &-item {
                ul {
                    li {
                        &:not(:first-child) {
                            margin-top: 20px;
                        }
                        a {
                            @include ff_en;
                            @include f_all(18);
                            @include maxwidth(768) { @include f_all(16); }
                            font-weight: 500;
                            text-transform: uppercase;
                        }
                        &>ul {
                            margin-top: 14px;
                            margin-bottom: 5px;
                            &>li:not(:first-child) {
                                margin-top: 5px;
                            }
                            a {
                                @include ff_ja;    
                                @include f_all(14);
                                font-weight: bold;
                                line-height: 1.5;
                                display: inline-flex;
                                align-items: center;
                                gap: 10px;
                                &::before {
                                    content: "";
                                    flex-shrink: 0;
                                    display: block;
                                    width: 4px;
                                    height: 4px;
                                    background-color: currentColor;
                                }
                            }
                        }
                    }
                }
            }
        }

        .banner {
            margin-top: 50px;
            @include maxwidth(768) { margin-top: 30px; }
            ul {
                display: flex;
                justify-content: flex-end;
                flex-wrap: wrap;
                gap: 10px;
                @include maxwidth(1280) {
                    justify-content: center;
                }
                @include maxwidth(768) {
                    justify-content: initial;
                    gap: 5px;
                }
                li {
                    a {
                        @media (any-hover: hover) {
                            &:hover { opacity: 1; }
                        }
                        img {
                            @media (any-hover: hover) {
                                &:hover { outline: 4px solid $themecolor; }
                            }
                        }
                    }
                }
            }
        }

        .aside-menu {
            margin-top: 32px;
            @include f_all(13);
            font-weight: bold;
            line-height: 1.2;
            @include maxwidth(768) {
                margin-top: 27px;
            }
            ul {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                flex-wrap: wrap;
                gap: 2em;
                @include maxwidth(1280) {
                    justify-content: center;
                }
                @include maxwidth(768) {
                    flex-direction: column;
                    align-items: initial;
                    justify-content: initial;
                    gap: 1em;
                }
                li {
                    a {
                    }
                }
            }
        }

        .copyright {
            margin-top: 17px;
            text-align: right;
            @include maxwidth(1280) { text-align: center; }
            @include maxwidth(768) { text-align: left; }
            small {
                @include ff_en;
                @include f_all(13);
                line-height: 1.5;
            }
        }

    }
}

// === Toppage

// 雷UI
@mixin printBand($bandColor: $basecolor) {
    pointer-events: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    height: 80vh;
    @include maxwidth(768) { height: 60vh; }
    overflow: hidden;
    .band {
        flex: (100% / 3);
        transform: translateY(calc(100% - 90px));
        transform-origin: bottom center;
        clip-path: polygon(0 0, 100% 90px, 100% 100%, 0% 100%);
        background-color: $bandColor;
        border-left: solid 1px transparent;
        border-right: solid 1px transparent;
        margin-left: -1px;
        margin-right: -1px;
    }
}

// 田代バッテリーについて
#toppageAboutus {
    position: relative;
    margin-top: -100vh;
    .container {
        color: $themetextcolor;
        position: relative;
        .sticky-wrapper {
            position: relative;
            @include maxwidth(1024) {
                padding: 80px 0 60px;
                box-sizing: border-box;
            }
            .spacer {
                height: 35vh;
                @include maxwidth(1024) { height: 25vh; }
            }
            .sticky-content {
                @media screen and (min-width: 1025px) {
                    position: sticky;
                    top: 0;
                    left: 0;
                    height: 100vh;
                }
                @include maxwidth(1024) {
                    display: contents;
                }
                
                .head {
                    @include container(1140, 20);
                    z-index: 10;
                    height: 100%;
                    z-index: 10;
                    
                    .c-heading {
                        @media screen and (min-width: 1025px) {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translateX(-50%) translateY(-50%);
                        }
                        .sub {  }
                        .main { 
                            // padding-left: 40px;
                            @include maxwidth(1024) { padding-left: 0.5em; }
                         }
                    }
                }

                .bg-media { 
                    --bgmedia-color: rgba(0, 0, 0, 0.4);
                    --bgmedia-filter-blur: 0px;
                    @include maxwidth(1024) {
                        --bgmedia-color: rgba(0, 0, 0, 0.6);
                        --bgmedia-filter-blur: 4px;
                    }

                    @include absolute_centering;
                    &::before, &::after {
                        content: "";
                        @include absolute_centering;
                        z-index: 2;
                    }
                    &::before {
                        background-color: var(--bgmedia-color);
                        mix-blend-mode: multiply;
                    }
                    &::after {
                        backdrop-filter: blur(var(--bgmedia-filter-blur));
                        -webkit-backdrop-filter: blur(var(--bgmedia-filter-blur));
                    }
                    .video {
                        @include absolute_centering;
                        z-index: 1;
            
                        video {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .poster {
                        height: 100%;
            
                        &>img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }
            }
            .body {
                @include container(1140, 20);
                z-index: 8;
                padding-right: 45px;
                box-sizing: border-box;
                display: flex;
                justify-content: flex-end;
                height: 100%;
                z-index: 5;
                margin-top: 35vh;

                @include maxwidth(1024) {
                    padding-right: 0px;
                    display: block;
                    margin-top: 30px;
                }
        
                &__inner {  }
        
                .text {
                    @include f_all(15);
                    font-weight: 500;
                    line-height: 1.8;
                    text-align: center;

                    @media screen and (min-width: 769px) {
                        br.sp { display: none !important; }
                    }
                }
                
                .c-buttons { margin-top: 40px; }
                
                .c-button {
                    &__link {
                        background-color: transparent;
                        border: solid 1px;
                        transition: 300ms;
                        &.change { background-color: $basetextcolor; }
                    }
                }
            }
        }
    }
    .bands {
        @include printBand($basecolor);
        // z-index: 5;
        z-index: 2;
        .band {  }
    }
}

@keyframes shine {
    from { background-position: 100% 50%; }
    to { background-position: 0% 50%; }
}

// サービス内容
@keyframes toppageServiceTopImage {
    0% {
        transform: scaleX(0%);
        transform-origin: right 50%;
    }
    50% {
        transform: scaleX(100%);
        transform-origin: right 50%;
    }
    51% {
        transform: scaleX(100%);
        transform-origin: left 50%;
    }
    100% {
        transform: scaleX(0%);
        transform-origin: left 50%;
    }
}
#toppageService {
    margin-top: 120px;
    @include maxwidth(1024) { margin-top: 180px; }
    background-color: $basetextcolor;
    position: relative;
    z-index: 1;
    .container {
        position: relative;
        .top-image {
            position: absolute;
            top: -120px;
            right: 0;
            width: (1280 / 1440 * 100vw);
            height: 350px;
            z-index: 11;
            overflow: hidden;
            @include maxwidth(768) {
                width: calc(100% - 40px);
                height: 200px;
            }
            &>img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            &.js-target {
                &:after {
                    content: "";
                    @include absolute_centering;
                    z-index: 1;
                    // background-color: $themecolor;
                    background-color: $basetextcolor;
                    transform: scaleX(0%);
                    transform-origin: right 50%;
                }
                &>img {
                    opacity: 0;
                    transform: scale(1.2);
                    transition: transform 1000ms 500ms, opacity 0ms 500ms;
                }
                &.act {
                    &::after { animation: toppageServiceTopImage 1000ms ease-in-out forwards; }
                    &>img { opacity: 1; transform: scale(1); }
                }
            }
        }
        &__inner {
            color: $themetextcolor;
            padding: 350px 65px 120px;
            @include maxwidth(768) {
                padding: 160px 15px 80px;
            }
            box-sizing: border-box;
            position: relative;
            z-index: 10;
            .head {
            }
            .body {
                margin-top: 30px;
                @include maxwidth(768) { margin-top: 24px; }
                .text {
                    @include f_all(15);
                    @include maxwidth(768) { @include f_all(14); }
                    font-weight: 500;
                    line-height: 1.8;
                    @media screen and (min-width: 1025px) {
                        text-align: center;
                    }
                }
                .service-list {
                    margin-top: 50px;
                    @include maxwidth(768) { margin-top: 35px; }
                    display: flex;
                    justify-content: center;
                    flex-wrap: wrap;
                    gap: 1rem 50px;
                    @include maxwidth(1024) {
                        flex-direction: column;
                        justify-content: initial;
                        gap: 1rem;
                    }
                    &.js-target {
                        li {
                            opacity: 0;
                            transform: translateY(20px);
                            transition: 1000ms;
                        }
                        &.act {
                            li {
                                opacity: 1;
                                transform: translateY(0px);
                                @for $i from 0 to 4 {
                                    &:nth-child(#{$i + 1}) {
                                        transition-delay: #{$i * 100}ms;
                                    }
                                }
                            }
                        }
                    }
                    li {
                        @include f_all(20);
                        font-weight: bold;
                        line-height: 1.3;
                        counter-increment: service-list;
                        display: inline-flex;
                        align-items: center;
                        flex-direction: column;
                        gap: 20px;
                        min-width: 240px;
                        @include maxwidth(1280) {
                            flex-direction: row;
                            flex-basis: calc(50% - 40px);
                        }
                        @include maxwidth(1024) {
                            display: flex;
                            min-width: initial;
                            flex-direction: row;
                            align-items: flex-start;
                            gap: 15px;
                        }
                        .idx {
                            display: block;
                            box-sizing: border-box;
                            position: relative;
                            @media screen and (min-width: 1025px) {
                                @include f_all(32);
                                font-weight: bold;
                                padding-bottom: 5px;
                            }
                            @include maxwidth(1024) {
                                display: flex;
                                align-items: center;
                                gap: 10px;
                            }
                            &::after {
                                content: "";
                                display: block;
                                width: 15px;
                                height: 2px;
                                background-color: $accentcolor;
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                right: 0;
                                margin: auto;
                                @include maxwidth(1024) {
                                    flex-shrink: 0;
                                    width: 5px;
                                    height: 5px;
                                    position: static;
                                }
                            }
                        }
                        .title {
                            @media screen and (min-width: 1025px) {
                                @include flex_centering;
                                text-align: center;
                                min-height: 2em;
                            }
                            // @include maxwidth(1024) {
                            @include maxwidth(1280) {
                                br { display: none; }
                            }
                        }
                    }
                }
                .c-buttons {
                    max-width: 510px;
                    width: 100%;
                    margin: 50px auto 0;
                    gap: 13px 10px;
                    @include maxwidth(1280) {
                        max-width: none;
                    }
                    @include maxwidth(768) {
                        max-width: 100%;
                        width: auto;
                        margin: 40px 0 0;
                        gap: 5px;
                    }
                }
                .c-button {
                    flex-basis: calc(50% - 5px);
                    @include maxwidth(768) { flex-basis: 100%; }
                    &__link {
                        min-width: initial;
                        border: solid 1px;
                        background-color: transparent;
                    }
                    &:nth-child(3),&:nth-child(4){
                        flex-basis: 100%;
                    }
                }
            }
        }

        .bg-image {
            @include absolute_centering;
            &::after {
                content: "";
                @include absolute_centering;
                background-color: rgba($basetextcolor, 0.6);
                backdrop-filter: blur(2px);
                -webkit-backdrop-filter: blur(2px);
            }
            .image {
                display: block;
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-position: center center;
                background-size: cover;
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
            }
        }
    }
    .l-foot {
        padding: 110px 0 210px;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        @include maxwidth(768) {
            padding: 50px 0;
        }
        .swiper {
            &-wrapper {
            }
            &-slide {
                width: 365px;
                @include maxwidth(768) { width: 250px; }
                &__inner {
                    padding-top: 100%;
                    box-sizing: border-box;
                    position: relative;
                    &>img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
        .move-text {
            color: $themetextcolor;
            @include ff_en;
            font-size: 64px;
            white-space: nowrap;
            @include maxwidth(1440) {
                font-size: clamp(40px, (64 / 1440 * 100vw), 64px);
            }
            // padding-bottom: 0.25em;
            overflow: hidden;
            // background-image: linear-gradient(
            //     70deg,
            //     $themetextcolor 45%, 
            //     $accentcolor 50%,
            //     $themetextcolor 55% 
            // );
            // color: transparent;
            // background-size: 500% 500%;
            // background-clip: text;
            // -webkit-background-clip: text;
            // animation: shine 5s infinite ease-in;
            position: absolute;
            left: 0;
            right: 0;
            &.start {
                top: -0.45em;
                padding-left: 1em;
                @include maxwidth(1024) {
                    padding-left: 0;
                    &>span {
                        padding-left: 1em;
                        padding-right: 2em;
                    }
                }
                @include maxwidth(768) {
                    &>span {
                        padding-left: 4em;
                    }
                }
                &>span { }
            }
            &.end {
                bottom: calc(100px - 0.25em);
                text-align: right;
                padding-right: 1em;
                @include maxwidth(1024) {
                    text-align: left;
                    padding-right: 0;
                    &>span {
                        padding-left: 2em;
                        padding-right: 1em;
                    }
                }
                @include maxwidth(768) {
                    bottom: -0.5em;
                    &>span {
                        padding-left: 4em;
                        padding-right: 2em;
                    }
                }
                &>span {
                }
            }
            .mt { 
                display: inline-block;
                box-sizing: border-box;
            }
            &.js-target {
                .char {
                    display: inline-block;
                    overflow: hidden;
                    padding-bottom: 0.25em;
                    &>span {
                        display: inline-block;
                        opacity: var(--opacity, 0);
                        transform: translateX(var(--x, -105%));
                        transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1);
                        transition-delay: calc(var(--char-index) * 20ms);
                    }
                }
                &.act {
                    .char {
                        &>span {
                            --x: 0%;
                            --opacity: 1;
                        }
                    }
                }
            }
            // .txt {
            //     display: inline-flex;
            //     flex-wrap: nowrap;
            //     &>span {
            //     }
            // }
        }
    }

    .bands {
        @include printBand($accentcolor);
        flex-direction: row-reverse;
        .band {
            clip-path: polygon(0 90px, 100% 0, 100% 100%, 0% 100%);
        }
    }
}

// 採用
@keyframes toppageRecruitTopImage {
    0% {
        transform: scaleX(0%);
        transform-origin: left 50%;
    }
    50% {
        transform: scaleX(100%);
        transform-origin: left 50%;
    }
    51% {
        transform: scaleX(100%);
        transform-origin: right 50%;
    }
    100% {
        transform: scaleX(0%);
        transform-origin: right 50%;
    }
}
#toppageRecruit {
    scroll-margin-top: -50vh;
    margin-top: -15px;
    // padding-bottom: 10vh;
    background-color: $accentcolor;
    position: relative;
    @include maxwidth(768) {
        margin-top: 0;
        // padding-top: 55px;
    }
    .container {
        position: relative;
        @include maxwidth(768) { padding-top: 60px; }
        .top-image {
            position: absolute;
            top: 0;
            left: 0;
            width: (1280 / 1440 * 100vw);
            height: 350px;
            z-index: 11;
            overflow: hidden;
            @include maxwidth(1024) {
                width: calc(100% - 40px);
                height: 200px;
            }
            @include maxwidth(768) {
                // top: -40px;
            }
            &>img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            &.js-target {
                &::after {
                    content: "";
                    @include absolute_centering;
                    background-color: $basetextcolor;
                    z-index: 1;
                    transform: scaleX(0%);
                    transform-origin: left 50%;
                    transition: opacity 300ms;
                }
                &>img {
                    opacity: 0;
                    transform: scale(1.2);
                    clip-path: inset(0 0 0 0);
                    transition: transform 1000ms 500ms, opacity 0ms 500ms, clip-path 1000ms;
                }
                &.act {
                    &::after { animation: toppageRecruitTopImage 1000ms ease-in-out forwards; }
                    &>img { opacity: 1; transform: scale(1); }
                    // 画像をはけさせる
                    &.drain > img { clip-path: inset(0 100% 0 0); }
                    &.drain::after { opacity: 0; }
                }
            }
        }
        .sticky-wrapper {
            position: relative;
            .sticky-content {
                position: sticky;
                top: 0;
                left: 0;
                height: 100vh;
                .bg-image {
                    position: absolute;
                    inset: 40px;
                    @media screen and (max-height: 600px) and (min-width: 769px) {
                        inset: 20px 15px;
                    }
                    @include maxwidth(768) {
                        inset: 20px 0 0 0;
                    }
                    &::after {
                        content: "";
                        @include absolute_centering;
                        background: rgba(0, 0, 0, 0.60);
                        backdrop-filter: blur(2px);
                        -webkit-backdrop-filter: blur(2px);
                    }
                    .image {
                        display: block;
                        width: 100%;
                        height: 100%;
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                        filter: grayscale(100%);
                        -webkit-filter: grayscale(100%);
                    }
                }
            }
            .docs {
                color: $themetextcolor;
                // margin-top: -50vh;
                // padding-bottom: 25vh;
                // margin-top: -20vh;
                padding-bottom: 25vh;
                position: relative;
                z-index: 10;
                &__inner {
                    @include container(1140, 20);
                    @include maxwidth(768) {
                        margin-left: 10px;
                        margin-right: 10px;
                    }
                    .head {  }
                    .body {  }
                }

                .c-heading { 
                    .sub{
                        background-color: $accentcolor;
                    }
                    .main{
                        .row{
                            padding-left: 40px;
                            @include maxwidth(768) {
                                padding-left: 24px;
                            }
                        }
                    }
                 }

                .text {
                    @include f_all(15);
                    font-weight: 500;
                    line-height: 1.8;
                    text-align: center;
                    margin-top: 25px;
                    max-width: 480px;
                    width: 100%;
                    margin-left: auto;
                    margin-right: auto;
                    
                    @include maxwidth(768) {
                        margin-top: 20px;
                    }

                    @media screen and (min-width: 769px) {
                        br.sp { display: none; }
                    }
                }

                .recruit-buttons {
                    margin-top: 57px;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 10px;
                    @include maxwidth(768) {
                        gap: 5px;
                        margin: 30px 5px 0px;
                    }
                }

                .recruit-button {
                    flex: calc((100% - (10px * 2)) / 3);
                    &:nth-of-type(1),
                    &:nth-of-type(2) {
                        flex: calc((100% - 10px) / 2);
                    }
                    @include maxwidth(768) { flex: 100% !important; }
                    &.js-target {
                        .c-button {
                            position: relative;
                            &::after{
                                content: '';
                                @include absolute_centering;
                                z-index: 10;
                                background-color: $themecolor;
                                transform: scaleX(0%);
                                transform-origin: left 50%;
                            }
                            &__link {
                                opacity: 0;
                                transition-delay: 500ms;
                            }
                        }
                        &.act {
                            .c-button {
                                &::after { animation: toppageRecruitTopImage 1000ms ease-in-out forwards; }
                                &__link { opacity: 1; }
                            }
                        }
                    }
                    &__link {
                        @include flex_centering;
                        padding: 10px;
                        box-sizing: border-box;
                        min-height: 240px;
                        @include maxwidth(768) {
                            height: calc(240 / 768 * 100vw);
                            min-height: 120px;
                        }
                        position: relative;
                        .c-button {
                            @include maxwidth(768) { height: 100%; }
                        }
                        .c-button__link {
                            position: relative;
                            z-index: 5;
                            border: solid 1px;
                            background-color: transparent;
                            @include maxwidth(768) {
                                border: none;
                                min-width: initial;
                                flex-direction: row-reverse;
                                gap: 8px;
                                &::before { background-color: rgba($accentcolor, 0.7); }
                                &::after {
                                    position: static;
                                    margin: 0;
                                }
                            }
                        }
                        .image {
                            @include absolute_centering;
                            background-repeat: no-repeat;
                            background-position: center center;
                            background-size: cover;
                            &::before {
                                content: "";
                                @include absolute_centering;
                                background: $themecolor;
                                mix-blend-mode: screen;
                            }
                            &::after {
                                content: "";
                                @include absolute_centering;
                                background: rgba($themecolor, 0.60);
                                mix-blend-mode: multiply;
                                transition: 300ms;
                            }
                        }

                        @media (any-hover: hover) {
                            &:hover {
                                .c-button__link {
                                    &::before {
                                        transform: scaleX(100%);
                                        transform-origin: left 50%;
                                    }
                                }
                                .image {
                                    &::before {}
                                    &::after {
                                        background-color: rgba($themecolor, 0.90);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .bands {
        @include printBand($basecolor);
        // z-index: 15;
        .band {  }
    }
}

// 新着情報
#toppageNewstopics {
    padding: 60px 0;
    box-sizing: border-box;
    position: relative;
    @include maxwidth(768) {
        padding: 40px 0 50px;
    }
    .container {
        @include container(1140, 70);
        @include maxwidth(768) {
            max-width: 100%;
            width: auto;
            margin: 0 15px;
        }
        .head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 2rem;
            @include maxwidth(1024) {
                justify-content: center;
            }
            .c-heading {
                @media screen and (min-width: 1025px) {
                    flex-shrink: 0;
                    align-items: flex-start;
                    
                    .main { text-align: left; }
                }
            }
            .c-button {
                @include maxwidth(1024) { display: none; }
            }
        }
        .body {
            margin-top: 40px;
            @include maxwidth(768) { margin-top: 20px; }
            .topics-headline {
                .headline-items {
                    &.js-target {
                        .headline-item {
                            opacity: 0;
                            transform: translateY(1rem);
                            transition: 1000ms;
                        }
                        &.act {
                            .headline-item {
                                opacity: 1;
                                transform: translateY(0rem);
                                @for $i from 0 to 3 {
                                    &:nth-child(#{$i + 1}) {
                                        transition-delay: #{$i * 0.15}s;
                                    }
                                }
                            }
                        }
                    }
                }
                .headline-item {
                    &__link {
                        .date {  }
                        .terms {  }
                        .title {  }
                    }
                }
            }
            .c-buttons {
                @media screen and (min-width: 1025px) {
                    display: none;
                }
                margin-top: 20px;
            }
        }
    }
}

// === Subpage

// 見出しビジュアル
#subpageHeadingVisual {
    position: relative;
    figure {
        height: 200px;
        @include maxwidth(768) { height: 160px; }
        &::before, &::after {
            content: '';
            @include absolute_centering;
        }
        &::before {
            background-color: rgba($themecolor, 0.30);
            mix-blend-mode: overlay;
        }
        &::after {
            background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.25) 100%);
        }
        &>img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

// パンくずリスト
#subpageTopicpath {
    margin-top: 28px;
    position: relative;
    @include maxwidth(768) { margin-top: 1rem; }
    .container {
        @include container(1140, 20);
        @include maxwidth(768) {
            margin-left: 15px;
            margin-right: 15px;
        }
        ul {
            @include f_all(14);
            font-weight: bold;
            line-height: 1.5;
            li {
                display: inline-flex;
                align-items: center;
                &::after{
                    content: '';
                    display: block;
                    width: 8px;
                    height: 13px;
                    background: url(../images/arrow-black.svg) no-repeat center / contain;
                    margin: 1px 0.5em 0;
                }
                &:last-of-type::after {
                    display: none;
                }
            }
        }
    }
}

// 大見出し
#subpageHeading {
    margin-top: 40px;
    position: relative;
    @include maxwidth(786) { margin-top: 30px; }
    .container {
        .c-heading {
            .sub {
                color: $themetextcolor;
                background-color: $accentcolor;
            }
            .main {
                @include f_all(40);
                @include maxwidth(768) { @include f_all(32); }
            }
        }
    }
}

// コンテンツラッパー
#subpageContent {
    margin: 50px 0 100px;
    position: relative;
    @include maxwidth(768) { margin: 40px 0; }
    .container {
        @include container(900, 30);
        box-sizing: border-box;
        @include maxwidth(1050) { padding-right: 40px; }
        @include maxwidth(768) {
            padding-right: 0;
            margin-left: 20px;
            margin-right: 20px;
        }
        .default {
            @include contentdefault;
            @include eachcss;
        }

        // シングルページの記事情報
        .block-info {
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 10px 30px;
            @include maxwidth(768) { gap: 8px; }
            .block-terms {
                @include f_all(13);
                font-weight: 500;
                display: flex;
                flex-wrap: wrap;
                gap: 0.4em 0.9em;
                .term {
                    text-decoration: none !important;
                    display: inline-flex;
                    align-items: center;
                    gap: 6px;
                    &::before {
                        content: "";
                        display: block;
                        width: 6px;
                        height: 6px;
                        border-radius: 6px;
                        background-color: $accentcolor;
                        margin-top: 0.1em;
                    }

                    @media (any-hover: hover) {
                        &:hover {
                            text-decoration: underline !important;
                        }
                    }
                }
            }
        }
    }
}

// ページャー
.pager {
    text-align: center;
    margin: 40px 0;
    @include f_all(13);
    font-weight: 500;
    a,
    span {
        display: inline-block;
        margin: 0 0 0.25em 0.75em;
        min-width: 3em;
        padding: 1em;
        box-sizing: border-box;
        background-color: mix($basetextcolor, $basecolor, 0.1);
        border-radius: 5px;
    }
    .current {
        color: $themetextcolor;
        background-color: $themecolor;
    }
}

// 月別アーカイブ
.monthly_archive_link {
    @include container(800, 10);
    margin-top: 50px;
    @include f_all(13);
    font-weight: 500;
    a.show_archive_links {
        display: block;
        width: 200px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: mix($basetextcolor, $basecolor, 0.1);
        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: mix($basetextcolor, $basecolor, 0.05);
                padding: 7px 0;
                border-radius: 15px;
            }
        }
    }
}