@charset "utf-8";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/


/* モバイルレイアウト : 480 px およびそれ以下. */
.phonesmall{	font-size:0.9em;}
h2.btnPhone span{
	background:url(../images/btnOpen.png) no-repeat right top;
	display:block;
	min-height:25px;
	margin-top:-2px;
	padding-right:25px;
}
h2.btnPhone span.btnClose{
	background:url(../images/btnClose.png) no-repeat right top;
}
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 91%;
	padding-left: 0%;
	padding-right: 0%;
}
#gridHeader {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#gridFooter {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contents {
	padding:1.82% 2%;
}

#main{
	margin-bottom:3%;
}

#sub{
	padding-top: 20px;
	border-top: 2px solid white;
}

#news {
	clear: both;
	float: left;
	margin-top:1px;
	margin-left: 1px;
	margin-bottom:7%;
	width: 97.5%;
	display: block;
}

#news dt{
	clear:left;
	float:left;
}

#news dd{
	float:left;
	margin-left:1em;F
}

#inquire {
	clear: both;
	float: left;
	margin-left: 0;
	width: 98.5%;
	display: block;
	padding-left:0;
	margin:0;
}
#inquire li.hiddenMobile{
}

#inquire li{
	float:left;
	width:46%;
}

#inquire li.middle{
	padding-right:4%;
	padding-left:4%;
	background:url(../images/bar_dotWhite_vartical.png) repeat-y right;
}

#sidemenu li{
	float:none;
	background:url(../images/iconArrowGreen.png) 1em 12px no-repeat;
	padding:10px 5px 10px 2em;
	border-bottom:1px dotted #a28264;
}
#sidemenu li a{
	display:block;
}
#sidemenu li.last{
	border-bottom:none;
}

#mainimage {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

body.png#top #mainimage{
	border:none;
}

#header{
	min-height:120px;
}
#header p{
	top:80px;
	/*right:-20px;*/
	font-size:0.9em;
}

#logo{
	margin:10px auto 0 auto;
}
#menu ul{
	width:100%;
}
#menu li{
	text-align:center;
	width:48%;
}
#menu li#naviTopSP{
	width:96%;
}
#menu li a{
	padding-top: 11px;
	padding-bottom: 15px;
	padding:11px 1% 15px 1%;
}

#bnrCoupon{
	width:97%;
	padding:1.5%;
}
#bnrCoupon a{
	text-align:center;
	background:none;
	padding:10px 5px 0 5px;
}

p#fInquire{
	margin-top:5px;
}
#fLabel{
	display:block;
	padding-top:7px;
}
p#copy{
	margin-top:23px;
}

#bgYotsuba{
	padding-top:3%;
}

body.png#top #bgYotsuba{
	padding-top:0;
}

.centerMobile{
	overflow:hidden;
	text-align:center;
	clear:both;
}

.centerMobile .floatleft,
.centerMobile .floatright{
	float:none;
}



.hiddenMobile{
	visibility:hidden;
	width:0;
	height:0;
	margin:0;
}
#menu .hiddenMobile a{
	visibility:hidden;
}
.cropimg{
	width:200px;
	margin:0 auto 10px auto;
	overflow:hidden;
}


#message{
	clear:both;
}

dl#profile dt{
	float:none;
}

dl#profile dd{
	padding-left:0;
}


#access .floatright{
	float:none;
	margin:0 auto;
	text-align:center;
}
#access p{
	clear:both;
}
#AccsessImages{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}/*
#voiceArea{
	margin-left:0px;
}*/
.voice{
    width: 99%;
    margin: 3px 0;
}

.photolist li {
	font-size:0.8em;
}
.photolist li img{
	max-height:150px;
}

.spview #relaxationoil li {
    line-height: 1.3;
    font-size: 2.5vw;
}

#coursePrice dt{
	font-size:1.1em;
	padding:0.7em 0 0.7em 0.3em;
}

#coursePrice dd{
	font-size:1.1em;
	padding:0.7em 0.3em 0.7em 0;
}
.visitTable dd#vtTime div{
	font-size:0.9em;
}

.visitTable{
	width:13%;
}
#visitLabel{
	width:19.25%;
}
#vtLabel:after{
	content:"";
}

#visitMark li{
	float:left;
	margin-right:1em;
}


#sejutsuimage img {
    margin: 0 1% 10px;
    width: 29%;
}
.spview #sejutsulist {
    column-count: 2;
    font-size: 1em;
    padding-left: 1em;
    height: auto;
}


/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {
.phonesmall{	font-size:1em;}
h2 span{
	background:none;
	display:inline;
	min-height:inherit;
	margin-top:0;
	padding-right:0;
}
h2 span.btnClose{
	background:none;
}

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}
#gridHeader {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#header{
	min-height:80px;
}
#header p{
	top:25px;
	width:20em;
}
#logo{
	margin:10px 0 0 0;
}

#hTelnum{
	top:75px;
}
img.hiddenMobile#hTelnum{
	visibility:visible;
	max-width:237px;
	width:30%;
	height:auto;
}
#menu ul{
	width:66%;
}
#menu li#naviTopSP{
	width:auto;
}

#gridFooter {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contents {
	padding-top:1.1625% 1.5%;
}

#main{
	margin-bottom:2%;
}
#sub{
	clear:both;
}

#news {
	clear: both;
	float: left;
	margin-left: 0;
	width: 47.7179%;
	display: block;
}
#news dt{
	float:none;
}
#news dd{
	float:none;
	margin-left:0;
}


#inquire {
	clear: none;
	float: right;
	margin-left: 0%;
	width: 47.7179%;
	display: block;
}

#other #inquire{
	width:99%;
}

#inquire li,
#inquire li.middle,
#inquire li.hiddenMobile{
	float:none;
	width:94%;
	padding-bottom:15px;
	background:url(../images/bar_dotWhite.png) bottom center repeat-x;
	margin:0 3%;
}
#inquire li.hiddenMobile{
	height:auto;
}
#inquire li.middle{
	padding-right:0;
	padding-left:0;
}
#inquire li.last{
	background:none;
}
#other #inquire li{
	float:left;
	width:31%;
	background:url(../images/bar_dotWhite_vartical.png) repeat-y right;
	margin:0;
	padding-left:2%;
	padding-right:3%;
}
#other #inquire li.middle{
	padding-bottom:2em;
}
#other #inquire li.last{
	width:28%;
	padding-left:0;
	padding-right:0;
	background:none;
}

#sidemenu li{
	float:left;
	background:none;
	padding: 5px 5px 5px 0;
	border-bottom:none;
}
#sidemenu li:after{
	content:"/";
	margin-left:0.5em;
}
#sidemenu li.last:after{
	content:none;
}
#sidemenu li a{
	display:inline;
}

#mainimage {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

.centerMobile{
	overflow:visible;
}
.centerMobile .floatleft{	float:left;}
.centerMobile .floatright{	float:right;}

.hiddenMobile{	visibility:visible;}

.cropimg{
	margin:0;
	height:0;
	visibility:hidden;
}
.hiddenMobile.viewTabPc{
	width:auto;
}

.centerMobile#onlyMobilePR .floatleft{
	float:none;
}

#message{
	clear:none;
}


dl#profile dt{
	clear:left;
	float:left;
}

dl#profile dd{
	padding-left:6em;
}

#access .floatright{
	float:right;
	max-width:50%;
}
#access p{
	clear:none;
}
#AccsessImages{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#shopimg.centerMobile{
	max-width:49%;
	clear:none;
}
/*
#voiceArea{
	margin-left:10px;
}*/
.voice{
    width: 47.5%;
    margin: 1%;
}
    
.photolist li {
	font-size:1em;
}
.photolist li img{
	max-height:none;
}
#coursePrice dt{
	font-size:1.3em
	padding:1em 2em;
}

#coursePrice dd{
	font-size:1.3em;
	padding:1em 2em;
}

.visitTable{
	width:14%;
}

#vtLabel:after{
	content:"時間帯";
}
#visitMark li{
	float:none
}
#visitLabel{
	width:14%;
}


/* クーポン */
#bnrCoupon a{
	text-align:center;
	background:url(../images/couponBnrArrow.png) 98% 50% no-repeat;
}
#txtCoupon{
	max-width:190px;
	width:40%;
}

#txtCouponHere{
	max-width:100%;
	width:50%;
}
#bnrCoupon a{
	padding:10px 5px;
}
}


/* イレギュラー : フッターのお問い合わせ・ご予約が1行になったとき */
@media only screen and (min-width: 667px) {

#bnrCoupon{
	width:580px;
	padding:5px;
}
#txtCouponHere{
	width:341px;
}

p#fInquire{
	margin-top:8px;
}
p#copy{
	margin-top:20px;
}
#AccsessImages{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

}

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 88.5%;
	max-width: 960px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
}
#gridHeader {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#hTelnum{
	top:40px;
}
#header p{
	top:15px;
	width:100%;
	text-align:right;
	right:0;
	font-size:1em;
}

#menu li{
	width:auto;
}

#menu li a,
#menu li.hiddenMobile a{
	padding: 11px 15px 15px 15px;
}
#bgYotsuba{
	padding-top:30px;
}

#gridFooter {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#main {
	clear: both;
	float: left;
	margin-left: 0;
	width: 74.5762%;
	display: block;
}
#sub {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 23.7288%;
	display: block;
	padding-top:0;
	border-top:none;
}
#contents {
	padding-top:0.75% 1%;
}
#news {
	clear: both;
	float: left;
	margin-left: 0.5%;
	width: 95.5%;
	display: block;
	
	margin-bottom:30px;
}
#inquire {
	clear: both;
	float: left;
	margin-left: 0;
	width: 97.5%;
	display: block;
}
#other #inquire{
	width:97.5%;
}

#other #inquire li,
#other #inquire li.middle,
#other #inquire li.last{
	float:none;
	width:94%;
	padding-bottom:15px;
	padding-left:0;
	padding-right:0;
	background:url(../images/bar_dotWhite.png) bottom center repeat-x;
	margin:0 3%;
}
#other #inquire li.last{
	background:none;
}
#sidemenu li{
	float:none;
	background:url(../images/iconArrowGreen.png) left 7px no-repeat;
	padding: 5px 5px 5px 1em;
}
#sidemenu li:after{
	content:none;
}

#mainimage {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

.hiddenMobile{
	height:auto;
}
#menu .hiddenMobile a{
	visibility:visible;
}
/*
#voiceArea{
	margin-left:20px;
}*/
.voice{
    width: 45%;
    margin:2%;
}


}