@charset "utf-8";
/* CSS Document */
@media only screen and (min-width: 768px) {

/* ====================
    WIDE: CSS3 Effects
   ==================== */

    .header-container,
    .main aside {
    }
	
	#gnavi ul li a.new:before {
	content: url(../img/new_min.png);
	position: absolute;
	margin-top: -14px;
	margin-left: -20px
	}	



/* ============
    WIDE: Menu
   ============ */

    nav#gnavi {
		margin: 0 auto;
		overflow: hidden;
    }
	
	nav#gnavi ul li {
		float: left;
		width: 20%;
	}


	
	nav#gnavi ul li a {
	display: block;
	width: 100%;
	font-size: 16px !important;
	}


    .main article {
        float: left;
        width: 100%;
    }


/* ============
    WIDE: Main
   ============ */
/*footer*/

.footer-container { 
	overflow: hidden; 
	width: 700px !important; 
	margin: 20px auto 0 auto !important; 
	text-align: center !important;
}


#photo img {
	max-width: 330px !important;
	width: 330px !important;
	height: auto;
}

.productinfo {  
	overflow: hidden; 
	width: 465px !important; 
	margin: 0 auto !important; 
	padding-top: 10px;
}

.productinfo div { 
	width: 155px !important; 
	float: left; 
}

#finner, #copyright, #fmenu {
	width: 700px !important; 
	margin: 0 auto !important; 
	
}

.pic img, .photos img { max-width: 100% !important; height: auto; }

}


@media only screen and (min-width: 1000px) {

	#gnavi ul li a.new:before {
	content: url(../img/new_min.png);
	position: absolute;
	margin-top: -14px;
	margin-left: -10px
	}	


/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 960px !important; /* 960px - 10% for margins */
        margin: 0 auto !important;
    }
    .main article {
        float: left;
        width: 690px !important;
    }

    .main aside {
        float: right;
        width: 250px !important;
		display: inherit !important;
    }


	 .title img {
		max-width: 100%; !important;
		height: auto;
    }
	
	.person {
		overflow: hidden;
	}
	
	.icon {
		float: left;
		text-align: center;
		width: 25%;
	}

	.rcom {
		float: right;
		width: 70%;
		padding: 0 !important;
	}
	
	/*kaihatu*/
	.fleft {
		float: left;
		width: 450px;
	}
	
	.fright {
		float: right;
		width: 480px;
		margin-bottom: 15px;
	}
	
	/*comments*/
	.center_block {
	width: 910px;
	float: left;
}

	.lblock {
	width: 470px;
	float: left;
}

	.rblock {
	width: 470px;
	float: right;
}

.center_image{
	width:100%;
	max-width: 430px;
	margin-top: 15px;
	float:left;
}

.left_image{
	width:100%;
	max-width: 253px;
	margin-top: 8px;
	float:right;
        margin-right: 100px;
}

.center_text {
	margin-left: 60px;
	width:100%;
	max-width:400px;
	float:left;
}


	/*color*/
	
	#productphoto {
		width: 380px;
		float: left;
	}
	
	#details {
		float: right;
		width: 520px;
	}
	
	.boxor {
		overflow: hidden;
	}
	
	/*tokucho*/
	.fll { width: 480px; float: left; }
	.flr { width: 480px; float: right; }

	.pic img { width: inherit !important; }

	.kflow { 
		float: left; 
		width: 25%;
		text-align: left;
	}

	.kflow p { margin: 0 5px 5px 5px; }

	.step1, .step2, .step3, .step4 {
		height: 290px;
		text-align: center !important;
	}


	/*hikaku*/

	.hkk .fll { width: 345px !important; float: left; }

	.hkk .flr { width: 615px !important; float: left; }


	/*common style*/
	.ppl20 { padding-left: 20px !important; }

	.h270 { height: 270px !important; position: relative; }

	.h400 { height: 341px !important; position: relative; }

	.h400 p {
		position: absolute;
		top: 15px;
	}

	.h270 p {
		position: absolute;
		top: 50px;
	}

	.ppl30 {
		padding-left: 30px;
	}

	.val1 {
		margin-top: 11%;
	}

	.val2 {
		margin-top: 11%;
	}

	.val3 {
		margin-top: 14%;
	}




	/*footer*/

	.footer-container { 
		overflow: hidden; 
		width: 700px; 
		margin: 20px auto 0 auto; 
		text-align: center !important;
	}

	.productinfo {  
		overflow: hidden; 
		width: 465px !important; 
		margin: 0 auto !important; 
		padding-top: 10px;
	}

	.productinfo div { 
		width: 155px !important; 
		float: left; 
	}

	.pic img {
		width: inherit !important;
	}

	.table img {
		width: 450px !important;
	}


}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}