<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";

@font-face {
  font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100;
}

@font-face {
  font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200;
}

@font-face {
  font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300;
}

@font-face {
  font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400;
}

@font-face {
  font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: bold;
}

#container {
	overflow: hidden;
}

#main html, #main body, #main div, #main span, #main applet, #main object, #main iframe,
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6, #main p, #main blockquote, #main pre,
#main a, #main abbr, #main acronym, #main address, #main big, #main cite, #main code, #main del,
#main dfn, #main em, #main img, #main ins, #main kbd, #main q, #main s, #main samp, #main small,
#main strike, #main strong, #main sub, #main sup, #main tt, #main var, #main dl, #main dt, #main dd,
#main ol, #main ul, #main li, #main fieldset, #main form, #main label, #main legend,
#main table, #main caption, #main tbody, #main tfoot, #main thead, #main tr, #main th, #main td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

#main body {
  line-height: 1;
  color: #000;
  background: #fff;

}

#main ol,
#main ul {
  list-style: none;

}

#main table {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;

}

#main caption,
#main th,
#main td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;

}

#main a img {
  border: none;

}

@media screen and (max-width: 1000px) {
  #main .pc {
    display: none !important;
  }
}

@media screen and (min-width: 1001px) {
  #main .sp {
    display: none !important;
  }
}
/*
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}
*/
#top_nv p {
  line-height: 0;
  font-size: 14px;

}

#contents #pankuzu {
  margin: 0;

}

#pagetop img {
  vertical-align: bottom;

}

#main {
  color: #030;
  font-family: "Yu Gothic", YuGothic;

}

#main div,
#main section,
#main a,
#main img,
#main span,
#main ul,
#main li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

#main .hidden {
  display: none !important;

}

#main a,
#main .active-button {
  text-decoration: none;
  cursor: pointer;

}

#main a:hover,
#main .active-button:hover {
  filter: brightness(1.2);
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);

}

#main .section-wrapper {
  position: relative;
  width: 1000px;
  margin: 0 auto;

}

#main #faq {
  position: absolute;
  width: 900px;
  left: calc(50vw - 450px);
  background-color: #d3d98a;
  border-radius: 10px;
  z-index: 10010;
  opacity: 1;
  -ms-filter: none;
  filter: none;

}

#main #faq.invisible {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  display: none;

}

#main #faq .header {
  position: relative;
  background: url("../img/bg-faq.png");
  padding: 20px 0;
  text-align: center;

}

#main #faq .header .close-button {
  position: absolute;
  top: -30px;
  right: -30px;
  cursor: pointer;

}

#main #faq ul.qa {
  margin-top: 40px;
  text-align: center;

}

#main #faq .prev-button {
  float: right;
  margin: 2.5%;
  width: 150px;
  height: 50px;
  border-radius: 25px;
  background: url("../img/btn-faq-prev.png") no-repeat;
  background-position: 10% center;
  -webkit-background-size: auto 40%;
  -moz-background-size: auto 40%;
  background-size: auto 40%;
  background-color: #124f08;
  font-size: 24px;
  line-height: 50px;
  color: #fff;
  padding-left: 60px;

}

#main #top {
  background: url("../img/bg-top.jpg") no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center;

}

#main #top #key-visual {
  padding: 20px 0 0;
  text-align: center;

}

#main #top ul#jumper {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  width: 1000px;
  margin: 0 auto;
  padding: 24px 0;
  -webkit-box-pack: distribute;
  -moz-box-pack: distribute;
  -o-box-pack: distribute;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;

}

#main #sec-1 {
  padding-bottom: 60px;
  background-color: #3a7623;
  color: #fff;

}

#main #sec-1 p.title {
  position: absolute;
  right: 0;

}

#main #sec-1 p.desc {
  padding: 80px 0 60px;

}

#main #sec-2 {
  background-color: #d3d98a;

}

#main #sec-2 p.image {
  position: absolute;
  top: 2.5%;
  right: 0;

}

#main #sec-2 p.title {
  padding: 60px 0 20px;
  line-height: 0;
  text-align: center;

}

#main #sec-2 p.sub-title {
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 10px;

}

#main #sec-2 p.desc {
  font-size: 16px;
  letter-spacing: 0.08em;
  line-height: 1.4;

}

#main #sec-2 p.notes {
  font-size: 10px;
  padding-bottom: 20px;
  text-align: center;
}

#main #sec-2 ul {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

}

#main #sec-2 ul li {
  width: calc(100% / 3);
  text-align: center;
  margin: 40px 0;

}

#main #sec-2 .border {
  line-height: 0;
  z-index: 10;
  max-width: 100%;
  padding-top: 25px;
  overflow: hidden;
  white-space: nowrap;

}

#main #sec-3 {
  position: relative;
  background-image: url("../img/bg-sec-3.png");
  background-color: #3a7623;
  color: #fff;
  padding-bottom: 80px;

}

#main #sec-3 p.title {
  position: absolute;
  right: 0;

}

#main #sec-3 p.sub-title {
  width: 60%;
  padding-left: 50px;
  padding-bottom: 10px;
  font-size: 23px;
  line-height: 1.4;
  font-weight: bold;

}

#main #sec-3 p.desc {
  padding: 0 50px 50px;
  font-size: 21px;
  width: 60%;
  line-height: 1.4;

}

#main #sec-3 ul.secret li {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;

}

#main #sec-3 ul.secret li .text {
  margin-top: 120px;
  margin-left: 10px;
  font-size: 18px;
  line-height: 1.4;
  width: 37.5%;

}

#main #sec-3 ul.secret li p.label {
  margin-bottom: 20px;

}

#main #sec-3 ul.secret li:nth-child(2) {
  padding-left: 40px;

}

#main #sec-3 ul.secret li:nth-child(2) p.image {
  margin-top: 120px;

}

#main #sec-3 ul.secret li:nth-child(2) .text {
  margin-right: 2.5%;

}

#main #sec-3 ul.secret li:nth-child(3) {
  padding-left: 20px;

}

#main #sec-3 ul.secret li:nth-child(3) .text {
  margin-top: 40px;
  margin-left: 100px;
  width: auto;

}

#main #sec-3 ul.secret li:nth-child(3) p.label {
  margin-left: -120px;

}

#main #sec-4 {
  background: url("../img/bg-sec-4.jpg") no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center;

}

#main #sec-4 p.title {
  text-align: center;
  padding: 64px 0;

}

#main #sec-4 ul.button {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  width: 816px;
  margin: 0 auto;
  -webkit-box-pack: distribute;
  -moz-box-pack: distribute;
  -o-box-pack: distribute;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;

}

#main #sec-4 ul.button li {
  cursor: pointer;

}

#main #sec-4 .movie {
  padding: 32px 0 64px;
  text-align: center;
  position: relative;

}

#main #sec-4 .movie .play-button {
  position: absolute;
  top: calc(50% - 43px);
  left: calc(50% - 57px);
  line-height: 0;
  z-index: 10;

}

#main #sec-5 {
  background-color: #3a7623;
  padding-bottom: 60px;

}

#main #sec-5 p.title {
  padding: 40px 0 30px;
  text-align: center;

}

#main #sec-5 .recipe ul.thumbnail {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  /* space-between start */
  -webkit-justify-content: start;
  justify-content: start;
  gap: 0 10px;
  /* space-between start */
}
@media screen and (max-width: 1000px) {
    #main #sec-5 .recipe ul.thumbnail {
    gap: 0;
    }
}

#main #sec-5 .recipe ul.thumbnail li {
  line-height: 0;
  margin-top: 20px;
  cursor: pointer;

}

#main #sec-5 .recipe ul.thumbnail li:hover {
  filter: brightness(1.2);
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);

}

#main #sec-5 .recipe ul.thumbnail li.selected &gt; img {
  border-color: #e60019;

}

#main #sec-5 .recipe ul.thumbnail li img {
  border: 4px solid transparent;
  display: block;

}



/*2018 0223*/

#main #sec-5 .recipe ul.thumbnail2 {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;

}

#main #sec-5 .recipe ul.thumbnail2 li {
  line-height: 0;
  margin-top: 20px;

	margin-left: 5px;

	margin-right: 5px;
  cursor: pointer;

}

#main #sec-5 .recipe ul.thumbnail2 li:hover {
  filter: brightness(1.2);
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);

}

#main #sec-5 .recipe ul.thumbnail2 li.selected &gt; img {
  border-color: #e60019;

}

#main #sec-5 .recipe ul.thumbnail2 li img {
  border: 4px solid transparent;
  display: block;

}



@media screen and (max-width: 1000px) {
  #footer,
  .pagetop {
    display: none !important;
  }

	#pankuzu {

		padding: 1em .5em;

	}
  #main a:hover {
    filter: none;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  #main img {
    width: 100%;
  }
  #main .section-wrapper {
    width: 100%;
  }
  #main .section-wrapper .thumbnail-wrap ul {
    margin: 2em 15%;
  }
  #main .section-wrapper .thumbnail-wrap ul.slick-dots {
    margin: 0;
  }
  #main #faq {
    width: 90%;
    left: 5%;
  }
  #main #faq .header {
    padding: 0;
  }
  #main #faq .header p.title {
    margin: 0;
    padding: 4% 15%;
  }
  #main #faq .header a.close-button {
    width: 10%;
    right: -5%;
    top: -25%;
  }
  #main #faq ul.qa {
    padding: 0 5%;
    margin: 5% 0 0;
  }
  #main #faq .prev-button {
    width: 30%;
    height: 6vw;
    font-size: 2.4vw;
    line-height: 6vw;
    padding-left: 13%;
  }
  #main #top {
    line-height: 0;
    font-size: 0;
    padding-top: 0;
  }
  #main #top #key-visual {
    padding: 0;
    line-height: 0;
    font-size: 0;
  }
  #main #sp-header {
    position: fixed;
    z-index: 50;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
  }
  #main #sp-header p.logo {
    float: left;
    height: 55px;
  }
  #main #sp-header p.logo img {
    width: auto;
    height: 35px;
    margin: 10px;
  }
  #main #sp-header a.menu-button {
    display: block;
    float: right;
    width: 55px;
    height: 55px;
    background-color: #124f08;
    -webkit-background-size: 50%;
    -moz-background-size: 50%;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center 45%;
  }
  #main #sp-header a.menu-button.open {
    background-image: url("../img/btn-sp-header-open.png");
  }
  #main #sp-header a.menu-button.close {
    background-image: url("../img/btn-sp-header-close.png");
  }
  #main #sp-header ul#sp-header-menu {
    clear: both;
    background: url("../img/bg-sp-header-menu.png");
    padding: 5% 0 10%;
  }
  #main #sp-header ul#sp-header-menu li {
    text-align: center;
    width: 90%;
    margin: 0 auto;
    padding: 4% 0 3%;
    border-bottom: 1px solid #d3d98a;
  }
  #main #sp-header ul#sp-header-menu li img {
    width: auto;
    height: 18px;
  }
  #main #sec-1 {
    padding: 0 0 20px;
  }
  #main #sec-1 p.title {
    position: relative;
    line-height: 0;
  }
  #main #sec-1 p.image {
    margin: 7.5% 12.5% 5%;
    line-height: 0;
  }
  #main #sec-1 p.desc {
    padding: 0;
    margin: 0 5%;
  }
  #main #sec-1 a.link-to-faq {
    padding-bottom: 20px;
  }
  #main #sec-2 p.title {
    /* margin: 0 20% 0 5%; */
    padding: 10% 0 5%;
  }
  #main #sec-2 p.sub-title {
    margin-left: 5%;
    font-size: 12px;
  }
  #main #sec-2 p.desc {
    font-size: 12px;
    margin-left: 5%;
    letter-spacing: normal;
  }
  #main #sec-2 p.notes {
    /* margin: 0.5% 5% 0; */
    /* font-size: 8px; */
    line-height: 1.4;
  }
  #main #sec-2 p.image {
    position: static;
  }
  #main #sec-2 ul.reason {
    margin: 15% 0 5%;
  }
  #main #sec-2 ul.reason li {
    margin: 0;
    margin-top: -5%;
    width: 50%;
    padding: 0 3.75%;
  }
  #main #sec-2 ul.reason li img {
    width: 100%;
  }
  #main #sec-2 ul.reason li:nth-child(3n - 2) {
    width: 100%;
    padding: 0 7.5%;
  }
  #main #sec-2 ul.reason li:nth-child(3n - 2) img {
    width: 50%;
  }
  #main #sec-2 .border {
    padding-top: 2%;
  }
  #main #sec-2 .border img {
    width: 200%;
  }
  #main #sec-3 {
    padding: 0;
  }
  #main #sec-3 p.title {
    position: relative;
    margin-left: 5%;
  }
  #main #sec-3 p.sub-title {
    font-size: 12px;
    padding: 0;
    margin: 5% 5% 2.5%;
    width: auto;
  }
  #main #sec-3 p.desc {
    padding: 0;
    margin: 2.5% 5% 5%;
    font-size: 12px;
    width: auto;
  }
  #main #sec-3 ul.secret li:nth-child(n) {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
  }
  #main #sec-3 ul.secret li:nth-child(n) p.image {
    width: 60%;
    margin: 0 auto 2.5%;
  }
  #main #sec-3 ul.secret li:nth-child(n) .text {
    width: 100%;
    margin: 0 0 10%;
  }
  #main #sec-3 ul.secret li:nth-child(n) .text p.detail {
    font-size: 12px;
    margin: 0 5%;
  }
  #main #sec-3 ul.secret li:nth-child(n) .text p.label {
    margin: 0;
  }
  #main #sec-3 ul.secret li:nth-child(2) p.image {
    width: 90%;
    margin-top: 2.5%;
  }
  #main #sec-4 p.title {
    padding: 5% 2.5%;
  }
  #main #sec-4 ul.button {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: auto;
    margin: 0 2.5%;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  #main #sec-4 ul.button li {
    width: 48.725%;
  }
  #main #sec-4 .movie .play-button {
    width: 20%;
    left: 40%;
    top: calc(83 / 114 * 50%);
  }
  #main #sec-4 .movie video {
    width: 90vw;
    height: calc(90vw / 1.787);
  }
  #main #sec-5 {
    padding-bottom: 10%;
  }
  #main #sec-5 p.title {
    padding: 2.5% 5%;
  }
  #main #sec-5 .recipe {
    margin: 0 5%;
    overflow: hidden;
  }
  #main #sec-5 .thumbnail-wrap {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #main #sec-5 .recipe ul.thumbnail {
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -o-box-lines: single;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 450%;
    margin-top: 5%;
  }
  #main #sec-5 .recipe ul.thumbnail li {
    width: 45%;
    margin: 0;
    margin-right: 0.5%;
  }
  #main #sec-5 .recipe ul.thumbnail li.selected &gt; img {
    margin: 0;
  }
  #main #sec-5 .recipe ul.thumbnail li:hover {
    filter: none;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  #main #copyright {
    text-align: center;
    color: #fff;
    line-height: 3;
    font-size: 11px;
  }

	

	/*2018 0223*/
 #main #sec-5 .recipe .thumbnail-wrap2 {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }


  #main #sec-5 .recipe ul.thumbnail2 {
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -o-box-lines: single;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 130%;
    margin-top: 5%;

	 -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;

	 -webkit-justify-content:space-between;
  justify-content: space-between;


  }
  #main #sec-5 .recipe ul.thumbnail2 li {
    width: 100%;
    margin: 0;
    margin-right: 0.5%;
  }
  #main #sec-5 .recipe ul.thumbnail2 li.selected &gt; img {
    margin: 0;
  }
  #main #sec-5 .recipe ul.thumbnail2 li:hover {
    filter: none;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

}



.flex-wrap {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

}

@media screen and (max-width: 767px) {
  .flex-wrap {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

}

.flex-wrap.wrap {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

}

.flex-wrap.center {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

}

.flex-wrap.stretch {
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -o-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;

}

.flex-wrap.space-between {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;

}

.flex-wrap.space-around {
  -webkit-box-pack: distribute;
  -moz-box-pack: distribute;
  -o-box-pack: distribute;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;

}

.flex-wrap.flex-start {
  -webkit-box-align: start;
  -moz-box-align: start;
  -o-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;

}

.flex-wrap.flex-end {
  -webkit-box-align: end;
  -moz-box-align: end;
  -o-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;

}



#main ul.recipe-thumbnails {
  margin: 2em 0;

}

#main ul.recipe-thumbnails &gt; li {
  position: relative;
  width: 19%;
  padding-top: 15%;
  text-align: center;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  font-family: serif;
  font-weight: bold;
  line-height: 1.4;
  box-sizing: border-box;
  font-size: 1.125em;
}

#main ul.recipe-thumbnails &gt; li:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: .25em solid transparent;
  box-sizing: border-box;

}

#main ul.recipe-thumbnails &gt; li .recipe-name {
  position: absolute;
  background-color: #fff;
  bottom: 0;
  left: 0;
  padding: .5em 1%;
  width: calc(100% - .25em);
}

#main ul.recipe-thumbnails &gt; li.selected:after {
  border-color: #e60019;

}

#main ul.recipe-thumbnails li.thumbnail &gt; div{
  height: 100%;
  width: 97%;
  max-height: 130px;
  max-width: 194px;
  overflow: hidden;
  position: relative;
}

@media screen and (max-width: 767px) {
  #main ul.recipe-thumbnails li.thumbnail &gt; div{
    width: 100%;
  }

}

#main ul.recipe-thumbnails li#slick-slide04 img,
#main ul.recipe-thumbnails li[data-target="#recipe-avotoma-5"] img {
  bottom: -21%;
  left: -25%;
  position: absolute;
  width: 200%;
}


#main ul.recipe-thumbnails li#slick-slide05 img,
#main ul.recipe-thumbnails li[data-target="#recipe-avotoma-6"] img  {
  bottom: -21%;
  left: -25%;
  position: absolute;
  width: 200%;
}

#main ul.recipe-thumbnails li#slick-slide06 img,
#main ul.recipe-thumbnails li[data-target="#recipe-avotoma-7"] img  {
  bottom: -17%;
  left: -25%;
  position: absolute;
  width: 200%;
}

#main ul.recipe-thumbnails li#slick-slide07 img,
#main ul.recipe-thumbnails li[data-target="#recipe-avotoma-8"] img  {
  bottom: -30%;
  left: -18%;
  position: absolute;
  width: 175%;
}

#main ul.recipe-thumbnails &gt; li:hover {
  opacity: 0.9;

}

#main ul.recipe-thumbnails &gt; li:nth-child(5n - 4),

#main ul.recipe-thumbnails &gt; li:nth-child(5n - 3),

#main ul.recipe-thumbnails &gt; li:nth-child(5n - 2),

#main ul.recipe-thumbnails &gt; li:nth-child(5n - 1) {
  margin-right: 1.25%;

}

#main ul.recipe-thumbnails &gt; li:nth-child(n + 6) {
  margin-top: 1.25%;

}

#main ul.recipe-thumbnails:after {
  content: '';
  flex-grow: 1;
  display: block;

}



#main ul.recipes &gt; li {
  background-color: #fff;
  padding: 3em 2.5em;
  color: #082b0a;
  background-image: url(../img/bg-recipe-frame.png);
  background-size: 100% 9px;
  background-position: center top;
  background-repeat: no-repeat;

}

#main ul.recipes .note{
  font-size: 0.889em;
}

#main ul.recipes sub {
  font-size: 0.889em;
}

#main ul.recipes .image-container {
  width: 46%;

}

#main ul.recipes .image-container .image {
  width: 100%;
  padding-top: 75.2%;
  background-size: cover;

}


/* 20181010 */
#main ul.recipes .image-container .image#avotoma-recipe-image-5 {
  background-size: 220%;
  background-position: 30% 70%;

}

#main ul.recipes .image-container .image#avotoma-recipe-image-6 {
  background-size: 180%;
  background-position: 20% 60%;

}

#main ul.recipes .image-container .image#avotoma-recipe-image-7 {
  background-size: 170%;
  background-position: 15% 60%;

}

#main ul.recipes .image-container .image#avotoma-recipe-image-8 {
  background-size: 150%;
  background-position: 15% 45%;

}



#main ul.recipes .text-container {
  width: 50%;

}



#main ul.recipes .recipe-title {
  padding: 0 0 1em;
  font-size: 1.875em;
  font-weight: bold;
  line-height: 1.2;
  font-family: serif;

}



#main ul.recipes .green {
  color: white;
  background-color: #009944;
  text-align: center;
  width: 9em;
  font-size: 1.25em;
  line-height: 1.4;
  margin-bottom: 1em;

}

#main ul.recipes .yellow {
  color: white;
  background-color: #f8b62b;
  padding: 0 .5em;
  font-size: 1.25em;
  line-height: 1.4;
  margin-bottom: 1em;

}

/* 20181010 */
_:-ms-input-placeholder, :root #main ul.recipes .green {
  padding-top: 6px;
  line-height: 1;
}

_:-ms-input-placeholder, :root #main ul.recipes .yellow {
  padding-top: 6px;
  line-height: 1;
}


#main ul.recipes ul.ingredients {
  margin: 0 0 .75em;
  font-size: 1.125em;
  height: 12em;
  min-height: 11em;
  max-height: 18em;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

}



#main ul.recipes ul.ingredients &gt; li {
  width: 100%;

}

#main ul.recipes ul.ingredients &gt; li.half {
  width: 48.75%;
  padding-right: 1.25em;
  margin-right: auto;

}



#main ul.ingredients &gt; li p.border {
  border-top: 1px dashed #000;
  margin: 0 .5em;
  flex-grow: 1;

}



#main ul.processes span.label {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  border-radius: 2em;
  background-color: #082b0a;
  line-height: 1.25;
  letter-spacing: 1em;
  text-indent: .4em;
  color: white;
  text-align: center;

}

#main ul.processes &gt; li {
  padding-left: 1.5em;
  text-indent: -1.5em;

}



#main ul.recipes .note {
  margin-top: 1em;

}

#main ul.recipes .lead {
  font-size: 1.5em;
  font-weight: bold;
  font-family: serif;
  margin-bottom: 1em;
  line-height: 1.4;

}



@media screen and (max-width: 767px) {
  #main #avotoma-recipe {
    font-size: 3vw;
  }
  #main ul.recipes .lead {
    font-size: 1em;
    margin: 1em 0 0;
  }
  #main #avotoma-recipe .thumbnail-wrap {
    margin-left: 3%;
    margin-right: 3%;
  }
  #main ul.recipe-thumbnails {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -o-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 315%;
  }
  #main .section-wrapper .thumbnail-wrap ul {
    margin: 0;
    padding: 3vw 0;
  }
  #main ul.recipe-thumbnails &gt; li:nth-child(n) {
    /*width: 43.75%;*/
    width: 43.75vw;
    padding: 0;
    font-size: 1em;
    margin-top: 0;
    margin-right: 10px;
    min-width: 165px;
  }
  #main ul.recipes &gt; li {
    margin: 0 3%;
    padding: 3em 1.5em 2em;
  }
  #main ul.recipe-thumbnails &gt; li .recipe-name{
    box-sizing: border-box;
    width: 100%;
  }
  #main ul.recipes .text-container,
  #main ul.recipes .image-container {
    width: 100%;
  }
  #main ul.recipes .recipe-title {
    text-align: center;
    font-size: 1.75em;
  }
  #main ul.recipes .ingredient-wrap {
    margin-top: 1em;
  }
  #main ul.recipes ul.ingredients {
    font-size: .875em;
  }


  #main ul.recipes .green,
  #main ul.recipes .yellow {
    font-size: 1em;
    margin-top: 1em;
  }



}



/* 20180629 */

@media screen and (max-width: 767px) {

	#wrapper {

		padding: 70px 0 0;

	}
  #header #main_nv {
    display: none;
  }
  #header #main_nv_sp {
    display: block;
    position: relative;
  }
  #header #main_nv_sp img {
    vertical-align: baseline;
  }
  #header #main_nv_sp ul {
    display: none;
  }
  #header #main_nv_sp h1 {
    display: block;
    width: 105px;
    height: auto;
    padding: 15px 15px;
    line-height: 0;
  }
  #header #main_nv_sp #menu_sp {
    display: block;
    background: url(/cmn/sp_gnv_menu.png) 0 0 no-repeat;
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
    text-indent: -999px;
    overflow: hidden;
    position: absolute;
    top: 11px;
    right: 15px;
  }
  #header #main_nv_sp #menu_sp+ul {

		box-sizing: border-box;
    width: 100%;
    background: url(/cmn/gnv-bg.png) repeat 0 0;
    padding: 15px 3%;
    position: absolute;
    z-index: 1;
  }
  #header #main_nv_sp #menu_sp+ul&gt;li {
    margin-bottom: 2px;
    list-style: none;
  }
  #header #main_nv_sp #menu_sp+ul li a {
    display: block;
    background: #fff;
    padding: 10px;
  }

	#header .switch {

		display: none;
  }
}

/*slick slide*/

#main .multiple-item .slick-track{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -o-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}

#main .multiple-item li.slick-slide{
  height: auto;
  padding-bottom: 0.4em;
  position: relative;
  float: none;
}

#main .multiple-item li.slick-slide.selected::before{
  border: 4px solid #ff0000;
  box-sizing: border-box;
  content: " ";
  display: block;
  height: 100%;
  position: absolute;
  width: 97%;
  z-index: 1;
}

#main .multiple-item li.slick-slide &gt; div{
  margin-right: 3%;
}
#main .multiple-item li.slick-slide img{
  height: auto;
  width: 100%;
}

#main .multiple-item li.slick-slide p.recipe-name{
  background-color: #ffffff;
  bottom: 0;
  font-family: serif;
  font-size: 1.125em;
  line-height: 1;
  padding: .5em 1%;
  position: absolute;
  text-align: center;
  left: 0;
  width: 95%;
}

#main ul.recipes ul.ingredients &gt; li.half p.name{
  white-space: nowrap;
}

#main ul.recipes ul.ingredients &gt; li.half p.amount{
  text-align: right;
  white-space: nowrap;
}

.slick-prev,
.slick-next{
  width: 40px;
  height: 40px;
}
.slick-prev{
  left: -50px;
}

.slick-next{
  right: -50px;
}

.slick-prev::before,
.slick-next::before{
  font-size: 40px;
}

/* ==========================================================================
	sec-1 youtube add:20200203
	========================================================================== */

#main .movie-title {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  /* font-size: 56px; */
  font-size: 36px;
  line-height: 1;
  padding-top: 1em;
  text-align: center;
}
#main .movie-youtube {
  margin: 20px 0 40px;
  text-align: center;
}

#main .movie-youtube iframe {
  /* w:872, h:488 / w:560, h:315 */
  height: 490px;
  vertical-align: bottom;
  width: 872px;
}

@media screen and (max-width: 1000px) {
  #main .movie-youtube iframe {
    height: calc(90vw * 0.562);
    width: 90vw;
  }
}
@media screen and (max-width: 1000px) {
  #main .movie-title {
    /* font-size: 7.3vw; */
    font-size: 4.3vw;
  }
  #main .movie-youtube {
    margin: 2.7vw 0 5.3vw;
  }
}
</pre></body></html>