@charset "UTF-8";


/* キャラクター */
.secret {
  position: relative;
}
.p-charawrap{
  height: 100vh;
  position: relative;
  overflow: visible;
}
.p-chara {
  position: fixed;
  max-width: calc(450vw / 14);
  width: max-content;
  left: 35%;
  bottom: 0;
  transform: translateX(-35%);
  z-index: 20;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0;
}
.p-chara_img {
  width: calc(450vw / 14);
  max-width: calc(450vw / 14);
  will-change: width, transform;
}

.p-chara_fuki {
  position: absolute;
  top: calc(-240vw / 14);
  left: calc(-321vw / 14);
  width: calc(371vw / 14);
  max-width: calc(371vw / 14);
  opacity: 0;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}
.secret02 .p-chara_fuki {
  top: calc(-340vw / 14);
  left: 50%;
  width: calc(340vw / 14);
  max-width: calc(340vw / 14);
}
.secret03 .p-chara_fuki {
  top: calc(-260vw / 14);
  width: calc(380vw / 14);
  max-width: calc(380vw / 14);
}
.secret04 .p-chara_fuki {
  top: calc(-340vw / 14);
  left: 17%;
  width: calc(340vw / 14);
  max-width: calc(340vw / 14);
}
.loupe_animal2 {
  position: absolute;
  top: calc(185vw / 14);
  left: calc(-5vw / 14);
  width: calc(160vw / 14);
  max-width: calc(160vw / 14);
  opacity: 0;
  transform: translate3d(0,0,0) rotate(10deg);
  transform-origin: bottom;
  will-change: transform, opacity, width;
}
.loupe_animal2 img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 50%;
  will-change: transform;
}
/* チェックボックス */
.p-check {
  opacity: 0;
  transform: translateY(10px);
  position: absolute;
  bottom: 0;
  left: 10%;
  display: flex;
  align-items: center;
  font-size: calc(70vw /14);
  line-height:1.2;
}
.secret02 .p-check,
.secret04 .p-check {
  left: inherit;
  right: 10%;
  justify-content: flex-end;
}
.p-check_box {
  display: block;
  width: .7em;
  height: .7em;
  border: 2px solid #fff;
  position: relative;
  margin-right: .2em;
}
.p-check_box::after {
  display: block;
  content: '';
  position: absolute;
  background:  url("./img/ico_check.png") no-repeat;
  background-size: 100% auto;
  width: calc(50vw / 14);
  height: calc(43vw / 14);
  opacity: 0;
  top: calc(-5vw / 14);
  left: calc(5vw / 14);
}
.p-check_box::after{
  opacity: var(--check-o, 0);
  transition: none;
}
.p-check p {
  display: flex;
  letter-spacing: .1em;
  color: #fff070;
}
.p-check p span{
  opacity: 0;
  transform: translateY(6px);
}

@media (max-width: 767px) {
.p-charawrap {
  height: 100svh;
}
.p-chara {
  position: absolute;
  max-width: calc(430vw / 7.5);
  left: 25%;
  transform: translateX(-25%);
}
.p-check p {
  letter-spacing: .2em;
}
.p-chara_img{
  width: calc(430vw / 7.5);
  max-width: calc(430vw / 7.5);
}
.p-chara_fuki {
  top: calc(-350vw / 7.5);
  left: calc(-150vw / 7.5);
  width: calc(371vw / 7.5);
  max-width: calc(371vw / 7.5);
}
.secret04 .p-chara_fuki,
.secret02 .p-chara_fuki {
  top: calc(-360vw / 7.5);
  left: 20%;
  width: calc(340vw / 7.5);
  max-width: calc(340vw / 7.5);
}
.secret03 .p-chara_fuki {
  top: calc(-360vw / 7.5);
  width: calc(380vw / 7.5);
  max-width: calc(380vw / 7.5);
}
.loupe_animal2{
  top: calc(185vw / 7.5);
  left: calc(-5vw / 7.5);
  width: calc(147vw / 7.5);
  max-width: calc(147vw / 7.5);
}

.p-check {
  transform: translateY(10px);
  font-size: calc(70vw / 7.5);
  left: 5%;
}
.secret02 .p-check, .secret04 .p-check {
  right: 5%;
}
.p-check_box {
  border-width: 1px;
}
.p-check_box::after {
  width: calc(50vw / 7.5);
  height: calc(43vw / 7.5);
  top: calc(-5vw / 7.5);
  left: calc(5vw / 7.5);
}
}




/* メモセクション */
.secret-memo {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;

  background: #fdfbf3;
  box-shadow: 3px 3px 15px rgba(202,141,41,0.3);
  width: calc(1281vw /14);
  padding: calc(60vw / 14) 0 calc(75vw / 14);
  border-radius: 71px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.secret-ttls {
  width: calc(1159vw /14);
  height: calc(160vw / 14);
  margin: 0 auto;
  text-align: center;
  border: 1px solid #ff9a00;
  position: relative;
  font-weight: 600;
  font-size: calc(25vw / 14);
  font-style: italic;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
}
.secret-ttls::after {
  display: block;
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 32px;
  height: 100%;
  background: #ff9a00;
}
.secret-ttls__rub p {
  margin: 0 0.4em 1em;
}
.secret-ttl_line {
  color: #fff;
  font-size: calc(32vw / 14);
  position: relative;
  background-color: #398cca;
  padding: 0.4em 1em;
  margin: 0 0.4em;
}
.secret-ttl_line::before {
  background: linear-gradient(315deg, #398cca 50%, transparent 52%),
    linear-gradient(45deg, transparent 50%, #398cca 52%);
  background-size: 6px 6px;
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  height: 100%;
  width: 6px;
}
.secret-ttl_line::after {
  background: linear-gradient(45deg, #398cca 50%, transparent 52%),
    linear-gradient(315deg, transparent 50%, #398cca 52%);
  background-size: 6px 6px;
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  height: 100%;
  width: 6px;
}
.secret-ttl_line__in {
  position: relative;
}
.secret-ttl_line__in::after {
  content:"";
  position:absolute;
  right: -5%;
  height: 1em;
  width: 110%;
  background: #398cca;
}
.secret-ttl.is-state_scroll .secret-ttl_line__in::after {
  animation: secretTtlmask 0.45s ease-in forwards;
}
@keyframes secretTtlmask {
  to { width: 0%; }
}
.secret-ttl_rub {
  margin-bottom: 1em;
  display: block;
  text-indent: 0.3em;
}
.secret-mainBlock {
  width: calc(1159vw /14);
  margin: 0 auto;
  position: relative;
  border: 1px solid #ff9a00;
  border-top: 0;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #fedfb0 calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #fedfb0 calc(100% - 1px));
  background-size: 30px 30px;
  background-repeat: repeat;
  background-position: center center;
  padding: calc(60vw / 14) 0 calc(90vw / 14);
}

/*.secret-point p,
.secret-point__dot,
.secret-point__dot::before,
.secret-point__dot::after,
.secret-reveal::after{ animation-play-state: paused; }

.secret .secret-mainBlock.js-anime.is-anime .secret-point p,
.secret .secret-mainBlock.js-anime.is-anime .secret-point__dot,
.secret .secret-mainBlock.js-anime.is-anime .secret-point__dot::before,
.secret .secret-mainBlock.js-anime.is-anime .secret-point__dot::after,
.secret .secret-mainBlock.js-anime.is-anime .secret-reveal::after{ animation-play-state: running; }*/

.secret-point p{
  opacity: 0;
  transform: translateY(6px);
}
.secret-point__dot{
  opacity: 0;
  transform: scale(0.2);
}
.secret-point__dot::before{
  opacity: 0;
  transform: scale(0.7);
}
.secret-point__dot::after{
  clip-path: var(--line-clip, inset(100% 0 0 0));
}
.secret-reveal::after{
  width: 100%;
}

.secret .secret-mainBlock.js-anime.is-anime .secret-point__dot{
  animation: secretDotPop var(--secret-dot-in, 0.15s) ease-out forwards;
  animation-delay: var(--secret-delay-dot);
}
.secret .secret-mainBlock.js-anime.is-anime .secret-point__dot::before{
  animation: secretRingDraw var(--secret-ring, 0.55s) ease-out forwards;
  animation-delay: var(--secret-delay-ring);
}
.secret .secret-mainBlock.js-anime.is-anime .secret-point__dot::after{
  animation: secretDottedLine var(--secret-line, 0.35s) linear forwards;
  animation-delay: var(--secret-delay-line);
}
.secret .secret-mainBlock.js-anime.is-anime .secret-point p{
  animation: secretTextIn var(--secret-text, 0.45s) ease-out forwards;
  animation-delay: var(--secret-delay-text);
}
.secret .secret-mainBlock.js-anime.is-anime .secret-reveal::after{
  animation: secretCharUnmask 0.45s ease-in forwards;
  animation-delay: calc(var(--secret-delay-text) + 0.15s + (var(--i, 0) * 0.08s));
}

.secret .secret-mainBlock.js-anime .secret-point{
  visibility: hidden;
  opacity: 0;
}
.secret .secret-mainBlock.js-anime.is-anime .secret-point{
  visibility: visible;
  opacity: 1;
}
.secret .secret-mainBlock{ --secret-offset: 0s; }
.secret .secret-mainBlock.is-anime{ --secret-offset: 2s; }

.secret-point {
  pointer-events: none;
  position: absolute;
  opacity: 1;
  --secret-start: var(--secret-offset, 0s);

  --secret-delay-dot: var(--secret-start);
  --secret-delay-ring: calc(var(--secret-start) + var(--secret-dot-in, 0.15s));
  --secret-delay-line: calc(var(--secret-delay-ring) + var(--secret-ring, 0.55s));
  --secret-delay-text: calc(var(--secret-delay-line) + var(--secret-line, 0.35s));
}

.secret01-point01 {
  left: calc(44vw / 14);
  top: calc(125vw / 14);
}
.secret01-point02 {
  left: calc(44vw / 14);
  top: calc(324vw / 14);
}
.secret01-point03 {
  right: calc(48vw / 14);
  top: calc(240vw / 14);
}
.secret02-point01 {
  left: calc(60vw / 14);
  top: calc(100vw / 14);
}
.secret02-point02 {
  left: calc(42vw / 14);
  top: calc(310vw / 14);
}
.secret02-point03 {
  right: calc(365vw / 14);
  top: calc(17vw / 14);
}
.secret02-point04 {
  right: calc(84vw / 14);
  top: calc(273vw / 14);
}
.secret03-point01 {
  left: calc(54vw / 14);
  top: calc(134vw / 14);
}
.secret03-point02 {
  right: calc(40vw / 14);
  top: calc(236vw / 14);
}
.secret03-point03 {
  right: calc(-8vw / 14);
  top: calc(358vw / 14);
}
.secret04-point01 {
  left: calc(50vw / 14);
  top: calc(483vw / 14);
}
.secret04-point02 {
  right: calc(409vw / 14);
  top: calc(13vw / 14);
}
.secret04-point03 {
  right: calc(-49vw / 14);
  top: calc(389vw / 14);
}

.secret-point p {
  border: 1px solid #f82626;
  border-radius: calc(20vw /14);
  width: fit-content;
  padding: 1.2em 1em;
  position: relative;
  z-index: 1;
  background-color: #fff;
  opacity: 0;
  transform: translateY(6px);
  color: #f82626;
  font-size: calc(14vw / 14);
  font-feature-settings: "palt";
  line-height: 1.9;
}
.secret-point p span {
  color: #ff6800;
  font-size: calc(18vw / 14);
  background-color: #fffc00;
  padding: .05em .1em .1em;
  font-weight: bold;
}
.secret-point__dot {
  background: #f82626;
  border-radius: 50%;
  width: calc(14vw / 14);
  height: calc(14vw / 14);
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  transform: scale(0.2);
  transform-origin: center;
}
.secret01-point01 .secret-point__dot {
  top: calc(103vw / 14);
  left: calc(424vw / 14);
}
.secret01-point02 .secret-point__dot {
  left: calc(408vw / 14);
  top: calc(26vw / 14);
}
.secret01-point03 .secret-point__dot {
  top: calc(96vw / 14);
  left: calc(-686vw / 14);
}
.secret02-point01 .secret-point__dot {
  top: calc(40vw / 14);
  left: calc(553vw / 14);
}
.secret02-point02 .secret-point__dot {
  left: calc(443vw / 14);
  top: calc(20vw / 14);
}
.secret02-point03 .secret-point__dot {
  top: calc(109vw / 14);
  left: calc(-31vw / 14);
}
.secret02-point04 .secret-point__dot {
  top: calc(33vw / 14);
  left: calc(-569vw / 14);
}
.secret03-point01 .secret-point__dot {
  top: calc(55vw / 14);
  left: calc(488vw / 14);
}
.secret03-point02 .secret-point__dot {
  left: calc(-722vw / 14);
  top: calc(67vw / 14);
}
.secret03-point03 .secret-point__dot {
  top: calc(0vw / 14);
  left: calc(-743vw / 14);
}
.secret04-point01 .secret-point__dot {
  top: calc(-81vw / 14);
  left: calc(152vw / 14);
}

.secret-point__dot::before {
  content:"";
  position:absolute;
  inset: 0px;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.7);
  background: conic-gradient(#fff 0turn, #fff 0turn, transparent 0turn);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
.secret-point__dot::after{
  content:"";
  position:absolute;
  opacity: 1;
  width: var(--line-w, 2px);
  height: var(--line-h, calc(88vw / 14));
  left: var(--line-left, 50%);
  top: var(--line-top, auto);
  right: var(--line-right, auto);
  bottom: var(--line-bottom, 100%);
  transform: translateX(-50%);
  background: var(--line-bg, repeating-linear-gradient(to top, #f82626 0 5px, transparent 5px 10px));
  clip-path: var(--line-clip, inset(100% 0 0 0));
}
.is-line-rtl .secret-point__dot::after{
  --line-w: calc(120vw / 14);
  --line-h: 2px;
  --line-left: auto;
  --line-right: 100%;
  --line-bottom: 50%;
  --line-top: auto;
  transform: translateY(50%);

  --line-bg: repeating-linear-gradient(to left, #f82626 0 5px, transparent 5px 10px);
  --line-clip: inset(0 0 0 100%);
}
.is-line-ltr .secret-point__dot::after{
  --line-w: calc(120vw / 14);
  --line-h: 2px;
  --line-left: 100%;
  --line-right: auto;
  --line-bottom: 50%;
  --line-top: auto;
  transform: translateY(50%);

  --line-bg: repeating-linear-gradient(to right, #f82626 0 5px, transparent 5px 10px);
  --line-clip: inset(0 100% 0 0);
}
.is-line-btu .secret-point__dot::after{
  --line-w: 2px;
  --line-h: calc(120vw / 14);
  --line-left: 50%;
  --line-bottom: 100%;
  --line-top: auto;
  --line-right: auto;
  transform: translateX(-50%);
  --line-bg: repeating-linear-gradient(to top, #f82626 0 5px, transparent 5px 10px);
  --line-clip: inset(100% 0 0 0);
}
.is-line-ttb .secret-point__dot::after{
  --line-w: 2px;
  --line-h: calc(120vw / 14);
  --line-left: 50%;
  --line-top: 100%;
  --line-bottom: auto;
  --line-right: auto;
  transform: translateX(-50%);
  --line-bg: repeating-linear-gradient(to bottom, #f82626 0 5px, transparent 5px 10px);
  --line-clip: inset(0 0 100% 0);
}
.secret01-point01.is-line-rtl .secret-point__dot::after{
  --line-w: calc(200vw / 14);
}
.secret01-point02.is-line-rtl .secret-point__dot::after{
  --line-w: calc(185vw / 14);
}
.secret01-point03.is-line-ltr .secret-point__dot::after{
  --line-w: calc(245vw / 14);
}
.secret02-point01.is-line-rtl .secret-point__dot::after{
  --line-w: calc(330vw / 14);
}
.secret02-point02.is-line-rtl .secret-point__dot::after{
  --line-w: calc(204vw / 14);
}
.secret02-point03.is-line-btu .secret-point__dot::after{
  --line-h: calc(45vw / 14);
}
.secret02-point04.is-line-ltr .secret-point__dot::after{
  --line-w: calc(245vw / 14);
}
.secret03-point01.is-line-rtl .secret-point__dot::after{
  --line-w: calc(290vw / 14);
}
.secret03-point02.is-line-ltr .secret-point__dot::after{
  --line-w: calc(247vw / 14);
}
.secret03-point03.is-line-ltr .secret-point__dot::after{
  --line-w: calc(246vw / 14);
}
.secret04-point01.is-line-ttb .secret-point__dot::after{
  --line-h: calc(80vw / 14);
}

.secret-reveal {
  overflow: hidden;
  position: relative;
}
.secret-reveal::after {
  content:"";
  position:absolute;
  right: 0;
  height: 100%;
  width: 100%;
  background: #fffc00;
}

@keyframes secretDotPop{
  to { opacity: 1; transform: scale(1); }
}
@keyframes secretRingDraw{
  0%{
    opacity: 0;
    transform: scale(1.7);
    background: conic-gradient(#fff 0turn, transparent 0turn);
  }
  10%{ opacity: 1; }
  100%{
    opacity: 1;
    transform: scale(1);
    background: conic-gradient(#fff 1turn, transparent 0turn);
  }
}
@keyframes secretDottedLine{
  to { clip-path: inset(0 0 0 0); }
}
@keyframes secretStrokeDown{
  to { transform: translateX(-50%) scaleY(1); }
}
@keyframes secretTextIn{
  to { opacity: 1; transform: translateY(0); }
}
@keyframes secretCharUnmask{
  to { width: 0%; }
}


.nonmagnifier-wrap {
  display: flex;
  justify-content: center;
}
.nonmagnifier-wrap picture {
  width: calc(470vw /14);
  margin: 0 calc(30vw /14);
}

.secret01-decoration01 {
  position: absolute;
  width: calc(158vw / 14);
  right: calc(85vw / 14);
  top: calc(-42vw / 14);
}
.secret01-decoration02 {
  position: absolute;
  width: calc(285vw / 14);
  left: calc(60vw / 14);
  bottom: calc(30vw / 14);
}
.secret02-decoration01 {
  position: absolute;
  width: calc(400vw / 14);
  left: calc(20vw / 14);
  bottom: calc(-25vw / 14);
}
.secret02-decoration02 {
  position: absolute;
  width: calc(186vw / 14);
  right: calc(167vw / 14);
  top: calc(16vw / 14);
  z-index: 1;
}
.secret03-decoration01 {
  position: absolute;
  width: calc(194vw / 14);
  left: calc(236vw / 14);
  top: calc(0vw / 14);
}
.secret03-decoration02 {
  position: absolute;
  width: calc(360vw / 14);
  left: calc(30vw / 14);
  bottom: calc(30vw / 14);
}


.secret-animals {
  animation-duration: 0.5s;
}
.secret-animals img {
  width: calc(80vw /14);
  position: absolute;
  bottom: calc(-360vw /14);
}
.secret-animals.is-state_scroll img {
  animation: secreAnimals 1s ease-in forwards;
}
@keyframes secreAnimals {
  0% { bottom: calc(-360vw /14); }
  90% { bottom: calc(-160vw /14); }
  100% { bottom: calc(-170vw /14); }
}
.secret-animals .secret-animals_O {
  left: 10%;
}
.secret-animals .secret-animals_E {
  right: 6%;
}
.secret-animals__line {
  position: absolute;
  font-size: calc(18vw /14);
  letter-spacing: 0.1em;
  opacity: 0;
}
.secret-animals.is-state_scroll .secret-animals__line {
  animation: secreLine 0.1s 0.8s ease-in forwards;
}
@keyframes secreLine {
  0% { opacity: 0; }
  60% { opacity: 1; }
  100% { opacity: 1; }
}
.secret-animals__line01 {
  top: calc(25vw /14);
  left: calc(220vw /14);
}
.secret-animals__line02 {
  top: calc(25vw /14);
  right: calc(160vw /14);
}


@media (max-width: 767px) {
.secret-memo {
  box-shadow: 3px 3px 10px rgba(202,141,41,0.3);
  width: 100%;
  padding: calc(90vw / 7.5) 0 calc(102vw /7.5);
  border-radius: calc(118vw /7.5);
}
.secret-ttls {
  width: calc(600vw /7.5);
  height: calc(263vw /7.5);
  font-size: calc(34vw / 7.5);
  justify-content: flex-start;
  padding: 0em 1.5em;
}
.secret-ttls::after {
  width: 10px;
}
.secret-ttls__rub {
  flex-wrap: wrap;
}
.secret-ttl_rub {
  margin-bottom: 0;
  display: inline;
}
.secret-ttls__rub p {
  margin: auto;
  height: 2em;
  width: 84%;
}
.secret-ttls__rub p:first-child {
  margin-bottom: auto;
  top: -3em;
}
.secret-ttls__rub p:last-child {
  top: 2em;
}
.secret-ttl {
  line-height: 2;
  height: 4em;
  width: fit-content;
  margin: auto;
  top: 0;
  position: absolute;
  bottom: 0;
  left: 0.6em;
  right: 0;
}
.secret-ttl_line {
  font-size: calc(44vw / 7.5);
  padding: 0 0.2em 0 0.1em;
  margin: 0 0.2em;
}
.secret-ttl_line::before {
  background-size: 3px 3px;
  left: -3px;
  width: 3px;
}
.secret-ttl_line::after {
  background-size: 3px 3px;
  right: -3px;
  width: 3px;
}
.secret-ttl_line__in::after {
  right: -3%;
  height: 1em;
  width: 105%;
  top: 0.3em;
}
.secret-mainBlock {
  width: calc(600vw /7.5);
  background-size: 16px 16px;
  padding: calc(400vw / 7.5) 0 calc(270vw / 7.5);
}
.secret04 .secret-mainBlock {
  padding: calc(200vw / 7.5) 0 calc(265vw / 7.5);
}
.secret01-point01 {
  left: calc(-46vw / 7.5);
  top: calc(160vw / 7.5);
}
.secret01-point02 {
  left: calc(30vw / 7.5);
  top: inherit;
  bottom: calc(67vw / 7.5);
}
.secret01-point03 {
  right: calc(-46vw / 7.5);
  top: calc(39vw / 7.5);
  bottom: inherit;
}
.secret02-point01 {
  top: calc(18vw / 7.5);
  left: calc(69vw / 7.5);
}
.secret02-point02 {
  left: calc(30vw / 7.5);
  top: inherit;
  bottom: calc(90vw / 7.5);
}
.secret02-point03 {
  right: calc(20vw / 7.5);
  top: calc(246vw / 7.5);
}
.secret02-point04 {
  right: inherit;
  top: calc(246vw / 7.5);
  left: calc(40vw / 7.5);
}
.secret03-point01 {
  left: calc(22vw / 7.5);
  top: inherit;
  bottom: calc(69vw / 7.5);
}
.secret03-point02 {
  top: calc(239vw / 7.5);
  left: calc(73vw / 7.5);
}
.secret03-point03 {
  right: calc(-55vw / 7.5);
  top: calc(22vw / 7.5);
}
.secret04-point01 {
  left: inherit;
  top: calc(22vw / 7.5);
  right: calc(50vw / 7.5);
}
.secret04-point02 {
  right: inherit;
  top: calc(741vw / 7.5);
  left: calc(20vw / 7.5);
}
.secret04-point03 {
  right: calc(-40vw / 7.5);
  top: inherit;
  bottom: calc(50vw / 7.5);
}
.secret-point p {
  border-radius: calc(20vw /7.5);
  padding: 1.2em 1em;
  font-size: calc(20vw / 7.5);
  border-width: 0.05em;
}
.secret-point p span {
  font-size: calc(26vw / 7.5);
  padding: .01em .1em 0.01em;
}
.secret-point__dot {
  width: calc(27vw / 7.5);
  height: calc(27vw / 7.5);
}
.secret01-point01 .secret-point__dot {
  top: calc(409vw / 7.5);
  left: calc(143vw / 7.5);
}
.secret01-point02 .secret-point__dot {
  left: calc(-23vw / 7.5);
  top: calc(-248vw / 7.5);
}
.secret01-point03 .secret-point__dot {
  top: calc(673vw / 7.5);
  left: calc(-195vw / 7.5);;
}
.secret02-point01 .secret-point__dot {
  top: calc(453vw / 7.5);
  left: calc(243vw / 7.5);
}
.secret02-point02 .secret-point__dot {
  left: calc(-14vw / 7.5);
  top: calc(-261vw / 7.5);
}
.secret02-point03 .secret-point__dot {
  top: calc(216vw / 7.5);
  left: calc(-140vw / 7.5);
}
.secret02-point04 .secret-point__dot {
  top: calc(308vw / 7.5);
  left: calc(258vw / 7.5);
}
.secret03-point01 .secret-point__dot {
  top: calc(-428vw / 7.5);
  left: calc(196vw / 7.5);
}
.secret03-point02 .secret-point__dot {
  left: calc(97vw / 7.5);
  top: calc(417vw / 7.5);
}
.secret03-point03 .secret-point__dot {
  top: calc(698vw / 7.5);
  left: calc(-141vw / 7.5);
}
.secret04-point01 .secret-point__dot {
  top: calc(274vw / 7.5);
  left: calc(-173vw / 7.5);
}
.secret-point__dot::before {
  border: 2px solid #fff;
}
.secret-point__dot::after{
  width: var(--line-w, 2px);
  height: var(--line-h, calc(88vw / 14));
  background: var(--line-bg, repeating-linear-gradient(to top, #f82626 0 6px, transparent 6px 12px));
}
.is-line-btu .secret-point__dot::after{
  --line-w: 2px;
  --line-h: calc(120vw / 7.5);
  --line-bg: repeating-linear-gradient(to top, #f82626 0 6px, transparent 6px 12px);
}
.is-line-ttb .secret-point__dot::after{
  --line-w: 2px;
  --line-h: calc(120vw / 7.5);
  --line-bg: repeating-linear-gradient(to bottom, #f82626 0 6px, transparent 6px 12px);
}

.is-line-sp-btu .secret-point__dot::after{
  --line-w: 1px;
  --line-h: calc(120vw / 7.5);
  --line-left: 50%;
  --line-bottom: 100%;
  --line-top: auto;
  --line-right: auto;
  transform: translateX(-50%);
  --line-bg: repeating-linear-gradient(to top, #f82626 0 3px, transparent 2px 5px);
  --line-clip: inset(100% 0 0 0);
}
.is-line-sp-ttb .secret-point__dot::after{
  --line-w: 1px;
  --line-h: calc(120vw / 7.5);
  --line-left: 50%;
  --line-top: 100%;
  --line-bottom: auto;
  --line-right: auto;
  transform: translateX(-50%);
  --line-bg: repeating-linear-gradient(to bottom, #f82626 0 3px, transparent 2px 5px);
  --line-clip: inset(0 0 100% 0);
}
.is-line-sp-ltr .secret-point__dot::after{
  --line-w: calc(120vw / 7.5);
  --line-h: 1px;
  --line-left: 100%;
  --line-right: auto;
  --line-bottom: 50%;
  --line-top: auto;
  transform: translateY(50%);
  --line-bg: repeating-linear-gradient(to right, #f82626 0 3px, transparent 2px 5px);
  --line-clip: inset(0 100% 0 0);
}
.is-line-sp-rtl .secret-point__dot::after{
  --line-w: calc(120vw / 7.5);
  --line-h: 1px;
  --line-left: auto;
  --line-right: 100%;
  --line-bottom: 50%;
  --line-top: auto;
  transform: translateY(50%);
  --line-bg: repeating-linear-gradient(to left, #f82626 0 3px, transparent 2px 5px);
  --line-clip: inset(0 0 0 100%);
}

.secret01-point01.is-line-rtl .secret-point__dot::after{
  --line-w: 1px;
  --line-h: calc(230vw / 7.5);
}
.secret01-point02.is-line-rtl .secret-point__dot::after{
  --line-w: 1px;
  --line-h: calc(240vw / 7.5);
}
.secret01-point03.is-line-ltr .secret-point__dot::after{
  --line-w: 1px;
  --line-h: calc(530vw / 7.5);
}
.secret02-point01.is-line-rtl .secret-point__dot::after{
  --line-w: 1px;
  --line-h: calc(283vw / 7.5);
}
.secret02-point02.is-line-rtl .secret-point__dot::after{
  --line-w: 1px;
  --line-h: calc(253vw / 7.5);
}
.secret02-point03.is-line-btu .secret-point__dot::after{
  --line-h: calc(145vw / 7.5);
}
.secret02-point04.is-line-ltr .secret-point__dot::after{
  --line-w: 1px;
  --line-h: calc(253vw / 7.5);
}
.secret03-point01.is-line-rtl .secret-point__dot::after{
  --line-w: 1px;
  --line-h: calc(400vw / 7.5);
}
.secret03-point02.is-line-ltr .secret-point__dot::after{
  --line-w: 1px;
  --line-h: calc(353vw / 7.5);
}
.secret03-point03.is-line-ltr .secret-point__dot::after{
  --line-w: 1px;
  --line-h: calc(520vw / 7.5);
}
.secret04-point01.is-line-ttb .secret-point__dot::after{
  --line-h: calc(125vw / 7.5);
}
.nonmagnifier-wrap {
  display: block;
}
.nonmagnifier-wrap picture {
  width: calc(520vw /7.5);
  margin: 0 auto;
}
.nonmagnifier-wrap picture:first-child {
  margin: 0 auto calc(100vw /7.5);
}
.secret01-decoration01 {
  width: calc(158vw / 7.5);
  right: calc(30vw / 7.5);
  top: calc(230vw / 7.5);
}
.secret01-decoration02 {
  display: none;
}
.secret02-decoration01 {
  display: none;
}
.secret02-decoration02 {
  width: calc(207vw / 7.5);
  right: calc(-35vw / 7.5);
  top: calc(56vw / 7.5);
}
.secret03-decoration01 {
  width: calc(200vw / 7.5);
  left: calc(15vw / 7.5);
  top: calc(52vw / 7.5);
  transform: rotate(-8deg);
}
.secret03-decoration02 {
  display: none;
}
.secret-animals img {
  width: calc(88vw /7.5);
  bottom: calc(-200vw /7.5);
}
@keyframes secreAnimals {
  0% { bottom: calc(-400vw /7.5); }
  90% { bottom: calc(-190vw /7.5); }
  100% { bottom: calc(-200vw /7.5); }
}
.secret-animals .secret-animals_O {
  left: 10%;
}
.secret-animals .secret-animals_E {
  right: 10%;
}
.secret-animals__line {
  font-size: calc(18vw /7.5);
  letter-spacing: 0.1em;
}
.secret-animals__line01 {
  top: calc(43vw / 7.5);
  left: calc(177vw / 7.5);
}
.secret-animals__line02 {
  top: calc(25vw /7.5);
  right: calc(170vw /7.5);
}
.secret04 .secret-animals__line02{
  top: calc(42vw /7.5);
}

}

/* 虫眼鏡 */
.magnifier-wrap {
  position: relative;
  display: block;
  margin: 0 auto;
/*  max-width: 469px;*/
  width: calc(469vw /14);
  cursor: none;
}
.js-baseImage {
  width: calc(469vw /14);
  max-width: 100%;
  height: auto;
  display:block;
}
.magnifier {
  position: absolute;
  width: calc(160vw /14);
  height: calc(160vw /14);
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  background-image: url("./img/secret01_mainimg_l.png");
  background-repeat: no-repeat;
  display: none;
  z-index:2;
}
.secret02 .magnifier {
  background-image: url("./img/secret02_mainimg_l.png");
  background-repeat: no-repeat;
}
.secret03 .magnifier {
  background-image: url("./img/secret03_mainimg_l.png");
  background-repeat: no-repeat;
}
.magnifier-frame {
  position: absolute;
  width: calc(191vw /14);
  height: auto;
  margin-top: calc(-25vw /14);
  pointer-events: none;
  display: none;
  z-index:3;
}


@media (max-width: 767px) {
.magnifier-wrap {
  width: calc(521vw / 7.5);
  max-width: calc(521vw / 7.5);
}
.js-baseImage {
  width: calc(521vw / 7.5);
}
.magnifier-wrap, #baseImage {
  touch-action: none;
}
.magnifier {
  width: calc(260vw / 7.5);
  height: calc(260vw / 7.5);
}
.magnifier-frame {
  width: calc(304vw / 7.5);
  margin-top: -5vw;
}

}