/* 立場選択：既存ページへの影響を避けて部品内に色を定義する。 */
.tpm, .tp-audience {
 --card:#343733; --inner:#2b302d; --line:rgba(255,255,255,.24);
 --line-soft:rgba(255,255,255,.1); --green:#cbf236; --green-ink:#192100;
 --text:#fff; --text-2:#f0f2f1; --text-3:#ccc; --text-4:#b4b8b5;
 box-sizing:border-box; line-height:1.7;
}
body.is-tpm-open .fixedBtn { display:none !important; }
.tpm:not([open]) { display:none; }
.tpm button, .tp-audience button { font-family:inherit; }
.tpm__error { color:#ffb3b3; font-size:13px; margin:8px 0 0; }
.tpm__error:empty { display:none; }
.tpm button:disabled, .tp-audience button:disabled { opacity:.55; cursor:wait; }
  /* ── モーダル ── */
  /* HTML標準の <dialog> + showModal()：最前面表示・フォーカスの閉じ込め・背景の操作無効化をブラウザが担う */
  .tpm {
    width: min(calc(100% - 48px), 560px);
    max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); /* dvh非対応ブラウザは1行目を使用 */
    overflow: auto; overscroll-behavior: contain; /* シート内スクロールが背景に伝わらないように */
    margin: auto; padding: 40px 36px 28px;
    background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
  }
  .tpm::backdrop { background: rgba(0,0,0,.66); backdrop-filter: blur(2px); }

  /* 文節単位でのみ折り返す（Safari含む全ブラウザで有効）。読点での強制改行はしない */
  .tpm .ph { display: inline-block; }
  .tpm-choice__desc { word-break: auto-phrase; }

  .tpm:focus { outline: none; }
  .tpm__handle { display: none; }
  .tpm__close {
    position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
    display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--text-3); cursor: pointer;
  }
  .tpm__close:hover { background: rgba(255,255,255,.08); color: var(--text); }

  .tpm__title { margin: 0; padding-right: 32px; font-size: 22px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; }
  /* 文節単位でのみ折り返す（Safari含む全ブラウザで有効）。読点での強制改行はしない */
  .tpm .ph { display: inline-block; }
  .tpm-choice__desc { word-break: auto-phrase; }
  .tpm__lead { margin: 8px 0 0; font-size: 14px; color: var(--text-3); }

  /* 選択カード：タップした時点で保存して閉じる（決定ボタンは置かない） */
  .tpm__choices { display: grid; gap: 10px; margin-top: 24px; }
  .tpm-choice {
    appearance: none; width: 100%; text-align: left; cursor: pointer;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px;
    padding: 16px 16px 16px 18px;
    background: var(--inner); color: var(--text);
    border: 1.5px solid var(--line); border-radius: 14px;
    transition: border-color .15s, background .15s;
  }
  .tpm-choice:hover { border-color: var(--green); background: rgba(203,242,54,.06); }
  .tpm-choice:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
  .tpm-choice[aria-pressed="true"] { border-color: var(--green); background: rgba(203,242,54,.14); }
  .tpm-choice__icon {
    grid-row: span 2; width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(203,242,54,.12); color: var(--green);
  }
  .tpm-choice__name { font-size: 17px; font-weight: 700; line-height: 1.4; }
  .tpm-choice__desc { grid-column: 2; font-size: 12px; color: var(--text-3); line-height: 1.6; }
  .tpm-choice__arrow { grid-row: 1 / span 2; grid-column: 3; color: var(--text-4); transition: color .15s, transform .15s; }
  .tpm-choice:hover .tpm-choice__arrow { color: var(--green); transform: translateX(2px); }

  .tpm__hint { margin: 12px 0 0; font-size: 12px; color: var(--text-4); }

  .tpm__note {
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 20px; padding: 12px 14px; border-radius: 10px;
    background: var(--inner); font-size: 13px; color: var(--text-3); line-height: 1.6;
  }
  .tpm__note svg { flex: 0 0 auto; margin-top: 2px; color: var(--text-4); }

  .tpm__footer { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

  /* チェックボックス */
  .tpm-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--text-2); }
  .tpm-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .tpm-check__box {
    width: 20px; height: 20px; flex: 0 0 auto; border-radius: 4px;
    border: 1.5px solid var(--text-4); background: transparent;
    display: grid; place-items: center; transition: background .15s, border-color .15s;
  }
  .tpm-check__box svg { opacity: 0; }
  .tpm-check input:checked + .tpm-check__box { background: var(--green); border-color: var(--green); }
  .tpm-check input:checked + .tpm-check__box svg { opacity: 1; }
  .tpm-check input:focus-visible + .tpm-check__box { outline: 3px solid var(--green); outline-offset: 2px; }
  .tpm-check__sub { display: block; margin: 4px 0 0 30px; font-size: 12px; color: var(--text-4); }

  @media (max-width: 767px) {
    /* SPはボトムシート：画面の約半分に収める */
    .tpm {
      width: 100%; max-width: 100%; margin: auto 0 0; /* 画面下端に固定 */
      max-height: 88vh; max-height: 88dvh; /* アドレスバーの出し入れで高さが変わっても収まる */
      border-radius: 18px 18px 0 0; border-bottom: 0;
      padding: 26px 20px calc(16px + env(safe-area-inset-bottom, 0px));
      animation: tpm-up .28s cubic-bezier(.2,.8,.2,1);
      touch-action: pan-y;
    }
    .tpm.is-dragging { animation: none; transition: none; }
    .tpm.is-returning { transition: transform .2s ease; }
    .tpm__handle {
      display: block; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
      width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.28);
    }
    .tpm__close { top: 6px; right: 6px; }
    .tpm__title { font-size: 19px; padding-right: 40px; }
  .tpm__lead { margin-top: 4px; font-size: 13px; }
    .tpm__choices { margin-top: 16px; gap: 8px; }
    .tpm-choice { padding: 12px 12px 12px 14px; gap: 2px 12px; }
    .tpm-choice__icon { width: 40px; height: 40px; }
    .tpm-choice__name { font-size: 16px; }
    .tpm__hint { margin-top: 8px; }
    .tpm__note { margin-top: 12px; padding: 10px 12px; font-size: 12px; }
    .tpm__footer { margin-top: 14px; padding-top: 12px; }
    .tpm-check__sub { display: none; }  /* ラベルだけで意味が通じるためSPでは省略 */
  }
  @keyframes tpm-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) {
    .tpm { animation: none !important; }
    .tpm-choice, .tpm-choice__arrow, .tpm-check__box { transition: none; }
  }
.tp-audience { background:rgba(255,255,255,.15); color:#fff; padding:14px 16px; border-radius:4px; margin:12px 0 18px; }
.tp-audience__heading { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.tp-audience__title { font-size:16px; font-weight:700; margin:0; }
.tp-audience__tip { position:relative; }
.tp-audience__tip summary { cursor:pointer; list-style:none; color:#b4b8b5; width:24px; height:24px; text-align:center; }
.tp-audience__tip summary::-webkit-details-marker { display:none; }
.tp-audience__tip p { position:absolute; top:28px; left:-130px; width:max-content; white-space:nowrap; padding:10px 12px; background:#171917; border:1px solid #777; border-radius:8px; color:#fff; font-size:12px; z-index:5; }
.tp-audience__choices { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px; padding:4px; background:#242622; border-radius:999px; }
.tp-audience__choices button { appearance:none; border:0; border-radius:999px; background:transparent; color:#ccc; min-height:42px; padding:8px 10px; font-size:14px; font-weight:700; cursor:pointer; line-height:1.5; }
.tp-audience__choices button[aria-pressed="true"] { background:#cbf236; color:#192100; }
.tp-audience__choices button:focus-visible { outline:2px solid #cbf236; outline-offset:2px; }
.tp-audience--profile { margin:0; padding:0; background:transparent; }
.tp-audience--profile .tp-audience__choices { max-width:380px; }
@media (max-width:359px) { .tp-audience__choices button { font-size:12px; padding-inline:6px; } }
@media (min-width: 768px) {
    .c-slidemenu__panel--pc {
        grid-template-rows: repeat(6, auto);
        grid-template-areas:
            "auth auth"
            "mypage mypage"
            "audience audience"
            "list app"
            "list sns"
            "list logout";
    }
    .c-slidemenu__panel--pc > .tp-audience {
        grid-area: audience;
        min-width: 0;
        margin: 0;
    }
}
@media (max-width: 767px) {
    .c-slidemenu--sp .tp-audience__choices button {
        min-height: 38px;
        font-size: 12px;
        padding-inline: 6px;
    }
}

#tpAudienceToast { width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; white-space: normal; }

@media (min-width: 768px) {
    .c-slidemenu__panel--pc.c-slidemenu__panel--member {
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
            "mypage mypage"
            "list app"
            "list sns"
            "list logout";
    }
    .c-slidemenu-pc__mypage > .tp-audience {
        background: transparent;
        border-radius: 0;
        border-top: 1px solid rgba(255,255,255,.15);
        margin: 20px 0 0;
        padding: 20px 0 0;
    }
    .c-slidemenu-pc__mypage > .tp-audience .tp-audience__choices button {
        min-height: 40px;
        padding: 5px 10px;
    }
}