@charset "UTF-8";

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

  /* wrapper */
  #wrapper {
    min-width: 300px;
  }

  /* header */
  header {
    width: 100%;
    padding: 20px 3%;
    display: block;
  }

  header #logo {
    width: 135px;
    position: static;
  }

  header #text_nav {
    display: none;
  }

  /* block　共通 */
  .block_a {
    display: block;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 5%;
    margin: 0 auto;
  }

  .block_a .midashi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 3em;
  }

  .block_a .detail {
    width: 100%;
    text-align: left;
  }

  .block_b {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 5%;
    margin: 4em auto 0;
  }

  .block_b .midashi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 3em;
  }

  .block_b .detail {
    width: 100%;
    text-align: left;
  }

  /* button_a */
  .button_a {
    width: 10em;
    text-align: left;
    margin-left: auto;
  }

  /* arrow */
  .arrow {
    position: relative;
  }

  .arrow:after {
    font-family: 'IBM Plex Serif';
    content: '→';
    font-size: 0.7em;
    position: absolute;
    right: 0.2em;
    bottom: 20%;
  }

  .arrow_link {
    position: relative;
  }

  .arrow_link:after {
    font-family: 'IBM Plex Serif';
    content: '↗︎';
    font-size: 0.7em;
    position: absolute;
    right: 0.2em;
    bottom: 0.5em;
  }

  .button {
    width: 90%;
    margin: 0 auto;
  }

  .button a p {
    width: 100%;
    background-color: #FFF;
    border: 1px solid #6B6A6B;
    border-radius: 60px;
    padding: 1.5em 0;
  }

}