#ronhermancafe {
  color: #333;
  font-family: "Noto Serif JP", sans-serif;
  font-optical-sizing: auto;
  font-size: 14px;
}
#ronhermancafe .contents {
  padding-top: 40px;
  overflow: hidden;
  background: #f8f8f8;
  font-family: "Noto Serif JP", sans-serif;
  font-size: 16px;
}
#ronhermancafe .contents p, #ronhermancafe .contents h1, #ronhermancafe .contents h2, #ronhermancafe .contents h3, #ronhermancafe .contents h4, #ronhermancafe .contents h5, #ronhermancafe .contents h6, #ronhermancafe .contents a, #ronhermancafe .contents li, #ronhermancafe .contents caption, #ronhermancafe .contents td, #ronhermancafe .contents th, #ronhermancafe .contents dt, #ronhermancafe .contents dd, #ronhermancafe .contents input, #ronhermancafe .contents textarea, #ronhermancafe .contents select, #ronhermancafe .contents address {
  font-family: "Noto Serif JP", sans-serif;
}
#ronhermancafe .contents a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}
#ronhermancafe .contents a:hover {
  opacity: 0.7;
}
#ronhermancafe .contents img {
  max-width: none;
  vertical-align: bottom;
  image-rendering: -webkit-optimize-contrast;
}
#ronhermancafe .contents img[src$=svg] {
  max-width: 100%;
}
#ronhermancafe .contents section {
  position: relative;
  z-index: 0;
}
#ronhermancafe .contents .inner {
  margin: 0 auto;
  position: relative;
  width: 1000px;
}
#ronhermancafe .contents .inner:before, #ronhermancafe .contents .inner:after {
  position: absolute;
  content: "";
}
#ronhermancafe .contents h2 {
  text-align: center;
}
#ronhermancafe .contents h3.lead-head {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.1em;
}
#ronhermancafe .contents .lead-text {
  text-align: center;
}
#ronhermancafe .contents .link-btn {
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 40px;
  color: #fff;
  background: #1b2e60;
  font-size: 14px;
  font-weight: 600;
}
#ronhermancafe .contents .link-btn:before {
  position: absolute;
  top: 50%;
  right: 0.75em;
  transform: translateY(-50%);
  content: "";
}
#ronhermancafe .contents .link-btn.-arrow {
  max-width: 206px;
}
#ronhermancafe .contents .link-btn.-arrow:before {
  width: 8px;
  height: 13px;
  background: url(/pc/special/ronhermancafe/data/images/btn-arrow.svg) no-repeat;
  background-size: 100% auto;
}
#ronhermancafe .contents .link-btn.-external {
  max-width: 347px;
}
#ronhermancafe .contents .link-btn.-external:before {
  width: 12px;
  height: 11px;
  background: url(/pc/special/ronhermancafe/data/images/btn-external.png) no-repeat;
  background-size: 100% auto;
}
#ronhermancafe .contents .kv-section {
  margin: 0 auto;
  position: relative;
  z-index: 1;
  width: calc(100% - 80px);
}
#ronhermancafe .contents .kv-ttl {
  width: 100%;
  height: auto;
}
#ronhermancafe .contents .kv-side-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
  width: 40px;
  transition: opacity 0.5s, height 0.5s;
  opacity: 0;
}
#ronhermancafe .contents .kv-side-wrap.init {
  opacity: 1;
}
#ronhermancafe .contents .kv-side-wrap.fix {
  position: fixed;
  transform: none;
}
#ronhermancafe .contents .introduction {
  padding: 115px 0;
}
#ronhermancafe .contents .introduction p {
  font-size: 18px;
  text-align: center;
  font-feature-settings: "palt";
}
#ronhermancafe .contents .introduction p + p {
  margin-top: 20px;
}
#ronhermancafe .contents .introduction:before {
  top: 37px;
  left: -286px;
  width: 410px;
  height: 529px;
  background: url(/pc/special/ronhermancafe/data/images/introduction-bgi.png) no-repeat;
}
#ronhermancafe .contents .menu-section {
  padding: 120px 0 134px;
}
#ronhermancafe .contents .menu-section .inner:before {
  top: -120px;
  right: -340px;
  z-index: -1;
  width: 1253px;
  height: 547px;
  background: #efefef;
}
#ronhermancafe .contents .menu-section .inner:after {
  right: -231px;
  bottom: -134px;
  width: 487px;
  height: 534px;
  background: url(/pc/special/ronhermancafe/data/images/menu-bgi.png) no-repeat;
}
#ronhermancafe .contents .menu-detail {
  margin-top: 155px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
#ronhermancafe .contents .menu-detail-text {
  width: 49%;
}
#ronhermancafe .contents .menu-detail-text h3 {
  font-size: 28px;
  line-height: 1.25;
}
#ronhermancafe .contents .menu-detail-text .price {
  margin-top: 12px;
  padding-left: 4px;
  display: block;
  font-size: 18px;
}
#ronhermancafe .contents .menu-detail-text .tax {
  font-size: 14px;
}
#ronhermancafe .contents .menu-detail-text p {
  margin-top: 22px;
  padding-left: 20px;
  line-height: 2;
}
#ronhermancafe .contents .menu-detail-img {
  position: absolute;
  top: -75px;
  right: -183px;
}
#ronhermancafe .contents .menu-product-link {
  margin-top: 72px;
  padding-left: 211px;
  position: relative;
  left: -40px;
  width: 525px;
  min-height: 220px;
  background: url(/pc/special/ronhermancafe/data/images/menu-link.jpg) top left no-repeat;
  background-size: auto 100%;
}
#ronhermancafe .contents .menu-product-link img {
  position: absolute;
  top: -25px;
  left: 208px;
}
#ronhermancafe .contents .menu-product-link p {
  padding-top: 62px;
  line-height: 1.5625;
}
#ronhermancafe .contents .menu-product-link .marker {
  padding-left: 5px;
  background: #fff;
}
#ronhermancafe .contents .menu-product-link .link-btn {
  margin-top: 9px;
}
#ronhermancafe .contents .period-store-section {
  margin-top: 65px;
  padding-bottom: 115px;
}
#ronhermancafe .contents .period-store-section .inner:before {
  top: 81px;
  right: -206px;
  width: 264px;
  height: 232px;
  background: url(/pc/special/ronhermancafe/data/images/period-store-bgi-1.png) top right no-repeat;
}
#ronhermancafe .contents .period-store-section .inner:after {
  bottom: -106px;
  left: -306px;
  width: 328px;
  height: 387px;
  background: url(/pc/special/ronhermancafe/data/images/period-store-bgi-2.png) bottom left no-repeat;
}
#ronhermancafe .contents .period-info {
  margin-top: 80px;
  padding: 33px 35px 35px;
  background: #efefef;
}
#ronhermancafe .contents .period-info p {
  margin-top: 12px;
  text-align: center;
  letter-spacing: 0.02em;
}
#ronhermancafe .contents .store-info {
  margin-top: 53px;
}
#ronhermancafe .contents .store-info .store-list {
  margin-top: 35px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px 30px;
}
#ronhermancafe .contents .store-info .store-list li {
  width: 312px;
}
#ronhermancafe .contents .store-info .store-list .store-head {
  margin-top: 20px;
  display: flex;
  align-items: baseline;
  height: 26px;
}
#ronhermancafe .contents .store-info .store-list .store-name {
  margin-top: 3px;
}
#ronhermancafe .contents .store-info .store-list .store-opening {
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
#ronhermancafe .contents .store-info .store-list .store-opening span {
  font-size: 12px;
}
#ronhermancafe .contents .store-info .store-list .store-address, #ronhermancafe .contents .store-info .store-list .store-tel {
  font-size: 14px;
}
#ronhermancafe .contents .store-info .store-list .store-address {
  margin-top: 11px;
  padding-top: 10px;
  border-top: solid 1px #ccc;
  line-height: 1.25;
  letter-spacing: 0.08em;
}
#ronhermancafe .contents .store-info .store-list .store-tel {
  margin-top: 2px;
}
#ronhermancafe .contents .movie-section {
  padding: 120px 0;
  background: #efefef;
}
#ronhermancafe .contents .movie-section .inner:after {
  bottom: -347px;
  left: -350px;
  width: 471px;
  height: 459px;
  background: url(/pc/special/ronhermancafe/data/images/movie-bgi.png) bottom left no-repeat;
}
#ronhermancafe .contents .lead-area.-movie {
  margin-top: 73px;
  padding-bottom: 39px;
  background-image: radial-gradient(circle, #333333 1px, transparent 1px);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 6px 2px;
}
#ronhermancafe .contents .lead-area.-movie .lead-text {
  margin-top: 30px;
}
#ronhermancafe .contents .movie-schedule {
  margin-top: 20px;
  padding-left: 214px;
  display: flex;
  align-items: center;
}
#ronhermancafe .contents .movie-start {
  border: solid 1px #ccc;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 172px;
  min-height: 60px;
  font-size: 22px;
  font-weight: 600;
}
#ronhermancafe .contents .movie-detail {
  margin-left: 33px;
}
#ronhermancafe .contents .movie-detail dl {
  display: flex;
}
#ronhermancafe .contents .movie-detail dt {
  font-weight: bold;
}
#ronhermancafe .contents .movie-thumb {
  margin: 20px auto 0;
  display: block;
  width: 540px;
}
#ronhermancafe .contents .about-section {
  margin-top: 120px;
}
#ronhermancafe .contents .about-section > .inner:after {
  right: -364px;
  bottom: -39px;
  width: 406px;
  height: 417px;
  background: url(/pc/special/ronhermancafe/data/images/about-bgi.png) bottom left no-repeat;
}
#ronhermancafe .contents .lead-area.-about {
  margin-top: 72px;
}
#ronhermancafe .contents .lead-area.-about .lead-text {
  margin-top: 31px;
}
#ronhermancafe .contents .about-product-list {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px 0;
}
#ronhermancafe .contents .about-product-list li {
  position: relative;
  width: 206px;
  text-align: center;
}
#ronhermancafe .contents .about-product-list li:before {
  position: absolute;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 310px;
  height: 210px;
  background: #efefef;
  content: "";
}
#ronhermancafe .contents .about-product-list li + li {
  margin-left: 23px;
}
#ronhermancafe .contents .about-product-list li.-plain-series:before {
  left: 40%;
}
#ronhermancafe .contents .about-product-list li.-plain-series + .-zero-fatplain-series {
  margin-left: 53px;
}
#ronhermancafe .contents .about-product-list li.-zero-fatplain-series:before {
  left: 63%;
  background: #e7e7e7;
}
#ronhermancafe .contents .about-product-list li.-zero-fatplain-series + .-other-series {
  margin-left: 0;
}
#ronhermancafe .contents .about-product-list li.-other-series:before {
  left: 44%;
  width: 285px;
  height: 228px;
}
#ronhermancafe .contents .about-product-list li.-other-series + .-other-series {
  margin-left: 53px;
}
#ronhermancafe .contents .about-product-list li.-other-series:last-child:before {
  left: 56%;
  background: #e7e7e7;
}
#ronhermancafe .contents .about-product-list li.-other-series .about-product-img {
  margin-top: 77px;
}
#ronhermancafe .contents .about-product-head {
  position: absolute;
  transform: translateX(-50%);
}
#ronhermancafe .contents .about-product-head.-detail-180g-LB81-plain {
  top: -13px;
  left: 23%;
}
#ronhermancafe .contents .about-product-head.-detail-180g-LB81-nonfatplain {
  top: -23px;
  left: 20%;
}
#ronhermancafe .contents .about-product-head.-detail-400g-Ca-Fe {
  top: -19px;
  left: 70%;
}
#ronhermancafe .contents .about-product-head.-detail-400g-LB81-plain-home-made-story {
  top: -18px;
  left: 38%;
}
#ronhermancafe .contents .about-product-img {
  margin-top: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 172px;
}
#ronhermancafe .contents .about-product-name {
  margin: 18px 0 11px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.257;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
#ronhermancafe .contents .about-ronhermancafe-wrap {
  margin-top: 80px;
  padding: 80px 0;
  background: #efefef;
}
#ronhermancafe .contents .about-ronhermancafe {
  display: flex;
  justify-content: space-between;
}
#ronhermancafe .contents .about-ronhermancafe-text {
  margin-left: 85px;
}
#ronhermancafe .contents .about-ronhermancafe-text h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 0.8;
}
#ronhermancafe .contents .about-ronhermancafe-text p {
  margin-top: 38px;
  font-size: 14px;
}
#ronhermancafe .contents .about-ronhermancafe-text p + p {
  margin-top: 21px;
}
#ronhermancafe .contents .about-ronhermancafe-text .link-btn {
  margin-top: 25px;
}

#ronhermancafe {
  padding-top: 0;
}
#ronhermancafe #header_anchor + #js-header ~ .fix ~ #kv {
  padding-top: 131px;
}
#ronhermancafe #js-header img, #ronhermancafe #js-footer img {
  vertical-align: middle;
}
#ronhermancafe #js-footer a {
  color: #666;
}