@charset 'utf-8';


#container > .inner {
	max-width: none;
}

.articleblock,
body.safearea .articleblock {
	max-width: none;
	padding: 0;
	padding-top: 30px;
}

.articleblock .blockheader {
}

.articleblock .blockheader + .movearticle {
	margin-top: -20px;
	margin-bottom: 20px;
	padding-top: 0;
}

#worksblock .articlelistbody {
	width: 100%;
	background: #fff;
}

body#portal #worksblock .articlelistbody {
	background: transparent;
}

#worksblock .articlelistbody > .inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

body.safearea #worksblock .articlelistbody > .inner {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}


#worksblock .articlelistbody.empty {
	background: none;
}

#worksblock .articlelistbody > .inner > header h2 {
}

#worksblock .articlelist {
	margin-bottom: 0;
}


#worksblock .articlelist.card {
	padding: 1% !important;
}

#worksblock .articlelist.card .item {
	width: 50%;
	padding: 3% !important;
	border: none;
	font-size: 1em;
}

#worksblock .articlelist .item:first-child {
}

#worksblock .articlelist .item .icon {
}

#worksblock .articlelist.card .item.hover .icon span {
}

#worksblock .articlelist .item .custommeta {
	margin-bottom: 1em;
}

#worksblock .articlelist .item .custommeta span {
	display: inline-block;
	padding: .3em 1em;
	background: #fff;
	font-size: 1em;
	color: #003f6a;
	font-weight: 700;
}

#worksblock .articlelist.card .item article {
	display: flex;
	flex-direction: column;
	padding: 0 !important;
	box-shadow: none !important;
	background: none !important;
	transition: .2s;
}

#worksblock .articlelist.card .item.hover article {
}

#worksblock .articlelist.card.thumb .item .enclosed {
}

#worksblock .articlelist .item .title {
	font-size:  1.2em;
	margin: 0;
}

#worksblock .articlelist .item .title a {
	color: #fff;
}

#worksblock .articlelist.card .item.hover .enclosed {
}

#worksblock .articlelist.card.thumb .item .enclosed .additionelem {
	width: 100%;
}

#worksblock .articlelist.card.thumb .item .enclosed .additionelem .addition {
	width: 100%;
}

#worksblock .articlelist.card.thumb:not(.arrowicon) .item {
}

#worksblock .articlelist.card.thumb:not(.arrowicon) .item article {
	background: #f79646 !important;
	padding: 2px !important;
}

#worksblock .articlelist.card.thumb:not(.arrowicon) .item.hover article {
	background: #f9b073 !important;
}

#worksblock .articlelist.card.thumb:not(.arrowicon) .item .enclosed {
}

#worksblock .articlelist.card .item .thumb {
	width: 100%;
}

#worksblock .articlelist.card .item figure {
	border-radius: 0;
	padding-top: 56.25% !important;
}

#worksblock .articlelist.card .item.hover figure img {
}

#worksblock .articlelist .item .additionelem {
	margin-top: auto;
	text-align: right;
}

@media only screen and (min-width: 481px) {

	#worksblock .articlelist.card .item {
		padding: 2% !important;
	}
}

@media only screen and (min-width: 541px) {

	#worksblock .articlelist.card.thumb:not(.arrowicon) .item .enclosed {
	}
}

@media only screen and (min-width: 769px) {

	.articleblock,
	body.safearea .articleblock {
		padding-top: 50px;
	}

	#worksblock .articlelist .item .custommeta span {
		font-size: 1.2em;
	}

	#worksblock .articlelist .item .title {
		font-size:  1.4em;
	}

	#worksblock .articlelist.card .item {
		width: 33.33%;
		padding: 1% !important;
	}

	#worksblock .articlelist.card .item article {
	}

	#worksblock .articlelist.card .item.hover article {
	}

	#worksblock .articlelist.card.thumb .item .enclosed {
	}

	#worksblock .articlelist.card .item.hover .icon span {
		opacity: 0;
		transform: translateY(0);
	}
}

@media only screen and (min-width: 1001px) {

	#worksblock .articlelist.card .item {
		padding: 2% !important;
	}
}



body.safearea:not(.index) .articlelistbody.empty .inner {
	padding-left: calc(env(safe-area-inset-left) + 20px);
	padding-right: calc(env(safe-area-inset-right) + 20px);
}



.articlelistbody.empty {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	font-size: 1rem;
	line-height: 1.6;
}

.articlelistbody.empty .inner {
	padding: 20px;
}

.articlelistbody.empty .sentence {
	padding: 30px 20px;
	border: 1px solid #ccc;
	background: #f2f2f2;
}

.articlelistbody.empty .sentence p {
	font-size: 1em;
	line-height: 1.6;
}

.articlelistbody.empty .sentence p:not(:last-child) {
	margin-bottom: 1em;
}