@charset "UTF-8";

/* shohin btn
---------------------------------------------------- */



/* -------------------------------------------------- *
 * card
 * -------------------------------------------------- */
.topthum-wrap{
	text-align: center;
	margin-bottom: 20px;
	border: 0px solid #f5f5f5;
	position: relative;
	overflow: hidden;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	    height: 80px;
}


.topthum-wrap.end{
	margin-bottom: 0px;
}
.topthum-wrap h4{
	font-size: 15px;
}
.topthum-wrap h4:hover{
	font-size: 15px;
	text-decoration: none;
}
.topthum-wrap:hover .topthum-hover{
	opacity: 1;
	text-decoration: none;
}
.topthum-label{
	position: absolute;
	top:0;
	left: 0;
	padding: 4px 10px;
	text-transform: uppercase;
	font-size: 13px;
	color:#fff;
	background: #333;
}
.topthum-title {
	position: absolute;
	top: 0px;
	left: 0;
	width:100%;
	height: 100%;
	margin: 0 auto;
}
#content .topthum-title p{
	position: absolute;
	width:100%;
	top:0;
	left: 0;
	text-align: left;
	font-size: 1.7em;
	color:#FFFFFF;
	margin: 10px 0 0 20px;
	text-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	line-height: 1.5;
}
.topthum-title_center {
	position: absolute;
	top: 30%;
	left: 0;
	width:100%;
}
.topthum-title_center.top5 {
	position: absolute;
	top: 5%;
	left: 0;
	width:100%;
}

.topthum-title_center.top20 {
	position: absolute;
	top: 20%;
	left: 0;
	width:100%;
}
#content .topthum-title_center p{
	position: absolute;
	width: 100%;
    text-align: center;
	font-size: 1.5em;
	color:#FFFFFF;
	line-height: 1.5;
	text-shadow: 2px 2px 8px rgba(0,0,0,0.5), -2px 2px 8px rgba(0,0,0,0.5), 2px -2px 8px rgba(0,0,0,0.5), -2px -2px 8px rgba(0,0,0,0.5);
}
.topthum-subtitle {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	margin: 0 auto;
}
.topthum-subtitle p{
	position: absolute;
	width:100%;
	bottom:0;
	right: 0;
	text-align: right;
	font-size: 1.3em;
	font-weight: 600;
	color:rgba(255,255,255,1);
	margin: 0 10px 10px 0;
	text-shadow: 0px 0px 8px rgba(0,0,0,0.5);
}
.topthum-hover{
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	background-color:rgba(66,172,194,0.90);
	text-align: center;
	opacity: 0;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.topthum-hover p{
	position: absolute;
	width:100%;
	top:45%;
	margin-top: -10px;
	text-align: center;
	font-size: 20px;
	color:#fff;
}
.topthum {
 display:flex;
 flex-wrap:wrap;
}
p.topthum_Ttl{
	letter-spacing: 0.1em;
	font-size: 18px;
	line-height: 1.8;
	border-bottom: #bebebe solid 1px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	text-align: justify
}
.topthumTxt{
	font-size: 14px;
	line-height: 2;
	margin-bottom: 5px;
}
.topthumBottom{
	display: -webkit-flex;
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	font-size: 12px;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}
#content .topthumBottom a.link {
    text-decoration: none;
    color: #fff;
    background: #e63c96;
    display: inline-block;
    border-radius: 3px;
    padding: 3px 7px;
	}
	
.topthumBottom:hover{
	opacity: 0.5;
}
@media (max-width: 991px) {
	.topthum-title {
		top: 5px;
	}
	#content .topthum-title p{
		font-size: 1.5em;
	}
	.topthum-subtitle p{
		font-size: 1em;
	}
	#content .topthum-title_center p{
	font-size: 1.2em;
}
}
@media (max-width: 768px) {
.topthum-wrap{
	    height: 50px;
}
	.topthum-title {
		position: absolute;
		top: 0;
		left: 0;
		width:100%;
		height: 100%;
		background-color: rgba(0,0,0,0.12);
		margin: 0 auto;
	}
	#content .topthum-title p{
		position: absolute;
		width:100%;
		top:0;
		left: 0;
		text-align: left;
		font-size: 1.5em;
		color:rgba(255,255,255,1);
		text-transform: uppercase;
		margin: 10px 0 0 10px;
		text-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	}
	#content .topthum-title_center p{
		position: absolute;
		width: 100%;
		text-align: center;
		font-size: 1.2em;
		color:#FFFFFF;
		text-shadow: 2px 2px 8px rgba(0,0,0,0.5), -2px 2px 8px rgba(0,0,0,0.5), 2px -2px 8px rgba(0,0,0,0.5), -2px -2px 8px rgba(0,0,0,0.5);
	}
	.topthum-subtitle {
		position: absolute;
		top: 0;
		left: 0;
		width:100%;
		height: 100%;
		margin: 0 auto;
	}
	.topthum-subtitle p{
		position: absolute;
		width:100%;
		bottom:0;
		right: 0;
		text-align: right;
		font-size: 1.05em;
		font-weight: 600;
		color:rgba(255,255,255,1);
		margin: 0 10px 10px 0;
		text-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	}
	p.topthum_Ttl{
		font-size: 16px;
		letter-spacing: 0.3px;
	}
}


@media (max-width: 575px) {
	#content .topthum-title_center p{
		font-family: kan412typos-std,"游ゴシック体", YuGothic, "YuGothic M", sans-serif;
		position: absolute;
		width: 100%;
		text-align: center;
		font-size: 1.2em;
		color:#FFFFFF;
		text-shadow: 2px 2px 8px rgba(0,0,0,0.5), -2px 2px 8px rgba(0,0,0,0.5), 2px -2px 8px rgba(0,0,0,0.5), -2px -2px 8px rgba(0,0,0,0.5);
	}
}


.bg-dark {
	color:#fff
}
.bg-dark-30:before,.bg-dark-60:before,.bg-dark-90:before,
.bg-purple:before,
.bg-yellow:before,

.bg-green:before,
.bg-orange:before,
.bg-red:before
 {
	content:" ";left:0
}

.bg-dark-30:before,.bg-dark-60:before,.bg-dark-90:before,.bg-purple:before,
.bg-yellow:before,

.bg-orange:before,
.bg-green:before,
.bg-red:before {
	position:absolute;height:100%;width:100%;z-index:0;
}
.bg-dark-30:before {
	background-color:rgba(34,34,34,.3);top:0
}
.bg-dark-60:before{
	background:rgba(34,34,34,.6);top:0
}
.bg-dark-90:before{
	background:rgba(34,34,34,.9);top:0
}


.caption_02 {
position: absolute;
left: -5px;
top:-5px;
}