.contentHeader .pageTitle{
	background-image: url('../images/work/head-text-work.png');
}

.readText{
  padding-top: 100px;
  padding-bottom: 50px;
	text-align: center;;
  font-size: 25px;
  line-height: 180%;
}

.map{
	position: relative;
}

@media screen and (min-width:1280px) {
  .map .copy{
    text-align: center;
    font-size: 40px;
    position: absolute;
    top: 28%;
    left:36%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
}

@media screen and (max-width:1279px) {
  .readText{
    
    font-size: 13px;
  }
  .map .copy{
    text-align: center;
    font-size: 26px;
    margin-bottom: 15px; 
  }
}

.map .mapImage{
	margin-bottom:25px;
}



.mapImagePc{
	background-image : url('../images/work/map-pc.png');
	background-size: contain;
	width: 100%;
	height: 100%;
	aspect-ratio: 1816 / 2136;
}

.pins {
  position: relative;
  width: 100%;
  height: 100%;
}
/* mapにpinをおき、モーダルを開くためのボタンにする
   レスポンシブなので、％で位置指定 */

.pin {
  position: absolute;
  top:20%;
  left:20%;
  cursor: pointer;
  width: 30px;
  height: 30px;
  
  transform: translate(-50%, -100%); 
  transition: transform 0.3s;
  z-index: 10;
}

/* --- 東北 --- */
/* 青エリアへ移動 */
.pin-fukushima { top: 54.5%; left: 69.5%; }

/* --- 甲信越・北陸 --- */
/* 全体的に上へ引き上げ */
.pin-niigata   { top: 54.5%; left: 60.5%; } 
.pin-nagano    { top: 62.0%; left: 55.5%; } 
.pin-ishikawa  { top: 58.5%; left: 47.0%; } 
.pin-fukui     { top: 63.5%; left: 44.5%; }

/* --- 東海 --- */
/* 太平洋から陸地へ */
.pin-gifu      { top: 64.5%; left: 50.0%; }
.pin-aichi     { top: 69.5%; left: 50.5%; }
.pin-shizuoka  { top: 69.5%; left: 56.5%; }

/* --- 関東 --- */
/* 海から引き上げて東京湾周辺へ */
.pin-saitama   { top: 64.0%; left: 63.5%; }
.pin-tokyo     { top: 65.0%; left: 66.0%; }
.pin-chiba     { top: 66.5%; left: 70.0%; }
.pin-kanagawa  { top: 67.5%; left: 64.0%; }

/* --- 関西 --- */
/* 大阪湾・紀伊水道から内陸へ */
.pin-shiga     { top: 68.5%; left: 43.5%; }
.pin-mie       { top: 73.0%; left: 45.5%; }
.pin-kyoto     { top: 68.0%; left: 39.5%; }
.pin-osaka     { top: 71.5%; left: 39.5%; }
.pin-hyogo     { top: 70.5%; left: 34.5%; }

/* --- 中国 --- */
/* 瀬戸内海から引き上げ */
.pin-shimane   { top: 69.0%; left: 18.5%; } 
.pin-hiroshima { top: 72.0%; left: 20.5%; }

/* --- 九州 --- */
/* 日向灘から大分県へ */
.pin-oita      { top: 81.0%; left: 12.5%; }





/* リスト全体のレイアウト（2列表示などのベース） */
.map ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* ボタン間の余白 */
}

.map ul li {
  /* 必要に応じて幅を指定（例: スマホで2列なら50%からgap分引くなど） */
  /* width: calc(50% - 5px); */ 
  text-align: center;
  width: calc(50% - 5px);
}


/* aタグの共通スタイル（ボタン化） */
.map  ul li a {
  display: block;          /* ブロック要素にして全体をクリック可能に */
  text-decoration: none;   /* 下線を消す */
  color: #fff;             /* 文字色：白 */
  padding: 12px 10px;      /* 内側の余白 */
  border-radius: 8px;      /* 角丸 */
  font-weight: bold;
  transition: opacity 0.3s; /* ホバー時のふわっとした動き */
}

/* ホバー時の効果（お好みで） */
.map  ul li a:hover {
  opacity: 0.8;
}

/* 各色の定義 */
.pref-blue       { background-color: #4A90E2; }
.pref-green      { background-color: #66A57D; }
.pref-lightgreen { background-color: #CDDC60; }
.pref-yellow     { background-color: #FFD54F; }
.pref-pink       { background-color: #EC87A8; }
.pref-orange     { background-color: #F09C77; }


.modal-title{
  color: #0D1E7E;
  font-size: 45px;
}
.modal-header{
  border-bottom: none;
}

.area-content{
  height: 60vh;
  overflow: scroll;
}

.btn-return{
  background-color: #0D1E7E;
  color: white;
  border-radius: 20px;
  padding: 10px 30px;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.3s;
}
.btn-return:hover{
  background-color: #67768b;
  color: white;
}

@media screen and (max-width:768px) {
  
  .modal-title{
    color: #0D1E7E;
    font-size: 25px;
  }
}



/* スライダーを格納するコンテナ */
.simple-slider-container {
    position: relative;
    overflow: hidden; /* 画像のサイズがコンテナからはみ出さないように */
    max-width: 100%;
}

/* 各スライドアイテム（元のwp-block-imageなど） */
.simple-slider-container .slide-item {
    position: absolute; /* すべて重ねる */
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0; /* 最初は非表示 */
    transition: opacity 1s ease-in-out; /* フェードアニメーション */
}

/* 現在表示中のスライド */
.simple-slider-container .slide-item.active {
    opacity: 1; /* 表示 */
    position: relative; /* 高さ確保のため、active要素のみrelativeに戻す */
}