@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: 22.5px;
    background-image: url('../img/bg_recipe.png');
    background-size: 75px auto; }
    #main #ranking > header h2 img {
      width: 100%;
      height: auto; }
    #main #ranking > header p {
      text-align: center;
      font-size: 52.5px;
      font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', メイリオ, sans-serif;
      font-weight: 700;
      color: #4a9e86; }
  #main #ranking p.read {
    padding: 22.5px;
    text-align: center;
    font-size: 22.5px;
    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: 30px;
    list-style: none;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-width: 15px;
    border-bottom-width: 15px;
    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 22.5px;
        height: 7.5px;
        background-color: #32675a; }
      #main #ranking ul.items li.item header {
        margin: 22.5px auto 7.5px; }
        #main #ranking ul.items li.item header h3 {
          text-align: center;
          font-size: 37.5px;
          line-height: 1.5em;
          font-weight: 700;
          color: #4a9e86; }
          #main #ranking ul.items li.item header h3 span.catch {
            display: block;
            font-size: 30px;
            line-height: 1.5em;
            font-weight: 700;
            color: #444; }
        #main #ranking ul.items li.item header .time {
          padding: 7.5px 0px;
          text-align: right;
          font-size: 18.75px;
          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: 420.75px; }
        #main #ranking ul.items li.item .content .movie .link {
          display: block;
          position: absolute;
          top: 0px;
          right: 0px;
          padding: 15px 22.5px;
          background-color: #f90;
          text-align: center;
          font-size: 22.5px;
          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 22.5px;
          -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 15px; }
        #main #ranking ul.items li.item .content .text div.materials h4 {
          margin: 22.5px auto 0px;
          text-align: center;
          font-size: 26.25px;
          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 3.75px;
              font-size: 26.25px;
              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: 30px 0px;
          text-align: center;
          list-style: none; }
          #main #ranking ul.items li.item .content .text ul.buttons li {
            display: block;
            margin: 0px auto;
            width: 450px; }
            #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: 600px;
      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); }