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

/*==============================*/
/* カラム */
/*==============================*/
div.libraryColumn{
	display: flex;
	align-items: flex-start;
}

div.libraryColumn div.library-mainColumn{
	width: 416px;
	min-width: 0;
}

div.libraryColumn div.library-sideColumn{
	flex: 1;
	margin-left: 72px;
	padding: 56px;
	background: #EFFBFE;
}

div.libraryColumn div.library-sideColumn div.library-formCaution p{
	font-size: 14px;
	line-height: 1.5em;
}
div.libraryColumn div.library-sideColumn div.library-formCaution p:not(:last-child){ margin-bottom: 12px;}

	/* ======= TB以下 =======*/
	@media (max-width: 1024px) {
		div.libraryColumn{ flex-direction: column;}

		div.libraryColumn div.library-mainColumn{
			width: 100%;
			margin-bottom: 24px;
		}
		div.libraryColumn div.library-sideColumn{
			width: 100%;
			margin-left: 0px;
		}
	}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.libraryColumn div.library-sideColumn{
			width: calc(100% + 40px);
			margin-left: -20px;
			margin-bottom: -46px;
			padding: 56px 20px;
			box-sizing: border-box;
		}
	}



/*==============================*/
/* コンテンツ */
/*==============================*/

/*---------------------------------
   タイトル
---------------------------------*/
.libraryTitle{
	margin-bottom: 32px;
	color: #00ABDC;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.414em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		.libraryTitle{
			text-align: center;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		.libraryTitle{
			margin-bottom: 16px;
			font-size: 24px;
			text-align: center;
		}
	}


/*---------------------------------
   list
---------------------------------*/
ul.libraryList{
	padding: 24px;
	border: 1px solid #06BCF0;
	border-radius: 8px;
}
ul.libraryList li{
	position: relative;
	padding-left: 18px;
	color: #000;
	font-size: 17px;
	line-height: 1.414em;
}
ul.libraryList li::before{
	position: absolute; top: 8px; left: 0;
	content: ""; 
	width: 8px;
	height: 8px;
	background: #000;
	border-radius: 50%;
}
ul.libraryList li:not(:last-child){ margin-bottom: 12px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		ul.libraryList li{ font-size: 16px;}
	}



/*==============================*/
/* スライド設定 */
/*==============================*/
#slick-slider{
	position: relative;
	margin-bottom: 56px;
	box-shadow: 1px 2px 6px 0px rgba(153,153,153,0.5);
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		#slick-slider{
			max-width: 80%;
			margin: 0 auto 56px auto;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}


/*-- スライド画像
------------------------- */
#slick-slider .slick-slide{ height: 100%;}
#slick-slider img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*-- 上書き設定
------------------------- */
#slick-slider .slick-track{
	display: flex; display: -webkit-flex;
	margin: 0!important;
}

/*-- ページ送り矢印
------------------------- */
#slick-slider .slick-arrow {
	position: absolute; top: 54%;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	outline: none;
	z-index: 1;
	color: #fff;
	font-size: 0;
	transform: translateY(-50%);
	background-color: rgba(0,0,0,0.3);
	cursor: pointer;
}
#slick-slider .slick-arrow::before {
	position: absolute; top: 20px;
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border: 1px solid #fff;
	border-width: 3px 3px 0 0;
}

/*-- 次へ -- */
#slick-slider .slick-next { right: -20px;}
#slick-slider .slick-next::before {
	left: 14px;
	transform: translateY(-50%) rotate(45deg);
}

/*-- 前へ -- */
#slick-slider .slick-prev { left: -18px;}
#slick-slider .slick-prev::before {
	left: 16px;
	transform: translateY(-50%) rotate(-135deg);
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		#slick-slider .slick-arrow {
			position: absolute; top: 50%;
			width: 36px;
			height: 36px;
		}
		#slick-slider .slick-arrow::before {
			position: absolute; top: 18px;
			width: 9px;
			height: 9px;
			border-width: 2px 2px 0 0;
		}

		/*-- 次へ -- */
		#slick-slider .slick-next { right: -6px;}
		#slick-slider .slick-next::before { left: 12px;}

		/*-- 前へ -- */
		#slick-slider .slick-prev { left: -6px;}
		#slick-slider .slick-prev::before { left: 14px;}
	}


/*-- ページャー
------------------------- */
.slick-dots{
	position: absolute; bottom: -36px; left: 50%;
	display: flex;
	justify-content: center;
	gap: 10px;
	transform: translateX(-50%);
}
.slick-dots li button:before{
	content: "" !important;
}

.slick-dots li button{
	font-size: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #DBDBDB;
	border: 0;
	cursor: pointer;
}

/* アクティブ */
.slick-dots li.slick-active button{ background: #06BCF0;}