@charset "shift_jis";
/* CSS Document */
/* ■■■■■ 基本部分 ■■■■■ */


.inner_content {
    width: 900px;
 }


#clean * {
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	line-height: 110%;
}
#clean {
	width: 900px;
	margin: 0 auto;
	padding: 0px;
	overflow: hidden;
	background-color:#fff;
	color: #231302;
	font-size:1em;
}
#clean img {
	border: none;
	vertical-align: bottom;
	width: 100%;
}
#clean a:link, #clean a:hover, #clean a:visited, #clean a:focus, #clean a:active {
	
	text-decoration: none;
	
}
#clean li{
list-style: none;
}

#clean a:hover{
    opacity: 0.8;}

/* ■■■■■ 見出し ■■■■■ */

#clean h3 {
  color:#000;
  font-size: 3vw;
/*  margin-top: 6vw;*/
  text-align: center;
  padding:3.5% 0 2% 0;
  
  } 


#clean h3 span{
  font-size:1.5vw;
  display: block;
  padding-bottom: 1%;
  }

/* ■■■■■ 背景 ■■■■■ */


#clean [id^="item"] {
   margin-top: 6vw;
   padding-bottom: 2vw;
   }

#clean #item1 {

border-top: 5px #d62a12 solid;
    background:#f9e4e4;
}

#clean #item2 {
  border-top: 5px #1696b3 solid;
  background:#d3eff6;
}

#clean #item3 {

  border-top: 5px #fe5670 solid;
  background: #ffdde2;
}

#clean #item4 {

 border-top: 5px #fd7402 solid;
 background:#ffe3cc;
}

#clean #item5 {

  border-top: 5px #0253c9 solid;
  background:#ccddf4;
}

#clean #item6 {

  border-top: 5px #c59d85 solid;
  background:#ede1da;
}


/* ■■■■■ ナビゲーション部分 ■■■■■ */

#clean ul.navi {
  display:table;
  table-layout:fixed;
  text-align:center;
  width:100%;
  margin:3% auto 0 auto;
}

#clean ul.navi li {
    background: #fff;
    width: 19.2%;
    margin-right: 1%;
    float: left;
    position: relative;
    font-weight: bold;
    color:#000;
   
 
}
#clean ul.navi li a {
    height: 90px;
    line-height: 1.3em;
    display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
  
}

#clean ul.navi li:nth-child(5){
margin-right: 0;
}

#clean ul.navi li a:hover {opacity: 0.8;}

#clean ul.navi li a:after{
	content: '';
	position:absolute;
	bottom:9px;
	left: 80px;
    display: inline-block;
  width: 8px;
  height: 8px;
  border: 2px solid;
  border-color:  transparent transparent #000 #000;
  transform: rotate(-45deg);
}

#clean ul.navi li.n1 a{
    border-top: 5px #d62a12 solid;
    background:#ffd0d0;
}

#clean ul.navi li.n2 a{
    border-top: 5px #1696b3 solid;
    background:#d3eff6;
}

#clean ul.navi li.n3 a{
    border-top: 5px #fe5670 solid;
    background:#ffdde2;
}
#clean ul.navi li.n4 a{
    border-top: 5px #fd7402 solid;
    background:#ffe3cc;
}
#clean ul.navi li.n5 a{
    border-top: 5px #0253c9 solid;
    background:#ccddf4;
}

/* ■■■■■ カラー ■■■■■ */


#clean .c1 {
    color:#d62a12;
   }
   
#clean .c2 {
    color:#1696b3;
   }
#clean .c3 {
    color:#fe5670;
   }
#clean .c4 {
    color:#fd7402;
   }
#clean .c5 {
    color:#0253c9;
   }

#clean .c6 {
    color:#9e6c4d;
  }  

/* ■■■■■ 1カラム ■■■■■ */

/*商品枠*/

#clean .ul_1 {
	width: 97%;
    margin: 0 auto 2% auto;
	overflow: hidden;
	display: table;
	table-layout: fixed;
	text-align: center;
}
#clean .ul_1 dl{
	background:#fff;
	margin:2% auto;
	width:96%;
	height: 373px;
	text-align:center;
	position:relative;
	padding:14px;
    overflow: hidden;
	transition: background-color 0.5s;

}


#clean .ul_1 li{
  display:block;
  vertical-align: middle;
}
#clean .ul_1 li:first-child{
	margin-left:0px;
}

#clean .ul_1 li:hover , #clean .ul_2 li:hover , #clean .ul_3 li:hover{
    opacity: 0.8;}
    

#clean .ul_1 dl dd {
	width:455px;
	margin:0 0 0 auto;
	padding-top:25px;
    color:#fff;
    text-align: right;
    }


    

#clean .ul_1 dl dt{
    width: 390px;
    margin: 0 0 1% auto;
    padding: 0 1.5%;
    line-height: 1.3em;
    text-align:left;
    font-size: 1.8vw;
    font-weight: 700;

}


#clean .ul_1 dl dt span {
    font-size: 1.3vw;
    display: block;
    margin-bottom: 5%;
    color: #fff;
    padding: 2% 2% 1.5% 2%;
    font-weight: normal;
    letter-spacing: 1px;
}


/**カラー**/
#clean .ul_1 dl dt span.n1 {
     background-color: #d62a12;
 
}

#clean .ul_1 dl dt span.n2 {
     background-color: #1696b3;
 
}

#clean .ul_1 dl dt span.n3 {
     background-color: #fe5670;
 
}

#clean .ul_1 dl dt span.n4 {
     background-color: #fd7402;
 
}

#clean .ul_1 dl dt span.n5 {
     background-color: #0253c9;
 
}


#clean .ul_1 dl dt span.n6 {
     background-color: #c59d85;
 
}


#clean .ul_1 dd.image{
	position:absolute;
	width:380px;
	padding:0;
	top:8px;
	left:10px;
}
#clean .ul_1 .image img{
	width:100%;
}

#clean .ul_1 dd.text{
	height:4.5em;
	color:#000;
	border-bottom:1px dashed #666;
	padding:4px 0;
	font-size:90%;
	line-height:140%;
	width: 400px;
	text-align:left;
}
#clean .ul_1 dd.price{
	padding:20px 17px 0 10px;
	text-align:right;
	height:50px;
}

/*詳細はこちらボタン*/

#clean .ul_1 dd.btn{
       font-size: 14px;
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #42403d;
    color: #FFF;
    position: relative;
    height: 15px;
    width: 222px;
    text-align: center;
    font-weight: none;
    right: 13px;
    bottom: 10px;
}




/*価格プログラム*/

#clean .buy_price, #clean .buy_price li , #clean .mainitem .kakaku{
	float: none;
	line-height: 100%;
	width: auto;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}
#clean .buy_price li{
	display: inline;
 }
#clean li.motoprice {
	display: none;
}
#clean span.spesicalprice {
display: none;
	font-size: 16px;
	color: #cb0101;
	font-weight: bold;
	width: 70px;
	text-align: left;
	padding-right:5px;
}
#clean li.price {
	color: #cb0101;
	font-size: 2.4vw;
	border: none;
	font-weight: bold;

}
#clean li.intax {
	font-size: 14px;
	color: #cb0101;
	border: none;
}




/***********************説明*********************/

#clean .type {
 width:95%;
 margin:2% auto 0 auto;
 }

#clean .type ul {
    display: table;
    table-layout: fixed;
    text-align: center;
    width: 100%;
}

#clean .type ul li.b {
    float: left;
    text-align: center;
    color: #fff;
    padding: 2% 0;
    font-weight: bold;
    display:block;
    width:63%;
    font-size: 1.8vw;
    background: #1696b3;
    margin:0 1%;
    }

#clean .s a{
     float: left;
    text-align: center;
    color: #fff;
    padding: 2% 0;
    display:block;
    width:33%;
    font-size: 1.5vw;
    margin-top: 0.5%;
    background: #63bdd2;
    margin:0.5% 1% 0 1%;
    }



#clean .type ul li:nth-child(2) , #clean dl.select_txt:nth-child(2) {
 margin-right:0;
 }
 
 
 /*1カラム*/
 
#clean .type1 {
    text-align: center;
    color: #fff;
    padding: 2% 0;
    display: block;
    width: 93.6%;
    font-size: 2vw;
    background: #1696b3;
    margin: 0 auto;
    font-weight: bold;
    letter-spacing: 4px;
}


/*選び方/

#clean .select {
 font-size: 1.5vw;
 font-weight: bold;
 }

#clean dl.select_txt {
 width: 49%;
 float: left;
 margin-right: 2%;
}


#clean dl.select_txt dt{
font-size: 1.5vw;
 font-weight: bold;
 color: #fff;
 background: #1696b3;

}


/* ■■■■■ 2カラム ■■■■■ */

/*商品枠*/

#clean .ul_2 {
	width: 96%;
	margin: 2% auto 4% auto;
	overflow: hidden;
	/*display: table;*/
	table-layout: fixed;
	text-align: center;
}
#clean .ul_2 dl{
	
	margin-top:10px;
	background: #fff;
	text-align:center;
	transition: background-color 0.5s;
	position:relative;
}



#clean .ul_2 li{
  float:left;
  vertical-align: middle;
  width:49%;
  margin-right: 2%;
}
#clean .ul_2 dl dt,
#clean .ul_2 dl dd{
	margin:5px 5px 9px 5px;
}
#clean .ul_2 dt{
	/*display: table-cell;*/
	vertical-align: middle;
	/*height:3.5em;*/
	text-align:center;
	font-size:124%;
	font-weight:700;
	padding-top:15px;
	
	line-height: 1.3em;
/*    background: linear-gradient(-135deg, #f5edc7, #e9da9c);*/
}

#clean .ul_2 dd.image{
	margin:0 auto 8px auto;
	text-align:center;
}
#clean .ul_2 .image img{
	width:395px;
}

#clean .ul_2 dd.text{
	height:4.5em;
	border-bottom:1px dashed #999;
	padding:4px 0;
	font-size:14px;
	line-height:140%;
	color:#000;
}
#clean .ul_2 dd.price{
	padding:5% 0;
	text-align:center;
	
}

/*詳細はこちらボタン*/

#clean .ul_2 dd.btn{
	font-size:14px;
	display:block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #42403d;
    color: #FFF;
   	position:relative;
	height:15px;
	width:200px;
	margin:10px auto;
	text-align:center;
	
}

#clean .ul_2 dd.btn:after{
	content: '';
	position:absolute;
	top:35%;
	right:5px;
    display: inline-block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #FFF;
}


/*価格プログラム*/

#clean .ul_2 .buy_price, #clean .ul_2 .buy_price li {
	float: none;
	line-height: 100%;
	width: auto;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}
#clean .ul_2 .buy_price li{
	display: inline;
 }
#clean .ul_2 li.motoprice {
	display: none;
}
#clean .ul_2 span.spesicalprice {
  display: none;

	font-size: 11px;
	color: #00F;
	font-weight: bold;
	width: 70px;
	text-align: left;
	padding-right:5px;
}
#clean .ul_2 li.price {
	color: #cb0101;
	font-size: 26px;
	border: none;
	font-weight: bold;

}
#clean .ul_2 li .intax {
	font-size: 10px;
	color: #cb0101;
	border: none;
}

/* ■■■■■ 3カラム ■■■■■ */

/*商品枠*/

#clean .ul_3 {
	width: 97%;
	margin:0 auto 1% auto;
	overflow: hidden;
	/*display: table;*/
	table-layout: fixed;
	text-align: center;
}

#clean .ul_3 li{
  float:left;
  vertical-align: middle;
  width:32%;
  margin-right: 2%;
}

#clean .ul_3 dl{
	background:#fff;
	transition: background-color 0.5s;
	position:relative;
	

}



#clean .ul_3 li:nth-child(3) , #clean .ul_2 li:nth-child(2){
 	margin-right:0;
 	}
 	
 	


#clean .ul_3 dl dt,
#clean .ul_3 dl dd{
	margin:5px 5px 7px 5px;
}
#clean .ul_3 dt{
	/*display: table-cell;*/
	vertical-align: middle;
	height:2.5em;
	text-align:center;
	
	font-weight:700;
	padding:10px 5px;
	
	line-height: 1.3em;
	
}
#clean .ul_3 dd.image{
	margin:0 auto;
	text-align:center;
}
#clean .ul_3 .image img{
	width:265px;
}

#clean .ul_3 dd.text{
	height:3em;
	border-bottom:1px dashed #999;
	padding:4px 0;
	font-size:13px;
	line-height:140%;
	color:#000;
}
#clean .ul_3 dd.price{
	padding:3% 0;
	text-align:center;
	/*height:24px;*/
}


#clean .ul_2 dl:after , #clean .ul_3 dl:after{
	content: '';
	position:absolute;
	bottom:1%;
	right:1.5%;
    display: inline-block;
    width: 0;
height: 0;
border-style: solid;
border-width: 0 0 12px 12px;
border-color: transparent transparent #cb0101 transparent;
}

#clean .ul_1 dl:after {
	content: '';
	position:absolute;
    bottom: 1.2%;
    right: 0.3%;
    display: inline-block;
    width: 0;
height: 0;
border-style: solid;
border-width: 0 0 12px 12px;
border-color: transparent transparent #cb0101 transparent;
}







/*詳細はこちらボタン*/

#clean .ul_3 dd.btn{
	font-size:14px;
	display:block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #42403d;
    color: #FFF;
    position:relative;
	height:15px;
	width:190px;
	margin:10px auto;
	text-align:center;
	
}

#clean .ul_3 dd.btn:after{
	content: '';
	position:absolute;
	top:35%;
	right:5px;
    display: inline-block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #FFF;
}


/*価格プログラム*/

#clean .ul_3 .buy_price, #clean .ul_3 .buy_price li {
	float: none;
	line-height: 100%;
	width: auto;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}
#clean .ul_3 .buy_price li{
	display: inline;
 }
#clean .ul_3 li.motoprice {
	display: none;
}
#clean .ul_3 span.spesicalprice {
    display: none;

	font-size: 11px;
	color: #00F;
	font-weight: bold;
	width: 70px;
	text-align: left;
	padding-right:5px;
}
#clean .ul_3 li.price {
	color: #cb0101;
	font-size: 22px;
	border: none;
	font-weight: bold;

}
#clean .ul_3 li .intax {
	font-size: 10px;
	color: #cb0101;
	border: none;
}






/* ■■■■■ その他共通部分 ■■■■■ */

/*カテゴリはこちらボタン*/

#clean .cate-link{
	width:530px;
	margin:50px 14px 0 auto;
	text-align:center;
}
#clean .cate-link a{
    font-weight: bold;
    font-size: 21px;
    display: block;
    padding: 3%;
    text-decoration: none;
    background: #fff;
    color: #000;
    /* border: solid 1px #b1a99d; */
    position: relative;
    letter-spacing: 1px;
    
    background-size: 200% 100%;	
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(45, 43, 34) 50%);	
    background-image: linear-gradient(to right, transparent 50%, rgba(45, 43, 34) 50%);
    -webkit-transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;

}
#clean .cate-link a:after{
	content: '';
	position:absolute;
	top:38%;
	right:5px;
    display: inline-block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left-color:#000;
}
#




/*商品アイコン*/


#clean .icon {
    width: 100%;
}


#clean .icon span {
    padding:0.4vw 0.5vw;
    display: inline-block;
    font-size: 80%;
    background:#fff;
    color: #000;
    border: #000 1px solid;
    margin-bottom: 2%;
}

#clean div[class^="item"] .color {
    padding: 7px;
    display: inline-block;
    width: 10px;
   height: 10px;
   border-radius: 50px;
   border: 2px solid #fff;
    
}


/*1カラム ポイント*/

#clean .ul_1 dd.point  {
    text-align: center;
  /*  border: 1px solid #dde480;*/
    display: block;
    background: #f03e3e;
    color: #fff;
    padding: 0.5vw 0 0.3vw 0;
    margin: 1vw 0 0 auto;
    width: 18vw;
    font-size: 1vw;
 
    
   border-radius: 6px;		/* CSS3草案 */
	-webkit-border-radius: 6px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 6px;	

  }
  
#clean .ul_1 dd.point span {
   color:#ffe754;
   font-size: 2vw;
   margin-right: 4px;
   

  }
/*2カラムポイント*/

#clean .ul_2 dd.point {
    /*border: 1px solid #dde480;*/
    display: block;
    background: #f03e3e;
    color: #fff;
    padding:0.5vw 0 0.3vw 0;
    margin: 1vw auto 0 auto;
    width: 60%;
    font-size:95%;
 
    
   border-radius: 6px;		/* CSS3草案 */
	-webkit-border-radius: 6px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 6px;	

  }

/*3カラムポイント*/

#clean .ul_3 dd.point  {
    /*border: 1px solid #dde480;*/
    display: block;
    background: #f03e3e;
    color: #fff;
    padding:0.5vw 0 0.3vw 0;
    margin: 1vw auto 0 auto;
    width: 75%;
    font-size:95%;
 
    
   border-radius: 6px;		/* CSS3草案 */
	-webkit-border-radius: 6px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 6px;	

  }
  
#clean .ul_2 dd.point span ,#clean .ul_3 dd.point span {
   color:#ffe754;
   font-size: 170%;
   margin-right: 4px;
   

  }
 
 
/*おすすめ用品サブタイトル*/

#clean .sub_t {
width: 97%;
    font-size: 1.6vw;
    background: #c59d85;
    margin:6% auto 2% auto;
    text-align: center;
    padding: 1.3% 0 1% 0;
    color: #fff;
    font-weight: bold;
 }
 
 
/*1カラム価格のみ*/


#clean .mainitem{
	position:relative;
	margin:0 auto 3% auto;
	width: 92%;
    background: #fff;
    padding: 2%;
}



#clean .mainitem .kakaku{
	position:absolute;
    right: 68px;
    bottom: 58px;
}

#clean .mainitem .shousai{
	position:absolute;
    right: 20px;
    bottom: 18px;
}

#clean .i_normal {
  width: 94%;
  margin:5% auto 4% auto;
}

#clean .souji {
    width: 89%;
    margin: 0 auto 4% auto;
    background: #fff;
    padding: 2%;
    border: 3px #1696b3 solid;
}

  
/*トップへ戻る*/


#clean .to-top a{color:#b3b3b2;clear:both;
	font-weight:700;
	margin:30px 10px 15px auto;
	float: right;

	}
	
#clean .to-top a:before{
	content:"▲";
}

#clean .to-top a:hover{
	text-decoration: underline;
}