@charset "utf-8";

/* ===============================
           ローディング全体
        =============================== */
.loading {
    position: fixed;
    inset: 0;
    background: #EEEEEE;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease;
    pointer-events: all;
}

.loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* ===============================
           ローディング画像
        =============================== */
.loading img {
    max-width: 676px;
    width: 35%;
    opacity: 0;
    animation: fadeIn 1.2s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.text {
    opacity: 0;
}

.text.is-active {
    --x: 0;
    opacity: 1;
}

@media (max-width: 960px) {
    .loading img {
        width: 80%;
    }
}

.t_fv {
    background: url(/system_panel/uploads/images/20260122153917606528.png) no-repeat top/100% auto;
}

.t_fv .inner {
    margin: 0 4%;
    padding-top: 197px;
    padding-bottom: 160px;
    display: grid;
    grid-template-columns: 38% auto;
    column-gap: 3%;
    position: relative;
}

.t_fv .inner .fv-img {
    position: relative;
    margin-right: 4%;
    flex: 1;
}

.t_fv .inner .fv-img::after {
    content: "Office Mirai";
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-size: 61px;
    font-size: clamp(2.5rem, 2.165rem + 1.37vw, 3.813rem);
    line-height: clamp(3.125rem, 2.504rem + 2.55vw, 5.563rem);
    letter-spacing: -0.05em;
    color: #000;
    position: absolute;
    bottom: -55px;
    right: 0;
}

.t_fv .inner .fv-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}





.t_fv .inner .fv-title .js-ttl-en .char-text {
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-size: 65px;
    font-size: clamp(2.5rem, 2.102rem + 1.63vw, 4.063rem);
    line-height: clamp(3.125rem, 2.727rem + 1.63vw, 4.688rem);
    letter-spacing: -0.05em;
    color: #000;


}

.t_fv .inner .fv-title .js-catch .char-text {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: 18px;
    font-size: clamp(0.875rem, 0.811rem + 0.26vw, 1.125rem);
    letter-spacing: 0.2em;
    line-height: clamp(1.563rem, 1.435rem + 0.52vw, 2.063rem);
    color: #000;
}

.t_fv .inner .fv-news {
    position: absolute;
    left: 0;
    bottom: 160px;
    max-width: 33%;
}

.webgene-blog .newsItem {
    position: relative;

}

.webgene-blog .newsItem .newsLink {
    display: block;
    background: #f7f7f7;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    padding: 15px;
    transition: .4s ease;
}

.webgene-blog .newsItem::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 100%;
    display: inline-block;
    width: 3px;
    height: 100%;
    background-color: #023684;
}

.webgene-blog .newscontents {
    display: grid;
    grid-template-columns: 22% auto;

}

.webgene-blog .newsdate {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #000;
}

.webgene-blog .newsdate-year {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #000;
}

.webgene-blog .newsdate-md {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #000;
}

.webgene-blog .newstitle {
    display: flex;
    flex-direction: column;
    gap: 11px;
    align-items: flex-start;
}

.webgene-blog .newsItemTit {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.webgene-blog .newsItemCate {
    font-family: "Noto Sans JP", sans-serif;
    display: inline-block;
    color: #fff;
    text-align: center;
    background-color: #023684;
}

.fv-news .webgene-blog .newsItemCate {
    font-weight: 700;
    font-size: 11px;
    font-size: clamp(0.5rem, 0.452rem + 0.2vw, 0.688rem);
    line-height: clamp(1rem, 0.936rem + 0.26vw, 1.25rem);
    padding: 0 18px;
    border-radius: 21px;
}

.fv-news .webgene-blog .newsdate {
    padding-right: 16px;
}

.fv-news .webgene-blog .newsdate-year {
    font-size: 14px;
    font-size: clamp(0.625rem, 0.561rem + 0.26vw, 0.875rem);
}

.fv-news .webgene-blog .newsdate-md {
    font-size: 19px;
    font-size: clamp(0.938rem, 0.874rem + 0.26vw, 1.188rem);
}

.fv-news .webgene-blog .newsItemTit {
    font-size: 14px;
    font-size: clamp(0.75rem, 0.718rem + 0.13vw, 0.875rem);
    line-height: clamp(1.063rem, 1.015rem + 0.2vw, 1.25rem);
    color: #000;
    -webkit-line-clamp: 2;
}

.fv-news .webgene-blog .newscontents {
    gap: 16px;
}

.t_news .webgene-blog {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}

.t_news .webgene-blog .newsLink {
    padding: 28px;
}

.t_news .webgene-blog .newsItem {
    width: 100%;
}

.t_news .webgene-blog .newsItem:hover .newsLink {
    background-color: #FFF;
}


.t_news .webgene-blog .newsItemCate {
    font-weight: 700;
    font-size: 11px;
    line-height: 24px;
    padding: 0 20px;
    border-radius: 21px;
}

.t_news .webgene-blog .newsdate {
    padding-right: 36px;
}

.t_news .webgene-blog .newsdate-year {
    font-size: 23px;
    font-size: clamp(0.625rem, 0.418rem + 0.85vw, 1.438rem);
    line-height: 1;
}

.t_news .webgene-blog .newsdate-md {
    font-size: 31px;
    font-size: clamp(0.938rem, 0.683rem + 1.05vw, 1.938rem);
    margin-top: -4px;
}

.t_news .webgene-blog .newsItemTit {
    font-size: 18px;
    font-size: clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem);
    line-height: clamp(1.25rem, 1.059rem + 0.78vw, 2rem);
    color: #000;
    -webkit-line-clamp: 1;
}

.t_news .webgene-blog .newscontents {
    gap: 36px;
    grid-template-columns: 13% 80%;
}








.t_navi {
    background-color: rgba(255, 255, 255, 0.55);
}

.t_navi .inner {
    margin: 0 8%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    padding: 100px 0 96px;
}

.t_navi .inner .item {
    position: relative;
    overflow: hidden;
}

.t_navi .inner .item .bg {
    transition: .4s ease;
    width: 100%;
}

.t_navi .inner .item:hover .bg {
    transform: scale(1.2);
}


.t_navi .inner .item .box-title {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.t_navi .inner .item .box-title .ttl-en {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: 14px;
    font-size: clamp(0.688rem, 0.64rem + 0.2vw, 0.875rem);
    line-height: 1.4;
    color: #fff;
}

.t_navi .inner .item .box-title .ttl-ja {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 23px;
    font-size: clamp(1.125rem, 1.045rem + 0.33vw, 1.438rem);
    line-height: 1;
    color: #fff;
    margin-bottom: 20px;
}

.t_navi .inner .item .box-title .morebtn {
    background-color: #FFF;
    display: block;
    padding: 8px 29px;
    border-radius: 50px;
}

.t_navi .inner .item .box-title .morebtn p {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 16px;
    font-size: clamp(0.75rem, 0.686rem + 0.26vw, 1rem);
    line-height: 1;
    text-align: center;
    color: #000;
}



.t_vision .inner {
    margin: 0 8%;
    padding: 80px 0 160px;
    display: grid;
    grid-template-columns: 55% auto;
    align-items: center;
    column-gap: 4%;
    position: relative;
}

.t_vision .inner .text.is-active {
    --x: 0;
    opacity: 1;
}

.t_vision .inner .sec-title {
    margin-bottom: 47px;
}

.t_vision .inner .sec-catch {

    margin-bottom: 47px;
}

.t_vision .inner .sec-catch .js-catch {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: 19px;
    font-size: clamp(1.125rem, 1.109rem + 0.07vw, 1.188rem);
    letter-spacing: 0.2em;
    line-height: clamp(2rem, 1.793rem + 0.85vw, 2.813rem);
    color: #000;
}

.t_vision .inner .column {
    position: relative;
    display: flex;
    margin-bottom: 64px;
    align-items: flex-start;
}

.t_vision .inner .column .circle {
    max-width: 253px;
    width: 50%;
    aspect-ratio: 1/1;
    border: 1px solid #707070;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.t_vision .inner .column .circle:nth-child(odd) {
    margin-top: 153px;
}

.t_vision .inner .column .circle:first-child {
    left: 83px;
}

.t_vision .inner .column .circle:nth-child(3) {
    right: 83px;
}

.t_vision .inner .column .circle .ttl {
    margin-bottom: 13px;
}

.t_vision .inner .column .circle .main {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: 16px;
    font-size: clamp(0.813rem, 0.765rem + 0.2vw, 1rem);
    color: #000;
    text-align: center;
}

.t_vision .inner .column .circle .sub {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: 11px;
    text-align: center;
    color: #000;
}

.t_vision .inner .col-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.t_vision .inner .col-right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: flex-start;
    margin-top: 156px;
    gap: 4%;
    position: relative;
    z-index: 5;
}

.t_vision .inner .col-img {
    display: none;
}

.t_vision .inner .col-right::after {
    content: "";
    background: url(/system_panel/uploads/images/20260121184656632738.svg) no-repeat center/contain;
    position: absolute;
    max-width: 527px;
    width: 53%;
    height: 480px;
    top: calc(100% - 142px);
    right: 175px;
    z-index: -1;
}

.t_vision .inner .col-right img {
    max-width: 255px;
    width: 100%;
}

.t_vision .inner .col-right img:last-child {
    margin-top: 263px;
}

.t_vision .inner .desc {
    margin-bottom: 40px;
}

.t_vision .inner .catch {
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 40px;
    color: #000;
    margin-bottom: 64px;
}

.t_vision .morebtn {
    max-width: 250px;
    width: 100%;
}

.t_service {
    background-color: rgba(255, 255, 255, 0.55);
}

.t_service .inner {
    padding: 80px 0 160px;
    margin: 0 8%;
    position: relative;
}

.t_service .inner .text.is-active {
    --x: 0;
    opacity: 1;
}

.t_service .inner .sec-title {
    margin-bottom: 64px;
}

.t_service .inner .item {
    display: grid;
    grid-template-columns: 30% auto;
    gap: 4%;
    align-items: flex-start;
    margin-bottom: 96px;
}


.t_service .inner .item:nth-child(3) {
    grid-template-areas: "text img";
    grid-template-columns: auto 30%;
}

.t_service .inner .item:nth-child(3) .col-img {
    grid-area: img;
}

.t_service .inner .item:nth-child(3) .col-text {
    grid-area: text;
}

.t_service .inner .item:last-child {
    margin-bottom: 0;
}


.t_service .inner .title {
    margin-bottom: 20px;
}

.t_service .inner .title .ttl-en {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: 14px;
    color: #000;
}

.t_service .inner .title .ttl-ja {
    font-family: "Noto Serif JP", serif;
    font-weight: 800;
    font-size: 26px;
    font-size: clamp(1.5rem, 1.468rem + 0.13vw, 1.625rem);
    letter-spacing: 0.2em;
    line-height: 1;
    color: #023684;
}

.t_service .inner .col-text .column {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.t_service .inner .col-text .column .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 110px;
    width: 30%;
    aspect-ratio: 1/1;
    background: #fff;
    border-radius: 50%;
}

.t_service .inner .col-text .column .circle p {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 14px;
    font-size: clamp(0.75rem, 0.718rem + 0.13vw, 0.875rem);
    line-height: clamp(1.25rem, 1.218rem + 0.13vw, 1.375rem);
    text-align: center;
    color: #000;
}

.t_service .inner .col-text .desc {
    padding-bottom: 40px;
    border-bottom: 1px solid #707070;
    margin-bottom: 20px;
}

.t_service .inner .col-text .desc p {
    font-size: 14px;
    line-height: 30px;
}

.t_service .inner .col-text .list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.t_service .inner .col-text .list .column {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 23px;
}

.t_service .inner .col-text .list .column p {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 14px;
    font-size: clamp(0.75rem, 0.718rem + 0.13vw, 0.875rem);
    text-align: center;
    color: #000;
    border: 1px solid #000;
    border-radius: 16px;
    padding: 4px 16px;
}

.t_service .inner .col-text .btnarea {
    display: flex;
    align-items: center;
    gap: 48px;
}

.t_service .inner .col-text .btnarea .morebtn {
    border-radius: 9px;
    max-width: 427px;
    width: 50%;
}

.t_case {
    background: url(/system_panel/uploads/images/20260122153917605089.png) no-repeat left bottom 30px/100% auto;
}

.t_case .inner {
    margin: 0 8%;
    padding: 120px 0;
    position: relative;
}

.t_case .inner .sec-title {
    text-align: center;
    margin-bottom: 20px;
}

.t_case .inner .sec-catch {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: 24px;
    font-size: clamp(1rem, 0.873rem + 0.52vw, 1.5rem);
    letter-spacing: 0.2em;
    line-height: clamp(2rem, 1.618rem + 1.57vw, 3.5rem);
    text-align: center;
    color: #000;
    margin-bottom: 40px;
}

.t_case .inner .column {
    display: flex;
    align-items: center;
    gap: 60px;
    justify-content: center;
    margin-bottom: 64px;
}

.t_case .inner .column .item {
    display: flex;
    flex-direction: column;
    gap: 11px;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 161px;
    width: 50%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #FFF;
}

.t_case .inner .column .item .ttl {
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-size: 18px;
    font-size: clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem);
    line-height: 1;
    text-align: center;
    color: #000;
}

.t_case .box {
    background: #f7f7f7;
    margin-bottom: 40px;
}

.t_case .box .box-inner {
    display: grid;
    grid-template-columns: 40% auto;
    gap: 44px;
    padding: 40px;
}

.t_case .box .box-inner .label {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 42px;
    text-align: center;
    display: inline-block;
    padding: 0 20px;
    border-radius: 21px;
    background: transparent;
    border: 1px solid #000;
    color: #000;
    margin-bottom: 18px;
}

.t_case .box .box-inner .title {
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-size: clamp(1rem, 0.939rem + 0.26vw, 1.25rem);
    line-height: clamp(1.438rem, 1.346rem + 0.39vw, 1.813rem);
    text-align: left;
    color: #000;
    margin-bottom: 20px;
}

.t_case .box .box-inner .system {
    padding: 20px 0 0;
    border-top: 1px solid #707070;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.t_case .box .box-inner .system .ttl {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-align: left;
    color: #023684;
}

.t_case .box .box-inner .system .desc p {
    font-size: clamp(0.875rem, 0.845rem + 0.13vw, 1rem);
    line-height: clamp(1.25rem, 1.189rem + 0.26vw, 1.5rem);
    text-align: left;
    color: #000;
}

.t_case .inner .morebtn {
    max-width: 299px;
    width: 100%;
    margin-left: auto;
}

.t_news .inner {
    padding: 120px 0 160px;
    margin: 0 8%;
    display: grid;
    grid-template-columns: max-content auto;
    gap: 4%;
    position: relative;
}

.t_news .inner .sec-title {
    margin-bottom: 40px;
}

.t_news .inner .morebtn {
    max-width: 187px;
    width: 100%;
}

.t_case .box .box-inner > img{
  display:none;
}

.t_case .box .box-inner{
    grid-template-columns: 100%;
}


@media (max-width: 1164px) {
    .t_navi .inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1260px) {
    .t_vision .inner {
        display: flex;
        flex-direction: column-reverse;
        position: relative;
        z-index: 10;
    }

    .t_vision .inner .col-img {
        display: grid;
        grid-template-columns: repeat(2, 30%);
        align-items: flex-start;
        justify-content: center;
        gap: 4%;
        position: relative;
    }

    .t_vision .inner .col-img::after {
        content: "";
        background: url(/system_panel/uploads/images/20260121184656632738.svg) no-repeat center/contain;
        position: absolute;
        max-width: 226px;
        width: 53%;
        height: 480px;
        bottom: -170px;
        left: 0;
        z-index: -1;
    }

    .t_vision .inner .col-img img:last-child {
        margin-top: 263px;
    }

    .t_vision .inner .col-right {
        display: none;
    }

    .t_vision .inner .column {
        justify-content: center;
    }
}

@media (max-width: 1126px) {
    .t_service .inner .col-text .btnarea {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .t_service .inner .col-text .btnarea .morebtn {
        max-width: none;
        width: 80%;
    }
}

@media (max-width: 1180px) {
    .t_fv .inner {
        display: flex;
        flex-direction: column;
    }

    .t_fv .inner .fv-news {
        position: relative;
        max-width: 100%;
        bottom: 0;
        margin-top: 64px;
    }

    .t_fv .inner .fv-title {
        margin-bottom: 40px;
    }

    .t_fv .inner .fv-img {
        margin-right: 0;
    }

    .t_case .inner .column {
        gap: 30px;
    }
}



@media (max-width: 960px) {
    .t_fv .inner {
        padding: 100px 0 160px;
    }

    .t_navi .inner {
        max-width: 90%;
        width: 100%;
        margin: auto;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 118px);
        gap: 11px;
        padding: 40px 0;
    }

    .t_vision .inner,
    .t_service .inner,
    .t_case .inner,
    .t_news .inner {
        max-width: 90%;
        width: 100%;
        margin: auto;
        padding: 80px 0 120px;
    }

    .t_service .inner .item {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .t_service .inner .item .col-img {
        height: 230px;
        width: 100%;
    }

    .t_service .inner .item .col-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .t_service .inner .col-text .btnarea .morebtn {
        width: 100%;
    }

    .t_service .inner .item:nth-child(3) .col-text {
        width: 100%;
    }

    .t_case .inner .column {
        flex-wrap: wrap;
        gap: 10px;
    }

    .t_case .inner .column .item {
        max-width: 30%;
        width: 100%;
    }

    .t_news .inner {
        display: flex;
        flex-direction: column;
    }

    .t_news .inner .col-left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;
    }

    .t_contact .inner .btnarea {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .t_vision .inner .col-img img:last-child {
        margin-top: 39px;
    }

    .t_vision .inner .col-img {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 120px;
    }

    .t_vision .inner .col-img::after {
        width: 100%;
        height: 206px;
    }

    .t_vision .inner .column {
        height: 233px;
        width: 45%;
        margin: 0 auto 64px;
    }

    .t_vision .inner .column .circle {
        position: absolute;
        width: 146px;
        max-width: none;
    }

    .t_vision .inner .column .circle:nth-child(odd) {
        margin-top: 100px;
    }

    .t_vision .inner .column .circle:first-child {
        left: 96px;
    }

    .t_vision .inner .column .circle:nth-child(3) {
        right: 97px;
    }

    .t_vision .inner .column .circle img {
        width: 35%;
    }

    .t_service .inner .col-text .column {
        gap: 15px;
        justify-content: center;
    }

    .t_service .inner .col-text .list .column {
        justify-content: flex-start;
        gap: 20px 5px;
    }

    .t_case .inner .column .item img {
        width: 35%;
    }

    .t_case .box .box-inner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px 19px;
    }

    .t_news .inner .sec-title {
        margin-bottom: 0;
    }

    .t_news .webgene-blog .newscontents {
        gap: 12px;
    }

    .t_news .webgene-blog .newsdate {
        padding-right: 12px;
    }

    .t_news .webgene-blog .newsLink {
        padding: 12px;
    }

    .t_fv {
        background-size: 620px 274px;
        background-position: left -48px top 101px;
    }

    .t_fv .inner .fv-img::after {
        bottom: -25px;
    }
  
  .webgene-blog .newscontents {
    grid-template-columns: 10% auto;
  }
}

.gjs-dashed .loading {
    position: relative;
}

.gjs-dashed .text {
    opacity: 1;
}