@charset "utf-8";


/* ▼PC▼ */

/* -- INDEX ------------------------- */
#pagewrap{
	background-color: #fff;
}

/* -- #body ------------------------- */
#body{
	position: relative;
	background-color: #FAFAFA;
}
/* -- #head ------------------------- */
#head{
	background-image: url(../private/head.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 14px;
	border-bottom: solid 1px #ccc;
}
#head h1{
	text-align: center;
}
#head h1 img{
	height: 100px;
}

/* -- #intro ------------------------- */
#pagewrap #intro{
	font-size: 16px;
	line-height: 1.6;
	background-color: rgba(255, 255, 255, 0.7);
	width: 900px;
	margin: 0 auto;
	padding: 0 14px;
}
#pagewrap #intro b{
	font-size: 24px;
}

/* -- .breadcrumb ------------------------- */
#pagewrap .breadcrumb{
	background-color: #333;
	padding: 14px 14px;
}
#pagewrap .breadcrumb ul{
	max-width: 1040px;
	margin: 0 auto;
}
#pagewrap .breadcrumb li{
	display: inline-block;
	padding: 3px 7px 3px 0;
	color: #fff;
}
#pagewrap .breadcrumb li::after{
	content: ">";
	display: inline-block;
	padding: 0 0 0 7px;
	color: #fff;
}
#pagewrap .breadcrumb li:last-child::after{
	display: none;
}
#pagewrap .breadcrumb li a{
	text-decoration: underline;
	color: #fff;
	font-size: 16px;
}

/* -- #content ------------------------- */

#content {
	max-width: 1060px;
	background-color: #fff;
	margin: 0 auto;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	padding: 0;
	z-index: 10;
	position: relative;
}
#content > .colm-left {
	flex: 1;
	padding:12px;
	box-sizing: border-box;
}
#content > .colm-right {
	width:300px;
	padding:12px;
	box-sizing: border-box;
}

/* -- #top-pickup ------------------------- */
#top-pickup{
	padding: 0 0 28px 0;
	width: 100%;
}
#top-pickup > ul{
	max-width: 1060px;
	margin: 0 auto;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	padding: 7px 0 0 0;
	z-index: 10;
	position: relative;
}
#top-pickup > ul > li{
	width: 50%;
	box-sizing: border-box;
}
#top-pickup > ul > li a{
	display: block;
	height: 100%;
	background-color: #fff;
}
#top-pickup > ul > li dl{
}
#top-pickup > ul > li dt {
	position: relative;
	padding: 56.25% 0 0 0;
	overflow: hidden;
}
#top-pickup > ul > li dt img{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
#top-pickup > ul > li dd.date{
	padding: 7px 12px 12px 12px;
	font-size: 12px;
	color: #666;
}
#top-pickup > ul > li dd.title{
	padding: 12px 12px;
	font-size: 20px;
	color: #000;
	line-height: 1.4em;
}
#top-pickup > ul > li dd.blog{
	color: #0080FF;
	padding: 0 12px;
}

/* -- #list-new ------------------------- */
#list-new{
	padding: 0 0 28px 0;
	position: relative;
}
#list-new h2{
	padding: 0;
	background-color: #fa5e71;
}
#list-new h2 span{
	background-color: #fff;
	color: #fa5e71;
	font-size: 20px;
	padding: 0 14px 0 0;
	display: inline-block;
}

#list-new > ul{
}
#list-new > ul > li{
	padding: 7px 0;
	box-sizing: border-box;
}
#list-new > ul > li a{
	display: block;
	height: 100%;
	background-color: #fff;
	border: solid 1px #ddd;
}
#list-new > ul > li dl::after{ content: ""; display: block; clear: both;}
#list-new > ul > li dt{
	width: 200px;
	height: 200px;
	float: left;
	position: relative;
	overflow: hidden;
}
#list-new > ul > li dt img{
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#list-new > ul > li dd.date{
	padding: 7px 14px 0 214px;
	font-size: 12px;
	color: #666;
}
#list-new > ul > li dd.title{
	padding: 14px 14px 7px 214px;
	font-size: 26px;
	color: #000;
	line-height: 1.4em;
}
#list-new > ul > li dd.blog{
	color: #0080FF;
	padding: 7px 14px 7px 214px;
}

/* -- #blogs ------------------------- */
#blogs{
	max-width: 1060px;
	margin: 0 auto;
	padding: 28px 0;
}
#blogs h2{
	padding: 0;
	background-color: #82D700;
}
#blogs h2 span{
	background-color: #fff;
	color: #82D700;
	font-size: 20px;
	padding: 0 14px 0 0;
	display: inline-block;
}

#blogs > ul{
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	padding: 14px 0px;
}
#blogs > ul > li{
	width: 100%;
	padding: 5px 0;
	box-sizing: border-box;
}
#blogs > ul > li a{
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	background-color: #FeFeFe;
}
#blogs > ul > li .thumb {
	width: 40%;
}
#blogs > ul > li .thumb img{
	width: 100%;
}
#blogs > ul > li .title{
	flex: 1;
	padding: 7px 14px;
	font-size: 14px;
	color: #000;
	line-height: 1.4em;
}

/* -- #progpage ------------------------- */
#progpage{
	max-width: 1060px;
	margin: 0 auto;
	padding: 28px 0;
}
#progpage h2{
	padding: 0;
	background-color: #82D700;
}
#progpage h2 span{
	background-color: #fff;
	color: #82D700;
	font-size: 20px;
	padding: 0 14px 0 0;
	display: inline-block;
}

#progpage > ul{
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	padding: 14px 0px;
}
#progpage > ul > li{
	width: 100%;
	padding: 5px 0;
	box-sizing: border-box;
}
#progpage > ul > li a{
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	background-color: #FeFeFe;
}
#progpage > ul > li .thumb {
	width: 40%;
}
#progpage > ul > li .thumb img{
	width: 100%;
}
#progpage > ul > li .title{
	flex: 1;
	padding: 7px 14px;
	font-size: 14px;
	color: #000;
	line-height: 1.4em;
}

/* -- #list-month ------------------------- */
#list-month{
	padding: 28px 0;
}
#list-month h2{
	text-align: center;
	padding: 0;
	background-color: #82D700;
}
#list-month h2 span{
	background-color: #fff;
	color: #000;
	font-size: 28px;
	padding: 0 14px 0 0;
	display: inline-block;
}
#list-month > ul{
	padding: 14px 0 0 0;
}
#list-month > ul > li{
	padding: 7px 0;
	box-sizing: border-box;
}
#list-month > ul > li a{
	display: block;
	height: 100%;
	background-color: #fff;
	border: solid 1px #ddd;
}
#list-month > ul > li dl::after{ content: ""; display: block; clear: both;}
#list-month > ul > li dt{
	width: 200px;
	height: 200px;
	float: left;
	position: relative;
	overflow: hidden;
}
#list-month > ul > li dt img{
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#list-month > ul > li dd.date{
	padding: 7px 14px 0 214px;
	font-size: 12px;
	color: #666;
}
#list-month > ul > li dd.title{
	padding: 14px 14px 7px 214px;
	font-size: 26px;
	color: #000;
	line-height: 1.4em;
}
#list-month > ul > li dd.blog{
	color: #0080FF;
	padding: 7px 14px 7px 214px;
}


/* -- #article ------------------------- */
#article{
	background-color: #fff;
	padding: 0 28px;
}
#article .page-back{
	padding: 14px 0;
	font-size: 12px;
}
#article .date{
	padding: 14px 0;
	font-size: 12px;
	color: #666;
	text-align: right;
}
#article > h2{
	font-size: 36px;
	font-weight: bold;
	padding: 0 0 28px;
	line-height: 1.4em;
}
#article > h3{
	font-size: 16px;
	font-weight: bold;
	padding: 0 0 7px;
	line-height: 1.4em;
}
#article .img{
	text-align: center;
	padding: 0 0 28px ;
}
#article .img img{
	width: 100%;
	max-width: 760px;
}
#article .text p{
	font-size:16px;
	padding:1.5em 0;
	line-height:2.6em;
}
#article .text p strong{
	font-size:22px;
	font-weight: bold;
}
#article .text p img{
	width: 100%;
	max-width: 480px;
	height: auto;
	margin: 0 auto;
	display: inherit;
}
#article .summary{
	padding: 0 14px 42px 14px;
	margin: 0 auto;
}
#article .summary dl{
	border: solid 4px #CCCCCC;
	padding: 14px;
}
#article .summary dl dt{
	padding: 0 0 7px;
	font-size:18px;
	font-weight: bold;
	line-height: 1.4em;
}
#article .summary dl dd{
	font-size: 14px;
	line-height: 1.5em;
}
#ads{
	padding:20px 0;
	max-width: 736px;
}


/* -- #archive-calendar ------------------------- */
#archive-calendar{
	background-color: #fff;
	padding: 28px 0;
}
#archive-calendar h2{
	font-size: 20px;
	text-align: center;
	padding: 0 0 14px;
}
#archive-calendar > ul{
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	padding: 0 7px;
}
#archive-calendar > ul > li{
	width: 25%;
	padding: 14px 7px;
	box-sizing: border-box;
}
#archive-calendar > ul > li >dl{
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	background-color: #fff;
	padding: 14px;
	border: solid 1px #40c9ff;
}
#archive-calendar > ul > li >dl > dt{
	width: 100%;
	padding: 0 0 7px 0;
	font-size: 14px;
	font-weight: bold;
}
#archive-calendar > ul > li >dl > dd{
	width: 33.33%;
	padding: 3px;
	box-sizing: border-box;
}
#pagewrap #archive-calendar > ul > li >dl > dd a{
	display: block;
	text-align: center;
	background-color: #00A9EB;
	color: #fff;
	padding: 4px 0;
}
#pagewrap #archive-calendar > ul > li >dl > dd a:hover{
	background-color: #40c9ff;
}

/* -- .sns-links ------------------------- */
.sns-links{
	background-color: #fff;
	padding: 14px;
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}
.sns-links ul{
	text-align: center;
}
.sns-links ul li{
	display: inline-block;
	padding: 0 7px;
}
.sns-links ul .li{
	display: none;
}
.sns-links ul li img{
	width: 36px;
}

/* -- .goto-prog ------------------------- */
#pagewrap .goto-prog{
	padding: 28px 0;
	text-align: center;
}
#pagewrap .goto-prog a{
	display: inline-block;
	font-size: 16px;
	background-color: #00A2FF;
	padding: 4px 21px;
	color: #fff;
}


/* -- #backno-top ------------------------- */
#backno-top{
	padding: 28px 0;
}
#backno-top h2{
    font-size: 20px;
    text-align: center;
    padding: 0 0 14px;
}
#backno-top h2 span{
}

#backno-top > ul{
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	padding: 14px 28px;
}
#backno-top > ul > li{
	width: 33.333%;
	padding: 14px 7px;
	box-sizing: border-box;
}
#backno-top > ul > li a{
	display: block;
	background-color: #fff;
	height: 100%;
}
#backno-top > ul > li dl{
	padding: 7px;
}
#backno-top > ul > li dt {
	position: relative;
	padding: 56.25% 0 0 0;
	overflow: hidden;
}
#backno-top > ul > li dt img{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#backno-top > ul > li dd.date{
	padding: 7px 0 0 0;
	font-size: 12px;
	color: #666;
}
#backno-top > ul > li dd.title{
	padding: 7px 0 7px 0;
	font-size: 16px;
	color: #000;
	line-height: 1.4em;
}
/* -- #relation ------------------------- */
#relation{
	padding: 28px 0;
	max-width: 736px;
}
#relation h2{
    font-size: 20px;
    text-align: center;
    padding: 0 0 14px;
}
#relation h2 span{
}

#relation > ul{
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	padding: 14px 28px;
}
#relation > ul > li{
	width: 33.333%;
	padding: 14px 7px;
	box-sizing: border-box;
}
#relation > ul > li a{
	display: block;
	background-color: #fff;
	height: 100%;
}
#relation > ul > li dl{
	padding: 7px;
}
#relation > ul > li dt {
	position: relative;
	padding: 56.25% 0 0 0;
	overflow: hidden;
}
#relation > ul > li dt img{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#relation > ul > li dd.date{
	padding: 7px 0 0 0;
	font-size: 12px;
	color: #666;
}
#relation > ul > li dd.title{
	padding: 7px 0 7px 0;
	font-size: 16px;
	color: #000;
	line-height: 1.4em;
}
/* -- #all-list-new ------------------------- */
#all-list-new{
	padding: 0 0 28px 0;
	position: relative;
}
#all-list-new h2{
	padding: 0;
	background-color: #fa5e71;
}
#all-list-new h2 span{
	background-color: #fff;
	color: #fa5e71;
	font-size: 20px;
	padding: 0 14px 0 0;
	display: inline-block;
}

#all-list-new > ul{
}
#all-list-new > ul > li{
	padding: 7px 0;
	box-sizing: border-box;
}
#all-list-new > ul > li a{
	display: block;
	height: 100%;
	background-color: #fff;
	border: solid 1px #ddd;
}
#all-list-new > ul > li dl::after{ content: ""; display: block; clear: both;}
#all-list-new > ul > li dt{
	width: 80px;
	height: 80px;
	float: left;
	position: relative;
	overflow: hidden;
}
#all-list-new > ul > li dt img{
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#all-list-new > ul > li dd.title{
	padding: 7px 14px 7px 94px;
	font-size: 14px;
	color: #000;
	line-height: 1.6;
}
#all-list-new > ul > li dd.blog{
	color: #0080FF;
	padding: 7px 7px 0px 7px;
	clear: both;
}
#all-list-new > ul > li dd.date{
	padding: 7px 7px 7px 7px;
	font-size: 12px;
	color: #666;
}

#all-list-new .more {
	text-align: center;
	padding: 7px 0 0 0;
}
#all-list-new .more a {
	display: inline-block;
	background-color: #00A2FF;
	padding: 4px 21px;
	color: #fff;
}

/* ▲PC▲ */
/* ------------------------------------------------------------------------------------------------------------ */


/* ▼Smartphone▼ */
@media screen and (max-width: 767px) {

	/* -- INDEX ------------------------- */
	#pagewrap{
		background-image: none;
	}

	/* -- #body ------------------------- */
	#body{
		max-width: 100%;
		margin: 0 auto;
	}
	/* -- #head ------------------------- */
	#head{
	}
	#head .inner{
	}
	#head h1{
		text-align: center;
	}
	#head h1 img{
		height: auto;
		width: 100%;
		max-width: 360px;
	}
	/* -- #intro ------------------------- */
	#pagewrap #intro{
		padding: 14px;
		font-size: 14px;
		width: auto;
	}
	#pagewrap #intro b{
		font-size: 18px;
	}

	/* -- #content ------------------------- */

	#content {
		max-width: 1060px;
		background-color: #fff;
		margin: 0 auto;
		display: block;
		padding: 0;
		z-index: 10;
		position: relative;
	}
	#content > .colm-left {
		padding:14px 21px;
		box-sizing: border-box;
	}
	#content > .colm-right {
		width:auto;
		padding:12px;
		box-sizing: border-box;
	}

	/* -- #top-pickup ------------------------- */
	#top-pickup > ul {
		padding: 0 24px;
	}
	#top-pickup > ul > li{
		width: 100%;
		padding:12px 0;
	}

	/* -- #list-new ------------------------- */
	#list-new{
	}
	#list-new > ul > li{
		border-bottom: solid 1px #ddd;
	}
	#list-new > ul > li a{
		display: block;
		border: none;
	}

	#list-new > ul > li dt{
		width: 120px;
		height: 120px;
		float: left;
		position: relative;
		overflow: hidden;
	}

	#list-new > ul > li dd.date{
		padding: 7px 14px 0 134px;
		font-size: 12px;
		color: #666;
	}
	#list-new > ul > li dd.title{
		padding: 7px 14px 7px 134px;
		font-size: 16px;
		color: #000;
	}
	#list-new > ul > li dd.blog{
		color: #0080FF;
		padding: 7px 14px 0px 134px;
	}

	/* -- #list-month ------------------------- */
	#list-month > ul{
		padding: 14px 7px;
	}
	#list-month > ul > li{
		padding: 14px 7px;
		box-sizing: border-box;
	}
	#list-month > ul > li a{
		display: block;
	}
	#list-month > ul > li dl{
	}
	#list-month > ul > li dl:after{ content: ""; display: block; clear: both;}
	#list-month > ul > li dt {
			width: 120px;
		height: 120px;
		float: left;
		position: relative;
		overflow: hidden;
}

	#list-month > ul > li dt img{
	}
	#list-month > ul > li dd.date{
		padding: 7px 14px 0 134px;
		font-size: 12px;
		color: #666;
	}
	#list-month > ul > li dd.title{
		padding: 7px 14px 0 134px;
		font-size: 16px;
		color: #000;
		line-height: 1.4em;
	}

	/* -- #archive-calendar ------------------------- */
	#archive-calendar{
	}
	#archive-calendar h2{
	}
	#archive-calendar > ul{
		display: flex;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
		flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		padding: 0 7px;
	}
	#archive-calendar > ul > li{
		width: 100%;
		padding: 14px 7px;
		box-sizing: border-box;
	}
	#archive-calendar > ul > li >dl{
		display: flex;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
		flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		background-color: #fff;
		padding: 14px;
		border: solid 1px #40c9ff;
	}
	#archive-calendar > ul > li >dl > dt{
		width: 100%;
		padding: 0 0 7px 0;
		font-size: 14px;
		font-weight: bold;
	}
	#archive-calendar > ul > li >dl > dd{
		width: 25%;
		padding: 10px;
		box-sizing: border-box;
	}
	#pagewrap #archive-calendar > ul > li >dl > dd a{
		display: block;
		text-align: center;
		background-color: #00A9EB;
		color: #fff;
		padding: 7px 0;
	}
	#pagewrap #archive-calendar > ul > li >dl > dd a:hover{
		background-color: #40c9ff;
	}
	/* -- .sns-links ------------------------- */
	.sns-links ul li.li{
		display: inline-block;
	}
	#article {
		padding: 7px;
	}
	#article > h2{
		font-size: 24px;
	}
	#article > h3{
		font-size: 14px;
	}
	#article .summary dl dt{
		font-size:14px;
	}
	#article .text p{
		font-size:14px;
	}
	#article .text p strong{
		font-size:20px;
	}

	/* -- #backno-top ------------------------- */
	#backno-top{
	}
	#backno-top > ul{
		display: flex;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
		flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		padding: 0 7px;
	}
	#backno-top > ul > li{
		width: 50%;
	}
	#backno-top > ul > li a{
		display: block;
	}
	#backno-top > ul > li dl{
	}
	#backno-top > ul > li dt img{
		width: 100%;
	}
	#backno-top > ul > li dd.date{
		padding: 7px 0 0 0;
		font-size: 12px;
		color: #666;
	}
	#backno-top > ul > li dd.title{
		padding: 7px 0 7px 0;
		font-size: 14px;
		color: #000;
	}

	/* -- #relation ------------------------- */
	#relation{
	}
	#relation > ul{
		display: flex;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
		flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		padding: 0 7px;
	}
	#relation > ul > li{
		width: 50%;
	}
	#relation > ul > li a{
		display: block;
	}
	#relation > ul > li dl{
	}
	#relation > ul > li dt img{
		width: 100%;
	}
	#relation > ul > li dd.date{
		padding: 7px 0 0 0;
		font-size: 12px;
		color: #666;
	}
	#relation > ul > li dd.title{
		padding: 7px 0 7px 0;
		font-size: 14px;
		color: #000;
	}

	/* -- #all-list-new ------------------------- */
	#all-list-new{
		padding: 0 9px;
	}


	/* -- #blogs ------------------------- */
	#blogs > ul > li{
		width: 100%;
		padding:10px;
	}

	/* -- #progpage ------------------------- */
	#progpage > ul > li{
		width: 100%;
		padding:10px;
	}

/* ------------------------------------------------ */
}
/* ▲Smartphone▲ */