@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : fortune.css
Description : 占い
===================================================================== */
/* =====================================================================
    fortune
======================================================================*/
.fortune {
  position: relative;
  width: 100%;
  padding: 16rem 0 36rem 0;
}
@media screen and (min-width: 768px) {
  .fortune {
    padding: 16rem 0 29.6rem 0;
  }
}
.fortune .bg-shape01 {
  top: 6rem;
  transform: translateY(0);
}
.fortune .bg-shape01 .cloud01 {
  left: -5.3rem;
  top: 52rem;
}
@media screen and (min-width: 768px) {
  .fortune .bg-shape01 .cloud01_r {
    right: -5.8rem;
    top: 49.4rem;
  }
}
.fortune .bg-shape02 {
  top: inherit;
  bottom: 48rem;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  .fortune .bg-shape02 {
    bottom: 29.6rem;
  }
}
.fortune .bg-shape02 .cloud01 {
  left: -5.3rem;
  top: -10rem;
}
@media screen and (min-width: 768px) {
  .fortune .bg-shape02 .cloud01 {
    left: -16rem;
    top: 34.7rem;
  }
}
.fortune-deco01 {
  position: absolute;
  display: none;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .fortune-deco01 {
    right: -6rem;
    top: 3rem;
    display: block;
    width: 39.6rem;
  }
}
.fortune-deco02 {
  position: absolute;
  display: none;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .fortune-deco02 {
    right: 13.5rem;
    top: 8.7rem;
    display: block;
    width: 26.1rem;
  }
}
.fortune-deco03 {
  position: absolute;
  display: none;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .fortune-deco03 {
    right: 23rem;
    top: 0;
    display: block;
    width: 17.9rem;
  }
}
.fortune-deco04 {
  position: absolute;
  left: -10.4rem;
  bottom: 6rem;
  display: block;
  width: 53.3rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .fortune-deco04 {
    left: -3.2rem;
    bottom: -6rem;
    width: 47rem;
  }
}
.fortune-deco05 {
  position: absolute;
  left: 12rem;
  bottom: 29.2rem;
  display: block;
  width: 11.3rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .fortune-deco05 {
    left: 16.4rem;
    bottom: 14.6rem;
    width: 10rem;
  }
}
.fortune-deco06 {
  position: absolute;
  right: -11rem;
  bottom: -44rem;
  display: block;
  width: 48.5rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .fortune-deco06 {
    display: none;
  }
}
.fortune-deco07 {
  position: absolute;
  right: 11.1rem;
  bottom: -25.8rem;
  display: block;
  width: 33.1rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .fortune-deco07 {
    display: none;
  }
}
.fortune-deco08 {
  position: absolute;
  right: 10.5rem;
  bottom: -56rem;
  display: block;
  width: 22rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .fortune-deco08 {
    display: none;
  }
}
.fortune .sec-ttl .en {
  position: relative;
  padding-left: 1.65em;
}
.fortune .sec-ttl .en::before {
  content: "";
  position: absolute;
  left: 0.2em;
  bottom: -0.1em;
  display: block;
  width: 1.3em;
  aspect-ratio: 40/40;
  background-image: url(../images/fortune/fortune_img02.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.fortune-column {
  position: relative;
  width: 100%;
}
.fortune-wrap {
  position: relative;
  width: 100%;
}
.fortune-main {
  position: relative;
  width: 100%;
  margin-bottom: 64rem;
}
@media screen and (min-width: 768px) {
  .fortune-main {
    margin-bottom: 0;
  }
}
.fortune-img {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .fortune-img {
    width: 80%;
  }
}
.fortune-ranking {
  position: relative;
  width: 115.3846153846%;
  margin: 0 -7.6923076923%;
  padding: 2.5rem;
  padding-bottom: 14rem;
  border-radius: 3rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .fortune-ranking {
    width: 75%;
    margin: 0 auto;
    padding: 2.0833333333vw;
    padding-bottom: 11.6666666667vw;
  }
}
@media screen and (min-width: 1200px) {
  .fortune-ranking {
    padding: 25px;
    padding-bottom: 140px;
  }
}
.fortune-ranking::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #dcf8ff;
  z-index: -2;
}
.fortune-ranking::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 78%;
  aspect-ratio: 585/271;
  background-image: url(../images/fortune/fortune_bg01.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -1;
}
.fortune-ranking-deco01 {
  position: absolute;
  left: 7.3333333333%;
  top: 2.8rem;
  display: block;
  width: 17.6%;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-deco01 {
    top: 2.3333333333vw;
  }
}
@media screen and (min-width: 1200px) {
  .fortune-ranking-deco01 {
    top: 28px;
  }
}
.fortune-ranking-deco02 {
  position: absolute;
  right: 9.3333333333%;
  top: 8.8rem;
  display: block;
  width: 7.4666666667%;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-deco02 {
    top: 7.3333333333vw;
  }
}
@media screen and (min-width: 1200px) {
  .fortune-ranking-deco02 {
    top: 88px;
  }
}
.fortune-ranking-deco03 {
  position: absolute;
  right: 8%;
  bottom: 2.2rem;
  display: block;
  width: 22.6666666667%;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-deco03 {
    bottom: 1.8333333333vw;
  }
}
@media screen and (min-width: 1200px) {
  .fortune-ranking-deco03 {
    bottom: 22px;
  }
}
.fortune-ranking-ttl {
  position: relative;
  width: 100%;
  text-align: center;
}
.fortune-ranking-ttl > span {
  display: block;
  color: #2196f3;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-ttl > span {
    font-size: 3.3333333333vw;
  }
}
@media screen and (min-width: 1200px) {
  .fortune-ranking-ttl > span {
    font-size: 40px;
  }
}
.fortune-ranking-list {
  position: relative;
  width: 100%;
  margin-top: 11rem;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-list {
    margin-top: 9.1666666667vw;
  }
}
@media screen and (min-width: 1200px) {
  .fortune-ranking-list {
    margin-top: 110px;
  }
}
.fortune-ranking-list > li {
  width: 100%;
  margin-top: 2rem;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-list > li {
    margin-top: 1.6666666667vw;
  }
}
@media screen and (min-width: 1200px) {
  .fortune-ranking-list > li {
    margin-top: 20px;
  }
}
.fortune-ranking-list > li:first-child {
  margin-top: 0;
}
.fortune-ranking-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 3.5714285714%;
  z-index: 1;
}
.fortune-ranking-item.rank01::after {
  border-width: 3px;
  border-color: #ff5f9b;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-item.rank01::after {
    border-width: 4px;
  }
}
.fortune-ranking-item.rank01 .fortune-ranking-item-point {
  background-color: #ffd7e6;
}
.fortune-ranking-item.rank02::after {
  border-width: 3px;
  border-color: #ff9c00;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-item.rank02::after {
    border-width: 4px;
  }
}
.fortune-ranking-item.rank02 .fortune-ranking-item-point {
  background-color: #ffdfc5;
}
.fortune-ranking-item.rank03::after {
  border-width: 3px;
  border-color: #00c260;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-item.rank03::after {
    border-width: 4px;
  }
}
.fortune-ranking-item.rank03 .fortune-ranking-item-point {
  background-color: #b4edd0;
}
.fortune-ranking-item.rank04::after, .fortune-ranking-item.rank05::after, .fortune-ranking-item.rank06::after, .fortune-ranking-item.rank07::after {
  border-color: #c8e7ff;
}
.fortune-ranking-item.rank04 .fortune-ranking-item-point, .fortune-ranking-item.rank05 .fortune-ranking-item-point, .fortune-ranking-item.rank06 .fortune-ranking-item-point, .fortune-ranking-item.rank07 .fortune-ranking-item-point {
  background-color: #c8e7ff;
}
.fortune-ranking-item.rank08::after, .fortune-ranking-item.rank09::after, .fortune-ranking-item.rank10::after, .fortune-ranking-item.rank11::after {
  border-color: #d9d0ff;
}
.fortune-ranking-item.rank08 .fortune-ranking-item-point, .fortune-ranking-item.rank09 .fortune-ranking-item-point, .fortune-ranking-item.rank10 .fortune-ranking-item-point, .fortune-ranking-item.rank11 .fortune-ranking-item-point {
  background-color: #d9d0ff;
}
.fortune-ranking-item.rank12::after {
  border-width: 3px;
  border-color: #5133d0;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-item.rank12::after {
    border-width: 4px;
  }
}
.fortune-ranking-item.rank12 .fortune-ranking-item-point {
  background-color: #d9d0ff;
}
.fortune-ranking-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  background-color: #ffffff;
  z-index: -2;
}
.fortune-ranking-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-width: 1.5px;
  border-style: solid;
  border-color: #333333;
  border-radius: 1.5rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-item::after {
    border-width: 2px;
  }
}
.fortune-ranking-item > dt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 35.3846153846%;
}
.fortune-ranking-item > dd {
  position: relative;
  width: 61.5384615385%;
}
.fortune-ranking-item > dd + dd {
  width: 100%;
}
.fortune-ranking-item-num {
  position: relative;
  display: block;
  width: 24.347826087%;
}
.fortune-ranking-item-zodiac {
  position: relative;
  display: block;
  width: 71.3043478261%;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-0.02em);
}
@media screen and (min-width: 768px) {
  .fortune-ranking-item-zodiac {
    font-size: 2.5vw;
  }
}
@media screen and (min-width: 1200px) {
  .fortune-ranking-item-zodiac {
    font-size: 30px;
  }
}
.fortune-ranking-item-text {
  position: relative;
  width: 100%;
  font-size: 2.2rem;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-item-text {
    font-size: 1.8333333333vw;
  }
}
@media screen and (min-width: 1200px) {
  .fortune-ranking-item-text {
    font-size: 22px;
  }
}
.fortune-ranking-item-point {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  margin-top: 3%;
  padding: 2.5% 3%;
  border-radius: 1rem;
  background-color: #333333;
}
.fortune-ranking-item-point > dt {
  width: 35.1063829787%;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-item-point > dt {
    font-size: 1.6666666667vw;
  }
}
@media screen and (min-width: 1200px) {
  .fortune-ranking-item-point > dt {
    font-size: 20px;
  }
}
.fortune-ranking-item-point > dd {
  width: 64.8936170213%;
  font-size: 2.2rem;
  font-weight: 500;
  transform: translateY(-0.05em);
}
@media screen and (min-width: 768px) {
  .fortune-ranking-item-point > dd {
    font-size: 1.8333333333vw;
  }
}
@media screen and (min-width: 1200px) {
  .fortune-ranking-item-point > dd {
    font-size: 22px;
  }
}
.fortune-ranking-item-advice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  margin-top: 2.4615384615%;
  padding: 1.5384615385% 1.8461538462%;
  border-radius: 1rem;
  background-color: #faff7d;
}
.fortune-ranking-item-advice::before {
  content: "";
  position: absolute;
  left: 21.8461538462%;
  bottom: 0;
  display: block;
  width: 10.6153846154%;
  aspect-ratio: 69/71;
  background-image: url(../images/fortune/fortune_chara04.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.fortune-ranking-item-advice > dt {
  width: 19.1693290735%;
  padding: 0.9584664537% 0;
  color: #f59800;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  border-radius: 1rem;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-item-advice > dt {
    font-size: 1.6666666667vw;
  }
}
@media screen and (min-width: 1200px) {
  .fortune-ranking-item-advice > dt {
    font-size: 20px;
  }
}
.fortune-ranking-item-advice > dd {
  width: 64.8562300319%;
  font-size: 2.2rem;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .fortune-ranking-item-advice > dd {
    font-size: 1.8333333333vw;
  }
}
@media screen and (min-width: 1200px) {
  .fortune-ranking-item-advice > dd {
    font-size: 22px;
  }
}/*# sourceMappingURL=fortune.css.map */