@charset "UTF-8";

@media screen and (max-width: 920px) {
    .sp-br {
        display: block;
    }
    .header {
        background-color: #0B5BA8;
        height: 50px;
        display: flex;
        justify-content: space-between; 
        align-items: center;
    }
    .header-logo a,
    .footer-logo a {
        font-size: 14px;
        color: #fff !important;
    }

    .header-logo {
        height: auto;
    }

    .header-logo img,
    .footer-logo img {
        margin-right: 6px;
        width: 24px;
    }

    .company-name span,
    .footer-logo span {
        font-size: 22px;
    }

    .sp-menu {
        display: flex;
        align-items: center;
    }

    .img-container {
        margin-top: 50px;
    }

    .menu-contact {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #000000;
        width: 50px; 
        height: 50px;
    }

    .menu-contact i {
        font-size: 30px;
        color: #ffffff;
        margin: 0;
    }

    .hamburger {
        width: 50px;
        height: 50px;
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hamburger span {
        display: block;
        position: absolute;
        height: 2px;
        width: 22px;
        background-color: #ffffff;
        transition: all 0.5s ease;
        right: 13px; 
    }
    .hamburger span:nth-child(1) {
        top: 15px;
    }

    .hamburger span:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
    }

    .hamburger span:nth-child(3) {
        bottom: 15px;
    }

    .hamburger.active {
        background: #0b5ba8;
        z-index: 10;
    }

    .button:hover {
        color: #0B5BA8;
        background-color: #fff;
    }

    .button::before {
        display: none;
    }

    .top-achievements .button:hover {
        color: white;
    }

    .about-content .button-wrap,
    .top-service .button-wrap,
    .top-equipment .button-wrap {
        display: flex;
    }
    

    /* 回転アニメーション */
    .hamburger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* メニューのスタイル */
    .menu {
        position: fixed;
        top: -100%;
        right: 0;
        width: 250px;
        height: 70vh;
        background-color: #ffffff;
        padding: 20px;
        box-sizing: border-box;
        z-index: 5;
        transition: top 0.3s ease;
    }

    .header-nav ul .nav-contact {
        background: #0b5ba8;
    }

    .header-nav ul .nav-contact a {
        color: #fff;
    }

    .header-nav ul .nav-contact:hover {
        background-color: #0B5BA8;
    }
    .menu.open {
        top: 0;
    }

    .header-nav a {
        color: #0B5BA8;
    }

    .header-nav ul {
        flex-direction: column;
        justify-content: space-between;
        height: 400px;
    }

    .header-nav ul li {
        height: 45px;
        line-height: 40px;
        display: block;
        border-bottom: 1px solid #0b5ba8;
        width: 110px;
        text-align: center;
        font-weight: bold;
        letter-spacing: 0.08em;
    }

    .company .message {
        flex-direction: column-reverse;
    }

    .company .message-text {
        margin-top: 0;
        width: 100%;
    }

    .img-container::after {
        height: 100px;
    }

    .img-container h1 {
        font-size: 28px;
    }

    .page-title {
        width: calc(100% - 8px);
        top: 0;
        left: 8px;
    }

    .service-main-text {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .service h3{
        word-break: keep-all;
        line-height: 42px;
        overflow-wrap: anywhere;
    }

    .feature-grid {
        flex-wrap: wrap;
    }

    .technical-flexibility-title {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .error-404 .button-wrap {
        display: flex;
        }


}
@media screen and (max-width: 1000px) {
    .flexible-processing-content {
        flex-basis: calc(50% - 30px); /* 50%からgap(20px)を引いた分を調整 */
        margin-bottom: 20px; /* 折り返し後の下の余白を追加 */
        flex-shrink: 1; /* 縮小は維持 */
    }
    .text-area-overlay {
        width: 100%;
        transform: revert;
        bottom: -39px;
        left: 0;
    }

    .ervice-achievements-text-content {
        width: 100%;
    }

    .company-content {
        display: block;
    }

    .company .company-data {
        width: 100%;
        margin-bottom: 50px;
    }

    .company .map {
        width: 100%;
    }

    .data-row {
        width: 100%;
    }

}