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

html{
	font-size: 62.5%;
}
body{
	background-color: #fff;
	color: #333;
	font-family: '游ゴシック体 Pr6N M', 'jaf-bernina-sans', 'grafolita-script', sans-serif;
	font-size: 1.6rem;
	font-feature-settings: "palt";
	letter-spacing: 0.05rem;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:glayscale;
	line-height: 1.8em;
}
img{
	max-width: 100%;
	height: auto;
}
a{
	color: #333;
	text-decoration: none;
}
li{
	list-style: none;
}
/*------------------------------
*
* utility
*
------------------------------*/
.sp{
	display: none;
}
.dn{
	display: none;
}
.secWrap{
	width: 75%;
	max-width: 1080px;
	padding: 120px 0;
	margin: 0 auto;
}
.sectionTitle{
	font-family: 'grafolita-script';
	font-weight: 600;
	font-size: 4.2rem;
	text-transform: capitalize;
}
.sectionTitleWrap{
	display: flex;
}
/*------------------------------
*
* header
*
------------------------------*/
.header{
	display: flex;
	justify-content: space-between;
	height: 150px;
}
.headerLogo{
	width: 178px;
	padding-left: 220px;
}
.headerMenu{
	display: flex;
	text-transform: capitalize;
	padding-right: 220px;
}
.headerMenu>li{
	margin-left: 42px;
	line-height: 150px;
	font-size: 1.4rem;
}
/*------------------------------
*
* kv
*
------------------------------*/
.kv{
	margin: 0;
    padding: 0;
    line-height: 0;
}
.slide{
    width: 100%;
	height: 100%;
	padding-bottom: -9px;
}
.slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.slide .pc{
	display: block;
	}
.slide .sp{
	display: none;
}
/*------------------------------
*
* concept
*
------------------------------*/
.concept{
	background-image: url("../images/conceptCover.jpg");
}
.concept .secWrap{
	display: flex;
	justify-content: space-between;
}
.conceptPhotoBox{
	width: 50%;
}
.concept1{
	width: 90%;
	margin-bottom: 32px;
}
.conceptPhoto{
	display: flex;
	justify-content: flex-end;
}
.concept2{
	width: 200px;
	padding-top: 28px;
}
.concept3{
	width: 190px;
	margin-left: 20px;
}
.conceptTxtArea{
	margin-left: 30px;
}
.concept .sectionTitleWrap{
	align-items: center;
	margin-bottom: 22px;
	padding-top: 120px;
}
.sectionTitleWrap.sp{
	display: none;
}
.flower5{
	margin-left: 32px;
}
.conceptText{
	margin-bottom: 60px;
	line-height: 3.4rem;
	letter-spacing: 0.15rem;
}
.stylist{
	display: flex;
	width: 274px;
	margin: 0 0 0 auto;
	align-items: baseline;
}
.stylist p{
	padding-bottom: 10px;
}
.stylist p span{
	padding-left: 10px;
}
/*------------------------------
*
* news
*
------------------------------*/
.news .secWrap{
	display: flex;
}
.newsContentBox .sectionTitle{
	margin-left: 32px;
}
.flower2{
	width: 100%;
}
.newsDl{
	display: flex;
	font-family: '游ゴシック体 Pr6N M';
	margin-bottom: 32px;
}
.newsDl:last-of-type{
	margin-bottom: 0;
}
.newsDl dt{
	font-size: 1.4rem;
}
.newsDl dd{
	margin-left: 32px;
}
.newsContent{
	border-left: 1px solid #333;
	padding: 0 0 0 60px;
	margin-left: 60px;
}
/*------------------------------
*
* menu
*
------------------------------*/
.menu{
	background-image: url("../images/menuCover.jpg");
}
.menu .secWrap{
	max-width: 1200px;
}
.menuWrap{
	max-width: 1080px;
	padding: 88px;
	background-color: #fff;
	border: 3px solid #eae2d8;
	border-radius: 20px;
}
.menu .sectionTitleWrap{
	display: flex;
	justify-content: space-between;
	margin-bottom: 26px;
}
.menuBox1{
	display: flex;
	justify-content: space-between;
}
.menuBox1>div{
	width: 45%;
}
.menuBox2{
	margin-bottom: 96px;
}
.menuBox2:last-of-type{
	margin-bottom: 0;
}
.menuBox2 p{
	font-size: 2.4rem;
	font-weight: 600;
	margin-bottom: 38px;
	text-transform: capitalize;
}
.menuContent{
	display: flex;
	justify-content: space-between;
	margin-bottom: 36px;
}
.menuTitle{
	vertical-align: middle;
	white-space: nowrap;
}
.menuTitle span{
	display: block;
}
.cap{
	width: 100%;
	margin-top: 8px;
	font-size: 1.2rem;
	color: #676666;
	line-height: 1.6em;
	white-space: normal;
}
.cap1{
	width: 120px;
}
.cap2{
	width: 168px;
}
.hr{
	width: 100%;
	display: inline-block;
	margin: 14px 0 0 18px;
	border-top: 1px dashed #333;
}
.price{
	margin-left: 18px;
	font-family: 'jaf-bernina-sans';
}
/*------------------------------
*
* salonInfo
*
------------------------------*/
.salonInfo{
	background-image: url("../images/salonInfoCover.jpg");
}
.salonInfo .secWrap{
	display: flex;
	justify-content: space-between;
}
.salonInfo .sectionTitleWrap{
	display: block;
	margin-bottom: 60px;
}
.flower4{
	padding-top: 120px;
	margin-bottom: 26px;
	text-align: right;
}
.salonInfo .conceptPhotoBox{
	margin-left: 30px;
}
.salonText{
	width: 340px;
	line-height: 3.4rem;
	letter-spacing: 0.15rem;
}
/*------------------------------
*
* gallery
*
------------------------------*/
.gallery{
	margin-bottom: 62px;
}
.gallery .sectionTitleWrap{
	align-items: baseline;
	margin-bottom: 60px;
}
.flower3{
	margin-left: 36px;
}
.galleryPhoto{
	display: flex;
	justify-content: space-between;
	width: 720px;
	margin: 0 auto;
}
.galleryPhoto:first-of-type{
	margin-bottom: 60px;
}
/*------------------------------
*
* footer
*
------------------------------*/
.footer{
	background-image: url("../images/footerCover.jpg");
	background-size: cover;
}
.footer .secWrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footerLogo{
	width: 178px;
	margin-bottom: 40px;
}
.footerText{
	font-size: 1.4rem;
	font-family: '游ゴシック体 Pr6N M';
}
.footerText:first-of-type{
	margin-bottom: 36px;
}
.footerText span{
	font-size: 1.8rem;
}
.sectionTitleWrap{
	margin-bottom: 36px;
}
.reserveText{
	margin-left: 36px;
}
.btnWrap{
	display: flex;
}
.btn{
	width: 312px;
	height: 40px;
	background-color: transparent;
	border: 1px solid #333;
	border-radius: 4px;
	cursor: pointer;
}
.btn:first-of-type{
	display: flex;
	justify-content: center;
	align-items: center;
}
.btn:last-of-type{
	margin-left: 36px;
}
.phone{
	width: 12px;
	height: 42px;
}
.phoneText{
	margin-left: 10px;
	font-family: '游ゴシック体 Pr6N M';
	font-size: 1.4rem;
}
.btnText{
	width: 70px;
	margin: 0 auto;
	font-size: 1.4rem;
	line-height: 4.2rem;
}

@media screen and (max-width:750px){
/*------------------------------
*
* utility
*
------------------------------*/
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	.secWrap{
		width: 80%;
		padding: 72px 0;
	}
	.sectionTitle{
		font-size: 3.6rem;
	}
/*------------------------------
*
* header
*
------------------------------*/
	.header.pc{
		display: none;
	}
	.header{
		display: block;
		height: auto;
	}
	.headerLogo{
		width: 122px;
		padding: 20px;
	}
	.navLogo{
		width: 130px;
	}
	/*ハンバーガーメニュー*/
	.openbtn{
		position: fixed;
		z-index: 9999;/*ボタン内側の基点となるためrelativeを指定*/
		top: 20px;
		right: 20px;
		cursor: pointer;
		width: 50px;
		height:50px;
	}
/*ボタン内側*/
	.openbtn span{
		display: inline-block;
		transition: all .4s;/*アニメーションの設定*/
		position: absolute;
		left: 13px;
		height: 2px;
		background-color: #333;
	}
	.openbtn span:nth-of-type(1) {
		top: 22px;
		width: 50%;
	}
	.openbtn span:nth-of-type(2) {
		top: 29px;
		width: 30%;
	}
/*activeクラスが付与されると線が回転して×に*/
	.openbtn.active span:nth-of-type(1) {
		top: 20px;
		left: 16px;
		transform: translateY(6px) rotate(-45deg);
		width: 35%;
	}
	.openbtn.active span:nth-of-type(2) {
		top: 32px;
		left: 16px;
		transform: translateY(-6px) rotate(45deg);
		width: 35%;
	}	
	/*全画面メニュー*/
	#g-nav{
		position: fixed;
		z-index: -1;
		opacity: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background-image: url("../images/sp-navCover.jpg@2x.jpg");
		transition: all .3s;
	}
	#g-nav.panelactive{
		opacity: 1;
		z-index: 999;
	}
	#g-nav ul{
		position: absolute;
		z-index: 999;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	#g-nav.panelactive ul{
		display: block;
	}
	.headerMenu{
		padding-right: 0;
	}
	.headerMenu li{        
		margin: 0 0 40px 0;       
		line-height: 1.4rem;
		font-size: 1.6rem;
		text-align: center;
	}
	.headerMenu li:first-of-type{
		margin-bottom: 60px;
	}
	.headerMenu .btn .phone{
		height: auto;
	}
/*------------------------------
*
* kv
*
------------------------------*/
	.slide .pc{
	display: none;
	}
	.slide .sp{
	display: block;
	}
	.kv{
		width: 100%;
	}
/*------------------------------
*
* concept
*
------------------------------*/
	.concept .secWrap{
		display: block;
		padding-top: 61px;
	}
	.concept .sectionTitleWrap{
		display: flex;
		justify-content: flex-end;
		padding-top: 0;
		margin-bottom: 32px;
	}
	.sectionTitleWrap.pc{
		display: none;
	}
	.flower5{
		width: 72px;
		margin-left: 16px;
		padding-right: 10px;
	}
	.conceptPhotoBox{
		width: 100%;
		margin-bottom: 40px;
	}
	.concept1{
		width: 100%;
		margin-bottom: 16px;
	}
	.conceptPhoto{
		justify-content: center;
	}
	.concept2{
		width: 132px;
		padding-top: 14px;
	}
	.concept3{
		width: 113px;
	}
	.conceptTxtArea{
		margin-left: 0;
	}
	.conceptText{
		margin-bottom: 40px;
	}
	.stylist{
		margin: 0 auto;
		justify-content: center;
	}
/*------------------------------
*
* news
*
------------------------------*/
	.news .secWrap{
		display: block;
		padding: 48px 0;
	}
	.news .sectionTitleWrap{
		align-items: baseline;
	}
	.flower2{
		width: 68px;
		margin-right: 32px;
		padding-left: 12px;
	}
	.newsContent{
		border: none;
		padding: 0;
		margin-left: 0;
	}
	.newsDl dt{
		font-size: 1.2rem;
	}
	.newsDl dd{
		margin-left: 16px;
	}
/*------------------------------
*
* menu
*
------------------------------*/
	.menu .secWrap{
		width: 330px;
	}
	.menuWrap{
		max-width: inherit;
		padding: 44px 15px;
	}
	.menu .sectionTitleWrap{
		justify-content: flex-end;
		align-items: baseline;
	}
	.flower1{
		width: 52px;
		padding-right: 26px;
		margin-left: 32px;
	}
	.menuBox1{
		display: block;
	}
	.menuBox1>div{
		width: 100%;
	}
	.menuBox2{
		margin-bottom: 84px;
	}
	.menuBox2:last-of-type{
		margin-bottom: 84px;
	}
	.menuBox2.menuLast{
		margin-bottom: 0;
	}
	.menuBox2 p{
		margin-bottom: 48px;
	}
	.menuTitle{
		font-size: 1.4rem;
	}
	.cap{
		width: 200px;
		margin-top: 0;
		font-size: 1.0rem;
	}
	.cap1{
		width: 100px;
	}
	.cap2{
		width: 140px;
	}
	.hr{
		margin: 12px 0 0 12px;
	}
	.price{
		margin-left: 12px;
		font-size: 1.4rem;
	}
/*------------------------------
*
* salonInfo
*
------------------------------*/
	.salonInfo .secWrap{
		display: block;
		padding: 0 0 72px;
	}
	.salonInfo .sectionTitleWrap{
		display: flex;
		align-items: center;
		margin-bottom: 36px;
	}
	.flower4{
		width: 76px;
		padding-top: 60px;
		margin: 0 15px 0 0;
	}
	.salonInfo .sectionTitle{
		padding-top: 50px;
	}
	.salonText{
		width: 300px;
		margin-bottom: 32px;
	}
	.salonInfo .conceptPhotoBox{
		margin: 0;
	}
/*------------------------------
*
* gallery
*
------------------------------*/
	.gallery{
		margin-bottom: 0;
	}
	.gallery .sectionTitleWrap{
		justify-content: flex-end;
	}
	.gallery .sectionTitleWrap{
		margin-bottom: 32px;
	}
	.flower3{
		width: 81px;
		margin-left: 24px;
	}
	.galleryPhoto{
		display: block;
		width: 200px;
	}
	.galleryPhoto:first-of-type{
		margin-bottom: 32px;
	}
	.galleryPhoto img{
		margin-bottom: 32px;
	}
	.galleryPhoto img:last-of-type{
		margin-bottom: 0;
	}
/*------------------------------
*
* footer
*
------------------------------*/
	.footer{
		background-position: center bottom;
	}
	.footer .secWrap{
		display: block;
	}
	.footerLogoWrap{
		width: 178px;
		margin: 0 auto;
	}
	.footerText{
		width: 194px;
		margin: 0 auto 60px;
	}
	.footerText:first-of-type{
		margin-bottom: 20px;
	}
	.footer .sectionTitleWrap{
		display: block;
		margin-bottom: 20px;
	}
	.footer .sectionTitle{
		margin-bottom: 20px;
	}
	.reserveText{
		margin-left: 0;
		font-size: 1.4rem;
	}
	.btnWrap{
		display: block;
	}
	.btn:first-of-type{
		margin-bottom: 30px;
	}
	.btn:last-of-type{
		margin-left: 0;
	}
	
}