@charset "UTF-8";
@import url("./colorset.css");
@import url("./header.css");
@import url("./footer.css");

*{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
    font-style: normal;
    box-sizing: border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-size:12pt;
    font-family:"Noto Sans Japanese", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    overflow-x: hidden;
    color:var(--dark-text-color);
    background-color: var(--base-bg-color);
}

table, thead, tbody, tr, th, td{
    margin:0;
    padding:0;
    border:0;
    border-collapse: collapse;
}

h1,h2,h3,h4,h5,h6{
    padding-top:0.25em;
    padding-bottom: 0.25em;
}

h1{font-size:2rem;}
h2{font-size:1.75rem;letter-spacing: 0.1rem;}
h3{font-size:1.33rem;}
h4{font-size:1rem;}
h5{font-size:1rem;}
h6{font-size:1rem;}

h2{
    text-align: center;
}

ul, li, dt, dd, dl{
    list-style-type:none;
}

a,a:visited, a:hover, a:active{
    text-decoration: none;
    color:inherit;
    background-color: transparent;
}

a.img_detail_link{
    position: relative;
}

a.img_detail_link::after{
    content: "";
    display: block;
    position: absolute;
    height: 4rem;
    width: 4rem;
    background-image: url("../images/common/img_dtl.png");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;

    z-index: 1200;
    bottom: var(--bottom, 0.2rem);
    right: var(--right, 0.2rem);
}

a.img_detail_link:hover:after{
    opacity: 0.7;
}

strong, em{
    display:inline;
    text-decoration:underline;
	text-decoration-color:var(--sub-em-color);
	text-decoration-thickness:6px;
	text-decoration-skip-ink:none;
	text-underline-offset:-4px;
	font-style:bold;
}

strong{
    font-size: var(--fs-large);
}

img {
	width:100%;
	border: none;
	vertical-align:bottom;
}

div.img > img{
    width:100%;
    object-fit: contain;
}

.em{
    font-size:var(--fs-large);
    font-weight: bold;
}

.underline,
.underline:visited,
.underline:hover{
    display:inline;
    text-decoration:underline;
	text-decoration-color:var(--em-color);
	text-decoration-thickness:6px;
	text-decoration-skip-ink:none;
	text-underline-offset:-2px;
}

.wbr span{
    white-space: nowrap;
    display: inline-block;
}
@media screen and (max-width:768px) {
    .wbr span{
        white-space: normal;
        display: inline;
    }

    .mobile_break span{
        white-space: nowrap;
        display: inline-block;
    }

    br.pc{
        display: none;
    }
}
@media screen and (max-width:1019px) {
    br.pc{
        display: none;
    }
}
@media screen and (min-width:769px) {
    br.sp{
        display: none;
    }
}

.checklist > li{
    padding-left: 2rem;
    text-indent: -1.5rem;
}

.checklist > li::before{
    content: '\02713';
    color:var(--border-color);
    font-weight: bolder;
    margin-right:0.5rem;
}

.dotlist > li{
    padding-left: 1rem;
    text-indent: -1rem;
}

.dotlist > li::before{
    content:"\030fb";
}

li.splitlist{
    margin-top:1rem;
}

.remarks{
    background-color: var(--light-bg-color);
    color:var(--dark-text-color);
    border: 1px var(--border-color) solid;
    border-radius: var(--border-radius);

    margin: 2rem auto;
    padding:1rem 1rem 1rem 1rem;
    font-size:var(--fs-small);
}

.listitem{
    display: grid;
    grid-template-columns: repeat(var(--noi, 3), 1fr);
    column-gap: 2rem;
    text-align: center;
    margin:1rem auto;
}

/* CTA class */
.to_details{
    text-align: right;
    margin-top:1rem;
    padding:0.5rem 0;

    position: relative;
    width:100%;
}

.to_details_block{
    position: relative;
    width:100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.to_details_block.full > a{
    grid-column: span 2;
}

.to_details_block > a{
    display: block;
    grid-column: 2;
    padding: 0.5rem 2rem 0.5rem 1rem;
    background-color: var(--sub-color);
    color: var(--light-text-color);
    text-align: right;
}

.to_details_block:hover > a{
    filter: drop-shadow(2px 2px 1px var(--shadow-color));

}

.to_details_block > a::after{
    content: "";
    position: absolute;
    display: inline-block;
    width:0.6rem;
    height:0.6rem;
    border-right:2px var(--light-text-color) solid;
    border-bottom:2px var(--light-text-color) solid;
    right:1rem;
    top: calc(50% - 0.6rem / 2 - 2px);
    transform: rotate(-45deg);
}

.to_details_block:hover > a::after{
    right:0.8rem;
}

@media screen and (max-width:768px) {
    .to_details_block > a{
        grid-column: span 2;
    }
}


a.cta_button,
a.cta_button:visited,
a.cta_button:active{
    position: relative;
    display: inline-block;
    background-color: var(--main-color);
    color:var(--light-text-color);
    
    padding:0.3rem 1rem;
    border-radius: var(--border-radius);

    margin-left:auto;
    margin-right: auto;

    filter: none;
    transition: all var(--delay);
}

a.cta_button:hover{
    filter: drop-shadow(2px 2px 1px var(--shadow-color));

    background-color: var(--main-color);
    color:var(--light-text-color);
}

a.cta_button::after{
    content:'';
    display: inline-block;
    position: relative;

    top:-2px;
    right:0;

    width:0.5rem;
    height:0.5rem;
    border-right: 2px var(--light-text-color) solid;
    border-bottom: 2px var(--light-text-color) solid;
    transform: rotate(-45deg);
}

a.cta_button:hover::after{
    right: -4px;
}

a.ext_website{
    position: relative;
}

a.ext_website::after{
    --size:1.2rem;
    display: block;
    position: absolute;
    content: '';
    width:var(--size);
    height:var(--size);
    right:-1.5rem;
    top:-0.05rem;
    background-image: url('/itp/images/ico/ico_newwindow_dark.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
}


.footnote{
    font-size:var(--fs-smaller);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.wl_wide{
    width:100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

.wl{
    width:100%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.wl_narrow{
    width:100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.chart{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    width:var(--width, 250px);
    height:var(--height, 250px);

    font-weight:bold;

    background-image: radial-gradient(var(--base-bg-color) 30%, transparent 31%), conic-gradient(var(--main-color) 0% var(--value), var(--light-bg-color) var(--value) 100%);
    border-radius: 50%;
}

@media screen and (max-width:768px) {
    .cta_button::after{
        content: '';
        display:none;
    }

    .wl,.wl_narrow,.wl_wide{
        padding-left:10px;
        padding-right: 10px;
    }
}



/* pankuzu */
.pankuzu{
    background-color: var(--base-bg-color);
    padding:1em 0;
    margin-top: 1.5rem;
}

.pankuzu a:hover{
    text-decoration: underline;
}

.pankuzu ul{
    display: flex;
    column-gap: 1em;
}

.pankuzu li::before{
    content:'|';
    padding-right:0.75em;
}

.pankuzu li:first-child::before{
    content: '\02302';
    padding-right:0.25em;
    color: var(--main-color);
}

@media screen and (max-width:768px) {
    .pankuzu{
        font-size:var(--fs-small);
    }
}

.content{
    padding-top:3rem;
    padding-bottom:3rem;
}

.content.narrow{
    padding-top:1rem;
    padding-bottom: 1rem;
}


.content h1{
    text-align: center;
    margin:0 auto 1.5em auto;
}

.content h3{
    text-align: left;
    width:100%;
    border-bottom:1px var(--border-color) solid;
    font-weight: bold;
    margin-top:0.5em;
    margin-bottom:0.5em;
}


@media screen and (max-width:768px) {
    .content{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .content h1{
        width: calc(100% - 1rem);
    }

    .content h2{
        width: calc(100% - 2rem);
    }

    .content h3{
        padding-left:1rem;
        padding-right: 1rem;
    }
}

.img{
    width:100%;
    object-fit: cover;
}

.grid{
    width: 100%;
    display: grid;
    column-gap:var(--column-gap, 2rem);
    row-gap:var(--row-gap, 1rem);
    grid-template-columns: repeat(var(--cols, 3), 1fr);
}


/* main img*/
.top_img{
    --top_img_height:21rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: var(--sub-color);
    padding:0 0 0 0;
    height: var(--top_img_height);
    color:var(--light-text-color);
    background-image: url("../images/top/top_image_r.jpg");
    background-repeat: no-repeat;
    background-position: left center;
}

.top_filter{
    width: 100%;
    height:var(--top_img_height);
    backdrop-filter: blur(2px);
}

.top_box{
    position: relative;
    width: 100%;
    height:var(--top_img_height);
    
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.top_box a.cta_button{
    font-size: 1.4rem;
    margin-top:1rem;
}

.top_box h1{
    margin:0;
    position: relative;
}

.top_box h1 > span{
    position: relative;
    display: block;
    z-index: 500;
}

.top_box::after{
    --ar:1.77;

    --cw:500px;

    content: '';
    position: absolute;
    z-index: 499;

    display: block;
    width:var(--cw);
    height:calc(var(--cw) / var(--ar));
    
    right:-20px;
    top:40%;

    background-image: url('/itp/images/common/dts-g1o_s.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.top_box div.img{
    width: 300px;
}


.top_box .hd_text{
    display: inline-block;
    padding:0.2rem 0.5rem;
    background-color: var(--key-hd-bg-color);
    width: max-content;
}

.top_box .hd_text:first-of-type{
    display: block;
    padding:0.2rem 0.5rem;
}

.top_box .hd_text:nth-of-type(n + 2){
    margin-top:5px;
}


/* GDA logo */
.hojokin_button > a.cta_button{
    background-color: #fff;
    color: var(--main-color);
    border:2px var(--main-color) solid;
}

.hojokin_button > a.cta_button::after{
    border-right-color: var(--main-color);
    border-bottom-color: var(--main-color);
}


/* 冒頭実績部 */
h2.top_itp_result_header{
    position: relative;
    padding: 1rem;
    text-align: center;
}

.uq_topitp_digit_em{
    display: inline-block;
    font-size: 150%;
    color: var(--sub-color);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.top_result_heder_container{
    background-color: #fff; 
    margin-top:-1.5rem; 
    position:relative; 
    z-index:90; 
    border-top-left-radius: 1rem; 
    border-top-right-radius: 1rem;
    padding: 1rem 1rem 3rem 1rem;
}

.top_itp_result_items{
    position: relative;

    display: flex;
    justify-content: center;
    align-items: stretch;
    column-gap: 2%;
    margin-bottom: 2rem;
}

.top_itp_result_item{
    text-align: center;

    width:49%;
    flex: 0 0 49%;
    padding: 0.5rem 1rem 1rem 1rem;
    background-color: #fff;
    color: var(--dark-text-color);
    border-radius: var(--border-radius);
}

.top_itp_result_item > div:nth-of-type(1){
    width:100%;
    height:290px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.top_itp_result_item > div > div:nth-of-type(1){
    position:relative;
    font-weight: 700;
    margin-bottom:0.5rem;
}


.top_itp_result_item > div > div:nth-of-type(1) > span{
    color: var(--main-color);
    font-size:1.1rem;
    margin-left:0.1rem;
    margin-right:0.1rem;
}

.top_itp_result_item > div > div:nth-of-type(2){
    font-size:0.9rem;
}

.top_itp_result_item div.img > img{
    width: auto;
    max-height:290px;
}

@media screen and (max-width:768px) {
    .top_result_heder_container{
        margin-top: 0;
        padding: 1rem 0.5rem 2rem 0.5rem;
    }

    .uq_topitp_digit_em{
        font-size: 125%;
        margin: 0;
    }
}


/* 導入企業 */
.top_itp_result_companies{
    --banner-width:197px;
    --banner-height:50px;
    --banner-padding-X:2px;
    --banner-padding-Y:4px;
    --banner-border:1px;
}

.top_itp_result_companies h2{
    margin: 0 auto;
}

.top_itp_result_companies h2+div{
    text-align: center;
    margin-bottom:1rem;
}

.top_itp_result_companies h2 span{
    font-weight: 700;
    color: var(--main-color);
}

.top_itp_result_companies .top_logo img{
    width:var(--banner-width);
    height: var(--banner-height);
    object-fit: contain;
}

.top_itp_result_companies .top_logo{
    display: grid;
    grid-template-columns: repeat(auto-fill, 197px);
    justify-content: center;
    align-items: center;
    column-gap:1rem;
    row-gap: 1rem;
    text-align: center;
}

.top_itp_result_companies .top_logo > div{
    padding: var(--banner-padding-Y) var(--banner-padding-X);
    flex:0;
    min-width: 0;
}

.top_itp_result_companies .top_logo+.footnote{
    text-align: right;
}


/*
.top_logo::before,
.top_logo::after{
    content: '';
    display: block;
    width: calc(var(--banner-width) + (var(--banner-padding-X) + var(--banner-border)) * 2);
    height: calc(var(--banner-height) + (var(--banner-padding-Y) + var(--banner-border)) * 2);
    order: 999;
}
*/

@media screen and (max-width:768px) {
    .top_box::after{
        display: none;
    }

    h2.top_itp_result_header{
        margin-bottom: 0.5rem;
    }

    .top_itp_result_items{
        flex-direction: column;
    }

    .top_itp_result_item{
        width: 100%;
        flex:0 0 98%;
        min-width: 0;
    }

    .top_itp_result_companies .top_logo{
        grid-template-columns: repeat(auto-fill, 105px);
    }

    .top_itp_result_companies .top_logo img{
        width:105px;
        height:40px;
        object-fit: contain;
    }

    .top_logo::before,
    .top_logo::after{
    display: none;
}
}



/* lineup */
.lineup{
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    column-gap: 1%;
    row-gap: 4rem;
    margin-bottom: 4rem;
}

.dts{
    position: relative;
    height: calc(100% + 3rem);
}

.dts > a{
    display: block;
    width:100%;
    height:100%;
    background-color: var(--base-bg-color);
    color: var(--dark-text-color);
}

.dts > a:hover{
    filter: drop-shadow(2px 2px 2px var(--shadow-color));
    
}

.dts > div.img{
    position: relative;
}

.dts > div.img > img{
    width: 100%;
    height:100%;
    object-fit: contain;
}

.dts > a > h3{
    position: relative;
    padding: 0.25rem 0;
    width: calc(100% - 1rem);
    margin-left:auto;
    margin-right: auto;
    border: 0;
}

.dts > a > h3::after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    position: absolute;
    left:0;
    bottom:0;
}

.dts span.icon{
    display: block;
    position: absolute;
    background-color: var(--base-bg-color);
    color: var(--sub-color);
    border: 1px var(--sub-color) solid;
    top:0;
    left:0;
    font-size:0.8rem;
    padding: 0.1rem 0.25rem;
    width: 4rem;
    text-align: center;
}

.dts span.icon.navi{
    left:4.25rem;
}

.dts > a > h3+div{
    padding: 0 0.5rem 0.5rem 0.5rem;
    line-height:150%;
}

.dts .to_details{
    position: absolute;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom:0.5rem;
    width:calc(100% - 1rem);
    left:0.5rem;
    border: 1px var(--sub-color) solid;
    color: var(--sub-color);
}

.dts  a:hover .to_details{
    background-color: var(--sub-color);
    color: var(--light-text-color);
}

.dts .to_details::after{
    content: "";
    position: relative;
    display: block;
    width: 0.5rem;
    height:0.5rem;
    border-right: 2px var(--sub-color) solid;
    border-bottom: 2px var(--sub-color) solid;
    transform: rotate(-45deg);
    top:0;
    right: 0;
}

.dts  a:hover .to_details::after{
    border-right-color: var(--base-bg-color);
    border-bottom-color: var(--base-bg-color);
    right:-4px;
}

@media screen and (max-width:768px){
    .lineup{
        grid-template-columns: repeat(2, 1fr);
        row-gap: 5rem;
    }

    .dts{
        width:100%;
    }
}


/* ITP */
.itp{
    --cta-size:2rem;

    display: grid;
    justify-self: center;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2%;
    row-gap:1rem;
}

.itp_span2{
    grid-column: span 2;
}

.itp_span3{
    grid-column: span 3;
}

.itp_item{
    position: relative;
    margin:0;
    padding:0;
    background-color: var(--base-bg-color);
    color: var(--dark-text-color);
    margin-bottom: 2rem;
    border-right:1px var(--light-bg-color) solid;
    border-bottom:1px var(--light-bg-color) solid;
}

.itp_item > a{
    position: relative;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 226px max-content 1fr max-content;

    width:100%;
    height:100%;

    background-color: var(--base-bg-color);
    color: var(--dark-text-color);
    transition: all var(--delay);
}

.itp_item > a:hover{
    filter: drop-shadow(2px 2px 2px var(--shadow-color));

}

.itp_item a:hover .to_details{
    border: 1px var(--main-color) solid;
    color: var(--main-color);
}

.itp_item a:hover .to_details::after{
    border-right-color: var(--main-color);
    border-bottom-color: var(--main-color);
    right:-3px;
}

.itp_item div.itp_item_hdimg > img{
    width: 100%;
    height: 226px;
    display: block;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
}

.itp_item h3{
    width: calc(100% - 2rem);

    margin-left:auto;
    margin-right: auto;
}

.itp_item_desc{
    margin-left:0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 1rem;
}


.itp_item .to_details{
    position: relative;
    bottom:1rem;
    width: calc(100% - 2rem);
    margin-left:auto;
    margin-right:auto;
    height: var(--cta-size);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px var(--sub-color) solid;
    border-radius: var(--border-radius);
    color: var(--sub-color);
}

.itp_item a:hover .to_details{
    border: 1px var(--sub-color) solid;
    color: var(--light-text-color);
    background-color: var(--sub-color);
}

.itp_item .to_details::after{
    content: '';
    display: inline-block;
    position: relative;
    width:0.45rem;
    height:0.45rem;
    border-right:2px var(--sub-color) solid;
    border-bottom:2px var(--sub-color) solid;
    transform: rotate(-45deg);
}

.itp_item a:hover .to_details::after{
    border-right:2px var(--light-text-color) solid;
    border-bottom:2px var(--light-text-color) solid;
}


.itp_item .checklist > li::before{
    color: var(--border-color);
}


.itp_item .all_itp_fn{
    display: block;
    padding:0;
    height: 100%;
}

.itp_item.all_itp_fn > a{
    grid-row: 1 / -1;

    display: flex;
    justify-content: center;
    align-items: center;

    width:100%;
    height:100%;
    background-color: var(--border-color);
    color: var(--light-text-color);
    text-indent: -0.5rem;
}

.itp_item.all_itp_fn > a:hover{
    background-color: var(--sub-color);
    color: var(--light-text-color);
}

.itp_item.all_itp_fn > a::after{
    content: '';
    display: inline-block;
    position: relative;
    width:0.6rem;
    height:0.6rem;
    right:-0.3rem;
    border-right:2px var(--base-bg-color) solid;
    border-bottom:2px var(--base-bg-color) solid;
    transform: rotate(-45deg);
}

.itp_item.all_itp_fn > a:hover::after{
    right:-0.5rem;
}

@media screen and (max-width:768px) {
    .itp{
        grid-template-columns: repeat(1, 1fr);
        row-gap:1rem;
    }

    .itp_item{
        width:100%;
        justify-self: center;
    }

    .itp_item.all_itp_fn > a{
        padding:1rem;
        background-color: var(--sub-color);
    }
}


/* 選ばれる理由 */
.rtc_bg{
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--middle-bg-color);
    background-image: url("../images/top/img_rtc_01.jpg");
    background-position: center bottom;
}

.rtc_overlay{
    background-color: rgba(255,255,255,0.9);
    border-radius: calc(var(--border-radius) * 2);
}

.rtc{
    padding:1rem 2rem 2rem 2rem;
}

.rtc > h2{
    padding:2rem 0 1rem 0;
}

.rtc ul{
    padding-left:0.5rem;
}

.rtc p{
    text-indent:1rem;
}

.rtc p:nth-of-type(n + 2){
    margin-top:1rem;
}

.rtc_item{
    display: flex;
    column-gap: 1rem;
    margin-top:2rem;

}

.rtc_item:nth-of-type(even){
    flex-direction: row-reverse;
}

.rtc_item > div:first-of-type{
    flex:0 0 45%;
    margin-bottom:2rem;
}

.rtc_desc{
    padding-bottom:2rem;
    flex-grow: 1;
}

.rtc_desc li{
    font-weight: bold;
    color: var(--middle-text-color);
}

.rtc_desc p{
    line-height: 1.5rem;
    text-indent:1rem;
    margin-top:1rem;

}

@media screen and (max-width:768px) {
    .rtc{
        padding: 1rem 0.5rem;
    }

    .rtc_bg{
        padding:0;
    }

    .rtc_overlay{
        background-color: rgba(255,255,255,0.7);
        border-radius: 0;
    }

    .rtc h2{
        padding: 0;
    }
    
    .rtc_item{
        display: block;
    }

    .rtc_desc{
        padding-bottom:0;
    }
}


/* top お問い合わせブロック */
.top_oto_bg{
    background-image: url('../images/top/oto_img_gr.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.content.top_oto_bg{
    padding-top:0;
    padding-bottom:0;
}

div.bg_blur{
    width:100%;
    height:100%;
    backdrop-filter: blur(5px);
    
    padding-top:5em;
    padding-bottom: 5em;
}

.top_oto_bg h2{
    color:var(--light-text-color);
}

.top_oto{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 2rem;
    column-gap: 2rem;
}

.top_oto_button.ex_full{
    background-image:var(--button-grad-l);
    color:var(--light-text-color);
    font-size: var(--fs-large);
    grid-column: 1/-1;
    padding:0.25rem 0;
}


.top_oto_button.full{
    background-image:var(--button-grad-l);
    color:var(--light-text-color);
    font-size: var(--fs-large);
    grid-column: span 3;
    padding:0.25rem 0;
}

.top_oto_button.full:hover{
    background-image:var(--button-grad-l-hover);
}

.top_oto_button{
    border-radius: var(--border-radius);
    background-color: var(--light-bg-color);
    color:var(--dark-text-color);
    text-align: center;
    font-size: var(--fs-normal);
    border: 1px var(--base-bg-color) solid;
    grid-column: span 2;
    padding:0;
    filter: drop-shadow(2px 2px 2px var(--shadow-color));

    transition: all var(--delay);
}

.top_oto_button:hover{
    text-decoration: underline;
    background-color: var(--base-bg-color);
    filter: none;
}

.top_oto_button > a{
    width:100%;
    height:100%;
    text-align: center;
    padding:0.5rem 0.5rem;
    
    display: flex;
    justify-content: center;
    align-items: center;
}


@media screen and (max-width:768px) {
    .top_oto{
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: 1fr;
        grid-template-rows:repeat(2, 1.5fr) repeat(3, 1fr);
        row-gap: 2rem;
        column-gap: 0;
        padding:0.5rem 5%;
    }
}

  
/* top case */
.top_case{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-template-rows: max-content;
    row-gap: 3rem;
    column-gap: 1rem;
    margin-bottom: 2rem;
}

.top_case_item{
    background-color: var(--base-bg-color);
    text-align: center;
    padding-bottom:1rem;
    filter: none;    
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 222px 4rem 4rem 2rem;


}

.top_case_item:hover{
    filter: drop-shadow(2px 2px 2px var(--shadow-color));

}

.top_case_item .to_details{
    position: relative;
    display: block;
    margin-left:auto;
    margin-right: auto;
    width:90%;
    height:100%;
    background-color: var(--base-bg-color);
    color:var(--sub-color);
    border:1px var(--sub-color) solid;
    border-radius:var(--border-radius);
    text-align: center;
    padding: 0.2rem;

    transition: all var(--delay);

}

.top_case_item .to_details::after{
    content: '';
    display: inline-block;
    position: absolute;
    width:0.6rem;
    height:0.6rem;

    top:calc(50% - (0.6rem + 0.2rem) / 2);
    right:1rem;

    border-bottom: 2px var(--sub-color) solid;
    border-right: 2px var(--sub-color) solid;
    transform: rotate(-45deg);
}

.top_case_item:hover .to_details{
    background-color: var(--sub-color);
    color: var(--light-text-color);
}

.top_case_item:hover .to_details::after{
    right:0.6rem;
    border-bottom-color: var(--light-text-color);
    border-right-color: var(--light-text-color);

}

.top_case_item > div:nth-child(2){
    font-weight: bold;
    padding-top: 0.5rem;
}

.top_case_item > div:nth-child(3){
    font-size:small;
    border-top:1px var(--border-color) solid;
    padding-top:0.5rem;
    margin:0 5%;
}

.top_case_item > div:last-child{
    align-self:flex-end;
}

.top_case_loc{
    display: block;
    font-weight:bold;
    font-size:var(--fs-small);
}

.color_bg{
    background-color: var(--light-bg-color);
}


.top_case_item.all_jirei > span{
    position: relative;
    display: inline-block;
    height:calc(100% + 1rem);
    width: 100%;
    padding-bottom: 1rem;
    padding-right:1rem;

    transition: all var(--delay);

    background-color: var(--border-color);
    color: var(--base-bg-color);
    grid-row: 1 / -1;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.top_case_item.all_jirei > span::after{
    content: '';
    display: inline-block;
    position: absolute;
    width:0.6rem;
    height:0.6rem;

    top:calc(50% - 0.8rem - 2px);
    right:1.6rem;

    border-bottom: 2px var(--base-bg-color) solid;
    border-right: 2px var(--base-bg-color) solid;
    transform: rotate(-45deg);
    transition: all var(--delay);
}

.top_case_item.all_jirei:hover > span{
    background-color: var(--sub-color);
}

.top_case_item.all_jirei:hover > span::after{
    right:1.4rem;
}

@media screen and (max-width:768px) {
    .top_case{
        grid-template-columns: repeat(2, 1fr);
    }

    .top_case > a:last-of-type{
        grid-column: span 2;
    }
    
    .top_case_item{
        display: flex;
        flex-direction: column;
    }

    .top_case_item span.case_ctrl{
        font-size: 0.9rem;
        white-space: nowrap;
        letter-spacing: -0.1rem;
    }

    .top_case_item .to_details{
        padding:0.2rem 1.2rem 0.2rem 0.2rem;
    }

    .top_case_item.all_jirei{
        padding-bottom: 0;
    }

    .top_case_item.all_jirei > span{
        background-color: var(--sub-color);
        padding:1rem 2rem 1rem 1rem;
    }

    .top_case_item.all_jirei > span::after{
        right:0.75rem;
        top:calc(50% - 0.8rem / 2);
    }
}


/* top-faq*/
.content details{
    margin-bottom:3em;
}

summary:hover{
    cursor: pointer;
}

.content summary{
    border-bottom: 1px var(--border-color) solid;
    margin-bottom:0.5em;
}

.content summary::before{
    content:"Ｑ：";
}

.content details > p{
    padding-left:3em;
    text-indent:-2.3em;
}

.content details > p::before{
    content: 'Ａ：';
}

.content details > p > span.footnote{
    padding-left:3em;
    text-align: right;
}

/* news block */
.news{
    position:relative;
    
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 1rem;
    margin-bottom:2rem;
}

.news > div{
    border-bottom:1px var(--border-color) solid;
}

.news > div:nth-of-type(odd){
    padding:0.5rem 1rem 1rem 0;
}

.news > div:nth-of-type(even){
    padding:0.5rem 0 1rem 0;

}

.news a,
.news a:visited,
.news a:active{
    color: var(--sub-color);
}

.news a:hover{
    text-decoration: underline;
}

.press_info{
    font-size: small;
    text-align: right;
}

.press  p {
    text-indent:1em;
    line-height: 175%;
}

.press p:nth-of-type(n + 2){
    margin-top:1em;
}

.press dl dt{
    font-weight: bold;
}

.press dl dd{
    line-height: 175%;
    font-size:var(--fs-small);
}

.press > div{
    margin-top:2rem;
}

.press > div > dl:nth-of-type(n + 2){
    margin-top:1rem;
}

.press :is(a, a:visited, a:hover, a:active){
    text-decoration: underline;
    color: var(--sub-color);
}


/* トップのスペシャルコンテンツバナー */
.top_sp_contents{
    display: grid;
    column-gap: 1px;
    grid-template-columns: repeat(3, 1fr);
}

.top_sp_content{
    position: relative;
}

.top_sp_content:hover{
    filter: drop-shadow(2px 2px 1px var(--shadow-color));
}

.top_sp_content img{
    object-fit: cover;
    width:100%;
    height:100%;
}

.top_sp_content.hojokin{
    grid-column: span 2;
}

.top_sp_content.hojokin .hojokin_info{
    position: absolute;
    background-color: rgba(255,255,255,0.9);
    width:51%;
    top:calc(50% - 3rem / 2);
    right: 0;
    padding:0 0.5rem;
    border: 2px var(--main-color) solid;

    display: flex;
    justify-content: center;
    align-items: center;
}

.top_sp_content.hojokin .hojokin_info::after{
    content: 'NEWS';
    display: block;
    position: absolute;

    background-color: var(--main-color);
    color: var(--light-text-color);
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;

    left:0;
    bottom:100%;
}

.top_sp_contents .to_details_block > a{
    display: flex;
    justify-content: center;
    align-items: center;

    text-align: left;
}


/* thanks */
.thanks{
    width: 100%;
    aspect-ratio: 2/1;

    text-align: center;
    padding-top:3rem;
}

.thanks_hd{
    color: var(--sub-color)!important;
}

.thanks_title{
    font-size: 1.25rem;
    font-weight:bold;
    padding:1rem 0 0 0;
}

.thanks_docname{
    font-size: 1.25rem;
    font-weight:bold;
    padding:0.5rem 0 1rem 0;
}
.thanks_docname::before{
    content:"【";
}

.thanks_docname::after{
    content: "】";
}

.thanks_btt{
    display: block;
    width: max-content;
    margin:5rem auto 3rem auto;
    padding: 1rem 2rem;

    border: 2px var(--sub-color) solid;
    border-radius: .5rem;

    color: var(--sub-color)!important;
    font-weight: bold;
}


/* トップに戻るボタン */
.back_to_top{
    display: none;
}

@media screen and (max-width:768px){
    .top_sp_contents{
        grid-template-columns: repeat(2, 1fr);
    }

    .top_sp_content.hojokin .hojokin_info{
        top:15%;
    }

    .back_to_top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        height:3rem;
        width:100%;
        bottom:0;
        left:0;
        overflow: hidden;
        padding:0.5rem 0.5rem;
        text-align: right;
        background-color: rgba(0,0,0,0.5);
        color:#fff;
        z-index:999;
    }
    
    .back_to_top a.cta_button{
        position: relative;
        filter: none;
        transition: none;
        padding:3px;
        height: 75%;
        display: flex;
        justify-content: center;
        align-items: center;
        
        background-color: var(--main-color);
        color: var(--base-bg-color);
        border-radius: var(--border-radius);
    }

    .back_to_top a.cta_button::after{
        content:'';
        display: none;
    }

    .back_to_top a.btt{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .back_to_top a.btt::before{
        content: "▲";
    }
}


/* 製品・サービスページ共通 */

img.ds{
    filter: drop-shadow(8px 10px 0px var(--shadow-color));
    border: 1px var(--shadow-color) solid;
    margin-bottom: 2rem;
}

.hd_sc_items{
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
    justify-items: center;
    align-items: center;
}

.hd_sc_item{
    position: relative;
    width: 100%;

}

.hd_sc_item > a{
    display: block;
    width: 100%;
    border: 1px var(--sub-color) solid;
    border-radius: calc(var(--border-radius) * 5);
    background-color: var(--base-bg-color);
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.25);

    color: var(--sub-color);
    padding: 0.25rem 0rem;
    width: 100%;
    text-align: center;
}

.hd_sc_item > a::after{
    content: '';
    position: absolute;

    width: 0.6rem;
    height:0.6rem;

    border-right:2px var(--sub-color) solid;
    border-bottom:2px var(--sub-color) solid;
    transform: rotate(-45deg);

    top:calc(50% - (0.6rem + 2px) / 2);
    right:0.75rem;
}

.hd_sc_item:hover > a{
    filter: drop-shadow(0 3px 5px rgb(0 0 0 / 14%));
    background-color: var(--sub-color);
    color: var(--light-text-color);
}


.hd_sc_item:hover > a::after{
    right:calc(0.75rem - 4px);
    border-right-color:var(--light-text-color);
    border-bottom-color:var(--light-text-color);
}

/* 物流展告知TOP_SP */
a.buturyuten{
    --main-color:hsl(348, 100%, 45%);
    --main-color-a:hsl(348, 100%, 65%);
    width: 100%;
    background-color: var(--main-color);
    display: grid;
    grid-template-columns: 3fr 2fr;
    border-radius: 1rem;
}

a.buturyuten:hover{
    background-color: var(--main-color-a);
}

a.buturyuten > div:first-of-type{
    position: relative;

    padding: 1rem 1rem 1rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

a.buturyuten > div:first-of-type::before{
    content: "";
    display: block;
    position: absolute;
    top:6px;
    left:6px;
    right:6px;
    bottom:6px;
    background-color: rgba(255,255,255,1);
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
}

a.buturyuten > div:first-of-type > div{
    position: relative;
    z-index:1;
    color: var(--main-color);
}

a.buturyuten:hover > div:first-of-type > div{
    color: var(--main-color-a);
}

a.buturyuten > div:first-of-type > div:first-of-type{   
    font-size: 1.4rem;
    font-weight: bold;
}
a.buturyuten > div:first-of-type > div:last-of-type{   
    font-size: 1.2rem;
    font-weight: bold;
}

a.buturyuten > div:last-of-type{
    position: relative;
    color: #fff;
    padding: 1rem 2rem 1rem 1rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

a.buturyuten > div:last-of-type::before{
    content: "";
    display: block;

    position: absolute;
    background-color: var(--main-color);
    height: 100%;
    width:2rem;
    left:-1rem;
    transform: skew(-15deg);
}

a.buturyuten:hover > div:last-of-type::before{
    background-color: var(--main-color-a);
}

a.buturyuten > div:last-of-type > div{
    position: relative;
    z-index: 2;
}

a.buturyuten > div:last-of-type > div:first-of-type{
    font-weight: bold;
    font-size:1.1rem;
}

a.buturyuten > div:last-of-type > div:last-of-type{
    text-align: right;
}

a.buturyuten > div:last-of-type > div:last-of-type::after{
    --size:0.6rem;
    content: "";
    display: block;
    position: absolute;
    width: var(--size);
    height: var(--size);

    border-right: 3px #fff solid;
    border-bottom: 3px #fff solid;

    transform: rotate(-45deg);
    right:-1rem;
    top:calc(50% - var(--size) + 3px);
}

a.buturyuten:hover > div:last-of-type > div:last-of-type::after{
    right: calc(-1rem - 4px);
}

@media screen and (max-width:769px) {
    a.buturyuten{
        display: block;
        border-radius: 1rem;
    }

    a.buturyuten > div:first-of-type{
        position: relative;
    
        padding: 1rem;
    }

    a.buturyuten > div:first-of-type::before{
        border-radius: 1rem;
    }

    a.buturyuten > div:last-of-type::before{
        display: none;
    }
}


@media screen and (max-width:1279px) {
    .side_box{
        display: none;
    }
}
@media screen and (min-width:1280px) {
    /* 取って付けたBox */
    .side_box{
        position: fixed;
        bottom:0;
        right: 0;
        z-index: 99;

        border-top-left-radius: 16px;
        background-color: var(--main-color);
        padding:0.5rem 5px 0 5px;
    }
    
    .side_box > div{

    }

    .side_box > div:first-child{
        font-size: 1rem;       
        background-color: transparent;
        color: #fff;
        text-align: center;
    }
    
    .side_box > div > div{
        font-size:0.9rem;
        margin-top:3px;
        padding:0.5rem 0.25rem;
        background-color: #fff;
        color:#333;
    }


    .side_box > div > div:first-of-type{
        margin-top:0.5rem;
    }
    .side_box > div > div:last-of-type{
        padding-bottom:1rem;
    }

    .side_box div.button{
        text-align: right;
        margin-top:0.2rem;
    }

    .side_box div.date{
        font-weight: bold;
    }

    .side_box div.title{
        font-weight: bold;
        text-decoration: underline;
    }

    .side_box div.button > span{
        position: relative;
        background-color: var(--main-color);
        color: #fff;
        border-radius: 6px;
        padding: 0.1rem 0.5rem 0.1rem 0.5rem;
        margin-left: auto;

        width: fit-content;
        display: flex;
        align-items: center;
    }

    .side_box div.button > span::after{
        --size:0.4rem;
        content: '';
        display: block;
        position: relative;

        width: 0;
        height: 0;
        left:2px;

        border-left:calc(var(--size) * 1.41) #fff solid;
        border-top: var(--size) transparent solid;
        border-bottom: var(--size) transparent solid;
    }

    .side_box  a:hover div.button > span::after{
        left:6px;

    }
}




.hp_pt0{
    padding-top:0!important;
}

.hp_pb5{
    padding-bottom:5rem!important;
}

.hp_txtBold{
    font-weight: bold;
}

.bl_dlform_bgbox{
    width: 100vw;    
    aspect-ratio: 20/5;
    max-height: 300px;
    background-color: #0047ac;
    background-image: linear-gradient(160deg, #0047ac 0%, #5294f0 100%);
    position: absolute;
    z-index: -1;
}

.bl_dlform_container{
    display: flex;
    column-gap: 10%;
    justify-content: space-between;
    padding-top:5rem;
}

.bl_dlform_container > *{
    min-width: 0;
}

.bl_dlform_left{
    flex: 0 0 50%;
    background-color: #fff;
    padding:0;
}

.bl_dlform_img{
    border: 4px var(--sub-color) solid;
}

.bl_dlform_title{
    position: relative;
    font-size:1.25rem;
    font-weight: bold;
    padding-top:2rem;
    margin-bottom: 1rem;
}

.bl_dlform_title::before{
    content: "";
    display: inline-block;
    height: 1.25rem;
    aspect-ratio: 1/2;
    transform: translateY(10%);
    background-color: var(--sub-color);    
}  

.bl_dlform_leftDesc{
    line-height: 2;
    padding-bottom: 2rem;
}

.bl_dlform_leftSubTitle{
    position: relative;
    font-size: 1.1rem;
    font-weight: bold;
}

.bl_dlform_leftSubTitle::before{
    position: relative;
    --size:0.6rem;
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: var(--size) var(--sub-color) solid;
    border-left: calc(var(--size) / 1.41) transparent solid;
    border-right: calc(var(--size) / 1.41) transparent solid;
    transform: translateY(-33%);
}

.bl_dlform_leftTable{
    width: 100%;
}

.bl_dlform_leftTable tr{
    border-bottom:1px #ccc solid;
}

.bl_dlform_leftTable tr:first-of-type{
    border-top:1px #ccc solid;
}

.bl_dlform_leftTable th{
    background-color: #eee;
    padding: 0.25rem;
}
.bl_dlform_leftTable td{
    padding: 0.2rem 1rem;
    text-align: center;
}
.bl_dlform_leftTable td:nth-of-type(2){
    text-align: left;
}

.bl_dlform_right{
    flex: 0 0 40%;
    padding: 1rem 1.5rem;
    background-color: #f6f6f6;
}

.bl_dlform_rightTitle{
    font-size: 1.25rem;
    font-weight: bold;
    padding-bottom: 1rem;
    padding-left:0.33rem;
}

.satori__submit_group{
    margin: 0!important;
    padding:1rem;
}

/* satori埋め込みフォームのリンク色を上書き */
#satori__creative_container :is(a, a:visited, a:active, a:hover, a:focus){
    color: var(--main-color);
}

@media screen and (max-width:759px) {
    .bl_dlform_container{
        flex-direction: column;
        padding-top:2rem;
    }

    .bl_dlform_left{
        flex: 0 0 100%;
    }
    
    .bl_dlform_title{
        padding-left:0.33rem;
    }

    .bl_dlform_right{
        flex: 0 0 100%;
        padding: 0;
    }

    .bl_dlform_rightTitle{
        padding-top:2rem;
        padding-bottom: 0.5rem;
    }

    .bl_dlform_bgbox{
        aspect-ratio: 1/1.2;
        max-height: 175px;
    }
}



/* CV Form */
.bl_cvform_container{

}

.bl_cvform_header{
    padding-top: 6rem;
    padding-bottom: 3rem;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.bl_cvform_headerTitle{
    font-size: 1.5rem;

}

.bl_cvform_headerDesc{
    padding-top:1rem;
}

.bl_cvform_body{

}

.uq_dlfotm_material_thumb{
    padding-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.uq_dlfotm_material_thumb > *{
    min-width: 0px;
}

.uq_dlfotm_material_thumb > img{
    box-shadow: 3px 3px 3px #eee;
}

.bl_flex{
    display: flex;
    gap: 5%;
}

.bl_flex_inner{
    flex: 0 0 47.5%;
}

.bl_flex_image{
    position: relative;
    aspect-ratio: 16/9;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bl_flex_image figcaption{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem;
    background-color: rgba(0,0,0,0.66);
    color: #fff;
    font-weight: bold;
    text-align: left;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
}

.bl_flex_desc{
    padding: 1rem 0;
    font-size: 1.25rem;
}

.bl_flex_desc > p:nth-of-type(n + 2){
    margin-top: 0.75rem;
}

.el_bg_gray{
    background-color: #eee;
}

.bl_eventSpeaker{
    display: flex;
}

.bl_eventSpeaker > *{
    min-width: 0px;
    flex: 0 0 50%;
}

.bl_eventSpeaker_img > img{
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.bl_eventSpeaker_desc{
    padding: 1rem;
}

.bl_eventSpeaker_name{
    font-size: 2rem;
    letter-spacing: 0.2rem;
}

.bl_eventSpeaker_name > span{
    display: block;
    position: relative;
}

.bl_eventSpeaker_ico{
    font-size: 1rem;
    letter-spacing: normal;
    display: inline-block;
    background-color: var(--sub-color);
    color: #fff;
    border-radius: 1rem;
    padding: 0.1rem 1rem 0 1rem;
    margin-bottom: 0.5rem;
}

.bl_eventSpeaker_title{
    font-size: 1.5rem;
}

.bl_eventSpeaker_addr{
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: bold;
}

.bl_eventSpeaker_txt{
    margin-top: 1rem;
    line-height: 175%;
    font-size: 1.2rem;
}

.hp_eventCTA > a.cta_button{
    width: 100%;
    font-size: 2.5rem;
    text-align: right;
    padding:0.4rem 1rem 0.2rem 1rem;
}

.hp_eventCTA > a.cta_button::after{
    width: 1.5rem;
    height: 1.5rem;
}

@media screen and (max-width:768px) {
    .bl_flex{
        display: block;
    }


    .bl_eventSpeaker_name > span > span{
        display: none;
    }

    .bl_eventSpeaker{
        display: block;
    }

    .bl_eventSpeaker_title{
        font-size: 1rem;
    }
    
    .bl_eventSpeaker_addr{
        font-size: 1rem;
        font-weight: bold;
    }
    
    .bl_eventSpeaker_txt{
        margin-top: 1rem;
        font-size: 1rem;
    }

    .hp_eventCTA > a.cta_button{
        width: 100%;
        font-size: 1.5rem;
        text-align: right;
    }
}

.uq_event_information{
    background-color: #eee;
    border: 1px #ccc solid;
    padding: 1rem;
    font-size: 1.25rem;
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 2rem;
}

.uq_event_information_map > iframe{
    width: 100%;
    height: 100%;
}

.uq_event_information_details{
    font-size: 1.1rem;
}

.uq_event_information_details > div:nth-of-type(n + 2){
    margin-top:1rem;
}

.uq_event_information_details > div > span:first-child{
    display: block;
    font-weight: bold;
}

.uq_event_information_details ul > li{
    padding-left: 1rem;
    text-indent: -1.61rem;
}

.uq_event_information_details ul > li::before{
    content:"\030fb";
}

.uq_dfa{
    font-size: 0.95rem;
    color: var(--main-color)!important;
}

.uq_dfa:hover,
.uq_dfa:focus{
    text-decoration: underline!important;
}

.uq_event_information_details_notice{
    display: inline-block;
    font-size: 0.95rem;
    line-height: 150%;
    margin-top: 0.5rem;
}

/* TOP */
.uq_top_header_news{
    position: relative;
    font-size: 1rem;
    border-bottom: 1px var(--color, var(--sub-color)) solid;
    padding-left: 6rem;
    display: flex;
    justify-content: space-between;
}

.uq_top_header_news::before{
    content: "News";
    display: block;
    position: absolute;
    left:0;
    bottom: 0;

    width: 5rem;
    height: 1.5rem;
    background-color: var(--color, var(--sub-color));

    color: #fff;
    font-size: 0.8rem;
    padding: 0.2rem 0rem 0rem 0.5rem;
    clip-path:polygon(0% 0%, 85% 0%, 100% 100%, 0% 100%);
}

.uq_top_header_news_toDetails{
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap:0.5em;
}

.uq_top_header_news_toDetails::after{
    --size:0.4rem;
    content: "";
    display: inline-block;
    position: relative;
    border-top: var(--size) transparent solid;
    border-left: calc(var(--size) * 1.41) currentColor solid;
    border-bottom: var(--size) transparent solid;
}

a.uq_top_header_news:is(:hover, :focus){
    color: var(--color, var(--sub-color));
}

a.uq_top_header_news:hover .uq_top_header_news_toDetails::after{
    left: 3px;
}

@media screen and (max-width:759px) {
    .uq_top_header_news{
        position: relative;
        border: 0px;
        border-top: 1px var(--color, var(--sub-color)) solid;
        margin-top: 2rem;
        padding-top:0.2rem;
        padding-left: 0;
        display: flex;
        flex-direction: column;
    }

    .uq_top_header_news::before{
        height: 1.5rem;
        left:0;
        top:-1.7rem;
    }

    .uq_top_header_news_toDetails{
        align-self: flex-end;
    }
}

.uq_top_button_ds{
    filter:drop-shadow(3px 3px 1px rgba(255,255,255,0.75))!important;
}

.uq_top_button_ds:hover{
    filter:drop-shadow(1px 1px 1px rgba(255,255,255,0.3))!important;
}