/* CSS Document */
@charset "utf-8";
html {
	overflow-y: scroll;
}
body {
	font-family: 'meiryo', 'メイリオ', 'ms pgothic', 'ms pゴシック', osaka, sans-serif;
	background-repeat: repeat;
	background-attachment: fixed;
	font-size: 80%;
	min-width: 1080px;
	overflow: hidden;
}
 *::-moz-selection {
 background: none repeat scroll 0 0 #EE7700;
 color: #FFFFFF;
 font-weight:bold
}
::selection {
	background: none repeat scroll 0 0 #EE7700;
	color: #FFFFFF;
	font-weight: bold
}
input, textarea {
	font-family: 'meiryo', 'メイリオ', 'ms pgothic', 'ms pゴシック', osaka, sans-serif;
}
/* for IE6 */
* html body {
	font-family: 'meiryo', 'メイリオ', 'ms pgothic', 'ms pゴシック', osaka, sans-serif;
	font-size: 75%;
}
* html input, * html textarea {
	font-family: 'meiryo', 'メイリオ', 'ms pgothic', 'ms pゴシック', osaka, sans-serif;
}
a {
}
a:link {
}
a:visited {
}
a:hover {
	text-decoration: none
}
a:active {
}
/* clerfix */
#contents:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}
.imgR {
	float: right;
	margin: 0 0 10px 10px;
}
.imgL {
	float: left;
	margin: 0 10px 10px 0;
}
.tC, .btn {
	text-align: center;
}
.tR, .sign {
	text-align: right;
}
/*----------------------------------------------------
		#contents（メインとサイド）
----------------------------------------------------*/

#gnavi {
	height: 90px;
	position: fixed;
	width: 100%;
	z-index: 80;
	top: 0;
	overflow: hidden;
}
#gnavi .inner {
	width: 980px;
	margin: auto;
	position: relative;
}
#gnavi .inner .logo {
	position: absolute;
	top: 30px;
	left: 20px;
}
#gnavi .inner .indicator {
	position: absolute;
	top: 20px;
	left: 200px;
	cursor:pointer;
}
#gnavi .inner nav{
	position: absolute;
	left: 260px;
	top: 20px;
	width: 720px;
	height: 33px;
	overflow: hidden;
}
#gnavi .inner .navi {
	width:720px;
}
#gnavi .inner .navi li a {
	margin: 0px 0px 0px 10px;
	padding: 10px 0px;
	text-align: center;
	width: 110px;
	line-height: 1;
	display: block;
	font-family: 'AvantGardeGothicITCW02XLt';
	color: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: background-color .3s;
	-moz-transition: background-color .3s;
	-ms-transition: background-color .3s;
	-o-transition: background-color .3s;
	transition: background-color .3s;
}
#gnavi .inner .navi .on a {
	display: block;
}
#gnavi .inner .navi a:hover {
	display: block;
}
#gnavi .inner .navi a {
	text-decoration: none;
}
#gnavi li {
	float: left;
}
#gnavi a {
	color: #FFFFFF;
}
#headnavi {
	position: absolute;
	z-index: 80;
	bottom: 10%;
	left: 20px;
	width: 230px;
}
#headnavi .indicator {
	margin-bottom: 15px;
}
#headnavi .navi{
	overflow:hidden;
	height: 396px;
}
#headnavi .navi li a {
	padding: 15px 0px;
	margin: 0px 0px 10px 0px;
	display: block;
	line-height: 1;
	font-family: 'AvantGardeGothicITCW02XLt';
	font-size: 2em;
	text-decoration: none;
	color: #fff;
	width: 230px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: background-color .3s;
	-moz-transition: background-color .3s;
	-ms-transition: background-color .3s;
	-o-transition: background-color .3s;
	transition: background-color .3s;
}
li.n1 a {
	background-color: #7DBAE3;
}
li.n2 a {
	background-color: #7DBAE3;
}
li.n3 a {
	background-color: #7DBAE3;
}
li.n4 a {
	background-color: #7DBAE3;
}
li.n5 a {
	background-color: #7DBAE3;
}
li.n6 a {
	background-color: #7DBAE3;
}
/*lighten*/
li.n1 a:hover {
	background-color: #ccc;
}
li.n2 a:hover {
	background-color: #ccc;
}
li.n3 a:hover {
	background-color: #ccc;
}
li.n4 a:hover {
	background-color: #ccc;
}
li.n5 a:hover {
	background-color: #ccc;
}
li.n6 a:hover {
	background-color: #ccc;
}
/*darken
li.n1 a:hover{background-color:#A65400;}
li.n2 a:hover{background-color:#5C85A3;}
li.n3 a:hover{background-color:#477E6B;}
li.n4 a:hover{background-color:#64822A;}
li.n5 a:hover{background-color:#A86D6F;}
li.n6 a:hover{background-color:#775F77;}
*/

/*-------------------------------------

 Intro
 
-------------------------------------*/
#intro{
	position:absolute;
	background:#ffffff;
	top:0px;
	left:0px;
	z-index:80;
	width:100%;
}
#illust1,
#illust2,
#illust3,
#illust4,
#intrologo{
	position:absolute;
}
#illust1{
	top:400px;
	left:300px;
	z-index:5;
}
#illust2{
	top:270px;
	left:110px;
	z-index:4;
}
#illust3{
	top:180px;
	left:380px;
	z-index:3;
}
#illust4{
	top:50px;
	left:290px;
	z-index:2;
}
#intrologo{
	top:400px;
	left:60%;
	z-index:1;
}

/*-------------------------------------

 MainImage
 
-------------------------------------*/

#mainimage {
	text-align: center;
}
#mainimage .pic {
	background: url(../img/bg/bg2.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#mainimage .inner {
	width: 980px;
	height: 100%;
	margin: auto;
	position: relative
}
#mainimage .inner h1 {
	color: #FFF;
	font-family: 'AvantGardeGothicITCW02XLt';
	font-size: 8em;
	position: absolute;
	bottom: 11%;
	left: 290px;
}
#mainimage .inner h2.logo {
	position: absolute;
	top: 30px;
	left: 20px;
	width: 153px;
}
#mainimage .inner .scroll_indicator {
	position: absolute;
	bottom: 3%;
	left: 500px;
}
/*-------------------------------------

 Main
 
-------------------------------------*/

#maincontents section {
	min-height: 600px;
	position: relative;
}
#maincontents section.bgSection {
	padding: 0px;
	background-size: cover;
	background-position: 0 0;
	background-attachment:fixed;
}
#maincontents section .title {
	padding-top: 50px;
	padding-bottom: 40px;
	font-family: 'AvantGardeGothicITCW02XLt';
	font-size: 5em;
	font-weight: normal;
}
#maincontents section .title h2 {
	padding-left: 45px;
	margin-left: -45px;
	line-height: 1;
}
#maincontents section .inner {
	width: 980px;
	margin: auto;
	padding: 100px 0px;
	position: relative;
}
#maincontents section .inner p {
	margin-bottom: 20px;
}
/*-------------------------------------

 Message
 
-------------------------------------*/

#message {
	background: url(../img/bg/black.jpg) 0 0 fixed;
	background-size:cover;
}
#message .inner {
	color: #FFFFFF;
	padding-left: 30px;
}
#message .inner h2 {
	color: #fff;
	
}
#message .inner p {
	line-height: 1.4em;
	text-shadow: 0px 0px 3px #000;
	font-size:1.2em;
}
/*-------------------------------------

 Staff
 
-------------------------------------*/

#staff {
	background-color: #fff;
	line-height: 1.8em;
}
#staff .inner h2 {
	color: #7DBAE3;
}
#staffList {
	width: auto;
	text-align: center;
	margin-top: 500px;
}
#staffList li {
	margin: 10px;
	list-style: none;
	font-family: 'AvantGardeGothicITCW02XLt';
	position: relative;
	width: 110px;
	height: 150px;
	display: inline-block;
	text-align: left;
	cursor: pointer;
}
#staffList li .num {
	font-size: 2em;
	position: absolute;
	z-index: 10;
	top: -15px;
	left: -15px;
}
#staffList li .ph {
	position: relative;
	width: 100px;
	height: 100px;
	margin-bottom: 10px;
}
#staffList li .ph img {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	width: 100px;
	height: 100px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	opacity: 1;
}
#staffList li.current .ph img {
	opacity: .7;
}
#staffList li .ph span {
	display: none;
	position: absolute;
	background-color: #e0e0e0;
	width: 100px;
	height: 100px;
	right: -5px;
	bottom: -5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
#staffList li.current .ph span {
	bottom: 0px;
	right: 0px;
}
#staffList li .name {
	position: relative;
}
#staffList li .name h3 {
	font-size: 2em;
	position: absolute;
	z-index: 1;
	color:white;
}
#staffList li .name span {
	position: absolute;
	display: block;
	background-color: #e0e0e0;
	width: 105px;
	height: 25px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

}
#staffList li.s1 .num {
	color: #7DBAE3
}
#staffList li.s2 .num {
	color: #7DBAE3
}
#staffList li.s3 .num {
	color: #7DBAE3
}
#staffList li.s4 .num {
	color: #7DBAE3
}
#staffList li.s5 .num {
	color: #7DBAE3
}
#staffList li.s6 .num {
	color: #7DBAE3
}
#staffList li.s7 .num {
	color: #7DBAE3
}
#staffList li.s1 span {
	background-color: #7DBAE3
}
#staffList li.s2 span {
	background-color: #7DBAE3
}
#staffList li.s3 span {
	background-color: #7DBAE3
}
#staffList li.s4 span {
	background-color: #7DBAE3
}
#staffList li.s5 span {
	background-color: #7DBAE3
}
#staffList li.s6 span {
	background-color: #7DBAE3
}
#staffList li.s7 span {
	background-color: #7DBAE3
}
#staffPane {
	position: absolute;
	top: 280px;
	left: 650px;
}
#staffPane li {
	position: absolute;
	list-style: none;
	display: none;
}
#staffPane li.current {
	display: block;
}
#staffPane li .ph {
	margin-bottom: 20px;
}
#staffPane li .ph img {
	width: 300px;
	height: 430px;
}
#staffPane li .name {
	position: absolute;
	top: 323px;
	left: -30px;
	background: #fff;
	padding: 10px 20px;
}
#staffPane li .name p {
	margin: 0;
}
#staffPane li .name h3 {
	font-size: 1.5em;
	padding: 0;
	margin: 0;
}
#staffPane li .prize {
	width: 330px;
	margin-left: -10px;
	height: 160px;
	overflow-y: scroll;
	font-size: 1em;
	line-height: 1.4;
	display:none;
}
#staffPane li .message {
	width: 530px;
	margin-left: 0px;
	height: auto;
	position:absolute;
	padding:30px 40px 40px 40px;
	box-sizing:border-box;
	top:0px;
	left:-630px;
	/*background: url(../img/staff/staff_message_bg.png) no-repeat 0 0;*/
	background:#eeeeee;
	z-index:9;
}
#staffPane li div.message:after{
	/*content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 20px 0;
	border-color: transparent #eeeeee transparent transparent;
	position:absolute;
	right:20px;*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
#staffPane li .message p{
	height: auto;
	/*overflow-y: scroll;*/
	font-size: 0.9em;
	line-height: 2;
}
#staffBox {
	position: absolute;
	top: 260px;
	left: 600px;
	z-index: 10;
	width: 384px;
	height: 456px;
	pointer-events:none;
}
/*-------------------------------------

 Menu
 
-------------------------------------*/

#menu { /* menu */
	background: #fff;
}
#menu .inner h2 {
	color: #7DBAE3;
}
#menuList {
	width: 250px;
	text-align: center;
	margin-bottom: 100px;
}
#menuList li {
	margin: 10px;
	list-style: none;
	font-family: 'AvantGardeGothicITCW02XLt';
	display: block;
	text-align: left;
	cursor: pointer;
}
#menuList li .ph {
	position: relative;
	width: 100px;
	height: 100px;
	margin-bottom: 10px;
}
#menuList li .ph img {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	opacity: 1;
}
#menuList li .name {
	font-size: 1.5em;
	padding: 5px 10px;
	border-radius: 5px;
	background-color: #7DBAE3;
	display: block;
}
#menuList li.s1 {
	color: #7DBAE3
}
#menuList li.s2 {
	color: #7DBAE3
}
#menuList li.s3 {
	color: #7DBAE3
}
#menuList li.s4 {
	color: #7DBAE3
}
#menuList li.s5 {
	color: #7DBAE3
}
#menuList li.s6 {
	color: #7DBAE3
}
#menuList li.s7 {
	color: #7DBAE3
}
#menuList li.s8 {
	color: #7DBAE3
}
#menuList li a{
	color:white;
	text-decoration:none;
}
#menuPane {
	position: absolute;
    top: 260px;
    left: 290px;
    width: 690px;
    height: 450px;
}
#menuPane li {
	position: absolute;
	list-style: none;
	display: none;
	width: 100%;
}
#menuPane li.current {
	display: block;
}
#menuPane li .name {
	padding: 2px 10px;
	margin-bottom: 45px;
}

#menuPane li .name p {
	margin: 0;
	position:absolute;
	top:8px;
	right:5px;
	z-index:2;
}
#menuPane li .name h3 {
	font-family: 'AvantGardeGothicITCW02XLt';
	font-size: 2em;
	padding: 0;
	margin: 0;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
}
#menuPane li .name span{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height: 25px;
	z-index:1;
	border-bottom: 4px solid #ccc;
	padding-bottom: 5px;
}
#menuPane li .menu {
	margin-top: 20px;
	height: 320px;
	overflow-y: scroll;
	padding: 10px 0px;
	position: relative;
	z-index: 80;
}
#menuPane li .menu h4 {
	font-weight: bold;
	margin-top: 20px;
	padding: 10px 5px;
	border-bottom: 3px solid #e0e0e0;
}
#menuPane li.s1 .menu h4 {
	color: #EE7700
}
#menuPane li.s2 .menu h4 {
	color: #82BFE9
}
#menuPane li.s3 .menu h4 {
	color: #65B598
}
#menuPane li.s4 .menu h4 {
	color: #92B942
}
#menuPane li.s5 .menu h4 {
	color: #F29C9F
}
#menuPane li.s6 .menu h4 {
	color: #A989A9
}
#menuPane li.s7 .menu h4 {
	color: #FCD369
}
#menuPane li.s8 .menu h4 {
	color: #EF8F7A
}
#menuPane table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
}
#menuPane table th, #menuPane table td {
	padding: 8px 5px;
	text-align: left;
	border-bottom: 1px dashed #ccc;
	line-height: 30px;
	font-size: 1.2em;
}
#menuPane table td {
	padding-right:20px;
	text-align:right;
}
#menuPane .comment {
	width: 21px;
	height: 20px;
	position: relative;
	top: 7px;
	left: 5px;
	background-repeat: no-repeat;
	background-position: 0 0;
	display: inline-block;
	font-size:0.8em;
}
#menuPane li.s1 .comment {
	background-image: url(../img/menu/icon/menu_icon_cut.gif);
}
#menuPane li.s2 .comment {
	background-image: url(../img/menu/icon/menu_icon_blow.gif);
}
#menuPane li.s3 .comment {
	background-image: url(../img/menu/icon/menu_icon_set.gif);
}
#menuPane li.s4 .comment {
	background-image: url(../img/menu/icon/menu_icon_color.gif);
}
#menuPane li.s5 .comment {
	background-image: url(../img/menu/icon/menu_icon_perm.gif);
}
#menuPane li.s6 .comment {
	background-image: url(../img/menu/icon/menu_icon_styling.gif);
}
#menuPane li.s7 .comment {
	background-image: url(../img/menu/icon/menu_icon_make.gif);
}
#menuPane li.s8 .comment {
	background-image: url(../img/menu/icon/menu_icon_nail.gif);
}
#menuPane .float {
	position: absolute;
	bottom: 40px;
	left: -25px;
	width: 170px;
	padding: 10px;
	line-height: 1.5;
	-webkit-box-shadow: 0px 0px 5px #000;
	-moz-box-shadow: 0px 0px 5px #000;
	box-shadow: 0px 0px 5px #000;
	display: none;
}
#menuPane .float:after {
	content: no-open-quote;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 15px 5px 0 5px;
	border-color: #000 transparent transparent transparent;
	position: absolute;
	bottom: -15px;
	left: 30px;
}
#menuPane .float-under {
	position: absolute;
	top: 40px;
	left: -25px;
	width: 170px;
	padding: 10px;
	line-height: 1.5;
	-webkit-box-shadow: 0px 0px 5px #000;
	-moz-box-shadow: 0px 0px 5px #000;
	box-shadow: 0px 0px 5px #000;
	display: none;
}
#menuPane .float-under:after {
	content: no-open-quote;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0px 5px 15px 5px;
	border-color: transparent transparent #000 transparent;
	position: absolute;
	top: -15px;
	left: 30px;
}
#menuPane li.s1 .float,
#menuPane li.s1 .float-under {
	background-color: #EE7700
}
#menuPane li.s2 .float,
#menuPane li.s2 .float-under {
	background-color: #82BFE9
}
#menuPane li.s3 .float,
#menuPane li.s3 .float-under {
	background-color: #65B598
}
#menuPane li.s4 .float,
#menuPane li.s4 .float-under {
	background-color: #92B942
}
#menuPane li.s5 .float,
#menuPane li.s5 .float-under {
	background-color: #F29C9F
}
#menuPane li.s6 .float,
#menuPane li.s6 .float-under {
	background-color: #A989A9
}
#menuPane li.s7 .float,
#menuPane li.s7 .float-under {
	background-color: #FCD369
}
#menuPane li.s8 .float,
#menuPane li.s8 .float-under {
	background-color: #EF8F7A
}
#menuPane li.s1 .float:after {
	border-color: #EE7700 transparent transparent transparent
}
#menuPane li.s2 .float:after {
	border-color: #82BFE9 transparent transparent transparent
}
#menuPane li.s3 .float:after {
	border-color: #65B598 transparent transparent transparent
}
#menuPane li.s4 .float:after {
	border-color: #92B942 transparent transparent transparent
}
#menuPane li.s5 .float:after {
	border-color: #F29C9F transparent transparent transparent
}
#menuPane li.s6 .float:after {
	border-color: #A989A9 transparent transparent transparent
}
#menuPane li.s7 .float:after {
	border-color: #FCD369 transparent transparent transparent
}
#menuPane li.s8 .float:after {
	border-color: #EF8F7A transparent transparent transparent
}

#menuPane li.s1 .float-under:after {
	border-color: transparent transparent #EE7700 transparent
}
#menuPane li.s2 .float-under:after {
	border-color: transparent transparent #82BFE9 transparent
}
#menuPane li.s3 .float-under:after {
	border-color: transparent transparent #65B598 transparent
}
#menuPane li.s4 .float-under:after {
	border-color: transparent transparent #92B942 transparent
}
#menuPane li.s5 .float-under:after {
	border-color: transparent transparent #F29C9F transparent
}
#menuPane li.s6 .float-under:after {
	border-color: transparent transparent #A989A9 transparent
}
#menuPane li.s7 .float-under:after {
	border-color: transparent transparent #FCD369 transparent
}
#menuPane li.s8 .float-under:after {
	border-color: transparent transparent #EF8F7A transparent
}


/*-------------------------------------

 Works
 
-------------------------------------*/

#works {
	background: #fff;
}
#works .inner h2 {
	color: #7DBAE3;
}
#mdArt, #mdSalon {
	font-size: 0.6em;
	color: #92B942;
	position: absolute;
}
#mdArt {
	top: 310px;
	left: 445px;
}
#mdSalon {
	top: 540px;
	left: 15px;
}
#art{
	position:absolute;
	top:215px;
	left:0px;
}
#salon{
	position:absolute;
	top:450px;
	left:0px;
}
#art ul {
	margin-top: 20px;
	margin-bottom: 5px;
}
#salon ul {
	margin-left: 95px;
	margin-top: 15px;
	margin-bottom: 50px;
}
#art ul.current,
#salon ul.current{
	display:block;
}
.worksList {
	width: 455px;
	text-align: left;
	position:absolute;
	top:0;
	left:0;
	display:none;
}
.worksList li {
	margin: 5px 0px;
	list-style: none;
	font-family: 'AvantGardeGothicITCW02XLt';
	position: relative;
	width: 80px;
	height: 80px;
	display: inline-block;
	text-align: left;
	cursor: pointer;
}
.worksList li .ph {
	position: relative;
	width: 80px;
	height: 80px;
	margin-bottom: 10px;
}
.worksList li.noitem .ph p {
	font-size: 15px;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	width: 76px;
	height: 56px;
	padding-top: 20px;
	border: 2px solid #92B942;
	background-color: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	opacity: 1;
	margin-bottom: 0px !important;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #999;
	line-height: 1.2;
}
.worksList li .ph img {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	width: 80px;
	height: 80px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	opacity: 1;
}
.worksList li.current .ph img {
	opacity: .7;
}
.worksList li.current .ph span {
	right:0px;
	bottom:0px;
}
.worksList li .ph span {
	display: none;
	position: absolute;
	background-color: #92B942;
	width: 80px;
	height: 80px;
	right: -5px;
	bottom: -5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.worksList li:nth-child(2).noitem .ph p, .worksList li:nth-child(4).noitem .ph p, .worksList li:nth-child(5).noitem .ph p, .worksList li:nth-child(7).noitem .ph p, .worksList li:nth-child(10).noitem .ph p, .worksList li:nth-child(12).noitem .ph p, .worksList li:nth-child(13).noitem .ph p, .worksList li:nth-child(15).noitem .ph p {
	border: 2px solid #F29C9F;
	display: none;
}
.worksList li:nth-child(2) .ph span, .worksList li:nth-child(4) .ph span, .worksList li:nth-child(5) .ph span, .worksList li:nth-child(7) .ph span, .worksList li:nth-child(10) .ph span, .worksList li:nth-child(12) .ph span, .worksList li:nth-child(13) .ph span, .worksList li:nth-child(15) .ph span {
	background-color: #F29C9F;
	display: none;
}
#worksPane {
	position: absolute;
	top: 190px;
	left: 610px;
	width: 340px;
	height: 450px;
}
#worksPane li {
	position: absolute;
	list-style: none;
	display: none;
	width: 100%;
}
#worksPane li .ph img {
	width: 340px;
	height: 450px;
}
#worksPane li.current {
	display: block;
}
#worksBox {
	position: absolute;
	top: 165px;
	left: 600px;
	z-index: 10;
	width: 384px;
	height: 485px;
}
#worksSep {
	position:absolute;
	top:395px;
	left:0px;
	margin-left: 20px;
}
#artnav{
	position:absolute;
	top: 150px;
    left: 361px;
	z-index:50;
}
#salonnav{
	position:absolute;
	top:590px;
	left:32px;
	z-index:50;
}
#artnav a,
#salonnav a{
	padding:5px;
	line-height:0;
}
/*-------------------------------------

 Salon Data
 
-------------------------------------*/

#salondata {
	background: #fff;
}
#salondata .inner {
	height: 402px;
}
#salondata .inner h2 {
	color: #7DBAE3;
}
#salonSlide {
	position: absolute;
	top: 250px;
	left: 50px;
	width: 354px;
	height: 426px;
	background: #e0e0e0;
	z-index: 10;
}
#salonSlide .left {
	position: absolute;
	top: 0;
	left: 0px;
	z-index: 80;
	width: 147px;
	height: 426px;
	overflow: hidden;
}
#salonSlide .right {
	position: absolute;
	top: 0;
	left: 147px;
	z-index: 80;
	width: 207px;
	height: 426px;
	overflow: hidden;
}
#salonSlide .left .mask, #salonSlide .right .mask {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 80;
}
#salonSlide .left .ph {
	margin-top: 87px;
	width: 147px;
	height: 335px;
	/*background-image:url(../img/salon/elly_3.jpg);*/
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#salonSlide .right .ph {
	margin-top: 87px;
	width: 207px;
	height: 335px;
	/*background-image:url(../img/salon/elly_4.jpg);*/
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#salonDataNav {
	position: absolute;
	top: 450px;
	left: 0px;
	width: 450px;
	z-index: 1;
}
#salonDataNav .prev {
	position: absolute;
	top: 0px;
	left: 0px;
	cursor: pointer;
}
#salonDataNav .next {
	position: absolute;
	top: 0px;
	right: 0px;
	cursor: pointer;
}
#salonBox {
	position: absolute;
	top: 180px;
	left: 525px;
	background: url(../img/salon/salon_box.png) no-repeat 0 0;
	width: 452px;
	height: 464px;
	z-index: 10;
}
#salonPane {
	position: absolute;
	top: 100px;
	left: 500px;
	width: 500px;
	height: 350px;
}
#salonPane li {
	list-style: none;
}
#salonPane li img {
	width: 500px;
	height: 350px;
}
#salonImgData {
	display: none;
}
#salondata .data {
	width: 980px;
	height: 900px;
	position: relative;
	z-index: 50;
	margin: auto;
	pointer-events:none;
}
#salondata .data #salonInfo {
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 0px 0px 0px 0px;
	width: auto;
	height: auto;
}
#salondata .data #salonInfo h2 {
	font-size: 2.5em;
	font-family: 'AvantGardeGothicITCW02XLt';
	margin-bottom: 15px;
	pointer-events:auto;
}
#salondata .data #salonInfo table {
	margin-bottom: 10px;
	margin-left: 0px;
	font-size: 0.8em;
	pointer-events:auto;
}
#salondata .data #salonInfo table th, #salondata .data #salonInfo table td {
	padding-top: 5px;
	padding-bottom: 5px;
}
#salondata .data #salonInfo table th {
	padding-right: 5px;
	border-right: 2px solid #000;
	text-align: right;
	width: 8em;
}
#salondata .data #salonInfo table td {
	padding-left: 5px;
}
#salondata .data #salonInfo table td.tel {
	font-size: 1.2em;
}
#salondata #map {
	position: absolute;
	width: 100%;
	height: 300px;
	background: #e0e0e0;
	top: 500px;
	left: 0px;
}
#salondata #map_s {
	position: absolute;
	top: 450px;
	left: 550px;
	pointer-events:auto;
}
/*-------------------------------------

 Bg Section
 
-------------------------------------*/

#bg1 {
	background-image: url(../img/bg/bg1.jpg);
}
#bg2 {
	background-image: url(../img/bg/bg3.jpg);
}
#bg3 {
	background-image: url(../img/bg/bg4.jpg);
}
#bg4 {
	background-image: url(../img/bg/bg2.jpg);
}
#footer .inner {
	width: 980px;
	margin: auto;
	position: relative;
	height: 150px;
}
#footer .logo01 {
	position: absolute;
	left: 0;
	top: 20px;
}
#footer .logo02 {
	position: absolute;
	left: 130px;
	top: 20px;
}
#footer .copyright {
	color: #cccccc;
	font-size: 80%;
	position: absolute;
	right: 0px;
	top: 20px;
}
.clear {
	clear: both
}
.doui {
	margin-top: 20px;
	text-align: center;
	line-height: 3em;
	font-size: 90%;
}
.doui .link a {
	color: #fff;
	padding-right: 25px;
	background: url(../../images/icon_pdf.gif) right center no-repeat;
}
/* For modern browsers */
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
	zoom: 1;
}
/*------------parts----------*/
	
.posiCenter {
	text-align: center;
}
.posiLeft {
	text-align: left;
}
.posiRight {
	text-align: right;
}
.topMg5 {
	margin-top: 5px !important;
}
.topMg10 {
	margin-top: 10px !important;
}
.end {
	margin-bottom: 0 !important;
}
.btmMg0 {
	margin-bottom: 0 !important;
}
.btmMg5 {
	margin-bottom: 5px !important;
}
.btmMg10 {
	margin-bottom: 10px !important;
}
.btmMg12 {
	margin-bottom: 12px !important;
}
.btmMg15 {
	margin-bottom: 15px !important;
}
.btmMg20 {
	margin-bottom: 20px !important;
}
.btmMg25 {
	margin-bottom: 25px !important;
}
.btmMg30 {
	margin-bottom: 30px !important;
}
.btmMg35 {
	margin-bottom: 35px !important;
}
.btmMg40 {
	margin-bottom: 40px !important;
}
.btmMg45 {
	margin-bottom: 45px !important;
}
.btmMg50 {
	margin-bottom: 50px !important;
}
.btmMg55 {
	margin-bottom: 55px !important;
}
.sizeXS {
	font-size: 75% !important;
}
.sizeS {
	font-size: 88% !important;
}
.sizeM {
	font-size: 100% !important;
}
.sizeL {
	font-size: 110% !important;
}
.sizeLL {
	font-size: 120% !important;
}
.sizeXL {
	font-size: 130% !important;
}
.sizeXXL {
	font-size: 140% !important;
}
.fbold {
	font-weight: bold;
}
.topm10 {
	margin-top: 10px !important;
}
.topm15 {
	margin-top: 15px !important;
}
.topm20 {
	margin-top: 20px !important;
}
.topm30 {
	margin-top: 30px !important;
}
.topm40 {
	margin-top: 40px !important;
}
.topm50 {
	margin-top: 50px !important;
}
.topm60 {
	margin-top: 60px !important;
}
.leftm5 {
	margin-left: 5px !important;
}
.leftm10 {
	margin-left: 10px !important;
}
.leftm15 {
	margin-left: 15px !important;
}
.leftm20 {
	margin-left: 20px !important;
}
.leftm30 {
	margin-left: 30px !important;
}
.rightm5 {
	margin-right: 5px !important;
}
.rightm9 {
	margin-right: 9px !important;
}
.rightm10 {
	margin-right: 10px !important;
}
.rightm15 {
	margin-right: 15px !important;
}
.rightm20 {
	margin-right: 20px !important;
}
.topm25 {
	margin-top: 25px;
}
.rightm30 {
	margin-right: 30px !important;
}
.leftp5 {
	padding-left: 5px;
}
.leftp10 {
	padding-left: 10px;
}
.leftp15 {
	padding-left: 15px;
}
.leftp20 {
	padding-left: 20px;
}
.leftp30 {
	padding-left: 30px;
}
.leftp42 {
	padding-left: 42px;
}
.rightp0 {
	padding-right: 0 !important;
}
.rightp5 {
	padding-right: 5px;
}
.rightp10 {
	padding-right: 10px;
}
.rightp15 {
	padding-right: 15px;
}
.rightp20 {
	padding-right: 20px;
}
.rightp25 {
	padding-right: 25px;
}
.rightp30 {
	padding-right: 30px;
}
.rightp40 {
	padding-right: 40px;
}
.btmp0 {
	padding-bottom: 0 !important;
}
.btmp5 {
	padding-bottom: 5px !important;
}
.btmp10 {
	padding-bottom: 10px !important;
}
.btmp15 {
	padding-bottom: 15px !important;
}
.btmp20 {
	padding-bottom: 20px !important;
}
.totop {
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 80;
}

@media screen and (max-device-width: 1024px) {
	body{
		min-width:0;
	}
	#headnavi,
	#mainimage .inner .scroll_indicator{
		display: none;
	}
	#gnavi{
		opacity:1 !important;
	}
	#headnavi .navi,
	#mainimage .inner h2.logo{
		display: none;
	}
	#gnavi .inner .indicator{
		display: none;
	}
	#gnavi .inner nav {
		position: absolute;
		left: 140px;
		top: 27px;
		width: auto;
		height: 33px;
		overflow: hidden;
	}
	#mainimage .inner h1{
		left:5%;
	}
	#message .inner p {
    	line-height: 2em;
		padding-left: 0;
	}
	#mainimage .pic {
		background-image: url(../img/bg/bg2.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment:	scroll;
	}
	#message{
		background: url(../img/bg/black.jpg) center center scroll;
	}
	#maincontents section .title h2 {
		margin-left: 0px;
		padding-left: 0;
	}
	#maincontents section.bgSection {
		background-attachment:scroll;
		background-position: right center;
		min-height:200px !important;
	}
	#illust1{
		top:50%;
		left:300px;
		z-index:5;
	}
	#illust2{
		top:35%;
		left:110px;
		z-index:4;
	}
	#illust3{
		top:25%;
		left:380px;
		z-index:3;
	}
	#illust4{
		top:10%;
		left:290px;
		z-index:2;
	}
	#intrologo{
		top:50%;
		left:80%;
	}
	#maincontents section .inner{
		width: 100%;
		padding: 0px 5% 50px;
		box-sizing: border-box;
	}
	#staffList{
		margin-top: 0;
	}
	#staffPane{
		position: relative;
		top:0;
		left:0;
		padding: 5%;
	}
	#staffPane li{
		position: relative;
	}
	#staffPane li .message{
		width: auto;
		position: relative;
		left:0;
		font-size:1.5em;
	}
	#staffPane li .ph {
		margin: 0px auto 20px;
		width: 300px;
	}
	#staffPane li .name {
		left:150px;
	}
	#staffList{
		zoom:0.8;
	}
	#staffList li{
		margin: 0 10px 0 0;
		width: auto;
	}
	#staffBox {
		position: relative;
		top: 0;
		left: 0;
		z-index: 10;
		width: auto;
		height: auto;
		pointer-events: none;
	}
	#maincontents section{
		min-height:0 !important;
	}
	#menuList{
		width: 100%;
		margin-bottom: 40px;
	}
	#menuList li{
		margin:10px 0px;
	}
	#menuPane {
		position: relative;
		top: 0;
		left: 0;
		width: auto;
		height: auto;
	}
	#menuPane li {
		position: relative;
		animation: none;
		display: none;
		width: 100%;
	}
	#worksBox {
		position: relative;
		top: 0;
		left: 0;
		z-index: 10;
		width: auto;
		height: auto;
	}
	#worksPane {
		position: relative;
		top: 0;
		left: 0;
		width: 50%;
		height: auto;
		float:right;
	}
	#art {
		position: relative;
		top: 0;
		left: 0px;
	}
	.worksList {
 	   width: 50%;
		text-align: left;
		position: relative;
		top: 0;
		left: 0;
		display: none;
		float: left;
	}
	#artnav {
		position: relative;
		top: 0;
		left: 0;
		z-index: 50;
	}
	#art ul{
		margin-top: 0;
		margin-bottom: 50px;
	}
	#salonPane {
		position: relative;
		top: 0;
		left: 0;
		width: 500px;
		height: 350px;
		margin-bottom: 50px;
	}
	#salondata .inner{
		height:auto;
	}
	#salondata .data {
		width: auto;
		height: auto;
		position: relative;
		z-index: 50;
		margin: auto;
		pointer-events: none;
	}
	#salondata #map {
		position: relative;
		width: 100%;
		height: 300px;
		background: #e0e0e0;
		top: 0;
		left: 0;
	}
	#salondata .data #salonInfo {
    position: relative;
    top: 0px;
    left: 0px;
    padding: 0px 0px 0px 0px;
    width: auto;
    height: auto;
}
}
@media (max-width: 767px) {
	body{
		min-width: 0;
	}
	#mainimage .inner .scroll_indicator{
		display: none;
	}
	#headnavi{
		position: relative;
		top:0;
		left:0;
		margin:auto;
		padding-top: 250px;
	}
	#mainimage .pic,
	#maincontents section{
		background-size: cover;
	}
	#maincontents section .inner,
	#mainimage .inner,
	#salondata .data,
	#gnavi .inner{
		width: auto;
	}
	header nav{
		width: auto !important;
	}
	#mainimage .inner h1 {
		position: relative;
		bottom: 0;
		left: 0;
		text-align: left;
		display: none;
	}
	#maincontents section .inner {
		padding: 10px 30px 30px;
	}
	#maincontents section .title h2{
		padding-left: 0;
		font-size:0.8em;
	}
	#maincontents section.bgSection{
		display: none;
	}
	#staffPane li .message{
		width: auto;
		left:0;
	}
	#staffList li .ph{
		display: none;
	}
	#staffList {
		 margin-top: 0;
		text-align: left;
		font-size:0.7em;
	}
	#staffList li{
		height: auto;
		width:auto;
		margin-bottom: 25px;
	}
	#staffList li .name{
		display: none;
	}
	#staffList li .name span{
		width: 85px;
	}
	#staffPane{
		position: relative;
		top:0;
		left:0;
	}
	#staffPane li{
		position: relative;
	}
	#staffPane li .message{
		position: relative;
	}
	#menuList{
		width: auto;
		margin-bottom: 20px;
	}
	#menuList li{
		display: inline-block;
		margin: 6px;
	}
	#menuList li .name{
		font-size:1.2em;
	}
	#menuPane {
		position: relative;
		top: 0px;
		left: 0;
		width: auto;
		height: auto;
	}
	#menuPane li .menu {
		margin-top: 20px;
		height: auto;
		overflow-y: visible;
		padding: 10px 0px;
		position: relative;
		z-index: 80;
	}
	#artnav {
    	position: relative;
		top:0;
		left:0;
	}
	#art {
		position: relative;
		top:0;
		left: 0px;
	}
	#art ul{
		margin: 0 0 20px;
		padding: 0;
	}
	.worksList {
  		width: auto;
		position: relative;
		margin-bottom: 20px;
	}
	.worksList:after {
		content: ".";
		display: block;
		visibility: hidden;
		height: 0.1px;
		font-size: 0.1em;
		line-height: 0;
		clear: both;
	}
	.worksList li{
		float:left;
	}
	.worksList li,
	.worksList li .ph,
	.worksList li .ph span{
		width: 32px;
		height: 32px;
		margin-bottom: 0;
	}
	.worksList li .ph img{
		width: 100%;
		height: auto;
	}
	#worksPane {
		position: relative;
		top: 0px;;
		left: 0;
		width: auto;
		height: auto;
	}
	#worksPane li {
	    position: relative;
	}
	#worksPane li .ph img{
		width: 100%;
		height: auto;
	}
	

	#worksBox {
		position: relative;
		top: 0;
		left: 0;
		z-index: 10;
		width: auto;
		height: auto;
	}
	#salondata .data{
		height: auto;
	}
	#salondata .inner{
		height: auto;
	}
	#salondata .data #salonInfo {
    	position: relative;
	}
	#salondata #map {
		position: relative;
		width: 100%;
		height: 300px;
		background: #e0e0e0;
		top: 0;
		left: 0px;
	}
	
}