@media screen and (max-width:768px) {
  br.sp_only {
    display: block;
  }
  section p {
    font-size: 1.6rem;
  }
  h1 {
    max-width: calc(100vw - 300px);
  }
  section h3,
  h4 {
    font-size: 3rem;
    text-align: left;
  }
  h4 .logo_dx {
    height: 30px;
  }
  .dl_btn p:last-child {
    font-size: 2.2rem;
  }

  #topVisual,
  .swiper-slide {
    max-height: 140vw;
    min-height: 700px;
  }
  .swiper_slide_inner {
    margin-top: -150px;
  }
  .swiper_slide_inner > p {
    font-size: 2vw;
    width: 36%;
  }
  .swiper-slide img {
    margin-top: 0;
  }
  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 250px;
  }
  .header_button {
    height: fit-content;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .header_button a {
    width: 85%;
  }
  .header_button .dl_btn {
    height: 60px;
  }
  .header_button .dl_btn p:last-child {
    font-size: 2rem;
    line-height: 1.1;
  }


  .inquiry {
    flex-direction: column;
    gap: 10px;
  }
  .inquiry button {
    margin-left: 0;
  }
  .header_belt br {
    display: block;
  }
  .strength ul {
    flex-direction: column;
    height: auto;
  }
  .strength li {
    width: 100%;
    height: auto;
  }
  .strength li:nth-child(n+2),
  .strength .list_div {
    margin-top: 50px;
  }
  .strength li h5 br {
    display: none;
  }
  .list_div h5 {
    margin-bottom: 0;
  }
  #text_left {
    margin-top: 20px;
  }
  .strength .list_div p.price {
    font-size: 5rem;
    line-height: 1;
    margin: 10px;
  }
  .dx h4 br {
    display: block;
  }
  .dx__wrap {
    gap: 10px;
    margin-bottom: 10px;
    flex-direction: column;
  }
  .dx__contents.dx__contents_wide {
    width: 100%;
  }
  .dx__contents_min {
    width: 100%;
    gap: 10px;
  }
  .dx__contents.dx__contents_wide > ul {
    flex-direction: row;
    gap: 10vw;
    justify-content: flex-start;
  }
  #video {
    width: 100%;
  }

  .unyo_image .flex {
    flex-direction: column;
  }
  .unyo_image h4 {
    font-size: 2.4rem;
  }
  .unyo_image h5 {
    margin-left: 0 !important;
  }
  .unyo_image h6 {
    margin-bottom: 20px;
  }
  .flex.top_list {
    gap: 10px;
    flex-direction: row;
    margin: 0;
  }
  .img_main,
  .unyo_image .flex .text_area,
  .unyo_image .flex.width_64 .text_area {
    width: 100%;
    margin: 0 auto 10px;
  }
  .unyo_image section {
    padding: 20px 0;
  }
  .unyo_image .gray_back {
    margin-top: 0;
  }
  .icon_list {
    margin: 20px 0 10px;
  }
  ul.unyo {
    flex-wrap: wrap;
    gap: 10px;
  }
  ul.unyo li p {
    margin-top: 0;
    text-align: center;
    min-width: 75%;
    white-space: nowrap;
  }
  .unyo_image button.red.arrow {
    width: 100%;
  }
  .more_link {
    margin: 0 0 40px auto;
  }

  .img_appli_1,
  .img_appli_2,
  .img_tenken {
    width: 75%;
  }
  .img_tenken {
    margin-bottom: 30px;
  }
  .img_dashboard {
    width: 100%;
    margin-top: 0;
    margin-bottom: -20px;
  }
  .img_format {
    margin-top: 0;
  }
  .img_appli_roumu_1 {
    margin: 0 auto 20px;
  }
  .img_iraisho {
    width: 90%;
    height: fit-content;
  }

  #doutaikanri .unyo li {
    width: 48%;
  }
  #anzenkanri .unyo li {
    width: 23%;
    padding: 20px;
  }
  #anzenkanri .unyo li p {
    position: unset;
  }
  #anzenkanri .gray_back {
    width: 100%;
  }
  #appli .kinou_list {
    flex-direction: column;
  }
  #appli .kinou_list li {
    width: 100%;
    margin-bottom: 20px;
  }
  #appli .kinou_list h5 br {
    display: none;
  }
  #appli .exp_area {
    margin: 20px auto;
  }
  #appli .app_icon img {
    height: 5em;
  }
  #appli .app_icon.etc img {
    height: 4em;
  }
  #appli .app_icon p {
    font-size: 1.2rem;
  }
  #appli p.small .pc_only {
    display: none;
  }

  .roumukanri .top_list li {
    width: 40%;
  }
  #format .gray_back {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  #format .gray_back h5,
  #format b {
    font-size: 2rem;
  }
  #format b {
    display: block;
    padding: 0 40px;
  }
  #format .list_csv {
    flex-wrap: wrap;
    gap: 10px;
  }
  #format .list_csv li {
    width: 45%;
    margin: 0;
    padding: 10px 0 12px;
  }
  #appli_roumu h6 {
    text-align: center;
    margin-top: 40px;
  }
  .right {
    text-align: left !important;
  }
  .scroll_wrap {
    width: 100%;
    margin: 0 auto 40px;
  }
  .scroll_box {
    margin: 0;
    height: 500px;
  }
  /* .flex.list_icon {
    flex-direction: row;
    margin: 20px 0 10px;
  } */

  .ryoukin {
    font-size: 3rem;
    padding: 40px 10px;
  }
  .ryoukin img {
    width: 80%;
  }
  p#notes {
    font-size: 3vw;
  }
  .question li {
    width: 100%;
  }
  .step .green_area .flex {
    flex-wrap: wrap;
    justify-content: center;
    margin: -10px 0 10px;
  }
  .step .green_area .img_div {
    width: 85%;
  }
  .unuse_list {
    margin: 0 0 20px 0;
  }
  .about .text_area {
    width: 90%;
  }
  .company th {
    width: 120px;
    padding: 0 10px;
  }
  .download .inner {
    padding: 50px 40px;
  }
  .download ul {
    width: 100%;
  }
  footer .inner {
    padding: 0 20px;
  }
}






/* ======================================================== */

@media screen and (max-width:480px) {

  html {
    font-size: 50%;
  }

  .pc_only {
    display: none !important;
  }
  .sp_only {
    display: block;
  }

  section {
    margin: 0 auto;
  }
  p,
  section p {
    font-size: 14px;
  }
  p.small {
    font-size: 1.4rem;
    text-align: left !important;
  }


  header {
    width: 100vw;
    height: 70px;
    padding: 10px;
    padding-bottom: 5px;
    z-index: 999;
    position: fixed;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
  .header_wrap {
    display: flex;
    justify-content: space-between;
  }
  header h1 {
    width: 150px;
    line-height: 0;
    max-width: none;
  }
  header ul {
    display: flex;
    float: right;
    font-size: 6rem;
    line-height: 1;
  }
  header li:first-child {
    padding-right: 20px;
  }
  header li i {
    font-size: 90%;
    color: #000;
  }
  #topVisual {
    position: relative;
  }
  .topVisual__sp {
    height: 100%;
  }
  #topVisual,
  .swiper-slide {
    /* height: calc(100vh - 70px); */
    height: 100vh;
    max-height: none;
    min-height: auto;
  }
  .swiper-container {
    height: 100% !important;
  }
  .swiper_slide_inner {
    margin-top: 30px;
  }
  .swiper-slide img {
    width: calc(100% - 40px);
    margin-top: 0;
    max-height: calc(100vh - 200px);
  }
  .swiper-slide-0 {
    background-image: url("../LPimages/img_top_bk.jpg");
    background-image: image-set(
      url('../LPimages/img_top_bk.jpg.webp') type('image/webp'),
      url('../LPimages/img_top_bk.jpg') type('image/jpg')
    );
  }
  .swiper-slide-1 {
    background-image: url("../LPimages/img_top_bk_sp_orange.jpg");
    background-image: image-set(
      url('../LPimages/img_top_bk_sp_orange.jpg.webp') type('image/webp'),
      url('../LPimages/img_top_bk_sp_orange.jpg') type('image/jpg')
    );
  }
  .swiper-slide-2 {
    background-image: url("../LPimages/img_top_bk_sp_green.jpg");
    background-image: image-set(
      url('../LPimages/img_top_bk_sp_green.jpg.webp') type('image/webp'),
      url('../LPimages/img_top_bk_sp_green.jpg') type('image/jpg')
    );
  }
  .swiper_slide_inner > p {
    width: calc(100% - 50px);
    top: 77%;
    left: 25px !important;
    line-height: 1.2;
    font-size: 3vw;
  }
  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 11%;
  }
  .header_button.sp_only {
    position: absolute;
    top: auto;
    bottom: 40px;
    left: 20px;
    width: calc(100% - 40px);
    display: flex;
    flex-direction: row;
    gap: 0;
    margin: 0;
    z-index: 10;
  }
  .header_button a {
    width: 32%;
  }
  .header_button .dl_btn {
    height: 8vh;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  .header_button p {
    font-size: 2rem !important;
  }
  .header_belt {
    height: 70px;
    bottom: auto;
  }
  .header_belt p {
    font-size: 2rem;
    line-height: 1.2;
  }


  main {
    overflow: hidden;
  }
  main p {
    margin: 5px 0;
  }
  .inner {
    padding: 0;
  }
  /* .header_button_area {
    position: absolute;
    width: 90%;
    height: 13vh;
    bottom: 80px;
    margin: 0 5%;
    left: 0;
    margin-bottom: 1vh;
  }
  .header_button_area button {
    padding: 1vh;
    margin-top: 1.2vh;
  }
  .header_button_area p {
    margin: 0;
    font-size: 2.5vh;
  } */


  section {
    padding: 20px;
  }
  h2 {
    font-size: 3rem;
  }
  h4 {
    /* font-size: 2.4rem; */
    font-size: 3rem;
  }
  h4 .logo_dx {
    height: 20px;
  }
  .section_line {
    width: 100px;
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  /* video */
  .demo_video .title {
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 10px;
  }

  /* .customer ul {
    display: block;
    margin-top: 50px;
  }
  .customer ul .flex {
    display: block;
  }
  .customer h5 {
    margin-bottom: 4px;
  }
  .customer h4 {
    margin: 40px 0 0;
  }
  .customer p {
    padding: 6px 10px;
  }
  span.float_right {
    float: none;
  }
  .customer ul {
    margin-top: 40px;
  }
  .customer li .flex img,
  .customer img {
    width: 100%;
    max-height: 40px;
    padding-left: 6px;
  } */

  .strength {
    margin-top: 190px;
    margin-bottom: 40px;
  }
  .strength p.strong_text .logo_dx {
    width: 70vw;
    height: auto;
  }
  .strength h4 {
    text-align: left;
    line-height: 1.5;
  }
  .strength h5 {
    font-size: 2.2rem;
    margin: 12px 0 5px;
  }
  .strength p {
    font-size: 1.8rem;
  }
  .strength p.big {
    font-size: 2.2rem;
  }
  .strength .red_number {
    width: 40px;
    height: 40px;
  }
  .strength .list_div p {
    text-align: left;
    font-size: 2rem;
  }
  .strength ul {
    flex-wrap: wrap;
    margin-top: 0;
  }
  .strength li {
    width: 100%;
    padding: 15px;
  }
  .strength li:nth-child(n+2) {
    margin-top: 30px;
  }
  .strength .list_div {
    padding: 10px;
    margin-top: 30px;
  }
  .strength .list_div p.price {
    text-align: center;
  }
  .strength .list_div p.price span {
    font-size: 3rem;
  }
  #text_center.list_div__info {
    font-size: 2rem;
  }
  .strength .dl_btn {
    margin-top: 20px;
    padding: 10px;
    height: 50px;
  }
  .strength .dl_btn::after {
    display: none;
  }
  .strength .dl_btn p {
    font-size: 5vw;
  }
  .list_div__info {
    text-align: center !important;
  }
  #text_left {
    margin: 30px 0 -10px;
  }

  .dx .flex {
    flex-direction: column !important;
  }
  .dx__contents {
    width: 100%;
  }
  .dx .gap40 {
    gap: 0 !important;
  }
  .dx ul p {
    font-size: 16px;
  }
  .dx__info p:last-child {
    font-size: 2.4rem;
  }

  /* .function {
    margin-top: 60px;
  }
  .function h4 {
    margin-bottom: 20px;
  }
  .function .orange {
    margin-bottom: 20px;
  }
  .function h5 {
    font-size: 6.5vw;
  }
  .function .flex {
    display: block;
  }
  .function .img_area {
    display: flex;
    position: relative;
  }
  .function .woman {
    width: 50%;
    margin-left: auto;
  }
  .function .fukidashi {
    position: absolute;
    left: 0;
    top: 4vh;
    width: 60vw;
  } */

  /* .service_list {
    padding: 12px 12px 0;
  }
  .service_list li {
    width: 49%;
    height: 40px;
    font-size: 1.4rem;
    margin-bottom: 5px;
  }
  .service_list li img {
    width: 10vw;
    height: 22px;
    margin-left: 10%;
  }
  .service_list li p {
    margin-right: 5px;
    line-height: 1.2;
  }
  .function .strong_text {
    font-size: 3.5vw;
  }
  .function .three_updata {
    font-size: 2.2rem;
  } */


  .unyo_image {
    margin: 50px 0;
  }
  .unyo_image .inner {
    padding: 0 20px;
  }
  .unyo_image h4 {
    font-size: 2.4rem;
    margin-bottom: 20px;
    padding: 5px 0 3px 10px;
  }
  .unyo_image h5 {
    font-size: 2.4rem;
  }
  .unyo_image h5.center {
    text-align: left !important;
  }
  .unyo_image h6 {
    font-size: 2rem;
    margin-bottom: 10px;
  }
  .unyo_image .gray_back {
    padding: 10px;
  }
  .unyo_image .gray_back h5 {
    font-size: 2rem;
  }
  /* .unyo_image .flex.list_icon {
    display: flex;
  } */
  .scroll_btn {
    margin: 100px 0;
  }
  .scroll_text {
    line-height: normal;
  }
  ul.unyo {
    flex-wrap: wrap;
    padding: 0;
  }
  ul.unyo li {
    padding: 0;
  }
  ul.unyo li p {
    font-size: 1.6rem;
    margin: 0px auto 5px;
  }
  .top_list li {
    min-width: 100%;
    height: 50px !important;
    font-size: 2rem;
  }
  .top_list li a {
    height: 50px !important;
  }
  .top_list li img {
    max-width: 30px;
    max-height: 30px;
    left: 30px;
  }
  .icon_list {
    gap: 4px;
    margin: 15px 0;
  }
  .icon_list li {
    width: 19%;
  }

  .more_link {
    background: #faeaea;
    font-weight: bold;
  }

  .img_appli_roumu_2 {
    margin-bottom: 10px;
  }
  #anzenkanri .gray_back {
    padding: 15px 20px 0;
  }
  #anzenkanri ul.unyo {
    flex-wrap: nowrap;
  }
  #anzenkanri ul.unyo li {
    padding: 0;
  }
  #anzenkanri ul.unyo p {
    padding: 5px 10px;
    white-space: nowrap;
    line-height: 1;
    margin: -10px auto 10px;
  }
  #nippou ul.unyo li,
  #tenken ul.unyo li {
    width: 30%;
  }
  #appli .exp_area {
    margin-bottom: 10px;
  }
  #format .list_csv li {
    width: 48%;
  }
  #format .gray_back {
    padding: 20px 20px 30px;
  }
  #format b {
    text-align: left;
  }
  #format b br {
    display: none;
  }
  #unkoukeikaku ul.unyo li {
    width: 47%;
  }
  .ryoukin p {
    font-size: 3rem;
    font-weight: bold;
  }
  .ryoukin img {
    width: 90%;
  }
  .question {
    margin-bottom: 40px;
  }
  .question li {
    margin-bottom: 10px;
  }
  .step h4 {
    margin-bottom: 20px;
  }
  .step .green_area {
    padding: 30px;
    width: 100vw;
    margin-left: -20px;
  }
  .step .green_area h4 {
    margin: 0 0 30px 0;
  }
  .step .green_area .img_div {
    width: 100%;
    text-align: right;
  }
  .unuse_list {
    font-size: 1.8rem;
  }
  .step .dounyu {
    font-size: 6vw;
  }


  .unyo_image section {
    margin: 20px auto;
  }
    
  #appli .kinou_list h5 {
    text-align: left;
  }
  #appli .kinou_list h5 br {
    display: none;
  }
  #appli_roumu h6 {
    text-align: left;
    margin-top: 20px;
  }
  #appli div.flex {
    margin-bottom: 10px;
  }

  .max_vw.soudan {
    margin: 0;
    padding: 30px 20px;
  }
  .max_vw.soudan .inner h4 {
    margin-bottom: 10px;
    font-size: 6vw;
    text-align: center;
  }
  .max_vw.soudan .inner p {
    font-size: 3.8vw;
  }
  .max_vw.soudan button {
    width: 300px;
    margin-bottom: 5px;
  }
  .about h4.text_red {
    margin-top: 40px;
    margin-bottom: 20px;
  }
  /* .about h3 {
    font-size: 2.5rem;
    line-height: 1.6;
    margin-bottom: 10px;
  } */
  /* .about img {
    width: 100%;
  } */
  .about img.logo {
    width: 60%;
  }
  .about .text_area {
    width: 100%;
    margin-top: 30px;
  }

  .company .section_line {
    margin-bottom: 40px;
  }
  .company h4 {
    margin-bottom: 20px;
  }
  .company table {
    margin-bottom: 20px;
  }
  .company tr {
    height: auto;
    border: none;
  }
  .company th,
  .company td {
    padding: 10px;
    display: block;
    width: 100%;
    border-top: 1px solid #ccc;
  }
  .company th {
    background: #f4f4f4;
  }
  .company iframe {
    height: 300px;
    margin-bottom: 40px;
  }

  .download {
    padding: 40px 20px;
    margin-top: 20px;
  }
  .download .inner {
    padding: 0;
  }
  .download table,
  .download tr,
  .download th,
  .download td {
    border: none;
  }
  .download th,
  .download td {
    display: block;
    width: 100%;
    padding: 10px;
  }
  .download th {
    font-weight: bold;
    padding: 10px 18px;
  }
  .download td {
    padding: 0 18px 5px;
  }
  .download textarea {
    height: 75px;
  }
  .download small {
    font-size: 100%;
    line-height: 1.5;
  }

  .comp-modal {
    top: 55%;
  }

  .comp-modal-inner {
    width: 90vw;
  }
  ul.unuse {
    font-size: 4vw;
  }


  footer {
    padding: 20px;
  }
  footer .address_item {
    float: none;
    margin-top: 10px;
  }
  footer img {
    width: 50%;
  }
  footer p {
    font-size: 1.6rem;
  }
  footer .inner {
    display: block;
  }
  footer .gaiyou {
    justify-content: left;
  }
  footer a {
    margin: 0 5px 0 0;
  }
  footer .media {
    transform: scale(.85);
    transform-origin: left;
    margin: 0 0 0 10px;
  }

  /* 説明会バナー */
  .floating_bannar {
    position: fixed;
    right: 20px;
    z-index: 20;
    width: 180px;
    height: 150px;
  }
  .dounyuu_banner {
    border: 2px solid #000;
    box-shadow: 2px 2px 4px gray;
    background: #000;
  }
  .floating_bannar img {
    margin-top: 0 !important;
  }
  .floating_bannar a {
    display: block;
  }
  .floating_bannar a:hover {
    border: none;
  }
  .double {
    background: #000;
    width: 180px;
    height: 150px;
    /* bottom: 10px; */
    right: 5px;
    box-shadow: 5px 10px 20px rgba(0,0,0,0.25);
  }
  .floating_bannar button {
    position: absolute;
    background: #4b4b4b;
    color: #fff;
    padding: 5px 8px;
    font-size: 20px;
    padding: 5px;
    top: 2px;
    left: -30px;
  }


  /* 画像 */
  div {
    background-size: contain;
    background-position: center;
  }
}