@charset "utf-8";
html, body {
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	font-size:15px;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	color:#444;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td{
	margin:0;padding:0;
}
table{
    border-collapse:collapse;border-spacing:0;
}
fieldset,img{ border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
    font-style:normal;font-weight:normal;
}
li { list-style:none; /* margin-bottom: 5px; */
} caption,th{ text-align:left;
}
li img,dt img,dd img{
vertical-align:bottom;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{ content:'';
}
abbr,acronym{ border:0;font-variant:normal;
}
sup{ vertical-align:text-top;
}
sub{ vertical-align:text-bottom;
}
input,textarea,select{ font-family:inherit;font-size:inherit;font-weight:inherit;
}
input,textarea,select{ *font-size:100%;
}
legend{ color:#000;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	line-height: 0;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html.clearfix { height: 1%;
}
.clearfix { display: block;
}

body{
	position:absolute;
	width:100%;
	height: 100%;
	top: 0;
	-webkit-text-size-adjust: 100%;
	background: #e4e3de;
}
.cts {
	width: 100%;
	position: relative;
	height: 0;
	padding-bottom: 61%;
	display:none;
	overflow: hidden;
}
.cts img{
	opacity:0;
}

/*============================
#contents
============================*/
#contents {
	width: 100%;
	position: relative;
	background:url(../images/bg.jpg) no-repeat;
	background-size: contain;
	margin: auto;
	max-width: 1000px;
	opacity: 0;
	height: 100%;
	max-height: 610px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
#contents img{
	height:auto;
	opacity: 0;
}
#contents .sh {
	position: absolute;
	margin: 3.1% 0 0 3.4%;
	width: 5.2%;
	opacity: 0;
}
#contents .close {
	position: absolute;
	margin: 0 0 0 94%;
	top: -5.6%;
	width: 6%;
	opacity: 1;
	cursor: pointer;
}
#contents .top {
	position: absolute;
	margin: 0;
	top: -6%;
	width: 13.1%;
	opacity: 1;
	cursor: pointer;
	display: none;
}
#contents .top.sh {
	position: absolute;
	margin: 0 0 0 85.4%;
	top: 3.6%;
	width: 12.4%;
	opacity: 1;
	cursor: pointer;
	z-index: 10;
}
#white{
	position:absolute;
	width:100%;
	height: 100%;
	max-width:1000px;
	max-height:610px;
	background-color:#eee;
	z-index:10;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	opacity:0;
}


/*============================
#opening
============================*/
#opening {
	display: block;
	opacity: 0;
}
#opening h1 {
	padding: 15.3% 0 0 23.4%;
}
#opening h1 img{
	width: 12%;
}
#opening p {
	margin: 3.7% 0 0 23.3%;
}
#opening p img{
	width: 26.4%;
}
#opening .btn {
	cursor: pointer;
	position: relative;
	margin: 4.9% 0 0 23.5%;
}
#opening .bg {
	width: 21%;
}
#opening .txt {
	position: absolute;
	top: 0;
	left: 0;
	padding: 1.7% 0 0 5.6%;
	width: 7.7%;
}
#opening .visual {
	position: absolute;
	top: 0;
	margin: 8.78% 0 0 52.4%;
	width: 36.6%;
}
#opening .visual img{
	position: absolute;
	top: 0;
	left:0;
}
#opening .i1 {
	width: 100%;
}
#opening .i2 {
	width: 42%;
	padding: 38.1% 0 0 15.4%;
}
img.i3 {
	width: 24.9%;
	padding: 37.4% 0 0 26.8%;
}

/*============================
#select
============================*/
#select {
	-webkit-transform-style: flat;
}
#select h2 {
	padding: 13.3% 0 0 11.4%;
}
#select li {
}
#select ul {
}
#select .q {
	margin-bottom: -1.8%;
	width: 5.4%;
}
#select .tl {
	margin: 0 0 0 -0.7%;
	width: 30.4%;
}
#select .sel {
	margin: 2.4% 0 0 14.39%;
}
#select .sel li {
	position: relative;
	margin-bottom: 0;
	cursor: pointer;
}
#select .sel li img{
	width: 40.9%;
}
#select .ov {
	position: absolute;
	left: 0;opacity: 0;
}
#select .check {
	-webkit-transform-style: flat;
	position: absolute;
	top: 0;
	left: 0;
	padding: 20.4% 0 0 14.7%;
	width: 1.7%;
	overflow:hidden;
}
#select .check img{
	width: 100%;
}
#select .btn {
	position: relative;
	margin: 8.1% 0 0 37.8%;
	cursor: pointer;
	z-index: 1;
	display:block;
}
#select .btn .bg {
	width: 41.3%;
}
#select .btn .txt {
	position: absolute;
	top: 0;
	left: 0;
	padding: 2.2% 0 0 8.2%;
	width: 23.2%;
}

#select .graph {
	position:absolute;
	top: 0;
	width: 27.8%;
	margin: 0 0 0 57.7%;
	padding-top: 13.2%;
}
#select .img {
	width:100%;
	height: 0;
	padding-bottom: 95.2%;
	overflow: hidden;
	position: absolute;
}
#select .img img{
	position:absolute;
	width: 100%;
}
#select .graph ul {
	position: relative;
	height: 280px;
}
#select .graph .delta {
	position:absolute;
	top: 0;
	width: 100%;
}
#select .graph .delta img{
	position: absolute;
	width: 100%;
	top: 0;
	left:0;
}
#select .ref {
	padding: 95.1% 0 0 4.2%;
	position: absolute;
	width: 91.5%;
}
#select .graph li {
	position: absolute;
	width: 100%;
	cursor: pointer;
}
#select .l1 {
	margin: -4.4% 0 0 42.9%;
	top: -17px;
}
#select .l1 img{
	width: 12.6%;
}
#select .l2 {
	margin: 37.6% 0 0 -17.5%;
	top: -17px;
}
#select .l2 img{
	width: 13.5%;
}
#select .l3 {
	margin: 38% 0 0 103.4%;
	top: -17px;
}
#select .l3 img{
	width: 12.8%;
}
#select .l4 {
	margin: 98.9% 0 0 -2.4%;
}
#select .l4 img{
	width: 45.1%;
}
#select .l5 {
	margin: 98.4% 0 0 69.8%;
}
#select .l5 img{
	width: 25.1%;
}

/*============================
#result
============================*/
#result {	

}
#result h2 {
	padding: 10.5% 0 0 22.9%;
}
#result h2 img {
	width:71.5%}
#result p {
	text-align: center;
	padding: 0% 0 5%;
	font-size: 1em;
	left: -9999px;
	position: relative;
}
#result p span{
	position:relative;
	bottom:1px;
}
#result p br{
	display:none;
}
#result ul {
	width:100%;
	font-size: 0;
	line-height: 0;
}
#result li {
	display: inline-block;
	cursor: pointer;
}
#result .img {
	margin: 0 0 -1.9% 12.6%;
}
#result .img li{
	width: 12.3%;
}
#result li img{
	width:100%;
}
#result .name {
	padding: 1.1% 0 0 14.2%;
	position: relative;
}
#result .name li{
	width: 10.7%;
	padding-right: 1.6%;
}
#result .step {
	padding: 0 0 0 14.2%;
}
#result .step li{
	width: 10.65%;
	margin-right: 1.65%;
}
#result .step li {
}
#result .icon {
	padding: 1.2% 0 0 13.1%;
}
#result .icon li {
	width: 12.31%;
	text-align:center;
}
#result .icon li img.l2 {
	width: 14.1%;
}
#result .icon li img.l1 {
	width: 31%;
}

/*============================
#product
============================*/
#product {

}
#product .left {
	position:relative;
	margin: 7.9% 0 0 15.3%;
	width: 29%;
}
#product .left li {
}
#product .viewer {
	width: 100%;
	height: 0;
	padding-bottom: 130%;
	overflow: hidden;
	position: relative;
}
#product .viewer span{
	position: absolute;
	top: 0;
	width:100%;
	height:100%;
}
#product .viewer .img {
	position: relative;
	width:100%;
}
#product .viewer .img.move {
	cursor:move;
}
#product .zoom {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 11%;
	cursor: pointer;
}
#product .thumb {
	position:relative;
	margin-top: 3.6%;
	width: 100%;
	z-index: 3;
}
#product .thumb .scr{
	width: 100%;
	overflow:hidden;
	height: 0;
	padding-bottom: 23%;
	padding-right: 1px;
	position: relative;
	z-index: 1;
}
#product .thumb ul{
	width:200%;
}
#product .thumb li {
	position:relative;
	float: left;
	width: 10.85%;
	margin-right: -2px;
	border: #babab8 1px solid;
	margin-left: 2.1%;
}
#product .thumb li.first {
	margin-left: 0;
	border: #7b1a24 1px solid;
}
#product .thumb li img{
	width: 100%;
	cursor: pointer;
}
#product .arrow {
	position: absolute;
	top:0;
	margin-top: 0.2%;
	cursor:pointer;
	opacity:0;
	white-space: nowrap;
	width: 100%;
	height: 100%;
}
#product .arrow .al{
	margin-left: -7%;
	width: 8.1%;
	opacity:0;
}
#product .arrow .ar{
	position: absolute;
	margin-left: 99%;
	width: 8.1%;
	top: 0;
}
#product .right {
	clear: both;
	position: absolute;
	bottom: 13%;
	margin: 0% 0 0 50%;
	width: 35.8%;
}
#product .right h2 {
	margin-left: -0.8%;
}
#product .right h2 img{
	width: 100%;
}
#product .right h3 {
	margin: 6.5% 0 2.2%;
	font-size: 1.03em;
	letter-spacing: 0.01em;
}
#product .right h3 span{
	/* padding-left: 1em; */
	font-size:0.93em;
	margin-left: 1em;
}
#product .right p {
	font-size: 0.85em;
	margin-bottom: 0.2em;
	line-height: 1.57em;
}
#product .right p sub{
	line-height: 1.57em;
	position: relative;
	top: -3px;
	left: -1px;
	margin-right: 2px;
}
.amount {
}
#product .right h4 {
}
#product .amount {
	position: relative;
	font-size: 0.8em;
	margin-left: -0.8%;
}
#product .amount .img{
	margin-right: 2%;
	margin-bottom: -0.1%;
	width: 26.3%;
}
#product .amount.i2 .img{
	margin: 0.1% 0 -0.3% 0.2%;
	width: 26.1%;
}
#product .amount.i3 .img{
	margin: 8% 0px 8.8%;
	width: 29.6%;
}
#product .amount.i4 .img{
	margin: 2.1% 0 1.3% -0.8%;
	width: 26.1%;
}
#product .amount.i5 .img{
	margin: 3.7% 0 6.1% 0.2%;
	width: 16.3%;
}
#product .amount.i6 .img{
	margin: 5.5% 0 6.2% 0.2%;
	width: 12.2%;
}
#product .amount.i7 .img{
	margin: 4.1% 0 3.8% -0.2%;
	width: 27.1%;
}
#product .amount.i8 .img{
	margin: 7.5% 0 10% 0.2%;
	width: 12.1%;
}
#product .amount.i9 .img{
	margin: 3.9% 0 5.1% 0.2%;
	width: 14.1%;
}
#product .amount.i10 .img{
	margin: 4.1% 0 7.5% 0.2%;
	width: 19.9%;
}
#product .amount.i11 .img{
	margin: 4.1% 0 7.5% 0.2%;
	width: 19.9%;
}
#product .amount.i12 .img{
	margin: 3.3% 0 3.3% -0.2%;
	width: 21.9%;
}
#product .amount.i13 .img{
	margin: 4.1% 0 5.3% -0.4%;
	width: 18.3%;
}
#product .amount.i14 .img{
	margin: 5.7% 0 2.7% -1.5%;
	width: 21.3%;
}
#product .meyasu {
	position: absolute;
	top: 0;
	margin: 0 0 0 28.7%;
	padding-top: 5.8%;
	line-height: 1.5em;
}
#product .amount.i2 .meyasu {
	padding-top:  5.3% ;margin-left:30.7%;
}
#product .amount.i3 .meyasu {
	padding-top:  7.8% ;margin-left:33.7%;
}
#product .amount.i4 .meyasu {
	padding-top:  5.3% ;margin-left:29.7%;
}
#product .amount.i5 .meyasu {
	padding-top:  6.4% ;margin-left:21.7%;
}
#product .amount.i6 .meyasu {
	padding-top:  5.9% ;margin-left:17.7%;
}
#product .amount.i7 .meyasu {
	padding-top:  7.8% ;margin-left:30.7%;
}
#product .amount.i8 .meyasu {
	padding-top:  8.3% ;margin-left:17.7%;
}
#product .amount.i9 .meyasu {
	padding-top:  5.3% ;margin-left:19.7%;
}
#product .amount.i10 .meyasu {
	padding-top:  7.8% ;margin-left:24.7%;
}
#product .amount.i11 .meyasu {
	padding-top: 8.4%;
	margin-left:24.7%;
}
#product .amount.i12 .meyasu {
	padding-top:  5.8% ;margin-left:25.7%;
}
#product .amount.i13 .meyasu {
	padding-top:  5.8% ;margin-left:21.7%;
}
#product .amount.i14 .meyasu {
	padding-top:  7.8% ;margin-left:22.7%;
}
#product .amount .meyasu {
	padding-top:  5.3% ;margin-left:29.7%;
}
#product .meyasu span {
display:block;padding-top: 3%;border-top: #9b9a97 1px solid;color: #7a1b24;
line-height: 1.4em;}
#product .icon {
	position: absolute;
	top: 0;
	padding-top: 8% ;margin-left:35.2%;
	width: 11.7%;
}
#product .amount.i2 .icon {
	padding-top: 7.4% ;margin-left:32.7%;
}
#product .amount.i3 .icon {
	padding-top: 10.2% ;margin-left:31.2%;
}
#product .amount.i4 .icon {
	padding-top: 7.5% ;margin-left:31.2%;
}
#product .amount.i5 .icon {
	padding-top: 8.5% ;margin-left:32.1%;
}
#product .amount.i6 .icon {
	padding-top: 8.0% ;margin-left:32.2%;
}
#product .amount.i7 .icon {
	padding-top: 9.9% ;margin-left:30.7%;
}
#product .amount.i8 .icon {
	padding-top: 10.5% ;margin-left:32.2%;
}
#product .amount.i9 .icon {
	padding-top: 7.5% ;margin-left:37.2%;
}
#product .amount.i10 .icon {
	padding-top: 10.7%;
	margin-left: 33.5%;
}
#product .amount.i11 .icon {
	padding-top: 10.7%;
	margin-left: 33.5%;
}
#product .amount.i12 .icon {	
	padding-top: 7.5% ;margin-left:31.2%;
}
#product .amount.i13 .icon {
	padding-top: 9.7% ;margin-left:39.9%;
}
#product .amount.i14 .icon {
	padding-top: 9.9% ;margin-left:34.7%;
}
#product .howto {
	clear: both;
	position: relative;
	border: #cdaeae 1px solid;
	padding: 3.2% 0 3.2% 4.8%;
	height: auto;
	overflow: hidden;
	width: 94.8%;
}
#product.movie .howto {
	padding: 3.9% 0 3.2% 4.8%;
	width: 94.8%;
}
#product .howto h4 {
	font-size: 0.85em;
	color: #7a1b24;
	border-bottom: #cdaeae 1px solid;
	letter-spacing: 0.05em;
	width: 61%;.btn
	white-space: nowrap;
}
#product.movie .howto h4 {
	width: 48%;
	letter-spacing: 0;
}
#product .howto .img {
	position:absolute;
	top: 11%;
	left: 68.5%;
	width: 27%;
}
#product.movie .howto .img {
	top: 15.3%;
	left: 55.0%;
	width: 40.62%;
	cursor: pointer;
}
#product .howto p {
	font-size: 0.82em;
	width: 65%;
	min-height: 80px;
	line-height: 1.6em;
	padding-top: 2.4%;
	letter-spacing: 0;
}
#product.movie .howto p {
	width: 50%;
	min-height: 0;
}
#product .right p.sub {
	position: absolute;
	font-size: 0.58em;
	margin-top: 2%;
	line-height: 1.4em;
}
#product .page {
	position: absolute;
	top:0;
	width:100%;
	margin-top: 7.9%;
}
#product .page .prev{
	float:left;
	cursor:pointer;
	width: 6.6%;
	position: relative;
}
#product .page .next{
	float:right;
	cursor:pointer;
	width: 6.6%;
	position: relative;
}
#product .back {
	position: absolute;
	right: 2.2%;
	bottom: 4%;
	width: 7%;
	cursor: pointer;
}
/*============================
#youtube
============================*/
#youtube {
	position: absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	display:none;
	z-index: 3;
}
#youtube .bg{
	position: absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#000;
	opacity: 0.5;
}
#youtube .embed{
	position: relative;
	margin: 9.3% 0 0 13.4%;
	width: 73.2%;
	padding-bottom: 41.2%;
	height: 0;
	top:0;
	left:0;
	z-index:1;
	background:#000;
}
#youtube iframe{
	width:100%;
	height:100%;
	position: absolute;
}
#youtube .close {
	width: 8.2%;
	margin: 0 0 0 91.6%;
	top: -7%;
	opacity: 1;
}
@media screen and (min-width: 999px){
#product .thumb li {
	width: 63px;
	margin-left: 11px;
}
}
@media screen and (max-width: 850px){
	html, body {
	font-size:13px;
}
}
@media screen and (max-width: 750px){
	html, body {
	font-size:11px;
}
}
@media screen and (max-width: 600px){
	html, body {
	font-size:9px;
}
}
@media screen and (max-width: 500px){
	html, body {
	font-size:8px;
}
}
@media screen and (max-width: 450px){
	html, body {
	font-size:6px;
}
}