@charset "utf-8";
@import url(/css/common.css);

* {
  margin: 0;
  padding: 0;
}

.main-image {
  padding-top: 120px;
  margin-bottom: -10px;
}

.location {
  text-align: center;
  font-size: 16px;
  font-family: "Zen Old Mincho", sans-serif;
  margin-top: 70px;
  background-color: rgb(191, 233, 219);
  margin: 0 auto;
}

.location h1 {
  margin-top: 0px;

  @media (width <= 800px) {
    margin: 0 auto;
    text-align: center;
  }
}

/* ロケーション */

/* ロケーションの線 */
.location-line-ueyoko01 {
  position: absolute;
  top: 830px; /* 上からpx */
  left: 0px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 850px; /* 幅*/
  height: 0;
  /* 高さは0で線のみ表示 */
  @media (width <= 800px) {
    display: none;
  }
}

.location-line-shitayoko01 {
  position: absolute; /* 絶対位置 */
  top: 1240px; /* 上からpx */
  left: 0px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 850px; /* 幅 */
  height: 0; /* 高さは0で線のみ表示 */

  @media (width <= 800px) {
    display: none;
  }
}

.location-line-tate01 {
  position: absolute; /* 絶対位置 */
  top: 1035px; /* 上からpx */
  left: 644px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 410px; /* 幅 */
  height: 0;
  transform: rotate(90deg); /* 時計回りに回転する */

  @media (width <= 800px) {
    display: none;
  }
}
/* ロケーションの線 */

.location-group01 {
  display: grid;
  grid-template-rows: 350px;
  grid-template-columns: 50% 50%;

  @media (width <= 800px) {
    display: block;
    align-items: center;
  }
}

.location01-text {
  grid-row: 1/2;
  grid-column: 1/2;
  width: 50%;
  height: auto;
  margin-left: 300px;
  margin-top: 100px;
  text-align: center;

  @media (width <= 800px) {
    margin: 0 auto;
    align-items: center;
    text-align: center;
  }
}

.location01 {
  grid-row: 1/2;
  grid-column: 2/3;
  width: 50%;
  height: auto;
  margin-top: 50px;
  z-index: 10;

  @media (width <= 800px) {
    margin: 0 auto;
  }
}

.location-group02 {
  display: grid;
  grid-template-rows: 350px;
  grid-template-columns: 50% 50%;

  @media (width <= 800px) {
    display: block;
  }
}

.location02 {
  grid-row: 1/2;
  grid-column: 1/2;
  width: 50%;
  height: auto;
  margin-left: 300px;
  margin-top: 10px;
  z-index: 10;

  @media (width <= 800px) {
    margin: 0 auto;
    align-items: center;
    text-align: center;
  }
}

.location02-text {
  grid-row: 1/2;
  grid-column: 2/3;
  width: 50%;
  height: auto;
  margin-top: 75px;
  margin-left: 30px;
  text-align: center;
  z-index: 10;

  @media (width <= 800px) {
    margin: 0 auto;
    align-items: center;
    text-align: center;
  }
}

/* 浜黒崎松並木 */

/* 浜黒崎松並木の線↓ */
.location-line-ueyoko02 {
  /*上横線 */
  position: absolute;
  top: 60px; /* 上からpx */
  left: 0px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 950px; /* 幅*/
  height: 0; /* 高さは0で線のみ表示 */

  @media (width <= 800px) {
    display: none;
  }
}

.location-line-shitayoko02 {
  /*下横線 */
  position: absolute; /* 絶対位置 */
  top: 470px; /* 上からpx */
  left: 0px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 950px; /* 幅 */
  height: 0; /* 高さは0で線のみ表示 */

  @media (width <= 800px) {
    display: none;
  }
}

.location-line-tate02 {
  /* 縦線 */
  position: absolute; /* 絶対位置 */
  top: 265px; /* 上からpx */
  left: 744px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 410px; /* 幅 */
  height: 0;
  transform: rotate(90deg); /* 時計回りに回転で縦にしている */

  @media (width <= 800px) {
    display: none;
  }
}

.hanten {
  /* 左右反転 */
  transform: scaleX(-1);
}
/* 浜黒崎松並木の線↑ */

.avenue {
  text-align: center;
  font-size: 17px;
  margin-top: 70px;
}

.location03 {
  width: 40%;
  height: auto;
  margin: 0 auto;
  margin-top: 100px;
}

.location03-text1 {
  text-align: center;
  margin-top: 80px;
}

.location03-text2 {
  text-align: center;
  margin-top: 50px;
}

/* サイクリング */

/* サイクリングの線 */
.location-line-ueyoko03 {
  position: absolute;
  top: 2430px; /* 上からpx */
  left: 0px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 760px; /* 幅*/
  height: 0;
  @media (width <= 800px) {
    display: none;
  }
  /* 高さは0で線のみ表示 */
}

.location-line-shitayoko03 {
  position: absolute; /* 絶対位置 */
  top: 2840px; /* 上からpx */
  left: 0px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 760px; /* 幅 */
  height: 0;

  @media (width <= 800px) {
    display: none;
  }
  /* 高さは0で線のみ表示 */
}

.location-line-tate03 {
  position: absolute; /* 絶対位置 */
  top: 2635px; /* 上からpx */
  left: 556px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 410px; /* 幅 */
  height: 0;
  transform: rotate(90deg);

  @media (width <= 800px) {
    display: none;
  } /* 時計回りに回転する */
}
/* サイクリングの線 */

.cycling {
  text-align: center;
  font-size: 17px;
  margin-top: 190px;
  z-index: 100;
}

.location04 {
  position: relative;
  z-index: 10;
  width: 40%;
  height: auto;
  margin: 0 auto;
  margin-top: 70px;
}

.location04-text {
  text-align: center;
  margin-top: 60px;
}

/* 釣りスポット */

/* 釣りスポットの線↓ */
.location-line-ueyoko04 {
  /*上横線 */
  position: absolute;
  top: 10px; /* 上からpx */
  left: 0px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 950px; /* 幅*/
  height: 0;

  @media (width <= 800px) {
    display: none;
  }

  /* 高さは0で線のみ表示 */
}

.location-line-shitayoko04 {
  /*下横線 */
  position: absolute; /* 絶対位置 */
  top: 420px; /* 上からpx */
  left: 0px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 950px; /* 幅 */
  height: 0;

  @media (width <= 800px) {
    display: none;
  } /* 高さは0で線のみ表示 */
}

.location-line-tate04 {
  /* 縦線 */
  position: absolute; /* 絶対位置 */
  top: 215px; /* 上からpx */
  left: 744px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 410px; /* 幅 */
  height: 0;
  transform: rotate(90deg);

  @media (width <= 800px) {
    display: none;
  }
  /* 時計回りに回転で縦にしている */
}

.hanten02 {
  /* 左右反転 */
  transform: scaleX(-1);
}
/* 釣りスポットの線↑ */

.fishing {
  text-align: center;
  font-size: 17px;
  margin-top: 230px;
}

.location05 {
  position: relative;
  width: 40%;
  height: auto;
  margin: 0 auto;
  margin-top: 70px;
}

.location05-text01 {
  text-align: center;
  margin-top: 60px;
}

.location05-text02 {
  text-align: center;
  font-size: 15px;
  margin-top: 30px;
}

/*  対策事業*/

/* 対策事業の線 */
.location-line-ueyoko05 {
  position: absolute;
  top: 4180px; /* 上からpx */
  left: 0px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 760px; /* 幅*/
  height: 0;

  @media (width <= 800px) {
    display: none;
  }
  /* 高さは0で線のみ表示 */
}

.location-line-shitayoko05 {
  position: absolute; /* 絶対位置 */
  top: 4550px; /* 上からpx */
  left: 0px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 760px; /* 幅 */
  height: 0;

  @media (width <= 800px) {
    display: none;
  }
  /* 高さは0で線のみ表示 */
}

.location-line-tate05 {
  position: absolute; /* 絶対位置 */
  top: 4366px; /* 上からpx */
  left: 574px; /* 左からpx */
  border-top: 1px solid rgb(109, 109, 109);
  width: 370px; /* 幅 */
  height: 0;
  transform: rotate(90deg); /* 時計回りに回転する */

  @media (width <= 800px) {
    display: none;
  }
}
/* 対策事業の線 */

.project {
  text-align: center;
  font-size: 17px;
  margin-top: 230px;
}

.location06 {
  position: relative;
  z-index: 10;
  width: 40%;
  height: auto;
  margin: 0 auto;
  margin-top: 60px;
}

.location06-text {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 250px;
}