@charset "UTF-8";

/*
html body {
	padding-top:57%;
	}
  */

html body {
  opacity: 1!important;
  visibility: visible!important;
  filter: alpha(opacity=1)!important;
}

header,
body > article {background:#fff;}
header,
body > article,
footer {position:relative;z-index:1;margin-top:0 !important;}
header {z-index:2;}

.header_slider {
	top:0;
	position:fixed;
	width:100%;
	}
.header_slider div img {
  width: 100%; }

#topics,
#brand,
#pickup,
#ranking,
#category,
#special,
#magazine,
#about,
#makeup{
  padding: 50px 0; }
  #topics h2,
  #brand h2,
  #pickup h2,
  #ranking h2,
  #category h2,
  #special h2,
  #magazine h2,
  #about h2 {
    letter-spacing: .3em;
    margin-bottom: 40px; }
    #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 .flex {
  margin: 0 -8px; }
  #topics .content .flex div {
    width: 373.5px;
    margin: 0 8px; }
    #topics .content .flex div p {
      margin-top: 25px; }
    #topics .content .flex div img {
      width: 100%; }

#brand .content .flex {
  flex-wrap: wrap;
  width: 915px;
  margin: 0 auto; }
  #brand .content .flex div {
    width: 250.5px;
    margin: 0 25px 30px 25px; }
    #brand .content .flex div img {
      width: 100%; }
    #brand .content .flex div p {
      margin-top: 25px; }

#pickup .content .flex {
  margin: 0 -7.75px; }
  #pickup .content .flex div {
    width: 218px;
    margin: 20px 7.75px; }
    #pickup .content .flex div p {
      margin-top: 5px; }

#ranking .content .flex {
  margin: 0 -7.75px; }
  #ranking .content .flex div {
    width: 218px;
    margin: 60px 7.75px 20px 7.75px;
    position: relative; }
    #ranking .content .flex div:first-child::before {
      content: url(../images/rank1.webp);
      position: absolute;
      top: -50px;
      left: 0; }
    #ranking .content .flex div:nth-child(2)::before {
      content: url(../images/rank2.webp);
      position: absolute;
      top: -50px;
      left: 0; }
    #ranking .content .flex div:nth-child(3)::before {
      content: url(../images/rank3.webp);
      position: absolute;
      top: -50px;
      left: 0; }
    #ranking .content .flex div:nth-child(4)::before {
      content: url(../images/rank4.webp);
      position: absolute;
      top: -50px;
      left: 0; }
    #ranking .content .flex div:nth-child(5)::before {
      content: url(../images/rank5.webp);
      position: absolute;
      top: -50px;
      left: 0; }
    #ranking .content .flex div p {
      margin-top: 5px; }

#category .content h3 {
  letter-spacing: .3em;
 position:relative;
   }
  #category .content h3::after {
	position:absolute;
	bottom:-5px;
	left:0;
	content:"";
	width:calc(100% - 20px);
	height:1px;
	 border-bottom:1px solid #D4D5D5;  
	  }
  #category .content h3 span {
    padding-left: 15px; }
#category .content .color {
  flex-wrap: wrap;
  padding: 30px 0 100px; }
  #category .content .color a {
    width: 24%;
    margin: 2% 0.5%;
    padding: 8px 0 8px 35px;
    box-sizing: border-box;
    position: relative; }
    #category .content .color a.brown::before {
      content: url("../images/brown_icon.webp");
      position: absolute;
      top: 4px;
      left: -10px; }
    #category .content .color a.beige::before {
      content: url("../images/beige_icon.webp");
      position: absolute;
      top: 4px;
      left: -10px; }
    #category .content .color a.black::before {
      content: url("../images/black_icon.webp");
      position: absolute;
      top: 4px;
      left: -10px; }
    #category .content .color a.grey::before {
      content: url("../images/grey_icon.webp");
      position: absolute;
      top: 4px;
      left: -10px; }
    #category .content .color a.blue::before {
      content: url("../images/blue_icon.webp");
      position: absolute;
      top: 4px;
      left: -10px; }
    #category .content .color a.green::before {
      content: url("../images/green_icon.webp");
      position: absolute;
      top: 4px;
      left: -10px; }
    #category .content .color a.other::before {
      content: url("../images/other_icon.webp");
      position: absolute;
      top: 4px;
      left: -10px; }
#category .content .size {
  width: 548px; }
  #category .content .size .flex {
    flex-wrap: wrap;
    padding: 30px 0; }
#category .content .use,
#category .content .level {
  width: 293px; }
  #category .content .use div,
  #category .content .level div {
    padding: 30px 0; }
	
	#category .content .size .flex a,
    #category .content .use div a,
    #category .content .level div a {
			display:inline-block;
			width:120px;
			margin-right:20px;
			text-align:center;
			padding: 5px 0;
			box-sizing: border-box;
			border:1px solid #000;
			border-radius:5px;
			line-height:1em;
			margin-bottom:20px;
			 }

#special .content {
	width:auto;
	}
 #special .content .slideOuter {
	  background:#FAE3DE;
	  padding:40px 40px 40px;
	 }
#special .content .special_slider {
 width:1071px;
    margin:0 auto;
   }
  #special .content .special_slider .slick-slide a img { }
  #special .content .special_slider .slick-dots {
    bottom: -30px; }
    #special .content .special_slider .slick-dots li button::before {
      content: "〇";
      color: #FFF;
      opacity: 1.0;
      font-size: 16px; }
    #special .content .special_slider .slick-dots li.slick-active button::before {
      content: "●"; }

#magazine .content .flex {
  margin: 0 -6px; }
  #magazine .content .flex div {
    width: 376px;
    margin: 2% 6px;
    box-sizing: border-box; }
    #magazine .content .flex div a.thumbs {
      border: 40px solid #FAE3DE;
      box-sizing: border-box; }
      #magazine .content .flex div a.thumbs img {
        width: 100%; }
    #magazine .content .flex div a p {
      padding: 5px;
      box-sizing: border-box; }

#about .content .flex {
  margin: 0 -6px; }
  #about .content .flex div {
    width: 376px;
    margin: 2% 6px; }
	#about .content .flex div .thumbs {display:block;border:1px solid #ccc;}
    #about .content .flex div a p {
      padding: 5px;
      box-sizing: border-box; }


/* メイクカテゴリ用 */
#makeup .content .flex {
  margin: 0 -6px;
}

#makeup .content .flex div {
  width: 376px;
  margin: 2% 6px;
  box-sizing: border-box;
}

#makeup .content .flex div a.thumbs {
  border: 40px solid #FAE3DE;
  box-sizing: border-box;
}

#makeup .content .flex div a.thumbs img {
  width: 100%;
}

#makeup .content .flex div a p {
  padding: 5px;
  box-sizing: border-box;
}

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