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

/*===============================================
● PC Only
===============================================*/
@media screen and (min-width: 821px){

.pc-none{
	display:none;
}

.pc_float_l{
	float:left;
}

.pc_float_r{
	float:right;
}

.pc_img_100 img{
	max-width: 100%;
	height: auto;
	width /***/:auto;　
}

.pc_img_50 img{
	max-width: 50%;
	height: auto;
	width /***/:auto;　
}

.pc_center{
	text-align:center;
}

.pc_right{
	text-align:right;
}


#content{
	width: 720px;
	float: left;
}
#snav{
	width: 250px;
	float: right;
}


/*ヘッダー設定
------------------------------------------------------------*/
.header_banner {
    position: relative;
    width: 1020px;
    height: 50px;
    margin: 0 auto;
}
.header_banner a {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
}
.header_banner a img {
    transition: 0.3s;
}
.header_banner a img:hover {
    opacity: 0.7;
}

.header_wrap, .wrap_section, #main, .footer_wrap{
	width:1020px;
	margin-left: auto;
	margin-right: auto;
}
.footer_wrap{ position: relative;}

#header_sec{
	height: 730px;
	position: relative;
}
#tel{
	background: url(images/bg_main.png) no-repeat center;
	text-align: right;
	padding: 14px 0;
}
#tel img{margin-right: 25px;}
#main_top{
	height: 550px;
	padding-top: 30px;
}
#header_sec.header_sub{ height: 490px; }
.header_sub #main_top{
	height: 310px;
}
#mainnav{
	background: url(images/bg_nva.png) no-repeat center top;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
    z-index: 9999;
}
#mainnav .nav_box{
	width:1080px;
	margin:0 auto;
}



ul#menu li{
	float:left;
	position:relative;
	padding-top: 100px;
    z-index: 1;
    }
ul#menu li:first-child {
    padding-top: 0;
    }
ul#menu li a{
	display:block;
}

ul#menu li a img{
	display:block;
}

ul#menu ul{
	z-index:100;
	display:none;
	position:absolute;
	top:215px;
	left:0;
	padding-top: 10px;
}
ul#menu ul li{ padding-top: 0;}
ul#menu ul li a{
	display:block;
	color:#FFF;
	text-decoration:none;
	padding:5px;
	min-height:30px;
	line-height:30px;
	border-bottom:1px solid #FFF;
    opacity: 0.9;
    filter: alpha(opacity=90);
    -ms-filter: "alpha( opacity=90 )";
	font-size:12px;
	background-color:#0f9999;
}

ul#menu ul li a:hover{
	background-color:#56baba;
}
ul#menu ul li:last-child a{ border: none; }
ul#menu ul.nav_sub1 li a{
	width:171px;
}

ul#menu ul.nav_sub2 li a{
	width:171px;
}

ul#menu ul.nav_sub3 li a{
	width:171px;
}


ul#menu ul.nav_sub4 li a{
	width:171px;
}

ul#menu ul.nav_sub5 li a{
	width:150px;
}


#wrap{
	width:1000px;
	margin:0 auto 100px;
}
.wrap_box{
	width:1000px;
	margin:80px auto 100px;
}

.mt_20{
	margin-top:20px;
}
.mb_20{
	margin-bottom:20px;
}

.list_col2 li {
	float: left;
	width: 50%;
}
	
/* page top設定
------------------------------------------------------------*/

#page-top {
    position: absolute;
    right: 0;
}



/*footer
------------------------------------------------------------*/
footer{ margin-top: 150px; }


/*footer
------------------------------------------------------------*/
#footer_menu{
	background: url(images/bg_footer.jpg) no-repeat center;
	background-size: cover;
	padding: 50px 0;
}
#footer_menu .menu_f{
	width: 140px;
	margin-left: 35px;
	float: left;
}
#footer_menu .menu_f:first-child{ margin-left: 0; }
#footer_menu .menu_f span{
	display: block;
	font-weight: bold;
	border-bottom: 1px solid #8fdedb;
	padding-bottom: 5px;
	margin-bottom: 5px;
}
#footer_menu .menu_f a{
	color: #666;
}
#footer_menu .menu_f span a{
	text-decoration: none;
}
#footer_menu .menu_f a:hover{ color: #999;}


/*page_index 
------------------------------------------------------------*/
/* page_index --- */
.page_index #concept{
	position: relative;
}
.page_index #concept .img{ width: 520px; z-index: 0; }
.page_index #concept .msg{ 
	width: 620px; 
	position: absolute;
	left: -30px;
	top: 40px;
	background: #FFF;
	z-index: 5;
}


/* news_blog --- */
.page_index #news_blog{
	background: url(images/index/bg_news.jpg) no-repeat center top;
	margin-top: 115px;
	padding: 50px 0;
}
.page_index #news_blog .news_sty{ width: 490px; }
.page_index #news_blog .news_sty ul{
	padding: 20px;
}

/* reservation --- */
.page_index #reservation{
	width: 660px;
}
.page_index #reservation .shadows{
 margin-left: 30px;
 padding: 30px;
}
.page_index #facebook{ width: 300px;}

/* calendar --- */
.page_index #calendar h3{ margin-bottom: 40px;}
.page_index #calendar .calendar_box{ width: 460px; }

/* page_about --- */
.page_about .about_box{
	position: relative;
}
.page_about .about_box.pic_l { 
	margin-top: 230px;
}
.page_about .about_box .img{ width: 520px; z-index: 0; }
.page_about .about_box .msg{ 
	width: 620px; 
	position: absolute;
	background: #FFF;
	z-index: 5;
	top: 40px;
	
}
.page_about .about_box.pic_r .msg{ 
	left: -30px;
}
.page_about .about_box.pic_l .msg{ 
	right: -30px;
}
.page_about .about_box .msg .shadows{ 
	min-height: 370px;
}
.page_about .about_box .msg h3{ margin-bottom: 40px;}

/*page_access 
------------------------------------------------------------*/
.page_access .msg{ width: 600px; }
.page_access .img{ width: 400px; }
#map .map_box{
	width: 480px;
}


/*page_hair_care_item 
------------------------------------------------------------*/
.page_hair_care_item .msg{ width: 820px; }
.page_hair_care_item .img{ width: 170px; }

/*page_headspa 
------------------------------------------------------------*/
#head_intro .shadows{
	padding: 50px;
	width: 480px;
	position: absolute;
	left: 0;
	top: 50px;
}
#head_intro .shadows p{ margin-bottom: 30px;}
#head_intro .shadows p:last-child{ margin-bottom: 0;}


.page_headspa #flow .txt_price{
	position: absolute;
	right:0;
	top: 5px;
	font-size: 16px;
}
.page_headspa #flow .txt_price span{
	font-size: 14px;
}


/*page_price 
------------------------------------------------------------*/
.page_price .line_c{
	background: url(images/bg_line_c.jpg) repeat-y center;
}
.page_price .col2{
	width: 470px;
	margin-left: 75px;
	float: left;
}
.page_price .col2:first-child{ margin-left: 0; }


/*page_staff 
------------------------------------------------------------*/
.page_staff h3{
	min-height: 103px;
}
.page_staff .img{ width: 320px; }
.page_staff .msg{ width: 660px; position: relative; }

.page_staff .staff_box{ 
	width: 370px; 
	position: absolute;
	right:0;
	top:0;
}

/*page_voice 
------------------------------------------------------------*/
.page_voice .col2{
	width: 480px;
	float: left;
	margin-left: 40px;
}
.page_voice .col2:nth-child(4n+1){
	margin-left: 0;
}

/*page_gallery
------------------------------------------------------------*/
.page_gallery.gallery_detail .wrap_section {
	width: 700px;
}
.page_gallery.gallery_detail .title_sec{
	margin-bottom: 45px;
}
.page_gallery.gallery_detail .line_box img {
	width: 400px;
}
}



/*===============================================
●SP Only
===============================================*/
@media screen and (max-width:820px){

body{
	font-size:12px;
}
body a{
	text-decoration:none;
}
body a:hover{
	text-decoration:none;
}
#h_top{
	text-align: center;
}
img{
	max-width: 100%;
	height: auto;
	width /***/:auto;　
}

.sm-none{
	display:none;
}

.sm_center{
	text-align:center;
}

.sm_left{
	text-align:left;
}

.sm_right{
	text-align:right;
}

.sm_float_l{
	float:left;
}

/*-------margin------- */
.section{ margin-bottom: 50px; }

/*-------container------- */
.container .msg {
	width: 100%;
}
.container .img {
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}
.pic_l .img, .pic_r .msg,
.pic_l .msg, .pic_r .img,
.flow_picl .img,
.flow_picr .img {
	float: none;
}

.header_wrap, .wrap_section, #main, .footer_wrap{
	width:100%;
	margin-left: auto;
	margin-right: auto;
	background-color:#ffffff;
}


/* title style
------------------------------------------------------------*/
.title_master{
	font-size: 22px; 
	margin-bottom: 20px;
	text-align: center;
}

.title_sub{
	background: #66970A;
	line-height: normal;
	padding: 5px 10px;
	margin-bottom: 20px;
	font-size: 18px;
}



/*ヘッダー設定
------------------------------------------------------------*/
#header h1{
	padding: 5px 5px 0 5px;
	text-align: center;
}

#sp_top{
	/*height: 320px;
	background: url(images/index/bg_main.jpg) no-repeat center top;*/
	background-size: cover;
}
.header_sub #main_top{
	height: 200px;
	padding-top: 20px;
	box-sizing: border-box;
    position: relative;
    
    
}
.header_sub #main_top p{
	width: 157px;
	height: 157px;
	line-height: 157px;
	background: rgba(143,222,219,0.7);
	margin: auto;
	text-align: center;
    position: absolute;
    bottom: 0;
    top: 0;
}
#header_sp{ 
	text-align: center;
	padding: 15px 0;
}
#header_sp .header_logo{
	margin: 0 auto;
	display: block;
	width: 120px;
}
#header_sp .header_tel a{
	display: block;
	width: 200px;
	margin: 10px auto;
} 
.header_right{
	width:90%;
	margin:0 auto;
}
.header_right ul li {
	display: inline-block;
	margin: 8px;
}
.header_right .add {
	color: #66970A;
	margin-top: 5px;
}
.header_banner{
    display: none;
    }
.header_banner02{
    display: none;
    }
nav{
	background: #edf7f6;
	padding: 20px 0;
}
dl.accordion {
	width:100%;
}

dl.accordion dt {
	width:90%;
	text-align:center;
	min-height:40px;
	line-height:40px;
	font-size:16px;
	background-color:#0f9999;
	color:#FFF;
	font-weight:bold;
	margin-left:5%;
}

dl.accordion dt span.open{
	display:none;
}
dl.accordion dt.open span.close{
	display:none;
}
dl.accordion dt.open span.open{
	display:inline;
}
dl.accordion dd {
	clear:both;
	display:none;
	margin:0;
	width:90%;
	margin-left:5%;
}

dl.accordion dd a{
	display:block;
	min-height:40px;
	line-height:40px;
	text-decoration:none;
	background-color:#0f9999;
	color:#FFF;
	font-size:14px;
	border-top:1px solid #FFF;
	padding:0 5%;
}
dl.accordion dd ul a{
	background: #36afaf;
}
ul.accordion p{
	display:block;
	min-height:40px;
	line-height:40px;
	text-decoration:none;
	background-color:#0f9999;
	color:#FFF;
	font-size:14px;
	border-top:1px solid #FFF;
	padding:0 5%;
}
ul.accordion p span.open{
	display:none;
}
ul.accordion p.open span.close{
	display:none;
}
ul.accordion ul{
	display:none;
}


/* page top設定
------------------------------------------------------------*/
#page-top {
    position: absolute;
    right: 2%;
}



/*footer
------------------------------------------------------------*/
#footer_menu{
	display: none;
}
footer{ margin-top: 50px; }
#social_f{
	border-top: 4px solid #22a1a1;
}

#footer_box .f_left{
	width: 375px;
	float: none;
	margin: auto;
}
#footer_box .f_left p{
	margin-left: 20px;
}
#footer_box .f_left p span{
	padding-left: 60px;
}

#footer_box ul{
	float: none;
	text-align: center;
	padding-top: 20px;
}
#footer_box ul li{
	margin: 5px;
}

#content{
	margin-bottom: 50px;
}
#snav{
	text-align: center;
}

.path{ padding: 15px 0;}
.title_main{
	padding-top: 0px;
	margin-bottom: 50px;
}

.tb_form th,
.tb_form td{
	width: 100%;
	display: block;
	box-sizing: border-box;
}
.tb_form th {
	border-bottom: none;
	padding-bottom: 0;
}
.tb_form td input,
.tb_form td textarea {
	width: 100%;
}


/*page_index 
------------------------------------------------------------*/
/* concept --- */
.page_index #concept{ margin-top: 50px;}
.page_index #concept .img{ margin-bottom: 55px; }
.page_index #concept .msg .shadows{ 
	padding: 30px;
}

/* news_blog --- */
.page_index #news_blog .news_sty{ margin-bottom: 30px;}
.page_index #news_blog .news_sty ul{
	padding: 10px;
}


/* reservation --- */
.page_index #reservation{
	padding: 20px;
}
.page_index #reservation .shadows{
 padding: 20px;
}
/* calendar --- */
.page_index #calendar h3{ margin-bottom: 20px;}
.page_index #calendar .calendar_box{ text-align:center; margin-bottom: 30px;}


/*page_about
------------------------------------------------------------*/
.page_about .about_box{ margin-top: 50px;}
.page_about .about_box .img{ margin-bottom: 25px; }
.page_about .about_box .msg .shadows{ 
	padding: 30px;
}
.page_about .about_box .msg h3{ margin-bottom: 20px;}

/*page_access 
------------------------------------------------------------*/
.page_access .container{
	background: url(images/access/arr02.png) no-repeat center bottom;
	padding-bottom: 40px;
	margin-bottom: 20px;
}
.page_access .msg{ text-align:center; }
.page_access .img{ 
	text-align: left;
	margin-bottom: 20px;
}
#map .map_box{
	margin-bottom: 30px;
}



/*page_headspa 
------------------------------------------------------------*/
#head_intro .shadows .title_sec{
	margin-bottom: 20px;
}
#head_intro .shadows{ margin-bottom: 30px;}
#head_intro .txt_r{ text-align: center; }
.page_headspa .shadows h4{
	margin-bottom: 20px;
}
.page_headspa .flow_col .arrow{
	padding-right: 25px;
	background-size: 15px;
}



/*page_price 
------------------------------------------------------------*/
.page_price .section{ margin-bottom: 0; }
.page_price .col2{
	border-bottom: 1px solid #D9D9D9;
	padding-bottom: 20px;
	margin-bottom: 30px;
}

/*qa_sty 
------------------------------------------------------------*/
#qa_sty {
	padding: 0;
}
#qa_sty .q{
	padding-right: 10px;
}
#qa_sty .a{
	padding-right: 10px;
}

/*qa_sty 
------------------------------------------------------------*/
.page_staff .staff_box{ 
	margin-bottom: 20px;
}
.page_staff h3 span{
	font-size: 22px;
}


/*page_voice 
------------------------------------------------------------*/
.page_voice .col2{
	margin-bottom: 40px;
	text-align: center;
}

/*page_blog
------------------------------------------------------------*/
.page_blog .container .img ,
.page_blog .container .msg {
    width: 100%;
}



}



@media screen and (max-width:420px){
#footer_box { padding: 30px 0;}
#footer_box .f_left{
	width: 100%;
	text-align: center;
}	
#footer_box .f_left img{
	float: none;
	width: 60px;
	margin-bottom: 20px;
}
#footer_box .f_left p{
	float: none;
	margin-left: 0px;
}
	
.page_headspa .flow_col .arrow{
	background: url(images/headspa/arr2.png) no-repeat center bottom;
	background-size: auto 15px;
	padding-bottom: 30px;
	padding-right: 0;
}	
	
	
	
	
}