@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
/*****************************************
           BASIC
*****************************************/
img { vertical-align: bottom; }

a {
     color: #FF69B4;
     text-decoration:none;   
}
a:hover {
     color:#FFB6C1;
     text-decoration:none;  
}

/* ========769x以上======== */
@media(min-width: 769px) {
/*****************************************
           TEMPLATE LAYOUT
*****************************************/
body{
     margin:0;
     padding:0;
     font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
     font-size: 12px;
     color:#444;
     line-height:1.6;
     letter-spacing: 2px;
}
#header{
     position: relative;
     width: 980px;
     margin: 0 auto 10px;
     background-color: #fff;
     height: 140px;
}
#top-contents {
     clear:both;
     width: 980px;
     margin: 0 auto;
}
#top-contents:after {
     content: "";
     clear: both;
     display: block;
}
#main-contents {
     clear:both;
     width: 980px;
     margin: 0 auto;
}
#main-contents:after {
     content: "";
     clear: both;
     display: block;
}
#main-column {
     float: left;
     width: 75%;
     padding: 0 40px 0 20px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
#side-column {
     float: left;
     width: 25%;
     padding: 0 20px 0 0;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
#side-column #side-inner{
     background-color: #FCD7DD;
     padding: 10px;
}
/*----------------------------------------
    トップページ余白
-----------------------------------------*/
#top-contents {
     padding: 20px 0 50px 0;
}   
#main-contents {
     padding: 20px 0 50px 0;
}   
/*****************************************
           HEADER CUSTOMIZE
*****************************************/
#header .logo a:hover{
     opacity: 0.7;
}
#header .logo img {
     width: 180px;
     height: auto;
     position: absolute;
     top: 6%;
     left:  0;
}
#header .tel {
     position: absolute;
     bottom: 30%;
     right: 22%;
}
#header .tel a {
     font-size: 28px;
     color: #F09ABF;
     font-family: 'Droid Serif', serif;
     letter-spacing: 0px;
}
#header .tel i {
     margin-right: 10px;
}
#header .open {
     position: absolute;
     bottom: 20%;
     right: 0%;
     font-size: 11px;
     background-color: #F09ABF;
     color: #fff;
     padding: 5px 15px;
     font-weight: bold;
     border-radius: 10px;
     box-shadow: 0 10px 10px -6px rgba(0,0,0,.3);
}   
#telbtn {
     display:none;
}

/*****************************************
           PAGETOP CUSTOMIZE
*****************************************/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
}
#page-top a {
    background: #FF86C2;
    text-decoration: none;
    color: #fff;
    width: 50px;
    padding: 3px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
    opacity: 0.6;
    font-size: 14px;
}
#page-top a:hover {
    text-decoration: none;
    opacity: 1;
}

/*****************************************
           footer
*****************************************/
#footer{
     clear: both;
     background-color:;
     width: 100%;
     margin: 0 auto;
}
#footMenu {
     width: 980px;
     margin: 0 auto;
     text-align:center;
     padding:3px;
     padding: 30px 0px 30px 0px;
     clear:left;
        
}
.copyright {
     padding:30px 0 30px;
     font-size: 12px;
}

/*****************************************
           NAV CUSTOMIZE
*****************************************/
.hamburger{
         display:none;
}

#nav {
     width: 980px;
     margin: 0 auto;
     height: 45px;
}
#nav ul {
     display: table;
     table-layout: fixed;
     text-align: center;
     width:100%;
}
#nav ul li {
     display: table-cell;
     border-left: 1px solid #F09ABF;
}
#nav ul li:last-child {
     border-right: 1px solid #F09ABF;
}
#nav ul li a {
     display: block;
     height: 45px;
     box-sizing: border-box;
     line-height: 45px;
     text-decoration: none;
     color: #F09ABF;
     font-size: 13px;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
}
#nav ul li a p {
     margin-top: -9px;
}
#nav ul li a:hover {
     color: #F0C6D8;
}
#nav ul li i {
     font-size: 22px;
     display: block;
}
/*****************************************
           トップページ：concept
*****************************************/
#top-concept {
     padding: 20px;
     border: 1px solid #F09ABF;
}
#top-concept h2 {
     font-size: 16px;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
     padding: 0 0 15px 0;
     text-align: center;
}
#top-concept .concept-box {
     display: table;
     width: 100%;
}
#top-concept .concept-photo {
     display: table-cell;
     width: 30%;
}
#top-concept .concept-text {
     display: table-cell;
     width: 60%;
     vertical-align: top;
     padding-left: 20px;
}
#top-concept .concept-photo img {
     width: 100%;
     box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
}
#top-concept .concept-text p {
     color: #666;
}
/*****************************************
           トップページ：link
*****************************************/     
#link ul {
     list-style: none;
}
#link li a {
     display: block;
     box-shadow:0 0 4px #aaaaaa;
     height: 100px;       
}
#link li .contact:hover {
     background-color: #B6E1E2;
}
#link li .fb {
     color: #fff; 
     font-size: 28px;
     background-color: #43609C;
     font-weight: bold;
     font-family:"Tahoma";
     text-align: center;
     padding: 25px 0px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     border: solid 2px #fff;       
}
#link li a .contact {
     padding: 20px;
     border: solid 1px #8C929C;
     color: #8C929C;
     font-weight: bold;
     font-size: 15px; 
}
#link li {
     margin-bottom: 10px;
}
#link li i {
     margin-right: 10px;
}   
#link img {
     width:100%;
     height: 100px;
}
#link a:hover {
        opacity: 0.7;
}
/*****************************************
           トップページ：Infomation
*****************************************/
#top-news {
     padding: 20px 0 0 0;
}      
#top-news h2 {
     color: #FF69B4;
     padding: 5px 15px;
     font-size:14px;
     background-color: #F09ABF;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
     background:linear-gradient(to right,#F09ABF,#FFF1F4,#FEE0EA,#F09ABF);
     border: solid 1px #FE9ECE;
}
#top-news .news-box {
     background-color: #FFFAFB;
     padding: 5px;
     height: 200px;
     overflow-y: scroll;
}
#top-news ul{
     list-style: none;
     padding: 10px 3px 0 3px;
}

#top-news ul li:nth-of-type(1){
     font-weight: bold;
     color: #F09ABF;
}
#top-news ul li:nth-of-type(2){
     font-size:12px;
}

/***************************************************************
           サロン
***************************************************************/
/*--------------------------------------------------------------
    ビジュアル
--------------------------------------------------------------*/
#salon {
     padding: 15px 0 0 0;
}
#salon h2 {
     color: #F08DB8;
     font-size: 26px;
     margin: 0 0 15px 0;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
     letter-spacing: 4px;
}
#salon h2 span {
     font-size: 16px;
     margin-left: 15px;
}
/*--------------------------------------------------------------
    店舗情報
--------------------------------------------------------------*/
#salon .shop-info table {
    width: 100%;
    border-collapse: collapse;
}
#salon .shop-info table th {
    padding: 10px 10px;
    text-align: left;
    width: 20%;
    color: #666;
    font-weight: bold;
    vertical-align: middle;
    border: #F08DB8 1px solid;
}

#salon .shop-info table td {
    padding: 10px 10px;
    width: 80%;
    color: #666;
    border: #F08DB8 1px solid;
}
#salon .shop-info table a {
    font-weight: normal;
    color: #666;
    text-decoration: none;
}

/***************************************************************
           コンセプト
***************************************************************/
#concept {
     padding: 15px 0 0 0;
}
#concept h2 {
     color: #F08DB8;
     font-size: 26px;
     margin: 0 0 15px 0;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
     letter-spacing: 4px;
}
#concept h2 span {
     font-size: 16px;
     margin-left: 15px;
}
#concept .concept-box {
     margin-bottom: 40px;
}
#concept .concept-box:after {
     content: "";
     display: block;
     clear: both;
}
#concept .concept-box .concept-photo {
     float: right;
     width: 40%;
}
#concept .concept-box .concept-text {
     float: right;
     width: 60%;
     padding: 0 20px 0 0;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
} 
#concept .concept-box-2:after {
     content: "";
     display: block;
     clear: both;
}
#concept .concept-box-2 .concept-photo {
     float: left;
     width: 40%;
}
#concept .concept-box-2 .concept-text {
     float: left;
     width: 60%;
     padding: 0 0 0 20px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}    
#concept .concept-photo img {
     width: 100%;
     box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
}

/***************************************************************
           メニュー
***************************************************************/
/*--------------------------------------------------------------
    料金表
--------------------------------------------------------------*/
#menu {
     padding: 15px 0 0 0;
}
#menu h2 {
     color: #F08DB8;
     font-size: 26px;
     margin: 0 0 15px 0;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
     letter-spacing: 4px;
}
#menu h2 span {
     font-size: 16px;
     margin-left: 15px;
}
#menu .menu-container ul {
     list-style: none;
}
#menu .menu-container ul:after {
     content: "";
     display: block;
     clear: both;
}
#menu .menu-container ul li {
     float: left;
     width: 33.3333%;
     padding: 0 5px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     margin-bottom: 10px;
}
#menu .menu-container .menu-box {
     border: solid 1px #F09ABF;
     padding: 10px;
}
#menu .menu-container ul li img {
     width: 100%;
     height: 180px;
}
.menu-button a {
     display: block;
     margin: 15px 0 0 0;
     padding: 5px; 
     color: #FF69B4;
     text-align: center;
     background:linear-gradient(#FFF3F4,#FDECEE,#FFB6C1);
     border: solid 1px #FE9ECE;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
}
.menu-button a:hover {
     opacity: 0.7;
}

.menu-price th {
    padding: 10px 0 5px 0;
    text-align: left;
    width: 60%;
    color: #696969;
    font-weight: bold;
}

.menu-price td {
    padding: 10px 0 5px 0;
    text-align: right;
    width: 40%;
    color: #696969;
    font-weight: bold;
}

/***************************************************************
           化粧品
***************************************************************/
/*--------------------------------------------------------------
    ビジュアル
--------------------------------------------------------------*/
#cosmetics {
     padding: 15px 0 0 0;
}
#cosmetics h2 {
     color: #F08DB8;
     font-size: 26px;
     margin: 0 0 15px 0;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
     letter-spacing: 4px;
}
#cosmetics h2 span {
     font-size: 16px;
     margin-left: 15px;
}
#cosmetics h3 {
     font-size: 16px;
     padding: 3px 10px;
     background-color: #D7BF39;
     color: #fff;
     margin: 30px 0 15px 0;
     border-radius: 5px;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
}
/*--------------------------------------------------------------
    2列レイアウト
--------------------------------------------------------------*/
#cosmetics .cosme-box {
     display: table;
     width: 100%;
}
#cosmetics .cosme-box .text {
     display: table-cell;
     width: 45%;
     vertical-align: top;
}
#cosmetics .cosme-box .cosme-photo {
     display: table-cell;
     width: 55%;
     vertical-align: top;
     padding: 0 0 0 10px;
}
#cosmetics .cosme-box .cosme-photo img {
     width: 20%;
}   
#cosmetics .cosme-title {
     font-size: 12px;
     font-weight: bold;
     padding: 3px 10px;
     background:linear-gradient(#FFF3F4,#FDECEE,#FFB6C1);
     color: #FF69B4;
     border: solid 1px #FF69B4;
     margin: 10px 0 0 0;
}
#cosmetics .cosme-text {
     border-left: solid 1px #FF69B4;
     border-right: solid 1px #FF69B4;
     border-bottom: solid 1px #FF69B4;
     padding: 10px;
}
#cosmetics .cosme-photo-2 {
     margin: 30px 0 0 0;
     display: table;
     width: 100%;
}
#cosmetics .cosme-photo-2 ul {
     list-style: none;
}
#cosmetics .cosme-photo-2 ul li {
     display: table-cell;
     width: 50%;
     vertical-align: top;
}
#cosmetics .cosme-photo-2 ul li:nth-child(odd) {
     padding: 0 5px 0 220px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
}
#cosmetics .cosme-photo-2 ul li:nth-child(even) {
     padding: 0 220px 0 5px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
}
#cosmetics .cosme-photo-2 ul li img {
     width: 100%;
}

/***************************************************************
           スタッフ
***************************************************************/
/*--------------------------------------------------------------
    ビジュアル
--------------------------------------------------------------*/
#staff {
     padding: 15px 0 0 0;
}
#staff h2 {
     color: #F08DB8;
     font-size: 26px;
     margin: 0 0 15px 0;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
     letter-spacing: 4px;
}
#staff h2 span {
     font-size: 16px;
     margin-left: 15px;
}
#staff .staff-box {
     display: table;
     width: 100%;
     border-spacing: 10px 0;
}
#staff .staff-box .staff-photo {
     display: table-cell;
     width: 30%;
     vertical-align: top;
}
#staff .staff-box .staff-text {
     display: table-cell;
     width: 70%;
     vertical-align: top;
     padding-left: 20px;
}
#staff .staff-box .staff-text .post {
     font-size: 13px;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
     color: #F09ABF;
}
#staff .staff-box .staff-text .name {
     font-size: 18px;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
     padding: 0 0 15px 0;
     color: #808080;
}
#staff .staff-box .staff-photo img {
     width: 100%;
     box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
}

/***************************************************************
           お客様の声
***************************************************************/
/*--------------------------------------------------------------
    ビジュアル
--------------------------------------------------------------*/
#voice {
     padding: 15px 0 0 0;
}
#voice h2 {
     color: #F08DB8;
     font-size: 26px;
     margin: 0 0 15px 0;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
     letter-spacing: 4px;
}
#voice h2 span {
     font-size: 16px;
     margin-left: 15px;
}
#voice .voice-box {
     padding: 15px;
     border: solid 1px #FF69B4;
     border-radius: 10px;
     margin: 0 0 20px 0;
     background-color: #FFFAF0;
}
#voice .voice-box .name {
     padding: 5px 10px;
     background-color: #BE81F7;
     color: #fff;
     font-weight: bold;
     width: 100px;
     margin: 0 0 10px 0;
     text-align: center;
}
#voice .voice-box .menu-title {
     font-weight: bold;
     margin: 0 0 15px 0;
     color: #696969;
}

/***************************************************************
           アクセス
***************************************************************/
/*--------------------------------------------------------------
    ビジュアル
--------------------------------------------------------------*/
#access {
     padding: 15px 0 0 0;
}
#access h2 {
     color: #F08DB8;
     font-size: 26px;
     margin: 0 0 15px 0;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
     letter-spacing: 4px;
}
#access h2 span {
     font-size: 16px;
     margin-left: 15px;
}
#access .shop-info table {
    width: 100%;
    border-collapse: collapse;
}
#access .shop-info table th {
    padding: 10px 10px;
    text-align: left;
    width: 20%;
    color: #666;
    font-weight: bold;
    border: #F08DB8 1px solid;
    vertical-align: middle;
}

#access .shop-info table td {
    padding: 10px 10px;
    width: 80%;
    color: #666;
    border: #F08DB8 1px solid;
}
#access .shop-info table a {
    font-weight: normal;
    color: #666;
    text-decoration: none;
}
/*--------------------------------------------------------------
    Map
--------------------------------------------------------------*/
#access .map {
    padding: 0 0 30px 0;
}
#access iframe {
    width: 100%;
    height: 400px;
}

/***************************************************************
           ぱんくず
***************************************************************/
.topic-path {
     padding: 2% 0 5% 0;
     list-style-type: none;
}
.topic-path li {
     display: inline;
     color: #585858;
     font-size: 14px;
     letter-spacing: 4px;
}
.topic-path li a {
     color: #87CEEB;
}

/***************************************************************
           ブログ
***************************************************************/
/*--------------------------------------------------------------
    ビジュアル
--------------------------------------------------------------*/
#blog {
     padding: 15px 0 0 0;
}
#blog h2 {
     color: #F08DB8;
     font-size: 26px;
     margin: 0 0 15px 0;
     font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
     letter-spacing: 4px;
}
#blog h2 span {
     font-size: 16px;
     margin-left: 15px;
}
#blog article:nth-of-type(n+2) {
     padding: 5% 0 0 0;
}
#blog article h3 {
     padding: 2%;
     border-color: #FFB6C1;
     border-width: 2px 0;
     border-style: solid;
     color: #808080;
     font-size: 16px;
     font-weight: bold;
     letter-spacing: 4px;
}
#blog article h3 i {
     padding: 0 5% 0 0;
}
#blog article ul {
     display: table;
     width: 100%;
     padding: 2% 0 0 0;
}
#blog article ul li:nth-of-type(1) {
     display: table-cell;
     width: 40%;
     vertical-align: top;
}
#blog article ul li:nth-of-type(1) p {
     padding: 0 5%;
}
#blog article ul li:nth-of-type(1) p img {
     width: 100%;
}
#blog article ul li:nth-of-type(2) {
     display: table-cell;
     width: 60%;
     vertical-align: top;
}
#blog article ul li:nth-of-type(2) p:nth-of-type(1) {
     color: #585858;
     font-size: 12px;
     letter-spacing: 1px;
     line-height: 20px;
}
#blog article ul li:nth-of-type(2) p:nth-of-type(1) span {
     font-weight: bold;
     display: block;
}
#blog article ul li:nth-of-type(2) p:nth-of-type(2) {
     padding: 5% 0 0 0;
     color: #585858;
     font-size: 12px;
     letter-spacing: 1px;
     line-height: 20px;
     text-align: right;
}