@charset 'UTF-8';

/* ===== ARTICLE CONTENTS ===== */

.clear{
	clear:both;
	overflow:hidden;
}

.article{
	word-break: break-all;
}

.article.inner{
	max-width:800px;
	color:#666;
}

.article h2, .article h3{
	border-bottom:1px solid #eaeaea;
	line-height:1.4;
	font-weight:200;
	letter-spacing:.05em;
	color:#333;
}
.article a{
	color:#d87500;
}
.article a.btn{
	color:#333;
}

.article figure{
	text-align:center;
}
.article figure img{
	margin-bottom:.5em;
}
.article figcaption{
	font-weight:500;
	color:#333;
	line-height:1.3;
}

.article dl{
	letter-spacing:-.4em;
}
.article dt, .article dd{
	display:inline-block;
	letter-spacing:normal;
	vertical-align:top;
}
.article dt{
	width:20%;
}
.article dd{
	width:80%;
}

.article ul{
	list-style:outside square;
	margin-left:1.5em;
}
.article ul.no_style, .article ul.col2, .article ul.col3, .article ul.col4{
	list-style:none;
	margin-left:0;
}

.article ol{
	list-style:outside decimal;
	margin-left:1.5em;
}

.article table{
	width:100%;
}
.article table th, .article table td{
	padding:5px;
	border-top:1px solid #eaeaea;
	text-align:left;
	font-weight:400;
	line-height:1.5;
	min-width:4em;
}
.article table tr:last-child th, .article table tr:last-child td{
	border-bottom:1px solid #eaeaea;
}
.article table .w5{
	width:5em;
}
.article table .w6{
	width:6em;
}
.article table .w7{
	width:7em;
}
.article table .w8{
	width:8em;
}
.article table .w9{
	width:9em;
}
.article table .w10{
	width:10em;
}

.article .sc_x{
	overflow-x: auto;
}

.article .mb0{
	margin-bottom:0 !important;
}
.article .max720{
	max-width:720px;
	margin:auto;
}

.article .left{
	text-align:left;
}
.article .right{
	text-align:right;
}
.article .center{
	text-align:center;
}

.article .mb5{
	margin-bottom:5px;
}
.article .mb10{
	margin-bottom:10px;
}
.article .mb15{
	margin-bottom:15px;
}
.article .mb20{
	margin-bottom:20px;
}
.article .mb25{
	margin-bottom:25px;
}
.article .mb30{
	margin-bottom:30px;
}
.article .mb35{
	margin-bottom:35px;
}
.article .mb40{
	margin-bottom:40px;
}
.article .mb45{
	margin-bottom:45px;
}
.article .mb50{
	margin-bottom:50px;
}


/* head */
.article_head{
	position:relative;
	padding-right:94px;
	border-bottom:1px solid #ddd;
}
.article_head .date{
	display:inline-block;
	margin:0 2em 10px 0;
}
.article_head .tags{
	display:inline-block;
}
.article_head .tag{
	display:inline-block;
	margin:0 1em 10px 0;
	font-weight:500;
	color:#d87500;
}
.article_head .sns{
	position:absolute;
	right:0;
}

/* page title */
.article.page_ttl{
	border-bottom:none;
}

/* headline */
.article .headline{
	border:3px solid #fcc70a;
	text-align:center;
}
.article .headline h2{
	padding:0;
	margin:0;
	border:none;
	letter-spacing:normal;
	color:#333;
}
.article .headline p{
	margin-bottom:0;
	line-height:1.8;
}

/* related_item */
.related_item .inner{
	max-width:1340px;
	padding:10px 0 60px;
}
.related_item .ttl{
	padding-bottom:5px;
	border-bottom:1px solid #eaeaea;
	font-weight:200;
}

@media screen and (min-width: 769px) {
	.article.inner{
		padding:0 0 60px;
	}

	.article{
		line-height:2.1;
	}
	.article h2, .article h3, .article figure, .article dl, .article ul, .article ol, .article table,
	.article .col2, .article .col3, .article .col4{
		margin-bottom:30px;
	}
	.article p{
		margin-bottom:15px;
	}

	.article h2, .article h3{
		padding:20px 0 5px;
	}
	.article h2{
		font-size:2.4rem;
	}
	.article h3{
		font-size:2.0rem;
	}
	.article p{
		line-height:2.1;
	}

	.article .col2, .article .col3, .article .col4{
		letter-spacing:-.4em;
	}
	.article .col2 figure, .article .col3 figure, .article .col4 figure{
		display:inline-block;
		letter-spacing:normal;
		vertical-align:top;
		margin:0 2% 2% 0;
	}
	.article .col2 figure{
		width:49%;
	}
	.article .col3 figure{
		width:32%;
	}
	.article .col4 figure{
		width:23.5%;
	}
	.article .col2 figure:nth-child(2n),
	.article .col3 figure:nth-child(3n),
	.article .col4 figure:nth-child(4n){
		margin-right:0;
	}

	.article .col2 li figure, .article .col3 li figure, .article .col4 li figure{
		display:block;
		width:100%;
		margin:0 0 10px;
	}

	.article .img_r, .article .img_l{
		max-width:50%;
	}
	.article .img_r.w30, .article .img_l.w30{
		max-width:30%;
	}
	.article .img_r{
		float:right;
		margin-left:25px;
	}
	.article .img_l{
		float:left;
		margin-right:25px;
	}

	
	/* head */
	.article_head{
		min-height:60px;
		padding-top:25px;
	}
	.article_head .tag{
		font-size:1.4rem;
		line-height:1.6rem;
	}
	.article_head .sns{
		top:13px;
	}

	/* page title */
	.article.page_ttl{
		padding-top:50px;
	}

	/* headline */
	.article .headline{
		margin-bottom:50px;
		padding:40px 20px;
		font-size:1.8rem
	}
	.article .headline h2{
		font-size:2.8rem
	}
	.article .headline .small{
		font-size:1.6rem
	}

	/* related_item */
	.related_item .ttl{
		margin-bottom:40px;
		font-size:2.6rem;
	}
}
@media screen and (max-width: 768px) {
	.article.inner{
		padding:0 0 30px;
	}

	.article{
		line-height:1.8;
	}
	.article h2, .article h3, .article p, .article figure, .article dl, .article ul, .article ol, .article table,
	.article .col2, .article .col3, .article .col4{
		margin-bottom:20px;
	}

	.article h2, .article h3{
		border-width:1px;
		padding:20px 0 5px;
		font-size:2.1rem;
	}

	.article .img_r, .article .img_l{
		display:block;
		margin:0 auto 20px;
	}
	
	/* head */
	.article_head{
		min-height:44px;
	}
	.article_head .ttl{
		border-width:1px;
		font-size:2.1rem;
		line-height:1.2;
		text-align:center;
	}
	.article_head .tag{
		font-size:1.2rem;
	}
	.article_head .sns{
		top:0;
	}

	/* page title */
	.article.page_ttl{
		padding-top:30px;
	}

	/* headline */
	.article .headline{
		padding:20px 20px;
		margin-bottom:30px;
		font-size:1.4rem
	}
	.article .headline h2{
		font-size:1.4rem
	}
	.article .headline .small{
		font-size:1.2rem
	}	

	/* related_item */
	.related_item .ttl{
		margin-bottom:30px;
		font-size:2.1rem;
	}
}
@media screen and (max-width: 414px) {

