@charset "EUC-JP";
.header_slider div img {
  width: 100%; }

#topics,
#brand,
#pickup,
#ranking,
#category,
#special,
#magazine,
#about {
  padding: 50px 0; }
  #topics h2,
  #brand h2,
  #pickup h2,
  #ranking h2,
  #category h2,
  #special h2,
  #magazine h2,
  #about h2 {
    letter-spacing: .3em; }
    #topics h2 span,
    #brand h2 span,
    #pickup h2 span,
    #ranking h2 span,
    #category h2 span,
    #special h2 span,
    #magazine h2 span,
    #about h2 span {
      letter-spacing: .1em; }

#topics .content {
	padding:0;
  flex-wrap: wrap; }
  #topics .content > div {width:100%;}
  #topics .content > div a {
	display:block;
	position:relative;
   }
    #topics .content > div a div {
	box-sizing:border-box;
     position:absolute;
	 width:100%;
	 height:100%;
	 top:0;
	 left:0;
	 background:rgba(0, 0, 0, 0.4);
	 color:#fff;
	}
	#topics .content > div a div p {
	box-sizing:border-box;
	position:absolute;
	bottom:10px;
	padding:0 20px;
	width:100%;
	text-align:left;
	}

#brand .content {
  flex-wrap: wrap;
  justify-content:center;
  padding: 0 6%;
  box-sizing: border-box; }
  #brand .content div {
    width: 42%;
    margin: 20px 4%; }
    #brand .content div p {
      margin-top: 5px; }

#pickup .content {
  flex-wrap: wrap;
  padding: 0 6%;
  box-sizing: border-box; }
  #pickup .content div {
    width: 42%;
    margin: 2% 4%; }
    
    #pickup .content div p {
      margin-top: 5px; }

#ranking .content {
  flex-wrap: wrap;
  padding: 0 6%;
  box-sizing: border-box; }
  #ranking .content div {
    width: 42%;
    margin: 60px 4% 2% 4%;
    position: relative; }
    
      #ranking .content div:first-child::before {
        content: url(../images/rank1.jpg);
        position: absolute;
        top: -50px;
        left: 0; }
    #ranking .content div:nth-child(2)::before {
      content: url(../images/rank2.jpg);
      position: absolute;
      top: -50px;
      left: 0; }
    #ranking .content div:nth-child(3)::before {
      content: url(../images/rank3.jpg);
      position: absolute;
      top: -50px;
      left: 0; }
    #ranking .content div:nth-child(4)::before {
      content: url(../images/rank4.jpg);
      position: absolute;
      top: -50px;
      left: 0; }
    #ranking .content div:nth-child(5)::before {
      content: url(../images/rank5.jpg);
      position: absolute;
      top: -50px;
      left: 0; }
    #ranking .content div p {
      margin-top: 5px; }

#category .content {
  padding: 2% 6%;
  box-sizing: border-box; }
  #category .content h3 {
    letter-spacing: .3em; }
    #category .content h3 span {
      padding-left: 15px; }
  #category .content .color {
    flex-wrap: wrap;
    padding: 30px 5% 60px;
    box-sizing: border-box;
	 }
    #category .content .color a {
      width: 38%;
      margin: 0% 6% 10px;
      padding: 8px 0 8px 35px;
      box-sizing: border-box;
      position: relative;
	   }
	  #category .content .color a::before {
		 top: 0;
        left: -10px;  
		position:absolute;
		  }
      #category .content .color a.brown::before {
        content: url("../images/brown_icon.jpg"); }
      #category .content .color a.beige::before {
        content: url("../images/beige_icon.jpg"); }
      #category .content .color a.black::before {
        content: url("../images/black_icon.jpg"); }
      #category .content .color a.grey::before {
        content: url("../images/grey_icon.jpg"); }
      #category .content .color a.blue::before {
        content: url("../images/blue_icon.jpg"); }
      #category .content .color a.green::before {
        content: url("../images/green_icon.jpg"); }
      #category .content .color a.other::before {
        content: url("../images/other_icon.jpg"); }
  #category .content .size,
  #category .content .use,
  #category .content .level {
    width: 100%; }
    #category .content .size .flex,
    #category .content .use .flex,
    #category .content .level .flex {
      flex-wrap: wrap;
      padding: 30px 5% 60px;
      box-sizing: border-box; }
      #category .content .size .flex a,
      #category .content .use .flex a,
      #category .content .level .flex a {
        width: 38%;
        margin: 0% 6% 20px;
        padding: 8px;
		line-height:1em;
        box-sizing: border-box;
		border:1px solid #000;
		border-radius:5px;
		text-align:center;
		 }
		

#special .content {
  padding: 2% 0;
  box-sizing: border-box; }
  #special .content .special_slider {
    border: 15px solid #FAE3DE; }
	#special .content .special_slider .slick-slide a img {width:100%;}
    #special .content .special_slider .slick-dots {
      bottom: -15px; }
      #special .content .special_slider .slick-dots li button::before {
        content: "¡»";
        color: #FFF;
        opacity: 1.0;
        font-size: 12px; }
      #special .content .special_slider .slick-dots li.slick-active button::before {
        content: "¡ü"; }

#magazine .content {
  padding: 2% 5%;
  box-sizing: border-box; }
  #magazine .content .flex {
    flex-wrap: wrap; }
    #magazine .content .flex div {
      width: 80%;
      margin: 2% 10%; }
      #magazine .content .flex div a.thumbs {
        border: 15px solid #FAE3DE; }
        #magazine .content .flex div a.thumbs img {
          width: 100%; }
      #magazine .content .flex div a p {
        padding: 5px;
        box-sizing: border-box; }

#about .content {
  padding: 2% 5%;
  box-sizing: border-box; }
  #about .content .flex {
    flex-wrap: wrap; }
    #about .content .flex div {
      width: 80%;
      margin: 2% 10%; }
      #about .content .flex div a p {
        padding: 5px;
        box-sizing: border-box; }

/*# sourceMappingURL=home.css.map */