@charset "utf-8";

.layout-main {
  background: #003C87;
}
.aside-main {
  background: #FFE5E7;
}
.site-wrap:not(.topPage) header::before{
  filter: none;
}
.aside-right .menu .menu_ttl::before{
  background-image: url(../img/menu_title.png);
}
.aside-center .scroll-arrow::after{
  background-image: url(../img/scroll_arrow.png);
}
.btn{
  transition: .2s;
}

/* アニメーション */
@keyframes bounce-backImg {
  0% { background-position: center bottom -200px; }
  75% { background-position: center bottom 10px; }
  100% { background-position: center bottom 0px; } }
@keyframes bounce-decoImg {
  0% { transform: translate(0, 200px); }
  75% { transform: translate(0, -10px); }
  100% { transform: translate(0, 0); } }
@keyframes slidIn {
  0% { transform: translateY(30px);opacity: 0; }
  100% { transform: translateY(0);opacity: 1; } }
.js-scroll.js-scroll-slideIn{
  opacity: 0;
  transform: translateY(30px);
}
.js-scroll.js-scroll-slideIn.js-active{
  animation: slidIn 0.5s .2s forwards;
}

/* MV */
.mv{
  margin-top: -3%;
  position: relative;
}
.mv_title{
  position: absolute;
  top: 5.2%;
  left: 0;
  width: 100%;
}
.mv_title img{
  margin-inline: auto;
  width: 68%;
}
.mv_img{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
}
.mv .deco{
  position: absolute;
}
.mv .deco1{
  top: 15.5%;
  left: 2%;
  max-width: 22%;
  transform: translate(-37px, -50px) rotate(23deg);
  opacity: 0;
}
.mv.js-active .deco1{
  animation: mv_deco1 0.8s ease .6s  forwards;
}
@keyframes mv_deco1 {
    0% { transform: translate(-37px, -50px) rotate(23deg);opacity: 0; }
    75% { opacity: 1; }
    100% { transform: translate(0, 0) rotate(0);opacity: 1; } }
.mv .deco2{
  top: 15%;
  right: 0;
  max-width: 25%;
  transform: translate(47%,0);
  opacity: 0;
}
.mv.js-active .deco2{
  animation: mv_deco2 .6s .6s forwards;
}
@keyframes mv_deco2 {
    0% {transform: translate(47%, 0%);opacity: 0; }
    25% {transform: translate(35%, -8px); }
    49% {transform: translate(23%, 0);opacity: 1; }
    50% {transform: translate(23%, 0); }
    75% {transform: translate(12%, -8px); }
    100% { transform: translate(0, 0);opacity: 1; } }
.mv .deco3{
  bottom: 13.5%;
  left: -7%;
  max-width: 36%;
  transform: translate(14%, 49%);
}
.mv.js-active .deco3{
  animation: mv_deco3 0.55s .8s forwards;
}
@keyframes mv_deco3 {
    0% { transform: translate(14%, 49%); }
    75% { transform: translate(-2%, -5%); }
    100% { transform: translate(0, 0); } }
.mv .deco4{
  bottom: 29%;
  left: 7%;
  max-width: 37%;
  transform: translate(15%, 81%);
}
.mv.js-active .deco4{
  animation: mv_deco4 0.6s .9s forwards;
}
@keyframes mv_deco4 {
    0% { transform: translate(15%, 81%); }
    75% { transform: translate(-2%, -5%); }
    100% { transform: translate(0, 0); } }
.mv .deco5{
  bottom: 20.8%;
  right: 8%;
  max-width: 42.5%;
  transform: translate(-16%, 52%);
}
.mv.js-active .deco5{
  animation: mv_deco5 0.6s .9s forwards;
}
@keyframes mv_deco5 {
    0% { transform: translate(-16%, 52%); }
    75% { transform: translate(2%, -5%); }
    100% { transform: translate(0, 0); } }
.mv .deco6{
  bottom: 25%;
  right: -1%;
  max-width: 22%;
  transform: translate(-27%, 74%);
}
.mv.js-active .deco6{
  animation: mv_deco6 0.5s .8s forwards;
}
@keyframes mv_deco6 {
    0% { transform: translate(-27%, 74%); }
    75% { transform: translate(2%, -5%); }
    100% { transform: translate(0, 0); } }
@media screen and (min-width: 431px){
  .mv{
    border-right: 1px solid #FFE5E7;
    border-left: 1px solid #FFE5E7;
  }
}

/* ABOUT */
.about{
  position: relative;
}
.about::before,.about::after{
  content: "";
  display: block;
  position: absolute;
}
.about::before{
  background: url(../img/result/about_deco_dog.png) bottom center / contain no-repeat;
  top: -4px;
  left: -83px;
  height: 178px;
  width: 191px;
  transform: translate(-65%, 40%);
}
.about.js-active::before{
  animation: about-dog 0.5s 1s forwards;
}
@keyframes about-dog {
    0% {transform: translate(-65%, 40%); }
    75% { transform: translate(3%, -3%); }
    100% { transform: translate(0, 0); } }
.about::after{
  background: url(../img/result/about_deco_pad.png) top right / auto 100% no-repeat;
  height: 82px;
  top: 26px;
  right: -16px;
  width:0px;
}
.about.js-active::after{
  animation: pad-anime 2s forwards;
  animation-timing-function: steps(5, start); 
}
@keyframes pad-anime{
  0%{ width:0px; }
  100%{ width:162px; }
}
.about p{
  line-height: 2;
  text-align: center;
}
.about .balloon{
  background: url(../img/result/about_balloon.png) center bottom / 100% auto no-repeat;
  font-weight: 600;
  padding-block: 94px 56px;
  margin: 0 auto 22px;
  max-width: 335px;
}
.about .accordion .btn{
  background: #FFF;
  border-radius: 6px;
  color: inherit;
  padding: 15px 20px;
  max-width: initial;
  width: 88%;
}
.about .accordion .btn::after{
  content: "";
  background: url(../img/result/ico_arrow-down.png) center center / contain no-repeat;
  height: 20px;
  transform: rotate(180deg);
  width: 20px;
  transition: .2s;
}
.about .accordion .btn.collapsed::after{
  transform: rotate(0);
}
.about .accordion .btn > span{
  flex: 1;
}

/* 特賞/入賞 */
/* TAB */
.tab{
  padding-top: 145px;
  position: relative;
}
.tab .nav-tabs{
  display: flex;
  justify-content: center;
  gap: 14px;
  max-width: 378px;
  width: 90%;
  margin: 0 auto -1px;
}
.tab .nav-tabs .nav-link{
  border: none;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  padding: 17px 0 0;
  position: relative;
  margin-bottom: 4px;
  height: 76px;
}
.tab .nav-tabs .nav-link:nth-of-type(1){
  background-color: #4795CC;
}
.tab .nav-tabs .nav-link:nth-of-type(2){
  background-color: #219A74;
}
.tab .nav-tabs .nav-link.active{
  height: 80px;
  margin-bottom: 0;
}
.tab .nav-tabs .nav-link img{
  width: 100%;
}
.tab-content{
  position: relative;
}
.tab-content .tab-pane{
  padding-block: 60px 80px;
}
.deco{
  position: absolute;
  pointer-events: none;
}
.tab .deco1{
  background: url(../img/index/img_pad.png) center right / auto 100% no-repeat;
  height: 44px;
  transform: scale(-1, 1);
  top: 41px;
  left: -59px;
  width: 0;
}
.tab.js-active .deco1{
  animation: tab-pad 2s forwards;
  animation-timing-function: steps(9, end); 
}
@keyframes tab-pad{
  0%{ width: 0; }
  100%{ width: 244px; }
}
.tab .deco2{
  background: url(../img/result/about_deco_harinezumi.png) bottom center / contain no-repeat;
  height: 42px;
  top: 106px;
  right: 22%;
  width: 56px;
  z-index: 2;
  transform: translate(47%,0);
}
.tab.js-active .deco2{
  animation: tab_deco2 .8s .2s forwards;
}
@keyframes tab_deco2 {
    0% {transform: translate(47%, 0%); }
    25% {transform: translate(35%, -8px); }
    49% {transform: translate(23%, 0); }
    50% {transform: translate(23%, 0); }
    75% {transform: translate(12%, -8px); }
    100% { transform: translate(0, 0); } }
.tab .deco3{
  background: url(../img/result/about_deco_cat.png) bottom right / contain no-repeat;
  height: 222px;
  top: -32px;
  right: -108px;
  width: 228px;
  z-index: 0;
  transform: translate(45%, 39%);
}
.tab.js-active .deco3{
  animation: tab_deco3 0.5s 1s forwards;
}
@keyframes tab_deco3 {
    0% {transform: translate(45%, 39%); }
    75% { transform: translate(-5%, -5%); }
    100% { transform: translate(0, 0); } }

/* 特賞 */
.tab .prs_special{
  margin-top: 60px;
}
.prs-box{
  padding: 40px 25px 50px;
  position: relative;
}
.award2 .prs-box{
  padding-top: 57px;
}
.prs-box .prs_title_label {
  position: absolute;
  top: -31px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 247px;
  width: 68%;
}
.prs-box > .item:not(:nth-of-type(1)){
  margin-top: 33px;
}
.prs-box > .item .award_theme_label{
  margin: 0 auto -24px;
  max-width: 280px;
  width: 90%;
}
.prs-box > .item .box{
  border-radius: 6px;
}
.award1 .prs-box > .item .box{
  padding-bottom: 40px;
}
.prs-box > .item.theme1 .box {
  background: #FF88A4;
}
.prs-box > .item.theme2 .box{
  background: #2CB9E6;
}
.prs-box > .item.theme3 .box{
  background: #FDAF31;
}
.prs-box > .item.theme4 .box{
  background: #55CE78;
}
.prs-box > .item .box .head{
  padding: 48px 0 32px;
}
.award2 .prs-box > .item .box .head{
  padding-top: 20px;
}
.prs-box > .item .box .head img{
  max-width: 100px;
  margin-inline: auto;
  width: 87%;
}
.award1 .prs-box > .item .box .head img,
.award2 .prs-box > .item .box .head .title{
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
  max-width: 260px;
}
.prs-box > .item .box .body{
  padding: 0 17px 25px;
}
.photos{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 14px;
}
.photos .item .photo{
  background: #FFF;
  box-shadow: 2px 2px 1px rgba(0,0,0,.2);
  display: block;
  padding: 4px;
}
.award1 .photos .item .photo{
  box-shadow: 3px 3px 1px rgba(0,0,0,.2);
  padding: 10px;
}
.photos .item .name{
  color: #FFF;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.1;
  margin-top: 10px;
  text-align: center;
}
.photos .item .name span{
  font-size: 12px;
  display: inline-block;
  line-height: 1.1;
}
.award1 .photos .item .name{
  font-size: 18px;
  margin-top: 15px;
}
.award1 .photos .item .name span{
  font-size: 14px;
}
.award1 .photos{
  grid-template-columns: 1fr;
  max-width: calc(260px + (17px * 2));
  margin-inline: auto;
}
.award_link a{
  background: #003C87;
  border-radius: 2px;
  color: #FFF;
  font-size: 14px;
  display: block;
  line-height: 1;
  padding: 6px 15px;
  margin-inline: auto;
  max-width: fit-content;
  text-decoration: none;
}
.award2{
  margin-top: 55px;
}

/* 抽選 */
.commonPre{
  padding-top: 160px;
}
.commonPre .happiness{
  padding: 60px 34px 55px;
  position: relative;
}
.commonPre .happiness::before{
  content: "";
  background: url(../img/result/award3_deco_star.png) center center / contain no-repeat;
  display: block;
  height: 57px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: calc(100% + 64px);
  opacity: 0;
  transform: translate(0, -80px);
}
.commonPre .js-active .happiness::before{
  animation: pre_star .7s .1s forwards;
}
@keyframes pre_star {
    0% {transform: translate(0, -80px);opacity: 0; }
    100% { transform: translate(0, 0);opacity: 1; } }
.commonPre .happiness .prs_title_label{
  max-width: 274px;
  width: 74%;
}
.commonPre .happiness .prs_txt{
  max-width: 303px;
  margin-inline: auto;
}
.award_col_txt{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 12px;
  justify-content: space-between;
}
.award_col_txt .item{
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1;
}
.award_col_txt .item span{
  font-size: 12px;
  margin-left: .1em;
}
.commonPre .happiness-wrap{
  position: relative;
}
.commonPre .happiness-wrap .deco{
  z-index: -1;
}
.commonPre .happiness-wrap .deco1{
  background: url(../img/result/award3_deco_ferret.png) bottom center / contain no-repeat;
  bottom: calc(100% + 13px);
  left: 19%;
  height: 64px;
  width: 64px;
  transform: translate(0, 56px);
}
.commonPre .happiness-wrap.js-active .deco1{
  animation: pre_deco1 .5s .7s forwards;
}
@keyframes pre_deco1 {
    0% {transform: translate(0, 56px); }
    75% { transform: translate(0, -10px); }
    100% { transform: translate(0, 0); } }
.commonPre .happiness-wrap .deco2{
  background: url(../img/result/award3_deco_hum.png) bottom center / contain no-repeat;
  bottom: calc(100% - 31px);
  right: 2%;
  height: 91px;
  width: 83px;
  transform: translate(0, 65px);
}
.commonPre .happiness-wrap.js-active .deco2{
  animation: pre_deco2 .5s .6s forwards;
}
@keyframes pre_deco2 {
    0% {transform: translate(0, 65px); }
    75% { transform: translate(0, -10px); }
    100% { transform: translate(0, 0); } }
.commonPre .happiness-wrap .deco3{
  background: url(../img/result/award3_deco_bird.png) bottom center / contain no-repeat;
  bottom: calc(100% + 25px);
  right: 33%;
  height: 74px;
  width: 43px;
  z-index: 2;
  transform: translate(47%,0);
}
.commonPre .happiness-wrap.js-active .deco3{
  animation: pre_deco3 .6s .55s forwards;
}
@keyframes pre_deco3 {
    0% {transform: translate(47%, 0%); }
    25% {transform: translate(35%, -8px); }
    49% {transform: translate(23%, 0); }
    50% {transform: translate(23%, 0); }
    75% {transform: translate(12%, -8px); }
    100% { transform: translate(0, 0); } }

.insta-wrap{
  margin-top: 84px;
}
.prs-box.insta{
  padding-bottom: 69px;
}
.insta .insta_ttl{
  max-width: 227px;
}
.insta .wht-box{
  border-radius: 2px;
  box-shadow: none;
  padding: 35px 24px;
}
.insta .insta_txt{
  max-width: 285px;
  margin-inline: auto;
}
.insta .btn{
  border-radius: 14px;
  font-size: 18px;
  max-width: 296px;
  padding-block: 11px 15px;
  line-height: 1.4;
}
.insta-wrap{
  position: relative;
}
.insta-wrap::before{
  content: "";
  background: url(../img/result/award4_deco_star.png) center center / contain no-repeat;
  display: block;
  position: absolute;
  right: -7px;
  bottom: calc(100% + -24px);
  height: 68px;
  width: 100%;
  opacity: 0;
  transform: translate(0, -80px);
}
.js-active .insta-wrap::before{
  animation: pre_star .7s .1s forwards;
}
.insta-wrap .deco1{
  background: url(../img/result/award4_deco_dog.png) bottom center / contain no-repeat;
  height: 79px;
  width: 65px;
  bottom: calc(100% - 50px - 19px);
  left: 21%;
  z-index: 0;
  transform: translate(0, 66px);
}
.js-active .insta-wrap .deco1{
  animation: insta_deco1 .5s .6s forwards;
}
@keyframes insta_deco1 {
    0% {transform: translate(0, 66px);z-index: 0; }
    60% { z-index: 0; }
    75% { transform: translate(0, -1px); }
    100% { transform: translate(0, 0);z-index: 2; } }
.insta-wrap .deco2{
  background: url(../img/result/award4_deco_cat.png) bottom center / contain no-repeat;
  height: 88px;
  width: 82px;
  bottom: calc(100% - 50px - 8px);
  right: 15%;
  z-index: 0;
  transform: translate(0, 80px);
}
.js-active .insta-wrap .deco2{
  animation: insta_deco2 .5s .6s forwards;
}
@keyframes insta_deco2 {
    0% {transform: translate(0, 80px);z-index: 0; }
    60% { z-index: 0; }
    75% { transform: translate(0, -1px); }
    100% { transform: translate(0, 0);z-index: 2; } }

/* フッター */
.page-top{
  margin-top: 0;
  padding-block: 80px 212px;
  position: relative;
}
.page-top .btn{
  background: #FFF;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 9px 18px;
}
.page-top::before{
  content: "";
  display: block;
  background: url(../img/result/foot_img.png?2510) bottom center / contain no-repeat;
  height: 132px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.page-top .heart{
  position: absolute;
  bottom: 11.5%;
  width: 7.8%;
  transform: translate(0, 0);
  opacity: 0;
}
.page-top.js-active .heart{
  animation: method-heart 0.5s ease-in-out forwards;
}
@keyframes method-heart {
    0% {transform: translate(0, 0);opacity: 0; }
    30% { transform: translate(0, -20px); }
    100% { transform: translate(0, 0);opacity: 1; } }
.page-top .heart:nth-of-type(1){
  left: 10%;
}
.page-top .heart:nth-of-type(2){
  right: 10%;
  animation-delay: .2s;
}

/* モーダル */
.modal-content{
  padding: 30px 25px 40px;
}
.modal-content .prs_title_label{
  margin-inline: auto;
  max-width: 274px;
  width: 98%;
}
/* .modal-content .head{
  max-width: 120px;
  margin: 10px auto 20px;
} */
.modal-content .prs_theme_label{
  margin: 0 auto -7px;
  max-width: 103px;
  position: relative;
  width: 34%;
}
.modal-content .box{
  border-radius: 6px;
  overflow: hidden;
}
.theme1 .modal-content .box{
  background: #FFEFEF;
}
.theme2 .modal-content .box{
  background: #DFF2FC;
}
.theme3 .modal-content .box{
  background: #FCEFE2;
}
.theme4 .modal-content .box{
  background: #DFF8E5;
}
.modal-content .head{
  padding: 17px 0 19px;
}
.theme1 .modal-content .head{
  background: #FF88A4;
}
.theme2 .modal-content .head{
  background: #2CB9E6;
}
.theme3 .modal-content .head{
  background: #FDAF31;
}
.theme4 .modal-content .head{
  background: #55CE78;
}
.modal-content .head img{
  filter: brightness(0) invert(1);
  max-width: 256px;
  margin-inline: auto;
  width: 80%;
}
.modal-content .body{
  padding: 29px 20px 25px;
}
.modal-content .prs_photo{
  /* box-shadow: 0px 0px 2px rgba(0,0,0,.2); */
  text-align: center;
  margin-inline: auto;
  max-width: 280px;
  position: relative;
  width: 100%;
}
.modal-content .prs_photo .prs_num {
  position: absolute;
  top: -5%;
  right: -3%;
  width: 27%;
  max-width: 77px;
}
.modal-content .note{
  line-height: 1.5;
}
#prize_dogcat_5 .prs_photo{
  margin-left: 5px;
  max-width: 327px;
  width: 100%;
}
/* .modal-content .prs_photo{
  text-align: center;
  margin-inline: auto;
  position: relative;
  width: 100%;
}
.modal-content .prs_photo .prs_num{
  position: absolute;
  top: -5%;
  right: -3%;
  width: 27%;
  max-width: 80px;
} */
.modal .btn-close{
  top: -10px;
  right: -10px;
}
@media screen and (max-width: 580px){
  .modal-dialog{
    margin-block: 1.75rem;
  }
}