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

/*==============================*/
/* サブタイトル */
/*==============================*/
.blockTitle{
	font-size: 24px;
	margin-bottom: 16px;
}
.blockTitle span{
	color: #ccc;
	margin-left: 16px;
}

/*==============================*/
/* 新着リスト */
/*==============================*/
div.column{
	display: flex; display: -webkit-flex; display:-ms-flexbox;
    flex-wrap: wrap; -webkit-flex-wrap: wrap;  -ms-flex-wrap: wrap;
	border-bottom: 1px solid #ccc;
	margin-bottom: 40px;
}
div.column dl{
	width: calc( 20% -  24px );
	margin: 0 12px 24px 12px;
}
div.column dl dd.category{
	display: inline;
	padding: 0 16px;
	border-radius: 16px;
	font-size: 12px;
	color: #fff;
}
div.column dl dd.title a{
	display: block;
}
div.column dl dd.title a:hover{
	color: #009DC5;
}

div.column dl dd.date{
	font-size: 12px;
	font-family: "UD新ゴ コンデンス90 L";
}
div.column dl dd.tmb{
	position: relative;
	margin-bottom: 8px;
}
div.column dl dd.tmb:before{
	position: absolute;
	bottom: 24px;
	right: 24px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 32px;
	content: "\f00e";
	color: #009DC5;
}
div.column dl dd.tmb img{
	border: 1px solid #ccc;
	transition: all 0.5s;
}
div.column dl dd.tmb img:hover{
	border: 1px solid #ccc;
	transform: scale(1.3,1.3);
	z-index: 999;
}

/*==============================*/
/* リンクリスト */
/*==============================*/
div.linkList{
	margin-right: calc( -50vw + 676px );
	padding-right:  calc( -50vw + 676px );
	border-radius: 8px 0 0 8px;
	padding: 16px;
	margin-bottom: 64px;
	background: url("/common/img/share/bg_church.png") repeat;
}
div.linkList ul{
	display: flex; display: -webkit-flex; display:-ms-flexbox;
    flex-wrap: wrap; -webkit-flex-wrap: wrap;  -ms-flex-wrap: wrap;
	max-width: calc( 1080px - 16px );
	background: #fff;
	padding: 16px 32px;
	border-radius: 8px;
}
div.linkList ul li{
	width: calc( 100% / 4 );
	line-height: 32px;
}
div.linkList ul li::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
	font-size: 20px;
	content: "\f249";
	color: #257E9E;
	margin-right: 8px;
}

/*==============================*/
/* カテゴリ リスト */
/*==============================*/
.categoryList_column{
	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;
}
.categoryList{
	width: calc( 50% - 24px );
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #ccc;
}
.categoryList .cateTitle,
.categoryList .cateData,
.categoryList .cateBtn{
	margin-left: 216px;
}

/*==============================*/
/* サムネイル */
/*==============================*/
.categoryList p.tmb{
	position: relative;
	float: left;
	width: 200px;
}
.categoryList p.tmb:before{
	position: absolute;
	bottom: 24px;
	right: 24px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 32px;
	content: "\f00e";
	color: #009DC5;
}
.categoryList p.tmb img{
	border: 1px solid #ccc;
	transition: all 0.5s;
}
.categoryList p.tmb img:hover{
	border: 1px solid #ccc;
	transform: scale(1.3,1.3);
	z-index: 999;
}

/* カテゴリ */
/*==============================*/
.categoryList dl.cateTitle dd.category{
	display: inline-block;
	padding: 0 16px;
	margin-top: 16px;
	margin-bottom: 8px;
	border-radius: 16px;
	line-height: 16px;
	font-size: 12px;
	color: #fff;
}

/* タイトル */
/*==============================*/
.categoryList dl.cateTitle dt.title{
	font-size: 20px;
	margin-bottom: 8px;
}

/* 説明文 */
/*==============================*/
.categoryList dl.cateTitle dd.text{
	font-size: 12px;
	line-height: 20px;
	margin-bottom: 24px;
}

/* 詳細情報 */
/*==============================*/
.categoryList dl.cateData{ margin-bottom: 24px; }
.categoryList dl.cateData dt{
	float: left;
	width: 90px;
	font-size: 12px;
	line-height: 16px;
}
.categoryList dl.cateData dd{
	margin-left: 90px;
	font-size: 12px;
	line-height: 16px;
}
.categoryList dl.cateData dd:before{ content: "："; }

/* ボタン */
/*==============================*/
.categoryList p.cateBtn a{
	display: inline-block;
	min-width: 200px;
	font-size: 13px;
	border-radius: 16px;
	text-align: center;
	background: #257E9E;
	color: #fff;
}
.categoryList p.cateBtn a:hover{ opacity: 0.8; }


/*==============================*/
/* タイトルブロック */
/*==============================*/
.titleBlock{ overflow: hidden; margin-bottom: 32px; }
.titleBlock .cateTitle,
.titleBlock .cateData,
.titleBlock .cateBtn,
.titleBlock .loadBtn{ margin-left: 344px; }
.titleBlock p.tmb{ float: left;	width: 320px; }
.titleBlock p.tmb img{ border: 1px solid #ccc; }

/* カテゴリ */
/*==============================*/
.titleBlock dl.cateTitle dd.category{
	display: inline-block;
	padding: 0 16px;
	margin: 48px 0 8px 0;
	border-radius: 16px;
	line-height: 16px;
	font-size: 12px;
	color: #fff;
}

/* タイトル */
/*==============================*/
.titleBlock dl.cateTitle dt.title{ font-size: 22px;	margin-bottom: 16px; }

/* 説明文 */
/*==============================*/
.titleBlock dl.cateTitle dd.text{
	font-size: 13px;
	line-height: 24px;
	margin-bottom: 24px;
}

/* 詳細情報 */
/*==============================*/
.titleBlock dl.cateData{ margin-bottom: 24px; }
.titleBlock dl.cateData *{ font-size: 13px; line-height: 20px; }
.titleBlock dl.cateData dt{ float: left; width: 90px; }
.titleBlock dl.cateData dd{	margin-left: 90px; }
.titleBlock dl.cateData dd:before{ content: "："; }

/* ダウンロード・プレビュー */
/*==============================*/
.loadBtn{
	display: flex; display: -webkit-flex; display:-ms-flexbox;
    flex-wrap: wrap; -webkit-flex-wrap: wrap;  -ms-flex-wrap: wrap;
}
.loadBtn li{ margin-right: 16px; }
.loadBtn li a{
	display: block;
	min-width: 200px;
	padding: 4px 0;
	border-radius: 16px;
	text-align: center;
	color: #fff;
}
.loadBtn li a:hover{ opacity: 0.8; }
.loadBtn li.download a{ background: #257E9E; }
.loadBtn li.preview a{ background: #e29726; }

/*==============================*/
/* ブログ ブロック */
/*==============================*/
div.blogWrap{
	display: flex; display: -webkit-flex; display:-ms-flexbox;
    flex-wrap: wrap; -webkit-flex-wrap: wrap;  -ms-flex-wrap: wrap;
	border-top: 1px solid #ccc;
	padding-top: 40px;
}
div.blogWrap div.blog{
	width: calc( 100% - 340px );
}
div.blogWrap div.banner{
	width: 300px;
	margin-left: 40px;
}
div.blogWrap div.banner ul li{
	margin-bottom: 24px;
}

/*==============================*/
/* ブログ */
/*==============================*/

/* 目次 */
/*==============================*/
div.blogList{
	background: url("/common/img/share/bg_church.png") repeat;
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 32px;
}
div.blogList h3{
	position: relative;
	font-size: 20px;
	margin-bottom: 16px;
}
div.blogList h3:before{
	position: absolute;
	top: 16px;
	left: 56px;
	content: "";
	display: block;
	width: calc( 100% - 56px );
	height: 1px;
	background: #c6cfd3;
}
div.blogList dl{ margin: 0 0 16px 16px; }
div.blogList dl:last-child{	margin: 0 0 0 16px; }
div.blogList dl dd{	margin-left: 16px; }
div.blogList dl dd ul li:before{ content: "・"; }

/* 大見出し */
/*==============================*/
div.blog h3.blogTitle{
	position: relative;
	font-size: 24px;
	margin-bottom: 16px;
	padding-top: 24px;
}
div.blog h3.blogTitle:before,
div.blog h3.blogTitle:after{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
}
div.blog h3.blogTitle:before{
	width: 80px;
	height: 4px;
	background: #80b9cc;
}
div.blog h3.blogTitle:after{
	width: 40px;
	height: 4px;
	background: #009DC5;
}
div.blog p{
	margin-bottom: 16px;
	line-height: 2em;
}

/* 中見出し  */
/*==============================*/
div.blog h4.blogSubTitle{
	font-size: 20px;
	color: #009DC5;
	margin-bottom: 16px;
	padding-top: 24px;
	border-top: 1px solid #ccc;
}
div.blog h4.blogSubTitle:before{
	position: relative;
	top: -4px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 24px;
	content: "\f303";
	color: #009DC5;
	margin-right: 8px;
}

/* リスト */
/*==============================*/
ul.blogUL{
	border: 1px solid #009DC5;
	border-radius: 8px;
	padding: 16px 24px;
	margin-bottom: 32px;
}
ul.blogUL li{ position: relative; padding-left: 16px; }
ul.blogUL li:before{
	position: absolute;
	top: -1px;
	left: 0;
	content: "・";
}

/* あわせてチェック */
/*==============================*/
dl.pickup{
	position: relative;
	border: 1px solid #009DC5;
	border-radius: 8px;
	padding: 24px 24px 16px 160px;
	margin-bottom: 32px;
}
dl.pickup dt.title{
	font-size: 18px;
	margin-bottom: 8px;
}
dl.pickup:after{
	position: absolute;	top: -8px; left: -8px;
	content: "あわせてチェック";
	width: 160px;
	text-align: center;
	background: #009DC5;
	color: #fff;
	line-height: 16px;
	border-radius: 8px;
	transform: rotate(-5deg);
}
dl.pickup dd.tmb{
	overflow: hidden;
	position: absolute;
	top: 24px;
	left: 24px;
	width: 120px;
	height: 96px;
}
dl.pickup dd.text{
	font-size: 14px;
	line-height: 1.4em;
}

/* あわせてチェック */
/*==============================*/
table.blogTable{
	border-collapse: separate;
	border-spacing: 5px;
	width: 100%;
	margin-bottom: 40px;
}
table.blogTable th,table td{
	text-align: center;
	padding: 4px 0;
	font-size: 14px;
}
table.blogTable th{
	background: #009DC5;
	color: #fff;
}
table.blogTable td{
	background: #E2EEF1;
}

/* あわせてチェック */
/*==============================*/
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{
	width: calc(50% - 24px);
	position: relative;
	border: 1px solid #009DC5;
}
div.nextPrev div.prev{
	position: relative;
	padding: 16px 24px 16px 148px;
	border-left: 16px solid #009DC5;
}
div.nextPrev div.next{
	position: relative;
	padding: 16px 24px 16px 144px;
	border-right: 16px solid #009DC5;
}
div.nextPrev div.prev a,
div.nextPrev div.next a{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	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;
	-webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}
div.nextPrev div.next:after{
	right: -12px;
	-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
div.nextPrev dt.title{
	font-size: 18px;
	margin-bottom: 8px;
}
div.nextPrev dd.tmb{
	overflow: hidden;
	position: absolute;
	top: 16px;
	left: 16px;
	width: 120px;
	height: 96px;
	border: 1px solid #ccc;
}
div.nextPrev dd.text{
	font-size: 14px;
	line-height: 1.4em;
}