@charset "utf-8";
#main #ranking {
  max-width: 750px;
  width: auto;
  margin: 0px auto; }
  #main #ranking * {
    width: auto;
    height: auto;
    margin: 0px;
    padding: 0px;
    background-color: transparent;
    color: #444; }
  #main #ranking > header {
    padding-bottom: 3vw;
    background-image: url('../img/bg_recipe.png');
    background-size: 10vw auto; }
    #main #ranking > header h2 img {
      width: 100%;
      height: auto; }
    #main #ranking > header p {
      text-align: center;
      font-size: 7vw;
      font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', メイリオ, sans-serif;
      font-weight: 700;
      color: #4a9e86; }
  #main #ranking p.read {
    padding: 3vw;
    text-align: center;
    font-size: 3vw;
    line-height: 2em;
    font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', メイリオ, sans-serif;
    font-weight: 400;
    color: #444; }
  #main #ranking ul.items {
    padding-bottom: 4vw;
    list-style: none;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-width: 2vw;
    border-bottom-width: 2vw;
    border-top-color: #32675a;
    border-bottom-color: #32675a; }
    #main #ranking ul.items li.item {
      background-color: #fff; }
      #main #ranking ul.items li.item:not(:first-child)::before {
        content: '';
        display: block;
        margin: 0px 3vw;
        height: 1vw;
        background-color: #32675a; }
      #main #ranking ul.items li.item header {
        margin: 3vw auto 1vw; }
        #main #ranking ul.items li.item header h3 {
          text-align: center;
          font-size: 5vw;
          line-height: 1.5em;
          font-weight: 700;
          color: #4a9e86; }
          #main #ranking ul.items li.item header h3 span.catch {
            display: block;
            font-size: 4vw;
            line-height: 1.5em;
            font-weight: 700;
            color: #444; }
        #main #ranking ul.items li.item header .time {
          padding: 1vw 0px;
          text-align: right;
          font-size: 2.5vw;
          font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', メイリオ, sans-serif;
          font-weight: 700;
          color: #444; }
      #main #ranking ul.items li.item .content .movie {
        position: relative;
        overflow: hidden; }
        #main #ranking ul.items li.item .content .movie iframe {
          width: 100%;
          height: 56.1vw; }
        #main #ranking ul.items li.item .content .movie .link {
          display: block;
          position: absolute;
          top: 0px;
          right: 0px;
          padding: 2vw 3vw;
          background-color: #f90;
          text-align: center;
          font-size: 3vw;
          line-height: 1em;
          font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', メイリオ, sans-serif;
          font-weight: 700;
          color: #fff;
          border-radius: 0px 0px 0px 3vw;
          -webkit-transition: 0.5s;
          transition: 0.5s;
          -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
          transform: -webkit- rotateZ(10deg) translateY(-100%);
          transform: rotateZ(10deg) translateY(-100%); }
          #main #ranking ul.items li.item .content .movie .link img {
            height: 1em;
            width: auto;
            margin-right: 0.5em; }
        #main #ranking ul.items li.item .content .movie:hover .link {
          transform: -webkit- translateY(0px) rotateZ(0);
          transform: translateY(0px) rotateZ(0); }
        #main #ranking ul.items li.item .content .text {
          position: relative;
          margin: 0px 2vw; }
        #main #ranking ul.items li.item .content .text div.materials h4 {
          margin: 3vw auto 0px;
          text-align: center;
          font-size: 3.5vw;
          font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', メイリオ, sans-serif;
          font-weight: 700;
          color: #856565; }
          #main #ranking ul.items li.item .content .text div.materials ul {
            text-align: center; }
            #main #ranking ul.items li.item .content .text div.materials ul li {
              display: inline-block;
              margin: 0px 0.5vw;
              font-size: 3.5vw;
              font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', メイリオ, sans-serif;
              font-weight: 700;
              color: #856565; }
        #main #ranking ul.items li.item .content .text ul.buttons {
          padding: 4vw 0px;
          text-align: center;
          list-style: none; }
          #main #ranking ul.items li.item .content .text ul.buttons li {
            display: block;
            margin: 0px auto;
            width: 60vw; }
            #main #ranking ul.items li.item .content .text ul.buttons li a img {
              width: 100%;
              height: auto;
              -webkit-transition: 0.5s;
              transition: 0.5s;
              transform: -webkit- scale(1);
              transform: scale(1); }
              #main #ranking ul.items li.item .content .text ul.buttons li a img:hover {
                transform: -webkit- scale(1.05);
                transform: scale(1.05); }
    #main #ranking ul.items li.button a img {
      display: block;
      width: 80vw;
      height: auto;
      margin: 0px auto;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      transform: -webkit- scale(1);
      transform: scale(1); }
      #main #ranking ul.items li.button a img:hover {
        transform: -webkit- scale(1.05);
        transform: scale(1.05); }