@media (min-width: 821px) {
  body:has(#detail-container) .l-mainContent,
  body:has(#detail-container) .l-article,
  body:has(#detail-container) .post_content,
  body:has(#detail-container) #detail-container {
    width: 760px !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:has(#detail-container) #detail-container > .card {
    width: 760px !important;
    max-width: 760px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================
   PC：細いカード内でスマホ寄せ重ね配置
   ※上の幅指定は消さない
========================================= */

@media (min-width: 821px) {

  body:has(#detail-container) #profile .profile-grid {
    display: block !important;
    position: relative !important;
    min-height: 1120px !important;
    overflow: visible !important;
  }

  body:has(#detail-container) #profile .profile-left,
  body:has(#detail-container) #profile .profile-front,
  body:has(#detail-container) #profile .profile-right {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* 立ち絵を中央〜右寄りに大きく重ねる */
  body:has(#detail-container) #profile .profile-right {
    position: absolute !important;
    top: 105px !important;
    right: -54px !important;
    z-index: 5 !important;
    width: 560px !important;
    pointer-events: none !important;
  }

  body:has(#detail-container) #profile .portrait {
    width: 560px !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  body:has(#detail-container) #profile .portrait img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
  }

  body:has(#detail-container) #profile .profile-bg {
    inset: 8% -18% 12% -18% !important;
  }

  /* 名前 */
  body:has(#detail-container) #profile .profile-left h2 {
    position: absolute !important;
    top: 78px !important;
    left: 28px !important;
    z-index: 30 !important;
    margin: 0 !important;
  }

  body:has(#detail-container) #profile .name-sub {
    position: absolute !important;
    top: 130px !important;
    left: 28px !important;
    z-index: 30 !important;
    margin: 0 !important;
  }

  /* 基本情報：左側 */
  body:has(#detail-container) #profile .info-grid {
    position: absolute !important;
    top: 330px !important;
    left: 28px !important;
    z-index: 30 !important;

    width: 285px !important;
    max-width: 285px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body:has(#detail-container) #profile .info-grid .row {
    grid-template-columns: 92px 1fr !important;
  }

  body:has(#detail-container) #profile .info-grid .row::before {
    left: 92px !important;
  }

  /* SAN：右下 */
  body:has(#detail-container) #profile .san-wrapper {
    position: absolute !important;
    top: 475px !important;
    right: 28px !important;
    z-index: 30 !important;

    width: 230px !important;
    max-width: 230px !important;
    margin: 0 !important;
  }

  /* レーダー：リンクの上 */
  body:has(#detail-container) #profile .radar-wrap {
    position: absolute !important;
    top: 535px !important;
    right: -10px !important;
    z-index: 25 !important;

    width: 340px !important;
    max-width: 340px !important;
    margin: 0 !important;
  }

  body:has(#detail-container) #profile .radar-wrap canvas,
  body:has(#detail-container) #profile #radarChart {
    width: 340px !important;
    max-width: 340px !important;
    margin: 0 !important;
  }

  /* NOTE：左下。幅を固定して潰れ防止 */
  body:has(#detail-container) #profile .note {
    position: absolute !important;
    top: 720px !important;
    left: 28px !important;
    z-index: 30 !important;

    width: 330px !important;
    max-width: 330px !important;
    margin: 0 !important;
  }

  /* リンク：最下部。控えめ */
  body:has(#detail-container) #profile .profile-links {
    position: absolute !important;
    top: 980px !important;
    left: 28px !important;
    z-index: 30 !important;

    width: 330px !important;
    max-width: 330px !important;
    margin: 0 !important;

    justify-content: flex-start !important;
    gap: 10px !important;
    opacity: 0.62 !important;
  }

  body:has(#detail-container) #profile .profile-link {
    width: 100% !important;
    justify-content: space-between !important;
  }

  body:has(#detail-container) #profile #character-relations-mount {
    position: absolute !important;
    top: 980px !important;
    right: 28px !important;
    z-index: 30 !important;

    width: 260px !important;
    max-width: 260px !important;
    margin: 0 !important;
  }
}


@media (min-width: 821px) {

  /* ===== 名前位置 ===== */

  body:has(#detail-container) #profile .profile-left h2 {
    left: 20px !important;
    top: 74px !important;
  }

  body:has(#detail-container) #profile .name-sub {
    left: 20px !important;
    top: 128px !important;
  }

  /* ===== 立ち絵 ===== */

  body:has(#detail-container) #profile .profile-right {
    top: 92px !important;
    right: -72px !important;
    width: 610px !important;
  }

  body:has(#detail-container) #profile .portrait {
    width: 610px !important;
  }

  /* ===== 背景ぼかし ===== */

  body:has(#detail-container) #profile .profile-bg {
    inset: -2% -22% 30% -22% !important;
    z-index: 1 !important;
  }

  /* ===== 基本情報 ===== */

  body:has(#detail-container) #profile .info-grid {
    top: 345px !important;
    left: 20px !important;
  }

  /* ===== SAN ===== */

  body:has(#detail-container) #profile .san-wrapper {
    top: 500px !important;
    right: 10px !important;
  }

  /* ===== レーダー ===== */

  body:has(#detail-container) #profile .radar-wrap {
    top: 560px !important;
    right: -8px !important;

    width: 300px !important;
    max-width: 300px !important;
  }

  body:has(#detail-container) #profile #radarChart {
    width: 300px !important;
    max-width: 300px !important;
  }

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

  body:has(#detail-container) #profile .note {
    top: 760px !important;
    left: 20px !important;

    width: 320px !important;
    max-width: 320px !important;
  }

  /* ===== リンク ===== */

  body:has(#detail-container) #profile .profile-links {
    top: 960px !important;
    left: 20px !important;

    width: 320px !important;
    z-index: 40 !important;
  }

  /* ===== うちよそ ===== */

  body:has(#detail-container) #profile #character-relations-mount {
    top: 960px !important;
    right: 16px !important;

    width: 230px !important;
    z-index: 40 !important;
  }

}


/* ========================================
   PC PROFILE LAYOUT RESET
======================================== */

@media (min-width: 821px){

  .card{
    width: min(980px, calc(100vw - 80px));
    max-width: 980px;
    margin: 40px auto;
    padding: 40px;
    overflow: hidden;
    position: relative;
  }

  #profile.tab-content.active{
    position: relative;
    min-height: 980px;
  }

  /* ---------- 名前 ---------- */

  .intro{
    position: relative;
    z-index: 5;
    width: 320px;
  }

  .intro h2,
  .name-sub{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* ---------- 情報 ---------- */

  .info-grid{
    position: absolute;
    left: 60px;
    top: 360px;
    width: 260px;
    z-index: 5;
  }

  /* ---------- SAN ---------- */

  .san-wrapper{
    position: absolute;
    left: 470px;
    top: 520px;
    width: 220px;
    z-index: 6;
  }

  /* ---------- レーダー ---------- */

  .radar-wrap,
  .status-radar,
  canvas{
    position: absolute !important;
    right: 30px;
    bottom: 80px;

    width: 420px !important;
    height: 420px !important;

    z-index: 30;
    opacity: 1;
  }

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

  .note{
    position: absolute;
    left: 60px;
    bottom: 170px;

    width: 320px;

    z-index: 7;
  }

  /* ---------- リンク ---------- */

  .profile-links{
    position: absolute;
    left: 60px;
    bottom: 60px;

    width: 320px;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 12px;

    z-index: 30;
  }

  .profile-link{
    width: 100%;
    justify-content: space-between;
  }

  /* ---------- relation ---------- */

  .relation-links,
  .profile-relations{
    position: absolute;
    left: 420px;
    bottom: 60px;

    width: 280px;

    z-index: 30;
  }

  /* ---------- 立ち絵 ---------- */

  .profile-right,
  .portrait{
    position: static !important;
    transform: none !important;
  }

  #visual-main-image{
    position: absolute !important;

    right: 120px;
    top: 170px;

    width: 420px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;

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

    transform: none !important;

    z-index: 3;
    opacity: 0.92;
  }

  /* ---------- 背景 ---------- */

  .profile-bg,
  .profile-background{
    position: absolute;
    inset: 0;

    z-index: 0;
  }

}



@media (min-width: 821px) {

  /* レーダー・リンクを暗い背景処理の外へ見せる */
  body:has(#detail-container) #profile .radar-wrap,
  body:has(#detail-container) #profile .profile-links,
  body:has(#detail-container) #profile #character-relations-mount {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    z-index: 80 !important;
  }

  body:has(#detail-container) #profile .profile-link,
  body:has(#detail-container) #profile .relation-link,
  body:has(#detail-container) #profile #character-relations-mount a {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    color: rgba(245, 248, 248, 0.95) !important;
    border-color: rgba(230, 245, 245, 0.28) !important;
    background: rgba(8, 14, 16, 0.46) !important;
  }

  /* 黒い下フェードが前面に来ている場合の対策 */
  body:has(#detail-container) #profile::before,
  body:has(#detail-container) #profile::after,
  body:has(#detail-container) .profile-grid::before,
  body:has(#detail-container) .profile-grid::after {
    pointer-events: none !important;
    z-index: 1 !important;
  }

}

@media (min-width: 821px) {

  /* レーダー・リンクを暗い背景処理の外へ見せる */
  body:has(#detail-container) #profile .radar-wrap,
  body:has(#detail-container) #profile .profile-links,
  body:has(#detail-container) #profile #character-relations-mount {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    z-index: 80 !important;
  }

  body:has(#detail-container) #profile .profile-link,
  body:has(#detail-container) #profile .relation-link,
  body:has(#detail-container) #profile #character-relations-mount a {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    color: rgba(245, 248, 248, 0.95) !important;
    border-color: rgba(230, 245, 245, 0.28) !important;
    background: rgba(8, 14, 16, 0.46) !important;
  }

  /* 黒い下フェードが前面に来ている場合の対策 */
  body:has(#detail-container) #profile::before,
  body:has(#detail-container) #profile::after,
  body:has(#detail-container) .profile-grid::before,
  body:has(#detail-container) .profile-grid::after {
    pointer-events: none !important;
    z-index: 1 !important;
  }
}