@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
@import url("base.css");
@import url("header.css");
@import url("footer-2.css");

:root {
  --primaryColor: #e00201;
  --mainWhite: #fff;
  --mainBlack: #222;
  --mainGrey: #fff;
  --mainSpacing: 0.1rem;
  --mainTransition: all 0.3s linear;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  color: var(--mainBlack);
  background: var(--mainGrey);
  font-family: "Lato", sans-serif;
}

.section-title h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 5px;
  text-transform: capitalize;
  letter-spacing: var(--mainSpacing);

  background-image: url("images/holo.png");
  background-size: 100px 46px; /* 画像サイズ */
  background-repeat: no-repeat; /* 繰り返し表示オフ */
  padding: 0px 0px 0px 102px; /* 画像と重ならないように文字列を右に移動 */
}

.section-title span {
  display: block;
  font-size: 1rem;
  margin: 5px auto 15px;
  text-transform: capitalize;
  letter-spacing: var(--mainSpacing);
}

.section-title p {
  text-align: center;
  font-size: 1rem;
}

.mapContainer {
  width: calc(100% - 20px);

  margin: 10px auto 80px;
}

.mapComponent {
  position: relative;
  width: 100%;
  margin: 20px auto 50px;
  padding-top: 65%;
}

#map_canvas {
  position: absolute;
  top: 0;
  margin: 20px auto 10px;
  width: 100%;
  height: 100%;
  box-shadow: 10px 10px 10px rgba(190, 190, 190, 0.4);
  /* add for mobile click event */
  cursor:pointer;

}

#mapList {
  margin: 20px auto;
  padding: 0;
  font-size: 0.9em;
  width: 95%;
}

#mapList li {
  border: 1px solid #ccc;
  box-shadow: 10px 10px 10px rgba(190, 190, 190, 0.4);
  cursor: pointer;
  list-style-type: none;
  padding: 10px 10px;
  margin: 15px 0;
  display: flex;
}

#mapList li:hover {
  transform: scale(1.02, 1.02);
  transition: var(--mainTransition);
}

#mapList li img {
  height:53px;
  width: 53px;
  margin: 0 10px 0 0;
}

.clicked {
  background-color: #ccc;
}

.ib{
  display: border-radius;
  border: solid 3px #39718A;
 background-color: #def8fc;
 color: #0000ff;
}

#ex {
        margin: auto;
   border-spacing: 0px;
   box-shadow: 10px 10px 10px rgba(190, 190, 190, 0.4);
}


footer {
  color: #ffffff;
  background: #00A9C5;
  text-align: center;
}