@media (max-width: 765px) {
    .site-header .sha-container {
        padding: 0;
    }
    .site-header .sha-nav {
        align-items: center;
    }
    .site-header .sha-nav .logo img {
        max-height: unset;
        width: 100%;
        max-width: 180px;
    }
    .site-header .sha-nav .logo {
        padding-top: 0;
        margin: 0;
        text-align: center;
        padding-left: 8px;
    }

    #content {
        padding-bottom: 0;
    }
    .site-header {
        background-color: #fff;
        position: relative;
    }

    .site-header .sha-nav .w-right .tele-number-top {
        font-size: 15px;
        font-weight: 700;
        padding-left: 4px;
        color: #FF6E35;
        -webkit-text-stroke-width: 0;
        margin-bottom: 0;
        letter-spacing: 0;
        font-family: 'Hiragino';
    }
    .site-header .sha-nav .w-right {
        padding-right: 3px;
        min-width: 170px;
        margin-left: 5px;
    }
    .sha-right.header-nav-li {
        border-right-width: 0;
        padding-left: 0;
        padding-right: 0;
        width: auto;
        padding-top: 0;
    }
    .site-header .sha-nav .w-right .working-time-top {
        font-size: 13px;
        text-align: left;
        font-weight: 500;
        line-height: 1;
        padding-left: 33px;
        color: #FF6E35;
        margin-right: 0;
        margin-top: -2px;
        font-family: 'Hiragino';
    }

    .header-nav-li-ele > a {
        display: flex;
        align-items: center;
        margin-bottom: 2px;
    }

    .site-header .sha-nav .w-right .icon-hd-top {
        margin-bottom: 0;
    }
    .site-header .sha-nav .w-right .icon-hd-top {
        display: block;
        margin: 0 auto;
        height: 21px;
    }

    .banner img {
        width: 100%;
        height: auto;
    }

    .sha-container.banner-sha-container {
        max-width: none;
        padding: 0;
    }

    /* Flow layout + responsive overrides (loads after style.css) */
    /* Pharma LP — layout-first (flex/grid). Decorative hero layer uses one absolute wrapper only. */
    :root {
        --color-yellow: #ffd341;
        --color-yellow-deep: #ffd240;
        --color-yellow-soft: #fff5c5;
        --color-orange: #ff6d35;
        --color-orange-dark: #fe8238;
        --color-orange-mid: #ed8617;
        --color-green: #21c65b;
        --color-text: #303030;
        --color-text-muted: #494949;
        --color-gray: #EBEBEB;
        --color-white: #ffffff;
        --color-badge: #ffe66e;
        --color-border-warm: #ffb497;
        --radius-sm: 16px;
        --radius-md: 24px;
        --font-sans: "Noto Sans JP", sans-serif;
        --font-num: "Roboto", var(--font-sans);
        --space-page: 32px;
        --content-max: 1200px;
    }

    .skip-link {
        position: absolute;
        left: -9999px;
        top: 0;
        width: 1px;
        height: 1px;
        overflow: hidden;
        z-index: 10000;
    }

    .skip-link:focus {
        position: fixed;
        left: 16px;
        top: 16px;
        width: auto;
        height: auto;
        padding: 12px 16px;
        background: var(--color-green);
        color: var(--color-white);
        font-weight: 700;
        border-radius: 8px;
        overflow: visible;
    }
    img.emotion-sp-title.sp {
        max-width: 225px;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 10px;
    }
    body {
        color: var(--color-text);
        line-height: 1.5;
    }

    .site > main {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    section.top-btns {
        padding: 25px 0 42px 0;
    }
    section.top-btns.top-btns2 {
        padding: 36px 0 52px 0;
    }

    .actions-btns {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 45px;
    }

    .actions-btns > div {
        width: auto;
        flex: 0 0 auto;
        text-align: center;
    }

    .actions-btns > .left p,
    .actions-btns > .right p {
        margin: 0 0 5px;
        color: #262626;
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: 10%;
        font-family: Hiragino;
    }
    .left-primary-body,
    .right-warning-body {
        width: 315px;
        height: 70px;
        font-size: 20px;
        font-weight: bold;
        line-height: 1;
        letter-spacing: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        position: relative;
        padding: 0;
        border: none;
        border-radius: 0;
        background: none;
    }

    .left-primary-body *, .right-warning-body * {
        background-color: transparent;
    }

    .left-primary-body span, .right-warning-body span {
        padding-bottom: 2px;
    }

    .stat-card {
        flex: 1 1 240px;
        max-width: 320px;
        margin: 0;
        padding: 24px 20px;
        background: var(--color-white);
        border-radius: var(--radius-sm);
        border: 2px solid var(--color-border-warm);
        box-shadow: 0 2px 8px rgba(48, 48, 48, 0.06);
        text-align: center;
    }

    .stat-card__value {
        margin: 0 0 8px;
        font-family: var(--font-num);
        font-weight: 700;
        color: var(--color-orange);
        line-height: 1.2;
    }

    .stat-card__num {
        font-size: 40px;
        letter-spacing: 0.04em;
    }

    /* ----- Quiz ----- */
    .quiz {
        background: var(--color-yellow-deep);
        padding: 35px 12px 33px 13px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .quiz__audience {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .quiz__audience-text {
        font-weight: 700;
        font-size: 18px;
        color: var(--color-orange);
        letter-spacing: 0.1em;
        paint-order: stroke fill;
        margin-bottom: 10px;
    }

    .quiz__audience-text::before {
        content: "\\";
        display: inline-block;
        margin-right: 15px;
        line-height: 1;
        transform: rotate(-10deg);
        -webkit-text-stroke: 1px #ff804f;
    }

    .quiz__audience-text::after {
        content: "/";
        display: inline-block;
        margin-left: 15px;
        line-height: 1;
        transform: rotate(10deg);
        -webkit-text-stroke: 1px #ff804f;
    }

    .quiz__card {
        width: 100%;
        max-width: 586px;
        background: var(--color-white);
        border-radius: 18px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .quiz__card-head {
        background: var(--color-orange-dark);
        padding: 11px 0;
        text-align: center;
    }

    .quiz__card-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #fefffe;
        letter-spacing: 0.1em;
    }

    .quiz__body {
        padding: 18px 19px 34px 20px;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .quiz__question {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        line-height: 1;
        letter-spacing: 0.06em;
        margin-bottom: 3px;
    }

    .quiz__q-label {
        margin-right: 4px;
    }

    .quiz__hint {
        margin: 0;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        color: var(--color-text);
        margin-bottom: 14px;
        line-height: 18px;
    }

    .quiz__options {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .quiz__option {
        width: 100%;
        padding: 0;
        border: none;
        border-radius: 8px;
        background: #EBEBEB;
        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        color: var(--color-text);
        text-align: center;
        cursor: pointer;
        line-height: 45px;
        transition: background 0.15s ease, transform 0.1s ease;
    }

    .quiz__option:hover {
        background: #d9d9d9;
        color: #303030;
    }

    .quiz__option:active {
        transform: scale(0.99);
    }

    /* Disabled: inherit uses parent, not resting button styles; repeat base tokens for :hover/:focus/:active. */
    .quiz__option:disabled,
    .quiz__option:disabled:hover,
    .quiz__option:disabled:focus,
    .quiz__option:disabled:focus-visible,
    .quiz__option:disabled:active {
        background: var(--color-gray);
        color: var(--color-text);
        transform: none;
        cursor: not-allowed;
    }

    .quiz__progress {
        display: flex;
        justify-content: center;
        gap: 32px;
        margin-top: 15px;
    }

    .quiz__dot {
        width: 9px;
        height: 9px;
        border-radius: 55px;
        background: var(--color-gray);
        margin-bottom: 0;
    }

    .quiz__dot--navigable {
        cursor: pointer;
    }

    .quiz__dot--on {
        background: var(--color-yellow);
    }

    .quiz__next {
        align-self: center;
        min-width: 143px;
        padding: 7px 0;
        border: none;
        border-radius: 9px;
        background: var(--color-gray);
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        margin-top: 19px;
    }

    .quiz__next--inactive:hover,
    .quiz__next--inactive:focus,
    .quiz__next--inactive:focus-visible,
    .quiz__next--inactive:active {
        align-self: center;
        min-width: 143px;
        padding: 7px 0;
        border: none;
        border-radius: 9px;
        background: var(--color-gray);
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        margin-top: 19px;
        height: unset;
        line-height: unset;
    }

    .quiz__next:hover {
        background: #d9d9d9;
        color: #303030;
    }


    .quiz__next[aria-invalid="true"] {
        /*outline: 2px solid var(--color-orange);*/
        /*outline-offset: 2px;*/
    }

    .quiz__options[aria-invalid="true"] {
        /*border-radius: var(--radius-sm);*/
        /*outline: 2px dashed var(--color-orange);*/
        /*outline-offset: 4px;*/
    }

    .quiz__slides {
        position: relative;
    }

    .quiz__slide[hidden] {
        display: none !important;
    }

    .quiz__option--selected {
        background: #FE8238;
        color: #fff;
    }

    .quiz__option--selected:hover,
    .quiz__option--selected:focus {
        background: #FE8238;
        color: #fff;
    }

    .quiz--result {
        background: #FFF5C5;
        padding: 21px 0 0 0;
    }

    #diagnosis-quiz.quiz--result .quiz__audience {
        display: none;
    }

    /* ----- Diagnosis result ----- */
    .quiz-result-group[hidden] {
        display: none !important;
    }

    .quiz-result-group:not([hidden]) {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 13px;
        padding-right: 12px;
        padding-bottom: 3px;
    }

    .quiz-result__eyebrow {
        margin: 0;
        margin-bottom: -0.5rem;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text);
        text-align: center;
        line-height: 28px;
        letter-spacing: 4%;
        font-family: Hiragino;
        position: relative;
        z-index: 1;
    }

    article.quiz-result.result-card[hidden] {
        display: none !important;
    }

    article.quiz-result.result-card:not([hidden]) {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .quiz-result__lead {
        text-align: center;
    }

    .quiz-result__accent {
        color: #e85a2a;
    }

    .result-card__summary {
        margin: 0.5em 0 0;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.55;
        text-align: center;
        color: var(--color-text-muted);
    }

    .quiz-result__footer {
        margin-top: 4px;
    }

    .result-card__inner {
        width: 100%;
        box-sizing: border-box;
        padding: 36px 0 9px 0;
        background: var(--color-white);
        border-radius: 14px;
        position: relative;
        margin-top: 30px;
    }

    .result-card__pill {
        margin: 0 auto;
        position: absolute;
        top: -22px;
        margin-bottom: -18px;
        padding: 0 0;
        height: 40px;
        border-radius: 13.8px;
        background: #ffd54f;
        font-size: 22px;
        font-weight: 700;
        color: var(--color-text);
        text-align: center;
        line-height: 40px;
        width: max-content;
        left: 50%;
        transform: translate(-50%, 0);
        letter-spacing: 10%;
        min-width: 297px;
    }
    .result-card__pill span{
        font-size: 16px;
        margin-bottom: 0;
        letter-spacing: 16%;
        font-weight: 700
    }

    .result-card__lead {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        line-height: 21px;
        color: var(--color-text);
        letter-spacing: 8%;
    }

    .result-card__accent {
        color: #FF6E35;
        font-weight: 700;
        font-size: 14px;
    }

    .result-card__row {
        display: flex;
        flex-wrap: wrap;
        margin-top: 28px;
    }

    .result-card__row>div {
        width: 100%;
    }

    .result-card__points {
        background: #fef7e0;
        border-radius: 16px;
        padding: 28px 20px 25px 21px;
        position: relative;
        width: 100%;
        margin-left: 18px;
        margin-right: 17px;
    }

    .result-card__points-cap {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        border-radius: 14px;
        background: #ffd54f;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 16%;
        color: var(--color-text);
        width: 82px;
        height: 26px;
        line-height: 28px;
        text-align: center;
        font-family: 'Roboto';
    }


    .result-card__points-item {
        display: flex;
        align-items: center;
        gap: 8.5px;
        font-size: 12.65px;
        font-weight: 700;
        line-height: 1;
        color: var(--color-text);
        letter-spacing: 4%;
        font-family: 'Noto Sans JP';
    }


    #diagnosis-result-one_off_combination .result-card__points {
        width: 100%;
        padding: 25px 15px 15px 51px;
    }
    #diagnosis-result-one_off_combination .result-card__row {
    }
    #diagnosis-result-one_off_combination .result-card__inner {

    }
    #diagnosis-result-one_off_repeat .result-card__pill{
        letter-spacing: 7%;
    }

    #diagnosis-result-one_off_repeat .result-card__points{
        padding-left: 49px;
    }
    #diagnosis-result-one_off_repeat .result-card__inner{

    }

    #diagnosis-result-one_off_repeat .result-card__persona {
        padding-left: 23px;
        padding-right: 12px;
    }


    #diagnosis-result-one_off_short_no_overtime .result-card__pill {
        width: 297px;
    }

    #diagnosis-result-one_off_short_no_overtime .result-card__points {
        padding-left: 51px;
    }
    #diagnosis-result-one_off_short_no_overtime .result-card__persona {
        padding-left: 24px;
    }

    #diagnosis-result-one_off_short_no_overtime .result-card__pill span.another-letterspacing {
        letter-spacing: -5px;
        font-size: unset;
        margin-left: -8px;
    }
    #diagnosis-result-one_off_remote .result-card__pill{
        width: 297px;
        letter-spacing: 14%;
    }
    #diagnosis-result-one_off_remote .result-card__inner{

    }

    #diagnosis-result-one_off_urgent .result-card__pill{
        width: 297px;
        letter-spacing: 16%;
    }
    #diagnosis-result-one_off_urgent .result-card__persona{
        padding-left: 18px;
    }

    #diagnosis-result-one_off_urgent .result-card__row{
    }

    #diagnosis-result-regular_short_term .result-card__row{
    }

    #diagnosis-result-regular_short_term .result-card__pill{
        width: 333px;
        letter-spacing: 13%;
    }
    #diagnosis-result-regular_short_term .result-card__inner{

    }

    #diagnosis-result-regular_long_term .result-card__row{
    }

    #diagnosis-result-regular_long_term .result-card__pill{
        letter-spacing: 16%;
        width: 333px;

    }
    #diagnosis-result-regular_long_term .result-card__inner{

    }
    #diagnosis-result-regular_long_term .result-card__points{

    }


    #diagnosis-result-regular_short_no_overtime .result-card__row{
    }

    #diagnosis-result-regular_short_no_overtime .result-card__inner{

    }
    #diagnosis-result-regular_short_no_overtime .result-card__points{
        padding-left: 17px;
        padding-right: 7px;
    }
    #diagnosis-result-regular_short_no_overtime .result-card__pill span.another-letterspacing {
        letter-spacing: -5px;
        font-size: unset;
        margin-left: -8px;
    }
    #diagnosis-result-regular_short_no_overtime .result-card__points-item {
        letter-spacing: 4%;
    }



    #diagnosis-result-regular_short_no_overtime .result-card__row{
    }

    #diagnosis-result-regular_short_no_overtime .result-card__pill{
        width: 350px;
        letter-spacing: 0%;
    }
    #diagnosis-result-regular_remote .result-card__pill{
        width: 350px;
        letter-spacing: 10%;
    }
    #diagnosis-result-regular_short_no_overtime .result-card__inner{

    }
    #diagnosis-result-regular_short_no_overtime .result-card__points{
        padding-left: 17px;
        padding-right: 7px;
    }
    #diagnosis-result-regular_short_no_overtime .result-card__points-item {
        letter-spacing: 4%;
    }


    .result-card__points-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 9.7px;
    }

    .result-card__points-item img {
        width: 11.6px;
        height: 11.5px;
    }


    .result-card__persona {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        min-width: 0;
        margin-top: 5px;
        padding: 0 12px 0 12px;
    }

    .result-card__speech {
        margin: 0;
        padding: 12px 14px;
        background: #fff9c4;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--color-text);
        position: relative;
    }

    .result-card__figure {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 12px;
    }

    .result-card__illu {
        width: 100%;
        height: auto;
        flex-shrink: 0;
    }

    .result-card__bio {
        flex: 1 1 160px;
        min-width: 0;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(48, 48, 48, 0.08);
    }

    .result-card__bio-cap {
        margin: 0;
        padding: 8px 12px;
        background: #ffd54f;
        font-size: 13px;
        font-weight: 800;
        color: var(--color-text);
    }

    .result-card__bio-text {
        margin: 0;
        padding: 10px 12px;
        background: #fef7e0;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.45;
        color: var(--color-text);
    }

    .result-card__cta-line {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        color: var(--color-text);
        line-height: 32px;
        margin-top: 7px;
        margin-bottom: 0px;
        letter-spacing: 4%;
    }

    .result-card__cta-slash {
        color: var(--color-text-muted);
        font-weight: 600;
    }

    .result-card__cta-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: unset;
        padding: 1px 14px;
        border-radius: 9px;
        background: #21C65B;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        text-align: center;
        line-height: 1;
        box-shadow: 0 4px 14px rgba(40, 199, 111, 0.35);
        transition: filter 0.15s ease, transform 0.1s ease;
        letter-spacing: 6%;
        height: 46px;
    }

    .result-card__cta-btn:hover {
        filter: brightness(1.05);
        color: #fff;
        text-decoration: none;
    }

    .result-card__cta-btn:active {
        transform: scale(0.99);
    }

    /* ----- Merits ----- */
    .merits {
        background: var(--color-yellow-soft);
        padding: 51px 26px 51px 29px;
    }
    .merits__title {
        margin: 0 auto 60px;
        max-width: 320px;
        text-align: center;
        font-size: 26px;
        font-weight: 700;
        line-height: 30px;
        color: var(--color-text);
        letter-spacing: 8%;
    }
    .merits__title span {
        letter-spacing: 16%;
        margin-bottom: 0;
    }
    .merits__list {
        list-style: none;
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 50px;
        max-width: 450px;
        width: 100%;
    }

    .merit-card {
        margin: 0;
        padding: 38px 0 0 0;
        background: var(--color-white);
        border-radius: var(--radius-sm);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        box-shadow: 0 2px 12px rgba(48, 48, 48, 0.06);
    }

    .merit-card__badge {
        margin-top: -60px;
        margin-bottom: 15px;
        padding: 2px 19px;
        background: var(--color-badge);
        border-radius: 23px;
        font-family: 'Roboto';
        font-weight: 700;
        font-size: 28px;
        letter-spacing: 8%;
        color: var(--color-text);
    }

    .merit-card__text {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.45;
    }

    .merit-card__text {
        font-size: 18px;
    }

    .merit-card__img {
        width: 100%;
        height: auto;
        margin-top: auto;
    }
    .merit-card__img.point-1{
        max-width: 219px;
        margin-bottom: -2px;
        margin-top: 14px;
    }

    .merit-card__img.point-2{
        max-width: 285px;
        margin-bottom: 0;
        margin-top: 30px;
    }

    .merit-card__img.point-3{
        max-width: 193px;
    }

    /* ----- Voices ----- */
    .voices {
        background: var(--color-gray);
        padding: 45px 26px 44px 29px;
    }

    .voices__title {
        margin: 0 auto 42px;
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 8%;
        line-height: 30px;
    }

    .voices__grid {
        max-width: 450px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 34px;
        align-items: stretch;
        width: 100%;
    }

    .voice-card {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .voice-card__avatar {
        width: 102px;
        height: 102px;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: -60px;
        z-index: 1;
        flex-shrink: 0;
    }
    .voice-card__avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .voice-card__quote {
        margin: 0;
        width: 100%;
        padding: 63px 20px 33px;
        background: var(--color-white);
        border-radius: var(--radius-sm);
        box-shadow: 0 3px 5px rgba(48, 48, 48, 0.4);
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .voice-card__quote > p:not(.voice-card__meta) {
        flex: 1 1 auto;
    }

    .voice-card__quote p {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 22px;
        letter-spacing: 0;
    }

    .voice-card__quote p.voice-card__meta {
        font-size: 16px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0;
        margin-bottom: 11px;
        text-align: center;
        font-family: Hiragino, sans-serif;
    }

    /* ----- CTA pair ----- */
    .cta-pair {
        display: grid;
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 40px 0;
    }

    @media (min-width: 900px) {
        .cta-pair {
            grid-template-columns: 1fr 1fr;
            align-items: start;
        }
    }

    .cta-pair__col {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .cta-block {
        width: 100%;
        max-width: 382px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .cta-block__line {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--color-text);
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 320px;
        height: 60px;
        padding: 0;
        border-radius: var(--radius-sm);
        font-family: inherit;
        font-size: 22px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.08em;
        cursor: pointer;
        border: none;
        box-sizing: border-box;
        transition: filter 0.15s ease, transform 0.1s ease;
    }

    a.btn {
        text-decoration: none;
    }

    .btn:focus-visible {
        outline: 3px solid #4a90e2;
        outline-offset: 2px;
    }

    .btn--line {
        background: var(--color-green);
        color: var(--color-white);
        background: var(--color-green);
        color: var(--color-white);
        border-radius: 16px;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 6%;
    }

    .btn--line:hover {
        filter: brightness(1.05);
        color: #fff;
    }

    .btn--diagnosis {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        color: var(--color-white);
        gap: 20px;
        padding-inline: 28px 20px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .btn--diagnosis-a {
    }

    .btn--diagnosis-b {
    }

    .btn--diagnosis::after {
        content: "";
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        background-color: var(--color-white);
        background-size: 19px 21px;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50%;
    }

    .btn--diagnosis-b::after {
    }

    .btn--faq {
        margin-top: 0px;
        margin-bottom: 0;
    }

    /* ----- FAQ ----- */
    .faq {
        background: #eaeaea;
        padding: 41px 17px 37px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0px;
    }

    .faq__heading {
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        text-align: center;
    }

    .faq__heading-en {
        font-family: var(--font-num);
        font-weight: 800;
        font-size: 32px;
        color: #fdc713;
        letter-spacing: 8%;
        margin-bottom: 8px;
        line-height: 1;
        -webkit-text-stroke: 0.4px;
    }

    .faq__heading-ja {
        font-size: 24px;
        font-weight: 700;
        color: var(--color-text);
        margin-bottom: 38px;
    }

    .faq-item {
        width: 100%;
        border-radius: var(--radius-sm);
        overflow: hidden;
        background: var(--color-white);
        margin-bottom: 24px;
        max-width: 529px;
    }

    .faq-item__q {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 9px 18px 14px;
        background: var(--color-yellow);
        font-weight: 700;
        font-size: 22px;
        line-height: 1.45;
    }
    .faq-item__q span.question-text{
        margin-bottom: 0;
        font-size: 16px;
        line-height: 21px;
        font-weight: 700;
    }

    .faq-item__q:focus-visible {
        outline: 3px solid #4a90e2;
        outline-offset: 2px;
    }

    .faq-item__q::-webkit-details-marker {
        display: none;
    }

    .faq-item__q-mark {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--color-white);
        color: var(--color-text-muted);
        font-size: 30px;
        font-weight: 700;
        display: grid;
        place-items: center;
        line-height: 1;
        margin-bottom: 0;
        font-family: 'Hiragino';
    }

    .faq-item__a {
        display: flex;
        gap: 16px;
        padding: 30px 20px;
        align-items: center;
    }

    .faq-item__a-mark {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--color-yellow);
        color: var(--color-white);
        font-size: 30px;
        font-weight: 700;
        display: grid;
        place-items: center;
        line-height: 1;
        margin-bottom: 0;
        font-family: 'Hiragino';
    }

    .faq-item__a p {
        margin: 0;
        flex: 1;
        font-size: 16px;
        font-weight: 500;
        line-height: 19px;
    }

    /* ----- Footer ----- */
    .site-footer {
        margin-top: auto;
        margin-inline: calc(-1 * var(--space-page));
        padding-bottom: 0;
    }

    .site-footer__img {
        display: block;
        width: 100%;
        max-width: var(--content-max);
        margin: 0 auto;
        height: auto;
    }
    footer {
        padding: 65px 0 0;
    }
    footer .footer-bg-bottom {
        border-bottom: 20px solid #ffdc3c;
    }

    .sp-inline {
        display: inline !important;
    }
    .top-btns2 .actions-btns {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 19px;
    }
    .top-btns2 .left-primary-body, .top-btns2 .right-warning-body {
        width: 320px;
        height: 60px;
    }
    .footer-more {
        width: 292px;
        margin: 0 auto;
    }
    .footer-more div {
        font-size: 13px;
        font-weight: 500;
        line-height: 15px;
    }
    footer .footer-container {
        width: 100%;
        padding: 33px 10px 0;
        margin: 0 auto;
    }
    footer {
        padding: 35px 0 0;
    }
    .pdx-20 {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 396px) {
    .result-card__points {
        padding: 28px 5px 25px 15px;
    }
    h3.quiz__question.quiz__question__2 {
        letter-spacing: 0;
    }
    h3.quiz__question{
        font-size: 17px;
    }
}

@media (max-width: 374px) {
    .result-card__points {
        padding: 28px 5px 25px 10px;
        margin-left: 10px;
        margin-right: 10px;
    }
}