/* --- 共通設定：丸いエリアの基本 --- */
.hover-container {
  position: relative;
  display: inline-block;
}

.base-img {
  max-width: 100%;
  height: auto;
}

.target-area {
  position: absolute;
  border-radius: 50%; /* ここで丸くする */
  cursor: pointer;
  /* 調整用：位置を確認したいときは下のコメントアウトを外すと赤枠が出ます */
  /*background: rgba(200, 200, 200, 0.5);*/
}

.hover-img {
/* 画像を丸の中心に配置したい、あるいは少しはみ出させたい場合などは
     ここで position: absolute 等を使って微調整できます 
  */
  width: 100%;  /* 反応エリアより大きく表示したい場合などは調整 */
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 画像の真ん中を丸の中心に合わせる */
  
  pointer-events: none; /* 画像自体がマウスに反応してガタつくのを防ぐ */
  opacity: 0;
  transition: opacity 0.3s;
}

.target-area:hover .hover-img {
  opacity: 1;
}

/* --- 個別の位置設定 --- */

.pos-p1  {  top:  1.2%; left:  0.0%;  width: 19.0%;  height: 17.4%; }
.pos-p2  {  top:  1.2%; left: 20.3%;  width: 19.0%;  height: 17.4%; }
.pos-p3  {  top:  1.2%; left: 40.6%;  width: 19.0%;  height: 17.4%; }
.pos-p4  {  top:  1.2%; left: 60.9%;  width: 19.0%;  height: 17.4%; }
.pos-p5  {  top:  1.2%; left: 81.2%;  width: 19.0%;  height: 17.4%; }

.pos-p6  {  top: 17.3%; left: 10.1%;  width: 19.0%;  height: 17.4%; }
.pos-p7  {  top: 17.3%; left: 30.6%;  width: 19.0%;  height: 17.4%; }
.pos-p8  {  top: 17.3%; left: 50.7%;  width: 19.0%;  height: 17.4%; }
.pos-p9  {  top: 17.3%; left: 71.1%;  width: 19.0%;  height: 17.4%; }

.pos-p10 {  top: 33.4%; left:  0.0%;  width: 19.0%;  height: 17.4%; }
.pos-p11 {  top: 33.4%; left: 20.3%;  width: 19.0%;  height: 17.4%; }
.pos-p12 {  top: 33.4%; left: 40.6%;  width: 19.0%;  height: 17.4%; }
.pos-p13 {  top: 33.4%; left: 60.9%;  width: 19.0%;  height: 17.4%; }
.pos-p14 {  top: 33.4%; left: 81.2%;  width: 19.0%;  height: 17.4%; }

.pos-p15 {  top: 49.4%; left: 10.1%;  width: 19.0%;  height: 17.4%; }
.pos-p16 {  top: 49.4%; left: 30.6%;  width: 19.0%;  height: 17.4%; }
.pos-p17 {  top: 49.4%; left: 50.7%;  width: 19.0%;  height: 17.4%; }
.pos-p18 {  top: 49.4%; left: 71.1%;  width: 19.0%;  height: 17.4%; }

.pos-p19 {  top: 65.4%; left:  0.0%;  width: 19.0%;  height: 17.4%; }
.pos-p20 {  top: 65.4%; left: 20.3%;  width: 19.0%;  height: 17.4%; }
.pos-p21 {  top: 65.4%; left: 40.6%;  width: 19.0%;  height: 17.4%; }
.pos-p22 {  top: 65.4%; left: 60.9%;  width: 19.0%;  height: 17.4%; }
.pos-p23 {  top: 65.4%; left: 81.2%;  width: 19.0%;  height: 17.4%; }

.pos-p24 {  top: 81.5%; left: 10.1%;  width: 19.0%;  height: 17.4%; }
.pos-p25 {  top: 81.5%; left: 30.6%;  width: 19.0%;  height: 17.4%; }
.pos-p26 {  top: 81.5%; left: 50.7%;  width: 19.0%;  height: 17.4%; }
.pos-p27 {  top: 81.5%; left: 71.1%;  width: 19.0%;  height: 17.4%; }


.pos-s1 {  top:  2.3%; left: 0.0%;   width: 48.5%;  height: 33.0%; }
.pos-s2 {  top:  2.3%; left: 52.0%;  width: 48.0%;  height: 33.0%; }
.pos-s3 {  top: 33.2%; left: 26.3%;  width: 48.0%;  height: 33.0%; }
.pos-s4 {  top: 64.0%; left: 0.0%;   width: 48.0%;  height: 33.0%; }
.pos-s5 {  top: 64.0%; left: 52.0%;  width: 48.0%;  height: 33.0%; }



/* モーダル背景（画面全体を覆う黒い透過） */
.mc-modal {
  display: none; /* 最初は隠す */
  position: fixed;
  z-index: 100;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /*background-color: rgba(0,0,0,0.7);*/ 
  overflow-y: auto;
}

/* モーダルの中身（白いボックス） */
.mc-modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  width: 60%;
  border-radius: 5px;
  position: relative;

  /* 影の指定: 水平方向, 垂直方向, ぼかし, 広がり, 色 */
  /*box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.3);*/
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);

}

/* 閉じるボタン */
.mc-close-btn {
  position: relative;
  top: 0px; 
  right: 0px;
  font-size: 30px;
  cursor: pointer;
  width: 60px;
  height: 30px;
  border: 4px solid #DDD;
  background-color: #EEE;
  
}

/* JSでこのクラスを付与して表示させる */
.mc-is-visible {
  display: block;
}