@charset "UTF-8";

/* =========================================================
   花妖精診断 Ver1.1
   FINAL VISUAL CSS
========================================================= */

#taishitsu-diagnosis {
  --gold: #cba45d;
  --gold-soft: #dfc99c;

  --blue: #7f9fb8;
  --blue-bg: #f1f7fb;
  --blue-border: #d6e6f1;

  --green: #7f9e7d;
  --green-bg: #f3f8f0;
  --green-border: #d9e6d3;

  --salmon: #c77f8d;
  --salmon-bg: #fdf3f5;
  --salmon-border: #efd8dd;

  --text: #5f5a5b;
  --heading: #7894aa;
  --cream: #fffdfa;
  --line: #eadfc9;

  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 18px 100px;
  box-sizing: border-box;

  color: var(--text);

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    "Noto Sans JP",
    sans-serif;

  line-height: 1.85;

  overflow: visible;
}


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


/* =========================================================
   SCREEN
========================================================= */

#taishitsu-diagnosis .diagnosis-screen {
  display: none;
  width: 100%;
}


#taishitsu-diagnosis .diagnosis-screen.is-active {
  display: block;
}


/* =========================================================
   START
========================================================= */

#taishitsu-diagnosis .start-inner {
  padding: 70px 18px 60px;
  text-align: center;
}


#taishitsu-diagnosis .start-label {
  margin: 0 0 14px;

  color: var(--gold);

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}


#taishitsu-diagnosis .start-title {
  margin: 0 0 28px;

  color: var(--heading);

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

  font-size: clamp(28px, 7vw, 40px);
  font-weight: 400;

  line-height: 1.55;
}


#taishitsu-diagnosis .start-text,
#taishitsu-diagnosis .start-note {
  margin: 0;

  font-size: 15px;
  line-height: 2;
}


#taishitsu-diagnosis .start-note {
  margin-top: 8px;
}


#taishitsu-diagnosis .diagnosis-btn {
  display: flex;

  width: 100%;

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

  text-decoration: none;

  border: 0;

  cursor: pointer;

  font-family: inherit;
}


#taishitsu-diagnosis .diagnosis-btn-main {
  min-height: 62px;
  margin-top: 38px;

  border-radius: 999px;

  background: #c77f8d;
  color: #fff;

  font-size: 17px;
  font-weight: 700;

  box-shadow:
    0 8px 20px rgba(172, 105, 119, 0.12);
}


/* =========================================================
   QUESTIONS
========================================================= */

#taishitsu-diagnosis .question-inner {
  padding: 48px 8px 60px;
}


#taishitsu-diagnosis .progress-area {
  margin-bottom: 42px;
}


#taishitsu-diagnosis .progress-info {
  display: flex;

  justify-content: space-between;
  align-items: center;

  margin-bottom: 10px;

  color: #8a8584;

  font-size: 12px;
}


#taishitsu-diagnosis .progress-track {
  width: 100%;
  height: 4px;

  border-radius: 999px;

  background: #f0ece6;

  overflow: hidden;
}


#taishitsu-diagnosis .progress-bar {
  width: 8.333%;
  height: 100%;

  border-radius: inherit;

  background: var(--gold);

  transition: width 0.3s ease;
}


#taishitsu-diagnosis .question-page {
  display: none;
}


#taishitsu-diagnosis .question-page.is-current {
  display: block;
}


#taishitsu-diagnosis .question-number {
  margin: 0 0 10px;

  color: var(--gold);

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;

  text-align: center;
}


#taishitsu-diagnosis .question-text {
  margin: 0 0 30px;

  color: #686264;

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

  font-size: clamp(23px, 5.6vw, 31px);
  font-weight: 400;

  line-height: 1.55;

  text-align: center;
}


#taishitsu-diagnosis .answer-list {
  display: grid;
  gap: 13px;
}


#taishitsu-diagnosis .answer-btn {
  width: 100%;
  min-height: 62px;

  padding: 15px 20px;

  border: 1px solid #eadfce;
  border-radius: 18px;

  background: #fffdfa;

  color: #625d5f;

  font-family: inherit;
  font-size: 15px;

  line-height: 1.65;

  text-align: left;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}


#taishitsu-diagnosis .answer-btn:active {
  transform: scale(0.985);

  background: #fff8f5;

  border-color: #d5ae89;
}


#taishitsu-diagnosis .question-navigation {
  margin-top: 28px;

  text-align: center;
}


#taishitsu-diagnosis .diagnosis-btn-back {
  padding: 10px 15px;

  border: 0;

  background: transparent;

  color: #858081;

  font-size: 13px;

  cursor: pointer;
}


/* =========================================================
   LOADING
========================================================= */

#taishitsu-diagnosis .loading-inner {
  min-height: 520px;

  display: flex;
  flex-direction: column;

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

  text-align: center;
}


#taishitsu-diagnosis .loading-flower {
  margin-bottom: 18px;

  color: var(--gold);

  font-size: 38px;

  animation:
    fairyLoading 1.7s ease-in-out infinite;
}


#taishitsu-diagnosis .loading-title {
  margin: 0;

  color: var(--heading);

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

  font-size: 24px;

  line-height: 1.7;
}


#taishitsu-diagnosis .loading-dots {
  display: flex;
  gap: 7px;

  margin-top: 20px;
}


#taishitsu-diagnosis .loading-dots span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--gold);

  animation:
    fairyDot 1.2s ease-in-out infinite;
}


#taishitsu-diagnosis .loading-dots span:nth-child(2) {
  animation-delay: 0.15s;
}


#taishitsu-diagnosis .loading-dots span:nth-child(3) {
  animation-delay: 0.3s;
}


/* =========================================================
   RESULT BASE
========================================================= */

#taishitsu-diagnosis .result-inner {
  width: 100%;

  padding-top: 54px;
}


#taishitsu-diagnosis .result-header {
  position: relative;
  z-index: 20;

  margin: 0 0 18px;

  text-align: center;
}


#taishitsu-diagnosis .result-top-label {
  margin: 0 0 12px;

  color: var(--gold);

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 0.13em;
}


#taishitsu-diagnosis .result-label {
  margin: 0;

  color: #615b5d;

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

  font-size: clamp(24px, 6.4vw, 33px);
  font-weight: 400;

  line-height: 1.45;
}


/* =========================================================
   TAROT CARD
========================================================= */

#taishitsu-diagnosis .fairy-reveal {
  position: relative;

  width: min(76vw, 315px);

  margin:
    0 auto
    30px;
}


/* 本体 */

#taishitsu-diagnosis .fairy-card {
  position: relative;

  width: 100%;
  aspect-ratio: 2 / 3;

  perspective: 1500px;

  overflow: visible;
}


#taishitsu-diagnosis .fairy-card-inner {
  position: relative;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;

  transition:
    transform 1.15s cubic-bezier(
      0.22,
      0.61,
      0.36,
      1
    );
}


#taishitsu-diagnosis
.fairy-card.is-flipped
.fairy-card-inner {
  transform: rotateY(180deg);
}


/* 共通面 */

#taishitsu-diagnosis .fairy-card-face {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  border-radius: 18px;

  overflow: hidden;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transform-style: preserve-3d;
}


/* =========================================================
   CARD BACK
   ★確定した画像をそのまま使用
========================================================= */

#taishitsu-diagnosis .fairy-card-back {
  z-index: 2;

  background:
    url("/common/upload_data/yosapark-puaanelacom/image/20260904184537.png")
    center
    center /
    100% 100%
    no-repeat;

  box-shadow:
    0 16px 34px rgba(132, 98, 58, 0.13);
}


/*
   旧CSS装飾は完全に非表示
*/

#taishitsu-diagnosis .tarot-back {
  position: absolute;
  inset: 0;
}


#taishitsu-diagnosis .tarot-floral-ring,
#taishitsu-diagnosis .tarot-back-moon,
#taishitsu-diagnosis .tarot-back-star {
  display: none !important;
}


/* =========================================================
   CARD FRONT
========================================================= */

#taishitsu-diagnosis .fairy-card-front {
  z-index: 1;

  transform: rotateY(180deg);

  background: #fff;

  box-shadow:
    0 16px 34px rgba(132, 98, 58, 0.14);
}


#taishitsu-diagnosis .fairy-card-front-inner {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: inherit;

  background: #fff;
}


/* 妖精画像 */

#taishitsu-diagnosis #fairy-image {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  border-radius: inherit;
}


/* =========================================================
   FRONT DECORATION
   ★確定した透過PNGを重ねる
========================================================= */

#taishitsu-diagnosis .tarot-front-frame {
  position: absolute;

  inset: 0;

  z-index: 5;

  width: 100%;
  height: 100%;

  pointer-events: none;

  background:
    url("/common/upload_data/yosapark-puaanelacom/image/20260904184536.png")
    center
    center /
    100% 100%
    no-repeat;
}


/*
   CSSで作っていた旧装飾は廃止
*/

#taishitsu-diagnosis .tarot-front-star,
#taishitsu-diagnosis .tarot-corner {
  display: none !important;
}


/* =========================================================
   FLIP MAGIC
========================================================= */

#taishitsu-diagnosis .fairy-card.is-preparing {
  animation:
    fairyPrepare 0.75s ease-in-out both;
}


#taishitsu-diagnosis .fairy-card.is-flipping {
  animation:
    fairyMagicGlow 1.25s ease-in-out both;
}


/* キラキラ全体 */

#taishitsu-diagnosis .fairy-sparkles {
  position: absolute;

  inset: -55px;

  z-index: 30;

  pointer-events: none;

  opacity: 0;
}


/* 中央の光 */

#taishitsu-diagnosis .fairy-sparkles::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 50px;
  height: 50px;

  border-radius: 50%;

  transform:
    translate(-50%, -50%)
    scale(0.25);

  opacity: 0;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,1) 0%,
      rgba(255,240,195,0.88) 22%,
      rgba(239,197,109,0.52) 48%,
      rgba(255,255,255,0) 75%
    );
}


#taishitsu-diagnosis
.fairy-sparkles.is-active {
  opacity: 1;
}


#taishitsu-diagnosis
.fairy-sparkles.is-active::before {
  animation:
    fairyCenterLight 1.45s ease-out forwards;
}


/* 10 sparkles */

#taishitsu-diagnosis .sparkle {
  position: absolute;

  width: 10px;
  height: 10px;

  opacity: 0;

  transform: translate(-50%, -50%);

  filter:
    drop-shadow(
      0 0 5px
      rgba(224, 179, 83, 0.7)
    );
}


#taishitsu-diagnosis .sparkle::before,
#taishitsu-diagnosis .sparkle::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  background: #d7ad5d;

  border-radius: 999px;

  transform: translate(-50%, -50%);
}


#taishitsu-diagnosis .sparkle::before {
  width: 2px;
  height: 12px;
}


#taishitsu-diagnosis .sparkle::after {
  width: 12px;
  height: 2px;
}


/* 外周スタート位置 */

#taishitsu-diagnosis .sparkle:nth-child(1) {
  left: 2%;
  top: 12%;
}


#taishitsu-diagnosis .sparkle:nth-child(2) {
  left: 98%;
  top: 17%;
}


#taishitsu-diagnosis .sparkle:nth-child(3) {
  left: -3%;
  top: 37%;
}


#taishitsu-diagnosis .sparkle:nth-child(4) {
  left: 103%;
  top: 40%;
}


#taishitsu-diagnosis .sparkle:nth-child(5) {
  left: -1%;
  top: 68%;
}


#taishitsu-diagnosis .sparkle:nth-child(6) {
  left: 101%;
  top: 70%;
}


#taishitsu-diagnosis .sparkle:nth-child(7) {
  left: 18%;
  top: 98%;
}


#taishitsu-diagnosis .sparkle:nth-child(8) {
  left: 82%;
  top: 98%;
}


#taishitsu-diagnosis .sparkle:nth-child(9) {
  left: 22%;
  top: 2%;
}


#taishitsu-diagnosis .sparkle:nth-child(10) {
  left: 78%;
  top: 1%;
}


/* 中央に集める */

#taishitsu-diagnosis
.fairy-sparkles.is-active
.sparkle {
  animation:
    sparkleGather 1.45s ease-in forwards;
}


#taishitsu-diagnosis
.fairy-sparkles.is-active
.sparkle:nth-child(2) {
  animation-delay: 0.05s;
}


#taishitsu-diagnosis
.fairy-sparkles.is-active
.sparkle:nth-child(3) {
  animation-delay: 0.1s;
}


#taishitsu-diagnosis
.fairy-sparkles.is-active
.sparkle:nth-child(4) {
  animation-delay: 0.15s;
}


#taishitsu-diagnosis
.fairy-sparkles.is-active
.sparkle:nth-child(5) {
  animation-delay: 0.03s;
}


#taishitsu-diagnosis
.fairy-sparkles.is-active
.sparkle:nth-child(6) {
  animation-delay: 0.12s;
}


#taishitsu-diagnosis
.fairy-sparkles.is-active
.sparkle:nth-child(7) {
  animation-delay: 0.08s;
}


#taishitsu-diagnosis
.fairy-sparkles.is-active
.sparkle:nth-child(8) {
  animation-delay: 0.18s;
}


#taishitsu-diagnosis
.fairy-sparkles.is-active
.sparkle:nth-child(9) {
  animation-delay: 0.13s;
}


#taishitsu-diagnosis
.fairy-sparkles.is-active
.sparkle:nth-child(10) {
  animation-delay: 0.02s;
}


/* =========================================================
   FAIRY NAME
========================================================= */

#taishitsu-diagnosis .fairy-introduction {
  margin:
    0 auto
    58px;

  text-align: center;
}


#taishitsu-diagnosis .fairy-name {
  margin: 0;

  color: var(--heading);

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

  font-size: clamp(25px, 6vw, 36px);
  font-weight: 400;

  line-height: 1.55;

  letter-spacing: 0.01em;

  word-break: keep-all;
  overflow-wrap: normal;
}


#taishitsu-diagnosis .fairy-catch {
  margin:
    14px auto
    0;

  max-width: 580px;

  font-size: 14px;

  line-height: 1.9;
}


/* =========================================================
   RESULT SECTION
========================================================= */

#taishitsu-diagnosis .result-section {
  margin-top: 46px;

  padding: 46px 30px;

  border: 1px solid var(--line);
  border-radius: 26px;

  background: rgba(255,253,249,0.82);
}


#taishitsu-diagnosis .section-label {
  margin: 0 0 16px;

  color: var(--gold);

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 0.18em;

  text-align: center;
}


#taishitsu-diagnosis .section-title {
  margin:
    0 auto
    26px;

  max-width: 620px;

  color: var(--heading);

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

  font-size: clamp(25px, 5.8vw, 34px);
  font-weight: 400;

  line-height: 1.65;

  letter-spacing: 0;

  text-align: center;

  word-break: normal;
  overflow-wrap: break-word;
}


#taishitsu-diagnosis .section-text {
  margin: 0;

  white-space: pre-line;

  color: #625e60;

  font-size: 14px;

  line-height: 2.05;
}


/* =========================================================
   MAIN TENDENCY
========================================================= */

#taishitsu-diagnosis .main-tendency {
  margin-top: 48px;
}


/* =========================================================
   BALANCE SECTION
========================================================= */

#taishitsu-diagnosis .balance-section {
  padding:
    40px
    24px
    30px;
}


#taishitsu-diagnosis .balance-section-title {
  margin-bottom: 32px;
}


/* =========================================================
   BALANCE CARDS
========================================================= */

#taishitsu-diagnosis .balance-card {
  margin-top: 18px;

  padding:
    26px
    26px
    22px;

  border-radius: 24px;
  border: 1px solid;

  overflow: hidden;
}


#taishitsu-diagnosis .balance-card:first-of-type {
  margin-top: 0;
}


#taishitsu-diagnosis .balance-card-cold {
  background: var(--blue-bg);
  border-color: var(--blue-border);
}


#taishitsu-diagnosis .balance-card-life {
  background: var(--green-bg);
  border-color: var(--green-border);
}


#taishitsu-diagnosis .balance-card-beauty {
  background: var(--salmon-bg);
  border-color: var(--salmon-border);
}


/* 上部 */

#taishitsu-diagnosis .balance-type-header {
  display: flex;

  align-items: center;

  gap: 18px;

  padding-bottom: 20px;

  border-bottom:
    1px solid
    rgba(120,120,120,0.11);
}


#taishitsu-diagnosis .balance-icon {
  width: 70px;
  min-width: 70px;
  height: 70px;

  display: flex;

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

  border-radius: 50%;
}


#taishitsu-diagnosis .balance-icon-cold {
  color: var(--blue);

  background: #e6f2fa;
  border: 1px solid #cbdfea;
}


#taishitsu-diagnosis .balance-icon-life {
  color: var(--green);

  background: #edf5e9;
  border: 1px solid #d1e1cb;
}


#taishitsu-diagnosis .balance-icon-beauty {
  color: var(--salmon);

  background: #f9e8ec;
  border: 1px solid #e9cdd4;
}


#taishitsu-diagnosis .balance-svg {
  width: 38px;
  height: 38px;
}


#taishitsu-diagnosis .balance-type-title {
  min-width: 0;
}


#taishitsu-diagnosis .balance-category {
  display: block;

  margin-bottom: 3px;

  color: var(--gold);

  font-size: 12px;
  font-weight: 700;
}


#taishitsu-diagnosis .balance-type-name {
  margin: 0;

  color: #5d595a;

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

  font-size: clamp(23px, 5.5vw, 31px);
  font-weight: 400;

  line-height: 1.45;

  word-break: keep-all;
}


/* 説明 */

#taishitsu-diagnosis .balance-type-heading {
  margin:
    20px 0
    10px;

  font-size: 15px;
  font-weight: 700;

  line-height: 1.8;
}


#taishitsu-diagnosis .balance-type-text {
  margin: 0;

  white-space: pre-line;

  font-size: 13px;

  line-height: 1.9;
}


/* =========================================================
   RADAR
   ★縦長にならないようコンパクト化
========================================================= */

#taishitsu-diagnosis .balance-chart {
  width: 100%;

  margin-top: 22px;

  text-align: center;
}


#taishitsu-diagnosis .balance-chart-title {
  display: inline-flex;

  min-width: 180px;
  min-height: 38px;

  margin: 0 auto 10px;

  padding: 6px 18px;

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

  border-radius: 999px;

  font-size: 13px;
  font-weight: 700;
}


#taishitsu-diagnosis
.balance-card-cold
.balance-chart-title {
  color: var(--blue);
  background: #dfedf7;
}


#taishitsu-diagnosis
.balance-card-life
.balance-chart-title {
  color: var(--green);
  background: #e5efdf;
}


#taishitsu-diagnosis
.balance-card-beauty
.balance-chart-title {
  color: var(--salmon);
  background: #f4e0e5;
}


/* Chart.js専用 */

#taishitsu-diagnosis .balance-chart-canvas {
  position: relative;

  width: min(100%, 310px);

  height: 245px;

  margin:
    4px auto
    0;
}


#taishitsu-diagnosis .balance-chart-canvas canvas {
  display: block;

  width: 100% !important;
  height: 100% !important;
}


/* =========================================================
   SALON / RECOMMEND
========================================================= */

#taishitsu-diagnosis .salon-section {
  padding:
    46px
    30px
    38px;
}


#taishitsu-diagnosis .salon-intro {
  margin: 0;

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


#taishitsu-diagnosis .salon-intro + .salon-intro {
  margin-top: 22px;
}


/* COURSE */

#taishitsu-diagnosis .recommended-course {
  margin-top: 34px;

  padding:
    30px
    22px;

  border:
    1px solid
    #e6d4bc;

  border-radius: 24px;

  background:
    rgba(255,255,255,0.8);

  text-align: center;
}


#taishitsu-diagnosis .recommended-label {
  margin:
    0 0
    16px;

  color: var(--gold);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.18em;
}


#taishitsu-diagnosis .recommended-course-name {
  margin: 0;

  color: #bb7480;

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

  font-size: clamp(22px, 5.5vw, 30px);
  font-weight: 400;

  line-height: 1.65;

  letter-spacing: 0;

  word-break: normal;
  overflow-wrap: break-word;
}


/* =========================================================
   PETIT ADVICE
========================================================= */

#taishitsu-diagnosis .petit-comment {
  margin-top: 26px;

  padding:
    26px
    20px
    22px;

  min-height: 170px;

  border:
    1.5px solid
    #cf8b99;

  border-radius: 23px;

  background:
    rgba(255,255,255,0.68);

  text-align: center;
}


#taishitsu-diagnosis .petit-comment-label {
  margin: 0 0 10px;

  color: var(--gold);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.18em;
}


#taishitsu-diagnosis .petit-comment-title {
  margin: 0;

  color: #be7684;

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

  font-size: clamp(21px, 5vw, 27px);
  font-weight: 400;

  line-height: 1.6;

  word-break: keep-all;
}


#taishitsu-diagnosis .petit-comment-text {
  min-height: 72px;

  margin:
    12px 0
    0;

  font-size: 13px;

  line-height: 1.8;
}


/* =========================================================
   CTA
========================================================= */

#taishitsu-diagnosis .result-cta {
  display: grid;

  gap: 14px;

  margin-top: 24px;
}


#taishitsu-diagnosis .result-cta .diagnosis-btn-main {
  margin-top: 0;

  min-height: 62px;

  background: #c77f8d;

  color: #fff;

  font-size: 17px;
  font-weight: 700;
}


#taishitsu-diagnosis .diagnosis-btn-line {
  min-height: 62px;

  border:
    2px solid
    #bd7582;

  border-radius: 999px;

  background: #fff;

  color: #b66d7a;

  font-size: 17px;
  font-weight: 700;
}


/* =========================================================
   RETRY
========================================================= */

#taishitsu-diagnosis .retry-area {
  padding:
    58px
    0
    40px;

  text-align: center;
}


#taishitsu-diagnosis .diagnosis-btn-retry {
  position: relative;

  padding:
    10px
    26px
    18px;

  border: 0;

  background: transparent;

  color: #666;

  font-family: inherit;
  font-size: 15px;

  cursor: pointer;
}


#taishitsu-diagnosis .diagnosis-btn-retry::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 5px;

  width: 145px;

  border-bottom:
    1px dashed
    #9d9999;

  transform:
    translateX(-50%);
}


/* =========================================================
   RESULT PALETTE
========================================================= */

#taishitsu-diagnosis
#screen-result.is-blue {
  --heading: #7896ad;
}


#taishitsu-diagnosis
#screen-result.is-green {
  --heading: #78998a;
}


#taishitsu-diagnosis
#screen-result.is-salmon {
  --heading: #b97f89;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fairyLoading {

  0%,
  100% {
    transform:
      rotate(0deg)
      scale(1);

    opacity: 0.6;
  }

  50% {
    transform:
      rotate(180deg)
      scale(1.15);

    opacity: 1;
  }

}


@keyframes fairyDot {

  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-4px);
  }

}


@keyframes fairyPrepare {

  0% {
    transform:
      scale(1)
      rotateZ(0deg);
  }

  45% {
    transform:
      scale(1.025)
      rotateZ(-0.6deg);
  }

  100% {
    transform:
      scale(1.01)
      rotateZ(0deg);
  }

}


@keyframes fairyMagicGlow {

  0% {
    filter:
      drop-shadow(
        0 0 0
        rgba(221,176,87,0)
      );
  }

  45% {
    filter:
      drop-shadow(
        0 0 24px
        rgba(221,176,87,0.45)
      );
  }

  70% {
    filter:
      drop-shadow(
        0 0 42px
        rgba(255,220,141,0.72)
      );
  }

  100% {
    filter:
      drop-shadow(
        0 0 12px
        rgba(221,176,87,0.18)
      );
  }

}


@keyframes fairyCenterLight {

  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0.25);
  }

  40% {
    opacity: 0.78;

    transform:
      translate(-50%, -50%)
      scale(2.4);
  }

  68% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(5.4);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(7.5);
  }

}


@keyframes sparkleGather {

  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0.6)
      rotate(0deg);
  }

  15% {
    opacity: 1;
  }

  65% {
    opacity: 1;
  }

  100% {
    left: 50%;
    top: 50%;

    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0.15)
      rotate(180deg);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  #taishitsu-diagnosis {
    padding:
      0
      14px
      96px;
  }


  #taishitsu-diagnosis .result-inner {
    padding-top: 44px;
  }


  #taishitsu-diagnosis .result-header {
    margin-bottom: 16px;
  }


  /* カードサイズはこれまで通り */

  #taishitsu-diagnosis .fairy-reveal {
    width:
      min(
        76vw,
        315px
      );

    margin-bottom: 28px;
  }


  #taishitsu-diagnosis .fairy-introduction {
    margin-bottom: 48px;
  }


  #taishitsu-diagnosis .fairy-name {
    font-size:
      clamp(
        24px,
        6.3vw,
        31px
      );

    line-height: 1.55;
  }


  #taishitsu-diagnosis .result-section {
    margin-top: 36px;

    padding:
      38px
      20px;
  }


  #taishitsu-diagnosis .main-tendency {
    padding:
      38px
      22px;
  }


  #taishitsu-diagnosis .section-title {
    margin-bottom: 22px;

    font-size:
      clamp(
        23px,
        6vw,
        29px
      );

    line-height: 1.7;
  }


  /* 傾向 */

  #taishitsu-diagnosis .balance-section {
    padding:
      38px
      18px
      26px;
  }


  #taishitsu-diagnosis .balance-section-title {
    margin-bottom: 30px;
  }


  #taishitsu-diagnosis .balance-card {
    padding:
      22px
      18px
      18px;
  }


  #taishitsu-diagnosis .balance-type-header {
    gap: 15px;

    padding-bottom: 18px;
  }


  #taishitsu-diagnosis .balance-icon {
    width: 66px;
    min-width: 66px;
    height: 66px;
  }


  #taishitsu-diagnosis .balance-svg {
    width: 35px;
    height: 35px;
  }


  #taishitsu-diagnosis .balance-type-heading {
    margin-top: 17px;
  }


  #taishitsu-diagnosis .balance-chart {
    margin-top: 18px;
  }


  #taishitsu-diagnosis .balance-chart-title {
    margin-bottom: 5px;
  }


  #taishitsu-diagnosis .balance-chart-canvas {
    width: min(100%, 295px);
    height: 228px;

    margin-top: 0;
  }


  /* Recommend */

  #taishitsu-diagnosis .salon-section {
    padding:
      38px
      22px
      34px;
  }


  #taishitsu-diagnosis .recommended-course {
    margin-top: 28px;

    padding:
      26px
      18px;
  }


  #taishitsu-diagnosis .petit-comment {
    margin-top: 24px;
  }


  #taishitsu-diagnosis .result-cta {
    margin-top: 22px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  #taishitsu-diagnosis {
    padding-left: 12px;
    padding-right: 12px;
  }


  #taishitsu-diagnosis .fairy-reveal {
    width:
      min(
        74vw,
        285px
      );
  }


  #taishitsu-diagnosis .result-section {
    padding-left: 17px;
    padding-right: 17px;
  }


  #taishitsu-diagnosis .balance-card {
    padding-left: 16px;
    padding-right: 16px;
  }


  #taishitsu-diagnosis .balance-chart-canvas {
    width: min(100%, 280px);
    height: 215px;
  }


  #taishitsu-diagnosis .recommended-course-name {
    font-size: 21px;
  }

}