/** Kv *************************************************/
.pls-content {
    * {
        box-sizing: border-box;
        font-size: var(--pls-font-size-base);
    }
    ul {
        margin-block-start: 0;
        margin-block-end: 0;
        padding-inline-start: 0;
    }
}

.m3-oc-c1174-kv {
    width: 100%;
    background: url(../img/c1174/c1174_kv-bg-pc.jpg) no-repeat center center / cover;
    border-radius: var(--pls-border-radius-m);
    overflow: hidden;
    padding: 69px 0;
    margin-bottom: 60px;
    .kv-inner {
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--pls-spacing-s);
        .main-catch {
            .sub-catch {
                color: var(--pls-basic-white);
                span {
                    margin-bottom: var(--pls-spacing-m);
                    background: var(--pls-object-secondary);
                    font-weight: var(--pls-font-weight-bold);
                    font-size: var(--pls-font-size-base);
                    border-radius: 20px;
                    padding: 6px 24px;
                }
            }
            h1 {
                color: var(--pls-basic-white);
                font-weight: var(--pls-font-weight-bold);
                font-size: 32px;
            }
        }
        .karte-rate-count {
            width: 308px;
            background: rgb(255 255 255 / .7);
            box-shadow: 0 4px 13px rgb(66 84 138 / .25);
            text-align: center;
            padding: 26px 0;
            border-radius: var(--pls-border-radius-m);
            text-align: center;
            p {
                font-weight: var(--pls-font-weight-bold);
                margin-bottom: 22px;
            }
            > div {
                font-family: "Noto Sans JP";
                font-weight: var(--pls-font-weight-bold);
                color: var(--pls-object-accent-dark);
                font-size: 80px;
                line-height: 1;
                margin-bottom: var(--pls-spacing-xs);
                span {
                    font-weight: var(--pls-font-weight-bold);
                    font-size: 48px;
                }
            }
            small {
                font-size: var(--pls-font-size-xs);
            }
        }
    }
}

/** Contents *************************************************/

.pls-content {
    h2 {
        text-align: center;
        font-weight: var(--pls-font-weight-bold);
        color: var(--pls-object-accent-dark);
        font-size: var(--pls-font-size-l);
    }
    h3 {
        display: flex;
        font-weight: var(--pls-font-weight-bold);
        font-size: var(--pls-font-size-xl);
        align-items: center;
        gap: var(--pls-spacing-xs);
        .line {
            width: 24px;
            height: 1px;
            background: var(--pls-object-primary);
        }
        .sub-item {
            color: var(--pls-object-info);
            font-weight: var(--pls-font-weight-bold);
            font-size: var(--pls-font-size-base);
        }
    }
}

a {
    &.link-btn {
        display: inline-block;
        position: relative;
        text-align: center;
        color: var(--pls-basic-white);
        font-weight: var(--pls-font-weight-bold);
        padding: var(--pls-spacing-m) var(--pls-spacing-l);
        background: var(--pls-object-link);
        border-radius: var(--pls-border-radius-m);
        box-shadow: 0 0 12px var(--pls-gray-alpha-500);
        &::after {
            content: " ";
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            background: var(--pls-white-alpha-500);
            opacity: 0;
            transition: all 0.3s;
            left: 0;
            top: 0;
            border-radius: var(--pls-border-radius-m);
        }
        &:hover {
            &::after {
                opacity: 1;
            }
        }
        .pls-icon {
            vertical-align: -5px;
            width: 21px;
            height: 21px;
        }
        &:visited {
            color: var(--pls-basic-white);
        }
    }
}

.content-box {
    display: flex;
    flex-direction: column;
    gap: var(--pls-spacing-l);
    margin-bottom: 60px;
    .text-area {
        width: 100%;
        padding: 0 80px;
        .text-area-inner {
            width: 100%;
            background: var(--pls-basic-white);
            border-radius: var(--pls-border-radius-m);
            padding: 32px;
            display: flex;
            flex-direction: column;
            gap: var(--pls-spacing-l);
            .text-area-inner-content {
                display: flex;
                flex-direction: column;
                gap: var(--pls-spacing-m);
            }
        }
        .text-area-btn {
            text-align: center;
        }
    }
    .text-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--pls-spacing-m);
        > p {
            line-height: 1.5;
            small {
                display: block;
                line-height: 1.8;
                font-size: var(--pls-font-size-xs);
            }
        }
    }
    .graph-content {
        text-align: center;
        background: var(--pls-basic-white);
        border-radius: var(--pls-border-radius-m);
        padding: 32px 0;
        .graph-title {
            text-align: center;
            font-size: var(--pls-font-size-base);
            font-weight: var(--pls-font-weight-bold);
            margin-bottom: var(--pls-font-size-l);
        }
        .graph-note {
            display: block;
            font-size: var(--pls-font-size-xxs);
            color: var(--pls-gray-700);
            margin-top: var(--pls-spacing-s);
        }
        .introduce-reason-graph {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 54px;
            padding: 0 54px;
            .graph-area {
                width: 283px;
                img {
                    width: 100%;
                    height: auto;
                }
            }
            .about-enq {
                display: flex;
                flex-direction: column;
                gap: var(--pls-spacing-m);
                .answer {
                    .answer-text {
                        font-weight: var(--pls-font-weight-bold);
                        font-size: var(--pls-font-size-s);
                        display: flex;
                        gap: 6px;
                        margin-bottom: var(--pls-spacing-xxs);
                        .ratio-color {
                            width: 18px;
                            height: 18px;
                            &.enq1 {
                                background: var(--pls-blue-600);
                            }
                            &.enq2 {
                                background: var(--pls-sky-600);
                            }
                            &.enq3 {
                                background: var(--pls-sky-300);
                            }
                            &.enq4 {
                                background: var(--pls-blue-300);
                            }
                        }
                    }
                    ul {
                        list-style: disc;
                        padding-left: var(--pls-spacing-m);
                        text-align: left;
                        li {
                            font-size: var(--pls-font-size-s);
                        }
                    }
                }
            }
        }
    }
    .karte-compare {
        width: 100%;
        border-collapse: collapse;
        border-radius: var(--pls-border-radius-m);
        outline: 1px solid var(--pls-gray-300);
        overflow: hidden;
        tr {
            th {
                background: var(--pls-object-accent-dark);
                color: var(--pls-basic-white);
                padding: var(--pls-spacing-m);
                font-size: var(--pls-font-size-l);
                font-weight: bold;
                vertical-align: middle;
                border-right: 1px solid var(--pls-gray-300);
                border-bottom: 1px solid var(--pls-gray-300);
                text-align: left;
                svg {
                    display: inline-block;
                    vertical-align: text-bottom;
                }
                &:first-of-type {
                    width: 200px;
                    font-size: var(--pls-font-size-s);
                    font-weight: var(--pls-font-weight-regular);
                }
                &:last-of-type {
                    border-right: none;
                }
            }
            td {
                background: var(--pls-basic-white);
                padding: var(--pls-spacing-m);
                vertical-align: middle;
                border-right: 1px solid var(--pls-gray-300);
                border-bottom: 1px solid var(--pls-gray-300);
                font-size: var(--pls-font-size-s);
                &:last-of-type {
                    border-right: none;
                }
                &.evaluate {
                    font-weight: var(--pls-font-weight-bold);
                    font-size: var(--pls-font-size-s);
                    > div {
                        display: flex;
                        align-items: center;
                        gap: var(--pls-spacing-s);
                        font-size: var(--pls-font-size-s);
                        i {
                            display: block;
                            width: 22px;
                            height: 22px;
                            &.rank1 {
                                background: url(../img/c1174/c1174_icon-rank1.svg) no-repeat center center / cover;
                            }
                            &.rank2 {
                                background: url(../img/c1174/c1174_icon-rank2.svg) no-repeat center center / cover;
                            }
                            &.rank3 {
                                background: url(../img/c1174/c1174_icon-rank3.svg) no-repeat center center / cover;
                            }
                            &.rank4 {
                                background: url(../img/c1174/c1174_icon-rank4.svg) no-repeat center center / cover;
                            }
                        }
                    }
                }
            }
            &.recommend {
                td {
                    background: var(--pls-surface-accent-light);
                    font-weight: var(--pls-font-weight-bold);
                    border-top: 1px solid var(--pls-object-accent-dark);
                    color: var(--pls-object-primary);
                    font-size: var(--pls-font-size-s);
                    svg {
                        display: inline-block;
                        vertical-align: text-bottom;
                    }
                    ul {
                        width: 100%;
                        font-weight: bold;
                        color: var(--pls-object-accent-dark);
                        padding-left: var(--pls-spacing-l);
                        list-style-type: disc;
                        li {
                            font-size: var(--pls-font-size-s);
                        }
                    }
                }
            }
            &:nth-last-of-type(2) {
                td {
                    border-bottom: none;
                }
            }
        }
    }
    .doctor-opinion-compare {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: var(--pls-spacing-l);
        > div {
            width: calc((100% - 24px) / 2);
            border-radius: var(--pls-border-radius-m);
            h4 {
                text-align: center;
                color: var(--pls-object-accent-dark);
                font-size: var(--pls-font-size-s);
                font-weight: var(--pls-font-weight-bold);
                margin-bottom: var(--pls-spacing-l);
            }
            ul {
                display: flex;
                flex-direction: column;
                gap: var(--pls-spacing-s);
                list-style: none;
                li {
                    padding-left: 28px;
                    font-size: var(--pls-font-size-base);
                }
            }
            &.positive {
                background: linear-gradient(180deg, var(--pls-surface-primary, #FFF) 47.25%, var(--pls-orange-100, #FDF2E8) 100%);
                > div {
                    height: 100%;
                    background: url(../img/c1174/c1174_doctor-positive-pc.png) no-repeat center bottom / 238px 240px;
                    padding: 32px 32px 250px;
                    @media (1280px > width) {
                        padding: 32px 32px 260px;
                    }
                    ul {
                        li {
                            background: url(../img/c1174/c1174_icon-good.svg) no-repeat left top / 20px 20px;
                        }
                    }
                }
            }
            &.negative {
                background: linear-gradient(180deg, #FFF 50%, #D9E8FF 100%);
                > div {
                    height: 100%;
                    background: url(../img/c1174/c1174_doctor-negative-pc.png) no-repeat center bottom / 168px 247px ;
                    padding: 32px 32px 250px;
                    @media (1280px > width) {
                        padding: 32px 32px 260px;
                    }
                    ul {
                        li {
                            background: url(../img/c1174/c1174_icon-bad.svg) no-repeat left top / 20px 20px ;
                        }
                    }
                }
            }
        }
    }
    .lead-cv-area {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: var(--pls-spacing-m);
    }
    .ranking-articles {
        display: flex;
        justify-content: space-between;
        .thumbnail {
            width: 467px;
            a {
                display: block;
                width: 100%;
                position: relative;
                &::after {
                    content: " ";
                    position: absolute;
                    display: block;
                    width: 100%;
                    height: 100%;
                    background: var(--pls-white-alpha-500);
                    opacity: 0;
                    transition: all 0.3s;
                    left: 0;
                    top: 0;
                    border-radius: var(--pls-border-radius-m);
                }
                &:hover {
                    &::after {
                        opacity: 1;
                    }
                }
                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
        .outline {
            width: calc(100% - 491px);
            .article-link {
                text-align: right;
                margin-top: var(--pls-spacing-l);
            }
        }
    }
    .seminar-info {
        width: 100%;
        a {
            display: block;
            width: 100%;
            position: relative;
            &::after {
                content: " ";
                position: absolute;
                display: block;
                width: 100%;
                height: 100%;
                background: var(--pls-white-alpha-500);
                opacity: 0;
                transition: all 0.3s;
                left: 0;
                top: 0;
                border-radius: var(--pls-border-radius-m);
            }
            &:hover {
                &::after {
                    opacity: 1;
                }
            }
            img {
                width: 100%;
                height: auto;
            }
        }
    }
}