@charset "UTF-8";

/*
 * 集客用の単発 LP `/pac/` の、両方の幅に効く上書き（Bug #8484）。
 *
 * ## なぜ要るのか
 *
 * 意匠の写し（`assets/pac/css/styles.css`）は移行元とバイト単位で同じで、編集しない
 * （`lead-lp-pac-pc.css` の冒頭）。ところが dev では、写しの外にあるテーマの共通の
 * 規則が 4 か所で写しに勝つか、写しと引き分けて並び順で負けている。直す前の測定
 * （CDP で勝っている規則を読んだ・`pa-verify-assets/B/8484-直す前-0925b/`）の結果である。
 *
 * | 差 | 勝っている規則 |
 * |---|---|
 * | 見出し 6 つ（`h2.hdl-ttl` 5 つと末尾の枠の `h2.ttl`）が黒でなく金 | `main.css` の `.entry-content h2, .page-content__body h2`（0,1,1）。写しは見出しに色を置かず、器 `.site-cont` の黒を受け継ぐ |
 * | 来店予約の押しボタンが 2 つ見える | 写しの `.index-contact .button a { display: flex }`（0,2,1）が、テーマの対を隠す `body .pa-reg18-link--sp.pa-reg18-link--sp`（0,2,1）と引き分け、後に読まれる写しが勝つ |
 * | 横送りに丸い印が出て、矢印が小さく端に寄る。携帯幅では矢印が消える | テーマの共通の横送り `legacy-slider.css`（`.slider.is-slider-ready …`・0,3,0）が、写しの slick の規則（0,1,0）に勝つ |
 * | BEFORE/AFTER の絵の下の字の行送りが 1.5 倍 | テーマの段落の規則が `p` に直に当たり、写しの包み `.about` の `line-height: 1` を受け継がない |
 * | 本文の段落 4 つずつの行送りが狭い（Bug #8490） | 同じくテーマの段落の規則が `p` に直に当たり、写しの包みの行送りを受け継がない |
 * | 導入と来店予約の区画が、幅 1440 で 60px・幅 375 で 30px ずつ高い（Bug #8508） | `main.css` の `:is(.entry-content, .page-content__body) .box:not(:has(~ .box))`（0,3,0）の下の外余白と、`.box` の上の外余白（0,2,0） |
 * | 導入の注記の `li` の行送りが狭い（Bug #8508） | テーマの規則が `li` に直に当たり、写しの `ul` の行送りを受け継がない |
 * | 携帯幅で本文とフッターのあいだが 20px 広い（Bug #8508） | `main.css` の `.page-content { padding-bottom: 20px }`（749px 以下）。移行元の `/sp/pac/` は本文の器 `#other_contents` を持たない |
 *
 * 移行元 `pac/js/script.js` の設定は、3 つの器とも `dots: false` である。矢印は
 * `#slider-mv` だけ `arrows: false` で、ほかの 2 つは出す。`#slider-ba` は
 * `centerMode: true`・`centerPadding: "25%"` で、767px 以下では `centerPadding: 0` になる。
 *
 * 🚨 **読む順は `lead-lp-pac-pc.css`・`lead-lp-pac-sp.css` の後ろである**
 * （`inc/lead-lp-pac.php`）。当たり先はどれも `.site-cont` を頭に付け、写しと共通の規則の
 * どちらより強くしてある。
 *
 * 🚨 **幅の境は 2 種類ある。**押しボタンの対は、テーマが対を出し分ける境（749px / 750px・
 * `main.css`）にそろえる。横送りの組みは、写しの境（767px / 768px）にそろえる。
 */

/* 見出しの色。写しと同じく器 `.site-cont` の字の色（黒）を受け継がせる。
   `body` を頭に付けて (0,1,2) にし、`main.css` の (0,1,1) に勝たせる. */
body .site-cont h2 {
	color: inherit;
}

/* BEFORE/AFTER の絵の下の「40代 女性」などの行送り。写しは包み `.about` に
   `line-height: 1` を置き（813〜818 行目・1488〜1493 行目）、中の `p` はそれを受け継ぐ。
   dev はテーマの段落の規則が `p` に直に当たり、1 行が 1.5 倍になる。器の高さが幅 1440 で
   10px・幅 375 で 7px 高くなり、器の高さで決まる矢印の縦の位置もずれていた（下見の実測）. */
.site-cont .index-ba .ba-slider .mv-img .about p {
	line-height: inherit;
}

/* 本文の段落の行送り（Bug #8490）。上の `.about p` と同じ型が、段落 4 つずつ（CONCEPT・
   BEFORE/AFTER・SERVICE・CUSTOMER REVIEWS の前置き）に両方の幅で出ていた。
   写しは段落に行送りを置かず、包み（`.common-intro` の 1.8235・`.intro-concept … > .txt` の
   1.7857 など）に置き、段落はそれを受け継ぐ。dev は `main.css` の素の `p`（696 行目）と
   `.entry-content p, .page-content__body p`（39907 行目・0,1,1）が段落に直に当たっていた
   （直す前の測定で CDP が読んだ・`pa-verify-assets/B/8490-直す前-0926/`）。

   `body` を頭に付けて (0,1,2) にし、テーマの (0,1,1) に勝たせる。🚨 **写しが段落に直に
   行送りを置く規則（`.index-reviews … .icon p { line-height: 1 }`・0,4,1 など）には負ける
   ので、そちらは写しのまま効く.** 上の `.about p` の規則は、この規則と同じ値になるが残す
   （下見は 2 つがそろった形で測った）. */
body .site-cont p {
	line-height: inherit;
}

/* 主画像の題と副題の見出し（Bug #9214）。写しは `.site-cont h2` に `margin: 0` を置く
   （247 行目・0,1,1）。dev はテーマの「絵 1 つだけの見出し」の打ち消し
   `.page-content__body :is(h2, …):has(> :is(img, picture):only-child)`（`main.css`・0,2,2）が勝ち、
   下に段落の間隔（`--pa-article-paragraph-gap`・749px 以下で 18px・それより広い幅で 25px）が
   付いていた。題の器は下端そろえ（`position: absolute`）なので、見出しの下の余白のぶん題と
   副題が上へずれる（直す前の実測・題の上端は幅 375 で 249・移行元 267、幅 1440 で 539.9・
   移行元 564.9）。

   /pac/ の中で絵 1 つだけを持つ見出しは、この 2 つの `h2.hdl`（主画像 2 枚ぶんで 4 つ）だけである
   （移行元の PC 版と SP 版の写しを数えた）。当たり先を主画像の中に絞り、(0,4,0) で勝たせる. */
.site-cont .index-mv :is(.mv-ttl, .mv-subttl) > .hdl {
	margin: 0;
}

/* 来店予約の押しボタンの対。テーマの隠す規則と同じ境で、見えないほうを隠す. */
@media (min-width: 750px) {
	.site-cont .index-contact .button a.pa-reg18-link--sp {
		display: none;
	}
}

@media (max-width: 749px) {
	.site-cont .index-contact .button a.pa-reg18-link--pc {
		display: none;
	}
}

/* 横送りの丸い印。移行元は 3 つの器とも出さない（`dots: false`）. */
.site-cont .slider.is-slider-ready .slick-dots {
	display: none;
}

/* 横送りの矢印。写しの `.slick-prev, .slick-next`（1146〜1165 行）の値へ戻す。
   矢印の形は写しの `::before`（金の矢印の絵）が描くので、共通の規則の背景の絵は消す. */
.site-cont .slider.is-slider-ready .slick-prev,
.site-cont .slider.is-slider-ready .slick-next {
	top: calc(50% - 20px);
	z-index: 3;
	display: block;
	width: 40px;
	height: 40px;
	background: #fff none;
	box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.4);
	transform: translate(0, -50%);
}

.site-cont .slider.is-slider-ready .slick-prev {
	left: 4.2017%;
}

.site-cont .slider.is-slider-ready .slick-next {
	right: 4.2017%;
}

/* 写しの 968 行目。上の `top` より後ろに置く（CUSTOMER REVIEWS の矢印だけ上寄せ）. */
.site-cont .index-reviews .reviews-slider .slider.is-slider-ready .slick-prev,
.site-cont .index-reviews .reviews-slider .slider.is-slider-ready .slick-next {
	top: 44px;
}

/* 主画像の横送りは矢印を出さない（`#slider-mv` は `arrows: false`）. */
.site-cont #slider-mv.is-slider-ready .slick-prev,
.site-cont #slider-mv.is-slider-ready .slick-next {
	display: none;
}

@media print, screen and (min-width: 768px) {

	/* 写しの 1719〜1733 行目. */
	.site-cont .slider.is-slider-ready .slick-prev,
	.site-cont .slider.is-slider-ready .slick-next {
		width: 88px;
		height: 88px;
		box-shadow: 0 17px 9px -7px rgba(32, 32, 32, 0.6);
	}

	.site-cont .slider.is-slider-ready .slick-prev {
		left: 19.0278%;
	}

	.site-cont .slider.is-slider-ready .slick-next {
		right: 19.0278%;
	}

	/*
	 * BEFORE/AFTER の中央寄せ（`centerMode: true`・`centerPadding: "25%"`）。
	 *
	 * 窓の左右に 25% の内余白を置くと、1 枚の幅は窓の中身の 50% になり、送った先の
	 * 1 枚が内余白の内側（中央）に止まる。両隣の 1 枚は内余白のところに半分ずつ見える。
	 *
	 * 🚨 **1 枚の左右の空きは外余白でなく内余白で持つ。**写しは 1 枚に `margin: 0 20px`
	 * を置く（1485〜1487 行目）。slick は外余白を引いて 1 枚の幅を決めるが、共通の横送りは
	 * 1 枚の幅を窓の幅にそろえて送るので、外余白が残ると 1 枚ごとに 40px ずつずれる.
	 */
	.site-cont #slider-ba.is-slider-ready .slick-list {
		padding: 0 25%;
	}

	.site-cont .index-ba .ba-slider #slider-ba.is-slider-ready .slider-list {
		margin: 0;
		padding: 0 20px;
		box-sizing: border-box;
	}
}

/*
 * 導入と来店予約の区画の `.box` の外余白（Bug #8508）。
 *
 * `main.css` の調査レポート向けの規則（節の囲み `.box`）が、`/pac/` の 2 つの `.box` にも
 * 当たっていた。直す前の測定で CDP が読んだ（`pa-verify-assets/B/8508-直す前-0926/`）.
 *
 * | 規則（`main.css`） | 当たる先 | 幅 1440 | 幅 375 |
 * |---|---|---|---|
 * | `:is(…) .box:not(:has(~ .box)) { margin-bottom: var(--pa-space-md) }`（0,3,0） | 2 つとも | 60px | 30px |
 * | `:is(…) .box { margin-top: var(--pa-article-block-gap) }`（0,2,0） | 導入の `.box` | 50px | 30px |
 *
 * 写しは 2 つの `.box` に下の外余白を置かない。導入の `.box` には上の外余白も置かない
 * （来店予約の `.box` の上の外余白 40px / 34px は、写しの `.index-contact .box` が並び順で
 * 勝っているので、そのまま効く）。導入の区画は、`.box` の外余白が包み（`.intro-concept`
 * と `.inner`）を突き抜けて区画の下に出ていた.
 *
 * 当たり先に写しの類名を 2 つ以上重ねて (0,4,0) にし、テーマの (0,3,0) に勝たせる.
 */
.site-cont .index-intro .intro-concept .box {
	margin-top: 0;
	margin-bottom: 0;
}

.site-cont .index-contact .inner .box {
	margin-bottom: 0;
}

/*
 * 導入の注記（「※ご利用にはオプション料金が必要です。」など）の行送り（Bug #8508）。
 * 写しは `ul` に行送りを置き（1.8333・携帯幅は 1.8）、`li` はそれを受け継ぐ。dev はテーマの
 * `li` の規則が直に当たり、1 行が 18px（幅 1440・移行元 22px）になっていた。
 * 段落の規則（上の `body .site-cont p`）と同じ考え方で、写しが `li` に直に置く規則には負ける.
 */
body .site-cont li {
	line-height: inherit;
}

/*
 * 携帯幅の本文の下の内余白（Bug #8508）。
 *
 * テーマは携帯幅で本文の器（`.page-content`）の下に 20px を置く。写し元は移行元の
 * スマホ版の器 `#other_contents { padding: 0 0 20px }` だが、**移行元の `/sp/pac/` は
 * この器を持たない**（下見で `.site-cont` の包みを読むと、すぐ上が `body` だった）。
 * Bug #3123 が数えた「器を持たないページ」の 1 つである。
 *
 * マンガの画面（`assets/comic/css/bridge.css` の
 * `body:has(.pa-page--comic-story) .page-content { padding-bottom: 0 }`）と同じ書き方で、
 * このページだけ 0 に戻す。テーマの (0,1,0) に (0,2,1) で勝つ.
 */
@media (max-width: 749px) {
	body:has(.pa-page--pac) .page-content {
		padding-bottom: 0;
	}
}