@charset "utf-8";
/* ---------------------------------------------------------------------------------
Copyright c 有限会社しゃんぷー All Rights Reserved.

HTML CSS Selectors staff 

$Revision: 1.0 $
--------------------------------------------------------------------------------- */

/*---------------------------------------------------------------------------------
一覧
--------------------------------------------------------------------------------- */
#contents-wrapper.list {
	width: 1040px;
}
#contents-wrapper.list h2.brandon {
	padding-bottom: 56px;
}

.list-box {
	float: left;
	width: 236px;
	padding-right: 12px;
	padding-bottom: 110px;
	padding-left: 12px;
}
.list-box:nth-of-type(4n+1) {
	clear: left;
}
.list-box a {
	display:block;
}
.list-box a:hover {
	-ms-filter: "alpha( opacity=100 )";
	opacity:1;
}
.list-box h3 {
	height: 216px;
	width: 216px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 28px;
	position: relative;
}
.list-box h3 span {
    display: block;
    height: 216px;
	width: 216px;
    position:absolute;
    top: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: 0.8s;
}
.list-box h3 .back {
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
}
 
.list-box a:hover .front {
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
}
 
.list-box :hover .back {
    transform:rotateY(360deg);
    -webkit-transform:rotateY(360deg);
}

.list-box h3 img {
	display: block;
	border-radius: 108px;
}
.list-box .name {
	font-size: 24px;
	line-height: 28px;
	text-align: center;
	height: 34px;
	font-weight: 400;
}
.list-box .job {
	font-size: 20px;
	line-height: 22px;
	text-align: center;
	height: 32px;
	font-weight: 400;
}
.list-box .salon {
	text-align: center;
	padding-top: 0px;
	padding-bottom: 0px;
}
.list-box .salon span {
	display: inline-block;
	height: 20px;
	/*width: 100px;*/
	text-align: center;
}
.list-box .salon span img {
	height: 20px;
	width: auto;
}


/*---------------------------------------------------------------------------------
詳細
--------------------------------------------------------------------------------- */
#contents-wrapper.detail {
	padding-top: 128px;
}
#detail-left {
	float: left;
	width: 420px;
	padding-left: 35px;
}
#detail-right {
	float: right;
	width: 420px;
	margin-right: 35px;
}
.data-box {
	padding-bottom: 245px;
}
.data-box h2 {
	padding-bottom: 45px;
}
.data-box h2 .job.brandon {
	text-align: center;
	display: block;
	font-size: 14px;
	line-height: 14px;
	font-weight: 400;
	padding-bottom: 16px;
}
.data-box h2 .brandon {
	text-align: center;
	display: block;
	font-size: 24px;
	line-height: 24px;
	font-weight: 500;
	padding-bottom: 20px;
}
.data-box h2 .jp {
	text-align: center;
	display: block;
	font-size: 18px;
	line-height: 18px;
}
.data-box .sns {
	text-align: center;
}
.data-box .sns a {
	display: inline-block;
	padding-right: 9px;
	padding-left: 9px;
}
.data-box .sns:empty {
	display:none;
}

.schedule {
	padding-bottom: 145px;
}
.schedule h3 {
	font-size: 18px;
	line-height: 18px;
	font-weight: 400;
	text-align: center;
	padding-bottom: 43px;
	
}
.schedule .calender-wrapper {
	width: 330px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
.schedule .calender-wrapper img {
	display: block;
	float: left;
}
a.prev, a.next {
	width: 22px;
	height: 38px;
	display: block;
	position: absolute;
	top: 111px;
	background-repeat: no-repeat;
}
a.prev {
	left: -45px;
	background-image: url(../img/staff/btn_prev.png);
}
a.next {
	right: -45px;
	background-image: url(../img/staff/btn_next.png);
}

a.prev span, a.next span {
	display: none;
}

.schedule ul {
	padding-right: 45px;
	padding-left: 45px;
}
.schedule li {
	font-size: 12px;
	line-height: 12px;
	padding-bottom: 15px;
	padding-left: 25px;
	position: relative;
}
.schedule li:before {
	display: block;
	height: 18px;
	width: 18px;
	border: 1px solid #000;
	border-radius: 10px;
	content: "";
	position: absolute;
	left: 0px;
	top: -3px;
}
.schedule li.day01:before  {
	background-color: #FFF;
}
.schedule li.day02:before  {
	background-color: #898989;
}
.schedule li.day03:before  {
	background-color: #2EA7E0;
}
.schedule li.day04:before  {
	background-color: #C30D23;
}


.salon {
	text-align: center;
	padding-top: 30px;
	padding-bottom: 97px;
}
.salon span {
	padding-right: 15px;
	padding-left: 15px;
	font-size: 20px;
	line-height: 20px;
	font-weight: normal;
}
.salon span img {
	height: 20px;
	width: auto;
}
.staff-photo {
	width: 350px;
	padding-bottom: 50px;
	margin-right: auto;
	margin-left: auto;
    text-align: center;
}
.staff-photo h3 {
    font-size: 14px;
    line-height: 1;
    font-weight: bold;
    font-style: oblique;
    padding: 20px 0px 16px;
}
.staff-photo p {
    font-size: 14px;
    line-height: 1;
    font-weight: bold;
    font-style: oblique;
    padding-bottom: 12px;
}


.message-box {
	padding-bottom: 120px;
}
.message-box h3 {
	font-size: 14px;
	font-weight: normal;
	text-align: center;
	padding-bottom: 70px;
}
.message-box p {
	font-size: 14px;
}
.message-box img {
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 26px;
	max-width: 100%;
	height:auto;
	display: block;
}


#style {
	padding-bottom: 30px;
}
#style h3 {
	font-size: 15px;
	line-height: 15px;
	font-weight: 500;
	text-align: center;
	padding-bottom: 93px;
}
#style li {
	float: left;
	width: 220px;
	padding-right: 26px;
	padding-bottom: 28px;
}
#style li:nth-of-type(4n) {
	padding-right: 0px;
}
#style li:nth-of-type(4n+1) {
	clear:left;
}
#style li a {
	display: block;
	border: 5px solid #EEEEEE;
}