html,
body {
    color: #000000;
    font-family: zen-kaku-gothic-new, sans-serif;
    font-weight: 400;
    font-style: normal;
    width: 100%;
    height: auto;
    font-size: min(3.73vw, 16px);
    scroll-behavior: smooth;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background: #FF0000;
}

a {
    text-decoration: none;
    color: inherit;
    height: 100%;
    width: fit-content;
}

.futura_book {
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.futura_demi {
    font-family: futura-pt, sans-serif;
    font-weight: 600;
    font-style: normal;
}

.helvetica {
    font-family: helvetica-neue, sans-serif;
    font-weight: 500;
    font-style: normal;
}

h2 {
    font-family: gazzetta-variable, sans-serif;
    font-variation-settings: "wght" 400;
    font-weight: 400;
    line-height: 1;
}

p {
    text-align: justify;
}

.red {
    color: #FF0000;
}

#noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.2;
    overflow: hidden;
}

video {
    pointer-events: none;
    touch-action: none;
}

.sp {
    display: none;
}

.mouse_stalker {
    border-radius: 50%;
    position: fixed;
    transition: all 0.3s ease-out;
    transition-timing-function: ease-out;
    z-index: 9998;
    pointer-events: none;
}

.mouse_stalker_s {
    background: #000000;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    z-index: 9999;
}

.mouse_stalker_l {
    background: #FF0000;
    mix-blend-mode: difference;
    top: -25px;
    left: -25px;
    width: 50px;
    height: 50px;
}

.mouse_stalker_l.is_active {
    top: -75px;
    left: -75px;
    width: 150px;
    height: 150px;
    transition: all .3s ease-out;
}



/******************************
ヘッダー 
******************************/
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;

    /* ▼ ふわっと切り替えるためのトランジション */
    transition:
        background-color 0.45s ease,
        backdrop-filter 0.45s ease,
        -webkit-backdrop-filter 0.45s ease,
        box-shadow 0.45s ease;
}

#header.bg {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.header_inner {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-family: futura-pt, sans-serif;
    font-weight: 600;
    font-size: min(2.54vw, 30px);
    letter-spacing: 0.05em;
}

#header h1 {
    width: 26vw;
    max-width: 300px;
    padding: 30px 0;
}

#header nav ul {
    display: flex;
    align-items: center;
    gap: min(2.08vw, 50px);
    padding-right: 4vw;
}

.nav_contact {
    color: #fff;
    position: relative;
    display: inline-block;
    height: 1.4em;
    width: 6.5em;
    text-align: center;
    align-content: center;
    transition: color .3s;
}

.nav_contact span {
    content: "";
    background: #000;
    height: 1.4em;
    width: 6.5em;
    border-radius: 9999px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
}

.modal {
    display: none;
}

.modal-cookie {
    width: 100vw;
    padding: 30px 60px 30px 30px;
    background-color: #0000009d;
    backdrop-filter: blur(5px);
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.5s ease, opacity 0.5s ease;
    pointer-events: none;
}

/* 表示状態 */
.modal-cookie.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.modal-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    line-height: 1.5;
}

.modal-cookie p a {
    color: #FF0000;
    border-bottom: 1px solid #FF0000;
}

a.cookie-close-btn {
    padding: 10px 30px;
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    transition: all .5s ease;
    margin-left: 40px;
    text-wrap: nowrap;
}

@media (any-hover: hover) {
    a.cookie-close-btn:hover {
        background-color: #FF0000;
        opacity: 1;
    }
}

/******************************
キービジュアル
******************************/
.kv_area {
    position: relative;
    padding-top: var(--header-height);
    width: 100%;
    height: 100dvh;
}

#world {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

span.kv_line {
    content: "";
    display: inline-block;
    background: #000;
    position: absolute;
    z-index: 0;
}

span.kv_line.beside {
    width: 100%;
    height: 1px;
    translate: -100% 0;
    animation: beside_line forwards 0.8s 1 ease 2s normal;
}

span.kv_line.vertical {
    width: 1px;
    height: 100vh;
    bottom: 0;
    right: 7%;
    translate: 0 100%;
    animation: vertical_line forwards 0.6s 1 ease 2.6s normal;
}

@keyframes beside_line {
    0% {
        translate: -100% 0;
    }

    100% {
        translate: none;
    }
}

@keyframes vertical_line {
    0% {
        translate: 0 100%;
    }

    100% {
        translate: none;
    }
}

.l_text_Area {
    position: relative;
    z-index: 2;
}

/***** タイピングテキスト *****/
#Ttext {
    z-index: 2;
    font-family: roboto, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: min(2.54vw, 30px);
    line-height: 1.2;
    text-align: right;
    padding-right: 9%;
    padding-top: 30px;
    height: calc(4.5em + 10px);
    margin-bottom: 20px;
    opacity: 0;
    animation: Ttext_opacity forwards 0.1s 1 ease 0.5s normal;
}

@keyframes Ttext_opacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

canvas {
    vertical-align: bottom;
}

/******************************
リード文
******************************/
.lead_content {
    background: #000;
    padding: min(9.1vw, 160px) 20px min(9.1vw, 160px) min(7.29vw, 140px);
}

.lead_text_wrap {
    font-weight: bold;
    font-size: min(3.13vw, 60px);
    color: #FF0000;
    line-height: 1.5;
}

.lead_text_wrap:not(:first-of-type) {
    margin-top: 2em;
}

.lead_text {
    position: relative;
    width: fit-content;
    overflow: hidden;
}

.lead_text::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: #FF0000;
}

.lead_text p {
    opacity: 0;
}

.lead_text_wrap span {
    color: #000;
    background: #FF0000;
}

.lead_text_wrap.move .lead_text:nth-child(1) p {
    animation: photoAnime forwards 0.1s 1 ease 0.5s normal;
}

.lead_text_wrap.move .lead_text:nth-child(1)::before {
    animation: barAnime forwards 0.8s 1 ease 0s normal;
}

.lead_text_wrap.move .lead_text:nth-child(2) p {
    animation: photoAnime forwards 0.1s 1 ease 0.8s normal;
}

.lead_text_wrap.move .lead_text:nth-child(2)::before {
    animation: barAnime forwards 0.8s 1 ease 0.3s normal;
}

.lead_text_wrap.move .lead_text:nth-child(3) p {
    animation: photoAnime forwards 0.1s 1 ease 1.1s normal;
}

.lead_text_wrap.move .lead_text:nth-child(3)::before {
    animation: barAnime forwards 0.8s 1 ease 0.6s normal;
}

.lead_text_wrap.move .lead_text:nth-child(4) p {
    animation: photoAnime forwards 0.1s 1 ease 1.4s normal;
}

.lead_text_wrap.move .lead_text:nth-child(4)::before {
    animation: barAnime forwards 0.8s 1 ease 0.9s normal;
}

.lead_text_wrap.move .lead_text:nth-child(5) p {
    animation: photoAnime forwards 0.1s 1 ease 1.7s normal;
}

.lead_text_wrap.move .lead_text:nth-child(5)::before {
    animation: barAnime forwards 0.8s 1 ease 1.2s normal;
}

.lead_text_wrap.move .lead_text:nth-child(6) p {
    animation: photoAnime forwards 0.1s 1 ease 2.0s normal;
}

.lead_text_wrap.move .lead_text:nth-child(6)::before {
    animation: barAnime forwards 0.8s 1 ease 1.5s normal;
}


@keyframes leadAnime {
    0% {
        left: 0;
        width: 0;
    }

    30% {
        left: 0;
        width: 100%;
    }

    51% {
        left: 0;
        width: 100%;
    }

    68% {
        left: 0;
        width: 100%;
    }

    100% {
        left: 100%;
        width: 0;
    }
}

/******************************
サービス
******************************/
.service_content {
    position: relative;
    z-index: 1;
    background: #FF0000;
}

.service_content h2 {
    font-size: min(26.25vw, 504px);
    padding-left: 0.15em;
    position: relative;
    height: 0.9em;
}

.service_content h2:after {
    content: "";
    display: block;
    width: 96%;
    height: 1px;
    background: #000;
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
}

/* .service_content.move h2:after {
    translate: 0;
} */

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

    100% {
        transform: translateY(0px);
    }
}

h2.anime_from_bottom.move>span>span {
    animation: showTextFromBottomTitle 0.3s forwards 0.2s;
}

.service_content_inner {
    position: relative;
}

.service_content .section_inner {
    position: absolute;
    left: 0;
    width: 100%;
    height: inherit;
}

.service_content .service_sticky:first-of-type {
    top: var(--header-height);
    height: calc(100dvh - var(--header-height));
}

.service_content .service_sticky:nth-of-type(1) .service_sticky_inner {
    background: #FF0000;
}

.service_content .service_sticky {
    height: 100dvh;
    position: sticky;
    top: 0;
}

.service_content .service_sticky:nth-of-type(2) {
    height: calc(100dvh - (var(--header-height) + min(7.28vw, 120px)));
    top: calc(var(--header-height) + min(7.28vw, 120px));
}

.service_content .service_sticky:nth-of-type(3) {
    height: calc(100dvh - (var(--header-height) + min(14.56vw, 240px)));
    top: calc(var(--header-height) + min(14.56vw, 240px));
}

.service_content .service_sticky:nth-of-type(4) {
    height: calc(100dvh - (var(--header-height) + min(21.84vw, 360px)));
    top: calc(var(--header-height) + min(21.84vw, 360px));
}

.service_content .service_sticky .service_sticky_inner .content {
    width: 100%;
    padding: 0 min(2.93vw, 60px);
    background: #FF0000;
}

.service_content .service_sticky:not(:first-of-type) .service_sticky_inner .content {
    border-top: 1px solid #000;
}

.service_content .service_sticky:nth-of-type(1) .service_sticky_inner .content {
    height: calc(100dvh - var(--header-height));
}

.service_content .service_sticky:nth-of-type(2) .service_sticky_inner .content {
    height: calc(100dvh - (var(--header-height) + min(7.28vw, 120px)));
}

.service_content .service_sticky:nth-of-type(3) .service_sticky_inner .content {
    height: calc(100dvh - (var(--header-height) + min(14.56vw, 240px)));
    padding-top: 0;
}

.service_content .service_sticky:nth-of-type(4) .service_sticky_inner .content {
    height: calc(100dvh - (var(--header-height) + min(21.84vw, 360px)));
    padding-top: 0;
}

.service_content h3 {
    font-size: min(6.76vw, 140px);
    display: flex;
    gap: 20px;
    padding: 11px 0;
    position: relative;
}

.service_content h3 .text_s {
    font-size: min(1.04vw, 14px);
}

.service_num {
    font-size: min(3.9vw, 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.3em;
}

.view_circle {
    position: absolute;
    top: 50%;
    right: 10px;
    translate: 0 -50%;
    border-radius: 50%;
    background: #fff;
    height: min(4.68vw, 60px);
    width: min(4.68vw, 60px);
    text-align: center;
    align-content: center;
    transition: all .3s;
}

.view_circle p {
    font-size: min(1.56vw, 16px);
    text-align: center;
}

.service_item_wrap {
    margin-left: 40px;
    display: flex;
    gap: min(1.95vw, 70px);
}

.service_img {
    width: 40%;
    max-width: 490px;
    aspect-ratio: 3 / 1.7;
    overflow: hidden;
    position: relative;
}

.service_img::before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    background: #000;
    position: absolute;
    left: 0;
    z-index: 1;
}

.service_img img {
    object-fit: cover;
    transition: all .3s;
    opacity: 0;
}

.service_img.move::before {
    translate: 0;
    animation: barAnime forwards 1s 1 ease 0s normal;
}

.service_img.move img {
    animation: photoAnime forwards 0.1s 1 ease .5s normal;
}

.service_item {
    width: 44.77%;
    max-width: 402px;
    font-size: min(1.56vw, 18px);
    line-height: 1.5;
    position: relative;
}

.service_item p.catch {
    font-size: min(5.33vw, 20px);
    font-weight: bold;
    margin-bottom: 0.5em;
}

.view_service_page {
    font-size: min(2.34vw, 30px);
    padding: 1em 10px 1em 0;
    width: fit-content;
    margin: 0 0 0 auto;
    opacity: 1;
    translate: 0;
    transition: all .3s;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1em;
}

.view_service_page a {}

.view_service_page p {
    text-wrap: nowrap;
    overflow: hidden;
    color: transparent;
    text-shadow: 0 -1.5em 0 #000, 0 0 0 #000;
    transition: text-shadow 0.3s;
}

.view_service_page .view_line {
    content: "";
    display: block;
    width: 40vw;
    position: relative;
    align-content: center;
    padding-right: 30px;
}

.view_service_page .view_line span {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #000;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

.view_service_page .view_line span::before,
.view_service_page .view_line span::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 1px;
    background: #000;
    position: absolute;
    right: 0;
    bottom: 0;
    translate: 0 50%;
    transform-origin: right center;
}

.view_service_page .view_line span::before {
    transform: rotate(45deg);
}

.view_service_page .view_line span::after {
    transform: rotate(-45deg);
}

.white_circle {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 50%;
    right: 100%;
    translate: 0 -50%;
    z-index: 0;
    opacity: 0;
    transition: all .3s;
}

@media (any-hover: hover) {
    .service_content .service_sticky .service_sticky_inner .content a:hover .view_circle {
        transform: scale(2);
        background: #0000002f;
        color: #fff;
    }

    .service_content .service_sticky .service_sticky_inner .content a:hover .service_img img {
        transform: scale(1.1);
    }

    .service_content .service_sticky .service_sticky_inner a:hover .white_circle {
        opacity: 1;
        right: 0;
    }

    .service_content .service_sticky .service_sticky_inner a:hover .view_service_page p {
        text-shadow: 0 0 0 #000, 0 1.5em 0 #000;
    }
}

/******************************
WORKS
******************************/
.works_content {
    background: #000;
    position: relative;
    overflow: hidden;
}

.works_content .works_content_title {
    width: 30vw;
    height: 23.2vw;
    text-align: center;
    align-content: center;
    position: absolute;
    bottom: 0;
    right: 0;
}

.works_content .works_content_title h2 {
    font-size: min(19.38vw, 372px);
    height: 0.8em;
}

.works_flex_wrap {
    display: flex;
    gap: 2px;
    padding: 2px;
}

.w_left_wrap {
    width: 70%;
}

.w_left_top {
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
}

.w_left_top .w_item:nth-of-type(1) {
    width: 58%;
}

.w_left_top .w_item:nth-of-type(2) {
    width: 42%;
}

.w_left_bottom {
    display: flex;
    gap: 2px;
}

.w_left_bottom_l {
    width: 72%;
}

.w_left_bottom_l_01 {
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
}

.w_left_bottom_l_01 .w_item:nth-of-type(1) {
    width: 40%;
}

.w_left_bottom_l_01 .w_item:nth-of-type(2) {
    width: 60%;
}

.w_left_bottom_l_02 {
    display: flex;
    gap: 2px;
}

.w_left_bottom_l_02 .w_item:nth-of-type(1) {
    width: 52%;
}

.w_left_bottom_l_02 .w_item:nth-of-type(2) {
    width: 48%;
}

.w_left_bottom_r {
    width: 28%;
}

.w_left_bottom_r .w_item {
    height: 100%;
}

.w_right_wrap {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.w_right_01,
.w_right_02 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.w_right_01 {
    height: 46%;
}

.w_right_01 .w_item {
    height: 50%;
}

.w_right_02 {
    height: 54%;
}

.w_right_02 .w_item:nth-of-type(1) {
    height: 42%;
}

.w_right_02 .w_item:nth-of-type(2) {
    height: 58%;
}

.w_item {
    overflow: hidden;
}

.w_title_area {
    height: 100%;
}

.w_item a {
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: all .3s;
}

.w_item img {
    vertical-align: bottom;
    object-fit: cover;
}

.w_title_area a {
    background: #6A6A6A;
    transition: all .3s;

}

@media (any-hover: hover) {
    .w_item a:hover {
        transform: scale(1.2);
    }
}

/******************************
ブログ
******************************/
.blog_content {
    position: relative;
    padding: 100px 0;
}

.blog_content_inner {
    background: #fff;
    width: 96%;
    padding: min(2.6vw, 30px) min(2.6vw, 70px) min(3.9vw, 50px);
    margin: 0 auto;
    position: relative;
    transition: all .3s;
}

.blog_page_link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-block;

}

.blog_link {
    display: inline-block;
}

.blog_alfred {
    display: block;
    font-size: 100px;
    font-family: "gazzetta-variable", sans-serif;
    font-variation-settings: "wght" 400;
    height: 0.5em;
    translate: -100% 0;
    opacity: 0;
    transition: all .5s;
}

.blog_alfred.move {
    translate: 0;
    opacity: 1;
}

.blog_title_wrap {
    position: relative;
    width: fit-content;
    padding-right: 20px;
}

.blog_content h2 {
    font-size: min(16.93vw, 256px);
    height: 1em;
    width: fit-content;
    transition: color .3s;
}

.splide {
    position: relative;
    filter: blur(10px);
}

.splide.move {
    animation: blur forwards 0.5s 1 ease 0.5s normal;
}

@keyframes blur {
    0% {
        filter: blur(10px);
    }

    100% {
        filter: blur(0px);
    }
}

.splide__slide {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
}

.splide__slide.is-active {
    margin-left: calc(5% + 0.5em);
}

.blog_link {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.active_slide_screen {
    position: absolute;
    top: 0;
    left: 33.8%;
    translate: 0 -35.2%;
    display: block;
    width: 21%;
    aspect-ratio: 2 / 3.4;
    background: #000;
    overflow: hidden;
    /* ←追加（画像がはみ出ないように） */
}

/* 下記を追加（クロスフェード用） */
.active_slide_screen img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease, transform .3s;
}

.splide img {
    object-fit: cover;
    transition: transform .3s;
}

.blog_title,
.active_title {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #000;
    color: #fff;
    padding: 0.2em 0.5em;
    margin: 1em;
}

.active_title {
    font-size: 20px;
}

.splide__arrows button svg {
    display: none;
}

.splide__pagination {
    display: none;
}

.splide__arrows {
    margin: 20px auto 0 33.8%;
    width: 21%;
    display: flex;
    justify-content: center;
    gap: 100px;
    position: relative;
    z-index: 2;
}

.splide__arrow {
    width: 10px;
    height: 20px;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.splide__arrow--prev::before,
.splide__arrow--prev::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 1px;
    border-radius: 9999px;
    background-color: #000000;
    transform-origin: 0 50%;
    transition: background-color .3s;
}

.splide__arrow--next::before,
.splide__arrow--next::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 10px;
    height: 1px;
    border-radius: 9999px;
    background-color: #000000;
    transform-origin: 100% 50%;
    transition: background-color .3s;
}

.splide__arrow--prev::before,
.splide__arrow--next::before {
    transform: rotate(45deg);
}

.splide__arrow--prev::after,
.splide__arrow--next::after {
    transform: rotate(-45deg);
}

button {
    border: none;
    background: none;
}

.archive .pagination {
    position: relative;
}

/* 数字の位置 */
.pagination {
    bottom: 0;
    left: 33.8%;
    width: 21%;
    height: 20px;
    position: absolute;
    text-align: center;
    z-index: 1;
    /* これがないとスライドの下になる */
}

/* 数字の色やサイズ調整 */
.pagination span {
    display: inline-block;
}

.focus_blog_content {
    position: absolute;
    top: min(4.42vw, 70px);
    left: 55.6%;
    width: 42%;
    max-width: 660px;
}

.focus_blog_title {
    font-weight: bold;
    font-size: min(2.08vw, 46px);
    padding: 0.2em 1em;
    background: #FF0000;
    width: fit-content;
    margin-bottom: min(0.78vw, 10px);
    color: #000;
}

.focus_blog_text {
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

@media (any-hover: hover) {
    .blog_content_inner:hover {
        background: #000;
        color: #fff;
    }

    .blog_content_inner:hover h2 {
        color: #fff;
    }

    .blog_content_inner:hover .splide__arrow--prev::before,
    .blog_content_inner:hover .splide__arrow--prev::after,
    .blog_content_inner:hover .splide__arrow--next::before,
    .blog_content_inner:hover .splide__arrow--next::after {
        background-color: #fff;
    }

    .splide__slide:hover img {
        transform: scale(1.1);
    }

    .active_slide_screen:hover img {
        transform: scale(1.1);
    }
}

/******************************
ニュース
******************************/
.news_content {
    padding: 80px 0 180px;
}

.news_content_inner {
    width: 96%;
    max-width: 1420px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.news_content h2 {
    font-size: min(16vw, 252px);
    height: 1em;
}

.news_page_view {
    font-size: min(2.6vw, 42px);
    position: relative;
    padding-right: 1em;
    display: inline-block;
    height: fit-content;
}

.news_page_view p {
    text-wrap: nowrap;
    overflow: hidden;
    color: transparent;
    width: fit-content;
    text-shadow: 0 -1.5em 0 #000, 0 0 0 #000;
    transition: text-shadow 0.3s;
}

.news_page_view .news_arrow_right {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    border: 1px solid;
    position: absolute;
    top: 50%;
    right: 0;
    translate: 100% -50%;
    transition: all .3s;
}

.news_page_view .news_arrow_right span {
    position: relative;
    display: inline-block;
    width: 36%;
    height: 1px;
    border-radius: 9999px;
    background-color: #000000;
    transition: all .3s;
}

.news_page_view .news_arrow_right span::before,
.news_page_view .news_arrow_right span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 30%;
    height: 1px;
    border-radius: 9999px;
    background-color: #000000;
    translate: 0 -50%;
    transform-origin: 100% 50%;
    transition: all .3s;
}

.news_page_view .news_arrow_right span::before {
    transform: rotate(45deg);
}

.news_page_view .news_arrow_right span::after {
    transform: rotate(-45deg);
}

@media (any-hover: hover) {
    .news_page_view:hover p {
        text-shadow: 0 0 0 #fff, 0 1.5em 0 #fff;
    }

    .news_page_view:hover .news_arrow_right {
        transform: scale(2);
        background: #0000002f;
        color: #fff;
        border: none;
    }

    .news_page_view:hover .news_arrow_right span {
        background-color: #fff;
    }

    .news_page_view:hover .news_arrow_right span::before,
    .news_page_view:hover .news_arrow_right span::after {
        background-color: #fff;
    }
}

.news_list_wrap {
    width: 78%;
    max-width: 994px;
    font-weight: bold;
    padding-top: min(2.08vw, 30px);
}

.news_list {
    border-bottom: 1px solid;
}

.news_list:first-of-type {
    border-top: 1px solid;
}

.news_list a {
    display: flex;
    align-items: center;
    gap: min(2.08vw, 46px);
    padding: 30px min(1.3vw, 40px);
    width: 100%;
    transition: all .3s;
}

.news_list_top_wrap {
    display: flex;
    align-items: center;
    gap: min(2.08vw, 46px);
}

.news_date {
    display: flex;
    align-items: center;
    gap: min(0.78vw, 16px);
}

.news_date span {
    writing-mode: vertical-rl;
}

.news_date_wrap {
    width: 3em;
}

.news_date_month {
    font-size: 12px;
    text-align: center;
}

.news_date_day {
    font-size: 32px;
    text-align: center;
}

.news_category {
    color: #fff;
    font-size: min(1.56vw, 14px);
    padding: 0.5em 3em;
    background: #000;
    border-radius: 9999px;
    text-wrap: nowrap;
    transition: all .3s;
}

.news_title {
    font-size: 18px;
    line-height: 1.2;
}

@media (any-hover: hover) {
    .news_list a:hover {
        color: #fff;
        background: #000;
    }

    .news_list a:hover .news_category {
        background: #fff;
        color: #000;
    }
}

/******************************
フッター
******************************/
footer {
    position: relative;
    z-index: 1;
    background: #000;
    color: #FF0000;
    overflow: hidden;
}

span.footer_line {
    content: "";
    display: inline-block;
    background: #FF0000;
    position: absolute;

}

span.footer_line.beside {
    width: 100%;
    height: 1px;
    top: 86px;
    left: 0;
    translate: -100% 0;
    transition: all .3s ease;
}

span.footer_line.vertical {
    width: 1px;
    height: 100%;
    top: 0;
    right: 26%;
    translate: 0 -100%;
    transition: all .3s ease;
}

span.footer_line.beside.move,
span.footer_line.vertical.move {
    translate: 0;
}

.footer_wrap {
    display: flex;
    justify-content: space-between;
    padding-top: 86px;
}

.footer_main_content {
    width: 74%;
    padding: min(6.84vw, 110px) 0 20px min(4.88vw, 90px);
}

.footer_main_flex {
    display: flex;
    gap: 5em;
    padding-bottom: 50px;
}

.footer_main_left {
    width: 50%;
    max-width: fit-content;
}

.footer_logo {
    width: min(28.32vw, 320px);
    margin-bottom: 38px;
}

address {
    font-style: normal;
    line-height: 1.5;
}

address p:not(:first-of-type) {
    margin-top: 1em;
}

.footer_main_content .footer_nav {
    font-size: min(3.91vw, 48px);
}

.footer_main_content .footer_nav li:not(:first-of-type) {
    margin-top: 0.6em;
}

li {
    list-style: none;
}

.footer_right_content {
    width: 26%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.footer_right_content .footer_nav li:not(:first-of-type) {
    margin-top: 2em;
}

.sns_wrap {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 4em;
}

.sns_wrap a {
    display: inline-block;
    background: #FF0000;
    border-radius: 50%;
    width: 36px;
    height: 36px;
}

/******************************
アニメーション
******************************/

/***** 全体的なinviewアニメーション *****/
.up {
    opacity: 0;
    translate: -200px 0;
}

.up.move {
    animation: up forwards 0.5s 1 ease 0.2s normal;
}

@keyframes up {
    0% {
        opacity: 0;
        translate: 0 20px;
    }

    100% {
        opacity: 1;
        translate: 0;
    }
}


/***** ホバーで下線 *****/
.hover_line {
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.hover_line::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background: #000;
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .2s;
}

@media (any-hover: hover) {
    .hover_line:hover::after {
        transform-origin: left top;
        transform: scale(1, 1);
    }
}

footer .hover_line::after {
    background: #FF0000;
}

/***** 左から出るテキスト *****/
.l_text_Area .l_text_wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    font-size: min(3.47vw, 52px);
}

.l_text_Area .l_text_wrap::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: #00ffdc;
}

.l_text_Area.move .l_text_wrap::before {
    animation: barAnime forwards 1s 1 ease 2s normal;
}

.l_text_Area .l_text_wrap .l_text {
    opacity: 0;
    font-weight: bold;
    padding: 0.2em 1em;
}

.l_text_Area.move .l_text_wrap .l_text {
    animation: photoAnime forwards 0.1s 1 ease 2.5s normal;
    background: #000;
    color: #FF0000;
}

@keyframes barAnime {
    0% {
        left: 0;
        width: 0;
    }

    50% {
        left: 0;
        width: 100%;
    }

    51% {
        left: 0;
        width: 100%;
    }

    68% {
        left: 0;
        width: 100%;
    }

    100% {
        left: 100%;
        width: 0;
    }
}

@keyframes photoAnime {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* テキスト下から上アニメーション */
@keyframes showTextFromBottom {
    0% {
        transform: translateY(100%);
    }

    50% {
        transform: translateY(-20%);
    }

    100% {
        transform: translateY(0px);
    }
}

.anime_from_bottom.is-preload {
    opacity: 0;
}

.anime_from_bottom {
    opacity: 1;
}

.anime_from_bottom>span {
    display: inline-block;
    overflow: hidden;
}

.anime_from_bottom>span>span {
    display: inline-block;
    transform: translateY(100%);
}

.anime_from_bottom.move>span>span {
    animation: showTextFromBottom 0.5s forwards;
}


/******************************
下層共通
******************************/
body.lower_page {
    position: relative;
    background: #191919;
}

body.lower_page .mouse_stalker_s {
    background: #000000;
}

body.lower_page .mouse_stalker_l {
    background: #191919;
}

.lower_page #header {
    color: #B2B2B2;
}

.lower_page .hover_line::after {
    background: #B2B2B2;
}

.lower_page footer .hover_line::after {
    background: #FF0000;
}

.lower_page .bg_video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
    touch-action: none;
}

.lower_page #header nav ul {
    padding-right: 0;
}

.lower_page main {
    padding-top: var(--header-height);
    color: #fff;
}

.title_sticky_area {
    display: flex;
}

.lower_title {
    width: 40%;
    align-self: flex-start;
    position: sticky;
    top: var(--header-height);
}

.lower_page h2 {
    font-size: min(39.06vw, 504px);
    line-height: 1;
    position: absolute;
    z-index: 1;
    padding-left: 5vw;
}

.lower_page .lower_title h2 {
    font-size: min(30.85vw, 504px);
    position: relative;
}

.lower_page .lower_content {
    width: 60%;
    margin: 0 0 0 auto;
    padding: min(4.69vw, 100px) 5vw 0 0;
}

.lower_page footer {
    margin-top: 170px;
}

.custum_pagenation {
    margin-top: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: min(4.17vw, 48px);
}

.custum_pagenation span.page-numbers.current {
    color: #000;
    position: relative;
    z-index: 0;
}

.custum_pagenation span.page-numbers.current::before {
    content: "";
    width: 2em;
    height: 2em;
    display: block;
    border: 1px solid #fff;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
}

.custum_pagenation a {
    display: inline-block;
    position: relative;
    transition: all .3s;
    z-index: 0;
}

.custum_pagenation a::before {
    content: "";
    width: 2em;
    height: 2em;
    display: block;
    border: 1px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    transition: all .3s;
    z-index: -1;
}

@media (any-hover: hover) {
    .custum_pagenation a:hover {
        color: #000;
    }

    .custum_pagenation a:hover::before {
        background: #fff;
    }
}

.single_content {
    width: 90%;
    margin: 120px auto 0;
}

.single_content_top {
    display: flex;
    gap: 0.5em;
    align-items: center;
    margin-bottom: 3em;
}

.single_content_top .single_page_line {
    content: "";
    display: inline-block;
    width: 4em;
    height: 1px;
    background: #fff;
}

.single_content_area {
    background: #fff;
    padding: min(3.91vw, 68px);
    position: relative;
    color: #000;
}

.lower_page .single_content .news_date,
.lower_page .single_content .blog_date {
    display: flex;
    font-size: min(1.82vw, 24px);
    color: #686868;
    margin-bottom: 0.5em;
}

.lower_page .single_content .blog_date span:first-of-type {
    padding-right: 1em;
    position: relative;
}

.lower_page .single_content .blog_date span:first-of-type:after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 100%;
    background: #686868;
    position: absolute;
    top: 0;
    right: 0.5em;
    translate: 50% 0;
}

.lower_page .single_content h2 {
    font-family: zen-kaku-gothic-new, sans-serif;
    font-size: min(3.13vw, 42px);
    font-weight: bold;
    border-bottom: 1px solid #707070;
    background: none;
    color: #000;
    padding: 0 0 min(2.6vw, 40px) 0;
    margin: 0;
    line-height: 1.2;
    position: relative;
}

.single_page_content {
    margin-top: min(2.6vw, 40px);
    line-height: 1.5;
    font-size: min(2.08vw, 20px);
}

.single_page_content p:not(:first-child),
figure.wp-block-image.size-large {
    margin-top: 1em;
}

figure.wp-block-image.size-large {
    width: 100%;
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
}

figure.wp-block-image.size-large img {
    object-fit: contain;
    max-height: 400px;
    width: 100%;
    height: 100%;
}

.single_navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    position: relative;
}

.single_navigation .nav_back {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.single_navigation a {
    transition: color .3s;
}

@media (any-hover: hover) {
    .single_navigation a:hover {
        color: #000;
    }
}

/******************************
404
******************************/
.page_404 {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    padding-top: 100px;
}

.page_404 h2 {
    font-size: 30px;
    position: relative;
    padding-left: 0;
    font-family: zen-kaku-gothic-new, sans-serif;
}

.page_404 p {
    text-align: center;
    padding: 50px 0;
    line-height: 2;
}

.page_404 .hover_line::after {
    height: 2px;
    background: #fff;
}