body {
  background: url("../img/scene/bg.jpg") repeat center; }

#key .banner {
  width: 100%;
  height: 100%; }
  #key .banner img {
    width: 100%;
    height: 100%;
    object-fit: cover; }
@media screen and (min-width: 768px) {
  #key .banner {
    height: 900px; } }

@media screen and (min-width: 768px) {
  .object-fit-cover {
    position: relative; }

  .object-fit-cover img {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%; } }
.layout-shared::before {
  content: "";
  position: absolute;
  background: url("../img/scene/bg01.jpg") repeat center;
  top: 0;
  bottom: 0;
  right: 0;
  width: 10%;
  z-index: -1; }
.layout-shared .info h2 {
  padding-bottom: 10vw;
  text-align: center; }
.layout-shared .info .txt {
  margin: 0 10% 0; }
.layout-shared .info .food {
  text-align: center;
  padding: 10vw 6%; }
  .layout-shared .info .food .name {
    border-bottom: 1px solid #000;
    line-height: 3.5; }
  .layout-shared .info .food .price {
    line-height: 3.5;
    letter-spacing: 0.3em; }
    .layout-shared .info .food .price .num {
      font-size: 14px;
      letter-spacing: 0.3em; }
    .layout-shared .info .food .price .slash {
      font-size: 16px;
      letter-spacing: 0.27em; }
.layout-shared .photo {
  margin: 0 -6% 0; }
@media screen and (min-width: 768px) {
  .layout-shared {
    max-width: 1500px; }
    .layout-shared::before {
      top: -3px;
      width: 50%;
      right: -43.4%; }
    .layout-shared .info {
      margin-left: 50%; }
      .layout-shared .info h2 {
        padding: 48px 0 0 70px !important;
        text-align: left; }
      .layout-shared .info .txt {
        margin: 52px 0 75px 70px; }
      .layout-shared .info .food {
        text-align: left;
        width: 450px;
        padding: 0; }
        .layout-shared .info .food .name {
          line-height: 35px;
          padding-left: 74px; }
        .layout-shared .info .food .price {
          line-height: 47px;
          padding-left: 73px; }
          .layout-shared .info .food .price .num {
            font-size: 18px; }
          .layout-shared .info .food .price .slash {
            font-size: 20px; }
    .layout-shared .photo {
      margin: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: calc(50% + 0px);
      height: 650px; } }

#sec1 .wrap h2 {
  padding: 12vw 8%; }
#sec1 .wrap .txt {
  margin-bottom: 5vw; }
#sec1 .wrap .photo {
  margin: 0 -6% 0; }
@media screen and (min-width: 768px) {
  #sec1 {
    padding-top: 255px; }
    #sec1 .wrap {
      max-width: 1500px; }
      #sec1 .wrap h2 {
        padding: 100px 0 0 calc(16% + 9px); }
      #sec1 .wrap .txt {
        margin: 82px 0 0 calc(16% + 10px);
        max-width: 480px; }
      #sec1 .wrap .photo {
        margin: 0;
        position: absolute;
        top: 0;
        left: 756px;
        right: 0;
        height: 700px; } }
@media screen and (min-width: 768px) and (max-width: 1300px) {
  #sec1 .wrap h2 {
    padding-left: calc(5% + 9px); }
  #sec1 .wrap .txt {
    margin-left: calc(5% + 11px); }
  #sec1 .wrap .photo {
    left: 550px; } }

#sec2 .layout-shared {
  padding: 15vw 5.3% 0; }
  #sec2 .layout-shared .info {
    background: url("../img/scene/sec2_deco.png") no-repeat top left 0vw/50%; }
@media screen and (min-width: 768px) {
  #sec2 .layout-shared {
    padding: 147px 0 70px; }
    #sec2 .layout-shared .info {
      background: url("../img/scene/sec2_deco.png") no-repeat top 299px left 67%/auto; }
    #sec2 .layout-shared .photo {
      top: 147px; } }

#sec3 .layout-shared {
  padding-top: 15vw; }
  #sec3 .layout-shared .info {
    background: url("../img/scene/sec3_deco.png") no-repeat bottom 14vw left 0vw/67%; }
    #sec3 .layout-shared .info h2 {
      padding: 0 10% 10vw; }
@media screen and (min-width: 768px) {
  #sec3 .layout-shared {
    padding: 0 0 110px; }
    #sec3 .layout-shared .info {
      background: url("../img/scene/sec3_deco.png") no-repeat top 211px left 68%/auto; }
      #sec3 .layout-shared .info .txt {
        max-width: 270px; } }

#sec4 {
  background: url("../img/scene/sec4_bg.jpg") no-repeat center top/cover;
  color: #fff; }
  #sec4 .wrap {
    display: flex;
    align-items: flex-end;
    padding: 0 10% 10vw;
    background: rgba(0, 0, 0, 0.2); }
    #sec4 .wrap h2 {
      border-right: 1px solid #fff;
      padding: 10vw 5% 10vw 0;
      max-width: 14%;
      width: 100%; }
    #sec4 .wrap .txt {
      margin-left: 5%; }
  @media screen and (min-width: 768px) {
    #sec4 {
      height: 850px; }
      #sec4 .wrap {
        max-width: 1500px;
        padding: 0;
        background: none; }
        #sec4 .wrap h2 {
          padding: 69px 24px 69px 119px;
          max-width: unset;
          width: auto; }
        #sec4 .wrap .txt {
          max-width: 347px;
          margin: 0 0 -8px 29px; } }

#sec5 {
  background: url("../img/scene/sec5_bg.jpg") no-repeat center top/cover;
  color: #fff; }
  #sec5 .wrap {
    padding: 0 2% 10vw;
    background: rgba(0, 0, 0, 0.2); }
  #sec5 .inner {
    border-left: 1px solid #fff;
    margin: 0 5.3% 0;
    padding: 12vw 5.3% 0; }
    #sec5 .inner h2 {
      padding-bottom: 5vw; }
  @media screen and (min-width: 768px) {
    #sec5 {
      height: 850px; }
      #sec5 .wrap {
        background: none;
        padding: 0; }
      #sec5 .inner {
        margin: 0 0 0 calc(50% - 11px);
        padding: 102px 0 0 33px; }
        #sec5 .inner h2 {
          padding-bottom: 32px; }
        #sec5 .inner .txt {
          max-width: 380px; } }

#sec6 {
  padding: 15vw 0 25vw;
  position: relative; }
  #sec6::before {
    content: "";
    position: absolute;
    background: url("../img/scene/bg01.jpg") repeat center;
    top: 0;
    bottom: 0;
    width: 10%; }
  #sec6 .wrap .lead {
    padding: 0 8% 0; }
    #sec6 .wrap .lead .floor-map {
      padding-bottom: 8vw;
      margin-right: -8%; }
    #sec6 .wrap .lead .txt {
      margin: 0 -5% 0 7%; }
  #sec6 .wrap .bot .photo1 {
    margin: 10vw -6% 10vw 24%; }
  #sec6 .wrap .bot .txt {
    padding: 0 8% 10vw;
    margin: 0 -5% 0 7%; }
  #sec6 .wrap .bot .photo2 {
    padding-right: 10%; }
  @media screen and (min-width: 768px) {
    #sec6 {
      padding: 151px 0 278px; }
      #sec6::before {
        width: 16%; }
      #sec6 .wrap {
        max-width: 1500px; }
        #sec6 .wrap .lead {
          display: flex;
          max-width: 1053px;
          margin: 0 0px 156px 190px;
          align-items: flex-end;
          padding: 0; }
          #sec6 .wrap .lead .floor-map {
            padding: 0;
            margin-right: 0; }
          #sec6 .wrap .lead .txt {
            max-width: 287px;
            margin: 0 0 -8px 55px; }
        #sec6 .wrap .bot {
          position: relative; }
          #sec6 .wrap .bot .photo1 {
            margin: 0;
            position: absolute;
            top: 0;
            left: calc(50% + 205px);
            right: 0;
            height: 600px; }
          #sec6 .wrap .bot .txt {
            padding: 42px 0 0;
            margin-left: calc(33% + 4px);
            max-width: 315px; }
          #sec6 .wrap .bot .photo2 {
            padding: 150px calc(50% - 54px) 0 calc(13% + 9px);
            height: 529px;
            text-align: right; }
            #sec6 .wrap .bot .photo2 img {
              width: 100%;
              height: 100%;
              object-fit: cover; } }
  @media screen and (min-width: 768px) and (max-width: 1300px) {
    #sec6 .wrap .lead {
      padding: 0 20px 0; }
    #sec6 .wrap .bot .photo1 {
      left: calc(40% + 205px); }
    #sec6 .wrap .bot .txt {
      margin-left: calc(23% + 4px); }
    #sec6 .wrap .bot .photo2 {
      padding: 150px calc(60% - 54px) 0 calc(3% + 9px); } }