@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
.pickupLayout th,.pickupLayout h1,.pickupLayout h2,.pickupLayout h3,.pickupLayout h4,.pickupLayout h5,.pickupLayout h6{color:#333;}
#eyelashchart .visible-xxs{display:none!important;}

#eyelashchart a:hover,
#eyelashchart a:hover figure img{
	opacity:0.7;
}

#eyelashchart a:hover{
	color: #d83980;
	text-decoration: none;
}
#eyelashchart img{max-width:100%; height:auto;}
#eyelashchart{
	width:100%;
	font-size: 16px;
	line-height:1.6;
	color:#333;
	position:relative;
	font-family:"Yu Gothic", "YuGothic", "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", Meiryo, "Open Sans", Helvetica, Arial, -apple-system, blinkMacSystemFont, sans-serif;
}
#eyelashchart #sectionWrap h2{
	text-align:center;
	font-size:30px;
	width: fit-content;
    margin: 20px auto 0;
}

#eyelashchart #sectionWrap h2 span{
	border-top: 1px solid #333333;
	border-bottom:1px solid #333333;
	padding-bottom:10px;
	padding-top:10px;
}

@media (max-width: 767px) {
  #eyelashchart .container,
  #eyelashchart .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }
  #eyelashchart .container .row,
  #eyelashchart .container-fluid .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  #eyelashchart .container .row [class*="col-"],
  #eyelashchart .container-fluid .row [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media screen and (max-width: 479px){
	#eyelashchart #sectionWrap h2{margin-top:10px;}
}

/* =================== #kv =================== */

#eyelashchart #kv{
	width:100%;
	position:relative;
}
#eyelashchart #kv h1{
	height:280px;
	background:url(../img/kv_bg.jpg),#ffd1d1;
	background-repeat:no-repeat;
	background-position:center top;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

#eyelashchart #kv h1+p{
	width: 780px;
    margin: 0 auto;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    position: absolute;
    left: 50%;
    top: 67%;
    transform: translateX(-50%);
}
#eyelashchart #kv h1+p span{
	font-size:55px;
}

#eyelashchart #sectionWrap .textLink{
	text-align: center;
	margin-top: 2rem;
}

#eyelashchart #sectionWrap .textLink a{
	text-decoration: underline;
	font-weight: bold;
	color: #d83980;
}

@media screen and (max-width: 1024px){
	#eyelashchart #kv h1{
		background:url(../img/kv_bg_tablet.jpg),#ffd1d1;
	    background-size: contain;
		height: 0;
		padding-top: 30rem;
		width: 100%;
		background-repeat: no-repeat;
		background-position: center top;
	}
	
	#eyelashchart #kv h1+p{
		top:72%;
		font-size: 14px;
		padding: 0;
		
	}
}

@media screen and (max-width: 767px){
	#eyelashchart #kv h1{
		width:100%;
		height:0;
		padding-top:65%;
		background:url(../img/kv_bg_sp.jpg) no-repeat center top;
		background-size:contain;
	}
	
	#eyelashchart #kv h1+p{
	    width: 80%;
		top: 38.888%;
		font-size: 13px;
	}
}



/* =============== .brandWrap =============== */

#eyelashchart #sectionWrap .brandWrap > li{
	margin-top:20px;
	padding-top:10px;
}
#eyelashchart #sectionWrap .brandWrap > li .ttlBox{
	width:100%;
	display:table;
	margin-bottom:6px;
	table-layout: fixed;
	border: 1px solid #ded6d6;
}


#eyelashchart #sectionWrap .brandWrap > li .ttlBox .logo{
	width: 210px;
	margin: 0 auto;
}

#eyelashchart #sectionWrap .brandWrap > li .ttlBox > ul{
    display: table;
    table-layout: fixed;
    margin-top: 1rem;
	margin-bottom: 1rem;
	margin-left: 1rem;
}
#eyelashchart #sectionWrap .morebtn{
	width: 100%;
    padding: 0 24px 18px;
    display: block;
    text-align: right;
    position: relative;
	font-weight: bold;
}

#eyelashchart #sectionWrap a:hover .morebtn{
	text-decoration: underline;
}

#eyelashchart #sectionWrap .morebtn:after{
    content: "\f105";
    font-family: FontAwesome;
    position: absolute;
    display: block;
    top: 0;
    right: 12px;
}
#eyelashchart #sectionWrap .brandWrap > li .ttlBox > ul li{
	margin:2px 0;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	padding:4px 7px;
	margin-left:4px;
	float:left;
	text-align:center;
	border-radius:3px;
	line-height:1.0;
	font-family:"Yu Gothic Medium", "YuGothic", "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", Meiryo, "Open Sans", Helvetica, Arial, -apple-system, blinkMacSystemFont, sans-serif;
}


#eyelashchart #sectionWrap .brandWrap > li .ttlBox > ul li.flat{background:#eb98bd;}
#eyelashchart #sectionWrap .brandWrap > li .ttlBox > ul li.single{background:#ff9fad;}
#eyelashchart #sectionWrap .brandWrap > li .ttlBox > ul li.volume{background:#ffc180;}
#eyelashchart #sectionWrap .brandWrap > li .ttlBox > ul li.fan{background:#bd8fd0;}

#eyelashchart #sectionWrap .brandWrap > li .series ul{
	background:#FFF7F7;
	border:1px solid #EEE;
	padding:4px 14px 14px 0;
	overflow:hidden;
}
#eyelashchart #sectionWrap .brandWrap > li .series ul li{
	float:left;
	display:block;
	padding:0 0 0 14px;
	margin:11px 0 0 0;
	position:relative;
	line-height:1.2;
}
html[data-magic-ua="ie"] #eyelashchart #sectionWrap .brandWrap > li .series ul li{line-height:0.9;}
#eyelashchart #sectionWrap .brandWrap > li .series ul li:before{
	content:"\f138";
	margin-right:4px;
	display:inline;
	font-family: FontAwesome;
	text-rendering:auto;
	-webkit-font-smoothing:antialiased;
	color:#FB71AD;
	position:absolute;
	left:14px;
	top:1px;
}
#eyelashchart #sectionWrap .brandWrap > li .series ul li a{
	font-weight:bold;
	line-height:1.2;
	padding-left:18px;
}

@media screen and (max-width: 768px){
	#eyelashchart #sectionWrap .brandWrap > li .ttlBox > section{padding-left:4%;}
	#eyelashchart #sectionWrap .brandWrap > li .ttlBox > section .priceBox a{font-size:14px}
}
@media screen and (min-width:480px) and (max-width:767px){
	#eyelashchart #sectionWrap .brandWrap > li .ttlBox > section > ul li{font-size:11px;}
	#eyelashchart #sectionWrap .brandWrap > li .ttlBox > section h3{font-size:18px;}
	#eyelashchart #sectionWrap .brandWrap > li .ttlBox > section .priceBox{font-size:13px;}
	#eyelashchart #sectionWrap .brandWrap > li .ttlBox > section .priceBox span{font-size:17px;}
	#eyelashchart #sectionWrap .brandWrap > li .series ul li a{font-size:14px;}
}
@media screen and (min-width:480px) and (max-width:530px){
	#eyelashchart #sectionWrap .brandWrap > li .ttlBox > p{width:28%;}
	#eyelashchart #sectionWrap .brandWrap > li .ttlBox > section .priceBox span{font-size:14px;}
}
@media screen and (max-width: 479px){
	#eyelashchart #sectionWrap.container{
    padding-left: 0;
    padding-right: 0;
  }
  #eyelashchart #sectionWrap.container .row{
    width: 96%;
    margin: 0 auto;
  }
  #eyelashchart #sectionWrap.container .row [class*="col-"]{
    padding-left: 0;
    padding-right: 0;
  }
	#eyelashchart #sectionWrap.container .row .brandWrap li{
		padding:0;
	}
	#eyelashchart #sectionWrap h2{
		font-size:20px;
		margin-top:20px;
		padding-bottom:6px;
	}
	#eyelashchart #sectionWrap .brandWrap > li{
		width:100%;
		margin-top:24px;
	}
	#eyelashchart #sectionWrap .brandWrap > li .ttlBox > section > ul li{font-size:12px;}
	#eyelashchart #sectionWrap .brandWrap > li .ttlBox > section h3{font-size:18px;}
}

/* =============== #brandModal =============== */
#eyelashchart .btn.btn-primary{
	width:94%;
	margin:18px 3% 0;
	padding:8px 10px;
	border:1px solid #d83980;
	color:#d83980;
	background:#FFF;
}
#eyelashchart .btn.btn-primary.touch{
	color:#FFF;
	background:#d83980;
	text-decoration:none;
}
#brandMenu.modal:before{
	height:auto;
}
#brandMenu .modal-dialog{
	width:96%;
	margin:10px 2%;
}
#brandMenu .modal-header{
	background:#FFF7F7;
	border-radius:8px;
	border-bottom:1px solid #e5e5e5;
}
#brandMenu .modal-header .close{
	margin-top:2px;
}
#brandMenu .modal-title{
	font-size:18px;
	padding-right:30px;
	color:#F94894;
}
#brandMenu .modal-body{padding:0;}
#brandMenu .modal-body ul{
	width:100%;
	overflow:hidden;
}
#brandMenu .modal-body ul li,
#brandMenu .modal-body ul li a{
	display: -webkit-flex;
 	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 	align-items: center; /* 縦方向中央揃え */
}
#brandMenu .modal-body ul li{
	width:50%;
	float:left;
	border-bottom:1px solid #e5e5e5;
	box-sizing:border-box;
	font-size:16px;
	vertical-align:middle;
}
#brandMenu .modal-body ul li:nth-child(2n-1){
	border-right:1px solid #e5e5e5;
}
#brandMenu .modal-body ul li a{
	width:100%;
	font-size:15px;
	padding:10px 20px 10px 14px;
	font-weight:bold;
	color:#444;
	position:relative;
	line-height:1.4;
}
#brandMenu .modal-body ul li a:after{
	content:"\f105";
	display:inline;
	font-family: FontAwesome;
	color:#FB71AD;
	text-rendering:auto;
	-webkit-font-smoothing:antialiased;
	position:absolute;
	right:6px;
	top:50%;
	margin-top:-12px;
}
#brandMenu .modal-body ul li a.touch{
	color:#F94894;
	text-decoration:none;
	background:#F7F6F6;
}
#brandMenu .modal-footer{
	border-top:none;
}
#brandMenu .modal-footer .btn.btn-primary{
	margin-top:0;
}
.fadeIn{
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fadeIn.in {
  opacity: 1;
}
.modal.fadeIn .modal-dialog{
  -webkit-transform: translate3d(0, -40px, 0);
  transform: translate3d(0, -40px, 0);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal.fadeIn.in .modal-dialog{
	-webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}