/* 640px以内のデバイス */

@media(max-width: 640px) {
    .welcome-logo img {
        width: 200px;
    }

    .welcome {
        background-color: #000000;
    }

    video{
        display: none !important;
        width: 0;
        height: 0;
    }

    .scroll-container {
        margin-bottom: 100px;
    }

    .page-cover-img {
        height: 150px !important;
    }

    .page-cover-img h1 {
        bottom: 10px !important;
        padding-left: 15px;
    }

    .header-right {
        display: none !important;
    }

    .hero-text {
        height: 80px;
        width: 80%;
    }

    .hero p {
        font-size: 10px;
        font-weight: 300;
    }

    .logos-hero {
        display: none;
    }

    .logos {
        flex-wrap: wrap;
    }

    .logos img {
        width: 15%;
    }

    .section-title {
        text-align: center;
        margin-bottom: 40px;
    }

    .section-title h3 {
        font-weight: 300 !important;
    }

    .section-padding {
        padding-left: 15px;
        padding-right: 15px;
    }

    .top-company-vision {
        height: 250px;
        padding: 20px 10px;
    }

    .vision-text {
        font-size: 16px;
        color: #4f4f4f !important;
    }

    .service {
        width: 47.5%;
    }

    .service-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service p {
        margin-bottom: 50px;
    }

    .service img {
        width: 100% !important;
    }

    .wrapper-news {
        padding: 20px 10px !important;
    }

    .news {
        display: block !important;
    }

    .news-pc {
        display: none !important;
    }
    .news-sp {
        display: block !important;
    }

    .news-date {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .news-title {
        font-size: 1.2rem;
        line-height: 1.4rem;
        /* margin-bottom: 15px; */
    }

    .news-text {
        width: 100%;
        height: 100%;
        margin-bottom: 20px;
    }

    .news img {
        padding-top: 10px;
        width: 100% !important;
    }

    .news-box {
        width: 100% !important;
    }

    .news-btn {
        text-align: center !important;
        font-size: 1rem !important;
        margin-bottom: 70px !important;
        display: block !important;
        position: static !important;
    }

    .news-btn a {
        padding: 10px 40px !important;
    }

    .contact-text {
        padding: 20px 30px !important;
    }

    .news-content{
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }

    /* フッター */
    .footer {
        padding: 0;
    }

    .footer-menu-container {
        display: none;
    }

    .footer-container .small-3 {
        width: 100%;
        margin: 50px 0 0 0;
    }

    .small-3 table tbody tr td {
        text-align: center;
    }

    .footer-logo-text {
        position: absolute !important;
        text-align: center !important;
        left: 50% !important;
        transform: translate(-50%, 0) !important;
    }

    .footer-table {
        margin-bottom: 0;
    }

    .social-logos {
        display: none;
    }

    .copyright p {
        margin-top: 0 !important;
    }

    /* sandwichメニュー */
    .sandwich-menu-container {
        height: 80% !important;
    }

    .sandwich-menu-title {
        text-align: center;
    }

    .sandwich-menu-links {
        flex-direction: column;
        text-align: center;
    }

    .sandwich-menu-links li {
        margin: auto;
        width: 60%;
        margin-bottom: 10px;
        font-size: 2rem;
    }

    .sandwich-menu-links li a h4 {
        font-size: 1.2rem;
    }

    /* COMPANY */
    .company {
        padding: 0 15px;
    }

    .greeting img:first-child {
        width: 100%;
        padding-bottom: 30px;
    }

    .greeting-container {
        flex-direction: column;
        width: 90% !important;
    }

    .greeting img:last-child {
        display: none;
    }

    .company-info {
        margin-top: 40px !important;
    }

    .company-table tr td:first-child {
        width: 30% !important;
    }

    /* SERVICES */
    .services-page {
        padding: 0 15px;
    }

    .services-page p {
        margin-bottom: 0;
    }

    .services-page h5 {
        text-align: center;
        font-weight: 400 !important;
        margin-top: 30px !important;
        margin-bottom: 20px;
    }

    .service-container {
        gap: 0 !important;
        margin-bottom: 0 !important;
    }

    .service-box {
        max-width: 100% !important;
        flex-direction: column;
        margin-bottom: 40px !important;
    }

    .service-box img {
        width: 100% !important;
        padding-bottom: 10px;
    }

    .service-box h4 {
        font-size: 2rem !important;
    }
/* 
    .service-box:first-child::before {
        content: "システム開発" !important;
        color: #333 !important;
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .service-box:nth-child(2)::before {
        content: "アプリ開発" !important;
        color: #333 !important;
        font-size: 1.3rem;
        font-weight: 600;
        margin-top: 40px;
        margin-bottom: 5px;
    }

    .service-box:nth-child(3)::before {
        content: "Webサイト制作" !important;
        color: #333 !important;
        font-size: 1.3rem;
        font-weight: 600;
        margin-top: 40px;
        margin-bottom: 5px;
    }

    .service-box:nth-child(4)::before {
        content: "クラウドサーバー管理" !important;
        color: #333 !important;
        font-size: 1.3rem;
        font-weight: 600;
        margin-top: 40px;
        margin-bottom: 5px;
    }

    .service-box:last-child::before {
        content: "社内ストレージ" !important;
        color: #333 !important;
        font-size: 1.3rem;
        font-weight: 600;
        margin-top: 40px;
        margin-bottom: 5px;
    } */

    /* JOIN US */
    .join-us {
        background-position: right !important;
    }

    .join-us::before {
        content: "" !important;
        width: 100% !important;
        height: 100% !important;
        background-color: rgba(255, 255, 255, 0.7) !important;
        position: absolute;
    }

    .join-us-content {
        /* position: static !important; */
        width: 100% !important;
        padding: 20px;
        margin-top: 60px !important;
        top: 0 !important;
        left: 0 !important;
    }

    .join-us-content h2 {
        font-size: 1.3rem;
        text-align: center;
    }

    .join-us a {
        width: 100% !important;
        display: block;
        padding: 20px 20px !important;
        border: #000000 1px solid;
        text-align: center;
        background-color: rgba(0, 0, 0, 0);
        margin-bottom: 20px;
    }

    /* Contact add */
    .fieldset-contact {
        padding-left: 0;
        padding-right: 0;
    }

    .contact-text {
        line-height: 2rem !important;
        margin-bottom: 20px !important;
    }

    .contact-text-contact {
        padding: 0 5px !important;
    }

    .contact-text-contact:last-child {
        margin-top: 15px !important;
    }

    /* Contact confirm */
    .contact-container {
        background-color: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: none !important;
    }

    .confirm-scroll {
        width: 350px !important;
    }

    /* Contact complete */
    .pt-50 {
        padding-top: 50px !important;
    }

    .contact-container {
        margin-top: 60px !important;
    }

    .contact-form-btn {
        position: absolute;
        bottom: -2vh !important;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 auto;
        text-align: center;
        width: 100%;
        padding: 1rem 1.8rem 1.0625rem 1.8rem;
    }

    .contact-container h3 {
        font-size: 1.2rem;
    }

    /* Products */
    .products {
        flex-direction: column;
    }

    .products img {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px;
    }

    .p-mine::before {
        content: 'mine mine! (マイン マイン)';
        font-size: 1.3rem;
        width: 100%;
        display: block;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .p-datto::before {
        content: 'DATTO! (ダット)';
        font-size: 1.3rem;
        width: 100%;
        display: block;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .p-dothese::before {
        content: 'SHINCHOKU DOTHESE';
        font-size: 1.3rem;
        width: 100%;
        display: block;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .p-ugoboard::before {
        content: 'うごボード FREE';
        font-size: 1.3rem;
        width: 100%;
        display: block;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .reduce {
        margin-top: 50px !important;
    }

    .products-btn {
        text-align: center !important;
    }

    .products-btn::before {
        content: '';
        width: 100%;
        height: 20px;
        display: block;
    }

    .products-title {
        display: none;
    }

    .products-btn a {
        padding: 15px 60px !important;
        font-size: 1.2rem;
    }

    /* Products minemine */
    .mine-pics {
        flex-direction: column;
    }

    .video {
        padding-bottom: 0 !important;
    }

    /* Products Datto */
    .datto-pics {
        gap: 0;
        margin-bottom: 30px !important;
    }

    .datto-pics img:last-child {
        width: 100% !important;
        height: 100%;
    }

    .datto-pics img:first-child {
        display: none;
    }

    .thanks {
        margin-top: 100px !important;
        width: 80% !important;
    }

    .thanks h4 {
        font-size: 1.8rem;

    }

    /* Privacy Policy */
    .privacy-policy-section {
        width: 100% !important;
        padding: 30px 40px !important;
    }

    .privacy-cover-text {
        font-size: 20px;
    }

    /* logo intro */
    .loading__logo {
        width: 135px;
      }
    
    .slogan-pc {
        display: none;
    }
    .slogan-sp {
        display: block;
        text-align: center;
        font-size: 1.3rem !important;
        line-height: 3rem;
    }

    .hero-text h2 {
        font-weight: bold;
    }

    .service-box h4 {
        text-align: center;
    }

    .blogs-list {
        max-width: 100% !important;
        flex-direction: column;
    }
    .blogs-date {
        padding: 0 8px;
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 5px;
        color: #000000 !important;
    }
    .blogs-list img {
        width: 100% !important;
    }
    .blogs-title {
        padding: 0 !important;
    }

    .blog-box {
        margin: 0 10px !important;
        padding: 20px;
    }


}

@media(max-width: 380px) {
    .hero-text h2 {
        width: 100%;
        font-weight: normal;
        font-size: 1.4rem;
        text-align: center;
    }

    .copyrightt {
        width: 100%;
        text-align: center;
    }

    .contact-container h3 {
        margin-top: 20px !important;
    }

    .contact-container {
        margin-top: 120px !important;
        height: 100vh !important;
    }

    .contact-text-contact {
        line-height: 1rem !important;
    }

    .contact-form-btn {
        position: absolute;
        bottom: -2vh !important;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 auto;
        text-align: center;
    }

    .fieldset-contact {
        justify-content: flex-start !important;
        margin-top: 0 !important;
    }

    .fieldset-contact {
        padding-top: 10px !important;
    }

}