@charset "utf-8";

#search-result {
	max-width: 1280px;
	margin: 0 auto;
}
#search-result #search-header {
	width: 100%;
}
#search-result #search-header ul {
	border: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
#search-result #search-header ul:after {
	clear: both;
	content: '';
	display: block;
}
#search-result #search-header ul li {
	display: inline-block;
	float: left;
	width: calc( 25% - 2px );
	margin: 0;
	padding: 20px 0;
	text-align: center;
	border: 1px solid #5469b0;
	cursor: pointer;
	font-size: 1.45em;
	font-weight: bold;
	transition: background-color 0.2s ease, color 0.2s ease;
}
#search-result #search-header ul li a {
	color: #000;
	width: 100%;
	text-decoration: none;
	transition: color 0.2s ease;
}
#search-result #search-header ul li.active,
#search-result #search-header ul li:hover {
	background: #5469b0;
	color: #fff;
}
#search-result #search-header ul li:hover a,
#search-result #search-header ul li.active a {
	color: #fff;
}
#search-result #search-articles {
	width: 100%;
}
#search-result #search-articles section.section {
	padding: 3% 2.5%;
	border-bottom: 2px solid #5469b0;
}
#search-result #search-articles section.type {
	border-bottom: 0;
}
#search-result #search-articles section.section h2.section-title {
	margin: 1.2% 0 1.8% 0;
	padding: 0;
	font-weight: bold;
}
#search-result #search-articles section article.article a {
	color: #000;
	text-decoration: none;
}
#search-result #search-articles section.section div.more {
	padding: 6% 0 2.5% 0; 
	text-align: left;
}
#search-result #search-articles section.section div.more a.more {
	padding: 12px 30px 14px 30px;
	background: #99ddd3;
	color: #000;
	border: 0;
	border-radius: 5px;
	font-family: "KoddiUDOnGothic-ExtraBold";
	font-size: 1.3em;
	text-decoration: none;
	transition: color 0.2s ease;
}
#search-result #search-articles section.section div.more a.more:hover {
	color: #fff;
}

/*document */
#search-result #search-articles section.document article.article,
.app-attach #search-result #search-articles section.attach article.article {
	padding: 1.7% 0;
}
#search-result #search-articles section.document article.featured {
	position: relative;
	z-index: 3;
	padding: 1.7% 0 1.7% 300px;
	min-height: 120px;
}
#search-result #search-articles section.document article.featured:after {
	clear: both;
	content: ' ';
	display: block;
}
#search-result #search-articles section.document article.featured figure {
	position: absolute;
	z-index: 3;
	left: 0;
	top: 11%;
	width: 270px;
	aspect-ratio: 2 / 1;
	cursor: pointer;
}
#search-result #search-articles section.document article.article h3,
.app-attach #search-result #search-articles section.attach article.article h3 {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.5em;
	margin: 0;
	padding: 0 0 12px 0;
}
#search-result #search-articles section.document article.article p,
#search-result #search-articles section.attach article.article p {
	padding: 0;
	margin: 0;
	line-height: 1.5em;
	font-size: 1.15em;
}
.app-front #search-result #search-articles section.attach article.article p {
	display: none;
}
#search-result #search-articles section.document article.article p span.reg-date,
#search-result #search-articles section.attach article.article p span.reg-date {
	display: inline-block;
	padding-right: 10px;
}
#search-result #search-articles section.document div.more {
	padding-top: 4%;
}

/*media */
#search-result #search-articles section.media .articles:after {
	clear: both;
	content: '';
	display: block;
}

#search-result #search-articles section.media .division {
	padding-bottom: 4%;
}
#search-result #search-articles section.media .division:after {
	clear: both;
	content: '';
	display: block;
}
#search-result #search-articles section.media article.article {
	float: left;
	width: calc( 33% - 20px );
	margin: 0 10px;
	padding: 0;
}
#search-result #search-articles section.media article.article figure {
	width: 100%;
	aspect-ratio: 1 / 1;
}
#search-result #search-articles section.media article.article h3,
.app-front #search-result #search-articles section.attach article.article h3 {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.5em;
	margin: 0;
	padding: 10px 0 0 0;
}
#search-result #search-articles section.media article.article h3 span.reg-date,
#search-result #search-articles section.attach article.article h3 span.reg-date {
	display: inline-block;
	padding-left: 10px;
	font-size: 0.9em;
	font-weight: normal;
}
.app-attach #search-result #search-articles section.attach article.article h3 span.reg-date {
	display: none;
}
#search-result #search-articles .navigation {
	text-align: center;
}
#search-result #search-articles .navigation ul {
	display: inline-block;
	margin: 5% 0;
	padding: 0;
	list-style: none;
}
#search-result #search-articles .navigation ul:after {
	clear: both;
	content: '';
	display: block;
}
#search-result #search-articles .navigation ul li {
	display: inline-block;
	float: left;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
#search-result #search-articles .navigation ul li.current {
	background: #99ddd3;
}
#search-result #search-articles .navigation ul a {
	font-weight: bold;
	color: #000;
	text-decoration: none;
}

/* attach */
button.pdf {
    border-radius: 5px;
    color: #5469b0;
    border: 1px solid #5469b0;
    box-shadow: none;
    margin-left: 10px;
    background: #fff;
    padding: 4px 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
button.pdf:hover {
    background: #5469b0;
    color: #fff;
}
button.pdf:before {
    display: inline-block;
    content: ' ';
    background: url('../images/pdf-icon.svg') no-repeat left top;
    background-size: 100%;
    width: 20px;
    height: 20px;
    filter: invert(39%) sepia(84%) saturate(388%) hue-rotate(188deg) brightness(87%) contrast(83%);
    transition: filter 0.2s ease;
}
button.pdf:hover:before {
    filter: invert(87%) sepia(89%) saturate(0%) hue-rotate(183deg) brightness(110%) contrast(97%);
}

.attache-viewer {
	position: fixed;
	z-index: 10000;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.attache-viewer .attache-viewer-inner {
	position: fixed;
	z-index: 20000;
	width: 90%;
	height: 90%;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}	
.attache-viewer .attache-viewer-inner .pdf-container {
	position: relative;
	z-index: 20001;
}
.attache-viewer .attache-viewer-inner .pdf-container .mobile {
}
.attache-viewer .attache-viewer-inner .pdf-container .pdf-close {
	position: absolute;
	z-index: 20002;
	right: -14px;
	top: -14px;
	width: 28px;
	height: 28px;
	border-radius: 14px;
	background: #5469b0;
	cursor: pointer;
}
.attache-viewer .attache-viewer-inner .pdf-container .pdf-close:before {
	display: inline-block;
	content: ' ';
	width: 20px;
	height: 20px;
	background: url('../images/close-icon.svg') no-repeat left top;
	background-size: 100%;
	filter: invert(87%) sepia(89%) saturate(0%) hue-rotate(183deg) brightness(110%) contrast(97%);
	margin-top: 1px;
}
.attache-viewer .attache-viewer-inner .pdf-container  canvas {
	width: 100%;
	height: 100%;
}
.attache-viewer .attache-viewer-background {
	position: absolute;
	z-index: 10001;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.6;
	background: #333;
}

@media (max-width:719px) {
	#search-result #search-articles section.document,
	#search-result #search-articles section.attach {
		padding: 6%;
	}
	#search-result #search-articles section.media {
		padding: 6% 2.5%;
	}
	#search-result #search-articles section.section h2.section-title {
		margin-bottom: 5%;
	}
	#search-result #search-articles section.media h2.section-title {
		margin-left: 4.5%;
	}
	#search-result #search-articles section.document article.article {
		padding: 3% 0;
	}
	#search-result #search-articles section.document article.featured figure {
		position: relative;
		display: inline-block;
	}
	#search-result #search-articles section.media article.article {
		position: relative;
		z-index: 2;
		width: calc( 50% - 5px );
		margin-bottom: 6px;
		}
		#search-result #search-articles section.media article.article:nth-child(odd) {
			margin-left: 0;
			margin-right: 5px;
		}
		#search-result #search-articles section.media article.article:nth-child(even) {
			margin-left: 5px;
			margin-right: 0;
		}
	#search-result #search-articles section.media article.article figure {
		aspect-ratio: 2 / 1;
	}
	#search-result #search-articles section.section article.article h3 {
		line-height: 1.3em;
	}
	#search-result #search-articles section.media article.article h3 {
		position: absolute;
		z-index: 100;
		width: 80%;
		text-align: left;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		}
		#search-result #search-articles section.media article.article h3 a {
			color: #fff;
		}
	#search-result #search-articles section.section div.more {
		padding: 8% 0;
		text-align: center;
	}
}

/* content */
#article-content {
	max-width: 1280px;
	margin: 0 auto;
	padding-bottom: 5%;
}

#article-content .article-wrapper {
	border: 1px solid #5469b0;
	font-size: 1.2em;
	line-height: 1.5em;
	margin: 0 0 10px 0;
	padding: 0;
	min-height: 28px;
}
#article-content .article-wrapper .field {
	position: relative;
	z-index: 1;
	padding: 20px 20px 20px 22%;
	margin: 0;
	border-bottom: 1px solid #5469b0;
	min-height: 25px;
}
#article-content .article-wrapper .field:last-child {
	border-bottom: 0;
}
#article-content .article-wrapper .field label {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	padding: 20px;
	font-weight: bold;
	background: #cceee9;
	width: 15%;
	height: calc( 100% - 40px );
}

#article-content .article-wrapper .field.subject h2 {
	margin: 0;
	padding: 0;
	font-size: 1.2em;
}
#article-content .article-wrapper .field a {
	text-decoration: none;
	color: #5469b0;
}

#article-content .attachment ul {
	margin: 0;
	padding: 0;
	list-style:none;
}

#article-content .content img {
	max-width: 100%;
}
#article-content .content .content-wrapper{
	line-height: 1.7em;
}

@media (max-width:1279px) {
	#article-content article.article-wrapper {
		margin: 0 3%;
	}
}

@media (max-width:1023px) {
	#article-content .article-wrapper {
		font-size: 1.1em;
	}
	#article-content .article-wrapper .field.subject h2 {
		font-size: 1.1em;
	}
}

@media (max-width:719px) {
	#article-content {
		margin-top: 25px;
	}
	#article-content .article-wrapper {
		margin: 0 5%;
		font-size: 1.0em;
	}
	#article-content .article-wrapper .field {
		padding: 15px 15px 15px 145px;
		overflow-wrap: break-word;
	}
	#article-content .article-wrapper .field.content {
		padding: 15px 15px 15px 15px;
	}
	#article-content .article-wrapper .field label {
		width: 110px;
		padding: 15px 10px;
		height: calc( 100% - 30px );
	}
	#article-content .article-wrapper .field.content label {
		display: none;
	}
	#article-content .article-wrapper .field.subject h2 {
		font-size: 1.0em;
	}
}

@media (max-width:559px) {
	#search-result #search-articles section.document article.article {
		padding: 5% 0;
	}
	#search-result #search-articles section.media article.article h3 {
		max-height: 80%;
		overflow: hidden;
	}
}

@media (max-width:480px) {
	#article-content .article-wrapper {
		margin: 0 5%;
	}
}