@charset "UTF-8";
body {
  background-image: url(../images/bg_cross.png);
  position: relative;
  font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

header {
  background-color: #fff;
  position: relative;
}

.mv {
  width: 95.9459459459%;
  margin: 0 auto;
  background: url(../images/mv_sp.jpg) top center no-repeat;
  background-size: contain;
  padding-top: 118.7%;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.date-place {
  width: 88.5135135135%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: url(../images/datepalce_sp.png) top center no-repeat;
  background-size: contain;
  padding-top: 18%;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.main-info {
  width: 100%;
  background-color: #fff;
}
.main-info p {
  width: 86.4864864865%;
  margin: -0.1rem auto;
  padding: 1.3513513514% 0;
  font-size: 1.2rem;
  line-height: 1.8rem;
  color: #391000;
}

.nav-area {
  width: 100%;
  background-color: #fff;
}

.nav-list {
  display: flex;
  flex-direction: row;
  width: 89.1891891892%;
  margin: 0 auto;
  padding: 3rem 0;
}
.nav-list li {
  width: 100%;
  text-align: center;
}
.nav-list li img {
  width: 100%;
}

.shop-ramen {
  position: relative;
  padding-bottom: 16.2162162162%;
}
.shop-ramen::before {
  content: "";
  background: url(../images/decoration_left.png) center bottom no-repeat;
  background-size: contain;
  display: inline-block;
  width: 56.9333333333%;
  padding-top: 35%;
  position: absolute;
  top: -7.5rem;
  left: -5rem;
  z-index: 1;
}

.shop_ttl {
  display: block;
  width: 34.4594594595%;
  margin: 14.5945945946% auto 5.6756756757%;
  position: relative;
  z-index: 3;
}
.shop_ttl img {
  width: 100%;
}

.day-ttl {
  display: block;
  width: 87.8378378378%;
  margin: 0 auto 6.0810810811%;
}
.day-ttl img {
  width: 100%;
}

.cloud-right {
  position: relative;
}
.cloud-right::before {
  content: "";
  background: url(../images/decoration_right.png) center top no-repeat;
  background-size: contain;
  display: inline-block;
  width: 56.9333333333%;
  padding-top: 35%;
  position: absolute;
  top: -4.5rem;
  right: -8rem;
  z-index: -2;
}

.shop_list {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.shop_list li {
  position: relative;
  width: 49.7297297297%;
  margin-bottom: 3.3783783784%;
}
.shop_list li figure {
  position: relative;
  background: url(../images/bg_ramen.png) center center no-repeat;
  background-size: cover;
}
.shop_list li figure::after {
  content: "";
  background: url(../images/plus.png) center bottom no-repeat;
  background-size: contain;
  display: inline-block;
  width: 14.6739130435%;
  padding-top: 100%;
  position: absolute;
  bottom: 1.4rem;
  right: 1.4rem;
}
.shop_list li img {
  width: 100%;
}
.shop_list dl {
  color: #391000;
  padding: 0 5.9782608696%;
  font-weight: 700;
}
.shop_list dt {
  font-size: 1.2rem;
  line-height: 2rem;
}
.shop_list dd {
  padding-top: 0.2rem;
  line-height: 1.8rem;
}

.ico-ramen::before {
  content: "";
  background: url(../images/icon_ramen.png) no-repeat;
  background-size: contain;
  display: inline-block;
  width: 20.9239130435%;
  padding-top: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.ico-sponsor::before {
  content: "";
  background: url(../images/icon_sponsor.png) no-repeat;
  background-size: contain;
  display: inline-block;
  width: 20.9239130435%;
  padding-top: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.ico-gift::before {
  content: "";
  background: url(../images/icon_gift.png) no-repeat;
  background-size: contain;
  display: inline-block;
  width: 20.9239130435%;
  padding-top: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#access {
  width: 100%;
  position: relative;
  background-color: #fff;
  padding-bottom: 7.4324324324%;
}
#access::before {
  content: "";
  background: url(../images/right_cloud.png) center top no-repeat;
  background-size: contain;
  display: inline-block;
  width: 56.9333333333%;
  padding-top: 35%;
  position: absolute;
  top: -5rem;
  left: -5rem;
  z-index: 1;
}

.access_ttl {
  display: block;
  width: 27.8378378378%;
  margin: 0 auto;
  padding: 14.5945945946% 0 5.6756756757%;
  position: relative;
  z-index: 3;
}
.access_ttl img {
  width: 100%;
}

.area_ttl {
  display: block;
  width: 35.9459459459%;
  margin: 0 auto;
  padding: 14.5945945946% 0 1.6216216216%;
  position: relative;
  z-index: 3;
}
.area_ttl img {
  width: 100%;
}

.g-map {
  width: 89.1891891892%;
  position: relative;
  padding-top: 56.25%;
  margin: 0 auto;
}
.g-map iframe {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.area-map {
  width: 89.1891891892%;
  margin: 2.7027027027% auto;
}
.area-map img {
  width: 100%;
}

#notes {
  background: url(../images/bg_wagara.png) top left repeat;
  background-size: 24.3243243243%;
  position: relative;
}
#notes::before {
  content: "";
  background: url(../images/decoration_right.png) center top no-repeat;
  background-size: contain;
  display: inline-block;
  width: 56.9333333333%;
  padding-top: 35%;
  position: absolute;
  top: -4.5rem;
  right: -8rem;
  z-index: 1;
}

.notes_ttl {
  display: block;
  width: 31.0810810811%;
  margin: 0 auto;
  padding: 14.5945945946% 0 5.6756756757%;
  position: relative;
  z-index: 3;
}
.notes_ttl img {
  width: 100%;
}

.notes-list {
  width: 89.1891891892%;
  margin: 0 auto;
  padding-bottom: 8.3783783784%;
}
.notes-list dt {
  font-size: 1.4rem;
  font-weight: 700;
  color: #b41e1e;
  padding-top: 2.7027027027%;
  line-height: 3.2rem;
}
.notes-list dd {
  font-size: 1.2rem;
  color: #391000;
  line-height: 2rem;
  padding-bottom: 2.7027027027%;
  border-bottom: 2px solid #e3c267;
}

#twitter-area {
  width: 100%;
  position: relative;
  background-color: #b41e1e;
  padding-bottom: 6.7567567568%;
}

.sns_ttl {
  display: block;
  width: 37.5675675676%;
  margin: 0 auto;
  padding: 12.972972973% 0;
  position: relative;
  z-index: 3;
}
.sns_ttl img {
  width: 100%;
}

.twitter_widget {
  width: 89.1891891892%;
  background-color: #fff;
  margin: 0 auto;
  position: relative;
  height: 400px;
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
}
.twitter_widget iframe {
  height: 100vh;
}

#footer {
  width: 100%;
  background-color: #fff;
  color: #391000;
  text-align: center;
  padding: 2.7027027027% 0;
}

/* =====================================================================
*    popup
* =================================================================== */
.popup {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 99999;
}

.popup_area {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.popup_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(240, 220, 98, 0.9);
}

.popup_slider .slick-dots {
  position: absolute;
  display: flex;
  justify-content: center;
  bottom: -2rem;
  left: 0;
  width: 100%;
}
.popup_slider .slick-dots li {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 0.6rem;
  background: initial;
}
.popup_slider .slick-dots li::before, .popup_slider .slick-dots li::after {
  all: initial;
}
.popup_slider .slick-dots li button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
}
.popup_slider .slick-dots li button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #e7e7e7;
}
.popup_slider .slick-dots li.slick-active button::before {
  background-color: #cf161a;
}

.popup_area {
  position: relative;
}
.popup_area .popup_close {
  position: absolute;
  top: 5.9459459459%;
  right: 11.3513513514%;
  width: 11.3513513514%;
  z-index: 10;
}
.popup_area .popup_close img {
  width: 100%;
}

.popup_list {
  position: relative;
  padding-top: 13.5135135135%;
}
.popup_list li {
  width: 90.2702702703%;
  margin: 0 auto;
  color: #391000;
  background: url(../images/contents_bg.png) top center repeat-y;
  background-size: contain;
  position: relative;
  display: none;
  z-index: 2;
}
.popup_list li::before {
  width: 100%;
  display: block;
  content: "";
  margin: 0 auto;
  background: url(../images/contents_bg_head.png) top center repeat-x;
  background-size: cover;
  padding-top: 13.5%;
  position: absolute;
  top: -4.5%;
}
.popup_list li::after {
  width: 100%;
  display: block;
  content: "";
  margin: 0 auto;
  background: url(../images/contents_bg_footer.png) top center repeat-x;
  background-size: cover;
  padding-top: 13.2%;
  position: absolute;
  bottom: -5%;
  z-index: 1;
}
.popup_list li figure {
  display: block !important;
  width: 73.7837837838% !important;
  background-color: #e7e7e7;
  margin: 0 auto;
  border-radius: 2rem;
}
.popup_list li figure img {
  width: 100%;
  border-radius: 2rem;
}
.popup_list li h2 {
  width: 73.7837837838%;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2rem;
  text-align: center;
  margin: 2.5rem auto 0;
}
.popup_list li h2 img {
  width: 100%;
}
.popup_list li p {
  width: 73.7837837838%;
  margin: 4.0540540541% auto;
  font-size: 1.2rem;
  line-height: 2rem;
  position: relative;
  height: 8rem;
  overflow: scroll;
  z-index: 2;
}

.btn-top {
  position: fixed;
  width: 10.8108108108%;
  bottom: 4.0540540541%;
  right: 4.0540540541%;
  z-index: 20;
}
.btn-top img {
  width: 100%;
}

.shiromachi {
  position: fixed;
  width: 20.2702702703%;
  bottom: 4.0540540541%;
  left: 4.0540540541%;
  z-index: 20;
  background-color: #fff;
  border-radius: 50%;
}
.shiromachi img {
  width: 100%;
}

.ramen_03::before {
  position: absolute;
  border: 1px solid #391000;
  z-index: 4;
  content: "神奈川";
  background-color: #5fa929;
  border-radius: 2rem;
  padding: 0.3rem 0.5rem 0.2em;
  color: #fff;
  font-weight: 700;
  top: 1.4rem;
  right: 1.4rem;
}

.ramen_01::before {
  position: absolute;
  border: 1px solid #391000;
  z-index: 4;
  content: "岐阜";
  background-color: #d8d000;
  border-radius: 2rem;
  padding: 0.2rem 0.5rem;
  color: #fff;
  font-weight: 700;
  top: 1.4rem;
  right: 1.4rem;
}

.ramen_02::before {
  position: absolute;
  border: 1px solid #391000;
  z-index: 4;
  content: "兵庫";
  background-color: #ecaf00;
  border-radius: 2rem;
  padding: 0.2rem 0.5rem;
  color: #fff;
  font-weight: 700;
  top: 1.4rem;
  right: 1.4rem;
}

.ramen_07::before {
  position: absolute;
  border: 1px solid #391000;
  z-index: 4;
  content: "山形";
  background-color: #007f87;
  border-radius: 2rem;
  padding: 0.2rem 0.5rem;
  color: #fff;
  font-weight: 700;
  top: 1.4rem;
  right: 1.4rem;
}

.ramen_06::before {
  position: absolute;
  border: 1px solid #391000;
  z-index: 4;
  content: "鹿児島";
  background-color: #960783;
  border-radius: 2rem;
  padding: 0.2rem 0.5rem;
  color: #fff;
  font-weight: 700;
  top: 1.4rem;
  right: 1.4rem;
}

.ramen_10::before {
  position: absolute;
  border: 1px solid #391000;
  z-index: 4;
  content: "栃木";
  background-color: #5fa929;
  border-radius: 2rem;
  padding: 0.2rem 0.5rem;
  color: #fff;
  font-weight: 700;
  top: 1.4rem;
  right: 1.4rem;
}
.photo-area {
  display: flex;
  flex-direction: column;
  justify-content:space-around;
}
.photo-area figure {
  width: 90%;
  margin: .5rem auto;
}

.photo-area img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .photo-area {

      flex-direction: row;
    }
.photo-area figure {
  width: 90%;
  max-width: 600px;
  margin: .5rem 2rem;
}
  .mv {
    width: 100%;
    margin: 0 auto;
    background: url(../images/mv_pc.jpg) top center no-repeat;
    background-size: contain;
    padding-top: 33.8%;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
  }
  .main-info p {
    width: 73.1428571429%;
    margin: 0 auto;
    padding: 0.8571428571% 0;
    font-size: 1.2rem;
    line-height: 2.2rem;
    color: #391000;
  }
  .date-place {
    width: 53.1%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/datepalce_pc.png) top center no-repeat;
    background-size: contain;
    padding-top: 4.58%;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
  }
  .nav-list {
    width: 60%;
    margin: 0 auto;
    padding: 1.5rem 0;
  }
  .shop_ttl {
    width: 11.7142857143%;
    margin: 7.4285714286% auto 1.7857142857%;
  }
  .day-ttl {
    width: 33.3571428571%;
    margin: 0 auto 3.5714285714%;
    position: relative;
    z-index: 3;
  }
  .shop-ramen::before {
    width: 47.3484848485%;
    padding-top: 35%;
    top: -8rem;
    left: -2rem;
    z-index: 1;
  }
  .cloud-right {
    position: relative;
  }
  .cloud-right::before {
    content: "";
    width: 80%;
    padding-top: 100%;
    position: absolute;
    top: -10rem;
    right: -32rem;
    z-index: -2;
    z-index: -2;
  }
  .shop_list {
    width: 75.4285714286%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
  }
  .shop_list li {
    width: 25%;
    margin-bottom: 3.2196969697%;
  }
  .shop_list li figure::after {
    width: 14.3939393939%;
  }
  .shop_list dl {
    color: #391000;
    padding: 0 8.3333333333%;
  }
  .shop_list dt {
    font-size: 1.2rem;
    line-height: 1.8rem;
    font-weight: 700;
  }
  .shop_list dd {
    padding-top: 0.2rem;
    line-height: 1.8rem;
  }
  .ico-ramen::before {
    content: "";
    background: url(../images/icon_ramen.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 21.9696969697%;
    padding-top: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .ico-sponsor::before {
    content: "";
    background: url(../images/icon_sponsor.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 21.9696969697%;
    padding-top: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .ico-gift::before {
    content: "";
    background: url(../images/icon_gift.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 21.9696969697%;
    padding-top: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #access::before {
    width: 30.5%;
    padding-top: 35%;
    top: -6rem;
    left: -4rem;
  }
  .access_ttl {
    width: 9.5714285714%;
    padding: 9.2857142857% 0 3%;
  }
  .area_ttl {
    width: 12.5%;
    padding: 9.2857142857% 0 0;
  }
  .g-map {
    width: 73.1428571429%;
    padding-top: 36.25%;
    padding-bottom: 6.4285714286%;
  }
  .g-map::before {
    content: "";
    background: url(../images/txtAccess.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 8.7890625%;
    padding-top: 50%;
    position: absolute;
    top: -5rem;
    left: -3rem;
    z-index: 1;
  }
  .area-map {
    width: 57.1428571429%;
    margin: 2.8571428571% auto;
  }
  #notes {
    background-size: 12.8571428571%;
  }
  #notes::before {
    width: 30.5%;
    padding-top: 70%;
    top: -10rem;
    right: -4rem;
  }
  .notes_ttl {
    display: block;
    width: 10.4285714286%;
    padding: 8.5714285714% 0 3.2857142857%;
  }
  .notes-list {
    width: 63.5714285714%;
    padding-bottom: 7.4285714286%;
  }
  .notes-list::before {
    content: "";
    background: url(../images/txtNotes.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 8.7890625%;
    padding-top: 50%;
    position: absolute;
    top: 4rem;
    right: 3rem;
    z-index: 1;
  }
  .notes-list dt {
    font-weight: 700;
    color: #cf161a;
    padding-top: 2.7027027027%;
    line-height: 3.2rem;
  }
  .notes-list dd {
    font-size: 1.2rem;
    color: #391000;
    line-height: 2rem;
    padding-bottom: 2.7027027027%;
    border-bottom: 2px solid #e3c267;
  }
  .sns_ttl {
    width: 14.1428571429%;
    padding: 7.1428571429% 0 3%;
  }
  .twitter_widget {
    width: 55.7142857143%;
  }
  .twitter_widget::before {
    content: "";
    background: url(../images/txtSNS.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 12.0512820513%;
    padding-top: 100%;
    position: absolute;
    top: -5rem;
    left: -10rem;
    z-index: 1;
  }
  .popup_area .popup_close {
    top: 6%;
    right: 32.4285714286%;
    width: 6%;
    z-index: 10;
    cursor: pointer;
  }
  .popup_list {
    position: relative;
    padding-top: 7.1428571429%;
  }
  .popup_list li {
    width: 54.7857142857%;
    margin: 0 auto;
    color: #391000;
    background: url(../images/contents_bg.png) top center repeat-y;
    background-size: contain;
    position: relative;
  }
  .popup_list li::before {
    padding-top: 12%;
    top: -7.5%;
  }
  .popup_list li::after {
    padding-top: 13.4%;
    bottom: -7.5%;
  }
  .popup_list li figure {
    width: 54.7588005215% !important;
  }
  .popup_list li h2 {
    width: 54.7588005215%;
    font-size: 1.4rem;
    line-height: 2rem;
  }
  .popup_list li p {
    width: 54.7588005215%;
    margin: 3.9113428944% auto;
    font-size: 1.2rem;
    line-height: 2rem;
    height: auto;
    overflow: auto;
  }
  #footer {
    padding: 2.8571428571% 0;
  }
  .btn-top {
    width: 5.7142857143%;
    bottom: 2.1428571429%;
    right: 2.1428571429%;
    z-index: 20;
  }
  .shiromachi {
    width: 10.7142857143%;
    bottom: 2.1428571429%;
    left: 2.1428571429%;
  }
}
@media (min-width: 769px) and (max-width: 1399px) {
  .popup_list li::before {
    padding-top: 13.5%;
    top: -4.5%;
  }
  .popup_list li::after {
    padding-top: 13.2%;
    bottom: -5%;
  }
}
@media screen and (min-width: 1400px) {
  .shop-ramen::before {
    width: 47.3484848485%;
    top: -12rem;
    left: -8rem;
  }
  .cloud-right::before {
    content: "";
    width: 80%;
    top: -16rem;
    right: -46rem;
  }
  #access::before {
    top: -8.2rem;
    left: -2rem;
  }
}/*# sourceMappingURL=layout.css.map */