@charset "UTF-8";

/* =========================================================
   花妖精診断 Ver1.1
   COMPLETE CSS
   現在のHTML＋JS専用
========================================================= */

#taishitsu-diagnosis {
  --gold: #c8a15b;
  --gold-light: #ead9b7;

  --blue: #78a7c8;
  --blue-bg: #f1f8fc;
  --blue-border: #cfe4f1;

  --green: #7ca179;
  --green-bg: #f4f9f1;
  --green-border: #d5e5cf;

  --pink: #c97989;
  --pink-bg: #fff4f6;
  --pink-border: #edcfd6;

  --text: #555152;
  --heading: #7f9fb8;

  width: 100%;
  max-width: 720px;

  margin: 0 auto;

  padding: 0 12px 130px;

  box-sizing: border-box;

  color: var(--text);

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

  line-height: 1.8;

  overflow: visible !important;
}


#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: 60px 20px 70px;
  text-align: center;
}


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

  color: var(--gold);

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


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

  color: var(--heading);

  font-size: clamp(27px, 6.5vw, 38px);

  line-height: 1.55;
  font-weight: 400;
}


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

  color: #5d595a;

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


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


/* =========================================================
   BUTTON
========================================================= */

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

  width: 100%;
  min-height: 58px;

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

  padding: 12px 20px;

  border-radius: 999px;

  text-decoration: none;

  font-family: inherit;
  font-size: 16px;
  font-weight: 700;

  cursor: pointer;
}


#taishitsu-diagnosis .diagnosis-btn-main {
  margin-top: 34px;

  border: 1px solid #c77d8b;

  background: #c77d8b;

  color: #fff;
}


/* =========================================================
   QUESTION
========================================================= */

#taishitsu-diagnosis .question-inner {
  padding: 44px 10px 60px;
}


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


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

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

  margin-bottom: 10px;

  color: #888;

  font-size: 12px;
}


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

  overflow: hidden;

  border-radius: 999px;

  background: #eee8df;
}


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

  border-radius: inherit;

  background: var(--gold);

  transition: width .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);

  text-align: center;

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


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

  color: #575354;

  text-align: center;

  font-size: clamp(21px, 5.4vw, 29px);

  line-height: 1.65;
  font-weight: 400;
}


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


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

  padding: 15px 18px;

  border: 1px solid #e5d8c5;
  border-radius: 16px;

  background: #fffdfa;

  color: #565253;

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

  line-height: 1.65;
  text-align: left;

  cursor: pointer;
}


#taishitsu-diagnosis .question-navigation {
  margin-top: 28px;
  text-align: center;
}


#taishitsu-diagnosis .diagnosis-btn-back,
#taishitsu-diagnosis .diagnosis-btn-retry {
  padding: 8px 6px;

  border: 0;
  border-bottom: 1px dashed #999;

  background: transparent;

  color: #666;

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

  cursor: pointer;
}


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

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

  display: flex;
  flex-direction: column;

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

  text-align: center;
}


#taishitsu-diagnosis .loading-flower {
  color: var(--gold);

  font-size: 36px;

  animation: fairyLoadingSpin 2s linear infinite;
}


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

  color: var(--heading);

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


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

  margin-top: 20px;
}


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

  border-radius: 50%;

  background: var(--gold);
}


@keyframes fairyLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}


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

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

  padding-top: 40px;

  overflow: visible !important;
}


/* =========================================================
   RESULT HEADER
========================================================= */

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

  z-index: 20;

  margin: 0 auto 10px;

  padding: 0 18px;

  text-align: center;

  overflow: visible !important;
}


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

  color: var(--gold);

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

  letter-spacing: .13em;
}


/*
   ★カード上部との干渉を防ぐため
   「あなたの花妖精は…」を小さめに
*/

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

  color: #575253;

  font-size: clamp(18px, 4.7vw, 25px);

  line-height: 1.35;
  font-weight: 400;
}


/* =========================================================
   FAIRY CARD
========================================================= */

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

  width: min(68vw, 285px);

  margin: 0 auto 25px;

  padding-top: 11px;

  overflow: visible !important;
}


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

  width: 100%;

  aspect-ratio: 2 / 3;

  margin: 0 auto;

  perspective: 1800px;

  overflow: visible !important;

  isolation: isolate;
}


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

  width: 100%;
  height: 100%;

  overflow: visible !important;

  transform: rotateY(0deg);

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  transform-origin: center center;

  will-change: transform;
}


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

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible !important;

  border-radius: 18px;

  background: transparent;

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

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  filter:
    drop-shadow(
      0 14px 18px
      rgba(145, 105, 63, .12)
    );
}


/* BACK */

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

  transform: rotateY(0deg);
}


#taishitsu-diagnosis .fairy-card-back-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  border-radius: 18px;

  background: #f7dfe1;
}


/* FRONT */

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

  transform: rotateY(180deg);
}


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

  inset: 0;

  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  border-radius: 18px;

  background: #fff;
}


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

  inset: 0;

  z-index: 5;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  pointer-events: none;
}


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

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

  inset: -65px;

  z-index: 40;

  overflow: visible !important;

  opacity: 0;

  pointer-events: none;
}


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


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

  position: absolute;

  left: 50%;
  top: 50%;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(.2);

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,1) 0%,
      rgba(255,247,212,.95) 20%,
      rgba(246,211,134,.72) 43%,
      rgba(221,168,68,.32) 62%,
      rgba(255,255,255,0) 78%
    );
}


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


@keyframes fairyMagicFlash {
  0% {
    opacity: 0;

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

  35% {
    opacity: .75;

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

  65% {
    opacity: 1;

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

  100% {
    opacity: 0;

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


/* =========================================================
   SPARKLES
========================================================= */

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

  left: 50%;
  top: 50%;

  width: 12px;
  height: 12px;

  opacity: 0;

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


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

  position: absolute;

  left: 50%;
  top: 50%;

  border-radius: 99px;

  background: #d5a755;

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


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


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


#taishitsu-diagnosis .fairy-sparkle:nth-child(1) {
  --sx: -150px;
  --sy: -210px;
}

#taishitsu-diagnosis .fairy-sparkle:nth-child(2) {
  --sx: 145px;
  --sy: -190px;
}

#taishitsu-diagnosis .fairy-sparkle:nth-child(3) {
  --sx: -170px;
  --sy: -95px;
}

#taishitsu-diagnosis .fairy-sparkle:nth-child(4) {
  --sx: 170px;
  --sy: -55px;
}

#taishitsu-diagnosis .fairy-sparkle:nth-child(5) {
  --sx: -160px;
  --sy: 65px;
}

#taishitsu-diagnosis .fairy-sparkle:nth-child(6) {
  --sx: 160px;
  --sy: 95px;
}

#taishitsu-diagnosis .fairy-sparkle:nth-child(7) {
  --sx: -110px;
  --sy: 220px;
}

#taishitsu-diagnosis .fairy-sparkle:nth-child(8) {
  --sx: 115px;
  --sy: 220px;
}

#taishitsu-diagnosis .fairy-sparkle:nth-child(9) {
  --sx: -30px;
  --sy: -235px;
}

#taishitsu-diagnosis .fairy-sparkle:nth-child(10) {
  --sx: 35px;
  --sy: 235px;
}


#taishitsu-diagnosis
.fairy-magic.is-active
.fairy-sparkle {
  animation:
    fairySparkleMove
    1.25s
    ease-in-out
    forwards;
}


@keyframes fairySparkleMove {
  0% {
    opacity: 0;

    transform:
      translate(
        calc(-50% + var(--sx)),
        calc(-50% + var(--sy))
      )
      scale(.4)
      rotate(0deg);
  }

  18% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;

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


/* =========================================================
   FAIRY INTRODUCTION
========================================================= */

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

  padding: 0 16px;

  text-align: center;
}


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

  color: var(--heading);

  font-size: clamp(21px, 5.5vw, 30px);

  line-height: 1.45;
  font-weight: 400;

  white-space: nowrap;
}


#taishitsu-diagnosis .fairy-catch {
  max-width: 560px;

  margin: 14px auto 0;

  color: #666;

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


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

#taishitsu-diagnosis .result-section {
  width: calc(100% - 24px);

  margin: 0 auto 30px;

  padding: 33px 21px;

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

  background:
    rgba(255,253,249,.96);
}


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

  color: var(--gold);

  text-align: center;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

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

  letter-spacing: .16em;
}


#taishitsu-diagnosis .section-title {
  max-width: 610px;

  margin: 0 auto;

  color: var(--heading);

  text-align: center;

  font-size: clamp(22px, 5.3vw, 30px);

  line-height: 1.6;
  font-weight: 400;

  word-break: normal;
  line-break: strict;
}


#taishitsu-diagnosis .section-text {
  max-width: 580px;

  margin: 22px auto 0;

  color: #575354;

  font-size: 14px;
  line-height: 1.95;

  text-align: left;

  white-space: pre-line;
}


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

#taishitsu-diagnosis .main-tendency {
  padding-top: 32px;
  padding-bottom: 32px;
}


#taishitsu-diagnosis .main-tendency-title {
  font-size: clamp(20px, 4.8vw, 27px);

  line-height: 1.65;
}


/* =========================================================
   YOUR BALANCE
========================================================= */

#taishitsu-diagnosis .balance-section {
  padding:
    32px
    13px
    23px;

  overflow: visible;
}


/* =========================================================
   BALANCE TITLE
========================================================= */

#taishitsu-diagnosis .balance-heading-area {
  padding:
    0
    8px
    24px;

  text-align: center;
}


#taishitsu-diagnosis .balance-heading-en {
  margin: 0;

  color: var(--gold);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

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

  letter-spacing: .17em;
}


#taishitsu-diagnosis .balance-heading-title {
  margin: 14px 0 0;

  color: var(--heading);

  font-size: clamp(24px, 5.7vw, 31px);

  line-height: 1.45;
  font-weight: 400;
}


#taishitsu-diagnosis .balance-heading-lead {
  margin: 15px auto 0;

  color: #5c5859;

  font-size: 11.5px;
  line-height: 1.75;

  text-align: center;
}


/* =========================================================
   BALANCE CARD
   ★3枚すべて完全共通構造
========================================================= */

#taishitsu-diagnosis .balance-card {
  display: grid;

  grid-template-columns:
    minmax(0, 47%)
    minmax(0, 53%);

  width: 100%;

  min-height: 200px;

  margin: 0 0 13px;

  padding: 15px 10px;

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

  overflow: hidden;
}


#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(--pink-bg);
  border-color: var(--pink-border);
}


/* =========================================================
   LEFT
========================================================= */

#taishitsu-diagnosis .balance-info {
  min-width: 0;

  padding:
    3px
    10px
    3px
    2px;

  display: flex;
  flex-direction: column;

  justify-content: center;
}


/* =========================================================
   LEFT TOP
========================================================= */

#taishitsu-diagnosis .balance-info-top {
  display: grid;

  grid-template-columns:
    50px
    minmax(0, 1fr);

  gap: 9px;

  align-items: center;
}


/* =========================================================
   ICON
========================================================= */

#taishitsu-diagnosis .balance-icon-wrap {
  width: 50px;
  height: 50px;

  display: flex;

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

  border: 1px solid currentColor;
  border-radius: 50%;

  background: rgba(255,255,255,.2);
}


#taishitsu-diagnosis .balance-icon-symbol {
  display: block;

  font-size: 21px;
  line-height: 1;
}


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


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


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


/* =========================================================
   TYPE
========================================================= */

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


#taishitsu-diagnosis .balance-category {
  margin: 0 0 4px;

  color: var(--gold);

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

  line-height: 1.3;
}


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

  color: #4d4a4b;

  font-size: clamp(15px, 3.9vw, 20px);

  line-height: 1.3;
  font-weight: 400;

  letter-spacing: -.015em;

  white-space: nowrap !important;

  word-break: keep-all !important;

  overflow-wrap: normal !important;
}


/* =========================================================
   SHORT DESCRIPTION
========================================================= */

#taishitsu-diagnosis .balance-description {
  margin-top: 12px;

  padding-top: 11px;

  border-top:
    1px solid
    rgba(90,90,90,.10);
}


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

  color: #555152;

  font-size: 10.5px;
  font-weight: 600;

  line-height: 1.65;

  text-align: left;
}


/*
   長い詳細説明はJS上には残す。
   このレイアウトでは非表示。
*/

#taishitsu-diagnosis .balance-type-text {
  display: none !important;
}


/* =========================================================
   RIGHT
   ★3枚とも完全に同じ配置
========================================================= */

#taishitsu-diagnosis .balance-chart-area {
  min-width: 0;

  padding-left: 9px;

  border-left:
    1px solid
    rgba(90,90,90,.09);

  display: grid;

  grid-template-rows:
    29px
    1fr;

  align-items: center;
}


/* =========================================================
   BALANCE LABEL
========================================================= */

#taishitsu-diagnosis .balance-chart-title {
  width: 100%;
  height: 28px;

  display: flex;

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

  margin: 0;

  padding: 0 6px;

  border-radius: 999px;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

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

  line-height: 1.2;

  white-space: nowrap;
}


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

  background: #e3eff7;
}


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

  background: #e7f0e1;
}


#taishitsu-diagnosis
.balance-card-beauty
.balance-chart-title {
  color: var(--pink);

  background: #f5e2e6;
}


/* =========================================================
   RADAR
   ★3つの表示位置を完全統一
========================================================= */

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

  width: 100%;
  height: 154px;

  margin: 0 auto;
}


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

  inset: 0;

  display: block !important;

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


/* =========================================================
   NOTE
========================================================= */

#taishitsu-diagnosis .balance-note {
  max-width: 520px;

  margin: 17px auto 0;

  padding: 0 5px;

  color: #777;

  text-align: center;

  font-size: 9px;
  line-height: 1.6;
}


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

#taishitsu-diagnosis .salon-section {
  padding:
    34px
    21px
    36px;
}


#taishitsu-diagnosis .recommend-title {
  font-size: clamp(20px, 4.8vw, 27px);

  white-space: nowrap;
}


#taishitsu-diagnosis .salon-intro {
  max-width: 570px;

  margin: 23px auto 0;

  color: #565253;

  font-size: 12.5px;
  line-height: 1.85;

  text-align: left;
}


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


/* =========================================================
   RECOMMENDED COURSE
========================================================= */

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

  padding: 25px 18px;

  border: 1px solid #e4cfab;
  border-radius: 22px;

  background:
    rgba(255,255,255,.75);

  text-align: center;
}


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

  color: var(--gold);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

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

  letter-spacing: .14em;
}


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

  color: #bd7684;

  font-size: clamp(21px, 5vw, 28px);

  line-height: 1.55;
  font-weight: 400;
}


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

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

  padding: 23px 18px;

  border: 1px solid #c77d8b;
  border-radius: 22px;

  background:
    rgba(255,255,255,.72);

  text-align: center;
}


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

  color: var(--gold);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

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

  letter-spacing: .16em;
}


/*
   ★前より小さく調整
*/

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

  color: #bd7684;

  font-size: clamp(16px, 4vw, 21px);

  line-height: 1.5;
  font-weight: 400;

  white-space: nowrap;
}


#taishitsu-diagnosis .petit-comment-text {
  max-width: 470px;

  margin: 13px auto 0;

  color: #5f5a5b;

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


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

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

  gap: 13px;

  margin-top: 23px;
}


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


#taishitsu-diagnosis .diagnosis-btn-line {
  border: 2px solid #c47b89;

  background: #fff;

  color: #b76e7c;
}


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

#taishitsu-diagnosis .retry-area {
  padding: 5px 20px 36px;

  text-align: center;
}


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

@media (max-width: 600px) {

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


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


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


  #taishitsu-diagnosis .fairy-card-stage {
    width: min(68vw, 280px);

    padding-top: 10px;
  }


  #taishitsu-diagnosis .fairy-name {
    font-size: clamp(20px, 5.3vw, 28px);
  }


  #taishitsu-diagnosis .result-section {
    width: calc(100% - 20px);
  }


  /* BALANCE */

  #taishitsu-diagnosis .balance-section {
    padding:
      30px
      10px
      21px;
  }


  #taishitsu-diagnosis .balance-heading-area {
    padding-bottom: 20px;
  }


  #taishitsu-diagnosis .balance-card {
    grid-template-columns:
      minmax(0, 45%)
      minmax(0, 55%);

    min-height: 192px;

    padding:
      14px
      8px;

    margin-bottom: 12px;
  }


  #taishitsu-diagnosis .balance-info {
    padding-right: 7px;
  }


  #taishitsu-diagnosis .balance-info-top {
    grid-template-columns:
      45px
      minmax(0, 1fr);

    gap: 7px;
  }


  #taishitsu-diagnosis .balance-icon-wrap {
    width: 45px;
    height: 45px;
  }


  #taishitsu-diagnosis .balance-icon-symbol {
    font-size: 19px;
  }


  #taishitsu-diagnosis .balance-category {
    font-size: 9.5px;
  }


  #taishitsu-diagnosis .balance-type-name {
    font-size: clamp(13.5px, 3.65vw, 17px);
  }


  #taishitsu-diagnosis .balance-description {
    margin-top: 10px;

    padding-top: 9px;
  }


  #taishitsu-diagnosis .balance-type-heading {
    font-size: 9.5px;

    line-height: 1.6;
  }


  #taishitsu-diagnosis .balance-chart-area {
    padding-left: 7px;
  }


  #taishitsu-diagnosis .balance-chart-title {
    height: 26px;

    font-size: 8.8px;
  }


  #taishitsu-diagnosis .balance-chart-area {
    grid-template-rows:
      27px
      1fr;
  }


  #taishitsu-diagnosis .balance-chart-canvas {
    height: 146px;
  }


  #taishitsu-diagnosis .balance-note {
    font-size: 8.7px;
  }

}


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

@media (max-width: 390px) {

  #taishitsu-diagnosis .result-label {
    font-size: 18px;
  }


  #taishitsu-diagnosis .fairy-card-stage {
    width: min(67vw, 268px);
  }


  #taishitsu-diagnosis .fairy-name {
    font-size: 19px;
  }


  #taishitsu-diagnosis .main-tendency-title {
    font-size: 19px;
  }


  #taishitsu-diagnosis .balance-heading-title {
    font-size: 23px;
  }


  #taishitsu-diagnosis .balance-heading-lead {
    font-size: 10.5px;
  }


  #taishitsu-diagnosis .balance-card {
    min-height: 188px;
  }


  #taishitsu-diagnosis .balance-info-top {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    gap: 6px;
  }


  #taishitsu-diagnosis .balance-icon-wrap {
    width: 42px;
    height: 42px;
  }


  #taishitsu-diagnosis .balance-icon-symbol {
    font-size: 18px;
  }


  #taishitsu-diagnosis .balance-type-name {
    font-size: 13px;
  }


  #taishitsu-diagnosis .balance-type-heading {
    font-size: 9px;
  }


  #taishitsu-diagnosis .balance-chart-title {
    font-size: 8.4px;
  }


  #taishitsu-diagnosis .balance-chart-canvas {
    height: 142px;
  }


  #taishitsu-diagnosis .recommend-title {
    font-size: 19px;
  }


  #taishitsu-diagnosis .petit-comment-title {
    font-size: 16px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #taishitsu-diagnosis .fairy-card-rotor,
  #taishitsu-diagnosis .fairy-card-shell,
  #taishitsu-diagnosis .fairy-magic,
  #taishitsu-diagnosis .fairy-sparkle {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

}

/* =========================================================
   YOUR BALANCE
   FINAL VERTICAL LAYOUT OVERRIDE
   ※「あなたの3つの傾向」以外は変更しない
========================================================= */

/* ---------------------------------------------------------
   CARD
   3枚すべて
   上：タイプ情報
   中：見出し＋本文
   下：レーダーチャート
--------------------------------------------------------- */

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

  width: 100%;
  min-height: 0;

  margin: 0 0 16px;

  padding: 20px 18px 18px;

  overflow: hidden;
}


/* ---------------------------------------------------------
   TYPE INFORMATION
--------------------------------------------------------- */

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

  min-width: 0;

  padding: 0;
}


#taishitsu-diagnosis .balance-info-top {
  display: grid;

  grid-template-columns:
    56px
    minmax(0, 1fr);

  gap: 12px;

  align-items: center;
}


#taishitsu-diagnosis .balance-icon-wrap {
  width: 56px;
  height: 56px;
}


#taishitsu-diagnosis .balance-icon-symbol {
  font-size: 22px;
}


#taishitsu-diagnosis .balance-category {
  margin: 0 0 4px;

  font-size: 11px;
}


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

  font-size:
    clamp(
      18px,
      4.5vw,
      22px
    );

  line-height: 1.35;

  white-space: nowrap !important;

  word-break: keep-all !important;

  overflow-wrap: normal !important;
}


/* ---------------------------------------------------------
   TYPE DESCRIPTION
   確定済みの見出し＋本文を両方表示
--------------------------------------------------------- */

#taishitsu-diagnosis .balance-description {
  margin-top: 16px;

  padding-top: 14px;

  border-top:
    1px solid
    rgba(90, 90, 90, .10);
}


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

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

  line-height: 1.75;

  text-align: left;
}


#taishitsu-diagnosis .balance-card-cold .balance-type-heading {
  color: var(--blue);
}


#taishitsu-diagnosis .balance-card-life .balance-type-heading {
  color: var(--green);
}


#taishitsu-diagnosis .balance-card-beauty .balance-type-heading {
  color: var(--pink);
}


#taishitsu-diagnosis .balance-type-text {
  display: block !important;

  margin: 10px 0 0;

  color: #5d595a;

  font-size: 12.5px;
  font-weight: 400;

  line-height: 1.85;

  text-align: left;

  white-space: normal;
}


/* ---------------------------------------------------------
   CHART AREA
   左右分割を完全解除し、本文の下へ配置
--------------------------------------------------------- */

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

  min-width: 0;

  margin-top: 18px;

  padding:
    16px
    0
    0;

  border-left: 0;

  border-top:
    1px solid
    rgba(90, 90, 90, .10);
}


/* ---------------------------------------------------------
   CHART TITLE
--------------------------------------------------------- */

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

  width:
    min(
      100%,
      230px
    );

  height: 30px;

  margin:
    0
    auto
    4px;

  padding:
    0
    12px;

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

  border-radius: 999px;

  font-size: 10.5px;

  line-height: 1.2;

  white-space: nowrap;
}


/* ---------------------------------------------------------
   RADAR
   横幅を使って大きく・読みやすく表示
--------------------------------------------------------- */

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

  width: 100%;
  max-width: 340px;

  height: 210px;

  margin:
    4px
    auto
    0;
}


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

  inset: 0;

  display: block !important;

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


/* ---------------------------------------------------------
   NOTE
--------------------------------------------------------- */

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


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

@media (max-width: 600px) {

  #taishitsu-diagnosis .balance-card {
    min-height: 0;

    padding:
      18px
      14px
      16px;

    margin-bottom: 14px;
  }


  #taishitsu-diagnosis .balance-info {
    padding: 0;
  }


  #taishitsu-diagnosis .balance-info-top {
    grid-template-columns:
      50px
      minmax(0, 1fr);

    gap: 10px;
  }


  #taishitsu-diagnosis .balance-icon-wrap {
    width: 50px;
    height: 50px;
  }


  #taishitsu-diagnosis .balance-icon-symbol {
    font-size: 20px;
  }


  #taishitsu-diagnosis .balance-category {
    font-size: 10px;
  }


  #taishitsu-diagnosis .balance-type-name {
    font-size:
      clamp(
        17px,
        4.35vw,
        20px
      );
  }


  #taishitsu-diagnosis .balance-description {
    margin-top: 14px;

    padding-top: 12px;
  }


  #taishitsu-diagnosis .balance-type-heading {
    font-size: 12px;

    line-height: 1.7;
  }


  #taishitsu-diagnosis .balance-type-text {
    margin-top: 9px;

    font-size: 11.5px;

    line-height: 1.8;
  }


  #taishitsu-diagnosis .balance-chart-area {
    margin-top: 16px;

    padding:
      14px
      0
      0;

    border-left: 0;
  }


  #taishitsu-diagnosis .balance-chart-title {
    width:
      min(
        100%,
        220px
      );

    height: 28px;

    font-size: 10px;
  }


  #taishitsu-diagnosis .balance-chart-canvas {
    width: 100%;
    max-width: 320px;

    height: 196px;

    margin-top: 4px;
  }

}


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

@media (max-width: 390px) {

  #taishitsu-diagnosis .balance-card {
    min-height: 0;

    padding:
      16px
      12px
      15px;
  }


  #taishitsu-diagnosis .balance-info-top {
    grid-template-columns:
      46px
      minmax(0, 1fr);

    gap: 9px;
  }


  #taishitsu-diagnosis .balance-icon-wrap {
    width: 46px;
    height: 46px;
  }


  #taishitsu-diagnosis .balance-icon-symbol {
    font-size: 19px;
  }


  #taishitsu-diagnosis .balance-type-name {
    font-size: 16.5px;
  }


  #taishitsu-diagnosis .balance-type-heading {
    font-size: 11.5px;
  }


  #taishitsu-diagnosis .balance-type-text {
    font-size: 11px;

    line-height: 1.75;
  }


  #taishitsu-diagnosis .balance-chart-title {
    font-size: 9.5px;
  }


  #taishitsu-diagnosis .balance-chart-canvas {
    max-width: 300px;

    height: 184px;
  }

}