@charset "UTF-8";
.wrap{max-width: 1200px; margin: 0 auto; padding: 0 15px}


.sub_top_title h2{display:flex;height:160px; max-width: 1200px;font-weight: normal; margin: 0 auto; align-items: center; padding: 0 15px; font-size:28px; }
.top_bg{background-color:#eee}


#list_bg{background:url(../img/bg/topsubti_list.png) no-repeat right center}
#ranking_bg{background:url(../img/bg/topsubti_rank.png) no-repeat right center}
#notice_bg{background:url(../img/bg/topsubti_notice.png) no-repeat right center}
#greetings_bg{background:url(../img/bg/topsubti_greetings.png) no-repeat right center}
#gratitude_bg{background:url(../img/bg/topsubti_gratitude.png) no-repeat right center}
#apology_bg{background:url(../img/bg/topsubti_apology.png) no-repeat right center}
#others_bg{background:url(../img/bg/topsubti_others.png) no-repeat right center}
#office_bg{background:url(../img/bg/topsubti_office.png) no-repeat right center}
#outside_office_bg{background:url(../img/bg/topsubti_outside_office.png) no-repeat right center}
#request_bg{background:url(../img/bg/topsubti_request.png) no-repeat right center}
#blog_bg{background:url(../img/bg/topsubti_blog.png) no-repeat right center}
#contact_bg{background:url(../img/bg/topsubti_contact.png) no-repeat right center}
#news_bg{background:url(../img/bg/topsubti_news.png) no-repeat right center}

#use_bg{background:url(../img/bg/topsubti_use.png) no-repeat right center}
#terms_bg{background:url(../img/bg/topsubti_terms.png) no-repeat right center}
#policy_bg{background:url(../img/bg/topsubti_policy.png) no-repeat right center}
#template_bg{background:url(../img/bg/topsubti_template.png) no-repeat right center}

#out_bg{background:url(../img/bg/topsubti_out.png) no-repeat right center}


.edit_link{position:absolute; right:0; top:0; display:block; background-color:#f9f9f9; font-style:normal; font-size:12px; border:1px solid #e7e7e7; border-radius:3px; line-height:1; padding:3px 5px; z-index:2}
.edit_link:hover{opacity: 0.6}
.edit_link a:link{position: relative; display: block; padding-left:15px; color: #000}
.edit_link a:hover{text-decoration: none}
.edit_link a:before{position: absolute; left:0; top:0; bottom: 0; margin: auto; display: block; font-size: 14px; width: 14px; height: 14px; font-family:"ht_icon"; content:"\e81e"}
#breadcrumb{background-color: #f7f7f7; font-size: 12px; margin-bottom: 40px}
#breadcrumb .wrap{display: flex; align-items: center;height: 37px; }
.single_title,.sub_title{font-size:26px; font-family: "Mplus 1p"; font-weight: 100; color: #4C6471; transform: rotate(0.05deg);}

#breadcrumb a{position: relative; padding-right:30px; }
#breadcrumb a:after{position: absolute; right:13px; top: 0; bottom:0; margin:auto; vertical-align: middle; content: ""; width:5px;height:5px;border:1px solid; border-color: #333 #333 transparent transparent;  transform: rotate(45deg);}
#breadcrumb a i{font-size: 14px; margin-right: 5px}
#breadcrumb br{display: none}

#post li{border-bottom:1px dashed #ddd; margin-top:30px; padding-bottom:20px;display: flex; justify-content: space-between}
#post li a{display: block}
#post li img{border: 1px solid #e7e7e7; width: 230px}
#post li strong{font-size:18px; display:block; line-height:1.2; margin:10px 0}
#post li .post_extra{width: calc(100% - 250px)}

#post li .tag_area{margin-top: 10px; display: flex; justify-content: space-between; flex-wrap: wrap;}
#post li .tag_area a{display:block; float: left; line-height: 20px; padding: 0 5px; margin-right:10px;font-size: 12px;  border: 1px solid #e7e7e7; color: #555;  border-radius: 3px; text-decoration: none}
.no_list{font-size:16px; text-align: center; line-height: 1.5; padding: 100px 0}
#post li .tag_area a:hover{text-decoration: none; background-color: #f1f1f1}

#post li.x .post_extra{width:100%}

#single{position:relative;}
#single a:link{text-decoration: none; color:#30963D}
#single a:hover{text-decoration: underline; color:#444444}
#single a:visited{text-decoration: none; color:#30963D}

.single_title,.sub_title{margin-bottom:30px; line-height:1.5;}
.single_title.x{margin-bottom:10px;}

.single_tag{margin-bottom: 25px; display: flex; justify-content:space-between;}
.single_tag.x{justify-content: flex-end}
.single_tag div{background: url(../img/icon/tag.png) no-repeat left center; padding-left:25px; background-size: auto 15px}

#single .single_tag a{display:block; float: left; line-height: 20px; padding: 0 5px; margin-right:10px;font-size: 12px;  border: 1px solid #e7e7e7; color: #555;  border-radius: 3px; text-decoration: none}
#single .single_tag a:hover{text-decoration: none; background-color: #f1f1f1}


.h2,.h3{line-height:1.2; padding-bottom:10px; margin-bottom:20px; margin-top:50px; font-family: "Mplus 1p"; font-weight: 400; color: #3F6B4A; transform: rotate(0.05deg);}
.h2{font-size:20px; border-bottom:1px solid #555;color:#333;}
.h3{font-size:18px;border-bottom:1px solid #4C6471;}
.h2.x,.h3.x{margin-top:0}
#single h3 span,#single h4 span,#single h5 span{padding-top:50px; margin-top:-50px}

.entry-date{display:block; font-size:13px; margin-bottom:10px; line-height:1}

.img_left img{float:left; margin-right:20px;}
.img_right img{float:right; margin-left:20px;}


#clear_btn_area{display: flex; justify-content: flex-end;}
.simplefavorites-clear{border: 1px solid #e7e7e7; background-color:#fff; border-radius: 3px; font-size: 12px; cursor: pointer; padding: 5px 10px; padding-left: 30px; position: relative;}

.simplefavorites-clear::before,.simplefavorites-clear::after{position:absolute; width: 12px; height: 2px; background-color:#dd8800; content: ""; left: 10px; top: 13px;transform:rotate(45deg);}
.simplefavorites-clear::after{transform:rotate(-45deg);}


.simplefavorite-button{border: 1px solid #e7e7e7; background-color:#fff; border-radius: 3px; font-size: 12px; cursor: pointer; padding-left: 23px; padding-right:7px; position: relative;}
.simplefavorite-button:hover{background-color: #f9f9f9}
.simplefavorite-button::before{font-family: "ht_icon"; font-style: normal;font-weight: normal;speak: never;position: absolute; left:5px; top:0; bottom:0; margin: auto; content: "\e80b"; display: flex; align-items: center; justify-content: center; text-align: center; width: 16px; height: 16px; font-size: 16px }

.simplefavorite-button.active::before{content: "\e80f"; color:#ffbf00}
.template_page_link{text-align: right}
.template_page_link a{display: inline-block; margin-left: 15px}



.btn_area{text-align:center; margin-top:50px}
#single a.btn,.btn{display:inline-block; padding:0 30px; line-height:30px; border-radius:3px; background-color:#3F6B4A; color:#fff; border:none; cursor:pointer}
.btn:hover{background-color:#847C3E; color:#fff}

.table th{text-align:left; vertical-align:top; padding-right:20px; white-space:nowrap}
.table td{padding-bottom:20px}


#search_result a{font-weight:bold; line-height:1.2; display:block; margin-bottom:10px}
#search_result p{font-size:12px; line-height:1.5; color:#777}
#search_result div{border-bottom:1px dashed #e7e7e7; padding-bottom:10px; margin-bottom:15px}

#search_result h3{margin:100px 0; text-align:center; color:#999; font-size:21px}


.search-highlight{font-weight: bold;
background: linear-gradient(transparent 60%, #ffff66 60%);
}

.code,.template_box{padding:15px; border:1px solid #e7e7e7; border-top:1px solid #ccc; overflow:auto; background-color:#FAFAFA; margin-bottom:30px}
.code{max-height:300px;}
.template{padding-top:1px}
.template h4{font-weight:normal; font-size:18px; border-bottom:1px solid #ccc; margin-bottom:15px; line-height:1.2; padding-bottom:5px; padding-left:35px}
.template h4.text{background:url(../img/icon/text.png) no-repeat left top;}
.template h4.html{background:url(../img/icon/html.png) no-repeat left top;}
.template h4.down{background:url(../img/icon/down.png) no-repeat left top;}
.template h4.mail{background:url(../img/icon/mail.png) no-repeat left top;}

.template h5{font-size:16px; border-bottom:1px solid #ccc; font-weight:normal; padding-bottom:5px}
.template h5 i{display:inline-block; line-height:1; border-radius:2px; color:#fff; font-weight:bold; font-style:normal; font-size:12px; padding:2px 5px; margin-right:10px}
#single .template .w{background-color:#001C8E}
#single .template .p{background-color:#B50A00}
#single .template .po{background-color:#008C69}
#single .template .ex{background-color:#217346}

#single .normal li{font-size:14px}
.down_dl{display: flex; justify-content: space-between}
.down_dl dt{width: 300px;}
.down_dl dt img{border:1px solid #ccc}
.down_dl dd{width: calc(100% - 330px)}
.down_dl p{margin:12px 0; }
#single .down_dl dd a{display:inline-block; width:300px; background:url(../img/icon/down_w.png) no-repeat 10px center; padding-left:40px; margin-bottom:25px; line-height:35px; padding-right:15px; color:#fff; border-radius:5px; text-decoration: none}
#single_top_img{margin-bottom:20px}
#toc_container {margin-left: auto;margin-right: auto;}

#toc_wrap{display: flex; justify-content: center; margin-top:50px}
#toc{border:1px solid #e7e7e7; width:80%;}
#toc p{text-align:center; font-weight:bold; background-color: #f9f9f9; border-bottom: 1px solid #e7e7e7; line-height: 45px; color: #3F6B4A;}
#toc p span{position: relative; padding: 0 20px}
#toc p span:before,#toc p span:after{display: block;position: absolute;content: "";width: 2px;height: 22px;background-color: #3F6B4A;transform-origin: center;}
#toc p span:before{left: 5px;top: 0;transform: rotate(-30deg);}
#toc p span:after{right: 5px;top: 0;transform: rotate(30deg);}
#toc ul,#toc li{list-style:none; margin:0; padding:0; font-size:14px}
#toc ul{padding:20px}
#toc li{padding: 0 10px; border-bottom: 1px dashed #aaa; margin-bottom: 10px}


#single #toc li a{text-decoration: none; color:#000}

.contents_banner li{margin-top: 20px;}
.contents_banner li:first-child{margin-top: 0}
.contents_banner li a{display: block; text-align: center}
.wp-pagenavi{display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin:30px 0}
.wp-pagenavi .pages{display:none}
.wp-pagenavi a, .wp-pagenavi span{display:block; width:30px; height:30px; font-size:12px; font-weight: bold; line-height:25px; text-align:center; margin:0 5px; background-color:#fff; border:1px solid #e7e7e7; color:#777; text-decoration:none; border-radius: 3px}
.wp-pagenavi a:hover,.wp-pagenavi .current{background-color:#00649A;border:1px solid #00649A; color:#fff}
#contact tr:nth-child(odd){background-color:#f9f9f9}
#contact th,#contact td{padding:10px}
#contact th{ width:200px; text-align:left; vertical-align:top; font-weight: normal; padding-left: 20px; line-height: 42px}

#contact th span{color:#F00; margin-left:3px; font-weight:normal; font-size:12px}
#contact textarea{width:100%; height:200px}
#contact td .b{width:80%}
#contact td .s{width:40%}
#contact input[type="text"],#contact input[type="email"],#contact textarea{border: 1px solid #e7e7e7; border-radius: 3px; padding: 10px; line-height: 20px}

.no{text-align: center; padding: 100px 0}


@media screen and (max-width: 750px){
.down_dl dt{width: 250px;}
.down_dl dd{width: calc(100% - 280px)}
}
@media screen and (max-width: 640px){
	.pc{display: none}
	.sp{display: inline-block}
	.top_bg{margin-bottom: 30px}
	
	#post li a img { width: 150px;  height: auto;  float: left;  margin-right: 15px;}
	#post li .post_extra{font-size:2.4vw;line-height:1.5; width: calc(100% - 165px)}
	#post li strong{font-size:2.8vw; margin: 0; margin-bottom: 10px;  display:block; line-height:1.2}
	.down_dl{display: block}
	.down_dl dt,.down_dl dd{width:100%;}
	.down_dl dt{margin-bottom: 20px; text-align: center}
	.down_dl dt img{width: 50%}
	.single_title, .sub_title{font-size: 3.8vw}
	
	#contact tr:nth-child(odd){background-color:#fff}

	
	#contact th,#contact td{display:block; width:100%}
	#contact th{line-height: 1; background-color: #f9f9f9}
	#contact td{padding:5px 0 20px 0}
	#contact textarea{width:100%; height:150px}
	#contact td .b,#contact td .s{width:100%}
	#contact .btn_area{margin-top: 0}
	



}