:root {
      --ink: #241d35;
      --muted: #726b82;
      --plum: #713f73;
      --plum-dark: #3b2147;
      --rose: #e9a7ad;
      --cream: #fff9f1;
      --paper: #fffdf9;
      --line: rgba(64, 37, 74, .13);
      --shadow: 0 22px 60px rgba(56, 29, 67, .15);
      --radius: 28px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 8% 5%, rgba(233,167,173,.28), transparent 28rem),
        radial-gradient(circle at 94% 18%, rgba(113,63,115,.13), transparent 24rem),
        var(--cream);
      font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
      line-height: 1.75;
    }
    a { color: inherit; }
    button, input, select { font: inherit; }
    button { cursor: pointer; }

    .site-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
    .topbar { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; }
    .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--plum-dark); font-weight: 900; letter-spacing: .08em; text-decoration: none; }
    .brand-mark { width: 42px; height: 42px; display: grid; place-items: center; background: transparent; border-radius: 12px; }
    .brand-logo-img { display: block; width: 42px; height: 42px; object-fit: contain; }
    .topbar-note { color: var(--muted); font-size: 12px; }

    .hero { display: grid; grid-template-columns: 1.06fr .94fr; gap: 52px; align-items: center; min-height: 640px; padding: 48px 0 66px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--plum); font-size: 13px; font-weight: 800; letter-spacing: .1em; }
    .eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--rose); }
    h1, h2, h3, p { margin-top: 0; }
    h1 { max-width: 650px; margin-bottom: 22px; font-size: clamp(37px, 6vw, 69px); line-height: 1.16; letter-spacing: -.055em; font-weight: 900; }
    h1 em { color: var(--plum); font-style: normal; position: relative; white-space: nowrap; }
    h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 9px; z-index: -1; background: rgba(233,167,173,.55); border-radius: 100%; transform: rotate(-2deg); }
    .hero-copy { max-width: 560px; color: var(--muted); font-size: 17px; }
    .hero-copy strong { color: var(--ink); }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-top: 34px; }
    .primary-btn, .ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 999px; padding: 15px 24px; font-weight: 900; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
    .primary-btn { color: white; background: linear-gradient(110deg, var(--plum), #a54e78); box-shadow: 0 14px 28px rgba(113,63,115,.25); }
    .primary-btn:hover, .ghost-btn:hover { transform: translateY(-2px); }
    .primary-btn::after { content: "→"; font-size: 21px; line-height: 1; }
    .ghost-btn { color: var(--plum); border: 1px solid rgba(113,63,115,.23); background: rgba(255,255,255,.6); }
    .microcopy { color: var(--muted); font-size: 12px; }

    .hero-art { position: relative; min-height: 465px; display: grid; place-items: center; }
    .hero-art::before, .hero-art::after { content: ""; position: absolute; border-radius: 50%; filter: blur(1px); }
    .hero-art::before { width: 355px; height: 355px; background: linear-gradient(145deg, rgba(233,167,173,.62), rgba(255,255,255,.35)); top: 38px; right: 3%; }
    .hero-art::after { width: 115px; height: 115px; background: rgba(113,63,115,.12); bottom: 25px; left: 2%; }
    .art-card { position: relative; z-index: 1; width: min(420px, 100%); padding: 22px; border: 1px solid rgba(255,255,255,.85); border-radius: 40px; background: rgba(255,255,255,.63); box-shadow: var(--shadow); backdrop-filter: blur(12px); transform: rotate(3deg); }
    .art-window { overflow: hidden; border-radius: 26px; background: linear-gradient(160deg, #f7dad1, #e6cae0); }
    .art-window svg { display: block; width: 100%; height: auto; }
    .photo-card { position: relative; z-index: 1; width: min(500px, 100%); padding: 15px; border: 1px solid rgba(255,255,255,.9); border-radius: 40px; background: rgba(255,255,255,.7); box-shadow: var(--shadow); backdrop-filter: blur(12px); transform: rotate(2deg); }
    .hero-photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; border-radius: 28px; }
    .art-caption { display: flex; align-items: center; justify-content: space-between; padding: 15px 6px 0; font-size: 13px; font-weight: 800; }
    .art-caption span:last-child { color: var(--plum); font-size: 12px; }
    .float-tag { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; color: var(--plum-dark); border: 1px solid rgba(255,255,255,.85); border-radius: 999px; background: rgba(255,255,255,.86); box-shadow: 0 12px 30px rgba(56,29,67,.12); font-size: 12px; font-weight: 900; }
    .tag-one { top: 23px; left: 0; }
    .tag-two { right: 0; bottom: 10px; }

    .trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; margin: 0 auto 80px; border: 1px solid var(--line); border-radius: 20px; background: var(--line); box-shadow: 0 10px 30px rgba(56,29,67,.05); }
    .trust-item { padding: 18px 22px; text-align: center; background: rgba(255,255,255,.64); }
    .trust-item strong { display: block; color: var(--plum); font-size: 23px; line-height: 1.2; }
    .trust-item span { color: var(--muted); font-size: 12px; }

    .section-heading { max-width: 650px; margin: 0 auto 32px; text-align: center; }
    .section-heading h2 { margin-bottom: 10px; font-size: clamp(29px, 4vw, 44px); line-height: 1.25; letter-spacing: -.04em; }
    .section-heading p { color: var(--muted); }
    .benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 88px; }
    .benefit-card { padding: 27px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.66); }
    .benefit-icon { display: grid; width: 45px; height: 45px; margin-bottom: 18px; place-items: center; color: white; border-radius: 15px; background: var(--plum); font-size: 20px; }
    .benefit-card h3 { margin-bottom: 7px; font-size: 17px; }
    .benefit-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; }

    .advisor-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 42px; align-items: center; margin-bottom: 88px; padding: clamp(20px, 4vw, 38px); border: 1px solid var(--line); border-radius: 32px; background: rgba(255,255,255,.58); box-shadow: 0 15px 40px rgba(56,29,67,.06); }
    .advisor-photo-wrap { overflow: hidden; border-radius: 25px; background: linear-gradient(145deg, #ead9e9, #f5d7d1); }
    .advisor-photo { display: block; width: 100%; max-height: 430px; object-fit: cover; object-position: center; }
    .advisor-copy { max-width: 560px; }
    .advisor-copy h2 { margin: 9px 0 12px; font-size: clamp(27px, 4vw, 42px); line-height: 1.28; letter-spacing: -.04em; }
    .advisor-copy p { margin-bottom: 22px; color: var(--muted); font-size: 15px; }

    .quiz-wrap { position: relative; overflow: hidden; max-width: 760px; margin: 0 auto 88px; padding: clamp(22px, 5vw, 46px); border-radius: 34px; background: var(--plum-dark); color: white; box-shadow: var(--shadow); }
    .quiz-wrap::before { content: ""; position: absolute; width: 260px; height: 260px; top: -125px; right: -45px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 26px rgba(255,255,255,.04), 0 0 0 52px rgba(255,255,255,.035); }
    .quiz-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
    .quiz-kicker { color: #f5b8bd; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
    .quiz-head h2 { max-width: 520px; margin: 6px 0 0; font-size: clamp(25px, 4vw, 38px); line-height: 1.3; letter-spacing: -.04em; }
    .step-count { flex: 0 0 auto; padding: 8px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #f5d9d7; font-size: 12px; font-weight: 800; }
    .progress { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 32px; }
    .progress-segment { height: 5px; border-radius: 99px; background: rgba(255,255,255,.18); }
    .progress-segment.active { background: #f2a8ae; }
    .question-list { position: relative; display: grid; gap: 20px; }
    .question { padding: 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: rgba(255,255,255,.07); }
    .question p { margin-bottom: 14px; font-size: 15px; font-weight: 800; }
    .answer-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
    .answer-row label { position: relative; }
    .answer-row input { position: absolute; opacity: 0; pointer-events: none; }
    .answer-row > label > span { display: block; padding: 9px 8px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #f7e9e8; text-align: center; font-size: 12px; transition: .2s ease; }
    .answer-row > label > span:hover { border-color: #f2a8ae; }
    .answer-row > label > span .en { display: block; margin-top: 2px; color: inherit; font-size: .78em; font-weight: 600; line-height: 1.15; }
    .answer-row input:checked + span { color: var(--plum-dark); border-color: #f2a8ae; background: #f2a8ae; font-weight: 900; }
    .quiz-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; }
    .quiz-footer small { color: rgba(255,255,255,.62); font-size: 11px; }
    .next-btn { border: 0; border-radius: 999px; padding: 13px 22px; color: var(--plum-dark); background: #f2a8ae; font-weight: 900; }
    .next-btn:disabled { cursor: not-allowed; opacity: .45; }
    .quiz-page[hidden], .result[hidden], .quiz-entry[hidden] { display: none; }

    .result { padding: 32px 10px 5px; text-align: center; }
    .result-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; color: #ffd9d8; background: rgba(242,168,174,.14); font-size: 12px; font-weight: 900; }
    .result h3 { margin: 14px auto 9px; font-size: clamp(27px, 5vw, 45px); line-height: 1.25; }
    .result p { max-width: 540px; margin: 0 auto 23px; color: rgba(255,255,255,.75); font-size: 14px; }
    .result .primary-btn { color: var(--plum-dark); background: #f2a8ae; box-shadow: none; }
    .retry { display: block; margin: 20px auto 0; border: 0; color: rgba(255,255,255,.66); background: transparent; text-decoration: underline; font-size: 12px; }

    .reviews { margin-bottom: 92px; }
    .review-note { margin: -18px auto 25px; color: var(--muted); text-align: center; font-size: 12px; }
    .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .review-card { position: relative; padding: 25px 23px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.78); }
    .review-card::before { content: "“"; position: absolute; top: 5px; right: 19px; color: rgba(233,167,173,.8); font-family: Georgia, serif; font-size: 60px; line-height: 1; }
    .review-photo { display: block; width: min(100%, 160px); height: 118px; margin: 0 0 14px; object-fit: cover; object-position: center; border-radius: 18px; }
    .review-label { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 4px; color: var(--plum); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
    .review-label .en { display: inline; margin: 0; color: inherit; font-size: 1em; }
    .stars { color: #d78b5e; letter-spacing: .13em; font-size: 14px; }
    .review-card p { min-height: 105px; margin: 13px 0 19px; font-size: 14px; }
    .reviewer { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
    .avatar { display: grid; width: 35px; height: 35px; place-items: center; color: white; border-radius: 50%; background: linear-gradient(145deg, #c97983, var(--plum)); font-weight: 900; }

    .contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: 32px; align-items: center; margin-bottom: 80px; padding: clamp(24px, 5vw, 44px); border-radius: 32px; background: linear-gradient(135deg, #f5d7d1, #ead9e9); }
    .contact h2 { margin-bottom: 10px; font-size: clamp(26px, 4vw, 39px); line-height: 1.28; }
    .contact p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
    .contact-form { display: grid; gap: 11px; }
    .contact-form input, .contact-form select { width: 100%; border: 1px solid rgba(64,37,74,.16); border-radius: 13px; padding: 12px 14px; color: var(--ink); background: rgba(255,255,255,.78); outline: none; }
    .contact-form input:focus, .contact-form select:focus { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(113,63,115,.12); }
    .contact-form button { border: 0; border-radius: 13px; padding: 13px; color: white; background: var(--plum); font-weight: 900; }
    .form-status { min-height: 1.4em; margin: 0; color: var(--plum); font-size: 12px; }

    footer { padding: 26px 0 38px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
    .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 15px; }
    .footer-links a { text-underline-offset: 3px; }
    .disclaimer { margin-top: 18px; color: #988f9e; font-size: 10px; }

    @media (max-width: 820px) {
      .hero { grid-template-columns: 1fr; gap: 12px; padding-top: 25px; }
      .hero-art { min-height: 440px; padding-bottom: 34px; }
      .hero-art::before { width: 290px; height: 290px; right: 12%; }
      .benefit-grid, .review-grid { grid-template-columns: 1fr; }
      .advisor-section { grid-template-columns: 1fr; gap: 24px; }
      .benefit-card { padding: 23px; }
      .review-card p { min-height: 0; }
      .contact { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .site-shell { width: min(100% - 22px, 520px); }
      .topbar { padding: 17px 0; }
      .topbar-note { display: none; }
      h1 { font-size: 41px; }
      .hero-copy { font-size: 15px; }
      .hero-actions { align-items: stretch; flex-direction: column; }
      .primary-btn, .ghost-btn { width: 100%; }
      .trust-strip { grid-template-columns: 1fr; }
      .trust-item { padding: 14px; }
      .quiz-head { display: block; }
      .step-count { display: inline-block; margin-top: 15px; }
      .answer-row > label > span { font-size: 11px; }
      .quiz-footer { align-items: flex-start; flex-direction: column; }
      .next-btn { width: 100%; }
      .float-tag { font-size: 11px; }
      .tag-one { left: -8px; }
      .tag-two { right: 0; bottom: 8px; }
    }

    /* Bilingual layout helpers: Japanese is shown first, English underneath. */
    .en { display: block; margin-top: .2rem; color: var(--muted); font-size: .78em; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
    h1 .en, h2 .en, h3 .en { color: inherit; }
    h1 .en { max-width: 620px; font-size: .3em; font-weight: 700; line-height: 1.35; }
    h2 .en { font-size: .46em; font-weight: 700; line-height: 1.35; }
    h3 .en { font-size: .78em; }
    .eyebrow .en { display: inline; margin: 0; color: inherit; font-size: .78em; font-weight: 700; }
    .topbar-note .en { color: var(--muted); font-size: .9em; }
    .button-copy { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.25; }
    .primary-btn .en, .ghost-btn .en, .line-btn .en, .next-btn .en { margin: 0; color: inherit; font-size: .72em; font-weight: 700; }
    .float-tag { flex-direction: column; align-items: flex-start; gap: 0; }
    .float-tag .en { margin: 0; color: inherit; font-size: .78em; }
    .microcopy .en, .trust-item .en, .reviewer .en, .footer-links .en { font-size: .86em; }
    .quiz-intro { color: rgba(255,255,255,.74); max-width: 570px; font-size: 14px; }
    .quiz-intro .en { color: rgba(255,255,255,.62); }
    .quiz-footer small .en { color: inherit; }
    .line-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 999px; padding: 15px 24px; color: #fff; background: #06c755; box-shadow: 0 13px 26px rgba(6,199,85,.22); font-weight: 900; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
    .line-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(6,199,85,.28); }
    .contact-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
    .contact-small { margin: 0; color: var(--muted); font-size: 12px; }
    .contact-small .en { font-size: .9em; }

    .result-page-card { position: relative; overflow: hidden; max-width: 840px; margin: 48px auto 86px; padding: clamp(34px, 7vw, 78px) clamp(22px, 7vw, 76px); border-radius: 38px; color: white; text-align: center; background: linear-gradient(135deg, #3b2147 0%, #633968 55%, #713f73 100%); box-shadow: var(--shadow); }
    .result-page-card::before, .result-page-card::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; pointer-events: none; }
    .result-page-card::before { width: 370px; height: 370px; top: -220px; right: -100px; box-shadow: 0 0 0 30px rgba(255,255,255,.035), 0 0 0 60px rgba(255,255,255,.025); }
    .result-page-card::after { width: 190px; height: 190px; bottom: -135px; left: -55px; }
    .result-page-orb { position: relative; z-index: 1; display: grid; width: 70px; height: 70px; margin: 0 auto 21px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #3b2147; background: #f2a8ae; font-size: 26px; box-shadow: 0 10px 26px rgba(0,0,0,.15); }
    .result-photo { position: relative; z-index: 1; display: block; width: 180px; height: 125px; margin: 0 auto 22px; object-fit: cover; object-position: center; border: 3px solid rgba(255,255,255,.34); border-radius: 20px; box-shadow: 0 12px 28px rgba(0,0,0,.16); }
    .result-page-card > * { position: relative; z-index: 1; }
    .result-page-card .result-badge { gap: 8px; color: #ffd9d8; }
    .result-page-card .result-badge .en { display: inline; margin: 0; color: inherit; font-size: .82em; }
    .result-overline { margin: 22px 0 9px; color: rgba(255,255,255,.7); font-size: 14px; }
    .result-overline .en { color: inherit; font-size: .88em; }
    .result-page-card h1 { max-width: none; margin: 0; color: white; font-size: clamp(31px, 6vw, 57px); }
    .result-title-en { margin: 9px 0 20px; color: #f5c8c9; font-size: 17px; font-weight: 800; }
    .result-page-copy { max-width: 620px; margin: 0 auto 10px; color: rgba(255,255,255,.84); font-size: 15px; }
    .result-page-copy.en { color: rgba(255,255,255,.68); font-size: 13px; }
    .result-actions { display: flex; flex-direction: column; align-items: center; gap: 13px; width: min(100%, 320px); margin: 30px auto 0; background: transparent; }
    .line-btn-large, .result-actions .ghost-btn { width: 100%; min-width: 0; }
    .result-actions .ghost-btn { color: white; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.09); }
    .result-note { margin: 20px 0 0; color: rgba(255,255,255,.61); font-size: 11px; }
    .result-note .en { color: inherit; }
    .result-next { margin-bottom: 86px; }
    .result-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .result-step-grid article { padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.65); }
    .result-step-grid article > span { display: inline-grid; width: 34px; height: 34px; place-items: center; margin-bottom: 14px; border-radius: 12px; color: white; background: var(--plum); font-size: 12px; font-weight: 900; }
    .result-step-grid h3 { margin-bottom: 9px; font-size: 17px; }
    .result-step-grid p { margin: 0; color: var(--muted); font-size: 13px; }
    .result-step-grid p .en { font-size: .9em; }

    @media (max-width: 820px) {
      .result-step-grid { grid-template-columns: 1fr; }
      .result-step-grid article { padding: 20px; }
    }
    @media (max-width: 520px) {
      .contact-actions { align-items: stretch; }
      .line-btn { width: 100%; }
      .result-page-card { margin-top: 25px; padding-top: 38px; }
      .result-actions { align-items: stretch; flex-direction: column; }
      .result-actions .ghost-btn { width: 100%; }
    }