/* sp.css: スマホ画面サイズのレスポンシブ対応 */

@media screen and (max-width: 600px) {
  body {
    font-size: 16px;
    margin: 0;
  }

  img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  #container {
    width: auto;
  }

  .c-header {
    padding: .75rem;
  }

  #pannavi {
    display: flex;
    overflow: auto;
    white-space: nowrap;
    margin: 0 0 1rem;
    padding: 0 .75rem;
    font-size: 12px;
  }

  div#left_cont {
    width: auto;
    float: none;
    margin: 0 .75rem;
  }

  ul#left_navi {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #acacac !important;
    border-right: 1px solid #acacac !important;

    li.panel {
      width: auto;
      border: 0 !important;
      border-left: 1px solid #acacac !important;
      border-bottom: 1px solid #acacac !important;
    }

    li.apply {
      width: 100%;
      background: none;
      line-height: 1.3;
      padding: 1rem;
      text-align: center;
    }

    div.apply_s {
      position: static;
      margin: 0 auto;
    }

    > a {
      padding: 0;
      flex: 1;
    }

    li.arrow {
      padding: 1rem 1rem 1rem 2rem;
      background-position: 1rem center;
    }
  }

  #to_user {
    margin: 1.5rem 0;
  }

  div#main_cont {
    width: auto;
    float: none;
    margin: 0 .75rem 1.5rem;
  }

  h1 {
    margin-inline: 0;
  }

  p.title_text {
    width: auto;
    margin-inline: 0;
  }

  div.dot_line {
    width: auto;
  }

  div.button_area {
    background-color: #f4f4f4;
    width: auto;
    padding: 1rem .5rem;
  }

  div.charge {
    width: auto;
    padding: .5rem;
  }

  div#folder_option {
    width: auto;
    margin-top: 20px;

    > img:first-child {
      object-fit: cover;
      object-position: left center;
      aspect-ratio: 450 / 61;
      border-right: 1px solid #fff;
      box-sizing: border-box;
    }

    div.folder_option_apply {
      background-size: contain;
      width: 100%;
      height: auto;
      aspect-ratio: 368 / 97;
    }

    div.osusume {
      margin: 0 .75rem .75rem;
      width: auto;

      > img:first-child {
        object-fit: cover;
        object-position: left center;
        aspect-ratio: 400 / 47;
        border-right: 1.8vw solid transparent;
        border-image: linear-gradient(to bottom, #5CB8F8, #057BC5) 1;
        box-sizing: border-box;
      }

      p {
        width: auto;
      }

      img.osusume_image {
        margin-inline: auto;
        display: block;
      }
    }

    img.point_img,
    img.step_img {
      display: block;
      margin: 0 auto;
      width: 96%;
    }

    img.point_img {
      margin-bottom: .5rem;
    }

    img.step_img {
      margin-bottom: 1rem;
    }
  }

  div#check {
    width: auto;
    margin-block: 1rem;

    > img:first-child {
      object-fit: cover;
      object-position: left center;
      aspect-ratio: 450 / 61;
      border-right: 1px solid #fff;
      box-sizing: border-box;
    }

    p {
      width: auto;
    }

    img.check_image {
      margin-inline: auto;
      display: block;
    }

    div.check_attention {
      padding: .75rem;
      margin: .75rem;
      width: auto;
    }

    div.check_apply {
      background-size: contain;
      width: 100%;
      height: auto;
      aspect-ratio: 368 / 97;
    }
  }

  div.bottom_attention_wrap {
    width: auto;
    margin-block: 2rem;

    div.bottom_attention {
      padding: 1rem;
      width: auto;
    }
  }

  #user {
    ul {
      display: grid;
      gap: .75rem;
      padding: 1rem 0;

      li {
        display: block;
        width: auto;
        padding: 0;
      }
    }
  }
}