:root {
      --pe-yellow: #ffd84d;
      --pe-orange: #ff8a2a;
      --pe-navy: #18203a;
      --pe-blue: #3b82f6;
      --pe-green: #22c55e;
      --pe-cream: #fff8df;
      --pe-white: #ffffff;
      --pe-gray: #6b7280;
      --pe-line: rgba(24, 32, 58, .12);
      --pe-shadow: 0 18px 45px rgba(24, 32, 58, .14);
      --pe-radius: 22px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      color: var(--pe-navy);
      background:
        radial-gradient(circle at 12% 0%, rgba(255, 216, 77, .45), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(59, 130, 246, .16), transparent 30%),
        linear-gradient(180deg, #fff8df 0%, #fffdf4 46%, #ffffff 100%);
      font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      line-height: 1.65;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    .pe-page {
      width: 100%;
      max-width: 520px;
      min-height: 100vh;
      margin: 0 auto;
      background: rgba(255, 255, 255, .45);
      overflow: hidden;
      box-shadow: 0 0 0 1px rgba(24, 32, 58, .04);
    }

    .pe-topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 18px;
      background: rgba(255, 248, 223, .88);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(24, 32, 58, .08);
    }

    .pe-logo {
      display: flex;
      align-items: center;
    }

    .pe-logo-img {
      height: 32px;
      width: auto;
      display: block;
      object-fit: contain;
    }

    .pe-logo-mark {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 11px;
      background: var(--pe-navy);
      color: var(--pe-yellow);
      font-weight: 950;
      transform: rotate(-5deg);
      box-shadow: 0 8px 18px rgba(24, 32, 58, .18);
    }

    /* ── ハンバーガーナビ ── */
    .pe-nav-toggle {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      padding: 8px;
      border-radius: 12px;
      border: 2.5px solid #18203a;
      background: #ffd84d;
      box-shadow: 3px 3px 0 #18203a;
      cursor: pointer;
      transition: transform .1s, box-shadow .1s;
    }
    .pe-nav-toggle:active {
      transform: translate(2px, 2px);
      box-shadow: 1px 1px 0 #18203a;
    }
    .pe-nav-toggle span {
      display: block;
      height: 2.5px;
      border-radius: 2px;
      background: #18203a;
      transition: transform .25s, opacity .25s;
    }
    /* 開いた状態 */
    .pe-nav-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .pe-nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .pe-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

    /* オーバーレイ */
    .pe-nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(10,6,30,.55);
      z-index: 200;
      backdrop-filter: blur(2px);
    }
    .pe-nav-overlay.is-open { display: block; }

    /* ドロワー */
    .pe-nav-drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(320px, 88vw);
      z-index: 210;
      background: #fffdf4;
      border-left: 3px solid #18203a;
      box-shadow: -6px 0 0 #18203a;
      overflow-y: auto;
      padding: 64px 20px 32px;
      transform: translateX(100%);
      transition: transform .3s cubic-bezier(.22,1,.36,1);
    }
    .pe-nav-drawer.is-open {
      transform: translateX(0);
    }

    /* 閉じるボタン */
    .pe-nav-close {
      position: absolute;
      top: 14px;
      right: 16px;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 2.5px solid #18203a;
      background: #fff;
      font-size: 14px;
      font-weight: 900;
      box-shadow: 2px 2px 0 #18203a;
      cursor: pointer;
      line-height: 1;
      transition: transform .1s, box-shadow .1s;
    }
    .pe-nav-close:active {
      transform: translate(1px, 1px);
      box-shadow: 1px 1px 0 #18203a;
    }

    /* セクション */
    .pe-nav-section {
      margin-bottom: 20px;
    }
    .pe-nav-section-label {
      margin: 0 0 6px;
      padding: 3px 10px;
      display: inline-block;
      border-radius: 999px;
      background: #18203a;
      color: #ffd84d;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .1em;
    }

    /* メニューアイテム */
    .pe-nav-item {
      display: block;
      padding: 9px 12px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      color: #18203a;
      text-decoration: none;
      border: 2px solid transparent;
      transition: background .12s, border-color .12s;
    }
    .pe-nav-item:hover {
      background: #fff3cc;
      border-color: #ffd84d;
    }
    .pe-nav-item + .pe-nav-item {
      margin-top: 2px;
    }
    /* ログイン・ログアウト */
    .pe-nav-item--login {
      background: #ffd84d;
      border-color: #18203a;
      box-shadow: 2px 2px 0 #18203a;
      margin-bottom: 6px;
      font-weight: 800;
    }
    .pe-nav-item--logout {
      background: #fff;
      border-color: #18203a;
      box-shadow: 2px 2px 0 #18203a;
      font-weight: 800;
    }

    .pe-hero {
      position: relative;
      overflow: hidden;
    }

    .pe-hero-image-wrap {
      position: relative;
      width: 100%;
      line-height: 0;
    }

    .pe-hero-img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }

    .pe-hero-btn-wrap {
      position: absolute;
      bottom: 36px;
      left: 20px;
      right: 20px;
      display: flex;
      justify-content: center;
    }

    /* ---- Uiverse button (augustin_4687) ---- */
    .button {
      --stone-50: #fafaf9;
      --stone-800: #292524;
      --yellow-400: #22c55e;

      width: calc(100% - 8px);
      font-size: 1.05rem;
      cursor: pointer;
      position: relative;
      font-family: "Rubik", sans-serif;
      font-weight: bold;
      line-height: 1;
      padding: 4px;
      transform: translate(-7px, -7px);
      outline: 3px solid transparent;
      outline-offset: 6px;
      border-radius: 9999px;
      background-color: var(--stone-800);
      color: var(--stone-800);
      transition:
        transform 150ms ease,
        box-shadow 150ms ease;
      text-align: center;
      box-shadow:
        /* 3D 影レイヤー（深め） */
        1px 1px 0 0 var(--stone-800),
        2px 2px 0 0 var(--stone-800),
        3px 3px 0 0 var(--stone-800),
        4px 4px 0 0 var(--stone-800),
        5px 5px 0 0 var(--stone-800),
        6px 6px 0 0 var(--stone-800),
        7px 7px 0 0 var(--stone-800),
        /* 外周の白リング（4px 幅でくっきり） */
        0 0 0 4px var(--stone-50),
        1px 1px 0 4px var(--stone-50),
        2px 2px 0 4px var(--stone-50),
        3px 3px 0 4px var(--stone-50),
        4px 4px 0 4px var(--stone-50),
        5px 5px 0 4px var(--stone-50),
        6px 6px 0 4px var(--stone-50),
        7px 7px 0 4px var(--stone-50);
      border: none;
    }

    .button:hover {
      transform: translate(0, 0);
      box-shadow: 0 0 0 4px var(--stone-50);
    }

    .button:active,
    .button:focus-visible {
      outline-color: var(--yellow-400);
    }

    .button:focus-visible {
      outline-style: dashed;
    }

    .button > div {
      position: relative;
      pointer-events: none;
      background-color: var(--yellow-400);
      border: 4px solid rgba(255, 255, 255, 0.45);
      border-radius: 9999px;
    }

    .button > div::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 9999px;
      opacity: 0.5;
      background-image: radial-gradient(
          rgb(255 255 255 / 80%) 20%,
          transparent 20%
        ),
        radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
      background-position: 0 0, 4px 4px;
      background-size: 8px 8px;
      mix-blend-mode: hard-light;
      animation: dots 0.5s infinite linear;
    }

    .button > div > span {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.9rem 1.5rem;
      gap: 0.2rem;
      filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.25));
    }

    .button-sub {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: .08em;
      color: rgba(255, 255, 255, 0.88);
      line-height: 1;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    }

    .button-main {
      font-size: 1.35rem;
      font-weight: 900;
      letter-spacing: .04em;
      line-height: 1;
      color: #fef3a8;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    }

    .button > div > span:active {
      transform: translateY(2px);
    }

    /* ---- ボタン全体のメダル風アニメーション ---- */
    .button {
      animation: medal-float 2.6s ease-in-out infinite;
    }

    .button > div {
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
      animation: medal-pulse 2.6s ease-in-out infinite;
    }

    .button:hover {
      animation: none;
    }

    .button:hover > div {
      animation: none;
      box-shadow: none;
    }

    @keyframes medal-float {
      0%, 100% { transform: translate(-4px, -4px); }
      50%       { transform: translate(-4px, -7px); }
    }

    @keyframes medal-pulse {
      0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.65); }
      55%  { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0);   }
      100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0);    }
    }

    @keyframes dots {
      0% {
        background-position: 0 0, 4px 4px;
      }
      100% {
        background-position: 8px 0, 12px 4px;
      }
    }

    .pe-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(24, 32, 58, .1);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .08em;
      color: var(--pe-orange);
    }

    .pe-badge::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--pe-green);
      box-shadow: 0 0 0 5px rgba(34, 197, 94, .14);
    }

    .pe-hero-title {
      margin: 18px 0 12px;
      font-size: clamp(38px, 12vw, 58px);
      line-height: .98;
      letter-spacing: -.08em;
      font-weight: 950;
    }

    .pe-hero-title em {
      font-style: normal;
      display: inline-block;
      padding: 0 .08em .04em;
      background: linear-gradient(transparent 56%, var(--pe-yellow) 56%);
    }

    .pe-hero-copy {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      color: rgba(24, 32, 58, .72);
    }

    .pe-hero-card {
      position: relative;
      margin: 24px 0 0;
      padding: 18px;
      border-radius: 26px;
      background: var(--pe-white);
      border: 2px solid rgba(24, 32, 58, .08);
      box-shadow: var(--pe-shadow);
    }

    .pe-hero-card::after {
      content: "1 min";
      position: absolute;
      right: 14px;
      top: -13px;
      padding: 5px 10px;
      border-radius: 999px;
      background: var(--pe-blue);
      color: white;
      font-size: 11px;
      font-weight: 900;
      transform: rotate(4deg);
    }

    .pe-card-label {
      font-size: 11px;
      font-weight: 950;
      color: var(--pe-orange);
      letter-spacing: .08em;
    }

    .pe-card-question {
      margin: 6px 0 14px;
      font-size: 19px;
      font-weight: 950;
      line-height: 1.35;
      letter-spacing: -.04em;
    }

    .pe-options {
      display: grid;
      gap: 8px;
    }

    .pe-option {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 12px;
      border-radius: 15px;
      background: #f8fafc;
      border: 1px solid rgba(24, 32, 58, .08);
      font-size: 13px;
      font-weight: 800;
    }

    .pe-option span {
      display: grid;
      place-items: center;
      width: 23px;
      height: 23px;
      border-radius: 50%;
      background: var(--pe-yellow);
      font-size: 12px;
      font-weight: 950;
    }

    .pe-main-cta {
      display: block;
      margin: 18px 0 0;
      padding: 15px 18px;
      border-radius: 18px;
      background: linear-gradient(135deg, var(--pe-orange), #ffbd2e);
      color: white;
      text-align: center;
      font-size: 16px;
      font-weight: 950;
      box-shadow: 0 16px 28px rgba(255, 138, 42, .28);
    }

    .pe-hero-mini {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin: 14px 0 0;
      font-size: 11px;
      font-weight: 800;
      color: rgba(24, 32, 58, .58);
    }

    .pe-section {
      padding: 34px 18px;
    }

    .pe-section.white {
      background: rgba(255, 255, 255, .72);
    }

    .pe-section.yellow {
      background: linear-gradient(180deg, #fff3ba, #fff8df);
    }

    .pe-section.dark {
      background: var(--pe-navy);
      color: white;
    }

    .pe-section-head {
      margin-bottom: 18px;
    }

    .pe-section-kicker {
      display: block;
      margin-bottom: 7px;
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .1em;
      color: var(--pe-orange);
    }

    .pe-section.dark .pe-section-kicker {
      color: var(--pe-yellow);
    }

    .pe-section-title {
      margin: 0;
      font-size: 27px;
      line-height: 1.16;
      letter-spacing: -.06em;
      font-weight: 950;
    }

    .pe-section-text {
      margin: 10px 0 0;
      font-size: 13px;
      font-weight: 700;
      color: rgba(24, 32, 58, .64);
    }

    .pe-section.dark .pe-section-text {
      color: rgba(255, 255, 255, .68);
    }

    .pe-feature-grid,
    .pe-category-grid,
    .pe-pickup-grid,
    .pe-quiz-grid {
      display: grid;
      gap: 12px;
    }

    .pe-feature-card {
      padding: 17px;
      border-radius: var(--pe-radius);
      background: white;
      border: 1px solid rgba(24, 32, 58, .08);
      box-shadow: 0 10px 26px rgba(24, 32, 58, .07);
    }

    .pe-feature-num {
      display: inline-grid;
      place-items: center;
      min-width: 38px;
      height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      background: var(--pe-navy);
      color: var(--pe-yellow);
      font-size: 12px;
      font-weight: 950;
    }

    .pe-feature-card h3 {
      margin: 10px 0 4px;
      font-size: 18px;
      line-height: 1.3;
      letter-spacing: -.04em;
    }

    .pe-feature-card p {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      color: rgba(24, 32, 58, .62);
    }

    .pe-sample-card,
    .pe-category-card,
    .pe-pickup-card,
    .pe-quiz-card,
    .pe-level-card {
      display: block;
      padding: 16px;
      border-radius: var(--pe-radius);
      background: white;
      border: 1px solid rgba(24, 32, 58, .08);
      box-shadow: 0 10px 26px rgba(24, 32, 58, .07);
    }

    .pe-sample-card {
      margin-bottom: 12px;
    }

    .pe-tag {
      display: inline-flex;
      padding: 4px 9px;
      border-radius: 999px;
      background: rgba(255, 216, 77, .45);
      color: #9a5b00;
      font-size: 11px;
      font-weight: 950;
    }

    .pe-sample-q {
      margin: 10px 0;
      font-size: 18px;
      font-weight: 950;
      letter-spacing: -.04em;
    }

    .pe-sample-options {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .pe-sample-options span {
      padding: 7px 10px;
      border-radius: 999px;
      background: #f8fafc;
      border: 1px solid rgba(24, 32, 58, .08);
      font-size: 12px;
      font-weight: 800;
    }

    .pe-category-card h3,
    .pe-pickup-card strong {
      display: block;
      margin: 0 0 5px;
      font-size: 18px;
      line-height: 1.3;
      font-weight: 950;
      letter-spacing: -.04em;
    }

    .pe-category-card p,
    .pe-pickup-card p {
      margin: 0;
      font-size: 12px;
      color: rgba(24, 32, 58, .62);
      font-weight: 700;
    }

    .pe-pickup-card span {
      display: block;
      margin-bottom: 5px;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .1em;
      color: var(--pe-orange);
    }

    .pe-member-hero {
      margin: 18px;
      padding: 24px 18px;
      border-radius: 28px;
      background:
        radial-gradient(circle at 90% 0%, rgba(255, 216, 77, .48), transparent 38%),
        linear-gradient(135deg, var(--pe-navy), #25305b);
      color: white;
      box-shadow: var(--pe-shadow);
    }

    .pe-member-hero span {
      color: var(--pe-yellow);
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .1em;
    }

    .pe-member-hero h2 {
      margin: 8px 0;
      font-size: 31px;
      line-height: 1.08;
      letter-spacing: -.07em;
      font-weight: 950;
    }

    .pe-member-hero p {
      margin: 0;
      font-size: 13px;
      color: rgba(255, 255, 255, .72);
      font-weight: 700;
    }

    .pe-content-block {
      padding: 28px 18px;
      background: white;
      border-top: 1px solid rgba(24, 32, 58, .07);
    }

    .pe-content-title {
      margin: 0 0 14px;
      font-size: 22px;
      line-height: 1.22;
      letter-spacing: -.05em;
      font-weight: 950;
    }

    .pe-quiz-card {
      margin-bottom: 10px;
      position: relative;
      padding-right: 44px;
    }

    .pe-quiz-card::after {
      content: "\203A";
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 28px;
      font-weight: 400;
      color: rgba(24, 32, 58, .35);
    }

    .pe-quiz-meta {
      margin-bottom: 4px;
      font-size: 11px;
      font-weight: 950;
      color: var(--pe-orange);
    }

    .pe-quiz-question {
      font-size: 15px;
      line-height: 1.45;
      font-weight: 850;
    }

    .pe-more {
      display: block;
      margin: 14px 0 0;
      padding: 12px 14px;
      border-radius: 16px;
      background: var(--pe-navy);
      color: white;
      text-align: center;
      font-size: 14px;
      font-weight: 950;
    }

    .pe-level-list {
      display: grid;
      gap: 10px;
    }

    .pe-level-card {
      background: rgba(255, 255, 255, .1);
      border-color: rgba(255, 255, 255, .16);
      color: white;
    }

    .pe-level-card span {
      display: block;
      font-size: 10px;
      color: var(--pe-yellow);
      font-weight: 950;
      letter-spacing: .1em;
    }

    .pe-level-card strong {
      display: block;
      margin-top: 2px;
      font-size: 18px;
      font-weight: 950;
    }

    /* ---- ALL GENRES リデザイン ---- */
    .pe-allgenre-section {
      padding: 42px 18px 50px;
      background:
        radial-gradient(circle at 10% 0%, rgba(255, 216, 77, .4), transparent 30%),
        linear-gradient(180deg, #fffbee 0%, #fff 100%);
      position: relative;
      overflow: hidden;
    }

    .pe-allgenre-section::after {
      content: "";
      position: absolute;
      bottom: -50px;
      right: -50px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: rgba(34, 197, 94, .14);
      pointer-events: none;
    }

    .pe-allgenre-kicker {
      position: relative;
      display: inline-block;
      margin-bottom: 12px;
      padding: 5px 12px;
      border-radius: 8px;
      background: var(--pe-navy);
      color: var(--pe-yellow);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .14em;
      transform: rotate(-1deg);
      box-shadow: 3px 3px 0 rgba(24, 32, 58, .25);
    }

    .pe-allgenre-title {
      position: relative;
      margin: 0 0 6px;
      font-size: 25px;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -.06em;
      color: var(--pe-navy);
    }

    .pe-allgenre-title em {
      font-style: normal;
      font-size: 1.15em;
      color: var(--pe-orange);
    }

    .pe-allgenre-lead {
      position: relative;
      margin: 0 0 26px;
      font-size: 13px;
      line-height: 1.72;
      color: rgba(24, 32, 58, .62);
      font-weight: 600;
    }

    .pe-genre-groups {
      display: grid;
      gap: 14px;
    }

    .pe-genre-group {
      border-radius: 22px;
      border: 2.5px solid var(--pe-navy);
      box-shadow: 4px 4px 0 var(--pe-navy);
      overflow: hidden;
      background: #fff;
    }

    .pe-genre-group-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 16px 11px;
      background: var(--group-color);
      position: relative;
    }

    .pe-genre-group-head::after {
      content: "";
      position: absolute;
      top: -14px;
      right: -14px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .2);
      pointer-events: none;
    }

    .pe-genre-group-head h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 950;
      letter-spacing: -.03em;
      color: #fff;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    }

    .pe-genre-count {
      font-size: 10px;
      font-weight: 900;
      color: rgba(255, 255, 255, .85);
      letter-spacing: .04em;
      background: rgba(255, 255, 255, .2);
      padding: 3px 8px;
      border-radius: 999px;
    }

    .pe-genre-links {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 8px 12px 10px;
    }

    .pe-genre-links a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 800;
      color: var(--pe-navy);
      border-bottom: 1px solid rgba(24, 32, 58, .06);
      transition: background .15s, transform .15s;
      text-decoration: none;
    }

    .pe-genre-links a:last-child {
      border-bottom: none;
    }

    .pe-genre-links a:hover {
      background: var(--group-light);
      transform: translateX(4px);
    }

    .pe-genre-num {
      display: inline-grid;
      place-items: center;
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--group-color);
      color: #fff;
      font-size: 10px;
      font-weight: 900;
    }

    .pe-genre-group--word  { --group-color: #ff8a2a; --group-light: #fff4ec; }
    .pe-genre-group--conv  { --group-color: #06b6d4; --group-light: #ecfeff; }
    .pe-genre-group--edu   { --group-color: #8b5cf6; --group-light: #f5f3ff; }
    .pe-genre-group--total { --group-color: #22c55e; --group-light: #f0fdf4; }

    /* legacy (他で使われている場合のフォールバック) */
    .pe-genre-group h3 {
      margin: 0 0 10px;
      font-size: 17px;
      font-weight: 950;
      letter-spacing: -.04em;
    }

    .pe-genre-links a {
      display: inline-flex;
      padding: 8px 10px;
      border-radius: 999px;
      background: #f8fafc;
      border: 1px solid rgba(24, 32, 58, .08);
      font-size: 12px;
      font-weight: 800;
      color: rgba(24, 32, 58, .75);
    }

    /* ---- 最終CTA リデザイン ---- */
    .pe-final-cta {
      padding: 0;
      background:
        radial-gradient(circle at 88% 8%, rgba(255, 216, 77, .45), transparent 32%),
        radial-gradient(circle at 10% 90%, rgba(34, 197, 94, .18), transparent 30%),
        linear-gradient(180deg, #fffbee 0%, #fff8df 100%);
      position: relative;
      overflow: hidden;
    }

    .pe-final-cta-visual {
      position: relative;
      margin: 32px 16px 0;
      padding: 6px;
      border-radius: 30px;
      background: linear-gradient(135deg, var(--pe-yellow) 0%, var(--pe-orange) 100%);
      box-shadow: 6px 6px 0 0 var(--pe-navy);
      line-height: 0;
    }

    .pe-final-cta-img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 24px;
    }

    .pe-final-cta-body {
      padding: 28px 22px 48px;
      text-align: center;
      position: relative;
    }

    .pe-final-cta-label {
      display: inline-block;
      margin-bottom: 14px;
      padding: 5px 13px;
      border-radius: 8px;
      background: var(--pe-orange);
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .14em;
      transform: rotate(-1deg);
      box-shadow: 3px 3px 0 var(--pe-navy);
    }

    .pe-final-cta-body h2 {
      margin: 0 0 10px;
      font-size: 28px;
      font-weight: 950;
      line-height: 1.16;
      letter-spacing: -.06em;
      color: var(--pe-navy);
    }

    .pe-final-cta-body h2 em {
      font-style: normal;
      padding: 0 .04em .04em;
      background: linear-gradient(transparent 52%, var(--pe-yellow) 52%);
    }

    .pe-final-cta-body p {
      margin: 0 0 28px;
      font-size: 13px;
      font-weight: 700;
      color: rgba(24, 32, 58, .62);
    }

    .pe-final-cta-body .button {
      display: block;
      width: calc(100% - 8px);
    }

    /* ── フッター ── */
    .pe-footer {
      position: relative;
      background: var(--pe-navy);
      padding: 0 0 40px;
      overflow: hidden;
    }

    /* ギザギザの上端 */
    .pe-footer::before {
      content: "";
      display: block;
      height: 28px;
      background:
        linear-gradient(135deg, var(--pe-navy) 25%, transparent 25%) -14px 0,
        linear-gradient(225deg, var(--pe-navy) 25%, transparent 25%) -14px 0,
        linear-gradient(315deg, var(--pe-navy) 25%, transparent 25%),
        linear-gradient( 45deg, var(--pe-navy) 25%, transparent 25%);
      background-size: 28px 28px;
      background-color: #fffbee; /* 直前セクションの背景色 */
      margin-bottom: 0;
    }

    /* レインボーストライプ */
    .pe-footer::after {
      content: "";
      position: absolute;
      top: 26px;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(90deg,
        #ff0080, #ff4400, #ffcc00, #00e898, #0088ff, #aa00ff, #ff0080);
      background-size: 200% 100%;
      animation: rainbowShift 3s linear infinite;
    }

    /* ロゴエリア */
    .pe-footer-logo {
      text-align: center;
      margin: 38px 20px 28px;
    }
    .pe-footer-logo-img {
      display: inline-block;
      width: auto;
      height: auto;
      max-height: 36px;
      max-width: 180px;
      object-fit: contain;
    }

    /* キャッチコピー */
    .pe-footer-tagline {
      text-align: center;
      font-size: 11px;
      color: rgba(255,255,255,.4);
      font-weight: 500;
      letter-spacing: .08em;
      margin: -18px 20px 24px;
    }

    /* 区切り線 */
    .pe-footer-divider {
      height: 1px;
      background: linear-gradient(90deg,
        transparent, rgba(255,216,77,.4) 30%, rgba(255,216,77,.4) 70%, transparent);
      margin: 0 20px 24px;
    }

    /* メニューリスト：カラフルピルタグ */
    .pe-footer-list {
      list-style: none;
      margin: 0 20px 8px;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }
    .pe-footer-list li a {
      display: inline-block;
      padding: 6px 13px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
      border: 2px solid rgba(255,255,255,.18);
      color: rgba(255,255,255,.78);
      background: rgba(255,255,255,.07);
      transition: background .15s, color .15s, border-color .15s, transform .1s;
      white-space: nowrap;
    }
    .pe-footer-list li:nth-child(4n+1) a { border-color: rgba(255,216,77,.4);  color: #ffd84d; }
    .pe-footer-list li:nth-child(4n+2) a { border-color: rgba(255,121,168,.4); color: #ff79a8; }
    .pe-footer-list li:nth-child(4n+3) a { border-color: rgba(62,207,207,.4);  color: #3ecfcf; }
    .pe-footer-list li:nth-child(4n+4) a { border-color: rgba(255,138,42,.4);  color: #ff8a2a; }
    .pe-footer-list li a:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,.14);
    }

    /* コピーライト */
    .pe-footer-copy {
      margin: 28px 20px 0;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.08);
      text-align: center;
      font-size: 10.5px;
      color: rgba(255,255,255,.25);
      font-weight: 500;
      letter-spacing: .04em;
    }

    /* ---- WHAT IS THIS ポップリデザイン ---- */
    .pe-what-section {
      padding: 42px 18px 48px;
      background: #fffbee;
      position: relative;
      overflow: hidden;
    }

    /* ドット柄テクスチャ */
    .pe-what-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255, 138, 42, .16) 1.5px, transparent 1.5px);
      background-size: 22px 22px;
      pointer-events: none;
    }

    /* デコ：右上の大きい丸 */
    .pe-what-section::after {
      content: "";
      position: absolute;
      top: -60px;
      right: -60px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: rgba(255, 216, 77, .38);
      pointer-events: none;
    }

    .pe-what-kicker {
      position: relative;
      display: inline-block;
      margin-bottom: 12px;
      padding: 5px 12px;
      border-radius: 8px;
      background: var(--pe-orange);
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .14em;
      transform: rotate(-1deg);
    }

    .pe-what-title {
      position: relative;
      margin: 0 0 10px;
      font-size: 25px;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -.05em;
      color: var(--pe-navy);
    }

    .pe-what-title em {
      font-style: normal;
      padding: 0 .05em .04em;
      background: linear-gradient(transparent 52%, var(--pe-yellow) 52%);
    }

    .pe-what-lead {
      position: relative;
      margin: 0 0 28px;
      font-size: 13px;
      line-height: 1.75;
      color: rgba(24, 32, 58, .65);
      font-weight: 600;
    }

    /* 挿絵：グラデーション枠＋ポップシャドウ */
    .pe-what-illust {
      position: relative;
      margin: 0 4px 32px;
      padding: 6px;
      border-radius: 28px;
      background: linear-gradient(135deg, var(--pe-yellow) 0%, var(--pe-orange) 100%);
      box-shadow: 6px 6px 0 0 var(--pe-navy);
    }

    .pe-what-illust img {
      width: 100%;
      display: block;
      height: auto;
      border-radius: 22px;
    }

    /* フィーチャーグリッド */
    .pe-what-features {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .pe-what-feat {
      position: relative;
      border-radius: 22px;
      padding: 20px 20px 22px;
      background: var(--feat-bg);
      border: 2.5px solid var(--pe-navy);
      box-shadow: 5px 5px 0 0 var(--pe-navy);
      overflow: hidden;
      transition: transform .15s, box-shadow .15s;
    }

    .pe-what-feat:nth-child(1) { --feat-bg: #ffe9a0; --feat-accent: #d97706; transform: rotate(-0.6deg); }
    .pe-what-feat:nth-child(2) { --feat-bg: #b8f0d4; --feat-accent: #059669; transform: rotate(0.5deg); }
    .pe-what-feat:nth-child(3) { --feat-bg: #ffd0c2; --feat-accent: #ea580c; transform: rotate(-0.4deg); }
    .pe-what-feat:nth-child(4) { --feat-bg: #c6d9ff; --feat-accent: #3b5bdb; transform: rotate(0.6deg); }

    /* 右上の丸デコ */
    .pe-what-feat::before {
      content: "";
      position: absolute;
      top: -22px;
      right: -22px;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .4);
      pointer-events: none;
    }

    .pe-what-feat:hover {
      transform: rotate(0) translate(-2px, -3px) !important;
      box-shadow: 7px 8px 0 0 var(--pe-navy);
    }

    .pe-what-feat-num {
      display: inline-flex;
      align-items: center;
      padding: 3px 11px;
      border-radius: 999px;
      background: var(--feat-accent);
      font-family: "Rubik", sans-serif;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .1em;
      color: #fff;
      margin-bottom: 12px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    }

    .pe-what-feat h3 {
      position: relative;
      display: inline-block;
      margin: 0 0 10px;
      font-size: 18px;
      font-weight: 950;
      line-height: 1.2;
      letter-spacing: -.04em;
      color: var(--pe-navy);
    }

    /* マーカーライン */
    .pe-what-feat h3::after {
      content: "";
      position: absolute;
      bottom: 1px;
      left: 0;
      right: 0;
      height: 5px;
      border-radius: 3px;
      background: var(--feat-accent);
      opacity: .35;
    }

    .pe-what-feat p {
      margin: 0;
      font-size: 12.5px;
      line-height: 1.7;
      color: rgba(24, 32, 58, .65);
      font-weight: 600;
    }

    /* ---- CATEGORY セクション リデザイン ---- */

    /* ---- 初級クイズブロック リデザイン ---- */
    .pe-beginner-block {
      padding: 32px 18px 38px;
      background: linear-gradient(180deg, #f0fdf4 0%, #fffdf5 100%);
      border-top: none;
    }

    .pe-beginner-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 13px;
      border-radius: 999px;
      background: var(--pe-green);
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .1em;
      margin-bottom: 12px;
      box-shadow: 3px 3px 0 #18203a;
    }

    .pe-beginner-badge::before {
      content: "\2605";
      font-size: 9px;
    }

    .pe-beginner-title {
      margin: 0 0 18px;
      font-size: 21px;
      font-weight: 800;
      letter-spacing: -.05em;
      line-height: 1.2;
      color: var(--pe-navy);
    }

    .pe-beginner-cards {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 16px;
    }

    .pe-beginner-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 20px;
      background: #fff;
      border: 2.5px solid rgba(24, 32, 58, .1);
      box-shadow:
        0 4px 14px rgba(24, 32, 58, .07),
        4px 4px 0 rgba(34, 197, 94, .3);
    }

    .pe-beginner-step {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--pe-green);
      color: #fff;
      font-size: 15px;
      font-weight: 950;
      border: 2px solid #18203a;
      box-shadow: 2px 2px 0 #18203a;
    }

    .pe-beginner-card-meta {
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .08em;
      color: var(--pe-green);
      margin-bottom: 4px;
    }

    .pe-beginner-card-q {
      font-size: 14px;
      font-weight: 850;
      line-height: 1.42;
      color: var(--pe-navy);
    }

    .pe-beginner-more {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 14px 18px;
      border-radius: 999px;
      background: var(--pe-green);
      color: #fff;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: -.02em;
      border: 2.5px solid #18203a;
      box-shadow: 4px 4px 0 #18203a;
      transition: transform .15s, box-shadow .15s;
      text-decoration: none;
    }

    .pe-beginner-more::after {
      content: "\2192";
    }

    .pe-beginner-more:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 #18203a;
    }

    /* ---- 中級クイズブロック リデザイン ---- */
    .pe-middle-block {
      padding: 32px 18px 38px;
      background: linear-gradient(180deg, #eff6ff 0%, #fafcff 100%);
      border-top: none;
    }

    .pe-middle-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 13px;
      border-radius: 999px;
      background: var(--pe-blue);
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .1em;
      margin-bottom: 12px;
      box-shadow: 3px 3px 0 #18203a;
    }

    .pe-middle-badge::before {
      content: "\2605\2605";
      font-size: 9px;
      letter-spacing: .05em;
    }

    .pe-middle-title {
      margin: 0 0 18px;
      font-size: 21px;
      font-weight: 800;
      letter-spacing: -.05em;
      line-height: 1.2;
      color: var(--pe-navy);
    }

    .pe-middle-cards {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 16px;
    }

    .pe-middle-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 20px;
      background: #fff;
      border: 2.5px solid rgba(24, 32, 58, .1);
      box-shadow:
        0 4px 14px rgba(24, 32, 58, .07),
        4px 4px 0 rgba(59, 130, 246, .3);
    }

    .pe-middle-step {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--pe-blue);
      color: #fff;
      font-size: 15px;
      font-weight: 950;
      border: 2px solid #18203a;
      box-shadow: 2px 2px 0 #18203a;
    }

    .pe-middle-card-meta {
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .08em;
      color: var(--pe-blue);
      margin-bottom: 4px;
    }

    .pe-middle-card-q {
      font-size: 14px;
      font-weight: 850;
      line-height: 1.42;
      color: var(--pe-navy);
    }

    .pe-middle-more {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 14px 18px;
      border-radius: 999px;
      background: var(--pe-blue);
      color: #fff;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: -.02em;
      border: 2.5px solid #18203a;
      box-shadow: 4px 4px 0 #18203a;
      transition: transform .15s, box-shadow .15s;
      text-decoration: none;
    }

    .pe-middle-more::after { content: "\2192"; }

    .pe-middle-more:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 #18203a;
    }

    /* ---- 上級クイズブロック リデザイン ---- */
    .pe-advanced-block {
      padding: 32px 18px 38px;
      background: linear-gradient(180deg, #f5f3ff 0%, #fdfcff 100%);
      border-top: none;
    }

    .pe-advanced-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 13px;
      border-radius: 999px;
      background: #8b5cf6;
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .1em;
      margin-bottom: 12px;
      box-shadow: 3px 3px 0 #18203a;
    }

    .pe-advanced-badge::before {
      content: "\2605\2605\2605";
      font-size: 9px;
      letter-spacing: .05em;
    }

    .pe-advanced-title {
      margin: 0 0 18px;
      font-size: 21px;
      font-weight: 800;
      letter-spacing: -.05em;
      line-height: 1.2;
      color: var(--pe-navy);
    }

    .pe-advanced-cards {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 16px;
    }

    .pe-advanced-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 20px;
      background: #fff;
      border: 2.5px solid rgba(24, 32, 58, .1);
      box-shadow:
        0 4px 14px rgba(24, 32, 58, .07),
        4px 4px 0 rgba(139, 92, 246, .3);
    }

    .pe-advanced-step {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #8b5cf6;
      color: #fff;
      font-size: 15px;
      font-weight: 950;
      border: 2px solid #18203a;
      box-shadow: 2px 2px 0 #18203a;
    }

    .pe-advanced-card-meta {
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .08em;
      color: #8b5cf6;
      margin-bottom: 4px;
    }

    .pe-advanced-card-q {
      font-size: 14px;
      font-weight: 850;
      line-height: 1.42;
      color: var(--pe-navy);
    }

    .pe-advanced-more {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 14px 18px;
      border-radius: 999px;
      background: #8b5cf6;
      color: #fff;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: -.02em;
      border: 2.5px solid #18203a;
      box-shadow: 4px 4px 0 #18203a;
      transition: transform .15s, box-shadow .15s;
      text-decoration: none;
    }

    .pe-advanced-more::after { content: "\2192"; }

    .pe-advanced-more:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 #18203a;
    }

    /* ---- 難問ブロック ---- */
    .pe-expert-block {
      padding: 32px 18px 38px;
      background: linear-gradient(180deg, #fff1f2 0%, #fffbfb 100%);
      border-top: none;
      position: relative;
      overflow: hidden;
    }

    .pe-expert-block::before {
      content: "";
      position: absolute;
      top: -40px;
      right: -40px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: rgba(220, 38, 38, .07);
      pointer-events: none;
    }

    .pe-expert-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 13px;
      border-radius: 999px;
      background: #dc2626;
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .1em;
      margin-bottom: 12px;
      box-shadow: 3px 3px 0 #18203a;
    }

    .pe-expert-badge::before {
      content: "\2605\2605\2605\2605";
      font-size: 9px;
      letter-spacing: .05em;
    }

    .pe-expert-title {
      margin: 0 0 18px;
      font-size: 21px;
      font-weight: 800;
      letter-spacing: -.05em;
      line-height: 1.2;
      color: var(--pe-navy);
    }

    .pe-expert-cards {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 16px;
    }

    .pe-expert-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 20px;
      background: #fff;
      border: 2.5px solid rgba(24, 32, 58, .1);
      box-shadow:
        0 4px 14px rgba(24, 32, 58, .07),
        4px 4px 0 rgba(220, 38, 38, .28);
    }

    .pe-expert-step {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #dc2626;
      color: #fff;
      font-size: 15px;
      font-weight: 950;
      border: 2px solid #18203a;
      box-shadow: 2px 2px 0 #18203a;
    }

    .pe-expert-card-meta {
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .08em;
      color: #dc2626;
      margin-bottom: 4px;
    }

    .pe-expert-card-q {
      font-size: 14px;
      font-weight: 850;
      line-height: 1.42;
      color: var(--pe-navy);
    }

    .pe-expert-more {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 14px 18px;
      border-radius: 999px;
      background: #dc2626;
      color: #fff;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: -.02em;
      border: 2.5px solid #18203a;
      box-shadow: 4px 4px 0 #18203a;
      transition: transform .15s, box-shadow .15s;
      text-decoration: none;
    }

    .pe-expert-more::after { content: "\2192"; }

    .pe-expert-more:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 #18203a;
    }

    /* ---- PICK UP セクション リデザイン ---- */
    .pe-pickup-section {
      padding: 42px 18px 48px;
      background: #fff7df;
      position: relative;
      overflow: hidden;
    }

    .pe-pickup-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(255, 138, 42, .16) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(34, 197, 94, .10) 1.2px, transparent 1.2px);
      background-position: 0 0, 11px 11px;
      background-size: 22px 22px;
      pointer-events: none;
    }

    .pe-pickup-section::after {
      content: "";
      position: absolute;
      top: -48px;
      right: -54px;
      width: 150px;
      height: 150px;
      border-radius: 999px;
      background: rgba(255, 216, 77, .42);
      pointer-events: none;
    }

    .pe-pickup-head {
      position: relative;
      margin-bottom: 22px;
    }

    .pe-pickup-kicker {
      display: inline-block;
      margin-bottom: 12px;
      padding: 5px 12px;
      border-radius: 8px;
      background: #ff8a2a;
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .14em;
      transform: rotate(-1deg);
      box-shadow: 3px 3px 0 #18203a;
    }

    .pe-pickup-title {
      margin: 0 0 9px;
      font-size: 25px;
      line-height: 1.12;
      letter-spacing: -.04em;
      font-weight: 800;
      color: #18203a;
    }

    .pe-pickup-lead {
      margin: 0;
      font-size: 13px;
      line-height: 1.75;
      color: rgba(24, 32, 58, .65);
      font-weight: 700;
    }

    .pe-pickup-illust {
      position: relative;
      margin: 24px 4px 28px;
      padding: 6px;
      border-radius: 28px;
      background: linear-gradient(135deg, #ffd84d 0%, #ff8a2a 100%);
      box-shadow: 6px 6px 0 0 var(--pe-navy);
    }

    .pe-pickup-illust img {
      width: 100%;
      display: block;
      height: auto;
      border-radius: 22px;
    }

    .pe-pickup-section .pe-pickup-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .pe-pickup-section .pe-pickup-card {
      position: relative;
      display: grid;
      grid-template-columns: 60px 1fr;
      gap: 13px;
      align-items: center;
      padding: 14px 42px 14px 14px;
      border-radius: 24px;
      border: 3px solid #18203a;
      background: var(--pickup-bg);
      box-shadow: 5px 5px 0 #18203a;
      overflow: hidden;
      transition: transform .15s ease, box-shadow .15s ease;
    }

    .pe-pickup-section .pe-pickup-card::after {
      content: "\203A";
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .62);
      color: #18203a;
      font-size: 24px;
      line-height: 1;
      font-weight: 900;
    }

    .pe-pickup-section .pe-pickup-card::before {
      content: "";
      position: absolute;
      right: -22px;
      bottom: -28px;
      width: 82px;
      height: 82px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .32);
      pointer-events: none;
    }

    .pe-pickup-section .pe-pickup-card:hover {
      transform: translate(-2px, -3px) rotate(0deg);
      box-shadow: 7px 8px 0 #18203a;
    }

    .pe-pickup-card--word     { --pickup-bg: #ffe9a0; --pickup-accent: #ff8a2a; transform: rotate(-.45deg); }
    .pe-pickup-card--travel   { --pickup-bg: #bff0ff; --pickup-accent: #06b6d4; transform: rotate(.45deg); }
    .pe-pickup-card--business { --pickup-bg: #ffd0e0; --pickup-accent: #f472b6; transform: rotate(-.35deg); }
    .pe-pickup-card--mission  { --pickup-bg: #c9f4d6; --pickup-accent: #22c55e; transform: rotate(.35deg); }

    .pe-pickup-icon {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border-radius: 19px;
      background: #fffdf4;
      border: 3px solid #18203a;
      box-shadow: 3px 3px 0 rgba(24, 32, 58, .88);
      color: var(--pickup-accent);
      font-size: 18px;
      font-family: "Rubik", sans-serif;
      font-weight: 900;
      letter-spacing: -.04em;
      transform: rotate(-5deg);
    }

    .pe-pickup-body {
      position: relative;
      z-index: 1;
    }

    .pe-pickup-section .pe-pickup-card span {
      display: block;
      margin-bottom: 3px;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .12em;
      color: var(--pickup-accent);
    }

    .pe-pickup-section .pe-pickup-card strong {
      display: block;
      margin: 0 0 4px;
      font-size: 17px;
      line-height: 1.25;
      font-weight: 950;
      letter-spacing: -.04em;
      color: #18203a;
    }

    .pe-pickup-section .pe-pickup-card p {
      margin: 0;
      font-size: 12px;
      line-height: 1.6;
      color: rgba(24, 32, 58, .66);
      font-weight: 700;
    }

    @media (min-width: 440px) {
      .pe-feature-grid,
      .pe-category-grid,
      .pe-pickup-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ---- PATTO SLOT セクション 完成版 ---- */
    .pe-slot-section {
      position: relative;
      padding: 46px 18px 52px;
      background:
        linear-gradient(180deg, rgba(14,6,44,.82) 0%, rgba(10,4,30,.88) 100%),
        url('/images/slot_bg.jpg') center center / cover no-repeat;
      color: #fff;
      overflow: hidden;
    }
    .pe-slot-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.18) 1.4px, transparent 1.4px),
        radial-gradient(circle, rgba(255,216,77,.18) 1.2px, transparent 1.2px);
      background-position: 0 0, 12px 12px;
      background-size: 24px 24px;
      opacity: .7;
      pointer-events: none;
    }
    .pe-slot-section::after {
      content: "\2605";
      position: absolute;
      top: 22px;
      right: 22px;
      color: rgba(255,216,77,.75);
      font-size: 54px;
      font-weight: 900;
      transform: rotate(12deg);
      pointer-events: none;
    }

    .pe-slot-head {
      position: relative;
      z-index: 1;
      margin-bottom: 24px;
    }
    .pe-slot-kicker {
      display: inline-block;
      margin-bottom: 13px;
      padding: 5px 13px;
      border-radius: 9px;
      background: #ffd84d;
      color: #18203a;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .14em;
      transform: rotate(-1.5deg);
      box-shadow: 3px 3px 0 #ff8a2a;
    }
    .pe-slot-title {
      margin: 0 0 10px;
      font-size: 29px;
      line-height: 1.13;
      letter-spacing: -.06em;
      font-weight: 950;
    }
    .pe-slot-lead {
      margin: 0;
      font-size: 13px;
      line-height: 1.78;
      color: rgba(255,255,255,.75);
      font-weight: 700;
    }

    /* ── ステージ・フェース切り替え ── */
    .pe-slot-stage { position: relative; z-index: 1; }
    .pe-slot-face--hidden { display: none; }
    .pe-slot-face.face-entering {
      animation: faceIn .8s cubic-bezier(.22,1.2,.36,1) both;
    }
    @keyframes faceIn {
      from { opacity: 0; transform: scale(.93) translateY(18px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* ── スロット筐体 ── */
    .pe-slot-machine {
      position: relative;
      border-radius: 26px;
      border: 6px solid #ffd700;
      background: linear-gradient(165deg, #0e062c 0%, #1c0d50 22%, #2e1580 45%, #1c0d50 72%, #0e062c 100%);
      box-shadow:
        0 0 0 3px rgba(255,255,255,.14),
        0 0 0 6px #ff6a00,
        12px 14px 0 #04010c,
        0 0 55px rgba(255,140,0,.3),
        0 0 100px rgba(80,0,220,.2);
      overflow: visible;
      padding: 14px 14px 20px;
    }
    /* 上部レインボーストライプ（筐体内側の上端） */
    .pe-slot-machine::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 8px;
      border-radius: 30px 30px 0 0;
      background: linear-gradient(90deg,
        #ff0080, #ff4400, #ffcc00, #00ff88, #0088ff, #aa00ff, #ff0080);
      background-size: 200% 100%;
      animation: rainbowShift 2s linear infinite;
      z-index: 3;
      pointer-events: none;
    }
    @keyframes rainbowShift {
      0%   { background-position: 0% 0; }
      100% { background-position: 200% 0; }
    }
    /* サイドレバー装飾 */
    .pe-slot-machine::after {
      content: "";
      position: absolute;
      right: -20px;
      top: 38px;
      width: 16px;
      height: 95px;
      border-radius: 0 12px 12px 0;
      border: 4px solid #ffd700;
      border-left: none;
      background: linear-gradient(180deg, #ffd700 0%, #ff8a00 100%);
      box-shadow: 4px 0 0 #04010c, 0 0 14px rgba(255,180,0,.5);
    }

    /* ── マーキー（多段ランプ帯） ── */
    .pe-slot-marquee {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      padding: 10px 12px;
      border-radius: 14px 14px 10px 10px;
      background: #04010e;
      border: 3px solid rgba(255,215,0,.35);
      margin-bottom: 12px;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 0 18px rgba(255,215,0,.2);
    }
    .pe-slot-marquee-lamps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
      flex: 1;
    }
    .pe-slot-marquee-lamps span {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(255,216,77,.15);
      justify-self: center;
    }
    .pe-slot-marquee-lamps span:nth-child(1) { animation: lampOn .6s .00s ease-in-out infinite alternate; }
    .pe-slot-marquee-lamps span:nth-child(2) { animation: lampOn .6s .15s ease-in-out infinite alternate; }
    .pe-slot-marquee-lamps span:nth-child(3) { animation: lampOn .6s .30s ease-in-out infinite alternate; }
    .pe-slot-marquee-lamps span:nth-child(4) { animation: lampOn .6s .45s ease-in-out infinite alternate; }
    .pe-slot-marquee-lamps span:nth-child(5) { animation: lampOn .6s .45s ease-in-out infinite alternate; }
    .pe-slot-marquee-lamps span:nth-child(6) { animation: lampOn .6s .30s ease-in-out infinite alternate; }
    .pe-slot-marquee-lamps span:nth-child(7) { animation: lampOn .6s .15s ease-in-out infinite alternate; }
    .pe-slot-marquee-lamps span:nth-child(8) { animation: lampOn .6s .00s ease-in-out infinite alternate; }
    @keyframes lampOn {
      0%   { background: #ffd84d; box-shadow: 0 0 8px rgba(255,216,77,.95), 0 0 18px rgba(255,216,77,.55); }
      100% { background: rgba(255,216,77,.12); box-shadow: none; }
    }
    .pe-slot-marquee-title {
      flex-shrink: 0;
      text-align: center;
    }
    .pe-slot-marquee-title strong {
      display: block;
      font-family: "Rubik", sans-serif;
      font-size: 18px;
      font-weight: 900;
      color: #ffd700;
      letter-spacing: .12em;
      white-space: nowrap;
      animation: titleGlow 2s ease-in-out infinite alternate;
    }
    @keyframes titleGlow {
      0%   { text-shadow: 0 0 10px rgba(255,215,0,.9), 0 0 22px rgba(255,215,0,.55), 0 0 44px rgba(255,140,0,.35); }
      100% { text-shadow: 0 0 16px rgba(255,215,0,1),  0 0 36px rgba(255,215,0,.8),  0 0 72px rgba(255,140,0,.6), 0 0 100px rgba(255,215,0,.25); }
    }
    .pe-slot-marquee-title small {
      display: block;
      font-size: 8px;
      font-weight: 900;
      color: rgba(255,215,0,.65);
      letter-spacing: .18em;
      margin-top: 3px;
    }

    /* ── リールズームラッパー ── */
    .pe-slot-reels-wrap {
      transform-origin: 50% 50%;
      transition: transform 1.1s cubic-bezier(.22,1.2,.36,1);
    }
    .pe-slot-reels-wrap.all-locked {
      transform: scale(1.08);
    }

    /* ── リールウィンドウ ── */
    .pe-slot-window {
      position: relative;
      border-radius: 12px;
      background: #03060d;
      border: 5px solid rgba(255,215,0,.45);
      box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.05),
        inset 0 6px 22px rgba(0,0,0,.75),
        inset 0 -4px 14px rgba(0,0,0,.55),
        0 0 16px rgba(255,215,0,.18);
      overflow: hidden;
      transition: border-color .7s ease, box-shadow .7s ease;
    }
    .pe-slot-window.win-glow {
      border-color: #ffd700;
      box-shadow:
        inset 0 0 0 2px rgba(255,215,0,.15),
        inset 0 6px 22px rgba(0,0,0,.75),
        inset 0 -4px 14px rgba(0,0,0,.55),
        0 0 30px rgba(255,215,0,.55),
        0 0 60px rgba(255,140,0,.25);
    }
    /* ペイライン（縦積みレイアウトでは非表示） */
    .pe-slot-payline { display: none; }

    /* ビネット（上下フェード・スクロール感の演出） */
    .pe-slot-vignette {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(3,6,13,.88) 0%,
        transparent 22%,
        transparent 78%,
        rgba(3,6,13,.88) 100%
      );
      pointer-events: none;
      z-index: 5;
    }

    /* ── 縦1列リール ── */
    .pe-slot-reels {
      display: grid;
      grid-template-columns: 1fr;
    }
    .pe-reel {
      position: relative;
      display: grid;
      grid-template-columns: 60px 1fr;
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 14px;
      padding: 13px 14px;
      border-bottom: 2px solid #0a0f1c;
      overflow: hidden;
    }
    .pe-reel:last-child { border-bottom: none; }
    /* スキャンライン */
    .pe-reel::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(255,255,255,.022) 3px, rgba(255,255,255,.022) 4px
      );
      pointer-events: none;
      z-index: 0;
    }
    .pe-reel span {
      grid-column: 1;
      grid-row: 1 / 3;
      position: relative; z-index: 2;
      display: grid;
      place-items: center;
      height: 44px;
      border-radius: 10px;
      background: linear-gradient(135deg, #ffd700, #ff8c00);
      color: #0e062c;
      font-family: "Rubik", sans-serif;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .1em;
      box-shadow: 0 0 10px rgba(255,180,0,.5), 2px 2px 0 rgba(0,0,0,.35);
    }
    .pe-reel small {
      grid-column: 2;
      grid-row: 1;
      position: relative; z-index: 2;
      display: block;
      font-size: 11px;
      color: rgba(255,255,255,.72);
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 2px;
    }
    .pe-reel strong {
      grid-column: 2;
      grid-row: 2;
      position: relative; z-index: 2;
      display: block;
      font-size: 18px;
      font-weight: 950;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -.03em;
      white-space: nowrap;
      transform-origin: left center;
      /* ロック時のトランジション */
      transition: color .75s ease, text-shadow .75s ease, transform .85s cubic-bezier(.22,1.2,.36,1);
    }

    /* ── リールロック状態（着地後・永続） ── */
    .pe-reel.reel-locked {
      background: rgba(255,216,77,.06);
      transition: background .7s ease;
    }
    .pe-reel.reel-locked strong {
      color: #ffd84d;
      text-shadow: 0 0 20px rgba(255,216,77,.7), 0 0 40px rgba(255,216,77,.3);
      transform: scale(1.18);
    }

    /* ── コントロール部 ── */
    .pe-slot-controls {
      position: relative;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 2px solid rgba(255,255,255,.07);
    }
    .pe-slot-controls::before {
      content: "INSERT COIN";
      position: absolute;
      top: -8px; left: 50%;
      transform: translateX(-50%);
      font-size: 7px;
      font-family: "Rubik", sans-serif;
      font-weight: 900;
      letter-spacing: .2em;
      color: rgba(255,255,255,.2);
      background: #1a1a50;
      padding: 0 7px;
      white-space: nowrap;
    }
    .pe-slot-btn {
      position: relative;
      display: block;
      width: 100%;
      padding: 15px 18px;
      border-radius: 999px;
      border: 3px solid #060c18;
      background: linear-gradient(135deg, #ff8a2a 0%, #ffd84d 100%);
      color: #0b1120;
      font-size: 16px;
      font-weight: 950;
      letter-spacing: -.02em;
      box-shadow: 0 5px 0 #060c18, 0 8px 18px rgba(0,0,0,.4);
      cursor: pointer;
      transition: transform .12s, box-shadow .12s;
      overflow: hidden;
    }
    .pe-slot-btn::before {
      content: "";
      position: absolute;
      inset: 4px;
      border-radius: 999px;
      background-image: radial-gradient(rgba(255,255,255,.55) 20%, transparent 21%);
      background-size: 8px 8px;
      opacity: .35;
    }
    .pe-slot-btn span { position: relative; }
    .pe-slot-btn:active {
      transform: translateY(4px);
      box-shadow: 0 1px 0 #060c18, 0 2px 6px rgba(0,0,0,.3);
    }
    .pe-slot-btn.is-spinning-btn {
      opacity: .5;
      pointer-events: none;
      transform: translateY(4px);
      box-shadow: 0 1px 0 #060c18;
    }

    /* ── リトライボタン ── */
    .pe-slot-retry {
      display: block;
      width: 100%;
      margin-top: 12px;
      padding: 13px 18px;
      border-radius: 999px;
      border: 3px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.1);
      color: rgba(255,255,255,.85);
      font-size: 14px;
      font-weight: 950;
      letter-spacing: -.01em;
      cursor: pointer;
      box-shadow: 0 3px 0 rgba(0,0,0,.3);
      transition: transform .12s, box-shadow .12s, background .15s;
    }
    .pe-slot-retry:hover  { background: rgba(255,255,255,.18); }
    .pe-slot-retry:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }

    /* ── アニメーション ── */

    /* リール回転 */
    .pe-reel.is-spinning { animation: reelShakeDark .18s linear infinite; }
    .pe-reel.is-spinning strong { animation: reelScrollDark .22s linear infinite; }
    @keyframes reelShakeDark {
      0%, 100% { background: transparent; }
      50%      { background: rgba(255,255,255,.03); }
    }
    @keyframes reelScrollDark {
      0%   { transform: translateY(-150%); opacity: 0; filter: blur(2px); }
      30%  { transform: translateY(0);     opacity: 1; filter: blur(0); }
      72%  { transform: translateY(0);     opacity: 1; filter: blur(0); }
      100% { transform: translateY(150%);  opacity: 0; filter: blur(2px); }
    }

    /* リール着地（背景フラッシュのみ・位置ズレなし） */
    .pe-reel.reel-landed {
      animation: reelLandFlash .8s ease both;
    }
    @keyframes reelLandFlash {
      0%   { background: transparent; }
      18%  { background: rgba(255,215,0,.35); }
      50%  { background: rgba(255,215,0,.12); }
      100% { background: transparent; }
    }

    /* ペイラインウィン */
    .pe-slot-payline.payline-win {
      animation: paylineWin .18s ease-in-out infinite alternate;
    }
    @keyframes paylineWin {
      0%   { opacity: 1; filter: brightness(1); }
      100% { opacity: .7; filter: brightness(2); }
    }

    /* ランプウィン（虹色点滅） */
    .pe-slot-marquee-lamps.lamps-win span:nth-child(odd) {
      animation: lampWinA .2s ease-in-out infinite alternate !important;
    }
    .pe-slot-marquee-lamps.lamps-win span:nth-child(even) {
      animation: lampWinB .2s ease-in-out infinite alternate !important;
    }
    @keyframes lampWinA {
      0%   { background: #ff0080; box-shadow: 0 0 10px rgba(255,0,128,.95), 0 0 20px rgba(255,0,128,.5); }
      100% { background: #ffcc00; box-shadow: 0 0 10px rgba(255,200,0,.95), 0 0 20px rgba(255,200,0,.5); }
    }
    @keyframes lampWinB {
      0%   { background: #00ddff; box-shadow: 0 0 10px rgba(0,220,255,.95), 0 0 20px rgba(0,220,255,.5); }
      100% { background: #ff6600; box-shadow: 0 0 10px rgba(255,100,0,.95), 0 0 20px rgba(255,100,0,.5); }
    }

    /* ── ミッションカード（結果フェース） ── */
    /* ── ミッション結果：ファンファーレバナー ── */
    .pe-result-fanfare {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 14px;
      padding: 11px 24px;
      border-radius: 999px;
      border: 4px solid #18203a;
      background: linear-gradient(90deg,
        #ffd84d 0%, #ff9b2f 30%, #ff5e7e 55%, #ff9b2f 78%, #ffd84d 100%);
      background-size: 200% 100%;
      box-shadow: 5px 5px 0 #18203a, 0 0 22px rgba(255,180,0,.55);
      animation: fanfareShift 2s linear infinite;
      color: #18203a;
    }
    .pe-result-fanfare strong {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: .08em;
      text-shadow: 0 2px 0 rgba(255,255,255,.55);
    }
    .pe-fanfare-star {
      font-size: 20px;
      display: inline-block;
      animation: starSpin 2.4s linear infinite;
    }
    @keyframes fanfareShift {
      0%   { background-position: 0% 0; }
      100% { background-position: 200% 0; }
    }
    @keyframes starSpin {
      0%   { transform: rotate(0deg) scale(1); }
      50%  { transform: rotate(180deg) scale(1.35); }
      100% { transform: rotate(360deg) scale(1); }
    }

    /* ── ミッション結果カード ── */
    .pe-mission-card {
      position: relative;
      padding: 22px 18px 20px;
      border-radius: 28px;
      border: 4px solid #18203a;
      background:
        radial-gradient(circle at 90% 8%, rgba(255,216,77,.45), transparent 28%),
        radial-gradient(circle at 10% 90%, rgba(255,120,170,.22), transparent 28%),
        linear-gradient(180deg, #fffef8 0%, #fff3d0 100%);
      color: #18203a;
      box-shadow: 7px 7px 0 #0f172a, 0 20px 36px rgba(0,0,0,.22);
      overflow: hidden;
    }
    .pe-mission-card::before {
      content: "";
      position: absolute;
      inset: 8px;
      border: 2.5px dashed rgba(24,32,58,.13);
      border-radius: 22px;
      pointer-events: none;
    }

    /* 揃った組み合わせ：1行固定・小テキスト */
    .pe-mission-combo {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 14px;
      flex-wrap: nowrap;
      padding-bottom: 3px; /* shadow分の余白 */
    }
    .pe-combo-scene,
    .pe-combo-action,
    .pe-combo-mode {
      flex: 1 1 0;
      min-width: 0;
      padding: 3px 8px 4px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      border: 2px solid #18203a;
      box-shadow: 2px 2px 0 #18203a;
    }
    .pe-combo-scene  { background: #ffd84d; color: #18203a; }
    .pe-combo-action { background: #ff79a8; color: #fff; }
    .pe-combo-mode   { background: #3ecfcf; color: #18203a; }
    .pe-combo-x {
      flex: 0 0 auto;
      font-size: 11px;
      font-weight: 900;
      color: rgba(24,32,58,.3);
    }

    /* ミッションタイトル */
    .pe-mission-card h3 {
      position: relative;
      margin: 0 0 14px;
      padding: 12px 14px;
      border-radius: 14px;
      background: #18203a;
      color: #fff;
      font-size: 17px;
      line-height: 1.4;
      letter-spacing: -.01em;
      font-weight: 700;
      text-align: center;
    }

    /* おすすめジャンル行 */
    .pe-mission-genre-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }
    .pe-mission-genre-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      background: #18203a;
      color: #ffd84d;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      white-space: nowrap;
    }
    .pe-mission-genre-row p {
      margin: 0;
      color: #18203a;
      font-size: 13px;
      font-weight: 700;
    }

    /* CTAボタン */
    .pe-mission-btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 18px;
      border-radius: 999px;
      border: 4px solid #18203a;
      background: linear-gradient(135deg, #ff5e7e 0%, #ff8a2a 100%);
      color: #fff;
      text-align: center;
      font-size: 16px;
      font-weight: 800;
      box-shadow: 5px 5px 0 #18203a;
      transition: transform .12s, box-shadow .12s;
      text-decoration: none;
      animation: ctaPulse 2s ease-in-out infinite;
    }
    .pe-mission-btn-arrow {
      font-size: 14px;
      animation: arrowBounce 1s ease-in-out infinite;
    }
    .pe-mission-btn:active {
      transform: translate(3px, 3px);
      box-shadow: 2px 2px 0 #18203a;
      animation: none;
    }
    @keyframes ctaPulse {
      0%, 100% { box-shadow: 5px 5px 0 #18203a; }
      50%       { box-shadow: 5px 5px 0 #18203a, 0 0 24px rgba(255,94,126,.65); }
    }
    @keyframes arrowBounce {
      0%, 100% { transform: translateX(0); }
      50%       { transform: translateX(4px); }
    }

    /* ---- PATTO SLOT 見た目アップデート：ポップ抽選機版 ---- */

    .pe-slot-section {
      padding: 48px 18px 56px;
      background:
        linear-gradient(180deg, rgba(12, 8, 45, .62) 0%, rgba(10, 5, 34, .76) 100%),
        url('/images/slot_bg.jpg') center center / cover no-repeat;
    }

    .pe-slot-head {
      text-align: center;
      margin-bottom: 28px;
    }

    .pe-slot-kicker {
      background: #ffd84d;
      color: #2a163d;
      border: 3px solid #2a163d;
      box-shadow: 3px 3px 0 #2a163d;
      font-size: 11px;
      font-weight: 800;
      padding: 5px 18px;
      border-radius: 999px;
    }

    .pe-slot-title {
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1.3;
      color: #fff;
      text-shadow: 0 2px 0 rgba(0,0,0,.35);
    }

    .pe-slot-lead {
      display: inline-block;
      margin: 0 auto;
      padding: 10px 16px;
      border-radius: 16px;
      background: rgba(255,255,255,.1);
      border: 1.5px solid rgba(255,255,255,.2);
      font-size: 12.5px;
      line-height: 1.75;
      color: rgba(255,255,255,.9);
      font-weight: 500;
      text-align: left;
    }

    .pe-slot-stage {
      margin-top: 26px;
    }

    /* スロット筐体本体：グラデーションボーダー */
    .pe-slot-machine {
      position: relative;
      isolation: isolate;
      padding: 22px 15px 22px;
      border-radius: 36px;
      border: 7px solid transparent;
      background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.5), transparent 22%) padding-box,
        radial-gradient(circle at 82% 10%, rgba(255,216,77,.5), transparent 26%) padding-box,
        linear-gradient(145deg, #ff79a8 0%, #ff9b50 48%, #ffd84d 100%) padding-box,
        linear-gradient(90deg, #ff0080, #ff4400, #ffcc00, #00ff88, #0088ff, #aa00ff, #ff0080) border-box;
      background-size: 100% 100%, 100% 100%, 100% 100%, 200% 100%;
      background-position: 0 0, 0 0, 0 0, 0% 0;
      box-shadow:
        9px 10px 0 #080413,
        0 24px 46px rgba(3,6,20,.48),
        0 0 48px rgba(255,138,42,.38);
      overflow: visible;
      transform: rotate(-.35deg);
      animation: rainbowBorder 2s linear infinite;
    }
    @keyframes rainbowBorder {
      0%   { background-position: 0 0, 0 0, 0 0, 0% 0; }
      100% { background-position: 0 0, 0 0, 0 0, 200% 0; }
    }

    /* ::before 非表示（グラデーションボーダーで代替） */
    .pe-slot-machine::before { display: none; }


    /* 右レバー */
    .pe-slot-machine::after {
      content: "";
      position: absolute;
      right: -22px;
      top: 82px;
      width: 18px;
      height: 118px;
      border-radius: 0 16px 16px 0;
      border: 4px solid #2a163d;
      border-left: none;
      background: linear-gradient(180deg, #ffd84d 0%, #ff8a2a 70%, #ef476f 100%);
      box-shadow:
        4px 4px 0 #080413,
        0 0 18px rgba(255, 216, 77, .58);
      z-index: 0;
    }

    /* マーキー */
    .pe-slot-marquee {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 0 4px 16px;
      padding: 10px 10px;
      border-radius: 26px 26px 17px 17px;
      border: 4px solid #2a163d;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.24), transparent 24%),
        linear-gradient(180deg, #fff7df 0%, #ffd84d 52%, #ffb15d 100%);
      box-shadow:
        5px 5px 0 rgba(8, 4, 19, .84),
        inset 0 0 0 3px rgba(255,255,255,.28);
    }

    /* 星台座：非表示 */
    .pe-slot-marquee::before {
      display: none;
    }

    .pe-slot-marquee-lamps {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      gap: 4px;
      width: 72px;
      flex-shrink: 0;
    }

    .pe-slot-marquee-lamps span {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #fffdf4;
      border: 1px solid rgba(42, 22, 61, .25);
      box-shadow: inset 0 -1px 0 rgba(42,22,61,.18);
    }

    .pe-slot-marquee-title {
      position: relative;
      text-align: center;
      min-width: 126px;
      padding: 5px 8px 6px;
      border-radius: 17px;
      background: #2a163d;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
    }

    .pe-slot-marquee-title strong {
      display: block;
      font-family: "Rubik", sans-serif;
      font-size: 16px;
      line-height: 1;
      font-weight: 900;
      color: #fff7df;
      letter-spacing: .06em;
      white-space: nowrap;
      text-shadow:
        0 2px 0 rgba(0,0,0,.28),
        0 0 14px rgba(255,216,77,.48);
      animation: none;
    }

    .pe-slot-marquee-title small {
      display: block;
      margin-top: 4px;
      font-size: 7px;
      line-height: 1;
      font-weight: 900;
      color: #ffd84d;
      letter-spacing: .16em;
      white-space: nowrap;
    }

    /* リール窓 */
    .pe-slot-window {
      position: relative;
      z-index: 2;
      border-radius: 23px;
      background: #140b2d;
      border: 5px solid #2a163d;
      box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.08),
        inset 0 8px 24px rgba(0,0,0,.48),
        5px 5px 0 rgba(8,4,19,.78),
        0 0 20px rgba(255,216,77,.2);
      overflow: hidden;
      transition: border-color .7s ease, box-shadow .7s ease;
    }

    .pe-slot-window.win-glow {
      border-color: #ffd84d;
      box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.12),
        inset 0 8px 24px rgba(0,0,0,.48),
        5px 5px 0 rgba(8,4,19,.78),
        0 0 30px rgba(255,216,77,.75),
        0 0 60px rgba(255,138,42,.45);
    }

    /* リール全体 */
    .pe-slot-reels {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      padding: 8px;
    }

    /* ── 各リール：ベース ── */
    .pe-reel {
      position: relative;
      display: grid;
      grid-template-columns: 58px 1fr;
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 12px;
      padding: 10px 12px;
      border-radius: 22px;
      border: 3px solid #2edd9a;
      background: linear-gradient(160deg, #f0fff9 0%, #d8fff2 100%);
      box-shadow: 0 5px 0 #1aac84;
      overflow: hidden;
      transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
    }

    .pe-reel + .pe-reel { margin-top: 10px; }

    /* 光沢オーバーレイ */
    .pe-reel::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, transparent 50%);
      pointer-events: none;
      border-radius: inherit;
      z-index: 0;
    }

    /* ── AREA（1番目）：ミント ── */
    .pe-slot-reels .pe-reel:nth-child(1) {
      border-color: #2edd9a;
      background: linear-gradient(160deg, #f0fff9 0%, #d2ffe8 100%);
      box-shadow: 0 5px 0 #17a87a;
    }
    .pe-slot-reels .pe-reel:nth-child(1) > span {
      background: linear-gradient(135deg, #2edd9a, #0fc47a);
      color: #0a4a30;
      box-shadow: 2px 2px 0 #0d8a54;
    }
    .pe-slot-reels .pe-reel:nth-child(1).reel-locked {
      background: linear-gradient(160deg, #d2ffe8 0%, #2edd9a 100%);
      border-color: #0fc47a;
    }

    /* ── THEME（2番目）：ピンク ── */
    .pe-slot-reels .pe-reel:nth-child(2) {
      border-color: #ff79a8;
      background: linear-gradient(160deg, #fff0f6 0%, #ffd8e8 100%);
      box-shadow: 0 5px 0 #cc4e7a;
    }
    .pe-slot-reels .pe-reel:nth-child(2) > span {
      background: linear-gradient(135deg, #ff79a8, #ff4488);
      color: #fff;
      box-shadow: 2px 2px 0 #b82e62;
    }
    .pe-slot-reels .pe-reel:nth-child(2).reel-locked {
      background: linear-gradient(160deg, #ffd8e8 0%, #ff79a8 100%);
      border-color: #ff4488;
    }

    /* ── MODE（3番目）：ラベンダー ── */
    .pe-slot-reels .pe-reel:nth-child(3) {
      border-color: #b29dff;
      background: linear-gradient(160deg, #f5f0ff 0%, #e4d8ff 100%);
      box-shadow: 0 5px 0 #7c63d4;
    }
    .pe-slot-reels .pe-reel:nth-child(3) > span {
      background: linear-gradient(135deg, #b29dff, #8b6fff);
      color: #fff;
      box-shadow: 2px 2px 0 #5a3eaa;
    }
    .pe-slot-reels .pe-reel:nth-child(3).reel-locked {
      background: linear-gradient(160deg, #e4d8ff 0%, #b29dff 100%);
      border-color: #8b6fff;
    }

    /* ── ラベルバッジ（共通） ── */
    .pe-reel > span {
      grid-column: 1;
      grid-row: 1 / 3;
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      height: 100%;
      min-height: 44px;
      border-radius: 14px;
      font-family: "Rubik", sans-serif;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .12em;
    }

    .pe-reel small {
      grid-column: 2;
      grid-row: 1;
      position: relative;
      z-index: 2;
      display: block;
      margin-bottom: 2px;
      font-size: 10px;
      color: rgba(30,20,50,.5);
      font-weight: 900;
      letter-spacing: .02em;
    }

    .pe-reel strong {
      grid-column: 2;
      grid-row: 2;
      position: relative;
      z-index: 2;
      display: block;
      font-size: 16px;
      font-weight: 700;
      color: #1e1432;
      line-height: 1.18;
      white-space: normal;
      word-break: keep-all;
    }

    /* ── ロック時：共通（テキスト濃くして読みやすく） ── */
    .pe-reel.reel-locked strong {
      color: #1e1432;
    }

    /* コントロール部 */
    .pe-slot-controls {
      position: relative;
      z-index: 2;
      margin-top: 16px;
      padding: 15px 12px 0;
      border-top: 3px solid rgba(42,22,61,.24);
    }

    .pe-slot-controls::before {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      top: 5px;
      height: 6px;
      border-radius: 999px;
      transform: none;
      background: repeating-linear-gradient(
        90deg,
        rgba(42,22,61,.32) 0 10px,
        transparent 10px 18px
      );
    }

    /* 回すボタン */
    .pe-slot-btn {
      position: relative;
      display: block;
      width: 100%;
      padding: 16px 18px;
      border-radius: 999px;
      border: 4px solid #2a163d;
      background: linear-gradient(135deg, #22c55e 0%, #86efac 100%);
      color: #fffdf4;
      font-size: 17px;
      font-weight: 950;
      letter-spacing: -.02em;
      text-shadow: 0 2px 0 rgba(0,0,0,.25);
      box-shadow:
        0 6px 0 #080413,
        0 12px 22px rgba(0,0,0,.34);
      cursor: pointer;
      transition: transform .12s, box-shadow .12s;
      overflow: hidden;
    }

    .pe-slot-btn::before {
      content: "";
      position: absolute;
      inset: 5px;
      border-radius: 999px;
      background-image: radial-gradient(rgba(255,255,255,.55) 20%, transparent 21%);
      background-size: 8px 8px;
      opacity: .38;
    }

    .pe-slot-btn::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 7px;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.36);
    }

    .pe-slot-btn span {
      position: relative;
      z-index: 1;
    }

    .pe-slot-btn:active {
      transform: translateY(4px);
      box-shadow:
        0 2px 0 #080413,
        0 4px 8px rgba(0,0,0,.28);
    }

    .pe-slot-btn.is-spinning-btn {
      opacity: .58;
      pointer-events: none;
      transform: translateY(4px);
      box-shadow: 0 2px 0 #080413;
    }

    /* 着地フラッシュ無効化（黒くなる原因のため） */
    .pe-reel.reel-landed {
      animation: none;
    }

    /* ── テープリール viewport ── */
    .pe-reel-viewport {
      position: relative;
      height: 48px;
      overflow: hidden;
      border-radius: 10px;
      background: rgba(0,0,0,.08);
      /* 上下フェードで自然な流れ感 */
      -webkit-mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #000 22%,
        #000 78%,
        transparent 100%
      );
      mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #000 22%,
        #000 78%,
        transparent 100%
      );
    }
    .pe-reel-tape {
      display: flex;
      flex-direction: column;
      will-change: transform;
    }
    .pe-tape-item {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 6px;
      flex-shrink: 0;
    }
    .pe-tape-item strong {
      font-size: 16px;
      font-weight: 700;
      color: #2a163d;
      line-height: 1.2;
      word-break: keep-all;
    }

    /* ── 回転中：リール本体は静止（wobbleを外してtape scrollと競合させない） ── */
    .pe-reel.is-spinning {
      animation: none;
    }

    /* ロック時：テープアイテムのテキスト */
    .pe-reel.reel-locked .pe-tape-item strong {
      color: #1e1432;
      font-size: 17px;
      font-weight: 800;
    }
    /* ロック時：ビューポート背景を少し透過して背景色を見せる */
    .pe-reel.reel-locked .pe-reel-viewport {
      background: rgba(255,255,255,.45);
    }

    /* ── 追従CTAバー ── */
    .pe-sticky-cta {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%) translateY(100%);
      width: 100%;
      max-width: 520px;
      z-index: 300;
      padding: 0;
      background: none;
      overflow: hidden;
      border-top: none;
      transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease;
      opacity: 0;
    }
    .pe-sticky-cta.is-visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
    .pe-sticky-cta-inner {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px 16px;
      background:
        linear-gradient(135deg, rgba(24,32,58,.96) 0%, rgba(10,6,30,.98) 100%);
      border-top: 3px solid #ffd84d;
      box-shadow: 0 -4px 24px rgba(0,0,0,.45);
    }
    /* バー上端のレインボーライン */
    .pe-sticky-cta-inner::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg,
        #ff0080, #ff6600, #ffd84d, #00e898, #0088ff, #aa00ff, #ff0080);
      background-size: 200% 100%;
      animation: rainbowShift 2.5s linear infinite;
    }
    .pe-sticky-cta-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1;
      min-width: 0;
    }
    .pe-sticky-cta-sub {
      font-size: 10px;
      color: rgba(255,255,255,.5);
      font-weight: 600;
      letter-spacing: .05em;
      white-space: nowrap;
    }
    .pe-sticky-cta-main {
      font-size: 16px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.01em;
      white-space: nowrap;
    }
    /* ボタン：ポップな黄色スタイル */
    .pe-sticky-cta-btn {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 12px 22px;
      border-radius: 999px;
      background: #ffd84d;
      color: #18203a;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      border: 3px solid #18203a;
      box-shadow: 4px 4px 0 #18203a;
      white-space: nowrap;
      animation: stickyBtnPop 2s ease-in-out infinite;
      transition: transform .12s, box-shadow .12s;
    }
    .pe-sticky-cta-btn-icon {
      font-size: 14px;
      animation: starSpin 2.4s linear infinite;
    }
    .pe-sticky-cta-btn:active {
      transform: translate(3px, 3px);
      box-shadow: 1px 1px 0 #18203a;
      animation: none;
    }
    @keyframes stickyBtnPop {
      0%, 100% { box-shadow: 4px 4px 0 #18203a; }
      50%       { box-shadow: 4px 4px 0 #18203a, 0 0 18px rgba(255,216,77,.7); }
    }

    /* ════════════════════════════════
       フッターパーツ（footer_wrap）
       PHP・リンク・変数は変更なし
    ════════════════════════════════ */
    .footer_wrap {
      background: var(--pe-navy);
      padding: 32px 20px 40px;
      font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    }

    /* リストリセット */
    .footer_list {
      list-style: none;
      margin: 0 0 24px;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 10px;
    }

    /* 各リンク */
    .footer_list li a {
      display: block;
      padding: 9px 12px;
      border-radius: 12px;
      background: rgba(255,255,255,.07);
      border: 1.5px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.82);
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
      line-height: 1.3;
      transition: background .15s, border-color .15s;
    }
    .footer_list li a:hover {
      background: rgba(255,216,77,.15);
      border-color: rgba(255,216,77,.45);
      color: #ffd84d;
    }

    /* コピーライト */
    #footer {
      text-align: center;
      color: rgba(255,255,255,.38);
      font-size: 11px;
      font-weight: 500;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,.1);
      margin-top: 4px;
    }