@charset "UTF-8";
/* CSS Document */

body {
  font-family: '游ゴシック体', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif !important;
  font-feature-settings: "palt";
}

a {
  text-decoration: none !important;
}

p {
  line-height: 1.7;
  margin-bottom: 32px !important;
}

.section-note,
.section-promotion,
.section-arranged,
.section-recipe,
.section-theme {
  margin-bottom: 4rem;
}


/* Section Theme */
.theme-bg {
  background-color: #f5f1df;
  padding: 3rem 3rem 1rem 3rem;
}
.section-theme .header-theme {
  text-align: center;
  margin: 0 auto 3.2rem auto;
  width: 75%;
}
@media (max-width: 575px) {
  .section-theme .header-theme {
    width: 100%;
  }
}

.section-theme h1 {
  font-size: 42px;
  margin-bottom: 2rem;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  text-align: center;
  color: #a06030;
  font-weight: 600;
}

/* Section Recipe */
.section-recipe .header-recipe {
  text-align: center;
  margin: 0 auto 2rem;
  width: 75%;
}
@media (max-width: 767px) {
  .section-recipe .header-recipe {
    width: 100%;
  }
}
/*.recipe-item {
  padding: 3rem 3rem 1rem 3rem;
}*/
@media (max-width: 575px) {
  .recipe-item {
    margin-bottom: 1.5rem;
  }
}

.recipe-item-cooking {
  padding: 3rem 2rem 1rem;
}
@media (max-width: 575px) {
  .recipe-item-cooking {
    padding: 1rem 2rem 1rem;
  }
}

.recipe-item-cooking h1 {
  color: #f4626c;
}
.recipe-item-cooking ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}
.recipe-item-cooking li {
  line-height: 2;
  padding-left: 27px;
  position: relative;
}
@media (max-width: 575px) {
  .recipe-item-cooking li {
    line-height: 1.7;
  }
}

.recipe-item-cooking li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #f4626c;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  width: 22px;
  color: #ffffff;
  font-size: 85%;
  line-height: 1;
  position: absolute;
  top: 5px;
  left: 0;
}
.recipe-item-cooking li span {
  color: #f4626c;
}


/* Section Arranged recipe */
.section-arranged {
  margin-top: 5rem;
}


/* Section Genmai */
.section-genmai {
  background-color: #feefe5;
  padding: 4rem 3rem 3rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
@media (max-width: 428px) {
  .section-genmai {
    padding: 3rem 2rem 2rem;
  }
}

@media (min-width: 768px) {
  .section-genmai .col-md-15 {
    width: 20% !important;
    flex: 0 0 20%;
  }
}

/* Section Note */
.section-note ol {
  counter-reset: listnum;
  list-style: none;
  padding: 0;
  margin: 0;
}
.section-note li {
  line-height: 1.7;
  font-size: .8125em;
  padding-left: 27px;
  position: relative;
}
.section-note li:before {
  counter-increment: listnum;
  content: "※" counter(listnum) "：";
  line-height: 1;
  position: absolute;
  top: 5px;
  left: 0;
}


/* Section Promotion */
.section-promotion {
  background-color: #FBC70D;
  padding: 4rem 3rem 3rem;
  border-radius: 0.5rem;
}
.section-promotion .heading {
    color: #333;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
  margin-bottom: 3rem;
}
.section-promotion .heading:before {
    display: block;
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.5;
    letter-spacing: .02em;
    content: attr(data-label);
  margin-bottom: 1rem;
  color: #fff;
}
.section-promotion .promo-special {
    background: #e8380d;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto 1.5rem;
    max-width: 300px;
    padding: 10px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.section-promotion span {
  font-size: 3rem;
  font-weight: 600;
  color: #e8380d;
}
@media (max-width: 768px) {
  .section-promotion span {
    font-size: 2.2rem;
  }
}
.section-promotion .qr-code {
  max-width: 25%;
  margin: auto;
}
@media (max-width: 575px) {
  .section-promotion .qr-code {
    max-width: 35%;
  }
}


/* Common */
.w-55 {
  width: 55%;
}
@media (max-width: 575px) {
  .w-55 {
    width: 100%;
  }
}

.small-s {
  font-size: .8125em;
}

.ButtonLink a {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 350px;
    margin: 0 auto;
    padding: 1em 2em;
    border: none;
    border-radius: 5px;
    background-color: #FCC80E;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    transition: 0.3s ease-in-out;
    border-radius: 50px;
}
.ButtonLink  a:hover {
    background-color: rgba(252, 200, 14, 0.7);
}
.ButtonLink.video a:after {
   width: 24px;
   height: 24px;
   margin-left: 10px;
   content: '';
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;"><path d="M4 8H2v12a2 2 0 0 0 2 2h12v-2H4z"></path><path d="M20 2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-9 12V6l7 4z"></path></svg>');
   background-repeat: no-repeat;
   background-position: center;
}
.ButtonLink.detail a:after {
   width: 24px;
   height: 24px;
   margin-left: 10px;
   content: '';
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;"><path d="m13 3 3.293 3.293-7 7 1.414 1.414 7-7L21 11V3z"></path><path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z"></path></svg>');
   background-repeat: no-repeat;
   background-position: center;
}