@charset "UTF-8";
/*--------------------------
基本フォーマット背景色　上書き
---------------------------*/
.contents-wrapper[data-layout="1"] {
  padding: 0 0 6.25%; }
  @media only screen and (min-width: 1301px) {
    .contents-wrapper[data-layout="1"] {
      max-width: 100%;
      padding: 41px 0 40px; } }

.contents-wrapper > div > div > div > div {
  padding: 0 0 1.563%; }

.elem-topic-path {
  background-color: #fff; }

/*--------------------------
Styles
---------------------------*/
#meshitomo {
  position: relative;
  background: url("/kikkoman/meshitomo/img/mv_bg_sp.jpg");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat; }
  @media only screen and (min-width: 769px) {
    #meshitomo {
      background: url("/kikkoman/meshitomo/img/mv_bg_pc.jpg");
      background-size: calc(2000 / 1300 *100vw) auto;
      background-position: top center;
      background-repeat: no-repeat; } }
  @media only screen and (min-width: 1201px) {
    #meshitomo {
      background-size: auto;
      background-repeat: repeat-x; } }
  @media only screen and (min-width: 1301px) {
    #meshitomo {
      background-size: auto;
      background-repeat: repeat-x; } }
  #meshitomo img {
    width: 100%;
    border: 0; }
    @media only screen and (min-width: 1301px) {
      #meshitomo img {
        max-width: inherit; } }
  #meshitomo .only_sp {
    display: inherit; }
    @media only screen and (min-width: 769px) {
      #meshitomo .only_sp {
        display: none; } }
  #meshitomo .only_pc {
    display: none; }
    @media only screen and (min-width: 769px) {
      #meshitomo .only_pc {
        display: inherit; } }
  #meshitomo a {
    text-decoration: none; }
  #meshitomo a img {
    border-style: none; }
  #meshitomo #meshitomo--pagetop {
    width: 12.812vw;
    position: fixed;
    right: 2.656vw;
    bottom: -15vw;
    transition: 0.3s all; }
    @media only screen and (min-width: 769px) {
      #meshitomo #meshitomo--pagetop {
        width: calc(155 /1300 * 100vw);
        right: calc(22 /1300 * 100vw);
        bottom: calc(-200 /1300 * 100vw); } }
    @media only screen and (min-width: 1301px) {
      #meshitomo #meshitomo--pagetop {
        width: 155px;
        right: 22px;
        bottom: -200px; } }
    #meshitomo #meshitomo--pagetop.active {
      bottom: 1.875vw; }
      @media only screen and (min-width: 769px) {
        #meshitomo #meshitomo--pagetop.active {
          bottom: calc(50 /1300 * 100vw); } }
      @media only screen and (min-width: 1301px) {
        #meshitomo #meshitomo--pagetop.active {
          bottom: 50px; } }
    #meshitomo #meshitomo--pagetop.fix, #meshitomo #meshitomo--pagetop.fix2, #meshitomo #meshitomo--pagetop.fix3 {
      position: absolute;
      right: 2.656vw;
      bottom: 1.875vw; }
      @media only screen and (min-width: 769px) {
        #meshitomo #meshitomo--pagetop.fix, #meshitomo #meshitomo--pagetop.fix2, #meshitomo #meshitomo--pagetop.fix3 {
          right: calc(22 /1300 * 100vw);
          bottom: calc(50 /1300 * 100vw); } }
      @media only screen and (min-width: 1301px) {
        #meshitomo #meshitomo--pagetop.fix, #meshitomo #meshitomo--pagetop.fix2, #meshitomo #meshitomo--pagetop.fix3 {
          right: 22px;
          bottom: 50px; } }
    #meshitomo #meshitomo--pagetop:hover {
      opacity: 0.8; }
    #meshitomo #meshitomo--pagetop a {
      display: block; }
      #meshitomo #meshitomo--pagetop a:focus {
        outline: none !important; }
  #meshitomo .meshitomo--contents-end {
    height: 10px; }
  #meshitomo .meshitomo--keyvisual {
    width: 100%;
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      #meshitomo .meshitomo--keyvisual {
        width: 100%; } }
    @media only screen and (min-width: 1301px) {
      #meshitomo .meshitomo--keyvisual {
        width: 1300px; } }
  #meshitomo .meshitomo--lead {
    position: relative;
    height: 120.03vw;
    background-image: url("/kikkoman/meshitomo/img/bg_lead_sp.jpg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat; }
    @media only screen and (min-width: 769px) {
      #meshitomo .meshitomo--lead {
        height: calc(930 /1300 * 100vw);
        background-image: url("/kikkoman/meshitomo/img/bg_lead_pc.jpg"); } }
    @media only screen and (min-width: 1301px) {
      #meshitomo .meshitomo--lead {
        height: 930px; } }
    #meshitomo .meshitomo--lead--what {
      position: absolute;
      top: -3.75vw;
      width: 100vw; }
      @media only screen and (min-width: 769px) {
        #meshitomo .meshitomo--lead--what {
          position: relative;
          top: inherit;
          margin: 0 auto; } }
      @media only screen and (min-width: 1301px) {
        #meshitomo .meshitomo--lead--what {
          position: relative;
          width: 1300px; } }
    #meshitomo .meshitomo--lead--point {
      display: flex;
      position: absolute;
      top: 93.75vw;
      left: 6.04vw;
      width: 87.906vw;
      height: 19.375vw;
      padding: 7.031vw 2.281vw;
      background: url("/kikkoman/meshitomo/img/point_base_sp.png");
      background-size: contain;
      background-position: top center;
      background-repeat: no-repeat; }
      @media only screen and (min-width: 769px) {
        #meshitomo .meshitomo--lead--point {
          top: inherit;
          bottom: calc(86 /1300 * 100vw);
          left: 50%;
          transform: translateX(-50%);
          width: calc(747 /1300 * 100vw);
          height: calc(171 /1300 * 100vw);
          padding: calc(70 /1300 * 100vw) calc(40 /1300 * 100vw) 0 calc(39 /1300 * 100vw);
          background: url("/kikkoman/meshitomo/img/point_base_pc.png");
          background-size: contain;
          background-position: top center;
          background-repeat: no-repeat; } }
      @media only screen and (min-width: 1301px) {
        #meshitomo .meshitomo--lead--point {
          top: inherit;
          bottom: 86px;
          left: 50%;
          transform: translateX(-50%);
          width: 747px;
          height: 171px;
          padding: 70px 40px 0 39px; } }
      #meshitomo .meshitomo--lead--point li {
        width: 28.96vw;
        height: 8.75vw;
        font-size: 1.8vw;
        font-weight: bold;
        line-height: 1.2;
        padding: 1.35vw 0 0 9.68vw;
        background-size: 8.75vw 8.75vw;
        background-repeat: no-repeat; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--lead--point li {
            width: calc(249 /1300 * 100vw);
            height: calc(58 /1300 * 100vw);
            font-size: calc(22 /1300 * 100vw);
            padding: calc(5 /1300 * 100vw) 0 0 calc(67 /1300 * 100vw);
            background-size: calc(58 /1300 * 100vw) calc(58 /1300 * 100vw); } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--lead--point li {
            width: 249px;
            height: 58px;
            font-size: 22px;
            padding: 5px 0 0 67px;
            background-size: 58px 58px; } }
        #meshitomo .meshitomo--lead--point li:nth-child(1) {
          color: #6eb844;
          background-image: url("/kikkoman/meshitomo/img/point01.png"); }
        #meshitomo .meshitomo--lead--point li:nth-child(2) {
          color: #e85550;
          background-image: url("/kikkoman/meshitomo/img/point02.png"); }
        #meshitomo .meshitomo--lead--point li:nth-child(3) {
          color: #30abc5;
          background-image: url("/kikkoman/meshitomo/img/point03.png");
          letter-spacing: -0.2vw; }
          @media only screen and (min-width: 769px) {
            #meshitomo .meshitomo--lead--point li:nth-child(3) {
              letter-spacing: inherit; } }
  #meshitomo .meshitomo--nav {
    background-color: #fff5e9;
    padding-bottom: 9.06vw; }
    @media only screen and (min-width: 769px) {
      #meshitomo .meshitomo--nav {
        padding-bottom: calc(86 /1300 * 100vw); } }
    @media only screen and (min-width: 1301px) {
      #meshitomo .meshitomo--nav {
        padding-bottom: 86px; } }
    @media only screen and (min-width: 769px) {
      #meshitomo .meshitomo--nav--title {
        width: 100vw;
        margin: 0 auto; } }
    @media only screen and (min-width: 1301px) {
      #meshitomo .meshitomo--nav--title {
        width: 1300px; } }
    #meshitomo .meshitomo--nav--btn {
      width: 80vw;
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        #meshitomo .meshitomo--nav--btn {
          display: flex;
          justify-content: space-between;
          width: calc(910 /1300 * 100vw);
          margin: calc(50 /1300 * 100vw) auto 0; } }
      @media only screen and (min-width: 1301px) {
        #meshitomo .meshitomo--nav--btn {
          width: 910px;
          margin: 50px auto 0; } }
      #meshitomo .meshitomo--nav--btn li {
        position: relative;
        width: 79vw;
        height: 22.656vw;
        color: #64230a;
        box-shadow: 1.5vw 1.5vw 2vw rgba(0, 0, 0, 0.4);
        text-align: center;
        border-left: 2.34vw solid #64240b; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--nav--btn li {
            width: calc(407 /1300 * 100vw);
            height: calc(120 /1300 * 100vw);
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
            border-left: calc(17 /1300 * 100vw) solid #64240b; } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--nav--btn li {
            width: 407px;
            height: 120px;
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
            border-left: 17px solid #64240b; } }
        #meshitomo .meshitomo--nav--btn li:nth-child(1) {
          background-color: #ffbdc7;
          font-size: 5vw;
          margin-top: 14vw; }
          @media only screen and (min-width: 769px) {
            #meshitomo .meshitomo--nav--btn li:nth-child(1) {
              font-size: calc(28 /1300 * 100vw);
              margin-top: 0; } }
          @media only screen and (min-width: 1301px) {
            #meshitomo .meshitomo--nav--btn li:nth-child(1) {
              font-size: 28px; } }
          #meshitomo .meshitomo--nav--btn li:nth-child(1) a {
            color: #64230a;
            text-decoration: none;
            display: table-cell;
            vertical-align: middle;
            width: 79vw;
            height: 22.656vw;
            font-weight: bold; }
            @media only screen and (min-width: 769px) {
              #meshitomo .meshitomo--nav--btn li:nth-child(1) a {
                width: calc(407 /1300 * 100vw);
                height: calc(120 /1300 * 100vw); } }
            @media only screen and (min-width: 1301px) {
              #meshitomo .meshitomo--nav--btn li:nth-child(1) a {
                width: 407px;
                height: 120px; } }
            #meshitomo .meshitomo--nav--btn li:nth-child(1) a:hover {
              opacity: 0.7; }
          #meshitomo .meshitomo--nav--btn li:nth-child(1) .name {
            font-size: 7vw; }
            @media only screen and (min-width: 769px) {
              #meshitomo .meshitomo--nav--btn li:nth-child(1) .name {
                font-size: calc(40 /1300 * 100vw); } }
            @media only screen and (min-width: 1301px) {
              #meshitomo .meshitomo--nav--btn li:nth-child(1) .name {
                font-size: 40px; } }
          #meshitomo .meshitomo--nav--btn li:nth-child(1) .sub {
            font-size: 5.468vw; }
            @media only screen and (min-width: 769px) {
              #meshitomo .meshitomo--nav--btn li:nth-child(1) .sub {
                font-size: calc(29 /1300 * 100vw); } }
            @media only screen and (min-width: 1301px) {
              #meshitomo .meshitomo--nav--btn li:nth-child(1) .sub {
                font-size: 29px; } }
          #meshitomo .meshitomo--nav--btn li:nth-child(1) .fukidashi {
            position: absolute;
            top: -13vw;
            left: 50%;
            transform: translateX(-50%);
            width: 26.562vw;
            height: 14.06vw; }
            @media only screen and (min-width: 769px) {
              #meshitomo .meshitomo--nav--btn li:nth-child(1) .fukidashi {
                top: calc(-108 /1300 * 100vw);
                width: calc(180 /1300 * 100vw);
                height: calc(96 /1300 * 100vw); } }
            @media only screen and (min-width: 1301px) {
              #meshitomo .meshitomo--nav--btn li:nth-child(1) .fukidashi {
                top: -108px;
                width: 180px;
                height: 96px; } }
        #meshitomo .meshitomo--nav--btn li:nth-child(2) {
          background-color: #ffbb87;
          font-size: 5vw;
          margin-top: 21vw; }
          @media only screen and (min-width: 769px) {
            #meshitomo .meshitomo--nav--btn li:nth-child(2) {
              font-size: calc(26 /1300 * 100vw);
              margin-top: 0; } }
          @media only screen and (min-width: 1301px) {
            #meshitomo .meshitomo--nav--btn li:nth-child(2) {
              font-size: 26px; } }
          #meshitomo .meshitomo--nav--btn li:nth-child(2) a {
            color: #64230a;
            text-decoration: none;
            display: table-cell;
            vertical-align: middle;
            width: 79vw;
            height: 22.656vw;
            font-weight: bold; }
            @media only screen and (min-width: 769px) {
              #meshitomo .meshitomo--nav--btn li:nth-child(2) a {
                width: calc(407 /1300 * 100vw);
                height: calc(120 /1300 * 100vw); } }
            @media only screen and (min-width: 1301px) {
              #meshitomo .meshitomo--nav--btn li:nth-child(2) a {
                width: 407px;
                height: 120px; } }
            #meshitomo .meshitomo--nav--btn li:nth-child(2) a:hover {
              opacity: 0.7; }
          #meshitomo .meshitomo--nav--btn li:nth-child(2) .fukidashi {
            position: absolute;
            top: -12vw;
            left: 50%;
            transform: translateX(-50%);
            width: 26.562vw;
            height: 14.06vw; }
            @media only screen and (min-width: 769px) {
              #meshitomo .meshitomo--nav--btn li:nth-child(2) .fukidashi {
                top: calc(-108 /1300 * 100vw);
                width: calc(193 /1300 * 100vw);
                height: calc(96 /1300 * 100vw); } }
            @media only screen and (min-width: 1301px) {
              #meshitomo .meshitomo--nav--btn li:nth-child(2) .fukidashi {
                top: -108px;
                width: 193px;
                height: 96px; } }
  #meshitomo .meshitomo--coto {
    background-image: url("/kikkoman/meshitomo/img/bg_pink.jpg");
    background-size: auto;
    background-repeat: none;
    background-position: top center;
    padding-bottom: 6.5vw; }
    @media only screen and (min-width: 769px) {
      #meshitomo .meshitomo--coto {
        background-size: cover;
        background-repeat: no-repeat;
        padding-bottom: calc(120 /1300 * 100vw); } }
    @media only screen and (min-width: 1301px) {
      #meshitomo .meshitomo--coto {
        padding-bottom: 120px; } }
    #meshitomo .meshitomo--coto--title {
      position: relative;
      width: 100vw;
      height: 60.78vw; }
      @media only screen and (min-width: 769px) {
        #meshitomo .meshitomo--coto--title {
          height: calc(553 /1300 * 100vw);
          background-image: url("/kikkoman/meshitomo/img/bg_coto_ti_pc.png");
          background-repeat: repeat-x;
          background-size: auto;
          background-position: top calc(95 /1300 * 100vw) center; } }
      @media only screen and (min-width: 1301px) {
        #meshitomo .meshitomo--coto--title {
          width: 100%;
          height: 553px;
          background-image: url("/kikkoman/meshitomo/img/bg_coto_ti_pc.png");
          background-position: top 95px center; } }
      #meshitomo .meshitomo--coto--title--visual {
        position: absolute;
        width: 100vw;
        top: 0;
        left: 0; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--coto--title--visual {
            left: 50%;
            transform: translateX(-50%);
            width: 100vw;
            height: calc(553 /1300 * 100vw); } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--coto--title--visual {
            left: 50%;
            transform: translateX(-50%);
            width: 1300px;
            height: 553px; } }
      #meshitomo .meshitomo--coto--title--text {
        position: absolute;
        right: 4.218vw;
        bottom: 2.8vw;
        width: 57vw;
        text-align: center;
        font-size: 3.2vw;
        line-height: 1.6;
        color: #64230a;
        font-weight: bold; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--coto--title--text {
            right: inherit;
            left: 50%;
            transform: translateX(calc(48 /1300 * 100vw));
            bottom: calc(28 /1300 * 100vw);
            width: calc(455 /1300 * 100vw);
            font-size: calc(25 /1300 * 100vw);
            line-height: 1.8; } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--coto--title--text {
            right: inherit;
            left: 50%;
            transform: translateX(48px);
            bottom: 28px;
            width: 455px;
            font-size: 25px; } }
    #meshitomo .meshitomo--coto--recipe {
      width: 100vw;
      padding: 5.625vw 0 0; }
      @media only screen and (min-width: 769px) {
        #meshitomo .meshitomo--coto--recipe {
          padding: calc(118 /1300 * 100vw) 0 0; } }
      @media only screen and (min-width: 1301px) {
        #meshitomo .meshitomo--coto--recipe {
          width: 100%;
          padding: 118px 0 0; } }
      #meshitomo .meshitomo--coto--recipe--wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 91vw;
        margin: 0 auto; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--coto--recipe--wrap {
            width: calc(1164 /1300 * 100vw); } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--coto--recipe--wrap {
            width: 1164px; } }
      #meshitomo .meshitomo--coto--recipe--thum {
        background-color: #fff;
        filter: drop-shadow(1vw 1vw 1vw rgba(0, 0, 0, 0.4));
        margin-bottom: 2.812vw; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--coto--recipe--thum {
            filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.4));
            margin-bottom: calc(56 /1300 * 100vw); } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--coto--recipe--thum {
            filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.4));
            margin-bottom: 56px; } }
        #meshitomo .meshitomo--coto--recipe--thum:hover {
          opacity: 0.8;
          text-decoration: none; }
      #meshitomo .meshitomo--coto--recipe--ph {
        width: 43.28vw;
        height: 31.875vw;
        position: relative; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--coto--recipe--ph {
            width: calc(555 /1300 * 100vw);
            height: calc(400 /1300 * 100vw); } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--coto--recipe--ph {
            width: 555px;
            height: 400px; } }
        #meshitomo .meshitomo--coto--recipe--ph .meshitomo--recipe--icon {
          position: absolute;
          right: 0;
          bottom: -1.3vw; }
          @media only screen and (min-width: 769px) {
            #meshitomo .meshitomo--coto--recipe--ph .meshitomo--recipe--icon {
              bottom: calc(-33 /1300 * 100vw); } }
          @media only screen and (min-width: 1301px) {
            #meshitomo .meshitomo--coto--recipe--ph .meshitomo--recipe--icon {
              bottom: -38px; } }
          #meshitomo .meshitomo--coto--recipe--ph .meshitomo--recipe--icon img {
            width: auto;
            height: 9.218vw; }
            @media only screen and (min-width: 769px) {
              #meshitomo .meshitomo--coto--recipe--ph .meshitomo--recipe--icon img {
                height: calc(123 /1300 * 100vw); } }
            @media only screen and (min-width: 1301px) {
              #meshitomo .meshitomo--coto--recipe--ph .meshitomo--recipe--icon img {
                height: 123px; } }
      #meshitomo .meshitomo--coto--recipe--title {
        display: table-cell;
        vertical-align: middle;
        width: 43.28vw;
        height: 3.75em;
        font-size: 2.8vw;
        font-weight: bold;
        color: #64230a;
        text-align: center;
        padding-top: 0.25em; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--coto--recipe--title {
            width: calc(555 /1300 * 100vw);
            font-size: calc(24 /1300 * 100vw);
            height: 3.5em; } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--coto--recipe--title {
            width: 555px;
            height: 107px;
            font-size: 2rem;
            padding-top: 0; } }
      #meshitomo .meshitomo--coto--recipe--btn {
        background-color: #64230a;
        color: #fff;
        font-size: 3.125vw;
        text-align: center;
        padding: 1.2vw 0 1vw; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--coto--recipe--btn {
            font-size: calc(22 /1300 * 100vw);
            padding: calc(12 /1300 * 100vw) 0 calc(10 /1300 * 100vw); } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--coto--recipe--btn {
            font-size: 1.8rem;
            padding: 12px 0 10px; } }
    #meshitomo .meshitomo--coto--profile {
      position: relative;
      width: 88.593vw;
      margin: 8.437vw auto 0;
      border: 1.093vw solid #f0d6ab;
      background-color: #fff; }
      @media only screen and (min-width: 769px) {
        #meshitomo .meshitomo--coto--profile {
          width: calc(912 /1300 * 100vw);
          margin: calc(54 /1300 * 100vw) auto 0;
          border: calc(11 /1300 * 100vw) solid #f0d6ab; } }
      @media only screen and (min-width: 1301px) {
        #meshitomo .meshitomo--coto--profile {
          width: 912px;
          margin: 54px auto 0;
          border: 11px solid #f0d6ab; } }
      #meshitomo .meshitomo--coto--profile--title {
        position: absolute;
        top: -3.59vw;
        left: -1.25vw;
        width: 27.656vw; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--coto--profile--title {
            top: calc(-27 /1300 * 100vw);
            left: calc(-13 /1300 * 100vw);
            width: calc(256 /1300 * 100vw); } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--coto--profile--title {
            top: -27px;
            left: -13px;
            width: 256px; } }
      #meshitomo .meshitomo--coto--profile--cont {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 5.31vw 2.18vw 1vw 3.59vw; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--coto--profile--cont {
            width: calc(785 /1300 * 100vw);
            padding: calc(47 /1300 * 100vw) 0 0;
            margin: 0 auto; } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--coto--profile--cont {
            width: 785px;
            padding: 47px 0 0; } }
        #meshitomo .meshitomo--coto--profile--cont--photo {
          width: 27.656vw;
          margin-top: 4.375vw; }
          @media only screen and (min-width: 769px) {
            #meshitomo .meshitomo--coto--profile--cont--photo {
              width: calc(241 /1300 * 100vw);
              margin-top: 0; } }
          @media only screen and (min-width: 1301px) {
            #meshitomo .meshitomo--coto--profile--cont--photo {
              width: 241px; } }
        #meshitomo .meshitomo--coto--profile--cont--text {
          width: 51.87vw; }
          @media only screen and (min-width: 769px) {
            #meshitomo .meshitomo--coto--profile--cont--text {
              width: calc(520 /1300 * 100vw);
              margin-top: calc(22 /1300 * 100vw); } }
          @media only screen and (min-width: 1301px) {
            #meshitomo .meshitomo--coto--profile--cont--text {
              width: 520px;
              margin-top: 22px; } }
        #meshitomo .meshitomo--coto--profile--cont--title {
          width: 46.25vw; }
          @media only screen and (min-width: 769px) {
            #meshitomo .meshitomo--coto--profile--cont--title {
              width: calc(364 /1300 * 100vw); } }
          @media only screen and (min-width: 1301px) {
            #meshitomo .meshitomo--coto--profile--cont--title {
              width: 364px; } }
        #meshitomo .meshitomo--coto--profile--cont--text {
          padding: 2.968vw 0 1.875vw;
          font-size: 2.5vw;
          font-weight: bold;
          line-height: 1.5;
          color: #64230a; }
          @media only screen and (min-width: 769px) {
            #meshitomo .meshitomo--coto--profile--cont--text {
              padding: calc(22 /1300 * 100vw) 0 calc(25 /1300 * 100vw);
              font-size: calc(20 /1300 * 100vw); } }
          @media only screen and (min-width: 1301px) {
            #meshitomo .meshitomo--coto--profile--cont--text {
              padding: 22px 0 25px;
              font-size: 1.4rem; } }
        #meshitomo .meshitomo--coto--profile--cont--btn {
          width: 35.937vw;
          margin: 0 auto; }
          @media only screen and (min-width: 769px) {
            #meshitomo .meshitomo--coto--profile--cont--btn {
              width: calc(192 /1300 * 100vw); } }
          @media only screen and (min-width: 1301px) {
            #meshitomo .meshitomo--coto--profile--cont--btn {
              width: 192px; } }
  #meshitomo .meshitomo--kikko {
    position: relative;
    background-image: url("/kikkoman/meshitomo/img/bg_beige.jpg");
    background-size: auto;
    background-repeat: none;
    background-position: top center;
    padding-bottom: 13.281vw; }
    @media only screen and (min-width: 769px) {
      #meshitomo .meshitomo--kikko {
        background-size: cover;
        background-repeat: no-repeat;
        padding-top: calc(50 /1300 * 100vw);
        padding-bottom: calc(100 /1300 * 100vw); } }
    @media only screen and (min-width: 1301px) {
      #meshitomo .meshitomo--kikko {
        padding-top: 50px;
        padding-bottom: 100px; } }
    #meshitomo .meshitomo--kikko--title {
      position: relative;
      width: 100vw;
      height: 65.156vw; }
      @media only screen and (min-width: 769px) {
        #meshitomo .meshitomo--kikko--title {
          background-color: #fff;
          background-image: url("/kikkoman/meshitomo/img/bg_recipe_ti_pc.png");
          background-repeat: repeat-x;
          background-size: auto;
          background-position: top center;
          width: 100%;
          height: calc(580 /1300 * 100vw); } }
      @media only screen and (min-width: 1301px) {
        #meshitomo .meshitomo--kikko--title {
          height: 580px; } }
      #meshitomo .meshitomo--kikko--title--visual {
        width: 100vw; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--kikko--title--visual {
            height: calc(489 /1300 * 100vw);
            margin: calc(50 /1300 * 100vw) auto 0; } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--kikko--title--visual {
            width: 1300px;
            height: 489px;
            margin: 50px auto 0; } }
      #meshitomo .meshitomo--kikko--title--text {
        position: absolute;
        top: 43.125vw;
        width: 100vw;
        font-size: 3.281vw;
        font-weight: bold;
        text-align: center;
        line-height: 1.5;
        color: #64230a; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--kikko--title--text {
            top: calc(392 /1300 * 100vw);
            left: 50%;
            transform: translateX(calc(28 /1300 * 100vw));
            width: calc(540 /1300 * 100vw);
            font-size: calc(25 /1300 * 100vw); } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--kikko--title--text {
            top: 392px;
            transform: translateX(28px);
            width: 540px;
            font-size: 1.8rem; } }
    #meshitomo .meshitomo--kikko--recipe {
      width: 100vw;
      padding: 9.68vw 0 0; }
      @media only screen and (min-width: 769px) {
        #meshitomo .meshitomo--kikko--recipe {
          padding: calc(99 /1300 * 100vw) 0 0; } }
      @media only screen and (min-width: 1301px) {
        #meshitomo .meshitomo--kikko--recipe {
          width: 100%;
          padding: 99px 0 0; } }
      #meshitomo .meshitomo--kikko--recipe--wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 90.625vw;
        margin: 0 auto; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--kikko--recipe--wrap {
            width: calc(1190 /1300 * 100vw); } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--kikko--recipe--wrap {
            width: 1190px; } }
      #meshitomo .meshitomo--kikko--recipe--thum {
        width: 43.125vw;
        background-color: #fff;
        filter: drop-shadow(1vw 1vw 1vw rgba(0, 0, 0, 0.4));
        margin-bottom: 9.62vw; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--kikko--recipe--thum {
            filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.4));
            margin-bottom: calc(56 /1300 * 100vw);
            width: calc(386 /1300 * 100vw);
            margin-bottom: calc(68 /1300 * 100vw); } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--kikko--recipe--thum {
            width: 386px;
            filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.4));
            margin-bottom: 68px; } }
        #meshitomo .meshitomo--kikko--recipe--thum:hover {
          opacity: 0.8;
          text-decoration: none; }
      #meshitomo .meshitomo--kikko--recipe--ph {
        width: 43.125vw;
        height: 31.56vw;
        position: relative; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--kikko--recipe--ph {
            width: calc(386 /1300 * 100vw);
            height: calc(283 /1300 * 100vw); } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--kikko--recipe--ph {
            width: 386px;
            height: 283px; } }
        #meshitomo .meshitomo--kikko--recipe--ph .meshitomo--recipe--icon {
          position: absolute;
          right: 0;
          bottom: -1.3vw; }
          @media only screen and (min-width: 769px) {
            #meshitomo .meshitomo--kikko--recipe--ph .meshitomo--recipe--icon {
              bottom: calc(-22 /1300 * 100vw); } }
          @media only screen and (min-width: 1301px) {
            #meshitomo .meshitomo--kikko--recipe--ph .meshitomo--recipe--icon {
              bottom: -22px; } }
          #meshitomo .meshitomo--kikko--recipe--ph .meshitomo--recipe--icon img {
            width: 9.375vw;
            height: auto; }
            @media only screen and (min-width: 769px) {
              #meshitomo .meshitomo--kikko--recipe--ph .meshitomo--recipe--icon img {
                width: calc(99 /1300 * 100vw); } }
            @media only screen and (min-width: 1301px) {
              #meshitomo .meshitomo--kikko--recipe--ph .meshitomo--recipe--icon img {
                width: 99px; } }
      #meshitomo .meshitomo--kikko--recipe--title {
        display: table-cell;
        vertical-align: middle;
        width: 43.28vw;
        height: 3.75em;
        font-size: 2.8vw;
        font-weight: bold;
        color: #64230a;
        text-align: center;
        padding-top: 0.25em; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--kikko--recipe--title {
            width: calc(386 /1300 * 100vw);
            font-size: calc(20 /1300 * 100vw);
            height: 3.6em;
            padding-top: 0.3em; } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--kikko--recipe--title {
            width: 386px;
            font-size: 1.5rem; } }
      #meshitomo .meshitomo--kikko--recipe--btn {
        background-color: #64230a;
        color: #fff;
        font-size: 3.125vw;
        text-align: center;
        padding: 1.2vw 0 1vw; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--kikko--recipe--btn {
            font-size: calc(22 /1300 * 100vw);
            padding: calc(12 /1300 * 100vw) 0 calc(10 /1300 * 100vw); } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--kikko--recipe--btn {
            font-size: 1.4rem;
            padding: 12px 0 10px; } }
      #meshitomo .meshitomo--kikko--recipe--illust {
        width: 43.125vw;
        text-align: center; }
        @media only screen and (min-width: 769px) {
          #meshitomo .meshitomo--kikko--recipe--illust {
            width: calc(785 /1300 * 100vw); } }
        @media only screen and (min-width: 1301px) {
          #meshitomo .meshitomo--kikko--recipe--illust {
            width: 785px; } }
