body {
  color: #595959; }
  body::after {
    background: #5d6a80; }

.mainvisual .text {
  background: #2e3f60; }
.mainvisual .image .mainslide li {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center left;
  background-repeat: no-repeat;
  animation: topanime 61s linear 0s infinite;
  opacity: 0; }
  .mainvisual .image .mainslide li:nth-child(1) {
    background-image: url("../images/top_slide1.jpg");
    animation-delay: 0s; }
  .mainvisual .image .mainslide li:nth-child(2) {
    background-image: url("../images/top_slide2.jpg");
    animation-delay: 10s; }
  .mainvisual .image .mainslide li:nth-child(3) {
    background-image: url("../images/top_slide3.jpg");
    animation-delay: 20s; }
  .mainvisual .image .mainslide li:nth-child(4) {
    background-image: url("../images/top_slide4.jpg");
    animation-delay: 30s; }
  .mainvisual .image .mainslide li:nth-child(5) {
    background-image: url("../images/top_slide5.jpg");
    animation-delay: 40s; }
  .mainvisual .image .mainslide li:nth-child(6) {
    background-image: url("../images/top_slide6.jpg");
    animation-delay: 50s; }

@media all and (max-width: 896px) {
  .restaurant .text {
    margin: 200px auto 0; } }
@media all and (max-width: 480px) {
  .restaurant .text {
    margin: 160px auto 0; } }

.restaurant {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 300px; }
  @media all and (max-width: 896px) {
    .restaurant {
      display: block; } }
  @media all and (max-width: 480px) {
    .restaurant {
      margin-top: 100px; } }
  .restaurant::after {
    position: absolute;
    content: "";
    z-index: 1;
    background: #e4e4e4;
    width: 1530px;
    height: 1000px;
    top: 58%;
    transform: translateY(-50%);
    right: 0; }
    @media all and (max-width: 1500px) {
      .restaurant::after {
        width: 80vw;
        height: 600px; } }
    @media all and (max-width: 1367px) {
      .restaurant::after {
        height: 680px;
        top: 56%; } }
    @media all and (max-width: 896px) {
      .restaurant::after {
        width: 90vw;
        top: 60%;
        z-index: -1; } }
    @media all and (max-width: 480px) {
      .restaurant::after {
        height: 800px; } }
  .restaurant .image {
    width: 40%;
    z-index: 2; }
    @media all and (max-width: 896px) {
      .restaurant .image {
        width: 100%; } }
    @media all and (max-width: 896px) {
      .restaurant .image img {
        max-width: 85%; } }
    .restaurant .image .large {
      position: relative; }
      @media all and (max-width: 1600px) {
        .restaurant .image .large {
          max-width: 90%; } }
      @media all and (max-width: 896px) {
        .restaurant .image .large {
          max-width: 100%; } }
      .restaurant .image .large .small {
        position: absolute;
        bottom: -150px;
        right: -200px; }
        @media all and (max-width: 1600px) {
          .restaurant .image .large .small {
            max-width: 45%;
            bottom: -100px; } }
        @media all and (max-width: 1367px) {
          .restaurant .image .large .small {
            bottom: -90px;
            right: -100px; } }
        @media all and (max-width: 1025px) {
          .restaurant .image .large .small {
            right: -40px; } }
        @media all and (max-width: 896px) {
          .restaurant .image .large .small {
            bottom: -70px;
            right: 0;
            text-align: right; } }
  .restaurant .text {
    width: 60%;
    z-index: 2;
    margin-top: 100px;
    text-align: center; }
    @media all and (max-width: 1367px) {
      .restaurant .text {
        margin-top: 50px; } }
    @media all and (max-width: 896px) {
      .restaurant .text {
        width: calc(100% - 40px);
        margin: 150px auto 0; } }
    .restaurant .text h2.headline {
      font-size: 35px;
      font-size: 3.5em; }
      @media all and (max-width: 896px) {
        .restaurant .text h2.headline {
          font-size: 25px;
          font-size: 2.5em; } }
    .restaurant .text .name {
      font-size: 15px;
      font-size: 1.5em; }
      .restaurant .text .name span {
        color: #595959; }
        .restaurant .text .name span.large {
          font-size: 45px;
          font-size: 4.5em;
          font-family: 'Shippori Mincho', serif;
          font-weight: 400;
          margin-top: 15px;
          display: block; }
          @media all and (max-width: 896px) {
            .restaurant .text .name span.large {
              font-size: 40px;
              font-size: 4em; } }
        .restaurant .text .name span.ruby {
          font-size: 15px;
          font-size: 1.5em;
          font-family: 'Libre Bodoni', serif;
          font-weight: 400;
          display: block;
          margin-top: -20px; }
          @media all and (max-width: 896px) {
            .restaurant .text .name span.ruby {
              font-size: 12px;
              font-size: 1.2em; } }
      .restaurant .text .name + div p {
        margin-top: 30px;
        font-size: 15px;
        font-size: 1.5em;
        line-height: 2.5;
        letter-spacing: 3px; }
        @media all and (max-width: 896px) {
          .restaurant .text .name + div p {
            font-size: 14px;
            font-size: 1.4em; } }
        @media all and (max-width: 896px) {
          .restaurant .text .name + div p {
            margin-top: 20px; } }
    .restaurant .text .more {
      margin: 50px 10vw auto auto;
      text-align: left; }
      @media all and (max-width: 896px) {
        .restaurant .text .more {
          margin: 30px auto 0; } }

/** anime **/
@keyframes topanime {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  38% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 0;
    background-position: center 50%; } }
@keyframes bgSlide {
  0% {
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    opacity: 0;
    background-position: center right 20%; } }
h2.headline {
  color: #595959; }

.restaurant::after {
  background: #efefef; }

@media all and (max-width: 896px) {
  .onsen > div.block {
    background: #efefef; } }
.onsen > div.block .text {
  background: #efefef; }

.news .inner .box::after {
  background: #41506e; }

footer {
  background: #5d6a80; }