
/* ===================================================================
** CSS information
** File Name  : default.css
=================================================================== */
.stp div, .stp span, .stp p, .stp a, .stp img, .stp i, .stp strong, .stp sup, .stp ul, .stp li, .stp form, .stp label{
font-style: normal !important;
line-height: 1.5;
color: #000;
border: none;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.stp .d-pc{ display:block; }
.stp .d-sp{ display:none; }

/* link style */
.stp a { color:#000; text-decoration : none; -webkit-transition:.3s; transition:.3s; cursor:pointer;}
.stp a:link {color : #000;}
.stp a:visited { color: #000; text-decoration : none; }
.stp a:active { color: #000; text-decoration : none; }
.stp a:hover { color:#000; text-decoration : underline; }
.stp a:focus { outline:none;}

.stp a img{
	-webkit-transition:.3s;
	transition:.3s;
	-webkit-backface-visibility: hidden;
}
.stp a:hover img{
	opacity:.8;
}
/* selectBox */
.stp-selectBox{
	position:relative;

	width: 100%;
	min-height:40px;
	background:#fff;
	overflow:hidden;
}
.stp-selectBox:after{
	content:'';
	position:absolute;
	right:17px;
	top: 54%;
	width:0;
	height:0;
	border:5px solid transparent;
	border-top:9px solid #aaa;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.stp-selectBox select{
	position:relative;
	width: 100%;
	min-height: 30px;
	padding: 12px 30px 12px 15px;
	font-size:13px;
	border:none;
	white-space: normal;
	background: transparent;
	z-index:1;
	cursor: pointer;
	color: #333;
}
/* btn
---------------------------------------------*/
span.stp-arrow-right{
	display: inline-block;
    vertical-align: baseline;
    color: #333;
    line-height: 1;
    width: 0.8em;
    height: 0.8em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateX(-25%) rotate(45deg);
    margin-left: 20px;
}
/* submitBtn */
.stp-submitBtn input{
	width:232px;
	height:48px;
	line-height:48px;
	text-align:center;
	color: #fff;
	border: 1px solid #000;
	background:transparent;
	/* -webkit-border-radius:12px; */
	/* border-radius: 2px; */
	-webkit-transition:.3s;
	transition:.3s;
	cursor: pointer;
	background: #000;
}
.stp-submitBtn input:hover{
	opacity:.8;
}

/* moreBtn + actionBtn */
.stp .stp-moreBtn{
	margin-top:30px;
	overflow:hidden;
}
.stp-moreBtn a{
	display: inline-block;
	padding: 10px 15px;
	font-size: 15px;
	line-height: 24px;
	text-align: center;
	float: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight:bold;
}

/* title
---------------------------------------------*/
/* stp-secTitle */
.stp-secTitle {
	position: relative;
	text-align: center;
	padding-bottom: 20px;
	margin: 0 15px;
}
.stp-secTitle.single:before {
	top: 14px;
}
.stp-secTitle span {
	font-size: 1.5rem;
	font-weight: bold;
}
.stp-secTitle .stp-upDate{
    line-height:1.5rem;
    position: absolute;
    right: 0;
    bottom:0;
    color:#888;
    font-weight:normal;
}
.stp-secTitle + .summary {
	margin-top:6px;
	font-size: 11px;
	text-align: center;
}


/* stp-styleList
---------------------------------------------*/
#stpStyling{margin:50px 15px;}
.stp .stp-styleList:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	overflow:hidden;
	font-size:0.1em;
	line-height:0;
}
.stp .stp-styleList{
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.stp.stp-styleList li{
    position: relative;
}
.stp .stp-styleList .stp-styleList-image{
	position:relative;
	display:block;
	/* width:240px; */
	/* height:320px; */
	/* overflow:hidden; */
}
.stp .stp-styleList .stp-styleList-new {
	position:absolute;
	left:0;
	top:0;
	display:block;
	width:50px;
	height:25px;
	background: #363636;
	color:#fff;
	font-size:11px;
	line-height:25px;
	text-align:center;
	z-index:1;
	font-family: futura-pt,sans-serif;
	font-weight: 600;
	font-style: normal;
}
.stp .stp-styleList a{
	/* display:block; */
	z-index: 1;
}
.stp .stp-styleList a img{
	width:100%;
	height:auto;
}
.stp .stp-styleList a:hover .stp-styleList-new {
	opacity:.8;
}
.stp .stp-styleList .hotword {
	margin:8px 0 10px;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	background-color: #fff;
	padding: 9px 18px;
	position: absolute;
	z-index: 2;
	top: 15px;
	box-shadow: 0px 0px 33px -10px #777777;
	left: 0px;
}

 .stp-styleList li .stp-styleList-details{
	position:relative;
	/* float:left; */
	margin-top: 5px;
}

.stp-styleList li .stp-styleList-details span{
	display:block;
	margin-top:1px;
	text-overflow: ellipsis;
	white-space:nowrap;
	overflow:hidden;
	font-size: 0.8rem;
}

.stp-styleList li .likeCnt{
	position: absolute;
	height: 25px;
	margin: 0px 8px 0 0;
	padding-right: 27px;
	line-height: 25px;
	font-size:15px;
	/* font-weight:bold; */
	text-align:center;
	cursor:pointer;
	background: url(../img/fav_ico03.svg) no-repeat right center;
	text-decoration:none;
	background-size: 16px;
}
.stp-styleList li .favClick{
	background: url(../img/fav_ico01.svg) no-repeat right center;
	background-size: 16px;
}
.stp-styleList li .likeCnt span{
	font-weight:normal;
	margin-left:3px;
}
.stp-styleList li .likeCnt.favClick {
	-webkit-animation: bounceIn 1s both;
	animation: bounceIn 1s both;
}
/* 3column width:747px */
.stp-styleList.col3 li{
	width: calc(100% / 3);
	padding: 10px;
	box-sizing: border-box;
}
.stp-styleList.col3 li:nth-child(-n+3){ margin-top:0; }
.stp-styleList.col3 li:nth-child(3n+1){ clear:both; margin-left:0; }
.stp-styleList.col3 li .stp-styleList-details{width: 100%;box-sizing: border-box;}
.stp-styleList.col3 li .stp-styleList-details a{
	display:inline-block;
}
.stp-styleList.col3 li .likeCnt{width: 40px;top: 0;right: 0;text-align: right;font-size: 13px;}

/* 3column width:fullsize */
.stp-styleList.col3f li{
	width: calc(100% / 3);
	padding: 15px;
	box-sizing: border-box;
}
.stp-styleList.col3f li .stp-styleList-image{
	/* width:310px; */
	/* height:415px; */
	/* overflow:hidden; */
}
.stp-styleList.col3f li:nth-child(-n+3){ margin-top:0; }
.stp-styleList.col3f li:nth-child(3n+1){ clear:both; margin-left:0; }
.stp-styleList.col3f li .stp-styleList .details{width: 100%;padding-right:5px; }
.stp-styleList.col3f li .likeCnt{ width:97px; }


#stpStyling .stp-styleList.col3f li:nth-child(n+7){display:none;}
#stpStyling .stp-styleList.col3f.r1 li:nth-child(n+4){display:none;}

/* 4column width:fullsize */
.stp-styleList.col4f li{
	width: calc(100% / 4);
	box-sizing: border-box;
	padding: 15px;
}
.stp-styleList.col4f li .stp-styleList-image{
	/* width:240px; */
	/* height:320px; */
	/* overflow:hidden; */
}
.stp-styleList.col4f li:nth-child(-n+4){ margin-top:0; }
.stp-styleList.col4f li:nth-child(4n+1){ clear:both; margin-left:0; }
.stp-styleList.col4f li .stp-styleList-details{width: 100%;padding-right:5px;}
.stp-styleList.col4f li .likeCnt{ width:60px; cursor:pointer; margin-right:4px; }

#stpStyling .stp-styleList.col4f li:nth-child(n+9){display:none;}
#stpStyling .stp-styleList.col4f.r1 li:nth-child(n+5){display:none;}


.stp-styleList.col5f li{
	width: calc(100% / 5);
	box-sizing: border-box;
	padding: 15px;
}
.stp-styleList.col5f li:nth-child(-n+5){ margin-top:0; }
.stp-styleList.col5f li:nth-child(5n+1){ clear:both; margin-left:0; }
.stp-styleList.col5f li .stp-styleList-details{width: 100%;padding-right:5px;}
.stp-styleList.col5f li .likeCnt{ width:60px; cursor:pointer; margin-right:4px; }

#stpStyling .stp-styleList.col5f li:nth-child(n+11){display:none;}
#stpStyling .stp-styleList.col5f.r1 li:nth-child(n+6){display:none;}

/* ranking */
.stp-styleList.ranking li {
	counter-increment: cnt;
}
.stp-styleList.ranking .stp-styleList-image a:before {
	display: block;
	content: counter(cnt);
	position: absolute;
	left: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	background: #ffffff;
	font-size: 13px;
	color: #000;
	text-align: center;
	z-index: 1;
}

.stp-styleList.ranking li:nth-child(1) .stp-styleList-image a:before { background:#d2bd54; color:#fff; }
.stp-styleList.ranking li:nth-child(2) .stp-styleList-image a:before { background:#cccbcb; color:#fff; }
.stp-styleList.ranking li:nth-child(3) .stp-styleList-image a:before { background:#b29f79; color:#fff; }

.stp-styleList.ranking .stp-styleList-image a:hover{
	text-decoration:none;
}

.stp-styleList.ranking.col3f .stp-styleList-details{
	float:none;
	width:auto;
}

.stp-styleList.ranking.col3f .stp-styleList-details:after{
	border-left:none;
}


/* stp-pager
---------------------------------------------*/
.stp .stp-pager {
	clear: both;
	padding: 25px 0 0;
	text-align: center;
}
.stp .stp-pager ul{
	position:relative;
}
.stp .stp-pager ul li {
	display: inline-block;
	margin: 0 5px;
	line-height:50px;
	vertical-align:top;
	font-size: 22px;
	letter-spacing: normal;
}
.stp .stp-pager ul .dotted {
	padding: 0 3px;
	font-weight: normal;
	color: #bababa;
}
.stp .stp-pager ul li a {
	padding: 0 3px;
	color: #bababa;
}
.stp .stp-pager ul li .stp-pager-select {
	color: #494646;
	padding: 0 3px;
	text-decoration: none;
}
.stp .stp-pager ul .prev {
	position:absolute;
	left:0;
	text-align: left;
}
.stp .stp-pager ul .stp-pager-next {
	position:absolute;
	right:0;
	text-align: right;
}
.stp .stp-pager ul .prev a,
.stp .stp-pager ul .stp-pager-next a {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	font-size: 1px;
	color: #fff;
	vertical-align:top;
	-webkit-transition: .3s;
	transition: .3s;
}
.stp .stp-pager ul .prev a:before,
.stp .stp-pager ul .stp-pager-next a:before {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	width: 50px;
	height: 50px;
	background: #fff;
	border-radius: 50%;
	-webkit-transition: inherit;
	transition: inherit;
}
.stp .stp-pager ul .prev a:before {
	left: 0;
	right: auto;
}
.stp .stp-pager ul .prev a:after,
.stp .stp-pager ul .stp-pager-next a:after {
	content: '';
	position: absolute;
	right: 11px;
	top: 19px;
	display: block;
	height: 0;
	width: 0;
	border: 6px solid transparent;
	border-left: 10px solid #494646;
}
.stp .stp-pager ul .prev a:after {
	right: auto;
	left: 19px;
	border-left: 6px transparent;
	border-right: 10px solid #494646;
}
.stp .stp-pager ul .prev a:hover,
.stp .stp-pager ul .stp-pager-next a:hover {
	opacity:.8;
}


/* staffImg
------------------------------------------------------------------------*/
.stp .stp-staffItem{
	position: relative;
	min-height: 95px;
	margin-bottom: 20px;
	clear: both;
}

.stp-staffItem .stp-staffImg{
	width: 95px;
	height: 95px;
	overflow: hidden;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
}

.stp-staffItem .stp-staffImg img{
	width: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%)translateY(-50%);
	-webkit-transform: translateX(-50%)translateY(-50%);
}

.stp-staffItem .stp-staffData{
	padding: 5px 0px 0 125px;
	min-width: 140px;
}

.stp-staffItem .stp-staffData p{
	font-size: 18px;
	margin-top: 5px;
	margin-bottom: 15px;
}

.stp-staffItem .stp-staffData .stp-staffLink{

}

.stp-staffItem .stp-staffData .stp-staffLink a{
	/* display: block; */
	text-decoration: underline;
	font-size: 12px;
}

.stp-staffItem .stp-staffData .stp-staffLink a:hover{
	opacity:0.6;
}
.stp .stp-error{
	clear: both;
	padding: 100px 0;
	text-align: center;
	margin: 0 auto;
}
.stp .stp-error .stp-errorTtl {
	font-size: 38px;
	font-weight: bold;
	font-weight: 600;
	font-style: normal;
}
.stp .stp-error .stp-errorText {
	margin-top: 10px;
	line-height: 2;
	font-size: 13px;
}
.stp .stp-error .stp-errorBtn {
	margin-top: 10px;
	line-height: 2;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
}

/* SP
------------------------------------------------------------------------*/
@media (max-width: 767px) {
	.stp .d-pc{display:none !important;}
	.stp .d-sp{ display:block !important; }
	.stp a{text-decoration: underline;}
	.stp .contents{
		width:100% !important;
		padding: 0 15px;
		box-sizing: border-box;
		padding-bottom: 40px !important;
	}
	.stp .stp-secTitle{
		margin: 0 10px;
		padding-bottom: 30px;
	}
	.stp .stp-styleList.col4f li,.stp .stp-styleList.col5f li{
		width: calc(100% / 2);
		padding: 10px;
	}
	.stp .stp-styleList.col3 li:nth-child(3n+1){
		/* margin: 0 0 25px 10px; */
	}
	.stp .stp-styleList.col3 li{
		width:100%;
	}
	.stp-styleList.col3 li .stp-styleList-details{
		padding-right: 55px;
	}
	.stp .stp-styleList.col3f li{
		width:100%;
	}
	#stpStyling .stp-styleList.col3f.r1 li{	width: calc(100% / 2);
		padding: 10px;}
	#stpStyling .stp-styleList.col3f.r1 li:nth-child(n+4){display:block;}
	#stpStyling .stp-styleList.col3f.r1 li:nth-child(n+5){display:none;}
	#stpStyling .stp-styleList.col4f.r1 li:nth-child(n+5){display:none;}
	#stpStyling .stp-styleList.col5f.r1 li:nth-child(n+5){display:none;}

	.stp-styleList li .likeCnt{
		font-size: 11px !important; 	
		width: 30px !important;
	}
	.stp-styleList.ranking li{
		width: calc(100% / 2);
		padding:10px;
	}
	.stp .stp-moreBtn {
		margin-top: 10px;
	}
	#stpDetailArea .stp-style-tag{margin:0 13px;}
}