@charset "utf-8";
/* トップページ */

/* メインビジュアル（写真をふわっと切り替える。右に縦書きのキャッチコピー） */
.main{
	position: relative;
	height: 751px;
	overflow: hidden;
	background-color: #d6ebe8;
}

.main_slide{
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s;
}

/* JS が動く前と、写真が1枚のときは1枚目を出す */
.main_slide:first-child,
.main_slide.is-active{
	opacity: 1;
}

.main_slides:has(.is-active) .main_slide:not(.is-active){
	opacity: 0;
}

.main_slide img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% center;
}

.main_copy{
	position: absolute;
	top: 148px;
	right: 18.6%;
	padding: 40px 30px;
}

/* キャッチコピーの両端の、緑の四角の飾り */
.main_copy::before,
.main_copy::after{
	content: "";
	position: absolute;
	z-index: 0;
	width: 131px;
	height: 131px;
	background-color: rgba(231, 241, 228, 0.77);
	border: 1px solid #7f9b67;
}

.main_copy::before{
	top: 0;
	right: 34px;
}

.main_copy::after{
	bottom: 0;
	left: -20px;
}

.catchcopy{
	position: relative;
	z-index: 1;
	height: 400px;
	font-family: 'Shippori Mincho', 'Yu Mincho', YuMincho, serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 2.5;
	letter-spacing: 0.16em;
	writing-mode: vertical-rl;
	color: #282828;
}

/* 写真を切り替える点 */
.main_dots{
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	display: flex;
	gap: 14px;
}

.main_dot{
	width: 11px;
	height: 11px;
	padding: 0;
	background-color: transparent;
	border: 1px solid #507d28;
	border-radius: 50%;
	cursor: pointer;
}

.main_dot.is-active{
	background-color: #507d28;
}





/* CONCEPT */
.concept{
	padding-top: 85px;
}

.concept_inner{
	display: flex;
	align-items: center;
	gap: 98px;
}

.concept_img{
	width: 602px;
	max-width: 50%;
	flex-shrink: 0;
}

/* 写真はお店ごとに大きさがちがうので、枠の比率を決めて切り抜く */
.concept_img img{
	display: block;
	width: 100%;
	aspect-ratio: 602 / 662;
	object-fit: cover;
}

.concept_body{
	flex: 1;
	min-width: 0;
}

.concept_catch{
	margin-top: 46px;
	font-family: 'Shippori Mincho', 'Yu Mincho', YuMincho, serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.6;
}

.concept_text{
	margin-top: 38px;
	font-size: 15px;
	line-height: 2.1;
}

.concept .btn_left{
	margin-top: 46px;
}

/* こだわり（左に薄緑の箱と文章、右に写真。左上に手書きの英字） */
.feature{
	display: flex;
	margin-top: 264px;
}

.feature_body{
	position: relative;
	width: 55%;
	padding: 112px 50px 60px 45px;
	background-color: #f1faf5;
}

.feature_word{
	position: absolute;
	top: -46px;
	left: 44px;
	font-family: 'Caveat', 'Segoe Script', cursive;
	font-size: 72px;
	line-height: 1;
	letter-spacing: 0.04em;
	color: #282828;
}

.feature_text{
	font-size: 15px;
	line-height: 2.1;
}

.feature_img{
	width: 45%;
	flex-shrink: 0;
}

.feature_img img{
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;
	aspect-ratio: 605 / 327;
	object-fit: cover;
}





/* STAFF（下半分に薄緑の帯） */
.staff{
	position: relative;
	margin-top: 120px;
	padding-bottom: 60px;
}

.staff::before{
	content: "";
	position: absolute;
	top: 470px;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background-color: #e7f1e4;
}

.staff_list{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 87px;
	margin-top: 100px;
}

.staff_img{
	position: relative;
}

.staff_img img{
	display: block;
	width: 100%;
	aspect-ratio: 343 / 313;
	object-fit: cover;
	background-color: #eceeee;
}

.staff_role{
	position: absolute;
	left: 0;
	bottom: -18px;
	min-width: 132px;
	padding: 4px 20px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.8;
	text-align: center;
	color: #ffffff;
	background-color: #323533;
}

.staff_name{
	padding: 40px 20px 32px;
	font-size: 22px;
	text-align: center;
	background-color: #ffffff;
}

.staff .btn{
	margin-top: 58px;
}





/* MENU（白い木目の背景。写真と文章が左右交互） */
.menu{
	margin-top: 126px;
	padding: 96px 0 92px;
	background-color: #f5f5f5;
	background-image: url("../img/common/menu_back.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.menu_list{
	margin-top: 54px;
}

.menu_item{
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 100px;
}

/* 2つ目は左右を入れかえる */
.menu_item:nth-child(even){
	flex-direction: row;
	justify-content: flex-start;
	padding-left: 60px;
}

.menu_item + .menu_item{
	margin-top: 92px;
}

.menu_img{
	position: relative;
	width: 543px;
	max-width: 48%;
	flex-shrink: 0;
}

.menu_img img{
	display: block;
	width: 100%;
	aspect-ratio: 543 / 327;
	object-fit: cover;
}

/* 写真の右下（2つ目は左下）の、黄色い丸と手書きの英字 */
.menu_word{
	position: absolute;
	right: -20px;
	bottom: -22px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 126px;
	height: 126px;
	padding-right: 20px;
	font-family: 'Caveat', 'Segoe Script', cursive;
	font-size: 62px;
	line-height: 1;
	color: #282828;
	background: radial-gradient(circle at calc(100% - 63px) 50%, #e7e5ad 62px, transparent 63px);
}

.menu_item:nth-child(even) .menu_word{
	right: auto;
	left: -20px;
	justify-content: flex-start;
	padding-right: 0;
	padding-left: 12px;
	background: radial-gradient(circle at 63px 50%, #e7e5ad 62px, transparent 63px);
}

.menu_body{
	flex: 1;
	min-width: 0;
	max-width: 500px;
	padding-top: 40px;
}

.menu_item:nth-child(even) .menu_body{
	max-width: 500px;
}

/* 品目の名前（左に線） */
.menu_name{
	display: flex;
	align-items: center;
	gap: 34px;
	font-family: 'Shippori Mincho', 'Yu Mincho', YuMincho, serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
}

.menu_name::before{
	content: "";
	flex-shrink: 0;
	width: 110px;
	height: 1px;
	background-color: #282828;
}

.menu_text{
	margin-top: 44px;
	font-size: 15px;
	line-height: 2.2;
}

.menu .btn_left{
	margin-top: 34px;
}





/* STYLE（3列の写真） */
.style{
	padding: 124px 0 140px;
}

.style_list{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 50px 57px;
	margin-top: 60px;
}

.style_item img{
	display: block;
	width: 100%;
	aspect-ratio: 363 / 283;
	object-fit: cover;
}

.style_caption{
	display: flex;
	gap: 8px;
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.7;
}

.style_caption::before{
	content: "";
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	margin-top: 0.45em;
	background-color: #c2c87f;
	border-radius: 50%;
}

.style .btn{
	margin-top: 60px;
}





/* NEWS（写真の上に、白い半透明の箱） */
.news{
	padding: 57px 0 61px;
	background-color: #f1faf5;
	background-image: url("../img/index/news_back.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.news_box{
	padding: 46px 120px 50px;
	background-color: rgba(255, 255, 255, 0.85);
}

.news_list{
	margin-top: 46px;
}

.news_item + .news_item{
	border-top: 1px solid #c9c9c9;
}

.news_item a{
	display: flex;
	align-items: center;
	gap: 0;
	min-height: 91px;
	padding: 14px 0;
	font-size: 15px;
	line-height: 1.6;
}

.news_item a:hover{
	opacity: 0.7;
}

.news_date{
	flex-shrink: 0;
	width: 137px;
	font-weight: 700;
	color: #507d28;
}

.news_category{
	flex-shrink: 0;
	min-width: 109px;
	margin-right: 34px;
	padding: 2px 10px;
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
	color: #ffffff;
	background-color: #507d28;
}

.news_category:empty{
	visibility: hidden;
}

.news_title{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: underline;
	text-underline-offset: 5px;
}

.news .btn{
	margin-top: 48px;
}





/* SALON（店舗が2つまで並ぶ） */
.salon{
	padding: 124px 0 124px;
}

.salon_list{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 58px;
	margin-top: 60px;
}

/* 店舗が1つなら、真ん中に置く */
.salon_list:has(> .salon_item:only-child){
	grid-template-columns: minmax(0, 574px);
	justify-content: center;
}

.salon_img img{
	display: block;
	width: 100%;
	aspect-ratio: 574 / 356;
	object-fit: cover;
}

.salon_name{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 30px;
	line-height: 1.4;
}

.salon_brand{
	font-family: 'Shippori Mincho', 'Yu Mincho', YuMincho, serif;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.salon_branch{
	font-size: 17px;
	font-weight: 500;
}

.salon_info{
	margin-top: 26px;
	font-size: 15px;
	line-height: 2.1;
}

.salon_info div{
	display: flex;
}

.salon_info dt{
	flex-shrink: 0;
	width: 8em;
}

.salon .btn_left{
	margin-top: 40px;
}





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

	.main{
		height: 600px;
	}

	.main_copy{
		right: 6%;
	}

	.concept_inner{
		gap: 50px;
	}

	.feature{
		margin-top: 160px;
	}

	.staff_list{
		gap: 30px;
	}

	.staff::before{
		top: 420px;
	}

	.menu_item,
	.menu_item:nth-child(even){
		gap: 50px;
		padding-left: 0;
	}

	.menu_name::before{
		width: 60px;
	}

	.style_list{
		gap: 40px 30px;
	}

	.news_box{
		padding: 40px 40px 46px;
	}

	.salon_list{
		gap: 30px;
	}
}




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

	/* メインビジュアル（右に縦書きのキャッチコピー。大きさは画面の幅に合わせる） */
	.main{
		height: 93vw;
	}

	.main_slide img{
		object-position: 40% center;
	}

	.main_copy{
		top: 8vw;
		right: 4vw;
		padding: 5vw 4vw;
	}

	.main_copy::before,
	.main_copy::after{
		width: 13vw;
		height: 13vw;
	}

	.main_copy::before{
		right: 2vw;
	}

	.catchcopy{
		height: 52vw;
		font-size: max(11px, 3.2vw);
		line-height: 2.2;
	}

	.main_dots{
		bottom: 3vw;
		gap: 10px;
	}

	/* CONCEPT（見出し・写真・文章の順に縦に並べる） */
	.concept{
		padding-top: 50px;
	}

	.concept_inner{
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.concept_body{
		display: contents;
	}

	.concept .title_left{
		order: 1;
		text-align: center;
	}

	.concept .title_left::after{
		display: block;
	}

	.concept_img{
		order: 2;
		width: 100%;
		max-width: none;
		margin-top: 30px;
	}

	.concept_img img{
		aspect-ratio: 602 / 307;
	}

	.concept_catch{
		order: 3;
		margin-top: 26px;
		font-size: 17px;
	}

	.concept_text{
		order: 4;
		margin-top: 20px;
		font-size: 13px;
	}

	.concept .btn_left{
		order: 5;
		margin-top: 30px;
		text-align: center;
	}

	/* こだわり（文章の下に写真） */
	.feature{
		flex-direction: column;
		margin-top: 80px;
	}

	.feature_body,
	.feature_img{
		width: 100%;
	}

	.feature_body{
		padding: 60px 20px 30px;
	}

	.feature_word{
		top: -30px;
		left: 20px;
		font-size: 48px;
	}

	.feature_text{
		font-size: 13px;
	}

	/* STAFF（2列） */
	.staff{
		margin-top: 70px;
		padding-bottom: 50px;
	}

	.staff::before{
		top: 330px;
	}

	.staff_list{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		margin-top: 40px;
	}

	.staff_role{
		bottom: -12px;
		min-width: 0;
		padding: 2px 10px;
		font-size: 11px;
	}

	.staff_name{
		padding: 22px 10px 18px;
		font-size: 14px;
		text-align: left;
	}

	.staff .btn{
		margin-top: 36px;
	}

	/* MENU（写真の下に文章） */
	.menu{
		margin-top: 60px;
		padding: 50px 0 60px;
	}

	.menu_list{
		margin-top: 30px;
	}

	.menu_item,
	.menu_item:nth-child(even){
		flex-direction: column;
		gap: 0;
	}

	.menu_item + .menu_item{
		margin-top: 60px;
	}

	.menu_img{
		width: 100%;
		max-width: none;
	}

	.menu_word,
	.menu_item:nth-child(even) .menu_word{
		right: -6px;
		left: auto;
		bottom: -16px;
		min-width: 80px;
		height: 80px;
		justify-content: flex-end;
		padding: 0 10px 0 0;
		font-size: 40px;
		background: radial-gradient(circle at calc(100% - 40px) 50%, #e7e5ad 39px, transparent 40px);
	}

	.menu_body,
	.menu_item:nth-child(even) .menu_body{
		max-width: none;
		padding-top: 30px;
	}

	.menu_name{
		gap: 20px;
		font-size: 18px;
	}

	.menu_name::before{
		width: 70px;
	}

	.menu_text{
		margin-top: 20px;
		font-size: 13px;
		line-height: 2;
	}

	.menu .btn_left{
		margin-top: 24px;
	}

	/* STYLE（2列） */
	.style{
		padding: 60px 0 60px;
	}

	.style_list{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
		margin-top: 30px;
	}

	.style_caption{
		font-size: 12px;
	}

	.style_caption::before{
		width: 9px;
		height: 9px;
	}

	.style .btn{
		margin-top: 36px;
	}

	/* NEWS */
	.news{
		padding: 30px 0;
	}

	.news_box{
		padding: 30px 20px 34px;
	}

	.news_list{
		margin-top: 26px;
	}

	.news_item a{
		flex-wrap: wrap;
		gap: 6px 0;
		min-height: 0;
		padding: 18px 0;
		font-size: 13px;
	}

	.news_date{
		width: auto;
		margin-right: 20px;
	}

	.news_category{
		min-width: 80px;
		margin-right: 0;
		font-size: 11px;
	}

	.news_category:empty{
		display: none;
	}

	.news_title{
		width: 100%;
		white-space: normal;
	}

	.news .btn{
		margin-top: 30px;
	}

	/* SALON（縦に並べる） */
	.salon{
		padding: 60px 0;
	}

	.salon_list{
		grid-template-columns: 1fr;
		gap: 50px;
		margin-top: 30px;
	}

	.salon_name{
		margin-top: 18px;
	}

	.salon_brand{
		font-size: 22px;
	}

	.salon_branch{
		font-size: 13px;
	}

	.salon_info{
		margin-top: 14px;
		font-size: 13px;
	}

	.salon_info dt{
		width: 6.5em;
	}

	.salon .btn_left{
		margin-top: 24px;
	}
}