@media screen and (max-width: 700px) {
    * {
        margin: 0;
        padding: 0;
        font-size: medium;
        font-weight: unset;
    }

    .bg_pattern {
        position: relative;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #faffaf;
        z-index: -1;
        overflow: auto;
    }
    .Lines_v4 {
        background-size: 40px 40px;
        background-image: repeating-linear-gradient(to right, #ffc107, #ffc107 2px, #ffe9a7 2px, #ffe9a7);
    }

    /*まずはお決まりのボックスサイズ算出をborer-boxに */
    *,
    *:before,
    *:after {
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
    }

    .btn,
    div.btn,
    button.btn {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
        position: relative;
        display: inline-block;
        padding: 1rem 1rem;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        text-align: center;
        vertical-align: middle;
        text-decoration: none;
        letter-spacing: 0.1em;
        color: #212529;
        border-radius: 2rem;
    }

    div.btn--green.btn--emboss {
        color: #ffffff;
        background-color: green;
        text-shadow: -1px -1px 2px #00ff71;
        border-bottom: 5px solid #00662d;
    }

    div.btn--green.btn--cubic:hover {
        margin-top: 3px;
        border-bottom: 2px solid #00662d;
    }

    .fa-position-right {
        position: absolute;
        top: calc(50% - 0.5em);
        right: 1rem;
    }

    header {
        width: 100%;
        margin: auto;
        padding: 0px 0px 25px 0px;
    }
    .header__lists {
        display: flex;
        float: inline-end;
        padding: 10px;
    }
    .header__list {
        display: block;
        position: relative;
        background-color: #fff7db;
        border: solid 1px #ffffff;
        width: 150px;
        text-align-last: center;
    }

    .gnavi__wrap {
        width: 100%;
        margin: 0 auto;
    }
    .gnavi__lists {
        display: flex;
    }
    .gnavi__list {
        width: 35%;
        height: 40px;
        background-color: #e5f0f8;
        position: relative;
        transition: all 0.3s;
        display: block;
        z-index: 1;
    }
    .gnavi__list:hover {
        background-color: #0071bb;
    }
    .gnavi__list:not(:first-child)::before {
        content: "";
        width: 1px;
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.3s;
    }
    .gnavi__list:hover::before {
        background-color: #0071bb;
    }
    .gnavi__list a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: #1b4059;
        font-size: 11px;
        letter-spacing: 0.05em;
        font-weight: 600;
        transition: all 0.3s;
    }
    .gnavi__list:hover a {
        color: #fff;
    }
    .dropdown__lists {
        display: none; /*デフォルトでは非表示の状態にしておく*/
        width: 100%;
        position: absolute;
        top: 40px;
        left: 0;
    }
    .gnavi__list:hover .dropdown__lists {
        display: block; /*Gナビメニューにホバーしたら表示*/
    }
    .dropdown__list {
        background-color: #004d80;
        height: 40px;
        transition: all 0.3s;
        position: relative;
        display: block;
    }
    .dropdown__list:not(:first-child)::before {
        content: "";
        width: 100%;
        height: 1px;
        background-color: #3492d1;
        position: absolute;
        top: 0;
        left: 0;
    }
    .dropdown__list:hover {
        background-color: #003558;
    }
    .dropdown__list a {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-decoration: none;
        position: relative;
    }

    /* ↓ スライドの外枠 */
    .slide-wrapper {
        width: 300px;
        height: 300px;
        position: relative;
        overflow-x: hidden; /* はみ出したスライドを隠す */
        left: 20px;
    }
    /*  ↓ スライド（コンテンツ） */
    .slide {
        /*スライド全体 */
        width: 400%;
        height: 100%;
        transition: all 0.5s;
        display: flex;
    }
    .slide div {
        /* スライド */
        width: 25%;
        height: 100%;
        font-size: 16px;
        display: flex;
    }
    .slide_title {
        padding: 5px;
        position: absolute;
        color: aliceblue;
        font-weight: bold;
        font-size: 25pt;
        text-shadow: #000000 0px 0 10px;
        width: 350px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    #slide_title_1 {
        left: 0px;
    }
    #slide_title_2 {
        left: 300px;
    }
    #slide_title_3 {
        left: 600px;
    }
    #slide_title_4 {
        left: 900px;
    }

    .slide_ditail {
        position: absolute;
        display: block;
        width: 500px;
        bottom: 40px;
        left: 0px;
        color: aliceblue;
        font-size: 16px;
        text-shadow: #000000 1px 0 10px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    #slide_ditail_1 {
        left: 0px;
        padding-left: 10px;
    }
    #slide_ditail_2 {
        left: 300px;
        padding-left: 10px;
    }
    #slide_ditail_3 {
        left: 600px;
        padding-left: 10px;
    }
    #slide_ditail_4 {
        left: 900px;
        padding-left: 10px;
    }

    .slide1 {
        /* スライドさせるために必要なクラス */
        transform: translateX(0);
    }
    .slide2 {
        /* スライドさせるために必要なクラス */
        transform: translateX(-25%);
    }
    .slide3 {
        /* スライドさせるために必要なクラス */
        transform: translateX(-50%);
    }
    .slide4 {
        /* スライドさせるために必要なクラス */
        transform: translateX(-75%);
    }
    .slide div:nth-of-type(1) {
        /* 背景色 */
        background-color: #e1f3fc;
    }
    .slide div:nth-of-type(2) {
        /* 背景色 */
        background-color: #fce8f0;
    }
    .slide div:nth-of-type(3) {
        /* 背景色 */
        background-color: #e3f1e4;
    }
    .slide div:nth-of-type(4) {
        /* 背景色 */
        background-color: #e3f1e4;
    }

    /* ↓ インジケーター */
    .indicator {
        width: 100%;
        position: absolute;
        bottom: 20px;
        display: flex;
        column-gap: 18px;
        z-index: 10;
        justify-content: center;
        align-items: center;
    }
    .indicator li {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        list-style: none;
        background-color: #fff;
        border: 2px #000 solid;
        cursor: pointer;
    }
    .indicator li:first-of-type {
        background-color: #000;
    }

    div.ContainAll {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 100%;
    }

    header.TopHeader {
        position: relative;
        width: 100%;
        top: 0px;
        font-size: 0;
        opacity: 1;
        z-index: 99;
        background: linear-gradient(to bottom right, #0f67b1, #96c9f4);
        width: 100%;
        height: 130px;
    }

    div.ContainTopHeader {
    }

    div.CompanyName {
        background-color: rgba(255, 255, 0, 0);
        position: relative;
        float: inline-start;
    }

    a.CompanyName_ALL {
        display: block;
        width: fit-content;
        color: aliceblue;
        text-decoration: none;
        float: inline-start;
    }

    div.CompanyName_1 {
        font-size: small;
        text-shadow: #000000 6px 0 6px;
        padding: 30px 0px 0px 0px;
    }

    div.CompanyName_2 {
        font-size: larger;
        text-shadow: #000000 6px 0 6px;
        padding: 0px 0px 0px 15px;
    }

    div.CompanyName_3 {
          font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
        font-size: xx-large;
        text-shadow: #000000 6px 0 6px;
        padding: 0px 0px 0px 25px;
    }

    nav.ContainNav {
        position: absolute;
        width: 100%;
        font-size: 0;
        opacity: 1;
        z-index: 99;
        width: 100%;
        background-color: #e5f0f8;
    }
    
    article{
        position: absolute;top:195px;width: 100%
    }
    
        div.TopContainer {
        position: relative;
        width: 400px;
        min-height: 1000px;
        background-color: white;
    }

    
    div.ProductName_Back {
        width: 100%;
        height: 105px;
        background-color: rgba(255, 255, 255);
        opacity: 60%;
        position: fixed;
    }

    footer.ContainFooter {
        position: fixed;
        width: 100%;
        bottom: 0px;
        font-size: 0;
        opacity: 0.9;
        z-index: 99;
        background-color: #0f67b1;
    }

    div.Footer {
        position: relative;
        text-shadow: #000000 0px 0 10px;
        color: antiquewhite;
        font-size: 13px;
    }

    #NavContact {
        position: absolute;
        left: 230px;
        top: 80px;
    }

    #NavCatalog {
        position: absolute;
        left: 230px;
        top: 20px;
    }

    #_body {
        width: 100%;
    }

    a.non_deco_a {
        font-size: 13px;
        color: white;
        text-decoration: initial;
    }
}