@charset "utf-8";

/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width: 640px) {

.pc{
    display:none;
}
.sp{ display:block;}
img {
    max-width: 100%;
    height: auto;
    width /***/: auto;
　
}
.txt-sm{font-size:1.1em;}
.txt-xs{font-size:1.1em;}
.background {
  background:none;
}
.backstretch{
    display:none;
}
body{
    -webkit-text-size-adjust: 100%;
    font-size:16px;
}
.image-responsive{
    width:100%;
    height:auto;
}
.inline{
    display:inline;
}

.anchor {
    margin-top: -30px;
    padding-top: 30px;
}
header, .wrap, .content{
    width:100%;
    min-width:460px;
    box-sizing:border-box;
}
.wrap.pd-top{
    padding-top:80px;
}
.content{
    padding:20px 0;
    box-sizing:border-box;
}
.narrow-sp{
    width:80%;
}
h3.top-headline{
    border:1px solid #a47840;
    text-align:center;
    display:inline-block;
    font-size:36px;
    padding:8px;
    margin-bottom:40px;
    line-height:110%;
    color: #892544;
}


/* header */


header{
    position:fixed;
    z-index:999;
}
header .content {
    padding: 20px 0 0 0;
}
header .logo{
    width:50%;
    padding-left:5%;
    box-sizing:border-box;
}
header .fr{
    width:50%;
    text-align:right;
    padding-right:16%;
    box-sizing:border-box;
}
header .button img{
    width:38%;
    height:auto;
    margin-left:5%;
}


.nav.sp .button-toggle {
    background:url(../images/toggle_off.png) no-repeat;
    width:34px;
    height:43px;
    position:absolute;
    top:20px;
    right:20px;
}

.nav.sp .button-toggle.active {
    background:url(../images/toggle_on.png) no-repeat;
}
.nav.sp .menu {
    float: none;
    width: 100%;
    height: auto;
    clear: both;
    box-sizing: border-box;
    margin:16px 0 0 0;
    position:relative;
}
.nav.sp .menu li a {
    display: block;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:14%;
    color:#892544;
    display: block;
    border:1px solid #892544;
    border-bottom:none;
    font-size:32px;
    letter-spacing: 0.2em;
}
.nav.sp .menu li:last-child a{
    border-bottom:1px solid #892544;
}
.nav.sp .menu img.toggle-arrow{
    position:absolute;
    top:-39px;
    right:1px;
}
.nav.sp .menu span{
    display:inline-block;
    margin-right:20px;
}


/* footer */

.footer .sns img{
    margin-left:10px;
}
.footer .page-top{
    width:8%;
    height:auto;
    margin-top:20px;
}
.footer .content{
    margin-top:80px;
}




/**********************************************************下層**/


/*-------------------------------------- 個別ページ */


/*-------------------------------------- index */

.bxslider{
    position:relative;
}
.bxslider .baloon-tweet{
    position:fixed;
    top:14px;
    left:10%;
    background:url(../images/baloon_tweet.png) no-repeat;
    width:134px;
    height:131px;
    box-sizing:border-box;
    padding:76px 0 0 20px;
}
.bxslider .baloon-like{
    position:fixed;
    bottom:14px;
    left:10%;
    background:url(../images/baloon_like_sp.png) no-repeat;
    width:134px;
    height:133px;
    box-sizing:border-box;
    padding:76px 0 0 20px;
}

.news {
    border: none;
    padding: 10px;
    width: 100%;
    box-sizing:border-box;
}
.news dl{
    width:100%;
    float:none;
    margin-top:10px;
}
.news dt{
    width:30%;
    float:left;
    text-align:right;
    margin-right:2%;
}
.news dd{
    float:right;
    width:62%;
}
.news dd span{
    display:none;
}
.map iframe{
    width:100%;
}

    .l-txt_main {
        padding: 20px;
    }

/*-------------------------------------- menu */

.w740, .w660{
    width:100%;
}
.tbl-menu{
    margin-top:0;
}
.tbl-menu tr{
/*    border-bottom:none;*/
}
.tbl-menu th, .tbl-menu td{
    padding:10px 0;
    width: 100%;
    display: block;
/*    vertical-align:middle;*/
}
.tbl-menu th span, .tbl-menu td .fl{
/*    display:none;*/
}
.menu-msg{
    padding:20px;
    width:100%;
}

/*-------------------------- stylist */
.stylist-photo{
    float:left;
    width:33%;
    margin-right:0;
}
.stylist-desc{
    float:right;
    width:64%;
    margin-right:0;
    line-height:220%;
}
.stylist-desc dt{
    font-size:21px;
}
.stylist-desc dd{
    font-weight:normal;
    font-size:32px;
}
.stylist-desc dd span{
    display:block;
    font-size:21px;
    margin-top:5px;
}
.stylist-desc .sp h3{
    font-size:21px;
    display:inline-block;
    border:1px solid #666;
    margin-top:10px;
    padding:0 10px;
}
.stylist-desc .sp p{
    margin:0;
    font-size:16px;
}
.stylist-desc .sp .twitter-follow{
    margin-top:10px;
}

/*-------------------------- hair catalog */

.hair-catalog{
    margin-left:0;
    margin-top:30px;
}
.hair-catalog li{
    float:left;
    border-bottom:none;
    width:50%;
}
.hair-catalog li .hair-wrap {
    width:100%;
}
.hair-catalog li:nth-child(even){
    float:right;
}
.hair-catalog li .hair-wrap{
    padding:0 5% 30px 5%;
    box-sizing:border-box;
    position: relative;
}
.hair-wrap h3{
    display:inline-block;
    text-align:center;
    width: 100%;
}

.hair-wrap p{
    margin-top:12px;
}

.hair-wrap img{
    height:auto;
}

/*-------------------------- nail catalog */

.nail-catalog{
    margin-left:0;
    margin-top:30px;
}
.nail-catalog li{
    float:left;
    border-bottom:none;
    width:50%;
}
.nail-catalog li:nth-child(even){
    float:right;
}
.nail-catalog li .nail-wrap{
    padding:0 5% 30px 5%;
    box-sizing:border-box;
    position: relative;
}

.nail-wrap h3{
    font-size:16px;
    font-weight:normal;
}
.hair-wrap p a{
    margin-top:0;
    margin-bottom:30px;
    width: 100%;
}
.nail-wrap .tr.sp span, .hair-wrap .tr.sp span{
    display:inline-block;
/*    background:#f0543c;*/
    color:#FFF;
    padding:0 20px;
    border:1px solid #666;
    font-size:18px;

    background: rgba(240, 84, 60, 0.75);
    position: absolute;
    right: 5%;
    z-index: 1;
}
.nail-wrap img{
    height:auto;
}

/*-------------------------- blog */

.blog-side{
    float:none;
    width:100%;
    height:auto;
    border-right:none;
    padding-left:30px;
}
.blog-side h3{
    font-size:18px;
}
.blog-side .blog-list a.current{
    background-position: left 8px;
}
.blog-main{
    float:none;
    width:100%;
    height:auto;
    margin-top:60px;
}
.blog-main iframe{
    height:auto;
    border:none;
}


/*-------------------------- contact */

.contact-msg{
    font-size:21px;
    width:100%;
    box-sizing:border-box;
    text-align:center;
}
.w70{
    width:70%;
}

.map-contact{
    margin-top:20px;
    min-width:460px;
}

    .l-table {
        display: block;
        width: 100%;
    }
    .l-table tr, .l-table tbody {
        display: block;
        width: 100%;
    }
    .l-table th, .l-table td {
        display: block;
/*        padding: 16px;*/
    }
    .l-table th {
        padding: 16px 0px;
    }
    .l-table td {
        padding: 0px 0px 16px 0px;
    }



}