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


/*==============================*/
/* フレーム */
/*==============================*/
:root{
	--side-left: 40px;
	--side-width: 240px;
	--content-width: 840px;
	--header-height: 136px;
}

div.knowledgeWrap{
	display: grid;
	grid-template-columns:
		var(--side-left)
		var(--side-width)
		1fr
		minmax(0, var(--content-width))
		1fr;
	align-items: start;
	padding: 16px 0 0 0;
}
	/* ======= PC：個別設定 =======*/
	@media screen and (min-width: 1025px) and (max-width: 1200px) {
		div.knowledgeWrap{
			grid-template-columns:
				32px /* menuの左余白*/
				240px /* menu幅*/
				40px /* menu右余白*/
				minmax(0,1fr)
				32px; /* コンテンツ右余白*/
		}
	}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.knowledgeWrap{
			grid-template-columns:
			24px /* menuの左余白*/
			216px /* menu幅*/
			40px /* menu右余白*/
			minmax(0,1fr)
			24px; /* コンテンツ右余白*/
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.knowledgeWrap{
			display: flex;
			flex-direction: column-reverse;
			gap: 56px;
			padding: 16px 24px 0 24px;
		}
	}


/*---------------------------------
   サイドカラム
---------------------------------*/

	/* ======= SP以上 =======*/
	@media (min-width: 768px) {
		div.knowledgeWrap aside.sideColumn{
			grid-column: 2;
			position: sticky;
			top: var(--header-height);
			align-self: start;
		}
	}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.knowledgeWrap aside.sideColumn{  width: 100%;}
	}


/*-- メニュー
------------------------- */
div.knowledgeWrap aside.sideColumn div.sideMenu dl:not(:last-child){ margin-bottom: 44px;}
div.knowledgeWrap aside.sideColumn div.sideMenu dl dt{
	padding: 12px 0;
	color: #000;
	font-size: 19px;
	font-weight: 600;
	border-top: 3px solid #1a1a1a;
}
div.knowledgeWrap aside.sideColumn div.sideMenu dl dd ul li:nth-child(1) a{ border-top: 1px dashed #ccc;}
div.knowledgeWrap aside.sideColumn div.sideMenu dl dd ul li a{
	position: relative;
	display: block;
	padding: 12px 18px 12px 0;
	border-bottom: 1px dashed #ccc;
	font-size: 15px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
div.knowledgeWrap aside.sideColumn div.sideMenu dl dd ul li a::after{
	position: absolute; top: 19px; right: 8px;
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid #1a1a1a;
	border-right: 2px solid #1a1a1a;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 99;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}


/*---------------------------------
   メインカラム
---------------------------------*/
div.knowledgeWrap .mainColumn{
	grid-column: 4;
	min-width: 0;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.knowledgeWrap .mainColumn{
			grid-column: auto;
		}
	}



/*==============================*/
/* Page title */
/*==============================*/
div.knowledgeTitle{
	position: relative;
	display: flex;
	gap: 32px;
	padding: 0 0 40px 0;
	margin-bottom: 72px;
	border-bottom: 1px solid #9D9D9D;
}
div.knowledgeTitle::before{
	position: absolute; top: 12px; right: 0;
	content: "";
	width: calc(100% - 128px - 32px);
	height: 1px;
	background: #9D9D9D;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.knowledgeTitle{
			position: relative;
			flex-direction: column;
			align-items: flex-end;
			gap: 32px;
			padding: 0 0 40px 0;
			margin-bottom: 72px;
			border-bottom: 1px solid #9D9D9D;
		}
		div.knowledgeTitle::before{
			position: absolute; top: 12px; right: 0;
			content: "";
			width: calc(100% - 128px - 32px);
			height: 1px;
			background: #9D9D9D;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.knowledgeTitle{
			flex-direction: column;
			align-items: flex-start;
			gap: 32px;
			padding: 0 0 40px 0;
			margin-bottom: 72px;
		}
		div.knowledgeTitle::before{
			position: absolute; top: 12px; right: 0;
			width: calc(100% - 120px - 28px);
		}
	}

/*---------------------------------
   
---------------------------------*/
div.knowledgeTitle div.knowledgeTitle-detail{
	flex: 1;
	min-width: 0;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.knowledgeTitle div.knowledgeTitle-detail{
			flex: auto;
		}
	}


/*-- Title
------------------------- */
div.knowledgeTitle div.knowledgeTitle-detail h2{
	margin-bottom: 16px;
	color: #000;
	font-size: 27px;
	font-weight: 600;
	line-height: 1.3em;
}
div.knowledgeTitle div.knowledgeTitle-detail h2 small{
	display: block;
	width: min(128px,100%);
	margin-bottom: 36px;
	padding: 3px 0 2px 0;
	background: #D70051;
	text-align: center;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	font-family: "Inter", sans-serif;
	line-height: 1.3em;
	letter-spacing: 0.01em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.knowledgeTitle div.knowledgeTitle-detail h2{
			margin-bottom: 14px;
			font-size: 23px;
		}
		div.knowledgeTitle div.knowledgeTitle-detail h2 small{
			width: min(120px,100%);
			margin-bottom: 28px;
			padding: 3px 0 2px 0;
			font-size: 15px;
		}
	}

/*-- Text
------------------------- */
div.knowledgeTitle div.knowledgeTitle-detail  > p{
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.knowledgeTitle div.knowledgeTitle-detail  > p{
			font-size: 14px;
			line-height: 1.5em;
		}
	}



/*-- 情報
------------------------- */

/*-- 日付 -- */
div.knowledgeTitle div.knowledgeTitle-detail div.knowledgeTitle-info ul:first-child{
	display: flex;
	gap: 24px;
	margin-top: 32px;
	margin-bottom: 12px;
}
div.knowledgeTitle div.knowledgeTitle-detail div.knowledgeTitle-info ul:first-child li{
	font-size: 15px;
}


/*-- カテゴリ -- */
div.knowledgeTitle div.knowledgeTitle-detail div.knowledgeTitle-info ul:last-child{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
div.knowledgeTitle div.knowledgeTitle-detail div.knowledgeTitle-info ul:last-child li{
	padding: 2px 16px 2px 16px;
	background: #229C83;
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3em;
	border-radius: 200px;
	min-width: 68px;
	text-align: center;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		/*-- 日付 -- */
		div.knowledgeTitle div.knowledgeTitle-detail div.knowledgeTitle-info ul:first-child{
			margin-top: 20px;
			margin-bottom: 12px;
		}
		div.knowledgeTitle div.knowledgeTitle-detail div.knowledgeTitle-info ul:first-child li{
			font-size: 15px;
		}
	}


/*---------------------------------
   
---------------------------------*/
div.knowledgeTitle figure{
	flex: 0 0 320px;
	padding-top: 70px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.knowledgeTitle figure{
			flex: auto;
			width: 100%;
			padding-top: 0px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.knowledgeTitle figure{
			flex: auto;
			width: 100%;
			padding-top: 0px;
		}
	}



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

/*---------------------------------
   Section
---------------------------------*/
div.knowledgeContent section{
	padding: 68px 0 72px 0;
	border-bottom: 1px solid #ddd;
	scroll-margin-top: calc(var(--header-height) + 24px);
}

div.knowledgeContent section:first-child{ padding-top: 0;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.knowledgeContent section{
			padding: 56px 0 64px 0;
		}
	}


/*---------------------------------
   Title
---------------------------------*/
div.knowledgeContent .knowledge-simpleTitle-l,
div.knowledgeContent .knowledge-simpleTitle-m,
div.knowledgeContent .knowledge-simpleTitle-s{
	color: #000;
	font-weight: 600;
}
div.knowledgeContent .knowledge-simpleTitle-l span,
div.knowledgeContent .knowledge-simpleTitle-m span,
div.knowledgeContent .knowledge-simpleTitle-s span{
	vertical-align: baseline;
	color: #229C83;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}


div.knowledgeContent .knowledge-simpleTitle-l{
	margin-bottom: 20px;
	font-size: 26px;
    line-height: 1.414em;
}

div.knowledgeContent .knowledge-simpleTitle-m{
	margin-bottom: 20px;
	font-size: 24px;
    line-height: 1.414em;
}

div.knowledgeContent .knowledge-simpleTitle-s{
	margin-bottom: 20px;
	font-size: 22px;
    line-height: 1.414em;
}



/*---------------------------------
   文字装飾
---------------------------------*/

/*-- マーカー
------------------------- */
div.knowledgeContent p span.knowledge-marker{
	background: linear-gradient(transparent 65%, #ffff66 65%);
	line-height: inherit;
	vertical-align: baseline;
	font-size: inherit;
}

/*-- 太字
------------------------- */
div.knowledgeContent p span.knowledge-bold{
	line-height: inherit;
	color: #000;
	font-size: inherit;
	font-weight: bold;
	vertical-align: baseline;
}



/*---------------------------------
   Ul
---------------------------------*/

/*-- 
------------------------- */
div.knowledgeContent ul.knowledge-ListBox-basic{
	padding: 6px 20px;
	border-radius: 5px;
	background: #F6F6F6 url("/common/img/share/bg-texture.webp");
}
div.knowledgeContent ul.knowledge-ListBox-basic li{
	position: relative;
	padding: 16px 12px 16px 20px;
}
div.knowledgeContent ul.knowledge-ListBox-basic li::before{
	position: absolute; top: 28px; left: 0;
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #000;
}
div.knowledgeContent ul.knowledge-ListBox-basic li:not(:last-child){ border-bottom: 1px dashed #ccc;}


/*-- 
------------------------- */
div.knowledgeContent ul.knowledge-ListBox-simple{
	padding: 16px 0 0 16px;
}
div.knowledgeContent ul.knowledge-ListBox-simple li{
	position: relative;
	padding-left: 20px;
}
div.knowledgeContent ul.knowledge-ListBox-simple li::before{
	position: absolute; top: 13px; left: 0;
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #000;
}
div.knowledgeContent ul.knowledge-ListBox-simple li:not(:last-child){ margin-bottom: 6px;}


/*-- 
------------------------- */
div.knowledgeContent ul.knowledge-ListBox-check{
}

div.knowledgeContent ul.knowledge-ListBox-check li{
	position: relative;
	padding-left: 34px;
}


div.knowledgeContent ul.knowledge-ListBox-check li::before{
	position: absolute;	top: 5px; left: 0;
	content: "";
	width: 20px;
	height: 20px;
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 3px;
	box-sizing: border-box;
}
div.knowledgeContent ul.knowledge-ListBox-check li::after{
	position: absolute; top: 7px; left: 4px;
	content: "";
	width: 18px;
	aspect-ratio: 62/46;
	background: url("/common/img/knowledge/icon-check.svg");
	background-size: cover;
}
div.knowledgeContent ul.knowledge-ListBox-check li:not(:last-child){ margin-bottom: 12px;}


/*---------------------------------
   Point
---------------------------------*/
div.knowledgeContent dl.knowledge-pointBox dt{
	width: min(216px,100%);
	margin-left: 28px;
	margin-bottom: 2px;
	padding: 2px 0;
	border-radius: 5px 5px 0 0;
	background: #229C83 url("/common/img/share/bg-cross.png");
	color: #fff;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-align: center;
}
div.knowledgeContent dl.knowledge-pointBox dd{
	padding: 28px;
	border-radius: 10px;
	background: #F6F6F6 url("/common/img/share/bg-texture.webp");
}
div.knowledgeContent dl.knowledge-pointBox dd p{
	font-size: 15px;
}




/*---------------------------------
   Table
---------------------------------*/
div.knowledgeContent div.knowledge-normalTable{
	width: 100%;
}
div.knowledgeContent div.knowledge-normalTable table{
	width: 100%;
	box-sizing: border-box;
	border-collapse: collapse;
}

/*-- 共通
------------------------- */
div.knowledgeContent div.knowledge-normalTable table th,
div.knowledgeContent div.knowledge-normalTable table td{
	padding: 6px 8px;
	border: 1px solid #ccc;
}

div.knowledgeContent div.knowledge-normalTable table td{ font-size: 14px;}


/*-- thead
------------------------- */
div.knowledgeContent div.knowledge-normalTable table thead th {
	padding: 8px 8px 9px 8px;
	background: #229C83 url("/common/img/share/bg-cross.png");
	color:#fff;
	line-height: 1.3em;
}

/*-- tbody
------------------------- */
div.knowledgeContent div.knowledge-normalTable table tbody th{
	background: #F5FBFA;
	color: #238974;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3em;
	text-align: left;
}