@charset "UTF-8";
/* CSS INFORMATION =====================================================
File name : host.css
Description : ホスト
===================================================================== */
/* ========================================================
    host
======================================================== */
.host {
  position: relative;
  width: 100%;
  padding: 12rem 0;
}
@media screen and (min-width: 768px) {
  .host {
    padding: 8rem 0;
  }
}
.host_ttl {
  position: relative;
  width: 115.3846153846%;
  margin: 0 -7.6923076923%;
}
@media screen and (min-width: 768px) {
  .host_ttl {
    width: 100%;
    margin: 0;
  }
}
.host_column {
  position: relative;
  width: 110.7692307692%;
  margin: 8rem -5.3846153846% 0 -5.3846153846%;
}
@media screen and (min-width: 768px) {
  .host_column {
    width: 100%;
    margin: 6rem 0 0 0;
  }
}
.host_lead {
  position: relative;
  width: 100%;
  padding: 0 4.8611111111%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .host_lead {
    padding: 0;
  }
}
.host_lead > p {
  color: #ffffff;
  font-size: 3.2rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .host_lead > p {
    font-size: 2.2rem;
  }
}
.host_list {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 6rem;
}
@media screen and (min-width: 768px) {
  .host_list {
    margin-top: 0;
  }
}
@media screen and (min-width: 768px) {
  .host_list:first-child {
    margin-top: -4rem;
  }
}
.host_list > li {
  width: 100%;
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .host_list > li {
    width: 33.3333333333%;
    margin-top: 4rem;
  }
}
.host_item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.host_img {
  position: relative;
  width: 55.5555555556%;
}
@media screen and (min-width: 768px) {
  .host_img {
    width: 100%;
  }
}
.host_name {
  position: relative;
  width: 41.6666666667%;
  color: #ffffff;
  font-size: 3.3rem;
  font-weight: 700;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .host_name {
    width: 100%;
    font-size: 2.4rem;
    text-align: center;
  }
}
.host_name > span {
  display: block;
  font-size: 2.6rem;
  text-indent: -0.5em;
}
@media screen and (min-width: 768px) {
  .host_name > span {
    font-size: 1.8rem;
    text-indent: 0;
  }
}

/* ========================================================
    header
======================================================== */
.nav_menu > li.nav_host > a::before {
  content: "";
}/*# sourceMappingURL=host.css.map */