@import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500&display=swap");
html {
  font-size: calc(10vw / 3.9);
  -webkit-font-smoothing: antialiased; }

body {
  color: #000000;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  background-color: #ffffff;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

body.lock,
body.loading {
  overflow: hidden;
  width: 100vw;
  height: 100vh; }

@media screen and (min-width: 768px) {
  html {
    font-size: 8px; }

  body {
    font-size: 1.6rem;
    line-height: 1; } }
@media screen and (min-width: 1000px) {
  html {
    font-size: 10px; } }
* {
  -webkit-tap-highlight-color: transparent; }

a {
  color: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

p, dt, dd, li {
  word-break: break-word;
  word-wrap: normal; }

img {
  max-width: 100%;
  vertical-align: top; }

figure img {
  width: 100%;
  height: auto; }

picture {
  display: block; }
  picture img {
    width: 100%;
    height: auto; }

.cf:after {
  content: "";
  display: block;
  clear: both; }

.fleft {
  float: left; }

.fright {
  float: right; }

.ib {
  display: inline-block;
  line-height: inherit;
  font-weight: inherit; }

.en {
  font-family: 'Roboto', sans-serif; }

.txtBold {
  font-weight: 700; }

.marker {
  background: linear-gradient(transparent 60%, #00A7EB 60%); }

.accordionTrigger {
  cursor: pointer;
  display: block; }

.accordionContent {
  display: none; }

.thumbnail {
  display: none; }
  .thumbnail.slick-initialized {
    display: block; }

.slide,
.comicSlide {
  display: none; }
  .slide .item,
  .comicSlide .item {
    opacity: 0;
    position: absolute;
    top: 0; }
    .slide .item:first-child,
    .comicSlide .item:first-child {
      opacity: 1;
      position: relative; }
  .slide.slick-initialized,
  .comicSlide.slick-initialized {
    display: block; }
    .slide.slick-initialized .item,
    .comicSlide.slick-initialized .item {
      opacity: 1;
      position: relative; }
  .slide .slick-dots,
  .comicSlide .slick-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 15;
    margin: 4.5rem 0 0 0; }
    .slide .slick-dots li,
    .comicSlide .slick-dots li {
      overflow: hidden;
      flex-basis: 12px;
      margin: 0 5px; }
      .slide .slick-dots li button,
      .comicSlide .slick-dots li button {
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-sizing: border-box;
        display: block;
        cursor: pointer;
        width: 100%;
        height: 12px;
        text-indent: -9999em;
        background-color: #E1E1E1;
        border-radius: 50%;
        transition: background-color 0.2s ease-out; }
      .slide .slick-dots li button:hover, .slide .slick-dots li.slick-active button,
      .comicSlide .slick-dots li button:hover,
      .comicSlide .slick-dots li.slick-active button {
        background-color: #6CCBFF; }
  .slide .slick-arrow,
  .comicSlide .slick-arrow {
    cursor: pointer;
    position: absolute;
    top: 100%;
    z-index: 16;
    width: 3rem;
    height: 3rem;
    text-indent: -9999em;
    margin: 3.6rem 0 0 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box; }
    .slide .slick-arrow.slick-prev,
    .comicSlide .slick-arrow.slick-prev {
      left: calc(40 / 390 * 100%);
      background: url(../img/icon_arrow_blue.png) center center no-repeat;
      background-size: contain;
      transform: rotate(180deg); }
    .slide .slick-arrow.slick-next,
    .comicSlide .slick-arrow.slick-next {
      right: calc(40 / 390 * 100%);
      background: url(../img/icon_arrow_blue.png) center center no-repeat;
      background-size: contain; }

.comicSlideArrow .slick-arrow {
  cursor: pointer;
  position: absolute;
  top: calc(100% + 1rem);
  left: 0;
  right: 0;
  z-index: 10;
  width: 3rem;
  height: 3rem;
  text-indent: -9999em;
  margin: auto;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box; }
  .comicSlideArrow .slick-arrow.slick-prev {
    left: 3.5rem;
    background: url(../img/icon_arrow_white2.png) center center no-repeat;
    background-size: contain; }
  .comicSlideArrow .slick-arrow.slick-next {
    right: 3.5rem;
    background: url(../img/icon_arrow_white2.png) center center no-repeat;
    background-size: contain;
    transform: rotate(180deg); }
  .comicSlideArrow .slick-arrow.slick-disabled {
    opacity: 0; }

@media screen and (min-width: 768px) {
  .marker {
    background: linear-gradient(transparent 85%, #00A7EB 85%); }

  .slide .slick-arrow.slick-prev {
    left: calc(180 / 598 * 100%); }
  .slide .slick-arrow.slick-next {
    right: calc(180 / 598 * 100%); }

  /* mover */
  .mover {
    transition: opacity 0.2s ease-out;
    backface-visibility: hidden;
    zoom: 1; }
    .mover:hover {
      opacity: 0.8; }

  .moverContent > * {
    transition: opacity 0.2s ease-out;
    backface-visibility: hidden;
    zoom: 1; }
  .moverContent:hover > * {
    opacity: 0.8; } }
.modePC,
.modePCib {
  display: none; }
  .modePC.important,
  .modePCib.important {
    display: none !important; }

.modeSP {
  display: block; }
  .modeSP.important {
    display: block !important; }

@media screen and (min-width: 768px) {
  .modePC {
    display: block; }
    .modePC.important {
      display: block !important; }

  .modePCib {
    display: inline-block; }
    .modePCib.important {
      display: inline-block !important; }

  .modeSP {
    display: none; }
    .modeSP.important {
      display: none !important; } }
.animate {
  overflow: hidden;
  opacity: 1; }

.animate .animate-text {
  display: block; }

.animated {
  opacity: 1; }

.lazyload {
  opacity: 1; }

@keyframes arrowMove {
  0% {
    transform: translateX(0); }
  99% {
    transform: translateX(50%); }
  100% {
    transform: translateX(0); } }
.l-container {
  overflow: hidden;
  position: relative;
  transition: opacity 0.3s; }
  .load_complete .l-container {
    opacity: 1; }

.contentInner {
  width: 100%;
  margin: auto; }

.fadeContent {
  opacity: 0;
  transition: opacity 1.0s ease-out; }

.fadeContent.current {
  opacity: 1; }

@media screen and (min-width: 768px) {
  .contentInner {
    position: relative;
    width: 100%;
    max-width: 1460px;
    padding: 0 10px;
    box-sizing: border-box; } }
/* bottomArea */
#bottomArea .content {
  overflow: hidden;
  background-color: #B8E2F9;
  padding: calc(39 / 390 * 100%) 0 0 0; }
#bottomArea .logoArea {
  width: calc(130 / 390 * 100%);
  margin: 0 auto calc(27 / 390 * 100%) auto; }
#bottomArea #toTop {
  width: calc(206 / 390 * 100%);
  margin: 0 auto -1px auto; }

@media screen and (min-width: 768px) {
  #bottomArea .content {
    padding: calc(43 / 1440 * 100%) 0 0 0; }
  #bottomArea .logoArea {
    width: 124px;
    margin: 0 auto calc(27 / 1440 * 100%) auto; }
  #bottomArea #toTop {
    width: 225px; } }
#pageNav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9001; }
  #pageNav .buttonWrap {
    position: absolute;
    bottom: 2.1rem;
    right: 2.1rem;
    z-index: 1000; }
  #pageNav .buttonArea {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1000;
    width: 5.4rem;
    height: 5.4rem;
    color: #000000;
    font-size: 0.9rem;
    line-height: 1;
    background-color: #00A7EB;
    padding: 0.6rem 0 0.4rem 0;
    border-radius: 1rem;
    box-sizing: border-box;
    filter: drop-shadow(-1px 5px 2px rgba(0, 0, 0, 0.01)) drop-shadow(-1px 3px 2px rgba(0, 0, 0, 0.05)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.09)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1)); }
    #pageNav .buttonArea .wrap {
      position: relative;
      width: 2rem;
      padding: 1.6rem 0 0 0; }
      #pageNav .buttonArea .wrap span {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background-color: #ffffff;
        margin: auto;
        border-radius: 2px;
        transition: all 0.2s; }
        #pageNav .buttonArea .wrap span:nth-of-type(1) {
          top: 0; }
        #pageNav .buttonArea .wrap span:nth-of-type(2) {
          top: calc(50% - 1px); }
        #pageNav .buttonArea .wrap span:nth-of-type(3) {
          bottom: 0; }
    #pageNav .buttonArea .textMenu {
      flex-basis: 100%; }
    #pageNav .buttonArea .textClose {
      display: none;
      flex-basis: 100%; }
  #pageNav .menu {
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: 0;
    background-color: #B8E2F9;
    -webkit-overflow-scrolling: touch; }
    #pageNav .menu .inner {
      width: calc(313 / 390 * 100%);
      margin: 0 auto;
      padding: calc(90 / 390 * 100%) 0 0 0; }
    #pageNav .menu .list {
      margin: 0 0 calc(18 / 313 * 100%) 0; }
      #pageNav .menu .list .item {
        font-size: 2rem;
        line-height: 1.5;
        font-weight: 700;
        text-align: center;
        border-bottom: 1px solid #57B4DC; }
        #pageNav .menu .list .item.home {
          width: 5.9rem;
          margin: 0 auto calc(2 / 313 * 100%) auto;
          border-bottom: 0; }
        #pageNav .menu .list .item a {
          display: block;
          padding: calc(20 / 313 * 100%) 0; }
    #pageNav .menu .block {
      background-color: #ffffff;
      padding: calc(13 / 313 * 100%) 0;
      border-radius: 2rem; }
      #pageNav .menu .block .title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        line-height: 1.67;
        font-weight: 700;
        text-align: center;
        letter-spacing: -0.03em;
        margin: 0 0 calc(13 / 313 * 100%) 0;
        padding: 0 0.5em 0 0; }
        #pageNav .menu .block .title:before {
          content: "";
          display: inline-block;
          width: 3.4rem;
          height: 3.4rem;
          background: url(../img/icon_recipe.png) center center no-repeat;
          background-size: contain;
          margin: 0 1.1em 0 0; }
      #pageNav .menu .block .banner {
        width: calc(270 / 313 * 100%);
        margin: 0 auto calc(10 / 313 * 100%) auto; }
        #pageNav .menu .block .banner.banner01 .box:after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: calc(45 / 311 * 100%);
          height: 0;
          background: url(../img/icon_time.png) center center no-repeat;
          background-size: contain;
          margin: calc(-10 / 311 * 100%) 0 0 calc(37 / 311 * 100%);
          padding: calc(45 / 311 * 100%) 0 0 0; }
        #pageNav .menu .block .banner.banner02 .box:before {
          background: url(../img/icon_schedule.png) center center no-repeat;
          background-size: contain; }
        #pageNav .menu .block .banner .box {
          position: relative;
          background-color: #0C92CC;
          padding: 0 0 0 calc(67 / 313 * 100%);
          border: 1px solid #949494;
          border-radius: 1.5rem; }
          #pageNav .menu .block .banner .box:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: calc(50 / 311 * 100%);
            height: 0;
            background: url(../img/icon_clock.png) center center no-repeat;
            background-size: contain;
            margin: auto 0 auto calc(10 / 311 * 100%);
            padding: calc(51 / 311 * 100%) 0 0 0; }
          #pageNav .menu .block .banner .box .textWrap {
            display: flex;
            align-items: center;
            font-size: 1.3rem;
            line-height: 1.62;
            font-weight: 700;
            background-color: #ffffff;
            padding: 0.7em 0 0.7em 1em;
            border-radius: 0 1.5rem 1.5rem 0; }
            #pageNav .menu .block .banner .box .textWrap .text {
              flex-basis: 100%; }
              #pageNav .menu .block .banner .box .textWrap .text .small {
                font-size: 1.1rem;
                line-height: 1.91;
                font-weight: 500; }
  #pageNav.open .buttonArea {
    background-color: #ffffff; }
    #pageNav.open .buttonArea .wrap span {
      background-color: #000000; }
      #pageNav.open .buttonArea .wrap span:nth-of-type(1) {
        opacity: 0; }
      #pageNav.open .buttonArea .wrap span:nth-of-type(3) {
        opacity: 0; }
    #pageNav.open .buttonArea .textMenu {
      display: none; }
    #pageNav.open .buttonArea .textClose {
      display: block; }
  #pageNav.open .menu {
    overflow: auto;
    height: 100vh; }

@media screen and (min-width: 768px) {
  #pageNav:before {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(87, 180, 220, 0.8); }
  #pageNav .menu {
    max-width: 740px;
    margin: auto; }
    #pageNav .menu .inner {
      width: calc(600 / 740 * 100%);
      margin: 0 auto;
      padding: calc(50 / 740 * 100%) 0 calc(50 / 740 * 100%) 0; }
    #pageNav .menu .list .item {
      font-size: 2rem;
      line-height: 1.8; }
      #pageNav .menu .list .item.home {
        width: 6.5rem;
        margin: 0 auto calc(20 / 600 * 100%) auto; }
      #pageNav .menu .list .item a {
        padding: calc(20 / 600 * 100%) 0; }
    #pageNav .menu .block {
      padding: calc(20 / 600 * 100%) 0; }
      #pageNav .menu .block .title {
        font-size: 2rem;
        line-height: 1.5;
        letter-spacing: -0.03em;
        margin: 0 0 calc(13 / 600 * 100%) 0;
        padding: 0 0.5em 0 0; }
        #pageNav .menu .block .title:before {
          width: 3.4rem;
          height: 3.4rem;
          margin: 0 1.1em 0 0; }
      #pageNav .menu .block .banner {
        width: calc(350 / 600 * 100%);
        margin: 0 auto calc(10 / 600 * 100%) auto; }
        #pageNav .menu .block .banner.banner01 .box:after {
          width: calc(32 / 250* 100%);
          margin: calc(-7 / 250* 100%) 0 0 calc(44 / 250* 100%);
          padding: calc(32 / 250* 100%) 0 0 0; }
        #pageNav .menu .block .banner .box {
          padding: 0 0 0 calc(100 / 350 * 100%); }
          #pageNav .menu .block .banner .box:before {
            width: calc(40 / 250 * 100%);
            margin: auto 0 auto calc(19 / 250 * 100%);
            padding: calc(40 / 250 * 100%) 0 0 0; }
          #pageNav .menu .block .banner .box .textWrap {
            font-size: 1.6rem;
            line-height: 1.5;
            padding: 0.7em 0 0.7em 1em;
            border-radius: 0 1.5rem 1.5rem 0; }
            #pageNav .menu .block .banner .box .textWrap .text {
              flex-basis: 100%; }
              #pageNav .menu .block .banner .box .textWrap .text .small {
                font-size: 1.3rem;
                line-height: 1.85; }
  #pageNav.open:before {
    top: 0; } }
.buttonType01,
button.buttonType01 {
  display: block;
  width: calc(200 / 390 * 100%);
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  background-color: #00A7EB;
  margin: auto;
  padding: 0.6em 0 0.8em 0;
  border-radius: 1.5em; }
  .buttonType01 .icon,
  button.buttonType01 .icon {
    display: block;
    position: relative; }
    .buttonType01 .icon:after,
    button.buttonType01 .icon:after {
      content: "";
      position: absolute;
      top: 1px;
      bottom: 0;
      right: 0.5em;
      width: 1.2em;
      height: 1.2em;
      background: url(../img/icon_arrow_white.png) center center no-repeat;
      background-size: contain;
      margin: auto;
      transform: rotate(90deg); }

@media screen and (min-width: 768px) {
  .buttonType01 {
    font-size: 1.8rem;
    line-height: 1; } }
/* l-main */
.l-main {
  overflow: hidden;
  background: url(../img/bg_grid.png) left top repeat;
  background-size: 1.9rem 1.7rem;
  background-color: #F0F0F0; }

@media screen and (min-width: 768px) {
  .l-main:before {
    display: none; }
  .l-main:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    padding: calc(260 / 1440 * 100%) 0 0 0; }

  .wrapper {
    position: relative;
    z-index: 3;
    width: 740px;
    margin: auto; }
    .wrapper:before {
      content: "";
      position: absolute;
      top: 0;
      left: -50vw;
      right: -50vw;
      z-index: 1;
      width: 100vw;
      background: url(../img/bg_lower_top.png) center center no-repeat;
      background-size: contain;
      margin: auto;
      padding: calc(457 / 1440 * 100vw) 0 0 0; } }
/* recipeList */
#recipeList .content {
  position: relative;
  padding: 0 0 calc(39 / 390* 100%) 0; }
#recipeList .contentInner {
  position: relative; }
#recipeList .mv {
  position: relative;
  z-index: 1;
  margin: 0 0 calc(29 / 390* 100%) 0; }
  #recipeList .mv figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 2rem;
    line-height: 1.8;
    font-weight: 700;
    background-color: #ffffff;
    margin: 0 0 -0.5em 0;
    padding: 0.6em 0.9em 0 1.1em;
    border-radius: 2em 2em 0 0; }
    #recipeList .mv figcaption .num {
      font-size: 3.6rem;
      line-height: 1; }
#recipeList .headline {
  position: relative;
  z-index: 1;
  width: calc(334 / 390 * 100%);
  font-size: 2.4rem;
  line-height: 1.67;
  font-weight: 700;
  margin: 0 auto calc(23 / 390 * 100%) auto; }
#recipeList .desc {
  position: relative;
  z-index: 1;
  width: calc(334 / 390 * 100%);
  font-size: 1.6rem;
  line-height: 1.75;
  margin: 0 auto calc(24 / 390 * 100%) auto; }
#recipeList .monthNav {
  position: relative;
  width: calc(312 / 390 * 100%);
  font-size: 1.4rem;
  line-height: 1;
  margin: 0 auto calc(20 / 390 * 100%) auto; }
  #recipeList .monthNav:before {
    content: "";
    position: absolute;
    top: -100vh;
    bottom: 0;
    left: -50vw;
    right: -50vw;
    z-index: 0;
    background-color: #ffffff;
    margin: 0 0 calc((3em * 3 + 10px) / 2) 0; }
  #recipeList .monthNav .list {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    border: 4px solid #00A7EB;
    border-bottom: 3px solid #00A7EB;
    border-radius: 1rem; }
    #recipeList .monthNav .list .item {
      flex-basis: 25%;
      font-size: 1.4rem;
      line-height: 1;
      font-weight: 500;
      border-bottom: 1px solid #00A7EB;
      border-left: 1px solid #00A7EB;
      box-sizing: border-box; }
      #recipeList .monthNav .list .item:nth-child(4n+1) {
        border-left: 0; }
      #recipeList .monthNav .list .item.current {
        color: #ffffff; }
        #recipeList .monthNav .list .item.current a {
          background-color: #00A7EB; }
      #recipeList .monthNav .list .item a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        background-color: #ffffff;
        padding: 1em 0; }
#recipeList .bg {
  position: relative; }
  #recipeList .bg:before {
    content: "";
    position: absolute;
    top: -100vh;
    bottom: 0;
    left: -50vw;
    right: -50vw;
    z-index: 0;
    background-color: #ffffff; }
  #recipeList .bg + .recipe {
    padding: calc(24 / 390 * 100%) 0 0 0; }
#recipeList .recipe .list {
  width: calc(322 / 390 * 100%);
  margin: 0 auto; }
  #recipeList .recipe .list .item {
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 2rem;
    margin: 0 0 calc(20 / 322 * 100%) 0; }
    #recipeList .recipe .list .item a {
      display: block; }
    #recipeList .recipe .list .item .name {
      font-size: 1.6rem;
      line-height: 1.5;
      font-weight: 700;
      text-align: center;
      padding: calc(16 / 322 * 100%) 0 calc(20 / 322 * 100%) 0; }
    #recipeList .recipe .list .item .data {
      width: calc(304 / 322 * 100%);
      margin: 0 auto;
      padding: calc(12 / 322 * 100%) 0;
      border-top: 1px dashed #808080;
      border-bottom: 1px dashed #808080; }
      #recipeList .recipe .list .item .data .row {
        display: flex;
        align-items: end;
        margin: 0 0.8rem 0.8rem 0.8rem; }
        #recipeList .recipe .list .item .data .row:last-of-type {
          margin-bottom: 0; }
        #recipeList .recipe .list .item .data .row .head {
          display: flex;
          align-items: end;
          justify-content: center;
          font-size: 1rem;
          line-height: 1.6;
          font-weight: 500;
          margin: 0 0.5em 0 0; }
          #recipeList .recipe .list .item .data .row .head.time:before {
            background: url(../img/icon_time2.png) center center no-repeat;
            background-size: contain;
            margin: 0 0.5em 0 0; }
          #recipeList .recipe .list .item .data .row .head.protein:before {
            background: url(../img/icon_protein.png) center center no-repeat;
            background-size: contain; }
          #recipeList .recipe .list .item .data .row .head:before {
            content: "";
            display: block;
            width: 2em;
            height: 2em;
            margin: 0 0.2em 0 0; }
        #recipeList .recipe .list .item .data .row .cont {
          font-size: 1rem;
          line-height: 1.6;
          font-weight: 500; }
          #recipeList .recipe .list .item .data .row .cont:first-of-type .num {
            margin: 0 2px; }
          #recipeList .recipe .list .item .data .row .cont .num {
            display: inline-block;
            font-size: 1.6rem;
            line-height: 1;
            font-weight: 700; }
    #recipeList .recipe .list .item .textWrap {
      width: calc(270 / 322 * 100%);
      font-size: 1.4rem;
      line-height: 1.79;
      margin: 0 auto;
      padding: calc(13 / 322 * 100%) 0 calc(22 / 322 * 100%); }
#recipeList .noteWrap {
  width: calc(322 / 390 * 100%);
  text-align: center;
  margin: auto;
  padding: calc(20 / 390 * 100%) 0; }
  #recipeList .noteWrap .note {
    font-size: 1.3rem;
    line-height: 1.85; }

@media screen and (min-width: 768px) {
  #recipeList .content {
    padding: 0 0 calc(100 / 740 * 100%) 0; }
  #recipeList .mv {
    margin: 0 0 calc(48 / 740 * 100%) 0; }
    #recipeList .mv figcaption {
      font-size: 4.4rem;
      line-height: 1.84; }
      #recipeList .mv figcaption .num {
        font-size: 8.1rem;
        line-height: 1; }
  #recipeList .headlineWrap {
    text-align: center;
    margin: 0 0 calC(40 / 740* 100%) 0; }
  #recipeList .headline {
    display: inline-block;
    width: auto;
    font-size: 2.6rem;
    line-height: 1.77;
    text-align: left;
    margin: 0; }
  #recipeList .desc {
    width: 100%;
    font-size: 1.8rem;
    line-height: 1.78;
    margin: 0 auto calc(55 / 740 * 100%) auto; }
  #recipeList .monthNav {
    width: calc(660 / 740 * 100%);
    font-size: 2rem;
    line-height: 1;
    margin: 0 auto calc(20 / 740 * 100%) auto; }
    #recipeList .monthNav:before {
      margin: 0 0 calc((2.95em * 2 + 10px) / 2) 0; }
    #recipeList .monthNav .list {
      border-radius: 1.2rem; }
      #recipeList .monthNav .list .item {
        flex-basis: calc(100% / 6);
        font-size: 2rem;
        line-height: 1; }
        #recipeList .monthNav .list .item:nth-child(4n+1) {
          border-left: 1px solid #00A7EB; }
        #recipeList .monthNav .list .item:nth-child(6n+1) {
          border-left: 0; }
        #recipeList .monthNav .list .item a {
          padding: 0.95em 0; }
  #recipeList .bg + .recipe {
    padding: calc(38 / 740 * 100%) 0 0 0; }
  #recipeList .recipe .list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto; }
    #recipeList .recipe .list .item {
      flex-basis: calc(360 / 740 * 100%);
      margin: 0 0 calc(38 / 740 * 100%) calc(20 / 740 * 100%); }
      #recipeList .recipe .list .item:nth-of-type(2n+1) {
        margin-left: 0; }
      #recipeList .recipe .list .item .name {
        font-size: 1.8rem;
        line-height: 1.44;
        padding: calc(19 / 360 * 100%) 0 calc(22 / 360 * 100%) 0; }
      #recipeList .recipe .list .item .data {
        width: calc(350 / 360 * 100%);
        padding: calc(14 / 360 * 100%) 0; }
        #recipeList .recipe .list .item .data .row .head {
          font-size: 1.2rem;
          line-height: 1.5;
          margin: 0 0.5em 0 0; }
          #recipeList .recipe .list .item .data .row .head.time:before {
            margin: 0 0.5em 0 0; }
          #recipeList .recipe .list .item .data .row .head:before {
            width: 1.8em;
            height: 1.8em;
            margin: 0 0.2em 0 0; }
        #recipeList .recipe .list .item .data .row .cont {
          font-size: 1.2rem;
          line-height: 1.5; }
          #recipeList .recipe .list .item .data .row .cont .num {
            font-size: 1.8rem;
            line-height: 1; }
      #recipeList .recipe .list .item .textWrap {
        width: calc(300 / 360 * 100%);
        font-size: 1.6rem;
        line-height: 1.69;
        padding: calc(13 / 360 * 100%) 0 calc(22 / 360 * 100%); }
  #recipeList .noteWrap {
    width: 100%;
    padding: calc(30 / 740 * 100%) 0; }
    #recipeList .noteWrap .note {
      font-size: 1.4rem;
      line-height: 1.71; } }