/* SALON INFO(単独ページ用CSS)
   読み込み順:reset.css → flame.css → salon.css → anime.css
   AROMA HEAD SPA(aromaheadspa.css)の型を流用。接頭辞 sl_ */

.box_sl{
	--ink: #171614;
	--sub: #8a8486;
	--line: rgba(23,22,20,.15);
	--tint: #f5f3f2;
	--stone: #ebe7e1;
	--rose: #a8506a;
	--ease: cubic-bezier(.22,.61,.36,1);
	--gap: clamp(16px, 2.2vw, 32px);
	position: relative;
	margin: 0 auto;
	padding: 0;
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
	}

/* ---------- タイトル+ページ内メニュー(AROMA HEAD SPAと同じ) ---------- */
.box_sl .sl_head{
	padding: 10% 8% 3%;
	}
.box_sl .sl_title{
	text-align: center;
	}
.box_sl .sl_title h2{
	margin: 0;
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 400;
	letter-spacing: 0.3em;
	line-height: 1.5em;
	}
.box_sl .sl_catch{
	margin: 1.4em auto 0;
	font-variant-numeric: normal;
	font-feature-settings: normal;
	font-size: clamp(20px, 3.4vw, 28px);
	line-height: 1.9em;
	letter-spacing: 0.08em;
	}
.box_sl .sl_index{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5em 2.6em;
	margin: 4em 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.95rem;
	line-height: 1.8em;
	}
.box_sl .sl_index a{
	color: #4f4a4c;
	text-decoration: underline;
	text-decoration-color: rgba(79,74,76,.3);
	text-underline-offset: 0.65em;
	transition: color .3s, text-decoration-color .3s;
	}
.box_sl .sl_index a:focus-visible{
	color: var(--rose);
	text-decoration-color: var(--rose);
	}
@media (hover: hover){
	.box_sl .sl_index a:hover{
	color: var(--rose);
	text-decoration-color: var(--rose);
	}
}

/* ---------- 見出し(英語タイトル+日本語の小さな補足) ---------- */
.box_sl h3{
	margin: 0 auto 0.5em;
	font-size: 2.7rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.2em;
	text-align: center;
	}
.box_sl h3 span{
	font-family: "Avenir","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Arial,sans-serif;
	display: block;
	margin-top: 0.4em;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 2em;
	}
.box_sl .tx{
	font-size: 0.95rem;
	line-height: 2.3em;
	letter-spacing: 0.07em;
	word-break: auto-phrase;
	line-break: strict;
	}

/* ---------- コンセプト ---------- */
.box_sl .sl_concept{
	padding: 8em 8% 4em;
	text-align: center;
	scroll-margin-top: 5em;
	}
.box_sl .sl_lead{
	margin: 0 0 2em;
	font-size: 1.25rem;
	letter-spacing: 0.12em;
	line-height: 2em;
	}

/* =========================================================
   空間(エディトリアル風・写真3枚)
   20カラム(1列=5%・列の間隔なし)に (a)大・(b)縦長・(c)小 をずらして置く
   余白は「空き列」で作るので、位置は列番号だけで調整できる
   ========================================================= */
.box_sl .sl_space{
	padding: 9em 8%;
	scroll-margin-top: 5em;
	}
.box_sl .sl_space h3{
	margin-bottom: clamp(70px, 9vw, 130px);
	}
.box_sl .sl_board{
	display: grid;
	grid-template-columns: repeat(20, 1fr);
	column-gap: 0;
	row-gap: clamp(40px, 5vw, 80px);
	max-width: 1240px;
	margin: 0 auto;
	}

/* 配置(PC)
   (a) 左上・大      :左から60%(1〜12列)。1段目と2段目にまたがる
   導入文 右上       :右の30%(15〜20列)。12〜14列は空けて余白にする
   (b) 右・縦長      :導入文の下(2段目)、右の30%
   結び 左下         :2段目の下端に揃える。(a)の写真の下、(b)のキャプションと同じ高さあたり
   (c) 下・小        :3段目、30〜50%(7〜10列)の中央寄り */
.box_sl .fa{ grid-column: 1 / 13; grid-row: 1 / 3; }
.box_sl .sl_intro{ grid-column: 15 / 21; grid-row: 1; align-self: start; max-width: 19em; }
.box_sl .fb{ grid-column: 15 / 21; grid-row: 2; align-self: start; }
.box_sl .sl_closing{ grid-column: 1 / 8; grid-row: 2; align-self: end; }
.box_sl .fc{ grid-column: 7 / 11; grid-row: 3; }

/* 写真 */
.box_sl .sl_fig{
	margin: 0;
	}
.box_sl .sl_ph{
	position: relative;
	background: var(--stone);
	overflow: hidden;
	}
.box_sl .fa .sl_ph{ aspect-ratio: 5 / 3.5; }
.box_sl .fb .sl_ph{ aspect-ratio: 4 / 5; }
.box_sl .fc .sl_ph{ aspect-ratio: 4 / 5; }
.box_sl .sl_ph img{
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	}
/* 切り抜き位置(左右 上下)。写真を差し替えたらここで調整 */
.box_sl .fa .sl_ph img{ object-position: center center; } /* 木の壁と鏡 */
.box_sl .fb .sl_ph img{ object-position: 15% center; }  /* 窓とセット面 */
.box_sl .fc .sl_ph img{ object-position: 78% center; }  /* 椅子と影 */

/* 画像が未設置のときだけ見えるメモ */
.box_sl .sl_ph span{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px 12px;
	font-size: 11px;
	color: var(--sub);
	}

/* 写真の下の英文(コンセプトの英訳を散りばめる) */
.box_sl .sl_fig figcaption{
	margin-top: 1.1em;
	font-family: "Avenir","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Arial,sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.03em;
	line-height: 1.8em;
	color: var(--sub);
	font-weight: 400;
	}
.box_sl .fb figcaption{
	text-align: right;
	}

/* 導入文 */
.box_sl .sl_intro{
	margin: 0;
	font-size: 0.9rem;
	letter-spacing: 0.07em;
	line-height: 2.2em;
	word-break: auto-phrase;
	line-break: strict;
	}

/* 結び(参考の手書き文字の代わりに、細いイタリック) */
.box_sl .sl_closing{
	margin: 0;
	font-family: "Cormorant Garamond","adobe-garamond-pro",serif;
	font-style: italic;
	font-size: 1.2rem;
	letter-spacing: 0.02em;
	line-height: 1.7em;
	color: var(--ink);
	}

/* =========================================================
   営業時間・アクセス
   ========================================================= */
.box_sl .sl_info{
	padding: 9em 8%;
	background: var(--tint);
	scroll-margin-top: 5em;
	}
.box_sl .sl_dl{
	max-width: 780px;
	margin: 4em auto 0;
	}
.box_sl .sl_dl > div{
	display: grid;
	grid-template-columns: 10em 1fr;
	gap: 0 2em;
	padding: 1.6em 0;
	border-top: 1px solid var(--line);
	}
.box_sl .sl_dl > div:last-child{
	border-bottom: 1px solid var(--line);
	}
.box_sl .sl_dl dt{
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	line-height: 2em;
	color: var(--sub);
	}
.box_sl .sl_dl dd{
	font-family: "Avenir", "aktiv-grotesk", "Hiragino Kaku Gothic ProN", "HiraKakuPro-W3", sans-serif;
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	line-height: 1.9em;
	word-break: auto-phrase;
	line-break: strict;
	}
.box_sl .sl_dl dd a{
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: rgba(79,74,76,.3);
	text-underline-offset: 0.4em;
	}
.box_sl .sl_dl dd small{
	font-size: 0.75rem;
	color: var(--sub);
	}
.box_sl .sl_map{
	max-width: 780px;
	margin: 4em auto 0;
	aspect-ratio: 16 / 8;
	}
.box_sl .sl_map iframe{
	display: block;
	width: 100%;
	height: 100%;
	filter: grayscale(100%);
	}
.box_sl .sl_info .sl_links{
	max-width: 780px;
	margin: 1em auto 0;
	justify-content: flex-end;
	}

/* =========================================================
   ご予約
   ========================================================= */
.box_sl .sl_reserve{
	padding: 9em 8%;
	text-align: center;
	scroll-margin-top: 5em;
	}
.box_sl .sl_msg{
	margin: 2.4em 0 0;
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	line-height: 2.4em;
	word-break: auto-phrase;
	line-break: strict;
	}
.box_sl .sl_reserve .sl_links{
	justify-content: center;
	margin-top: 3em;
	}

/* ---------- リンク(AROMA HEAD SPAの btn2 と同じ) ---------- */
.box_sl .sl_links{
	display: flex;
	flex-wrap: wrap;
	gap: 0 2em;
	}
.box_sl .btn2{
	font-family: "Avenir", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Arial, sans-serif;
	font-size: 0.9rem;
	font-weight: 300;
	margin: 1em 0 0 0;
	position: relative;
	display: inline-block;
	}
.box_sl .btn2 a{
	color: var(--ink);
	}
.box_sl .btn2::after{
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: var(--ink);
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform .3s;
	}
.box_sl .btn2:hover::after{
	transform-origin: left top;
	transform: scale(1, 1);
	}
.box_sl .btn2 i{
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.35em;
	vertical-align: -0.04em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M1.5 10.5L10.5 1.5M3.5 1.5h7v7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M1.5 10.5L10.5 1.5M3.5 1.5h7v7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .3s var(--ease);
	}
.box_sl .btn2:hover i{
	transform: translate(2px, -2px);
	}

/* ================= 動き・レスポンシブ ================= */
/* 表示アニメーション(amt-2)の「動きを減らす」対応は anime.css 側にあります */
@media (prefers-reduced-motion: reduce){
	.box_sl .btn2::after,
	.box_sl .btn2 i,
	.box_sl .sl_index a{ transition: none; }
	}

/*-------------------------------------------------------------------------- iPad ---*/
@media screen and (max-width : 1180px)  {
	.box_sl .sl_dl > div{
	grid-template-columns: 8em 1fr;
	}
}

/*-------------------------------------------------------------------- SP ---*/
@media screen and (max-width : 768px)  {
	.box_sl .sl_head{
	padding: 21% 7% 10%;
	}
	.box_sl .sl_catch{
	margin-top: 1em;
	font-size: 1.05rem;
	}
	/* ページ内メニュー:4項目なので横スクロールにせず、中央揃えで折り返す */
	.box_sl .sl_index{
	gap: 0.6em 1.8em;
	margin-top: 2.5em;
	font-size: 0.8rem;
	}

	.box_sl h3{
	font-size: 2em;
	}
	.box_sl h3 span{
	font-size: 0.65rem;
	}
	.box_sl .tx{
	font-size: 0.75rem;
	line-height: 2.2em;
	}
	.box_sl .sl_lead{
	font-size: 0.95rem;
	margin-bottom: 1.4em;
	}
	.box_sl .sl_concept{
	padding: 4em 7% 2em;
	scroll-margin-top: 3em;
	}

	/* 空間:縦一列。写真の幅と寄せを1枚ずつ変える */
	.box_sl .sl_space{
	padding: 5em 7%;
	scroll-margin-top: 3em;
	}
	.box_sl .sl_space h3{
	margin-bottom: 50px;
	}
	.box_sl .sl_board{
	display: flex;
	flex-direction: column;
	gap: 0;
	}
	.box_sl .fa{ order: 1; width: 100%; }
	.box_sl .sl_intro{ order: 2; margin: 2.4em 0 0; font-size: 0.8rem; max-width: none; }
	.box_sl .fb{ order: 3; width: 70%; align-self: flex-end; margin-top: 5em; }
	.box_sl .fc{ order: 4; width: 52%; margin-top: 5em; margin-left: 2%; }
	.box_sl .sl_closing{ order: 5; margin-top: 4em; font-size: 0.9rem; }

	/* 営業時間・アクセス */
	.box_sl .sl_info{
	padding: 5em 7%;
	scroll-margin-top: 3em;
	}
	.box_sl .sl_dl{
	margin-top: 2.5em;
	}
	.box_sl .sl_dl > div{
	grid-template-columns: 1fr;
	gap: 0.2em;
	padding: 1.2em 0;
	}
	.box_sl .sl_dl dt{
	font-size: 0.72rem;
	}
	.box_sl .sl_dl dd{
	font-size: 0.7rem;
	}
	.box_sl .sl_map{
	margin-top: 2.5em;
	aspect-ratio: 4 / 3;
	}

	/* ご予約 */
	.box_sl .sl_reserve{
	padding: 5em 7%;
	scroll-margin-top: 3em;
	}
	.box_sl .sl_msg{
	font-size: 0.78rem;
	}
	/* 予約リンク:中央に縦一列で並べる */
	.box_sl .sl_reserve .sl_links{
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	margin-top: 2.4em;
	}
	.box_sl .btn2{
	font-size: 0.8rem;
	}
}