@charset "utf-8";
/* ---------------------------------------------------------------------------------
copyright EXCEL All rights reserved.

HTML CSS Selectors top

$Revision: 1.0 $
--------------------------------------------------------------------------------- */
html,body,#wrap {
	height: 100%;
}
#header-wrapper {
	height: 100%;
	padding-bottom: 0;
}
#header-wrapper header {
	top: auto;
	bottom: 0;
}
#contents-wrapper h2 {
	padding-bottom: 70px;
}
#contents-wrapper .anc {
	clear: both;
	width: 140px;
	margin: 0 auto;
}
#contents-wrapper .anc a {
	display: block;
	border: 1px solid #000;
	font-family: 'Libre Baskerville', serif;
	font-size: 14px;
	line-height: 1;
	text-align: center;
	padding: 10px;
}

/*---------------------------------------------------------------------------------
mv
--------------------------------------------------------------------------------- */
#header-wrapper #mv,
#header-wrapper #mv div{
	width: 100%;
	height: 100%;
}
#header-wrapper #mv .fade {
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}
#header-wrapper #mv .fade a {
  display: block;
	width: 100%;
	height: 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#header-wrapper #mv .fade a:empty {
  display: none;
}

/*---------------------------------------------------------------------------------
Catchphrase 
--------------------------------------------------------------------------------- */
.catchphrase {
  padding: 30px;
  font-size: 40px;
  line-height: 1;
  text-align: center;
}

/*---------------------------------------------------------------------------------
Smile
--------------------------------------------------------------------------------- */
#smile-wrap {
	padding: 100px 0;
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
#smile-wrap ul {
	width: 776px;
	margin: 0 auto;
}
#smile-wrap li {
	width: 180px;
	padding: 0px 7px;
	float: left;
}
#smile-wrap li a {
	display: block;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#smile-wrap li a:hover {
	opacity: 1;
}

#smile-wrap li a:before {
	display: block;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background-color: rgba(0,0,0,0.7);
	background-image: url(../img/top/smile_line.png);
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top: 0;
	left: 0;
	content:"";
	opacity: 0;
}
#smile-wrap li a:after {
	font-family: 'Libre Baskerville', serif;
	display: block;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	font-weight: bold;
	height: 20px;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	content:"View";
	opacity: 0;
}
#smile-wrap li a:hover:before,
#smile-wrap li a:hover:after {
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	opacity: 1;
}

#smile-wrap .slick-prev,
#smile-wrap .slick-next {
	width: 42px;
	height: 84px;
	background-image: url(../img/salon/btn_slider.png);
	background-position: top left;
}
#smile-wrap .slick-prev {
	left: -65px;
}
#smile-wrap .slick-next {
	right: -65px;
	background-position: top right;
}


/*---------------------------------------------------------------------------------
Style
--------------------------------------------------------------------------------- */
#style-wrap {
	padding: 100px 0;
	position: relative;
}
#category-nav {
	width: 860px;
	margin: 0 auto 40px;
}
#category-nav ul {
	text-align: center;
	letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
}
#category-nav li {
	display: inline-block;
    letter-spacing: normal; /* 文字間を通常に戻す */
	margin: 0 13px;
}
#category-nav li a {
	display: block;
	padding: 0 30px 5px;
	font-family: 'Libre Baskerville', serif;
	font-size: 13px;
	font-weight: 600;
	color: #C3C3C3;
}
#category-nav li a:hover {
	opacity: 1;
	color: #000;
}
#category-nav li.current a {
	color: #000;
}
#category-nav .line {
	display: inline-block;
	height: 1px;
	position: relative;
	border-top: 1px solid #000;
	margin-left: 13px;
	top: -15px;
}

#style-list {
	width: 1200px;
	margin: 0 auto;
	padding-bottom: 40px;
}
#style-list ul {
	overflow:hidden;
}
#style-list li {
	width: 400px;
	float: left;
	overflow:hidden;
}
#style-list li a {
	display: block;
	width: 400px;
	height: 400px;
	transition: 0.5s;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#style-list li a:hover {
	opacity:1;
}

#style-list li div {
	width: 400px;
	height: 400px;
}
#style-list li div .txt {
	font-family: 'Libre Baskerville', serif;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	font-weight: bold;
	height: 20px;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#style-list .borders-lt:before {
	top: 340px;
	left:30px;
}
#style-list li a:hover .borders-lt:before {
	top: 30px;
	height: 340px;
}
.borders-lt:after {
	top: 30px;
	left: 30px;
}
#style-list li a:hover .borders-lt:after {
	width: 340px;
}
#style-list .borders-rb:before  {
	top: 30px;
	right: 30px;
}
#style-list li a:hover .borders-rb:before {
	height: 340px;
}
#style-list .borders-rb:after  {
	height: 340px;
	top: 30px;
	right: 30px;
}
#style-list li a:hover .borders-rb:after {
	width: 340px;
}

/*---------------------------------------------------------------------------------
Movie
--------------------------------------------------------------------------------- */
#movie-wrap {
	padding: 100px 0;
	position: relative;
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
#movie-wrap h2 {
	padding-bottom: 75px;
}
#movie-wrap ul {
	width: 900px;
	margin: 0 auto;
	padding-bottom: 30px;
	overflow:hidden;
}
#movie-wrap li {
	width: 430px;
	float: left;
	padding-bottom: 22px;
}
#movie-wrap li:nth-of-type(2n) {
	float: right;
}
#movie-wrap li iframe {
	width: 430px;
	height: 242px;
}

/*---------------------------------------------------------------------------------
Topics
--------------------------------------------------------------------------------- */
#topics-wrap {
	padding: 100px 0;
	position: relative;
}
#topics-wrap .grid {
	width: 940px;
	margin: 0 auto;
}
#topics-wrap .item {
	width: 310px;
}
#topics-wrap .item a {
	display: block;
	padding: 0px 15px 40px;
}
#topics-wrap .item a:hover {
	opacity: 0.5 !important;
}
#topics-wrap .item img {}
#topics-wrap .item .category {
	display: block;
	font-family: 'Covered By Your Grace', cursive;
	font-size: 49px;
	line-height: 1;
	position: relative;
	top: -15px;
	left: -2px;
}
#topics-wrap .item .ttl {
	font-size: 13px;
	line-height: 1.5;
}

/*---------------------------------------------------------------------------------
Blog
--------------------------------------------------------------------------------- */
#blog-wrap {
	padding: 100px 0;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
#blog-wrap dl {
	width: 1000px;
	margin: 0 auto;
}
#blog-wrap dt {
	font-size: 16px;
	text-align: center;
	padding-bottom: 25px;
}
#blog-wrap dd {
	font-size: 13px;
	line-height: 2.3;
	text-align: center;
	padding-bottom: 65px;
	position: relative;
	margin-bottom: 50px;
}
#blog-wrap dd:after {
	display: block;
	width: 460px;
	height: 3px;
	background-color: #000;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	content:"";
}
#blog-wrap dd:last-child {
	padding-bottom: 45px;
	margin-bottom: 0;
}
#blog-wrap dd:last-child:after {
	display: none;
}

/*---------------------------------------------------------------------------------
Ranking
--------------------------------------------------------------------------------- */
#ranking-wrap {
	padding: 100px 0;
	position: relative;
}
#ranking-wrap .ranking {
	width: 930px;
	margin: 0 auto;
	padding-bottom: 55px;
}
#ranking-wrap .ranking h3 {
	font-size: 20px;
	line-height: 1;
	text-align: center;
	font-weight: 400;
	padding-bottom: 25px;
}
#ranking-wrap .ranking ul {
	overflow:hidden;
}
#ranking-wrap .ranking li {
	width: 280px;
	padding: 0px 15px;
	float: left;
}
#ranking-wrap .ranking li h4 {
	font-family: 'Libre Baskerville', serif;
	font-size: 50px;
	line-height: 1;
	font-weight: 600;
	text-align: center;
	padding-bottom: 15px;
}
#ranking-wrap .ranking li h4 span {
	display: inline-block;
	font-size: 32px;
	padding-left: 8px;
}
#ranking-wrap .ranking li a {
	display: block;
	width: 280px;
	height: 280px;
	transition: 0.5s;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#ranking-wrap .ranking li a:hover {
	opacity:1;
}

#ranking-wrap .ranking li div {
	width: 280px;
	height: 280px;
    display: none;
}
#ranking-wrap .ranking li div .txt {
	font-family: 'Libre Baskerville', serif;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	font-weight: bold;
	height: 20px;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#ranking-wrap .borders-lt:before {
	top: 220px;
	left:30px;
}
#ranking-wrap .ranking li a:hover .borders-lt:before {
	top: 30px;
	height: 220px;
}
#ranking-wrap .borders-lt:after {
	top: 30px;
	left: 30px;
}
#ranking-wrap .ranking li a:hover .borders-lt:after {
	width: 220px;
}
#ranking-wrap .borders-rb:before {
	top: 30px;
	right: 30px;
}
#ranking-wrap .ranking li a:hover .borders-rb:before {
	height: 220px;
}
#ranking-wrap .borders-rb:after {
	height: 220px;
	top: 30px;
	right: 30px;
}
#ranking-wrap .ranking li a:hover .borders-rb:after {
	width: 220px;
}


/*---------------------------------------------------------------------------------
Salon list
--------------------------------------------------------------------------------- */
#salon-wrap {
	padding: 100px 0 0;
	position: relative;
}
#salon-wrap .inner {
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 100px;
	overflow:hidden;
}
#salon-wrap .inner .area {
	width: 200px;
	float: left;
}
#salon-wrap .inner ul {
	width: 156px;
	padding: 0px 20px;
	border-left: 4px solid #000;
}
#salon-wrap .inner ul li {
	height: auto;
}
#salon-wrap .inner ul li a {
	display: block;
	position: relative;
}
#salon-wrap .inner ul li .name {
	display: inline-block;
	padding-top: 10px;
	font-size: 13px;
	line-height: 1.3;
	text-decoration: underline;
}

#salon-slider {
	width: 798px;
	margin: 0 auto;
}
#salon-slider  li {
	width: 117px;
	padding: 0 8px;
}
#salon-slider  .slick-prev,
#salon-slider  .slick-next {
	width: 26px;
	height: 54px;
	background-image: url(../img/salon/btn_slider.png);
	background-position: top left;
	background-size: 52px auto;
}
#salon-slider  .slick-prev {
	left: -60px;
}
#salon-slider  .slick-next {
	right: -60px;
	background-position: top right;
}
/*---------------------------------------------------------------------------------
Voice
--------------------------------------------------------------------------------- */
#voice-wrap {
	padding: 100px 0;
	position: relative;
}
#voice-wrap h2 {
	padding-bottom: 75px;
}
#voice-wrap #voice_slider {
	width: 768px;
	margin: 0 auto 47px;
}
#voice-wrap #voice_slider li {
	width: 172px;
	padding: 0px 10px;
	float: left;
}
#voice-wrap .slick-prev,
#voice-wrap .slick-next {
	width: 42px;
	height: 84px;
	background-image: url(../img/salon/btn_slider.png);
	background-position: top left;
}
#voice-wrap .slick-prev {
	left: -65px;
}
#voice-wrap .slick-next {
	right: -65px;
	background-position: top right;
}

#voice-wrap .inner {
	width: 768px;
	margin: 0 auto;
}
#voice-wrap h3 {
	float: left;
	font-family: 'Libre Baskerville', serif;
	font-size: 28px;
	line-height: 1;
	font-weight: bold;
}
#voice-wrap .new-box {
	width: 613px;
	float: right;
	padding-right: 10px;
}
#voice-wrap .new-box li {
	font-size: 12px;
	line-height: 1;
	padding-bottom: 13px;
}
#voice-wrap .new-box li a {
	display: block;
}
#voice-wrap .new-box li:last-child {
	padding-top: 13px;
	border-top: 1px solid #C7C7C7;
}

/*---------------------------------------------------------------------------------
Recommend
--------------------------------------------------------------------------------- */
#recommend-wrap {
	padding: 100px 0 0;
	position: relative;
}
#recommend-wrap ul {
	width: 1200px;
	margin: 0 auto;
	overflow:hidden;
}
#recommend-wrap li {
	width: 300px;
	height: 300px;
	float: left;
}
#recommend-wrap li a {
	display: block;
	width: 300px;
	height: 300px;
	transition: 0.5s;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#recommend-wrap li a:hover {
	opacity:1;
}
#recommend-wrap li div {
	width: 300px;
	height: 300px;
}
#recommend-wrap li div .txt {
	font-family: 'Libre Baskerville', serif;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	font-weight: bold;
	height: 20px;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#recommend-wrap .borders-lt:before {
	top: 240px;
	left:30px;
}
#recommend-wrap li a:hover .borders-lt:before {
	top: 30px;
	height: 240px;
}
#recommend-wrap .borders-lt:after {
	top: 30px;
	left: 30px;
}
#recommend-wrap li a:hover .borders-lt:after {
	width: 240px;
}
#recommend-wrap .borders-rb:before {
	top: 30px;
	right: 30px;
}
#recommend-wrap li a:hover .borders-rb:before {
	height: 240px;
}
#recommend-wrap .borders-rb:after {
	height: 240px;
	top: 30px;
	right: 30px;
}
#recommend-wrap li a:hover .borders-rb:after {
	width: 240px;
}

/*---------------------------------------------------------------------------------
Instagram
--------------------------------------------------------------------------------- */
#instagram-wrap {
	padding: 100px 0;
	position: relative;
}
#instagram-wrap ul {
	width: 909px;
	margin: 0 auto 25px;
	overflow:hidden;
}
#instagram-wrap ul li {
	width: 293px;
	padding: 0px 5px 10px;
	float: left;
}
#instagram-wrap li a {
	display: block;
	width: 293px;
	height: 293px;
	transition: 0.5s;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#instagram-wrap li a:hover {
	opacity:1;
}

#instagram-wrap li div {
	width: 293px;
	height: 293px;
}
#instagram-wrap li div .txt {
	font-family: 'Libre Baskerville', serif;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	font-weight: bold;
	height: 20px;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#instagram-wrap .borders-lt:before {
	top: 233px;
	left:30px;
}
#instagram-wrap li a:hover .borders-lt:before {
	top: 30px;
	height: 233px;
}
#instagram-wrap .borders-lt:after {
	top: 30px;
	left: 30px;
}
#instagram-wrap li a:hover .borders-lt:after {
	width: 233px;
}
#instagram-wrap .borders-rb:before {
	top: 30px;
	right: 30px;
}
#instagram-wrap li a:hover .borders-rb:before {
	height: 233px;
}
#instagram-wrap .borders-rb:after {
	height: 233px;
	top: 30px;
	right: 30px;
}
#instagram-wrap li a:hover .borders-rb:after {
	width: 233px;
}

/*---------------------------------------------------------------------------------
Products
--------------------------------------------------------------------------------- */
#products-wrap {
	padding-top: 100px;
	position: relative;
}
#products-wrap .read {
	padding-bottom: 40px;
	text-align: center;
}
#products-wrap .read span {
	display: inline-block;
	position: relative;
	top: -15px;
	left: -30px;
}
#products-wrap .wrap {
	padding-bottom: 40px;
}
#products-wrap .products {
	width: 100%;
	min-width: 1200px;
	background-color: #F0F1F3;
}

#products-wrap .products .inner {
	width: 900px;
	height: 480px;
	margin: 0 auto;
	overflow:hidden;
}
#products-wrap .detail {
	width: 450px;
	height: 480px;
	float: right;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	webkit-align-items: center; /* Safari */
 	align-items:         center;
}
#products-wrap .detail div {
	width: 450px;
}
#products-wrap .detail h3 {
	font-size: 22px;
	text-align: center;
}
#products-wrap .detail table {
	width: 100%;
}
#products-wrap .detail th {
	font-size: 20px;
	padding-right: 20px;
	text-align: right;
}
#products-wrap .detail td {
	text-align: right;
	font-size: 20px;
}
#products-wrap .detail td .yen {
	font-size: 20px;
}
#products-wrap .image {
	width: 420px;
	height: 480px;
	position: relative;
	float: left;
}
#products-wrap .image img {
	display: block;
	width: auto;
	background-repeat: no-repeat;
	background-position: center top;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
}
#products-wrap .products:nth-of-type(2n) {
	background-color: #fff;
}
#products-wrap .products:nth-of-type(2n)  .detail {
	float: left;
}
#products-wrap .products:nth-of-type(2n)  .image {
	float: right;
}

/*---------------------------------------------------------------------------------
3Dスライダー
--------------------------------------------------------------------------------- */
#slider-wrap {
	width: 1000px;
	margin: 0 auto 105px;
	position: relative;
}
#slider-wrap #sb-slider {
	width: 680px;
	height: 400px;
	display: block !important;
	overflow: visible !important;
}
#slider-wrap #sb-slider li {
	width: 680px;
	height: 400px;
}
.shadow {
	width: 100%;
	height: 168px;
	position: relative;
	margin-top: -110px;
	background: transparent url(../images/shadow.png) no-repeat bottom center;
	background-size: 100% 100%; /* stretches it */
	z-index: -1;
	display: none;
}

.nav-arrows {
	display: none;
}

.nav-arrows a {
	width: 42px;
	height: 84px;
	background-image: url(../img/salon/btn_slider.png);
	background-position: top left;
	position: absolute;
	top: 50%;
	left: 2px;
	text-indent: -9000px;
	cursor: pointer;
	margin-top: -42px;
	opacity: 0.9;
}

.nav-arrows a:first-child{
	left: auto;
	right: 2px;
	background-position: top right;
}

.nav-arrows a:hover {
	opacity: 1;
}


/*---------------------------------------------------------------------------------
ローダー
--------------------------------------------------------------------------------- 
#wrap {
	display: none;
}
#loader-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #fff;
	z-index: 201;
	background-image: url(../img/common/op_logo.svg);
	background-size: 150px auto;
	background-repeat: no-repeat;
	background-position: center center
}

.loader-bar {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #df0000;
	margin: auto;
	animation: show 0.9s both;
}
@keyframes show {
 0% {
     width: 0%;
}
 100% {
     width: 100%;
}
}
*/