@charset "utf-8";
/* ---------------------------------------------------------------------------------
Copyright 2014.HAIR CATALOG.JP ALL RIGHTS RESERVED.

HTML CSS Selectors パーマをかけよう

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

/*---------------------------------------------------------------------------------
共通
--------------------------------------------------------------------------------- */
#special-header-wrapper {
	padding-bottom: 0;
  position: relative;
      background: #fbe2e2;
  z-index: 10;
}
#footer-wrapper {
  position: relative;
  z-index: 10;
}
#contents-wrapper {
	width: 100%;
  min-width: 1400px;
	position: relative;
  z-index: 1;
}
#special-column {
	float: none;
	width: 100%;
  position: relative;
  z-index: 10;
}

	#viewport {
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-o-perspective: 1000;
		position: fixed;
		left: 0;
		top: 0px;
		right: 0;
		bottom: 0;
		overflow: hidden;
    z-index: 1;
		background-image: linear-gradient(bottom, rgb(69,132,180) 38%, rgb(31,71,120) 54%);
		background-image: -o-linear-gradient(bottom, rgb(69,132,180) 38%, rgb(31,71,120) 54%);
		background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 23%, rgb(31,71,120) 54%);
		background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 38%, rgb(31,71,120) 54%);
		background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 38%, rgb(31,71,120) 54%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.28, rgb(69,132,180)),
			color-stop(0.64, rgb(31,71,120))
		);
	}

	#world {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -256px;
		margin-top: -256px;
		height: 512px;
		width: 512px;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
	}

	#world div {
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
	}

	.cloudBase {
		position: absolute;
		left: 256px;
		top: 256px;
		width: 20px;
		height: 20px;
		margin-left: -10px;
		margin-top: -10px;
	}

	.cloudLayer {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 256px;
		height: 256px;
		margin-left: -128px;
		margin-top: -128px;
		-webkit-transition: opacity .5s ease-out;
		-moz-transition: opacity .5s ease-out;
		-o-transition: opacity .5s ease-out;
	}

/*---------------------------------------------------------------------------------
一覧
--------------------------------------------------------------------------------- */
.contents-ttl {
  width: 240px;
  padding-top: 23px;
  margin: 0 auto 20px;
}
.contents-ttl span {
  display: block;
  font-size: 13px;
  text-align: center;
  line-height: 1;
  color: #fff;
}
.list-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  height: 76px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  margin-bottom: 50px;
}
.list-nav a {
  display: block;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  padding: 0px 17px;
  position: relative;
  margin: 0 50px;
  z-index: auto;
}
.list-nav a.current::before {
  display: block;
  width: 100%;
  height: 10px;
  background-color: #FFD9DA;
  position: absolute;
  top: 5px;
  left: 0;
  content:"";
  z-index: -1;
}
.perm-list {
  display: flex;
  flex-wrap: wrap;
  width: 1300px;
  margin: 0 auto;
}
.perm-list li {
  width: 240px;
  padding: 0px 10px 30px;
  color: #fff;
}
.perm-list li.new a::before {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: url("../special/perm/ttl_new_style.svg") no-repeat center center;
  position: absolute;
  top: 7px;
  right: 9px;
  content:"";
}
.perm-list a {
  display: block;
  position: relative;
}
.perm-list a:hover {
  opacity: 0.5;
}
.perm-list li span {
  color: #fff;
}
.perm-list__style-name {
  display: block;
  width: 100%;
  padding: 10px 0px 5px;
  font-size: 14px;
  line-height: 1;
}
.perm-list__name {
  display: block;
  padding: 14px 5px 0px 60px;
  font-size: 14px;
  line-height: 1;
}
.perm-list__salon {
  display: block;
  padding-bottom: 5px;
  padding-left: 60px;
  font-size: 11px;
}
.perm-list-stylist__img {
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.perm-list-stylist__img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

/*---------------------------------------------------------------------------------
詳細
--------------------------------------------------------------------------------- */
.breadcrumb {
  padding: 10px 0px 10px;
  border-bottom: 1px solid #fff;
  margin-bottom: 70px;
}
.breadcrumb .inner {
  width: 1300px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1;
  color: #fff;
}
.breadcrumb .inner a {
  color: #fff;
}
.detail-wrap {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  width: 1140px;
  margin: 0 auto 80px;
}
.detail-block {
  box-sizing: border-box;
  width: 631px;
  padding: 20px 47px 40px 30px;
  background-color: #fff;
  position: relative;
}
.detail-style-name {
  font-size: 20px;
  padding-bottom: 10px;
}
.detail-stylist {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  height: 80px;
  padding-left: 95px;
  margin-bottom: 10px;
  position: relative;
}
.detail-stylist__name {
  display: block;
  width: 100%;
  font-size: 20px;
  line-height: 1;
  padding-bottom: 10px;
}
.detail-stylist__salon {
  width: 100%;
  font-size: 14px;
  line-height: 1;
}
.detail-stylist__img {
  display: block;
  width: 80px;
  height: 80px;
  border: 1px solid #DCDCDC;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.detail-stylist__img img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  font-family: 'object-fit: cover;';
  vertical-align: top;
}
.detail-comment {
  font-size: 14px;
  line-height: 1.7;
  padding-bottom: 10px;
}
.btn-reserve {
  width: 300px;
  margin-bottom: 30px;
}
.btn-reserve a {
  box-sizing: border-box;
  display: block;
  width: 300px;
  height: 50px;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tag-list a {
  box-sizing: border-box;
  display: block;
  padding: 10px 15px;
  border: 1px solid #DCDCDC;
  margin: 0px 10px 10px 0;
  font-size: 12px;
  line-height: 1;
  color: #ccc;
}

.salon {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
.salon-logo {
  width: 120px;
  margin-right: 10px;
}
.salon-logo img {
  width: 120px;
}
.salon-data {
  width: 400px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.025em;
}

#special-column .share-box {
	width: 30px;
	position: absolute;
	height: 30px;
	top: 12px;
  right: 16px;
	left: auto;
}
#special-column .share-box a {
	top: 8px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

#special-column .share-box .icon-sns {
	background-color: #fff;
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
#special-column .share-box .icon-sns .icon {
	color: #fff;
}

#special-column .share-box.active .btn-gp {
	-webkit-transform: translate(100px, 0px) scale(1);
	    -ms-transform: translate(100px, 0px) scale(1);
	        transform: translate(100px, 0px) scale(1);
}
#special-column .share-box.active .btn-tw {
	-webkit-transform: translate(-67px, 0px) scale(1);
	    -ms-transform: translate(-67px, 0px) scale(1);
	        transform: translate(-67px, 0px) scale(1);
}
#special-column .share-box.active .btn-fb {
	-webkit-transform: translate(-36px, 0px) scale(1);
	    -ms-transform: translate(-36px, 0px) scale(1);
	        transform: translate(-36px, 0px) scale(1);
}


.detail-photo-tumb {
  width: 93px;
}
.detail-photo-tumb a {
  display: block;
  margin-bottom: 10px;
  opacity: 0.5;
}
.detail-photo-tumb a.selected {
  opacity: 1;
}
.detail-photo-tumb a:last-child {
  margin-bottom: 0;
}
.detail-photo {
  width: 393px;
}

.other-style {
  margin-bottom: 80px;
  border-top: 1px solid #fff;
}
.other-style h3 {
  padding: 40px 0px 50px;
  text-align: center;
  font-size: 20px;
  line-height: 1;
  color: #fff;
}
.other-style h3 span {
  display: block;
  padding-top: 15px;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}
.other-style-list {
  display: flex;
  flex-wrap: wrap;
  width: 1300px;
  margin: 0 auto;
}
.other-style-list li {
  width: 305px;
  padding: 0px 10px 20px;
}
.other-style-list li img {
  width: 305px;
}
.other-style-list li a:hover {
  opacity: 0.5;
}

.anc-list {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  padding: 30px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.anc-list a {
  display: block;
  font-size: 16px;
  line-height: 1;
  color: #fff;
}
.anc-list a:hover {
  opacity: 0.5;
}