/*---------------------------------------------------------
                共通css
---------------------------------------------------------*/
:root {
    --base-color: #333;
    --text-color: #FFF;
    --text-sub-color: #A9A9A9;
    --bg-color: #F8F8F8;
    --bd-color: #A9A9A9;
    --sub-font: "Inter", sans-serif;

    --bar01X: 0;
    --bar02X: 0;
    --bar03X: 0;

    --barYBefore: 0;
    --barYAfter: 0;

    --tick-duration: 40s;

    --recruit-en-font: "Alumni Sans", sans-serif;
    --recruit-doto-font: "Doto", sans-serif;
    --recruit-base: #E5DDD3;
    --recruit-green: #34B69B;
    --recruit-red: #FF6453;
    --recruit-yellow: #FADA7E;
    --recruit-blue: #B1CEE8;
    --recruit-pink: #FFAAB8;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-repeat: no-repeat;
}


a {
    display: inline-block;
    text-decoration: none;
    transition: 0.3s;
}

html {
    min-height: 100lvh;
    color: var(--base-color);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: normal;
}

body {
    background-color: var(--base-color);
    background-size: contain;
    display: flex;
    flex-direction: column;
    min-height: 100lvh;
    overflow-x: hidden;
}

ul {
    list-style: none;
}

p {
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.05em;
}

main {
    background-color: var(--base-color);
    color: var(--text-color);
    transition: 1s;
}

.mainWrapper {
    transition: opacity .5s linear;
}

.mainWrapper.fadeOut {
    opacity: 0;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100svh;
}

button {
    background: transparent;
    border: none;
}

#scroll-lock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: transparent;
    touch-action: none;
    display: none;
}

/*---------------------------------------------------------
                タイトル
---------------------------------------------------------*/
h2.ttl {
    font-family: var(--sub-font);
    font-feature-settings: "palt";
    font-size: clamp(12px, 1.6vw, 24px);
    font-weight: bold;
    line-height: 1;
}

/*---------------------------------------------------------
                ページタイトル
---------------------------------------------------------*/
.pg_ttl {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: clamp(35px, 3.8vw, 70px);
    line-height: 1.2;
    letter-spacing: 0.05em;

}

.pg_ttl p {
    font-size: clamp(23px, 1.6vw, 25px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}

.pg_ttl .sp_only {
    display: none;
}

@media screen and (max-width:500px) {
    .pg_ttl .sp_only {
        display: block;
    }
}

/*---------------------------------------------------------
                ボタン
---------------------------------------------------------*/
.btn {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: fit-content;
    padding-right: 5px;
    color: var(--text-color);
    font-family: var(--sub-font);
    font-size: max(3.8vw, 32px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    transition: .3s;
    overflow: hidden;
}

.btn .txt {
    position: relative;
    z-index: 2;
}

.btn img,
.btn svg {
    display: block;
    width: clamp(17px, 2vw, 30px);
    transform: translateY(0.2em);
}

.btn svg path {
    transition: 1s;
}

.btn .arrow {
    display: inline-block;
    transform: translate(-100%, 100%);
    opacity: 0;
    transition: .3s ease;
}

/* ボタンホバー（グリッチ） */
.btn .glitch {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.btn .glitch:before,
.btn .glitch:after {
    display: block;
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
    white-space: nowrap;
}

.btn .glitch:before {
    color: #00FFFF;
    z-index: -1;
}

.btn .glitch:after {
    color: #FF00FF;
    z-index: -2;
}

@media (hover: hover) and (pointer: fine) {

    .design_wrapper .work_container .work_area ul li a:hover .glitch:before,
    .btn:hover .glitch:before {
        animation: glitch-it1 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;
    }

    .design_wrapper .work_container .work_area ul li a:hover .glitch:after,
    .btn:hover .glitch:after {
        animation: glitch-it2 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;
    }

    .design_wrapper .work_container .work_area ul li a:hover .arrow,
    .work_wrapper .work_container .work_list li a:hover .arrow,
    .btn:hover .arrow {
        transform: translate(5px, -5px) !important;
    }
}

@keyframes glitch-it1 {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-4px, 0);
    }

    40% {
        transform: translate(-4px, -4px);
    }

    60% {
        transform: translate(0, 4px);
    }

    80% {
        transform: translate(4px, -4px);
    }

    to {
        transform: translate(4px, 4px);
    }
}

@keyframes glitch-it2 {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(4px, 0);
    }

    40% {
        transform: translate(-4px, 4px);
    }

    60% {
        transform: translate(4px, 4px);
    }

    80% {
        transform: translate(-4px, -4px);
    }

    to {
        transform: translate(0);
    }
}


/*---------------------------------------------------------
                グラデーション
---------------------------------------------------------*/
.gradation,
.menu_gradation,
.top_about_gradation,
.delay_gradation {
    opacity: 0;
}

.top_about_gradation {
    transform: translateY(.3em);
    margin-right: 0.1em;
}

.gradTextAnimation {
    opacity: 0;
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: fit-content;
}

.gradTextAnimation::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--grad-color01), var(--grad-color02));
    -webkit-background-clip: text;
    color: transparent;
    animation: textGradation 1.5s ease-in-out forwards;
}


.gradTextAnimation::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    object-position: right;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--grad-color01), var(--grad-color02));
    animation-name: boxGradation;
    animation-duration: .6s;
    animation-fill-mode: forwards;
    transition-timing-function: linear;
}

@keyframes textGradation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes boxGradation {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(200%);
    }
}


.gradation_img_wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.gradation_img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.gradation_img_wrap.imgGradation::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    object-position: right;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--grad-color01), var(--grad-color02));
    animation-name: imgGradation;
    animation-duration: .6s;
    animation-fill-mode: forwards;
    transition-timing-function: linear;
    opacity: 1;
}

@keyframes imgGradation {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(200%);
    }
}

/*---------------------------------------------------------
                ページネーション
---------------------------------------------------------*/
.pagination {
    margin-top: 80px;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 25px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}

.wp-pagenavi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.pagination a {
    color: #9E9E9E !important;
    opacity: 0.7;
    border: none !important;
    padding: 0 !important
}

.pagination span {
    border: none !important;
    padding: 0 !important;
}

.wp-pagenavi a,
.wp-pagenavi span {
    margin: 0 !important;
}


.pagination span.current,
.pagination a.page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    color: var(--text-color);
    border: none !important;
    padding: 0 !important;
}

.pagination span.current {
    background: var(--base-color);
    border-radius: 50%;
}

.previouspostslink,
.nextpostslink {
    opacity: 1 !important;
}

.pagination a .prev_btn,
.pagination a .next_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    color: var(--base-color);
    font-size: 32px;
}

/*---------------------------------------------------------
                モーダル
---------------------------------------------------------*/
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    display: none;
    width: 100%;
    height: 100%;
}

.modal .modal_bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #AFAFAF;
    opacity: .6;
}

.modal .modal_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    width: 90%;
    max-width: 1300px;
    height: 95%;
    background: var(--base-color);
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 16, 8, .25);
}

.modal .modal_inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px min(5%, 40px);
    color: var(--text-color);
}

.modal .modal_inner p.nowplaying {
    position: absolute;
    top: 3%;
    left: 3%;
    font-size: 16px;
}

.modal .modal_close {
    position: fixed;
    top: 5vh;
    right: calc((100% - min(90%, 1300px)) / 2 + 20px);
    z-index: 1;
    width: clamp(32px, 2.7vw, 40px);
    height: clamp(32px, 2.7vw, 40px);
    background-color: var(--text-color);
    border-radius: 50%;
    cursor: pointer;
}

.modal .modal_close::before,
.modal .modal_close:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: clamp(13px, 1.3vw, 20px);
    border-radius: 3px;
    background: var(--base-color);
}

.modal .modal_close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal .modal_close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/*---------------------------------------------------------
                下層ページMV
---------------------------------------------------------*/
.under_mv {
    position: relative;
    width: 100vw;
    height: 100svh;
}

.under_mv .bg_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

.under_mv .content {
    position: absolute;
    left: 5%;
    bottom: 20%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 90%;
}

.under_mv .content p {
    position: relative;
    color: var(--text-color);
}

.under_mv .content p.ttl {
    font-family: var(--sub-font);
    font-size: clamp(18px, 1.6vw, 28px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}

.under_mv .content .sub_ttl {
    margin-top: 0.3em;
    font-family: var(--sub-font);
    font-size: clamp(23px, 3.8vw, 120px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

@media screen and (max-width:990px) {
    .under_mv {
        height: 45svh;
        min-height: 600px;
    }

    .under_mv .content {
        bottom: 13%;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media screen and (max-width:500px) {
    .under_mv {
        min-height: 350px;
    }
}


/*---------------------------------------------------------
                TOP
---------------------------------------------------------*/
/* メインビュー */
.top_mv {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100svh;
}

.top_mv .bg_area {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

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

.top_mv .text_area {
    position: relative;
    z-index: 1;
    width: 100%;
}

.top_mv .text_area img {
    width: 100%;
}

.top_mv .scroll_bar_area {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

.top_mv .scroll_bar_area .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

.top_mv .scroll_bar_area .bar {
    position: relative;
    width: 1px;
    height: 10em;
    background-color: var(--text-color);
}

.top_mv .scroll_bar_area .bar img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    animation: circlemove 1.6s ease-in-out infinite,
        cirlemovehide 1.6s ease-out infinite;
    ;
}

@keyframes circlemove {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

@keyframes cirlemovehide {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1;
    }

    80% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
    }
}

.top_mv .scroll_bar_area p {
    color: var(--text-color);
    font-size: clamp(16px, 1.7vw, 24px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}

.top_container {
    padding-bottom: 200px;
}

/* 私たちについて */
.top_about {
    position: relative;
    width: 100vw;
    height: 300svh;
}

.top_about .scroll_area {
    position: sticky;
    top: 0;
    left: 0;
    width: 100vw;
    height: 99svh;
}

.top_about .scroll_area .content_box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: filter 0.3s ease;
}

.top_about .scroll_area .content_box .blur_box {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(50px);
    transition: backdrop-filter 0.3s ease, -webkit-mask-image 0.3s ease, mask-image 0.3s ease;
    pointer-events: none;
}

.top_about .scroll_area .content_box .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 95%;
    height: 100%;
}

.top_about .scroll_area .content_box .inner h1 {
    font-size: clamp(32px, 3.8vw, 80px);
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: 1s ease;
}

.top_about .scroll_area .content_box .inner h1.fadeIn {
    opacity: 1;
    transform: translateY(0);
}

/* .top_about .scroll_area .content_box .inner h1 span {
    filter: blur(8px);
    opacity: 0;
}

.top_about .scroll_area .content_box .inner h1 span.show {
    animation: textAnime .5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
} */



.top_about .btn .arrow {
    transform: translate(0, 0);
    opacity: 1;
}

@keyframes textAnime {
    0% {
        filter: blur(8px);
        opacity: 0;
    }

    50% {
        filter: blur(2px);
        opacity: 1;
    }

    100% {
        filter: blur(0);
        opacity: 1;
    }
}

.top_about .scroll_area .content_box .inner p {
    margin-top: 2.8em;
    font-size: clamp(14px, 1.25vw, 20px);
    text-align: center;
}

.top_about .scroll_area .content_box .inner a {
    margin-top: 1em;
    font-family: var(--sub-font);
    font-size: clamp(36px, 7vw, 80px);
    opacity: 0;
    transform: translateY(20px);
    transition: 1s ease;
    pointer-events: none;
}

.top_about .scroll_area .content_box .inner a.fadeIn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.top_about .scroll_area .content_box .inner a img {
    width: clamp(13px, 3.6vw, 40px);
    transform: translateY(0.1em);
}

/* カンパニー */
.top_company {
    position: relative;
    margin-top: 15%;
    width: 100vw;
    height: calc(100vh + 50px);
    overflow-x: hidden;
}

.top_company.vertical {
    min-height: 100vh;
    height: auto;
}

.top_company .grad_box {
    position: absolute;
    bottom: 0;
    z-index: 1;
    display: block;
    content: "";
    width: 100%;
    height: 150px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.top_company svg.horizontal {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
}

.top_company svg.vertical {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
}

.top_company.vertical svg.vertical {
    position: unset;
    top: unset;
    left: unset;
    transform: unset;
}

.top_company svg a {
    position: relative;
    z-index: 5;
}

.top_company svg a rect,
.top_company svg a g path,
.top_company svg a path {
    transition: .3s;
}

.top_company svg a:hover rect {
    fill: var(--base-color);
}

.top_company svg a:hover g path {
    fill: var(--text-color);
}

.top_company svg a:hover path {
    fill: var(--text-color);
}



/* 事業紹介 */
.top_solution {
    margin-top: 10%;
}

.top_solution .content {
    position: relative;
    width: 74vw;
    max-width: 1500px;
}

.top_solution .content .text_area {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4.3em;
}

.top_solution .content .text_area h3 {
    font-size: clamp(70px, 12.5vw, 200px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.top_solution .content .text_area p {
    width: 33.9vw;
}

.top_solution .content .bg_box {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
}

.top_solution .content .bg_box img {
    height: 100%;
    object-fit: cover;
}

/* コラム */
.top_column {
    margin-top: 200px;
}

.top_column h2 {
    font-size: 24px;
}

.top_column .content {
    margin: 0 auto;
    width: 80vw;
}

.top_column .content ul {
    display: flex;
    gap: 5em;
    margin-top: 5.8em;
}

.top_column .content ul li {
    width: calc((100% - 10em)/3);
}

.top_column .content ul li article {
    height: 100%;
}

.top_column .content ul li article a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.top_column .content ul li article a .img_box {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.top_column .content ul li article a .img_box img {
    width: 100%;
    object-fit: cover;
}

.top_column .content ul li article a .ttl_txt {
    margin-top: 12px;
}

.top_column .content ul li article a .ttl_txt p {
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    font-size: 16px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.05em;
    transition: .3s;
}

.top_column .content ul li article a:hover .ttl_txt p span {
    text-decoration: underline;
}

.top_column .content ul li article a .bottom {
    display: flex;
    justify-content: space-between;
}

.top_column .content ul li article a .date_txt {
    margin-top: 18px;
    font-family: var(--sub-font);
    color: var(--text-sub-color);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
}

.top_column .content ul li article a .bottom .btn img {
    width: 12px;
}

.top_column .content a.btn {
    margin: 1.5em 0 0 auto;
    justify-content: flex-end;
}

/* ニュース */
.top_news {
    margin-top: 250px;
}

.top_news h2 {
    font-size: 24px;
}

.top_news .content {
    margin: 0 auto;
    width: 80vw;
}

.top_news .content ul {
    margin: 7em 0 0 auto;
    width: 70vw;
}

.top_news .content ul li {
    padding: 35px 30px;
    border-bottom: 1px solid var(--text-sub-color);
}

.top_news .content ul li:first-of-type {
    border-top: 1px solid var(--text-sub-color);
}

.top_news .content ul li article a {
    display: flex;
    align-items: center;
    gap: 5em;
}

.top_news .content ul li article a .date_txt {
    min-width: 90px;
    color: var(--text-sub-color);
    font-family: var(--sub-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.top_news .content ul li article a .ttl_txt {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}

.top_news .content a.btn {
    margin: 1.5em 0 0 auto;
    justify-content: flex-end;
}

/* cv */
.top_cv {
    margin-top: 250px;
}

.top_cv .content {
    display: flex;
    flex-direction: column;
    gap: 12em;
    margin: 0 auto;
    width: 90vw;
}

.top_cv a.btn {
    flex-wrap: wrap;
    gap: 0.1em 20px;
    font-size: clamp(44px, 8.8vw, 140px);
}

.top_cv a.btn .arrow img {
    width: clamp(20px, 3.95vw, 70px);
}

.top_cv a.btn p {
    width: 100%;
    font-size: clamp(14px, 2.2vw, 48px);
}

@media screen and (max-width:990px) {

    /* 事業紹介 */
    .top_solution .content {
        width: 90vw;
    }

    .top_solution .content .text_area p {
        width: 44vw;
    }

    /* コラム */
    .top_column .content {
        width: 90vw;
    }

    .top_column .content ul {
        gap: 1.5em;
    }

    .top_column .content ul li {
        width: calc((100% - 3em) / 3);
    }

    /* ニュース */
    .top_news .content {
        width: 90vw;
    }

    .top_news .content ul {
        width: 80vw;
    }
}

@media screen and (max-width:768px) {

    /* 事業紹介 */
    .top_solution {
        margin-top: 0;
    }

    .top_solution .content .text_area p {
        width: 65vw;
    }

    /* コラム */
    .top_column {
        margin-top: 100px;
        height: auto;
    }

    .top_column .content ul {
        flex-direction: column;
        gap: 4em;
        margin-top: 32px;
    }

    .top_column .content ul li {
        width: 100%;
    }

    /* ニュース */
    .top_news {
        margin-top: 200px;
    }

    .top_news .content ul {
        width: 100%;
        margin-top: 32px;
    }

    .top_news .content ul li {
        padding: 20px 10px;
    }

    .top_news .content ul li article a {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
    }

    .top_news .content ul li article a .date_txt,
    .top_news .content ul li article a .ttl_txt {
        width: 100%;
    }

    .top_cv {
        margin-top: 200px;
    }
}

@media screen and (max-width:500px) {
    .top_solution {
        margin-top: 80px;
    }

    .top_about .scroll_area {
        height: 80vh;
    }

    /* mv */
    .top_mv .scroll_bar_area .bar {
        height: 7em;
    }

    /* カンパニー */
    .top_company.vertical {
        min-height: calc(100lvh + 50px);
    }

    .top_company.vertical svg.vertical {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        height: 100%;
    }

    /* 事業紹介 */

    .top_solution .content .text_area {
        gap: 0;
        margin: 8% auto 0;
        width: 100%;
    }

    .top_solution .content .text_area p {
        margin-top: 20px;
        width: 100%;
    }


    .top_solution .content .bg_box {
        right: 0;
        width: 30vw;
        min-width: 112px;
    }

    .top_solution .content .bg_box img {
        width: 100%;
        height: auto;
    }

    .top_solution a.btn {
        margin: 40px 0 0 auto;
    }



    /* ニュース */
    .top_news .content a.btn {
        margin-top: 2.2em;
    }
}

/*---------------------------------------------------------
            about btn
---------------------------------------------------------*/
.about_btn_area {
    margin-top: 200px;
}

.about_btn_area .box {
    padding: 7em 0;
    border-bottom: 1px solid var(--base-color);
}

.about_btn_area .box:nth-last-of-type {
    border-bottom: none;
}


.about_btn_area .box a.btn {
    margin-left: 5%;
    justify-content: space-between;
    width: clamp(310px, 50vw, 900px);
    font-size: clamp(32px, 4.8vw, 90px);
}

.about_btn_area .box a.btn .arrow img {
    width: clamp(25px, 3.6vw, 60px);
}

@media screen and (max-width:768px) {
    .about_btn_area {
        margin-top: 120px;
    }
}

@media screen and (max-width:500px) {
    .about_btn_area .box {
        padding: 5em 0;
    }
}

/*---------------------------------------------------------
            Who the IDR?!
---------------------------------------------------------*/
.who_wrapper {
    overflow-x: hidden;
}

.who_wrapper .under_mv .content p {
    color: var(--base-color);
}

.who_wrapper .int_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5%;
    padding: 0 5%;
    min-height: 100dvh;
}

.who_wrapper .int_container .int_title {
    font-family: var(--sub-font);
    font-size: clamp(38px, 10vw, 100px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0;
}

.who_wrapper .int_container .int_title span {
    display: block;
}

.who_wrapper .int_container .int_text {
    margin-top: 3.4em;
    font-size: clamp(14px, 1.25vw, 20px);
}

.who_wrapper .int_container .int_text span {
    display: block;
}

/* .who_wrapper .int_container {
    position: relative;
    overflow: hidden;
}

.who_wrapper .int_container .glitch-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.who_wrapper .int_container .content {
    position: relative;
    z-index: 1;
}

.who_wrapper .int_container p.line_text {
    font-size: clamp(14px, 1.25vw, 20px);
    text-align: center;
    transition: .3s;
    opacity: 0;
}

.who_wrapper .int_container p.line_text.active {
    opacity: 1;
}

.who_wrapper .int_container p:last-of-type {
    margin-top: 0.7em;
    font-size: clamp(30px, 3.8vw, 100px);
    line-height: 1.2;
}

.who_wrapper .int_container p:last-of-type span.char_main {
    opacity: 0;
    color: transparent;
}

.who_wrapper .int_container p:last-of-type .glitch span.char {
    position: relative;
    color: #FFF;
    transition: color 1s;
}

.who_wrapper .int_container p:last-of-type span.char {
    color: var(--text-color);
    opacity: 0;
    transition: opacity .6s cubic-bezier(0.77, 0, 0.175, 1);
}

.who_wrapper .int_container p:last-of-type span.char.is-active {
    opacity: 1;
}

.glitch .char[data-glitch] {
    --split: 50;
    position: relative;
    animation: glitch 2s ease-in-out forwards;
    transition: color 1s;
}

.who_wrapper .int_container p:last-of-type .glitch span.char.bg_wh {
    color: var(--base-color);
}

.glitch .char[data-glitch]::after,
.glitch .char[data-glitch]::before {
    content: attr(data-glitch);
    position: absolute;
    top: 9%;
    left: 0%;
    height: 100%;
    width: 100%;
    line-height: 1.2;
    -webkit-clip-path: var(--clip);
    clip-path: var(--clip);
    transition: color 1s;
}

.glitch .char[data-glitch]::after {
    z-index: -1;
    color: #00FFFF;
    transform: translate(calc(var(--shift) * 1%), 0);
    --clip: inset(0 0 calc(var(--split) * 1%) 0);
    text-shadow: calc(var(--shadow) * 1px) calc(var(--shadow) * 1px) #ff0000;
}

.glitch .char[data-glitch]::before {
    z-index: -1;
    color: #FF00FF;
    --clip: inset(calc((95 - var(--split)) * 1%) 0 0 0);
}

@keyframes glitch {
    0% {
        --split: 20;
        --shift: 15;
        --shadow: -2;
    }

    5% {
        --split: 30;
        --shift: 15;
        --shadow: -2;
    }

    10% {
        --split: 80;
        --shift: 10;
        --shadow: -2;
    }

    15% {
        --split: 55;
        --shift: 10;
        --shadow: -2;
    }

    20%,
    50%,
    100% {
        --split: 0;
        --shift: 0;
        --shadow: 0;
    }
} */

.who_wrapper .album_container {
    padding-top: 13.5em;
}

.who_wrapper .top_area {
    width: 90%;
    margin: 0 auto;
}

.who_wrapper .container_title {
    font-family: var(--sub-font);
    font-size: clamp(32px, 7vw, 80px);
    font-weight: 800;
    line-height: 1.2;
}

.who_wrapper .container_title span {
    display: block;
}

.who_wrapper .container_title .flex {
    display: flex;
    align-items: center;
    gap: clamp(10px, 3vw, 38px);
}

.who_wrapper .container_title .flex span {
    width: fit-content;
}

.who_wrapper .container_title svg {
    opacity: 0;
    transition: .3s .5s;
    width: clamp(22px, 4vw, 70px);
}


.who_wrapper .container_title .gradTextAnimation+svg {
    opacity: 1 !important;
}

.who_wrapper .container_title svg path {
    transition: 1s;
}

.who_wrapper .album_container h3 {
    margin: 1.5em 0;
    font-size: clamp(30px, 3.8vw, 70px);
    font-weight: 800;
}

.who_wrapper .album_container .sub_text {
    margin-top: 1.8em;
}

.who_wrapper .album_container .sub_text span {
    display: block;
}

.who_wrapper .album_container p.cate_txt {
    display: block;
    margin-top: 2.8em;
    font-family: var(--sub-font);
    font-size: clamp(18px, 2vw, 38px);
}

.who_wrapper .album_container .album_area {
    margin-top: 3.6em;
}

.who_wrapper .album_container .album_area .inner {
    display: flex;
    flex-wrap: wrap;
}

.who_wrapper .album_container .album_area .inner .box {
    position: relative;
    overflow: hidden;
    width: calc(100%/3);
    height: 100%;
    aspect-ratio: 1/1;
    cursor: pointer;
}

.who_wrapper .album_container .album_area .inner .box:nth-of-type(1),
.modal .modal_content .modal_item .img_box.img01 {
    background: #0FCBFF;
}

.who_wrapper .album_container .album_area .inner .box:nth-of-type(2),
.modal .modal_content .modal_item .img_box.img02 {
    background: #FF7C2F;
}

.who_wrapper .album_container .album_area .inner .box:nth-of-type(3) {
    background: #333;
}

.who_wrapper .album_container .album_area .inner .box:nth-of-type(4),
.modal .modal_content .modal_item .img_box.img03 {
    background: #C0EA27;

}

.who_wrapper .album_container .album_area .inner .box:nth-of-type(4) .album_sticker,
.who_wrapper .album_container .album_area .inner .box:nth-of-type(9) .album_sticker {
    position: absolute;
    left: 5%;
    bottom: 5%;
    display: block;
    content: "";
    width: 20%;
    height: auto;
    aspect-ratio: 103.47/64.47;
    background-image: url(../img/img_album03_st.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.who_wrapper .album_container .album_area .inner .box:nth-of-type(5),
.modal .modal_content .modal_item .img_box.img04 {
    background: #7086FF;

}

.who_wrapper .album_container .album_area .inner .box:nth-of-type(6),
.modal .modal_content .modal_item .img_box.img05 {
    background: #0003A0;
}

.who_wrapper .album_container .album_area .inner .box:nth-of-type(7),
.modal .modal_content .modal_item .img_box.img06 {
    background: #FFE551;
}

.who_wrapper .album_container .album_area .inner .box:nth-of-type(8),
.modal .modal_content .modal_item .img_box.img07 {
    background: #8CFFFB;
}

.who_wrapper .album_container .album_area .inner .box:nth-of-type(9),
.modal .modal_content .modal_item .img_box.img08 {
    background: #FF38AC;
}

.who_wrapper .album_container .album_area .inner .box:hover .hover {
    animation: player 10s linear infinite;
}

@keyframes player {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.who_wrapper .album_container .album_area .inner .box .img_item {
    width: 100%;
}

.who_wrapper .album_container .album_area .inner .box .img_item.rotate {
    animation: player 10s linear infinite;
}

.who_wrapper .album_container .album_area .inner .box .img_item img {
    width: 100%;
}

.who_wrapper .album_container .album_area .inner .box .push_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(51, 51, 51, .6);
    transform: scale(0);
    opacity: 0;
    transition: transform 1s ease-out, opacity 0.3s ease-out;
    transform-origin: center center;
}

.who_wrapper .album_container .album_area .inner .box .push_box.expand {
    transform: scale(1.5);
    opacity: 1;
    transition: transform 1s ease-out, opacity 0.3s ease-out;
}

.who_wrapper .album_container .album_area .inner .box .push_box.shrink {
    transform: scale(0);
    opacity: 0;
    transition: transform 1.5s ease-in, opacity 1.5s ease-out;
}

.who_wrapper .album_container .album_area .inner .box .push_box img {
    width: 50px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.who_wrapper .album_container .album_area .inner .box .push_box p {
    color: var(--text-color);
    font-family: var(--sub-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.who_wrapper .album_container .album_area .inner .box .push_box.show-content img,
.who_wrapper .album_container .album_area .inner .box .push_box.show-content p {
    opacity: 1;
    transform: translateY(0);
}

.push_box img.jump {
    animation: jump .6s ease;
}

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

    25% {
        transform: translateY(-5px);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(-5px);
    }

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

.who_wrapper .album_container .album_area .inner .box.play_list {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: var(--text-color);
}

.who_wrapper .album_container .album_area .inner .box.play_list .inner {
    display: block;
    margin: 0 auto;
    width: 90%;
    height: 100%;
}

.who_wrapper .album_container .album_area .inner .box.play_list .inner .scroll_area {
    margin-top: 2em;
    max-height: calc(100% - 40px);
    overflow-y: auto;
}

.who_wrapper .album_container .album_area .inner .box.play_list .inner ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em 23px;
    border-top: 1px solid var(--text-color);
}

.who_wrapper .album_container .album_area .inner .box.play_list .inner ul li:last-of-type {
    border-bottom: 1px solid var(--text-color);
}

.who_wrapper .album_container .album_area .inner .box.play_list .inner ul li p:first-of-type {
    font-family: var(--sub-font);
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1.2;
}

.who_wrapper .album_container .album_area .inner .box.play_list .inner ul li p:first-of-type span {
    display: block;
    font-family: var(--sub-font);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
}

.who_wrapper .album_container .album_area .inner .box.play_list .inner ul li p:last-of-type {
    font-family: var(--sub-font);
    font-weight: bold;
    font-size: 10px;
}

.who_wrapper .album_container .album_area .inner .box.play_list .inner ul li p:last-of-type span {
    margin-left: .3em;
}

.who_wrapper .teraseyo_bg {
    background-image: url('../img/bg_teraseyo.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.who_wrapper .spacer {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: calc(100vh + 55vw + 50px);
    max-height: calc(100vh + 600px + 50px);
}

.who_wrapper .spacer #secret_track1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55vw;
    max-width: 900px;
    transform: translate(30%) rotate(-20deg);
    transition: transform 1s;
}

.who_wrapper .spacer #secret_track1.on {
    transform: translate(200%) rotate(-20deg);
    /* animation: slide .5s 1.3s forwards; */
}

@keyframes slide {
    0% {
        transform: translate(30%) rotate(-20deg);
    }

    100% {
        transform: translate(200%) rotate(-20deg);
    }
}

.who_wrapper .teraseyo_container {
    width: 90%;
    margin: 0 auto;
    padding-top: 40vh;
}

.who_wrapper .teraseyo_container .content {
    display: flex;
    justify-content: flex-start;
    gap: 10%;
    margin-top: 140px;
}

.who_wrapper .teraseyo_container .content .track_box {
    width: 55%;
    max-width: 600px;
}

.who_wrapper .teraseyo_container .content .track_box .img_box {
    position: relative;
    margin-top: 40px;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.who_wrapper .teraseyo_container .content .track_box .img_box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.who_wrapper .teraseyo_container .content .track_box .img_box #secret_track2 {
    transform: translateX(-200%);
    transition: all .6s;
}

.who_wrapper .teraseyo_container .content .track_box .img_box #secret_track2.on {
    transform: translateX(0);
    animation: player 10s 1s linear infinite;
}

.who_wrapper .teraseyo_container .content .track_box h3 {
    font-family: var(--sub-font);
    font-size: clamp(20px, 3vw, 34px);
}

.who_wrapper .teraseyo_container .content .text_box {
    width: 45%;
}

.who_wrapper .teraseyo_container .content .text_box p {
    display: block;
    font-size: clamp(16px, 1.5vw, 18px);
}

.who_wrapper .who_text_area {
    width: fit-content;
    margin: 200px auto 0;
}

.who_wrapper .who_text_area span {
    display: block;
    font-family: var(--sub-font);
    font-weight: 800;
    font-size: clamp(32px, 4.8vw, 90px);
    letter-spacing: 0.05em;
}

.who_wrapper .about_btn_area {
    background: var(--text-color) !important;
}

.who_wrapper .about_btn_area .btn {
    color: var(--base-color) !important;
}

.modal .modal_content .modal_item {
    margin: 0 auto;
    width: 90%;
    max-width: 900px;
}

.modal .modal_content .modal_item .top_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.modal .modal_content .modal_item .top_area .ttl p {
    font-family: var(--sub-font);
    font-size: clamp(14px, 1.6vw, 24px);
    line-height: 1.2;
    font-weight: 800;
}

.modal .modal_content .modal_item .top_area .ttl p span {
    font-size: clamp(18px, 2.2vw, 32px);
    color: #FFF !important;
}

.modal .modal_content .modal_item .top_area .ttl h2 {
    margin-top: .2em;
    font-size: clamp(24px, 3.5vw, 50px);
    line-height: 1.2;
    font-weight: 900;
}

.modal .modal_content .modal_item .top_area .ttl h2 span {
    display: block;
    color: var(--text-color) !important;
    font-size: clamp(18px, 3vw, 45px);
}

.modal .modal_content .modal_item .top_area .ttl h2 span:last-of-type {
    font-size: clamp(14px, 2vw, 32px);
    margin-top: .5em;
}

.modal .modal_content .modal_item .top_area .img_box {
    width: clamp(55px, 12vw, 172px);
}

.modal .modal_content .modal_item .top_area .img_box img {
    width: 100%;
}

.modal .modal_content .modal_item .top_area .img_box img {
    animation: player 10s linear infinite;
}

.modal .modal_content .modal_item .text_area {
    margin-top: 3.6em;
    height: 25vh;
    overflow-y: scroll;
    scrollbar-color: #959595 #434343;
}

.modal .modal_content .modal_item .text_area p {
    color: #4E4E4E;
    font-size: clamp(18px, 1.38vw, 20px);
    font-weight: 500;
}

.modal .modal_content .modal_item .text_area p span {
    transition: color 0.2s ease;
}

.modal .modal_content .modal_item .text_area::-webkit-scrollbar-thumb {
    background-color: #FFF;
}

.modal .modal_content .like_box {
    display: block;
    margin: 1em auto 0;
    width: 90%;
    max-width: 900px;
    text-align: right;
}

.modal .modal_content .like_box button.like {
    width: fit-content;
    cursor: pointer;
}

.modal .modal_content .like_box button.like svg {
    width: clamp(16px, 2vw, 30px);
}

.like .heart-shape {
    fill: none;
    transform-origin: center;
    transition: fill 0.3s ease;
}

/* 塗りつぶし用アニメーション */
.like.active .heart-shape {
    animation: fillHeart 0.4s forwards;
}

@keyframes fillHeart {
    0% {
        fill: transparent;
        transform: scale(0);
        transform-origin: center;
    }

    100% {
        fill: #FFF;
        transform: scale(1);
    }
}

.modal .modal_content .seek_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 3.8em auto 0;
    width: 90%;
    max-width: 900px;
}

.modal .modal_content .seek_bar p {
    font-size: clamp(10px, .9vw, 13px);
}

.modal .modal_content .seek_bar .bar_box {
    position: relative;
    display: block;
    width: calc(100% - 52px - 4em);
    height: 5px;
    background: #212121;
    border-radius: 10px;
    overflow: hidden;
}

.modal .modal_content .seek_bar .bar_box .bar {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    width: 0%;
    height: 5px;
    background-color: var(--text-color);
}

.modal .modal_content .play_btn_box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(45px, 6.5vw, 95px);
    margin-top: 2em;
}

.modal .modal_content .play_btn_box button {
    cursor: pointer;
}

.modal .modal_content .play_btn_box button.prev_btn,
.modal .modal_content .play_btn_box button.next_btn {
    width: clamp(18px, 2.6vw, 38px);
}

.modal .modal_content .play_btn_box button.play_btn {
    width: clamp(13px, 1.9vw, 28px);
}

.modal .modal_content .play_btn_box button.play_btn .play {
    display: none;
}

.modal .modal_content .play_btn_box button img {
    width: 100%;
}

@media screen and (max-width:1600px) {
    .who_wrapper .teraseyo_container .content {
        justify-content: flex-start;
        gap: 56px;
    }
}

@media screen and (max-width:990px) {
    .who_wrapper .album_container .album_area .inner .box {
        width: calc(100% / 2);
    }

    .who_wrapper .album_container .album_area .inner .box.play_list {
        display: none;
    }

    .who_wrapper .spacer #secret_track1 {
        width: 100%;
        max-width: 600px;
    }

    .who_wrapper .teraseyo_container .content {
        flex-direction: column;
        margin-top: 80px;
    }

    .who_wrapper .teraseyo_container .content .track_box {
        width: 100%;
        max-width: 100%;
    }

    .who_wrapper .teraseyo_container .content .img_box {
        width: 100%;
        max-width: 500px;
        margin: 40px auto 0;
    }

    .who_wrapper .teraseyo_container .content .text_box {
        width: 100%;
    }
}

@media screen and (max-width:768px) {
    .who_wrapper .album_container {
        padding-top: 0;
    }
}

@media screen and (max-width:500px) {

    .modal .modal_content .modal_item,
    .modal .modal_content .like_box,
    .modal .modal_content .seek_bar {
        width: 100%;
    }

    .modal .modal_content .modal_item .top_area {
        display: block;
        width: 100%;
        position: relative;
    }

    .modal .modal_content .modal_item .top_area .ttl h2 {
        margin-top: 1.2em;
    }

    .modal .modal_content .modal_item .top_area .img_box {
        position: absolute;
        top: 0;
        right: 0;
    }

    .modal .modal_inner p.nowplaying {
        font-size: 12px;
    }
}

/*---------------------------------------------------------
                company
---------------------------------------------------------*/
/* .company_wrapper .under_mv img:last-of-type {
    display: none;
} */

.company_wrapper .under_mv .content {
    overflow: hidden;
}

.company_wrapper .under_mv .content .sub_ttl .line1.show,
.company_wrapper .under_mv .content .sub_ttl .line2.show,
.company_wrapper .under_mv .content .sub_ttl .line3.show,
.company_wrapper .under_mv .content .sub_ttl .line4.show {
    opacity: 1;
    transform: translateY(0);
}

.company_wrapper .overview_container {
    margin: 0 auto;
    width: 80vw;
}

.company_wrapper .overview_container .typing_container {
    display: inline-block;
    position: relative;
    margin-top: 10%;
    font-family: var(--sub-font);
    font-size: clamp(24px, 5.5vw, 100px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0;
}

.company_wrapper .overview_container .typing_container .cursor {
    display: inline-block;
    animation: blink 0.8s infinite;
    font-weight: 300;
    vertical-align: bottom;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.company_wrapper .overview_container .content {
    display: flex;
    gap: 13vw;
    margin: 13% auto 0;
}

.company_wrapper .overview_container .content h1 {
    width: 10vw;
    min-width: 97px;
    font-size: clamp(24px, 2.5vw, 42px);
}

.company_wrapper .overview_container .content .table {
    width: calc(100% - 13vw - 10vw);
    max-width: calc(100% - 13vw - 97px);
}

.company_wrapper .overview_container .content .table dl {
    display: flex;
    align-items: center;
    gap: 11vw;
    padding: 30px 20px;
    border-bottom: 1px solid var(--text-color);
}

.company_wrapper .overview_container .content .table dl:first-of-type {
    border-top: 1px solid var(--text-color);
}

.company_wrapper .overview_container .content .table dl dt {
    width: 100px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
}

.company_wrapper .overview_container .content .table dl dd {
    width: calc(100% - 100px - 11vw);
}

.company_wrapper .overview_container .content .table dl dd p {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.company_wrapper .overview_container .content .table dl dd p br.sp_only {
    display: none;
}

.company_wrapper .overview_container .content .table dl dd ul li {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.company_wrapper .overview_container .content .table dl dd ul li ul {
    margin-left: .5em;
}

.company_wrapper .overview_container .content .table dl dd .margin {
    margin-top: 1em;
}

.company_wrapper .map_container {
    position: relative;
    margin-top: 20%;
    width: 100vw;
    aspect-ratio: 1440 / 956;
    overflow: hidden;
}

.company_wrapper .map_container img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company_wrapper .map_container a.map_pin {
    position: absolute;
    transition: .3s;
}

.company_wrapper .map_container a.map_pin:hover {
    opacity: .7;
}

.company_wrapper .map_container a.map_pin svg {
    width: 2vw;
}

.company_wrapper .map_container a.map_pin p {
    color: var(--text-color);
    font-size: 1vw;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

.company_wrapper .map_container .map_btn {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 0;
    width: 192px;
    background: var(--base-color);
    color: var(--text-color) !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: center;
    border: 1px solid var(--text-color);
    border-radius: 90px;
    transition: .3s;
}

.company_wrapper .map_container .map_btn:hover {
    background: var(--text-color);
    color: var(--base-color) !important;
}

@media screen and (max-width:990px) {
    .company_wrapper .overview_container {
        width: 90vw;
    }
}

@media screen and (max-width:768px) {
    .company_wrapper .overview_container .content {
        flex-direction: column;
        gap: max(40px, 5vw);
    }

    .company_wrapper .overview_container .content h1,
    .company_wrapper .overview_container .content .table {
        width: 100%;
        min-width: unset;
        max-width: unset;
    }

    /* .company_wrapper .under_mv img:first-of-type {
        display: none;
    }

    .company_wrapper .under_mv img:last-of-type {
        display: block;
    } */

    .company_wrapper .overview_container .content .table dl {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5em;
        padding: 20px 10px;
    }

    .company_wrapper .overview_container .content .table dl dt,
    .company_wrapper .overview_container .content .table dl dd {
        width: 100%;
    }

    .company_wrapper .map_container {
        aspect-ratio: 375/667;
    }

    .company_wrapper .map_container a.map_pin svg {
        width: 4vw;
    }

    .company_wrapper .map_container a.map_pin p {
        font-size: 2vw;
    }
}

@media screen and (max-width:500px) {
    .company_wrapper .overview_container .content .table dl dd p br.sp_only {
        display: block;
    }
}

/*---------------------------------------------------------
                沿革
---------------------------------------------------------*/
.history_wrapper .int_container {
    padding: 200px 0;
    display: flex;
    align-items: center;
    width: 100%;
}

.history_wrapper .int_container .inner {
    margin: 0 auto;
    width: 85vw;
}

.history_wrapper .int_container .inner h1 {
    font-family: var(--sub-font);
    font-size: clamp(42px, 5.5vw, 100px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0;
}

.history_wrapper .int_container .inner p:nth-of-type(1) {
    display: block;
    margin-top: 1.8em;
    font-family: var(--sub-font);
    font-size: clamp(13px, 1.6vw, 32px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.history_wrapper .int_container .inner p:nth-of-type(2) {
    position: relative;
    z-index: 1;
    margin-top: 3.4em;
    font-size: clamp(14px, 1.25vw, 20px);
}

.history_wrapper .int_container .inner .bg_txt {
    position: relative;
    z-index: 0;
    margin: 2em 0 0 auto;
    width: 100%;
}

.history_wrapper .int_container .inner .bg_txt img {
    width: 100%;
}

.history_wrapper .scroll_area {
    position: relative;
    height: 1200svh;
}

.history_wrapper .mean_container {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100dvh;
}

.history_wrapper .mean_container .inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11vw;
    margin: 0 auto;
    width: 75vw;
    height: 100%;
}

.history_wrapper .mean_container .inner svg.mean_logo {
    position: absolute;
    width: 100%;
    transform: scale(1);
    transition: transform .5s ease, opacity .5s ease;
}

.history_wrapper .mean_container .inner svg.mean_logo.hidden {
    transform: scale(0);
}

.history_wrapper .mean_container .inner svg.mean_logo #logo_bar01,
.history_wrapper .mean_container .inner svg.mean_logo #logo_bar02,
.history_wrapper .mean_container .inner svg.mean_logo #logo_bar03 {
    opacity: 1;
    transition: transform 1s ease, opacity 1s ease;
    will-change: transform, opacity;
}

.history_wrapper .mean_container .inner svg.mean_logo #logo_bar01 {
    transform: translate(var(--bar01X), var(--barYBefore));
}

.history_wrapper .mean_container .inner svg.mean_logo #logo_bar01.visible {
    transform: translate(var(--bar01X), var(--barYAfter));
}

.history_wrapper .mean_container .inner svg.mean_logo #logo_bar02 {
    transform: translate(var(--bar02X), var(--barYBefore));
}

.history_wrapper .mean_container .inner svg.mean_logo #logo_bar02.visible {
    transform: translate(var(--bar02X), var(--barYAfter));
}

.history_wrapper .mean_container .inner svg.mean_logo #logo_bar03 {
    transform: translate(var(--bar03X), var(--barYBefore));
}

.history_wrapper .mean_container .inner svg.mean_logo #logo_bar03.visible {
    transform: translate(var(--bar03X), var(--barYAfter));
}

.history_wrapper .mean_container .inner svg.mean_logo #logo_bar01 #logo_txt_idea,
.history_wrapper .mean_container .inner svg.mean_logo #logo_bar02 #logo_txt_ideal,
.history_wrapper .mean_container .inner svg.mean_logo #logo_bar03 #logo_txt_aideal {
    opacity: 0;
    transition: 1s ease;
    will-change: opacity;
}

.history_wrapper .mean_container .inner svg.mean_logo #logo_bar01.visible #logo_txt_idea,
.history_wrapper .mean_container .inner svg.mean_logo #logo_bar02.visible #logo_txt_ideal,
.history_wrapper .mean_container .inner svg.mean_logo #logo_bar03.visible #logo_txt_aideal {
    opacity: 1;
    transition: 1s ease;
    will-change: opacity;
}

.history_wrapper .mean_container .inner svg.mean_logo .logo_after_fade {
    opacity: 0;
    transition: 1s ease;
    will-change: opacity;
}

.history_wrapper .mean_container .inner svg.mean_mark {
    position: absolute;
    opacity: 0;
    transform: scale(0);
    width: 20vw;
    transition: transform .5s ease, opacity .5s ease;
}

.history_wrapper .mean_container .inner svg.mean_mark.visible {
    opacity: 1;
    transform: scale(1);
    transition: transform .5s ease, opacity .5s ease;
}

.history_wrapper .mean_container .inner svg.mean_mark.rotate {
    transform: scale(1), rotate(45deg);
    transition: transform .5s ease, opacity .5s ease;
}

.history_wrapper .mean_container .inner svg.mean_mark .mark_fadeOut {
    transition: .5s
}

.history_wrapper .mean_container .inner .bar_box {
    display: flex;
    gap: 20px;
    width: 23.5vw;
}

.history_wrapper .mean_container .inner .bar_box .bar p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    color: var(--base-color);
    font-family: var(--sub-font);
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    writing-mode: vertical-lr;
    text-orientation: sideways;
}

.history_wrapper .mean_container .inner .text_content {
    width: calc(100% - 11vw - 23.5vw);
}

.history_wrapper .mean_container .inner .text_content .text_box {
    display: none;
    opacity: 0;
    transition: opacity 1s ease;
}

.history_wrapper .mean_container .inner .text_box p:nth-of-type(1) {
    font-family: var(--sub-font);
    font-size: clamp(42px, 5vw, 100px);
    font-weight: 800;
    line-height: 1.2;
}

.history_wrapper .mean_container .inner .text_box p:nth-of-type(1) span {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
}

.history_wrapper .mean_container .inner .text_box p:nth-of-type(2) {
    margin-top: 1em;
    font-size: clamp(14px, 1.25vw, 24px);
    line-height: 1.8;
}

.history_wrapper .mean_container .inner .text_box .hashtag {
    display: flex;
    align-items: center;
    gap: 1em;
    font-family: "Noto Sans JP", sans-serif;
}

.history_wrapper .mean_container .inner .text_box .hashtag p {
    margin-top: 1em;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(12px, 1.1vw, 20px);
    font-weight: 600;
    line-height: 2.2;
}

.history_wrapper .mean_container .inner .text_box .hashtag p span {
    margin-right: 0.5rem;
    font-family: var(--sub-font);
    font-weight: 600;
}


.history_wrapper .video_box {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100%;
}

.history_wrapper .video_box .inner {
    width: 90% !important;
    height: auto;
    position: relative;
    background: var(--text-color);
    border-radius: 15px;
}

.history_wrapper .video_box video {
    width: 100%;
    border-radius: 15px;
    transition: .5s ease;
}

.history_wrapper .video_box .video_poster {
    display: none;
}

.history_wrapper .video_box.video_box.started .video_poster {
    opacity: 0;
}

.history_wrapper .explanation_container {
    margin-top: 120px;
    margin-bottom: 180px;
}

.history_wrapper .explanation_container .inner {
    margin: 0 auto;
    width: 85vw;
}

.history_wrapper .explanation_container .inner p.ttl {
    display: block;
    margin: 20px auto 0;
    font-size: clamp(32px, 4.65vw, 80px);
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
}

.history_wrapper .explanation_container .inner .logo_ex_main {
    margin-top: 80px;
    padding: 65px 0;
    width: 100%;
    background-color: #2A2A2A;
    border-radius: 8px;
}

.history_wrapper .explanation_container .inner .logo_ex_main .inner {
    width: 70%;
}

.history_wrapper .explanation_container .inner .logo_ex_main .inner img {
    display: block;
    margin: 0 auto;
    width: 270px;
}

.history_wrapper .explanation_container .inner .logo_ex_main .inner p {
    margin-top: 60px;
}

.history_wrapper .explanation_container .inner .logo_ex_sub {
    display: flex;
    align-items: center;
    gap: 6.25vw;
}

.history_wrapper .explanation_container .inner .logo_ex_sub.symbol_ex {
    margin-top: 50px;
}

.history_wrapper .explanation_container .inner .logo_ex_sub.logotype_ex {
    margin-top: 40px;
}

.history_wrapper .explanation_container .inner .logo_ex_sub .img_box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    width: 360px;
    background: #2A2A2A;
    border-radius: 8px;
}

.history_wrapper .explanation_container .inner .logo_ex_sub.symbol_ex .img_box img {
    width: 65px;
}

.history_wrapper .explanation_container .inner .logo_ex_sub.logotype_ex .img_box img {
    width: 140px;
}

.history_wrapper .explanation_container .inner .logo_ex_sub .text_box {
    width: calc(100% - 360px - 6.25vw);
}

.history_wrapper .explanation_container .inner .logo_ex_sub .text_box h3 {
    font-size: clamp(16px, 1.3vw, 24px);
    font-weight: bold;
    line-height: 1;
}

.history_wrapper .explanation_container .inner .logo_ex_sub .text_box p {
    margin-top: 32px;
}

/* ロゴの歴史 */
.history_wrapper .logo_his_container.pc {
    position: relative;
    height: calc(400dvh + 20px);
}

.history_wrapper .logo_his_container.pc .inner {
    position: relative;
    height: 100%;
}


.history_wrapper .logo_his_container.pc .inner h2 {
    margin: 0 auto;
    width: 80vw;
    font-family: var(--sub-font);
    font-size: clamp(14px, 1.6vw, 32px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}

.history_wrapper .logo_his_container.pc .sticky {
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow: hidden;
}

.history_wrapper .logo_his_container.pc .inner .logo_area {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translate(-50%, -50%);
}

.history_wrapper .logo_his_container.pc .inner .logo_area .base_circle {
    --r: 20vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--r) * 2);
    max-width: 500px;
    height: calc(var(--r) * 2);
    max-height: 500px;
}

.history_wrapper .logo_his_container.pc .inner .logo_area .logo2013 {
    --a: 90;
}

.history_wrapper .logo_his_container.pc .inner .logo_area .logo2016 {
    --a: 0;
}

.history_wrapper .logo_his_container.pc .inner .logo_area .logo2020 {
    --a: 270;
}

.history_wrapper .logo_his_container.pc .inner .logo_area .logo2025 {
    --a: 180;
}


.history_wrapper .logo_his_container.pc .inner .logo_area svg {
    opacity: .5;
    --a2: calc(var(--a) * 1deg - 90deg);
    --r-limited: calc(min(var(--r), 250px));
    position: absolute;
    top: 50%;
    left: 50%;
    transform:
        translate(-50%, -50%) translate(calc(cos(var(--a2)) * var(--r-limited)),
            calc(sin(var(--a2)) * var(--r-limited)));
    width: 50%;
    max-width: 300px;
    min-width: 250px;
    filter: blur(3px);
}

.history_wrapper .logo_his_container.pc .inner .logo_area svg>* {
    transition: .2s;
}

.history_wrapper .logo_his_container.pc .inner .logo_area svg.off>* {
    fill: #fff;
}

.history_wrapper .logo_his_container.pc .inner .logo_area svg.active {
    animation: fadeLogo .5s forwards;
}

@keyframes fadeLogo {
    0% {
        opacity: .5;
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

.history_wrapper .logo_his_container.pc .inner .text_area {
    position: absolute;
    top: 0;
    right: calc(15vw / 2);
    width: 50%;
    max-width: calc(100% - 500px);
    height: 100dvh;
}

.history_wrapper .logo_his_container.pc .inner .text_area .box {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.8em;
    width: 100%;
    height: 100%;
    transition: .5s;
}

.history_wrapper .logo_his_container.pc .inner .text_area .box.active {
    opacity: 1;
}

.history_wrapper .logo_his_container.pc .inner .text_area .box .year {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(34px, 3.2vw, 50px);
    font-weight: 800;
}

.history_wrapper .logo_his_container.pc .inner .text_area .box .year .triangle {
    display: flex;
    align-items: center;
    gap: 5px;
}

.history_wrapper .logo_his_container.pc .inner .text_area .box .year .triangle img {
    width: 18px;
}

.history_wrapper .logo_his_container.pc .inner .text_area .box .text_item p {
    font-size: clamp(14px, 1.25vw, 16px);
}

.history_wrapper .logo_his_container.pc .inner .text_area .box .text_item p+p {
    margin-top: 1.4em;
}

.history_wrapper .logo_his_container.sp {
    display: none;
}

.history_wrapper .about_btn_area {
    background: var(--text-color);
}

.history_wrapper .about_btn_area .box a.btn {
    color: var(--base-color);
}

.history_wrapper .text_scroll_area {
    position: relative;
    height: 200vh;
}

.history_wrapper .text_scroll_area .sticky {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

.history_wrapper .text_scroll_area .scroll_text {
    font-size: clamp(40px, 10.6vw, 300px);
    white-space: nowrap;
    transform: translateX(-150%);
    display: table-caption;
}

.history_wrapper .text_scroll_area .scroll_text.left {
    background: linear-gradient(135deg, rgba(255, 235, 0, 1) 0%, rgba(253, 30, 186, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateX(-150%);
}

.history_wrapper .text_scroll_area .scroll_text.right {
    background: linear-gradient(135deg, rgba(137, 232, 43, 1) 0%, rgba(41, 235, 254, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateX(150%);
}

@media screen and (max-width:990px) {
    .history_wrapper .int_container .inner {
        width: 90vw;
    }

    .history_wrapper .mean_container .inner {
        width: 90vw;
    }

    .history_wrapper .mean_container .inner .bar_box {
        width: 30.5vw;
    }

    .history_wrapper .mean_container .inner .text_content {
        width: calc(100% - 11vw - 30.5vw);
    }

    .history_wrapper .explanation_container .inner {
        width: 90vw;
    }

    .history_wrapper .explanation_container .inner .logo_ex_main .inner {
        width: 85%;
    }

    .history_wrapper .explanation_container .inner .logo_ex_sub {
        gap: 32px;
    }

    .history_wrapper .explanation_container .inner .logo_ex_sub .img_box {
        padding: 70px 0;
        width: 250px;
    }

    .history_wrapper .explanation_container .inner .logo_ex_sub .text_box {
        width: calc(100% - 250px - 32px);
    }

    .history_wrapper .logo_his_container.sp {
        display: block;
    }

    .history_wrapper .logo_his_container.pc {
        display: none;
    }

    .history_wrapper .logo_his_container.sp h2 {
        margin: 0 auto 50px;
        width: 90vw;
        font-family: var(--sub-font);
        font-size: clamp(14px, 1.6vw, 32px);
        font-weight: bold;
        line-height: 1;
        letter-spacing: 0;
    }

    .history_wrapper .logo_his_container.sp .horizontal_scroll {
        --sticky-container-height: 100vh;
        height: var(--sticky-container-height);
        min-height: 100vh;
        box-sizing: border-box;
    }

    .history_wrapper .logo_his_container.sp .horizontal_scroll .sticky {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
    }

    .history_wrapper .logo_his_container.sp .horizontal_scroll .scroller {
        display: flex;
        overflow: auto;
        padding: 0 25% 0 5%;
    }

    /* スクロールバー隠す用 */
    .history_wrapper .logo_his_container.sp .horizontal_scroll .scroller.nobar {
        overflow: hidden;
    }

    .history_wrapper .logo_his_container.sp .inner {
        width: 100%;
        margin: 0 0 0 auto;
    }

    .history_wrapper .logo_his_container.sp .inner .scroll_btn_box {
        width: 90%;
        margin: 5% 0 0 5%;
    }

    .history_wrapper .logo_his_container.sp .inner .scroll_btn_box .progress_bar_area {
        width: 100%;
        height: 5px;
        border-radius: 10px;
        background-color: #212121;
        overflow: hidden;
    }

    .history_wrapper .logo_his_container.sp .inner .scroll_btn_box .progress_bar_area .progress_bar {
        width: 0;
        height: 5px;
        border-radius: 10px;
        background-color: var(--text-color);
    }

    .history_wrapper .logo_his_container.sp .inner .box {
        min-width: 80vw;
        padding: 5vh 24px;
        background-color: #2A2A2A;
        border-radius: 10px;
        opacity: .5;
        filter: blur(3px);
        transition: .3s;
    }

    .history_wrapper .logo_his_container.sp .inner .box.active {
        opacity: 1;
        filter: blur(0);
    }

    .history_wrapper .logo_his_container.sp .inner .box:not(:first-child) {
        margin-left: 10px;
    }

    .history_wrapper .logo_his_container.sp .inner .box .box_inner {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .history_wrapper .logo_his_container.sp .inner .box .box_inner svg {
        width: 200px;
        margin: 0 auto;
    }

    .history_wrapper .logo_his_container.sp .inner .box .box_inner svg.logo2016 {
        width: auto;
        height: 80px;
    }

    .history_wrapper .logo_his_container.sp .inner .box .year {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 24px;
        font-weight: 800;
    }

    .history_wrapper .logo_his_container.sp .inner .box .year .triangle {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .history_wrapper .logo_his_container.sp .inner .box .year .triangle img {
        width: 12px;
    }

    .history_wrapper .logo_his_container.sp .inner .box .text_item p {
        text-align: justify;
    }

    .history_wrapper .logo_his_container.sp .inner .box .text_item p+p {
        margin-top: 8px;
    }
}

@media screen and (max-width:768px) {
    .history_wrapper .int_container {
        padding: 150px 0;
        height: auto;
    }

    .history_wrapper .mean_container .inner {
        flex-direction: column;
    }

    .history_wrapper .mean_container .inner .text_content {
        position: relative;
    }

    .history_wrapper .mean_container .inner .text_content .text_box {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    .history_wrapper .mean_container .inner svg.mean_logo {
        position: unset;
    }

    .history_wrapper .video_box .video_poster {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.5s ease;
        z-index: 2;
        pointer-events: none;
        border-radius: 15px;
    }

    .history_wrapper .video_box.video_box.started .video_poster {
        opacity: 0;
    }


    .history_wrapper .mean_container .inner .bar_box {
        display: none;
    }

    .history_wrapper .mean_container .inner .text_content {
        width: 100%;
        transition: height 0.5s ease, opacity 0.5s ease;
    }

    .history_wrapper .mean_container .inner .text_content.hidden {
        height: 0 !important;
        opacity: 0;
    }

    .history_wrapper .explanation_container .inner .logo_ex_main {
        margin-top: 80px;
        padding: 40px 0;
    }

    .history_wrapper .explanation_container .inner .logo_ex_main .inner {
        width: 90%;
    }

    .history_wrapper .explanation_container .inner .logo_ex_main .inner img {
        width: 200px;
    }

    .history_wrapper .explanation_container .inner .logo_ex_main .inner p {
        margin-top: 30px;
        font-size: 12px;
    }

    .history_wrapper .explanation_container .inner .logo_ex_sub {
        flex-direction: column;
        align-items: flex-start;
    }

    .history_wrapper .explanation_container .inner .logo_ex_sub.symbol_ex,
    .history_wrapper .explanation_container .inner .logo_ex_sub.logotype_ex {
        margin-top: 56px;
    }

    .history_wrapper .explanation_container .inner .logo_ex_sub .img_box {
        width: 100%;
    }

    .history_wrapper .explanation_container .inner .logo_ex_sub .text_box {
        width: 100%;
    }

    .history_wrapper .explanation_container .inner .logo_ex_sub .text_box p {
        margin-top: 20px;
        font-size: 13px;
    }

    .history_wrapper .explanation_container .inner .logo_ex_sub .text_box h3 {
        font-size: clamp(18px, 1.3vw, 24px);
    }

    .history_wrapper .text_scroll_area {
        padding: 80px 0;
    }

}

@media screen and (max-width:500px) {
    .history_wrapper .logo_his_container.sp .inner .box .text_item p {
        font-size: 13px;
    }
}


/*---------------------------------------------------------
                メッセージ
---------------------------------------------------------*/
.message_wrapper .message_content {
    margin: 112px auto 0;
    width: 80vw;
}

.message_wrapper .message_content h1 {
    font-family: var(--sub-font);
    font-size: clamp(32px, 5.5vw, 100px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0;
}

.message_wrapper .message_content .area {
    display: flex;
    align-items: flex-start;
    gap: 8.8vw;
}

.message_wrapper .message_content .area.first {
    margin-top: 200px;
}

.message_wrapper .message_content .area.second {
    flex-direction: row-reverse;
    margin-top: 180px;
}

.message_wrapper .message_content .area .text_box {
    width: calc(100% - 27.7vw - 8.8vw);
}

.message_wrapper .message_content .area .text_box .text_item:not(:first-child) {
    margin-top: 32px;
}

.message_wrapper .message_content .area .text_box .text_item h2 {
    margin-bottom: 32px;
    padding: 7px 20px;
    width: 100%;
    background: #484848;
    font-size: 26px;
    font-weight: 800;
    line-height: 2;
    letter-spacing: 0.05em;
}

.message_wrapper .message_content .area .text_box .text_item p:not(:first-child) {
    margin-top: 1em;
}

.message_wrapper .message_content .area .img_box {
    position: sticky;
    top: 80px;
    width: 27.7vw;
}

.message_wrapper .message_content .area .img_box .img {
    position: relative;
    width: 100%;
    aspect-ratio: 404 / 475;
}

.message_wrapper .message_content .area .img_box .img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transition: .3s;
}

.message_wrapper .message_content .area .img_box .img img.before {
    opacity: 1;
}

.message_wrapper .message_content .area .img_box .img img.after {
    opacity: 0;
}

.message_wrapper .message_content .area .img_box .img.change .before {
    opacity: 0;
}

.message_wrapper .message_content .area .img_box .img.change .after {
    opacity: 1;
}

.message_wrapper .message_content .area .img_box .img .sp {
    display: none;
}

.message_wrapper .message_content .area .img_box p {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-top: 46px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.message_wrapper .message_content .area.second .img_box p {
    align-items: flex-start;
}

.message_wrapper .message_content .area .img_box p span {
    display: block;
    font-size: 25px;
    line-height: 1.5;
}

.message_wrapper .about_btn_area .box {
    background: var(--text-color);
}

.message_wrapper .about_btn_area .box a.btn {
    color: var(--base-color);
}

@media screen and (max-width:990px) {
    .message_wrapper .message_content {
        width: 90vw;
    }
}

@media screen and (max-width:990px) {
    .message_wrapper .message_content {
        margin-top: 80px;
    }

    .message_wrapper .message_content .area {
        flex-direction: column-reverse !important;
        gap: 50px;
    }

    .message_wrapper .message_content .area.first {
        margin-top: 50px;
    }

    .message_wrapper .message_content .area.second {
        margin-top: 110px;
    }

    .message_wrapper .message_content .area .text_box {
        width: 100%;
    }

    .message_wrapper .message_content .area .img_box {
        position: unset;
        width: 100%;
    }

    .message_wrapper .message_content .area .img_box .img {
        aspect-ratio: 404/250;
    }

    .message_wrapper .message_content .area .img_box .img .before,
    .message_wrapper .message_content .area .img_box .img .after {
        display: none;
    }

    .message_wrapper .message_content .area .img_box .img .sp {
        display: block;
    }

    .message_wrapper .message_content .area .img_box p {
        align-items: flex-start;
        margin-top: 20px;
    }

    .message_wrapper .message_content .area .img_box p span {
        font-size: 22px;
    }
}

@media screen and (max-width:768px) {
    .message_wrapper .message_content .area .text_box .text_item h2 {
        font-size: 24px;
    }

    .message_wrapper .message_content .area .img_box p {
        font-size: 28px;
    }

    .message_wrapper .message_content .area .img_box p span {
        font-size: 22px;
    }
}

@media screen and (max-width:500px) {
    .message_wrapper .message_content .area .text_box .text_item h2 {
        font-size: 20px;
    }

    .message_wrapper .message_content .area .img_box p {
        font-size: 24px;
    }

    .message_wrapper .message_content .area .img_box p span {
        font-size: 18px;
    }
}

/*---------------------------------------------------------
                デザイン
---------------------------------------------------------*/
.design_wrapper .mainText_container,
.system_wrapper .mainText_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
}

.design_wrapper .under_mv .content .sub_ttl p {
    font-size: clamp(23px, 5.9vw, 120px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
}

/* .design_wrapper .under_mv .content .sub_ttl p span {
    opacity: 0;
    transition: .5s;
}

.design_wrapper .under_mv .content .sub_ttl p.char span {
    opacity: 0;
    transition: .5s;
}

.system_wrapper .under_mv .content .sub_ttl {
    opacity: 0;
}

.system_wrapper .under_mv .content .sub_ttl.active {
    animation: bounce 1s ease-in-out forwards;
}

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

    20% {
        opacity: 1;
        transform: translateY(-15px);
    }

    40% {
        opacity: 1;
        transform: translateY(0);
    }

    60% {
        opacity: 1;
        transform: translateY(-10px);
    }

    80% {
        opacity: 1;
        transform: translateY(0);
    }

    90% {
        opacity: 1;
        transform: translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
} */

.design_wrapper .mainText_container {
    background: var(--text-color);
    color: var(--base-color);
}

.design_wrapper .mainText_container .inner,
.system_wrapper .mainText_container .inner {
    position: relative;
    z-index: 1;
    width: 75vw;
}

.design_wrapper .mainText_container .inner h1,
.system_wrapper .mainText_container .inner h1 {
    font-size: clamp(35px, 3.8vw, 70px);
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.design_wrapper .mainText_container .inner h1 br.sp_only,
.system_wrapper .mainText_container .inner h1 br.sp_only {
    display: none;
}

.design_wrapper .mainText_container .inner p,
.system_wrapper .mainText_container .inner p {
    margin-top: 70px;
}

.design_wrapper .mainText_container .wave_scene {
    position: absolute;
    top: 0;
    left: 0;
    perspective: 800px;
    /* 距離を大きくするほど奥行きは弱く、小さいと強い */
    width: 100vw;
    height: 100%;
    overflow: hidden;
}

.design_wrapper .mainText_container #waveCanvas {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200vw;
    height: 100vh;
    display: block;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.system_wrapper .mainText_container .matrix_scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.system_wrapper .mainText_container .matrix_scene #matrixCanvas {
    display: block;
    width: 100%;
    height: 100%;
}

.design_wrapper .strength_container,
.system_wrapper .strength_container {
    padding: 170px 0;
}

.design_wrapper .strength_container .inner,
.system_wrapper .strength_container .inner {
    margin: 0 auto;
    width: 80vw;
}

.design_wrapper .strength_container .inner .content,
.system_wrapper .strength_container .inner .content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 80px;
}

.design_wrapper .strength_container .inner .content .box,
.system_wrapper .strength_container .inner .content .box {
    padding: 50px 0;
    width: 100%;
    background: #2A2A2A;
    border-radius: 5px;
}

.design_wrapper .strength_container .inner .content .box .inner,
.system_wrapper .strength_container .inner .content .box .inner {
    max-width: 0 auto;
    width: 90%;
}

.design_wrapper .strength_container .inner .content .box .inner .ttl,
.system_wrapper .strength_container .inner .content .box .inner .ttl {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.design_wrapper .strength_container .inner .content .box .inner .ttl .sp_only,
.system_wrapper .strength_container .inner .content .box .inner .ttl .sp_only {
    display: none;
}

.design_wrapper .strength_container .inner .content .box .inner .ttl p,
.system_wrapper .strength_container .inner .content .box .inner .ttl p {
    font-size: clamp(26px, 1.7vw, 28px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.design_wrapper .strength_container .inner .content .box .inner .ttl p:first-of-type,
.system_wrapper .strength_container .inner .content .box .inner .ttl p:first-of-type {
    font-family: var(--sub-font);
    width: 4.3vw;
    min-width: 65px;
}

.design_wrapper .strength_container .inner .content .box .inner .ttl p:last-of-type,
.system_wrapper .strength_container .inner .content .box .inner .ttl p:last-of-type {
    width: calc(100% - 4.3vw - 20px);
    max-width: calc(100% - 65px - 20px);
    line-height: 1.4;
}

.design_wrapper .strength_container .inner .content .box .inner p.text,
.system_wrapper .strength_container .inner .content .box .inner p.text {
    margin-top: 24px;
    color: var(--text-sub-color);
}

.design_wrapper .work_container {
    margin-top: 100px;
}

.design_wrapper .work_container .inner {
    margin: 0 auto;
    width: 80vw;
}

.design_wrapper .work_container .cate_area .cate_box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
}

.design_wrapper .work_container .cate_area .cate_box li {
    border-radius: 5px;
    overflow: hidden;
}


.design_wrapper .work_container .cate_area .cate_box li a {
    padding: 25px 70px;
    background: #F4F4F4;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
    transition: 1s;
}

.design_wrapper .work_container .cate_area .cate_box li a:hover {
    background: var(--base-color) !important;
    color: var(--text-color) !important;
}

.design_wrapper .work_container .cate_area p {
    margin-top: 20px;
}

.design_wrapper .work_container .work_area {
    margin-top: 180px;
}

.design_wrapper .work_container .work_area.first {
    margin-top: 150px;
}

.design_wrapper .work_container .work_area ul {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 65px;
    margin-top: 100px;
}

.design_wrapper .work_container .work_area ul li {
    width: calc((100% - 65px)/2);
}

.design_wrapper .work_container .work_area ul li a {
    width: 100%;
}

.design_wrapper .work_container .work_area ul li p {
    font-size: clamp(20px, 1.6vw, 28px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}

.design_wrapper .work_container .work_area ul li .img_box {
    margin-top: 20px;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.design_wrapper .work_container .work_area ul li .img_box .gradTextAnimation {
    width: 100%;
}

.design_wrapper .work_container .work_area ul li .img_box img {
    width: 100%;
    transition: .3s;
}

.design_wrapper .work_container .work_area ul li a:hover .img_box img {
    transform: scale(1.1);
}

.design_wrapper .work_container .work_area ul li .btn {
    margin: 16px 0 0 auto;
    font-size: 25px;
}

.design_wrapper .work_container .work_area ul li .btn .gradation {
    color: var(--base-color);
}

.design_wrapper .work_container .work_area ul li .btn img {
    width: 18px;
}

.system_wrapper .tools_container {
    margin-top: 180px;
}

.system_wrapper .tools_container .inner {
    margin: 0 auto;
    width: 80vw;
}

.system_wrapper .tools_container .inner p.text {
    margin-top: 20px;
}

.system_wrapper .tools_container .inner .content {
    margin-top: 80px;
}


.system_wrapper .tools_container .inner .content h3 {
    font-size: clamp(24px, 2vw, 38px);
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0;
}

.system_wrapper .tools_container .inner .content .box {
    margin-top: 23px;
}

.system_wrapper .tools_container .inner .content ul {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.system_wrapper .tools_container .inner .content .box ul {
    margin-top: 10px;
}

.system_wrapper .tools_container .inner .content ul li {
    padding: 25px 70px;
    background: #F4F4F4;
    border-radius: 5px;
    font-size: clamp(14px, 1.25vw, 20px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
    transition: 1s;
}


.system_wrapper .service_container {
    margin-top: 180px;
}

.system_wrapper .service_container .inner {
    margin: 0 auto;
    width: 80vw;
}

.system_wrapper .service_container .inner .content {
    display: flex;
    align-items: flex-start;
    gap: 6.8vw;
    margin-top: 80px;
}

.system_wrapper .service_container .inner .content .graph_box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45vw;
}

.system_wrapper .service_container .inner .content .graph_box .circle {
    margin: 0 auto;
    width: 90%;
    transform: rotate(-90deg);
}

.system_wrapper .service_container .inner .content .graph_box .circle circle {
    fill: none;
    stroke-width: 10px;
}

.system_wrapper .service_container .inner .content .graph_box .circle circle:nth-child(1) {
    stroke: #03EB0D;
    stroke-dasharray: 37.32, 169.65;
    stroke-dashoffset: 0;
}

/* 2つ目（18%） */
.system_wrapper .service_container .inner .content .graph_box .circle circle:nth-child(2) {
    stroke: #63FFB6;
    stroke-dasharray: 30.54, 169.65;
    stroke-dashoffset: -37.32;
}

/* 3つ目（13%） */
.system_wrapper .service_container .inner .content .graph_box .circle circle:nth-child(3) {
    stroke: #31E3D4;
    stroke-dasharray: 22.05, 169.65;
    stroke-dashoffset: -67.86;
    /* -67.86 */
}

/* 4つ目（11%） */
.system_wrapper .service_container .inner .content .graph_box .circle circle:nth-child(4) {
    stroke: #31A9E3;
    stroke-dasharray: 18.66, 169.65;
    stroke-dashoffset: -89.91;
    /* -89.91 */
}

/* 5つ目（9%） */
.system_wrapper .service_container .inner .content .graph_box .circle circle:nth-child(5) {
    stroke: #DC389E;
    stroke-dasharray: 15.27, 169.65;
    stroke-dashoffset: -108.57;
    /* -108.57 */
}

/* 6つ目（8%） */
.system_wrapper .service_container .inner .content .graph_box .circle circle:nth-child(6) {
    stroke: #F32B45;
    stroke-dasharray: 13.57, 169.65;
    stroke-dashoffset: -123.84;
    /* -123.84 */
}

/* 7つ目（3%） */
.system_wrapper .service_container .inner .content .graph_box .circle circle:nth-child(7) {
    stroke: #F39141;
    stroke-dasharray: 5.09, 169.65;
    stroke-dashoffset: -137.41;
    /* -137.41 */
}

/* 8つ目（16%） */
.system_wrapper .service_container .inner .content .graph_box .circle circle:nth-child(8) {
    stroke: #F5E11E;
    stroke-dasharray: 27.14, 169.65;
    stroke-dashoffset: -142.5;
    /* -142.5 */
}

.system_wrapper .service_container .inner .content .graph_box .circle circle:nth-child(9) {
    stroke: #FFF;
    stroke-dasharray: 169.65, 169.65;
    stroke-dashoffset: 0;
    transform: scaleX(-1) rotate(180deg);
    transform-origin: 50% 50%;
}

.system_wrapper .service_container .inner .content .graph_box.active .circle circle:nth-child(9) {
    animation: circleDraw .5s ease forwards;
}

.system_wrapper .service_container .inner .content .graph_box .label {
    position: absolute;
    font-size: 1.9vw;
    font-weight: 900;
    line-height: 2;
    letter-spacing: 0.05em;
    opacity: 0;
    transition: .3s .7s;
}

.system_wrapper .service_container .inner .content .graph_box.active .label {
    opacity: 1;
}

.system_wrapper .service_container .inner .content .graph_box .label:nth-of-type(1) {
    top: 0;
    right: 8%;
}

.system_wrapper .service_container .inner .content .graph_box .label:nth-of-type(2) {
    bottom: 27%;
    right: -7%;
}

.system_wrapper .service_container .inner .content .graph_box .label:nth-of-type(3) {
    bottom: -10%;
    right: 35%;
}

.system_wrapper .service_container .inner .content .graph_box .label:nth-of-type(4) {
    bottom: -5%;
    left: 15%;
}

.system_wrapper .service_container .inner .content .graph_box .label:nth-of-type(5) {
    bottom: 25%;
    left: -5%;
}

.system_wrapper .service_container .inner .content .graph_box .label:nth-of-type(6) {
    top: 40%;
    left: -5%;
}

.system_wrapper .service_container .inner .content .graph_box .label:nth-of-type(7) {
    top: 21%;
    left: 0%;
}

.system_wrapper .service_container .inner .content .graph_box .label:nth-of-type(8) {
    top: -5%;
    left: 15%;
}

@keyframes circleDraw {
    from {
        stroke-dasharray: 169.65, 169.65;
    }

    to {
        stroke-dasharray: 0, 169.65;
    }
}

.system_wrapper .service_container .inner .content .list_box {
    width: calc(100% - 6.8vw - 45vw);
}

.system_wrapper .service_container .inner .content .list_box ul {
    font-style: normal;
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.05em;
}

.system_wrapper .service_container .inner .content .list_box ul.main li {
    position: relative;
    margin-left: 2em;
}

.system_wrapper .service_container .inner .content .list_box ul.main li:not(:first-of-type) {
    margin-top: 10px;
}

.system_wrapper .service_container .inner .content .list_box ul.main li:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 10px;
    left: -2em;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.system_wrapper .service_container .inner .content .list_box ul.main li:nth-of-type(1):before {
    background: #06EB0F;
}

.system_wrapper .service_container .inner .content .list_box ul.main li:nth-of-type(2):before {
    background: #64FFB7;
}

.system_wrapper .service_container .inner .content .list_box ul.main li:nth-of-type(3):before {
    background: #33AAE3;
}

.system_wrapper .service_container .inner .content .list_box ul.main li:nth-of-type(4):before {
    background: #DC3A9F;
}

.system_wrapper .service_container .inner .content .list_box ul.main li:nth-of-type(5):before {
    background: #F32D47;
}

.system_wrapper .service_container .inner .content .list_box ul.main li:nth-of-type(6):before {
    background: #F39243;
}

.system_wrapper .service_container .inner .content .list_box ul.main li:nth-of-type(7):before {
    background: #F5E120;
}

.system_wrapper .case_container {
    margin-top: 180px;
}

.system_wrapper .case_container .inner {
    margin: 0 0 0 auto;
    width: 90vw;
}

.system_wrapper .case_container .inner .text {
    margin-top: 20px;
}

.system_wrapper .case_container .inner .content {
    display: flex;
    align-items: flex-start;
    gap: 38px;
    margin-top: 80px;
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.system_wrapper .case_container .inner .content::-webkit-scrollbar {
    display: none;
}

.system_wrapper .case_container .inner .content .box {
    padding: 45px 0;
    min-width: calc((100% - 38px)/2.3);
    background: #F4F4F4;
    border-radius: 5px;
}

.system_wrapper .case_container .inner .content .box:last-of-type {
    margin-right: 10%;
}

.system_wrapper .case_container .inner .content .box .inner {
    margin: 0 auto;
    width: 90%;
}

.system_wrapper .case_container .inner .content .box .inner .ttl {
    padding-bottom: 25px;
    width: 100%;
    font-size: clamp(20px, 1.6vw, 28px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
    border-bottom: 2px solid var(--base-color);
}

.system_wrapper .case_container .inner .content .box .inner .text {
    margin-top: 24px;
}

.system_wrapper .case_container .inner .content .box .inner .type {
    margin-top: 40px;
    font-size: clamp(12px, 1.1vw, 18px);
}

.system_wrapper .case_container .inner .content .box .inner .type p {
    line-height: 1;
}

.system_wrapper .case_container .inner .content .box .inner .type ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
}

.system_wrapper .case_container .inner .content .box .inner .type ul li {
    padding: 6px;
    background: var(--base-color);
    color: var(--text-color);
    font-size: clamp(10px, .9vw, 16px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
}

.system_wrapper .case_container .inner .content .box .inner .tools {
    margin-top: 16px;
}

.system_wrapper .case_container .inner .content .box .inner .tools p {
    line-height: 1;
}

.system_wrapper .case_container .inner .content .box .inner .tools ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
}

.system_wrapper .case_container .inner .content .box .inner .tools ul li {
    padding: 6px;
    background: var(--base-color);
    color: var(--text-color);
    font-size: clamp(10px, .9vw, 16px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
}

.system_wrapper .case_container .inner .scrollbar-wrapper {
    position: relative;
    margin-top: 30px;
    width: 90%;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: #f4f4f4;
}

.system_wrapper .case_container .inner .scrollbar-wrapper .scrollbar {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100%/6);
    height: 100%;
    background: var(--base-color);
    border-radius: 5px;
}

.system_wrapper .area_container {
    margin-top: 180px;
}

.system_wrapper .area_container .inner {
    margin: 0 auto;
    width: 80vw;
}

.system_wrapper .area_container .inner .content {
    display: flex;
    align-items: flex-start;
    gap: 50px;
    margin-top: 20px;
}

.system_wrapper .area_container .inner .content .text_area {
    width: 60%;
}

.system_wrapper .area_container .inner .content .text_area .area_list {
    margin-top: 90px;
}

.system_wrapper .area_container .inner .content .text_area .area_list dl {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 23px;
    width: 100%;
    background: #F4F4F4;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.05em;
}

.system_wrapper .area_container .inner .content .text_area .area_list dl:not(:first-of-type) {
    margin-top: 10px;
}

.system_wrapper .area_container .inner .content .text_area .area_list dl dt {
    width: 90px;
}

.system_wrapper .area_container .inner .content .text_area .area_list dl dd {
    width: calc(100% - 90px - 20px);
}

.system_wrapper .area_container .inner .content .map_area {
    width: calc(100% - 60% - 50px);
}

.system_wrapper .area_container .inner .content .map_area .gradTextAnimation {
    display: block;
    width: 100%;
}

.system_wrapper .area_container .inner .content .map_area img {
    width: 100%;
}

.system_wrapper .support_container {
    margin-top: 180px;
}

.system_wrapper .support_container .scroll_wrap {
    overflow: hidden;
    width: 100vw;
}

.system_wrapper .support_container .scroll_wrap .scroll_track {
    display: flex;
    width: max-content;
}

.system_wrapper .support_container .scroll_wrap .scroll_track .scroll_inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
}

.system_wrapper .support_container .scroll_wrap .scroll_track .scroll_inner.scroll01 {
    animation: infiniteScroll1 100s linear infinite;
}

.system_wrapper .support_container .scroll_wrap .scroll_track .scroll_inner.scroll02 {
    animation: infiniteScroll2 100s -50s linear infinite;
}

.system_wrapper .support_container .scroll_wrap .scroll_track.opp .scroll_inner.scroll01 {
    animation: infiniteScroll3 100s linear infinite;
}

.system_wrapper .support_container .scroll_wrap .scroll_track.opp .scroll_inner.scroll02 {
    animation: infiniteScroll4 100s -50s linear infinite;
}

.system_wrapper .support_container .scroll_wrap .scroll_track .scroll_inner .item {
    white-space: nowrap;
    font-family: var(--sub-font);
    font-size: clamp(48px, 6vw, 100px);
    font-weight: 800;
    line-height: 2;
    letter-spacing: 0.05em;
}

@keyframes infiniteScroll1 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes infiniteScroll2 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-200%);
    }
}

@keyframes infiniteScroll3 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes infiniteScroll4 {
    0% {
        transform: translateX(-200%);
    }

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

.system_wrapper .support_container .inner {
    margin: 90px auto;
    width: 80vw;
}

.system_wrapper .support_container .inner h3 {
    font-size: clamp(24px, 2vw, 38px);
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0;
}

.system_wrapper .support_container .inner p.main_text {
    margin-top: 12px;
}

.system_wrapper .support_container .inner .content .list_box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;

}

.system_wrapper .support_container .inner .content .list_box p {
    padding: 22px 65px;
    width: 100%;
    background: #F4F4F4;
    font-size: max(16px, 1.95vw);
    font-weight: 800;
    line-height: 2;
    letter-spacing: 0.05em;
}

.system_wrapper .support_container .inner .content .text_box {
    margin-top: 55px;
}

.system_wrapper .support_container .inner .content .text_box dl {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    padding: 20px 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--base-color);
}

.system_wrapper .support_container .inner .content .text_box dl:first-of-type {
    border-top: 1px solid var(--base-color);
}

.system_wrapper .support_container .inner .content .text_box dl dt {
    width: 29px;
}

.system_wrapper .support_container .inner .content .text_box dl dd {
    width: calc(100% - 36px - 29px);
}

.design_wrapper .flow_container,
.system_wrapper .flow_container {
    margin-top: 180px;
}

.design_wrapper .flow_container .inner,
.system_wrapper .flow_container .inner {
    margin: 0 auto;
    width: 80vw;
}

.design_wrapper .flow_container .inner ul,
.system_wrapper .flow_container .inner ul {
    margin-top: 80px;
}

.design_wrapper .flow_container .inner ul li,
.system_wrapper .flow_container .inner ul li {
    position: relative;
    padding: 60px 0;
    background: var(--base-color);
    color: var(--text-color);
    border-bottom: 1px solid var(--text-color);
    border-radius: 5px;
    transform: translateY(100px);
    opacity: 0;
    transition: .5s;
}

.design_wrapper .flow_container .inner ul li.active,
.system_wrapper .flow_container .inner ul li.active {
    opacity: 1;
    transform: translateY(0);
}

.design_wrapper .flow_container .inner ul li:nth-of-type(1),
.system_wrapper .flow_container .inner ul li:nth-of-type(1) {
    z-index: 5;
}

.design_wrapper .flow_container .inner ul li:nth-of-type(2),
.system_wrapper .flow_container .inner ul li:nth-of-type(2) {
    z-index: 4;
}

.design_wrapper .flow_container .inner ul li:nth-of-type(3),
.system_wrapper .flow_container .inner ul li:nth-of-type(3) {
    z-index: 3;
}

.design_wrapper .flow_container .inner ul li:nth-of-type(4),
.system_wrapper .flow_container .inner ul li:nth-of-type(4) {
    z-index: 2;
}

.design_wrapper .flow_container .inner ul li:nth-of-type(5),
.system_wrapper .flow_container .inner ul li:nth-of-type(5) {
    z-index: 1;
}

.design_wrapper .flow_container .inner ul li:not(:last-of-type):after,
.system_wrapper .flow_container .inner ul li:not(:last-of-type):after {
    position: absolute;
    bottom: -25px;
    left: 10%;
    z-index: 10;
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent var(--base-color) var(--base-color) transparent;
    border-width: 25px;
    border-radius: 0 0 10px 0;
    box-shadow: 1px 1px 1px var(--text-color);
    transform: rotate(45deg);
}


.design_wrapper .flow_container .inner ul li .inner,
.system_wrapper .flow_container .inner ul li .inner {
    display: flex;
    align-items: center;
    gap: 9vw;
    margin: 0 auto;
    width: 85%;
}

.design_wrapper .flow_container .inner ul li .inner p.number,
.system_wrapper .flow_container .inner ul li .inner p.number {
    width: 9vw;
    font-family: var(--sub-font);
    font-size: 6.9vw;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}

.design_wrapper .flow_container .inner ul li .inner .text_area,
.system_wrapper .flow_container .inner ul li .inner .text_area {
    display: flex;
    flex-direction: column;

    width: calc(100% - 9vw - 9vw);
}

.design_wrapper .flow_container .inner ul li .inner .text_area p:first-of-type,
.system_wrapper .flow_container .inner ul li .inner .text_area p:first-of-type {
    font-size: clamp(26px, 2vw, 38px);
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0;
}

.design_wrapper .flow_container .inner ul li .inner .text_area p:last-of-type,
.system_wrapper .flow_container .inner ul li .inner .text_area p:last-of-type {
    margin-top: 14px;
}

.design_wrapper .faq_container,
.system_wrapper .faq_container {
    margin-top: 180px;
}

.design_wrapper .faq_container .inner,
.system_wrapper .faq_container .inner {
    margin: 0 auto;
    width: 80vw;
}

.design_wrapper .faq_container .inner .faq-tabs,
.system_wrapper .faq_container .inner .faq-tabs {
    margin-top: 80px;
}

.design_wrapper .faq_container .inner .faq-tabs .tab-list,
.system_wrapper .faq_container .inner .faq-tabs .tab-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.design_wrapper .faq_container .inner .faq-tabs .tab-list li a,
.system_wrapper .faq_container .inner .faq-tabs .tab-list li a {
    padding: 25px 40px;
    background: #F4F4F4;
    border-radius: 5px;
    text-align: center;
    transition: .3s;
}

.design_wrapper .faq_container .inner .faq-tabs .tab-list li a:hover,
.system_wrapper .faq_container .inner .faq-tabs .tab-list li a:hover {
    opacity: .7;
}

.design_wrapper .faq_container .inner .faq-tabs .tab-list li.active a,
.system_wrapper .faq_container .inner .faq-tabs .tab-list li.active a {
    background: var(--base-color);
}

.design_wrapper .faq_container .inner .faq-tabs .tab-list li a,
.system_wrapper .faq_container .inner .faq-tabs .tab-list li a {
    color: #979797 !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
}

.design_wrapper .faq_container .inner .faq-tabs .tab-list li.active a,
.system_wrapper .faq_container .inner .faq-tabs .tab-list li.active a {
    color: var(--text-color) !important;
}

.design_wrapper .faq_container .inner .faq-contents,
.system_wrapper .faq_container .inner .faq-contents {
    margin-top: 120px;
}

.design_wrapper .faq_container .inner .faq-contents .tab-content,
.system_wrapper .faq_container .inner .faq-contents .tab-content {
    display: none;
}

.design_wrapper .faq_container .inner .faq-contents .tab-content.active,
.system_wrapper .faq_container .inner .faq-contents .tab-content.active {
    display: block;
}

.design_wrapper .faq_container .inner .faq-contents .tab-content .faq-item,
.system_wrapper .faq_container .inner .faq-contents .tab-content .faq-item {
    display: flex;
    align-items: flex-start;
    gap: 2.7vw;
    padding: 45px 0;
    width: 100%;
    border-bottom: 1px solid var(--base-color);
}

.design_wrapper .faq_container .inner .faq-contents .tab-content .faq-item:first-of-type,
.system_wrapper .faq_container .inner .faq-contents .tab-content .faq-item:first-of-type {
    border-top: 1px solid var(--base-color);
}

.design_wrapper .faq_container .inner .faq-contents .tab-content .faq-item p.q_number,
.system_wrapper .faq_container .inner .faq-contents .tab-content .faq-item p.q_number {
    width: 4.6vw;
    min-width: 65px;
    font-family: var(--sub-font);
    font-size: clamp(23px, 1.6vw, 28px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}

.design_wrapper .faq_container .inner .faq-contents .tab-content .faq-item .text_area,
.system_wrapper .faq_container .inner .faq-contents .tab-content .faq-item .text_area {
    width: calc(100% - 4.6vw - 2.7vw);
    max-width: calc(100% - 65px - 2.7vw);
}

.design_wrapper .faq_container .inner .faq-contents .tab-content .faq-item .text_area p.faq-question,
.system_wrapper .faq_container .inner .faq-contents .tab-content .faq-item .text_area p.faq-question {
    font-family: var(--sub-font);
    font-size: clamp(26px, 1.6vw, 28px);
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0;
}

.design_wrapper .faq_container .inner .faq-contents .tab-content .faq-item .text_area .faq-answer,
.system_wrapper .faq_container .inner .faq-contents .tab-content .faq-item .text_area .faq-answer {
    margin-top: 35px;
    color: #979797;
}

.design_wrapper .simulator_container {
    position: relative;
    margin-top: 180px;
    padding: 170px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--base-color);
    cursor: pointer;
    transition: .3s;
}

.design_wrapper .simulator_container::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../img/img_de_sim_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: .3s;
}

.design_wrapper .simulator_container::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--base-color);
    opacity: 0;
    transition: .3s;
}

.design_wrapper .simulator_container:hover {
    background: transparent;
}

.design_wrapper .simulator_container:hover:before {
    opacity: 1;
}

.design_wrapper .simulator_container:hover::after {
    opacity: .6;
}

.design_wrapper .simulator_container .btn {
    gap: 85px;
}

.design_wrapper .simulator_container .btn .text_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10px + .2em);
}

.design_wrapper .simulator_container .btn .text_area svg {
    width: 60vw;
    min-width: 290px;
}

.design_wrapper .simulator_container .btn .text_area svg path {
    transition: .3s;
}

.design_wrapper .simulator_container:hover .btn .text_area svg path {
    fill: transparent;
    stroke: var(--text-color);
}

.design_wrapper .simulator_container .btn .text_area p {
    color: var(--text-color);
    font-size: clamp(14px, 2.6vw, 40px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.design_wrapper .simulator_container .btn .arrow {
    width: clamp(20px, 4.8vw, 80px);
}

.design_wrapper .simulator_container .btn .arrow svg {
    width: 100%;
}

.design_wrapper .simulator_container .btn:hover .arrow {
    transform: translate(0px, 0px) !important;
}

.design_wrapper .simulator_container:hover .btn .arrow {
    transform: translate(5px, -5px) !important;
}


.design_wrapper .design_cv {
    padding: 180px 0;
}

.design_wrapper .design_cv .content {
    display: flex;
    flex-direction: column;
    gap: 12em;
    margin: 0 auto;
    width: 90vw;
}

.design_wrapper .design_cv a.btn {
    flex-wrap: wrap;
    gap: 0.1em 20px;
    font-size: clamp(44px, 8.8vw, 140px);
}

.design_wrapper .design_cv a.btn .arrow img {
    width: clamp(20px, 3.95vw, 70px);
}

.design_wrapper .design_cv a.btn p {
    font-size: clamp(14px, 2.2vw, 48px);
}

.system_wrapper .system_cv {
    position: relative;
    margin-top: 180px;
    padding-top: 220px;
    background-image: url(../img/img_sys_cv_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.system_wrapper .system_cv::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--base-color);
    opacity: .8;
}

.system_wrapper .system_cv p.text {
    position: relative;
    margin: 0 auto;
    width: 80vw;
    color: var(--text-color);
}

.system_wrapper .system_cv a.btn {
    position: relative;
    padding: 85px 0;
    width: 100%;
    color: var(--text-color) !important;
    font-size: clamp(23px, 4.86vw, 80px);
    line-height: 1.2;
    border-top: 1px solid var(--text-color);
    border-bottom: 1px solid var(--text-color);
}

.system_wrapper .system_cv a.btn:first-of-type {
    margin-top: 45px;
}

.system_wrapper .system_cv a.btn:last-of-type {
    border-bottom: none;
}

.system_wrapper .system_cv a.btn:hover {
    background: var(--text-color);
    color: var(--base-color) !important;
}

.system_wrapper .system_cv a.btn .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 auto;
    width: 80vw;
}

.system_wrapper .system_cv a.btn .arrow svg {
    width: clamp(20px, 2.4vw, 40px);
    transform: translateY(0.3em);
}

.system_wrapper .system_cv a.btn svg path {
    transition: .3s;
}

.system_wrapper .system_cv a.btn:hover svg path {
    fill: var(--base-color);
}

.system_wrapper .system_cv a.btn .inner .ja_text {
    display: flex;
    align-items: baseline;
    width: 100%;
}

.system_wrapper .system_cv a.btn .inner .ja_text p:first-of-type {
    font-size: clamp(18px, 1.8vw, 28px);
    line-height: 1;
}

.system_wrapper .system_cv a.btn .inner .ja_text p:last-of-type {
    line-height: 1;
}



@media screen and (max-width:990px) {

    .design_wrapper .mainText_container .inner,
    .system_wrapper .mainText_container .inner {
        width: 90vw;
    }

    .design_wrapper .strength_container .inner,
    .system_wrapper .strength_container .inner {
        width: 90vw;
    }

    .design_wrapper .work_container .inner {
        width: 90vw;
    }

    .design_wrapper .work_container .work_area ul {
        gap: 30px;
    }

    .design_wrapper .work_container .work_area ul li {
        width: calc((100% - 30px) / 2);
    }

    .system_wrapper .tools_container .inner {
        width: 90vw;
    }

    .system_wrapper .service_container .inner {
        width: 90vw;
    }

    .system_wrapper .service_container .inner .content {
        flex-direction: column;
        align-items: center;
        gap: 120px;
    }

    .system_wrapper .service_container .inner .content .graph_box {
        width: 90%;
    }

    .system_wrapper .service_container .inner .content .graph_box .label {
        font-size: clamp(16px, 2.8vw, 28px);
    }

    .system_wrapper .service_container .inner .content .list_box {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        width: 100%;
    }

    .system_wrapper .service_container .inner .content .list_box ul.main,
    .system_wrapper .service_container .inner .content .list_box .other {
        width: fit-content;
    }

    .system_wrapper .service_container .inner .content .list_box .other {
        margin-top: 0;
    }

    .system_wrapper .case_container .inner {
        width: 90vw;
    }

    .system_wrapper .area_container .inner {
        width: 90vw;
    }

    .system_wrapper .area_container .inner .content {
        flex-direction: column;
    }

    .system_wrapper .area_container .inner .content .text_area {
        width: 100%;
    }

    .system_wrapper .area_container .inner .content .text_area .area_list {
        margin-top: 40px;
    }

    .system_wrapper .area_container .inner .content .map_area {
        margin: 0 auto;
        width: 100%;
        max-width: 500px;
    }

    .system_wrapper .case_container .inner .content {
        gap: 20px;
    }

    .system_wrapper .case_container .inner .content .box {
        min-width: calc((100% - 38px) / 2.1);
    }

    .system_wrapper .support_container .inner {
        width: 90vw;
    }

    .design_wrapper .flow_container .inner,
    .system_wrapper .flow_container .inner {
        width: 90vw;
    }

    .design_wrapper .flow_container .inner ul li .inner,
    .system_wrapper .flow_container .inner ul li .inner {
        gap: 5vw;
    }

    .design_wrapper .flow_container .inner ul li .inner .text_area,
    .system_wrapper .flow_container .inner ul li .inner .text_area {
        width: calc(100% - 5vw - 9vw);
    }

    .design_wrapper .faq_container .inner,
    .system_wrapper .faq_container .inner {
        width: 90vw;
    }

    .design_wrapper .faq_container .inner .faq-tabs .tab-list li,
    .system_wrapper .faq_container .inner .faq-tabs .tab-list li {
        min-width: calc((100% - 8px)/2);
    }

    .design_wrapper .faq_container .inner .faq-tabs .tab-list li a,
    .system_wrapper .faq_container .inner .faq-tabs .tab-list li a {
        padding: 25px 10px;
        width: 100%;
    }

    .design_wrapper .simulator_container::before {
        opacity: 1;
    }

    .design_wrapper .simulator_container::after {
        opacity: .6;
    }

    .design_wrapper .simulator_container .btn .text_area svg path {
        fill: transparent;
        stroke: var(--text-color);
    }

    .system_wrapper .system_cv p.text,
    .system_wrapper .system_cv a.btn .inner {
        width: 90vw;
    }
}

@media screen and (max-width:768px) {

    .design_wrapper .mainText_container,
    .system_wrapper .mainText_container {
        padding: 135px 0;
        height: auto;
    }

    .design_wrapper .strength_container,
    .system_wrapper .strength_container {
        padding: 100px 0;
    }

    .design_wrapper .strength_container .inner .content,
    .system_wrapper .strength_container .inner .content {
        margin-top: 50px;
    }

    .design_wrapper .strength_container .inner .content .box,
    .system_wrapper .strength_container .inner .content .box {
        padding: 48px 0;
    }

    .design_wrapper .strength_container .inner .content .box .inner .ttl p:first-of-type,
    .system_wrapper .strength_container .inner .content .box .inner .ttl p:first-of-type,
    .design_wrapper .strength_container .inner .content .box .inner .ttl p:last-of-type,
    .system_wrapper .strength_container .inner .content .box .inner .ttl p:last-of-type {
        width: 100%;
        min-width: unset;
        max-width: unset;
    }

    .design_wrapper .strength_container .inner .content .box .inner .ttl .sp_only,
    .system_wrapper .strength_container .inner .content .box .inner .ttl .sp_only {
        display: block;
    }

    .design_wrapper .strength_container .inner .content .box .inner .ttl,
    .system_wrapper .strength_container .inner .content .box .inner .ttl {
        flex-direction: column;
    }

    .design_wrapper .strength_container .inner .content .box .inner p.text,
    .system_wrapper .strength_container .inner .content .box .inner p.text {
        margin-top: 24px;
    }

    .design_wrapper .work_container {
        margin-top: 0;
    }

    .design_wrapper .work_container .cate_area p {
        margin-top: 40px;
    }

    .design_wrapper .work_container .work_area {
        margin-top: 110px;
    }

    .design_wrapper .work_container .work_area.first {
        margin-top: 80px;
    }

    .design_wrapper .work_container .work_area ul {
        margin-top: 50px;
    }

    .design_wrapper .work_container .work_area ul li {
        width: 100%;
    }

    .system_wrapper .tools_container {
        margin-top: 110px;
    }

    .system_wrapper .tools_container .inner .content {
        margin-top: 40px;
    }

    .system_wrapper .tools_container .inner .content ul li {
        padding: 20px 30px;
    }

    .system_wrapper .service_container {
        margin-top: 110px;
    }

    .system_wrapper .support_container .inner {
        margin: 40px auto;
    }

    .system_wrapper .support_container .inner .content .list_box p {
        padding: 20px;
        font-size: calc(16px, 2.6vw, 20px);
    }

    .system_wrapper .support_container .inner .content .text_box dl {
        flex-direction: column;
        gap: 0;
    }

    .system_wrapper .support_container .inner .content .text_box dl dt,
    .system_wrapper .support_container .inner .content .text_box dl dd {
        width: 100%;
    }

    .system_wrapper .case_container {
        margin-top: 110px;
    }

    .system_wrapper .case_container .inner {
        width: 95vw;
    }

    .system_wrapper .case_container .inner .content {
        gap: 20px;
        margin-top: 40px;
    }

    .system_wrapper .case_container .inner .content .box {
        min-width: 90%;
    }

    .system_wrapper .case_container .inner .content .box:last-of-type {
        margin-right: 5%;
    }

    .system_wrapper .case_container .inner .content .box .inner .ttl {
        padding-bottom: 15px;
    }

    .system_wrapper .case_container .inner .content .box .inner .text {
        margin-top: 15px;
    }

    .system_wrapper .case_container .inner .content .box .inner .type {
        margin-top: 20px;
    }

    .system_wrapper .area_container {
        margin-top: 110px;
    }

    .system_wrapper .area_container .inner .content .text_area .area_list dl {
        flex-direction: column;
        gap: 0;
    }

    .system_wrapper .area_container .inner .content .text_area .area_list dl dt,
    .system_wrapper .area_container .inner .content .text_area .area_list dl dd {
        width: 100%;
    }

    .design_wrapper .flow_container,
    .system_wrapper .flow_container {
        margin-top: 110px;
    }

    .design_wrapper .flow_container .inner ul,
    .system_wrapper .flow_container .inner ul {
        margin-top: 50px;
    }

    .design_wrapper .flow_container .inner ul li,
    .system_wrapper .flow_container .inner ul li {
        padding: 40px 0;
    }

    .design_wrapper .flow_container .inner ul li:not(:last-of-type):after,
    .system_wrapper .flow_container .inner ul li:not(:last-of-type):after {
        bottom: -14px;
        left: 50%;
        border-width: 15px;
        border-radius: 0 0 5px 0;
        transform: translateX(-50%) rotate(45deg);
    }

    .design_wrapper .flow_container .inner ul li .inner,
    .system_wrapper .flow_container .inner ul li .inner {
        flex-direction: column;
        align-items: flex-start;
        width: 90%;
    }

    .design_wrapper .flow_container .inner ul li .inner p.number,
    .system_wrapper .flow_container .inner ul li .inner p.number {
        width: 100%;
        font-size: 78px;
        text-align: unset;
    }

    .design_wrapper .flow_container .inner ul li .inner .text_area,
    .system_wrapper .flow_container .inner ul li .inner .text_area {
        width: 100%;
    }

    .design_wrapper .faq_container,
    .system_wrapper .faq_container {
        margin-top: 110px;
    }

    .design_wrapper .faq_container .inner .faq-tabs,
    .system_wrapper .faq_container .inner .faq-tabs {
        margin-top: 40px;
    }

    .design_wrapper .faq_container .inner .faq-tabs .tab-list li,
    .system_wrapper .faq_container .inner .faq-tabs .tab-list li {
        width: 100%;
    }

    .design_wrapper .faq_container .inner .faq-contents .tab-content .faq-item,
    .system_wrapper .faq_container .inner .faq-contents .tab-content .faq-item {
        flex-direction: column;
        gap: 16px;
    }

    .design_wrapper .faq_container .inner .faq-contents .tab-content .faq-item p.q_number,
    .system_wrapper .faq_container .inner .faq-contents .tab-content .faq-item p.q_number,
    .design_wrapper .faq_container .inner .faq-contents .tab-content .faq-item .text_area,
    .system_wrapper .faq_container .inner .faq-contents .tab-content .faq-item .text_area {
        width: 100%;
        min-width: unset;
        max-width: unset;
    }

    .design_wrapper .faq_container .inner .faq-contents .tab-content .faq-item .text_area .faq-answer,
    .system_wrapper .faq_container .inner .faq-contents .tab-content .faq-item .text_area .faq-answer {
        margin-top: 24px;
    }

    .design_wrapper .simulator_container {
        margin-top: 110px;
        padding: 100px 0;
    }

    .design_wrapper .simulator_container .btn {
        gap: 20px;
    }

    .design_wrapper .design_cv,
    .design_wrapper .system_cv {
        padding: 100px 0;
    }
}

@media screen and (max-width:500px) {

    .design_wrapper .mainText_container .inner h1 br.sp_only,
    .system_wrapper .mainText_container .inner h1 br.sp_only {
        display: block;
    }

    .design_wrapper .mainText_container .inner h1 span:nth-of-type(3),
    .system_wrapper .mainText_container .inner h1 span:nth-of-type(3) {
        margin-top: 32px;
    }

    .design_wrapper .strength_container .inner .content .box .inner .ttl,
    .system_wrapper .strength_container .inner .content .box .inner .ttl {
        gap: 10px;
    }

    .design_wrapper .work_container .cate_area .cate_box li {
        width: 100%;
    }

    .design_wrapper .work_container .cate_area .cate_box li a {
        padding: 15px 0;
        width: 100%;
    }

    .system_wrapper .tools_container .inner .content ul li {
        width: 100%;
    }

    .system_wrapper .service_container .inner .content {
        gap: 60px;
    }

    .system_wrapper .support_container .inner .content .list_box ul {
        width: 100%;
        max-width: unset;
    }

    .system_wrapper .support_container .inner .content .list_box ul li {
        font-size: 6.5vw;
    }
}

/*---------------------------------------------------------
                HP料金シミュレーション
---------------------------------------------------------*/
#hp_simulator .modal_content {
    position: relative;
}

#hp_simulator .modal_content .nowSimulation {
    position: absolute;
    top: 3%;
    left: 3%;
    color: var(--text-color);
    font-size: 16px;
}

#hp_simulator .modal_content .q_area {
    display: none;
    width: 100%;
    max-width: 900px;
}

#hp_simulator .modal_content .q_area .q_ttl {
    font-weight: 700;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.7;
}

#hp_simulator .modal_content .q_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

#hp_simulator .modal_content .q_list label input {
    display: none;
}

#hp_simulator .modal_content .q_list label {
    padding: 24px 20px;
    background: var(--text-color);
    border: 1px solid #2A2A2A;
    border-radius: 5px;
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--base-color);
    transition: .3s;
    cursor: pointer;
}

#hp_simulator .modal_content .q_list label:has(:checked) {
    background: #2A2A2A;
    color: var(--text-color);
    border-color: var(--text-color);
}

#hp_simulator .modal_content #answer .q_ttl {
    text-align: left;
    font-size: clamp(24px, 5vw, 68px);
    padding-bottom: 32px;
    line-height: 1.4;
}

#hp_simulator .modal_content #answer .q_ttl span {
    font-size: clamp(48px, 7vw, 88px);
    margin: 0 4px;
}

#hp_simulator .discript_text p,
#hp_simulator .annotation_text p {
    position: relative;
    margin-left: 1.5em;
    font-size: clamp(14px, 1.6vw, 18px);
}

#hp_simulator .discript_text p::before,
#hp_simulator .annotation_text p::before {
    position: absolute;
    top: 0px;
    left: -1.5em;
    display: block;
    content: "※";
}


#hp_simulator .modal_content #hp_simulator_back_button {
    width: fit-content;
    margin: 40px auto 0;
    background: none;
    color: var(--text-color);
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    transition: .3s;
}

#hp_simulator .modal_content .btn {
    margin: 56px 0 0 auto;
    color: var(--text-color) !important;
    font-size: max(5vw, 32px);
}

#hp_simulator .modal_content .btn img {
    width: clamp(18px, 3vw, 50px);
}

@media (hover: hover) and (pointer: fine) {
    #hp_simulator .modal_content .q_list label:hover {
        background: #2A2A2A;
        color: var(--text-color);
        border-color: var(--text-color);
    }

    #hp_simulator .modal_content #hp_simulator_back_button:hover {
        opacity: .7;
    }
}

@media screen and (max-width:500px) {
    #hp_simulator .modal_content .nowSimulation {
        font-size: 12px;
    }
}

/*---------------------------------------------------------
                実績一覧
---------------------------------------------------------*/
.work_wrapper {
    padding: 270px 0 150px;
    background: var(--text-color);
    color: var(--base-color);
}

.work_wrapper .work_container {
    margin: 0 auto;
    width: 80vw;
}

.work_wrapper .work_container h1 {
    margin-bottom: 80px;
    font-size: clamp(36px, 7vw, 80px);
}

.work_wrapper .work_container .work_tabs {
    margin-top: 150px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.work_wrapper .work_container .work_tabs li {
    border-radius: 5px;
    background: #D8D8D8;
}

.work_wrapper .work_container .work_tabs li.active {
    background: var(--base-color);
}

.work_wrapper .work_container .work_tabs li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    color: var(--text-color);
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.05em;
    transition: .3s;
}

.work_wrapper .work_container .work_tabs li a:hover {
    opacity: .7;
}

.work_wrapper .work_container .work_list {
    display: flex;
    flex-wrap: wrap;
    gap: 7vw;
    margin-top: 75px;
}

.work_wrapper .work_container .work_list li {
    width: calc((100% - 7vw)/2);
}

.work_wrapper .work_container .work_list li a {
    width: 100%;
    color: var(--base-color);
}

.work_wrapper .work_container .work_list li a .thumbnail {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.work_wrapper .work_container .work_list li a .thumbnail img {
    width: 100%;
    height: auto;
    transition: .3s;
}

.work_wrapper .work_container .work_list li a:hover .thumbnail img {
    transform: scale(1.1);
}

.work_wrapper .work_container .work_list li a .bottom_area {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 30px;
}

.work_wrapper .work_container .work_list li a .bottom_area .text_box ul.work_categories {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.work_wrapper .work_container .work_list li a .bottom_area .text_box ul.work_categories li {
    padding: 10px 50px;
    width: fit-content;
    background: var(--base-color);
    color: var(--text-color);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    border-radius: 5px;
}

.work_wrapper .work_container .work_list li a .bottom_area .text_box .title {
    margin-top: 12px;
}

.work_wrapper .work_container .work_list li a .bottom_area .text_box .company_info {
    margin-top: 4px;
    color: #AEAEAE;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.work_wrapper .work_container .work_list li a .bottom_area .text_box .job_role {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.work_wrapper .work_container .work_list li a .bottom_area .text_box .job_role li {
    padding: 6px 12px;
    width: fit-content;
    border: 1px solid var(--base-color);
    border-radius: 60px;
}

.work_wrapper .work_container .work_list li a .bottom_area .btn {
    gap: 0;
}

@media screen and (max-width:990px) {
    .work_wrapper .work_container {
        width: 90vw;
    }

    .work_wrapper .work_container .work_tabs {
        margin-top: 75px;
    }

    .work_wrapper .work_container .work_list {
        gap: 80px 30px;
    }

    .work_wrapper .work_container .work_list li {
        width: calc((100% - 30px) / 2);
    }
}

@media screen and (max-width:768px) {
    .work_wrapper {
        padding: 150px 0 80px;
    }

    .work_wrapper .work_container .work_list li {
        width: 100%;
    }
}

@media screen and (max-width:500px) {
    .work_wrapper .work_container h1 {
        margin-bottom: 50px;
    }

    .work_wrapper .work_container .work_list li a .bottom_area {
        margin-top: 20px;
    }

    .work_wrapper .work_container .work_list li a .bottom_area .text_box ul.work_categories li {
        padding: 10px 15px;
        font-size: 12px;
    }

    .work_wrapper .work_container .work_list li a .bottom_area .text_box .job_role {
        margin-top: 15px;
    }

    #hp_simulator .annotation_text p {
        font-size: 10px;
    }
}

/*---------------------------------------------------------
                実績詳細
---------------------------------------------------------*/
.work_detail_wrapper {
    padding: 270px 0 240px;
    background: var(--text-color);
    color: var(--base-color);
}

.work_detail_wrapper .work_detail_container {
    margin: 0 auto;
    width: 80vw;
}

.work_detail_wrapper .work_detail_container .thumbnail {
    margin-top: 96px;
    width: 100%;
}

.work_detail_wrapper .work_detail_container .thumbnail img {
    width: 100%;
    height: auto;
}

.work_detail_wrapper .work_detail_container .top_area {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 80px;
}

.work_detail_wrapper .work_detail_container .top_area .text_box {
    width: calc(100% - 270px);
}

.work_detail_wrapper .work_detail_container .top_area .text_box a {
    color: var(--base-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-decoration: underline;
}

.work_detail_wrapper .work_detail_container .top_area .text_box a span {
    display: inline-block;
    transform: rotate(45deg);
}

.work_detail_wrapper .work_detail_container .top_area .text_box .title {
    display: block;
    margin-top: 30px;
    font-size: clamp(34px, 3.6vw, 58px);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0;
}

.work_detail_wrapper .work_detail_container .top_area .text_box .company_info {
    margin-top: 30px;
    font-size: clamp(16px, 2.6vw, 24px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.work_detail_wrapper .work_detail_container .top_area .text_box .job_role {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
}

.work_detail_wrapper .work_detail_container .top_area .text_box .job_role li {
    padding: 10px 20px;
    width: fit-content;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    border: 1px solid var(--base-color);
    border-radius: 50px;
}

.work_detail_wrapper .work_detail_container .top_area .color_box .color-list {
    display: flex;
    align-items: center;
    gap: 10px;
}

.work_detail_wrapper .work_detail_container .top_area .color_box .color-list li {
    width: 36px;
    height: 36px;
    border: 1px solid #333;
    border-radius: 50%;
}

.work_detail_wrapper .work_detail_container .content {
    margin-top: 150px;
}

.work_detail_wrapper .work_detail_container .content h1 {
    position: relative;
    margin-bottom: 1em;
    padding: 30px 20px;
    font-size: clamp(24px, 2.7vw, 42px);
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0;
    border-left: 4px solid var(--base-color);
    border-bottom: 4px solid var(--base-color);
}

.work_detail_wrapper .work_detail_container .content h1::after {
    position: absolute;
    bottom: -12px;
    left: 10%;
    z-index: 10;
    display: block;
    content: '';
    width: 15px;
    height: 15px;
    background: var(--text-color);
    border-bottom: 4px solid var(--base-color);
    border-left: 4px solid var(--base-color);
    transform: rotate(-45deg);
}

.work_detail_wrapper .work_detail_container .content h2 {
    position: relative;
    margin-bottom: 0.7em;
    padding: 20px;
    font-size: clamp(22px, 2vw, 32px);
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0;
    border-bottom: 3px solid var(--base-color);
}

.work_detail_wrapper .work_detail_container .content h2::after {
    position: absolute;
    bottom: -8px;
    left: 0;
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background-color: var(--base-color);
}

.work_detail_wrapper .work_detail_container .content h3 {
    margin-bottom: .9em;
    padding: 10px 20px;
    font-size: clamp(20px, 1.5vw, 28px);
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0;
    border-bottom: 2px dashed #333;
}

.work_detail_wrapper .work_detail_container .content table tr,
.work_detail_wrapper .work_detail_container .content table td {
    vertical-align: top !important;
}

.work_detail_wrapper .work_detail_container .content table tr td img {
    display: block;
    margin: 0 auto;
    width: 90%;
}

.work_detail_wrapper .work_detail_container .btn.cv {
    flex-wrap: wrap;
    gap: 0.1em 20px;
    margin-top: 295px;
    color: var(--base-color);
    font-size: clamp(44px, 8.8vw, 140px);
}

.work_detail_wrapper .work_detail_container .btn.cv .arrow img {
    width: clamp(20px, 3.95vw, 70px);
}

.work_detail_wrapper .work_detail_container .btn.cv p {
    font-size: clamp(14px, 2.2vw, 48px);
}

.work_detail_wrapper .work_detail_container .archive_list {
    display: flex;
    gap: 56px 25px;
    margin-top: 230px;
}

.work_detail_wrapper .work_detail_container .archive_list li {
    width: calc((100% - 50px)/3);
}

.work_detail_wrapper .work_detail_container .archive_list li a {
    width: 100%;
    color: var(--base-color);
}

.work_detail_wrapper .work_detail_container .archive_list li a .thumbnail {
    margin-top: 0;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.work_detail_wrapper .work_detail_container .archive_list li a .thumbnail img {
    width: 100%;
    height: auto;
}

.work_detail_wrapper .work_detail_container .archive_list li a .text_box {
    padding: 14px 0;
    border-radius: 20px;
}

.work_detail_wrapper .work_detail_container .archive_list li a .text_box .inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    width: 100%;
}


.work_detail_wrapper .work_detail_container .archive_list li a .text_box .inner .text {
    width: calc(100% - 20px - 14px);
}

.work_detail_wrapper .work_detail_container .archive_list li a .text_box .inner .text .title {
    font-size: clamp(16px, 2.4vw, 20px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.work_detail_wrapper .work_detail_container .archive_list li a .text_box .inner .text .company_info {
    margin-top: 10px;
    color: #AEAEAE;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.work_detail_wrapper .work_detail_container .archive_list li a .text_box .inner .text .job_role {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.work_detail_wrapper .work_detail_container .archive_list li a .text_box .inner .text .job_role li {
    padding: 5px 10px;
    width: fit-content;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    border: 1px solid var(--base-color);
    border-radius: 14px;
}

.work_detail_wrapper .work_detail_container .archive_list li a .text_box .inner .btn {
    font-size: 0;
    gap: 0;
}

.work_detail_wrapper .work_detail_container .archive_list li a .text_box .inner .btn img {
    width: 14px;
}

.work_detail_wrapper .work_detail_container .btn.back {
    margin: 80px auto 0;
    color: var(--base-color);
}

@media screen and (max-width:990px) {
    .work_detail_wrapper .work_detail_container {
        width: 90vw;
    }

    .work_detail_wrapper .work_detail_container .top_area .text_box .job_role {
        gap: 15px;
        margin-top: 40px;
    }

    .work_detail_wrapper .work_detail_container .top_area .text_box {
        width: calc(100% - 230px);
    }

    .work_detail_wrapper .work_detail_container .top_area .color_box .color-list li {
        width: 30px;
        height: 30px;
    }

    .work_detail_wrapper .work_detail_container .content {
        margin-top: 80px;
    }

    .work_detail_wrapper .work_detail_container .archive_list {
        flex-direction: column;
        margin-top: 80px;
    }

    .work_detail_wrapper .work_detail_container .archive_list li {
        width: 100%;
    }
}

@media screen and (max-width:768px) {
    .work_detail_wrapper {
        padding-top: 120px;
    }

    .work_detail_wrapper .work_detail_container .top_area {
        flex-direction: column;
        gap: 30px;
        margin-top: 40px;
    }

    .work_detail_wrapper .work_detail_container .thumbnail {
        margin-top: 56px;
    }

    .work_detail_wrapper .work_detail_container .top_area .text_box {
        width: 100%;
    }

    .work_detail_wrapper .work_detail_container .top_area .text_box .title {
        margin-top: 20px;
    }


    .work_detail_wrapper .work_detail_container .top_area .text_box .company_info {
        margin-top: 20px;
    }

    .work_detail_wrapper .work_detail_container .top_area .text_box .job_role {
        margin-top: 20px;
    }

    .work_detail_wrapper .work_detail_container .content h1 {
        padding: 10px;
    }

    .work_detail_wrapper .work_detail_container .content h2 {
        padding: 10px;
    }

    .work_detail_wrapper .work_detail_container .content h3 {
        padding: 10px;
    }

    .work_detail_wrapper .work_detail_container .btn.cv {
        margin-top: 150px;
    }
}

/*---------------------------------------------------------
                ニュースアーカイブ
---------------------------------------------------------*/

.news_wrapper .news_container {
    margin: 0 auto;
    padding: 200px 0;
    width: 85vw;
    max-width: 1300px;
}

.news_wrapper .news_container .news_content {
    /* display: flex;
    gap: 70px; */
    margin-top: 80px;
}

/* .news_wrapper .news_container .news_content .cate_list {
    width: 110px;
}

.news_wrapper .news_container .news_content .cate_list p {
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}

.news_wrapper .news_container .news_content .cate_list ul {
    margin: 17px 0 0 1em;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news_wrapper .news_container .news_content .cate_list ul li {
    list-style: disc;
}

.news_wrapper .news_container .news_content .cate_list ul li a {
    color: var(--text-color01);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    opacity: 0.7;
}

.news_wrapper .news_container .news_content .cate_list ul li a.active {
    opacity: 1;
} */

/* .news_wrapper .news_container .news_content .news_list {
    width: calc(100% - 70px - 110px);
} */
.news_wrapper .news_container .news_content .news_list {
    width: 100%;
}

.news_wrapper .news_container .news_content .news_list ul li {
    padding: 35px 30px;
    border-bottom: 1px solid var(--text-sub-color);
}

.news_wrapper .news_container .news_content .news_list ul li:first-of-type {
    border-top: 1px solid var(--text-sub-color);
}

.news_wrapper .news_container .news_content .news_list ul li article a {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 50px;
    transition: 1s;
    color: var(--text-color);
}

.news_wrapper .news_container .news_content .news_list ul li article a .date_txt {
    width: 73px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
}

.news_wrapper .news_container .news_content .news_list ul li article a .cate_box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news_wrapper .news_container .news_content .news_list ul li article a .cate_box p {
    position: relative;
    margin-left: calc(10px + 4px);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
}

.news_wrapper .news_container .news_content .news_list ul li article a .cate_box p::before {
    display: inline;
    content: "";
    position: absolute;
    top: 5px;
    left: -10px;
    width: 4px;
    height: 4px;
    background-color: var(--text-color01);
}

.news_wrapper .news_container .news_content .news_list ul li article a .news_ttl {
    width: calc(100% - 73px - 50px);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.05em;
}


@media screen and (max-width:990px) {
    .pagination a .next_btn {
        margin-left: 50px;
    }

    .pagination a .prev_btn {
        margin-right: 50px;
    }
}

@media screen and (max-width:768px) {
    .news_wrapper .news_container {
        width: 90vw;
    }
}

@media screen and (max-width:768px) {
    .news_wrapper .news_container {
        padding: 100px 0;
    }

    .news_wrapper .news_container .news_content .news_list ul li article a .news_ttl {
        font-size: 16px;
    }
}

@media screen and (max-width:500px) {
    .news_wrapper .news_container .news_content {
        margin-top: 50px;
    }

    .news_wrapper .news_container .news_content .news_list ul li article a {
        flex-direction: column;
        gap: 15px;
    }

    .news_wrapper .news_container .news_content .news_list ul li {
        padding: 25px 20px;
    }

    .news_wrapper .news_container .news_content .news_list ul li article a .date_txt,
    .news_wrapper .news_container .news_content .news_list ul li article a .news_ttl {
        width: 100%;
    }

    .pagination a .next_btn {
        margin-left: 20px;
    }

    .pagination a .prev_btn {
        margin-right: 20px;
    }
}

/*---------------------------------------------------------
                ニュースシングル
---------------------------------------------------------*/
.news_detail_wrapper {
    padding: 200px 0;
    background-color: var(--text-color);
    color: var(--base-color);
}

.news_detail_container {
    margin: 0 auto;
    width: 80%;
}

.news_detail_container h1 {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.news_detail_container p.date_txt {
    display: block !important;
    margin-top: 28px;
    color: var(--text-color04);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
}

.news_detail_container .content {
    margin-top: 80px;
}

.news_detail_container .content p {
    display: block;
}

.news_detail_container .content a {
    color: var(--text-color03);
    text-decoration: underline;
}

.news_detail_container .content img {
    max-width: 100%;
}

.news_detail_container .btn_back {
    display: block;
    margin: 150px auto 0;
    width: fit-content;
    color: var(--text-color04);
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}

@media screen and (max-width:990px) {
    .news_detail_container h1 {
        font-size: 28px;
    }
}

@media screen and (max-width:768px) {
    .news_detail_wrapper {
        padding: 100px 0;
    }

    .news_detail_container h1 {
        font-size: 24px;
    }
}

@media screen and (max-width:500px) {
    .news_detail_container h1 {
        font-size: 20px;
    }

    .news_detail_container .content {
        margin-top: 50px;
    }

    .news_detail_container .btn_back {
        margin-top: 80px;
    }
}

/*---------------------------------------------------------
                お問い合わせ
---------------------------------------------------------*/
.contact_container {
    display: flex;
    gap: 80px;
    padding: 200px 0;
    margin: 0 auto;
    width: 85vw;
    max-width: 1300px;
}

.contact_container ul.contact_flow {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100px;
}

.contact_container ul.contact_flow.sp {
    display: none;
}

.contact_container ul.contact_flow li {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    color: var(--text-sub-color);
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.05em;
}

.contact_container ul.contact_flow li.active {
    transition: 1s;
}

.contact_container ul.contact_flow li:not(:last-of-type)::before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 20px;
    background-color: var(--text-sub-color);
}

.contact_container ul.contact_flow li span {
    width: 46px;
    font-family: var(--sub-font);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.contact_main {
    width: calc(100% - 80px - 100px);
}

.contact_container .contact_content .ttl_en_txt {
    font-family: var(--sub-font);
    font-size: clamp(24px, 4.4vw, 80px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.contact_container .contact_content span.emoji {
    display: block;
    margin-bottom: .7em;
    font-size: clamp(14px, 1.6vw, 32px);
    font-weight: bold;
}

.contact_container .contact_content .main_text {
    margin-top: 3em;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.contact_container .contact_content .entry_box {
    margin-top: 50px;
    padding: 50px 0;
    background-color: var(--bg-color);
}

.contact_container .contact_content .entry_box .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    margin: 0 auto;
    width: 90%;
}

.contact_container .contact_content .entry_box .inner .text_area {
    width: calc(100% - 50px - 280px);
}

.contact_container .contact_content .tel_box {
    margin-top: 50px;
}

.contact_container .contact_content .entry_box .inner h2,
.contact_container .contact_content .tel_box h2,
.contact_container .contact_content .contact_box h2 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.05em;
}

.contact_container .contact_content .contact_box h2 {
    margin-top: 40px;
}

.contact_container .contact_content .tel_box h2 span,
.contact_container .contact_content .contact_box h2 span {
    display: block;
    margin-bottom: 10px;
    font-family: var(--sub-font);
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}

.contact_container .contact_content .entry_box .inner p {
    margin-top: 20px;
}

.contact_container .contact_content .entry_box .inner a {
    padding: 20px 0;
    width: 280px;
    background-color: var(--base-color);
    color: var(--text-color) !important;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
    border-radius: 50px;
    transition: .3s;
    border: none;
    pointer-events: all;
    cursor: pointer;
}

.contact_container .contact_content .entry_box .inner a:hover {
    opacity: .7;
}

.contact_container .contact_content .tel_box a {
    display: block;
    margin-top: 13px;
    color: var(--text-color);
    font-family: var(--sub-font);
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}

.contact_container .contact_content .tel_box p {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
}

.contact_container .contact_content .tel_box p span {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
}

.contact_container .contact_content .contact_box .form_box {
    margin-top: 40px;
}

.contact_container .contact_content .contact_box .form_box p.annotation_text {
    margin-top: 20px;
    padding-bottom: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
}

.entry_wrapper .contact_container .contact_content .contact_box .form_box p.annotation_text {
    margin-top: 20px;
    border-bottom: none;
}


.contact_container .contact_content .contact_box .form_box p.annotation_text span {
    color: #757575;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
}

.contact_container .contact_content .contact_box .form_box .select_box {
    position: relative;
}

.contact_container .contact_content .contact_box .form_box .select_box::after {
    display: block;
    content: "";
    position: absolute;
    top: 40%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-right: 1px solid #131313;
    border-bottom: 1px solid #131313;
}

.contact_container .contact_content .contact_box .form_box dl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 80px;
    padding: 30px 0;
    border-bottom: 1px solid var(--bd-color);
}

.contact_container .contact_content .contact_box .form_box dl.contact_message {
    align-items: flex-start;
}

.contact_container .contact_content .contact_box .form_box dl.address_required {
    border-bottom: none;
    padding-bottom: 20px;
}

.contact_container .contact_content .contact_box .form_box dl.address_optional {
    padding: 0 0 50px 0;
}

.contact_container .contact_content .contact_box .form_box dl dt {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    width: 150px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.contact_container .contact_content .contact_box .form_box dl dt::before {
    display: inline-block;
    color: #757575;
    font-size: 10px;
}

.contact_container .contact_content .contact_box .form_box dl dt.required::before {
    content: "＊";
}

.contact_container .contact_content .contact_box .form_box dl dt.optional::before {
    content: "　";
}

.contact_container .contact_content .contact_box .form_box dl dt span {
    display: block;
    font-size: 10px;
}


.contact_container .contact_content .contact_box .form_box dl dd {
    width: calc(100% - 150px - 80px);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.contact_container .contact_content .contact_box .form_box dl dd .sns_option {
    font-size: 14px;
    font-weight: 400;
}

.contact_container .contact_content .contact_box .form_box dl dd .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
}

.contact_container .contact_content .contact_box .form_box dl dd .select_open {
    margin-top: 10px;
}

input:disabled {
    pointer-events: not-allowed;
}

label:has(input:disabled) {
    pointer-events: not-allowed;
}

select,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="number"],
textarea {
    position: relative;
    padding: 20px 15px;
    width: 100%;
    background-color: var(--bg-color);
    font-size: 14px;
    font-weight: 400;
    border: 3px solid var(--base-color);
    outline: 0;
    -webkit-appearance: none;
    border-radius: 0;
}

textarea+.border {
    height: calc(100% - 4px) !important;
}

select {
    appearance: none;
    -webkit-appearance: none;
    /* Safari用 */
    -moz-appearance: none;
    /* Firefox用 */
    color: #131313;
}

input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    /* Safari用 */
    -moz-appearance: none;
    /* Firefox用 */
    padding: 14px 45px 14px 18px;
    color: #131313;
}

input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

input[type=date]::-webkit-datetime-edit-text {
    color: #131313;
}

select.false,
input.false,
textarea.false {
    border: 2px solid #E9255B;
}

#slide_down_contact,
#slide_down_entry {
    display: none;
}

/* ドロップダウン */
.flex_box.dropdown_box p,
.flex_box.dropdown_box p .wpcf7-form-control-wrap {
    width: 100%;
}

/* ラジオボタン */
.contact_container .contact_content .contact_box .form_box dl dd .wpcf7-radio .wpcf7-list-item {
    margin: 0;
    width: 258px;
}

.contact_container .contact_box .form_box span.wpcf7-list-item-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.contact_container .contact_box .form_box input[type="radio"],
.contact_container .contact_box .form_box input[type="checkbox"] {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.contact_container .contact_box .form_box span.wpcf7-list-item-label::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid #131313;
}

.contact_container .contact_box .form_box span.wpcf7-list-item-label::after {
    content: "";
    display: none;
    position: absolute;
    top: 43%;
    left: 8px;
    transform: translateY(-50%) rotate(45deg);
    width: 5px;
    height: 10px;
    border-right: 2px solid var(--text-color);
    border-bottom: 2px solid var(--text-color);
}

.contact_container .contact_box .form_box .wpcf7-list-item.checked span.wpcf7-list-item-label::before {
    background: var(--base-color);
}

.contact_container .contact_box .form_box .wpcf7-list-item.checked span.wpcf7-list-item-label::after {
    display: block;
}

/* チェックボックス  */
.contact_container .wpcf7-form-control.wpcf7-checkbox {
    display: flex;
    gap: 30px;
}

/* 横並び */
.contact_container .contact_content .contact_box .form_box dd.flex_box {
    display: flex;
    gap: 30px;
}

.contact_container .contact_content .contact_box .form_box dl.address_required .flex {
    display: flex;
    gap: 10px;
    width: 100%;
}

.contact_container .contact_content .contact_box .form_box dd.flex_box .flex span.name_text,
.contact_container .contact_content .contact_box .form_box dl.address_required .flex span.name_text {
    display: inline-block;
    margin-top: 7px;
    width: 36px;
    text-align: center;
}

.contact_container .contact_content .contact_box .form_box dl.address_required .address_txt_area {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact_container .contact_content .contact_box .form_box dd.flex_box .flex .input_box {
    width: calc(100% - 36px - 10px);
}

/* チェックマーク */
.contact_container .contact_content .contact_box .form_box dd .check_mark {
    position: absolute;
    top: 14px;
    right: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    /* background: #333; */
    background: #FAF17E;
    background: linear-gradient(135deg, rgba(250, 241, 126, 1) 0%, rgba(108, 246, 136, 1) 25%, rgba(124, 187, 255, 1) 50%, rgba(228, 132, 245, 1) 75%, rgba(235, 38, 166, 1) 100%);
    border-radius: 50%;
}

.contact_container .contact_content .contact_box .form_box dd .wpcf7-form-control-wrap[data-name="message"] .check_mark {
    top: 68px;
}

.contact_container .contact_content .contact_box .form_box dd .check_mark::before {
    content: '✓';
    display: inline-block;
    color: #FFF;
}

.contact_container .contact_content .contact_box .form_box dd .check_mark.false {
    background: #E9255B;
}

.contact_container .contact_content .contact_box .form_box dd .check_mark.false::before {
    content: '！';
}

.contact_container .contact_content .contact_box .form_box dd .border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.contact_container .contact_content .contact_box .form_box dd .border div {
    position: absolute;
    /* background-color: greenyellow; */
    transition: all 0.3s ease;
}

.contact_container .contact_content .contact_box .form_box dd .border .top {
    top: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background: #EB26A6;
    background: linear-gradient(270deg, rgba(235, 38, 166, 1) 0%, rgba(228, 132, 245, 1) 50%, rgba(124, 187, 255, 1) 100%);
}

.contact_container .contact_content .contact_box .form_box dd .border .right {
    top: 0;
    right: 0;
    width: 4px;
    height: 0%;
    background: #EB26A6;
    background: linear-gradient(180deg, rgba(235, 38, 166, 1) 0%, rgba(228, 132, 245, 1) 50%, rgba(124, 187, 255, 1) 100%);
}

.contact_container .contact_content .contact_box .form_box dd .border .bottom {
    bottom: 0;
    right: 0;
    height: 4px;
    width: 0%;
    background: #FAF17E;
    background: linear-gradient(90deg, rgba(250, 241, 126, 1) 0%, rgba(108, 246, 136, 1) 50%, rgba(124, 187, 255, 1) 100%);
}

.contact_container .contact_content .contact_box .form_box dd .border .left {
    left: 0;
    bottom: 0;
    width: 4px;
    height: 0%;
    background: #FAF17E;
    background: linear-gradient(0deg, rgba(250, 241, 126, 1) 0%, rgba(108, 246, 136, 1) 50%, rgba(124, 187, 255, 1) 100%);
}

.contact_container .contact_content .contact_box .form_box dd .border.animate .top {
    animation: animateTop 0.25s 0.35s forwards;
}

.contact_container .contact_content .contact_box .form_box dd .border.animate .right {
    animation: animateRight 0.25s 0.6s forwards;
}

.contact_container .contact_content .contact_box .form_box dd .border.animate .bottom {
    animation: animateBottom 0.25s 0.95s forwards;
}

.contact_container .contact_content .contact_box .form_box dd .border.animate .left {
    animation: animateLeft 0.25s forwards;
}


/* 各ボーダーのアニメーション定義 */
@keyframes animateTop {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes animateRight {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

@keyframes animateBottom {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes animateLeft {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

.contact_container .contact_content .contact_box .form_box #email_suggestions {
    display: none;
    background: #f9f9f9;
    border: 1px solid #ccc;
    max-width: 100%;
    max-height: 200px;
    overflow-y: scroll;
}

.contact_container .contact_content .contact_box .form_box #email_suggestions .suggestion {
    padding: 6px;
    cursor: pointer;
}

.contact_container .contact_content .contact_box .form_box #display_email {
    width: 100%;
    font-size: 28px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.contact_container .contact_content .contact_box .form_box #email_suggestions .suggestion:first-of-type {
    margin-top: 0;
}

/* エラーメッセージ */
.contact_container .contact_content .contact_box .form_box dd .error_message {
    position: relative;
    display: block;
    font-size: 14px;
    color: #E9255B;
}

.wpcf7-not-valid-tip {
    display: none !important;
}

.wpcf7-response-output {
    display: none;
}

/* プライバシー */
.contact_container .contact_content .contact_box .privacy_box {
    position: relative;
    margin-top: 50px;
}

.contact_container .contact_content .contact_box .privacy_box .warning {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 80%;
    height: 50%;
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
    pointer-events: none;
}

.contact_container .contact_content .contact_box .privacy_box h3 {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.05em;
}

.contact_container .contact_content .contact_box .privacy_box h3::before {
    display: inline-block;
    content: "＊";
    color: #757575;
    font-size: 10px;
}

.contact_container .contact_content .contact_box .privacy_box h3 span {
    margin-left: 1em;
    font-size: 14px;
}

.contact_container .contact_content .contact_box .privacy_box .scroll_area {
    margin-top: 15px;
    padding: 15px;
    height: 250px;
    overflow-y: scroll;
    border: 2px solid var(--base-color);
}

.contact_container .contact_content .contact_box .privacy_box .scroll_area p.main_txt {
    width: 100%;
    margin-top: 0;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-align: left;
}

.contact_container .contact_content .contact_box .privacy_box .scroll_area .content li.item {
    margin-top: 20px;
}

.contact_container .contact_content .contact_box .privacy_box .scroll_area .content li.item h4 {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.contact_container .contact_content .contact_box .privacy_box .scroll_area .content li.item p.txt {
    margin-top: 10px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.contact_container .contact_content .contact_box .privacy_box .scroll_area .content li.item ul {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.contact_container .contact_content .contact_box .privacy_box .scroll_area .content li.item ul li {
    margin-left: 1em;
    list-style: disc;
}

.contact_container .contact_content .contact_box .privacy_box .scroll_area .reception {
    margin-top: 20px;
    padding: 25px 15px;
    background-color: var(--bg-color);
    color: var(--base-color);
}

.contact_container .contact_content .contact_box .privacy_box .scroll_area .reception h4 {
    font-size: 20px;
    font-weight: bold;
}

.contact_container .contact_content .contact_box .privacy_box .scroll_area .reception p {
    margin-top: 15px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

/* 同意チェックボックス */
.contact_container .consent_box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px auto 0;
    width: fit-content;
    font-size: 18px;
    word-break: keep-all;
    text-align: center;
    cursor: pointer;
}

.contact_container .consent_box input[type="checkbox"] {
    position: relative !important;
    appearance: none;
    width: 26px;
    height: 26px;
    border: 1px solid var(--base-color);
    border-radius: 50%;
    cursor: pointer;
    opacity: 1 !important;
    visibility: visible !important;
}

/* .contact_container .consent_box span::after {
    content: '';
    display: block;
    position: absolute;
    top: .5em;
    left: .5em;
    transform: rotate(45deg);
    opacity: 0;
    width: 6px;
    height: 14px;
    margin-top: -8px;
    border-right: 2px solid var(--base-color);
    border-bottom: 2px solid var(--base-color);
    transition: .3s;
} */

.contact_container .consent_box span::after {
    content: '';
    display: block;
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 15px;
    height: 15px;
    background: var(--base-color);
    border-radius: 50%;
    transition: .3s;
}

.contact_container .consent_box span:has(:checked)::after {
    opacity: 1;
}

.contact_container .btn_box {
    margin-top: 60px;
    text-align: center;
}

.contact_container input.wpcf7-form-control.wpcf7-submit.has-spinner {
    padding: 20px 0;
    width: 315px;
    background-color: var(--base-color);
    color: var(--text-color);
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.05em;
    border-radius: 50px;
    transition: .3s;
    border: none;
    pointer-events: all;
    cursor: pointer;
}

.contact_container input.wpcf7-form-control.wpcf7-submit.has-spinner:disabled {
    background-color: var(--bd-color);
    pointer-events: none;
}

/* Contact Form7 */
.wpcf7-form-control-wrap {
    display: block;
}


.wpcf7-list-item {
    margin: 0 !important;
}

.wpcf7-spinner {
    display: none !important;
}



@media screen and (max-width:1200px) {
    .contact_container {
        gap: 50px;
        width: 90vw;
    }

    .contact_main {
        width: calc(100% - 50px - 100px);
    }
}

@media screen and (max-width:990px) {
    .contact_container {
        flex-direction: column;
        padding: 100px 0;
    }

    .contact_container ul.contact_flow {
        flex-direction: row;
        width: auto;
    }

    .contact_container ul.contact_flow.pc {
        display: none;
    }

    .contact_container ul.contact_flow.sp {
        display: flex;
        margin-top: 30px;
    }

    .contact_container ul.contact_flow li:not(:last-of-type)::before {
        top: 50%;
        left: 110px;
        transform: translateY(-50%);
        width: 20px;
        height: 1px;
    }

    .contact_main {
        width: 100%;
    }
}

@media screen and (max-width:768px) {
    .contact_container .contact_content .ttl_en_txt {
        font-size: clamp(26px, 7vw, 80px);
    }

    .contact_container .contact_content .contact_box .form_box dl {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 20px 0;
    }

    .contact_container .contact_content .contact_box .form_box dl dt,
    .contact_container .contact_content .contact_box .form_box dl dd {
        width: 100%;
    }

    .contact_container .contact_content .contact_box .form_box #display_email {
        font-size: 24px;
    }

    .contact_container .contact_content .entry_box .inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .contact_container .contact_content .entry_box .inner .text_area {
        width: 100%;
    }
}

@media screen and (max-width:500px) {
    .contact_container ul.contact_flow li {
        flex-direction: column;
        gap: 10px;
    }

    .contact_container ul.contact_flow li span {
        width: auto;
    }

    .contact_container ul.contact_flow li:not(:last-of-type)::before {
        left: 60px;
    }

    .contact_container .contact_content .main_text {
        margin-top: 2em;
    }

    .contact_container .contact_content .contact_box h2 {
        margin-top: 64px;
    }


    .contact_container .contact_content .entry_box .inner h2,
    .contact_container .contact_content .tel_box h2,
    .contact_container .contact_content .contact_box h2 {
        font-size: 18px;
    }

    .contact_container .contact_content .entry_box .inner .text_area p {
        margin-top: 15px;
    }

    .contact_container .contact_content .entry_box .inner a {
        width: 100%;
    }

    .contact_container .contact_content .tel_box a {
        font-size: 24px;
    }

    .contact_container .contact_content .contact_box .form_box #display_email {
        font-size: 18px;
    }

    .contact_container .contact_content .contact_box .privacy_box h3 span {
        display: block;
        margin: 1em 0 0 0;
        font-size: 10px;
    }

    .contact_container .contact_content .contact_box .privacy_box .scroll_area p.main_txt,
    .contact_container .contact_content .contact_box .privacy_box .scroll_area .content li.item p.txt,
    .contact_container .contact_content .contact_box .privacy_box .scroll_area .content li.item ul,
    .contact_container .contact_content .contact_box .privacy_box .scroll_area .reception p {
        font-size: 12px;
    }

    .contact_container .contact_content .contact_box .privacy_box .scroll_area .content li.item h4 {
        font-size: 14px;
    }

    .contact_container .contact_content .contact_box .privacy_box .scroll_area .reception h4 {
        font-size: 16px;
    }


    .contact_container .consent_box {
        font-size: 14px;
    }

    .contact_container .consent_box input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }

    .contact_container .consent_box span::after {
        top: 9px;
        width: 10px;
        height: 10px;
    }
}

/*---------------------------------------------------------
                お問い合わせ　下層MV
---------------------------------------------------------*/
.contact_under_mv {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 60vh;
}

.contact_under_mv .bg_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

.contact_under_mv .content {
    position: absolute;
    bottom: 15%;
    left: 5%;
}

.contact_under_mv .content p {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--text-color);
    font-family: var(--sub-font);
    font-size: clamp(23px, 3.8vw, 120px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
}

.contact_under_mv .content p span {
    display: inline-block;
    opacity: 0;
    transform: translateX(-20px);
    animation: slideIn 0.4s forwards ease-in-out;
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.contact_under_mv p:nth-of-type(2) {
    display: block;
    font-size: clamp(28px, 5vw, 80px);
}

@media screen and (max-width:990px) {
    .contact_under_mv {
        height: 45svh;
        min-height: 600px;
    }
}

@media screen and (max-width:500px) {
    .contact_under_mv {
        min-height: 350px;
    }
}

/*---------------------------------------------------------
                お問い合わせ　確認画面
---------------------------------------------------------*/
.contact_confirm_wrapper {
    background-color: var(--text-color);
    color: var(--base-color);
}

.contact_confirm_wrapper .contact_container ul.contact_flow li.active {
    color: var(--base-color);
}

#wpcf7-f15-o1 {
    width: calc(100% - 80px - 85px);
}

.contact_container.confirm .contact_content .contact_box .form_box {
    margin-top: 0;
}

.contact_container.confirm .contact_content .contact_box .form_box p.annotation_text {
    padding-bottom: 40px;
    font-size: 16px;
    line-height: 1.3;
}

.contact_container.confirm .contact_content .contact_box .form_box dl {
    padding: 50px 10px;
}

.contact_container.confirm .btn_box {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

input.wpcf7-form-control.wpcf7-previous {
    background-color: transparent;
    color: var(--base-color);
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    transition: .3s;
}

input.wpcf7-form-control.wpcf7-previous:hover {
    opacity: 0.7;
}

/*---------------------------------------------------------
                お問い合わせ 完了画面
---------------------------------------------------------*/
.contact_thanks_wrapper {
    background-color: var(--text-color);
    color: var(--base-color);
}

.contact_container.thanks ul.contact_flow li.active {
    color: var(--base-color);
}

.contact_thanks_content {
    width: calc(100% - 100px - 80px);
}

.contact_thanks_content .mask_txt {
    font-size: clamp(38px, 6.5vw, 100px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    background: url(../img/img_contact_thanks_mask.png) no-repeat bottom center/cover;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.entry_thanks_wrapper .contact_thanks_content .mask_txt {
    margin-top: 60px;
}

.contact_thanks_content h1 {
    margin-top: 60px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.entry_thanks_wrapper .contact_thanks_content h1 {
    margin-top: 0;
}

.contact_thanks_content p.main_text {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.contact_thanks_content .btn_box {
    display: flex;
    align-items: center;
    gap: 60px;
}

.contact_thanks_content .btn_box a {
    color: var(--base-color);
    font-size: clamp(34px, 3.2vw, 50px);
    font-weight: 800;
    line-height: 1;
}

@media screen and (max-width:990px) {
    .contact_thanks_content {
        width: 100%;
    }

    .contact_thanks_content .mask_txt {
        font-size: clamp(38px, 9.5vw, 100px);
    }

    .entry_thanks_wrapper .contact_thanks_content .mask_txt {
        margin-top: 30px;
    }
}

@media screen and (max-width:500px) {
    .contact_thanks_content h1 {
        margin-top: 30px;
        font-size: 18px;
    }

    .entry_thanks_wrapper .contact_thanks_content h1 {
        margin-top: 0;
    }

    .contact_thanks_content p.main_text {
        font-size: 14px;
    }

    .contact_thanks_content .btn_box {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
}

/*---------------------------------------------------------
                リクルート
---------------------------------------------------------*/
.recruit_wrapper #whiteOverlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: white;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.8s ease;
    overflow: hidden;
}

.recruit_wrapper #whiteOverlay p {
    display: flex;
    flex-direction: column;
    color: var(--base-color);
    font-size: 6vw;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.recruit_wrapper #whiteOverlay p span {
    opacity: 0;
    transition: opacity 1s ease;
}

.recruit_wrapper #whiteOverlay .rainbow_anime_box {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
    display: flex;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.recruit_wrapper #whiteOverlay .rainbow_anime_box span {
    display: block;
    width: calc(100% / 9);
    height: 0;
    border-radius: 0 0 200px 200px;
    position: relative;
    transition: height 0.3s ease;
}

.recruit_wrapper #whiteOverlay .rainbow_anime_box span.active {
    height: 150vh;
    /* 画面の1.5倍まで伸ばす */
}

.recruit_wrapper #whiteOverlay .rainbow_anime_box span:nth-of-type(1) {
    background-color: #FF2300;
}

.recruit_wrapper #whiteOverlay .rainbow_anime_box span:nth-of-type(2) {
    background-color: #FF9201;
}

.recruit_wrapper #whiteOverlay .rainbow_anime_box span:nth-of-type(3) {
    background-color: #FFEB00;
}

.recruit_wrapper #whiteOverlay .rainbow_anime_box span:nth-of-type(4) {
    background-color: #89E82B;
}

.recruit_wrapper #whiteOverlay .rainbow_anime_box span:nth-of-type(5) {
    background-color: #00C745;
}

.recruit_wrapper #whiteOverlay .rainbow_anime_box span:nth-of-type(6) {
    background-color: #29EBFE;
}

.recruit_wrapper #whiteOverlay .rainbow_anime_box span:nth-of-type(7) {
    background-color: #0D44FB;
}

.recruit_wrapper #whiteOverlay .rainbow_anime_box span:nth-of-type(8) {
    background-color: #A725FC;
}

.recruit_wrapper #whiteOverlay .rainbow_anime_box span:nth-of-type(9) {
    background-color: #FD1EBA;
}

.recruit_wrapper .main_recruit_wrapper {
    display: none;
    margin-top: 80px;
    background: var(--recruit-base);
    color: var(--base-color);
    /* overflow: hidden; */
}

.recruit_wrapper .main_recruit_wrapper .fixed_cv_btn {
    position: fixed;
    bottom: 5%;
    right: 5%;
    z-index: 10;
    display: flex;
    align-items: baseline;
    transform-origin: bottom center;
}

.recruit_wrapper .main_recruit_wrapper .fixed_cv_btn img.bubble {
    width: 167px;
    transition: .3s;
}

.recruit_wrapper .main_recruit_wrapper .fixed_cv_btn img.hand {
    display: inline-block;
    width: 63px;
    margin-left: -15px;
}

.recruit_wrapper .main_recruit_wrapper .fixed_cv_btn:hover .bubble {
    transform: scale(1.05);
}

.recruit_wrapper .main_recruit_wrapper .fixed_cv_btn:hover .hand {
    animation: wave 0.3s linear infinite;
}

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


.recruit_wrapper .main_recruit_wrapper .text_slider {
    display: block;
    padding: 10px 0;
    overflow: hidden;
    white-space: nowrap;
    background: var(--recruit-red);
    border-bottom: 3px solid var(--base-color);
}

.recruit_wrapper .main_recruit_wrapper .text_slider .text_slider_inner {
    display: flex;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.recruit_wrapper .main_recruit_wrapper .text_slider .text_slider_group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--tick-duration, 40s);
}

.recruit_wrapper .main_recruit_wrapper .text_slider:nth-child(odd) .text_slider_inner .text_slider_group {
    animation-name: rlslide;
}

.recruit_wrapper .main_recruit_wrapper .text_slider:nth-child(even) .text_slider_inner .text_slider_group {
    animation-name: lrslide;
}

.recruit_wrapper .main_recruit_wrapper .text_slider p {
    display: inline-block;
    margin: 0 1em;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.02em;
}

.recruit_wrapper .main_recruit_wrapper .text_slider p {
    color: var(--base-color);
    font-family: var(--recruit-en-font);
    font-size: 22px;
}

.recruit_wrapper .main_recruit_wrapper .text_slider p:last-of-type {
    padding: 5px 8px;
    color: var(--text-color);
    font-family: var(--sub-font);
    font-size: 14px;
    background: var(--base-color);
    border-radius: 50px;
}

@keyframes rlslide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes lrslide {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.recruit_wrapper .main_content .smilestone {
    display: block;
    margin: 0 auto;
    padding: 80px 0;
    width: 95vw;
}

.recruit_wrapper .main_content .content_area {
    display: grid;
    grid-template-columns: .6fr .4fr;
    grid-template-rows: 1fr 1fr;
    border-top: 3px solid var(--base-color);
    border-bottom: 3px solid var(--base-color);
}

.recruit_wrapper .main_content .content_area .box.message {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    padding: 85px 0;
    border-right: 3px solid var(--base-color);
    background-image: url(../img/img_re_message_bg.png);
    background-repeat: repeat;
}

.recruit_wrapper .main_content .content_area .box.message .inner {
    margin: 0 auto;
    width: 90%;
}

.recruit_wrapper .main_content .content_area .box.message .inner .ttl {
    font-size: clamp(20px, 2.6vw, 42px);
    font-weight: bold;
    line-height: 1.8;
    letter-spacing: 0.04em;
}

.recruit_wrapper .main_content .content_area .box.message .inner .text {
    margin-top: 48px;
    width: 72%;
}

.recruit_wrapper .main_content .content_area .box.message .inner .text p {
    letter-spacing: 0.04em;
}

.recruit_wrapper .main_content .content_area .box.message .inner .text p:not(:first-of-type) {
    margin-top: 1.2em;
}

.recruit_wrapper .main_content .content_area .box.about {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    border-bottom: 3px solid var(--base-color);
}

.recruit_wrapper .main_content .content_area .box.service {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.recruit_wrapper .main_content .content_area .box.about,
.recruit_wrapper .main_content .content_area .box.service {
    padding: 85px 0 55px;
}

.recruit_wrapper .main_content .content_area .box.about .inner,
.recruit_wrapper .main_content .content_area .box.service .inner {
    margin: 0 auto;
    width: 85%;
}

.recruit_wrapper .main_content .content_area .box.about .inner .ttl p:nth-of-type(1),
.recruit_wrapper .main_content .content_area .box.service .inner .ttl p:nth-of-type(1) {
    font-family: var(--recruit-en-font);
    font-size: clamp(40px, 2.7vw, 46px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.recruit_wrapper .main_content .content_area .box.about .inner .ttl p:nth-of-type(2),
.recruit_wrapper .main_content .content_area .box.service .inner .ttl p:nth-of-type(2) {
    font-size: clamp(16px, 1.38vw, 28px);
    line-height: 1.7;
    letter-spacing: 0.04em;
}

.recruit_wrapper .main_content .content_area .box.about .inner .text,
.recruit_wrapper .main_content .content_area .box.service .inner .text {
    margin-top: 1em;
    width: 81%;
    font-size: clamp(16px, 1.1vw, 20px);
    line-height: 1.7;
    letter-spacing: 0.04em;
}

.recruit_wrapper .main_content .content_area .box.about .inner a,
.recruit_wrapper .main_content .content_area .box.service .inner a {
    display: flex;
    align-items: flex-start;
}

.recruit_wrapper .main_content .content_area .box.about .inner a {
    margin: 10% 0 0 5%;
}

.recruit_wrapper .main_content .content_area .box.service .inner a {
    margin: 10% 0 0 0;
    justify-content: flex-end;
}

.recruit_wrapper .main_content .content_area .box.about .inner a .sticker,
.recruit_wrapper .main_content .content_area .box.service .inner a .sticker {
    margin-top: 66px;
    transform: rotate(8deg);
    width: 10.8vw;
    height: 10.8vw;
}

.recruit_wrapper .main_content .content_area .box.about .inner a .sticker .sticker-front,
.recruit_wrapper .main_content .content_area .box.service .inner a .sticker .sticker-front {
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}

.recruit_wrapper .main_content .content_area .box.about .inner a .sticker .sticker-front {
    background-image: url(../img/img_seal_red.png);
}

.recruit_wrapper .main_content .content_area .box.service .inner a .sticker .sticker-front {
    background-image: url(../img/img_seal_green.png);
}

.recruit_wrapper .main_content .content_area .box.about .inner a svg,
.recruit_wrapper .main_content .content_area .box.service .inner a svg {
    width: 6.5vw;
    fill: transparent;
}

svg.wright #mask path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 30;
    stroke-dasharray: 1800px;
    stroke-dashoffset: 1800px;
    animation: line 3s linear 0.4s 1 normal forwards;
}

svg.wright #mask path:nth-of-type(2) {
    animation: line 3s linear 0.6s 1 normal forwards;
}

svg.wright #mask path:nth-of-type(3) {
    animation: line 3s linear 0.7s 1 normal forwards;
}

@keyframes line {
    0% {
        stroke-dashoffset: 1800px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.recruit_wrapper .main_content .content_area .box.about .inner a svg.wright #text {
    mask: url(#ab_mask-wrapper);
    fill: #333;
}

.recruit_wrapper .main_content .content_area .box.service .inner a svg.wright #text {
    mask: url(#se_mask-wrapper);
    fill: #333;
}

/* タイトル */
.recruit_wrapper .recruit_ttl h2 {
    margin-left: 5%;
    font-size: clamp(24px, 3.3vw, 60px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.recruit_wrapper .recruit_ttl h3 {
    margin-top: 32px;
    font-family: var(--recruit-doto-font);
    font-size: clamp(60px, 10.6vw, 300px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.06em;
}

/* 福利厚生 */
.recruit_wrapper .welfare_container {
    position: relative;
    padding-top: 200px;
    overflow-x: clip;
}

.recruit_wrapper .welfare_container .deco_img.we01 {
    position: absolute;
    top: 1%;
    right: 5%;
    z-index: 2;
    width: 10.8vw;
    min-width: 156px;
    transform: scale(0) rotate(4deg);
}

.recruit_wrapper .welfare_container .deco_img.we01.active {
    transform: scale(1) rotate(4deg);
}

.recruit_wrapper .welfare_container .deco_img.we01 .tape {
    position: absolute;
    top: 0;
    right: -25%;
    transform: rotate(43deg);
    width: 8.5vw;
    min-width: 123px;
}

.recruit_wrapper .welfare_container .deco_img.we02 {
    position: absolute;
    top: 5%;
    right: 12%;
    z-index: 1;
    width: 10.8vw;
    min-width: 156px;
    transform: scale(0) rotate(-12deg);
}

.recruit_wrapper .welfare_container .deco_img.we02.active {
    transform: scale(1) rotate(-12deg);
}

.recruit_wrapper .welfare_container .deco_img.we02 .tape {
    position: absolute;
    top: 0;
    left: -25%;
    transform: rotate(-53deg);
    width: 7vw;
    min-width: 102px;
}

.recruit_wrapper .welfare_container .deco_img.we03 {
    position: absolute;
    bottom: -8%;
    left: 25%;
    z-index: 1;
    width: 10.8vw;
    min-width: 156px;
    transform: scale(0) rotate(-10deg);
}

.recruit_wrapper .welfare_container .deco_img.we03.active {
    transform: scale(1) rotate(-10deg);
}

.recruit_wrapper .welfare_container .deco_img.we03 .tape {
    position: absolute;
    top: -10%;
    left: 10%;
    transform: rotate(290deg);
    width: 8.4vw;
    min-width: 121px;
}

.recruit_wrapper .welfare_container .deco_img.we03 .tape img {
    transform: translateX(100%);
}

.recruit_wrapper .welfare_container .deco_img.we04 {
    position: absolute;
    bottom: -18%;
    left: 49%;
    z-index: 1;
    width: 10.8vw;
    min-width: 156px;
    transform: scale(0) rotate(4deg);
}

.recruit_wrapper .welfare_container .deco_img.we04.active {
    transform: scale(1) rotate(4deg);
}

.recruit_wrapper .welfare_container .deco_img.we04 .tape {
    position: absolute;
    top: -10%;
    left: 10%;
    transform: rotate(-65deg);
    width: 10vw;
    min-width: 144px;
}

.recruit_wrapper .welfare_container .deco_img.we04 .tape img {
    transform: translateX(100%);
}



/*共通*/
.recruit_wrapper .deco_img {
    transition: .3s
}

.recruit_wrapper .deco_img .img {
    width: 100%;
}

.recruit_wrapper .deco_img .tape {
    overflow: hidden;
}

.recruit_wrapper .deco_img .tape img {
    width: 100%;
    transform: translateX(-100%);
}

.recruit_wrapper .deco_img.active .tape img {
    animation: tape-slide .5s .5s forwards;
}

@keyframes tape-slide {
    to {
        transform: translateX(0);
        /* 左から貼る動きで表示 */
    }
}

.recruit_wrapper .welfare_container .content {
    margin-top: 35px;
}

.recruit_wrapper .welfare_container .content .box {
    position: relative;
    z-index: 2;
    padding: 65px 0;
    border-bottom: 3px solid var(--base-color);
}

.recruit_wrapper .welfare_container .content .box:first-of-type {
    border-top: 3px solid var(--base-color);
}

.recruit_wrapper .welfare_container .content .box .inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9.7vw;
    margin: 0 auto;
    width: 90%;
}

.recruit_wrapper .welfare_container .content .box .inner .number {
    width: 25.8vw;
}

.recruit_wrapper .welfare_container .content .box .inner .number img {
    width: 100%;
}

.recruit_wrapper .welfare_container .content .box .inner .text_item {
    display: flex;
    align-items: flex-start;
    gap: 6.4vw;
    width: calc(100% - 9.7vw - 25.8vw);
}

.recruit_wrapper .welfare_container .content .box .inner .text_item .name {
    width: 15.8vw;
    min-width: 184px;
    font-size: clamp(22px, 1.38vw, 28px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.recruit_wrapper .welfare_container .content .box .inner .text_item .text {
    width: calc(100% - 6.4vw - 15.8vw);
    max-width: calc(100% - 6.4vw - 184px);
    letter-spacing: 0.04em;
}

/* 数字で見る */
.recruit_wrapper .about_container {
    margin-top: 170px;
}

.recruit_wrapper .about_container .content {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    border-top: 3px solid var(--base-color);
    border-bottom: 3px solid var(--base-color);
}

.recruit_wrapper .about_container .content .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    justify-content: center;
    padding: 100px 0 45px;
    width: calc(100%/3);
}

.recruit_wrapper .about_container .content .box:nth-of-type(1),
.recruit_wrapper .about_container .content .box:nth-of-type(2),
.recruit_wrapper .about_container .content .box:nth-of-type(3) {
    border-bottom: 3px solid var(--base-color);
}

.recruit_wrapper .about_container .content .box:nth-of-type(2),
.recruit_wrapper .about_container .content .box:nth-of-type(5) {
    border-right: 3px solid var(--base-color);
    border-left: 3px solid var(--base-color);
}

.recruit_wrapper .about_container .content .box .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.recruit_wrapper .about_container .content .box .item .number {
    font-family: "Afacad", sans-serif;
    font-size: clamp(100px, 10vw, 200px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
}

.recruit_wrapper .about_container .content .box .item .en {
    font-family: "Afacad", sans-serif;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.04em;
}

.recruit_wrapper .about_container .content .box .ja {
    font-size: clamp(18px, 1.38vw, 22px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

/* 募集要項 */
.recruit_wrapper .job_container {
    margin-top: 190px;
}

.recruit_wrapper .job_container.sp {
    display: none;
}

.recruit_wrapper .job_container .job-tabs .tab-buttons {
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 0;
}

.recruit_wrapper .job_container .job-tabs .tab-buttons li {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4.4vw;
    margin-left: -40px;
    padding: 20px 0;
    width: calc((100% - 26.8%)/3 + 80px);
    border: 3px solid var(--base-color);
    border-radius: 0px 40px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
}

.recruit_wrapper .job_container .job-tabs .tab-buttons li:first-child {
    margin-left: 0;
    border-radius: 0px 40px 0 0 !important;
    border-left: none;
}


.recruit_wrapper .job_container .job-tabs .tab-buttons li.engineer {
    background: var(--recruit-red);
    z-index: 4;
}

.recruit_wrapper .job_container .job-tabs .tab-buttons li.designer {
    background: var(--recruit-pink);
    z-index: 3;
}

.recruit_wrapper .job_container .job-tabs .tab-buttons li.planner {
    background: var(--recruit-yellow);
    z-index: 2;
}

.recruit_wrapper .job_container .job-tabs .tab-buttons li.back_office {
    background: var(--recruit-blue);
    z-index: 1;
}

.recruit_wrapper .job_container .job-tabs .tab-buttons li.active {
    padding: 25px 0;
    width: 26.8%;
    border-radius: 40px 40px 0 0;
}

.recruit_wrapper .job_container .job-tabs .tab-buttons li p:nth-of-type(1) {
    font-family: var(--recruit-en-font);
    font-size: clamp(13px, 1.6vw, 28px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.08em;
}

.recruit_wrapper .job_container .job-tabs .tab-buttons li:not(.active) p:nth-of-type(1) {
    margin-left: 40px;
}

.recruit_wrapper .job_container .job-tabs .tab-buttons li p:nth-of-type(2) {
    font-size: clamp(12px, 1.38vw, 22px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.08em;
}

.recruit_wrapper .job_container .tab-contents .tab-content {
    display: none;
}

.recruit_wrapper .job_container .tab-contents .tab-content.active {
    display: block;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item {
    display: flex;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list {
    padding: 135px 0;
    width: 27.7vw;
    max-width: 400px;
    min-width: 250px;
    border-right: 3px solid var(--base-color);
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list .inner {
    position: sticky;
    top: 135px;
    margin: 0 auto;
    width: 90%;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list p {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.04em;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul {
    margin-top: 50px;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li {
    border-bottom: 2px solid var(--base-color);
    cursor: pointer;
    padding: 24px 0;
}


.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li:first-of-type {
    padding: 0 0 24px 0;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li:last-of-type {
    border-bottom: none;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li p {
    color: #948E89;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li.active p {
    color: var(--base-color);
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li p:first-of-type {
    font-size: 16px !important;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li p:last-of-type {
    font-size: 14px;
}

/* .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li br {
    display: none;
} */

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail {
    padding: 135px 0;
    width: calc(100% - 27.7vw);
    min-width: calc(100% - 400px);
    max-width: calc(100% - 250px);
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner {
    margin: 0 auto;
    width: 95%;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item h3 {
    font-size: clamp(13px, 1.9vw, 28px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.04em;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content {
    margin-top: 48px;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl {
    display: flex;
    padding: 40px 24px;
    border-top: 2px solid var(--base-color);
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dt {
    display: flex;
    align-items: center;
    width: 14.5vw;
    min-width: 180px;
    max-width: 210px;
    font-size: 18px;
    font-weight: bold;
    line-height: 2;
    letter-spacing: 0.05em;
    border-right: 2px solid #C7BBAF;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd {
    width: calc(100% - 14.5vw);
    min-width: calc(100% - 210px);
    max-width: calc(100% - 180px);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd p {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd p.sub {
    margin-top: 12px;
    color: #948E89;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd .inner {
    margin: 0 auto;
    width: 90%;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd .inner ul {
    margin-left: 1em;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd .inner p+ul {
    margin-top: 16px;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd .inner ul li {
    list-style: disc;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd .inner p+table {
    margin-top: 16px;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd .inner table tr {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd .inner table tr:not(:first-of-type) {
    margin-top: 16px;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd .inner table tr td:first-of-type {
    padding: 2px 20px;
    width: fit-content;
    background: #D5CABD;
    border-radius: 4px;
    text-align: center;
}

.recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd .inner table tr td:last-of-type {
    width: 100%;
}


/* フロー・よくある質問 */
.recruit_wrapper .other_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.4fr 1fr 1fr 1fr 1fr;
    border-top: 3px solid var(--base-color);
    border-bottom: 3px solid var(--base-color);
}

.recruit_wrapper .other_wrapper div:nth-of-type(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.recruit_wrapper .other_wrapper div:nth-of-type(2) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    border-top: 3px solid var(--base-color);
    border-right: 3px solid var(--base-color);
}

.recruit_wrapper .other_wrapper div:nth-of-type(3) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    border-top: 3px solid var(--base-color);
    border-right: 3px solid var(--base-color);
}

.recruit_wrapper .other_wrapper div:nth-of-type(4) {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    border-top: 3px solid var(--base-color);
    border-right: 3px solid var(--base-color);
}

.recruit_wrapper .other_wrapper div:nth-of-type(5) {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
    border-top: 3px solid var(--base-color);
    border-right: 3px solid var(--base-color);
}

.recruit_wrapper .other_wrapper div:nth-of-type(6) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.recruit_wrapper .other_wrapper div:nth-of-type(7) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    border-top: 3px solid var(--base-color);
}

.recruit_wrapper .other_wrapper div:nth-of-type(8) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    border-top: 3px solid var(--base-color);
}

.recruit_wrapper .other_wrapper div:nth-of-type(9) {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    border-top: 3px solid var(--base-color);
}

.recruit_wrapper .other_wrapper div:nth-of-type(10) {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
    border-top: 3px solid var(--base-color);
}

.recruit_wrapper .other_wrapper .ttl_box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.recruit_wrapper .other_wrapper .ttl_box.flow_ttl {
    border-right: 3px solid var(--base-color);
}

.recruit_wrapper .other_wrapper .ttl_box .recruit_ttl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
}

.recruit_wrapper .other_wrapper .ttl_box .recruit_ttl h2 {
    margin-left: 0;
    font-size: clamp(24px, 2.2vw, 40px);
    letter-spacing: 0.04em;
}

.recruit_wrapper .other_wrapper .ttl_box .recruit_ttl h3 {
    margin-top: 0;
    font-family: var(--recruit-doto-font);
    font-size: clamp(64px, 7.2vw, 120px);
}

.recruit_wrapper .other_wrapper .content_box {
    display: flex;
}

.recruit_wrapper .other_wrapper .content_box .num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(56px, 5.4vw, 100px);
    font-size: clamp(40px, 3.8vw, 72px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.08em;
    border-right: 3px solid var(--base-color);
}

.recruit_wrapper .other_wrapper .content_box.flow_content .num {
    font-family: "Afacad", sans-serif;
    background: var(--recruit-yellow);
}

.recruit_wrapper .other_wrapper .content_box.faq_content .num {
    font-family: var(--recruit-en-font);
    background: var(--recruit-blue);
}

.recruit_wrapper .other_wrapper .content_box .item {
    padding: 30px 0;
    width: calc(100% - 5.4vw);
    min-width: calc(100% - 100px);
    max-width: calc(100% - 56px);
}

.recruit_wrapper .other_wrapper .content_box .item .inner {
    margin: 0 auto;
    width: 90%;
}

.recruit_wrapper .other_wrapper .content_box .item .inner p:nth-of-type(1) {
    font-size: clamp(18px, 1.38vw, 20px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.recruit_wrapper .other_wrapper .content_box .item .inner p:nth-of-type(2) {
    margin-top: 8px;
    font-size: clamp(12px, 1.1vw, 20px);
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

/* エントリー */
.recruit_wrapper .entry_container {
    display: block;
    margin-top: 70px;
}

.recruit_wrapper .entry_container .recruit_ttl {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 90%;
}

.recruit_wrapper .entry_container .recruit_ttl h2 {
    margin-left: 0;
    font-size: clamp(24px, 2.2vw, 40px);
    letter-spacing: 0.04em;
}

.recruit_wrapper .entry_container .recruit_ttl h3 {
    margin-top: 0;
    font-family: var(--recruit-doto-font);
    font-size: clamp(64px, 7.2vw, 120px);
}

.recruit_wrapper .entry_container .text_slider_area {
    position: relative;
    margin-top: 56px;
}

.recruit_wrapper .entry_container .text_slider_area .wright-target {
    position: absolute;
    top: -120px;
    right: 15%;
    width: 110px;
    fill: transparent;
}

.recruit_wrapper .entry_container .text_slider_area svg.wright #text {
    mask: url(#ent_mask-wrapper);
    fill: #333;
}

.recruit_wrapper .entry_container .text_slider_area .text_slider {
    display: block;
    padding: 53px 0;
    border-bottom: 3px solid var(--base-color);
}

.recruit_wrapper .main_recruit_wrapper .entry_container .text_slider p {
    margin: 0 2em;
}

.recruit_wrapper .main_recruit_wrapper .entry_container .text_slider p:last-of-type {
    padding: 12px 20px;
}

.recruit_wrapper .entry_container .text_slider_area .text_slider:nth-of-type(1) {
    background: var(--recruit-pink);
    border-top: 3px solid var(--base-color);
}

.recruit_wrapper .entry_container .text_slider_area .text_slider:nth-of-type(2) {
    background: var(--recruit-yellow);
}

.recruit_wrapper .entry_container .text_slider_area .text_slider:nth-of-type(3) {
    background: var(--recruit-green);
    border-bottom: none;
}

.recruit_wrapper .entry_container .text_slider_area .text_slider:nth-of-type(4) {
    background: var(--recruit-blue);
}

.recruit_wrapper .entry_container .text_slider_area .text_slider:nth-of-type(5) {
    background: var(--recruit-red);
    border-bottom: none;
}

@media screen and (max-width:990px) {
    .recruit_wrapper .height {
        width: 100%;
        height: 60vh;
    }

    .recruit_wrapper .main_content .smilestone {
        padding: 50px 0;
    }

    .recruit_wrapper .main_content .content_area .box.message {
        padding: 60px 0;
    }

    .recruit_wrapper .main_content .content_area .box.message .inner .text {
        margin-top: 30px;
        width: 100%;
    }

    .recruit_wrapper .main_content .content_area .box.about,
    .recruit_wrapper .main_content .content_area .box.service {
        padding: 60px 0 40px;
    }

    .recruit_wrapper .main_content .content_area .box.about .inner .text,
    .recruit_wrapper .main_content .content_area .box.service .inner .text {
        width: 100%;
    }

    .recruit_wrapper .welfare_container {
        padding-top: 165px;
    }

    .recruit_wrapper .welfare_container .content .box {
        padding: 50px 0;
    }

    .recruit_wrapper .welfare_container .content .box .inner {
        gap: 5vw;
    }

    .recruit_wrapper .welfare_container .content .box .inner .text_item {
        gap: 3vw;
        width: calc(100% - 5vw - 25.8vw);
    }

    .recruit_wrapper .welfare_container .content .box .inner .text_item .text {
        width: calc(100% - 3vw - 15.8vw);
        max-width: calc(100% - 3vw - 184px);
    }

    .recruit_wrapper .about_container {
        margin-top: 135px;
    }

    .recruit_wrapper .about_container .content {
        margin-top: 30px;
    }

    .recruit_wrapper .about_container .content .box {
        gap: 50px;
        padding: 50px 0 25px;
    }

    .recruit_wrapper .job_container {
        margin-top: 135px;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list {
        padding: 80px 0;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list p {
        font-size: 20px;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li p:first-of-type {
        font-size: 14px !important;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li p:last-of-type {
        font-size: 12px;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail {
        padding: 80px 0;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl {
        padding: 30px 0;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl {
        flex-direction: column;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dt {
        margin: 0 auto;
        padding-bottom: 16px;
        width: 90%;
        min-width: unset;
        max-width: unset;
        border-right: none;
        border-bottom: 2px solid #C7BBAF;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd {
        margin: 0 auto;
        padding-top: 16px;
        width: 90%;
        min-width: unset;
        max-width: unset;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl dd .inner {
        width: 100%;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl.project_ex dd .inner table tr {
        flex-direction: column;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl.project_ex dd .inner table tr td {
        width: 100%;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl.technology_environment dd .inner table tr {
        flex-direction: column;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job-detail .inner .detail-item .job_content dl.technology_environment dd .inner table tr td {
        width: 100%;
    }

    .recruit_wrapper .other_wrapper {
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    }

    .recruit_wrapper .entry_container .text_slider_area .text_slider {
        padding: 35px 0;
    }
}

@media screen and (max-width:768px) {
    .recruit_wrapper .main_content .smilestone {
        padding: 30px 0;
    }

    .recruit_wrapper .main_content .content_area {
        display: flex;
        flex-wrap: wrap;
    }

    .recruit_wrapper .main_content .content_area .box.message {
        width: 100%;
        border-right: none;
        border-bottom: 3px solid var(--base-color);
    }

    .recruit_wrapper .main_content .content_area .box.about,
    .recruit_wrapper .main_content .content_area .box.service {
        width: calc(100%/2);
    }

    .recruit_wrapper .main_content .content_area .box.about {
        border-right: 3px solid var(--base-color);
        border-bottom: none;
    }

    .recruit_wrapper .main_content .content_area .box.about .inner a .sticker,
    .recruit_wrapper .main_content .content_area .box.service .inner a .sticker {
        width: 20vw;
        height: 20vw;
    }

    .recruit_wrapper .main_content .content_area .box.about .inner a svg,
    .recruit_wrapper .main_content .content_area .box.service .inner a svg {
        width: 12vw;
    }

    .recruit_wrapper .main_content .content_area .box.service .inner a {
        margin: 10% 0 0 5%;
        justify-content: flex-start;
    }

    .recruit_wrapper .welfare_container .content .box .inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .recruit_wrapper .welfare_container {
        padding-top: 470px;
    }

    .recruit_wrapper .welfare_container .deco_img.we01 {
        top: -9px;
        right: -10px;
    }

    .recruit_wrapper .welfare_container .deco_img.we02 {
        top: 160px;
        right: 90px;
    }

    .recruit_wrapper .welfare_container .deco_img.we03 {
        bottom: unset;
        left: unset;
        top: -60px;
        right: 0;
        min-width: 121px;
        transform: scale(0) rotate(10deg);
    }

    .recruit_wrapper .welfare_container .deco_img.we03.active {
        transform: scale(1) rotate(10deg);
    }

    .recruit_wrapper .welfare_container .deco_img.we03 .tape {
        min-width: 90px;
    }

    .recruit_wrapper .welfare_container .deco_img.we04 {
        bottom: unset;
        left: unset;
        top: -60px;
        right: 0;
        min-width: 121px;
        transform: scale(0) rotate(8deg);
    }

    .recruit_wrapper .welfare_container .deco_img.we04.active {
        transform: scale(1) rotate(8deg);
    }

    .recruit_wrapper .welfare_container .deco_img.we04 .tape {
        min-width: 80px;
    }

    .recruit_wrapper .welfare_container .content .box .inner .number {
        width: 100%;
        max-width: 300px;
    }

    .recruit_wrapper .welfare_container .content .box .inner .text_item {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .recruit_wrapper .welfare_container .content .box .inner .text_item .name {
        width: 100%;
    }

    .recruit_wrapper .welfare_container .content .box .inner .text_item .text {
        width: 100%;
        max-width: unset;
    }

    .recruit_wrapper .about_container .content .box {
        width: calc(100%/2);
    }

    .recruit_wrapper .about_container .content .box:nth-child(odd) {
        border-right: 3px solid var(--base-color);
    }

    .recruit_wrapper .about_container .content .box:nth-of-type(2) {
        border-right: none;
        border-left: none;
    }

    .recruit_wrapper .about_container .content .box:nth-of-type(4) {
        border-bottom: 3px solid var(--base-color);
    }

    .recruit_wrapper .about_container .content .box:nth-of-type(5) {
        border-left: none;
    }

    .recruit_wrapper .job_container.pc {
        display: none;
    }

    .recruit_wrapper .job_container.sp {
        display: block;
    }

    .recruit_wrapper .job_container .job-tabs .tab-buttons li {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .recruit_wrapper .job_container .job-tabs .tab-buttons li {
        padding: 13px 0;
        width: calc((100% - 25%) / 3 + 40px);
        border-radius: 0 20px 0 0;
    }

    .recruit_wrapper .job_container .job-tabs .tab-buttons li:first-child {
        border-radius: 0 20px 0 0 !important;
    }

    .recruit_wrapper .job_container .job-tabs .tab-buttons li.active {
        padding: 22px 0 13px;
        width: 25%;
        border-radius: 20px 20px 0 0;
    }

    .recruit_wrapper .job_container .job-tabs .tab-buttons li.active p {
        margin: 0 auto;
    }

    .recruit_wrapper .job_container .job-tabs .tab-buttons li:first-of-type p {
        margin-left: 10px !important;
    }

    .recruit_wrapper .job_container .job-tabs .tab-buttons li:not(.active) p:nth-of-type(1),
    .recruit_wrapper .job_container .job-tabs .tab-buttons li:not(.active) p:nth-of-type(2) {
        margin-left: 35%;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list {
        padding: 60px 0;
        width: 100%;
        min-width: unset;
        max-width: unset;
        border-right: none;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list .inner {
        width: 100%;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list p {
        margin: 0 auto;
        width: 90%;
        font-size: 24px;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list li .job-list-title {
        padding: 26px 0;
        position: relative;
        margin: 0 auto;
        width: 90%;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list li .job-list-title p {
        margin: 0;
        width: calc(100% - 50px);
        color: var(--base-color);
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li:not(.open) .job-list-title p .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li p:first-of-type {
        font-size: 18px !important;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li p:last-of-type {
        font-size: 14px;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list li .job-list-title .arrow {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 23px;
        height: 19px;
        transition: .3s;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li.open .job-list-title .arrow {
        transform: translateY(-50%) rotate(180deg);
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list li .job-list-title .arrow::before {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
        display: inline-block;
        content: "";
        width: 13px;
        height: 13px;
        border-top: 2px solid var(--base-color);
        border-right: 2px solid var(--base-color);
    }

    .recruit_wrapper .other_wrapper {
        display: block;
    }

    .recruit_wrapper .other_wrapper .ttl_box {
        padding: 60px 0 35px;
    }

    .recruit_wrapper .other_wrapper .ttl_box.flow_ttl {
        border-right: none;
    }

    .recruit_wrapper .other_wrapper div:nth-of-type(2),
    .recruit_wrapper .other_wrapper div:nth-of-type(3),
    .recruit_wrapper .other_wrapper div:nth-of-type(4),
    .recruit_wrapper .other_wrapper div:nth-of-type(5) {
        border-right: none;
    }

    .recruit_wrapper .other_wrapper .ttl_box.faq_ttl {
        border-top: 3px solid var(--base-color);
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li {
        padding: 0 !important;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp {
        padding: 0 0 40px;
        border-top: 2px solid var(--base-color);
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner {
        margin: 0 auto;
        width: 90%;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl {
        padding: 40px 0;
        border-bottom: 2px solid var(--base-color);
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl:last-of-type {
        border-bottom: none;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl dt {
        padding-bottom: 16px;
        font-size: 18px;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: 0.05em;
        border-bottom: 2px solid #C7BBAF;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl dd {
        padding-top: 16px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.8;
        letter-spacing: 0.05em;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl dd .inner {
        width: 100%;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl dd .inner p {
        width: 100%;
        font-size: 15px !important;
        font-weight: 600;
        line-height: 1.8;
        letter-spacing: 0.05em;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl dd ul {
        margin-left: 1em;

    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl dd ul,
    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl dd p:not(:first-of-type) {
        margin-top: 12px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.8;
        letter-spacing: 0.05em;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl dd ul li {
        list-style: disc;
        border-bottom: none;
        padding: 0 !important;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl dd table tr {
        display: flex;
        flex-direction: column;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl.technology_environment dd table tr {
        flex-direction: row;
        gap: 16px;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl dd table tr:not(:first-of-type) {
        margin-top: 24px;
    }


    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl dd table tr td {
        width: 100%;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl dd table tr td:first-of-type {
        padding: 2px 0;
        background: #D5CABD;
        border-radius: 4px;
        text-align: center;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl.technology_environment dd table tr td:first-of-type {
        width: 160px;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl.work_place dd p:nth-of-type(2) {
        color: #948E89;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.05em;
    }

    .recruit_wrapper .job_container .tab-contents .tab-content .job-item .job_list ul li .job-detail-sp .inner dl.technology_environment dd table tr td:last-of-type {
        width: calc(100% - 160px - 16px);
    }

    .recruit_wrapper .entry_container .text_slider_area .wright-target {
        top: -95px;
        width: 85px;
    }

    .recruit_wrapper .main_recruit_wrapper .entry_container .text_slider p {
        margin: 0px 1em;
    }
}

@media screen and (max-width:500px) {
    .recruit_wrapper .main_content .content_area .box.message {
        padding: 56px 0 80px;
    }

    .recruit_wrapper .main_content .content_area .box.about,
    .recruit_wrapper .main_content .content_area .box.service {
        width: 100%;
    }

    .recruit_wrapper .main_content .content_area .box.about {
        border-right: none;
        border-bottom: 3px solid var(--base-color);
    }

    .recruit_wrapper .main_content .content_area .box.about .inner a .sticker,
    .recruit_wrapper .main_content .content_area .box.service .inner a .sticker {
        width: 156px;
        height: 156px;
    }

    .recruit_wrapper .main_content .content_area .box.about .inner a svg,
    .recruit_wrapper .main_content .content_area .box.service .inner a svg {
        width: 94px;
    }

    .recruit_wrapper .welfare_container .content .box .inner {
        align-items: flex-start;
    }

    .recruit_wrapper .welfare_container .content .box {
        padding: 100px 0 63px;
        border-bottom: 3px solid var(--base-color);
    }

    .recruit_wrapper .welfare_container .content .box .inner {
        align-items: center;
    }

    .recruit_wrapper .about_container .content .box {
        flex-direction: row-reverse;
        justify-content: space-around;
        width: 100%;
        border-bottom: 3px solid var(--base-color);
    }

    .recruit_wrapper .about_container .content .box:last-of-type {
        border-bottom: none;
    }

    .recruit_wrapper .about_container .content .box:nth-child(odd) {
        border-right: none;
    }

    .recruit_wrapper .job_container .job-tabs .tab-buttons li:not(.active) p:nth-of-type(1),
    .recruit_wrapper .job_container .job-tabs .tab-buttons li:not(.active) p:nth-of-type(2) {
        margin-left: 45px;
    }

    .recruit_wrapper .entry_container .text_slider_area {
        margin-top: 110px;
    }

    .recruit_wrapper .entry_container .text_slider_area .wright-target {
        right: 10%;
    }
}

/*---------------------------------------------------------
                エントリー 
---------------------------------------------------------*/
/* チェックボックス */
.contact_container .contact_content .contact_box .form_box dl .form_item .check_box .wpcf7-form-control.wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* ファイル添付 */
.contact_container .codedropz-upload-inner h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.contact_container .codedropz-upload-inner span {
    display: block;
    margin: 5px 0;
    font-size: 14px;
}

.contact_container .min {
    display: block;
    font-size: 14px;
    margin-top: 4px;
    text-align: right;
    font-weight: 400;
}

.entry_wrapper input#confirm {
    display: none;
}

/* snsセレクト */
.ImageSelector {
    display: inline-flex;
    position: relative;
    padding: 20px 15px;
    width: 100%;
    background-color: var(--bg-color);
    border: 3px solid var(--base-color);
    outline: 0;
    -webkit-appearance: none;
    border-radius: 0;
    cursor: pointer;
}

.ImageSelector__display,
.ImageSelector__preview,
.ImageSelector__preview-child {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.ImageSelector__preview img {
    width: 20px;
}

.ImageSelector__option {
    padding: 20px 15px;
    display: inline-flex;
    gap: 15px;
    background-color: #fff;
}

.ImageSelector__option:hover {
    background-color: #3498DB;
    color: #fff;
}

.ImageSelector__option img {
    width: 20px;
}

.ImageSelector__pulldown {
    display: none;
    flex-direction: column;
    box-sizing: border-box;
    max-height: 300px;
    position: absolute;
    top: 100%;
    left: -1px;
    z-index: 10;
    background-color: var(--bg-color);
    border: 3px solid var(--base-color);
    overflow-y: auto;
}

.ImageSelector__s-spread {
    display: flex;
    width: 100%;
}

.demo-flex {
    display: flex;
    align-items: center;
}

.sns_noneDisplay {
    display: none;
}

input[name="sns_account_name"] {
    margin-top: 10px;
    padding: 20px 15px 20px 40px;
}

[data-name="file_upload"] {
    cursor: pointer;
}

[data-id="group-select02"] {
    position: relative;
}

[data-id="group-select02"]::before {
    position: absolute;
    top: 30px;
    left: 15px;
    z-index: 1;
    display: block;
    content: "@";
}


/*---------------------------------------------------------
                プライバシーポリシー
---------------------------------------------------------*/
.privacy_wrapper .inner {
    padding: 250px 0 200px;
    margin: 0 auto;
    width: 80vw;
}

.privacy_wrapper .inner h1 {
    font-size: clamp(36px, 5.5vw, 100px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0;
}

.privacy_wrapper .inner h2 {
    margin-top: 80px;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.privacy_wrapper .inner h2:nth-of-type(2) {
    margin-top: 180px;
}

.privacy_wrapper .inner .top_txt {
    margin-top: 30px;
}

.privacy_wrapper .inner ul {
    margin: 50px 0 0 1.5em;
    font-style: normal;
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.05em;
}

.privacy_wrapper .inner ul li {
    list-style: decimal;
}

.privacy_wrapper .inner ul li:not(:first-of-type) {
    margin-top: 20px;
}

.privacy_wrapper .inner .mark_container {
    margin-top: 80px;
}

.privacy_wrapper .inner h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
}

.privacy_wrapper .inner .mark_container .content {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
}

.privacy_wrapper .inner .mark_container .content .text_area {
    width: calc(100% - 30px - 100px);
}

.privacy_wrapper .inner a {
    display: block;
    margin-top: 10px;
    padding: 10px 20px;
    width: fit-content;
    background: var(--base-color);
    color: var(--text-color);
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.05em;
    text-align: center;
    border-radius: 50px;
}

.privacy_wrapper .inner a br {
    display: none;
}

.privacy_wrapper .inner .mark_container .content img {
    width: 100px;
}

.privacy_wrapper .inner .info_container {
    margin-top: 80px;
    padding: 25px;
    background: #F4F4F4;
}

.privacy_wrapper .inner .info_container .name {
    margin-top: 20px;
}

.privacy_wrapper .inner .info_container .area {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-top: 10px;
}

.privacy_wrapper .inner .info_container .area .text_box,
.privacy_wrapper .inner .info_container .area .link_box {
    width: calc((100% - 30px)/2);
}

.privacy_wrapper .inner .info_container .area .text_box p {
    line-height: 1.7;
}

.privacy_wrapper .right_text_container {
    margin-top: 30px;
    text-align: right;
}

.privacy_wrapper .inner ul.handling_list {
    font-size: 22px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.05em;
}

.privacy_wrapper .inner ul.handling_list li:not(:first-of-type) {
    margin-top: 50px;
}

.privacy_wrapper .inner ul.handling_list li ul {
    margin-top: 1em;
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.05em;
}

.privacy_wrapper .inner ul.handling_list li ul li {
    margin-top: 0 !important;
    list-style: disc;
}

@media screen and (max-width:990px) {
    .privacy_wrapper .inner {
        width: 90vw;
    }

    .privacy_wrapper .inner .info_container .area {
        flex-direction: column;
        gap: 10px;
    }

    .privacy_wrapper .inner .info_container .area .text_box,
    .privacy_wrapper .inner .info_container .area .link_box {
        width: 100%;
    }
}

@media screen and (max-width:768px) {
    .privacy_wrapper .inner {
        padding: 150px 0 100px;
    }

    .privacy_wrapper .inner h2 {
        margin-top: 30px;
        font-size: 28px;
    }

    .privacy_wrapper .inner .mark_container .content {
        flex-direction: column;
        align-items: flex-start;
    }

    .privacy_wrapper .inner .mark_container .content .text_area {
        width: 100%;
    }

    .privacy_wrapper .inner p,
    .privacy_wrapper .inner ul,
    .privacy_wrapper .inner a,
    .privacy_wrapper .inner ul.handling_list li ul {
        font-size: 16px;
    }

    .privacy_wrapper .inner a {
        width: 100%;
    }

    .privacy_wrapper .inner a br {
        display: block;
    }

    .privacy_wrapper .inner ul.handling_list {
        font-size: 20px;
    }

}

@media screen and (max-width:500px) {
    .privacy_wrapper .inner h2 {
        font-size: 24px;
    }

    .privacy_wrapper .inner h2:nth-of-type(2) {
        margin-top: 150px;
    }

    .privacy_wrapper .inner h3 {
        font-size: 20px;
    }

    .privacy_wrapper .inner ul.handling_list {
        font-size: 18px;
    }
}

/*---------------------------------------------------------
                404エラー
---------------------------------------------------------*/
.error_wrapper {
    position: relative;
}

.error_wrapper .txt_box {
    position: absolute;
    top: 17.8vw;
    left: 17.4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    width: 29vw;
    height: 15vw;
}

.error_wrapper .txt_box h1 {
    line-height: 1.2;
    font-family: "Inter", sans-serif;
    font-size: clamp(34px, 3.2vw, 50px);
    text-align: center;
}

.error_wrapper .img_bg {
    width: 80%;
    margin: 0 auto 0 0;
}

.error_wrapper .btn {
    margin: 0 auto;
    font-size: 18px;
}

.error_wrapper .btn img {
    width: 14px;
    min-width: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .error_wrapper .btn:hover .arrow {
        transform: translate(3px, -3px) !important;
    }
}

@media screen and (max-width:990px) {
    .error_wrapper .img_bg {
        width: 100%;
    }

    .error_wrapper .txt_box {
        position: absolute;
        top: 19.8vw;
        left: 17.4vw;
        width: 40vw;
        height: auto;
        padding: 4vw 0;
        background: #333;
    }
}


@media screen and (max-width:768px) {
    .error_wrapper .txt_box {
        position: static;
        width: auto;
        padding: 160px 0 80px;
    }
}

/*---------------------------------------------------------
                グリッチ 
---------------------------------------------------------*/
.glitch_cover {
    position: relative;
    color: white;
    animation: glitchAnim 1s infinite;
}

.glitch_cover::before,
.glitch_cover::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    color: white;
    background: transparent;
    clip: rect(0, 0, 0, 0);
}

.glitch_cover::before {
    animation: glitchTop 2s infinite linear alternate-reverse;
    color: #ff3cc7;
}

.glitch_cover::after {
    animation: glitchBottom 1.5s infinite linear alternate-reverse;
    color: #00fff9;
}

@keyframes glitchAnim {
    0% {
        transform: none;
    }

    20% {
        transform: skew(-1deg, 0.5deg);
    }

    40% {
        transform: skew(1deg, -0.5deg);
    }

    60% {
        transform: translate(2px, -1px);
    }

    80% {
        transform: translate(-2px, 1px);
    }

    100% {
        transform: none;
    }
}

@keyframes glitchTop {
    0% {
        clip: rect(0, 9999px, 0, 0);
    }

    10% {
        clip: rect(10px, 9999px, 30px, 0);
    }

    20% {
        clip: rect(5px, 9999px, 25px, 0);
    }

    30% {
        clip: rect(15px, 9999px, 35px, 0);
    }

    100% {
        clip: rect(0, 9999px, 0, 0);
    }
}

@keyframes glitchBottom {
    0% {
        clip: rect(0, 9999px, 0, 0);
    }

    10% {
        clip: rect(35px, 9999px, 60px, 0);
    }

    20% {
        clip: rect(25px, 9999px, 55px, 0);
    }

    30% {
        clip: rect(40px, 9999px, 65px, 0);
    }

    100% {
        clip: rect(0, 9999px, 0, 0);
    }
}


#school_name-suggestion-box,
#company_name-suggestion-box,
#email_suggestions {
    max-height: 200px;
    overflow-y: scroll;
}

/* macOS Safari/Chrome で強制的にスクロールバーを描画 */
#school_name-suggestion-box::-webkit-scrollbar,
#company_name-suggestion-box::-webkit-scrollbar,
#email_suggestions::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
    /* 好みの幅に調整 */
}

#school_name-suggestion-box::-webkit-scrollbar-thumb,
#company_name-suggestion-box::-webkit-scrollbar-thumb,
#email_suggestions::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

/* リキャプチャ */
.grecaptcha-badge {
    visibility: hidden;
}

.reCAPTCHA_txt {
    margin-top: 16px;
    font-size: 10px;
    text-align: center;
}

.reCAPTCHA_txt a {
    text-decoration: underline;
}