/*----- 施設紹介 -----*/
/* 施設紹介 大枠 */


/*----- 施設詳細 -----*/
/* 施設説明 大枠 */
#facility-datail {
  position: relative;
  left: 50px;
  background-color: rgba(254,254,254,0.8);
  /* border: 1px solid #9d9d9d; */
  padding: 20px;
  width: 500px;
  z-index: 1000;
  border-radius: 20px;
}

/*---- 施設詳細 上部 ----*/
.datail-top {
  display: flex;
}

/* 見出し 施設紹介 */
.datail-top h3 {
  font-family: "genJyuuGothicX-Bold";
  font-size: 2.2rem;
  margin-left: 2.8rem;
  letter-spacing: 0.5rem; /* 行間設定 */
}


.datail-top p {
  font-size: 1.4rem;
  font-weight: bold;
  color: #15c9ee;
  line-height: 2.6rem;
  margin-left: 2.8rem;
}

/*---- 施設詳細 真ん中 ----*/
/* ボタンと詳細画像 */
.datail-center {
  width: 100%;
  height: 190px; /* 詳細画像の高さ */
  display: flex;
  margin-top: 2.6rem;
}

/* ボタン */
.datail-center .btn {
  display: flex;
  justify-content: space-around;
  text-decoration: none;
  font-family: "genJyuuGothicX-Bold";
  font-size: 1.2rem;
  width: 260px;
  height: 48px;
  /* position: relative; */
  line-height: 2.4rem;
  color: #fefefe;
  background-color: #15c9ee;
  border-radius: 25px;
  /* transition: initial; */
}

/* buttonタグのOSに基づくプラットフォーム固有のスタイル上書き */
/* 親のスタイルを継承 */
.datail-center .btn button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: "genJyuuGothicX-Bold";
  font-size: 1.2rem;
  border: none;
  color: inherit;
  background-color: #15c9ee;
  cursor: pointer;
}

/* ＜ 前へ */
.datail-center .btn button:first-of-type {
  margin-left: 0.8rem;
}

/* 次へ ＞ */
.datail-center .btn button:last-of-type {
  margin-right: 0.8rem;
}

/* ★いったん保留 */
/* .datail-center .btn a::before {
  content: '';
  position: absolute;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 25px;
  margin: auto;
  width: 146px;
  height: 30px;
  color: #15c9ee;
  background: #c1f1fb;
  transform: scale(0);
  transition: 0.35s ease-in-out all;
} */

/* ●/●(1/7)の文字間設定 */
.datail-center .btn p {
  letter-spacing: 0.5rem;
}

/* 施設詳細画像の枠 */
.datail-center .datail-img-box {
  width:  250px;
  height: 190px;
  margin-left: 2.8rem;
}

/* 施設詳細画像 */
#datail-img {
  width: 100%;
  border-radius: 3px 10px 3px 3px;
  border: 2px solid #777777;
  position: relative; /* z-indexのため設定 */
  z-index: 20;
}

/*---- 施設詳細 下部 ----*/
/* 施設詳細 下部 枠 */
.datail-bottom {
  width: 100%;
  height: 191px;
  position: relative;
}

#facility-inner {
  width: 420px;
  height: 100%;
  position: absolute;
  top: -4rem;
  left: 0;
  z-index: 10;
  border: 2px solid #0fb3d5;
  border-radius: 5px 5px 5px 20px;
  background-color: rgba(254,254,254,0.7)
}

/* 施設 名称  */
#facility-datail-h {
  font-family: "genJyuuGothicX-Bold";
  font-size: 1.8rem;
  margin: 2.5rem auto 1rem 3rem;
}

/* 施設 紹介文 */
#facility-datail-p {
  width: 85%;
  /* height: 50%; */
  font-size: 1.4rem;
  line-height: 2.5rem;
  position: absolute;
  top: 4.5rem;
  left: 3rem;
}

/*---- いりふねおんせんくん ----*/
/* いりふねおんせんくん 枠 */
.yakusou {
  width: 100px;
  height: 100px;
  margin: 0;
  position: relative;
  top: 8rem;
  right: 0;
  overflow: hidden;
  cursor: pointer;
  z-index: 1100;
  margin-left: 400px;
}

/* 薬草の時だけいりふねおんせんくんが出現 */
/*一旦解除します
.hidden {
  display: none;
}
*/

/* いりふねおんせんくん 薬草 共通設定 */
.yakusou img {
  /* border: 2px solid #0fb3d5; */
  border-radius: 50%;
  
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}

/* ホバーしたら画像が変わる */
.yakusou:hover #yakusou_2 {
  -webkit-transform: translate(-50%, -50%) scale(1.15) !important;
    transform: translate(-50%, -50%) scale(1.15) !important;
  opacity: 0;
}

.on {
  transform: scale(1.5, 1.5) /* translate(80px, 80px) */;
}

.off {
  transform: scale(1.0, 1.0) /* translate(0px, 0px) */;
}

.cls-1 {
  fill: rgba(0,0,0,0);  /* fill: none; の代わり noneはjsが効かないため */
  stroke:#000;
  stroke-opacity: 0.5; /* ★確認用 最後透明 */
  stroke-miterlimit:10;
}





/* 銭湯マップ改変 */

#img-map-wrapper{
  margin-top: -550px;
  width:1000px;
  height:809px;
  padding:20px 40px;
  background-image: url("../img/about/introspection.png");
  background-repeat: no-repeat;
}

/* 銭湯マップ改変(レスポンシブ用) */
.img-map-wrapper{
  width:80%;
  height:400px;
  padding:20px 40px;
  background-image: url("../img/about/introspection.png");
  background-size:contain;
  background-repeat: no-repeat;
  display: none;
}

/* ズームイン、ズームアウト用Class */
.zoomIn{
  transform: scale(2);
  transition: 1s;
}
.zoomOut{
  transform: scale(1);
  transition: 1s;
}

/* 銭湯パース図移動用Class */
.move0{
  transition: 1s;
  background-position: 0 0;
}
.move1{
  transition: 1s;
  background-position: -50px -400px;
}
.move2{
  transition: 1s;
  background-position: 150px -100px;
}
.move3{
  transition: 1s;
  background-position: -400px 100px;
}
.move4{
  transition: 1s;
  background-position: -200px 0px;
}
.move5{
  transition: 1s;
  background-position: 150px -300px;
}
.move6{
  transition: 1s;
  background-position: -150px 100px;
}
.move7{
  transition: 1s;
  background-position: -50px -100px;
}