@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: 3.0vw;
    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 1.0s ease, opacity 1.0s 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: 4.0vw;
    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: 5.0vw;
    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: 5.0vw;
    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: 5.0vw;
        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: 5.0vw;
        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: 4.0vw;
    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: 5.0vw;
        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: 3.0vw;
      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: 4.0vw;
    text-align: center;
    padding: 5% 0; }

/*recommended*/