#key {
   background: url("../img/ramen-ippudo/key.jpg") no-repeat center/cover;
   overflow: inherit;
}

.txt {
   text-align: justify;
}

@media only screen and (max-width: 767px) {
   .txt br {
      display: none;
   }

   .key-logo {
      width: 40vw;
      position: absolute;
      top: -4vw;
      left: 0;
      z-index: 1;
   }
}

@media only screen and (min-width: 768px) {
   .txt-c .txt {
      text-align: center;
   }

   header h1 {
      color: #9c9c9c;
   }

   .key-logo {
      position: absolute;
      top: -30px;
      left: 0;
      z-index: 1;
   }
}

#sec1 {
   background-color: #000;
   color: #fff;
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec1 {
      padding: 16vw 0;
   }

   #sec1:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/ramen-najimatei/sec1-deco-map.png") no-repeat bottom 6vw right/60% auto;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec1 .photo figcaption {
      margin-bottom: -2vw;
      position: relative;
      z-index: 1;
   }

   #sec1 h2 {
      padding-top: 8vw;
   }

   #sec1 .txt {
      padding-top: 5vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 {
      padding: 110px 0 108px;
   }

   #sec1 .wrap {
      padding-bottom: 132px;
   }

   #sec1 .wrap:before {
      content: '';
      width: 580px;
      height: 760px;
      background: url("../img/ramen-najimatei/sec1-deco-map.png") no-repeat center top/cover;
      position: absolute;
      bottom: 0;
      right: -150px;
   }

   #sec1 .photo {
      width: 1100px;
      margin: 0 -50px;
   }

   #sec1 .photo figcaption {
      margin-bottom: -12px;
      position: relative;
      z-index: 1;
   }

   #sec1 h2 {
      line-height: 74px;
      padding-top: 60px;
   }

   #sec1 .txt {
      padding-top: 30px;
   }
}

#sec2 {
   background-color: #000;
   color: #fff;
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec2 {
      padding: 14vw 0 16vw;
   }

   #sec2 .wrap {
      background-color: #252525;
      padding-bottom: 16vw;
   }

   #sec2 .logo {
      width: 50vw;
      position: absolute;
      top: -14vw;
      left: 50%;
      transform: translateX(-50%);
   }

   #sec2 .sub {
      color: #000;
      font-weight: 700;
      font-size: 16vw;
      line-height: 1;
      letter-spacing: 0;
      margin-bottom: -8vw;
   }

   #sec2 .txt {
      padding-top: 5vw;
   }

   #sec2 .photo {
      margin-top: 8vw;
      position: relative;
   }

   #sec2 .photo:before {
      content: '';
      border: 1px solid #fff;
      position: absolute;
      top: -2vw;
      right: -2vw;
      bottom: 2vw;
      left: 2vw;
   }

   #sec2 .box1 {
      padding-top: 20vw;
   }

   #sec2 .box2 {
      padding-top: 12vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec2 {
      padding-bottom: 130px;
   }

   #sec2:before {
      content: '';
      width: 100%;
      max-width: 1300px;
      background-color: #252525;
      position: absolute;
      top: 0;
      bottom: 130px;
      left: 50%;
      transform: translateX(-50%);
   }

   #sec2 .logo {
      width: 100%;
      text-align: center;
      position: absolute;
      top: -93px;
      left: 0;
   }

   #sec2 .col {
      width: 447px;
   }

   #sec2 .sub {
      font-weight: 700;
      font-size: 140px;
      letter-spacing: 0;
      line-height: 1;
      color: #000;
   }

   #sec2 h3 {
      line-height: 74px;
   }

   #sec2 h3 small {
      font-size: 40px;
   }

   #sec2 .txt {
      font-weight: bold;
   }

   #sec2 .photo {
      width: 450px;
      position: relative;
   }

   #sec2 .photo:before {
      content: '';
      border: 1px solid #fff;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
   }

   #sec2 .box1 {
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap;
      justify-content: space-between;
      position: relative;
      padding: 260px 0 0;
   }

   #sec2 .box1 .photo:before {
      top: -10px;
      right: -10px;
      bottom: 10px;
      left: 10px;
   }

   #sec2 .box1 .col {
      padding-top: 32px;
   }

   #sec2 .box1 .sub {
      margin-bottom: -47px;
      padding-left: 13px;
   }

   #sec2 .box1 .txt {
      padding-top: 34px;
   }

   #sec2 .box2 {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      position: relative;
      padding: 80px 10px 94px 0;
   }

   #sec2 .box2 .photo:before {
      top: -10px;
      right: -10px;
      bottom: 10px;
      left: 10px;
   }

   #sec2 .box2 .col {
      position: relative;
      z-index: 1;
   }

   #sec2 .box2 .sub {
      position: absolute;
      top: 33px;
      left: 0px;
   }

   #sec2 .box2 h3 {
      padding-top: 93px;
      position: relative;
      z-index: 1;
   }

   #sec2 .box2 .txt {
      padding-top: 28px;
   }
}

@media only screen and (min-width: 1201px) {
   #sec2 .box2 .sub {
      left: -50px;
   }
}

#sec3 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec3 {
      padding: 16vw 0;
   }

   #sec3 .box1 .item {
      text-align: center;
      padding-top: 12vw;
   }

   #sec3 .box1 h3 {
      padding-top: 6vw;
   }

   #sec3 .box1 .cart {
      padding-top: 2vw;
   }

   #sec3 .box2 {
      border: 2px solid #777;
      margin-top: 12vw;
      padding: 8vw 5.3vw;
   }

   #sec3 .box2 h3 span {
      font-size: 6.4vw;
   }

   #sec3 .box2 .photo {
      padding-top: 6vw;
   }

   #sec3 .box2 .photo img {
      filter: drop-shadow(8px 13px 15px rgba(0, 0, 0, 0.3));
   }

   #sec3 .box2 ul {
      background-color: #f1f1f1;
      padding: 5.3vw;
      margin-top: 6vw;
   }

   #sec3 .box2 ul li:first-child {
      font-size: 16px;
      padding-bottom: 3vw;
   }

   #sec3 .box2 .cart {
      text-align: center;
      padding-top: 6vw;
   }

   #sec3 .box2 .price {
      padding-top: 2vw;
      padding-bottom: 4vw;
   }

   #sec3 .box2 .cartjs_box .cartjs_cart_in {
      width: 50vw;
   }

   #sec3 .box3 {
      padding-top: 12vw;
   }

   #sec3 .box3 .photo {
      width: 70%;
      margin: 0 auto -4vw;
   }

   #sec3 .box3 .catch {
      width: 24vw;
      position: absolute;
      top: -18vw;
      left: 0;
   }

   #sec3 .box3 .col {
      background: url("../img/ramen/sec3-bg-img.jpg") no-repeat center/cover;
      position: relative;
      padding: 8vw 5.3vw;
   }

   #sec3 .box3 .col:before {
      content: '';
      border: 1px solid #000;
      position: absolute;
      top: 1vw;
      right: 1vw;
      bottom: 1vw;
      left: 1vw;
   }

   #sec3 .box3 h3 {
      padding-bottom: 2vw;
   }

   #sec3 .box3 .txt {
      display: inline-block;
   }

   #sec3 .box3 .price {
      display: inline-block;
      padding-left: 4vw;
   }

   #sec3 .box3 .cartjs_box .cartjs_cart_in {
      width: 50vw;
   }

   #sec3 .note1 {
      padding-top: 4vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec3 {
      padding: 133px 0 106px;
   }

   #sec3 .wrap {
      max-width: 1140px;
   }

   #sec3 .note {
      padding-top: 17px;
   }

   #sec3 .box1 {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      padding-top: 72px;
      padding-bottom: 135px;
   }

   #sec3 .box1 .item {
      width: calc(50% - 20px);
      text-align: center;
   }

   #sec3 .box1 h3 {
      padding-top: 32px;
   }

   #sec3 .box1 .price {
      padding-top: 12px;
   }

   #sec3 .box1 .cart {
      padding-top: 18px;
   }

   #sec3 .box1 .cartjs_box form {
      justify-content: center;
   }

   #sec3 .box2 {
      max-width: 940px;
      border: 2px solid #777;
      margin: 0 auto;
      padding: 44px 0 50px 40px;
      position: relative;
      box-sizing: border-box;
   }

   #sec3 .box2 h3 {
      line-height: 56px;
      position: absolute;
      top: 88px;
      left: 500px;
   }

   #sec3 .box2 h3 span {
      font-size: 40px;
   }

   #sec3 .box2 .photo img {
      filter: drop-shadow(8px 13px 15px rgba(0, 0, 0, 0.3));
   }

   #sec3 .box2 .cart {
      width: 425px;
      min-height: 181px;
      text-align: center;
      padding-top: 25px;
   }

   #sec3 .box2 .price {
      padding-top: 16px;
      padding-bottom: 22px;
   }

   #sec3 .box2 .cartjs_box form {
      justify-content: center;
   }

   #sec3 .box2 ul {
      width: 330px;
      background-color: #f1f1f1;
      padding: 30px 0 46px 53px;
      box-sizing: border-box;
      position: absolute;
      top: 302px;
      left: 500px;
   }

   #sec3 .box2 ul li:first-child {
      font-size: 20px;
      padding-bottom: 10px;
   }

   #sec3 .box3 {
      max-width: 900px;
      background: url("../img/ramen/sec3-bg-img.jpg") no-repeat center/cover;
      position: relative;
      margin: 182px auto 0;
      padding: 48px 0px 68px 72px;
      box-sizing: border-box;
   }

   #sec3 .box3:before {
      content: '';
      border: 1px solid #000;
      position: absolute;
      top: 5px;
      right: 5px;
      bottom: 5px;
      left: 5px;
   }

   #sec3 .box3 .photo {
      position: absolute;
      bottom: 0;
      right: 0;
   }

   #sec3 .box3 .catch {
      position: absolute;
      top: -100px;
      left: -50px;
   }

   #sec3 .box3 h3 {
      padding-bottom: 6px;
   }

   #sec3 .box3 .txt {
      display: inline-block;
      padding-top: 13px;
   }

   #sec3 .box3 .price {
      display: inline-block;
      padding-left: 25px;
   }

   #sec3 .box3 .cart {
      padding-top: 16px;
   }

   #sec3 .note1 {
      max-width: 900px;
      margin: 0 auto;
      padding-top: 7px;
   }
}

@media only screen and (min-width: 1201px) {
   #sec3 .box2 {
      max-width: 1060px;
      padding: 44px 0 50px 94px;
   }

   #sec3 .box2 h3,
   #sec3 .box2 ul {
      left: 560px;
   }
}

#sec4 {
   background: #f1f1f1 url("../img/ramen-najimatei/sec4-bg-img.jpg") no-repeat center top;
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec4 {
      background-size: 160% auto;
      padding: 16vw 0;
   }

   #sec4 h2 {
      width: max-content;
      font-weight: 400;
      font-size: 5.6vw;
      line-height: 1.5;
      letter-spacing: 0.06em;
      margin: 0 auto;
   }

   #sec4 h2 span {
      display: block;
      border-bottom: 1px solid #000;
      color: #000;
      font-weight: 400;
      font-size: 2.6vw;
      line-height: 1;
      letter-spacing: 0.06em;
      margin-bottom: 3vw;
   }

   #sec4 .box li {
      text-align: center;
      padding-top: 12vw;
   }

   #sec4 .box h3 {
      font-weight: 700;
      font-size: 4.8vw;
      line-height: 1.5;
      letter-spacing: 0.06em;
      padding-top: 6vw;
   }

   #sec4 .box .button {
      padding-top: 6vw;
   }

   #sec4 .button.blank {
      padding-top: 12vw;
   }

   #sec4 .button.blank a {
      background-color: #741e2a;
   }
}

@media only screen and (min-width: 768px) {
   #sec4 {
      background-size: 100% auto;
      padding: 144px 0 125px;
   }

   #sec4 h2 {
      width: 520px;
      font-weight: 400;
      font-size: 33px;
      line-height: 56px;
      letter-spacing: 0.06em;
      margin: 0 auto;
      padding-left: 70px;
   }

   #sec4 h2 span {
      display: block;
      width: 475px;
      border-bottom: 1px solid #000;
      color: #000;
      font-weight: 400;
      font-size: 15px;
      line-height: 0.8;
      letter-spacing: 0.06em;
      margin-bottom: 16px;
      padding-left: 6px;
   }

   #sec4 .box {
      display: flex;
      flex-wrap: wrap;
      gap: 72px 2%;
      text-align: center;
      padding-top: 90px;
   }

   #sec4 .box li {
      width: 32%;
   }

   #sec4 .box h3 {
      font-weight: 700;
      padding-top: 10px;
   }

   #sec4 .box .button {
      padding-top: 13px;
   }

   #sec4 .box .button a {
      width: 100%;
   }

   #sec4 .button.blank {
      padding-top: 106px;
   }

   #sec4 .button.blank a {
      background-color: #741e2a;
   }
}

#sec5 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec5 {
      padding: 16vw 0;
   }

   #sec5 hgroup {
      position: relative;
      padding-top: 6vw;
   }

   #sec5 hgroup p {
      width: 100%;
      color: #f1f1f1;
      font-weight: 400;
      font-size: 12vw;
      line-height: 1;
      letter-spacing: 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
   }

   #sec5 hgroup h2 {
      font-size: 6vw;
   }

   #sec5 .box li {
      width: 100%;
      height: 50vw;
      margin-top: 8vw;
   }

   #sec5 .box li a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      position: relative;
      color: #fff;
   }

   #sec5 .box li a:before {
      content: '';
      border: 1px solid #666;
      position: absolute;
      top: 2vw;
      right: -2vw;
      bottom: -2vw;
      left: 2vw;
      z-index: -1;
   }

   #sec5 .box li .photo {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
   }

   #sec5 .box li .photo:after {
      content: '';
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.3s;
   }

   #sec5 .box li .photo img {
      width: 100%;
      max-width: inherit;
      height: 100%;
      object-fit: cover;
   }

   #sec5 .box li h3 {
      font-weight: 400;
      font-size: 5.6vw;
      line-height: 1.5;
      letter-spacing: 0;
   }

   #sec5 .box li .more {
      font-weight: 400;
      font-size: 4vw;
      letter-spacing: 0.06em;
      line-height: 1.5;
      padding-right: 18vw;
      position: absolute;
      bottom: 4vw;
      right: 0;
   }

   #sec5 .box li .more:after {
      content: '';
      width: 14.6vw;
      border-top: 2px solid #fff;
      position: absolute;
      top: calc(50% - 1px);
      right: 0;
   }

   #sec5 .box li .more.blank:after {
      background: url("../img/shared/icon-blank-white.png") no-repeat center top/cover;
      width: 4vw;
      height: 4vw;
      border-top: 0;
      top: 50%;
      right: 7vw;
      transform: translateY(-50%);
   }
}

@media only screen and (min-width: 768px) {
   #sec5 {
      padding: 90px 0 145px;
   }

   #sec5 .wrap {
      max-width: 1220px;
   }

   #sec5 hgroup {
      position: relative;
      padding-top: 40px;
   }

   #sec5 hgroup p {
      width: 100%;
      color: #f1f1f1;
      font-weight: 400;
      font-size: 100px;
      line-height: 1;
      letter-spacing: 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
   }

   #sec5 .box {
      display: flex;
      flex-wrap: wrap;
      gap: 36px;
      padding-top: 50px;
   }

   #sec5 .box li {
      width: calc(33.33% - 26px);
      height: 240px;
   }

   #sec5 .box li a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      position: relative;
      color: #fff;
   }

   #sec5 .box li a:before {
      content: '';
      border: 1px solid #666;
      position: absolute;
      top: 7px;
      right: -7px;
      bottom: -7px;
      left: 7px;
      z-index: -1;
   }

   #sec5 .box li a:hover {
      opacity: 1;
   }

   #sec5 .box li a:hover .photo:after {
      opacity: 0;
   }

   #sec5 .box li .photo {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
   }

   #sec5 .box li .photo:after {
      content: '';
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.3s;
   }

   #sec5 .box li .photo img {
      width: 100%;
      max-width: inherit;
      height: 100%;
      object-fit: cover;
   }

   #sec5 .box li h3 {
      font-weight: 400;
      font-size: 33px;
      line-height: 56px;
      letter-spacing: 0.06em;
   }

   #sec5 .box li .more {
      font-weight: 400;
      font-size: 18px;
      letter-spacing: 0.06em;
      line-height: 24px;
      padding-right: 77px;
      position: absolute;
      bottom: 16px;
      right: 0;
   }

   #sec5 .box li .more:after {
      content: '';
      width: 64px;
      border-top: 2px solid #fff;
      position: absolute;
      top: calc(50% - 1px);
      right: 0;
   }

   #sec5 .box li .more.blank:after {
      background: url("../img/shared/icon-blank-white.png") no-repeat center top/cover;
      width: 19px;
      height: 19px;
      border-top: 0;
      top: 50%;
      right: 32px;
      transform: translateY(-50%);
   }
}