/*------------------------------------------------
	Base
------------------------------------------------*/
html {
  -webkit-text-size-adjust: 100%;
}

main * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*------------------------------------------------
	Reset .. HTML5 Doctor Reset CSS
------------------------------------------------*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

main div, main span, main object, main iframe,
main h1, main h2, main h3, main h4, main h5, main h6, main p, main blockquote, main pre,
main abbr, main address, main cite, main code,
main del, main dfn, main em, main img, main ins, main kbd, main q, main samp,
main small, main strong, main sub, main sup, main var,
main b, main i,
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,
main article, main aside, main canvas, main details, main figcaption, main figure,
main footer, main header, main hgroup, main menu, main nav, main section, main summary,
main time, main mark, main audio, main video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}

main a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

main button, main input, main select, main textarea {
  font-size: 100%;
}

main address, main caption,
main i, main u, main em, main time, main cite, main code, main dfn, main var {
  font-style: normal;
}

main b, main em, main strong {
  font-weight: bolder;
}

main small, main sub, main sup {
  font-size: smaller;
}

main ul {
  list-style: none;
}

/*------------------------------------------------
	Common
------------------------------------------------*/
html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  overflow-x: hidden;
  margin: 0 auto;
}

.en {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

main img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: top;
}

main img.txt {
  width: auto;
  height: 1em;
  vertical-align: top;
}

main a, main button {
  -webkit-transition: background-color 0.12s ease-out, color 0.12s ease-out, border-color 0.12s ease-out, opacity 0.12s ease-out, -webkit-transform 0.20s ease-out;
  transition: background-color 0.12s ease-out, color 0.12s ease-out, border-color 0.12s ease-out, opacity 0.12s ease-out, -webkit-transform 0.20s ease-out;
  transition: background-color 0.12s ease-out, color 0.12s ease-out, border-color 0.12s ease-out, opacity 0.12s ease-out, transform 0.20s ease-out;
  transition: background-color 0.12s ease-out, color 0.12s ease-out, border-color 0.12s ease-out, opacity 0.12s ease-out, transform 0.20s ease-out, -webkit-transform 0.20s ease-out;
}

main a img, main button img {
  -webkit-transition: opacity 0.12s ease-out;
  transition: opacity 0.12s ease-out;
  opacity: 1;
}

main a:focus, main button:focus {
  outline: 0;
}

main a:hover img, main a:active img, main a:focus img, main button:hover img, main button:active img, main button:focus img {
  opacity: 0.7;
}

main h1, main h2, main h3, main h4, main h5, main h6 {
  margin: 0 auto 1em;
  font-family: serif;
}

main p, main ul, main ol, main dl, main table {
  margin-bottom: 1.822em;
}

@media only screen and (max-width: 767px) {
  main p, main ul, main ol, main dl, main table {
    margin-bottom: 1.889em;
  }
}

main p:last-child, main ul:last-child, main ol:last-child, main dl:last-child, main table:last-child {
  margin-bottom: 0 !important;
}

main table {
  border-collapse: collapse;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none;
}

/*------------------------------------------------
	Animation keyframes
------------------------------------------------*/
/* fade in/out */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* reset common style */
.clear {
  width: auto;
  height: 0;
}

body {
  background-color: #FFF;
}

#main {
  width: auto;
  max-width: none;
  overflow: hidden;
}

main {
  font-size: 175%;
  line-height: 1.822;
  font-size: 1.4584vw;
  background-color: #FFF;
  color: #4C4948;
}

@media only screen and (max-width: 767px) {
  main {
    font-size: 112.5%;
    line-height: 1.889;
  }
}

@media (max-width: 979px) {
  main {
    font-size: 1.8368vw;
  }
}

@media only screen and (max-width: 767px) {
  main {
    font-size: 4.3479vw;
  }
}

#footer {
  margin-top: 0;
}

.back {
  z-index: 999;
}

/*------------------------------------------------
	Layout
------------------------------------------------*/
.wrapper {
  position: relative;
  clear: both;
  display: block;
}

.container {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  width: 1220px;
  width: 63.5417vw;
  margin: 0 auto;
  padding: 0;
}

@media (max-width: 979px) {
  .container {
    width: 90%;
  }
}

@media only screen and (max-width: 767px) {
  .container {
    width: auto;
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}

@media only screen and (max-width: 479px) {
  .container {
    width: auto;
    padding-left: 14.5% !important;
    padding-right: 14.5% !important;
  }
}

/* Key Visual */
#kv {
  margin: 0 0 6.25vw;
}

@media only screen and (max-width: 767px) {
  #kv {
    margin-bottom: 21.7392vw;
  }
}

#kv img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile Menu */
@media only screen and (max-width: 767px) {
  #top {
    height: 0;
    padding: 0;
    border-top: 0;
  }
  #top #header div {
    display: none;
  }
  #headers {
    background: #fff;
  }
  #glmenu {
    width: auto;
    height: auto;
    border-top: 0;
  }
  #nav {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    padding: 2.5%;
    background: none;
    text-align: right;
  }
  #nav > a {
    width: 48px;
    height: 48px;
    margin-left: auto;
    border: 1px solid #FFF;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.2);
  }
  #nav > a:before, #nav > a:after {
    border-color: #FFF;
  }
  #nav:target > a:before {
    top: 48%;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  #nav:target > a:after {
    top: 48%;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  #nav > ul {
    margin: 2.5%;
    padding: 0;
    background-color: #FFF;
    background-color: rgba(255, 255, 255, 0.95);
  }
  #glmenu_shadow {
    display: none;
  }
}

/* main section */
main {
  padding-bottom: 1px;
}

main section {
  position: relative;
}

main > section {
  margin-bottom: 80px;
  margin-bottom: 4.1667vw;
}

main section.cols {
  margin: 0;
  text-align: left;
}

@media only screen and (max-width: 767px) {
  main section.cols {
    margin: 18.116vw 0;
  }
}

main section.cols .container {
  position: static;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  width: 610px;
  width: 31.7709vw;
}

@media (max-width: 979px) {
  main section.cols .container {
    width: 50%;
  }
}

@media only screen and (max-width: 767px) {
  main section.cols .container {
    width: auto;
  }
}

main section.cols .container.both {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 1220px;
  width: 63.5417vw;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 979px) {
  main section.cols .container.both {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  main section.cols .container.both {
    display: block;
    width: auto;
  }
}

main section.cols .container.both .col {
  width: 50%;
}

@media only screen and (max-width: 767px) {
  main section.cols .container.both .col {
    width: auto;
  }
}

main section.cols .image {
  position: absolute;
  z-index: 0;
  top: 0;
  width: 610px;
  width: 31.7709vw;
  margin: 0;
}

@media (max-width: 979px) {
  main section.cols .image {
    width: 50%;
  }
}

@media only screen and (max-width: 767px) {
  main section.cols .image {
    position: static;
    width: auto;
    margin: 7.2464vw auto;
  }
}

main section.cols .image.bg {
  width: 50%;
}

@media only screen and (max-width: 767px) {
  main section.cols .image.bg {
    width: auto;
  }
}

main section.cols .image.sub {
  top: auto;
  bottom: 0;
}

main section.cols .image img {
  max-width: 100%;
  height: auto;
}

main section.cols h2, main section.cols .detail {
  position: relative;
  z-index: 2;
}

@media (max-width: 979px) {
  main section.cols h2, main section.cols .detail {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media only screen and (max-width: 767px) {
  main section.cols h2, main section.cols .detail {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

main section.cols.right .container {
  margin-left: 0;
  padding-left: 50%;
}

main section.cols.right .image {
  right: 50%;
  padding-right: 30px;
  padding-right: 1.5625vw;
  text-align: right;
}

@media only screen and (max-width: 767px) {
  main section.cols.right .image {
    padding-right: 0;
  }
}

main section.cols.right .image.sub {
  right: auto;
  left: 50%;
  text-align: left;
}

main section.cols.right h2, main section.cols.right .detail {
  padding-left: 30px;
  padding-left: 1.5625vw;
}

main section.cols.left .container {
  margin-right: 0;
  padding-right: 50%;
}

main section.cols.left .image {
  left: 50%;
  padding-left: 30px;
  padding-left: 1.5625vw;
  text-align: left;
}

@media only screen and (max-width: 767px) {
  main section.cols.left .image {
    padding-left: 0;
  }
}

main section.cols.left .image.sub {
  left: auto;
  right: 50%;
  text-align: right;
}

main section.cols.left h2 {
  padding-right: 10px;
  padding-right: 0.5209vw;
}

main section.cols.left .detail {
  padding-right: 12px;
  padding-right: 0.625vw;
}

main h2, main h3 {
  position: relative;
  z-index: 255;
}

main h2 {
  font-size: 55px;
  font-size: 2.865vw;
  line-height: 1.5;
  margin-bottom: 1.182em;
}

@media only screen and (max-width: 767px) {
  main h2 {
    font-size: 36px;
    font-size: 8.696vw;
    line-height: 1.5;
  }
}

@media only screen and (max-width: 767px) {
  main h2 {
    margin-bottom: 0.584em;
  }
}

main h3 {
  font-size: 48px;
  font-size: 2.5vw;
  line-height: 1.584;
  margin-bottom: 0.261em;
}

@media only screen and (max-width: 767px) {
  main h3 {
    font-size: 14px;
    font-size: 3.382vw;
    line-height: 1.572;
  }
}

@media only screen and (max-width: 767px) {
  main h3 {
    margin-bottom: 1.858em;
  }
}

main figure {
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin-bottom: 1em;
  padding: 0;
}

main .wrapper {
  position: relative;
}

main .wrapper:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

main .left {
  text-align: left;
}

main .right {
  text-align: right;
}

main .center {
  text-align: center;
}

main .fleft {
  text-align: left;
}

main .fleft figure:first-child {
  float: left;
  margin-right: 8px;
  margin-right: 0.4167vw;
}

main .fleft figure:last-child {
  float: none;
  margin-right: 0;
}

main .fright {
  text-align: right;
}

main .fright figure:first-child {
  float: right;
  margin-left: 8px;
  margin-left: 0.4167vw;
}

main .fright figure:last-child {
  float: none;
  margin-left: 0;
}

main .wrapper.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

main .wrapper.flex.left {
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
}

main .wrapper.flex.right {
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
}

main .wrapper.flex.start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

main .wrapper.flex.end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

main .wrapper.flex.fill, main .wrapper.flex.stretch {
  -webkit-box-pack: stretch;
      -ms-flex-pack: stretch;
          justify-content: stretch;
}

main .wrapper.flex figure {
  margin-left: 4px;
  margin-left: 0.2084vw;
  margin-right: 4px;
  margin-right: 0.2084vw;
}

main .bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 0;
}

main .bg:before, main .bg:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  position: absolute;
  border: 4px solid #ccc;
  z-index: 1;
}

/* Animation Setting */
body {
  -webkit-animation: fadeIn 1.5s ease-out 0s 1 normal forwards;
          animation: fadeIn 1.5s ease-out 0s 1 normal forwards;
}

#kv1 {
  -webkit-animation: fadeIn 3.0s ease-out 0s 1 normal forwards;
          animation: fadeIn 3.0s ease-out 0s 1 normal forwards;
}

#kv2 {
  opacity: 0;
  -webkit-animation: fadeIn 2.5s ease-out 0.5s 1 normal forwards;
          animation: fadeIn 2.5s ease-out 0.5s 1 normal forwards;
}

.no-aos [data-aos] {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.no-aos [data-aos^=fade],
.no-aos [data-aos^=zoom] {
  opacity: 1;
}

.bg[data-aos="fade-up"]:before, .bg[data-aos="fade-up"]:after {
  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
  -webkit-transform: translate3d(0, 100px, 0);
          transform: translate3d(0, 100px, 0);
}

.bg[data-aos="fade-up"]:after {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}

.bg[data-aos="fade-up"].aos-animate:before, .bg[data-aos="fade-up"].aos-animate:after {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

/* fancybox customize */
.fancybox-bg {
  background: #000;
  opacity: 0.9;
}

.fancybox-slide--html {
  padding: 1.0417vw;
}

@media only screen and (max-width: 767px) {
  .fancybox-slide--html {
    padding: 4.831vw 2.4155vw;
  }
}

.fancybox-infobar,
.fancybox-toolbar,
.fancybox-caption,
.fancybox-button {
  background: none;
}

.compensate-for-scrollbar {
  margin-right: 0 !important;
}

.fancybox-button {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  width: 70px;
  width: 3.6459vw;
  height: 70px;
  height: 3.6459vw;
  padding: 25px;
  padding: 1.3021vw;
}

@media only screen and (max-width: 767px) {
  .fancybox-button {
    width: 4.3479vw;
    height: 4.3479vw;
    padding: 12px 10px;
    padding: 2.8986vw 2.4155vw;
  }
}

.fancybox-button svg {
  opacity: 0.75;
}

.fancybox-button svg path, .fancybox-button svg line {
  fill: transparent;
  stroke-width: 4px;
  stroke-width: 0.1042vw;
}

@media only screen and (max-width: 767px) {
  .fancybox-button svg path, .fancybox-button svg line {
    stroke-width: 0.4831vw;
  }
}

.fancybox-button svg path {
  stroke-width: 3px;
  stroke-width: 0.0782vw;
}

@media only screen and (max-width: 767px) {
  .fancybox-button svg path {
    stroke-width: 0.3624vw;
  }
}

.fancybox-toolbar {
  top: 0;
  right: 0;
}

.fancybox-navigation .fancybox-button--arrow_left,
.fancybox-navigation .fancybox-button--arrow_right {
  width: 50px;
  width: 2.6042vw;
  height: 100px;
  height: 5.2084vw;
  padding: 10px 25px;
  padding: 0.5209vw 1.3021vw;
  top: calc(50% - 3.125vw);
}

@media only screen and (max-width: 767px) {
  .fancybox-navigation .fancybox-button--arrow_left,
  .fancybox-navigation .fancybox-button--arrow_right {
    width: 3.8648vw;
    height: 7.7295vw;
    padding: 3.8648vw 2.6571vw;
    top: calc(50% - 7.7295vw);
  }
}

.fancybox-infobar {
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  min-width: 0;
  height: auto;
  padding: 0.75em 1em;
  font-size: 28px;
  font-size: 1.459vw;
  line-height: 1;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  text-align: right;
  color: #FFF;
  text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.8);
}

@media only screen and (max-width: 767px) {
  .fancybox-infobar {
    font-size: 12px;
    font-size: 2.899vw;
  }
}

@media only screen and (max-width: 767px) {
  .fancybox-infobar {
    padding: 0.75em;
  }
}

.fancybox-show-infobar .fancybox-infobar {
  opacity: 0.85;
}

/* main sections */
#summary {
  padding: 0 0 258.5px;
  padding: 0 0 13.4636vw;
}

@media only screen and (max-width: 767px) {
  #summary {
    padding: 0;
  }
}

#summary .wrapper {
  clear: both;
  position: relative;
}

#summary .bg {
  padding-right: 1.5625vw !important;
}

#summary header {
  margin-bottom: 260px;
  margin-bottom: 13.5417vw;
}

@media only screen and (max-width: 767px) {
  #summary header {
    margin-bottom: 44.5px;
    margin-bottom: 10.7488vw;
  }
}

#summary header h2 {
  font-size: 80px;
  font-size: 4.167vw;
  line-height: 1.55;
}

@media only screen and (max-width: 767px) {
  #summary header h2 {
    font-size: 36px;
    font-size: 8.696vw;
    line-height: 1.5;
  }
}

@media only screen and (max-width: 767px) {
  #summary header h2 {
    text-align: center;
  }
}

#summary header figure.col {
  float: left;
  margin-bottom: 0;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  #summary header figure.col {
    float: none;
    margin-bottom: 3.445em;
  }
}

#summary header #img-wanfu {
  width: 14.5834vw;
}

@media only screen and (max-width: 767px) {
  #summary header #img-wanfu {
    width: 45.8938vw;
  }
}

#secret {
  padding: 310px 0 283.5px;
  padding: 16.1459vw 0 14.7657vw;
}

@media only screen and (max-width: 767px) {
  #secret {
    padding: 0;
  }
  #secret .sub {
    display: none;
  }
}

#secret .image.bg {
  padding: 0;
}

#taste {
  padding: 150px 0 388.5px;
  padding: 7.8125vw 0 20.2344vw;
}

@media only screen and (max-width: 767px) {
  #taste {
    margin-bottom: 9.6619vw;
    padding: 0;
  }
}

#taste .image.bg {
  padding: 0;
}

#history {
  margin-top: 160px;
  margin-top: 8.3334vw;
  padding: 0 0 160px;
  padding: 0 0 8.3334vw;
}

@media only screen and (max-width: 767px) {
  #history {
    margin-top: 18.8406vw;
    margin-bottom: 9.6619vw;
    padding: 0;
  }
}

/* info - recipes, item */
#info {
  padding: 150px 0 82px;
  padding: 7.8125vw 0 4.2709vw;
  background: #000 url("../img/bg-recipes.jpg") repeat-x center top;
  background-size: 100% 100%;
  color: #FFF;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  #info {
    padding: 18.5991vw 0;
    background-image: url("../img/bg-recipes-sp@2x.jpg");
  }
}

#info a {
  color: #FFF;
}

#info section {
  margin-top: 220px;
  margin-top: 11.4584vw;
  margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
  #info section {
    margin-top: 21.7392vw;
  }
}

#info section:first-child {
  margin-top: 0;
}

#info caption, #info th, #info td {
  text-align: left;
}

#info th, #info td {
  padding-left: 3em;
}

@media only screen and (max-width: 767px) {
  #info th, #info td {
    padding-left: 4.75em;
  }
}

#info th:first-child, #info td:first-child {
  padding-left: 0;
}

#info p.nav {
  margin-top: 1.143em;
}

@media only screen and (max-width: 767px) {
  #info p.nav {
    margin-top: 1.723em;
  }
}

#info .btn {
  font-size: 71.5%;
  line-height: 1.8;
  display: inline-block;
  min-width: 17.7084vw;
  padding: 0.8em 1em;
  border-radius: 0.5em;
  border: 1px solid #757575;
  background: #757575;
  color: #FFF;
  text-decoration: none;
}

@media only screen and (max-width: 767px) {
  #info .btn {
    font-size: 111.2%;
  }
}

@media only screen and (max-width: 767px) {
  #info .btn {
    width: 71.0145vw;
  }
}

#info .btn:hover, #info .btn:active, #info .btn:focus {
  opacity: 0.7;
}

#recipes h2 {
  position: relative;
  margin-bottom: 0.655em;
  padding-bottom: 0.328em;
}

@media only screen and (max-width: 767px) {
  #recipes h2 {
    font-size: 1.612em;
    margin-bottom: 1.932em;
    padding-bottom: 0.276em;
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
}

#recipes h2:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1000px;
  width: 52.0834vw;
  margin-left: -500px;
  margin-left: -26.0416vw;
  height: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.75);
}

@media only screen and (max-width: 767px) {
  #recipes h2:after {
    width: 100%;
    left: 0;
    margin-left: 0;
  }
}

#recipes .container {
  width: auto;
  padding: 0 0.8073vw !important;
}

@media only screen and (max-width: 767px) {
  #recipes .container {
    width: auto;
    padding: 0 2.6571vw !important;
  }
}

#recipes .images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0;
  font-size: 40px;
  font-size: 2.084vw;
  line-height: 1.5;
}

@media only screen and (max-width: 767px) {
  #recipes .images {
    font-size: 15px;
    font-size: 3.624vw;
    line-height: 1.334;
  }
}

@media only screen and (max-width: 767px) {
  #recipes .images {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

#recipes .images li {
  width: 468px;
  width: 24.375vw;
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 767px) {
  #recipes .images li {
    width: 47.343vw;
    margin-bottom: 1.6em;
  }
}

#recipes .images figcaption {
  margin-top: 1em;
}

@media only screen and (max-width: 767px) {
  #recipes .images figcaption {
    margin-top: 0.5em;
  }
}

#recipes .images .image {
  overflow: visible;
  margin-bottom: 0;
}

#recipes .images .image .img {
  width: 100%;
  height: auto;
}

#recipes .images .image:before {
  content: "";
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  display: block;
  width: 125%;
  padding-top: 125%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  background: -webkit-radial-gradient(circle farthest-side, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0));
  background: radial-gradient(circle farthest-side, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0));
}

#recipes .images a {
  position: relative;
  display: block;
}

@media (min-width: 768px) {
  #recipes .images a[href="#recipe-1"] {
    left: -0.5208vw;
  }
  #recipes .images a[href="#recipe-4"] {
    left: 0.5209vw;
  }
}

#item {
  padding: 84px 0 78px;
  padding: 4.375vw 0 4.0625vw;
}

@media only screen and (max-width: 767px) {
  #item {
    padding: 0;
    text-align: center;
  }
}

#item .image {
  margin-bottom: 2.5em;
  text-align: center;
}

#item #img-wanfu {
  width: 14.5834vw;
}

@media only screen and (max-width: 767px) {
  #item #img-wanfu {
    width: 36.715vw;
  }
}

#item table {
  margin: 0;
}

@media only screen and (max-width: 767px) {
  #item table {
    margin: 0 auto;
  }
}

/* recipes */
#recipes-group {
  padding: 90px 90px;
  padding: 4.6875vw 4.6875vw;
  background: #000;
  color: #FFF;
  text-align: left;
}

.js #recipes-group {
  display: none;
}

article.recipe {
  overflow: hidden;
  position: relative;
  z-index: 0;
  width: 81.66667%;
  width: 81.6667vw;
  max-width: 90%;
  margin: 0 auto;
  padding: 58px 100px 68px 20px;
  padding: 3.0209vw 5.2084vw 3.5417vw 1.0417vw;
  border-radius: 68px;
  border-radius: 3.5417vw;
  background: #000 url("../img/recipes/bg-recipe.jpg") repeat-x center top;
  background-size: 100% 100%;
  color: #FFF;
  -webkit-box-shadow: 0 0 10.4167vw rgba(255, 255, 255, 0.3);
          box-shadow: 0 0 10.4167vw rgba(255, 255, 255, 0.3);
  font-size: 125%;
  line-height: 1.8;
  font-size: 1.0417vw;
}

@media only screen and (max-width: 767px) {
  article.recipe {
    font-size: 75%;
    line-height: 1.667;
  }
}

@media (max-width: 979px) {
  article.recipe {
    font-size: 1.6327vw;
  }
}

@media only screen and (max-width: 767px) {
  article.recipe {
    font-size: 2.8986vw;
    width: 81.15942%;
    width: 81.1595vw;
    padding: 8px 30px 40px;
    padding: 1.9324vw 7.2464vw 9.6619vw;
  }
}

article.recipe:first-child {
  margin-top: 0;
}

article.recipe img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: top;
}

article.recipe img.txt {
  width: auto;
  height: 1em;
  vertical-align: top;
}

article.recipe header {
  padding-top: 1px;
  outline: 0 !important;
}

article.recipe header h3, article.recipe header p {
  overflow: hidden;
  margin-left: 758px;
  margin-left: 39.4792vw;
}

@media only screen and (max-width: 767px) {
  article.recipe header h3, article.recipe header p {
    margin-left: 0;
  }
}

article.recipe header h3 {
  margin-top: 0.5em;
  margin-bottom: 0.209em;
  font-family: serif;
  font-weight: normal;
  font-size: 240%;
  line-height: 1.334;
}

@media (max-width: 979px) {
  article.recipe header h3 {
    font-size: 200%;
  }
}

@media only screen and (max-width: 767px) {
  article.recipe header h3 {
    font-size: 150%;
    line-height: 1.445;
    margin-bottom: 0;
  }
}

article.recipe header h3.sup {
  margin-top: 60px;
  margin-top: 68px;
  margin-top: 3.5417vw;
}

@media only screen and (max-width: 767px) {
  article.recipe header h3.sup {
    margin-top: 0;
  }
}

article.recipe header .summary {
  font-size: 155%;
  line-height: 1.646;
}

@media (max-width: 979px) {
  article.recipe header .summary {
    font-size: 100%;
  }
}

@media only screen and (max-width: 767px) {
  article.recipe header .summary {
    line-height: 1.66667;
  }
}

article.recipe header .summary.sup {
  margin-top: 24px;
  margin-top: 1.25vw;
  font-size: 230%;
  line-height: 1.5;
}

@media (max-width: 979px) {
  article.recipe header .summary.sup {
    font-size: 180%;
  }
}

@media only screen and (max-width: 767px) {
  article.recipe header .summary.sup {
    font-size: 150%;
    line-height: 1.445;
    margin-top: 0;
  }
}

article.recipe .image {
  float: left;
  position: relative;
  width: 748px;
  width: 38.9584vw;
  margin: 0;
  margin-right: 10px;
  margin-right: 0.5209vw;
  margin-bottom: 21px;
  margin-bottom: 1.0938vw;
}

@media only screen and (max-width: 767px) {
  article.recipe .image {
    float: none;
    width: auto;
    margin: 0 -22px 24px;
    margin: 0 -5.314vw 5.7972vw;
  }
}

article.recipe .image .img {
  width: 100%;
  height: auto;
}

article.recipe .image:before {
  content: "";
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  display: block;
  width: 105%;
  padding-top: 105%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 5%;
  margin-top: 4%;
  background: -webkit-radial-gradient(circle farthest-side, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0));
  background: radial-gradient(circle farthest-side, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0));
}

@media only screen and (max-width: 767px) {
  article.recipe .image:before {
    width: 100%;
    padding-top: 100%;
    left: 3%;
    margin-top: 3%;
  }
}

@media (min-width: 768px) {
  article.recipe#recipe-1 .image {
    left: -20px;
    left: -1.0416vw;
  }
}

@media only screen and (max-width: 767px) {
  article.recipe#recipe-1 .image {
    left: -8px;
    left: -1.9323vw;
  }
}

article.recipe header + .detail {
  margin-top: 28px;
  margin-top: 1.4584vw;
  padding-top: 24px;
  padding-top: 1.25vw;
  border-top: 2px solid rgba(255, 255, 255, 0.75);
}

@media only screen and (max-width: 767px) {
  article.recipe header + .detail {
    margin-top: 0.5em;
    padding-top: 0.5em;
    border-top-width: 1px;
  }
}

article.recipe .detail {
  margin-left: 758px;
  margin-left: 39.4792vw;
}

@media only screen and (max-width: 767px) {
  article.recipe .detail {
    margin-left: 0;
  }
}

article.recipe .detail p {
  margin-bottom: 0.6em;
}

article.recipe dl.detail {
  padding-left: 1.25vw;
}

@media only screen and (max-width: 767px) {
  article.recipe dl.detail {
    padding-left: 4.831vw;
  }
}

article.recipe dl.detail dt {
  list-style: disc;
  display: list-item;
  font-weight: bold;
}

article.recipe dl.detail dd {
  margin-left: 1em;
  padding: 0;
}

html[lang^="zh"] article.recipe dl.detail dt,
html[lang^="ja"] article.recipe dl.detail dt {
  float: left;
  width: 7.5em;
}

@media (max-width: 979px) {
  html[lang^="zh"] article.recipe dl.detail dt,
  html[lang^="ja"] article.recipe dl.detail dt {
    float: none;
    width: auto;
  }
}

html[lang^="zh"] article.recipe dl.detail dd,
html[lang^="ja"] article.recipe dl.detail dd {
  margin-left: 7.5em;
  margin-bottom: 0.6em;
}

@media (max-width: 979px) {
  html[lang^="zh"] article.recipe dl.detail dd,
  html[lang^="ja"] article.recipe dl.detail dd {
    margin-left: 0;
  }
}

article.recipe ol.detail {
  padding-left: 1.66667em;
}

article.recipe ol.detail li {
  margin: 0.6em 0;
  padding-left: 0.33333em;
}

article.recipe .controls {
  clear: both;
  position: relative;
  z-index: 2;
  margin: 2.1em 0;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  article.recipe .controls {
    margin: 1.084em 0;
  }
}

article.recipe .controls:last-child {
  margin-bottom: 0;
}

article.recipe .controls .btn {
  font-size: 100%;
  line-height: 1.8;
  position: relative;
  padding: 0.8em 2.9em;
  padding-left: 122px;
  padding-left: 6.3542vw;
  outline: 0;
  border-radius: 0.5209vw;
  border: 1px solid #757575;
  background: #757575;
  color: #FFF;
}

@media only screen and (max-width: 767px) {
  article.recipe .controls .btn {
    font-size: 83.4%;
  }
}

article.recipe .controls .btn:hover, article.recipe .controls .btn:active {
  background: #4C4948;
}

@media only screen and (max-width: 767px) {
  article.recipe .controls .btn {
    padding: 0.75em 2.8em;
    padding-left: 60px;
    padding-left: 14.4928vw;
    border-radius: 1.4493vw;
  }
}

article.recipe .controls .btn:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  vertical-align: middle;
  background: url("../img/ico/ico-close@2x.png") no-repeat center;
  background-size: contain;
  width: 2.6042vw;
  height: 2.6042vw;
  margin-top: -1.3021vw;
  left: 0.7813vw;
  padding: 0.625vw;
  border: 1px solid #FFF;
  border-radius: 100%;
  background-color: #FFF;
  background-size: 1.25vw;
  color: #757575;
}

@media only screen and (max-width: 767px) {
  article.recipe .controls .btn:before {
    width: 6.0387vw;
    height: 6.0387vw;
    margin-top: -3.01935vw;
  }
}

@media only screen and (max-width: 767px) {
  article.recipe .controls .btn:before {
    left: 1.9324vw;
    padding: 2.4155vw;
    background-size: 3.1401vw;
  }
}