:root{
    --clr01: #ffbd2b;
    --clr02: #000;
    --clr03: #f7c54c;
    --clr04: #113700;

    --hclr: var(--secttlclr);
    --h-letspace: 0px;

    --containerWidthSet_1200: 1200px;
    --containerWidthSet_991: 1200px;
    /* --containerWidthSet_767: 1200px; */
    /* --containerWidthSet_575: 1200px; */

    --secttlmarg: 0 0 45px;
 
    --body-lineheight: 1.8;
    --subttlsize: 110%; 
    --subttlfamily: var(--ft-t2);
    --subttl: 0;
    --secttlmarg_default: 0 0 35px;


    --clip: 45px;
    --clip-path: polygon(var(--clip) 0%, 100% 0%, calc(100% - var(--clip)) 100%, 0% 100%);
}

/* ::-moz-selection {
    color: var(--clr01); 
}
::selection {
    color: var(--clr01); 
} */
@media (max-width: 767px) {
    /* .container, .container-fluid {
        max-width: calc(100% - 30px);
    } */
} 

@media (min-width: 767px) {
    /* :root {
        --h4: calc(60 / 18 * 100%)
    } */
} 

a.btn,
.btn{ 
    --btnbgclr: var(--clr01, #000);
    --btnbgclrhov: var(--clr02);
    --btnborderclr: var(--btnbgclr);
    --btnborderclrhov: var(--btnbgclrhov);
    --btnclr: var(--clr03x, #fff);
    --btnclrhov: var(--clr03x, #fff);
    --btnpad: 15px 21px;
    --btn-minwidth: 150px;
    --btnborderrad: 3px;
    --btnfontsize: 100%;
    --borderwidth: 2px;
    --borderwidthhov: var(--borderwidth);
    position: relative;
    z-index: 1; 
    line-height: 1; 
    gap: 9px;
    justify-content: center;
    text-align: left;

    .ifont{
        --i-color: var(--btnclr);
    }

    &:hover{
        .ifont{
            --i-color: var(--btnclrhov);
        }
    } 

    /* &::after{
        transition: .2s all cubic-bezier(0.075, 0.82, 0.165, 1);
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        translate: 0 -50%;
        aspect-ratio: 1;
        width: 45px;
        scale: .5;
        
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-position: center;
        -webkit-mask-position: center;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        background-color: var(--btnbgclr);
    
        -webkit-mask-image: url(src/btn-arrow.svg);
        mask-image: url(src/btn-arrow.svg);
    }

    &::before{
        transition: inherit;
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        translate: 0 -50%;
        aspect-ratio: 1;
        width: 45px;
        background-color: #fff;
        border-radius: 50%;
    }

    &:hover{
        &::after{
            rotate: -45deg; 
            background-color: var(--btnclr);
        }
        &::before{
            background-color: var(--btnbgclrhov);
        }
    } */

}

.btn_set_neg .btn{
    --btnbgclr: rgba(255, 255, 255, .3);
    --btnborderclr: transparent;

    &::after{
        --btnbgclr: var(--clr01);
    }
}

.btn.btn-space-line{
    --btnbgclrhov: var(--clr01);
    --btnclr: var(--clr01);
}
.h4 {
    letter-spacing: 6px;
    img {
        vertical-align: middle;
        margin: -6px 6px 0;
    }
}
section {
    --secttlclr: var(--clr01, #000); 
}
.btn i {
    /* font-size: 200%; */
    margin: 0 3px;
}
.btn.f > * {
    display: inline-flex;
    vertical-align: middle;
} 
label{
    --lblfont: var(--ft-t2);
    font-family: var(--ft-t1);
} 
/* ============== */ 
a {
    text-decoration: none;

    &:hover{
        text-decoration: underline;
    }
}
body{
    background-color: #fefefe;
} 
/* section:is([style*="--secbgclr"]) {
    --btnborderclr: #fff;
    --btnclr: #fff;

    .mediabx {
        --iconclr: var(--clr01x, #fff);
        --iconhovclr: var(--clr01, #fff);
        --bgclr: var(--clr02x, transparent);
        --bghovclr: var(--clr02, #fff);
        --mediaborder: 2px solid #fff;
        --mediahovborder: 2px solid var(--clr02, #fff);
        --mediaborderradius: 50%;
        --mg: 1px 2px;
    }
} */
section.maintitle_style{
    ._secttlbx{
        padding-left: 30px;
        position: relative;

        &::after{
            content: '';
            display: block;
            position: absolute;
            height: 100%;
            width: 9px;
            background-color: var(--clr04);
            left: 0;
            top: 0;
            border: 1px solid #fff;
        }
    }
}
section:is([style*="--secttlclr"]) { 
    .ttldecor-top:after {
       background-color: var(--secttlclr);
    } 
}
.listobx.categorylistbx{
    font-family: var(--ft-t2);
}
.btn_noti {
    font-family: var(--ft-t2);
}




.searchbx { 
    position: relative;
    width: 250px;
    
    overflow: hidden;

    .searchw {
        position: relative;
    }
    & input {
        margin: 0;
        padding: 9px 30px 9px 9px;
        width: 100%;
        border-radius: 3px;
        border: 0;
        font-size: inherit;
    }
    & button.i {
        position: absolute;
        left: auto;
        right: 12px;
        top: 50%;
        translate: 0 -50%;
        color: #888;
        width: auto;
        border: 0;
        padding: 0;
        background-color: transparent;
    }
}

.dekstickbx .searchbx,
.nav .searchbx{
    border-radius: 50px;
    font-size: 80%;
    border: 1px solid #888;
    
    & input {
        padding: 9px 30px 9px 15px; 
        background-color: #fff;
    }
}

#mouse-circle {
    position: absolute;
    width: 15px !important;
    height: 15px !important;
    margin: -7px 0px 0px -7px;
    border: 1px solid var(--clr01);
    background-color: var(--clr02);
    border-radius: 50%;
    pointer-events: none !important;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0);
    z-index: 1000; 
}
 
 

/* body:has([mn="8997"], [mn="8996"]){ 
    & > *:not(.bodybx, .loaderbx, .licht),
    .bodybx > *:not([mn="8997"], [mn="8996"]){
        display: none;
    }
} */

.title{
    font-family: var(--ft-t1);
    font-size: 120%;
    margin: 0 0 9px; 
    line-height: 1.2;
}
.title-s{
    font-family: var(--ft-t1);
    font-size: 80%; 
}

.infobx{
    & > * ~ *{
        margin-top: 6px;
    }
}

.divbx{
    --div: 250px;

    .div-{
        &.div-l{
            flex: 0 0 var(--div);
            max-width: var(--div);
        }
        &.div-r{
            flex: 0 0 calc(100% - var(--div));
            max-width: calc(100% - var(--div));
        }
    }
}

._subttl{
    font-family: var(--ft-t1);
    /* color: var(--secttlclr, var(--clr01)); */
}



._secttlbx{
    ._ttlcontent{
        margin: 0;
    }

    &:has(h4){
        .ttldecor-btm{
            margin: 0 0 15px;
        }
        ._ttlcontent{
            display: inline-block;
            width: 800px;
            max-width: 100%; 
        }
    }
}

td > ul:nth-child(1){
    margin-top: 0px;
}
table{
    width: 100% !important;
    td, th {
        padding: 20px;
    }
} 

.tmp-4 { 

    .bimgmain{
        &::after{
            content: '';
            right: 0;
            top: 0;
            translate: 12px -9px;
            background-color: var(--clr02);
            background-image: linear-gradient(180deg, rgb(0 82 144) 0%, rgba(35, 152, 210, 1) 100%);
            position: absolute;
            height: 100%;
            width: 120px;
            clip-path: var(--clip-path);
            z-index: -1;
        }
    }

    .bimgbx{
        line-height: 0; 
        .bimgw{ 
            clip-path: var(--clip-path)
        }
        .bimg{
            padding-top: 55%;
        }
    }

    .tmpw.f{
        padding-bottom: 12px !important;
        border-bottom: 2px solid #eee;
    }

    .infobx{
        margin: 15px 0 0;
    }
    .date{
        color: #888;
    }
    .ttl{
        color: var(--clr02);
    }
    .btn{
        padding: 0;
        border: 0;
        color: inherit;
        background-color: transparent;
        min-width: unset;
        gap: 0;

        &::after {
            content: '';
            display: inline-block;
            width: 15px;
            height: 9px;
            background-color: var(--clr02);
            margin: 0 0 0 6px;
            clip-path: polygon(17% 0, 0% 100%, 100% 8%);
            z-index: -1;
        }
    }
}

.section_sitemap{
    
    :is(ul, li) {
        width: 100%;
        list-style: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: block;
        /* justify-content: center; */
        align-items: center;
        flex-wrap: wrap;
    }

    ._content{ 


        & > ul{
            column-count: 2;

            & > li {
                display: inline-block;
                margin: 0 0 15px;
            }

            & ul li{
                padding-left: 15px !important;
            }
        }
    }


}