@charset "utf-8";
/*
機　　能　　名：スタッフブログ
作　　成　　日：2020/04/30
作　　成　　者：52WEB WORKS. 関本
更　　新　　日：

/* ***************************************
	blog
**************************************** */

div#blog {
}

/* h_ttl */
#blog .h_ttl p {
color:#FFF;
text-align:left;
line-height:1.4;
}

/* main_contents */
div#main_contents {
border-bottom:2px solid #8AC4E0;
}
div#main_contents a {
color:#399DCC;
}
div#main_contents div#blog_main a {
text-decoration:underline;
}
@media screen and (min-width: 769px) {/* PC */
/* h_ttl */
#blog .h_ttl_in {
	background:url(../images/blog/main_img_pc.png) center 0 no-repeat;
}
#blog .h_ttl h2 span {
	display:block;
	width:900px;/* total 980px */
	margin:0 auto;
	text-align:left;
	padding-left:80px;
}
#blog .h_ttl_in2 {
	position:relative;
}
#blog .h_ttl p {
position:absolute;
top:-70px;
right:60px;
font-size:12px;
width:520px;/* total 540px */
}
/* main_contents */
div#main_contents {
padding-bottom:100px;
margin-bottom:100px;
}
div#main_contents div#blog_main a:hover {
text-decoration:none;
}
}
@media screen and (max-width: 768px) {/* SP */
/* h_ttl */
#blog .h_ttl {
	background:url(../images/blog/main_img_sp.png) center 0 no-repeat;
	background-size:100% auto;
	-webkit-background-size:100% auto;
}
#blog .h_ttl_in2 {
	padding:0 5% 5% 5%;
	background:url(../images/common/bg_blue.png) 0 0 repeat;
}
#blog .h_ttl_in2 p {
	font-size:13px;
}
/* main_contents */
div#main_contents {
padding-bottom:60px;
margin-bottom:60px;
}
}

/* ***************************************
	blog_main
**************************************** */
div#blog_main h3.txt {
background:#399DCC;
background:url(../images/common/bg_blue.png) 0 0 repeat;
color:#FFF;
}
div#blog_main h3 {
	position:relative;
line-height:1.2;
}
div#blog_main .section {
border-bottom:1px solid #CCCCCC;
padding-bottom:10px;
}
div#blog_main h4 {
position:relative;
font-size:18px;
margin-bottom:16px;
}
div#blog_main h4:before {
	content:"";
	position:absolute;
}
/* entry_body */
div#main_contents div.blog_list div.entry_body p {
margin:0;
}
div#main_contents div.entry_body img {
display:block;
}
/* entry_more */
div.entry_more {
text-align:right;
}
div#main_contents div#blog_main div.entry_more a {
	color:#FFFFFF;
	text-decoration:none;
	background:#399DCC;
	display:block;
	width:74px;/* total 94px */
	height:20px;
	line-height:20px;
	padding:0 10px;
	font-size:12px;
	border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
	text-align:left;
	position:relative;
	float:right;
}
div#main_contents div#blog_main div.entry_more a:after {
	content:"";
	display:block;
	width:4px;
	height:4px;
	border-top:2px solid #FFF;
	border-right:2px solid #FFF;
	position:absolute;
	top:50%;
	right:10px;
	-webkit-transform:translateY(-50%) rotate(45deg);
	transform:translateY(-50%) rotate(45deg);
}
/* entry_cate */
div.entry_cate {
text-align:right;
color:#999;
}

/* pagenation */
div.pagenation {
text-align:center;
}
div#main_contents div#blog_main div.pagenation a {
	text-decoration:none;
}
div.pagenation a,
div.pagenation span {
border:1px solid #9CCEE5;
display:inline-block;
}
div.pagenation span.current_page {
background:#9CCEE5;
color:#FFFFFF;
}
div.pagenation span.prev,
div.pagenation span.next {
border:none;
padding:0;
margin:0;
}

/* prev_next */
div.prev_next {
margin:0 auto;
}

@media screen and (min-width: 769px) {/* PC */
div#blog_main {
width:700px;
float:left;
}
div#blog_main h3.txt {
font-size:1.6em;
padding:15px;
margin-bottom:40px;
}
div#blog_main h4 {
padding-left:40px;
min-height:24px;
}
div#blog_main h4:before {
	background:url(../images/common/ttl_04_l.png);
	background-size:auto 24px;
	-webkit-background-size:auto 24px;
	top:-3px;
	left:10px;
	width:24px;
	height:24px;
}
/* entry_date */
div#blog_main .entry_date {
	margin-bottom:30px;
}
/* entry_body */
div#main_contents div.entry_body img {
margin:20px auto;
}
div#main_contents div.blog_list div.entry_body img {
float:left;
margin:0 30px 0 0;
}
/* entry_more */
div.entry_more {
margin:20px 0;
}
div.entry_more a:hover {
	opacity:0.6;
	filter:alpha(opacity=60);
}

/* pagenation */
div.pagenation {
margin:20px auto;
}
div.pagenation a,
div.pagenation span {
padding:10px 7px;
margin:0 3px;
}
div.pagenation a:hover {
background:#9CCEE5;
color:#FFFFFF !important;
}

/* prev_next */
div.prev_next {
text-align:center;
}


}
@media screen and (max-width: 768px) {/* SP */
div#blog_main h3.txt {
font-size:1.2em;
padding:8px;
margin-bottom:20px;
}
div#blog_main h4 {
padding-left:25px;
min-height:18px;
}
div#blog_main h4:before {
	background:url(../images/common/ttl_04_l.png);
	background-size:auto 18px;
	-webkit-background-size:auto 18px;
	top:2px;
	left:0;
	width:18px;
	height:18px;
}
/* entry_date */
div#blog_main .entry_date {
	margin-bottom:10px;
}
/* entry_body */
div#main_contents div.entry_body img {
margin:15px auto;
}
div#main_contents div.blog_list div.entry_body img {
float:left;
margin:0 10px 0 0;
width:40%;
}
/* entry_more */
div.entry_more {
margin:10px 0;
}

/* pagenation */
div.pagenation {
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
margin:15px auto;
padding:15px 0;
}
div.pagenation a,
div.pagenation span {
padding:10px 15px;
margin:0 10px;
}

/* prev_next */
div.prev_next {
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	text-align:left;
}
div.prev_next a {
	display:block;
	width:calc(50% - 36px);
	float:left;
	padding:15px 10px;
	line-height:1.2;
	position:relative;
}
div.prev_next a:first-child {
	padding-left:25px;
}
div.prev_next a:last-child {
	border-left:1px solid #CCCCCC;
	padding-right:25px;
}
div.prev_next a:before {
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top:2px solid #CCCCCC;
	border-right:2px solid #CCCCCC;
	position:absolute;
	top:50%;
}
div.prev_next a:first-child:before {
	left:10px;
	-webkit-transform:translateY(-50%) rotate(225deg);
	transform:translateY(-50%) rotate(225deg);
}
div.prev_next a:last-child:before {
	right:10px;
	-webkit-transform:translateY(-50%) rotate(45deg);
	transform:translateY(-50%) rotate(45deg);
}
@media screen and (max-width: 320px) {/* w320 */
}
}

/* ***************************************
	promise
**************************************** */
div#blog_side h3 {
	color:#FFFFFF;
	background:url(../images/common/bg_gray_l.png) 0 0 repeat;
}
div#blog_side li {
line-height:1.2;
position:relative;
}
div#blog_side li:before,
div#blog_side li:after {
	content:"";
	display:block;
	position:absolute;
}
div#blog_side li:before {
	background:#CCC;
	border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;
}
div#blog_side li:after {
	border-top:2px solid #FFF;
	border-right:2px solid #FFF;
	-webkit-transform:translateY(-50%) rotate(45deg);
	transform:translateY(-50%) rotate(45deg);
}
@media screen and (min-width: 769px) {/* PC */
/* blog_side */
div#blog_side {
width:240px;
float:right;
}
div#blog_side h3 {
padding:8px 15px;
margin-bottom:20px;
font-size:18px;
}
div#blog_side ul {
	margin-bottom:40px;
}
div#blog_side li {
margin-bottom:10px;
padding-left:22px;
min-height:16px;
}
div#blog_side li:before {
	width:16px;
	height:16px;
	top:2px;
	left:0px;
}
div#blog_side li:after {
	width:6px;
	height:6px;
	top:10px;
	left:2px;
}
div#blog_side li a:hover {
	text-decoration:underline;
}
}
@media screen and (max-width: 768px) {/* SP */
div#blog_side h3 {
	position:relative;
padding:10px;
margin-bottom:15px;
font-size:16px;
}
div#blog_side h3:after {
	content:"";
	display:block;
	position:absolute;
	width:6px;
	height:6px;
	top:50%;
	right:10px;
	border-top:2px solid #FFF;
	border-right:2px solid #FFF;
	-webkit-transform:translateY(-50%) rotate(135deg);
	transform:translateY(-50%) rotate(135deg);
}
div#blog_side h3.on:after {
	-webkit-transform:translateY(-50%) rotate(-45deg);
	transform:translateY(-50%) rotate(-45deg);
}
div#blog_side ul {
	display:none;
}
div#blog_side li {
margin-bottom:20px;
padding-left:20px;
}
div#blog_side li:last-child {
margin-bottom:37px;
}
div#blog_side li:before {
	width:16px;
	height:16px;
	top:10px;
	left:0px;
	margin-top:-8px;
}
div#blog_side li:after {
	width:6px;
	height:6px;
	top:10px;
	left:2px;
}



@media screen and (max-width: 320px) {/* w320 */
}
}