@charset "utf-8";

/*  ヘッダー common.css */
/*  カテゴリー・リンク common.css */


/*  メインコンテンツ */
/*  ページタイトル page_title h3 は coomon.css */

/*  */
p.text_box{
  width:;
  margin: 5px auto;
  padding: 30px 60px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.8;
  background-color: #cee9d2;
}
section{
  width: 100%;
  margin: -5px 0 0px 0;
}

/* イラスト＆リンク */
section.illust_map{
  position: relative;
  border-bottom: solid 40px gray;
  height: 500px;
}

/* 筑池　*/
.tsukuike{
  position: absolute;
  top: 350px;
  left: 85%;
}
.tsukuike a img{
  width: 100%;
  display: block;
  transition: all 0.6s ease 0s;
}
.tsukuike a img:hover{
  opacity: 1;
  cursor: pointer;
  transform: scale(1.2,1.2);
}
/* 田んぼ　*/
.tambo{
  position: absolute;
  top: 210px;
  left: 75%;
  overflow: ;
}
.tambo a img{
  width: 80%;
  height: ;
  display: block;
  transition: all 0.6s ease 0s;
}
.tambo a img:hover{
  cursor: pointer;
  transform: scale(1.2,1.2);
}
/* 水路　リンクとホバーなし　*/
.suiro{
  position: absolute;
  top: 40px;
  left: 10%;
  overflow: hidden;
}
.suiro img{
  width: 80%;
}
/* 畑　*/
.hatake{
  position: absolute;
  top: 120px;
  left: 30%;
  overflow: ;
  cursor: pointer;
}
.hatake img{
  width: 50%;
  height: ;
  transform: scale(1);
  transition: .3s ease-in-out;
}
.hatake:hover img{
  transform: scale(1.1);
}
/* コナルの広場　*/
.konaru{
  position: absolute;
  top: 140px;
  left: 47%;
  overflow: ;
  cursor: pointer;
}
.konaru img{
  width: 85%;
  height: ;
  transform: scale(1);
  transition: .3s ease-in-out;
}
.konaru:hover img{
  transform: scale(1.1);
}
/* 雑木林　*/
.zokibayashi{
  position: absolute;
  top: 20px;
  left: 75%;
  cursor: pointer;
}
.zokibayashi img{
  width: 80%;
  height: ;
  transform: scale(1);
  transition: .3s ease-in-out;
}
.zokibayashi:hover img{
  transform: scale(1.1);
}
/* 梅林　*/
.bairin{
  position: absolute;
  top: 280px;
  left: 30px;
  cursor: pointer;
}
.bairin img{
  width: 65%;
  height: ;
  transform: scale(1);
  transition: .3s ease-in-out;
}
.bairin:hover img{
  transform: scale(1.1);
}
/* とんぼ池　*/
.tomboike{
  position: absolute;
  top: 0px;
  left: 10px;
  cursor: pointer;
}
.tomboike img{
  width: 60%;
  height: ;
  transform: scale(1);
  transition: .3s ease-in-out;
}
.tomboike:hover img{
  transform: scale(1.1);
}
/* 里山のいえ　*/
.satoyamanoie{
  position: absolute;
  top: 250px;
  left: 17%;
  cursor: pointer;
}
.satoyamanoie img{
  width: 53%;
  height: ;
  transform: scale(1);
  transition: .3s ease-in-out;
}
.satoyamanoie:hover img{
  transform: scale(1.1);
}
/* 炭焼き小屋　*/
.sumiyakigoya{
  position: absolute;
  top: 20px;
  left: 55%;
  cursor: pointer;
}
.sumiyakigoya img{
  width: 68%;
  height: ;
  transform: scale(1);
  transition: .3s ease-in-out;
}
.sumiyakigoya:hover img{
  transform: scale(1.1);
}
/* 水車小屋　*/
.suishagoya{
  position: absolute;
  top: 100px;
  left: 7%;
  cursor: pointer;
}
.suishagoya img{
  width: 68%;
  height: ;
  transform: scale(1);
  transition: .3s ease-in-out;
}
.suishagoya:hover img{
  transform: scale(1.05);
}
/* 焼き窯　*/
.yakigama{
  position: absolute;
  top: 350px;
  left: 38%;
  cursor: pointer;
}
.yakigama img{
  width: 60%;
  height: ;
  transform: scale(1);
  transition: .3s ease-in-out;
}
.yakigama:hover img{
  transform: scale(1.05);
}

/* イラスト・マップの場所名リンクは表示しない */
ul.illust_map{
  display: none;
}

/* 写真＆説明  */
.each{
　width: 100%;
  font-weight: bold;
}
.yokonarabi{
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #fff;
}
.yokonarabi h4{
  width: 30%;
  margin: 0px 0 0 0px;
  padding: 50px 30px;
  background-color: #000;
  font-size: 26px;
  color: #fff;
  text-align: ;
  line-height: 1.8;
}
.yokonarabi img{
  width: 90%;
}
.yokonarabi p{
  width: 70%;
  padding: 30px 50px;
  background-color: ;
  font-size: 19px;
  color: #000;
  line-height: 1.7;
}

/* イラスト・マップへもどる*/
.return_to_illust-map{
  padding: 13px 40px;
  background-color: gray;
  font-size: 17px;
  text-align: right;
}
.return_to_illust-map a{
  color: #fff;
}

/* 施設・エリア
.area h3{
  font-family: "メイリオ", "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 1em;
  font-weight: bold;
  color: #202020;
  margin: 30px 100px ;
}
#map_box{
  width: 850px;
  height: 590px;
  background-image: url(../images/map.png),
                    url(../images/mount.png);
  background-repeat: no-repeat;
  background-position: 100px 30px,
                       510px 0;
}
#little{
  width:;
  font-size: 16px;
  float: right;
  color: #bf664a;
  position: absolute;
  top: 235px;
  left: 300px;
}
#sinrin{
  position: absolute;
  top: 295px;
  left: 658px;
}
#sinrin_t{
  position: absolute;
  top: 275px;
  left: 570px;
}
#sumi{
  position: absolute;
  top: 290px;
  left: 500px;
}
#sumi_t{
  position: absolute;
  top: 385px;
  left: 550px;
}
#konaru{
  position: absolute;
  top: 360px;
  left: 380px;
}
#konaru_t{
  position: absolute;
  top: 445px;
  left: 420px;
}
#tanbo{
  position: absolute;
  top: 440px;
  left: 610px;
}
#tanbo_t{
  position: absolute;
  top: 420px;
  left: 700px;
}
#suisya{
  position: absolute;
  top: 325px;
  left: 50px;
}
#suisya_t{
  position: absolute;
  top: 420px;
  left: 90px;
}
#honbu{
  position: absolute;
  top: 460px;
  left: 100px;
}
#honbu_t{
  position: absolute;
  top: 565px;
  left: 110px;
}
#kamado{
  position: absolute;
  top: 530px;
  left: 370px;
}
#kamado_t{
  position: absolute;
  top: 590px;
  left: 340px;
}

*/


/* マップ詳細表示 説明画面
.modal-overlay {
  z-index:2;
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  background-color:rgba(0,0,0,.5)
}
a.modal-open:hover {
  cursor:pointer
}
.modal-content {
  position:fixed;
  display:none;
  z-index:3;
  margin:10px;
  padding:15px;
  border-radius:10px;
  background:#fff
}
.modal-content img {
  width: 570px;
  max-height:75vh;
  margin-bottom: 10px;
}
h5 {
  font-family: "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 1.1em;
  margin-bottom:0.5em;
  text-align: center;
  letter-spacing: 0.1em;
}
.modal-content p {
  max-width:565px;
  text-align:left
}
a.modal-close {
    position:absolute;
    top:0;
    right:10px;
    color:#b29c33;
    font-size:35px;
    line-height:1;
    text-decoration:none
  }
a.modal-close:hover {
  cursor:pointer
}