/*
$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
);
*/
#detail_set {
  position: relative;
  overflow: hidden;
  color: #43ae37; }
  @media screen and (min-width: 769px) {
    #detail_set {
      width: 100rem;
      margin: 0 auto;
      padding: 4rem 0 6rem; } }
  @media screen and (max-width: 768px) {
    #detail_set {
      width: 75rem;
      margin: 0 auto;
      padding: 6rem 0 6rem; } }

#ttl_block {
  position: relative; }
  @media screen and (min-width: 769px) {
    #ttl_block {
      width: 100rem;
      display: flex;
      align-items: flex-start;
      justify-content: space-between; } }
  @media screen and (max-width: 768px) {
    #ttl_block {
      width: 67rem;
      margin: 0 auto; } }

#ttl_block > figure {
  position: relative; }
  @media screen and (min-width: 769px) {
    #ttl_block > figure {
      width: 59.5rem;
      padding-top: 2rem; } }
  @media screen and (max-width: 768px) {
    #ttl_block > figure {
      width: 59rem;
      margin: 0 0 0 5.5rem; } }

#ttl_block .box {
  position: relative; }
  @media screen and (min-width: 769px) {
    #ttl_block .box {
      width: 39rem; } }
  @media screen and (max-width: 768px) {
    #ttl_block .box {
      width: 67rem; } }

#ttl_block .box h2 {
  position: relative;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    #ttl_block .box h2 {
      line-height: 1.353em;
      font-size: 3.4rem;
      letter-spacing: 0.02em;
      padding-bottom: 2.5rem;
      white-space: nowrap; } }
  @media screen and (max-width: 768px) {
    #ttl_block .box h2 {
      line-height: 1.355em;
      font-size: 4.8rem;
      letter-spacing: 0.02em;
      padding: 3rem 0 6rem;
      text-align: center; } }

#ttl_block .box h2 span {
  position: relative;
  display: inline-block;
  z-index: 3; }

#ttl_block .box h2 span::before {
  display: block;
  content: "";
  position: absolute;
  background: #f6ef7d;
  z-index: -1; }
  @media screen and (min-width: 769px) {
    #ttl_block .box h2 span::before {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1.6rem; } }
  @media screen and (max-width: 768px) {
    #ttl_block .box h2 span::before {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1.6rem; } }

#material_block dl,
#ttl_block dl {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between; }
  @media screen and (min-width: 769px) {
    #material_block dl,
    #ttl_block dl {
      padding: 1.2rem 0; } }
  @media screen and (max-width: 768px) {
    #material_block dl,
    #ttl_block dl {
      padding: 2rem 0; } }

#material_block dl::before,
#ttl_block dl::before {
  display: block;
  content: "";
  position: absolute; }
  @media screen and (min-width: 769px) {
    #material_block dl::before,
    #ttl_block dl::before {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0.5rem;
      background: url("../img/recipe/line.png") left center repeat-x;
      background-size: 1000px auto; } }
  @media screen and (max-width: 768px) {
    #material_block dl::before,
    #ttl_block dl::before {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0.8rem;
      background: url("../img/recipe/line.png") 0 0 no-repeat;
      background-size: 1000px auto; } }

#material_block dl.box--group {
  flex-wrap: wrap;
}
#material_block dl.box--group div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0 2em;
  align-items: center;
}
#material_block dl.box--group dd {
  flex-shrink: 0;
}

#material_block dl:nth-of-type(1)::after,
#ttl_block dl:nth-of-type(1)::after {
  display: block;
  content: "";
  position: absolute; }
  @media screen and (min-width: 769px) {
    #material_block dl:nth-of-type(1)::after,
    #ttl_block dl:nth-of-type(1)::after {
      top: 0;
      left: 0;
      width: 100%;
      height: 0.5rem;
      background: url("../img/recipe/line.png") left center repeat-x;
      background-size: 1000px auto; } }
  @media screen and (max-width: 768px) {
    #material_block dl:nth-of-type(1)::after,
    #ttl_block dl:nth-of-type(1)::after {
      top: 0;
      left: 0;
      width: 100%;
      height: 0.8rem;
      background: url("../img/recipe/line.png") 0 0 no-repeat;
      background-size: 1000px auto; } }

#material_block dt,
#ttl_block dt,
#material_block dd,
#ttl_block dd {
  position: relative;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    #material_block dt,
    #ttl_block dt,
    #material_block dd,
    #ttl_block dd {
      line-height: 1.522em;
      font-size: 2.3rem;
      letter-spacing: 0.02em; } }
  @media screen and (max-width: 768px) {
    #material_block dt,
    #ttl_block dt,
    #material_block dd,
    #ttl_block dd {
      line-height: 1.5em;
      font-size: 3rem;
      letter-spacing: 0.02em; } }

#material_block dd,
#ttl_block dd {
  text-align: right; }

#ttl_block .cap {
  position: relative;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    #ttl_block .cap {
      line-height: 2em;
      font-size: 1.6rem;
      letter-spacing: 0.05em;
      text-align: right;
      padding: 0.5rem 0 0; } }
  @media screen and (max-width: 768px) {
    #ttl_block .cap {
      line-height: 2em;
      font-size: 2rem;
      letter-spacing: 0.05em;
      text-align: right;
      padding: 1rem 0 0; } }

#material_block {
  position: relative; }
  @media screen and (min-width: 769px) {
    #material_block {
      width: 100rem;
      padding: 2rem 0 0; } }
  @media screen and (max-width: 768px) {
    #material_block {
      width: 67rem;
      margin: 0 auto;
      padding: 3rem 0 0; } }

#material_block .box {
  position: relative;
  width: 100%; }

#material_block .box .ttl {
  position: relative; }
  @media screen and (min-width: 769px) {
    #material_block .box .ttl {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 0 1.2rem 0; } }
  @media screen and (max-width: 768px) {
    #material_block .box .ttl {
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      padding: 0 0 2rem 0; } }

#material_block .box .ttl h3 {
  position: relative; }
  @media screen and (min-width: 769px) {
    #material_block .box .ttl h3 {
      width: 9.9rem;
      margin-right: 0.5rem; } }
  @media screen and (max-width: 768px) {
    #material_block .box .ttl h3 {
      width: 12rem;
      margin-right: 2rem; } }

#material_block .box .ttl span {
  position: relative;
  display: inline-block;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    #material_block .box .ttl span {
      line-height: 1em;
      font-size: 2.2rem;
      letter-spacing: 0.05em;
      transform: translateY(0.3rem); } }
  @media screen and (max-width: 768px) {
    #material_block .box .ttl span {
      line-height: 2em;
      font-size: 2rem;
      letter-spacing: 0.05em;
      text-align: right;
      padding: 1rem 0 0; } }

#material_block .box .cap {
  position: relative;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    #material_block .box .cap {
      line-height: 2em;
      font-size: 1.6rem;
      letter-spacing: 0.05em;
      padding: 0.5rem 0 0; } }
  @media screen and (max-width: 768px) {
    #material_block .box .cap {
      line-height: 2em;
      font-size: 2rem;
      letter-spacing: 0.05em;
      padding: 1rem 0 0; } }

#material_block.half {
  position: relative; }
  @media screen and (min-width: 769px) {
    #material_block.half {
      display: flex;
      align-items: flex-start;
      justify-content: space-between; } }

#material_block.half .box {
  position: relative; }
  @media screen and (min-width: 769px) {
    #material_block.half .box {
      width: 54rem; } }

#material_block.half figure {
  position: relative; }
  @media screen and (min-width: 769px) {
    #material_block.half figure {
      width: 41rem; } }
  @media screen and (max-width: 768px) {
    #material_block.half figure {
      width: 67rem;
      margin: 0 auto;
      padding: 3rem 0 0; } }

#material_block.quarter {
  position: relative; }
  @media screen and (min-width: 769px) {
    #material_block.quarter {
      display: flex;
      align-items: flex-start;
      justify-content: space-between; } }

#material_block.quarter .box {
  position: relative; }
  @media screen and (min-width: 769px) {
    #material_block.quarter .box {
      width: 73.8rem; } }

#material_block.quarter figure {
  position: relative; }
  @media screen and (min-width: 769px) {
    #material_block.quarter figure {
      width: 21rem; } }
  @media screen and (max-width: 768px) {
    #material_block.quarter figure {
      display: none; } }

@media screen and (min-width: 769px) {
  #material_block > figure {
    margin-top: 1rem; } }
@media screen and (max-width: 768px) {
  #material_block > figure {
    margin-top: 2rem; } }

#quarter_sp {
  position: relative; }
  @media screen and (min-width: 769px) {
    #quarter_sp {
      display: none; } }
  @media screen and (max-width: 768px) {
    #quarter_sp {
      width: 29rem;
      margin: 6rem auto 4rem; } }

#howto_block {
  position: relative; }
  @media screen and (min-width: 769px) {
    #howto_block {
      width: 100rem;
      padding: 7rem 0 0; } }
  @media screen and (max-width: 768px) {
    #howto_block {
      width: 67rem;
      margin: 0 auto;
      padding: 6rem 0 0; } }

#howto_block .box {
  position: relative;
  width: 100%; }

#howto_block .box .ttl {
  position: relative; }
  @media screen and (min-width: 769px) {
    #howto_block .box .ttl {
      display: flex;
      align-items: center;
      justify-content: flex-start; } }
  @media screen and (max-width: 768px) {
    #howto_block .box .ttl {
      display: flex;
      align-items: flex-end;
      justify-content: flex-start; } }

#howto_block .box .ttl h3 {
  position: relative; }
  @media screen and (min-width: 769px) {
    #howto_block .box .ttl h3 {
      width: 12.8rem; } }
  @media screen and (max-width: 768px) {
    #howto_block .box .ttl h3 {
      width: 15.2rem; } }

#howto_block .box .ttl::after {
  display: block;
  content: "";
  position: absolute;
  overflow: hidden; }
  @media screen and (min-width: 769px) {
    #howto_block .box .ttl::after {
      top: 50%;
      right: 0;
      width: 86rem;
      height: 0.5rem;
      background: url("../img/recipe/line.png") left center repeat-x;
      background-size: 1000px auto;
      transform: translateY(-0.3rem); } }
  @media screen and (max-width: 768px) {
    #howto_block .box .ttl::after {
      top: 0;
      right: 0;
      width: 50rem;
      height: 100%;
      background: url("../img/recipe/line.png") 0 center no-repeat;
      background-size: 1000px auto; } }

#howto_block li {
  position: relative;
  width: 100%; }
  @media screen and (min-width: 769px) {
    #howto_block li {
      padding: 4rem 0 4.5rem 8rem;
      background: url("../img/recipe/line.png") left bottom repeat-x;
      background-size: 1000px auto; } }
  @media screen and (max-width: 768px) {
    #howto_block li {
      padding: 3rem 0 3rem 8rem;
      background: url("../img/recipe/line.png") left bottom no-repeat;
      background-size: 1000px auto; } }

#howto_block li:nth-of-type(1) {
  position: relative;
  width: 100%; }
  @media screen and (min-width: 769px) {
    #howto_block li:nth-of-type(1) {
      padding: 3rem 0 4.5rem 8rem; } }
  @media screen and (max-width: 768px) {
    #howto_block li:nth-of-type(1) {
      padding: 2rem 0 3rem 8rem; } }

#howto_block li::before {
  display: block;
  content: "";
  position: absolute; }
  @media screen and (min-width: 769px) {
    #howto_block li::before {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0.5rem; } }
  @media screen and (max-width: 768px) {
    #howto_block li::before {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0.8rem; } }

#howto_block li p.txt {
  position: relative;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    #howto_block li p.txt {
      line-height: 1.385em;
      font-size: 2.6rem;
      letter-spacing: 0.05em; } }
  @media screen and (max-width: 768px) {
    #howto_block li p.txt {
      line-height: 1.5em;
      font-size: 3rem;
      letter-spacing: 0.02em; } }

#howto_block li p.num {
  position: absolute;
  background: url("../img/recipe/number_bg.svg") 0 0 no-repeat;
  background-size: contain;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    #howto_block li p.num {
      top: 50%;
      transform: translateY(-50%);
      left: 0rem;
      width: 6rem;
      height: 4.8rem;
      padding-left: 0.6rem;
      line-height: 1em;
      font-size: 2.6rem;
      letter-spacing: 0.05em;
      margin-top: -0.4rem; } }
  @media screen and (max-width: 768px) {
    #howto_block li p.num {
      top: 50%;
      transform: translateY(-50%);
      left: 0rem;
      width: 6rem;
      height: 4.8rem;
      line-height: 1em;
      font-size: 2.6rem;
      padding-left: 0.6rem;
      padding-top: 0.6rem;
      letter-spacing: 0.05em;
      margin-top: -0.8rem; } }

#howto_block li .txt span {
  position: relative;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    #howto_block li .txt span {
      line-height: 1.637em;
      font-size: 2.2rem;
      letter-spacing: 0.05em; } }
  @media screen and (max-width: 768px) {
    #howto_block li .txt span {
      line-height: 1.44em;
      font-size: 2.5rem;
      letter-spacing: 0.05em; } }

#category {
  position: relative;
  display: block;
  z-index: 1000;
  width: 100%;
  background: #43ae37;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media screen and (min-width: 769px) {
    #category {
      height: 6.6rem; } }
  @media screen and (max-width: 768px) {
    #category {
      height: 8rem; } }

#category p {
  position: relative;
  color: #fff;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    #category p {
      line-height: 1em;
      font-size: 2.6rem;
      letter-spacing: 0.05em; } }
  @media screen and (max-width: 768px) {
    #category p {
      line-height: 1em;
      font-size: 3.2rem;
      letter-spacing: 0.05em; } }