@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; }

/* firstContent */
#firstContent .content {
  background: url(../img/bg_mv_sp.png) center top no-repeat;
  background-size: contain;
  background-color: #ffffff;
  padding: calc(120 / 390 * 100%) 0 calc(5 / 390 * 100%) 0; }
#firstContent .logo {
  width: calc(220 / 390 * 100%);
  text-align: center;
  margin: 0 auto calc(26 / 390 * 100%) auto; }
#firstContent .intro {
  text-align: center; }
  #firstContent .intro .text {
    font-size: 1.6rem;
    line-height: 1.88;
    font-weight: 500;
    letter-spacing: 0.06em;
    margin: 0 0 1.5em 0; }
    #firstContent .intro .text .large {
      font-size: 1.8rem;
      line-height: 1.67;
      font-weight: 700; }
  #firstContent .intro .phrase {
    font-size: 2rem;
    line-height: 1.7;
    font-weight: 700; }
  #firstContent .intro .moreButtonArea {
    position: relative;
    background: linear-gradient(rgba(255, 255, 255, 0) 0%, #ffffff 40%);
    margin: calc(-60 / 390 * 100%) 0 0 0;
    padding: calc(67 / 390 * 100%) 0 0 0; }
  #firstContent .intro.open .moreButtonArea {
    margin: 0;
    padding: calc(30 / 390 * 100%) 0 0 0; }
    #firstContent .intro.open .moreButtonArea .button .icon:after {
      transform: rotate(-90deg); }
#firstContent .pickup {
  padding: calc(95 / 390 * 100%) 0 0 0; }
  #firstContent .pickup .title {
    width: calc(318 / 390 * 100%);
    margin: 0 auto calc(27 / 390 * 100%) auto; }
  #firstContent .pickup .slideWrap {
    width: calc(290 / 390 * 100%);
    margin: auto; }
    #firstContent .pickup .slideWrap .slide .slick-list {
      overflow: visible; }
    #firstContent .pickup .slideWrap .slide .item {
      padding: 0 calc(10 / 390 * 100vw); }
      #firstContent .pickup .slideWrap .slide .item a {
        display: block;
        position: relative; }
        #firstContent .pickup .slideWrap .slide .item a .category {
          position: absolute;
          top: 0;
          left: 0;
          color: #ffffff;
          font-size: 1.3rem;
          line-height: 1;
          font-weight: 700;
          background-color: #000000;
          padding: 0.5em 1em; }
        #firstContent .pickup .slideWrap .slide .item a .image {
          overflow: hidden;
          border: 1px solid #A1A1A1;
          border-radius: 2rem; }
        #firstContent .pickup .slideWrap .slide .item a .text {
          font-size: 1.4rem;
          line-height: 1.71;
          padding: 0.7em 0 0 0; }

@media screen and (min-width: 768px) {
  #firstContent .content {
    background: url(../img/bg_mv.png) center top no-repeat;
    background-size: contain;
    background-color: #ffffff;
    padding: calc(120 / 1440 * 100%) 0 calc(5 / 1440 * 100%) 0; }
  #firstContent .logo {
    width: calc(320 / 1440 * 100%);
    margin: 0 auto calc(28 / 1440 * 100%) auto; }
  #firstContent .intro {
    text-align: center; }
    #firstContent .intro .accordionContent {
      display: block !important; }
    #firstContent .intro .text {
      font-size: 2.2rem;
      line-height: 1.91;
      letter-spacing: 0.06em;
      margin: 0 0 1.4em 0; }
      #firstContent .intro .text .large {
        font-size: 2.6rem;
        line-height: 1; }
    #firstContent .intro .phrase {
      font-size: 3.1rem;
      line-height: 1.68; }
  #firstContent .pickup {
    position: relative;
    z-index: 1;
    padding: calc(95 / 1440 * 100%) 0 0 0; }
    #firstContent .pickup .contentInner {
      max-width: 980px; }
    #firstContent .pickup .title {
      width: calc(318 / 960 * 100%);
      margin: 0 auto calc(35 / 960 * 100%) auto; }
    #firstContent .pickup .slideWrap {
      width: 100%; }
      #firstContent .pickup .slideWrap .slide .slick-list {
        overflow: visible; }
      #firstContent .pickup .slideWrap .slide .item {
        padding: 0 10px; }
        #firstContent .pickup .slideWrap .slide .item a .category {
          font-size: 1.3rem;
          line-height: 1;
          padding: 0.55em 2.1em; }
        #firstContent .pickup .slideWrap .slide .item a .text {
          font-size: 1.6rem;
          line-height: 1.75;
          padding: 0.6em 0 0 0; } }
/* necessityArea */
#necessityArea .content {
  position: relative;
  background: url(../img/bg_necessity_sp.jpg) center top no-repeat;
  background-size: contain;
  background-color: #F6F2D5;
  padding: calc(155 / 390 * 100%) 0 calc(32 / 390 * 100%) 0; }
  #necessityArea .content:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: url(../img/bg_wave_bottom_sp.png) center top no-repeat;
    background-size: contain;
    padding: 0 0 calc(40 / 390 * 100%) 0; }
#necessityArea .title {
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  margin: 0 0 calc(41 / 390 * 100%) 0; }
#necessityArea .necessity .list {
  width: calc(340 / 390 * 100%);
  margin: 0 auto calc(20 / 390 * 100%) auto; }
  #necessityArea .necessity .list .item {
    margin: 0 0 calc(8 / 340 * 100%) 0; }
    #necessityArea .necessity .list .item .modalLinkWrap {
      color: #0079AD;
      font-size: 2rem;
      line-height: 1.6;
      font-weight: 700;
      text-align: center; }
      #necessityArea .necessity .list .item .modalLinkWrap a {
        display: block;
        position: relative;
        background-color: #ffffff;
        padding: 1.45em 0;
        border: 4px solid #79CAED;
        border-radius: 2rem; }
        #necessityArea .necessity .list .item .modalLinkWrap a:after {
          content: "";
          position: absolute;
          bottom: 0.6em;
          right: 0.65em;
          width: 1em;
          height: 1em;
          background: url(../img/icon_arrow_blue2.png) center top no-repeat;
          background-size: contain; }
        #necessityArea .necessity .list .item .modalLinkWrap a .modalTitle .large {
          font-size: 2.6rem;
          line-height: 1.23;
          font-weight: 700; }
#necessityArea .check {
  padding: calc(42 / 390 * 100%) 0 0 0; }
  #necessityArea .check .checkTitle {
    margin: 0 0 calc(22 / 390 * 100%) 0; }
    #necessityArea .check .checkTitle .frame {
      width: calc(335 / 390 * 100%);
      height: 5.4rem;
      font-size: 2.2rem;
      line-height: 1;
      text-align: center;
      background-color: #57B4DC;
      margin: auto; }
      #necessityArea .check .checkTitle .frame .band {
        display: block;
        width: calc(100% - 0.3em);
        font-weight: 700;
        background-color: #FED42D;
        padding: 0.9em 0 1em 0;
        transform-origin: left bottom;
        transform: rotate(-2deg) translateY(-0.45em); }
    #necessityArea .check .checkTitle h3 {
      width: calc(320 / 390 * 100%);
      margin: auto;
      padding: calc(22 / 390 * 100%) 0 0 0; }
  #necessityArea .check .list {
    position: relative;
    background: url(../img/bg_balloon_sp.png) center top no-repeat;
    background-size: contain;
    padding: 0 0 calc(220 / 390 * 100%) 0; }
    #necessityArea .check .list:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: url(../img/img_necessity_check_sp.png) center bottom no-repeat;
      background-size: contain;
      margin: auto;
      padding: 0 0 calc(221 / 390 * 100%) 0; }
    #necessityArea .check .list .item:nth-of-type(1) {
      padding: calc(4 / 390 * 100%) 0 calc(4 / 390 * 100%) 0; }
      #necessityArea .check .list .item:nth-of-type(1) .modalLinkWrap {
        z-index: 3;
        width: calc(318 / 390 * 100%);
        margin: 0 0 0 calc(64 / 390 * 100%);
        padding: calc(154 / 390 * 100%) 0 0 0; }
        #necessityArea .check .list .item:nth-of-type(1) .modalLinkWrap a:after {
          margin: 0 calc(33 / 318 * 100%) calc(21 / 318 * 100%) 0; }
    #necessityArea .check .list .item:nth-of-type(2) {
      padding: 0 0 calc(9 / 390 * 100%) 0; }
      #necessityArea .check .list .item:nth-of-type(2) .modalLinkWrap {
        z-index: 2;
        width: calc(259 / 390 * 100%);
        margin: 0 0 0 calc(21 / 390 * 100%);
        padding: calc(123 / 390 * 100%) 0 0 0; }
        #necessityArea .check .list .item:nth-of-type(2) .modalLinkWrap a {
          font-size: 2rem;
          line-height: 1.5; }
          #necessityArea .check .list .item:nth-of-type(2) .modalLinkWrap a:after {
            margin: 0 calc(32 / 390 * 100%) calc(34 / 390 * 100%) 0; }
    #necessityArea .check .list .item:nth-of-type(3) {
      padding: 0 0 calc(4 / 390 * 100%) 0; }
      #necessityArea .check .list .item:nth-of-type(3) .modalLinkWrap {
        z-index: 1;
        width: calc(323 / 390 * 100%);
        margin: 0 0 0 calc(24 / 390 * 100%);
        padding: calc(155 / 390 * 100%) 0 0 0; }
        #necessityArea .check .list .item:nth-of-type(3) .modalLinkWrap a:after {
          margin: 0 calc(38 / 390 * 100%) calc(49 / 390 * 100%) 0; }
    #necessityArea .check .list .item .modalLinkWrap {
      position: relative;
      height: 0; }
      #necessityArea .check .list .item .modalLinkWrap a {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 1.6rem;
        line-height: 1.63;
        font-weight: 600; }
        #necessityArea .check .list .item .modalLinkWrap a:after {
          content: "";
          position: absolute;
          bottom: 0;
          right: 0;
          width: 2rem;
          height: 2rem;
          background: url(../img/icon_arrow_black.png) center top no-repeat;
          background-size: contain; }
        #necessityArea .check .list .item .modalLinkWrap a .modalTitle {
          text-align: center; }

@media screen and (min-width: 768px) {
  #necessityArea .content {
    background: url(../img/bg_necessity.jpg) center top no-repeat;
    background-size: contain;
    background-color: #F6F2D5;
    margin: calc(-130 / 1440* 100%) 0 0 0;
    padding: calc(379 / 1440 * 100%) 0 calc(32 / 1440 * 100%) 0; }
    #necessityArea .content:after {
      background: url(../img/bg_wave_bottom_sp.png) center top no-repeat;
      background-size: contain;
      padding: 0 0 calc(40 / 1440 * 100%) 0; }
  #necessityArea .contentInner {
    max-width: 1040px; }
  #necessityArea .title {
    font-size: 4rem;
    line-height: 1;
    margin: 0 0 calc(60 / 1020 * 100%) 0; }
  #necessityArea .necessity .list {
    display: flex;
    justify-content: space-between;
    width: calc(960 / 1020 * 100%);
    margin: 0 auto calc(20 / 1020 * 100%) auto; }
    #necessityArea .necessity .list .item {
      flex-basis: calc(304 / 960 * 100%);
      margin: 0; }
      #necessityArea .necessity .list .item .modalLinkWrap {
        font-size: 2.6rem;
        line-height: 2; }
        #necessityArea .necessity .list .item .modalLinkWrap a {
          padding: 3.6em 0; }
          #necessityArea .necessity .list .item .modalLinkWrap a:after {
            bottom: 0.7em;
            right: 0.8em; }
          #necessityArea .necessity .list .item .modalLinkWrap a .modalTitle .large {
            font-size: 3.9rem;
            line-height: 1.23; }
  #necessityArea .check {
    padding: calc(88 / 1020 * 100%) 0 0 0; }
    #necessityArea .check .checkTitle {
      margin: 0 0 calc(22 / 1020 * 100%) 0; }
      #necessityArea .check .checkTitle .frame {
        width: calc(670 / 1020 * 100%);
        height: 5.4rem;
        font-size: 2.7rem;
        line-height: 1; }
        #necessityArea .check .checkTitle .frame .band {
          width: calc(100% - 0.3em);
          padding: 1.2em 0 1.1em 0.4em;
          transform: rotate(-2deg) translateY(-1.1em); }
      #necessityArea .check .checkTitle h3 {
        width: calc(475 / 1020 * 100%);
        margin: auto;
        padding: calc(27 / 1020 * 100%) 0 0 0; }
    #necessityArea .check .list {
      background-image: none;
      padding: 0 0 calc(520 / 1020 * 100%) 0; }
      #necessityArea .check .list:after {
        background: url(../img/img_necessity_check.png) center bottom no-repeat;
        background-size: contain;
        margin: 0 calc(25 / 1020 * 100%) 0 0;
        padding: 0 0 calc(358 / 1020 * 100%) 0; }
      #necessityArea .check .list .item:nth-of-type(1) {
        padding: 0; }
        #necessityArea .check .list .item:nth-of-type(1) .modalLinkWrap {
          width: calc(396 / 1020 * 100%);
          background: url(../img/bg_balloon1.png) center top no-repeat;
          background-size: contain;
          margin: calc(41 / 1020 * 100%) 0 0 calc(1 / 1020 * 100%);
          padding: calc(306 / 1020 * 100%) 0 0 0; }
          #necessityArea .check .list .item:nth-of-type(1) .modalLinkWrap a {
            padding: 0 0 2.2em 0;
            transform: rotate(-14deg); }
            #necessityArea .check .list .item:nth-of-type(1) .modalLinkWrap a:after {
              margin: 0 calc(51 / 396 * 100%) calc(129 / 396 * 100%) 0; }
      #necessityArea .check .list .item:nth-of-type(2) {
        padding: 0; }
        #necessityArea .check .list .item:nth-of-type(2) .modalLinkWrap {
          width: calc(298 / 1020 * 100%);
          background: url(../img/bg_balloon2.png) center top no-repeat;
          background-size: contain;
          margin: calc(21 / 1020 * 100%) 0 0 calc(353 / 1020 * 100%);
          padding: calc(188 / 1020 * 100%) 0 0 0; }
          #necessityArea .check .list .item:nth-of-type(2) .modalLinkWrap a {
            font-size: 2.4rem;
            line-height: 1.33;
            padding: 0 0 1.2em 0; }
            #necessityArea .check .list .item:nth-of-type(2) .modalLinkWrap a:after {
              margin: 0 calc(23 / 298 * 100%) calc(64 / 298 * 100%) 0; }
      #necessityArea .check .list .item:nth-of-type(3) {
        padding: 0; }
        #necessityArea .check .list .item:nth-of-type(3) .modalLinkWrap {
          width: calc(386 / 1020 * 100%);
          background: url(../img/bg_balloon3.png) center top no-repeat;
          background-size: contain;
          margin: calc(29 / 1020 * 100%) 0 0 calc(621 / 1020 * 100%);
          padding: calc(277 / 1020 * 100%) 0 0 0; }
          #necessityArea .check .list .item:nth-of-type(3) .modalLinkWrap a {
            padding: 0 0 2.2em 0;
            transform: rotate(15deg); }
            #necessityArea .check .list .item:nth-of-type(3) .modalLinkWrap a:after {
              margin: 0 calc(42 / 386 * 100%) calc(118 / 386 * 100%) 0; }
      #necessityArea .check .list .item .modalLinkWrap {
        position: absolute;
        top: 0;
        left: 0; }
        #necessityArea .check .list .item .modalLinkWrap a {
          font-size: 1.8rem;
          line-height: 1.61; }
          #necessityArea .check .list .item .modalLinkWrap a:after {
            width: 2.4rem;
            height: 2.4rem; } }
/* whatsnewArea */
#whatsnewArea .content {
  position: relative;
  padding: calc(131 / 390 * 100%) 0 calc(85 / 390 * 100%) 0; }
  #whatsnewArea .content:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: url(../img/bg_whatsnew_sp.png) center top no-repeat;
    background-size: contain;
    margin: calc(-9 / 390 * 100%) 0 0 0;
    padding: calc(480 / 390 * 100%) 0 0 0; }
#whatsnewArea .contentInner {
  position: relative; }
#whatsnewArea .title {
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  margin: 0 0 calc(20 / 390 * 100%) 0; }
  #whatsnewArea .title:before {
    content: "";
    display: block;
    width: calc(60 / 390 * 100%);
    background: url(../img/icon01.png) center top no-repeat;
    background-size: contain;
    margin: auto;
    padding: calc(76 / 390 * 100%) 0 0 0; }
#whatsnewArea .desc {
  font-size: 1.6rem;
  line-height: 1.75;
  text-align: center;
  margin: 0 0 calc(25 / 390 * 100%) 0; }
#whatsnewArea .whatsnew .list {
  width: calc(330 / 390 * 100%);
  margin: auto; }
  #whatsnewArea .whatsnew .list .item {
    margin: 0 0 calc(17 / 330* 100%) 0; }

@media screen and (min-width: 768px) {
  #whatsnewArea .content {
    position: relative;
    padding: calc(147 / 1440 * 100%) 0 calc(85 / 1440 * 100%) 0; }
    #whatsnewArea .content:before {
      background: url(../img/bg_whatsnew_top.png) center top no-repeat;
      background-size: contain;
      margin: calc(-21 / 1440 * 100%) 0 0 0;
      padding: calc(575 / 1440 * 100%) 0 0 0; }
  #whatsnewArea .contentInner {
    max-width: 1170px; }
  #whatsnewArea .title {
    font-size: 4rem;
    line-height: 1.35;
    margin: 0 0 calc(26 / 1150 * 100%) 0; }
    #whatsnewArea .title:before {
      width: calc(60 / 1150 * 100%);
      padding: calc(94 / 1150 * 100%) 0 0 0; }
  #whatsnewArea .desc {
    font-size: 1.8rem;
    line-height: 2.33;
    margin: 0 0 calc(40 / 1150 * 100%) 0; }
  #whatsnewArea .whatsnew .list {
    display: flex;
    justify-content: center;
    width: 100%; }
    #whatsnewArea .whatsnew .list .item {
      flex-basis: calc(370 / 1150 * 100%);
      margin: 0 0 0 calc(20 / 1150 * 100%); }
      #whatsnewArea .whatsnew .list .item:first-of-type {
        margin-left: 0; } }
/* intakeArea */
#intakeArea .content {
  position: relative;
  background-color: #F6F2D5;
  padding: calc(69 / 390 * 100%) 0 calc(50 / 390 * 100%) 0; }
  #intakeArea .content:before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: url(../img/bg_wave_top_sp.png) center bottom no-repeat;
    background-size: contain;
    padding: calc(40 / 390 * 100%) 0 0 0; }
  #intakeArea .content:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: url(../img/bg_wave_bottom_sp.png) center top no-repeat;
    background-size: contain;
    padding: calc(40 / 390 * 100%) 0 0 0; }
#intakeArea .bg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: url(../img/bg_intake_sp.png) center top no-repeat;
  background-size: contain;
  margin: calc(-69 / 390 * 100%) 0 0 0;
  padding: calc(480 / 390 * 100%) 0 0 0; }
#intakeArea .contentInner {
  position: relative;
  z-index: 1; }
#intakeArea .title {
  font-size: 3.2rem;
  line-height: 1.44;
  font-weight: 700;
  text-align: center;
  margin: 0 0 calc(18 / 390 * 100%) 0; }
  #intakeArea .title:before {
    content: "";
    display: block;
    width: calc(60 / 390 * 100%);
    background: url(../img/icon01.png) center top no-repeat;
    background-size: contain;
    margin: auto;
    padding: calc(68 / 390 * 100%) 0 0 0; }
#intakeArea .desc {
  width: calc(300 / 390 * 100%);
  font-size: 1.6rem;
  line-height: 1.75;
  margin: 0 auto calc(3 / 390 * 100%) auto; }
#intakeArea .intake {
  margin: 0 0 calc(56 / 390 * 100%) 0; }
  #intakeArea .intake .list:after {
    content: "";
    display: block;
    width: 5rem;
    height: 2rem;
    background-color: #000000;
    margin: 0 auto calc(20 / 390 * 100%) auto;
    clip-path: polygon(0 0, 100% 0, 50% 100%); }
  #intakeArea .intake .list .item {
    position: relative; }
    #intakeArea .intake .list .item:nth-of-type(1) {
      padding: calc(56 / 390 * 100%) 0 calc(50 / 390 * 100%) calc(61 / 390 * 100%); }
      #intakeArea .intake .list .item:nth-of-type(1):after {
        right: 0;
        background: url(../img/img_intake01.png) center center no-repeat;
        background-size: contain;
        margin: 0 calc(24 / 390 * 100%) 0 0; }
    #intakeArea .intake .list .item:nth-of-type(2) {
      padding: calc(9 / 390 * 100%) 0 calc(50 / 390 * 100%) calc(183 / 390 * 100%); }
      #intakeArea .intake .list .item:nth-of-type(2):after {
        left: 0;
        background: url(../img/img_intake02.png) center center no-repeat;
        background-size: contain;
        margin: calc(-46 / 390 * 100%) 0 0 calc(27 / 390 * 100%); }
      #intakeArea .intake .list .item:nth-of-type(2) .textWrap {
        padding: 0.6em 0.7em; }
    #intakeArea .intake .list .item:nth-of-type(3) {
      padding: calc(33 / 390 * 100%) 0 calc(25 / 390 * 100%) calc(58 / 390 * 100%); }
      #intakeArea .intake .list .item:nth-of-type(3):after {
        right: 0;
        background: url(../img/img_intake03.png) center center no-repeat;
        background-size: contain;
        margin: calc(-29 / 390 * 100%) calc(15 / 390 * 100%) 0 0; }
      #intakeArea .intake .list .item:nth-of-type(3) .textWrap {
        padding: 0.5em 0.8em; }
    #intakeArea .intake .list .item:after {
      content: "";
      position: absolute;
      top: 0;
      width: calc(176 / 390 * 100%);
      padding: calc(178 / 390 * 100%) 0 0 0; }
    #intakeArea .intake .list .item .textWrap {
      display: inline-block;
      position: relative;
      z-index: 2;
      font-size: 1.7rem;
      line-height: 1.29;
      font-weight: 700;
      text-align: center;
      background-color: #ffffff;
      padding: 0.5em 0.9em;
      border: 1px solid #000000;
      border-radius: 5px;
      box-shadow: 0 2px 0 #000000; }
      #intakeArea .intake .list .item .textWrap .small {
        font-size: 1.3rem;
        line-height: 1.69; }
  #intakeArea .intake .amount {
    width: calc(340 / 390 * 100%);
    font-size: 2.6rem;
    line-height: 1.35;
    font-weight: 700;
    text-align: center;
    background-color: #ffffff;
    margin: 0 auto calc(20 / 390 * 100%) auto;
    padding: 0.3em 0 0.6em 0;
    border: 3px solid #000000;
    border-radius: 3em;
    box-shadow: 0 6px 0 #000000;
    box-sizing: border-box; }
    #intakeArea .intake .amount .small {
      font-size: 2rem;
      line-height: 1.4; }
    #intakeArea .intake .amount .num {
      font-size: 4.4rem;
      line-height: 1; }
  #intakeArea .intake .noteWrap {
    width: calc(340 / 390 * 100%);
    text-align: center;
    margin: auto; }
    #intakeArea .intake .noteWrap .note {
      display: inline-block;
      text-align: left;
      font-size: 0.88rem;
      line-height: 1.36; }
#intakeArea .challengeWrap .challengeTitle {
  text-align: center;
  margin: 0 0 calc(19 / 390 * 100%) 0; }
  #intakeArea .challengeWrap .challengeTitle .frame {
    width: calc(335 / 390 * 100%);
    height: 5.4rem;
    font-size: 2.2rem;
    line-height: 1;
    text-align: center;
    background-color: #57B4DC;
    margin: 0 auto calc(15 / 390 * 100%) auto; }
    #intakeArea .challengeWrap .challengeTitle .frame .band {
      display: block;
      width: calc(100% - 0.3em);
      font-weight: 700;
      background-color: #FED42D;
      padding: 0.9em 0 1em 0;
      transform-origin: left bottom;
      transform: rotate(-2deg) translateY(-0.45em); }
  #intakeArea .challengeWrap .challengeTitle .balloon {
    display: inline-block;
    position: relative;
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    padding: 0.4em 1.5em 0.4em 1.7em; }
    #intakeArea .challengeWrap .challengeTitle .balloon:before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 2px;
      height: 2em;
      background-color: #000000;
      transform: rotate(-30deg); }
    #intakeArea .challengeWrap .challengeTitle .balloon:after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 2px;
      height: 2em;
      background-color: #000000;
      transform: rotate(30deg); }
#intakeArea .challengeWrap .blockWrap {
  position: relative;
  width: calc(340 / 390 * 100%);
  margin: auto; }
  #intakeArea .challengeWrap .blockWrap .block.current .blockTitle {
    color: #ffffff;
    background-color: #000000; }
    #intakeArea .challengeWrap .blockWrap .block.current .blockTitle:after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      width: 2.5rem;
      height: 1.6rem;
      background-color: #000000;
      margin: 0 auto;
      clip-path: polygon(0 0, 100% 0, 50% 100%); }
  #intakeArea .challengeWrap .blockWrap .block.current .tabContent {
    display: block; }
  #intakeArea .challengeWrap .blockWrap .block:nth-child(1) .blockTitle {
    position: relative;
    left: 0;
    border-radius: 1rem 0 0 1rem; }
  #intakeArea .challengeWrap .blockWrap .block:nth-child(2) .blockTitle {
    right: 0;
    border-radius: 0 1rem 1rem 0; }
  #intakeArea .challengeWrap .blockWrap .block .blockTitle {
    position: absolute;
    top: 0;
    width: calc(50% + 1px);
    font-size: 1.6rem;
    line-height: 1.69;
    font-weight: 600;
    text-align: center;
    background-color: #ffffff;
    padding: 0.9em 0.8em;
    border: 2px solid #000000;
    box-sizing: border-box; }
  #intakeArea .challengeWrap .blockWrap .block .tabContent {
    display: none; }
    #intakeArea .challengeWrap .blockWrap .block .tabContent .list {
      position: relative;
      width: calc(320 / 340 * 100%);
      margin: auto;
      padding: calc(34 / 340 * 100%) 0 0 0; }
      #intakeArea .challengeWrap .blockWrap .block .tabContent .list:after {
        content: "";
        display: block;
        width: 5.5rem;
        height: 2.5rem;
        background-color: #000000;
        margin: calc(20 / 320 * 100%) auto calc(15 / 320 * 100%) auto;
        clip-path: polygon(0 0, 100% 0, 50% 100%); }
      #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item {
        margin: 0 0 calc(10 / 320 * 100%) 0; }
        #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item:nth-of-type(1) .box:before {
          background: url(../img/icon_day1.png) center center no-repeat;
          background-size: contain; }
        #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item:nth-of-type(2) .box:before {
          background: url(../img/icon_day2.png) center center no-repeat;
          background-size: contain; }
        #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item:nth-of-type(3) .box:before {
          background: url(../img/icon_day3.png) center center no-repeat;
          background-size: contain; }
        #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box {
          position: relative;
          text-align: center;
          background-color: #ffffff;
          padding: calc(15 / 320 * 100%) calc(20 / 320 * 100%) calc(20 / 320 * 100%) calc(20 / 320 * 100%);
          border-radius: 2rem; }
          #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box:before {
            content: "";
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 4.4rem;
            height: 4.4rem; }
          #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box .textWrap {
            margin: 0 0 calc(15 / 280 * 100%) 0; }
            #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box .textWrap .boxTitle {
              font-size: 1.8rem;
              line-height: 1.56;
              font-weight: 700;
              margin: 0 0 0.7em 0;
              padding: 0 0 0.5em 0;
              border-bottom: 1px solid #000000; }
            #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box .textWrap .boxText {
              font-size: 1.4rem;
              line-height: 1.29; }
          #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box .amount {
            display: inline-block;
            position: relative;
            z-index: 2;
            font-size: 1.8rem;
            line-height: 1.78;
            font-weight: 700;
            text-align: center;
            background-color: #ffffff;
            padding: 0.4em 0.65em;
            border: 2px solid #000000;
            border-radius: 5px;
            box-shadow: 0 2px 0 #000000; }
            #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box .amount p {
              display: flex;
              align-items: center; }
              #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box .amount p .num {
                font-size: 3rem;
                line-height: 1.07;
                margin: 0 0 0.1em 0; }
              #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box .amount p .unit {
                font-size: 2rem;
                line-height: 1.6; }
    #intakeArea .challengeWrap .blockWrap .block .tabContent .total {
      width: calc(320 / 340* 100%);
      font-size: 2.5rem;
      line-height: 1.52;
      font-weight: 700;
      text-align: center;
      background-color: #ffffff;
      margin: 0 auto calc(20 / 390 * 100%) auto;
      padding: 0.5em 0 0.85em 0;
      border: 3px solid #000000;
      border-radius: 3em;
      box-shadow: 0 6px 0 #000000;
      box-sizing: border-box; }
      #intakeArea .challengeWrap .blockWrap .block .tabContent .total .small {
        font-size: 2rem;
        line-height: 1.4;
        font-weight: 600; }
      #intakeArea .challengeWrap .blockWrap .block .tabContent .total .num {
        font-size: 4.4rem;
        line-height: 1; }
      #intakeArea .challengeWrap .blockWrap .block .tabContent .total .totalNum {
        display: flex;
        align-items: center;
        justify-content: center; }
#intakeArea .product {
  padding: calc(35 / 390 * 100%) 0 0 0; }
  #intakeArea .product .productTitle {
    text-align: center;
    margin: 0 0 calc(20 / 390 * 100%) 0; }
    #intakeArea .product .productTitle .balloon {
      display: inline-block;
      position: relative;
      font-size: 1.6rem;
      line-height: 1;
      font-weight: 700;
      padding: 0.4em 1.5em 0.4em 1.7em; }
      #intakeArea .product .productTitle .balloon:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 2px;
        height: 2em;
        background-color: #000000;
        transform: rotate(-30deg); }
      #intakeArea .product .productTitle .balloon:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 2px;
        height: 2em;
        background-color: #000000;
        transform: rotate(30deg); }
  #intakeArea .product .slideWrap {
    width: calc(258 / 390 * 100%);
    margin: auto; }
    #intakeArea .product .slideWrap .slide .slick-list {
      overflow: visible; }
    #intakeArea .product .slideWrap .slide .item {
      margin: 0 calc(10 / 390 * 100vw); }
      #intakeArea .product .slideWrap .slide .item .box {
        background-color: #ffffff;
        padding: calc(10 / 238* 100%) 0 calc(20 / 238* 100%) 0;
        border-radius: 2rem; }
        #intakeArea .product .slideWrap .slide .item .box .image {
          width: calc(130 / 238 * 100%);
          margin: 0 auto calc(28 / 238 * 100%) auto; }
        #intakeArea .product .slideWrap .slide .item .box .textWrap {
          text-align: center; }
          #intakeArea .product .slideWrap .slide .item .box .textWrap .name {
            display: inline-block;
            min-height: calc(2.2rem * 3);
            font-size: 1.4rem;
            line-height: 1.57;
            font-weight: 600;
            text-align: left; }

@media screen and (min-width: 768px) {
  #intakeArea .content {
    padding: calc(147 / 1440 * 100%) 0 calc(50 / 1440 * 100%) 0; }
    #intakeArea .content:before {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 0;
      right: 0;
      background: url(../img/bg_wave_top.png) center bottom no-repeat;
      background-size: contain;
      padding: calc(54 / 1440 * 100%) 0 0 0; }
    #intakeArea .content:after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: url(../img/bg_wave_bottom.png) center top no-repeat;
      background-size: contain;
      padding: calc(37 / 1440 * 100%) 0 0 0; }
  #intakeArea .bg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: url(../img/bg_intake.png) center top no-repeat;
    background-size: contain;
    margin: calc(-13 / 1440 * 100%) 0 0 0;
    padding: calc(876 / 1440 * 100%) 0 0 0; }
  #intakeArea .partsWrap .parts {
    position: absolute;
    top: 0; }
    #intakeArea .partsWrap .parts.parts01 {
      left: 0;
      width: calc(199 / 1440 * 100%);
      background: url(../img/img_parts01.png) center center no-repeat;
      background-size: contain;
      margin: 1308px 0 0 0;
      padding: calc(289 / 1440 * 100%) 0 0 0; }
    #intakeArea .partsWrap .parts.parts02 {
      right: 0;
      width: calc(311 / 1440 * 100%);
      background: url(../img/img_parts02.png) center center no-repeat;
      background-size: contain;
      margin: 1995px 0 0 0;
      padding: calc(298 / 1440 * 100%) 0 0 0; }
    #intakeArea .partsWrap .parts.parts03 {
      left: 0;
      width: calc(314 / 1440 * 100%);
      background: url(../img/img_parts03.png) center center no-repeat;
      background-size: contain;
      margin: 2430px 0 0 0;
      padding: calc(356 / 1440 * 100%) 0 0 0; }
  #intakeArea .contentInner {
    max-width: 980px; }
  #intakeArea .title {
    font-size: 4rem;
    line-height: 1.35;
    margin: 0 0 calc(26 / 960 * 100%) 0; }
    #intakeArea .title:before {
      content: "";
      display: block;
      width: calc(60 / 960 * 100%);
      background: url(../img/icon01.png) center top no-repeat;
      background-size: contain;
      margin: auto;
      padding: calc(92 / 960 * 100%) 0 0 0; }
  #intakeArea .desc {
    width: 100%;
    font-size: 1.8rem;
    line-height: 2.33;
    text-align: center;
    margin: 0 auto calc(40 / 960 * 100%) auto; }
  #intakeArea .intake {
    margin: 0 0 calc(115 / 960 * 100%) 0; }
    #intakeArea .intake .list {
      display: flex;
      justify-content: space-between;
      width: calc(910 / 960 * 100%);
      margin: auto; }
      #intakeArea .intake .list:after {
        display: none; }
      #intakeArea .intake .list .item {
        flex-basis: calc(265 / 960 * 100%); }
        #intakeArea .intake .list .item:nth-of-type(1) {
          padding: 0; }
          #intakeArea .intake .list .item:nth-of-type(1):after {
            margin: 0; }
        #intakeArea .intake .list .item:nth-of-type(2) {
          padding: 0; }
          #intakeArea .intake .list .item:nth-of-type(2):after {
            margin: 0; }
          #intakeArea .intake .list .item:nth-of-type(2) .textWrap {
            padding: 0.6em 0.7em; }
        #intakeArea .intake .list .item:nth-of-type(3) {
          padding: 0; }
          #intakeArea .intake .list .item:nth-of-type(3):after {
            margin: 0; }
          #intakeArea .intake .list .item:nth-of-type(3) .textWrap {
            padding: 0.5em 0.8em; }
        #intakeArea .intake .list .item:after {
          display: block;
          position: static;
          width: 100%;
          padding: calc(285 / 235 * 100%) 0 0 0; }
        #intakeArea .intake .list .item .textWrap {
          display: flex;
          align-items: center;
          justify-content: center;
          width: calc(240 / 265 * 100%);
          height: 12rem;
          font-size: 2.3rem;
          line-height: 1.43;
          font-weight: 700;
          margin: auto;
          padding: 0.5em 0;
          border: 2px solid #000000;
          box-sizing: border-box; }
          #intakeArea .intake .list .item .textWrap .small {
            font-size: 1.5rem;
            line-height: 1.6; }
    #intakeArea .intake .next {
      width: 6rem;
      height: 3rem;
      background-color: #000000;
      margin: 0 auto calc(12 / 390 * 100%) auto;
      clip-path: polygon(0 0, 100% 0, 50% 100%); }
    #intakeArea .intake .amount {
      width: calc(480 / 960 * 100%);
      font-size: 3rem;
      line-height: 1.17;
      font-weight: 700;
      margin: 0 auto calc(20 / 960 * 100%) auto;
      padding: 1.0em 0 1.3em 0;
      border: 3px solid #000000;
      border-radius: 3em;
      box-shadow: 0 6px 0 #000000;
      box-sizing: border-box; }
      #intakeArea .intake .amount .small {
        font-size: 2.3rem;
        line-height: 1.09; }
      #intakeArea .intake .amount .num {
        font-size: 5rem;
        line-height: 1; }
    #intakeArea .intake .noteWrap .note {
      font-size: 1.2rem;
      line-height: 1.42; }
  #intakeArea .challengeWrap .challengeTitle {
    text-align: center;
    margin: 0 0 calc(40 / 960 * 100%) 0; }
    #intakeArea .challengeWrap .challengeTitle .frame {
      width: calc(670 / 1020 * 100%);
      height: 5.4rem;
      font-size: 2.7rem;
      line-height: 1;
      margin: 0 auto calc(25 / 1020 * 100%) auto; }
      #intakeArea .challengeWrap .challengeTitle .frame .band {
        width: calc(100% - 0.3em);
        padding: 1.2em 0 1.1em 0.4em;
        transform: rotate(-2deg) translateY(-1.1em); }
    #intakeArea .challengeWrap .challengeTitle .balloon {
      font-size: 3rem;
      line-height: 1;
      padding: 0.4em 1.5em 0.4em 1.7em; }
      #intakeArea .challengeWrap .challengeTitle .balloon:before {
        width: 2px;
        height: 2em;
        background-color: #000000;
        transform: rotate(-30deg); }
      #intakeArea .challengeWrap .challengeTitle .balloon:after {
        width: 2px;
        height: 2em;
        background-color: #000000;
        transform: rotate(30deg); }
  #intakeArea .challengeWrap .blockWrap {
    width: 100%; }
    #intakeArea .challengeWrap .blockWrap .block.current .blockTitle:after {
      width: 3rem;
      height: 1.6rem; }
    #intakeArea .challengeWrap .blockWrap .block.current .tabContent {
      display: block; }
    #intakeArea .challengeWrap .blockWrap .block:nth-child(1) .blockTitle {
      position: relative;
      left: 0;
      border-radius: 1rem 0 0 1rem; }
    #intakeArea .challengeWrap .blockWrap .block:nth-child(2) .blockTitle {
      right: 0;
      border-radius: 0 1rem 1rem 0; }
    #intakeArea .challengeWrap .blockWrap .block .blockTitle {
      font-size: 2rem;
      line-height: 1.8;
      padding: 1.6em 0; }
    #intakeArea .challengeWrap .blockWrap .block .tabContent {
      display: none; }
      #intakeArea .challengeWrap .blockWrap .block .tabContent .list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        padding: calc(34 / 960 * 100%) 0 0 0; }
        #intakeArea .challengeWrap .blockWrap .block .tabContent .list:after {
          display: none; }
        #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item {
          flex-basis: calc(308 / 960 * 100%);
          background-color: #ffffff;
          margin: 0 0 calc(6 / 320 * 100%) 0;
          border-radius: 2rem; }
          #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box {
            padding: calc(22 / 308 * 100%) calc(14 / 308 * 100%) calc(20 / 308 * 100%) calc(14 / 308 * 100%); }
            #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box:before {
              top: 1rem;
              right: 1.5rem;
              width: 5rem;
              height: 5rem; }
            #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box .textWrap {
              margin: 0 0 calc(20 / 280* 100%) 0;
              padding: calc(22 / 280* 100%) 0 0 0; }
              #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box .textWrap .boxTitle {
                font-size: 2rem;
                line-height: 1.7;
                margin: 0 0 1em 0;
                padding: 0 0 0.6em 0; }
              #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box .textWrap .boxText {
                font-size: 1.4rem;
                line-height: 1.29;
                min-height: calc(18 / 14 * 2em); }
            #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box .amount {
              display: flex;
              align-items: center;
              justify-content: center;
              width: calc(270 / 280* 100%);
              font-size: 1.8rem;
              line-height: 1.78;
              margin: auto;
              padding: 1em 0;
              box-sizing: border-box; }
              #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box .amount p .num {
                font-size: 3.2rem;
                line-height: 1;
                margin: 0 0 0.1em 0; }
              #intakeArea .challengeWrap .blockWrap .block .tabContent .list .item .box .amount p .unit {
                font-size: 2rem;
                line-height: 1.6; }
      #intakeArea .challengeWrap .blockWrap .block .tabContent .next {
        width: 6rem;
        height: 2.5rem;
        background-color: #000000;
        margin: 0 auto calc(17 / 960 * 100%) auto;
        clip-path: polygon(0 0, 100% 0, 50% 100%); }
      #intakeArea .challengeWrap .blockWrap .block .tabContent .total {
        width: calc(475 / 960 * 100%);
        font-size: 2.6rem;
        line-height: 1.23;
        margin: 0 auto calc(20 / 960 * 100%) auto;
        padding: 1.25em 0 1.55em 0; }
        #intakeArea .challengeWrap .blockWrap .block .tabContent .total .small {
          font-size: 2.3rem;
          line-height: 1.22; }
        #intakeArea .challengeWrap .blockWrap .block .tabContent .total .num {
          font-size: 5rem;
          line-height: 1; }
        #intakeArea .challengeWrap .blockWrap .block .tabContent .total .totalNum {
          align-items: end; }
  #intakeArea .product {
    padding: calc(61 / 960 * 100%) 0 0 0; }
    #intakeArea .product .productTitle {
      margin: 0 0 calc(42 / 960 * 100%) 0; }
      #intakeArea .product .productTitle .balloon {
        font-size: 2.1rem;
        line-height: 1;
        padding: 0.4em 1.5em 0.4em 1.7em; }
        #intakeArea .product .productTitle .balloon:before {
          width: 2px;
          height: 2em;
          background-color: #000000;
          transform: rotate(-30deg); }
        #intakeArea .product .productTitle .balloon:after {
          width: 2px;
          height: 2em;
          background-color: #000000;
          transform: rotate(30deg); }
    #intakeArea .product .slideWrap {
      width: 100%; }
      #intakeArea .product .slideWrap .slide .item {
        margin: 0 calc(10 / 960 * 100vw); }
        #intakeArea .product .slideWrap .slide .item .box {
          padding: calc(25 / 312 * 100%) 0 calc(37 / 312 * 100%) 0;
          border-radius: 2rem; }
          #intakeArea .product .slideWrap .slide .item .box .image {
            width: calc(160 / 312 * 100%);
            margin: 0 auto calc(48 / 312 * 100%) auto; }
          #intakeArea .product .slideWrap .slide .item .box .textWrap .name {
            min-height: calc(28 / 18 * 3em);
            font-size: 1.8rem;
            line-height: 1.56; } }
/* recipeArea */
#recipeArea .content {
  padding: calc(55 / 390 * 100%) 0 calc(62 / 390 * 100%) 0; }
#recipeArea .title {
  font-size: 3rem;
  line-height: 1.33;
  font-weight: 700;
  text-align: center;
  margin: 0 0 calc(33 / 390 * 100%) 0; }
  #recipeArea .title:before {
    content: "";
    display: block;
    width: calc(60 / 390 * 100%);
    background: url(../img/icon_recipe.png) center top no-repeat;
    background-size: contain;
    margin: auto;
    padding: calc(73 / 390 * 100%) 0 0 0; }
#recipeArea .selected {
  margin: 0 0 calc(15 / 390 * 100%) 0; }
  #recipeArea .selected .box {
    overflow: hidden;
    position: relative;
    width: calc(340 / 390 * 100%);
    background-color: #0C92CC;
    margin: 0 auto;
    padding: calc(164 / 390 * 100%) 0 0 0;
    border: 1px solid #949494;
    border-radius: 2rem; }
    #recipeArea .selected .box:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: url(../img/banner_selected_sp.png) center center no-repeat;
      background-size: contain;
      padding: calc(164 / 340 * 100%) 0 0 0; }
    #recipeArea .selected .box:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: calc(82 / 340 * 100%);
      background: url(../img/banner_selected_time_sp.png) center center no-repeat;
      background-size: contain;
      margin: calc(-5 / 340 * 100%) calc(-5 / 340 * 100%) 0 0;
      padding: calc(78 / 340 * 100%) 0 0 0; }
    #recipeArea .selected .box .textWrap {
      background-color: #ffffff;
      padding: 1.2rem 2.25rem 2.2rem 2.25rem;
      border-radius: 0 0 2rem 2rem; }
      #recipeArea .selected .box .textWrap .text {
        font-size: 2rem;
        line-height: 1.65;
        font-weight: 700; }
        #recipeArea .selected .box .textWrap .text .small {
          font-size: 1.8rem;
          line-height: 1;
          font-weight: 400; }
#recipeArea .recipe .box {
  position: relative;
  width: calc(340 / 390 * 100%);
  background-color: #ffffff;
  margin: 0 auto;
  padding: calc(16 / 390 * 100%) 0;
  border: 1px solid #949494;
  border-radius: 2rem;
  box-sizing: border-box; }
  #recipeArea .recipe .box .boxHeader .boxTitle {
    font-size: 2.4rem;
    line-height: 1.42;
    font-weight: 700;
    text-align: center;
    margin: 0 0 calc(27 / 340* 100%) 0; }
    #recipeArea .recipe .box .boxHeader .boxTitle .small {
      font-size: 1.8rem;
      line-height: 1.89;
      font-weight: 500; }
  #recipeArea .recipe .box .boxHeader .month {
    margin: 0 0 calc(15 / 340* 100%) 0; }
    #recipeArea .recipe .box .boxHeader .month .list {
      width: calc(318 / 340 * 100%);
      margin: auto; }
      #recipeArea .recipe .box .boxHeader .month .list .slick-track {
        transform: unset !important; }
      #recipeArea .recipe .box .boxHeader .month .list .item {
        width: calc(100 / 318 * 100%) !important;
        font-size: 1.2rem;
        line-height: 1;
        font-weight: 500;
        text-align: center;
        background-color: #ffffff;
        margin: 0 0 calc(4 / 318 * 100%) calc(4 / 318 * 100%);
        padding: 1em 0;
        border: 4px solid #00A7EB;
        border-radius: 0.5rem;
        box-sizing: border-box; }
        #recipeArea .recipe .box .boxHeader .month .list .item:nth-child(3n+1) {
          margin-left: 0; }
        #recipeArea .recipe .box .boxHeader .month .list .item.slick-current {
          color: #ffffff;
          background-color: #00A7EB; }
  #recipeArea .recipe .box .slideWrap {
    width: calc(322 / 340 * 100%);
    margin: auto;
    padding: 0 0 8rem 0; }
    #recipeArea .recipe .box .slideWrap .slide .item {
      display: flex; }
      #recipeArea .recipe .box .slideWrap .slide .item .inner {
        position: relative;
        font-size: 1.1rem;
        line-height: 1;
        flex-basis: 50%;
        padding: 0 0  2.4em 0; }
        #recipeArea .recipe .box .slideWrap .slide .item .inner .image {
          position: relative; }
          #recipeArea .recipe .box .slideWrap .slide .item .inner .image figcaption {
            position: absolute;
            bottom: 0;
            left: 0;
            font-size: 1rem;
            line-height: 1.8;
            font-weight: 700;
            background-color: #ffffff;
            margin: 0 0 -0.7em 0;
            padding: 0.6em 0.8em 0;
            border-radius: 2em 2em 0 0; }
            #recipeArea .recipe .box .slideWrap .slide .item .inner .image figcaption .num {
              font-size: 1.8rem;
              line-height: 1; }
        #recipeArea .recipe .box .slideWrap .slide .item .inner .text {
          font-size: 1.2rem;
          line-height: 1.33;
          text-align: center;
          padding: 1.2em 0.5em 1.4em 0.5em; }
        #recipeArea .recipe .box .slideWrap .slide .item .inner .buttonArea {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
          #recipeArea .recipe .box .slideWrap .slide .item .inner .buttonArea .button {
            width: calc(124 / 161 * 100%);
            font-size: 1.1rem;
            line-height: 1;
            font-weight: 600; }
            #recipeArea .recipe .box .slideWrap .slide .item .inner .buttonArea .button .icon:after {
              right: 0.8em;
              transform: rotate(0); }

@media screen and (min-width: 768px) {
  #recipeArea .content {
    padding: calc(115 / 1440 * 100%) 0 calc(62 / 1440 * 100%) 0; }
  #recipeArea .contentInner {
    max-width: 744px; }
  #recipeArea .title {
    font-size: 4rem;
    line-height: 1.15;
    margin: 0 0 calc(74 / 724 * 100%) 0; }
    #recipeArea .title:before {
      width: calc(60 / 724 * 100%);
      padding: calc(91 / 724 * 100%) 0 0 0; }
  #recipeArea .selected {
    margin: 0 0 calc(35 / 724 * 100%) 0; }
    #recipeArea .selected .box {
      width: 100%;
      padding: 0 0 0 50%;
      border-radius: 2rem;
      box-sizing: border-box; }
      #recipeArea .selected .box:before {
        bottom: 0;
        right: 50%;
        background: url(../img/banner_selected.png) center center no-repeat;
        background-size: contain;
        padding: 0; }
      #recipeArea .selected .box:after {
        display: none; }
      #recipeArea .selected .box .textWrap {
        padding: 5.2rem 2.25rem 6rem 3.5rem;
        border-radius: 0; }
        #recipeArea .selected .box .textWrap .text {
          font-size: 2rem;
          line-height: 1.65;
          font-weight: 700; }
          #recipeArea .selected .box .textWrap .text .small {
            font-size: 1.8rem;
            line-height: 1;
            font-weight: 400; }
  #recipeArea .recipe .box {
    width: 100%;
    padding: calc(36 / 724 * 100%) calc(63 / 724 * 100%); }
    #recipeArea .recipe .box .boxHeader {
      margin: 0 0 calc(22 / 598* 100%) 0; }
      #recipeArea .recipe .box .boxHeader .boxTitle {
        flex-basis: calc(215 / 598 * 100%);
        font-size: 2.2rem;
        line-height: 1.36;
        margin: 0 0 1em 0; }
        #recipeArea .recipe .box .boxHeader .boxTitle .small {
          font-size: 1.8rem;
          line-height: 1.67; }
      #recipeArea .recipe .box .boxHeader .month {
        flex-basis: calc(356 / 598 * 100%);
        margin: 0 0 calc(15 / 598* 100%) 0; }
        #recipeArea .recipe .box .boxHeader .month .list {
          width: 100%;
          margin: 0; }
          #recipeArea .recipe .box .boxHeader .month .list .slick-track {
            transform: unset !important; }
          #recipeArea .recipe .box .boxHeader .month .list .item {
            font-size: 1.4rem;
            line-height: 1;
            margin: 0 0 calc(4 / 356 * 100%) calc(4 / 356 * 100%);
            padding: 0.85em 0; }
            #recipeArea .recipe .box .boxHeader .month .list .item:nth-child(3n+1) {
              margin-left: 0; }
    #recipeArea .recipe .box .slideWrap {
      width: 100%;
      padding: 0 0 8rem 0; }
      #recipeArea .recipe .box .slideWrap .slide .item .inner {
        position: relative;
        font-size: 1.6rem;
        line-height: 1; }
        #recipeArea .recipe .box .slideWrap .slide .item .inner .image figcaption {
          font-size: 1.8rem;
          line-height: 1;
          margin: 0 0 -0.5em 0;
          padding: 0.8em 1.1em 0;
          border-radius: 2em 2em 0 0; }
          #recipeArea .recipe .box .slideWrap .slide .item .inner .image figcaption .num {
            font-size: 3.3rem;
            line-height: 1; }
        #recipeArea .recipe .box .slideWrap .slide .item .inner .text {
          min-height: calc(27 / 15 * 3em);
          font-size: 1.5rem;
          line-height: 1.8;
          padding: 1.2em 0.5em 0.9em 0.5em; }
        #recipeArea .recipe .box .slideWrap .slide .item .inner .buttonArea .button {
          width: calc(200 / 299 * 100%);
          font-size: 1.6rem;
          line-height: 1; }
          #recipeArea .recipe .box .slideWrap .slide .item .inner .buttonArea .button .icon:after {
            right: 0.6em; } }
@media screen and (min-width: 1000px) {
  #recipeArea .recipe .box .boxHeader {
    display: flex;
    align-items: center;
    justify-content: space-between; }
    #recipeArea .recipe .box .boxHeader .boxTitle {
      flex-basis: calc(215 / 598 * 100%);
      flex-shrink: 0;
      margin: 0 0 0.5em 0; }
    #recipeArea .recipe .box .boxHeader .month {
      flex-basis: calc(356 / 598 * 100%);
      max-width: 356px;
      margin: 0 0 calc(5 / 598* 100%) 0; } }
/* modalContentWrap */
.modalContentWrap {
  opacity: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  transform: translateY(100vh);
  transition: opacity 0.2s ease-out; }
  .modalContentWrap .bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(87, 180, 220, 0.8); }
  .modalContentWrap .modalContent {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%; }
    .modalContentWrap .modalContent .box {
      position: relative;
      width: calc(340 / 390 * 100%);
      max-width: 700px;
      max-height: 80vh;
      background-color: #ffffff;
      margin: auto;
      border-radius: 2rem; }
      .modalContentWrap .modalContent .box .scrollContent {
        overflow: auto;
        position: relative;
        width: 100%;
        height: 100%;
        max-height: 80vh;
        padding: calc(40 / 390 * 100%) 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch; }
      .modalContentWrap .modalContent .box .modalTitle {
        color: #0079AD;
        font-size: 2.4rem;
        line-height: 1.67;
        font-weight: 700;
        text-align: center;
        margin: 0 0 calc(20 / 340 * 100%) 0; }
      .modalContentWrap .modalContent .box .textWrap {
        width: calc(280 / 340 * 100%);
        margin: 0 auto 2rem auto; }
        .modalContentWrap .modalContent .box .textWrap .text {
          font-size: 1.6rem;
          line-height: 1.75; }
          .modalContentWrap .modalContent .box .textWrap .text .marker {
            color: #D53636;
            font-size: 1.8rem;
            line-height: 1.56;
            font-weight: 700;
            background: linear-gradient(transparent 0%, #FFF8A0 10%, #FFF8A0 90%, transparent 100%); }
      .modalContentWrap .modalContent .box .image {
        margin: auto; }
    .modalContentWrap .modalContent .closeButton {
      position: fixed;
      top: 1rem;
      right: 1rem;
      width: 2.5rem;
      height: 2.5rem;
      background: url(../img/btn_close.png) center center no-repeat;
      background-size: contain; }
  .modalContentWrap.close .bg {
    display: none; }
  .modalContentWrap.open {
    opacity: 1;
    transform: translateY(0); }

@media screen and (min-width: 768px) {
  .modalContentWrap .modalContent .box .scrollContent {
    padding: calc(20 / 700 * 100%) 0; }
  .modalContentWrap .modalContent .box .modalTitle {
    font-size: 2.6rem;
    line-height: 1.69;
    margin: 0 0 calc(20 / 700 * 100%) 0; }
  .modalContentWrap .modalContent .box .textWrap {
    width: calc(540 / 700 * 100%); }
    .modalContentWrap .modalContent .box .textWrap .text {
      font-size: 1.8rem;
      line-height: 1.78; }
      .modalContentWrap .modalContent .box .textWrap .text .marker {
        font-size: 1.8rem;
        line-height: 1.78; }
  .modalContentWrap .modalContent .closeButton {
    position: absolute;
    top: -3rem;
    right: -3rem; } }
#necessity01 .image {
  width: calc(310 / 340 * 100%); }

#necessity02 .image {
  width: calc(310 / 340 * 100%); }

#necessity03 .image {
  width: calc(310 / 340 * 100%); }

#check01 .image {
  width: calc(310 / 340 * 100%); }

#check02 .image {
  width: calc(310 / 340 * 100%); }

@media screen and (min-width: 768px) {
  #necessity01 .image {
    width: calc(370 / 700 * 100%); }

  #necessity02 .image {
    width: calc(351 / 700 * 100%); }

  #necessity03 .image {
    width: calc(618 / 700 * 100%); }

  #check01 .image {
    width: calc(307 / 700 * 100%); }

  #check02 .image {
    width: calc(316 / 700 * 100%); } }
#whatsnew01 .box,
#whatsnew02 .box,
#whatsnew03 .box {
  width: 100%;
  max-height: calc(95vh - 8rem); }
#whatsnew01 .comicSlide img,
#whatsnew02 .comicSlide img,
#whatsnew03 .comicSlide img {
  display: block;
  width: auto;
  max-height: calc(95vh - 8rem);
  margin: auto;
  box-sizing: border-box; }

@media screen and (min-width: 768px) {
  #whatsnew01 .box,
  #whatsnew02 .box,
  #whatsnew03 .box {
    width: calc(340 / 390 * 100%); } }