@charset "UTF-8";
/* 切り替えポイント：PC最小コンテンツ幅 */
@import "reset.css";
/* 切り替えポイント：PC最小コンテンツ幅 */
/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
html, body {
  font-family: "YakuHanJP", "Noto Sans JP", sans-serif;
  font-size: 3.2vw;
  line-height: 1.6;
  font-weight: 500;
  background: #000;
}
@media screen and (min-width: 900px) {
  html, body {
    /* 以上のとき */
    font-size: 24px;
  }
}

body.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
}

#sampleBox {
  width: 31.25rem;
  height: 50px;
  background: #666;
  margin: auto;
}
@media screen and (min-width: 900px) {
  #sampleBox {
    /* 以上のとき */
    width: 37.5rem;
  }
}

img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 
================================================================================
section
================================================================================
*/
section.area {
  color: #fff;
  text-align: center;
}
section.area:not(.fullscreen) {
  min-height: 20.8333333333rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 900px) {
  section.area:not(.fullscreen) {
    /* 以上のとき */
    min-height: 56.3vw;
  }
}
section.area h2 {
  font-size: 2.0833333333rem;
  margin-bottom: 0.2083333333rem;
  line-height: 1;
  font-weight: 900;
}
section.area p {
  font-size: 0.625rem;
  font-weight: 900;
}
section.area p.copyright {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  font-size: 0.4166666667rem;
  font-weight: 500;
}
section.fullscreen {
  width: 100%;
  height: 100vh;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 66.6vh 8.4vh auto;
  grid-template-rows: 66.6vh 8.4vh auto;
}
section.fullscreen .unit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 900px) {
  section.fullscreen {
    /* 以上のとき */
    height: 56.3vw;
    -ms-grid-rows: 33.3vw 4.2vw auto;
    grid-template-rows: 33.3vw 4.2vw auto;
  }
}
section#photo {
  background: #717071;
}
section#user_policy {
  background: #888888;
}
section#access {
  background: #9e9e9f;
}
section#contact {
  background: #888888;
}
section#rsvn {
  background: #717071;
}
section#inc {
  background: #595757;
}

/* 
================================================================================
class
================================================================================
*/
.colorBars {
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0 1fr 0 1fr 0 1fr 0 1fr 0 1fr 0 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 0;
}
.colorBars .bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  height: 100%;
}
.colorBars.line_1 .bar:nth-of-type(1) {
  background: #ffebee;
}
.colorBars.line_1 .bar:nth-of-type(2) {
  background: #fcff05;
}
.colorBars.line_1 .bar:nth-of-type(3) {
  background: #01fafd;
}
.colorBars.line_1 .bar:nth-of-type(4) {
  background: #04fc01;
}
.colorBars.line_1 .bar:nth-of-type(5) {
  background: #fc03fd;
}
.colorBars.line_1 .bar:nth-of-type(6) {
  background: #fd0304;
}
.colorBars.line_1 .bar:nth-of-type(7) {
  background: #0204fd;
}
.colorBars.line_2 .bar:nth-of-type(1) {
  background: #0204fd;
}
.colorBars.line_2 .bar:nth-of-type(2) {
  background: #0e0e0e;
}
.colorBars.line_2 .bar:nth-of-type(3) {
  background: #fc03fd;
}
.colorBars.line_2 .bar:nth-of-type(4) {
  background: #0e0e0e;
}
.colorBars.line_2 .bar:nth-of-type(5) {
  background: #01fbfd;
}
.colorBars.line_2 .bar:nth-of-type(6) {
  background: #0e0e0e;
}
.colorBars.line_2 .bar:nth-of-type(7) {
  background: #ffebee;
}
.colorBars.line_3 .barWrap:nth-of-type(1) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-column: 1/6;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 23.4% 23.4% 23.4% 1fr;
  grid-template-columns: 23.4% 23.4% 23.4% 1fr;
}
.colorBars.line_3 .barWrap:nth-of-type(1) .bar:nth-child(1) {
  background: #0a2e96;
}
.colorBars.line_3 .barWrap:nth-of-type(1) .bar:nth-child(2) {
  background: #fff9f9;
}
.colorBars.line_3 .barWrap:nth-of-type(1) .bar:nth-child(3) {
  background: #6002e7;
}
.colorBars.line_3 .barWrap:nth-of-type(1) .bar:nth-child(4) {
  background: #0e0e0e;
}
.colorBars.line_3 .barWrap:nth-of-type(2) {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}
.colorBars.line_3 .barWrap:nth-of-type(2) .bar:nth-child(1) {
  background: #040404;
}
.colorBars.line_3 .barWrap:nth-of-type(2) .bar:nth-child(2) {
  background: #0e0e0e;
}
.colorBars.line_3 .barWrap:nth-of-type(2) .bar:nth-child(3) {
  background: #161616;
}
.colorBars.line_3 .bar:last-child {
  background: #0e0e0e;
}

.unit {
  width: 100%;
}

.fullarea {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.flex .flexItem {
  width: calc(25% - 1rem);
  margin: 0 0.5rem 1rem;
}
.flex .flexItem.main {
  width: calc(33.3333333333% - 1rem);
}
.flex .flexItem img {
  max-width: 100%;
  height: auto;
}

.galleryWrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.swiper-unit {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.swiper-container {
  cursor: -webkit-grab;
  cursor: grab;
}
.swiper-container:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50% !important;
  width: 100px !important;
  height: 100px !important;
  margin: 0 !important;
  outline: 0;
}
@media screen and (max-width: 900px) {
  .swiper-button-prev,
.swiper-button-next {
    width: 20vw !important;
    height: 20vw !important;
  }
}

.swiper-button-prev {
  left: 100px !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2072.2%20131.7%22%20style%3D%22enable-background%3Anew%200%200%2072.2%20131.7%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M66.2%2C130.6c-1.2%2C0-2.3-0.4-3.2-1.3L2.8%2C69c-1.8-1.8-1.8-4.6%2C0-6.4L63%2C2.4c1.8-1.8%2C4.6-1.8%2C6.4%2C0%20c1.8%2C1.8%2C1.8%2C4.6%2C0%2C6.4L12.3%2C65.8l57.1%2C57.1c1.8%2C1.8%2C1.8%2C4.6%2C0%2C6.4C68.5%2C130.2%2C67.4%2C130.6%2C66.2%2C130.6z%22%2F%3E%3C%2Fsvg%3E") !important;
  background-size: auto 100% !important;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 900px) {
  .swiper-button-prev {
    left: 0 !important;
    -webkit-transform: translate(0%, -50%);
            transform: translate(0%, -50%);
  }
}

.swiper-button-next {
  right: 100px !important;
  left: auto !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2072.2%20131.7%22%20style%3D%22enable-background%3Anew%200%200%2072.2%20131.7%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M6%2C1.1c1.2%2C0%2C2.3%2C0.4%2C3.2%2C1.3l60.2%2C60.2c1.8%2C1.8%2C1.8%2C4.6%2C0%2C6.4L9.2%2C129.3c-1.8%2C1.8-4.6%2C1.8-6.4%2C0%20c-1.8-1.8-1.8-4.6%2C0-6.4l57.1-57.1L2.8%2C8.8C1%2C7%2C1%2C4.2%2C2.8%2C2.4C3.7%2C1.5%2C4.8%2C1.1%2C6%2C1.1z%22%2F%3E%3C%2Fsvg%3E") !important;
  background-size: auto 100% !important;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
@media screen and (max-width: 900px) {
  .swiper-button-next {
    right: 0 !important;
    -webkit-transform: translate(0%, -50%);
            transform: translate(0%, -50%);
  }
}

.swiper-button-next:before,
.swiper-button-prev:before {
  width: 34px !important;
  height: 61px !important;
}

.thumbnail {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0) scale(1);
          transform: translate3d(0%, 0%, 0) scale(1);
  -webkit-transition: all 600ms cubic-bezier(0.42, 0.02, 0.5, 1.56) 0ms;
  transition: all 600ms cubic-bezier(0.42, 0.02, 0.5, 1.56) 0ms;
}

.thumbnail a {
  display: block;
}

.thumbnail .item {
  position: relative;
  margin-bottom: 0;
}

.thumbnail .item:before,
.thumbnail .item:after {
  content: "";
  display: block;
}

.thumbnail .item:before {
  width: 100%;
  height: 0;
  padding-top: 68%;
  z-index: 1;
}

.thumbnail .item .image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: #ccc;
}

.btnWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 0.8333333333rem;
}
.btnWrap .bgBtn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: inherit;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 1.25rem;
  padding: 0 0.8333333333rem;
  line-height: 1;
  font-size: 0.4rem;
  border-radius: 0.625rem;
  background: #fff;
}
.btnWrap .bgBtn span {
  color: #000;
}

.modalOpen {
  cursor: pointer;
}

.backToTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 4.1666666667rem 0;
}
.backToTop .inWrap a {
  text-decoration: none !important;
}

#modalInclude .backToTop {
  display: none;
}

#modalWindow {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.8);
  color: #aaa;
  overflow: auto;
}
#modalWindow.pageContents {
  display: block;
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  text-align: left;
}
#modalWindow .closeBtn {
  position: fixed;
  top: 2.9166666667rem;
  right: 3.75rem;
}
#modalWindow .closeBtn span {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  line-height: 1;
  font-size: 3.3333333333rem;
}
#modalWindow .inFrame {
  padding: 4.1666666667rem;
}
#modalWindow .modalContentsWrap {
  width: 100%;
  max-width: 1000px;
  margin: auto;
}
#modalWindow .modalContentsWrap .modalContents {
  font-size: 0.6666666667rem;
}
#modalWindow .modalContentsWrap .modalContents h2 {
  text-align: center;
  margin-bottom: 3.3333333333rem;
  font-size: 2em;
  color: #fff;
}
#modalWindow .modalContentsWrap .modalContents h3 {
  padding-top: 1.6666666667rem;
  margin-bottom: 0.8333333333rem;
  font-size: 1.4em;
  color: #fff;
}
#modalWindow .modalContentsWrap .modalContents ul {
  margin: 0 0 0 0.8333333333rem;
  padding: 0;
}
#modalWindow .modalContentsWrap .modalContents ol {
  margin: 0 0 0 0.8333333333rem;
  padding: 0;
}
#modalWindow .modalContentsWrap .modalContents ol.indent {
  padding-left: 1.6666666667rem;
}
#modalWindow .modalContentsWrap .modalContents li ul, #modalWindow .modalContentsWrap .modalContents li ol {
  padding-top: 0.4166666667rem;
}
#modalWindow .modalContentsWrap .modalContents a {
  text-decoration: underline;
}

/* 
================================================================================
loader
================================================================================
*/
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 50000;
  -webkit-transition: all 3000ms ease 2000ms;
  transition: all 3000ms ease 2000ms;
}
body.loadingFinish #loader {
  opacity: 0;
}
#loader #loadingAnim {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 4.1666666667rem;
  height: 4.1666666667rem;
  background-size: contain;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}
#loader #loadingAnim .barWrap {
  width: 100%;
  height: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  -webkit-transition: all 200ms ease-in-out 1500ms;
  transition: all 200ms ease-in-out 1500ms;
}
#loader #loadingAnim .barWrap .bar::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
body.loadingFinish #loader #loadingAnim .barWrap .bar::before {
  height: 100%;
}
#loader #loadingAnim .barWrap .bar:nth-of-type(1)::before {
  background: #ffebee;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}
#loader #loadingAnim .barWrap .bar:nth-of-type(2)::before {
  background: #fcff05;
  -webkit-transition-delay: 100ms;
          transition-delay: 100ms;
}
#loader #loadingAnim .barWrap .bar:nth-of-type(3)::before {
  background: #01fafd;
  -webkit-transition-delay: 200ms;
          transition-delay: 200ms;
}
#loader #loadingAnim .barWrap .bar:nth-of-type(4)::before {
  background: #04fc01;
  -webkit-transition-delay: 300ms;
          transition-delay: 300ms;
}
#loader #loadingAnim .barWrap .bar:nth-of-type(5)::before {
  background: #fc03fd;
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
}
#loader #loadingAnim .barWrap .bar:nth-of-type(6)::before {
  background: #fd0304;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}
#loader #loadingAnim .barWrap .bar:nth-of-type(7)::before {
  background: #0204fd;
  -webkit-transition-delay: 600ms;
          transition-delay: 600ms;
}
body.loadingFinish #loader #loadingAnim .barWrap {
  -webkit-transform: scale(0, 0);
          transform: scale(0, 0);
  opacity: 0;
}
#loader #loadingEffect {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#loader #loadingEffect .whiteBall {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  width: 4.1666666667rem;
  height: 4.1666666667rem;
  border-radius: 50%;
  background: #fff;
  -webkit-box-shadow: 0px 0px 0.4166666667rem 0.4166666667rem #fff;
          box-shadow: 0px 0px 0.4166666667rem 0.4166666667rem #fff;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  -webkit-transition: all 300ms ease 1000ms;
  transition: all 300ms ease 1000ms;
}
body.loadingFinish #loader #loadingEffect .whiteBall {
  -webkit-transform: translate(-50%, -50%) scale(3);
          transform: translate(-50%, -50%) scale(3);
  opacity: 0;
}
#loader #loadingEffect .whiteBox {
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(2, 0.01);
          transform: translate(-50%, -50%) scale(2, 0.01);
  width: 110vw;
  height: 110vw;
  border-radius: 50%;
  background: #fff;
  -webkit-box-shadow: 0px 0px 0.4166666667rem 0.4166666667rem #fff;
          box-shadow: 0px 0px 0.4166666667rem 0.4166666667rem #fff;
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-transition: visibility 100ms ease-in 1300ms, opacity 1500ms ease 2600ms, -webkit-transform 500ms ease-in 1300ms;
  transition: visibility 100ms ease-in 1300ms, opacity 1500ms ease 2600ms, -webkit-transform 500ms ease-in 1300ms;
  transition: visibility 100ms ease-in 1300ms, transform 500ms ease-in 1300ms, opacity 1500ms ease 2600ms;
  transition: visibility 100ms ease-in 1300ms, transform 500ms ease-in 1300ms, opacity 1500ms ease 2600ms, -webkit-transform 500ms ease-in 1300ms;
}
body.loadingFinish #loader #loadingEffect .whiteBox {
  visibility: visible;
  border-radius: 10%;
  -webkit-transform: translate(-50%, -50%) scale(1, 1);
          transform: translate(-50%, -50%) scale(1, 1);
  opacity: 1;
}
@media screen and (max-width: 900px) {
  body.loadingFinish #loader #loadingEffect .whiteBox {
    height: 110vh;
    width: 110vw;
  }
}

#container {
  opacity: 0;
  -webkit-transition: all 100ms ease;
  transition: all 100ms ease;
}
body.containerIn #container {
  opacity: 1;
}

body.resize * {
  -webkit-transition: all 0ms ease !important;
  transition: all 0ms ease !important;
}

/* 
================================================================================
container,base
================================================================================
*/
#container {
  min-height: 100vw;
}
@media screen and (min-width: 900px) {
  #container {
    /* 以上のとき */
    background: #ccc;
  }
}

.contentsFrame {
  width: 28.75rem;
  height: 100%;
  margin: auto;
}
.contentsFrame.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

footer .colorBars {
  height: 1.0416666667rem;
}

/* 
================================================================================
contents
================================================================================
*/
section#photo {
  padding: 0;
  aspect-ratio: 100/68;
}
section#photo h2 {
  margin-bottom: 1.6666666667rem;
}

section#user_policy h2 {
  margin-bottom: 0.8333333333rem;
}
section#user_policy .bgBtn span {
  color: #888888;
}

#map {
  min-height: 20.8333333333rem;
  height: 100vh;
}
#map iframe {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
@media screen and (max-width: 900px) {
  #map {
    /* 以上のとき */
    min-height: inherit;
    height: 50vh;
  }
}

#inc h2 {
  font-size: 1.2rem;
}

/* 
================================================================================
sample
================================================================================
*/
div.sample {
  width: 200px;
  height: 200px;
}
body.sample div.sample {
  text-align: center;
}
div.sample:before {
  content: "";
  display: block;
  width: 300px;
  height: 150px;
  background: blue;
}
div.sample.hoge {
  /* classがhogeのdiv　&がついてるからdivと.hogeがくっつく */
  width: 150px;
  height: 29px;
  background: yellow;
}
div.sample .hoge {
  /* divの中にいるclassがhoge　&がついていないのでdivと.hogeがくっつかない */
  width: 120px;
  height: 53px;
  background: green;
}

.sample-1 {
  width: 100px;
}

.sample-2 {
  width: 200px;
}

.sample-3 {
  width: 300px;
}

.sample-1 {
  width: 100px;
}

.sample-2 {
  width: 200px;
}

.sample-3 {
  width: 300px;
}

.mike-icon {
  background-image: url("/images/mike.png");
}

.kuro-icon {
  background-image: url("/images/kuro.png");
}

.bus-icon {
  background-image: url("/images/bus.png");
}