@charset "utf-8";
/* CSS Document */

/*==============================*/
/* library-pageTitle */
/*==============================*/
div.library-pageTitle{
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 0px 0 12px 0;
	padding-left: calc( calc( 100% - 1120px ) / 2 );
	background: var(--themecolor);
}
	/* ======= PC：個別設定 =======*/
   @media (max-width: 1120px) {
	   div.library-pageTitle{ padding: 40px 16px 72px 24px;}
	}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.library-pageTitle{
			flex-direction: column;
			padding: 56px 24px 24px 24px;
		}
	}


/*--
-------------------------------
   figure
---------------------------------*/
div.library-pageTitle figure{
	position: relative; top: 40px;
	width: 600px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.library-pageTitle figure{
			position: relative; top: 40px;
			width: 400px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.library-pageTitle figure{
			position: relative; top: 0px;
			width: 100%;
		}
	}


/*---------------------------------
   content
---------------------------------*/
div.library-pageTitle div{
	width: min(520px,100%);
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.library-pageTitle div{ flex: 1;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.library-pageTitle div{
			margin-bottom: 24px;
		}
	}


/*-- 
------------------------- */
div.library-pageTitle div h1{
	position: relative;
	margin-bottom: 32px;
	padding-bottom: 20px;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.3em;
	color: #fff;
}
div.library-pageTitle div h1::before{
	position: absolute; bottom: 0; left: 0;
	content: "";
	width: 56px;
	height: 4px;
	background: #F3FF5A;
}
 	/* ======= TB =======*/
    @media screen and (min-width: 768px) and (max-width: 1024px) {
		div.library-pageTitle div h1{
			position: relative;
			margin-bottom: 28px;
			font-size: 32px;
		}
    }
    /* ======= SP =======*/
	@media (max-width: 767px) {
		div.library-pageTitle div h1{
			margin-bottom: 20px;
			padding-bottom: 16px;
			font-size: 24px;
			text-align: center;
		}
		div.library-pageTitle div h1::before{
			position: absolute; bottom: 0; left: 50%;
			width: 48px;
			margin-left: -24px;
		}
    }

/*-- 
------------------------- */
div.library-pageTitle div p{
	color: #fff;
	line-height: 1.7em;
	font-weight: 400;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.library-pageTitle div p{
			font-size: 15px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.library-pageTitle div p{
			font-size: 14px;
			line-height: 1.618em;
		}
	}


/*-- 
------------------------- */
div.library-pageTitle div ul{
	position: absolute; bottom: 16px; left: calc( calc( 100% - 1120px ) / 2 );
	display: flex; 
}
div.library-pageTitle div ul li{
	position: relative;
	color: #fff;
	font-size: 14px;
}
div.library-pageTitle div ul li:not(:last-child){ margin-right: 32px;}
div.library-pageTitle div ul li:not(:last-child)::after{
	position: absolute; top: 0; right: -20px;
	content: ">";
}
div.library-pageTitle div ul li a{
	color: #fff;
	font-size: 14px;
}
div.library-pageTitle div ul li a:hover{ text-decoration: underline;}

	
	/* ======= PC：個別設定 =======*/
   @media (max-width: 1120px) {
	   div.library-pageTitle div ul{ position: absolute; bottom: 16px; left: 24px;}
    }
	/* ======= TB =======*/
    @media screen and (min-width: 768px) and (max-width: 1024px) {
    }
    /* ======= SP =======*/
	@media (max-width: 767px) {
		div.library-pageTitle div ul{
			display: none;
		}
    }



/*==============================*/
/*  */
/*==============================*/
 body#library{ background: #F4F8FD;}



/*==============================*/
/*  */
/*==============================*/
div.libraryWrap{
	display: flex; display: -webkit-flex;
	flex-wrap: wrap; -webkit-flex-wrap: wrap;
	gap: 40px 40px;
}

div.library{
	width: calc(calc(100% - 40px * 2) / 3);
}
div.library > a{
	display: block;
	box-shadow: 1px 2px 8px 0px rgba(153,153,153,0.4);
	border-radius: 8px;
	background: #fff;
	transition: transform .2s ease, box-shadow .2s ease;
	transform-origin: center;
	will-change: transform;
}
div.library > a:hover {
	transform: scale(1.03);
	box-shadow: 1px 2px 16px 0px rgba(153,153,153,0.4);
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.libraryWrap{ gap: 24px 24px;}
		div.library{ width: calc(calc(100% - 24px * 1) / 2);}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.libraryWrap{
			flex-direction: column; -webkit-flex-direction: column;
			gap: 20px 0px;
		}

		div.library{
			width: 100%;
		}
	}

/*---------------------------------
   tmb
---------------------------------*/
div.library figure img{
	border-radius: 8px 8px 0 0 ;
}


/*---------------------------------
   Content
---------------------------------*/
div.library div{
	position: relative;
	padding: 22px 24px 96px 24px;
}


/*-- 
------------------------- */
div.library div h2{
	min-height: 60px;
	margin-bottom: 12px;
	color: #06BCF0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
}


div.library div p{
	font-size: 14px;
	line-height: 1.618em;
}

/*-- 
------------------------- */
div.library div p.libraryBtn{
	position: absolute; bottom: 20px; left: 50%;
	max-width: 216px;
	width: 100%;
	margin-left: -108px;
	padding: 9px 0;
	background: #00ABDC;
	border: 1px solid #00ABDC;
	border-radius: 200px;
	color: #fff;
	font-size: 16px;
	text-align: center;
}

div.library > a:hover  div p.libraryBtn{
	background: #fff;
	color: #00ABDC;
}