/* =================================
	Extra CSS
================================= */

.extra_p div.wrap > div.contents {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background-color: none!important;
}
@media all and (min-width: 768px) {
.extra_p div.wrap > div.contents {
	padding:40px 32px;
}
}
@media all and (max-width: 767px) {
.extra_p div.wrap > div.contents {
	padding:20px 10px;
}
}


div.copy p, p.clicktodetail {
	line-height:1.5;
	text-align:center;
	margin-bottom:1.5em;
}
div.copy p {
	font-weight:bold;
}
div.copy p > span {
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, hsla(60,100%,65%,0.9)), to(hsla(60,100%,65%,0.9)));
	background-image: linear-gradient(transparent 50%, hsla(60,100%,65%,0.9) 50%);
}
@media all and (min-width: 768px) {
p.clicktodetail {
	font-size:87.5%;
}
}
@media all and (max-width: 767px) {
div.copy p {
	font-size:87.5%;
}
p.clicktodetail {
	font-size:83%;
}
}


div.contents div.thumb ul li {
	float:left;
}
div.contents div.thumb ul li a,
div.contents div.thumb ul li a span,
div.contents div.thumb ul li a img {
	display:block;
}
div.contents div.thumb ul li a {
	text-align:center;
	text-decoration:none;
	line-height:1.5;
	color:#000;
	background-color:#fef200;
}
div.contents div.thumb ul li a > span {
	position:relative;
	height:0;
	padding-top:56.25%;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}
div.contents div.thumb ul li a > span.lazy-done {
	-webkit-animation: fadeIn 700ms;
	animation: fadeIn 700ms;
}
div.contents div.thumb ul li a > span img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
div.contents div.thumb ul li a dl dd {
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, hsla(0,0%,100%,0.5)), to(hsla(0,0%,100%,0.5)));
	background-image: linear-gradient(transparent 50%, hsla(0,0%,100%,0.5) 50%);
}
@media all and (min-width: 768px) {
div.contents div.thumb {
	margin-bottom:30px;
}
div.contents div.thumb ul li {
	width:25%;
	margin-bottom:9px;
}
div.contents div.thumb ul li:nth-child(4n-3) > div {
	padding-right:6px;
}
div.contents div.thumb ul li:nth-child(4n-2) > div {
	padding-left:3px;
	padding-right:4px;
}
div.contents div.thumb ul li:nth-child(4n-1) > div {
	padding-left:4px;
	padding-right:2px;
}
div.contents div.thumb ul li:nth-child(4n) > div {
	padding-left:6px;
}
div.contents div.thumb ul li a {
	padding:8px;
}
div.contents div.thumb ul li a > span {
	margin-bottom:8px;
}
div.contents div.thumb ul li a dl dt {
	font-size:87.5%;
}
}
@media all and (max-width: 767px) {
div.contents div.thumb {
	margin-bottom:15px;
}
div.contents div.thumb ul li {
	margin-bottom:6px;
}
div.contents div.thumb ul li a {
	padding:4px;
}
div.contents div.thumb ul li a > span {
	margin-bottom:4px;
}
div.contents div.thumb ul li a dl dt {
	font-size:83%;
}
div.contents div.thumb ul li a dl dd {
	font-size:87.5%;
}
}
@media all and (min-width: 481px) and (max-width: 767px) {
div.contents div.thumb ul li {
	width:33.333333333333333%;
}
div.contents div.thumb ul li:nth-child(3n-2) > div {
	padding-right:4px;
}
div.contents div.thumb ul li:nth-child(3n-1) > div {
	padding-left:2px;
	padding-right:2px;
}
div.contents div.thumb ul li:nth-child(3n) > div {
	padding-left:4px;
}
}
@media all and (max-width: 480px) {
div.contents div.thumb ul li {
	width:50%;
}
div.contents div.thumb ul li:nth-child(odd) > div {
	padding-right:3px;
}
div.contents div.thumb ul li:nth-child(even) > div {
	padding-left:3px;
}
}


/* =================================
	wop
================================= */

div.bx-wop {
	text-align:left;
	position:absolute;
	left:50%;
	z-index:5200;
}
div.bx-w-extra {
	background-color:#fff;
}
div.bx-w-extra figure {
	position:relative;
	height:0;
	padding-top:56.25%;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}
div.bx-w-extra figure#extra12 {
	padding-top:72.4489795918367%;
}
div.bx-w-extra figure img {
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
div.bx-w-extra dl {
	text-align:center;
	line-height:1.5;
}
div.bx-w-extra dl dd {
	font-weight:bold;
}
@media all and (min-width: 768px) {
div.bx-wop {
	width:760px;
	margin-left:-380px;
}
div.bx-w-extra {
	padding:20px;
	margin-bottom:12px;
}
div.bx-w-extra figure {
	margin-bottom:20px;
}
}
@media all and (max-width: 767px) {
div.bx-wop {
	width:90%;
	margin-left:-45%;
}
div.bx-w-extra {
	margin-bottom:10px;
}
div.bx-w-extra dl dt, div.bx-w-extra dl dd {
	font-size:87.5%;
}
}
@media all and (min-width: 375px) and (max-width: 767px) {
div.bx-w-extra {
	padding:12px;
}
div.bx-w-extra figure {
	margin-bottom:12px;
}
}
@media all and (max-width: 374px) {
div.bx-w-extra {
	padding:6px;
}
div.bx-w-extra figure {
	margin-bottom:6px;
}
}



div.bx-wop p.btn-w-close a, div.bx-wop p.btn-w-close a:after, div.bx-wop div.bx-wop-btn ul li a {
	display:block;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
div.bx-wop p.btn-w-close a:after, div.bx-wop div.bx-wop-btn ul li a {
	background-image:url(../img/btn_wop.svg);
	background-repeat:no-repeat;
}
div.bx-wop p.btn-w-close a {
	cursor:default;
	width:100%;
	height:38px;
	position:relative;
}
div.bx-wop p.btn-w-close a:after {
	content:"";
	background-position:0 -80px;
	width:38px;
	height:38px;
	position:absolute;
	right:0;
	top:0;
}
div.bx-wop div.bx-wop-btn ul li a, div.bx-wop p.btn-w-close a:after {
	background-size:75px 200px;
}
div.bx-wop div.bx-wop-btn {
	width:154px;
	height:50px;
	margin:0 auto;
}
div.bx-wop div.bx-wop-btn ul {
	list-style-type:none;
	position:absolute;
}
div.bx-wop div.bx-wop-btn ul li {
	display:block;
	float:left;
}
div.bx-wop div.bx-wop-btn ul li:first-child {
	margin-right:6px;
}
div.bx-wop div.bx-wop-btn ul li {
	background-color:#000;
}
div.bx-wop div.bx-wop-btn ul li a {
	width:74px;
	height:38px;
}
div.bx-wop div.bx-wop-btn ul li.btn-w-next a {
	background-position:0 -160px;
}
div.bx-wop div.bx-wop-btn ul li.btn-w-prev a {
	background-position:0 -120px;
}