/* mixin css */
/* ------------------------------------------------------------------------
	 MEDIAQUERY
------------------------------------------------------------------------ */
/*	COMMON
-------------------------------------------------- */
.pcOnly {
  display: none !important;
}

html, body {
  min-width: 0;
}

#ronhermancafe #header-bulgaria {
  box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.2);
}
#ronhermancafe .sp_mega_menu .mega_tab_box ul li a,
#ronhermancafe .menubar .menubar_box li.sub a,
#ronhermancafe .sp_mega_menu section.recipe h2,
#ronhermancafe .searchs_box .searchs_box_inner .narrowing_box .tbl_box p {
  font-size: 2.4rem;
}
#ronhermancafe .searchs_box .searchs_box_inner ul.select_type li a,
#ronhermancafe .searchs_box .searchs_box_inner .recipe_white_btn a {
  font-size: 2.6rem;
}
#ronhermancafe .menubar .menubar_box li a,
#ronhermancafe .recipe_detail_text,
#ronhermancafe .searchs_box .searchs_box_inner p input {
  font-size: 2.8rem;
}
#ronhermancafe #wrap .contents {
  margin-top: 18.8%;
  overflow: hidden;
  color: #333;
  font-family: "Noto Serif JP", sans-serif;
  font-size: 14px;
  font-size: 3.7333333333vw;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#ronhermancafe #wrap .contents p, #ronhermancafe #wrap .contents h1, #ronhermancafe #wrap .contents h2, #ronhermancafe #wrap .contents h3, #ronhermancafe #wrap .contents h4, #ronhermancafe #wrap .contents h5, #ronhermancafe #wrap .contents h6, #ronhermancafe #wrap .contents a, #ronhermancafe #wrap .contents li, #ronhermancafe #wrap .contents caption, #ronhermancafe #wrap .contents td, #ronhermancafe #wrap .contents th, #ronhermancafe #wrap .contents dt, #ronhermancafe #wrap .contents dd, #ronhermancafe #wrap .contents input, #ronhermancafe #wrap .contents textarea, #ronhermancafe #wrap .contents select, #ronhermancafe #wrap .contents address {
  font-family: "Noto Serif JP", sans-serif;
  font-size: inherit;
}
#ronhermancafe #wrap .contents a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
#ronhermancafe #wrap .contents img {
  width: 100%;
  max-width: none;
  height: auto;
  vertical-align: bottom;
  -webkit-backface-visibility: hidden;
}
#ronhermancafe #wrap .contents img[src$=svg] {
  max-width: 100%;
}
#ronhermancafe #wrap .contents section {
  position: relative;
  z-index: 0;
}
#ronhermancafe #wrap .contents .anchor,
#ronhermancafe #wrap .contents .anchor_external {
  display: block;
  position: absolute;
  top: -0.8928571429em;
}
#ronhermancafe #wrap .contents .inner {
  margin: 0 auto;
  position: relative;
  z-index: 70;
  width: 89.3333333333%;
}
#ronhermancafe #wrap .contents .inner:before, #ronhermancafe #wrap .contents .inner:after {
  position: absolute;
  content: "";
}
#ronhermancafe #wrap .contents h2 {
  margin: 0 auto;
}
#ronhermancafe #wrap .contents h3.lead-head {
  font-weight: normal;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 17px;
  font-size: 4.5333333333vw;
}
#ronhermancafe #wrap .contents .lead-text {
  line-height: 1.5;
  text-align: center;
  letter-spacing: -0.05em;
}
#ronhermancafe #wrap .contents .link-btn {
  display: inline-block;
  position: relative;
}
#ronhermancafe #wrap .contents .link-btn a {
  border-radius: 0.1785714286em;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5em;
  color: #fff;
  background: #1b2e60;
  font-weight: 600;
}
#ronhermancafe #wrap .contents .link-btn:before {
  position: absolute;
  top: 50%;
  right: 0.75em;
  transform: translateY(-50%);
  content: "";
}
#ronhermancafe #wrap .contents .link-btn.-arrow {
  min-width: 11.6071428571em;
}
#ronhermancafe #wrap .contents .link-btn.-arrow:before {
  width: 0.3928571429em;
  height: 0.6428571429em;
  background: url(/pc/special/ronhermancafe/data/images/btn-arrow.svg) no-repeat;
  background-size: 100% auto;
}
#ronhermancafe #wrap .contents .link-btn.-external {
  min-width: 22.5em;
  letter-spacing: -0.1em;
}
#ronhermancafe #wrap .contents .link-btn.-external:before {
  width: 0.6785714286em;
  height: 0.6071428571em;
  background: url(/pc/special/ronhermancafe/data/images/btn-external.png) no-repeat;
  background-size: 100% auto;
}
#ronhermancafe #wrap .contents .kv-section {
  margin: 0 2.6666666667%;
  padding: 2.6666666667% 0;
  z-index: 2;
}
#ronhermancafe #wrap .contents .kv-side-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0.3571428571em;
  transform: translateX(100%);
  width: 3.2%;
  transition: opacity 0.5s, height 0.5s;
  opacity: 0;
}
#ronhermancafe #wrap .contents .kv-side-wrap.init {
  opacity: 1;
}
#ronhermancafe #wrap .contents .kv-side-wrap.fix {
  position: fixed;
  transform: none;
}
#ronhermancafe #wrap .contents .introduction {
  padding: 17.6% 0 20.2666666667%;
  z-index: 1;
}
#ronhermancafe #wrap .contents .introduction p {
  line-height: 1.5;
  text-align: center;
  font-feature-settings: "palt";
  font-size: 16px;
  font-size: 4.2666666667vw;
}
#ronhermancafe #wrap .contents .introduction p + p {
  margin-top: 5.9701492537%;
}
#ronhermancafe #wrap .contents .introduction:before {
  bottom: -11.0714285714em;
  left: -1.4285714286em;
  width: 9.6071428571em;
  height: 17.3571428571em;
  background: url(/pc/special/ronhermancafe/data/images/introduction-bgi-sp.png) no-repeat;
  background-size: 100% auto;
}
#ronhermancafe #wrap .contents .menu-section {
  padding: 20.2666666667% 0 59.3333333333%;
}
#ronhermancafe #wrap .contents .menu-section .inner:before {
  top: -5.4285714286em;
  left: 2.1428571429em;
  z-index: -1;
  width: 23.2142857143em;
  height: 26.3571428571em;
  background: #efefef;
}
#ronhermancafe #wrap .contents .menu-section .inner:after {
  right: -1.4285714286em;
  bottom: -15.8571428571em;
  width: 17.1785714286em;
  height: 19.0714285714em;
  background: url(/pc/special/ronhermancafe/data/images/menu-bgi-sp.png) no-repeat;
  background-size: 100% auto;
  pointer-events: none;
}
#ronhermancafe #wrap .contents .menu-section h2 {
  width: 16.4179104478%;
}
#ronhermancafe #wrap .contents .menu-detail {
  margin-top: 17.6119402985%;
  position: relative;
}
#ronhermancafe #wrap .contents .menu-detail-text {
  margin-top: 10.7462686567%;
}
#ronhermancafe #wrap .contents .menu-detail-text h3 {
  line-height: 1.25;
  font-size: 20px;
  font-size: 5.3333333333vw;
}
#ronhermancafe #wrap .contents .menu-detail-text .price {
  margin-top: 2.6865671642%;
  padding-left: 0.2985074627%;
  display: block;
  font-size: 16px;
  font-size: 4.2666666667vw;
}
#ronhermancafe #wrap .contents .menu-detail-text .tax {
  font-size: 12px;
  font-size: 3.2vw;
}
#ronhermancafe #wrap .contents .menu-detail-text p {
  margin-top: 2.6865671642%;
  padding-left: 6.2686567164%;
  line-height: 2;
}
#ronhermancafe #wrap .contents .menu-product-link {
  margin-top: 19.4029850746%;
  padding-left: 42.6865671642%;
  position: relative;
  min-height: 12.1785714286em;
  background: url(/pc/special/ronhermancafe/data/images/menu-link-bgi-sp.jpg) top left no-repeat;
  background-size: auto 100%;
}
#ronhermancafe #wrap .contents .menu-product-link img {
  position: absolute;
  top: -2.9285714286em;
  left: 2.4285714286em;
}
#ronhermancafe #wrap .contents .menu-product-link p {
  padding-top: 2.3571428571em;
  line-height: 1.535;
}
#ronhermancafe #wrap .contents .menu-product-link .marker {
  padding-left: 0.3571428571em;
  background: #fff;
}
#ronhermancafe #wrap .contents .menu-product-link .link-btn {
  margin-top: 0.6428571429em;
  width: 12.3214285714em;
}
#ronhermancafe #wrap .contents .period-store-section {
  margin-top: 20.8%;
  padding-bottom: 21.3333333333%;
  z-index: 1;
}
#ronhermancafe #wrap .contents .period-store-section .inner:before {
  top: -0.3571428571em;
  right: -1.4285714286em;
  width: 8.0714285714em;
  height: 8.3214285714em;
  background: url(/pc/special/ronhermancafe/data/images/period-store-bgi-1-sp.png) top right no-repeat;
  background-size: 100% auto;
}
#ronhermancafe #wrap .contents .period-store-section .inner:after {
  right: -1.4285714286em;
  bottom: -8.5em;
  width: 10.7142857143em;
  height: 13.8214285714em;
  background: url(/pc/special/ronhermancafe/data/images/period-store-bgi-2-sp.png) bottom left no-repeat;
  background-size: 100% auto;
}
#ronhermancafe #wrap .contents .period-store-section h2 {
  width: 40.8955223881%;
}
#ronhermancafe #wrap .contents .period-info {
  margin-top: 17.9104477612%;
  padding: 7.7611940299% 4.4776119403% 8.3582089552%;
  background: #efefef;
}
#ronhermancafe #wrap .contents .period-info p {
  margin-top: 0.5em;
  text-align: center;
  letter-spacing: 0.02em;
}
#ronhermancafe #wrap .contents .store-info {
  margin-top: 10.7462686567%;
}
#ronhermancafe #wrap .contents .store-info .store-list {
  margin-top: 8.6567164179%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#ronhermancafe #wrap .contents .store-info .store-list li {
  width: 100%;
}
#ronhermancafe #wrap .contents .store-info .store-list li + li {
  margin-top: 8.6567164179%;
}
#ronhermancafe #wrap .contents .store-info .store-list .store-head {
  margin-top: 2.9850746269%;
  width: fit-content;
}
#ronhermancafe #wrap .contents .store-info .store-list .store-head img {
  width: 75%;
}
#ronhermancafe #wrap .contents .store-info .store-list .store-name {
  margin-top: 3px;
  font-size: 12px;
  font-size: 3.2vw;
}
#ronhermancafe #wrap .contents .store-info .store-list .store-opening {
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-size: 12px;
  font-size: 3.2vw;
}
#ronhermancafe #wrap .contents .store-info .store-list .store-opening span {
  font-size: 10px;
  font-size: 2.6666666667vw;
}
#ronhermancafe #wrap .contents .store-info .store-list .store-address, #ronhermancafe #wrap .contents .store-info .store-list .store-tel {
  font-size: 12px;
  font-size: 3.2vw;
}
#ronhermancafe #wrap .contents .store-info .store-list .store-address {
  margin-top: 2.9850746269%;
  padding-top: 1.7910447761%;
  border-top: solid 1px #ccc;
  line-height: 1.25;
  letter-spacing: 0.05em;
}
#ronhermancafe #wrap .contents .store-info .store-list .store-tel {
  margin-top: 1.1940298507%;
}
#ronhermancafe #wrap .contents .movie-section {
  padding: 20.5333333333% 0 21.3333333333%;
  background: #efefef;
}
#ronhermancafe #wrap .contents .movie-section .inner:after {
  bottom: -13.5714285714em;
  left: -1.4285714286em;
  z-index: -1;
  width: 11.3928571429em;
  height: 16.3928571429em;
  background: url(/pc/special/ronhermancafe/data/images/movie-bgi-sp.png) bottom left no-repeat;
  background-size: 100% auto;
}
#ronhermancafe #wrap .contents .movie-section h2 {
  width: 17.3134328358%;
}
#ronhermancafe #wrap .contents .lead-area.-movie {
  margin-top: 16.4179104478%;
  padding-bottom: 8.0597014925%;
  background-image: radial-gradient(circle, #333333 0.0357142857em, transparent 0.0357142857em);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 0.2142857143em 0.0714285714em;
}
#ronhermancafe #wrap .contents .lead-area.-movie .lead-text {
  margin-top: 7.4626865672%;
}
#ronhermancafe #wrap .contents .movie-schedule {
  margin-top: 5.9701492537%;
}
#ronhermancafe #wrap .contents .movie-start {
  border: solid 1px #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3529411765em;
  font-weight: normal;
  font-size: 17px;
  font-size: 4.5333333333vw;
}
#ronhermancafe #wrap .contents .movie-detail {
  margin-top: 2.0895522388%;
}
#ronhermancafe #wrap .contents .movie-detail dl {
  padding-left: 1.7910447761%;
  display: flex;
  letter-spacing: -0.06em;
}
#ronhermancafe #wrap .contents .movie-detail dt {
  font-weight: bold;
}
#ronhermancafe #wrap .contents .movie-thumb {
  margin-top: 5.3731343284%;
  display: block;
}
#ronhermancafe #wrap .contents .about-section {
  margin-top: 20.5333333333%;
}
#ronhermancafe #wrap .contents .about-section h2 {
  width: 17.4626865672%;
}
#ronhermancafe #wrap .contents .lead-area.-about {
  margin-top: 17.0149253731%;
}
#ronhermancafe #wrap .contents .lead-area.-about .lead-text {
  margin-top: 6.8656716418%;
}
#ronhermancafe #wrap .contents .about-product-list {
  margin-top: 11.3432835821%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.8571428571em 0;
}
#ronhermancafe #wrap .contents .about-product-list li {
  position: relative;
  width: 48.5074626866%;
  text-align: center;
}
#ronhermancafe #wrap .contents .about-product-list li:before {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 11.9642857143em;
  background: #efefef;
  content: "";
}
#ronhermancafe #wrap .contents .about-product-list li:nth-child(odd):before {
  left: 0;
}
#ronhermancafe #wrap .contents .about-product-list li:nth-child(even):before {
  right: 0;
}
#ronhermancafe #wrap .contents .about-product-list li:has(.-plain-series):before {
  height: 9.8928571429em;
}
#ronhermancafe #wrap .contents .about-product-list li:has(.-zero-fatplain-series):before {
  height: 10.3571428571em;
  background: #e7e7e7;
}
#ronhermancafe #wrap .contents .about-product-list li:has(.-other-series):before {
  height: 12.7857142857em;
}
#ronhermancafe #wrap .contents .about-product-list li:has(.-other-series):last-child:before {
  background: #e7e7e7;
}
#ronhermancafe #wrap .contents .about-product-head {
  position: absolute;
  top: -0.7857142857em;
  transform: translateX(-50%);
}
#ronhermancafe #wrap .contents .about-product-head.-detail-180g-LB81-plain {
  left: 28%;
}
#ronhermancafe #wrap .contents .about-product-head.-detail-180g-LB81-nonfatplain {
  left: 29%;
}
#ronhermancafe #wrap .contents .about-product-head.-detail-400g-Ca-Fe {
  left: 61%;
}
#ronhermancafe #wrap .contents .about-product-head.-detail-400g-LB81-plain-home-made-story {
  left: 42%;
}
#ronhermancafe #wrap .contents .about-product-img {
  display: flex;
  align-items: flex-end;
  min-height: 9.2857142857em;
}
#ronhermancafe #wrap .contents .about-product-img.-plain-series {
  margin-top: 17.2307692308%;
}
#ronhermancafe #wrap .contents .about-product-img.-zero-fatplain-series {
  margin-top: 20.9230769231%;
}
#ronhermancafe #wrap .contents .about-product-img.-other-series {
  margin-top: 43.0769230769%;
}
#ronhermancafe #wrap .contents .about-product-name {
  margin: 4.3076923077% 0 6.7692307692%;
  font-weight: normal;
  line-height: 1.25;
  letter-spacing: -0.05em;
  font-size: 12px;
  font-size: 3.2vw;
}
#ronhermancafe #wrap .contents .about-product-list-bottom {
  margin-top: 4.4776119403%;
}
#ronhermancafe #wrap .contents .about-product-list-bottom img {
  position: relative;
  left: 0.6428571429em;
}
#ronhermancafe #wrap .contents .about-ronhermancafe-wrap {
  margin-top: 16%;
  padding: 5.3333333333% 0 16%;
  background: #efefef;
}
#ronhermancafe #wrap .contents .about-ronhermancafe-text {
  margin-top: 10.1492537313%;
}
#ronhermancafe #wrap .contents .about-ronhermancafe-text h3 {
  font-weight: normal;
  font-size: 17px;
  font-size: 4.5333333333vw;
}
#ronhermancafe #wrap .contents .about-ronhermancafe-text p {
  margin-top: 6.2686567164%;
  line-height: 1.5;
  font-size: 12px;
  font-size: 3.2vw;
}
#ronhermancafe #wrap .contents .about-ronhermancafe-text p + p {
  margin-top: 5.3731343284%;
}
#ronhermancafe #wrap .contents .about-ronhermancafe-text .link-btn {
  margin-top: 5.3731343284%;
}
@media (orientation: landscape) {
  #ronhermancafe #wrap .contents .contents {
    margin-top: 8.6666666667%;
  }
}
#ronhermancafe #footer02 {
  font-size: 16px;
}
#ronhermancafe footer .foot_inner ul.main_list li {
  font-size: 16px;
}
#ronhermancafe footer .foot_inner ul.sub_list li {
  font-size: 12px;
}

/* pc-small
-------------------------------------------------- */
/* tablet
-------------------------------------------------- */
/* sp-side
-------------------------------------------------- */
@media only screen and (max-width: 640px) {
  html {
    font-size: 62.5%;
  }
}
/* iPhone5-side
-------------------------------------------------- */
@media only screen and (max-width: 568px) {
  html {
    font-size: 55.46875%;
  }
}
/* android-w
-------------------------------------------------- */
@media only screen and (max-width: 540px) {
  html {
    font-size: 52.734375%;
  }
}
/* android-m
-------------------------------------------------- */
@media only screen and (max-width: 480px) {
  html {
    font-size: 46.875%;
  }
}
/* iphone6plus
-------------------------------------------------- */
@media only screen and (max-width: 414px) {
  html {
    font-size: 40.4296875%;
  }
}
/* iphone6
-------------------------------------------------- */
@media only screen and (max-width: 375px) {
  html {
    font-size: 36.62109375%;
  }
  .priceTable .yen span {
    letter-spacing: -0.025em;
  }
}
/* android
-------------------------------------------------- */
@media only screen and (max-width: 360px) {
  html {
    font-size: 35.15625%;
  }
}
/* iphone5, android-s
-------------------------------------------------- */
@media only screen and (max-width: 320px) {
  html {
    font-size: 31.25%;
  }
}