/*
オークメモリーズ専用CSS
*/


#memory_list {
	color: #2a2a2a;
}
	#memory_list .inner {
		max-width: 1000px;
		margin: 0 auto;
		padding: 40px 0 120px;
	}
	#memory_list .inner_for_workerpage {
		max-width: 1000px;
		margin: 0 auto;
		padding: 0 0 0;
	}


#memory_list .lead_text {
	font-size: 14px;
	line-height: 1.78;
}

#memory_list .sort_navi {
	margin-top: 60px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
	#memory_list .sort_navi > li {
		width: 49.5%;
		margin-top: 10px;
		display: flex;
		position: relative;
	}
	#memory_list .sort_navi > li > a {
		display: block;
		width: 100%;
		box-sizing: border-box;
		background: #dedede;
		text-align: center;
		font-size: 14px;
		color: #2a2a2a;
		padding: 18px;
		box-sizing: border-box;
		line-height: 1;
		opacity: 1;
		text-decoration: none;
	}
	.detect-pc #memory_list .sort_navi > li > a:hover {
		opacity: 0.75;
	}
	#memory_list .sort_navi > li > a:before {
		content: url(/images/oakworker2017/icn-search.png);
		vertical-align: middle;
		margin-right: 2px;
	}

	#memory_list .sort_navi > li.toggle  {
		right: 0px;
	}
	#memory_list .sort_navi > li > a.active,
	#memory_list .sort_navi > li.toggle > a  {
		background:#ff6161;
		color: #fff;
	}
	#memory_list .sort_navi > li > a.active:before,
	#memory_list .sort_navi > li.toggle > a:before {
		content: url(/images/oakworker2017/icn-search_w.png);
	}
	#memory_list .sort_navi > li.toggle > a:after {
		content: '';
		width: 0;
		height: 0;
		border: 7px solid transparent;
		border-top: 7px solid #ff6161;
		position: absolute;
		left: 50%;
		margin-left: -4px;
		bottom:-14px;
	}

#memory_list .filter-layer {
	position: absolute;
	top: 100%;
	z-index: 10;
	width: 202.02%;
	max-width: 1000px;
	left: 0;
	background: #fff;
	box-sizing: border-box;
	border: 1px solid #ff6161;
	margin-top: 10px;
	opacity: 0;
	display: none;
}
#memory_list li.toggle .filter-layer {
	opacity: 1;
	display: block;
	animation:layerFadeIn ease 1;
	animation-fill-mode:forwards;
	animation-duration:0.3s;
}
	#memory_list .sort_navi > li:nth-child(even) .filter-layer {
		margin-left: -102.02%;
	}
	#memory_list .filter-layer-scroll {
		margin: 29px;
		overflow-y: scroll;
		max-height: 440px;
	}
	#memory_list .filter-title {
		font-size: 14px;
		background: #dedede;
		padding: 20px 30px;
		line-height: 1;
	}
	#memory_list .filter-title.is-disable {
		display: none !important;
	}
	#memory_list .filter-list + .filter-title {
		margin-top: 30px;
	}
	#memory_list .filter-list {
		display: flex;
		flex-wrap: wrap;
		margin: 0 0;
		justify-content: flex-start;
		align-items: stretch;
		font-size: 14px;
	}
	#memory_list .filter-list > li {
		width: 28.72%;
		display: flex;
		align-items: stretch;
		margin-left: 3.31%;
	}
	#memory_list .filter-list > li.is-disable {
		display: none !important;
	}

	#memory_list .filter-list > li > a {
		text-decoration: none;
		border-bottom: 1px solid #dedede;
		background: url(/images/oakworker2017/icn-filter_list.png) no-repeat right center;
		display: flex;
		align-items: center;
		width: 100%;
		padding: 20px 15px 20px 0;
		position: relative;
		transition: color 0.3s;
	}
	.detect-pc #memory_list .filter-list > li > a:hover {
		color: #ff6161;
	}
	#memory_list .filter-list > li > a:after {
		content: '';
		height: 1px;
		width: 0;
		background: #ff6161;
		display: block;
		position: absolute;
		left: 0;
		bottom: -1px;
		transition: width 0.3s;
	}
	.detect-pc #memory_list .filter-list > li > a:hover:after {
		width: 100%;
	}
	#memory_list .filter-error {
		display: block;
		font-size: 14px;
		color: #ff6161;
		margin-top: 29px;
	}
	#memory_list .filter-error.is-disable {
		display: none !important;
	}

#memory_list .filter-selected {
	font-size: 14px;
	background: none;
	position: relative;
	border-bottom: 1px solid #2a2a2a;
	padding: 5px 15px;
	color: #2a2a2a;
	margin-top: 40px;
	line-height: 1.4;
}
#memory_list .filter-selected:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom:0;
	background: #ff6161;
	width: 6px;
	border: 1px solid #2a2a2a;
	border-bottom: none;
	height: 100%;
}
	
#memory_list .photo_list {
	margin:40px 0 0;
	justify-content: flex-start;
	position: relative;
}
#memory_list .photo_list .item { 
	width: 23.7%;
	display: none;
	opacity: 0;
	position: relative;
	top:20px;
	margin-left: 1.733%;
}
#memory_list .photo_list .item:nth-child(4n+1) { 
	margin-left: 0;
}
#memory_list .photo_list .item.animated {
	display: block;
	animation:fadeIn ease 1;
	animation-fill-mode:forwards;
	animation-duration:1s;
}

#memory_list .more {
	margin-top: 40px;
}
	#memory_list .more a {
		display: block;
		color: #fff;
		background:#ff6161;
		text-align: center;
		font-size: 14px;
		line-height: 1;
		padding: 20px;
		text-decoration: none;
	}
	.detect-pc #memory_list .more a:hover {
		opacity: 0.75;
	}



/* WEB-1251 Voters Choise and House Rally */
#voters,
#rally {
	border: 1px solid #fdd7bc;
	background: #fff;
	margin-top: 70px;
}
#rally {
	margin-top: 40px;
}
.voters_body,
.rally_body {
	padding: 20px 29px;
}
	.voters_title,
	.rally_title  {
		padding: 15px;
		font-size: 16px;
		background: #fdd7bc;
		text-align: center;
	}
	.voters_lead,
	.rally_lead {
		font-size: 14px;
		text-align: center;
	}
	.voters_layout {
		display: flex;
		justify-content: center;
		align-items: stretch;
		margin-top: 20px;
	}
	.voters_item {
		margin-left:6.38%;
		width: 25.42%;
		max-width: 239px;
		justify-content: flex-start;
		display: flex;
		flex-direction: column;
	}
	.voters_item:first-child {
		margin-left: 0;
	}
	.voters_item_rank {
		order: 1;
		text-align: center;
	}
	.voters_item_rank em {
		min-height: 40px;
		position: relative;
		padding: 0 32px;
		text-align: center;
		font-size: 18px;
		display: inline-block;
	}
	.voters_item_rank span {
		font-size: 12px;
		display: block;
		text-align: center;
	}
	.voters_item_rank em:before,
	.voters_item_rank em:after  {
		content: '';
		display: inline-block;
		width: 17px;
		height: 40px;
		position: absolute;
		top:50%;
		margin-top: -20px;
	}
		.voters_item:nth-child(1) .voters_item_rank em:before {
			background: url(/images/oakworker2017/memories_voters_rank_gold_left.png);
			left: 0;
		}
		.voters_item:nth-child(1) .voters_item_rank em:after {
			background: url(/images/oakworker2017/memories_voters_rank_gold_right.png);
			right: 0;
		}
		
		.voters_item:nth-child(2) .voters_item_rank em:before {
			background: url(/images/oakworker2017/memories_voters_rank_silver_left.png);
			left: 0;
		}
		.voters_item:nth-child(2) .voters_item_rank em:after {
			background: url(/images/oakworker2017/memories_voters_rank_silver_right.png);
			right: 0;
		}
		
		.voters_item:nth-child(3) .voters_item_rank em:before {
			background: url(/images/oakworker2017/memories_voters_rank_bronze_left.png);
			left: 0;
		}
		.voters_item:nth-child(3) .voters_item_rank em:after {
			background: url(/images/oakworker2017/memories_voters_rank_bronze_right.png);
			right: 0;
		}

	.voters_item_image {
		margin-top: 10px;
		order: 2;
		min-height: 0%;
	}
	.voters_item_image img {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}

	p.voters_item_title {
		order: 3;
		text-align: center;
		font-size: 14px;
		margin-top: 10px;
	}
	p.voters_item_title span {
		margin-top: 2px;
		display: block;
		border-top: 1px solid #2a2a2a;
		font-size: 12px;
	}

	.voters_item_comment_baloon,
	.rally_item_comment_baloon {
		order: 4;
		margin-top: 10px;
		text-align: right;
	}
	.voters_item_comment_baloon:after,
	.rally_item_comment_baloon:after {
		display: block;
		text-align: right;
		margin-top: 8px;
		content: url(/images/oakworker2017/memories_oak_san.gif);
		vertical-align: bottom;
	}

	.voters_item_comment_baloon span,
	.rally_item_comment_baloon span  {
		display: block;
		border: 1px solid #dedede;
		padding: 10px;
		position: relative;
		font-size: 12px;
		line-height: 1.6;
		position: relative;
		text-align: left;
	}
	.voters_item_comment_baloon span:after,
	.rally_item_comment_baloon span:after {
		display: block;
		content: '';
		background: url(/images/oakworker2017/memories_voters_baloon_arrow.gif) no-repeat left top;
		width: 18px;
		height: 18px;
		background-size: contain;
		position: absolute;
		bottom:-15px;
		right: 64px;
	}

	.rally_layout {
		display: flex;
		max-width: 840px;
		margin: 20px auto 0;
	}
	.rally_item_detail {
		margin-left: 40px;
		flex-grow: 1;
	}
	.rally_item_title {
		font-size: 14px;
		border-bottom: 1px solid #2a2a2a;
		padding-bottom: 4px;
	}
	.rally_item_title:before {
		vertical-align: middle;
		margin-right: 8px;
		content: url(/images/oakworker2017/memories_house_rally_crown.gif)
	}
	.rally_item_image img {
		max-width: 100%;
		height: auto;
	}

@media screen and (max-width: 1060px) {
	#memory_list .inner {
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media screen and (max-width: 640px) {
	#memory_list .sp_only {
		display: initial;
	}
	#memory_list .pc_only {
		display: none;
	}
	#memory_list .inner {
		padding: 40px 17px 60px;
	}
	#memory_list .lead_text {
		font-size: 12px;
		line-height: 1.375;
	}
	#memory_list .sort_navi {
		margin-top: 20px;
	}
	#memory_list .sort_navi > li > a {
		font-size: 12px;
		padding: 7px;
	}
	#memory_list .sort_navi > li > a:before {
		display: none;
	}
	#memory_list .filter-layer-scroll {
		margin: 15px;
		max-height: 250px;
	}
	#memory_list .filter-title {
		font-size: 12px;
		padding: 10px;
	}
	#memory_list .filter-list + .filter-title {
		margin-top: 15px;
	}
	#memory_list .filter-list {
		display: block;
		margin: 0;
		font-size: 13px;
	}
	#memory_list .filter-list > li {
		width: 100%;
		margin-left: 0;
	}
	#memory_list .filter-list > li > a {
		padding: 5px 15px 5px 10px;
		background-size: 3px 6px;
		background-position: right 10px center;
	}
	#memory_list .filter-error {
		font-size: 13px;
	}
	#memory_list .photo_list .item { 
		width: 33%;
		margin-left: 0.3%;
		margin-top: 2px;
	}
	#memory_list .photo_list .item.is-video:after {
		top: 3px;
		right: 3px;
	}
	#memory_list .photo_list .item:nth-child(4n+1) { 
		margin-left: 0.3%;
	}
	#memory_list .photo_list .item:nth-child(3n+1) { 
		margin-left: 0;
	}
	
	#voters,
	#rally {
		margin-top: 35px;
	}
	#rally {
		margin-top: 20px;
	}
	.voters_title,
	.rally_title  {
		padding: 10px 15px;
		font-size: 14px;
	}
	p.voters_lead,
	p.rally_lead {
		font-size: 12px;
		line-height: 1.25;
	}
	.voters_body,
	.rally_body {
		padding: 20px 14px 15px;
	}
	.voters_layout {
		display: block;
		margin-top: 20px;
	}
	.voters_item {
		margin-left: 0;
		width: 100%;
		max-width: none;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.voters_item + .voters_item {
		margin-top: 20px;
	}
	.voters_item_rank {
		width: 100%;
	}
	p.voters_item_title {
		order: 2;
		width: 100%;
	}
	p.voters_item_title span {
		margin-top: 0;
		border-top: none;
		line-height: 1;
	}
	.voters_item_image {
		width:39.06%;
		margin-top: 5px;
	}
	.voters_item_comment_baloon {
		margin-top: 5px;
		width:59.17%;
	}
	
	.voters_item_comment_baloon span,
	.rally_item_comment_baloon span  {
		line-height: 1.25;
	}
	.rally_layout {
		display: block;
	}
	.rally_item_detail {
		margin-left: 0;
	}
	.rally_item_image {
		text-align: center;
	}
	.rally_item_image img {
		max-width: 200px;
		width: 100%;
		height: auto;
	}
}

@keyframes fadeIn { 
	from {
		top:30px;
		opacity:0;
	} to {
		top:0;
		opacity:1;
	}
}
@keyframes layerFadeIn { 
	from {
		top: 50%;
		opacity:0;
	} 1% {
		display: block;
	} to {
		top:100%;
		opacity:1;
	}
}




#theme {
	border: 1px solid #fdd7bc;
	background: #fff;
	margin: 40px 0;
}

#theme a:hover{
	opacity: 0.7;
}



.theme_body {
	padding: 20px 29px;
}
	.theme_title  {
		padding: 15px;
		font-size: 16px;
		background: #fdd7bc;
		text-align: center;
	}

	.theme_layout{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		width: 930px;
		margin: 20px auto;
	}

	
	.theme_layout li{
			position: relative;
			border-bottom:2px solid #efeffe;
			margin: 0 0 30px 0;
			width: 47%;
	}

	.theme_subtitle{
		background: rgba(0,0,0,0.5);
		position: absolute;
		top: 22%;
		width: 100%;
		color: #fff;
		text-indent: 2em;
		padding: 20px 0;
	}

	.theme_img{
		width: 100%;
		height: 145px;
		overflow: hidden;
	}

	.theme_img img{
		width: 100%;
	}

	.theme_period{
		margin: 10px 0 20px 0;
	}


@media screen and (max-width: 840px) {
	.theme_layout{
		width: 100%;
		display: block;
	}
	.theme_layout li{
		width: 100%;
}
	.theme_subtitle{
		top: 24%;
		width: 100%;
		padding: 10px 0;
	}

	.theme_img{
		width: 100%;
		height: 140px;
		overflow: hidden;
	}

	.theme_img img{
		width: 100%;
	}

}

.theme_title_detail{
	position: relative;
	width: 100%;
	margin: 20px 0 0 0;
}

.theme_detail_subtitle{
	background: rgba(0,0,0,0.5);
	position: absolute;
	top: 26%;
	width: 100%;
	color: #fff;
	text-indent: 2em;
	padding: 20px 0;
}

.theme_detail_hush{
	font-size: 26px !important;
	margin: 0 0 10px 0;
}

.theme_detail_img{
	width: 100%;
	height: 300px;
	overflow: hidden;
}

.theme_detail_img img{
	width: 100%;
}

.back_link{
	padding: 5px 0 0 10px;
}

.back_link a{
	color: #f94e4a;
}
.back_link::before{
	content: url("/images/oakworker2017/arrow_back.png");
	padding: 0 10px 0 0;
}

@media screen and (max-width: 840px) {
	.theme_detail_subtitle{
		background: rgba(0,0,0,0.5);
		position:  absolute;
		top:10%;
		width: 100%;
		color: #fff;
		text-indent: 0;
		padding: 20px 0;
	}

	.theme_detail_subtitle p{
		width: 90%;
		margin: auto;


	}

	.theme_detail_img{
		height: auto;
	}


	.theme_detail_period{
		font-size: 12px !important;
	}

	.theme_detail_hush{
		font-size: 18px !important;
		margin: 0 0 10px 0;
	}
}