@charset "UTF-8";
html {
  font-size: 62.5%;
}

.pcNone {
  display: none !important;
}

.whiteHeaderPart {
  /* normalize.css v3.0.2 | MIT License | git.io/normalize */
  margin: 0;
  /******************************
  共通
   ******************************/
  width: 100%;
  font-size: 1.6rem;
  line-height: 1;
  font-family: YuGothic, "Yu Gothic", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", "ＭＳ ゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
  word-break: break-all;
  min-width: 1000px;
  color: #010101;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.whiteHeaderPart h1, .whiteHeaderPart h2, .whiteHeaderPart h3, .whiteHeaderPart h4, .whiteHeaderPart h5, .whiteHeaderPart h6, .whiteHeaderPart p {
  line-height: 1;
}
.whiteHeaderPart article,
.whiteHeaderPart aside,
.whiteHeaderPart details,
.whiteHeaderPart figcaption,
.whiteHeaderPart figure,
.whiteHeaderPart footer,
.whiteHeaderPart header,
.whiteHeaderPart hgroup,
.whiteHeaderPart main,
.whiteHeaderPart menu,
.whiteHeaderPart nav,
.whiteHeaderPart section,
.whiteHeaderPart summary {
  display: block;
}
.whiteHeaderPart audio,
.whiteHeaderPart canvas,
.whiteHeaderPart progress,
.whiteHeaderPart video {
  display: inline-block;
  vertical-align: baseline;
}
.whiteHeaderPart audio:not([controls]) {
  display: none;
  height: 0;
}
.whiteHeaderPart [hidden],
.whiteHeaderPart template {
  display: none;
}
.whiteHeaderPart a {
  background-color: transparent;
}
.whiteHeaderPart a:active,
.whiteHeaderPart a:hover {
  outline: 0;
}
.whiteHeaderPart abbr[title] {
  border-bottom: 1px dotted;
}
.whiteHeaderPart b,
.whiteHeaderPart strong {
  font-weight: 700;
}
.whiteHeaderPart dfn {
  font-style: italic;
}
.whiteHeaderPart h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
.whiteHeaderPart mark {
  background: #ff0;
  color: #000;
}
.whiteHeaderPart small {
  font-size: 80%;
}
.whiteHeaderPart sub,
.whiteHeaderPart sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.whiteHeaderPart sup {
  top: -0.5em;
}
.whiteHeaderPart sub {
  bottom: -0.25em;
}
.whiteHeaderPart img {
  border: 0;
}
.whiteHeaderPart svg:not(:root) {
  overflow: hidden;
}
.whiteHeaderPart figure {
  margin: 1em 40px;
}
.whiteHeaderPart hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
.whiteHeaderPart pre {
  overflow: auto;
}
.whiteHeaderPart code,
.whiteHeaderPart kbd,
.whiteHeaderPart pre,
.whiteHeaderPart samp {
  font-family: monospace;
  font-size: 1em;
}
.whiteHeaderPart button,
.whiteHeaderPart input,
.whiteHeaderPart optgroup,
.whiteHeaderPart select,
.whiteHeaderPart textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
.whiteHeaderPart button {
  overflow: visible;
}
.whiteHeaderPart button,
.whiteHeaderPart select {
  text-transform: none;
}
.whiteHeaderPart button,
.whiteHeaderPart html input[type=button],
.whiteHeaderPart input[type=reset],
.whiteHeaderPart input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}
.whiteHeaderPart button[disabled],
.whiteHeaderPart html input[disabled] {
  cursor: default;
}
.whiteHeaderPart button::-moz-focus-inner,
.whiteHeaderPart input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.whiteHeaderPart input {
  line-height: normal;
}
.whiteHeaderPart input[type=checkbox],
.whiteHeaderPart input[type=radio] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}
.whiteHeaderPart input[type=number]::-webkit-inner-spin-button,
.whiteHeaderPart input[type=number]::-webkit-outer-spin-button {
  height: auto;
}
.whiteHeaderPart input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.whiteHeaderPart input[type=search]::-webkit-search-cancel-button,
.whiteHeaderPart input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
.whiteHeaderPart fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
.whiteHeaderPart legend {
  border: 0;
  padding: 0;
}
.whiteHeaderPart textarea {
  overflow: auto;
}
.whiteHeaderPart optgroup {
  font-weight: 700;
}
.whiteHeaderPart td,
.whiteHeaderPart th {
  padding: 0;
}
.whiteHeaderPart blockquote,
.whiteHeaderPart body,
.whiteHeaderPart dd,
.whiteHeaderPart div,
.whiteHeaderPart dl,
.whiteHeaderPart dt,
.whiteHeaderPart fieldset,
.whiteHeaderPart form,
.whiteHeaderPart h1,
.whiteHeaderPart h2,
.whiteHeaderPart h3,
.whiteHeaderPart h4,
.whiteHeaderPart h5,
.whiteHeaderPart h6,
.whiteHeaderPart input,
.whiteHeaderPart li,
.whiteHeaderPart ol,
.whiteHeaderPart p,
.whiteHeaderPart pre,
.whiteHeaderPart td,
.whiteHeaderPart textarea,
.whiteHeaderPart th,
.whiteHeaderPart ul {
  margin: 0;
  padding: 0;
}
.whiteHeaderPart table {
  border-collapse: collapse;
  border-spacing: 0;
}
.whiteHeaderPart fieldset,
.whiteHeaderPart img,
.whiteHeaderPart input {
  border: 0;
}
.whiteHeaderPart address,
.whiteHeaderPart caption,
.whiteHeaderPart cite,
.whiteHeaderPart code,
.whiteHeaderPart dfn,
.whiteHeaderPart th,
.whiteHeaderPart var {
  font-style: normal;
}
.whiteHeaderPart ol,
.whiteHeaderPart ul {
  list-style: none;
}
.whiteHeaderPart caption,
.whiteHeaderPart th {
  text-align: left;
}
.whiteHeaderPart h1,
.whiteHeaderPart h2,
.whiteHeaderPart h3,
.whiteHeaderPart h4,
.whiteHeaderPart h5,
.whiteHeaderPart h6 {
  font-size: 100%;
  text-align: left;
}
.whiteHeaderPart q:after,
.whiteHeaderPart q:before {
  content: "";
}
.whiteHeaderPart abbr,
.whiteHeaderPart acronym {
  border: 0;
}
.whiteHeaderPart a,
.whiteHeaderPart img {
  vertical-align: top;
  display: inline-block;
}
.whiteHeaderPart, .whiteHeaderPart * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.whiteHeaderPart *:before,
.whiteHeaderPart *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
.whiteHeaderPart a,
.whiteHeaderPart input {
  outline: none;
  color: #010101;
  text-decoration: none;
}
.whiteHeaderPart a,
.whiteHeaderPart a:link,
.whiteHeaderPart a:visited,
.whiteHeaderPart a:hover,
.whiteHeaderPart a:active {
  text-decoration: none;
}

#siteHeaderPc {
  /*ナビゲーション*/
  /*フォーム要素*/
  /*固定時*/
}
#siteHeaderPc .headerTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 1170px;
  width: 96%;
  margin: 0 auto;
  padding: 26px 0 25px;
}
#siteHeaderPc .headerTop > div {
  display: block;
}
#siteHeaderPc .headerTop .headerLogo {
  padding-top: 8px;
  text-align: left;
}
#siteHeaderPc .headerTop .headerLink {
  text-align: right;
}
#siteHeaderPc .headerTop .headerLink .headerLinkTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#siteHeaderPc .headerTop .headerLink .headerLinkTop .headerTxtLink ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#siteHeaderPc .headerTop .headerLink .headerLinkTop .headerTxtLink ul li {
  margin-right: 28px;
}
#siteHeaderPc .headerTop .headerLink .headerLinkTop .headerTxtLink ul li a {
  color: #818181;
  font-size: 1.2rem;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
#siteHeaderPc .headerTop .headerLink .headerLinkTop .headerTxtLink ul li a:hover {
  opacity: 0.8;
}
#siteHeaderPc .headerTop .headerLink .headerLinkTop .headerTxtLink ul li a img {
  margin-left: 7px;
  vertical-align: middle;
}
#siteHeaderPc .headerTop .headerLink .headerLinkTop .headerSns {
  width: auto;
}
#siteHeaderPc .headerTop .headerLink .headerLinkTop .headerSns ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  letter-spacing: 0;
}
#siteHeaderPc .headerTop .headerLink .headerLinkTop .headerSns ul li {
  margin-right: 23px;
  font-size: 18px;
  letter-spacing: 0;
}
#siteHeaderPc .headerTop .headerLink .headerLinkTop .headerSns ul li:last-of-type {
  margin-right: 0;
}
#siteHeaderPc .headerTop .headerLink .headerLinkTop .headerSns ul li a {
  color: #a3a4a4;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
#siteHeaderPc .headerTop .headerLink .headerLinkTop .headerSns ul li a:hover {
  opacity: 0.8;
}
#siteHeaderPc .headerTop .headerLink .gnav {
  margin-top: 28px;
}
#siteHeaderPc .headerTop .headerLink .gnav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
#siteHeaderPc .headerTop .headerLink .gnav ul li:not(:first-of-type) {
  margin-left: 48px;
}
#siteHeaderPc .headerTop .headerLink .gnav ul li a {
  font-weight: 800;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
#siteHeaderPc .headerTop .headerLink .gnav ul li a:hover {
  color: #f60;
}
#siteHeaderPc .headerBottom {
  background: #eeedeb;
}
#siteHeaderPc .headerBottom .subNav > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: static;
  max-width: 1170px;
  width: 96%;
  min-width: 960px;
  margin: 0 auto;
  padding: 14px 0;
  font-size: normal;
  text-align: left;
}
#siteHeaderPc .headerBottom .subNav > ul > li {
  font-size: 1.2rem;
  letter-spacing: 0;
}
#siteHeaderPc .headerBottom .subNav > ul > li:first-of-type {
  margin-right: -10px;
}
#siteHeaderPc .headerBottom .subNav > ul > li:nth-of-type(2) {
  width: 30.769%;
}
#siteHeaderPc .headerBottom .subNav > ul > li.subNavSearchBtn {
  position: relative;
}
#siteHeaderPc .headerBottom .subNav > ul > li.subNavSearchBtn a {
  display: block !important;
}
#siteHeaderPc .headerBottom .subNav > ul > li a,
#siteHeaderPc .headerBottom .subNav > ul > li span {
  display: inline-block;
  padding: 0;
  color: #222;
  font-weight: bold;
  line-height: 30px;
  text-decoration: none;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
#siteHeaderPc .headerBottom .subNav > ul > li a img,
#siteHeaderPc .headerBottom .subNav > ul > li span img {
  margin-right: 11px;
  vertical-align: middle;
}
#siteHeaderPc .headerBottom ul li:hover {
  background: transparent;
}
#siteHeaderPc .headerBottom ul li:hover .inlist {
  background: transparent;
}
#siteHeaderPc .headerSearch {
  max-width: 100%;
  text-align: left;
}
#siteHeaderPc .headerSearch form {
  display: block;
  position: relative;
  width: 100%;
}
#siteHeaderPc .headerSearch form input[type=text] {
  width: 100%;
  padding: 6px 30px 4px 14px;
  color: #323232;
  font-size: 1.3rem;
  border: none;
  border-radius: 5px;
}
#siteHeaderPc .headerSearch form button {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  padding: 0 10px 0 5px;
  color: #696969;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#siteHeaderPc .headerSearch input::-moz-placeholder {
  color: #999;
}
#siteHeaderPc .headerSearch input::placeholder,
#siteHeaderPc .headerSearch input::-moz-placeholder,
#siteHeaderPc .headerSearch input::-webkit-input-placeholder,
#siteHeaderPc .headerSearch input:-ms-input-placeholder {
  color: #999;
}
#siteHeaderPc .headerFixed.nopankuzu {
  -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
}
#siteHeaderPc .whiteHeaderPart.headerFixed {
  min-width: 960px;
  width: 100%;
  background: #fff;
  position: fixed;
  top: -100%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 100;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner {
  max-width: 1170px;
  width: 96.6%;
  margin: 0 auto;
  padding: 17px 0;
  display: table;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner > div {
  display: table-cell;
  vertical-align: middle;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .headerLogo {
  width: 170px;
  padding-bottom: 0;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .headerLogo img {
  width: 100%;
  height: auto;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .gnav {
  padding-right: 0;
  text-align: right;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .gnav li {
  font-family: YuGothic, "Yu Gothic", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", "ＭＳ ゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
  font-size: 1.3rem;
  padding: 0;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .gnav li + li {
  margin-left: 42px;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .gnav li:first-of-type span {
  cursor: pointer;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .gnav li:first-of-type span img {
  margin: -3px 11px 0 0;
  vertical-align: middle;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .gnav li:nth-of-type(2) {
  margin-left: 51px;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .gnav li .inList {
  width: auto;
  position: absolute;
  top: 41px;
  left: -10px;
  background: #ddd;
  text-align: left;
  padding: 15px 18px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .gnav li .inList::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 15px 10px;
  border-color: transparent transparent #dfdfdf transparent;
  top: -10px;
  left: 15px;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .gnav li .inList li {
  display: block;
  margin-left: 0;
  padding: 0;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .gnav li .inList li a {
  color: #323232;
  white-space: nowrap;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .gnav li:hover .inList {
  opacity: 1;
  visibility: visible;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .headerSearch {
  width: 181px;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .headerSearch input[type=text] {
  width: 181px;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .headerLogin {
  width: 52px;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .pankuzu {
  font-family: YuGothic, "Yu Gothic", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", "ＭＳ ゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: #888;
  background: #eee;
  -webkit-box-shadow: 0 8px 10px -10px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 8px 10px -10px rgba(0, 0, 0, 0.5) inset;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .pankuzu ul {
  padding: 8px 0;
}
#siteHeaderPc .whiteHeaderPart.headerFixed .headerInner .pankuzu ul li a {
  color: #888;
}

/*固定時*/
.headerFixed.nopankuzu {
  -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
}

.whiteHeaderPart.headerFixed {
  min-width: 960px;
  width: 100%;
  background: #fff;
  position: fixed;
  top: -100%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 100;
}

.whiteHeaderPart.headerFixed .headerInner {
  max-width: 1170px;
  width: 96.6%;
  margin: 0 auto;
  padding: 17px 0;
  display: table;
}

.whiteHeaderPart.headerFixed .headerInner > div {
  display: table-cell;
  vertical-align: middle;
}

.whiteHeaderPart.headerFixed .headerInner .headerLogo {
  width: 170px;
  padding-bottom: 0;
}

.whiteHeaderPart.headerFixed .headerInner .headerLogo img {
  width: 100%;
  height: auto;
}

.whiteHeaderPart.headerFixed .headerInner .gnav {
  padding-right: 0;
  text-align: right;
}

.whiteHeaderPart.headerFixed .headerInner .gnav li {
  font-family: YuGothic, "Yu Gothic", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", "ＭＳ ゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
  font-size: 1.3rem;
  padding: 0;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
}

.whiteHeaderPart.headerFixed .headerInner .gnav li + li {
  margin-left: 42px;
}

.whiteHeaderPart.headerFixed .headerInner .gnav li:first-of-type span {
  cursor: pointer;
}

.whiteHeaderPart.headerFixed .headerInner .gnav li:first-of-type span img {
  margin: -3px 11px 0 0;
  vertical-align: middle;
}

.whiteHeaderPart.headerFixed .headerInner .gnav li:nth-of-type(2) {
  margin-left: 51px;
}

.whiteHeaderPart.headerFixed .headerInner .gnav li .inList {
  width: auto;
  position: absolute;
  top: 41px;
  left: -10px;
  background: #ddd;
  text-align: left;
  padding: 15px 18px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.whiteHeaderPart.headerFixed .headerInner .gnav li .inList::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 15px 10px;
  border-color: transparent transparent #dfdfdf transparent;
  top: -10px;
  left: 15px;
}

.whiteHeaderPart.headerFixed .headerInner .gnav li .inList li {
  display: block;
  margin-left: 0;
  padding: 0;
}

.whiteHeaderPart.headerFixed .headerInner .gnav li .inList li a {
  color: #323232;
  white-space: nowrap;
}

.whiteHeaderPart.headerFixed .headerInner .gnav li:hover .inList {
  opacity: 1;
  visibility: visible;
}

.whiteHeaderPart.headerFixed .headerInner .headerSearch {
  width: 181px;
}

.whiteHeaderPart.headerFixed .headerInner .headerSearch input[type=text] {
  width: 181px;
}

.whiteHeaderPart.headerFixed .headerInner .headerLogin {
  width: 52px;
}

.whiteHeaderPart.headerFixed .headerInner .pankuzu {
  font-family: YuGothic, "Yu Gothic", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", "ＭＳ ゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: #888;
  background: #eee;
  -webkit-box-shadow: 0 8px 10px -10px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 8px 10px -10px rgba(0, 0, 0, 0.5) inset;
}

.whiteHeaderPart.headerFixed .headerInner .pankuzu ul {
  padding: 8px 0;
}

.whiteHeaderPart.headerFixed .headerInner .pankuzu ul li a {
  color: #888;
}

.searchOpen .whiteHeaderPart.recipeSearch {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  visibility: visible;
}

.whiteHeaderPart.recipeSearch {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: auto;
  max-width: initial;
  height: 100vh;
  padding: 96px 0 30px;
  font-size: 1.2rem;
  background: #fff;
  z-index: 1002;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  visibility: hidden;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.whiteHeaderPart.recipeSearch .recipeSearchHead {
  padding: 0 20px;
}

.whiteHeaderPart.recipeSearch .recipeSearchHead .recipeSearchCloseBtn {
  position: relative;
  float: right;
  width: 36px;
  height: 36px;
  margin: 0 40px 0 0;
  padding: 0;
  font-size: 0;
  cursor: pointer;
  border-radius: 0;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.whiteHeaderPart.recipeSearch .recipeSearchHead .recipeSearchCloseBtn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.whiteHeaderPart.recipeSearch .recipeSearchHead .recipeSearchCloseBtn::before,
.whiteHeaderPart.recipeSearch .recipeSearchHead .recipeSearchCloseBtn::after {
  content: "";
  width: 51px;
  height: 1px;
  background: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.whiteHeaderPart.recipeSearch .recipeSearchHead .recipeSearchCloseBtn::before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.whiteHeaderPart.recipeSearch .recipeSearchHead .recipeSearchCloseBtn::after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.whiteHeaderPart.recipeSearch .recipeSearchHead .recipeSearchTit {
  color: #222;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
}

.whiteHeaderPart.recipeSearch .recipeSearchCont {
  margin: 42px auto 0;
  max-width: 643px;
}

.whiteHeaderPart.recipeSearch .recipeSearchCont .recipeSearchForm {
  width: 100%;
}

.whiteHeaderPart.recipeSearch .recipeSearchCont .recipeSearchForm form {
  display: block;
  position: relative;
  width: 100%;
}

.whiteHeaderPart.recipeSearch .recipeSearchCont .recipeSearchForm form input[type=text] {
  width: 100%;
  padding: 25px 60px 25px 30px;
  color: #323232;
  font-size: 1.8rem;
  background: #eeedeb;
  border: none;
  border-radius: 5px;
}

.whiteHeaderPart.recipeSearch .recipeSearchCont .recipeSearchForm form button {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  padding: 0 22px 0 5px;
  color: #000;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.whiteHeaderPart.recipeSearch .recipeSearchCont .recipeSearchForm form button i {
  font-size: 30px;
}

.whiteHeaderPart.recipeSearch .recipeSearchCont .recipeSearchList .recipeSearchListTit {
  margin-top: 44px;
  padding: 0 20px;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
}

.whiteHeaderPart.recipeSearch .recipeSearchCont .recipeSearchList .recipeSearchListTit img {
  width: 18px;
  margin-right: 17px;
}

.whiteHeaderPart.recipeSearch .recipeSearchCont .recipeSearchList ul.recipeList {
  margin-top: 18px;
}

.whiteHeaderPart.recipeSearch .recipeSearchCont .recipeSearchList ul.recipeList li.hasInList::after {
  width: 6px;
  height: 6px;
}

.whiteHeaderPart.recipeSearch .recipeSearchCont .recipeSearchList ul.recipeList li:nth-of-type(12)::after {
  left: auto;
  right: 28px;
}

.whiteHeaderPart.recipeSearch .recipeSearchCont .recipeSearchList .contBtn {
  margin-top: 20px;
}

.whiteHeaderPart.recipeSearch .recipeSearchCont .recipeSearchList .contBtn a {
  max-width: 180px;
  height: 50px;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  border-radius: 25px;
}

.recipeSearchForm input::-moz-placeholder {
  color: #999;
}

.recipeSearchForm input::placeholder,
.recipeSearchForm input::-moz-placeholder,
.recipeSearchForm input::-webkit-input-placeholder,
.recipeSearchForm input:-ms-input-placeholder {
  color: #999;
}

/* レシピ検索（サブメニュープルダウン） */
.subNavSearchOpen {
  position: relative;
}

.subNavSearchOpen .subNavSearch {
  visibility: visible;
  opacity: 1;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}

.subNavSearch {
  position: absolute;
  /* top: calc(100% + 14px); */
  top: 44px;
  right: 50%;
  width: 680px !important;
  min-width: auto;
  min-width: initial !important;
  background: #fff;
  -webkit-transform: translateX(340px);
  -ms-transform: translateX(340px);
  transform: translateX(340px);
  -webkit-transition: 0;
  transition: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 1003;
}

.subNavSearch::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  width: 16px;
  height: 10px;
  margin: 0 auto;
  border-top: none;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid #fff;
}

.subNavSearch .subNavSearchCont {
  padding: 20px;
}

.subNavSearch .subNavSearchCont .subNavSearchList {
  padding: 0;
}

.subNavSearch .subNavSearchCont .subNavSearchList ul.recipeList li a {
  line-height: 1.25 !important;
}

.subNavSearch .subNavSearchCont .subNavSearchList ul.recipeList li.hasInList::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  width: 8px;
  height: 8px;
  margin: 0 auto;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.subNavSearch .subNavSearchCont .subNavSearchList ul.recipeList li.hasInList.open {
  background: #dcdbd9;
}

.subNavSearch .subNavSearchCont .subNavSearchList ul.recipeList li.hasInList.open::after {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.subNavSearch .subNavSearchCont .subNavSearchList ul.recipeList li .inListChild {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 640px;
}

.subNavSearch .subNavSearchCont .subNavSearchList .contBtn {
  margin: 20px 0 0;
}

#siteHeaderPc .subNavSearch .subNavSearchCont .subNavSearchList .contBtn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 180px;
  height: 50px;
  margin: 0 auto;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  border-radius: 25px;
}

/* レシピ検索リスト（共通） */
ul.recipeList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  min-width: auto;
  min-width: initial !important;
  border: 2px solid #f6f6f6;
}

ul.recipeList li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: table;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  width: 16.666% !important;
  height: 50px;
}

ul.recipeList li a {
  display: table-cell !important;
  color: #222;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.363;
  letter-spacing: 0;
  vertical-align: middle;
  text-align: center;
}

ul.recipeList li a:hover,
ul.recipeList li a:active {
  text-decoration: none;
}

ul.recipeList li:nth-of-type(2),
ul.recipeList li:nth-of-type(4),
ul.recipeList li:nth-of-type(6),
ul.recipeList li:nth-of-type(7),
ul.recipeList li:nth-of-type(9),
ul.recipeList li:nth-of-type(11),
ul.recipeList li:nth-of-type(14),
ul.recipeList li:nth-of-type(16),
ul.recipeList li:nth-of-type(18),
ul.recipeList li:nth-of-type(19),
ul.recipeList li:nth-of-type(21),
ul.recipeList li:nth-of-type(23),
ul.recipeList li:nth-of-type(26),
ul.recipeList li:nth-of-type(28),
ul.recipeList li:nth-of-type(30),
ul.recipeList li:nth-of-type(31),
ul.recipeList li:nth-of-type(33),
ul.recipeList li:nth-of-type(35),
ul.recipeList li:nth-of-type(38),
ul.recipeList li:nth-of-type(40),
ul.recipeList li:nth-of-type(42),
ul.recipeList li:nth-of-type(43),
ul.recipeList li:nth-of-type(45),
ul.recipeList li:nth-of-type(47) {
  background: #f6f6f6;
}

ul.recipeList li.hasInList::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 50% 80%;
  -ms-transform-origin: 50% 80%;
  transform-origin: 50% 80%;
}

ul.recipeList li.hasInList.open {
  background: #dcdbd9;
}

ul.recipeList li.hasInList.open::after {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

ul.recipeList li:nth-of-type(12)::after {
  left: auto;
  right: 28px;
}

ul.recipeList li .inListChild {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  z-index: 2;
  padding: 18px;
  background: #dcdbd9;
}

ul.recipeList li .inListChild ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  min-width: auto;
  min-width: initial !important;
  margin: 0;
  padding: 0;
  background: #dcdbd9;
}

ul.recipeList li .inListChild ul li {
  width: 16.666%;
  height: 40px;
  background: #fff !important;
}

ul.recipeList li .inListChild ul li:nth-of-type(n-6) {
  border-top: 1px solid #dcdbd9;
}

ul.recipeList li .inListChild ul li:not(:nth-of-type(6n+1)) {
  border-left: 1px solid #dcdbd9;
}

ul.recipeList li .inListChild ul li a {
  display: block;
  color: #222;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.363;
  letter-spacing: 0;
  text-align: center;
}

ul.recipeList li.hasInList.open .inListChild {
  height: auto;
  visibility: visible;
  opacity: 1;
}

#siteFooter {
  position: relative;
  margin-top: 84px;
  padding: 50px 0 40px;
  background: #2d2c29;
}
#siteFooter .footerSns {
  text-align: center;
}
#siteFooter .footerSns ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  letter-spacing: normal;
}
#siteFooter .footerSns ul li {
  margin-left: 25px;
  font-size: 23px;
}
#siteFooter .footerSns ul li a {
  color: #fff;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
#siteFooter .footerSns ul li a:hover {
  opacity: 0.8;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}
#siteFooter .footerLink {
  margin-top: 33px;
  letter-spacing: normal;
}
#siteFooter .footerLink ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
#siteFooter .footerLink ul + ul {
  margin-top: 20px;
}
#siteFooter .footerLink ul li {
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0;
}
#siteFooter .footerLink ul li + li {
  margin-left: 38px;
  padding-left: 0;
  border-left: none;
}
#siteFooter .footerLink ul li a {
  font-size: 1.3rem;
  color: #fff;
}
#siteFooter .footerLogo {
  margin-top: 40px;
  text-align: center;
}
#siteFooter .footerCopy {
  margin-top: 40px;
}
#siteFooter .footerCopy p {
  font-family: "Noto Sans", sans-serif;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 200;
  text-align: center;
}
#siteFooter .footerAttention {
  margin-top: 17px;
}
#siteFooter .footerAttention p {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
}
#siteFooter .toTopBtn {
  position: fixed;
  bottom: 50px;
  right: 30px;
  opacity: 0.5;
}

.whiteHeaderPart .contBtn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 50%;
  max-width: 340px;
  height: 70px;
  margin: 0 auto;
  padding: 0;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  background: #2d2c29;
  border-radius: 35px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.whiteHeaderPart .contBtn a::before {
  content: none;
}
.whiteHeaderPart .contBtn--small a {
  width: 180px;
  height: 50px;
  border-radius: 25px;
}
.whiteHeaderPart .contBtn a:hover {
  background: #666;
}
.whiteHeaderPart .contBtn a:hover:before {
  right: 30px;
  opacity: 1;
}