@charset "utf-8";

/* ------------------------------------------
	- COMMON SETTING
	- HEADER
		-- NAV MENU
	- MAIN
		--
		--
	- FOOTER
------------------------------------------ */


/* ==============================================================
	SLIDER
============================================================== */
.slider .swiper-container{
	width:100%;
	height:100%;
}
.slider .swiper-container-fade .swiper-slide img{
	width:100%;
	height:auto;
	object-position: center;
}
.slider h1{
	position: absolute;
	top:25%;
	left:0;
	right:0;
	z-index: 11;
}

@media screen and (max-width:750px){
	.slider h1{
		top:20%;
	}
	.slider h1 img{
		width:30%;
	}

}

/* ==============================================================
	INTRO
============================================================== */
.intro{
	background: url(../img/toppage/intro_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	padding:80px 0;
	margin-top:-2px;
}
@media screen and (max-width:750px){
	.intro{
		/*padding:40px 0 0;*/ /*プロフィール表示*/
		padding:40px 0 10px;  /*プロフィール非表示*/
	}
}
.intro .intro_inner p{
	color: #484727;
	margin-bottom: 40px;
}
.intro p.intro_maintitle{
	font-size: 32px;
	line-height: 0.8;
	margin-bottom:20px;
	font-weight: 600;
}
.intro p.intro_title{
	font-size: 20px;
	line-height:1.5;
	font-weight: 600;
}

@media screen and (max-width:750px){
	.intro .intro_inner p{
		width:90%;
		margin:0 auto 20px;
	}
	.intro p.intro_maintitle{
		font-size: 26px;
		margin-bottom:10px;
	}
	.intro p.intro_title{
		font-size: 16px;
	}
}


/*	PROFILE
------------------------------------------------ */
.intro .profile{
	width:520px;
	padding: 35px;
	background: #fff;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: left;
}
@media screen and (max-width:750px){
	.intro .profile{
		width:90%;
		padding: 15px 5%;
	}
}
.intro .profile img{
	margin-right:35px;
}
@media screen and (max-width:750px){
	.intro .profile img,.intro .profile .txt{
		width:45%;
	}
	.intro .profile img{
		margin-right:5%;
	}
}
.intro .profile p{
	margin-bottom: 15px;
	font-size: 12px;
	line-height: 2;
}
@media screen and (max-width:750px){
	.intro .profile p{
		margin-bottom: 5px;
		line-height: 1.2;
	}
}
.intro .profile p.title{
	font-size: 18px;
	line-height: 1.33;
	letter-spacing: 0.2em;
}
.intro .profile li{
	font-size: 10px;
	line-height: 2.4;
	list-style-type: disc;
	margin-left: 1.5em;
}
@media screen and (max-width:750px){
	.intro .profile li{
		line-height: 1.2;
	}
}



/* ==============================================================
	SALON
============================================================== */
.salon{
	display: flex;
	align-items: stretch;
}
@media screen and (max-width:750px){
	.salon{
		display: block;
	}
}
.salon .img,.salon .txt{
	width:50%;
}
@media screen and (max-width:750px){
	.salon .img{
		width:100%;
	}
}
.salon .img img{
	width:100%;
	height:100%;
}
.salon .txt{
	background: #4b545c;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
}
@media screen and (max-width:750px){
	.salon .txt{
		width:90%;
		margin-top: -2px;
		padding:30px 5%;
	}
}
.salon .txt .btn{
	margin-top: 35px;
	background: #867863;
}


@media screen and (max-width:750px){

}


/* ==============================================================
	MENU
============================================================== */
.menu{
	background: url(../img/toppage/menu_bg.jpg) repeat;
	padding-bottom: 60px;
}
.menu .startArea{
	position: relative;
}
.menu .startArea img.menu_img{
	width:100%;
}
.menu .startArea .menu_bg_top{
	position: absolute;
	bottom:0;
	z-index: 1;
	left:0;
	right:0;
	width:100%;
}
@media screen and (max-width:750px){
	.menu .startArea .menu_bg_top img{
		width:80%;
	}
}
.menu h2.heading{
	color: #00b7ee;
	margin-top:-20px;
	position: relative;
	z-index: 2;
}
.menu h2.heading span{
	color: #fff;
}
.menu p.commentary{
	margin:60px auto 30px;
	color: #fff;
}
@media screen and (max-width:750px){
	.menu p.commentary{
		margin:30px auto 15px;
		width:90%;
	}
}

/*	BOTTON AREA
------------------------------------------------ */
.menu .btnArea{
	display: flex;
	justify-content: center;
}
@media screen and (max-width:750px){
	.menu .btnArea{
		display: block;
	}
}
.menu .btnArea .btn_item{
	background: #f7f7f7;
}
.menu .btnArea .btn_item:nth-child(2){
	margin: 0 20px;
}
@media screen and (max-width:750px){
	.menu .btnArea .btn_item img{
		width:100%;
	}
}
.menu .btnArea .btn_item p{
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.24em;
	padding:10px 0 15px;
	font-weight: 600;
}
.menu .btnArea .btn_item p span{
	font-size: 12px;
	color: #867863;
}
.menu .btn{
	width: 260px;
	background: #00b7ee;
	color: #fff;
	margin-top:60px;
}
@media screen and (max-width:750px){
	.menu .btnArea .btn_item{
		margin:30px auto;
	}
	.menu .btnArea .btn_item:nth-child(2){
		margin: 0 auto;
	}
}