@charset "utf-8";

.flex {
  justify-content: space-around;
}
.space-between{
  justify-content: space-between;
}
.pc_hidden {
  display: none;
}

header .nav_pc {
  width: 100vw;
  height: auto;
}

header h1 {
  width: 200px;
  position: absolute;
  top: 20px;
  left: 20px;
  position: fixed;
  z-index: 900;
}

.logo_small {
  width: 150px;
}

#container h2 {
  margin-top: 50px;
}

#container h3 {
  padding: 30px 0;
  margin: 100px 0 80px 0;
  font-weight: 600;
}

.button-09 a {
  font-size: 16px;
  letter-spacing: 0.07em;
  color: #272727;
  font-weight: 400;
  border: solid 1px #272727;
  border-radius: 999px;
  display: block;
  box-sizing: border-box;
  max-width: 250px;
  text-align: center;
  padding: 10px 15px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  margin: auto;
}

.button-09 a:hover {
  color: #ffffff;
  background: #272727;
  transition: all 0.3s;
}

/* -----1024px以下に適用されるCSS（タブレット用）----- */
@media screen and (max-width: 1024px) {
  .content{
    margin: 0 3% 0 2%;
  }
  #container {
    width: 76%;
    margin: 0 2%;
  }
  .logo_small {
    width: 100px;
  }
}

/* -----767px以下に適用されるCSS（スマホ用）----- */
@media screen and (max-width: 767px) {
  #container{
    width: 92%;
    margin: 0 auto;
  }
  img {
    max-width: 767px;
  }
  .flex {
    display: block;
  }
  .sp_flex{
    display: flex!important;
  }
  .sp_hidden{
    display: none;
  }
  .pc_hidden{
    display: block;
  }

  header h1{
    margin-left: 0;
    width: auto;
    top: 0;
  }
  .logo_small_sp{
    margin-bottom: 0;
    margin-left: 0;
  }

  #container h3{
    margin-top: 80px;
  }

}