@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------

Common

----------------------------------------------- */

/* ------------ Ttl---------------- */

#container .ttlMain{
	background-color: #3fcbdc;
}
.pageTtl:after{
	background-color: #3fcbdc;
}
.ttlBg{
	background-color: #e6f8fa;
	color: #17a7b8;
}

/* ------------ list---------------- */

.arrowList .list li a:before{
	border-left: 6px solid #3fcbdc;
}

/* ------------ link---------------- */
.txtLink:after{
	  border-top: 2px solid #3fcbdc;
    border-right: 2px solid #3fcbdc;
}

/* ----------------------------------------------

sideArea

----------------------------------------------- */

/* ------------ ranking--------------- */

#ranking .articleBox:nth-child(n + 4) .imgBox:before{
	background-color: #9edae1;
}
/* ------------ Dictionary--------------- */

#sideDictionary a{
	background: #e6f8fa;
	border: 2px solid #3fcbdc;
	color: #17a7b8;
}
#sideDictionary a:before{
	border-right: 4px solid #3fcbdc;
	border-bottom: 4px solid #3fcbdc;
}
/* ------------ service--------------- */

#sideService .ttl{
	background: url(/servicemaster/column/images/bg_service_ttl.gif);
}
#sideService .more a:after{
	border-top: 2px solid #3fcbdc;
	border-right: 2px solid #3fcbdc;
}

/* ----------------------------------------------

dictionary

----------------------------------------------- */

.anchorList.top li a:before{
	border-top: 6px solid #3fcbdc;
}
.anchorList.links li a:before{
	border-left: 6px solid #3fcbdc;
}
.anchorList.btm li a:before{
	border-bottom: 6px solid #3fcbdc;
}
/* ----------------------------------------------

article

----------------------------------------------- */

/* ------------ links--------------- */
a.btnLine{
	border: 2px solid #3fcbdc;
	color: #17a7b8;
}
a.btnLine:hover{
	background-color: #3fcbdc;
	color: #fff;
}
.btnLine:before{
	border-top: 2px solid #3fcbdc;
	border-right: 2px solid #3fcbdc;
}
.btnLine:hover:before{
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
a.btnSolid{
	background-color: #3fcbdc;
	color: #fff;
}
a.btnSolid:hover{
	background-color: #00a0b8;
}
/* ------------ articleTop proService--------------- */
#articleTop,
#proService{
	background: url(/servicemaster/column/images/bg_article.gif);
}
#proService .proTtl,
#proService .copy{
	color: #008999;
}
/* ------------ product--------------- */
#product{
	background-color: #e6f8fa;
}
#product .productTtl{
	color: #008999;
}


/* 20191113追記 */
.productLinkBox {
	width: 400px;
	border: 1px solid;
	margin: 30px 0 10px;
}

.imgBox02 {
	width: 138px;
	float: left;
	padding: 8px;
}

.txt02 {
	float: left;
	margin: 40px 0 0 10px;
}


/* 20200115追記 */
.txtIndent {
	text-indent: -1em;
	padding-left: 1em;
}


/* 20200219追記 */
.imgBox {
	position: relative;
}

.ico_new {
	position: absolute;
	left: 0;
	top: 0;
	padding: 7px 14px;
	background: #e13971;
	line-height: 1;
	font-size: 15px;
	color: #ffffff;
	font-weight: 700;
}


/* 20200514追記 */
.proBox {
	padding: 0 28px;
	margin: 20px 0 0;
}

.proBox .txt {
	float: left;
	width: 50%;
}

.proBox .img {
	position: relative;
	float: right;
	width: 45%;
	height: 180px;
	overflow: hidden;
}

.proBox .img img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
}

.proBox .img.v02 img {
	top: 35%;
}

@media screen and (max-width: 667px) {
.proBox {
	padding: 0 20px;
}

.proBox .txt {
	float: none;
	width: 100%;
}

.proBox .img {
	position: relative;
	float: none;
	width: 100%;
	height: 200px;
	overflow: hidden;
}

.proBox .img.v02 img {
	top: 34%;
}
}


/* 閲覧数ランキング自動化 20200611追記 */
#recommendArea {
	background-color: #fafafa;
	border: 1px solid #ddd;
	padding: 15px;
	margin: 0 0 15px;
}

.rankTtl {
	font-size: 14px;
	font-weight: bold;
	background: url(/column/images/icon_rank.png) no-repeat left center;
	padding: 5px 0 5px 30px;
	margin: 0 0 15px;
}

.recommend_box {
	border-bottom: 1px solid #ddd;
	padding: 0 0 5px;
	margin: 0 0 10px;
}

.recommend_box:last-child {
	border-bottom: none;
	padding: 0;
	margin: 0;
}

.recommend_img {
	position: relative;
	float: left;
	width: 50%;
}

.recommend_img img {
	width: 100%;
}

.recommend_txt {
	float: right;
	width: 48%;
}

.recommend_box .recommend_img:before {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background: #e13971;
	padding: 0.3em 0.5em 0.2em;
}

.recommend_box:nth-of-type(1) .recommend_img:before {
	content: '1';
}

.recommend_box:nth-of-type(2) .recommend_img:before {
	content: '2';
}

.recommend_box:nth-of-type(3) .recommend_img:before {
	content: '3';
	background: #ff9999;
}

.recommend_box:nth-of-type(4) .recommend_img:before {
	content: '4';
	background: #ff9999;
}

.recommend_box:nth-of-type(5) .recommend_img:before {
	content: '5';
	background: #ff9999;
}


@media screen and (max-width: 667px) {
#recommendArea {
	padding: 15px 10px;
}

.recommend_img {
	width: 30%;
}

.recommend_txt {
	width: 68%;
}
}