@charset "utf-8";

/*** Ravijour CSS Document *******************************************

	top.css

******************************************************************* */
body{
	background-color: #FFF;
}
body.is-hidden{
  opacity:0;
}
body.is-visible{
  opacity:1;
  transition:opacity 2s ease;
}

/*========================================
 共通Css
========================================*/
#SectionBody{width:940px;margin:0 auto 50px;}
@media screen and (max-width: 768px) {
  #SectionBody{
  width:92%;
  }
}
@media screen and (max-width: 1134px) {
  #SectionBody{
  width:92%;
  }
}
/*タイトル*/

/*横並び*/
/*#SectionBody .List{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;}
*//*カラー*/

/*背景色*/
#SectionBody .List li{position: relative;}
#SectionBody .List .ttx{bottom: 0;background-color: rgba(255,255,255,0.6);font-weight: 500;position: absolute;width: 100%;}

/*========================================
 #bannerBlockCss
========================================*/
#bannerBlock .topimage{width: 100%; max-width: 1026px; margin: 0 auto; overflow: hidden;}
#bannerBlock .topimage img { width: 100%; height: auto; }
#bannerBlock .topimage .lt { display: inline-block; vertical-align: middle; width: 66%; }
#bannerBlock .topimage .rt { display: inline-block; vertical-align: middle; width: 34%; }
#bannerBlock .topimage h3 {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
    text-align: center;
    width: 80%;
    margin: 0 auto 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3";
}
#bannerBlock .topimage h3 small {
    font-size: 11px;
    font-weight: normal;
}
#bannerBlock .topimage p {
    font-size: 12px;
    line-height: 2;
    text-align: center;
    margin: 0 auto 10%;
    width: 70%;
}
#bannerBlock .Subimage{width: 100%; max-width: 1040px; margin: 16px auto 40px;}
#bannerBlock .Subimage h3 {
    font-size: 14px;
    font-weight: bold;
    line-height: 2;
    text-align: center;
    width: 80%;
    margin: 30px auto 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3";
}
#bannerBlock .Subimage h3 small {
    font-size: 10px;
    font-weight: normal;
}
#bannerBlock .Subimage p {
    font-size: 11px;
    line-height: 2;
    text-align: center;
    margin: 0 auto;
    width: 70%;
}
#bannerBlock a img { transition:opacity 0.5s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
#bannerBlock a img:hover { opacity: 0.75; }

.topSubSlider li {
    margin: 0 8px !important;
}
.slick-prev, .slick-next {
	top: 29.5% !important;
}
.slick-prev:before {
	background: url(../images_ravi/slick-pre2.png) no-repeat 50% 50% !important;
	background-size: contain !important;
}
.slick-next:before {
	background: url(../images_ravi/slick-next2.png) no-repeat 50% 50% !important;
	background-size: contain !important;
}
.topSubSlider .slick-prev {
	left: -1070px !important;
}
.topSubSlider .slick-next {
	right: -1070px !important;
}

.topSubSlider .slick-prev {
	left: -1070px !important;
}
.topSubSlider .slick-next {
	right: -1070px !important;
}

@media screen and (max-width: 1060px) {
	.topSubSlider .slick-prev, .topSubSlider .slick-next { display: none !important; }
}

/*@media screen and (max-width: 1112px) {
	.slick-slide img {
	    height: 326px;
	}
}*/


/*========================================
BraTypesCss
========================================*/
.BraList { margin: 0 auto 70px; }
.BraList ul { display: flex; justify-content: space-between; }
.BraList ul li { /*width: 32.2%;*/ width: 24.2%; }
.BraList ul li img { width: 100%; height: auto; }
.BraList h3 { font-size: 13px; font-weight:bold; margin: 20px auto 8px; padding-bottom: 8px; text-align: center; width: 80%; border-bottom: 1px solid #ddd; }
.BraList p { font-size: 11px; line-height: 1.8; margin: 0; text-align: center; }


/*========================================
BrandCss
========================================*/
.BrandList ul {font-size: 0}
.BrandList ul li { display: inline-block; width: 31%; }
.BrandList ul li:nth-child(2) { margin: 0 3.5% }
.BrandList ul li img { width: 100%; height: auto }
.BrandList ul li img:hover { opacity: .7 }


/*========================================
 CategoryCss
========================================*/
#SectionBody .CategoryList .List .ttx .En{font-size: 18px;}
#SectionBody .CategoryList .List .ttx.type1{padding: 9px 0;text-indent: 10px;}
#SectionBody .CategoryList .List .ttx.type1 .En{margin-right: 5px;}
#SectionBody .CategoryList .List .ttx.type2{line-height: 18px;padding: 5px 0px;text-align: center;}
#SectionBody .CategoryList .List .ttx.type2 span{display: block;}
/*========================================
 TopicsCss
========================================*/
#SectionBody .TopicsList .List .ttx{font-size: 14px;padding: 3px 10px 1px;min-height: 46px;}
/*========================================
 InstagramCss
========================================*/
#SectionBody .InstagramIcon:before{content: '';display: inline-block;position: relative;background: url(../images_ravi/InstagramIcon.jpg) no-repeat 50% 50%;width: 28px;height: 28px;margin: -10px 3px 0 0;vertical-align: middle;}
#SectionBody .InstagramIcon a, .SectionTitle .InstagramIcon .ja{color: #D91E78 !important;}
#SectionBody .InstagramList img{width: 100%;}
#SectionBody .InstagramList li{width: 180px;float: left;margin-left: 10px;}
#SectionBody .InstagramList li:first-child{width: 370px;margin-left: 0;}
#SectionBody .InstagramList li a:hover{opacity: 0.8;filter: alpha(opacity=80);-ms-filter: "alpha(opacity=80)";}
#SectionBody .InstagramList li:nth-child(5), .InstagramList li:nth-child(6), .InstagramList li:nth-child(7){margin-top: 10px;}

@media screen and (max-width: 768px) {
	#SectionBody .InstagramList li{width: 19.2%;float: left;margin-left: 1%;}
	#SectionBody .InstagramList li:first-child{width: 39.2%;margin-left: 0;}
	#SectionBody .InstagramList li:nth-child(5), .InstagramList li:nth-child(6), .InstagramList li:nth-child(7){margin-top: 1%;}
}
@media screen and (max-width: 1112px) {
	#SectionBody .InstagramList li{width: 19.2%;float: left;margin-left: 1%;}
	#SectionBody .InstagramList li:first-child{width: 39.2%;margin-left: 0;}
	#SectionBody .InstagramList li:nth-child(5), .InstagramList li:nth-child(6), .InstagramList li:nth-child(7){margin-top: 1%;}
}


.yotpo-slider .yotpo-display-wrapper .y-arrows .yotpo-icon-right-arrow-thin::before, .yotpo-slider .yotpo-display-wrapper .y-arrows .yotpo-icon-left-arrow-thin::before, .yotpo-visual-carousel .yotpo-display-wrapper .y-arrows .yotpo-icon-right-arrow-thin::before, .yotpo-visual-carousel .yotpo-display-wrapper .y-arrows .yotpo-icon-left-arrow-thin::before, .yotpo-pictures-widget .yotpo-display-wrapper .y-arrows .yotpo-icon-right-arrow-thin::before, .yotpo-pictures-widget .yotpo-display-wrapper .y-arrows .yotpo-icon-left-arrow-thin::before {
  font-size: 20px !important;
  margin-top: -10px !important;
}

/*========================================
 ArticleCss
========================================*/
.ArticleList dl dt.date{clear: left;float: left;color: #999;padding: 25px 0 25px 0;width: 120px;border-bottom: 1px solid #bdbbbb; font-size: 13px; letter-spacing: 0.5px; }
.ArticleList dl dd.infotxt{color: #333;border-bottom: 1px solid #bdbbbb;margin-left: 120px; font-size: 13px; letter-spacing: 0.5px; }
.ArticleList dl dd.infotxt a { display: block; padding: 25px; }
/*.ArticleList dl dd.infotxt a:hover { background: #fafafa; }*/

/*========================================
 ランキングページCss
========================================*/
#ranklistall .inner{background: #FFF;padding: 20px 0;}
#ranklistall h1{font-size: 40px;font-weight: 100;font-family:'Prata';/*font-family: "Montserrat";*/margin: 0 auto 10px;}
#ranklistall h1 small{font-size: 20px; display: inline-block; margin-left: 30px;}
#ranklistall .nav{margin-top: 5px;padding: 10px 0;border-top: 1px solid #999;border-bottom: 1px solid #999;}
#ranklistall .nav li{float: left;margin-left: 10px;}
#ranklistall .nav li:first-child{margin-left: 0;}
#ranklistall .nav a{display: block;color: #000 !important;text-decoration: none;text-align: center;font-size: 13px;line-height: 25px; padding:5px 9px;width: 160px;}
#ranklistall .nav a:hover,#ranklistall .nav a.active{background: #eee; border-radius: 18px;}

#ranklistall ul.subnav{width:100%;display:table;margin:-1px auto 25px}
#ranklistall ul.subnav li{display:inline-block;width:50%;box-sizing:border-box;display:table-cell;text-align:center}
#ranklistall ul.subnav li a{background:#f9f9f9;border-top:1px solid #ddd;border-bottom:1px solid #ddd;border-left:1px solid #ddd;border-right:1px solid #ddd;color:#777;display:block;font-size:13px;font-weight:300;letter-spacing:.075em;padding:14px;text-decoration:none}
#ranklistall ul.subnav li:first-child a{border-left:1px solid #f9f9f9;border-right:1px solid #f9f9f9}
#ranklistall ul.subnav li:last-child a{border-right:1px solid #f9f9f9;border-left:1px solid #f9f9f9}
#ranklistall ul.subnav li a.active{background:#fff!important;border-bottom:1px solid #fff;border-left:1px solid #aaa;border-right:1px solid #aaa;border-top:1px solid #aaa;color:#111}
#ranklistall ul.subnav li:first-child a.active{border-left:1px solid #f9f9f9;border-right:1px solid #aaa}
#ranklistall ul.subnav li:last-child a.active{border-right:1px solid #f9f9f9;border-left:1px solid #aaa}





#SectionBody .List .disblock li{
	display: inline-block;
	vertical-align: top;
	float: none;
	margin-bottom: 10px;
}

#SectionBody .List .disblock li:first-child, #SectionBody .List .disblock li:nth-child(2), #SectionBody .List .disblock li:nth-child(3) {
	width: 32.6%;
}
#SectionBody .List .disblock li:nth-child(4), #SectionBody .List .disblock li:nth-child(9), #SectionBody .List .disblock li:nth-child(14), #SectionBody .List .disblock li:nth-child(19),
#SectionBody .List .disblock li:nth-child(24), #SectionBody .List .disblock li:nth-child(29), #SectionBody .List .disblock li:nth-child(34), #SectionBody .List .disblock li:nth-child(39),
#SectionBody .List .disblock li:nth-child(44), #SectionBody .List .disblock li:nth-child(49)
 {margin-left: 0;}


#SectionBody .List .disblock li { transition:opacity 0.5s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
#SectionBody .List .disblock li:hover { opacity: 0.75; }

.content .lItem a { text-decoration: none; }