/******************************************************************************
******************************************************************************
**
** style.cssにおいて
** -- baseでは基本タグとサイト大枠のCSS指定
** -- headerではヘッダーのCSS指定
** -- global navではグローバルナビのCSS指定
** -- contentではコンテント・メイン・サイドナビのCSS指定
** -- footerではフッターのCSS指定
** -- pagetopではページトップボタンのCSS指定
** -- indexではトップページのCSS指定
** -- pageでは汎用ページのCSS指定
** -- styleでは汎用ページのコンテンツ（データ入れ）で使用する基本タグのCSS指定
**
** 注意事項
** -- CSSの命名規則はApplicatsオリジナルの命名規則を採用しています。
** -- 初期フォントサイズはreset.cssにて13pxにリセットしています。
** -- 行間は1.6にリセットしています。
**        単位は不要です。(スタイル崩れする可能性有)
** -- コンテンツ内のフォントサイズ・行間は
**        [ base ]のcontentsクラスで指定しています。
**        変更する場合はこちらを変更してください。
**
******************************************************************************
******************************************************************************/

/*-------------------------------------------------------------------------------------------------------
*********************************************************************************************************
*********************************************************************************************************
******
****** PCスタイル
******
*********************************************************************************************************
*********************************************************************************************************
-------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------
******************************************************************************
** content
******************************************************************************
----------------------------------------------------------------------------*/
.post_main_mcon{
	background-color: #FFF;
	padding: 2rem;
	margin-top: 1rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.post_main_hd{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	color: #FFF;
	padding: 2rem;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.post_main_hd_thum{
	width: 200px;
}
.post_main_hd_thum img{
	width: 100%;
	height: auto;
}
.post_main_hd_con{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	width: calc( 100% - (200px + 2rem));
}
.post_main_hd_head01{
	font-size: 1.8rem;
	line-height: 1.6;
	order: 1;
	width: 100%;
}
.post_main_hd_date{
	text-align: right;
	margin-top: 0.5rem;
	opacity: 0.8;
	order: 3;
	width: 110px;
}
.post_main_hd_cate_list{
	order: 2;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	margin-top: 0.5rem;
	width: calc(100% - (110px + 1rem));
}
.post_main_hd_cate_list a{
	background-color: #3f86e8;
	color: #FFF;
	font-size: 0.8rem;
	padding: 0.2em 0.5em;
	text-decoration: none;
	position: relative;
	transition: all 0.3s ease;
}
.post_main_hd_cate_list a:hover{
	background-color: #FFF;
	color: #3f86e8;
}
.post_main_hd_cate_list a::before{
	position: absolute;
	content: "";
	border-bottom: 1px #3f86e8 solid;
	left: 3px;
	bottom: -3px;
	right: -3px;
}
.post_main_hd_cate_list a::after{
	position: absolute;
	content: "";
	border-right: 1px #3f86e8 solid;
	top: 3px;
	bottom: -3px;
	right: -3px;
}
.post_main_hd_cate_list a:hover::before,
.post_main_hd_cate_list a:hover::after{
	border-color: #FFF;
}
.post_main_recentpost{
	background-color: #FFF;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	margin-top: 2rem;
}
.post_main_recentpost h3{
	background-color: #e8f3fb;
	border-bottom: 1px solid #3f86e8;
	color: #003054;
	font-weight: 700;
	font-size: 1.4rem;
	padding: 0.7rem 1em;
}
.post_main_recentpost_list li{
	border-bottom: 1px solid #CCC;
}
.post_main_recentpost_list li:last-child{
	border-bottom: none;
}
.post_main_recentpost_list a{
	color: #333;
	display: block;
	font-size: 0.9rem;
	padding: 1em;
	text-decoration: none;
	transition: all 0.3s ease;
}
.post_main_recentpost_list a:hover{
	background-color: #F1F8FC;
	color: #3f86e8;
}
/*----------------------------------------------------------------------------
******************************************************************************
** main content
******************************************************************************
----------------------------------------------------------------------------*/
.mcon {
	font-size: 1.1rem;
	word-wrap: break-word;
	letter-spacing: .1rem;
}
.mcon a img:hover {
	opacity: 0.8;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease
}
.mcon h1 {}
.mcon h2 {
	border-bottom: 3px solid #3f86e8;
	color: #003054;
	font-size: 1.6rem;
	margin: 3rem 0 1rem;
	position: relative;
	padding: 0 0.3em 0.6em;
}
.mcon h2::after{
	border-bottom: 3px solid #00a0e9;
	content: "";
	left: 0;
	bottom: -3px;
	width: 30%;
	position: absolute;
}
.mcon h3 {
	background-color: #e8f3fb;
	border-radius: 6px;
	color: #003054;
	font-weight: 700;
	font-size: 1.4rem;
	margin: 3rem 0 1rem;
	padding: 0.7rem 1em;
}
.mcon h4{
	border-left: 2px solid #3f86e8;
	font-size: 1.2rem;
	margin: 2rem 0 0.5rem;
	padding: 0.1em 0 0.1em 1em;
}
.mcon h5 {
	font-size: 1.1rem;
	margin: 1rem 0 0.25rem;
}
.mcon hr {
	border: none;
	border-top: 1px dotted #000
}
.mcon iframe {
	max-width: 100%
}
.mcon img {
	max-width: 100%;
	height: auto
}
.mcon ol {
	margin-top: 1em;
	margin-bottom: 0.5em
}
.mcon ol li {
	margin-left: 2em;
	margin-bottom: 0.5em
}
.mcon p {
	margin-bottom: 1em
}
.mcon ul {
	margin-top: 1em;
	margin-bottom: 0.5em
}
.mcon ul li {
	list-style-type: disc;
	margin-left: 1.5em;
	margin-bottom: 0.5em
}
.syntaxhighlighter{
	border-radius: 8px;
	padding: 1rem;
}
/* ==== single ==== */
.single_main_ttl_01 {
	background-color: #4987BE;
	background-size: cover;
	color: #FFF;
	font-size: 1.6rem;
	padding: 20rem 0 6rem;
	text-align: center;
	margin: 0 calc(50% - 50vw) 5rem;
}
.single_main_ttl_01 span {
	opacity: 0.4;
	display: block;
	font-size: 1.4rem;
	font-family: 'Anton', sans-serif;
	font-weight: normal;
}
.single_main_toc{
	background-color: #EDEEFF;
	padding: 1rem 2rem;
	margin: 2rem 1rem 1rem;
	position: relative;
	counter-reset: toc;
}
.single_main_toc::before{
	content: "目次";
	color: #202E6F;
	font-size: 1.1rem;
	font-weight: bold;
	position: absolute;
	top: -0.9em;
}
.single_main_toc a{
	color: #111;
	font-size: 0.95rem;
	text-decoration: none;
	opacity: 0.8;
}
.single_main_toc a:hover{
	text-decoration: underline;
}
.single_main_toc div{
	position: relative;
}
.single_main_toc div::before {
	background-color: rgba(0,0,0,0.4);
	border-radius: 50%;
	color: #FFF;
	height: 1.4em;
	width: 1.4em;
	font-size: 0.8rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	counter-increment: toc;
	content: counter(toc);
	position: absolute;
	top: 0.8em;
	left: -1.7em;
}