@charset "UTF-8";


/* -------------------------------------------------------------------------- **
**  YAKUMONO LAYOUT
** -------------------------------------------------------------------------- */
#body #content {
	text-align: left;
	}
#body .content-inner {
	width: 940px;
	margin: 0;
	padding-bottom: 75px;
	}

			#main #sidecol .pnav li a {
				background: transparent url(../images/yakumono/pnav.png) left top no-repeat;
				}
			#main #sidecol .pnav li.pnav1 a { background-position: 0px 0px; }
			#main #sidecol .pnav li.pnav2 a { background-position: 0px -70px; }
			#main #sidecol .pnav li.pnav3 a { background-position: 0px -140px; }
			#main #sidecol .pnav li.pnav4 a { background-position: 0px -210px; }
			#main #sidecol .pnav li.pnav5 a { background-position: 0px -280px; }
			
			#main #sidecol .pnav li.pnav1 a:hover { background-position: -300px 0px; }
			#main #sidecol .pnav li.pnav2 a:hover { background-position: -300px -70px; }
			#main #sidecol .pnav li.pnav3 a:hover { background-position: -300px -140px; }
			#main #sidecol .pnav li.pnav4 a:hover { background-position: -300px -210px; }
			#main #sidecol .pnav li.pnav5 a:hover { background-position: -300px -280px; }

#view {
	position: relative;
	width: 650px;
	height: 492px;
	background: transparent url(../images/yakumono/view.jpg) left top no-repeat;
	}

	#view .views-content,
	#view .pnav {
		position: absolute;
		top: 0;
		left: 0;
		list-style: none;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		}
	#view .views-content { z-index: 10; }
	#view .pnav { z-index: 15; }
		#view .views-content li {
			position: absolute;
			display: none;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: transparent url(../images/yakumono/view.jpg) left top no-repeat;
			text-indent: -999em;
			overflow: hidden;
			}
		#view .views-content li.selected { display: block; }
		#view .views-content li.vc1 { background-image: url(../images/yakumono/view_1.jpg); }
		#view .views-content li.vc2 { background-image: url(../images/yakumono/view_2.jpg); }
		#view .views-content li.vc3 { background-image: url(../images/yakumono/view_3.jpg); }
		#view .views-content li.vc4 { background-image: url(../images/yakumono/view_4.jpg); }
		#view .views-content li.vc5 { background-image: url(../images/yakumono/view_5.jpg); }

	#view .pnav {
		background: transparent url(../images/yakumono/vnav_bg.png) left top no-repeat;
		}
		#view .pnav li { position: absolute; width: 150px; height: 50px; }
		#view .pnav li.pnav1 { left: 473px; top: 68px; }
		#view .pnav li.pnav2 { left: 9px; top: 166px; }
		#view .pnav li.pnav3 { left: 9px; top: 116px; }
		#view .pnav li.pnav4 { left: 467px; top: 158px; }
		#view .pnav li.pnav5 { left: 423px; top: 308px; width: 225px; height: 50px; }
			#view .pnav li a {
				display: block;
				width: 100%;
				height: 0;
				margin: 0;
				padding: 0;
				padding-top: 50px;
				background: transparent url(../images/yakumono/vnav.png) left top no-repeat;
				text-decoration: none;
				overflow: hidden;
				}
				#view .pnav li.pnav1 a { background-position: 0px 0px; }
				#view .pnav li.pnav2 a { background-position: 0px -50px; }
				#view .pnav li.pnav3 a { background-position: 0px -100px; }
				#view .pnav li.pnav4 a { background-position: 0px -150px; }
				#view .pnav li.pnav5 a { background-position: 0px -200px; }
				#view .pnav li.pnav1 a:hover { background-position: -250px 0px; }
				#view .pnav li.pnav2 a:hover { background-position: -250px -50px; }
				#view .pnav li.pnav3 a:hover { background-position: -250px -100px; }
				#view .pnav li.pnav4 a:hover { background-position: -250px -150px; }
				#view .pnav li.pnav5 a:hover { background-position: -250px -200px; }


.views-field.view1,
.views-field.view2,
.views-field.view3,
.views-field.view4,
.views-field.view5 {
	width: 650px;
	height: 0px;
	margin: 0;
	font-size: 1em; 
	line-height: 400px;
	overflow: hidden;
	}
.views-field.view1 { padding-top: 297px; background: transparent url(../images/yakumono/view1.jpg) center top no-repeat; }
.views-field.view2 { padding-top: 345px; background: transparent url(../images/yakumono/view2.jpg) center top no-repeat; }
.views-field.view3 { padding-top: 244px; background: transparent url(../images/yakumono/view3.jpg) center top no-repeat; }
.views-field.view4 { padding-top: 244px; background: transparent url(../images/yakumono/view4.jpg) center top no-repeat; }
.views-field.view5 { padding-top: 250px; background: transparent url(../images/yakumono/view5.jpg) center top no-repeat; }


.ie .views-field h2 { visibility: hidden; }

/* -------------------------------------------------------------------------- **
**  CONTENT RETINA
** -------------------------------------------------------------------------- */
@media only screen and (min-device-pixel-ratio:1.5),
	only screen and (-o-min-device-pixel-ratio:3/2),
	only screen and (-ms-min-device-pixel-ratio:1.5),
	only screen and (min--moz-device-pixel-ratio:1.5),
	only screen and (-webkit-min-device-pixel-ratio:1.5) {
		#main #sidecol .pnav li a { background-image: url(../images/yakumono/pnav_2x.png); background-size: 600px auto; }
		#view { background-image: url(../images/yakumono/view_2x.jpg); background-size: 650px auto; }
		
		#view .pnav { background-image: url(../images/yakumono/vnav_bg_2x.png); background-size: 650px auto; }
		#view .pnav li a { background-image: url(../images/yakumono/vnav_2x.png); background-size: 500px auto; }
		
		#view .views-content li { background-size: 650px auto; }
		#view .views-content li.vc1 { background-image: url(../images/yakumono/view_1_2x.jpg); }
		#view .views-content li.vc2 { background-image: url(../images/yakumono/view_2_2x.jpg); }
		#view .views-content li.vc3 { background-image: url(../images/yakumono/view_3_2x.jpg); }
		#view .views-content li.vc4 { background-image: url(../images/yakumono/view_4_2x.jpg); }
		#view .views-content li.vc5 { background-image: url(../images/yakumono/view_5_2x.jpg); }
		.views-field.view1,
		.views-field.view2,
		.views-field.view3,
		.views-field.view4,
		.views-field.view5 { background-size: 650px auto; }
		.views-field.view1 { background-image: url(../images/yakumono/view1_2x.jpg); }
		.views-field.view2 { background-image: url(../images/yakumono/view2_2x.jpg); }
		.views-field.view3 { background-image: url(../images/yakumono/view3_2x.jpg); }
		.views-field.view4 { background-image: url(../images/yakumono/view4_2x.jpg); }
		.views-field.view5 { background-image: url(../images/yakumono/view5_2x.jpg); }
	}