@charset "UTF-8";
/* mixin css */
/* ------------------------------------------------------------------------
   MEDIAQUERY
------------------------------------------------------------------------ */
/*  COMMON
-------------------------------------------------- */
.pcOnly {
  display: none !important;
}

html, body {
  min-width: 0;
}

#okara-yogurt {
  /*  ANDROID
  -------------------------------------------------- */
}
#okara-yogurt #header-bulgaria {
  box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.2);
}
#okara-yogurt .sp_mega_menu .mega_tab_box ul li a,
#okara-yogurt .menubar .menubar_box li.sub a,
#okara-yogurt .sp_mega_menu section.recipe h2,
#okara-yogurt .searchs_box .searchs_box_inner .narrowing_box .tbl_box p {
  font-size: 2.4rem;
}
#okara-yogurt .searchs_box .searchs_box_inner ul.select_type li a,
#okara-yogurt .searchs_box .searchs_box_inner .recipe_white_btn a {
  font-size: 2.6rem;
}
#okara-yogurt .menubar .menubar_box li a,
#okara-yogurt .recipe_detail_text,
#okara-yogurt .searchs_box .searchs_box_inner p input {
  font-size: 2.8rem;
}
#okara-yogurt #wrap #okara-contens {
  overflow: hidden;
  color: #303030;
  font-family: "メイリオ", Meiryo, "MS ゴシック", sans-serif;
  font-size: 14px;
  font-size: 4.375vw;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#okara-yogurt #wrap #okara-contens p, #okara-yogurt #wrap #okara-contens h1, #okara-yogurt #wrap #okara-contens h2, #okara-yogurt #wrap #okara-contens h3, #okara-yogurt #wrap #okara-contens h4, #okara-yogurt #wrap #okara-contens h5, #okara-yogurt #wrap #okara-contens h6, #okara-yogurt #wrap #okara-contens a, #okara-yogurt #wrap #okara-contens li, #okara-yogurt #wrap #okara-contens caption, #okara-yogurt #wrap #okara-contens td, #okara-yogurt #wrap #okara-contens th, #okara-yogurt #wrap #okara-contens dt, #okara-yogurt #wrap #okara-contens dd, #okara-yogurt #wrap #okara-contens input, #okara-yogurt #wrap #okara-contens textarea, #okara-yogurt #wrap #okara-contens select, #okara-yogurt #wrap #okara-contens address {
  font-family: "メイリオ", Meiryo, "MS ゴシック", sans-serif;
}
#okara-yogurt #wrap #okara-contens a {
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}
#okara-yogurt #wrap #okara-contens img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
#okara-yogurt #wrap #okara-contens #kv {
  margin-top: 15.625%;
  padding-bottom: 130.46875%;
  position: relative;
  height: 0;
  overflow: hidden;
  background: url(/pc/special/okara-yogurt/images/kv-sp.jpg) no-repeat;
  background-size: contain;
}
#okara-yogurt #wrap #okara-contens #kv h1 {
  margin-top: 25.78125%;
  position: relative;
}
#okara-yogurt #wrap #okara-contens #kv .balloon {
  margin-top: -9.375%;
  position: absolute;
  top: 0;
}
#okara-yogurt #wrap #okara-contens #topic_path {
  display: none;
}
#okara-yogurt #wrap #okara-contens .local_navi_wrap {
  border-bottom: solid 1px rgba(30, 4, 1, 0.2);
}
#okara-yogurt #wrap #okara-contens .local_navi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#okara-yogurt #wrap #okara-contens .local_navi:after {
  display: block;
  clear: both;
  content: "";
}
#okara-yogurt #wrap #okara-contens .local_navi li {
  position: relative;
  float: left;
  width: 33.3333333333%;
  line-height: 1;
}
#okara-yogurt #wrap #okara-contens .local_navi li + li {
  border-left: solid 1px rgba(30, 4, 1, 0.2);
}
#okara-yogurt #wrap #okara-contens .local_navi a {
  padding: 16.4319248826% 0;
  display: block;
}
#okara-yogurt #wrap #okara-contens .whats {
  padding: 18.75% 0;
  color: #331c12;
}
#okara-yogurt #wrap #okara-contens .whats h3 {
  margin-bottom: 1.75em;
}
#okara-yogurt #wrap #okara-contens .whats .whats_ttl {
  margin-top: 9.375%;
}
#okara-yogurt #wrap #okara-contens .whats p {
  padding: 0 4.6875%;
  line-height: 1.5714285714;
  text-align: left;
}
#okara-yogurt #wrap #okara-contens .whats p + p {
  margin-top: 1.5em;
}
#okara-yogurt #wrap #okara-contens #merit .okara_bgi {
  padding: 15.625% 4.6875% 18.75%;
  text-align: left;
}
#okara-yogurt #wrap #okara-contens #merit h3 {
  margin-top: 15.5172413793%;
}
#okara-yogurt #wrap #okara-contens #merit h3:first-child {
  margin-top: 0;
}
#okara-yogurt #wrap #okara-contens #merit p {
  margin-top: 1.75em;
  line-height: 1.5714285714;
}
#okara-yogurt #wrap #okara-contens #merit figure {
  margin: 1.25em auto 0;
}
#okara-yogurt #wrap #okara-contens #merit figcaption {
  margin-top: 0.5em;
  color: #999;
  font-size: 11px;
  font-size: 3.4375vw;
  text-align: right;
}
#okara-yogurt #wrap #okara-contens #howtomake .okara_bgi {
  padding: 15.625% 4.6875% 18.75%;
}
#okara-yogurt #wrap #okara-contens #howtomake h3 {
  margin: 0 auto;
  width: 79.3103448276%;
}
#okara-yogurt #wrap #okara-contens #howtomake h4 {
  margin: 0 auto 10.3448275862%;
  padding-top: 0.1em;
  color: #fff;
  background: #ccb27f;
  font-weight: normal;
  line-height: 1.7;
  font-size: 17px;
  font-size: 5.3125vw;
}
#okara-yogurt #wrap #okara-contens #howtomake .prepare {
  margin: 17.2413793103% auto;
}
#okara-yogurt #wrap #okara-contens #howtomake .prepare img + img {
  margin-top: 10.3448275862%;
}
#okara-yogurt #wrap #okara-contens #howtomake .steps_okarayogurt h4 {
  margin-bottom: 0;
}
#okara-yogurt #wrap #okara-contens #howtomake .steps_okarayogurt li {
  position: relative;
}
#okara-yogurt #wrap #okara-contens #howtomake .steps_okarayogurt li img {
  width: 51.724137931%;
}
#okara-yogurt #wrap #okara-contens #howtomake .steps_okarayogurt li .balloon {
  position: absolute;
  top: 0;
}
#okara-yogurt #wrap #okara-contens #howtomake .steps_okarayogurt li p {
  margin-top: 0.5em;
  line-height: 1.4285714286;
}
#okara-yogurt #wrap #okara-contens #howtomake .steps_okarayogurt li + li:before {
  margin: 10.3448275862% 0;
  display: block;
  height: 1em;
  background: url(/pc/special/okara-yogurt/images/howtomake-arrow.png) no-repeat center center;
  background-size: contain;
  font-size: 9px;
  font-size: 2.8125vw;
  content: "";
}
#okara-yogurt #wrap #okara-contens #howtomake .steps_okarayogurt li:nth-child(1) {
  padding-top: 22.4137931034%;
}
#okara-yogurt #wrap #okara-contens #howtomake .steps_okarayogurt li:nth-child(1) .balloon {
  margin: 3.4482758621% 0 0 -3.4482758621%;
  left: 0;
  width: 43.7931034483%;
}
#okara-yogurt #wrap #okara-contens #howtomake .steps_okarayogurt li:nth-child(2) .balloon {
  margin: -7.7586206897% -0.1724137931% 0 0;
  right: 0;
  width: 41.724137931%;
}
#okara-yogurt #wrap #okara-contens #howtomake .steps_okarayogurt li:nth-child(3) .balloon {
  margin: -6.0344827586% 0 0 -3.4482758621%;
  left: 0;
  width: 44.1379310345%;
}
#okara-yogurt #wrap #okara-contens #recipe_anchor h2 {
  width: 46.875%;
}
#okara-yogurt #wrap #okara-contens #recipe_anchor .okara_bgi {
  padding: 15.625% 4.6875% 14.0625%;
}
#okara-yogurt #wrap #okara-contens #recipe_anchor .recipelist {
  margin-top: 17.2413793103%;
}
#okara-yogurt #wrap #okara-contens #recipe_anchor li + li {
  margin-top: 1.25em;
}
#okara-yogurt #wrap #okara-contens #recipe_anchor a {
  display: block;
  position: relative;
  transition: 0.3s;
}
#okara-yogurt #wrap #okara-contens #recipe_anchor a:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 800;
  width: 100%;
  height: 100%;
  background: url(/pc/special/okara-yogurt/images/recipe-border-sp.png) no-repeat center top;
  background-size: contain;
  content: "";
}
#okara-yogurt #wrap #okara-contens #recipe_anchor a img {
  transform-origin: center center;
  transition: 0.3s;
}
#okara-yogurt #wrap #okara-contens #recipe_anchor a:hover {
  opacity: 0.8;
}
#okara-yogurt #wrap #okara-contens #recipe_anchor a:hover img {
  transform: scale(1.03) rotate(0.01deg);
}
#okara-yogurt #wrap #okara-contens #recipe_anchor figure {
  overflow: hidden;
}
#okara-yogurt #wrap #okara-contens #recipe_anchor .recipe_name {
  margin-top: 0.5em;
  display: flex;
  align-items: flex-start;
  color: #303030;
  line-height: 1.4285714286;
  text-align: left;
}
#okara-yogurt #wrap #okara-contens #recipe_anchor .recipe_name:before {
  margin: -0.0125em 0.125em 0 0;
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url(/pc/special/okara-yogurt/images/recipe-arrow.png) no-repeat center center;
  background-size: contain;
  font-size: 20px;
  font-size: 6.25vw;
  content: "";
}
#okara-yogurt #wrap #okara-contens .slide_wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
#okara-yogurt #wrap #okara-contens .slide_wrap .slide_item img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-height: 200vw) {
  #okara-yogurt #wrap #okara-contens .slide_wrap .slide_item img {
    width: auto;
    max-width: none;
    height: 100%;
  }
}
#okara-yogurt #wrap #okara-contens .okara_bgi {
  background: url(/pc/special/okara-yogurt/images/section-bgi-sp.png);
  background-size: contain;
  text-align: center;
}
#okara-yogurt #wrap #okara-contens .main_visual {
  padding-bottom: 78.125%;
  position: relative;
  height: 0;
  background: transparent;
}
#okara-yogurt #wrap #okara-contens .main_visual h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 800;
  transform: translate(-50%, -50%);
  width: 46.875%;
  text-align: center;
}
#okara-yogurt #wrap #okara-contens .fadeIn {
  animation: 2s fadeIn 1s forwards;
  opacity: 0;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#okara-yogurt #wrap #okara-contens .js_fadeInUp {
  opacity: 0;
}
#okara-yogurt #wrap #okara-contens .fadeInUp {
  animation: fadeInUp 3s 0s forwards;
}
@keyframes fadeInUp {
  0%, from {
    transform: translateY(3%);
    opacity: 0;
  }
  100%, to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (orientation: landscape) {
  #okara-yogurt #wrap #okara-contens #kv {
    margin-top: 8.59375%;
  }
}
/* pc-small
-------------------------------------------------- */
/* tablet
-------------------------------------------------- */
/* sp-side
-------------------------------------------------- */
/* iPhone5-side
-------------------------------------------------- */
/* android-w
-------------------------------------------------- */
/* android-m
-------------------------------------------------- */
/* iphone6plus
-------------------------------------------------- */
/* iphone6
-------------------------------------------------- */
@media only screen and (max-width: 375px) {
  .priceTable .yen span {
    letter-spacing: -0.025em;
  }
}
/* android
-------------------------------------------------- */
/* iphone5, android-s
-------------------------------------------------- */