@charset "utf-8";

article{padding: 60px 0 20px;}


.article_contents-normal{padding:0 30px;}

.article_contents-normal > *{margin: auto;max-width:1200px;}


.article_header_area{padding-bottom:40px;}

.article_time{
	display:flex;flex-wrap:wrap;
	padding-bottom:8px;
}
.article_time svg{width:15px;margin:auto 0;}
.article_time svg path{fill:#555;}
.article_time time{display:block;margin:auto 0;line-height:1.2em;padding:.1em 0 0 .2em;color:#555;}

.article_header_h1 h1{
	position:relative;
	text-align:left;
	font-family: "M PLUS 1p", sans-serif;
	font-size:38px;
	font-weight:800;
	line-height:1.2em;
	padding:8px 0 20px 42px;
}

.article_header_h1 h1::before{
	content:"";
	display: block;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:4px;
	background:linear-gradient(to right,#ee1f4c 15%,#aaa 15%);
}
.article_header_h1 h1::after{
	content:"";
	display: block;
	position:absolute;
	left:0;
	bottom:0;
	width:16px;
	height:100%;
	background-color:#ee1f4c;
}



.article_text_box{
	padding-bottom:50px;
}

article h2{
	position:relative;
	font-family: "M PLUS 1p", sans-serif;
	text-align:left;
	line-height:1.2em;
	font-size:23px;
	font-weight:700;
	padding-left:15px;
	margin-bottom:20px;
}
article h2 .small_r{line-height:1em;}

article h2::before{
	content:"";
	display: block;
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	width:8px;
	height:100%;
	background-color:#ee1f4c;
}


.article_text_box p{
	padding-bottom:8px;
	letter-spacing:0.05em;
}
.article_text_box::after{
	content:"";
	display: block;
	clear: both;
}

.article_floatimg{max-width:560px;}
.article_floatimg.right{float:right;padding:0 0 10px 30px;}
.article_floatimg.left{float:left;padding:0 30px 10px 0;}

.article_author{
	text-align:left;
	color:#555;
}





@media screen and (max-width: 1100px) {
	.article_floatimg{max-width:360px;}
}


@media screen and (max-width: 767px) {
	article {padding: 30px 0 0;}
	.article_header_h1 h1{font-size:30px;}
	
	.article_floatimg{
		max-width:600px;
		margin: auto;
	}
	.article_floatimg.right,
	.article_floatimg.left{float:none;padding:0 0 30px;}
}

@media screen and (max-width:580px) {
	.article_header_area {padding-bottom: 25px;}
	.article_header_h1 h1{font-size:24px;padding: 6px 0 14px 23px;}
	.article_header_h1 h1::after{width: 10px;}
	article h2{font-size:20px;}
}


@media screen and (max-width: 520px) {
	
	.article_contents-normal{padding:0 5vw;}
	.article_time time{font-size:14px;}
	.article_header_h1 h1 {font-size:20px;padding: 6px 0 13px 5vw;}
	article h2 {font-size: 16px;}
	.article_text_box {padding-bottom: 35px;}
	.article_text_box p{font-size:15px;}
	#article .note_area{padding: 10px 5vw 50px;}
	
}