:is( #singleCompany , #singleEs ) .sidebar{ --ink : #32373c;
--primary : #d6204e;
--biz-font : "Zen Maru Gothic" , "Hiragino Maru Gothic ProN" , "Hiragino Kaku Gothic ProN" , Arial , sans-serif;
font-family : var( --biz-font );
} :is( #singleCompany , #singleEs ) .sidebar :where( a , span , small , b , strong , em , i , p , div , h1 , h2 , h3 , h4 , ul , ol , li , section , article , nav ){
font-family : inherit;
} @media print , screen and ( width > 960px ){
:is( #singleCompany , #singleEs ) .sidebar{
position : sticky;
top : 18px;
}
} :is( #singleCompany , #singleEs ) .side-card{
margin-bottom : 20px;
background : #fff;
border : 1.5px solid #e4e8ee;
border-radius : 12px;
overflow : hidden;
box-shadow : 0 2px 6px rgba( 50 , 55 , 60 , .04 );
}
:is( #singleCompany , #singleEs ) .side-card h3{
margin : 0;
padding : 12px 16px;
font-family : var( --biz-font );
font-weight : 900;
font-size : 15.5px;
line-height : 1.6;
color : #fff;
background : var( --ink );
letter-spacing : .03em;
}
:is( #singleCompany , #singleEs ) .side-card h3 .ico{
margin-right : 6px;
} :is( #singleCompany , #singleEs ) .same-corp{
margin : 0;
padding : 6px 0;
list-style : none;
}
:is( #singleCompany , #singleEs ) .same-corp li{
padding : 10px 14px;
border-bottom : 1px solid #eef0f4;
font-family : var( --biz-font );
font-weight : 700;
font-size : 13px;
line-height : 1.5;
letter-spacing : normal; }
:is( #singleCompany , #singleEs ) .same-corp li:last-child{
border-bottom : none;
}
:is( #singleCompany , #singleEs ) .same-corp li:hover{
background : #fef5f7;
}
:is( #singleCompany , #singleEs ) .same-corp .ttl{
display : block;
font-size : inherit;
font-weight : inherit;
line-height : inherit;
color : var( --ink );
text-decoration : none;
}
:is( #singleCompany , #singleEs ) .same-corp li:hover .ttl{
color : var( --primary );
}
:is( #singleCompany , #singleEs ) .same-corp .sub{
display : block;
margin-top : 2px;
font-size : 11px;
font-weight : 600;
line-height : 1.5;
color : #888;
} :is( #singleCompany , #singleEs ) .pop-list{
margin : 0;
padding : 0;
list-style : none;
}
:is( #singleCompany , #singleEs ) .pop-list li{
display : flex;
gap : 10px;
align-items : flex-start;
padding : 12px 14px;
border-bottom : 1px solid #eef0f4;
}
:is( #singleCompany , #singleEs ) .pop-list li:last-child{
border-bottom : none;
}
:is( #singleCompany , #singleEs ) .pop-list li:hover{
background : #fef5f7;
}
:is( #singleCompany , #singleEs ) .pop-list .rank{
flex : 0 0 24px;
height : 24px;
display : flex;
align-items : center;
justify-content : center;
font-family : "RocknRoll One" , var( --biz-font );
font-size : 13px;
line-height : 1;
color : #666;
background : #f1f3f6;
border-radius : 50%;
}
:is( #singleCompany , #singleEs ) .pop-list li:nth-child( 1 ) .rank{ background : var( --primary ); color : #fff; }
:is( #singleCompany , #singleEs ) .pop-list li:nth-child( 2 ) .rank{ background : #888; color : #fff; }
:is( #singleCompany , #singleEs ) .pop-list li:nth-child( 3 ) .rank{ background : #c89b4a; color : #fff; }
:is( #singleCompany , #singleEs ) .pop-list .pt{
font-family : var( --biz-font );
font-weight : 700;
font-size : 13px;
line-height : 1.5;
color : var( --ink );
text-decoration : none;
letter-spacing : normal;
}
:is( #singleCompany , #singleEs ) .pop-list li:hover .pt{
color : var( --primary );
} :is( #singleCompany , #singleEs ) .app-list{
padding : 10px 12px;
}
:is( #singleCompany , #singleEs ) .app-item{
padding : 8px;
}
:is( #singleCompany , #singleEs ) .app-item + .app-item{
padding-top : 12px;
border-top : 1px solid #eef0f4;
}
:is( #singleCompany , #singleEs ) .app-item__head{
display : flex;
gap : 10px;
align-items : center;
}
:is( #singleCompany , #singleEs ) .app-thumb{
flex : 0 0 48px;
width : 48px;
height : 48px;
display : flex;
align-items : center;
justify-content : center;
font-size : 22px;
line-height : 1;
background : #f1f3f6;
border : 1px solid #e4e8ee;
border-radius : 10px;
}
:is( #singleCompany , #singleEs ) .app-name{
font-family : var( --biz-font );
font-weight : 700;
font-size : 13.5px;
line-height : 1.4;
color : var( --ink );
letter-spacing : normal;
}
:is( #singleCompany , #singleEs ) .app-desc{
margin-top : 2px;
font-family : var( --biz-font );
font-size : 11.5px;
font-weight : 500;
line-height : 1.5;
color : #777;
letter-spacing : normal;
}
:is( #singleCompany , #singleEs ) .app-btns{
display : flex;
gap : 8px;
margin-top : 10px;
} :is( #singleCompany , #singleEs ) .app-btns a{
flex : 1;
display : flex;
align-items : center;
justify-content : center;
height : 30px;
font-family : var( --biz-font );
font-size : 12px;
font-weight : 700;
line-height : 1;
color : #fff;
text-decoration : none;
letter-spacing : .02em;
background : var( --primary );
border-radius : 9999px;
}
:is( #singleCompany , #singleEs ) .app-btns a:hover{
background : #a8163c;
} :is( #singleCompany , #singleEs ) .side-cta{
display : flex;
gap : 8px;
margin-bottom : 20px;
}
:is( #singleCompany , #singleEs ) .side-cta a{
flex : 1;
display : flex;
flex-direction : column;
align-items : center;
gap : 4px;
padding : 14px 8px;
font-family : var( --biz-font );
font-weight : 900;
font-size : 13px;
line-height : 1.4;
color : #fff;
text-align : center;
text-decoration : none;
border-radius : 10px;
}
:is( #singleCompany , #singleEs ) .side-cta .line{ background : var( --ink ); }
:is( #singleCompany , #singleEs ) .side-cta .doc{ background : var( --primary ); }
:is( #singleCompany , #singleEs ) .side-cta a small{
padding : 1px 6px;
font-size : 10px;
font-weight : 700;
line-height : 1.6;
background : rgba( 255 , 255 , 255 , .18 );
border-radius : 4px;
opacity : .85;
}