#pageTitleWrap .contentBg .contentBgInner {
  background: url(../../contest/img/bg_mainimage.jpg?v=20180110) no-repeat center top #002a93;
  background-size: cover; }
  @media only screen and (min-width: 1px) and (max-width: 639px) {
    #pageTitleWrap .contentBg .contentBgInner {
      background: url(../../contest/img/bg_mainimage_sp.jpg?v=20180110) no-repeat center top #002a93;
      background-size: cover; } }

#pageTitleWrap h2 {
  margin-top: 10px; }
  @media only screen and (min-width: 1px) and (max-width: 639px) {
    #pageTitleWrap h2 img {
      width: 276px; } }

#pageTitleWrap .cm {
  margin-top: 15px; }
  @media only screen and (min-width: 1px) and (max-width: 639px) {
    #pageTitleWrap .cm img {
      width: 291px; } }

#pageTitleWrap .pageTitleInner {
  height: 385px;
  z-index: 2; }
  #pageTitleWrap .pageTitleInner .contentBg {
    height: 116%;
    bottom: 163px; }
  #pageTitleWrap .pageTitleInner .pageTitle {
    padding: 15px 0 0; }
    #pageTitleWrap .pageTitleInner .pageTitle:after {
      display: none; }
  @media only screen and (min-width: 1px) and (max-width: 639px) {
    #pageTitleWrap .pageTitleInner {
      height: 198px; }
      #pageTitleWrap .pageTitleInner .contentBg {
        bottom: 83px; }
      #pageTitleWrap .pageTitleInner .pageTitle {
        padding: 0; }
        #pageTitleWrap .pageTitleInner .pageTitle:after {
          display: none; } }

#pageTitleWrap.large .pageTitleInner {
  height: 415px; }
  #pageTitleWrap.large .pageTitleInner .contentBg {
    height: 135%; }
  #pageTitleWrap.large .pageTitleInner .pageTitle {
    padding: 50px 0 0; }
  @media only screen and (min-width: 1px) and (max-width: 639px) {
    #pageTitleWrap.large .pageTitleInner {
      height: 215px; }
      #pageTitleWrap.large .pageTitleInner .contentBg {
        bottom: 74px; }
      #pageTitleWrap.large .pageTitleInner .pageTitle {
        padding: 20px 0 0; } }

.contentInner {
  position: relative;
  width: 980px;
  margin: auto;
  z-index: 2; }
  @media only screen and (min-width: 1px) and (max-width: 639px) {
    .contentInner {
      width: 100%;
      padding: 0 15px; } }

#mainContent {
  position: relative; }
  @media only screen and (min-width: 640px), print {
    #mainContent {
      margin-top: -184px;
      font-size: 15px;
      line-height: 20px; } }
  @media only screen and (min-width: 1px) and (max-width: 639px) {
    #mainContent {
      margin-top: -100px; } }
  #mainContent .categoryIcon {
    display: block;
    content: "";
    position: absolute;
    width: 100px;
    height: 112px;
    left: 50%;
    top: 0;
    margin-left: -50px;
    background: url(../../contest/img/ph_pagecategory.png?v=20180110) no-repeat;
    z-index: 3;
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-transform: matrix(1, 0, 0, 1, 0, 50);
    -webkit-transform: matrix(1, 0, 0, 1, 0, 50);
    -ms-transform: matrix(1, 0, 0, 1, 0, 50);
    transform: matrix(1, 0, 0, 1, 0, 50); }
  #mainContent.active .categoryIcon {
    -webkit-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -ms-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -o-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -ms-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; }
  @media only screen and (min-width: 1px) and (max-width: 639px) {
    #mainContent .categoryIcon {
      width: 50px;
      margin-left: -25px;
      background: url(../../contest/img/ph_pagecategory_sp.png?v=20180110) no-repeat;
      background-size: 50px;
      opacity: 1;
      filter: alpha(opacity=100);
      -moz-transform: none;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none; } }
  @media only screen and (min-width: 640px), print {
    #mainContent .contentBlock h3 {
      position: relative;
      padding-bottom: 23px;
      margin-bottom: 30px;
      text-align: center; }
      #mainContent .contentBlock h3:after {
        display: block;
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0;
        height: 3px;
        background: #006bff;
        -webkit-transition: all 0.6s cubic-bezier(0.18, 0.89, 0.21, 1.77) 0s;
        -ms-transition: all 0.6s cubic-bezier(0.18, 0.89, 0.21, 1.77) 0s;
        -o-transition: all 0.6s cubic-bezier(0.18, 0.89, 0.21, 1.77) 0s;
        -ms-transition: all 0.6s cubic-bezier(0.18, 0.89, 0.21, 1.77) 0s;
        transition: all 0.6s cubic-bezier(0.18, 0.89, 0.21, 1.77) 0s;
        -webkit-transition-delay: 0.4s;
        -ms-transition-delay: 0.4s;
        -o-transition-delay: 0.4s;
        -ms-transition-delay: 0.4s;
        transition-delay: 0.4s; }
      #mainContent .contentBlock h3.active:after {
        width: 280px;
        margin-left: -140px; } }
  @media only screen and (min-width: 1px) and (max-width: 639px) {
    #mainContent .contentBlock h3 {
      text-align: center;
      margin-bottom: 20px; }
      #mainContent .contentBlock h3 img {
        width: 240px; } }
  @media only screen and (min-width: 640px), print {
    #mainContent.top .content01 {
      text-align: center; } }
  #mainContent.top .content01 .contentInner {
    padding-top: 180px;
    padding-bottom: 80px; }
    @media only screen and (min-width: 1px) and (max-width: 639px) {
      #mainContent.top .content01 .contentInner {
        padding-top: 100px;
        padding-bottom: 40px; } }
  #mainContent.top .content01 .leadWrap {
    line-height: 1.8;
    font-size: 17px; }
    @media only screen and (min-width: 1px) and (max-width: 639px) {
      #mainContent.top .content01 .leadWrap {
        font-size: 14px; } }
    #mainContent.top .content01 .leadWrap .leadImageWrap {
      margin-top: 40px; }
      @media only screen and (min-width: 640px), print {
        #mainContent.top .content01 .leadWrap .leadImageWrap {
          display: flex;
          justify-content: center; } }
      @media only screen and (min-width: 640px), print {
        #mainContent.top .content01 .leadWrap .leadImageWrap .imgWrap:nth-child(n+2) {
          margin-left: 20px; } }
      @media only screen and (min-width: 1px) and (max-width: 639px) {
        #mainContent.top .content01 .leadWrap .leadImageWrap .imgWrap:nth-child(n+2) {
          margin-top: 20px; } }
  #mainContent.top .content02 {
    position: relative;
    padding: 55px 0 70px;
    overflow: hidden;
    background: #DEECFF; }
    #mainContent.top .content02:before, #mainContent.top .content02:after {
      display: block;
      content: "";
      position: absolute;
      width: 180px;
      height: 654px; }
    #mainContent.top .content02:before {
      top: 0;
      left: 0;
      background: url(../../contest/img/bg_content02_01.png?v=20180110) no-repeat; }
    #mainContent.top .content02:after {
      right: 0;
      bottom: 0;
      background: url(../../contest/img/bg_content02_02.png?v=20180110) no-repeat; }
    #mainContent.top .content02 .contentInner {
      position: relative;
      z-index: 2; }
    @media only screen and (min-width: 1px) and (max-width: 639px) {
      #mainContent.top .content02 h3 img {
        width: 168px; } }
    @media only screen and (min-width: 640px), print {
      #mainContent.top .content02 .contestList {
        display: flex;
        flex-wrap: wrap; } }
    #mainContent.top .content02 .contestList li {
      background: #212121; }
      @media only screen and (min-width: 640px), print {
        #mainContent.top .content02 .contestList li:not(:nth-child(3n+1)) {
          margin-left: 40px; } }
      @media only screen and (min-width: 1px) and (max-width: 639px) {
        #mainContent.top .content02 .contestList li {
          width: 240px;
          margin: auto; }
          #mainContent.top .content02 .contestList li:nth-child(n+2) {
            margin-top: 20px; } }
    #mainContent.top .content02 .contestList a {
      display: block;
      position: relative;
      height: 100%;
      color: #fff;
      text-decoration: none; }
      #mainContent.top .content02 .contestList a:before {
        content: "";
        position: absolute;
        width: 0;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        background: #006bff;
        -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
        -ms-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
        -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
        -ms-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; }
      #mainContent.top .content02 .contestList a[target="_blank"] dl:before, #mainContent.top .content02 .contestList a[target="_blank"] dl:after {
        width: 18px;
        height: 15px;
        right: 0 !important; }
      #mainContent.top .content02 .contestList a[target="_blank"] dl:before {
        background: url(../img/icon_blank_yellow.png) no-repeat; }
      #mainContent.top .content02 .contestList a[target="_blank"] dl:after {
        background: url(../img/icon_blank_white.png) no-repeat; }
      #mainContent.top .content02 .contestList a:not([target="_blank"]) dl:before, #mainContent.top .content02 .contestList a:not([target="_blank"]) dl:after {
        width: 26px;
        height: 8px; }
      #mainContent.top .content02 .contestList a:not([target="_blank"]) dl:before {
        background: url(../img/arw_btn_yellow.png) no-repeat; }
      #mainContent.top .content02 .contestList a:not([target="_blank"]) dl:after {
        background: url(../img/arw_btn_white.png) no-repeat; }
      #mainContent.top .content02 .contestList a dl {
        position: relative; }
        #mainContent.top .content02 .contestList a dl:before, #mainContent.top .content02 .contestList a dl:after {
          content: "";
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
          -ms-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
          -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
          -ms-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
          transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; }
        #mainContent.top .content02 .contestList a dl:after {
          opacity: 0; }
      #mainContent.top .content02 .contestList a:hover:before {
        width: 100%;
        opacity: 1; }
      #mainContent.top .content02 .contestList a:hover dl:before, #mainContent.top .content02 .contestList a:hover dl:after {
        right: -5px; }
      #mainContent.top .content02 .contestList a:hover dl:before {
        opacity: 0; }
      #mainContent.top .content02 .contestList a:hover dl:after {
        opacity: 1; }
    #mainContent.top .content02 .contestList .contestBox .imgWrap,
    #mainContent.top .content02 .contestList .contestBox .detailWrap {
      position: relative;
      z-index: 2; }
    #mainContent.top .content02 .contestList .contestBox .detailWrap {
      color: #fff;
      padding: 15px 20px; }
    #mainContent.top .content02 .contestList .contestBox dl dt {
      font-size: 17px;
      font-weight: bold; }
    #mainContent.top .content02 .contestList .contestBox dl dd {
      font-size: 13px; }
    #mainContent.top .content02 .btnWrap {
      margin-top: 50px;
      text-align: center; }
  #mainContent.history:before, #mainContent.history:after {
    display: block;
    content: "";
    position: absolute;
    width: 180px;
    height: 100%;
    top: 0;
    z-index: 1; }
  #mainContent.history:before {
    left: 0;
    background: url(../../contest/history/img/bg_content_left.png?v=20180110) repeat-y; }
  #mainContent.history:after {
    right: 0;
    background: url(../../contest/history/img/bg_content_right.png?v=20180110) repeat-y; }
  #mainContent.history .content01 .contentInner {
    position: relative;
    padding-top: 180px;
    padding-bottom: 80px;
    z-index: 3; }
    @media only screen and (min-width: 1px) and (max-width: 639px) {
      #mainContent.history .content01 .contentInner {
        padding-top: 100px;
        padding-bottom: 40px; } }
  @media only screen and (min-width: 1px) and (max-width: 639px) {
    #mainContent.history .content01 h3 img {
      width: 168px; } }
  @media only screen and (min-width: 640px), print {
    #mainContent.history .contentList {
      margin-top: 30px; }
      #mainContent.history .contentList li {
        position: relative;
        display: inline-block;
        width: 480px;
        height: 250px;
        margin-top: 20px; }
        #mainContent.history .contentList li:after {
          content: "";
          display: block;
          content: "";
          position: absolute;
          width: 10px;
          height: 100%;
          top: 0;
          right: 19px;
          background-position: left center !important;
          z-index: 5;
          pointer-events: none;
          background: url(../../contest/history/img/bg_content_contest.png?v=20180110) no-repeat; }
        #mainContent.history .contentList li.right {
          margin-left: 20px; }
        #mainContent.history .contentList li.winners:after {
          display: block;
          content: "";
          position: absolute;
          width: 10px;
          height: 100%;
          top: 0;
          right: 19px;
          background-position: left center !important;
          z-index: 5;
          pointer-events: none;
          background: url(../../contest/history/img/bg_content_winners.png?v=20180110) no-repeat; }
        #mainContent.history .contentList li.winners.large {
          width: 100%;
          margin-left: 0; }
          #mainContent.history .contentList li.winners.large .detailWrap {
            width: 500px; }
          #mainContent.history .contentList li.winners.large a:hover .detailWrap {
            width: 550px; }
        #mainContent.history .contentList li.winners a.blank:before {
          content: "";
          display: block;
          position: absolute;
          right: 25px;
          bottom: 25px;
          width: 18px;
          height: 15px;
          z-index: 10;
          -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
          -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
          -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
          -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
          transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
        #mainContent.history .contentList li.winners a.blank:before {
          background: url(../img/icon_blank_yellow.png?v=20180110) no-repeat;
          opacity: 1;
          filter: alpha(opacity=100); }
        #mainContent.history .contentList li a {
          position: relative;
          display: block;
          width: 100%;
          height: 100%;
          color: #fff;
          line-height: 28px;
          overflow: hidden; }
          #mainContent.history .contentList li a:before {
            display: block;
            content: "";
            position: absolute;
            width: 24px;
            height: 8px;
            right: 25px;
            bottom: 25px;
            background: url(../img/arw_btn_yellow.png?v=20180110) no-repeat;
            z-index: 4;
            -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
          #mainContent.history .contentList li a:hover:before {
            right: 19px; }
          #mainContent.history .contentList li a:hover .imgWrap:before {
            opacity: 1;
            filter: alpha(opacity=100); }
          #mainContent.history .contentList li a:hover .imgWrap .coverImg {
            -webkit-transform: scale(1.1, 1.1);
            -moz-transform: scale(1.1, 1.1);
            -ms-transform: scale(1.1, 1.1);
            -o-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1); }
          #mainContent.history .contentList li a:hover .detailWrap {
            width: 285px; }
        #mainContent.history .contentList li .imgWrap {
          position: relative; }
          #mainContent.history .contentList li .imgWrap:before {
            display: block;
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 2;
            opacity: 0;
            filter: alpha(opacity=0);
            -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
          #mainContent.history .contentList li .imgWrap .coverImg {
            -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
        #mainContent.history .contentList li .detailWrap {
          position: absolute;
          width: 240px;
          height: 100%;
          top: 0;
          right: 0;
          padding: 30px 20px;
          padding-right: 0;
          background: #001C64;
          z-index: 3;
          -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
          -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
          -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
          -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
          transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
          #mainContent.history .contentList li .detailWrap:before {
            display: block;
            content: "";
            position: absolute;
            width: 17px;
            height: 28px;
            top: 50%;
            left: -17px;
            margin-top: -14px;
            background: url(../../contest/history/img/icon_balloon.png?v=20180110) no-repeat; }
          #mainContent.history .contentList li .detailWrap dd {
            padding-top: 20px;
            font-weight: bold; } }
  @media only screen and (min-width: 1px) and (max-width: 639px) {
    #mainContent.history .contentList {
      margin-top: 20px; }
      #mainContent.history .contentList li {
        position: relative;
        width: 288px;
        height: 150px;
        margin: 10px auto 0; }
        #mainContent.history .contentList li:first-child {
          margin-top: 0; }
        #mainContent.history .contentList li.contest a:after {
          background: url(../../contest/history/img/bg_content_contest_sp.png?v=20180110) no-repeat;
          background-size: 6px; }
        #mainContent.history .contentList li.winners.large {
          height: auto; }
          #mainContent.history .contentList li.winners.large a:after {
            height: 130px; }
          #mainContent.history .contentList li.winners.large .imgWrap {
            width: 100%; }
            #mainContent.history .contentList li.winners.large .imgWrap .coverImg {
              width: 100%; }
          #mainContent.history .contentList li.winners.large .detailWrap {
            position: static;
            width: 100%;
            height: 130px; }
        #mainContent.history .contentList li.winners a:after {
          background: url(../../contest/history/img/bg_content_winners_sp.png?v=20180110) no-repeat;
          background-size: 6px; }
        #mainContent.history .contentList li.winners a.blank:before {
          width: 13px;
          height: 11px;
          background: url(../img/icon_blank_yellow_sp.png?v=20180110) no-repeat;
          background-size: cover; }
        #mainContent.history .contentList li a {
          position: relative;
          display: block;
          width: 100%;
          height: 100%;
          color: #fff;
          line-height: 28px;
          text-decoration: none;
          overflow: hidden; }
          #mainContent.history .contentList li a:before {
            display: block;
            content: "";
            position: absolute;
            width: 10px;
            height: 4px;
            right: 15px;
            bottom: 10px;
            background: url(../img/arw_btn_yellow_sp.png?v=20180110) no-repeat;
            background-size: 10px;
            z-index: 2; }
          #mainContent.history .contentList li a:after {
            display: block;
            content: "";
            position: absolute;
            width: 10px;
            height: 150px;
            bottom: 0;
            right: 10px;
            background-position: left center !important;
            z-index: 2; }
        #mainContent.history .contentList li .coverImg {
          width: 144px; }
        #mainContent.history .contentList li .detailWrap {
          position: absolute;
          width: 156px;
          height: 100%;
          top: 0;
          right: 0;
          padding: 12px 17px;
          padding-right: 0;
          background: #001C64; }
          #mainContent.history .contentList li .detailWrap:before {
            display: block;
            content: "";
            position: absolute;
            width: 9px;
            height: 14px;
            top: 50%;
            left: -9px;
            margin-top: -7px;
            background: url(../../contest/history/img/icon_balloon_sp.png?v=20180110) no-repeat;
            background-size: 9px; }
          #mainContent.history .contentList li .detailWrap dt img {
            width: 126px; }
          #mainContent.history .contentList li .detailWrap dd {
            font-size: 10px !important;
            font-weight: bold;
            line-height: 17px; } }
  #mainContent.history .btnWrap {
    margin-top: 50px;
    text-align: center; }