@charset 'utf-8';

/** メインビジュアル **/
div.main-visual {
  width: 100%;
  padding: 0;
  margin: 0 auto 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  filter: var(--main-visual-invert);
}

div.main-visual video {
  width: 100%;
  position: relative;
  opacity: 0;
  transition: all 1s ease-in-out;
}

div.main-visual div.circle-container {
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  transition: all 1s ease-in-out;
}

div.main-visual::before,
div.main-visual::after {
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 25%;
  z-index: 5;
}

div.main-visual::before {
  left: 0;
  background: linear-gradient(to right, var(--overlay-color) 50%, transparent 100%);
}

div.main-visual::after {
  right: 0;
  background: linear-gradient(to left, var(--overlay-color) 50%, transparent 100%)
}
div.main-visual div.fade-profile > div.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #c3c3c3;
  mix-blend-mode: overlay;
}

div.main-visual div.fade-scene {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation-timing-function: ease-in-out;
  animation-name: fadeScene;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  z-index: 6;
}
div.main-visual div.fade-scene > div.fade-text {
  display: none;
  width: 35%;
  position: absolute;
  color: #fff;
  font-family: 'Noto Serif JP';
  pointer-events: none;
  overflow: hidden;
  white-space: pre-wrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

div.main-visual div.fade-scene > div.fade-text.on span {
  opacity: 0;
  display: inline-block;
  padding: 2px 0 2px;
}

div.main-visual div.fade-scene > div.fade-text.on span {
  animation: fadeSlideIn 0.5s forwards;
}

div.main-visual div.fade-scene > div.fade-text div:nth-child(1) span,
div.main-visual div.fade-scene > div.fade-text div:nth-child(2) span {
  font-size: var(--main-visual-text-size);
}

div.main-visual div.fade-scene > div.fade-text div:nth-child(3) span,
div.main-visual div.fade-scene > div.fade-text div:nth-child(4) span {
  font-size: var(--main-visual-text-size);
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateX(10px);
    text-shadow: 0 0 0 transparent;
  }

  to {
    opacity: 1;
    transform: translateX(0);
    text-shadow: 0 0 8px #ffa, 0 0 12px #ffc;
  }
}


div.main-visual div.fade-scene > div.fade-profile {
  width: 50%;
  position: absolute;
  right: -5%;
  bottom: -1px;
  filter: var(--main-visual-invert);
}
div.main-visual div.fade-scene > div.fade-profile > img {
  width: 95%;
  filter: var(--fade-profile-filter);
}

@keyframes fadeScene {
    0% {opacity: 0.0;}
  100% {opacity: 1.0;}
}

/** サイト概要 **/
section#overview > h2 {
  display: block;
  width: 100%;
  padding: 0 1rem 0;
  font-size: var(--list-size);
  font-weight: normal;
  letter-spacing: 0;
  color: var(--sub-base-color);
  text-shadow: none;
  text-align: left;
  box-sizing: border-box;
}

section#overview > h2 > span.right,
section#overview > article span.right {
  float: right;
}

section#overview div.article-box > div {
  margin: 0;
}

.symbol-video {
  min-width: 355px;
  margin: 1rem auto 1rem;
  position: relative;
  overflow: hidden;
  /*aspect-ratio: 980/429;*/
  aspect-ratio: 720/227;
}

.symbol-video video {
  display: block;
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 2s ease;
  z-index: 5;
}

.symbol-video div#fade-eye-text {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 6;
  background-color: transparent;
  pointer-events: none;
}

.symbol-video div#fade-eye-text div {
  width: 100%;
  position: absolute;
  text-align: center;
}

.symbol-video div#fade-eye-text div:first-child {
  top: 4vw;
}

.symbol-video div#fade-eye-text div:last-child {
  bottom: 1.5vw;
}

.symbol-video div#fade-eye-text span {
  display: inline-block;
  padding: 0 0.7%;
  font-size: clamp(1.0rem, 4.2vw, 2.0rem);
  letter-spacing: 4px;
  color: transparent;
  animation: fadeTextSlideIn 0.5s forwards;
}

.symbol-video div#fade-eye-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 4;
  transition: opacity 2s ease;
}

.symbol-video div#fade-eye-image img {
  width: 100%;
}

@keyframes fadeTextSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
    text-shadow: 0 0 0 transparent;
    color: transparent;
  }

  to {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 8px #ffa, 0 0 12px #ffc;
    color: var(--font-color);
  }
}

/** お知らせ **/
section#news > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin: 0 auto 0;
}

/** 鑑定予約 **/
section#appointment {
  position: relative;
  margin: 0 0 0 0;
  padding: 0.5rem 0 0.5rem;
}

section#appointment > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
}

section#appointment > div div {
  width: 100%;
}

section#appointment > div div.price-box {
  padding: 0 0 1rem 0;
}

section#appointment > div div.flex-container:has(div.profile.harf) {
  justify-content: center;
}

section#appointment > div div.profile.harf {
  max-width: 50%;
}

section#appointment > div.top {
  background-image: url(/img/default/bg/appointment.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

div.profile-list {
  width: 100%;
  margin: 0 auto 0
}

div.profile-list > div.profile-flex {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
div.profile-list > div.profile-flex > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 80%;
  padding: 1rem 0 1rem;
  margin: 1rem auto 1rem auto;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
}


div.profile-list > div.profile-flex div.arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

div.profile-list > div.profile-flex div.arrow > svg > path {
  fill: #fff;
}
div.profile-list > div.profile-flex div.arrow:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

div.profile-list > div.profile-flex div.arrow.prev {
  left: 0;
  border-right: 1px solid var(--font-color);
  transform: translate(-100%, 0);
}

div.profile-list > div.profile-flex div.arrow.next {
  right: 0;
  border-left: 1px solid var(--font-color);
  transform: translate(100%, 0);
}

div.profile-list > div.profile-flex div.profile-box > div.image {
  margin: 0 0 0.5rem 0;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}
div.profile-list > div.profile-flex div.profile-box > div.image > a {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 176px;
  min-width: 141px;
  width: 100%;
  max-height: 176px;
  min-height: 141px;
  height: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

div.profile-list > div.profile-flex div.profile-box > div.image > a > img,
div.profile-list > div.profile-flex div.profile-box > div.image > a > svg {
  width: 141px;
  height: 141px;
  object-fit: cover;
  box-shadow: 0 0 10px 0 #000;
}

div.profile-list > div.profile-flex div.profile-box > div.image.hover-on > a > img:first-child,
div.profile-list > div.profile-flex div.profile-box > div.image.hover-on > a > svg:first-child,
div.profile-list > div.profile-flex div.profile-box > div.image.hover-on > a:hover > img:last-child,
div.profile-list > div.profile-flex div.profile-box > div.image.hover-on > a:hover > svg:last-child {
  display: block;
}

div.profile-list > div.profile-flex div.profile-box > div.image.hover-on > a > img:last-child,
div.profile-list > div.profile-flex div.profile-box > div.image.hover-on > a > svg:last-child,
div.profile-list > div.profile-flex div.profile-box > div.image.hover-on > a:hover > img:first-child,
div.profile-list > div.profile-flex div.profile-box > div.image.hover-on > a:hover > svg:first-child {
  display: none;
}

div.profile-list > div.profile-flex div.profile-box > div.name > a {
  font-size: clamp(1.5rem, 2vw, 1.8rem);
  font-weight: 700;
}

div.profile-list > div.profile-flex div.profile-box > div.text {
  width: 95%;
  max-width: 420px;
  margin: 1rem auto 1rem;
  min-height: 270px;
  word-wrap: break-word;
  font-size: var(--list-size);
  text-align: left;
  flex: 1;
}

div.profile-list > div.profile-flex div.profile-box > div.text p {
  text-indent: var(--text-indent);
}

div.profile-list > div.profile-flex {
  overflow: hidden;
}

div.profile-list > div.profile-flex > div {
  flex-direction: row;
}

div.profile-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  transform: translateX(300%);
}

div.profile-box.current {
  position: relative;
  transform: translateX(0);
}

section#appointment div.reserve {
  width: 90%;
  margin: 0 auto 0;
}

section#price {
  position: relative;
}

div.price-box {
  position: relative;
}

div.price-box > div {
  overflow-x: hidden;
  z-index: 5;
}

div.price-box > div > h3 {
  text-align: left;
  border-bottom: 1px solid rgba(255, 215, 0, 0.9);
}

div.price-box div.flex-container {
  justify-content: flex-start;
}

div.price-box div.flex-container.jc-center {
  justify-content: center;
}

div#circle-origin {
  display: none;
}

div.circle-place {
  width: 100%;
  position: absolute;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-image: url(/img/default/appointment/circle.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.3;
  animation: spin 14s linear infinite;
}

div.circle-place.reverse {
  animation: spinReverse 14s linear infinite;
}

div.circle-place.circle001 {
  max-width: 420px;
  top: 14%;
  left: -15%;
  z-index: 4;
}

div.circle-place.circle002 {
  max-width: 200px;
  top: 30%;
  left: 0%;
  z-index: 4;
}

div.circle-place.circle003 {
  max-width: 640px;
  top: 55%;
  left: 100%;
  z-index: 4;
}

div.circle-place.circle004 {
  max-width: 240px;
  top: 31%;
  left: 100%;
  z-index: 4;
}

div.circle-place.circle005 {
  max-width: 320px;
  top: 18%;
  left: 90%;
  z-index: 4;
}

div.circle-place.circle006 {
  max-width: 440px;
  bottom: -15%;
  left: 5%;
  z-index: 4;
}

div.circle-place.circle007  {
  max-width: 440px;
  top: 10%;
  left: 5%;
  z-index: 4;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spinReverse {
  0% { transform: translate(-50%, -50%) rotate(360deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/** 陰陽道・陰陽師とは **/
section#onmyodo > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 1rem 0;
  text-align: center;
}

section#onmyodo > div > h3 {
  margin: 0 0 1rem 0;
  text-align: center;
  font-size: var(--h3-size);
}

section#onmyodo > div > div.text {
  width: 100%;
  margin: 0 auto 0;
  padding: 1rem;
  box-sizing: border-box;
  color: var(--font-color);
  font-size: var(--list-size);
}

section#onmyodo > div > div.text > div {
  margin: 0 0 1rem 0;
}

section h3 {
  margin: 0 0 1rem 0;
  color: rgba(255, 215, 0, 0.9);
  font-size: var(--h3-size);
}
section h4 {
  color: rgba(255, 215, 0, 0.8);
  font-size: var(--h4-size);
}

section#onmyodo > div h4 {
  font-size: var(--h4-size);
}
section#onmyodo > div h5 {
  font-size: var(--h5-size);
}

section#onmyodo div.image-list {
  margin-top: 5px;
}

/** 鑑定・占術 **/
section#fortune-telling > div {
  padding: 1rem;
}

section#fortune-telling p {
  font-size: var(--list-size);
}

section#fortune-telling h3 {
  font-size: var(--inner-title-large-size);
}
section#fortune-telling div.article-body > div {
  margin: 0 0 2vh 0;
}
section#fortune-telling div.article-body ul li {
  display: flex;
  gap: 1%;
  align-items: flex-start;
  justify-content: left;
}

/** 図面鑑定の3Dスライダー **/
.slider3d {
  position: relative;
  max-width: 980px;
  width: 100%;
  min-height: 300px;
  height: auto;
  margin: 0 auto 0;
  overflow: hidden;
  perspective: 1000px;
}
.slider3d .photo {
  position: absolute;
  left: 50%;
  top: 50%;
  border:#fff 2px solid;
  animation: rotateImage 20s infinite;
}
.slider3d .photo > img {
  width: 100%;
  max-width: 200px;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.slider3d .photo:nth-child(1) {animation-delay: -16s;}
.slider3d .photo:nth-child(2) {animation-delay: -12s;}
.slider3d .photo:nth-child(3) {animation-delay:  -8s;}
.slider3d .photo:nth-child(4) {animation-delay:  -4s;}
.slider3d .photo:nth-child(5) {animation-delay:   0s;}

@keyframes rotateImage {
    0% {transform: translate(-50%, -50%) rotateY(0deg)   translateZ(250px); z-index: 4;}
   10% {transform: translate(-50%, -50%) rotateY(72deg)  translateZ(250px); z-index: 3;}
   20% {transform: translate(-50%, -50%) rotateY(72deg)  translateZ(250px); z-index: 3;}
   30% {transform: translate(-50%, -50%) rotateY(144deg) translateZ(250px); z-index: 2;}
   40% {transform: translate(-50%, -50%) rotateY(144deg) translateZ(250px); z-index: 2;}
   50% {transform: translate(-50%, -50%) rotateY(216deg) translateZ(250px); z-index: 1;}
   60% {transform: translate(-50%, -50%) rotateY(216deg) translateZ(250px); z-index: 1;}
   70% {transform: translate(-50%, -50%) rotateY(288deg) translateZ(250px); z-index: 3;}
   80% {transform: translate(-50%, -50%) rotateY(288deg) translateZ(250px); z-index: 3;}
   90% {transform: translate(-50%, -50%) rotateY(360deg) translateZ(250px); z-index: 4;}
  100% {transform: translate(-50%, -50%) rotateY(360deg) translateZ(250px); z-index: 4;}
}

div.article-body div.text-list {
  display: flex;
  flex-direction: row;
}

div.article-body div.text-list > p {
  display: flex;
  flex-direction: column;
}

div.fortune > div {
  margin: 0 0 2vw 0;
}
div.fortune > div ul li::before {
  content: '';
  display: inline-block;
  width: var(--text-size);
  height: var(--text-size);
  margin: 0.5% 0 0 0;
  background-image: url(/img/common/icon/star.svg);
  background-position: center;
  background-size: cover;
  aspect-ratio: 1/1;
}

/** 募集中の情報とは **/
section#course ul.list.banner li div.center {
  font-size: var(--h4-size);
  margin: 0 0 2rem 0;
}

/** メディア・書籍紹介 **/
section#media > div {
  padding: 1rem;
}

section#media ul.list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(107px, calc(25% - 5%)));
  justify-content: center;
  align-items: stretch;
  gap: 5%;
}

section#media ul.list > li {
  min-width: 107px;
  width: 100%;
  margin: 0 0 5% 0;
  border: 1px solid var(--sub-base-color);
}

section#media ul.list > li > a {
  height: 100%;
}
section#media ul.list > li > a > img {
  width: 100%;
  height: 100%;
}

/** お問い合わせ **/
section#contact > div {
  padding: 0 1rem 0;
  margin: 0 0 1rem;
}

section#contact > div img {
  max-width: 390px;
  width: 100%;
  margin: 0;
}

section#contact > div p {
  font-size: var(--list-size);
  margin-bottom: 1rem;
}

section#contact a {
  text-decoration: underline;
}

section#contact div.image-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 0.5rem 0;
}

section#contact div.image-list > div {
  width: 100%;
  max-width: calc(390px - 4rem);
}