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

/*==============================*/
/* 一覧 */
/*==============================*/
div.accountingColumn{
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
}
div.accountingColumn dl{
	display: flex;
	flex-direction: column;
	width: calc(calc(100% - 36px * 1) / 2);
}
div.accountingColumn dl dt{
	order: 2;
}
div.accountingColumn dl dt a{
	font-size: 18px;
	font-weight: 700;
	line-height: 1.414em;
}
div.accountingColumn dl dt a span{
	display: inline-block;
	padding: 0px 14px 1px 14px;
	margin-right: 4px;
	border: 2px solid #de7393;
	color: #de7393;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3em;
	vertical-align: baseline;
}
div.accountingColumn dl dd{
	order: 1;
	margin-bottom: 22px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.accountingColumn{
			flex-direction: column;
			gap: 40px;
		}
		div.accountingColumn dl{
			width: 100%;
		}
	}


/*==============================*/
/* 詳細 */
/*==============================*/
/*---------------------------------
   page Title
---------------------------------*/
div.column-pageTitle{ margin-bottom: 40px;}

div.column-pageTitle h1{
	margin-bottom: 12px;
	color: #18282b;
	font-size: 22px;
	font-weight: 700;
}
div.column-pageTitle dl{
	display: flex;
	justify-content: flex-end;
	margin-bottom: 40px;
	color: #919191;
	text-align: right;
	font-size: 12px;
}
div.column-pageTitle dl dt{
	font-size: 12px;
}
div.column-pageTitle dl dd{
	font-size: 12px;
}

div.column-pageTitle div p{
	color: #18282b;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9em;
}
div.column-pageTitle div p span{
	font-size: inherit;
	font-weight: 700;
	background: linear-gradient(transparent 85%, #f4f448 15%);
	vertical-align: baseline;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.column-pageTitle h1{
			font-size: 18px;
		}
		div.column-pageTitle div p{
			font-size: 14px;
		}
	}


/*---------------------------------
   TOPへ戻るボタン
---------------------------------*/
p.columnLink-btn{
	width: min(336px,100%);
	margin: 0 auto;
}
p.columnLink-btn a{
	position: relative;
	display: block;
	padding: 17px 8px 18px 0;
	border: 2px solid #18282b;
	background: #fff;
	border-radius: 200px;
	text-align: center;
	font-size: 16px;
	line-height: 1.3em;
}
p.columnLink-btn a:hover{
	background: #f1f1f1;
}
p.columnLink-btn a::before{
	position: absolute; top: 50%; right: 16px;
	content: "";
	width: 20px;
	height: 2px;
	background: #18282b;
	margin-top: 0px;
}
p.columnLink-btn a::after{
	position: absolute; top: 50%; right: 16px;
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid #18282b;
	border-right: 2px solid #18282b;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: -3px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		p.columnLink-btn a{
			font-size: 14px;
		}
	}

/*---------------------------------
   執筆者
---------------------------------*/
dl.columnAuthor{
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 24px;
	background: #E6F5FD;
	border-radius: 10px;
}
dl.columnAuthor dt{
	position: relative;
	flex: 0 0 200px;
	padding-left: 64px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.414em;
}
dl.columnAuthor dt::before{
	position: absolute; top: 50%; left: 0;
	content: "";
	width: 52px;
	height: 52px;
	background: url("/common/img/column/icon-author.webp");
	background-size: cover;
	border-radius: 50%;
	transform: translateY(-50%);
}
dl.columnAuthor dt small{
	display: block;
	font-size: 12px;
	line-height: inherit;
}
dl.columnAuthor dd{
	flex: 1;
	min-width: 0;
	font-size: 14px;
	font-weight: 400;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		dl.columnAuthor{
			flex-direction: column;
			align-items: flex-start;
			gap: 0px;
			padding: 20px;
		}
		dl.columnAuthor dt{
			flex: auto;
			margin-bottom: 12px;
		}
		dl.columnAuthor dd{
			flex: auto;
			font-size: 12px;
		}
	}

/*---------------------------------
   おすすめ記事
---------------------------------*/
div.columnRecommend h3{
	position: relative;
	margin-bottom: 28px;
	padding-left: 28px;
	color: #18282b;
	font-size: 18px;
	font-weight: 700;
}
div.columnRecommend h3::before{
	position: absolute; top: 50%; left: 0px;
	content: "";
	width: 16px;
	height: 16px;
	background: #E8E67E;
	transform: rotate(45deg);
	z-index: 0;
	margin-top: -6px;
}

div.columnRecommend a{
	display: block;
	width: min(480px,100%);
	padding-bottom: 16px;
	border-bottom: 1px solid #d9d9d9;
}
div.columnRecommend dl{
	display: flex;
	align-items: center;
	gap: 16px;
}
div.columnRecommend dl dt{
	order: 2;
	flex: 1;
	min-width: 0;
	color: #18282b;
	font-weight: 700;
}
div.columnRecommend dl dd{
	order: 1;
	flex: 0 0 120px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.columnRecommend dl dt{
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
			font-size: 14px;
		}
	}


/*---------------------------------
   関連記事
---------------------------------*/
div.column-relatedArticles{
	padding: 20px 24px;
	border: 1px solid #3dbae8;
	border-radius: 10px;
}
div.column-relatedArticles h3{
	position: relative;
	margin-bottom: 16px;
	color: #18282b;
	font-size: 18px;
	font-weight: 700;
}

div.column-relatedArticles a{
	display: block;
}
div.column-relatedArticles dl{
	display: flex;
	align-items: center;
	gap: 16px;
}
div.column-relatedArticles dl dt{
	order: 2;
	flex: 1;
	min-width: 0;
	color: #18282b;
	font-weight: 700;
}
div.column-relatedArticles dl dd{
	order: 1;
	flex: 0 0 120px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.column-relatedArticles{ padding: 16px 20px;}
		div.column-relatedArticles h3{ margin-bottom: 12px;}
		div.column-relatedArticles dl dt{
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
			font-size: 14px;
			font-weight: 700;
		}
	}


/*---------------------------------
   目次
---------------------------------*/
h2.columnToc-title{
	margin-bottom: 16px;
	padding: 4px 0 4px 14px;
	border-left: 4px solid #3dbae8;
	color: #18282b;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.414em;
}

nav.columnToc{
	margin-bottom: 60px;
	padding: 24px 24px;
	border: 1px solid #ddd;
	border-radius: 12px;
}

/* 一階層目カウンター初期化 */
nav.columnToc > ul{
	counter-reset: main-section;
}

/* 一階層目 */
nav.columnToc > ul > li{
	counter-increment: main-section;
	counter-reset: sub-section;
	line-height: 1.2em;
}

nav.columnToc > ul > li:not(:last-child){
	margin-bottom: 18px;
}


/* リンク共通 */
nav.columnToc a{
	position: relative;
	display: inline-block;
	color: #5f6368;
	line-height: 1.2em;
}

nav.columnToc a:hover{
	color: #0AA8D4;
	text-decoration: underline;
}

/* 一階層目リンク */
nav.columnToc > ul > li > a{
	padding-left: 24px;
}

nav.columnToc > ul > li > a::before{
	position: absolute;
	top: 0;
	left: 0;
	content: counter(main-section) ".";
}

/* 二階層目 */
nav.columnToc ul ul{
	margin-top: 6px;
	padding-left: 24px;
}

nav.columnToc ul ul li{
	counter-increment: sub-section;
}

nav.columnToc ul ul li:not(:last-child){
	margin-bottom: 0px;
}

nav.columnToc ul ul li a{
	padding-left: 32px;
	font-size: 12px;
}

nav.columnToc ul ul li a::before{
	position: absolute;
	top: 0;
	left: 0;
	content: counter(main-section) "-" counter(sub-section);
}


/*---------------------------------
   Title
---------------------------------*/
div.columnContent .columnDetail-title-l{
	margin-bottom: 28px;
	padding: 4px 0 4px 14px;
	border-left: 4px solid #3dbae8;
	color: #18282b;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.414em;
}

/*-- 
------------------------- */
div.columnContent .columnDetail-title-m{
	margin-bottom: 18px;
	padding: 9px 12px 9px 12px;
	background: #e6f5fe;
	color: #18282b;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.414em;
}

/*-- 
------------------------- */
div.columnContent .columnDetail-title-s{
	margin-bottom: 12px;
	color: #18282b;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.414em;
}


/*---------------------------------
   section
---------------------------------*/
div.columnContent{ margin-bottom: 80px;}

div.columnContent div.columnSection{
	position: relative;
}
div.columnContent div.columnSection:not(:last-child)::after{
	position: absolute; bottom: 0; left: 50%;
	content: "";
	width: 48px;
	aspect-ratio: 48/24;
	background: url("/common/img/column/bg-section.svg");
	transform: rotateX(-50%);
	z-index: 0;
	margin-left: -18px;
}

div.columnContent div.columnSection:not(:last-child){
	margin-bottom: 40px;
	padding-bottom: 64px;
}


/*---------------------------------
   Text
---------------------------------*/
div.columnContent div.columnSection p{
	color: #18282b;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9em;
}
div.columnContent div.columnSection p span.column-marker{
	font-size: inherit;
	font-weight: 700;
	background: linear-gradient(transparent 85%, #f4f448 15%);
	vertical-align: baseline;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.columnContent div.columnSection p{ font-size: 14px;}
	}


/*---------------------------------
   スタッフの声
---------------------------------*/
ul.columnDetail-voice li:not(:last-child){ margin-bottom: 16px;}
ul.columnDetail-voice li{
	padding: 20px 24px;
	background: #EBFAFC;
	color: #18282b;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9em;
	border-radius: 10px;
}


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

/*---------------------------------
   List
---------------------------------*/
ul.columnDetail-list{
	padding: 24px 32px;
	background: #f1f1f1;
	border-radius: 10px;
}
ul.columnDetail-list li{
	position: relative;
	padding-left: 16px;
	color: #18282b;
	font-size: 16px;
	line-height: 1.414em;
}
ul.columnDetail-list li::before{
	position: absolute; top: 9px; left: 0;
	content: "";
	width: 6px;
	height: 6px;
	background: #18282b;
	border-radius: 50%;
}

ul.columnDetail-list li:not(:last-child){
	margin-bottom: 10px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		ul.columnDetail-list{ padding: 20px 28px; }
		ul.columnDetail-list li{ font-size: 14px;}
	}