@charset "UTF-8";@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
  text-align: left;
}
article,aside,details,figcaption,figure,main,header,footer,hgroup,menu,nav,section {
  display: block;
}
ul {
  list-style: none;
}
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
.contents {
  width: 100%;
  box-sizing: border-box;
}

.img_wrap {
  font-size: 0;
  line-height: 0;
}
.relative {
  position: relative;
}
.hidden {
  display: none;
}

/* main */
.mainArea {
  overflow: hidden;
}
.fv {
  position: relative;
}
.fv_parts {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
}
.fv_text01 {
  position: absolute;
  width: 49.0%;
  top: 8.6%;
  left: 23.9%;
  filter: drop-shadow(5px 5px 3px rgba(255, 255, 255, 1))
  drop-shadow(-5px -5px 3px rgba(255, 255, 255, 1));
}
.fv_text01_shiny_mask {
	position: absolute;
	top: 0;
  bottom: 0;
	left: 0;
  right: 0;
	mask-image: url("../img/fv_text01.png");
	mask-repeat: no-repeat;
	mask-position: 0 0;
  mask-size: contain;
	height: 100%;
	overflow: hidden;
}

.fv_text02 {
  position: absolute;
  width: 75.6%;
  top: 50.9%;
  left: 32.9%;
}
.anim_blur {
  animation: blur 2s ease-out 0s infinite;
}
@keyframes blur {
   0% { 
    filter: drop-shadow(2px 2px 15px rgba(255, 255, 255, 0))
    drop-shadow(-2px -2px 15px rgba(255, 255, 255, 0));
   }
   50.0% {
    filter: drop-shadow(2px 2px 15px rgba(255, 255, 255, 0.8))
    drop-shadow(-2px -2px 15px rgba(255, 255, 255, 0.8));
   }
   100% {
    filter: drop-shadow(2px 2px 15px rgba(255, 255, 255, 0))
    drop-shadow(-2px -2px 15px rgba(255, 255, 255, 0));
   }
}

.glow {
  opacity: 0;
  animation: glow 5s ease 0s infinite;
}
@keyframes glow {
   0% { 
    opacity: 0;
   }
   25% { 
    opacity: 0;
   }
   50% { 
    opacity: 1;
   }
   75% {
    opacity: 0;
   }
   100% {
    opacity: 0;
   }
}

.fv_img01 {
  position: absolute;
  width: 18.5%;
  top: 13.5%;
  left: 2.5%;
}
.fv_img02 {
  position: absolute;
  width: 28.5%;
  bottom: 47%;
  right: 3%;
}

.ranking li {
  position: relative;
  opacity: 0;
  transition: all 0.5s;
}
.ranking li.active {
  opacity: 1;
}
.ranking li:nth-child(1),
.ranking li:nth-child(3),
.ranking li:nth-child(5) {
  left: -10%;
}
.ranking li:nth-child(2),
.ranking li:nth-child(4),
.ranking li:nth-child(6) {
  right: -10%;
}

.ranking li:nth-child(1).active,
.ranking li:nth-child(3).active,
.ranking li:nth-child(5).active {
  left: 0%;
}
.ranking li:nth-child(2).active,
.ranking li:nth-child(4).active,
.ranking li:nth-child(6).active {
  right: 0%;
}
.ranking li .shadow {
  box-shadow: 8px 8px 8px rgba(137, 0, 0, 0.3);
}

.ranking_label01 {
  width: 22%;
  position: absolute;
  top: -1%;
  left: -3%;
  overflow: hidden;
  border-radius: 50%;
  filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));
}
.ranking_label02 {
  width: 18%;
  position: absolute;
  top: -3%;
  left: -2%;
  overflow: hidden;
  border-radius: 50%;
  filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));
}
.ranking_label03 {
  width: 18%;
  position: absolute;
  top: -3%;
  left: -2%;
  overflow: hidden;
  border-radius: 50%;
  filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));
}
.ranking_label04 {
  width: 18%;
  position: absolute;
  top: -3%;
  left: -2%;
  overflow: hidden;
  border-radius: 50%;
  filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));
}
.ranking_label05 {
  width: 18%;
  position: absolute;
  top: -3%;
  left: -2%;
  overflow: hidden;
  border-radius: 50%;
  filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));
}
.ranking_label06 {
  width: 18%;
  position: absolute;
  top: -3%;
  left: -2%;
  overflow: hidden;
  border-radius: 50%;
  filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));
}

.ranking_img01 {
  width: 22%;
  position: absolute;
  top: 2%;
  right: -2%;
}
.ranking_img02 {
  width: 20%;
  position: absolute;
  bottom: 27%;
  right: -1.5%;
}
.ranking_img03 {
  width: 20%;
  position: absolute;
  bottom: 27%;
  right: -1.5%;
}
.ranking_img04 {
  width: 31.5%;
  position: absolute;
  top: 7%;
  right: 10%;
}
.ranking_img05 {
  width: 31.5%;
  position: absolute;
  top: 7%;
  right: 10%;
}
.ranking_img06 {
  width: 31.5%;
  position: absolute;
  top: 6%;
  right: 10%;
}

.caution_wrap * {
  text-align: justify;
  line-height: 1.5em;
}
.caution_wrap {
  background: #fff5d7;
  padding: 0 0 40px;
  overflow-wrap: anywhere;
}
.caution_contents {
  width: 90%;
  margin: 0 auto;
  font-size: 1rem;
}
.caution dd {
  padding: 0 0 0.6em;
}

.caution_inline {
  background: #fff;
  padding: 20px;
  height: 300px;
  overflow-y: scroll;
}
.caution_title {
  font-weight: bold;
  padding: 0.5em 0 1.5em;
}
.caution_text {
  padding: 0 0 0.5em;
}

.anim_bigsmall {
  animation-name: bigsmall;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-duration: 2.5s;
}
@keyframes bigsmall {
  0% {
    transform: scale(0.9);
    margin-left: 0%;
  }
  50% {
    transform: scale(1.5);
    margin-left: -5%;
  }
  100% {
    transform: scale(0.9);
    margin-left: 0%;
  }
}
.anim_bigsmall2 {
  animation-name: bigsmall2;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-duration: 2.5s;
}
@keyframes bigsmall2 {
  0% {
    transform: scale(1.5);
    margin-right: -10%;
  }
  50% {
    transform: scale(0.9);
    margin-right: 0%;
  }
  100% {
    transform: scale(1.5);
    margin-right: -10%;
  }
}

.stamp {
  opacity: 0;
}
.active .stamp {
  animation: stamp 1.0s ease-in 0s forwards;
}
@keyframes stamp {
  0% { 
    transform: scale(3.0);
  }
  49% { 
    transform: scale(3.0);
  }
  50% { 
    transform: scale(3.0);
    opacity: 0;
  }
  100% {
    transform: scale(1.0);
    opacity: 1;
  }
}

.slide_shiny {
  animation: shiny 2s linear both infinite;
}
.btn_shiny {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  top: 0;
  transform: skew(20deg, 0deg);
  background-image: linear-gradient(
  left,
  rgba(255, 255, 255, 0) 0%,
  rgba(255, 255, 255, 1) 50%,
  rgba(000, 255, 255, 0) 100%
  );
  background-image: -webkit-gradient(
  linear,
  left bottom,
  right bottom,
  color-stop(0%, rgba(255, 255, 255, 0)),
  color-stop(50%, rgba(255, 255, 255, 1)),
  color-stop(100%, rgba(255, 255, 255, 0))
  );
  pointer-events: none;
}
@keyframes shiny {
  0% {
    left: -20%;
  }

  40% {
    left: 120%;
  }

  100% {
    left: 120%;
  }
}

/* sp */
@media (max-width: 780px) {
  .fv_parts {
    width: 89%;
  }
  img {
    vertical-align: top;
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .bg01 {
    background: url("../img/bg01_sp.png");
    background-position: center top;
    background-repeat: repeat-y;
    background-size: contain;
  }
  .bg02 {
    background: url("../img/bg02_sp.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .ranking {
    width: 89%;
    margin: 0 auto;
    padding: 1% 0 0;
  }
  .ranking li {
    padding: 0 0 4.5%;
  }
  .caution_contents {
    font-size: 0.875rem;
    padding: 5% 0 0;
  }
  .line_btn {
    position: absolute;
    width: 35%;
    bottom: 13%;
    left: 9%;
  }
}

/* pc 781以上 */
@media (min-width: 781px) {
  .fv_parts {
    width: 700px;
  }
  img {
    vertical-align: top;
    max-width: 100%;
    width: 100%;
    object-fit: cover;
  }
  .bg01 {
    background: url("../img/bg01_pc.png");
    background-position: center top;
    background-repeat: repeat-y;
  }
  .bg02 {
    background: url("../img/bg02_pc.png");
    background-position: center top;
    background-repeat: no-repeat;
  }
  .ranking {
    width: 700px;
    margin: 0 auto;
    padding: 5px 0 0;
    position: relative;
  }
  .ranking li {
    padding: 0 0 30px;
  }
  .caution_contents {
    width: 700px;
    padding: 40px 0 0;
  }
  .w700 {
    position: absolute;
    width: 700px;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
  }
  .line_btn {
    position: absolute;
    width: 268px;
    bottom: 13%;
    left: 4.5%;
  }
  a:hover {
    opacity: 0.7;
  }
}

/* pc 1200以上 */
@media (min-width: 1200px) {
  .fv_parts {
    width: 58%;
  }
  img {
    height: auto;
  }
  .bg01 {
    background-size: contain;
  }
  .bg01 {
    background: url("../img/bg01_pc.png");
    background-position: center top;
    background-repeat: repeat-y;
    background-size: contain;
  }
  .bg02 {
    background: url("../img/bg02_pc.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .ranking {
    width: 58%;
    margin: 0 auto;
    padding: 1% 0 0;
    position: relative;
  }
  .ranking li {
    padding: 0 0 4.5%;
  }
  .caution_contents {
    width: 58%;
  }
  .line_btn {
    position: absolute;
    width: 23%;
    bottom: 12.5%;
    left: 23%;
  }
  .w700 {
    position: static;
    width: auto;
    margin: 0;
  }
}