@charset "UTF-8";
/*レスポンシブ*/
a {
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #000;
}

main {
  background: url("/fccrace/spot/image/main_background.jpg");
  height: 700px;
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  main {
    height: 480px;
  }
}

@media screen and (max-width: 384px) {
  main {
    height: 280px;
  }
}

main .course {
  margin: 0 auto;
  max-width: 1000px;
  display: block;
  position: relative;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  main .course {
    width: 550px;
  }
}

@media screen and (max-width: 384px) {
  main .course {
    width: 300px;
  }
}

main .course .map {
  display: block;
  margin: 0 auto;
  width: 100%;
  padding: 50px 0;
}

@media screen and (max-width: 384px) {
  main .course .map {
    padding: 30px 0 50px 0;
  }
}

main h1 {
  margin: -145px 0 auto;
}

@media screen and (max-width: 768px) {
  main h1 {
    margin: -53px 0 auto;
  }
}

@media screen and (max-width: 384px) {
  main h1 {
    margin: -35px 0 auto;
  }
}

main h1 img {
  display: block;
  margin: 0 auto;
  width: 700px;
}

@media screen and (max-width: 768px) {
  main h1 img {
    width: 500px;
  }
}

@media screen and (max-width: 384px) {
  main h1 img {
    width: 90%;
  }
}

main nav p {
  text-align: center;
}

main nav .point1 {
  display: block;
  position: absolute;
  left: 776px;
  top: 140px;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  main nav .point1 {
    left: 422px;
    top: 95px;
  }
}

@media screen and (max-width: 384px) {
  main nav .point1 {
    left: 233px;
    top: 48px;
  }
}

main nav .point1 img {
  width: 205px;
}

@media screen and (max-width: 768px) {
  main nav .point1 img {
    width: 118px;
  }
}

@media screen and (max-width: 384px) {
  main nav .point1 img {
    width: 68px;
  }
}

main nav .point2 {
  display: block;
  position: absolute;
  left: 386px;
  top: 383px;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  main nav .point2 {
    left: 213px;
    top: 237px;
  }
}

@media screen and (max-width: 384px) {
  main nav .point2 {
    left: 116px;
    top: 128px;
  }
}

main nav .point2 img {
  width: 270px;
}

@media screen and (max-width: 768px) {
  main nav .point2 img {
    width: 148px;
  }
}

@media screen and (max-width: 384px) {
  main nav .point2 img {
    width: 80px;
  }
}

main nav .point3 {
  position: absolute;
  left: 202px;
  top: 125px;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  main nav .point3 {
    left: 110px;
    top: 95px;
  }
}

@media screen and (max-width: 384px) {
  main nav .point3 {
    left: 59px;
    top: 53px;
  }
}

main nav .point3 img {
  width: 340px;
}

@media screen and (max-width: 768px) {
  main nav .point3 img {
    width: 190px;
  }
}

@media screen and (max-width: 384px) {
  main nav .point3 img {
    width: 105px;
  }
}

main nav .point4 {
  position: absolute;
  left: 85px;
  top: 375px;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  main nav .point4 {
    left: 46px;
    top: 231px;
  }
}

@media screen and (max-width: 384px) {
  main nav .point4 {
    left: 25px;
    top: 129px;
  }
}

main nav .point4 img {
  width: 200px;
}

@media screen and (max-width: 768px) {
  main nav .point4 img {
    width: 115px;
  }
}

@media screen and (max-width: 384px) {
  main nav .point4 img {
    width: 64px;
  }
}

main nav .point5 {
  position: absolute;
  left: 560px;
  top: 46px;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  main nav .point5 {
    left: 308px;
    top: 40px;
  }
}

@media screen and (max-width: 384px) {
  main nav .point5 {
    left: 168px;
    top: 22px;
  }
}

main nav .point5 img {
  width: 220px;
}

@media screen and (max-width: 768px) {
  main nav .point5 img {
    width: 128px;
  }
}

@media screen and (max-width: 384px) {
  main nav .point5 img {
    width: 70px;
  }
}

main nav .ovtk1 {
  position: absolute;
  left: 890px;
  top: 507px;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  main nav .ovtk1 {
    left: 490px;
    top: 292px;
  }
}

@media screen and (max-width: 384px) {
  main nav .ovtk1 {
    left: 269px;
    top: 152px;
  }
}

main nav .ovtk1 img {
  width: 40px;
  height: 40px;
}

@media screen and (max-width: 768px) {
  main nav .ovtk1 img {
    width: 20px;
  }
}

@media screen and (max-width: 384px) {
  main nav .ovtk1 img {
    width: 15px;
  }
}

main nav .ovtk2 {
  position: absolute;
  left: 654px;
  top: 437px;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  main nav .ovtk2 {
    left: 360px;
    top: 253px;
  }
}

@media screen and (max-width: 384px) {
  main nav .ovtk2 {
    left: 196px;
    top: 128px;
  }
}

main nav .ovtk2 img {
  width: 40px;
  height: 40px;
}

@media screen and (max-width: 768px) {
  main nav .ovtk2 img {
    width: 20px;
  }
}

@media screen and (max-width: 384px) {
  main nav .ovtk2 img {
    width: 15px;
  }
}

main nav .ovtk3 {
  position: absolute;
  left: 627px;
  top: 250px;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  main nav .ovtk3 {
    left: 343px;
    top: 150px;
  }
}

@media screen and (max-width: 384px) {
  main nav .ovtk3 {
    left: 185px;
    top: 75px;
  }
}

main nav .ovtk3 img {
  width: 40px;
  height: 40px;
}

@media screen and (max-width: 768px) {
  main nav .ovtk3 img {
    width: 20px;
  }
}

@media screen and (max-width: 384px) {
  main nav .ovtk3 img {
    width: 15px;
  }
}

main nav .ovtk4 {
  position: absolute;
  left: 420px;
  top: 380px;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  main nav .ovtk4 {
    left: 232px;
    top: 223px;
  }
}

@media screen and (max-width: 384px) {
  main nav .ovtk4 {
    left: 126px;
    top: 110px;
  }
}

main nav .ovtk4 img {
  width: 40px;
  height: 40px;
}

@media screen and (max-width: 768px) {
  main nav .ovtk4 img {
    width: 20px;
  }
}

@media screen and (max-width: 384px) {
  main nav .ovtk4 img {
    width: 15px;
  }
}

main nav .ovtk5 {
  position: absolute;
  left: 414px;
  top: 201px;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  main nav .ovtk5 {
    left: 226px;
    top: 129px;
  }
}

@media screen and (max-width: 384px) {
  main nav .ovtk5 {
    left: 122px;
    top: 64px;
  }
}

main nav .ovtk5 img {
  width: 40px;
  height: 40px;
}

@media screen and (max-width: 768px) {
  main nav .ovtk5 img {
    width: 20px;
  }
}

@media screen and (max-width: 384px) {
  main nav .ovtk5 img {
    width: 15px;
  }
}

.intro {
  width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 120px 50px 60px;
}

@media screen and (max-width: 768px) {
  .intro {
    max-width: 800px;
    width: 90%;
  }
}

@media screen and (max-width: 384px) {
  .intro {
    font-size: 0.9rem;
    width: 100%;
    padding: 60px 20px;
  }
}

@media screen and (min-width: 769px) {
  .intro .spbr {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .intro .spbr {
    display: none;
  }
}

@media screen and (max-width: 384px) {
  .intro .spbr {
    display: block;
  }
}

section {
  width: 800px;
  margin: 0 auto 100px;
}

@media screen and (max-width: 768px) {
  section {
    max-width: 700px;
    width: 90%;
  }
}

@media screen and (max-width: 384px) {
  section {
    width: 100%;
    padding: 0 15px;
    margin-bottom: 60px;
  }
}

section a {
  text-align: right;
}

section a.anchor {
  display: block;
}

section .title {
  width: 800px;
  padding: 0 0 10px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: nowrap;
}

@media screen and (max-width: 768px) {
  section .title {
    width: 98%;
  }
}

@media screen and (max-width: 384px) {
  section .title {
    width: 98%;
    text-align: center;
    display: block;
    margin: 0 auto;
  }
}

@media screen and (max-width: 384px) {
  section .title .title-pc {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  section .title .title-pc {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  section .title .title-sp {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  section .title .item1 img {
    height: 75px;
  }
}

@media screen and (max-width: 768px) {
  section .title .item1 img {
    height: 70px;
  }
}

@media screen and (max-width: 384px) {
  section .title .item1 img {
    height: 60px;
    margin-bottom: 15px;
  }
}

section .title .item2 {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  section .title .item2 {
    width: 200px;
  }
}

@media screen and (max-width: 384px) {
  section .title .item2 {
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 20px;
  }
}

section .title .recommend {
  height: 23px;
}

section .text {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
}

@media screen and (max-width: 384px) {
  section .text {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
  }
}

section .text .item3 {
  width: 170px;
}

@media screen and (max-width: 384px) {
  section .text .item3 {
    display: block;
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    margin: 0 auto;
    padding: 25px 0;
  }
}

section .text .item4 {
  width: 550px;
}

@media screen and (max-width: 768px) {
  section .text .item4 {
    width: 480px;
  }
}

@media screen and (max-width: 384px) {
  section .text .item4 {
    padding: 0 20px;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
}

section#sec1 {
  position: relative;
}

section#sec1 .title {
  border-bottom: solid #0075c1 2px;
}

section#sec1 p.item2 {
  color: #0075c1;
}

@media screen and (max-width: 384px) {
  section#sec1 p.item2 {
    background-color: #b3e1ff;
  }
}

section#sec1 a.sec1_anc {
  position: absolute;
  top: -106px;
}

section#sec2 {
  position: relative;
}

section#sec2 .title {
  border-bottom: #e4007f solid 2px;
}

section#sec2 p.item2 {
  color: #e4007f;
}

@media screen and (max-width: 384px) {
  section#sec2 p.item2 {
    background-color: #ffd3eb;
  }
}

section#sec2 a.sec2_anc {
  position: absolute;
  top: -106px;
}

section#sec3 {
  position: relative;
}

section#sec3 .title {
  border-bottom: #601986 solid 2px;
}

section#sec3 p.item2 {
  color: #601986;
}

@media screen and (max-width: 384px) {
  section#sec3 p.item2 {
    background-color: #eac3ff;
  }
}

section#sec3 a.sec3_anc {
  position: absolute;
  top: -106px;
}

section#sec4 {
  position: relative;
}

section#sec4 .title {
  border-bottom: #ed6d00 solid 2px;
}

section#sec4 p.item2 {
  color: #ed6d00;
}

@media screen and (max-width: 384px) {
  section#sec4 p.item2 {
    background-color: #ffdcbd;
  }
}

section#sec4 a.sec4_anc {
  position: absolute;
  top: -106px;
}

section#sec5 {
  position: relative;
}

section#sec5 .title {
  border-bottom: #179f36 solid 2px;
}

section#sec5 p.item2 {
  color: #179f36;
}

@media screen and (max-width: 384px) {
  section#sec5 p.item2 {
    background-color: #ccf3d5;
  }
}

section#sec5 a.sec5_anc {
  position: absolute;
  top: -106px;
}

section#ovtk {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  position: relative;
  background-color: #f2f3f5;
  width: 800px;
  padding: 25px;
}

@media screen and (max-width: 768px) {
  section#ovtk {
    max-width: 800px;
    width: 90%;
  }
}

@media screen and (max-width: 384px) {
  section#ovtk {
    width: 100%;
    display: block;
  }
}

section#ovtk a.ovanchor {
  position: absolute;
  top: -106px;
}

section#ovtk div {
  width: 550px;
  font-size: 14px;
}

@media screen and (max-width: 768px) {
  section#ovtk div {
    max-width: 550px;
    width: 90%;
  }
}

@media screen and (max-width: 384px) {
  section#ovtk div {
    margin: 0 auto;
  }
}

section#ovtk p {
  margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
  section#ovtk p {
    width: 90%;
  }
}

@media screen and (max-width: 384px) {
  section#ovtk p {
    width: 100%;
    margin: 10px auto;
  }
}

section#ovtk li {
  list-style: disc;
  margin-left: 20px;
}

section#ovtk img.item2 {
  width: 160px;
  height: 160px;
}

@media screen and (max-width: 384px) {
  section#ovtk img.item2 {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto 15px auto;
  }
}

section#ovtk .item1 {
  font-size: 1.4rem;
  margin-bottom: 15px;
}

@media screen and (max-width: 384px) {
  section#ovtk .item1 {
    text-align: center;
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

@media screen and (max-width: 768px) {
  section#ovtk .item2 {
    margin-right: 30px;
  }
}

@media screen and (max-width: 384px) {
  section#ovtk .item2 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
}

@media screen and (max-width: 384px) {
  section#ovtk .item3 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
  }
}