/******************************************************************************************************
 * Example
 *****************************************************************************************************/

/*--- 一覧 ---*/

.category-choice {
	text-align: center;
	letter-spacing: 0.5em;
	padding: 0 8px;
}
.category-choice button {
	position: relative;
	display: inline-block;
	color: #006633;
	line-height: 1em;
	letter-spacing: normal;
	vertical-align: top;
	border: none;
	background-color: #cfecdc;
	padding: 10px 15px;
	border-radius: 5px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
}

.category-choice button:hover,
.category-choice button:focus,
.category-choice button.active {
	background-color: #41b573 !important;
}

.category-choice button.active {
	color: #fff !important;
	font-weight: bold !important;
}

ul#example-list {
	display: block;
	list-style: none;
	text-align:justify;
	letter-spacing: -.40em;
}
ul#example-list li {
	position: relative;
	display: inline-block;
	width: 25%;
	line-height: 1.5em;
	letter-spacing: normal;
	vertical-align: top;
	padding-top: 3%;
	padding-left: 8px;
	padding-right: 8px;
}
ul#example-list li.mix { display:none; }
ul#example-list li .img-canvas {
	position: relative;
	width: 100%;
}
ul#example-list li .img-canvas > a.block > .remove { padding-top: 75%; }
ul#example-list li .img-canvas > a > .img-canvas-filter {
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	display: block;
	background-color: rgba(65,181,115,0.65);
	opacity: 0;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;
}
ul#example-list li .img-canvas > a:hover > .img-canvas-filter { opacity: 1; }
ul#example-list li .img-canvas > a > .img-canvas-filter:before,
ul#example-list li .img-canvas > a > .img-canvas-filter:after {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 0;
	height: 0;
	line-height: 0;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	content: "";
}
ul#example-list li .img-canvas > a > .img-canvas-filter:before {
	width: 30px;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
}
ul#example-list li .img-canvas > a > .img-canvas-filter:after {
	height: 30px;
	border-left: solid 1px #fff;
	border-right: solid 1px #fff;
}
ul#example-list li > a {
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-top: 10px;
	margin-bottom: 0;
}
ul#example-list li .tags a { color: #999; cursor: pointer; }
ul#example-list li .tags a:hover { color: #ff9900; }

.img-canvas > .news { position: absolute; top: 0; left: 0; line-height: 1em; padding: 7px; background-color: #ffcc00; z-index: 10; }

@media screen and (max-width: 767px) {
	.category-choice { letter-spacing: 0.15em; }
	.category-choice button {
		font-size: 0.875em;
		padding-left: 8px;
		padding-right: 8px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		margin-bottom: 7px;
	}

	ul#example-list { margin-top: 3%; }
	ul#example-list li { width: 100%; padding: 3% 3px !important; border-top: dotted 1px #999; letter-spacing: -.40em; }
		ul#example-list li.gap { padding-bottom: 0; border-top: none; }
		ul#example-list li:first-child { border-top: none; }
		ul#example-list li .img-canvas { float: left; width: 25%; margin-right: 15px; margin-bottom: 0; }
		ul#example-list li > a { width: auto; margin-top: 0; letter-spacing: normal; }
		ul#example-list li > .tags { letter-spacing: normal; }
	
	ul#example-list li a.list-thumbnail .xs-category { display: inline-block !important; }
	ul#example-list li a.list-thumbnail h4 { text-align: left; }
}

/*--- 詳細 ---*/

.topics-label {
	padding-bottom: 10px;
	border-bottom: solid 1px #007e37;
	margin-bottom: 3%;
}
.topics-label > * {
	color: #004422;
	line-height: 1.2em;
	border-left: solid 6px #b2d1c2;
	padding-left: 12px;
}
.image-box .image-box-inner {
	width: 100%;
	height: 0;
	/*padding-top: 56.25%;*/
	padding-top: 75%;
}
.image-box .image-box-inner a,
.image-box .image-box-inner div {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: #111;
	background-position: center;
	background-size: contain;
	-webkit-transition: opacity 0.75s;
	-moz-transition: opacity 0.75s;
	transition: opacity 0.75s;
	opacity: 0;
}
.image-box .image-box-inner a:not(.active),
.image-box .image-box-inner div:not(.active) {
	z-index: 10;
}
.image-box .image-box-inner a.active,
.image-box .image-box-inner div.active {
	opacity: 1 !important;
}
a.arrow-filter, .slick-arrow {
	position: absolute;
	overflow: hidden;
	display: block;
	top: 50%;
	width: 66px;
	height: 110px;
	margin-top: -55px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
	cursor: pointer;
	z-index: 10;
}
a#arrow-left, .slick-prev { left: 0; }
a#arrow-right, .slick-next { right: 0; }

.image-box a#arrow-left {
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topright: 5px; 
	border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright: 5px; 
	border-bottom-right-radius: 5px;
	background-image: url(../../kurabiz-wp/basic/msg/library/img/image_slider_arrow_l.png);
}
.image-box a#arrow-right {
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px; 
	border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomleft: 5px; 
	border-bottom-left-radius: 5px;
	background-image: url(../../kurabiz-wp/basic/msg/library/img/image_slider_arrow_r.png);
}

.image-box a.arrow-filter:hover,
.image-box a.arrow-filter:focus {
	background-color: rgba(0,0,0,0.5);
}

.slick-arrow {
	top: 50%;
	overflow: hidden;
	width: 30px;
	height: 30px;
	background-color: rgba(0,0,0,0.8);
	border: none;
	border-radius: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-top: 0;
	padding-top: 0.25%;
	opacity: 0.75;
}
.slick-arrow:before { display: inline-block; color: #fff; font-weight: normal; letter-spacing: 0; }
.detail-image-list-container:hover .slick-arrow { opacity: 1; }
.detail-image-list-container .slick-prev { left: 10px; }
.detail-image-list-container .slick-next { right: 10px; }

.detail-image-list-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-bottom: 3%;
}
.detail-image-list-wrap { background-color: #333; }
ul.detail-image-list {
	position: relative;
	display: block;
	left: 0;
	list-style: none;
	letter-spacing: -.40em;
	text-align: justify;
	white-space: nowrap;
	padding: 3px 0;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
ul.detail-image-list li {
	display: inline-block;
	width: 118.5px;
	letter-spacing: normal;
	margin-right: 3px;
	vertical-align: top;
}
ul.detail-image-list li a {
	position: relative;
	overflow: hidden;
	display: block;
	cursor: pointer;
	background: #333;
	width: 100%;
	height: 0;
	padding-top: 75%;
}
ul.detail-image-list li a img {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
	opacity: 0.4;
}
ul.detail-image-list li a:hover img { opacity: 1; }
ul.detail-image-list li a.active img, ul.detail-image-list li a.now img { opacity: 1 !important; }

ul.detail-image-list li a span {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	border: solid 3px #000;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
	opacity: 0;
}
ul.detail-image-list li a.active span { opacity: 1; }

#staff_blog .category {
	border-top: dotted 1px #999;
	padding-top: 1%;
	margin-top: 3%;
}

.works-pagenation { margin-top: 10%; }
.works-pagenation .inactive {
	display: block;
	color: #fff;
	line-height: 1em;
	width: 90px;
	text-align: center;
	padding: 7px 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #ddd;
}
.works-pagenation a.inactive { background: #41b573; }
.works-pagenation a.inactive:hover { background: #ff9900 !important; }
.works-pagenation #inactive-prev { float: left; }
.works-pagenation #inactive-next { float: right; }
.works-pagenation #inactive-top { width: 120px; margin-left: auto; margin-right: auto; }
.works-pagenation .single-to-top { text-align: center; }
.works-pagenation .single-to-top a {
	font-size: 1em;
	font-weight: 500;
	font-family: "Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
	/*font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	letter-spacing: 0.05em;
}

#side-bar h3 {
	line-height: 1.2em;
	letter-spacing: 0.05em;
	border-left: solid 6px #666;
	padding-left: 12px;
	margin-top: 9px;
}
.side-bar-list-container {
	padding-bottom: 20px;
	margin-top: 12px;
}
ul.side-bar-list {
	display: block;
	font-size: 0.875em;
	line-height: 1.5em;
	list-style: none;
	padding-right: 7px;
	margin-bottom: 0;
}
ul.side-bar-list li {
	padding: 10px 3px 10px;
}
ul.side-bar-list li:first-child { border-top: none; padding-top: 0; }

ul.side-bar-list li a {
	position: relative;
	display: block;
	width: 100%;
	text-decoration: none !important;
}
ul.side-bar-list li a .row { position: relative; overflow: hidden; }
ul.side-bar-list li a .img-canvas {
	position: relative;
	padding-top: 75%;
}
ul.side-bar-list li a .img-canvas:after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: solid 3px transparent;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
	content: "";
}
ul.side-bar-list li a:hover .img-canvas:after {
	border-color: rgba(255,255,255,0.75);
}
ul.side-bar-category-list {
	padding-left: 20px;
}

@media screen and (max-width: 767px) {
	#detail-body { padding-left: 0; padding-right: 0; } 
	#detail-body .topics-label > h2 { font-size: 1.285em; }
	#detail-body .image-box { margin-top: 6%; }
	ul.detail-image-list li { width: 84.5px; vertical-align: top; }
	a.arrow-filter { width: 33px; height: 55px; margin-top: -27.5px; }
	
	h3.topics-sub-header { font-size: 1.14em; }
	
	#side-bar { margin-top: 10%; }
	#side-bar h3 { padding-left: 10px; padding-bottom: 6px; border-bottom: dotted 1px #666; }
	.side-bar-list-container { padding-bottom: 15px; }
	ul.side-bar-list li { padding-top: 5px; padding-bottom: 5px; }
	.works-pagenation .inactive { width: 100%; padding-left: 7px; padding-right: 7px; }

	.slick-arrow { background-size: 15px; }

	.image-box > .image-box-inner:before {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
		z-index: 50;
		content: "";
	}
	.image-box:not(.init) > .image-box-inner:before { background-color: rgba(0,0,0,0); }

	.image-box > .image-box-inner:after {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		width: 40px;
		height: 40px;
		background: url("../img/swipe.svg") center no-repeat;
		background-size: cover;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		transition: 0.3s;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		z-index: 51;
		content: "";
	}
	.image-box:not(.active) > .image-box-inner:after { opacity: 0; }
	.image-box.end > .image-box-inner:before, .image-box.end > .image-box-inner:after { z-index: -1; }
}