@charset "UTF-8";
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative; }

#moranbong {
  /*メインビジュアル*/
  /*レシピ*/
  /*フッター*/ }
  #moranbong *,
  #moranbong *::before,
  #moranbong *::after {
    box-sizing: border-box; }
  #moranbong h1, #moranbong h2, #moranbong h3, #moranbong div, #moranbong p, #moranbong ul, #moranbong li {
    margin: 0;
    padding: 0; }
  #moranbong li {
    list-style: none; }
  #moranbong img {
    max-width: 100%;
    height: auto;
    line-height: 0;
    vertical-align: bottom; }
  #moranbong a img:hover {
    opacity: 0.8; }
  #moranbong .pcOnly {
    display: none; }
    @media only screen and (min-width: 640px) {
      #moranbong .pcOnly {
        display: inline; } }
  #moranbong .spOnly {
    display: inline; }
    @media only screen and (min-width: 640px) {
      #moranbong .spOnly {
        display: none; } }
  #moranbong .mv {
    width: 100vw;
    margin: 0 auto; }
    @media only screen and (min-width: 640px) {
      #moranbong .mv {
        height: calc(509 / 980 * 100vw); } }
    @media only screen and (min-width: 980px) {
      #moranbong .mv {
        background: url("../../img/mv_bg_pc.jpg") top center;
        background-size: cover;
        height: 509px; } }
    #moranbong .mv__cont {
      width: 100%;
      margin: 0 auto; }
      @media only screen and (min-width: 640px) {
        #moranbong .mv__cont {
          width: calc(980 / 980 * 100vw); } }
      @media only screen and (min-width: 980px) {
        #moranbong .mv__cont {
          width: 980px; } }
      #moranbong .mv__cont__ti {
        width: 100vw;
        margin: 0 auto; }
        @media only screen and (min-width: 640px) {
          #moranbong .mv__cont__ti {
            width: calc(616 / 980 * 100vw);
            padding: calc(77 / 980 * 100vw) 0 0; } }
        @media only screen and (min-width: 980px) {
          #moranbong .mv__cont__ti {
            width: 616px;
            padding: 77px 0 0; } }
  #moranbong .recipe {
    width: 100vw; }
    #moranbong .recipe__cont {
      width: 100%;
      margin: 0 auto; }
      @media only screen and (min-width: 640px) {
        #moranbong .recipe__cont {
          width: calc(980 / 980 * 100vw); } }
  @media only screen and (min-width: 640px) and (min-width: 980px) {
    #moranbong .recipe__cont {
      width: 980px; } }
      @media only screen and (min-width: 640px) {
          #moranbong .recipe__cont__img {
            width: 100%; } }
    @media only screen and (min-width: 640px) {
      #moranbong .recipe.orange {
        background: url("../../img/bg_orange_pc.jpg") top center;
        background-size: cover; } }
    #moranbong .recipe.brown {
      margin: -1px 0 0 0; }
      @media only screen and (min-width: 640px) {
        #moranbong .recipe.brown {
          margin: 0 0 0 0;
          background: url("../../img/bg_brown_pc.jpg") top center;
          background-size: cover; } }
    @media only screen and (min-width: 640px) {
      #moranbong .recipe.green {
        background: url("../../img/bg_green_pc.jpg") top center;
        background-size: cover; } }
  #moranbong .footer {
    width: 100%;
    background: url("../../img/bg_footer_sp.png") top center;
    background-size: cover; }
    @media only screen and (min-width: 640px) {
      #moranbong .footer {
        background: url("../../img/bg_footer_pc.png") top center;
        height: calc(347 / 980 * 100vw);
        margin: calc(-16 / 980 * 100vw) auto 0; } }
    @media only screen and (min-width: 980px) {
      #moranbong .footer {
        height: 347px;
        margin: -16px auto 0; } }
    #moranbong .footer__btarea {
      width: 76vw;
      margin: 0 auto;
      padding: 3.75vw 0; }
      @media only screen and (min-width: 640px) {
        #moranbong .footer__btarea {
          width: calc(980 / 980 * 100vw);
          padding: calc(54 / 980 * 100vw) calc(190 / 980 * 100vw); } }
      @media only screen and (min-width: 980px) {
        #moranbong .footer__btarea {
          width: 980px;
          padding: 54px 190px; } }
      #moranbong .footer__btarea ul {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap; }
        #moranbong .footer__btarea ul li.left {
          width: 38.75vw; }
          @media only screen and (min-width: 640px) {
            #moranbong .footer__btarea ul li.left {
              width: calc(304 / 980 * 100vw); } }
          @media only screen and (min-width: 980px) {
            #moranbong .footer__btarea ul li.left {
              width: 304px; } }
        #moranbong .footer__btarea ul li.right {
          width: 36.56vw; }
          @media only screen and (min-width: 640px) {
            #moranbong .footer__btarea ul li.right {
              width: calc(287 / 980 * 100vw); } }
          @media only screen and (min-width: 980px) {
            #moranbong .footer__btarea ul li.right {
              width: 287px; } }
        #moranbong .footer__btarea ul li#ptop {
          width: 24.375vw;
          margin: 4vw 26.875vw 0 24.843vw; }
          @media only screen and (min-width: 640px) {
            #moranbong .footer__btarea ul li#ptop {
              width: calc(132 / 980 * 100vw);
              margin: calc(30 / 980 * 100vw) calc(241 / 980 * 100vw) 0 calc(227 / 980 * 100vw); } }
          @media only screen and (min-width: 980px) {
            #moranbong .footer__btarea ul li#ptop {
              width: 132px;
              margin: 30px 241px 0 227px; } }