/*
 * ランディングページ
 *
 * **ここはテーマの持ち物。** LP の見た目はページのデザインであって、
 * プラグインの機能ではない。プラグイン側に置くと、ほかのサイトに入れた
 * ときに Alleingänger のデザインが付いてきてしまう。
 *
 * プラグインが持つのは部品（商品カード・予約フォーム・絞り込み）まで。
 * その部品を並べた面の意匠は、テーマがここで決める。
 *
 * 使い方：LP の本文の一番外側に candc-rental-lp を付ける。
 * 中の見出し・段落・リストは要素で当たるので、店側がブロックエディタで
 * 文章を足しても崩れない。原稿は docs/lp/ にある。
 */

/* ---------------------------------------------------------------------------
 * 体裁
 *
 * 「山行計画のメモ」の体裁。左に節番号、右に内容。
 * 番号は飾りではなく、**上から順に 1 本道で読む**という動線そのもの。
 *
 * **中身は素の HTML で書く。** ブロックで組むと、WordPress が挟む
 * wp-block-group__inner-container やコアのレイアウトが幅を握り、
 * こちらの指定と競合し続ける。CSS はどのみち全部ここが持つ。
 *
 * **裸の要素セレクタは :not([class]) で絞る。** LP の中には
 * プラグインの部品（予約フォーム・商品一覧）が同居する。
 * .candc-rental-lp p { color: 灰 } は部品の中の <p> にも当たる。
 *
 * 紹介ページの本文は**丸ごと 1 つの「カスタム HTML」ブロック**に入れる。
 * 分けて貼ると、エディタで開いたときに WordPress が整形して壊す。
 * ------------------------------------------------------------------------- */

.candc-rental-lp,
.candc-rental-lp *,
.candc-rental-lp *::before,
.candc-rental-lp *::after {
	box-sizing: border-box;
}

.candc-rental-lp {
	/* 色は 5 つだけ。**アクセントカラーは置かない。色は写真が持つ。** */
	--lp-ink: #16181a;
	--lp-paper: #ffffff;
	--lp-mist: #f4f5f6;
	--lp-rule: #dcdee0;
	--lp-muted: #6a7075;

	/* 節番号と縦罫が入る左の帯。狭い画面では 0 に落とす。 */
	--lp-gutter: clamp(0px, 11vw, 152px);
	--lp-lead: clamp(0px, 4vw, 56px);
	--lp-gap: clamp(4rem, 9vw, 8rem);
	/*
	 * 読み幅。**1 行が長くなりすぎない範囲で、器を 1000px 以上に取る。**
	 * 本文は 16px で組むので、58rem でおよそ 55〜60 字／行。
	 */
	--lp-measure: 58rem;

	/* 画面の端に文字を付けないための最小の余白。 */
	--lp-edge: 1.2rem;

	/*
	 * 節番号と見出しの間隔。**帯の幅とは別に持つ。**
	 * 帯の左端に置くと、番号が画面の縁に貼り付き、見出しから遠すぎて
	 * どの見出しの番号か分からなくなる。
	 */
	--lp-number-gap: 3.2rem;

	/*
	 * 節の索引を置く左の帯。**読む列の左端は、この帯の外側に揃える。**
	 * 索引だけを内側に寄せると、器の中で中途半端な位置に浮く。
	 */
	--lp-rail: 8.25rem;

	/*
	 * 文章の器の幅。**中央に置く。**
	 *
	 * 以前は左に寄せた帯（--lp-gutter）で位置を決めていた。器の中に
	 * 収まっているうちは成り立つが、**LP は画面いっぱいの面**なので、
	 * 文章が左半分に寄り、右が丸ごと空いて見えた。
	 * 番号ぶんと端の余白を足した幅を中央に置けば、左右が釣り合う。
	 */
	--lp-page: 1000px;

	/* テーマのヘッダーは position: fixed。その高さぶんは空ける。 */
	--lp-header: 65px;

	--lp-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--lp-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;

	position: relative;
	counter-reset: candc-section;
	color: var(--lp-ink);
	font-family: var(--lp-sans);
	font-size: 16px;
	line-height: 1.9;
}

/*
 * **クラスを持つものには触らない。** LP の中には予約フォームや商品一覧が
 * 同居する。裸の要素で色や余白を当てると、部品の見た目まで奪う（実際に
 * 絞り込みのチップを黒地に黒で潰した）。LP 自身の文章は裸の p・h2・a なので、
 * クラスの有無で線を引けば両方が成り立つ。
 */
.candc-rental-lp a:not([class]) {
	color: inherit;
	text-decoration: none;
}

/* 本文の中のリンクだけ下線を引く。部品はクラスを持つので触らない。 */
.candc-rental-lp p a:not([class]) {
	text-decoration: underline;
	text-decoration-color: var(--lp-rule);
	text-underline-offset: 0.25em;
}

.candc-rental-lp p a:not([class]):hover {
	text-decoration-color: var(--lp-ink);
}

/* ---- ファーストビュー ---- */

/*
 * 写真の上に言葉を置く。**道具の物撮りではなく、その道具が要る山の写真。**
 * 借りるかどうかを決める前に、行き先を思い出してもらう。
 */
/*
 * ここだけ器を抜けて画面いっぱいに広げる。**器の中に収めた写真は弱い。**
 *
 * 左右のマージンを「中央から画面半分ぶん」戻すことで、親の幅に関係なく
 * 端まで届く。横スクロールが出ないよう、テーマ側で
 * .rental-screen に overflow-x: hidden を当ててある。
 */
.candc-rental-lp__hero {
	position: relative;
	display: flex;
	align-items: flex-end;

	/* 文字を節と同じ器に乗せる。ここだけ左端に置くと、下と揃わない。 */
	justify-content: center;
	width: 100vw;
	max-width: 100vw;
	min-height: clamp(26rem, 68vh, 42rem);
	margin: 0 calc( 50% - 50vw );
	padding: clamp(1.6rem, 4vw, 4.5rem) clamp(1.6rem, 6vw, 5rem);
	overflow: hidden;
	isolation: isolate;
}

.candc-rental-lp__hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* 下から立ち上げる。空の明るいところでも文字が読める。 */
.candc-rental-lp__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 16, 18, 20, 0.82 ) 0%, rgba( 16, 18, 20, 0.34 ) 48%, rgba( 16, 18, 20, 0.08 ) 100% );
	z-index: -1;
}

/*
 * 雪の稜線は明るい。**白い文字が白い斜面に乗ると消える**ので、
 * 暗転を重ねたうえで、文字自体にも薄く影を敷く。
 */
.candc-rental-lp__hero-body {
	width: 100%;
	max-width: var(--lp-page);
	padding-left: var(--lp-rail);
	padding-right: var(--lp-edge);
	color: #fff;
	text-shadow: 0 1px 16px rgba( 16, 18, 20, 0.55 );
}

.candc-rental-lp__eyebrow {
	display: block;
	margin-bottom: 1.6rem;
	font-size: 0.75rem;
	letter-spacing: 0.34em;

	/*
	 * 明るい雪の上に乗ることがある。**薄くしすぎると消える。**
	 * 小さく字間を開けてある時点で十分に控えめなので、濃度では引かない。
	 */
	opacity: 0.9;
}

.candc-rental-lp__hero h1 {
	margin: 0 0 1.2rem;
	padding: 0;
	color: #fff;
	font-family: var(--lp-serif);
	font-size: clamp(1.85rem, 4vw, 3.25rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.06em;
}

/*
 * 詳細度を上げて白を通す。節の段落は灰色にしてあるので、
 * 同じ強さだと写真の上で灰色が勝ち、文字が消える。
 */
.candc-rental-lp .candc-rental-lp__hero p:not([class]) {
	max-width: 34rem;
	margin: 0 0 2.2rem;
	color: #fff;
	font-size: clamp(0.95rem, 1.3vw, 1.05rem);
}

/* 写真の上のボタンは輪郭で置く。塗ると、敷いた山を隠してしまう。 */
.candc-rental-lp a.candc-rental-lp__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	min-height: 3.1rem;
	padding: 0 1.9em;
	border: 1px solid rgba( 255, 255, 255, 0.8 );
	border-radius: 999px;
	color: #fff;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	transition: background-color 0.2s var(--candc-ease), color 0.2s var(--candc-ease);
}

.candc-rental-lp a.candc-rental-lp__cta:hover,
.candc-rental-lp a.candc-rental-lp__cta:focus-visible {
	background: #fff;
	color: var(--lp-ink);
}

@media (prefers-reduced-motion: reduce) {
	.candc-rental-lp a.candc-rental-lp__cta {
		transition: none;
	}
}

/* ---- 要点の帯 ---- */

/*
 * ファーストビューと同じく器を抜ける。**片方だけ端まで伸びていると、
 * 帯が内側に落ち込んで見える。** 仕切りの罫も端から端まで通す。
 */
.candc-rental-lp__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	width: 100vw;
	max-width: 100vw;
	margin: 0 calc( 50% - 50vw );
	padding: 0;
	border-bottom: 1px solid var(--lp-rule);
	list-style: none;
}

.candc-rental-lp__facts li {
	margin: 0;
	padding: 1.6rem 1.4rem;
	color: var(--lp-muted);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}

/* 両端の文字は、ファーストビューの本文と左右をそろえる。 */
.candc-rental-lp__facts li:first-child {
	padding-left: clamp(1.6rem, 6vw, 5rem);
}

.candc-rental-lp__facts li:last-child {
	padding-right: clamp(1.6rem, 6vw, 5rem);
}

/* ---- 節 ---- */

/*
 * 節・本文・パンくずは同じ器に乗せる。**幅と位置を 1 か所で決める。**
 * 左に番号ぶん、左右に端の余白。中身（表・よくある質問）は器いっぱいに伸びる。
 */
.candc-rental-lp__sec,
.candc-rental-lp__main,
.candc-rental-lp__head {
	max-width: var(--lp-page);
	margin-left: auto;
	margin-right: auto;

	/*
	 * 左は索引の帯ぶん空ける。**索引がある節も無い節も、
	 * 読む列の左端を同じにする。**
	 */
	padding-left: var(--lp-rail);
	padding-right: var(--lp-edge);
}

/* 索引を置く節だけ、その帯を padding ではなく列として使う。 */
.candc-rental-lp__main {
	padding-left: 0;
}

/*
 * 本文と索引を並べる。
 *
 * **左の余白を索引に使う。** いままでは小さな番号が 1 つ浮いているだけで、
 * 12 節ある LP のどこを読んでいるのか分からなかった。
 */
.candc-rental-lp__main {
	display: grid;
	grid-template-columns: var(--lp-rail) minmax( 0, 1fr );
}

.candc-rental-lp__body {
	min-width: 0;
}

.candc-rental-lp__sec {
	position: relative;
	padding-top: var(--lp-gap);
}


/*
 * 節番号。ルートの縦罫の脇に置く。
 * 番号は「上から順に読む」という性質そのものなので、情報として振っている。
 */
.candc-rental-lp__sec::before {
	counter-increment: candc-section;
	content: counter( candc-section, decimal-leading-zero );
	position: absolute;
	top: calc( var(--lp-gap) + 0.5rem );
	left: 0;
	color: var(--lp-muted);
	font-family: var(--lp-serif);
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	font-variant-numeric: tabular-nums;
}

.candc-rental-lp h2:not([class]) {
	max-width: 24em;
	margin: 0 0 0.9rem;
	padding: 0;
	font-family: var(--lp-serif);
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0.06em;
}

.candc-rental-lp p:not([class]) {
	max-width: var(--lp-measure);
	margin: 0 0 1.2rem;
	padding: 0;
	color: var(--lp-muted);
}

.candc-rental-lp__sec > p:last-child {
	margin-bottom: 0;
}

/* ---- こんな時に（写真つきカード） ---- */

.candc-rental-lp__cases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.25rem;
	margin: 1.9rem 0 0;
	padding: 0;
	list-style: none;
}

.candc-rental-lp__cases li {
	margin: 0;
}

.candc-rental-lp__cases img {
	display: block;
	width: 100%;
	height: 11.9rem;
	object-fit: cover;
	margin-bottom: 1rem;
}

.candc-rental-lp__cases strong {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--lp-serif);
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.candc-rental-lp__cases li {
	color: var(--lp-muted);
	font-size: 0.9rem;
	line-height: 1.85;
}

/* ---- 写真とことば ---- */

.candc-rental-lp__split {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(1.4rem, 3.5vw, 2.75rem);
	align-items: center;
}

/*
 * 高さは縦横比で決める。**`height: 100%` は使わない。**
 * 親が align-items: center だと引き伸ばされず、高さが 0 に潰れて
 * 画像が消える（本番で実際に消えていた）。
 */
.candc-rental-lp__split img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---- 借り方 ---- */

.candc-rental-lp__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 2.25rem;
	margin: 1.9rem 0 1.6rem;
	padding: 0;
	list-style: none;
	counter-reset: candc-step;
}

.candc-rental-lp__steps li {
	margin: 0;
	padding: 0;
	color: var(--lp-muted);
	font-size: 0.9rem;
	line-height: 1.85;
}

.candc-rental-lp__steps li::before {
	counter-increment: candc-step;
	content: "0" counter( candc-step );
	display: block;
	margin-bottom: 0.7rem;
	color: var(--lp-muted);
	font-family: var(--lp-serif);
	font-size: 1.85rem;
	line-height: 1;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.candc-rental-lp__steps strong {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--lp-ink);
	font-family: var(--lp-serif);
	font-size: 1.12rem;
	font-weight: 700;
}

/* ---- 安心して借りるために（点検票） ---- */

/*
 * 事実の羅列で終わらせない。**返却のたびに 1 点ずつ点検して記録している**
 * ことがこの事業の信頼の核なので、点検票の体裁にする。
 */
.candc-rental-lp__band {
	margin-top: 1.9rem;
	padding: clamp(1.5rem, 3.5vw, 2.9rem);
	background: var(--lp-mist);
}

.candc-rental-lp__band-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.candc-rental-lp__band-head h2:not([class]) {
	margin: 0;
}

.candc-rental-lp__band-head span {
	color: var(--lp-muted);
	font-size: 0.7rem;
	letter-spacing: 0.24em;
}

.candc-rental-lp__checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: candc-check;
}

.candc-rental-lp__checks li {
	margin: 0;
	padding: 1.6rem 1.5rem 1.7rem;
	background: var(--lp-paper);
	color: var(--lp-muted);
	font-size: 0.82rem;
	line-height: 1.85;
}

.candc-rental-lp__checks svg {
	display: block;
	margin-bottom: 1rem;
}

/* 通し番号はアイコンの向かい側へ。票らしい体裁になる。 */
.candc-rental-lp__checks li > span:first-of-type {
	counter-increment: candc-check;
	float: right;
	color: var(--lp-muted);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	font-variant-numeric: tabular-nums;
}

.candc-rental-lp__checks li > span:first-of-type::before {
	content: "0" counter( candc-check );
}

.candc-rental-lp__checks strong {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--lp-ink);
	font-family: var(--lp-serif);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ---- よくある質問 ---- */

.candc-rental-lp__faq {
	margin: 0;
	padding: 1.15rem 0.15rem;
	border-bottom: 1px solid var(--lp-rule);
}

.candc-rental-lp__faq:first-of-type {
	border-top: 1px solid var(--lp-rule);
	margin-top: 1.6rem;
}

.candc-rental-lp__faq summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	font-family: var(--lp-serif);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.6;
	cursor: pointer;
	list-style: none;
}

.candc-rental-lp__faq summary::-webkit-details-marker {
	display: none;
}

/* 開いているかどうかを、記号 1 つで示す。 */
.candc-rental-lp__faq summary::after {
	content: "＋";
	flex: none;
	color: var(--lp-muted);
	font-family: var(--lp-sans);
	font-weight: 400;
}

.candc-rental-lp__faq[open] summary::after {
	content: "−";
}

.candc-rental-lp__faq p:not([class]) {
	max-width: var(--lp-measure);
	margin: 0.7rem 0 0;
	font-size: 0.9rem;
}

/* ---- 本文（編集画面で書くところ） ---- */

/*
 * 本文はクラシックの編集画面で書く。見出し・段落・表・箇条書きが
 * 上から並ぶだけで、組み替えるものではない（並び順はテンプレートが持つ）。
 *
 * **体裁は直接の子で当てる。** 中にプラグインの部品（商品一覧・予約
 * フォーム）が入っても、その中の p や h2 に届かないようにするため。
 * 部品は div や section として直接の子になり、中身は 1 段深いところにいる。
 *
 * **左の帯は器で取る。子ひとつずつに padding を当てない。**
 * テーマに .rental-screen #main h2 { padding-left: 0 } があり、
 * id を含む詳細度でこちらの指定を打ち消してしまう。器でずらせば争わない。
 */
/* 幅と位置は上の器の指定が持つ。ここは中身の体裁だけ。 */

.candc-rental-lp__body > h2 {
	position: relative;
	max-width: 24em;
	margin: var(--lp-gap) 0 0.9rem;
	scroll-margin-top: calc( var(--lp-header) + 1.5rem );
	font-family: var(--lp-serif);
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0.06em;
}

/* 節番号は見出しから出す。**節を足すと番号も動く。** */
.candc-rental-lp__body > h2::before {
	counter-increment: candc-section;
	content: counter( candc-section, decimal-leading-zero );
	position: absolute;
	top: 0.5rem;
	left: calc( -1 * var(--lp-rail) );
	color: var(--lp-muted);
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	font-variant-numeric: tabular-nums;
}

.candc-rental-lp__body > h3 {
	max-width: 24em;
	margin: 2.2rem 0 0.7rem;
	font-family: var(--lp-serif);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/*
 * **節の書き出しだけ、少し大きく濃くする。**
 * 同じ大きさの段落が続くと、どこから読み始めるか分からない。
 * 見出しの直後だけを引きにすると、読む足がかりができる。
 */
.candc-rental-lp__body > h2 + p {
	color: var(--lp-ink);
	font-size: 1.05rem;
	line-height: 1.95;
}

/* 本文のいちばん最初の段落は、ページ全体の引きとしてもう少し大きく。 */
.candc-rental-lp__body > p:first-child {
	max-width: 36rem;
	color: var(--lp-ink);
	font-size: 1.15rem;
	line-height: 1.95;
}

.candc-rental-lp__body > p,
.candc-rental-lp__body > ul,
.candc-rental-lp__body > ol,
.candc-rental-lp__body > blockquote,
.candc-rental-lp__body > figure,
.candc-rental-lp__body > table {
	max-width: var(--lp-measure);
	margin: 0 0 1.2rem;
	color: var(--lp-muted);
}

/*
 * 箇条書きの点は、既定の●を使わない。**丸は主張が強く、行が詰まって見える。**
 * 短い横罫にして、行間を広げる。
 */
.candc-rental-lp__body > ul {
	padding-left: 0;
	list-style: none;
}

.candc-rental-lp__body > ul > li {
	position: relative;
	padding-left: 1.9em;
	margin-bottom: 0.9rem;
}

.candc-rental-lp__body > ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.95em;
	width: 1em;
	height: 1px;
	background: var(--lp-rule);
}

.candc-rental-lp__body > ol {
	padding-left: 0;
}

.candc-rental-lp__body > ol li {
	margin-bottom: 0.4rem;
}

.candc-rental-lp__body > figure {
	color: inherit;
}

.candc-rental-lp__body > figure img {
	display: block;
	width: 100%;
	height: auto;
}

.candc-rental-lp__body > figure figcaption {
	margin-top: 0.6rem;
	color: var(--lp-muted);
	font-size: 0.8rem;
}

.candc-rental-lp__body strong {
	color: var(--lp-ink);
	font-weight: 700;
}

.candc-rental-lp__body > p a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--lp-rule);
	text-underline-offset: 0.25em;
}

.candc-rental-lp__body > p a:hover {
	text-decoration-color: var(--lp-ink);
}

@media (max-width: 60rem) {
	/*
	 * 狭い画面では索引を**横に流す**。縦に置くと場所を食い、
	 * 本文が読める幅を失う。帯が無くなるので、左の余白も戻す。
	 */
	.candc-rental-lp__main {
		display: block;
		padding-left: var(--lp-edge);
	}

	.candc-rental-lp__sec,
	.candc-rental-lp__head,
	.candc-rental-lp__closing-inner {
		padding-left: var(--lp-edge);
	}

	.candc-rental-lp__sec::before {
		position: static;
		display: block;
		margin-bottom: 0.6rem;
	}

	.candc-rental-lp__index a span {
		-webkit-line-clamp: 1;
	}

	.candc-rental-lp__index {
		position: static;
		padding-right: 0;
		max-height: none;
		margin: var(--lp-gap) calc( -1 * var(--lp-edge) ) 0;
		padding: 0.9rem var(--lp-edge);
		border-top: 1px solid var(--lp-rule);
		border-bottom: 1px solid var(--lp-rule);
		overflow-x: auto;
	}

	.candc-rental-lp__index ol {
		display: flex;
		gap: 1.4rem;
	}

	.candc-rental-lp__index a {
		padding: 0;
		white-space: nowrap;
	}

}

@media (max-width: 46rem) {
	.candc-rental-lp__sec,
	.candc-rental-lp__head,
	.candc-rental-lp__closing-inner {
		padding-left: var(--lp-edge);
	}

	.candc-rental-lp__body > h2::before {
		position: static;
		display: block;
		margin-bottom: 0.6rem;
	}
}

/*
 * 索引があるときは、**番号は索引だけが持つ**。
 * 見出しの脇にも出すと二重になり、どちらを見ればいいのか分からない。
 * 予約や商品一覧のような、読む順のうちに入らない節の番号も落とす。
 */
.candc-rental-lp__main:has( .candc-rental-lp__index ) .candc-rental-lp__body > h2::before,
.candc-rental-lp:has( .candc-rental-lp__index ) .candc-rental-lp__sec::before {
	content: none;
}

/* ---- 節の索引 ---- */

/*
 * **追従させる。** 読み進めるあいだ、どこにいるかが常に見えている状態にする。
 * 印や色を足さず、**いま読んでいる節だけを墨にして、ほかを弱める。**
 */
.candc-rental-lp__index {
	/* 帯からはみ出させない。写真や本文に文字が乗る。 */
	min-width: 0;
	padding-right: 1.4rem;
	overflow-wrap: anywhere;
	position: sticky;
	top: calc( var(--lp-header) + 1.5rem );
	align-self: start;
	margin-top: var(--lp-gap);
	padding-top: 0.4rem;
	max-height: calc( 100vh - var(--lp-header) - 3rem );
	overflow-y: auto;
	scrollbar-width: none;
}

.candc-rental-lp__index::-webkit-scrollbar {
	width: 0;
}

.candc-rental-lp__index ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.candc-rental-lp__index a {
	display: flex;
	gap: 0.7em;
	padding: 0.32rem 0;
	color: var(--lp-muted);
	font-size: 0.7rem;
	line-height: 1.6;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: color 0.2s var(--candc-ease, ease);
}

/*
 * 見出しが長いときは 2 行で止める。**帯の中で 4 行に折れると、
 * 索引そのものが読みものになってしまう。** 行き先が分かれば足りる。
 */
.candc-rental-lp__index a span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.candc-rental-lp__index em {
	flex: none;
	font-style: normal;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.14em;
}

.candc-rental-lp__index a:hover,
.candc-rental-lp__index a:focus-visible {
	color: var(--lp-ink);
}

/* いま読んでいる節。 */
.candc-rental-lp__index a.is-current {
	color: var(--lp-ink);
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.candc-rental-lp__index a {
		transition: none;
	}
}

/* ---- 予約へ戻る導線 ---- */

/*
 * 本文の途中に 1 つだけ置く。**節の切れ目に、静かに。**
 * 面や色を足さず、余白で独立させる。
 */
.candc-rental-lp__body > .candc-rental-lp__midcta {
	max-width: none;
	margin: var(--lp-gap) 0;
	padding-top: 2.2rem;
	border-top: 1px solid var(--lp-rule);
}

/* 読み切ったところ。関連 LP より前に置く。 */
.candc-rental-lp__back p {
	margin: 0;
}

/* ---- 表を横に流す器 ---- */

/*
 * **狭い画面で 3 列の表を潰さない。** 列を折り返すと、項目と値の
 * 対応が壊れて読めなくなる。形のまま横へ送る。
 */
.candc-rental-lp__body > .candc-rental-lp__scroll {
	max-width: none;
	margin: 2.4rem calc( -1 * var(--lp-edge) ) 2.4rem 0;
	overflow-x: auto;
	background: var(--lp-mist);
}

.candc-rental-lp__body > .candc-rental-lp__scroll > table {
	margin: 0;
	width: 100%;
	min-width: 30rem;
}

/* ---- 本文の途中に敷く写真 ---- */

/*
 * **画面いっぱいで切る。** 器の中に収めると、ただの挿絵になって
 * 「ここで一度切れる」という働きをしない。
 */
/*
 * **器の中の figure より詳細度を上げる。** 同じ土俵だと
 * .candc-rental-lp__body > figure の読み幅に閉じ込められ、ただの挿絵になる。
 */
.candc-rental-lp__body > .candc-rental-lp__break {
	/*
	 * **器の端まで**。画面いっぱい（100vw）にすると、器の中心と画面の
	 * 中心がずれているぶんだけ右にはみ出し、横スクロールが出る。
	 * 画面いっぱいはヒーローだけの役割にする。
	 */
	margin: var(--lp-gap) calc( -1 * var(--lp-edge) ) var(--lp-gap) 0;
	width: auto;
	max-width: none;
	padding: 0;
}

.candc-rental-lp__body > .candc-rental-lp__break img {
	display: block;
	width: 100%;
	height: clamp(14rem, 34vh, 24rem);
	object-fit: cover;
}

/* ---- 本文の中の表と手順 ---- */

/*
 * 表。**枠で囲まず、行のあいだにだけ罫を引く。**
 * 表はトンマナで線を許した数少ない場所（行が続くことを示すため）。
 *
 * 直接の子に限る。予約フォームを本文に置いたときに、その中の
 * 集計の表まで巻き込まないため。
 */
/*
 * 表は**霧の面に載せる**。文章が続くページで、ここだけ「見るところ」に変わる。
 * 面は器の外まで少し広げて、文章より前に出す。
 */
.candc-rental-lp__body > table {
	max-width: none;
	width: calc( 100% + var(--lp-edge) * 2 );
	margin: 2.4rem calc( -1 * var(--lp-edge) ) 2.4rem;
	padding: 0 var(--lp-edge);
	border-collapse: collapse;
	background: var(--lp-mist);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

.candc-rental-lp__body > table thead + tbody tr:first-child > * {
	padding-top: 1.1rem;
}

.candc-rental-lp__body > table th,
.candc-rental-lp__body > table td {
	padding: 0.9rem 1.4rem;
	border: 0;
	border-bottom: 1px solid var(--lp-paper);
	text-align: left;
	vertical-align: top;
	font-weight: 400;
	color: var(--lp-muted);
}

.candc-rental-lp__body > table thead th {
	padding-top: 1.2rem;
	padding-bottom: 0.7rem;
	font-size: 0.7rem;
	letter-spacing: 0.22em;
}

.candc-rental-lp__body > table tbody tr > *:first-child {
	color: var(--lp-ink);
	font-family: var(--lp-serif);
	letter-spacing: 0.04em;
}

/* 最後の行の罫は落とす。表が箱に見えなくなる。 */
.candc-rental-lp__body > table tbody tr:last-child th,
.candc-rental-lp__body > table tbody tr:last-child td {
	border-bottom: 0;
}

/* 手順のリスト。番号は情報なので残す。 */
.candc-rental-lp__body > ol {
	counter-reset: candc-step;
	list-style: none;
	padding-left: 0;
}

.candc-rental-lp__body > ol > li {
	position: relative;
	padding-left: 3.2rem;
	margin-bottom: 1rem;
}

.candc-rental-lp__body > ol > li::before {
	counter-increment: candc-step;
	content: counter( candc-step, decimal-leading-zero );
	position: absolute;
	left: 0;
	top: 0.1em;
	color: var(--lp-muted);
	font-family: var(--lp-serif);
	font-size: 1.1rem;
	font-variant-numeric: tabular-nums;
}

/* ---- パンくず ---- */

/*
 * **どこにいるかを 1 行で示すだけ。** 装飾しない。
 * LP は検索から直接来る面なので、ここが唯一の「戻り道」になる。
 */
/*
 * パンくずはヒーロー（または文字だけの頭）の中に置く。
 * **独立した行にすると、ヘッダーとの間に白い帯ができて浮く。**
 */
.candc-rental-lp__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 1.4rem;
	color: var(--lp-muted);
	font-size: 0.75rem;
	line-height: 1.7;
	letter-spacing: 0.06em;
}

/* 写真の上では白で。ヒーローの文字と同じ扱いにする。 */
.candc-rental-lp__hero .candc-rental-lp__crumbs {
	color: rgba( 255, 255, 255, 0.85 );
}

.candc-rental-lp__hero .candc-rental-lp__crumbs a:hover,
.candc-rental-lp__hero .candc-rental-lp__crumbs span[aria-current] {
	color: #fff;
}

/*
 * LP では main の上余白を落とす。**写真を画面の上まで通す。**
 * テーマは .rental-screen #main に 24px を当てているので、それを外す。
 */
#main.candc-lp-main {
	padding-top: 0;
}

.candc-rental-lp__crumbs a {
	color: inherit;
	text-decoration: none;
}

.candc-rental-lp__crumbs a:hover {
	color: var(--lp-ink);
}

.candc-rental-lp__crumbs span[aria-current] {
	color: var(--lp-ink);
}

/* ---- あわせて読む ---- */

.candc-rental-lp__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
	margin: 1.9rem 0 0;
	padding: 0;
	list-style: none;
}

.candc-rental-lp__links a {
	display: block;
	padding-top: 1rem;
	border-top: 1px solid var(--lp-rule);
	color: inherit;
	text-decoration: none;
}

.candc-rental-lp__links strong {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--lp-serif);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.candc-rental-lp__links span {
	display: block;
	color: var(--lp-muted);
	font-size: 0.85rem;
}

.candc-rental-lp__links a:hover strong {
	text-decoration: underline;
	text-decoration-color: var(--lp-rule);
	text-underline-offset: 0.25em;
}

/* ---- 最下部の CTA ---- */

/*
 * 読み終わった人に、次の一歩を 1 つだけ出す。**選択肢を並べない。**
 */
/*
 * 最下部の CTA は**面を端まで伸ばし、中身だけ器にそろえる**。
 * 器ごと中央に置くと、色の付いた面が宙に浮いて見える。
 */
.candc-rental-lp__closing {
	max-width: none;
	margin-top: var(--lp-gap);
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
	background: var(--lp-mist);
}

.candc-rental-lp__closing-inner {
	max-width: var(--lp-page);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--lp-rail);
	padding-right: var(--lp-edge);
}

/* 次の一歩に番号は要らない。読む順のうちではない。 */
.candc-rental-lp__closing::before {
	content: none;
}

/* 紙の上に置くボタン。写真の上の輪郭ボタンとは別。 */
.candc-rental-lp a.candc-rental-lp__cta--ink {
	border-color: var(--lp-ink);
	color: var(--lp-ink);
}

.candc-rental-lp a.candc-rental-lp__cta--ink:hover,
.candc-rental-lp a.candc-rental-lp__cta--ink:focus-visible {
	background: var(--lp-ink);
	color: var(--lp-paper);
}

/* ---- 写真を使わないページ頭（配送・キャンセル・補償など） ---- */

/*
 * 規定を説明するページに写真は要らない。**行き先を思い出させる面ではないから。**
 * ヒーローと同じ役割を、余白と書体だけで受け持つ。
 */
.candc-rental-lp__head {
	margin: 0 0 var(--lp-gap);
	padding-top: clamp(2.5rem, 7vw, 5.5rem);
}

.candc-rental-lp__head .candc-rental-lp__eyebrow {
	margin-bottom: 1.2rem;
	color: var(--lp-muted);
	opacity: 1;
}

.candc-rental-lp__head h1 {
	margin: 0 0 1.1rem;
	padding: 0;
	font-family: var(--lp-serif);
	font-size: clamp(1.75rem, 3.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0.06em;
}

.candc-rental-lp__head p {
	margin: 0;
	color: var(--lp-muted);
}

/* ---- 予約フォームを置く器（単品 LP） ---- */

/*
 * 単品の LP では、商品ページへ送らずに **その場で予約させる**。
 * [candc_rental_item] をここに置く。
 *
 * 中身はプラグインの部品なので、**見た目に手を出さない。** この器が持つのは
 * 位置と幅だけ。LP の文章向けの指定（色・余白・読み幅）は :not([class]) で
 * 部品に届かないようにしてある。
 */
.candc-rental-lp__embed {
	margin: 2.4rem 0 0;
	max-width: 46rem;
}

/* ---- 表（比較・スペック） ---- */

/*
 * **線を引いてよいのは、行が続くことを示すとき。** 表はその数少ない例外。
 * 枠では囲まず、行のあいだにだけ罫を引く。
 */
.candc-rental-lp__table {
	/* 表のあとに一言そえる形が多い。下を空けないと、行がもう 1 つあるように見える。 */
	margin: 1.9rem 0 1.6rem;
	overflow-x: auto;
}

.candc-rental-lp__table table {
	width: 100%;
	min-width: 22rem;
	border-collapse: collapse;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

.candc-rental-lp__table th,
.candc-rental-lp__table td {
	padding: 0.85rem 1.1rem 0.85rem 0;
	border-bottom: 1px solid var(--lp-rule);
	text-align: left;
	vertical-align: top;
	font-weight: 400;
}

.candc-rental-lp__table thead th {
	padding-bottom: 0.6rem;
	color: var(--lp-muted);
	font-size: 0.7rem;
	letter-spacing: var(--candc-label-tracking, 0.22em);
	text-transform: uppercase;
}

.candc-rental-lp__table tbody th {
	width: 34%;
	font-family: var(--lp-serif);
	letter-spacing: 0.04em;
}

.candc-rental-lp__table td {
	color: var(--lp-muted);
}

/* 最後の行の罫は落とす。表が箱に見えなくなる。 */
.candc-rental-lp__table tbody tr:last-child th,
.candc-rental-lp__table tbody tr:last-child td {
	border-bottom: 0;
}

/* ---- 狭い画面 ---- */

@media (max-width: 46rem) {
	.candc-rental-lp__sec::before {
		position: static;
		display: block;
		margin-bottom: 0.6rem;
	}

	.candc-rental-lp__split {
		grid-template-columns: minmax(0, 1fr);
	}

	.candc-rental-lp__facts li {
		border-left: 0;
		border-top: 1px solid var(--lp-rule);
		padding: 1rem clamp(1.6rem, 6vw, 5rem);
	}

	.candc-rental-lp__facts li:first-child {
		border-top: 0;
	}
}

/*
 * 横に流した索引は、いる場所を示せない。**見出しの側に番号を戻す。**
 *
 * ここはファイルの末尾に置く。上の「索引があるときは番号を出さない」と
 * 詳細度が同じなので、**後に書いた方が勝つ**。
 */
@media (max-width: 60rem) {
	.candc-rental-lp__main:has( .candc-rental-lp__index ) .candc-rental-lp__body > h2::before {
		counter-increment: candc-section;
		content: counter( candc-section, decimal-leading-zero );
		position: static;
		display: block;
		margin-bottom: 0.6rem;
	}
}