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


#contents #columnTop .mainImg {
	margin: 0;
}
#contents #columnTop .columnList {
	padding: 2rem 0;
}
#contents #columnTop .columnList h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.4;
	color: #333;
	padding: 0 0 1rem;
	border-bottom: 4px solid #006ab7;
}
#contents #columnTop .columnList ul li {
	padding: 1.5rem 0;
	border-bottom: 1px solid #ddd;
}
#contents #columnTop .columnList ul li a {
	position: relative;
	display: block;
	color: #333;
	padding: 0 2rem 0 0;
}
#contents #columnTop .columnList ul li a::after {
	position: absolute;
	top: 50%;
	right: 0px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.25rem;
	line-height: 2rem;
	color: #006ab7;
	content: "\f105";
	margin-top: -1rem;
}
#contents #columnTop .columnList ul li a .new {
	font-family: 'Noto Serif JP', serif;
	color: #f00;
	margin-left: 1rem;
}

#contents #column .columnTitle {
	position: relative;
	padding: 70px 0 0;
	background: #fff;
}
#contents #column .columnTitle .label {
	font-weight: bold;
	color: #006ab7;
}
#contents #column .columnTitle h1 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 2.5rem;
	font-weight: bold;
	line-height: 1.4;
	color: #333;
	padding: 0 0 2rem;
	border-bottom: 4px solid #006ab7;
}
#contents #column .columnBody h3 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
}
#contents #column .columnBody .block {
	position: relative;
	padding: 2.5rem 0;
}
#contents #column .columnBody .block+.block::before {
	position: absolute;
	top: -1px;
	left: 50%;
	width: 1000px;
	height: 2px;
	margin-left: -500px;
	content: "";
	background: #ddd;
}
#contents #column .columnBody .block.bgBlue {
	background: #e6f0f9;
}
#contents #column .columnBody .secTitle {
	font-family: Arial, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.3;
	margin: 0;
	padding-left: 1rem;
	border-left: 8px solid #006ab7;
}
#contents #column .columnBody h3 {
	font-size: 1.5rem;
	font-weight: bold;
	margin: 2rem 0 0;
}
#contents #column .columnBody h3.merit {
	display: flex;
	align-items: flex-start;
	line-height: 1.3;
	margin: 2.5rem 0 0;
}
#contents #column .columnBody h3.merit .label {
	display: inline-block;
	color: #fff;
	margin-right: 1rem;
	padding: .5rem 1rem;
	background: #006ab7;
	white-space: nowrap;
}
#contents #column .columnBody h3.merit .label .no {
	display: inline-block;
	width: 1.5rem;
	font-size: .875em;
	line-height: 1.5rem;
	color: #006ab7;
	margin-left: .25rem;
	background: #fff;
	border-radius: 1rem;
	text-align: center;
}
#contents #column .columnBody h3.merit strong {
	display: inline-block;
	padding: .5rem 0;
}
#contents #column .columnBody p,
#contents #column .columnBody ul,
#contents #column .columnBody ol {
	margin: 1.5rem 0 0;
}
#contents #column .columnBody a {
	text-decoration: underline;
}
#contents #column .columnBody .underline {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #f7ed5a 60%, #f7ed5a 100%);
}
#contents #column .columnBody .img {
	margin: 2rem 0 0;
}
#contents #column .columnBody .img p {
	margin: 0;
}
#contents #column .columnBody .img .grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
}
#contents #column .columnBody .img .caption {
	font-size: .875rem;
	line-height: 1.7;
	padding-top: 1rem;
}
#contents #column .columnBody .img.blueBox {
	padding: 2.5rem;
	background: #e6f0f9;
}
#contents #column .columnBody .implementationSupport {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	margin-top: 2.5rem;
}
#contents #column .columnBody .implementationSupport .box {
	position: relative;
}
#contents #column .columnBody .implementationSupport .box a {
	display: block;
	text-decoration: none;
}
#contents #column .columnBody .implementationSupport .box .img {
	margin: 0;
}
#contents #column .columnBody .implementationSupport .box .txt h3 {
	margin: 1rem 0;
}
#contents #column .columnBody .implementationSupport .box .txt p {
	color: #333;
	margin: 0;
}
#contents #column .columnBody .implementationSupport .box .txt p.link {
	color: #006ab7;
	font-size: .875rem;
	margin-top: .75rem;
}
#contents #column .columnBody .implementationSupport .box .txt p.link::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f105";
	margin-right: .5em;
}
#contents #column .columnBody .links h3 {
	font-size: 1.25rem;
}
#contents #column .columnBody .links p {
	margin: .5rem 0 0;
}

#contents #column #beginning {
	padding: .5rem 0 2.5rem;
}

#contents #column #toc .box {
	padding: 2rem 3.5rem;
	background: #f2f2f2;
}
#contents #column #toc .box .head {
	font-size: 1.125rem;
	font-weight: bold;
	margin: 0;
}
#contents #column #toc .box .head .txt {
	font-size: 1.5rem;
}
#contents #column #toc .box .head .collapseBtn {
	color: #006ab7;
	margin: 0 .5rem;
	padding: 0;
	background: none;
	border: none;
	text-decoration: underline;
}
#contents #column #toc .box ol {
	margin: 0;
	padding: 1rem 0 .5rem;
}
#contents #column #toc .box ol li {
	font-size: 1.125rem;
	margin: .5rem 0 0 1.5rem;
	padding: 0 0 0 .5rem;
	list-style-type: decimal;
}

#contents #column #end {
	padding: 2.5rem 0;
	background: #e6f0f9;
}
#contents #column #end h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.5;
	margin: 0;
	text-align: center;
}
#contents #column #end .contact p.guide {
	font-size: 1.125rem;
	font-weight: bold;
	color: #016ea7;
	margin: 1.5rem 0;
}
#contents #column #end .contact p.btn {
	margin: 0;
}
#contents #column #end .contact p.btn a {
	display: inline-block;
	max-width: 480px;
	width: 100%;
	font-size: 1.25rem;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	padding: 1.25rem;
	background: #006ab7;
	border-bottom: 4px solid #004384;
	border-radius: .5rem;
}
#contents #column #end .contact p.btn a::before {
	font-family: "Font Awesome 5 Free";
	font-size: 1.5rem;
	font-weight: 900;
	content: "\f0e0";
	margin-right: 1rem;
}


/* ----------------------------------------------
   Hover
------------------------------------------------ */
@media (any-hover: hover) {
	
	#contents #column #toc .box .head .collapseBtn {
		transition: .3s;
	}
	#contents #column #toc .box .head .collapseBtn:hover {
		opacity: 0.5;
	}
	
}


/* ----------------------------------------------
   Media Queries
------------------------------------------------ */
@media (min-width: 768px) {
	
	#breadcrumb {
		padding: 0;
		white-space: nowrap;
		overflow: hidden;
	}
	#breadcrumb li {
		line-height: 40px;
	}
	
	#contents #column br.spOnly {
		display: none;
	}
	#contents #column .columnTitle::before {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 40px;
		content: "";
		background: #006ab7 url(/assets/images/common/mainimg_bg.png) no-repeat top center;
	}
	
}

@media (max-width: 767px) {
	
	#contents .wrap {
		margin: 0 1.25rem;
	}
	
	#contents #column .mainImg .mainTitle {
		margin: 0 1.5rem;
	}
	
	#contents #column .columnTitle {
		padding: 1.5rem 0 0;
	}
	#contents #column .columnTitle h1 {
		font-size: 1.5rem;
		padding: 0 0 1.5rem;
		border-bottom-width: 3px;
	}
	
	#contents #column .columnBody .secTitle {
		font-size: 1.375rem;
		padding-left: .75rem;
		border-left-width: 4px;
	}
	#contents #column .columnBody h3 {
		font-size: 1.25rem;
	}
	#contents #column .columnBody h3.merit {
		font-size: 1.25rem;
	}
	#contents #column .columnBody h3.merit .label {
		font-size: 1rem;
		margin-right: .75rem;
		padding: .5rem;
	}
	#contents #column .columnBody h3.merit .label .no {
		width: 1.25rem;
		line-height: 1.25rem;
		margin-left: .25rem;
	}
	#contents #column .columnBody h3.merit strong {
		padding: 0;
	}
	#contents #column .columnBody p,
	#contents #column .columnBody ul,
	#contents #column .columnBody ol {
		margin: 1.25rem 0 0;
	}
	#contents #column .columnBody .block {
		padding: 2rem 0;
	}
	#contents #column .columnBody .img.blueBox {
		padding: 1.25rem;
	}
	#contents #column .columnBody .img .grid2 {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	#contents #column .columnBody .implementationSupport {
		grid-template-columns: 1fr;
		gap: 2rem;
		margin-top: 1.5rem;
	}

	#contents #column #beginning {
		padding: .5rem 0 1.5rem;
	}
	
	#contents #column #toc .box {
		padding: 1.5rem 1rem;
	}
	#contents #column #toc .box .head {
		font-size: 1rem;
	}
	#contents #column #toc .box .head .txt {
		font-size: 1.25rem;
	}
	#contents #column #toc .box ol {
		padding: .5rem 0;
	}
	#contents #column #toc .box ol li {
		font-size: 1rem;
	}
	
	#contents #column #end {
		padding: 1.5rem 1.25rem;
	}
	#contents #column #end h2 {
		font-size: 1rem;
	}
	#contents #column #end .contact p.guide {
		font-size: .875rem;
		margin: 1rem 0;
		text-align: left;
	}
	#contents #column #end .contact p.btn a {
		font-size: 1rem;
		padding: 1rem;
		border-bottom-width: 2px;
	}
	#contents #column #end .contact p.btn a::before {
		font-size: 1.125rem;
		margin-right: .5rem;
	}
	
}