/* ===== 共通スタイル ===== */
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  background-color: #fff;
  overflow-x: hidden; /* 横スクロール防止 */
}

main {
  margin-top:58px;
}
@media only screen and  (max-width:980px) {
  main {
  margin-top:48px;
}
}

main.index img {
  display: block;
  width: 100%;
  height: auto;
}

main.contestant {
  text-align: center;
  max-width:980px;
  margin: 0 auto;
}

main.contestant img {
  text-align: center;
  max-width:980px;
  margin: 0 auto;
}
main.volunteer {
  text-align: center;
  max-width:980px;
margin: 0 auto;
}

main.volunteer img {
  text-align: center;
  max-width:980px;
  margin: 0 auto;
}

.center {
  text-align: center;
}



.map-container {
  position: relative;
  width: 100%;
  text-align: center;
 
}
/*
.map-container img {
  width: 100% !important;
  height: auto;
  display: block;
  margin: 0 auto;
  max-width: 980px; 
}*/
main.index img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 全リンクの基本形 */
a[class*='-link'] {
  position: absolute;
  display: block;
  background-color: transparent;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;

}

/* ===== セクション別ホバー・位置スタイル ===== */


/* セクション4 */

.sec4-link1 {
  top: 37%;
  left: 30.5%;
  width: 39%;
  /*height: 17.3%;*/
height: 53.6%;
  z-index: 100;

}

.sec4-link1:hover {
  background-color: rgba(161, 225, 224, 0.7);
  border-radius: 35px;
}

/* セクション7 */

.sec7-link1 {
  top: 34.2%;
  left: 28%;
  width: 43.8%;
  height: 7.5%;
  z-index: 100;

}
.sec7-link1:hover {
  background-color: rgba(161, 225, 224, 0.7);
}

.sec7-link2 {
  top: 90.2%;
  left: 35.7%;
  width: 26.4%;
  height: 2%;
  z-index: 100;

}
.sec7-link2:hover {
  background-color: rgba(161, 225, 224, 0.7);
  border-radius:26px;
}


/* セクション8 */
.sec8-link1 {
  top: 39.5%;
  left: 9.6%;
  width: 33.8%;
  height: 2.5%;
}
.sec8-link1:hover {
  background-color: rgba(161, 225, 224, 0.7);
  border-radius:26px;
}

.sec8-link2 {
  top: 84.3%;
  left: 33%;
  width: 32.3%;
  height: 4%;

}
.sec8-link2:hover {
  background-color: rgba(20, 120, 100, 0.7);
  border-radius: 70px;
  border:2px dotted #3f6bb5;
}

.sec8-link3 {
  top: 91%;
  left: 33%;
  width: 32.9%;
  height: 4%;
}
.sec8-link3:hover {
  background-color: rgba(20, 120, 100, 0.7);
  border-radius: 70px;
  border:2px dotted #3f6bb5;
}

/* セクション9 */
.sec9-link1 {
  top: 81.3%;
  left: 35%;
  width: 32.9%;
  height: 6.8%;
}
.sec9-link1:hover {
  background-color: rgba(20, 120, 100, 0.7);
  border-radius: 70px;
  border:2px dotted #3f6bb5;
}

/* セクション10 */
/*広島*/
.sec10-link1 {
  top: 17.3%;
  left: 30%;
  width: 8%;
  height: 4.5%;

}
.sec10-link1:hover {
  background-color: rgba(20, 120, 100, 0.7);
  border-radius: 8px;
  border:2px dotted #3f6bb5;
}

/*志摩*/
.sec10-link2 {
  top: 20.8%;
  right: 28.7%;
  width: 8%;
  height: 5%;

}
.sec10-link2:hover {
  background-color: rgba(20, 120, 100, 0.7);
  border-radius: 8px;
  border:2px dotted #3f6bb5;
}
/*佐賀*/
.sec10-link3 {
  top: 27%;
  left: 28.6%;
  width: 8%;
  height: 4.5%;

}
.sec10-link3:hover {
  background-color: rgba(20, 120, 100, 0.7);
  border-radius: 8px;
  border:2px dotted #3f6bb5;
}
/*兵庫*/
.sec10-link4 {
  top: 23%;
  right: 19%;
  width: 8%;
  height: 5%;

}
.sec10-link4:hover {
  background-color: rgba(20, 120, 100, 0.7);
  border-radius: 8px;
  border:2px dotted #3f6bb5;
}
/*沖縄*/
.sec10-link5 {
  top: 30.5%;
  left: 19%;
  width: 9.4%;
  height: 5.5%;

}
.sec10-link5:hover {
  background-color: rgba(20, 120, 100, 0.7);
  border-radius: 8px;
  border:2px dotted #3f6bb5;
}
/*高知*/
.sec10-link6 {
  top: 31.5%;
  left: 41.2%;
  width: 9.4%;
  height: 5%;

}
.sec10-link6:hover {
  background-color: rgba(20, 120, 100, 0.7);
  border-radius: 8px;
  border:2px dotted #3f6bb5;
}

/*東広島*/
.sec10-link7 {
  top: 29.8%;
  left: 52%;
  width: 9%;
  height: 5%;

}
.sec10-link7:hover {
  background-color: rgba(20, 120, 100, 0.7);
  border-radius: 8px;
  border:2px dotted #3f6bb5;
}

/*さぬき*/
.sec10-link8 {
  top: 30.3%;
  right: 22%;
  width: 8%;
  height: 5%;

}
.sec10-link8:hover {
  background-color: rgba(20, 120, 100, 0.7);
  border-radius: 8px;
  border:2px dotted #3f6bb5;
}

/*おかやま*/
.sec10-link9 {
  top: 21%;
  left: 36%;
  width: 8.5%;
  height: 5.5%;

}
.sec10-link9:hover {
  background-color: rgba(20, 120, 100, 0.7);
  border-radius: 8px;
  border:2px dotted #3f6bb5;
}

/*徳島*/
.sec10-link10 {
  top: 26%;
  right: 30.5%;
  width: 8.5%;
  height: 5.5%;
}
.sec10-link10:hover {
  background-color: rgba(20, 120, 100, 0.7);
  border-radius: 8px;
  border:2px dotted #3f6bb5;
}

/* セクション11 */
.sec11-link1 {
  bottom: 15.2%;
  left: 36.4%;
  width: 30.8%;
  height: 5.8%;

}

.sec11-link1:hover {
  background-color: rgba(20, 120, 100, 0.7);
border-radius: 80px;
}



/*　競技者用リンク共通スタイル
=============================================================== */
.sec2-link {
  position: absolute;
  display: block;
  background-color: transparent;
  transition: background-color 0.3s ease;
  border-radius: 8px;
  cursor: pointer;
}

/* マウスホバー時の色 */
.sec2-link:hover {
 background-color: rgba(0, 120, 48, 0.8); 
  border-radius: 78px;
}

/* sec2.png: 幅980px × 高さ1200px を基準にしたパーセンテージ位置指定 */
.sec2-link1 {
  top: 15.8%;        /* 217 / 1200 */
  left: 28.9%;       /* 282 / 980 */
  width: 41.5%;      /* (696 - 282) / 980 */
  height: 7.2%;      /* (328 - 217) / 1200 */
}

/*　ボランティア用リンク共通スタイル
=============================================================== */
.sec2vol-link {
  position: absolute;
  display: block;
  background-color: transparent;
  border-radius: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.sec2vol-link:hover {
  background-color: rgba(0, 120, 48, 0.8); 
  border-radius: 78px;
}

/* sec2volunteer.png が width: 900px, height: 1200px を想定 */
.sec2vol-link1 {
  top: 59.8%;
  left: 24.5%;
  width: 50.3%;
  height: 9.2%;
}





/* ===== グローバルナビゲーション ===== */
.glNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.glNav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0.5em 0;
}
.glNav li {
  padding: 0 1em;
  border-left: 1px solid #ccc;
  text-align: center;
}
.glNav li:first-child {
  border-left: none;
}
.glNav a {
  color: #2b426f;
  text-decoration: none;
  padding: 0.5em 1em;
  border-radius: 20px;
  transition: all 0.3s ease;
  display: inline-block;
}
.glNav a:hover {
  background-color: #2b426f;
  color: #fff;
}
@media only screen and  (max-width:980px) {
  .glNav ul {
    font-size:14px;
  }
}


/* ===== ページトップ ===== */
.scrollToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #2b426f;
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-align: center;
  line-height: 48px;
  font-size: 24px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease, transform 0.3s ease;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
}
.scrollToTop:hover {
  background-color: #1b2c5f;
  transform: scale(1.1);
}
.scrollToTop.active {
  opacity: 1;
  pointer-events: auto;
}