.elementor-6118 .elementor-element.elementor-element-c5cab4a{--display:flex;}/* Start custom CSS for html, class: .elementor-element-1764f21 */html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif JP",
    serif;

  color: #f7e9ef;

  background:
    linear-gradient(
      180deg,
      rgba(18, 10, 20, 0.55),
      rgba(28, 12, 26, 0.62)
    ),
    url("https://tm-meguri.com/wp-content/uploads/2026/05/ChatGPT-Image-2026%E5%B9%B45%E6%9C%8819%E6%97%A5-13_34_31.png")
    center center / cover no-repeat fixed;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.hidden-sign{
  display:none;

  color:#ffd966;
  font-weight:700;
  font-size:1.1em;
}
.hidden-sign.show{
  display:inline-block;
  animation:burstReveal .6s ease forwards;
}













 /* =====================
    エレメント、クオリティ　書き換え分
  ===================== */
  


.astro-matrix-section{
  padding:90px 18px;
  color:#fff;
}

.astro-matrix-inner{
  max-width:920px;
  margin:0 auto;
  text-align:center;
}

/* =========================
   上部説明
========================= */

.astro-matrix-lead{

  margin:0 auto 30px;

  font-size:26px;
  line-height:1.9;

  color:#fff;

  text-shadow:
    0 0 14px rgba(255,255,255,0.18);
}

.astro-matrix-notice{

  margin:0 auto 24px;

  font-size:28px;
  line-height:1.5;
  font-weight:700;

  color:#a57b00;
}

/* =========================
   表全体
========================= */

.astro-matrix{

  display:grid;

  grid-template-columns:
  120px repeat(3,1fr);

  gap:8px;

  margin:0 auto 60px;
}

/* =========================
   共通ガラス
========================= */

.quality-head,
.element-head,
.zodiac-card{

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,0.35);

  box-shadow:
    inset 0 0 22px rgba(255,255,255,0.18),
    0 4px 16px rgba(255,255,255,0.08);

  border-radius:8px;

  box-sizing:border-box;
}

/* =========================
   上の3つ
========================= */

.quality-head{

  min-height:74px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:10px;

  color:#fff;

  font-size:22px;
  line-height:1.45;
  font-weight:700;
}

/* 活動宮 */

.quality-head.active{

  background:
  linear-gradient(
  135deg,
  rgba(255,120,140,0.38),
  rgba(255,210,170,0.26)
  );
}

/* 不動宮 */

.quality-head.fixed{

  background:
  linear-gradient(
  135deg,
  rgba(110,110,220,0.34),
  rgba(170,220,255,0.24)
  );
}

/* 柔軟宮 */

.quality-head.mutable{

  background:
  linear-gradient(
  135deg,
  rgba(90,220,220,0.34),
  rgba(170,255,180,0.24)
  );
}

/* =========================
   左エレメント
========================= */

.element-head{

  min-height:160px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:10px;

  color:#fff;

  font-size:24px;
  line-height:1.6;
  font-weight:700;
}

/* 火 */

.element-head.fire{

  background:
  linear-gradient(
  135deg,
  rgba(255,120,170,0.35),
  rgba(255,220,130,0.28)
  );
}

/* 地 */

.element-head.earth{

  background:
  linear-gradient(
  135deg,
  rgba(255,240,200,0.30),
  rgba(180,140,130,0.28)
  );
}

/* 風 */

.element-head.air{

  background:
  linear-gradient(
  135deg,
  rgba(110,220,255,0.32),
  rgba(140,255,190,0.28)
  );
}

/* 水 */

.element-head.water{

  background:
  linear-gradient(
  135deg,
  rgba(220,255,240,0.32),
  rgba(180,210,255,0.28)
  );
}

/* =========================
   12星座パネル
========================= */

.zodiac-card{

  min-height:160px;

  padding:18px 12px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  background:
  rgba(255,255,255,0.10);
}

/* 星座画像 */

.zodiac-card img{

  width:88px;
  height:88px;

  object-fit:contain;

  display:block;

  margin:0 auto 12px;
}

/* 星座名 */

.zodiac-card p{

  margin:0;

  font-size:21px;
  line-height:1.4;
  font-weight:700;

  color:#fff;
}

/* =========================
   下説明
========================= */

.astro-matrix-desc{

  max-width:760px;

  margin:0 auto;

  text-align:left;

  color:#fff;
}

.astro-matrix-desc h3{

  margin:0 0 14px;

  font-size:34px;
  line-height:1.5;
}

.astro-matrix-desc h3:not(:first-child){

  margin-top:42px;
}

.astro-matrix-desc p{

  margin:0;

  font-size:26px;
  line-height:1.8;
}

.astro-matrix-desc strong{

  font-weight:700;
}



/* =========================
   エレメントとクオリティの書き換え
========================= */



@media(max-width:768px){

/* =========================
   全体
========================= */

.astro-matrix-section{
  padding:60px 10px;
}

.astro-matrix-lead{

  font-size:16px;
  line-height:1.8;

  margin-bottom:20px;
}

.astro-matrix-notice{

  font-size:18px;
  line-height:1.6;

  margin-bottom:14px;
}

/* =========================
   表
========================= */

.astro-matrix{

  grid-template-columns:
  62px repeat(3,1fr);

  gap:4px;

  margin-bottom:40px;
}

/* =========================
   上3つ
========================= */

.quality-head{

  min-height:54px;

  padding:6px 2px;

  font-size:13px;
  line-height:1.35;
  
  
}

/* =========================
   左エレメント
========================= */

.element-head{

  min-height:94px;
  

  padding:6px 2px;

  font-size:14px;
  line-height:1.4;
}

/* =========================
   星座パネル
========================= */

.zodiac-card{

  min-height:94px;

  padding:8px 4px;
}

.zodiac-card img{

  width:48px;
  height:48px;

  margin-bottom:4px;
}

.zodiac-card p{

  font-size:13px;
}

/* =========================
   下説明
========================= */

.astro-matrix-desc{

  padding:0 10px;
}

.astro-matrix-desc h3{

  font-size:22px;
  line-height:1.5;
}

.astro-matrix-desc h3:not(:first-child){

  margin-top:26px;
}

.astro-matrix-desc p{

  font-size:16px;
  line-height:1.75;
}

}/* End custom CSS */
/* Start custom CSS *//* =========================
   テスト
========================= */
.basic-result-section{
  padding:80px 18px;
  color:#fff;
}

.basic-result-inner{
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

.basic-main-text,
.basic-text,
.basic-bottom-text{
  margin:0 0 34px;
  font-size:26px;
  line-height:1.9;
  color:#fff;
  font-weight:500;
}

.basic-main-text{
  font-size:28px;
}

.small-note{
  font-size:22px;
  color:#fff;
}

.blue-text{
  color:#2f6bff;
  font-weight:700;
}

.red-text{
  color:#ff5b5b;
  font-weight:700;
}

.green-text{
  color:#62d85b;
  font-weight:700;
}

.purple-text{
  color:#d46cff;
  font-weight:700;
}

.sign-label{
  display:inline-block;
  padding:6px 18px;
  border-radius:14px;
  font-weight:700;
}

.sign-label.pink{
  color:#ff3f86;
  background:rgba(210,255,245,0.75);
}

.sign-label.green{
  color:#d4942f;
  background:rgba(140,220,110,0.75);
}

.result-frame{
  width:360px;
  height:520px;
  margin:30px auto 54px;

  border:4px solid #fff;
  border-radius:22px;

  background:transparent;
  box-sizing:border-box;

  position:relative;
}

.result-frame::before{
  content:"";
  position:absolute;
  inset:14px;
  border:3px solid #fff;
  border-radius:16px;
  pointer-events:none;
}



/* =========================
   テスト　スマホ用
========================= */
@media(max-width:768px){

  .basic-result-section{
    padding:56px 14px;
  }

  .basic-main-text,
  .basic-text,
  .basic-bottom-text{
    font-size:17px;
    line-height:1.9;
    margin-bottom:26px;
  }

  .basic-main-text{
    font-size:18px;
  }

  .small-note{
    font-size:15px;
  }

  .sign-label{
    padding:4px 12px;
    border-radius:10px;
  }

  .result-frame{
    width:260px;
    height:380px;
    margin:24px auto 42px;
    border-width:3px;
  }

  .result-frame::before{
    inset:10px;
    border-width:2px;
  }

}
@media (max-width: 768px) {

  body {
    position: relative;
    background: #120a14 !important;
    overflow-x: hidden !important;
  }

  body::before {
    content: "";
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    z-index: 0;
    pointer-events: none;

    background:
      linear-gradient(
        180deg,
        rgba(18, 10, 20, 0.15),
        rgba(28, 12, 26, 0.22)
      ),
      url("https://tm-meguri.com/wp-content/uploads/2026/05/ChatGPT-Image-2026%E5%B9%B45%E6%9C%8821%E6%97%A5-11_17_48.png");

    background-size: auto 100vh;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .fortune-hero,
  .fortune-points,
  .fortune-menu,
  .fortune-style,
  .fortune-flow,
  .fortune-voice,
  .fortune-profile,
  .fortune-faq,
  .fortune-cta {
    position: relative;
    z-index: 1;
  }

}












.sign-label{
  display:inline-block;
  padding:6px 18px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;

  animation:pokoTap 1.4s ease-in-out infinite;
  transform-origin:center;
}

@keyframes pokoTap{
  0%{
    transform:scale(1);
  }
  25%{
    transform:scale(1.12) translateY(-3px);
  }
  45%{
    transform:scale(0.96) translateY(1px);
  }
  65%{
    transform:scale(1.08) translateY(-2px);
  }
  100%{
    transform:scale(1);
  }
}


.tap-reveal{
  display:inline-block;
  padding:8px 18px;
  border-radius:14px;

  background:rgba(255,255,255,0.2);
  color:#fff;
  font-weight:700;
  cursor:pointer;

  animation:poko 1.2s infinite;
}

@keyframes poko{
  0%,100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.12);
  }
}

/*.hidden-sign{*/
/*  display:inline-block;*/
/*  margin-left:10px;*/

/*  opacity:0;*/
/*  transform:scale(0);*/

/*  color:#ffd966;*/
/*  font-weight:700;*/
/*  font-size:1.1em;*/

/*  pointer-events:none;*/
/*}*/

.hidden-sign.show{
  animation:burstReveal .6s ease forwards;
}

@keyframes burstReveal{

  0%{
    opacity:0;
    transform:scale(0);
  }

  60%{
    opacity:1;
    transform:scale(1.4);
  }

  80%{
    transform:scale(0.9);
  }

  100%{
    opacity:1;
    transform:scale(1);
  }
}/* End custom CSS */