@charset "UTF-8";

/*
 * IISポスターギャラリー用スタイル
 * 2023 UTokyo-IIS (2026 modified)
 */

/* ウェブフォントインポート */
@import url(https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,700);


/* 全体 */
html {
	scroll-behavior: smooth;
}

body {
	padding: 0;
	margin: 0.5rem 0 3rem 0;
	font-size: 87.5%;
	font-family: 'Source serif Pro',YuMincho,'Yu Mincho','Hiragino Mincho ProN', Meiryo, serif;
	position: relative;
	color: #303030;
	background-color: #FFFFFF;
	line-height:1.75;
}

hr {
	border: 1px solid #DA9100;
	border-width: 0 0 1px 0;
	clear: both;
	padding: 0;
	margin: 1.5rem 0;
}
@media (min-width:0) and (max-width:699px) {
	hr {
		margin: 0.5rem 0;
	}
}

*:focus-visible {
	outline:0.2rem solid rgba(45, 45, 45, 0.6); /* タブキーでフォーカスを移動させた時のカラーを統一。 */
}
.focus-within-item {
	outline: 0.2rem solid rgba(45, 45, 45, 0.6) !important; /* コントロール項目そのものを非表示とする際、その親要素にフォーカスをあてるために使う。擬似要素focus-withinが普及するまでのつなぎ */
}


/* 一般リンク項目 */
a:link,
a:visited {
	color: inherit;
	background-color: transparent;
	text-decoration: underline;
	text-decoration-color: #FFD47D;
}
a:hover {
	color: #DA9100;
}

/* 一般フォーム項目 */
form {
	padding: 0;
	border: 0;
	margin: 0;
}
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor:pointer;
	height: 3.05rem;
	font-size:0.8rem;
	font-weight:bold;
	color: #303030;
	background-color: #FFF0E7;
	line-height: 1.1;
	padding: 0 1.0rem;
	border: 0;
	border-radius: 0.4rem;
	margin: 0;
	white-space: normal;
	text-overflow: ellipsis;
	overflow: hidden;
}
input[type="search"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor:text;
	height: 3.05rem;
	font-size:1.0rem;
	font-weight:normal;
	color: #303030;
	background-color: rgba(250, 250, 250, 0.8);
	line-height: 1.1;
	padding: 0 1.0rem;
	border: 0.05rem solid #C0C0C0;
	margin: 0;
}
input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	margin: 0;
	height: 1.35rem;
	background: none;
	outline: none;
	cursor: pointer;
	padding-left: 1.8rem;
	vertical-align: middle;
	position: relative;
}
input[type="checkbox"]::before,
input[type="checkbox"]::after {
	content: "";
	display: block; 
	position: absolute;
	padding: 0;
	margin: 0;
}
input[type="checkbox"]::before {
	background-color: #FFFFFF;
	border: 0.12rem solid #909090;
	border-radius: 0.3rem;
	box-shadow: 0.15rem 0.15rem 0 #D0D0D0 inset;
	width: 1.2rem;
	height: 1.2rem;
	top: -0.1rem;
	left: 0;
}
input[type="checkbox"]::after {
	border-bottom: 3px solid #F0F0F0;
	border-left: 3px solid #F0F0F0;
	opacity: 0;
	height: 0.4rem;
	width: 0.6rem;
	transform: rotate(-45deg);
	top:  0.2rem; /* チェック時の位置調整 */
	left: 0.3rem; /* チェック時の位置調整 */
}
input[type="checkbox"]:checked::after {
	opacity: 1;
}
input[type="checkbox"]:checked::before {
	border-color: #DA9100;
	background-color: #DA9100;
	box-shadow: none;
}
button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	vertical-align: middle;
	font-size: 0.9rem;
	font-weight: bold;
	font-family: inherit;
	color: #303030;
	background-color: #FFF0E7;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: 1.5rem;
	margin: 0.25rem;
}
button:hover {
	opacity: 0.8;
	cursor: pointer;
}
button:active {
	opacity: 1;
	color: #FFFFFF;
	background-color: #DA9100;
}

/* ヘッダー */

header {
	max-width: 1200px;
	width: auto;
	padding: 0 1.5rem;
	margin: 0.5rem auto;
}

header .lang-selecter {
	text-align: right;
	font-size: 0.8rem;
	font-family:sans-serif;
	padding: 0;
	margin: 0 0.25rem;
}
header .lang-selecter li {
	display: inline-block;
}
header .lang-selecter li .lang-selecter-selected {
	display: inline-block;
	padding:  0.5rem 0.25rem;
	border-top: 2px solid #DA9100;
	margin: 0 0.25rem;
}
header .lang-selecter li a {
	display: inline-block;
	padding: 0.5rem 0.25rem;
	margin: 0 0.25rem;
}
header .lang-selecter li a:link,
header .lang-selecter li a:visited {
	text-decoration:none;
}

header .header-logo {
	display: inline-block;
	text-align: left;
	vertical-align:middle;
	padding: 0;
	margin: 0;
	width: 302px;
}
header h1 {
	display: inline-block;
	text-align: left;
	vertical-align:middle;
	padding:40px 0 40px 40px;
	margin:0;
	width: auto;
	min-width: 302px;
	font-size:24px;
	font-weight: normal;
	box-sizing: border-box;
	height: 106px;
}
@media (min-width:700px) and (max-width:999px) {
	header h1 {
		width: auto;
		height: auto;
		padding: 0 0 0 20px;
		font-size: 20px;
		font-size: calc(12px + 1.1vw);

	}
	header .header-logo, header .header-logo img {
		width: 151px;
		min-width: 151px;
	}
}
@media (min-width:0) and (max-width:699px) {
	header h1 {
		display: block;
		text-align: center;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0.25rem 0;
		font-size: 14px;
		font-size: calc(11px + 0.75vw);
	}
	header .header-logo img {
		padding: 0;
		margin: 0;
		width: 151px;
	}
}

/* フィルター操作ボックス */
#Controller {
	width: auto;
	max-width: 1200px;
	padding: 0 1rem;
	margin: 1rem auto;
}

#Controller p {
	font-size:0.9rem;
}

@media (min-width:0) and (max-width:999px) {
	#Controller p {
		font-size: 0.75rem;
	}
}

#Controller #ControlCategory {
	display:flex;
	justify-content: space-around;
}
#Controller #ControlCategory .select-pg {
	line-height: 1.0;
	padding: 1.0rem;
	margin: 0.5rem 0.375rem;
	border: 1px solid #DA9100;
	width: 25.0%;
}
#Controller #ControlCategory .select-pg:hover {
	opacity: 0.8;
}

#Controller #ControlCategory .select-pg .select-pg-title {
	display: block;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1.0rem; 
	font-weight: bold;
	padding: 0.25rem 0;
	margin: 0.25rem 0;
}

#Controller #ControlCategory .select-pg select {
	width: 100%;
}
#Controller #ControlCategory .select-pg input[type="search"] {
	width: 100%;
}
#Controller #ControlCategory .select-pg select:active,
#Controller #ControlCategory .select-pg input[type="search"]:active {
	outline: 0.2rem solid #DA9100;
}


@media (min-width:0) and (max-width:799px) {
	#Controller {
		width: 100%;
		max-width: 100%;
		padding: 0;
		margin: 1rem 0rem;
	}
	#Controller #ControlCategory {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		line-height:1;
		padding: 0;
		margin: 0.25rem 0.5rem;
	}
	#Controller #ControlCategory .select-pg {
		width: calc(50% - 1.5rem);
		overflow: hidden;
		padding: 0.5rem;
		margin: 0.1rem 0.1rem;
	}
	#Controller #ControlCategory .select-pg .select-pg-title {
		vertical-align: middle;
		text-align: center;
		font-size: 0.9rem; 
		font-weight: bold;
		padding: 0.1rem 0.5rem;
		margin: 0.5rem 0.1rem;
	}
	#Controller #ControlCategory .select-pg select {
		padding: 0 0.5rem;
		margin: 0;
	}
	#Controller #ControlCategory .select-pg input[type="search"] {
		width: 100%;
		padding: 0.5rem 0.5rem;
		margin: 0;
	}
}

#Controller #ControlCategory .selected-filter{
	color:#FFFFFF !important;
	background: #DA9100 !important;
}

/* ポスターを大きく表示するボタン */
#Controller #ControlPosterSize {
	height: 3.1rem;
	padding: 0;
	margin: 0.5rem 1rem;
	text-align: right;
}
#Controller #ControlPosterSize label {
	display: inline-block;
	vertical-align: middle;
	font-size: 0.9rem;
	font-weight: bold;
	color: #303030;
	background-color: #FFF0E7;
	padding: 0.75rem calc(2rem + 2%) 0.6rem calc(2rem + 2%);
	border-radius: 1.5rem;
}
#Controller #ControlPosterSize label:hover {
	opacity: 0.8;
	cursor: pointer;
}
#Controller #ControlPosterSize label:active {
	opacity: 1;
	color: #FFFFFF;
	background-color: #DA9100;
}

/* ポスター表示領域 */
#DisplaySpace {
	width: auto;
	max-width: 1600px;
	text-align: center;
	padding: 0.5rem 0;
	margin: 1rem auto;
	color: #303030;
	background-color: #FFFFFF;
}
#DisplaySpace .container {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0 0 0 2%;
}
#DisplaySpace .container .mix {
	width: calc(25% - 0.25rem);
	padding: 0.5rem 0rem;
	border: 0;
	margin: 0;
	position: relative;
	transition: width 0.5s ease;
}

#DisplaySpace .container .mix img {
	width: 100%;
	max-width: 756px !important;
	height: auto;
	z-index: 10;
	font-family: sans-serif; /* alt用 */
	font-size: 20%; /* alt用 */
	color:#E0E0E0; /* alt用 */
	background-color: transparent;
	background-image: url('../img/dummy_poster.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	padding: 4px 0;
}

#DisplaySpace .container .mix a:hover {
	opacity: 0.9;
}

@media (min-width:600px) and (max-width:999px) {
	#DisplaySpace .container .mix {
		width: calc(33% - 0.25rem)
	}
	#DisplaySpace .container .mix img {
		width: 100%;
		max-width: 756px !important;
	}
}

@media (min-width:0px) and (max-width:599px) {
	#DisplaySpace .container .mix {
		width: calc(50% - 0.4rem);
	}
	#DisplaySpace .container .mix img {
		width: 100%;
	}
}

#DisplaySpace.show-larger .container {
	width: calc(100% - 22px) !important;
	max-width: 756px !important;
	margin: 0 auto;
}

#DisplaySpace.show-larger .container .mix {
	width: 100% !important;
	max-width: 756px !important;
}

#DisplaySpace.show-larger .container .mix .caption {
	font-size: 1rem;
	height: auto;
}

@media (min-width:0px) and (max-width:699px) {
	#DisplaySpace.show-larger .container .mix .caption {
		font-size: 0.9rem;
	}
}

#DisplaySpace .container .mix .caption {
	position: absolute;
	top: -0.1vh;
	left: 0.2vw;
	z-index: 20;
	width: 95%;
	height: 1.25rem; 
	display: block;
	overflow: hidden;
	color: #707070;
	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 0.8rem;
	font-family: sans-serif;
	padding: 0 0.5rem;
	border: 0;
	margin: 0;
}

@media (min-width:0) and (max-width:699px) {
	#DisplaySpace .container .mix .caption {
		font-size: 0.7rem;
	}
}

#DisplaySpace .container .mix .caption a:link,
#DisplaySpace .container .mix .caption a:visited {
	text-decoration: underline;
	text-decoration-color: #FFD47D;
}
#DisplaySpace .container .mix .caption a[target="_blank"]::after {
	/* SVGデータ埋め込み */
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjExcHgiIGhlaWdodD0iMTFweCIgdmlld0JveD0iMCAwIDExIDExIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjcuMSAoMjgyMTUpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPl9hbmNob3ItZXh0ZXJuYWw8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iYW5jaG9yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDIuMDAwMDAwLCAtMTAuMDAwMDAwKSIgZmlsbD0iI0RBOTEwMCI+CiAgICAgICAgICAgIDxnIGlkPSJfYW5jaG9yLWV4dGVybmFsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Mi4wMDAwMDAsIDEwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDExIEw4LDExIEw4LDMgTDAsMyBMMCwxMSBaIE0xLDEwIEw3LDEwIEw3LDQgTDEsNCBMMSwxMCBaIiBpZD0iRmlsbC0xIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IkZpbGwtMiIgcG9pbnRzPSIxLjk5OTggMC4wMDAyIDEuOTk5OCAxLjAwMDIgOS45OTk4IDEuMDAwMiA5Ljk5OTggOS4wMDAyIDEwLjk5OTggOS4wMDAyIDEwLjk5OTggMC4wMDAyIj48L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
	content: '';
	display: inline-block;
	height: 11px;
	border-bottom: 0px;
	margin-left: 0.2rem;
	margin-right: 0.2rem;
	width: 11px;
	vertical-align: top;
}

/* 最初のポスター（生研ポスター）と説明 */
#DisplaySpace #FirstPage {
	font-size:0.9rem;
	text-align:left;
	width: auto;
	max-width: 1200px;
	padding: 0 1rem;
	margin: 0 auto;
}

@media (min-width:0) and (max-width:699px) {
	#DisplaySpace #FirstPage {
		font-size: 0.75rem;
		min-width: 280px;
		max-width: 600px;
	}
}

#DisplaySpace #FirstPage p {
	padding: 0;
	margin: 0;
}

#DisplaySpace #FirstPage #IISPoster {
	text-align: center;
}

#DisplaySpace #FirstPage #IISPoster img {
	width: 90%;
	min-width: 280px;
	max-width: 677px;
	height: auto;
}

/* 読み込み中 */
#NowLoading {
	text-align: center;
	padding: 0;
	margin: 50px 0;
}
#NowLoading img {
	max-width: 20vw;
	max-height: 20vw;
}

/* フィルター例 */
#FilterExample {
	width: auto;
	max-width: 1200px;
	padding: 0 1rem;
	margin: 1rem auto;
	text-align:center;
}
#FilterExample div {
	border-bottom: 1px solid #DA9100;
	padding: 0.5rem;
	margin: 0.75rem 0;
	font-weight: bold;
}
#FilterExample p {
	text-align: left;
	margin: 0.75rem 0;
}
#FilterExample p,
#FilterExample p * {
	font-size:0.8rem;
}
@media (min-width:0) and (max-width:699px) {
	#FilterExample p,
	#FilterExample p * {
		font-size:0.7rem;
	}
}


/* 著作権表示 */
#Copyright {
	text-align: center;
	font-size: 0.75rem;
	margin: 2.5rem 0;
}

/* トップへ戻る */
.to-page-top {
	display: block;
	position: fixed;
	bottom: 1.5rem;
	right: 1px;
}
.to-page-top a {
	display: block;
	line-height: 1;
	text-align: center;
	color: #202020;
	background-color: #C0C0C0;
	text-align: center;
	font-size: 20px;
	text-decoration: none;
	padding: 12px;
	opacity: 0.5;
	box-shadow: 0 0.25rem 0.4rem rgba(0, 0, 0, 0.3);
}
.to-page-top a:link,
.to-page-top a:visited,
.to-page-top a:focus-visible {
	color: #202020;
	background-color: #C0C0C0;
	opacity: 0.5;
}

.to-page-top a:hover {
	color: #FFFFFF;
	background-color: #DA9100;
	opacity: 0.8;
}
.to-page-top a:active {
	background-color: #DA9100;
	opacity: 1.0;
}