@charset "UTF-8";
#yogurt-art {
  color: #333;
  font-optical-sizing: auto;
}
#yogurt-art .contents {
  overflow: hidden;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
}
#yogurt-art .contents p, #yogurt-art .contents h1, #yogurt-art .contents h2, #yogurt-art .contents h3, #yogurt-art .contents h4, #yogurt-art .contents h5, #yogurt-art .contents h6, #yogurt-art .contents a, #yogurt-art .contents li, #yogurt-art .contents caption, #yogurt-art .contents td, #yogurt-art .contents th, #yogurt-art .contents dt, #yogurt-art .contents dd, #yogurt-art .contents input, #yogurt-art .contents textarea, #yogurt-art .contents select, #yogurt-art .contents address {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#yogurt-art .contents a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}
#yogurt-art .contents a:hover {
  opacity: 0.7;
}
#yogurt-art .contents img {
  max-width: none;
  vertical-align: bottom;
  image-rendering: -webkit-optimize-contrast;
}
#yogurt-art .contents img[src$=svg] {
  max-width: 100%;
}
#yogurt-art .contents section {
  position: relative;
  z-index: 0;
}
#yogurt-art .contents .inner {
  margin: 0 auto;
  position: relative;
  width: 1000px;
}
#yogurt-art .contents .anchor, #yogurt-art .contents .anchor_external {
  display: block;
  position: absolute;
  top: 0;
}
#yogurt-art .contents .title_box {
  padding: 47px 0 38px;
  width: 100%;
  background: rgba(66, 117, 156, 0.9);
  text-align: center;
}
#yogurt-art .contents .title_box img {
  margin: 0 auto;
}
#yogurt-art .contents .main_area_top {
  position: relative;
  height: 265px;
}
#yogurt-art .contents .main_area_top .main_area_top_layer {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 265px;
  background: rgba(105, 159, 189, 0.6);
}
#yogurt-art .contents .main_area_top .title_box {
  background: rgba(51, 102, 153, 0.6);
}
#yogurt-art .contents .main_area_top .kv {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 1000px;
  height: 265px;
  overflow: hidden;
}
#yogurt-art .contents .main_area_top .kv img {
  margin: 0 auto;
  width: 100%;
  min-width: 1525px;
}
#yogurt-art .contents .lead {
  padding: 75px 0;
  font-size: 18px;
  text-align: center;
  font-feature-settings: "palt";
}
#yogurt-art .contents .yogurt-art-content {
  padding: 54px 0 80px;
  background-color: #f5f5f0;
}
#yogurt-art .contents .yogurt-art-head {
  margin-bottom: 40px;
  text-align: center;
}
#yogurt-art .contents .yogurt-art-head span {
  padding-bottom: 7px;
  border-bottom: 2px solid #000;
  display: inline-block;
  color: #000;
  font-size: 27px;
  font-weight: bold;
  font-feature-settings: "palt";
}
#yogurt-art .contents .yogurt-art-list {
  display: flex;
  flex-wrap: wrap;
}
#yogurt-art .contents .yogurt-art-list li {
  width: 484px;
  background: #fff;
}
#yogurt-art .contents .yogurt-art-list li + li {
  margin-left: 32px;
}
#yogurt-art .contents .yogurt-art-list li:nth-child(3n) {
  margin-top: 32px;
  margin-left: 0;
}
#yogurt-art .contents .yogurt-art-list li img {
  width: 100%;
  height: auto;
}
#yogurt-art .contents .yogurt-art-list a {
  display: block;
  height: 100%;
}
#yogurt-art .contents .yogurt-art-text-area {
  padding: 27px 31px 37px;
}
#yogurt-art .contents .yogurt-art-text-area dl {
  font-feature-settings: "palt";
}
#yogurt-art .contents .yogurt-art-text-area dl dt {
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
}
#yogurt-art .contents .yogurt-art-text-area dl dd {
  font-size: 14px;
  line-height: 1.2857;
}

#ronhermancafe-no\.2 {
  padding-top: 0;
}
#ronhermancafe-no\.2 #header_anchor + #js-header ~ .fix ~ #kv {
  padding-top: 131px;
}
#ronhermancafe-no\.2 #js-header img, #ronhermancafe-no\.2 #js-footer img {
  vertical-align: middle;
}
#ronhermancafe-no\.2 #js-footer a {
  color: #666;
}