@charset "UTF-8";
/* CSS 鳥取大学附属図書館・医学図書館 */

/* 全体 */

:root {
	--max-width-pc: 1440px;
	--max-width-pc-content: 1120px;
	--max-width-tab: 1080px;
	--max-width-tab-content: 1050px;
	--max-width-sp: 800px;
	--max-width-sp-content: 740px;
	--font-size-title: 1.8rem;
	--font-size-headline1: 1.4rem;
	--font-size-headline2: 1.2rem;
	--font-size-headline3: 1.1rem;
	--font-size-menu: 1.2rem;
	--font-size-submenu: 0.8rem;
	--font-size-text: 1.05rem;
	--font-size-subtext: 0.85rem;
	--font-size-minitext: 0.7rem;
	--color-blue-main: 60 103 184;
	--color-blue-main-rgb: rgb(60 103 184);
	--color-blue-sub1: 14 56 134;
	--color-blue-sub1-rgb: rgb(14 56 134);
	--color-blue-sub2: 30 79 170;
	--color-blue-sub2-rgb: rgb(30 79 170);
	--color-blue-sub3: 92 131 202;
	--color-blue-sub3-rgb: rgb(92 131 202);
	--color-blue-sub4: 135 166 222;
	--color-blue-sub4-rgb: rgb(135 166 222);
	--color-blue-sub5: 183 202 238;
	--color-blue-sub5-rgb: rgb(183 202 238);
	--color-main-3: 0 122 183;
	--color-main-4: 7 85 124;
	--color-orange-main: 243 199 89;
	--color-orange-main-rgb: rgb(243 199 89);
	--color-orange-sub1: 243 175 11;
	--color-orange-sub1-rgb: rgb(243 175 11);
	--color-orange-sub2: 249 227 170;
	--color-orange-sub2-rgb: rgb(249 227 170);
	--color-orange-sub3: 254 247 213;
	--color-orange-sub3-rgb: rgb(254 247 213);
	--color-green-main: 160 185 57;
	--color-green-main-rgb: rgb(160, 185, 57);
	--color-green-sub1: 130 154 29;
	--color-green-sub1-rgb: rgb(130 154 29);
	--color-green-sub2: 194 217 96;
	--color-green-sub2-rgb: rgb(194 217 96);
	--color-green-sub3: 228 246 150;
	--color-green-sub3-rgb: rgb(228 246 150);
	--color-red-main: 187 59 77;
	--color-red-sub1: 157 31 48;
	--color-red-sub2: 219 98 115;
	--color-red-sub3: 245 151 164;
	--color-subC-2: #F3C0AB;
	--color-subC-3: #DA5019;
	--color-subD-1: #8B90BE;
	--color-subD-2: #BFC2DF;
	--color-subD-3: #5D639E;
	--color-mono-1: 32 32 32;
	--color-mono-2: 42 42 42;
	--color-mono-3: 53 53 53;
	--color-mono-4: 65 65 65;
	--color-mono-5: 94 95 95;
	--color-mono-6: 108 108 108;
	--color-mono-7: 138 138 138;
	--color-mono-8: 159 157 157;
	--color-mono-9: 199 199 199;
	--color-mono-10: 217 217 217;
	--color-mono-11: 237 237 237;
	--color-toridai-blue1: 14 41 132;
	--color-toridai-blue2: 194 201 224;
	--color-toridai-green1: 0 103 102;
	--color-toridai-green2: 0 98 83;
}

html {
	scroll-behavior: smooth;
}


/* Body */

body {
	font-family: "游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
	margin: 0 auto;
	text-align: left;
	line-height: 2rem;
}
	
p {
	margin: 0;
	padding: .75rem 0;
}
	
dl {
	
	dt {
		width: 100%;
		margin-top: 15px;
		text-decoration: underline;
		text-underline-offset: 5px;
	}
		
	dd {
		margin: 10px 0 0 3rem;
	}
}

.dl_bottom {
	border-bottom: 1px solid #FFF;
	margin-bottom: 15px;
}
	

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	margin:0;
	padding: 0;
}
	
a,
a:link {
	color:  rgb(var(--color-blue-sub2));
	text-decoration: none;
	transition: .2s;
}
	
a:hover {
	color: rgb(var(--color-blue-sub4));
	text-decoration: underline;
}
	
.img_border {
	border: 1px solid rgb(var(--color-mono-8));
}


.news-area {
	display: inline-block;
	border: 1px solid rgb(var(--color-mono-4));
	border-radius: 3px;
	color: rgb(var(--color-mono-4));
}

.news-area.all {
	color: rgb(var(--color-red-main));
	border-color: rgb(var(--color-red-main));
} 

.news-area.tottori {
	color: rgb(var(--color-blue-main));
	border-color: rgb(var(--color-blue-main));
} 

.news-area.yonago {
	color: rgb(var(--color-green-sub1));
	border-color: rgb(var(--color-green-sub1));
}

.fa-solid { /* Font Awesome アイコン幅調整 */
	width: auto !important;
}

/* HEADER */

.header {
	position: relative;
	width: 100%;
	box-shadow: 0 0 1px rgba(0,0,0,.6);

	/* header navigation */

	.header-nav {
		width: 100%;
		background-color: rgb(var(--color-toridai-blue1));

		.header-nav-container {
			box-sizing: border-box;
			width: 100%;
			max-width: var(--max-width-pc);
			margin: 0 auto;
			padding: 10px 30px;
			font-size: var(--font-size-subtext);
			color: white;

			a {
				color: white;
			}


			.header-nav-text {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				gap: 25px;

				span {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					min-height: 30px;
					text-align: center;

					a {
						line-height: 1rem;
						padding: 7px 10px;
						transition: .2s;
						background-color: none;
					}

					a:hover {
						text-decoration: none;
						color: rgb(var(--color-mono-8));
					}
				}

				span.header-nav-univtop {
					margin-right: auto;

					a {
						i {
							margin-right: 10px;
						}
					}
				}

				span.sns-link {

					a {
						display: flex;
						padding: 3px;
						width: 30px;
						height: 30px;
						border-radius: 50%;
						color: rgb(var(--color-mono-10));
						background-color: rgb(0 0 0 / .5);
						align-items: center;
						justify-content: space-around;

						i {
							font-size: 1.5rem;
							font-weight: 100;
							transition: .2s;
						}
					}

					a:hover {
						color: white;
						background-color: rgb(0 0 0 / .1);
						text-decoration: none;
					}
				}

				.site-search {

					display: flex;
					flex-wrap: nowrap;

					.search-form-text {
						height: 30px;
						padding: 0 20px;
						margin: 0 !important;
						border: none;
						font-size: .95rem;
						overflow: hidden;
						transition: .1s;
						width: 120px;
					}
					
					.search-form-btn {
						width: 30px;
						height: 30px;
						margin: 0 !important;
						border: none;
						background-color: rgb(0 0 0 / .35);
						background-image: url(https://www.lib.tottori-u.ac.jp/components/img/search_icon.png);
						background-size: 18px;
						background-position: 50% 50%;
						background-repeat: no-repeat;
						cursor: pointer;
						transition: .2s;
					}

					.search-form-btn:hover {
						background-color: rgb(255 255 255 / .35);
						color: rgb(var(--color-mono-3)) !important;
						text-decoration: none;
					}
				}

				.site-search:focus-within input,
				.site-search:focus-within select {
					outline:none;
					border: none;
				}
			}
		}
	}


	/* header menu */

	.header-menu {
		box-sizing: border-box;
		width: 100%;
		max-width: var(--max-width-pc);
		margin: 0 auto;
		padding: 0 30px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

		/* header-menu library-name */

		.library-name {
			max-width: 100%;
			min-height: 100px;
			flex-grow: 1;
			text-align: center;

			a {
				width: 100%;
				height: 100%;
				text-decoration: none;
				display: flex;
				justify-content: center;
				color: rgb(var(--color-mono-2));
			}

			a:hover {
				color: rgb(var(--color-mono-2));
			}

			.library-name-text {
				padding-left: 65px;
				font-family: "Noto serif JP";
				display: flex;
				flex-flow: column;
				justify-content: center;
				position: relative;

				.main {
					width: 100%;
					font-size: 1.25rem;
					letter-spacing: 5px;
				}

				.sub {
					width: 100%;
					font-size: .70rem;
					letter-spacing: 3px;
					line-height: 1.2rem;
				}
			}
	
			.library-name-text::before {
				content: "";
				display: inline-block;
				width: 50px;
				height: 50px;
				background-image: url(https://www.lib.tottori-u.ac.jp/components/img/librarylogo_main3.png);
				background-size: contain;
				background-repeat: no-repeat;
				background-position: 50% 50%;
				position: absolute;
				left: 0;
				opacity: .7;
			}
		}

		/* header-menu select-library */

		.select-library {
			max-width: 100%;
			background-color: white;
			display: flex;
			flex-wrap: wrap;
			flex-grow: 1;

			a {
				min-height: 70px;
				padding: 0 10px;
				transition: .2s;
				display: inline-flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;
				flex-grow: 1;
			}

			a:hover	{
				background-color: rgb(var(--color-toridai-blue2) / .3);
				text-decoration: none;
			}

			.select-library-main {
				display: block;
				color: rgb(var(--color-mono-3));
				font-size: 1.2rem;
				letter-spacing: 3px;
			}

			.select-library-sub {
				display: block;
				font-size: var(--font-size-minitext);
				line-height: .85rem;
				color: rgb(var(--color-mono-5));
			}
		}
	}
}


/* MAIN CONTENTS */

.main-content {
	width: 100%;
	margin: 0 auto 50px;
	display: grid;
}

.main-content.home {
	grid-template-columns: auto minmax(0, calc(var(--max-width-pc) - 480px)) 240px auto;
	grid-template-rows: auto 1fr auto auto;
	grid-template-areas: 
		"search-and-guide search-and-guide search-and-guide search-and-guide"
		". guide-by-library guide-by-library ."
		". news menu-side ."
	;
	row-gap: 20px;
	column-gap: 50px;
}

.main-content.article {
	max-width: var(--max-width-pc);
	margin: 0 auto;
	grid-template-columns: auto 1fr auto auto;
	grid-template-rows: auto;
	grid-template-areas: 
		". article menu-side ."
	;
	gap: 50px;
}


/* SEARCH-AND-GUIDE */

.search-and-guide {
	grid-area: search-and-guide;
	box-sizing: border-box;
	width: 100%;
	padding: 140px 30px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	background:
		linear-gradient(transparent 300px, rgba(var(--color-mono-4)) 800px),
		url(https://www.lib.tottori-u.ac.jp/components/img/top_bg_v2-9.jpg)
	;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	overflow: hidden;

	.search-box {
		width: 100%;
		min-width: 800px;
		max-width: var(--max-width-pc);
		margin: 0 auto;
		position: relative;
		display: flex;
		flex-flow: row;
		justify-content: center;
		align-items: stretch;
		gap: 35px;

		.form-container {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			max-width: 700px;
			min-height: 50px;
			padding: 10px;
			background-color: white;
			border-radius: 15px;
			align-items: center;

			.form-container-box {
				box-sizing: border-box;
				width: 100%;
				min-height: 100px;
				max-height: calc(100% - 20px);
				padding: 10px;
				border-radius: 15px;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				
				.search-form {
					width: calc(100% - 40px);
					min-height: 50px;
					margin: 10px 20px;
					display: flex;
					justify-content: center;

					.search-form-text {
						height: 50px;
						padding: 0 20px;
						margin: 0 !important;
						box-shadow: inset 0 0 2px rgb(var(--color-mono-6) / .75);
						border: none;
						font-size: .95rem;
						overflow: hidden;
						transition: .1s;
					}
					
					.search-form-text.opac {
						width: 60%;
					}
					
					.search-form-text.subject-library {
						flex-grow: 1;
						min-width: 150px;
						max-width: 600px;
					}

					.search-detail {
						display: flex;
						align-items: center;
						justify-content: center;
						min-width: 90px;
						min-height: 50px;
						width: 10%;
						margin-left: 5px;
						padding: 0 15px;
						font-size: .95rem;
						line-height: 1.1rem;
						color: white !important;
						background-color: rgb(var(--color-mono-5));
		
						i {
							margin-right: 10px;
						}
					}
					
					
					.search-form-btn {
						width: 50px;
						height: 50px;
						margin: 0 !important;
						border: none;
						background-color: rgb(var(--color-toridai-blue1));
						background-image: url(https://www.lib.tottori-u.ac.jp/components/img/search_icon.png);
						background-size: 25px;
						background-position: 50% 50%;
						background-repeat: no-repeat;
						cursor: pointer;
						transition: .1s;
					}
					
				}
				
				.search-form:focus-within input,
				.search-form:focus-within select {
					outline:none;
					border: none;
				}
				
				.search-form select[name="selectSubject"] {
					width: 200px;
					min-width: 100px;
					max-width: 200px;
					min-height: 50px;
					font-size: .95rem;
					margin-right: 5px;
					padding: 10px;
					color: white;
					background-color: rgb(var(--color-mono-4));
					border: none;
					cursor: pointer;
					transition: .1s;
				}
				
				.search-form-btn:hover,
				.search-detail:hover {
					background-color: rgb(var(--color-toridai-blue1) / .7);
					color: rgb(var(--color-mono-3)) !important;
					text-decoration: none;
				}

				.search-form select[name="selectSubject"]:hover {
					background-color: rgb(var(--color-mono-6));
					text-decoration: none;
				}				

				.form-description {
					width: calc(100% - 40px);
					margin: 0 20px;
					display: flex;
					flex-wrap: nowrap;
					font-size: .85rem;

					span {
						min-width: 180px;
					}

					.form-description-links {
						display: flex;
						flex-wrap: wrap;
						column-gap: 20px;
					}
				}
				
				.form {
					margin-left: 5px;
				}
			}
		}

		/* GUIDE BY LIBRARY */
		.guide-by-library {
			width: 25%;
			min-width: 290px;
			min-height: 150px;
			position: relative;
			background-color: white;
			border-radius: 10px;

			.library-box-container {
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				margin: 0 auto;
				padding: 10px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				gap: 5px;

				.library-box {
					width: 100%;
					min-width: 220px;
					max-width: 300px;
					position: relative;
					background-color: white;
					display: flex;
					align-items: center;

					a {
						text-decoration: none;
					}

					.name-and-openhour {
						box-sizing: border-box;
						width: 100%;
						padding: 8px 15px 4px;
						gap: 5px;
						line-height: 1.5rem;
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						justify-content: space-evenly;
						transition: .2s;

						h3 {
							display: inline-block;
							box-sizing: border-box;
							width: calc(100% - 10px);
							font-size: .9rem;
							margin-right: 10px;
							line-height: 1.5rem;
							padding: 0 10px;
						}

						.openhour-today {
							display: flex;
							align-items: center;
							padding: 2px 0;
							font-size: .95rem;
							flex-basis: 135px;

							span.openhour-today-badge {
								min-width: 46px;
								margin: 0 7px 0 0;
								padding: 2px 0 2px 2px;
								color: white;
								text-align: center;
								font-size: .7rem;
								font-weight: bold;
								line-height: 1.25rem;
								letter-spacing: 2px;
								border-radius: 5px;
							}

							span.openhour-today-badge.cen {
								background-color: rgb(var(--color-blue-sub3));
							}

							span.openhour-today-badge.med {
								background-color: rgb(var(--color-green-main));
							}
						}
					}

					.openhour-schedule {
						display: inline-block;
						width: 100%;
						text-align: center;
						color: white;
						border-radius: 30px;
						background-color: rgb(var(--color-toridai-green2));
						font-size: .7rem;
						line-height: 1rem;
						flex-basis: 90px;
						flex-grow: 1;
						flex-shrink: 1;
						padding: 5px;

						i::before {
							margin-right: 5px;
						}
					}

					.openhour-schedule:hover {
						background-color: rgb(var(--color-toridai-green2) / .7);
						color: white;
						text-decoration: none;
					}

				}

				.central .name-and-openhour	h3 {
					border-left: 3px solid rgb(var(--color-blue-main));
				}

				.medical .name-and-openhour h3 {
					border-left: 3px solid rgb(var(--color-green-main));
				}
			}
		}
	}
}


/* Dot Filter */

.search-and-guide::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.1);
	background-image:
		radial-gradient(rgba(0, 0, 0, 0.5) 30%, transparent 20%),
		radial-gradient(rgba(0, 0, 0, 0.5) 30%, transparent 20%)
	;
	background-size: 4px 4px;
	background-position: 3px 3px, 5px 5px;
}



/* NEWS */

.news {
	grid-area: news;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--max-width-pc);
	height: 100%;
	min-height: 300px;
	max-height: 600px;
	margin-bottom: 20px;

	.news-container {
		max-width: 100%;
		height: 100%;
		background-color: white;
		border-top: 1px solid rgb(var(--color-mono-7));
		border-bottom: 1px solid rgb(var(--color-mono-7));
		overflow: hidden scroll;

		.news-frame {
			width: 100%;
			height: 100%;
			padding: 5px 0 20px;
			margin: 5px 0;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
		}

		.news-archive-link {
			display: block;
			width: 80%;
			margin: 0 auto;
			padding: 20px 0;
			font-size: var(--font-size-subtext);
			text-align: center;	

		}
	}
}

ul.news-list {
	box-sizing: border-box;
	width: 100%;
	padding: 0 15px;
	line-height: 1.5rem !important;
	font-size: var(--font-size-text);
	border-top: 1px solid rgb(var(--color-mono-9));


	li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		box-sizing: border-box;
		width: 100%;
		padding: 5px 5px;
		column-gap: 15px;
		border-bottom: 1px solid rgb(var(--color-mono-9));

		.news-date {
			display: block;
			min-width: 91px;
			padding: 8px 0;
			text-align: center;
		}
		
		.news-area {
			display: block;
			min-width: 46px;
			margin: 8px 0;
			padding: 0 10px;
			text-align: center;
			font-size: .75rem;
			letter-spacing: 5px;
		}

		.news-area.all::before {
			content: "全館";
		}

		.news-area.tottori::before {
			content: "鳥取";
		}

		.news-area.yonago::before {
			content: "米子";
		}

		.news-title {
			display: block;
			box-sizing: border-box;
			width: 100%;
			min-width: 300px;
			padding: 15px 0 20px 25px;
			color: rgb(var(--color-mono-4)) !important;
		}
	}
}



/* MENU-SIDE */

.menu-side {
	grid-area: menu-side;
	width: 240px;
	transition: .2s;
	background-color: white;
	align-self: start;

	.menu-side-container {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 10px;

		.menu-side-services {
			padding-left: 0;
		}
	}
}


/* Side Menu Lists */
/* sp-menuと共通のためmenu-side下には入れない */

.menu-side-list {
	list-style: none;
	box-sizing: border-box;
	width: 100%;
	margin: 15px 0;
	padding-left: 10px;
	transition: .2s;

	.menu-side-list-child {
		display: block;
		width: 100%;
		font-size: .9rem;
		color: rgba(var(--color-mono-4));
		line-height: normal;
		display: flex;
		align-items: center;
		transition: .2s;

		a {
			display: block;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 0 10px 12px;
			color: rgba(var(--color-mono-4));
			transition: .2s;
		}
	}

	.sublist-container {
		cursor: pointer;
		overflow: hidden;

		.menu-side-list-child {
			position: relative;
			display: block;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 0 10px 30px;
			color: rgba(var(--color-mono-4));
			border-bottom: none;
			transition: .2s;
		}

		.menu-side-sublist {
			list-style: none;
			margin: 0;
			padding: 0;
			max-height: 0vh;
			transition: .2s;
			overflow: hidden;

			.menu-side-sublist-child {
				display: block;
				margin-left: 20px;
				transition: .2s;
			
				a {
					display: block;
					box-sizing: border-box;
					width: 100%;
					padding: 10px 0 10px 20px;
					font-size: .85rem;
					color: rgba(var(--color-mono-4));
					line-height: normal;
				}
			}
		}

		.menu-side-list-child::before,
		.menu-side-list-child::after {
			content: "";
			display: block;
			width: 10px;
			height: 2px;
			border-radius: 2px;
			background-color: rgba(var(--color-mono-4));
			position: absolute;
			top: 46%;
			left: 10px;
			transition: .2s;
		}

		.menu-side-list-child::after {
			transform: rotate(90deg);
		}
	}

	.menu-side-list-child:hover,
	.menu-side-sublist-child:hover {
		text-decoration: underline;
		background-color: rgba(var(--color-toridai-blue2) / .5);
	}

	i {
		margin-right: 10px;
	}
}

.menu-side-list input[type="checkbox"] {
	display: none;
}

.menu-side-list input[type="checkbox"]:checked + .sublist-container .menu-side-sublist {
	max-height: 100vh;
}

.menu-side-list input[type="checkbox"]:checked + .sublist-container .menu-side-list-child {
	background-color: rgba(var(--color-toridai-blue2));
}

.menu-side-list input[type="checkbox"]:checked + .sublist-container .menu-side-list-child::after {
	transform: rotate(0deg);
}

.menu-side-list input[type="checkbox"]:checked + .sublist-container .menu-side-list-child::before {
	transform: rotate(180deg);
}

.menu-side::before,
.menu-side::after {
	content: "";
	display: block;
	width: calc(100% - 20px);
	height: 4px;
	background-color: rgb(var(--color-toridai-blue2));
	margin: 0 auto;
	border-radius: 10px;
}





/* FOOTER  */

.footer {
	width: 100%;
	background-color:  rgb(var(--color-toridai-blue1));
	position: relative;

	/* Footer Ad Banners  */

	.advertise-box {
		width: 100%;
		background-color: rgba(var(--color-toridai-blue2));
	
		.ad {
			box-sizing: border-box;
			width: 100%;
			max-width: var(--max-width-pc);
			margin: 0 auto;
			padding: 60px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			align-content: flex-start;

			.banner {
				margin: 10px 1%;
				padding: 10px 15px;
				display: block;
				background-color: white;
				border-radius: 3px;
				transition: .2s;
			}

			.banner:hover {
				background-color: rgb(var(--color-toridai-blue1) / .3);

				img {
					border-color: white;
				}
			}

			img {
				width: 180px;
				height: 100%;
				border: 1px solid rgb(var(--color-mono-10));
			}
		}
	}

	.footer-box {
		box-sizing: border-box;
		width: 100%;
		max-width: var(--max-width-pc);
		margin: 0 auto;
		padding: 0 60px;
		color: white;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		/* Footer Address  */

		.address-box {
			min-width: 300px;
			font-size: var(--font-size-submenu);
			margin-top: 50px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-evenly;

			.address-box-name {
				min-width: 220px;
				width: 90%;
				height: 45px;
				margin: 0 auto;
				color: rgb(var(--color-mono-4)) !important;
				background-color: white;
				border-radius: 45px;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 40px;
				}
		
				span {
					display: block;
					margin-left: 7px;
					font-size: 1rem;
				}
			}
	
			.address-box-name:hover {
				text-decoration: none;
			}

			.address-box-text {
				width: 50%;
				padding: 15px 0;
				font-size: .9rem;
				text-align: center;

				a {
					display: inline-block;
					color: white;

					i{
						margin-right: 5px;
					}
				}
			}
		}

		/* Footer Sitemap  */

		.sitemap-box {
			min-width: 550px;
			width: 100%;
			margin-top: 50px;
			min-height: 400px;
			display: grid;
			gap: 10px;
			grid-auto-flow: column;
			grid-template-rows: repeat(3, minmax(70px, 100%));
			grid-template-columns: repeat(3, minmax(120px, calc(100% / 3)));

			.sitemap-items {
				padding: 5px 10px 10px;

				.sitemap-title {
					display: block;
					box-sizing: border-box;
					width: 100%;
					padding: 3px 5px 2px;
					border-bottom: 1px solid rgb(var(--color-mono-8));
					color: white;
					transition: .2s;
				}

				a:hover {
					text-decoration: none;
					border-color: white;
				}

				ul {
					font-size: .72rem;
					list-style: none;
					margin-top: 5px;
					padding-left: 5px;
					color: white;

					li {
						line-height: 1.7rem;
					}

					a {
						color: white;
					}

					a:hover {
						color: rgb(var(--color-mono-8));
					}
				}
			}

			.wrap {
				grid-row: 1/4;
			}
		}


		/* Copyright note  */

		.copyright-note {
			box-sizing: border-box;
			width: 100%;
			margin-top: 30px;
			padding: 12px 30px 30px;
			text-align: center;
		}
	}

	/* Back to Top */

	.back-to-top {
		position: fixed;
		bottom: 50px;
		right: 50px;
		display: flex;
		flex-flow: column;
		align-items: center;
		align-content: center;
		justify-content: center;
		justify-items: center;

		a {
			text-decoration: none;
		}
	
		i {
			display: block;
			position: relative;
			padding: 12px 25px 32px;
			border-radius: 50%;
			background-color: rgb(var(--color-toridai-blue1) / .75);
			color: white;
			font-size: 1.5rem;
			align-self: center;
			transition: .2s;
		}
	
		span {
			display: block;
			position: absolute;
			bottom: 8px;
			left: 33%;
			color: white;
			font-size: .8rem;
			transition: .2s;
		}
	
		a:hover {

			i, span {
				color: rgb(var(--color-toridai-blue1));
			}

			i {
				background-color: rgb(255 255 255 / .75);
				box-shadow: 0 0 3px rgb(var(--color-mono-1));
			}
		}
	}

	/* SP MENU */
	.sp-menu {
		position: fixed;
		top: 10px;
		right: 30px;
		width: calc(90vw - 30px);
		max-width: 44px;
		max-height: 98vh;
		flex-flow: column;
		overflow: hidden;
		transition-duration: .2s;
		transition-delay: .2s;
		border-radius: 5px;
		box-shadow: 0 0 3px rgb(var(--color-mono-8));
		z-index: 99;

		.sp-menu-btn {
			display: block;
			font-size: 1.5rem;
			padding: 12px;
			background-color: rgb(var(--color-toridai-blue1) / .9);
			color: rgb(var(--color-mono-10));
			text-align: right;
			cursor: pointer;
			transition: .2s;
		}
	
		.sp-menu-container {
			width: 100%;
			max-height: 0;
			overflow: hidden;	
			transition-duration: .2s;
			transition-delay: 0s;

			.header-nav-container {
				box-sizing: border-box;
				width: 100%;
				padding: 0 10px;
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.header-nav-text {
					width: 100%;
					margin: 0;
					padding: 10px 0;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-evenly;
					gap: 5px;
					border-bottom: 1px solid rgb(var(--color-mono-9));
				}

				.header-nav-univtop {
					
					i {
						margin-right: 10px;
					}
				}

				.header-nav-text {
					align-items: center;

					span {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-around;
					}

					span.site-search-container {
						width: 100%;
						order: -1;
					}
				}

				.header-nav-univtop a,
				.header-nav-text a {
					color: rgb(var(--color-mono-3));
				}


				.site-search {
					width: 100%;
					max-width: 330px;
					margin: 10px 0;
					display: flex;
					flex-wrap: nowrap;
					border: 1px solid rgb(var(--color-mono-9));

					.search-form-text {
						height: 50px;
						padding: 0 20px;
						margin: 0 !important;
						border: none;
						font-size: 1rem;
						overflow: hidden;
						transition: .1s;
						width: 120px;
						flex-grow: 1;
					}
					
					.search-form-btn {
						width: 50px;
						height: 50px;
						margin: 0 !important;
						border: none;
						background-color: rgb(var(--color-toridai-blue1));
						background-image: url(https://www.lib.tottori-u.ac.jp/components/img/search_icon.png);
						background-size: 18px;
						background-position: 50% 50%;
						background-repeat: no-repeat;
						cursor: pointer;
						transition: .1s;
					}

					.search-form-btn:hover {
						background-color: rgb(var(--color-toridai-blue1) / .7);
						color: rgb(var(--color-mono-3)) !important;
						text-decoration: none;
					}
				}

				.site-search:focus-within input,
				.site-search:focus-within select {
					outline:none;
					border: none;
				}

				span.sns-link {

					a {
						display: flex;
						padding: 3px;
						width: 30px;
						height: 30px;
						border-radius: 50%;
						color: rgb(var(--color-mono-10));
						background-color: rgb(var(--color-mono-4));
						align-items: center;
						justify-content: space-around;

						i {
							font-size: 1.5rem;
							font-weight: 100;
							transition: .2s;
						}
					}

					a:hover {
						color: white;
						background-color: rgb(var(--color-mono-8));
						text-decoration: none;
					}
				}
			}


			.menu-side-services {
				padding: 0;

				.menu-side-list {
					box-sizing: border-box;
					width: 100%;
					padding: 0 20px;
				}

				.menu-side-list-child,
				.menu-side-sublist-child a {
					font-size: 1rem;
				}

				.menu-side-list-child a,
				.menu-side-sublist-child a {
					padding-top: 17px;
					padding-bottom: 17px;
				}

				.sublist-container .menu-side-list-child {
					padding-top: 17px;
					padding-bottom: 17px;
				}

			}
	
			.ad-container {
				margin-top: 20px;
				padding: 10px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
	
				.banner {
					display: block;
					margin: 5px 5%;
					width: 60%;
					border: 1px solid rgb(var(--color-mono-7));
	
					img {
						width: 100%;
						height: 100%;
						border-style: none;
					}
				}
			}
		}
	}

	.sp-menu.show {
		max-width: 400px;
		transition-delay: 0s !important;

		.sp-menu-btn {
			color: white;
			background-color: rgb(var(--color-toridai-blue1) / .9);
		}

		.sp-menu-container {
			max-height: 98vh;
			overflow-y: scroll;
			background-color: rgb(255 255 255 / 0.95);
			-ms-overflow-style: none; /*スクロールバー非表示（IE・Edge）*/
			scrollbar-width: none; /*スクロールバー非表示（Firefox）*/
			transition-delay: .2s !important;
		}

		.sp-menu-container::-webkit-scrollbar{
			display: none; /*スクロールバー非表示（Chrome・Safari）*/
		}
	}
}


/* Article */

.article {
	padding: 50px 0 150px;

	.article-container {
		grid-area: article;
		box-sizing: border-box;
		width: 100%;
		min-width: 0; /* tableスクロール用に明示 */
		max-width: calc(var(--max-width-pc-content) - 80px);
		padding-right: 20px;
		background-color: white;

		div {
			width: 100%;
		}

		img {
			max-width: 95%;
		}

		h1 {
			margin-bottom: 50px;
			padding: 10px 5px 5px 20px;
			font-size: var(--font-size-title);
			color: rgb(var(--color-mono-3));
			line-height: 3rem;
			border-left: 10px solid rgb(var(--color-toridai-blue1));
		}
			
		h2 {
			margin: 60px 0 30px 0;
			padding: 10px 0 5px 10px;
			font-size: var(--font-size-headline1);
			color: rgb(var(--color-mono-4));
			line-height: 2.5rem;
			border-bottom: 3.5px solid rgb(var(--color-toridai-blue2));
		}

		h3 {
			margin: 50px 0 20px 5px;
			padding-left: 20px;
			font-size: var(--font-size-headline2);
			line-height: 2rem;
			border-left: 5px solid rgb(var(--color-toridai-blue2));
		}

		h4 {
			margin: 25px 0 15px 5px;
			width: fit-content;
			padding: 10px 3px 3px;
			font-size: var(--font-size-headline3);
			line-height: 1.5rem;
			border-bottom: 1px solid rgb(var(--color-mono-7));
		}

		ul,
		ol {
			margin: 5px 0;
		}

		table {
			margin: 5px 0;
			border-collapse: collapse;
			border: 1px solid rgb(var(--color-mono-9));
			
			th,
			td {
				padding: 15px 20px;
				border: 1px solid rgb(var(--color-mono-9));
			}

			th {
				text-align: center;
				background-color: rgb(var(--color-mono-10));
			}

			td {
				background-color: white;
			}
		}

		.news-area.article-head {
			display: inline-block;
			min-width: 50px;
			font-size: 1rem;
			letter-spacing: 2px;
			margin: 20px 0 40px;
			padding: 2px 15px;
			text-align: center;
			line-height: 1.5rem;
		}

		.news-area.article-head.all::before {
			content: "全館";
		}

		.news-area.article-head.tottori::before {
			content: "鳥取地区：中央図書館";
		}

		.news-area.article-head.yonago::before {
			content: "米子地区：医学図書館";
		}

		.article-text-date {
			display: inline-block;
			width: 100%;
			margin-bottom: 30px;
			text-align: right;
			line-height: 1.5rem;

			time {
				display: inline-block;
				width: 100%;
			}
		}

		/* Article Text */

		.article-text {
			font-size: var(--font-size-text);
		    container-type: inline-size;


			/* Flex Menu: Common Page */

			.flex-menu-container {
				width: 100%;
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: 40px;

				.flex-menu-box {
					min-width: 0;
					align-self: start;
					display: flex;
					flex-wrap: wrap;

					p {
						display: inline-block;
						width: 100%;
					}
					
					.flex-menu-link {
						display: block;
						box-sizing: border-box;
						width: 100%;
						padding: 15px;
						color: rgb(var(--color-mono-2));

						.flex-menu-title {
							display: block;
							box-sizing: border-box;
							width: 100%; 
							padding: 5px 5px 0;
							font-size: 1.3rem;
							transition: .2s;
						}

						p {
							display: inline-block;
							width: 100%;
							margin-top: 10px;
							padding-top: 10px;
							transition: .2s;
							border-top: 2px solid rgb(var(--color-mono-9));
						}
					}

					a.flex-menu-link:hover {
						text-decoration: none;

						.flex-menu-title {
							color: rgb(var(--color-orange-main));
						}
			
						p {
							border-color: rgb(var(--color-orange-main));
							color: rgb(var(--color-mono-8));
						}
					}

					.help {
						display: block;
						font-size: .86rem;
						line-height: 1.5rem;
						margin-bottom: 15px;
						padding: 0 15px;
						align-items: center;

						i {
							padding: 0 10px;
						}
					}


					.category {
						display: flex;
						font-size: .75rem;
						line-height: 1.2rem;
						margin-bottom: 15px;
						padding: 0 15px;
						flex-wrap: wrap;
						justify-content: end;
						gap: 5px;

						span.field,
						span.fulltext,
						span.site,
						span.language {
							display: inline-block;
							padding: 1px 8px;
							background-color: rgb(var(--color-toridai-green1) / .6);
							border-radius: 5px;
							color: white;

							i {
								margin-right: 5px;
							}

						}
					}
				}
			}

			
			/* 1列に切り替える条件を明示 */
			@container (max-width: 839px) {
				.flex-menu-container {
					grid-template-columns: 1fr;
				}
			}


			.flex-menu-container.db-list {
				.flex-menu-box {

					.flex-menu-link {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						align-items: baseline;
	
						.flex-menu-title {
							display: block;
							max-width: max-content;
							margin-right: 10px; 
						}

						/* アイコン */

						.db-list-icon-container {
							display: flex;
							flex-wrap: wrap;
							gap: 5px;
							margin-top: 2px;
							flex-grow: 1;
							justify-content: flex-end;
						
							.db-list-icon {
								display: inline-block;
								padding: 1px 8px;
								gap: 5px;
								color: #ffffff; /* 白文字固定など */
								font-size: .75rem;
								border-radius: 4px;
								line-height: 1.2rem;
							}
						}

/*						.db-list-icon {
							display: block;
							display: flex;
							gap: 10px;
						}
*/
					}
				}
			}


			ol li[data-list="bullet"]::before {
				content: '•'; /* ビュレット文字 */
				padding-right: 0.5em;
			}

			/* tableのレスポンシブ対応 */
			.table-wrapper {
				overflow-x: auto; /* 横幅をはみ出した場合のみスクロールバーを表示 */
				-webkit-overflow-scrolling: touch; /* iOS端末で滑らかなスクロールを実現 */
				width: calc(100% - 30px);
				margin: 40px 15px;

				table {
					width: 100%;
					min-width: 600px; 
				}
			}

			.toiawase {
				width: 100%;
				margin-top: 50px;
				display: flex;
				flex-wrap: wrap;

				h2 {
					display: block;
					width: 100%;
					margin-bottom: 20px;
					padding: 5px 0;
					text-align: center;
					font-size: var(--font-size-text);
					background-color: rgb(var(--color-toridai-blue1) / .7);
					border-radius: 5px;
					color: white;
					border: none;
				}
				
				.contact-container {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-evenly;
					gap: 40px;

					.contact-box {
						box-sizing: border-box;
						flex-basis: 400px;
						width: 100%;
						text-align: center;
						font-size: .95rem;

						h3 {
							box-sizing: border-box;
							width: 100%;
							margin: 20px 0 20px 0;
							padding: 0 0 5px;
							border-left: none;
							border-bottom: 2px solid rgb(var(--color-toridai-blue2));
							font-size: var(--font-size-text);
						}
					}
				}
			}


			/* Archive Container  */

			details[name="archive-container"] {
				box-sizing: border-box;
				width: 100%;
				margin-top: 50px;
				padding: 10px;
				transition: .2s;
				
				summary {
					font-size: var(--font-size-text);
					font-weight: bold;
					letter-spacing: 3px;
					cursor: pointer;
					transition: .2s;
				}

				summary:hover {
					color: rgb(var(--color-toridai-blue1) / .7);
				}


				.news-list-container {
					width: 100%;
					max-height: 400px;
					margin-top: 20px;
					padding-right: 10px;
					overflow: auto;
					border-top: 1px solid rgb(var(--color-mono-8));
					border-bottom: 1px solid rgb(var(--color-mono-8));
				}


				ul.news-list {
					border: none;

					li {
						.news-title {
							min-width: auto;
						}
					}
				}
			}
		}
	}

	.menu-side {
		position: sticky;
		top: 20px;
	}
}


:lang(en) {


	ul.news-list {
		li {
			.news-area {
				&.all::before {
					content: "ALL";
				}

				&.tottori::before {
					content: "TOTTORI";
				}

				&.yonago::before {
					content: "YONAGO";
				}
			}
		}
	}

	.article {
		.article-container {
			.news-area.article-head.all::before {
				content: "ALL";
			}

			.news-area.article-head.tottori::before {
				content: "CENTRAL LIBRARY, TOTTORI CAMPUS";
			}

			.news-area.article-head.yonago::before {
				content: "MEDICAL LIBRARY, YONAGO CAMPUS";
			}
		}
	}
}