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

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

div.casestudyWrap{
	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.casestudyWrap{
			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.casestudyWrap{
			grid-template-columns:
			24px /* menuの左余白*/
			216px /* menu幅*/
			40px /* menu右余白*/
			minmax(0,1fr)
			24px; /* コンテンツ右余白*/
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.casestudyWrap{
			display: flex;
			flex-direction: column-reverse;
			gap: 56px;
			padding: 16px 24px 0 24px;
		}
	}


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

	/* ======= SP以上 =======*/
	@media (min-width: 768px) {
		div.casestudyWrap 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.casestudyWrap aside.sideColumn{  width: 100%;}
	}


/*-- メニュー
------------------------- */
div.casestudyWrap aside.sideColumn div.sideMenu dl:not(:last-child){ margin-bottom: 44px;}
div.casestudyWrap aside.sideColumn div.sideMenu dl dt{
	padding: 12px 0 12px 8px;
	color: #000;
	font-size: 19px;
	font-weight: 600;
	border-top: 3px solid #1a1a1a;
}
div.casestudyWrap aside.sideColumn div.sideMenu dl dd ul li:nth-child(1) a{ border-top: 1px dashed #ccc;}
div.casestudyWrap aside.sideColumn div.sideMenu dl dd ul li a{
	position: relative;
	display: block;
	padding: 12px 20px 12px 8px;
	border-bottom: 1px dashed #ccc;
	font-size: 15px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
div.casestudyWrap aside.sideColumn div.sideMenu dl dd ul li a::after{
	position: absolute; top: 22px; 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;
}
div.casestudyWrap aside.sideColumn div.sideMenu dl dd ul li a:hover{
	background: #EAFAF1;
	color: #297D4F;
}
div.casestudyWrap aside.sideColumn div.sideMenu dl dd ul li a:hover::after{ border-color: #297D4F;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}


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




/*==============================*/
/* 一覧 */
/*==============================*/
div.casestudyArchive{
	width: min(960px,100%);
	margin: 0 auto;
}


div.casestudyArchive > div{
	padding: 36px 0 38px 0;
}
div.casestudyArchive > div:not(:last-child){ border-bottom: 1px solid #e1e1e1;}
div.casestudyArchive > div:first-child{ border-top: 1px solid #e1e1e1;}

/*---------------------------------
   タイトル
---------------------------------*/
div.casestudyArchive div.casestudyArchive-title{ margin-bottom: 20px;}
div.casestudyArchive div.casestudyArchive-title h2{ margin-bottom: 8px;}
div.casestudyArchive div.casestudyArchive-title h2 a{
	display: inline-block;
	font-size: 24px;
	line-height: 1.3em;
	font-weight: 600;
	color: #000;
	letter-spacing: 0.04em;
}
div.casestudyArchive div.casestudyArchive-title h2 a:hover{
	color: #4EA793;
}

/*-- 日付・カテゴリ
------------------------- */
div.casestudyArchive div.casestudyArchive-title div{
	display: flex; display: -webkit-flex;
	align-items: center; -webkit-align-items: center;
}
div.casestudyArchive div.casestudyArchive-title div p{
	margin-right: 12px;
	font-size: 17px;
	color: #858585;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.01em;
}
div.casestudyArchive div.casestudyArchive-title div ul{
	display: flex; display: -webkit-flex;
}
div.casestudyArchive div.casestudyArchive-title div ul li:not(:last-child){ margin-right: 6px;}
div.casestudyArchive div.casestudyArchive-title div ul li {
	position: relative; top: -1px;
	display: block;
	padding: 3px 10px 4px 10px;
	border: 1px solid #4EA793;
	border-radius: 200px;
	font-size: 14px;
	line-height: 1em;
	min-width: 80px;
	text-align: center;
	letter-spacing: 0.02em;
}

div.casestudyArchive div.casestudyArchive-title div ul li.accounting{ color: #25A97D; border: 1px solid #25A97D;} /*-- 	経理･会計 -- */

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.casestudyArchive div.casestudyArchive-title{ margin-bottom: 16px;}
		div.casestudyArchive div.casestudyArchive-title h2{ margin-bottom: 4px;}
		div.casestudyArchive div.casestudyArchive-title h2 a{ font-size: 19px;}

		/*-- 日付・カテゴリー-- */
		div.casestudyArchive div.casestudyArchive-title div p{
			margin-right: 12px;
			font-size: 16px;
		}
		div.casestudyArchive div.casestudyArchive-title div ul li:not(:last-child){ margin-right: 4px;}
		div.casestudyArchive div.casestudyArchive-title div ul li {
			padding: 4px 8px 2px 8px;
			min-width: 76px;
		}
	}



/*---------------------------------
   コンテンツ
---------------------------------*/
div.casestudyArchive div.casestudyArchive-content{
	display: flex; display: -webkit-flex;
	gap: 28px;
}

/*-- 画像
------------------------- */
div.casestudyArchive div.casestudyArchive-content figure{
	width: 264px;
	overflow: hidden;
}
div.casestudyArchive div.casestudyArchive-content figure img{
	transform: scale(1);
  	transition: .3s ease-in-out;
}
div.casestudyArchive div.casestudyArchive-content figure a:hover img{ transform: scale(1.2);}

/*-- コンテンツ
------------------------- */
div.casestudyArchive div.casestudyArchive-content div{
	flex: 1;
	margin-top: 8px;
}
div.casestudyArchive div.casestudyArchive-content div p{
	font-size: 15px;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden; 
}
div.casestudyArchive div.casestudyArchive-content div p.detailLink{ margin-top: 10px;}
div.casestudyArchive div.casestudyArchive-content div p.detailLink a{
	font-size: 14px;
	color: #11A6DC;
	text-decoration: underline;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.casestudyArchive div.casestudyArchive-content{
			flex-direction: column-reverse;
			gap: 20px;
		}
		/*-- 画像 -- */
		div.casestudyArchive div.casestudyArchive-content figure{ width: 100%;}

		/*-- コンテンツ -- */
		div.casestudyArchive div.casestudyArchive-content div{
			margin-top: 0px;
		}
		div.casestudyArchive div.casestudyArchive-content div p{ -webkit-line-clamp: 3;}
		div.casestudyArchive div.casestudyArchive-content div p.detailLink{ margin-top: 8px;}
	}



/*==============================*/
/* Page title */
/*==============================*/
div.casestudyTitle{
	position: relative;
	gap: 32px;
	margin-bottom: 64px;
}
div.casestudyTitle::before{
	position: absolute; top: 12px; right: 200px;
	content: "";
	width: calc(100% - 168px - 336px - 32px - 32px);
	height: 1px;
	background: #9D9D9D;
}


/*---------------------------------
   Title
---------------------------------*/
div.casestudyTitle h2{
	position: relative;
	margin-bottom: 56px;
	color: #000;
	font-size: 27px;
	font-weight: 600;
	line-height: 1.3em;
}
div.casestudyTitle h2::before{
	position: absolute; top: -32px; left: 0;
	content: "CASE";
	color: #F3F3F3;
	font-size: 120px;
	font-weight: 700;
	font-family: "Inter", sans-serif;
	line-height: 1.3em;
	letter-spacing: 0.05em;
	z-index: -1;
}
div.casestudyTitle h2 small{
	display: block;
	width: min(168px,100%);
	margin-left: auto;
	margin-bottom: 12px;
	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.casestudyTitle h2{
			margin-bottom: 32px;
			font-size: 25px;
			line-height: 1.414em;
		}
		div.casestudyTitle h2::before{
			position: absolute; top: -32px; left: 0;
			font-size: 72px;
			letter-spacing: 0.02em;
			z-index: -1;
		}
		div.casestudyTitle h2 small{
			width: min(136px,100%);
			margin-bottom: 10px;
			padding: 3px 0 2px 0;
			font-size: 13px;
			font-weight: 500;
		}
	}


/*---------------------------------
   ul
---------------------------------*/
div.casestudyTitle ul{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
div.casestudyTitle ul li{
	padding: 4px 12px 6px 12px;
	background: #EAFAF1;
	color: #297D4F;
	font-size: 14px;
	line-height: 1.3em;
	letter-spacing: 0.02em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.casestudyTitle ul{
			gap: 6px;
		}
		div.casestudyTitle ul li{
			padding: 3px 12px 5px 12px;
			font-size: 13px;
		}
	}



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


/*---------------------------------
   Title block
---------------------------------*/
div.case-titleBlock{
	position: relative;
	display: flex;
	align-items: flex-start;
	flex-direction: row-reverse; -webkit-flex-direction: row-reverse;
	gap: 40px;
	padding-right: 20px;
}
div.case-titleBlock::after{
	position: absolute; top: 0; right: 0;
	content: "";
	width: 1px;
	height: 100%;
	background: #ccc;
}

div.case-titleBlock:not(:last-child){ margin-bottom: 60px;}
div.case-titleBlock h3{
	flex: 0 0 80px;
	box-sizing: content-box;
	writing-mode: vertical-rl;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.5em;
}

div.case-titleBlock > div{
	flex: 1;
	min-width: 0;
}



	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.case-titleBlock{
			gap: 20px;
			padding-right: 16px;
		}
		div.case-titleBlock h3{
			flex: 0 0 68px;
			font-size: 22px;
			letter-spacing: 0.1em;
			line-height: 1.4em;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.case-titleBlock{
			flex-direction: column;
			gap: 0;
			padding-right: 0;
		}
		div.case-titleBlock::after{
			display: none;
		}
		div.case-titleBlock:not(:last-child){ margin-bottom: 56px;}

		div.case-titleBlock h3{
			flex: none;
			margin-bottom: 24px;
			padding: 1px 0 2px 16px;
			font-size: 21px;
			line-height: 1.414em;
			border-left: 5px solid #1a1a1a;
			letter-spacing: 0.04em;
			writing-mode: horizontal-tb;
		}
		div.case-titleBlock h3 br{ display: none; }

		div.case-titleBlock > div{
			flex: none;
			width: 100%;
		}
	}

/*-- 
------------------------- */
div.case-titleBlock > div > p{
	word-break: keep-all;
	overflow-wrap: break-word;
}
div.case-titleBlock > div > p.noBreak{
	word-break: normal;
	overflow-wrap: normal;
}

	/* ======= SP ======= */
	@media (max-width: 767px) {

		div.case-titleBlock > div{
			min-width: 0;
		}

		div.case-titleBlock > div > p,
		div.case-titleBlock > div > p.noBreak{
			overflow-wrap: anywhere;
		}

	}



/*---------------------------------
   こんな方におすすめ
---------------------------------*/
div.casestudyRecommend{
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px 24px 24px 22px;
	border: 14px solid #F6F6F0;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.casestudyRecommend{
			flex-direction: column;
			align-items: flex-start;
			gap: 24px;
			padding: 24px 24px 24px 22px;
			border: 14px solid #F6F6F0;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.casestudyRecommend{
			flex-direction: column;
			align-items: flex-start;
			padding: 24px 24px 24px 22px;
		}
	}

/*-- 
------------------------- */
div.casestudyRecommend div{
	flex: 1;
	min-width: 0;
}
div.casestudyRecommend h4{
	margin-bottom: 10px;
	color: #000;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.414em;
}

div.casestudyRecommend ul{ margin-left: 8px;}
div.casestudyRecommend ul li{
	position: relative;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.618em;
}
div.casestudyRecommend ul li::before{
	position: absolute; top: 10px; left: 0;
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #000;
}
div.casestudyRecommend ul li:not(:last-child){ margin-bottom: 4px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.casestudyRecommend div{
			flex: none;
			width: 100%;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.casestudyRecommend div{
			flex: none;
			width: 100%;
		}
		div.casestudyRecommend ul{ margin-left: 0px;}
		div.casestudyRecommend ul li{
			padding-left: 16px;
			font-size: 14px;
			line-height: 1.618em;
		}
		div.casestudyRecommend ul li::before{
			position: absolute; top: 10px; left: 0;
		}
		div.casestudyRecommend ul li:not(:last-child){ margin-bottom: 8px;}
	}


/*-- 
------------------------- */
div.casestudyRecommend figure{
	flex: 0 0 160px;
	text-align: center;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.casestudyRecommend figure{
			flex: none;
			width: 100%;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.casestudyRecommend figure{
			flex: none;
			width: 100%;
		}
	}


/*---------------------------------
   概要
---------------------------------*/
div.casestudy-dl-simple dl:not(:last-child){ margin-bottom: 22px;}

div.casestudy-dl-simple dl dt{
	position: relative;
	margin-bottom: 5px;
	padding-left: 26px;
	color: #000;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.03em;
}
div.casestudy-dl-simple dl dt::before{
	position: absolute; top: 8px; left: 0;
	content: "";
	width: 17px;
	height: 17px;
	border: 1px solid #1a1a1a;
	border-radius: 50%;
}
div.casestudy-dl-simple dl dd{
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.68em;
}
div.casestudy-dl-simple dl dd p{
	font-size: 15px;
	line-height: 1.68em;
}




/*---------------------------------
   Section
---------------------------------*/
div.casestudyContent{
	padding: 64px 0 0 0;
	margin-bottom: 56px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}


div.casestudyContent section{
	scroll-margin-top: calc(var(--header-height) + 24px);
	margin-bottom: 60px;
}

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

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

/*---------------------------------
   文字設定
---------------------------------*/
div.casestudyContent section p{
	word-break: keep-all;
	overflow-wrap: break-word;
}
div.casestudyContent section p.noBreak{
	word-break: normal;
	overflow-wrap: normal;
}
	/* ======= SP ======= */
	@media (max-width: 767px) {
		div.casestudyContent section{
			min-width: 0;
		}
		div.casestudyContent section p,
		div.casestudyContent section p.noBreak{
			overflow-wrap: anywhere;
		}
	}


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


.casestudy-simpleTitle-l{
	margin-bottom: 20px;
	font-size: 26px;
    line-height: 1.414em;
}
.casestudy-simpleTitle-m{
	margin-bottom: 20px;
	padding: 1px 0 2px 16px;
	font-size: 22px;
    line-height: 1.414em;
	border-left: 5px solid #1a1a1a;
	letter-spacing: 0.04em;
}
.casestudy-simpleTitle-s{
	margin-bottom: 12px;
	font-size: 21px;
    line-height: 1.414em;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		.casestudy-simpleTitle-l{
			margin-bottom: 20px;
			font-size: 24px;
			line-height: 1.414em;
		}
		.casestudy-simpleTitle-m{
			margin-bottom: 20px;
			font-size: 22px;
			line-height: 1.414em;
		}
		.casestudy-simpleTitle-s{
			margin-bottom: 20px;
			font-size: 20px;
			line-height: 1.414em;
		}
	}


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

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

/*-- マーカー太字
------------------------- */
p span.casestudy-marker-bold,
.casestudy-normalTable td span.casestudy-marker-bold{
	background: linear-gradient(transparent 65%, #ffff66 65%);
	line-height: inherit;
	vertical-align: baseline;
	font-size: inherit;
	font-weight: bold;
}

/*-- 太字
------------------------- */
p span.casestudy-bold,
.casestudy-normalTable td span.casestudy-marker-bold{
	line-height: inherit;
	color: #000;
	font-size: inherit;
	font-weight: bold;
	vertical-align: baseline;
}



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

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


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


/*-- 
------------------------- */
ul.casestudy-ListBox-check{
}

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

ul.casestudy-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.casestudyContent ul.casestudy-ListBox-check li::after{
	position: absolute; top: 7px; left: 4px;
	content: "";
	width: 18px;
	aspect-ratio: 62/46;
	background: url("/common/img/casestudy/icon-check.svg");
	background-size: cover;
}
ul.casestudy-ListBox-check li:not(:last-child){ margin-bottom: 12px;}


/*-- 
------------------------- */
ul.casestudy-ListBox-message{
	margin-left: 20px;
}
ul.casestudy-ListBox-message li{
	position: relative;
	padding-left: 34px;
	line-height: 1.618em;
}

ul.casestudy-ListBox-message li::before{
	position: absolute;	top: 5px; left: 0;
	content: "";
	width: 22px;
	aspect-ratio: 22/20;
	background: url("/common/img/share/icon-message.svg");
	background-size: cover;
}
ul.casestudy-ListBox-message li:not(:last-child){ margin-bottom: 10px;}


/*---------------------------------
   Point
---------------------------------*/
dl.casestudy-pointBox{
	position: relative;
	padding: 40px 28px 32px 116px;
	border-radius: 10px;
	background: #F6F6F0 url("/common/img/share/bg-texture.webp");
}
dl.casestudy-pointBox::before{
	position: absolute; top: 28px; left: 16px;
	content: "";
	width: 90px;
	height: 96px;
	background: url("/common/img/knowledge/illust-point.webp") no-repeat center;
	background-size: contain;
}

dl.casestudy-pointBox > dt{
	position: absolute; top: -24px; left: -20px;
	padding: 3px 18px;
	border-radius: 5px;
	background: #fff;
	border: 1px solid #1A1A1A;
	box-shadow: 3px 3px 0px 0px rgba(26,26,26,1);
	color: #000f;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-align: center;
}
dl.casestudy-pointBox > dt::before{
	position: absolute; bottom: -18px; left: 2px;
	content: "";
	width: 18px;
	height: 18px;
	background: #1a1a1a;
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%
	);
}
dl.casestudy-pointBox > dt::after{
	position: absolute; top: -16px; right: -16px;
	content: "";
	width: 16px;
	aspect-ratio: 16/14;
	background: url("/common/img/knowledge/icon-point.svg");
	background-size: contain;
}
dl.casestudy-pointBox > dd{
	padding-left: 16px;
}
dl.casestudy-pointBox > dd p{
	font-size: 15px;
	word-break: normal;
	overflow-wrap: normal;
}



/*-- ボタン
------------------------- */
dl.casestudy-pointBox > dd p.pointBox-btn a{
	position: relative;
	display: inline-block;
	padding: 4px 28px 4px 20px;
	background: #1a1a1a;
	border-radius: 200px;
	color: #fff;
	font-size: 14px;
	transition: all 300ms;
}
dl.casestudy-pointBox > dd p.pointBox-btn a::before{
	position: absolute; top: 50%; right: 8px;
	content: "";
	display: inline-block;
	width: 10px;
	aspect-ratio: 1;
	background: #fff;

	-webkit-mask: url("/common/img/share/icon-arrow.svg") no-repeat center / contain;
	mask: url("/common/img/share/icon-arrow.svg") no-repeat center / contain;
	line-height: 1em;
	transform: translateY(-50%);
}
dl.casestudy-pointBox > dd p.pointBox-btn a:hover {
	background-color: #D81B52;
	box-shadow: 0 0 0 1px #D81B52 inset;
	color: #fff;
	transform: translateY(-3px);
}





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

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

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


/*-- thead
------------------------- */
div.casestudy-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.casestudy-normalTable table tbody th{
	background: #F5FBFA;
	color: #238974;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3em;
	text-align: left;
}



/*---------------------------------
   注意事項
---------------------------------*/
div.casestudy-cautionBox{
	padding: 16px 24px;
	background: #797979 url("/common/img/share/bg-texture.webp");
	border-radius: 3px;
}
div.casestudy-cautionBox p{
	color: #fff;
	font-size: 14px;
	line-height: 1.618em;
	font-weight: 300;
}