@charset "euc-jp";
/* CSS Document */

/* --------------------------------------------------
  =body
-------------------------------------------------- */
*:focus {
  outline: none;
}
body {
    color: #000;
    line-height: 1.5;
    font-size: 14px;
  font-family: "Century Gothic",'¥Ò¥é¥®¥Î³Ñ¥´ Pro W3', 'Hiragino Kaku Gothic Pro', '¥á¥¤¥ê¥ª', Meiryo, '£Í£Ó £Ð¥´¥·¥Ã¥¯', sans-serif;
    background: #fff;
}

.pconly {
  display: block!important;
}
.sponly {
  display: none!important
}
.oapinfo,
.mnyinfo{
		display: none!important
}
@media screen and (max-width:1024px),screen and (max-width: 896px) and (orientation: landscape){
.pconly {
  display: none!important;
}

.br-pc { display:none; }
.br-sp { display:block; }
}

@media screen and (max-width:1024px),screen and (max-width: 896px) and (orientation: landscape){
.sponly {
  display: block!important
}

.br-pc { display:block; }
.br-sp { display:none; }
}

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}
a:link,
a:visited {
  color: #000000;
  text-decoration: none;
}
a:hover,
a:active {
  color: #000000;
  text-decoration: underline;
}
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

body {
  -webkit-text-size-adjust: 100%;/**Landscape font**/
}

/* --------------------------------------------------
  =clearfix
-------------------------------------------------- */

.clearfix:after {
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  content: ".";
}
.clearfix {
  overflow: hidden;
}
/* Hides from IE-mac */
* html .clearfix {
  height: 1%;
  overflow: visible;
}
/* End hide from IE-mac */

/* --------------------------------------------------
  =wrapper
-------------------------------------------------- */

#wrapper {
  width: 100%;
	background-color: #FFF;
}
.mainBox {
  margin-left: auto;
  margin-right: auto;
  width: 1080px;
}
@media screen and (max-width:1024px),screen and (max-width: 896px) and (orientation: landscape){
.mainBox {
  width: 100%;
}
}

/* --------------------------------------------------
  =header
-------------------------------------------------- */

#headerArea {
  width: 100%;
  background: #A5A5A5;
  position:relative;
}
#header {
  width: 100%;
}
#headerLink {
  width: 100%;
  margin: 0 auto;
	background-color: #A5A5A5;
}
#headerLink ul {
  font-size: 0;
  text-align: right;
  padding: 5px 5%;
}
#headerLink ul li {
  display: inline-block;
  margin: 10px 0;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1.0;
  border-right: solid 1px #000000;
  vertical-align: middle;
}
#headerLink ul li:last-child {
  display: inline-block;
  margin: 10px 0;
  padding: 0 0 0 10px;
  font-size: 12px;
  line-height: 1.0;
  border-right: none;
}
#headerLink a:link,
#headerLink a:visited {
  color: #000000;
}
#headerLink a:hover,
#headerLink a:active {
  color: #000000;
}
#headerInfo {
  width: 90%;
  margin: 0 auto;
	background-color: #A5A5A5;
}
#headerInfo img {
  width: 100%;
  vertical-align: bottom;
}
#headerLogo {
 width: 10%;
    margin-left: 0;
    float: left;
    text-align: left;
    margin-bottom: 3%;
}
#headerLogo img {
  width: 100%;
}
#headerInfo ul {
  width: 10%;
  padding: 40px 0 20px;
  float: right;
}
#headerInfo > ul > li.iccart {
  float: right;
  width: 25px;
  padding: 0 0 0 10px;
}
#headerInfo > ul > li{list-style: none;}

#headerInfo > ul > li.icsearch {
  float: right;
  width: 25px;
  padding: 0 10px;
}
#headerInfo > ul > li:hover .searchBox {
  max-height: 9999px;
  opacity: 1;
}
#headerInfo > ul .searchBox {
  transition: all .2s ease-in;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  width: 100%;
  top: 110px;
  left: 0;
  position: absolute;
  z-index: 999;
}
.searchBox .wrapperBox {
    width: 100%;
  padding: 30px 0 30px 0;
  background: #000000;
	margin-top: 60px;
}
.searchBox .wrapper {
    width: 540px;
  margin: 0 auto;
  position: relative;
}
#searchForm {
    width: 540px;
    height: 43px;
  margin: 0 auto;
  color: #FFF;
  font-size: 14px;
  border-bottom: solid 2px #A5A5A5;
}
#searchForm input {
    vertical-align: top;
    margin: 10px 0;
    height: 23px;
    box-sizing: border-box;
    background-color: transparent;
	color: #FFF;
}
#searchInput {
    border: none;
    width: 485px;
    padding-left: 5px;
}
#searchSubmit {
    width: 50px;
    border: none;
  background-image: url(https://www.rakuten.ne.jp/gold/swishpop/cmn/img/search_sp.png);
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

#headerMenu {
  width: 100%;
  margin: 0 auto;
	background-color: #000000;
	border-top: 1px solid #000000;
}
#headerMenu img {
  width: 100%;
  vertical-align: bottom;
}
#headerMenu ul {
  font-size: 0;
  text-align: center;
	letter-spacing: 5px;
}
#headerMenu > ul > li {
  width: 200px;
  padding: 20px 0;
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
  text-align: center;
}
#headerMenu > ul > li:hover a {
  padding: 20px 0;/*
  border-bottom: solid 3px #e9168c;*/

}
#headerMenu a:link,
#headerMenu a:visited {
  color: #ffffff;
  text-decoration: none;
	font-weight: bold;
}
#headerMenu a:hover,
#headerMenu a:active {
  color: #ffffff;
  text-decoration: none;
	opacity: 0.7;
}
#headerMenu > ul > li:hover .menuBox {
  max-height: 9999px;
  opacity: 1;
}
#headerMenu > ul .menuBox {
  transition: all .2s ease-in;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  width: 100%;
  top: 340px;
  left: 0;
  position: absolute;
  z-index: 999;
}
.menuBox .wrapperBox {
    width: 100%;
  padding: 25px 0;
  background: #fff;
  text-align: left;
}
.menuBox .wrapper {
    width: 1220px;
  margin: 0 auto;
}
.menuBox .wrapper p {
  padding-bottom: 15px;
  font-size: 13px;
  font-weight: thin;
	color: #777;
}
#headerMenu ul .menuBox .wrapper ul {
  float: left;
  padding: 0;
}
.menuBox .wrapper ul li {
  width: 300px;
  padding: 0 15px 15px 0;
  font-size: 14px;
  text-align: left;
}
.menuBox .cat1 ul li {
  width: 320px;
  padding: 0 15px 15px 0;
  font-size: 14px;
  text-align: left;
}
.menuBox .cat {
    width: 300px;
    margin: 0 auto;
    float: left;
}
.menuBox .cat1 {
    width: 320px;
    margin: 0 auto;
    float: right;
}
#headerMenu ul .menuBox .wrapper a:link,
#headerMenu ul .menuBox .wrapper a:visited {
  padding: 0;
  color: #000;
  text-decoration: none;
  border-bottom: none;
}
#headerMenu ul .menuBox .wrapper a:hover,
#headerMenu ul .menuBox .wrapper a:active {
  padding: 0;
  color: #000;
  text-decoration: underline;
  border-bottom: none;
}
.menuBox .wrapper .bnrBox {
  width: 310px;
  float: right;
}
.menuBox .wrapper .bnrBox img {
  width: 100%;
}
#headerMenu li.toggle:nth-child(n+2)>a,
#headerInfo > ul > li.icsearch>a{pointer-events: none!important;}
@media screen and (max-width:1024px),screen and (max-width: 896px) and (orientation: landscape){
.headerImg {
  z-index: 110;
  position: relative;
}
.headerImg img {
  width: 100%;
  vertical-align: bottom;
}
.headerBox-sp {
  width: 100%;
  background: #A5A5A5;
  padding: 2% 0;
  display: table;
  z-index: 110;
  position: relative;
}
.headerMenu-sp {
  width: 22%;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  padding-left: 3%;
}
.headerCart-sp {
  width: 22%;
  display: table-cell;
  text-align: right;
  vertical-align: middle;
  padding-right: 2%;
}
.headerCart-sp img {
  width: auto;
  height: 24px;
}
.headerLogo-sp {
  width: 49%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.headerLogo-sp img {
  width: auto;
  height: 58px;
  vertical-align: bottom;
}
.headerLogo-open {
  width: 49%;
  padding-left: 30%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.headerLogo-open img {
  width: auto;
  height: 38px;
  vertical-align: bottom;
}
#drawerCate-sp {
  padding: 5% 5% 20% 5%;
  background: #000;
        height: auto!important;
        overflow: scroll!important;
}
dl.search-sp {
  position : relative;
  width: 100%;
  font-size: 10px;
  border: solid 1px #fff;
  height:40px;
}
dl.search-sp dt{
  margin-right: 35px;
  padding: 3px 0 3px 10px;
				
}
dl.search-sp dt input{
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: none;
  border: none;
  color: #fff;
	display:block!important;
}
dl.search-sp dd{
  position: absolute;
  top: 0;
  right: 0;
}
dl.search-sp dd .searchBtn-sp{
  display: block;
  padding: 8px;
  background: none;
  border: none;
}
dl.search-sp dd .searchBtn-sp input{
  display: block;
  width: 20px;
  height: 20px;
  background: url("../img/search.png") no-repeat scroll 0 0;
  background-size: 100%;
}
.drawerBnr {
  margin-top: 4%;
}
.drawerBest {
  margin-top: 1%;
}
.drawerBest img {
  width: 100%;
}
.drawerMenu {
  width: 100%;
  color: #fff;
}
.drawerMenu a {
  color: #fff;
	display: block;
}
.drawerMenu input {
  display: none;
}
.drawerMenu label {
  cursor :pointer;
  display: block;
  text-decoration: none;
  line-height: 1;
  position: relative;
  padding: 15px 0;
  font-size: 12px;
  border-bottom: solid 1px #fff;
}
.drawerMenu ul {
  margin: 0 0 1px 0;
  list-style: none;
}
.drawerMenu li {
  max-height: 0;
  overflow-y: hidden;
}
.drawerMenu li a:hover {
  text-decoration: none;
}
#drawerBar01:checked ~ #links01,
#drawerBar02:checked ~ #links02,
#drawerBar03:checked ~ #links03,
#drawerBar04:checked ~ #links04 {
  opacity: 1;
  padding: 4px 0 0 0;
}
#drawerBar01:checked ~ #links01 li,
#drawerBar02:checked ~ #links02 li,
#drawerBar03:checked ~ #links03 li,
#drawerBar04:checked ~ #links04 li {
  width: 50%;
  padding: 8px 0;
  font-size: 12px;
  max-height: 60px;
  opacity: 1;
  box-sizing: border-box;
  float: left;
}
#drawerBar01:checked ~ #links01 li.menubtn,
#drawerBar02:checked ~ #links02 li.menubtn,
#drawerBar03:checked ~ #links03 li.menubtn,
#drawerBar04:checked ~ #links04 li.menubtn {
  width: 70%;
  margin: 0 auto;
  padding: 8px 0;
  opacity: 1;
  border: none;
  box-sizing: border-box;
  float: none;
  clear: both;
}
#drawerBar01:checked ~ #links01 li.menubtn a,
#drawerBar02:checked ~ #links02 li.menubtn a,
#drawerBar03:checked ~ #links03 li.menubtn a,
#drawerBar04:checked ~ #links04 li.menubtn a {
  border: solid 1px #fff;
  padding: 8px 0;
  font-size: 12px;
  text-align: center;
  display: block;
  position: relative;
}
.drawerMenu label:after{
  content:"";
  display:block;
  width:6px;
  height:6px;
  border-top: #FFFFFF 2px solid;
  border-right: #FFFFFF 2px solid;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position:absolute;
  right: 3%;
  top: 5%;
  bottom: 6%;
  margin:auto;
}
.drawerMenu input[type=checkbox]:checked + label:after{
  content:"";
  display:block;
  width:6px;
  height:6px;
  border-top: #e9168c 2px solid;
  border-right: #e9168c 2px solid;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  position:absolute;
  right: 3%;
  top: 0;
  bottom: 10%;
  margin:auto;
}
}

/* --------------------------------------------------
  =main
-------------------------------------------------- */

#sliderBox {
  margin-bottom: 10px;
}
#wide {
  width: 100%;
}
#wide img {
  width: 100%;
}
@media screen and (max-width:1024px),screen and (max-width: 896px) and (orientation: landscape){
#sliderBox {
margin-top:10%;	
  margin-bottom: 0;
}
			#slider {
  margin:3.4rem 0 0 0;
}
.slideImg {
  position: relative;
  height: auto;
}
.slideImg img {
   width: 100%;
}
.slideBtn,
.slideTxtbtn {
    position: absolute;
    bottom: 7%;
  right: 5%;
    width: 150px;
}
.slideTxtbtn a {
  width: 150px;
  background: #fc2561;
  border: solid 1px #fff;
  color: #fff;
  display: block;
  padding: 5% 0;
  box-sizing: border-box;
  text-align: center;
  font-size: 12px;
}
}

#topSpitem img,
#topSpitem2 img,
#topSitem img,
#topAbout img,
#topCate img,
#topBnr img{
  width: 100%;
  vertical-align: bottom;
}
#topBest {
  width: 1080px;
  margin: 0 auto 30px auto;
  text-align: right;
  font-size: 18px;
  line-height: 1.0;
  font-weight: bold;
  position: relative;
}
#topBest a {
  padding-right: 30px;
  display:block;
}
#topBest a:hover {
  text-decoration: none;
}
#topBest a:after{
  content:"";
  position: absolute;
  width:8px;
  height:8px;
  border-top: #000 4px solid;
  border-right: #000 4px solid;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position:absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin:auto;
}
.topTitle {
margin-bottom: 2%;
    font-size: 2.0vw;
    line-height: 45px;
    font-weight: bold;
    text-align: center;
    color: #000000;
    padding: 0 2%;
    letter-spacing: 3px;
}
.but{margin-top: 60px;
    margin-bottom: 60px;
text-align: center;}
.button{
	border-color: #121212;
    background: #fff;
    color: #121212;
	vertical-align: top;
    border-radius: 100px;
    transition: opacity 200ms, box-shadow 250ms, background-color 100ms, border-color 100ms, color 100ms;
    font-family: Lato,sans-serif;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    height: auto;
    width: auto;
    padding: 14px 28px;
    border-width: 1px;
    border-style: solid;
	display: inline-block;
}
.button a, .button a:link, .button a:visited,
.but a, .but a:link, .but a:visited{text-decoration: none;}

.but a:hover{text-decoration: none;
color: #ffffff;
background-color: #000000;}

.cateTitle {
  background: #000;
  font-size: 22px;
  line-height: 50px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
    #topInfoArea {
  width: 1080px;
  margin: 0 auto;
  padding: 20px 0 50px;
}
#topInfoArea ul li {
  padding: 5%;
  margin: 15px;
  font-size: 1.16em;
    box-shadow: 0 1px 20px rgba(54,54,54,0.3);
		background-color: #ffffff;

}
    #topInfoArea ul li .news{
 padding: 5px 0;
  font-size: 13px;
}
    #topInfoArea ul li .date{
     font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 30px;
    font-weight: 500;
}
#topInfoArea ul li .blog-title--divider{
	background-color: #ffffff;
    display: inline-block;
    height: 1px;
    margin: 10px 0 5px;
    position: relative;
    vertical-align: middle;
    width: 36px;
}
    #topInfoArea ul li:last-child {
  margin-bottom: 0;
}
#topSpitem {
  width: 100%;
  margin: 0 auto;
  padding: 100px 0;
}
#topSpitem ul{
width: 90%;
margin: 0 auto 3%;	
	
}

#topSpitem ul li {
  width: calc(88%/5);
  float: left;
  padding-right: 3%;
padding-bottom: 3%;	
	text-align: left;
	letter-spacing: 2px;
	font-weight: 100;
	line-height: 1.8;
}

#topSpitem ul > .title-banner {
	width: 100%;
	    text-align: center;
    background-color: #000;
    color: #FFF;
    padding: 1% 0;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
}

#topSpitem ul li .price{
	font-size:1em;
	color: #ACACAC;
}
#topSpitem ul li a:hover{text-decoration: none;}
#topSpitem ul li:nth-child(5),
#topSpitem ul li:nth-child(10),
#topSpitem ul li:nth-child(15),
#topSpitem ul li:nth-child(20){
  padding-right: 0;
}
#topSpitem ul li img{
      display:block;
      margin:0 0 8px 0;
}
#topSitem {
  width: 100%;
  margin: 0 auto;
  padding: 0;
	border-bottom: 1px solid #000000;	

}
#topSitem ul{
width: 1280px;
margin: 0 auto 50px;	
}

#topSitem ul:first-child{
width: 1280px;
margin: 0 auto 50px;	
}

#topSitem ul li {
  width: calc(1130px/4);
  float: left;
  padding-right: 50px;
	text-align: center;
	letter-spacing: 2px;
	font-weight: 100;
	line-height: 1.8;
}
#topSitem ul li .price{
	font-size:1em;
	color: #ACACAC;
}

#topSitem ul li:last-child {
  padding-right: 0;
}
#topSitem ul li img{
      display:block;
      margin:0 0 8px 0;
}
#topSitem ul li a:hover{text-decoration: none;}
#topSpitem2,#topSpitem3 {
  width: 100%;
  margin: 0 auto;
  padding: 100px 0;
}
#topSpitem2 ul,#topSpitem3 ul{
width: 1280px;
margin: 0 auto;	
}
#topSpitem2 ul li {
width: calc(795px/3);
    float: left;
    margin-right: 50px;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 100;
    line-height: 1.8;
    background: #ffffff;
    height: 270px;
    padding: 5%;
	font-size: 0.9em;
}
#topSpitem3 ul li {
width:540px;
    float: left;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 100;
    line-height: 1.8;
    height: 540px;
	font-size: 1.0em;
	padding: 50px;
}
.refill {
    background: url(https://image.rakuten.co.jp/uabody/cabinet/imgrc0087433959.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
.why {
    background: url(https://image.rakuten.co.jp/uabody/cabinet/imgrc0087433958.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
.refill div, .why div { 
width: 250px;
    background-color: #ffffff;
    margin: 30% auto;
    padding: 5%;}
.refill div .title, .why div .title{
	font-size: 1.5em;	
}
#topSpitem2 ul li:last-child,#topSpitem3 ul li:last-child{margin-right: 0;}
#topSpitem2 ul li a:link, 
#topSpitem2 ul li a:visited{color: #ffffff;}
#topSpitem2 ul li .price{
	font-size:1em;
	color: #ACACAC;
}
#topSpitem2 ul li a:hover,
#topSpitem3 ul li a:hover{text-decoration: none;}

#topSpitem2 .last {
  margin-right: 0px;
}
#topSpitem2 ul li img{
      display:block;
          margin: 0 auto;
    width: 50%;
}
#topSpitem3 ul li img{
      display:block;
          margin: 0 auto;
    width: 50%;
}
#topAbout {
  margin-bottom: 30px;
  background: url("https://www.rakuten.ne.jp/gold/swishpop/cmn/img/about_bg.jpg?05") center top;
  background-size:cover;
	background-repeat: no-repeat;
}
a.aboutlink {
  text-decoration: none;
}
a:hover.aboutlink {
  text-decoration: none;
}
#topAbout .aboutBox {
  width: 1080px;
  margin: 0 auto;
  padding: 50px 0 30px 0;
}
#topAbout .aboutBox h2  {
  width: 396px;
  margin: 2em auto;
}
#topAbout .aboutBox .txt  {
  padding: 20px 0 40px 0;
  text-align: left;
  font-size: 18px;
  line-height: 2.0;
}
#topAbout .aboutBox .txt .para{
  display:block;
  margin: 3.5em auto;
}
#topAbout .aboutBtn {
  font-size: 22px;
  line-height: 1.0;
  font-weight: bold;
  text-align: right;
  position: relative;
}
#topAbout .aboutBtn a {
  padding-right: 30px;
  display:block;
}
#topAbout .aboutBtn a:hover {
  text-decoration: none;
}
#topAbout .aboutBtn a:after{
  content:"";
  position: absolute;
  width:12px;
  height:12px;
  border-top: #000 4px solid;
  border-right: #000 4px solid;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position:absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin:auto;
}
#topCate {
  width: 1080px;
  margin: 0 auto;
  padding-bottom: 30px;
}
#topCate ul li {
  width: 25%;
  float: left;
}
	.sp-only{display: none;}

#topBnr {
  width: 990px;
  margin: 0 auto;
}
#topBnr .cruelty {
  margin-bottom: 40px;
}
@media screen and (max-width:1024px),screen and (max-width: 896px) and (orientation: landscape){
#topBest {
  width: 90%;
  margin: 0 auto 20px auto;
  text-align: right;
  font-size: 12px;
  line-height: 1.0;
  font-weight: bold;
  position: relative;
}
#topBest a {
  padding-right: 20px;
  display:block;
}
#topBest a:hover {
  text-decoration: none;
}
#topBest a:after{
  content:"";
  position: absolute;
  width:6px;
  height:6px;
  border-top: #000 3px solid;
  border-right: #000 3px solid;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position:absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin:auto;
}
.topTitle {
  margin-bottom: 50px;
  font-size: 3.8vw;
  line-height: 50px;
  font-weight: 100;
  text-align: center;
letter-spacing: 2px;	
  color: #000000;
}
	#topSpitem ul{
	width: 100%;
		margin: 0 auto;
	}	
.cateTitle {
  background: #000;
  font-size: 22px;
  line-height: 50px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
      #topInfoArea {
  width: 100%;
  margin: 10% auto 0;
  padding-bottom: 0;
}
      #topInfoArea ul li {
  padding: 10px;
  margin-bottom: 0;
  font-size: 15px;
}
      #topInfoArea ul {
  padding-top: 5px;
}
#topSpitem {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 0;
}
#topSpitem ul li {
  width: 30%;
  float: left;
  padding-right: 5%;
	margin-bottom: 10%;
	font-size: 0.84em;
}
	.but{
		margin-top: 0;
		margin-bottom: 100px;
	}	
	#topSpitem2{padding: 50px 0 0;}
	#topSpitem3{padding: 0;}
	#topSitem ul,#topSpitem2 ul,#topSpitem3 ul{
		width: 100%;margin: 0 auto;}	
#topSpitem ul li:last-child	{
  padding-right: 0;
}
#topSpitem2 ul li:last-child	{
  margin-right: 0;
}	
	#topSpitem3 ul li{width: 100%;float: none;padding: 30% 0 0; height: 400px;}
	.refill div, .why div{width: 40%; margin: 0 auto; padding: 5%;}

	#topSitem ul li{width: 47.5%;float: left;
  padding-right: 5%;}
	#topSpitem2 ul li {
 width: 28%;
    float: left;
    margin-bottom: 10%;
    margin-right: 2%;
    font-size: 0.75em;
    padding: 2%;
		height: 100%;
}
	#topSpitem2 ul li img{width: 100%;}
	.pc-only{display: none;}
	.sp-only{display: block;}
#topSitem ul li:nth-child(2),#topSitem ul li:nth-child(4){
  padding-right: 0;}
#topSpitem ul li img{
        display:block;
        margin:0 0 20px 0;
}

#topAbout .aboutBox {
  width: 94%;
  margin: 0 auto;
  padding: 30px 0 20px 0;
}
#topAbout .aboutBox h2  {
  width: 80%;
  margin: 1em auto;
  max-width: 396px
}
#topAbout .aboutBox .txt  {
  padding: 10px 0;
  text-align: left;
  font-size: 12px;
  line-height: 2.0;
}
#topAbout .aboutBtn {
  width: 96%;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.0;
  font-weight: bold;
  text-align: right;
  position: relative;
}
#topAbout .aboutBtn a {
  padding-right: 20px;
  display:block;
}
#topAbout .aboutBtn a:hover {
  text-decoration: none;
}
#topAbout .aboutBtn a:after{
  content:"";
  position: absolute;
  width:6px;
  height:6px;
  border-top: #000 3px solid;
  border-right: #000 3px solid;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position:absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin:auto;
}
#topCate {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 20px;
}
#topCate ul li {
  width: 50%;
  float: left;
}
#topBnr {
  width: 100%;
  margin: 0 auto;
}
#topBnr .cruelty {
  margin-bottom: 15px;
}
}

/* --------------------------------------------------
  =footer
-------------------------------------------------- */
#footerArea{
  margin-top:60px;
      }
#footer {
  width: 100%;
  background: #000000;
  margin-top: 20px;
}
.copy {
  width: 1080px;
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
  padding: 10px 0;
  font-size: 14px;
}
@media screen and (max-width:1024px),screen and (max-width: 896px) and (orientation: landscape){
#footer {
  width: 100%;
  background: #000;
  margin-top: 3px;
}
.copy {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  padding: 10px 0;
  font-size: 10px;
}
}

#footerGuide{
        border-top:1px solid #000;
        margin:30px 0 0 0;
        padding:20px 0 0 0;
}
#footerGuide ul{
        display:block;
        margin:0 auto;
	width: 90%;
      }
#footerGuide li{
        width: calc(85%/4);
    margin: 0;
    float: left;
	padding-right: 5%;
}
#footerGuide li .title{
	text-align: center;
	font-weight: bold;
		display: block;
}

#footerGuide li .ins{
	text-align: left;
	font-size: 12px;
}

#footerGuide li:last-child{
	padding-right: 0;
}
/*
#footerGuide li:after{
        content:" | ";
}
#footerGuide li:last-child:after{
        content:"";
      }*/
@media screen and (max-width:1024px),screen and (max-width: 896px) and (orientation: landscape){
        #footerGuide{
          display:none
        }
}

/* --------------------------------------------------
	SP¥«¥é¡¼Å¸³«¥¢¥ó¥«¡¼
-------------------------------------------------- */

@media screen and (max-width:1024px){

#color_list{
	margin-top: -129px;
	padding-top: 129px;
	}
}