@charset "utf-8";

.test_text {
  font-size: 30px;
  font-weight: 700;
  color: red;
  text-align: center;
}

@media (max-width: 768px) {
  .body {
    font-size: 14px;
  }

  /* ヘッダー */
  .header_container {
    width: 100%;
    padding: 20px;
  }

  .header_logo img {
    height: auto;
    max-width: 200px;
  }

  /* フッター */
  .new_footer_container {
    width: 100%;
    padding: 20px;
  }

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

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

  .new_footer_logo {
    width: 200px;
    height: auto;
  }

  .new_footer_titlebox {
    flex-direction: column;
    gap: 10px;
  }

  /* ==== feature link ==== */
  .feature_container {
    width: 100%;
    padding: 0 15px;
  }

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

  .feature_box {
    width: 100%;
  }

  .feature_image {
    width: 100%;
    margin-left: 0;
  }

  /* ==== info link ==== */
  .info_container {
    width: 100%;
    padding: 0 15px;
  }

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

  .info_box {
    width: 100%;
    margin-left: 0;
  }

  .info_image {
    width: 100%;
  }

  /* ==== set link ==== */
  .setlink_container {
    width: 100%;
    padding: 0 15px;
  }

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

  .setlink_box {
    width: 100%;
    margin-left: 0;
  }

  /* ====== feature link ====== */ 
  .feature_content {
    /* background-color: blue; */
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
  }
  .feature_image {
    /* width: 150%; */
    margin-left: 20px;
    margin-bottom: 10px;
  }
  /* ====== info link ====== */ 
  .info_content {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
  }
  .info_image {
    /* width: 95%; */
    margin-bottom: 10px;
  }
  .info_box {
    width: 500px;
    margin-left: 30px;
    /* background-color: blue; */
  }
  /* ====== set link ====== */    
  .setlink_box {
    width: 330px;
    margin-left: 20px;
    margin-bottom: 20px;
    /* border: solid 3px  #5b5b5b; */
  }
/* ======== spoon ============= */
  .sec1_titlebox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .sec1_titlebox img {
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
  }

  .sec2_container {
    height: auto;
    padding: 20px 0;
  }
  
  .sec2_box {
    margin-top: 20px;
    width: 95%;
  }

  .sec2_col1 {
    flex-direction: column;
    align-items: center;
  }

  .sec2_img_1 img {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
  }

  .sec2_img_2 img {
    width: 100% !important;
    max-width: 500px !important;
    margin: 20px auto 0 !important;
  }

  .sec2_co2 {
    width: 90%;
    margin: 20px auto;
  }

  .sec3_textbox {
    width: 100%;
    padding: 20px;
    color: white;
  }

  .sec3_text {
    font-size: 14px;
    line-height: 1.8;
  }

  .sec2_col3 {
    width: 95%;
  }

  .sec2_col3_1 img {
    width: 300px;
    margin-right: 10px;
  }

  .sec2_col3_2 img {
    width: 300px;
  }
} 

/*======== medhia 480 =======*/

@media (max-width: 480px) {
  body {
    font-size: 13px;
  }

  .sec2_title {
    font-size: 14px;
  }

  .sec2_amout {
    font-size: 20px;
  }

  .sec2_text {
    font-size: 13px;
  }

  .sec2_textbox,
  .sec2_textbox_2 {
    padding: 10px;
  }

  .header_logo img {
    max-width: 150px;
  }

  .new_footer_logo {
    width: 150px;
  }

  .title_2, .soft_title_2 {
    height: 40px;
  }

  .card_text, .soft_card_text {
    font-size: 14px;
  }

  .news_sub_ttl {
    font-size: 14px;
  }

  .about_text {
    font-size: 14px;
  }



  /* ====== card iroiro ====== */
  .card_titlebox {
    margin: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    width: 80%;
    background-color: white;
    /* border: solid 1px #5b5b5b; */
    border-radius: 8px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    flex-wrap:wrap;
  }
  .title_2 {
    margin-left: 0px;
    margin-bottom: 20px;
    width: auto;
    height: 60px;
  }
  .card_text {
    /* background-color: pink; */
    width: 100%;
    line-height: 1.7;
  }
  .card_figure {
    /* background-color: pink; */
    /* margin-left: 20px; */
    width: 120%;
  }

  .card_wrap {
    margin-right: 80px;
  }
  .card_figcaption {
    margin-bottom: 30px;
  }
   /* ====== card yawaraka ====== */

  .soft_title_2 {
    margin-left: 0px;
    margin-bottom: 20px;
    width: auto;
    height: 60px;
  }
  .soft_card_text {
    width: 100%;
    line-height: 1.7;
  }

  .soft_card_imgfigcabox {
    display: flex;
    flex-wrap: wrap;

  }
  .soft_card_imgbox {
    height: 530px;
  }
  .soft_card_imgbox img {
    width: 100%;
    margin-left: 20px;

  }
  .soft_card_figcaption {
    width: 90%;
    margin-bottom: 20px;
  }
    /* ====== card tanpin ====== */
    .s_card_container {

      max-width: 1024px;
      margin: 0 auto 100px;
      height: 500px;
      /* border: solid 1px  #5b5b5b; */
      /* border-radius: 10px; */
    }
    .card3_leftbox {
      margin-bottom: 20px;
    }

    .card3_leftbox img{
      width: 100%;
      /* margin-bottom: 20px; */
    }
    .card3_rightbox img {
      width: 100%;
      /* margin-bottom: 20px; */
    }
    /* ====== feature link ====== */ 
    .feature_content {
      /* background-color: blue; */
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
    }
    .feature_image {
      /* width: 150%; */
      margin-left: 20px;
      margin-bottom: 10px;
    }
    /* ====== info link ====== */ 
    .info_content {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
    }
    .info_image {
      /* width: 95%; */
      margin-bottom: 10px;
    }
    .info_box {
      width: 500px;
      margin-left: 30px;
      /* background-color: blue; */
    }

    .sec2_container {
      padding: 10px 0;
    }

    .sec2_box {
      margin-top: 10px;
    }

    .sec2_img_1 img,
    .sec2_img_2 img {
      width: 100% !important;
      max-width: 400px !important;
    }

    .sec2_co2 {
      width: 95%;
    }

    .sec2_textbox {
      padding: 15px;
    }

    .sec2_text {
      font-size: 13px;
    }

    .sec2_col3_1 img {
      margin-left: 10px;
      width: 90%;
      margin-bottom: 40px;
    }

    .sec2_col3_2 img {
      margin-left: 10px;
      width: 90%;
    }
}