@charset "UTF-8";

/* =======================================================
  店舗一覧
======================================================= */

.ly-salon-archive {
	padding: 80px 0 120px;
	background: #fff;
}

.bl-salon-archive {
	width: 900px;
	margin: 0 auto;
}
.op-banner {
    max-width: 800px;
    margin: 30px auto 0;
}

/* =======================================================
  エリア絞り込み
======================================================= */

.bl-salon-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	width: 755px;
	margin: 0 auto;
}

/*
 * TOPでは最初のエリアが選択されますが、
 * 店舗一覧では「すべて」を初期選択にします。
 */
.bl-salon-filter-btn {
	min-width: auto;
	height: 30px;
	padding: 0 18px;
}

/* 北海道・東北 */
.bl-salon-filter-btn[data-salon-filter="hokkaido-tohoku"] {
	min-width: 162px;
}

/* 関西・大阪、中国・四国、九州・沖縄 */
.bl-salon-filter-btn[data-salon-filter="kansai-osaka"],
.bl-salon-filter-btn[data-salon-filter="chugoku-shikoku"],
.bl-salon-filter-btn[data-salon-filter="kyushu-okinawa"] {
	min-width: 148px;
}


/* =======================================================
  説明文
======================================================= */

.bl-salon-archive-lead {
	margin: 36px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	color: #333;
	text-align: center;
}


/* =======================================================
  店舗カード一覧
======================================================= */

/*
 * 列数、カード幅、カード内部、画像、文字は
 * top.cssの .bl-about-shop-* を使用。
 */
.bl-salon-archive-list {
	margin-top: 48px;
}

.bl-salon-archive-card[hidden] {
	display: none;
}

/*
 * デザインではカード本文が薄いベージュ。
 * TOP側ですでに指定されている場合は、この指定は重複しても問題ありません。
 */
.bl-salon-archive-card .bl-about-shop-card-body {
	position: relative;
	background: #faf7f2;
}

/* 右下のオレンジ矢印 */
.bl-salon-archive-card-arrow {
	position: absolute;
	right: 15px;
	bottom: 15px;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 7px solid #ff6a00;
}

/*
 * 矢印をabsoluteで配置するため、
 * TOP共通リンクにpositionだけ追加。
 */
.bl-salon-archive-card .bl-about-shop-card-link {
	position: relative;
}


/* =======================================================
  店舗なし
======================================================= */

.bl-salon-archive-empty {
	padding: 30px 20px;
	margin: 48px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	color: #333;
	text-align: center;
	background: #faf7f2;
}


/* =======================================================
  Hover
======================================================= */

@media (any-hover: hover) {

	.bl-salon-home {
		transition: opacity 0.3s ease;
	}

	.bl-salon-home:hover {
		opacity: 0.7;
	}

}


/* =======================================================
  SP
======================================================= */

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

	.ly-salon-archive {
		padding: 56px 0 80px;
	}

	.bl-salon-archive {
		width: 325px;
		max-width: 100%;
	}

	.op-banner {
		max-width: 800px;
		margin: 0 auto;
	}

	/* エリア絞り込み
	-------------------------- */

	.bl-salon-filter {
		gap: 10px 12px;
		width: 316px;
		max-width: 100%;
		margin: 0 auto;
	}

	.bl-salon-filter-btn {
		min-width: auto;
		height: 30px;
		padding: 0 17px;
		font-size: 14px;
	}

	.bl-salon-filter-btn[data-salon-filter="hokkaido-tohoku"] {
		min-width: 162px;
	}

	.bl-salon-filter-btn[data-salon-filter="kansai-osaka"],
	.bl-salon-filter-btn[data-salon-filter="chugoku-shikoku"],
	.bl-salon-filter-btn[data-salon-filter="kyushu-okinawa"] {
		min-width: 148px;
	}


	/* 説明文
	-------------------------- */

	.bl-salon-archive-lead {
		width: 325px;
		margin-top: 36px;
		line-height: 1.6;
	}

	/*
	 * デザインどおりSPでは2行にする。
	 */
	.bl-salon-archive-lead {
		max-width: 280px;
		margin-right: auto;
		margin-left: auto;
	}


	/* 店舗一覧
	-------------------------- */

	.bl-salon-archive-list {
		grid-template-columns: repeat(2, 155px);
		gap: 26px 15px;
		justify-content: center;
		margin-top: 42px;
	}

	/*
	 * 以下は原則top.cssの値と同じ。
	 * 店舗一覧側で確実に揃えるために指定。
	 */
	.bl-salon-archive-card {
		width: 155px;
	}

	.bl-salon-archive-card .bl-about-shop-card-ttl {
		min-height: 26px;
		padding: 3px 5px;
		font-size: 14px;
	}

	.bl-salon-archive-card .bl-about-shop-card-body {
		min-height: 223px;
		padding: 11px;
	}

	.bl-salon-archive-card .bl-about-shop-card-img {
		height: 88px;
	}

	.bl-salon-archive-card .bl-about-shop-card-info {
		margin-top: 10px;
	}

	.bl-salon-archive-card .bl-about-shop-card-access,
	.bl-salon-archive-card .bl-about-shop-card-address {
		font-size: 12px;
		line-height: 1.6;
	}

	.bl-salon-archive-card-arrow {
		right: 10px;
		bottom: 11px;
		border-top-width: 5px;
		border-bottom-width: 5px;
		border-left-width: 6px;
	}


	/* 店舗なし
	-------------------------- */

	.bl-salon-archive-empty {
		margin-top: 42px;
	}


	/* ホームに戻る
	-------------------------- */

	.bl-salon-home {
		width: 275px;
		margin-top: 72px;
		font-size: 18px;
	}

}


/* =======================================================
  店舗詳細
======================================================= */

/* メインビジュアル
-------------------------- */

.bl-salon-detail-mv {
	background: linear-gradient(180deg, #faf7f2 0%, #fff 100%);
}

.bl-salon-detail-mv-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 900px;
	margin: 0 auto;
}

.bl-salon-detail-mv-head {
	width: 330px;
}

.bl-salon-detail-mv-ttl {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.3;
}

.bl-salon-detail-mv-img {
	width: 506px;
}

.bl-salon-detail-mv-img img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}


/* 店舗説明
-------------------------- */

.ly-salon-detail-intro {
	padding: 72px 0 88px;
}

.bl-salon-detail-intro {
	width: 900px;
	margin: 0 auto;
}

.bl-salon-detail-intro-txt,
.bl-salon-detail-intro-note {
	font-size: 14px;
	line-height: 2;
	color: #333;
}

.bl-salon-detail-intro-note {
	margin-top: 12px;
	color: #d00;
}
.ly-salon-detail-links {
	padding-bottom: 72px;
	text-align: center;
}


/* 店舗情報
-------------------------- */

.ly-salon-detail-info {
	padding-bottom: 88px;
}

.bl-salon-detail-info {
	position: relative;
	width: 900px;
	margin: 0 auto;
	padding: 70px 50px 56px;
	background: #faf7f2;
}

.bl-salon-detail-info-ttl {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 126px;
	height: 34px;
	margin: 0;
	background: #f58220;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 34px;
	text-align: center;
}

.bl-salon-detail-info-ttl::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	transform: translateX(-50%);
	border-width: 8px 7px 0;
	border-style: solid;
	border-color: #f58220 transparent transparent;
}
.bl-salon-detail-info-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bl-salon-detail-info-item {
	display: flex;
	padding-bottom: 20px;
	border-bottom: 1px solid #ccc;
}

.bl-salon-detail-info-dttl {
	flex: 0 0 105px;
	font-size: 16px;
	font-weight: 700;
}

.bl-salon-detail-info-ddata {
	flex: 1;
	font-size: 16px;
	line-height: 1.8;
}

.bl-salon-detail-info-note {
	display: block;
	margin-top: 6px;
	color: #d00;
}

.bl-salon-detail-map-link {
	display: inline-block;
	margin-top: 8px;
	color: #ff6a00;
	text-decoration: underline;
}

.bl-salon-detail-tel-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bl-salon-detail-tel-item a {
	color: inherit;
	text-decoration: none;
}

.bl-salon-detail-info-hours,
.bl-salon-detail-info-closed {
	display: block;
}

.bl-salon-detail-info-notice {
	margin-top: 24px;
	color: #d00;
	font-size: 14px;
	line-height: 1.8;
}
.bl-salon-detail-map {
	margin-top: 8px;
}

.bl-salon-detail-map-link {
	color: #f58220;
	font-size: 14px;
	text-decoration: underline;
}

/* SP
-------------------------- */

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

	.bl-salon-detail-mv-inner {
		display: block;
		width: 100%;
	}

	.bl-salon-detail-mv-head {
		width: 325px;
		margin: 0 auto;
		padding: 36px 0 28px;
	}

	.bl-salon-detail-mv-ttl {
		font-size: 32px;
		line-height: 1.3;
	}

	.bl-salon-detail-mv-img {
		width: 100%;
	}

	.ly-salon-detail-intro {
		padding: 48px 0 56px;
	}

	.bl-salon-detail-intro {
		width: 325px;
	}

	.ly-salon-detail-info {
		padding-bottom: 64px;
	}

	.bl-salon-detail-info {
		width: 325px;
		padding: 40px 25px;
	}

	.bl-salon-detail-info-ttl {
		margin-bottom: 32px;
		font-size: 24px;
	}

	.bl-salon-detail-info-item {
		display: block;
		padding-bottom: 18px;
	}

	.bl-salon-detail-info-dttl {
		margin-bottom: 8px;
		font-size: 14px;
	}

	.bl-salon-detail-info-ddata {
		font-size: 14px;
		line-height: 1.8;
	}

}