#header {
  background: none;
  transition: background 0.2s; }
  #header.on {
    background: #FFF; }

.main {
  background: url("../images/main-bg.jpg") no-repeat center center;
  background-size: cover;
  padding: 11.7vw 0 0 0;
  position: relative; }
  @media (max-width: 767px) {
    .main {
      padding: 35vw 0 0 0; } }

.main-area {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end; }
  @media (max-width: 767px) {
    .main-area {
      display: block;
      overflow: hidden; } }

.main-img {
  width: 65%;
  opacity: 0;
  transition: 2s; }
  @media (max-width: 767px) {
    .main-img {
      width: 105%; } }
  .main-img.on {
    opacity: 1; }

.main01 {
  width: calc(35% - 50px); }
  @media (max-width: 767px) {
    .main01 {
      width: 83%;
      margin: 0 auto 8vw auto; } }
  .main01 img {
    width: 100%; }
  .main01 .main-txt01 {
    width: 98%;
    transform: translateY(20px);
    transition: 1.8s;
    opacity: 0; }
    @media (max-width: 767px) {
      .main01 .main-txt01 {
        width: 80%;
        margin: 0 auto; } }
    .main01 .main-txt01.on {
      opacity: 1;
      transform: translateY(0); }
  .main01 .main-txt02 {
    width: 90%;
    margin: 3vw 0 5vw 0;
    transform: translateY(20px);
    transition: 1.8s;
    opacity: 0; }
    @media (max-width: 767px) {
      .main01 .main-txt02 {
        width: 80%;
        margin: 6vw auto 8vw auto; } }
    .main01 .main-txt02.on {
      opacity: 1;
      transform: translateY(0); }
  .main01 .main-txt03 {
    transform: translateY(20px);
    transition: 1.8s;
    opacity: 0; }
    .main01 .main-txt03.on {
      opacity: 1;
      transform: translateY(0); }

.main-txt04 {
  position: absolute;
  right: 20px;
  bottom: 20px;
  line-height: 1;
  font-size: 13px; }
  @media (max-width: 767px) {
    .main-txt04 {
      font-size: 10px;
      color: #FFF;
      right: 7px;
      bottom: 7px; } }

.scroll {
  top: 50%;
  width: 1px;
  height: 100px;
  background-color: #9fa0a0;
  position: absolute;
  right: 25px;
  z-index: 59;
  margin-top: -50px; }
  @media (max-width: 767px) {
    .scroll {
      display: none; } }

.scroll:after {
  content: "";
  position: absolute;
  top: 0;
  right: -5px;
  width: 12px;
  height: 12px;
  animation: sdl 2s linear infinite;
  background: url("../images/scroll.svg") no-repeat 0 0;
  animation-timing-function: cubic-bezier(0.01, 0.82, 0.23, 0.85);
  animation-delay: .5s;
  animation-duration: 2s; }

@keyframes sdl {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(100px); } }
.top-room-btn {
  margin: 4% 15%; }

.top-slider-area {
  background: #f7f7f7;
  padding: 90px 0; }
  @media (max-width: 767px) {
    .top-slider-area {
      padding: 30px 30px 50px 30px; } }

.top-title01 {
  max-width: 1350px;
  margin: 0 auto 70px auto;
  padding: 0 50px; }
  @media (max-width: 767px) {
    .top-title01 {
      padding: 0;
      max-width: inherit;
      margin: 0 0 50px 0; } }

.top-slider {
  position: relative;
  padding: 0 60px 50px 60px; }
  @media (max-width: 767px) {
    .top-slider {
      padding: 0; } }
  .top-slider::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    background: #f3efe9;
    width: 100%;
    height: 320px; }
    @media (max-width: 767px) {
      .top-slider::before {
        display: none; } }
  .top-slider .swiper-slide {
    width: 569px; }
    @media (max-width: 767px) {
      .top-slider .swiper-slide {
        width: 100%; } }
    .top-slider .swiper-slide span {
      display: block;
      margin: 20px 15px;
      line-height: 1.5; }

.swiper-button-prev,
.swiper-button-next {
  width: 64px;
  height: 64px;
  cursor: pointer;
  top: 150px;
  position: absolute;
  z-index: 10;
  transition: opacity 0.3s; }
  @media (max-width: 767px) {
    .swiper-button-prev,
    .swiper-button-next {
      display: none; } }
  .swiper-button-prev:hover,
  .swiper-button-next:hover {
    opacity: 0.7; }

.swiper-button-prev {
  background: url("../images/left.svg") no-repeat 0 0;
  left: 30px; }

.swiper-button-next {
  background: url("../images/right.svg") no-repeat 0 0;
  right: 30px; }

.top-btn01 {
  display: flex;
  justify-content: center;
  margin: 90px 0 0 0; }
  @media (max-width: 767px) {
    .top-btn01 {
      display: block;
      margin: 0;
      text-align: center; } }
  .top-btn01 li {
    margin: 0 30px; }
    @media (max-width: 767px) {
      .top-btn01 li {
        margin: 30px 0 0 0; } }

.top-access {
  margin: 140px 0; }
  @media (max-width: 767px) {
    .top-access {
      margin: 50px 0; } }

.top-access01 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 50px 0 100px 0;
  line-height: 1; }
  @media (max-width: 767px) {
    .top-access01 {
      display: block;
      margin: 0 10px; } }
  .top-access01 .top-access02 {
    width: 48%; }
    @media (max-width: 767px) {
      .top-access01 .top-access02 {
        width: auto; } }
  .top-access01 .top-access03 {
    display: flex;
    align-items: flex-end;
    margin: 50px 0 40px 0; }
    @media (max-width: 767px) {
      .top-access01 .top-access03 {
        display: block;
        margin: 40px 0 40px 0; } }
    .top-access01 .top-access03 figure:nth-child(1) {
      margin-right: 50px; }
      @media (max-width: 767px) {
        .top-access01 .top-access03 figure:nth-child(1) {
          margin: 0 0 40px 0; } }
  .top-access01 .top-access04 {
    text-align: center;
    margin: 70px 0 0 0; }
    @media (max-width: 767px) {
      .top-access01 .top-access04 {
        margin: 50px 0 0 0; } }
  .top-access01 .top-access05 {
    width: 50.445%; }
    @media (max-width: 767px) {
      .top-access01 .top-access05 {
        width: auto;
        margin: 40px 0 0 0; } }

.access-at {
  font-size: 10px;
  line-height: 1.6; }

.top-title02 {
  margin-bottom: 40px; }
  @media (max-width: 767px) {
    .top-title02 {
      margin: 80px 0 30px 0; } }

.top-access06 {
  line-height: 1; }

.top-access07 {
  max-width: 1250px;
  margin: 70px auto 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  @media (max-width: 767px) {
    .top-access07 {
      justify-content: space-between;
      margin: 50px 0 0 0; } }
  .top-access07 li {
    margin: 0 10px 20px 10px;
    width: 30%; }
    @media (max-width: 767px) {
      .top-access07 li {
        margin: 0 0 10px 0;
        width: calc(50% - 5px); } }

.top-access08 {
  max-width: 1160px;
  margin: 20px auto;
  text-align: right; }
  @media (max-width: 767px) {
    .top-access08 {
      text-align: left;
      margin: 10px 0 0 0; } }

.top-access-btn {
  text-align: center;
  margin: 120px 0; }
  @media (max-width: 767px) {
    .top-access-btn {
      margin: 30px 0 70px 0; } }

.top-outline {
  background: #222931;
  color: #FFF;
  padding: 110px 0 50px 0; }
  @media (max-width: 767px) {
    .top-outline {
      padding: 60px 0 30px 0; } }
  .top-outline table {
    width: 100%;
    max-width: 960px;
    margin: 30px auto 140px auto;
    font-size: 13px; }
    @media (max-width: 767px) {
      .top-outline table {
        font-size: 12px;
        margin: 30px auto 50px auto; } }
    .top-outline table th {
      background: #343a42;
      border-bottom: 5px solid #222931;
      border-right: 5px solid #222931;
      padding: 10px 15px;
      white-space: nowrap;
      font-weight: normal; }
      @media (max-width: 767px) {
        .top-outline table th {
          padding: 7px 10px;
          border-bottom: 3px solid #222931;
          border-right: 3px solid #222931; } }
    .top-outline table td {
      background: #2d323b;
      border-bottom: 5px solid #222931;
      padding: 10px 15px; }
      @media (max-width: 767px) {
        .top-outline table td {
          padding: 7px 10px;
          border-bottom: 3px solid #222931; } }
  .top-outline dl dt {
    margin-bottom: 1.7em; }
    @media (max-width: 767px) {
      .top-outline dl dt {
        width: 80px; } }
  .top-outline dl dd {
    font-size: 13px;
    line-height: 1.6;
    margin: 1.5em 0 0 0; }
    @media (max-width: 767px) {
      .top-outline dl dd {
        font-size: 11px;
        margin: 1em 0 0 0; } }

/*# sourceMappingURL=style.css.map */