@charset "UTF-8";
/*
 * site-chrome.css
 * beauty-park.jp 模倣ヘッダー/フッターのスタイル。
 * すべて #masthead / #colophon / #bp-drawer / #bp-overlay 配下にスコープし、
 * SWELL本体・投稿本文・既存 style.css に影響しないようにしている。
 * 画像は swell_child/images/bp/ を参照。
 * ブレークポイント：960px（PC ⇔ SP 切替）。
 */

/* ============================================================
 * 共通ユーティリティ（スコープ内のみ）
 * ============================================================ */
#masthead .cf::after,
#masthead .clearfix::after,
#colophon .cf::after { content: ""; display: block; clear: both; }

/* フォント：ヘッダー/フッター/ドロワーは元サイトと同じMeiryo系に統一 */
#masthead, #colophon, #bp-drawer {
	font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* box-sizing：出自に合わせる（PCヘッダー=content-box / SP・ドロワー・フッター=border-box） */
#masthead .bp-pc-header,
#masthead .bp-pc-header * { box-sizing: content-box; }
#masthead .bp-sp-header,
#masthead .bp-sp-header *,
#colophon, #colophon *,
#bp-drawer, #bp-drawer *,
#bp-overlay { box-sizing: border-box; }

/* ------------------------------------------------------------
 * 元サイト top.css のリセットをスコープ移植。
 * `#masthead *`（specificity=ID付き）はSWELLのクラス/要素グローバル指定に
 * 詰specificityで勝つため、「明示していないプロパティがSWELL値で出る」漏れを根絶する。
 * 個別ルール（枠線・背景・余白）はこの後でより高いspecificityで上書きされる。
 * ------------------------------------------------------------ */
#masthead *,
#colophon *,
#bp-drawer * {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	vertical-align: baseline;
	background: transparent;
	border: 0;
	outline: 0;
	letter-spacing: normal;
	text-shadow: none;
	border-radius: 0;
	min-height: 0;
	min-width: 0;
}
#masthead ul, #colophon ul, #bp-drawer ul,
#masthead ol, #colophon ol, #bp-drawer ol { list-style: none; }
/* リンクは親の太さを継承（本番のリセットは a を含まないため）。リセットの normal を打ち消す。 */
#masthead a, #colophon a, #bp-drawer a { color: inherit; text-decoration: none; font-weight: inherit; }
#masthead img, #colophon img, #bp-drawer img { max-width: none; }

/* SWELLがグローバルに全<a>へ付与する装飾を打ち消す
 * （a{overflow:hidden;position:relative;transition;z-index} / a:hover{transform:translateY(2px);background:gray}）
 * これらは元サイトに無く、ヘッダー/フッターの見た目・hover挙動をずらす原因。 */
#masthead a, #colophon a, #bp-drawer a {
	overflow: visible;
	transition: none;
	transform: none;
	z-index: auto;
}
#masthead a:hover, #colophon a:hover, #bp-drawer a:hover {
	transform: none;
	background-color: transparent;
}

/* ============================================================
 * PCヘッダー（#head 相当）— 元 top.css を忠実移植
 *   基準: 13px(=81.3%) / 行間1.231 / content-box
 * ============================================================ */
#masthead { font-size: 13px; line-height: 1.231; color: #2b2827; }

#masthead .bp-pc-header {
	width: 1000px;
	margin: 0 auto 12px;
	position: relative;
	min-height: 110px;
	font-size: 13px; /* %指定の親基準を明示（元サイト body=81.3%≒13px）。子の93%/77%等はこの13pxから算出 */
}

/* フォーム要素：SWELLの装飾（余白・高さ・矢印）を打ち消し、元のネイティブ見た目へ */
#masthead .bp-pc-header input,
#masthead .bp-pc-header select,
#masthead .bp-pc-header button {
	font-family: inherit;
	line-height: normal;
	box-shadow: none;
	min-height: 0;
}
#masthead .bp-pc-header select { -webkit-appearance: auto; appearance: auto; }

#masthead #head-h1 {
	font-size: 93%;
	height: 24px;
	line-height: 2.2em;
	overflow: hidden;
	font-weight: normal;
	margin: 0;
}

#masthead #h-nav {
	font-size: 93%;
	position: absolute;
	right: 0;
	top: 23px;
	text-align: right;
}
#masthead #head-login { float: right; }
#masthead .head-login-li {
	float: left;
	height: 26px;
	line-height: 28px;
	padding: 0 20px;
	margin-left: 5px;
	font-weight: bold;
	background: #fff;
	border: 1px solid #2c2827;
	border-radius: 3px;
}
#masthead .head-login-li:hover { background: #e8efe8; border-color: #9dbda6; }
#masthead .head-login-li a { display: block; text-decoration: none; color: #000; }
#masthead a.h_login_kojin {
	background: url(../../images/bp/h_nav_kojin.png) no-repeat 2px 0.6em;
	padding-left: 18px;
}
#masthead a.h_login_shop {
	background: url(../../images/bp/h_nav_shop.png) no-repeat 2px 0.6em;
	padding-left: 18px;
}

#masthead #head-logo {
	height: 57px;
	position: relative;
	top: 20px;
	width: 250px;
	text-align: center;
	margin-top: 3px;
}
#masthead #head-logo a { text-decoration: none; display: inline-block; }
#masthead #head-logo img { vertical-align: bottom; }
#masthead .head-shopnum__top { display: block; font-size: 11px; margin-top: 3px; }

#masthead #etc {
	height: 20px;
	position: absolute;
	top: 28px;
	right: 295px;
}
#masthead .sns-li { float: left; margin-left: 10px; }
#masthead .sns-x a {
	display: inline-block;
	background: #0f1419;
	border-radius: 5px;
	padding: 0 10px;
	height: 21px;
	line-height: 22px;
	color: #fff;
	font-size: 10.1px; /* 本番の横幅に合わせて実測調整 */
	text-decoration: none;
}
#masthead .sns-x a:hover { opacity: 1; }
#masthead .sns-x img { display: inline-block; width: 10px; height: auto; vertical-align: middle; margin-right: 5px; }

#masthead #h-nav-ad {
	font-size: 88%;
	position: absolute;
	right: 0;
	top: 65px;
	text-align: right;
}
#masthead .head-about-li { float: right; padding: 0 5px; }
#masthead .head-about-li .ar {
	background: url(../../images/bp/triangle.png) no-repeat 0 3px;
	line-height: 1.6;
	padding-left: 12px;
}

/* フリーワード検索（#search-freeword）— 元 top.css を再現。
 * 省いた冗長指定：ベンダープレフィックス、空ルール(.select-genre input)、
 * 未使用ルール(.submit-btn)、リセットで足りる margin/outline/padding、
 * flexで無効な float、スコープで効く font-family。 */
#masthead #search-freeword {
	height: 26px;
	float: right;
	margin: 4px 0 8px 0;
}
#masthead #search-freeword fieldset { display: flex; }
#masthead #search-freeword .select-genre {
	height: 24px; /* content-box＋上下border2px ＝ 総高さ26px（input/検索ボタンと面一）。元の26px指定だと28pxになる */
	padding: 0 6px;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #fafaf8;
	font-size: 12.1px; /* 本番ぴったり（93%＝12.1px） */
	font-family: revert; /* 本番のselectは親フォントを継承せずブラウザ標準フォント。SWELL/私のMeiryo継承を打ち消す */
}
#masthead #search-freeword .input-txt {
	/* 本番は width:220px + position:relative;left:7px で検索ボタンに7px重ねている。
	 * こちらは重ねず margin-left:7px にしたため、その分 width を詰めて見た目を合わせる。 */
	width: 213px;
	height: 14px;
	padding: 5px 6px;
	border: 1px solid #ddd;
	border-right: none;
	border-radius: 3px;
	font-size: 93%;
	margin-left: 7px;
}
#masthead #search-freeword .input-txt::placeholder { color: #ddd; }
#masthead .submit-freeword-btn {
	width: 56px;
	height: 26px;
	border: none;
	border-radius: 0 3px 3px 0;
	background-color: #9dbda6;
	background-image: url(../../images/bp/btn_etc-search-submit.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	cursor: pointer;
}
#masthead .submit-freeword-btn:hover { opacity: 0.7; }
#masthead #search-freeword .button-location { display: block; margin-left: 5px; }
#masthead #search-freeword .button-location a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 26px;        /* 検索バー(input/select/submit)と同じ高さに固定。height:100%の解決揺れを防ぐ */
	padding: 0 8px;
	color: #fff;
	background: #9dbda6;
	border-radius: 3px;
	text-decoration: none;
	white-space: nowrap;
}
/* 現在地アイコンは Font Awesome（fa-map-marker）。元サイトと同じ。 */
#masthead #search-freeword .button-location i { margin-right: 5px; vertical-align: 0.1em; }

#masthead #g-nav {
	clear: both;
	margin: 15px 0 0;
	overflow: hidden;
	width: 100%;
	border-left: dotted 1px #000;
}
#masthead .g-nav-li {
	float: left;
	width: 151px;
	height: 40px;
	padding: 0 4px;
	border-right: dotted 1px #000;
	font-size: 93%;
	text-align: center;
}
#masthead .g-nav-li:nth-child(3) { width: 190px; }
#masthead .g-nav-a {
	display: inline-block;
	width: 100%;
	height: 28px;
	line-height: 14px;
	padding: 6px 0;
	letter-spacing: .2em;
	color: #000;
	font-weight: bold;
	font-family: "Meiryo UI", "candara", "メイリオ", Meiryo, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	font-feature-settings: "palt";
}
#masthead .g-nav-a.current { background: url(../../images/bp/g-nav_current.png) repeat; }
#masthead .g-nav-a:hover { background: url(../../images/bp/g-nav_hover.png) repeat; text-decoration: none; }
/* eng（英字サブ）だけピンポイントで px 指定（他の文字サイズには影響しない）。 */
#masthead .g-nav-li .eng { display: block; font-size: 10px; font-weight: normal; letter-spacing: .1em; }

/* ============================================================
 * SPヘッダー（.sp-header-inner 相当） — PCでは非表示
 * ============================================================ */
#masthead .bp-sp-header { display: none; }

#masthead .sp-header-inner {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 55px;
	background-color: rgba(255,255,255,.9);
	border-bottom: solid 2px #2c2827;
	box-shadow: 0 1px 4px rgba(0,0,0,.2);
	z-index: 10000;
	font-size: 14px;   /* 本番SPの基準（PCの13pxではなくSPは14px） */
	line-height: 1.6;  /* 本番SPの基準行間。「ジャンルを指定」行の高さがこれで合う */
}
#masthead .sp-header-inner .logo {
	position: absolute;
	top: 10px; left: 40px;
	width: 22px; height: 22px;
	margin: 0;
}
#masthead .sp-header-inner .logo a { display: block; height: 100%; }
#masthead .sp-header-inner .logo img { width: auto; height: 100%; vertical-align: middle; }
#masthead .sp-header-inner .button-location { margin: 0; }
#masthead .sp-header-inner .button-location a {
	display: block;
	position: absolute;
	top: 10px; left: 70px;
	width: 22px; height: 22px;
	color: #9dbda6;
	text-align: center;
}
#masthead .sp-header-inner .button-location svg { width: auto; height: 21px; }
#masthead .sp-header-inner .search-form { display: block; padding: 9px 5px 5px 100px; margin: 0; }
#masthead .sp-header-inner .search-form .form-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	position: relative;
}
#masthead .sp-header-inner .search-form input[type=text] {
	border: solid 1px #9dbda6;
	font-size: 11px;
	height: 24px;
	width: calc(100% - 40px);
	border-radius: 40px 0 0 40px;
	padding: 0 5px 0 10px;
	max-width: 300px;
	margin: 0 0 0 auto;
}
#masthead .sp-header-inner .search-form button {
	display: block;
	width: 40px; height: 24px;
	text-align: center;
	padding: 2px;
	margin: 0;
	background: #9dbda6;
	border: solid 1px #9dbda6;
	border-left: none;
	color: #fff;
	border-radius: 0 40px 40px 0;
	cursor: pointer;
}
#masthead .sp-header-inner .search-form button svg { width: auto; height: 16px; vertical-align: top; }
#masthead .sp-header-inner .search-form .open-select-genre {
	width: 100%;
	font-size: 11px;
	text-align: right;
	padding: 3px 5px;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
}
#masthead .sp-header-inner .search-form .open-select-genre svg { width: auto; height: 9px; margin-left: 5px; vertical-align: middle; }
#masthead .sp-header-inner .search-form .select-genre {
	display: none;
	position: absolute;
	top: 40px; right: 0;
	width: 95vw;
	max-width: 300px;
	background: #fff;
	border: solid 1px #9dbda6;
	overflow: hidden;
	z-index: 5;
}
#masthead .sp-header-inner .search-form .select-genre.is-open { display: block; }
#masthead .sp-header-inner .search-form .select-genre ul { display: flex; flex-wrap: wrap; }
#masthead .sp-header-inner .search-form .select-genre ul li {
	width: 50%;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}
#masthead .sp-header-inner .search-form .select-genre ul li:nth-child(2n) { border-right: none; }
#masthead .sp-header-inner .search-form .select-genre ul li:nth-child(5),
#masthead .sp-header-inner .search-form .select-genre ul li:nth-child(6) { border-bottom: none; }
#masthead .sp-header-inner .search-form .select-genre label {
	display: block;
	font-size: 12px;
	font-weight: normal;
	padding: 5px 10px;
	margin: 0;
	white-space: nowrap;
}
/* ラジオとテキストの間隔：私のリセット *{margin:0} で消えるため、本番実測値 0 4px 0 0 を復元（右4pxの隙間のみ）。
 * vertical-align:middle で文字と縦中央そろえ（リセットの baseline だと上寄りになる）。 */
#masthead .sp-header-inner .search-form .select-genre input { margin: 0 4px 0 0; vertical-align: middle; }

/* ハンバーガートリガー */
#masthead .spnavtrigger {
	width: 30px; height: 30px;
	position: absolute;
	z-index: 1000;
	left: 7px; top: 7px;
	cursor: pointer;
}
#masthead .spnavtrigger__main {
	position: absolute;
	top: 4px; left: 4px;
	width: 20px; height: 20px;
}
#masthead .spnavtrigger__main span {
	position: absolute;
	left: 0;
	width: 100%; height: 4px;
	background-color: #333;
	border-radius: 4px;
}
#masthead .spnavtrigger__main,
#masthead .spnavtrigger__main span { display: inline-block; transition: all .4s; box-sizing: border-box; }
#masthead .spnavtrigger__main span:nth-of-type(1) { top: 0; }
#masthead .spnavtrigger__main span:nth-of-type(2) { top: 8px; }
#masthead .spnavtrigger__main span:nth-of-type(3) { bottom: 0; }
/* オープン時（body.bp-drawer-open） */
body.bp-drawer-open #masthead .spnavtrigger__main span:nth-of-type(1) { transform: translateY(8px) rotate(-45deg); }
body.bp-drawer-open #masthead .spnavtrigger__main span:nth-of-type(2) { opacity: 0; }
body.bp-drawer-open #masthead .spnavtrigger__main span:nth-of-type(3) { transform: translateY(-8px) rotate(45deg); }

/* ============================================================
 * オフキャンバスメニュー（ページプッシュ型：本家 sp-slidemenu.js 再現）
 * 挙動：メニュー本体はスライドせず「ポン」と即時表示（トランジション無し）。
 *       背面のページ本体(#main)だけが translateX(メニュー幅80%) で
 *       右へ 300ms ease-in-out スライドして動く。暗幕オーバーレイは無し。
 * 当テーマでは #body_wrap をページ本体とし、#bp-drawer / #masthead は JS で
 * <body> 直下へ退避（#body_wrap の transform で一緒に動くのを防ぐ）。
 * 開閉アニメーションの主処理は @media(max-width:959px) の #body_wrap 側に置く。
 * ============================================================ */
/* メニュー本体：左に固定。ページ(#body_wrap)より前面に置き、開いたら即時表示（ポン）。
 * 固定ヘッダー(.sp-header-inner z-index:10000)より下に重ねる。transition を持たせない。 */
#bp-drawer {
	position: fixed;
	top: 0; left: 0;
	width: 80%;
	height: 100%;
	background: #fff;
	padding-top: 55px;
	visibility: hidden;
	overflow: hidden;
	z-index: 9990;   /* ページ本体より前面・固定ヘッダー(10000)より背面。スライドせず即時表示 */
	box-shadow: rgba(0,0,0,.5) -2px 2px 8px -3px inset;
}
/* 本家は暗幕オーバーレイを持たないため未使用 */
#bp-overlay { display: none; }

#bp-drawer #select-salon-nav .inner {
	height: calc(100vh - 55px);
	overflow-y: auto;
	padding: 10px;
}
#bp-drawer .buttons { margin-bottom: 20px; }
#bp-drawer .buttons li { margin: 0 0 5px 0; }
#bp-drawer .buttons li a {
	display: block;
	position: relative;
	height: 40px;
	line-height: 40px;
	font-size: 13px;
	border-radius: 20px;
	color: #fff;
	text-align: center;
	text-decoration: none;
}
#bp-drawer .buttons li a span { font-size: 80%; }
#bp-drawer .buttons li a .icon {
	width: 18px; height: 18px;
	position: absolute;
	left: 15px; top: calc(50% - 9px);
	fill: #fff;
}
#bp-drawer .buttons li.login a { background-color: #9cbea5; }
#bp-drawer .buttons li.regist a { background-color: #6b6461; }

#bp-drawer .search { padding-top: 20px; margin-top: 20px; border-top: solid 1px #ddd; }
#bp-drawer .search .title { margin: 0; color: #000; font-size: 14px; margin-bottom: 10px; }
#bp-drawer .search .caption { margin: 0; color: #000; font-size: 12px; }
#bp-drawer .search select {
	border: solid 1px #9dbda6;
	position: relative;
	appearance: auto;
	display: block;
	color: #000;
	width: 100%;
	border-radius: 15px;
	padding: 5px;
	margin-bottom: 10px;
}
#bp-drawer .search .input { width: 100%; display: flex; margin-bottom: 5px; }
#bp-drawer .search input[name=q] {
	padding: 8px;
	border: solid 1px #9dbda6;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	height: 40px;
	width: 80%;
	color: #000;
}
#bp-drawer .search input[type=submit] {
	width: 20%;
	color: #fff;
	border: solid 1px #9dbda6;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	background: url(../../images/bp/search-icon-white.png) no-repeat center center #9dbda6;
	background-size: 35%;
	height: 40px;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	cursor: pointer;
}
#bp-drawer .search input:focus,
#bp-drawer .search select:focus { outline: none; }

#bp-drawer .link {
	padding-top: 20px;
	margin-top: 20px;
	border-top: solid 1px #ddd;
	font-size: 14px;
}
#bp-drawer .link:last-child { padding-bottom: 100px; }
#bp-drawer .link li { margin: 0 0 10px 0; }
#bp-drawer .link li a { text-decoration: none; }
/* 「近くのサロンを探す/現在地から探す」は本家どおり .buttons.link（.buttons と .link の
 * カスケードで成立）。独自の上書きは置かず、ピンは .buttons li a .icon（18px）が効く。 */

/* ============================================================
 * フッター（#foot / .footer-contents / .footer-link）
 * 元サイト top.css（リセット＋#foot/#to-top/#copyright）と
 * style.css（.footer-link*/.footer-contents*）の値を忠実移植。
 *   基準: body=81.3%/1.231 ≒ 13px。SWELLの本文基準に依存しないよう
 *   #colophon に絶対値 13px を与え、元サイトの実寸を再現する。
 * ============================================================ */
#colophon { font-size: 13px; line-height: 1.231; color: #2b2827; }
/* 元 top.css: a{color:#000} / footerリンクhoverは下線（style.css） */
#colophon a { color: #000; text-decoration: none; }
#colophon a:hover { text-decoration: underline; }

/* TO-TOP（#foot の外・本文背景の上、幅1000px・右寄せ） */
#colophon #to-top { margin: 0 auto; width: 1000px; text-align: right; }
#colophon .to-top-a { font-size: 93%; color: #000; text-decoration: none; }
#colophon a.to-top-a:hover { color: #f694ba; text-decoration: none; }

/* FOOT 本体（薄グレー帯・最小幅1000px） */
#colophon #foot { min-width: 1000px; background: #f7f7f4; margin-top: 50px; }
#colophon #foot-in { width: 1000px; margin: 0 auto; font-size: 85%; }
/* 元サイト #copyright は font-size 指定なし → #foot←body(81.3%≒13px) を継承。
 * SWELL の p / .site-footer 系ルールに負けないよう 13px を明示。 */
#colophon #copyright { text-align: center; padding: 15px 0; margin: 0; color: #fff; background-color: #2b2827; font-size: 13px; line-height: 1.231; font-weight: normal; }

/* フッターバナー（.footer-contents）— style.css 移植 */
#colophon .footer-contents { background: #fef6f9; padding: 50px 0; margin-top: 30px; }
#colophon .footer-contents .inner { width: 100%; max-width: 1000px; margin: 0 auto; font-size: 85%; }
#colophon .footer-contents ul.navi { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
#colophon .footer-contents ul.navi > li { width: calc(100% / 4 - 20px); max-width: 220px; margin: 10px 10px; }
#colophon .footer-contents ul.navi > li a { display: block; transition: all 200ms 0s ease; }
#colophon .footer-contents ul.navi > li a:hover { opacity: 0.7; }
#colophon .footer-contents ul.navi > li img { width: 100%; height: auto; vertical-align: bottom; }

/* フッターリンク（.footer-link）— style.css 移植。
 * 各ブロックは縦積み、リンクは inline-block を「 | 」区切りで横流し。 */
#colophon .footer-link { margin: 20px; font-size: 13px; }
#colophon .footer-link .footer-link-block { margin-bottom: 10px; }
#colophon .footer-link .footer-link-block h2 {
	background: url(../../images/bp/triangle.png) 0 50% / 5px auto no-repeat;
	padding: 2px 0 0 12px;
	margin-bottom: 5px;
	line-height: 1.3;
}
/* 行間の本命は ul の line-height（ストラット）。SWELLの body 1.6 を拾わないよう明示pinする。
 * これで本番（li=1.3が支配, 行≈16.9px）と一致する。 */
#colophon .footer-link .footer-link-block ul { margin-bottom: 10px; line-height: 1.3; }
#colophon .footer-link .footer-link-block li { display: inline-block; margin-bottom: 3px; line-height: 1.3; }
#colophon .footer-link .footer-link-block li::after { content: ' | '; }
#colophon .footer-link .footer-link-block li:last-child::after { content: none; }
#colophon .footer-link .footer-link-block li a { display: inline-block; text-decoration: none; line-height: 1.3; }
#colophon .footer-link .footer-link-block li a:hover { text-decoration: underline; }
#colophon .footer-link .footer-link-block li span { display: inline-block; font-weight: bold; line-height: 1.3; }
#colophon .footer-link .footer-privacy { text-align: right; }
/* Pマーク画像はinline(baseline)だと下にディセンダ分の隙間ができ、コンテナが画像より高くなる。
 * vertical-align:bottom で隙間を消して画像ピッタリにする。 */
#colophon .footer-link .footer-privacy img { vertical-align: bottom; }

/* ============================================================
 * レスポンシブ：960px未満で SP表示へ切替
 * ============================================================ */
@media (max-width: 959px) {
	/* PCヘッダーを隠し、SPヘッダーを表示 */
	#masthead .bp-pc-header { display: none; }
	#masthead .bp-sp-header { display: block; }

	/* 固定SPヘッダー分のオフセット＋ページプッシュの土台。
	 * #body_wrap を前面(z-index:2)・白地にし、開いたら右へスライドさせて背面のメニューを露出。
	 * fixed な .bp-sp-header も #body_wrap の transform で一緒に動く（変形ancestorが包含ブロックになる）＝本家挙動。 */
	#body_wrap {
		padding-top: 55px;
		position: relative;
		z-index: 2;
		background-color: #fff;
		min-height: 100vh;
		transition: transform .3s ease-in-out;
	}
	/* #body_wrap が右へ80%動くと右端がはみ出して横スクロール（幅が伸びる）が出るため、
	 * 本家同様 html・body 両方を overflow:hidden で抑える（横方向のはみ出しを切る）。 */
	html:has(body.bp-drawer-open),
	body.bp-drawer-open { overflow: hidden; }
	body.bp-drawer-open #body_wrap { transform: translateX(80%); }
	body.bp-drawer-open #bp-drawer { visibility: visible; }

	/* 本番SPは top.css を読まない＝#foot-in/#to-top に幅指定なし（素の全幅、内側余白は .footer-link の margin:20px のみ）。
	 * 私が足していた padding:0 10px を外し、本番と同じ折り返し幅にする（都道府県の行数が一致）。 */
	#colophon #foot { min-width: 0; }
	#colophon #foot-in { width: 100%; padding: 0; }
	#colophon #to-top { width: 100%; padding: 0 10px; }

	/* 本番SPフッターは白背景＝グレー帯(#foot)なし／コピーライトも黒帯なし（中央・濃色テキスト）。
	 * PC用の #foot 背景・#copyright 黒帯を SP では解除し、フッター地を本番と同じ純白(255)にする。 */
	#colophon { background-color: #fff; }
	#colophon #foot { background: transparent; margin-top: 0; }
	#colophon #copyright { background-color: transparent; color: #2b2827; }

	/* SPの基準フォント＝本番SP body（Arial系）。Windowsでは日本語はメイリオに解決＝実質同等、Latinは本番と一致。 */
	#masthead .bp-sp-header, #colophon {
		font-family: Arial, "HelveticaNeue", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	}
	/* SPフッターリンクの行間は本番body 1.6（ul のストラットが行高を支配） */
	#colophon .footer-link .footer-link-block ul { line-height: 1.6; }
}

/* SNS（#sns）は本家同様、SP（768px以下）でのみ表示。PCでは非表示。
 * 本番は fb いいね＋Xポストを1行に並べ、XはPCヘッダーと同じ黒ボタン（実測準拠）。 */
#colophon #sns .genre-top-sns { display: none; }
#colophon #sns .genre-top-sns li { display: inline-block; vertical-align: middle; margin: 0 5px; }
#colophon #sns .genre-top-sns .fb iframe { display: inline-block; vertical-align: middle; }
/* Xポスト＝黒角丸ボタン（本番SP実測：#0f1419 / radius5 / pad 0 10 / font9.8px / img10 / h20） */
#colophon #sns .genre-top-sns .x a {
	display: inline-block;
	background: #0f1419; color: #fff;
	padding: 0 10px; border-radius: 5px;
	height: 20px; line-height: 20px;
	font-size: 9.8px; text-decoration: none;
}
#colophon #sns .genre-top-sns .x a:hover { opacity: 0.85; text-decoration: none; }
#colophon #sns .genre-top-sns .x img { width: 10px; height: auto; vertical-align: middle; margin-right: 5px; }

/* 元 style.css 同様、バナーは 768px 以下で 2 列（padding は本番SP同様 50px のまま維持） */
@media (max-width: 768px) {
	#colophon .footer-contents ul.navi > li { width: calc(100% / 2 - 20px); }

	/* SNS（Xポスト）をSPで表示。本家 #sns .genre-top-sns の挙動を再現。
	 * 本番SP基準(14px/1.6)で行高を合わせ、ul は左15pxインセット（本番 padding:0 15px）。 */
	#colophon #sns { padding: 0; font-size: 14px; line-height: 1.6; text-align: center; }
	#colophon #sns .genre-top-sns { display: block; padding: 0 15px; }

	/* コピーライト：本家SPは黒帯を解除し、下に100pxの余白（固定ボトムバー回避分）。
	 * PCの #2b2827 黒帯（line 550）を打ち消すため initial で戻す。 */
	#colophon #copyright {
		color: #2b2827;
		background-color: transparent;
		margin-bottom: 100px;
		padding: 15px;
		font-size: 12px; /* 本番SPは .copyright{font-size:1.2rem} だが SPのhtml=10pxで12px。SWELLはroot=3.6vwのためremが使えず、実寸12pxで固定 */
		line-height: 1.6; /* 本番SP body 1.6（19.2px） */
	}
}

@media (min-width: 960px) {
	/* PCでは確実にドロワー/オーバーレイを無効化 */
	#bp-drawer, #bp-overlay { display: none; }
}