@charset "utf-8";
/* CSS Document */


.fl{ float: left;}
.fr{ float: right;}

.spx,.sp{ display: none;}
.pcx,.pc{ display: block;}

@media screen and (max-width : 641px) {
.spx,.sp{ display: block;}
.pcx,.pc{ display: none;}
}

/*セルフネイル講座*/

.lesson{ font-size: 14px; line-height: 1.5em;}

.lesson .section{ overflow: hidden; margin-bottom: 3em; text-align: center;}
.lesson .cbx{  overflow: hidden; margin: 0 auto; text-align: center; width: 88%;}
.lesson .sps{ margin-bottom: 2em;}

.lesson .section p{ text-align: left;}

.lesson .read{ font-size: 120%; margin-bottom: 2em;}

.lesson p{ padding: 0;}

.lesson h3{ 
padding: 45px 0 0 60px; color: #FFF; font-size: 170%; height: 52px;
margin-bottom: 20px;
background-image:url(/page/images/lesson/lesson_ttl_bg.png);
background-repeat: no-repeat;
background-position: left;
background-size: 70% 70%;
}

.lesson h3 span{ font-size: 90%;}

.lesson .box01,.lesson .box02,.lesson .box03,.lesson .box04{ overflow: hidden; margin-bottom: 3em;}

.lesson .box01 .fl{ width: 45%; padding: 1%; float: left;
background:url(/page/images/lesson/lesson_bg01.png) repeat;}
.lesson .box01 .fr{ width: 45%; padding: 1%; float: right;
background:url(/page/images/lesson/lesson_bg02.png) repeat;}

.lesson .box01 .bx{ background: #FFF; padding: 5%; font-size: 120%;}
.lesson .box01 img{ margin-bottom: 1em;}
.lesson .box01 img,.lesson .box02 img{ width: 100%;}
.lesson b{ color: #f15757;}
.lesson .box01 h4{ color: #f15757; font-size: 120%; margin-bottom: 0.5em;}
.lesson .box01 h4 span{ font-size: 80%; color: #9c9898;}

.lesson .box02 .fl{ width: 55%; font-size: 120%; line-height: 1.7em;}
.lesson .box02 .fr{ width: 40%;}


.lesson .box03{ background: #f3f8fa; padding: 4%;}
.lesson .box03 img{ float: left;}
.lesson .box03 .fr{ width: 75%; padding: 1em 0 0 0;}

.lesson .box03 .bx{ overflow: hidden; margin-bottom: 1em; font-size: 110%;}
.lesson .box03 h4,.lesson .section h4{ font-size: 180%; color: #39b3de; margin-bottom: 0.5em;}
.lesson .section h4{ margin-bottom: 0.5em; line-height: 1em;}

.lesson .box04{width: 88% !important; margin: 0 auto 3em auto;}
.lesson .box04 table{border-left: 1px solid #39b3de; border-top: 1px solid #39b3de; width: 100% !important;
margin-bottom: 0.5em !important;}
.lesson .box04 th{ background-color: #aedbef; text-align: center;font-size: 120%;}
.lesson .box04 td{ text-align: center;}
.lesson .box04 td.bg{  background-color: #d6edf7; text-align: left; padding-left: 20px; font-size: 120%; font-weight: bold;}

.lesson .box04 th,
.lesson .box04 td{ border-right: 1px solid #39b3de; border-left: 1px solid #39b3de;
padding: 0.7em; border-bottom: 1px solid #39b3de; vertical-align: middle;}

.lesson .btbx{ text-align: center; margin-bottom: 3em;}

.lesson .section .caution { text-align: left; color: #333 !important; }
.lesson .section .caution b{ display:block; text-align: center; padding: 0.5em; 
background-color: #fffcde; margin-bottom: 1em; font-size: 120%; font-weight: bold;}

.lesson .section .caution ul{ margin-bottom: 1em;}
.lesson .section .caution ul li{ list-style: disc; font-size: 90%; margin-left: 20px;font-weight: normal;}
.lesson .section .caution ul li.ttl{ color: #f15757;list-style: none; margin-left: 0; font-weight: bold;}


#fp_v2 .hana4 { text-align: center;}
.hana4 b{color: #d62c2f;}
.hana4 .ttl{ background: #2c2c2c; color: #FFFFFF; text-align: center; padding: 10px;
font-size: 160%;}
.hana4 p{ display: block !important; margin-bottom: 3em !important;}

#fp_v2 .hana4 h1 {
    margin: 0 0 3em 0 !important; text-align: center;
}
.hana4,.hana4 p { font-size: 110% !important;}
.hana4,.hana4 p.L{ text-align: left;} 
.hana4 .bxbrack{background: #333; padding: 1em; overflow: hidden;     margin-bottom: 3em;}
.hana4 .bxwhite{background: #fff; padding: 1.5em 1em 1em 1em; overflow: hidden; width: 80%; margin: 0 auto; text-align: left;}
.hana4 .bxwhite p{ margin-bottom: 3em !important;}
.hana4 .bxwhite img{ margin-bottom: 1em;}
.hana4 .bxgray{ background: #f4f4f4; padding: 1.5em 1em; overflow: hidden; font-size: 120%; margin-bottom: 3em;}
.hana4 .bxgray span{ display: inline; border-bottom: 1px solid #d62c2f;}

.hana4 video { width: 100%;}

/*はがれ知らずセット*/
#hagare #content1 {
	position: relative;
}

#hagare #price {
	position: relative;
	z-index: 100;
}
#hagare #price img {
	width: 90% !important;
}

#hagare #content1 {
	position: relative;
	height: 880px;
}
#hagare #content1 img {
	width: auto;
}
#hagare #content1 .simg {
	width: auto;
}
#hagare #step1, #step2 {
	margin: 0;
}
#hagare #step1 img, #hagare #step2 img {
	margin: 0;
}
#hagare #step1 .stitle,
#hagare #step2 .stitle,
#hagare #step1 .sarrow,
#hagare #step2 .sarrow {
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	width: auto;
}
#hagare #step2 .sarrow {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
#hagare #content2 img {
	width: auto;
	margin: 0;
}
#hagare #content2 h2 img {
	width: 200px;
}
#hagare #product {
	position: relative;
}
#hagare #product #price {
	position: absolute;
	z-index: 100;
	left: 224px;
	display: block;
	width: 400px;
}
#hagare #course #contentWrap #productimg,#hagare #productimg {
	position: absolute;
	left: 120px;
	top: 276px;
	width: 547px !important;
	margin: 0;
}
#hagare #course #contentWrap #step1 img,
#hagare #course #contentWrap #step2 img,
	#hagare #step1 img,#hagare #step2 img{
	width: auto;
}
#hagare #step1 {
	position: absolute;
	left: 10px;
	top: 0;
}
#hagare #course #contentWrap #step1 .stitle,#hagare #step1 .stitle {
	position: absolute;
	top: 156px;
	left: 0;
	width: 200px;
}
#hagare #course #contentWrap #step1 .sarrow,#hagare #step1 .sarrow {
	position: absolute;
	top: 308px;
	left: 92px;
	width: 113px;
}
#hagare #course #contentWrap #step1 .stxt,#hagare #step1 .stxt {
	position: absolute;
	top: 384px;
	left: 0;
	float: none;
	margin: 0;
	width: 262px;
}
#hagare #step2 {
	position: absolute;
	right: 0;
	top: 0;
}
#hagare #course #contentWrap #step2 .stitle,#hagare #step2 .stitle {
	position: absolute;
	top: 248px;
	right: 0;
	width: 200px;
}
#hagare #course #contentWrap #step2 .sarrow,#hagare #step2 .sarrow {
	position: absolute;
	top: 416px;
	right: 104px;
	width: 68px;
}
#hagare #course #contentWrap #step2 .stxt,#hagare #step2 .stxt {
	position: absolute;
	top: 628px;
	right: 32px;
	float: none;
	margin: 0;
	width: 262px;
}
#hagare #content2 {
	clear: both;
	margin: 0;
}
#hagare #content2 h2 {
	float: left;
	width: 228px;
}
#hagare #content2 ol {
	float: right;
	width: 515px;
	text-align: left;
}
#hagare #content2 ol li {
	margin: 0 0 10px;
}
#hagare #content2 a {
	clear: both;
	display: block;
	margin-bottom: 30px;
	padding: 0;
}
	
#hagare #content2 .sps{ padding-top: 10px;}
#hagare #other {
	clear: both;
	text-align: center; padding: 80px 0;
}
#hagare #course #contentWrap #other img,#hagare #other img {
	width: auto;
}
	
#hagare #content2 #other img{ max-width: 627px;}

#hagare img {
	width: 100%;
	height: auto;
}

.basic 	{ font-size: 16px;}
.basic .sec{ width: 640px; margin: 0 auto 40px auto;}
.basic .c{ text-align: center;}
.basic p{ margin-bottom: 20px;}
.basic ul.nolist{ text-align: left;}
.basic ul.nolist li{ display: inline-block; margin-bottom: 10px;}
.basic ul.nolist li img{ margin-right: 5px;}
.basic .txbx{ margin-bottom: 30px; font-size: 80%; border: 1px dotted #cccccc;
	padding: 15px; line-height: 1.7em; background-color: #f4f4f4;}

.basic ul.nolist li span{ color: #ce141f;}

.basic .friends_read{ border-top: 21px solid #fff6ef;border-bottom: 21px solid #fff6ef;}
.basic .friends_read img{ width: 100%;}


.basic .bnrbx{ background-color: #f4f4f4; padding: 25px 15px 15px 15px; margin-bottom: 30px;}
	.basic .bnrbx .swich01,
	.basic .bnrbx .swich02{ margin-bottom: 20px;}
	.basic .bnrbx .box{ background-color: #FFFFFF; margin-bottom: 30px; overflow: hidden;}
	.basic .redbox{    background-color: #FFFFFF !important; width: 90%; margin: 0 auto;}
	.basic #detail .box{ display: none;}
	.basic #detail .bt,.basic #detail .bt_close{ cursor: pointer;}
	.basic .bnrbx #box01{ padding: 0 15px 15px 15px;}
.basic .bnrbx #box01 h3{ margin-bottom: 10px;}
	.basic .bnrbx #box01 .pointCol2{ margin-bottom: 15px !important; font-size: 100% !important;}
.basic .bnrbx #box01 .point2{ font-size: 120%; margin-bottom: 20px; text-align: left}
	.basic .bnrbx #box01 .point2 h4{ margin: 15px 0 0 0;}
	.basic .bnrbx #box01 .ttlPoint{ margin: 20px 0 30px;}
	.basic .bnrbx #box01,.basic .bnrbx #box02{ display: none;}
	.basic .bnrbx .ttlPoint {
    margin: 0 0 30px;}
	.basic .modal_parts_box {
    margin: 0 0 0 !important;}
.basic .bnrbx img{ width: 100%;}

.basic .pointCol2 {
	position: relative;
	text-align: left;
	clear: both;
}
.basic .pointCol2 h2,
.basic .pointCol2 h3,
.basic .pointCol2 p {
	float: left;
	width: 56%;
}
.basic .pointCol2 img {
	float: left;
	width: 40%;
	margin-bottom: 3%;
	padding: 0 2% 0 0;
}
.basic .pointCol2 p {
	margin-bottom: 3%;
}
.basic #gkVoice .basic .pointCol2 h3 {
	margin: 0;
	font-size: 13px;
	font-weight: bold;
}
.point2 h4 {
	margin: 3% 0 0;
}

.basic .productCol {
	float: left;
	width: 48%;
	min-height: 150px;
	margin: 2% 1%;
}
.basic #main_text #fp_v2 .productCol {
	font-size: 12px;
}
.basic .productCol h4,
.basic .productCol .productColTtl {
	color: #CA3139;
	font-weight: bold;
}

.basic .bnrbx .bt_close{ cursor: pointer; width: 173px;
display: block;
margin: 0 auto 30px auto;}



/*basicクーポン*/
#coupon{
z-index: 1000000;
width: 500px;
padding: 5%;
position: fixed;
display: none;
top: 50px;
right: 26%;
background: rgba(0,0,0,0.4);
}
#coupon img{ width: 100%;}

.sidekit{ position: fixed; top: 50px; right: 0; z-index: 9999999;overflow: hidden;
background-color: rgba(0,0,0,0.05);clear: both; padding: 15px 0 10px 10px;
display: none;}

.sidekit img{ display: block;margin-bottom: 10px;}

/*セルフネイル*/
#selfnail{ font-size: 16px;
font-family: "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";font-weight: 500; line-height: 1.8em;}

#selfnail p{ padding: 0 0 15px 0; line-height: 1.8em;}
#selfnail b{ color: #fd6666;}
#selfnail a{ text-decoration: underline; 
color: #b08c13;
font-size: 110%;
font-weight: bold;}

#selfnail .box01,#selfnail .box{ overflow:hidden;}

#selfnail .ttl{ text-align: center; width: 500px; margin-bottom: 10px;}
#selfnail .ttl img{ width: 100%;}

#selfnail .ttls{ background: url(../images/selfnail/ttls01_bg.png) repeat-x top; height: 49px;
text-align: center; padding: 10px 0 0 0;}
#selfnail .ttls img{ width:85px;}

#selfnail .read b{ font-size: 22px; margin-bottom: 20px; text-align: center; font-weight: 500;
padding: 0; display: block; line-height: 1.8em;}

#selfnail section h1{background: url(../images/selfnail/ttl_bgs.png) repeat-x top;
font-size: 30px; color: #fd6666; padding: 30px 30px 25px 30px;  font-weight: 500; line-height: 1.5em;}

#selfnail section h1 a{ font-size: 30px; color: #fd6666; }

#selfnail section{ margin: 0 auto 60px auto; overflow: hidden; width: 714px;}
#selfnail .box01{ border: 2px dotted #c1c0c0; padding: 34px; margin: 0 auto;}
#selfnail .box01 img{ float: left; width: 45%;}
#selfnail .box01 b{ background: url(../images/selfnail/illust01.png) no-repeat left top; font-weight: 500;
	background-size: 22px 47px; margin-bottom: 20px;
padding: 10px 0 10px 30px; font-size:20px; color:#fd6666; border-bottom: 1px solid #fd6666; text-align: left;}

#selfnail .box01 .bx{ float: right; width: 50%;}

#selfnail .box02 img{ width: 480px; margin: 0 auto 10px auto; display: block;}
#selfnail .box02 p{ padding: 25px 50px; background-color: #f6f3e6; line-height: 2em; font-size: 17px;
	
     }

#selfnail .box02 .bx {
	display: block;
	position: relative;
	width: 580px; margin: 0 auto;
}
#selfnail .box02 .bx:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background: #f6f3e6;*/
	box-shadow: 
	  inset 0 0 20px #ffffff /* 背景色と同じ色 */,
	  inset 0 0 30px #ffffff,
	  inset 0 0 30px #ffffff,
	  inset 0 0 20px #ffffff;
}

#selfnail .box{ background-color: #f7f6f4; padding: 30px;}
#selfnail .box img{ width: 320px;}
#selfnail .box img.fl{ margin: 0 20px 10px 0;}
#selfnail .box img.fr{ margin: 0 0 10px 20px;}
#selfnail .box p{ margin-bottom: 15px;}
#selfnail .matome img{ display: block; margin: 0 auto 10px auto; width: 218px;}
#selfnail .matome .box03{ padding: 30px 30px 20px 30px; border: 1px dotted #cdbc79; width: 80%; margin: 0 auto;}
#selfnail .matome .box03 p{color: #7c6508; line-height: 1.8em;}
#selfnail .bnr{ width: 100%; display: block; text-align: center; margin-bottom: 50px;}

#selfnail h2{ font-size: 120%; padding: 10px 15px; background: #e9e0c0;
 margin-bottom: 1.5em;}
#selfnail ul.selflist li{ border-bottom: 1px dotted #cdbc79; margin-bottom: 1em;
padding: 0  0 10px 10px; font-size: 100%;}
#selfnail ul.selflist li:before{
	content: "・";
	color: #b08c13;
}

#selfnail .box02 .bx b{ font-size: 110%; text-align: left; display: inline; margin: 0;}


@media screen and (max-width : 641px) {
/*セルフネイル*/
#selfnail img{ width: 100%;}
#selfnail{ font-size: 16px; text-align: left;
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
	font-weight: 500; line-height: 1.8em;}

#selfnail p{ padding: 0 0 10px 0; line-height: 1.8em;}
#selfnail b{ color: #fd6666;}
#selfnail a{ text-decoration: underline; 
color: #b08c13;
font-size: 110%;
font-weight: bold;}

#selfnail .box01,#selfnail .box{ overflow:hidden;}

#selfnail .ttl{ text-align: center; margin: 20px 0 0 0;}
#selfnail .ttl img{ width: 100%;}

#selfnail .ttls{ background: url(../images/selfnail/ttls01_bg.png) repeat-x top; height: 40px;
text-align: center; padding: 10px 0 0 0;}
#selfnail .ttls img{ width:25%;}

#selfnail .read b{ font-size: 17px; margin: 0 20px 20px 10px ;font-weight:500;
padding: 0; display: block; line-height: 1.8em; }

#selfnail section h1{background: url(../images/selfnail/ttl_bgs.png) repeat-x top;
font-size: 22px; color: #fd6666; padding: 20px 0 20px 15px;  font-weight:600; line-height: 1.6em;}
#selfnail section h1 a{ font-size: 22px; color: #fd6666; }

#selfnail section{ margin: 0 auto 40px auto !important; overflow: hidden; width: 96%; }
#selfnail .box01{ border: 2px dotted #c1c0c0; padding: 28px; margin: 0 2% 0 2%;}
#selfnail .box01 img{ margin-bottom: 20px;}
#selfnail .box01 b{ background: url(../images/selfnail/illust01.png) no-repeat left top; font-weight:600;
	background-size: 22px 47px; margin: 0 0 20px 0; font-size: 18px;
padding: 10px 0 10px 30px; color:#fd6666; border-bottom: 1px solid #fd6666; text-align: left;}

#selfnail .box .bx{ margin: 0 0 2em 0;}

#selfnail .box02 img{ width: 100%; margin: 0 auto 10px auto; display: block;}
#selfnail .box02 p{ padding: 25px 30px; background-color: #f6f3e6; 	line-height: 1.6em;
     }

#selfnail .box02 .bx {
	display: block;
	position: relative;
	width: 100%; margin: 0 auto ;
}
#selfnail .box02 .bx:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background: #f6f3e6;*/
	box-shadow: 
	  inset 0 0 20px #ffffff /* 背景色と同じ色 */,
	  inset 0 0 20px #ffffff,
	  inset 0 0 20px #ffffff,
	  inset 0 0 20px #ffffff;
}

#selfnail .box{ background-color: #f7f6f4; padding:  0 0 20px 0;}
	#selfnail .box img{ width: 100%;}
#selfnail .box img.fl{ margin: 0 0 10px 0; float: none;}
#selfnail .box img.fr{ margin: 0 0 10px 0;float: none;}
#selfnail .box p{ padding: 15px 20px 10px 20px;}
#selfnail .matome img{ display: block; margin: 0 auto 10px auto; width: 50%;}
#selfnail .matome .box03{ padding: 25px 30px 20px 30px; border: 1px dotted #cdbc79; width: 80%; margin: 0 auto;}
#selfnail .matome .box03 p{color: #7c6508; line-height: 1.8em; font-size: 16px;}
#selfnail .bnr{ width: 80%; display: block; text-align: center; margin: 0 auto 50px auto;}
#selfnail h2{ font-size: 100%; padding: 10px 15px; background: #e9e0c0;
 margin-bottom: 1em;}
#selfnail .box h2{ margin: 0;}
#selfnail ul.selflist li{ border-bottom: 1px dotted #cdbc79; margin-bottom: 0.5em;
padding: 0  0 10px 10px; font-size:80%; line-height: 1.4em;}
#selfnail ul.selflist li:before{
	content: "・";
	color: #b08c13;
}

#selfnail .box02 .bx b{ font-size: 100%; text-align: left; display: inline;
    margin: 0;}

.gwttl{ width: 96%; margin: 10px auto 10px auto;}
}

@media screen and (max-width: 640px){
#bread{
display:none;
}
}

@media screen and (min-width: 641px){
.sp_gaiyou{
display:none;
}
}

/*対談*/
#selfnail.interview section h1{ background: #fd6666; color: #FFFFFF;}
#selfnail.interview section.read .ttl{ text-align: center; width: 100%;}
#selfnail.interview section.read .ttl img{ width: 641px;}
.interview span.col01{ color: #fd6666;}
.interview span.col02{ color: #0692c6;}
#selfnail.interview .box01 .bx{ text-align: center; font-size: 120%; margin-top: 30px;}
#selfnail.interview .box01{ margin: 0 auto 30px auto; padding: 20px;}
#selfnail.interview .box01 img{ width: 50%;}

#selfnail.interview p{ margin: 0 0 10px 0; padding: 0;}

#selfnail.interview .box b{ color:#333333; font-weight: normal; background: #fcdddd;}

#selfnail.interview a{ color: #fd6666;}

#selfnail.interview .box .bx{ margin-bottom: 10px;}

@media screen and (max-width: 640px){
#selfnail.interview p{ margin: 20px 0 10px 0;}
#selfnail.interview section.read .ttl img{ width: 100%;}
	#selfnail.interview .box01{ border: none; padding: 0;}
	#selfnail.interview .box01 img{ width: 100%; margin-bottom: 20px;}
#selfnail.interview .box01 .bx { font-size: 100%;
    float: none;    overflow: hidden;
    width: 80%; margin: 0 auto 0 auto;
    border: 1px dotted #c1c0c0;
    padding: 5%;
}
	#selfnail.interview .box .bx{ padding: 0 10px;}
	
	.footkit,.footkit2{ text-align: center;position: fixed; bottom: 0; left: 0; z-index: 9999999;overflow: hidden; }
.footkit .bnr{ background-color: rgba(255,255,255,1);clear: both; padding: 4px 0 0 0;
border-top: 2px solid #C7C7C7;}

.footkit.bg .bnr{background-color: rgba(0,0,0,0.9);}
.footkit .bnr.ch{ background:none; border:none; padding: 0;}
.footkit a{ display: inline-block; width: 32%!important; margin: 0 1px;}
.footkit .bnr.ch a {
    width: 100%!important;
    margin: 0;
}
.footkit .ttl{ width: 50%!important; margin-bottom: 3px;}
.footkit .close{ width: 10% !important; float: right;}

.footkit a img{width: 100%!important;}
	
	.footkit2 .bnr a{ width: 96%;}
	.footkit2 .bnr a img{ width: 100%;}
.footkit2 .close{ width: 10% !important;}
.footkit2 .bnr{ background-color: rgba(0,0,0,0.5);clear: both; padding: 4px 4px 4px 4px;}
	
}

.basic h2.ttl {
    font-size: 130%;
    border-bottom: 10px solid #fbff00;
    margin-bottom: 30px;
}