/* ===== MAP BLOCK ===== */
.oq-mapblock{
  position: relative;
  width: 85%;
  margin: 90px auto 60px;
}

@media (max-width: 767px){
  .oq-mapblock{
    width: 90%;
    margin: 64px auto 48px;
  }
}

/* 地図本体 */
.oq-mapblock__map{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ===== 背景 ===== */
.oq-mapblock__bg{
  position: relative;
  width: 100%;
}

.oq-mapblock__bg img{
  width: 100%;
  height: auto;
  display: block;
}

/* ===== ハイライト ===== */
.oq-mapblock__hl{
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  transition: opacity .18s ease, filter .18s ease;
  filter:
    drop-shadow(0 0 0 #fff)
    drop-shadow(0 0 3px rgba(200,130,0,1))
}

.oq-mapblock__hl img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* クリック領域（吹き出し） */
.oq-mapblock__spot{
  position: absolute;
  left: 62%;
  top: 28%;
  width: 18%;
  height: 20%;
  background: transparent;
  border: 0;
  padding: 0;
  z-index: 3;
}

/* mapに付いた状態クラスで該当だけ表示 */
.oq-mapblock__map.is-hl-spain    .oq-mapblock__hl--spain{opacity:1}
.oq-mapblock__map.is-hl-italy    .oq-mapblock__hl--italy{opacity:1}
.oq-mapblock__map.is-hl-croatia  .oq-mapblock__hl--croatia{opacity:1}
.oq-mapblock__map.is-hl-portugal .oq-mapblock__hl--portugal{opacity:1}
.oq-mapblock__map.is-hl-greece   .oq-mapblock__hl--greece{opacity:1}
.oq-mapblock__map.is-hl-chile    .oq-mapblock__hl--chile{opacity:1}


/* デフォルト：エリア hover で反応（将来用） */
@media (hover:hover){
  .oq-mapblock__spot:hover ~ .oq-mapblock__hl{
    opacity: 1;
  }
}




/* スペイン位置（PC） */
.oq-mapblock__spot--spain{
  left: 1.5%;
  top:  16.5%;
  width: 10.4%;
  height: 11.5%;
}


/* 番号の置き場（全体） */
.oq-mapblock__spot--spain .oq-mapblock__nums{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14%;
  position: relative;
  z-index: 0; 
}
/* 当たり判定拡張（透明） */
.oq-mapblock__nums::before{
  content:"";
  position:absolute;
  inset:-4vw -2vw -2vw -2vw;         /* ←上下左右の拡張量 */
  background:transparent;
  z-index: 0;           /* ★背面に固定 */
}

/* nums内の“実コンテンツ”を前面へ（番号クリックを守る） */
.oq-mapblock__nums > *{
  position: relative;
  z-index: 1;           /* ★ボタン/画像は必ず前 */
}


/* 上段：3つ（3列グリッド） */
.oq-mapblock__row--top{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 8%;
  align-items: center;
  justify-items: start;
}

/* 下段：2つ（同じく3列グリッドにして左を揃える） */
.oq-mapblock__row--bottom{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 8%;
  align-items: center;
  justify-items: start;
}

/* 下段の「3列目」を空ける（2個だけ置くためのダミー） */
.oq-mapblock__row--bottom::after{
  content: "";
}

/* 番号ボタン：ここだけクリック可能 */
.oq-numbtn{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

/* 番号サイズ（PC） */
.oq-numbtn{
  width: 100%;
}

/* 画像 */
.oq-num{
  width: 100%;
  height: auto;
  display: block;
}

/* 「番号画像が地図比率と合わない」対策*/
.oq-numbtn .oq-num{
  object-fit: contain;
}

/* 各グリッドセル内で番号の実サイズを調整 */
.oq-mapblock__row--top .oq-numbtn,
.oq-mapblock__row--bottom .oq-numbtn{
  width: 100%;   /* ★調整ポイント：大きさ */
}

@media (max-width: 767px){

  
  /* 当たり判定拡張（透明） */
  .oq-mapblock__nums::before{
    inset:-8vw -2vw -2vw -2vw;         /* ←上下左右の拡張量 */
  }

  .oq-mapblock__hl{
    filter:
    drop-shadow(0 0 0 #c88200)
    drop-shadow(0 0 2px rgba(200,130,0,.98))
    drop-shadow(0 0 2px rgba(255,210,140,.75));
  }




  /* スペイン位置（SP） */
  .oq-mapblock__spot--spain{
    left: 3%;
    top:  33.5%;
    width: 44%;
    height: 5.5%;
  }

  /* SPは「全ボタンを横一列」 */
  .oq-mapblock__spot--spain .oq-mapblock__nums{
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  /* row概念は潰す（中のボタンだけが親のflexに直列） */
  .oq-mapblock__row--top,
  .oq-mapblock__row--bottom{
    display: contents;
  }

  /* 5個が収まるように「1個あたりの幅」を指定 */
  .oq-numbtn{
    width: 18%;
    padding:0 1.5%;
    margin: 0;
  }
}





/* イタリア（PC） */
.oq-mapblock__spot--italy{
    left: 16.2%;
    top:  7.5%;
    width: 18%;
    height: 10.5%;
}

/* 番号の置き場（全体） */
.oq-mapblock__spot--italy .oq-mapblock__nums{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14%;
}

/* 上段：5つ（5列グリッド） */
.oq-mapblock__spot--italy .oq-mapblock__row--top{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 4.78%;
  align-items: center;
  justify-items: start;
}

/* 下段：4つ（同じく5列グリッドにして左を揃える） */
.oq-mapblock__spot--italy .oq-mapblock__row--bottom{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 6%;
  align-items: center;
  justify-items: start; /* 上段と左が揃う */
}

/* 下段の「5列目」を空ける（4個だけ置くためのダミー） */
.oq-mapblock__spot--italy .oq-mapblock__row--bottom::after{
  content: "";
}

/* PCの番号サイズ（必要ならここを触る：SPAINと同じ“調整点”） */
.oq-mapblock__spot--italy .oq-mapblock__row--top .oq-numbtn,
.oq-mapblock__spot--italy .oq-mapblock__row--bottom .oq-numbtn{
  width: 100%;
}


@media (max-width: 767px){

  /* イタリア位置（SP */
  .oq-mapblock__spot--italy{
    left: 3%;
    top:  19%;
    width: 78%;
    height: 5%;
  }

  .oq-mapblock__spot--italy .oq-mapblock__nums{
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  /* row概念は潰す*/
  .oq-mapblock__spot--italy .oq-mapblock__row--top,
  .oq-mapblock__spot--italy .oq-mapblock__row--bottom{
    display: contents;
  }

  /* 9個が収まるように上書き*/
  .oq-mapblock__spot--italy .oq-numbtn{
    width: 8.3%;
    padding: 0 0.76%;
    margin: 0;
  }
}




/* クロアチア（PC）*/
.oq-mapblock__spot--croatia{
  left: 39.0%;
  top:  15%;
  width: 9.3%;
  height: 5.5%;
}

/* 12が1個だけなので：中央寄せ（2段グリッド不要） */
.oq-mapblock__spot--croatia .oq-mapblock__nums{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  box-sizing: border-box;
}

/* 1個だけのサイズ調整 */
.oq-mapblock__spot--croatia .oq-numbtn{
  width: 28.2%;
  padding: 0;
}


@media (max-width: 767px){

  /* クロアチア位置（SP） */
  .oq-mapblock__spot--croatia{
    left: 72%;
    top:  33.5%;
    width: 25%;
    height: 5.5%;
  }

  .oq-mapblock__spot--croatia .oq-numbtn{
    width: 29.95%;
  }
}






/* ポルトガル（PC） */
.oq-mapblock__spot--portugal{
  left: 1.5%;
  top:auto;
  bottom:  15.2%;
  width: 9%;
  height: 5.5%;
}


/* 番号の置き場（全体） */
.oq-mapblock__spot--portugal .oq-mapblock__nums{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10%;
}

/* 2個用サイズ（PC） */
.oq-mapblock__spot--portugal .oq-numbtn{
  width: 29.13%;
  padding: 0;
  margin: 0;
}

@media (max-width: 767px){

  /* ポルトガル（SP） */
  .oq-mapblock__spot--portugal{
    left: 3%;
    top:  auto;
    bottom:16.4%;
    width: 25%;
    height: 5%;
  }

  .oq-mapblock__spot--portugal .oq-mapblock__nums{
    justify-content: center;
    gap: 10%;
  }

  .oq-mapblock__spot--portugal .oq-numbtn{
    width: 29.94%;
  }
}





/* ギリシャ（PC） */
.oq-mapblock__spot--greece{
  left: 24.5%;
  top:auto;
  bottom:  8%;
  width: 11%;
  height: 5.5%;
}

/* 番号の置き場（全体）：中央寄せで3つ並べる */
.oq-mapblock__spot--greece .oq-mapblock__nums{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8%;
}

/* 3個用サイズ（PC）*/
.oq-mapblock__spot--greece .oq-numbtn{
  width: 23.84%;
  padding: 0;
  margin: 0;
}

@media (max-width: 767px){

  /* ギリシャ（SP） */
  .oq-mapblock__spot--greece{
    left: 38%;
    top:  auto;
    bottom:16.4%;
    width: 27%;
    height: 5%;
  }

  .oq-mapblock__spot--greece .oq-mapblock__nums{
    justify-content: center;
    gap: 7%;
  }

  .oq-mapblock__spot--greece .oq-numbtn{
    width: 27.72%;
  }
}




/* チリ (PC) */
.oq-mapblock__spot--chile{
  left: auto;
  right:1%;
  top:  49.5%;
  width: 18%;
  height: 10.5%;
}

/* 番号の置き場（全体） */
.oq-mapblock__spot--chile .oq-mapblock__nums{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14%;
}

/* 上段：5個 */
.oq-mapblock__spot--chile .oq-mapblock__row--top{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 4.77%;
  align-items: center;
  justify-items: start;
}

/* 下段：4個（5列目は空ける） */
.oq-mapblock__spot--chile .oq-mapblock__row--bottom{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 6%;
  align-items: center;
  justify-items: start;
}

.oq-mapblock__spot--chile .oq-mapblock__row--bottom::after{
  content: "";
}

/* PC番号サイズ */
.oq-mapblock__spot--chile .oq-mapblock__row--top .oq-numbtn,
.oq-mapblock__spot--chile .oq-mapblock__row--bottom .oq-numbtn{
  width: 100%;
}

@media (max-width: 767px){

  /* チリ（SP）*/
  .oq-mapblock__spot--chile{
    left: 19.3%;
    top:  auto;
    bottom: 1.5%;
    width: 78%;
    height: 5%;
  }

  /* SPは横1行 */
  .oq-mapblock__spot--chile .oq-mapblock__nums{
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  /* row概念を潰す */
  .oq-mapblock__spot--chile .oq-mapblock__row--top,
  .oq-mapblock__spot--chile .oq-mapblock__row--bottom{
    display: contents;
  }

  /* 9個用サイズ */
  .oq-mapblock__spot--chile .oq-numbtn{
    width: 8.3%;
    padding: 0 0.76%;
    margin: 0;
  }
}


@media (max-width: 767px){
  .oq-mapblock .oq-modal__scrollbar{
    display: none !important;
  }
}







/* ココカラ */

/* ===== OQ Modal: MAP02 override（HISTORYを複製・背景画像なし）===== */

/* 共通：背景なし（単色） */
.oq-modal--map02 .oq-modal__inner{
  background-color: #dcdcd7;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-clip: padding-box;
  padding: 1px;
  box-sizing: border-box;
}

/* PC */
@media (min-width: 768px){
  .oq-modal--map02 .oq-modal__panel{
    max-width: 1200px !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    --oq-map-maxw: 1200px;
    --oq-map-w: 80vw;
    width:  var(--oq-map-w) !important;

    /* 比率固定 */
    /*
    aspect-ratio: 5 / 3.2 !important;
    --oq-his-maxw: 1200px;
    --oq-his-w: min(80vw, var(--oq-his-maxw), calc(90dvh * 5 / 3.2 ));
    width:  var(--oq-his-w) !important;
    height: calc(var(--oq-his-w) * 3.2  / 5) !important;
    */

  }

.oq-modal--map02 .oq-modal__head{ flex: 0 0 50px; }
.oq-modal--map02 .oq-modal__foot{ flex: 0 0 50px; }

  .oq-modal--map02 .oq-modal__body{
    display: flex;
    align-items: center;
    justify-content: center;

    height: auto; 
    min-height: 0; 
    padding:0;margin:0;
  }
  .oq-modal--map02 .oq-modal__body img{
    transform: translateX(-12px); /* 左へ */
  }
  .oq-modal--map02 .oq-modal__body picture,
  .oq-modal--map02 .oq-modal__body img{
    max-height: 100%;        /* はみ出し防止（でも縮めすぎない） */
  }

  .oq-modal--map02 .oq-modal__scrollbar{
    top: 12%;
    right: 5%;
    bottom: 10%;
  }

  .oq-modal--map02 .oq-modal__body img{
    display: block;
    margin: 0 auto;
    width: 88%;
    max-width: 88%;
    height: auto;
  }
}

/* SP：比率 34:55（HISTORYと同じ） */
@media (max-width: 767px){
  .oq-modal--map02 .oq-modal__panel{
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;


    --oq-map-h: min(88dvh, calc(92vw * 55 / 34));
    height: var(--oq-map-h) !important;
    width:  calc(var(--oq-map-h) * 34 / 55) !important;
  }

  .oq-modal--map02 .oq-modal__body{
    overflow: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    margin-right: 5%;
    padding: 0 0 5%;
  }

  .oq-modal--map02 .oq-modal__head{ flex: 0 0 5%; }
  .oq-modal--map02 .oq-modal__foot{ flex: 0 0 1.7%; }

  .oq-modal--map02 .oq-modal__scrollbar{
    top: 15%;
    right: 4.5%;
    bottom: 8%;
  }

  .oq-modal--map02 .oq-modal__body img{
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    
  }
}

/* dvh 非対応保険（SP） */
@supports not (height: 100dvh){
  @media (max-width: 767px){
    .oq-modal--map02 .oq-modal__panel{
      --oq-map-h: min(88vh, calc(92vw * 55 / 34));
    }
  }
}