html {
      scroll-behavior: smooth;
    }






    .web {
      max-width: 1500px;
      margin: 0 auto;
      background-color: #fff;
    }

    .web_back {
      background-color: #255A8C;
    }

    .kubopura_title h1 {
      width: fit-content;
      margin: 40px auto 0 0;
      padding: 20px 40px 20px 100px;

      font-size: 2.5em;
      font-weight: bold;
      color: #fff;

      background-color: #255A8C;
    }

    @media screen and (max-width: 750px) {
      .kubopura_title h1 {
        width: fit-content;
        margin: 40px auto 0 0;
        padding: 10px 30px 10px 40px;

        font-size: 1.8em;
        font-weight: bold;
        color: #fff;

        background-color: #255A8C;
      }
    }


    .kubopura_komidashi_box {
      max-width: 1280px;
      margin: 80px auto 0;
      padding: 0 30px;
    }


    .kubopura_komidashi {
      width: fit-content;
      margin: 0 auto 20px 0;
      padding: 10px 20px;

      font-size: 2em;
      font-weight: bold;
      color: #255A8C;

      border: solid 7px #255A8C;
    }

    @media screen and (max-width: 750px) {
      .kubopura_komidashi {
        width: fit-content;
        margin: 0 auto 20px 0;
        padding: 7px 20px;

        font-size: 1.5em;
        font-weight: bold;
        color: #255A8C;

        border: solid 4px #255A8C;
      }
    }

    @media screen and (max-width: 750px) {
      .flex_box {
        display: flex;
      }

      .flex01 {
        order: 2;
      }

      .flex02 {
        order: 1;
      }
    }




    



    /*ヘッダー CSS*/

    .header {
      width: 100%;
      height: 150px;
      margin: -10px 0 0 0;
      background-color: #255A8C;
      border-top: solid 10px #255A8C;
    }

    @media screen and (max-width: 470px) {
      .header {
        height: 100px;
      }
    }




    .header_padding {
      padding: 20px 10px;
    }

    .header_grid {
      display: grid;
      grid-template-columns: 30% 70%;
      grid-template-rows: auto;
      grid-column-start: 1;
      grid-column-end: 3;
    }

    @media screen and (max-width: 470px) {
      .header_grid {
        grid-template-columns: 60% 40%;
      }
    }


    .logo {
      margin: 0 auto 0 30px;
      z-index: 2;
    }

    @media screen and (max-width: 550px) {
      .logo {
        margin: 0 auto 0 20px;
        z-index: 2;
      }
    }

    .logo:hover {
      opacity: 0.7;
    }

    .logo img {
      height: 140px;
      margin: -18px 0 0 0;
    }

    @media screen and (max-width: 550px) {
      .logo img {
        height: 120px;
        margin: -8px 0 0 0;
      }
    }

    @media screen and (max-width: 470px) {
      .logo img {
        height: 80px;
        margin: -14px 0 0 0;
      }
    }


    .close_botan {
      text-align: right;
    }

    .close_botan img {
      height: 120px;
      margin: -10px 15px 0 0;
    }

    .close_botan img:hover {
      opacity: 0.5;
      transform: rotateZ(720deg);
    }

    @media screen and (max-width: 550px) {
      .close_botan img {
        height: 100px;
        margin: 0 5px 0 0;
      }
    }

    @media screen and (max-width: 470px) {
      .close_botan img {
        height: 60px;
        margin: -3px 5px 0 0;
      }
    }





    /*メインコンテンツ*/




    .factory_box01 {
      max-width: 1280px;
      margin: 40px auto 100px;

      display: grid;
      grid-template-columns: 60% 40%;
      grid-template-rows: auto;
      grid-column-start: 1;
      grid-column-end: 3;

      border-bottom: solid 2px #255A8C;
      padding: 0 0 10px;
    }

    @media screen and (max-width: 1280px) {
      .factory_box01 {
        margin: 40px 30px 100px 30px;
      }
    }

    @media screen and (max-width: 900px) {
      .factory_box01 {
        display: flex;
        flex-direction: column-reverse;

        margin: 40px 20px 150px;
      }
    }


    .factory_img {
      margin: 0 30px 0 0;
    }

    @media screen and (max-width: 900px) {
      .factory_img01 {
        margin: 0 auto 20px;
      }
    }

    .factory_img img {
      width: 100%;
    }

    .factory_text_box {
      margin: 20px auto 0 0;
    }

    @media screen and (max-width: 900px) {
      .factory_text_box {
        margin: 10px auto 20px;
      }
    }


    .factory_box02 {
      max-width: 1280px;
      margin: 40px auto 100px;

      display: grid;
      grid-template-columns: 40% 60%;
      grid-template-rows: auto;
      grid-column-start: 1;
      grid-column-end: 3;

      border-bottom: solid 2px #255A8C;
      padding: 0 0 10px;
    }

    @media screen and (max-width: 1280px) {
      .factory_box02 {
        margin: 40px 30px 100px 30px;
      }
    }

    @media screen and (max-width: 900px) {
      .factory_box02 {
        display: block;
        margin: 40px 20px 150px;
      }
    }

    .factory_img02 {
      margin: 0 0 0 30px;
    }


    @media screen and (max-width: 900px) {
      .factory_img02 {
        margin: 0 auto 20px;
      }
    }


    .factory_img02 img {
      width: 100%;
    }


    .factory_text_box02 {
      margin: 20px auto 0 0;
    }

    @media screen and (max-width: 900px) {
      .factory_text_box02 {
        margin: 20px auto;
      }
    }


    .factory_midashi h2 {
      font-size: 1.8em;
      font-weight: bold;

      margin: 0 0 8px 0;

      text-decoration: underline;
      text-decoration-color: #255A8C;
      text-underline-offset: 7px;
      text-decoration-thickness: 2px;
    }

    @media screen and (max-width: 900px) {
      .factory_midashi h2 {
        text-align: center;
      }
    }

    .factory_text {
      font-size: 1em;
      margin: 0;
    }





    /*フッター*/
    .futter {
      background-color: #255A8C;
      width: 100%;
      padding: 50px 0 150px 0;
      margin: 0;
      border-width: 50px;
      text-align: center;
    }


    .futter_text {
      font-size: 0.9em;
      color: #fff;
      margin-bottom: 25px;
      margin: 0 0 20px;
    }

    .futter_text a {
      text-decoration: none;
      color: #fff;
    }

    .futter_text a:hover {
      color: #b0c4de;
    }



    .futter_text_return {
      font-size: 0.9em;
      color: #fff;
      margin-bottom: 25px;
      margin: 0 0 20px;

      text-decoration: underline;
      text-decoration-color: #fff;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
    }

    .futter_text_return a {
      text-decoration: none;
      color: #fff;
    }

    .futter_text_return a:hover {
      color: #b0c4de;
      text-decoration-color: #b0c4de;
    }


    .copywrite {
      width: 90%;
      margin: 0 auto;
      font-size: 0.6em;
      color: #fff;
    }

    .copy_mark {
      font-size: 2em;
      vertical-align: -3px;
    }