#builder {
  position: relative;
}
#builder .left {
  width: 30%;
}
#builder .left img {
  width: 100%;
}
#builder .right {
  width: 67%;
  margin-left: 3%;
}

.normal_h2 {
  position: absolute;
  left: 0;
  padding: 0 1em 0 22%;
  height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 140%;
  /* margin: 1.7em 0 0 0; */
  color: #fff;
  top: -4em;
  left: -22%;
}

#builder h2 {
  background: #dde688;
}
#builder .right p {
  margin: 0.5em 0 2em 0;
}

#roster {
  position: relative;
  width: 100%;
  margin-top: 10em;
}

.roster ul {
}

.roster .ttl {
  width: 20%;
  background: #f2f2f2;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f2f2f2;
}
.roster .pdf {
  width: 80%;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 1em;
  border: 1px solid #f2f2f2;
}
.pickup {
  margin-top: 3em;
}
.pickup h5 {
  margin: 0 0 1em 0;
  text-align: center;
}
.pickup a {
  margin: 0 auto;
  width: 80%;
  color: #e89439;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e89439;
  height: 3em;
  webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.pickup a:hover {
  transform: scale(0.95);
  border-radius: 0.5em;
  background: #e89439;
  color: #fff;
  filter: drop-shadow(2px 2px 3px #ccc);
  webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.fa-regular,
.far {
  font-size: 140%;
  margin-right: 0.3em;
}

.pdf a {
  webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.pdf a:hover {
  margin-left: 1em;
  webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.pdf a:hover .fa-solid {
  opacity: 1;
  webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.fa-solid,
.fas {
  margin-left: 0.3em;
  opacity: 0;
  webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.builder_fbg {
  background: #dde688;
  background-image: url(../../common/images/builder/foot_bg.svg);
}

/***********************************************************************/

/* --- レスポンシブ切替 Tablet--- */
@media screen and (max-width: 768px) {
} /* --- レスポンシブ切替 Tablet--- */

/***********************************************************************/

/* --- レスポンシブ切替 Mobile--- */
@media screen and (max-width: 480px) {
  .head_key img {
    left: -60%;
  }
  #builder {
    padding-top: 6em;
  }
  .normal_h2 {
    top: 0em;
    color: #555;
    width: 130%;
  }
  #builder .left,
  #builder .right {
    width: 100%;
  }
  #builder .right {
    margin-top: 3em;
    margin-left: 0%;
  }
  #builder ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
  }
  #builder li {
    width: 49%;
  }
  #builder li:last-child {
    width: 100%;
    text-align: right;
  }
  #builder h3 {
    font-size: 140%;
  }
  .pickup h5 {
    font-size: 120%;
  }
  .pickup a {
    width: 100%;
  }
  #builder .right ul {
    padding: 5em 0 0 0;
  }
  #builder .right li {
    width: 100%;
    padding: 0;
    height: 100%;
            min-height: 4em;
  }
  .pdf a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    font-size: 120%;
    line-height: 140%;
    box-sizing: border-box;
  }
} /* --- レスポンシブ切替 Mobile--- */