@charset "UTF-8";
body {
  font-size: 1.8rem;
}
* + p {
  margin-top: 5px;
}

/* header */
.l-header {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.l-header-inner {
  padding: 8px 0px 8px 28px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.header-logo {
  width: 280px;
  margin-top: 10px;
}
.header-languages {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
}
.header-languages-image {
  width: 20px;
  height: 20px;
}
.header-languages-list {
  display: flex;
}
.header-languages .header-languages-list li {
  margin-left: 14px;
}
.header-languages-list a,
.header-languages-list-sp a {
  color: #ccc;
}
.header-languages-list a.is-active,
.header-languages-list-sp a.is-active {
  color: #141414;
}

/* footer */
.footer-contents {
  padding: 5px 0 42px;
}

/* layout */
.l-content {
  margin: 119.8px auto 0;
  padding: 0 0 68px 0;
}
.l-keyvisual {
  position: relative;
  margin: 0;
  height: calc(100vh - 150px);
  background-image: url(/facilities/images/bg_keyvisual.jpg);
  background-size: cover;
  background-position: left;
  animation: bgLoop 180s linear infinite;
}
@keyframes bgLoop {
    0% { background-position: 0 0;}
  100% { background-position: -5030px 0;}
}
.container-facilities1 {
  min-height: 470px;
  position: relative;
  background-image: url(/facilities/images/bg_01.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 27px;
}
.container-facilities2 {
  min-height: 470px;
  position: relative;
  background-image: url(/facilities/images/bg_02.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 160px;
}
.container-facilities3 {
  min-height: 596px;
  position: relative;
  background-image: url(/facilities/images/bg_03.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 27px;
}

/* title */
.h1title-facilities-area {
  max-width: 1124px;
  margin: auto;
  position: absolute;
  top: 60px;
  left: 13%;
}
.h1title-facilities-facilities {
  text-align: left;
  background-color: unset;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 100px;
  z-index: 10;
  padding: 0;
}
.h1title-facilities-subtitle {
  font-size: 2.3vh;
  background-color: #fff;
  padding: 0.7em 0.6em;
  letter-spacing: -0.04em;
  display: inline-block;
  line-height: 1;
  margin-top: 6px;
  font-weight: bold;
}
.h1title-facilities-subtitle span {
  border-bottom: 2px solid #141414;
}
.h1title-facilities .title {
  font-size: 6.4vh;
  background-color: #fff;
  padding: 12px 20px 12px 14px;
  display: inline-block;
  line-height: 1;
}
.h1title-facilities .title:first-of-type {
  font-size: 6.2vh;
  padding: 15px 20px 22px 7px;
}
.h1title-facilities .title:nth-of-type(2) {
  font-size: 6.4vh;
  padding: 0px 10px 21px 11px;
}
.h2title-facilities {
  font-size: 3.6rem;
  margin: 104px 0 0 0;
  text-align: center;
  letter-spacing: 0.04em;
}
.h2title-facilities2 {
  font-size: 3.6rem;
  margin: 140px 0 0 0;
  text-align: center;
  letter-spacing: 0.04em;
}
.h3title-facilities {
  font-size: 2.4rem;
  margin: 0;
  line-height: 1.5;
}
.container-facilities3 .h3title-facilities span {
  letter-spacing: -0.11em;
}

/* keyvisual */
.keyvisual {
  max-width: 1126px;
  margin: 0 auto;
}

/* scroll */
.scroll {
  position: absolute;
  bottom: 64px;
  left: 44px;
  z-index: 10;
}
.scroll-item {
  font-size: 1.6rem;
  font-weight: bold;
  color: #10af9e;
  position: relative;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  padding-bottom: 37px;
  letter-spacing: 0.1em;
  height: 109px;
}
.scroll-item::before {
  background: #10af9e;
  border-radius: 50%;
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  left: 2px;
  position: absolute;
  bottom: 0;
}
.scroll-item::after {
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  left: 11px;
  bottom: 9px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

/* box */
.keyvisual-box-facilities {
  max-width: 1124px;
  width: 100%;
  margin: 47vh auto 0 auto;
  text-align: right;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.keyvisual-box {
  padding: 25px;
  display: inline-block;
  font-size: 2.0rem;
  font-weight: bold;
  background-color: #fff;
  text-align: left;
}
.box {
  border-radius: 0;
}
.box-facilities {
  width: 400px;
  padding: 31px 40px 40px 40px;
  position: absolute;
  top: 230px;
  left: 320px;
  box-sizing: border-box;
}
.container-facilities2 .box-facilities {
  left: 240px;
}
.container-facilities3 .box-facilities {
  bottom: 0;
}

/* link */
.box-facilities .link-external {
  display: inline-block;
  font-size: 1.8rem;
  background-color: #10af9e;
  border-radius: 100px;
  color: #fff;
  padding: 6px 18px 10px;
  letter-spacing: 0.1em;
  line-height: 1;
  transition: .4s;
}
.box-facilities .link-external:hover {
  background-color: #78d3c0;
}
.box-facilities .link-external::after {
  background-size: 1.3em;
  background-image: url(/facilities/assets/images/icon_link-external-w.svg);
  margin-left: 4px;
  transform: translateY(4px);
}
.box-link-external:hover {
  text-decoration: none;
}
.box-link-external .link-external {
  text-decoration: none;
  margin-top: 20px;
}

.list {
  margin-top: 15px;
}

/* facilities-lang */
.facilities-lang {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 15px;
}
.facilities-lang .facilities-lang__image {
  width: 20px;
  margin-right: 1.0em;
  line-height: 1;
}
.facilities-lang .facilities-lang__list {
  display: flex;
  justify-content: flex-end;
}
.facilities-lang .facilities-lang__list > li {
  margin-left: 1.0em;
  font-size: 1.6rem;
  font-weight: 700;
}
.facilities-lang .facilities-lang__list > li:first-child {
  margin-left: 0;
}
.facilities-lang .facilities-lang__list > li > a {
  color: #ccc;
}
.facilities-lang .facilities-lang__list > li > a:hover {
  color: #fccf00;
  opacity: 1;
}
/* facilities-anchor-navi-box */
.facilities-anchor-navi-box {
  margin-top: 1.2em;
  padding: 1.4em 1.6em;
  border-radius: 13px;
  background-color: #f0f0f0;
}
.facilities-anchor-navi-box + section > .h2title-facilities {
  margin-top: 55px;
}
/* facilities-anchor-navi */
.facilities-anchor-navi .facilities-anchor-navi__list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.facilities-anchor-navi .facilities-anchor-navi__list > li {
  margin-left: 1.6em;
}
.facilities-anchor-navi .facilities-anchor-navi__list > li:first-child {
  margin-left: 0;
}
.facilities-anchor-navi .facilities-anchor-navi__link {
  position: relative;
  display: inline-block;
  padding-left: 1.2em;
  font-weight: 700;
  line-height: 1.5;
  transition: opacity .4s;
}
.facilities-anchor-navi .facilities-anchor-navi__link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-block;
  margin-top: -5px;
  border-top: 10px solid #111111;
  border-right: 7.5px solid transparent;
  border-left: 7.5px solid transparent;
}

@media screen and (max-width: 750px) {
  body, p { 
    font-size: 1.2rem;
  }
  body.is-open {
    height: 100vh;
    overflow: hidden;
  }
  .l-header-inner {
    padding: 8px 15px 0px 15px;
  }
  .header-logo {
    width: 226px;
    margin: 0;
  }
  .header-languages {
    padding: 0;
    margin: 0;
  }
  .header-languages-image {
    width: 20px;
    height: 20px;
    margin-top: -6px;
  }
  .header-languages-list-sp {
    display: none;
    width: 100%;
    text-align: center;
    font-weight: bold;
  }
  .header-languages-list-sp.is-open {
    display: block;
  } 
  .header-languages-list-sp a,
  .header-languages-list-sp .is-active {
    padding: 8px;
    display: block;
    border-top: 1px solid #e5e5e5;
  }
  .header-languages-list-sp .is-active {
    padding: 0;
  }
  .header-languages-list-sp .is-active a {
    border: none;
    color: #141414;
  }
  .header-overlay-facilities {
    display: none;
    height: 100vh;
    width: 100%;
    background-color: #141414;
    opacity: 0.2;
    position: fixed;
  }
  .l-content, .l-container, .keyvisual {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .l-content {
    margin-top: 0 !important;
    padding: 0 0 78px 0;
  }
  .l-container {
    padding: 0 8%;
  }
  .l-keyvisual {
    margin: 86px 0 0;
    background-image: url(/facilities/images/bg_keyvisual_sp.jpg);
    height: calc(100vh - 86px);
    animation: bgLoopSp 75s linear infinite;
  }
  @keyframes bgLoopSp {
      0% { background-position: 0 0;}
    100% { background-position: -2100px 0;}
  }
  .keyvisual-box {
    font-size: 1.2rem;
    bottom: -75px;
    right: 0.5%;
    max-width: 71%;
    padding: 20px 10px 20px 20px;
  }
  .keyvisual-box-facilities {
    margin: 0;
    position: absolute;
    bottom: 0;
  }
  .box-facilities,
  .container-facilities2 .box-facilities {
    left: -8%;
    width: 73vw;
    padding: 20px;
  }
  .box-facilities {
    top: auto;
    bottom: 222px;
    left: auto;
    right: -8%;
  }
  .container-facilities2 .box-facilities {
    bottom: 200px;
  }
  .container-facilities3 .box-facilities {
    bottom: 180px;
  }
  .h1title-facilities-area {
    position: static;
  }
  .h1title-facilities .title:first-of-type,
  .h1title-facilities .title:nth-of-type(2) {
    padding: 10px 16px;
    font-size: 3.2rem;
    letter-spacing: -0.07em;
    transform: translateY(-16px);
  }
  .h1title-facilities .title:nth-of-type(2) {
    padding: 0px 16px 11px 16px;
  }
  .h1title-facilities-subtitle {
    font-size: 1.1rem;
    margin: 0;
    padding: 9px 16px;
    transform: translateY(-16px);
  }
  .h2title-facilities {
    font-size: 2.4rem;
    margin-top: 7px;
  }
  .h2title-facilities2 {
    font-size: 2.4rem;
    margin-top: 7px;
  }
  .h3title-facilities {
    font-size: 1.6rem;
  }

  .scroll {
    top: 250px;
    bottom: auto;
    left: 5%;
  }
  .scroll-item {
    font-size: 1rem;
    padding-bottom: 24px;
    height: 69px;
  }
  .scroll-item::before {
    width: 15px;
    height: 15px;
    left: 2px;
  }
  .scroll-item::after {
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    height: 4px;
    width: 4px;
    left: 7px;
    bottom: 6px;
  }
  .container-facilities1 {
    background-position: center top;
    min-height: 160vw;
    background-image: url(/facilities/images/bg_01_sp.jpg);
    margin-top: 20px;
  }
  .container-facilities2 {
    background-position: center top;
    min-height: 160vw;
    background-image: url(/facilities/images/bg_02_sp.jpg);
    margin-top: -15px;
  }
  .container-facilities3 {
    background-position: center top;
    min-height: 160vw;
    background-image: url(/facilities/images/bg_03_sp.jpg);
    margin-top: 20px;
  }
  .container-facilities3 .h3title-facilities span {
    letter-spacing: -0.03em;
  }

  .link-external {
    font-size: 1.2rem;
  }
  .link-external::after {
    width: 10px;
    height: 10px;
    background-size: 10px 10px;
    transform: translateY(0px);
    margin-left: 4px;
  }
  .box-link-external .link-external {
    margin-top: 9px;
    font-size: 1.2rem;
    padding: 6px 14px;
  }
  .box-facilities .link-external::after {
    transform: translateY(0px);
  }
  .list {
    margin-top: 10px;
  }
  /* facilities-lang */
  .facilities-lang {
    margin-top: 25px;
    justify-content: center;
  }
  .facilities-lang .facilities-lang__image {
    margin-right: 1.2em;
  }
  .facilities-lang .facilities-lang__list {
    justify-content: center;
  }
  .facilities-lang .facilities-lang__list > li {
    margin-left: 1.1em;
    font-size: 1.4rem;
  }
  .facilities-lang .facilities-lang__list > li:first-child {
    margin-left: 0;
  }
  .facilities-lang .facilities-lang__list > li > a:hover {
    color: #ccc;
  }
  /* facilities-anchor-navi-box */
  .facilities-anchor-navi-box {
    margin-top: .8em;
    padding: 1.2em 15px;
    border-radius: 7px;
  }
  .facilities-anchor-navi-box + section > .h2title-facilities {
    margin-top: 40px;
  }
  /* facilities-anchor-navi */
  .facilities-anchor-navi .facilities-anchor-navi__list {
    display: block;
  }
  .facilities-anchor-navi .facilities-anchor-navi__list > li {
    margin-left: 0;
    border-top: 1px solid #fff;
  }
  .facilities-anchor-navi .facilities-anchor-navi__list > li:first-child {
    border-top: none;
  }
  .facilities-anchor-navi .facilities-anchor-navi__link {
    display: block;
    padding: .6em 1.4em .8em 0;
    font-size: 1.4rem;
    line-height: 1.8;
    transition: none;
  }
  .facilities-anchor-navi .facilities-anchor-navi__link::before {
    left: auto;
    right: 0;
    margin-top: -5px;
  }
}