@charset "UTF-8";

/* 基本色 */
:root {
	--main-color: #9D938D;
	--bg-color: #dcdad8;
	--dark-main-color: #4C4A4A;
	--text-bright-color: #fff;
	--large-width: 1000px;
}

body {
	margin: 0;
	font-family: 'メイリオ',
		'Hiragino Kaku Gothic Pro', 
		sans-serif;
	-webkit-text-size-adjust: 100%;
}

.hidden {
	overflow:hidden
	}



.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}

/* コンテンツA： ヒーローイメージ */
.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 450px;
	background-image: url(img/main_image001.jpg);
	background-position: center;
	background-size: cover;
	color: #fff;
	color: var(--text-bright-color);
	text-align: center;
	position: relative;
}

.conA h1 {
	margin-top: 0;
	margin-bottom: 10px;
	letter-spacing: 0.2em;
	margin-left: 0.2em;
}

.conA h1 img {
	height:50vh;
	}

.contents {
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#navTgl:checked ~ .contents {
	transform: translateX(250px);
}

/* :::::: toggle button :::::: */
#navTgl {
	display: none;
}
label {
	cursor: pointer;
	position: fixed;
	top: 0;
	left: 0;
}
.open {
	z-index: 200;
	width: 70px;
	height: 70px;
	background: #9d938d;
	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before,
.open::after {
	content: "";
}
.open span,
.open::before,
.open::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 30%;
	width: 40%;
	border-bottom: 2px solid white;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before {
	transform: translateY(-8px);
}
.open::after {
	transform: translateY(8px);
}
.close {
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: background .6s;
}
#navTgl:checked + .open {
	background: #9d938d;
	transform: translateX(250px);
}
#navTgl:checked + .open span {
	transform: scaleX(0);
}
#navTgl:checked + .open::before {
	transform: rotate(45deg);
}
#navTgl:checked + .open::after {
	transform: rotate(-45deg);
}
#navTgl:checked ~ .close {
	pointer-events: auto;
	background: rgba(0,0,0,.3);
}

/* :::::: drawer menu :::::: */
.menu {
	z-index: 1;
	position: fixed;
	overflow: auto;
	top: 0;
	left: 0;
	width: 250px;
	height: 100%;
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
	background-color:  rgba(76,74,74,0.8);
	transform: translateX(-100%);
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: 0.05em;
}
.menu h2,
.menu a {
	color: white;
	font-family: 'Roboto Condensed', sans-serif;
	letter-spacing: 0.1em;
}
.menu h2 {
	text-align: center;
}
.menu ul {
	margin: 0;
	padding: 0;
}
.menu li {
	font-size: .8em;
	line-height: 1.4;
}
.menu li:not(:first-child) {
	border-top: 1px solid rgba(255,255,255,.6);
}
.menu a {
	display: block;
	padding: 1em 1em;
	text-decoration: inherit;
	transition: background .6s;
}
.menu a:hover {
	background: #9d938d;
}
#navTgl:checked ~ .menu {
	transform: none;
}

/* :::::: header　:::::: */
header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	background-color: #9d938d;
	background-color:  rgba(157,147,141,0.8);
	text-align: center;
}


header .logo{
	margin: 0;
	padding-top: 20px;
}

/* ヘッダーを画面上部に固定 */
#head-fixed{
	position: fixed;
	top: 0;
	transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.head-animation {
	transform: translateY(-100%);
}


/* :::::: nav :::::: */
header nav {
	max-width: 1000px;
	margin: 0 auto;
}
header nav ul {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: .8em;
	text-align: center;
	white-space: nowrap;
}
header nav li {
	display: flex;
	flex-basis: 20%;
}

header nav li {
	border-top: 1px solid rgba(255,255,255,.6);
}

header nav li a {
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	color: var(--text-bright-color);
	text-decoration: inherit;
	background: inherit;
	transition: background .3s;
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: 0.05em;
}
	
	
header nav li a:hover {
	background: indianRed;
}

/* :::::: change mechanism :::::: */
@media screen and (min-width: 768px) {
	.open {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	header nav {
		display: none;
	}
}


/* コンテンツ共通 */

.conB,.conC,.conD ,.conE,.conF,.conG,.conH {
	background-color: #dcdad8;
	background-color: var(--bg-color);
	color: #4c4a4a;
	margin-top: 100px;
	position: relative;
}

.conB h2,.conC h2,.conD h2,.conE h2,.conF h2,.conG h2,.conH h2 {
	padding: 2px;
	background-color: #4c4a4a;
	display:inline-block;
	color: #fff;
	color: var(--text-bright-color);
	font-family: 'Barlow', sans-serif;
	letter-spacing: 0.05em;
	font-size: 5.5vw;
	line-height:5.5vw;
	}
	
.conB h3,.conC h3 {
	font-family: 'Noto Sans JP', sans-serif;	
	letter-spacing: 0.05em;
	font-size: 25px;
	margin-top: 0;
	margin-bottom: 40px;
	line-height:1.8;
	}
	
.conB p,.conC p,.conD p,.conF p,.conG p,.conH p,.footA p {
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: 0.05em;
	font-size: 14px;
	line-height:1.8;
	}

.conB .text,.conC .text,.conD .text,.conE .text,.conF .text,.conG .text,.conH .text {
	padding: 50px 30px 30px 30px;
}

@media (min-width: 768px) {
	.conB,.conC,.conD,.conE,.conF,.conG,.conH {
	max-width: 1000px;
	max-width: var(--large-width);
	margin-left: auto;
	margin-right: auto;
	}
		
	.conB .container,.conC .container,.conD .container,.conE .container,.conF .container ,.conG .container ,.conH .container  {
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.conB .photo,.conC .photo {
		height: 338px;
	}
	.conB h2,.conC h2,.conD h2,.conE h2,.conF h2,.conG h2,.conH h2 {
		font-size: 38px;
		line-height:38px;
	}
	.conB .text,.conC .text,.conD .text,.conE .text,.conF .text,.conG .text,.conH .text {
	padding: 50px 50px 30px 50px;
	}	
}

/*文字の改行調節*/
h3.h3_br_text2{
	font-size: 0;
	}
.h3_br_text{
	letter-spacing: 0.05em;
	display: inline-block; 
	font-size: 20px;
	}

.br_text {
	letter-spacing: 0.05em;
	display: inline-block; 
	}


/*con Bコンセプト個別指定*/

.conB .photo{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 300px;
	background: url(img/consept_image.png) no-repeat;
	background-position: center;
	background-size: cover;
	padding-top: 37.5%;
}

.reservation {
	text-align: center;
	margin-top: 50px;
	}

.reservationbox	{
	background-color: #fff;
	padding: 20px 20px;
	margin: 5px 0 30px 0;
	text-align: center
	}

.reservation a {
	color: inherit;
	}

.reservation .reservationtel {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 25px;
	line-height:1.5;
	margin-bottom: 20px;
	border-bottom: 1px dotted #4c4a4a;
	padding-bottom: 20px;
	font-size: 2em;
	letter-spacing: 0.1em;
	}
	
.reservation p{
	letter-spacing: 0.1em;
	margin-left: 0.1em;
	margin: 0.1em 0px;
	}
	
.illst01 img{	
	opacity:0.7; 
	animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
	}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

@keyframes fuwafuwa2 {
  0% {
    transform:translate(0, 0) rotate(7deg);
  }
  50% {
    transform:translate(0, 7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(-7deg);
  }
}
	
.illst01{
	position: absolute;
		top: -5%;
		right: -10%;
	}	

@media (max-width: 767px) {	
	.illst01 img{	
		width: 180px;
		}
	.illst01{
		position: absolute;
		top: -5%;
		right: 0;
	}
	.reservation .reservationtel{
	padding: 0 30px 15px 30px;
	font-size: 1.5em;
	}	
}

/*con C ステップボーンカット個別指定*/
.conC .photo {
	width: 100%;
	height: 0;
	padding-top: calc(493 / 1125 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	background: url(img/sbc_002.jpg) center center / cover no-repeat;
}

.morebox{
	text-align: center;
	margin: 50px 0 30px 0;
	border:1px solid #4c4a4a;
	padding: 5px;
	background-color: #fff;
	}	

.morebox img{
	padding-top: 5px;
	}	


 a:hover .morebox{
	background-color:  indianRed;
}

.illst02 img{	
	opacity:0.7;  
	animation: fluffy1 3s ease infinite;
	}

@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}
	
.illst02{
	position: absolute;
	top: -3%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	}
	

@media (max-width: 767px) {	
	.illst02 img{	
		width: 150px;
		}
	.morebox img{
	max-width: 80%;
	height: auto;
	}
}
@media (max-width: 480px) {	
	.conC .photo {
	width: 100%;
	height: 0;
	padding-top: calc(1056 / 1125 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	background: url(img/sbc_003s.jpg) center center / cover no-repeat;
	}
}
/*con D プライス個別指定*/

.menutext {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	max-width: var(--large-width);
	margin: 0 auto;
	padding: 0;
	list-style: none;
	
}

.menutext h3 {
	font-family: 'Roboto Condensed', sans-serif;
	border-bottom:1px solid #4c4a4a;
	padding-bottom:5px;
	}

.menutext li {
	margin-bottom: 60px;
	width:100%;
}

.menutext table	 {
	width:100%;
	}
	
.menutext th {
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: 0.05em;
	font-size: 14px;
	line-height:1.8;
	padding: 5px 0;
	}

.menutext td {
	text-align: right;
	font-family: 'Roboto Condensed', sans-serif;
	letter-spacing: 0.05em;
	font-size: 16px;
	line-height:1.8;
	padding-left: 50px;
	}
	
.conD .taxtext {
	font-size: 12px;
	text-align: right;
	}
	
@media (min-width: 768px) {
		.menutext li{
		flex: 1 1 40%;
		}
		.menutext li:nth-child(odd){
 		margin-right: 80px;
		}
		.br-sp {
		display: none;
		}	
	}

.illst03 img{	
	opacity: 70%;
	}
	
.illst03{
	overflow: hidden;
	position: absolute;
	top: -3%;
	left: -7%;
	animation: fuwafuwa2 3s infinite ease-in-out .8s alternate;
	}
	
.illst04 img{	
	opacity: 70%;
	}
	
.illst04{
	overflow: hidden;
	position: absolute;
	top: -3%;
	right: -7%;
	animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
	}
	

@media (max-width: 767px) {	
	.illst03{
	overflow: hidden;
	position: absolute;
	top: -2%;
	left: -7%;
	}	
	.illst03 img{	
		width: 50px;		
		}

	.illst04{
	overflow: hidden;
	position: absolute;
	top: -2%;
	right: -7%;
	}
	.illst04 img{	
		width: 50px;
		}
	.menutext td {	
		vertical-align:bottom;
		}
}

/*conE インスタグラム*/
.snapwidget iframe{
		margin:0;
		padding:0;
		}

.followbox{
	text-align: center;
	margin-top:20px;
	}



.followbox a:hover {
	background-color: #fff;
}

@media (max-width: 767px) {	
	.followbox img{
	width: 60%;
	}
	.snapwidget iframe{
		height:100px;
		}
}

@media (min-width: 768px) {
		.snapwidget iframe{
		height:180px;
		}
	}

/* スタッフ */

.conF ul {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	max-width: var(--large-width);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.conF li.stuff {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 0 50px 0;
}

.conF .photo {
	min-height: 200px;
	background-position: center;
	background-size: cover;
}

.conF h3 {
	font-size: 18px;
	letter-spacing: 0.1em;
	font-weight:normal;
}

.conF h3 span{
	font-size: 12px;
	display: block;
	letter-spacing: 0.05em;
	opacity: 0.8;
	margin: -2px 0 0 0;
	font-weight:normal;
}

.conF .stuff_text_01{
	font-size: 12px;
	letter-spacing: 0.1em;
	margin: -10px 0 20px 0;
}



/* スタッフ： SNSメニュー */
	
.sns_icon {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	margin-top: auto;
}

.sns_icon a {
	display: block;
	flex-direction: column;
	margin-right: 2px;
	padding: 0;
	color: inherit;
	font-size: 15px;
	text-decoration: none;
	border: solid 1px currentColor;
	width: 1.8em;
	line-height: 1.8em;
	border-radius: 50%;
	text-align: center;	
}

.sns_icon a:hover {
	background-color: rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
		.conF ul {
		width: 100%;
		display: flex;
		justify-content: space-between;
		}
		.conF li.stuff {
		width: 30%;
		}
		.conF li.stuff:nth-of-type(3n){
 		margin-right: 0;	
		}
	}

/* サロンインフォ */


.brooch_map iframe{
	width: 100%;
	height: 338px;
	margin-bottom:-10px;
}

.conG a{
	color: inherit;
}

.reservation .koushiki_line {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 20px;
	line-height:1.8;
	margin-bottom: 20px;
	border-bottom: 1px dotted #4c4a4a;
	padding-bottom: 20px;
	letter-spacing: 0.1em;
	}

.line_b {
	margin-top: 20px;
	}


/* リクルート */


	
/* フッター */
footer {
	color: #fff;
	color: var(--text-bright-color);
	background-color: #9d938d;
	margin-top: 80px;
}

footer .container {
	padding: 50px 30px 20px 30px;
}

@media (min-width: 768px) {
	footer .container {
		flex-wrap: wrap;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}
}

/* フッターA： サイト情報 */
.footA h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	letter-spacing: 0.2em;
}

.footA p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 14px;
}

.footA a {
	color: inherit;
	text-decoration: none;
}

/* フッターD： SNSメニュー */
.footD {
	margin-top: 20px;
}

.footD ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footD a {
	display: block;
	margin-right: 5px;
	padding: 0;
	color: inherit;
	font-size: 16px;
	text-decoration: none;
	border: solid 1px currentColor;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
}

.footD a:hover {
	background-color: rgba(0,0,0,0.3);
}

/* フッターC： コピーライト */
.footC {
	font-size: 12px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	margin-top: 15px;
}


/* 電話発信スマホのみ */

@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
    text-decoration: none;
  }
}