@charset "UTF-8";
body {
  width: 100%; }

.yt-20th-splash {
  width: 100%;
  height: 200vh;
  overflow: hidden;
  background-color: #fff;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 999; }
  @media only screen and (min-width: 769px) {
    .yt-20th-splash {
      top: calc(110/ 1200 * 1080px); } }
  @media only screen and (min-width: 1080px) {
    .yt-20th-splash {
      top: calc(110/ 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .yt-20th-splash {
      top: 110px; } }
  .yt-20th-splash .splash--visual {
    width: 100%;
    height: calc(70vh - 50px);
    margin-top: 30vw;
    background-image: url("../img/opening_pc.jpg");
    background-position: center center;
    background-size: cover;
    transform: scale(1.15);
    animation: zoomin-sp 2.5s cubic-bezier(0.34, 0.37, 0.51, 0.96) 1s forwards; }
    @media only screen and (min-width: 769px) {
      .yt-20th-splash .splash--visual {
        width: 100%;
        height: calc(100vh - 110px);
        margin-top: 0;
        background-image: url("../img/opening_pc.jpg");
        background-position: center center;
        background-size: cover;
        transform: scale(1.25);
        animation: zoomin 2.5s cubic-bezier(0.34, 0.37, 0.51, 0.96) 1s forwards; } }
  .yt-20th-splash .splash--visual--spmask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(100vh - 50px);
    background-image: url("../img/op_mask_sp.png");
    background-position: top center;
    background-size: cover; }
    @media only screen and (min-width: 769px) {
      .yt-20th-splash .splash--visual--spmask {
        display: none; } }
  .yt-20th-splash .splash--yeah--wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; }
    @media only screen and (min-width: 769px) {
      .yt-20th-splash .splash--yeah--wrap {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1000px;
        height: 100vh; } }
    .yt-20th-splash .splash--yeah--wrap .splash--yeah01 {
      position: absolute;
      width: 42vw;
      top: 7.5vw;
      left: 8.5vw;
      opacity: 0; }
      @media only screen and (min-width: 769px) {
        .yt-20th-splash .splash--yeah--wrap .splash--yeah01 {
          width: 22.6vw;
          top: 4.5vw;
          left: calc(50% - 45.2vw); } }
    .yt-20th-splash .splash--yeah--wrap .splash--yeah02 {
      position: absolute;
      width: 34.66vw;
      top: 19.33vw;
      left: 59.73vw;
      opacity: 0; }
      @media only screen and (min-width: 769px) {
        .yt-20th-splash .splash--yeah--wrap .splash--yeah02 {
          width: 21.2vw;
          top: 7.2vw;
          left: calc(50% + 10.6vw); } }
    .yt-20th-splash .splash--yeah--wrap .splash--yeah03 {
      position: absolute;
      width: 37.33vw;
      bottom: 15.33vw;
      left: 34.13vw;
      opacity: 0; }
      @media only screen and (min-width: 769px) {
        .yt-20th-splash .splash--yeah--wrap .splash--yeah03 {
          width: 21.2vw;
          bottom: 10vw;
          left: calc(50% - 10.6vw); } }
    .yt-20th-splash .splash--yeah--wrap .splash--yeah01.active, .yt-20th-splash .splash--yeah--wrap .splash--yeah02.active, .yt-20th-splash .splash--yeah--wrap .splash--yeah03.active {
      animation: upin 0.2s ease-out 0.5s forwards; }
  .yt-20th-splash img {
    width: 100%;
    height: auto;
    line-height: 0;
    vertical-align: bottom; }
@keyframes zoomin-sp {
  0% {
    transform: scale(1.15); }
  100% {
    transform: scale(1.2); } }
@keyframes zoomin {
  0% {
    transform: scale(1.25); }
  100% {
    transform: scale(1.3); } }
.yt-20th-splash-end {
  width: 100%;
  height: 100vh; }

.yt-20th {
  display: none;
  width: 100%;
  overflow-x: hidden;
  /*キービジュアル*/
  /*まずはカクテルを準備しよう！*/
  /*さぁ、楽しいパーティー*/
  /*オススメの組み合わせをご紹介*/
  /*yeah!*/
  /*プレゼント*/
  /*パーティ-演出キット*/
  /*ending*/
  /*レシピ詳細*/ }
  .yt-20th h1, .yt-20th h2, .yt-20th h3, .yt-20th div, .yt-20th p, .yt-20th ul, .yt-20th li {
    margin: 0;
    padding: 0;
    box-sizing: border-box; }
  .yt-20th li {
    list-style: none; }
  .yt-20th img {
    width: 100%;
    height: auto;
    line-height: 0;
    vertical-align: bottom; }
  @media only screen and (min-width: 769px) {
    .yt-20th a img {
      transition: all 0.3s ease; } }
  @media only screen and (min-width: 769px) {
    .yt-20th a:hover img {
      opacity: 0.7; } }
  .yt-20th sup {
    font-size: 0.7em; }
  .yt-20th .pcOnly {
    display: none; }
    @media only screen and (min-width: 769px) {
      .yt-20th .pcOnly {
        display: inline; } }
  .yt-20th .spOnly {
    display: inline; }
    @media only screen and (min-width: 769px) {
      .yt-20th .spOnly {
        display: none; } }
  .yt-20th .kv {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url("../img/mv_ph_sp.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover; }
    @media only screen and (min-width: 769px) {
      .yt-20th .kv {
        width: 1080px;
        height: inherit;
        aspect-ratio: 1450 / 735;
        background-image: url("../img/mv_ph_pc.jpg");
        background-size: 100% auto; } }
    @media only screen and (min-width: 1080px) {
      .yt-20th .kv {
        width: 105%;
        height: inherit;
        aspect-ratio: 1450 / 735;
        background-image: url("../img/mv_ph_pc.jpg");
        background-size: 100% auto; } }
    .yt-20th .kv--inner {
      position: relative;
      width: 100vw; }
      @media only screen and (min-width: 769px) {
        .yt-20th .kv--inner {
          width: calc(1100/ 1200 * 1080px);
          margin: 0 auto; } }
      @media only screen and (min-width: 1080px) {
        .yt-20th .kv--inner {
          width: calc(1100/ 1200 * 100vw); } }
      @media only screen and (min-width: 1200px) {
        .yt-20th .kv--inner {
          width: 1100px; } }
      .yt-20th .kv--inner--title {
        position: absolute;
        top: 44.8vw;
        left: 13.26vw;
        width: 73.46vw;
        z-index: 11; }
        @media only screen and (min-width: 769px) {
          .yt-20th .kv--inner--title {
            top: calc(54/ 1200 * 1080px);
            left: calc(304/ 1200 * 1080px);
            width: calc(503/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .kv--inner--title {
            top: calc(54/ 1200 * 100vw);
            left: calc(304/ 1200 * 100vw);
            width: calc(503/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .kv--inner--title {
            top: 54px;
            left: 304px;
            width: 503px; } }
      .yt-20th .kv--inner--catch1 {
        position: absolute;
        top: 145.86vw;
        right: 45.46vw;
        width: 48.26vw;
        z-index: 9; }
        @media only screen and (min-width: 769px) {
          .yt-20th .kv--inner--catch1 {
            width: calc(363/ 1200 * 1080px);
            top: calc(429/ 1200 * 1080px);
            right: calc(175/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .kv--inner--catch1 {
            width: calc(363/ 1200 * 100vw);
            top: calc(429/ 1200 * 100vw);
            right: calc(175/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .kv--inner--catch1 {
            width: 363px;
            top: 429px;
            right: 175px; } }
        .yt-20th .kv--inner--catch1 .ribontext {
          clip-path: inset(0 100% 0 0); }
          .yt-20th .kv--inner--catch1 .ribontext img {
            width: 48.26vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .kv--inner--catch1 .ribontext img {
                width: calc(363/ 1200 * 1080px);
                height: calc(50/ 1200 * 1080px); } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .kv--inner--catch1 .ribontext img {
                width: calc(448/ 1200 * 100vw);
                height: calc(50/ 1200 * 100vw); } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .kv--inner--catch1 .ribontext img {
                width: 363px;
                height: 50px; } }
          .yt-20th .kv--inner--catch1 .ribontext.active {
            animation: ribontext 0.5s ease-out 2s forwards; }
@keyframes ribontext {
  from {
    clip-path: inset(0 100% 0 0); }
  to {
    clip-path: inset(0 0 0 0); } }
      .yt-20th .kv--inner--catch2 {
        position: absolute;
        top: 150.93vw;
        right: 31.6vw;
        width: 48.8vw;
        z-index: 10; }
        @media only screen and (min-width: 769px) {
          .yt-20th .kv--inner--catch2 {
            width: calc(363/ 1200 * 1080px);
            top: calc(468/ 1200 * 1080px);
            right: calc(87/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .kv--inner--catch2 {
            width: calc(363/ 1200 * 100vw);
            top: calc(468/ 1200 * 100vw);
            right: calc(87/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .kv--inner--catch2 {
            width: 363px;
            top: 468px;
            right: 87px; } }
        .yt-20th .kv--inner--catch2 .ribontext {
          clip-path: inset(0 100% 0 0); }
          .yt-20th .kv--inner--catch2 .ribontext img {
            display: block;
            width: 48.26vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .kv--inner--catch2 .ribontext img {
                width: calc(363/ 1200 * 1080px);
                height: calc(50/ 1200 * 1080px); } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .kv--inner--catch2 .ribontext img {
                width: calc(448/ 1200 * 100vw);
                height: calc(50/ 1200 * 100vw); } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .kv--inner--catch2 .ribontext img {
                width: 363px;
                height: 50px; } }
          .yt-20th .kv--inner--catch2 .ribontext.active {
            animation: ribontext 0.5s ease-out 2.5s forwards; }
    .yt-20th .kv--brush {
      position: absolute;
      bottom: -15vw;
      left: -110vw;
      width: 320vw;
      transform-origin: top center;
      transition: all 1s ease-in;
      transform: rotate(90deg) translate(-150%, 0); }
      @media only screen and (min-width: 769px) {
        .yt-20th .kv--brush {
          width: 190%;
          top: 0;
          bottom: inherit;
          left: -42%;
          transition: all 1s ease-in;
          transform: rotate(95deg) translate(-90%, 0); } }
      .yt-20th .kv--brush.active {
        transform: rotate(0) translate(0, 0); }
  .yt-20th .ready--title {
    width: 80.4vw;
    margin: 14.13vw auto 0; }
    @media only screen and (min-width: 769px) {
      .yt-20th .ready--title {
        margin: calc(100/ 1200 * 1080px) auto 0;
        width: calc(705/ 1200 * 1080px); } }
    @media only screen and (min-width: 1080px) {
      .yt-20th .ready--title {
        margin: calc(100/ 1200 * 100vw) auto 0;
        width: calc(705/ 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .yt-20th .ready--title {
        margin: 100px auto 0;
        width: 705px; } }
  .yt-20th .ready {
    margin: 2.53vw auto 0;
    width: 100vw;
    background-color: #f2c600;
    background-image: url("../img/bg_yellow_top_sp.png");
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat; }
    @media only screen and (min-width: 769px) {
      .yt-20th .ready {
        margin: calc(50/ 1200 * 1080px) auto 0;
        background-image: url("../img/bg_yellow_top_pc.png"); } }
    @media only screen and (min-width: 1080px) {
      .yt-20th .ready {
        margin: calc(50/ 1200 * 100vw) auto 0; } }
    @media only screen and (min-width: 1200px) {
      .yt-20th .ready {
        margin: 50px auto 0;
        background-image: url("../img/bg_yellow_top_pcl.png");
        background-size: auto; } }
    @media only screen and (min-width: 2000px) {
      .yt-20th .ready {
        background-size: 100% auto; } }
    .yt-20th .ready--inner {
      position: relative;
      width: 100vw;
      padding: 15.73vw 0 0; }
      @media only screen and (min-width: 769px) {
        .yt-20th .ready--inner {
          width: calc(1100/ 1200 * 1080px);
          padding: calc(128/ 1200 * 1080px) 0 0;
          margin: 0 auto; } }
      @media only screen and (min-width: 1080px) {
        .yt-20th .ready--inner {
          width: calc(1100/ 1200 * 100vw);
          padding: calc(128/ 1200 * 100vw) 0 0; } }
      @media only screen and (min-width: 1200px) {
        .yt-20th .ready--inner {
          width: 1100px;
          padding: 128px 0 0; } }
      .yt-20th .ready--inner--title {
        width: 86.13vw;
        margin: 0 auto; }
        @media only screen and (min-width: 769px) {
          .yt-20th .ready--inner--title {
            width: calc(837/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .ready--inner--title {
            width: calc(837/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .ready--inner--title {
            width: 837px; } }
      .yt-20th .ready--inner--wrap {
        width: 82vw;
        margin: 7.06vw auto 0;
        padding: 5.86vw 0 5vw;
        background-image: url("../img/bg_ready_drink_sp.svg");
        background-size: cover; }
        @media only screen and (min-width: 769px) {
          .yt-20th .ready--inner--wrap {
            width: calc(1070/ 1200 * 1080px);
            margin: calc(54/ 1200 * 1080px) auto 0;
            padding: calc(66/ 1200 * 1080px) 0 calc(60/ 1200 * 1080px);
            background-image: url("../img/bg_ready_drink_pc.svg");
            background-size: cover; } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .ready--inner--wrap {
            width: calc(1070/ 1200 * 100vw);
            margin: calc(54/ 1200 * 100vw) auto 0;
            padding: calc(66/ 1200 * 100vw) 0 calc(60/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .ready--inner--wrap {
            width: 1070px;
            margin: 54px auto 0;
            padding: 66px 0 60px; } }
        .yt-20th .ready--inner--wrap--lead {
          width: 65.46vw;
          margin: 0 auto; }
          @media only screen and (min-width: 769px) {
            .yt-20th .ready--inner--wrap--lead {
              width: calc(446/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .ready--inner--wrap--lead {
              width: calc(446/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .ready--inner--wrap--lead {
              width: 446px; } }
        .yt-20th .ready--inner--wrap--comb {
          width: 50.66vw;
          margin: 6.93vw auto 0; }
          @media only screen and (min-width: 769px) {
            .yt-20th .ready--inner--wrap--comb {
              width: calc(902/ 1200 * 1080px);
              margin: calc(57/ 1200 * 1080px) auto 0;
              display: flex;
              justify-content: space-between;
              align-items: center; } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .ready--inner--wrap--comb {
              width: calc(902/ 1200 * 100vw);
              margin: calc(57/ 1200 * 100vw) auto 0; } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .ready--inner--wrap--comb {
              width: 902px;
              margin: 57px auto 0; } }
          @media only screen and (min-width: 769px) {
            .yt-20th .ready--inner--wrap--comb li {
              width: calc(379/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .ready--inner--wrap--comb li {
              width: calc(379/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .ready--inner--wrap--comb li {
              width: 379px; } }
          .yt-20th .ready--inner--wrap--comb li.multi {
            width: 8.8vw;
            margin: 3.06vw auto 0; }
            @media only screen and (min-width: 769px) {
              .yt-20th .ready--inner--wrap--comb li.multi {
                width: calc(66/ 1200 * 1080px);
                margin: 0 0 calc(80/ 1200 * 1080px); } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .ready--inner--wrap--comb li.multi {
                width: calc(66/ 1200 * 100vw);
                margin: 0 0 calc(80/ 1200 * 100vw); } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .ready--inner--wrap--comb li.multi {
                width: 66px;
                margin: 0 0 80px; } }
          .yt-20th .ready--inner--wrap--comb li.cont2 {
            margin-top: 4vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .ready--inner--wrap--comb li.cont2 {
                margin-top: 0; } }
          .yt-20th .ready--inner--wrap--comb li .cap {
            margin-top: 2.8vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .ready--inner--wrap--comb li .cap {
                margin-top: calc(29/ 1200 * 1080px); } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .ready--inner--wrap--comb li .cap {
                margin-top: calc(29/ 1200 * 100vw); } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .ready--inner--wrap--comb li .cap {
                margin-top: 29px; } }
  .yt-20th .start {
    margin: 23vw auto 14.13vw;
    width: 100vw; }
    @media only screen and (min-width: 769px) {
      .yt-20th .start {
        margin: calc(95/ 1200 * 1080px) auto calc(100/ 1200 * 1080px); } }
    @media only screen and (min-width: 1080px) {
      .yt-20th .start {
        margin: calc(95/ 1200 * 100vw) auto calc(100/ 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .yt-20th .start {
        margin: 95px auto 100px; } }
    .yt-20th .start--inner {
      position: relative;
      width: 100vw;
      height: 375.33vw; }
      @media only screen and (min-width: 769px) {
        .yt-20th .start--inner {
          width: calc(1100/ 1200 * 1080px);
          height: calc(2068/ 1200 * 1080px);
          margin: 0 auto; } }
      @media only screen and (min-width: 1080px) {
        .yt-20th .start--inner {
          width: calc(1100/ 1200 * 100vw);
          height: calc(2068/ 1200 * 100vw); } }
      @media only screen and (min-width: 1200px) {
        .yt-20th .start--inner {
          width: 1100px;
          height: 2068px; } }
      .yt-20th .start--inner--title {
        width: 87.06vw;
        margin: 0 auto; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner--title {
            width: calc(725/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner--title {
            width: calc(725/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner--title {
            width: 725px; } }
      .yt-20th .start--inner--01 {
        position: absolute;
        top: 15.2vw;
        left: 6.93vw;
        width: 85.86vw;
        height: 54.4vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner--01 {
            top: calc(124/ 1200 * 1080px);
            left: calc(204/ 1200 * 1080px);
            width: calc(714/ 1200 * 1080px);
            height: calc(455/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner--01 {
            top: calc(124/ 1200 * 100vw);
            left: calc(204/ 1200 * 100vw);
            width: calc(714/ 1200 * 100vw);
            height: calc(455/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner--01 {
            top: 124px;
            left: 204px;
            width: 714px;
            height: 455px; } }
        .yt-20th .start--inner--01--ph {
          position: absolute;
          width: 85.86vw;
          top: 0;
          left: 0; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--01--ph {
              width: calc(712/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--01--ph {
              width: calc(712/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--01--ph {
              width: 712px; } }
        .yt-20th .start--inner--01--co01 {
          position: absolute;
          width: 11.6vw;
          top: -4vw;
          left: -8.26vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--01--co01 {
              width: calc(96/ 1200 * 1080px);
              top: calc(-75/ 1200 * 1080px);
              left: calc(-110/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--01--co01 {
              width: calc(96/ 1200 * 100vw);
              top: calc(-75/ 1200 * 100vw);
              left: calc(-110/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--01--co01 {
              width: 96px;
              top: -75px;
              left: -110px; } }
        .yt-20th .start--inner--01--co02 {
          position: absolute;
          width: 18.4vw;
          bottom: -9vw;
          right: -5vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--01--co02 {
              width: calc(152/ 1200 * 1080px);
              bottom: calc(20/ 1200 * 1080px);
              right: calc(-115/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--01--co02 {
              width: calc(152/ 1200 * 100vw);
              bottom: calc(20/ 1200 * 100vw);
              right: calc(-115/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--01--co02 {
              width: 152px;
              bottom: 20px;
              right: -115px; } }
        .yt-20th .start--inner--01--yeah {
          position: absolute;
          width: 23.73vw;
          top: -3.73vw;
          left: 27.06vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--01--yeah {
              width: calc(199/ 1200 * 1080px);
              top: calc(-32/ 1200 * 1080px);
              left: calc(226/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--01--yeah {
              width: calc(199/ 1200 * 100vw);
              top: calc(-32/ 1200 * 100vw);
              left: calc(226/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--01--yeah {
              width: 199px;
              top: -32px;
              left: 226px; } }
      .yt-20th .start--inner--yeah {
        position: absolute;
        width: 48.93vw;
        top: 76.26vw;
        left: 27.33vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner--yeah {
            width: calc(367/ 1200 * 1080px);
            top: calc(720/ 1200 * 1080px);
            left: calc(368/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner--yeah {
            width: calc(367/ 1200 * 100vw);
            top: calc(720/ 1200 * 100vw);
            left: calc(368/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner--yeah {
            width: 367px;
            top: 720px;
            left: 368px; } }
      .yt-20th .start--inner--wallaby {
        position: absolute;
        top: 114.66vw;
        left: 2.66vw;
        width: 21.46vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner--wallaby {
            width: calc(161/ 1200 * 1080px);
            top: calc(980/ 1200 * 1080px);
            left: calc(160/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner--wallaby {
            width: calc(161/ 1200 * 100vw);
            top: calc(980/ 1200 * 100vw);
            left: calc(160/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner--wallaby {
            width: 161px;
            top: 980px;
            left: 160px; } }
      .yt-20th .start--inner--02 {
        position: absolute;
        width: 40.66vw;
        top: 147.73vw;
        left: 6.26vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner--02 {
            width: calc(320/ 1200 * 1080px);
            top: calc(687/ 1200 * 1080px);
            left: calc(-16/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner--02 {
            width: calc(320/ 1200 * 100vw);
            top: calc(687/ 1200 * 100vw);
            left: calc(-16/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner--02 {
            width: 320px;
            top: 687px;
            left: -16px; } }
        .yt-20th .start--inner--02--ph {
          width: 40.66vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--02--ph {
              width: calc(320/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--02--ph {
              width: calc(320/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--02--ph {
              width: 320px; } }
        .yt-20th .start--inner--02--yeah {
          position: absolute;
          width: 18vw;
          top: -9.6vw;
          left: 8.93vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--02--yeah {
              width: calc(143/ 1200 * 1080px);
              top: calc(-78/ 1200 * 1080px);
              left: calc(70/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--02--yeah {
              width: calc(143/ 1200 * 100vw);
              top: calc(-78/ 1200 * 100vw);
              left: calc(70/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--02--yeah {
              width: 143px;
              top: -78px;
              left: 70px; } }
      .yt-20th .start--inner--03 {
        position: absolute;
        width: 40.8vw;
        top: 156.53vw;
        right: 6.66vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner--03 {
            width: calc(322/ 1200 * 1080px);
            top: calc(933/ 1200 * 1080px);
            right: 0; } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner--03 {
            width: calc(322/ 1200 * 100vw);
            top: calc(933/ 1200 * 100vw);
            right: 0; } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner--03 {
            width: 322px;
            top: 933px;
            right: 0; } }
        .yt-20th .start--inner--03--ph {
          width: 40.8vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--03--ph {
              width: calc(322/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--03--ph {
              width: calc(322/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--03--ph {
              width: 322px; } }
        .yt-20th .start--inner--03--yeah {
          position: absolute;
          width: 17.46vw;
          top: -12.26vw;
          left: 13.06vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--03--yeah {
              width: calc(138/ 1200 * 1080px);
              top: calc(-97/ 1200 * 1080px);
              left: calc(103/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--03--yeah {
              width: calc(138/ 1200 * 100vw);
              top: calc(-97/ 1200 * 100vw);
              left: calc(103/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--03--yeah {
              width: 138px;
              top: -97px;
              left: 103px; } }
      .yt-20th .start--inner--lead {
        position: absolute;
        width: 81.33vw;
        top: 192.93vw;
        left: 9.33vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner--lead {
            width: calc(532/ 1200 * 1080px);
            top: calc(1342/ 1200 * 1080px);
            left: calc(284/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner--lead {
            width: calc(532/ 1200 * 100vw);
            top: calc(1342/ 1200 * 100vw);
            left: calc(284/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner--lead {
            width: 532px;
            top: 1342px;
            left: 284px; } }
      .yt-20th .start--inner--04 {
        position: absolute;
        width: 39.06vw;
        bottom: 51.2vw;
        left: 19.6vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner--04 {
            width: calc(309/ 1200 * 1080px);
            bottom: calc(640/ 1200 * 1080px);
            left: calc(-28/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner--04 {
            width: calc(309/ 1200 * 100vw);
            bottom: calc(640/ 1200 * 100vw);
            left: calc(-28/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner--04 {
            width: 309px;
            bottom: 640px;
            left: -28px; } }
        .yt-20th .start--inner--04--ph {
          width: 39.06vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--04--ph {
              width: calc(309/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--04--ph {
              width: calc(309/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--04--ph {
              width: 309px; } }
        .yt-20th .start--inner--04--yeah {
          position: absolute;
          width: 18vw;
          top: -9.6vw;
          left: 10.4vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--04--yeah {
              width: calc(143/ 1200 * 1080px);
              top: calc(-75/ 1200 * 1080px);
              left: calc(82/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--04--yeah {
              width: calc(143/ 1200 * 100vw);
              top: calc(-75/ 1200 * 100vw);
              left: calc(82/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--04--yeah {
              width: 143px;
              top: -75px;
              left: 82px; } }
      .yt-20th .start--inner--05 {
        position: absolute;
        width: 36.53vw;
        bottom: 23.2vw;
        right: 8.93vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner--05 {
            width: calc(289/ 1200 * 1080px);
            bottom: calc(420/ 1200 * 1080px);
            right: calc(-7/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner--05 {
            width: calc(289/ 1200 * 100vw);
            bottom: calc(420/ 1200 * 100vw);
            right: calc(-7/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner--05 {
            width: 289px;
            bottom: 420px;
            right: -7px; } }
        .yt-20th .start--inner--05--ph {
          width: 40.8vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--05--ph {
              width: calc(289/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--05--ph {
              width: calc(289/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--05--ph {
              width: 289px; } }
        .yt-20th .start--inner--05--yeah {
          position: absolute;
          width: 18vw;
          top: -8vw;
          left: 9.6vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--05--yeah {
              width: calc(115/ 1200 * 1080px);
              top: calc(-62/ 1200 * 1080px);
              left: calc(76/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--05--yeah {
              width: calc(115/ 1200 * 100vw);
              top: calc(-62/ 1200 * 100vw);
              left: calc(76/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--05--yeah {
              width: 115px;
              top: -62px;
              left: 76px; } }
      .yt-20th .start--inner--06 {
        position: absolute;
        width: 38.4vw;
        bottom: 5.2vw;
        left: 10vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner--06 {
            width: calc(305/ 1200 * 1080px);
            bottom: 0;
            left: calc(-7/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner--06 {
            width: calc(305/ 1200 * 100vw);
            bottom: 0;
            left: calc(-7/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner--06 {
            width: 305px;
            bottom: 0;
            left: -7px; } }
        .yt-20th .start--inner--06--ph {
          width: 38.4vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--06--ph {
              width: calc(305/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--06--ph {
              width: calc(305/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--06--ph {
              width: 305px; } }
        .yt-20th .start--inner--06--yeah {
          position: absolute;
          width: 16.66vw;
          top: -1.46vw;
          left: 12vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .start--inner--06--yeah {
              width: calc(132/ 1200 * 1080px);
              top: calc(-89/ 1200 * 1080px);
              left: calc(95/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .start--inner--06--yeah {
              width: calc(132/ 1200 * 100vw);
              top: calc(-89/ 1200 * 100vw);
              left: calc(95/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .start--inner--06--yeah {
              width: 132px;
              top: -89px;
              left: 95px; } }
      .yt-20th .start--inner--co03 {
        position: absolute;
        width: 18.4vw;
        bottom: 67.466vw;
        left: -1.46vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner--co03 {
            width: calc(138/ 1200 * 1080px);
            bottom: calc(455/ 1200 * 1080px);
            left: calc(80/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner--co03 {
            width: calc(138/ 1200 * 100vw);
            bottom: calc(455/ 1200 * 100vw);
            left: calc(80/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner--co03 {
            width: 138px;
            bottom: 455px;
            left: 80px; } }
      .yt-20th .start--inner--co04 {
        position: absolute;
        width: 23.6vw;
        bottom: 0vw;
        right: 9.06vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner--co04 {
            width: calc(175/ 1200 * 1080px);
            bottom: calc(35/ 1200 * 1080px);
            right: calc(168/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner--co04 {
            width: calc(175/ 1200 * 100vw);
            bottom: calc(35/ 1200 * 100vw);
            right: calc(168/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner--co04 {
            width: 175px;
            bottom: 35px;
            right: 168px; } }
      .yt-20th .start--inner--prod {
        position: absolute;
        width: 73.73vw;
        bottom: 14.13vw;
        left: 12.93vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner--prod {
            width: calc(138/ 1200 * 1080px);
            bottom: calc(455/ 1200 * 1080px);
            left: calc(80/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner--prod {
            width: calc(138/ 1200 * 100vw);
            bottom: calc(455/ 1200 * 100vw);
            left: calc(80/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner--prod {
            width: 655px;
            bottom: 100px;
            left: 229px; } }
    .yt-20th .start--inner2 {
      position: relative;
      width: 100vw; }
      @media only screen and (min-width: 769px) {
        .yt-20th .start--inner2 {
          width: calc(1100/ 1200 * 1080px);
          margin: 0 auto; } }
      @media only screen and (min-width: 1080px) {
        .yt-20th .start--inner2 {
          width: calc(1100/ 1200 * 100vw); } }
      @media only screen and (min-width: 1200px) {
        .yt-20th .start--inner2 {
          width: 1100px; } }
      .yt-20th .start--inner2--prod {
        width: 73.73vw;
        margin: 10vw auto 0; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner2--prod {
            width: calc(655/ 1200 * 1080px);
            margin: calc(44/ 1200 * 1080px) auto 0; } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner2--prod {
            width: calc(655/ 1200 * 100vw);
            margin: calc(44/ 1200 * 100vw) auto 0; } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner2--prod {
            width: 655px;
            margin: 44px auto 0; } }
      .yt-20th .start--inner2--20th {
        position: absolute;
        width: 39.06vw;
        top: 2vw;
        left: 29.5vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .start--inner2--20th {
            width: calc(293/ 1200 * 1080px);
            left: calc(403/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .start--inner2--20th {
            width: calc(293/ 1200 * 100vw);
            left: calc(403/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .start--inner2--20th {
            width: 293px;
            top: 1px;
            left: 403px; } }
  .yt-20th .recipe {
    margin: 0 auto;
    padding: 6.66vw 0 5vw;
    width: 100vw;
    background-color: #f2c600;
    background-image: url("../img/bg_recipe_list_sp.png");
    background-size: 100% auto;
    background-position: top 10vw center;
    background-repeat: no-repeat; }
    @media only screen and (min-width: 769px) {
      .yt-20th .recipe {
        width: 100%;
        padding: calc(54/ 1200 * 1080px) 0 calc(150/ 1200 * 1080px);
        background-image: url("../img/bg_recipe_list_pc.png");
        background-size: auto; } }
    @media only screen and (min-width: 1080px) {
      .yt-20th .recipe {
        padding: calc(54/ 1200 * 100vw) 0 calc(150/ 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .yt-20th .recipe {
        padding: 54px 0 150px;
        background-image: url("../img/bg_recipe_list_pcl.png"); } }
    .yt-20th .recipe--inner {
      position: relative;
      width: 100vw; }
      @media only screen and (min-width: 769px) {
        .yt-20th .recipe--inner {
          width: calc(1100/ 1200 * 1080px);
          margin: 0 auto; } }
      @media only screen and (min-width: 1080px) {
        .yt-20th .recipe--inner {
          width: calc(1100/ 1200 * 100vw); } }
      @media only screen and (min-width: 1200px) {
        .yt-20th .recipe--inner {
          width: 1100px; } }
      .yt-20th .recipe--inner--title {
        width: 82.93vw;
        margin: 0 auto; }
        @media only screen and (min-width: 769px) {
          .yt-20th .recipe--inner--title {
            width: calc(740/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .recipe--inner--title {
            width: calc(740/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .recipe--inner--title {
            width: 740px; } }
      .yt-20th .recipe--inner .recipe_idx01, .yt-20th .recipe--inner .recipe_idx02, .yt-20th .recipe--inner .recipe_idx03, .yt-20th .recipe--inner .recipe_idx04, .yt-20th .recipe--inner .recipe_idx05, .yt-20th .recipe--inner .recipe_idx06 {
        position: relative;
        width: 82.4vw;
        height: 118vw;
        margin: 5.2vw auto 0; }
        @media only screen and (min-width: 769px) {
          .yt-20th .recipe--inner .recipe_idx01, .yt-20th .recipe--inner .recipe_idx02, .yt-20th .recipe--inner .recipe_idx03, .yt-20th .recipe--inner .recipe_idx04, .yt-20th .recipe--inner .recipe_idx05, .yt-20th .recipe--inner .recipe_idx06 {
            width: calc(950/ 1200 * 1080px);
            height: calc(421/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .recipe--inner .recipe_idx01, .yt-20th .recipe--inner .recipe_idx02, .yt-20th .recipe--inner .recipe_idx03, .yt-20th .recipe--inner .recipe_idx04, .yt-20th .recipe--inner .recipe_idx05, .yt-20th .recipe--inner .recipe_idx06 {
            width: calc(950/ 1200 * 100vw);
            height: calc(421/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .recipe--inner .recipe_idx01, .yt-20th .recipe--inner .recipe_idx02, .yt-20th .recipe--inner .recipe_idx03, .yt-20th .recipe--inner .recipe_idx04, .yt-20th .recipe--inner .recipe_idx05, .yt-20th .recipe--inner .recipe_idx06 {
            width: 950px;
            height: 421px;
            margin: 110px auto 0; } }
        .yt-20th .recipe--inner .recipe_idx01--ph, .yt-20th .recipe--inner .recipe_idx02--ph, .yt-20th .recipe--inner .recipe_idx03--ph, .yt-20th .recipe--inner .recipe_idx04--ph, .yt-20th .recipe--inner .recipe_idx05--ph, .yt-20th .recipe--inner .recipe_idx06--ph {
          position: relative;
          width: 82.4vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .recipe--inner .recipe_idx01--ph, .yt-20th .recipe--inner .recipe_idx02--ph, .yt-20th .recipe--inner .recipe_idx03--ph, .yt-20th .recipe--inner .recipe_idx04--ph, .yt-20th .recipe--inner .recipe_idx05--ph, .yt-20th .recipe--inner .recipe_idx06--ph {
              position: absolute;
              z-index: +10;
              top: 0;
              left: 0;
              width: calc(514/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .recipe--inner .recipe_idx01--ph, .yt-20th .recipe--inner .recipe_idx02--ph, .yt-20th .recipe--inner .recipe_idx03--ph, .yt-20th .recipe--inner .recipe_idx04--ph, .yt-20th .recipe--inner .recipe_idx05--ph, .yt-20th .recipe--inner .recipe_idx06--ph {
              width: calc(514/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .recipe--inner .recipe_idx01--ph, .yt-20th .recipe--inner .recipe_idx02--ph, .yt-20th .recipe--inner .recipe_idx03--ph, .yt-20th .recipe--inner .recipe_idx04--ph, .yt-20th .recipe--inner .recipe_idx05--ph, .yt-20th .recipe--inner .recipe_idx06--ph {
              width: 514px; } }
          .yt-20th .recipe--inner .recipe_idx01--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph--title {
            width: 40.13vw;
            margin: 0 auto; }
            @media only screen and (min-width: 769px) {
              .yt-20th .recipe--inner .recipe_idx01--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph--title {
                position: absolute;
                top: calc(357/ 1200 * 1080px);
                left: 50%;
                transform: translateX(-50%);
                width: calc(298/ 1200 * 1080px);
                margin: 0; } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .recipe--inner .recipe_idx01--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph--title {
                position: absolute;
                top: calc(357/ 1200 * 100vw);
                width: calc(298/ 1200 * 100vw); } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .recipe--inner .recipe_idx01--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph--title {
                top: 357px;
                width: 298px; } }
          .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx02--ph--title {
            width: 37.33vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx02--ph--title {
                width: calc(276/ 1200 * 1080px); } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx02--ph--title {
                width: calc(276/ 1200 * 100vw); } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx02--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx02--ph--title {
                width: 276px; } }
          .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx03--ph--title {
            width: 53.73vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx03--ph--title {
                width: calc(399/ 1200 * 1080px); } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx03--ph--title {
                width: calc(399/ 1200 * 100vw); } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx03--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx03--ph--title {
                width: 399px; } }
          .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx04--ph--title {
            width: 19.2vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx04--ph--title {
                width: calc(142/ 1200 * 1080px); } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx04--ph--title {
                width: calc(142/ 1200 * 100vw); } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx04--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx04--ph--title {
                width: 142px; } }
          .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx05--ph--title {
            width: 44.93vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx05--ph--title {
                width: calc(337/ 1200 * 1080px); } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx05--ph--title {
                width: calc(337/ 1200 * 100vw); } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx05--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx05--ph--title {
                width: 337px; } }
          .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx06--ph--title {
            width: 32vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx06--ph--title {
                width: calc(240/ 1200 * 1080px); } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx06--ph--title {
                width: calc(240/ 1200 * 100vw); } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .recipe--inner .recipe_idx01--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx02--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx03--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx04--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx05--ph .recipe_idx06--ph--title, .yt-20th .recipe--inner .recipe_idx06--ph .recipe_idx06--ph--title {
                width: 240px; } }
          .yt-20th .recipe--inner .recipe_idx01--ph--img, .yt-20th .recipe--inner .recipe_idx02--ph--img, .yt-20th .recipe--inner .recipe_idx03--ph--img, .yt-20th .recipe--inner .recipe_idx04--ph--img, .yt-20th .recipe--inner .recipe_idx05--ph--img, .yt-20th .recipe--inner .recipe_idx06--ph--img {
            position: relative;
            width: 82.4vw;
            height: 54.34vw;
            margin-top: 3.2vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .recipe--inner .recipe_idx01--ph--img, .yt-20th .recipe--inner .recipe_idx02--ph--img, .yt-20th .recipe--inner .recipe_idx03--ph--img, .yt-20th .recipe--inner .recipe_idx04--ph--img, .yt-20th .recipe--inner .recipe_idx05--ph--img, .yt-20th .recipe--inner .recipe_idx06--ph--img {
                width: calc(514/ 1200 * 1080px);
                height: calc(339/ 1200 * 1080px);
                margin: 0; } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .recipe--inner .recipe_idx01--ph--img, .yt-20th .recipe--inner .recipe_idx02--ph--img, .yt-20th .recipe--inner .recipe_idx03--ph--img, .yt-20th .recipe--inner .recipe_idx04--ph--img, .yt-20th .recipe--inner .recipe_idx05--ph--img, .yt-20th .recipe--inner .recipe_idx06--ph--img {
                width: calc(514/ 1200 * 100vw);
                height: calc(339/ 1200 * 100vw);
                margin: 0; } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .recipe--inner .recipe_idx01--ph--img, .yt-20th .recipe--inner .recipe_idx02--ph--img, .yt-20th .recipe--inner .recipe_idx03--ph--img, .yt-20th .recipe--inner .recipe_idx04--ph--img, .yt-20th .recipe--inner .recipe_idx05--ph--img, .yt-20th .recipe--inner .recipe_idx06--ph--img {
                width: 514px;
                height: 339px; } }
          .yt-20th .recipe--inner .recipe_idx01--ph--bo, .yt-20th .recipe--inner .recipe_idx02--ph--bo, .yt-20th .recipe--inner .recipe_idx03--ph--bo, .yt-20th .recipe--inner .recipe_idx04--ph--bo, .yt-20th .recipe--inner .recipe_idx05--ph--bo, .yt-20th .recipe--inner .recipe_idx06--ph--bo {
            position: absolute;
            top: -1.46vw;
            left: -1.46vw;
            border-top: 1px solid #000;
            border-right: 1px solid #000;
            width: 82.4vw;
            height: 54.34vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .recipe--inner .recipe_idx01--ph--bo, .yt-20th .recipe--inner .recipe_idx02--ph--bo, .yt-20th .recipe--inner .recipe_idx03--ph--bo, .yt-20th .recipe--inner .recipe_idx04--ph--bo, .yt-20th .recipe--inner .recipe_idx05--ph--bo, .yt-20th .recipe--inner .recipe_idx06--ph--bo {
                top: calc(-9/ 1200 * 1080px);
                left: calc(-9/ 1200 * 1080px);
                border-top: 2px solid #000;
                border-right: 2px solid #000;
                width: calc(514/ 1200 * 1080px);
                height: calc(339/ 1200 * 1080px); } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .recipe--inner .recipe_idx01--ph--bo, .yt-20th .recipe--inner .recipe_idx02--ph--bo, .yt-20th .recipe--inner .recipe_idx03--ph--bo, .yt-20th .recipe--inner .recipe_idx04--ph--bo, .yt-20th .recipe--inner .recipe_idx05--ph--bo, .yt-20th .recipe--inner .recipe_idx06--ph--bo {
                top: calc(-9/ 1200 * 100vw);
                left: calc(-9/ 1200 * 100vw);
                border-top: 2px solid #000;
                border-right: 2px solid #000;
                width: calc(514/ 1200 * 100vw);
                height: calc(339/ 1200 * 100vw); } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .recipe--inner .recipe_idx01--ph--bo, .yt-20th .recipe--inner .recipe_idx02--ph--bo, .yt-20th .recipe--inner .recipe_idx03--ph--bo, .yt-20th .recipe--inner .recipe_idx04--ph--bo, .yt-20th .recipe--inner .recipe_idx05--ph--bo, .yt-20th .recipe--inner .recipe_idx06--ph--bo {
                top: -9px;
                left: -9px;
                border-top: 2px solid #000;
                border-right: 2px solid #000;
                width: 514px;
                height: 339px; } }
            .yt-20th .recipe--inner .recipe_idx01--ph--bo.active::after, .yt-20th .recipe--inner .recipe_idx02--ph--bo.active::after, .yt-20th .recipe--inner .recipe_idx03--ph--bo.active::after, .yt-20th .recipe--inner .recipe_idx04--ph--bo.active::after, .yt-20th .recipe--inner .recipe_idx05--ph--bo.active::after, .yt-20th .recipe--inner .recipe_idx06--ph--bo.active::after {
              content: '';
              position: absolute;
              left: 0;
              bottom: 0;
              border-left: solid 1px #000;
              animation: border_anim_bt 0.5s linear 0.5s forwards; }
              @media only screen and (min-width: 769px) {
                .yt-20th .recipe--inner .recipe_idx01--ph--bo.active::after, .yt-20th .recipe--inner .recipe_idx02--ph--bo.active::after, .yt-20th .recipe--inner .recipe_idx03--ph--bo.active::after, .yt-20th .recipe--inner .recipe_idx04--ph--bo.active::after, .yt-20th .recipe--inner .recipe_idx05--ph--bo.active::after, .yt-20th .recipe--inner .recipe_idx06--ph--bo.active::after {
                  border-left: solid 2px #000; } }
            .yt-20th .recipe--inner .recipe_idx01--ph--bo.active::before, .yt-20th .recipe--inner .recipe_idx02--ph--bo.active::before, .yt-20th .recipe--inner .recipe_idx03--ph--bo.active::before, .yt-20th .recipe--inner .recipe_idx04--ph--bo.active::before, .yt-20th .recipe--inner .recipe_idx05--ph--bo.active::before, .yt-20th .recipe--inner .recipe_idx06--ph--bo.active::before {
              content: '';
              position: absolute;
              right: 0;
              bottom: 0;
              border-bottom: solid 1px #000;
              animation: border_anim_rl 0.5s linear forwards; }
              @media only screen and (min-width: 769px) {
                .yt-20th .recipe--inner .recipe_idx01--ph--bo.active::before, .yt-20th .recipe--inner .recipe_idx02--ph--bo.active::before, .yt-20th .recipe--inner .recipe_idx03--ph--bo.active::before, .yt-20th .recipe--inner .recipe_idx04--ph--bo.active::before, .yt-20th .recipe--inner .recipe_idx05--ph--bo.active::before, .yt-20th .recipe--inner .recipe_idx06--ph--bo.active::before {
                  border-bottom: solid 2px #000; } }
          .yt-20th .recipe--inner .recipe_idx01--ph--bo-r, .yt-20th .recipe--inner .recipe_idx02--ph--bo-r, .yt-20th .recipe--inner .recipe_idx03--ph--bo-r, .yt-20th .recipe--inner .recipe_idx04--ph--bo-r, .yt-20th .recipe--inner .recipe_idx05--ph--bo-r, .yt-20th .recipe--inner .recipe_idx06--ph--bo-r {
            position: absolute;
            top: -1.46vw;
            left: -1.46vw;
            border-top: 1px solid #000;
            border-left: 1px solid #000;
            width: 82.4vw;
            height: 54.34vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .recipe--inner .recipe_idx01--ph--bo-r, .yt-20th .recipe--inner .recipe_idx02--ph--bo-r, .yt-20th .recipe--inner .recipe_idx03--ph--bo-r, .yt-20th .recipe--inner .recipe_idx04--ph--bo-r, .yt-20th .recipe--inner .recipe_idx05--ph--bo-r, .yt-20th .recipe--inner .recipe_idx06--ph--bo-r {
                top: calc(-9/ 1200 * 1080px);
                left: calc(-9/ 1200 * 1080px);
                border-top: 2px solid #000;
                border-left: 2px solid #000;
                width: calc(514/ 1200 * 1080px);
                height: calc(339/ 1200 * 1080px); } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .recipe--inner .recipe_idx01--ph--bo-r, .yt-20th .recipe--inner .recipe_idx02--ph--bo-r, .yt-20th .recipe--inner .recipe_idx03--ph--bo-r, .yt-20th .recipe--inner .recipe_idx04--ph--bo-r, .yt-20th .recipe--inner .recipe_idx05--ph--bo-r, .yt-20th .recipe--inner .recipe_idx06--ph--bo-r {
                top: calc(-9/ 1200 * 100vw);
                left: calc(-9/ 1200 * 100vw);
                border-top: 2px solid #000;
                border-left: 2px solid #000;
                width: calc(514/ 1200 * 100vw);
                height: calc(339/ 1200 * 100vw); } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .recipe--inner .recipe_idx01--ph--bo-r, .yt-20th .recipe--inner .recipe_idx02--ph--bo-r, .yt-20th .recipe--inner .recipe_idx03--ph--bo-r, .yt-20th .recipe--inner .recipe_idx04--ph--bo-r, .yt-20th .recipe--inner .recipe_idx05--ph--bo-r, .yt-20th .recipe--inner .recipe_idx06--ph--bo-r {
                top: -9px;
                left: -9px;
                border-top: 2px solid #000;
                border-left: 2px solid #000;
                width: 514px;
                height: 339px; } }
            .yt-20th .recipe--inner .recipe_idx01--ph--bo-r.active::after, .yt-20th .recipe--inner .recipe_idx02--ph--bo-r.active::after, .yt-20th .recipe--inner .recipe_idx03--ph--bo-r.active::after, .yt-20th .recipe--inner .recipe_idx04--ph--bo-r.active::after, .yt-20th .recipe--inner .recipe_idx05--ph--bo-r.active::after, .yt-20th .recipe--inner .recipe_idx06--ph--bo-r.active::after {
              content: '';
              position: absolute;
              right: 0;
              top: 0;
              border-right: solid 1px #000;
              animation: border_anim_bt 0.5s linear forwards; }
              @media only screen and (min-width: 769px) {
                .yt-20th .recipe--inner .recipe_idx01--ph--bo-r.active::after, .yt-20th .recipe--inner .recipe_idx02--ph--bo-r.active::after, .yt-20th .recipe--inner .recipe_idx03--ph--bo-r.active::after, .yt-20th .recipe--inner .recipe_idx04--ph--bo-r.active::after, .yt-20th .recipe--inner .recipe_idx05--ph--bo-r.active::after, .yt-20th .recipe--inner .recipe_idx06--ph--bo-r.active::after {
                  border-right: solid 2px #000; } }
            .yt-20th .recipe--inner .recipe_idx01--ph--bo-r.active::before, .yt-20th .recipe--inner .recipe_idx02--ph--bo-r.active::before, .yt-20th .recipe--inner .recipe_idx03--ph--bo-r.active::before, .yt-20th .recipe--inner .recipe_idx04--ph--bo-r.active::before, .yt-20th .recipe--inner .recipe_idx05--ph--bo-r.active::before, .yt-20th .recipe--inner .recipe_idx06--ph--bo-r.active::before {
              content: '';
              position: absolute;
              right: 0;
              bottom: 0;
              border-bottom: solid 1px #000;
              animation: border_anim_rl 0.5s linear 0.5s forwards; }
              @media only screen and (min-width: 769px) {
                .yt-20th .recipe--inner .recipe_idx01--ph--bo-r.active::before, .yt-20th .recipe--inner .recipe_idx02--ph--bo-r.active::before, .yt-20th .recipe--inner .recipe_idx03--ph--bo-r.active::before, .yt-20th .recipe--inner .recipe_idx04--ph--bo-r.active::before, .yt-20th .recipe--inner .recipe_idx05--ph--bo-r.active::before, .yt-20th .recipe--inner .recipe_idx06--ph--bo-r.active::before {
                  border-bottom: solid 2px #000; } }
        .yt-20th .recipe--inner .recipe_idx01--cnt, .yt-20th .recipe--inner .recipe_idx02--cnt, .yt-20th .recipe--inner .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx04--cnt, .yt-20th .recipe--inner .recipe_idx05--cnt, .yt-20th .recipe--inner .recipe_idx06--cnt {
          position: absolute;
          top: 64.5vw;
          left: 5.27vw;
          z-index: +1;
          width: 71.86vw;
          height: 32.53vw;
          background-image: url("../img/bg_pairing_sp.png");
          background-position: top center;
          background-size: 100% auto;
          background-repeat: no-repeat; }
          @media only screen and (min-width: 769px) {
            .yt-20th .recipe--inner .recipe_idx01--cnt, .yt-20th .recipe--inner .recipe_idx02--cnt, .yt-20th .recipe--inner .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx04--cnt, .yt-20th .recipe--inner .recipe_idx05--cnt, .yt-20th .recipe--inner .recipe_idx06--cnt {
              top: calc(45/ 1200 * 1080px);
              left: inherit;
              right: 0;
              width: calc(454/ 1200 * 1080px);
              height: calc(356/ 1200 * 1080px);
              background-image: url("../img/bg_pairing_pc.png"); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .recipe--inner .recipe_idx01--cnt, .yt-20th .recipe--inner .recipe_idx02--cnt, .yt-20th .recipe--inner .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx04--cnt, .yt-20th .recipe--inner .recipe_idx05--cnt, .yt-20th .recipe--inner .recipe_idx06--cnt {
              top: calc(45/ 1200 * 100vw);
              width: calc(454/ 1200 * 100vw);
              height: calc(356/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .recipe--inner .recipe_idx01--cnt, .yt-20th .recipe--inner .recipe_idx02--cnt, .yt-20th .recipe--inner .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx04--cnt, .yt-20th .recipe--inner .recipe_idx05--cnt, .yt-20th .recipe--inner .recipe_idx06--cnt {
              top: 45px;
              width: 454px;
              height: 356px; } }
          .yt-20th .recipe--inner .recipe_idx01--cnt--brush, .yt-20th .recipe--inner .recipe_idx02--cnt--brush, .yt-20th .recipe--inner .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx04--cnt--brush, .yt-20th .recipe--inner .recipe_idx05--cnt--brush, .yt-20th .recipe--inner .recipe_idx06--cnt--brush {
            position: absolute;
            top: 5.33vw;
            left: 19.9vw;
            width: 32.4vw;
            height: 22.66vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .recipe--inner .recipe_idx01--cnt--brush, .yt-20th .recipe--inner .recipe_idx02--cnt--brush, .yt-20th .recipe--inner .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx04--cnt--brush, .yt-20th .recipe--inner .recipe_idx05--cnt--brush, .yt-20th .recipe--inner .recipe_idx06--cnt--brush {
                top: calc(100/ 1200 * 1080px);
                left: calc(116/ 1200 * 1080px);
                width: calc(231/ 1200 * 1080px);
                height: calc(149/ 1200 * 1080px); } }
            @media only screen and (min-width: 1080px) {
              .yt-20th .recipe--inner .recipe_idx01--cnt--brush, .yt-20th .recipe--inner .recipe_idx02--cnt--brush, .yt-20th .recipe--inner .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx04--cnt--brush, .yt-20th .recipe--inner .recipe_idx05--cnt--brush, .yt-20th .recipe--inner .recipe_idx06--cnt--brush {
                top: calc(100/ 1200 * 100vw);
                left: calc(116/ 1200 * 100vw);
                width: calc(231/ 1200 * 100vw);
                height: calc(149/ 1200 * 100vw); } }
            @media only screen and (min-width: 1200px) {
              .yt-20th .recipe--inner .recipe_idx01--cnt--brush, .yt-20th .recipe--inner .recipe_idx02--cnt--brush, .yt-20th .recipe--inner .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx04--cnt--brush, .yt-20th .recipe--inner .recipe_idx05--cnt--brush, .yt-20th .recipe--inner .recipe_idx06--cnt--brush {
                top: 100px;
                left: 116px;
                width: 231px;
                height: 149px; } }
            .yt-20th .recipe--inner .recipe_idx01--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx02--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx03--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx04--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx05--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx06--cnt--brush.active {
              background-image: url("../img/pairing_brush.svg");
              background-position: top center;
              background-size: cover;
              mask-image: url("../img/img_mask.gif");
              mask-repeat: no-repeat;
              mask-position: 0 0;
              mask-size: cover; }
          .yt-20th .recipe--inner .recipe_idx01--cnt .recipe_idx02--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx02--cnt .recipe_idx02--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx03--cnt .recipe_idx02--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx04--cnt .recipe_idx02--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx05--cnt .recipe_idx02--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx06--cnt .recipe_idx02--cnt--brush.active {
            mask-image: url("../img/img_mask2.gif"); }
          .yt-20th .recipe--inner .recipe_idx01--cnt .recipe_idx03--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx02--cnt .recipe_idx03--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx03--cnt .recipe_idx03--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx04--cnt .recipe_idx03--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx05--cnt .recipe_idx03--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx06--cnt .recipe_idx03--cnt--brush.active {
            mask-image: url("../img/img_mask3.gif"); }
          .yt-20th .recipe--inner .recipe_idx01--cnt .recipe_idx04--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx02--cnt .recipe_idx04--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx03--cnt .recipe_idx04--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx04--cnt .recipe_idx04--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx05--cnt .recipe_idx04--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx06--cnt .recipe_idx04--cnt--brush.active {
            mask-image: url("../img/img_mask4.gif"); }
          .yt-20th .recipe--inner .recipe_idx01--cnt .recipe_idx05--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx02--cnt .recipe_idx05--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx03--cnt .recipe_idx05--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx04--cnt .recipe_idx05--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx05--cnt .recipe_idx05--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx06--cnt .recipe_idx05--cnt--brush.active {
            mask-image: url("../img/img_mask5.gif"); }
          .yt-20th .recipe--inner .recipe_idx01--cnt .recipe_idx06--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx02--cnt .recipe_idx06--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx03--cnt .recipe_idx06--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx04--cnt .recipe_idx06--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx05--cnt .recipe_idx06--cnt--brush.active, .yt-20th .recipe--inner .recipe_idx06--cnt .recipe_idx06--cnt--brush.active {
            mask-image: url("../img/img_mask6.gif"); }
          @media only screen and (min-width: 769px) {
            .yt-20th .recipe--inner .recipe_idx01--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx02--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx03--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx04--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx05--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx06--cnt .recipe_idx03--cnt--brush {
              top: calc(10/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .recipe--inner .recipe_idx01--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx02--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx03--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx04--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx05--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx06--cnt .recipe_idx03--cnt--brush {
              top: calc(10/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .recipe--inner .recipe_idx01--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx02--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx03--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx04--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx05--cnt .recipe_idx03--cnt--brush, .yt-20th .recipe--inner .recipe_idx06--cnt .recipe_idx03--cnt--brush {
              top: 10px; } }
          .yt-20th .recipe--inner .recipe_idx01--cnt--pair, .yt-20th .recipe--inner .recipe_idx02--cnt--pair, .yt-20th .recipe--inner .recipe_idx03--cnt--pair, .yt-20th .recipe--inner .recipe_idx04--cnt--pair, .yt-20th .recipe--inner .recipe_idx05--cnt--pair, .yt-20th .recipe--inner .recipe_idx06--cnt--pair {
            position: absolute;
            top: 0;
            left: 0;
            z-index: +1; }
        .yt-20th .recipe--inner .recipe_idx01 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx02 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx03 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx04 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx05 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx06 .recipe_idx03--cnt {
          height: 43.06vw;
          background-image: url("../img/bg_pairing_b_sp.png"); }
          @media only screen and (min-width: 769px) {
            .yt-20th .recipe--inner .recipe_idx01 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx02 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx03 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx04 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx05 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx06 .recipe_idx03--cnt {
              height: calc(356/ 1200 * 1080px);
              background-image: url("../img/bg_pairing_pc.png"); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .recipe--inner .recipe_idx01 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx02 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx03 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx04 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx05 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx06 .recipe_idx03--cnt {
              height: calc(356/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .recipe--inner .recipe_idx01 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx02 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx03 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx04 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx05 .recipe_idx03--cnt, .yt-20th .recipe--inner .recipe_idx06 .recipe_idx03--cnt {
              height: 356px; } }
        .yt-20th .recipe--inner .recipe_idx01--btn, .yt-20th .recipe--inner .recipe_idx02--btn, .yt-20th .recipe--inner .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx04--btn, .yt-20th .recipe--inner .recipe_idx05--btn, .yt-20th .recipe--inner .recipe_idx06--btn {
          position: absolute;
          z-index: +10;
          top: 102vw;
          left: 16.27vw;
          width: 49.86vw;
          filter: drop-shadow(2px 2px 0px #740007); }
          @media only screen and (min-width: 769px) {
            .yt-20th .recipe--inner .recipe_idx01--btn, .yt-20th .recipe--inner .recipe_idx02--btn, .yt-20th .recipe--inner .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx04--btn, .yt-20th .recipe--inner .recipe_idx05--btn, .yt-20th .recipe--inner .recipe_idx06--btn {
              top: calc(385/ 1200 * 1080px);
              left: inherit;
              right: calc(107/ 1200 * 1080px);
              width: calc(236/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .recipe--inner .recipe_idx01--btn, .yt-20th .recipe--inner .recipe_idx02--btn, .yt-20th .recipe--inner .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx04--btn, .yt-20th .recipe--inner .recipe_idx05--btn, .yt-20th .recipe--inner .recipe_idx06--btn {
              top: calc(385/ 1200 * 100vw);
              right: calc(107/ 1200 * 100vw);
              width: calc(236/ 1200 * 100vw);
              filter: drop-shadow(3px 3px 0px #740007); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .recipe--inner .recipe_idx01--btn, .yt-20th .recipe--inner .recipe_idx02--btn, .yt-20th .recipe--inner .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx04--btn, .yt-20th .recipe--inner .recipe_idx05--btn, .yt-20th .recipe--inner .recipe_idx06--btn {
              top: 385px;
              right: 107px;
              width: 236px; } }
          .yt-20th .recipe--inner .recipe_idx01--btn:hover, .yt-20th .recipe--inner .recipe_idx02--btn:hover, .yt-20th .recipe--inner .recipe_idx03--btn:hover, .yt-20th .recipe--inner .recipe_idx04--btn:hover, .yt-20th .recipe--inner .recipe_idx05--btn:hover, .yt-20th .recipe--inner .recipe_idx06--btn:hover {
            cursor: pointer;
            filter: drop-shadow(3px 3px 0px #740007) brightness(1.2); }
        .yt-20th .recipe--inner .recipe_idx01 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx02 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx03 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx04 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx05 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx06 .recipe_idx03--btn {
          top: 112vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .recipe--inner .recipe_idx01 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx02 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx03 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx04 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx05 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx06 .recipe_idx03--btn {
              top: calc(385/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .recipe--inner .recipe_idx01 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx02 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx03 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx04 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx05 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx06 .recipe_idx03--btn {
              top: calc(385/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .recipe--inner .recipe_idx01 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx02 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx03 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx04 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx05 .recipe_idx03--btn, .yt-20th .recipe--inner .recipe_idx06 .recipe_idx03--btn {
              top: 385px; } }
      .yt-20th .recipe--inner .recipe_idx03 {
        height: 128vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .recipe--inner .recipe_idx03 {
            height: calc(421/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .recipe--inner .recipe_idx03 {
            height: calc(421/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .recipe--inner .recipe_idx03 {
            height: 421px; } }
@keyframes border_anim_bt {
  0% {
    height: 0%; }
  100% {
    height: 100%; } }
@keyframes border_anim_rl {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }
  .yt-20th .recipe--profile {
    margin: 0 auto;
    padding: 0 0 20.5vw;
    width: 100vw;
    background-color: #f2c600;
    background-image: url("../img/bg_yellow_bottom_sp.png");
    background-position: bottom center;
    background-size: 100% auto;
    background-repeat: no-repeat; }
    @media only screen and (min-width: 1080px) {
      .yt-20th .recipe--profile {
        background-image: url("../img/bg_yellow_bottom_pc.png");
        padding: 0 0 calc(200/ 1200 * 1080px);
        width: 100%; } }
    @media only screen and (min-width: 1080px) {
      .yt-20th .recipe--profile {
        padding: 0 0 calc(200/ 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .yt-20th .recipe--profile {
        background-image: url("../img/bg_yellow_bottom_pcl.png");
        background-size: auto;
        padding: 0 0 200px; } }
    @media only screen and (min-width: 2000px) {
      .yt-20th .recipe--profile {
        background-size: 100% auto; } }
    .yt-20th .recipe--profile--inner {
      width: 87.2vw;
      margin: 0 auto; }
      @media only screen and (min-width: 1200px) {
        .yt-20th .recipe--profile--inner {
          width: 546px; } }
  .yt-20th .yeah {
    margin: 0 auto;
    padding: 18.53vw 0 7.73vw;
    width: 100vw; }
    @media only screen and (min-width: 769px) {
      .yt-20th .yeah {
        width: 100%;
        padding: calc(184/ 1200 * 1080px) 0 calc(77/ 1200 * 1080px); } }
    @media only screen and (min-width: 1080px) {
      .yt-20th .yeah {
        padding: calc(184/ 1200 * 100vw) 0 calc(77/ 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .yt-20th .yeah {
        padding: 184px 0 77px; } }
    .yt-20th .yeah--inner {
      position: relative;
      width: 79.06vw;
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .yt-20th .yeah--inner {
          width: calc(927/ 1200 * 1080px); } }
      @media only screen and (min-width: 1080px) {
        .yt-20th .yeah--inner {
          width: calc(927/ 1200 * 100vw); } }
      @media only screen and (min-width: 1200px) {
        .yt-20th .yeah--inner {
          width: 927px; } }
      .yt-20th .yeah--inner--ph {
        width: 100%; }
        @media only screen and (min-width: 769px) {
          .yt-20th .yeah--inner--ph {
            width: calc(927/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .yeah--inner--ph {
            width: calc(927/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .yeah--inner--ph {
            width: 927px; } }
      .yt-20th .yeah--inner--logo {
        position: absolute;
        top: -11.2vw;
        left: 10.4vw;
        width: 38.66vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .yeah--inner--logo {
            top: calc(-131/ 1200 * 1080px);
            left: calc(122/ 1200 * 1080px);
            width: calc(454/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .yeah--inner--logo {
            top: calc(-131/ 1200 * 100vw);
            left: calc(122/ 1200 * 100vw);
            width: calc(454/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .yeah--inner--logo {
            top: -131px;
            left: 122px;
            width: 454px; } }
  .yt-20th .present {
    margin: 0 auto;
    padding: 18.4vw 0 20.53vw;
    width: 100vw;
    background-color: #CF6816;
    background-image: url("../img/bg_orange_top_sp.png");
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat; }
    @media only screen and (min-width: 769px) {
      .yt-20th .present {
        width: 100%;
        padding: calc(195/ 1200 * 1080px) 0 calc(77/ 1200 * 1080px);
        background-image: url("../img/bg_orange_top_pc.png"); } }
    @media only screen and (min-width: 1080px) {
      .yt-20th .present {
        padding: calc(195/ 1200 * 100vw) 0 calc(77/ 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .yt-20th .present {
        padding: 195px 0 150px;
        background-image: url("../img/bg_orange_top_pcl.png"); } }
    .yt-20th .present--inner {
      position: relative;
      width: 100vw;
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .yt-20th .present--inner {
          width: calc(1100/ 1200 * 1080px); } }
      @media only screen and (min-width: 1080px) {
        .yt-20th .present--inner {
          width: calc(1100/ 1200 * 100vw); } }
      @media only screen and (min-width: 1200px) {
        .yt-20th .present--inner {
          width: 1100px; } }
      .yt-20th .present--inner--title {
        width: 87.466vw;
        margin: 0 auto; }
        @media only screen and (min-width: 769px) {
          .yt-20th .present--inner--title {
            width: calc(808/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .present--inner--title {
            width: calc(808/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .present--inner--title {
            width: 808px; } }
      .yt-20th .present--inner--mv {
        width: 92.93vw;
        margin: 3.33vw auto 0; }
        @media only screen and (min-width: 769px) {
          .yt-20th .present--inner--mv {
            width: calc(788/ 1200 * 1080px);
            margin: calc(25/ 1200 * 1080px) auto 0; } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .present--inner--mv {
            width: calc(788/ 1200 * 100vw);
            margin: calc(25/ 1200 * 100vw) auto 0; } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .present--inner--mv {
            width: 788px;
            margin: 25px auto 0; } }
      .yt-20th .present--inner--lead {
        width: 84vw;
        margin: 4.26vw auto 0; }
        @media only screen and (min-width: 769px) {
          .yt-20th .present--inner--lead {
            width: calc(543/ 1200 * 1080px);
            margin: calc(11/ 1200 * 1080px) auto 0; } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .present--inner--lead {
            width: calc(543/ 1200 * 100vw);
            margin: calc(11/ 1200 * 100vw) auto 0; } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .present--inner--lead {
            width: 543px;
            margin: 11px auto 0; } }
      .yt-20th .present--inner--item {
        width: 100vw;
        margin: 13.6vw auto 0; }
        @media only screen and (min-width: 769px) {
          .yt-20th .present--inner--item {
            width: calc(1100/ 1200 * 1080px);
            margin: calc(98/ 1200 * 1080px) auto 0; } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .present--inner--item {
            width: calc(1100/ 1200 * 100vw);
            margin: calc(98/ 1200 * 100vw) auto 0; } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .present--inner--item {
            width: 1100px;
            margin: 98px auto 0; } }
      .yt-20th .present--inner--note {
        width: 100vw;
        margin: 12vw auto 0; }
        @media only screen and (min-width: 769px) {
          .yt-20th .present--inner--note {
            width: calc(1100/ 1200 * 1080px);
            margin: calc(42/ 1200 * 1080px) auto 0; } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .present--inner--note {
            width: calc(1100/ 1200 * 100vw);
            margin: calc(42/ 1200 * 100vw) auto 0; } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .present--inner--note {
            width: 1100px;
            margin: 42px auto 0; } }
        .yt-20th .present--inner--note li {
          text-align: center;
          font-size: 2.66vw;
          line-height: 1.7;
          color: #fff; }
          @media only screen and (min-width: 769px) {
            .yt-20th .present--inner--note li {
              font-size: calc(14/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .present--inner--note li {
              font-size: calc(14/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .present--inner--note li {
              font-size: 1.3rem; } }
      .yt-20th .present--inner--prod {
        width: 92vw;
        height: 141.86vw;
        margin: 13.06vw auto 0;
        padding: 25vw 0 0;
        background-image: url("../img/bg_prod_sp.png");
        background-position: top center;
        background-size: cover; }
        @media only screen and (min-width: 769px) {
          .yt-20th .present--inner--prod {
            width: calc(851/ 1200 * 1080px);
            height: calc(498/ 1200 * 1080px);
            margin: calc(80/ 1200 * 1080px) auto 0;
            padding: calc(169/ 1200 * 1080px) 0 0;
            background-image: url("../img/bg_prod_pc.svg"); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .present--inner--prod {
            width: calc(851/ 1200 * 100vw);
            height: calc(498/ 1200 * 100vw);
            margin: calc(80/ 1200 * 100vw) auto 0;
            padding: calc(169/ 1200 * 100vw) 0 0; } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .present--inner--prod {
            width: 851px;
            height: 498px;
            margin: 80px auto 0;
            padding: 169px 0 0; } }
        .yt-20th .present--inner--prod--list {
          width: 66.66vw;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          margin: 0 auto; }
          @media only screen and (min-width: 769px) {
            .yt-20th .present--inner--prod--list {
              width: calc(699/ 1200 * 1080px);
              flex-wrap: nowrap; } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .present--inner--prod--list {
              width: calc(699/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .present--inner--prod--list {
              width: 699px; } }
          .yt-20th .present--inner--prod--list li:nth-child(1), .yt-20th .present--inner--prod--list li:nth-child(4) {
            width: 23.46vw; }
          .yt-20th .present--inner--prod--list li:nth-child(2), .yt-20th .present--inner--prod--list li:nth-child(5) {
            width: 21.2vw; }
          .yt-20th .present--inner--prod--list li:nth-child(3), .yt-20th .present--inner--prod--list li:nth-child(6) {
            width: 22vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .present--inner--prod--list li:nth-child(1) {
              width: calc(125/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .present--inner--prod--list li:nth-child(1) {
              width: calc(125/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .present--inner--prod--list li:nth-child(1) {
              width: 125px; } }
          @media only screen and (min-width: 769px) {
            .yt-20th .present--inner--prod--list li:nth-child(2) {
              width: calc(101/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .present--inner--prod--list li:nth-child(2) {
              width: calc(101/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .present--inner--prod--list li:nth-child(2) {
              width: 101px; } }
          @media only screen and (min-width: 769px) {
            .yt-20th .present--inner--prod--list li:nth-child(3) {
              width: calc(116/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .present--inner--prod--list li:nth-child(3) {
              width: calc(116/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .present--inner--prod--list li:nth-child(3) {
              width: 116px; } }
          @media only screen and (min-width: 769px) {
            .yt-20th .present--inner--prod--list li:nth-child(4) {
              width: calc(126/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .present--inner--prod--list li:nth-child(4) {
              width: calc(126/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .present--inner--prod--list li:nth-child(4) {
              width: 126px; } }
          @media only screen and (min-width: 769px) {
            .yt-20th .present--inner--prod--list li:nth-child(5) {
              width: calc(106/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .present--inner--prod--list li:nth-child(5) {
              width: calc(106/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .present--inner--prod--list li:nth-child(5) {
              width: 106px; } }
          @media only screen and (min-width: 769px) {
            .yt-20th .present--inner--prod--list li:nth-child(6) {
              width: calc(125/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .present--inner--prod--list li:nth-child(6) {
              width: calc(125/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .present--inner--prod--list li:nth-child(6) {
              width: 125px; } }
  .yt-20th .party {
    margin: 0 auto;
    padding: 14.4vw 0 19.6vw;
    width: 100vw; }
    @media only screen and (min-width: 769px) {
      .yt-20th .party {
        width: 100%;
        padding: calc(175/ 1200 * 1080px) 0 calc(139/ 1200 * 1080px); } }
    @media only screen and (min-width: 1080px) {
      .yt-20th .party {
        padding: calc(175/ 1200 * 100vw) 0 calc(139/ 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .yt-20th .party {
        padding: 175px 0 139px; } }
    .yt-20th .party--inner {
      position: relative;
      width: 100vw;
      margin: 0 auto;
      padding: 13.33vw 0 15vw;
      background-image: url("../img/bg_party_sp.png");
      background-position: top center;
      background-size: 85.46vw 100%;
      background-repeat: no-repeat; }
      @media only screen and (min-width: 769px) {
        .yt-20th .party--inner {
          width: calc(1100/ 1200 * 1080px);
          padding: calc(111/ 1200 * 1080px) 0 0;
          background-image: url("../img/bg_party_pc.png");
          background-size: calc(859/ 1200 * 1080px) 100%; } }
      @media only screen and (min-width: 1080px) {
        .yt-20th .party--inner {
          width: calc(1100/ 1200 * 100vw);
          padding: calc(111/ 1200 * 100vw) 0 0;
          background-size: calc(859/ 1200 * 100vw) 100%; } }
      @media only screen and (min-width: 1200px) {
        .yt-20th .party--inner {
          width: 1100px;
          padding: 111px 0 0;
          background-size: 829px 100%; } }
      .yt-20th .party--inner--title {
        width: 72.93vw;
        margin: 0 auto; }
        @media only screen and (min-width: 769px) {
          .yt-20th .party--inner--title {
            width: calc(678/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .party--inner--title {
            width: calc(678/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .party--inner--title {
            width: 678px; } }
      .yt-20th .party--inner--visual {
        width: 100vw;
        margin: 6.13vw auto 0; }
        @media only screen and (min-width: 769px) {
          .yt-20th .party--inner--visual {
            width: calc(1000/ 1200 * 1080px);
            margin: calc(37/ 1200 * 1080px) auto 0; } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .party--inner--visual {
            width: calc(1000/ 1200 * 100vw);
            margin: calc(37/ 1200 * 100vw) auto 0; } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .party--inner--visual {
            width: 1000px;
            margin: 37px auto 0; } }
      .yt-20th .party--inner--lead {
        width: 62.26vw;
        margin: 5.6vw auto 0; }
        @media only screen and (min-width: 769px) {
          .yt-20th .party--inner--lead {
            width: calc(567/ 1200 * 1080px);
            margin: calc(23/ 1200 * 1080px) auto 0; } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .party--inner--lead {
            width: calc(567/ 1200 * 100vw);
            margin: calc(23/ 1200 * 100vw) auto 0; } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .party--inner--lead {
            width: 567px;
            margin: 23px auto 0; } }
      .yt-20th .party--inner--kit {
        width: 37.33vw;
        margin: 4vw auto 0; }
        @media only screen and (min-width: 769px) {
          .yt-20th .party--inner--kit {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: calc(620/ 1200 * 1080px);
            margin: calc(45/ 1200 * 1080px) auto 0; } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .party--inner--kit {
            width: calc(620/ 1200 * 100vw);
            margin: calc(45/ 1200 * 100vw) auto 0; } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .party--inner--kit {
            width: 620px;
            margin: 45px auto 0; } }
        .yt-20th .party--inner--kit li {
          position: relative; }
          @media only screen and (min-width: 769px) {
            .yt-20th .party--inner--kit li {
              margin-bottom: calc(143/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .party--inner--kit li {
              margin-bottom: calc(143/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .party--inner--kit li {
              margin-bottom: 143px; } }
          .yt-20th .party--inner--kit li:nth-child(2) {
            margin-top: 6.93vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .party--inner--kit li:nth-child(2) {
                margin-top: 0; } }
          .yt-20th .party--inner--kit li:nth-child(3), .yt-20th .party--inner--kit li:nth-child(4) {
            margin-top: 15.46vw; }
            @media only screen and (min-width: 769px) {
              .yt-20th .party--inner--kit li:nth-child(3), .yt-20th .party--inner--kit li:nth-child(4) {
                margin-top: 0; } }
        .yt-20th .party--inner--kit--ph {
          width: 37.33vw;
          height: 37.33vw;
          clip-path: circle(18.66vw at 50% 50%); }
          @media only screen and (min-width: 769px) {
            .yt-20th .party--inner--kit--ph {
              width: calc(279/ 1200 * 1080px);
              height: calc(279/ 1200 * 1080px);
              clip-path: circle(calc(139/ 1200 * 1080px) at 50% 50%); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .party--inner--kit--ph {
              width: calc(279/ 1200 * 100vw);
              height: calc(279/ 1200 * 100vw);
              clip-path: circle(calc(139/ 1200 * 100vw) at 50% 50%); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .party--inner--kit--ph {
              width: 279px;
              height: 279px;
              clip-path: circle(139px at 50% 50%); } }
        .yt-20th .party--inner--kit--phsub {
          position: absolute;
          top: -8.4vw;
          right: -10.26vw;
          width: 30vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .party--inner--kit--phsub {
              top: calc(-62/ 1200 * 1080px);
              right: calc(-73/ 1200 * 1080px);
              width: calc(215/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .party--inner--kit--phsub {
              top: calc(-62/ 1200 * 100vw);
              right: calc(-73/ 1200 * 100vw);
              width: calc(215/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .party--inner--kit--phsub {
              top: -62px;
              right: -73px;
              width: 215px; } }
        .yt-20th .party--inner--kit--phsub2 {
          position: absolute;
          top: -8.4vw;
          right: -12.26vw;
          width: 30vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .party--inner--kit--phsub2 {
              top: calc(-62/ 1200 * 1080px);
              right: calc(-86/ 1200 * 1080px);
              width: calc(215/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .party--inner--kit--phsub2 {
              top: calc(-62/ 1200 * 100vw);
              right: calc(-86/ 1200 * 100vw);
              width: calc(215/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .party--inner--kit--phsub2 {
              top: -62px;
              right: -86px;
              width: 215px; } }
        .yt-20th .party--inner--kit--name {
          position: absolute;
          z-index: +1;
          width: 37.33vw;
          top: 31vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .party--inner--kit--name {
              top: calc(228/ 1200 * 1080px);
              width: calc(279/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .party--inner--kit--name {
              top: calc(228/ 1200 * 100vw);
              width: calc(279/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .party--inner--kit--name {
              top: 228px;
              width: 279px; } }
        .yt-20th .party--inner--kit--btn {
          margin: 8.93vw auto 0;
          width: 35.6vw; }
          @media only screen and (min-width: 769px) {
            .yt-20th .party--inner--kit--btn {
              margin: calc(60/ 1200 * 1080px) auto 0;
              width: calc(204/ 1200 * 1080px); } }
          @media only screen and (min-width: 1080px) {
            .yt-20th .party--inner--kit--btn {
              margin: calc(60/ 1200 * 100vw) auto 0;
              width: calc(204/ 1200 * 100vw); } }
          @media only screen and (min-width: 1200px) {
            .yt-20th .party--inner--kit--btn {
              margin: 60px auto 0;
              width: 204px; } }
  .yt-20th .ending {
    width: 100vw;
    padding: 9vw 0 19.6vw; }
    @media only screen and (min-width: 769px) {
      .yt-20th .ending {
        width: 100%;
        padding: calc(110/ 1200 * 1080px) 0 calc(139/ 1200 * 1080px); } }
    @media only screen and (min-width: 1080px) {
      .yt-20th .ending {
        padding: calc(110/ 1200 * 100vw) 0 calc(139/ 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .yt-20th .ending {
        padding: 110px 0 139px; } }
    .yt-20th .ending--inner {
      position: relative;
      width: 100vw;
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .yt-20th .ending--inner {
          width: calc(1100/ 1200 * 1080px); } }
      @media only screen and (min-width: 1080px) {
        .yt-20th .ending--inner {
          width: calc(1100/ 1200 * 100vw); } }
      @media only screen and (min-width: 1200px) {
        .yt-20th .ending--inner {
          width: 1100px; } }
      .yt-20th .ending--inner--ph {
        width: 100vw;
        margin: 0 auto; }
        @media only screen and (min-width: 769px) {
          .yt-20th .ending--inner--ph {
            width: calc(1000/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .ending--inner--ph {
            width: calc(1000/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .ending--inner--ph {
            width: 1000px; } }
      .yt-20th .ending--inner--yeah {
        position: absolute;
        top: -17.86vw;
        left: 3.86vw;
        width: 36.13vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .ending--inner--yeah {
            top: calc(-139/ 1200 * 1080px);
            left: calc(49/ 1200 * 1080px);
            width: calc(341/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .ending--inner--yeah {
            top: calc(-139/ 1200 * 100vw);
            left: calc(49/ 1200 * 100vw);
            width: calc(341/ 1200 * 100vw); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .ending--inner--yeah {
            top: -139px;
            left: 49px;
            width: 341px; } }
      .yt-20th .ending--inner--btn {
        margin: 14.13vw auto 0;
        width: 49.86vw;
        filter: drop-shadow(2px 2px 0px #740007); }
        @media only screen and (min-width: 769px) {
          .yt-20th .ending--inner--btn {
            margin: calc(121/ 1200 * 1080px) auto 0;
            width: calc(236/ 1200 * 1080px); } }
        @media only screen and (min-width: 1080px) {
          .yt-20th .ending--inner--btn {
            margin: calc(121/ 1200 * 100vw) auto 0;
            width: calc(236/ 1200 * 100vw);
            filter: drop-shadow(3px 3px 0px #740007); } }
        @media only screen and (min-width: 1200px) {
          .yt-20th .ending--inner--btn {
            margin: 121px auto 0;
            width: 236px; } }
  .yt-20th .modal--wrap {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: -1; }
    .yt-20th .modal--wrap.active {
      display: block;
      z-index: 9999; }
    .yt-20th .modal--wrap .modal--closer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: -2; }
  .yt-20th .modal--bk {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100vh;
    background: rgba(240, 240, 240, 0.7);
    -webkit-backdrop-filter: blur(15px) brightness(100%);
    backdrop-filter: blur(15px) brightness(100%); }
    .yt-20th .modal--bk.active {
      display: block;
      z-index: 9998; }
  .yt-20th .recipe--detail {
    display: none;
    position: relative;
    opacity: 0;
    width: 84vw;
    margin: 8vw auto 30vw;
    background-color: #fff;
    z-index: 150; }
    @media only screen and (min-width: 769px) {
      .yt-20th .recipe--detail {
        width: 800px;
        margin: 100px auto 0; } }
    .yt-20th .recipe--detail.active {
      display: block;
      animation: fadeIn 0.5s ease both; }
    .yt-20th .recipe--detail--wrap {
      position: relative; }
      @media only screen and (min-width: 769px) {
        .yt-20th .recipe--detail--wrap {
          display: flex;
          justify-content: space-between; } }
    .yt-20th .recipe--detail--visual {
      width: 100%; }
      @media only screen and (min-width: 769px) {
        .yt-20th .recipe--detail--visual {
          width: 400px;
          margin: 0; } }
    .yt-20th .recipe--detail--block {
      position: relative;
      width: 100%;
      background-color: #fccb00;
      padding-bottom: 7vw; }
      @media only screen and (min-width: 769px) {
        .yt-20th .recipe--detail--block {
          width: 400px;
          padding-bottom: 0; } }
    .yt-20th .recipe--detail--bor {
      width: 73.6vw;
      margin: 3.2vw auto 1vw;
      border-bottom: 1px solid #000; }
      @media only screen and (min-width: 769px) {
        .yt-20th .recipe--detail--bor {
          width: 350px;
          margin: 10px auto 0; } }
    .yt-20th .recipe--detail--cont {
      width: 100%; }
      @media only screen and (min-width: 769px) {
        .yt-20th .recipe--detail--cont {
          width: 336px;
          margin: 0 auto; } }
      .yt-20th .recipe--detail--cont--itm {
        width: 12.33vw;
        margin: 0 0 0 2.46vw; }
        @media only screen and (min-width: 769px) {
          .yt-20th .recipe--detail--cont--itm {
            width: 58px;
            margin: 0 0 0 -15px; } }
      .yt-20th .recipe--detail--cont--mt {
        width: 70vw;
        margin: 0 auto; }
        @media only screen and (min-width: 769px) {
          .yt-20th .recipe--detail--cont--mt {
            width: 336px;
            margin: 3px auto 0; } }
        .yt-20th .recipe--detail--cont--mt li {
          display: flex;
          flex-flow: row wrap;
          justify-content: space-between; }
          .yt-20th .recipe--detail--cont--mt li span {
            font-size: 12px;
            line-height: 1.5; }
            @media only screen and (min-width: 769px) {
              .yt-20th .recipe--detail--cont--mt li span {
                font-size: 13px; } }
            @media only screen and (min-width: 769px) {
              .yt-20th .recipe--detail--cont--mt li span.l2 {
                width: 100%; } }
            .yt-20th .recipe--detail--cont--mt li span.stxt {
              font-size: 12px; }
          .yt-20th .recipe--detail--cont--mt li .leader {
            flex: auto; }
          .yt-20th .recipe--detail--cont--mt li hr.dotline {
            position: relative;
            top: calc(50% - 1px);
            margin: 0 5px;
            border: none;
            border-top: dotted 2px #000; }
          .yt-20th .recipe--detail--cont--mt li.tl2 {
            align-items: flex-end; }
            @media only screen and (min-width: 769px) {
              .yt-20th .recipe--detail--cont--mt li.tl2 {
                align-items: center; } }
            .yt-20th .recipe--detail--cont--mt li.tl2 span {
              line-height: 1.2; }
              @media only screen and (min-width: 769px) {
                .yt-20th .recipe--detail--cont--mt li.tl2 span {
                  line-height: 1.5; } }
            .yt-20th .recipe--detail--cont--mt li.tl2 .leader {
              padding-bottom: 0.5em; }
              @media only screen and (min-width: 769px) {
                .yt-20th .recipe--detail--cont--mt li.tl2 .leader {
                  padding-bottom: 0; } }
      .yt-20th .recipe--detail--cont--how {
        width: 70vw;
        margin: 1vw auto 0; }
        @media only screen and (min-width: 769px) {
          .yt-20th .recipe--detail--cont--how {
            width: 336px;
            margin: 5px auto 0; } }
        .yt-20th .recipe--detail--cont--how li {
          font-size: 12px;
          line-height: 1.2;
          padding-left: 1em;
          text-indent: -1em;
          margin-bottom: 0.7em;
          letter-spacing: -1px; }
          @media only screen and (min-width: 769px) {
            .yt-20th .recipe--detail--cont--how li {
              font-size: 13px;
              margin-bottom: 0.4em; } }
          .yt-20th .recipe--detail--cont--how li strong {
            font-weight: normal;
            background-image: url("../img/marker.svg");
            background-position: bottom 3px left;
            background-size: auto 3px;
            background-repeat: repeat-x; }
    .yt-20th .recipe--detail .close--btn {
      position: absolute;
      width: 4vw;
      top: 1.86vw;
      right: 2vw;
      line-height: 1; }
      @media only screen and (min-width: 769px) {
        .yt-20th .recipe--detail .close--btn {
          width: 20px;
          top: 9px;
          right: 8px;
          cursor: pointer; } }
  @media only screen and (min-width: 769px) {
    .yt-20th #recipe_detail_03 .recipe--detail--cont--itm.mt-15 {
      margin-top: -15px; }
    .yt-20th #recipe_detail_03 .recipe--detail--cont--mt li span {
      line-height: 1.2; }
    .yt-20th #recipe_detail_03 .recipe--detail--cont--how {
      width: 360px; }
    .yt-20th #recipe_detail_03 .recipe--detail--cont--how li {
      font-size: 12px; } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
  .yt-20th .photozoomin {
    overflow: hidden; }
    .yt-20th .photozoomin img {
      transform: scale(1.5); }
    .yt-20th .photozoomin.active img {
      animation: photozoomin 0.5s ease-out 0.5s forwards; }
@keyframes photozoomin {
  0% {
    transform: scale(1.5); }
  100% {
    transform: scale(1); } }
  .yt-20th .yeahslide {
    opacity: 0; }
    .yt-20th .yeahslide.active {
      animation: yeahslide 0.5s ease-out 0.5s forwards; }
@keyframes yeahslide {
  0% {
    opacity: 0;
    transform: translate(-20%, 10%); }
  100% {
    opacity: 1;
    transform: translateX(0, 0); } }
  .yt-20th .wallabyjump {
    transform: translateX(-150%) translateY(0);
    z-index: +10;
    opacity: 0; }
    .yt-20th .wallabyjump.active {
      animation: jumpyoko 0.5s ease-out 0.5s forwards;
      opacity: 1; }
      .yt-20th .wallabyjump.active div {
        animation: jumptate 0.5s ease-out 0.5s forwards; }
    .yt-20th .wallabyjump.active2 {
      animation: jumpyoko2 0.5s ease-out 1s forwards; }
      .yt-20th .wallabyjump.active2 div {
        animation: jumptate2 0.5s ease-out 1s forwards; }
@keyframes jumpyoko {
  0% {
    transform: translateX(-150%); }
  100% {
    transform: translateX(-75%); } }
@keyframes jumpyoko2 {
  0% {
    transform: translateX(-75%); }
  100% {
    transform: translateX(0); } }
@keyframes jumptate {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(-70%); } }
@keyframes jumptate2 {
  0% {
    transform: translateY(-70%); }
  90% {
    transform: translateY(10%); }
  100% {
    transform: translateY(0); } }
  .yt-20th .titleupin {
    opacity: 0; }
    .yt-20th .titleupin.active {
      animation: titleupin 0.35s ease-out 1s forwards; }
@keyframes titleupin {
  from {
    opacity: 0;
    transform: scale(0.25) translate(25%, 25%); }
  to {
    opacity: 1;
    transform: scale(1); } }
  .yt-20th .upin {
    opacity: 0; }
    .yt-20th .upin.active {
      animation: upin 0.2s ease-out 0.5s forwards; }
  .yt-20th .upin-d {
    opacity: 0; }
    .yt-20th .upin-d.active {
      animation: upin 0.3s ease-out 1s forwards; }
@keyframes upin {
  from {
    opacity: 0;
    transform: scale(0.25); }
  to {
    opacity: 1;
    transform: scale(1); } }