﻿/* ------------------------------------------------------ Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
/* ------------------------------------------------------ Icon Fonts */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?pqtn50');
  src:  url('../fonts/icomoon.eot?pqtn50#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?pqtn50') format('truetype'),
    url('../fonts/icomoon.woff?pqtn50') format('woff'),
    url('../fonts/icomoon.svg?pqtn50#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-c-facebook:before {
  content: "\e900";
}
.icon-c-twitter:before {
  content: "\e901";
}
.icon-c-line:before {
  content: "\e902";
}
.icon-c-insta:before {
  content: "\e903";
}
.icon-pagetop:before {
  content: "\e904";
}
.icon-icon-tel:before {
  content: "\e906";
}
.icon-circle-down:before {
  content: "\ea43";
}

@font-face {
  font-family: YuGothicM;
  src: local("Yu Gothic Medium");
}


/* ------------------------------------------------------ General */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
html {
	font-size: 10px;
	letter-spacing: .15px;
	color: #000;
}
body {
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}
a:link {
	color: #000;
	text-decoration: none;
	display: block;
	-webkit-transition: all .5s;
			transition: all .5s;
}
a:visited {
	color: #000;
}
a:hover {
	cursor: pointer;
	opacity: .6;
	-webkit-transition: all .5s;
			transition: all .5s;
}
a:active {
	color: #000;
}
img {
	width: 100%;
	height: auto;
	display: block;
}
p, li, td {
	font-size: 13px;
	line-height: 150%;
}
h1,h2,h3,h4 {
	line-height: 135%;
}
article {
	padding: 0 0 3rem;
}



/* ------------------------------------------------------ Common */
.clear {
	overflow: hidden;
}
.container {
	padding: 0 25px;
	margin: 0 auto;
	max-width: 1100px;
}
.row {
	padding: 0 0 8rem;
}

#top-sec-2,
#shop-sec-1,
#menu-sec-1,
#staff-sec-1 {
	position: relative;
}
.sec-title {
	position: absolute;
	font-weight: 400;
	font-family: 'Kaushan Script', cursive;
	letter-spacing: 3px;
	top: 0;
	right: 0;
	font-size: 8rem;
	color: rgba(136,183,213,.2);
	z-index: -10;
}
.menu-area,
.staff-area,
.news-area {
	padding: 12.5rem 0 0;
}
.shop-policy {
	padding: 12.5rem 0 5rem;
}

.text-ex-small {
	font-size: 10px;
}
.text-small {
	font-size: 12px;
}
.text-middle {
	font-size: 16px;
}
.text-large {
	font-size: 21px;
}
.text-ex-large {
	font-size: 27px;
}
.bold {
	font-weight: 700;
}
.point-color {
	color: #88b7d5;
}



/* ------------------------------------------------------ Header */
.header-inner {
	position: relative;
}
#header-logo {
	position: absolute;
	left: 30px;
	bottom: -80px;
	z-index: 50;
}
#header-logo img {
	width: 65px;
}
.sns-box {
	text-align: center;
	margin: 0 0 2rem;
}
.sns-box a {
	display: inline-block;
	padding: .45rem;
}

/* menu-box */
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .5s;
	box-sizing: border-box;
}
.menu-trigger {
	position: fixed;
	width: 68px;
	height: 68px;
	z-index: 150;
	top: 0;
	right: 0;
	transition: all .5s;
}
.menu-trigger span {
	position: absolute;
	top: 0;
	left: 20px;
	width: 28px;
	height: 2px;
	background-color: #000;
	border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
	top: 20px;
}
.menu-trigger span:nth-of-type(2) {
	top: 29px;
}
.menu-trigger span:nth-of-type(3) {
	top: 38px;
}
.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(9px) rotate(-45deg);
			transform: translateY(9px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-9px) rotate(45deg);
			transform: translateY(-9px) rotate(45deg);
}
.menu-trigger p {
	position: absolute;
	bottom: 8px;
	left: 50%;
	-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
	font-size: 10px;
}

.side-menu {
	position: fixed;
	top: 0;
	right: -250px;
	width: 250px;
	height: 100%;
	background: #88b7d5;
	z-index: 100;
	padding: 5px;
	transition: all .5s;
}
.side-menu .side-menu-inner {
	height: 100%;
	padding: 5rem 2rem 0;
}
.side-menu .side-menu-inner #menu-box {
	margin: 0 0 2rem;
}
.side-menu .side-menu-inner #menu-box ul li {
	text-align: center;
}
.side-menu .side-menu-inner #menu-box ul li a {
	color: #fff;
	padding: 1rem 0;
	line-height: 125%;
}
.side-menu .side-menu-inner #menu-box ul li a span {
	display: block;
}
.sns-box {
	text-align: center;
	margin: 0 0 2rem;
}
.sns-box a {
	display: inline-block;
	padding: 5px;
	color: #fff;
}
.side-menu .side-menu-inner .menu-info {
	color: #fff;
	text-align: center;	
}

.menu-trigger.open {
	right: 250px;
	color: #88b7d5;
	background: #fff;
}
.menu-trigger.open span {
	background: #88b7d5;
}
.side-menu.open {
	right: 0;
}
.side-menu .side-menu-inner .menu-info a {
	display: inline-block;
}

/* Slider */
#slider-area {
	padding: 20px 20px 0;
	overflow: hidden;
}
#slider-area .main-slider .slider {
	height: 500px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
#slider-area ul li {
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
			border-radius: 20px;
}
.slick-dots li.slick-active button:before {
    color: #88b7d5;
    opacity: 0.75;
}

#sub-page-photo {
	padding: 20px 20px 0;
}
#sub-page-photo img {
	-webkit-border-radius: 20px;
       -moz-border-radius: 20px;
			border-radius: 20px;
}


/* ------------------------------------------------------ Footer */
.foot-bg {
	background: #f5f5f5;
}
.foot-nav-area {
	padding: 2rem 0;
	border-top: solid #bbb 1px;
}
.foot-nav-area #foot-nav {
	max-width: 1100px;
	margin: 0 auto;
}
.foot-nav-area #foot-nav li {
	width: 33.3333%;
	float: left;
	position: relative;
}
.foot-nav-area #foot-nav li::after {
	position: absolute;
	content: '';
	top: 50%;
	right: -7.5px;
	width: 15px;
	height: 1px;
	background: #bbb;
	-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
}
.foot-nav-area #foot-nav li:nth-child(3n)::after {
	display: none;
}
.foot-nav-area #foot-nav li a {
	line-height: 200%;
	text-align: center;
	color: #bbb;
}
.foot-inner {
	padding: 5rem 0;
}
.foot-logo img {
	width: 100px;
	margin: 0 auto 3rem;
}
.foot-add {
	margin-bottom: 3rem;
	text-align: center;
}
.foot-add .foot-salon-name {
	font-weight: 700;
	margin-bottom: 1rem;
}
.foot-bg .sns-box {
	margin: 0;
}
.foot-bg .sns-box a {
	color: #000;
}
.copyright {
	padding: 0 0 2rem;
}
.copy {
	text-align: center;
}
/* page-top */
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 77%;
}
#page-top a {
	text-decoration: none;
	color: #000;
	width: 80px;
	text-align: center;
	display: block;
	border-radius: 5px;
	padding-top: 20px;
	padding-right: 0;
	padding-bottom: 20px;
	padding-left: 0;
}
#page-top a:hover {
	text-decoration: none;
	background: rgba(136,183,213,.25);
}
#conts {
	margin-right: auto;
	margin-left: auto;
}
#conts #tb {
	width: 80px;
	position: absolute;
}


/* ------------------------------------------------------ Top Page */
#top-sec-2 .news-area .news-area-inner {
	padding: 0 0 2rem;
	margin: 0 0 3rem;
	border-bottom: dotted #000 1px;
}
#top-sec-2 .news-area .news-area-inner:last-child {
	margin: 0;
}
#top-sec-2 .news-area .news-area-inner .news-title {
	margin: 0 0 1rem;
	font-weight: 700;
	line-height: 125%;
}
#top-sec-2 .news-area .news-area-inner .news-text {
	margin: 0 0 1rem;
}
#top-sec-2 .news-area .news-area-inner .news-text-min {
	font-size: 12px;
	color: #808080;
}
#shop-sec-1 .shop-info .inner .shop-open li,
#shop-sec-1 .shop-info .inner .shop-close li {
	float: left;
}
#shop-sec-1 .shop-info .inner .shop-open li:first-child,
#shop-sec-1 .shop-info .inner .shop-close li:first-child {
	width: 75px;
}


/* ------------------------------------------------------ Shop Page */
#shop-sec-1 .shop-gallery {
	margin: 0 0 3rem;
}
#shop-sec-1 .shop-gallery ul li {
	margin: 0 0 1rem;
}
#shop-sec-1 .shop-gallery ul li:last-child {
	margin: 0;
}
#shop-sec-1 .shop-gallery ul li img {
	margin: 0 auto;
}
#shop-sec-1 .shop-info .inner {
	margin: 0 0 3rem;
}
#shop-sec-1 .shop-info .inner .shop-img {
	margin: 0 0 3rem;
	max-width: 350px;
}
#shop-sec-1 .shop-info .inner .shop-name {
	font-weight: 400;
	margin: 0 0 1.5rem;
	line-height: 125%;
	letter-spacing: 1px;
}
#shop-sec-1 .shop-info .inner .shop-tel span a {
	display: inline-block;
}
#shop-sec-1 .shop-info .inner .shop-tel,
#shop-sec-1 .shop-info .inner .shop-add,
#shop-sec-1 .shop-info .inner .shop-open,
#shop-sec-1 .shop-info .inner .shop-close {
	margin: 0 0 .5rem;
}
#shop-sec-1 .shop-info .inner .cal-text-area {
	margin: 0 0 1rem;
}
#shop-sec-1 .shop-info .inner .cal-wrap {
	max-width: 275px;
}
#shop-sec-1 .shop-info .inner .cal-text-area .cal-title {
	margin: 0 0 1rem;
	padding: 1rem 0;
	text-align: center;
	color: #fff;
	background: #88b7d5;
}
#shop-sec-1 .shop-info .inner .cal-text-area .cal-text {
	color: red;
}
#shop-sec-1 .shop-policy .inner  {
	margin: 0 0 2rem;
	padding: 0 0 2rem;
	border-bottom: dotted #000 1px;
}
#shop-sec-1 .shop-policy .inner:last-child  {
	margin: 0;
}
#shop-sec-1 .shop-policy .inner .policy-title  {
	color: #88b7d5;
	margin: 0 0 1rem;
}
.ano-text {
	line-height: 150%;
}



/* ------------------------------------------------------ Menu Page */
#menu-sec-1 .menu-title {
	margin-bottom: 2rem;
	font-weight: 400;
	line-height: 90%;
	letter-spacing: 2px;
}
#menu-sec-1 .menu-block {
	margin-bottom: 3rem;
}
#menu-sec-1 .menu-block ul {
	border: solid #dcdcdc 2px;
	margin-bottom: .5rem;
}
#menu-sec-1 .menu-block ul li {
	border-bottom: solid #dcdcdc 1px;
	padding: .75rem;
}
#menu-sec-1 .menu-block ul li:last-child {
	border-bottom: none;
}
#menu-sec-1 .menu-block ul li.menu {
	background-color: #f5f5f5;
}
#menu-sec-1 .menu-block ul li.price {
	text-align: right;
}
.sub-text {
	line-height: 150%;
}



/* ------------------------------------------------------ Staff Page */
#staff-sec-1 .staff-block {
	margin: 0 0 3rem;
	padding: 0 0 3rem;
	border-bottom: dotted #000 1px;
}
#staff-sec-1 .staff-block:last-child {
	margin: 0;
}
#staff-sec-1 .staff-block .staff-img img {
	width: 75%;
	margin: 0 auto;
}
#staff-sec-1 .staff-block .staff-text {
	margin: 0 0 2rem;
}
#staff-sec-1 .staff-block .staff-text .name span {
	padding: 0 0 0 1rem;
}
#staff-sec-1 .staff-block .staff-text .lank {
	margin: 0 0 1rem;
}






