@charset "utf-8";
/*  style　[   ]
=================================================================== */


.hover-sepia img{
  filter: sepia(0);/*セピア具合を変更したい場合はこの数値を変更*/
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  
}
.hover-sepia:hover img{/*hoverした時の変化*/
  filter:sepia(80%);
  
}


.hover-opacity img{
  opacity:1;
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.hover-opacity:hover img{/*hoverした時の変化*/
  opacity:0.8;/*透過具合を変更したい場合はこの数値を変更*/
}



.icon-box {
	margin: 0 0 15px 0;
}
.icon-tag {
	display: inline-block;
	padding: 5px;
	margin: 0 5px 0 0;
	line-height: 1;
	color: #fff;
	font-size: 0.8em;
	border-radius: 3px;
}

.bg-pink {
	background: #EA613B;
}
.bg-blue {
	background: #0098D8;
}
.bg-brown {
	background: #A97322;
}
.bg-purple {
	background: #905CA2;
}
.bg-green {
	background: #00A85F;
}
.bg-orange {
	background: #F29600;
}
.bg-design {
	background: #ff3399;
}
.bg-sekou {
	background: #336699;
}
.bg-planning {
	background: #cc3300;
}


.card-date {
	display: block;
	color: #666;
	margin: 10px 0 0 0;
	text-align: right;
	font-size: 0.9em;
}







// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
}

@media screen and (max-width: 480px) {
}