@charset "utf-8";

:root {
  --bg-black: #333333;
  --lightRed: #ee4c4e;
  --yellow: #ffc400;
  --orange: #ff6a00;
  --red: #a21f21;
  --gold: repeating-linear-gradient(
    0deg,
    #b67b03 1em,
    #daaf08 2em,
    #fee9a0 3em,
    #daaf08 4em,
    #b67b03 5em
  );
  --silver: repeating-linear-gradient(
    0deg,
    #757575 1em,
    #9e9e9e 2em,
    #e8e8e8 3em,
    #9e9e9e 4em,
    #757575 5em
  );
  --bronze: repeating-linear-gradient(
    0deg,
    #772401 1em,
    #b93800 2em,
    #ff9b70 3em,
    #b93800 4em,
    #772401 5em
  );
}

body {
  min-height: 100vh;
  font-size: 4vw;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Meiryo UI",
    "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic",
    Verdana, Roboto, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

h2,
h3,
dt {
  color: white;
  font-weight: bold;
}

a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.index_top h1 {
  background-image: url(../img/top.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  height: 16em;
}

.kasegeru {
  max-width: 740px;
  position: absolute;
  top: 0;
}

.kyouteiyosou {
  max-width: 740px;
  position: absolute;
  top: 7em;
}

.index_top h1 p {
  background: rgb(0, 0, 0);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(51, 51, 51, 1) 50%,
    rgba(0, 0, 0, 1) 100%
  );
  font-size: 1.2em;
  font-weight: bold;
  padding: .5em 0;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.index_top h1 p::before {
  content: "";
  background-image: url(../img/rank1.png);
  display: inline-block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 2em;
  height: 2em;
  margin-right: 0.25em;
}

.index_lead {
  padding-top: 1em;
  text-align: center;
  position: relative;
}

.index_lead figure {
  position: absolute;
  top: 4em;
  right: 0;
  width: 11em;
  z-index: -1;
}

.index_lead .category_wrap {
  margin-bottom: 2em;
}

.lead_heading {
  text-align: center;
}

.lead_heading p:last-of-type {
  margin-bottom: 1em;
}

.lead_heading strong {
  font-size: 1.5em;
}

.most_site {
  display: block;
  background-color: var(--red);
  margin: 0 auto 1em auto;
  padding: 1em 0.5em;
  border: 0.3em outset white;
  border-radius: 0.4em;
  box-shadow: 0 0.1em 0.4em orange;
  text-align: center;
  font-size: 1.4em;
  width: calc(100% - 2em);
  position: relative;
  animation: 1.5s jump infinite;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-0.25em);
  }
  50% {
    transform: translateY(0.25em);
  }
  75% {
    transform: translateY(-0.25em);
  }
  100% {
    transform: translateY(0);
  }
}

.most_site span::before,
.most_site span::after {
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 3em;
  height: 3em;
  position: absolute;
}

.most_site span::before {
  background-image: url(../img/yubi.png);
  left: -1em;
  top: -1.5em;
  transform: rotate(45deg);
}

.most_site span::after {
  background-image: url(../img/getMoney.png);
  right: -1em;
  bottom: -1em;
  transform: rotate(350deg);
}

.category_wrap {
  display: flex;
  margin: 1em 0;
  padding: 0 1em;
}

.category_wrap li {
  text-align: center;
  padding: 1em;
  border-radius: 0.5em;
  margin-right: 0.5em;
  width: calc((100% - 1em) / 3);
  box-shadow: 0 0.2em 0.3em black;
}

.category_wrap li:nth-of-type(1) {
  background-color: var(--yellow);
}

.category_wrap li:nth-of-type(2) {
  background-color: var(--orange);
}

.category_wrap li:nth-of-type(3) {
  background-color: var(--red);
  margin-right: 0;
}

.category_wrap figure {
  position: static;
  width: 100%;
  margin-bottom: 0.5em;
  filter: drop-shadow(0 0 0.1em black);
}

.category_wrap a {
  text-shadow: 0 0 0.2em black;
}

.index_ranking h2 {
  background-color: var(--yellow);
  padding: 0.5em 1em 0.5em 3.6em;
  position: relative;
  font-size: 1.5em;
  line-height: 1.2;
  text-shadow: 0 0 0.1em black;
}

.index_ranking h2::before {
  content: "";
  background-image: url(../img/antei.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 2em;
  height: 2em;
  filter: drop-shadow(0 0 0.05em black);
  position: absolute;
  left: 1.4em;
}

.index_ranking span {
  display: block;
  font-size: 0.6em;
  font-weight: normal;
}

.index_ranking {
  background-color: #f7e9c1;
}

.index_ranking h3 {
  background: rgb(0, 0, 0);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(51, 51, 51, 1) 50%,
    rgba(0, 0, 0, 1) 100%
  );
  counter-reset: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  padding: 0 1em;
}

.index_ranking h3::before {
  content: "";
  display: inline-block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 2em;
  height: 2em;
  margin-right: 0.25em;
}

.index_ranking li:nth-of-type(1) h3::before {
  background-image: url(../img/rank1.png);
}

.index_ranking li:nth-of-type(2) h3::before {
  background-image: url(../img/rank2.png);
}

.index_ranking li:nth-of-type(3) h3::before {
  background-image: url(../img/rank3.png);
}

.index_ranking figure {
  margin-bottom: 2.5em;
}

.ranking_point {
  padding: 0 1em;
  margin-bottom: 1em;
}

.ranking_point ul {
  padding: 1.5em 0.5em 0 0.5em;
  background-color: white;
  border: 0.2em solid var(--bg-black);
  border-radius: 0.5em;
  position: relative;
  margin-bottom: 1em;
}

.ranking_point li:first-of-type {
  padding: 0.25em 0.5em;
  margin-bottom: 1em;
  font-size: 1.5em;
  font-weight: bold;
  white-space: nowrap;
  color: white;
  background-color: var(--bg-black);
  border-radius: 0.2em;
  position: absolute;
  top: -0.8em;
  left: 50%;
  transform: translateX(-50%);
}

.ranking_point li:first-of-type::before {
  display: none;
}

.ranking_point li:nth-of-type(2) {
  padding-top: 0.5em;
}

.ranking_point li {
  position: relative;
  padding: 0 0 0.5em 2em;
  line-height: 1.4;
}

.ranking_point li::before {
  content: "";
  background-image: url(../img/good.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  left: 0;
}

.ranking_point li:last-of-type {
  padding: .5em 0 0 0;
}

.ranking_point li:last-of-type::before {
  display: none;
}

.detail-btn {
  display: block;
  background: linear-gradient(
    to bottom,
    rgb(255, 104, 78) 0%,
    rgb(199, 73, 51) 50%,
    var(--red) 51%,
    rgb(230, 70, 59) 75%,
    var(--red) 100%
  );
  padding: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 0.4em;
  margin-bottom: 1em;
  font-size: 1.2em;
  text-align: center;
  animation: 1s jump infinite;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-0.25em);
  }
  50% {
    transform: translateY(0.25em);
  }
  75% {
    transform: translateY(-0.25em);
  }
  100% {
    transform: translateY(0);
  }
}

.detail-btn::before {
  font-family: "Font Awesome 5 pro";
  content: "\f0da";
  font-size: 1.4em;
  vertical-align: middle;
}

.ranking_point dt {
  font-size: 1.2em;
  background-color: var(--bg-black);
  padding: 0.5em 0.5em 0.5em 3.5em;
  margin-bottom: 0.5em;
  position: relative;
}

.ranking_point dt::before {
  content: "";
  background-image: url(../img/medal_0.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 2.5em;
  height: 2.5em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.5em;
}

.ranking_point em {
  font-size: 1.2em;
  color: var(--red);
}

.ranking_voice {
  padding: 0 0.5em;
}

.ranking_voice li {
  background-color: white;
  margin-bottom: 1em;
  padding-bottom: 0 !important;
}

.ranking_voice li p:first-of-type {
  background-color: var(--bg-black);
  color: white;
  font-size: 1em;
  font-weight: bold;
  line-height: 1;
  padding: 0.75em 0.5em 0.75em 3em;
  margin-bottom: 0.5em;
  display: block;
  position: relative;
}

.ranking_voice li p:first-of-type::before {
  content: "";
  display: inline-block;
  background-image: url(../img/voice-man.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 2em;
  height: 2em;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
}

.ranking_voice li p {
  font-size: 1em;
  padding: 0 0.5em;
}

.ranking_voice li p::before {
  display: none;
}

.ranking_voice li p:last-of-type {
  padding-bottom: 0.5em;
}

.ranking_voice p {
  font-size: 0.8em;
  padding: 0 0 1em 1.2em;
  position: relative;
}

.ranking_voice p::before {
  content: "※";
  position: absolute;
  left: 0;
}

.index_ranking .category_wrap {
  padding: 0 1em 1em 1em;
  margin: 0;
}

.index_ranking .category_wrap figure {
  margin-bottom: 0;
}

.index_bad {
  background-color: var(--bg-black);
  color: white;
}

.index_bad h2 {
  font-size: 1.4em;
  padding: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.index_bad h2::before {
  content: "";
  display: inline-block;
  background-image: url(../img/bad_h2.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 2em;
  height: 2em;
  margin-right: 0.5em;
}

.index_bad figure {
  margin-bottom: 2em;
}

.index_bad h3 {
  background-color: black;
  font-size: 1.5em;
  text-align: center;
}

.bad_point {
  padding: 0 1em 1em 1em;
}

.bad_point ul {
  padding: 1em 0.5em 0.5em 0.5em;
  background-color: var(--bg-black);
  border: 0.2em solid white;
  border-radius: 0.5em;
  position: relative;
  margin-bottom: 1em;
}

.bad_point li {
  position: relative;
  padding: 0 0 0.5em 2em;
  line-height: 1.4;
}

.bad_point li:first-of-type {
  padding: 0 0.5em;
  font-size: 1.5em;
  font-weight: bold;
  white-space: nowrap;
  color: var(--bg-black);
  background-color: white;
  border-radius: 0.2em;
  position: absolute;
  top: -0.8em;
  left: 50%;
  transform: translateX(-50%);
}

.bad_point li:first-of-type::before {
  display: none;
}

.bad_point li::before {
  content: "";
  background-image: url(../img/bad.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: 1em;
  left: 0;
}

.bad_point li:nth-of-type(2) {
  padding-top: .5em;
}

.bad_point dt {
  font-size: 1.2em;
  background-color: black;
  padding: 0.5em 0.5em 0.5em 3.5em;
  margin-bottom: 0.5em;
  position: relative;
}

.bad_point dt::before {
  content: "";
  background-image: url(../img/bad_flag.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 2.5em;
  height: 2.5em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.5em;
}

.bad_point em {
  font-size: 1.2em;
  font-weight: bold;
  color: white;
}

.bad_point dd em {
  color: var(--lightRed);
}

.bad_point dd p {
  font-size: 1em;
}

.bad_point dd p:last-of-type {
  margin-bottom: 1em;
}

.bad_point p {
  font-size: 0.8em;
}

footer {
  background: black;
  color: white;
  padding-bottom: 6em;
}

footer h2 {
  background: rgb(0, 0, 0);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(51, 51, 51, 1) 50%,
    rgba(0, 0, 0, 1) 100%
  );
  font-size: 1.4em;
  counter-reset: white;
  margin-bottom: 1em;
  padding: 0.5em 1em;
  text-align: center;
}

footer .most_site {
  margin-bottom: 0;
  font-weight: bold;
}

footer .category_wrap {
  margin: 1em 0;
}

footer .category_wrap a {
  margin: 0;
  font-weight: bold;
}

.notice {
  margin-bottom: 1em;
}

.notice li {
  list-style-type: none;
  font-size: 0.8em;
  padding: 0 1em 0 2.2em;
  margin-bottom: 0.5em;
  position: relative;
}

.notice li::before {
  content: "※";
  position: absolute;
  left: 1em;
}

footer p {
  text-align: center;
}

footer p:last-of-type {
  padding-bottom: 1em;
  font-size: 0.8em;
}

footer a {
  display: block;
  text-align: center;
  font-weight: normal;
  margin-bottom: 1em;
}

.to_home {
  position: fixed;
  top: 1em;
  left: 1em;
  text-align: center;
  filter: drop-shadow(0 0 .05em black);
}

.to_home i {
  font-size: 1.7em;
}

.to_home p {
  font-size: .8em;
}

.footer_nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.most_btn {
  background-image: url(../img/most_btn.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 5.4em;
  filter: drop-shadow(0 0 0.2em white);
}

.most_btn a {
  text-shadow: 0 0 0.1em black;
  font-size: 1.8em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: .9em;
}

.most_btn a::before {
  content: "";
  background-image: url(../img/rank1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 2em;
  height: 2em;
  position: absolute;
  top: -0.3em;
  right: 0.1em;
  opacity: 0.7;
  z-index: -1;
}

.topBtn {
  cursor: pointer;
  width: 2em;
  filter: drop-shadow(0 0 0.2em black);
  padding-bottom: .5em;
  margin-left: auto;
}


/* 他ページ共通 */

.odds h1, .free h1 {
  height: 12em;
}

.odds h1 p, .free h1 p {
  display: none;
}

/* 高配当 */

.odds .index_ranking h2 {
  background-color: var(--orange);
  padding-left: 3.5em;
}

.odds .index_ranking h2::before {
  background-image: url(../img/kouhaitou.svg);
  left: 1.2em;
}

.odds .index_ranking {
  background: #fce7b8;
}

/* 無料予想 */

.free .index_ranking h2 {
  background: var(--red);
  letter-spacing: -.05em;
  padding-left: 3.4em;
}

.free .index_ranking h2::before {
  background-image: url(../img/muryouyosou.svg);
  left: 1.1em;
}

.free .index_ranking {
  background-color: #ffeaff;
}

@media screen and (min-width: 768px) {
  body {
    font-size: 19px;
  }
  
  .contents {
    max-width: 740px;
    margin: 0 auto;
    position: relative;
  }

  .index_top h1 {
    height: 23.5em;
  }

  .index_top h1 p {
    font-size: 1.5em;
  }

  .kyouteiyosou {
    top: 11em;
  }

  .category_wrap li {
    margin-right: 1em;
    width: calc((100% - 2em) / 3);
  }

  .category_wrap figure {
    width: 5em;
    display: table;
    margin: 0 auto .5em auto;
  }

  .category_wrap br {
    display: none;
  }

  .index_ranking h2 {
    padding-left: 8.7em;
  }
  
  .index_ranking h2::before {
    left: 6.4em;
  }

  .ranking_point ul {
    padding: 1.5em 1em 0 1em;
  }

  .ranking_point li {
    padding: .5em 0 .5em 2em;
  }

  .ranking_point li:nth-of-type(2) {
    padding-top: 1em;
  }

  .ranking_point dt {
    padding: 0.5em 1em 0.5em 4.5em;
  }

  .ranking_point dt::before {
    left: 1em;
  }

  .ranking_voice li p{
    padding: 0 1em;
  }

  .ranking_voice li p:first-of-type {
    padding: 0.75em 1em 0.75em 4em;
  }

  .ranking_voice li p:first-of-type::before {
    left: 1em;
  }

  .index_bad h3 {
    font-size: 1.5em;
  }

  .bad_point ul {
    padding: 1.5em 1em 2em 2em;
  }

  .bad_point li {
    padding: .5em 0 0.5em 2em;
  }

  .bad_point p {
    padding-top: 1em;
    font-size: 0.8em;
  }

  .to_home {
    left: calc(50% - 370px);
  }

  .topBtn {
    position: fixed;
    bottom: 6em;
    right: calc(50% - 370px);
  }

  .most_btn {
    background-size: auto;
    height: 6em;
    position: fixed;
    bottom: 0;
    left: calc(50% - 370px);
  }

  .most_btn a {
    top: 1.9em;
    left: 6em;
    white-space: nowrap;
  }

  .most_btn a::before {
    top: -0.3em;
    left: -2.3em;
    opacity: 1;
  }

  .odds h1, .free h1 {
    height: 19em;
  }

  .odds .index_ranking h2 {
    padding-left: 8em;
  }
  
  .odds .index_ranking h2::before {
    left: 5.6em;
  }

  .free .index_ranking h2 {
    letter-spacing: normal;
    padding-left: 8em;
  }
  
  .free .index_ranking h2::before {
    left: 5.6em;
  }
}