@charset "utf-8";

/*-------------------------------------- 共通 */
img {
    max-width: 100%;
    height: auto;
    width: auto;
　
}
.sp{ display:none;}
.w100 {
    width: 100%;
}
img.w100{
    height:auto;
}

h2{
    background:#892544;
    text-align:center;
/*    padding-top:5px;*/
}
.anchor {
    margin-top: -50px;
    padding-top: 50px;
}

.l-logo.is-header  {
    max-height: 60px;
}

/* Header */

.fixed-header{
    position:fixed;
    z-index:8000;
    background:rgba(255,255,255,.7);
    padding:8px 0;
    width:100%;
}
.fixed-header .txt{
/*
    position:absolute;
    display: inline-block;
    top: 8px;
*/
    z-index: 1000;

    margin-top: -38px;
    text-align: left;
    top: 8px;
    height: 38px;
    line-height: 38px;

}
.fixed-header img {
    margin-left:14px;
    height: 38px;
    width: auto;
}
header{
    background:#FFF;
    width:100%;
    min-width:980px;
    position:relative;
    z-index:50;
}
header .content{
    padding:60px 0 40px 0;
}
header .sns{
    margin-top:40px;
}
header .sns img{
    margin-left:14px;
}

/* navi */
header .pc ul{
    display:table;
    table-layout:fixed;
    width:980px;
    border-top:1px solid #a47840;
    border-bottom:1px solid #a47840;
    margin-top:8px;
}
header .pc ul li{
    display:table-cell;
    text-align:center;
    font-size:18px;
    letter-spacing: 0;
    letter-spacing: 0.2em;
}

header .pc ul li a{
    padding-top:10px;
    padding-bottom:10px;
    display:block;
    color:#892544;
}
header .pc ul li a.current{
    color:#999;
}
header .pc ul li a:hover{
    color:#787878;
    text-decoration:none;
}


/* content */
.wrap{
    background:#FFF;
    width:100%;
    min-width:980px;
    position:relative;
    z-index:100;
}
.content{
    width:980px;
    margin: 0 auto;
}


.back-to-top{
    padding:5px 10px;
    background:#CCC;
    text-align:right;
    min-width:1000px;
}
.back-to-top a{
    display: inline-block;
    padding: 3px 20px;
    text-align: center;
    vertical-align: middle;
    border:1px solid #333;
}

/*-------------------------- top page */

#index .wrap, #index header{
    -webkit-transform: translate3d(0,0,0); /* safari z-index バグ用*/
}


.top-main {
    background-image:url(../images/top_main.jpg) no-repeat;
    position:relative;
    min-width:980px;
    z-index:1;
}
.backstretch{
    min-width:980px;
}
.top-main .logo-img{
    top: 33%;
/*    right: 33%;*/
    position:fixed;

    max-width: 409px;
    width: 41.7347%;
    margin: auto;
    right: 0px;
    left: 0px;
}
.top-main img.arrow-big{
    left: 0px;
    right: 0px;
    bottom: 30px;
    position:fixed;
    margin: 0px auto;
    top: auto;
}
.top-main .baloon-tweet{
    position:fixed;
    top: 66%;
    left: 33%;
    background:url(../images/baloon_tweet.png) no-repeat;
    width:134px;
    height:131px;
    box-sizing:border-box;
    padding:80px 0 0 20px;

    margin-left: -67px;
    margin-top: -65px;
}
.top-main .baloon-like{
    position:fixed;
    top: 66%;
    right: 33%;
    background:url(../images/baloon_like.png) no-repeat;
    width:134px;
    height:131px;
    box-sizing:border-box;
    padding:76px 0 0 20px;

    margin-right: -67px;
    margin-top: -65px;
}

/* news */
.news{
    width:926px;
    border:1px solid #a47840;
    padding:10px;
    margin-right:auto;
    margin-left:auto;
}
.news a{
    color:#4069af;
}
.news dl{
    width:600px;
    float:right;
    margin-top:10px;
}
.news dt{
    width:90px;
    float:left;
}
.news dd{
    float:right;
    width:500px;
}

/* menu */
.top-nav li{
    float:left;
    /*margin-right:10px;
    margin-bottom:14px;*/
    margin:0 6px 14px 6px;
    background-color: #000;
    width: 32%;
}
.top-nav a{
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

/* sns */
.sns .fl{
    width:600px;
    margin-left:20px;
}
.sns .fl .fb{
    width:600px;
    height:350px;
    margin-top:30px;
}
.sns .fr{
    width:320px;
    margin-right:20px;
}
.sns .fr .tw{
    width:320px;
    height:350px;
    margin-top:30px;
}

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

.w740{
    width:740px;
}
.w660{
    width:660px;
}

.no-border{
    width:100%;
}
.no-border th, .no-border td{
    padding:20px 0;
}
.no-border th{
    font-size:24px;
    font-weight:bold;
    width:290px;
}
.no-border td{
    font-size:18px;
}
.tbl-menu{
    width:100%;
    margin-top:20px;
}
.tbl-menu tr{
    border-bottom:1px solid #a47840;
}
.tbl-menu th, .tbl-menu td{
    font-size:22px;
    padding-top:20px;
    font-weight: bold;
    letter-spacing: -0.01em;
}
.tbl-menu th span{
    font-size:14px;
    line-height:140%;
    display:inline-block;
    font-weight: normal;
}
.tbl-menu th span.f22{
    font-size:22px;
}
.tbl-menu td{
    text-align:right;
    vertical-align:bottom;
    width: 33%;
}
.tbl-menu td .fl{
    font-size:14px;
    margin-top:-12px;
}
.menu-msg{
    font-size:21px;
    padding:60px 100px;
    width:830px;
    box-sizing:border-box;
    border:4px solid #892544;
    margin:120px auto 0 auto;
    border-radius:8px;
}


/*-------------------------- stylist */

.stylist>li{
    /*margin-top:34px;*/
    padding-top: 88px;
      margin-top: -54px;
    padding-bottom:20px;
    border-bottom:1px solid #a47840;
}
.stylist-photo{
    float:left;
    width:170px;
    margin-right:20px;
}
.stylist-desc{
    float:left;
    width:350px;
    margin-right:20px;
}
.stylist-desc dl{
    font-size:20px;
}
.stylist-desc dd{
    font-weight:bold;
}
.stylist-desc p{
    font-size:12px;
    margin-top:20px;
}
.stylist-styling{
    width:180px;
    float:left;
}
.stylist-styling li{
    float:left;
    margin:0 10px 10px 0;
}
.stylist-styling li:nth-child(even){
    margin-right:0;
}
.stylist-twitter{
    float:right;
    width:220px;
}

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

.hair-catalog{
    margin-left:22px;
}
.hair-catalog li{
    float:left;
    border-bottom:1px solid #333;
}
.hair-catalog li .hair-wrap{
    padding:20px;
    width:190px;
    box-sizing:border-box;
    letter-spacing: normal;
}
.hair-wrap h3{
    margin-top:15px;
    display:table-cell;
    width:190px;
    text-align:center;
    vertical-align:middle;
}
.hair-wrap p a{
    margin-top:18px;
    display:inline-block;
    border:1px solid #892544;
    width:140px;
}

.hair-wrap img{
    width:150px;
    height:224px;
}


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

.nail-catalog{
    margin-left:22px;
}
.nail-catalog li{
    float:left;
    border-bottom:1px solid #333;
}
.nail-catalog li .nail-wrap{
    padding:30px 20px;
    letter-spacing: normal;
/*    width: 272px;*/
}
.nail-wrap h3{
    font-size:21px;
    margin-top:10px;
    font-weight:bold;
}
.nail-wrap p{
    margin-top:18px;
}
.nail-wrap img{
    width:272px;
    height:182px;
}



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

.blog-side{
    float:left;
    width:280px;
/*    height:740px;*/
    border-right:1px solid #a47840;
    box-sizing:border-box;
}
.blog-side h3{
    width:130px;
    border-bottom:1px solid #a47840;
    margin-bottom:20px;
}
.blog-side .newest{
    padding-bottom:30px;
}
.blog-side .newest li{
    margin:0 0 20px 30px;
}
.blog-side .newest li{
    margin:0 0 20px 30px;
}
.blog-side .blog-list li{
    margin-bottom:20px;
}
.blog-side .blog-list a{
    padding-left:30px;
    display:block;
}
.blog-side .blog-list a:hover,
.blog-side .blog-list a.current{
    background:url(../images/blog_arrow.png) no-repeat left 5px;
}
.blog-main{
    float:right;
    width:700px;
    height:740px;
/*    overflow: scroll;*/
}
.blog-main iframe{
    width:100%;
    height:740px;
    border:none;
/*    overflow: hidden;*/
}



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

.contact-icon{
    float:left;
    width:150px;
    text-align:center;
}
.contact_phone{
    font-size:36px;
    font-weight:700;
}
.w740 .fr{
    width:520px;
}
.map-contact{
    width:100%;
    min-width:980px;
    margin-top:80px;
}
.map-contact iframe{
    width:100%;
    height:240px;
}
.contact-msg{
    font-size:24px;
}




/*-------------------------- about */
.l-video {
    position: relative;
    width: 100%;
    margin: auto;
    padding-top: 56.25%;
    margin-bottom: 40px;
}
.l-video .item {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
/*-------------------------- about */


/*-------------------------- flow */
.l-list-flow .item {
    margin-bottom: 40px;
    padding: 20px;
}
.l-list-flow .item:last-child {
    margin-bottom: 0px;
}
/*-------------------------- flow */



/*boxer*/
#boxer .boxer-close::before {
    font-family: "Noto Sans","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Helvetica,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif !important;
}

/*-------------------------- privacy policy */
.l-privacypolicy .inner {
    overflow: auto;
    height: 17em; /* 1行1.7 x 10行分 */
    -webkit-overflow-scrolling: touch; /* 慣性スクロール実装 */
}

.l-table {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.l-table tr {
    border-bottom: 1px solid #a47840;
}
.l-table th {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    line-height: 2;
    width: 33.3333%;
    font-weight: bold;
    padding: 16px 16px 16px 0px;
}
.l-table td {
    width: 64.6667%;
}
.l-table th, .l-table td {
    display: table-cell;
/*
    padding: 16px 0px 16px 16px;
    vertical-align: top;
*/
}/*-------------------------- privacy policy */




/*theme*/
.t-title_1 {
    font-size: 17px;
}
.t-title_2 {
    font-size: 30px;
    font-weight: 100;
    color: #fff;
}
.t-accent_1 {
    font-weight: bold;
    color: #892544;
}
.t-border {
    border: 1px solid #a47840;
}

.t-deko_land-tb, .top-headline, .fixed-header {
    position: relative;
}
.t-deko_land-tb:before, .top-headline:before, .fixed-header:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: -3.5px;
    right: 0px;
    left: 0px;
    margin: auto;
    width: 14px;
    height: 7px;
    background: url(../images/deco_flower_landscape.png) no-repeat;
}
.t-deko_land-tb:after, .top-headline:after, .fixed-header:after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -3.5px;
    right: 0px;
    left: 0px;
    margin: auto;
    width: 14px;
    height: 7px;
    background: url(../images/deco_flower_landscape.png) no-repeat;
}

.t-triangle-bottom {
    position: relative;
}
.t-triangle-bottom::after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #892544 transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 24px 48px;
    bottom: -49px;
    content: "";
    display: inline-block;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 0;
}



/*utility*/
.u-img_cell {
    position: relative;
    display: inline-block;
    height: 224px;
/*    width: 150px;*/
    width: 100%;

    background: #ddd;
}
.u-img_cell.is-nail {

    height: 182px;
    max-width: 100%;
    width: 272px;
}
.u-img_cell img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
}

.u-img_full {
    width: 100%;
}



/*パララックスエフェクトの要素*/
#view-2_, #view-3, #view-4 {
/*    padding-top: 50%;*/
}
#view-2 {
    position: fixed;
}
#view-3 {
    padding-top: 100%;
}

#js-img_top, #js-logo1, #js-img1, #js-img2, #js-img3 {
    position: relative;
}

#js-img_top {
    z-index: -2;
    position: fixed;
}
#js-img_top_2 {
    z-index: -1;
    position: fixed;
}