@charset "UTF-8";

/*===============================================
●スマホ用
===============================================*/
/* -----------------------------------------------
共通レイアウト
----------------------------------------------- */

h3{
display:inline-block;
font-size:180%;
font-family: 'Lora', serif;
margin:30px 0 20px 0;
padding:0 10px 10px 10px;
border-bottom:none;
}
ul.post {
    width: 90%;
    line-height: 1.5;
    margin: 0 auto;
}
p.tit {

	font-size: 16px;
}
.rink_btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 90%;
    padding: 20px 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    margin: 3% auto;
    background-color: #CC6600;
}
.fontsize_s{
font-size:85%;
line-height:200%;
}

.logo{
margin-bottom:15px;
}

.pc{
display:none;
}
.sp{
display:block;
}

.br::before {
	content: "\A" ;
	white-space: pre ;
}


/* -----------------------------------------------
ケアサロンTOP
----------------------------------------------- */
#caresalon{
font-size:80%;
}

#caresalon h2 img{
width:100%;
height:auto;
}


#caresalon h3{
font-family: 'Playfair Display', serif;
margin:30px 0 10px 0;
font-size:120%;
}
#news,#aboutus,#menu,#shop{
margin-bottom:50px;
}

/*--reserveボタン--*/

#caresalon .reservebtn{
display:none;
}
#caresalon .reservebtn dd{
display:none;
margin:0;
padding:0;
border:1px solid #FFFFFF;

}
#caresalon .reservebtn dd a{
display:none;
}



/*--menu--*/

.site-header{
background: rgba(255,255,255,0.8);
display: flex;
padding: 0px;
position: absolute;
justify-content: space-between;
width: 100%;
}
.site-header.fixed{
position: fixed;
top: 0;
}
.top_img{
max-height:100%;
}

.site-header{
text-align:center;
border-bottom:1px solid #999999;
}
.gnav{
width:100%;
margin:0 auto;
}

.site-header li{
font-size:80%;
display:inline-block;
margin:0 10px;
padding:10px 0;
}

.site-header li .playfair{
font-family: 'Playfair Display', serif;
font-size:150%;
}



/*--news--*/

#caresalon #news{
margin-top:180px;
}

#caresalon #news dl{
width:95%;
margin:0 auto;
overflow:hidden;
text-align:left;
}
#caresalon #news dt{
width:100%;
float:none;
margin-bottom:5px;
}
#caresalon #news dd{
width:100%;
float:nonw;
}
.news_area {
    width: 90%;
    margin: 0 auto;
}
.news_cotegory {
    margin: 5% 0;
}
ul.navigation {
        display: flex;
        width: 100%;
        margin: 10% auto;
    }
ul.navigation li {
    margin: 0 3%;
    width: 30%;
    text-align: center;
}
/*--aboutus--*/

#caresalon #aboutus{
background:#f8f8f8;
}

#caresalon #aboutus p{
width:95%;
margin:0 auto;
line-height:180%;
font-size:100%;
}


#caresalon #aboutus .aboutBox{
width:95%;
margin:0 auto;
overflow:hidden;
line-height:180%;
font-size:100%;
}
#caresalon #aboutus .aboutBox img{
width:100%;
height:auto;
margin-bottom:5px;
}
#caresalon #aboutus .aboutBox dl{
margin:30px 0;
}

#caresalon #aboutus .aboutBox dt{
width:95%;
display:inline-block;
vertical-align:middle;
margin-right:0;
}

#caresalon #aboutus .aboutBox dd{
width:95%;
display:inline-block;
vertical-align:middle;
text-align:left;
line-height:180%;
text-shadow: 1px 1px 5px rgba(255, 255, 255, 1);

}
#caresalon #aboutus .aboutBox .right{
display:none;
width:95%;
margin:0 auto 10px;
}
#caresalon #aboutus .aboutBox .right dt{
text-align:left;
}
#caresalon #aboutus .aboutBox img{
width:100%;
height:auto;
}

#caresalon #aboutus .aboutBox .right dd{
width:100%;
}
#caresalon #aboutus .aboutBox .right_sp{
display:block;
}
#caresalon #aboutus .aboutBox .right_sp dt{
width:95%;
text-align:left;
}

#caresalon #aboutus .aboutBox .right_sp dd{
width:95%;
}


/*--menu--*/

ul.menu_list {
    display: block;
}
ul.menu_list li {
    width: 90%;
    margin: 0 auto 5%;
}
#caresalon #menu{
width:95%;
margin:0 auto 80px;
}

#caresalon #menu dl{
width:100%;
margin:0 0 20px 0;
}
#caresalon #menu dt{
margin-bottom:10px;
}

#caresalon #menu dd a{
color:#CC6600;
display:inline-block;
padding:10px 0;
border-bottom:1px solid #CC6600;
}

/*--shop--*/
#caresalon #shop{
background:#f8f8f8;
padding:20px 0 50px 0;
}
#caresalon #shop .shopBox{
width:95%;
overflow:hidden;
margin:0 auto;
}

#caresalon #shop .shopBox_left{
width:100%;
float:none;
}

#caresalon #shop .shopBox_right{
width:100%;
float:none;
}

#caresalon #shop .shopBox_right dl{
line-height:200%;
}

#caresalon #shop .shopBox_right dt{
width:20%;
float:left;
}
#caresalon #shop .shopBox_right dd{
width:80%;
float:right;
}
#caresalon #shop img{
width:100%;
height:auto;
}



/*--footer--*/
#footer ul{
margin-bottom:30px;
}
#footer ul li{
display:inline-block;
vertical-align:middle;
margin:0 10px;
}

#footer p{
font-size:80%;
}


/* -----------------------------------------------
ケアサロンメニューページ
----------------------------------------------- */

#menuconte{
margin-bottom:80px;
}
#menuconte .menuNo{
font-family: 'Caveat', cursive;
font-size:120%;
margin-right:20px;
}

#menuconte .menuBox01 ul{
margin-top:5px;
}
#menuconte .menuBox01 li{
width:48%;
display:inline-block;
margin:0;
}
#menuconte .menuBox01 li img{
width:100%;
height:auto;
}


#menuconte .menuBox01 dl{
width:95%;
display:inline-block;
vertical-align:top;
text-align:left;
margin:10px 0;
}

#menuconte .menuBox01 dl dt{
font-size:120%;
line-height:180%;
padding-bottom:5px;
border-bottom:1px solid #666666;
margin-bottom:5px;
}
#menuconte .menuBox01 dl dd{
line-height:180%;
}
#menuconte .menuBox01 .time{
text-align:right;
}
#menuconte .menuBox01 .price{
font-size:110%;
line-height:180%;
text-align:right;
color:#cbac69;
}

#menuconte table{
width:95%;
margin:10px auto;
}
#menuconte table th{
text-align:center;
border:1px solid #CCCCCC;
padding:5px;
}

#menuconte table td{
border:1px solid #CCCCCC;
padding:5px;
}

#menuconte .taxtext{
text-align:right;
}

#menuconte .menuBox01 .menu_02{
width:100%;
}
#menuconte .menuBox01 img{
width:100%;
height:auto;
}

/**/

#menuconte h4{
font-size:120%;
}



#menuconte .massageConte{
width:95%;;
}

#menuconte .massageConte ul{
text-align:left;
line-height:200%;
padding-left:0;
font-size:110%;
margin-bottom:50px;
}
#menuconte .massageConte dl{
margin-bottom:30px;
}
#menuconte .massageConte dt{
margin-bottom:10px;
}

#menuconte .massageConte dd{
display:inline-block;
padding:5px;
margin-bottom:5px;
}

#menuconte .massageConte img{
margin-right:0;
margin-bottom:20px;
width:80%;
height:auto;
}

#menuconte .staffConte{
width:95%;
}
#menuconte .staffConte dl{
margin-top:50px;
padding-left:0px;
font-size:110%;
width:100%;
float:none;
}

#menuconte .staffConte dt{
border-left:5px solid #c9c0c0;
padding-left:10px;
}

#menuconte .staffConte dd{
padding-left:0;
margin-top:30px;
}

#menuconte .staffConte img{
float:none;
}

#menuconte #bk{
background:#f5f5f5;
padding:30px 0;
}