@charset "UTF-8";
.ttl {
  text-align: center;
  background: #23B3BD;
  color: #fff;
  height: 53px;
  padding: 5px;
  font-size: 25px;
  margin-bottom: 25px;
  font-family: "秀英丸ゴシック B"; }
  @media screen and (max-width: 767px) {
    .ttl {
      font-size: 23px;
      height: 50px;
      padding: 10px; } }
  .ttl span {
    font-size: 32px;
    margin-left: 8px; }
    @media screen and (max-width: 767px) {
      .ttl span {
        font-size: 23px;
        margin-left: 0; } }

#mainimg {
  background: linear-gradient(#fff 0%, #c6fafd 100%);
  text-align: center;
  padding: 65px 2% 0; }
  @media screen and (max-width: 767px) {
    #mainimg {
      padding: 50px 0 0; } }
  #mainimg img {
    margin-top: 10px; }
  #mainimg ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 40px; }
    @media screen and (max-width: 767px) {
      #mainimg ul {
        padding: 20px 5% 40px; } }
    #mainimg ul li {
      max-width: 340px;
      width: 47.5%; }
      #mainimg ul li + li {
        margin-left: 5%; }
    #mainimg ul a {
      background: #23B3BD;
      color: #fff;
      display: block;
      filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.16));
      padding: 20px 20px 30px;
      border-radius: 15px;
      font-size: 28px;
      position: relative;
      font-family: "秀英丸ゴシック B"; }
      @media screen and (max-width: 767px) {
        #mainimg ul a {
          font-size: 20px;
          padding: 15px 5px 25px;
          line-height: 1.2; } }
      #mainimg ul a span {
        font-size: 22px;
        margin-right: 10px; }
        @media screen and (max-width: 767px) {
          #mainimg ul a span {
            display: block;
            margin-right: 0; } }
      #mainimg ul a img {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%); }
      #mainimg ul a:hover {
        transform: scale(1.05); }
  #mainimg .sp h1 {
    background: #FFFF00; }
    #mainimg .sp h1 img {
      margin: 0; }

#RankType > div {
  background: #A8F1F5;
  padding: 0 0 20px; }
#RankType .dflex {
  justify-content: center;
  align-items: center;
  margin-bottom: 20px; }
  @media screen and (max-width: 767px) {
    #RankType .dflex {
      margin-bottom: 0; } }
  #RankType .dflex figure {
    max-width: 308px; }
#RankType .txt {
  margin-left: 30px;
  font-weight: bold; }
  @media screen and (max-width: 767px) {
    #RankType .txt {
      margin-left: 0; } }
#RankType .attention {
  font-size: 11px;
  margin-bottom: 20px; }
  @media screen and (max-width: 767px) {
    #RankType .attention {
      margin-bottom: 20px; } }
#RankType .box {
  background: rgba(255, 255, 255, 0.52);
  padding: 20px;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 40px; }
  #RankType .box span {
    display: block;
    font-weight: normal;
    text-indent: -.5em;
    font-size: 15px; }
  #RankType .box img {
    margin-left: 20px; }
    @media screen and (max-width: 767px) {
      #RankType .box img {
        margin: 10px 0 0; } }
  #RankType .box .dflex div > p {
    background: #e11100;
    color: #fff;
    display: inline-block;
    padding: 0 10px;
    font-family: "秀英丸ゴシック B";
    margin-bottom: 10px; }
  #RankType .box h3 {
    font-size: 20px; }
    @media screen and (max-width: 767px) {
      #RankType .box h3 {
        text-align: center;
        font-size: 18px; } }
#RankType .pc {
  position: relative; }
  #RankType .pc a {
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translateX(-50%); }
@media screen and (max-width: 767px) {
  #RankType div.sp {
    position: relative;
    width: 100%;
    height: 750px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px; }
    #RankType div.sp .th {
      display: inline-block;
      width: 88px;
      padding-top: 17px; }
    #RankType div.sp .td {
      display: inline-block;
      overflow-x: scroll;
      width: calc(100% - 88px);
      height: 0;
      height: 760px;
      position: relative; }
      #RankType div.sp .td > img {
        max-width: 609px;
        position: absolute;
        top: 0;
        left: 4px; }
      #RankType div.sp .td a:not(.btn_card) {
        position: absolute;
        left: 100px;
        top: 500px;
        width: 80px; }
      #RankType div.sp .td a.btn_card {
        position: absolute;
        top: 510px;
        width: 140px;
        left: 456px;
        z-index: 5; }
        #RankType div.sp .td a.btn_card img {
          left: inherit; } }
#RankType .campaign {
  text-align: center; }
  #RankType .campaign > p {
    font-family: "秀英丸ゴシック B";
    font-size: 20px;
    color: #E85A24;
    margin: 20px 0 10px; }
#RankType .pointup {
  background: #fff;
  border: 2px solid #E85A24;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  margin: 10px 0 40px; }
  #RankType .pointup h3 {
    background: #E85A24;
    color: #fff;
    padding: 10px;
    font-size: 20px;
    position: relative;
    font-family: "秀英丸ゴシック B"; }
    #RankType .pointup h3:after {
      display: block;
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 12px 10px 0 10px;
      border-color: #E85A24 transparent transparent transparent;
      position: absolute;
      bottom: -12px;
      left: calc(50% - 10px); }
  #RankType .pointup .dflex {
    align-items: flex-start;
    justify-content: space-around;
    width: 96%;
    margin: 40px auto 20px; }
    #RankType .pointup .dflex > p {
      margin-top: 30px; }
  #RankType .pointup span {
    display: block;
    vertical-align: middle;
    font-family: "秀英丸ゴシック B";
    font-size: 15px;
    margin-top: 20px; }
  #RankType .pointup p img {
    vertical-align: middle;
    width: 200px; }
  #RankType .pointup .gry {
    background: #E6E6E6;
    padding: 20px;
    border-radius: 10px;
    width: 50%;
    position: relative;
    margin-left: 30px; }
    #RankType .pointup .gry > p {
      font-size: 14px;
      letter-spacing: -.05rem;
      font-family: "秀英丸ゴシック B"; }
      #RankType .pointup .gry > p img {
        margin-top: 10px; }
    #RankType .pointup .gry .card {
      position: absolute;
      left: -15px;
      top: -15px; }
    #RankType .pointup .gry .attention {
      font-size: 11px;
      margin: 20px 0; }
    #RankType .pointup .gry .btn {
      width: 100%;
      position: inherit; }
#RankType .txt_point {
  font-size: 12px;
  margin-bottom: 25px; }

#Fluctuation > div {
  background: #EAEAEA;
  padding-bottom: 40px; }
#Fluctuation figure {
  padding-top: 10px; }
#Fluctuation figcaption {
  font-size: 15px;
  font-weight: bold;
  margin: 30px 0; }
  #Fluctuation figcaption span {
    font-size: 22px; }
#Fluctuation .mec_card {
  width: 50%; }
  @media screen and (max-width: 767px) {
    #Fluctuation .mec_card {
      width: 80%; } }
#Fluctuation .box {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  text-align: center; }
  @media screen and (max-width: 767px) {
    #Fluctuation .box {
      padding: 20px;
      border-radius: 15px; } }
  #Fluctuation .box + .box {
    margin-top: 25px;
    padding-bottom: 0; }
    @media screen and (max-width: 767px) {
      #Fluctuation .box + .box {
        padding-bottom: 10px; } }
#Fluctuation h3 {
  font-weight: bold;
  color: #23B3BD;
  font-size: 20px; }
  @media screen and (max-width: 767px) {
    #Fluctuation h3 {
      font-size: 15px; } }
#Fluctuation .ttl_app {
  color: #2F3031; }
#Fluctuation .pic_01 {
  width: 20%; }
  @media screen and (max-width: 767px) {
    #Fluctuation .pic_01 {
      width: 70%; } }

/*# sourceMappingURL=pointrank.css.map */