@charset "UTF-8";

.plans_feature_box {
    table {
        container-type: inline-size;
        container-name: plans_feature;
        width: 100%;
        text-align: center;
        border-collapse: separate;
    }

    th {
        &.sticky_col {
            position: sticky;
            top: 0;
            z-index: 1;
            margin-top: 16px;
            padding: 12px 0;
            line-height: 1.5;
            background: #fff;
            box-sizing: border-box;
            border-bottom: #999 solid 3px;

            span {
                font-size: 10px;
                display: block;
                font-weight: normal;
            }
        }

        &.sticky_row {
            width: 100%;
            text-align: center;
            font-size: 14px;
            line-height: 1.3;
            padding: 12px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 4px;
            word-break: keep-all;

            .new {
                color: #FF6043;
                margin-right: 4px;
            }
        }
    }

    td {
        width: calc(100% / 3);
        padding: 4px;
        position: relative;
        font-size: 40px;

        sup {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            height: fit-content;
            margin-left: 8px;
            font-size: 10px;
        }
    }

    .original {
        color: #ACACAC;
    }

    .android {
        color: #3E8C00;
        border-left: 1px solid var(--Neutral-Neutral_200, #D3D3D3);
        border-right: 1px solid var(--Neutral-Neutral_200, #D3D3D3);
    }

    .iphone {
        color: #0088EB;
    }

    .annotation li {
        display: flex;
        gap: 8px;
        font-size: 12px;
    }

    @container plans_feature (max-width: 767px) {
        th {
            &.sticky_row {
                border-radius: 2px;
            }
        }
    }
}