@charset "utf-8";

/* --------------------------------------------------------------------------------
	商品詳細 - ズーム
-------------------------------------------------------------------------------- */
/*body { padding:10px 25px }*/

#viewer {
position:relative;
left:0px;
top:0px;
/*width:670px;
height:495px;*/
border:0px #666 solid;
/*background-color:#eeeeee;*/
overflow:hidden;
}
#view1 {
/*position:absolute;*/
margin:0px;
padding:0px;
/*left:5px;*/
top:20px;
/*width:495px;
height:333px;*/
border:1px #bbb solid;
overflow:hidden;
background-color:#ffffff;
}
#view2 {
/*position:absolute;*/
margin:0px;
padding:0px;
/*left:5px;*/
top:20px;
/*width:495px;
height:333px;*/
border:1px #bbb solid;
overflow:hidden;
background-color:#ffffff;
}
#rightnavi {
/*position:absolute;
left:505px;
top:20px;
width:165px;
height:225px;*/
border:0px #666 solid;
/*background-color:#eeeeee;*/
overflow:hidden;
}
#rightnavi2 {
/*position:absolute;
left:505px;
top:260px;
width:165px;
height:110px;*/
border:0px #666 solid;
/*background-color:#eeeeee;*/
overflow:hidden;
/* cursor:pointer;*/
}
#bottomavi {
/*position:absolute;
left:5px;
top:373px;
width:668px;
height:90px;*/
border: 0px black solid;
/*background-color:#eeeeee;*/
overflow:hidden;
}
#zoomico {
position:absolute;
/*left:450px;*/
top:30px;
}
#topico {
position:absolute;
left:250px;
top:30px;
}
#rightico {
position:absolute;
/*left:475px;*/
top:170px;
}
#leftico {
position:absolute;
left:15px;
top:170px;
}
#bottomico {
position:absolute;
left:250px;
/*top:330px;*/
}

#title1 {
/*position:absolute;
left:505px;
top:5px;*/
	margin: 0 6px;
font-weight: bold; 
font-size:11px; 
color:#555;
}

#title2 {
/*position:absolute;
left:5px;
top:358px;*/
	margin: 0 6px;
font-weight: bold; 
font-size:11px; 
color:#555;
}

#title3 {
/*position:absolute;
left:505px;
top:245px;*/
	margin: 0 6px;
font-weight: bold; 
font-size:11px; 
color:#555;
}

#title4 {
/*position:absolute;
left:5px;
top:450px;
width:660px;
font-weight: bold; */
	margin: 1em 0 0 0;
	padding: 0 0.5em;
font-size:10.5px; 
color:#555;
}
#title4 hr { border-style: dotted; border-color: #555; }

#color {
position:absolute;
left:20px;
/*top:335px;*/
font-size:11px; 
color:#333333;
}
#angle {
position:absolute;
left:160px;
/*top:335px;*/
font-size:11px; 
color:#333333;
}

#color0 { /*position:absolute; top:0; left:0px;*/  border:1px solid #bbb; width:75px; height:50px; overflow:hidden; /*background-color:#eeeeee;*/ }
#color0 img { border:none; cursor:pointer; }
#color1 { /*position:absolute; top:0; left:80px;*/ border:1px solid #bbb; width:75px; height:50px; overflow:hidden; /*background-color:#eeeeee;*/ }
#color1 img { border:none; cursor:pointer; }
#color2 { /*position:absolute; top:55px; left:0px;*/ border:1px solid #bbb; width:75px; height:50px; overflow:hidden; /*background-color:#eeeeee;*/ }
#color2 img { border:none; cursor:pointer; }
#color3 { /*position:absolute; top:55px; left:80px;*/ border:1px solid #bbb; width:75px; height:50px; overflow:hidden; /*background-color:#eeeeee;*/ }
#color3 img { border:none; cursor:pointer; }
#color4 { /*position:absolute; top:110px; left:0px;*/ border:1px solid #bbb; width:75px; height:50px; overflow:hidden; /*background-color:#eeeeee;*/ }
#color4 img { border:none; cursor:pointer; }
#color5 { /*position:absolute; top:110px; left:80px;*/ border:1px solid #bbb; width:75px; height:50px; overflow:hidden; /*background-color:#eeeeee;*/ }
#color5 img { border:none; cursor:pointer; }
#color6 { /*position:absolute; top:165px; left:0px;*/ border:1px solid #bbb; width:75px; height:50px; overflow:hidden; /*background-color:#eeeeee;*/ }
#color6 img { border:none; cursor:pointer; }
#color7 { /*position:absolute; top:165px; left:80px;*/ border:1px solid #bbb; width:75px; height:50px; overflow:hidden; /*background-color:#eeeeee;*/ }
#color7 img { border:none; cursor:pointer; }

#gallery0 { /*position:absolute; top:0; left:0px;*/  border:1px solid #bbb; width:75px; height:50px; overflow:hidden; }
#gallery0 img { border:none; cursor:pointer; }
#gallery1 { /*position:absolute; top:0; left:80px;*/ border:1px solid #bbb; width:75px; height:50px; overflow:hidden; }
#gallery1 img { border:none; cursor:pointer; }
#gallery2 { /*position:absolute; top:55px; left:0px;*/ border:1px solid #bbb; width:75px; height:50px; overflow:hidden; }
#gallery2 img { border:none; cursor:pointer; }
#gallery3 { /*position:absolute; top:55px; left:80px;*/ border:1px solid #bbb; width:75px; height:50px; overflow:hidden; }
#gallery3 img { border:none; cursor:pointer; }

#angle0 { /*position:absolute; top:0; left:0px;*/  border:1px solid #bbb; width:105px; height:70px; overflow:hidden; }
#angle0 img { border:none; cursor:pointer; }
#angle1 { /*position:absolute; top:0; left:110px;*/ border:1px solid #bbb; width:105px; height:70px; overflow:hidden; }
#angle1 img { border:none; cursor:pointer; }
#angle2 { /*position:absolute; top:0px; left:220px;*/ border:1px solid #bbb; width:105px; height:70px; overflow:hidden; }
#angle2 img { border:none; cursor:pointer; }
#angle3 { /*position:absolute; top:0px; left:330px;*/ border:1px solid #bbb; width:105px; height:70px; overflow:hidden; }
#angle3 img { border:none; cursor:pointer; }
#angle4 { /*position:absolute; top:0px; left:440px;*/ border:1px solid #bbb; width:105px; height:70px; overflow:hidden; }
#angle4 img { border:none; cursor:pointer; }
#angle5 { /*position:absolute; top:0px; left:550px;*/ border:1px solid #bbb; width:105px; height:70px; overflow:hidden; }
#angle5 img { border:none; cursor:pointer; }

#view1 img { border:none; }
/*a { color:gray; font-size:11px; }*/
#view2 img { border:none; }
#zoomico img { border:none; }
#topico img { border:none; }
#rightico img { border:none; }
#leftico img { border:none; }
#bottomico img { border:none; }


/* ----------- 
NEW (by dis)
--------------*/
#viewer {
	max-width: 100%;
}

#view1 {
	max-width: 100%;
	margin: 0 6px;
	top: 0;
	position: relative;
}

#view1 i {
	font-size: 200%;
	color: #999;
}

#view1 a:hover i {
	color: #ccc;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

#view1 .inner {
	width: auto;
	max-width: 100%;
	position: relative;
	text-align: center;
}

#view2 {
	max-width: 100%;
	margin: 0 6px;
	top: 0;
	position: relative;
}

#view2 a:hover i {
	color: #ccc;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

#view2 .inner {
	width: auto;
	max-width: 100%;
	position: relative;
	text-align: center;
}

#view2 #zoom-img {
	max-width: none!important;
	position: absolute;
	top: 0;
	left: 0;
}

#view2-wrap #zoomico {
	top: 5px;
	right: 5px;
	z-index: 99;
}

#topico {
	top: 5px;
	left: 49%;
}

#bottomico {
	bottom: 0;
	left: 49%;
}

#leftico {
	top: 47%;
	left: 5px;
}

#rightico {
	top: 47%;
	right: 5px;
}

#zoomico {
	top: 5px;
	right: 11px;
	font-size: 200%;
	z-index: 9;
}

#zoomico a {
	color: #999;
}

#color {
	margin: 0 10px 0 6px;
	position: static;
	display: inline;
}

#annotation {
	text-align: center;
}

#annotation * {
	display: inline!important;
}

#angle {
	margin: 0 10px 0 6px;
	position: static;
	display: inline;
}

#rightnavi {
}

#angle-box #bottomavi,
#color-box #rightnavi,
#gallery-box #rightnavi2 {
	margin: 0 0 0 4px;
}

#angle-box #bottomavi div,
#color-box #rightnavi div,
#gallery-box #rightnavi2 div {
	width: 35px;
	height: auto;
	margin: 0 2px 4px 2px;
	padding: 5px 0;
	background: #fff;
	text-align: center;
	float: left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

#angle-box #bottomavi div img,
#color-box #rightnavi div img,
#gallery-box #rightnavi2 div img {
	width: 33px;
	height: 22px;
}

@media only screen and (min-width: 600px) {
#view1 {
	width: auto;
}
#view2 {
	width: auto;
}

#angle-box #bottomavi div,
#color-box #rightnavi div,
#gallery-box #rightnavi2 div {
	width: 67px;
}

#angle-box #bottomavi div img,
#color-box #rightnavi div img,
#gallery-box #rightnavi2 div img {
	width: 65px;
	height: 43px;
}
}

@media only screen and (min-width: 768px) and (max-width: 768px) {
#view1 {
	width: 421px;
}
#view2 {
	width: 421px;
}

#title4 {
	margin: 0 0 0 7px;
}
}