/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .header .area_inner {
    padding-inline: 1rem;
    flex-wrap: wrap;
  }

  .list_sub_menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .main .header .area_logo {
    display: block;
    float: none;
    font-size: 1.25rem;
  }

  .header .area_inner {
    padding-inline: 2rem;
  }

  .header .area_logo:after {
    content: none;
  }

  .main .header .area_logo .site_name {
    color: white;
  }

  .header .area_logo:after {
    vertical-align: baseline;
  }

  .header .area_navbar {
    display: none;
  }

  .section_spot .is_center {
    width: 100vw;
    margin: auto;
  }

  .section_spot .spot_homesite {
    display: flex;
    left: auto;
    justify-content: center;
  }

  :is(.main, main) .uio_box {
    margin-top: 2rem;
  }

  .intro_box .text_intro {
    margin-inline: 1rem;
  }

  .content {
    margin-bottom: 1rem;
    padding: 0 2rem;
  }

  .uio_content.area_custom {
    display: flex;
    flex-wrap: wrap;
  }

  .area_custom .type {
    float: none;
    width: max(auto, 320px);
  }

  .floating_item {
    right: 1rem;
    bottom: 1rem;

    &>li {
      display: none;
    }

    &>li:last-child {
      display: block;
    }
  }

  .footer .area_sns.is_change {
    position: static;
    margin-top: 2rem;
  }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

  body,
  html {
    height: auto;
  }

  .wrap {
    min-width: 20rem;
    overflow-x: hidden;
  }

  .header .section_header,
  .header .section_sub_menu_wrap,
  .intro_box,
  .content,
  .footer .section_footer {
    width: 100vw;
  }

  .header .area_inner {
    display: flex;
    justify-content: space-between;
    padding-inline: 3rem;
  }

  .header .area_logo:after {
    display: none;
  }

  .header .area_navbar {
    padding-right: 0;
  }

  .header .area_global {
    position: static;
  }

  .content {
    margin-bottom: 3rem;
    padding: 0 3rem;
  }

  .footer .footer_inner {
    display: flex;
    flex-wrap: wrap;
    padding-inline: 2rem;
  }

  .footer .area_sns.is_change {
    right: 2rem;
  }
}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}