@charset "UTF-8";
:root {
  --color-main-pink: #ff80b7;
  --color-accent-pink: #ff9aa4;
  --color-main-red: #ff737f;
  --color-accent-red: #ff8a73;
  --color-main-orange: #ff9466;
  --color-accent-orange: #ffb873;
  --color-main-yellow: #f2d574;
  --color-accent-yellow: #f2ea85;
  --color-main-green: #6cd9a4;
  --color-accent-green: #7de6d2;
  --color-main-blue: #82d5ff;
  --color-accent-blue: #7ba5f2;
  --color-main-indigo: #677ee6;
  --color-accent-indigo: #9383e6;
  --color-main-purple: #8970cc;
  --color-accent-purple: #a571bf;
  --color-main-dark-gray: #555555;
  --color-accent-dark-gray: #6e4d80;
  --color-main-light-gray: #cccccc;
  --color-accent-light-gray: #b8cbe5;
  --color-rgb-pink: 255, 128, 183;
  --color-rgb-red: 255, 77, 79;
  --color-rgb-orange: 255, 122, 69;
  --color-rgb-yellow: 250, 219, 20;
  --color-rgb-green: 82, 196, 26;
  --color-rgb-blue: 24, 144, 255;
  --color-rgb-indigo: 47, 84, 235;
  --color-rgb-purple: 114, 46, 209;
  --color-rgb-dark-gray: 89, 89, 89;
  --color-rgb-light-gray: 217, 217, 217;
  --color-yellow: #fffce3;
  --color-text: var(--color-black);
  --color-text-sub: var(--color-main-light-gray);
  --color-black: #333;
  --color-white: #fff;
  --color-gray: #888;
  --color-bg: #fefefe;
  --color-bg-gray: #f3f4f6;
  --color-footer-bg: var(--color-text);
  --color-border: #eee;
  --color-active: #6BDFFF;
  --ISTJ: #D96C62;
  --ISFJ: #D9C14C;
  --INFJ: #59A9B3;
  --INTJ: #4C4080;
  --ISTP: #805446;
  --ISFP: #8DB35A;
  --INFP: #D96C8C;
  --INTP: #31478A;
  --ESTP: #D98D57;
  --ESFP: #D96CB5;
  --ENFP: #57ADD9;
  --ENTP: #4584BF;
  --ESTJ: #993D45;
  --ESFJ: #D96262;
  --ENFJ: #53A683;
  --ENTJ: #593145;
  --color-9ennea: #3a3a3a;
  --color-moshimaho: #3a3a3a;
  --vitality-color: #4d805c;
  --elemental-color: #6eb8d9;
  --spatiotemporal-color: #a64258;
  --genesis-color: #a6886c;
  --dominion-color: #ad423e;
  --sealing-color: #465f77;
  --psyche-color: #c9597f;
  --necromancy-color: #674b75;
  --font-family-logo: 'LINE Seed JP', sans-serif;
  --font-family-base: 'Zen Kaku Gothic New', sans-serif;
  --font-family-letter: 'Zen Maru Gothic', sans-serif;
  --font-family-en: 'Mayonice', sans-serif;
  --font-family-star: 'Potta One', system-ui;
  --font-family-mono: 'Atkinson Hyperlegible Mono', monospace;
  --std: 4px;
  --padding-base: var(--std);
  --margin-base: var(--std);
  --gap-base: var(--std);
  --radius-base: var(--std);
  --space-base: var(--std);
  --padding-1: var(--padding-base);
  --padding-2: calc(var(--padding-base) * 2);
  --padding-3: calc(var(--padding-base) * 4);
  --padding-4: calc(var(--padding-base) * 8);
  --padding-5: calc(var(--padding-base) * 16);
  --padding-6: calc(var(--padding-base) * 32);
  --padding-7: calc(var(--padding-base) * 64);
  --margin-1: var(--margin-base);
  --margin-2: calc(var(--margin-base) * 2);
  --margin-3: calc(var(--margin-base) * 4);
  --margin-4: calc(var(--margin-base) * 8);
  --margin-5: calc(var(--margin-base) * 16);
  --margin-6: calc(var(--margin-base) * 32);
  --margin-7: calc(var(--margin-base) * 64);
  --gap-1: var(--gap-base);
  --gap-2: calc(var(--gap-base) * 2);
  --gap-3: calc(var(--gap-base) * 4);
  --gap-4: calc(var(--gap-base) * 8);
  --gap-5: calc(var(--gap-base) * 16);
  --gap-6: calc(var(--gap-base) * 32);
  --gap-7: calc(var(--gap-base) * 64);
  --radius-1: var(--radius-base);
  --radius-2: calc(var(--radius-base) * 2);
  --radius-3: calc(var(--radius-base) * 4);
  --radius-4: calc(var(--radius-base) * 8);
  --radius-5: calc(var(--radius-base) * 16);
  --radius-6: calc(var(--radius-base) * 32);
  --radius-7: calc(var(--radius-base) * 64);
  --space-1: var(--space-base);
  --space-2: calc(var(--space-base) * 2);
  --space-3: calc(var(--space-base) * 4);
  --space-4: calc(var(--space-base) * 8);
  --space-5: calc(var(--space-base) * 16);
  --space-6: calc(var(--space-base) * 32);
  --space-7: calc(var(--space-base) * 64);
  --font-size-text-main: clamp(14px, 1.56vw, 16px);
  --line-height-text-main: 24px;
  --font-size-text-small: clamp(12px, 1.37vw, 14px);
  --line-height-text-small: 20px;
  --font-size-text-supplement: clamp(10px, 1.17vw, 12px);
  --font-size-big-title: 24px;
  --font-size-big-title-en: 36px;
  --font-size-main-title: clamp(20px, 3.13vw, 32px);
  --font-size-sub-title: clamp(16px, 1.95vw, 20px);
  --font-size-sub-title-en: 28px;
  --font-size-accent-title-ja: clamp(44px, 7.03vw, 72px);
  --font-size-accent-title-en: clamp(20px, 3.52vw, 36px);
  --layout-header-height: 64px;
  --layout-content-width: stretch;
  --layout-inner-width: calc(100% - var(--padding-2) * 2);
  --default-easing: cubic-bezier(0.25, 1, 0.5, 1);
  --mask-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --bounce-easing: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ease-cloth: cubic-bezier(0.45, 0, 0.55, 1);
}

@media screen and (min-width: 1025px) {
  :root {
    --padding-base: calc(var(--std) * 2);
    --margin-base: calc(var(--std) * 2);
    --gap-base: var(--std);
    --radius-base: calc(var(--std) * 1.2);
    --space-base: var(--std);
    --layout-content-width: 94%;
  }
}
.p-mypage-profile {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--margin-4);
  padding-bottom: var(--padding-6);
}
.p-mypage-profile__value-row {
  max-width: 600px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-3);
  margin: 0 auto;
}
.p-mypage-profile__value-row-text {
  font-size: var(--font-size-text-small);
}
@media screen and (min-width: 1025px) {
  .p-mypage-profile__value-row-text {
    font-size: var(--font-size-text-medium);
  }
}
.p-mypage-profile__value-row .c-share-list {
  gap: var(--gap-2);
}
.p-mypage-profile__value-row .c-share-list .c-sns-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.p-mypage-profile__inner {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
}
.p-mypage-profile__main-card {
  position: relative;
  overflow: visible;
  padding-top: var(--padding-4);
  gap: var(--gap-3);
}
.p-mypage-profile__subname {
  min-width: 60%;
  width: fit-content;
  text-align: center;
  position: absolute;
  top: calc(var(--margin-3) * -1);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-white);
  font-weight: 900;
  padding: var(--padding-2) var(--padding-3);
  border-radius: 50em;
  white-space: nowrap;
}
.p-mypage-profile__subname::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 8px;
  background: inherit;
  clip-path: polygon(calc(50% - 8px) 0, 50% 100%, calc(50% + 8px) 0);
}
.p-mypage-profile__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p-mypage-profile__name-icon {
  width: 16px;
  height: auto;
}
.p-mypage-profile__favorite-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--theme-color, var(--color-main-pink));
  border-radius: var(--radius-2);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.p-mypage-profile__favorite-btn img {
  width: 20px;
  height: auto;
}
.p-mypage-profile__intro {
  margin-bottom: var(--margin-2);
}
.p-mypage-profile__text {
  color: var(--color-gray);
  font-family: var(--font-family-letter);
  line-height: 1.6;
}
.p-mypage-profile__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
}
.p-mypage-profile__item {
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
  flex-grow: 1;
}
.p-mypage-profile__item-title {
  font-family: var(--font-family-logo);
  font-size: var(--font-size-text-small);
  font-weight: bold;
  padding: var(--padding-1) var(--space-2) var(--padding-1) 0;
}
.p-mypage-profile__item-value {
  flex-grow: 1;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-1);
  font-weight: bold;
  font-family: var(--font-family-logo);
  color: var(--color-gray);
  background-color: var(--color-bg-gray);
  padding: var(--space-2) var(--padding-3);
  border-radius: 50em;
  overflow-wrap: anywhere;
}
.p-mypage-profile__dot-icon {
  width: 24px;
  height: auto;
  aspect-ratio: 1/1;
  image-rendering: pixelated;
}
.p-mypage-profile__tab-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}
.p-mypage-profile__tab {
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-bg-gray);
  color: var(--color-gray);
  border-radius: var(--space-2);
  font-family: var(--font-family-logo);
  font-weight: bold;
}
.p-mypage-profile__tab.is-active {
  color: var(--color-white);
}
.p-mypage-profile .p-mypage__big5 {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}
.p-mypage-profile .p-mypage__big5-bar-fill {
  height: var(--bar-height, 0%);
  background: var(--bar-bg, var(--color-main-light-gray));
}
.p-mypage-profile__message-wrap .c-voice-stars {
  margin: var(--margin-2);
}
.p-mypage-profile__message-wrap .c-voice-stars span {
  font-size: var(--font-size-main-title);
}
.p-mypage-profile__message-title {
  font-weight: 900;
  color: var(--color-gray);
  width: 100%;
  padding-bottom: var(--space-3);
  border-bottom: 2px dotted var(--color-border);
}
.p-mypage-profile__message-text {
  font-family: var(--font-family-letter);
  line-height: 1.8;
}
.p-mypage-profile__desc {
  display: flex;
  justify-content: center;
  font-size: var(--font-size-text-small);
  color: var(--color-main-light-gray);
  line-height: 1.6;
  gap: var(--gap-2);
}
.p-mypage-profile__links {
  display: flex;
  justify-content: center;
  gap: var(--gap-5);
  margin-top: var(--margin-2);
}
.p-mypage-profile__link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}
.p-mypage-profile__link-item:hover {
  opacity: 0.7;
}
.p-mypage-profile__link-id {
  font-size: var(--font-size-text-small);
  font-weight: bold;
  font-family: var(--font-family-letter);
}

/* =====================================
  アンカープロモーション（プロフィールページ上部の追従広告）
===================================== */
@keyframes promoFadeIn {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.p-anchor-promo {
  position: sticky;
  top: var(--layout-header-height);
  width: 100%;
  max-width: 800px;
  margin: auto;
  background: var(--color-white);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  z-index: 20;
  animation: promoFadeIn 0.5s ease both;
  margin-bottom: var(--margin-4);
  border-radius: 0 0 var(--radius-3) var(--radius-3);
}
.p-anchor-promo__body {
  background: repeating-linear-gradient(135deg, #ffffff, #ffffff 60px, #fbfbfd 60px, #fbfbfd 120px);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  will-change: max-height, opacity;
}
.p-anchor-promo__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: fit-content;
  margin: auto;
  gap: var(--gap-3);
  padding: var(--padding-3);
}
.p-anchor-promo__text {
  flex: 1;
  color: var(--color-gray);
  font-family: var(--font-family-letter);
  font-size: var(--font-size-text-small);
  margin: 0;
}
.p-anchor-promo__text p {
  margin: 0 0 10px;
}
.p-anchor-promo__text p:last-child {
  margin-bottom: 0;
}
.p-anchor-promo__text strong {
  color: var(--theme-color, var(--color-main-pink));
  font-weight: 700;
}
.p-anchor-promo__character {
  flex: none;
  width: 64px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-anchor-promo__character img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
}
.p-anchor-promo__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  padding: var(--space-3) !important;
  background: var(--theme-color-gradient, linear-gradient(90deg, var(--color-main-pink), var(--color-accent-pink)));
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--font-size-sub-title);
  text-decoration: none;
  transition: opacity 0.2s ease;
  border-radius: 0 0 var(--radius-3) var(--radius-3);
}
.p-anchor-promo__cta:hover {
  opacity: 0.85;
}