/* Header Sidebar */
.site-header-sidebar
{
	float: right;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.header-sidebar-box
{
	position: relative;
	margin: 0 calc(10px + 0.52vw);
	display: block;
	float: left;
}

.header-sidebar-box:after
{
	content: '';
	position: absolute;
	width: 1px;
	height: 44px;
	top: calc(50% - 22px);
	right: calc((10px + 0.52vw)*-1);
	background: rgba(255, 255, 255, 0.2);
}

.header-sidebar-box.widget_sp_image > .widget_sp_image-image-link
{
	display: block;
	float: left;
}

.header-sidebar-box > .widget_sp_image-image-link > img,
.header-sidebar-box > img
{
	float: left;
	max-width: 100%;
	padding: calc(10px + 0.52vw) 0;
	box-sizing: border-box;
	height: auto;
}

.header-sidebar-box:last-child:after
{
	content: none;
}

.header-sidebar-box.widget_sp_image > .widget-title
{
	display: none;
}
@media all and (min-width: 1400px)
{
	.header-sidebar-box:last-child > .widget_sp_image-image-link > img,
	.header-sidebar-box:last-child > img
	{
		padding-right: 0;
	}
}

@media all and (max-width: 980px)
{
	.site-header-sidebar
	{
		width: calc(100% - 300px);
	}
}	

@media all and (max-width: 767px)
{
	.site-header-sidebar
	{
		width: 170px;
		overflow: hidden;
		margin-right: 90px;
		position: relative;
		padding: 0 10px;
		background: inherit;
	}
	
	.site-header-sidebar:before,
	.site-header-sidebar:after
	{
		content: '';
		position: absolute;
		width: 10px;
		height: 44px;
		top: calc(50% - 22px);
		left: calc(100% - 10px);
		border-right: solid 1px rgba(255, 255, 255, 0.2);
		background: inherit;
		box-sizing: border-box;
	}
	
	.site-header-sidebar:before
	{
		left: 0;
		border-right: none;
		border-left: solid 1px rgba(255, 255, 255, 0.2);
	}
	
	.header-sidebar-box
	{
		min-width: 150px;
		max-width: 150px;
		margin: 0 !important;
		display: flex;
		justify-content: center;
	}
	
	.header-sidebar-box:after
	{
		content: none;
	}
	
	.header-sidebar-box:first-child
	{
	    animation: slide 20s infinite;
	}
	
	@keyframes slide {
	    0% { margin-left: 0; }
	    5% { margin-left: 0; }
	    15% { margin-left: -150px; }
	    20% { margin-left: -150px; }
	    30% { margin-left: -300px; }
	    35% { margin-left: -300px; }
	    45% { margin-left: -450px; }
	    50% { margin-left: -450px; }
	    60% { margin-left: -600px; }
	    65% { margin-left: -600px; }
	    75% { margin-left: -750px; }
	    80% { margin-left: -750px; }
	    90% { margin-left: -900px; }
	    95% { margin-left: -900px; }
	    100% { margin-left: 0px; }
	}
}

@media all and (max-width: 520px)
{
	.site-header-sidebar
	{
		display: none !important;
	}
}