@charset "UTF-8";

.mystery {
  text-align: center;
  color: #32444f;
}

.mystery p {
  padding: 0;
  margin: 0;
}

.mystery h2 {
  font-family: "Kaisei Opti", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
  font-weight: 700;
  line-height: 1.6;
  color: #0042a4;
  margin: 1rem auto 2rem;
}

.mystery h3 {
  font-family: "Kaisei Opti", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
  font-weight: 700;
  line-height: 1.6;
  font-size: 1.7rem;
  color: #7c2b2b;
}

.mystery .bg-stripe {
  background-image: repeating-linear-gradient(-45deg, #cbd8ea3f, #cbd8ea3f 10px, transparent 10px, transparent 20px);
  background-size: 28.304px 28.304px;
  background-repeat: repeat;
  animation: mystery-bg-stripe 8s linear infinite;
}  

@keyframes mystery-bg-stripe {
  0%{
    background-position: 28.304px 0;
  }
  100%{
    background-position: 0 0;
  }
}

.mystery .bg-blue-stripe {
  background-image: repeating-linear-gradient(-45deg, #c5dbfa, #c5dbfa 10px, #b4cbf1 10px, #b4cbf1 20px);
}  

.mystery .bg-sparkle {
    position: absolute;
    width: 5%;
    height: 4%;
    transform: translate(-50%, -50%);
    background-image: url(assets/mystery/Sparkle.png);
    background-position: 0 0;
    background-size: cover;
    animation: mystery-sparkle 1.35s steps(4, jump-end) infinite;
}

@keyframes mystery-sparkle {
  0%{
    transform:scale(0);
  }
  25%{
    transform:scale(1.25);
  }
  50%{
    transform:scale(0);
  }
  100%{
    transform:scale(0);
  }
}

.mystery .bg-illust {
    position: absolute;
    width: 7rem;
    height: 7rem;
    transform: translate(-50%, -50%);
    background-image: url(assets/mystery/Illust/0806.png);
    background-position: 0 0;
    background-size: cover;
    /* animation: mystery-sparkle 1.35s steps(4, jump-end) infinite; */
}

.mystery .img-logo {
  width: 100%;
  max-width: 560px;
  margin-bottom: -1rem;
}

.mystery iframe {
  width: 100%;
  max-width: 690px;
  height: 400px;
}

.mystery .bg-light-blue {
  background-color: #d9e7f8;
}

.mystery .bg-bright-blue {
  background-color: #bfd8f0;
}

@media only screen and (max-width: 767px) { 
  .mystery iframe {
    height: 300px;
  }
}

.mystery .platform-small {
  font-size: 1.0rem;
  font-weight: 700;
  line-height: 1.0;
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-radius: 0.5rem;
  border-style: solid;
}

.mystery .os-small {
  font-size: 1.0rem;
  color: #1773ad;
}

.mystery .background {
  z-index: -4;
  width: 100%;
  height: 384px;
  position: fixed;
  background-size: auto 100%;
  margin: 0;
  padding: 0;
}

.mystery .section-wrapper {
  padding: 0;
  position: relative;
}

.mystery .section {
  border: #2673ae;
  border-radius: 1rem;
  padding: 2rem 1rem;
  max-width: 800px;
  margin: 0 auto;
  line-height: 2.5rem;
}

.mystery .section p {
  text-align: center;
  padding: 1rem 0;
}

.mystery .section ul {
  text-align: left;
  padding: 1rem 0;
}

.mystery .section li {
  list-style: none;
  padding-left: 1em;
  text-indent: -1em;
}

.mystery .section-contents {
  font-size: 1rem;
  line-height: 1.7rem;
}

.mystery .section-contents h3 {
  font-family: "Kaisei Opti", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
  margin: 16px auto;
  padding: 0.4rem;
  width: 16rem;
  border-image: url(assets/mystery/SectionTitleBase2.png) round;
  border-image-slice: 0 80 fill;
  border-image-width: 0 3rem;
  color: white;
  font-size: 1rem;
}

.mystery .subsection {
  font-family: "Kaisei Opti", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
  margin: 16px auto;
  width: 16rem;
  border-image: url(assets/mystery/SectionTitleBase2.png) round;
  border-image-slice: 0 80 fill;
  border-image-width: 0 3rem;
  color: white;
}

.mystery .img-gallery {
  width: 100%;
  border-radius: 5px;
}

.mystery .modal-gallery {
  position: relative;
}

.mystery .modal-gallery .close {
  position: absolute;
  right: 10px;
  top: 5px;
  color: white;
  text-shadow: none;
  opacity: 1;
}

.mystery .box {
  margin: 2rem;
  width: 95%;
  max-width: 600px;
	padding: 10rem 10px 2rem 10px;
	position: relative;
	z-index: 0;
  border: solid 8px #0c6ca2;
  border-radius: 10px;
  line-height: 2.5rem;
}

.mystery .box .box-title {
	background-color: #0c6ca2;
	border-radius: 0px 0px 0px 0px;
	color: #fff;
  height: 9rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}

.mystery .box .box-title h2 {
  font-family: 'M PLUS Rounded 1c', "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
  color: #fff;
	height: 3rem;
  font-size: 2rem;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
  
.mystery .box .box-title h2::before,
.mystery .box .box-title h2::after {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-image: url(assets/mystery/PurchaseIcon.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.mystery .box h3 {
  font-family: 'M PLUS Rounded 1c', "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
  color: #144b68;
  margin: 2rem auto;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: bottom center;
}

.mystery .box table {
  margin: auto;
}

.mystery .box th {
  text-align: left;
  color: #246995;
  padding-right: 1rem;
  padding-bottom: 1rem;
}

.mystery .box td {
  text-align: left;
  padding-left: 0rem;
}

.mystery .box .separator-line {
  width: 90%;
  margin: 1.4rem auto 2.8rem;
  border-bottom: 4px dotted #83a2bc;
}

.mystery .section-order table {
  font-size: 1rem;
  line-height: 1.2rem;
  border-spacing: 0.7rem;
  margin: auto -0.7rem;
  border-collapse: separate;
}

.mystery .section-order th {
  text-align: left;
  color: #246995;
}

.mystery .section-order td {
  text-align: left;
}


.mystery details {
  width: 28rem;
  margin: 24px auto;
  border: 4px solid #486fa0;
  position: relative;
}

.mystery details summary:before {
  content: '';
  position: absolute;
  background-image: url(assets/mystery/Key.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed; 
  top: 0.4rem;
  left: 0.5rem;
  width: 2rem;
  height: 2rem;
  transform: rotate(0);
  transform-origin: 55% 50%;
  transition: .25s transform ease;
}

.mystery details[open] > summary:before {
  transform: rotate(450deg);
}

.mystery details summary {
  font-family: "Kaisei Opti", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
  display: block;  /* display: list-item 以外を指定したので、デフォルトの三角形アイコンは非表示に */
  width: 28rem;
  margin: 0 auto;
  grid-template-columns:  1fr 24px;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  background-color: #486fa0;
  font-weight: bold;
  color: white;
  margin: -4px -4px 0;
  /* Safariで表示されるデフォルトの三角形アイコンを消す */
  &::-webkit-details-marker {
    display: none;
  }
}

.mystery .details-text {
  font-size: 1rem;
  line-height: 2rem;
  width: 28rem;
  margin: 0 auto;
  padding: 12px 12px 12px;
  background-color: white;
}

.mystery details::details-content {
  height: 0;
  overflow: clip;
  opacity: 0;
  transition: height 0.4s ease, opacity 0.4s ease,
    content-visibility 0.4s ease allow-discrete;
}

.mystery details[open]::details-content {
  height: auto; /* for unsupported browser */
  height: calc-size(auto, size);
  opacity: 1;
}

.mystery details h3 {
  font-family: "Kaisei Opti", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
  font-size: 1rem;
  margin: 1.5rem auto 0.5rem;
  width: 18rem;
  padding: 0.5rem;
  border-image: url(assets/mystery/SectionTitleBase3.png) round;
  border-image-slice: 0 80 fill;
  border-image-width: 0 3rem;
  color: rgb(37 50 52);
}

.mystery a.shop-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  position: relative;
  background: #e54c4c;
  border-radius: 30px;
  box-sizing: border-box;
  padding: 0 15px 0 15px;
  margin: 0 3px;
  color: #fff;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
  text-align: center;
  box-shadow: 0 1rem 3rem rgba(104, 105, 107, 0.175) !important;
}

.mystery a.shop-button:hover {
  background: #f86e6e;
}

.mystery a.online-shop-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  position: relative;
  background: #e94545;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 1rem 15px;
  margin: 0.5rem auto 1rem;
  color: #fff;
  line-height: 1.6;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 1rem 3rem rgba(104, 105, 107, 0.175) !important;
}

.mystery a.online-shop-button:hover {
  background: #f86e6e;
}

.mystery .shadow {
  box-shadow: 0 0rem 5rem rgba(0,0,0,.3)!important;
}

.mystery .note {
  font-size: 0.9em;
  line-height: 2.0rem;
  color: #5f6579;
}

.mystery .separator-mask-top {
  mask-image: url(assets/mystery/SeparatorMask.png);
  mask-mode: alpha;
  mask-repeat: repeat-x;
  mask-position: center;
  -webkit-mask-image: url(assets/mystery/SeparatorMask.png);
  -webkit-mask-mode: alpha;
  -webkit-mask-position: center;
  -webkit-mask-repeat: repeat-x;
  position: absolute;
  width: 100%;
  height: 32px;
  top: -24px;
}

.mystery .separator-mask-bottom {
  mask-image: url(assets/mystery/SeparatorMask.png);
  mask-mode: alpha;
  mask-repeat: repeat-x;
  mask-position: center;
  -webkit-mask-image: url(assets/mystery/SeparatorMask.png);
  -webkit-mask-mode: alpha;
  -webkit-mask-position: center;
  -webkit-mask-repeat: repeat-x;
  transform: scaleY(-1);
  position: absolute;
  width: 100%;
  height: 32px;
  top: -8px;
}

.mystery .carousel-indicators {
  bottom: -4rem;
}

.mystery .carousel-indicators li {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  padding-left: 0;
  background-color: rgba(0, 0, 0, 0.25);
  margin: 0 0.5rem;
}

.mystery .carousel-indicators .active {
  background-color: #3f23ff;
}

/* .mystery .carousel-control-next-icon {
  position: absolute;
  bottom: -2rem;
  width: 1.5rem;
  height: 1.5rem;
}

.mystery .carousel-control-prev-icon {
  position: absolute;
  bottom: -2rem;
  width: 1.5rem;
  height: 1.5rem;
} */

.mystery .btn-c-primary {
  color: #fff;
  background-color: #2f5997;
  border-bottom: 5px solid #1c4377 !important;
}
.mystery .btn-c-primary:active {
  margin-top: 3px;
  color: #fff;
  background: #2f5997;
  border-bottom: 2px solid #1c4377 !important;
}

.mystery .arrow {
  position: relative;
  display: inline-block;
  padding: 0.8em 0.5em;
}

.mystery .arrow::before {
  content: '';
  width: 0.6em;
  height: 0.6em;
  border-top: solid 0.2em white;
  border-right: solid 0.2em white;
  position: absolute;
  left: 0.3em;
  top: 0.5em;
}

.mystery .arrow.arrow-top::before {
  transform: rotate(-45deg);
  top: 1em;
}

.mystery .arrow.arrow-bottom::before {
  transform: rotate(135deg);
}

.mystery .arrow.arrow-left::before {
  transform: rotate(-135deg);
}

.mystery .arrow.arrow-right::before {
  transform: rotate(45deg);
}

.mystery .sidebar {
  position: fixed;
  width: 72px;
  padding: 4px 4px 4px 4px;
  background: #5088c1ab;
  border-radius: 6px;
  z-index: 10;
}

.mystery .sidebar.shown {
  bottom: 16px;
  right: 0px;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.mystery .sidebar.hidden {
  bottom: 16px;
  right: -72px;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.mystery .sidebar .btn-c {
  border-radius: 4px;
  padding: 6px 6px;
}