@charset "UTF-8";

@media screen and (max-width: 1200px) {
    .fv-slide_thumbnail {
        max-width: unset;
        padding: 0 12px;
    }

    .news-container {
        gap: 40px;
        padding: 60px 40px;
    }

    .vision-main {
        padding: 60px 40px 60px 60px;
    }

    .business {
        padding: 60px 0;
    }

    .business-container {
        align-items: flex-start;
        gap: 40px;
        padding: 0 12px 0 40px;
    }

    .business-main {
        padding: 60px 40px;
    }

    .value {
        padding: 60px 0;
    }

    .value-container {
        gap: 40px;
        padding: 0 40px 0 12px;
    }

    .value-intro {
        padding: 60px 0 60px 40px;
    }

    .company {
        padding-bottom: 60px;
    }

    .company-container {
        gap: 40px;
        padding: 0 40px;
    }

    .company-container h2 {
        width: auto;
    }

    .foot-container {
        padding: 40px 40px 20px 40px;
    }
}

@media screen and (min-width: 1081px) {
    main {
        padding-top: 87.4688px;
    }
    .spMenu-btn {
        display: none;
    }
}

@media screen and (max-width: 1080px) {
    main {
        padding-top: 45.8438px;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100%;
        height: 100lvh;
        backdrop-filter: blur(4px);
    }

    .no-scroll .overlay {
        display: block;
        animation: 0.5s overlay-active cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes overlay-active {
        0% {
            background: rgbA(77, 77, 77, 0);
        }

        100% {
            background: rgbA(77, 77, 77, 0.8);
        }
    }

    .no-scroll header {
        height: 100%;
        overflow-y: scroll;
    }

    .head-container {
        padding-inline: 12px;
    }

    .head-container h1,
    .scaleup .head-container h1 {
        width: 120px;
        padding: 8px 0;
    }

    .head-container h1 sub {
        display: none !important;
    }

    .head-container h1 img {
        vertical-align: middle;
    }

    .head-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        padding: 0 40px;
        background: #f4f4f3;
    }

    .head-wrap_menu {
        flex-direction: column;
        height: auto;
        margin-bottom: 40px;
        padding-top: 48px;
    }

    .head-wrap_menu > li {
        position: relative;
        width: 100%;
        height: auto;
        border-bottom: 1px solid #cacaca;
    }
    .head-wrap_menu > li:last-of-type{
        border-bottom:none;
    }

    .head-wrap_menu > li.head-btn {
        max-height: unset;
        margin-top: 24px;
        margin-left: unset;
    }

    .head-wrap_menu > li::after {
        content: "";
        position: absolute;
        top: 20px;
        right: 16px;
        width: 11px;
        height: 20px;
        opacity: 1;
        background: url("../images/triangle_black.svg");
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .head-wrap_menu > li.spMenu-more::after {
        transform: rotate(90deg);
    }

    .head-wrap_menu > li.spMenu-more.close::after {
        transform: rotate(270deg);
    }

    .head-wrap_menu > li > a {
        display: block;
        font-size: 2.4rem;
        padding: 16px 0;
    }

    .head-wrap_menu > li.head-btn > a {
        text-align: center;
        padding: 16px;
    }

    .head-wrap_menu > li > a img {
        position: absolute;
        top: 28px;
        right: 0;
        transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .head-wrap_menu > li.close > a img {
        transform: rotate(180deg);
    }

    .head-wrap_menu > li.spMenu-more > a {
        display: inline-block;
    }

    .head-wrap_menu > li > a p {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        height: auto;
        text-align: left;
        line-height: 1.6em;
    }

    .head-wrap_menu > li.head-btn > a p {
        justify-content: center;
    }

    .head-wrap_menu > li > a p span,
    .head-wrap_menu > li > a:hover p span,
    .head-wrap_menu > li > a p sub,
    .head-wrap_menu > li > a:hover p sub {
        opacity: 1;
        transform: unset;
    }

    .head-wrap_menu > li > a p span {
        font-size: 2rem;
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
    }

    .head-wrap_menu > li > a p sub {
        line-height: 1.6rem;
        opacity: 0.5;
    }

    .menu-inner {
        position: initial;
        width: 100%;
        background: transparent;
    }

    .menu-inner_list {
        flex-direction: column;
        gap: 4px;
        padding: unset;
    }

    .menu-inner_list li {
        background: rgba(0, 0, 0, 0.04);
    }

    .menu-inner_list li:last-child {
        margin-bottom: 24px;
    }

    .menu-inner_list a {
        padding: 16px 24px;
    }

    .menu-inner_list a {
        color: #000;
    }

    .spMenu-btn {
        position: absolute;
        top: 4px;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 45px;
        height: auto;
        aspect-ratio: 1 / 0.8;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .spMenu-btn g {
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 70%;
        height: 2px;
        background: #000;
        transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .spMenu-btn g:first-of-type {
        transform: translate(-50%, calc(-50% - 6px));
        animation: menu-bar_top_out 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes menu-bar_top_out {
        0% {
            transform: translate(-50%, calc(-50%)) rotate(-26deg);
            width: 70%;
        }

        50% {
            transform: translate(-50%, calc(-50%));
        }

        100% {
            transform: translate(-50%, calc(-50% - 6px));
            width: 70%;
        }
    }

    .spMenu-btn g:last-of-type {
        width: 50%;
        transform: translate(-30%, calc(-50% + 6px));
        animation: menu-bar_bottom_out 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes menu-bar_bottom_out {
        0% {
            transform: translate(-30%, calc(-50%)) rotate(26deg);
            width: 70%;
        }

        50% {
            transform: translate(-30%, calc(-50%));
        }

        100% {
            transform: translate(-30%, calc(-50% + 6px));
            width: 50%;
        }
    }

    .spMenu-btn.close g:first-of-type {
        animation: menu-bar_top_in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes menu-bar_top_in {
        50% {
            transform: translate(-50%, calc(-50%));
        }

        100% {
            transform: translate(-50%, calc(-50%)) rotate(-26deg);
            width: 70%;
        }
    }

    .spMenu-btn.close g:last-of-type {
        animation: menu-bar_bottom_in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes menu-bar_bottom_in {
        50% {
            transform: translate(-50%, calc(-50%));
        }

        100% {
            transform: translate(-50%, calc(-50%)) rotate(26deg);
            width: 70%;
        }
    }

    .spMenu-btn.close .spMenu-btn_hidden {
        opacity: 0;
    }

    .spMenu-btn .--close {
        display: none;
    }

    .spMenu-btn.close .--menu {
        display: none;
    }

    .spMenu-btn.close .--close {
        display: block;
    }

    .spMenu-btn span {
        position: absolute;
        left: 50%;
        bottom: 2px;
        transform: translateX(-50%);
        font-size: 1rem;
        color: #000;
    }

    .news-item a {
        gap: 40px;
        padding: 20px 32px 20px 12px;
    }

    .product-scroll_container {
        height: auto;
        padding-inline: 5% !important;
    }

    .product-scroll_wrap {
        align-items: flex-end;
        gap: unset;
    }

    .product-box,
    .product-item.--link .btn-main {
        width: 100%;
    }

    .foot-container {
        flex-direction: column;
        gap: 20px;
    }

    .foot-menu {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

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

    .value-intro h2 {
        position: sticky;
        top: 100px;
        padding-bottom: 80px;
    }
}

@media screen and (max-width: 768px) {
    .pc {
        display: none;
    }

    p {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 3.6rem;
    }

    h3 {
        font-size: 1.6rem;
        line-height: 1.3;
    }

    .fv-slide_main {
        padding: 0 8px 8px;
    }

    .fv-slide_main .swiper,
    .fv-slide_thumbnail .swiper-slide {
        aspect-ratio: 2 / 1;
    }

    .fv-slide_main .swiper-slide img,
    .fv-slide_thumbnail .swiper-slide img {
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .fv-slide_thumbnail {
        padding: 0 8px;
    }

    .news-container {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 40px 5%;
    }

    .news-intro {
        text-align: center;
    }

    .news-item a {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .news-ttl {
        -webkit-line-clamp: 2;
    }

    .vision-container {
        grid-template-columns: 1fr;
        padding-left: unset;
    }

    .vision-img {
        width: calc(100% - 12px);
        height: 360px;
        border-radius: 0 8px 8px 0;
    }

    .vision-main {
        margin: unset;
        padding: 40px calc(12px + 5%);
    }

    .vision-main p {
        margin: 20px 0;
    }

    .vision-main .btn-main a {
        margin: 0 auto;
    }

    .business {
        padding: 0 12px;
    }

    .business-container {
        flex-direction: column;
        padding: 40px 12px;
        gap: 20px;
        background: #ebe9e9;
        border-radius: 8px;
    }

    .business-intro {
        max-width: unset;
        padding: 0 5%;
    }

    .business-intro h2 {
        text-align: center;
    }

    .business-intro p {
        margin-top: 20px;
    }

    .business-main {
        padding: unset;
        background: unset;
        border-radius: unset;
    }

    .business-main li a {
        gap: 8px;
        padding: 16px;
    }

    .business-main li a p {
        font-size: 1.2rem;
    }

    .product-item h4 {
        font-size: 1.2rem;
        line-height: 1.6;
        padding-left: 8px;
    }

    .product-scroll p {
        margin: 20px auto 40px;
        padding-inline: 5%;
    }

    .value {
        padding: 0 12px;
    }

    .value-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 40px 12px;
        background: #ebe9e9;
        border-radius: 8px;
    }

    .value-intro {
        align-items: center;
        padding: unset;
    }

    .value-intro h2 {
        text-align: center;
    }

    .value-main {
        padding: unset;
    }

    .value-item a {
        padding: 12px 32px 12px 12px;
        gap: 12px;
    }

    .value-item a h3 {
        word-break: auto-phrase;
        text-align: center;
        width: calc(100% - 72px);
    }

    .value-item a::before {
        right: 8px;
    }

    .value-item_img {
        width: 60px;
    }

    .company {
        padding-bottom: unset;
    }

    .company-container {
        flex-direction: column;
        gap: 20px;
        padding: 40px 24px;
    }

    .company-container h2 {
        text-align: center;
    }

    .company-list li a {
        padding: 20px;
    }

    .company-list li a::before {
        right: 8px;
    }

    .foot-container {
        padding: 40px calc(12px + 5%) 0;
    }

    /* .foot-logo {
        width: 70%;
        max-width: 360px;
    } */

    .foot-menu {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .foot-menu li:last-of-type {
        grid-column: 1 / 3;
    }

    .foot-menu li a {
        font-size: 1.3rem;
    }

    .foot-office li {
        padding-left: 12px;
    }

    .foot-office li p {
        font-size: 1.1rem;
        line-height: 1.5;
    }

    .copyright {
        padding: 20px calc(12px + 5%);
        line-height: 1.4;
    }
    .btn-main a span{
        font-size: 1.4rem;
    }
}