main .container {
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    @media screen and (min-width: 1200px){
        max-width: 1200px;
    }
}

main .flow{

    @media screen and (min-width: 768px) {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
}

main .container h1, main .container h2, main .container h3, main .container h4, main .container h5, main .container h6 {
    margin-top: 40px;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

main .container h1 {
    font-size: 3.2rem;
}

main .container h2 {
    font-size: 3.0rem;

}

main .container h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 2.6rem;
    display: flex;
    align-items: baseline;
}

main .container h4 {
    font-size: 2rem;
}

main .container p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

main .container img {
    width: 100%;
}

main .container .align-m {
    vertical-align: middle;
}

main .container .nav {
    display: flex;
    justify-content: center !important;
    flex-wrap: wrap;
    column-gap: 20px;
    margin-top: 40px;
    margin-bottom: 0;
    padding-left: 0;
    font-size: 2.6rem;
    list-style: none;
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: var(--bs-secondary-color);

    @media screen and (min-width: 768px){
        column-gap: 40px;
    }
}
main .container .nav .nav-link {
    position: relative;
    min-width: 160px;
    padding: 2px 4px;
    text-align: center;
    border: solid 1px #aaa;
    border-radius: 6px;

    @media screen and (min-width: 768px){
        min-width: 200px;
    }
}

main .container .nav .nav-link a:before{
    content: "▲";
    transform: rotate( 180deg );
    position: absolute;
    top: 1.2rem;
    left: 0.6rem;
    font-size: 1.4rem;
}

main .container .nav .nav-link .nav-lists {
    display: none;
}

main .container .row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 0;
    row-gap: 20px;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;

    @media screen and (min-width: 768px){
        flex-wrap: nowrap;
        margin: 40px auto 80px;
    }
}

main .container .row .col-md-6 {
    width: 100%;

    @media screen and (min-width: 1200px){
        width: 50%;
    }
}

main .container .row .col-md-3 {
    width: 100%;

    @media screen and (min-width: 1200px){
        width: 25%;
    }
}

main .container .row div:nth-child(even) {
    text-align: center;
}

main .container .row .number {
    display: inline-block;
    font-size: 6.2rem;
    color: #9966FF;
    transform: scale(0.8, 1);
}

main .container .row .bold {
    font-weight: 600;
}

main .container .row img {

    @media screen and (min-width: 768px){
        display: block;
        max-width: 80%;
        margin: 0 auto;
    }
    @media screen and (min-width: 1200px){
        max-width: 360px;
    }
}

main .container .row .cont-l img {
    max-width: 100%;
}


/* タイプ */
main .container .row[data-category="lineup"] li a .image {
    height: auto;
    @media screen and (min-width: 768px){
        height: 200px;
    }
}
main .container .row[data-category="lineup"] li a .card-title {
    margin-top: 6px;
    font-size: 1.8rem;
}

main .container .row[data-category="lineup"] li a .card-text {
    margin-top: 2px;
    font-size: 1.6rem;
}

main .container .table-wrapper {
    overflow-y: hidden;
    overflow-x: scroll;
}

main .container table {
    width: 100%;
    font-size: 2.0rem;
    margin-bottom: 20px;
    white-space: nowrap;

    @media screen and (min-width: 1200px) {
        width: auto;
    }
}

main .container table thead tr .thead,
main .container table tbody tr .thead {
    text-align: center;
    color: #fff;
    background-color: #aaa;
}

main .container table tbody tr .thead {
    width: 1rem;
    writing-mode: vertical-rl;
}

main .container table thead tr .vl,
main .container table tbody tr .vl {
    width: 30px;
}
main .container table thead tr .vl span,
main .container table tbody tr .vl span {
    display: block;
    width: 30px;
    height: 100%;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    white-space: pre;
}

main .container table thead tr th,
main .container table tbody tr td {
    line-height: 1.0;
    padding:4px 8px;
    text-align: center;
    border: solid 1px #eee;
}

main .container table thead tr th.colortemp {
    background-image: url(/led/houjin/products/downlight/images/color_graph.svg);
    background-size: auto 70%;
    background-repeat: no-repeat;
    background-position: center;

    @media screen and (min-width: 768px){
        background-size: auto 95%;
    }
}
main .container table thead tr th.colortemp-2700 {background-color: #F7C7AC;}
main .container table thead tr th.colortemp-3000 {background-color: #FFCC66;}
main .container table thead tr th.colortemp-3500 {background-color: #FFFFCC;}
main .container table thead tr th.colortemp-4000 {background-color: #DAE9F8;}
main .container table thead tr th.colortemp-5000 {background-color: #6699FF;}

main .container table thead tr th .small,
main .container table tbody tr td .small {
    font-size: 1.4rem;
}

main .container table thead tr th .xsmall,
main .container table tbody tr td .xsmall,
main .container table tfoot tr td .xsmall {
    font-size: 1.2rem;
}

main .container table tbody tr td a {
    color: #1784c7;
    text-decoration: underline;
    font-weight: 600;
}

main .container table tbody tr td img {
    width: 220px;
    max-width: max-content;
}

main .container .flow table {
    @media screen and (min-width: 768px) {
        width: 49%;
    }
}
main .container .flow table thead tr th {
    line-height: 1.2;
}

main .container .flow table thead tr th span.title {
    position: relative;
    top: -0.2rem;
    margin-right: 4px;
    padding: 0 2px;
    font-size: 1.4rem;
    border: solid 1px #fff;
}

main .container .flow table thead tr th span.liconex{
    display: block;
    width: 120px;
    margin: 0 auto;
    padding: 0 6px;
    background-color: #00A5B1 !important;
    border: 2px;
    border-radius: 8px;
    color: #fff;
}
main .container .flow table tbody tr td .phi {
    display: block;
    position: relative;
    top: 1rem;
    height: 3.6rem;
    font-size: 1.2rem;
}

main .container .flow table tbody tr td .phi::after {
    content: "";
    position: absolute;
    top: -1.2rem;
    width: 4rem;
    height: 4rem;
    border: solid 1px rgb(33, 37, 41);
    border-radius: 50%;
}
main .container .flow table tbody tr td .phi-1::after {
    left: 38%;

    @media screen and (min-width: 429px){
        left: 47.8%;
    }
    @media screen and (min-width: 768px){
        left: 13.8rem;
    }
    @media screen and (min-width: 1200px){
        left: 17.2rem;
    }
}
main .container .flow table tbody tr td .phi-1l::after {
    left: 34%;

    @media screen and (min-width: 429px){
        left: 47.8%;
    }
    @media screen and (min-width: 768px){
        left: 12.8rem;
    }
    @media screen and (min-width: 1200px){
        left: 15.6rem;
    }
}
main .container .flow table tbody tr td .phi-2::after {
    left: 20%;

    @media screen and (min-width: 429px){
        left: 45.4%;
    }
    @media screen and (min-width: 768px){
        left: 5.4rem;
    }
    @media screen and (min-width: 1200px){
        left: 7.4rem;
    }
}
main .container .flow table tbody tr td .phi-3::after {
    left: 1%;

    @media screen and (min-width: 429px){
        left: 43%;
    }
    @media screen and (min-width: 768px){
        left: 2.8rem;
    }
    @media screen and (min-width: 1200px){
        left: 4rem;
    }
}
main .container .flow table tbody tr td .phi-liconex::after {
    left: 36%;

    @media screen and (min-width: 429px){
        left: 40%;
    }
    @media screen and (min-width: 768px){
        left: 4.4rem;
    }
}

main .container .flow table tbody tr:nth-child(even) {
    background-color: #eee;
}

main .container .flow table tbody tr td {
    border: solid 1px #eee;
    line-height: 1.2;
}

main .container .flow table tbody tr td.light {
    width: 1rem;
}

main .container .flow table tbody tr td .lm {
    width: fix-content;
    padding: 0 20px;
    font-size: 2.8rem;
}

main .container .flow table tbody tr td .small {
    font-size: 2.0rem;

    @media screen and (min-width: 768px) {
        font-size: 1.6rem;
    }
}

main .container .flow table tbody tr td .xsmall {
    font-size: 1.4rem;
}

/* 明るさ・埋込穴 */
#search {
    .container {
        margin-bottom: 40px;

        .list-group {
            display: flex;
            flex-wrap: wrap;
            margin-top: 16px;
            font-size: 2rem;

            li {
                width: 160px;
                padding: 8px 16px;
                border: solid 1px #eee;

                a {
                    display: flex;
                    justify-content: space-between;

                    .arrow::after {
                        content: "";
                        font-family: "Common-Icons" !important;
                        font-size: 1rem;
                        translateY(-50%)
                    }
                }
            }
            li:hover,
            li[data-selected="true"] {
                background-color: #aaa;
            }
        }
        .row {
            margin: 40px auto;
            padding-bottom: 40px;
            border-bottom: solid 1px #eee;

            div:nth-child(even) {
                text-align: left;
            }
        }
        .search-content {
            padding: 16px;
            background-color: #eee;

            h4 {
                margin-top: 0;
            }

            .search-list {
                display :flex;
                flex-wrap: wrap;
                column-gap: 8px;
                row-gap: 8px;
                margin-top: 16px;

                .list-item {
                    padding: 4px 16px;
                    font-size: 2rem;
                    background-color: #fff;
                    border: solid 1px #aaa;
                }
                .list-item:hover {
                    background-color: #aaa;
                }
            }
        }
    }



}