main {
  background-color: #FFF;
  color: #000; }
  main .header-bg {
    background-image: url("../images/shop/header_bg.jpg"); }

.top-photo {
  background-color: #F15929;
  padding: 9.5rem 0 13.5rem; }
  @media screen and (max-width: 936px) {
    .top-photo {
      padding: 10.149572649572649vw 0 14.423076923076922vw; } }
  @media screen and (max-width: 440px) {
    .top-photo {
      padding: 10.666666666666668vw 0 13.333333333333334vw; } }

.about {
  background-color: #F1E3D0;
  padding: 5.5rem 0 7.0rem; }
  @media screen and (max-width: 936px) {
    .about {
      padding: 5.876068376068376vw 0 7.478632478632479vw; } }
  @media screen and (max-width: 440px) {
    .about {
      padding: 8vw 0 10.666666666666668vw; } }
  .about .logo {
    max-width: 45.0rem;
    margin: 0 auto; }
    @media screen and (max-width: 440px) {
      .about .logo {
        width: 53.6vw; } }
  .about .shop {
    text-align: center;
    font-size: 2.4rem;
    font-weight: bold;
    color: #C4412B;
    margin-bottom: 2.5rem; }
    @media screen and (max-width: 936px) {
      .about .shop {
        font-size: 2.564102564102564vw;
        margin-bottom: 2.6709401709401708vw; } }
    @media screen and (max-width: 440px) {
      .about .shop {
        font-size: 4.8vw;
        margin-bottom: 4vw; } }
  .about .txt {
    text-align: center;
    margin: 0 auto;
    font-size: 1.4rem; }
    @media screen and (max-width: 936px) {
      .about .txt {
        font-size: 1.4957264957264957vw; } }
    @media screen and (max-width: 440px) {
      .about .txt {
        font-size: 3.2vw;
        text-align: left; }
        .about .txt br {
          display: none; } }

.kinds {
  padding: 9.0rem 0 10.0rem; }
  @media screen and (max-width: 936px) {
    .kinds {
      padding: 9.615384615384617vw 0 10.683760683760683vw; } }
  @media screen and (max-width: 440px) {
    .kinds {
      padding: 10.666666666666668vw 0 13.333333333333334vw; } }
  .kinds .txt-area {
    width: 28.0rem;
    margin: 0 auto; }
    @media screen and (max-width: 440px) {
      .kinds .txt-area {
        width: 100%; } }
    .kinds .txt-area .ttl {
      text-align: center;
      font-size: 2.4rem;
      font-weight: bold;
      color: #C4412B;
      margin-bottom: 1.0rem; }
      @media screen and (max-width: 936px) {
        .kinds .txt-area .ttl {
          font-size: 2.564102564102564vw;
          margin-bottom: 1.0683760683760684vw; } }
      @media screen and (max-width: 936px) {
        .kinds .txt-area .ttl {
          font-size: 4.8vw;
          margin-bottom: 2.666666666666667vw; } }
    .kinds .txt-area .txt {
      text-align: center; }
    @media screen and (max-width: 440px) {
      .kinds .txt-area + .txt-area {
        margin-top: 8vw; } }
  .kinds .kinds-photo {
    max-width: 85.0rem;
    margin: 0 auto 8.0rem; }
    @media screen and (max-width: 936px) {
      .kinds .kinds-photo {
        width: 90.8119658119658vw;
        margin-bottom: 8.547008547008547vw; } }
    @media screen and (max-width: 440px) {
      .kinds .kinds-photo {
        width: 100%;
        margin-bottom: 8vw; } }

.food {
  padding-bottom: 16.0rem; }
  @media screen and (max-width: 936px) {
    .food {
      padding-bottom: 17.094017094017094vw; } }
  @media screen and (max-width: 440px) {
    .food {
      padding-bottom: 18.666666666666668vw; } }
  .food .special--item {
    background-color: #F7921D;
    border-radius: 3.5rem;
    padding: 2.5rem 4.3rem;
    color: #fff; }
    @media screen and (max-width: 936px) {
      .food .special--item {
        border-radius: 3.7393162393162394vw;
        padding: 2.6709401709401708vw 4.594017094017095vw; } }
    @media screen and (max-width: 936px) {
      .food .special--item {
        border-radius: 2.666666666666667vw;
        padding: 4vw 5.333333333333334vw; } }
    .food .special--item .photo {
      width: 39.8%; }
      @media screen and (max-width: 440px) {
        .food .special--item .photo {
          width: 80%;
          margin-bottom: 4vw; } }
    .food .special--item .txt-area {
      width: 49.5%; }
      @media screen and (max-width: 440px) {
        .food .special--item .txt-area {
          width: 100%; } }
      .food .special--item .txt-area .no1 {
        font-size: 3.0rem;
        font-weight: bold;
        color: #C4412B; }
        @media screen and (max-width: 936px) {
          .food .special--item .txt-area .no1 {
            font-size: 3.205128205128205vw; } }
        @media screen and (max-width: 440px) {
          .food .special--item .txt-area .no1 {
            font-size: 5.333333333333334vw;
            text-align: center; } }
      .food .special--item .txt-area .ttl {
        font-size: 7.1rem;
        line-height: 1.1; }
        @media screen and (max-width: 936px) {
          .food .special--item .txt-area .ttl {
            font-size: 7.585470085470085vw; } }
        @media screen and (max-width: 440px) {
          .food .special--item .txt-area .ttl {
            font-size: 9.333333333333334vw;
            text-align: center; } }
      .food .special--item .txt-area .point {
        font-size: 2.0rem;
        margin-bottom: 2.5rem; }
        @media screen and (max-width: 936px) {
          .food .special--item .txt-area .point {
            font-size: 2.1367521367521367vw;
            margin-bottom: 2.6709401709401708vw; } }
        @media screen and (max-width: 440px) {
          .food .special--item .txt-area .point {
            font-size: 4.266666666666667vw;
            margin-bottom: 4vw;
            text-align: center; } }
  .food .food-list--item {
    margin-top: 8.0rem; }
    @media screen and (max-width: 936px) {
      .food .food-list--item {
        margin-top: 8.547008547008547vw; } }
    @media screen and (max-width: 440px) {
      .food .food-list--item {
        margin-top: 10.666666666666668vw; } }
    .food .food-list--item .photo {
      width: 27.7%;
      margin-right: 6%; }
      @media screen and (max-width: 440px) {
        .food .food-list--item .photo {
          width: 70%;
          margin-right: 0;
          margin-bottom: 4vw; } }
    .food .food-list--item .txt-area {
      width: 50%; }
      @media screen and (max-width: 440px) {
        .food .food-list--item .txt-area {
          width: 100%; } }
      .food .food-list--item .txt-area .ttl {
        color: #C4412B;
        font-size: 5.0rem; }
        @media screen and (max-width: 936px) {
          .food .food-list--item .txt-area .ttl {
            font-size: 5.3418803418803416vw; } }
        @media screen and (max-width: 440px) {
          .food .food-list--item .txt-area .ttl {
            font-size: 8vw;
            text-align: center;
            margin-bottom: 4vw; } }
