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


/******************** clearfix ********************/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
/******************** hide-text (for image replacement ********************/
.hide-text {
  background-repeat: no-repeat !important;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
a.hide-text {
  display: block;
}
/* --------------------- */
a img.hover_img2 {
	background: none!important;
}
a:hover img.hover_img2 {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	background: none!important;
}
/* --------------------- */
#staff {
	background-image: url("../img/staff/bk_staff10.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	height: 800px;
	padding-bottom: 20px;
}
/*リスト4*/
.staff_list {
	width: 564px;
	padding-top:265px;
	padding-left:80px;
}
.staff_list ul {
}
.staff_list ul li {
	width: 564px;
}
.staff_list ul li a {
	color: #444444;
	text-decoration: none;
	display: block;
	padding-bottom:10px;
}
.staff_list ul li a .btn img {
	transition: transform 1s ease;
	-webkit-transition: transform 1s ease;
}
.staff_list ul li a .btn img:hover {
	transform: translate(0px, -12px);
	-webkit-transform: translate(0px, -12px);
}


/* .staffFaces */
.staffFaces .image {
  float: left;
}
.staffFaces .image a {
  outline: 0;
  display: block;
  cursor: pointer;
  text-align: center;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: transparent;
}
.staffFaces .image a.hover .face, .staffFaces .image a:hover .face {
  background-color: transparent;
}
.staffFaces .image a .face {
  display: block;
  margin-bottom: 0.6153846154rem;
}

.staffIntroductions {
	position:relative;
  display: none;
}
.staffIntroduction {
	
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
}
.mfp-close { /* for modal window's plugin */
  background: #644c2b !important;
  border: #fff solid 4px !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-weight: bold;
  line-height: 38px !important;
  right: -44px;
  top: -44px;
}

.staffIntroduction .title {
	font-style:italic;
	color:#FFFFFF;
  line-height: 1;
  background: #644c2b;
  padding: 0.5384615385rem 0.6923076923rem;
}
.staffIntroduction .introductionMain {
  background: #fff;
  padding: 20px;
}
.staffIntroduction .introductionMain .details .image {
  margin-bottom: 2.153846154rem;
}
.staffIntroduction .introductionMain .details .qa {
  width: 100%;
  border-top: 0.07692307692rem dotted #000;
}
.staffIntroduction .introductionMain .details .qa th, .staffIntroduction .introductionMain .details .qa td {
  width: 50%;
  vertical-align: top;
  padding: 0.3846153846rem 0;
  border-bottom: 0.07692307692rem dotted #000;
}
.staffIntroduction .introductionMain .details .qa th {
  color: #644c2b;
  font-weight: bold;
}


.mfp-content { /* for modal window's plugin */
  width: auto !important;
}
.staffIntroduction {
  width: 820px;
  margin-top: 22px;
  margin-right: 22px;

}
.staffIntroduction .introductionMain .details {
  float: left;
  width: 29.46153846rem;
}
.staffIntroduction .introductionMain .photo {
  float: right;
  width: 29rem;
}
body#home.staff #main .shopStaff .shopName {
  float: left;
}
body#home.staff #main .shopStaff .staffFaces {
  float: right;
  width: 44.61538462rem;
}
.staffFaces .image a.hover .face, 
.staffFaces .image a:hover .face {
  visibility: hidden;
}

@media screen and (max-width: 640px) {
/* max-width: 768pxから更にスマートフォン用へ
最適化する箇所のスタイル記述 */

#staff {
	background-image:url(../img/staff/bk_staff_smp.png);
	background-repeat:repeat;
	background-position:center top;
	height: auto;
	width: 100%;
	margin-bottom: 20px;
	background-color:#FFFFFF;
}
/*リスト4*/
.staff_list {
	background-image: url(../img/staff/bk_staff360_2.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	padding-top: 50%;
	padding-left: 5%;
}
.staff_list ul {
}
.staff_list ul li {
	width: 96%;
}
.staff_list ul li a {
	color: #444444;
	text-decoration: none;
	display: block;
	padding-bottom:10px;
}
.staff_list ul li a .btn img {
	width:100%;
	height:auto;
	transition: transform 1s ease;
	-webkit-transition: transform 1s ease;
}
.staff_list ul li a .btn img:hover {
	transform: translate(0px, -12px);
	-webkit-transform: translate(0px, -12px);
}
/* .staffFaces */
.staffFaces .image {
  float: left;
}
.staffFaces .image a {
  outline: 0;
  display: block;
  cursor: pointer;
  text-align: center;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: transparent;
}
.staffFaces .image a.hover .face, .staffFaces .image a:hover .face {
  background-color: transparent;
}
.staffFaces .image a .face {
  display: block;
  margin-bottom: 0.6153846154rem;
}

.staffIntroductions {
	position:relative;
  display: none;
}
.staffIntroduction {
	
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
}
.mfp-close { /* for modal window's plugin */
  background: #644c2b !important;
  border: #fff solid 4px !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-weight: bold;
  line-height: 38px !important;
  right: -44px;
  top: -44px;
}

.staffIntroduction .title {
	font-style:italic;
	color:#FFFFFF;
  line-height: 1;
  background: #644c2b;
  padding: 0.5384615385rem 0.6923076923rem;
}
.staffIntroduction .introductionMain {
  background: #fff;
  padding: 5px;
}
.staffIntroduction .introductionMain .details .image {
  margin-bottom: 2.153846154rem;
}
.staffIntroduction .introductionMain .details .qa {
  width: 100%;
  border-top: 0.07692307692rem dotted #000;
}
.staffIntroduction .introductionMain .details .qa th, .staffIntroduction .introductionMain .details .qa td {
  width: 50%;
  vertical-align: top;
  padding: 0.3846153846rem 0;
  border-bottom: 0.07692307692rem dotted #000;
}
.staffIntroduction .introductionMain .details .qa th {
  color: #644c2b;
  font-weight: bold;
}


.mfp-content { /* for modal window's plugin */
  width: auto !important;
}
.staffIntroduction {
  width: 100%;
  margin-top: 22px;
  margin-right: 22px;

}
.staffIntroduction .introductionMain .details {
  float: left;
  width: 29.46153846rem;
}
.staffIntroduction .introductionMain .photo {
  float: right;
  width: 29rem;
}
body#home.staff #main .shopStaff .shopName {
  float: left;
}
body#home.staff #main .shopStaff .staffFaces {
  float: right;
  width: 44.61538462rem;
}
.staffFaces .image a.hover .face, 
.staffFaces .image a:hover .face {
  visibility: hidden;
}
.introductionMain img {
	width: 100%;
	height: auto;
}

}