.aboutmodal__inner {
  height: 100%;
  padding: 9.75rem 2.875rem 0;
}

.aboutmodal__logo__atri {
  position: absolute;
  top: 1.75rem;
  left: 0.625rem;
  width: 13.5rem;
}

.aboutmodal__period {
  margin: -3.875rem auto 0;
}

.aboutmodal__txt {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2;
  text-align: center;
}
.aboutmodal__txt::before {
  background: #003856;
  content: "";
  display: block;
  height: 5px;
  margin: 4rem auto 3.25rem;
  width: 4.5rem;
}
.aboutmodal__txt b {
  background: #0098e9;
  color: #fff;
  display: inline-block;
  line-height: 1;
  padding: 2px;
}

.aboutmodal__btn {
  position: relative;
  transition: all 0.3s ease;
  align-items: center;
  border: 1px solid #003856;
  cursor: pointer;
  display: flex;
  font-size: 1.875rem;
  font-weight: 900;
  height: 6.5rem;
  justify-content: center;
  margin: 40px auto 0;
  text-align: center;
  width: 21.5rem;
}
.aboutmodal__btn::after {
  position: absolute;
  top: 50%;
  right: 1.125rem;
  transition: all 0.3s ease;
  border-top: 1px solid #003856;
  border-right: 1px solid #003856;
  content: "";
  height: 1rem;
  transform: translateY(-50%) rotate(45deg);
  width: 1rem;
}
.aboutmodal__btn:hover {
  background: #003856;
  color: #fff;
}
.aboutmodal__btn:hover::after {
  border-color: #fff;
  transform: translate(0.5rem, -50%) rotate(45deg);
}

.aboutmodal__copyright {
  position: absolute;
  bottom: 1.125rem;
  right: 1.125rem;
  color: #a6b9c4;
  font-size: 1.125rem;
}

.contents {
  position: relative;
  aspect-ratio: 780/1310;
  background: url(../img/bg_contents.jpg) no-repeat 0 0/cover;
  overflow: hidden;
}
@media (max-width: 959px) and (max-aspect-ratio: 780/1310) {
  .contents {
    aspect-ratio: initial;
    height: 100vh;
    height: 100svh;
  }
}
@media (min-width: 960px) {
  .contents {
    aspect-ratio: 780/1310;
    border-left: 12px solid #003856;
    border-right: 12px solid #003856;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.7);
    width: 664px;
    margin: 0 12.5% 0 auto;
  }
}
@media (min-width: 960px) and (max-width: 1370px) {
  .contents {
    margin: 0 auto;
  }
}
@media (min-width: 960px) and (max-height: 800px) {
  .contents {
    margin-top: -800px;
  }
}
@media (min-width: 960px) and (min-height: 1115px) {
  .contents {
    position: absolute;
    top: 50%;
    right: 12.5%;
    margin: 0;
    transform: translateY(-50%);
  }
}
@media (min-width: 960px) and (min-height: 1115px) and (max-width: 1370px) {
  .contents {
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -50%);
  }
}
.contents::before {
  transition: all 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/loading.gif) no-repeat center/30px 30px, #fff;
  content: "";
  height: 100%;
  visibility: visible;
  width: 100%;
  z-index: 5;
}
.l-main.-ready .contents::before {
  opacity: 0;
  visibility: hidden;
}
.-inmodal .contents header,
.-inmodal .contents section,
.-inmodal .contents .tapbtn {
  filter: blur(0.625rem);
}

.header {
  padding-top: 2rem;
  text-align: center;
}

.header__logo__atri {
  font-size: 0rem;
  margin: 0 auto;
  width: 16.6%;
}

.header__logo__kaninome {
  font-size: 0rem;
  margin: 0 auto;
  width: 23.7%;
}

.kani {
  position: absolute;
  top: 23.9375rem;
  left: -6rem;
  height: 44.875rem;
  width: 68.1875rem;
}

.kani__inner {
  position: relative;
  height: 100%;
}

.kani__eye.-l {
  position: absolute;
  top: 37.6%;
  left: 41.7%;
  transform-origin: bottom right;
  width: 7.8%;
}
.kani__eye.-l .sumi {
  position: absolute;
  top: 11.8%;
  left: 12.7%;
  width: 65.1%;
  opacity: 0;
}
.kani__eye.-l .medama {
  display: none;
}
[data-achievementcount="1"] .kani__eye.-l .medama, [data-achievementcount="2"] .kani__eye.-l .medama {
  position: absolute;
  top: 8.4%;
  left: 30.2%;
  display: block;
  width: 53.4%;
}
.kani__eye.-r {
  position: absolute;
  top: 37.6%;
  left: 51.7%;
  transform-origin: bottom left;
  width: 5.25rem;
}
.kani__eye.-r .sumi {
  position: absolute;
  top: 14.5%;
  left: 13%;
  width: 66.6%;
  opacity: 0;
}
.kani__eye.-r .medama {
  display: none;
}
[data-achievementcount="2"] .kani__eye.-r .medama {
  position: absolute;
  top: 9%;
  left: 30.9%;
  display: block;
  width: 54.7%;
}

.kani__leg.-l {
  transform-origin: bottom right;
}
.kani__leg.-l.-leg1 {
  position: absolute;
  top: 15.5%;
  left: 24.8%;
  width: 19.3%;
}
.kani__leg.-l.-leg2 {
  position: absolute;
  top: 32.5%;
  left: 5.3%;
  transform-origin: bottom right;
  width: 35.1%;
}
.kani__leg.-l.-leg3 {
  position: absolute;
  top: 49.7%;
  left: 9.1%;
  width: 28.3%;
}
.kani__leg.-l.-leg4 {
  position: absolute;
  top: 65.5%;
  left: 17.9%;
  width: 20.9%;
}
.kani__leg.-r {
  transform-origin: bottom left;
}
.kani__leg.-r.-leg1 {
  position: absolute;
  top: 13.3%;
  left: 57.6%;
  width: 22.2%;
}
.kani__leg.-r.-leg2 {
  position: absolute;
  top: 28.4%;
  left: 60.7%;
  width: 34.1%;
}
.kani__leg.-r.-leg3 {
  position: absolute;
  top: 41.3%;
  left: 64.4%;
  width: 23.5%;
}
.kani__leg.-r.-leg4 {
  position: absolute;
  top: 58.4%;
  left: 63.6%;
  width: 19.7%;
}

.kani__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 68.1875rem;
}

.maincounter {
  position: relative;
}

.maincounter__ttl {
  margin: 3.75rem auto 0;
  width: 39.75rem;
}
[data-achievementcount="0"] .maincounter__ttl {
  background: url(../img/ttl_reward1.png) no-repeat 0 0/100%;
  height: 6.25rem;
  width: 39.5625rem;
}
[data-achievementcount="1"] .maincounter__ttl, [data-achievementcount="2"] .maincounter__ttl {
  background: url(../img/ttl_reward2.png) no-repeat 0 0/100%;
  height: 5.25rem;
  width: 44.875rem;
}

.maincounter__display {
  position: relative;
  aspect-ratio: 602/258;
  background: #fff;
  border: 0.5rem solid #003856;
  display: flex;
  gap: 0.8125rem;
  justify-content: center;
  margin: 1.25rem auto 0;
  padding: 0.625rem;
  width: 37.625rem;
}
.maincounter__display span {
  aspect-ratio: 26/44;
  background-color: #003856;
  color: #e9483d;
  font-size: 12.25rem;
  line-height: 1;
  text-align: center;
  width: calc((100% - 2.4375rem) / 4);
}
.maincounter__display::before {
  position: absolute;
  top: 50%;
  left: -4.5rem;
  background: url(../img/txt_ato.png) no-repeat 0 0/100%;
  content: "";
  display: block;
  height: 8.875rem;
  transform: translateY(-50%);
  width: 3.3125rem;
}

.maincounter__txt {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  margin: 0.25rem auto 0;
  text-align: right;
  width: 37.625rem;
}
.maincounter__txt.-txt2 {
  margin: 0.75rem 5.75rem 0 auto;
  width: 7.75rem;
}
.maincounter__txt.-txt2 img {
  vertical-align: top;
}

.maincounter__10000achivement {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 49.25rem;
  transform: translate(-50%, -50%);
  width: 49.25rem;
  display: none;
}
.maincounter__10000achivement .bg {
  -webkit-animation: rotateBgLight 20s linear infinite;
          animation: rotateBgLight 20s linear infinite;
}
.maincounter__10000achivement .txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34.125rem;
}
[data-achievementcount="2"] .maincounter__10000achivement {
  display: block;
}
@-webkit-keyframes rotateBgLight {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotateBgLight {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.maincounter__10000achivement__inner {
  position: relative;
  height: 100%;
}

.mv {
  position: fixed;
  top: 0;
  left: 0;
  border-left: 32px solid #0098e9;
  border-right: 32px solid #0098e9;
  background: url(../img/bg_wide.jpg) no-repeat 0 0/cover;
  height: 100%;
  width: 100%;
}
@media (min-width: 960px) and (max-height: 800px) {
  .mv {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    height: 800px;
  }
}

.mv__border {
  position: absolute;
  top: 0;
  left: -32px;
  -webkit-animation: moveBg 120s linear infinite;
          animation: moveBg 120s linear infinite;
  background: url(../img/linetxt.png) repeat-y 0 0/100%;
  height: 100%;
  width: 32px;
}
.mv__border.-r {
  position: absolute;
  top: 0;
  left: auto;
  bottom: auto;
  right: -32px;
  animation: moveBg 120s linear infinite reverse;
}
@-webkit-keyframes moveBg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -3000px;
  }
}
@keyframes moveBg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -3000px;
  }
}

.mv__logo__atri {
  position: absolute;
  top: 24px;
  left: 16px;
  width: 208px;
}

.mv__logo__kaninome {
  margin: 0 auto;
  max-width: 416px;
}

.mv__content {
  position: relative;
  height: 100%;
  width: 100%;
}
@media (min-width: 960px) {
  .mv__content {
    min-height: 800px;
    width: calc(100% - (640px + 12.5%));
  }
}
@media (min-width: 960px) and (max-width: 1370px) {
  .mv__content {
    display: none;
  }
}

.mv__content__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0 32px;
  transform: translate(-50%, -50%);
  width: 100%;
}

.mv__period {
  margin: -34px auto 0;
  max-width: 418px;
}

.mv__txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  text-align: center;
}
.mv__txt::before {
  background: #003856;
  content: "";
  display: block;
  height: 5px;
  margin: 36px auto 32px;
  width: 46px;
}
.mv__txt b {
  background: #0098e9;
  color: #fff;
  display: inline-block;
  line-height: 1;
  padding: 2px;
}

.mv__btn {
  position: relative;
  transition: all 0.3s ease;
  align-items: center;
  border: 1px solid #003856;
  display: flex;
  font-size: 14px;
  font-weight: 900;
  height: 56px;
  justify-content: center;
  margin: 40px auto 0;
  text-align: center;
  width: 200px;
}
.mv__btn::after {
  position: absolute;
  top: 50%;
  right: 12px;
  transition: all 0.3s ease;
  border-top: 1px solid #003856;
  border-right: 1px solid #003856;
  content: "";
  height: 9px;
  transform: translateY(-50%) rotate(45deg);
  width: 9px;
}
.mv__btn:hover {
  background: #003856;
  color: #fff;
}
.mv__btn:hover::after {
  border-color: #fff;
  transform: translate(5px, -50%) rotate(45deg);
}

.reward {
  position: absolute;
  left: 1.875rem;
  bottom: 2.5rem;
}

.reward__list__item {
  position: relative;
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.875rem;
  pointer-events: none;
}
.reward__list__item .num {
  background: #ccd6da;
  border-radius: 0.5rem;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  width: 8.5rem;
}
.reward__list__item .txt {
  position: relative;
  color: #ccd6da;
  font-size: 1.625rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: underline;
}
.reward__list__item .txt::after {
  position: absolute;
  top: 50%;
  right: -1.375rem;
  border-top: 0.25rem solid #003856;
  border-right: 0.25rem solid #003856;
  content: "";
  display: block;
  height: 1.125rem;
  transform: translateY(-50%) rotate(45deg);
  width: 1.125rem;
}
.reward__list__item + .reward__list__item {
  margin-top: 1.25rem;
}
.reward__list__item.-active {
  pointer-events: auto;
}
.reward__list__item.-active .num {
  background: #003856;
  color: #e9483d;
}
.reward__list__item.-active .txt {
  color: #003856;
}
.reward__list__item.-active::before {
  position: absolute;
  top: -1.25rem;
  left: -1.25rem;
  -webkit-animation: rotateSakura 3s linear infinite;
          animation: rotateSakura 3s linear infinite;
  background: url(../img/ico_sakura.png) no-repeat center/100%;
  content: "";
  height: 2.5rem;
  width: 2.5rem;
}
@-webkit-keyframes rotateSakura {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotateSakura {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.rewardmodal {
  background-color: rgba(0, 35, 55, 0.95) !important;
  background: url(../img/rewardmodal/bg.png) no-repeat 0 0/cover;
  text-align: center;
}
.rewardmodal .c-modal__close::before, .rewardmodal .c-modal__close::after {
  background: #fff;
}

.rewardmodal__ttl {
  height: 7.125rem;
}
.rewardmodal__ttl img {
  height: 100%;
  width: auto;
}

.rewardmodal__catch {
  position: relative;
  color: #ed432f;
  display: inline-block;
  font-size: 2.375rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-top: 2rem;
  padding: 0 2.625rem;
}
.rewardmodal__catch::before, .rewardmodal__catch::after {
  background: url(../img/rewardmodal/bracket.png) no-repeat center/100%;
  content: "";
  display: inline-block;
  height: 2.75rem;
  width: 1rem;
}
.rewardmodal__catch::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.rewardmodal__catch::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) scale(-1, 1);
}

.rewardmodal__item {
  margin-top: 3rem;
}
.rewardmodal__item iframe {
  aspect-ratio: 16/9;
  width: 100%;
}

.tapbtn {
  position: absolute;
  bottom: 3.5rem;
  right: 1.5rem;
  background: #003856;
  border-radius: 50%;
  box-shadow: 0.5rem 0.5rem 0.625rem rgba(0, 0, 0, 0.35);
  height: 20rem;
  padding: 0.625rem;
  width: 20rem;
}

.tapbtn__inner {
  align-items: center;
  background: #0098e9;
  border: 0.25rem solid #fff;
  border-radius: 50%;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.tapbtn__txt {
  width: 12.875rem;
}

.totalcounter {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  width: 11.6875rem;
}

.totalcounter__txt {
  font-size: 1.625rem;
  font-weight: 900;
  line-height: 1;
}

.totalcounter__display {
  background: #fff;
  border: 0.03125rem solid #003856;
  gap: 0.1875rem;
  display: flex;
  justify-content: center;
  margin-top: 0.25rem;
  padding: 0.25rem 0.3125rem;
  width: 100%;
}
.totalcounter__display span {
  aspect-ratio: 26/44;
  background-color: #003856;
  color: #fff;
  display: block;
  font-size: 2.5rem;
  line-height: 1;
  text-align: center;
  width: 1.625rem;
}