@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap");
/*--------------------------------------------------------------
/template/
--------------------------------------------------------------*/
div#template {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  color: #000000;
  font-family: "Noto Sans JP", sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 共通
----------------------------------- */
img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

div {
  line-height: 1;
}

label {
  cursor: pointer;
}

h1, h2, h3, h4, p {
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
}

/* 特定商取引法 位置は適宜調節
-------------------------------------------------------------- */
#template .guide {
  margin: min(5.3333333333vw, 40px) auto min(4.2666666667vw, 32px);
  letter-spacing: normal;
  text-align: center;
  font-size: clamp(12px, 3.2vw, 14px);
  min-height: 0vw;
}
#template .guide p {
  margin-bottom: 1em;
}
#template .guide a, #template .guide a:visited, #template .guide a:active {
  color: #1d9bf0;
}
#template #footer img {
  margin: 0 auto;
}

/* mv
-------------------------------------------------------------- */
#template .mv {
  position: relative;
}

/* タロット
-------------------------------------------------------------- */
#template .tarot {
  background-color: #213B30;
  padding: min(9.6vw, 72px) min(5.3333333333vw, 40px) min(8.2666666667vw, 62px);
  margin-top: max(-3.2vw, -24px);
}
#template .tarot_ttl {
  width: min(64vw, 480px);
  margin: 0 auto;
}
#template .tarot_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: min(61.6vw, 462px);
  margin: min(7.4666666667vw, 56px) auto 0;
  gap: min(6.4vw, 48px);
}
#template .tarot_list li {
  width: min(16.2666666667vw, 122px);
}
#template .tarot_img {
  position: relative;
  z-index: 1;
  width: 100%;
  transition: all 1s;
}
#template .tarot_img::before {
  position: absolute;
  z-index: -1;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: min(1.0666666667vw, 8px);
  box-shadow: min(0.2666666667vw, 2px) min(0.2666666667vw, 2px) min(1.3333333333vw, 10px) rgba(1, 7, 5, 0.5);
  transition: all 1s;
}
#template .tarot_img.selected {
  transform: translateY(-10%);
}
#template .tarot_img.selected::before {
  box-shadow: min(0.2666666667vw, 2px) min(5.3333333333vw, 40px) min(4vw, 30px) rgba(7, 0, 0, 0.4);
}
#template .js-modalBtn {
  cursor: pointer;
}
#template .tarotModal {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  transition: opacity 0.5s, z-index 0.5s;
  opacity: 0;
}
#template .tarotModal_bg {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.6);
}
#template .tarotModal_inner {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: scroll;
}
#template .tarotModal_close {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: -5.3097345133%;
  right: 2.34375%;
  width: 5.78125%;
}
#template .tarotModal_img {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: fit-content;
  max-width: 85.3333333333%;
  margin: auto;
  height: fit-content;
  transform: scale(0.6);
  transition: transform 1s ease-in;
}
@media screen and (max-width: 750px) {
  #template .tarotModal_img {
    position: relative;
    margin: 13.3333333333vw auto;
  }
}
#template .tarotModal_img > img {
  max-height: 85vh;
  max-height: 85dvh;
  aspect-ratio: 640/1130;
  object-fit: contain;
  vertical-align: middle;
}
@media screen and (max-width: 750px) {
  #template .tarotModal_img > img {
    max-height: unset;
  }
}
#template .tarotModal_btn {
  position: absolute;
  z-index: 1;
  display: block;
  width: 75%;
  left: 0;
  right: 0;
  bottom: 7.610619469%;
  margin: auto;
}
#template .tarotModal_btn img {
  max-height: 5.6415929204vh;
  max-height: 5.6415929204dvh;
  aspect-ratio: 480/75;
  object-fit: contain;
  vertical-align: middle;
}
@media screen and (max-width: 750px) {
  #template .tarotModal_btn img {
    max-height: unset;
  }
}
#template .tarotModal.open {
  opacity: 1;
  z-index: 1000;
}
#template .tarotModal.open .tarotModal_img {
  transform: scale(1);
}

body.fixed {
  overflow: hidden;
}

/* rule
-------------------------------------------------------------- */
#template .js-accTitle {
  cursor: pointer;
}
#template .rule {
  position: relative;
  padding: min(8.5333333333vw, 64px) min(5.3333333333vw, 40px);
  margin: 0 auto;
  background-color: #FFF9E8;
}
#template .rule_title {
  position: relative;
  height: min(13.3333333333vw, 100px);
  display: flex;
  align-items: center;
  font-size: min(6.4vw, 48px);
  font-weight: 700;
  color: #fff;
  background-color: #007167;
  border-radius: min(1.6vw, 12px);
  padding-left: min(9.6vw, 72px);
}
#template .rule_title::after {
  content: "";
  background: url(../img/sp/icn_rule_open.png) no-repeat;
  background-size: contain;
  position: absolute;
  width: min(6.6666666667vw, 50px);
  height: min(6.6666666667vw, 50px);
  right: min(4vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s;
}
#template .rule_title.open::after {
  background: url(../img/sp/icn_rule_close.png) no-repeat;
  background-size: contain;
}
#template .rule_contents {
  display: none;
  padding: min(8.5333333333vw, 64px) 0 0;
}
#template .rule h3 {
  text-align: left;
  font-size: clamp(14px, 3.7333333333vw, 28px);
  color: #007167;
  padding-bottom: min(1.0666666667vw, 8px);
  border-bottom: min(0.5333333333vw, 4px) solid #007167;
}
#template .rule dl {
  text-align: left;
  font-size: clamp(12px, 3.2vw, 20px);
  line-height: 1.5;
}
#template .rule dl dt {
  font-weight: 700;
  margin: min(5.3333333333vw, 40px) 0 0;
  color: #007167;
}
#template .rule dl dd p, #template .rule dl dd ul {
  margin-top: min(2.1333333333vw, 16px);
}
#template .rule dl dd ul + p {
  margin-top: min(5.3333333333vw, 40px);
}
#template .rule dl dd ul + p em {
  display: inline-block;
  padding-left: 1em;
  text-indent: -1em;
}
#template .rule dl dd ul {
  padding-left: 1em;
  text-indent: -1em;
}
#template .rule dl dd ul li:nth-of-type(n+2) {
  margin-top: min(2.1333333333vw, 16px);
}
#template .rule dl dd dl dt {
  margin-top: min(2.1333333333vw, 16px);
  margin-left: min(-1.0666666667vw, -8px);
}
#template .rule dl dd dl dt:nth-of-type(n+2) {
  margin-top: min(5.3333333333vw, 40px);
}