@charset "UTF-8";
#oatmealLP .container {
  padding-bottom: 0;
}
#oatmealLP .container a, #oatmealLP .container abbr, #oatmealLP .container acronym, #oatmealLP .container address, #oatmealLP .container applet, #oatmealLP .container article, #oatmealLP .container aside, #oatmealLP .container audio, #oatmealLP .container b, #oatmealLP .container big, #oatmealLP .container blockquote, #oatmealLP .container body, #oatmealLP .container caption, #oatmealLP .container canvas, #oatmealLP .container center, #oatmealLP .container cite, #oatmealLP .container code,
#oatmealLP .container dd, #oatmealLP .container del, #oatmealLP .container details, #oatmealLP .container dfn, #oatmealLP .container dialog, #oatmealLP .container div, #oatmealLP .container dl, #oatmealLP .container dt, #oatmealLP .container em, #oatmealLP .container embed, #oatmealLP .container fieldset, #oatmealLP .container figcaption, #oatmealLP .container figure, #oatmealLP .container form, #oatmealLP .container footer, #oatmealLP .container header, #oatmealLP .container hgroup, #oatmealLP .container h1, #oatmealLP .container h2, #oatmealLP .container h3, #oatmealLP .container h4, #oatmealLP .container h5, #oatmealLP .container h6, #oatmealLP .container html, #oatmealLP .container i, #oatmealLP .container iframe, #oatmealLP .container img, #oatmealLP .container ins, #oatmealLP .container kbd, #oatmealLP .container label, #oatmealLP .container legend, #oatmealLP .container li, #oatmealLP .container mark, #oatmealLP .container menu, #oatmealLP .container nav, #oatmealLP .container object, #oatmealLP .container ol, #oatmealLP .container output, #oatmealLP .container p, #oatmealLP .container pre, #oatmealLP .container q, #oatmealLP .container ruby, #oatmealLP .container s, #oatmealLP .container samp, #oatmealLP .container section, #oatmealLP .container small, #oatmealLP .container span, #oatmealLP .container strike, #oatmealLP .container strong, #oatmealLP .container sub, #oatmealLP .container summary, #oatmealLP .container sup, #oatmealLP .container tt, #oatmealLP .container table, #oatmealLP .container tbody, #oatmealLP .container textarea, #oatmealLP .container tfoot, #oatmealLP .container thead, #oatmealLP .container time, #oatmealLP .container tr, #oatmealLP .container th, #oatmealLP .container td, #oatmealLP .container u, #oatmealLP .container ul, #oatmealLP .container var, #oatmealLP .container video {
  color: inherit;
  text-align: inherit;
}
#oatmealLP .container .dummy {
  display: none;
}
#oatmealLP {
  /* FONT ------------------------------------------->
  'Roboto': 100 - 900
  'Noto Sans JP': 100 - 900
  Thin: 100 / .w_thin
  ExtraLight: 200 / .w_eLight
  Light: 300 / .w_light
  Regular: 400 / .w_reg
  Medium: 500 / .w_med
  SemiBold: 600 / .w_sBold
  Bold: 700 / .w_bold
  ExtraBold: 800 / .w_eBold
  Black: 900 / .w_black

  /*-------------------------------------------> font */
}
#oatmealLP .w_thin {
  font-weight: 100;
}
#oatmealLP .w_eLight {
  font-weight: 200;
}
#oatmealLP .w_light {
  font-weight: 300;
}
#oatmealLP .w_reg {
  font-weight: 400;
}
#oatmealLP .w_med {
  font-weight: 500;
}
#oatmealLP .w_sBold, #oatmealLP .f_def {
  font-weight: 600;
}
#oatmealLP .w_bold {
  font-weight: 700;
}
#oatmealLP .w_eBold {
  font-weight: 800;
}
#oatmealLP .w_black {
  font-weight: 900;
}
#oatmealLP {
  /*-------------------------------------------> html / body style */
}
#oatmealLP .container * {
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-variant: normal;
}
#oatmealLP .container {
  background: #FFF;
  width: 100%;
  min-width: 100%;
  color: #4a2200;
  font-family: YakuHanJP, "Noto Sans JP", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  #oatmealLP .container .pc {
    display: block;
  }
  #oatmealLP .container .sp {
    display: none;
  }
  #oatmealLP .container img.pc, #oatmealLP .container .svg.pc {
    display: inline;
  }
}
@media screen and (max-width: 767px) {
  #oatmealLP .container .pc {
    display: none;
  }
  #oatmealLP .container .sp {
    display: block;
  }
  #oatmealLP .container img.pc {
    display: none;
  }
  #oatmealLP .container img.sp, #oatmealLP .container .svg.sp {
    display: inline;
  }
}
#oatmealLP .hide {
  display: none;
}
#oatmealLP {
  /*-------------------------------------------> link style */
}
#oatmealLP a {
  color: inherit;
  outline: none;
  cursor: pointer;
}
#oatmealLP a:link {
  text-decoration: none;
}
#oatmealLP a:visited {
  text-decoration: none;
}
#oatmealLP a:hover {
  text-decoration: none;
}
#oatmealLP a:active {
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  #oatmealLP .OverOpacity,
  #oatmealLP .OverOpacityGroup a {
    opacity: 1;
    -webkit-transition: opacity 0.15s ease-out;
    transition: opacity 0.15s ease-out;
  }
  #oatmealLP .OverOpacity:hover,
  #oatmealLP .OverOpacityGroup a:hover {
    opacity: 0.4;
  }
  #oatmealLP .linkUnderline:hover,
  #oatmealLP .linkUnderlineGroup a:hover {
    text-decoration: underline;
  }
}
#oatmealLP {
  /*-------------------------------------------> Common style */
}
#oatmealLP .inner {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  container-type: inline-size;
}
#oatmealLP .inner .content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  #oatmealLP .inner {
    max-width: initial;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
}
#oatmealLP .cqBase {
  container-type: inline-size;
}
#oatmealLP img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
#oatmealLP br.pc {
  display: block;
}
#oatmealLP br.pc.sp {
  display: block;
}
#oatmealLP br.tab {
  display: none;
}
#oatmealLP br.tab.pc {
  display: block;
}
#oatmealLP br.tab.sp {
  display: none;
}
#oatmealLP br.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  #oatmealLP br.pc {
    display: none;
  }
  #oatmealLP br.tab {
    display: none;
  }
  #oatmealLP br.tab.pc {
    display: none;
  }
  #oatmealLP br.tab.sp {
    display: block;
  }
  #oatmealLP br.sp {
    display: block;
  }
  #oatmealLP br.sp.pc {
    display: block;
  }
}
#oatmealLP {
  /*-------------------------------------------> Wave BackGround */
}
#oatmealLP .sectionBlock {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#oatmealLP .sectionBlock:has(.wavyClip) {
  margin-top: -70px;
}
@media screen and (max-width: 767px) {
  #oatmealLP .sectionBlock:has(.wavyClip) {
    margin-top: -12.2666666667%;
  }
}
#oatmealLP .sectionBlock .bgLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-repeat: repeat;
  background-position: center top;
}
@media screen and (max-width: 767px) {
  #oatmealLP .sectionBlock .bgLayer {
    background-size: 100% auto;
    background-repeat: repeat-y;
  }
}
#oatmealLP .sectionBlock .wavyClip {
  -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201732%203000%22%3E%3Cdefs%3E%3Cstyle%3E%20%20%20%20%20%20.cls-1%20%7B%20%20%20%20%20%20%20%20fill%3A%20%2379ac2b%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M1732%2C0c-139.77%2C0-216.42%2C24.88-278.01%2C44.87-47.13%2C15.3-78.27%2C25.41-155%2C25.41s-107.86-10.11-154.99-25.41C1082.41%2C24.88%2C1005.77%2C0%2C865.99%2C0s-216.42%2C24.88-278%2C44.87c-47.13%2C15.3-78.27%2C25.41-154.99%2C25.41s-107.86-10.11-154.99-25.41C216.42%2C24.88%2C139.77%2C0%2C0%2C0v3000h1732V0Z%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201732%203000%22%3E%3Cdefs%3E%3Cstyle%3E%20%20%20%20%20%20.cls-1%20%7B%20%20%20%20%20%20%20%20fill%3A%20%2379ac2b%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M1732%2C0c-139.77%2C0-216.42%2C24.88-278.01%2C44.87-47.13%2C15.3-78.27%2C25.41-155%2C25.41s-107.86-10.11-154.99-25.41C1082.41%2C24.88%2C1005.77%2C0%2C865.99%2C0s-216.42%2C24.88-278%2C44.87c-47.13%2C15.3-78.27%2C25.41-154.99%2C25.41s-107.86-10.11-154.99-25.41C216.42%2C24.88%2C139.77%2C0%2C0%2C0v3000h1732V0Z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 1732px auto;
          mask-size: 1732px auto;
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-position: center top;
          mask-position: center top;
}
@media screen and (max-width: 767px) {
  #oatmealLP .sectionBlock .wavyClip {
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20375%205000%22%3E%3Cpath%20id%3D%22wave%22%20d%3D%22M0%2C23.04v4976.96h375V23.04C250%2C102.85%2C125-56.77%2C0%2C23.04Z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20375%205000%22%3E%3Cpath%20id%3D%22wave%22%20d%3D%22M0%2C23.04v4976.96h375V23.04C250%2C102.85%2C125-56.77%2C0%2C23.04Z%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
  }
}
#oatmealLP .sectionBlock .contentLayer {
  position: relative;
  z-index: 2;
  padding: 70px 0;
}
@media screen and (max-width: 767px) {
  #oatmealLP .sectionBlock .contentLayer {
    padding: 12.2666666667% 0;
  }
}
#oatmealLP .sectionBlock .sectionTitle {
  text-align: center;
}
@media screen and (min-width: 768px) {
  #oatmealLP .sectionBlock .sectionTitle img {
    width: min(30.5208333333cqw, 586px);
  }
}
#oatmealLP #Lineup .bgLayer {
  background-image: url(../images/lineup_bg@pc.jpg);
}
@media screen and (max-width: 767px) {
  #oatmealLP #Lineup .bgLayer {
    background-image: url(../images/lineup_bg@sp.jpg);
  }
}
#oatmealLP #Point .bgLayer {
  background-image: url(../images/point_bg@pc.jpg);
}
@media screen and (max-width: 767px) {
  #oatmealLP #Point .bgLayer {
    background-image: url(../images/point_bg@sp.jpg);
  }
}
#oatmealLP #Concept .bgLayer {
  background-image: url(../images/concept_bg@pc.jpg);
}
@media screen and (max-width: 767px) {
  #oatmealLP #Concept .bgLayer {
    background-image: url(../images/concept_bg@sp.jpg);
  }
}
#oatmealLP #Now .bgLayer {
  background-image: none;
  background-color: #79ac2b;
}
#oatmealLP #Oatmeal .bgLayer {
  background-image: none;
  background-color: #f3dc94;
}
#oatmealLP #Develop .bgLayer {
  background-image: url(../images/develop_bg@pc.png);
  background-color: #e6cfb5;
}
@media screen and (max-width: 767px) {
  #oatmealLP #Develop .bgLayer {
    background-image: url(../images/develop_bg@sp.jpg);
  }
}
#oatmealLP #Feature .bgLayer {
  background-image: url(../images/feature_bg@pc.jpg);
}
@media screen and (max-width: 767px) {
  #oatmealLP #Feature .bgLayer {
    background-image: url(../images/feature_bg@sp.jpg);
  }
}
#oatmealLP {
  /*-------------------------------------------> Dot Line */
}
#oatmealLP .dotLine {
  position: relative;
  display: inline-block;
}
#oatmealLP .dotLine::after {
  content: "";
  display: block;
  width: calc(100% + 0.4em);
  height: 0.3125cqw;
  background-image: url(../images/line_dot_short.svg);
  background-repeat: space no-repeat;
  background-position: left top;
  background-size: 0.8333333333cqw 0.3125cqw;
  position: absolute;
  left: -0.2em;
  bottom: -0.3125cqw;
}
@media screen and (max-width: 767px) {
  #oatmealLP .dotLine::after {
    height: 1.3333333333vw;
    bottom: -1.0666666667vw;
    left: 50%;
    translate: -50% 0;
    background-image: url(../images/line_dot_short@sp.svg?v=2);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 1.3333333333vw;
  }
}
#oatmealLP {
  /*-------------------------------------------> Marker */
}
#oatmealLP .marker {
  position: relative;
  white-space: nowrap;
}
#oatmealLP .marker::after {
  content: "";
  display: block;
  width: calc(100% + 0.4em);
  height: 0.4em;
  position: absolute;
  left: -0.2em;
  bottom: 0;
  z-index: -1;
  background: #79ac2b;
}
#oatmealLP {
  /*
  @media screen and ($over-tab) {}
  @media screen and ($less-tab) {}
  */
  /*-------------------------------------------> #Cover */
}
#oatmealLP #Cover {
  text-align: center;
}
#oatmealLP #Cover img {
  width: 100%;
  height: auto;
  max-width: inherit;
}
#oatmealLP {
  /*-------------------------------------------> #Lineup */
}
#oatmealLP #Lineup .contentLayer {
  padding-top: 0;
}
#oatmealLP #Lineup .inner {
  padding-top: 4.6875%;
}
#oatmealLP #Lineup .sectionTitle {
  margin-bottom: 3.125%;
}
#oatmealLP #Lineup .content {
  width: 61.0416666667cqw;
  padding-bottom: 3.3854166667%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#oatmealLP #Lineup .content .block {
  width: 42.662116041%;
  text-align: center;
}
#oatmealLP #Lineup .content .block .image img {
  width: 51.2%;
}
#oatmealLP #Lineup .content .block dl {
  margin-top: 6%;
}
#oatmealLP #Lineup .content .block dl dt img {
  width: 76%;
}
#oatmealLP #Lineup .content .block dl dd {
  font-size: 28px; /* legacy */
  font-size: 1.4583333333cqw;
  line-height: 1.8571428571;
  letter-spacing: 0em;
}
#oatmealLP #Lineup .content .block dl dd::before {
  display: block;
  width: 0;
  height: 0;
  margin-top: -0.4285714286em;
  content: "";
}
#oatmealLP #Lineup .content .block dl dd::after {
  display: block;
  width: 0;
  height: 0;
  margin-bottom: -0.4285714286em;
  content: "";
}
#oatmealLP #Lineup .content .block dl dd {
  margin-top: 6%;
}
@media screen and (max-width: 767px) {
  #oatmealLP #Lineup .inner {
    padding-top: 16vw;
  }
  #oatmealLP #Lineup .sectionTitle {
    margin-bottom: 6.9333333333vw;
  }
  #oatmealLP #Lineup .content {
    width: 100%;
    padding-bottom: 4vw;
    display: block;
  }
  #oatmealLP #Lineup .content .block {
    width: 100%;
    text-align: center;
  }
  #oatmealLP #Lineup .content .block + .block {
    margin-top: 10.1333333333vw;
  }
  #oatmealLP #Lineup .content .block .image img {
    width: 33.7777777778vw;
  }
  #oatmealLP #Lineup .content .block dl {
    margin-top: 3.9111111111vw;
  }
  #oatmealLP #Lineup .content .block dl dt img {
    width: 50.1333333333vw;
  }
  #oatmealLP #Lineup .content .block dl dd {
    font-size: 14px; /* legacy */
    font-size: 3.7333333333vw;
    line-height: 1.8571428571;
    letter-spacing: 0.05em;
  }
  #oatmealLP #Lineup .content .block dl dd::before {
    display: block;
    width: 0;
    height: 0;
    margin-top: -0.4285714286em;
    content: "";
  }
  #oatmealLP #Lineup .content .block dl dd::after {
    display: block;
    width: 0;
    height: 0;
    margin-bottom: -0.4285714286em;
    content: "";
  }
  #oatmealLP #Lineup .content .block dl dd {
    margin-top: 3.7333333333vw;
  }
}
#oatmealLP {
  /*-------------------------------------------> #Point */
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  #oatmealLP #Point .bgLayer {
    background-repeat: repeat;
  }
}
#oatmealLP #Point .contentLayer {
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  #oatmealLP #Point .contentLayer::before {
    content: "";
    display: block;
    width: 800px;
    height: 100%;
    background-image: url(../images/point_bg_parts@tab.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    position: absolute;
    top: 1.0416666667%;
    left: 50%;
    translate: -50% 0;
  }
}
@media screen and (min-width: 1201px) {
  #oatmealLP #Point .contentLayer::before, #oatmealLP #Point .contentLayer::after {
    content: "";
    display: block;
    width: min(100%, 1920px);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    position: absolute;
    left: 50%;
    translate: -50% 0;
  }
  #oatmealLP #Point .contentLayer::before {
    background-image: url(../images/point_bg_top@pc.png);
    top: 0;
    height: min(14.0104166667cqw, 269px);
  }
  #oatmealLP #Point .contentLayer::after {
    background-image: url(../images/point_bg_bottom@pc.png);
    bottom: min(-1.5625cqw, -30px);
    height: min(11.8229166667cqw, 227px);
  }
}
@media screen and (max-width: 767px) {
  #oatmealLP #Point .contentLayer::after {
    display: none;
  }
  #oatmealLP #Point .contentLayer::before {
    content: "";
    display: block;
    background-image: url(../images/point_bg_parts@sp.png);
    background-repeat: no-repeat;
    background-position: 0 17.7777777778vw;
    background-size: 100% auto;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    translate: 0;
  }
}
#oatmealLP #Point .content {
  width: 41.6666666667cqw;
  padding-top: 9.6875%;
  padding-bottom: 8.0729166667%;
}
#oatmealLP #Point .content ol {
  width: 82.5%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
#oatmealLP #Point .content .block {
  text-align: center;
}
#oatmealLP #Point .content .block .fukidashi {
  position: relative;
  margin-bottom: 1.5625cqw;
  height: 6.25cqw;
}
#oatmealLP #Point .content .block .fukidashi img {
  position: absolute;
  width: 15.625cqw;
  top: 0;
  left: calc(50% - 14.0625cqw);
}
#oatmealLP #Point .content .block dl dt span {
  display: inline-block;
  font-size: 34px; /* legacy */
  font-size: 1.7708333333cqw;
  line-height: 1.5882352941;
  letter-spacing: -0.05em;
  padding: 0 0.2em;
  color: #FFFFFF;
  background: #79ac2b;
}
#oatmealLP #Point .content .block dl dt span:nth-child(n+2) {
  margin-top: 5px;
}
#oatmealLP #Point .content .block dl dd {
  font-size: 27px; /* legacy */
  font-size: 1.40625cqw;
  line-height: 1.6296296296;
  letter-spacing: 0.05em;
  padding-top: 3.6458333333cqw;
  background: url(../images/point_arrow.svg) no-repeat center 1.1458333333cqw;
  background-size: 1.9791666667cqw auto;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  #oatmealLP #Point .content {
    width: min(100%, 800px);
    padding-top: max(130px, 6.7708333333%);
    padding-bottom: max(150px, 7.8125%);
    padding-left: 40px;
    padding-right: 40px;
  }
  #oatmealLP #Point .content .block01, #oatmealLP #Point .content .block03 {
    margin-right: auto;
  }
  #oatmealLP #Point .content .block02 {
    margin-left: auto;
  }
  #oatmealLP #Point .content .block {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
  #oatmealLP #Point .content .block + .block {
    margin-top: 9.0909090909%;
  }
  #oatmealLP #Point .content .block .fukidashi {
    margin-bottom: 30px;
    height: 120px;
  }
  #oatmealLP #Point .content .block .fukidashi img {
    width: 300px;
    top: 0;
    left: calc(50% - 270px);
  }
  #oatmealLP #Point .content .block dl dt span {
    font-size: 34px;
    line-height: 1.5882352941;
    letter-spacing: -0.05em;
  }
  #oatmealLP #Point .content .block dl dd {
    font-size: 27px;
    line-height: 1.6296296296;
    letter-spacing: 0.05em;
    padding-top: 70px;
    background: url(../images/point_arrow.svg) no-repeat center 22px;
    background-size: 38px auto;
  }
  #oatmealLP #Point .content .block dl dd .dotLine::after {
    height: 6px;
    bottom: -6px;
    background-size: 16px 6px;
  }
}
@media screen and (min-width: 1201px) {
  #oatmealLP #Point .content {
    width: 78.125cqw;
  }
  #oatmealLP #Point .content ol {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
@media screen and (max-width: 767px) {
  #oatmealLP #Point .content {
    width: 100%;
    padding-top: 16.5333333333vw;
    padding-bottom: 18.1333333333vw;
  }
  #oatmealLP #Point .content ol {
    width: 100%;
    display: block;
  }
  #oatmealLP #Point .content ol li + li {
    margin-top: 16vw;
  }
  #oatmealLP #Point .content .block {
    text-align: center;
  }
  #oatmealLP #Point .content .block .fukidashi {
    position: relative;
    margin-bottom: 0;
    height: 26.6666666667vw;
  }
  #oatmealLP #Point .content .block .fukidashi img {
    position: absolute;
    width: 59.2vw;
    top: 0;
    left: calc(50% - 43.2vw);
  }
  #oatmealLP #Point .content .block dl dt span {
    display: inline-block;
    font-size: 29px; /* legacy */
    font-size: 7.7333333333vw;
    line-height: 1.3793103448;
    letter-spacing: 0.02em;
  }
  #oatmealLP #Point .content .block dl dt span:nth-child(n+2) {
    margin-top: 1.0666666667vw;
  }
  #oatmealLP #Point .content .block dl dd {
    font-size: 21px; /* legacy */
    font-size: 5.6vw;
    line-height: 1.619047619;
    letter-spacing: 0.02em;
    padding-top: 10.6666666667vw;
    background: url(../images/point_arrow.svg) no-repeat center 3.7333333333vw;
    background-size: 5.8666666667vw auto;
  }
  #oatmealLP #Point .content .block.block01 dl dd .dotLine::after {
    background-image: url(../images/point_01_dotline@sp.svg);
    width: 61.6vw;
  }
  #oatmealLP #Point .content .block.block02 .fukidashi img {
    width: 59.7333333333vw;
    top: 0;
    left: calc(50% - 16.2666666667vw);
  }
  #oatmealLP #Point .content .block.block02 dl dd .dotLine::after {
    background-image: url(../images/point_02_dotline@sp.svg);
    width: 78.9333333333vw;
  }
  #oatmealLP #Point .content .block.block03 dl dd .dotLine.dotLine01::after {
    background-image: url(../images/point_03_dotline_1@sp.svg);
    width: 54.4vw;
  }
  #oatmealLP #Point .content .block.block03 dl dd .dotLine.dotLine02::after {
    background-image: url(../images/point_03_dotline_2@sp.svg);
    width: 45.8666666667vw;
  }
}
#oatmealLP {
  /*-------------------------------------------> #Concept */
}
#oatmealLP #Concept .inner {
  padding-top: 5.7291666667%;
  padding-bottom: 6.25%;
}
#oatmealLP #Concept .content {
  width: 76.0416666667cqw;
  margin-top: 3.90625%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#oatmealLP #Concept .content .copy {
  width: min(100% - 522px - 40px, 810px);
  width: 42.1875cqw;
}
#oatmealLP #Concept .content .textarea {
  width: 522px;
  width: 27.1875cqw;
}
#oatmealLP #Concept .content .textarea .blockTitle {
  font-size: 36px; /* legacy */
  font-size: 1.875cqw;
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 2.34375cqw;
}
#oatmealLP #Concept .content .textarea .blockTitle .dotLine::after {
  bottom: -1.0416666667cqw;
}
#oatmealLP #Concept .content .textarea .text_lp {
  font-size: 28px; /* legacy */
  font-size: 1.4583333333cqw;
  line-height: 2.0357142857;
  letter-spacing: -0.05em;
}
#oatmealLP #Concept .content .textarea .text_lp::before {
  display: block;
  width: 0;
  height: 0;
  margin-top: -0.5178571429em;
  content: "";
}
#oatmealLP #Concept .content .textarea .text_lp::after {
  display: block;
  width: 0;
  height: 0;
  margin-bottom: -0.5178571429em;
  content: "";
}
@media screen and (max-width: 767px) {
  #oatmealLP #Concept .inner {
    padding-top: 13.3333333333vw;
    padding-bottom: 26.6666666667vw;
  }
  #oatmealLP #Concept .content {
    width: 100%;
    margin-top: 10.6666666667vw;
    display: block;
    text-align: center;
  }
  #oatmealLP #Concept .content .copy {
    width: 100%;
    margin-bottom: 14.6666666667vw;
  }
  #oatmealLP #Concept .content .copy img {
    width: 77.3333333333vw;
  }
  #oatmealLP #Concept .content .textarea {
    width: 100%;
  }
  #oatmealLP #Concept .content .textarea .blockTitle {
    font-size: 18px; /* legacy */
    font-size: 4.8vw;
    line-height: 1;
    letter-spacing: 0.02em;
    margin-bottom: 13.3333333333vw;
  }
  #oatmealLP #Concept .content .textarea .blockTitle .dotLine::after {
    background-image: url(../images/concept_dotline@sp.svg);
    width: 73.0666666667vw;
    bottom: -4.2666666667vw;
  }
  #oatmealLP #Concept .content .textarea .image {
    margin-bottom: 12vw;
  }
  #oatmealLP #Concept .content .textarea .image img {
    width: 51.2vw;
  }
  #oatmealLP #Concept .content .textarea .text_lp {
    font-size: 16px; /* legacy */
    font-size: 4.2666666667vw;
    line-height: 2;
    letter-spacing: 0.02em;
  }
  #oatmealLP #Concept .content .textarea .text_lp::before {
    display: block;
    width: 0;
    height: 0;
    margin-top: -0.5em;
    content: "";
  }
  #oatmealLP #Concept .content .textarea .text_lp::after {
    display: block;
    width: 0;
    height: 0;
    margin-bottom: -0.5em;
    content: "";
  }
  #oatmealLP #Concept .content .textarea .text_lp {
    text-align: left;
    width: 72vw;
    margin-left: auto;
    margin-right: auto;
  }
}
#oatmealLP {
  /*-------------------------------------------> #Now */
}
#oatmealLP #Now .inner {
  padding-top: 1.875%;
  padding-bottom: 3.125%;
}
#oatmealLP #Now .content {
  margin-top: 2.7604166667%;
  position: relative;
}
#oatmealLP #Now .content::after, #oatmealLP #Now .content::before {
  position: absolute;
  z-index: 100;
  top: -9.375cqw;
  content: "";
  display: block;
  width: 17.3958333333%;
  height: 52.65625cqw;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: left center;
  pointer-events: none;
}
#oatmealLP #Now .content::before {
  background-image: url(../images/now_bg_left@pc.png);
  left: -1.0416666667cqw;
}
#oatmealLP #Now .content::after {
  background-image: url(../images/now_bg_right@pc.png);
  right: -1.0416666667cqw;
}
#oatmealLP #Now .content .frame {
  position: relative;
  z-index: 10;
  width: min(100%, 1072px);
  width: 55.8333333333cqw;
  margin-left: auto;
  margin-right: auto;
}
#oatmealLP #Now .content .figArea {
  background: #e6ffc3;
  padding: 1.5625cqw;
  text-align: center;
}
#oatmealLP #Now .content .fukidashi, #oatmealLP #Now .content .fig {
  width: min(82.0895522388%, 880px);
  width: 45.8333333333cqw;
  margin-left: auto;
  margin-right: auto;
}
#oatmealLP #Now .content .fukidashi {
  position: relative;
  z-index: 1;
  margin-bottom: 4.0909090909%;
  height: 7.5cqw;
  background: url(../images/now_frame@pc.svg) no-repeat left top;
  background-size: 100% 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#oatmealLP #Now .content .fukidashi .text_lp {
  font-size: 31px; /* legacy */
  font-size: 1.6145833333cqw;
  line-height: 1.4838709677;
  letter-spacing: 0.1em;
  margin-top: -0.8333333333cqw;
}
#oatmealLP #Now .content .fukidashi .text_lp .marker {
  position: relative;
  display: inline-block;
}
#oatmealLP #Now .content .fukidashi .text_lp .marker .note {
  position: absolute;
  bottom: -1em;
  right: 0;
  font-size: 14px; /* legacy */
  font-size: 0.7291666667cqw;
  line-height: 1;
  letter-spacing: -0.05em;
}
#oatmealLP #Now .content .fig .note {
  font-size: 12px; /* legacy */
  font-size: 0.625cqw;
  line-height: 1.5;
  letter-spacing: 0em;
  text-align: right;
  margin-top: 0.5em;
}
@media screen and (max-width: 767px) {
  #oatmealLP #Now .inner {
    position: relative;
    padding-top: 8vw;
    padding-bottom: 8vw;
  }
  #oatmealLP #Now .inner::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/now_bg@sp.png) no-repeat center 32vw;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
  #oatmealLP #Now .content {
    margin-top: 4vw;
    position: relative;
    z-index: 100;
  }
  #oatmealLP #Now .content::before, #oatmealLP #Now .content::after {
    display: none;
  }
  #oatmealLP #Now .content .frame {
    position: relative;
    z-index: 100;
    width: 81.3333333333vw;
    margin-left: auto;
    margin-right: auto;
  }
  #oatmealLP #Now .content .figArea {
    background: #e6ffc3;
    padding: 6.4vw 4.8vw 4.8vw;
    text-align: center;
  }
  #oatmealLP #Now .content .fukidashi, #oatmealLP #Now .content .fig {
    width: 69.8666666667vw;
    margin-left: auto;
    margin-right: auto;
  }
  #oatmealLP #Now .content .fukidashi {
    position: relative;
    z-index: 1;
    margin-bottom: 3.4666666667vw;
    height: 25.7777777778vw;
    min-height: initial;
    background: url(../images/now_frame@sp.svg) no-repeat left top;
    background-size: 100% 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #oatmealLP #Now .content .fukidashi .text_lp {
    font-size: 15px; /* legacy */
    font-size: 4vw;
    line-height: 1.8666666667;
    letter-spacing: 0.1em;
    margin-top: -2.1333333333vw;
    white-space: nowrap;
  }
  #oatmealLP #Now .content .fukidashi .text_lp .marker {
    position: relative;
    display: inline-block;
  }
  #oatmealLP #Now .content .fukidashi .text_lp .marker::after {
    bottom: 0.2em;
  }
  #oatmealLP #Now .content .fukidashi .text_lp .marker .note {
    position: absolute;
    bottom: -1em;
    right: 0;
    font-size: 7px; /* legacy */
    font-size: 1.8666666667vw;
    line-height: 1;
    letter-spacing: -0.05em;
  }
  #oatmealLP #Now .content .fig .note {
    font-size: 6px; /* legacy */
    font-size: 1.6vw;
    line-height: 1.5;
    letter-spacing: 0em;
    text-align: right;
    margin-top: 0.5em;
  }
}
#oatmealLP {
  /*-------------------------------------------> #Oatmeal */
}
#oatmealLP #Oatmeal .contentLayer {
  container-type: inline-size;
}
#oatmealLP #Oatmeal .contentLayer::before, #oatmealLP #Oatmeal .contentLayer::after {
  position: absolute;
  z-index: 10;
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left top;
}
#oatmealLP #Oatmeal .contentLayer::before {
  right: 50%;
  top: min(5.46875cqw, 105px);
  translate: max(-29.1666666667cqw, -560px) 0;
  width: min(31.3020833333cqw, 601px);
  height: min(22.2395833333cqw, 427px);
  background-image: url(../images/oatmeal_bg_left@pc.png);
}
#oatmealLP #Oatmeal .contentLayer::after {
  left: 50%;
  bottom: min(2.0833333333cqw, 40px);
  translate: min(14.84375cqw, 285px) 0;
  width: min(44.0104166667cqw, 845px);
  height: min(32.34375cqw, 621px);
  background-image: url(../images/oatmeal_bg_right@pc.png);
}
@media screen and (max-width: 767px) {
  #oatmealLP #Oatmeal .contentLayer::before {
    right: 0;
    top: 14.6666666667vw;
    translate: 0 0;
    width: 53.2444444444vw;
    height: 60.9777777778vw;
    padding-top: 0;
    background-image: url(../images/oatmeal_bg_right@sp.png);
  }
  #oatmealLP #Oatmeal .contentLayer::after {
    left: 0;
    bottom: 8vw;
    translate: 0 0;
    width: 49.8666666667vw;
    height: 98.7555555556vw;
    padding-top: 0;
    background-image: url(../images/oatmeal_bg_left@sp.png);
  }
}
#oatmealLP #Oatmeal .inner {
  position: relative;
  z-index: 100;
  padding-top: 4.4270833333%;
  padding-bottom: 5.7291666667%;
}
#oatmealLP #Oatmeal .content {
  width: 78.125cqw;
  padding-top: 4.6875%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#oatmealLP #Oatmeal .content .leftArea, #oatmealLP #Oatmeal .content .rightArea {
  width: 46.6666666667%;
}
#oatmealLP #Oatmeal .content .frame {
  background: #FFFFFF;
  border-radius: 1.7708333333cqw;
  padding: 10% 6.4285714286% 8.5714285714%;
  text-align: center;
}
#oatmealLP #Oatmeal .content .blockTitle {
  color: #79ac2b;
  font-size: 38px; /* legacy */
  font-size: 1.9791666667cqw;
  line-height: 1;
  letter-spacing: 0.1em;
}
#oatmealLP #Oatmeal .content .blockTitle .dotLine::after {
  bottom: -1.0416666667cqw;
}
#oatmealLP #Oatmeal .content .text_lp {
  font-size: 23px; /* legacy */
  font-size: 1.1979166667cqw;
  line-height: 1.8260869565;
  letter-spacing: 0em;
}
#oatmealLP #Oatmeal .content .text_lp::before {
  display: block;
  width: 0;
  height: 0;
  margin-top: -0.4130434783em;
  content: "";
}
#oatmealLP #Oatmeal .content .text_lp::after {
  display: block;
  width: 0;
  height: 0;
  margin-bottom: -0.4130434783em;
  content: "";
}
#oatmealLP #Oatmeal .content .text_lp {
  color: #000000;
  margin-top: 9.8360655738%;
}
#oatmealLP #Oatmeal .content .fig {
  margin-top: 7.2131147541%;
}
@media screen and (max-width: 767px) {
  #oatmealLP #Oatmeal .inner {
    position: relative;
    z-index: 100;
    padding-top: 10.6666666667vw;
    padding-bottom: 14.4vw;
  }
  #oatmealLP #Oatmeal .content {
    width: 100%;
    padding-top: 6.6666666667vw;
    display: block;
  }
  #oatmealLP #Oatmeal .content .leftArea, #oatmealLP #Oatmeal .content .rightArea {
    width: 81.3333333333vw;
    margin-left: auto;
    margin-right: auto;
  }
  #oatmealLP #Oatmeal .content .frame {
    background: #FFFFFF;
    border-radius: 5.3333333333vw;
    padding: 6.6666666667vw 0 8vw;
    text-align: center;
  }
  #oatmealLP #Oatmeal .content .blockTitle {
    color: #79ac2b;
    font-size: 22px; /* legacy */
    font-size: 5.8666666667vw;
    line-height: 1;
    letter-spacing: 0.1em;
  }
  #oatmealLP #Oatmeal .content .blockTitle .dotLine::after {
    bottom: -4.2666666667vw;
  }
  #oatmealLP #Oatmeal .content .text_lp {
    font-size: 14px; /* legacy */
    font-size: 3.7333333333vw;
    line-height: 2.2857142857;
    letter-spacing: 0em;
  }
  #oatmealLP #Oatmeal .content .text_lp::before {
    display: block;
    width: 0;
    height: 0;
    margin-top: -0.6428571429em;
    content: "";
  }
  #oatmealLP #Oatmeal .content .text_lp::after {
    display: block;
    width: 0;
    height: 0;
    margin-bottom: -0.6428571429em;
    content: "";
  }
  #oatmealLP #Oatmeal .content .text_lp {
    color: #4a2200;
    margin-top: 10.6666666667vw;
  }
  #oatmealLP #Oatmeal .content .fig {
    width: 59.7333333333vw;
    margin-top: 6.6666666667vw;
    margin-left: auto;
    margin-right: auto;
  }
  #oatmealLP #Oatmeal .content .leftArea .dotLine::after {
    background-image: url(../images/oatmeal_dotline_1@sp.svg);
    background-size: auto 1.1333333333vw;
    width: 68.2666666667vw;
  }
  #oatmealLP #Oatmeal .content .rightArea {
    margin-top: 8vw;
  }
  #oatmealLP #Oatmeal .content .rightArea .dotLine::after {
    background-image: url(../images/oatmeal_dotline_2@sp.svg);
    background-size: auto 1.1333333333vw;
    width: 68.2666666667vw;
  }
}
#oatmealLP {
  /*-------------------------------------------> #Develop */
}
#oatmealLP #Develop .marker::after {
  background: #f08c00;
}
#oatmealLP #Develop .inner {
  padding-top: 4.6875%;
  padding-bottom: 2.6041666667%;
}
#oatmealLP #Develop .content {
  width: 65.1041666667cqw;
  padding-top: 1.0416666667%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#oatmealLP #Develop .content .leftArea, #oatmealLP #Develop .content .rightArea {
  position: relative;
  width: 42.4%;
}
#oatmealLP #Develop .content .leftArea .frame, #oatmealLP #Develop .content .rightArea .frame {
  padding-bottom: 13.2075471698%;
}
#oatmealLP #Develop .content .leftArea .text_lp, #oatmealLP #Develop .content .rightArea .text_lp {
  position: relative;
  z-index: 100;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100%;
}
#oatmealLP #Develop .content .leftArea .image, #oatmealLP #Develop .content .rightArea .image {
  position: relative;
  z-index: 10;
  margin: -9.4339622642% auto 0;
}
#oatmealLP #Develop .content .leftArea .text_lp {
  background-image: url(../images/develop_01_frame@pc.svg);
}
#oatmealLP #Develop .content .leftArea .image {
  width: 99.0566037736%;
}
#oatmealLP #Develop .content .rightArea .text_lp {
  background-image: url(../images/develop_02_frame@pc.svg);
}
#oatmealLP #Develop .content .rightArea .image {
  width: 99.6226415094%;
}
#oatmealLP #Develop .content .text_lp {
  width: 100%;
  height: 26.5625cqw;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 19px; /* legacy */
  font-size: 0.9895833333cqw;
  line-height: 2.5263157895;
  letter-spacing: 0em;
  color: #000000;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  #oatmealLP #Develop .content {
    width: 530px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  #oatmealLP #Develop .content .leftArea, #oatmealLP #Develop .content .rightArea {
    width: 100%;
  }
  #oatmealLP #Develop .content .rightArea {
    margin-top: 40px;
  }
  #oatmealLP #Develop .content .text_lp {
    height: 510px;
    font-size: 19px;
    line-height: 2.5263157895;
    letter-spacing: 0em;
    min-height: initial;
  }
}
@media screen and (max-width: 767px) {
  #oatmealLP #Develop .inner {
    padding-top: 4vw;
    padding-bottom: 4vw;
  }
  #oatmealLP #Develop .content {
    width: 100%;
    padding-top: 5.3333333333vw;
    display: block;
  }
  #oatmealLP #Develop .content .leftArea, #oatmealLP #Develop .content .rightArea {
    position: relative;
    width: 100%;
  }
  #oatmealLP #Develop .content .leftArea .frame, #oatmealLP #Develop .content .rightArea .frame {
    padding-bottom: 10.6666666667vw;
  }
  #oatmealLP #Develop .content .leftArea .image, #oatmealLP #Develop .content .rightArea .image {
    margin: -9.3333333333vw auto 0;
  }
  #oatmealLP #Develop .content .leftArea .text_lp {
    background-image: url(../images/develop_01_frame@sp.svg);
    min-height: 114.1333333333vw;
  }
  #oatmealLP #Develop .content .leftArea .image {
    width: 46.6666666667vw;
  }
  #oatmealLP #Develop .content .rightArea {
    margin-top: 5.3333333333vw;
  }
  #oatmealLP #Develop .content .rightArea .text_lp {
    background-image: url(../images/develop_02_frame@sp.svg);
    min-height: 93.3333333333vw;
  }
  #oatmealLP #Develop .content .rightArea .image {
    width: 46.9333333333vw;
  }
  #oatmealLP #Develop .content .text_lp {
    font-size: 14px; /* legacy */
    font-size: 3.7333333333vw;
    line-height: 2.2857142857;
    letter-spacing: 0.02em;
    color: #4a2200;
  }
}
#oatmealLP {
  /*-------------------------------------------> #Feature */
}
#oatmealLP #Feature .marker::after {
  background: #f08c00;
}
#oatmealLP #Feature .contentLayer {
  padding-bottom: 0;
}
#oatmealLP #Feature .inner {
  padding-top: 4.6875%;
  padding-bottom: 5.2083333333%;
}
#oatmealLP #Feature .content {
  width: 88.0208333333cqw;
  padding-top: 4.1666666667%;
}
#oatmealLP #Feature .content ol {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
#oatmealLP #Feature .content ol li {
  width: 22.0710059172%;
}
#oatmealLP #Feature .content ol li .blockTitle {
  position: relative;
}
#oatmealLP #Feature .content ol li .blockTitle::after {
  content: "";
  display: block;
  width: 2.2916666667cqw;
  height: 2.2916666667cqw;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  translate: -50% -50%;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100%;
}
#oatmealLP #Feature .content ol li:nth-child(1) .blockTitle::after {
  background-image: url(../images/feature_icon_01.svg);
}
#oatmealLP #Feature .content ol li:nth-child(2) .blockTitle::after {
  background-image: url(../images/feature_icon_02.svg);
}
#oatmealLP #Feature .content ol li:nth-child(3) .blockTitle::after {
  background-image: url(../images/feature_icon_03.svg);
}
#oatmealLP #Feature .content ol li:nth-child(4) .blockTitle::after {
  background-image: url(../images/feature_icon_04.svg);
}
#oatmealLP #Feature .content .block .blockTitle {
  width: 100%;
  height: 4.4791666667cqw;
  background-image: url(../images/feature_frame@pc.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 24px; /* legacy */
  font-size: 1.25cqw;
  line-height: 1.1666666667;
  letter-spacing: 0.05em;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#oatmealLP #Feature .content .block .blockTitle span {
  display: inline-block;
  padding-bottom: 0.4166666667cqw;
  margin: auto;
}
#oatmealLP #Feature .content .block .image {
  margin-top: 10.1876675603%;
}
#oatmealLP #Feature .content .block .text_lp {
  position: relative;
  left: 50%;
  translate: -50% 0;
  width: 117.9624664879%;
  margin-top: 9.1152815013%;
  font-size: 18px; /* legacy */
  font-size: 0.9375cqw;
  line-height: 1.6666666667;
  letter-spacing: 0.05em;
}
#oatmealLP #Feature .content .block .text_lp::before {
  display: block;
  width: 0;
  height: 0;
  margin-top: -0.3333333333em;
  content: "";
}
#oatmealLP #Feature .content .block .text_lp::after {
  display: block;
  width: 0;
  height: 0;
  margin-bottom: -0.3333333333em;
  content: "";
}
#oatmealLP #Feature .content .block .text_lp {
  text-align: center;
  white-space: nowrap;
}
#oatmealLP #Feature .content .block .note {
  margin-top: 4.8257372654%;
  font-size: 12px; /* legacy */
  font-size: 0.625cqw;
  line-height: 1.5;
  letter-spacing: 0em;
  text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  #oatmealLP #Feature .content {
    width: 100%;
    padding-top: 4.6875%;
    padding-left: 40px;
    padding-right: 40px;
  }
  #oatmealLP #Feature .content ol {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #oatmealLP #Feature .content ol li {
    width: 45.487804878%;
  }
  #oatmealLP #Feature .content ol li:nth-child(n+3) {
    margin-top: 15.8536585366%;
  }
  #oatmealLP #Feature .content .block {
    min-height: 86px;
  }
  #oatmealLP #Feature .content .block .blockTitle {
    height: auto;
    min-height: 86px;
    font-size: 24px;
    line-height: 1.1666666667;
    letter-spacing: 0.05em;
  }
  #oatmealLP #Feature .content .block .blockTitle::after {
    width: 44px;
    height: 44px;
  }
  #oatmealLP #Feature .content .block .text_lp {
    font-size: 18px;
    line-height: 1.6666666667;
    letter-spacing: 0.05em;
  }
  #oatmealLP #Feature .content .block .text_lp::before {
    display: block;
    width: 0;
    height: 0;
    margin-top: -0.3333333333em;
    content: "";
  }
  #oatmealLP #Feature .content .block .text_lp::after {
    display: block;
    width: 0;
    height: 0;
    margin-bottom: -0.3333333333em;
    content: "";
  }
  #oatmealLP #Feature .content .block .note {
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0em;
  }
}
@media screen and (max-width: 767px) {
  #oatmealLP #Feature .inner {
    padding-top: 12vw;
    padding-bottom: 10.6666666667vw;
  }
  #oatmealLP #Feature .content {
    width: 100%;
    padding-top: 12vw;
  }
  #oatmealLP #Feature .content ol {
    width: 100%;
    display: block;
  }
  #oatmealLP #Feature .content ol li {
    width: 100%;
  }
  #oatmealLP #Feature .content ol li .blockTitle {
    position: relative;
  }
  #oatmealLP #Feature .content ol li .blockTitle::after {
    content: "";
    display: block;
    width: 11.7333333333vw;
    height: 11.7333333333vw;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    translate: -50% -50%;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100%;
  }
  #oatmealLP #Feature .content .block + .block {
    margin-top: 17.3333333333vw;
  }
  #oatmealLP #Feature .content .block .blockTitle {
    width: 65.0666666667vw;
    height: 27.2vw;
    min-height: initial;
    margin: 0 auto;
    background-image: url(../images/feature_frame@sp.svg);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 25px; /* legacy */
    font-size: 6.6666666667vw;
    line-height: 1.28;
    letter-spacing: 0em;
    text-align: center;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  #oatmealLP #Feature .content .block .blockTitle span {
    display: inline-block;
    padding-bottom: 2.1333333333vw;
    margin: auto;
    white-space: nowrap;
  }
  #oatmealLP #Feature .content .block .image {
    margin-top: 2.6666666667vw;
  }
  #oatmealLP #Feature .content .block .text_lp {
    position: relative;
    left: auto;
    translate: 0 0;
    width: 100%;
    margin-top: 4.8vw;
    font-size: 15px; /* legacy */
    font-size: 4vw;
    line-height: 1.7333333333;
    letter-spacing: 0em;
  }
  #oatmealLP #Feature .content .block .text_lp::before {
    display: block;
    width: 0;
    height: 0;
    margin-top: -0.3666666667em;
    content: "";
  }
  #oatmealLP #Feature .content .block .text_lp::after {
    display: block;
    width: 0;
    height: 0;
    margin-bottom: -0.3666666667em;
    content: "";
  }
  #oatmealLP #Feature .content .block .text_lp {
    text-align: center;
    white-space: wrap;
  }
  #oatmealLP #Feature .content .block .note {
    margin-top: 4.8vw;
    font-size: 10px; /* legacy */
    font-size: 2.6666666667vw;
    line-height: 1.5;
    letter-spacing: 0em;
    text-align: center;
  }
}
#oatmealLP {
  /* animation
  .image {
  	animation-delay: 0.3s;
  }
  &.inView {
  	.base, .image {
  		animation-name: fadeInUp;
  	}
  }
  */
}
#oatmealLP .anim-scrollLine span {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-name: scrollLine;
          animation-name: scrollLine;
}
#oatmealLP {
  /*-------------------------------------------> animation module */
}
#oatmealLP .anim-fadeIn {
  opacity: 0;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
          animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
#oatmealLP .inView .isAnim.inView.anim-fadeIn,
#oatmealLP .inView .isAnim.inView .anim-fadeIn,
#oatmealLP .inView .anim-fadeIn,
#oatmealLP .inView.anim-fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}
#oatmealLP .inView .isAnim.anim-fadeIn,
#oatmealLP .inView .isAnim .anim-fadeIn {
  -webkit-animation-name: none;
          animation-name: none;
}
#oatmealLP .anim-fadeInUp {
  opacity: 0;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
          animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
#oatmealLP .inView .isAnim.inView.anim-fadeInUp,
#oatmealLP .inView .isAnim.inView .anim-fadeInUp,
#oatmealLP .inView .anim-fadeInUp,
#oatmealLP .inView.anim-fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}
#oatmealLP .inView .isAnim.anim-fadeInUp,
#oatmealLP .inView .isAnim .anim-fadeInUp {
  -webkit-animation-name: none;
          animation-name: none;
}
#oatmealLP .anim-fadeInDown {
  opacity: 0;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
          animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
#oatmealLP .inView .isAnim.inView.anim-fadeInDown,
#oatmealLP .inView .isAnim.inView .anim-fadeInDown,
#oatmealLP .inView .anim-fadeInDown,
#oatmealLP .inView.anim-fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
}
#oatmealLP .inView .isAnim.anim-fadeInDown,
#oatmealLP .inView .isAnim .anim-fadeInDown {
  -webkit-animation-name: none;
          animation-name: none;
}
#oatmealLP .anim-fadeInRight {
  opacity: 0;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
          animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
#oatmealLP .inView .isAnim.inView.anim-fadeInRight,
#oatmealLP .inView .isAnim.inView .anim-fadeInRight,
#oatmealLP .inView .anim-fadeInRight,
#oatmealLP .inView.anim-fadeInRight {
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
}
#oatmealLP .inView .isAnim.anim-fadeInRight,
#oatmealLP .inView .isAnim .anim-fadeInRight {
  -webkit-animation-name: none;
          animation-name: none;
}
#oatmealLP .anim-fadeInLeft {
  opacity: 0;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
          animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
#oatmealLP .inView .isAnim.inView.anim-fadeInLeft,
#oatmealLP .inView .isAnim.inView .anim-fadeInLeft,
#oatmealLP .inView .anim-fadeInLeft,
#oatmealLP .inView.anim-fadeInLeft {
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
}
#oatmealLP .inView .isAnim.anim-fadeInLeft,
#oatmealLP .inView .isAnim .anim-fadeInLeft {
  -webkit-animation-name: none;
          animation-name: none;
}
#oatmealLP .anim-fadeText span {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
  clip-path: inset(0 100% 0 0);
}
#oatmealLP .inView .isAnim.inView.anim-fadeText span,
#oatmealLP .inView .isAnim.inView .anim-fadeText span,
#oatmealLP .inView .anim-fadeText span,
#oatmealLP .inView.anim-fadeText span {
  -webkit-animation: fadeText 1s ease-out forwards;
          animation: fadeText 1s ease-out forwards;
}
#oatmealLP .inView .isAnim.inView.anim-fadeText span:nth-of-type(1),
#oatmealLP .inView .isAnim.inView .anim-fadeText span:nth-of-type(1),
#oatmealLP .inView .anim-fadeText span:nth-of-type(1),
#oatmealLP .inView.anim-fadeText span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
#oatmealLP .inView .isAnim.inView.anim-fadeText span:nth-of-type(2),
#oatmealLP .inView .isAnim.inView .anim-fadeText span:nth-of-type(2),
#oatmealLP .inView .anim-fadeText span:nth-of-type(2),
#oatmealLP .inView.anim-fadeText span:nth-of-type(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
#oatmealLP .inView .isAnim.inView.anim-fadeText span:nth-of-type(3),
#oatmealLP .inView .isAnim.inView .anim-fadeText span:nth-of-type(3),
#oatmealLP .inView .anim-fadeText span:nth-of-type(3),
#oatmealLP .inView.anim-fadeText span:nth-of-type(3) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
#oatmealLP .inView .isAnim.inView.anim-fadeText span:nth-of-type(4),
#oatmealLP .inView .isAnim.inView .anim-fadeText span:nth-of-type(4),
#oatmealLP .inView .anim-fadeText span:nth-of-type(4),
#oatmealLP .inView.anim-fadeText span:nth-of-type(4) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
#oatmealLP .inView .isAnim.inView.anim-fadeText span:nth-of-type(5),
#oatmealLP .inView .isAnim.inView .anim-fadeText span:nth-of-type(5),
#oatmealLP .inView .anim-fadeText span:nth-of-type(5),
#oatmealLP .inView.anim-fadeText span:nth-of-type(5) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
#oatmealLP .inView .isAnim.inView.anim-fadeText span:nth-of-type(6),
#oatmealLP .inView .isAnim.inView .anim-fadeText span:nth-of-type(6),
#oatmealLP .inView .anim-fadeText span:nth-of-type(6),
#oatmealLP .inView.anim-fadeText span:nth-of-type(6) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
#oatmealLP .inView .isAnim.inView.anim-fadeText span:nth-of-type(7),
#oatmealLP .inView .isAnim.inView .anim-fadeText span:nth-of-type(7),
#oatmealLP .inView .anim-fadeText span:nth-of-type(7),
#oatmealLP .inView.anim-fadeText span:nth-of-type(7) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
#oatmealLP .inView .isAnim.inView.anim-fadeText span:nth-of-type(8),
#oatmealLP .inView .isAnim.inView .anim-fadeText span:nth-of-type(8),
#oatmealLP .inView .anim-fadeText span:nth-of-type(8),
#oatmealLP .inView.anim-fadeText span:nth-of-type(8) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
#oatmealLP .inView .isAnim.inView.anim-fadeText span:nth-of-type(9),
#oatmealLP .inView .isAnim.inView .anim-fadeText span:nth-of-type(9),
#oatmealLP .inView .anim-fadeText span:nth-of-type(9),
#oatmealLP .inView.anim-fadeText span:nth-of-type(9) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
#oatmealLP .inView .isAnim.inView.anim-fadeText span:nth-of-type(10),
#oatmealLP .inView .isAnim.inView .anim-fadeText span:nth-of-type(10),
#oatmealLP .inView .anim-fadeText span:nth-of-type(10),
#oatmealLP .inView.anim-fadeText span:nth-of-type(10) {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
#oatmealLP .inView .isAnim.anim-fadeText,
#oatmealLP .inView .isAnim .anim-fadeText {
  -webkit-animation-name: none;
          animation-name: none;
}
#oatmealLP .anim-fadeImage img {
  opacity: 0;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
#oatmealLP .inView .isAnim.inView.anim-fadeImage img,
#oatmealLP .inView .isAnim.inView .anim-fadeImage img,
#oatmealLP .inView .anim-fadeImage img,
#oatmealLP .inView.anim-fadeImage img {
  -webkit-animation-name: fadeImage;
          animation-name: fadeImage;
}
#oatmealLP .inView .isAnim.anim-fadeImage img,
#oatmealLP .inView .isAnim .anim-fadeImage img {
  -webkit-animation-name: none;
          animation-name: none;
}
#oatmealLP .linkArrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#oatmealLP .linkArrow.disable {
  pointer-events: none;
  opacity: 0.3;
}
#oatmealLP .linkArrow span {
  display: block;
  overflow: hidden;
}
#oatmealLP .linkArrow span img, #oatmealLP .linkArrow span .svg {
  display: block;
}
@media screen and (min-width: 768px) {
  #oatmealLP .linkArrow img, #oatmealLP .linkArrow .svg {
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  #oatmealLP .linkArrow:hover img, #oatmealLP .linkArrow:hover .svg {
    -webkit-animation-name: linkArrow;
            animation-name: linkArrow;
  }
}
#oatmealLP .anim-slice {
  clip-path: inset(0 100% 0 0);
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1);
          animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  will-change: filter;
}
#oatmealLP .inView .isAnim.inView.anim-slice,
#oatmealLP .inView .isAnim.inView .anim-slice,
#oatmealLP .inView .anim-slice,
#oatmealLP .inView.anim-slice {
  -webkit-animation-name: slice;
          animation-name: slice;
}
#oatmealLP .inView .isAnim.anim-slice,
#oatmealLP .inView .isAnim .anim-slice {
  -webkit-animation-name: none;
          animation-name: none;
}
#oatmealLP .anim-slice.reverse {
  clip-path: inset(0 0 0 100%);
}
#oatmealLP .inView .isAnim.inView.anim-slice.reverse,
#oatmealLP .inView .isAnim.inView .anim-slice.reverse,
#oatmealLP .inView .anim-slice.reverse,
#oatmealLP .inView.anim-slice.reverse {
  -webkit-animation-name: sliceR;
          animation-name: sliceR;
}
#oatmealLP .inView .isAnim.anim-slice.reverse,
#oatmealLP .inView .isAnim .anim-slice.reverse {
  -webkit-animation-name: none;
          animation-name: none;
}
#oatmealLP .anim-sliceHide {
  clip-path: inset(0 0 0 0);
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1);
          animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  will-change: filter;
}
#oatmealLP .inView .isAnim.inView.anim-sliceHide,
#oatmealLP .inView .isAnim.inView .anim-sliceHide,
#oatmealLP .inView .anim-sliceHide,
#oatmealLP .inView.anim-sliceHide {
  -webkit-animation-name: sliceHide;
          animation-name: sliceHide;
}
#oatmealLP .inView .isAnim.anim-sliceHide,
#oatmealLP .inView .isAnim .anim-sliceHide {
  -webkit-animation-name: none;
          animation-name: none;
}
#oatmealLP .anim-sliceHide.reverse {
  clip-path: inset(0 0 0 0);
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1);
          animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  will-change: filter;
}
#oatmealLP .inView .isAnim.inView.anim-sliceHide.reverse,
#oatmealLP .inView .isAnim.inView .anim-sliceHide.reverse,
#oatmealLP .inView .anim-sliceHide.reverse,
#oatmealLP .inView.anim-sliceHide.reverse {
  -webkit-animation-name: sliceHideR;
          animation-name: sliceHideR;
}
#oatmealLP .inView .isAnim.anim-sliceHide.reverse,
#oatmealLP .inView .isAnim .anim-sliceHide.reverse {
  -webkit-animation-name: none;
          animation-name: none;
}
#oatmealLP {
  /* delay */
}
#oatmealLP .delay0 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
#oatmealLP .delay1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
#oatmealLP .delay2 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
#oatmealLP .delay3 {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
#oatmealLP .delay4 {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
#oatmealLP .delay5 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
#oatmealLP .delay6 {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
#oatmealLP .delay7 {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
#oatmealLP .delay8 {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
#oatmealLP .delay9 {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
#oatmealLP .delay10 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
#oatmealLP .delay11 {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}
#oatmealLP .delay12 {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}
#oatmealLP .delay13 {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}
#oatmealLP .delay14 {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
#oatmealLP .delay15 {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
#oatmealLP .delay16 {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}
#oatmealLP .delay17 {
  -webkit-animation-delay: 3.4s;
          animation-delay: 3.4s;
}
#oatmealLP .delay18 {
  -webkit-animation-delay: 3.6s;
          animation-delay: 3.6s;
}
#oatmealLP .delay19 {
  -webkit-animation-delay: 3.8s;
          animation-delay: 3.8s;
}
#oatmealLP .delay20 {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
#oatmealLP {
  /*-------------------------------------------> keyframe */
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0);
            transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0);
            transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes fadeText {
  0% {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  30% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
@keyframes fadeText {
  0% {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  30% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
@-webkit-keyframes fadeImage {
  from {
    opacity: 0;
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes fadeImage {
  from {
    opacity: 0;
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes hoverImage {
  from {
    -webkit-transform: translateX(1);
            transform: translateX(1);
  }
  to {
    -webkit-transform: translateX(1.08);
            transform: translateX(1.08);
  }
}
@keyframes hoverImage {
  from {
    -webkit-transform: translateX(1);
            transform: translateX(1);
  }
  to {
    -webkit-transform: translateX(1.08);
            transform: translateX(1.08);
  }
}
@-webkit-keyframes linkArrow {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 1;
  }
  31% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 0;
  }
  32% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes linkArrow {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 1;
  }
  31% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 0;
  }
  32% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes linkArrowR {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 1;
  }
  31% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  32% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes linkArrowR {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 1;
  }
  31% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  32% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes blankBack {
  0% {
    translate: 0% 0%;
  }
  50% {
    translate: -12.5% -22.2222222222%;
  }
  100% {
    translate: -29.1666666667% -22.2222222222%;
  }
}
@keyframes blankBack {
  0% {
    translate: 0% 0%;
  }
  50% {
    translate: -12.5% -22.2222222222%;
  }
  100% {
    translate: -29.1666666667% -22.2222222222%;
  }
}
@-webkit-keyframes blankFront {
  0% {
    translate: 0% 0%;
  }
  50% {
    translate: -12.5% -22.2222222222%;
    width: 128.5714285714%;
    height: 118.1818181818%;
  }
  100% {
    translate: -12.5% -22.2222222222%;
    width: 142.8571428571%;
    height: 118.1818181818%;
  }
}
@keyframes blankFront {
  0% {
    translate: 0% 0%;
  }
  50% {
    translate: -12.5% -22.2222222222%;
    width: 128.5714285714%;
    height: 118.1818181818%;
  }
  100% {
    translate: -12.5% -22.2222222222%;
    width: 142.8571428571%;
    height: 118.1818181818%;
  }
}
@-webkit-keyframes scrollLine {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  40% {
    clip-path: inset(0 0 0 0);
  }
  50% {
    clip-path: inset(0 0 0 0);
  }
  90% {
    clip-path: inset(0 0 0 100%);
  }
  100% {
    clip-path: inset(0 0 0 100%);
  }
}
@keyframes scrollLine {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  40% {
    clip-path: inset(0 0 0 0);
  }
  50% {
    clip-path: inset(0 0 0 0);
  }
  90% {
    clip-path: inset(0 0 0 100%);
  }
  100% {
    clip-path: inset(0 0 0 100%);
  }
}
@-webkit-keyframes slice {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  99% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: none;
  }
}
@keyframes slice {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  99% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: none;
  }
}
@-webkit-keyframes sliceR {
  0% {
    clip-path: inset(0 0 0 100%);
  }
  99% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: none;
  }
}
@keyframes sliceR {
  0% {
    clip-path: inset(0 0 0 100%);
  }
  99% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: none;
  }
}
@-webkit-keyframes sliceHide {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 100%);
  }
}
@keyframes sliceHide {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 100%);
  }
}
@-webkit-keyframes sliceHideR {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}
@keyframes sliceHideR {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}
#oatmealLP {
  /*-------------------------------------------> LinkAnimation */
  /*-------------------------------------------> TextEffects */
}
#oatmealLP .anim-textLeftIn span {
  display: inline-block;
}
#oatmealLP .anim-textLeftIn span.w {
  overflow: hidden;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(1) > span {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(2) > span {
  -webkit-animation-delay: 0.02s;
          animation-delay: 0.02s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(3) > span {
  -webkit-animation-delay: 0.04s;
          animation-delay: 0.04s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(4) > span {
  -webkit-animation-delay: 0.06s;
          animation-delay: 0.06s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(5) > span {
  -webkit-animation-delay: 0.08s;
          animation-delay: 0.08s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(6) > span {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(7) > span {
  -webkit-animation-delay: 0.12s;
          animation-delay: 0.12s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(8) > span {
  -webkit-animation-delay: 0.14s;
          animation-delay: 0.14s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(9) > span {
  -webkit-animation-delay: 0.16s;
          animation-delay: 0.16s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(10) > span {
  -webkit-animation-delay: 0.18s;
          animation-delay: 0.18s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(11) > span {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(12) > span {
  -webkit-animation-delay: 0.22s;
          animation-delay: 0.22s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(13) > span {
  -webkit-animation-delay: 0.24s;
          animation-delay: 0.24s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(14) > span {
  -webkit-animation-delay: 0.26s;
          animation-delay: 0.26s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(15) > span {
  -webkit-animation-delay: 0.28s;
          animation-delay: 0.28s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(16) > span {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(17) > span {
  -webkit-animation-delay: 0.32s;
          animation-delay: 0.32s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(18) > span {
  -webkit-animation-delay: 0.34s;
          animation-delay: 0.34s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(19) > span {
  -webkit-animation-delay: 0.36s;
          animation-delay: 0.36s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(20) > span {
  -webkit-animation-delay: 0.38s;
          animation-delay: 0.38s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(21) > span {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(22) > span {
  -webkit-animation-delay: 0.42s;
          animation-delay: 0.42s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(23) > span {
  -webkit-animation-delay: 0.44s;
          animation-delay: 0.44s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(24) > span {
  -webkit-animation-delay: 0.46s;
          animation-delay: 0.46s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(25) > span {
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(26) > span {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(27) > span {
  -webkit-animation-delay: 0.52s;
          animation-delay: 0.52s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(28) > span {
  -webkit-animation-delay: 0.54s;
          animation-delay: 0.54s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(29) > span {
  -webkit-animation-delay: 0.56s;
          animation-delay: 0.56s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(30) > span {
  -webkit-animation-delay: 0.58s;
          animation-delay: 0.58s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(31) > span {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(32) > span {
  -webkit-animation-delay: 0.62s;
          animation-delay: 0.62s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(33) > span {
  -webkit-animation-delay: 0.64s;
          animation-delay: 0.64s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(34) > span {
  -webkit-animation-delay: 0.66s;
          animation-delay: 0.66s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(35) > span {
  -webkit-animation-delay: 0.68s;
          animation-delay: 0.68s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(36) > span {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(37) > span {
  -webkit-animation-delay: 0.72s;
          animation-delay: 0.72s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(38) > span {
  -webkit-animation-delay: 0.74s;
          animation-delay: 0.74s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(39) > span {
  -webkit-animation-delay: 0.76s;
          animation-delay: 0.76s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(40) > span {
  -webkit-animation-delay: 0.78s;
          animation-delay: 0.78s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(41) > span {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(42) > span {
  -webkit-animation-delay: 0.82s;
          animation-delay: 0.82s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(43) > span {
  -webkit-animation-delay: 0.84s;
          animation-delay: 0.84s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(44) > span {
  -webkit-animation-delay: 0.86s;
          animation-delay: 0.86s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(45) > span {
  -webkit-animation-delay: 0.88s;
          animation-delay: 0.88s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(46) > span {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(47) > span {
  -webkit-animation-delay: 0.92s;
          animation-delay: 0.92s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(48) > span {
  -webkit-animation-delay: 0.94s;
          animation-delay: 0.94s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(49) > span {
  -webkit-animation-delay: 0.96s;
          animation-delay: 0.96s;
}
#oatmealLP .anim-textLeftIn span.w:nth-child(50) > span {
  -webkit-animation-delay: 0.98s;
          animation-delay: 0.98s;
}
#oatmealLP .anim-textLeftIn span.w > span {
  -webkit-transform: translateX(110%);
          transform: translateX(110%);
  -webkit-animation-duration: 0.15s;
          animation-duration: 0.15s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
#oatmealLP .inView .isAnim.inView.anim-textLeftIn span.w span,
#oatmealLP .inView .isAnim.inView .anim-textLeftIn span.w span,
#oatmealLP .inView .anim-textLeftIn span.w span,
#oatmealLP .inView.anim-textLeftIn span.w span {
  -webkit-animation-name: textLeftIn;
          animation-name: textLeftIn;
}
#oatmealLP .inView .isAnim.anim-textLeftIn span.w span,
#oatmealLP .inView .isAnim .anim-textLeftIn span.w span {
  -webkit-animation-name: none;
          animation-name: none;
}
@-webkit-keyframes textLeftIn {
  0% {
    -webkit-transform: translateX(-110%);
            transform: translateX(-110%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes textLeftIn {
  0% {
    -webkit-transform: translateX(-110%);
            transform: translateX(-110%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}