@charset "UTF-8";
/*light*/
/*Medium*/
/*Bold*/
/*Heavy*/
@font-face {
  font-family: "noto-sans-cjk-jp"; /* 任意のフォント名 */
  src: url("../../../font/NotoSansCJKjp-VF.otf") format("truetype"); /* フォントファイルのパス */
}
@font-face {
  font-family: "noto-serif-cjk-jp"; /* 任意のフォント名 */
  src: url("../../../font/NotoSerifCJKJP-VF.otf") format("truetype"); /* フォントファイルのパス */
}
.l-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #000;
  justify-items: center;
  color: #FFFFFF;
}
@media screen and (min-width: 601px) {
  .l-wrapper {
    grid-template-columns: 1fr 37.5rem 1fr;
  }
}

.l-footer {
  grid-row: 3/4;
}
@media screen and (min-width: 601px) {
  .l-footer {
    grid-column: 2/3;
  }
}

.l-header {
  grid-row: 1/2;
}
@media screen and (min-width: 601px) {
  .l-header {
    grid-column: 1/4;
  }
}

html {
  line-height: 0;
}

.l-main {
  grid-row: 2/3;
}
@media screen and (min-width: 601px) {
  .l-main {
    grid-column: 2/3;
    width: 37.5rem;
  }
}

.c-title__img--upper, .c-title__img--lower {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 27%, black 73%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 27%, black 73%, transparent 100%);
}
@media screen and (min-width: 601px) {
  .c-title__img--upper, .c-title__img--lower {
    width: 77%;
    display: block;
    margin: 0 auto;
  }
}
.c-title__img--line1 {
  display: block;
  margin: 0 auto 0.8vw auto;
  width: 86.7%;
}
@media screen and (min-width: 601px) {
  .c-title__img--line1 {
    margin: 0 auto 0.3rem auto;
    width: 66.7%;
  }
}
.c-title__img--line2 {
  display: block;
  margin: 0.8vw auto 0 auto;
  width: 86.7%;
}
@media screen and (min-width: 601px) {
  .c-title__img--line2 {
    margin: 0.3rem auto 0 auto;
    width: 66.7%;
  }
}
.c-title__text {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6vw;
  line-height: 10.48vw;
  font-weight: 700;
  color: #eec97b;
  margin: 0 auto;
  text-align: center;
}
@media screen and (min-width: 601px) {
  .c-title__text {
    font-size: 2.25rem;
    line-height: 3.93rem;
  }
}
.c-title__text--small {
  font-family: "Noto Serif JP", serif;
  font-size: 3.33vw;
  font-weight: 700;
  line-height: 5.33vw;
  color: #0e213d;
}
@media screen and (min-width: 601px) {
  .c-title__text--small {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}
.c-title__text--medium {
  font-family: "Noto Serif JP", serif;
  font-size: 4.33vw;
  font-weight: 700;
  line-height: 7.58vw;
  color: #eec97b;
  display: block;
  margin: 0 auto;
  text-align: center;
}
@media screen and (min-width: 601px) {
  .c-title__text--medium {
    font-size: 1.219rem;
    line-height: 2.13rem;
  }
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  margin: 5.33vw auto 14.5vw auto;
  overflow: hidden;
}
.c-table__row {
  border: 1px solid #eec97b;
  height: 8.33vw;
}
.c-table__row:last-child {
  border-bottom: none;
}
.c-table__header {
  border: 1px solid #eec97b;
  color: #FFFFFF;
  font-family: source-han-serif-jp-variable, sans-serif;
  font-variation-settings: "wght" 700;
  font-size: 3.67vw;
  padding: 0 4vw;
  text-align: right;
  width: 37%;
  vertical-align: top;
}
.c-table__header:empty {
  background: transparent;
}
.c-table__background--gold {
  background: #c0935e;
}
.c-table__data {
  border: 1px solid #eec97b;
  color: #FFFFFF;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 3.5vw;
  padding: 0 4vw;
  text-align: left;
  width: 63%;
  vertical-align: middle;
}

.c-image__fv {
  width: 100vw;
  margin: 0 auto;
}
.c-image__fv > img {
  width: 100%;
}
@media screen and (min-width: 601px) {
  .c-image__fv {
    display: none;
  }
}
.c-image__fv--pc {
  display: none;
}
@media screen and (min-width: 601px) {
  .c-image__fv--pc {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .c-image__fv--pc > img {
    width: 37.5rem;
  }
}

.c-button__text {
  width: 100%;
  font-family: "source-han-serif-jp-variable", Noto Serif JP, serif;
  color: #FFFFFF;
  position: absolute;
  top: 3vw;
  text-align: center;
  font-weight: 700;
  font-size: 3vw;
  font-family: "source-han-serif-jp-variable", Noto Serif JP, serif;
  line-height: 3.29vw;
}
@media screen and (min-width: 601px) {
  .c-button__text {
    top: 1.125rem;
    font-size: 1.125rem;
    line-height: 1.23rem;
  }
}
.c-button__link:hover {
  cursor: pointer;
}

.c-text__main {
  color: #ffe8b8;
  font-size: 3.99vw;
  font-family: "noto-sans-cjk-jp", Noto Sans JP, sans-serif;
  font-weight: 100;
  line-height: 6.4vw;
  text-align: center;
  display: block;
  padding-top: 9.33vw;
  margin-bottom: 6.66vw;
}
@media screen and (min-width: 601px) {
  .c-text__main {
    font-size: 1.125rem;
    line-height: 1.875rem;
    padding-top: 3.125rem;
    margin-bottom: 2.5rem;
  }
}
.c-text__sub {
  color: #ffe8b8;
  font-size: 3.67vw;
  font-family: "source-han-serif-jp-variable", Noto Serif JP, serif;
  line-height: 6.4vw;
  letter-spacing: 0.266vw;
  display: block;
  text-align: center;
  margin-bottom: 10.83vw;
}
@media screen and (min-width: 601px) {
  .c-text__sub {
    font-size: 1.25rem;
    line-height: 2.06rem;
    letter-spacing: 0.1rem;
    margin-bottom: 3.75rem;
  }
}
.c-text__center {
  display: block;
  color: #FFFFFF;
  font-family: "noto-sans-cjk-jp", Noto Sans JP, sans-serif;
  font-weight: 100;
  font-size: 3.99vw;
  line-height: 6.4vw;
  height: auto;
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
}
@media screen and (min-width: 601px) {
  .c-text__center {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.c-footer__text {
  display: block;
  color: #fff;
  line-height: 2.5vw;
  font-size: 2.33vw;
  font-family: "noto-sans-cjk-jp", Noto Sans JP, sans-serif;
  font-weight: 100;
  margin-top: 3.5vw;
  margin-bottom: 3.83vw;
}
@media screen and (min-width: 601px) {
  .c-footer__text {
    line-height: 0.94rem;
    font-size: 1rem;
    margin-top: 2.31rem;
    margin-bottom: 1.5rem;
  }
}

.c-background__main {
  background-image: url("../picture/svg/circle.svg"), url("../picture/svg/backgroundbottom.svg"), url("../picture/svg/backgroundtop.svg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center 287.3vw, center 230vw, center top;
  background-size: 96.33vw, contain, contain;
  width: 100vw;
}
@media screen and (min-width: 601px) {
  .c-background__main {
    width: 100%;
    background-position: center 93.5rem, center 70rem, center top;
    background-size: 96.5%, contain, contain;
  }
}
.c-background__left {
  display: none;
}
@media screen and (min-width: 601px) {
  .c-background__left {
    display: block;
    background-color: #0e213d;
    grid-column: 1/2;
    grid-row: 2/3;
    height: auto;
  }
}
.c-background__right {
  display: none;
}
@media screen and (min-width: 601px) {
  .c-background__right {
    display: block;
    background-color: #0e213d;
    grid-column: 3/4;
    grid-row: 2/3;
    height: auto;
  }
}

.p-title__image {
  width: 100%;
}

.p-section__how {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-section__how > h2 {
  width: 100vw;
}
@media screen and (min-width: 601px) {
  .p-section__how > h2 {
    width: 100%;
  }
}
.p-section__child {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.p-table {
  line-height: 8.33vw;
  max-width: 86.7vw;
  background-color: #000;
  margin: 0 auto;
}

.p-text__main {
  color: #ffe8b8;
  font-size: 3.33vw;
  font-family: "noto-sans-cjk-jp", Noto Sans JP, sans-serif;
  font-weight: 100;
  line-height: 5.83vw;
  text-align: center;
  display: block;
  margin-top: 9.33vw;
  margin-bottom: 6.66vw;
}
.p-text__sub {
  color: #ffe8b8;
  font-size: 3.67vw;
  font-family: "source-han-serif-jp-variable", Noto Serif JP, serif;
  line-height: 6.4vw;
  letter-spacing: 0.266vw;
  display: block;
  text-align: center;
  margin-bottom: 10.83vw;
}

.p-button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-button__img--flame {
  position: relative;
  opacity: 1;
  transition: opacity 0.3s ease; /* スムーズな切り替えのためのトランジション */
}
.p-button__img--op {
  position: absolute;
  width: auto;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease; /* スムーズな切り替えのためのトランジション */
}
.p-button__registor {
  position: relative;
  display: block;
  width: 50vw;
  height: 10vw;
}
@media screen and (min-width: 601px) {
  .p-button__registor {
    width: 18.75rem;
    height: 3.75rem;
  }
}
.p-button__registor:hover {
  cursor: pointer; /* .p-button__registor にホバー時 */
}
.p-button__registor:hover .p-button__img--flame {
  opacity: 0; /* ホバーで元の画像を隠す */
}
.p-button__registor:hover .p-button__img--op {
  opacity: 1; /* ホバーで別の画像を表示 */
}
.p-button__login {
  position: relative;
  display: block;
  width: 50vw;
  height: 10vw;
}
@media screen and (min-width: 601px) {
  .p-button__login {
    width: 18.75rem;
    height: 3.75rem;
  }
}
.p-button__login:hover {
  cursor: pointer; /* .p-button__login にホバー時 */
}
.p-button__login:hover .p-button__img--flame {
  opacity: 0; /* ホバーで元の画像を隠す */
}
.p-button__login:hover .p-button__img--op {
  opacity: 1; /* ホバーで別の画像を表示 */
}
.p-button > li {
  list-style: none;
}

.p-view__default {
  position: relative;
}
.p-view__hidden {
  display: none;
}
.p-view__button::before {
  content: "...もっと見る";
  font-family: "noto-sans-cjk-jp", Noto Sans JP, sans-serif;
  font-weight: 100;
  position: absolute;
  bottom: -8.35vw;
  right: 2vw;
  font-size: 3.93vw;
  line-height: 5.33vw;
}
@media screen and (min-width: 601px) {
  .p-view__button::before {
    bottom: -2.75rem;
    right: 2.43rem;
    font-size: 1rem;
    line-height: 2rem;
  }
}
.p-view__button:hover::before {
  -webkit-text-decoration: underline solid #FFFFFF;
          text-decoration: underline solid #FFFFFF;
  text-decoration-thickness: 0.16vw;
}

input[type=checkbox]#progress,
input[type=checkbox]#natal,
input[type=checkbox]#errectional,
input[type=checkbox]#synastry {
  display: none;
}

input[type=checkbox]#progress:checked ~ .p-view__hidden,
input[type=checkbox]#synastry:checked ~ .p-view__hidden,
input[type=checkbox]#errectional:checked ~ .p-view__hidden,
input[type=checkbox]#natal:checked ~ .p-view__hidden {
  display: block;
}

input[type=checkbox]#progress:checked ~ .p-view__button::before,
input[type=checkbox]#synastry:checked ~ .p-view__button::before,
input[type=checkbox]#errectional:checked ~ .p-view__button::before,
input[type=checkbox]#natal:checked ~ .p-view__button::before {
  content: "閉じる";
  position: absolute;
  bottom: -9.33vw;
  right: 3vw;
}
@media screen and (min-width: 601px) {
  input[type=checkbox]#progress:checked ~ .p-view__button::before,
input[type=checkbox]#synastry:checked ~ .p-view__button::before,
input[type=checkbox]#errectional:checked ~ .p-view__button::before,
input[type=checkbox]#natal:checked ~ .p-view__button::before {
    bottom: -2.75rem;
    right: 2.43rem;
    font-size: 1rem;
    line-height: 2rem;
  }
}

input[type=checkbox]#progress:checked ~ .c-text__center,
input[type=checkbox]#synastry:checked ~ .c-text__center,
input[type=checkbox]#errectional:checked ~ .c-text__center,
input[type=checkbox]#natal:checked ~ .c-text__center {
  mask-image: none;
  -webkit-mask-image: none;
}

.u-padding__title-small {
  padding: 0 3.13vw;
}
.u-padding__title--xsmall {
  padding: 0 0.87rem;
}
.u-padding__text--left {
  padding-left: 2.33vw;
}
@media screen and (min-width: 601px) {
  .u-padding__text--left {
    padding-left: 1.81rem;
  }
}

.u-width__wide {
  width: 88.4vw;
}
@media screen and (min-width: 601px) {
  .u-width__wide {
    width: 33.125rem;
  }
}
.u-width__medium {
  width: 86.67vw;
}
@media screen and (min-width: 601px) {
  .u-width__medium {
    width: 32.5rem;
  }
}

.u-text__align--center {
  text-align: center;
}

.u-center__flex--column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.u-center__flex {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.u-margin__top--medium {
  margin-top: 8.33vw;
}
@media screen and (min-width: 601px) {
  .u-margin__top--medium {
    margin-top: 4.18rem;
  }
}
.u-margin__top--wide {
  margin-top: 17.02vw;
}
@media screen and (min-width: 601px) {
  .u-margin__top--wide {
    margin-top: 5.93rem;
  }
}
.u-margin__bottom {
  margin-bottom: 27.5vw;
}
@media screen and (min-width: 601px) {
  .u-margin__bottom {
    margin-bottom: 10.31rem;
  }
}
.u-margin__bottom--wide {
  margin-bottom: 32.5vw;
}
@media screen and (min-width: 601px) {
  .u-margin__bottom--wide {
    margin-bottom: 12.18rem;
  }
}
.u-margin__bottom--short {
  margin-bottom: 21vw;
}
@media screen and (min-width: 601px) {
  .u-margin__bottom--short {
    margin-bottom: 7.9rem;
  }
}
.u-margin__bottom--xsmall {
  margin-bottom: 1.28vw;
}
@media screen and (min-width: 601px) {
  .u-margin__bottom--xsmall {
    margin-bottom: 1.25rem;
  }
}

.u-br {
  display: block;
}
@media screen and (min-width: 601px) {
  .u-br {
    display: none;
  }
}
.u-br__pc {
  display: none;
}
@media screen and (min-width: 601px) {
  .u-br__pc {
    display: block;
  }
}
/*# sourceMappingURL=style.css.map */