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

/*====================================================*/
/* Frame */
/*====================================================*/
div.blogWrap{ padding: 88px 0 0 0; }

div.blogColumn{
	display: flex; display: -webkit-flex; display:-ms-flexbox;
	align-items: flex-start; -webkit-align-items: flex-start;
	max-width: 1056px;
	margin: 0 auto;
}
div.blogColumn div.mainColumn{
	flex: 1;
	margin-right: 56px;
	background: #fff;
	border-radius: 8px;
	min-height: 800px;
}
div.blogColumn div.sideColumn{ width: 304px;}

	/* ======= PC以下 =======*/
	@media (max-width: 1056px) {
		div.blogWrap{ padding: 88px 24px 0 24px; }
	}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.blogWrap{ padding: 64px 40px 0 40px; }
		div.blogColumn div.mainColumn{
			margin-right: 40px;
		}
		div.blogColumn div.sideColumn{ width: 240px;}
	}
	/* ======= SP：個別設定 =======*/
	@media (max-width: 900px) {
		div.blogColumn{ flex-direction: column; -webkit-flex-direction: column;}
		div.blogColumn div.mainColumn{
			margin-right: 0px;
			margin-bottom: 40px;
		}
		div.blogColumn div.sideColumn{ width: 100%;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.blogWrap{ padding: 56px 24px 0 24px;}
		div.blogColumn div.mainColumn{ min-height: auto;}
	}



/*====================================================*/
/* BLOG TOP */
/*====================================================*/

/*==============================*/
/* ブログ 一覧 */
/*==============================*/
div.blogArchive > div{ padding: 30px 0 20px 0;}
div.blogArchive > div:not(:last-child){ border-bottom: 1px solid #e1e1e1;}
div.blogArchive > div:first-child{ border-top: 1px solid #e1e1e1;}

	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.blogArchive > div{ padding: 34px 0 28px 0;}
	}


/*-- タイトル
------------------------- */
div.blogArchive div.blogArchive-title{ margin-bottom: 20px;}
div.blogArchive div.blogArchive-title h2{ margin-bottom: 8px;}
div.blogArchive div.blogArchive-title h2 a{
	display: inline-block;
	font-size: 21px;
	line-height: 1.414em;
	font-weight: 600;
	color: #000;
}
div.blogArchive div.blogArchive-title h2 a:hover{
	color: #257E9E;
	text-decoration: underline;
}

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

div.blogArchive div.blogArchive-title div ul li.design a{ color: #0CA8D0; border: 1px solid #0CA8D0;} /*-- デザイン -- */
div.blogArchive div.blogArchive-title div ul li.design a:hover{ background: #0CA8D0;}

div.blogArchive div.blogArchive-title div ul li.it-tool a{ color: #12AEFC; border: 1px solid #12AEFC;} /*-- IT･ツール -- */
div.blogArchive div.blogArchive-title div ul li.it-tool a:hover{ background: #12AEFC;}

div.blogArchive div.blogArchive-title div ul li a:hover{ color: #fff;}

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

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


/*-- コンテンツ
------------------------- */
div.blogArchive div.blogArchive-content{
	display: flex; display: -webkit-flex;
}
/*-- 画像 -- */
div.blogArchive div.blogArchive-content figure{
	width: 264px;
	overflow: hidden;
}
div.blogArchive div.blogArchive-content figure img{
	transform: scale(1);
  	transition: .3s ease-in-out;
}
div.blogArchive div.blogArchive-content figure a:hover img{ transform: scale(1.2);}

/*-- コンテンツ -- */
div.blogArchive div.blogArchive-content div{
	flex: 1;
	margin-top: 8px;
	margin-left: 28px;
}
div.blogArchive div.blogArchive-content div p{
	font-size: 15px;
	line-height: 1.618em;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden; 
}
div.blogArchive div.blogArchive-content div p.detailLink{ margin-top: 10px;}
div.blogArchive div.blogArchive-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.blogArchive div.blogArchive-content{ flex-direction: column-reverse; -webkit-flex-direction: column-reverse;}
		/*-- 画像 -- */
		div.blogArchive div.blogArchive-content figure{ width: 100%;}

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


/*==============================*/
/* ブログ内プロフィール */
/*==============================*/
div.profileBox{
	display: flex; display: -webkit-flex;
	align-items: center; -webkit-align-items: center;
	padding: 32px 32px 30px 20px;
	border: 12px solid #F8F8F8;
}

/*-- 
------------------------- */
div.profileBox figure{
	width: 120px;
	text-align:center; 
}

/*-- 
------------------------- */
div.profileBox div{
	flex: 1;
	margin-left: 16px;
}
div.profileBox div h4{
	margin-bottom: 10px;
	font-size: 21px;
	line-height: 1.3em;
}

div.profileBox div p{ margin-bottom: 14px;}

div.profileBox div ul{
	display: flex; display: -webkit-flex;
}
div.profileBox div ul li:not(:last-child){ margin-right: 24px;}
div.profileBox div ul li a{
	font-weight: 600;
	font-size: 16px;
	font-family: 'Roboto', sans-serif; letter-spacing: -0.03em;
}
div.profileBox div ul li a img{ margin-right: 7px;}


/*==============================*/
/* サイドメニュー　プロフィール */
/*==============================*/
dl.blogProfile{
	padding: 22px 24px 22px 24px;
	border: 1px solid #e1e1e1;
}
dl.blogProfile dt{
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3em;
	color: #000;
}

dl.blogProfile dd p{
	font-size: 13px;
	line-height: 1.7em;
	text-align: justify;
	text-align-last: left;
}
dl.blogProfile dd p:not(:last-child){ margin-bottom: 10px;}


/*==============================*/
/* Home Btn */
/*==============================*/
p.homeBtn{ text-align: center;}
p.homeBtn a{
	display: block;
	padding: 12px 8px 10px 0;
	font-size: 17px;
	font-weight: 600;
	border: 1px solid #e1e1e1;
}
p.homeBtn a:hover{ background: #F3FCFF;}
p.homeBtn a img{
	position: relative; top: -3px;
	margin-right: 8px;
}


/*==============================*/
/* MENU BOX */
/*==============================*/

/*-- 
------------------------- */
div.menuBox div.menuTitle{
	margin-bottom: 22px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e1e1e1;
}
div.menuBox div.menuTitle h2{
	font-size: 22px;
	color: #000;
}

/*-- 
------------------------- */
div.menuBox div.menuContent dl{
	display: flex; display: -webkit-flex;
	align-items: center; -webkit-align-items: center;
}
div.menuBox div.menuContent dl:not(:last-child){ margin-bottom: 16px;}
div.menuBox div.menuContent dl dt{
	order: 2;
	flex: 1;
	margin-left: 16px;
}
div.menuBox div.menuContent dl dt{ line-height: 1.414em;}
div.menuBox div.menuContent dl dt a{
	font-size: 14px;
	line-height: 1.618em;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; 
}
div.menuBox div.menuContent dl dt a:hover{
	color: #257E9E;
	text-decoration: underline;
}
div.menuBox div.menuContent dl dd{
	order: 1;
	width: 96px;
}


/*==============================*/
/* カテゴリー */
/*==============================*/
div.menuBox div.categoryList ul li a{
	position: relative;
	display: block;
	padding: 12px 8px 10px 8px;
	border-bottom: 1px solid #e1e1e1;
}
div.menuBox div.categoryList ul li a::after{
	position: absolute; top: 50%; right: 8px;
	content: "";
	width: 7px;
	height: 7px;
	border-top: 1px solid #444;
	border-right: 1px solid #444;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: -3px;
}
div.menuBox div.categoryList ul li a:hover{	background: #F3FCFF;}


/*==============================*/
/* pankuzu */
/*==============================*/
ul.pankuzu{
	position: relative;
	display: flex; display: -webkit-flex;
	padding-top: 9px;
	padding-bottom: 4px;
	background: #F5F5F5;
	border-bottom: 1px solid #eee;
}
ul.pankuzu li{
	position: relative;
	font-size: 13px;
}
ul.pankuzu > li:not(:last-child){ margin-right: 28px;}
ul.pankuzu > li::after{
	position: absolute; top: 6px; right: -16px;
	content: "";
	width: 7px;
	height: 7px;
	border-top: 1px solid #444;
	border-right: 1px solid #444;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
ul.pankuzu > li:last-child::after{ display: none;}
ul.pankuzu li a{
	font-size: 13px;
}
ul.pankuzu li a:hover{ text-decoration: underline; color: #257E9E;}

/*-- 
------------------------- */
ul.pankuzu li ul{ display: flex; display: -webkit-flex;}
ul.pankuzu li ul li:not(:last-child){ margin-right: 14px;}
ul.pankuzu li ul li::after{
	position: absolute; top: 0px; right: -12px;
	content: "・";
}
ul.pankuzu li ul li:last-child::after{ display: none;}



/*==============================*/
/* SHARE BTN */
/*==============================*/
ul.shareBtn{
	display: flex; display: -webkit-flex;
	margin-bottom: 40px;
}
ul.shareBtn li{
	width: calc(100% / 3);
	background: #ccc;
	text-align: center;
	color: #fff;
}
ul.shareBtn li a{
	display: block;
	padding: 4px 0;
}
ul.shareBtn li:nth-child(1) a{ background: #54ACEE;}
ul.shareBtn li:nth-child(2) a{ background: #3B5998;}
ul.shareBtn li:nth-child(3) a{ background: #B7081B;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		ul.shareBtn{ gap: 0 6px;}
		ul.shareBtn li{ width: calc(calc(100% - 12px) / 3);}
	}




/*====================================================*/
/* ブログパーツ */
/*====================================================*/

/*==============================*/
/* タイトル */
/*==============================*/
div.blogTitle{
	margin-bottom: 32px;
}

/*-- 
------------------------- */
div.blogTitle div{
	display: flex; display: -webkit-flex;
	align-items: flex-start; -webkit-align-items: flex-start;
	margin-bottom: 14px;
	color: #C0C0C0;
}
div.blogTitle div p.blogDate{
	margin-right: 14px;
	color: #858585;
}

div.blogTitle div ul.blogCategory{ display: flex; display: -webkit-flex; }
div.blogTitle div ul.blogCategory li:not(:last-child){ margin-right: 6px;}
div.blogTitle div ul.blogCategory li a{
	position: relative; top: -1px;
	display: block;
	padding: 4px 9px 3px 9px;
	background: #257E9E;
	border-radius: 200px;
	color: #fff;
	font-size: 14px;
	line-height: 1em;
	min-width: 72px;
	text-align: center;
}

/*-- 
------------------------- */
div.blogTitle h2{
	margin-bottom: 16px;
	font-size: 28px;
	line-height: 1.1em;
	font-family: "Noto Sans Japanese";
	font-weight: 500;
	letter-spacing: -0.04em;
}


/*==============================*/
/* アイキャッチ */
/*==============================*/
p.blogEyecatch{
	margin-bottom: 32px;
}

/*==============================*/
/* 目次 */
/*==============================*/
div.blogList{
	position: relative;
	margin-bottom: 64px;
	padding: 32px 48px 28px 48px;
	background: #FAFAFA;
}
div.blogList::before{
	position: absolute; top: 8px; left: 8px;
	content: "";
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	border: 1px dashed #DDDDDD;
}

/*-- 
------------------------- */
div.blogList h3{
	margin-bottom: 12px;
	line-height: 1.3em;
	font-size: 21px;
	font-weight: 400;
	font-family: "Noto Sans Japanese";
	letter-spacing: -0.03em;
	text-align: center;
}

/*-- 
------------------------- */
div.blogList ul li.blogList_title{
	position: relative;
	padding: 6px 0 6px 14px;
}
div.blogList ul li.blogList_title::before{
	position: absolute; top: 16px; left: 0;
	content: "";
	width: 4px;
	height: 4px;
	background: #000;
	border-radius: 50%;
}
div.blogList ul li.blogList_title a{
	font-size: 14px;
	text-decoration: underline;
	color: #444;
}

/*-- 
------------------------- */
div.blogList ul li.blogList_list{
	position: relative;
	padding: 4px 0 4px 32px;
}
div.blogList ul li.blogList_list:before{
	position: absolute; top: 12px; left: 12px;
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid #5AB4CB;
	border-right: 2px solid #5AB4CB;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
div.blogList ul li.blogList_list a{
	color: #444;
	font-size: 13px;
	text-decoration: underline;
}
div.blogList ul li.blogList_title a:hover,
div.blogList ul li.blogList_list a:hover{  color: #009DC5; }


/*==============================*/
/* 大見出し */
/*==============================*/
.blog_SecTitle{
	position: relative;
	margin-top: 40px;
	margin-bottom: 28px;
	padding-bottom: 16px;
	line-height: 1.3em;
	font-size: 24px;
	font-weight: 500;
	font-family: "Noto Sans Japanese";
	letter-spacing: -0.04em;
	border-bottom: 1px solid #ccc;
}

/*==============================*/
/* 中見出し */
/*==============================*/
.blog_MainTitle{
	position: relative;
	margin-bottom: 16px;
	padding-left: 28px;
	line-height: 1.3em;
	font-size: 20px;
	font-weight: 500;
	font-family: "Noto Sans Japanese";
	letter-spacing: -0.04em;
}	
.blog_MainTitle::before{
	position: absolute; top: 5px; left: 0;
	content: "";
	width: 18px;
	height: 18px;
	border: 1px solid #000;
	border-radius: 50%;
}

/*==============================*/
/* 小見出し */
/*==============================*/
.blog_SubTitle{
	font-size: 19px;
	margin-bottom: 14px;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.3em;
	font-family: "Noto Sans Japanese";
}


/*==============================*/
/* 注釈 */
/*==============================*/
div.cautionBox{
	position: relative;
	margin-bottom: 24px;
	padding: 12px 10px 10px 48px;
	background: #F3F3F3;
	border-radius: 200px;
}
div.cautionBox::before{
	position: absolute; top: 6px; left: 7px;
	content: "!";
	width: 30px;
	height: 30px;
	border-radius: 50%;
	padding-top: 2px;
	background: #fff;
	text-align: center;
	color: #229C83;
	font-size: 20px;
	font-weight:bold;
	font-family: "Noto Sans Japanese";
}
div.cautionBox p{
	font-size: 13px;
	color: #444;
}



/*==============================*/
/* dl リスト */
/*==============================*/
div.dlBox{
	margin-bottom: 32px;
	padding: 12px 12px;
	border: 1px solid #229C83;
	background: #fff;
	border-radius: 3px;
}
div.dlBox dl{
	display: flex; display: -webkit-flex;
	padding: 11px 0;
}
div.dlBox dl:not(:last-child){ border-bottom: 1px solid #E9E9E9;}
div.dlBox dl:first-child{ padding-top: 0;}
div.dlBox dl:last-child{ padding-bottom: 0;}

div.dlBox dl dt{
	width: 88px;
	padding: 4px 0 5px 0;
	background: #229C83;
	border-radius: 3px;
	text-align: center;
	line-height: 1.3em;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	font-family: "Noto Sans Japanese";
	letter-spacing: -0.04em;
}

div.dlBox dl dd{
	padding-top: 4px;
	flex: 1;
	margin-left: 12px;
	font-size: 14px;
	color: #444;
}



/*==============================*/
/* リスト */
/*==============================*/
ul.blogUL{
	padding: 20px 24px 18px 24px;
	margin-bottom: 24px;
	border-radius: 5px;
	background: #FFFDF8 url("/common/img/share/bg_paper.png");
	border: 1px dashed #DFD7B7;
}
ul.blogUL li{
	line-height: 1.414em;
	color: #444;
}
ul.blogUL li:not(:last-child){  margin-bottom: 10px;}

ul.blogUL li em{
	line-height: 1.414em;
}

/*-- 
------------------------- */
ul.blogUL.decimal{ counter-reset: list;}
ul.blogUL.decimal li{
	position: relative;
	padding-left: 24px;
	text-indent: 0em;
	list-style: none!important;
}
ul.blogUL.decimal li::before{
	position: absolute; top: 0px; left: 1px;
	counter-increment: list;
	content: counter(list) ".";	
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 500;
}

/*-- 
------------------------- */
ul.blogUL.disc li{
	position: relative;
	list-style: none!important;
	padding-left: 24px;
	text-indent: 0;
}
ul.blogUL.disc li::before{
	position: absolute; top: 4px; left: 0;
	content: "";
	width: 12px;
	height: 12px;
	background: #DFD7B7;
	border-radius: 50%;
}


/*==============================*/
/* テキスト */
/*==============================*/
.text_layout{
	margin-bottom: 24px;
}
.text_layout > p{
	line-height: 1.8em;
	color: #444;
}
.text_layout > p:not(:last-child){ margin-bottom: 16px;	}


.text_layout > p a{
	position: relative;
	margin-left: 4px;
	padding-left: 21px;
	color: #11A6DC;
	text-decoration: underline;
}
.text_layout > p a::before{
	position: absolute; top: 2px; left: 0;
	content: "";
	width: 16px;
	height: 16px;
	background: url("/common/img/blog/icon_link.svg");
}


/*-- マーカー
------------------------- */
.marker{
	position: relative; top: -3px;
	background: linear-gradient(transparent 60%, #FFE380 60%);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.8em;
	font-size: 17px;
	font-family: "Noto Sans Japanese";
}


/*====================================================*/
/* 注意書き */
/*====================================================*/
div.annotation{
	margin-left: 24px;
	padding: 16px 24px 16px 24px;
	background: #F8F8F8;
	border-radius: 5px;
	font-size: 13px!important;
	line-height: 21px!important;
	margin-bottom: 24px;
}

/*==============================*/
/* 画像 */
/*==============================*/
p.blog_img100,
p.blog_img80,
p.blog_img60,
p.blog_img50,
p.blog_img40{
	margin-bottom: 24px;
}
p.blog_img100 img{ width: 100%; }
p.blog_img80 img{ width: 80%; }
p.blog_img60 img{ width: 60%; }
p.blog_img50 img{ width: 50%; }
p.blog_img40 img{ width: 40%; }

.imgBorder img{ border: 1px solid #ccc; }
.imgBorder_none img{ border: none; }


/*==============================*/
/* 引用 */
/*==============================*/
blockquote{
	position: relative;
	padding: 32px 0;
	margin-bottom: 16px;
}
blockquote:before{
	position: absolute;	left: 0; top: 0;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 24px;
	content: "\f10d";
	color: #009DC5;
}
blockquote:after{
	position: absolute;	right: 0; bottom: 0;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 24px;
	content: "\f10e";
	color: #009DC5;
}

/*==============================*/
/* 吹き出しコメント */
/*==============================*/

/*-- 縦並び調整
------------------------- */
div.balloon-list{
	display: flex; display: -webkit-flex;
	flex-direction: column; -webkit-flex-direction: column;
	align-items: flex-start; -webkit-align-items: flex-start;
	margin: 16px 0 24px 0;
}

/*-- ベース装飾
------------------------- */
div.balloon-list p{
	position: relative;
	display: inline-block;
	padding: 22px 24px 20px 24px;
	margin: 0 0 24px 88px;
	border-radius: 8px;
	font-size: 14px;
	background: #F8F8F8;
}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.balloon-list p br{ display: none; }
	}

/*-- アイコン設定
------------------------- */
div.balloon-list p:before{
	position: absolute; top: 50%; left: -88px;
	content: "";
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin-top: -30px;
}
div.balloon-list p.icon_smail:before{ background: url("/common/img/blog/billybird.svg") no-repeat; }/* 女性笑顔 */
div.balloon-list p.icon_surprised:before{ background: url("/common/img/blog/billybird.svg") no-repeat; }/* 女性驚く */
div.balloon-list p.icon_impressed:before{ background: url("/common/img/blog/billybird.svg") no-repeat; }/* 女性関心*/
div.balloon-list p.icon_confused:before{ background: url("/common/img/blog/billybird.svg") no-repeat; }/* 女性困る */
div.balloon-list p.icon_catsmile:before{ background: url("/common/img/blog/billybird.svg") no-repeat; }/* 猫笑顔 */

/*-- 吹き出し
------------------------- */
div.balloon-list p:after{
	position: absolute; top: 50%; left: -12px;
	display: block;
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent #F8F8F8 transparent transparent; 
	border-width: 10px 17.32px 10px 0px;
}

/* 右寄せ 上書き調整 */
div.balloon-list p.right{
	margin: 0 88px 0 auto;
}
div.balloon-list p.right:before{ position: absolute; top: 50%; left:auto; right: -88px; }
div.balloon-list p.right:after{	position: absolute; top: 50%; left:auto; right: -9px; border-color: transparent transparent transparent #F8F8F8; border-width: 10px 0px 10px 17.32px;}


/*==============================*/
/* ページナビゲーション */
/*==============================*/
div.wp-pagenavi{
	margin-bottom: 32px;
	text-align: center;
}
div.wp-pagenavi span,
div.wp-pagenavi a{
	display: inline-block;
	min-width: 2.3em;
	text-align: center;
	border: 1px solid #ccc;
	font-size: 14px;
	margin: 0 4px;
	background: #fff;
	font-weight: 500!important;
	font-family: 'Roboto', sans-serif;
	letter-spacing: -0.03em;
	border-radius: 3px;
}
div.wp-pagenavi a{
	position: relative;
	top: 1px;
}
div.wp-pagenavi .current{
	border: 1px solid #257E9E!important;
	background: #257E9E;
	color: #fff;
}
div.wp-pagenavi .pages{
	background: #666;
	color: #fff;
}
div.wp-pagenavi .previouspostslink,
div.wp-pagenavi .nextpostslink{ background: #efefef; }


/*==============================*/
/* 次の記事 */
/*==============================*/
div.nextPrev{
	display: flex; display: -webkit-flex; display:-ms-flexbox;
	flex-wrap: wrap; -webkit-flex-wrap: wrap;  -ms-flex-wrap: wrap;
	justify-content: space-between; -webkit-justify-content: space-between;
	margin-bottom: 32px;
}
div.nextPrev div.prev,
div.nextPrev div.next{
	position: relative;
	width: calc(50% - 24px);
	padding: 12px ;
	background: #fff;
	border-radius: 6px;
	box-shadow: 1px 1px 6px -3px rgba(90,90,90,0.5);
}
div.nextPrev div.prev{ border-left: 16px solid #009DC5; }
div.nextPrev div.next{ border-right: 16px solid #009DC5; }

div.nextPrev div.prev a,
div.nextPrev div.next a{
	display: block;
	position: absolute;	top: 0;	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
}
div.nextPrev div.prev:hover,
div.nextPrev div.next:hover{ background: #fffbf2; }
div.nextPrev div.prev:after,
div.nextPrev div.next:after{
	position: absolute;
	content: "";
	top: calc(50% - 6px);
	width: 12px;
	height: 12px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
}
div.nextPrev div.prev:after{ left: -12px; transform: rotate(225deg); -webkit-transform: rotate(225deg); }
div.nextPrev div.next:after{ right: -12px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }

div.nextPrev dl{
	display: flex; display: -webkit-flex; display:-ms-flexbox;
	align-items: center; -webkit-align-items: center;
}
div.nextPrev div.prev dl{
	flex-direction: row-reverse; -webkit-flex-direction: row-reverse;
}
div.nextPrev div.prev dl dt{
	margin-left: 16px;
}

div.nextPrev dl dt{
	flex: 1;
	font-size: 16px;
	margin-bottom: 8px;
	font-weight: 500;
	line-height: 1.3em;
	font-family: "Noto Sans Japanese";
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
div.nextPrev dl dd{
	width: 160px;
}

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