:root {
    /* Colors */
    /* 治療家タイプ */
    --type-1: #f5a623;
    --type-2: #5ab5a3;
    --type-3: #4a90e2;
    --type-4: #aac654;
    --type-5: #e57373;
    --type-6: #9f8ddc;

    /* 企業タイプ */
    --type-a: #F5A623;
    --type-b: #5ab5a3;
    --type-c: #4a90e2;
    --type-d: #aac654;
    --type-e: #e57373;
    --type-f: #9f8ddc;

    --type-a-sub: #FFF5E5;
    --type-b-sub: #E6FFFA;
    --type-c-sub: #E5F1FF;
    --type-d-sub: #FAFFEA;
    --type-e-sub: #FFF2F2;
    --type-f-sub: #EFEAFF;
}

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

main {
    max-width: 414px;
    margin: auto;
    padding-bottom: 100px;
    position: relative;
    min-height: calc(100vh - 60px);

    &.bg-illust {
        background-image: url(https://kurohon.jp/gakusei/wp-content/themes/kurohon/assets/images/aptitude_diagnosis/therapist-bg.png);
        background-size: contain;
    }

    &.bg-company {
        background-image: url(https://kurohon.jp/gakusei/wp-content/themes/kurohon/assets/images/aptitude_diagnosis/company-bg.png);
        background-size: contain;
    }


    &.bg-yellow {
        background-color: #FEDA59;
    }

    &.bg-blue {
        background-color: #EAF4FA;
    }

}

.mv {
    max-width: 310px;
    margin: auto;
    padding-top: 80px;
}

.guide {
    display: flex;
    flex-direction: column;
    gap: 26px;
    align-items: center;
    justify-content: flex-start;
    width: 286px;
    position: relative;
    margin: 20px auto;
}

.guide-supervision {
    color: #333333;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    position: relative;
}

.guide-supervision span {
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 5px;
}

.guide-btn {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.guide-diagnosis {
    flex-shrink: 0;
    width: 170px;
    height: 45.5px;
    position: static;
}

.guide-diagnosis-time {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
    justify-content: center;
    width: 137px;
    position: absolute;
    left: 91px;
    top: 10px;
}

.guide-diagnosis-time-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 2px 5px 2px 5px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    height: 25px;
    position: relative;
}

.guide-diagnosis-time-text {
    color: #333333;
    text-align: left;
    font-family: "NotoSansJp-Medium", sans-serif;
    font-size: 14px;
    font-weight: 500;
    position: relative;
}

.guide-diagnosis-time-polygon {
    flex-shrink: 0;
    width: 12.12px;
    height: 10.5px;
    position: relative;
    overflow: visible;
}

.guide-diagnosis-icon {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 64.7%;
    left: 20.28%;
    bottom: 64.65%;
    top: 0%;
    overflow: visible;
}

.guide-start {
    background: #fc1743;
    border: none;
    border-radius: 33.5px;
    padding: 24px 63px 24px 63px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    height: 67px;
    position: relative;
    box-shadow: 3px 3px 0px 0px rgba(114, 100, 0, 0.25);
}

.is-company .guide-start {
    background: #2980B9;
    box-shadow: 3px 3px 0px 0px rgba(0, 85, 114, 0.25);
}

.guide-start-text {
    color: #ffffff;
    text-align: left;
    font-size: 26px;
    font-weight: 600;
    position: relative;
}

.guide-start-arrow {
    flex-shrink: 0;
    width: 7px;
    height: 14px;
    position: absolute;
    left: 234.5px;
    top: 26.5px;
    overflow: visible;
}

.status {
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: center;

    .status-wrapper {
        display: flex;
        background-color: #F2F2F2;
        width: 278px;
        height: 10px;
        margin: auto;
        border-radius: 50px;
        overflow: hidden;

        .status-bar {

            flex: 1;

            &.--active {
                background-color: #333333;
            }
        }
    }

}

.question {

    max-width: 315px;
    margin: auto;

    .question-header,
    .question-header * {
        box-sizing: border-box;
    }

    .question-header {
        background: #333333;
        border-radius: 8px 8px 0px 0px;
        padding: 2px 10px 2px 10px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        width: 159px;
        height: 31px;
        position: relative;
        bottom: -1px;
        left: -2px;
    }

	.contents {
    	border-radius: 0 8px 8px 8px;
	}

    .question-header-text {
        color: #ffffff;
        text-align: left;
        position: relative;
    }

    .question-header-text-span {
		color: #fff;
		font-size: 16.8px;
        line-height: 26px;
        font-weight: 600;
    }

    .question-header-text-span2 {
		color: #fff;
        font-size: 12.8px;
        line-height: 26px;
        font-weight: 600;
    }

    .contents-body {

        padding: 0 16px 70px;

        &:before {
           border-radius: 0 0 8px 8px;
           top: -8px;
           height: calc(100% + 8px);
        }
    }

}


.contents {
    background: #fff;
    border-radius: 8px;
}

.contents-header {
    height: 9px;
    width: 100%;
    position: relative;

    &:before {
        content: "";
        position: absolute;
        background-color: #333;
        border-radius: 10px;
        top: -2px;
        left: 9px;
        height: 3px;
        width: calc(100% - 18px);
    }
}

.results-commentary:has(.tab) .contents-header::before {
  left: -2px;
  width: calc(100% - 8px);
}

.contents-body {

    position: relative;
    padding: 25px 16px 70px;

    &:before {
        content: "";
        position: absolute;
        background-color: #333;
        border-radius: 8px;
        top: 0;
        left: -2px;
        height: 100%;
        width: 3px;
    }

    &:after {
        content: "";
        position: absolute;
        background-color: #333;
        border-radius: 10px;
        top: 0;
        right: -2px;
        height: 100%;
        width: 3px;
    }

    .contents-body-q-text {
        max-width: 263px;
        margin: auto;
        padding-bottom: 20px;
        padding-top: 0;
        font-size: 16px;
        font-weight: 500;
        line-height: normal;
        height: 80px;
        display: flex;
        align-items: center;
    }

    .contents-body-q-dotline {
        margin-bottom: 20px;
    }

}


.contents-footer {
    height: 9px;
    width: 100%;
    position: relative;

    &:before {
        content: "";
        position: absolute;
        background-color: #333;
        border-radius: 10px;
        bottom: -2px;
        left: 9px;
        height: 3px;
        width: calc(100% - 18px);
    }
}


/* 1. 標準ラジオボタンを非表示に */
input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* 2. デフォルト状態のスタイル (label::beforeが外枠) */
label::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    box-sizing: border-box;
    position: absolute;
    bottom: -30px;

    /* デフォルトの装飾 */
    background: #ffffff;
    border-radius: 50%;
    border-style: solid;
    border-color: #333333;
    /* 濃い灰色 */
    border-width: 3px;
    width: 27px;
    height: 27px;
}

/* 3. アクティブ状態（チェック時）のスタイル */
label {
    position: relative;
    /* ::afterを配置するために必要 */
    display: inline-block;
    /* クリック領域を確保 */
    cursor: pointer;
    height: 175px;
    /* アクティブなSVGのサイズ (31x31) に合わせた調整 */
    /* padding-left: 31px; /* ラジオボタンの分のスペース */
}

/* 外枠の色を青に変更 */
input[type="radio"]:checked+label::before {
    border-color: #00FFFF;
    /* 青 */
}

/* 4. 内側の塗りつぶし円 (label::after) */
label::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: #333333;
    /* 濃い灰色 */

    /* 外枠のサイズ(27px)とborder-width(3px)から計算して中央に配置 */
    bottom: -27px;
    /* border-width分 */
    left: 3px;
    /* border-width分 */
    width: 21px;
    /* 27px - 3px * 2 */
    height: 21px;
    /* 27px - 3px * 2 */

    opacity: 0;
    /* デフォルトでは非表示 */
    transition: opacity 0.1s;
}

/* チェック時に内側の円を表示 */
input[type="radio"]:checked+label::after {
    opacity: 1;
}

/* === ここからチェックマークの追加 === */

input[type="radio"]:checked+label::after {
    opacity: 1;
    /* 内側の円の背景色 */
    background-color: #333333;

    /* 白いチェックマークのSVGをURLエンコードして背景画像として設定 */
    /* このSVGは適宜調整してください。以下の例は一般的なチェックマークです。 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    /* サイズ調整 */
}

input[type="radio"]:checked+label::after {
    opacity: 1;
    background-color: #333333;
    /* 内側の塗りつぶし円の色 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    /* 内側の円のサイズに合わせて調整 */
}

span.v-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    width: 24px;
    font-size: 16px;
    font-weight: 500;
}

.radio-option-wrapper {
    position: relative;
    z-index: 1;
}

.radio-container {
    display: flex;
    justify-content: space-around;

    &::after {
        content: "";
        display: block;
        width: 280px;
        height: 45px;
        background-color: #f2f2f2;
        border-radius: 22.5px;
        position: absolute;
        bottom: 31px;
    }
}

.contents-body-q-btn {
    background: #e4e4e4;
    border-radius: 25.5px;
    padding: 0 49px;
    display: flex;
    flex-direction: row;
    gap: 25px;
    align-items: center;
    justify-content: center;
    width: 202px;
    height: 51px;
    position: relative;
    margin: 25px auto;
    border: none;

    &.--active {
        background: #333333;
        box-shadow: 3px 3px 0px 0px rgba(114, 100, 0, 0.25);
    }

}

.contents-body-q-btn-text {
    color: #ffffff;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    position: relative;
}

.contents-body-q-btn-arrow {
    flex-shrink: 0;
    width: 6px;
    height: 11px;
    position: absolute;
    left: 147px;
    top: 20px;
    overflow: visible;
}

section.loading {
    max-width: 315px;
    margin: auto;
    padding-top: 100px;

    .contents-body {
        padding-bottom: 40px;
    }
}

.loading-title {
    max-width: 124px;
    margin: auto;
}

.loading-spinner {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.loading-spinner img {
    width: 101px;
    height: 98px;
    animation: spin 4s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.results-heading {
    text-align: center;
    padding: 30px 0;
    width: 98px;
    margin: auto;
}

.results-text {
    color: #333333;
    font-size: 15px;
    text-align: center;
}

.type {
    max-width: 329px;
    margin: 20px auto;
}

.type-box {
    background: #ffffff;
    border-radius: 32px;
    padding: 9px 10px 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    height: 50px;
    position: relative;

    +.type-box {
        margin-top: 16px;
    }

}

.type-inner {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.type-label {
    background: #333333;
    border-radius: 16px;
    padding: 7px 11px 7px 11px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 63px;
    height: 32px;
    position: relative;
}

.type-label-text {
    color: #ffffff;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    position: relative;
}

.type-title {
    text-align: left;
    font-size: 18px;
    font-weight: 800;
    position: relative;
    padding-left: 5px;

    &.type-1 {
        color: var(--type-1);
    }

    &.type-2 {
        color: var(--type-2);
    }

    &.type-3 {
        color: var(--type-3);
    }

    &.type-4 {
        color: var(--type-4);
    }

    &.type-5 {
        color: var(--type-5);
    }

    &.type-6 {
        color: var(--type-6);
    }


}

.results-contents {
    background-color: #fff;
    max-width: 329px;
    margin: auto;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 20px 0;

}

.results-features {
    background: #333333;
    border-radius: 2px;
    padding: 5px 48px 5px 48px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 292px;
    height: 27px;
    position: relative;
    margin: auto;
}

.results-features-text {
    color: #ffffff;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    position: relative;
}

.results-features-icon {
    flex-shrink: 0;
    width: 34px;
    height: 43.76px;
    position: absolute;
    left: 14px;
    top: 5px;
    overflow: visible;
}

.radar {
    width: 293.13px;
    height: 219.38px;
    position: relative;
    margin: auto;
}

.radar-image {
    width: 157.16px;
    height: 181.2px;
    position: absolute;
    left: 63.86px;
    top: 19.41px;
    overflow: visible;
}

.radar-label {
    background: #a4a4a4;
    border-radius: 3px;
    padding: 2px 3px 2px 3px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.25);

    &.radar-label-1 {
        position: absolute;
        left: 42%;
        top: -18px;

        &.--active {
            background: var(--type-1);
        }
    }

    &.radar-label-2-a.--active,
    &.radar-label-2-b.--active {
        background: var(--type-2);
    }

    &.radar-label-3 {
        position: absolute;
        left: 240px;
        top: 158px;

        &.--active {
            background: var(--type-3);
        }

    }

    &.radar-label-4 {
        position: absolute;
        left: 41%;
        top: 220px;

        &.--active {
            background: var(--type-4);
        }

    }

    &.radar-label-5 {
        position: absolute;
        left: -8px;
        top: 158px;

        &.--active {
            background: var(--type-5);
        }
    }

    &.radar-label-6-a.--active,
    &.radar-label-6-b.--active {
        background: var(--type-6);
    }


}




.radar-label-2-wrap {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 68.41px;
    position: absolute;
    left: 240px;
    top: 39px;
}


.radar-label-6-wrap {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-end;
    justify-content: flex-start;
    width: 58px;
    position: absolute;
    left: -8px;
    top: 39px;
}

.radar-label-text {
    color: #ffffff;
    text-align: left;
    font-size: 10.1px;
    font-weight: 600;
    position: relative;
}

.radar-label-text2 {
    color: #ffffff;
    text-align: right;
    font-size: 10.1px;
    font-weight: 600;
    position: relative;
}

.results-explain {
    background: #fffbed;
    border-radius: 3px;
    border-style: solid;
    border-color: #333333;
    border-width: 1px;
    padding: 17px 19px 17px 19px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: flex-start;
    width: 292px;
    height: 325px;
    position: relative;
    margin: auto;

    &.type-1 {
        .results-explain-heading,
        .results-explain-th {
            color: var(--type-1);
        }
    }

    &.type-2 {
        .results-explain-heading,
        .results-explain-th {
            color: var(--type-2);
        }
    }

    &.type-3 {
        .results-explain-heading,
        .results-explain-th {
            color: var(--type-3);
        }
    }

    &.type-4 {
        .results-explain-heading,
        .results-explain-th {
            color: var(--type-4);
        }
    }

    &.type-5 {
        .results-explain-heading,
        .results-explain-th {
            color: var(--type-5);
        }
    }

    &.type-6 {
        .results-explain-heading,
        .results-explain-th {
            color: var(--type-6);
        }
    }
}

.results-explain-heading {
    text-align: left;
    font-size: 16.4px;
    font-weight: 500;
    position: relative;
}

.results-explain-box {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 251px;
    position: relative;
}

.results-explain-line {
    margin-top: -1px;
    border-style: solid;
    border-color: #eaeaea;
    border-width: 1px 0 0 0;
    align-self: stretch;
    flex-shrink: 0;
    height: 0px;
    position: relative;
}

.results-explain-table {
    display: flex;
    flex-direction: row;
    gap: 11px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.results-explain-th {
    text-align: left;
    font-size: 13px;
    line-height: 21px;
    font-weight: 500;
    position: relative;
}

.results-explain-td {
    color: #000000;
    text-align: justified;
    font-size: 12px;
    line-height: 21px;
    letter-spacing: -0.05em;
    font-weight: 500;
    position: relative;
    width: 188px;
    height: 42px;
}

.line-7 {
    margin-top: -1px;
    border-style: solid;
    border-color: #eaeaea;
    border-width: 1px 0 0 0;
    align-self: stretch;
    flex-shrink: 0;
    height: 0px;
    position: relative;
}

.results-explain-text-2 {
    color: #000000;
    font-size: 12px;
    line-height: 21px;
    letter-spacing: -0.05em;
    font-weight: 500;
    position: relative;
    align-self: stretch;
    height: 84px;
}

.tab {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: flex-end;
    justify-content: flex-start;
    position: relative;
}

.tab-text {
    color: #ffffff;
    text-align: left;
    font-weight: 700;
    position: relative;
}

.tab-label {
    background: #646262;
    border-radius: 7.14px 7.14px 0px 0px;
    padding: 6px 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100px;
    height: 35.71px;
    position: relative;
    font-size: 16px;
    cursor: pointer;

    &.--active {
        background: #333333;
        border-radius: 8px 8px 0px 0px;
        padding: 9px 0;
        width: 135px;
        height: 47px;
        font-size: 22px;
    }

}

.results-tab-contents {
    display: none;
}

.results-tab-contents.--active {
    display: block;
}

.results-commentary {
    max-width: 315px;
    margin: 42px auto 0;

    .contents-body {
        padding-bottom: 40px;
    }

    &+.match-workplace {
        margin-top: 70px;
    }

	.tab {
        top: 1px;
        left: -2px;
	}

	.contents {
        border-radius: 0 8px 8px 8px;
	}

    .contents-body {
        &:before {
            border-radius: 0 0 8px 8px;
            top: -8px;
            height: calc(100% + 8px);
        }
    }


}

.results-commentary-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: flex-start;
    width: 250px;
    position: relative;
    margin: auto;
}

.results-commentary-heading-text span{
    color: #333333;
    text-align: left;
    font-size: 15.1px;
    font-weight: 800;
    position: relative;
    align-self: stretch;
}

.results-commentary-heading-line {
    margin-top: -1px;
    border-style: solid;
    border-color: #00ffff;
    border-width: 1px 0 0 0;
    align-self: stretch;
    flex-shrink: 0;
    height: 0px;
    position: relative;
}

.results-box {
    &.type-1 {
        .results-commentary-type,
        .results-commentary-subHeading {
            color: var(--type-1);
        }
    }
    &.type-2 {
        .results-commentary-type,
        .results-commentary-subHeading {
            color: var(--type-2);
        }
    }
    &.type-3 {
        .results-commentary-type,
        .results-commentary-subHeading {
            color: var(--type-3);
        }
    }
    &.type-4 {
        .results-commentary-type,
        .results-commentary-subHeading {
            color: var(--type-4);
        }
    }
    &.type-5 {
        .results-commentary-type,
        .results-commentary-subHeading {
            color: var(--type-5);
        }
    }
    &.type-6 {
        .results-commentary-type,
        .results-commentary-subHeading {
            color: var(--type-6);
        }
    }
}

.results-commentary-type span {
    text-align: center;
    font-size: 21px;
    font-weight: 900;
    position: relative;
    padding: 15px 0;
}

.results-commentary-img {
    text-align: center;
    max-width: 115px;
    margin: 55px auto 35px;
	padding: 0;
}

.results-commentary-subHeading {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    position: relative;
    width: auto;
}

.results-commentary-text {
    color: #000000;
    text-align: justified;
    font-size: 16px;
    line-height: 27px;
    letter-spacing: -0.05em;
    font-weight: 400;
    position: relative;
    width: auto;
    margin: auto;
    padding: 0 10px;
}

.results-commentary-line {
    display: flex;
    padding: 15px 0 20px;
}

.results-commentary-box {
    &+.results-commentary-box {
        margin-top: 50px;
    }
}

.watch-another {
    display: flex;
    flex-direction: row;
    gap: 7px;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin-top: 40px;
    cursor: pointer;

}

.watch-another-text {
    color: #333333;
    text-align: left;
    font-family: "Inter-Bold", sans-serif;
    font-size: 13.4px;
    font-weight: 700;
    position: relative;
}

.watch-another-icon {
    flex-shrink: 0;
    width: 27px;
    height: 27px;
    position: relative;
    overflow: visible;
}


.match-workplace {
    background: #fc1743;
    border-radius: 33.5px;
    padding: 26px 20px 26px 20px;
    display: flex;
    flex-direction: row;
    gap: 18px;
    align-items: center;
    justify-content: flex-start;
    width: 317px;
    height: 67px;
    position: relative;
    box-shadow: 3px 3px 0px 0px rgba(114, 100, 0, 0.25);
    margin: 0 auto;
}

.match-workplace-text {
    color: #ffffff;
    text-align: right;
    font-family: "Inter-Bold", sans-serif;
    font-size: 18.4px;
    font-weight: 700;
    position: relative;
    width: 245px;
}

.match-workplace-icon {
    flex-shrink: 0;
    width: 7px;
    height: 14px;
    position: absolute;
    left: 284px;
    top: 27px;
    overflow: visible;
}

.chart-description {
    width: 302px;
    height: 229.8px;
    position: relative;
    margin: 60px auto 50px;
}

.chart-comment {
    color: #000000;
    text-align: justified;
    font-family: "Inter-Regular", sans-serif;
    font-size: 12px;
    line-height: 21px;
    letter-spacing: -0.05em;
    font-weight: 400;
    position: absolute;
    left: 50%;
    translate: -50%;
    top: 37px;
    width: 302px;
    height: 168px;
}

.quotation-a {
    width: 44.75px;
    height: 36.8px;
    position: absolute;
    left: calc(50% - 146px);
    top: 0px;
    overflow: visible;
}

.quotation-b {
    width: 44.75px;
    height: 36.8px;
    position: absolute;
    left: calc(50% - -101px);
    top: 193px;
    overflow: visible;
}

.editor {
    background: #fffbed;
    border-radius: 3px;
    border-style: solid;
    border-color: #333333;
    border-width: 1px;
    padding: 33px 28px 33px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: flex-start;
    width: 292px;
    height: 474px;
    position: relative;
    margin: auto;

    &+.match-workplace {
        margin-top: 50px;
        cursor: default;
    }

}

.editor-profile {
    color: #333333;
    text-align: left;
    font-size: 14.8px;
    font-weight: 600;
    position: relative;
}

.editor-lime {
    margin-top: -1px;
    border-style: solid;
    border-color: #000000;
    border-width: 1px 0 0 0;
    flex-shrink: 0;
    width: 68px;
    height: 0px;
    position: relative;
}

.editor-text {
    color: #000000;
    text-align: justified;
    font-family: "Inter-Regular", sans-serif;
    font-size: 12px;
    line-height: 21px;
    letter-spacing: -0.05em;
    font-weight: 400;
    position: relative;
    width: 236px;
    height: 243px;

}

.back {
    display: flex;
    flex-direction: column;
    gap: 68px;
    align-items: center;
    justify-content: flex-start;
    width: 135px;
    position: relative;
    margin: 60px auto 0;
}

.back-mypage {
    color: rgba(51, 51, 51, 0.75);
    text-align: left;
    font-family: "Inter-Regular", sans-serif;
    font-size: 16.8px;
    font-weight: 400;
    position: relative;
    align-self: stretch;
}

.back-pagetop {
    color: rgba(51, 51, 51, 0.75);
    text-align: center;
    font-family: "Inter-Regular", sans-serif;
    font-size: 16.8px;
    font-weight: 400;
    position: relative;
    align-self: stretch;
}

.compatibility {
    .mv {
        padding-top: 40px;
    }
}

.compatibility-heading {
    text-align: center;
    padding: 20px;

    img {
        max-width: 170px;
    }
}

.legend {
    display: flex;
    flex-direction: row;
    gap: 7px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.legend-label {
    background: #ffffff;
    border-radius: 30.31px;
    padding: 0.95px 10.42px 0.95px 10.42px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 102.28px;
    height: 20.84px;
    position: relative;
}

.legend-label-star {
    flex-shrink: 0;
    width: 11.45px;
    height: 10.94px;
    position: relative;
    overflow: visible;
}

.legend-label-text {
    color: #333333;
    text-align: center;
    font-size: 13.3px;
    font-weight: 600;
    position: relative;
}

.legend-label-circle {
    flex-shrink: 0;
    width: 9.94px;
    height: 9.94px;
    position: relative;
    overflow: visible;
}

.legend-label-text2 {
    color: #333333;
    text-align: center;
    font-size: 13.3px;
    font-weight: 600;
    position: relative;
    width: 57px;
}

.compatibility-table {
    max-width: 338px;
    margin: 24px auto;
    position: relative;

    a {
        width: 25px;
        display: block;
        position: absolute;
    }

    a.type1 {
        top: 160px;
    }

    a.type2 {
        top: 214px;
    }

    a.type3 {
        top: 269px;
    }

    a.type4 {
        top: 323px;
    }

    a.type5 {
        top: 377px;
    }

    a.type6 {
        top: 432px;
    }



    a.type-a {
        left: 137px;
    }

    a.type-b {
        left: 172px;
    }

    a.type-c {
        left: 206px;
    }

    a.type-d {
        left: 240px;
    }

    a.type-e {
        left: 274px;
    }

    a.type-f {
        left: 307px;
    }
}

.company-compatibility-table {
    max-width: 338px;
    margin: 24px auto;
    position: relative;

    a {
        width: 25px;
        display: block;
        position: absolute;
    }

    a.type1 {
        left: 137px;
    }

    a.type2 {
        left: 172px;
    }

    a.type3 {
        left: 206px;
    }

    a.type4 {
        left: 240px;
    }

    a.type5 {
        left: 274px;
    }

    a.type6 {
        left: 307px;
    }



    a.type-a {
        top: 193px;
    }

    a.type-b {
        top: 247px;
    }

    a.type-c {
        top: 302px;
    }

    a.type-d {
        top: 356px;
    }

    a.type-e {
        top: 410px;
    }

    a.type-f {
        top: 465px;
    }
}

.compatibility-result {
    background: #fffbed;
    border-radius: 3.24px;
    border-style: solid;
    border-color: #333333;
    border-width: 1.08px;
    padding: 24px 6px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    align-items: center;
    justify-content: center;
    height: auto;
    position: relative;
    max-width: 339px;
    margin: auto;

    &+.editor {
        margin-top: 90px;
    }

}

.compatibility-wrap {
    display: flex;
    flex-direction: column;
    gap: 11px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 237px;
    position: relative;
}

.compatibility-label {
    align-items: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.compatibility-therapist {
    background: #feda59;
    padding: 1px 5px 1px 5px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    float: left;
    height: 25px;
}

.compatibility-therapist-text {
    color: #333333;
    text-align: left;
    font-size: 12px;
    line-height: 16.67px;
    font-weight: 600;
    position: relative;
}

.compatibility-therapist-heading {
    text-align: left;
    font-size: 17.7px;
    font-weight: 900;
    float: left;
    height: 25px;
    margin-left: 10px;

        &.type-1 {
            color: var(--type-1);
        }
        &.type-2 {
            color: var(--type-2);
        }
        &.type-3 {
            color: var(--type-3);
        }
        &.type-4 {
            color: var(--type-4);
        }
        &.type-5 {
            color: var(--type-5);
        }
        &.type-6 {
            color: var(--type-6);
        }
}

.compatibility-multiplication {
    flex-shrink: 0;
    width: 10px;
    height: 9.71px;
    position: relative;
    overflow: visible;
    left: 19px;
}

.compatibility-label2 {
    display: flex;
    flex-direction: row;
    gap: 11px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.compatibility-company {
    background: #7ba4c6;
    padding: 1px 5px 1px 5px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 20px;
    position: relative;
}

.compatibility-company-text {
    color: #ffffff;
    text-align: left;
    font-size: 12px;
    line-height: 16.67px;
    font-weight: 600;
    position: relative;
}

.compatibility-company-heading {
    text-align: left;
    font-family: "Inter-Black", sans-serif;
    font-size: 17.7px;
    font-weight: 900;
    position: relative;

    &.type-a {
        color: var(--type-a);
    }
    &.type-b {
        color: var(--type-b);
    }
    &.type-c {
        color: var(--type-c);
    }
    &.type-d {
        color: var(--type-d);
    }
    &.type-e {
        color: var(--type-e);
    }
    &.type-f {
        color: var(--type-f);
    }
}

.compatibility-line {
    flex-shrink: 0;
    width: 281px;
    height: 2.69px;
    position: relative;
    overflow: visible;
}

.compatibility-description {
    color: #000000;
    font-size: 12.9px;
    line-height: 22.65px;
    letter-spacing: -0.05em;
    font-weight: 500;
    position: relative;
    width: 269.69px;
}

.compatibility-result-icon {
    color: #e10805;
    text-align: left;
    font-size: 24.1px;
    line-height: 19.44px;
    font-weight: 600;
    position: absolute;
    left: 4px;
    top: 8px;
}

.company-q {
    position: relative;
    width: 340px;
    margin: auto;
    padding: 32px 0 0;
}

.company-q-text {
    color: #333333;
    text-align: left;
    font-family: "-", sans-serif;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    position: relative;
    border-style: solid;
    border-color: #2980b9;
    border-width: 0 0 0 6px;
    padding-left: 10px;
}

.company-q-text-span {
    font-family: "Inter-SemiBold", sans-serif;
    font-weight: 600;
}

.company-q-text-span2 {
    font-family: "Inter-Bold", sans-serif;
    font-weight: 700;
}

.company-feature-heading {
    background: #ffffff;
    border-radius: 32px;
    padding: 2px 11px;
    display: flex;
    flex-direction: row;
    gap: 64px;
    align-items: center;
    justify-content: center;
    width: 144px;
    position: relative;
    margin: auto;
}

.company-feature-btn {
    background: #ffffff;
    border-radius: 8px;
    border-style: solid;
    border-color: #333333;
    border-width: 3px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 40px;
    position: relative;
    box-shadow: 0px 2px 0px 0px rgba(51, 51, 51, 1);
    overflow: hidden;

    &.--active {
        box-shadow: none;
        top: 3px;
    }

    &.type-a {
        .company-feature-btn-text {
            color: var(--type-a);
        }

        &.--active {
            background-color: var(--type-a-sub);
        }
    }

    &.type-b {
        .company-feature-btn-text {
            color: var(--type-b);
        }

        &.--active {
            background-color: var(--type-b-sub);
        }
    }

    &.type-c {
        .company-feature-btn-text {
            color: var(--type-c);
        }

        &.--active {
            background-color: var(--type-c-sub);
        }
    }

    &.type-d {
        .company-feature-btn-text {
            color: var(--type-d);
        }

        &.--active {
            background-color: var(--type-d-sub);
        }
    }

    &.type-e {
        .company-feature-btn-text {
            color: var(--type-e);
        }

        &.--active {
            background-color: var(--type-e-sub);
        }
    }

    &.type-f {
        .company-feature-btn-text {
            color: var(--type-f);
        }

        &.--active {
            background-color: var(--type-f-sub);
        }
    }

}

.company-feature-btn-text {
    color: #5ab5a3;
    text-align: left;
    font-family: "Inter-ExtraBold", sans-serif;
    font-size: 18.8px;
    font-weight: 800;
    position: relative;
}

.company-feature-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    max-width: 303px;
    margin: 20px auto;
    cursor: default;
}

.company-chara {
    max-width: 308px;
    margin: auto;

    .contents-body {
        position: relative;
        padding: 15px 16px 30px;
    }

    .company-feature-heading {
        margin-top: 50px;
        margin-bottom: 20px;
        width: 244px;
    }
}

.company-chara-box {
    display: none;

    &.--active {
        display: block;
    }

    &.type-a {
        color: var(--type-a);

        .company-chara-header-line {
            background-color: var(--type-a);
        }
    }

    &.type-b {
        color: var(--type-b);

        .company-chara-header-line {
            background-color: var(--type-b);
        }
    }

    &.type-c {
        color: var(--type-c);

        .company-chara-header-line {
            background-color: var(--type-c);
        }
    }

    &.type-d {
        color: var(--type-d);

        .company-chara-header-line {
            background-color: var(--type-d);
        }
    }

    &.type-e {
        color: var(--type-e);

        .company-chara-header-line {
            background-color: var(--type-e);
        }
    }

    &.type-f {
        color: var(--type-f);

        .company-chara-header-line {
            background-color: var(--type-f);
        }
    }
}

.company-chara-header {
    display: flex;
    flex-direction: row;
    gap: 11px;
    align-items: center;
    justify-content: center;
    position: relative;

}

.company-chara-header-line {
    border-radius: 8px;
    flex-shrink: 0;
    width: 107px;
    height: 8px;
    position: relative;
}

.company-chara-header-text {
    text-align: left;
    font-family: "Inter-ExtraBold", sans-serif;
    font-size: 29px;
    font-weight: 800;
    position: relative;
}

.company-chara-list {
    color: #333333;
    text-align: left;
    font-family: "Inter-SemiBold", sans-serif;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    width: 263px;

    li {
        padding-bottom: 12px;
        margin-bottom: 15px;
        position: relative;
        font-weight: 600;

        &::after {
            content: "";
            display: block;
            border-style: dotted;
            border-color: #323333;
            border-width: 3px 0 0 0;
            align-self: stretch;
            flex-shrink: 0;
            height: 0px;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 96%;
        }

    }

}

ul.company-chara-list-span {
    padding-top: 15px;
    padding-left: 30px;
    list-style: disc;
}

.company-chara-frame {
    background: #ffffff;
    border-radius: 3px;
    border: 3px solid #333333;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 226px;
    height: 50px;
    position: relative;
}

.styled-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
    font-weight: 800;
    width: 100%;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    color: #f5a623;
}

.styled-select:focus {
    outline: 2px solid #3fa9f5;
    outline-offset: 2px;
}

.company-chara-frame::after {
    content: "";
    background-image: url(https://kurohon.jp/gakusei/wp-content/themes/kurohon/assets/images/aptitude_diagnosis/select-arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 16px;
    height: 10px;
    font-size: 14px;
    color: #333;
    position: absolute;
    right: 16px;
    pointer-events: none;
}

.company-chara-field {
    margin: 24px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.company-chara-field + button.btn-next {
   margin: 30px auto 40px;
}


.company-feature-text {
    font-size: 14px;
    font-weight: 500;
}

button.btn-next {
    background: #e4e4e4;
    border-radius: 25.5px;
    width: 202px;
    height: 51px;
    border: none;
    font-size: 20.7px;
    font-weight: 500;
    color: #fff;
    margin: 50px auto;
    display: block;
    text-align: center;

    &.--active {
        background: #2980b9;
        box-shadow: 3px 3px 0px 0px rgba(114, 100, 0, 0.25);
    }
}


.company-chara-label {
    background: #7ba4c6;
    border-radius: 14.02px;
    padding: 9px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 60.98px;
    height: 28.04px;
    position: relative;
}

.company-chara-label-text {
    color: #ffffff;
    text-align: left;
    font-family: "Inter-SemiBold", sans-serif;
    font-size: 13.8px;
    font-weight: 600;
    position: relative;
}


.company-type {
    display: flex;
    flex-direction: row;
    gap: 2px;
    row-gap: 11px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 289px;
    position: relative;
    margin: 25px auto;
}

.company-type-box {
    border-radius: 32px;
    border-style: solid;
    border-width: 2px;
    padding: 5px 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 239px;
    height: 33px;
    position: relative;

    &.type-a {
        border-color: var(--type-a);
        background-color: var(--type-a-sub);
        color: var(--type-a);
        span {
            color: var(--type-a);
        }
    }

    &.type-b {
        border-color: var(--type-b);
        background-color: var(--type-b-sub);
        color: var(--type-b);
        span {
            color: var(--type-b);
        }
    }

    &.type-c {
        border-color: var(--type-c);
        background-color: var(--type-c-sub);
        color: var(--type-c);
        span {
            color: var(--type-c);
        }
    }

    &.type-d {
        border-color: var(--type-d);
        background-color: var(--type-d-sub);
        color: var(--type-d);
        span {
            color: var(--type-d);
        }
    }

    &.type-e {
        border-color: var(--type-e);
        background-color: var(--type-e-sub);
        color: var(--type-e);
        span {
            color: var(--type-e);
        }
    }

    &.type-f {
        border-color: var(--type-f);
        background-color: var(--type-f-sub);
        color: var(--type-f);
        span {
            color: var(--type-f);
        }
    }

}

.company-type-text span {
    font-size: 18px;
    font-weight: 600;
    position: relative;
}


.company-type-box-end {
    color: #333333;
    text-align: left;
    font-family: "Inter-SemiBold", sans-serif;
    font-size: 14.8px;
    font-weight: 600;
    position: absolute;
    left: 269px;
    top: 57px;
    width: 48px;
    height: 18px;
}

.company-type-description {
    color: #333333;
    text-align: center;
    font-family: "Inter-SemiBold", sans-serif;
    font-size: 14.8px;
    font-weight: 600;
    position: relative;
}

.company-results {

    .contents {

        &+.contents {
            margin-top: 70px;
        }
    }

    .contents-body {
        position: relative;
        padding-top: 0;
        padding-bottom: 0;
    }

    .chart-comment {
        position: relative;
    }

    .chart-description {
        height: auto;
        position: relative;
        margin: 30px auto 0px;
    }

}

.trigger-btn {
    position: absolute;
    top: 22px;
    right: 12px;
    display: flex;
    align-items: center;
    height: 20px;
    cursor: pointer;
    z-index: 1;

    img {
        width: 16px;
        height: auto;
    }
}

.contents-inner {
    display: none;

    &.--open {
        display: block;
    }
}


.foldup {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin-top: 40px;
    padding-bottom: 20px;
}

.foldup-text {
    color: #a4a4a4;
    text-align: left;
    font-family: "NotoSansJp-Bold", sans-serif;
    font-size: 13.4px;
    font-weight: 700;
    position: relative;
}

.foldup-line {
    margin-top: -2px;
    border-style: solid;
    border-color: #a4a4a4;
    border-width: 2px 0 0 0;
    flex-shrink: 0;
    width: 12px;
    height: 0px;
    position: relative;
    transform-origin: 0 0;
    transform: rotate(0deg) scale(1, 1);
}

.company-results-box {

    &.type-a {
        .results-commentary-type span,
        .results-commentary-subHeading {
            color: var(--type-a);
        }
    }

    &.type-b {
        .results-commentary-type span,
        .results-commentary-subHeading {
            color: var(--type-b);
        }
    }

    &.type-c {
        .results-commentary-type span,
        .results-commentary-subHeading {
            color: var(--type-c);
        }
    }

    &.type-d {
        .results-commentary-type span,
        .results-commentary-subHeading {
            color: var(--type-d);
        }
    }

    &.type-e {
        .results-commentary-type span,
        .results-commentary-subHeading {
            color: var(--type-e);
        }
    }

    &.type-f {
        .results-commentary-type span,
        .results-commentary-subHeading {
            color: var(--type-f);
        }
    }
}

.page-heading {
    margin: 40px auto;
    text-align: center;
}

.page-box {
    width: 316px;
    margin: auto;

    .contents-body {
      position: relative;
      padding-top: 0;
      padding-bottom: 0;
    }
}

.mt270 {
    margin-top: 270px;
}

.results-explain-text-1 {
  font-size: 16px;
}

.results-commentary-heading-text {
    color: #333333;
    text-align: center;
    font-size: 15.1px;
    font-weight: 800;
    position: relative;
    align-self: stretch;
}

.results-commentary-type {
    text-align: center;
    font-size: 22px;
    font-weight: 900;
    position: relative;
    padding: 15px 0;
}

form.post-password-form {
    max-width: 315px;
    margin: 50px auto;
    font-size: 16px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;

    label {
        display: grid;
        grid-template-columns: 1fr;
        height: 80px;
        margin: 20px 0;

        &::before {
            display: none;
        }
    }

    input[type="password"] {
        border: 1px solid #aaa;
        border-radius: 5px;
        padding: 10px 15px;
        margin-top: 10px;
        display: block;
    }

    input[type="submit"] {
        background: #777;
        padding: 10px 30px;
        color: #fff;
        border-radius: 5px;
    }

    .post-password-form-invalid-password {

        padding-bottom: 10px;

        p {
            color: red;
        }
    }
}