@charset "utf-8";
/*-------------------------------------------
	C1
-------------------------------------------*/
.blog_top{
	position:relative;
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin:0 0 35px;
}
.select_box{
	position:relative;
}
.select_box::after{
	position:absolute;
    content:"";
    width:0;
    height:0;
	border-style:solid;
	border-width:6px 4px 0 4px;
    border-color:#333 transparent transparent transparent;
	top:calc(50% - 3px);
	right:20px;
}
.year_select,.cate_select{
	display:block;
    width:180px;
	font-size:1.5rem;
	padding:10px 15px 9px;
	background:transparent;
	border:1px solid #ccc;
	border-radius:0 !important;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
	cursor:pointer;
}
.blog_tab{
	display:flex;
	padding:0;
	margin:0;
}
.blog_tab li{
	margin:0 25px 0 0 !important;
	list-style:none;
}
.blog_tab li:last-child{margin-right:0;}
.blog_tab a{
	position:relative;
	display:inline-block;
	font-size:1.5rem;
	letter-spacing:1.5px;
	line-height:2.2rem;
	font-weight:500;
	text-decoration:none;
	padding-bottom:5px;
	transition:color .3s;
}
.blog_tab a::after{
	position:absolute;
	content:'';
	width:0;
	height:1px;
	background:var(--color-blue);
	bottom:0;
	left:0;
	transition:width .3s;
}
.blog_tab a:hover,.blog_tab .active a{color:var(--color-blue);}
.blog_tab a:hover::after,.blog_tab .active a::after{width:100%;}
.blog_list{
	padding:0;
	margin:0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 40px 20px;
}
.blog_item{
	margin:0 !important;
	list-style:none;
}
.blog_item:last-child{margin-bottom:0;}
.blog_link{
	color:#333;
	text-decoration:none;
}
.blog_thum {
	margin-bottom: 16px;
}
.blog_date{
	display:inline-block;
	width:113px;
	font-size:1.2rem;
	letter-spacing:1.2px;
	line-height:1.8rem;
}
.blog_cate{
	display:inline-block;
	width:90px;
	font-size:1.1rem;
	letter-spacing:1.1px;
	line-height:1.7rem;
	text-align:center;
	border:1px solid #ccc !important;
	padding:0 0 1px;
	margin:0 32px 0 0;
}
.blog_title{
	position:relative;
	font-size: 1.6rem;
	letter-spacing: 1.4px;
	line-height: 2.6rem;
	padding-top: 7px;
	margin: 0;
	transition:color .3s;
}
.blog_title span{
	display:inline;
	padding-bottom:.15em;
	background:linear-gradient(var(--color-blue), var(--color-blue)) 0 100%/0 1px no-repeat;
	transition:background .3s;
}
.blog_title span::after{
    content: '';
    display: inline-block;
    width: 5px;
    height: 15px;
    margin-left: 6px;
    vertical-align: middle;
    background: url(/img/common/arrow_r_black.svg) no-repeat top left;
    transition: opacity .3s;
}
a:hover .blog_title { color: var(--color-blue); }
a:hover .blog_title span { background-size: 100% 1px; }
a:hover .blog_title span::after {
    background-image: url(/img/common/arrow_r_blue.svg);
}
/*-------------------------------------------
	C2
-------------------------------------------*/
.blog_post .page_title{
	max-width:940px;
}
.blog_post .content_area{
	max-width:940px;
}
.blog_post img+img{margin-top:20px;}
.blog_info{
	display:flex;
	align-items:center;
	margin-bottom:23px;
}
.blog_thum_img{
	width: 100%;
}
.related_blog{
	width:calc(100% - 20px);
	margin:0 auto;
	border-top:1px solid #ccc;
}
.related_blog_box{
	max-width:920px;
	padding:38px 10px 80px;
	margin:0 auto;
}
.related_blog_h2{
	padding:0;
	margin:0 0 28px;
	border:none;
}
.parent_return{
	margin:40px auto 0;
}
.share_box {
    margin: 42px auto;
    padding: 38px 0;
    background: #F5F5F5;
}
.share_head {
	font-size: 2.2rem;
	letter-spacing: 2.2px;
	padding-top: 0;
	margin: 0 auto 33px;
	border-top: none;
	text-align: center;
}
.share_list {
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 66px;
	max-width: 310px;
	margin: auto;
}
.share_item {
	list-style: none;
}
.share_item a {
	text-decoration: none;
	padding: 0;
	text-align: center;
	display: block;
}
.share_link img {
	margin: 0 auto 13px;
}

@media screen and (min-width:768px) and (max-width:1024px){
.blog_tab a{
	font-size:1.4rem;
	letter-spacing:1.4px;
}
.blog_tab li{
	margin:0 25px 0 0 !important;
}
.blog_link{
	flex-wrap:wrap;
}
.blog_date{
	width:112px;
}
.blog_cate{
	margin:0 22px 0 0;
}
}

@media screen and (min-width:768px) and (max-width:950px){
.blog_link{
	flex-wrap:wrap;
	padding:18px 0;
}
.blog_title{
	width:100%;
	overflow:unset;
}
}
@media screen and (max-width:767px){
.blog_top{
	display:block;
	margin:0 0 25px;
}
#blog_top_cate{
	margin-top:-5px;
}
.select_area{
	display:flex !important;
	align-items:center !important;
}
.select_head{
	width:77px;
}
.select_box{
	width:calc(100% - 77px);
}
.year_select, .cate_select{
	width:125%;
	font-size:1.6rem;
	padding:12px 15px 13px;
	transform:scale(0.8);
	transform-origin:left;
}
.select_box::after{
	top:calc(50% - 3px);
	right:16px;
}
.blog_list{
	grid-template-columns: 1fr;
	grid-gap: 30px;
}
.blog_item{
	margin-bottom:0;
}
.blog_link{
	flex-wrap:wrap;
	padding:16px 0;
}
.blog_cate{
	font-size:1rem;
	letter-spacing:1px;
	line-height:1.6rem;
	padding:0;
	margin-right:0;
}
.blog_date{
	width:105px;
	font-size:1.1rem;
	letter-spacing:1.1px;
	line-height:1.7rem;
}
.blog_title{
	width:100%;
	font-size:1.3rem;
	letter-spacing:1.3px;
	line-height:2.3rem;
	overflow:unset;
}
.blog_info{
	margin-bottom:18px;
}
.related_blog_box{
	padding:32px 10px 80px;
}
.related_blog_h2{
	margin:0 0 18px;
}
.parent_return{
	margin:35px auto 0;
}
.blog_thum_img{
	display: none;
}
.share_box {
	padding: 33px 0;
}
.share_head {
	font-size: 2rem;
	margin: 0 auto 30px;
}
.share_list {
	grid-gap: 40px;
	max-width: 224px;
}
.share_item {
	list-style: none;
}
.share_item a {
	text-decoration: none;
	padding: 0;
	text-align: center;
	display: block;
}
.share_link img {
	margin: 0 auto 8px;
	width: 40px;
}
}