@charset "utf-8";
/* CSS Document */

/*reset1*/

body,
h1,h2,h3,h4,h5,h6,p,
ul,ol,li,dl,dt,dd,
form,fieldset,legend,pre,blockquote {
	margin:0px;
	padding:0px;
}

ul,li {
	list-style:none;
}

img {
	margin:0px;
	padding:0px;
	border:0px;
	vertical-align:bottom;
	max-width: 100%;
	height:auto;
}

/*reset2*/
body {
	margin:0px;
	padding:0px;
	background:url(../../product/images/awater/water_bg.gif);
}

article,aside,canvas,details,figcaption,figure,
header,footer,main,menu,nav,section,summary {
	display: block
}

/*clear*/
.clearfix:after {
  content: "."; 
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

.clear {
	clear:both;
}

/*contents*/
#header {
	width:100%;
	background-color:#df0615;
}

#header_left {
	width:30%;
	float:left;
}

#header_right {
	width:70%;
	float:right;
}

#header_right ul {
	padding:3% 0 0 0;
}

#header_right ul li.cart {
	float:right;
	padding:0 2% 0 0;
	width:35%;
}

#header_right ul li.inquiry {
	float:right;
	padding:0 2% 0 0;
	width:49%;
}

#main {
	clear:both;
	width:100%;
	text-align:center;
}

.key_parts {
	width:98%;
	margin:0 1%;
}

#keyArea {
	width:98%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background-color:#ffffff;
	margin:0 1%;
	font-size:16px;
	box-shadow:0px 0px 5px #999999;
}

.product_atten {
	text-align:left;
	padding:2% 2% 2% 1%;
	border:1px solid #d92f54;
	width:86%;
	margin:2% auto 0 auto;
	font-size:16px;
	line-height:24px;
}

.product_btn {
	padding:5% 20%;
}

.go_pc {
	padding:0 20%;
}

#sns ul {
	display: flex;
	width:200px;
	margin:0 auto;
	padding:4% 0 0 0;
	height: 30px;
}

#sns ul li {
	display:table-cell;
	text-align:center;
	width:100px;
}

#container {
	width:98%;
	background-color:#ffffff;
	margin:5% 1%;
	box-shadow:0px 0px 5px #999999;
}

.point_text {
	display:block;
	clear:both;
	padding:0 3% 3% 12%;
	font-size:16px;
	line-height:24px;
	text-align:left;
}

.point_text2 {
	display:block;
	clear:both;
	padding:0 3% 6% 12%;
	font-size:16px;
	line-height:24px;
	text-align:left;
}

.kon { color:#006cff; }

@media screen and (min-width: 0px) and (max-width: 480px){
.point_strong {
	background-color:#ebf2f3;
	font-weight:bold;
	padding:3%;
	margin:0 5% 5% 0;
}
}

@media screen and (min-width: 481px) and (max-width: 1100px){
.point_strong {
	background-color:#ebf2f3;
	font-weight:bold;
	padding:8% 3% 8% 3%;
	margin:0 5% 5% 0;
}
}

#banner_area {
	padding:0 2%;
	position:relative;
	clear:both;
}

#banner_area .chumon {
	position:absolute;
	bottom:27%;
	left:25%;
	right:15%;
}

#tab_navi ul {
	display:block;
	padding:3% 0 0 4%;
}

#tab_navi ul li a{
	cursor:pointer;
}

#tab_navi ul li#howto {
	float:left;
	padding:0 0.7% 0 0;
	width:45%;
	display:none;
}

#tab_navi ul li#howto2 {
	float:left;
	padding:0 0.7% 0 0;
	width:45%;
}

#tab_navi ul li#faq {
	float:left;
	padding:0 0.7% 0 0;
	width:24.5%;
}

#tab_navi ul li#faq2 {
	float:left;
	padding:0 0.7% 0 0;
	width:24.5%;
	display:none;
}

#tab_navi ul li#attention {
	float:left;
	width:24.5%;
}

#tab_navi ul li#attention2 {
	float:left;
	width:24.5%;
	display:none;
}

#tabBox {
	clear:both;
	width:88%;
	padding:3%;
	margin:0 auto 5% auto;
	border:1px solid #c1c1c1;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow:0px 0px 5px 3px rgba(0, 0, 0, 0.05) inset;
}

#tabBox ul {
	display:block;
	clear:both;
	width:100%;
	padding:0 0 5% 0;
}

#tabBox ul li.photo {
	width:15%;
	float:left;
	text-align:left;
}

#tabBox ul li.text {
	width:80%;
	float:right;
	text-align:left;
	font-size:16px;
	line-height:24px;
}

#tabBox02 {
	clear:both;
	width:88%;
	padding:5% 3% 3% 3%;
	margin:0 auto 5% auto;
	border:1px solid #c1c1c1;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow:0px 0px 5px 3px rgba(0, 0, 0, 0.05) inset;
	display:none;
}

#tabBox02 .faq_title {
	background-color:#999999;
	color:#ffffff;
	font-size:16px;
	line-height:24px;
	clear:both;
	padding:2%;
	margin:0 atuo;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	text-align:left;
	font-weight:bold;
}

#tabBox02 .faq_text {
	font-size:16px;
	line-height:24px;
	text-align:left;
	padding:2% 0 6% 0;
}

#tabBox03 {
	clear:both;
	width:88%;
	padding:3%;
	margin:0 auto 5% auto;
	border:1px solid #c1c1c1;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow:0px 0px 5px 3px rgba(0, 0, 0, 0.05) inset;
	display:none;
}

#tabBox03 ul {
	display:block;
	clear:both;
	width:100%;
	padding:4% 0 5% 0;
}

@media screen and (min-width: 0px) and (max-width: 520px){
#tabBox03 ul li.text {
	background:url(../../product/images/ap/no1.gif) left top no-repeat;
	padding:0 0 0 18%;
	text-align:left;
	font-size:16px;
	line-height:24px;
}

#tabBox03 ul li.text2 {
	background:url(../../product/images/ap/no2.gif) left top no-repeat;
	padding:0 0 0 18%;
	text-align:left;
	font-size:16px;
	line-height:24px;
}
}

@media screen and (min-width: 521px) and (max-width: 1100px){
#tabBox03 ul li.text {
	background:url(../../product/images/ap/no1.gif) left top no-repeat;
	padding:0 0 0 12%;
	text-align:left;
	font-size:16px;
	line-height:24px;
}

#tabBox03 ul li.text2 {
	background:url(../../product/images/ap/no2.gif) left top no-repeat;
	padding:0 0 0 12%;
	text-align:left;
	font-size:16px;
	line-height:24px;
}
}

#recomend {
	width:93.5%;
	margin:5% auto 8% auto;
	border:1px solid #988984;
	padding:0 0 2% 0;
}

.banner {
	padding:2% 7% 0 7%;
}

#footer {
	background-color:#333333;
	width:93%;
	padding:2% 3% 3% 4%;
	margin:8% 0 0 0;
	color:#ffffff;
}

#footer ul {
	clear:both;
	display:block;
}

#footer a,
#footer a:link,
#footer a:visited {
	text-decoration:none;
}

#footer a:hover,
#footer a:active {
	text-decoration:none;
}

@media screen and (min-width: 0px) and (max-width: 480px){
#footer ul li {
	float:left;
	width:47%;
	margin:1% 1% 0 0;
	background-color:#ffffff;
	color:#000000;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow:0px 0px 5px 3px rgba(0, 0, 0, 0.05) inset;
	padding:4% 1% 1% 1%;
	text-align:left;
	height:50px;
}
}

@media screen and (min-width: 481px) and (max-width: 1100px){
#footer ul li {
	float:left;
	width:47%;
	margin:1% 1% 0 0;
	background-color:#ffffff;
	color:#000000;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow:0px 0px 5px 3px rgba(0, 0, 0, 0.05) inset;
	padding:4% 1% 1% 1%;
	text-align:left;
	height:40px;
}
}

@media screen and (min-width: 0px) and (max-width: 480px){
#footer ul li span {
	display:block;
	background:url(../images/footer_ico.gif) left top no-repeat;
	padding: 0 0 0 15%;
	line-height:20px;
	font-size:16px;
}
}

@media screen and (min-width: 481px) and (max-width: 1100px){
#footer ul li span {
	display:block;
	background:url(../images/footer_ico.gif) left top no-repeat;
	padding: 0 0 0 10%;
	font-size:16px;
	line-height:20px;
}
}

.copyright {
	padding:2% 0 0 0;
	clear:both;
}