/* media query */
.hok {
  color: #3db182;
}

.toh {
  color: #f8b73d;
}

.kan {
  color: #d8e58d;
}

.kos {
  color: #47bcc6;
}

.tok {
  color: #fdd86f;
}

.hkr {
  color: #cfd300;
}

.kin {
  color: #f2a0a0;
}

.chu {
  color: #5db050;
}

.shi {
  color: #4694d1;
}

.kyu {
  color: #e5e647;
}

.gotochiPageTitle {
  background: url(../images/title_bg.png) no-repeat center/auto 100% #f5dfb4;
  text-align: center;
  padding: 100px 30px;
}
@media screen and (max-width: 960px) {
  .gotochiPageTitle {
    padding: 50px 30px;
  }
}
@media screen and (max-width: 668px) {
  .gotochiPageTitle {
    padding: 40px 20px;
  }
}
.gotochiPageTitle h2 {
  font-size: 7rem;
  font-weight: 700;
  margin-bottom: 10px;
}
@media screen and (max-width: 960px) {
  .gotochiPageTitle h2 {
    font-size: 4rem;
  }
}
@media screen and (max-width: 668px) {
  .gotochiPageTitle h2 {
    font-size: 3rem;
  }
}
.gotochiPageTitle p {
  font-size: 3rem;
  font-weight: 700;
  line-height: 150%;
}
@media screen and (max-width: 960px) {
  .gotochiPageTitle p {
    font-size: 2rem;
  }
}
@media screen and (max-width: 668px) {
  .gotochiPageTitle p {
    font-size: 1.6rem;
  }
}

.mapArea {
  width: calc(100% - 200px);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}
@media all and (max-width: 1400px) {
  .mapArea {
    width: calc(100% - 100px);
  }
}
@media all and (max-width: 1200px) {
  .mapArea {
    width: calc(100% - 60px);
  }
}
@media screen and (max-width: 668px) {
  .mapArea {
    width: calc(100% - 40px);
  }
}
@media screen and (max-width: 668px) {
  .mapArea {
    margin-bottom: 25px;
  }
}
.mapArea .copy {
  text-align: center;
  margin-bottom: 30px;
}
@media screen and (max-width: 800px) {
  .mapArea .copy {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 668px) {
  .mapArea .copy {
    text-align: left;
  }
}
.mapArea .mapZoom {
  position: relative;
}
.mapArea .mapZoom > p img {
  border-radius: 50px;
}
@media screen and (max-width: 960px) {
  .mapArea .mapZoom > p img {
    border-radius: 10px;
  }
}
.mapArea .mapZoom .viewport {
  display: none;
}
@media screen and (max-width: 960px) {
  .mapArea .mapZoom .viewport {
    display: block;
    border-radius: 10px;
  }
}

.listArea {
  width: calc(100% - 200px);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}
@media all and (max-width: 1400px) {
  .listArea {
    width: calc(100% - 100px);
  }
}
@media all and (max-width: 1200px) {
  .listArea {
    width: calc(100% - 60px);
  }
}
@media screen and (max-width: 668px) {
  .listArea {
    width: calc(100% - 40px);
  }
}
@media screen and (max-width: 668px) {
  .listArea {
    margin-bottom: 25px;
  }
}
.listArea ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.listArea ul li {
  width: calc(20% - 20px);
}
.listArea ul li:not(:last-child) {
  margin-right: 25px;
}
@media all and (max-width: 1200px) {
  .listArea ul li {
    width: calc(33.3333333333% - 20px);
    margin: 0 10px 20px;
  }
  .listArea ul li:not(:last-child) {
    margin-right: 10px;
  }
}
@media screen and (max-width: 668px) {
  .listArea ul li {
    width: 100%;
    margin: 0 0 15px;
  }
  .listArea ul li:not(:last-child) {
    margin-right: 0;
  }
}
.listArea ul li a {
  text-align: center;
  display: block;
  background-color: #fff;
  box-shadow: 2px 2px 0px 4px rgba(0, 0, 0, 0.1);
  padding: 20px 5px 25px;
  border-radius: 30px;
  font-size: 1.5rem;
  font-feature-settings: "palt";
}
.listArea ul li a strong {
  font-size: 1.4em;
  margin: 0 2px;
  font-weight: 900;
}
@media screen and (max-width: 668px) {
  .listArea ul li a {
    font-size: 1.3rem;
    padding: 10px 10px 15px;
  }
}
.listArea ul li a:hover {
  transform: translateY(-5px);
}
.listArea ul li a::after {
  content: "";
  display: block;
  width: 50%;
  height: 6px;
  margin: 5px auto 0;
}
@media screen and (max-width: 668px) {
  .listArea ul li a::after {
    margin: 4px auto 0;
    width: 30%;
  }
}
.listArea ul li.ht a::after {
  background: linear-gradient(90deg, #3db182 0%, #3db182 50%, #f8b73d 50%, #f8b73d 100%);
}
.listArea ul li.tk a::after {
  background: linear-gradient(90deg, #d8e58d 0%, #d8e58d 50%, #47bcc6 50%, #47bcc6 100%);
}
.listArea ul li.th a::after {
  background: linear-gradient(90deg, #fdd86f 0%, #fdd86f 33%, #cfd300 33%, #cfd300 66%, #f2a0a0 66%, #f2a0a0 100%);
}
.listArea ul li.cs a::after {
  background: linear-gradient(90deg, #5db050 0%, #5db050 50%, #4694d1 50%, #4694d1 100%);
}
.listArea ul li.ky a::after {
  background-color: #e5e647;
}/*# sourceMappingURL=index.css.map */