#marshmallow_yogurt #page {
  position: relative;
  width: 100%;
  height: 100%;
  /* magnificPopup animation */
  /* overlay at start */
  /* overlay animate in */
  /* overlay animate out */
  /* content at start */
  /* content animate it */
  /* content animate out */
}
#marshmallow_yogurt #page .pageInner {
  border: 5px solid #f2aaca;
}
#marshmallow_yogurt #page .pageInner:before, #marshmallow_yogurt #page .pageInner:after {
  display: block;
  position: absolute;
  z-index: 900;
  content: "";
}
#marshmallow_yogurt #page .pageInner:before {
  top: -7px;
  left: 0;
  width: 128px;
  height: 222.5px;
  background: url(/sp/special/marshmallow_yogurt/common/images/img-header01.png) no-repeat;
  background-size: cover;
}
#marshmallow_yogurt #page .pageInner:after {
  top: 22px;
  right: 0;
  width: 125px;
  height: 212.5px;
  background: url(/sp/special/marshmallow_yogurt/common/images/img-header02.png) no-repeat;
  background-size: cover;
}
#marshmallow_yogurt #page .page-header {
  padding: 0 0;
  position: relative;
  height: 382px;
  background: url(/sp/special/marshmallow_yogurt/common/images/_pattern_001.jpg);
  background-size: 64px 64px;
  text-align: center;
}
#marshmallow_yogurt #page .page-header h1 {
  margin: auto;
  position: absolute;
  top: 37px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  width: 286px;
  height: 145px;
}
#marshmallow_yogurt #page .page-header + hr {
  margin: 0;
  border: none;
  display: block;
  position: relative;
  width: 100%;
  height: 80px;
  overflow: visible;
  background: #f6cbcf url(/sp/special/marshmallow_yogurt/common/images/_pattern_002.jpg);
  background-size: 20px 20px;
}
#marshmallow_yogurt #page .page-header + hr:before {
  margin: auto;
  display: block;
  position: absolute;
  top: -66px;
  right: 0;
  bottom: 0;
  left: 0;
  width: 252.5px;
  height: 165.5px;
  background: url(/sp/special/marshmallow_yogurt/common/images/img-header_under.png) no-repeat;
  background-size: 100% auto;
  content: "";
}
#marshmallow_yogurt #page .contents {
  display: block;
  position: relative;
  font-size: 15px;
}
#marshmallow_yogurt #page .contents .header {
  margin: 0 auto;
  padding: 0;
  position: static;
  z-index: 1;
  width: 90.625%;
  background: none;
}
#marshmallow_yogurt #page .contents.catch {
  padding: 0 0 40px;
  background: url(/sp/special/marshmallow_yogurt/common/images/_pattern_003.jpg);
  background-size: 7px 7px;
}
#marshmallow_yogurt #page .contents.catch .header {
  margin-bottom: 12px;
  padding: 43px 0 0;
}
#marshmallow_yogurt #page .contents.catch .emotion {
  margin: 10px 0;
  display: block;
  text-align: center;
}
#marshmallow_yogurt #page .contents.catch p {
  margin: 0 auto;
  width: 90.625%;
}
#marshmallow_yogurt #page .contents.catch p.large {
  margin-bottom: 1em;
  font-size: 18px;
  line-height: 1.3;
}
#marshmallow_yogurt #page .contents.catch p.large em {
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
}
#marshmallow_yogurt #page .contents.catch p.large em:first-child {
  color: #2d7ead;
}
#marshmallow_yogurt #page .contents.catch p.large em:last-child {
  color: #473baa;
}
#marshmallow_yogurt #page .contents.make {
  padding: 0 0 40px;
  height: 100%;
  background: url(/sp/special/marshmallow_yogurt/common/images/_pattern_004.jpg);
  background-size: 30px 30px;
}
#marshmallow_yogurt #page .contents.make .header {
  margin-bottom: 20px;
  position: relative;
  width: 90.9375%;
  height: 123.5px;
}
#marshmallow_yogurt #page .contents.make .header img {
  display: block;
  position: absolute;
  top: -15px;
}
#marshmallow_yogurt #page .contents.make .material {
  margin: 0 auto 1rem;
  width: 91.56%;
}
#marshmallow_yogurt #page .contents.make dl {
  margin: 0 auto;
  width: 90.625%;
  color: #7b5835;
  font-size: 15px;
  line-height: 1.533;
}
#marshmallow_yogurt #page .contents.make dl dt {
  margin-bottom: 8px;
}
#marshmallow_yogurt #page .contents.make dl dd {
  margin-bottom: 14px;
}
#marshmallow_yogurt #page .contents.make dl dd:last-child {
  margin: 0;
}
#marshmallow_yogurt #page .contents.make .point {
  margin: 0 0 30px;
  text-align: center;
}
#marshmallow_yogurt #page .contents.make .movie {
  margin: 0 auto;
  width: 90.625%;
}
#marshmallow_yogurt #page .contents.make .movie .iframeWrap {
  padding: 75% 0 0 0;
  position: relative;
  width: 100%;
}
#marshmallow_yogurt #page .contents.make .movie .iframeWrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#marshmallow_yogurt #page .contents.feature {
  background: url(/sp/special/marshmallow_yogurt/common/images/_pattern_001.jpg);
  background-size: 64px 64px;
}
#marshmallow_yogurt #page .contents.feature .header {
  padding: 46px 0 18px;
}
#marshmallow_yogurt #page .contents.feature ul {
  width: 100%;
  text-align: center;
}
#marshmallow_yogurt #page .contents.feature ul li {
  position: relative;
  width: 100%;
  height: 303.5px;
  background: url(/sp/special/marshmallow_yogurt/common/images/_pattern_006.jpg);
  background-size: 22px 22px;
}
#marshmallow_yogurt #page .contents.feature ul li img.absolute {
  margin: auto;
  position: absolute;
  top: -17.5px;
  right: 0;
  bottom: 0;
  left: 0;
}
#marshmallow_yogurt #page .contents.feature ul li:first-child {
  background: url(/sp/special/marshmallow_yogurt/common/images/_pattern_005.jpg);
  background-size: 7px 7px;
}
#marshmallow_yogurt #page .contents.feature ul li:first-child img.absolute {
  top: 21.5px;
}
#marshmallow_yogurt #page .contents.feature ul li:last-child {
  background: url(/sp/special/marshmallow_yogurt/common/images/_pattern_007.jpg);
  background-size: 32px 32px;
}
#marshmallow_yogurt #page .contents.feature ul li:last-child img.absolute {
  left: 18px;
}
#marshmallow_yogurt #page .contents.recipes {
  padding: 0 0;
  position: relative;
  background: url(/sp/special/marshmallow_yogurt/common/images/_pattern_008.jpg);
  background-size: 28.5px 28.5px;
}
#marshmallow_yogurt #page .contents.recipes .header {
  margin: 0 auto;
  padding: 40px 0 34.5px;
  width: 90.625%;
  text-align: center;
}
#marshmallow_yogurt #page .contents.recipes .recipeList {
  margin-bottom: 75px;
  color: #785931;
  font-size: 15px;
  text-align: center;
}
#marshmallow_yogurt #page .contents.recipes .recipeList li {
  margin: 0 0 40px;
}
#marshmallow_yogurt #page .contents.recipes .recipeList li:last-child {
  margin: 0;
}
#marshmallow_yogurt #page .contents.recipes .recipeList li figure {
  margin-bottom: 14px;
  display: block;
}
#marshmallow_yogurt #page .contents.recipes .recipeList li .name {
  margin-bottom: 15px;
  font-weight: 600;
}
#marshmallow_yogurt #page .contents.recipes .recipeList li .btn {
  margin: 0 auto;
  width: 210px;
  height: 35px;
}
#marshmallow_yogurt #page .contents.recipes .recipeList li .btn a {
  padding: 35px 0 0;
  display: block;
  width: 100%;
  height: 0;
  overflow: hidden;
  background: url(/sp/special/marshmallow_yogurt/common/images/btn-section04.png);
  background-size: cover;
}
#marshmallow_yogurt #page .contents.recipes .socialLink {
  text-align: center;
}
#marshmallow_yogurt #page .contents.recipes .socialLink .twitter {
  margin-bottom: 5px;
}
#marshmallow_yogurt #page .contents.recipes .socialLink .twitter img {
  position: relative;
  left: 37px;
}
#marshmallow_yogurt #page .contents.recipes .socialLink .facebook img {
  position: relative;
  left: -25px;
}
#marshmallow_yogurt #page .contents.recipes .endroll {
  padding-top: 0;
}
#marshmallow_yogurt #page .movie {
  text-align: center;
}
#marshmallow_yogurt #page .mfp-bg {
  z-index: 9001;
}
#marshmallow_yogurt #page .mfp-wrap {
  z-index: 9002;
}
#marshmallow_yogurt #page .mfp-fade.mfp-bg {
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
  opacity: 0;
}
#marshmallow_yogurt #page .mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
#marshmallow_yogurt #page .mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}
#marshmallow_yogurt #page .mfp-fade.mfp-wrap .mfp-content {
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
  opacity: 0;
}
#marshmallow_yogurt #page .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
#marshmallow_yogurt #page .mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

@media screen and (orientation: landscape) {
  #marshmallow_yogurt #page .contents.make .header {
    height: auto;
  }
  #marshmallow_yogurt #page .contents.make .header img {
    margin: 0 auto;
    position: static;
  }
  #marshmallow_yogurt #page .contents.make .material figure img, #marshmallow_yogurt #page .contents.make .movie img {
    margin: 0 auto;
    display: block;
  }
}