@charset "UTF-8";
/* mixin css */
/* ------------------------------------------------------------------------
   MEDIAQUERY
------------------------------------------------------------------------ */
/*  COMMON
-------------------------------------------------- */
html, body {
  min-width: 0;
}

#yogurtandcooking #wrap .contents {
  overflow: hidden;
  font-family: "Noto Sans Japanese", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 13px;
  font-size: 3.4666666667vw;
  font-feature-settings: "palt";
  /*  DETAIL
  -------------------------------------------------- */
}
#yogurtandcooking #wrap .contents p, #yogurtandcooking #wrap .contents h1, #yogurtandcooking #wrap .contents h2, #yogurtandcooking #wrap .contents h3, #yogurtandcooking #wrap .contents h4, #yogurtandcooking #wrap .contents h5, #yogurtandcooking #wrap .contents h6, #yogurtandcooking #wrap .contents a, #yogurtandcooking #wrap .contents li, #yogurtandcooking #wrap .contents caption, #yogurtandcooking #wrap .contents td, #yogurtandcooking #wrap .contents th, #yogurtandcooking #wrap .contents dt, #yogurtandcooking #wrap .contents dd, #yogurtandcooking #wrap .contents input, #yogurtandcooking #wrap .contents textarea, #yogurtandcooking #wrap .contents select, #yogurtandcooking #wrap .contents address {
  font-family: "Noto Sans Japanese", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#yogurtandcooking #wrap .contents a {
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}
#yogurtandcooking #wrap .contents a:hover {
  opacity: 0.8;
}
#yogurtandcooking #wrap .contents img {
  height: auto;
  vertical-align: bottom;
}
#yogurtandcooking #wrap .contents .inner {
  margin: 0 auto;
  position: relative;
  width: 89.3333333333%;
}
#yogurtandcooking #wrap .contents .textCenter {
  text-align: center;
}
#yogurtandcooking #wrap .contents section {
  position: relative;
}
#yogurtandcooking #wrap .contents .anchor {
  position: absolute;
  top: 0;
}
#yogurtandcooking #wrap .contents #kv {
  margin-top: 16%;
}
@media (orientation: landscape) {
  #yogurtandcooking #wrap .contents #kv {
    margin-top: 7.4666666667%;
  }
}
#yogurtandcooking #wrap .contents #kv .local_navi {
  font-size: 13px;
  font-size: 3.4666666667vw;
  margin: 0 auto;
  margin-top: 5.7333333333%;
  padding: 0 0 11.4666666667% 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: hidden;
}
#yogurtandcooking #wrap .contents #kv .local_navi li {
  position: relative;
  width: 50%;
}
#yogurtandcooking #wrap .contents #kv .local_navi .line::after {
  display: block;
  position: absolute;
  top: 115%;
  right: 47%;
  content: url(/pc/yogurtandcooking/images/kv-navi-arrow-sp.svg?2022);
}
#yogurtandcooking #wrap .contents #kv .local_navi .line1::after {
  display: block;
  position: absolute;
  top: 115%;
  right: 49%;
  content: url(/pc/yogurtandcooking/images/kv-navi-arrow-sp.svg?2022);
}
#yogurtandcooking #wrap .contents #kv .local_navi a {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  color: #00003c;
  background-size: 0.7em 0.7em;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
#yogurtandcooking #wrap .contents #kv .local_navi a:hover {
  opacity: 0.8;
}
#yogurtandcooking #wrap .contents #kv .local_navi span {
  margin-left: -1em;
}
#yogurtandcooking #wrap .contents #kv .local_navi img {
  margin: 0 5.3333333333% 4.8% 0;
  width: 11%;
}
#yogurtandcooking #wrap .contents .bg {
  background: #f3f5ee;
}
#yogurtandcooking #wrap .contents .text-center {
  text-align: center;
}
#yogurtandcooking #wrap .contents .about_sec {
  padding: 7.3333333333% 0 13.3333333333%;
  font-size: 13px;
  font-size: 3.4666666667vw;
}
#yogurtandcooking #wrap .contents .about_sec h2 {
  margin: 0 auto;
  padding-bottom: 2.6666666667%;
  width: 100%;
}
#yogurtandcooking #wrap .contents .about_sec h3 {
  text-align: center;
}
#yogurtandcooking #wrap .contents .about_sec h3 img {
  width: 78.4%;
}
#yogurtandcooking #wrap .contents .about_sec p {
  font-size: 14px;
  font-size: 3.7333333333vw;
  margin: 4% auto 0 auto;
  margin-top: 4.8214285714%;
  width: 74%;
  text-align: left;
}
#yogurtandcooking #wrap .contents .about_sec .img_area {
  margin-top: -3.3333333333%;
  padding: 0 12.6666666667% 0 28.6666666667%;
}
#yogurtandcooking #wrap .contents .about_sec .wood_box {
  margin: 5.3333333333% auto 0;
  padding: 10.6666666667% 5.3333333333%;
  width: 89.3333333333%;
  background: #f7f7f2;
  text-align: center;
}
#yogurtandcooking #wrap .contents .about_sec .wood_box .flex_box {
  position: relative;
}
#yogurtandcooking #wrap .contents .about_sec .wood_box .flex_box:before {
  display: block;
  position: absolute;
  top: 16em;
  left: 50%;
  transform: translateX(-50%);
  width: 1.8461538462em;
  height: 1.8461538462em;
  background: url(/pc/yogurtandcooking/images/about-x.png?202109) no-repeat;
  background-size: contain;
  content: "";
}
#yogurtandcooking #wrap .contents .about_sec .wood_box li + li {
  margin-top: 4.1666666667%;
}
#yogurtandcooking #wrap .contents .about_sec .about_box .flex_box {
  padding-bottom: 9.2%;
}
#yogurtandcooking #wrap .contents .about_sec .about_box .flex_box li {
  padding-bottom: 2.1333333333%;
}
#yogurtandcooking #wrap .contents .about_sec .about_box .flex_box .about_list {
  margin: 6.2666666667% 0 0 5.3333333333%;
  position: relative;
  width: 84%;
}
#yogurtandcooking #wrap .contents .about_sec .about_box .flex_box h4 {
  font-size: 17.5px;
  font-size: 4.6666666667vw;
  font-weight: normal;
  line-height: 1.15;
  text-align: center;
  text-align: justify;
}
#yogurtandcooking #wrap .contents .about_sec .about_box .flex_box p {
  width: 80.1587301587%;
  text-align: justify;
}
#yogurtandcooking #wrap .contents .about_sec .about_box .flex_box .list01 h4 {
  position: absolute;
  top: 53%;
  left: 31%;
  text-align: center;
}
#yogurtandcooking #wrap .contents .about_sec .about_box .flex_box .list01 p {
  position: absolute;
  top: 72%;
  left: 13%;
  letter-spacing: 0.06em;
}
#yogurtandcooking #wrap .contents .about_sec .about_box .flex_box .list02 h4 {
  position: absolute;
  top: 41%;
  left: 31%;
  text-align: center;
}
#yogurtandcooking #wrap .contents .about_sec .about_box .flex_box .list02 p {
  position: absolute;
  top: 58%;
  left: 13%;
  letter-spacing: 0.06em;
}
#yogurtandcooking #wrap .contents .about_sec .about_box .flex_box .list03 h4 {
  position: absolute;
  top: 35%;
  left: 27.4603174603%;
  text-align: center;
}
#yogurtandcooking #wrap .contents .about_sec .about_box .flex_box .list03 p {
  position: absolute;
  top: 49%;
  left: 13%;
  letter-spacing: 0.12em;
}
#yogurtandcooking #wrap .contents .about_sec .about2 p {
  width: 77.3333333333%;
  line-height: 1.7;
  text-align: justify;
  letter-spacing: 0.08em;
}
#yogurtandcooking #wrap .contents .about_sec .about2 .annotation {
  font-size: 12px;
  font-size: 3.2vw;
  margin: 2.2666666667% auto 7.4666666667% auto;
  color: #666;
  line-height: 1.5;
}
#yogurtandcooking #wrap .contents .about_sec .about2 .about-make {
  margin: 0 5.3333333333% 8.1333333333% 5.3333333333%;
  position: relative;
}
#yogurtandcooking #wrap .contents .about_sec .about2 .about-make .text1 {
  position: absolute;
  top: 30%;
  left: 6%;
  width: 83.5820895522%;
  letter-spacing: 0.06em;
}
#yogurtandcooking #wrap .contents .about_sec .about2 .about-make .text2 {
  position: absolute;
  bottom: 4.5%;
  left: 6%;
  width: 88.0597014925%;
  letter-spacing: 0.06em;
}
#yogurtandcooking #wrap .contents .morebtn {
  margin: 0 5.3333333333% 0 5.3333333333%;
  width: 89.3333333333%;
}
#yogurtandcooking #wrap .contents .ttl_qa .list_qa {
  margin-bottom: 9.8666666667%;
}
#yogurtandcooking #wrap .contents .ttl_qa .qa-inner {
  font-size: 14px;
  font-size: 3.7333333333vw;
  margin: 0 5.3333333333% 0 5.3333333333%;
  width: 85.6%;
  text-align: left;
}
#yogurtandcooking #wrap .contents .ttl_qa .qa-inner p {
  line-height: 1.6;
  text-align: justify;
  letter-spacing: 0.06em;
}
#yogurtandcooking #wrap .contents #application_rules_sec {
  padding: 7.6% 0 12.6666666667%;
}
#yogurtandcooking #wrap .contents #application_rules_sec h2 {
  text-align: center;
}
#yogurtandcooking #wrap .contents #application_rules_sec h2 img {
  width: auto;
  height: em(45);
}
#yogurtandcooking #wrap .contents #application_rules_sec .rules_box {
  margin: 10.8% auto 0;
  padding: 10.6666666667% 5.3333333333% 7.3333333333%;
  width: 89.3333333333%;
  background: #fff;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
}
#yogurtandcooking #wrap .contents #application_rules_sec dl + dl {
  margin-top: 5.9701492537%;
}
#yogurtandcooking #wrap .contents #application_rules_sec dl:last-of-type {
  padding-bottom: 5.9701492537%;
  border-bottom: solid 1px #e6e2e7;
}
#yogurtandcooking #wrap .contents #application_rules_sec dt {
  padding: 4.776119403% 0.5970149254% 4.6268656716% 3.1343283582%;
  border-top: solid 1px #e6e2e7;
  display: flex;
  position: relative;
  font-weight: 500;
  letter-spacing: -0.05em;
  cursor: pointer;
  font-size: 16px;
  font-size: 4.2666666667vw;
}
#yogurtandcooking #wrap .contents #application_rules_sec dt:after {
  display: block;
  position: absolute;
  right: 1%;
  bottom: 7%;
  transform: rotate(180deg);
  width: 5%;
  height: 100%;
  background: url(/pc/yogurtandcooking/images/icon_minus-sp.svg) center no-repeat;
  background-size: contain;
  transition: transform 0.5s;
  content: "";
}
#yogurtandcooking #wrap .contents #application_rules_sec dt.on:after {
  transform: rotate(180deg);
  background: url(/pc/yogurtandcooking/images/icon_plus-sp.svg) center no-repeat;
  background-size: contain;
}
#yogurtandcooking #wrap .contents #application_rules_sec dt img {
  padding: 1.4925373134% 2.3880597015% 0 0;
  width: 12%;
  height: 10%;
}
#yogurtandcooking #wrap .contents #application_rules_sec dt span {
  width: 80%;
  letter-spacing: 0.07em;
}
#yogurtandcooking #wrap .contents #application_rules_sec dd {
  padding: 2.6865671642% 0 4.4776119403% 3.2835820896%;
  display: flex;
  background: #f3f5ee;
  font-weight: 300;
  letter-spacing: 0.05em;
  word-break: break-all;
}
#yogurtandcooking #wrap .contents #application_rules_sec dd.ls0 {
  letter-spacing: 0;
}
#yogurtandcooking #wrap .contents #application_rules_sec dd a {
  border-bottom: 1px solid #005bac;
  color: #005bac;
}
#yogurtandcooking #wrap .contents #application_rules_sec dd .dot_list {
  margin-top: 0.75em;
  letter-spacing: 0;
}
#yogurtandcooking #wrap .contents #application_rules_sec dd .dot_list li {
  display: table;
}
#yogurtandcooking #wrap .contents #application_rules_sec dd .dot_list li:before {
  display: table-cell;
  width: 1.5em;
  content: "※";
}
#yogurtandcooking #wrap .contents #application_rules_sec dd .dot_list > li:before {
  width: 1.35em;
  content: "・";
}
#yogurtandcooking #wrap .contents #application_rules_sec dd .dot_list > li + li {
  margin-top: 0.6em;
}
#yogurtandcooking #wrap .contents #application_rules_sec dd .dot_list:last-child {
  margin-bottom: 0.15em;
}
#yogurtandcooking #wrap .contents #application_rules_sec dd .dot_list.-notice > li + li {
  margin-top: 0.3em;
}
#yogurtandcooking #wrap .contents #application_rules_sec dd img {
  padding: 1.4925373134% 7.9104477612% 0 0;
  height: 1.5em;
}
#yogurtandcooking #wrap .contents #application_rules_sec dd p {
  font-size: 16px;
  font-size: 4.2666666667vw;
  width: 95%;
  letter-spacing: 0.07em;
}
#yogurtandcooking #wrap .contents #application_rules_sec dd span {
  line-height: 1.85;
  text-align: justify;
  letter-spacing: 0.1em;
}
#yogurtandcooking #wrap .contents #application_rules_sec dd small {
  font-size: 9px;
  font-size: 2.4vw;
  padding: 1em 0;
  float: right;
}
#yogurtandcooking #footer02 {
  font-size: 16px;
}
#yogurtandcooking footer .foot_inner ul.main_list li {
  font-size: 16px;
}
#yogurtandcooking 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: 53.3333333333%;
  }
}
/* iPhone5-side
-------------------------------------------------- */
@media only screen and (max-width: 568px) {
  html {
    font-size: 47.3333333333%;
  }
}
/* android-w
-------------------------------------------------- */
@media only screen and (max-width: 540px) {
  html {
    font-size: 45%;
  }
}
/* android-m
-------------------------------------------------- */
@media only screen and (max-width: 480px) {
  html {
    font-size: 40%;
  }
}
/* iphone6plus
-------------------------------------------------- */
@media only screen and (max-width: 414px) {
  html {
    font-size: 34.5%;
  }
}
/* iphone6
-------------------------------------------------- */
@media only screen and (max-width: 375px) {
  html {
    font-size: 31.25%;
  }
  .priceTable .yen span {
    letter-spacing: -0.025em;
  }
}
/* android
-------------------------------------------------- */
@media only screen and (max-width: 360px) {
  html {
    font-size: 30%;
  }
}
/* iphone5, android-s
-------------------------------------------------- */
@media only screen and (max-width: 320px) {
  html {
    font-size: 26.6666666667%;
  }
}