@charset "UTF-8";
body {
  font-size: 2.8vw;
}

.pc {
  display: none;
}

header {
  width: 90%;
  padding: 3% 0;
  margin: 0 auto;
  overflow: hidden;
}
header h1 {
  width: 15%;
  float: left;
}
header h1 a:hover {
  opacity: 0.7;
}
header ul {
  display: flex;
  justify-content: flex-end;
  font-size: 3vw;
  padding-top: 3%;
}
header ul li {
  position: relative;
  padding: 0 2%;
}
header ul li::before {
  content: "";
  display: block;
  width: 1px;
  height: 3.4vw;
  background: #333;
  position: absolute;
  top: 18%;
  right: 0;
}
header ul li:last-child::before {
  width: 0;
}
header ul li:last-child {
  padding: 0 0 0 2%;
}

footer {
  background: #dcdddd;
  padding: 4% 0;
  text-align: center;
  font-size: 2.6vw;
  letter-spacing: 0;
}

.onlineShop {
  position: fixed;
  right: 3%;
  bottom: 4%;
  width: 25%;
}

#index {
  overflow: hidden;
}
#index #mainVisual {
  background: url("../images/index/mv_bg_sp.webp") no-repeat center top;
  background-size: cover;
}
#index #mainVisual dl {
  padding: 12% 0 10% 0;
}
#index #mainVisual dl dt {
  width: 80%;
  margin: 0 auto 4% auto;
}
#index #mainVisual dl dt img {
  box-shadow: 0px 0px 3px 3px #fff;
}
#index #mainVisual dl dd {
  width: 55%;
  margin: 0 auto 0 auto;
}
#index h2 {
  background: #8fc31f;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 6.6vw;
  padding: 2% 0 3% 0;
  width: 88%;
  margin: 0 auto 3% auto;
  border-radius: 100px;
  line-height: 1;
}
#index #topArea {
  text-align: center;
  padding: 5% 0 5% 0;
}
#index #topArea .warp {
  width: 60%;
  margin: 0 auto;
}
#index #kodawari {
  margin-bottom: 15%;
  /* アニメーション発火後の状態 */
  /* 遅延ごとのクラス */
}
#index #kodawari .warp {
  width: 88%;
  margin: 0 auto;
}
#index #kodawari dl {
  text-align: center;
  margin-bottom: 5%;
}
#index #kodawari dl dt {
  color: #f18d00;
  font-weight: 600;
  font-size: 3.6vw;
  margin-bottom: 3%;
}
#index #kodawari .phtArea .pht {
  width: 40%;
  margin: 0 auto 4% auto;
}
#index #kodawari .phtArea ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#index #kodawari .phtArea ul li:nth-child(1) {
  width: 44%;
  margin-bottom: 4%;
}
#index #kodawari .phtArea ul li:nth-child(2) {
  width: 53%;
  margin-bottom: 4%;
}
#index #kodawari .phtArea ul li:nth-child(3) {
  width: 44%;
}
#index #kodawari .phtArea ul li:nth-child(4) {
  width: 53%;
}
@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}
#index #kodawari .scroll-animated-image {
  width: 100%;
  opacity: 0;
  transform: scale(1.2) translateY(30px) rotate(5deg);
  transition: transform 1s ease, opacity 1s ease;
}
#index #kodawari .scroll-animated-image.visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  animation: floatUpDown 1s ease-in-out 1 forwards;
}
#index #kodawari .delay-0.visible {
  transition-delay: 0s;
  animation-delay: 1.2s;
}
#index #kodawari .delay-1 {
  transform: scale(1.2) translateY(30px) rotate(-5deg);
}
#index #kodawari .delay-1.visible {
  transition-delay: 0.3s;
  animation-delay: 1.5s;
}
#index #kodawari .delay-2.visible {
  transition-delay: 0.6s;
  animation-delay: 1.8s;
}
#index #kodawari .delay-3 {
  transform: scale(1.2) translateY(30px) rotate(-5deg);
}
#index #kodawari .delay-3.visible {
  transition-delay: 0.9s;
  animation-delay: 2.1s;
}
#index #allergy {
  margin-bottom: 15%;
}
#index #allergy .warp {
  width: 80%;
  margin: 0 auto;
}
#index #allergy h2 {
  margin-bottom: 10%;
}
#index #allergy .pht {
  width: 90%;
  margin: 0 auto 5% auto;
}
#index #allergy .read dl {
  background: #f7f8f8;
  padding: 6%;
  margin-bottom: 5%;
}
#index #allergy .read dl dt {
  color: #f39800;
  font-size: 3.6vw;
}
#index #allergy .read dl dd {
  margin-bottom: 5%;
}
#index #allergy .read p {
  font-size: 3.6vw;
}
#index #allergy .read p a {
  color: #f39800;
  text-decoration: underline;
  font-weight: 600;
}
#index #allergy .read p a:hover {
  text-decoration: none;
}
#index #detail {
  margin-bottom: 15%;
}
#index #detail h2 {
  margin-bottom: 5%;
}
#index #detail .warp {
  width: 100%;
  margin: 0 auto;
}
#index #detail dl {
  display: table;
  border-top: 1px solid #c9caca;
  width: 100%;
  padding: 2% 0;
}
#index #detail dl dt {
  display: table-cell;
  width: 20%;
  text-align: center;
  color: #f39800;
  vertical-align: middle;
}
#index #detail dl dd {
  display: table-cell;
  width: 78%;
  padding-right: 2%;
}
#index #detail dl dd span {
  color: #f39800;
  font-weight: 600;
}
#index #detail dl:nth-child(1) {
  background: #f7f8f8;
}
#index #detail dl:nth-child(2) {
  background: #fff;
}
#index #detail dl:nth-child(3) {
  background: #f7f8f8;
}
#index #detail dl:nth-child(4) {
  background: #fff;
  border-bottom: 1px solid #c9caca;
}
#index #use h2 {
  margin-bottom: 0%;
}
#index #use h3 {
  color: #fff;
  text-align: center;
  font-size: 4vw;
  font-weight: 600;
  letter-spacing: 0;
  width: 80%;
  margin: 0 auto 5% auto;
  padding: 2% 0;
}
#index #use p {
  width: 22%;
  position: absolute;
  right: 0;
  top: 0;
}
#index #use ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 5%;
}
#index #use ul li {
  width: 32%;
  margin-bottom: 2%;
}
#index #use .linkBtn a {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 4.8vw;
  font-weight: 600;
  border-radius: 100px;
  padding: 1% 0 1.5% 0;
  width: 50%;
  margin: 0 auto;
}
#index #use .recipe1 {
  background: linear-gradient(to top, #fff5d7 79%, #fff 79%, #fff 100%);
  position: relative;
  padding: 18% 2% 7% 2%;
}
#index #use .recipe1 h3 {
  background: #f18d00;
}
#index #use .recipe1 p {
  width: 24%;
  position: absolute;
  right: 3%;
  top: 5%;
}
#index #use .recipe1 .linkBtn a {
  background: #f18d00;
}
#index #use .recipe2 {
  background: linear-gradient(to top, #d9eeed 79%, #fff 79%, #fff 100%);
  position: relative;
  padding: 18% 2% 7% 2%;
}
#index #use .recipe2 h3 {
  background: #2bb7b3;
}
#index #use .recipe2 p {
  width: 26%;
  position: absolute;
  right: 3%;
  top: 1%;
}
#index #use .recipe2 .linkBtn a {
  background: #2bb7b3;
}
#index #use .recipe3 {
  background: linear-gradient(to top, #fbe6ef 79%, #fff 79%, #fff 100%);
  position: relative;
  padding: 18% 2% 7% 2%;
}
#index #use .recipe3 h3 {
  background: #ea609e;
}
#index #use .recipe3 p {
  width: 22%;
  position: absolute;
  right: 10%;
  top: -2%;
}
#index #use .recipe3 .linkBtn a {
  background: #ea609e;
}
#index #lastArea {
  padding: 10% 0 25% 0;
}
#index #lastArea .warp {
  width: 90%;
  margin: 0 auto 10% auto;
}
#index #lastArea .linkBtn {
  width: 90%;
  margin: 0 auto;
}
#index #lastArea .linkBtn a {
  display: block;
  background: #c9caca;
  color: #fff;
  text-align: center;
  padding: 2% 0;
  font-size: 4.8vw;
  font-weight: 600;
  border-radius: 100px;
}

/*recipe*/
#recipe {
  padding: 5% 0;
  position: relative;
  background-size: 5%;
}
#recipe h2 {
  color: #fff;
  font-size: 5vw;
  font-weight: 600;
  text-align: center;
  padding: 1% 0 2% 0;
  margin-bottom: 7%;
}
#recipe .icn {
  width: 32%;
  position: absolute;
  right: 5%;
  top: 2%;
  z-index: 2;
}
#recipe .icn2 {
  width: 32%;
  position: absolute;
  right: 5%;
  top: 3%;
  z-index: 2;
}
#recipe .icn3 {
  width: 28%;
  position: absolute;
  right: 5%;
  top: 7%;
  z-index: 2;
}
#recipe h3 {
  font-size: 5vw;
  font-weight: 600;
  width: 90%;
  margin: 0 auto;
  position: relative;
  padding: 6% 0 1% 20%;
}
#recipe h3 i {
  display: block;
  width: 20%;
  position: absolute;
  left: 0;
  top: 0;
}
#recipe h3 i img {
  width: 100%;
}
#recipe .icn1 {
  background: url("../images/common/icn4.webp") no-repeat left top;
}
#recipe #head {
  padding: 2% 0;
  width: 100%;
  margin: 0 auto 4% auto;
}
#recipe #head dl {
  margin: 0 auto;
  width: 90%;
}
#recipe #head dl dt {
  font-size: 5vw;
  text-decoration: underline;
  font-weight: 600;
  margin-bottom: 4%;
}
#recipe #head dl dd {
  font-size: 3.2vw;
}
#recipe #head dl dd p {
  margin-bottom: 4%;
}
#recipe #head2 {
  padding: 2% 0;
  width: 100%;
  margin: 0 auto 4% auto;
}
#recipe #head2 dl {
  margin: 0 auto;
  width: 90%;
}
#recipe #head2 dl dt {
  font-size: 5vw;
  text-decoration: underline;
  font-weight: 600;
  margin-bottom: 4%;
}
#recipe #head2 dl dd {
  font-size: 3.2vw;
}
#recipe #head2 dl dd p {
  margin-bottom: 4%;
}
#recipe .warp {
  padding: 2% 0;
  margin-bottom: 5%;
}
#recipe .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 96%;
  margin: 0 auto;
}
#recipe .list li {
  width: 32%;
  margin-bottom: 1.5%;
  margin-right: 1.5%;
}
#recipe .list li:nth-child(3n) {
  margin-right: 0;
}
#recipe #recipe1 h2 {
  background: #f18d00;
}
#recipe #recipe1 .warp {
  background: #fff5d7;
}
#recipe #recipe2 h2 {
  background: #2bb7b3;
}
#recipe #recipe2 .warp {
  background: #d9eeed;
}
#recipe #recipe3 h2 {
  background: #ea609e;
}
#recipe #recipe3 h3 {
  width: 90%;
  margin-left: 5%;
  margin-bottom: 2%;
  position: relative;
  padding: 3% 0 0.5% 0%;
  border-bottom: 1px solid #333;
}
#recipe #recipe3 h3 img {
  width: 90%;
}
#recipe #recipe3 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 90%;
  margin: 0 auto 1% auto;
}
#recipe #recipe3 ul li {
  width: 32%;
  margin-bottom: 1.5%;
  margin-right: 1.5%;
}
#recipe #recipe3 ul li:nth-child(3n) {
  margin-right: 0;
}
#recipe #recipe3 #read {
  width: 84%;
  margin: 0 auto;
}
#recipe #recipe3 #read dl {
  margin-bottom: 7%;
}
#recipe #recipe3 #read dl dt {
  width: 40%;
  margin-bottom: 2%;
}
#recipe #recipe3 #read dl dd {
  padding: 3% 4%;
  border-radius: 10px;
  font-size: 3.4vw;
}
#recipe #recipe3 #read dl:nth-child(1) dd {
  background: #fadce9;
}
#recipe #recipe3 #read dl:nth-child(2) dd {
  background: #edf1b0;
}
#recipe #recipe3 #read dl:nth-child(3) dd {
  background: #d3edfb;
}
#recipe #recipe3 .detail {
  width: 90%;
  margin: 0 auto;
  padding: 10% 0 5% 0;
}
#recipe #recipe3 .detail dl dt {
  font-size: 4.8vw;
  margin-bottom: 1%;
}
#recipe #recipe3 .detail dl dd .pht {
  width: 100%;
  margin: 0 auto 2% auto;
}
#recipe #recipe3 .detail dl dd p {
  margin-bottom: 2%;
  font-size: 3.2vw;
}
#recipe #recipe3 .detail dl dd span {
  color: #f8b62d;
}
#recipe .linkBtn {
  font-size: 4vw;
  text-align: center;
  padding: 5% 0;
}

/*recipe*/
/*recommended*/
#recommended {
  padding: 5% 0;
  position: relative;
  background: #fff7d8;
}
#recommended .warp {
  width: 96%;
  margin: 0 auto 5% auto;
  padding: 10% 6% 6% 6%;
  background-image: url("../images/recommended/ttl.webp"), url("../images/recommended/bottom.webp"), url("../images/recommended/bg.webp");
  background-size: 100%, 100%, 100%;
  background-position: center top, center bottom, center; /* 1番目の画像は中央に、2番目は左上に、3番目は右下に */
  background-repeat: no-repeat, no-repeat, repeat-y; /* 1番目は繰り返しなし、2番目は繰り返す、3番目は繰り返す */
}
#recommended #head {
  background: url("../images/recommended/top_bg_sp.webp") no-repeat center top;
  background-size: 100%;
  padding: 15% 0 10% 0;
  margin-bottom: 5%;
}
#recommended #head dl dt {
  background: #f18d00;
  border-radius: 100px;
  color: #fff;
  font-weight: 700;
  font-size: 3.4vw;
  width: 40%;
  text-align: center;
  padding: 0.5% 0;
  margin-left: 5%;
}
#recommended #head dl dd {
  text-align: center;
}
#recommended #head dl dd h2 {
  font-size: 5vw;
  color: #f18d00;
  font-weight: 700;
  padding: 1% 0;
}
#recommended #head dl dd p {
  font-size: 3.2vw;
}
#recommended #q1 {
  margin: 0 3% 10% 3%;
}
#recommended #q1 .qa {
  background: linear-gradient(to bottom, #fff 0%, #fff 20%, #fff7d8 20%, #fff7d8 100%);
}
#recommended #q1 .an {
  border: 1px solid #f18d00;
  box-shadow: 5px 5px 0 0 #fff7d8;
  color: #f18d00;
}
#recommended #q2 {
  margin: 0 3% 10% 3%;
}
#recommended #q2 .qa {
  background: linear-gradient(to bottom, #fff 0%, #fff 20%, #e8f2d9 20%, #e8f2d9 100%);
}
#recommended #q2 .an {
  border: 1px solid #8dc661;
  box-shadow: 5px 5px 0 0 #e8f2d9;
  color: #22ac38;
}
#recommended #q3 {
  margin: 0 3% 10% 3%;
}
#recommended #q3 .qa {
  background: linear-gradient(to bottom, #fff 0%, #fff 20%, #d3edfb 20%, #d3edfb 100%);
}
#recommended #q3 .an {
  border: 1px solid #54c3f1;
  box-shadow: 5px 5px 0 0 #d3edfb;
  color: #00a0e9;
}
#recommended .qa {
  width: 55%;
  margin-bottom: 3%;
}
#recommended .qa h3 {
  width: 50%;
}
#recommended .qa p {
  font-size: 3vw;
  padding: 8% 0%;
  text-align: center;
}
#recommended .qa p span {
  font-weight: 700;
  color: #e60012;
}
#recommended .an {
  position: relative;
  width: 55%;
  padding: 2% 0;
  text-align: center;
  font-size: 4.6vw;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 5%;
}
#recommended .an img {
  position: absolute;
  width: 5vw;
  left: 7%;
  top: -30%;
}
#recommended .pht1 {
  width: 43%;
  position: absolute;
  right: 0;
  top: 15%;
}
#recommended .coments {
  background: #efefef;
  border-radius: 8px;
  padding: 5%;
  font-size: 3.2vw;
  width: 80%;
}
#recommended .coments ol li {
  list-style: disc;
  margin-left: 20px;
}
#recommended .pht2 {
  width: 25%;
  position: absolute;
  right: 0%;
  bottom: 0;
}
#recommended #questionnaire {
  display: flex;
  justify-content: space-between;
  width: 96%;
  margin: 0 auto;
}
#recommended #questionnaire .pht3 {
  width: 22%;
}
#recommended #questionnaire dl {
  width: 76%;
}
#recommended #questionnaire dl dt {
  background: #898989;
  text-align: center;
  color: #fff;
  padding: 1% 0;
  font-size: 3.2vw;
  font-weight: 500;
  margin-bottom: 2%;
}
#recommended #questionnaire dl dd table {
  font-size: 2.8vw;
}
#recommended #questionnaire dl dd table th {
  font-weight: normal;
  white-space: nowrap;
  padding-right: 3%;
  padding-bottom: 1%;
}
#recommended #questionnaire dl dd table td {
  padding-bottom: 1%;
}
#recommended .linkBtn {
  font-size: 4vw;
  text-align: center;
  padding: 5% 0;
}

/*recommended*/
.detailBtn a {
  font-size: 4vw;
  font-weight: 700;
  display: block;
  padding: 10px 6.5vw;
  margin: 35px auto 20px;
  border-radius: 40px;
  width: -moz-fit-content;
  width: fit-content;
  background: #f39800;
  text-decoration: none;
  color: #fff;
}/*# sourceMappingURL=sp_style.css.map */