@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:#111;}
#nailcolorchart .visible-xxs{display:none; !important}
#nailcolorchart a{text-decoration:none; display:block; color:#444;}
#nailcolorchart .touch{color:#F94894; text-decoration:underline;}
#nailcolorchart a.touch img{opacity:0.6;}
#nailcolorchart img{max-width:100%; height:auto;}
#nailcolorchart{
	width:100%;
	font-size: 16px;
	line-height:1.6;
	color:#111;
	position:relative;
	font-family:"Yu Gothic", "YuGothic", "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", Meiryo, "Open Sans", Helvetica, Arial, -apple-system, blinkMacSystemFont, sans-serif;
}
#nailcolorchart #sectionWrap h2{
	color:#F94894;
	text-align:center;
	border-bottom:1px solid #FEC5D3;
	font-size:30px;
	margin-top:40px;
	padding-bottom:6px;
}

@media screen and (max-width: 1199px){
	#nailcolorchart #sectionWrap h2{margin-top:30px;}
}
@media screen and (max-width: 1024px){
}
@media (max-width: 767px) {
  #nailcolorchart .container,
  #nailcolorchart .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }
  #nailcolorchart .container .row,
  #nailcolorchart .container-fluid .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  #nailcolorchart .container .row [class*="col-"],
  #nailcolorchart .container-fluid .row [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media screen and (max-width: 479px){
	#nailcolorchart .visible-xxs{display:block; !important}
	#nailcolorchart .hidden-xxs {display:none; !important}
	#nailcolorchart #sectionWrap h2{margin-top:10px;}
}

/* =================== #kv =================== */

#nailcolorchart #kv{
	width:100%;
	position:relative;
}
#nailcolorchart #kv h1{
	height:260px;
	background:url(../img/kv_bg.jpg),#F0F2F7;
	background-repeat:no-repeat;
	background-position:center top;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
#nailcolorchart #kv h1+p,
#nailcolorchart #kv h1+p span{
	line-height:1.0;
	text-shadow:1px 1px 0px #21919A;
	vertical-align:-4px;
}
#nailcolorchart #kv h1+p{
	width:600px;
	margin:0 auto;
	font-family:"Noto Sans Japanese","Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, "Open Sans", Helvetica, Arial, -apple-system, blinkMacSystemFont, sans-serif;
	color:#FFF;
	font-weight:500;
	font-size:37px;
	text-align:center;
	background:url(../img/kv_brand_bg.png) repeat;
	border:1px solid #FFF;
	border-radius:30px;
	padding:0 20px 6px;
	position:absolute;
	left:50%;
	top:28px;
	margin-left:-300px;
}
#nailcolorchart #kv h1+p span{
	font-size:55px;
}
@media screen and (max-width: 1024px){
	#nailcolorchart #kv h1{background:url(../img/kv_bg_tablet.jpg) no-repeat center top;}
}

@media screen and (max-width: 767px){
	#nailcolorchart #kv h1{
		width:100%;
		height:0;
		padding-top:44%;
		background:url(../img/kv_bg_sp.jpg) no-repeat center top;
		background-size:contain;
	}
	#nailcolorchart #kv h1+p{
		width:70%;
		font-size:28px;
		border-radius:20px;
		padding:0 10px 6px;
		position:absolute;
		left:15%;
		top:15%;
		margin-left:0;
	}
	#nailcolorchart #kv h1+p span{font-size:40px;}
}
@media screen and (max-width: 479px){
	#nailcolorchart #kv h1+p{
		font-size:20px;
		padding-top:4px;
		top:13%;
	}
	#nailcolorchart #kv h1+p span{font-size:28px;}
	#nailcolorchart #kv h1+p,#nailcolorchart #kv h1+p span{vertical-align:-3px;}
}


/* =============== .brandWrap =============== */

#nailcolorchart #sectionWrap .brandWrap > li{
	margin-top:40px;
	padding-top:10px;
}
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox{
	width:100%;
	display:table;
	margin-bottom:6px;
	table-layout: fixed;
}
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > p,
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section{
	display:table-cell;
	vertical-align:top;
}
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > p{
	width:38%;
	padding-top:7px;
}
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section{
	padding-left:5%;
	margin-top:0;
	padding-top:0;
}
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section h3{
	font-size:21px;
}
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section > ul{
	margin-left:-4px;
	overflow:hidden;
}
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section > ul li{
	margin:2px 0;
	font-size:13px;
	font-weight:bold;
	color:#FFF;
	padding:4px 8px;
	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;
}


#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section .priceBox{
	color:#FF396C;
	font-weight:bold;
	margin-bottom:2px;
}
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section .priceBox a{padding-top:3px;}
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section .priceBox span{font-size:20px;}
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section > ul li.uv{background:#3399FF;}
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section > ul li.led{background:#FF66CC;}
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section > ul li.soak{background:#FC6C4E;}
#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section > ul li.hard{background:#9376D9;}

#nailcolorchart #sectionWrap .brandWrap > li .series ul{
	background:#FFF7F7;
	border:1px solid #EEE;
	padding:4px 14px 14px 0;
	overflow:hidden;
}
#nailcolorchart #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"] #nailcolorchart #sectionWrap .brandWrap > li .series ul li{line-height:0.9;}
#nailcolorchart #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;
}
#nailcolorchart #sectionWrap .brandWrap > li .series ul li a{
	font-weight:bold;
	line-height:1.2;
	padding-left:18px;
}

@media screen and (max-width: 1199px){
	#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > p{width:32%;}
	#nailcolorchart #sectionWrap .brandWrap > li{margin-top:30px;}
}
@media screen and (max-width: 768px){
	#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section{padding-left:4%;}
	#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section .priceBox a{font-size:14px}
}
@media screen and (min-width:480px) and (max-width:767px){
	#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section > ul li{font-size:11px;}
	#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section h3{font-size:18px;}
	#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section .priceBox{font-size:13px;}
	#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section .priceBox span{font-size:17px;}
	#nailcolorchart #sectionWrap .brandWrap > li .series ul li a{font-size:14px;}
}
@media screen and (min-width:480px) and (max-width:530px){
	#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > p{width:28%;}
	#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section .priceBox span{font-size:14px;}
}
@media screen and (max-width: 479px){
	#nailcolorchart #sectionWrap.container{
    padding-left: 0;
    padding-right: 0;
  }
  #nailcolorchart #sectionWrap.container .row{
    margin-left: 0;
    margin-right: 0;
  }
  #nailcolorchart #sectionWrap.container .row [class*="col-"]{
    padding-left: 0;
    padding-right: 0;
  }
	#nailcolorchart #sectionWrap.container .row .brandWrap li{
		padding:0;
	}
	#nailcolorchart #sectionWrap h2{
		font-size:20px;
		margin-top:20px;
		padding-bottom:6px;
	}
	#nailcolorchart #sectionWrap .brandWrap > li{
		width:100%;
		margin-top:24px;
	}
	#nailcolorchart #sectionWrap .brandWrap > li .ttlBox{padding-left:14px;}
	#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section > ul li{font-size:12px;}
	#nailcolorchart #sectionWrap .brandWrap > li .ttlBox > section h3{font-size:18px;}
}

/* =============== #brandModal =============== */
#nailcolorchart .btn.btn-primary{
	width:94%;
	margin:18px 3% 0;
	padding:8px 10px;
	border:1px solid #04A2AF;
	color:#04A2AF;
	background:#FFF;
}
#nailcolorchart .btn.btn-primary.touch{
	color:#FFF;
	background:#04A2AF;
	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);
}