/*
$newsColor: (
  col01: #238561,
  col02: #67a2b7,
  col03: #d2843e,
  col04: #cf775b,
  col05: #cf9942,
  col06: #926c28,
  col07: #cc7175,
  col08: #608ea1,
  col09: #5b609a,
  col10: #487390,
  col11: #4e9386,
  col12: #79a153,
  col13: #817499
);
*/
#sort_set {
  position: relative;
  display: block;
  z-index: 1000;
  width: 100%;
  overflow: hidden; }
  @media screen and (min-width: 769px) {
    #sort_set {
      height: 6.6rem;
      background: #43ae37; } }

@media screen and (min-width: 769px) {
  #sort_set dl {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rem;
    margin: 0 auto;
    height: 100%; } }
@media screen and (max-width: 768px) {
  #sort_set dl {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0; } }

#sort_set dl dt {
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900; }
  @media screen and (min-width: 769px) {
    #sort_set dl dt {
      height: 6.6rem;
      line-height: 1em;
      font-size: 2.6rem;
      letter-spacing: 0.05em;
      margin-right: 4.5rem; } }
  @media screen and (max-width: 768px) {
    #sort_set dl dt {
      height: 8rem;
      line-height: 1em;
      font-size: 3.2rem;
      letter-spacing: 0.05em;
      background: #43ae37; } }

#sort_set dl dt span {
  position: relative; }
  @media screen and (min-width: 769px) {
    #sort_set dl dt span {
      display: none; } }
  @media screen and (max-width: 768px) {
    #sort_set dl dt span {
      width: 3.4rem;
      margin-left: 2rem;
      transform: translateY(-0.6rem); } }

#sort_set dl dd {
  position: relative; }
  @media screen and (min-width: 769px) {
    #sort_set dl dd {
      height: 6.6rem; } }
  @media screen and (max-width: 768px) {
    #sort_set dl dd {
      width: 100%;
      height: 0;
      transition: .6s ease-out;
      background: #66ba5a; } }

#sort_set dl dd > div {
  position: relative; }
  @media screen and (min-width: 769px) {
    #sort_set dl dd > div {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 6.6rem;
      gap: 4.5rem; } }
  @media screen and (max-width: 768px) {
    #sort_set dl dd > div {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      padding: 4rem 0 0rem 15rem;
      transition: .6s ease-out; } }

@media screen and (max-width: 768px) {
  #sort_set dl dd.open {
    opacity: 1;
    height: auto !important; } }

#sort_set dl dd a {
  position: relative;
  display: block;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    #sort_set dl dd a {
      min-height: 2.2rem;
      line-height: 1em;
      font-size: 2.2rem;
      letter-spacing: 0.05em;
      padding-left: 2.8rem; } }
  @media screen and (max-width: 768px) {
    #sort_set dl dd a {
      min-height: 2.2rem;
      height: 8rem;
      line-height: 1em;
      font-size: 3rem;
      letter-spacing: 0.05em;
      padding-left: 4rem; } }

@media screen and (max-width: 768px) {
  #sort_set dl dd a:nth-of-type(1) {
    width: 20rem;
    order: 1; } }

@media screen and (max-width: 768px) {
  #sort_set dl dd a:nth-of-type(2) {
    width: 20rem;
    order: 3; } }

@media screen and (max-width: 768px) {
  #sort_set dl dd a:nth-of-type(3) {
    width: 20rem;
    order: 5; } }

@media screen and (max-width: 768px) {
  #sort_set dl dd a:nth-of-type(4) {
    width: 28rem;
    order: 2; } }

@media screen and (max-width: 768px) {
  #sort_set dl dd a:nth-of-type(5) {
    width: 28rem;
    order: 4; } }

#sort_set dl dd a::before {
  display: block;
  content: "";
  position: absolute; }
  @media screen and (min-width: 769px) {
    #sort_set dl dd a::before {
      top: 0;
      left: 0;
      border: #fff 1px solid;
      width: 2rem;
      height: 2rem; } }
  @media screen and (max-width: 768px) {
    #sort_set dl dd a::before {
      top: 0;
      left: 0;
      border: #fff 1px solid;
      width: 2.6rem;
      height: 2.6rem; } }

#sort_set dl dd a::after {
  opacity: 0;
  display: block;
  content: "";
  position: absolute;
  background: url("../img/recipe/check.png") center center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 769px) {
    #sort_set dl dd a::after {
      top: 0;
      left: 0.4rem;
      width: 2.2rem;
      height: 1.6rem; } }
  @media screen and (max-width: 768px) {
    #sort_set dl dd a::after {
      top: 0;
      left: 0.6rem;
      width: 3rem;
      height: 2.2rem; } }

#sort_set dl dd a.check::after {
  opacity: 1; }

#recipe_set {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  transition: .6s ease-in-out; }
  @media screen and (min-width: 769px) {
    #recipe_set {
      width: 100rem;
      margin: 0 auto;
      padding: 6rem 0 6rem;
      min-height: 48rem; } }
  @media screen and (max-width: 768px) {
    #recipe_set {
      width: 75rem;
      margin: 0 auto;
      padding: 5rem 2rem 6rem 4rem;
      min-height: 52rem; } }

#recipe_set a {
  position: relative;
  display: block;
  transition: .6s ease-in-out;
  opacity: 0;
  transform: translateY(10px);
  transform-origin: center center; }
  @media screen and (min-width: 769px) {
    #recipe_set a {
      width: 25rem;
      height: 25rem; } }
  @media screen and (max-width: 768px) {
    #recipe_set a {
      width: 34.5rem;
      height: 34.5rem; } }

#recipe_set a.start {
  opacity: 1;
  transform: translateY(0); }

#recipe_set .non,
#recipe_set .non img {
  transition: .6s ease-in-out;
  width: 0 !important;
  opacity: 0; }

#recipe_set a img {
  position: relative;
  display: block;
  transition: .4s ease-in-out;
  transform-origin: center center; }
  @media screen and (min-width: 769px) {
    #recipe_set a img {
      width: 26.5rem !important;
      height: 26.5rem !important; } }
  @media screen and (max-width: 768px) {
    #recipe_set a img {
      width: 37.5rem !important;
      height: 37.5rem !important; } }

@media screen and (min-width: 769px) {
  #recipe_set a:hover img {
    transform: scale(1.1); } }

#recipe_set .notfound {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #644c42;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    #recipe_set .notfound {
      line-height: 1.607em;
      font-size: 3.3rem;
      letter-spacing: 0.05em; } }
  @media screen and (max-width: 768px) {
    #recipe_set .notfound {
      line-height: 1.8em;
      font-size: 3.5rem;
      letter-spacing: 0.05em; } }

#recipe_set.non_hit .notfound {
  opacity: 1; }

#recipe_set .cap {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #727272;
  font-weight: 400; }
  @media screen and (min-width: 769px) {
    #recipe_set .cap {
      line-height: 1em;
      font-size: 1.4rem;
      letter-spacing: 0em;
      padding: 0 0rem 2rem; } }
  @media screen and (max-width: 768px) {
    #recipe_set .cap {
      line-height: 1em;
      font-size: 2.2rem;
      letter-spacing: 0em;
      padding: 0 4rem 4rem; } }