@charset "utf-8";


/* designnail
------------------------------------------------------- */
#page-content img {
        width:100%;
        }
#page-content h3  {text-align:center;}
#page-content h3 span img {width:4.6%;}

#movies {
        margin:0 4%;
        position:relative;
        }

section.bg_alls {
        background:url(/smp/img/enjoy/designnail/bg_useitem.png) no-repeat right 18%;
        background-size:47% auto;
        }

#movies h1.ititle {
        width:40%;
        text-align:right;
        }
        
        #movies h1.ititle span {
        display:block;
        margin-top:5px;
        font-size:11px;
        text-align:center;
        }

#movies .btn_sns {
	width:21.5%;
	position:absolute;
	right:-2%;
	bottom:-6.5%;
	z-index:98;
	cursor:pointer;
	}

#movies #snsarea {
	display:none;
	background:#8d98c3;
	position:absolute;
	width:37%;
	right:1%;
	padding:2%;
	bottom:-56.8%;
	z-index:99;
	}

#movies #snsarea:before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7.5px 10px 7.5px;
	border-color: transparent transparent #8d98c3 transparent;
	display: block;
	content: "";
	position: absolute;
	top: -10%;
	right: 15%;
	}

#movies #snsarea li.line img {
	width:20%;
	height:auto;
	}

#use_item {
	position:relative;
	margin-bottom:5%;
	}

#use_item dd {
	width:90%;
	margin:0 auto;
	position:relative;
	}

#use_item dd p {
	overflow:hidden;
	margin:2% 0;
	}

#use_item span {
	display:block;
	font-size:1.1rem;
	padding-top:1%;
	}

#use_item span.item {
	width:58%;
	float:left;
	padding-top:3.5%;
	}

#use_item span.item img {
	width:11%;
	}

#use_item a {
	display:block;
	width:40%;
	float:right;
	}

/**/
#category {
	margin:5% 0;
	}

#category.temp  #list2 {
        /*margin:5% 2% 10%;*/
        margin:5% 2% 10% 2%;
        position:relative;
        }

#category .notes {
	margin:0 4% 0;
	text-align:right;
	}

#category .btn_more {
	width:63%;
	margin:0 auto 3%;
	}

#list2 {
        margin:5% 2% 10% 1%;
        position:relative;
        }

#list2 li {
        float:left;
        position:relative;
        }

#list2 .large li {
	width:100%;
	}

#list2 .medium li {
	width:50%;
	}

#list2 .small li {
	width:33%;
	}

#list2 li p {
        text-align: center;
        height:100%;
        margin:12% 0 0 8%;
	width:87%;
        }

#list2 li a {
	color:#000;
	}

#list2 li p.nailname {
        margin:0% 0 0 4%;
	padding:0 0 3%;
	height:40px;
	line-height:1.2;
	font-size:1.2rem;
	}

#list2 li p.nailname span {
	display:block;
	}

#list2 li img {
	width:100%;
	height:auto;
	}

#list2 li {
        text-align:center;
        margin-bottom:3%;
        }

#list2 li p {
        padding:2px;
        }

#list2 li span.new {
        position:absolute;
        top:0%;
        left:0%;
        width:33%;
        }

#list2 li.star3 .nailname {
	background:url(/smp/img/enjoy/designnail/icon/icon_star3.png) no-repeat center bottom;
	background-size:auto 13px;
	}

#list2 li.star2 .nailname {
	background:url(/smp/img/enjoy/designnail/icon/icon_star2.png) no-repeat center bottom;
	background-size:auto 13px;
	}

#list2 li.star1 .nailname {
	background:url(/smp/img/enjoy/designnail/icon/icon_star1.png) no-repeat center bottom;
	background-size:auto 13px;
	}

/*大のとき*/
#list2 ul.large li span.new {
        position:absolute;
        top:10%;
        left:5%;
        width:20%;
        }

#list2 ul.large li p {
        margin: 0 auto;
        width: 90%;
        }

#list2 ul.large li p.nailname {
	padding: 1.5% 0 7%;
	height:auto;
	font-size:1.2rem;
	}

#list2 ul.large li p.nailname span {
	display: inline;
	}

#list2 ul.large li.star3 .nailname {
	background-size:auto 17px;
	}

#list2 ul.large li.star2 .nailname {
	background-size:auto 17px;
	}

#list2 ul.large li.star1 .nailname {
	background-size:auto 17px;
	}

/* レイアウト変更追加 上書きcss 整理必要--slide views--*/

#movies{
	margin-bottom:-14%;
	}
#movies .frame{
	padding:2% 0;
	width: 55%;
	position: absolute;
	right: 2%;
	top: 20%;
	text-align: center;
	background:url(/smp/img/enjoy/designnail/bg_movie.png) no-repeat;
	background-size:100% 100%;
	}
#movies .frame .youtube{
	width:90%;
	margin:0 auto;
	position:relative;
	padding-bottom:45%;/*56.25%;*/
	padding-top:40px;
	height:0;
	overflow:hidden;
	}
#movies .frame .youtube iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	}


#use_item dl{
	margin-top:20%;
	}
	#use_item dl dt {
		margin:0 0 2% 0;
	}
	#use_item dl dd {
		width:90%;
		margin:0 auto;
		position:relative;
		display:table;
	}
	#use_item dd.base,
	#use_item dd.color{
		padding:0 0 2em 0;
	}
	#use_item dl dd p {
		display: table-row;
	}
	#use_item dl dd span {
		display:block;
		font-size:1.1rem;
		padding-top:1%;
	}

		#use_item dl dd .img {
			display: table-cell;
			width:11%;
			float:none;
			text-align:center;
			vertical-align: middle;
		}

			#use_item dl dd .img img{
				width:80%;
				vertical-align: middle;
				padding:0 0 20% 0;
			}
		#use_item dl dd .name {
			display: table-cell;
			width:auto;
			float:none;
			vertical-align: middle;
			padding: 2% 0;
		}

		#use_item dl dd.color .name {
			padding: 3% 0 2%;
		}

			#use_item dl dd .name img {
				width:11%;
				padding:0 0 0 2%;
			}

	#use_item dl dd a {
		display: table-cell;
		width: 30%;
		float:none;
		vertical-align: middle;
	}

	#use_item dl dd.base a {
		display: block;
		width: 100%;
		float:none;
		vertical-align: middle;
		color:#000;
	}

	#use_item dl dd a img{
		vertical-align: middle;
	}

/*step*/
#step {
	background-image:
        url(/smp/img/enjoy/designnail/step/bg_step_top.png),
        url(/smp/img/enjoy/designnail/step/bg_step_btm.png),
        url(/smp/img/enjoy/designnail/step/bg_step_cnt.png);
        background-repeat:no-repeat,no-repeat,repeat-y;
        background-position:left top,left bottom,left top;
        background-size:100% auto,100% auto,100% auto;
        overflow:hidden;
	}

#step > div {
	padding:60px 0 13%;
	background:url(/smp/img/enjoy/designnail/title_howto.png) no-repeat 21.5% 30px;
	background-size:53% auto;
	}


/*横*/
@media only screen and (orientation : landscape) {
#step > div {
	padding:100px 0 13%;
	background:url(/smp/img/enjoy/designnail/title_howto.png) no-repeat 21.5% 50px;
	}

}

#step > div dl {
	margin:0 4% 5%;
	}

#step > div dl dt {
	text-align:center;
	position:relative;
	margin-bottom:2%;
	}

#step > div dl dt span {
	position:absolute;
	top:0;
	left:10%;
	display:block;
	width:18%;
	}

#step > div dl dt img {
	margin-top:5%;
	width:66%;
	}

#step > div dl dd {
	font-size:1.2rem;
	width:78%;
	margin:0 auto;
	}



#step > div .point {
	margin: -5% 10% 5%;
	background-image:
        url(/smp/img/howto/frame/bg_point_top.png),
        url(/smp/img/howto/frame/bg_point_bottom.png),
        url(/smp/img/howto/frame/bg_point_center.png);
        background-repeat:no-repeat,no-repeat,repeat-y;
        background-position:left top,left bottom,left top;
        background-size:100% auto,100% auto,100% auto;
        padding:8% 0 10%;
	}

/*iphone*/
@media screen and (max-device-width: 480px) {
#step > div .point { padding:8% 0 2%;overflow:hidden; }
}


#step > div .point dl {
	clear:both;
	width:94%;
	margin:0 auto;
	overflow:hidden;
	}

#step > div .point dt {
	clear:both;
	float:left;
	width:50%;
	height:100%;
	}

#step > div .point dl:nth-child(even) {
	margin-top:5%;
	}

#step > div .point dt img {
	width:88%;
	}

#step > div .point dd {
	padding:1% 0 0;
	color:#fff;
	width:95%;
	font-size:1.1rem;
	margin:0 auto;
	height:100%;
	line-height:1.7rem;
	}

@media only screen and (orientation : landscape) {
#step > div .point dd,
#step > div dl dd {
	font-size:1.6rem;
	line-height:1.6;
	}
}

#step > div .point dd {
	padding:2% 0 0;
	}


/* index
------------------------------------------------------- */
#index2 h1 img {width:100%;}

#index2 .categoryselect {
	padding:2% 2% 3%;
	background:url(/smp/img/enjoy/designnail/bg_category_close.png) no-repeat left top;
	background-size:100% auto;
	color:#fff;
	font-size:1.2rem;
	}

#index2 .categoryselect span {
	display:block;
	}

#index2 .select2 {
	display:none;
	}

#index2 .result {
	text-align:center;
	padding:0.5% 0;
	font-size:1.2rem;
	}

#index2 #tags2 .cat2 {
	position:relative;
	overflow:hidden;
	float:left;
	margin:0 auto 2%;
	padding-right:1%;
	}

#index2 #tags2 .color2{
	width:40%;
	}

#index2 #tags2 #color_area2{
	width:100%;
	}

#index2  #tags2 .cat2.last {
	padding-right:0;
	}

#index2 #tags2 {
	margin:2.5% auto;
	width:94%;
	}

#index2 #tags2 #sizeselect {
	text-align:center;
	padding:3% 0 0;
	}

#index2 #tags2 #sizeselect span {
	padding:10px;
	}

#index2 #tags2 span.select2 {
	color:#e5107d;
	}

#index2  #tags2 .cat2 > div {
	padding-top:5px;
	position:relative;
	}

#index2 #tags2 .cat2 p {
	}

#index2 #tags2 .cat2.all {
	border:none;
	}

#index2 #tags2 #sizeselect {
	clear:both;
	}

/*縦*/
@media only screen and (orientation : portrait) {
#index2 #tags2 #sizeselect {
	font-size:1.3rem;
	}

#list2 ul.large li p.nailname {
	font-size:1.75rem;
	}
}


/*横*/
@media only screen and (orientation : landscape) {
#index2 #tags2 #sizeselect  {
	font-size:2.4rem;
	}


#list2 ul li.star3 .nailname {
	background-size:auto 17px;
	}

#list2 ul li.star2 .nailname {
	background-size:auto 17px;
	}

#list2 ul li.star1 .nailname {
	background-size:auto 17px;
	}

#list2 ul.large li p.nailname {
	font-size:3rem;
	}

#list2 ul.large li.star3 .nailname {
	background-size:auto 35px;
	}

#list2 ul.large li.star2 .nailname {
	background-size:auto 35px;
	}

#list2 ul.large li.star1 .nailname {
	background-size:auto 35px;
	}
}