@charset "UTF-8";

#head {
  background: #4c5868;
}
.head-box {
  width: 1600px;
  margin: 0 auto;
  padding: 20px 10px;
}
.scroll-detail {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 2% 100px 2%;
}
.back-umi {
  background-image: url(../images/facility/back-umi.jpg);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}
.main-concept {
  margin-bottom: 40px;
  padding-top: 100px;
}
.wave {
  margin-bottom: 40px;
}
.concept-text {
  margin-bottom: 200px;
  line-height: 3em;
}
.facility-content {
  width: 1600px;
  margin: 0 auto 100px auto;
  padding: 0 2%;
}
.image-main {
  width: 100%;
  margin-bottom: 80px;
}
.image-main img {
  width: 100%;
}
.panorama-text {
  min-height: 309px;
  padding-left: 40%;
  background: url(../images/wave.png) left top no-repeat;
}
.facility-detail {
  width: 1600px;
  margin: 0 auto 200px auto;
  padding: 0 2%;
  flex-direction: row-reverse;
}
.facility-title {
  position: relative;
  width: 16%;
  background: url(../images/logomark.png) center bottom no-repeat;
  background-size: 100%;
}
.facility-detail h3 {
  width: 60px;
  margin: 0 auto;
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
}
.facility-detail h3::after {
  width: 0;
  height: 0;
}
h3 span {
  text-combine-upright: all;
  -ms-text-combine-horizontal: all;
}
.image {
  width: 40%;
}
.image img {
  width: 100%;
}
.facility-text {
  width: 40%;
  padding-top: 40px;
}
h4::before {
  content: '';
  width: 2px;
  height: 16px;
  display: inline-block;
  margin-right: 10px;
  background-color: #fff;
}
h4 { color: #fff; }
table { margin-bottom: 0; }
table th, table td { padding: 1em 2em; border: solid 1px #fff; }


@media screen and (max-width:1600px) {
  .head-box {
    width: 100%;
  }
  .facility-content {
    width: 100%;
  }
  .facility-detail {
    width: 100%;
  }
}


@media screen and (max-width:1200px) {
  .panorama-text {
    padding-left: 10%;
  }
  .facility-text {
    width: 80%;
  }
}


@media screen and (max-width:1023px) { /* Tablet */
  .back-umi {
    background-size: auto auto;
  }
}


@media screen and (max-width:959px) { /* SP */
  .bx-controls { display: none; }
  .panorama-text {
    padding-left: 0;
  }
  .facility-title {
    width: 100%;
    margin-bottom: 20px;
  }
  .facility-title {
    background-size: 160px;
  }
  .facility-detail h3 {
    margin-bottom: 80px;
  }
  .image { width: 49%; }
  .facility-text { width: 100%; }
}